/* M23 Biểu đồ kỹ thuật: khung dùng chung của bieu_do.js (docs/bieu_do/SPEC.md mục 3, 4.8, 6).
   Màu lấy từ biến của trang; thời gian, đường cong chuyển tiếp lấy từ chuyen_dong.css. */

.bdkt {
  position: relative;
  min-height: 240px;
  background-color: var(--mat);
  border: 1px solid var(--vien);
  border-radius: 10px;
  overflow: hidden;
}
.bdkt-dayDu {
  height: 560px;
}
.bdkt-gon {
  height: 380px;
}
.bdkt-khung {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity var(--t-mau) var(--e-mau);
}
.bdkt-cho .bdkt-khung {
  opacity: 0.35;
}
/* Chú giải chỉ báo trên biểu đồ (chủ dự án 26.10.2026, CAU_HOI_MO câu 69): lớp phủ không nhận chuột
   nên kéo, phóng đi thẳng xuống biểu đồ; chỉ nút nhận chuột khi đang hiện. Mỗi khung một khối ở
   góc trên trái, bieu_do.js đặt top, left, max-width theo khung. */
.bdkt-cg {
  position: absolute;
  inset: 0;
  /* Trên các canvas của thư viện (có canvas mang z-index riêng): không có thì nút bút chì, X
     hiện nhưng chuột thật bấm rơi xuống canvas (chủ dự án 26.10.2026). Dưới hộp nổi (4 trở lên). */
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--t-mau) var(--e-mau);
}
.bdkt-cho .bdkt-cg {
  opacity: 0.35;
}
.bdkt-cgKhung {
  position: absolute;
  top: 0;
  left: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-width: 0;
}
.bdkt-cgDs {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  max-width: 100%;
}
.bdkt-cgDs[hidden] {
  display: none;
}
.bdkt-cgDong {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  min-height: 20px;
  padding: 0 2px 0 4px;
  border-radius: 4px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  line-height: 20px;
  white-space: nowrap;
  color: var(--chu2);
  background-color: transparent;
  background-color: color-mix(in srgb, var(--mat) 72%, transparent);
  transition:
    opacity var(--t-mau) var(--e-mau),
    background-color var(--t-mau) var(--e-mau);
}
.bdkt-cgRe,
.bdkt-cgDong:focus-within {
  background-color: color-mix(in srgb, var(--mat2) 92%, transparent);
}
.bdkt-cgTen {
  flex: none;
  color: var(--chu);
}
.bdkt-cgSo {
  display: inline-flex;
  flex: 0 1 auto;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.bdkt-cgSo > span:empty {
  display: none;
}
/* Ẩn bằng nút con mắt: dòng mờ, rê chuột hoặc Tab tới thì rõ lại để bấm hiện. */
.bdkt-cgAn {
  opacity: 0.55;
}
.bdkt-cgAn.bdkt-cgRe,
.bdkt-cgAn:focus-within {
  opacity: 1;
}
.bdkt-cgAn .bdkt-cgTen {
  color: var(--chu3);
}
.bdkt-cgNut {
  display: inline-flex;
  flex: none;
  gap: 1px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-mau) var(--e-mau);
}
.bdkt-cgRe .bdkt-cgNut,
.bdkt-cgDong:focus-within .bdkt-cgNut {
  opacity: 1;
  pointer-events: auto;
}
.bdkt-cgB {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background-color: transparent;
  color: var(--chu2);
  cursor: pointer;
  transition:
    color var(--t-mau) var(--e-mau),
    background-color var(--t-mau) var(--e-mau);
}
.bdkt-cgB:hover {
  color: var(--chu);
  background-color: rgba(var(--phu-rgb), 0.08);
}
.bdkt-cgB:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 1px;
}
/* Nút thu gọn, mở danh sách chú giải khung giá: luôn hiện, nhận chuột. */
.bdkt-cgGon {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: auto;
  min-width: 20px;
  padding: 0 3px;
  pointer-events: auto;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  background-color: color-mix(in srgb, var(--mat) 72%, transparent);
}
/* Thiết bị cảm ứng không có rê chuột: nút luôn hiện, ô chạm 26 px (dòng vẫn trong 40 px chừa). */
@media (hover: none) {
  .bdkt-cgNut {
    opacity: 1;
    pointer-events: auto;
  }
  .bdkt-cgDong {
    min-height: 26px;
  }
  .bdkt-cgB {
    width: 26px;
    height: 26px;
  }
  .bdkt-cgGon {
    min-width: 26px;
  }
}
/* Khổ hẹp (câu 91): dòng chú giải xuống hàng thay vì cắt số. Tên rồi ba nút; các cụm số nối theo,
   hết chỗ thì cả cụm xuống hàng dưới (mỗi cụm như "Banker 12,3 (62%)" không tách). Khối khung dưới
   cao hơn 40 px thì bieu_do.js chừa phía trên theo khối. */
@media (max-width: 719px) {
  .bdkt-cgDong {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .bdkt-cgNut {
    order: 1;
  }
  .bdkt-cgSo {
    order: 2;
    flex-wrap: wrap;
    row-gap: 0;
  }
}
.bdkt-trang {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
  color: var(--chu2);
  font-size: 13px;
  pointer-events: none;
}
.bdkt-trang[hidden] {
  display: none;
}
.bdkt-trang p {
  max-width: 36em;
}
/* Vòng tải lúc đang nạp nến (chủ dự án 26.10.2026): giữa vùng biểu đồ, không chữ. Giảm chuyển
   động thì không xoay, chỉ mờ dần theo nhịp (luật ở cuối tệp). */
.bdkt-tai {
  display: block;
  flex: none;
  width: 28px;
  height: 28px;
  border: 2px solid var(--vien2);
  border-top-color: var(--dong);
  border-radius: 50%;
  animation: bdkt-xoay var(--t-quay) linear infinite;
}
.bdkt-trang .bdkt-tai {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -14px 0 0 -14px;
}
/* Ngăn gọn M22 khi thư viện chưa có: vòng tải giữa ô của ngăn. */
.bdkt-taiO {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
}
@keyframes bdkt-xoay {
  to {
    transform: rotate(360deg);
  }
}
@keyframes bdkt-nhipMo {
  50% {
    opacity: 0.35;
  }
}
.bdkt-thuLai {
  pointer-events: auto;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--vien2);
  border-radius: 8px;
  background-color: var(--mat2);
  color: var(--chu);
  font: inherit;
  cursor: pointer;
  transition:
    border-color var(--t-mau) var(--e-mau),
    color var(--t-mau) var(--e-mau);
}
.bdkt-thuLai:hover {
  border-color: var(--dong);
}
.bdkt-thuLai:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 2px;
}

@media (max-width: 719px) {
  .bdkt-dayDu {
    height: 420px;
  }
}

/* ---------- Màn M23 khổ đầy đủ (bieu_do_man.js, SPEC mục 4, 6) ---------- */


.bdm-than {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 30px 36px;
  min-width: 0;
}
.bdm-nhan {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chu3);
  margin: 0;
}
.bdm-trong {
  font-size: 13.5px;
  color: var(--chu2);
  margin: 0;
}
.bdm-so {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}
.bdm-len {
  color: var(--len-sang);
}
.bdm-xuong {
  color: var(--xuong-sang);
}
.bdm-ngang {
  color: var(--canh);
}

/* Chưa có mã: chỉ còn khung biểu đồ với ô chọn mã và câu nhắc. */
.bdm-chuaMa .bdm-thanh,
.bdm-chuaMa .bdm-dayDuoi,
.bdm-chuaMa .bdm-cong,
.bdm-chuaMa .bdm-phai,
.bdm-chuaMa .bdm-nguon {
  display: none;
}
.bdm-chuaMa .bdm-vung {
  min-height: 240px;
}

.bdm-noi {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
/* Thanh mảnh cạnh ô chọn mã (chủ dự án 26.10.2026, CAU_HOI_MO câu 71): kỳ, kiểu, trục giá mở menu
   thả xuống, nút Các chỉ báo mở bảng chọn; vạch mảnh ngăn các nhóm. */
.bdm-thanh {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.bdm-vach {
  flex: none;
  width: 1px;
  height: 22px;
  margin: 0 5px;
  background-color: var(--vien2);
}
.bdm-menuO {
  position: relative;
  flex: none;
}
.bdm-nutThanh {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  min-width: 36px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background-color: transparent;
  color: var(--chu);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--t-mau) var(--e-mau),
    color var(--t-mau) var(--e-mau),
    transform var(--t-nhan) var(--e-ra);
}
.bdm-nutThanh:hover,
.bdm-nutThanh[aria-expanded="true"] {
  background-color: rgba(var(--phu-rgb), 0.07);
  color: var(--chu-dam);
}
.bdm-nutThanh:active {
  transform: scale(0.96);
}
.bdm-nutThanh:focus-visible,
.bdm-menu button:focus-visible,
.bdm-nutDay:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 1px;
}
.bdm-nutChuSo {
  font-family: "IBM Plex Mono", monospace;
}
.bdm-mui {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.6;
}
.bdm-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 31;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  padding: 4px;
  background-color: var(--mat2);
  border: 1px solid var(--vien2);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(var(--bong-rgb), 0.35);
  animation: bdm-moDan var(--t-mau) var(--e-mau);
}
.bdm-menu[hidden] {
  display: none;
}
.bdm-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px 0 8px;
  border: 0;
  border-radius: 7px;
  background-color: transparent;
  color: var(--chu);
  font: inherit;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-mau) var(--e-mau);
}
.bdm-menu button:hover,
.bdm-menu button:focus {
  background-color: var(--nen);
}
.bdm-menu button[aria-checked="true"] {
  color: var(--chu-dam);
  font-weight: 500;
}
.bdm-menuDau {
  display: inline-grid;
  color: var(--dong-s);
  visibility: hidden;
}
.bdm-menu button[aria-checked="true"] .bdm-menuDau {
  visibility: visible;
}
.bdm-menuBt {
  display: inline-grid;
  color: var(--chu2);
}
/* Nút chỉ báo nhanh nằm đầu bảng chọn chỉ báo (câu 72). */
.bdm-nhanhCb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.bdm-nhanhCb .bdm-nhan {
  flex-basis: 100%;
}
/* Dải dưới vùng vẽ (chủ dự án 26.10.2026, CAU_HOI_MO câu 72): nút khoảng sát góc trái, Sự kiện, Vẽ,
   Hướng dẫn ở đầu bên phải; thiếu chỗ thì dải cuộn ngang trong chính nó, trang không tràn. Nút ẩn
   cột phải đã bỏ (chủ dự án 30.10.2026, chien_luoc CAU_HOI_MO câu 70). */
.bdm-dayDuoi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  padding: 3px 8px;
  border-top: 1px solid var(--vien);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.bdm-khoang,
.bdm-dayPhai {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
}
.bdm-nutDay {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  background-color: transparent;
  color: var(--chu2);
  font: inherit;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--t-mau) var(--e-mau),
    color var(--t-mau) var(--e-mau);
}
.bdm-nutDay:hover {
  color: var(--chu);
  background-color: rgba(var(--phu-rgb), 0.06);
}
.bdm-nutDay[aria-pressed="true"],
.bdm-nutVe[aria-expanded="true"] {
  color: var(--dong-s);
  background-color: color-mix(in srgb, var(--dong) 14%, transparent);
  font-weight: 500;
}
/* Nút "?" mở hướng dẫn của màn (câu 77): vuông tối thiểu 30 px, 44 px ở khổ hẹp. */
.bdm-nutHd {
  justify-content: center;
  min-width: 30px;
  padding: 0 7px;
}
/* Nút Vẽ chỉ ở khổ hẹp (cột công cụ vẽ ở khổ rộng luôn hiện). */
.bdm-nutVe {
  display: none;
}
/* Nút sang Đánh giá cổ phiếu (CAU_HOI_MO câu 73): nền màu nhấn, chữ đạt tương phản 4,5:1 ở cả hai
   giao diện (tối: --dong với --nen; sáng: --dong-s với --mat); rê chuột đậm hơn. */
.bdm-nutHoSo {
  --hs-nen: var(--dong);
  --hs-chu: var(--nen);
  border-color: var(--hs-nen);
  background-color: var(--hs-nen);
  color: var(--hs-chu);
  font-weight: 600;
}
html[data-giao-dien="sang"] .bdm-nutHoSo {
  --hs-nen: var(--dong-s);
  --hs-chu: var(--mat);
}
.bdm-nutHoSo:hover {
  border-color: color-mix(in srgb, var(--hs-nen) 80%, var(--chu-dam));
  background-color: color-mix(in srgb, var(--hs-nen) 80%, var(--chu-dam));
  color: var(--hs-chu);
}
.bdm-nutHoSo:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 2px;
}
.bdm-bat {
  min-height: 36px;
  padding: 0 12px;
  border-radius: 18px;
  border: 1px solid var(--vien2);
  background-color: transparent;
  color: var(--chu2);
  font: inherit;
  font-size: 12.5px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  white-space: nowrap;
  transition:
    border-color var(--t-mau) var(--e-mau),
    color var(--t-mau) var(--e-mau),
    background-color var(--t-mau) var(--e-mau),
    transform var(--t-nhan) var(--e-ra);
}
.bdm-bat:hover {
  color: var(--chu);
}
.bdm-bat:active {
  transform: scale(0.96);
}
.bdm-bat[aria-pressed="true"] {
  border-color: var(--dong);
  color: var(--chu-dam);
  background-color: color-mix(in srgb, var(--dong) 10%, transparent);
}
.bdm-cham {
  width: 9px;
  height: 9px;
  border-radius: 5px;
  background-color: var(--chu3);
  opacity: 0.35;
  transition: opacity var(--t-mau) var(--e-mau);
}
.bdm-bat[aria-pressed="true"] .bdm-cham {
  opacity: 1;
}
.bdm-bat:focus-visible,
.bdm-nutCong:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 2px;
}

.bdm-luoi {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: stretch;
  min-width: 0;
}
.bdm-cong {
  flex: 0 0 auto;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--vien);
  border-radius: 12px;
  background-color: var(--mat);
}
.bdm-nutCong {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid transparent;
  background-color: transparent;
  color: var(--chu2);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    background-color var(--t-mau) var(--e-mau),
    color var(--t-mau) var(--e-mau),
    border-color var(--t-mau) var(--e-mau),
    transform var(--t-nhan) var(--e-ra);
}
.bdm-nutCong:hover {
  color: var(--chu);
  background-color: rgba(var(--phu-rgb), 0.04);
}
.bdm-nutCong:active {
  transform: scale(0.94);
}
.bdm-nutCong[aria-pressed="true"] {
  border-color: var(--dong);
  color: var(--dong-s);
  background-color: color-mix(in srgb, var(--dong) 12%, transparent);
}
.bdm-congTach {
  display: block;
  height: 1px;
  margin: 4px 6px;
  background-color: var(--vien);
}
.bdm-giua {
  flex: 999 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--vien);
  border-radius: 14px;
  background-color: var(--mat);
  overflow: hidden;
}
/* Hàng đầu khung vẽ: ô chọn mã góc trên trái, thanh kỳ, kiểu, trục, chỉ báo ngay cạnh (câu 71), dòng
   chú giải nến bên cạnh hoặc xuống dòng dưới (câu 30). Bảng chọn chỉ báo neo theo hàng này. */
.bdm-dauKhung {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  min-height: 46px;
  padding: 5px 16px 5px 8px;
  border-bottom: 1px solid var(--vien);
}
.bdm-chonMa {
  position: relative;
  flex: 0 0 auto;
}
/* Kính lúp trong ô chọn mã, bên trái mã (câu 71); không nhận chuột, bấm vẫn vào ô. */
.bdm-kinh {
  position: absolute;
  top: 50%;
  left: 9px;
  display: inline-grid;
  color: var(--chu3);
  transform: translateY(-50%);
  pointer-events: none;
}
.bdm-anChu {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* Viền hiện sẵn ở trạng thái thường (chủ dự án 25.10.2026, câu 32): --chu3 đạt tương phản 3:1
   với nền khung --mat ở cả hai giao diện (--vien, --vien2 chỉ khoảng 1,6 tới 1,9:1). */
.bdm-oMa {
  width: 124px;
  min-height: 36px;
  padding: 0 8px 0 31px;
  border: 1px solid var(--chu3);
  border-radius: 8px;
  background-color: transparent;
  color: var(--chu-dam);
  font-family: "IBM Plex Mono", monospace;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color var(--t-mau) var(--e-mau),
    box-shadow var(--t-mau) var(--e-mau),
    background-color var(--t-mau) var(--e-mau);
}
.bdm-oMa:hover {
  border-color: var(--chu2);
}
.bdm-oMa:focus {
  border-color: var(--dong);
  box-shadow: 0 0 0 1px var(--dong);
  background-color: var(--nen);
  outline: none;
  cursor: text;
}
.bdm-goiYMa {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 5;
  min-width: 210px;
  /* Gợi ý mọi mã kèm tên gọn, sàn (26.10.2026): tên dài cắt bằng dấu ba chấm, không tràn màn. */
  max-width: min(380px, calc(100vw - 32px));
  max-height: 360px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background-color: var(--mat2);
  border: 1px solid var(--vien2);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(var(--bong-rgb), 0.35);
}
.bdm-goiYMa[hidden] {
  display: none;
}
.bdm-goiYMa li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--chu);
  transition: background-color var(--t-mau) var(--e-mau);
}
.bdm-goiYMa li b {
  flex: none;
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
}
.bdm-goiYMa li span {
  min-width: 0;
  overflow: hidden;
  font-size: 11.5px;
  color: var(--chu3);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bdm-goiYMa li:hover,
.bdm-goiYMa li[aria-selected="true"] {
  background-color: var(--nen);
}
.bdm-vung:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: -2px;
}
/* Dòng chú giải nến: dòng đầu khối chú giải trong vùng vẽ, góc trên trái khung giá (câu 76). Mã và
   nhãn kỳ đứng đầu nên luôn ở dòng đầu; các số không đủ chỗ thì xuống dòng, nhãn kỳ không tách chữ. */
.bdkt-cgNen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 9px;
  max-width: 100%;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 11.5px;
  line-height: 19px;
  color: var(--chu2);
  background-color: transparent;
  background-color: color-mix(in srgb, var(--mat) 72%, transparent);
}
.bdkt-cgNen:empty {
  display: none;
}
.bdkt-cgNen b {
  font-weight: 500;
  color: var(--chu-dam);
}
.bdm-maNen {
  font-weight: 600;
  color: var(--chu);
  white-space: nowrap;
}
.bdm-nhanKy {
  color: var(--chu3);
  white-space: nowrap;
}
.bdkt-cgGia {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  max-width: 100%;
}
.bdkt-cgGia:empty {
  display: none;
}
/* Chưa có mã: câu nhắc giữa vùng vẽ (chưa dựng biểu đồ). */
.bdm-nhacMa {
  display: none;
  margin: 0;
  padding: 40px 16px;
  text-align: center;
  font-size: 13.5px;
  color: var(--chu2);
}
.bdm-chuaMa .bdm-nhacMa {
  display: block;
}
/* Ô nhập ghi chú chữ trên biểu đồ (câu 75), đặt cạnh điểm ghi chú. */
.bdkt-oChu {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background-color: var(--mat2);
  border: 1px solid var(--vien2);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(var(--bong-rgb), 0.35);
}
.bdkt-oChu[hidden] {
  display: none;
}
.bdkt-oChu input {
  width: 160px;
  min-height: 32px;
  padding: 0 8px;
  border: 1px solid var(--chu3);
  border-radius: 6px;
  background-color: var(--nen);
  color: var(--chu-dam);
  font: inherit;
  font-size: 13px;
}
.bdkt-oChu input:focus {
  border-color: var(--dong);
  outline: none;
}
.bdkt-oChu button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--vien2);
  border-radius: 6px;
  background-color: transparent;
  color: var(--chu);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}
.bdkt-oChu button:hover {
  border-color: var(--dong);
}
.bdkt-oChu button:focus-visible,
.bdkt-oChu input:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 1px;
}
/* Nút nổi Hướng dẫn ẩn khi đang ở M23 để không che biểu đồ (chủ dự án 26.10.2026, câu 77); display
   none nên không vào được bằng Tab; màn khác hiện như cũ. */
body:has(#v-bieudo.on) #nutHuongDan {
  display: none;
}
.bdm-vung {
  position: relative;
}
.bdm-vung .bdkt {
  border: 0;
  border-radius: 0;
}
.bdm-vung .bdkt-dayDu {
  /* 830 px (trước 720): khối đầu màn đã bỏ, vùng vẽ nhận phần chiều cao đó (câu 74); khớp
     VUNG_RONG của bieu_do.js. */
  height: 830px;
}
.bdm-goiY {
  position: absolute;
  left: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  padding: 7px 11px;
  border-radius: 8px;
  background-color: var(--mat2);
  border: 1px solid var(--dong);
  color: var(--dong-s);
  font-size: 12.5px;
  pointer-events: none;
}
.bdm-hoanTac {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 12px;
  border-radius: 9px;
  background-color: var(--mat2);
  border: 1px solid var(--vien2);
  color: var(--chu);
  font-size: 12.5px;
}
.bdm-goiY[hidden],
.bdm-hoanTac[hidden] {
  display: none;
}
.bdm-phai {
  flex: 1 1 250px;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Cột phải chỉ còn bảng Chiến lược (thẻ Khoảng đang xem và Sự kiện trên biểu đồ chủ dự án bỏ ngày
   30.10.2026, chien_luoc CAU_HOI_MO câu 71): bảng không hiện thì cột ẩn hẳn, khung nến rộng hết. */
.bdm-phai[hidden] {
  display: none;
}
.bdm-the {
  padding: 14px 16px;
  border: 1px solid var(--vien);
  border-radius: 14px;
  background-color: var(--mat);
}
.bdm-nguon {
  margin: 0;
  padding: 4px 10px 6px;
  border-top: 1px solid var(--vien);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--chu3);
}
.bdm-nguon:empty {
  display: none;
}
/* Nút Đánh giá cổ phiếu ở đầu bên phải hàng đầu khung vẽ (khối đầu màn đã bỏ, câu 74). */
.bdm-dauKhung .bdm-nutHoSo {
  flex: none;
  margin-left: auto;
}
.bdm-nutHoSo[hidden] {
  display: none;
}

/* ---------- Bảng chọn chỉ báo (CHI_BAO.md mục 1) ---------- */

.bdm-cb {
  flex: none;
}
.bdm-bat:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Hộp nổi ngay dưới thanh trên (neo theo hàng đầu khung vẽ để không bị cắt ở mép phải) ở màn rộng;
   ngăn trượt từ dưới ở màn hẹp (khối @media cuối tệp). */
.bdm-bangCb {
  position: absolute;
  top: calc(100% + 2px);
  left: 8px;
  z-index: 30;
  width: min(660px, calc(100vw - 32px));
  max-height: min(72vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 14px 16px;
  background-color: var(--mat2);
  border: 1px solid var(--vien2);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(var(--bong-rgb), 0.4);
  animation: bdm-hienBang var(--t-menu) var(--e-mem);
}
.bdm-bangCb[hidden] {
  display: none;
}
@keyframes bdm-hienBang {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.bdm-bangDau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.bdm-bangTieuDe {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--chu-dam);
}
.bdm-locCb {
  display: grid;
  gap: 4px;
  margin-bottom: 6px;
}
.bdm-locCb label,
.bdm-suaO label,
.bdm-mauO legend {
  font-size: 12px;
  color: var(--chu2);
}
.bdm-oLoc,
.bdm-oSo {
  min-height: 36px;
  width: 100%;
  padding: 0 10px;
  border: 1px solid var(--vien2);
  border-radius: 8px;
  background-color: var(--nen);
  color: var(--chu);
  font: inherit;
  font-size: 13px;
  transition:
    border-color var(--t-mau) var(--e-mau),
    box-shadow var(--t-mau) var(--e-mau);
}
.bdm-oSo {
  max-width: 260px;
  font-family: "IBM Plex Mono", monospace;
}
.bdm-oLoc:focus,
.bdm-oSo:focus {
  outline: none;
  border-color: var(--dong);
  box-shadow: 0 0 0 1px var(--dong);
}
.bdm-oSo.bdm-sai,
.bdm-oSo.bdm-sai:focus {
  border-color: var(--xuong-sang);
  box-shadow: 0 0 0 1px var(--xuong-sang);
}
.bdm-phanCb {
  margin-top: 12px;
}
.bdm-phanCb[hidden],
.bdm-mucCb[hidden] {
  display: none;
}
.bdm-phanCb > .bdm-nhan {
  margin-bottom: 4px;
}
.bdm-dsBat,
.bdm-dsCb {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bdm-trongCb {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--chu2);
}
.bdm-mucCb {
  border-top: 1px solid var(--vien);
}
/* Một dòng của danh sách chỉ báo (câu 80): cả dòng là nút bật bỏ, dấu chọn khi đang bật. */
.bdm-mucNut {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 6px 8px 6px 4px;
  border: 0;
  border-radius: 6px;
  background-color: transparent;
  color: var(--chu);
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--t-mau) var(--e-mau);
}
.bdm-mucNut:hover {
  background-color: rgba(var(--phu-rgb), 0.06);
}
.bdm-mucNut:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: -2px;
}
.bdm-mucNut[aria-pressed="true"] {
  color: var(--chu-dam);
  background-color: color-mix(in srgb, var(--dong) 10%, transparent);
}
.bdm-mucNut:disabled {
  cursor: not-allowed;
}
.bdm-mucDau {
  flex: none;
  display: inline-grid;
  width: 16px;
  color: var(--dong-s);
  visibility: hidden;
}
.bdm-mucNut[aria-pressed="true"] .bdm-mucDau {
  visibility: visible;
}
.bdm-mucTen {
  flex: 1 1 auto;
  min-width: 0;
  /* Một dòng như bảng chọn TradingView; tên dài cắt bằng dấu ba chấm, tên đủ ở title của dòng. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bdm-mucLy {
  /* Lý do chỉ lấy phần còn trống sau tên: hẹp thì lý do cắt trước, tên giữ đủ (câu 84). */
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11.5px;
  color: var(--chu2);
  text-align: right;
}
.bdm-mo .bdm-mucTen {
  flex: 0 1 auto;
  opacity: 0.55;
}
.bdm-suaMoTa {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--chu2);
}
.bdm-chipNut:focus-visible,
.bdm-mau input:focus-visible + .bdm-oMau {
  outline: 2px solid var(--dong);
  outline-offset: 2px;
}
.bdm-batMuc {
  padding: 6px 0;
  border-top: 1px solid var(--vien);
}
.bdm-batDong {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bdm-batChu {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 1px;
  font-size: 13px;
  color: var(--chu);
}
.bdm-batPhu {
  font-size: 11.5px;
  color: var(--chu2);
}
.bdm-chamMau {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 5px;
}
.bdm-chipNut {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background-color: transparent;
  color: var(--chu2);
  cursor: pointer;
  transition:
    color var(--t-mau) var(--e-mau),
    background-color var(--t-mau) var(--e-mau);
}
.bdm-chipNut:hover {
  color: var(--chu);
  background-color: rgba(var(--phu-rgb), 0.05);
}
.bdm-chipNut[aria-expanded="true"] {
  color: var(--dong-s);
}
.bdm-sua {
  display: grid;
  gap: 10px;
  padding: 8px 0 6px 17px;
}
.bdm-suaO {
  display: grid;
  gap: 4px;
}
.bdm-goiYTs {
  margin: 0;
  font-size: 11.5px;
  color: var(--chu3);
}
.bdm-loiTs {
  margin: 0;
  font-size: 12px;
  color: var(--xuong-sang);
}
.bdm-loiTs[hidden] {
  display: none;
}
.bdm-mauO {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.bdm-mauO legend {
  padding: 0;
  margin-bottom: 6px;
}
.bdm-dsMau {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.bdm-mau {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
}
.bdm-mau input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.bdm-oMau {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  transition: box-shadow var(--t-mau) var(--e-mau);
}
.bdm-mau input:checked + .bdm-oMau {
  box-shadow:
    0 0 0 2px var(--mat2),
    0 0 0 4px var(--chu);
}
/* Tùy chọn Vẽ ở khung riêng của Khối lượng (câu 78). */
.bdm-chonKhung {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  font-size: 13px;
  color: var(--chu);
  cursor: pointer;
}
.bdm-chonKhung input {
  width: 18px;
  height: 18px;
  accent-color: var(--dong);
}
.bdm-chonKhung input:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 2px;
}
.bdm-veMd {
  justify-self: start;
}
.bdm-chipChu {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--chu);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Dòng ghi trên khung biểu đồ: lý do chỉ báo đang bật không vẽ (chỉ báo đang bật nằm trên biểu đồ
   từ 26.10.2026, câu 69). */
.bdm-chipGhi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: -4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--chu2);
}
.bdm-chipGhi:empty {
  display: none;
}
.bdm-ghiDong {
  margin: 0;
  overflow-wrap: anywhere;
}

/* Nút sang M23 trong phần đầu hồ sơ mã (ho_so_tc.js::veDau). */
.hs-nutBd {
  margin-top: 8px;
}

/* Khổ hẹp: điều khiển xuống dòng, cột công cụ thành hàng ngang trên biểu đồ, cột phải xuống dưới,
   biểu đồ cao 420 px, không cuộn ngang trang (SPEC 6). */
@media (max-width: 719px) {
  .bdm-than {
    padding: 14px 16px 28px;
  }
  /* Một cột không xuống dòng: khung vẽ rộng đúng bề ngang cột (lưới xuống dòng thì khung lấy bề
     rộng theo nội dung, dải dưới biểu đồ không cuộn được trong chính nó). */
  .bdm-luoi {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .bdm-cong {
    flex-direction: row;
    flex-wrap: wrap;
    align-self: stretch;
  }
  .bdm-congTach {
    width: 1px;
    height: auto;
    margin: 6px 4px;
  }
  .bdm-giua {
    flex: 1 1 auto;
  }
  /* Biểu đồ cao gần hết màn (câu 67): không còn thanh Tùy chỉnh, thanh trên cạnh ô chọn mã thay
     (câu 71); khối đầu màn đã bỏ (câu 74) nên max(420 px, chiều cao màn trừ 120 px, trước trừ 220). */
  .bdm-vung .bdkt-dayDu {
    --bdkt-cao-tu: calc(100svh - 120px);
    height: max(420px, var(--bdkt-cao-tu, 0px));
  }
  /* Hàng công cụ vẽ ẩn mặc định, nút Vẽ ở dải dưới mở ra (câu 72). */
  .bdm-cong {
    display: none;
  }
  .bdm-congMo .bdm-cong {
    display: flex;
    animation: bdm-moKhoiDk var(--t-mo) var(--e-mem);
  }
  .bdm-nutVe {
    display: inline-flex;
  }
  .bdm-dauKhung {
    padding: 4px 8px 4px 6px;
  }
  .bdm-oMa {
    width: 100px;
    min-height: 44px;
  }
  .bdm-nutThanh {
    min-height: 44px;
    min-width: 40px;
    padding: 0 6px;
  }
  .bdm-vach {
    margin: 0 2px;
  }
  /* Chỉ biểu tượng ƒx, tên ở aria-label (Các chỉ báo). */
  .bdm-nutChu {
    display: none;
  }
  .bdm-menu button {
    min-height: 44px;
  }
  .bdm-nutDay {
    min-height: 40px;
  }
  .bdkt-oChu input,
  .bdkt-oChu button {
    min-height: 44px;
  }
  .bdm-nutHd {
    min-width: 44px;
    min-height: 44px;
  }
  .bdm-chonKhung {
    min-height: 44px;
  }
  .bdm-mucNut {
    min-height: 44px;
  }
  .bdkt-oChu input {
    width: 130px;
  }
  /* Ngăn trượt bảng chọn: nút chỉ báo nhanh đủ ô bấm 44 px (C-5). */
  .bdm-nhanhCb .bdm-bat {
    min-height: 44px;
  }
  .bdm-phai {
    flex: 1 1 auto;
  }

  .bdm-bangCb {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 82vh;
    padding: 12px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    border-bottom: 0;
    animation-name: bdm-truotLen;
    animation-duration: var(--t-ngan);
    animation-timing-function: var(--e-mem);
  }
  .bdm-dongCb,
  .bdm-oLoc,
  .bdm-oSo,
  .bdm-veMd {
    min-height: 44px;
  }
  .bdm-oSo {
    max-width: none;
  }
  .bdm-chipNut,
  .bdm-mau {
    width: 44px;
    height: 44px;
  }
  .bdm-dsMau {
    gap: 0;
  }
  /* Tám ô màu 44 px vừa một hàng ở 390 px. */
  .bdm-sua {
    padding-left: 0;
  }
}
@keyframes bdm-moKhoiDk {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes bdm-truotLen {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Bảng Chiến lược (docs/bieu_do/chien_luoc/SPEC.md mục 6, bản phác ref/bo_dung_chien_luoc.html) ----------
   Thẻ đầu cột phải; bảng mở thì cột rộng 400 tới 440 px, khi sửa 660 px (khung vẽ nhường bớt để vẫn
   nằm cạnh nhau ở 1440 px); dưới 900 px bảng xuống dưới biểu đồ. Chữ phụ dùng --chu2 (--chu3 không
   đạt 4,5:1 trên --mat); chữ vàng giao diện sáng dùng --dong-s vì --dong chỉ đạt 3,6:1. */
.bd-cl,
.bd-cl-chip {
  --cl-vang: var(--dong);
}
html[data-giao-dien="sang"] .bd-cl,
html[data-giao-dien="sang"] .bd-cl-chip {
  --cl-vang: var(--dong-s);
}
.bdm-phai.bd-cl-coBang {
  flex: 1 1 420px;
  min-width: 400px;
  max-width: 440px;
}
.bdm-phai.bd-cl-coBang.bd-cl-dangSua {
  flex-basis: 660px;
  max-width: 660px;
}
/* Khi sửa ở màn rộng, khung nến nhường bớt để bảng 660 px vẫn nằm cạnh; bố cục một cột (dưới 720 px)
   không đổi vì flex-basis ở đó là chiều cao. */
@media (min-width: 900px) {
  .bdm-luoi.bd-cl-luoiSua:has(> .bdm-phai.bd-cl-coBang) > .bdm-giua {
    flex-basis: 400px;
  }
}
.bd-cl[hidden],
.bd-cl [hidden] {
  display: none !important;
}
.bd-cl {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  background-color: var(--mat2);
  color: var(--chu);
  font-size: 13px;
}
.bd-cl-than,
.bd-cl-mat {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.bd-cl-moBang .bd-cl-than {
  opacity: 0.45;
}
.bd-cl-ly {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--vien2);
  border-radius: 10px;
  color: var(--chu);
  font-size: 13px;
  line-height: 1.5;
}
.bd-cl-so {
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}
.bd-cl-an {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.bd-cl-len,
.bd-cl .bd-cl-len {
  color: var(--len-sang);
}
.bd-cl-xuong,
.bd-cl .bd-cl-xuong {
  color: var(--xuong-sang);
}
.bd-cl-dau {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.bd-cl-tieuDe {
  flex: 1 1 auto;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--chu-dam);
}
.bd-cl-nhan {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--chu2);
}
.bd-cl-nut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--vien2);
  border-radius: 8px;
  background-color: var(--mat);
  color: var(--chu);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color var(--t-mau) var(--e-mau),
    background-color var(--t-mau) var(--e-mau),
    color var(--t-mau) var(--e-mau);
}
.bd-cl-nut.bd-cl-nho {
  min-height: 36px;
  padding: 0 10px;
}
.bd-cl-nut:hover {
  border-color: var(--cl-vang);
}
.bd-cl-nut:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.bd-cl-nut.bd-cl-chinh {
  border-color: var(--dong);
  background-color: var(--dong);
  color: #141008;
  font-weight: 600;
}
.bd-cl-nut.bd-cl-trong {
  border-color: transparent;
  background-color: transparent;
  color: var(--chu2);
}
.bd-cl-nut[aria-pressed="true"] {
  border-color: var(--cl-vang);
  color: var(--chu-dam);
}
.bd-cl-nut.bd-cl-nguyNut {
  border-color: var(--xuong-sang);
  color: var(--xuong-sang);
}
.bd-cl-nut:focus-visible,
.bd-cl-gap:focus-visible,
.bd-cl-xoa:focus-visible,
.bd-cl-menuDs button:focus-visible,
.bd-cl-o:focus-visible,
.bd-cl-chon:focus-visible,
.bd-cl-chip:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 2px;
}
.bd-cl-o,
.bd-cl-chon {
  min-width: 0;
  height: 36px;
  padding: 0 8px;
  border: 1px solid var(--vien2);
  border-radius: 6px;
  background-color: var(--mat);
  color: var(--chu);
  font: inherit;
  font-size: 13px;
}
.bd-cl select.bd-cl-o,
.bd-cl-chon {
  appearance: auto;
  cursor: pointer;
}
.bd-cl-chon {
  width: 100%;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
}
.bd-cl-o[aria-invalid="true"] {
  border-color: var(--xuong-sang);
}
.bd-cl input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.bd-cl input[type="number"]::-webkit-inner-spin-button,
.bd-cl input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.bd-cl-moTa {
  margin: 8px 0 0;
  color: var(--chu2);
  line-height: 1.55;
}
.bd-cl-moTa:empty {
  display: none;
}
.bd-cl-thongKe {
  margin-top: 8px;
}
.bd-cl-the {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--vien);
  border-radius: 10px;
  background-color: var(--mat);
}
.bd-cl-the p {
  margin: 0;
  line-height: 1.5;
}
.bd-cl-cho {
  align-items: flex-start;
}
.bd-cl-cho p,
.bd-cl-phu {
  color: var(--chu2);
}
.bd-cl-tt {
  flex-direction: row;
  align-items: center;
}
.bd-cl-cham {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--chu2);
}
.bd-cl-ttChu {
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.45;
}
.bd-cl-ttGia {
  flex: none;
  font-size: 12px;
  color: var(--chu2);
}
.bd-cl-tt.bd-cl-ttLen {
  border-color: color-mix(in srgb, var(--len-sang) 45%, transparent);
  background-color: color-mix(in srgb, var(--len-sang) 12%, var(--mat));
}
.bd-cl-tt.bd-cl-ttLen .bd-cl-cham {
  background-color: var(--len-sang);
}
.bd-cl-tt.bd-cl-ttXuong {
  border-color: color-mix(in srgb, var(--xuong-sang) 45%, transparent);
  background-color: color-mix(in srgb, var(--xuong-sang) 12%, var(--mat));
}
.bd-cl-tt.bd-cl-ttXuong .bd-cl-cham {
  background-color: var(--xuong-sang);
}
.bd-cl-kq {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bd-cl-ketLuan {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
.bd-cl-o4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.bd-cl-oSo {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--vien);
  border-radius: 10px;
  background-color: var(--mat);
}
.bd-cl-oNhan {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--chu2);
}
.bd-cl-oGt {
  min-height: 28px;
  margin-top: 4px;
  font-size: 22px;
  font-weight: 500;
}
.bd-cl-oPhu {
  margin-top: 2px;
  font-size: 12px;
  color: var(--chu2);
}
/* Dòng giải nghĩa winrate hòa vốn trong ô (S3b vòng 2, UXb1-P1-1). */
.bd-cl-oGiai {
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--chu2);
}
/* Ô số gõ không phải số (S3b vòng 2, UXb1-P1-3): viền đỏ, câu ngay dưới ô. */
.bd-cl-o.bd-cl-oSai {
  border-color: var(--xuong-sang);
  box-shadow: 0 0 0 1px var(--xuong-sang);
}
.bd-cl-oLoiSo {
  display: block;
  flex: 1 1 100%;
  width: 100%;
  margin-top: 2px;
  color: var(--xuong-sang);
  font-size: 12px;
  line-height: 1.4;
  white-space: normal;
}
.bd-cl-khoangDong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--chu2);
}
.bd-cl-khoangChu {
  font-weight: 500;
  color: var(--chu);
}
.bd-cl-dem {
  margin-left: auto;
  font-size: 12px;
  color: var(--chu2);
}
.bd-cl-khung {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--vien);
  border-radius: 10px;
  background-color: var(--mat);
}
.bd-cl-nhomNut,
.bd-cl-ngay,
.bd-cl-phi,
.bd-cl-hopNut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}
.bd-cl-ngay label,
.bd-cl-phi label {
  color: var(--chu2);
}
.bd-cl-ngay .bd-cl-o {
  flex: 1 1 110px;
  width: 110px;
}
.bd-cl-phi .bd-cl-o {
  width: 80px;
}
.bd-cl-loi {
  margin: 0;
  color: var(--xuong-sang);
  font-size: 12.5px;
}
.bd-cl-loi:empty {
  display: none;
}
.bd-cl-gapKhoi {
  display: flex;
  flex-direction: column;
}
.bd-cl-gap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 40px;
  padding: 10px 0;
  border: 0;
  border-top: 1px solid var(--vien);
  background-color: transparent;
  color: var(--chu2);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.bd-cl-gap:hover {
  color: var(--chu);
}
.bd-cl-gap b {
  font-weight: 500;
  color: var(--chu);
}
.bd-cl-gapThan {
  padding-bottom: 8px;
}
/* Mỗi lệnh đã bán có thêm dòng lý do thoát (mốc S3b): khung cuộn cao hơn để vẫn thấy chừng sáu lệnh. */
.bd-cl-cuon {
  max-height: 340px;
  overflow: auto;
}
/* Màn hẹp: mục Lệnh không cuộn lồng trong trang (S3b vòng 3, UXb2-P2-2). */
@media (max-width: 719px) {
  .bd-cl-cuon {
    max-height: none;
    overflow: visible;
  }
}
.bd-cl-cuonNgang {
  max-width: 100%;
  overflow-x: auto;
}
.bd-cl-bang {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.bd-cl-bang td,
.bd-cl-bang th {
  padding: 7px 6px;
  border-top: 1px solid var(--vien);
  text-align: right;
  white-space: nowrap;
}
.bd-cl-bang thead th {
  border-top: 0;
  font-weight: 500;
  color: var(--chu2);
}
.bd-cl-bang td:first-child,
.bd-cl-bang th:first-child {
  text-align: left;
}
.bd-cl-chiTiet td:first-child {
  white-space: normal;
}
.bd-cl-nhomDong th {
  padding-top: 12px;
  border-top: 0;
  color: var(--cl-vang);
  font-weight: 600;
  text-align: left;
}
.bd-cl-trongDong {
  color: var(--chu2);
}
.bd-cl-ghi {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--chu2);
}
.bd-cl-menu {
  position: relative;
}
.bd-cl-menuDs {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: 6px;
  border: 1px solid var(--vien2);
  border-radius: 10px;
  background-color: var(--mat);
  box-shadow: 0 8px 24px rgba(var(--bong-rgb), 0.4);
}
.bd-cl-menuDs button {
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background-color: transparent;
  color: var(--chu);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.bd-cl-menuDs button:hover {
  background-color: var(--mat2);
}
.bd-cl-menuDs button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.bd-cl-menuDs .bd-cl-nguy {
  color: var(--xuong-sang);
}
.bd-cl-hop {
  padding: 12px;
  border: 1px solid var(--vien2);
  border-radius: 10px;
  background-color: var(--mat);
}
.bd-cl-hopThan {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bd-cl-hopThan p {
  margin: 0;
}
/* mặt sửa */
.bd-cl-oTen {
  flex: 1 1 auto;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
}
.bd-cl-loiSua {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--xuong-sang);
  border-radius: 10px;
  color: var(--xuong-sang);
}
.bd-cl-loiSua p {
  margin: 0;
}
.bd-cl-khoi {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--vien);
  border-radius: 10px;
  background-color: var(--mat);
}
.bd-cl-khoiDau {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bd-cl-khoiDau .bd-cl-nhan {
  flex: 1 1 auto;
}
.bd-cl-dsDk {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bd-cl-them {
  align-self: flex-start;
}
/* Mỗi điều kiện một dòng không gãy (SPEC mục 6, mặt sửa mục 2). Ô chỉ báo không co dưới 150 px (tên
   dài dùng tên ngắn, S2V1-P1-1); khi sửa, lề bảng hẹp lại và dòng có từ ba ô tham số (vế Bollinger)
   dùng ô tham số hẹp để vẫn một dòng ở 660 px. */
.bd-cl.bd-cl-suaBang {
  padding-left: 10px;
  padding-right: 10px;
}
.bd-cl-suaBang .bd-cl-khoi {
  padding: 10px 6px;
}
.bd-cl-dk {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px 4px;
  border: 1px solid var(--vien);
  border-radius: 8px;
  background-color: var(--mat2);
}
.bd-cl-dk.bd-cl-moi {
  border-color: var(--cl-vang);
}
/* Quy tắc đã lưu có hai vế khác thang đo (chien_luoc SPEC mục 12 điểm 1): viền và câu cảnh báo dưới
   dòng, vẫn chạy. */
.bd-cl-dk.bd-cl-khacThang {
  flex-wrap: wrap;
  border-color: var(--xuong-sang);
}
.bd-cl-canhBao {
  flex: 1 0 100%;
  margin: 0 2px;
  color: var(--xuong-sang);
  font-size: 12.5px;
}
.bd-cl-veNhom {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.bd-cl-dk .bd-cl-cb {
  flex: 0 0 150px;
  width: 150px;
  min-width: 150px;
  padding: 0 4px 0 6px;
}
.bd-cl-dk .bd-cl-phep {
  flex: 0 0 96px;
  width: 96px;
  color: var(--cl-vang);
  font-weight: 600;
}
.bd-cl-dk .bd-cl-ts {
  flex: 0 0 54px;
  width: 54px;
  padding: 0 6px;
}
.bd-cl-dkChat {
  gap: 4px;
}
.bd-cl-dkChat .bd-cl-veNhom {
  gap: 3px;
}
.bd-cl-dkChat .bd-cl-ts {
  flex-basis: 44px;
  width: 44px;
  padding: 0 4px;
}
.bd-cl-dkChat .bd-cl-ts[data-cl-d] {
  flex-basis: 36px;
  width: 36px;
}
.bd-cl-xoa {
  flex: none;
  width: 28px;
  height: 32px;
  margin-left: auto;
  border: 1px solid transparent;
  border-radius: 6px;
  background-color: transparent;
  color: var(--chu2);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}
.bd-cl-xoa:hover {
  border-color: var(--xuong-sang);
  color: var(--xuong-sang);
}
.bd-cl-suaKqDau {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bd-cl-suaKqDau .bd-cl-nhan {
  flex: 1 1 auto;
}
.bd-cl-suaSo {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}
/* Nút Chiến lược trên thanh mảnh cạnh ô chọn mã (CAU_HOI_MO câu 16). */
.bdm-clNut {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-width: 0;
}
/* Nhãn giãn theo chữ tới 380 px, quá thì dấu ba chấm, title ghi đủ tên (UX1-P1-4). */
.bd-cl-chip {
  max-width: min(380px, 100%);
}
.bd-cl-chip.bd-cl-coQt {
  box-shadow: inset 0 0 0 1px var(--cl-vang);
}
.bd-cl-chipChu {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Liên kết Cách đọc bảng mở mục Bảng Chiến lược của hướng dẫn (câu 55). */
.bd-cl-lienKet {
  flex: none;
  min-height: 36px;
  padding: 0 4px;
  border: 0;
  background-color: transparent;
  color: var(--chu2);
  font: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.bd-cl-lienKet:hover {
  color: var(--chu);
}
.bd-cl-lienKet:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 2px;
}
.bd-cl-dau {
  flex-wrap: wrap;
}
/* Đã lưu hiện vài giây sau Xong (câu 53): chỉ mờ dần vào, giảm chuyển động thì hiện ngay. */
.bd-cl-daLuu {
  margin: 8px 0 0;
  color: var(--len-sang);
  font-size: 13px;
  animation: bdm-moDan var(--t-mau) var(--e-mau);
}
/* Trình duyệt chặn ghi (CAU_HOI_MO câu 68): cùng chỗ, chữ đỏ. */
.bd-cl-daLuu.bd-cl-daLuuLoi {
  color: var(--xuong-sang);
}
/* Lệnh mua trước khoảng đo ở đầu mục Lệnh (câu 51): một ô chữ ghi ngày nào đi với giá nấy. */
.bd-cl-bang td.bd-cl-truocChu {
  white-space: normal;
  line-height: 1.45;
}
.bd-cl-gioiHan {
  margin-top: 4px;
}
.bd-cl-truocNhan th {
  padding-top: 8px;
  border-top: 0;
  color: var(--cl-vang);
  font-weight: 600;
  text-align: left;
  white-space: normal;
}
.bd-cl-truoc td {
  border-bottom: 1px solid var(--vien2);
}
.bd-cl-nhomDong .bd-cl-nhomCot {
  color: var(--chu2);
  font-weight: 500;
  text-align: right;
}
.bd-cl-oGt.bd-cl-oKhong {
  font-size: 16px;
  color: var(--chu2);
}
.bd-cl-phiO {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.bd-cl-khoangChu {
  flex: 0 1 auto;
  min-width: 0;
}
/* Bảng mở: dải nút dưới biểu đồ xuống dòng thay vì tràn ngang khi khung nến hẹp lại (S2V1-P2-1,
   UX1-P2-15); khổ dưới 720 px giữ cách cuộn ngang của M23. Khung nến không kéo dài theo bảng khi mở
   Chi tiết backtest (S2V1-P2-5). */
@media (min-width: 720px) {
  .bdm-luoi:has(> .bdm-phai.bd-cl-coBang) .bdm-dayDuoi {
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .bdm-luoi:has(> .bdm-phai.bd-cl-coBang) > .bdm-giua {
    flex-basis: 480px;
    align-self: flex-start;
  }
  /* Khi bảng đã xuống dưới khung nến (lưới dưới 990 px: không đủ chỗ cho khung nến 480 px cạnh bảng 420 px; hoặc dưới 1 150 px:
     400 px cạnh 660 px khi sửa) thì bảng rộng hết cột (S2V1-P2-6). Dưới 720 px lưới đã là một cột. */
  .bdm-luoi:has(> .bdm-phai.bd-cl-coBang) {
    container-type: inline-size;
  }
}
@container (max-width: 989px) {
  .bdm-phai.bd-cl-coBang {
    flex-basis: 100%;
    min-width: 0;
    max-width: none;
  }
}
@container (max-width: 1149px) {
  .bdm-phai.bd-cl-coBang.bd-cl-dangSua {
    flex-basis: 100%;
    min-width: 0;
    max-width: none;
  }
}
.bd-cl-goiY {
  position: fixed;
  z-index: 60;
  max-width: 280px;
  padding: 6px 10px;
  border: 1px solid var(--vien2);
  border-radius: 8px;
  background-color: var(--mat);
  color: var(--chu);
  font-size: 12.5px;
  line-height: 1.45;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(var(--bong-rgb), 0.35);
}
.bd-cl-goiY[hidden] {
  display: none;
}
@media (max-width: 899px) {
  .bdm-phai.bd-cl-coBang,
  .bdm-phai.bd-cl-coBang.bd-cl-dangSua {
    flex-basis: 100%;
    min-width: 0;
    max-width: none;
  }
  /* Dòng điều kiện gãy theo nhóm vế trái, phép, vế phải; nút bỏ xuống cuối dòng. */
  .bd-cl-dk {
    flex-wrap: wrap;
  }
}
/* Khổ hẹp: mọi nút, ô của bảng đủ 44 px để bấm; bảng chi tiết xuống dòng thay vì tràn ngang. */
@media (max-width: 719px) {
  .bd-cl-nut,
  .bd-cl-nut.bd-cl-nho,
  .bd-cl-gap,
  .bd-cl-menuDs button,
  .bd-cl-chon,
  .bd-cl-o,
  .bd-cl-xoa {
    min-height: 44px;
  }
  .bd-cl-o,
  .bd-cl-chon {
    height: 44px;
  }
  .bd-cl-xoa,
  .bd-cl-nut {
    min-width: 44px;
  }
  .bd-cl-xoa {
    width: 44px;
  }
  .bd-cl-lienKet {
    min-height: 44px;
  }
  .bd-cl-dk .bd-cl-cb {
    flex: 1 1 150px;
  }
  .bd-cl-bang {
    font-size: 12px;
  }
  .bd-cl-bang td,
  .bd-cl-bang th {
    padding: 6px 3px;
  }
  .bd-cl-bang td {
    white-space: normal;
  }
  .bd-cl-chiTiet td {
    overflow-wrap: anywhere;
  }
  .bd-cl-chipTen,
  .bdm-clNut .bdm-vach {
    display: none;
  }
}

/* ---------- Bảng Chiến lược, phương án B (chien_luoc SPEC mục 12b, 12c; bản phác ref/phac_giao_dien_dep.html) ----------
   Dải đầu nền vàng đồng pha, thân chia tầng có nhãn vàng, huy hiệu trạng thái, thước so mua giữ, thẻ
   điều kiện theo loại, khối mua xanh, khối bán đỏ. Màu chỉ pha từ token có sẵn; chữ đạt 4,5:1 hai
   giao diện (tiêu đề phông có chân dùng dãy phông của trang). */
.bd-cl {
  --cl-to-vang: color-mix(in srgb, var(--dong) 10%, var(--mat));
  --cl-to-vang2: color-mix(in srgb, var(--dong) 16%, var(--mat));
  --cl-vien-vang: color-mix(in srgb, var(--dong) 45%, var(--vien));
  --cl-vien-len: color-mix(in srgb, var(--len-sang) 38%, var(--vien));
  --cl-vien-xuong: color-mix(in srgb, var(--xuong-sang) 38%, var(--vien));
  --cl-khoi-len: color-mix(in srgb, var(--len-sang) 6%, var(--mat2));
  --cl-khoi-xuong: color-mix(in srgb, var(--xuong-sang) 6%, var(--mat2));
  --cl-dai-len: color-mix(in srgb, var(--len-sang) 18%, var(--mat));
  --cl-dai-xuong: color-mix(in srgb, var(--xuong-sang) 18%, var(--mat));
  --cl-nen-dac: var(--dong);
  --cl-chu-dac: var(--dem);
  --cl-th: 28px;
}
html[data-giao-dien="sang"] .bd-cl {
  --cl-to-vang: color-mix(in srgb, var(--dong) 6%, var(--mat));
  --cl-to-vang2: color-mix(in srgb, var(--dong) 12%, var(--mat));
  --cl-vien-vang: color-mix(in srgb, var(--dong) 55%, var(--vien));
  --cl-vien-len: color-mix(in srgb, var(--len-sang) 45%, var(--vien));
  --cl-vien-xuong: color-mix(in srgb, var(--xuong-sang) 45%, var(--vien));
  --cl-khoi-len: color-mix(in srgb, var(--len-sang) 4%, var(--mat2));
  --cl-khoi-xuong: color-mix(in srgb, var(--xuong-sang) 4%, var(--mat2));
  --cl-dai-len: color-mix(in srgb, var(--len-sang) 10%, var(--mat));
  --cl-dai-xuong: color-mix(in srgb, var(--xuong-sang) 10%, var(--mat));
  --cl-nen-dac: var(--dong-s);
  --cl-chu-dac: var(--mat);
}
/* Bảng bỏ lề chung để dải đầu, chân chạm mép; mỗi tầng tự đặt lề. */
.bdm-the.bd-cl,
.bd-cl.bd-cl-suaBang {
  gap: 0;
  padding: 0;
}
.bd-cl > .bd-cl-ly {
  margin: 12px 16px 0;
}
.bd-cl-than,
.bd-cl-mat {
  gap: 0;
}
.bd-cl-ic {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bd-cl-icDac {
  width: 14px;
  height: 14px;
  fill: currentColor;
  stroke: none;
}
.bd-cl-nut .bd-cl-ic,
.bd-cl-lienKet .bd-cl-ic {
  width: 14px;
  height: 14px;
}
.bd-cl-lienKet {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.bd-cl-ba {
  min-width: 36px;
  font-size: 16px;
  line-height: 1;
}
/* Dải đầu: tên màn nhỏ vàng, tiêu đề phông có chân 23 px. */
.bd-cl-dai {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--cl-vien-vang);
  border-radius: 13px 13px 0 0;
  background-color: var(--cl-to-vang);
}
.bd-cl-tieuKhoi {
  flex: 1 1 auto;
  min-width: 0;
}
/* Cách đọc bảng, Sửa, ⋯ là một nhóm: bảng hẹp (390) thì cả nhóm xuống dòng, canh phải. */
.bd-cl-dauNut {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.bd-cl-maNho {
  display: block;
  margin-bottom: 3px;
  font: 500 10.5px/1.2 "Oswald", "Be Vietnam Pro", system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cl-vang);
}
.bd-cl-dai .bd-cl-tieuDe {
  display: block;
  font: 500 23px/1.12 "Newsreader", Cambria, "Times New Roman", serif;
  letter-spacing: -0.01em;
}
.bd-cl-dai .bd-cl-moTa {
  margin: 0;
  color: var(--chu-sang);
}
.bd-cl-dai .bd-cl-thongKe,
.bd-cl-dai .bd-cl-daLuu {
  margin: 0;
}
.bd-cl-chonKhoi {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Tầng có nhãn vàng. */
.bd-cl-tang {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
}
.bd-cl-tang + .bd-cl-tang,
.bd-cl-tang + .bd-cl-gapKhoi {
  border-top: 1px solid var(--vien);
}
.bd-cl-tang[hidden] + .bd-cl-tang {
  border-top: 0;
}
.bd-cl-tangNhan {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font: 500 10.5px/1.2 "Oswald", "Be Vietnam Pro", system-ui, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cl-vang);
}
.bd-cl-tangNhan::before {
  content: "";
  flex: none;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background-color: var(--cl-vang);
}
.bd-cl-tangNhan .bd-cl-dem {
  margin-left: auto;
  font: 400 11.5px/1.2 "Be Vietnam Pro", system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chu2);
  text-align: right;
}
/* Huy hiệu trạng thái: xanh đang nắm giữ, đỏ đã bán, xám chưa có tín hiệu. */
.bd-cl-tt {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: 8px 10px;
}
.bd-cl-huy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  color: var(--cl-chu-dac);
  font-size: 13px;
  font-weight: 700;
}
.bd-cl-huy i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
}
.bd-cl-huyLen {
  background-color: var(--len-sang);
}
.bd-cl-huyXuong {
  background-color: var(--xuong-sang);
}
.bd-cl-huyXam {
  background-color: var(--noi);
  color: var(--chu);
}
.bd-cl-huyChu {
  font-size: 14px;
  color: var(--chu);
}
.bd-cl-huyChu b {
  color: var(--chu-dam);
}
.bd-cl-huyGia {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--chu2);
}
.bd-cl-lan {
  color: var(--chu);
}
/* Khung backtest ở mặt sửa: ô thả xuống và ngày đầu tới ngày cuối đang dùng. */
.bd-cl-khungDong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.bd-cl-khungChon {
  flex: 0 1 230px;
  width: auto;
  border-color: var(--cl-vien-vang);
}
.bd-cl-khungNgay {
  margin: 0;
  color: var(--chu);
  font-size: 13px;
}
/* Kết quả. */
.bd-cl-tang .bd-cl-kq {
  gap: 12px;
}
.bd-cl-ketLuan {
  font-size: 15px;
  line-height: 1.55;
  color: var(--chu-sang);
}
.bd-cl-ketLuan b {
  font-weight: 600;
}
.bd-cl-oSo {
  display: flex;
  flex-direction: column;
  padding: 11px 12px 12px;
}
.bd-cl-oNhan {
  font: 500 10.5px/1.2 "Oswald", "Be Vietnam Pro", system-ui, sans-serif;
  letter-spacing: 0.14em;
}
.bd-cl-oGt {
  margin-top: 6px;
  font-size: 26px;
  line-height: 1.15;
}
/* Thước so mua giữ: phần tô là quy tắc, vạch là mua giữ hay mốc; không chia vạch như thang chấm. */
.bd-cl-thuoc {
  position: relative;
  height: 26px;
  margin: 6px 0 2px;
}
.bd-cl-thuoc::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 5px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--vien2);
}
.bd-cl-thuocDay {
  position: absolute;
  bottom: 5px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--chu2);
}
.bd-cl-thuocDay.bd-cl-len {
  background-color: var(--len-sang);
}
.bd-cl-thuocDay.bd-cl-xuong {
  background-color: var(--xuong-sang);
}
.bd-cl-thuocKhong {
  position: absolute;
  bottom: 2px;
  width: 1px;
  height: 10px;
  background-color: var(--chu2);
}
.bd-cl-thuocMoc {
  position: absolute;
  bottom: 1px;
  width: 2px;
  height: 12px;
  margin-left: -1px;
  border-radius: 1px;
  background-color: var(--chu-dam);
}
.bd-cl-thuocNhan {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 10.5px;
  line-height: 12px;
  color: var(--chu2);
  white-space: nowrap;
}
.bd-cl-thuocNhanPhai {
  transform: translateX(-100%);
}
.bd-cl-thuocNhanTrai {
  transform: none;
}
/* Lãi gộp / lỗ gộp "∞" (không có lệnh lỗ, mục 12d điểm 6): thước kín, dấu ∞ ở đầu phải. */
.bd-cl-thuocVoCuc {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 12px;
  line-height: 12px;
  color: var(--len-sang);
}
/* Dòng khung đang dùng ở mặt xem, ngay trên nút Chạy backtest. */
.bd-cl-khungHang {
  color: var(--chu);
  font-size: 13px;
}
.bd-cl-cho {
  border-style: dashed;
  border-color: var(--cl-vien-vang);
}
.bd-cl-rong {
  width: 100%;
}
.bd-cl-nut.bd-cl-chinh {
  min-height: 44px;
  padding: 0 18px;
  border-color: var(--cl-nen-dac);
  background-color: var(--cl-nen-dac);
  color: var(--cl-chu-dac);
  font-size: 14px;
  box-shadow: 0 0 0 3px var(--dong-m);
  transition:
    border-color var(--t-mau) var(--e-mau),
    background-color var(--t-mau) var(--e-mau),
    color var(--t-mau) var(--e-mau),
    box-shadow var(--t-mau) var(--e-mau),
    transform var(--t-dong) var(--e-mau);
}
.bd-cl-nut.bd-cl-chinh:hover {
  border-color: var(--cl-nen-dac);
  box-shadow: 0 0 0 5px var(--dong-m);
}
.bd-cl-nut.bd-cl-chinh:active {
  transform: scale(0.97);
}
/* Bắt đầu: hình minh họa, ba bước, Lưu ý chữ nhỏ vạch vàng. */
.bd-cl-minhHoa {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--vien);
  border-radius: 10px;
  background-color: var(--mat);
}
.mh-luoi {
  stroke: var(--vien2);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}
.mh-nen {
  stroke: var(--chu2);
  stroke-width: 1.2;
  fill: var(--mat);
}
.mh-nen.dac {
  fill: var(--chu2);
}
.mh-giu {
  fill: var(--len-sang);
  opacity: 0.16;
}
.mh-mua {
  fill: var(--len-sang);
}
.mh-ban {
  fill: var(--xuong-sang);
}
.bd-cl-buoc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bd-cl-buoc::before {
  content: "";
  position: absolute;
  left: 11.5px;
  top: 14px;
  bottom: 14px;
  width: 1px;
  background-color: var(--cl-vien-vang);
}
.bd-cl-buoc li {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  font-size: 13px;
  line-height: 1.55;
}
.bd-cl-buocSo {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: -1px;
  border-radius: 50%;
  background-color: var(--cl-nen-dac);
  color: var(--cl-chu-dac);
  font: 600 12px/1 "IBM Plex Mono", monospace;
  box-shadow: 0 0 0 3px var(--mat2);
}
.bd-cl-buoc b {
  color: var(--chu-dam);
  font-weight: 600;
}
.bd-cl-luuY {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 11px;
  border: 1px solid var(--cl-vien-vang);
  border-left: 3px solid var(--cl-vang);
  border-radius: 10px;
  background-color: var(--cl-to-vang);
  font-size: 12px;
  line-height: 1.6;
  color: var(--chu-sang);
}
.bd-cl-luuYNhan {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cl-vang);
}
.bd-cl-luuY ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bd-cl-luuY li {
  position: relative;
  padding-left: 12px;
}
.bd-cl-luuY li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.66em;
  width: 5px;
  height: 5px;
  border-radius: 1px;
  background-color: var(--cl-vang);
}
.bd-cl-phim {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--vien2);
  border-bottom-width: 2px;
  border-radius: 5px;
  background-color: var(--mat);
  color: var(--chu-dam);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}
/* Mục gấp và chân. */
.bd-cl-gapKhoi {
  padding: 0 16px;
}
.bd-cl-gap {
  justify-content: flex-start;
  gap: 8px;
  color: var(--chu);
}
.bd-cl-gap > .bd-cl-ic:first-child {
  color: var(--cl-vang);
}
.bd-cl-gapChu {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
}
.bd-cl-mui {
  color: var(--chu2);
  transition: transform var(--t-mau) var(--e-mau);
}
.bd-cl-gap[aria-expanded="true"] .bd-cl-mui {
  transform: rotate(90deg);
}
.bd-cl-vien {
  display: inline-block;
  min-width: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background-color: var(--noi);
  color: var(--chu);
  font-size: 11.5px;
  line-height: 19px;
  text-align: center;
}
.bd-cl-lyDo {
  display: block;
  font-family: "Be Vietnam Pro", system-ui, sans-serif;
  font-size: 11.5px;
  color: var(--chu2);
}
.bd-cl-chuThich {
  margin: 0;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--vien);
  border-radius: 0 0 13px 13px;
  background-color: var(--mat);
  font-size: 12px;
  line-height: 1.5;
  color: var(--chu2);
}
/* ---------- mặt sửa dạng thẻ (SPEC mục 12b) ---------- */
.bd-cl-suaBang .bd-cl-dai {
  gap: 8px;
  padding: 12px;
}
.bd-cl-thanSua {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 10px 14px;
}
.bd-cl-thanSua > .bd-cl-gap {
  border-top: 1px solid var(--vien);
}
.bd-cl-suaBang .bd-cl-khoi,
.bd-cl-khoi {
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--vien);
  border-left-width: 4px;
  border-radius: 10px;
}
.bd-cl-khoi[data-ve="mua"] {
  border-color: var(--cl-vien-len);
  border-left-color: var(--len-sang);
  background-color: var(--cl-khoi-len);
}
.bd-cl-khoi[data-ve="ban"] {
  border-color: var(--cl-vien-xuong);
  border-left-color: var(--xuong-sang);
  background-color: var(--cl-khoi-xuong);
}
.bd-cl-khoiDau {
  flex-wrap: wrap;
  gap: 8px 10px;
  min-width: 0;
  margin: -12px -12px 0;
  padding: 9px 12px;
  border-bottom: 1px solid var(--vien);
  border-radius: 6px 6px 0 0;
}
.bd-cl-khoi[data-ve="mua"] > .bd-cl-khoiDau {
  border-bottom-color: var(--cl-vien-len);
  background-color: var(--cl-dai-len);
}
.bd-cl-khoi[data-ve="ban"] > .bd-cl-khoiDau {
  border-bottom-color: var(--cl-vien-xuong);
  background-color: var(--cl-dai-xuong);
}
.bd-cl-veHuy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 0 11px 0 9px;
  border-radius: 999px;
  color: var(--cl-chu-dac);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1;
}
.bd-cl-veHuy span {
  font-size: 10px;
}
[data-ve="mua"] .bd-cl-veHuy,
[data-cl-dm="mua"] .bd-cl-veHuy {
  background-color: var(--len-sang);
}
[data-ve="ban"] .bd-cl-veHuy,
[data-cl-dm="ban"] .bd-cl-veHuy {
  background-color: var(--xuong-sang);
}
.bd-cl-khoiTen {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--chu-dam);
}
.bd-cl-demThe {
  min-width: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background-color: var(--noi);
  color: var(--chu);
  font-size: 11.5px;
  line-height: 20px;
  text-align: center;
}
.bd-cl-vaHoac {
  display: inline-flex;
  gap: 2px;
  margin-left: auto;
  padding: 2px;
  border: 1px solid var(--vien2);
  border-radius: 8px;
  background-color: var(--mat);
}
.bd-cl-vaHoac button {
  min-height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background-color: transparent;
  color: var(--chu2);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition:
    background-color var(--t-mau) var(--e-mau),
    color var(--t-mau) var(--e-mau);
}
.bd-cl-vaHoac button[aria-pressed="true"] {
  background-color: var(--cl-to-vang2);
  color: var(--chu-dam);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--cl-vang);
}
.bd-cl-vaHoac button:focus-visible,
.bd-cl-nutIc:focus-visible,
.bd-cl-theTen:focus-visible,
.bd-cl-dmMuc:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 2px;
}
.bd-cl-dsThe {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bd-cl-themKhoi {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bd-cl-them {
  align-self: flex-start;
  border-style: dashed;
  border-color: var(--cl-vien-vang);
}
.bd-cl-them .bd-cl-ic {
  color: var(--cl-vang);
}
.bd-cl-theDk {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 9px 12px 11px;
  border: 1px solid var(--vien);
  border-radius: 9px;
  background-color: var(--mat);
}
[data-ve="mua"] .bd-cl-theDk {
  border-color: var(--cl-vien-len);
}
[data-ve="ban"] .bd-cl-theDk {
  border-color: var(--cl-vien-xuong);
}
.bd-cl-theDk.bd-cl-theDkLoi {
  border-color: var(--xuong-sang);
}
.bd-cl-theKhac {
  border-style: dashed;
}
.bd-cl-theDau {
  display: flex;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}
.bd-cl-theTen {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  min-height: 30px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--chu-dam);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  text-decoration: underline dashed var(--cl-vang);
  text-underline-offset: 4px;
}
.bd-cl-theTenTinh {
  cursor: default;
  text-decoration: none;
}
.bd-cl-theLoai {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 11.5px;
  color: var(--chu2);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bd-cl-nutIc {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background-color: transparent;
  color: var(--chu2);
  cursor: pointer;
  transition:
    border-color var(--t-mau) var(--e-mau),
    color var(--t-mau) var(--e-mau);
}
.bd-cl-nutIc:hover {
  border-color: var(--vien2);
  color: var(--chu);
}
.bd-cl-nutXoa:hover {
  border-color: var(--xuong-sang);
  color: var(--xuong-sang);
}
.bd-cl-theKy {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bd-cl-theDoc {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--chu2);
}
.bd-cl-theDoc.bd-cl-theLoi {
  color: var(--xuong-sang);
}
.bd-cl-theCau {
  margin: 0;
  padding: 8px 10px;
  border-radius: 6px;
  background-color: var(--mat2);
  color: var(--chu);
  font-size: 13px;
}
.bd-cl-theO {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.bd-cl-theO > select.bd-cl-o {
  flex: 1 1 auto;
}
.bd-cl-phep {
  color: var(--cl-vang);
  font-weight: 600;
}
.bd-cl-oTinh {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 10px;
  border: 1px dashed var(--vien2);
  border-radius: 6px;
  color: var(--chu2);
  font-size: 13px;
  white-space: nowrap;
}
.bd-cl-oDv {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--chu2);
  font-size: 12.5px;
  white-space: nowrap;
}
.bd-cl-oDv .bd-cl-o {
  width: 64px;
  text-align: center;
}
.bd-cl-oChu {
  color: var(--chu2);
  font-size: 12.5px;
}
/* Thẻ vùng: hai ô số và thanh kéo hai đầu bằng hai input range chồng nhau; vạch mốc có nhãn. */
.bd-cl-vung {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 88px;
  gap: 12px;
  align-items: end;
}
.bd-cl-vung .bd-cl-o {
  width: 88px;
  padding-left: 6px;
  padding-right: 6px;
  text-align: center;
}
/* Chữ mờ "không chặn" của đầu không chặn: màu chữ phụ đạt 4,5:1, ô đủ rộng để đọc trọn (S3bV1-P1-1). */
.bd-cl-vung .bd-cl-o::placeholder {
  color: var(--chu2);
  opacity: 1;
}
.bd-cl-keo {
  position: relative;
  height: calc(var(--cl-th) + 16px);
  min-width: 0;
}
.bd-cl-keoRay,
.bd-cl-keoDay {
  position: absolute;
  bottom: calc(var(--cl-th) / 2 - 2px);
  height: 4px;
  border-radius: 2px;
}
.bd-cl-keoRay {
  left: calc(var(--cl-th) / 2);
  right: calc(var(--cl-th) / 2);
  background-color: var(--vien2);
}
.bd-cl-keoDay {
  left: calc(var(--cl-th) / 2 + (100% - var(--cl-th)) * var(--tu));
  width: calc((100% - var(--cl-th)) * (var(--den) - var(--tu)));
  background-color: var(--cl-vang);
}
.bd-cl-keoMoc {
  position: absolute;
  left: calc(var(--cl-th) / 2 + (100% - var(--cl-th)) * var(--p));
  bottom: calc(var(--cl-th) / 2 - 6px);
  width: 1px;
  height: 12px;
  background-color: var(--chu2);
}
.bd-cl-keoNhan {
  position: absolute;
  top: 0;
  left: calc(var(--cl-th) / 2 + (100% - var(--cl-th)) * var(--p));
  transform: translateX(-50%);
  font-size: 10.5px;
  line-height: 13px;
  color: var(--chu2);
  white-space: nowrap;
}
.bd-cl-keoNhan b {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  color: var(--chu);
}
.bd-cl-keoO {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--cl-th);
  margin: 0;
  background: transparent;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}
.bd-cl-keoO::-webkit-slider-runnable-track {
  height: var(--cl-th);
  background: transparent;
}
.bd-cl-keoO::-moz-range-track {
  height: var(--cl-th);
  background: transparent;
}
.bd-cl-keoO::-webkit-slider-thumb {
  width: var(--cl-th);
  height: var(--cl-th);
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--mat) 0 5px, var(--cl-vang) 5.5px 8px, transparent 8.5px);
  cursor: grab;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
}
.bd-cl-keoO::-moz-range-thumb {
  width: var(--cl-th);
  height: var(--cl-th);
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, var(--mat) 0 5px, var(--cl-vang) 5.5px 8px, transparent 8.5px);
  cursor: grab;
  pointer-events: auto;
}
.bd-cl-keoO:focus-visible {
  outline: none;
}
.bd-cl-keoO:focus-visible::-webkit-slider-thumb {
  box-shadow: inset 0 0 0 2px var(--dong);
}
.bd-cl-keoO:focus-visible::-moz-range-thumb {
  box-shadow: inset 0 0 0 2px var(--dong);
}
/* Thoát theo lệnh. */
.bd-cl-thoat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.bd-cl-thoatDau {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--chu-dam);
}
.bd-cl-thoatDau .bd-cl-ic {
  color: var(--xuong-sang);
}
.bd-cl-thoatDau .bd-cl-theLoai {
  flex: 1 1 200px;
  font-weight: 400;
  white-space: normal;
}
.bd-cl-thoatLuoi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.bd-cl-theSo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 9px 10px 10px;
  border: 1px solid var(--cl-vien-xuong);
  border-radius: 9px;
  background-color: var(--mat);
}
.bd-cl-theSoTen {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--chu-dam);
}
.bd-cl-theSo .bd-cl-theDoc {
  font-size: 11.5px;
}
.bd-cl-suaKq {
  border-color: var(--cl-vien-vang);
}
/* Khung backtest cạnh Phí ở mặt sửa (SPEC đoạn "Khung backtest ở mặt sửa"); bảng hẹp thì xếp dọc. */
.bd-cl-caiDat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.bd-cl-khoiNho {
  gap: 8px;
  min-width: 0;
  border-color: var(--cl-vien-vang);
}
.bd-cl-suaKqDau {
  flex-wrap: wrap;
}
.bd-cl-suaKqDau .bd-cl-nhan {
  color: var(--cl-vang);
  font-weight: 600;
}
/* Danh mục "+ Thêm điều kiện". */
.bd-cl-dm {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--vien2);
  border-radius: 12px;
  background-color: var(--mat);
  box-shadow: 0 10px 28px rgba(var(--bong-rgb), 0.35);
}
.bd-cl-dmDau {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bd-cl-dmTen {
  flex: 1 1 auto;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--chu-dam);
}
.bd-cl-veHuyNho {
  min-height: 24px;
  font-size: 12px;
}
.bd-cl-dmNhom {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--vien);
}
.bd-cl-dmNhan {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin: 0;
  font: 500 10.5px/1.3 "Oswald", "Be Vietnam Pro", system-ui, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cl-vang);
}
.bd-cl-dmNhan span {
  font: 400 11.5px/1.3 "Be Vietnam Pro", system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chu2);
}
.bd-cl-dmDs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bd-cl-dmMuc {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--vien2);
  border-radius: 999px;
  background-color: var(--mat2);
  color: var(--chu);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color var(--t-mau) var(--e-mau);
}
.bd-cl-dmMuc:hover {
  border-color: var(--cl-vang);
}
@media (max-width: 719px) {
  .bd-cl {
    --cl-th: 44px;
  }
  .bd-cl-vaHoac {
    margin-left: 0;
  }
  .bd-cl-vaHoac button {
    min-width: 52px;
    min-height: 44px;
  }
  .bd-cl-nutIc {
    width: 44px;
    height: 44px;
  }
  .bd-cl-theTen {
    min-width: 44px;
    min-height: 44px;
    margin-right: auto;
  }
  .bd-cl-theDau {
    flex-wrap: wrap;
  }
  .bd-cl-theLoai {
    flex-basis: 100%;
    order: 3;
    margin-top: -6px;
    white-space: normal;
  }
  .bd-cl-dmMuc {
    min-width: 44px;
    min-height: 44px;
  }
  .bd-cl-oTinh {
    height: 44px;
  }
  .bd-cl-theO > *,
  .bd-cl-theO > select.bd-cl-o {
    flex: 1 1 100%;
  }
  .bd-cl-oDv .bd-cl-o {
    flex: 1 1 auto;
    width: auto;
    min-width: 64px;
  }
  .bd-cl-vung {
    grid-template-columns: 1fr 1fr;
    row-gap: 6px;
  }
  .bd-cl-keo {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .bd-cl-vung .bd-cl-o {
    width: 100%;
    max-width: 120px;
  }
  .bd-cl-vungCao {
    justify-self: end;
  }
  .bd-cl-keoNhanPhu {
    display: none;
  }
  .bd-cl-thoatLuoi {
    grid-template-columns: minmax(0, 1fr);
  }
  .bd-cl-tangNhan {
    flex-wrap: wrap;
  }
  .bd-cl-tangNhan .bd-cl-dem {
    flex-basis: 100%;
    margin-left: 22px;
    text-align: left;
  }
  .bd-cl-khungChon {
    flex: 1 1 100%;
  }
  .bd-cl-ba {
    min-width: 44px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bd-cl-nut.bd-cl-chinh:active {
    transform: none;
  }
  .bd-cl-mui,
  .bd-cl-vaHoac button,
  .bd-cl-nutIc,
  .bd-cl-dmMuc {
    transition: none;
  }
}

/* ---------- Nút nổi bật, quản lý quy tắc của tôi (chien_luoc SPEC ba đoạn cuối, mốc S3b pha 2) ----------
   Nút Chiến lược trên thanh mảnh và nút Tạo quy tắc mới: nền vàng đồng pha nhạt, viền vàng đồng; rê
   chuột nổi lên 1 px kèm bóng vàng nhạt, bấm nhấn xuống; thời gian và đường cong theo token chuyển
   động; giảm chuyển động thì không dịch, không nhịp. */
.bdm-nutThanh.bd-cl-chip,
.bd-cl-nut.bd-cl-taoMoi {
  border: 1px solid var(--cl-vang);
  background-color: color-mix(in srgb, var(--cl-vang) 10%, var(--mat));
  transition:
    background-color var(--t-mau) var(--e-mau),
    box-shadow var(--t-mau) var(--e-mau),
    transform var(--t-nhan) var(--e-ra);
}
.bdm-nutThanh.bd-cl-chip {
  color: var(--chu-dam);
}
.bdm-nutThanh.bd-cl-chip:hover,
.bd-cl-nut.bd-cl-taoMoi:hover {
  transform: translateY(-1px);
  background-color: color-mix(in srgb, var(--cl-vang) 16%, var(--mat));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--cl-vang) 32%, transparent);
}
.bdm-nutThanh.bd-cl-chip:active,
.bd-cl-nut.bd-cl-taoMoi:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}
/* Bảng đang mở: nền đặc hơn, viền trong. */
.bdm-nutThanh.bd-cl-chip[aria-expanded="true"] {
  background-color: color-mix(in srgb, var(--cl-vang) 28%, var(--mat));
  box-shadow: inset 0 0 0 1px var(--cl-vang);
  color: var(--chu-dam);
}
.bdm-nutThanh.bd-cl-chip[aria-expanded="true"]:hover {
  box-shadow:
    inset 0 0 0 1px var(--cl-vang),
    0 3px 10px color-mix(in srgb, var(--cl-vang) 32%, transparent);
}
.bd-cl-chip .bd-cl-chipHinh {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--cl-vang);
}
/* Nhịp sáng một lần khi mở màn lần đầu trong phiên trình duyệt (token --t-nhip-vang). */
.bd-cl-chip.bd-cl-nhipSang {
  animation: bd-cl-nhipSang var(--t-nhip-vang) var(--e-mau) 1;
}
@keyframes bd-cl-nhipSang {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--cl-vang) 0%, transparent);
  }
  35% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--cl-vang) 42%, transparent);
  }
}
.bd-cl-nut.bd-cl-taoMoi {
  align-self: flex-start;
  gap: 6px;
  color: var(--cl-vang);
  font-weight: 600;
}
/* Nền sáng: chữ vàng đồng đậm hơn một chút để đạt 4,5:1 cả khi rê chuột (nền đặc hơn). */
html[data-giao-dien="sang"] .bd-cl-nut.bd-cl-taoMoi {
  color: color-mix(in srgb, var(--cl-vang) 78%, var(--chu-dam));
}
.bd-cl-chon option.bd-cl-moMoi {
  font-weight: 700;
}
/* Hàng ô chọn quy tắc và nút xóa quy tắc của tôi. */
.bd-cl-chonHang {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.bd-cl-chonHang .bd-cl-chon {
  flex: 1 1 auto;
  min-width: 0;
}
.bd-cl-nut.bd-cl-xoaQt,
.bd-cl-nut.bd-cl-qlNut {
  flex: none;
  justify-content: center;
  min-width: 36px;
  padding: 0 8px;
  color: var(--chu2);
}
.bd-cl-nut.bd-cl-xoaQt:hover,
.bd-cl-nut.bd-cl-qlXoa:hover {
  border-color: var(--xuong-sang);
  color: var(--xuong-sang);
}
/* Nút Ghim cạnh ô chọn (SPEC đoạn "Nút Ghim lên biểu đồ"): tắt là nút viền thường, ghim vàng đồng;
   bật thì nền vàng đồng pha như nút Chiến lược đang mở, ghim tô đặc. */
.bd-cl-nut.bd-cl-ghim {
  flex: none;
  color: var(--chu2);
}
.bd-cl-ghim .bd-cl-ic {
  color: var(--cl-vang);
}
.bd-cl-nut.bd-cl-ghim:hover {
  color: var(--chu-dam);
}
.bd-cl-nut.bd-cl-ghim[aria-pressed="true"] {
  border-color: var(--cl-vang);
  background-color: color-mix(in srgb, var(--cl-vang) 24%, var(--mat));
  box-shadow: inset 0 0 0 1px var(--cl-vang);
  color: var(--chu-dam);
  font-weight: 600;
}
.bd-cl-ghim[aria-pressed="true"] .bd-cl-ic {
  fill: currentColor;
}
/* Danh sách Quản lý quy tắc của tôi. */
.bd-cl-ql {
  gap: 10px;
}
.bd-cl-qlDs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bd-cl-qlDong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--vien);
}
.bd-cl-qlTen {
  flex: 1 1 140px;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--chu);
}
.bd-cl-qlMd {
  flex: none;
  color: var(--cl-vang);
  font-size: 12px;
}
.bd-cl-qlO {
  flex: 1 1 160px;
}
.bd-cl-qlHoi {
  flex: 1 1 100%;
  margin: 0;
  color: var(--chu);
}
.bd-cl-qlLoi {
  flex: 1 1 100%;
}
@media (max-width: 719px) {
  .bdm-nutThanh.bd-cl-chip,
  .bd-cl-nut.bd-cl-taoMoi,
  .bd-cl-nut.bd-cl-xoaQt,
  .bd-cl-nut.bd-cl-ghim,
  .bd-cl-nut.bd-cl-qlNut {
    min-height: 44px;
    min-width: 44px;
  }
  /* Khổ hẹp: nút Ghim xuống hàng riêng dưới ô chọn, rộng hết hàng, để ô chọn không cắt dấu ★;
     ô chọn và nút thùng rác giữ một hàng. */
  .bd-cl-chonHang {
    flex-wrap: wrap;
  }
  .bd-cl-chonHang .bd-cl-chon {
    flex: 1 1 0;
  }
  .bd-cl-nut.bd-cl-ghim {
    order: 1;
    flex: 1 1 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bdm-nutThanh.bd-cl-chip,
  .bdm-nutThanh.bd-cl-chip:hover,
  .bdm-nutThanh.bd-cl-chip:active,
  .bd-cl-nut.bd-cl-taoMoi,
  .bd-cl-nut.bd-cl-taoMoi:hover,
  .bd-cl-nut.bd-cl-taoMoi:active {
    transform: none;
    transition-property: background-color, border-color, color, box-shadow;
  }
  .bd-cl-chip.bd-cl-nhipSang {
    animation: none;
  }
}

/* Giảm chuyển động: nút không co lại khi nhấn; chỉ còn đổi màu (SPEC chuyển động mục 5). */
@media (prefers-reduced-motion: reduce) {
  .bdm-nutThanh,
  .bdm-bat,
  .bdm-nutCong {
    transition-property: background-color, border-color, color, box-shadow;
  }
  .bdm-nutThanh:active,
  .bdm-bat:active,
  .bdm-nutCong:active {
    transform: none;
  }
  /* Bảng chọn chỉ báo chỉ mờ dần; núm công tắc đổi chỗ ngay, chỉ còn đổi màu. */
  .bdm-bangCb {
    animation-name: bdm-moDan;
  }
  .bd-cl-daLuu {
    animation: none;
  }
  /* Hàng công cụ vẽ khổ hẹp mở ra chỉ mờ dần. */
  .bdm-congMo .bdm-cong {
    animation-name: bdm-moDan;
  }

  /* Vòng tải không xoay, chỉ mờ dần theo nhịp. */
  .bdkt-tai {
    animation: bdkt-nhipMo var(--t-cho) var(--e-mau) infinite;
  }
}
@keyframes bdm-moDan {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ---------- Lớp Cung cầu và mẫu hình (docs/bieu_do/mau_hinh/SPEC.md mục 2, 6) ---------- */
/* Cụm hai nút trên thanh: không tách khi hàng điều khiển xuống dòng. */
.bdm-capNut {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.bdm-capNut:empty {
  display: none;
}
/* Nút trên thanh cạnh Chiến lược. Bật thì viền trong, không đội thêm bề ngang. */
.bdm-nutMh[aria-pressed="true"] {
  color: var(--chu-dam);
  background-color: color-mix(in srgb, var(--dong) 10%, transparent);
  box-shadow: inset 0 0 0 1px var(--dong);
}
/* Màu trung tính: chữ --chu2 trên nền --mat2, viền --vien2; không xanh đỏ, không mũi tên. */
.bdm-mh {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.bdm-mh[hidden] {
  display: none;
}
.bdm-mhDau {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.bdm-mhTieuDe {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--chu-dam);
}
.bdm-mhNgay {
  font-size: 11.5px;
  color: var(--chu3);
}
.bdm-mhNhom {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bdm-mhChip {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--vien2);
  border-radius: 999px;
  background-color: transparent;
  color: var(--chu2);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition:
    color var(--t-mau) var(--e-mau),
    background-color var(--t-mau) var(--e-mau);
}
.bdm-mhChip[aria-pressed="true"] {
  color: var(--chu);
  background-color: var(--mat2);
}
.bdm-mhChip:focus-visible {
  outline: 2px solid var(--dong);
  outline-offset: 1px;
}
.bdm-mhKhoi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--vien);
}
.bdm-mhKhoi h3 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--chu);
}
.bdm-mhKhoi h3 small {
  font-weight: 400;
  color: var(--chu3);
}
.bdm-mhDs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bdm-mhVung,
.bdm-mhSk {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
  color: var(--chu2);
}
.bdm-mhVung b,
.bdm-mhSk b {
  font-weight: 600;
  color: var(--chu);
}
.bdm-mhSkTen {
  margin: 0;
}
.bdm-mhThanh {
  position: relative;
  height: 6px;
  margin: 4px 0 2px;
  background: var(--vien2);
  border-radius: 3px;
}
.bdm-mhThanh > span {
  display: block;
  height: 100%;
  background: var(--dong);
  border-radius: 3px;
}
.bdm-mhThanh > i {
  position: absolute;
  top: -2px;
  width: 1px;
  height: 10px;
  background: var(--chu);
}
.bdm-mhLink {
  padding: 0;
  border: 0;
  background: none;
  color: var(--dong);
  font: inherit;
  cursor: pointer;
}
.bdm-mhLoc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 2px 4px 6px;
}
.bdm-mhLoc .bdm-mhChip {
  min-height: 0;
  padding: 2px 8px;
  background: transparent;
  font: 500 11px/1.3 "IBM Plex Mono", ui-monospace, monospace;
}
.bdm-mhLoc .bdm-mhChip[aria-pressed="true"] {
  color: var(--dong);
  background: transparent;
  border-color: color-mix(in srgb, var(--dong) 50%, transparent);
}
.bdm-mhChip {
  font: 500 11px/1.3 "IBM Plex Mono", ui-monospace, monospace;
  color: var(--chu2);
  background: transparent;
  border: 1px solid var(--vien2);
  border-radius: 20px;
  padding: 2px 8px;
  cursor: pointer;
}
.bdm-mhChip.on {
  color: var(--dong);
  border-color: color-mix(in srgb, var(--dong) 50%, transparent);
}
.bdm-mhKhoi h3 {
  margin: 0 0 2px;
  font: 600 14px/1.3 "Chakra Petch", sans-serif;
}
.bdm-mhTt {
  margin: 0 0 10px;
  color: var(--chu2);
  font-size: 12px;
}
.bdm-mhThe,
.bdm-mhVz {
  border: 1px solid var(--vien2);
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  background: color-mix(in srgb, var(--mat2) 60%, transparent);
}
.bdm-mhThe {
  cursor: pointer;
}
.bdm-mhThe[aria-pressed="true"] {
  border-color: var(--dong);
}
.bdm-mhTheDau {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.bdm-mhVzDau {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}
.bdm-mhTheDau b,
.bdm-mhVzDau b {
  font: 600 13px/1.3 "Chakra Petch", sans-serif;
}
.bdm-mhTheDau small {
  display: block;
  color: var(--chu3);
  font: 500 10.5px/1.3 "IBM Plex Mono", ui-monospace, monospace;
}
.bdm-mhVzDau small {
  color: var(--chu3);
  font-size: 11px;
}
.bdm-mhKyb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 10px/1 "IBM Plex Mono", ui-monospace, monospace;
  border: 1.6px solid;
}
.bdm-mhKyb.len,
.bdm-mhNhan.len,
.bdm-so.len { color: var(--len); }
.bdm-mhKyb.xuong,
.bdm-mhNhan.xuong,
.bdm-so.xuong { color: var(--xuong); }
.bdm-mhKyb.len { border-color: var(--len); }
.bdm-mhKyb.xuong { border-color: var(--xuong); }
.bdm-mhNhan {
  font: 600 10px/1.2 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 20px;
}
.bdm-mhNhan.len { background: color-mix(in srgb, var(--len) 12%, transparent); }
.bdm-mhNhan.xuong { background: color-mix(in srgb, var(--xuong) 12%, transparent); }
.bdm-mhSp { grid-column: 1 / -1; width: 100%; height: 26px; margin-top: 4px; }
.bdm-mhBl { margin-top: 8px; }
.bdm-mhBt2 {
  position: relative;
  height: 10px;
  background: var(--vien2);
  border-radius: 5px;
}
.bdm-mhBt2 > b {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 5px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--len) 40%, transparent), var(--len));
}
.bdm-mhBt2 > b.xuong {
  background: linear-gradient(90deg, color-mix(in srgb, var(--xuong) 40%, transparent), var(--xuong));
}
.bdm-mhBt2 > i {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  background: var(--chu);
}
.bdm-mhCi {
  position: absolute;
  top: 3px;
  height: 4px;
  background: color-mix(in srgb, var(--chu) 35%, transparent);
  border-radius: 2px;
}
.bdm-mhGh,
.bdm-mhAn,
.bdm-mhMo {
  margin: 6px 0 0;
  color: var(--chu3);
  font-size: 11.5px;
}
.bdm-mhCg {
  margin: 0;
  color: var(--chu2);
  font-size: 11.5px;
}
.bdm-mhCg p { margin: 0 0 6px; }
.bdm-mhCg b { color: var(--chu); font-weight: 600; }
.bdm-mhAn {
  border-top: 1px solid var(--vien2);
  padding-top: 8px;
}
.bdm-mhHang {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.bdm-mhHs { width: 100%; max-width: 190px; height: auto; }
.bdm-mhO3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}
.bdm-mhO3 div {
  background: var(--mat);
  border-radius: 6px;
  padding: 6px 8px;
  min-width: 0;
}
.bdm-mhO3 span {
  display: block;
  font-size: 10.5px;
  color: var(--chu3);
}
.bdm-mhO3 b { font-size: 13px; }
.bdm-mhDoc {
  margin-top: 10px;
  border-top: 1px solid var(--vien2);
  padding-top: 8px;
}
.bdm-mhDoc summary {
  cursor: pointer;
  font: 600 12px/1.3 "Chakra Petch", sans-serif;
  color: var(--dong);
}
.bdm-mhDoc ul {
  margin: 6px 0 0;
  padding-left: 16px;
  color: var(--chu2);
  font-size: 11.5px;
}
.bdm-mhBt { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px; align-items: center; margin-top: 4px; }
.bdm-mhBt span { font-size: 11px; color: var(--chu3); }
.bdm-mhBt i { position: relative; display: block; height: 8px; background: var(--vien2); border-radius: 4px; }
.bdm-mhBt b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--dong); border-radius: 4px; }
.bdm-mhBtSo { margin: 4px 0 0; font: 600 11px "IBM Plex Mono", ui-monospace, monospace; }
@media (max-width: 420px) {
  .bdm-mhHang { grid-template-columns: 1fr; }
  .bdm-mhTheDau { grid-template-columns: 26px minmax(0, 1fr); }
  .bdm-mhNhan { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .bdm-mhChip, .bdm-mhThe, .bdm-mhHop { transition: none; animation: none; }
}
.bdm-mhTk {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--chu2);
}
.bdm-mhTk p {
  margin: 0;
}
.bdm-mhPv,
.bdm-mhGhi,
.bdm-mhLuuY {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--chu3);
}
.bdm-mhTl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 10px;
  margin: 0;
  font-size: 12.5px;
}
.bdm-mhTl dt {
  color: var(--chu2);
}
.bdm-mhTl dd {
  margin: 0;
  text-align: right;
  color: var(--chu);
}
.bdm-mhTl small {
  color: var(--chu3);
}
.bdm-tt { margin-top: 2px; }
.bdm-tt dd { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.bdm-tt b { font-size: 13px; }
.bdm-tt small { font-size: 10.5px; line-height: 1.3; }
.bdm-tt small.len { color: var(--len); }
.bdm-tt small.xuong { color: var(--xuong); }
/* Hộp rê chuột hay chạm nhãn sự kiện: tên, ngày, câu thống kê và phạm vi. */
.bdm-mhHop {
  position: absolute;
  z-index: 6;
  max-width: min(320px, calc(100% - 8px));
  padding: 8px 10px;
  border: 1px solid var(--vien2);
  border-radius: 8px;
  background-color: var(--mat2);
  color: var(--chu2);
  font-size: 12px;
  line-height: 1.45;
  pointer-events: none;
  box-shadow: 0 6px 18px rgba(var(--bong-rgb), 0.35);
}
.bdm-mhHop[hidden] {
  display: none;
}
.bdm-mhHopTen {
  margin: 0 0 4px;
  font-weight: 600;
  color: var(--chu);
}
.bdm-phai:has(> .bdm-mh:not([hidden])) {
  flex-basis: 320px;
}

/* ---------- B5 vừa một màn ở khổ rộng (docs/bieu_do/VUA_MAN.md bản 1.1) ---------- */
/* bieu_do_man.js đo phần còn lại của cửa sổ, đặt --bdm-cao-khoi (chiều cao khối biểu đồ, từ hàng
   chọn mã tới dòng nguồn); vùng vẽ lấy hết phần còn lại của khối (flex), tối thiểu 300 px (CAU_HOI_MO câu 95). */
@media (min-width: 720px) {
  .bdm-than {
    padding-bottom: 16px;
  }
  .bdm-vua .bdm-giua {
    height: var(--bdm-cao-khoi, auto);
  }
  .bdm-vua .bdm-vung {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 300px;
  }
  .bdm-vua .bdm-dauKhung,
  .bdm-vua .bdm-dayDuoi,
  .bdm-vua .bdm-nguon {
    flex-shrink: 0;
  }
  .bdm-vua .bdm-vung .bdkt-dayDu {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
  }
  /* Cột công cụ vẽ không cao hơn khối biểu đồ: thừa thì cuộn trong cột. */
  .bdm-vua .bdm-cong {
    max-height: var(--bdm-cao-khoi, none);
    overflow-y: auto;
  }
  /* Cột phải cao bằng khối biểu đồ, cuộn dọc bên trong (mục 6). */
  .bdm-vua .bdm-phai {
    max-height: var(--bdm-cao-khoi, none);
    overflow-y: auto;
    overscroll-behavior: contain;
    align-self: flex-start;
  }
  .bdm-vua .bdm-phai .bd-cl-dau {
    position: sticky;
    top: -14px;
    z-index: 2;
    margin-top: -14px;
    padding-top: 14px;
    padding-bottom: 6px;
    background-color: var(--mat);
  }
  .bdm-vua .bdm-luoi:has(> .bdm-phai.bd-cl-coBang) > .bdm-giua {
    align-self: stretch;
  }
}
/* Toàn màn hình (mục 7): khung màn lấy cả màn hình, nền như trang. */
.bdm-than:fullscreen {
  overflow: auto;
  background-color: var(--nen);
}
.bdm-nutToan[hidden] {
  display: none;
}
@media (max-width: 719px) {
  .bdm-nutToan {
    display: none;
  }
}
/* Nút thu gọn, phóng to ở góc phải chú giải khung dưới (mục 4.6): luôn hiện, nhận chuột. */
.bdkt-cgKhung:not(.bdkt-cgKhungGia) {
  flex-direction: row;
  align-items: flex-start;
  gap: 4px;
}
.bdkt-cgKn {
  display: inline-flex;
  flex: none;
  gap: 1px;
  pointer-events: auto;
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--mat) 72%, transparent);
}
.bdkt-cgKn .bdkt-cgB[aria-pressed="true"] {
  color: var(--chu);
}
/* Khung dưới dưới 70 px: chú giải một dòng, tên và giá trị đầu; rê chuột thấy đủ (mục 4.5). */
.bdkt-cgMot .bdkt-cgDong:not(.bdkt-cgRe) .bdkt-cgSo > span:not(:first-child) {
  display: none;
}
.bdkt-cgMot .bdkt-cgDs > .bdkt-cgDong:not(:first-child):not(.bdkt-cgRe) {
  display: none;
}

/* B5: trang M23 khổ rộng thường không cuộn; chừa sẵn chỗ thanh cuộn của khung cuộn để bề rộng khung
   nến không đổi khi bảng Chiến lược xuống dưới làm trang cuộn. Cột phải cuộn trong: chừa chỗ thanh
   cuộn của cột, cột rộng thêm đúng phần đó để bảng giữ bề rộng như trước. */
@media (min-width: 720px) {
  body:has(#v-bieudo.on) #lam {
    scrollbar-gutter: stable;
  }
  .bdm-vua .bdm-phai {
    scrollbar-gutter: stable;
  }
}
/* Chỉ khi cột nằm cạnh khung nến ở mặt xem sau khi rộng thêm 16 px (lưới từ 1 006 px, tức 990 px của luật S2V1-P2-6 cộng 16); mặt sửa giữ 660 px. */
@container (min-width: 1006px) {
  .bdm-vua .bdm-phai.bd-cl-coBang:not(.bd-cl-dangSua) {
    flex-basis: 436px;
    min-width: 416px;
    max-width: 456px;
  }
}