/* =====================================================================
   assets/qlts-v2.css — giao diện theo mockup v9 (25/09/2026)
   docs/cap-nhat-production/mockup/index.html. Nạp SAU qlts.css và
   qlts-giao-dien.css. Phần thành phần chép NGUYÊN từ mockup; phần khung viết
   lại trên lớp của Qlts.master. Không sửa tay phần chép — sửa ở mockup rồi
   chép lại để hai bên không lệch nhau.
   ===================================================================== */


:root {
  --primary: #1e3a8a; --primary-hover: #1d4ed8; --primary-light: #eff6ff;
  --vang: #d8a820; --vang-dam: #8a6608; --vang-nhat: #fdf7e6;
  --bg: #f8fafc; --surface: #ffffff; --surface-2: #f1f5f9;
  --border: #cbd5e1; --border-light: #e2e8f0;
  --text: #1e293b; --text-2: #475569; --text-3: #64748b;
  --sidebar-bg: #eef1f5; --sidebar-text: #334155; --sidebar-muted: #64748b; --sidebar-hover: rgba(15,23,42,.06);
  --sb-manh: #0f172a; --sb-chon: var(--primary); --sb-duong: rgba(15,23,42,.09); --sb-nen-chon: #ffffff; --sb-huy: rgba(15,23,42,.07);
  --ok: #047857; --ok-bg: #f0fdf4; --ok-bd: #6ee7b7;
  --warn: #b45309; --warn-bg: #fffbeb; --warn-bd: #fcd34d;
  --err: #b91c1c; --err-bg: #fff1f2; --err-bd: #fca5a5;
  --info: #0369a1; --info-bg: #f0f9ff; --info-bd: #7dd3fc;
  --new: #7c3aed; --new-bg: #f5f3ff; --new-bd: #c4b5fd;
  --study: #065f46; --study-bg: #d1fae5; --study-bd: #6ee7b7;
  --shadow-sm: 0 1px 2px rgba(15,23,42,.04), 0 0 0 1px rgba(15,23,42,.03);
  --shadow-lg: 0 16px 40px rgba(15,23,42,.18);
  --backdrop: rgba(15,23,42,.45);
  --r: 8px; --r-lg: 12px;
  --k1: 4px; --k2: 8px; --k3: 12px; --k4: 16px; --k5: 24px; --k6: 32px;
  --cham: 40px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #5b9fd4; --primary-hover: #7eb3de; --primary-light: #1a2d42;
    --vang: #f0d060; --vang-dam: #f5dfa0; --vang-nhat: #3d3420;
    --bg: #0f1419; --surface: #1a222d; --surface-2: #151b24;
    --border: #2a3544; --border-light: #1f2834;
    --text: #f1f5f9; --text-2: #cbd5e1; --text-3: #94a3b8;
    --sidebar-bg: #121820; --sidebar-text: #a8b4c4; --sidebar-muted: #6b7788;
    --ok: #6ee7b7; --ok-bg: #022c22; --ok-bd: #047857;
    --warn: #fbbf24; --warn-bg: #3f2e0a; --warn-bd: #92400e;
    --err: #fca5a5; --err-bg: #450a0a; --err-bd: #b91c1c;
    --info: #7dd3fc; --info-bg: #082f49; --info-bd: #075985;
    --new: #c4b5fd; --new-bg: #2e1065; --new-bd: #6d28d9;
    --study: #6ee7b7; --study-bg: #052e16; --study-bd: #166534;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-lg: 0 16px 40px rgba(0,0,0,.5);
    --backdrop: rgba(0,0,0,.6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --primary: #5b9fd4; --primary-hover: #7eb3de; --primary-light: #1a2d42;
  --vang: #f0d060; --vang-dam: #f5dfa0; --vang-nhat: #3d3420;
  --bg: #0f1419; --surface: #1a222d; --surface-2: #151b24;
  --border: #2a3544; --border-light: #1f2834;
  --text: #f1f5f9; --text-2: #cbd5e1; --text-3: #94a3b8;
  --sidebar-bg: #121820; --sidebar-text: #a8b4c4; --sidebar-muted: #6b7788;
  --ok: #6ee7b7; --ok-bg: #022c22; --ok-bd: #047857;
  --warn: #fbbf24; --warn-bg: #3f2e0a; --warn-bd: #92400e;
  --err: #fca5a5; --err-bg: #450a0a; --err-bd: #b91c1c;
  --info: #7dd3fc; --info-bg: #082f49; --info-bd: #075985;
  --new: #c4b5fd; --new-bg: #2e1065; --new-bd: #6d28d9;
  --study: #6ee7b7; --study-bg: #052e16; --study-bd: #166534;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-lg: 0 16px 40px rgba(0,0,0,.5);
  --backdrop: rgba(0,0,0,.6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { background: var(--bg); color: var(--text); }
body { margin: 0; font-family: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif; font-size: 14px; line-height: 1.5; }
.so, .tien { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ma { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; letter-spacing: .02em; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--vang-dam); outline-offset: 2px; }
svg.i { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--text-3); }
.nho-chu { font-size: 12.5px; }
.no { color: var(--err); font-weight: 600; }
.du { color: var(--ok); font-weight: 600; }

/* ---------- Thành phần ---------- */
.card { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); min-width: 0; }
.card-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k2); padding: var(--k3) var(--k4); border-bottom: 1px solid var(--border-light); }
.card-h h2 { font-size: 15px; font-weight: 600; flex: 1; min-width: 140px; }
.card-h > p { color: var(--text-3); font-size: 12.5px; flex-basis: 100%; }
.card-b { padding: var(--k4); }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--k2); align-items: center; flex: 1; }
.toolbar .grow { flex: 1 1 220px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--cham); padding: 0 14px; border-radius: var(--r); border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font-weight: 500; white-space: nowrap; font-size: 13.5px; }
.btn:hover { border-color: var(--primary); color: var(--primary); }
.btn.chinh { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.chinh:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn.nguy { color: var(--err); border-color: var(--err-bd); }
.btn.nho { height: 32px; padding: 0 10px; font-size: 12.5px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-icon { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid transparent; background: none; border-radius: 6px; cursor: pointer; color: var(--text-3); }
.btn-icon:hover { background: var(--primary-light); color: var(--primary); }
/* Kiểm form trước khi gửi (28/09 — qlts-v2.js): ô sai viền đỏ, câu báo ngay dưới ô. */
.input.sai-o, .input.sai-o:focus, .select.sai-o, .select.sai-o:focus, textarea.sai-o, .seg.sai-o,
.cb .input.sai-o { border-color: var(--err); box-shadow: 0 0 0 3px var(--err-bg); }
.seg.sai-o { border-radius: 8px; }
/* Lớp lặp (.loi-o.loi-o) để thắng mọi quy tắc "khung small" của các màn (.dong-cd small, .field small…) và
   .field .loi-o của qlts.css (#ef4444 thiếu tương phản). */
.loi-o.loi-o, .field .loi-o.loi-o { display: block; color: var(--err); font-size: 12px; font-weight: 500; line-height: 1.4; margin: 4px 0 0; opacity: 1; }
[data-neo-loi] { flex-wrap: wrap; }
[data-neo-loi] > .loi-o { flex-basis: 100%; }
.loi-o.loi-o[hidden] { display: none; }
td > .loi-o { white-space: normal; }
.btn-icon.to { width: 40px; height: 40px; }
.input, .select, textarea.input { height: var(--cham); border: 1px solid var(--border); border-radius: var(--r); padding: 0 10px; background: var(--surface); width: 100%; min-width: 0; }
textarea.input { height: auto; padding: 8px 10px; resize: vertical; }
.input[readonly], .input[disabled], .select[disabled] { background: var(--surface-2); color: var(--text-2); }
.input:focus, .select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.o-tim { position: relative; }
.o-tim svg { position: absolute; left: 10px; top: 11px; color: var(--text-3); }
.o-tim .input { padding-left: 34px; }
.field { display: grid; gap: 4px; min-width: 0; align-content: start; }
.field > label, .field > .nhan { font-size: 12.5px; font-weight: 500; color: var(--text-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.field em { color: var(--err); font-style: normal; }
.field small { color: var(--text-3); font-size: 12px; }
.form-grid { display: grid; gap: var(--k3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .het { grid-column: 1 / -1; } .form-grid.ba { grid-template-columns: 1fr 1fr 1fr; } }
fieldset { border: 1px solid var(--border-light); border-radius: var(--r); padding: var(--k3) var(--k4) var(--k4); margin: 0; min-width: 0; }
legend { padding: 0 6px; font-weight: 600; font-size: 13px; display: flex; gap: 6px; align-items: center; }
.check { display: flex; gap: 8px; align-items: center; font-size: 13.5px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); }
.chip-nhom { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--border); background: var(--surface); padding: 5px 12px; border-radius: 999px; font-size: 12.5px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.chip b { font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip.do[aria-pressed="false"] b { color: var(--err); }
.chip.xanh[aria-pressed="false"] b { color: var(--ok); }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; flex-wrap: wrap; }
.seg button { border: 0; border-right: 1px solid var(--border); background: var(--surface); padding: 0 14px; height: 38px; cursor: pointer; font-size: 13px; display: inline-flex; gap: 6px; align-items: center; }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--primary); color: #fff; font-weight: 600; }
.seg.day { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }

.huy { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; line-height: 1.5; }
.huy.vang { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-bd); }
.huy.xanh { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-bd); }
.huy.do { color: var(--err); background: var(--err-bg); border-color: var(--err-bd); }
.huy.xam { color: var(--text-3); background: var(--surface-2); border-color: var(--border); }
.huy.lam { color: var(--info); background: var(--info-bg); border-color: var(--info-bd); }
.huy.tim { color: var(--new); background: var(--new-bg); border-color: var(--new-bd); }
.huy.hoc { color: var(--study); background: var(--study-bg); border-color: var(--study-bd); }

.bang-khung { overflow-x: auto; }
/* Ô lọc "Mọi hạng" (GiaoDienV2.OChonHang) co theo nội dung trên thanh công cụ. */
.select.o-hang { width: auto; min-width: 120px; }

/* Bảng danh sách ghim trong khung nhìn (qlts-v2.js ghimBang — báo lỗi 25/09): thẻ co theo phần màn còn lại,
   chỉ bảng cuộn; tiêu đề cột dính ở đầu, thanh cuộn ngang + phân trang ở chân thẻ luôn thấy. */
@media (min-width: 768px) {
  .card.ds-ghim { display: flex; flex-direction: column; }
  .card.ds-ghim > * { flex: none; }
  .card.ds-ghim > .bang-khung { flex: 1 1 auto; min-height: 120px; overflow: auto; overscroll-behavior: contain; }
  .card.ds-ghim > .bang-khung thead th { position: sticky; top: 0; z-index: 3; }
  .card.ds-ghim > .bang-khung thead th.ghim, .card.ds-ghim > .bang-khung thead th.ghim2 { z-index: 4; }
}
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; font-weight: 600; color: var(--text-2); font-size: 12px; background: var(--surface-2); padding: 9px 12px; border-bottom: 1px solid var(--border-light); white-space: nowrap; }
.tbl td { padding: 8px 12px; border-bottom: 1px solid var(--border-light); vertical-align: middle; background: var(--surface); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--primary-light); }
.tbl .r { text-align: right; }
.tbl .c { text-align: center; }
.tbl td.ten { font-weight: 600; white-space: nowrap; }
.tbl td.nw { white-space: nowrap; }
.tbl tr.loi td { background: var(--err-bg); }
.tbl tr.khoa td { background: var(--warn-bg); }
.tbl tr.capnhat td { background: var(--info-bg); }
.tbl tr.vua-them td { background: var(--new-bg); }
.tbl .ghim { position: sticky; left: 0; z-index: 1; width: 52px; min-width: 52px; }
.tbl .ghim2 { position: sticky; left: 52px; z-index: 1; box-shadow: 1px 0 0 var(--border-light); }
.tbl th.ghim, .tbl th.ghim2 { z-index: 2; }
.tbl .gc { max-width: 200px; white-space: normal; color: var(--text-2); font-size: 12.5px; }
.thao-tac { display: flex; gap: 2px; }

.stat-grid { display: grid; gap: var(--k3); grid-template-columns: 1fr; }
@media (min-width: 480px) { .stat-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: var(--k4); display: grid; gap: 2px; align-content: start; }
.stat > span { color: var(--text-3); font-size: 12.5px; }
.stat > b { font-size: 22px; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat small { color: var(--text-3); font-size: 12px; }
.stat.canh { border-color: var(--err-bd); background: var(--err-bg); }
.stat.canh > b, .stat.canh > span { color: var(--err); }
.thanh { height: 6px; border-radius: 3px; background: var(--border-light); overflow: hidden; }
.thanh i { display: block; height: 100%; background: var(--primary); border-radius: 3px; }
.thanh i.du { background: var(--ok); }
.thanh i.do { background: var(--err); }
.thanh.day { height: 10px; border-radius: 5px; }

.hai-cot { display: grid; gap: var(--k4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .hai-cot { grid-template-columns: 3fr 2fr; } .hai-cot.deu { grid-template-columns: 1fr 1fr; } .hai-cot.trai-hep { grid-template-columns: 2fr 3fr; } }

.dong-canh { display: flex; gap: var(--k3); align-items: flex-start; padding: var(--k3) var(--k4); border-bottom: 1px solid var(--border-light); }
.dong-canh:last-child { border-bottom: 0; }
.dong-canh .dau { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; }
.dong-canh .nd { flex: 1; min-width: 0; }
.dong-canh .nd b { display: block; font-weight: 600; font-size: 13.5px; }
.dong-canh .nd span { color: var(--text-3); font-size: 12.5px; }
.dong-canh.chua-doc { background: var(--primary-light); }

.nhanh { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--k2); padding: var(--k4); }
@media (min-width: 640px) { .nhanh { grid-template-columns: repeat(4, 1fr); } }
.nhanh button { border: 1px solid var(--border-light); background: var(--surface); border-radius: var(--r); padding: 10px 12px; text-align: left; cursor: pointer; display: grid; gap: 2px; }
.nhanh button:hover { border-color: var(--primary); }
.nhanh button span { font-size: 12px; color: var(--text-3); }
.nhanh button b { font-size: 18px; font-variant-numeric: tabular-nums; }
.bieu { padding: var(--k4); }
.bieu svg { width: 100%; height: auto; display: block; }

/* Danh sách thẻ (<768px) — bám DanhSach: bảng từ 768px, thẻ dưới 768px */
.the-ds { display: grid; gap: var(--k2); padding: var(--k3); }
.the-dong { border: 1px solid var(--border-light); border-radius: var(--r); padding: var(--k3); display: grid; gap: 6px; background: var(--surface); }
.the-dong .dau-the { display: flex; gap: 8px; align-items: center; }
.the-dong .dau-the b { flex: 1; min-width: 0; }
.the-dong .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 12.5px; }
.the-dong .meta span { color: var(--text-3); display: block; font-size: 11.5px; }
.chi-bang { display: none; }
@media (min-width: 768px) { .chi-bang { display: block; } .chi-the { display: none; } }
.pager { display: flex; flex-wrap: wrap; gap: var(--k2); align-items: center; justify-content: space-between; padding: var(--k3) var(--k4); border-top: 1px solid var(--border-light); font-size: 12.5px; color: var(--text-3); }
.pager .trang { display: flex; gap: 4px; }
.pager .trang button { min-width: 32px; height: 32px; border: 1px solid var(--border-light); background: var(--surface); border-radius: 6px; cursor: pointer; }
.pager .trang button[aria-current="page"] { background: var(--primary); color: #fff; border-color: var(--primary); }

/* Hộp thoại thật (lớp phủ) */
div.phu { position: fixed; inset: 0; z-index: 60; background: var(--backdrop); display: flex; align-items: flex-end; justify-content: center; padding: 0; }
@media (min-width: 640px) { div.phu { align-items: center; padding: var(--k5); } }
.hop { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-lg); width: 100%; max-width: 720px; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 640px) { .hop { border-radius: var(--r-lg); } }
.hop.hep { max-width: 560px; } .hop.rong { max-width: 900px; }
.hop-h { display: flex; align-items: center; gap: var(--k2); padding: var(--k3) var(--k4); border-bottom: 1px solid var(--border-light); flex-wrap: wrap; }
.hop-h h2 { font-size: 16px; font-weight: 600; flex: 1; min-width: 0; }
.hop-b { padding: var(--k4); display: grid; gap: var(--k4); overflow-y: auto; }
.hop-f { display: flex; justify-content: flex-end; gap: var(--k2); padding: var(--k3) var(--k4); border-top: 1px solid var(--border-light); background: var(--surface-2); flex-wrap: wrap; }
/* Hộp nằm trong trang (màn minh họa chính là hộp thoại) */
.nen-mo { background: color-mix(in srgb, var(--text) 7%, var(--bg)); border-radius: var(--r-lg); padding: var(--k5) var(--k3); }
.nen-mo .hop { margin-inline: auto; max-height: none; border-radius: var(--r-lg); }

.ds-dl { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 640px) { .ds-dl { grid-template-columns: 1fr 1fr; column-gap: var(--k5); } }
.ds-dl div { display: grid; grid-template-columns: 130px 1fr; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border-light); font-size: 13px; }
.ds-dl div span { color: var(--text-3); }
.ds-dl div.het { grid-column: 1 / -1; }
.muc-h { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); display: flex; gap: 8px; align-items: center; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-light); overflow-x: auto; padding: 0 var(--k2); }
.tabs button { border: 0; background: none; padding: 11px 12px; font-size: 13px; color: var(--text-3); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.tabs button[aria-selected="true"] { color: var(--text); font-weight: 600; border-bottom-color: var(--vang); }
.tabs-dt { background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--r-lg); }

.dai { display: flex; gap: var(--k3); align-items: flex-start; padding: 10px 12px; border-radius: var(--r); border: 1px solid; font-size: 13px; }
.dai.vang { border-color: var(--warn-bd); background: var(--warn-bg); color: var(--warn); }
.dai.do { border-color: var(--err-bd); background: var(--err-bg); color: var(--err); }
.dai.lam { border-color: var(--info-bd); background: var(--info-bg); color: var(--info); }
.dai.xanh { border-color: var(--ok-bd); background: var(--ok-bg); color: var(--ok); }
.dai > div { flex: 1; }
.dai b { font-weight: 600; }

/* Nhập Excel */
.buoc { display: flex; gap: var(--k3); flex-wrap: wrap; font-size: 12.5px; }
.buoc span { display: flex; align-items: center; gap: 6px; color: var(--text-3); }
.buoc span i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); font-weight: 600; font-size: 11px; }
.buoc span.xong i { background: var(--ok); border-color: var(--ok); color: #fff; }
.buoc span.dang { color: var(--text); font-weight: 600; }
.buoc span.dang i { background: var(--primary); border-color: var(--primary); color: #fff; }
.tong-nhap { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--k2); }
@media (min-width: 640px) { .tong-nhap { grid-template-columns: repeat(4, 1fr); } }
.tong-nhap button { border-radius: var(--r); padding: 10px 12px; border: 1px solid; text-align: left; cursor: pointer; background: none; }
.tong-nhap button[aria-pressed="true"] { box-shadow: 0 0 0 2px currentColor inset; }
.tong-nhap b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.tong-nhap span { font-size: 12px; }
.tong-nhap .a { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-bd); }
.tong-nhap .u { color: var(--info); background: var(--info-bg); border-color: var(--info-bd); }
.tong-nhap .b { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-bd); }
.tong-nhap .c { color: var(--err); background: var(--err-bg); border-color: var(--err-bd); }
.doi-tu { font-size: 11.5px; color: var(--info); display: block; }
.doi-tu s { color: var(--text-3); }
.quy-tac { display: grid; gap: 6px; font-size: 12.5px; color: var(--text-2); }
.quy-tac div { display: grid; grid-template-columns: 120px 1fr; gap: 8px; }

/* Học phí */
.hp-ds { display: grid; }
.hp-dong { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 12px var(--k4); border-bottom: 1px solid var(--border-light); cursor: pointer; background: var(--surface); border-left: 3px solid transparent; text-align: left; border-top: 0; border-right: 0; width: 100%; }
.hp-dong:hover { background: var(--primary-light); }
.hp-dong[aria-selected="true"] { background: var(--primary-light); border-left-color: var(--vang); }
.hp-dong .t b { font-weight: 600; }
.hp-dong .t span { display: block; color: var(--text-3); font-size: 12px; }
.hp-dong .s { text-align: right; }
.hp-dong .s b { display: block; font-variant-numeric: tabular-nums; }
.hp-dong .thanh { grid-column: 1 / -1; }
.hp-dong .chan { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--text-3); flex-wrap: wrap; }
.tien-lon { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.o-tien-lon { height: 52px; font-size: 22px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.dong-thoi { display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; padding: 8px 0; font-size: 13px; }
.dong-thoi i { width: 10px; height: 10px; border-radius: 50%; background: var(--primary); margin-top: 5px; }
.dong-thoi span { display: block; color: var(--text-3); font-size: 12px; }

/* Bảng giá */
.gia-ma-tran { display: grid; gap: 1px; background: var(--border-light); border: 1px solid var(--border-light); border-radius: var(--r); overflow: hidden; grid-template-columns: minmax(150px, 1.2fr) repeat(4, minmax(130px, 1fr)); min-width: 700px; }
.gia-ma-tran > div { background: var(--surface); padding: 10px 12px; }
.gia-ma-tran .dau-cot { background: var(--surface-2); }
.gia-ma-tran .dau-cot b { font-size: 16px; display: block; }
.gia-ma-tran .dau-cot span { font-size: 11.5px; color: var(--text-3); }
.gia-ma-tran .dau-dong b { display: block; }
.gia-ma-tran .dau-dong span { font-size: 11.5px; color: var(--text-3); }
.gia-o input { width: 100%; border: 1px solid transparent; background: var(--surface-2); border-radius: 6px; height: 40px; text-align: right; padding: 0 10px; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gia-o input:hover { border-color: var(--border); }
.gia-o input:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-light); }
.gia-o.da-doi input { border-color: var(--vang); background: var(--vang-nhat); }
.gia-o small { display: block; text-align: right; font-size: 11px; color: var(--vang-dam); min-height: 16px; }
.thanh-luu { position: sticky; bottom: 0; display: flex; gap: var(--k2); align-items: center; justify-content: flex-end; flex-wrap: wrap; padding: var(--k3) var(--k4); background: var(--surface); border-top: 1px solid var(--border-light); border-radius: 0 0 var(--r-lg) var(--r-lg); z-index: 3; }
.thanh-luu span { margin-right: auto; font-size: 13px; color: var(--text-3); }
.thanh-luu span b { color: var(--vang-dam); }
.lp-bang { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; min-width: 560px; }
.lp-bang th, .lp-bang td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); text-align: left; }
.lp-bang thead th { background: var(--surface-2); font-size: 12.5px; vertical-align: bottom; }
.lp-bang thead th b { display: block; font-size: 15px; color: var(--text); }
.lp-bang thead th span { font-weight: 400; color: var(--text-3); font-size: 11.5px; }
.lp-bang td.o { width: 190px; }
.lp-bang td.o input { width: 100%; height: 38px; border: 1px solid var(--border); border-radius: 6px; text-align: right; padding: 0 10px; font-weight: 600; font-variant-numeric: tabular-nums; background: var(--surface); }
.lp-bang tr.bo td { color: var(--text-3); }
.lp-bang tr.bo td:first-child { text-decoration: line-through; }
.lp-bang tr.tong td { background: var(--surface-2); font-weight: 700; }
.lp-bang .khong { color: var(--text-3); text-align: center; font-size: 12.5px; }

/* Đào tạo / thi */
.kq { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; flex-wrap: wrap; }
.kq button { border: 0; border-right: 1px solid var(--border); background: var(--surface); font-size: 12px; padding: 5px 9px; cursor: pointer; white-space: nowrap; }
.kq button:last-child { border-right: 0; }
.kq button[aria-pressed="true"].cho { background: var(--surface-2); font-weight: 600; }
.kq button[aria-pressed="true"].dat { background: var(--ok); color: #fff; font-weight: 600; }
.kq button[aria-pressed="true"].rot { background: var(--err); color: #fff; font-weight: 600; }
.dong-ky { display: grid; grid-template-columns: 28px 1fr auto; gap: 4px 10px; align-items: center; padding: 10px var(--k4); border-bottom: 1px solid var(--border-light); }
.dong-ky .kq { grid-column: 2 / -1; justify-self: start; }
@media (min-width: 900px) { .dong-ky { grid-template-columns: 28px 1fr auto auto; } .dong-ky .kq { grid-column: auto; } }
.dong-ky b { font-weight: 600; }
.dong-ky span.phu { display: block; font-size: 12px; color: var(--text-3); }
.dong-chon { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 10px var(--k4); border-bottom: 1px solid var(--border-light); cursor: pointer; align-items: start; }
.dong-chon input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); }
.dong-chon.chan { cursor: not-allowed; }
.dong-chon.chan b { color: var(--text-3); }
.dong-chon .ly-do { color: var(--err); font-size: 12.5px; display: block; }
.dong-chon .ok { color: var(--ok); font-size: 12.5px; display: block; }
.dong-chon span.phu { display: block; font-size: 12px; color: var(--text-3); }
.dai-kq { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--border-light); }
.dai-kq i { display: block; }
.mon { display: grid; grid-template-columns: 1fr auto; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: 13px; align-items: center; }
.muc-dt { border: 1px solid var(--border-light); border-radius: var(--r); padding: var(--k3) var(--k4); display: grid; gap: 8px; }
.muc-dt h3 { font-size: 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.muc-dt h3 .huy { margin-left: auto; }
.them-buoi { display: flex; gap: 8px; flex-wrap: wrap; align-items: start; }
/* Canh nút theo ô nhập (dưới nhãn) — câu báo lỗi dưới một ô không đẩy lệch cả hàng (28/09). */
.them-buoi > .btn { margin-top: calc(12.5px * 1.5 + 4px); }   /* nhãn 12,5px × 1,5 + khe 4px */
.them-buoi .field { flex: 1 1 110px; }

/* Thông báo */
.nguoi-nhan { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.bong { background: var(--primary-light); border-radius: 14px 14px 14px 4px; padding: 10px 14px; font-size: 13.5px; max-width: 360px; }
.the-kenh { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k2); }
.the-kenh button { border: 1px solid var(--border); background: var(--surface); border-radius: var(--r); padding: 10px 12px; text-align: left; cursor: pointer; }
.the-kenh button[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset; background: var(--primary-light); }
.the-kenh span { display: block; font-size: 12px; }

/* Vai trò */
.vai-tro { display: grid; gap: var(--k3); grid-template-columns: 1fr; }
@media (min-width: 768px) { .vai-tro { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .vai-tro { grid-template-columns: repeat(4, 1fr); } }
.vai-tro > div { border: 1px solid var(--border-light); border-radius: var(--r); padding: var(--k3); display: grid; gap: 6px; font-size: 12.5px; color: var(--text-2); align-content: start; }
.vai-tro b { color: var(--text); font-size: 13.5px; }
.khung-dm { display: grid; gap: var(--k4); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .khung-dm { grid-template-columns: repeat(3, 1fr); } }
.dm-dong { display: flex; gap: 8px; align-items: center; padding: 8px var(--k4); border-bottom: 1px solid var(--border-light); font-size: 13px; }
.dm-dong > div { flex: 1; min-width: 0; }
.dm-dong span.phu { display: block; color: var(--text-3); font-size: 12px; }
.lenh { background: var(--surface-2); border: 1px solid var(--border-light); border-radius: 6px; padding: 8px 10px; overflow-x: auto; white-space: pre; }

/* Quét QR */
.khung-cam { position: relative; aspect-ratio: 4 / 3; max-width: 100%; border-radius: var(--r); overflow: hidden; background: #0b1220; display: grid; place-items: center; }
.khung-cam .ngam { width: 58%; aspect-ratio: 1; border: 3px solid rgba(255,255,255,.85); border-radius: 12px; position: relative; box-shadow: 0 0 0 999px rgba(0,0,0,.35); }
.khung-cam .ngam::after { content: ""; position: absolute; left: 6%; right: 6%; height: 2px; background: var(--vang); top: 50%; box-shadow: 0 0 12px var(--vang); }
@media (prefers-reduced-motion: no-preference) { .khung-cam .ngam::after { animation: quet 1.8s ease-in-out infinite alternate; } @keyframes quet { from { top: 8%; } to { top: 92%; } } }
.khung-cam p { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; color: #e2e8f0; font-size: 12.5px; }
.tha-anh { border: 2px dashed var(--border); border-radius: var(--r); padding: var(--k5); text-align: center; display: grid; gap: 8px; justify-items: center; cursor: pointer; }
.tha-anh:hover { border-color: var(--primary); }
.kq-qr { display: grid; gap: 0; font-size: 13px; }
.kq-qr div { display: grid; grid-template-columns: 120px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border-light); }
.kq-qr span { color: var(--text-3); }

/* ---------- Trang công khai ---------- */
.cong { min-height: calc(100vh - 49px); background: linear-gradient(180deg, #eaf1fa, #ccdcef); padding-inline: var(--k4); padding-block: var(--k4) var(--k6); }
:root[data-theme="dark"] .cong { background: linear-gradient(180deg, #121a24, #0f1419); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cong { background: linear-gradient(180deg, #121a24, #0f1419); } }
.cong-top { max-width: 880px; margin: 0 auto var(--k5); display: flex; align-items: center; gap: var(--k3); flex-wrap: wrap; }
.cong-top small { display: block; font-size: 10.5px; letter-spacing: .1em; color: var(--text-3); text-transform: uppercase; }
.cong-top nav { margin-left: auto; display: flex; gap: var(--k3); font-size: 13px; flex-wrap: wrap; }
.cong-top nav a { color: var(--primary); text-decoration: none; font-weight: 500; }
.cong-top nav a[aria-current="page"] { color: var(--text); border-bottom: 2px solid var(--vang); }
.cong-the { max-width: 880px; margin: 0 auto; display: grid; gap: var(--k4); }
.tra-form { display: grid; gap: var(--k3); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 640px) { .tra-form { grid-template-columns: 2fr 1fr auto; } }
.turnstile { display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 6px; padding: 8px 12px; background: var(--surface-2); font-size: 12.5px; width: fit-content; max-width: 100%; }
.turnstile .o { width: 22px; height: 22px; border-radius: 4px; border: 2px solid var(--ok); display: grid; place-items: center; color: var(--ok); }
.hs-dau { display: flex; gap: var(--k3); align-items: center; flex-wrap: wrap; }
.hs-dau .avatar { width: 48px; height: 48px; font-size: 16px; }
.hs-dau h2 { font-size: 20px; }
.tt-luoi { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--k3) var(--k4); }
@media (min-width: 640px) { .tt-luoi { grid-template-columns: repeat(4, 1fr); } }
.tt-luoi span { display: block; font-size: 12px; color: var(--text-3); }
.tt-luoi b { font-weight: 600; }
.tien-do { display: grid; gap: 8px; }
.tien-do .hang { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; font-size: 13px; }
.tien-do .thanh { grid-column: 1 / -1; }
.qr-khung { display: grid; gap: var(--k4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .qr-khung { grid-template-columns: 200px 1fr; } }
.qr { width: 200px; max-width: 100%; aspect-ratio: 1; background: #fff; border: 1px solid var(--border); border-radius: var(--r); padding: 10px; }
.qr canvas { width: 100%; height: 100%; image-rendering: pixelated; }
.so-tien-lon { font-size: 30px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.dang-nhap { min-height: calc(100vh - 49px); display: grid; place-items: center; padding: var(--k4); background: linear-gradient(180deg, #eaf1fa, #ccdcef); }
:root[data-theme="dark"] .dang-nhap { background: linear-gradient(180deg, #121a24, #0f1419); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dang-nhap { background: linear-gradient(180deg, #121a24, #0f1419); } }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: var(--k6) var(--k5); display: grid; gap: var(--k4); }
.auth-card .logo { display: grid; justify-items: center; gap: 6px; text-align: center; }
.auth-card .logo .mark { width: 64px; height: 64px; font-size: 22px; border-radius: 16px; }
.auth-card .logo b { font-size: 18px; letter-spacing: .04em; }
.bao-tri { min-height: calc(100vh - 49px); display: grid; place-items: center; padding: var(--k4); background: var(--bg); }
.bao-tri .khung { max-width: 460px; text-align: center; display: grid; gap: var(--k3); justify-items: center; }
.bao-tri .mark { width: 64px; height: 64px; border-radius: 16px; font-size: 22px; }
.bao-tri h1 { font-size: 22px; }
.bao-tri p { color: var(--text-2); }

/* Tổng quan: biểu đồ trái cao bằng khối Cảnh báo phải */
.tq-luoi { display: grid; gap: var(--k4); grid-template-columns: 1fr; }
@media (min-width: 1024px) {
  .tq-luoi { grid-template-columns: 3fr 2fr; align-items: stretch; }
  .cot-canh { position: relative; min-height: 360px; }
  .cot-canh > .card-h { height: 53px; }
  .cot-canh > .cuon { position: absolute; left: 0; right: 0; bottom: 0; top: 53px; overflow-y: auto; }
}
.chip.nho { padding: 3px 10px; font-size: 12px; }
.seg button[disabled] { opacity: .45; cursor: not-allowed; }
.seg.nho button { height: 32px; padding: 0 10px; font-size: 12.5px; }
.o-don-vi { display: flex; align-items: center; gap: 8px; }
.o-don-vi .input { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.o-bang td { padding-top: 6px; padding-bottom: 6px; }
.o-bang .input { height: 34px; }
/* Cài đặt: điều hướng dọc + nội dung dạng dòng thiết lập */
.cd-khung { display: grid; grid-template-columns: 1fr; min-height: 560px; overflow: hidden; }
@media (min-width: 900px) { .cd-khung { grid-template-columns: 220px 1fr; } }
.cd-nav { display: flex; gap: 2px; overflow-x: auto; padding: 8px; border-bottom: 1px solid var(--border-light); background: var(--surface-2); }
@media (min-width: 900px) { .cd-nav { flex-direction: column; border-bottom: 0; border-right: 1px solid var(--border-light); padding: 12px 8px; } }
.cd-nav button { display: flex; gap: 10px; align-items: center; border: 0; background: none; padding: 9px 12px; border-radius: 6px; cursor: pointer; font-size: 13.5px; color: var(--text-2); white-space: nowrap; text-align: left; }
.cd-nav button:hover { background: var(--surface); }
.cd-nav button[aria-selected="true"] { background: var(--surface); color: var(--primary); font-weight: 600; box-shadow: var(--shadow-sm); }
.cd-noi { padding: var(--k4); display: grid; gap: var(--k4); align-content: start; min-width: 0; }
@media (min-width: 900px) { .cd-noi { padding: var(--k5); } }
.cd-dau { display: flex; gap: var(--k3); align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.cd-dau h2 { font-size: 18px; }
.cd-dau p { color: var(--text-3); font-size: 13px; margin-top: 2px; }
.nhom-cd { border: 1px solid var(--border-light); border-radius: var(--r); overflow: hidden; }
.nhom-cd > h3, .nhom-cd > summary { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); padding: 10px 16px; background: var(--surface-2); border-bottom: 1px solid var(--border-light); }
.nhom-cd > summary { cursor: pointer; }
.dong-cd { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border-light); align-items: center; }
.dong-cd:last-child { border-bottom: 0; }
@media (min-width: 640px) { .dong-cd { grid-template-columns: minmax(0, 1fr) auto; } }
.dong-cd b { font-weight: 500; display: block; }
.dong-cd small { color: var(--text-3); font-size: 12px; }
.cong-tac { position: relative; display: inline-block; width: 40px; height: 22px; flex: none; cursor: pointer; }
.cong-tac input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cong-tac span { position: absolute; inset: 0; border-radius: 11px; background: var(--border); transition: background .15s; }
.cong-tac span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.cong-tac input:checked + span { background: var(--primary); }
.cong-tac input:checked + span::after { left: 21px; }
.cong-tac input:focus-visible + span { outline: 2px solid var(--vang-dam); outline-offset: 2px; }
.cong-tac input:disabled + span { opacity: .55; }
.ma-tran-quyen th, .ma-tran-quyen td { text-align: center; white-space: nowrap; }
.ma-tran-quyen td:first-child, .ma-tran-quyen th:first-child { text-align: left; }


/* Sửa lỗi 25/09: bảng rộng làm tràn nội dung Cài đặt ra ngoài màn hình */
.cd-khung > *, .cd-noi > *, .cd-noi > div > * { min-width: 0; }
@media (min-width: 900px) { .cd-khung { grid-template-columns: 220px minmax(0, 1fr); } }
.o-on { width: 96px; height: 32px; padding: 0 6px; }
.cot-bo { text-decoration: line-through; color: var(--text-3) !important; }

/* Tab của màn đặt trên thanh đầu trang */
.topbar h1 { flex: 0 1 auto; }
.topbar .gian { flex: 1; }
.tab-top { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border-light); border-radius: 9px; flex: none; }
.tab-top button { border: 0; background: none; padding: 5px 12px; border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--text-2); white-space: nowrap; }
.tab-top button[aria-selected="true"] { background: var(--surface); color: var(--primary); font-weight: 600; box-shadow: var(--shadow-sm); }
/* Bảng cài đặt sửa được: thêm / xóa hàng, cột */
.bs-khung { border: 1px solid var(--border-light); border-radius: var(--r); }
table.bs { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.bs th, .bs td { padding: 8px 10px; border-bottom: 1px solid var(--border-light); text-align: left; vertical-align: middle; background: var(--surface); }
.bs thead th { background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.bs tbody th { min-width: 170px; }
.bs th small { display: block; font-weight: 400; color: var(--text-3); font-size: 11.5px; padding-left: 7px; }
.bs-dau { display: flex; align-items: center; gap: 2px; }
.bs-ten { border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 4px 6px; font-weight: 600; width: 100%; min-width: 70px; }
.bs-ten:hover { border-color: var(--border); background: var(--surface); }
.bs-ten:focus { outline: none; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-light); }
.bs-xoa { width: 26px; height: 26px; border: 0; background: none; color: var(--text-3); border-radius: 5px; cursor: pointer; font-size: 17px; line-height: 1; flex: none; }
.bs-xoa:hover { background: var(--err-bg); color: var(--err); }
.bs tr.bs-them td { background: var(--surface-2); border-bottom: 0; }
.bs .o .input { height: 34px; }
.dk-mk { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 12.5px; color: var(--text-3); }
.dk-mk li::before { content: "○  "; }
.dk-mk li.dat { color: var(--ok); }
.dk-mk li.dat::before { content: "✓  "; }
.nguoi { cursor: pointer; border-radius: 8px; padding: 2px 6px 2px 2px; }
.nguoi:hover { background: var(--primary-light); }

/* Vai trò chỉ xem cài đặt */
.chi-xem .cd-noi:not(#cdToi) input, .chi-xem .cd-noi:not(#cdToi) select, .chi-xem .cd-noi:not(#cdToi) textarea, .chi-xem .cd-noi:not(#cdToi) .cong-tac, .chi-xem .cd-noi:not(#cdToi) [data-bat], .chi-xem .cd-noi:not(#cdToi) .thanh-luu, .chi-xem .cd-noi:not(#cdToi) form, .chi-xem [data-mo="hopTk"] { pointer-events: none; opacity: .55; }
.chi-xem .bs-xoa, .chi-xem .bs-them, .chi-xem [data-bs-themcot] { display: none !important; }

.khong-quyen { display: grid; justify-items: center; text-align: center; gap: var(--k3); padding: var(--k6) var(--k4); }
.khong-quyen .mark { width: 56px; height: 56px; background: var(--surface-2); color: var(--text-3); border-radius: 50%; }

/* Ô ngày dd/mm/yyyy + lịch chọn nhanh — dùng chung cho mọi ô ngày */
.o-ngay { position: relative; display: flex; min-width: 0; }
.o-ngay .input { padding-right: 42px; font-variant-numeric: tabular-nums; }
.o-ngay .nut-lich { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; background: none; border-radius: 6px; cursor: pointer; color: var(--text-3); display: grid; place-items: center; }
.o-ngay .nut-lich:hover { background: var(--primary-light); color: var(--primary); }
.o-ngay.sai .input { border-color: var(--err); box-shadow: 0 0 0 3px var(--err-bg); }
.loi-ngay { color: var(--err); font-size: 12px; }
.lich { position: fixed; z-index: 90; width: 292px; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 10px; display: grid; gap: 8px; }
.lich-h { display: flex; gap: 6px; align-items: center; }
.lich-h select { height: 32px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 0 6px; flex: 1; min-width: 0; }
.lich-h button { width: 32px; height: 32px; border: 1px solid var(--border-light); background: var(--surface); border-radius: 6px; cursor: pointer; flex: none; }
.lich-luoi { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.lich-luoi span { font-size: 11px; color: var(--text-3); padding: 4px 0; font-weight: 600; }
.lich-luoi button { height: 34px; border: 0; background: none; border-radius: 6px; cursor: pointer; font-variant-numeric: tabular-nums; font-size: 13px; }
.lich-luoi button:hover { background: var(--primary-light); }
.lich-luoi button.ngoai { color: var(--text-3); opacity: .5; }
.lich-luoi button.hom-nay { box-shadow: 0 0 0 1px var(--vang) inset; }
.lich-luoi button[aria-selected="true"] { background: var(--primary); color: #fff; font-weight: 700; }
.lich-c { display: flex; justify-content: space-between; gap: 6px; }
/* Menu thao tác thu gọn */
.nut-tt { width: 32px; height: 32px; display: inline-grid; place-items: center; border: 1px solid var(--border-light); background: var(--surface); border-radius: 6px; cursor: pointer; color: var(--text-2); }
.nut-tt:hover, .nut-tt[aria-expanded="true"] { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.menu-tt { position: fixed; z-index: 90; min-width: 180px; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 4px; display: grid; }
.menu-tt button { display: flex; gap: 10px; align-items: center; border: 0; background: none; padding: 9px 10px; border-radius: 6px; cursor: pointer; text-align: left; font-size: 13.5px; }
.menu-tt button:hover, .menu-tt button:focus-visible { background: var(--primary-light); }
.menu-tt button.nguy { color: var(--err); }
.menu-tt hr { border: 0; border-top: 1px solid var(--border-light); margin: 4px 0; }
/* Ô chọn nhanh có gợi ý (người giới thiệu) */
.cb { position: relative; }
.cb-ds { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--r); box-shadow: var(--shadow-lg); max-height: 260px; overflow-y: auto; padding: 4px; }
.cb-ds button { display: flex; width: 100%; gap: 8px; align-items: center; border: 0; background: none; padding: 8px 10px; border-radius: 6px; cursor: pointer; text-align: left; font-size: 13.5px; }
.cb-ds button:hover, .cb-ds button.dang { background: var(--primary-light); }
.cb-ds button span { margin-left: auto; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.cb-ds .them { color: var(--primary); font-weight: 600; border-top: 1px solid var(--border-light); border-radius: 0; }
/* Biểu đồ hai tầng */
.bieu-tang { position: relative; }
.bieu-tang h3 { font-size: 12.5px; font-weight: 600; color: var(--text-2); display: flex; gap: 8px; align-items: baseline; }
.bieu-tang h3 span { font-weight: 400; color: var(--text-3); }
.bd-tip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--border-light); box-shadow: var(--shadow-lg); border-radius: 6px; padding: 6px 10px; font-size: 12.5px; white-space: nowrap; transform: translateX(-50%); }
.bd-tip b { font-variant-numeric: tabular-nums; }
/* =====================================================================
   KHUNG ỨNG DỤNG theo mockup v9 (L21, L23) — viết trên đúng lớp của
   Qlts.master (.sidebar / .nav-item / .topbar / .user-chip) để hành vi cũ của
   qlts.js (ngăn kéo, thu gọn, vạch chờ) giữ nguyên.
   ===================================================================== */
:root {
  --sidebar-bg: #eef1f5; --sidebar-text: #334155; --sidebar-muted: #64748b; --sidebar-hover: rgba(15,23,42,.06);
  --sb-manh: #0f172a; --sb-chon: var(--primary); --sb-duong: rgba(15,23,42,.09); --sb-nen-chon: #ffffff;
}
:root[data-theme="dark"] {
  --sidebar-bg: #121820; --sidebar-text: #a8b4c4; --sidebar-muted: #6b7788; --sidebar-hover: rgba(255,255,255,.05);
  --sb-manh: #ffffff; --sb-chon: #ffffff; --sb-duong: rgba(255,255,255,.08); --sb-nen-chon: rgba(255,255,255,.08);
}
.sidebar { background: var(--sidebar-bg) !important; background-image: none !important; color: var(--sidebar-text); box-shadow: none; }
@media (min-width: 1024px) {
  .sidebar { border-right: 1px solid var(--sb-duong); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
}
.sidebar-brand { padding: 18px 12px 14px 18px; border-bottom: 1px solid var(--sb-duong); gap: 10px; }
.sidebar .brand-mark { width: 40px; flex: 0 0 40px; }
.sidebar .brand-text strong { color: var(--sb-manh); font-size: 14px; letter-spacing: .03em; text-transform: uppercase; }
.sidebar .brand-text span { color: var(--sidebar-muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
@media (min-width: 1024px) {
  .sidebar-thu { border: 0; background: none; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 6px; color: var(--sidebar-muted); }
  .sidebar-thu:hover { background: var(--sidebar-hover); color: var(--sb-manh); border: 0; }
}
.sidebar-dong { color: var(--sidebar-muted); }
.sidebar-nav { padding: 0 10px 10px; gap: 0; flex: 1; }
.sidebar .nav-group { margin: 12px 0 2px; padding: 0 10px 6px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; color: var(--sidebar-muted); }
.sidebar .nav-item { color: var(--sidebar-text); margin: 0; border-radius: 6px; min-height: 36px; padding: 0 10px; font-size: 13.5px; font-weight: 500; gap: 10px; box-shadow: none; }
.sidebar .nav-item i { color: inherit; opacity: .85; width: 18px; font-size: 14px; }
.sidebar .nav-item:hover { background: var(--sidebar-hover); color: var(--sb-manh); }
.sidebar .nav-item.active, .sidebar-nav a.dang-mo { background: var(--sb-nen-chon); color: var(--sb-chon); font-weight: 600; box-shadow: var(--shadow-sm); }
.sidebar .nav-item.active i { color: inherit; opacity: 1; }
.sidebar .nav-item.active::before { content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--vang); }
.sidebar-chan { margin-top: auto; padding: 12px 18px; font-size: 11.5px; line-height: 1.4; color: var(--sidebar-muted); border-top: 1px solid var(--sb-duong); }
@media (min-width: 1024px) {
  .sidebar.thu-gon .sidebar-brand { flex-direction: column; gap: 8px; }
  .sidebar.thu-gon .brand-mark { display: block; width: 36px; flex: 0 0 auto; }
  .sidebar.thu-gon .sidebar-thu { transform: none; }
  .sidebar.thu-gon .sidebar-chan { display: none; }
  .sidebar.thu-gon .nav-item.active::before { left: -10px; }
}

/* Thanh đầu trang: tiêu đề, tab của màn, tìm, giao diện, chuông, người dùng */
.topbar { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-bottom: 1px solid var(--border-light); }
.topbar h1 { font-size: 17px; font-weight: 700; }
.topbar h1 i { display: none; }
.topbar .tab-top { margin-left: var(--k2); }
.tab-top a { border: 0; background: none; padding: 5px 12px; border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--text-2); white-space: nowrap; text-decoration: none; }
.tab-top a[aria-selected="true"] { background: var(--surface); color: var(--primary); font-weight: 600; box-shadow: var(--shadow-sm); }
.tab-top-duoi { display: none; align-self: flex-start; }
@media (max-width: 767px) { .topbar .tab-top { display: none; } .tab-top-duoi { display: inline-flex; } }
a.user-chip { color: inherit; text-decoration: none; background: none; padding: 2px 6px 2px 2px; border-radius: 8px; cursor: pointer; }
a.user-chip:hover { background: var(--primary-light); }
.user-chip .avatar { background: var(--primary-light); color: var(--primary); width: 32px; height: 32px; flex: 0 0 32px; font-size: 12px; }
.user-chip .who span { color: var(--text-3); font-size: 12px; }
@media (min-width: 768px) { a.user-chip { background: none; padding: 2px 6px 2px 2px; } }

/* Vùng nội dung theo mockup: lề 16px (24px từ 1024px), khoảng cách 16px */
.content { gap: var(--k4); padding: var(--k4); padding-bottom: calc(var(--tabbar-h) + var(--an-toan-duoi) + var(--k4)); }
@media (min-width: 1024px) { .content { padding: var(--k5); padding-bottom: var(--k5); } }
.content:has(.khung-ds) { padding-bottom: calc(var(--tabbar-h) + var(--an-toan-duoi) + var(--k4)); }
@media (min-width: 1024px) { .content:has(.khung-ds) { padding-bottom: var(--k5); } }

/* Menu Thao tác đặt trong trang (server vẽ sẵn các mục) */
.tt { display: inline-block; position: relative; }
/* Ô đang mở menu ⋯ nổi trên các ô ghim (sticky) của dòng dưới và dòng tiêu đề (qlts-v2.js — báo lỗi 25/09). */
.tbl td.tt-mo, .tbl th.tt-mo, .the-dong.tt-mo { z-index: 60 !important; }   /* thắng z-index riêng của ô ghim từng màn */
.the-dong.tt-mo { position: relative; }
.menu-tt a { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 6px; text-align: left; font-size: 13.5px; color: var(--text); text-decoration: none; }
.menu-tt a:hover, .menu-tt a:focus-visible { background: var(--primary-light); }
.menu-tt form { display: contents; }
.menu-tt i { width: 16px; text-align: center; color: var(--text-3); }
.menu-tt .nguy i { color: var(--err); }
.nut-tt i, .nut-lich i { font-size: 14px; }
.o-ngay { width: 100%; }
/* Hộp thoại mở bằng tham số URL */
.phu[data-dong] { cursor: default; }
.hop-h .dong-hop { margin-left: auto; }
body.khoa-cuon { overflow: hidden; }

/* Tương thích lớp nút cũ (.btn-primary / .btn-danger / .btn-sm) cho các màn chưa đổi markup:
   .btn của mockup nạp sau và cùng độ ưu tiên nên sẽ đè màu nền của chúng. */
.btn.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); color: #fff; }
.btn.btn-danger { background: var(--err); border-color: var(--err); color: #fff; }
.btn.btn-ghost-danger { color: var(--err); border-color: var(--err-bd); }
.btn.btn-sm { height: 32px; padding: 0 10px; font-size: 12.5px; }

/* Thanh bên rộng 236px như mockup. */
@media (min-width: 1024px) { .sidebar:not(.thu-gon) { --sidebar-w: 236px; width: 236px; flex-basis: 236px; } .sidebar.thu-gon { --sidebar-w: 68px; width: 68px; flex-basis: 68px; } }


/* qlts.css viết hoa nhãn ô và tiêu đề cột; mockup v9 không viết hoa. */
.field > label, .field > .nhan, .tbl th, table.tbl thead th { text-transform: none; letter-spacing: normal; }


/* Bảng: qlts.css dùng "table.tbl th/td" (mạnh hơn .tbl) — đưa về đúng mockup v9. */
table.tbl th { background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: 600; letter-spacing: normal; text-transform: none; padding: 9px 12px; border-bottom: 1px solid var(--border-light); }
table.tbl td { padding: 8px 12px; height: auto; background: var(--surface); border-bottom: 1px solid var(--border-light); }
table.tbl tbody tr:nth-child(even) td, table.tbl tbody tr:nth-child(even) td.ghim { background: var(--surface); }
@media (hover: hover) and (pointer: fine) { table.tbl tbody tr:hover td, table.tbl tbody tr:hover td.ghim { background: var(--primary-light); } }
table.tbl tr.loi td { background: var(--err-bg); }
table.tbl tr.khoa td { background: var(--warn-bg); }
table.tbl tr.capnhat td { background: var(--info-bg); }
table.tbl tr.vua-them td { background: var(--new-bg); }
@media (min-width: 1024px) { .field > label, .field label { text-transform: none; letter-spacing: normal; } }

/* Thuộc tính của qlts.css mà mockup không khai nên không bị đè. */
.chip { min-height: 0; font-weight: 400; color: var(--text); }
.chip[aria-pressed="true"], .chip.on { color: #fff; }
table.tbl td.no, table.tbl .no { color: var(--err); }
table.tbl td.du, table.tbl .du { color: var(--ok); }
table.tbl td.muted, table.tbl .muted { color: var(--text-3); }

/* qlts.css: ".phu" là chữ phụ xám 12px — không được áp lên lớp phủ hộp thoại. */
div.phu { color: var(--text); font-size: 14px; }
/* ".input, .select { background: … }" của mockup xóa mất mũi tên của ô chọn. */
select.select, select.input { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.6' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 11px; padding-right: 32px; }
/* Thẻ danh sách (<768px) đúng mockup: không vạch màu, không đổ bóng khi rê. */
.the-dong { border: 1px solid var(--border-light); border-radius: var(--r); box-shadow: none; padding: var(--k3); background: var(--surface); }
.the-dong::before { content: none; display: none; }
.the-dong:hover, .the-dong.bam:hover { box-shadow: none; background-image: none; border-color: var(--border-light); }

/* .content là cột flex tự cuộn: khối con không được co lại (mất phần dưới của thẻ). */
.content > .card, .content > section, .content > .stat-grid, .content > .tq-luoi, .content > .hai-cot, .content > .dai, .content > .toolbar { flex-shrink: 0; }


/* Tên trung tâm trên thanh bên giữ một dòng như mockup. */
.sidebar .brand-mark { width: 38px; flex: 0 0 38px; }
.sidebar .brand-text { min-width: 0; }
.sidebar .brand-text strong, .sidebar .brand-text span { white-space: nowrap; }
.sidebar .brand-text span { letter-spacing: .05em; font-size: 10.5px; }


/* v10 (26/09): giảm lề vùng nội dung ĐỒNG BỘ mọi màn — hiện được nhiều dữ liệu hơn.
   Lề ngoài 8px (điện thoại) / 12px (từ 1024px), khoảng cách giữa khối 10px, lề trong thẻ gọn lại. */
.content { gap: 10px; padding: 8px; padding-bottom: calc(var(--tabbar-h) + var(--an-toan-duoi) + 8px); }
.content:has(.khung-ds) { padding-bottom: calc(var(--tabbar-h) + var(--an-toan-duoi) + 8px); }
@media (min-width: 1024px) {
  .content, .content:has(.khung-ds) { padding: 12px; padding-bottom: 12px; }
}
.card-h { padding: 10px 14px; }
.card-b { padding: 12px 14px; }
.hop-b { padding: 14px; gap: 14px; }
.cd-noi { padding: 14px; gap: 14px; }
@media (min-width: 900px) { .cd-noi { padding: 16px 18px; } }
.sidebar .brand-text strong { font-size: 15px; }
.sidebar-chan { line-height: 1.5; }


/* =====================================================================
   v11 (27/09): THANH BÊN VỪA MỘT MÀN LAPTOP 1366×768 (vùng nhìn ~650px).
   Theo Carbon UI shell: mục 32px cho giao diện dày, 40–48px cho giao diện
   thoáng; menu chia nhóm; logo và chân cố định, CHỈ vùng menu cuộn — và chỉ
   cuộn khi thật sự thiếu chỗ (dự phòng, không phải trạng thái thường).
     - mục menu 34px; 30px khi màn thấp (≤ 820px); 28px khi rất thấp (≤ 620px)
     - tiêu đề nhóm 10.5px, lề trên 8–10px, lề dưới 2–3px
     - khối logo ~56px, chân một dòng căn giữa
   Ngăn kéo di động dùng cùng khung cột (logo + chân đứng yên, menu cuộn) nhưng
   GIỮ cỡ chạm lớn của qlts.css — cỡ gọn chỉ áp từ 1024px.
   ===================================================================== */
.sidebar { display: flex; flex-direction: column; overflow: hidden; }
.sidebar-brand, .sidebar-chan { flex: 0 0 auto; }
.sidebar-nav {
  flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--sb-duong) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--sb-duong); border-radius: 3px; }
.sidebar-nav:hover::-webkit-scrollbar-thumb { background: var(--sidebar-muted); }
.sidebar-chan {
  margin-top: 0; padding: 8px 12px; text-align: center; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-size: 11px; line-height: 1.4;
}
@media (min-width: 1024px) {
  .sidebar { height: 100vh; height: 100dvh; }
  .sidebar-brand { min-height: 56px; padding: 8px 10px 8px 16px; box-sizing: border-box; }
  .sidebar-nav { padding: 4px 10px 6px; }
  .sidebar .nav-group { margin: 10px 0 3px; padding: 0 10px; font-size: 10.5px; line-height: 1.3; }
  .sidebar .nav-item { min-height: 34px; height: 34px; line-height: 1.2; }
  .sidebar .nav-item > span:not(.vach-cho) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar .nav-item.active::before { top: 7px; bottom: 7px; }
  /* Thu gọn 68px: tiêu đề nhóm và chân đã ẩn (qlts.css / trên) — khối logo gọn lại theo. */
  .sidebar.thu-gon .sidebar-brand { padding: 8px 0; gap: 6px; }
}
/* 27/09: menu 16 mục (thêm Thu chi khác) vẫn không phải cuộn ở 1366×657 — mục 29px. */
@media (min-width: 1024px) and (max-height: 820px) {
  .sidebar-brand { min-height: 52px; }
  .sidebar-nav { padding-top: 2px; padding-bottom: 4px; }
  .sidebar .nav-item { min-height: 29px; height: 29px; font-size: 13px; }
  .sidebar .nav-item i { font-size: 13.5px; }
  .sidebar .nav-group { margin: 8px 0 2px; }
  .sidebar .nav-item.active::before { top: 6px; bottom: 6px; }
}
/* 06/10: menu 17 mục (thêm Doanh thu) — laptop 1366×768 (khung nhìn ~657px) vẫn không phải cuộn: mục 27px. */
@media (min-width: 1024px) and (max-height: 700px) {
  .sidebar .nav-item { min-height: 27px; height: 27px; }
  .sidebar .nav-group { margin: 6px 0 2px; }
  .sidebar .nav-item.active::before { top: 5px; bottom: 5px; }
}
/* Màn rất thấp (cửa sổ thu nhỏ, máy chiếu 1024×600…): gọn thêm một bậc trước khi phải cuộn. */
@media (min-width: 1024px) and (max-height: 620px) {
  .sidebar-brand { min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
  .sidebar .nav-item { min-height: 26px; height: 26px; }
  .sidebar .nav-group { margin: 5px 0 2px; }
  .sidebar-chan { padding: 6px 12px; }
}

/* Tiền nộp dư (cột "Dư" — 26/09) */
.tien-du { color: var(--primary); }

/* ===== Thanh lọc gọn (26/09) — máy tính: tìm · bộ lọc · Excel ▾ / Thêm trên một hàng; điện thoại: hàng 1 ô tìm + nút
   biểu tượng, hàng 2 bộ lọc cuộn ngang. Mẫu: .card-h.gon > .tb-gon > .o-tim + .tb-loc + .tb-nut ===== */
.card-h.gon { padding: 8px 12px; }
.tb-gon { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 100%; min-width: 0; margin: 0; }
.tb-gon .input, .tb-gon .select, .tb-gon .btn { height: 36px; min-height: 36px; }
.tb-gon .input, .tb-gon .select { font-size: 13.5px; }
.tb-gon .btn { padding: 0 12px; }
.tb-gon .o-tim { flex: 1 1 200px; min-width: 160px; max-width: 360px; margin: 0; }
.tb-gon .tb-loc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.tb-gon .tb-loc form { display: contents; }
.tb-gon .tb-loc .select { width: auto; min-width: 0; max-width: 180px; text-overflow: ellipsis; }
.tb-gon .tb-loc .chip-nhom { flex-wrap: nowrap; gap: 6px; }
.tb-gon .tb-loc .chip { height: 32px; min-height: 32px; white-space: nowrap; }
.tb-gon .tb-loc .nhan-loc { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.tb-gon .tb-nut { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.tt-excel { display: inline-block; position: relative; }
.btn.nut-excel { display: inline-flex; flex-direction: row; align-items: center; justify-content: center; width: auto; height: 36px; padding: 0 12px; gap: 7px; border-color: var(--border); background: var(--surface); color: var(--text); font-weight: 600; line-height: 1; }
.btn.nut-excel .fa-file-excel { color: var(--ok); font-size: 15px; line-height: 1; }
.btn.nut-excel .chu { line-height: 1; }
.btn.nut-excel .fa-chevron-down { font-size: 10px; color: var(--text-3); margin-left: 1px; }
/* Nút "+ Thêm" gọn (26/09): cùng cao / đệm với nút Excel ▾ */
.tb-gon .btn.nut-them { display: inline-flex; align-items: center; gap: 7px; padding: 0 14px; line-height: 1; }
@media (max-width: 767px) {
  .card-h.gon { padding: 8px 10px; }
  .tb-gon { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .tb-gon .o-tim { grid-column: 1; grid-row: 1; max-width: none; min-width: 0; }
  .tb-gon .tb-nut { grid-column: 2; grid-row: 1; margin-left: 0; }
  .tb-gon .tb-nut .chu { display: none; }
  .tb-gon .tb-nut .btn { padding: 0 11px; }
  .tb-gon .tb-nut .fa-chevron-down { display: none; }
  .tb-gon .tb-loc { grid-column: 1 / -1; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -10px; padding: 0 10px 2px; }
  .tb-gon .tb-loc::-webkit-scrollbar { display: none; }
  .tb-gon .tb-loc > *, .tb-gon .tb-loc .select, .tb-gon .tb-loc .chip, .tb-gon .tb-loc .chip-nhom { flex: none; }
  .tb-gon .tb-loc .select { max-width: 160px; }
}

/* ===== Chân bảng gọn (26/09): đếm + trang sát nhau, ít đệm trên dưới; điện thoại bỏ ô "Hiển thị … / trang" ===== */
.card .pager, .pager { padding: 6px 12px !important; gap: 6px 12px; min-height: 0; }
/* !important: CSS riêng từng màn (hoc-vien.css, tai-chinh.css…) nạp sau và đặt nút trang 32px. */
.card .pager .trang a, .card .pager a.nut-trang, .card .pager .trang button, .card .pager .trang a.btn { min-width: 28px !important; height: 28px !important; min-height: 28px !important; }
.pager .chon-so-dong .select { height: 28px !important; min-height: 28px; }
@media (max-width: 767px) {
  .card .pager, .pager { flex-wrap: nowrap; padding: 6px 10px !important; }
  .pager .chon-so-dong { display: none !important; }
}
/* ===== Ảnh đại diện + menu tài khoản (26/09, bậc 19) =====
   span.avatar: chữ cái viết tắt, hoặc .co-anh > img (ảnh JPEG vuông do máy chủ vẽ lại). Cỡ: mặc định 32px ở thanh trên,
   .nho 26px (danh sách tài khoản), .lon 48px (đầu menu), .xl 88px (Tài khoản của tôi). */
.avatar.co-anh { padding: 0; overflow: hidden; background: var(--surface-2); }
.avatar.co-anh img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar.nho { width: 26px; height: 26px; flex: 0 0 26px; font-size: 10.5px; background: var(--primary-light); color: var(--primary); }
.avatar.lon { width: 48px; height: 48px; flex: 0 0 48px; font-size: 16px; background: var(--primary-light); color: var(--primary); }
.avatar.xl { width: 88px; height: 88px; flex: 0 0 88px; font-size: 28px; background: var(--primary-light); color: var(--primary); box-shadow: 0 0 0 3px var(--surface), 0 0 0 4px var(--border-light); }
.avatar.lon.vt-owner:not(.co-anh) { background: color-mix(in srgb, var(--vang) 22%, #fff); color: var(--vang-dam); }
.avatar.co-anh.nho, .avatar.co-anh.lon, .avatar.co-anh.xl { background: var(--surface-2); }
.tk-ten { display: inline-flex; align-items: center; gap: 8px; }

/* Nút mở menu: cùng dáng ô người dùng cũ, thêm mũi tên */
.tk-menu { position: relative; flex: none; }
button.user-chip { font: inherit; color: inherit; border: 0; background: none; margin: 0; padding: 2px 8px 2px 2px; border-radius: 999px; cursor: pointer; text-align: left; }
button.user-chip:hover, button.user-chip[aria-expanded="true"] { background: var(--primary-light); }
button.user-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.user-chip .avatar.co-anh { background: var(--surface-2); }
.user-chip .mui-tk { font-size: 10px; color: var(--text-3); margin-left: 2px; transition: transform .15s; }
.user-chip[aria-expanded="true"] .mui-tk { transform: rotate(180deg); }
@media (max-width: 767px) {
  button.user-chip { padding: 2px; }
  .user-chip .mui-tk { display: none; }
}

/* Menu thả xuống */
.menu-tk { position: absolute; right: 0; top: calc(100% + 8px); z-index: 90; width: 288px; max-width: calc(100vw - 16px); padding: 6px; background: var(--surface); border: 1px solid var(--border-light); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .06); }
.menu-tk[hidden] { display: none; }
.menu-tk-dau { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border-light); }
.menu-tk-ten { min-width: 0; display: grid; gap: 1px; line-height: 1.3; }
.menu-tk-ten b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-tk-ten .ma { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-tk-ten .vt { font-size: 12px; color: var(--text-2); }
.menu-tk a, .menu-tk button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 8px 10px; margin: 0; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 13.5px; text-align: left; text-decoration: none; cursor: pointer; }
.menu-tk a > i, .menu-tk button > i { width: 18px; text-align: center; font-size: 14px; color: var(--text-3); flex: none; }
.menu-tk a:hover, .menu-tk button:hover, .menu-tk a:focus-visible, .menu-tk button:focus-visible { background: var(--primary-light); color: var(--primary); outline: none; }
.menu-tk a:hover > i, .menu-tk button:hover > i, .menu-tk a:focus-visible > i, .menu-tk button:focus-visible > i { color: var(--primary); }
.menu-tk .nguy { color: var(--err); }
.menu-tk .nguy > i { color: var(--err); }
.menu-tk .nguy:hover, .menu-tk .nguy:focus-visible { background: var(--err-bg); color: var(--err); }
.menu-tk .nguy:hover > i, .menu-tk .nguy:focus-visible > i { color: var(--err); }
.menu-tk hr { border: 0; border-top: 1px solid var(--border-light); margin: 6px 0; }
.menu-tk form { margin: 0; }
/* Công tắc "Giao diện tối" */
.menu-tk .cong-nho { margin-left: auto; width: 32px; height: 18px; border-radius: 9px; background: var(--border); position: relative; flex: none; transition: background .15s; }
.menu-tk .cong-nho::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: left .15s; }
.menu-tk [aria-checked="true"] .cong-nho { background: var(--primary); }
.menu-tk [aria-checked="true"] .cong-nho::after { left: 16px; }
@media (max-width: 767px) {
  .menu-tk { position: fixed; top: calc(var(--topbar-h, 56px) + env(safe-area-inset-top, 0px) + 4px); right: 8px; }
  .menu-tk a, .menu-tk button { min-height: 44px; }
}

/* Tài khoản của tôi → Ảnh đại diện */
.dong-cd.anh-dd { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.anh-dd-nut { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.anh-dd-nut form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.anh-dd-nut label.btn { cursor: pointer; }
.anh-dd-nut input[type="file"]:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Tiêu đề cột bấm để sắp (08/10 — SapXep.cs): tăng → giảm → mặc định; mũi tên mờ khi chưa sắp. */
.tbl th.sap > a { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; cursor: pointer; border-radius: 4px; }
.tbl th.sap > a i { font-size: 10px; color: var(--text-3); opacity: .45; transition: opacity .12s; }
.tbl th.sap > a:hover { color: var(--primary); }
.tbl th.sap > a:hover i { opacity: 1; color: var(--primary); }
.tbl th.sap[aria-sort] { color: var(--text); }
.tbl th.sap[aria-sort] > a i { opacity: 1; color: var(--primary); }
.tbl th.sap > a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.select.o-sap { width: auto; max-width: 100%; }
@media (prefers-reduced-motion: reduce) { .tbl th.sap > a i { transition: none; } }

/* Hải Đăng 12/10 — Cài đặt → Chung → Trung tâm: tên văn phòng / hình thức chỉ hiện khi bật Văn phòng riêng. */
.nhom-cd:has(input[name="vpBat"]:not(:checked)) .vp-rieng { display: none; }