/* ==========================================================================
   PinkAgc V8 — VỎ GIAO DIỆN (port từ bản dựng `_v8-ui-prototype/`)

   Thứ tự nạp bắt buộc:  v8.css  →  v8-theme.css  →  v8-skin.css
     v8.css        cấu trúc gốc
     v8-theme.css  bảng màu (Sáng / Obsidian)
     v8-skin.css   bố cục vỏ  ← tệp này

   Đổi so với bản gốc:
     · Khung cuộn chuyển từ cả trang vào riêng vùng nội dung, nên thanh đầu
       trang · dải tab · thanh công cụ · chân bảng đứng yên khi cuộn.
     · Dải tab nằm TRÊN nền gradient, tab đang chọn "khoét" vào vùng nội dung.
     · Vùng nội dung là một tấm bo góc nổi trên nền gradient.
   ========================================================================== */

/* ---------------------------------------------------------------- KHUNG */
html, body { height: 100%; }
body { overflow: hidden; }               /* khung cuộn nằm trong .content */

.app {
  grid-template-columns: 76px 1fr;
  height: 100vh;
  min-height: 0;
  background: var(--head-grad);
}
.main { min-height: 0; overflow: hidden; }

/* ------------------------------------------------------------ THANH BÊN */
.rail {
  width: 76px;
  padding: 12px 0 14px;
  gap: 4px;
  border-right: 0;
  box-shadow: 1px 0 0 var(--border);
  align-items: center;
}
.rail-logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--brand-solid);
  color: var(--on-accent);
  box-shadow: var(--glow);
  margin-bottom: 14px;
  display: grid; place-items: center;
  flex: none;
}
.rail-nav { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rail-btn {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  color: var(--muted);
  flex: none;
}
.rail-btn:hover { background: var(--surface-3); color: var(--ink-2); }
.rail-btn.on {
  background: var(--brand-solid);
  color: var(--on-accent);
  box-shadow: var(--glow);
}
.rail-sep { width: 32px; height: 1px; background: var(--border); margin: 8px 0; flex: none; }
.rail-foot {
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: var(--accent); margin-top: 8px;
}

/* ------------------------------------------------- THANH ĐẦU TRANG */
.head {
  height: 56px; min-height: 56px;
  padding: 0 16px 0 14px;
  gap: 10px;
  border-bottom: 0;
  flex: none;
}
/* Thương hiệu đã nằm trong ngăn kéo — trên thanh đầu trang là TÊN MÀN
   đang mở, giống bản dựng. Giữ hai phần tử cũ trong DOM (chỉ ẩn) phòng khi
   có mã nào còn đọc tới. */
.head .brand, .head .head-sub { display: none !important; }

.head-menu {
  width: 32px; height: 32px; border-radius: 999px;
  border: 0; background: rgba(255,255,255,.14); color: #fff;
  display: grid; place-items: center; cursor: pointer; flex: none;
  transition: background .13s;
}
.head-menu:hover { background: rgba(255,255,255,.26); }
.head-title {
  font-size: 18px; font-weight: 600; letter-spacing: -.01em;
  color: #fff; margin: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.head-right { gap: 8px; }

.head .chip {
  height: 28px; padding: 0 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.head .chip#v8-plan { background: rgba(255,255,255,.94); color: var(--accent); }
.head .icobtn {
  width: 30px; height: 30px; border-radius: 999px;
  border: 0; background: rgba(255,255,255,.14);
}
.head .icobtn:hover { background: rgba(255,255,255,.26); }
.head-div { width: 1px; height: 20px; background: rgba(255,255,255,.28); flex: none; }

/* ------------------------------------------------------------ DẢI TAB */
.tabs {
  background: transparent;
  border-bottom: 0;
  padding: 12px 12px 0;
  gap: 2px;
  align-items: flex-end;
  flex: none;
}
.tab {
  height: 40px; padding: 0 18px;
  border-radius: 10px 10px 0 0;
  color: rgba(255,255,255,.80);
  font-size: 13px; font-weight: 500;
  transition: background .13s, color .13s;
}
.tab:hover { background: rgba(255,255,255,.14); color: #fff; }
/* Tab đang chọn mang đúng màu vùng nội dung nên trông như khoét vào tấm nền */
.tab.on { background: var(--bg); color: var(--accent); font-weight: 600; }
.tab.on::after { display: none; }
.tab .cnt { background: rgba(255,255,255,.20); color: #fff; font-weight: 700; }
.tab.on .cnt { background: var(--accent-soft); color: var(--accent); }

.tabs-right { gap: 2px; padding-bottom: 6px; }
.tabs-right button {
  height: 30px; padding: 0 12px; border-radius: 8px;
  color: rgba(255,255,255,.86); font-size: 13px; font-weight: 500;
}
.tabs-right button:hover { background: rgba(255,255,255,.16); color: #fff; }
.tabs-right button.on { background: rgba(255,255,255,.94); color: var(--accent); font-weight: 600; }
.tabs-right .ag-sep { background: rgba(255,255,255,.28); }

/* ----------------------------------------------- VÙNG NỘI DUNG (canvas) */
.content {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding: 0 12px 12px;
}
.panel {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 -1px 0 rgba(255,255,255,.35), 0 24px 56px -24px rgba(28,21,32,.30);
}

/* Trong tấm nội dung: thanh công cụ và chân bảng đứng yên, phần giữa cuộn */
.panel > .toolbar { flex: none; background: var(--surface); }
.panel > .foot    { flex: none; background: var(--surface); }
.panel > .colpanel { flex: none; }
.twrap { flex: 1 1 auto; min-height: 0; overflow: auto; background: var(--surface); }

/* Các màn thay chỗ bảng dữ liệu phải chiếm hết chiều cao còn lại.
   Sáu màn dưới đây ĐÃ tự quản lý cuộn bên trong (`.hdbody`, `.khwrap`,
   `.khtwrap` đều `overflow:auto`) — cho chúng `overflow:auto` nữa là sinh
   hai thanh cuộn lồng nhau. Chỉ hai màn không có ruột cuộn riêng mới cần. */
#khpanel, #hdpanel, #thepanel, #qcpanel, #tvpanel, #shpanel {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
}
#homepanel, #dash { flex: 1 1 auto; min-height: 0; overflow: auto; }

/* ------------------------------------------------------- THANH CÔNG CỤ */
.toolbar { padding: 12px 14px; gap: 8px; }
/* Tên màn đã hiện trên thanh đầu trang — để cả hai chỗ là lặp. Vẫn giữ trong
   DOM vì `#head-title` soi phần tử này để lấy chữ. */
.tb-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.toolbar:not(:has(.tb-count))::before { content: ''; flex: 1 1 auto; }

.btn {
  height: 32px; padding: 0 12px;
  border-radius: 8px;
  font-size: 13px; font-weight: 500;
}
.btn.primary { padding: 0 16px; font-weight: 600; box-shadow: var(--glow); }
.search { height: 32px; border-radius: 8px; padding: 0 10px; }

/* ---------------------------------------------------------------- BẢNG */
thead th {
  height: 40px; padding: 0 12px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--ink-2);
  background: var(--surface-2);
}
tbody td { height: 48px; padding: 0 12px; }
tbody tr:nth-child(even) { background: var(--surface-2); }
tbody tr:nth-child(even) td:first-child,
tbody tr:nth-child(even) td:nth-child(2) { background: var(--surface-2); }

/* ------------------------------------------------------------ CHÂN BẢNG */
.foot { padding: 10px 14px; font-size: 13px; }

/* ------------------------------------------------------------ NGĂN KÉO */
.drawer { width: 264px; }
.dw-brand { height: 68px; padding: 0 14px; font-size: 15px; font-weight: 700; }
.dw-logo {
  width: 34px; height: 34px; border-radius: 10px;
  background: var(--brand-solid); color: var(--on-accent);
}
.dw-user { border-radius: 14px; }
.dw-uav { background: var(--brand-solid); color: var(--on-accent); }
.dw-sec { font-size: 10px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; }
.dw-item, .dw-subitem { height: 38px; border-radius: 10px; font-size: 13px; font-weight: 500; }
.dw-item.active, .dw-item.on {
  background: var(--brand-solid); color: var(--on-accent); box-shadow: var(--glow);
}
.dw-subitem { height: 34px; font-weight: 400; }
.dw-subitem.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* --------------------------------------------------- NÚT TRỢ GIÚP NỔI */
.v8-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 50;
  width: 50px; height: 50px; border-radius: 999px; border: 0;
  background: var(--brand-solid); color: var(--on-accent);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--glow), 0 0 0 5px var(--fab-halo, rgba(255,255,255,.7));
  transition: transform .13s;
}
.v8-fab:hover { transform: translateY(-2px) scale(1.03); }

/* ------------------------------------------------------------ MÀN HẸP */
/* Thanh đầu trang phải co được: tên màn nhường chỗ trước, rồi tới các chip
   ít quan trọng. Không đặt min-width:0 thì flex không cho tên màn co lại,
   cả thanh tràn ngang và tên biến mất hoàn toàn. */
.head-title { min-width: 0; flex: 0 1 auto; }
.head-right { min-width: 0; flex: 0 0 auto; }

@media (max-width: 1400px) {
  #v8-conn { display: none; }          /* trạng thái cầu nối — đã có chấm màu ở ngăn kéo */
}
@media (max-width: 1180px) {
  .head [data-lang], .head .chip:not(#v8-plan):not(.user) { display: none; }
  .tabs-right button { padding: 0 9px; }
}
@media (max-width: 1000px) {
  /*  Phải là `1fr`, KHÔNG phải `0 1fr`. Khi thanh bên `display:none` nó
      không còn là ô lưới nữa, nên .main tụt lên làm ô đầu tiên — để
      `0 1fr` thì .main lãnh cột rộng 0 và cả trang bẹp lại còn một vệt. */
  .app { grid-template-columns: 1fr; }
  .rail { display: none; }
  .content { padding: 0 8px 8px; }
  .tabs { padding: 10px 8px 0; overflow-x: auto; }
  .tab { padding: 0 13px; }
  .head { padding: 0 10px; gap: 8px; }
  .head-div { display: none; }
  .hm, .ds-split, .ds-hero, .ds-g2, .ds-g3 { grid-template-columns: 1fr !important; }
}
@media (max-width: 700px) {
  .head-title { font-size: 15px; }
  .homepanel, .ds { padding: 14px 12px 20px; }
}

/* ==========================================================================
   MÀN TRANG CHỦ
   ========================================================================== */
.homepanel { padding: 20px 22px 28px; }

.hm { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 14px; align-items: start; }
@media (max-width: 1280px) { .hm { grid-template-columns: 1fr; } }
.hm-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.hm-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px 22px;
}
.hm-welcome { padding: 22px 24px 24px; }
.hm-hi { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 18px; }

/* --- Dải gói cước --- */
.hm-plan {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 16px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--accent-soft);
}
.hm-days {
  width: 62px; flex: none; text-align: center; padding: 6px 0;
  border-radius: 8px; background: var(--surface); border: 1px solid var(--border);
}
.hm-days b { display: block; font-size: 18px; font-weight: 700; color: var(--accent); font-family: "Roboto Mono", monospace; }
.hm-days span { font-size: 11px; color: var(--muted); }
.hm-plant { font-size: 13px; font-weight: 500; color: var(--ink); }
.hm-bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; margin-top: 8px; }
.hm-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--brand-solid); }

/* --- Ba ô số liệu --- */
.hm-mini { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin-top: 16px; }
@media (max-width: 760px) { .hm-mini { grid-template-columns: 1fr; } }
.hm-ms { padding: 14px 16px; border-radius: 12px; border: 1px solid transparent; }
.hm-ms.warn { background: var(--warn-soft); border-color: var(--warn); }
.hm-ms.good { background: var(--good-soft); border-color: var(--good); }
.hm-ms.info { background: var(--accent-soft); border-color: var(--accent); }
.hm-ms.warn { border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.hm-ms.good { border-color: color-mix(in srgb, var(--good) 28%, transparent); }
.hm-ms.info { border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.hm-msic {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  margin-bottom: 12px; background: var(--surface);
}
.hm-ms.warn .hm-msic { color: var(--warn); }
.hm-ms.good .hm-msic { color: var(--good); }
.hm-ms.info .hm-msic { color: var(--accent); }
.hm-msv { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hm-msl { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* --- Truy cập nhanh --- */
.hm-lab { font-size: 12px; font-weight: 500; color: var(--ink-2); margin: 22px 0 10px; }
.hm-quick { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
@media (max-width: 900px) { .hm-quick { grid-template-columns: 1fr; } }
.hm-q {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 13px 14px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: inherit; cursor: pointer;
  transition: border-color .13s, box-shadow .13s, transform .13s;
}
.hm-q:hover { border-color: var(--border-strong); box-shadow: var(--shadow); transform: translateY(-1px); }
.hm-qic {
  width: 34px; height: 34px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.hm-qt { display: block; font-size: 13px; font-weight: 600; }
.hm-qd { display: block; font-size: 12px; color: var(--muted); line-height: 1.55; margin-top: 3px; }
.hm-qc { color: var(--muted); flex: none; }

/* --- Hoạt động gần đây + Hỗ trợ --- */
.hm-row2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
@media (max-width: 900px) { .hm-row2 { grid-template-columns: 1fr; } }
.hm-act {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px;
  font-size: 13px;
}
.hm-actx { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-dot { width: 7px; height: 7px; border-radius: 999px; flex: none; background: var(--good); }
.hm-dot.crit { background: var(--crit); }
.hm-empty {
  padding: 26px 12px; text-align: center; color: var(--muted); font-size: 13px;
  border: 1px dashed var(--border-strong); border-radius: 10px;
}
.hm-empty small { display: block; font-size: 12px; margin-top: 4px; opacity: .8; }

.hm-supic {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--brand-solid); color: var(--on-accent); margin-bottom: 14px;
  box-shadow: var(--glow);
}
.hm-supt { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.hm-supd { font-size: 12px; color: var(--muted); line-height: 1.65; margin-bottom: 16px; }

/* --- Cột Knowledge --- */
.hm-kbt { font-size: 15px; font-weight: 600; }
.hm-kbg { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 18px 0 8px; }
.hm-kbi {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 10px; border: 1px solid var(--border); border-radius: 12px; margin-bottom: 8px;
  background: var(--surface); color: inherit; cursor: pointer;
  transition: border-color .13s, box-shadow .13s;
}
.hm-kbi:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.hm-kbth {
  width: 92px; height: 52px; flex: none; border-radius: 6px;
  background: linear-gradient(140deg, #3a2340, #1c1520);
  display: grid; place-items: center; color: var(--accent); position: relative; overflow: hidden;
}
.hm-kbth::before {
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 6px, rgba(255,255,255,.045) 6px 7px);
}
.hm-kbth > svg {
  position: relative; background: rgba(255,255,255,.92);
  width: 22px; height: 22px; border-radius: 999px; padding: 5px 4px 5px 6px;
}

/* Obsidian: thẻ kính mờ giống các màn khác */
:root[data-theme="obsidian"] .hm-card,
:root[data-theme="dark"] .hm-card,
:root[data-theme="obsidian"] .hm-q,
:root[data-theme="dark"] .hm-q,
:root[data-theme="obsidian"] .hm-kbi,
:root[data-theme="dark"] .hm-kbi,
:root[data-theme="obsidian"] .hm-days,
:root[data-theme="dark"] .hm-days {
  background: var(--glass); box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
:root[data-theme="obsidian"] .hm-ms,
:root[data-theme="dark"] .hm-ms { background: var(--glass); }
:root[data-theme="obsidian"] .hm-ms.warn,
:root[data-theme="dark"] .hm-ms.warn { box-shadow: inset 3px 0 0 var(--warn); }
:root[data-theme="obsidian"] .hm-ms.good,
:root[data-theme="dark"] .hm-ms.good { box-shadow: inset 3px 0 0 var(--good); }
:root[data-theme="obsidian"] .hm-ms.info,
:root[data-theme="dark"] .hm-ms.info { box-shadow: inset 3px 0 0 var(--accent); }
:root[data-theme="obsidian"] .hm-msic,
:root[data-theme="dark"] .hm-msic { background: rgba(255,255,255,.10); }

/* Dải tab (VIA · BM · TKQC · Page và nhóm Tổng quan / Lịch sử / Thùng rác /
   Danh sách đen) là bộ điều khiển CỦA RIÊNG bảng dữ liệu: nó chọn bảng nào
   đang hiện và đang xem ở chế độ nào. Ở Trang chủ, Tổng quan, Shield hay
   Trình quản lý thì bên dưới không có bảng nào để nó điều khiển — tab vẫn
   sáng lên làm người xem tưởng màn đang mở bị lọc theo tab đó. Việc chuyển
   sang màn khác đã có thanh bên trái và ngăn kéo lo, nên ở các màn đó dải
   tab chỉ còn là nhiễu.

   Viết theo lối loại trừ (liệt kê những màn ĐƯỢC hiện) để màn nào thêm về
   sau cũng mặc định không có dải tab — an toàn hơn là phải nhớ bổ sung. */
:root:not([data-view="active"]):not([data-view="history"]):not([data-view="trash"]):not([data-view="blacklist"]) .tabs {
  display: none;
}
/* Khoảng đệm trên vốn do .tabs gánh, ẩn nó đi thì .content phải bù lại. */
:root:not([data-view="active"]):not([data-view="history"]):not([data-view="trash"]):not([data-view="blacklist"]) .content {
  padding-top: 12px;
}
/* Riêng Trang chủ còn không có cả thanh công cụ — nội dung tự mang tiêu đề. */
:root[data-view="home"] .panel > .toolbar { display: none; }

/* ==========================================================================
   MÀN TỔNG QUAN (dựng theo bản mẫu)
   ========================================================================== */
#dash { padding: 0; }
.ds { padding: 20px 22px 28px; display: flex; flex-direction: column; }
.ds-sec {
  display: flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 600; color: var(--ink);
  margin: 26px 0 12px;
}
.ds .ds-sec:first-child { margin-top: 0; }
.ds-more { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--accent); cursor: pointer; }

/* --- Thẻ số liệu --- */
.ds-c {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px 18px;
  min-height: 116px; display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
}
.ds-h { display: flex; align-items: center; gap: 10px; }
.ds-ic { width: 32px; height: 32px; border-radius: 8px; flex: none; display: grid; place-items: center; }
.ds-ic.good   { background: var(--good-soft);   color: var(--good); }
.ds-ic.warn   { background: var(--warn-soft);   color: var(--warn); }
.ds-ic.crit   { background: var(--crit-soft);   color: var(--crit); }
.ds-ic.info   { background: var(--accent-soft); color: var(--info); }
.ds-ic.accent { background: var(--accent-soft); color: var(--accent); }
.ds-ic.chip   { background: var(--surface);     color: var(--accent); }
.ds-l {
  flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ds-x { color: var(--muted); flex: none; cursor: pointer; opacity: .7; }
.ds-x:hover { opacity: 1; color: var(--accent); }
.ds-v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* Hai thẻ đầu mang sắc thương hiệu, giống bản mẫu */
.ds-b1 { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
/* Thẻ thứ hai nhạt hơn thẻ đầu nhưng vẫn phải thấy được mép — để cùng màu
   nền trang thì nó biến mất, đọc như thiếu một thẻ. */
.ds-b2 { background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); border-color: var(--border-strong); }
.ds-b1::after, .ds-b2::after {
  content: ''; position: absolute; right: -56px; top: -62px;
  width: 165px; height: 165px; border-radius: 999px;
  border: 24px solid rgba(255,255,255,.22); pointer-events: none;
}
.ds-b1 > *, .ds-b2 > * { position: relative; z-index: 1; }

.ds-hero { display: grid; grid-template-columns: 1.5fr 1.5fr 1fr 1fr; gap: 14px; }
@media (max-width: 1320px) { .ds-hero { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 820px)  { .ds-hero { grid-template-columns: 1fr; } }
.ds-g3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
@media (max-width: 1100px) { .ds-g3 { grid-template-columns: 1fr; } }
.ds-g2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; align-content: start; }
@media (max-width: 700px) { .ds-g2 { grid-template-columns: 1fr; } }
.ds-split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
@media (max-width: 1200px) { .ds-split { grid-template-columns: 1fr; } }
.ds-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* --- Thẻ biểu đồ --- */
.ds-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 18px 20px; min-width: 0;
}
.ds-card h3 {
  margin: 0 0 14px; font-size: 12px; font-weight: 500;
  color: var(--ink-2); letter-spacing: 0; text-transform: none;
}
.ds-dn { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ds-lg { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 9px 14px; flex: 1 1 190px; }
.ds-lgi { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink-2); }
.ds-lgi > i { width: 9px; height: 9px; border-radius: 999px; flex: none; }

/* --- Múi giờ · tiền tệ --- */
.ds-tzs { overflow: auto; max-height: 300px; margin: 0 -4px; padding: 0 4px 4px; }
.ds-tzg { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
@media (max-width: 1500px) { .ds-tzg { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.ds-tz {
  padding: 12px 14px; border-radius: 12px; min-height: 96px;
  background: var(--accent-soft); border: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
}
.ds-tzn { font-size: 12px; color: var(--ink-2); line-height: 1.45; }
.ds-tzv { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ds-curs { overflow: auto; max-height: 300px; }
.ds-cur {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 2px; border-bottom: 1px solid var(--border);
}
.ds-cur:last-child { border-bottom: 0; }
.ds-curc { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.ds-curv { font-size: 22px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* --- Rủi ro bảo mật --- */
:root { --ds-art-1: #F6CFE3; --ds-art-2: #FFFFFF; }
.ds-risk {
  position: relative; overflow: hidden; min-height: 168px;
  padding: 18px 20px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--accent-soft);
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
}
.ds-risk > *:not(.ds-art) { position: relative; z-index: 1; }
.ds-art { position: absolute; right: -6px; bottom: -10px; width: 210px; height: 148px; opacity: .55; pointer-events: none; }

/* --- Obsidian --- */
:root[data-theme="obsidian"], :root[data-theme="dark"] { --ds-art-1: rgba(255,92,179,.20); --ds-art-2: rgba(255,255,255,.10); }
:root[data-theme="obsidian"] .ds-c,
:root[data-theme="dark"] .ds-c,
:root[data-theme="obsidian"] .ds-card,
:root[data-theme="dark"] .ds-card,
:root[data-theme="obsidian"] .ds-tz,
:root[data-theme="dark"] .ds-tz,
:root[data-theme="obsidian"] .ds-risk,
:root[data-theme="dark"] .ds-risk {
  background: var(--glass); border-color: var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
:root[data-theme="obsidian"] .ds-b1,
:root[data-theme="dark"] .ds-b1 { background: rgba(255,92,179,.16); border-color: rgba(255,92,179,.18); }
:root[data-theme="obsidian"] .ds-b2,
:root[data-theme="dark"] .ds-b2 { background: rgba(255,92,179,.08); border-color: rgba(255,92,179,.14); }
:root[data-theme="obsidian"] .ds-b1::after,
:root[data-theme="dark"] .ds-b1::after,
:root[data-theme="obsidian"] .ds-b2::after,
:root[data-theme="dark"] .ds-b2::after { border-color: rgba(255,255,255,.045); }
:root[data-theme="obsidian"] .ds-ic.chip,
:root[data-theme="dark"] .ds-ic.chip { background: rgba(255,255,255,.10); }
:root[data-theme="obsidian"] .ds-risk .ds-art,
:root[data-theme="dark"] .ds-risk .ds-art { opacity: .8; }

/* Hàng đệm của bảng ảo hoá — chỉ giữ chỗ, không được có viền hay nền */
tr.vspacer { background: none !important; }
tr.vspacer td { padding: 0 !important; border: 0 !important; height: inherit; background: none !important; }
/* Kẻ sọc phải bỏ nth-child: hai hàng đệm làm lệch thứ tự chẵn/lẻ */
tbody tr:nth-child(even) { background: inherit; }
tbody tr:nth-child(even) td:first-child,
tbody tr:nth-child(even) td:nth-child(2) { background: inherit; }
.ds-note {
  display: block; font-size: 12px; font-weight: 400; color: var(--muted);
  line-height: 1.55; margin-top: 6px; max-width: 58%; letter-spacing: 0;
}

/* ==========================================================================
   NĂM MÀN CÒN LẠI (hoá đơn · thẻ · khách thuê · thành viên · Shield)
   Dựng lại các mảnh ghép chung theo bản mẫu, không đụng mã render.
   ========================================================================== */

/* --- Dải tab con: viên thuốc phân đoạn thay cho gạch chân --------------- */
.khtabs {
  gap: 2px; padding: 3px; margin: 0 0 12px;
  border-bottom: 0; overflow: visible;   /* `overflow-x:auto` gây thanh cuộn 1px thừa */
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; align-self: flex-start;
}
.khtab {
  height: 30px; padding: 0 14px; border-radius: 6px;
  font-size: 13px; font-weight: 500; border-bottom: 0; margin-bottom: 0;
  display: inline-flex; align-items: center; gap: 7px;
}
.khtab:hover { background: transparent; color: var(--ink); }
.khtab.on {
  background: var(--surface); color: var(--accent); font-weight: 600;
  border-bottom-color: transparent; box-shadow: var(--shadow-sm, 0 1px 2px rgba(28,21,32,.06));
}

/* --- Thanh công cụ trong màn --- */
.khbar { padding: 0 0 12px; gap: 8px; }
.khcount { height: 26px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; }
.khseg { border-radius: 8px; }
.khseg button { height: 30px; padding: 0 12px; font-size: 13px; }

/* --- Thẻ trong màn --- */
.hdcard, .khb, .shbox, .tvbox, .khthe { border-radius: 12px; }

/* --- Bảng con: cùng nhịp với bảng chính --- */
.khtbl thead th, .khtwrap thead th, .khwrap thead th {
  height: 40px; padding: 0 12px; font-size: 12px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--ink-2);
}
.khtbl tbody td, .khtwrap tbody td, .khwrap tbody td { height: 46px; padding: 0 12px; }
.khwrap, .khtwrap { border-radius: 12px; }

/* --- Trạng thái rỗng --- */
.khtrong, .shempty {
  padding: 54px 20px; text-align: center; color: var(--muted); font-size: 13px;
}
.khtrong b, .shempty b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }

/* --- Chân phân trang trong màn --- */
.khfoot { padding: 10px 2px 0; font-size: 13px; }

/* ==========================================================================
   SHIELD — trạng thái rỗng dựng theo bản mẫu: mời tạo bên trái, giải thích
   bên phải. Trước đây dồn một cột, phần chữ dài lấn át mất nút hành động.
   ========================================================================== */
.shsplit {
  display: grid; grid-template-columns: minmax(0,1fr) 420px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); overflow: hidden; min-height: 440px;
}
@media (max-width: 1200px) { .shsplit { grid-template-columns: 1fr; } }

.shleft {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 60px 24px; text-align: center;
}
.shart { width: 120px; height: 120px; margin-bottom: 10px; }
.shleft h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.shleft p { margin: 0; font-size: 13px; color: var(--muted); max-width: 380px; line-height: 1.6; }
.shleft .btn { margin-top: 14px; }

.shside {
  border-left: 1px solid var(--border);
  padding: 34px 32px; background: var(--surface);
}
@media (max-width: 1200px) { .shside { border-left: 0; border-top: 1px solid var(--border); } }
.shside h3 { margin: 0 0 10px; font-size: 18px; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.shside p { margin: 0 0 22px; font-size: 13px; color: var(--muted); line-height: 1.7; }
.shbul { display: flex; gap: 12px; margin-bottom: 16px; }
.shbic { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; }
.shbic.good { background: var(--good-soft); color: var(--good); }
.shbic.warn { background: var(--warn-soft); color: var(--warn); }
.shbic.crit { background: var(--crit-soft); color: var(--crit); }
.shbic.info { background: var(--accent-soft); color: var(--accent); }
.shbt { font-size: 13px; color: var(--ink-2); line-height: 1.6; }
.shbt b { color: var(--ink); font-weight: 600; }

:root[data-theme="obsidian"] .shsplit,
:root[data-theme="dark"] .shsplit,
:root[data-theme="obsidian"] .shside,
:root[data-theme="dark"] .shside {
  background: var(--glass); box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* Dòng tổng ở đầu thanh công cụ (bản mẫu: "Tổng: 24 VIA · 19.484 TKQC").
   Nó đứng TRƯỚC khoảng đệm co giãn nên nằm sát trái, các nút dồn sang phải. */
.tb-count {
  font-size: 13px; font-weight: 600; color: var(--ink);
  white-space: nowrap; margin-right: auto;
}
.toolbar .tb-count + * { margin-left: 0; }

/* ==========================================================================
   MÀN HOÁ ĐƠN & THANH TOÁN — Tổng quan tiền (dựng theo bản mẫu)

   Dùng lại nguyên bộ thẻ `.ds-*` của màn Tổng quan; ở đây chỉ thêm những
   thứ bản mẫu có mà màn Tổng quan chưa cần: dòng chú thích nhỏ trong thẻ,
   hai ô số dư lồng trong một thẻ, và dải chọn đơn vị tiền.
   ========================================================================== */
.hdds { display: flex; flex-direction: column; padding: 4px 2px 20px; }
.hdds .ds-sec:first-child { margin-top: 4px; }
.ds-note { font-size: 11.5px; font-weight: 500; color: var(--muted); }

/* Đơn vị tiền đi kèm con số lớn — nhỏ và mờ để không tranh chỗ với chữ số */
.ds-u { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 6px; }

/* Dòng chú thích giữa nhãn và con số: nói ĐIỀU KIỆN đã dùng để ra con số đó */
.ds-sub {
  margin-top: -4px; font-size: 11.5px; line-height: 1.45; color: var(--muted);
}
.ds-sub b { color: var(--ink); font-weight: 700; }

/* Thẻ "Tổng số dư" chứa hai ô con — trả trước và trả sau là hai loại tiền
   khác hẳn nhau về ý nghĩa, gộp một số là mất thông tin */
.ds-two { display: flex; gap: 10px; flex-wrap: wrap; }
.ds-two > div {
  flex: 1 1 130px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 10px 12px;
}
.ds-two .k { font-size: 11.5px; color: var(--muted); }
.ds-two .v {
  margin-top: 2px; font-size: 18px; font-weight: 700;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}

/* Hai sắc thẻ nữa, cùng lối với .ds-b1/.ds-b2 của màn Tổng quan */
.ds-bi {
  background: color-mix(in srgb, var(--info) 11%, var(--surface));
  border-color: color-mix(in srgb, var(--info) 30%, transparent);
}
.ds-bg {
  background: var(--good-soft);
  border-color: color-mix(in srgb, var(--good) 30%, transparent);
}

/* Nút nhỏ nằm trong đầu thẻ (ví dụ "2 trạng thái ▾") */
.ds-chip {
  flex: none; height: 26px; padding: 0 10px; border-radius: 7px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink-2); font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.ds-chip:hover { border-color: var(--accent); color: var(--accent); }

/* .ds-x ở màn Tổng quan là <span>; ở đây là <button> nên phải gỡ nền mặc định */
button.ds-x {
  border: 0; background: transparent; padding: 0; font: inherit;
  display: grid; place-items: center; cursor: pointer;
}

/* (dải chọn đơn vị tiền cũ đã thay bằng nút thả xuống — xem cuối tệp) */

/* Obsidian: các thẻ trên màn này cũng là kính mờ như mọi màn khác */
:root[data-theme="obsidian"] .ds-two > div,
:root[data-theme="dark"] .ds-two > div { background: var(--glass); }

/* Tên hình thức thanh toán Facebook trả về có cái rất dài — cho cột nhãn
   rộng hơn và cắt bằng ellipsis thay vì để nó xuống dòng đè lên thanh kế bên */
.ds-card .bar { grid-template-columns: minmax(0, 168px) minmax(90px, 1fr) 64px; }
.ds-card .bar .bl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   MÀN HOÁ ĐƠN & THANH TOÁN — thanh lọc và lưới thẻ theo bản SMIT
   ========================================================================== */

/* --- Dòng chào + bốn nút lọc --- */
.hd-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 2px 0 18px; }
.hd-hi { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.hd-act { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.icobtn2 {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-2); font-size: 15px; cursor: pointer;
  display: grid; place-items: center;
}
.icobtn2:hover { border-color: var(--accent); color: var(--accent); }

/* --- Nút có menu thả xuống --- */
.hd-drop { position: relative; }
.hd-drop > .btn.on { border-color: var(--accent); color: var(--accent); }
.hd-drop .cx { font-style: normal; font-size: 10px; opacity: .7; }
.hd-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 236px; max-height: 340px; overflow: auto;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: var(--shadow); padding: 6px;
}
.hd-mi {
  display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left;
  border: 0; background: transparent; font: inherit; font-size: 13px;
  color: var(--ink); padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.hd-mi small { margin-left: auto; font-size: 11px; color: var(--muted); white-space: nowrap; }
.hd-mi:hover { background: var(--surface-2); }
.hd-mi.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.hd-mi.on small { color: var(--accent); opacity: .8; }

.hd-mngay { padding: 10px 10px 4px; width: 286px; }
.hd-mngay label { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 10px; }
.hd-mngay input {
  display: block; width: 100%; margin-top: 4px; height: 32px; padding: 0 8px;
  border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13px;
}
.hd-mngay .nhint { margin: 2px 0 10px; }

/* --- Lưới 4 và 5 cột (mục "Thanh toán hoá đơn & ngưỡng" và "Báo cáo thẻ") --- */
.ds-g4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
@media (max-width: 1400px) { .ds-g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px)  { .ds-g4 { grid-template-columns: 1fr; } }
.ds-g5 { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
@media (max-width: 1500px) { .ds-g5 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 980px)  { .ds-g5 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 640px)  { .ds-g5 { grid-template-columns: 1fr; } }

/* Nhãn ở hai lưới này dài (“Số hoá đơn thanh toán thành công”) — cho xuống
   dòng thay vì cắt cụt, vì cắt đi thì hai thẻ cạnh nhau đọc y như nhau */
.ds-g4 .ds-l, .ds-g5 .ds-l { white-space: normal; line-height: 1.35; }
.ds-g4 .ds-c, .ds-g5 .ds-c { gap: 10px; }
.ds-g4 .ds-h, .ds-g5 .ds-h { align-items: flex-start; }

/* Con số phụ nằm dưới, ngăn bởi một đường kẻ — SMIT để số tiền ở đây */
.ds-d { height: 1px; background: var(--border); margin: 0; }
.ds-v2 {
  font-size: 20px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

/* Bút chì sửa mức đề xuất, nằm ngay trong dòng chú thích */
.ds-pen {
  border: 0; background: transparent; padding: 0 2px; font: inherit; font-size: 12px;
  color: var(--muted); cursor: pointer; line-height: 1;
}
.ds-pen:hover { color: var(--accent); }

/* Thẻ "Tổng đã lập hoá đơn" — cùng họ màu với thẻ Tổng số dư nhưng nhạt
   hơn, đúng như bản SMIT để hai thẻ cạnh nhau vẫn phân biệt được */
.ds-b3 {
  background: color-mix(in srgb, var(--info) 7%, var(--surface));
  border-color: color-mix(in srgb, var(--info) 22%, transparent);
}

/* ==========================================================================
   HỘP CHỌN KHOẢNG THỜI GIAN (dựng theo Ads Manager)
   Cột mốc sẵn bên trái · hai tháng lịch bên phải · tóm tắt trên đầu.
   ========================================================================== */
.dpbox { width: min(900px, 100%); height: auto; max-height: min(640px, 100%); }
.dp-tom {
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); padding: 5px 12px; border-radius: 999px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px;
}
.dp-body { flex: 1; min-height: 0; display: flex; overflow: hidden; }

/* --- Cột mốc sẵn --- */
.dp-side {
  width: 214px; flex: none; overflow: auto; padding: 10px 8px;
  border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px;
}
.dp-mi {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: transparent; font: inherit; font-size: 13px;
  color: var(--ink); padding: 9px 10px; border-radius: 9px; cursor: pointer;
}
.dp-mi:hover { background: var(--surface-2); }
.dp-mi.on { color: var(--accent); font-weight: 600; }
/* Chấm tròn kiểu nút chọn — cùng ngôn ngữ với bản Ads Manager */
.dp-r {
  width: 16px; height: 16px; border-radius: 999px; flex: none;
  border: 1.5px solid var(--border-strong); background: var(--surface);
  position: relative;
}
.dp-mi.on .dp-r { border-color: var(--accent); }
.dp-mi.on .dp-r::after {
  content: ''; position: absolute; inset: 3px; border-radius: 999px; background: var(--accent);
}

/* --- Vùng lịch --- */
.dp-cal { flex: 1; min-width: 0; overflow: auto; padding: 12px 16px 14px; }
.dp-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.dp-nav .grow { flex: 1; }
.dp-mui {
  width: 30px; height: 30px; flex: none; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--ink-2); font-size: 17px; line-height: 1; cursor: pointer;
}
.dp-mui:hover { border-color: var(--accent); color: var(--accent); }
.dp-sel {
  height: 30px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13px;
  font-weight: 600; padding: 0 6px;
}
.dp-th2 { font-size: 13px; font-weight: 600; color: var(--ink); }

.dp-grids { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .dp-grids { grid-template-columns: 1fr; } }
.dp-thu, .dp-ng { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-thu { margin-bottom: 4px; }
.dp-thu > span { text-align: center; font-size: 11px; font-weight: 600; color: var(--muted); }
.dp-d {
  height: 32px; border: 0; background: transparent; font: inherit; font-size: 13px;
  color: var(--ink); cursor: pointer; border-radius: 0;
  font-variant-numeric: tabular-nums;
}
.dp-d:hover:not([disabled]) { background: var(--surface-2); }
.dp-d[disabled] { color: var(--muted); opacity: .45; cursor: default; }
/* Ngày nằm trong khoảng: nền nhạt liền mạch; hai đầu là hai viên đậm */
.dp-d.in { background: var(--accent-soft); }
.dp-d.dau, .dp-d.cuoi {
  background: var(--accent); color: var(--on-accent); font-weight: 700;
}
.dp-d.dau { border-radius: 8px 0 0 8px; }
.dp-d.cuoi { border-radius: 0 8px 8px 0; }
.dp-d.dau.cuoi { border-radius: 8px; }
.dp-d.nay:not(.dau):not(.cuoi) { box-shadow: inset 0 0 0 1px var(--accent); border-radius: 8px; }

.dp-in { display: flex; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.dp-in label { flex: 1 1 150px; font-size: 11.5px; color: var(--muted); }
.dp-in input {
  display: block; width: 100%; margin-top: 4px; height: 34px; padding: 0 10px;
  border-radius: 9px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13px;
}
.dp-in input[disabled] { opacity: .55; }
.dp-cal .nhint { margin-top: 12px; }

/* Ô số ngày + nút mở lịch trong hộp cấu hình Quản lý quảng cáo */
.qc-ngay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qc-ngay .nsel { max-width: 140px; }

/* Obsidian: --accent-soft là màu ĐỤC rất tối nên vệt khoảng đang chọn gần như
   biến mất. Tô lại bằng chính màu nhấn pha loãng để nhìn thấy được. */
:root[data-theme="obsidian"] .dp-d.in,
:root[data-theme="dark"] .dp-d.in {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}
:root[data-theme="obsidian"] .dp-r,
:root[data-theme="dark"] .dp-r { background: transparent; }

/* ==========================================================================
   NHÃN "Ô NÀY CÓ THEO KHOẢNG NGÀY KHÔNG"

   Trên màn Tổng quan tiền, chỉ một phần các ô đổi theo khoảng ngày (hoá
   đơn, sao kê thẻ); phần còn lại là ảnh chụp luỹ kế hoặc tình trạng hiện
   tại. Không dán nhãn thì người dùng đổi ngày, thấy số đứng im, và kết
   luận là bộ lọc hỏng — đúng thứ đã xảy ra.
   ========================================================================== */
.ds-chiplo {
  flex: none; font-size: 10.5px; font-weight: 600; line-height: 1;
  padding: 5px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent);
}
.ds-chiplo.luy { background: var(--surface-2); color: var(--muted); font-weight: 500; }
.ds-sec .ds-chiplo { margin-left: 2px; }
.ds-g4 .ds-h, .ds-g5 .ds-h { flex-wrap: wrap; }

/* Liên kết đổi đơn vị tiền, đặt ngay trong câu giải thích vì sao ô đang rỗng */
.ds-lk {
  border: 0; background: transparent; padding: 0 1px; font: inherit; font-size: inherit;
  font-weight: 700; color: var(--accent); cursor: pointer; text-decoration: underline;
}
.ds-lk:hover { color: var(--ink); }

:root[data-theme="obsidian"] .ds-chiplo.luy,
:root[data-theme="dark"] .ds-chiplo.luy { background: var(--glass); }

/* Đầu thẻ trên màn Hoá đơn giờ mang thêm nhãn phạm vi, có thẻ tới ba thứ
   chen nhau. Cho nhãn xuống dòng thay vì cắt cụt — cắt đi thì "Tổng số tiền
   cần thanh toán" hiện thành "Tổng số ti…", đọc không ra là ô gì. */
.hdds .ds-h { flex-wrap: wrap; }
.hdds .ds-l { white-space: normal; line-height: 1.35; }

/* Cảnh báo ngắn nằm ngay trong dòng chú thích của thẻ — dùng khi con số
   đang hiện KHÔNG phải thứ người dùng vừa yêu cầu (kho chưa nạp xong,
   khoảng hỏi vượt quá phần đã có). */
.ds-canh { color: var(--warn); font-weight: 700; }

/* ==========================================================================
   MENU HÀNH ĐỘNG CỦA TỪNG HÀNG (nút ••• cuối mỗi hàng)

   Menu gắn vào <body> với position:fixed chứ không nằm trong ô của bảng —
   vùng bảng có overflow riêng, đặt bên trong thì menu bị cắt cụt ở hàng
   cuối và ở cột ngoài cùng bên phải.
   ========================================================================== */
.rowmenu-pop {
  position: fixed; z-index: 90; min-width: 232px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 12px; box-shadow: var(--shadow);
}
.rm-i {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: transparent; font: inherit; font-size: 13px;
  color: var(--ink); padding: 8px 10px; border-radius: 8px; cursor: pointer;
  white-space: nowrap;
}
.rm-i:hover { background: var(--surface-2); }
.rm-ic { width: 18px; flex: none; text-align: center; opacity: .85; }
.rm-sep { height: 1px; background: var(--border); margin: 5px 4px; }

/* Chip "đang lọc theo VIA" trên thanh công cụ */
.tb-loc {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 12.5px; font-weight: 600; color: var(--accent);
  background: var(--accent-soft); padding: 5px 8px 5px 12px; border-radius: 999px;
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-locx {
  border: 0; background: transparent; color: inherit; font: inherit;
  cursor: pointer; padding: 0 4px; opacity: .7; line-height: 1;
}
.tb-locx:hover { opacity: 1; }

/* ==========================================================================
   HỘP XEM CHI TIẾT MỘT TÀI SẢN
   ========================================================================== */
.ctbox { width: min(760px, 100%); height: auto; max-height: min(88vh, 100%); }
.ct-id {
  font-size: 12px; color: var(--muted); background: var(--surface-2);
  padding: 3px 9px; border-radius: 999px;
}
.ctbody { flex: 1; min-height: 0; overflow: auto; padding: 16px 20px 22px; }
.ct-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.ct-h {
  margin: 20px 0 8px; font-size: 12px; font-weight: 700; color: var(--ink);
  letter-spacing: .02em; text-transform: uppercase;
}
.ct-h:first-child { margin-top: 0; }
.ct-h small { margin-left: 6px; font-weight: 500; text-transform: none; color: var(--muted); }
.ct-ds { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.ct-r {
  display: flex; align-items: baseline; gap: 14px;
  padding: 9px 13px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.ct-r:last-child { border-bottom: 0; }
.ct-r:nth-child(odd) { background: var(--surface-2); }
.ct-k { flex: 0 0 190px; color: var(--muted); font-size: 12.5px; }
.ct-v { flex: 1; min-width: 0; color: var(--ink); word-break: break-word; }
.ct-ok { color: var(--good); }
.ct-loi { color: var(--crit); }
@media (max-width: 620px) {
  .ct-r { flex-direction: column; gap: 2px; }
  .ct-k { flex: none; }
}

/* Ba con số tiến trình lấy hoá đơn ở tab VIA — mỗi trạng thái một màu để
   liếc qua là thấy VIA nào đang kẹt, không phải đọc từng cột */
.hdxong { color: var(--good); }
.hdcho  { color: var(--warn); }
.hdloi  { color: var(--crit); }

/* =====================================================================
 *  HD-CONG-CU — chọn cột & hướng dẫn tăng tốc (Trình quản lý hoá đơn)
 * ===================================================================== */

/* --- menu chọn cột --- */
.hd-mcot { display: flex; flex-direction: column; }
.hd-mcot .hd-mi { align-items: center; }
.hd-mcot .hd-mi[disabled] { opacity: .55; cursor: default; }
/*  Ô tích rộng cố định để chữ của mọi dòng thẳng hàng — so le một chữ là
    mắt phải dò lại từ đầu mỗi dòng. */
.hd-tick {
  width: 14px; flex: none; text-align: center;
  font-size: 11px; color: var(--accent);
}
.hd-mcotf {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px; padding: 8px 10px 2px;
  border-top: 1px solid var(--border); font-size: 11.5px;
}
.hd-mcotf .grow, .hd-mcotf .muted { flex: 1; }
.hd-mcotf .btn { height: 26px; padding: 0 10px; font-size: 12px; }

/* --- hộp hướng dẫn --- */
.hdhdbox { width: min(620px, 100%); }
.hdhd { gap: 4px; }
.hdhd-b {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0; border-top: 1px solid var(--border);
}
.hdhd-b:first-of-type { border-top: 0; }
.hdhd-b > div { min-width: 0; }
/*  CHỈ tiêu đề mục mới xuống dòng riêng. Viết `.hdhd-b b` là mọi chữ in
    đậm giữa câu cũng thành một dòng, đoạn văn vỡ thành bậc thang. */
.hdhd-b > div > b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.hdhd-b p { margin: 0; font-size: 12.5px; line-height: 1.62; color: var(--muted); }
.hdhd-b code {
  font-size: 11.5px; padding: 1px 5px; border-radius: 5px;
  background: var(--surface-2); color: var(--ink);
}
.hdhd-n {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); color: var(--accent);
  font-size: 12px; font-weight: 700;
}

/* --- COT-TIEN-DO: loại tài khoản & ô nhịp lấy lại --- */
/*  Cá nhân / Doanh nghiệp là một sự phân đôi, không phải thang tốt–xấu,
    nên chỉ khác nhau ở màu chữ. Tô nền như huy hiệu trạng thái sẽ khiến
    mắt đọc nó thành cảnh báo. */
.hdloai { font-size: 12.5px; color: var(--muted); }
.hdloai.dn { color: var(--accent); font-weight: 600; }

.hdnhip { display: flex; align-items: center; gap: 8px; }
.hdnhip .nsel { max-width: 120px; }
.hdnhip .muted { font-size: 12.5px; }

/* =====================================================================
 *  KEO-CHON — chọn nhiều dòng bằng chuột
 * ===================================================================== */

/*  Hàng đã chọn phải nhận ra được ngay cả khi ô tick đã cuộn khuất sang
    trái: bảng này rộng hơn màn hình, nên dấu hiệu duy nhất luôn nhìn thấy
    phải là nền của cả hàng. */
.khtbl tbody tr.chon > td { background: var(--accent-soft); }
.khtbl tbody tr.chon:hover > td { background: color-mix(in srgb, var(--accent-soft) 82%, var(--ink) 8%); }
/*  Vạch màu ở mép trái làm mốc đếm khi dải chọn dài hơn một màn hình. */
.khtbl tbody tr.chon > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/*  Trong lúc kéo thì cấm bôi đen chữ — không cấm thì vệt xanh của trình
    duyệt chồng lên nền hàng, nhìn ra hai lựa chọn khác nhau cùng lúc.
    Chỉ cấm KHI ĐANG KÉO, nên thả tay ra là copy được như thường. */
.khwrap.dangkeo, .khwrap.dangkeo *,
.khtwrap.dangkeo, .khtwrap.dangkeo *,
.twrap.dangkeo, .twrap.dangkeo * {
  -webkit-user-select: none; -moz-user-select: none; user-select: none;
}
.khwrap.dangkeo, .khtwrap.dangkeo, .twrap.dangkeo { cursor: default; }

/*  Shield tô nền đỏ cho vi phạm MỚI. Hàng vừa mới vừa đang chọn thì phải
    thấy được là đang chọn — không thì kéo qua vùng vi phạm mới trông như
    không có gì xảy ra. */
.shtbl tbody tr.shmoi.chon > td,
.shtbl tbody tr.shmoi.chon:hover > td { background: var(--accent-soft); }

/*  Bảng tài sản dùng lớp `sel` có sẵn; thêm cho nó đúng vạch mốc ở mép
    trái như ba bảng kia, để bốn màn nhìn giống nhau. */
#tbl tbody tr.sel > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* =====================================================================
 *  NUT-TAT — nút đang bị tắt phải TRÔNG như đang bị tắt
 *
 *  `.btn` chưa từng có luật nào cho `[disabled]`, nên một nút bị tắt vẽ ra
 *  y hệt nút bấm được: vẫn trắng, vẫn con trỏ hình bàn tay, vẫn đổi màu khi
 *  rê chuột vào. Người dùng bấm rồi kết luận là phần mềm hỏng — đã xảy ra
 *  thật với nút "＋ Xếp mục đã chọn".
 *
 *  Chữa ở đây, một luật cho MỌI màn: các mũi tên phân trang, nút hàng loạt,
 *  nút trong biểu mẫu… đều đang dính đúng lỗi này.
 * ===================================================================== */
.btn[disabled], .btn:disabled {
  opacity: .42;
  cursor: default;
  /*  `pointer-events: none` sẽ nuốt luôn cả tooltip `title` — mà tooltip
      chính là chỗ duy nhất nói được VÌ SAO nút bị tắt. Nên chỉ vô hiệu hoá
      phần đổi màu khi rê chuột. */
  box-shadow: none;
}
.btn[disabled]:hover, .btn:disabled:hover {
  border-color: var(--border-strong);
  color: var(--ink);
  background: var(--surface);
}
.btn.ghost[disabled]:hover, .btn.ghost:disabled:hover {
  border-color: transparent; background: transparent;
}
.btn.primary[disabled]:hover, .btn.primary:disabled:hover {
  filter: none;
  background: linear-gradient(100deg, var(--accent), var(--accent-hi));
  color: var(--on-accent); border-color: transparent;
}

/* =====================================================================
 *  KHNUT — cụm nút hành động của thanh công cụ
 *
 *  Trước đây các nút là con TRỰC TIẾP của `.khbar`. Thanh đó `flex-wrap`,
 *  nên khi chật, mấy nút cuối rơi xuống hàng dưới và dạt hẳn về mép TRÁI —
 *  tách rời khỏi nhóm của chúng, trông như một thanh công cụ thứ hai bị bỏ
 *  quên. Gói vào một cụm thì cả cụm cùng xuống dòng và vẫn bám mép phải.
 * ===================================================================== */
.khnut {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;            /* luôn bám mép phải, kể cả khi xuống dòng */
  flex-wrap: wrap; justify-content: flex-end;
  min-width: 0;
}

/*  Nhãn hành động không bao giờ được gãy giữa chừng: "Huỷ" một dòng và
    "mời" một dòng thì đọc thành hai lệnh khác nhau. */


/*  Cột hành động đã ghim mép phải thì phải đủ chỗ cho nội dung của nó,
    không thì ghim xong vẫn chật. */
/*  Cột hành động cần một bề ngang tối thiểu: hẹp quá thì bốn lệnh vỡ
    thành bốn dòng, mà rộng quá thì nó ăn mất chỗ của những cột có dữ
    liệu thật. 216px vừa đủ cho hai lệnh một dòng ở màn hẹp, và cả bốn
    trên một dòng ở màn rộng. */




/* =====================================================================
 *  TV-SMIT — bảng thành viên
 * ===================================================================== */

/*  Dải lệnh hàng loạt: một thanh riêng dưới thanh công cụ, chỉ hiện khi
    đã tích dòng. Nền nhấn để phân biệt hẳn với thanh lọc bên trên —
    hai thanh trắng chồng nhau thì không thấy có gì vừa xuất hiện. */
.tvchon {
  background: var(--accent-soft); border-radius: 12px;
  padding: 8px 12px; margin: 0 0 10px;
}
.tvchon .khthe { border-color: transparent; }

/*  Mục menu có dòng mô tả bên dưới, không phải bên phải: hai lối "thêm
    thành viên" khác nhau ở CÁCH LÀM, mà cách làm thì cần một câu, không
    nhét vừa vào mép phải như một con số đếm. */
.hd-menu .hd-mi { flex-wrap: wrap; }
.hd-menu .hd-mi small {
  margin-left: 0; flex-basis: 100%;
  color: var(--muted); font-weight: 400; line-height: 1.4;
}
.hd-menu .hd-mi.on small { color: var(--accent); }

/*  Nút biểu tượng trong cột Hành động — vuông, đều nhau, đủ to để bấm. */


/*  Danh sách phép quét của một bộ luật — mỗi phép một thẻ, xuống dòng
    được. Bật năm phép quét mà bắt nằm một hàng thì cột phình ra đẩy hết
    các cột sau ra khỏi khung nhìn. */
.shpq { display: flex; flex-wrap: wrap; gap: 4px; }


/* =====================================================================
 *  COT-HANH-DONG — ô lệnh trên mỗi hàng
 *
 *  NGUYÊN NHÂN LỆCH (đo thật: tâm nút ở 15px, tâm hàng ở 23px):
 *  lớp `.khact` vốn đặt THẲNG lên thẻ `<td>`, mà `.khact` là `display:flex`.
 *  Một ô bảng chuyển sang flex thì `vertical-align: middle` của bảng không
 *  còn tác dụng — thuộc tính đó chỉ áp cho `display: table-cell`. Nhóm nút
 *  vì thế bám mép trên, cao hơn chữ ở các cột bên cạnh đúng 8px.
 *
 *  CÁCH CHỮA: trả `<td>` về đúng một ô bảng, và cho flex xuống một lớp bọc
 *  bên trong. Căn giữa khi đó là việc của chính cơ chế bảng, không cần
 *  `top`, `translateY` hay margin âm để bù.
 * ===================================================================== */

.khactcell {
  vertical-align: middle;        /* ô bảng thật thì dòng này mới ăn */
  text-align: center;
  padding: 6px 14px;
  white-space: nowrap;           /* nhóm nút không bao giờ gãy xuống dòng */
}

/*  Lớp bọc bên trong mới là flex container. `inline-flex` để nó co đúng
    bằng nhóm nút rồi để `text-align:center` của ô đặt nó vào giữa — bề
    ngang cột do bảng chia, cụm nút không việc gì phải kéo theo. */
.khactcell > .khact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  vertical-align: middle;
  /*  KHÔNG cho xuống dòng. `app/v8.css` có một luật cũ `.tvtbl .khact
      { flex-wrap: wrap }` từ thời các lệnh còn là chữ dài; để nguyên thì
      màn hẹp bảng bóp cột lại còn 84px và bốn nút xếp chồng thành bốn
      dòng, hàng cao vọt lên 152px (đo thật ở 1100px).

      Cấm xuống dòng cũng chính là cách giữ BỀ NGANG: khi cụm không gãy
      được nữa thì bề rộng tối thiểu của ô đúng bằng bề rộng cụm nút, và
      bảng buộc phải chừa đủ chỗ. Không cần con số min-width nào đoán mò. */
  flex-wrap: nowrap;
}

/*  Nút vuông, đều nhau, biểu tượng nằm chính giữa. Áp cho MỌI bảng —
    Thành viên, Bộ luật, Nhật ký ghi dùng chung một lối. */
.khact .khb {
  width: 32px; height: 32px; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; line-height: 1;
}
.khact .khlink { white-space: nowrap; }
.khact { gap: 8px; }

/*  Tiêu đề căn giữa cho thẳng cột nút bên dưới. */
.khact-col th:last-child { text-align: center; }

/* ---------------------------------------------------------------------
 *  Cột ghim mép phải — nền và đường phân cách
 *
 *  Bóng đổ cũ (`-7px 0 10px -8px`) hiện THƯỜNG TRỰC, kể cả khi bảng không
 *  có gì để cuộn, nên cột trông như bị tách rời khỏi bảng. Thay bằng đúng
 *  một đường kẻ cùng màu với các đường kẻ khác của bảng.
 *
 *  Nền phải bám theo TRẠNG THÁI CỦA HÀNG. Ô ghim tự vẽ nền của nó (bắt
 *  buộc, không thì nội dung cuộn qua sẽ lộ ra dưới), nên mỗi trạng thái
 *  hàng phải có một dòng tương ứng ở đây — thiếu dòng nào là hàng đó có
 *  một ô lạc màu.
 * ------------------------------------------------------------------- */
.khact-col th:last-child,
.khact-col td:last-child {
  box-shadow: none;
  border-left: 1px solid var(--border);
}
.khact-col tbody tr:hover > td:last-child        { background: var(--surface-2); }
.khact-col tbody tr.chon > td:last-child,
.khact-col tbody tr.chon:hover > td:last-child   { background: var(--accent-soft); }
.khact-col.shtbl tbody tr.shmoi > td:last-child  { background: var(--crit-soft); }
.khact-col.shtbl tbody tr.shmoi.chon > td:last-child { background: var(--accent-soft); }

/* =====================================================================
 *  DAN-TOKEN — hộp thêm VIA, hai lối rõ ràng
 * ===================================================================== */
.viabox { width: min(620px, 100%); }

/*  Mỗi lối một khối có viền riêng. Hai cách làm cùng ra một kết quả nhưng
    đánh đổi khác hẳn nhau — để chúng trôi chung một dòng chữ thì người
    dùng không thấy đó là một lựa chọn phải cân nhắc. */
.vialoi {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 6px;
  margin-bottom: 14px;
}
.vialoi:last-child { margin-bottom: 0; }
.vialoi-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.vialoi-h b { font-size: 14px; }
.vialoi .khsh-foot { padding: 10px 0 12px; border-top: 0; }
.vialoi .nhint { margin: 0 0 10px; }

/*  Token dài 200+ ký tự — ô một dòng thì dán vào chỉ thấy đoạn cuối, không
    kiểm được mắt thường là đã dán đủ chưa. */
.vata {
  width: 100%; min-height: 66px; resize: vertical;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px; line-height: 1.5; padding: 8px 10px;
  word-break: break-all;
}

/*  Ô tick "tài khoản dịch vụ" trong biểu mẫu thành viên — có dòng giải
    thích bên dưới nhãn, nên phải xếp dọc chứ không nằm ngang như ô tick
    thường. Đây là lựa chọn hạ một lớp bảo vệ, người dùng cần đọc hết câu
    trước khi tick. */
.tvgiu { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 10px; }
.tvgiu input { margin-top: 3px; flex: none; }
.tvgiu span { min-width: 0; }
.tvgiu b { display: block; font-size: 13px; }
.tvgiu small { display: block; color: var(--muted); font-size: 12px; line-height: 1.55; margin-top: 2px; }


/* =====================================================================
 *  BOI-DEN-CHU — màu vùng bôi đen chữ
 *
 *  `app/v8.css:36` đặt `::selection{background:var(--accent-soft)}`, mà
 *  `--accent-soft` chính là màu nền HÀNG ĐANG CHỌN. Nên khi người dùng
 *  quét qua một mã tài khoản trên hàng đang chọn, vùng bôi đen trùng khít
 *  màu nền — nhìn không ra là đã bôi được hay chưa, mà đó lại đúng là lúc
 *  người ta cần thấy nhất: ngay trước khi bấm Ctrl+C.
 *
 *  Đổi sang một cặp màu TƯƠNG PHẢN MẠNH và có ghi rõ màu chữ. Không dùng
 *  sắc hồng nhạt nữa: bảng V8 vốn đã đầy nền hồng nhạt (hàng đang chọn,
 *  hàng rê chuột, huy hiệu), nên bất cứ hồng nhạt nào cũng lẫn vào một
 *  thứ gì đó.
 *
 *  Nền sáng thì hồng đậm chữ trắng; nền tối thì hồng sáng chữ đen — hai
 *  chiều ngược nhau, để chỗ nào cũng nổi bật.
 *
 *  Tệp này nạp SAU `v8.css` trong `index.php`, nên luật ở đây thắng.
 * ===================================================================== */
:root                        { --boiden-nen: #A31058; --boiden-chu: #FFFFFF; }
:root[data-theme="light"]    { --boiden-nen: #A31058; --boiden-chu: #FFFFFF; }
:root[data-theme="obsidian"],
:root[data-theme="dark"]     { --boiden-nen: #FF8ECB; --boiden-chu: #1A0E15; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme])    { --boiden-nen: #FF8ECB; --boiden-chu: #1A0E15; }
}

::selection      { background: var(--boiden-nen); color: var(--boiden-chu); }
::-moz-selection { background: var(--boiden-nen); color: var(--boiden-chu); }


/* =====================================================================
 *  TIM-NHIEU-MA — chip báo kết quả tra một danh sách mã
 *
 *  `.tb-loc` gốc dành cho chip lọc theo VIA: một dòng ngắn, cắt bằng dấu
 *  ba chấm khi quá 320px. Chip này thì ngược lại — nội dung đáng giá nhất
 *  của nó là DANH SÁCH MÃ KHÔNG TÌM THẤY, cắt đi là mất đúng phần cần
 *  đọc. Nên cho nó xuống dòng và rộng hơn hẳn.
 *
 *  Có mã thiếu thì đổi sang màu cảnh báo: người dán 50 mã vào rồi liếc
 *  qua phải nhận ra ngay là có thiếu, không phải đọc từng chữ.
 * ===================================================================== */
.tb-timnhieu {
  max-width: min(680px, 55vw);
  white-space: normal; text-overflow: clip; overflow: visible;
  align-items: flex-start; line-height: 1.45;
  padding: 6px 12px; border-radius: 12px;
}
.tb-timnhieu.thieu { color: var(--crit); background: var(--crit-soft); }


/* =====================================================================
 *  CAU-HINH-DONG-BO — hộp cấu hình nhịp quét
 * ===================================================================== */
.cdo { display: flex; align-items: flex-start; gap: 14px; margin: 12px 0; }
.cdo > span:first-child { flex: 1; min-width: 0; }
.cdo b { display: block; font-size: 13px; }
.cdo small { display: block; color: var(--muted); font-size: 12px; line-height: 1.55; margin-top: 2px; }

/*  Ô số và đơn vị đi liền nhau, không cho co lại: nhãn bên trái dài ngắn
    khác nhau nhưng cột số phải thẳng hàng thì mới đọc lướt được. */
.cdso { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.cdso input {
  width: 84px; text-align: right; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--ink); font: inherit;
}
.cdso i { font-style: normal; color: var(--muted); font-size: 12px; width: 30px; }

.cdngan { border: 0; border-top: 1px solid var(--border); margin: 18px 0 14px; }

/*  Khối cảnh báo về khối lượng quét. Nền vàng chứ không đỏ: đây không phải
    lỗi, chỉ là một quyết định tốn kém mà người dùng cần cân nhắc. */
.cdcanh {
  background: var(--warn-soft, #FFF6E5); border-left: 3px solid var(--warn, #C77700);
  padding: 9px 12px; border-radius: 0 8px 8px 0; margin: 4px 0 14px;
}
.cdfoot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 6px; }