/* =====================================================================
   GIAO DIỆN PHẲNG — toàn admin (đợt 1, 05/10/2026)
   Bốn luật anh chốt:
   1. Phẳng: không đổ bóng, không nổi khối. Chỉ viền 1px nhạt hoặc đường kẻ phân ô.
   2. Khoảng cách theo bậc (4 · 8 · 12 · 16 · 24 · 32), chừa trống nhiều hơn.
   3. Một màu chính (xanh Go365) + một màu nhấn (cam, chỉ cho việc cần chú ý), còn lại xám và trắng.
   4. Chữ Montserrat, 3 cỡ (06/10/2026, thay 5 cỡ 12 · 14 · 16 · 24 · 32 của 05/10): 12 nội dung + nhãn ·
      16 tiêu đề khối · 18 tiêu đề trang + số lớn (anh Khoa hạ chữ thường 14 → 12, tiêu đề giữ).
      Tiêu đề (16 · 18) IN ĐẬM 700 (anh Khoa 26/10/2026: "tiêu đề thì in đậm"); chữ thường đậm tối đa 600; ô nhập 16px trên điện thoại không đậm.

   File này là LỚP PHỦ, nạp SAU mọi CSS khác (App.razor). Mọi luật nằm dưới
   :root:not([data-giao-dien="cu"]) — người dùng bấm "Quay về giao diện cũ" ở menu tài khoản thì
   <html data-giao-dien="cu"> và cả lớp tắt, trả lại y hệt bản cũ. Bản cũ còn ở git tag giao-dien-cu-0510.
   Đổi màu: chỉ sửa 3 khối biến ngay dưới. Mẫu tham khảo: /admin/mau/phang-*.html.
   ===================================================================== */

/* Điện thoại: khối trong hàng flex / lưới được co lại thay vì ép rộng trang (rà soát 05/10/2026: /merchants tràn 192px).
   :where() = độ ưu tiên 0 — trang nào đặt min-width riêng vẫn giữ. Ô số .kh-kpis 1 cột trên màn hẹp (/ota-settlement). */
@media (max-width:900px){ :where(:root:not([data-giao-dien="cu"])) :where(.con) div{min-width:0} }
@media (max-width:560px){ :root:not([data-giao-dien="cu"]) .kh-kpis{grid-template-columns:1fr} }

/* Tiêu đề KHÔNG gắn lớp (trình duyệt tự cho 2em / 1.5em / 1.17em → 28 / 21 / 16,38px) về thang phẳng.
   :where() = độ ưu tiên 0, nên mọi luật cỡ chữ của trang vẫn thắng (rà soát 05/10/2026). */
:where(:root:not([data-giao-dien="cu"])) :where(.main) :where(h1){font-size:18px;font-weight:700}
:where(:root:not([data-giao-dien="cu"])) :where(.main) :where(h2,h3,h4,h5,h6){font-size:16px;font-weight:700}

/* Phần tử chỉ thuộc một trong hai giao diện (áp ở cả hai chế độ) */
.ic-moi,.lg-dam,.gd-nut-cu{display:none}
:root[data-giao-dien="cu"] .gd-nut-cu{display:inline}
:root[data-giao-dien="cu"] .gd-nut-moi{display:none}
/* nút "Giao diện cũ / mới" trên thanh đầu: điện thoại chật thì giấu, vẫn còn mục trong menu tài khoản */
@media (max-width:900px){.gd-btn{display:none !important}}
/* Biểu tượng ĐẶC (06/10/2026, img/icons-tron.svg — thay nét mảnh icons-phang.svg): tô theo màu chữ; mục menu thì nền tròn xanh Go365, hình trắng */
.ic-moi{width:18px;height:18px;flex:none;fill:currentColor;stroke:none;vertical-align:middle}

/* ── Bảng màu: gom về xanh + cam + xám. Tên biến cũ giữ nguyên để mọi trang tự ăn theo. ── */
:root:not([data-giao-dien="cu"]){
  --w:#fff; --g1:#f7f7f6; --g2:#e6e6e3; --g3:#e6e6e3; --bd:#e6e6e3; --line:#e6e6e3; --line-soft:#efefec;
  --bgw:#f2f2f0; --cr:#f7f7f6; --sand:#f2f2f0;
  --go-cream:#f7f7f6; --go-paper:#f2f2f0; --go-sand:#f2f2f0; --go-line:#d4d4d0; --go-line-soft:#e6e6e3;
  --border-default:#d4d4d0; --border-soft:#e6e6e3; --surface-alt:#f2f2f0;
  --tx:#1b2121; --dk:#1b2121; --ink:#1b2121; --gt:#5a6262; --go-ink:#1b2121; --go-text:#1b2121; --go-muted:#5a6262;
  --t:#015959; --t2:#003c3c; --t3:#015959; --t4:#e9f3f3; --p:#015959; --bl:#015959; --bll:#e9f3f3; --cb:#003c3c;
  --or:#f95d00; --or2:#d34d00; --or-text:#bf4700; --or-bg:#fff2ea; --terra-bg:#fff2ea;
  --gd:#f95d00; --gd-bg:#fff2ea; --gd-text:#bf4700; --pu:#f95d00; --pll:#fff2ea;
  --gn:#015959; --gl:#e9f3f3; --rd:#bf4700; --rl:#fff2ea;
  --adm-info:#5a6262; --adm-info-bg:#f2f2f0; --adm-accent:#5a6262; --adm-accent-bg:#f2f2f0;
  --on-accent:#fff;
  --ok-text:#015959; --ok-line:#cfe3e3; --warn-bg:#fff2ea; --warn-text:#bf4700; --warn-line:#f6c9ad;
  --err-text:#bf4700; --err-line:#f6c9ad;
  --focus-ring:rgba(1,89,89,.14);
  --font-display:'Montserrat','Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Montserrat','Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mud-typography-default-family:'Montserrat','Be Vietnam Pro',system-ui,sans-serif !important;
  --font-mono:'Montserrat','Be Vietnam Pro',system-ui,sans-serif;
  --radius-sm:6px; --radius-md:8px; --radius-lg:8px; --radius-xl:8px;
  /* MudBlazor: chữ 3 cỡ (12 · 16 · 18), góc bo 8, nút không viết hoa */
  --mud-default-borderradius:8px !important;
  --mud-typography-default-size:.75rem; --mud-typography-body1-size:.75rem; --mud-typography-body2-size:.75rem;
  --mud-typography-subtitle1-size:1rem; --mud-typography-subtitle2-size:.75rem;
  --mud-typography-h1-size:1.125rem; --mud-typography-h2-size:1.125rem; --mud-typography-h3-size:1.125rem;
  --mud-typography-h4-size:1.125rem; --mud-typography-h5-size:1.125rem; --mud-typography-h6-size:1rem;
  --mud-typography-h1-weight:700; --mud-typography-h2-weight:700; --mud-typography-h3-weight:700;
  --mud-typography-h4-weight:700; --mud-typography-h5-weight:700; --mud-typography-h6-weight:700;
  --mud-typography-caption-size:.75rem; --mud-typography-overline-size:.75rem;
  --mud-typography-button-size:.75rem; --mud-typography-button-weight:500;
  --mud-typography-button-text-transform:none; --mud-typography-button-letterspacing:0;
  --mud-typography-overline-text-transform:none; --mud-typography-overline-letterspacing:0;
  --mud-palette-primary-darken:#003c3c !important;
  --mud-palette-primary-lighten:#e9f3f3 !important;
  --mud-palette-secondary-darken:#d34d00 !important;
  color-scheme:light;
}
:root:not([data-giao-dien="cu"])[data-theme="dark"]{
  --w:#161b1a; --g1:#0f1312; --g2:#262d2c; --g3:#262d2c; --bd:#262d2c; --line:#262d2c; --line-soft:#1f2524;
  --bgw:#1c2221; --cr:#1c2221; --sand:#1c2221;
  --go-cream:#0f1312; --go-paper:#1c2221; --go-sand:#1c2221; --go-line:#36403e; --go-line-soft:#262d2c;
  --border-default:#36403e; --border-soft:#262d2c; --surface-alt:#1c2221;
  --tx:#e6ebea; --dk:#e6ebea; --ink:#e6ebea; --gt:#a2acaa; --go-ink:#e6ebea; --go-text:#e6ebea; --go-muted:#a2acaa;
  --t:#5cc0bd; --t2:#86d4d1; --t3:#5cc0bd; --t4:#14302f; --p:#5cc0bd; --bl:#5cc0bd; --bll:#14302f; --cb:#0b2323; --t-deep:#0b2323;
  --or:#ff8a3d; --or2:#ffa470; --or-text:#ff9d5c; --or-bg:#261a12; --terra-bg:#261a12;
  --gd:#ff8a3d; --gd-bg:#261a12; --gd-text:#ff9d5c; --pu:#ff8a3d; --pll:#261a12;
  --gn:#5cc0bd; --gl:#14302f; --rd:#ff9d5c; --rl:#261a12;
  --adm-info:#a2acaa; --adm-info-bg:#1c2221; --adm-accent:#a2acaa; --adm-accent-bg:#1c2221;
  --on-accent:#062020;
  --ok-text:#5cc0bd; --ok-line:#1f4a48; --warn-bg:#261a12; --warn-text:#ff9d5c; --warn-line:#5a3416;
  --err-text:#ff9d5c; --err-line:#5a3416;
  --focus-ring:rgba(92,192,189,.22);
  --mud-palette-primary-darken:#86d4d1 !important;
  --mud-palette-primary-lighten:#14302f !important;
  --mud-palette-secondary-darken:#ffa470 !important;
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-giao-dien="cu"]):not([data-theme="light"]){
    --w:#161b1a; --g1:#0f1312; --g2:#262d2c; --g3:#262d2c; --bd:#262d2c; --line:#262d2c; --line-soft:#1f2524;
    --bgw:#1c2221; --cr:#1c2221; --sand:#1c2221;
    --go-cream:#0f1312; --go-paper:#1c2221; --go-sand:#1c2221; --go-line:#36403e; --go-line-soft:#262d2c;
    --border-default:#36403e; --border-soft:#262d2c; --surface-alt:#1c2221;
    --tx:#e6ebea; --dk:#e6ebea; --ink:#e6ebea; --gt:#a2acaa; --go-ink:#e6ebea; --go-text:#e6ebea; --go-muted:#a2acaa;
    --t:#5cc0bd; --t2:#86d4d1; --t3:#5cc0bd; --t4:#14302f; --p:#5cc0bd; --bl:#5cc0bd; --bll:#14302f; --cb:#0b2323; --t-deep:#0b2323;
    --or:#ff8a3d; --or2:#ffa470; --or-text:#ff9d5c; --or-bg:#261a12; --terra-bg:#261a12;
    --gd:#ff8a3d; --gd-bg:#261a12; --gd-text:#ff9d5c; --pu:#ff8a3d; --pll:#261a12;
    --gn:#5cc0bd; --gl:#14302f; --rd:#ff9d5c; --rl:#261a12;
    --adm-info:#a2acaa; --adm-info-bg:#1c2221; --adm-accent:#a2acaa; --adm-accent-bg:#1c2221;
    --on-accent:#062020;
    --ok-text:#5cc0bd; --ok-line:#1f4a48; --warn-bg:#261a12; --warn-text:#ff9d5c; --warn-line:#5a3416;
    --err-text:#ff9d5c; --err-line:#5a3416;
    --focus-ring:rgba(92,192,189,.22);
    --mud-palette-primary-darken:#86d4d1 !important;
    --mud-palette-primary-lighten:#14302f !important;
    --mud-palette-secondary-darken:#ffa470 !important;
    color-scheme:dark;
  }
}

:root:not([data-giao-dien="cu"]){

  /* ── Luật 1: phẳng — không bóng ở bất kỳ đâu ── */
  & *, & *::before, & *::after{box-shadow:none !important;text-shadow:none !important}
  & :focus-visible{outline:2px solid var(--t);outline-offset:1px}

  /* ── Nền tảng ── */
  & body{background:var(--g1);color:var(--tx);line-height:1.6}
  & .emo{display:none !important}
  & .ic-moi{display:inline-block}
  & [style*="Fraunces"]{font-family:inherit !important}
  /* Chữ có chân (Fraunces) khai trong CSS riêng của trang → về chữ chính. Danh sách lấy bằng grep 05/10/2026;
     trang mới dùng Fraunces thì thêm lớp vào đây hoặc dùng var(--font-display). */
  & .main :is(h1,h2,h3,h4),& :is(.bk-h1,.ch-spark .ch .n,.ck-doc h2,.ck-doc h3:first-of-type,.cs-top .nm,.fn-v,.health-bar .seg strong,.init-tab .it-num,.kpi .val,.kpi-v,.lm,.md-band-vl,.md-canh-vl,.md-h,.md-mini-vl,.md-mt-t,.md-pheu-don,.md-phu-top b,.modal-h .t,.mp-hero h1,.phase-card .phase-num,.phdr-h,.qa-kpi-v,.role-card .role-h,.sbm,.sc-vl,.sec-t,.section-body .sec-h3,.section-head h2,.stl,.sttitle,.up-empty-title,.up-id,.up-pagecount .num,.up-pgbtn.cur,.vdp-name,.vdp-sc-num,.vh h2,.viec-n,.zw-kpi .val){font-family:inherit}
  /* Blazor đặt con trỏ vào <h1> khi chuyển trang (FocusOnNavigate) — không vẽ khung quanh tiêu đề */
  & [tabindex="-1"]:focus,& [tabindex="-1"]:focus-visible{outline:none}

  /* ── Menu: nền trắng, viền mảnh, chữ xám, mục đang mở tô xanh nhạt ── */
  /* Thanh menu nền xanh Go365, chữ trắng (anh Khoa 06/10/2026) — logo trắng, icon tròn trắng hình xanh, mục đang chọn sáng hơn */
  & .sidebar{background:var(--t);color:#fff;border-left:1px solid var(--t2)}
  &[data-menu="left"] .sidebar{border-left:0;border-right:1px solid var(--t2)}
  & .lg-trang{display:block}
  & .lg-dam{display:none}
  & .sb-logo{padding:16px 16px 12px 20px;border-bottom:0}
  & .sb-logo img{height:26px !important}
  & .sb-logo .ls{color:rgba(255,255,255,.9);font-size:12px;font-weight:500;letter-spacing:0;margin:0;border:1px solid rgba(255,255,255,.35);border-radius:4px;padding:0 6px;line-height:20px}
  & .sb-thu{border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-size:12px}
  & .sb-thu:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);color:#fff}
  & .sb-search{padding:4px 12px 8px}
  & .sb-search input{height:36px;padding:0 12px 0 36px;font-size:12px;color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:8px;
     background:rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px 50% / 16px}
  & .sb-search input:focus{border-color:rgba(255,255,255,.6);background-color:rgba(255,255,255,.16)}
  & .sb-search input::placeholder{color:#fff;opacity:.7}
  & .sb-sec{margin-top:16px}
  & .sb-sec-h{color:rgba(255,255,255,.65);font-size:12px;font-weight:600;letter-spacing:.06em;padding:4px 20px}
  & .sb-item{color:rgba(255,255,255,.9);font-size:12px;font-weight:500;line-height:20px;padding:8px 12px;margin:0 8px;gap:12px;border-left:0;border-radius:6px}
  & .sb-item:hover{background:rgba(255,255,255,.1);color:#fff}
  & .sb-item.ac{background:rgba(255,255,255,.18);color:#fff;font-weight:600}
  & .sb-item .ic{width:26px;font-size:12px;display:inline-flex;align-items:center;justify-content:center;color:inherit}
  & .sb-item .ic-moi{width:26px;height:26px;padding:5px;box-sizing:border-box;border-radius:50%;background:#fff;fill:var(--t)}
  & .sb-item.sub{padding-left:42px;font-size:12px;color:rgba(255,255,255,.78)}
  & .sb-children .sb-item{font-size:12px}
  & .sb-dem{background:var(--or-bg);color:var(--or-text);font-size:12px;font-weight:600;height:20px;min-width:20px;padding:0 6px}
  & .sb-tip{background:var(--tx);color:var(--w);font-size:12px;font-weight:500;border:0;border-radius:6px}
  & .sb-backdrop{background:rgba(0,0,0,.32)}
  @media (min-width:901px){
    &[data-menu-thu="1"] .sb-logo{padding:16px 0}
    &[data-menu-thu="1"] .sb-sec-h{font-size:0;padding:0;margin:0 12px 8px;height:1px;background:rgba(255,255,255,.2)}
    &[data-menu-thu="1"] .sb-item{font-size:0;gap:0;justify-content:center;padding:10px 0;margin:0 8px}
    &[data-menu-thu="1"] .sb-item.sub{padding-left:0;background:transparent}
    &[data-menu-thu="1"] .sb-item .ic{width:auto}
    &[data-menu-thu="1"] .sb-dem{top:2px;right:2px;font-size:12px;height:16px;min-width:16px;padding:0 4px}
  }

  /* ── Thanh trên cùng ── */
  & .tb{height:56px;padding:0 32px;background:var(--w);border-bottom:1px solid var(--g2)}
  & .tbt{font-size:16px;font-weight:700;color:var(--tx)}
  & .tbr{gap:8px}
  & .tbb{height:36px;padding:0 12px;border:1px solid var(--g2);border-radius:8px;background:var(--w);color:var(--tx);font-size:12px;font-weight:500}
  & .tbb:hover{background:var(--bgw);border-color:var(--g2);color:var(--tx)}
  & .tbb.p,& .tbb.tl{background:var(--w);border-color:var(--g2);color:var(--tx)}
  & .tbb.p:hover,& .tbb.tl:hover{background:var(--bgw);border-color:var(--g2);color:var(--tx)}
  & .thm-btn{width:36px;height:36px;border:0;border-radius:8px;background:transparent;color:var(--gt)}
  & .thm-btn:hover{background:var(--bgw);color:var(--tx)}
  & .mob-burger{border:0;color:var(--gt)}
  & .tbuser-btn{background:transparent;border:0;border-radius:999px;padding:2px 8px 2px 2px;gap:8px}
  & .tbuser-btn:hover{background:var(--bgw)}
  & .tbuser-btn .avatar{background:var(--t4);color:var(--t);font-size:12px;font-weight:600}
  & .tbuser-btn .name{font-size:12px;font-weight:500;color:var(--tx)}
  & .tbuser-btn .role{font-size:12px;font-weight:400;color:var(--gt)}
  & .dd-menu{border:1px solid var(--g2);border-radius:8px;padding:4px}
  & .dd-menu a{border-bottom:0;border-radius:6px;padding:8px 12px;font-size:12px;font-weight:400;color:var(--tx)}
  & .dd-menu a:hover{background:var(--bgw);color:var(--tx)}
  & .dd-menu a > span:first-child{display:none}

  /* ── Khung nội dung ── */
  & .con{padding:32px}

  /* ── Thẻ, lưới, số ── */
  & .card,& .kpi{background:var(--w);border:1px solid var(--g2);border-radius:8px;padding:24px}
  & .g4c,& .g3c{gap:24px}
  & .g2c{gap:24px}
  & .kpi-h{font-size:12px;font-weight:500;color:var(--gt);letter-spacing:0;text-transform:none;margin-bottom:8px}
  & .kpi-v{font-family:inherit;font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
  & .kpi-d{font-size:12px;margin-top:8px}
  & .kpi-d .up{color:var(--t);font-weight:600}
  & .kpi-i,& .act-i{display:none}
  & .sec-t{font-family:inherit;font-size:16px;font-weight:700;margin-bottom:12px}
  & .rank .n{background:transparent;color:var(--gt);font-weight:500}
  & .rank .l{font-size:12px;font-weight:500}
  & .rank .l small{font-size:12px;font-weight:400}
  & .rank .v{font-size:12px;font-weight:600;color:var(--tx)}
  & .act-c .t{font-size:12px;font-weight:600}
  & .act-c .s{font-size:12px}
  & .empty:not(.dot){font-size:12px;padding:32px 16px}
  & .empty:not(.dot)::before{content:none}
  & .empty .cta{background:var(--t);font-size:12px;font-weight:500}

  /* ── Bảng ── */
  & table th{padding:12px;font-size:12px;font-weight:500;color:var(--gt);text-transform:none;letter-spacing:0;background:var(--w);border-bottom:1px solid var(--g2)}
  & table td{padding:12px;font-size:12px;border-bottom:1px solid var(--g2)}
  & table tr:hover td{background:var(--bgw)}
  & .selrow{background:var(--t4) !important}

  /* ── Nhãn trạng thái: nền nhạt, chữ vừa ── */
  & .bd{padding:2px 8px;font-size:12px;font-weight:500;border-radius:999px;gap:4px}

  /* ── Nút: xanh = hành động chính, viền xám = phụ, viền cam = xoá/huỷ ── */
  & .btn{padding:8px 16px;font-size:12px;font-weight:500;line-height:20px;border-radius:8px;border:1px solid transparent}
  & .btn.p,& .btn.t,& .btn.gn{background:var(--t);border-color:var(--t);color:var(--on-accent)}
  & .btn.p:hover,& .btn.t:hover,& .btn.gn:hover{background:var(--t2);border-color:var(--t2);color:var(--on-accent)}
  & .btn.rd{background:var(--w);border-color:var(--or);color:var(--or-text)}
  & .btn.rd:hover{background:var(--or-bg)}
  & .btn.gh{background:var(--w);border:1px solid var(--g2);color:var(--tx)}
  & .btn.gh:hover{background:var(--bgw);border-color:var(--g2);color:var(--tx)}
  & .btn.sm{padding:5px 12px;font-size:12px}
  & .btn.xs{padding:2px 8px;font-size:12px;line-height:18px}
  & .lo-btn{border:1px solid var(--g2)}
  & .iconbtn{border:1px solid var(--g2);border-radius:6px;color:var(--gt)}
  & .iconbtn.ed,& .iconbtn.dup,& .iconbtn.hist{color:var(--gt)}
  & .iconbtn:hover,& .iconbtn.ed:hover,& .iconbtn.dup:hover,& .iconbtn.hist:hover{background:var(--bgw);border-color:var(--g2);color:var(--t)}
  & .iconbtn.rd{color:var(--or-text)}
  & .iconbtn.rd:hover{background:var(--or-bg);border-color:var(--or)}

  /* ── Ô nhập, nhãn, thanh lọc, phân trang ── */
  & .inp{padding:8px 12px;font-size:12px;line-height:20px;border:1px solid var(--g2);border-radius:6px}
  & .inp:focus{border-color:var(--t)}
  & .lbl{font-size:12px;font-weight:500;color:var(--gt);letter-spacing:0;text-transform:none;margin-bottom:4px}
  & .fd{margin-bottom:16px}
  & .fr{gap:16px}
  & .fbar{padding:12px 16px;gap:12px;border-radius:8px;margin-bottom:24px}
  & .fbar .lbl-inline{font-size:12px;font-weight:500}
  & .pg{font-size:12px;margin-top:16px;padding-top:16px}
  & .pbt{padding:4px 12px;font-size:12px;font-weight:500;border-radius:6px}
  & .pbt.ac{background:var(--t4);border-color:var(--t4);color:var(--t)}
  & .modal{border:1px solid var(--g2);border-radius:8px;padding:24px}
  & .modal-h .t{font-family:inherit;font-size:16px;font-weight:700}
  & .modal-bg{background:rgba(0,0,0,.32)}
  & .ql-toolbar.ql-snow{border-width:1px !important;border-radius:6px 6px 0 0;background:var(--bgw)}
  & .ql-container.ql-snow{border-width:1px !important;border-radius:0 0 6px 6px}
  & .ql-editor{font-size:12px;line-height:1.6}
  & .stars{color:var(--or)}

  /* ── MudBlazor ── */
  & .mud-card,& .mud-paper{border-radius:8px !important;border:1px solid var(--g2) !important}
  & .mud-dialog{border-radius:8px !important;border:1px solid var(--g2) !important}
  & .mud-dialog-title{font-family:inherit !important;font-size:16px !important;font-weight:700 !important}
  & .mud-dialog-actions{padding:16px 24px !important}
  & .mud-overlay-dark,& .mud-overlay-scrim{background-color:rgba(0,0,0,.32) !important}
  & .mud-popover{border:1px solid var(--g2)}
  & .mud-button-root{text-transform:none !important;letter-spacing:0 !important;font-weight:500 !important}
  & .mud-button-root{font-size:12px}
  & .mud-button-label{font-size:inherit}
  & .mud-button-filled-primary{background-color:var(--t) !important;color:var(--on-accent) !important}
  & .mud-button-filled-primary:hover{background-color:var(--t2) !important}
  & .mud-button-filled-secondary{background-color:var(--w) !important;color:var(--tx) !important;border:1px solid var(--g2)}
  & .mud-button-filled-secondary:hover{background-color:var(--bgw) !important}
  & .mud-input-outlined .mud-input-outlined-border{border-width:1px !important;border-color:var(--g2) !important;border-radius:6px !important}
  & .mud-input-outlined.mud-shrink .mud-input-outlined-border{border-color:var(--g2) !important}
  & .mud-input.mud-focused .mud-input-outlined-border{border-color:var(--t) !important}
  & .mud-input.mud-error .mud-input-outlined-border{border-color:var(--or) !important}
  & .mud-input-label-animated{font-weight:500 !important;color:var(--gt) !important}
  & .mud-input-outlined.mud-shrink .mud-input-label-animated{font-family:inherit !important;text-transform:none !important;letter-spacing:0 !important;font-size:12px !important;font-weight:500 !important}
  & .mud-table-head .mud-table-cell{font-size:12px !important;font-weight:500 !important;color:var(--gt) !important;text-transform:none}
  & .mud-table-cell{font-size:12px;padding:12px}
  & .mud-tab{text-transform:none !important;font-weight:500;letter-spacing:0}
  & .mud-chip{font-weight:500}
  /* Chữ chung Montserrat 12 (06/10/2026): mỗi loại chữ MudBlazor có biến font riêng (mặc định Roboto — /profile còn Roboto),
     ô nhập + nhãn mặc định 16 → về 12. Điện thoại giữ ô nhập 16: dưới 16 iPhone tự phóng to khi chạm.
     Khung soạn thảo Quill (trang tạo SP) tự đặt Helvetica → theo chữ chung. */
  --mud-typography-h1-family:var(--font-body); --mud-typography-h2-family:var(--font-body); --mud-typography-h3-family:var(--font-body);
  --mud-typography-h4-family:var(--font-body); --mud-typography-h5-family:var(--font-body); --mud-typography-h6-family:var(--font-body);
  --mud-typography-subtitle1-family:var(--font-body); --mud-typography-subtitle2-family:var(--font-body);
  --mud-typography-body1-family:var(--font-body); --mud-typography-body2-family:var(--font-body);
  --mud-typography-input-family:var(--font-body); --mud-typography-button-family:var(--font-body);
  --mud-typography-caption-family:var(--font-body); --mud-typography-overline-family:var(--font-body);
  & :is(.mud-input,.mud-input-label,.mud-input-helper-text){font-size:12px}
  @media (max-width:900px){ & :is(.mud-input,.mud-input-label){font-size:16px} }
  /* Nhãn nổi khi ô có chữ / đang gõ: MudBlazor co nhãn bằng transform scale(.75) → 12px chỉ còn hiện 9px.
     Bù cỡ chữ ÷ .75 để mắt thấy đúng 12 (giữ nguyên translate/max-width MudBlazor đã tính theo .75). */
  & :is(.mud-shrink,.mud-input:focus-within,.mud-input:has(:-webkit-autofill))~label.mud-input-label.mud-input-label-inputcontrol{font-size:calc(12px / .75) !important}
  & :is(.ql-toolbar,.ql-container,.ql-snow .ql-picker){font-family:inherit}
  /* TOÀN BỘ chữ Montserrat (anh Khoa 06/10/2026) — cả số / mã đang để font đều nét viết thẳng trong thẻ; chữ số đều rộng
     (tabular-nums) để cột số vẫn thẳng. Khung <pre> (nhật ký, JSON thô) giữ font đều nét cho dễ đọc. */
  & :is([style*="monospace"],[style*="Plex Mono"],[style*="JetBrains"],[style*="Consolas"],[style*="font-family:Arial"],[style*="font-family: Arial"]):not(pre){font-family:var(--font-body) !important;font-variant-numeric:tabular-nums}
  & pre{font-family:'IBM Plex Mono',ui-monospace,monospace}
  & :is(code,kbd,samp):not(pre *){font-family:var(--font-body);font-variant-numeric:tabular-nums}

  /* ── Luật 4: cỡ chữ viết thẳng trong trang (style="font-size:…") đưa về 3 cỡ 12 · 16 · 18, độ đậm 700–900 về 600 ── */
  & [style*="font-weight:700"],
  & [style*="font-weight: 700"],
  & [style*="font-weight:800"],
  & [style*="font-weight: 800"],
  & [style*="font-weight:900"],
  & [style*="font-weight: 900"]{font-weight:600 !important}
  & [style*="font-size:8px"],
  & [style*="font-size: 8px"],
  & [style*="font-size:8.5px"],
  & [style*="font-size: 8.5px"],
  & [style*="font-size:9px"],
  & [style*="font-size: 9px"],
  & [style*="font-size:9.5px"],
  & [style*="font-size: 9.5px"],
  & [style*="font-size:10px"],
  & [style*="font-size: 10px"],
  & [style*="font-size:10.5px"],
  & [style*="font-size: 10.5px"],
  & [style*="font-size:11px"],
  & [style*="font-size: 11px"],
  & [style*="font-size:11.5px"],
  & [style*="font-size: 11.5px"],
  & [style*="font-size:12.5px"],
  & [style*="font-size: 12.5px"],
  & [style*="font-size:12.8px"],
  & [style*="font-size: 12.8px"]{font-size:12px !important}
  & [style*="font-size:13px"],
  & [style*="font-size: 13px"],
  & [style*="font-size:13.5px"],
  & [style*="font-size: 13.5px"],
  & [style*="font-size:14.5px"],
  & [style*="font-size: 14.5px"],
  & [style*="font-size:15px"],
  & [style*="font-size: 15px"],
  & [style*="font-size:15.5px"],
  & [style*="font-size: 15.5px"]{font-size:12px !important}
  & [style*="font-size:16.5px"],
  & [style*="font-size: 16.5px"],
  & [style*="font-size:17px"],
  & [style*="font-size: 17px"],
  & [style*="font-size:18px"],
  & [style*="font-size: 18px"],
  & [style*="font-size:19px"],
  & [style*="font-size: 19px"]{font-size:16px !important;font-weight:700 !important}
  & [style*="font-size:20px"],
  & [style*="font-size: 20px"],
  & [style*="font-size:21px"],
  & [style*="font-size: 21px"],
  & [style*="font-size:22px"],
  & [style*="font-size: 22px"],
  & [style*="font-size:23px"],
  & [style*="font-size: 23px"],
  & [style*="font-size:26px"],
  & [style*="font-size: 26px"],
  & [style*="font-size:27px"],
  & [style*="font-size: 27px"],
  & [style*="font-size:28px"],
  & [style*="font-size: 28px"]{font-size:18px !important;font-weight:700 !important}
  & [style*="font-size:30px"],
  & [style*="font-size: 30px"],
  & [style*="font-size:34px"],
  & [style*="font-size: 34px"],
  & [style*="font-size:36px"],
  & [style*="font-size: 36px"],
  & [style*="font-size:38px"],
  & [style*="font-size: 38px"],
  & [style*="font-size:40px"],
  & [style*="font-size: 40px"],
  & [style*="font-size:42px"],
  & [style*="font-size: 42px"],
  & [style*="font-size:44px"],
  & [style*="font-size: 44px"],
  & [style*="font-size:48px"],
  & [style*="font-size: 48px"],
  & [style*="font-size:52px"],
  & [style*="font-size: 52px"],
  & [style*="font-size:54px"],
  & [style*="font-size: 54px"],
  & [style*="font-size:56px"],
  & [style*="font-size: 56px"],
  & [style*="font-size:60px"],
  & [style*="font-size: 60px"]{font-size:18px !important;font-weight:700 !important}
  /* 14 / 24 / 32 nằm sẵn trên thang 5 cỡ cũ nên trước không có luật — thang 12 · 16 · 18 (06/10/2026) phải đổi cả ba */
  & [style*="font-size:14px"],& [style*="font-size: 14px"]{font-size:12px !important}
  & [style*="font-size:24px"],& [style*="font-size: 24px"],& [style*="font-size:32px"],& [style*="font-size: 32px"]{font-size:18px !important;font-weight:700 !important}

  /* ── Luật 3: mã màu viết thẳng trong trang đưa về xanh / cam / xám ── */
  & [style^="color:#92400e"],
  & [style*=";color:#92400e"],
  & [style*="; color:#92400e"],
  & [style^="color:#991b1b"],
  & [style*=";color:#991b1b"],
  & [style*="; color:#991b1b"],
  & [style^="color:#a40e26"],
  & [style*=";color:#a40e26"],
  & [style*="; color:#a40e26"],
  & [style^="color:#b00"],
  & [style*=";color:#b00"],
  & [style*="; color:#b00"],
  & [style^="color:#d97706"],
  & [style*=";color:#d97706"],
  & [style*="; color:#d97706"],
  & [style^="color:#8a5a00"],
  & [style*=";color:#8a5a00"],
  & [style*="; color:#8a5a00"],
  & [style^="color:#b91c1c"],
  & [style*=";color:#b91c1c"],
  & [style*="; color:#b91c1c"],
  & [style^="color:#dc2626"],
  & [style*=";color:#dc2626"],
  & [style*="; color:#dc2626"],
  & [style^="color:#cf222e"],
  & [style*=";color:#cf222e"],
  & [style*="; color:#cf222e"],
  & [style^="color:#bc4c00"],
  & [style*=";color:#bc4c00"],
  & [style*="; color:#bc4c00"],
  & [style^="color:#9a6700"],
  & [style*=";color:#9a6700"],
  & [style*="; color:#9a6700"],
  & [style^="color:#c2410c"],
  & [style*=";color:#c2410c"],
  & [style*="; color:#c2410c"],
  & [style^="color:#ea580c"],
  & [style*=";color:#ea580c"],
  & [style*="; color:#ea580c"]{color:var(--or-text) !important}
  & [style^="color:#15803d"],
  & [style*=";color:#15803d"],
  & [style*="; color:#15803d"],
  & [style^="color:#11683a"],
  & [style*=";color:#11683a"],
  & [style*="; color:#11683a"],
  & [style^="color:#16a34a"],
  & [style*=";color:#16a34a"],
  & [style*="; color:#16a34a"],
  & [style^="color:#047857"],
  & [style*=";color:#047857"],
  & [style*="; color:#047857"],
  & [style^="color:#1a7f37"],
  & [style*=";color:#1a7f37"],
  & [style*="; color:#1a7f37"],
  & [style^="color:#116329"],
  & [style*=";color:#116329"],
  & [style*="; color:#116329"],
  & [style^="color:#166534"],
  & [style*=";color:#166534"],
  & [style*="; color:#166534"]{color:var(--t) !important}
  & [style^="color:#9ca3af"],
  & [style*=";color:#9ca3af"],
  & [style*="; color:#9ca3af"],
  & [style^="color:#64748b"],
  & [style*=";color:#64748b"],
  & [style*="; color:#64748b"],
  & [style^="color:#475569"],
  & [style*=";color:#475569"],
  & [style*="; color:#475569"],
  & [style^="color:#6b7280"],
  & [style*=";color:#6b7280"],
  & [style*="; color:#6b7280"],
  & [style^="color:#57606a"],
  & [style*=";color:#57606a"],
  & [style*="; color:#57606a"],
  & [style^="color:#666"],
  & [style*=";color:#666"],
  & [style*="; color:#666"],
  & [style^="color:#9aa"],
  & [style*=";color:#9aa"],
  & [style*="; color:#9aa"],
  & [style^="color:#888"],
  & [style*=";color:#888"],
  & [style*="; color:#888"],
  & [style^="color:#999"],
  & [style*=";color:#999"],
  & [style*="; color:#999"]{color:var(--gt) !important}
  & [style^="color:#374151"],
  & [style*=";color:#374151"],
  & [style*="; color:#374151"],
  & [style^="color:#444"],
  & [style*=";color:#444"],
  & [style*="; color:#444"],
  & [style^="color:#333"],
  & [style*=";color:#333"],
  & [style*="; color:#333"],
  & [style^="color:#1f2937"],
  & [style*=";color:#1f2937"],
  & [style*="; color:#1f2937"],
  & [style^="color:#111827"],
  & [style*=";color:#111827"],
  & [style*="; color:#111827"]{color:var(--tx) !important}
  & [style^="background:#fef3c7"],
  & [style*=";background:#fef3c7"],
  & [style*="; background:#fef3c7"],
  & [style^="background:#fee2e2"],
  & [style*=";background:#fee2e2"],
  & [style*="; background:#fee2e2"],
  & [style^="background:#fffbeb"],
  & [style*=";background:#fffbeb"],
  & [style*="; background:#fffbeb"],
  & [style^="background:#fff7ed"],
  & [style*=";background:#fff7ed"],
  & [style*="; background:#fff7ed"],
  & [style^="background:#fef2f2"],
  & [style*=";background:#fef2f2"],
  & [style*="; background:#fef2f2"],
  & [style^="background:#ffebe9"],
  & [style*=";background:#ffebe9"],
  & [style*="; background:#ffebe9"],
  & [style^="background:#fff8c5"],
  & [style*=";background:#fff8c5"],
  & [style*="; background:#fff8c5"],
  & [style^="background:#ffedd5"],
  & [style*=";background:#ffedd5"],
  & [style*="; background:#ffedd5"]{background:var(--or-bg) !important}
  & [style^="background-color:#fef3c7"],
  & [style*=";background-color:#fef3c7"],
  & [style*="; background-color:#fef3c7"],
  & [style^="background-color:#fee2e2"],
  & [style*=";background-color:#fee2e2"],
  & [style*="; background-color:#fee2e2"],
  & [style^="background-color:#fffbeb"],
  & [style*=";background-color:#fffbeb"],
  & [style*="; background-color:#fffbeb"],
  & [style^="background-color:#fff7ed"],
  & [style*=";background-color:#fff7ed"],
  & [style*="; background-color:#fff7ed"],
  & [style^="background-color:#fef2f2"],
  & [style*=";background-color:#fef2f2"],
  & [style*="; background-color:#fef2f2"]{background-color:var(--or-bg) !important}
  & [style^="background:#dcfce7"],
  & [style*=";background:#dcfce7"],
  & [style*="; background:#dcfce7"],
  & [style^="background:#dafbe1"],
  & [style*=";background:#dafbe1"],
  & [style*="; background:#dafbe1"],
  & [style^="background:#ecfdf5"],
  & [style*=";background:#ecfdf5"],
  & [style*="; background:#ecfdf5"],
  & [style^="background:#f0fdf4"],
  & [style*=";background:#f0fdf4"],
  & [style*="; background:#f0fdf4"],
  & [style^="background:#d1fae5"],
  & [style*=";background:#d1fae5"],
  & [style*="; background:#d1fae5"]{background:var(--t4) !important}
  & [style^="background:#f1f5f9"],
  & [style*=";background:#f1f5f9"],
  & [style*="; background:#f1f5f9"],
  & [style^="background:#f8fafc"],
  & [style*=";background:#f8fafc"],
  & [style*="; background:#f8fafc"],
  & [style^="background:#f3f4f6"],
  & [style*=";background:#f3f4f6"],
  & [style*="; background:#f3f4f6"],
  & [style^="background:#f9fafb"],
  & [style*=";background:#f9fafb"],
  & [style*="; background:#f9fafb"],
  & [style^="background:#f6f8fa"],
  & [style*=";background:#f6f8fa"],
  & [style*="; background:#f6f8fa"]{background:var(--bgw) !important}
  & [style^="background:#d97706"],
  & [style*=";background:#d97706"],
  & [style*="; background:#d97706"],
  & [style^="background:#dc2626"],
  & [style*=";background:#dc2626"],
  & [style*="; background:#dc2626"],
  & [style^="background:#f59e0b"],
  & [style*=";background:#f59e0b"],
  & [style*="; background:#f59e0b"],
  & [style^="background:#ef4444"],
  & [style*=";background:#ef4444"],
  & [style*="; background:#ef4444"]{background:var(--or) !important}
  & [style^="background:#16a34a"],
  & [style*=";background:#16a34a"],
  & [style*="; background:#16a34a"],
  & [style^="background:#22c55e"],
  & [style*=";background:#22c55e"],
  & [style*="; background:#22c55e"],
  & [style^="background:#02676a"],
  & [style*=";background:#02676a"],
  & [style*="; background:#02676a"]{background:var(--t) !important}
  & [style*="border:"][style*="#fbbf24"],
  & [style*="border-color:"][style*="#fbbf24"],
  & [style*="border-left:"][style*="#fbbf24"],
  & [style*="border-top:"][style*="#fbbf24"],
  & [style*="border-bottom:"][style*="#fbbf24"],
  & [style*="border:"][style*="#e0b04a"],
  & [style*="border-color:"][style*="#e0b04a"],
  & [style*="border-left:"][style*="#e0b04a"],
  & [style*="border-top:"][style*="#e0b04a"],
  & [style*="border-bottom:"][style*="#e0b04a"],
  & [style*="border:"][style*="#bf8700"],
  & [style*="border-color:"][style*="#bf8700"],
  & [style*="border-left:"][style*="#bf8700"],
  & [style*="border-top:"][style*="#bf8700"],
  & [style*="border-bottom:"][style*="#bf8700"],
  & [style*="border:"][style*="#ff8182"],
  & [style*="border-color:"][style*="#ff8182"],
  & [style*="border-left:"][style*="#ff8182"],
  & [style*="border-top:"][style*="#ff8182"],
  & [style*="border-bottom:"][style*="#ff8182"],
  & [style*="border:"][style*="#fca5a5"],
  & [style*="border-color:"][style*="#fca5a5"],
  & [style*="border-left:"][style*="#fca5a5"],
  & [style*="border-top:"][style*="#fca5a5"],
  & [style*="border-bottom:"][style*="#fca5a5"],
  & [style*="border:"][style*="#fecaca"],
  & [style*="border-color:"][style*="#fecaca"],
  & [style*="border-left:"][style*="#fecaca"],
  & [style*="border-top:"][style*="#fecaca"],
  & [style*="border-bottom:"][style*="#fecaca"],
  & [style*="border:"][style*="#fde68a"],
  & [style*="border-color:"][style*="#fde68a"],
  & [style*="border-left:"][style*="#fde68a"],
  & [style*="border-top:"][style*="#fde68a"],
  & [style*="border-bottom:"][style*="#fde68a"],
  & [style*="border:"][style*="#f0c36d"],
  & [style*="border-color:"][style*="#f0c36d"],
  & [style*="border-left:"][style*="#f0c36d"],
  & [style*="border-top:"][style*="#f0c36d"],
  & [style*="border-bottom:"][style*="#f0c36d"],
  & [style*="border:"][style*="#d4a72c"],
  & [style*="border-color:"][style*="#d4a72c"],
  & [style*="border-left:"][style*="#d4a72c"],
  & [style*="border-top:"][style*="#d4a72c"],
  & [style*="border-bottom:"][style*="#d4a72c"]{border-color:var(--or) !important}
  & [style*="border:"][style*="#86efac"],
  & [style*="border-color:"][style*="#86efac"],
  & [style*="border-left:"][style*="#86efac"],
  & [style*="border-top:"][style*="#86efac"],
  & [style*="border-bottom:"][style*="#86efac"],
  & [style*="border:"][style*="#bbf7d0"],
  & [style*="border-color:"][style*="#bbf7d0"],
  & [style*="border-left:"][style*="#bbf7d0"],
  & [style*="border-top:"][style*="#bbf7d0"],
  & [style*="border-bottom:"][style*="#bbf7d0"],
  & [style*="border:"][style*="#4ac26b"],
  & [style*="border-color:"][style*="#4ac26b"],
  & [style*="border-left:"][style*="#4ac26b"],
  & [style*="border-top:"][style*="#4ac26b"],
  & [style*="border-bottom:"][style*="#4ac26b"],
  & [style*="border:"][style*="#1a7f37"],
  & [style*="border-color:"][style*="#1a7f37"],
  & [style*="border-left:"][style*="#1a7f37"],
  & [style*="border-top:"][style*="#1a7f37"],
  & [style*="border-bottom:"][style*="#1a7f37"]{border-color:var(--t) !important}
  & [style*="border:"][style*="#e2e8f0"],
  & [style*="border-color:"][style*="#e2e8f0"],
  & [style*="border-left:"][style*="#e2e8f0"],
  & [style*="border-top:"][style*="#e2e8f0"],
  & [style*="border-bottom:"][style*="#e2e8f0"],
  & [style*="border:"][style*="#e5e7eb"],
  & [style*="border-color:"][style*="#e5e7eb"],
  & [style*="border-left:"][style*="#e5e7eb"],
  & [style*="border-top:"][style*="#e5e7eb"],
  & [style*="border-bottom:"][style*="#e5e7eb"],
  & [style*="border:"][style*="#d1d5db"],
  & [style*="border-color:"][style*="#d1d5db"],
  & [style*="border-left:"][style*="#d1d5db"],
  & [style*="border-top:"][style*="#d1d5db"],
  & [style*="border-bottom:"][style*="#d1d5db"],
  & [style*="border:"][style*="#ccc"],
  & [style*="border-color:"][style*="#ccc"],
  & [style*="border-left:"][style*="#ccc"],
  & [style*="border-top:"][style*="#ccc"],
  & [style*="border-bottom:"][style*="#ccc"],
  & [style*="border:"][style*="#ddd"],
  & [style*="border-color:"][style*="#ddd"],
  & [style*="border-left:"][style*="#ddd"],
  & [style*="border-top:"][style*="#ddd"],
  & [style*="border-bottom:"][style*="#ddd"],
  & [style*="border:"][style*="#cbd5e1"],
  & [style*="border-color:"][style*="#cbd5e1"],
  & [style*="border-left:"][style*="#cbd5e1"],
  & [style*="border-top:"][style*="#cbd5e1"],
  & [style*="border-bottom:"][style*="#cbd5e1"]{border-color:var(--g2) !important}

  /* =====================================================================
     KHUNG DÙNG CHUNG — bộ .kh-* (94 trang danh sách / cấu hình), thanh tab PageTabs, KPI trang AI.
     Rà soát 05/10/2026: đây là nguồn cỡ chữ lẻ chung nhiều nhất (25 · 14,5 · 27 · 10 · 11,5px…).
     ===================================================================== */
  & .main small{font-size:12px}
  & .kh-hd h1{font-size:18px;font-weight:700;letter-spacing:-.01em}
  & .kh-hd p{font-size:12px}
  & .kh-eyebrow{font-size:12px;font-weight:600;letter-spacing:.06em}
  & .kh-card-h h2{font-size:16px;font-weight:700;letter-spacing:0}
  & .kh-card-h .sub,& .kh-card-f,& .kh-f-h,& .kh-warn,& .kh-sw span,& .kh-calc-ft,& .kh-tier-ft,& .kh-chip,& .kh-bg-tag,& .kh-bg-b p,& .kh-tr .k,& .kh-tr .u,& .kh-unit .u,& .kh-who .av,& .kh-cb{font-size:12px}
  & .kh-f-l,& .kh-sw b,& .kh-calc-h b,& .kh-cr .nm,& .kh-cr .pt,& .kh-who .tx b,& .kh-rank,& .kh-note,& .kh-empty,& .kh-tr .kh-inp,& .kh-calc .kh-inp{font-size:12px}
  & .kh-f-l,& .kh-cr .nm,& .kh-who .tx b,& .kh-calc-h b,& .kh-cb,& .kh-chip,& .kh-rank,& .kh-who .av,& .kh-bg-tag{font-weight:600}
  & .kh-cr .vnd,& .kh-tier-top .ttl b,& .kh-bg-b h3{font-size:16px;font-weight:700}
  & .kh-cr .nm small,& .kh-tier-top .ttl small{font-size:12px;font-family:inherit}
  & .kh-cr .ic{font-size:16px;font-weight:700}
  & .kh-kpi .ic,& .kh-empty .e{display:none}
  & .kh-kpi .k{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
  & .kh-kpi .v{font-size:18px;font-weight:700;letter-spacing:-.02em}
  & .kh-kpi .d{font-size:12px;font-weight:400}
  & .kh-tbl th{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
  & .kh-tbl td{font-size:12px;padding:12px}
  & .kh-note{border-left-width:1px;border-radius:8px}
  & .pgtabs .pgtab{font-size:12px;font-weight:500}
  & .kpi-l{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none}
  & .kpi-s{font-size:12px}
  & .iconbtn{font-size:12px}
  @media (max-width:900px){
    & .kh-hd h1{font-size:18px;font-weight:700}
    & .kh-kpi .v{font-size:18px;font-weight:700}
  }

  /* =====================================================================
     BÀN LÀM VIỆC (/admin/) — giống mẫu /admin/mau/phang-ban-lam-viec.html
     ===================================================================== */
  & .blv > *{margin-bottom:12px !important}   /* khoảng giữa các khối = khoảng giữa 2 thẻ việc (anh Khoa 07/10/2026; trước 32px) */
  & .blv .g2c{gap:12px}
  & .blv > .bc-tde{margin-bottom:12px !important}
  & .bc-n{font-family:inherit;font-weight:600}
  & .bc-hd{font-size:12px;font-weight:500;color:var(--gt);letter-spacing:0;text-transform:none}
  & .bc-tde{font-size:16px;font-weight:700;color:var(--tx)}
  & .bc-card{background:var(--w);border:1px solid var(--g2);border-radius:8px;padding:24px}
  & .bc-bd-tabs{margin:-24px -24px 20px;padding:10px 20px 0;border-radius:7px 7px 0 0}   /* dải tab kiểu Chrome sát mép trên khối (padding 24) */
  & .bc-ct{font-size:16px;font-weight:700;gap:8px}
  & .bc-cs{font-size:12px;font-weight:400;margin-bottom:12px}
  /* ô việc cần làm: thẻ rời, cách nhau, bo góc (anh Khoa 07/10/2026 — trước là lưới chung kẻ đường nhạt) */
  /* thẻ việc (anh Khoa 07/10/2026): đủ rộng → 1 hàng giãn kín bề ngang (bao nhiêu thẻ cũng vậy); hẹp (mở menu / máy nhỏ) → 3 cột;
     điện thoại → 2 cột. Đo bề rộng của chính khung thẻ (container query) nên thu / mở menu tự xếp lại, không lẻ hàng 5+1 / 4+2. */
  & .bc-viecs-khung{container-type:inline-size}
  & .bc-viecs{gap:12px;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  & .bc-viecs > .bc-viec{flex-direction:column;align-items:flex-start;gap:8px;padding:24px;margin:0;
     border:1px solid var(--g2);border-radius:8px;background:var(--w);opacity:1}
  & a.bc-viec:hover{background:var(--bgw);border-color:var(--g2)}
  & .bc-viecs > .bc-viec .bc-mui{margin:auto 0 0}   /* nút ở đáy ô (anh Khoa 07/10/2026) — ô cùng hàng cao bằng nhau nên nút thẳng hàng */
  & .bc-viec .vn{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--tx)}
  & .bc-viec .vl{font-size:12px;font-weight:600;line-height:1.4}
  & .bc-viec .vs{font-size:12px;font-weight:400;line-height:1.6;margin-top:4px}
  & .bc-cam .vn,& .bc-do .vn{color:var(--or-text)}
  /* số ô việc: 42px (anh Khoa 07/10/2026: 18 → 22, rồi "to thêm 20px"); ô đang có việc cam GetYourGuide cho nổi bật */
  & .bc-viecs > .bc-viec .vn{font-size:42px;line-height:48px}
  & .bc-viecs > .bc-cam .vn,& .bc-viecs > .bc-do .vn{color:#ff5533}
  @container (max-width:1000px){& .bc-viecs{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}}
  @container (max-width:520px){& .bc-viecs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} & .bc-viecs > .bc-viec .vn{font-size:34px;line-height:40px}}
  & .bc-vang .vn,& .bc-lam .vn{color:var(--tx)}
  & .bc-viecs > .bc-ghep{gap:6px}
  & .bc-ghep-o b{font-size:26px;line-height:32px;font-weight:600;color:var(--gt);opacity:.6}
  & .bc-ghep-o.co b{color:#ff5533;opacity:1}
  & .bc-ghep-o span{font-size:12px;font-weight:600;color:var(--tx)}
  & .bc-xanh .vn,& .bc-xam .vn{color:var(--gt);opacity:.6}
  & .bc-xanh .vs{color:var(--t)}
  & .bc-chip{font-size:12px;font-weight:500;background:var(--w);color:var(--or-text);border:1px solid var(--g2);border-radius:999px;padding:0 8px;margin:4px 4px 0 0}
  & .bc-chip.cam{background:var(--w);color:var(--or-text)}
  & .bc-seg{border-radius:8px}
  & .bc-seg button{font-size:12px;font-weight:500;padding:0 12px;min-height:32px}
  & .bc-seg button.on{background:var(--t4);color:var(--t);font-weight:600}
  & .bc-kv,& .bc-kv.sm{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.2}
  & .bc-kv small{font-size:12px;font-weight:500}
  & .blv .bc-kv,& .blv .bc-kv.sm{font-size:38px;line-height:1.15}   /* mọi số lớn Bàn làm việc (Hôm nay + 30 ngày): 18 → 38 (anh Khoa 07/10/2026 "to thêm 20px") */
  /* 6 chỉ số tổng dưới khối 30 ngày (anh Khoa 07/10/2026): thẻ riêng; khung ≥1400px 1 hàng kín bề ngang (thẻ đủ rộng cho số 38px),
     hẹp hơn (laptop / mở menu) 3 cột, điện thoại 2 cột. Số tích luỹ dài (14 ký tự) tự co theo bề rộng thẻ (cqi), tối đa 38px. */
  & .bc-chiso-khung{container-type:inline-size}
  & .bc-chiso{display:grid;gap:12px;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  & .bc-chiso > .bc-so{margin:0;min-width:0;container-type:inline-size}
  & .blv .bc-chiso .bc-kv.bc-kv-dai{font-size:min(38px,11cqi);white-space:nowrap}
  @container (max-width:1400px){& .bc-chiso{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr))}}
  @container (max-width:520px){& .bc-chiso{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
  & .bc-delta{font-size:12px;font-weight:600;background:transparent;padding:0}
  & .bc-up{color:var(--t)}
  & .bc-down{color:var(--or-text)}
  & .bc-cols > * + *{border-left-color:var(--g2);padding-left:24px}
  & .bc-cols > *{padding-right:24px}
  & .bc-cols > *:only-child{padding-right:0}   /* khối 1 cột (khối doanh số) không chừa lề phải — dải tab sát đủ 2 mép */
  & .bc-foot{font-size:12px;font-weight:400;border-top-color:var(--g2);margin-top:16px;padding-top:12px;gap:24px}
  /* mã kênh giữ màu từng sàn như cũ (màu phân loại) — chỉ làm gọn cỡ chữ */
  & .bc-kenh{font-size:12px;font-weight:600;letter-spacing:0;border-radius:4px;padding:0 6px}
  & .bc-k-vexere{background:#dbeafe;color:#1d4ed8}
  & .bc-k-trip{background:#ffedd5;color:#c2410c}
  & .bc-k-klook{background:#fee2e2;color:#b91c1c}
  & .bc-k-bookaway{background:#ede9fe;color:#6d28d9}
  & .bc-k-web{background:#e9f3f3;color:#015959}
  & .bc-rank{padding:12px 0;border-bottom-color:var(--g2)}
  & a.bc-rank{margin:0 -8px;padding-left:8px;padding-right:8px}
  & .bc-rank .i{font-size:12px;font-weight:400}
  & .bc-rank .t{font-size:12px;font-weight:400}
  & .bc-rank .b{height:4px;border-radius:2px;margin-top:6px}
  & .bc-rank .v{font-size:12px;font-weight:600}
  & .bc-rank .v em{font-size:12px;font-weight:400}
  & .bc-rank.noibat{background:transparent}
  & .bc-rank.noibat .t{color:var(--tx);font-weight:600}
  & .bc-rank.noibat .v{color:var(--tx)}
  & .bc-luuy{background:var(--w);border:1px solid var(--g2);border-radius:8px;padding:12px 16px}
  & .bc-luuy .h{font-size:12px;font-weight:600}
  & .bc-luuy .b{font-size:12px}
  & .bc-stack{border-radius:4px}
  & .bc-chu{font-size:12px;font-weight:500}
  & .bc-cot .lb,& .bc-truc{font-family:inherit;font-size:12px}
  & .bc-bang-nhan{font-size:12px;font-weight:600}
  @media (max-width:900px){
    & .bc-cols > * + *{border-top-color:var(--g2);padding-left:0;padding-top:16px;margin-top:16px}
    & .bc-cols > *{padding-right:0}
    & .blv > *{margin-bottom:8px !important}
    & .blv .g2c{gap:8px}
    & .bc-viecs > .bc-viec{padding:16px}
    & .bc-kv,& .bc-kv.sm,& .bc-viec .vn{font-size:18px;font-weight:700}
    & .blv .bc-kv,& .blv .bc-kv.sm{font-size:30px}
  }

  /* =====================================================================
     ĐIỀU HÀNH (/admin/dieu-hanh) — khung/nền/chữ của trang về bảng màu chung.
     MÀU PHÂN LOẠI giữ như tab cũ (owner 05/10/2026): sàn OTA, nhóm SP, trạng thái giao, giờ, BMS/Zalo, lỗ/trễ —
     nên KHÔNG đè các biến --dh-xanh/luc/do/vang/cam/tim/hong-*, mã kênh, chấm tuyến, vạch sức chứa.
     "body" trong bộ chọn để thắng khối nền tối viết trong <style> của trang.
     ===================================================================== */
  & body :is(.dh,.dh-modal){
    --bd:var(--g2); --mut:var(--gt); --bg2:var(--bgw); --acc:var(--t); --dh-acc-nen:var(--t);
    --dh-nen:var(--w); --dh-chu:var(--tx); --dh-hover:var(--bgw); --dh-hover2:var(--g2); --dh-ke:var(--g2);
  }
  & .dh{gap:24px}
  & .dh-card{border-radius:8px;padding:16px 24px}
  & .dh-top2{gap:12px}
  & .dh-top2 h2{font-size:18px;font-weight:700;margin-right:8px}
  & .dh-ngay2{border-radius:8px;height:36px}
  & .dh-ib2{border-radius:8px;font-size:16px;font-weight:700}
  & .dh-ngaydd > summary{font-weight:600 !important;font-size:12px !important;height:34px !important}
  & .dh-nhanh button{border-radius:8px;padding:0 12px;height:36px;font-size:12px;color:var(--gt)}
  & .dh-nhanh button.on{background:var(--t4);border-color:var(--t4);color:var(--t);font-weight:600}
  & .dh-theo{border-radius:8px}
  & .dh-theo button{height:34px;padding:0 12px;font-size:12px;color:var(--gt)}
  & .dh-theo button.on{background:var(--t4);color:var(--t);font-weight:600}
  & .dh-seg button{font-size:12px}
  & .dh-seg button.on{background:var(--w);color:var(--t)}
  & .dh-them > summary{width:36px;height:36px !important;font-size:16px;font-weight:700}
  & .dh-dd summary,& .dh-fl select,& .dh-fl .dh-q{height:36px;font-size:12px;border-radius:8px}
  & .dh-ddm{border-radius:8px}
  & .dh-themm button{font-size:12px;padding:8px 12px;border-radius:6px}
  /* bốn hàng đợi: lưới phân ô, ô đang chọn nền xanh nhạt + gạch dưới */
  & .dh-q4{gap:0;background:var(--w);border:1px solid var(--g2);border-radius:8px;overflow:hidden}
  & .dh-qd{position:relative;align-items:stretch;gap:4px;padding:12px 16px;margin:0 -1px -1px 0;border:0;border-right:1px solid var(--g2);border-bottom:1px solid var(--g2);border-radius:0;background:var(--w)}
  & .dh-qd:hover{background:var(--bgw);border-color:var(--g2)}
  & .dh-qd.on{background:color-mix(in srgb,var(--m) 9%,var(--w))}
  & .dh-qd.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--m)}
  & .dh-qd .k{font-size:12px;font-weight:500;color:var(--gt)}
  & .dh-qd .k::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--m);margin-right:6px;vertical-align:1px}
  & .dh-qd.on .k{color:var(--tx);font-weight:600}
  & .dh-qd .v{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-top:4px}
  & .dh-qd .v small{font-size:12px;font-weight:500;letter-spacing:0}
  & .dh-qd .s{font-size:12px;gap:8px}
  & .dh-qd .s b{font-weight:600}
  & .dh-tiendo{font-size:12px;gap:16px}
  & .dh-tdbar{height:4px;border-radius:2px;background:var(--g2)}
  & .dh-tdbar i{background:var(--t);border-radius:2px}
  & .dh-nhac{border-radius:8px;padding:12px 16px;font-size:12px;gap:8px}
  & .dh-loat{background:var(--w);color:var(--gt);border:1px solid var(--g2);border-radius:8px;padding:12px 16px;font-size:12px}
  & .dh-loat b{color:var(--tx)}
  & .dh-bulk,& .dh-ok{border-radius:8px}
  & .dh-fl2{gap:12px}
  & .dh-q2{height:36px;border-radius:8px;font-size:12px}
  & .dh-locdd > summary{height:36px !important;font-weight:500}
  & .dh-so{background:var(--t);color:var(--on-accent);font-size:12px}
  & .dh-pill{font-size:12px}
  & .dh-dem2{font-size:12px}
  & .dh-ghichu,& .dh-legend{font-size:12px;border-radius:8px}
  & .dh-link{font-size:12px;font-weight:500}
  /* bảng */
  & .dh-tbl{font-size:12px;border-radius:8px}
  & .dh-tbl th{top:0;padding:12px;font-size:12px;font-weight:500;text-transform:none;letter-spacing:0;background:var(--w)}
  & .dh-tbl thead th:first-child{border-top-left-radius:8px}
  & .dh-tbl thead th:last-child{border-top-right-radius:8px}
  & .dh-tbl td{padding:12px}
  /* vạch trạng thái đầu dòng (tab cũ vẽ bằng bóng, giao diện phẳng vẽ bằng viền): chưa giao · xe nhà · thuê ngoài · đối tác */
  & .dh-tbl tr.k-cg td:first-child{border-left:3px solid #f0883e}
  & .dh-tbl tr.k-xn td:first-child{border-left:3px solid #2da44e}
  & .dh-tbl tr.k-tn td:first-child{border-left:3px solid #0969da}
  & .dh-tbl tr.k-dt td:first-child{border-left:3px solid #8250df}
  & .dh-tbl tr.dh-gr td{padding:8px 12px;font-size:12px;font-weight:600;letter-spacing:.06em;background:var(--bgw)}
  & .dh-gio b{font-size:16px;font-weight:700}
  & .dh-con{font-size:12px;font-weight:500}
  & .dh-con.gap,& .dh-con.tre{font-weight:600}
  & .dh-l1{gap:8px}
  & .dh-l2,& .dh-tbl .sub,& .dh .sub{font-size:12px}
  & .dh-kn{font-size:12px;font-weight:600;padding:0 4px}
  & .dh-ma{font-family:var(--font-body);font-variant-numeric:tabular-nums;font-weight:500;color:var(--t)}
  & .dh-kh,& .dh-tag,& .dh-k{font-size:12px;font-weight:500}
  & .dh-pax{font-size:12px}
  & .dh-bms{font-size:12px;border-style:solid}
  & .dh-dongy{font-size:12px}
  & .dh-ns,& .dh-ns-gy,& .dh-nsx,& .dh-nsq,& .dh-lech,& .dh-hd-chua,& .dh-vuot,& .dh-zok,& .dh-zlech{font-size:12px}
  & .dh-zalo{font-size:12px;border-radius:999px}
  & .dh-grp{border-radius:8px}
  & .dh-tb{font-size:12px}
  & .dh-tile{border-radius:8px}
  /* lọc nhanh: nút có chấm màu phân loại, bấm 1 lần là lọc */
  & .dh-lb{border-radius:8px;padding:12px 16px;gap:8px}
  & .dh-lbx{padding-left:88px;gap:8px}
  & .dh-lbh{gap:8px}
  & .dh-lbt{flex-basis:80px;font-size:12px;font-weight:500}
  & .dh-lc{height:32px;padding:0 12px;font-size:12px}
  & .dh-lc small{font-size:12px}
  & .dh-lsel{height:32px;font-size:12px}
  /* ô Chưa xong + dải Cần lưu ý + hàng chọn kỳ */
  & .dh-qcx2{gap:24px}
  & .dh-luuy{gap:8px}
  & .dh-lu{height:36px;font-size:12px;line-height:34px;border-radius:8px}
  & .dh-lu b{font-size:16px;font-weight:700}
  & .dh-ky2{gap:8px}
  & .dh-ky2 .dh-theo button{padding:0 10px}
  & .dh-xong{border-radius:8px;padding:16px 24px;font-size:12px}
  & .dh-xong-x{font-weight:500}
  & .dh-empty{border-radius:8px}
  & .dh-mask{background:rgba(0,0,0,.32)}
  & .dh-modal{border:1px solid var(--g2);border-radius:8px}
  @media (max-width:720px){
    & .dh-tbl tr{border-radius:8px}
    & .dh-tbl td::before{font-size:12px;text-transform:none}
  }

  /* ── Màn nhỏ ── */
  @media (max-width:900px){
    & .tb{padding:0 8px 0 16px;height:56px}
    & .tbt{font-size:16px;font-weight:700}
    & .con{padding:16px}
    /* hàng nhiều nút (phân trang, thanh công cụ) được xuống dòng — nút giao diện phẳng to hơn bản cũ (rà soát 05/10/2026: /contacts tràn 27px) */
    & .con :is(div,nav,span,p):has(> .btn + .btn, > .pbt + .pbt, > .iconbtn + .iconbtn){flex-wrap:wrap;row-gap:8px}
    /* rà soát cỡ điện thoại 05/10/2026 (10 trang tràn ngang): bảng chưa có khung cuộn thì tự cuộn ngang trong khung,
       mã dài được xuống dòng, thẻ không ép rộng khung, ô số 4 cột của Sổ công nợ NCC còn 2 cột */
    & .con table:not(.tbwrap table):not(.dh-tbl):not(.mud-table-root){display:block;overflow-x:auto;max-width:100%}
    & .con code{overflow-wrap:anywhere}
    & .con .card{min-width:0}
    & .scn-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
    & .con{overflow-wrap:break-word}
    & .con :is([class*="pills"],[class*="chips"]){flex-wrap:wrap}
    & .con [class*="chip"]{white-space:normal;max-width:100%}
    & .card,& .kpi,& .bc-card{padding:16px}
    & .bc-bd-tabs{margin:-16px -16px 16px;padding:8px 12px 0}
    & .kpi-v{font-size:18px;font-weight:700}
    & .dh-qd{padding:10px 12px}
    & .dh-qd .v{font-size:18px;font-weight:700}
  }
}

/* Mã kênh ở nền tối (giao diện phẳng) */
:root:not([data-giao-dien="cu"])[data-theme="dark"]{
  & .bc-k-vexere{background:#16243f;color:#7aa8ff} & .bc-k-trip{background:#3a2115;color:#ffa470}
  & .bc-k-klook{background:#3a1b1b;color:#ff8a8a} & .bc-k-bookaway{background:#241c3d;color:#b69bff}
  & .bc-k-web{background:#14302f;color:#5cc0bd}
}
@media (prefers-color-scheme:dark){
  :root:not([data-giao-dien="cu"]):not([data-theme="light"]){
    & .bc-k-vexere{background:#16243f;color:#7aa8ff} & .bc-k-trip{background:#3a2115;color:#ffa470}
    & .bc-k-klook{background:#3a1b1b;color:#ff8a8a} & .bc-k-bookaway{background:#241c3d;color:#b69bff}
    & .bc-k-web{background:#14302f;color:#5cc0bd}
  }
}