/* =====================================================================
   Thống kê mạng lưới giáo dục tỉnh Tuyên Quang
   Hệ thống thiết kế — nền giấy kem, nhấn cam đất, chữ Việt đủ dấu
   ===================================================================== */

:root{
  /* Nền kem ấm, nhấn coral đất nung — cùng bộ với hệ thống Chuyển đổi số của Sở.
     Tỷ lệ 60/30/10: 60% nền kem, 30% chữ và viền trung tính, 10% coral điểm xuyết.
     Không dùng xanh dương ở bất cứ đâu, kể cả màu thông tin. */
  --bg:#F0EEE6; --card:#FFFFFF; --ink:#1F1E1D; --muted:#655F59; --line:#E4E0D6;
  --accent:#D97757;      /* coral trang trí — không phủ mảng lớn */
  --accent-ink:#9C4420;  /* chữ và liên kết, đạt 4,5:1 trên nền kem lẫn nền trắng */
  --accent-nut:#A84E24;  /* nền nút chính — coral trang trí kèm chữ trắng chỉ đạt 3:1 */
  --accent-soft:#F7E9E1;
  --ok:#2F6B3A;  --ok-soft:#E3F0E4;
  --warn:#8A5A12; --warn-soft:#FBEFD3;
  --bad:#A23B2A; --bad-soft:#F7DED9;
  --info:#6B6862; --info-soft:#ECE9E0;
  --code-bg:#ECE9E0; --chim:#FBFAF6;
  --shadow:0 1px 2px rgba(31,30,29,.04);
  --shadow-lg:0 4px 16px rgba(31,30,28,.10);
  --r:12px;      /* thẻ, bảng, khối nội dung */
  --r-nho:7px;   /* nút, ô nhập, thứ nhỏ nằm trong thẻ */
  --w:1280px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1A1815; --card:#232019; --ink:#EDE9E0; --muted:#A8A199; --line:#38332C;
    --accent:#E0906D; --accent-ink:#F0B294; --accent-nut:#B0552A; --accent-soft:#3A251A;
    --ok:#7FC78F; --ok-soft:#1C3320; --warn:#DFB662; --warn-soft:#382E15;
    --bad:#E0928A; --bad-soft:#3B211F; --info:#B6AEA4; --info-soft:#2C2822;
    --code-bg:#2B2721; --chim:#2A2620; --shadow:none; --shadow-lg:0 4px 16px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#1A1815; --card:#232019; --ink:#EDE9E0; --muted:#A8A199; --line:#38332C;
  --accent:#E0906D; --accent-ink:#F0B294; --accent-nut:#B0552A; --accent-soft:#3A251A;
  --ok:#7FC78F; --ok-soft:#1C3320; --warn:#DFB662; --warn-soft:#382E15;
  --bad:#E0928A; --bad-soft:#3B211F; --info:#B6AEA4; --info-soft:#2C2822;
  --code-bg:#2B2721; --chim:#2A2620; --shadow:none; --shadow-lg:0 4px 16px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  border-top:3px solid var(--accent);
  font-family:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16.5px; line-height:1.55; -webkit-font-smoothing:antialiased;
  /* chân trang luôn nằm dưới cùng, kể cả khi nội dung ngắn */
  min-height:100vh; display:flex; flex-direction:column;
}
/* Tiêu đề chữ có chân. Dùng Lora chứ không Georgia: Georgia thiếu glyph cho
   chữ Việt hai dấu nên "lần đầu", "trường" bị vỡ dấu. Cambria đỡ cho máy có Office. */
h1,h2,h3,h4,.ttl{
  font-family:Lora,Cambria,"Times New Roman",Georgia,serif;
  line-height:1.3; margin:0; text-wrap:balance; letter-spacing:-.2px;
}
th{font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;margin:0}
h1{font-size:1.32rem;font-weight:600} h2{font-size:1.05rem;font-weight:600}
h3{font-size:.96rem;font-weight:600}
/* Nhấn trong câu: 600, không dùng 700 mặc định của trình duyệt */
b,strong{font-weight:600}
a{color:var(--accent-ink);text-underline-offset:2px}
a:hover{color:var(--accent)}
.mono,code,.num{font-family:"IBM Plex Mono",Consolas,ui-monospace,monospace;font-variant-numeric:tabular-nums}
code{background:var(--code-bg);padding:.08em .35em;border-radius:4px;font-size:.88em}
hr{border:0;border-top:1px solid var(--line);margin:1.4rem 0}

/* ---------- khung trang ---------- */
.wrap{max-width:var(--w);margin:0 auto;padding:0 1rem}
.wrap.hep{max-width:960px}
.top{
  background:var(--card);border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;box-shadow:var(--shadow);
}
.top .wrap{display:flex;align-items:center;gap:.9rem;min-height:58px;flex-wrap:wrap}
/* Tiêu đề chính: in hoa, đậm, giãn chữ và bóp ngang — lối đặt tiêu đề của bảng
   điều phối S22u. Dòng dưới để chữ thường: câu dài mà in hoa thì dấu tiếng Việt
   chồng lên nhau, đọc rất mệt. */
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit;
  font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;line-height:1.1}
.brand .ten-ht{font-size:1.06rem;font-weight:700;letter-spacing:.035em;
  text-transform:uppercase;font-stretch:95%;white-space:nowrap;color:var(--ink)}
.brand .dau{
  width:32px;height:32px;border-radius:var(--r-nho);background:var(--accent-nut);color:#fff;
  display:grid;place-items:center;font-size:.82rem;font-weight:600;flex:none;letter-spacing:.02em
}
.brand small{display:block;font-weight:500;color:var(--muted);font-size:.735rem;
  letter-spacing:.005em;text-transform:none;margin-top:.12rem;white-space:nowrap}
.nav{display:flex;gap:.15rem;margin-left:auto;flex-wrap:wrap;align-items:center}
.nav a{
  padding:.42rem .7rem;border-radius:7px;text-decoration:none;color:var(--muted);
  font-size:.9rem;font-weight:500;white-space:nowrap
}
.nav a:hover{background:var(--accent-soft);color:var(--accent-ink)}
.nav a.on{background:var(--accent-nut);color:#fff}
main{padding:1rem 0 1.6rem;flex:1 0 auto}

/* ---------- thẻ ---------- */
.the{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:.8rem .95rem;margin-bottom:.7rem}
.the>h2,.the>h3{margin-bottom:.45rem}
.the-dau{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:.55rem}
.luoi{display:grid;gap:.7rem}
.luoi.c2{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.luoi.c3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.luoi.c4{grid-template-columns:repeat(auto-fit,minmax(195px,1fr))}

/* ---------- ô số liệu tổng quan ---------- */
.o-so{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.6rem .75rem}
.o-so b{display:block;font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;font-size:.84rem;letter-spacing:0;
  color:var(--muted);font-weight:500;margin-bottom:.28rem;line-height:1.25}
.o-so .v{font-family:"IBM Plex Mono",monospace;font-size:1.4rem;font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.o-so .p{font-size:.83rem;color:var(--muted);margin-top:.15rem;line-height:1.3}
.o-so.vach{border-left:3px solid var(--accent)}
.o-so.tot{border-left:3px solid var(--ok)} .o-so.canh{border-left:3px solid var(--warn)}
.o-so.xau{border-left:3px solid var(--bad)}

/* ---------- nhãn trạng thái ---------- */
.nhan{display:inline-block;font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;font-size:.8rem;font-weight:500;
  letter-spacing:0;padding:.16em .62em;border-radius:999px;white-space:nowrap;vertical-align:middle}
.n-ok{background:var(--ok-soft);color:var(--ok)}
.n-canh{background:var(--warn-soft);color:var(--warn)}
.n-xau{background:var(--bad-soft);color:var(--bad)}
.n-nhan{background:var(--accent-soft);color:var(--accent-ink)}
.n-tin{background:var(--info-soft);color:var(--info)}
.n-xam{background:var(--code-bg);color:var(--muted)}

/* ---------- nút ---------- */
.nut{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;font-size:.9rem;font-weight:500;
  padding:.5rem .95rem;border-radius:var(--r-nho);border:1px solid var(--line);
  background:var(--card);color:var(--ink);cursor:pointer;text-decoration:none;
  transition:background .12s,border-color .12s}
.nut:hover{border-color:var(--accent);color:var(--accent-ink)}
.nut.chinh{background:var(--accent-nut);border-color:var(--accent-nut);color:#fff;font-weight:600}
.nut.chinh:hover{background:#7A3218;border-color:#7A3218;color:#fff}
.nut.nho{font-size:.8rem;padding:.32rem .6rem}
.nut.nguy{color:var(--bad);border-color:var(--bad)}
.nut:disabled{opacity:.5;cursor:not-allowed}
.nhom-nut{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}

/* ---------- biểu mẫu ---------- */
label{font-size:.9rem;font-weight:500;color:var(--muted);font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;display:block;margin-bottom:.22rem}
input[type=text],input[type=number],input[type=password],input[type=date],input[type=search],select,textarea{
  width:100%;padding:.46rem .6rem;border:1px solid var(--line);border-radius:7px;
  background:var(--card);color:var(--ink);font-family:inherit;font-size:.95rem}
input[type=number],.num-in{font-family:"IBM Plex Mono",monospace;text-align:right;font-variant-numeric:tabular-nums}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:var(--accent)}
input[readonly]{background:var(--code-bg);color:var(--muted)}
.hang{display:flex;gap:.7rem;flex-wrap:wrap;align-items:flex-end}
.hang>div{flex:1 1 170px;min-width:0}
.goi-y{font-size:.86rem;color:var(--muted);margin-top:.22rem;line-height:1.4}

/* ---------- bảng ----------
   Tiếng Việt có dấu nên tiêu đề cột KHÔNG viết hoa toàn bộ và không giãn chữ:
   viết hoa hết làm dấu chồng lên nhau, đọc rất mệt. */
.bang-cuon{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:1rem;background:var(--card)}
th,td{padding:.5rem .65rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:.84rem;letter-spacing:0;color:var(--muted);font-weight:600;line-height:1.3;
  background:var(--chim);position:sticky;top:0;z-index:2;white-space:nowrap}
thead tr:nth-child(2) th{top:33px}
tbody tr:hover{background:var(--accent-soft)}
tbody tr:hover td{background:transparent}
td.num,th.num{text-align:right;font-family:"IBM Plex Mono",monospace;
  font-variant-numeric:tabular-nums;font-size:.97rem;font-weight:400}
tr.tong{font-weight:600;background:var(--code-bg)}
tr.tong td{border-top:2px solid var(--line)}
td.giua,th.giua{text-align:center}
.bang-gon th,.bang-gon td{padding:.36rem .5rem;font-size:.95rem}
.bang-gon td.num{font-size:.93rem}
table .dinh-trai{position:sticky;left:0;background:var(--card);z-index:1;box-shadow:1px 0 0 var(--line)}
th.dinh-trai{z-index:3;background:var(--bg)}

/* ---------- hộp thông báo ---------- */
.bao{border-left:3px solid var(--accent);background:var(--card);padding:.6rem .85rem;
  border:1px solid var(--line);border-left-width:3px;border-radius:0 var(--r) var(--r) 0;
  margin:.6rem 0;font-size:.9rem}
.bao.ok{border-color:var(--ok)} .bao.canh{border-color:var(--warn)}
.bao.xau{border-color:var(--bad)} .bao.tin{border-color:var(--info)}
.bao b{font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif}

/* ---------- thanh tiến độ ---------- */
.tien{height:7px;background:var(--code-bg);border-radius:999px;overflow:hidden;min-width:70px}
.tien i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .3s}
.tien.xong i{background:var(--ok)}
.tien.it i{background:var(--bad)}

/* ---------- tiện ích ---------- */
.mo{color:var(--muted)} .nho{font-size:.92rem} .rat-nho{font-size:.85rem;line-height:1.4}
.dam{font-weight:600} .giua-td{text-align:center}
.hien-flex{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.day{width:100%} .phai{margin-left:auto} .khong-xuong{white-space:nowrap}
.cach-tren{margin-top:1rem} .cach-duoi{margin-bottom:1rem}
.an{display:none!important}
.tach{border-top:1px solid var(--line);margin:1.1rem 0;padding-top:1.1rem}
.mo-ta{color:var(--muted);font-size:.86rem;max-width:70ch}
.chu-thich{font-size:.85rem;color:var(--muted);line-height:1.5}

/* ---------- danh sách bước (hướng dẫn) ---------- */
.buoc{counter-reset:b;list-style:none;padding:0;margin:0}
.buoc li{counter-increment:b;position:relative;padding:.1rem 0 .9rem 2.3rem;border-left:2px solid var(--line);margin-left:.85rem}
.buoc li:last-child{border-left-color:transparent;padding-bottom:0}
.buoc li::before{content:counter(b);position:absolute;left:-.85rem;top:0;width:1.7rem;height:1.7rem;
  border-radius:50%;background:var(--accent-nut);color:#fff;display:grid;place-items:center;
  font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;font-size:.8rem;font-weight:600}
.buoc li b{display:block;font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;margin-bottom:.15rem}

/* ---------- tour hướng dẫn ---------- */
#tour-nen{position:fixed;inset:0;background:rgba(20,18,16,.55);z-index:900;backdrop-filter:blur(1px)}
#tour-den{position:absolute;border-radius:10px;box-shadow:0 0 0 9999px rgba(20,18,16,.55),0 0 0 3px var(--accent);
  transition:all .28s cubic-bezier(.4,0,.2,1);pointer-events:none}
#tour-hop{position:fixed;z-index:920;background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--shadow-lg);padding:1rem 1.1rem;max-width:370px;font-size:.93rem}
#tour-hop h4{font-size:1rem;margin-bottom:.35rem;color:var(--accent-ink)}
#tour-hop .dem{font-size:.75rem;color:var(--muted);font-family:"IBM Plex Mono",monospace}
#tour-hop .chan{display:flex;gap:.5rem;align-items:center;margin-top:.85rem}
#tour-hop p{margin:.3rem 0}

/* ---------- điện thoại ---------- */
@media (max-width:760px){
  body{font-size:16px}
  .top .wrap{min-height:52px}
  .nav{width:100%;overflow-x:auto;padding-bottom:.3rem;margin-left:0}
  .nav a{font-size:.85rem;padding:.35rem .55rem}
  .brand small{display:none}
  main{padding:1rem 0 3rem}
  .the{padding:.85rem .9rem}
  .o-so .v{font-size:1.45rem}
  #tour-hop{max-width:calc(100vw - 24px);left:12px!important;right:12px}
}

/* ---------- in ấn ---------- */
@media print{
  .top,.nav,.nhom-nut,.khong-in,#tour-nen,#tour-hop{display:none!important}
  body{background:#fff;font-size:11pt}
  .the,.bang-cuon{border:none;box-shadow:none;padding:0}
  table{font-size:9.5pt} th{background:#eee!important;color:#000}
  .wrap{max-width:100%;padding:0}
  a{color:#000;text-decoration:none}
}


/* ---------- ô tìm nhanh trên thanh trên ---------- */
.o-tim-nhanh{position:relative;flex:1 1 260px;max-width:420px;min-width:180px}
.o-tim-nhanh input{width:100%;padding:.42rem 3.6rem .42rem .8rem;font-size:.95rem;
  border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.o-tim-nhanh input:focus{background:var(--card)}
.phim-tat{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);pointer-events:none;
  font-family:"IBM Plex Mono",monospace;font-size:.7rem;color:var(--muted);
  border:1px solid var(--line);border-radius:4px;padding:.05em .35em;background:var(--card)}
.o-tim-nhanh input:focus~.phim-tat{display:none}
#kq-tim{position:absolute;left:0;right:0;top:calc(100% + .4rem);z-index:60;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);max-height:min(70vh,520px);overflow-y:auto;padding:.3rem}
#kq-tim .nhom-tim{font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;font-size:.75rem;font-weight:500;
  color:var(--muted);padding:.45rem .6rem .2rem}
#kq-tim a{display:block;padding:.4rem .6rem;border-radius:7px;text-decoration:none;color:var(--ink)}
#kq-tim a:hover,#kq-tim a.chon{background:var(--accent-soft)}
#kq-tim a b{display:block;font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;font-size:.94rem;font-weight:500;
  line-height:1.3}
#kq-tim a span{display:block;font-size:.83rem;color:var(--muted);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#kq-tim .khong-co{padding:.9rem .7rem;color:var(--muted);font-size:.92rem}
#kq-tim .tin-tim{padding:.4rem .6rem}
#kq-tim .tin-tim b{display:block;font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;font-size:.92rem}
#kq-tim .tin-tim span{display:block;font-size:.83rem;color:var(--muted);line-height:1.35}
@media (max-width:900px){ .o-tim-nhanh{order:9;max-width:none;flex-basis:100%} .phim-tat{display:none} }


/* ---------- chân trang ---------- */
.chan-trang{flex:none;margin-top:1.5rem;padding:1rem 0 1.4rem;
  border-top:1px solid var(--line);background:var(--card);font-size:.9rem;color:var(--muted)}
.chan-cot{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;justify-content:space-between}
.chan-cot b{color:var(--ink);font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif}
.chan-cot>div:last-child{display:flex;gap:.5rem;flex-wrap:wrap}


/* ---------- khay thông báo nổi ----------
   Nổi ở góc dưới bên phải: không đè lên tiêu đề bảng đang cố định phía trên,
   cũng không đẩy nội dung. Hộp mới nhất nằm dưới cùng, ngay tầm mắt.
   Nền lấy màu mặc định của trình duyệt (Canvas/CanvasText) chứ không lấy màu kem
   của giao diện — nhờ vậy thông báo tách hẳn khỏi nền trang, đọc là thấy ngay,
   và tự đúng màu khi máy đang ở chế độ tối. */
#khay-bao{position:fixed;bottom:.9rem;right:.9rem;z-index:80;
  display:flex;flex-direction:column;gap:.5rem;max-width:min(420px,calc(100vw - 1.8rem));
  pointer-events:none}
.bao-noi{pointer-events:auto;background:Canvas;color:CanvasText;border:1px solid var(--line);
  border-left:3px solid var(--info);border-radius:var(--r);box-shadow:var(--shadow-lg);
  padding:.65rem .85rem;font-size:.94rem;line-height:1.45;
  display:flex;gap:.6rem;align-items:flex-start;
  animation:hien-bao .22s cubic-bezier(.2,.8,.3,1)}
.bao-noi.ok{border-left-color:var(--ok)}
.bao-noi.canh{border-left-color:var(--warn)}
.bao-noi.xau{border-left-color:var(--bad)}
.bao-noi .dau-bao{flex:none;font-weight:600;font-size:1rem;line-height:1.3}
.bao-noi.ok .dau-bao{color:var(--ok)} .bao-noi.canh .dau-bao{color:var(--warn)}
.bao-noi.xau .dau-bao{color:var(--bad)} .bao-noi.tin .dau-bao{color:var(--info)}
.bao-noi .nd-bao{flex:1 1 auto;min-width:0}
.bao-noi .dong-bao{flex:none;background:none;border:0;color:var(--muted);cursor:pointer;
  font-size:1.05rem;line-height:1;padding:.1rem .2rem;border-radius:5px}
.bao-noi .dong-bao:hover{background:var(--code-bg);color:var(--ink)}
.bao-noi.tat{animation:tat-bao .2s forwards}
/* Trượt lên từ mép dưới — cùng hướng với chỗ hộp đứng, đỡ giật mắt */
@keyframes hien-bao{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes tat-bao{to{opacity:0;transform:translateY(14px);margin-bottom:-.5rem;
  max-height:0;padding-top:0;padding-bottom:0}}
@media (max-width:760px){ #khay-bao{left:.6rem;right:.6rem;max-width:none;bottom:.6rem} }
@media print{ #khay-bao{display:none} }


/* =====================================================================
   Bộ phận gọn — thay cho lối xếp nhiều thẻ lồng nhau.
   Lấy theo dashboard Vé247: chỉ số để mảnh trên đầu, dữ liệu dày đặc,
   trạng thái đọc bằng dải màu chứ không bằng thêm một thẻ nữa.
   ===================================================================== */

/* ---------- dải chỉ số mảnh, thay cho hàng ô số liệu to ---------- */
.dai-so{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.dai-so .o{display:flex;flex-direction:column;gap:.1rem;padding:.4rem .7rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);min-width:96px}
.dai-so .o b{font-family:"IBM Plex Mono",monospace;font-size:1.15rem;font-weight:600;
  line-height:1.1;font-variant-numeric:tabular-nums}
.dai-so .o span{font-size:.76rem;color:var(--muted);line-height:1.25;white-space:nowrap}
.dai-so .o.vach{border-bottom:2px solid var(--accent)}
.dai-so .o.tot b{color:var(--ok)} .dai-so .o.canh b{color:var(--warn)}
.dai-so .o.xau b{color:var(--bad)}
.dai-so .ngan{align-self:stretch;width:1px;background:var(--line);margin:0 .3rem}

/* ---------- chip lọc kèm số đếm ---------- */
.hang-chip{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center;margin-bottom:.8rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .7rem;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--muted);text-decoration:none;
  font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;font-size:.85rem;font-weight:500;white-space:nowrap}
.chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.chip b{font-family:"IBM Plex Mono",monospace;font-size:.8rem;font-weight:600;color:var(--ink)}
.chip.dang{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-ink)}
.chip.dang b{color:var(--accent-ink)}
.chip.tot b{color:var(--ok)} .chip.canh b{color:var(--warn)} .chip.xau b{color:var(--bad)}

/* ---------- hàng dữ liệu có dải màu trạng thái ---------- */
.hang-dl{display:flex;align-items:center;gap:.7rem;padding:.5rem .8rem;background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--line);border-radius:var(--r);
  margin-bottom:.35rem;text-decoration:none;color:inherit}
.hang-dl:hover{border-color:var(--accent);color:inherit}
.hang-dl.tot{border-left-color:var(--ok)} .hang-dl.canh{border-left-color:var(--warn)}
.hang-dl.xau{border-left-color:var(--bad)} .hang-dl.tin{border-left-color:var(--info)}
.hang-dl .nd{flex:1 1 auto;min-width:0}
.hang-dl .nd b{font-family:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;font-weight:600;font-size:.95rem}
.hang-dl .nd span{display:block;font-size:.85rem;color:var(--muted);line-height:1.35}
.hang-dl .cuoi{flex:none;display:flex;align-items:center;gap:.6rem}

/* ---------- menu xổ trên thanh điều hướng ---------- */
.menu-xo{position:relative}
.menu-xo summary{list-style:none;cursor:pointer;padding:.42rem .7rem;border-radius:7px;
  color:var(--muted);font-size:.9rem;font-weight:500;white-space:nowrap}
.menu-xo summary::-webkit-details-marker{display:none}
.menu-xo summary::after{content:" ▾";font-size:.75em}
.menu-xo summary:hover{background:var(--accent-soft);color:var(--accent-ink)}
.menu-xo summary.on{background:var(--accent-nut);color:#fff}
.hop-xo{position:absolute;right:0;top:calc(100% + .35rem);z-index:50;min-width:220px;padding:.3rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg)}
.hop-xo a{display:block;padding:.42rem .6rem;border-radius:6px;text-decoration:none;
  color:var(--ink);font-size:.9rem}
.hop-xo a:hover{background:var(--accent-soft);color:var(--accent-ink)}
.hop-xo a.on{background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.hop-xo a.thoat{border-top:1px solid var(--line);margin-top:.2rem;padding-top:.5rem;color:var(--bad)}

/* Dòng cuối chân trang: chú thích bên trái, số hiệu bản nép góc phải */
.chan-cuoi{display:flex;gap:.8rem;align-items:baseline;justify-content:space-between;
  flex-wrap:wrap;margin:.6rem 0 0}
.chan-cuoi>span:first-child{flex:1 1 420px;min-width:0}
.chan-cuoi .so-hieu{flex:none;font-family:"IBM Plex Mono",monospace;font-size:.82rem;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;
  padding:.05em .55em;background:var(--card);cursor:help}

/* Trang của trường trực thuộc Sở: phiếu dọc nên dễ phình. Ô nhập vừa phải,
   bảng khối lớp chặt lại để cả phiếu gọn trong một màn hình. */
#b3-lop-hs .hang{gap:.6rem}
#b3-lop-hs .hang>div{flex:1 1 150px;max-width:230px}
#b3-lop-hs label{font-size:.85rem;margin-bottom:.15rem}
#b3-lop-hs .goi-y{font-size:.78rem;margin-top:.1rem}
#b3-lop-hs input.num-in{padding:.35rem .5rem;font-size:.95rem}
#bang-khoi th,#bang-khoi td{padding:.25rem .5rem}
#bang-khoi td:first-child{width:40%}
#bang-khoi input.num-in{max-width:170px;margin-left:auto;display:block;
  padding:.28rem .45rem;font-size:.95rem}
#bang-khoi{max-width:640px}

/* Bộ lọc một hàng: nhãn nằm ngay trong ô chọn nên không tốn thêm dòng.
   Ô nào đang lọc thì viền và chữ đổi màu, nhìn là biết đang xem lát cắt nào. */
.loc-hang{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.loc-hang select,.loc-hang input[type=search]{width:auto;min-width:150px;
  padding:.32rem .5rem;font-size:.88rem;border-radius:var(--r-nho)}
.loc-hang input[type=search]{flex:1 1 200px;max-width:340px}
.loc-hang .bo-loc{font-size:.85rem;color:var(--accent-ink);white-space:nowrap}
@media (max-width:700px){ .loc-hang select,.loc-hang input[type=search]{flex:1 1 100%;max-width:none} }

/* Vạch ngăn nhóm cột "Phương án 158" với nhóm số liệu đang thu — hai nguồn số
   khác hẳn nhau, đặt cạnh nhau mà không có vạch thì rất dễ đọc nhầm sang cột bên. */
.bang-gon .vach-pa{border-right:2px solid var(--line)}

/* ---------- thanh tiến độ trong bảng ----------
   Dùng chung cho mọi bảng có cột tiến độ: xanh là xong, cam là đang làm,
   đỏ là chưa động đến — nhìn màu biết ngay, không phải đọc số. */
.o-thanh{display:flex;align-items:center;gap:.5rem}
.o-thanh b{font-family:"IBM Plex Mono",monospace;font-size:.85rem;font-weight:600;
  min-width:3em;text-align:right}
.thanh-sx{flex:1;height:8px;background:var(--code-bg);border-radius:999px;overflow:hidden;min-width:80px}
.thanh-sx i{display:block;height:100%;border-radius:999px;background:var(--accent)}
.thanh-sx.xong i{background:var(--ok)}
.thanh-sx.chua i{background:var(--bad)}

/* Ô tìm nhỏ đặt ngay trên đầu bảng, lọc tại chỗ không tải lại trang */
.o-tim-bang{width:auto;min-width:180px;max-width:300px;padding:.32rem .5rem;
  font-size:.88rem;border-radius:var(--r-nho)}

/* Số người đang truy cập, đứng cạnh số hiệu bản ở chân trang.
   Chấm xanh nhấp nháy chậm cho biết con số là thật, đang sống. */
.dang-online{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;
  font-size:.85rem;color:var(--muted)}
.dang-online b{font-family:"IBM Plex Mono",monospace;font-weight:600;color:var(--ink)}
.dang-online i{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none;
  animation:tho-online 2.4s ease-in-out infinite}
@keyframes tho-online{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){ .dang-online i{animation:none} }

/* Nút có display:inline-flex nên thắng cả thuộc tính hidden của HTML — phải nói rõ,
   nếu không nút "Xoá" vẫn hiện lúc đang thêm mới. */
[hidden]{display:none !important}