/* ===== Go365 Admin — legacy-style theme ===== */
/* F-21 (17/08/2026) — GỠ bảng màu trùng.
   Trước đây khối này khai lại 18 biến y hệt brand-tokens.css nhưng nạp SAU nên ĐÈ
   lên file gốc: đổi màu thương hiệu ở nguồn duy nhất thì Admin không ăn theo.
   Nay chỉ giữ 4 biến RIÊNG của Admin — xanh dương "thông tin" và tím "đặc biệt" —
   vốn KHÔNG có trong bộ nhận diện. Đổi tên có tiền tố --adm- để không núp bóng
   biến thương hiệu nữa (trước đây chúng chiếm mất tên --bl/--bll/--pu/--pll,
   khiến teal #29b3b6 và vàng #fbc117 của bộ nhận diện bị thay bằng xanh/tím).
   Mọi biến còn lại lấy thẳng từ /admin/css/brand-tokens.css. */
:root{
  --adm-info:#2563eb;--adm-info-bg:#dbeafe;
  --adm-accent:#7c3aed;--adm-accent-bg:#ede9fe;
  /* Bổ sung 20/09/2026 — các màu trước đây gõ cứng trong file này, nay thành biến
     để nền tối đổi được. Giá trị nền sáng giữ Y HỆT bản cũ, giao diện sáng không đổi. */
  --on-accent:#fff;          /* chữ đặt trên nút màu đặc (cam/teal/đỏ/xanh) */
  --or-bg:#fff0e8;           /* nền nhạt của huy hiệu cam */
  --gd-bg:#fffbe6; --gd-text:#92690a;   /* huy hiệu vàng */
  --ok-text:#047857; --ok-line:#bbf7d0;
  --warn-bg:#fffbeb; --warn-text:#92400e; --warn-line:#fde68a;
  --err-text:#b91c1c; --err-line:#fecaca;
  --line-soft:#f4ecd8;      /* kẻ mảnh giữa các dòng trong thẻ */
  /* Chữ đặt trên dải teal đậm (--t / --t-deep). Dải đó CỐ Ý tối ở CẢ HAI nền
     — như thanh bên — nên chữ phải giữ màu kem ở cả hai. KHÔNG khai lại ở
     khối nền tối. Trước 20/09 các chỗ này mượn tạm --cr/--sand/--g1, mà ba
     biến đó là màu NỀN nên nền tối lật thành màu sẫm -> chữ biến mất
     (thấy thật ở 4 số lớn của Dashboard Marketing). */
  --on-deep:#fff8e5;
  /* Chữ phụ (nhạt hơn --on-deep) trên cùng dải teal đậm đó — cũng KHÔNG khai lại ở nền tối.
     Dashboard Marketing trước mượn --c-mongket-vien-2 (biến VIỀN), nền tối lật thành #3d7a7b -> chìm. */
  --on-deep-2:#7fd4d6;
  /* Chữ đặt trên mảng VÀNG/CAM sáng (--gd, --or). Hai mảng đó sáng ở CẢ hai nền nên chữ
     phải là mực đậm ở cả hai — không khai lại ở khối nền tối. Trước đây chỗ này mượn --dk,
     mà --dk lật thành màu kem ở nền tối -> chữ biến mất trên nền vàng (thấy ở dải eSIM Vietnam). */
  --on-warm:#2a1d05;
  /* Thang nhiệt 4 bậc (lịch giờ x thứ, biểu đồ mật độ). Nền sáng: teal nhạt -> đậm.
     Nền tối PHẢI đảo chiều (đậm -> sáng), nếu không bậc cao thành ô đen kịt trên nền tối. */
  --heat-1:#cfe2dc; --heat-2:#86b4ad; --heat-3:#418881; --heat-4:#015959;
  color-scheme:light;
}

/* =====================================================================
   NỀN TỐI (20/09/2026)
   Chỉ khai lại BIẾN, không sửa lại từng thẻ. Đặt ở admin.css chứ KHÔNG
   ở brand-tokens.css vì file đó dùng chung với web khách — web khách
   không có nền tối, đụng vào là đổi cả trang bán hàng.
   Ba trạng thái:
     · Sáng     → <html data-theme="light">   (thắng cả khi máy đang để tối)
     · Tối      → <html data-theme="dark">
     · Theo máy → không có data-theme, để prefers-color-scheme quyết
   ===================================================================== */
:root[data-theme="dark"]{
  /* mặt nền & đường kẻ */
  --w:#17292a; --g1:#0f1c1c; --g2:#2c4544; --bd:#2c4544; --line:#2c4544; --g3:#2c4544;
  --bgw:#1d3233; --cr:#1d3233; --sand:#1d3233;
  /* chữ */
  --tx:#e3ddcc; --dk:#f2ebd9; --ink:#f2ebd9; --gt:#9fb0ac;
  /* teal thương hiệu — sáng lên để đọc được trên nền tối */
  --t:#5fd0cf; --t2:#86e0df; --t3:#5fd0cf; --t4:#123433; --t-deep:#0b2323; --cb:#0b2323; --p:#5fd0cf;
  /* cam / vàng / xanh / đỏ */
  --or:#ff8a45; --or2:#ffa470; --or-text:#ff8a45; --or-bg:#3a2115;
  --gd:#f0bc4c; --gd-bg:#332711; --gd-text:#f0bc4c;
  --gn:#5fd48a; --gl:#14301f; --rd:#ff7b7b; --rl:#3a1b1b;
  --bl:#5fd0cf; --bll:#123433; --pu:#f0bc4c; --pll:#332711; --terra-bg:#3a2115;
  --adm-info:#7aa8ff; --adm-info-bg:#16243f;
  --adm-accent:#b69bff; --adm-accent-bg:#241c3d;
  /* chữ đặt TRÊN mảng màu nhấn: nền sáng dùng trắng, nền tối phải dùng mực đậm */
  --on-accent:#06201f;
  --ok-text:#5fd48a; --ok-line:#1d5236;
  --warn-bg:#332711; --warn-text:#f0bc4c; --warn-line:#5a4416;
  --err-text:#ff7b7b; --err-line:#5a2020;
  --line-soft:#233a3a;
  /* tên dài của design system (brand-tokens.css) chưa trỏ về tên ngắn */
  --border-default:#2c4544; --surface-alt:#1d3233; --focus-ring:rgba(95,208,207,.22);
  /* Thang nhiệt đảo chiều: bậc thấp chìm vào nền, bậc cao sáng rõ. */
  --heat-1:#1d3a39; --heat-2:#2f6360; --heat-3:#469b98; --heat-4:#7fd9d6;
  /* cho ô nhập, thanh cuộn, lịch... của trình duyệt đổi theo */
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    /* mặt nền & đường kẻ */
    --w:#17292a; --g1:#0f1c1c; --g2:#2c4544; --bd:#2c4544; --line:#2c4544; --g3:#2c4544;
    --bgw:#1d3233; --cr:#1d3233; --sand:#1d3233;
    /* chữ */
    --tx:#e3ddcc; --dk:#f2ebd9; --ink:#f2ebd9; --gt:#9fb0ac;
    /* teal thương hiệu — sáng lên để đọc được trên nền tối */
    --t:#5fd0cf; --t2:#86e0df; --t3:#5fd0cf; --t4:#123433; --t-deep:#0b2323; --cb:#0b2323; --p:#5fd0cf;
    /* cam / vàng / xanh / đỏ */
    --or:#ff8a45; --or2:#ffa470; --or-text:#ff8a45; --or-bg:#3a2115;
    --gd:#f0bc4c; --gd-bg:#332711; --gd-text:#f0bc4c;
    --gn:#5fd48a; --gl:#14301f; --rd:#ff7b7b; --rl:#3a1b1b;
    --bl:#5fd0cf; --bll:#123433; --pu:#f0bc4c; --pll:#332711; --terra-bg:#3a2115;
    --adm-info:#7aa8ff; --adm-info-bg:#16243f;
    --adm-accent:#b69bff; --adm-accent-bg:#241c3d;
    /* chữ đặt TRÊN mảng màu nhấn: nền sáng dùng trắng, nền tối phải dùng mực đậm */
    --on-accent:#06201f;
    --ok-text:#5fd48a; --ok-line:#1d5236;
    --warn-bg:#332711; --warn-text:#f0bc4c; --warn-line:#5a4416;
    --err-text:#ff7b7b; --err-line:#5a2020;
  --line-soft:#233a3a;
    --border-default:#2c4544; --surface-alt:#1d3233; --focus-ring:rgba(95,208,207,.22);
    /* cho ô nhập, thanh cuộn, lịch... của trình duyệt đổi theo */
    color-scheme:dark;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Be Vietnam Pro',system-ui,sans-serif;color:var(--tx);font-size:14px;background:var(--g1);display:flex;min-height:100vh}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}

/* ===== Sidebar ===== — menu đặt bên PHẢI (anh chốt 01/10/2026) */
.sidebar{width:var(--sw);background:var(--t-deep);color:#fff;display:flex;flex-direction:column;position:fixed;top:0;bottom:0;right:0;overflow-y:auto;z-index:50;transition:transform .25s ease}
.mob-burger{display:none;background:transparent;border:1.5px solid var(--g2);color:var(--gt);width:36px;height:36px;border-radius:8px;align-items:center;justify-content:center;cursor:pointer;font-size:18px;margin-right:6px;flex-shrink:0}
.mob-burger:hover{border-color:var(--t3);color:var(--t)}
.sb-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:49}
.sb-logo{padding:20px 18px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.06)}
.sb-logo .lm{width:42px;height:42px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;color:var(--t);flex-shrink:0;letter-spacing:-.5px}
.sb-logo .lm span{color:var(--or)}
.sb-logo .lt{font-weight:900;font-size:18px;color:#fff;line-height:1}
.sb-logo .ls{color:var(--gd);font-size:9px;font-weight:700;letter-spacing:2px;display:block;margin-top:3px}
.sb-search{padding:10px 14px 6px}
.sb-search input{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);color:#fff;padding:7px 10px;border-radius:6px;font-size:12px;outline:none}
.sb-search input:focus{border-color:var(--t3);background:rgba(255,255,255,.12)}
.sb-search input::placeholder{color:rgba(255,255,255,.4)}
.sb-sec{margin-top:14px}
.sb-sec-h{color:rgba(255,255,255,.5);font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:6px 18px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
.sb-sec-h .arr{font-size:10px;opacity:.5;transition:transform .2s}
.sb-sec.collapsed .sb-sec-h .arr{transform:rotate(-90deg)}
.sb-sec.collapsed .sb-sec-body{display:none}
.sb-item{display:flex;align-items:center;gap:10px;padding:8px 18px;color:rgba(255,255,255,.78);font-size:13px;font-weight:600;border-left:3px solid transparent;transition:background .15s,color .15s}
.sb-item:hover{background:rgba(255,255,255,.06);color:#fff}
.sb-item.ac{background:rgba(41,179,182,.18);color:#fff;border-left-color:var(--t3)}
.sb-item .ic{font-size:14px;width:18px;text-align:center;flex-shrink:0}
.sb-children{padding-left:18px}
.sb-children .sb-item{font-size:12px;padding:6px 18px}
.sb-sub{margin:0}
.sb-sub > summary{list-style:none}
.sb-sub > summary::-webkit-details-marker{display:none}
.sb-sub > summary small{transition:transform .15s}
.sb-sub[open] > summary small{transform:rotate(180deg)}
.sb-item.sub{padding-left:42px;font-size:12px;color:rgba(255,255,255,.65)}
/* số đỏ trên mục menu (vd Điều hành: đơn chưa giao chạy trong 3 giờ tới) — tự đúng cả khi menu thu hẹp */
.sb-dem{margin-left:auto;flex-shrink:0;background:#cf222e;color:#fff;font-size:10.5px;font-weight:800;border-radius:999px;
        min-width:18px;height:18px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;line-height:1}

/* ===== Main ===== */
.main{margin-right:var(--sw);flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}/* min-width:0 BẮT BUỘC: .main là flex item của body (body{display:flex}) nên mặc định
   min-width:auto — nội dung rộng (bảng chữ nowrap) kéo rộng cả .main thay vì để nó co lại,
   làm card/KPI/lưới phình ra ngoài viewport. Đo 13/09/2026 ở khổ 390px: 8/10 trang admin
   tràn (Danh bạ 1014px, Kế toán 1159px, Blog 985px trên viewport 390px). */
.tb{background:var(--w);border-bottom:1px solid var(--g2);padding:0 24px;height:58px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:60;box-shadow:0 1px 3px rgba(0,0,0,.04)}
/* 🔴 .tb ở trên là class của THANH TOPBAR. 4 trang admin lỡ dùng <table class="tb"> (13/09/2026:
   MarketingDashboard 11 bảng, PromoMonitoring 2, AiFunnel 1, AiCosts 1) → bảng ăn display:flex +
   height:58px + position:sticky của topbar, khiến thead và tbody thành 2 ô flex nằm CẠNH NHAU:
   header dồn sang trái, dữ liệu dồn sang phải. Đây đúng là lỗi owner chỉ ra ở bảng "Trang khách
   vào nhiều nhất". Trả lại hành vi bảng cho mọi <table> mang class này. */
table.tb{display:table;height:auto;padding:0;position:static;background:transparent;border-bottom:none;box-shadow:none;z-index:auto}
.tbt{font-size:17px;font-weight:800;color:var(--dk)}
.tbr{display:flex;gap:8px;align-items:center}
.tbb{background:transparent;border:1.5px solid var(--g2);color:var(--gt);padding:7px 14px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px}
.tbb:hover{border-color:var(--t3);color:var(--t)}
.tbb.p{background:var(--or);border-color:var(--or);color:var(--on-accent)}
.tbb.p:hover{background:var(--or2);border-color:var(--or2);color:var(--on-accent)}
.tbb.tl{background:var(--t);border-color:var(--t);color:var(--on-accent)}
.tbb.tl:hover{background:var(--t2);border-color:var(--t2);color:var(--on-accent)}
.tbuser{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:8px;background:var(--g1);font-size:12px;color:var(--gt);font-weight:700}
.tbuser .role{color:var(--or);font-weight:800}
.con{padding:22px 24px;flex:1}

/* ===== Cards / grids ===== */
.card{background:var(--w);border-radius:14px;border:1px solid var(--g2);box-shadow:0 1px 6px rgba(0,0,0,.06);padding:18px}
.g4c{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.g3c{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g2c{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kpi{background:var(--w);border:1px solid var(--g2);border-radius:14px;padding:18px;position:relative;box-shadow:0 1px 6px rgba(0,0,0,.05)}
.kpi-h{font-size:11px;font-weight:800;color:var(--gt);letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
.kpi-v{font-family:'Fraunces',serif;font-size:30px;font-weight:900;color:var(--dk);line-height:1}
.kpi-d{font-size:11px;color:var(--gt);margin-top:8px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kpi-d .up{color:var(--gn);font-weight:800}
.kpi-d .dot{width:6px;height:6px;border-radius:50%;background:var(--rd);display:inline-block}
.kpi-i{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px}
.kpi-i.t{background:var(--t4);color:var(--t)}
.kpi-i.o{background:var(--or-bg);color:var(--or)}
.kpi-i.gn{background:var(--gl);color:var(--gn)}
.kpi-i.gd{background:var(--gd-bg);color:var(--gd-text)}
.kpi-i.pu{background:var(--adm-accent-bg);color:var(--adm-accent)}

/* ===== Tables ===== */
table{width:100%;border-collapse:collapse}
/* Khung trượt cho bảng rộng: bảng tự trượt NGANG trong khung của nó thay vì kéo scroll
   ngang cả trang ở khổ điện thoại. Bọc <table> vào <div class="tbwrap">. Đo 13/09/2026:
   7 trang admin tràn ngang ở viewport 390px vì bảng không có khung riêng. */
.tbwrap{overflow-x:auto;max-width:100%}
table th{text-align:left;padding:9px 12px;font-size:11px;font-weight:700;color:var(--gt);text-transform:uppercase;letter-spacing:.4px;border-bottom:2px solid var(--g2);background:var(--g1)}
table td{padding:9px 12px;border-bottom:1px solid var(--g2);font-size:13px;vertical-align:middle}
table tr:hover td{background:var(--g1)}

/* ===== Badges ===== */
.bd{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700}
.bt{background:var(--t4);color:var(--t)}
.bo{background:var(--or-bg);color:var(--or)}
.bgn{background:var(--gl);color:var(--gn)}
.brd{background:var(--rl);color:var(--rd)}
.bbl{background:var(--adm-info-bg);color:var(--adm-info)}
.bgd{background:var(--gd-bg);color:var(--gd-text)}
.bpu{background:var(--adm-accent-bg);color:var(--adm-accent)}
.bgy{background:var(--g2);color:var(--gt)}

/* ===== Sec titles ===== */
.sec-t{font-family:'Fraunces',serif;font-size:18px;font-weight:800;color:var(--dk);margin-bottom:14px;display:flex;align-items:center;gap:8px}

/* ===== Action list (right column of dashboard) ===== */
.act{display:flex;align-items:flex-start;gap:11px;padding:11px 0;border-bottom:1px solid var(--g2)}
.act:last-child{border-bottom:none}
.act-i{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.act-c .t{font-size:13px;font-weight:800;color:var(--dk);margin-bottom:2px}
.act-c .s{font-size:11px;color:var(--gt)}

/* ===== Top products list ===== */
.rank{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--g2)}
.rank:last-child{border-bottom:none}
.rank .n{width:24px;height:24px;border-radius:6px;background:var(--g1);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:var(--t);flex-shrink:0}
.rank .l{flex:1;font-size:13px;font-weight:700;color:var(--dk)}
.rank .l small{display:block;font-size:11px;color:var(--gt);font-weight:600;margin-top:1px}
.rank .v{font-size:13px;font-weight:800;color:var(--or)}

/* Dòng .act / .rank ở Dashboard là link mở đúng danh sách của con số đang hiện — giữ nguyên
   nét chữ, chỉ thêm nền hover để biết bấm được. */
a.act,a.rank{text-decoration:none;color:inherit;cursor:pointer;margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px;border-radius:8px;transition:background .12s}
a.act:hover,a.rank:hover{background:var(--g1)}
a.act:focus-visible,a.rank:focus-visible{outline:2px solid var(--t);outline-offset:-2px}

.empty:not(.dot){color:var(--gt);font-size:13px;padding:18px;text-align:center}

/* logout */
.lo-btn{background:transparent;border:1.5px solid var(--g2);color:var(--gt);padding:6px 12px;border-radius:8px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.lo-btn:hover{border-color:var(--rd);color:var(--rd)}

/* ===== Forms ===== */
.inp{border:1.5px solid var(--g2);border-radius:9px;padding:9px 13px;font-size:13px;font-family:inherit;outline:none;width:100%;color:var(--tx);background:var(--w);transition:border-color .15s}
.inp:focus{border-color:var(--t3)}
.inp:disabled{background:var(--g1);color:var(--gt)}
.ngay-vn-o{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 10px center!important;background-size:15px 15px!important;padding-right:32px!important}
.ngay-vn-lich{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;border:0;padding:0;margin:0}
select.inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gt) 50%),linear-gradient(135deg,var(--gt) 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px}
textarea.inp{font-family:inherit;resize:vertical;min-height:80px}
.lbl{font-size:10px;font-weight:800;color:var(--t);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:5px}
.fd{margin-bottom:14px}
.fr{display:grid;gap:12px;grid-template-columns:1fr 1fr}

.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;border:none;font-family:inherit;text-decoration:none;transition:all .15s}
.btn.p{background:var(--or);color:var(--on-accent)}.btn.p:hover{background:var(--or2)}
.btn.t{background:var(--t);color:var(--on-accent)}.btn.t:hover{background:var(--t2)}
.btn.gn{background:var(--gn);color:var(--on-accent)}
.btn.rd{background:var(--rd);color:var(--on-accent)}
.btn.gh{background:transparent;border:1.5px solid var(--g2);color:var(--gt)}.btn.gh:hover{border-color:var(--t3);color:var(--t)}
.btn.sm{padding:5px 11px;font-size:11px}
.btn.xs{padding:3px 8px;font-size:10px}

/* filter bar */
.fbar{display:flex;align-items:center;gap:10px;background:var(--w);padding:12px;border:1px solid var(--g2);border-radius:12px;margin-bottom:14px;flex-wrap:wrap}
.fbar .grow{flex:1;min-width:200px}
.fbar .lbl-inline{font-size:11px;color:var(--gt);font-weight:700}

/* pagination */
.pg{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding-top:12px;border-top:1px solid var(--g2);font-size:12px;color:var(--gt)}
.pgb{display:flex;gap:5px}
.pbt{background:transparent;border:1px solid var(--g2);color:var(--gt);padding:5px 11px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;text-decoration:none;display:inline-block}
.pbt.ac{background:var(--t);color:var(--on-accent);border-color:var(--t)}
.pbt:disabled,.pbt.dis{opacity:.4;cursor:not-allowed}

/* row action icons */
.iconbtn{background:transparent;border:1px solid var(--g2);width:28px;height:28px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;color:var(--gt);margin-right:3px;transition:all .12s;padding:0}
.iconbtn:last-child{margin-right:0}
.iconbtn:hover{border-color:var(--t3);color:var(--t);background:var(--g1)}
.iconbtn svg{display:block}
.iconbtn.ed{color:var(--t)}.iconbtn.ed:hover{border-color:var(--t);background:var(--gl)}
.iconbtn.dup{color:var(--adm-info)}.iconbtn.dup:hover{border-color:var(--adm-info);background:var(--adm-info-bg)}
.iconbtn.hist{color:var(--adm-accent)}.iconbtn.hist:hover{border-color:var(--adm-accent);background:var(--adm-accent-bg)}
.iconbtn.rd{color:var(--rd)}.iconbtn.rd:hover{border-color:var(--rd);background:var(--rl)}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px}
.modal{background:var(--w);border-radius:14px;max-width:560px;width:100%;max-height:90vh;overflow-y:auto;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.modal-h .t{font-family:'Fraunces',serif;font-size:18px;font-weight:800;color:var(--dk)}
.modal-h .x{background:transparent;border:none;font-size:22px;color:var(--gt);cursor:pointer;line-height:1}
.modal-f{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}

/* truncate */
.tr1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:240px;display:inline-block;vertical-align:middle}

/* star rating */
.stars{color:var(--gd);font-size:13px}

/* ===== MudBlazor theme override → legacy palette ===== */
/* F-21: nối MudBlazor vào bộ nhận diện bằng BIẾN, không gõ cứng mã màu nữa —
   đổi màu ở brand-tokens.css là Admin ăn theo ngay. Hai dòng -rgb bên dưới phải
   sửa tay nếu teal/cam đổi (CSS không tách được kênh màu từ biến). */
.mud-theme-provider, :root {
  --mud-palette-primary: var(--t) !important;
  --mud-palette-primary-rgb: 1,89,89 !important;
  --mud-palette-primary-text: var(--on-accent) !important;
  --mud-palette-primary-darken: #014746 !important;
  --mud-palette-primary-lighten: var(--t3) !important;
  --mud-palette-primary-hover: rgba(1,89,89,.08) !important;
  --mud-palette-secondary: var(--or) !important;
  --mud-palette-secondary-rgb: 249,93,0 !important;
  --mud-palette-secondary-text: var(--on-accent) !important;
  --mud-palette-secondary-darken: #d24c00 !important;
  --mud-palette-secondary-lighten: var(--or2) !important;
  --mud-palette-secondary-hover: rgba(249,93,0,.08) !important;
  --mud-palette-success: var(--gn) !important;
  --mud-palette-error: var(--rd) !important;
  --mud-palette-warning: var(--gd) !important;
  --mud-palette-info: var(--adm-info) !important;
  --mud-palette-background: var(--w) !important;
  --mud-palette-background-grey: var(--g1) !important;
  --mud-palette-surface: var(--w) !important;
  --mud-palette-appbar-background: var(--t) !important;
  --mud-palette-drawer-background: var(--t-deep) !important;
  --mud-palette-drawer-text: rgba(255,255,255,.85) !important;
  --mud-palette-text-primary: var(--tx) !important;
  --mud-palette-text-secondary: var(--gt) !important;
  --mud-palette-divider: var(--g2) !important;
  --mud-palette-lines-default: var(--g2) !important;
  --mud-palette-lines-inputs: var(--g2) !important;
  --mud-typography-default-family: 'Be Vietnam Pro', system-ui, sans-serif !important;
  --mud-default-borderradius: 9px !important;
}

/* MudDialog → legacy modal style */
.mud-dialog-container { font-family: 'Be Vietnam Pro', system-ui, sans-serif }
.mud-dialog {
  border-radius: 14px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.3) !important;
}
.mud-dialog-title {
  font-family: 'Fraunces', serif !important;
  font-weight: 800 !important;
  color: var(--dk) !important;
  font-size: 18px !important;
}
.mud-dialog-content { font-size: 14px }
.mud-dialog-actions { padding: 14px 22px !important; border-top: 1px solid var(--g2) }

/* MudButton primary → orange like legacy CTA */
.mud-button-filled-primary {
  background-color: var(--or) !important;
  color: var(--on-accent) !important;
}
.mud-button-filled-primary:hover { background-color: var(--or2) !important }
.mud-button-filled-secondary { background-color: var(--t) !important; color:var(--on-accent) !important }
.mud-button-filled-secondary:hover { background-color: var(--t2) !important }

/* MudInput → Go365 design-system form look (warm border, teal focus ring, mono overline label) */
.mud-input-outlined .mud-input-outlined-border { border-width:1.5px !important; border-color: var(--g2) !important; border-radius:12px !important }
.mud-input-outlined.mud-shrink .mud-input-outlined-border { border-color: var(--t3) !important }
.mud-input.mud-focused .mud-input-outlined-border { border-color: var(--t) !important; box-shadow: 0 0 0 4px rgba(1,89,89,.1) !important }
.mud-input.mud-error .mud-input-outlined-border { border-color: #dc2626 !important }
.mud-input.mud-focused.mud-error .mud-input-outlined-border { box-shadow: 0 0 0 4px rgba(220,38,38,.12) !important }
.mud-input-control input, .mud-input-control textarea, .mud-input-control select { font-family: 'Be Vietnam Pro',sans-serif !important; color: var(--tx) !important }
.mud-input-control input::placeholder, .mud-input-control textarea::placeholder { color:var(--gt) !important; opacity:1 }
.mud-input-label-animated { font-weight: 700 !important; color: var(--t) !important }
/* floated label → mono uppercase teal overline, giống Field design-system */
.mud-input-outlined.mud-shrink .mud-input-label-animated { font-family:'IBM Plex Mono',ui-monospace,monospace !important; text-transform:uppercase !important; letter-spacing:.05em !important; font-size:11px !important; font-weight:600 !important }

/* MudCard / MudPaper */
.mud-card, .mud-paper {
  border-radius: 14px !important;
  border: 1px solid var(--g2) !important;
  box-shadow: 0 1px 6px rgba(0,0,0,.06) !important;
}

/* MudIconButton in tables */
.mud-table .mud-icon-button { color: var(--gt) !important }
.mud-table .mud-icon-button:hover { color: var(--t) !important; background-color: var(--g1) !important }

/* MudMessageBox confirm dialog */
.mud-message-box { font-family:'Be Vietnam Pro',sans-serif }

/* ===== Topbar dropdown ===== */
.dd { position: relative; display: inline-block }
.dd-menu {
  display: none;
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--w); border: 1px solid var(--g2); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 220px; z-index: 100; overflow: hidden;
}
.dd:hover .dd-menu, .dd:focus-within .dd-menu { display: block }
.dd-menu a {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; font-size: 13px; color: var(--dk); font-weight: 600;
  border-bottom: 1px solid var(--g2);
}
.dd-menu a:last-child { border-bottom: none }
.dd-menu a:hover { background: var(--g1); color: var(--t) }
.dd-menu a span { font-size: 14px }

/* logout icon button */
.lo-btn {
  width: 34px; height: 34px;
  padding: 0; border-radius: 8px;
  background: transparent; border: 1.5px solid var(--g2);
  color: var(--gt); font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.lo-btn:hover { border-color: var(--rd); color: var(--rd) }

/* tbuser tweak */
.tbuser {
  display: flex; flex-direction: column; align-items: flex-end;
  padding: 5px 11px; border-radius: 8px; background: var(--g1);
  font-size: 12px; line-height: 1.3;
}
.tbuser span:first-child { font-weight: 800; color: var(--dk) }
.tbuser .role { color: var(--or); font-weight: 700; font-size: 10px }

/* ===== User dropdown in topbar ===== */
.tbuser-btn{
  display:flex;align-items:center;gap:10px;
  padding:5px 12px 5px 5px;background:var(--g1);border:1.5px solid var(--g2);
  border-radius:24px;cursor:pointer;font-family:inherit;
}
.tbuser-btn:hover{border-color:var(--t3)}
.tbuser-btn .avatar{
  width:32px;height:32px;border-radius:50%;
  background:linear-gradient(135deg,var(--t),var(--t3));
  color:var(--on-accent);font-weight:900;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.tbuser-btn .info{display:flex;flex-direction:column;line-height:1.2}
.tbuser-btn .name{font-weight:800;color:var(--dk);font-size:12px}
.tbuser-btn .role{color:var(--or);font-weight:700;font-size:10px}
.dd-user .dd-menu{min-width:260px}

/* Hide old simple tbuser since we replaced it */
.tbuser{display:none}

/* ===== Better empty state ===== */
.empty:not(.dot){
  color:var(--gt);font-size:14px;padding:40px 20px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.empty:not(.dot)::before{content:"📭";font-size:38px;opacity:.5}
.empty .cta{
  margin-top:6px;padding:9px 18px;background:var(--or);color:var(--on-accent);
  border-radius:8px;font-weight:700;border:none;cursor:pointer;
  font-family:inherit;font-size:13px;
}
.empty .cta:hover{background:var(--or2)}

/* ===== Loading skeleton ===== */
.skel{
  background:linear-gradient(90deg,var(--g1) 0%,var(--g2) 50%,var(--g1) 100%);
  background-size:200% 100%;animation:shimmer 1.4s infinite;
  border-radius:6px;height:14px;margin:6px 0;
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ===== Smoother transitions everywhere ===== */
.iconbtn,.btn,.tbb,.sb-item,.pbt{transition:all .15s ease-in-out}

/* ===== Quill editor — matches .inp look (border 1.5px var(--g2), radius 9px) ===== */
.go365-quill-host{display:block;position:relative}
.ql-toolbar.ql-snow{display:flex;flex-wrap:wrap;align-items:center;
                    border:1.5px solid var(--g2) !important;border-bottom:none !important;
                    border-radius:9px 9px 0 0;background:var(--g1);
                    padding:6px 10px !important}
.ql-toolbar.ql-snow .ql-formats{display:inline-flex;align-items:center;
                                 margin:2px 8px 2px 0 !important;height:24px}
.ql-toolbar.ql-snow button,
.ql-toolbar.ql-snow .ql-picker-label{height:24px !important;line-height:24px !important;
                                      padding:0 4px !important;display:inline-flex;
                                      align-items:center;justify-content:center}
.ql-toolbar.ql-snow button svg{width:16px;height:16px}
.ql-toolbar.ql-snow .ql-picker{height:24px;line-height:24px;display:inline-flex;align-items:center}
.ql-container.ql-snow{border:1.5px solid var(--g2) !important;border-radius:0 0 9px 9px;
                      max-width:100%;font-family:inherit;position:relative;background:var(--w)}
.ql-editor{font-size:13px;line-height:1.55;padding:10px 13px}
.ql-editor.ql-blank::before{font-style:normal;color:var(--gt)}
.ql-editor img{max-width:100%;height:auto;border-radius:4px}

/* Custom fullscreen toolbar button */
.ql-toolbar.ql-snow button.ql-go365-fs{font-size:16px;line-height:1}
.ql-toolbar.ql-snow button.ql-go365-fs::before{content:'⛶'}
.go365-fs-active .ql-toolbar.ql-snow button.ql-go365-fs::before{content:'✕'}

/* Header picker VN labels (compact) */
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before{content:'Cỡ'}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{content:'Tiêu đề 1'}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'Tiêu đề 2'}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'Tiêu đề 3'}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{content:'Tiêu đề 4'}

/* Fullscreen mode: center editor + give it room */
.go365-fs-active{max-width:none !important}
.go365-fs-active .ql-toolbar.ql-snow,
.go365-fs-active .go365-quill-host{max-width:1200px !important;margin-left:auto;margin-right:auto}

/* Word/char counter badge (bottom-right) */
.go365-quill-counter{font-variant-numeric:tabular-nums}

/* ===== Mobile responsive (≤900px): sidebar becomes off-canvas, hamburger in topbar ===== */
@media (max-width:900px){
  .sidebar{transform:translateX(100%)}
  body.sb-open .sidebar{transform:translateX(0);box-shadow:-8px 0 32px rgba(0,0,0,.35)}
  body.sb-open .sb-backdrop{display:block}
  .main{margin-right:0}
  .mob-burger{display:inline-flex;order:3;margin-right:0;margin-left:6px}
  .tb{padding:0 14px;height:54px}
  .tbt{font-size:14px;font-weight:800;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tbr{gap:4px}
  .tbb{padding:5px 9px;font-size:11px}
  .tbuser-btn .info{display:none}
  .tbuser-btn{padding:3px 5px}
  .con{padding:12px 12px;min-width:0}
  .pgb{flex-wrap:wrap}   /* dãy nút phân trang đo được 460px ở viewport 390px */
  /* CHỈ ở khổ hẹp mới cho bảng giữ bề rộng tự nhiên + trượt trong khung. Áp ở desktop
     sẽ làm bảng vốn vừa khít 1200px rộng ra và sinh thanh trượt không cần thiết. */
  .tbwrap table{min-width:max-content}
  /* Tables: enable horizontal scroll on small screens */
  .con table{font-size:12px}
  /* Filter bar wraps */
  .fbar{padding:9px;gap:6px}
  .fbar .grow{min-width:140px}
  /* Cards/grids stack on mobile */
  .g4c,.g3c,.g2c{grid-template-columns:1fr}
  .kpi{padding:14px}
  .kpi-v{font-size:24px}
  .fr{grid-template-columns:1fr}
  /* Force collapse of inline-styled grid layouts on mobile so product/edit forms stop being squeezed sideways */
  .con div[style*="grid-template-columns"]{grid-template-columns:1fr !important;gap:10px !important}
  /* Cards with inline 18px padding shrink a bit on mobile */
  .card[style*="padding:18px"]{padding:12px !important}
}
@media (max-width:480px){
  .tbt{font-size:13px}
  .con{padding:10px 8px}
}


/* Dòng đang được tick trong danh bạ (hành động hàng loạt) */
.selrow{background:var(--t4) !important}


/* =====================================================================
   FORM SẢN PHẨM — mục lục dính + gấp từng phần  (20/09/2026)
   Dùng chung cho 4 form: TourForm · TransportForm · DmcForm · EsimForm.
   Tên lớp mở đầu bằng .pf- để không đụng lớp nào đang có.
   ===================================================================== */
.pf-wrap{display:grid;grid-template-columns:262px minmax(0,1fr);gap:16px;align-items:start;margin-top:14px;max-width:1480px}
.pf-col{display:flex;flex-direction:column;gap:12px;min-width:0}

/* --- mục lục --- */
.pf-toc{position:sticky;top:76px;display:flex;flex-direction:column;gap:10px}
.pf-toc-card{background:var(--w);border:1px solid var(--g2);border-radius:12px;padding:8px 0;overflow:hidden}
.pf-toc-h{font-size:11px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;color:var(--gt);padding:6px 16px 9px}
.pf-toc-i{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:transparent;border:0;
          border-left:3px solid transparent;padding:10px 15px;font-family:inherit;line-height:1.3}
.pf-toc-i:hover{background:var(--g1)}
.pf-toc-i.on{background:var(--t4);border-left-color:var(--t)}
.pf-toc-i:focus-visible{outline:2px solid var(--t3);outline-offset:-2px}
.pf-toc-i .ic{font-size:17px;width:22px;text-align:center;flex:none}
.pf-toc-i .tx{flex:1;min-width:0}
.pf-toc-i .t1{display:block;font-size:13.5px;font-weight:700;color:var(--dk)}
.pf-toc-i.on .t1{color:var(--t)}
.pf-toc-i .t2{display:block;font-size:11.5px;color:var(--gt);font-weight:600;
               white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-cham{width:11px;height:11px;border-radius:50%;flex:none;border:2px solid transparent}
.pf-cham.ok{background:var(--gn)}
.pf-cham.warn{background:var(--gd)}
.pf-cham.err{background:var(--rd)}
.pf-cham.na{background:transparent;border-color:#94a3b8}

/* --- ô "còn thiếu để bán được" --- */
.pf-todo{background:var(--w);border:1px solid var(--rl);border-radius:12px;overflow:hidden}
.pf-todo-h{background:var(--rl);color:var(--err-text);font-weight:800;font-size:12.5px;padding:10px 15px;border-bottom:1px solid var(--err-line)}
.pf-todo-i{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;background:transparent;border:0;
           border-bottom:1px solid var(--g2);padding:10px 15px;font-size:12.5px;color:var(--dk);
           font-family:inherit;line-height:1.4}
.pf-todo-i:last-child{border-bottom:none}
.pf-todo-i:hover{background:var(--g1)}
.pf-todo-i:focus-visible{outline:2px solid var(--t3);outline-offset:-2px}
.pf-todo-i .go{margin-left:auto;font-size:11.5px;font-weight:800;color:var(--t);flex:none}
.pf-todo-ok{background:var(--w);border:1px solid var(--g2);border-radius:12px;
            padding:12px 15px;font-size:12.5px;color:var(--gn);font-weight:700}

/* --- khối gấp được --- */
.pf-blk{background:var(--w);border:1px solid var(--g2);border-radius:12px;overflow:hidden}
.pf-blk>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:13px;padding:15px 18px;user-select:none}
.pf-blk>summary::-webkit-details-marker{display:none}
.pf-blk>summary:focus-visible{outline:2px solid var(--t3);outline-offset:-2px}
.pf-blk[open]>summary{border-bottom:1px solid var(--g2);background:var(--g1)}
.pf-blk-ic{font-size:22px;flex:none;line-height:1}
.pf-blk-tx{min-width:0;flex:1}
.pf-blk-t{font-weight:800;font-size:16px;color:var(--dk);line-height:1.25}
.pf-blk-s{font-size:12.5px;color:var(--gt);font-weight:600;margin-top:3px;line-height:1.35}
.pf-blk-b{padding:16px;display:flex;flex-direction:column;gap:14px}
.pf-chev{font-size:22px;line-height:1;color:var(--t);flex:none}
.pf-badge{font-size:11.5px;font-weight:800;padding:4px 11px;border-radius:20px;white-space:nowrap;flex:none}
.pf-badge.ok{background:var(--gl);color:var(--ok-text);border:1px solid var(--ok-line)}
.pf-badge.warn{background:var(--warn-bg);color:var(--warn-text);border:1px solid var(--warn-line)}
.pf-badge.err{background:var(--rl);color:var(--err-text);border:1px solid var(--err-line)}
.pf-badge.na{background:var(--g1);color:var(--gt);border:1px solid var(--g2)}

/* --- bảng gói giá (mở sửa tại chỗ) --- */
.pf-gtb{width:100%;border-collapse:collapse;font-size:13px;background:var(--w)}
.pf-gtb th{font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--gt);
           text-align:left;padding:10px 12px;background:var(--g1);border-bottom:1px solid var(--g2);white-space:nowrap}
.pf-gtb td{padding:10px 12px;border-bottom:1px solid var(--g2);vertical-align:middle}
.pf-gtb tbody tr.pf-r{cursor:pointer}
.pf-gtb tbody tr.pf-r:hover>td{background:var(--g1)}
.pf-gtb tbody tr.pf-r.on>td{background:var(--t4)}
.pf-gtb .nm{font-weight:700;color:var(--dk)}
.pf-gtb .num{font-family:'Spline Sans Mono',ui-monospace,monospace;font-weight:600;
             font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.pf-gtb td.pf-edit{padding:0;background:var(--g1)}
.pf-gtb td.pf-edit>div{padding:14px}
.pf-mini{font-size:11.5px;color:var(--gt);font-weight:600}
.pf-ok{color:var(--gn);font-weight:700}
.pf-lo{color:var(--or-text);font-weight:700}
.pf-no{color:var(--rd);font-weight:700}

@media(max-width:1100px){
  .pf-wrap{grid-template-columns:1fr}
  .pf-toc{position:static;top:auto}
}


/* =====================================================================
   BÀN LÀM VIỆC & BÁO CÁO  (20/09/2026)
   Dùng chung cho /admin/ và /admin/report. Tiền tố .bc- để không đụng
   .card / .rank / .kpi vốn đã có ở trên. Mọi màu lấy qua biến nên nền
   tối tự đổi theo, không khai lại lần nào.
   ===================================================================== */
.bc-n{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:700;font-variant-numeric:tabular-nums}
.bc-hd{font-size:10px;font-weight:800;color:var(--gt);letter-spacing:.9px;text-transform:uppercase}

.bc-card{background:var(--w);border:1px solid var(--g2);border-radius:12px;box-shadow:0 1px 6px rgba(0,0,0,.06);padding:14px 16px}
.bc-ct{font-size:14px;font-weight:800;color:var(--dk);display:flex;align-items:center;gap:7px;margin:0 0 2px}
.bc-cs{font-size:11.5px;color:var(--gt);font-weight:600;margin-bottom:11px}

/* ô việc cần làm */
.bc-viec{display:flex;align-items:center;gap:11px;background:var(--w);border:1px solid var(--g2);
         border-left:4px solid var(--g2);border-radius:11px;padding:11px 14px;min-width:0;
         box-shadow:0 1px 6px rgba(0,0,0,.06);color:inherit}
a.bc-viec:hover{border-color:var(--t3)}
a.bc-viec:focus-visible{outline:2px solid var(--t);outline-offset:2px}
/* nút "Xử lý ngay →" ô việc (07/10/2026): đưa chuột vào ô → mũi tên chạy trái sang phải */
.bc-mui{flex:none;margin-left:auto;height:28px;padding:0 10px 0 14px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;background:var(--g1);color:var(--gt);font-size:12px;font-weight:600;transition:background .15s,color .15s}
a.bc-viec:hover .bc-mui,a.bc-viec:focus-visible .bc-mui{background:var(--t);color:#fff}
a.bc-viec:hover .bc-mui svg,a.bc-viec:focus-visible .bc-mui svg{animation:bc-mui-chay .9s ease-in-out infinite}
@keyframes bc-mui-chay{0%{transform:translateX(0);opacity:1}45%{transform:translateX(12px);opacity:0}46%{transform:translateX(-12px);opacity:0}100%{transform:translateX(0);opacity:1}}
@media (prefers-reduced-motion:reduce){a.bc-viec:hover .bc-mui svg{animation:none}}
.bc-viec .vn{font-size:25px;line-height:1;font-weight:800;letter-spacing:-1px}
.bc-viec .vl{font-size:12.5px;font-weight:700;color:var(--dk);line-height:1.25}
.bc-viec .vs{font-size:10.5px;color:var(--gt);font-weight:600;margin-top:2px;line-height:1.35}
.bc-cam{border-left-color:var(--or-text)}   .bc-cam .vn{color:var(--or-text)}
.bc-vang{border-left-color:var(--gd-text)}  .bc-vang .vn{color:var(--gd-text)}
.bc-lam{border-left-color:var(--adm-info)}  .bc-lam .vn{color:var(--adm-info)}
.bc-xanh{border-left-color:var(--gn)}       .bc-xanh .vn{color:var(--gn)}
.bc-xam{border-left-color:var(--g2);opacity:.75} .bc-xam .vn{color:var(--gt)}
.bc-do{border-left-color:var(--rd)}         .bc-do .vn{color:var(--rd)}
/* ô Ghép SP sàn (02/11/2026): 3 số 3 tên trong một ô, mỗi số một link */
.bc-ghep{flex-direction:column;align-items:stretch;gap:4px}
.bc-ghep-o{display:flex;align-items:baseline;gap:8px;color:inherit;text-decoration:none}
.bc-ghep-o b{min-width:2ch;font-size:20px;line-height:1.2;color:var(--gt)}
.bc-ghep-o.co b{color:var(--or-text)}
.bc-ghep-o span{font-size:12px;font-weight:700;color:var(--dk);line-height:1.3}
a.bc-ghep-o:hover span{text-decoration:underline}
a.bc-ghep-o:focus-visible{outline:2px solid var(--t);outline-offset:2px}
.bc-viecs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:11px}
.bc-chiso{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px}   /* 6 chỉ số tổng Bàn làm việc (07/10/2026) */
/* Biểu đồ doanh thu 30 ngày — Bàn làm việc (anh Khoa 07/10/2026): trục dọc doanh thu, trục ngang ngày đi, nháy đúp 1 cột tách màu theo kênh */
.bc-bd{container-type:inline-size;width:100%;margin-top:14px}   /* width:100% — khung cha co theo nội dung thì container-type làm bề rộng = 0 */
.bc-bd-tde{font-size:10px;font-weight:600;color:var(--gt);margin:0 0 4px}
.bc-bd-tde.x{text-align:right;margin:2px 0 0}
.bc-bd-khung{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:360px auto;column-gap:6px}   /* cao 360 (anh Khoa: "biểu đồ lùn quá") */
.bc-bd-y{grid-column:1;grid-row:1;position:relative}
.bc-bd-y span{position:absolute;right:0;transform:translateY(50%);font-size:10px;font-weight:600;color:var(--gt);white-space:nowrap;font-variant-numeric:tabular-nums}
.bc-bd-ve{grid-column:2;grid-row:1;position:relative;border-left:1px solid var(--g2);border-bottom:1px solid var(--g2)}
.bc-bd-luoi{position:absolute;left:0;right:0;border-top:1px dashed var(--g2);pointer-events:none}
.bc-bd-hang{position:absolute;inset:0;display:flex;align-items:flex-end;gap:3px;padding:0 3px}
.bc-bd-o{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;cursor:pointer;user-select:none;touch-action:manipulation}
.bc-bd-cot{width:100%;min-height:1px;border-radius:3px 3px 0 0;background:var(--t);display:flex;flex-direction:column-reverse;overflow:hidden;transition:filter .12s}
.bc-bd-cot.cam{background:var(--or)}
.bc-bd-o.cam .bc-bd-cot{box-shadow:inset 0 3px 0 var(--or)}
.bc-bd-o:hover .bc-bd-cot{filter:brightness(1.18)}
.bc-bd-o.mo .bc-bd-cot{box-shadow:0 0 0 2px var(--tx)}
.bc-bd-cot i{display:block;width:100%;flex:none}
.bc-bd-x{grid-column:2;grid-row:2;display:flex;gap:3px;padding:4px 3px 0}
.bc-bd-x span{flex:1;min-width:0;display:flex;justify-content:center;text-align:center;font-size:10px;font-weight:600;color:var(--gt);white-space:nowrap;font-variant-numeric:tabular-nums}
@container (max-width:900px){.bc-bd-x span:not(.x2){visibility:hidden}}
@container (max-width:520px){.bc-bd-x span:not(.x5){visibility:hidden}.bc-bd-x span.x5{visibility:visible}}   /* điện thoại: 5 ngày 1 nhãn (đè luật 2 ngày ở trên) */
.bc-bd-ct{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-top:10px;font-size:12px;color:var(--tx)}
.bc-bd-ct i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.bc-bd-goi-y{margin-top:8px;font-size:11px;font-weight:600;color:var(--gt)}
/* đầu khối số liệu: số to bên trái, 3 ô thả (Khoảng ngày · Theo ngày · Tiêu chí) bên phải — cùng kiểu cột lọc trang Đơn hàng */
/* 3 tab khối doanh số (Tất cả · Vận chuyển · Tour) — kiểu tab trình duyệt Chrome (anh Khoa 22/10/2026: "giống tab của Google, hiện tại
   đơn điệu quá"; chỉ chữ, không icon): dải nền xám sát mép trên khối; tab bo 2 góc trên; vạch ngăn mảnh giữa 2 tab chưa chọn; tab đang chọn
   cùng nền thân khối nên liền xuống nội dung, 2 góc chân uốn ra ngoài (::before/::after). Lề âm = padding .bc-card (giao diện phẳng ghi
   đè trong phang.css: 24px, màn ≤900px 16px). */
.bc-bd-tabs{display:flex;align-items:flex-end;margin:-14px -16px 16px;padding:8px 16px 0;background:var(--g2);border-radius:11px 11px 0 0}
.bc-bd-tab{position:relative;display:inline-flex;align-items:center;min-width:0;padding:9px 20px 10px;background:transparent;border:0;border-radius:10px 10px 0 0;font:inherit;font-size:12px;font-weight:600;color:var(--gt);cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.bc-bd-tab:not(.on):hover{background:color-mix(in srgb,var(--w) 55%,var(--g2));color:var(--tx)}
.bc-bd-tab:not(.on) + .bc-bd-tab:not(.on)::before{content:"";position:absolute;left:0;top:30%;height:40%;border-left:1px solid color-mix(in srgb,var(--gt) 40%,transparent)}
.bc-bd-tab:not(.on):hover::before,.bc-bd-tab:not(.on):hover + .bc-bd-tab:not(.on)::before{display:none}
.bc-bd-tab.on{z-index:1;background:var(--w);color:var(--tx)}
.bc-bd-tab.on::before,.bc-bd-tab.on::after{content:"";position:absolute;bottom:0;width:10px;height:10px;pointer-events:none}
.bc-bd-tab.on::before{left:-10px;background:radial-gradient(circle at 0 0,transparent 10px,var(--w) 10.5px)}
.bc-bd-tab.on::after{right:-10px;background:radial-gradient(circle at 100% 0,transparent 10px,var(--w) 10.5px)}
.bc-bd-tab:focus-visible{outline:2px solid var(--t);outline-offset:-2px}
@media (max-width:600px){.bc-bd-tabs{padding:6px 10px 0}.bc-bd-tab{padding:8px 14px 9px}}
.bc-bd-dau{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 24px;flex-wrap:wrap}
.bc-bd-loc{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.bc-dd-o{display:flex;flex-direction:column;gap:4px;min-width:160px}
.bc-dd-t{font-size:10px;font-weight:700;color:var(--gt);text-transform:uppercase;letter-spacing:.4px}
.bc-dd{position:relative}
.bc-dd-nut{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:34px;padding:6px 10px;border:1px solid var(--g2);border-radius:8px;background:var(--w);color:var(--tx);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.bc-dd-nut span{color:var(--gt);font-size:10px}
.bc-dd-nut[aria-expanded="true"]{border-color:var(--t)}
.bc-dd-lop{position:fixed;inset:0;z-index:30}
.bc-dd-ds{position:absolute;z-index:31;top:calc(100% + 4px);left:0;min-width:100%;max-height:min(60vh,360px);overflow-y:auto;display:flex;flex-direction:column;padding:4px;background:var(--w);border:1px solid var(--g2);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12)}
.bc-dd-i{border:0;background:none;text-align:left;justify-content:flex-start;padding:7px 10px;border-radius:6px;font-size:12px;color:var(--tx);cursor:pointer;white-space:nowrap}
.bc-dd-i:hover{background:var(--g1)}
.bc-dd-i.on{background:var(--t4);color:var(--t);font-weight:700}
.bc-dd-chu{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* ô Theo tuyến: tên tour dài → ô rộng cố định, chữ trên nút cắt "…", danh sách xuống dòng trong đúng bề ngang ô */
.bc-dd-o.tuyen{width:260px;min-width:0}
.bc-dd-o.tuyen .bc-dd-ds{width:100%}
.bc-dd-o.tuyen .bc-dd-i{white-space:normal;flex:none}
/* tiêu đề nhóm trong ô Khác (Tuyến / Chiều đi / Sản phẩm) — dính trên đầu khi cuộn */
.bc-dd-nhom{position:sticky;top:-4px;z-index:1;flex:none;padding:8px 10px 4px;background:var(--w);font-size:10px;font-weight:700;color:var(--gt);text-transform:uppercase;letter-spacing:.4px;border-top:1px solid var(--g2)}
.bc-bd-ngay{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--gt)}
.bc-bd-ngay .inp{width:132px}
.bc-bd-tai{align-self:center;font-size:11px;font-weight:600;color:var(--gt)}
@media (max-width:600px){.bc-bd-khung{grid-template-rows:260px auto}.bc-dd-o{min-width:0;flex:1 1 140px}.bc-dd-o.tuyen{flex:1 1 100%;width:auto}}
/* nhãn bấm được bên trong ô việc (vd từng sàn mất kết nối) */
.bc-chip{display:inline-block;font-size:10.5px;font-weight:700;border-radius:5px;padding:2px 7px;margin:3px 4px 0 0;
         background:var(--rl);color:var(--rd);white-space:nowrap}
.bc-chip.cam{background:var(--or-bg);color:var(--or-text)}
a.bc-chip:hover{text-decoration:underline}
a.bc-chip:focus-visible{outline:2px solid var(--t);outline-offset:1px}
/* ô "Có gì mới" đầu Bàn làm việc (21/10/2026): tính năng mới + thông báo nội bộ, mỗi người thấy 5 lần đầu */
.bc-moi-dong{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-top:1px solid var(--g2)}
.bc-moi-dong:last-child{padding-bottom:0}
.bc-moi-nhan{flex:none;font-size:12px;font-weight:600;border-radius:999px;padding:2px 8px;background:var(--t4);color:var(--t);white-space:nowrap}
.bc-moi-nhan.tb{background:var(--or-bg);color:var(--or-text)}
.bc-moi-nd{flex:1;min-width:0}
.bc-moi-td{font-size:12px;font-weight:600;color:var(--tx)}
.bc-moi-ngay{font-weight:400;color:var(--gt);margin-left:8px}
.bc-moi-mt{font-size:12px;color:var(--gt);line-height:1.6;margin-top:4px;white-space:pre-line}
.bc-moi-xem{flex:none;align-self:center}
@media (max-width:600px){.bc-moi-dong{flex-wrap:wrap;gap:8px}.bc-moi-nd{flex-basis:100%}}

/* công tắc 2 lựa chọn (Hôm nay: theo ngày đi / ngày đặt) */
.bc-seg{display:inline-flex;border:1px solid var(--g2);border-radius:8px;overflow:hidden}
.bc-seg button{border:0;background:transparent;color:var(--gt);font-size:11.5px;font-weight:700;padding:6px 11px;min-height:32px;cursor:pointer}
.bc-seg button + button{border-left:1px solid var(--g2)}
.bc-seg button.on{background:var(--t);color:var(--on-accent)}
.bc-seg button:focus-visible{outline:2px solid var(--t);outline-offset:-2px}
a.bc-o{color:inherit;border-radius:8px;transition:background .12s}
a.bc-o:hover{background:var(--g1)}
a.bc-o:focus-visible{outline:2px solid var(--t);outline-offset:2px}

/* số lớn */
.bc-kv{font-size:29px;line-height:1.05;font-weight:800;letter-spacing:-1.1px;color:var(--dk)}
.bc-kv small{font-size:15px;font-weight:700;color:var(--gt);letter-spacing:0}
.bc-kv.sm{font-size:24px;letter-spacing:-.7px}
.bc-delta{font-size:11.5px;font-weight:800;display:inline-flex;align-items:center;gap:3px;border-radius:6px;padding:2px 7px}
.bc-up{background:var(--gl);color:var(--gn)}
.bc-down{background:var(--rl);color:var(--rd)}

/* cột chia trong thẻ số */
.bc-cols{display:grid;gap:0}
.bc-cols > * + *{border-left:1px solid var(--line-soft);padding-left:18px}
.bc-cols > *{padding-right:18px}
.bc-cols > *:last-child{padding-right:0}
.bc-foot{border-top:1px solid var(--line-soft);margin-top:13px;padding-top:10px;
         font-size:11.5px;color:var(--gt);font-weight:600;display:flex;gap:18px;flex-wrap:wrap}

/* nhãn kênh bán */
.bc-kenh{font-size:10px;font-weight:800;border-radius:5px;padding:2px 7px;white-space:nowrap;letter-spacing:.2px}
.bc-k-vexere{background:var(--adm-info-bg);color:var(--adm-info)}
.bc-k-trip{background:var(--or-bg);color:var(--or-text)}
.bc-k-klook{background:var(--rl);color:var(--rd)}
.bc-k-bookaway{background:var(--adm-accent-bg);color:var(--adm-accent)}
.bc-k-web{background:var(--t4);color:var(--t)}
.bc-k-khac{background:var(--bgw);color:var(--gt)}

/* dòng xếp hạng có thanh tỉ trọng */
.bc-rank{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;
         padding:7px 0;border-bottom:1px solid var(--line-soft);color:inherit}
.bc-rank:last-child{border-bottom:0}
.bc-rank.kenh{grid-template-columns:38px minmax(0,1fr) auto}
a.bc-rank{border-radius:8px;margin:0 -8px;padding-left:8px;padding-right:8px;transition:background .12s}
a.bc-rank:hover{background:var(--g1)}
a.bc-rank:focus-visible{outline:2px solid var(--t);outline-offset:-2px}
.bc-rank .i{font-size:11px;font-weight:800;color:var(--gt);text-align:right}
.bc-rank .t{font-size:12.5px;font-weight:700;color:var(--dk);line-height:1.3;
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-rank .b{height:5px;border-radius:3px;background:var(--t);margin-top:4px}
.bc-rank .v{font-size:12.5px;font-weight:700;text-align:right;white-space:nowrap;color:var(--dk)}
.bc-rank .v em{display:block;font-style:normal;font-size:10.5px;color:var(--gt);font-weight:600}
.bc-rank.noibat{background:var(--t4);border-radius:8px;margin:2px -8px;padding-left:8px;padding-right:8px}
.bc-rank.noibat .t,.bc-rank.noibat .v{color:var(--t)}

/* thanh trạng thái xếp chồng */
.bc-stack{display:flex;height:26px;border-radius:7px;overflow:hidden;border:1px solid var(--g2)}
.bc-stack > div{display:flex;align-items:center;justify-content:center;min-width:0}
.bc-stack .bc-n{font-size:11px;color:var(--on-accent)}
.bc-chu{display:flex;gap:20px;margin-top:9px;flex-wrap:wrap;font-size:12px;font-weight:700;color:var(--tx)}
.bc-chu > span{display:inline-flex;align-items:center;gap:6px}
.bc-chu i{width:10px;height:10px;border-radius:3px;display:block;flex:none}

/* hộp giải thích cách đọc số */
.bc-luuy{background:var(--or-bg);border-left:3px solid var(--or-text);border-radius:0 9px 9px 0;padding:10px 13px}
.bc-luuy .h{font-size:12.5px;font-weight:800;color:var(--or-text);margin-bottom:3px}
.bc-luuy .b{font-size:12px;color:var(--tx);line-height:1.6}

/* biểu đồ cột theo ngày */
.bc-chart{display:flex;gap:10px}
.bc-truc{width:38px;position:relative;font-size:9.5px;color:var(--gt);font-weight:600;flex:none}
.bc-truc span{position:absolute;right:0}
.bc-plot{flex:1;position:relative;min-width:0}
.bc-luoi{position:absolute;left:0;right:0;border-top:1px dashed var(--g2)}
.bc-luoi.day{border-top:1.5px solid var(--g2)}
.bc-bang{position:absolute;right:0;top:0;background:var(--or-bg);border-left:1.5px dashed var(--or-text);border-radius:0 6px 0 0;opacity:.75}
.bc-bang-nhan{position:absolute;right:6px;top:6px;font-size:10px;font-weight:800;color:var(--or-text);letter-spacing:.3px}
.bc-cot{position:relative;display:flex;align-items:flex-end;gap:3px}
.bc-cot > div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:0}
.bc-cot .bar{width:100%;background:var(--t);border-radius:3px 3px 0 0}
.bc-cot .bar.cho{background:var(--or)}
.bc-cot .lb{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;color:var(--gt);
            margin-top:5px;white-space:nowrap;font-variant-numeric:tabular-nums}

/* trang Báo cáo: menu cột trái, mỗi lần xem 1 báo cáo; điện thoại → hàng nút trượt ngang */
.bc-lay{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;align-items:start}
/* top:76px chứ không phải 12px: thanh tiêu đề .tb dính cao 58px, để 12px thì menu dính
   NẰM DƯỚI thanh đó, cuộn xuống là mất nút đầu bảng. max-height để màn thấp vẫn với tới nút cuối. */
.bc-menu{position:sticky;top:76px;max-height:calc(100vh - 88px);overflow-y:auto;
         display:flex;flex-direction:column;gap:2px;padding:6px;border:1px solid var(--g2);
         border-radius:12px;background:var(--w)}
.bc-menu button{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:8px;
                background:none;font:inherit;font-size:13px;font-weight:600;color:var(--dk);text-align:left;cursor:pointer;
                transition:background .15s,color .15s}
.bc-menu button:hover{background:var(--bgw)}
.bc-menu button.on{background:var(--t);color:#fff;font-weight:800}
.bc-menu button:focus-visible{outline:2px solid var(--t);outline-offset:2px}
.bc-main{min-width:0}
.bc-ngay{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--gt)}
.bc-ngay .inp{max-width:160px}
@media (max-width:900px){
  .bc-lay{grid-template-columns:minmax(0,1fr);gap:10px}
  .bc-menu{position:static;max-height:none;overflow-y:visible;flex-direction:row;overflow-x:auto;scrollbar-width:none;padding:4px}
  .bc-menu::-webkit-scrollbar{display:none}
  .bc-menu button{width:auto;flex:none;white-space:nowrap;min-height:38px;padding:7px 12px}
}

/* khối Doanh số OTA — đi từng tầng (sàn → SP → chặng → đơn), mobile trước */
.ota-bx{margin-bottom:14px}
.ota-bc{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:4px 0 10px;font-size:12.5px}
.ota-bc button{border:0;background:none;padding:6px 2px;min-height:32px;font:inherit;font-weight:700;color:var(--t);
               cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ota-bc button:focus-visible{outline:2px solid var(--t);outline-offset:2px;border-radius:4px}
.ota-bc .cur{font-weight:800;color:var(--dk);overflow-wrap:anywhere}
.ota-bc i{font-style:normal;color:var(--gt)}
.ota-sum{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-bottom:10px}
.ota-sum-p{font-size:12.5px;color:var(--gt);font-weight:600;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.ota-chip{border:1px solid var(--t3);background:var(--w);color:var(--t);border-radius:999px;padding:3px 10px;min-height:28px;
          font:inherit;font-size:11.5px;font-weight:700;cursor:pointer}
/* biểu đồ cột xếp chồng theo kênh — màu theo KÊNH, cố định; bảng màu đã validate (sáng #fff, tối #17292a) */
.ota-bx{--s-vexere:#2a78d6;--s-bookaway:#eb6834;--s-trip:#1baf7a;--s-klook:#eda100;--s-kkday:#e87ba4;
        --s-web:#008300;--s-gyg:#4a3aa7;--s-khac:#9aa5a5}
:root[data-theme="dark"] .ota-bx{--s-vexere:#3987e5;--s-bookaway:#d95926;--s-trip:#199e70;--s-klook:#c98500;
        --s-kkday:#d55181;--s-web:#008300;--s-gyg:#9085e9;--s-khac:#6f7f7f}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .ota-bx{--s-vexere:#3987e5;--s-bookaway:#d95926;--s-trip:#199e70;--s-klook:#c98500;
        --s-kkday:#d55181;--s-web:#008300;--s-gyg:#9085e9;--s-khac:#6f7f7f}
}
.ota-cw{display:flex;gap:6px;margin-top:4px}
.ota-y{position:relative;flex:none;width:36px;height:132px;font-size:9.5px;font-weight:600;color:var(--gt);
       font-variant-numeric:tabular-nums}
.ota-y span{position:absolute;right:0;transform:translateY(50%)}
.ota-ch{flex:1;min-width:0;position:relative;display:flex;align-items:flex-end;gap:2px;height:132px;
        border-bottom:1.5px solid var(--g2)}
.ota-grid{position:absolute;left:0;right:0;border-top:1px dashed var(--g2);pointer-events:none}
.ota-avg{position:absolute;left:0;right:0;z-index:1;border-top:1.5px dashed var(--gt);opacity:.75;pointer-events:none}
.ota-avg span{position:absolute;right:0;top:-16px;padding:0 4px;background:var(--w);font-size:9.5px;font-weight:700;color:var(--gt)}
.ota-ch button{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;padding:0;border:0;border-radius:3px 3px 0 0;
               background:none;cursor:pointer}
.ota-ch button.we{background:var(--bgw)}
.ota-ch button:hover .stk{opacity:1;filter:brightness(1.06)}
.ota-ch button:focus-visible{outline:2px solid var(--t);outline-offset:1px}
.ota-ch .stk{display:flex;flex-direction:column-reverse;width:100%;min-height:0;border-radius:4px 4px 0 0;overflow:hidden;
             opacity:.92;transition:opacity .15s}
.ota-ch .stk i{display:block;min-height:0;border-top:1.5px solid var(--w)}
.ota-ch .stk i:last-child{border-top:0}
.ota-ch button.on .stk{opacity:1;box-shadow:0 0 0 2px var(--dk)}
.ota-ch button.mo .stk{opacity:.22}
.ota-ch-lb{margin-left:42px}
.ota-lg{display:flex;flex-wrap:wrap;gap:6px 14px;margin:10px 0 0 42px;font-size:11.5px;font-weight:600;color:var(--gt)}
.ota-lg span{display:inline-flex;align-items:center;gap:5px}
.ota-lg i{width:10px;height:10px;border-radius:2px;display:block}
.ota-lg b{color:var(--dk);font-weight:800}
.ota-ch-lb{display:flex;justify-content:space-between;gap:8px;margin-top:4px;font-size:10px;color:var(--gt);font-weight:600;
           font-variant-numeric:tabular-nums}
.ota-ch-lb span:nth-child(2){text-align:center}
.ota-lv{font-size:10.5px;font-weight:800;color:var(--gt);letter-spacing:.6px;text-transform:uppercase;margin:16px 0 6px}
.ota-ls{display:flex;flex-direction:column;gap:6px;transition:opacity .15s}
.ota-ls.tai{opacity:.45;pointer-events:none}
.ota-row{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:8px 10px;border:1px solid var(--g2);
         border-radius:10px;background:var(--w);font:inherit;color:var(--dk);text-align:left;cursor:pointer;
         transition:border-color .15s,background .15s}
.ota-row:hover{border-color:var(--t3);background:var(--bgw)}
/* dòng cộng cuối khối sàn OTA + dòng kênh chưa phát sinh đơn (vẫn hiện để biết là có mục đó) */
.ota-cong{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
          padding:4px 11px 0;font-size:12px;font-weight:700;color:var(--gt)}
.ota-row.trong{opacity:.55;background:var(--g1)}
.ota-row:active{transform:translateY(1px)}
.ota-row:focus-visible{outline:2px solid var(--t);outline-offset:2px}
.ota-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ota-m .t{font-size:13px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.ota-m .p{font-size:11px;color:var(--gt);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ota-m .b{display:block;height:4px;background:var(--line-soft);border-radius:2px;overflow:hidden}
.ota-m .b i{display:block;height:100%;background:var(--t);border-radius:2px}
.ota-row .v{flex:none;text-align:right;font-size:13px;font-weight:800}
.ota-row .v em{display:block;font-style:normal;font-size:10.5px;font-weight:600;color:var(--gt)}
.ota-row .go{flex:none;font-size:18px;color:var(--gt);line-height:1}

/* thẻ mục lục báo cáo */
.bc-muc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.bc-muc h4{margin:0 0 8px;padding-bottom:6px;border-bottom:2px solid var(--t);
           font-size:10px;font-weight:800;color:var(--gt);letter-spacing:.9px;text-transform:uppercase}
.bc-rp{display:block;border:1px solid var(--g2);background:var(--bgw);border-radius:9px;padding:8px 10px;margin-bottom:7px}
.bc-rp:hover{border-color:var(--t3);background:var(--w)}
.bc-rp:focus-visible{outline:2px solid var(--t);outline-offset:2px}
.bc-rp b{display:block;font-size:12px;font-weight:800;color:var(--dk);line-height:1.3}
.bc-rp span{display:block;font-size:10.5px;color:var(--gt);font-weight:600;line-height:1.4;margin-top:2px}

/* nút đổi nền sáng/tối trên thanh công cụ */
.thm-btn{background:transparent;border:1.5px solid var(--g2);color:var(--gt);width:34px;height:34px;
         border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
         font-size:15px;cursor:pointer;font-family:inherit;padding:0;flex:none}
.thm-btn:hover{border-color:var(--t3);color:var(--t)}
.thm-btn:focus-visible{outline:2px solid var(--t);outline-offset:2px}
/* Biểu tượng đổi theo nền bằng CSS chứ không bằng JS — Blazor vẽ lại nút
   bao nhiêu lần cũng không làm mất trạng thái. Mặc định (chưa chọn) = theo máy. */
.thm-ic{display:none;line-height:1}
.thm-btn .thm-auto{display:inline}
:root[data-theme="light"] .thm-btn .thm-auto,
:root[data-theme="dark"]  .thm-btn .thm-auto{display:none}
:root[data-theme="light"] .thm-btn .thm-sang{display:inline}
:root[data-theme="dark"]  .thm-btn .thm-toi{display:inline}

/* Menu trái/phải: mặc định phải; người dùng bấm nút ⇤/⇥ thì gắn data-menu="left" lên <html> */
.mnu-ic{display:none;line-height:1}
.mnu-btn .mnu-sang-trai{display:inline}
:root[data-menu="left"] .mnu-btn .mnu-sang-trai{display:none}
:root[data-menu="left"] .mnu-btn .mnu-sang-phai{display:inline}
:root[data-menu="left"] .sidebar{right:auto;left:0}
:root[data-menu="left"] .main{margin-right:0;margin-left:var(--sw)}
@media (max-width:900px){
  .mnu-btn{display:none}
  :root[data-menu="left"] .sidebar{transform:translateX(-100%)}
  :root[data-menu="left"] body.sb-open .sidebar{transform:translateX(0);box-shadow:8px 0 32px rgba(0,0,0,.35)}
  :root[data-menu="left"] .main{margin-left:0}
  :root[data-menu="left"] .mob-burger{order:-1;margin-left:0;margin-right:6px}
}

/* Thu hẹp menu (05/10/2026): nút » / « ở đầu menu gắn data-menu-thu="1" lên <html>, menu chỉ còn cột icon,
   rê chuột vào icon thì hiện tên (sidebar.js). Chỉ áp cho màn rộng; điện thoại menu vẫn trượt ra như cũ. */
.sb-thu{margin-left:auto;flex-shrink:0;width:28px;height:28px;border-radius:8px;border:1px solid rgba(255,255,255,.18);
        background:rgba(255,255,255,.06);color:#fff;font-size:16px;line-height:1;cursor:pointer;
        display:inline-flex;align-items:center;justify-content:center;padding:0 0 2px}
.sb-thu:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35)}
.sb-thu:focus-visible{outline:2px solid var(--t3);outline-offset:2px}
.sb-thu-l{display:none}
:root[data-menu="left"] .sb-thu-r,:root[data-menu-thu="1"] .sb-thu-r{display:none}
:root[data-menu="left"] .sb-thu-l,:root[data-menu-thu="1"] .sb-thu-l{display:inline}
:root[data-menu="left"][data-menu-thu="1"] .sb-thu-r{display:inline}
:root[data-menu="left"][data-menu-thu="1"] .sb-thu-l{display:none}
.sb-tip{position:fixed;z-index:1400;pointer-events:none;background:var(--t-deep);color:#fff;font-size:12.5px;font-weight:700;
        padding:6px 10px;border-radius:7px;white-space:nowrap;border:1px solid rgba(255,255,255,.18);box-shadow:0 4px 16px rgba(0,0,0,.3);transform:translateY(-50%)}
@media (min-width:901px){
  :root[data-menu-thu="1"]{--sw:60px}
  :root[data-menu-thu="1"] .sidebar{overflow-x:hidden}
  :root[data-menu-thu="1"] .sb-logo{padding:16px 0;justify-content:center}
  :root[data-menu-thu="1"] .sb-logo > a{display:none !important}   /* thẻ logo có style="display:flex" viết thẳng trong MainLayout */
  :root[data-menu-thu="1"] .sb-search,
  :root[data-menu-thu="1"] .sb-item small,
  :root[data-menu-thu="1"] .sb-sec-h .arr{display:none}
  :root[data-menu-thu="1"] .sb-thu{margin-left:0}
  /* tiêu đề nhóm thành vạch ngăn mảnh */
  :root[data-menu-thu="1"] .sb-sec{margin-top:8px}
  :root[data-menu-thu="1"] .sb-sec.collapsed .sb-sec-body{display:block}   /* không còn tiêu đề để bấm mở, nên hiện hết */
  :root[data-menu-thu="1"] .sb-sec-h{font-size:0;padding:0;margin:0 12px 6px;height:1px;background:rgba(255,255,255,.14)}
  /* mục menu: giấu chữ (font-size 0), chỉ để icon ở giữa */
  :root[data-menu-thu="1"] .sb-item{font-size:0;gap:0;justify-content:center;padding:9px 0}
  :root[data-menu-thu="1"] .sb-item.sub{padding-left:0;background:rgba(0,0,0,.12)}
  :root[data-menu-thu="1"] .sb-item .ic{font-size:17px;width:auto}
  :root[data-menu-thu="1"] .sb-item{position:relative}
  :root[data-menu-thu="1"] .sb-dem{position:absolute;top:3px;right:6px;font-size:10px;min-width:16px;height:16px;padding:0 4px}
  :root[data-menu-thu="1"] .sb-children{padding-left:0}
}
@media (max-width:900px){
  .sb-thu{display:none}
}

@media (max-width:900px){
  .bc-cols{grid-template-columns:1fr !important}
  .bc-cols > * + *{border-left:0;border-top:1px solid var(--line-soft);padding-left:0;padding-top:12px;margin-top:12px}
  .bc-cols > *{padding-right:0}
  .bc-muc{grid-template-columns:1fr !important}
  .bc-kv{font-size:24px}
  .bc-chu{gap:10px;font-size:11.5px}
}

/* ═══════════════════════════════════════════════════════════════════════
   .kh-*  — nhóm trang KHÁCH HÀNG (Quy tắc tích điểm · Danh bạ · BXH · Huy hiệu)
   Vẽ lại 20/09/2026, bản gốc ở .design/khach-hang/preview.html
   Tiền tố kh- vì .card .kpi .rank .inp đã có sẵn trong file này với nghĩa khác.
   Mọi màu đi qua biến → nút đổi nền sáng/tối tự theo, không gõ cứng mã màu.
   ═══════════════════════════════════════════════════════════════════════ */

/* đầu trang: tên trang + 1 câu giải thích + nút */
.kh-hd{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.kh-hd-t{min-width:0;flex:1 1 320px}
.kh-hd h1{font-size:25px;font-weight:900;letter-spacing:-.6px;margin:0 0 5px;color:var(--dk);line-height:1.15}
.kh-hd p{margin:0;font-size:13px;line-height:1.55;color:var(--gt);max-width:62ch}
.kh-hd-a{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* nhãn mục nhỏ */
.kh-eyebrow{font-size:10px;font-weight:800;color:var(--gt);letter-spacing:.9px;text-transform:uppercase;margin:0 0 9px}
.kh-grow{flex:1 1 auto}

/* thẻ */
.kh-card{background:var(--w);border:1px solid var(--bd);border-radius:13px;min-width:0;overflow:hidden}
.kh-card-h{padding:13px 16px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.kh-card-h h2{font-size:14.5px;font-weight:800;margin:0;color:var(--dk);letter-spacing:-.1px}
.kh-card-h .sub{font-size:11.5px;color:var(--gt);font-weight:600}
.kh-card-b{padding:16px}
.kh-card-f{padding:11px 16px;background:var(--g1);border-top:1px solid var(--bd);font-size:11.5px;color:var(--gt);line-height:1.6}

/* ô nhập: nhãn trên, gợi ý dưới — không để input trần trôi nổi */
.kh-f{padding:13px 0;border-bottom:1px dashed var(--bd)}
.kh-f:first-child{padding-top:0}
.kh-f:last-child{border-bottom:0;padding-bottom:0}
.kh-f-l{display:block;font-size:12.5px;font-weight:800;color:var(--dk);margin-bottom:3px}
.kh-f-h{font-size:11.5px;color:var(--gt);line-height:1.5;margin:0 0 8px}
.kh-f-h b{color:var(--dk)}
.kh-inp{font:inherit;font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:700;
        font-variant-numeric:tabular-nums;font-size:14px;background:var(--g1);border:1px solid var(--bd);
        border-radius:9px;padding:9px 11px;color:var(--dk);width:100%;max-width:160px}
.kh-inp:focus{outline:2px solid var(--t);outline-offset:-1px;background:var(--w)}
.kh-unit{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.kh-unit .u{font-size:12px;font-weight:700;color:var(--gt);white-space:nowrap}
.kh-warn{font-size:11.5px;color:var(--rd);font-weight:700;margin-top:6px;display:block;line-height:1.5}

/* công tắc bật/tắt */
.kh-sw{display:flex;align-items:flex-start;gap:11px;padding:12px 13px;border-radius:11px;
       background:var(--g1);border:1px solid var(--bd);margin-bottom:9px;cursor:pointer}
.kh-sw:last-child{margin-bottom:0}
.kh-sw input{margin:2px 0 0;width:17px;height:17px;accent-color:var(--t);flex:none}
.kh-sw b{display:block;font-size:13px;color:var(--dk);margin-bottom:2px}
.kh-sw span{font-size:11.5px;color:var(--gt);line-height:1.5}

/* máy tính thử — biến con số cấu hình thành tiền thật */
.kh-calc{background:var(--t4);border:1px solid var(--t);border-radius:13px;padding:15px 17px}
.kh-calc-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:12px}
.kh-calc-h b{font-size:13.5px;color:var(--t);font-weight:800}
.kh-calc-h .lb{font-size:12px;color:var(--gt);font-weight:600}
.kh-calc .kh-inp{background:var(--w);max-width:190px;font-size:15px}
.kh-calc-rows{display:flex;flex-direction:column;gap:7px}
.kh-cr{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:11px;
       background:var(--w);border:1px solid var(--bd);border-radius:10px;padding:10px 13px}
.kh-cr .ic{font-size:19px;line-height:1}
.kh-cr .nm{font-size:12.5px;font-weight:800;color:var(--dk)}
.kh-cr .nm small{display:block;font-size:10.5px;font-weight:600;color:var(--gt);margin-top:1px}
.kh-cr .pt{font-size:12.5px;color:var(--gt);font-weight:700;white-space:nowrap}
.kh-cr .vnd{font-size:16px;font-weight:800;color:var(--gn);white-space:nowrap;
            font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.kh-calc-ft{font-size:11.5px;color:var(--gt);line-height:1.6;margin:11px 0 0}
.kh-calc-ft b{color:var(--dk)}

/* thẻ hạng thành viên — thay bảng input dàn ngang */
.kh-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:13px}
.kh-tier{border:1px solid var(--bd);border-radius:13px;background:var(--w);overflow:hidden;min-width:0}
.kh-tier-top{padding:12px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--bd);position:relative}
.kh-tier-top::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--tc,var(--bd))}
.kh-tier-top .ic{font-size:24px;line-height:1;flex:none}
.kh-tier-top .ttl{min-width:0;flex:1 1 auto}
.kh-tier-top .ttl b{display:block;font-size:15px;font-weight:800;color:var(--dk);line-height:1.2}
.kh-tier-top .ttl small{font-size:10.5px;color:var(--gt);font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:600}
.kh-cb{font-size:12px;font-weight:800;padding:5px 9px;border-radius:99px;white-space:nowrap;
       background:var(--gl);color:var(--gn);border:1px solid var(--gn)}
.kh-tier-b{padding:12px 14px;display:flex;flex-direction:column;gap:11px}
/* nowrap: để đơn vị ("lần"/"điểm"/"₫") đứng cạnh ô nhập, không rơi xuống dòng dưới */
.kh-tr{display:flex;align-items:center;gap:9px;flex-wrap:nowrap}
.kh-tr .k{font-size:11.5px;font-weight:700;color:var(--gt);flex:1 1 auto;min-width:0;line-height:1.35}
.kh-tr .kh-inp{flex:0 1 112px;max-width:112px;font-size:13px;padding:7px 9px}
.kh-tr .u{font-size:11px;color:var(--gt);font-weight:700;flex:none}
.kh-tier-ft{padding:9px 14px;background:var(--g1);border-top:1px solid var(--bd);
            font-size:11.5px;color:var(--gt);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.kh-tier-ft b{color:var(--dk);font-family:'IBM Plex Mono',ui-monospace,monospace}

/* ô số lớn */
.kh-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}
.kh-kpi{background:var(--w);border:1px solid var(--bd);border-radius:12px;padding:13px 15px;min-width:0;position:relative}
.kh-kpi .ic{position:absolute;top:12px;right:14px;font-size:17px;opacity:.45}
.kh-kpi .k{font-size:10px;font-weight:800;color:var(--gt);letter-spacing:.8px;text-transform:uppercase}
.kh-kpi .v{font-size:27px;font-weight:900;letter-spacing:-1px;color:var(--dk);margin-top:3px;
           line-height:1.05;font-variant-numeric:tabular-nums}
.kh-kpi .d{font-size:11px;color:var(--gt);margin-top:4px;line-height:1.45;font-weight:600}

/* bảng có khung cuộn riêng — chống tràn ngang ở khổ điện thoại */
.kh-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.kh-tbl{width:100%;border-collapse:collapse;min-width:520px}
.kh-tbl th{font-size:10.5px;font-weight:800;color:var(--gt);letter-spacing:.6px;text-transform:uppercase;
           text-align:left;padding:10px 13px;border-bottom:1px solid var(--bd);white-space:nowrap;background:var(--g1)}
.kh-tbl td{padding:11px 13px;border-bottom:1px solid var(--bd);font-size:13px;vertical-align:middle}
.kh-tbl tr:last-child td{border-bottom:0}
.kh-tbl tbody tr:hover{background:var(--g1)}
.kh-r{text-align:right}
.kh-mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:700;font-variant-numeric:tabular-nums}

/* huy chương thứ hạng */
.kh-rank{display:inline-flex;align-items:center;justify-content:center;width:29px;height:29px;border-radius:50%;
         font-weight:800;font-size:13px;background:var(--g2);color:var(--gt);
         font-family:'IBM Plex Mono',ui-monospace,monospace}
.kh-rank.g1{background:linear-gradient(180deg,#fbbf24,#d97706);color:#3b2400}
.kh-rank.g2{background:linear-gradient(180deg,#e2e8f0,#94a3b8);color:#1e293b}
.kh-rank.g3{background:linear-gradient(180deg,#fdba74,#c2410c);color:#3b1200}

/* tên người + ảnh đại diện chữ */
.kh-who{display:flex;align-items:center;gap:10px;min-width:0}
.kh-who .av{width:32px;height:32px;border-radius:50%;background:var(--g2);color:var(--gt);
            display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12.5px;flex:none}
.kh-who .tx{min-width:0}
.kh-who .tx b{display:block;font-size:13px;color:var(--dk);font-weight:700}
.kh-who .tx small{font-size:11px;color:var(--gt)}

/* chip / nhãn */
.kh-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 9px;
         border-radius:99px;background:var(--g1);border:1px solid var(--bd);color:var(--gt);white-space:nowrap}
.kh-chip.on{background:var(--t);border-color:var(--t);color:#fff}

/* lời nhắc */
.kh-note{border:1px solid var(--bd);border-left:4px solid var(--t);border-radius:0 11px 11px 0;background:var(--w);
         padding:12px 15px;font-size:12.5px;line-height:1.6;color:var(--gt)}
.kh-note b{color:var(--dk)}
.kh-note.canh{border-left-color:var(--or)}
.kh-note.loi{border-left-color:var(--rd)}

/* lưới */
.kh-2{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;align-items:start}
.kh-23{display:grid;grid-template-columns:1.8fr 1fr;gap:14px;align-items:start}
.kh-stack{display:flex;flex-direction:column;gap:14px}
.kh-views{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}

/* trống */
.kh-empty{padding:34px 18px;text-align:center;color:var(--gt);font-size:13px;line-height:1.6}
.kh-empty .e{font-size:30px;display:block;margin-bottom:8px;opacity:.5}

/* lưới huy hiệu */
.kh-bgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:13px}
.kh-bg{background:var(--w);border:1px solid var(--bd);border-radius:13px;overflow:hidden;display:flex;flex-direction:column}
.kh-bg-top{padding:20px 15px;display:flex;align-items:center;justify-content:center;background:var(--g1);
           border-bottom:1px solid var(--bd);min-height:84px}
.kh-bg-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;letter-spacing:.7px;
           padding:7px 14px;border-radius:7px;color:#fff;text-transform:uppercase}
.kh-bg-b{padding:12px 15px;flex:1 1 auto;min-width:0}
.kh-bg-b h3{margin:0 0 3px;font-size:14px;font-weight:800;color:var(--dk)}
.kh-bg-b p{margin:0;font-size:12px;color:var(--gt);line-height:1.5}
.kh-bg-f{padding:9px 15px;border-top:1px solid var(--bd);display:flex;align-items:center;gap:7px;background:var(--g1)}

/* ═══ khổ điện thoại ═══ */
@media (max-width:900px){
  .kh-2,.kh-23{grid-template-columns:1fr}
}
@media (max-width:560px){
  .kh-hd h1{font-size:21px}
  .kh-tiers{grid-template-columns:1fr}
  .kh-kpis{grid-template-columns:1fr 1fr}
  .kh-kpi .v{font-size:23px}
  .kh-cr{grid-template-columns:auto 1fr;row-gap:7px}
  .kh-cr .pt,.kh-cr .vnd{grid-column:2;justify-self:start}
  .kh-unit{flex-wrap:nowrap}
  .kh-unit .kh-inp{flex:1 1 auto;max-width:none;min-width:0}
  .kh-unit .u{flex:none}
  .kh-hd-a{width:100%}
  .kh-hd-a .btn{flex:1 1 auto;justify-content:center}
}



/* ═══════════════════════════════════════════════════════════════════════
   .kk-*  — trang GIÁ KKDAY (/admin/kkday-prices), vẽ lại 21/09/2026
   Khung chung dùng lại .kh-card / .kh-tbl / .kh-scroll / .kh-chip / .kh-note
   / .kh-empty của nhóm Khách hàng, ở đây chỉ khai phần riêng của trang này.
   Mọi màu đi qua biến → nút đổi nền sáng/tối tự theo, không gõ cứng mã màu.
   ═══════════════════════════════════════════════════════════════════════ */

/* hàng ô đếm việc, bấm để đổi loại đang xem.
   Dùng chung với 2 trang sổ Tour 2026 qua bí danh .dc-lo/.dc-o — cùng một kiểu,
   không chép lại lần nữa. */
.kk-lo,.dc-lo{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:11px;margin-bottom:16px}
/* display:block để thắng .btn/MudBlazor đặt button{display:inline-flex} —
   không ép thì số và nhãn bị xếp NGANG chứ không chồng lên nhau. */
.kk-o,.dc-o{display:block;text-align:left;background:var(--w);border:1px solid var(--bd);border-left:4px solid var(--bd);
      border-radius:12px;padding:11px 14px;cursor:pointer;font-family:inherit;min-width:0;
      box-shadow:0 1px 6px rgba(0,0,0,.06);transition:border-color .12s,background .12s}
.kk-o:hover,.dc-o:hover{border-color:var(--t3)}
.kk-o:focus-visible,.dc-o:focus-visible{outline:2px solid var(--t);outline-offset:2px}
.kk-o .n,.dc-o .n{display:block;font-size:26px;font-weight:800;line-height:1.05;letter-spacing:-1px;color:var(--dk);
         font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
.kk-o .l,.dc-o .l{display:block;font-size:11.5px;font-weight:700;color:var(--gt);line-height:1.35;margin-top:3px}
.kk-o.on,.dc-o.on{border-color:var(--t);border-left-color:var(--t);background:var(--t4)}
.kk-o.on .n,.kk-o.on .l,.dc-o.on .n,.dc-o.on .l{color:var(--t)}
.kk-o.trong,.dc-o.trong{opacity:.55}
.kk-o.trong .n,.dc-o.trong .n{color:var(--gt)}

/* bảng */
.kk-tbl{min-width:680px}
.kk-tbl td{vertical-align:top}
.kk-sp{min-width:0;max-width:340px}
.kk-sp b{display:block;font-size:13px;font-weight:700;color:var(--dk);line-height:1.35}
.kk-sp small{display:block;font-size:11px;color:var(--gt);font-weight:600;margin-top:2px;line-height:1.4}
.kk-tbl td.kh-r{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:700;
                font-variant-numeric:tabular-nums;white-space:nowrap}
.kk-trong{color:var(--gt)}
.kk-note{font-size:11.5px;color:var(--gt);line-height:1.5;display:block;max-width:300px}
.kk-note.canh{color:var(--err-text);font-weight:700}
.kk-act{white-space:nowrap}
.kk-act .btn{margin-left:5px}

/* dòng gói bán lỗ — máy không dám quyết thay, phải có người nhìn */
.kk-loi{background:var(--rl)}
.kk-loi td:first-child{box-shadow:inset 3px 0 0 var(--rd)}
.kk-loi:hover{background:var(--rl)}

/* câu hướng dẫn dưới tiêu đề thẻ */
.kk-huong{padding:10px 16px;background:var(--g1);border-bottom:1px solid var(--bd);
          font-size:12px;color:var(--gt);line-height:1.55}

/* lời báo sau khi bấm */
.kk-toast{position:fixed;bottom:24px;right:24px;background:var(--gn);color:var(--on-accent);
          padding:11px 18px;border-radius:10px;font-weight:700;z-index:300;
          box-shadow:0 6px 20px rgba(0,0,0,.18)}

@media (max-width:560px){
  .kk-lo{grid-template-columns:1fr 1fr;gap:9px}
  .kk-o{padding:9px 11px}
  .kk-o .n{font-size:22px}
  .kk-toast{left:16px;right:16px;bottom:16px;text-align:center}
}

/* =====================================================================
   THANG MÀU PHỤ  (20/09/2026) — bước 2 của nền tối
   83 mã màu trước đây gõ cứng rải rác trong 200+ file razor, nằm NGOÀI bộ
   nhận diện go365 (xám/đỏ/cam/vàng/lục/lam/tím kiểu Tailwind).
   · Giá trị NỀN SÁNG giữ Y HỆT mã cũ -> giao diện sáng không đổi một pixel.
   · Giá trị NỀN TỐI suy ra theo VAI TRÒ của màu, không đảo mù quáng:
       -nen   màu nền nhạt  -> nền sâu cùng sắc  (giữ đỏ cảnh báo vẫn đỏ)
       -vien  màu viền      -> viền đậm cùng sắc
       -chu   màu chữ đậm   -> màu sáng, đọc được trên mặt thẻ
     Đã đo: 83/83 đạt ngưỡng tương phản (chữ >= 4.5:1 trên mặt thẻ #17292a,
     nền >= 4.5:1 với màu chữ #e3ddcc, viền >= 1.6:1).
   Thêm màu mới thì thêm vào CẢ BA khối dưới đây.
   ===================================================================== */
:root{
  /* cam */
  --c-cam-chu:#92400e;
  --c-cam-chu-2:#b45309;
  --c-cam-chu-3:#f59e0b;
  --c-cam-chu-4:#9a3412;
  --c-cam-chu-5:#78350f;
  --c-cam-chu-6:#c2410c;
  --c-cam-chu-7:#fbbf24;
  --c-cam-chu-8:#854d0e;
  --c-cam-chu-9:#7c2d12;
  --c-cam-chu-10:#f97316;
  --c-cam-nen:#fff7ed;
  --c-cam-vien:#fed7aa;
  /* do */
  --c-do-chu:#b91c1c;
  --c-do-chu-2:#991b1b;
  --c-do-chu-3:#7f1d1d;
  --c-do-chu-4:#9d174d;
  --c-do-nen:#fef2f2;
  --c-do-nen-2:#fecaca;
  --c-do-vien:#fca5a5;
  /* lam */
  --c-lam-chu:#1e40af;
  --c-lam-chu-2:#4338ca;
  --c-lam-chu-3:#3730a3;
  --c-lam-chu-4:#0369a1;
  --c-lam-nen:#eff6ff;
  --c-lam-nen-2:#eef2ff;
  --c-lam-nen-3:#c7d2fe;
  --c-lam-nen-4:#bae6fd;
  --c-lam-nen-5:#f0f9ff;
  --c-lam-nen-6:#e0e7ff;
  --c-lam-nen-7:#bfdbfe;
  /* luc */
  --c-luc-chu:#15803d;
  --c-luc-chu-2:#166534;
  --c-luc-chu-3:#065f46;
  --c-luc-chu-4:#6ee7b7;
  --c-luc-chu-5:#10b981;
  --c-luc-chu-6:#0a7d5a;
  --c-luc-chu-7:#047857;
  --c-luc-nen:#f0fdf4;
  --c-luc-nen-2:#bbf7d0;
  --c-luc-nen-3:#ecfdf5;
  --c-luc-nen-4:#d1fae5;
  --c-luc-vien:#86efac;
  --c-luc-vien-2:#a7f3d0;
  /* mongket */
  --c-mongket-chu:#0ea5e9;
  --c-mongket-chu-2:#0f766e;
  --c-mongket-chu-3:#67e8f9;
  --c-mongket-chu-4:#0e7490;
  --c-mongket-chu-5:#155e75;
  --c-mongket-nen:#ecfeff;
  --c-mongket-nen-2:#f0fdfa;
  /* tim */
  --c-tim-chu:#8b5cf6;
  --c-tim-chu-2:#5b21b6;
  /* vang */
  --c-vang-chu:#fcd34d;
  --c-vang-nen:#fef3c7;
  --c-vang-nen-2:#fffbe5;
  --c-vang-nen-3:#fffbeb;
  --c-vang-nen-4:#fffdf5;
  --c-vang-vien:#fde68a;
  /* xam */
  --c-xam-chu:#64748b;
  --c-xam-chu-2:#6b7280;
  --c-xam-chu-3:#475569;
  --c-xam-chu-4:#374151;
  --c-xam-chu-5:#0d1c1a;
  --c-xam-chu-6:#334155;
  --c-xam-chu-7:#6b7c79;
  --c-xam-chu-8:#4f4838;
  --c-xam-chu-9:#0f172a;
  --c-xam-chu-10:#3f4f4c;
  --c-xam-nen:#e5e7eb;
  --c-xam-nen-2:#f1f5f9;
  --c-xam-nen-3:#f8fafc;
  --c-xam-nen-4:#f3f4f6;
  --c-xam-nen-5:#f9fafb;
  --c-xam-nen-6:#e2e8f0;
  --c-xam-nen-7:#f1f5f4;
  --c-xam-nen-8:#fafafa;
  --c-xam-nen-9:#fafbfc;
  --c-xam-nen-10:#fafbfb;
  --c-xam-nen-11:#fafaf5;
  --c-xam-vien:#cbd5e1;
  --c-xam-vien-2:#94a3b8;
  --c-xam-vien-3:#9ca3af;
  --c-xam-vien-4:#d1d5db;
}
:root[data-theme="dark"]{
  /* cam */
  --c-cam-chu:#e6b394;
  --c-cam-chu-2:#e6b794;
  --c-cam-chu-3:#e2bf83;
  --c-cam-chu-4:#e6a894;
  --c-cam-chu-5:#e6b194;
  --c-cam-chu-6:#e6ac94;
  --c-cam-chu-7:#e2c783;
  --c-cam-chu-8:#e6bf94;
  --c-cam-chu-9:#e6a994;
  --c-cam-chu-10:#e2aa83;
  --c-cam-nen:#271f15;
  --c-cam-vien:#725738;
  /* do */
  --c-do-chu:#e69494;
  --c-do-chu-2:#e49595;
  --c-do-chu-3:#e09999;
  --c-do-chu-4:#e694b5;
  --c-do-nen:#261414;
  --c-do-nen-2:#2f1919;
  --c-do-vien:#723838;
  /* lam */
  --c-lam-chu:#95a8e5;
  --c-lam-chu-2:#938dd8;
  --c-lam-chu-3:#a29edb;
  --c-lam-chu-4:#94c9e6;
  --c-lam-nen:#151c26;
  --c-lam-nen-2:#151927;
  --c-lam-nen-3:#1a1e30;
  --c-lam-nen-4:#1b2b33;
  --c-lam-nen-5:#151f26;
  --c-lam-nen-6:#171b2a;
  --c-lam-nen-7:#1b2532;
  /* luc */
  --c-luc-chu:#94e5b2;
  --c-luc-chu-2:#99e1b4;
  --c-luc-chu-3:#94e6cf;
  --c-luc-chu-4:#84e1bc;
  --c-luc-chu-5:#94e6cb;
  --c-luc-chu-6:#94e6cd;
  --c-luc-chu-7:#94e6ce;
  --c-luc-nen:#15271a;
  --c-luc-nen-2:#1c3424;
  --c-luc-nen-3:#15281f;
  --c-luc-nen-4:#192e23;
  --c-luc-vien:#38724d;
  --c-luc-vien-2:#387258;
  /* mongket */
  --c-mongket-chu:#83c4e2;
  --c-mongket-chu-2:#94e6df;
  --c-mongket-chu-3:#83d7e2;
  --c-mongket-chu-4:#94d4e6;
  --c-mongket-chu-5:#95d1e4;
  --c-mongket-nen:#152627;
  --c-mongket-nen-2:#152723;
  /* tim */
  --c-tim-chu:#a083e2;
  --c-tim-chu-2:#b496e4;
  /* vang */
  --c-vang-chu:#e2cc83;
  --c-vang-nen:#302b1a;
  --c-vang-nen-2:#292616;
  --c-vang-nen-3:#272415;
  --c-vang-nen-4:#252214;
  --c-vang-vien:#726738;
  /* xam */
  --c-xam-chu:#abbab9;
  --c-xam-chu-2:#abbab9;
  --c-xam-chu-3:#b6c3c2;
  --c-xam-chu-4:#b6c3c2;
  --c-xam-chu-5:#b6c3c2;
  --c-xam-chu-6:#b6c3c2;
  --c-xam-chu-7:#abbab9;
  --c-xam-chu-8:#b6c3c2;
  --c-xam-chu-9:#b6c3c2;
  --c-xam-chu-10:#b6c3c2;
  --c-xam-nen:#1e2726;
  --c-xam-nen-2:#1a2221;
  --c-xam-nen-3:#19201f;
  --c-xam-nen-4:#1a2222;
  --c-xam-nen-5:#19201f;
  --c-xam-nen-6:#1e2726;
  --c-xam-nen-7:#1b2322;
  --c-xam-nen-8:#19201f;
  --c-xam-nen-9:#19201f;
  --c-xam-nen-10:#19201f;
  --c-xam-nen-11:#1a2120;
  --c-xam-vien:#4a615e;
  --c-xam-vien-2:#4a615e;
  --c-xam-vien-3:#4a615e;
  --c-xam-vien-4:#4a615e;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    /* cam */
    --c-cam-chu:#e6b394;
    --c-cam-chu-2:#e6b794;
    --c-cam-chu-3:#e2bf83;
    --c-cam-chu-4:#e6a894;
    --c-cam-chu-5:#e6b194;
    --c-cam-chu-6:#e6ac94;
    --c-cam-chu-7:#e2c783;
    --c-cam-chu-8:#e6bf94;
    --c-cam-chu-9:#e6a994;
    --c-cam-chu-10:#e2aa83;
    --c-cam-nen:#271f15;
    --c-cam-vien:#725738;
    /* do */
    --c-do-chu:#e69494;
    --c-do-chu-2:#e49595;
    --c-do-chu-3:#e09999;
    --c-do-chu-4:#e694b5;
    --c-do-nen:#261414;
    --c-do-nen-2:#2f1919;
    --c-do-vien:#723838;
    /* lam */
    --c-lam-chu:#95a8e5;
    --c-lam-chu-2:#938dd8;
    --c-lam-chu-3:#a29edb;
    --c-lam-chu-4:#94c9e6;
    --c-lam-nen:#151c26;
    --c-lam-nen-2:#151927;
    --c-lam-nen-3:#1a1e30;
    --c-lam-nen-4:#1b2b33;
    --c-lam-nen-5:#151f26;
    --c-lam-nen-6:#171b2a;
    --c-lam-nen-7:#1b2532;
    /* luc */
    --c-luc-chu:#94e5b2;
    --c-luc-chu-2:#99e1b4;
    --c-luc-chu-3:#94e6cf;
    --c-luc-chu-4:#84e1bc;
    --c-luc-chu-5:#94e6cb;
    --c-luc-chu-6:#94e6cd;
    --c-luc-chu-7:#94e6ce;
    --c-luc-nen:#15271a;
    --c-luc-nen-2:#1c3424;
    --c-luc-nen-3:#15281f;
    --c-luc-nen-4:#192e23;
    --c-luc-vien:#38724d;
    --c-luc-vien-2:#387258;
    /* mongket */
    --c-mongket-chu:#83c4e2;
    --c-mongket-chu-2:#94e6df;
    --c-mongket-chu-3:#83d7e2;
    --c-mongket-chu-4:#94d4e6;
    --c-mongket-chu-5:#95d1e4;
    --c-mongket-nen:#152627;
    --c-mongket-nen-2:#152723;
    /* tim */
    --c-tim-chu:#a083e2;
    --c-tim-chu-2:#b496e4;
    /* vang */
    --c-vang-chu:#e2cc83;
    --c-vang-nen:#302b1a;
    --c-vang-nen-2:#292616;
    --c-vang-nen-3:#272415;
    --c-vang-nen-4:#252214;
    --c-vang-vien:#726738;
    /* xam */
    --c-xam-chu:#abbab9;
    --c-xam-chu-2:#abbab9;
    --c-xam-chu-3:#b6c3c2;
    --c-xam-chu-4:#b6c3c2;
    --c-xam-chu-5:#b6c3c2;
    --c-xam-chu-6:#b6c3c2;
    --c-xam-chu-7:#abbab9;
    --c-xam-chu-8:#b6c3c2;
    --c-xam-chu-9:#b6c3c2;
    --c-xam-chu-10:#b6c3c2;
    --c-xam-nen:#1e2726;
    --c-xam-nen-2:#1a2221;
    --c-xam-nen-3:#19201f;
    --c-xam-nen-4:#1a2222;
    --c-xam-nen-5:#19201f;
    --c-xam-nen-6:#1e2726;
    --c-xam-nen-7:#1b2322;
    --c-xam-nen-8:#19201f;
    --c-xam-nen-9:#19201f;
    --c-xam-nen-10:#19201f;
    --c-xam-nen-11:#1a2120;
    --c-xam-vien:#4a615e;
    --c-xam-vien-2:#4a615e;
    --c-xam-vien-3:#4a615e;
    --c-xam-vien-4:#4a615e;
  }
}


/* ── Thang màu phụ, đợt 2: phủ nốt 255 mã còn lại (430 chỗ) ──
   Cùng quy tắc với khối trên. Sau đợt này, phần giao diện của admin không còn
   mã màu gõ cứng nào (trừ khối @code dựng HTML email/PDF và 15 file phiên khác
   đang sửa dở). 253/255 đạt ngưỡng tương phản; 2 màu viền ở 1,5-1,58:1 — viền
   mảnh nên chấp nhận được. */
:root{
  /* cam */
  --c-cam-chu-11:#d97706;
  --c-cam-chu-12:#ea580c;
  --c-cam-chu-13:#5b3a09;
  --c-cam-chu-14:#a15c00;
  --c-cam-chu-15:#7d5a00;
  --c-cam-chu-16:#8a6100;
  --c-cam-chu-17:#92690a;
  --c-cam-chu-18:#f5a623;
  --c-cam-chu-19:#7a4a00;
  --c-cam-chu-20:#fb923c;
  --c-cam-chu-21:#b07d00;
  --c-cam-chu-22:#7c5800;
  --c-cam-chu-23:#f7a800;
  --c-cam-chu-24:#a15c07;
  --c-cam-chu-25:#9a6b1f;
  --c-cam-chu-26:#7c3a02;
  --c-cam-chu-27:#a06a00;
  --c-cam-chu-28:#d34d00;
  --c-cam-chu-29:#856404;
  --c-cam-chu-30:#ff9554;
  --c-cam-chu-31:#e85100;
  --c-cam-chu-32:#a16207;
  --c-cam-chu-33:#7a4c00;
  --c-cam-chu-34:#855400;
  --c-cam-chu-35:#8a5800;
  --c-cam-nen-2:#ffedd5;
  --c-cam-nen-3:#fff7e6;
  --c-cam-nen-4:#fffbf0;
  --c-cam-nen-5:#fff3d4;
  --c-cam-nen-6:#fff1cc;
  --c-cam-nen-7:#fff9ea;
  --c-cam-nen-8:#fff4e5;
  --c-cam-nen-9:#ffe9b3;
  --c-cam-nen-10:#fffaf3;
  --c-cam-nen-11:#fff8f4;
  --c-cam-nen-12:#f7e7c2;
  --c-cam-nen-13:#fff8ec;
  --c-cam-nen-14:#fff1d6;
  --c-cam-nen-15:#fff6e5;
  --c-cam-nen-16:#fffaf2;
  --c-cam-nen-17:#fff9f4;
  --c-cam-nen-18:#f6d5bd;
  --c-cam-nen-19:#fef3e0;
  --c-cam-vien-2:#fdba74;
  --c-cam-vien-3:#ffe0a3;
  --c-cam-vien-4:#f0dca6;
  --c-cam-vien-5:#ffdf9e;
  --c-cam-vien-6:#f0b775;
  --c-cam-vien-7:#ffb27a;
  --c-cam-vien-8:#ffb47a;
  --c-cam-vien-9:#ff9d7a;
  --c-cam-vien-10:#f0dca8;
  --c-cam-vien-11:#e6cf9a;
  --c-cam-vien-12:#f0d49a;
  /* do */
  --c-do-chu-5:#c0392b;
  --c-do-chu-6:#cf1322;
  --c-do-chu-7:#ef4444;
  --c-do-chu-8:#e11d48;
  --c-do-chu-9:#9f1239;
  --c-do-chu-10:#ea4335;
  --c-do-chu-11:#7a1f3d;
  --c-do-chu-12:#c62828;
  --c-do-chu-13:#9c1c1c;
  --c-do-nen-3:#fff1f0;
  --c-do-nen-4:#ffccc7;
  --c-do-nen-5:#fff4f4;
  --c-do-nen-6:#fff1f2;
  --c-do-nen-7:#fff1f1;
  --c-do-nen-8:#fff5f5;
  --c-do-nen-9:#f3c0c0;
  --c-do-nen-10:#ffe4e6;
  --c-do-nen-11:#fecdd3;
  --c-do-nen-12:#f3c3c3;
  --c-do-nen-13:#fff7f7;
  --c-do-nen-14:#fff2f2;
  --c-do-nen-15:#ffd9d9;
  --c-do-vien-2:#f87171;
  --c-do-vien-3:#f0b4b4;
  --c-do-vien-4:#fda4af;
  --c-do-vien-5:#fb7185;
  /* hong */
  --c-hong-nen:#fce7f3;
  --c-hong-vien:#f9a8d4;
  /* lam */
  --c-lam-chu-5:#3b82f6;
  --c-lam-chu-6:#075985;
  --c-lam-chu-7:#1d4ed8;
  --c-lam-chu-8:#1e3a8a;
  --c-lam-chu-9:#6366f1;
  --c-lam-chu-10:#0c4a6e;
  --c-lam-chu-11:#0284c7;
  --c-lam-chu-12:#0068ff;
  --c-lam-chu-13:#1a0dab;
  --c-lam-chu-14:#60a5fa;
  --c-lam-chu-15:#0050a0;
  --c-lam-nen-8:#ddd6fe;
  --c-lam-nen-9:#eef6ff;
  --c-lam-nen-10:#f5f3ff;
  --c-lam-nen-11:#fbfdff;
  --c-lam-nen-12:#c4b5fd;
  --c-lam-nen-13:#faf9ff;
  --c-lam-nen-14:#fafaff;
  --c-lam-nen-15:#f4f0ff;
  --c-lam-nen-16:#e0f4ff;
  --c-lam-vien:#93c5fd;
  --c-lam-vien-2:#a78bfa;
  --c-lam-vien-3:#a5b4fc;
  /* luc */
  --c-luc-chu-8:#22c55e;
  --c-luc-chu-9:#34d399;
  --c-luc-chu-10:#14713a;
  --c-luc-chu-11:#25d366;
  --c-luc-chu-12:#115e4a;
  --c-luc-chu-13:#22d39a;
  --c-luc-chu-14:#0c5a3a;
  --c-luc-chu-15:#7ee2a8;
  --c-luc-chu-16:#059669;
  --c-luc-chu-17:#14532d;
  --c-luc-chu-18:#0a7036;
  --c-luc-nen-5:#f0fff4;
  --c-luc-nen-6:#eafaf0;
  --c-luc-nen-7:#e6f7ed;
  /* mongket */
  --c-mongket-chu-6:#0a6e72;
  --c-mongket-chu-7:#013d3d;
  --c-mongket-chu-8:#0d7377;
  --c-mongket-chu-9:#7ce0e3;
  --c-mongket-chu-10:#014a4a;
  --c-mongket-chu-11:#0891b2;
  --c-mongket-chu-12:#38bdf8;
  --c-mongket-chu-13:#22d3ee;
  --c-mongket-chu-14:#0d9488;
  --c-mongket-chu-15:#0c1f25;
  --c-mongket-chu-16:#04898c;
  --c-mongket-chu-17:#14b8a6;
  --c-mongket-chu-18:#062528;
  --c-mongket-chu-19:#0a3a3a;
  --c-mongket-chu-20:#036668;
  --c-mongket-chu-21:#02797b;
  --c-mongket-chu-22:#0c2b2b;
  --c-mongket-chu-23:#0a8270;
  --c-mongket-nen-3:#cffafe;
  --c-mongket-nen-4:#e0fbfc;
  --c-mongket-nen-5:#ccfbf1;
  --c-mongket-nen-6:#f0fbfb;
  --c-mongket-nen-7:#fbfefe;
  --c-mongket-vien:#a5f3fc;
  --c-mongket-vien-2:#7fd4d6;
  --c-mongket-vien-3:#7dd3fc;
  /* tim */
  --c-tim-chu-3:#6d28d9;
  --c-tim-chu-4:#5a26a0;
  --c-tim-nen:#f0e4ff;
  /* vang */
  --c-vang-chu-2:#6b5708;
  --c-vang-chu-3:#3d3200;
  --c-vang-nen-5:#fffbe6;
  --c-vang-nen-6:#fffdf6;
  --c-vang-nen-7:#fff7d6;
  --c-vang-nen-8:#fef6d9;
  --c-vang-nen-9:#fef9c3;
  --c-vang-nen-10:#fff6d6;
  --c-vang-nen-11:#fff3c0;
  --c-vang-nen-12:#fdfcf8;
  --c-vang-nen-13:#fff8e0;
  --c-vang-vien-2:#ffe58f;
  --c-vang-vien-3:#fef08a;
  /* xam */
  --c-xam-chu-11:#6b7a7a;
  --c-xam-chu-12:#1f2937;
  --c-xam-chu-13:#1a2233;
  --c-xam-chu-14:#111827;
  --c-xam-chu-15:#4b5563;
  --c-xam-chu-16:#3f5559;
  --c-xam-chu-17:#0f2a2b;
  --c-xam-chu-18:#5b6666;
  --c-xam-chu-19:#0b1e1f;
  --c-xam-chu-20:#7d9094;
  --c-xam-chu-21:#6b46c1;
  --c-xam-chu-22:#7a8585;
  --c-xam-chu-23:#1e293b;
  --c-xam-chu-24:#1c2333;
  --c-xam-chu-25:#202124;
  --c-xam-chu-26:#4d5156;
  --c-xam-chu-27:#27332f;
  --c-xam-chu-28:#5b4a2a;
  --c-xam-chu-29:#5b4a42;
  --c-xam-chu-30:#6b8084;
  --c-xam-chu-31:#365e3b;
  --c-xam-chu-32:#5b6f73;
  --c-xam-chu-33:#7c6f57;
  --c-xam-nen-12:#cfe4e2;
  --c-xam-nen-13:#f6f6f6;
  --c-xam-nen-14:#e0e8e7;
  --c-xam-nen-15:#eef0f3;
  --c-xam-nen-16:#e8f5f5;
  --c-xam-nen-17:#e6f1f1;
  --c-xam-nen-18:#e0f2fe;
  --c-xam-nen-19:#f6f8fa;
  --c-xam-nen-20:#eef2f7;
  --c-xam-nen-21:#f0f9f9;
  --c-xam-nen-22:#f7f8f8;
  --c-xam-nen-23:#e0e0e0;
  --c-xam-nen-24:#e0f2f1;
  --c-xam-nen-25:#eff8f8;
  --c-xam-nen-26:#d7dede;
  --c-xam-nen-27:#f0f9f4;
  --c-xam-nen-28:#e6f4f0;
  --c-xam-nen-29:#f1f2f4;
  --c-xam-nen-30:#eef0f2;
  --c-xam-nen-31:#f6f8f8;
  --c-xam-nen-32:#f4f6f8;
  --c-xam-nen-33:#e6e6e6;
  --c-xam-nen-34:#f2f2f2;
  --c-xam-nen-35:#f6fbfa;
  --c-xam-nen-36:#eef7f6;
  --c-xam-nen-37:#fafbfa;
  --c-xam-nen-38:#e6f2f0;
  --c-xam-nen-39:#eef2f1;
  --c-xam-nen-40:#f5fbfb;
  --c-xam-nen-41:#e4e9ed;
  --c-xam-nen-42:#f1f5f6;
  --c-xam-nen-43:#f4fbf6;
  --c-xam-nen-44:#f6f4ee;
  --c-xam-nen-45:#cde7d9;
  --c-xam-nen-46:#f5f5f5;
  --c-xam-nen-47:#f4f9f9;
  --c-xam-nen-48:#d7ebeb;
  --c-xam-nen-49:#f4f1ea;
  --c-xam-nen-50:#f4f4f4;
  --c-xam-nen-51:#e5e5e5;
  --c-xam-nen-52:#f8fafa;
  --c-xam-nen-53:#eaf2f2;
  --c-xam-nen-54:#fbfdfd;
  --c-xam-nen-55:#f1f5f5;
  --c-xam-nen-56:#f1f3f5;
  --c-xam-nen-57:#e8f2f2;
  --c-xam-nen-58:#d6e9e9;
  --c-xam-nen-59:#f2f7f7;
  --c-xam-nen-60:#e4efef;
  --c-xam-nen-61:#e2f0f0;
  --c-xam-nen-62:#cfe5e5;
  --c-xam-vien-5:#e6dac1;
  --c-xam-vien-6:#d8c9ab;
  --c-xam-vien-7:#cdd5da;
  --c-xam-vien-8:#86b58a;
  --c-xam-vien-9:#cf9a9a;
  --c-xam-vien-10:#c7e6db;
  --c-xam-vien-11:#a8a296;
  --c-xam-vien-12:#cbd5d5;
  --c-xam-vien-13:#9fd3d3;
  --c-xam-vien-14:#9ed5d5;
  --c-xam-vien-15:#d4d4d8;
  --c-xam-vien-16:#e3ddcd;
  --c-xam-vien-17:#c5d3d1;
  --c-xam-vien-18:#8aa0a4;
  --c-xam-vien-19:#9aa9ad;
  --c-xam-vien-20:#e5ddc9;
  --c-xam-vien-21:#bfe0cf;
  --c-xam-vien-22:#a8c4c4;
  --c-xam-vien-23:#8fa3a3;
  --c-xam-vien-24:#b7e6c6;
}
:root[data-theme="dark"]{
  /* cam */
  --c-cam-chu-11:#e6c094;
  --c-cam-chu-12:#e2a483;
  --c-cam-chu-13:#e6c594;
  --c-cam-chu-14:#e6c394;
  --c-cam-chu-15:#e6cf94;
  --c-cam-chu-16:#e6cd94;
  --c-cam-chu-17:#e6cd94;
  --c-cam-chu-18:#e2be83;
  --c-cam-chu-19:#e6c594;
  --c-cam-chu-20:#e2ae83;
  --c-cam-chu-21:#e6ce94;
  --c-cam-chu-22:#e6ce94;
  --c-cam-chu-23:#e2c483;
  --c-cam-chu-24:#e6c194;
  --c-cam-chu-25:#e2c697;
  --c-cam-chu-26:#e6b994;
  --c-cam-chu-27:#e6ca94;
  --c-cam-chu-28:#e6b294;
  --c-cam-chu-29:#e6d194;
  --c-cam-chu-30:#e2a783;
  --c-cam-chu-31:#e2a483;
  --c-cam-chu-32:#e6c494;
  --c-cam-chu-33:#e6c794;
  --c-cam-chu-34:#e6c894;
  --c-cam-chu-35:#e6c894;
  --c-cam-nen-2:#2c2418;
  --c-cam-nen-3:#282316;
  --c-cam-nen-4:#262215;
  --c-cam-nen-5:#2d2718;
  --c-cam-nen-6:#2e2919;
  --c-cam-nen-7:#282215;
  --c-cam-nen-8:#292116;
  --c-cam-nen-9:#342d1c;
  --c-cam-nen-10:#261e14;
  --c-cam-nen-11:#251a14;
  --c-cam-nen-12:#332b1b;
  --c-cam-nen-13:#272015;
  --c-cam-nen-14:#2c2518;
  --c-cam-nen-15:#292216;
  --c-cam-nen-16:#261f14;
  --c-cam-nen-17:#251c14;
  --c-cam-nen-18:#34261c;
  --c-cam-nen-19:#2a2317;
  --c-cam-vien-2:#7b5c3d;
  --c-cam-vien-3:#7b663d;
  --c-cam-vien-4:#7b6a3d;
  --c-cam-vien-5:#7b663d;
  --c-cam-vien-6:#7b5e3d;
  --c-cam-vien-7:#7b573d;
  --c-cam-vien-8:#7b583d;
  --c-cam-vien-9:#7b4d3d;
  --c-cam-vien-10:#7b6a3d;
  --c-cam-vien-11:#7b683d;
  --c-cam-vien-12:#7b673d;
  /* do */
  --c-do-chu-5:#dc9189;
  --c-do-chu-6:#e6949a;
  --c-do-chu-7:#e28383;
  --c-do-chu-8:#e28398;
  --c-do-chu-9:#e694aa;
  --c-do-chu-10:#e28a83;
  --c-do-chu-11:#de9bb1;
  --c-do-chu-12:#de8787;
  --c-do-chu-13:#e49595;
  --c-do-nen-3:#261615;
  --c-do-nen-4:#301c1a;
  --c-do-nen-5:#251414;
  --c-do-nen-6:#261416;
  --c-do-nen-7:#261414;
  --c-do-nen-8:#251414;
  --c-do-nen-9:#341c1c;
  --c-do-nen-10:#291617;
  --c-do-nen-11:#2e191c;
  --c-do-nen-12:#331c1c;
  --c-do-nen-13:#251414;
  --c-do-nen-14:#261414;
  --c-do-nen-15:#2b1717;
  --c-do-vien-2:#7b3d3d;
  --c-do-vien-3:#7b3d3d;
  --c-do-vien-4:#7b3d44;
  --c-do-vien-5:#7b3d46;
  /* hong */
  --c-hong-nen:#291621;
  --c-hong-vien:#7b3d5e;
  /* lam */
  --c-lam-chu-5:#83a7e2;
  --c-lam-chu-6:#94c9e6;
  --c-lam-chu-7:#839ce2;
  --c-lam-chu-8:#98abe1;
  --c-lam-chu-9:#8385e2;
  --c-lam-chu-10:#94c8e6;
  --c-lam-chu-11:#94cae6;
  --c-lam-chu-12:#83aae2;
  --c-lam-chu-13:#9a94e6;
  --c-lam-chu-14:#83aee2;
  --c-lam-chu-15:#94bde6;
  --c-lam-nen-8:#1b182c;
  --c-lam-nen-9:#151d27;
  --c-lam-nen-10:#171426;
  --c-lam-nen-11:#131b24;
  --c-lam-nen-12:#211c34;
  --c-lam-nen-13:#161324;
  --c-lam-nen-14:#131324;
  --c-lam-nen-15:#191526;
  --c-lam-nen-16:#17232a;
  --c-lam-vien:#3d5a7b;
  --c-lam-vien-2:#4c3d7b;
  --c-lam-vien-3:#3d477b;
  /* luc */
  --c-luc-chu-8:#85e0a6;
  --c-luc-chu-9:#89dcbe;
  --c-luc-chu-10:#95e4b5;
  --c-luc-chu-11:#85e0a7;
  --c-luc-chu-12:#96e4cf;
  --c-luc-chu-13:#84e1c3;
  --c-luc-chu-14:#94e6c4;
  --c-luc-chu-15:#89dcac;
  --c-luc-chu-16:#94e6cc;
  --c-luc-chu-17:#9adfb6;
  --c-luc-chu-18:#94e6b7;
  --c-luc-nen-5:#152619;
  --c-luc-nen-6:#16291d;
  --c-luc-nen-7:#172a1f;
  /* mongket */
  --c-mongket-chu-6:#94e3e6;
  --c-mongket-chu-7:#94e6e6;
  --c-mongket-chu-8:#94e3e6;
  --c-mongket-chu-9:#88dadd;
  --c-mongket-chu-10:#94e6e6;
  --c-mongket-chu-11:#94d6e6;
  --c-mongket-chu-12:#83c5e2;
  --c-mongket-chu-13:#83d5e2;
  --c-mongket-chu-14:#94e6de;
  --c-mongket-chu-15:#a0ccd9;
  --c-mongket-chu-16:#94e4e6;
  --c-mongket-chu-17:#94e6dd;
  --c-mongket-chu-18:#94dfe6;
  --c-mongket-chu-19:#95e4e4;
  --c-mongket-chu-20:#94e4e6;
  --c-mongket-chu-21:#94e4e6;
  --c-mongket-chu-22:#9ddcdc;
  --c-mongket-chu-23:#94e6d9;
  --c-mongket-nen-3:#192c2e;
  --c-mongket-nen-4:#172a2b;
  --c-mongket-nen-5:#192f2b;
  --c-mongket-nen-6:#152727;
  --c-mongket-nen-7:#132424;
  --c-mongket-vien:#3d757b;
  --c-mongket-vien-2:#3d7a7b;
  --c-mongket-vien-3:#3d677b;
  /* tim */
  --c-tim-chu-3:#a885e0;
  --c-tim-chu-4:#b89adf;
  --c-tim-nen:#1e1629;
  /* vang */
  --c-vang-chu-2:#e6d594;
  --c-vang-chu-3:#e6d794;
  --c-vang-nen-5:#282616;
  --c-vang-nen-6:#252114;
  --c-vang-nen-7:#2c2818;
  --c-vang-nen-8:#2c2718;
  --c-vang-nen-9:#312f1a;
  --c-vang-nen-10:#2c2818;
  --c-vang-nen-11:#312d1a;
  --c-vang-nen-12:#252114;
  --c-vang-nen-13:#2a2517;
  --c-vang-vien-2:#7b6d3d;
  --c-vang-vien-3:#7b733d;
  /* xam */
  --c-xam-chu-11:#b6c3c2;
  --c-xam-chu-12:#b6c3c2;
  --c-xam-chu-13:#b6c3c2;
  --c-xam-chu-14:#b6c3c2;
  --c-xam-chu-15:#b6c3c2;
  --c-xam-chu-16:#b6c3c2;
  --c-xam-chu-17:#b6c3c2;
  --c-xam-chu-18:#b6c3c2;
  --c-xam-chu-19:#b6c3c2;
  --c-xam-chu-20:#abbab9;
  --c-xam-chu-21:#abbab9;
  --c-xam-chu-22:#abbab9;
  --c-xam-chu-23:#b6c3c2;
  --c-xam-chu-24:#b6c3c2;
  --c-xam-chu-25:#b6c3c2;
  --c-xam-chu-26:#b6c3c2;
  --c-xam-chu-27:#b6c3c2;
  --c-xam-chu-28:#b6c3c2;
  --c-xam-chu-29:#b6c3c2;
  --c-xam-chu-30:#abbab9;
  --c-xam-chu-31:#b6c3c2;
  --c-xam-chu-32:#b6c3c2;
  --c-xam-chu-33:#b6c3c2;
  --c-xam-nen-12:#232d2c;
  --c-xam-nen-13:#1a2221;
  --c-xam-nen-14:#202928;
  --c-xam-nen-15:#1c2423;
  --c-xam-nen-16:#1c2524;
  --c-xam-nen-17:#1d2625;
  --c-xam-nen-18:#1c2524;
  --c-xam-nen-19:#192120;
  --c-xam-nen-20:#1b2322;
  --c-xam-nen-21:#1a2222;
  --c-xam-nen-22:#1a2120;
  --c-xam-nen-23:#212b2a;
  --c-xam-nen-24:#1e2726;
  --c-xam-nen-25:#1b2322;
  --c-xam-nen-26:#222d2c;
  --c-xam-nen-27:#1a2222;
  --c-xam-nen-28:#1d2525;
  --c-xam-nen-29:#1b2322;
  --c-xam-nen-30:#1c2423;
  --c-xam-nen-31:#1a2121;
  --c-xam-nen-32:#1a2221;
  --c-xam-nen-33:#1f2827;
  --c-xam-nen-34:#1b2323;
  --c-xam-nen-35:#192120;
  --c-xam-nen-36:#1b2322;
  --c-xam-nen-37:#19201f;
  --c-xam-nen-38:#1d2625;
  --c-xam-nen-39:#1c2423;
  --c-xam-nen-40:#192120;
  --c-xam-nen-41:#1e2726;
  --c-xam-nen-42:#1b2322;
  --c-xam-nen-43:#1a2120;
  --c-xam-nen-44:#1b2323;
  --c-xam-nen-45:#232d2c;
  --c-xam-nen-46:#1a2221;
  --c-xam-nen-47:#1a2221;
  --c-xam-nen-48:#202a29;
  --c-xam-nen-49:#1c2524;
  --c-xam-nen-50:#1b2322;
  --c-xam-nen-51:#1f2928;
  --c-xam-nen-52:#192120;
  --c-xam-nen-53:#1c2524;
  --c-xam-nen-54:#181f1f;
  --c-xam-nen-55:#1b2322;
  --c-xam-nen-56:#1b2322;
  --c-xam-nen-57:#1d2525;
  --c-xam-nen-58:#212b2a;
  --c-xam-nen-59:#1a2222;
  --c-xam-nen-60:#1e2726;
  --c-xam-nen-61:#1e2726;
  --c-xam-nen-62:#232d2c;
  --c-xam-vien-5:#506865;
  --c-xam-vien-6:#506865;
  --c-xam-vien-7:#506865;
  --c-xam-vien-8:#506865;
  --c-xam-vien-9:#506865;
  --c-xam-vien-10:#506865;
  --c-xam-vien-11:#506865;
  --c-xam-vien-12:#506865;
  --c-xam-vien-13:#506865;
  --c-xam-vien-14:#506865;
  --c-xam-vien-15:#506865;
  --c-xam-vien-16:#506865;
  --c-xam-vien-17:#506865;
  --c-xam-vien-18:#506865;
  --c-xam-vien-19:#506865;
  --c-xam-vien-20:#506865;
  --c-xam-vien-21:#506865;
  --c-xam-vien-22:#506865;
  --c-xam-vien-23:#506865;
  --c-xam-vien-24:#506865;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    /* cam */
    --c-cam-chu-11:#e6c094;
    --c-cam-chu-12:#e2a483;
    --c-cam-chu-13:#e6c594;
    --c-cam-chu-14:#e6c394;
    --c-cam-chu-15:#e6cf94;
    --c-cam-chu-16:#e6cd94;
    --c-cam-chu-17:#e6cd94;
    --c-cam-chu-18:#e2be83;
    --c-cam-chu-19:#e6c594;
    --c-cam-chu-20:#e2ae83;
    --c-cam-chu-21:#e6ce94;
    --c-cam-chu-22:#e6ce94;
    --c-cam-chu-23:#e2c483;
    --c-cam-chu-24:#e6c194;
    --c-cam-chu-25:#e2c697;
    --c-cam-chu-26:#e6b994;
    --c-cam-chu-27:#e6ca94;
    --c-cam-chu-28:#e6b294;
    --c-cam-chu-29:#e6d194;
    --c-cam-chu-30:#e2a783;
    --c-cam-chu-31:#e2a483;
    --c-cam-chu-32:#e6c494;
    --c-cam-chu-33:#e6c794;
    --c-cam-chu-34:#e6c894;
    --c-cam-chu-35:#e6c894;
    --c-cam-nen-2:#2c2418;
    --c-cam-nen-3:#282316;
    --c-cam-nen-4:#262215;
    --c-cam-nen-5:#2d2718;
    --c-cam-nen-6:#2e2919;
    --c-cam-nen-7:#282215;
    --c-cam-nen-8:#292116;
    --c-cam-nen-9:#342d1c;
    --c-cam-nen-10:#261e14;
    --c-cam-nen-11:#251a14;
    --c-cam-nen-12:#332b1b;
    --c-cam-nen-13:#272015;
    --c-cam-nen-14:#2c2518;
    --c-cam-nen-15:#292216;
    --c-cam-nen-16:#261f14;
    --c-cam-nen-17:#251c14;
    --c-cam-nen-18:#34261c;
    --c-cam-nen-19:#2a2317;
    --c-cam-vien-2:#7b5c3d;
    --c-cam-vien-3:#7b663d;
    --c-cam-vien-4:#7b6a3d;
    --c-cam-vien-5:#7b663d;
    --c-cam-vien-6:#7b5e3d;
    --c-cam-vien-7:#7b573d;
    --c-cam-vien-8:#7b583d;
    --c-cam-vien-9:#7b4d3d;
    --c-cam-vien-10:#7b6a3d;
    --c-cam-vien-11:#7b683d;
    --c-cam-vien-12:#7b673d;
    /* do */
    --c-do-chu-5:#dc9189;
    --c-do-chu-6:#e6949a;
    --c-do-chu-7:#e28383;
    --c-do-chu-8:#e28398;
    --c-do-chu-9:#e694aa;
    --c-do-chu-10:#e28a83;
    --c-do-chu-11:#de9bb1;
    --c-do-chu-12:#de8787;
    --c-do-chu-13:#e49595;
    --c-do-nen-3:#261615;
    --c-do-nen-4:#301c1a;
    --c-do-nen-5:#251414;
    --c-do-nen-6:#261416;
    --c-do-nen-7:#261414;
    --c-do-nen-8:#251414;
    --c-do-nen-9:#341c1c;
    --c-do-nen-10:#291617;
    --c-do-nen-11:#2e191c;
    --c-do-nen-12:#331c1c;
    --c-do-nen-13:#251414;
    --c-do-nen-14:#261414;
    --c-do-nen-15:#2b1717;
    --c-do-vien-2:#7b3d3d;
    --c-do-vien-3:#7b3d3d;
    --c-do-vien-4:#7b3d44;
    --c-do-vien-5:#7b3d46;
    /* hong */
    --c-hong-nen:#291621;
    --c-hong-vien:#7b3d5e;
    /* lam */
    --c-lam-chu-5:#83a7e2;
    --c-lam-chu-6:#94c9e6;
    --c-lam-chu-7:#839ce2;
    --c-lam-chu-8:#98abe1;
    --c-lam-chu-9:#8385e2;
    --c-lam-chu-10:#94c8e6;
    --c-lam-chu-11:#94cae6;
    --c-lam-chu-12:#83aae2;
    --c-lam-chu-13:#9a94e6;
    --c-lam-chu-14:#83aee2;
    --c-lam-chu-15:#94bde6;
    --c-lam-nen-8:#1b182c;
    --c-lam-nen-9:#151d27;
    --c-lam-nen-10:#171426;
    --c-lam-nen-11:#131b24;
    --c-lam-nen-12:#211c34;
    --c-lam-nen-13:#161324;
    --c-lam-nen-14:#131324;
    --c-lam-nen-15:#191526;
    --c-lam-nen-16:#17232a;
    --c-lam-vien:#3d5a7b;
    --c-lam-vien-2:#4c3d7b;
    --c-lam-vien-3:#3d477b;
    /* luc */
    --c-luc-chu-8:#85e0a6;
    --c-luc-chu-9:#89dcbe;
    --c-luc-chu-10:#95e4b5;
    --c-luc-chu-11:#85e0a7;
    --c-luc-chu-12:#96e4cf;
    --c-luc-chu-13:#84e1c3;
    --c-luc-chu-14:#94e6c4;
    --c-luc-chu-15:#89dcac;
    --c-luc-chu-16:#94e6cc;
    --c-luc-chu-17:#9adfb6;
    --c-luc-chu-18:#94e6b7;
    --c-luc-nen-5:#152619;
    --c-luc-nen-6:#16291d;
    --c-luc-nen-7:#172a1f;
    /* mongket */
    --c-mongket-chu-6:#94e3e6;
    --c-mongket-chu-7:#94e6e6;
    --c-mongket-chu-8:#94e3e6;
    --c-mongket-chu-9:#88dadd;
    --c-mongket-chu-10:#94e6e6;
    --c-mongket-chu-11:#94d6e6;
    --c-mongket-chu-12:#83c5e2;
    --c-mongket-chu-13:#83d5e2;
    --c-mongket-chu-14:#94e6de;
    --c-mongket-chu-15:#a0ccd9;
    --c-mongket-chu-16:#94e4e6;
    --c-mongket-chu-17:#94e6dd;
    --c-mongket-chu-18:#94dfe6;
    --c-mongket-chu-19:#95e4e4;
    --c-mongket-chu-20:#94e4e6;
    --c-mongket-chu-21:#94e4e6;
    --c-mongket-chu-22:#9ddcdc;
    --c-mongket-chu-23:#94e6d9;
    --c-mongket-nen-3:#192c2e;
    --c-mongket-nen-4:#172a2b;
    --c-mongket-nen-5:#192f2b;
    --c-mongket-nen-6:#152727;
    --c-mongket-nen-7:#132424;
    --c-mongket-vien:#3d757b;
    --c-mongket-vien-2:#3d7a7b;
    --c-mongket-vien-3:#3d677b;
    /* tim */
    --c-tim-chu-3:#a885e0;
    --c-tim-chu-4:#b89adf;
    --c-tim-nen:#1e1629;
    /* vang */
    --c-vang-chu-2:#e6d594;
    --c-vang-chu-3:#e6d794;
    --c-vang-nen-5:#282616;
    --c-vang-nen-6:#252114;
    --c-vang-nen-7:#2c2818;
    --c-vang-nen-8:#2c2718;
    --c-vang-nen-9:#312f1a;
    --c-vang-nen-10:#2c2818;
    --c-vang-nen-11:#312d1a;
    --c-vang-nen-12:#252114;
    --c-vang-nen-13:#2a2517;
    --c-vang-vien-2:#7b6d3d;
    --c-vang-vien-3:#7b733d;
    /* xam */
    --c-xam-chu-11:#b6c3c2;
    --c-xam-chu-12:#b6c3c2;
    --c-xam-chu-13:#b6c3c2;
    --c-xam-chu-14:#b6c3c2;
    --c-xam-chu-15:#b6c3c2;
    --c-xam-chu-16:#b6c3c2;
    --c-xam-chu-17:#b6c3c2;
    --c-xam-chu-18:#b6c3c2;
    --c-xam-chu-19:#b6c3c2;
    --c-xam-chu-20:#abbab9;
    --c-xam-chu-21:#abbab9;
    --c-xam-chu-22:#abbab9;
    --c-xam-chu-23:#b6c3c2;
    --c-xam-chu-24:#b6c3c2;
    --c-xam-chu-25:#b6c3c2;
    --c-xam-chu-26:#b6c3c2;
    --c-xam-chu-27:#b6c3c2;
    --c-xam-chu-28:#b6c3c2;
    --c-xam-chu-29:#b6c3c2;
    --c-xam-chu-30:#abbab9;
    --c-xam-chu-31:#b6c3c2;
    --c-xam-chu-32:#b6c3c2;
    --c-xam-chu-33:#b6c3c2;
    --c-xam-nen-12:#232d2c;
    --c-xam-nen-13:#1a2221;
    --c-xam-nen-14:#202928;
    --c-xam-nen-15:#1c2423;
    --c-xam-nen-16:#1c2524;
    --c-xam-nen-17:#1d2625;
    --c-xam-nen-18:#1c2524;
    --c-xam-nen-19:#192120;
    --c-xam-nen-20:#1b2322;
    --c-xam-nen-21:#1a2222;
    --c-xam-nen-22:#1a2120;
    --c-xam-nen-23:#212b2a;
    --c-xam-nen-24:#1e2726;
    --c-xam-nen-25:#1b2322;
    --c-xam-nen-26:#222d2c;
    --c-xam-nen-27:#1a2222;
    --c-xam-nen-28:#1d2525;
    --c-xam-nen-29:#1b2322;
    --c-xam-nen-30:#1c2423;
    --c-xam-nen-31:#1a2121;
    --c-xam-nen-32:#1a2221;
    --c-xam-nen-33:#1f2827;
    --c-xam-nen-34:#1b2323;
    --c-xam-nen-35:#192120;
    --c-xam-nen-36:#1b2322;
    --c-xam-nen-37:#19201f;
    --c-xam-nen-38:#1d2625;
    --c-xam-nen-39:#1c2423;
    --c-xam-nen-40:#192120;
    --c-xam-nen-41:#1e2726;
    --c-xam-nen-42:#1b2322;
    --c-xam-nen-43:#1a2120;
    --c-xam-nen-44:#1b2323;
    --c-xam-nen-45:#232d2c;
    --c-xam-nen-46:#1a2221;
    --c-xam-nen-47:#1a2221;
    --c-xam-nen-48:#202a29;
    --c-xam-nen-49:#1c2524;
    --c-xam-nen-50:#1b2322;
    --c-xam-nen-51:#1f2928;
    --c-xam-nen-52:#192120;
    --c-xam-nen-53:#1c2524;
    --c-xam-nen-54:#181f1f;
    --c-xam-nen-55:#1b2322;
    --c-xam-nen-56:#1b2322;
    --c-xam-nen-57:#1d2525;
    --c-xam-nen-58:#212b2a;
    --c-xam-nen-59:#1a2222;
    --c-xam-nen-60:#1e2726;
    --c-xam-nen-61:#1e2726;
    --c-xam-nen-62:#232d2c;
    --c-xam-vien-5:#506865;
    --c-xam-vien-6:#506865;
    --c-xam-vien-7:#506865;
    --c-xam-vien-8:#506865;
    --c-xam-vien-9:#506865;
    --c-xam-vien-10:#506865;
    --c-xam-vien-11:#506865;
    --c-xam-vien-12:#506865;
    --c-xam-vien-13:#506865;
    --c-xam-vien-14:#506865;
    --c-xam-vien-15:#506865;
    --c-xam-vien-16:#506865;
    --c-xam-vien-17:#506865;
    --c-xam-vien-18:#506865;
    --c-xam-vien-19:#506865;
    --c-xam-vien-20:#506865;
    --c-xam-vien-21:#506865;
    --c-xam-vien-22:#506865;
    --c-xam-vien-23:#506865;
    --c-xam-vien-24:#506865;
  }
}

/* Báo cáo › 4 báo cáo phân tích (ReportPhanTich): tỉ lệ huỷ · đặt trước · giờ khởi hành · so sánh kỳ */
.pt-sum{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:6px 0 4px}
.pt-sum-p{font-size:12.5px;color:var(--gt);font-weight:600}
.pt-sum-p b{color:var(--dk)}
.pt-tbw{overflow-x:auto;border:1px solid var(--g2);border-radius:10px}
.pt-tb{width:100%;border-collapse:collapse;font-size:12.5px}
.pt-tb th{padding:7px 10px;text-align:right;font-size:10.5px;font-weight:800;color:var(--gt);background:var(--bgw);white-space:nowrap}
.pt-tb th:first-child,.pt-tb td.t{text-align:left}
.pt-tb td{padding:7px 10px;text-align:right;border-top:1px solid var(--line-soft);white-space:nowrap;color:var(--dk)}
.pt-tb td.t{white-space:normal;font-weight:700;min-width:160px;overflow-wrap:anywhere}
.pt-tb td em{display:block;font-style:normal;font-size:10.5px;color:var(--gt);font-weight:600}
.pt-tb .w{width:32%;min-width:120px}
.pt-b{display:block;height:6px;background:var(--line-soft);border-radius:3px;overflow:hidden}
.pt-b i{display:block;height:100%;background:var(--rd);border-radius:3px}
/* bảng nguồn khách: bấm 1 dòng mở danh sách đơn / nguồn gốc GA4 */
.pt-tb tr.pt-click{cursor:pointer}
.pt-tb tr.pt-click:hover td,.pt-tb tr.pt-click.mo td{background:var(--bgw)}
.pt-mo{all:unset;cursor:pointer;overflow-wrap:anywhere}
.pt-mo:focus-visible{outline:2px solid var(--t);outline-offset:2px}
.pt-mo i{display:inline-block;width:14px;font-style:normal;color:var(--gt)}
.pt-tb td.pt-ct{white-space:normal;text-align:left;padding:6px 10px 10px;background:var(--bgw);border-top:0}
/* bảng rộng hơn màn hình (điện thoại): khối chi tiết đứng yên, rộng đúng phần đang thấy */
.pt-tbw-mo{container-type:inline-size}
.pt-tbw-mo td.pt-ct > *{position:sticky;left:10px;width:calc(100cqw - 20px)}
.pt-ct .ota-m .p{white-space:normal}
.pt-ct .pt-list > div > span:not(:first-child){flex:none}
.pt-bar100{display:flex;height:14px;border-radius:4px;overflow:hidden;gap:2px;background:var(--w)}
.pt-bar100 i{display:block;min-width:2px}
.pt-lg{display:flex;flex-wrap:wrap;gap:6px 12px;margin:8px 0 10px;font-size:11.5px;font-weight:600;color:var(--gt)}
.pt-lg span{display:inline-flex;align-items:center;gap:5px}
.pt-lg i{width:10px;height:10px;border-radius:2px;display:block}
.pt-d{font-size:11.5px;font-weight:800;color:var(--gt)}
.pt-d.up{color:var(--gn)}
.pt-d.down{color:var(--rd)}
.pt-list{display:flex;flex-direction:column;gap:4px}
.pt-list > div{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--g2);border-radius:8px;
               background:var(--w);font-size:12.5px;color:var(--dk)}
.pt-list > div > span:first-child{flex:1;min-width:0;overflow-wrap:anywhere}
.pt-gio > div > span:first-child{flex:none;width:52px;font-weight:800}
.pt-gio .b{flex:1;height:8px;background:var(--line-soft);border-radius:4px;overflow:hidden}
.pt-gio .b i{display:block;height:100%;background:var(--t);border-radius:4px}
.pt-gio em{font-style:normal;font-size:11px;color:var(--gt);min-width:64px;text-align:right}

/* ===== Menu đứng cho trang admin dài (owner chốt 23/09/2026) =====
   "Đừng xếp chồng các khối, tạo 1 menu bên trái, cần gì click vô thì hiện nội dung."
   Dùng chung cho mọi trang dài — đừng chép CSS này vào từng trang nữa.
   Cặp đôi với component Shared/VerticalMenu.razor; pane ẩn bằng display:none (KHÔNG @if)
   để nhân viên đang gõ dở mà đổi mục thì không mất chữ. */
.vm-shell{display:grid;grid-template-columns:232px minmax(0,1fr);gap:18px;align-items:start}
/* top:76px: thanh tiêu đề .tb dính cao 58px, để 12px thì menu dính nằm DƯỚI nó,
   cuộn xuống là mất mục đầu bảng (owner báo 24/09/2026 ở trang Báo cáo). */
.vm-menu{display:flex;flex-direction:column;gap:3px;position:sticky;top:76px;
         max-height:calc(100vh - 88px);overflow-y:auto;
         padding-right:12px;border-right:1px solid var(--g2)}
.vm-menu button{display:flex;align-items:center;gap:9px;width:100%;min-height:46px;padding:10px 12px;
                border:0;border-left:3px solid transparent;border-radius:0 9px 9px 0;background:transparent;
                color:var(--gt);cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:700;
                line-height:1.3;text-align:left}
.vm-menu button:hover{background:var(--g1);color:var(--dk)}
.vm-menu button.on{background:var(--t4);color:var(--t);border-left-color:var(--t)}
.vm-menu button:focus-visible{outline:2px solid var(--t3);outline-offset:-2px}
.vm-menu .vm-ic{font-size:15px;line-height:1;flex:0 0 auto}
.vm-menu .vm-sub{display:block;font-size:11px;font-weight:600;color:var(--gt);margin-top:2px}
.vm-menu .vm-dot{margin-left:auto;flex:0 0 auto;min-width:19px;height:19px;padding:0 5px;border-radius:999px;
                 background:var(--or);color:#fff;font-size:11px;font-weight:800;
                 display:inline-flex;align-items:center;justify-content:center}
.vm-pane{min-width:0}

/* Khổ hẹp: menu thành hàng ngang vuốt được — nhân viên vẫn dùng admin trên điện thoại. */
@media(max-width:960px){
  .vm-shell{grid-template-columns:minmax(0,1fr);gap:12px}
  .vm-menu{flex-direction:row;position:static;max-height:none;overflow-y:visible;
           overflow-x:auto;scrollbar-width:none;
           padding-right:0;padding-bottom:2px;border-right:0;border-bottom:1px solid var(--g2)}
  .vm-menu::-webkit-scrollbar{display:none}
  .vm-menu button{width:auto;white-space:nowrap;border-left:0;border-radius:9px 9px 0 0;
                  border-bottom:3px solid transparent}
  .vm-menu button.on{background:transparent;border-bottom-color:var(--t)}
  .vm-menu .vm-dot{margin-left:0}
  .vm-menu .vm-sub{display:none}
}
@media(max-width:600px){ .vm-menu button{font-size:12.5px;padding:9px 10px;min-height:42px} }


/* ═══════════════════════════════════════════════════════════════════════
   .dc-*  — hai trang SỔ TOUR 2026, vẽ lại 25/09/2026
   /admin/accounting-tour2026-doi-chieu · /admin/don-gui-ncc
   Khung chung lấy lại .kh-card / .kh-tbl / .kh-scroll / .kh-chip / .kh-note
   và bộ ô đếm .kk-lo/.kk-o (khai bí danh .dc-lo/.dc-o ở trên).
   Ở đây chỉ khai phần riêng: đầu trang, thanh lọc, bảng dày ô nhập.
   Mọi màu đi qua biến → nền tối tự theo.
   ═══════════════════════════════════════════════════════════════════════ */

/* đầu trang: tên trang + một câu nói trang này làm gì */
.dc-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.dc-hd h1{margin:0;font-size:22px;font-weight:900;color:var(--dk);letter-spacing:-.4px}
.dc-hd p{margin:4px 0 0;font-size:13px;color:var(--gt);line-height:1.55;max-width:760px}
.dc-hd-a{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* phần dặn dò dài — gấp lại, ai cần mới mở, không chiếm nửa màn hình nữa */
.dc-help{border:1px solid var(--bd);border-radius:11px;background:var(--w);margin-bottom:14px;overflow:hidden}
.dc-help>summary{cursor:pointer;list-style:none;padding:10px 14px;font-size:12.5px;font-weight:700;
                 color:var(--gt);display:flex;align-items:center;gap:7px;user-select:none}
.dc-help>summary::-webkit-details-marker{display:none}
.dc-help>summary::before{content:"▸";font-size:12px;color:var(--t);transition:transform .15s}
.dc-help[open]>summary::before{transform:rotate(90deg)}
.dc-help>summary:hover{background:var(--g1)}
.dc-help .b{padding:0 14px 13px;font-size:12.5px;color:var(--gt);line-height:1.65;border-top:1px solid var(--bd)}
.dc-help .b p{margin:9px 0 0}
.dc-help .b b{color:var(--dk)}
.dc-help .b code{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;
                 background:var(--bgw);border:1px solid var(--bd);border-radius:5px;padding:1px 5px}

/* thanh lọc: một hàng, nhãn nhỏ nằm trên ô */
.dc-bar{background:var(--w);border:1px solid var(--bd);border-radius:12px;padding:11px 14px;margin-bottom:14px;
        display:flex;align-items:flex-end;gap:11px;flex-wrap:wrap}
.dc-f{display:flex;flex-direction:column;gap:4px;min-width:0}
.dc-f>span{font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--gt)}
.dc-f .inp{min-width:0}
.dc-f.ngay .inp{width:152px}
.dc-f.chon .inp{width:132px}
.dc-f.tim{flex:1 1 210px;max-width:320px}
.dc-bar .dc-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
/* nhãn căn cứ cạnh tên nhà xe: số lấy từ sổ hay chỉ là suy đoán */
.dc-ng{display:inline-block;margin-left:6px;font-size:10.5px;font-weight:700;letter-spacing:.3px;
       color:var(--gt);border:1px solid var(--bd);border-radius:5px;padding:1px 5px;white-space:nowrap}
.dc-ng.doan{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-line)}

/* gạt kỳ xem: ngày đi hay ngày đặt — cao bằng ô ngày bên cạnh cho thẳng hàng */
.dc-gat{display:inline-flex;border:1px solid var(--bd);border-radius:9px;overflow:hidden;background:var(--w)}
.dc-gat button{border:0;background:transparent;font:inherit;font-size:12.5px;font-weight:700;color:var(--gt);
       padding:9px 14px;cursor:pointer;white-space:nowrap}
.dc-gat button+button{border-left:1px solid var(--bd)}
.dc-gat button:hover{background:var(--bg)}
.dc-gat button.on{background:var(--t4);color:var(--t)}

.dc-sw{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--gt);
       border:1px solid var(--bd);border-radius:9px;padding:8px 11px;cursor:pointer;background:var(--w);white-space:nowrap}
.dc-sw:hover{border-color:var(--t3)}
.dc-sw input{accent-color:var(--t);width:15px;height:15px;margin:0}

/* bảng: đầu bảng dính khi cuộn, ô nhập gọn lại cho đỡ rối mắt */
.dc-tbl{min-width:980px}
.dc-tbl thead th{position:sticky;top:0;z-index:2}
.dc-tbl td{vertical-align:middle}
.dc-tbl tbody tr.ghi td{border-bottom:0;padding-top:0;padding-bottom:9px}
.dc-tbl tbody tr.co-ghi td{border-bottom:0;padding-bottom:5px}
.dc-ma{font-family:'IBM Plex Mono',ui-monospace,monospace;font-weight:700;font-size:12px;white-space:nowrap}
.dc-cut{max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-num{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;text-align:right}
.dc-in{border:1.5px solid var(--bd);border-radius:8px;padding:6px 9px;font-size:12.5px;font-family:'IBM Plex Mono',ui-monospace,monospace;
       font-variant-numeric:tabular-nums;background:var(--w);color:var(--tx);outline:none;width:112px;text-align:right;
       transition:border-color .12s,background .12s}
.dc-in.chu{font-family:inherit;text-align:left;width:138px}
.dc-in:hover{border-color:var(--t3)}
.dc-in:focus{border-color:var(--t);background:var(--bgw)}
.dc-in.trong{background:var(--warn-bg);border-color:var(--warn-line)}

/* huy hiệu trạng thái dùng chung 2 trang */
.dc-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:3px 9px;
         border-radius:99px;white-space:nowrap;border:1px solid transparent}
.dc-chip.ok{background:var(--gl);color:var(--ok-text);border-color:var(--ok-line)}
.dc-chip.warn{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-line)}
.dc-chip.err{background:var(--rl);color:var(--err-text);border-color:var(--err-line)}
.dc-chip.mute{background:var(--g1);color:var(--gt);border-color:var(--bd)}
.dc-chip.khoa{background:var(--gd-bg);color:var(--gd-text);border-color:var(--gd)}

/* việc cần làm — mỗi việc một hạt, hết câu văn dài lặp đi lặp lại */
.dc-viec{display:flex;gap:4px;flex-wrap:wrap}
.dc-viec span{font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;
              background:var(--warn-bg);color:var(--warn-text);white-space:nowrap}
.dc-viec span.d{background:var(--rl);color:var(--err-text)}

/* dòng ghi chú nguồn nằm dưới mỗi dòng sổ, bật/tắt được */
.dc-ghi{font-size:11.5px;color:var(--gt);line-height:1.55;padding-left:2px}
.dc-ghi b{color:var(--dk);font-weight:700}

/* dòng đã chốt: nền vàng rất nhạt để biết máy không đụng vào nữa */
.dc-tbl tbody tr.khoa td{background:var(--gd-bg)}

@media (max-width:760px){
  .dc-bar{align-items:stretch}
  .dc-f,.dc-f.tim{flex:1 1 100%;max-width:none}
  .dc-f.ngay .inp,.dc-f.chon .inp{width:100%}
  .dc-gat{width:100%}
  .dc-gat button{flex:1 1 0;padding:10px 8px}
  .dc-bar .dc-act{margin-left:0;width:100%}
  .dc-bar .dc-act .btn{flex:1 1 auto;justify-content:center}
  .dc-lo{grid-template-columns:1fr 1fr}
}

/* ═══════════════════════════════════════════════════════════════════════
   DOANH THU & ĐỐI SOÁT (/doanh-thu-doi-soat) — owner chốt 01/10/2026.
   Dùng lại .dc-hd/.dc-help/.dc-bar/.dc-lo/.kh-kpis/.kh-card/.kh-tbl; ở đây chỉ phần riêng.
   Màu kênh lấy từ bộ --s-* của .ota-bx (đã validate sáng/tối).
   ═══════════════════════════════════════════════════════════════════════ */
.dt-thang{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:9px;margin-bottom:16px}
.dt-thang .dc-o{padding:9px 12px}
.dt-thang .dc-o .n{font-size:17px;letter-spacing:-.4px}
.dt-thang .dc-o .m{display:flex;justify-content:space-between;align-items:center;gap:6px;
                   font-size:11.5px;font-weight:800;color:var(--dk);margin-bottom:4px}
.dt-thang .dc-o.so{border-left-color:var(--g2)}
.dt-thang .dc-o.tt{border-left-color:var(--t3)}
.dt-thang .dc-o.on{border-left-color:var(--t)}
.dt-tag{font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;padding:1px 6px;border-radius:5px;
        background:var(--g1);color:var(--gt);border:1px solid var(--bd)}
.dt-tag.tt{background:var(--t4);color:var(--t);border-color:var(--t3)}
.dt-kpis{margin-bottom:16px}
.dt-kpis .kh-kpi{border-top:3px solid var(--bd)}
.dt-kpis .kh-kpi.so{border-top-color:var(--g2)}
.dt-kpis .kh-kpi.khop{border-top-color:var(--t)}
.dt-kpis .kh-kpi.cho{border-top-color:var(--gd)}
.dt-kpis .kh-kpi.xe{border-top-color:var(--bl)}
.dt-kpis .kh-kpi.tour{border-top-color:var(--gn)}
.dt-kpis .kh-kpi.lech{border-top-color:var(--rd)}
.dt-kpis .kh-kpi .v{font-size:22px;font-family:'IBM Plex Mono',ui-monospace,monospace}
.dt-kpis .kh-kpi.cho .v{color:var(--gd-text)}
.dt-kpis .kh-kpi.tour .v{color:var(--gn)}
.dt-kpis .kh-kpi.lech .v{color:var(--rd)}
.dt-tbl{min-width:1060px}
.dt-tbl thead tr.nhom th{font-size:9.5px;text-align:center;border-bottom:0;padding-bottom:2px;color:var(--dk)}
.dt-tbl thead tr.nhom th.so{background:var(--g1)}
.dt-tbl thead tr.nhom th.ht{background:var(--t4);color:var(--t)}
.dt-tbl thead tr.nhom th.pt{background:var(--gl);color:var(--ok-text)}
.dt-tbl thead tr.nhom th.le{background:var(--rl);color:var(--err-text)}
.dt-tbl td.r,.dt-tbl th.r{text-align:right}
.dt-tbl td.r{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.dt-tbl td.ngan{border-left:1px solid var(--bd)}
.dt-tbl tbody tr{cursor:pointer}
.dt-tbl tbody tr:hover td{background:var(--g1)}
.dt-tbl tbody tr.chon td{background:var(--t4)}
.dt-tbl tfoot td{font-weight:800;border-top:2px solid var(--bd);background:var(--g1)}
.dt-mute{color:var(--gt)}
.dt-am{color:var(--rd);font-weight:700}
.dt-duong{color:var(--gn);font-weight:700}
.dt-k{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--dk);white-space:nowrap}
.dt-k i{width:10px;height:10px;border-radius:3px;flex:none;background:var(--s-khac)}
.dt-bar{display:flex;align-items:center;gap:7px;min-width:112px}
.dt-bar .t{flex:1;height:6px;border-radius:4px;background:var(--g1);overflow:hidden;border:1px solid var(--bd)}
.dt-bar .t b{display:block;height:100%;background:var(--t)}
.dt-bar span{font-size:11px;font-weight:700;color:var(--gt);min-width:30px;text-align:right}