/* =========================================================================
   Thi thử bằng lái xe — hệ thiết kế v2
   Màu lấy theo họ màu biển báo (RAL Traffic): xanh = thao tác, xanh lá = đúng/đạt,
   đỏ = sai/điểm liệt, vàng = đánh dấu/đang làm. Màu không dùng để trang trí.
   Chữ (v4): họ Barlow, lấy cảm hứng từ biển đường cao tốc và biển số xe: Barlow để đọc,
   Barlow Condensed cho tiêu đề, số liệu, mã hạng, đồng hồ.
   ========================================================================= */
:root{
  --bg:#ECEEF0; --surface:#FFFFFF; --surface-2:#F5F6F7; --sunken:#E3E6E9;
  --ink:#16191D; --ink-2:#434B53; --ink-3:#5C646D;
  --line:#D6DBDF; --line-2:#B3BAC1;
  --blue:#0A5A92; --blue-2:#084A78; --on-blue:#FFFFFF; --blue-soft:#E2EDF6;
  --red:#C21A1F; --red-soft:#FBE8E8;
  --yellow:#F2B300; --on-yellow:#2A2000; --yellow-soft:#FFF3CC;
  --green:#2B7A45; --on-green:#FFFFFF; --green-soft:#E3F1E7;
  --asphalt:#20262C; --on-asphalt:#EEF1F3; --asphalt-2:#2E353C;
  --plate:#FFFFFF;
  --font-ui:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-num:"Barlow Condensed","Barlow","Arial Narrow",system-ui,sans-serif;
  --font-display:"Barlow Condensed","Barlow","Arial Narrow",system-ui,sans-serif;
  --r-1:4px; --r-2:8px; --r-3:12px;
  --wrap:1200px;
  --pop:0 10px 30px rgba(16,24,32,.18);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#121518; --surface:#1A1E22; --surface-2:#20252A; --sunken:#0E1113;
    --ink:#E7EAEC; --ink-2:#AAB2BA; --ink-3:#8C959E;
    --line:#2E353C; --line-2:#454D56;
    --blue:#5AA6E8; --blue-2:#7DB9EE; --on-blue:#06192B; --blue-soft:#14273A;
    --red:#F0646B; --red-soft:#361A1C;
    --yellow:#F4C43A; --on-yellow:#221B00; --yellow-soft:#3A3214;
    --green:#55B97B; --on-green:#062012; --green-soft:#173222;
    --asphalt:#0D1013; --on-asphalt:#E7EAEC; --asphalt-2:#1C2126;
    --plate:#F1F3F4;
    --pop:0 10px 30px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121518; --surface:#1A1E22; --surface-2:#20252A; --sunken:#0E1113;
  --ink:#E7EAEC; --ink-2:#AAB2BA; --ink-3:#8C959E;
  --line:#2E353C; --line-2:#454D56;
  --blue:#5AA6E8; --blue-2:#7DB9EE; --on-blue:#06192B; --blue-soft:#14273A;
  --red:#F0646B; --red-soft:#361A1C;
  --yellow:#F4C43A; --on-yellow:#221B00; --yellow-soft:#3A3214;
  --green:#55B97B; --on-green:#062012; --green-soft:#173222;
  --asphalt:#0D1013; --on-asphalt:#E7EAEC; --asphalt-2:#1C2126;
  --plate:#F1F3F4;
  --pop:0 10px 30px rgba(0,0,0,.5);
  color-scheme:dark;
}
/* cỡ chữ người dùng chọn: mọi kích thước chữ dùng rem */
:root[data-fs="l"]{font-size:112.5%}
:root[data-fs="xl"]{font-size:125%}

/* ---------- nền tảng ---------- */
*,*::before,*::after{box-sizing:border-box}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:calc(72px + env(safe-area-inset-top,0px));-webkit-text-size-adjust:100%}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--font-ui);font-size:1rem;line-height:1.6;font-feature-settings:"tnum" 0;-webkit-font-smoothing:antialiased;min-height:100vh}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-underline-offset:2px}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.2;letter-spacing:-.012em}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:8px}
.skip:focus{left:12px;z-index:100;background:var(--surface);padding:8px 12px;border-radius:var(--r-1)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:2px}
.num{font-family:var(--font-num);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.muted{color:var(--ink-2)}
.small{font-size:.875rem}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#main{min-height:60vh;outline:none;padding-bottom:40px}
.loading{padding:80px 24px;text-align:center;color:var(--ink-2)}
.show-s{display:none}

/* ---------- đầu trang ---------- */
.topbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar__in{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex:none}
.brand__mark{width:34px;height:34px;border-radius:7px;background:var(--blue);color:var(--on-blue);display:grid;place-items:center;position:relative;flex:none}
.brand__mark svg{width:20px;height:20px}
.brand__mark::after{content:"";position:absolute;inset:3px;border:1.5px solid rgba(255,255,255,.55);border-radius:5px}
.brand__txt{display:flex;flex-direction:column;line-height:1.1}
.brand__txt b{font-size:1rem;font-weight:700;letter-spacing:-.01em}
.brand__txt small{font-size:.75rem;color:var(--ink-3);font-weight:500}
.nav{display:flex;align-items:stretch;gap:4px;margin-left:8px;overflow-x:auto;scrollbar-width:none;height:100%}
.nav::-webkit-scrollbar{display:none}
.nav__a{display:flex;align-items:center;padding:0 12px;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.9375rem;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px}
.nav__a:hover{color:var(--ink)}
.nav__a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--blue)}
.topbar__tools{margin-left:auto;display:flex;align-items:center;gap:6px}
.iconbtn{width:40px;height:40px;display:inline-grid;place-items:center;border-radius:var(--r-2);border:1px solid transparent;background:none;cursor:pointer;color:var(--ink-2)}
.iconbtn:hover{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
.iconbtn svg{width:20px;height:20px}
.iconbtn[aria-expanded="true"]{background:var(--blue-soft);color:var(--blue)}

/* bảng cài đặt */
.menu{position:absolute;right:24px;top:62px;width:320px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--pop);padding:16px;z-index:40}
.menu[hidden]{display:none}
.menu__g+.menu__g{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.menu__h{font-size:.8125rem;font-weight:600;color:var(--ink-2);margin-bottom:8px}
.menu__links{display:flex;flex-direction:column}
.menu__links a{padding:8px 2px;text-decoration:none;color:var(--ink);font-weight:600}
.menu__note{font-size:.8125rem;color:var(--ink-3);margin-top:6px}

/* bài thi: thanh tối, đồng hồ lớn */
.topbar--exam{background:var(--asphalt);border-bottom-color:var(--asphalt);color:var(--on-asphalt)}
.topbar--exam .iconbtn{color:var(--on-asphalt)}
.topbar--exam .iconbtn:hover{background:var(--asphalt-2);border-color:var(--asphalt-2)}
.examhead{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.examhead strong{font-size:1rem}
.examhead span{font-size:.8125rem;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timer{margin-left:auto;display:flex;align-items:baseline;gap:8px}
.timer__label{font-size:.8125rem;opacity:.75}
.timer__v{font-family:var(--font-num);font-weight:700;font-size:2rem;font-variant-numeric:tabular-nums;letter-spacing:.02em;min-width:4.2ch;text-align:right}
.timer--warn .timer__v{color:var(--yellow)}
.timer--end .timer__v{color:#FF8A8A}

/* ---------- nút, điều khiển ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-2);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font-weight:600;font-size:.9375rem;text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color .12s,border-color .12s}
.btn:hover{border-color:var(--ink-3);background:var(--surface-2)}
.btn--primary{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.btn--primary:hover{background:var(--blue-2);border-color:var(--blue-2)}
.btn--ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn--ghost:hover{background:var(--surface-2);border-color:var(--line)}
.btn--submit{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
.btn--submit:hover{background:#FFC72C;border-color:#FFC72C}
.btn--danger{border-color:var(--red);color:var(--red)}
.btn--sm{min-height:36px;padding:0 12px;font-size:.875rem}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn svg{width:18px;height:18px}
.link{background:none;border:0;padding:0;color:var(--blue);text-decoration:underline;text-underline-offset:2px;cursor:pointer;font:inherit}
.seg{display:inline-flex;padding:3px;border-radius:var(--r-2);background:var(--sunken);gap:3px}
.seg button{border:0;background:transparent;padding:7px 14px;border-radius:6px;font-weight:600;font-size:.875rem;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.input,.select{min-height:46px;border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);color:var(--ink);padding:10px 14px;font:inherit;font-size:1rem;width:100%}
.select{width:auto;max-width:100%;padding-right:32px}
.check{display:inline-flex;align-items:center;gap:8px;font-size:.9375rem;cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--blue)}

/* ---------- thông báo bài dở ---------- */
.notice{background:var(--yellow-soft);border-bottom:1px solid var(--line)}
.notice__in{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding-top:10px;padding-bottom:10px}
.notice__in p{flex:1 1 280px;font-size:.9375rem}
.notice:has(.notice--done){background:var(--blue-soft)}

/* ---------- tiêu đề trang ---------- */
.crumb{margin-top:22px;font-size:.875rem}
.crumb a{color:var(--ink-2);text-decoration:none}
.crumb a:hover{color:var(--blue);text-decoration:underline}
.page-h{font-size:2rem;font-weight:700;margin-top:8px}
.page-h--study{font-size:1.625rem}
.section{margin-top:40px}
.section__h{font-size:1.25rem;font-weight:700;margin-bottom:14px}
.section__sub{color:var(--ink-2);margin:-8px 0 14px}
/* 🔴 Nhãn NHÓM bên trong một mục — khác `.section__sub` (phụ đề nằm ngay dưới tiêu đề,
   có margin-top âm để kéo sát lên). Dùng từ 02/10/2026 khi gộp "Hướng dẫn ôn thi" vào
   trong "Thư viện ôn luyện": nhóm thứ hai cần KHOẢNG CÁCH phía trên, lấy `.section__sub`
   sẽ bị kéo chồng lên lưới ô ngay trên nó. */
.section__grp{font-size:.8125rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.signlib+.section__grp{margin-top:30px}
.lede{font-size:1.125rem;color:var(--ink-2);max-width:62ch;margin-top:12px}

/* ---------- trang chủ: bảng hạng ---------- */
.hero{padding-top:44px}
.h1{font-size:2.75rem;font-weight:700;letter-spacing:-.025em;line-height:1.08;max-width:24ch}
.hero__facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:22px;color:var(--ink-2);font-size:.9375rem}
.hero__facts b{font-family:var(--font-num);font-size:1.5rem;color:var(--ink);margin-right:6px;font-weight:700}
.std{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:26px}
.std__note{font-size:.875rem;color:var(--ink-2)}
.std__note--warn{color:var(--ink)}
.std__note--warn::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--yellow);margin-right:8px;vertical-align:1px}
.chart{margin-top:28px;border-top:2px solid var(--ink)}
.cgroup{display:grid;grid-template-columns:200px 1fr;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}
.cgroup__h{font-size:1.0625rem;font-weight:700}
.cgroup__h small{display:block;font-weight:400;font-size:.8125rem;color:var(--ink-3);margin-top:4px;line-height:1.45}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{position:relative;display:flex;flex-direction:column;padding:14px 14px 16px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface);color:var(--ink);text-decoration:none;overflow:hidden;transition:border-color .12s}
.tile:hover{border-color:var(--blue)}
.tile__code{font-family:var(--font-num);font-weight:700;font-size:2.75rem;line-height:.95;letter-spacing:-.01em}
.tile__desc{font-size:.8125rem;color:var(--ink-2);margin-top:6px;line-height:1.35;min-height:2.2em}
.tile__meta{display:flex;gap:12px;margin-top:10px;font-size:.75rem;color:var(--ink-3)}
.tile__meta span{display:flex;flex-direction:column;line-height:1.1}
.tile__meta b{font-family:var(--font-num);font-size:1.125rem;color:var(--ink);font-weight:600}
.tile__bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--sunken)}
.tile__bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p);background:var(--green)}
.tile--cur{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.continue{margin-top:28px;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:var(--r-2);background:var(--surface)}
.continue__code{font-family:var(--font-num);font-weight:700;font-size:2.25rem;line-height:1}
.continue__t{font-weight:600}
.continue__m{font-size:.875rem;color:var(--ink-2)}
.continue .actions{justify-content:flex-end}
/* thư viện */
.lib{display:grid;grid-template-columns:repeat(5,1fr);border-top:2px solid var(--ink)}
.libcard{display:flex;flex-direction:column;gap:4px;padding:18px 18px 20px 0;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.libcard+.libcard{padding-left:18px;border-left:1px solid var(--line)}
.libcard b{font-family:var(--font-num);font-size:2.5rem;font-weight:700;line-height:1;color:var(--blue)}
.libcard span{font-weight:700}
.libcard small{font-size:.8125rem;color:var(--ink-2);line-height:1.45}
.libcard:hover span{text-decoration:underline;text-underline-offset:3px}
/* lịch sử */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface)}
.hist{width:100%;border-collapse:collapse;font-size:.9375rem}
.hist th,.hist td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
.hist th{font-size:.8125rem;font-weight:600;color:var(--ink-2);background:var(--surface-2)}
.hist tr:last-child td{border-bottom:0}
.hist td.num{font-size:1.125rem;font-weight:600}
.hist a{font-weight:600}
.verdict-chip{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.8125rem;font-weight:700}
.verdict-chip--pass{background:var(--green-soft);color:var(--green)}
.verdict-chip--fail{background:var(--red-soft);color:var(--red)}
.foot{margin-top:56px;padding-top:20px;padding-bottom:28px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--ink-2);display:grid;gap:8px}
.foot p{max-width:90ch}

/* ---------- bảng điều khiển hạng ---------- */
.chead{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;margin-top:14px}
.plate{width:112px;height:112px;border-radius:var(--r-3);background:var(--blue);color:var(--on-blue);display:grid;place-items:center;position:relative}
.plate::after{content:"";position:absolute;inset:6px;border:2px solid rgba(255,255,255,.6);border-radius:8px}
.plate__in{font-family:var(--font-num);font-weight:700;font-size:3.5rem;line-height:1;letter-spacing:-.01em}
.chead__txt h1{font-size:2rem;font-weight:700}
.chead__txt p{color:var(--ink-2);margin-top:6px;max-width:62ch}
.chead__spec{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:10px;font-size:.875rem;color:var(--ink-2)}
.chead__spec b{font-family:var(--font-num);font-size:1.25rem;color:var(--ink);margin-right:4px}
.chead .actions{flex-direction:column;align-items:stretch}
.kpis{display:grid;grid-template-columns:1.25fr 1.25fr 1fr 1fr;margin-top:26px;border:1px solid var(--line);border-radius:var(--r-3);background:var(--surface)}
.kpi{padding:18px 20px;min-width:0}
.kpi+.kpi{border-left:1px solid var(--line)}
.kpi__h{font-size:.8125rem;font-weight:600;color:var(--ink-2)}
.kpi__v{font-family:var(--font-num);font-weight:700;font-size:2.75rem;line-height:1;margin-top:8px}
.kpi__v small{font-size:1.125rem;color:var(--ink-3);font-weight:600;margin-left:2px}
.kpi__s{font-size:.8125rem;color:var(--ink-2);margin-top:8px}
.kpi--ready .kpi__v{color:var(--blue)}
.kpi--ok .kpi__v{color:var(--green)}
.state{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:700;padding:2px 10px;border-radius:999px;margin-top:10px}
.state--ok{background:var(--green-soft);color:var(--green)}
.state--mid{background:var(--yellow-soft);color:var(--on-yellow)}
.state--low{background:var(--sunken);color:var(--ink-2)}
:root[data-theme="dark"] .state--mid{color:var(--yellow)}
.stack{display:flex;height:10px;border-radius:5px;overflow:hidden;background:var(--sunken);margin-top:14px}
.stack i{display:block;height:100%}
.stack .s-ok{background:var(--green)} .stack .s-bad{background:var(--red)}
.stack__lg{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.75rem;color:var(--ink-2);margin-top:8px}
.stack__lg span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;background:var(--sunken)}
.stack__lg .lg-ok::before{background:var(--green)} .stack__lg .lg-bad::before{background:var(--red)}
.bars{display:flex;align-items:flex-end;gap:6px;height:56px;margin-top:10px;position:relative}
.bars i{flex:1;border-radius:3px 3px 0 0;background:var(--line-2);min-height:3px}
.bars i.b-ok{background:var(--green)} .bars i.b-bad{background:var(--red)}
.bars__line{position:absolute;left:0;right:0;border-top:1px dashed var(--ink-3)}
.checklist{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px 20px}
.checklist li{display:flex;gap:8px;font-size:.875rem;color:var(--ink-2);align-items:flex-start}
.checklist li::before{content:"";flex:none;width:16px;height:16px;margin-top:3px;border-radius:50%;border:2px solid var(--line-2)}
.checklist li.done{color:var(--ink)}
.checklist li.done::before{border-color:var(--green);background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.hub{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;margin-top:28px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);padding:22px}
.panel+.panel{margin-top:24px}
.panel__h{font-size:1.125rem;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:10px}
.panel__p{color:var(--ink-2);font-size:.9375rem;margin-bottom:16px}
.actions{display:flex;flex-wrap:wrap;gap:10px}
.sets{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.setbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:52px;border:1px solid var(--line);border-radius:var(--r-1);background:var(--surface);cursor:pointer;padding:4px}
.setbtn:hover{border-color:var(--blue)}
.setbtn__n{font-family:var(--font-num);font-weight:700;font-size:1.25rem;line-height:1}
.setbtn__s{font-family:var(--font-num);font-size:.8125rem;color:var(--ink-3)}
.setbtn--pass{border-color:var(--green);background:var(--green-soft)}
.setbtn--pass .setbtn__s{color:var(--green)}
.setbtn--fail{border-color:var(--red);background:var(--red-soft)}
.setbtn--fail .setbtn__s{color:var(--red)}
.struct{width:100%;border-collapse:collapse;font-size:.9375rem}
.struct td{padding:8px 0;border-bottom:1px solid var(--line)}
.struct td:last-child{text-align:right;font-family:var(--font-num);font-size:1.125rem;font-weight:600}
.struct tr:last-child td{border-bottom:0;font-weight:700}
.badge-prov{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--yellow-soft);color:var(--on-yellow)}
:root[data-theme="dark"] .badge-prov{color:var(--yellow)}
.rows{list-style:none;margin:0;padding:0}
.row{display:grid;grid-template-columns:minmax(0,1fr) 180px auto;gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0}
.row__t{display:flex;gap:10px;align-items:flex-start;min-width:0}
.row__t span{font-weight:600;line-height:1.35}
.row__t small{display:block;font-weight:400;font-size:.8125rem;color:var(--ink-3)}
.meter{height:6px;border-radius:3px;background:var(--sunken);overflow:hidden}
.meter i{display:block;height:100%;background:var(--green);border-radius:3px}
.meter__lbl{font-size:.75rem;color:var(--ink-3);margin-top:4px;font-family:var(--font-num);font-size:.875rem}
.mark-liet,.mark-wrong,.mark-saved,.mark-due{flex:none;width:12px;height:12px;border-radius:3px;margin-top:5px}
.mark-liet{background:var(--red)} .mark-wrong{background:var(--red);border-radius:50%} .mark-saved{background:var(--yellow)} .mark-due{background:var(--blue);border-radius:50%}
.due{display:flex;align-items:baseline;gap:10px}
.due b{font-family:var(--font-num);font-size:3rem;line-height:1;font-weight:700;color:var(--blue)}
.tchips{display:flex;flex-wrap:wrap;gap:8px}
.tchip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px 6px 12px;border:1px solid var(--line);border-radius:var(--r-1);background:var(--surface);color:var(--ink);text-decoration:none;font-size:.875rem;font-weight:500}
.tchip:hover{border-color:var(--blue)}
.tchip span{font-family:var(--font-num);font-weight:700;color:var(--ink-3)}

/* ---------- phục hồi điểm ---------- */
.restore{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:24px;margin-top:22px;align-items:start}
.rtable{width:100%;border-collapse:collapse;font-size:.9375rem}
.rtable th,.rtable td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.rtable th{font-size:.8125rem;color:var(--ink-2);font-weight:600;background:var(--surface-2)}
.rtable td.n{font-family:var(--font-num);font-size:1.125rem;font-weight:600}
.steps{margin:0;padding-left:20px;display:grid;gap:8px;color:var(--ink-2)}
.steps b{color:var(--ink)}

/* ---------- câu hỏi (thi và ôn) ---------- */
.qlayout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;margin-top:24px;align-items:start}
.side{position:sticky;top:84px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);padding:16px;max-height:calc(100vh - 110px);overflow:auto}
.side__h{display:flex;justify-content:space-between;align-items:baseline;font-size:.875rem;color:var(--ink-2);margin-bottom:12px}
.side__h b{font-family:var(--font-num);font-size:1.375rem;color:var(--ink)}
.pal{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.pal button{position:relative;height:38px;border:1px solid var(--line);border-radius:var(--r-1);background:var(--surface);font-family:var(--font-num);font-weight:600;font-size:1rem;cursor:pointer;color:var(--ink)}
.pal button:hover{border-color:var(--blue)}
.pal .is-ans{background:var(--asphalt);border-color:var(--asphalt);color:var(--on-asphalt)}
.pal .is-flag::after{content:"";position:absolute;top:-1px;right:-1px;border-style:solid;border-width:0 11px 11px 0;border-color:transparent var(--yellow) transparent transparent;border-top-right-radius:var(--r-1)}
.pal .is-cur{outline:3px solid var(--blue);outline-offset:1px;z-index:1}
.pal .is-ok{background:var(--green-soft);border-color:var(--green);color:var(--green)}
.pal .is-bad{background:var(--red-soft);border-color:var(--red);color:var(--red)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:14px;font-size:.75rem;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:14px;height:14px;border-radius:3px;border:1px solid var(--line-2);display:inline-block;position:relative;background:var(--surface)}
.legend i.l-ans{background:var(--asphalt);border-color:var(--asphalt)}
.legend i.l-flag::after{content:"";position:absolute;top:-1px;right:-1px;border-style:solid;border-width:0 7px 7px 0;border-color:transparent var(--yellow) transparent transparent}
.legend i.l-ok{background:var(--green-soft);border-color:var(--green)}
.legend i.l-bad{background:var(--red-soft);border-color:var(--red)}
.side__foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:.8125rem;color:var(--ink-3);line-height:1.7}
.side__foot kbd{font-family:var(--font-num);font-size:.8125rem;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:3px;padding:0 5px;background:var(--surface-2);color:var(--ink)}
.qwrap{min-width:0}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);padding:26px 28px;outline:none}
.qhead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:14px}
.qno{font-family:var(--font-num);font-weight:700;font-size:1.625rem;line-height:1}
.qno small{font-size:1rem;color:var(--ink-3);font-weight:600}
.qbank{font-size:.8125rem;color:var(--ink-3)}
.qhead__right{margin-left:auto;display:flex;gap:8px;align-items:center}
.tag-liet{display:inline-flex;align-items:center;gap:6px;font-size:.75rem;font-weight:700;color:var(--red);background:var(--red-soft);padding:3px 9px;border-radius:999px}
.tag-liet::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--red)}
.flagbtn,.speakbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-2);padding:6px 11px;font-size:.8125rem;font-weight:600;cursor:pointer;color:var(--ink-2)}
.flagbtn:hover,.speakbtn:hover{border-color:var(--ink-3);color:var(--ink)}
.flagbtn i{width:10px;height:12px;background:var(--line-2);clip-path:polygon(0 0,100% 0,100% 100%,50% 72%,0 100%)}
.flagbtn[aria-pressed="true"]{border-color:var(--yellow);background:var(--yellow-soft);color:var(--ink)}
.flagbtn[aria-pressed="true"] i{background:var(--yellow)}
.speakbtn svg{width:16px;height:16px}
.speakbtn[aria-pressed="true"]{border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}
.qtext{font-size:1.25rem;font-weight:600;line-height:1.5;max-width:70ch}
.qimg{margin:18px 0 4px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--plate);padding:10px;display:flex;justify-content:center;cursor:zoom-in}
.qimg img{max-height:430px;width:auto;border-radius:4px}
.opts{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.opt{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:14px;align-items:start;text-align:left;padding:13px 16px;border:1px solid var(--line-2);border-radius:var(--r-2);background:var(--surface);cursor:pointer;font-size:1.0625rem;line-height:1.5;color:var(--ink);transition:border-color .12s,background-color .12s}
.opt:hover{border-color:var(--blue)}
.opt__n{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line-2);display:grid;place-items:center;font-family:var(--font-num);font-weight:700;font-size:1.0625rem;margin-top:-3px}
.opt__v{font-size:.75rem;font-weight:700;align-self:center;white-space:nowrap}
.opt[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-soft);box-shadow:inset 0 0 0 1px var(--blue)}
.opt[aria-pressed="true"] .opt__n{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.opt--ok{border-color:var(--green);background:var(--green-soft);box-shadow:inset 0 0 0 1px var(--green)}
.opt--ok .opt__n{background:var(--green);border-color:var(--green);color:var(--on-green)}
.opt--ok .opt__v{color:var(--green)}
.opt--bad{border-color:var(--red);background:var(--red-soft)}
.opt--bad .opt__n{background:var(--red);border-color:var(--red);color:#fff}
.opt--bad .opt__v{color:var(--red)}
.opt[disabled]{cursor:default}
.opt[disabled]:hover{border-color:var(--line-2)}
.opt--ok[disabled]:hover{border-color:var(--green)} .opt--bad[disabled]:hover{border-color:var(--red)}
div.opt{cursor:default}
div.opt:hover{border-color:var(--line-2)}
.qnav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.qnav__mid{font-size:.875rem;color:var(--ink-3);text-align:center}
.feedback{margin-top:14px;padding:12px 16px;border-radius:var(--r-2);font-weight:700}
.feedback--ok{background:var(--green-soft);color:var(--green)}
.feedback--bad{background:var(--red-soft);color:var(--red)}
.explain{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface-2)}
.explain summary{list-style:none;cursor:pointer;padding:12px 16px;font-weight:700;display:flex;align-items:center;gap:10px}
.explain summary::-webkit-details-marker{display:none}
.explain summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(-45deg);transition:transform .15s}
.explain[open] summary::before{transform:rotate(45deg)}
.explain summary em{margin-left:auto;font-style:normal;font-weight:500;font-size:.8125rem;color:var(--ink-3)}
.explain__b{padding:0 16px 14px;line-height:1.65;white-space:pre-line;max-width:75ch}
.qtools{margin-top:12px;font-size:.875rem}
.confuse{margin-top:12px;padding:10px 14px;background:var(--yellow-soft);border-radius:var(--r-1);font-size:.875rem}
.confuse__k{font-weight:700;margin-right:4px}
.endbox{margin-top:18px;padding:16px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface-2)}
.endbox p{margin-bottom:10px}
.endbox .actions{gap:8px}
.mbar{display:none}
.sheet{display:none}

/* ---------- kết quả ---------- */
.res{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;margin-top:18px;padding:26px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3)}
.sign{width:132px}
.sign svg{width:100%;height:auto;display:block}
.res__h{font-size:2rem;font-weight:700}
.res__lines{margin-top:10px;display:grid;gap:4px;color:var(--ink-2)}
.res__lines .bad{color:var(--red);font-weight:600}
.res__lines .good{color:var(--green);font-weight:600}
.res__actions{margin-top:18px}
.bd{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0;border-top:1px solid var(--line)}
.bd__i{display:flex;flex-direction:column;padding:14px 16px 14px 0;border-bottom:1px solid var(--line)}
.bd__i b{font-family:var(--font-num);font-size:1.75rem;line-height:1;color:var(--green)}
.bd__i span{font-size:.875rem;color:var(--ink-2);margin-top:4px}
.bd__i--bad b{color:var(--red)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.chip{border:1px solid var(--line-2);background:var(--surface);border-radius:999px;padding:6px 14px;font-weight:600;font-size:.875rem;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.review{display:grid;gap:16px}
.review .qcard{padding:22px}

/* ---------- tra cứu ---------- */
.searchbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;margin:20px 0 10px}
.filters{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.results{display:grid;gap:10px}
.hit{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:16px 18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2);color:var(--ink);text-decoration:none}
.hit:hover{border-color:var(--blue)}
.hit__no{font-family:var(--font-num);font-weight:700;font-size:1.125rem;margin-right:10px;color:var(--blue)}
.hit__q{font-weight:600;line-height:1.5}
.hit__a{margin-top:6px;color:var(--ink-2);font-size:.9375rem}
.hit__a::before{content:"Đáp án: ";font-weight:700;color:var(--green)}
.hit__meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.pill{font-size:.75rem;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--sunken);color:var(--ink-2)}
.hit__img{width:120px}
.hit__img img{border-radius:4px;border:1px solid var(--line);background:var(--plate)}
mark{background:var(--yellow-soft);color:inherit;box-shadow:0 2px 0 var(--yellow);padding:0 1px}

/* ---------- văn bản dài ---------- */
.prose{max-width:78ch}
.prose h2{font-size:1.375rem;margin:34px 0 10px}
.prose p{margin:10px 0;line-height:1.7}
.prose ul{padding-left:20px;line-height:1.7}
.bigtable{width:100%;border-collapse:collapse;font-size:.9375rem;background:var(--surface)}
.bigtable th,.bigtable td{padding:10px 12px;border:1px solid var(--line);text-align:left}
.bigtable th{background:var(--surface-2);font-size:.8125rem;color:var(--ink-2)}
.bigtable td.n{font-family:var(--font-num);font-size:1.125rem;text-align:right}
.bigtable td.code{font-family:var(--font-num);font-weight:700;font-size:1.25rem}

/* ---------- chuyên đề ---------- */
.pagehead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin:28px 0 8px}
.clspick{display:flex;align-items:center;gap:8px;font-weight:600}
.clspick select{min-width:96px}
.tgroup{margin-top:30px}
.tgroup__h{font-size:1.0625rem;font-weight:700;padding-bottom:10px;margin-bottom:0;border-bottom:2px solid var(--ink)}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.tcard{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:14px 18px 14px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.tcard:hover .tcard__n{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.tcard__n{grid-column:1/-1;font-weight:600;line-height:1.35}
.tcard__c{font-size:.8125rem;color:var(--ink-2)}
.tcard__c b{font-family:var(--font-num);font-size:1.125rem;color:var(--ink)}
.tcard__p{font-size:.75rem;color:var(--ink-3);text-align:right;font-family:var(--font-num);font-size:.875rem}
.tcard .meter{grid-column:1/-1}

/* ---------- video ---------- */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin-top:24px}
.vcard{display:flex;flex-direction:column;color:var(--ink);text-decoration:none}
.vcard__poster{position:relative;aspect-ratio:16/9;background:#DDE3DC;border-radius:var(--r-2);overflow:hidden;border:1px solid var(--line)}
.vcard__poster svg{display:block;width:100%;height:100%}
.vcard__poster::after{content:"";position:absolute;left:14px;bottom:14px;width:44px;height:44px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l9 5-9 5z' fill='%23fff'/%3E%3C/svg%3E") center/24px no-repeat}
.vcard__b{display:flex;flex-direction:column;gap:2px;padding-top:12px}
.vcard__t{font-weight:700;line-height:1.35}
.vcard:hover .vcard__t{color:var(--blue)}
.vcard__m{font-size:.8125rem;color:var(--ink-2)}
.vlayout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;margin-top:18px;align-items:start}
.vside{display:flex;flex-direction:column;gap:18px}
.vside .panel+.panel{margin-top:0}
.vplayer{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);overflow:hidden}
.vplayer__stage{cursor:pointer;background:#DDE3DC;line-height:0}
.vplayer__svg{display:block;width:100%;height:auto}
.vplayer__cap{min-height:3.3em;padding:12px 18px;background:var(--asphalt);color:var(--on-asphalt);font-size:1.0625rem;line-height:1.55}
.vplayer__bar{display:flex;align-items:center;gap:10px;padding:10px 12px;flex-wrap:wrap}
.vplayer__bar input[type=range]{flex:1 1 160px;accent-color:var(--blue)}
.vplayer__time{font-family:var(--font-num);font-size:1.0625rem;color:var(--ink-2);min-width:82px;text-align:right}
.rule{font-size:1rem;line-height:1.6;border-left:3px solid var(--green);padding-left:14px}
.transcript{margin:0;padding:0;list-style:none;display:grid;gap:10px;font-size:.9375rem;line-height:1.5}
.transcript .link{font-family:var(--font-num);font-weight:700;margin-right:6px;text-decoration:none}
.vnav{display:flex;justify-content:space-between;gap:10px}

/* ---------- hộp thoại ---------- */
dialog{border:0;padding:0;background:transparent;color:var(--ink)}
dialog::backdrop{background:rgba(10,16,22,.55)}
.dlg{background:var(--surface);border-radius:var(--r-3);padding:24px;width:min(440px,calc(100vw - 32px));box-shadow:var(--pop)}
.dlg h2{font-size:1.25rem;margin-bottom:8px}
.dlg p{color:var(--ink-2)}
.dlg__a{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.lightbox{background:var(--surface);border-radius:var(--r-3);padding:16px;max-width:min(1200px,96vw);box-shadow:var(--pop)}
.lightbox img{max-height:82vh;width:auto;margin:0 auto}
.lightbox .btn{margin-top:12px}
.empty{padding:40px;text-align:center;border:1px dashed var(--line-2);border-radius:var(--r-3);color:var(--ink-2);background:var(--surface)}
.empty .btn{margin-top:14px}

/* ---------- màn hình vừa ---------- */
@media (max-width:1100px){
  .kpis{grid-template-columns:1fr 1fr}
  .kpi:nth-child(3){border-left:0}
  .kpi:nth-child(n+3){border-top:1px solid var(--line)}
  .lib{grid-template-columns:repeat(3,1fr)}
  .libcard:nth-child(4){padding-left:0;border-left:0}
  .sets{grid-template-columns:repeat(5,minmax(0,1fr))}
  .hide-m{display:none}
}
@media (max-width:980px){
  .hub,.restore,.vlayout{grid-template-columns:minmax(0,1fr)}
  .qlayout{grid-template-columns:1fr;margin-top:12px}
  .side{display:none}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--surface);border-top:1px solid var(--line);padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));gap:8px;align-items:center}
  .mbar .btn{flex:1;padding:0 10px}
  .mbar .palbtn{flex:0 0 auto;min-width:92px;font-family:var(--font-num);font-size:1.125rem}
  #main.has-mbar{padding-bottom:110px}
  .qnav{display:none}
  .sheet{display:block;position:fixed;inset:0;z-index:45;background:rgba(10,16,22,.5);opacity:0;pointer-events:none;transition:opacity .15s}
  .sheet.open{opacity:1;pointer-events:auto}
  .sheet__in{position:absolute;left:0;right:0;bottom:0;max-height:78vh;overflow:auto;background:var(--surface);border-radius:16px 16px 0 0;padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px))}
  .sheet__in .pal{grid-template-columns:repeat(6,1fr)}
  .sheet__in .pal button{height:44px}
  .sheet__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
  .chead{grid-template-columns:auto 1fr}
  .chead .actions{grid-column:1/-1;flex-direction:row}
  .cgroup{grid-template-columns:1fr;gap:12px}
}
/* ---------- điện thoại ---------- */
@media (max-width:760px){
  .wrap{padding:0 16px}
  .topbar__in{padding:0 12px;gap:10px;height:56px}
  .brand__txt small{display:none}
  .brand__txt b{font-size:.9375rem}
  .hide-s{display:none!important}
  .show-s{display:inline}
  .nav{gap:0;margin-left:0}
  .nav__a{padding:0 8px;font-size:.875rem}
  .menu{right:8px;top:58px}
  .hero{padding-top:26px}
  .h1{font-size:2rem}
  .lede{font-size:1rem}
  .tiles{grid-template-columns:repeat(3,1fr);gap:8px}
  .tile{padding:10px 10px 12px}
  .tile__code{font-size:2.125rem}
  .tile__desc{display:none}
  .tile__meta{gap:8px}
  .tile__meta b{font-size:1rem}
  .continue{grid-template-columns:auto 1fr}
  .continue .actions{grid-column:1/-1;justify-content:flex-start}
  .lib{grid-template-columns:1fr 1fr}
  .libcard,.libcard+.libcard{padding:14px 12px 16px 0;border-left:0}
  .libcard:nth-child(even){padding-left:12px;border-left:1px solid var(--line)}
  .libcard b{font-size:2rem}
  .plate{width:76px;height:76px}
  .plate__in{font-size:2.375rem}
  .chead{gap:14px}
  .chead__txt h1{font-size:1.5rem}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi{padding:14px}
  .kpi__v{font-size:2.25rem}
  .checklist{grid-template-columns:1fr}
  .panel{padding:16px}
  .sets{grid-template-columns:repeat(5,minmax(0,1fr))}
  .row{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .row .meterwrap{grid-column:1/-1;grid-row:2}
  .qcard{padding:18px 16px;border-radius:0;border-left:0;border-right:0}
  .qwrap{margin:0 -16px}
  .qtext{font-size:1.125rem}
  .opt{font-size:1rem;padding:12px;gap:10px;grid-template-columns:32px minmax(0,1fr)}
  .opt__v{grid-column:2}
  .res{grid-template-columns:1fr;padding:18px}
  .sign{width:96px}
  .page-h{font-size:1.625rem}
  .res__h{font-size:1.5rem}
  .searchbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .searchbar .input{grid-column:1/-1}
  .searchbar .select{width:100%;min-width:0}
  .hit{grid-template-columns:1fr}
  .hit__img{width:100%;max-width:220px}
  .timer__label,.examhead span{display:none}
  .timer__v{font-size:1.75rem}
  .btn--submit{padding:0 14px}
  .vplayer__cap{font-size:1rem}
  .pagehead{margin-top:20px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{.topbar,.mbar,.side,.qnav,.res__actions,.chips,.notice,.menu{display:none!important}body{background:#fff}.qcard,.panel{border-color:#999}}
.only-s{display:none}
.foot__links{display:flex;flex-wrap:wrap;gap:6px 18px}
.rtable td.code{font-family:var(--font-num);font-weight:700;font-size:1.25rem}
.rtable tr.cur td{background:var(--blue-soft)}
.rtable tr:last-child td{border-bottom:0}
@media (max-width:760px){.only-s{display:flex}.hero__facts{gap:6px 18px}.hero__facts b{font-size:1.25rem}}

/* thanh điều hướng dưới trên điện thoại */
.tabbar{display:none}
@media (max-width:760px){
  .topbar .nav{display:none}
  .topbar__tools{margin-left:auto}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:28;background:var(--surface);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px))}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0 4px;background:none;border:0;color:var(--ink-3);text-decoration:none;font:inherit;font-size:.6875rem;font-weight:600;cursor:pointer;min-width:0}
  .tab svg{width:22px;height:22px}
  .tab[aria-current="page"],.tab[aria-expanded="true"]{color:var(--blue)}
  #main{padding-bottom:92px}
  body.has-mbar .tabbar,body:has(#main.has-mbar) .tabbar{display:none}
  .menu{position:fixed;top:auto;bottom:calc(72px + env(safe-area-inset-bottom,0px));left:8px;right:8px;width:auto}
  .chead{align-items:start}
  .plate{width:64px;height:64px}
  .plate::after{inset:4px;border-width:1.5px}
  .plate__in{font-size:2rem}
}
@media (max-width:420px){.seg{display:flex;flex-wrap:wrap;max-width:100%}.seg button{flex:1 1 auto;white-space:normal}}

@media (max-width:360px){.setbtn__s{font-size:.6875rem}.kpi{padding:12px}.kpi__v{font-size:2rem}}
@media (max-width:360px){.wrap{padding:0 12px}.qwrap{margin:0 -12px}}

/* =========================================================================
   v3: kiểu giao thông cho trang chủ, thanh Chợ Giá, chân trang, quảng cáo,
   trang câu hỏi dựng sẵn (SEO) và trang quản trị
   ========================================================================= */
.netbar{background:#14181C;color:#AEB7BF;font-size:.8125rem}
.netbar__in{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:34px;display:flex;align-items:center;gap:18px}
.netbar__brand{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:700;text-decoration:none;flex:none}
.netbar__nav{display:flex;align-items:center;gap:16px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.netbar__nav::-webkit-scrollbar{display:none}
.netbar__nav a{color:#C4CCD3;text-decoration:none}
.netbar__nav a:hover{color:#fff}
.netbar__cur{color:#fff;font-weight:600;box-shadow:inset 0 -2px 0 #F2B300;padding:7px 0}
.netbar__tag{margin-left:auto;color:#8E98A2;white-space:nowrap}
.cg-dot{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:#F2B300;box-shadow:0 0 0 3px rgba(242,179,0,.22)}
.themebtn .i-sun{display:none}
:root[data-theme-eff="dark"] .themebtn .i-sun{display:block}
:root[data-theme-eff="dark"] .themebtn .i-moon{display:none}
.announce{background:var(--yellow);color:var(--on-yellow);font-weight:600;font-size:.9375rem}
.announce__in{padding-top:8px;padding-bottom:8px}
.announce a{color:inherit}

/* ---- trang chủ: mặt đường và biển chỉ dẫn ---- */
.road.hero{position:relative;background:#2A3036 linear-gradient(180deg,#242A30 0%,#30373E 100%);color:#fff;padding:40px 0 70px;overflow:hidden}
.road::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1.5px);background-size:7px 7px;pointer-events:none}
.road::after{content:"";position:absolute;left:0;right:0;bottom:24px;height:6px;background:repeating-linear-gradient(90deg,#E9ECEF 0 64px,transparent 64px 112px);opacity:.85}
.road__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end}
.gsign{position:relative;background:#0B5B94;border-radius:18px;padding:32px 36px 26px;box-shadow:0 24px 50px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08)}
.gsign::before{content:"";position:absolute;inset:9px;border:3px solid #fff;border-radius:11px;pointer-events:none}
.rv{position:absolute;z-index:1;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#9AA7B3 60%,#5F6B76)}
.rv--tl{top:17px;left:17px}.rv--tr{top:17px;right:17px}.rv--bl{bottom:17px;left:17px}.rv--br{bottom:17px;right:17px}
.gsign__kicker{font-size:.875rem;color:#CFE1F1;font-weight:600}
.gsign__h{font-family:var(--font-num);font-weight:700;font-size:3.25rem;line-height:1;text-wrap:balance;letter-spacing:.004em;margin-top:6px;color:#fff}
.gsign__sub{color:#DCE8F3;max-width:62ch;margin-top:10px}
.gsign__rows{margin-top:22px;border-top:2px solid rgba(255,255,255,.9)}
.gsign__row{display:grid;grid-template-columns:44px 200px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.3)}
.gsign__row:last-child{border-bottom:0}
.gsign__arr{display:grid;place-items:center}
.gsign__arr svg{width:40px;height:40px;color:#fff}
.gsign__dest{font-family:var(--font-num);font-weight:700;font-size:1.625rem;line-height:1.05;white-space:nowrap}
.gsign__dest small{display:block;font-family:var(--font-ui);font-weight:500;font-size:.8125rem;color:#CFE1F1;margin-top:3px}
.gsign__shields{display:flex;flex-wrap:wrap;gap:8px}
.shield{position:relative;min-width:56px;height:46px;padding:0 10px;display:inline-grid;place-items:center;background:#fff;color:#0B5B94;border-radius:7px;text-decoration:none;font-family:var(--font-num);font-weight:700;font-size:1.625rem;line-height:1;box-shadow:inset 0 0 0 2px #0B5B94;transition:background-color .12s,color .12s}
.shield:hover{background:#F2B300;color:#1B1F23}
.shield:focus-visible{outline:3px solid #F2B300;outline-offset:3px}
.shield--cur{background:#F2B300;color:#1B1F23}
.shield__p{position:absolute;left:7px;right:7px;bottom:5px;height:3px;border-radius:2px;background:rgba(11,91,148,.18)}
.shield__p::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--p);background:#2B7A45;border-radius:2px}
.gsign__dist{text-align:right;font-size:.8125rem;color:#DCE8F3;white-space:nowrap;line-height:1.2}
.gsign__dist b{font-size:1.875rem;color:#fff;margin-right:4px}
.gsign__dist small{display:block;font-size:.8125rem;margin-top:2px}
.gsign__foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:18px}
.gsign__foot .seg{background:rgba(255,255,255,.14)}
.gsign__foot .seg button{color:#E6EFF7}
.gsign__foot .seg button[aria-pressed="true"]{background:#fff;color:#0B5B94}
.gsign__note{font-size:.8125rem;color:#CFE1F1}
.kms{display:grid;grid-template-columns:repeat(2,86px);gap:14px 12px;padding-bottom:36px}
.kmpost{width:86px;height:108px;background:#fff;color:#1B1F23;border-radius:43px 43px 6px 6px;display:flex;flex-direction:column;align-items:center;overflow:hidden;box-shadow:0 8px 16px rgba(0,0,0,.4)}
.kmpost__cap{width:100%;height:44px;background:#C21A1F;color:#fff;font-size:.6875rem;font-weight:700;display:grid;place-items:end center;text-align:center;line-height:1.1;padding:0 6px 7px}
.kmpost b{font-size:2rem;line-height:1;margin-top:14px;font-weight:700}
.continue{margin-top:24px}
/* lộ trình */
.route{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.route::before{content:"";position:absolute;left:0;right:0;top:15px;height:16px;border-radius:8px;background:#3A4047}
.route::after{content:"";position:absolute;left:10px;right:10px;top:22px;height:2px;background:repeating-linear-gradient(90deg,#F4F5F6 0 16px,transparent 16px 30px)}
.route__s{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px;padding-right:22px}
.route__n{width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:1.5rem;font-weight:700;border:4px solid var(--bg);margin-left:8px}
.route__s b{margin-top:10px;font-size:1.0625rem}
.route__s span:last-child{color:var(--ink-2);font-size:.9375rem;line-height:1.5}
/* thư viện biểu tượng biển báo */
.signlib{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.signlib__i{display:flex;flex-direction:column;gap:8px;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);color:var(--ink);text-decoration:none}
.signlib__i:hover{border-color:var(--blue)}
.signlib__i:hover .signlib__t{color:var(--blue)}
.sgn{width:52px;height:52px;flex:none}
.signlib__t{font-weight:700;line-height:1.3}
.signlib__t b{font-size:1.5rem;color:var(--blue)}
.signlib__i small{color:var(--ink-2);font-size:.8125rem;line-height:1.45}
/* quy định mới + thẻ Chợ Giá */
.twocol{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:start}
.rules{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rules__i{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);align-items:start}
.plate-date{display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 10px;background:var(--yellow);color:#1B1F23;border:2px solid #1B1F23;border-radius:6px;font-weight:700;font-size:1.0625rem;white-space:nowrap}
.rules__i b{display:block;font-size:1.0625rem}
.rules__i p{color:var(--ink-2);font-size:.9375rem;margin-top:2px}
.rules__more{margin-top:14px;font-weight:600}
.cgcard{display:flex;flex-direction:column;gap:12px;padding:20px;border-radius:var(--r-3);background:#15191D;color:#E8EDF1;text-decoration:none;border:1px solid #2A3138}
.cgcard:hover .cgcard__cta{text-decoration:underline}
.cgcard__top{display:flex;align-items:center;gap:8px;font-weight:700;color:#fff}
.cgcard__top em{margin-left:auto;font-style:normal;font-size:.75rem;color:#F2B300;border:1px solid rgba(242,179,0,.5);border-radius:999px;padding:1px 8px}
.cgcard__h{font-size:1.125rem;line-height:1.35;color:#fff}
.cgcard__rows{display:grid;gap:6px}
.cgcard__rows span{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:#0C0F12;border-radius:6px;font-family:var(--font-num);font-size:1.125rem;letter-spacing:.02em;color:#FFC94A}
.cgcard__rows span::after{content:"›";font-size:1.375rem;line-height:1;color:#8A96A1}
.cgcard__cta{display:inline-flex;align-items:center;gap:6px;color:#F2B300;font-weight:700}
.cgcard__cta svg{width:16px;height:16px}
.cgcard--widget{display:block}
.cgtip{margin:16px 0 0;padding:12px 16px;background:var(--yellow-soft);border-radius:var(--r-1)}
/* hỏi đáp */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.faq__i{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2)}
.faq__i summary{cursor:pointer;list-style:none;padding:16px 18px;font-weight:700;display:flex;gap:12px;align-items:flex-start;line-height:1.4}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2v8M2 6h8' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/11px no-repeat}
.faq__i[open] summary::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6h8' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.faq__i p{padding:0 18px 16px 52px;color:var(--ink-2);line-height:1.65}
/* ô quảng cáo */
.adslot{position:relative;height:1px;overflow:hidden;margin:0}
.adslot.is-on{height:auto;overflow:visible;margin:32px 0;padding:22px 0 10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.adslot__lbl{position:absolute;top:4px;left:0;font-size:.6875rem;color:var(--ink-3)}
.adslot__in{display:flex;justify-content:center;align-items:center;min-height:90px}
.adslot__demo{width:100%;max-width:728px;height:90px;border:1px dashed var(--line-2);border-radius:var(--r-2);display:grid;place-content:center;text-align:center;color:var(--ink-3);font-size:.875rem;background:repeating-linear-gradient(135deg,transparent 0 10px,var(--surface-2) 10px 20px)}
.adslot__demo small{display:block;font-size:.75rem}
.adslot--home_side.is-on,.adslot--page_side.is-on{margin:18px 0 0;padding:22px 12px 12px;border:1px solid var(--line);border-radius:var(--r-2);background:var(--surface)}
.adslot--home_side .adslot__lbl,.adslot--page_side .adslot__lbl{left:12px}
.adslot--home_side .adslot__in,.adslot--page_side .adslot__in{min-height:250px}
.adslot--home_side .adslot__demo,.adslot--page_side .adslot__demo{height:250px;max-width:300px}
.adslot--study.is-on,.adslot--video.is-on,.adslot--result.is-on{margin:20px 0 0}
/* chân trang */
.sfoot{background:#1B2026;color:#C7CED5;margin-top:72px}
.sfoot::before{content:"";display:block;height:8px;background:repeating-linear-gradient(90deg,#E4E8EB 0 38px,#1B2026 38px 76px)}
.sfoot__road{height:18px;background:#2B3137;position:relative}
.sfoot__road::after{content:"";position:absolute;left:0;right:0;top:8px;height:3px;background:repeating-linear-gradient(90deg,#F2B300 0 42px,transparent 42px 74px)}
.sfoot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding-top:40px;padding-bottom:28px}
.sfoot a{color:#E6EBEF;text-decoration:none}
.sfoot a:hover{color:#fff;text-decoration:underline}
.sfoot__h{font-size:.9375rem;color:#fff;margin-bottom:12px}
.sfoot__list{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:.9375rem}
.sfoot__list--cols{grid-template-columns:1fr 1fr;column-gap:14px}
.sfoot__brand p{font-size:.875rem;line-height:1.6;margin-top:14px;color:#AEB7BF;max-width:44ch}
.sfoot__cg a{color:#F2B300;font-weight:700}
.brand--foot .brand__txt b{color:#fff}
.brand--foot .brand__txt small{color:#9AA4AD}
.sfoot__bottom{border-top:1px solid #2E353C;padding-top:16px;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));display:grid;gap:4px;font-size:.8125rem;color:#8E98A2}
.sfoot .link{color:#F2B300}
/* lên đầu trang: biển "đi thẳng" */
.totop{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:27;width:52px;height:52px;border:0;padding:0;background:none;color:var(--blue);cursor:pointer;opacity:0;transform:translateY(12px) scale(.92);pointer-events:none;transition:opacity .2s,transform .2s;filter:drop-shadow(0 6px 12px rgba(0,0,0,.28))}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop svg{width:100%;height:100%;display:block}
/* trang dựng sẵn cho SEO */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:22px;font-size:.875rem;color:var(--ink-2)}
.crumbs a{color:var(--ink-2)}
.crumbs__sep{color:var(--line-2)}
.doc__grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;margin-top:16px;align-items:start}
.doc__side{position:sticky;top:84px;display:grid;gap:18px}
.doc__links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.qpage{padding:28px}
.qpage .qtext{font-size:1.5rem;font-weight:700;line-height:1.4;margin:0}
.qanswer{margin-top:16px;padding:12px 16px;background:var(--green-soft);border-radius:var(--r-2);color:var(--green)}
.explain-static{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.explain-static h2{font-size:1.125rem;margin-bottom:8px}
.explain-static p{line-height:1.7;max-width:75ch;white-space:pre-line}
.qmeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:18px 0 0;padding:14px 16px;background:var(--surface-2);border-radius:var(--r-2)}
.qmeta dt{font-size:.75rem;color:var(--ink-3)}
.qmeta dd{margin:2px 0 0;font-weight:600}
.qpager{display:flex;justify-content:space-between;margin-top:24px;padding-top:16px;border-top:1px solid var(--line);font-weight:600}
.qlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.qlist li{padding:14px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2)}
.qlist a{color:var(--ink);text-decoration:none;font-weight:600}
.qlist a:hover{color:var(--blue)}
.qlist .num{color:var(--blue);margin-right:6px}
.qlist__a{margin-top:6px;color:var(--green);font-size:.9375rem}
.qidx__ch{margin-top:30px}
.qidx__ch h2{font-size:1.25rem;margin-bottom:10px}
.qidx{list-style:none;margin:0;padding:0;columns:2;column-gap:32px}
.qidx li{break-inside:avoid;padding:7px 0;border-bottom:1px solid var(--line)}
.qidx a{color:var(--ink);text-decoration:none;font-size:.9375rem;line-height:1.45}
.qidx a:hover{color:var(--blue)}
.qidx b{color:var(--blue);margin-right:6px;font-size:1.0625rem}
.prerender{padding-top:6px}
.prerender h2{margin-top:26px;font-size:1.25rem}
.prerender ul{line-height:1.8}
/* quản trị */
.adm{background:var(--bg);min-height:100vh}
.adm__top{display:flex;align-items:center;gap:12px;padding:12px 24px;background:var(--surface);border-bottom:1px solid var(--line)}
.adm__top .brand{margin-right:auto}
.adm__top form{margin:0}
.adm__wrap{display:grid;grid-template-columns:210px minmax(0,1fr);gap:28px;max-width:1200px;margin:0 auto;padding:24px}
.adm__nav{display:flex;flex-direction:column;gap:2px;position:sticky;top:16px;align-self:start}
.adm__nav a{padding:10px 12px;border-radius:var(--r-2);color:var(--ink-2);text-decoration:none;font-weight:600}
.adm__nav a:hover{background:var(--surface)}
.adm__nav a[aria-current]{background:var(--blue-soft);color:var(--blue)}
.adm__main .page-h{margin:0 0 16px}
.adm__form{display:grid;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);padding:22px}
.adm__f{display:grid;gap:6px}
.adm__f>span{font-weight:600;font-size:.9375rem}
.adm__f textarea{width:100%;border:1px solid var(--line-2);border-radius:var(--r-2);padding:10px 12px;font:inherit;background:var(--surface);color:var(--ink);resize:vertical}
.adm__f textarea.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.8125rem;line-height:1.5}
.adm__check{display:flex;gap:10px;align-items:center;font-weight:600}
.adm__check input[type=checkbox]{width:18px;height:18px;accent-color:var(--blue)}
.adm__bar{display:flex;gap:10px;flex-wrap:wrap;padding-top:6px}
.adm__ok{padding:10px 14px;background:var(--green-soft);color:var(--green);border-radius:var(--r-2);font-weight:600;margin-bottom:14px}
.adm__err{padding:10px 14px;background:var(--red-soft);color:var(--red);border-radius:var(--r-2);font-weight:600}
.adm__warn{padding:10px 14px;background:var(--yellow-soft);border-radius:var(--r-2);margin-bottom:14px}
.adm__p{color:var(--ink-2);margin-bottom:14px;max-width:80ch}
.adm__search{display:flex;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.adm__search .input{flex:1 1 260px;width:auto}
.adm__login{display:grid;place-items:center;min-height:80vh;padding:24px}
.adm__loginbox{width:min(400px,100%);display:grid;gap:14px}
.adm__img{max-height:260px;width:auto;margin:12px 0;border:1px solid var(--line);border-radius:var(--r-2)}
.adm__kpis{margin:0 0 18px}
.adm__narrow{max-width:520px}
@media (max-width:980px){
  .road__in{grid-template-columns:1fr}
  .kms{grid-template-columns:repeat(4,86px);padding-bottom:40px}
  .signlib{grid-template-columns:repeat(3,1fr)}
  .twocol,.doc__grid{grid-template-columns:1fr}
  .doc__side{position:static}
  .sfoot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){.adm__wrap{grid-template-columns:1fr;padding:16px}.adm__nav{flex-direction:row;overflow-x:auto;position:static}}
@media (max-width:760px){
  .netbar__in{padding:0 12px;gap:12px}
  .netbar__tag{display:none}
  .road.hero{padding:20px 0 58px}
  .gsign{padding:24px 18px 18px;border-radius:14px}
  .gsign::before{inset:6px;border-width:2px;border-radius:10px}
  .rv{display:none}
  .gsign__h{font-size:2.375rem}
  .gsign__sub{font-size:.9375rem}
  .gsign__row{grid-template-columns:32px minmax(0,1fr) auto;gap:6px 10px}
  .gsign__arr svg{width:28px;height:28px}
  .gsign__arr,.gsign__dest,.gsign__dist{grid-row:1}
  .gsign__dist{grid-column:3}
  .gsign__dest{white-space:normal}
  .gsign__shields{grid-column:1/-1;grid-row:2}
  .gsign__dest{font-size:1.5rem}
  .gsign__dist b{font-size:1.5rem}
  .shield{min-width:52px;height:46px;font-size:1.5rem}
  .kms{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .kmpost{width:auto;height:96px}
  .kmpost b{font-size:1.625rem}
  .route{grid-template-columns:1fr;gap:18px}
  .route::before{left:15px;right:auto;top:0;bottom:0;width:16px;height:auto}
  .route::after{left:22px;right:auto;top:6px;bottom:6px;width:2px;height:auto;background:repeating-linear-gradient(180deg,#F4F5F6 0 14px,transparent 14px 26px)}
  .route__s{display:grid;grid-template-columns:46px 1fr;column-gap:14px;padding-right:0}
  .route__n{margin-left:0;grid-row:1 / span 2}
  .route__s b{margin-top:2px}
  .signlib{grid-template-columns:1fr 1fr}
  .signlib__i{padding:14px}
  .faq{grid-template-columns:1fr}
  .rules__i{grid-template-columns:1fr;gap:8px}
  .sfoot__grid{grid-template-columns:1fr;gap:26px}
  .sfoot{padding-bottom:64px}
  .qidx{columns:1}
  .qpage{padding:18px 16px}
  .qpage .qtext{font-size:1.25rem}
  .totop{bottom:calc(78px + env(safe-area-inset-bottom,0px));right:12px;width:46px;height:46px}
}

/* =========================================================================
   v4: hệ biển chỉ dẫn. Tiêu đề, số, mã hạng dùng Barlow Condensed như chữ trên biển;
   nội dung dùng Barlow. Bề mặt phẳng, không viền thừa; màu chỉ mang nghĩa.
   ========================================================================= */
body{font-size:1.0625rem;line-height:1.55}
h1,h2,h3,.page-h,.section__h,.panel__h,.res__h,.chead__txt h1,.dlg h2,.sfoot__h{font-family:var(--font-display);letter-spacing:.003em}
.page-h{font-size:2.75rem;line-height:1.02;margin-top:10px}
.section__h{font-size:1.875rem;line-height:1.05;margin-bottom:18px}
.lede{font-size:1.125rem;line-height:1.55;color:var(--ink-2);max-width:66ch}
.topbar__in{height:64px}
.brand__txt b{font-family:var(--font-display);font-size:1.5rem;font-weight:700;line-height:1}
.brand__txt small{font-size:.8125rem;margin-top:3px}
.nav__a{font-size:1rem}
.btn{min-height:46px;padding:0 20px;border:2px solid var(--ink);font-size:1rem}
.btn:hover{background:var(--surface-2)}
.btn--primary{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.btn--primary:hover{background:var(--blue-2);border-color:var(--blue-2)}
.btn--ghost{background:transparent;border-color:transparent}
.btn--ghost:hover{background:var(--sunken)}
.btn--danger{border-color:var(--red)}
.btn--submit{border-color:#16191D}
.btn--sm{min-height:38px;padding:0 14px;font-size:.9375rem}
.seg{background:var(--surface);border:2px solid var(--ink);padding:2px;gap:2px}
.seg button{font-size:.9375rem;border-radius:5px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--surface);box-shadow:none}
/* trang chủ: tấm biển chỉ dẫn hai cột */
.road.hero{padding:48px 0 78px}
.road__in{display:block}
.gsign{display:grid;grid-template-columns:minmax(0,370px) minmax(0,1fr);column-gap:52px;align-items:center;padding:44px 48px 32px}
.gsign__h{grid-column:1;grid-row:1;align-self:end;font-size:3.625rem;line-height:.96;margin:0}
.gsign__sub{grid-column:1;grid-row:2;align-self:start;margin-top:16px;font-size:1.0625rem;line-height:1.5}
.gsign__rows{grid-column:2;grid-row:1 / span 2;margin:0;border-top:0}
.gsign__row{grid-template-columns:40px 150px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:0}
.gsign__row+.gsign__row{border-top:1px solid rgba(255,255,255,.32)}
.gsign__dest{font-size:1.75rem}
.gsign__dest small{font-size:.9375rem;margin-top:4px}
.gsign__foot{grid-column:1 / -1;margin-top:26px;padding-top:18px;border-top:2px solid rgba(255,255,255,.9)}
.gsign__foot:empty{display:none}
.gsign__foot .seg{border-color:rgba(255,255,255,.5);background:transparent}
.route__s b{font-family:var(--font-display);font-size:1.375rem;line-height:1.1}
.signlib{gap:0;border-top:2px solid var(--ink)}
.signlib__i{background:none;border:0;border-radius:0;padding:22px 22px 6px 0;gap:10px}
.signlib__i+.signlib__i{border-left:1px solid var(--line);padding-left:22px}
.signlib__i:hover{border-color:var(--line)}
.signlib__t{font-family:var(--font-display);font-size:1.375rem;line-height:1.1}
.signlib__t b{font-size:1.375rem}
.sgn{width:44px;height:44px}
.rules{border-top:2px solid var(--ink)}
.rules__i b{font-family:var(--font-display);font-size:1.3125rem;line-height:1.15}
/* 🔴 Đo thật 02/10/2026 ở khổ 1366px: khối Hỏi đáp chỉ rộng 880px trong khung 1258px,
   bỏ trống 378px bên phải — đúng chỗ trông "thừa" nhất ở cuối trang chủ. Luật cũ ở
   dòng 697 vốn là lưới 2 cột, bản thiết kế sau đè thành 1 cột 880px. Giữ kiểu biên tập
   (gạch trên đậm, không khung thẻ) nhưng cho về 2 cột khi màn đủ rộng; `align-items:start`
   để mở một mục không đẩy mục bên cạnh. Dưới 1100px vẫn một cột cho dễ đọc. */
.faq{grid-template-columns:1fr;max-width:880px;row-gap:0;border-top:2px solid var(--ink)}
@media (min-width:1100px){
  .faq{grid-template-columns:1fr 1fr;max-width:none;column-gap:40px;align-items:start}
  .faq__i{border-bottom:1px solid var(--line)}
}
.adslot__demo{background:var(--surface-2);border:1px dashed var(--line-2);font-weight:600}
.adslot__demo small{font-weight:400;margin-top:2px}
@media (hover:hover){.opt:not([disabled]):not([aria-pressed="true"]):hover{border-color:var(--ink)}.setbtn:not(.setbtn--pass):not(.setbtn--fail):hover{border-color:var(--ink)}}
.faq__i{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0}
.faq__i summary{padding:16px 0;font-size:1.0625rem}
.faq__i p{padding:0 0 18px 34px}
.continue{border-width:0 0 0 4px}
/* trang hạng */
.chead__txt h1{font-size:3rem;line-height:1}
.kpis{border:0;border-top:2px solid var(--ink);border-radius:0;background:none;margin-top:30px}
.kpi{padding:18px 24px 4px 0}
.kpi+.kpi{padding-left:24px}
.kpi__h{font-size:.9375rem}
.kpi__v{font-family:var(--font-display);font-size:3.25rem}
.panel{border-color:transparent;padding:26px}
.panel__h{font-size:1.625rem;line-height:1.1}
.setbtn{min-height:54px;border:2px solid var(--line-2);border-radius:var(--r-2)}
.setbtn__n{font-family:var(--font-display);font-size:1.5rem}
.setbtn--pass{border-color:var(--green)}
.setbtn--fail{border-color:var(--red)}
.tgroup__h{font-family:var(--font-display);font-size:1.5rem}
.tcard__n{font-family:var(--font-display);font-size:1.25rem;line-height:1.15}
.vcard__t{font-family:var(--font-display);font-size:1.375rem;line-height:1.15}
.hit{border-color:transparent}
/* câu hỏi */
.qcard{border-color:transparent;padding:32px 36px}
.qno{font-size:2.125rem}
.qtext{font-size:1.375rem;line-height:1.45}
.opt{border:2px solid var(--line);padding:14px 18px;font-size:1.125rem}
.opt__n{border-radius:7px;border:2px solid var(--ink);width:34px;height:34px;font-size:1.25rem}
.opt[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-soft)}
.opt[aria-pressed="true"] .opt__n{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.opt--ok{border-color:var(--green);background:var(--green-soft)}
.opt--ok .opt__n{background:var(--green);border-color:var(--green);color:var(--on-green)}
.opt--bad{border-color:var(--red);background:var(--red-soft)}
.opt--bad .opt__n{background:var(--red);border-color:var(--red);color:#fff}
.pal button{height:40px;border-width:2px;border-radius:6px;font-size:1.0625rem}
.res{border-color:transparent;padding:32px}
.res__h{font-size:2.75rem;line-height:1.02}
@media (max-width:1100px){.kpi:nth-child(3){padding-left:0}}
@media (max-width:1080px){
  .gsign{grid-template-columns:1fr}
  .gsign__h,.gsign__sub{grid-row:auto}
  .gsign__rows{grid-column:1;grid-row:auto;margin-top:22px;border-top:2px solid rgba(255,255,255,.9)}
}
@media (max-width:980px){
  .signlib{grid-template-columns:1fr 1fr;column-gap:28px}
  .signlib__i,.signlib__i+.signlib__i{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:2px;padding:16px 0;border-left:0;border-bottom:1px solid var(--line)}
  .signlib__i .sgn{grid-row:1 / span 2}
}
@media (max-width:760px){
  .topbar__in{height:56px}
  .brand__txt b{font-size:1.3125rem}
  .page-h{font-size:2.125rem}
  .section__h{font-size:1.625rem}
  .road.hero{padding:22px 0 60px}
  .gsign{padding:26px 20px 20px}
  .gsign__h{font-size:2.5rem}
  .gsign__sub{font-size:1rem}
  .gsign__rows{margin-top:18px}
  .gsign__row{grid-template-columns:30px minmax(0,1fr);gap:8px 12px;padding:14px 0}
  .gsign__shields{grid-column:1 / -1;gap:6px}
  .shield{min-width:44px;height:42px;padding:0 6px;font-size:1.375rem}
  .signlib{grid-template-columns:1fr}
  .faq{grid-template-columns:1fr}
  .chead__txt h1{font-size:2.125rem}
  .kpi{padding:14px 14px 4px 0}
  .kpi+.kpi{padding-left:14px}
  .kpi:nth-child(3){padding-left:0}
  .kpi__v{font-size:2.5rem}
  .panel{padding:18px 16px}
  .qcard{padding:20px 16px}
  .qtext{font-size:1.1875rem}
  .opt{font-size:1.0625rem;padding:12px}
  .res{padding:20px}
  .res__h{font-size:2rem}
}

/* v4.1: logo và thông tin Chợ Giá */
.cg-logo{display:block;height:20px;width:auto;max-width:150px;object-fit:contain}
.cg-logo--badge{background:#fff;border-radius:5px;padding:3px 7px;height:26px}
.cg-word{font-family:var(--font-display);font-weight:700;font-size:1.0625rem;letter-spacing:.04em;line-height:1;color:inherit}
.netbar__brand .cg-word{color:#fff}
.cgcard__top .cg-word{color:#fff;font-size:1.125rem}
.cgcard__top .cg-logo{height:22px}
.sfoot__grid{grid-template-columns:1.25fr 1fr 1fr 1.25fr}
.sfoot__org .sfoot__logo{display:inline-block;margin-bottom:12px;text-decoration:none}
.sfoot__org .cg-logo{height:30px;max-width:180px}
.sfoot__org .cg-logo--badge{height:40px;padding:6px 11px;border-radius:7px}
.sfoot__org .cg-word{font-size:1.625rem;color:#fff}
.sfoot__org>p{font-size:.875rem;line-height:1.6;color:#AEB7BF;margin-bottom:14px;max-width:44ch}
/* 🔴 Nhìn ảnh chụp 02/10/2026: hai nút "Facebook" và "X" là hộp chữ nhật viền xám,
   thô và lạc hẳn với phần còn lại của chân trang vốn toàn chữ. Đổi sang dạng thẻ bo
   tròn mềm, nền chìm thay vì viền cứng, và vạch vàng thương hiệu khi rê chuột. */
.sfoot__social{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sfoot__social a{display:inline-flex;align-items:center;height:34px;padding:0 15px;border:1px solid transparent;border-radius:999px;background:#272E35;color:#C7CED5;font-size:.8125rem;font-weight:600;letter-spacing:.01em;transition:background .15s,color .15s,border-color .15s}
.sfoot__social a:hover{background:#30383F;border-color:#F2B300;color:#fff;text-decoration:none}
/* Dòng nhắc tiến độ + nút xoá: tách khỏi câu pháp lý, nút trông đúng là nút bấm được. */
.sfoot__reset{color:#8E98A2}
.sfoot__reset .link{color:#C7CED5;text-decoration:underline;text-underline-offset:2px;background:none;border:0;padding:0;font:inherit;cursor:pointer}
.sfoot__reset .link:hover{color:#F2B300}
.sfoot__copy{color:#AEB7BF}
.sfoot__copy span{display:inline-block;margin-right:14px}
.sfoot__copy a{color:#E6EBEF}
@media (max-width:980px){.sfoot__grid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.sfoot__grid{grid-template-columns:1fr}}

/* =========================================================================
   v5: bài viết và E-E-A-T, chuyên gia, khoe kết quả, báo lỗi, quản trị mở rộng
   ========================================================================= */
.art{min-width:0}
.art__head{padding-bottom:18px;border-bottom:2px solid var(--ink);margin-bottom:22px}
.art__head .lede{margin-top:10px}
.byline{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:16px;font-size:.9375rem;color:var(--ink-2)}
.byline__i{display:inline-flex;flex-direction:column;gap:1px}
.byline__k{font-size:.75rem;color:var(--ink-3);font-weight:600}
.byline a{font-weight:600}
.toc{background:var(--surface);border-radius:var(--r-3);padding:16px 20px;margin:0 0 24px;max-width:72ch}
.toc b{font-family:var(--font-display);font-size:1.125rem}
.toc ol{margin:8px 0 0;padding-left:20px;line-height:1.75}
.prose.art__body{max-width:72ch}
.art__body h2{font-family:var(--font-display);font-size:1.75rem;margin:34px 0 10px;line-height:1.1}
.art__body h3{font-family:var(--font-display);font-size:1.3125rem;margin:24px 0 8px}
.art__body p,.art__body li{line-height:1.7}
.art__body p+p{margin-top:12px}
.art__body ul,.art__body ol{padding-left:22px;margin:10px 0 16px}
.art__body li+li{margin-top:6px}
.art__body blockquote{margin:16px 0;padding:10px 16px;border-left:3px solid var(--blue);background:var(--surface)}
.art__body .tablewrap{margin:14px 0 18px}
.art__faq{margin-top:32px;max-width:72ch}
.art__faq h2,.art__src h2{font-family:var(--font-display);font-size:1.5rem;margin-bottom:10px}
.art__src{margin-top:28px;padding-top:18px;border-top:1px solid var(--line);max-width:72ch}
.art__src ol{padding-left:22px;font-size:.9375rem;line-height:1.6;color:var(--ink-2)}
.art__src li+li{margin-top:4px}
.art__note{margin-top:28px;padding:14px 16px;background:var(--surface);border-radius:var(--r-2);font-size:.9375rem;color:var(--ink-2);max-width:72ch}
.ctabox{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;margin:22px 0;padding:18px 20px;background:#0B5B94;color:#fff;border-radius:var(--r-3)}
.ctabox__k{display:grid;place-items:center;min-width:64px;height:54px;padding:0 10px;background:#fff;color:#0B5B94;border-radius:8px;font-family:var(--font-display);font-weight:700;font-size:1.875rem;box-shadow:inset 0 0 0 2px #0B5B94}
.ctabox__t b{display:block;font-family:var(--font-display);font-size:1.375rem;line-height:1.15}
.ctabox__t span{font-size:.9375rem;color:#DCE8F3}
.ctabox .btn--primary{background:#fff;color:#0B5B94;border-color:#fff}
.ctabox .btn--primary:hover{background:#F2B300;border-color:#F2B300;color:#16191D}
.doc__side .ctabox{grid-template-columns:auto 1fr;margin:0}
.doc__side .ctabox .btn{grid-column:1 / -1}
.qrefs{list-style:none;margin:10px 0 20px;padding:0;display:grid;gap:8px}
.qref{padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-2)}
.qref a{color:var(--ink);text-decoration:none;font-weight:600}
.qref a:hover{color:var(--blue)}
.qref .num{color:var(--blue);margin-right:6px}
.qref__a{margin-top:4px;color:var(--green);font-size:.9375rem}
.qref__tags{margin-top:6px;display:flex;gap:6px}
.cgrp{margin-top:18px}
.gcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.gcard a{display:flex;flex-direction:column;gap:6px;height:100%;padding:18px;background:var(--surface);border-radius:var(--r-3);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.gcard b{font-family:var(--font-display);font-size:1.3125rem;line-height:1.15}
.gcard span{color:var(--ink-2);font-size:.9375rem;line-height:1.5}
.gcard small{color:var(--ink-3);margin-top:auto;padding-top:6px}
.gcard a:hover b{color:var(--blue)}
/* 🔴 Đo thật 02/10/2026: trang chủ dựng 4 thẻ hướng dẫn trong lưới 3 cột ⇒ hàng cuối
   hở 2 ô ở MỌI khổ từ 1100px trở lên, trông như thiếu nội dung. Không hạ số thẻ xuống 3
   vì như thế là bớt một liên kết nội bộ; và ghim cứng con số cũng vô nghĩa khi biên tập
   viên xuất bản thêm bài. Dùng flex có cuộn dòng + căn giữa: thẻ thừa của hàng cuối
   luôn nằm giữa, tự đúng với mọi số bài. Giữ nguyên bề rộng thẻ như lưới cũ. */
.gcards--home{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.gcards--home>.gcard{flex:0 1 calc((100% - 28px)/3);min-width:280px}
@media (max-width:1099px){.gcards--home>.gcard{flex:0 1 calc((100% - 14px)/2)}}
@media (max-width:639px){.gcards--home>.gcard{flex:1 1 100%;min-width:0}}
.orgbox{margin-top:22px;padding:22px;background:var(--surface);border-radius:var(--r-3)}
.orgbox h2{font-family:var(--font-display);font-size:1.5rem}
.orgbox p{margin-top:8px;color:var(--ink-2);max-width:70ch}
.contactbox{display:flex;flex-direction:column;gap:4px;margin-top:14px;padding:14px 16px;border-left:3px solid var(--yellow);background:var(--surface-2);border-radius:0 var(--r-2) var(--r-2) 0;font-size:.9375rem}
.xcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.xcard a{display:flex;flex-direction:column;gap:4px;height:100%;padding:18px;background:var(--surface);border-radius:var(--r-3);color:var(--ink);text-decoration:none}
.xcard b{font-family:var(--font-display);font-size:1.375rem;margin-top:8px}
.xcard span{color:var(--ink-2);font-size:.9375rem}
.xcard small{color:var(--ink-3)}
.xcard__ph{width:72px;height:72px;border-radius:50%;object-fit:cover}
.xcard__ph--i{display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-family:var(--font-display);font-weight:700;font-size:1.75rem}
.xprofile{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;margin:20px 0 30px;padding:24px;background:var(--surface);border-radius:var(--r-3)}
.xprofile__ph{width:120px;height:120px;border-radius:50%;object-fit:cover}
.xprofile h2{font-family:var(--font-display);font-size:1.25rem;margin:18px 0 6px}
.xprofile ul{padding-left:20px}
.xprofile__tags,.xprofile__links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.xprofile__qs{display:flex;flex-wrap:wrap;gap:6px}
.xprofile__qs a{display:inline-grid;place-items:center;min-width:44px;height:34px;padding:0 6px;background:var(--surface);border:1px solid var(--line);border-radius:6px;font-family:var(--font-num);font-weight:700;text-decoration:none}
.eeat{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 24px;margin-top:18px;padding:12px 16px;background:var(--surface-2);border-radius:var(--r-2);font-size:.9375rem}
.eeat>span{display:inline-flex;flex-direction:column}
.eeat .link{margin-left:auto}
.qsrc{margin-top:10px;font-size:.9375rem;color:var(--ink-2)}
.qreport{margin-top:12px;text-align:right}
.btn--share{background:var(--yellow);border-color:#16191D;color:#16191D}
.btn--share:hover{background:#FFC93A}
.sharedlg,.reportdlg{padding:0;border:0;border-radius:16px;background:var(--surface);color:var(--ink)}
.sharedlg{width:min(560px,94vw);max-height:94vh}
.reportdlg{width:min(520px,94vw)}
.sharedlg::backdrop,.reportdlg::backdrop{background:rgba(10,14,18,.6)}
.sharedlg__in{padding:16px 18px 18px;display:grid;gap:12px}
.sharedlg__head{display:flex;justify-content:space-between;align-items:center}
.sharedlg__head h2,.reportdlg__f h2{font-family:var(--font-display);font-size:1.5rem}
.sharedlg__img canvas{display:block;width:100%;height:auto;max-height:60vh;object-fit:contain;border-radius:10px;background:#23292F}
.sharedlg__acts{display:flex;flex-wrap:wrap;gap:8px}
.sharedlg__acts .btn{flex:1 1 auto}
.reportdlg__f{display:grid;gap:12px;padding:20px}
.reportdlg__f textarea{width:100%;border:1px solid var(--line-2);border-radius:var(--r-2);padding:10px 12px;font:inherit;background:var(--surface);color:var(--ink)}
.reportdlg__msg{min-height:1.4em;font-weight:600;color:var(--blue)}
.sharepage{max-width:780px}
.sharecard{margin:26px 0 20px;padding:20px;background:#23292F;border-radius:var(--r-3)}
.sharecard__sign{display:flex;align-items:center;gap:18px;padding:22px 24px;background:#0B5B94;border-radius:14px;box-shadow:inset 0 0 0 6px #0B5B94,inset 0 0 0 9px #fff;color:#fff}
.sharecard__sign b{font-size:4.5rem;line-height:1;color:#fff}
.sharecard__v{margin-left:auto;padding:8px 14px;border-radius:8px;font-family:var(--font-display);font-weight:700;font-size:1.75rem;transform:rotate(-6deg);box-shadow:inset 0 0 0 3px #fff;color:#fff}
.sharecard__v--ok{background:#1E9A52}
.sharecard__v--no{background:#D7263D}
.sharecard__vms{margin-top:14px;padding:16px 20px;background:#0A0C0E;border-radius:12px;font-family:var(--font-display);color:#FFC94A;display:grid;gap:4px}
.sharecard__vms b{font-size:1.75rem;color:#FFB000}
.sharecard__vms span{font-size:1.25rem}
.sfoot__trust{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:6px}
.sfoot__trust a{color:#C7CED5}
.adm__navh{display:block;margin:16px 12px 4px;font-size:.75rem;color:var(--ink-3)}
.adm__head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.adm__head .page-h{margin:0 auto 0 0}
.adm__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.adm__help{color:var(--ink-3);font-size:.8125rem;line-height:1.5}
.adm__seo{border:1px solid var(--line);border-radius:var(--r-2);padding:12px 14px;display:grid;gap:8px;min-width:0}
.adm__seo legend{font-weight:700;padding:0 6px}
.adm__inline{display:flex;gap:6px;margin:0}
.adm__cl li>div{display:grid;gap:2px}
.adm__links{display:flex;gap:18px}
.adm__kpis{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:6px}
.adm__kpis .kpi:nth-child(3n+1){border-left:0;padding-left:0}
.adm__cl span{color:var(--ink-2);font-size:.875rem}
@media (max-width:860px){.adm__nav .adm__navh{display:none}}
@media (max-width:760px){
  .ctabox{grid-template-columns:auto 1fr}
  .ctabox .btn{grid-column:1 / -1}
  .xprofile{grid-template-columns:1fr}
  .eeat .link{margin-left:0}
  .sharecard__sign{flex-wrap:wrap}
  .sharecard__sign b{font-size:3.25rem}
  .art__body h2{font-size:1.5rem}
}

/* =========================================================================
   v6: danh bạ giáo viên dạy lái xe đã xác minh
   ========================================================================= */
.vbadge{display:inline-flex;align-items:center;gap:5px;font-size:.8125rem;font-weight:700;color:#0B5B94;white-space:nowrap}
.vbadge svg{width:15px;height:15px;flex:none}
:root[data-theme-eff="dark"] .vbadge{color:var(--blue)}
.vbadge--rv{padding:2px 9px;border-radius:999px;background:var(--yellow);color:#16191D}
.miniplate{display:inline-grid;place-items:center;min-width:34px;height:26px;padding:0 6px;border-radius:5px;background:#fff;color:#0B5B94;box-shadow:inset 0 0 0 1.5px #0B5B94;font-family:var(--font-display);font-weight:700;font-size:.9375rem;line-height:1}
.gvav--i{display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);font-family:var(--font-display);font-weight:700}
.gvcards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.gvcard a{display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;align-items:start;height:100%;padding:18px;background:var(--surface);border:1px solid transparent;border-radius:var(--r-3);color:var(--ink);text-decoration:none}
.gvcard a:hover{border-color:#0B5B94}
.gvcard__ph{width:72px;height:72px;border-radius:50%;object-fit:cover;font-size:1.625rem}
.gvcard__b{display:grid;gap:4px;min-width:0;justify-items:start}
.gvcard__b b{font-family:var(--font-display);font-size:1.375rem;line-height:1.1}
.gvcard__t{font-size:.9375rem;color:var(--ink-2)}
.gvcard__m{font-size:.875rem;color:var(--ink-3)}
.gvcard__k{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.gvfilter{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.7fr) minmax(0,1.3fr) auto;gap:12px;align-items:end;margin:22px 0 8px;padding:16px;background:var(--surface);border-radius:var(--r-3)}
.gvfilter .select,.gvfilter .input{width:100%}
.gvcount{margin:10px 0 12px}
.gvempty{padding:28px;background:var(--surface);border-radius:var(--r-3);display:grid;gap:10px;justify-items:start}
.gvempty b{font-family:var(--font-display);font-size:1.375rem}
.gvempty p{color:var(--ink-2);max-width:66ch}
.gvjoin{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;margin:28px 0;padding:22px 26px;background:#0B5B94;color:#fff;border-radius:var(--r-3);box-shadow:inset 0 0 0 6px #0B5B94,inset 0 0 0 8px rgba(255,255,255,.9)}
.gvjoin b{display:block;font-family:var(--font-display);font-size:1.5rem;line-height:1.15}
.gvjoin span{color:#DCE8F3;font-size:.9375rem}
.gvjoin .btn{background:#fff;border-color:#fff;color:#0B5B94}
.gvjoin .btn:hover{background:#F2B300;border-color:#F2B300;color:#16191D}
.provchips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.provchips a{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px;background:var(--surface);border:1px solid var(--line);border-radius:8px;color:var(--ink);text-decoration:none;font-weight:600}
.provchips a:hover,.provchips a[aria-current]{border-color:#0B5B94;color:var(--blue)}
.provchips b{font-size:1.0625rem;color:var(--blue)}
.gvtrust__l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:t}
.gvtrust__l li{counter-increment:t;display:grid;gap:4px;padding-top:12px;border-top:2px solid var(--ink)}
.gvtrust__l li::before{content:counter(t);font-family:var(--font-display);font-weight:700;font-size:1.75rem;color:var(--blue);line-height:1}
.gvtrust__l b{font-size:1.0625rem}
.gvtrust__l span{color:var(--ink-2);font-size:.9375rem}
.gvhero{display:grid;grid-template-columns:168px minmax(0,1fr);gap:28px;align-items:start;margin:18px 0 26px;padding:28px;background:var(--surface);border-radius:var(--r-3);border:1px solid var(--line)}
.gvhero__ph{width:168px;height:168px;border-radius:50%;object-fit:cover;font-size:3.5rem;box-shadow:0 0 0 4px var(--surface),0 0 0 7px #0B5B94}
.gvhero .page-h{margin:0}
.gvhero__badges{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:10px;align-items:center}
.gvhero .lede{margin-top:6px}
.gvfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px 20px;margin:16px 0 0}
.gvfacts dt{font-size:.75rem;color:var(--ink-3);font-weight:600}
.gvfacts dd{margin:2px 0 0;font-weight:600;display:flex;flex-wrap:wrap;gap:5px}
.gvcontact{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.gvtip{margin:0 0 24px;padding:20px 24px;background:var(--surface);border-left:3px solid var(--yellow);border-radius:0 var(--r-3) var(--r-3) 0;max-width:72ch}
.gvtip blockquote{margin:0;font-family:var(--font-display);font-size:1.5rem;line-height:1.3}
.gvtip figcaption{margin-top:8px;color:var(--ink-2);font-size:.9375rem}
.gvsec{margin-bottom:24px;max-width:72ch}
.gvsec h2{font-family:var(--font-display);font-size:1.5rem;margin-bottom:8px}
.gvsec p{line-height:1.7}
.gvsec p+p{margin-top:10px}
.gvsec ul{padding-left:20px;line-height:1.7}
.gvkit{margin-top:8px;background:var(--surface);border-radius:var(--r-3)}
.gvkit summary{cursor:pointer;padding:16px 20px;font-weight:700}
.gvkit__b{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:20px;padding:0 20px 20px}
.gvkit__img canvas{display:block;width:100%;height:auto;border-radius:10px;background:#23292F}
.gvkit__t{display:grid;gap:10px;align-content:start}
.gvkit__t .input,.gvkit__t textarea{width:100%}
.gvkit__t textarea{border:1px solid var(--line-2);border-radius:var(--r-2);padding:8px 10px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8125rem;background:var(--surface-2);color:var(--ink)}
.gvkit__acts{display:flex;flex-wrap:wrap;gap:8px}
.ctabox--gv{grid-template-columns:1fr}
.gvjoin__grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:28px;align-items:start;margin-top:20px}
.gvform{display:grid;gap:18px}
.gvform fieldset{border:0;margin:0;padding:20px;background:var(--surface);border-radius:var(--r-3);display:grid;gap:14px;min-width:0}
.gvform legend{float:left;width:100%;padding:0;font-family:var(--font-display);font-weight:700;font-size:1.25rem}
.gvform__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.gvform__row--name{grid-template-columns:120px minmax(0,1fr)}
.gvform .select,.gvform .input,.gvform textarea{width:100%}
.gvform textarea{border:1px solid var(--line-2);border-radius:var(--r-2);padding:10px 12px;font:inherit;background:var(--surface);color:var(--ink)}
.gvform__cls{display:flex;flex-wrap:wrap;gap:8px 12px}
.gvform__cls label{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.gvform__cls input{width:18px;height:18px;accent-color:#0B5B94}
.gvform__cls .miniplate{min-width:42px;height:30px;font-size:1.0625rem}
.gvjoin__side{position:sticky;top:84px;padding:22px;background:var(--surface);border-radius:var(--r-3);display:grid;gap:14px}
.gvjoin__side h2{font-family:var(--font-display);font-size:1.375rem}
.gvben{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.gvben li{display:grid;gap:2px;padding-left:14px;border-left:3px solid #0B5B94}
.gvben span{color:var(--ink-2);font-size:.9375rem}
.gvdone{max-width:640px;margin:40px auto;text-align:center;display:grid;gap:12px;justify-items:center}
.gvdone__i svg{width:64px;height:64px;color:#1E9A52}
.gvdone .actions{justify-content:center}
.refchip{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:18px 0 0;padding:10px 14px;background:var(--surface);border-left:3px solid var(--yellow);border-radius:0 var(--r-2) var(--r-2) 0;font-size:.9375rem}
.refchip__k{font-size:.8125rem;color:var(--ink-3);font-weight:600}
.refchip a{font-weight:700}
.refchip__m{color:var(--ink-2)}
.adm__tabs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}
.adm__tabs a{padding:8px 12px;border-radius:8px;background:var(--surface);color:var(--ink-2);text-decoration:none;font-weight:600}
.adm__tabs a[aria-current]{background:var(--blue-soft);color:var(--blue)}
.adm__gv{display:flex;align-items:center;gap:10px}
.adm__gvph{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;font-size:.9375rem}
.adm__gvph--lg{width:96px;height:96px;font-size:2rem}
.adm__photo{align-items:center}
@media (max-width:980px){.gvjoin__grid{grid-template-columns:1fr}.gvjoin__side{position:static}.gvfilter{grid-template-columns:1fr 1fr}.gvfilter__q{grid-column:1 / -1}.gvkit__b{grid-template-columns:1fr}}
@media (max-width:760px){.gvhero{grid-template-columns:1fr;padding:20px}.gvhero__ph{width:120px;height:120px}.gvtrust__l{grid-template-columns:1fr}.gvjoin{grid-template-columns:1fr}.gvfilter{grid-template-columns:1fr}.gvcards{grid-template-columns:1fr}.gvform__row--name{grid-template-columns:1fr}}

/* hộp thoại dùng nút thường, không dùng form */
#lb [data-lbx]{display:block;margin:0 0 12px auto}

/* bắt buộc chọn đáp án: nút sang câu mờ đi, bấm vẫn hiện lời nhắc */
.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.pal .is-lock{opacity:.38}
.toast{position:fixed;left:50%;bottom:calc(32px + env(safe-area-inset-bottom,0px));z-index:70;transform:translate(-50%,12px);opacity:0;pointer-events:none;max-width:min(92vw,440px);padding:11px 18px;border-radius:10px;background:#16191D;color:#fff;font-weight:600;font-size:.9375rem;text-align:center;box-shadow:0 10px 28px rgba(0,0,0,.32);transition:opacity .2s,transform .2s}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
:root[data-theme-eff="dark"] .toast{background:#F2F4F5;color:#16191D}
.opts--nudge{animation:optnudge .42s ease}
.opts--nudge .opt{border-color:var(--yellow)}
@keyframes optnudge{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media (max-width:980px){.toast{bottom:calc(92px + env(safe-area-inset-bottom,0px))}}

/* =========================================================================
   v7: trang Mẹo thi bằng lái đã kiểm chứng
   ========================================================================= */
.tipspage .lede{max-width:74ch}
.tldr{margin:22px 0 8px;padding:20px 24px;background:#16191D;color:#E9ECEF;border-radius:var(--r-3)}
.tldr h2{font-family:var(--font-display);font-size:1.375rem;margin:0 0 8px;color:#F2B300}
.tldr ul{margin:0;padding-left:20px;display:grid;gap:6px;line-height:1.6}
.tldr b{color:#fff}
.ttoc{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 6px}
.ttoc a{padding:7px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:600;font-size:.875rem}
.ttoc a:hover{border-color:#0B5B94;color:var(--blue)}
.tsec{margin-top:44px;scroll-margin-top:88px}
.tsec__h{font-family:var(--font-display);font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.15;margin:0 0 8px}
.tsec__lede{color:var(--ink-2);max-width:74ch;margin:0 0 16px}
.myths{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.myth{display:grid;gap:10px;padding:16px 18px;background:var(--surface);border-radius:var(--r-3);border:1px solid var(--line)}
.myth--bad{border-left-color:#C21A1F}.myth--mid{border-left-color:#E0A400}.myth--ok{border-left-color:#1E9A52}
.myth__top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.myth__claim{font-size:1.0625rem;line-height:1.4}
.myth__v{flex:none;padding:3px 10px;border-radius:999px;font-size:.8125rem;font-weight:700;white-space:nowrap}
.myth--bad .myth__v{background:#FBE3E4;color:#9B1217}.myth--mid .myth__v{background:#FFF1C2;color:#5E4500}.myth--ok .myth__v{background:#DDF3E6;color:#11622F}
.myth__data{display:grid;grid-template-columns:4.4ch minmax(0,1fr) 15.5em;gap:14px;align-items:center}
.myth__acc{font-family:var(--font-display);font-weight:700;font-size:1.75rem;min-width:3.4ch;line-height:1}
.tbar{position:relative;height:12px;border-radius:6px;background:var(--sunken)}
.myth--bad .tbar{color:#C21A1F}.myth--mid .tbar{color:#E0A400}.myth--ok .tbar{color:#1E9A52}
.tbar__f{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:currentColor}
.tbar__m{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--ink);transform:translateX(-1px)}
.myth__n{font-size:.875rem;color:var(--ink-2);white-space:nowrap;text-align:right}
.myth__x summary{cursor:pointer;font-size:.875rem;font-weight:600;color:var(--ink-2)}
.qnums{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.qnums a{min-width:40px;height:30px;padding:0 6px;display:inline-grid;place-items:center;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);text-decoration:none;font-weight:600;font-size:.875rem;color:var(--ink)}
.qnums a:hover{border-color:#0B5B94;color:var(--blue)}
.qnums .muted{align-self:center;font-size:.875rem}
.myth__go{justify-self:start;font-weight:700;font-size:.9375rem}
.quick{margin:0 0 10px;background:var(--surface);border-radius:var(--r-3)}
.quick summary{display:flex;justify-content:space-between;gap:12px;padding:14px 18px;cursor:pointer}
.quick .tablewrap{margin:0 18px 8px}
.quick p{margin:0 18px 14px}
.qtab{width:100%;border-collapse:collapse;font-size:.9375rem}
.qtab th{text-align:left;font-size:.75rem;color:var(--ink-3);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line)}
.qtab td{padding:8px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.5}
.qtab td:first-child{white-space:nowrap;font-weight:700}
.qtab td:last-child{min-width:34%}
.steps5{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;counter-reset:s}
.steps5 li{counter-increment:s;display:grid;gap:4px;align-content:start;padding:14px;background:var(--surface);border-radius:var(--r-3);border:1px solid var(--line)}
.steps5 li::before{content:counter(s);font-family:var(--font-display);font-weight:700;font-size:1.75rem;color:#0B5B94;line-height:1}
:root[data-theme-eff="dark"] .steps5 li::before{color:var(--blue)}
.steps5 span{font-size:.9375rem;color:var(--ink-2);line-height:1.5}
.tlinks{display:flex;flex-wrap:wrap;gap:8px}
.sgroups{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.sgroups li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;padding:16px;background:var(--surface);border-radius:var(--r-3)}
.sgroups__i svg{width:52px;height:52px;display:block}
.sgroups div{display:grid;gap:4px;justify-items:start}
.sgroups span{font-size:.9375rem;color:var(--ink-2);line-height:1.5}
.sci{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.sci__i{padding:16px;background:var(--surface);border-radius:var(--r-3);display:grid;gap:6px;align-content:start}
.sci__n{font-family:var(--font-display);font-weight:700;font-size:1.5rem;color:var(--blue);line-height:1}
.sci__i p{margin:0;font-size:.9375rem;color:var(--ink-2);line-height:1.6}
.roomtips{margin:0;padding-left:20px;display:grid;gap:8px;line-height:1.65;max-width:76ch}
.tipspage .ctabox{margin-top:40px}
.tsec.faq details{background:var(--surface);border-radius:var(--r-2);margin-bottom:8px}
.tsec.faq summary{padding:14px 16px;cursor:pointer;font-weight:700}
.tsec.faq details p{margin:0;padding:0 16px 14px;color:var(--ink-2);line-height:1.65}
@media (max-width:980px){.steps5{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.myth__data{grid-template-columns:4.4ch minmax(0,1fr)}.myth__n{grid-column:1 / -1;text-align:left}.steps5{grid-template-columns:1fr}.myth__top{flex-direction:column;gap:6px}.tldr{padding:16px 18px}}

/* tiêu đề cân dòng, không để chữ mồ côi; menu đầu trang không tràn ở 1280–1560 px */
.page-h,.tsec__h,.section__h{text-wrap:balance}
@media (min-width:981px){.topbar .nav .hide-l{display:none}}

/* liên kết nằm trong dòng chữ phải phân biệt được không chỉ bằng màu (WCAG 1.4.1) */
.sfoot__copy a{text-decoration:underline;text-underline-offset:2px}
.tablewrap[tabindex]:focus-visible{outline:3px solid var(--focus,#0B5B94);outline-offset:2px}

/* thư viện ôn luyện: 6 ô chia đều 3 × 2 trên máy tính, kẻ ngăn giữa các cột và giữa hai hàng */
@media (min-width:981px){
  .signlib{grid-template-columns:repeat(3,1fr)}
  .signlib__i:nth-child(3n+1){border-left:0;padding-left:0}
  .signlib__i:nth-child(n+4){border-top:1px solid var(--line);padding-top:22px}
  .signlib__i{padding-bottom:22px}
}

/* ══════════════════════════════════════════════════════════════════════
   FOOTER GỌN LẠI — Sếp Long yêu cầu 01/10/2026.
   Đo trước khi sửa: điện thoại footer cao 1.442px = 24% CẢ TRANG (6.090px),
   máy tính 597px = 17%. 35 liên kết, giãn dòng ~31px mỗi mục.
   🔴 Giữ NGUYÊN 35 liên kết — chúng là liên kết nội bộ, cắt đi là cắt SEO.
      Chỉ nén khoảng trắng và xếp lại cột. Đây là lý do không xoá mục nào.
   🔴 Thêm ở CUỐI tệp nên thắng mọi luật cùng độ ưu tiên; media query khai lại
      đúng ngưỡng 980/760 của tệp gốc để không đè nhầm tầng khác.
   ══════════════════════════════════════════════════════════════════════ */
.sfoot__grid{gap:26px;padding-top:30px;padding-bottom:20px}
.sfoot__list{gap:3px;line-height:1.45}
.sfoot__list li{padding:1px 0}
.sfoot__h{margin-bottom:9px}
.sfoot__brand p{margin-top:10px;line-height:1.55}
.sfoot__org p{line-height:1.5;margin-bottom:10px}
.sfoot__bottom{padding-top:12px;gap:3px}
.sfoot__road{height:12px}
.sfoot__road::after{top:5px}

@media (max-width:980px){
  .sfoot__grid{grid-template-columns:1fr 1fr;gap:22px 20px}
  .sfoot__brand{grid-column:1 / -1}
}
@media (max-width:760px){
  /* 🔴 Hai danh sách liên kết ĐẶT CẠNH NHAU thay vì xếp dọc — đây là chỗ tiết
     kiệm lớn nhất trên điện thoại: trước đó chúng cộng dồn chiều cao. */
  .sfoot__grid{grid-template-columns:1fr 1fr;gap:18px 14px;padding-top:24px;padding-bottom:16px}
  .sfoot__brand,.sfoot__org{grid-column:1 / -1}
  /* mô tả Chợ Giá ở cột 4 lặp lại ý đã nói ở khối thương hiệu phía trên;
     trên màn hẹp nó tốn 3 dòng mà không thêm thông tin. */
  .sfoot__org p{display:none}
  /* 10 hạng xe thành CHIP xếp dòng: 5 hàng cao → còn 3 hàng */
  .sfoot__list--cols{display:flex;flex-wrap:wrap;gap:7px}
  .sfoot__list--cols li{padding:0}
  .sfoot__list--cols a{display:inline-block;padding:5px 11px;border:1px solid #2E353C;border-radius:999px;font-size:.875rem;line-height:1.2}
  .sfoot__brand p{font-size:.8125rem}
}
@media (max-width:760px){
  /* khối Chợ Giá: 6 liên kết xếp dọc tốn ~160px, chia hai cột còn một nửa */
  .sfoot__org .sfoot__list{grid-template-columns:1fr 1fr;column-gap:14px}
}

/* ══════════════════════════════════════════════════════════════════════════
   HỆ THỐNG GIAO DIỆN TRANG QUẢN TRỊ — viết lại 01/10/2026 theo yêu cầu Sếp Long
   ("chuyên nghiệp, thẩm mỹ, khoa học").

   🔴 MỌI luật đều phủ dưới `.adm` (lớp trên <body> của trang quản trị).
      Lý do bắt buộc: `.panel`, `.kpi`, `.btn`, `.input`, `table` DÙNG CHUNG với
      trang công khai. Sửa thẳng chúng là đổi luôn giao diện 670 trang ngoài.
      Phủ dưới `.adm` thì trang công khai miễn nhiễm THEO CẤU TRÚC, không phải
      theo lời hứa — và đo lại được.

   Ba vấn đề ĐO ĐƯỢC của bản cũ, và cách xử:
   ① THANG CHỮ ĐẢO NGƯỢC. Tiêu đề trang 44px bằng phông CONDENSED, trong khi số
      liệu — thứ người ta vào đây để đọc — chỉ 44px và nhãn 13px. Ở một công cụ,
      DỮ LIỆU phải là thứ to nhất, không phải tên trang. Nay: tiêu đề 20px, số
      liệu 30px đậm, nhãn 11px hoa.
   ② PHÔNG CONDENSED CHO GIAO DIỆN CÔNG CỤ. Barlow Condensed hẹp ngang nên dấu
      tiếng Việt chồng lên nhau ở cỡ nhỏ. Hợp cho trang quảng bá, hại cho bảng
      số liệu. Trang quản trị nay dùng Barlow thường.
   ③ SỐ KHÔNG THẲNG CỘT. Không khai `tabular-nums` nên chữ số rộng khác nhau,
      hai con số cạnh nhau không so được bằng mắt. Nay mọi số liệu và ngày
      tháng đều dùng chữ số đẳng khoảng.

   🔴 Trạng thái KHÔNG mã hoá bằng riêng màu: mỗi nhãn đều có CHẤM + CHỮ, mục
      đang chọn ở thanh bên có VẠCH TRÁI + nền. Người mù màu vẫn đọc được.
   ══════════════════════════════════════════════════════════════════════════ */
.adm{
  --a1:4px; --a2:8px; --a3:12px; --a4:16px; --a5:24px; --a6:32px;
  --a-r:8px; --a-r-sm:6px;
  --a-xs:.6875rem; --a-sm:.78125rem; --a-base:.875rem; --a-md:.9375rem; --a-lg:1.25rem;
  font-size:16px;
}
.adm, .adm .adm__main, .adm .adm__nav, .adm .panel, .adm table, .adm .btn, .adm .input, .adm .select{
  font-family:var(--font-ui);
}
/* 🔴 Lớp `.num` toàn cục dùng Barlow Condensed 1.125rem — hợp cho số liệu to
   ngoài trang công khai, nhưng trong BẢNG nó to hơn cả dòng chữ (18px so với
   14px) và CHÍNH NÓ làm bảng tràn 50px khỏi khung, cột ngày bị cắt thành
   "01/10/2". Trong trang quản trị, `.num` chỉ còn nghĩa "chữ số đẳng khoảng". */
.adm .num, .adm .kpi__v, .adm td.num, .adm th.num, .adm time, .adm .adm__dl dd{
  font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}
.adm tbody .num, .adm thead .num{font-family:var(--font-ui);font-size:inherit;font-weight:600}

/* ── khung ───────────────────────────────────────────────────────────── */

/* ── thanh bên ───────────────────────────────────────────────────────── */
.adm__nav a{
  position:relative;padding:7px 10px 7px 13px;border-radius:var(--a-r-sm);
  font-size:var(--a-base);font-weight:500;line-height:1.3;color:var(--ink-2);
}
/* 🔴 Vạch trái 3px bỏ 02/10: ngôn ngữ mới dùng NỀN ĐẶC + biểu tượng đậm để báo "đang xem",
   nên vạch thành thừa và trùng đúng mẫu "side-tab accent" mà bộ dò thiết kế xếp vào loại giả tạo.
   Trạng thái vẫn không chỉ dựa vào màu: còn chữ đậm hơn, biểu tượng rõ hơn và `aria-current`. */
.adm__navh{
  font-size:var(--a-xs);font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin:var(--a4) 0 var(--a1);padding:0 10px;
}
.adm__nav a:first-child{margin-bottom:var(--a1)}

/* ── đầu trang ───────────────────────────────────────────────────────── */
.adm__main .page-h{
  font-family:var(--font-ui);font-size:var(--a-lg);font-weight:700;line-height:1.25;
  letter-spacing:-.01em;margin:0 0 var(--a2);
}
.adm__head{align-items:flex-start;gap:var(--a3);margin-bottom:var(--a4);
  padding-bottom:var(--a3);border-bottom:1px solid var(--line)}
.adm__head .page-h{margin:0}
.adm__p{font-size:var(--a-base);color:var(--ink-2);line-height:1.55;margin-bottom:var(--a3)}

/* ── ô số liệu: thẻ rời, nhãn nhỏ, SỐ to ─────────────────────────────── */
/* 🔴 BA cột, không phải `auto-fit`. `auto-fit` cho 5 cột ở 1440px nên ô thứ sáu
   đứng lẻ một mình ở hàng dưới — trông như hỏng. Sáu ô này vốn là HAI NHÓM
   BA: (bài viết · thẩm định · lời giải) và (giáo viên · hồ sơ chờ · báo lỗi).
   Ba cột giữ đúng nhóm đó, và luôn chia hết nên không bao giờ có ô mồ côi. */
.adm .kpis{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--a3);margin-top:0;border:0;background:none;border-radius:0;
}
@media (max-width:1100px){.adm .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.adm .kpis{grid-template-columns:1fr}}
.adm .kpi{
  padding:var(--a3) var(--a4);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--a-r);min-width:0;
}
.adm .kpi__h{
  font-size:var(--a-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);line-height:1.3;
}
.adm .kpi__v{
  font-family:var(--font-ui);font-size:1.875rem;font-weight:700;line-height:1.1;
  margin-top:var(--a2);letter-spacing:-.02em;
}
.adm .kpi__v small{font-size:.9375rem;font-weight:600;color:var(--ink-3);margin-left:1px}
.adm .kpi__s{font-size:var(--a-sm);color:var(--ink-3);margin-top:var(--a1)}

/* ── khối nội dung ───────────────────────────────────────────────────── */
.adm .panel{padding:var(--a4) var(--a5) var(--a5);border-radius:var(--a-r)}
.adm .panel+.panel,.adm .kpis+.panel{margin-top:var(--a4)}
.adm .panel__h{
  font-size:var(--a-md);font-weight:700;margin:0 calc(var(--a5)*-1) var(--a4);
  padding:0 var(--a5) var(--a3);border-bottom:1px solid var(--line);
}
.adm .panel__p{font-size:var(--a-base);margin-bottom:var(--a3)}

/* ── bảng dữ liệu ────────────────────────────────────────────────────── */
.adm table{width:100%;border-collapse:collapse;font-size:var(--a-base)}
.adm thead th{
  position:sticky;top:0;z-index:1;background:var(--surface-2);
  font-size:var(--a-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);text-align:left;padding:var(--a2) var(--a3);
  border-bottom:1px solid var(--line-2);
}
.adm tbody td{padding:var(--a2) var(--a3);border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45}
.adm tbody tr:hover{background:var(--surface-2)}
.adm tbody tr:last-child td{border-bottom:0}
.adm td.num,.adm th.num{text-align:right}
/* liên kết trong bảng: gạch chân khi rê chuột thôi, nếu không cả bảng thành một mảng gạch */
.adm tbody a{color:var(--ink);text-decoration:none;font-weight:600}
.adm tbody a:hover{color:var(--blue);text-decoration:underline}
.adm tbody small,.adm tbody .muted{font-size:var(--a-sm);color:var(--ink-3)}

/* ── nhãn trạng thái: CHẤM + CHỮ, không chỉ màu ──────────────────────── */
.adm .badge,.adm .pill,.adm .badge-prov{
  display:inline-flex;align-items:center;gap:6px;font-size:var(--a-sm);font-weight:600;
  padding:2px 9px;border-radius:999px;line-height:1.5;white-space:nowrap;
}
.adm .badge::before,.adm .pill::before{
  content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;
}

/* ── biểu mẫu: cột chữ hẹp lại cho dễ đọc ────────────────────────────── */
.adm .adm__form{padding:var(--a5);gap:var(--a4);border-radius:var(--a-r)}
.adm .adm__f>span{font-size:var(--a-base);font-weight:600}
.adm .adm__help{font-size:var(--a-sm);color:var(--ink-3);line-height:1.5}
/* 🔴 ô nhập KHÔNG kéo hết bề ngang: dòng chữ quá dài làm mắt khó bắt đầu dòng
   kế tiếp. Ô mã nhúng và vùng soạn thảo thì vẫn cho rộng hết. */
.adm .adm__f .input,.adm .adm__f .select{max-width:680px}
.adm .adm__f textarea.input{max-width:none}
.adm .input,.adm .select{min-height:38px;padding:7px 11px;font-size:var(--a-md);border-radius:var(--a-r-sm)}
.adm textarea.input{min-height:96px;line-height:1.5}
.adm .btn{min-height:34px;padding:0 13px;font-size:var(--a-base);border-radius:var(--a-r-sm)}
.adm .btn--sm{min-height:29px;padding:0 10px;font-size:var(--a-sm)}
.adm .adm__bar{margin-top:var(--a2);padding-top:var(--a4);border-top:1px solid var(--line)}
.adm .adm__check{font-size:var(--a-base)}

/* ── danh sách việc cần làm ──────────────────────────────────────────── */
.adm .adm__cl{gap:var(--a3) var(--a5)}
.adm .adm__cl li{font-size:var(--a-base);line-height:1.5}
.adm .adm__cl li b,.adm .adm__cl li a{font-weight:600;font-size:var(--a-base)}
/* việc ĐÃ XONG lùi về sau: mắt phải rơi vào việc CHƯA làm trước */
.adm .adm__cl li.done{opacity:.62}
.adm .adm__cl li.done a{color:var(--ink-2);text-decoration:none}
.adm .steps{font-size:var(--a-base);line-height:1.6}
.adm .adm__ok,.adm .adm__err,.adm .adm__warn{
  font-size:var(--a-base);padding:var(--a2) var(--a3);border-radius:var(--a-r-sm);
}
/* 🔴 KHÔNG ép tỷ lệ cho cột đầu, và KHÔNG dùng `table-layout:fixed`.
   Bản đầu của em đặt `thead th:first-child{width:46%}` + `fixed`: đúng với bảng
   "Bài viết" (cột đầu là tiêu đề) nhưng SAI HẲN với "Nhật ký" (cột đầu là thời
   gian, bị ép 478px) và "Lời giải" — hai bảng đó tràn 128px và 357px. Một luật
   dựa trên "cột đầu luôn là cột tiêu đề" là giả định sai.
   Nguyên nhân tràn ban đầu đã được vá ở chỗ khác: lớp `.num` dùng Barlow
   Condensed 18px trong bảng 14px. Bỏ nó đi thì bảng tự vừa khung.
   Cột nào thật sự dài thì `.tablewrap` cho cuộn ngang — đúng cách của bảng dữ liệu. */
.adm tbody td,.adm thead th{padding-left:10px;padding-right:10px}
.adm .tablewrap{border:1px solid var(--line);border-radius:var(--a-r);overflow-x:auto;background:var(--surface)}
.adm .tablewrap table{margin:0}
/* 🔴 `table-layout:auto` chỉ coi `width:46%` là GỢI Ý, và đường dẫn dài trong ô
   tiêu đề đặt sàn bề rộng tối thiểu nên cột vẫn chiếm 620px ⇒ bảng tràn khung.
   `fixed` làm tỷ lệ có hiệu lực thật; đổi lại phải cho URL dài tự ngắt dòng,
   nếu không nó tràn ra ngoài ô. */
.adm tbody td{overflow-wrap:anywhere}
.adm tbody td small,.adm tbody td .muted{overflow-wrap:anywhere;display:block}
/* 🔴 ĐO RA MỚI BIẾT: thứ ép bảng rộng không phải cột, mà là phần tử BÊN TRONG ô
   mang `white-space:nowrap` — liên kết câu hỏi 908px ở trang Lời giải, đường dẫn
   601px ở trang Bài viết. Thiết kế gốc muốn chúng nằm một dòng nhưng thiếu chốt
   bề rộng nên chúng cứ dãn ra và kéo cả bảng tràn khung.
   Giữ đúng ý định đó (một dòng) và thêm phần còn thiếu: cắt bằng dấu ba chấm.
   Cách này còn làm mọi hàng cao bằng nhau — bảng dữ liệu đọc bằng mắt dễ hơn hẳn. */
/* 🔴 ĐÃ THỬ BA CÁCH TRÊN TRÌNH DUYỆT THẬT rồi mới chọn — không đoán:
   · `td{max-width:0}`: hết tràn, NHƯNG mọi ô góp 0 vào bề rộng mong muốn nên
     bảng chia cột theo độ dài TIÊU ĐỀ CỘT: "Tiêu đề" tụt còn 185px trong khi
     "Trạng thái" được 258px — cột quan trọng nhất lại hẹp nhất. Loại.
   · `table-layout:fixed`: hết tràn, nhưng chia đều cứng, cũng sai tỷ lệ. Loại.
   · CHO CHỮ XUỐNG DÒNG: hết tràn ở cả ba bảng, và cột về đúng tỷ lệ —
     "Tiêu đề" 617px, "Câu" 47px, "Nội dung" 890px. Chọn cách này.
   Thêm một lý do nữa: cắt bằng ba chấm là GIẤU thông tin, xuống dòng thì không. */
.adm tbody td,.adm tbody td *{white-space:normal}
.adm tbody td.num,.adm tbody td.num *,.adm tbody .badge,.adm tbody .pill{white-space:nowrap}

/* ══════ Lưu lượng + vá hồi quy khung quản trị trên điện thoại (01/10/2026) ══════
   🔴 LỖI HỒI QUY ĐO ĐƯỢC: khối vẽ lại bảng điều khiển khai `.adm__wrap{grid-template-columns:234px …}`
   ở dòng ~1405, tức SAU media query `max-width:860px` ở dòng ~808. Cùng độ ưu tiên mà đứng sau
   thì thắng ⇒ luật xếp dọc trên điện thoại bị đè mất, lưới giữ nguyên 2 cột.
   Hậu quả đo trên trình duyệt thật ở khổ 390px: lưới thành `234px 92px` ⇒ cột nội dung
   chỉ còn 92px ở MỌI trang quản trị (trang chủ tràn 118px, Bài viết 13px, Đo lường 41px).
   Lượt trước chỉ đo ở khổ máy tính nên không ai thấy. */
@media (max-width:860px) {
  .adm .adm__wrap { grid-template-columns: minmax(0, 1fr); gap: var(--a4); padding: 16px }
  .adm .adm__nav { flex-direction: row; overflow-x: auto; position: static; gap: 4px; padding-bottom: 4px }
  .adm .adm__nav a { white-space: nowrap }
  .adm .adm__nav a[aria-current]::before { display: none }   /* vạch trái chỉ có nghĩa khi thanh dọc */
  .adm .adm__nav a:first-child { margin-bottom: 0 }
}
/* 🔴 Số liệu bị CẮT chứ không tràn: `.kpi__v small` nằm cùng dòng với con số, hai phần cộng lại
   vượt bề rộng ô thì bị cắt gọn — phép đo tràn ngang mù tuyệt đối với kiểu hỏng này,
   phải so `scrollWidth` của TỪNG ô. Khổ hẹp thì cho dòng phụ xuống dưới. */
@media (max-width:760px) {
  .adm .kpi__v { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px }
  .adm .kpi__v small { margin-left: 0 }
}
/* Biểu đồ cột: không bao giờ được rộng hơn khung chứa, kể cả khi khung bị co bất thường. */
.adm svg[role="img"] { max-width: 100%; height: auto }


/* ===== Menu Hướng dẫn — thêm 02/10/2026 theo yêu cầu Sếp Long ===== */
.navdrop{position:relative;display:flex;align-items:stretch}
.navdrop__btn{background:none;border:0;cursor:pointer;font:inherit;gap:5px}
.navdrop__c{width:13px;height:13px;transition:transform .15s ease}
.navdrop__btn[aria-expanded="true"] .navdrop__c{transform:rotate(180deg)}
.navdrop__p{position:fixed;min-width:244px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--pop);padding:8px;z-index:40;display:flex;flex-direction:column}
.navdrop__p[hidden]{display:none}
.navdrop__p a{padding:9px 10px;border-radius:8px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.9375rem;white-space:nowrap}
.navdrop__p a:hover,.navdrop__p a:focus-visible{background:var(--line)}
.navdrop__p a[aria-current="page"]{color:var(--blue)}
.navdrop__all{margin-top:6px;padding-top:12px!important;border-top:1px solid var(--line);border-radius:0;color:var(--blue)}
/* 🔴 KHÔNG đụng overflow của .nav: `overflow-x:auto` chính là thứ giữ thanh nav không đẩy rộng
   trang (bản đầu mở visible → đúng 1101px trang tràn ngang). Panel dùng position:fixed, JS đặt toạ độ. */
/* 🔴 .navdrop nằm cuối tệp nên thắng .hide-m — phải khai lại, nếu không dropdown hiện cả ở 1024/768px */
@media (max-width:1100px){.navdrop.hide-m{display:none}}
/* 🔴 Thêm nhóm hướng dẫn làm bảng Thêm cao 907px trên màn 844px (đo thật) ⇒ phải cuộn cả trang và
   phần đầu bảng bị cắt. Kẹp chiều cao để bảng TỰ CUỘN bên trong. `.topbar` là sticky nên panel
   neo theo khung nhìn, dùng 100vh là đúng. */
/* 🔴 Mép trên THẬT của bảng là 96px chứ không phải 62px như `top` khai (còn dải nav trên đầu trang)
   ⇒ trừ 92px vẫn thò 4px ở 1024×768. Đo thật rồi trừ 112px. */
.menu{max-height:calc(100vh - 112px);overflow-y:auto;overscroll-behavior:contain}
/* nhóm hướng dẫn trong bảng Thêm: hiện ở MỌI khổ mà thanh nav đã giấu mục Hướng dẫn (≤1100px) */
.only-m{display:none}
@media (max-width:1100px){.only-m{display:flex}}


/* ⚠️ ĐÂY LÀ LỚP CSS QUẢN TRỊ THỨ HAI. Lớp thứ nhất (01/10) nằm ngay phía trên.
   Đã thử gộp làm một ngày 02/10 và ĐO RA LÀ KHÔNG AN TOÀN: dời luật xuống dưới
   làm đổi thứ tự cascade ⇒ (a) `.btn--sm` bị `.btn` đè nên nút nhỏ phình ra,
   (b) các `@media` của lớp cũ mất quyền đè nên lưới `.kpis` sai ở khổ hẹp.
   Đã lùi lại và chỉ xoá 7 luật cũ bị phủ HOÀN TOÀN (chứng minh: 2.541 phần tử
   trên 15 tổ hợp trang/nền/khổ màn, computed style lệch 0).
   Muốn gộp thật thì phải viết lại cả hai lớp một lượt, không dời từng luật. */
/* ══════════════ QUẢN TRỊ — làm mới 02/10/2026 ══════════════
   Chế độ Operate: người dùng vào đây để LÀM VIỆC. Mật độ và quét nhanh thắng biểu cảm.
   Mọi luật đều nằm trong phạm vi `.adm` nên trang ngoài không đổi một pixel. */
.adm{
  --a-line:color-mix(in srgb,var(--ink) 11%,transparent);
  --a-line-2:color-mix(in srgb,var(--ink) 17%,transparent);
  --a-soft:color-mix(in srgb,var(--ink) 4%,transparent);
  --a-r:12px; --a-r-sm:8px;
  background:var(--bg);
}
.adm ::selection{background:color-mix(in srgb,var(--blue) 26%,transparent);color:var(--ink)}
.adm input,.adm textarea{caret-color:var(--blue)}
.adm *{scrollbar-width:thin;scrollbar-color:var(--a-line-2) transparent}
.adm *::-webkit-scrollbar{width:10px;height:10px}
.adm *::-webkit-scrollbar-thumb{background:var(--a-line-2);border-radius:99px;border:3px solid transparent;background-clip:content-box}
.adm :focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:var(--a-r-sm)}
.adm .num,.adm .astat__v,.adm .arow__v{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ── khung ── */
.adm__top{position:sticky;top:0;z-index:20;height:56px;padding:0 20px;gap:10px;background:var(--surface);border-bottom:1px solid var(--a-line)}
.adm__top .brand__txt b{font-size:.9375rem;letter-spacing:-.01em}
.adm__top .brand__txt small{font-size:.75rem}
.adm__wrap{grid-template-columns:248px minmax(0,1fr);gap:0;max-width:none;padding:0;align-items:start}
.adm__nav{position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;gap:1px;padding:14px 12px 28px;border-right:1px solid var(--a-line);background:var(--surface)}
.adm__navh{margin:18px 10px 6px;font-size:.6875rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.adm__nav a{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:var(--a-r-sm);font-size:.875rem;font-weight:500;color:var(--ink-2);transition:background .12s ease,color .12s ease}
.adm__nav a:hover{background:var(--a-soft);color:var(--ink)}
.adm__nav a[aria-current]{background:color-mix(in srgb,var(--blue) 13%,transparent);color:var(--blue);font-weight:600}
.anav__i{width:17px;height:17px;flex:none;opacity:.85}
.adm__nav a[aria-current] .anav__i{opacity:1}
.adm__main{padding:26px 28px 56px;max-width:1180px}
.adm__main .page-h{font-size:1.375rem;font-weight:700;letter-spacing:-.02em;margin:0 0 18px}

/* ── dải số liệu: MỘT khối liền, chia ô bằng đường kẻ tóc (không phải 4 thẻ rời) ── */
.astrip{border:1px solid var(--a-line);border-radius:var(--a-r);background:var(--surface);overflow:hidden;margin-bottom:18px}
.astrip__h{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--a-line)}
.astrip__h h2{margin:0;font-size:.875rem;font-weight:600;letter-spacing:-.005em}
.astrip__h .btn{margin-left:auto}
.astrip__g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.astat{padding:15px 16px 16px;min-width:0}
.astat+.astat{border-left:1px solid var(--a-line)}
.astat__h{font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin-bottom:7px}
.astat__v{font-size:1.75rem;line-height:1.1;font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.astat__s{margin-top:5px;font-size:.8125rem;color:var(--ink-2)}

/* ── danh sách nhãn-trái / số-phải: dày, quét nhanh, không phải lưới thẻ ── */
.apanel{border:1px solid var(--a-line);border-radius:var(--a-r);background:var(--surface);margin-bottom:18px}
.apanel__h{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--a-line)}
.apanel__h h2{margin:0;font-size:.875rem;font-weight:600}
.apanel__b{padding:4px 0}
.arows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.arow{display:flex;align-items:baseline;gap:12px;padding:10px 16px;min-width:0}
.arow:nth-child(2n){border-left:1px solid var(--a-line)}
.arow+.arow+.arow{border-top:1px solid var(--a-line)}
.arow__k{font-size:.875rem;color:var(--ink-2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arow__v{margin-left:auto;font-size:1.0625rem;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.arow__v small{font-weight:500;color:var(--ink-3);font-size:.8125rem}

/* ── tiến độ + danh sách việc ── */
.aprog{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--a-line)}
.aprog__t{font-size:.875rem;font-weight:600;white-space:nowrap}
.aprog__bar{flex:1;height:6px;border-radius:99px;background:var(--a-soft);overflow:hidden;min-width:80px}
/* 🔴 <span> mặc định là inline ⇒ `width` KHÔNG áp dụng, thanh luôn rộng 0 dù computed width = 33%.
   Và phải đặt width THẬT ngay, chuyển động chỉ là lớp thêm: người bật "giảm chuyển động" bị
   `animation:none` nên nếu để width:0 rồi animate thì họ không bao giờ thấy thanh. */
.aprog__fill{display:block;height:100%;border-radius:99px;background:var(--blue);width:var(--w);animation:aprogIn .9s cubic-bezier(.16,1,.3,1) .1s both}
@keyframes aprogIn{from{width:0}}
.aprog__n{font-size:.8125rem;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.atasks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.atask{display:flex;gap:11px;padding:13px 16px;min-width:0}
.atask:nth-child(2n){border-left:1px solid var(--a-line)}
.atask+.atask+.atask{border-top:1px solid var(--a-line)}
.atask__i{width:17px;height:17px;flex:none;margin-top:2px;color:var(--ink-3)}
.atask.is-done .atask__i{color:var(--green)}
.atask__b{min-width:0}
.atask__t{font-size:.875rem;font-weight:600;color:var(--ink);text-decoration:none;display:inline-block}
.atask__t:hover{color:var(--blue)}
.atask.is-done .atask__t{color:var(--ink-2);font-weight:500}
.atask__d{margin-top:3px;font-size:.8125rem;line-height:1.5;color:var(--ink-3)}

/* ── danh sách việc ngoài trang ── */
.asteps{margin:0;padding:6px 16px 14px 34px;color:var(--ink-2);font-size:.875rem;line-height:1.75}
.asteps code{background:var(--a-soft);padding:1px 6px;border-radius:5px;font-size:.8125rem}
.alinks{display:flex;flex-wrap:wrap;gap:16px;padding:0 16px 14px;font-size:.875rem;font-weight:600}

@media (max-width:1100px){
  .adm__wrap{grid-template-columns:1fr}
  .adm__nav{position:static;height:auto;flex-direction:row;flex-wrap:wrap;overflow:visible;border-right:0;border-bottom:1px solid var(--a-line);padding:10px 12px}
  /* 🔴 Lớp CSS admin cũ (01/10) đặt `.adm__navh{display:none}` ở khổ hẹp ⇒ trên điện thoại menu
     mất hết tên nhóm, 17 mục nằm thành một mảng phẳng không biết đâu là đâu. Khai lại rõ ràng. */
  /* 🔴 Luật cũ là `.adm__nav .adm__navh` (độ ưu tiên 0,2,0) nên thắng `.adm__navh` (0,1,0)
     bất kể thứ tự — lần vá đầu của em vô hiệu. Phải nâng đúng mức: 0,3,0. */
  .adm .adm__nav .adm__navh{display:block;width:100%;margin:10px 4px 2px}
  .adm__main{padding:20px 16px 48px}
  .astrip__g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .astat:nth-child(3){border-left:0}
  .astat:nth-child(n+3){border-top:1px solid var(--a-line)}
}
@media (max-width:640px){
  .astrip__g,.arows,.atasks{grid-template-columns:1fr}
  .astat+.astat,.arow:nth-child(2n),.atask:nth-child(2n){border-left:0}
  .astat+.astat,.arow+.arow,.atask+.atask{border-top:1px solid var(--a-line)}
  .adm__main .page-h{font-size:1.25rem}
  /* 🔴 đo thật ở 390px: hàng tiến độ không xuống dòng ⇒ thanh tràn tới 405px và số tới 438px */
  .aprog{flex-wrap:wrap}
  .aprog__t{width:100%}
  .aprog__bar{min-width:0}
}

/* Các trang quản trị khác vẫn dùng lưới `kpis` — khoác cùng ngôn ngữ để toàn bộ admin đồng bộ,
   không phải sửa tay từng trang. Chỉ trong phạm vi `.adm`. */
.adm .kpis{gap:0;border:1px solid var(--a-line);border-radius:var(--a-r);background:var(--surface);overflow:hidden}
.adm .kpi{border:0;border-radius:0;background:transparent;padding:15px 16px 16px;box-shadow:none}
.adm .kpi+.kpi{border-left:1px solid var(--a-line)}
.adm .kpi__h{font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.adm .kpi__v{font-size:1.625rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.adm .kpi__s{font-size:.8125rem;color:var(--ink-2)}
.adm .panel{border:1px solid var(--a-line);border-radius:var(--a-r);box-shadow:none}
.adm .panel__h{font-size:.875rem;font-weight:600}
.adm .btn{border-radius:var(--a-r-sm)}
.adm .input,.adm__f textarea{border-radius:var(--a-r-sm);border-color:var(--a-line-2)}
@media (max-width:640px){.adm .kpi+.kpi{border-left:0;border-top:1px solid var(--a-line)}}

/* ---- Menu điều hướng: hàng kéo thả ---- */
.amenu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.amenu__it{display:grid;grid-template-columns:22px minmax(0,1.3fr) minmax(0,1.5fr) minmax(0,.9fr) 86px auto;
  gap:10px;align-items:end;padding:10px 12px;border:1px solid var(--a-line);border-radius:var(--a-r-sm);background:var(--surface)}
.amenu__it--con{grid-template-columns:22px minmax(0,1.3fr) minmax(0,2.4fr) 86px auto}
.amenu__it.is-keo{opacity:.45;border-style:dashed}
.amenu__grip{cursor:grab;color:var(--ink-3);font-size:1.1rem;line-height:1;padding-bottom:9px;user-select:none}
.amenu__grip:active{cursor:grabbing}
.amenu__f{display:flex;flex-direction:column;gap:4px;min-width:0}
.amenu__f>span{font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.amenu__f .input{width:100%;min-width:0}
.amenu__del{align-self:end}
/* Dưới 860px xếp dọc: lưới 6 cột ở điện thoại sẽ ép từng ô xuống vài chục pixel,
   chữ trong ô bị cắt mà phép đo tràn KHÔNG thấy (ô vẫn nằm trong khung). */
@media (max-width:860px){
  .amenu__it,.amenu__it--con{grid-template-columns:22px minmax(0,1fr);gap:8px 10px}
  .amenu__grip{grid-row:span 5;padding-bottom:0;align-self:center}
  .amenu__del{justify-self:start}
}

/* 🔴 Đo thật 02/10/2026 trên 7 khổ màn × 17 trang quản trị: ở 320px thanh trên TRÀN
   26px ở CẢ 17 trang (scrollX=26, nút "Đăng xuất" chạm 346px trong khung 320px).
   Gốc: `.adm__top` là flex một hàng chứa thương hiệu + "Xem trang" + "Đăng xuất";
   phần tử flex mặc định `min-width:auto` nên KHÔNG chịu co dưới kích thước nội dung.
   Media query nhỏ nhất của admin trước đây là 640px, không ai lo khoảng 320-380px.
   Cách vá: `min-width:0` cho khối co được + ẩn dòng phụ + siết lề, KHÔNG ẩn nút
   chức năng nào (đăng xuất là nút phải luôn chạm tới được). */
@media (max-width:420px){
  .adm__top{padding:0 12px;gap:8px}
  /* 🔴 `.brand` mặc định `flex-shrink:0` nên nó TỪ CHỐI co — đây mới là chỗ chặn thật,
     chỉ đặt `min-width:0` không đủ. Đo ở 320px: khung trong 296px mà nội dung cần 322px
     (thương hiệu 112 + "Xem trang" 98 + "Đăng xuất" 96 + 2 khoảng cách 8). */
  .adm__top .brand{flex-shrink:1;min-width:0;overflow:hidden}
  .adm__top .brand__txt{min-width:0}
  .adm__top .brand__txt b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .adm__top .brand__txt small{display:none}
  .adm__top .btn--sm{padding-left:10px;padding-right:10px;min-width:0}
}
/* Dưới 360px thì bỏ hẳn chữ cạnh dấu hiệu thương hiệu: dấu hiệu vẫn là liên kết về
   trang tổng quan nên không mất chức năng, mà hai nút thao tác được giữ nguyên vẹn. */
@media (max-width:360px){
  .adm__top .brand__txt{display:none}
  .adm__top{padding:0 10px}
}