/* ══ BẢNG MÀU CHUNG ═══════════════════════════════════════════════════════
   Nền xanh xám nhạt, thanh điều hướng navy đậm. Dịu mắt hơn xanh Bootstrap
   mặc định, và các con số vẫn nổi vì nền thẻ trắng tinh.                    */
:root{
  --bg-nav:#123a5e; --bg-nav-2:#0d2c48;
  --bg-page:#eef1f5; --bg-card:#ffffff; --bg-soft:#f5f7fa;
  --ink:#1c2b3a; --ink-2:#4a5a6b; --ink-mut:#5f6d7c;
  --line:#dde3ea; --line-2:#e9edf2;
  --brand:#1b5386; --brand-2:#154068;
  --font-ui:'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-so:'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
}
body { background:var(--bg-page); color:var(--ink);
  font-family:var(--font-ui); font-size:14px; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6,.navbar-brand{ font-family:var(--font-ui); font-weight:600; letter-spacing:-.01em; }
.btn,.form-control,.form-select,.nav-link,.badge,label,table{ font-family:var(--font-ui); }
/* Số tiền xếp thẳng cột: chữ số đều bề ngang, hàng nghìn thẳng hàng nhau. */
table td, table th, .mono, .n, input[inputmode="numeric"], input[inputmode="decimal"]{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.mono{ font-family:var(--font-so); }
.navbar.bg-primary, .navbar.bg-dark{ background:var(--bg-nav) !important; }
.navbar-dark .navbar-nav .nav-link{ color:#c8d6e4; }
.navbar-dark .navbar-nav .nav-link:hover{ color:#fff; }
.navbar-dark .navbar-nav .nav-link.active{ color:#fff; }
.navbar-brand{ color:#fff !important; }
.dropdown-menu{ border-color:var(--line); }

.card, .list-group-item{ background:var(--bg-card); border-color:var(--line); }
.table{ --bs-table-color:var(--ink); }
.table > :not(caption) > * > *{ border-color:var(--line-2); }
.table-light > :not(caption) > * > *{ background:var(--bg-soft); color:var(--ink-2); }
.table-bordered > :not(caption) > * > *{ border-color:var(--line); }
.border{ border-color:var(--line) !important; }
.text-muted{ color:var(--ink-mut) !important; }

.btn-primary{ background:var(--brand); border-color:var(--brand); }
.btn-primary:hover, .btn-primary:focus{ background:var(--brand-2); border-color:var(--brand-2); }
.btn-outline-primary{ color:var(--brand); border-color:var(--brand); }
.btn-outline-primary:hover{ background:var(--brand); border-color:var(--brand); }
a{ color:var(--brand); }
a:hover{ color:var(--brand-2); }
.text-primary{ color:var(--brand) !important; }
.nav-pills .nav-link{ color:var(--ink-2); }
.nav-pills .nav-link:hover{ background:#e3e9f0; color:var(--brand-2); }
.nav-pills .nav-link.active{ background:var(--brand); }
.form-control:focus, .form-select:focus{
  border-color:#8fb2d0; box-shadow:0 0 0 .2rem rgba(27,83,134,.15); }
.table-primary{ --bs-table-bg:#dfe9f3; }
.badge.bg-primary{ background:var(--brand) !important; }

.navbar-brand { letter-spacing:.5px; }
.nav-link.disabled { color:rgba(255,255,255,.55) !important; cursor:default; }
main { min-height:70vh; }

/* Tổng Hợp KHĐX */
.th-table { font-size:12px; white-space:nowrap; }
.th-table thead th { position:sticky; background:#e8eef7; z-index:2; }
.th-table thead tr:first-child th.grp { top:0; background:#c9d6ea; font-weight:600; }
.th-table thead tr:nth-child(2) th.lbl { top:31px; }
.th-table td { padding:.2rem .4rem; }
/* Màu dòng KHĐX theo TRẠNG THÁI CHỨNG TỪ (không phải số lần sửa nữa).
   Vàng = đã nộp nhưng chưa đủ · xanh = đã xác nhận đủ · trắng = chưa nộp gì. */
tr.ct-thieu td { background:#fdf4e0 !important; }
tr.ct-du    td { background:#eaf6ef !important; }
span.ct-thieu { background:#fdf4e0; }
span.ct-du    { background:#eaf6ef; }
.editrow{cursor:pointer}.editrow:hover td{outline:1px solid #0d6efd}

@media print {
  html, body { background:#fff !important; }
  .navbar, .noprint, form { display:none !important; }
  .border { border:none !important; }
  main { padding:0 !important; }
}

/* ══ BÁO CÁO XE THẾ HỆ 2 ══════════════════════════════════════════════════ */
:root{
  --bcx-s1:#2a78d6; --bcx-s2:#eb6834; --bcx-s3:#1baf7a; --bcx-s4:#eda100; --bcx-s5:#e87ba4;
  --bcx-pos:#2a78d6; --bcx-neg:#d03b3b;
  /* Xanh "lãi" nền sáng: #0ca30c cũ chỉ đạt 3,1 tương phản trên nền bảng —
     đo được, không phải đoán. Số tiền lãi bồn dầu mà mờ thì bằng không có.
     #127a29 đạt 5,1 trên panel và 4,8 trên dòng đậm nhất. */
  --bcx-good:#127a29; --bcx-warn:#fab219; --bcx-ser:#ec835a; --bcx-crit:#d03b3b;
  /* #6b7a89 đo được 4,40 trên nền trắng — trượt chuẩn 4,5 đúng một chút.
     #5f6d7c đạt 5,30 mà vẫn nhạt hơn hẳn --bcx-ink2, không phá thứ bậc. */
  --bcx-ink:#1c2b3a; --bcx-ink2:#4a5a6b; --bcx-muted:#5f6d7c;
  --bcx-rule:#dde3ea; --bcx-rule2:#e9edf2; --bcx-panel:#fff; --bcx-panel2:#f5f7fa;
  --bcx-acc:#1b5386; --bcx-acc-soft:#e4ecf4;
  --bcx-grid:#e6ebf1; --bcx-axis:#c3ccd6;
}
.bcx{ color:var(--bcx-ink); }
.bcx .mono,.bcx .n{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum"; }
.bcx .n{ text-align:right; white-space:nowrap; }

/* thanh chứng từ trên đầu màn */
.bcx-dock{ display:flex; flex-wrap:wrap; border:1px solid var(--bcx-rule); border-radius:4px;
  overflow:hidden; background:var(--bcx-panel); margin-bottom:12px; }
.bcx-dock .dk{ padding:6px 14px; border-right:1px solid var(--bcx-rule2); min-width:0; }
.bcx-dock .dk:last-child{ border-right:0; }
.bcx-dock label{ display:block; font-size:9.5px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--bcx-muted); font-weight:600; margin:0 0 1px; }
.bcx-dock .val{ font-size:14px; font-weight:500; font-variant-numeric:tabular-nums; }
.bcx-dock .dk.flag .val{ color:#a8710a; font-weight:600; }

/* dải chỉ số */
.bcx-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(152px,1fr)); gap:0;
  background:var(--bcx-panel); border:1px solid var(--bcx-rule); border-radius:4px; overflow:hidden; }
.bcx-kpi{ padding:10px 13px 11px; border-right:1px solid var(--bcx-rule2); }
.bcx-kpi:last-child{ border-right:0; }
.bcx-kpi .k{ display:block; font-size:9.5px; font-weight:600; letter-spacing:.11em;
  text-transform:uppercase; color:var(--bcx-muted); margin-bottom:2px; }
.bcx-kpi .v{ font-size:19px; font-weight:600; letter-spacing:-.02em; line-height:1.15;
  font-variant-numeric:tabular-nums; }
.bcx-kpi .s{ display:block; font-size:11px; color:var(--bcx-ink2); margin-top:2px; }
.bcx-kpi.xau{ background:#fbeaea; } .bcx-kpi.xau .v{ color:var(--bcx-crit); }
.bcx-up{ color:var(--bcx-good); } .bcx-down{ color:var(--bcx-crit); }

/* tiêu đề mục */
.bcx-sh{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  border-bottom:1.5px solid var(--bcx-ink); padding-bottom:5px; margin:20px 0 9px; }
.bcx-sh h2{ font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin:0; }
.bcx-sh .sub{ font-size:12px; color:var(--bcx-muted); }
.bcx-sh .rt{ margin-left:auto; font-size:11.5px; color:var(--bcx-muted); }
.bcx-p{ background:var(--bcx-panel); border:1px solid var(--bcx-rule); border-radius:4px; padding:12px 14px; }

/* cảnh báo */
.bcx-cb{ display:flex; gap:10px; padding:8px 12px; border-radius:3px; border-left:3px solid;
  font-size:13px; align-items:flex-start; margin-bottom:6px; }
.bcx-cb .ic{ font-weight:700; font-size:10.5px; letter-spacing:.05em; flex:0 0 auto; margin-top:2px; }
.bcx-cb b{ font-weight:600; }
.bcx-cb i{ font-style:normal; color:var(--bcx-ink2); display:block; font-size:12.5px; margin-top:1px; }
.bcx-cb.nang{ background:#fbeaea; border-color:var(--bcx-crit); } .bcx-cb.nang .ic{ color:var(--bcx-crit); }
.bcx-cb.vua{  background:#fdf4e0; border-color:var(--bcx-warn); } .bcx-cb.vua .ic{ color:#8a6100; }
.bcx-cb.nhe{  background:#fdefe8; border-color:var(--bcx-ser); }  .bcx-cb.nhe .ic{ color:#a04b22; }
.bcx-cb.tot{  background:#e9f7e9; border-color:var(--bcx-good); } .bcx-cb.tot .ic{ color:#0a6b0a; }

/* bảng bậc thang */
.bcx-lad{ width:100%; border-collapse:collapse; font-size:13.5px; }
.bcx-lad td{ padding:5px 12px; border-bottom:1px solid var(--bcx-rule2); }
.bcx-lad td.n{ width:150px; } .bcx-lad td.p{ width:74px; text-align:right; color:var(--bcx-muted); font-size:12px; }
.bcx-lad tr.rev td{ background:var(--bcx-acc-soft); font-weight:700; font-size:12.5px; letter-spacing:.05em; }
.bcx-lad tr.rev td.n{ font-size:14.5px; }
.bcx-lad tr.grp td{ cursor:pointer; font-weight:600; font-size:12.5px; letter-spacing:.04em;
  background:var(--bcx-panel2); border-top:1px solid var(--bcx-rule); }
.bcx-lad tr.grp td:first-child{ box-shadow:inset 3px 0 0 var(--gc); }
.bcx-lad tr.grp td.n{ font-size:14px; font-weight:600; }
.bcx-lad tr.grp .car{ display:inline-block; width:11px; color:var(--bcx-muted); font-size:10px; }
.bcx-lad tr.sub td{ color:var(--bcx-ink2); font-size:12.5px; padding-left:32px; }
.bcx-lad tr.sub.z td{ color:var(--bcx-muted); }
.bcx-lad tr.step td{ font-weight:700; font-size:12.5px; letter-spacing:.05em;
  border-top:1.5px solid var(--bcx-ink); border-bottom:1.5px solid var(--bcx-ink); }
.bcx-lad tr.step td.n{ font-size:15px; }
.bcx-lad tr.chot td{ background:var(--bcx-acc-soft); }
.bcx-lad .ma{ display:inline-block; width:26px; font-size:10.5px; color:var(--bcx-muted); font-weight:500; }
.bcx-lad tr.an{ display:none; }
.bcx-dot{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:7px; vertical-align:-1px; }

/* bảng thường */
.bcx-tw{ overflow-x:auto; background:var(--bcx-panel); border:1px solid var(--bcx-rule); border-radius:4px; }
.bcx-tw table{ width:100%; border-collapse:collapse; font-size:13px; margin:0; }
.bcx-tw th{ font-size:10px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--bcx-muted); text-align:left; padding:7px 11px; border-bottom:1px solid var(--bcx-rule); white-space:nowrap; }
.bcx-tw th.n{ text-align:right; }
.bcx-tw td{ padding:5px 11px; border-bottom:1px solid var(--bcx-rule2); }
.bcx-tw tbody tr:last-child td{ border-bottom:0; }
.bcx-tw tbody tr:hover{ background:var(--bcx-panel2); }
.bcx-tw tr.tot td{ font-weight:600; border-top:1.5px solid var(--bcx-rule); background:var(--bcx-panel2); }

/* nhãn trạng thái */
.bcx-pill{ display:inline-block; font-size:10px; font-weight:600; letter-spacing:.05em;
  padding:2px 7px; border-radius:2px; text-transform:uppercase; }
.bcx-pill.ok{ background:#e9f7e9; color:#0a6b0a; }
.bcx-pill.lech{ background:#fbeaea; color:#8e2020; }
.bcx-pill.soat{ background:#fdf4e0; color:#8a6100; }
.bcx-pill.chua{ background:var(--bcx-panel2); color:var(--bcx-muted); }

/* Ô nhập ngay trong bảng — trông như con số cho tới khi bấm vào, để bảng vẫn
   đọc được như một bảng chứ không thành cái biểu mẫu đầy khung. */
.bcx-o{ width:100%; max-width:120px; border:1px solid transparent; background:transparent;
  border-radius:2px; padding:2px 5px; text-align:right; font-size:13px;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums;
  color:inherit; }
.bcx-o:hover{ border-color:var(--bcx-line); background:var(--bcx-panel2); }
.bcx-o:focus{ outline:none; border-color:#2a78d6; background:var(--bcx-panel);
  box-shadow:0 0 0 2px rgba(42,120,214,.15); }
.bcx-o::placeholder{ color:var(--bcx-muted); opacity:.55; }

.bcx-note{ font-size:12.5px; color:var(--bcx-ink2); margin-top:8px; }
.bcx-note b{ color:var(--bcx-ink); }
.bcx-hint{ font-size:12px; color:var(--bcx-muted); margin-top:6px; }
.bcx-legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--bcx-ink2); margin:2px 0 9px; }
.bcx-legend span{ display:flex; align-items:center; gap:6px; }
.bcx-sw{ display:flex; align-items:center; gap:9px; padding:7px 0;
  border-bottom:1px solid var(--bcx-rule2); font-size:13px; }
.bcx-sw:last-child{ border-bottom:0; } .bcx-sw .k{ flex:1; }

/* biểu đồ */
.bcx-chart{ width:100%; display:block; overflow:visible; }
.bcx-chart text{ fill:var(--bcx-muted); font-size:11px; }
.bcx-chart .lbl{ font-size:11px; fill:var(--bcx-ink2); font-variant-numeric:tabular-nums; }
.bcx-chart .tick{ font-size:10.5px; font-variant-numeric:tabular-nums; }
.bcx-chart .cat{ fill:var(--bcx-ink2); font-size:11.5px; }
.bcx-chart .mo{ font-size:10.5px; fill:var(--bcx-muted); }
.bcx-chart .ten{ font-size:11px; fill:var(--bcx-ink2); font-weight:500; }
.bcx-chart .tren{ font-size:10.5px; fill:#fff; font-weight:600; font-variant-numeric:tabular-nums; }
.bcx-chart .gl{ stroke:var(--bcx-grid); stroke-width:1; }
.bcx-chart .ax{ stroke:var(--bcx-axis); stroke-width:1; }
.bcx-chart .noi{ stroke:var(--bcx-axis); stroke-width:1; stroke-dasharray:3 3; }
.bcx-chart .cross{ stroke:var(--bcx-axis); stroke-width:1; }
.bcx-chart .cham{ stroke:var(--bcx-panel); stroke-width:2; }
.bcx-chart rect.duong{ fill:var(--bcx-pos); } .bcx-chart rect.am{ fill:var(--bcx-neg); }
.bcx-chart rect.mk{ transition:opacity .12s; }
.bcx-chart:hover rect.mk{ opacity:.62; } .bcx-chart rect.mk:hover{ opacity:1; }
#bcxTip{ position:fixed; z-index:1080; pointer-events:none; opacity:0; transition:opacity .1s;
  background:#123a5e; color:#e8eff6; border-radius:3px; padding:7px 10px; font-size:12px;
  box-shadow:0 4px 16px rgba(0,0,0,.28); max-width:280px; }
#bcxTip .t{ font-weight:600; margin-bottom:3px; }
#bcxTip .r{ display:flex; gap:12px; justify-content:space-between;
  font-size:11.5px; font-variant-numeric:tabular-nums; }
#bcxTip .r em{ font-style:normal; color:#8fa3a8; }
@media (prefers-reduced-motion:reduce){ .bcx *{ transition:none !important; } }


/* ═══ TĂNG CỠ CHỮ BÁO CÁO XE ══════════════════════════════════════════════════
   Anh Đoàn 04/09/2026: "cho thêm font chữ cho dễ nhìn 1 chút, nhỏ quá so với
   kích cỡ bảng". Bảng chiếm cả bề ngang màn hình mà chữ 13px thì loãng.
   Đặt CUỐI file để đè lên khai báo gốc — muốn trả lại như cũ thì xóa cả khối
   này, không phải mò sửa từng dòng ở trên. Chỉ đổi cỡ chữ và giãn dòng, KHÔNG
   đụng màu — bảng màu đã qua bộ kiểm màu.
   ═══════════════════════════════════════════════════════════════════════════ */
.bcx-kpi .k{ font-size:10.5px; }
.bcx-kpi .v{ font-size:22px; }
.bcx-kpi .s{ font-size:12px; }

.bcx-sh h2{ font-size:14.5px; }
.bcx-sh .sub{ font-size:13px; }
.bcx-sh .rt{ font-size:12.5px; }

.bcx-cb{ font-size:14px; }
.bcx-cb .ic{ font-size:11.5px; }
.bcx-cb i{ font-size:13.5px; }

.bcx-lad{ font-size:15px; }
.bcx-lad td{ padding:7px 13px; }
.bcx-lad td.n{ width:168px; }
.bcx-lad td.p{ width:82px; font-size:13px; }
.bcx-lad tr.rev td{ font-size:14px; }
.bcx-lad tr.rev td.n{ font-size:16.5px; }
.bcx-lad tr.grp td{ font-size:14px; }
.bcx-lad tr.grp td.n{ font-size:16px; }
.bcx-lad tr.sub td{ font-size:14px; padding-left:34px; }
.bcx-lad tr.step td{ font-size:14px; }
.bcx-lad tr.step td.n{ font-size:17px; }
.bcx-lad .ma{ font-size:11.5px; width:28px; }

.bcx-tw table{ font-size:14.5px; }
.bcx-tw th{ font-size:11.5px; padding:9px 12px; }
.bcx-tw td{ padding:7px 12px; }

.bcx-pill{ font-size:11px; }
.bcx-note{ font-size:13.5px; }
.bcx-hint{ font-size:13px; }
.bcx-legend{ font-size:13px; }

/* Lưới Theo chuyến / Tổng Hợp KHĐX: rất nhiều cột nên chỉ nhích nhẹ, tăng nhiều
   là vỡ hàng, phải cuộn ngang xa hơn. */
.th-table{ font-size:13px; }
.th-table td{ padding:.28rem .45rem; }
.th-table thead th.lbl{ font-size:12px; }

/* ═══ THANH TAB BÁO CÁO XE ═══════════════════════════════════════════════════
   Anh Đoàn 04/09/2026: "cho tôi các nút menu to hơn và thiết kế đẹp hơn."
   Thay nav-pills của Bootstrap. Ba điều quyết định chỗ này:
     · vùng bấm cao 38px — chuột không cần ngắm, tay quen là bấm trúng
     · tab đang mở dùng NỀN ĐẶC màu chủ đạo, không phải viền mờ — liếc là thấy
     · hai nhóm tách bằng vạch dọc: trái = việc hàng ngày, phải = khai báo một lần
   Icon để cỡ riêng (16px) vì emoji luôn trông nhỏ hơn chữ cùng cỡ.
   ══════════════════════════════════════════════════════════════════════════ */
.bcx-tabs{ display:flex; align-items:center; flex-wrap:wrap; gap:6px;
           margin:0 0 16px; padding:5px; border-radius:12px;
           background:#eef2f7; border:1px solid #e0e7ef; }
.bcx-tabs .nhom{ display:flex; align-items:center; flex-wrap:wrap; gap:4px; }
.bcx-tabs .vach{ width:1px; align-self:stretch; margin:3px 6px; background:#cfd9e4; }
.bcx-tab{ display:inline-flex; align-items:center; gap:7px;
          height:38px; padding:0 15px; border-radius:9px;
          font-size:14.5px; font-weight:600; letter-spacing:.01em;
          color:#41505f; text-decoration:none; white-space:nowrap;
          border:1px solid transparent; transition:background .12s, color .12s, box-shadow .12s; }
.bcx-tab .ic{ font-size:16px; line-height:1; }
.bcx-tab:hover{ background:#fff; color:#1b6fd0; border-color:#dce5ee;
                box-shadow:0 1px 2px rgba(16,32,48,.06); }
.bcx-tab.on{ background:#2a78d6; color:#fff; border-color:#2a78d6;
             box-shadow:0 2px 6px rgba(42,120,214,.32); }
.bcx-tab.on:hover{ background:#2a78d6; color:#fff; }
@media (max-width:720px){
  .bcx-tabs{ padding:4px; }
  .bcx-tab{ height:34px; padding:0 11px; font-size:13.5px; }
  .bcx-tabs .vach{ display:none; }
}

/* ═══ CHẾ ĐỘ TỐI ═════════════════════════════════════════════════════════════
   Anh Đoàn 05/09/2026: "Chuyển chế độ tối đi bạn."

   Nền tối KHÔNG phải nền sáng lật ngược. Ba luật giữ ở đây:
     ① Nền tối là XÁM ĐEN HƠI XANH, không phải đen tuyền — đen tuyền + chữ
        trắng gây loá và nhoè chữ khi đọc lâu (số tiền là thứ đọc lâu nhất).
     ② Chữ trắng phải NHẸ ĐI: #e8edf3 chứ không #ffffff, giảm quầng sáng.
     ③ Mọi màu chuỗi phải CHỌN LẠI cho nền tối (bậc màu riêng), không dùng
        nguyên bậc của nền sáng. Bậc tối đã chạy qua bộ kiểm màu trên nền thẻ
        #181d24: dải sáng đạt, sắc độ đạt, mù màu ΔE 8,4 (ngưỡng 8), mắt
        thường ΔE 19,3 (ngưỡng 15), tương phản cả 8 màu ≥ 3:1.

   Bootstrap 5.3 tự lo phần thành phần của nó qua `data-bs-theme`; ở đây chỉ
   khai lại bộ biến của app và mấy chỗ trót ghi mã màu cứng.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"]{
  --bg-nav:#101822; --bg-nav-2:#0a1119;
  --bg-page:#0f1318; --bg-card:#181d24; --bg-soft:#1f252e;
  --ink:#e8edf3; --ink-2:#b3bdc9; --ink-mut:#8794a3;
  --line:#2b333d; --line-2:#232a33;
  --brand:#6aa9ee; --brand-2:#8fc0f4;

  --bcx-s1:#256abf; --bcx-s2:#d95926; --bcx-s3:#199e70; --bcx-s4:#c98500; --bcx-s5:#d55181;
  --bcx-pos:#3987e5; --bcx-neg:#e66767;
  --bcx-good:#0ca30c; --bcx-warn:#fab219; --bcx-ser:#ec835a; --bcx-crit:#e05a5a;
  --bcx-ink:#e8edf3; --bcx-ink2:#b3bdc9; --bcx-muted:#8794a3;
  --bcx-rule:#2b333d; --bcx-rule2:#232a33; --bcx-panel:#181d24; --bcx-panel2:#1f252e;
  --bcx-acc:#6aa9ee; --bcx-acc-soft:#1c2b3d;
  --bcx-grid:#262e38; --bcx-axis:#3a444f;
}

[data-bs-theme="dark"] body{ background:var(--bg-page); color:var(--ink); }
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .list-group-item{ background:var(--bg-card); border-color:var(--line); }
[data-bs-theme="dark"] .nav-pills .nav-link:hover{ background:#212a35; color:var(--brand-2); }
[data-bs-theme="dark"] .table-primary{ --bs-table-bg:#1c2b3d; --bs-table-color:var(--ink); }
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus{
  border-color:#3d6f9e; box-shadow:0 0 0 .2rem rgba(106,169,238,.20); }

/* Mã màu cứng của bản sáng — phải khai lại từng chỗ, không có đường tắt. */
[data-bs-theme="dark"] .th-table thead th{ background:#1c2431; }
[data-bs-theme="dark"] .th-table thead tr:first-child th.grp{ background:#243044; }
[data-bs-theme="dark"] tr.ct-thieu td{ background:#302811 !important; }
[data-bs-theme="dark"] tr.ct-du    td{ background:#152a1d !important; }
[data-bs-theme="dark"] span.ct-thieu{ background:#302811; }
[data-bs-theme="dark"] span.ct-du{ background:#152a1d; }
[data-bs-theme="dark"] .bcx-kpi.xau{ background:#331a1a; }
[data-bs-theme="dark"] .bcx-cb.nang{ background:#331a1a; }
[data-bs-theme="dark"] .bcx-cb.vua{ background:#302811; } [data-bs-theme="dark"] .bcx-cb.vua .ic{ color:#e0b153; }
[data-bs-theme="dark"] .bcx-cb.nhe{ background:#33231a; } [data-bs-theme="dark"] .bcx-cb.nhe .ic{ color:#eb9a72; }
[data-bs-theme="dark"] .bcx-cb.tot{ background:#152a1d; } [data-bs-theme="dark"] .bcx-cb.tot .ic{ color:#4cc44c; }
[data-bs-theme="dark"] .bcx-pill.ok{ background:#152a1d; color:#4cc44c; }
[data-bs-theme="dark"] .bcx-pill.lech{ background:#331a1a; color:#f08b8b; }
[data-bs-theme="dark"] .bcx-pill.soat{ background:#302811; color:#e0b153; }
[data-bs-theme="dark"] .bcx-o:focus{ border-color:#3987e5; box-shadow:0 0 0 2px rgba(57,135,229,.25); }
[data-bs-theme="dark"] .bcx-chart .tren{ fill:#0f1318; }
[data-bs-theme="dark"] #bcxTip{ background:#242e3a; color:#e8edf3;
  box-shadow:0 4px 20px rgba(0,0,0,.6); }

/* Thanh tab Báo Cáo Xe */
[data-bs-theme="dark"] .bcx-tabs{ background:#161c25; border-color:#252d38; }
[data-bs-theme="dark"] .bcx-tabs .vach{ background:#2f3946; }
[data-bs-theme="dark"] .bcx-tab{ color:#aab6c4; }
[data-bs-theme="dark"] .bcx-tab:hover{ background:#212a35; color:#7db4f2; border-color:#2f3946;
  box-shadow:0 1px 2px rgba(0,0,0,.4); }
[data-bs-theme="dark"] .bcx-tab.on{ background:#256abf; color:#fff; border-color:#256abf;
  box-shadow:0 2px 8px rgba(37,106,191,.5); }

/* In ra giấy thì LUÔN nền trắng, dù màn hình đang để tối. */
@media print{ [data-bs-theme="dark"]{ --bg-page:#fff; --bg-card:#fff; --bg-soft:#f5f7fa;
  --ink:#1c2b3a; --ink-2:#4a5a6b; --ink-mut:#5f6d7c; --line:#dde3ea; --line-2:#e9edf2;
  --bcx-panel:#fff; --bcx-panel2:#f5f7fa; --bcx-ink:#1c2b3a; --bcx-ink2:#4a5a6b;
  --bcx-muted:#5f6d7c; --bcx-rule:#dde3ea; --bcx-rule2:#e9edf2; } }

/* ── LƯỚI AN TOÀN cho nền sáng ghi thẳng vào thuộc tính style ────────────────
   Vài màn cũ tô nền sáng ngay trong `style="background:#..."` của từng thẻ.
   CSS không sửa được nền đó, nhưng làm được điều quan trọng hơn: ép chữ về
   màu TỐI, để ô sáng đó vẫn đọc được thay vì thành chữ sáng trên nền sáng.
   Không hoàn hảo — nó là một mảng sáng nằm giữa nền tối — nhưng không bao giờ
   mất chữ, và đó mới là thứ không được phép hỏng. Chuyển dần từng màn sang
   dùng biến màu là cách sửa thật. */
[data-bs-theme="dark"] [style*="background:#f"],
[data-bs-theme="dark"] [style*="background:#F"],
[data-bs-theme="dark"] [style*="background:#e"],
[data-bs-theme="dark"] [style*="background:#E"],
[data-bs-theme="dark"] [style*="background: #f"],
[data-bs-theme="dark"] [style*="background: #F"],
[data-bs-theme="dark"] [style*="background: #e"],
[data-bs-theme="dark"] [style*="background: #E"],
[data-bs-theme="dark"] [style*="background-color:#f"],
[data-bs-theme="dark"] [style*="background-color:#F"],
[data-bs-theme="dark"] [style*="background-color:#e"],
[data-bs-theme="dark"] [style*="background-color:#E"]{ color:#1c2b3a; }
/* Ô sáng ghi thẳng trong style → mọi chữ BÊN TRONG cũng phải về màu tối, không
   chỉ chữ của chính thẻ đó. Thiếu vế này là đúng cái lỗi ở tab P&L: nền đảo
   sang tối nhưng dòng giải thích vẫn giữ màu xám tối → tương phản 1,51. */
[data-bs-theme="dark"] [style*="background:#f"] *,
[data-bs-theme="dark"] [style*="background:#F"] *,
[data-bs-theme="dark"] [style*="background:#e"] *,
[data-bs-theme="dark"] [style*="background:#E"] *,
[data-bs-theme="dark"] [style*="background: #f"] *,
[data-bs-theme="dark"] [style*="background: #F"] *,
[data-bs-theme="dark"] [style*="background: #e"] *,
[data-bs-theme="dark"] [style*="background: #E"] *{ color:#2b3947; }

/* Nút và tab đặc màu: nền tối cần xanh ĐẬM, không dùng chung màu với chữ link.
   `--brand` ở nền tối được kéo sáng lên để chữ liên kết đọc được trên nền đen —
   nhưng cùng màu đó làm NỀN nút thì chữ trắng trên nó chỉ còn tương phản 2,3.
   Nền nút là một việc khác với màu chữ link, nên tách hẳn ra. */
[data-bs-theme="dark"]{ --nut:#1f5f9e; --nut-2:#17496f; }
[data-bs-theme="dark"] .btn-primary{ background:var(--nut); border-color:var(--nut); color:#fff; }
[data-bs-theme="dark"] .btn-primary:hover,
[data-bs-theme="dark"] .btn-primary:focus{ background:var(--nut-2); border-color:var(--nut-2); }
[data-bs-theme="dark"] .btn-outline-primary{ color:#8cc0f5; border-color:#3d6f9e; }
[data-bs-theme="dark"] .btn-outline-primary:hover{ background:var(--nut); border-color:var(--nut); color:#fff; }
[data-bs-theme="dark"] .nav-pills .nav-link.active{ background:var(--nut); color:#fff; }
[data-bs-theme="dark"] .badge.bg-primary{ background:var(--nut) !important; }