/* ============================================================
   919 WORKSPACE — bộ giao diện (21/10/2026)
   Màu nhận diện lấy từ khuôn LIFUS (xanh VNA + vàng); bố cục, chữ, thành phần viết mới.
   Không dùng JS. Chữ: phông hệ thống (Segoe UI / SF / Roboto) — không cần internet.
   ============================================================ */
:root{
  --vna:#006176; --vna-2:#0B7A93; --vna-3:#E6F2F5; --vna-4:#F2F8FA;
  --gold:#D59E2A; --gold-2:#FBF3E1;
  --bg:#F4F6F8; --panel:#FFFFFF; --panel-2:#F8FAFB;
  --line:#E3E8EC; --line-2:#EEF1F4;
  --ink:#14232B; --ink-2:#44555F; --ink-3:#5F6F79; --ink-4:#A5B1B9;
  --ok:#17703F; --ok-bg:#E8F6EE; --warn:#8A5300; --warn-bg:#FFF4DF; --bad:#C62B30; --bad-bg:#FCEBEB; --info:#0B7A93; --info-bg:#E6F2F5;
  --sb:236px; --tb:56px; --r:8px; --r-s:6px; --nav-day:60px;
  /* thang khoang cach dung chung (Carbon spacing; giao dien goi B 01/11/2026) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  --sh:0 1px 2px rgba(20,35,43,.05),0 1px 3px rgba(20,35,43,.04);
  --sh-2:0 8px 24px rgba(20,35,43,.12);
  --font:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* Inter 4.1 (SIL Open Font License, xem fonts/LICENSE-Inter.txt) — mot tep bien thien, moi do dam 100-900, nhung san, khong can internet */
@font-face{font-family:"Inter";src:url("fonts/InterVariable.2bf3d951bf9d.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-text-size-adjust:100%}
body{font-family:var(--font);background:var(--bg);color:var(--ink);line-height:1.5;min-height:100vh;font-feature-settings:"cv11","ss03";-webkit-font-smoothing:antialiased}
a{color:var(--vna);text-decoration:none}a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-4px}
.ic.sm{width:15px;height:15px;vertical-align:-3px}

/* ---------- khung: thanh trái + thanh trên + nội dung ---------- */
.app{display:grid;grid-template-columns:var(--sb) 1fr;min-height:100vh}
.sb{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.sb .brand{display:flex;align-items:center;gap:10px;padding:16px 18px 14px;border-bottom:1px solid var(--line-2)}
.sb .brand .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--vna) 0%,var(--vna-2) 100%);display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px;letter-spacing:.02em;flex:none}
.sb .brand .logo:after{content:"";position:absolute}
.sb .brand b{display:block;font-size:14px;font-weight:700;letter-spacing:.01em;color:var(--ink)}
.sb .brand span{display:block;font-size:11.5px;color:var(--ink-3)}
.sb nav{padding:10px 10px 6px;flex:1}
.sb .grp{font-size:12px;font-weight:600;color:var(--ink-3);padding:16px 10px 5px}
.sb a.it{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-s);color:var(--ink-2);font-size:13.5px;font-weight:500;text-decoration:none;transition:background .12s}
.sb a.it:hover{background:var(--panel-2);color:var(--ink)}
.sb a.it.on{background:var(--vna-3);color:var(--vna);font-weight:600}
.sb a.it .ic{color:var(--ink-3)}.sb a.it.on .ic{color:var(--vna)}
.sb a.it .cnt{margin-left:auto;font-size:11px;font-weight:700;color:var(--ink-3);background:var(--line-2);border-radius:10px;padding:1px 7px;font-variant-numeric:tabular-nums}
.sb a.it .cnt.hot{background:var(--bad);color:#fff}
.sb a.it .cnt.gold{background:var(--gold-2);color:#8A5800}
.sb .me{border-top:1px solid var(--line-2);padding:12px 14px;display:flex;align-items:center;gap:10px}
.sb .me .av{width:34px;height:34px;border-radius:50%;background:var(--vna-3);color:var(--vna);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.sb .me .who{min-width:0;flex:1}
.sb .me .who b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb .me .who span{display:block;font-size:11.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb .me form{display:inline}
.sb .me button{background:none;border:0;color:var(--ink-3);cursor:pointer;padding:6px;border-radius:6px;display:grid;place-items:center}
.sb .me button:hover{background:var(--panel-2);color:var(--bad)}
.sb .demo{font-size:11px;color:var(--ink-3);padding:0 18px 14px}

.main{min-width:0;display:flex;flex-direction:column}
.tb{height:var(--tb);background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 24px;position:sticky;top:0;z-index:30}
.tb .crumb{font-size:12.5px;color:var(--ink-3)}
.tb .crumb b{color:var(--ink);font-weight:600}
.tb .sp{flex:1}
.tb .menu-btn{display:none}
.tb .acts{display:flex;gap:8px;align-items:center}
.content{padding:22px 24px 48px;max-width:1360px;width:100%}
.tb-may{padding:13px 18px;margin-bottom:14px}
.tb-may [data-trang]{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tb-may [hidden]{display:none}
.tb-may-chu{flex:1 1 260px;min-width:0}
.tb-may-chu b{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}
.tb-may-chu span{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
.tb-may-chu ol{margin:6px 0 6px 18px;padding:0;list-style:decimal;font-size:13px;color:var(--ink-2)}
.tb-may-chu li{margin-top:3px}
.tb-may-goi-y{font-size:13px;color:var(--ink-2);margin-top:8px}
.tb-may-bao{font-size:13px;color:var(--ink-2)}
.tb-may-bao:not(:empty){margin-top:8px}
.page-h{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.page-h h1{font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.page-h .sub{color:var(--ink-3);font-size:13px;margin-top:3px}
.page-h .acts{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.meta{display:flex;gap:6px 18px;flex-wrap:wrap;color:var(--ink-3);font-size:12.5px;margin:-8px 0 16px}
.meta b{color:var(--ink-2);font-weight:600}

/* ---------- nút ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--line);color:var(--ink-2);font-size:13px;font-weight:600;padding:7px 13px;border-radius:var(--r-s);cursor:pointer;text-decoration:none;line-height:1.2;transition:background .12s,border-color .12s;white-space:nowrap}
.btn:hover{background:var(--panel-2);border-color:#CDD5DB;color:var(--ink);text-decoration:none}
.btn.pri{background:var(--vna);border-color:var(--vna);color:#fff}
.btn.pri:hover{background:#004F60;border-color:#004F60;color:#fff}
.btn.danger{color:var(--bad)}.btn.danger:hover{background:var(--bad-bg);border-color:#EFC5C3}
.btn.sm{padding:4px 9px;font-size:12px;gap:5px}
.btn.ghost{border-color:transparent;background:transparent}
.btn.ghost:hover{background:var(--panel-2)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--vna-2);outline-offset:2px}
.btn-icon{width:34px;height:34px;padding:0;justify-content:center;border-radius:50%}

/* ---------- thẻ, lưới ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.card .hd{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line-2)}
.card .hd h2{font-size:14px;font-weight:700;letter-spacing:.01em}
.card .hd .sub{color:var(--ink-3);font-size:12.5px}
.card .hd .acts{margin-left:auto;display:flex;gap:8px;align-items:center}
.card .bd{padding:18px}
.card .ft{padding:10px 18px;border-top:1px solid var(--line-2);color:var(--ink-3);font-size:12.5px}
.empty{padding:26px 18px;color:var(--ink-3);font-size:13.5px;text-align:center}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.g-main{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:18px;align-items:start}
.stack>*+*{margin-top:18px}
.sec{font-size:13px;font-weight:600;color:var(--ink-3);margin:0 0 10px}

/* ---------- ô số liệu ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:var(--sh);text-decoration:none;color:inherit;display:block;position:relative}
a.stat:hover{border-color:#CDD5DB;text-decoration:none}
.stat .k{font-size:12px;font-weight:600;color:var(--ink-3);display:flex;align-items:center;gap:6px;letter-spacing:.01em}
.stat .v{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums;line-height:1.15}
.stat .v small{font-size:13px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.stat .n{font-size:12px;color:var(--ink-3);margin-top:3px}
.stat.ok .v{color:var(--ok)}.stat.warn .v{color:#B86E00}.stat.bad .v{color:var(--bad)}.stat.vna .v{color:var(--vna)}
.bar{height:6px;background:var(--line-2);border-radius:4px;overflow:hidden;margin-top:8px}
.bar i{display:block;height:100%;border-radius:4px;background:var(--vna-2)}
.bar.ok i{background:var(--ok)}.bar.warn i{background:var(--gold)}.bar.bad i{background:var(--bad)}

/* ---------- danh sách hàng ---------- */
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:1fr auto;gap:8px 16px;padding:12px 18px;border-bottom:1px solid var(--line-2);align-items:center;color:inherit;text-decoration:none}
.row:last-child{border-bottom:0}
a.row:hover{background:var(--panel-2);text-decoration:none}
.row .t{font-size:14px;font-weight:600;color:var(--ink)}
.row .s{font-size:12.5px;color:var(--ink-3);margin-top:2px}
.row.gap{box-shadow:inset 3px 0 0 var(--bad)}
.row .r{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.row .r .when{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.row.unread .t{font-weight:700}
/* Hop thu (goi 6, 10/11/2026): moi tin = lien ket mo + nut danh dau; cham xanh truoc tin chua doc */
.row.tin{grid-template-columns:1fr auto;align-items:center}
.row.tin .tin-mo{display:block;color:inherit;text-decoration:none;min-width:0}
.row.tin.unread .tin-mo .t::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--vna);margin-right:8px;vertical-align:middle}
.row.tin .s .when{color:var(--ink-3)}
@media (max-width:640px){.row.tin{grid-template-columns:1fr;gap:6px}.row.tin .r{justify-content:flex-start}.row.tin .r .btn{min-height:36px}}

/* ---------- nhãn ---------- */
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 8px;border-radius:999px;background:var(--line-2);color:var(--ink-2);white-space:nowrap;line-height:1.5}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
.chip.info{background:var(--info-bg);color:var(--vna)}
.chip.gold{background:var(--gold-2);color:#8A5800}
.chip.gap{background:var(--bad);color:#fff;text-transform:uppercase;letter-spacing:.08em}
.chip.vna{background:var(--vna);color:#fff}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--ink-4)}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--gold)}.dot.bad{background:var(--bad)}.dot.info{background:var(--info)}

/* ---------- bảng ---------- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.tbl th{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);text-align:left;padding:10px 14px;background:var(--panel-2);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--vna-4)}
.tbl th.num,.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl td .s{display:block;font-size:12px;color:var(--ink-3);margin-top:2px}
.tbl.compact td{padding:8px 12px}
/* 05/11/2026: bo table-layout:fixed — dien thoai ep cot viec con vai chuc px, chu va nut chong len nhau. Cot giu be rong toi thieu,
   the .card cuon ngang; cot ten dinh ben trai de luon biet dang nhac ai. */
.tbl.matrix{width:auto;min-width:100%}
.tbl.matrix th:first-child,.tbl.matrix td:first-child{position:sticky;left:0;z-index:1;background:var(--panel);box-shadow:1px 0 0 var(--line-2)}
.tbl.matrix th:first-child{background:var(--panel-2)}
.tbl.matrix th:first-child,.tbl.matrix td:first-child{min-width:190px}
.tbl.matrix th.viec{min-width:136px;text-transform:none;letter-spacing:0;font-size:12px;line-height:1.35;white-space:normal;vertical-align:top}
.tbl.matrix td.o{min-width:136px}
@media (max-width:640px){.tbl.matrix th:first-child,.tbl.matrix td:first-child{width:118px!important;min-width:118px;max-width:118px;white-space:normal}}
.tbl.matrix td.o{text-align:center;padding:8px 6px}
.o .mk{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;font-weight:700;font-size:13px;text-decoration:none}
.o .mk.ok{background:var(--ok-bg);color:var(--ok)}
.o .mk.no{background:var(--bad-bg);color:var(--bad)}
.o .mk.seen{background:var(--warn-bg);color:var(--warn)}
.o a.mk:hover{filter:brightness(.92)}
.o .ld{display:block;font-size:11px;color:var(--ink-3);margin-top:3px;line-height:1.3}
.o .nhac-1{margin-top:5px}
.filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.filters .lbl{font-size:12px;color:var(--ink-3);font-weight:600}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:var(--panel)}
.seg a{padding:5px 11px;font-size:12.5px;font-weight:600;color:var(--ink-3);text-decoration:none;border-right:1px solid var(--line)}
.seg a:last-child{border-right:0}
.seg a:hover{background:var(--panel-2);color:var(--ink)}
.seg a.on{background:var(--vna-3);color:var(--vna)}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pills a{font-size:12px;font-weight:600;color:var(--ink-2);border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:3px 11px;text-decoration:none}
.pills a:hover,.pills a.on{border-color:var(--vna);color:var(--vna);background:var(--vna-3)}

/* ---------- biểu mẫu ---------- */
.f .fld{margin-bottom:16px}
.f label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.f input[type=text],.f input[type=password],.f input[type=url],.f input[type=email],.f input[type=date],.f input[type=datetime-local],.f input[type=number],.f textarea,.f select{width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-s);background:#fff;color:var(--ink);transition:border-color .12s,box-shadow .12s}
.f input:focus,.f textarea:focus,.f select:focus{outline:0;border-color:var(--vna-2);box-shadow:0 0 0 3px rgba(11,122,147,.15)}
/* nut con mat trong o mat khau (mat-khau.js) */
.o-mk{position:relative;display:block}
.o-mk input{padding-right:40px!important}
.mk-mat{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:32px;display:grid;place-items:center;border:0;background:transparent;color:var(--ink-3);border-radius:var(--r-s);cursor:pointer}
.mk-mat:hover{color:var(--ink);background:var(--panel-2)}
.mk-mat:focus-visible{outline:2px solid var(--vna-2);outline-offset:1px}
.f textarea{resize:vertical;min-height:80px}
.f input[type=file]{font-size:13px;color:var(--ink-2)}
.f .bo-tep-co{display:flex;align-items:center;gap:7px;margin-bottom:6px}
.f .bo-tep-co input{width:auto;flex:none}
.f .bo-tep-co label{margin:0;font-weight:500}
.f .help{font-size:12px;color:var(--ink-3);margin-top:5px}
.f .err{font-size:12.5px;color:var(--bad);margin-top:5px;font-weight:500}
.f .tra{font-size:12.5px;color:var(--ink-3);margin-top:5px;font-weight:500}.f .tra:empty{display:none}
.f .tra.co{color:var(--ok)}.f .tra.khong{color:var(--bad)}
.bo-tep{margin-top:6px;color:var(--bad)}.bo-tep[hidden]{display:none}
.f .check{display:flex;align-items:flex-start;gap:9px}
.f .check input{width:16px;height:16px;margin-top:3px;accent-color:var(--vna)}
.f .check label{margin:0;font-weight:500;color:var(--ink)}
.f ul{list-style:none}.f ul li{display:flex;align-items:center;gap:8px;padding:3px 0}
.f ul li label{margin:0;font-weight:500;color:var(--ink)}
.f ul li input{accent-color:var(--vna);width:15px;height:15px}
.f .actions{display:flex;gap:8px;margin-top:6px}
.f .inline{display:flex;gap:8px;align-items:flex-start}
.f .inline .fld{flex:1;margin:0}
.qbox{border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:12px;background:var(--panel-2)}
.qbox h4{font-size:13px;font-weight:700;color:var(--vna);margin-bottom:10px}
.qbox .lc{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.qbox .lc .fld{margin-bottom:0}
details.more summary{cursor:pointer;color:var(--vna);font-size:13px;font-weight:600;padding:8px 0;list-style:none;display:flex;align-items:center;gap:6px}
details.more summary::-webkit-details-marker{display:none}
details.more summary:before{content:"+";display:inline-grid;place-items:center;width:18px;height:18px;border:1px solid var(--vna);border-radius:50%;font-size:13px}
details.more[open] summary:before{content:"–"}
.msg{padding:11px 14px;border-radius:var(--r-s);font-size:13.5px;margin-bottom:14px;display:flex;gap:10px;align-items:flex-start;border:1px solid transparent}
.msg.success{background:var(--ok-bg);color:#155C36;border-color:#C9E8D6}
.msg.error{background:var(--bad-bg);color:#8E1E22;border-color:#F1C6C5}
.msg.warning{background:var(--warn-bg);color:#7A4A00;border-color:#F3DFB4}
.msg.info{background:var(--info-bg);color:#0A4F60;border-color:#C7E1E8}
.msg form{display:contents}

/* ---------- nội dung việc / quiz ---------- */
.prose{white-space:pre-wrap;line-height:1.7;font-size:14.5px;color:var(--ink)}
.attach{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-s);padding:8px 12px;font-size:13px;font-weight:600;background:var(--panel-2);margin-top:14px;margin-right:8px}
.attach .ic{color:var(--vna)}
.quiz .q{padding:14px 0;border-bottom:1px solid var(--line-2)}
.quiz .q:last-child{border-bottom:0}
.quiz .q .nd{font-weight:600;margin-bottom:8px;font-size:14px}
.quiz .q .opt{display:flex;align-items:center;gap:9px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-s);margin-bottom:6px;cursor:pointer;font-size:13.5px}
.quiz .q .opt:hover{background:var(--panel-2)}
.quiz .q .opt input{accent-color:var(--vna);width:15px;height:15px}
.quiz .q input[type=text]{width:100%;padding:8px 11px;border:1px solid var(--line);border-radius:var(--r-s)}
.kq .ans{display:flex;gap:8px;align-items:center;font-size:13.5px;margin:4px 0}
.kq .right{color:var(--ok);font-weight:600}.kq .wrong{color:var(--bad);font-weight:600}
.kq .gt{background:var(--info-bg);border-left:3px solid var(--info);padding:9px 12px;margin-top:8px;font-size:13px;border-radius:0 var(--r-s) var(--r-s) 0;color:#0A4F60}
.score{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--vna-4);border:1px solid #CFE3E9;border-radius:var(--r);margin-bottom:10px}
.score .big{font-size:28px;font-weight:700;color:var(--vna);font-variant-numeric:tabular-nums;line-height:1}
.score .big small{font-size:14px;color:var(--ink-3);font-weight:500}
.cmt{padding:10px 0;border-bottom:1px solid var(--line-2);font-size:13.5px}
.cmt:last-of-type{border-bottom:0}
.cmt .who{font-size:12px;color:var(--ink-3);margin-bottom:2px}
.cmt .who b{color:var(--ink-2);font-weight:600}
.mine{display:flex;align-items:center;gap:10px;font-size:13.5px}

/* ---------- biểu đồ SVG ---------- */
.chart{width:100%;height:auto;display:block;font-family:var(--font)}
.chart text{fill:var(--ink-2);font-size:12px}
.chart .lbl{fill:var(--ink-3);font-size:11.5px}
.chart .val{fill:var(--ink);font-weight:600;font-size:12px}
.chart .track{fill:var(--line-2)}
.chart .fill{fill:var(--vna-2)}
.chart .fill.ok{fill:var(--ok)}.chart .fill.warn{fill:var(--gold)}.chart .fill.bad{fill:var(--bad)}
.chart .grid{stroke:var(--line-2);stroke-width:1}
.donut{display:flex;align-items:center;gap:16px}
.donut svg{width:96px;height:96px;flex:none}
.donut .ring{fill:none;stroke:var(--line-2);stroke-width:10}
.donut .arc{fill:none;stroke:var(--vna-2);stroke-width:10;stroke-linecap:round}
.donut .arc.ok{stroke:var(--ok)}.donut .arc.warn{stroke:var(--gold)}.donut .arc.bad{stroke:var(--bad)}
.donut .c{font-size:22px;font-weight:700;fill:var(--ink);font-variant-numeric:tabular-nums}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* ---------- bảng hướng dẫn trượt ("?") ---------- */
#hd-toggle{display:none}
.hd-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--vna);display:inline-grid;place-items:center;cursor:pointer;flex:none}
.hd-btn:hover{background:var(--vna-3);border-color:var(--vna)}
.hd-panel{position:fixed;top:0;right:0;height:100vh;width:380px;max-width:92vw;background:var(--panel);box-shadow:var(--sh-2);transform:translateX(105%);transition:transform .22s ease;z-index:60;display:flex;flex-direction:column}
.hd-panel .hd{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--line-2)}
.hd-panel .hd h3{font-size:15px;font-weight:700}
.hd-panel .hd .x{margin-left:auto;cursor:pointer;color:var(--ink-3);display:grid;place-items:center;width:30px;height:30px;border-radius:50%}
.hd-panel .hd .x:hover{background:var(--panel-2);color:var(--ink)}
.hd-panel ol{padding:18px 20px 20px 40px;line-height:1.6;font-size:13.5px;color:var(--ink-2)}
.hd-panel ol li{margin-bottom:10px}
.hd-panel ol li::marker{color:var(--vna);font-weight:700}
.hd-panel .ft{margin-top:auto;padding:14px 20px;border-top:1px solid var(--line-2);font-size:12px;color:var(--ink-3)}
.hd-mask{position:fixed;inset:0;background:rgba(20,35,43,.28);opacity:0;pointer-events:none;transition:opacity .2s;z-index:50}
#hd-toggle:checked ~ .hd-panel{transform:none}
#hd-toggle:checked ~ .hd-mask{opacity:1;pointer-events:auto}

/* ---------- đăng nhập (không thanh trái) ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,var(--vna-4) 0%,var(--bg) 60%)}
.login{width:100%;max-width:400px}
.login .brand{display:flex;align-items:center;gap:12px;margin-bottom:22px;justify-content:center}
.login .brand .logo{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--vna),var(--vna-2));color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px}
.login .brand b{display:block;font-size:18px}
.login .brand span{display:block;font-size:12.5px;color:var(--ink-3)}
.login .card .bd{padding:24px}
.login h1{font-size:19px;margin-bottom:4px}
.login .sub{color:var(--ink-3);font-size:13px;margin-bottom:18px}

/* ---------- chân trang ---------- */
footer.foot{margin-top:36px;padding-top:14px;border-top:1px solid var(--line);color:var(--ink-3);font-size:12px;display:flex;gap:14px;flex-wrap:wrap}
footer.foot .sp{flex:1}

/* ---------- điện thoại / màn hẹp ---------- */
@media (max-width:1100px){.g3{grid-template-columns:1fr 1fr}.g-main{grid-template-columns:1fr}}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  #sb-toggle{display:none}
  .sb{position:fixed;left:0;top:0;z-index:70;width:min(84vw,300px);transform:translateX(-105%);transition:transform .22s;box-shadow:var(--sh-2)}
  #sb-toggle:checked ~ .app .sb{transform:none}
  .sb-mask{position:fixed;inset:0;background:rgba(20,35,43,.28);opacity:0;pointer-events:none;z-index:65;transition:opacity .2s}
  #sb-toggle:checked ~ .sb-mask{opacity:1;pointer-events:auto}
  .tb{padding:0 14px}
  .tb .menu-btn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:var(--r-s);border:1px solid var(--line);background:var(--panel);cursor:pointer;color:var(--ink-2)}
  .content{padding:16px 14px 40px}
  .g2,.g3{grid-template-columns:1fr}
  .page-h h1{font-size:19px}
  .row{grid-template-columns:1fr}.row .r{justify-content:flex-start}
  .card .hd .sub{display:none}
  .card .hd h2{white-space:nowrap}
  .qbox .lc{grid-template-columns:1fr}
  .tbl{font-size:13px}
  .tbl th,.tbl td{padding:9px 10px}
}
@media (min-width:861px){#sb-toggle,.sb-mask{display:none}}

/* ---------- hồ sơ nhân sự (25/10/2026) ---------- */
.ph{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:20px 22px}
.code-tile{width:74px;height:74px;border-radius:14px;background:linear-gradient(135deg,var(--vna) 0%,var(--vna-2) 100%);color:#fff;display:grid;place-items:center;text-align:center;line-height:1;flex:none;box-shadow:inset 0 -14px 24px rgba(0,0,0,.08)}
.code-tile b{display:block;font-size:24px;font-weight:800;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.code-tile span{display:block;font-size:10px;opacity:.78;margin-top:5px;font-weight:600;letter-spacing:.04em}
.code-tile.sm{width:40px;height:40px;border-radius:9px}.code-tile.sm b{font-size:13px}.code-tile.sm span{display:none}
.ph h1{font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.ph .line{display:flex;gap:6px 12px;flex-wrap:wrap;align-items:center;margin-top:7px;color:var(--ink-3);font-size:13px}
.ph .line b{color:var(--ink-2);font-weight:600}
.ph .contact{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-self:start}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border-top:1px solid var(--line-2)}
.facts a,.facts>div{padding:12px 22px;border-right:1px solid var(--line-2);color:inherit;text-decoration:none;display:block}
.facts a:hover{background:var(--vna-4);text-decoration:none}
.facts>*:last-child{border-right:0}
.facts .k{font-size:12px;color:var(--ink-3);font-weight:600}
.facts .v{font-size:15px;font-weight:700;margin-top:4px;display:flex;gap:8px;align-items:center;font-variant-numeric:tabular-nums}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:18px 0 16px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{padding:9px 14px;font-size:13.5px;font-weight:600;color:var(--ink-3);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;display:inline-flex;gap:7px;align-items:center}
.tabs a:hover{color:var(--ink);text-decoration:none}
.tabs a.on{color:var(--vna);border-bottom-color:var(--vna)}
.tabs a .cnt{font-size:11px;font-weight:700;background:var(--line-2);color:var(--ink-3);border-radius:10px;padding:0 6px;line-height:1.6}
.tabs a .cnt.bad{background:var(--bad-bg);color:var(--bad)}.tabs a .cnt.warn{background:var(--warn-bg);color:var(--warn)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 32px;padding:4px 18px 8px}
.kv>div{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;align-items:baseline}
.kv .k{color:var(--ink-3);font-size:12.5px;font-weight:600}
.kv .v{color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.kv .v.empty{color:var(--ink-3);font-weight:400}
.tl{list-style:none;padding:10px 18px 6px}
.tl li{position:relative;padding:0 0 18px 24px;border-left:2px solid var(--line);margin-left:6px}
.tl li:last-child{padding-bottom:4px;border-left-color:transparent}
.tl li::before{content:"";position:absolute;left:-7px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--panel);border:2px solid var(--vna-2)}
.tl li.now::before{background:var(--vna-2)}
.tl .when{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;font-weight:600}
.tl .what{font-size:14px;font-weight:600;margin-top:2px}
.tl .where{font-size:13px;color:var(--ink-2)}
.lock{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-3);background:var(--panel-2);border:1px solid var(--line-2);border-radius:999px;padding:2px 9px;font-weight:600}
.srch{display:flex;align-items:center;gap:4px;border:1px solid var(--line);border-radius:999px;padding:2px 4px 2px 12px;background:var(--panel-2)}
.srch input{border:0;background:transparent;font-size:13px;width:190px;outline:0;color:var(--ink)}
.srch button{border:0;background:transparent;color:var(--ink-3);cursor:pointer;display:grid;place-items:center;width:26px;height:26px;border-radius:50%}
.srch button:hover{background:var(--vna-3);color:var(--vna)}
.flt{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;align-items:end;padding:14px 18px;border-bottom:1px solid var(--line-2)}
.flt .q{grid-column:span 2}
.flt label{display:block;font-size:11.5px;color:var(--ink-3);font-weight:600;margin-bottom:3px}
.flt input,.flt select{width:100%;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-s);background:#fff;font-size:13px}
.person{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.person .av{width:34px;height:34px;border-radius:50%;background:var(--vna-3);color:var(--vna);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.person .av.off{background:var(--line-2);color:var(--ink-3)}
.person b{font-weight:600;font-size:13.5px;display:block}
.person .s{display:block;font-size:12px;color:var(--ink-3)}
.hist .old{color:var(--ink-3);text-decoration:line-through;text-decoration-color:var(--ink-4)}
.hist .new{font-weight:600}
.cal{display:grid;align-items:center;font-size:12px}
.cal .hd-c{padding:6px 0;text-align:center;color:var(--ink-3);font-weight:600;font-variant-numeric:tabular-nums;border-bottom:1px solid var(--line)}
.cal .hd-c.cn{color:var(--bad)}
.cal .hd-c.nay{color:var(--vna);background:var(--vna-3);border-radius:6px 6px 0 0}
.cal .nm{padding:8px 10px 8px 0;border-bottom:1px solid var(--line-2);font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .nm .s{display:block;font-size:11.5px;color:var(--ink-3);font-weight:500}
.cal .bar{height:22px;border-radius:6px;font-size:11px;font-weight:600;display:flex;align-items:center;padding:0 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;background:var(--vna-2);margin:2px 1px}
.cal .bar.lich{background:var(--info-bg);color:var(--vna);border:1px solid #CFE3E9}
.cal .bar.don{background:var(--gold);color:#3D2A00}
.cal .bar.don:hover{filter:brightness(.95);text-decoration:none}
.cal .ln{border-bottom:1px solid var(--line-2);height:100%;min-height:30px}
.cal .ln.cn{background:var(--panel-2)}
.steps{display:flex;gap:0;align-items:stretch;font-size:12.5px;margin:6px 0 2px}
.steps div{flex:1;padding:8px 10px;border:1px solid var(--line);border-left:0;color:var(--ink-3);background:var(--panel-2);position:relative}
.steps div:first-child{border-left:1px solid var(--line);border-radius:var(--r-s) 0 0 var(--r-s)}
.steps div:last-child{border-radius:0 var(--r-s) var(--r-s) 0}
.steps div.done{background:var(--ok-bg);color:var(--ok);font-weight:600}
.steps div.now{background:var(--vna-3);color:var(--vna);font-weight:700}
.steps div.bad{background:var(--bad-bg);color:var(--bad);font-weight:600}
.steps div b{display:block;font-size:11px;font-weight:600;opacity:.8}
@media (max-width:860px){
  .ph{grid-template-columns:auto 1fr}.ph .contact{grid-column:1/-1;justify-content:flex-start}
  .kv>div{grid-template-columns:120px 1fr}
  .flt{grid-template-columns:1fr 1fr}
  .tb .srch{display:none}
  .facts a,.facts>div{border-right:0;border-bottom:1px solid var(--line-2)}
}
/* anh chan dung (25/10/2026): thay o ma Aves; khong co anh thi chu cai dau */
.ph .pic{width:74px;height:74px;border-radius:14px;object-fit:cover;flex:none;background:var(--panel-2);border:1px solid var(--line-2)}
.ph .av-lg{width:74px;height:74px;border-radius:14px;background:linear-gradient(135deg,var(--vna) 0%,var(--vna-2) 100%);color:#fff;display:grid;place-items:center;font-weight:800;font-size:24px;letter-spacing:.02em;flex:none}
.person img.av{object-fit:cover;border:1px solid var(--line-2)}
/* nut Doi anh (28/10/2026): nhan nho duoi anh, o tep an trong nhan — bam nhan la mo chon anh (dien thoai: chup / thu vien) */
.anh-ho-so{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.doi-anh{margin:0}
.nut-anh{position:relative;display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--vna);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px 9px;cursor:pointer;white-space:nowrap}
.nut-anh:hover{border-color:var(--vna);background:var(--vna-4)}
.nut-anh:focus-within{outline:2px solid var(--vna);outline-offset:2px}
.nut-anh input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.doi-anh.dang-gui .nut-anh{opacity:.6;pointer-events:none}
/* dashboard nhan luc: cot bien dong (26/10/2026: thap 96 px cho vua man hinh dau, so dat tren dau cot, vach dut = cung ky nam truoc) */
.cols{display:flex;gap:8px;height:96px;padding:0 4px;border-bottom:1px solid var(--line)}
.cols a{flex:1;display:block;height:100%;padding-top:16px;min-width:0;text-decoration:none;color:inherit}
.cols .truc{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center}
.cols .cot{display:block;width:min(100%,40px);min-height:2px;background:var(--ink-4);border-radius:3px 3px 0 0}
.cols a:last-child .cot{background:var(--vna)}
.cols a:hover .cot{background:var(--vna-2)}
.cols .nt{position:absolute;left:8%;right:8%;height:0;border-top:2px dashed var(--ink-3);pointer-events:none}
.cols .v{position:absolute;left:50%;transform:translateX(-50%);padding:0 3px;border-radius:3px;background:var(--panel);font-size:11.5px;line-height:14px;margin-bottom:2px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.cols-lbl{display:flex;gap:8px;padding:6px 4px 0}
.cols-lbl div{flex:1;text-align:center;font-size:10.5px;color:var(--ink-2);line-height:1.3;min-width:0}
.cols-lbl b{display:block;color:var(--ink);font-variant-numeric:tabular-nums}
.cols-lbl .in{color:var(--ok)}.cols-lbl .out{color:var(--bad)}
.cols-lbl .nt-lbl{display:block;color:var(--ink-3);font-variant-numeric:tabular-nums}
/* theo nam vao nganh (26/10/2026, phuong an A nguoi dung chon): cot chong theo doi / lai chinh-phu, nhan nam dat giua cot */
.cols.nam{height:120px}
.cols>span.trong{flex:1;display:block;height:100%;padding-top:16px;min-width:0}
.cols .cot.chong{display:flex;flex-direction:column-reverse;gap:2px;background:none;border-radius:0}
.cols a:last-child .cot.chong,.cols a:hover .cot.chong{background:none}
.cols a:hover .cot.chong{opacity:.8}
.cols .cot.chong i{display:block;min-height:2px;border-radius:2px}
.m-d{background:var(--ink-3)}
/* ---------- dashboard nhan luc, bo cuc bento mot chi so neo (25/10/2026, phuong an B) ---------- */
.dash .chart .fill{fill:var(--ink-4)}
.dash .chart .fill.on{fill:var(--vna)}
.dash .chart .fill.bad{fill:var(--bad)}.dash .chart .fill.warn{fill:var(--gold)}
.dash .cols a:hover .fill{fill:var(--vna-2)}
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
.bento .neo{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;padding:14px 18px 12px}
.bento .neo .k{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.bento .neo .big{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;margin-top:4px;font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.bento .neo .big small{font-size:13.5px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.delta{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--line-2);color:var(--ink-2);letter-spacing:0;white-space:nowrap}
.delta.ok{background:var(--ok-bg);color:var(--ok)}.delta.bad{background:var(--bad-bg);color:var(--bad)}
.kl{font-size:12.5px;color:var(--ink-2);margin-top:6px;line-height:1.45}
.spark{width:100%;height:44px;margin:auto 0 2px;display:block}
.spark .ln{fill:none;stroke:var(--vna);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.spark .ar{fill:var(--vna-3)}
.spark .pt{fill:var(--vna);stroke:#fff;stroke-width:1.2}
.spark-lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.bento .o{padding:12px 14px;display:flex;flex-direction:column;color:inherit;text-decoration:none;min-height:92px}
.bento a.o:hover{background:var(--vna-4);text-decoration:none}
.bento .o .k{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.bento .o .v{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:3px;font-variant-numeric:tabular-nums;line-height:1.1;display:flex;align-items:center;gap:8px;white-space:nowrap}
.bento .o .kl{margin-top:auto;padding-top:5px;font-size:12px;color:var(--ink-3)}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;font-size:12.5px;color:var(--ink-3)}
.chips a.chip{text-decoration:none;color:var(--vna);background:var(--vna-3)}
.chips a.chip:hover{background:var(--vna);color:#fff}
.dash .card .hd .kl{margin:0 0 0 auto;font-size:12.5px;color:var(--ink-3)}
@media (max-width:1100px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}.bento .neo{grid-column:span 2;grid-row:span 1}}
@media (max-width:520px){.bento{grid-template-columns:1fr}.bento .neo{grid-column:span 1}.bento .neo .big{font-size:40px}}
/* ---------- dashboard 26/10/2026: man hinh dau tu du, dai tom tat dinh, muc luc neo, thanh chia doan 100 %, bang gap mo ---------- */
.dash .dau{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-bottom:10px}
.dash .dau h1{font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.dash .dau .sub{color:var(--ink-3);font-size:12px;margin-top:2px}
.dash .loc{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin-left:auto}
.dash .loc select{padding:6px 26px 6px 9px;border:1px solid var(--line);border-radius:var(--r-s);background:#fff;font-size:12.5px;color:var(--ink-2);max-width:160px}
.dash .loc select.on{border-color:var(--vna);color:var(--vna);background:var(--vna-4);font-weight:600}
.dinh{position:sticky;top:var(--tb);z-index:20;display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;min-height:36px;padding:4px 12px;margin-bottom:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);font-size:12.5px;color:var(--ink-2)}
.dinh .ml{flex:1;display:flex;gap:4px;flex-wrap:wrap}
.dinh .ml a{padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;color:var(--ink-2);background:var(--panel-2);border:1px solid var(--line-2);text-decoration:none;white-space:nowrap}
.dinh .ml a:hover{background:var(--vna-3);color:var(--vna);border-color:var(--vna-3)}
.dinh .tom{margin-left:auto;display:flex;gap:5px;align-items:baseline;white-space:nowrap}
.dinh .tom b{color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums}
.dinh .tom .doi{font-weight:700;color:var(--vna);margin-right:4px}
@supports (animation-timeline:scroll()){
  .dinh .tom{animation:dinh-hien linear both;animation-timeline:scroll(root);animation-range:0 280px}
  @keyframes dinh-hien{from{opacity:0}to{opacity:1}}
}
.doan-hang{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.card.doan{padding:10px 14px 9px}
.doan .t{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:12.5px}
.doan .t b{color:var(--ink)}
.doan .t .num{color:var(--ink-3);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doan .bar{display:flex;gap:2px;height:10px;margin-top:7px}
.doan .bar a,.doan .bar span{display:block;height:100%;border-radius:3px;min-width:3px}
.doan .bar a:hover,.doan .bar a.on{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--ink)}
.m-a{background:var(--vna)}.m-b{background:var(--vna-2);opacity:.55}.m-c{background:var(--gold)}.m-w{background:var(--gold)}.m-x{background:var(--ink-4)}
.doan .legend{margin-top:6px;gap:5px 12px;font-size:12px}
.doan .legend a,.doan .legend span{color:var(--ink-2);text-decoration:none}
.doan .legend a:hover,.doan .legend a.on{color:var(--vna);font-weight:700}
.dash .ngan{margin-bottom:12px}
.dash .khoi{scroll-margin-top:calc(var(--tb) + 58px)}
.dash .hd .sp{flex:1}
.dash details.card>summary{list-style:none;cursor:pointer;user-select:none}
.dash details.card>summary::-webkit-details-marker{display:none}
.dash details.card>summary:hover h2{color:var(--vna)}
.dash .hd .chev{width:8px;height:8px;border-right:2px solid var(--ink-4);border-bottom:2px solid var(--ink-4);transform:rotate(45deg);margin:0 4px 4px 12px;flex:none;transition:transform .15s}
.dash details:not([open])>summary .chev{transform:rotate(-45deg);margin:0 4px 0 12px}
.dash details:not([open])>summary.hd{border-bottom:0}
.dash details.gv-ds>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px}
.dash details.gv-ds>summary::-webkit-details-marker{display:none}
.dash details.gv-ds>summary::after{content:"";width:7px;height:7px;border-right:2px solid var(--ink-4);border-bottom:2px solid var(--ink-4);transform:rotate(-45deg);margin-top:-3px}
.dash details.gv-ds[open]>summary::after{transform:rotate(45deg);margin-top:-5px}
.dash .lines{height:120px}
@media (max-width:860px){
  .dinh .ml{display:none}.dinh .tom{margin-left:0}
  .dash .dau .sub{display:none}
  .dash .loc{margin-left:0;width:100%}.dash .loc select{flex:1 1 42%;max-width:none}
  .doan-hang{grid-template-columns:1fr}
  .cols-lbl .nt-lbl{display:none}.cols-lbl div:nth-child(even){visibility:hidden}
}
@media print{
  .sb,.tb,.dinh,.dash .loc,.dash .seg,.btn,.hd-btn,.hd-panel,.hd-mask{display:none!important}
  .app{grid-template-columns:1fr}.content{padding:0;max-width:none}
  .card{box-shadow:none;break-inside:avoid}
}
/* dashboard "tat ca trong mot": duong theo nam, bang canh nhau */
.lines{width:100%;height:150px;display:block}
.lines .ln{fill:none;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.lines .ln.vna{stroke:var(--vna)}.lines .ln.gold{stroke:var(--gold)}.lines .ln.ok{stroke:var(--ok)}.lines .ln.info{stroke:var(--vna-2);stroke-dasharray:3 2}.lines .ln.bad{stroke:var(--bad)}.lines .ln.ink{stroke:var(--ink-3)}
.lines .grid{stroke:var(--line-2);stroke-width:1;vector-effect:non-scaling-stroke}
.lines-x{position:relative;height:16px;font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.lines-x span{position:absolute;transform:translateX(-50%)}
.lines-x span:first-child{transform:none}.lines-x span:last-child{transform:translateX(-100%)}
.legend .sw{display:inline-block;width:14px;height:0;border-top:2px solid;margin-right:6px;vertical-align:middle}
.legend .sw.vna{border-color:var(--vna)}.legend .sw.gold{border-color:var(--gold)}.legend .sw.ok{border-color:var(--ok)}.legend .sw.info{border-color:var(--vna-2);border-top-style:dashed}.legend .sw.bad{border-color:var(--bad)}.legend .sw.ink{border-color:var(--ink-3)}
.tbl.canh th.grp{text-align:center;border-left:1px solid var(--line-2)}
.tbl.canh td.grp{border-left:1px solid var(--line-2)}
.tbl tfoot th{font-size:12.5px;text-transform:none;letter-spacing:0;color:var(--ink);background:var(--panel-2);border-top:1px solid var(--line)}
/* Safety Team: o phi cong trong bang — chip PF/PM thanh cot rieng o dau, ten + ma theo sau, moi nguoi mot dong */
.pc-dong{display:grid;grid-template-columns:34px 1fr;gap:0 8px;align-items:center;font-size:13px;white-space:nowrap;line-height:1.6}
.pc-dong .chip.vai{justify-content:center;min-width:30px;padding:1px 0}
.pc-dong .ma{color:var(--ink-3);font-size:12px;margin-left:4px}
/* Viec phong Safety: bang 6 cot theo Status (kieu Tracker) */
.kanban{display:grid;grid-template-columns:repeat(6,minmax(190px,1fr));gap:10px;overflow-x:auto;align-items:start;padding-bottom:6px}
.cot-kb{background:var(--panel-2);border:1px solid var(--line-2);border-radius:var(--r);padding:8px;min-height:120px}
.cot-kb .hd-kb{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em;padding:4px 6px 8px}
.cot-kb .hd-kb .cnt{font-size:11px;background:var(--line-2);color:var(--ink-3);border-radius:10px;padding:0 7px;line-height:1.7}
.the-kb{display:block;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-s);padding:9px 10px;margin-bottom:8px;color:inherit;text-decoration:none;box-shadow:var(--sh)}
.the-kb:hover{border-color:var(--vna-2);text-decoration:none}
.the-kb.gap{box-shadow:inset 3px 0 0 var(--bad)}
.the-kb .t{font-size:13px;font-weight:600;line-height:1.35}
.the-kb .s{font-size:12px;color:var(--ink-3);margin-top:5px;display:flex;gap:4px;flex-wrap:wrap;align-items:center}
.trong-kb{font-size:12px;color:var(--ink-3);text-align:center;padding:14px 6px}
/* So gop: thanh chia doan, bang luoi nhap so theo thang */
/* Bao cao an toan: bieu do cot theo thang (views_thong_ke._cot, mau an_toan/_cot.html) */
.cot-bd{width:100%;height:auto;display:block;font-family:inherit}
.cot-bd .grid{stroke:var(--line-2);stroke-width:1}.cot-bd .day{stroke:var(--ink-4);stroke-width:1}
.cot-bd .truc{font-size:11px;fill:var(--ink-3)}
.cot-bd .c{fill:var(--vna)}.cot-bd .c.vuot,.cot-bd .c.chong{fill:var(--bad)}
.cot-bd .nhan{font-size:11px;font-weight:600;fill:var(--ink-2)}.cot-bd .nhan.vuot{fill:var(--bad);font-weight:700}
.cot-bd .tc{fill:none;stroke-width:2}.cot-bd .tc.bad{stroke:var(--bad)}.cot-bd .tc.ink{stroke:var(--ink-3)}.cot-bd .tc.gold{stroke:var(--gold)}
.cot-bd .tc.dut{stroke-dasharray:7 4}.cot-bd .tc.cham{stroke-dasharray:2 3}
.legend .sw.dut{border-top-style:dashed}.legend .sw.cham{border-top-style:dotted}
.tom-tat{font-size:14.5px;line-height:1.55;padding:13px 18px;border-radius:var(--r);background:var(--vna-4);border:1px solid var(--vna-3);margin-bottom:16px}
.tom-tat.bad{background:var(--bad-bg);border-color:#F1C6C5}
.cach-doc{font-size:12.5px;color:var(--ink-2);line-height:1.6}.cach-doc dt{font-weight:700;margin-top:6px}.cach-doc dd{margin:0}
.seg-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:2px;background:var(--line-2)}
.seg-bar i{display:block;min-width:4px}
.luoi-nhap td{padding:6px 6px;vertical-align:top}
.luoi-nhap input[type=text],.luoi-nhap select{width:100%;min-width:64px;padding:4px 6px;border:1px solid var(--line);border-radius:var(--r-s);font-size:12.5px;font-variant-numeric:tabular-nums}
.luoi-nhap select{font-size:11px}

/* ---------- ho so: thiet ke lai 01/11/2026 (THIET-KE cuoi muc 12; ban ve tai-lieu\mau-nhan-su-01-11-2026.html) ---------- */
.the-ho-so{overflow:hidden}
.nhan-dau{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip-nhat{font-size:12.5px;font-weight:500;color:var(--ink-2);background:var(--vna-4);border:1px solid var(--line);border-radius:999px;padding:1px 10px;line-height:20px;white-space:nowrap}
.chip-nhat.ok{background:var(--ok-bg);border-color:#C9E8D6;color:var(--ok);font-weight:600}
.chip-nhat.warn{background:var(--warn-bg);border-color:#F3DFB4;color:var(--warn);font-weight:600}
.chip-nhat.gold{background:var(--gold-2);border-color:#EBCF91;color:#8A5800;font-weight:600}
/* Bang "Han bay": nen toi nhu man hinh buong lai; mau theo quy uoc ECAM (xanh la binh thuong, ho phach chu y, do canh bao) */
.hb{--hb-nen:#0F2B33;--hb-nen-2:#1B414B;--hb-ke:#24474F;--hb-chu:#E3EEF1;--hb-chu-2:#9DB6BD;--ecam-g:#46D08A;--ecam-a:#F4A62A;--ecam-r:#FF6B6B;--ecam-c:#6FD3E3;background:var(--hb-nen);color:var(--hb-chu);padding:14px 22px 11px}
.hb-dau{display:flex;align-items:baseline;gap:4px 16px;flex-wrap:wrap;margin-bottom:6px}
.hb-dau h2{font-size:14.5px;font-weight:700;color:#fff}
.hb-kl{font-size:13.5px;display:flex;gap:4px 14px;flex-wrap:wrap}
.hb-kl span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;vertical-align:1px;background:var(--hb-chu-2)}
.hb-kl .bad::before{background:var(--ecam-r)}.hb-kl .warn::before{background:var(--ecam-a)}.hb-kl .ok::before{background:var(--ecam-g)}
.hb-dong{display:grid;grid-template-columns:minmax(170px,250px) minmax(80px,1fr) 140px 92px 100px;gap:18px;align-items:center;padding:8px 0;border-top:1px solid var(--hb-ke)}
.hb-dong .ten{font-size:13.5px;font-weight:600;color:#fff;min-width:0}
.hb-dong .ten small{display:block;font-size:12px;font-weight:400;color:var(--hb-chu-2)}
.hb-dong .thanh{height:6px;border-radius:3px;background:var(--hb-nen-2);overflow:hidden}
.hb-dong .thanh i{display:block;height:100%;border-radius:3px;background:var(--ecam-g)}
.hb-dong.sap .thanh i{background:var(--ecam-a)}
.hb-dong .thanh.het{background:rgba(255,107,107,.3)}
.hb-dong .con{font-size:13.5px;font-weight:700;color:var(--hb-chu)}
.hb-dong.con .con{color:var(--ecam-g)}.hb-dong.sap .con{color:var(--ecam-a)}.hb-dong.het .con{color:var(--ecam-r)}
.hb-dong .ngay{font-size:13px;color:var(--hb-chu-2)}
.hb-dong .viec a{color:var(--ecam-c);font-size:12.5px;font-weight:600}
.hb-chan{display:flex;gap:4px 16px;flex-wrap:wrap;justify-content:flex-end;padding-top:9px;border-top:1px solid var(--hb-ke);font-size:12px;color:var(--hb-chu-2)}
.hb-chan .ghi{margin-right:auto}
.hb-chan .mau::before{content:"";display:inline-block;width:10px;height:4px;border-radius:2px;margin-right:6px;vertical-align:2px;background:currentColor}
.hb-chan .mau.g{color:var(--ecam-g)}.hb-chan .mau.a{color:var(--ecam-a)}.hb-chan .mau.r{color:var(--ecam-r)}
/* Tab Tong quan */
.kv-gon{display:grid;grid-template-columns:150px minmax(0,1fr);padding:2px 18px 6px}
.kv-gon dt,.kv-gon dd{padding:8px 0;border-top:1px solid var(--line-2);font-size:13.5px}
.kv-gon dt{color:var(--ink-3);font-size:12.5px;font-weight:600;padding-right:12px}
.kv-gon dd{color:var(--ink);font-weight:500;overflow-wrap:anywhere}
.kv-gon dt:first-child,.kv-gon dt:first-child+dd{border-top:0}
.kv-gon .phu{color:var(--ink-3);font-weight:400}
.kv-gon dd.dai{white-space:pre-wrap}
.o-thieu{display:flex;justify-content:space-between;gap:12px;padding:10px 18px;border-top:1px solid var(--line-2);background:var(--vna-4);font-size:12.5px;color:var(--ink-3)}
.o-thieu.warn{background:var(--warn-bg);color:var(--warn);font-weight:600}
.o-thieu:last-child{border-radius:0 0 var(--r) var(--r)}
.o-thieu a{white-space:nowrap;font-weight:600}
details.gap-mo>summary{list-style:none;cursor:pointer}
details.gap-mo>summary::-webkit-details-marker{display:none}
details.gap-mo>summary:hover h2{color:var(--vna)}
details.gap-mo>summary .chev{margin-left:auto;width:8px;height:8px;border-right:2px solid var(--ink-4);border-bottom:2px solid var(--ink-4);transform:rotate(-45deg);flex:none}
details.gap-mo[open]>summary .chev{transform:rotate(45deg)}
details.gap-mo:not([open])>summary.hd{border-bottom:0}
.sap-toi{list-style:none;padding:4px 18px 8px}
.sap-toi li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:center;padding:8px 0;border-top:1px solid var(--line-2)}
.sap-toi li:first-child{border-top:0}
.sap-toi .ngay-o{text-align:center;line-height:1.1}
.sap-toi .ngay-o b{display:block;font-size:18px;font-weight:700}
.sap-toi .ngay-o small{font-size:11px;color:var(--ink-3)}
.sap-toi .t{font-size:13.5px;font-weight:600}
.sap-toi .t small{display:block;font-weight:400;color:var(--ink-3);font-size:12px}
.sap-toi li.bad .ngay-o b,.sap-toi li.bad .t small{color:var(--bad)}
.sap-toi li.warn .t small{color:var(--warn)}
.viec-tom{padding:12px 18px;font-size:13.5px;color:var(--ink-2)}
.viec-tom b{font-size:17px;color:var(--ink)}
.viec-tom .do{color:var(--bad);font-weight:600}
details.trong>summary{padding:10px 18px;border-top:1px solid var(--line-2);font-size:13px;font-weight:600;color:var(--vna);cursor:pointer}
details.trong[open]>summary{border-bottom:1px solid var(--line-2)}
.gan-day{list-style:none;padding:4px 18px 8px}
.gan-day li{padding:8px 0 8px 16px;border-top:1px solid var(--line-2);font-size:13.5px;position:relative}
.gan-day li:first-child{border-top:0}
.gan-day li::before{content:"";position:absolute;left:1px;top:15px;width:7px;height:7px;border-radius:50%;background:var(--ink-4)}
.gan-day li small{display:block;color:var(--ink-3);font-size:12px}
/* Tong quan nhan luc: nut "Xem them" duoi khoi Khong khai thac (01/11/2026) */
.xem-them{display:block;padding:11px 18px;border-top:1px solid var(--line-2);font-size:13px;font-weight:600;color:var(--vna);text-decoration:none}
.xem-them:hover{background:var(--vna-4);text-decoration:none}
.xem-them .s{display:block;font-size:12px;font-weight:400;color:var(--ink-3);margin-top:1px}
.tbl tr[id]{scroll-margin-top:64px}                  /* Xem them nhay toi dong thang: khong nam duoi thanh tren */
/* Danh sach nhan su: nhom san co so dem, sap xep theo cot, han gan nhat, chia trang */
.nhom-san{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.nhom-san a,.nhom-san span{display:inline-flex;align-items:baseline;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--ink-2);font-size:13px;font-weight:500;text-decoration:none;box-shadow:var(--sh)}
.nhom-san b{font-size:16px;font-weight:700;color:var(--ink)}
.nhom-san a:hover{border-color:var(--vna-2);text-decoration:none}
.nhom-san a.on{border-color:var(--vna);background:var(--vna-3);color:var(--vna)}
.nhom-san a.on b{color:var(--vna)}
.nhom-san .bad b{color:var(--bad)}
.ds-ns td:nth-child(3){white-space:nowrap}
.ds-ns th a{color:inherit;text-decoration:none;display:inline-flex;gap:5px;align-items:center}
.ds-ns th a:hover{color:var(--vna)}
.ds-ns th.on,.ds-ns th.on a{color:var(--vna)}
.ds-ns th .mui{color:var(--ink-3);font-size:12px;letter-spacing:0}
.ds-ns th.on .mui{color:var(--vna)}
.han-gan{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;white-space:nowrap;color:var(--ink-2)}
.han-gan::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.han-gan.sap{color:var(--warn);font-weight:600}.han-gan.sap::before{background:var(--gold)}
.han-gan.het{color:var(--bad);font-weight:600}.han-gan.het::before{background:var(--bad)}
.lien-he{white-space:nowrap}
.lien-he .nut-thu{display:inline-grid;place-items:center;width:28px;height:28px;margin-left:8px;border:1px solid var(--line);border-radius:var(--r-s);color:var(--ink-3);vertical-align:middle}
.lien-he .nut-thu+.nut-thu{margin-left:4px}
.lien-he .nut-thu:hover{color:var(--vna);border-color:var(--vna);text-decoration:none}
.phan-trang{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 18px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--ink-3)}
.so-trang{display:flex;gap:4px;flex-wrap:wrap}
.so-trang a,.so-trang span{min-width:30px;height:30px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r-s);display:inline-grid;place-items:center;background:var(--panel);color:var(--ink-2);font-weight:600;text-decoration:none}
.so-trang span{border-color:transparent;background:none}
.so-trang a:hover{border-color:var(--vna-2);color:var(--vna);text-decoration:none}
.so-trang a.on{background:var(--vna);border-color:var(--vna);color:#fff}
/* Lich nghi doi: hang dem moi ngay, ma ngan trong o, don cho vien dut, cot ten dung yen khi keo ngang */
.lich-doi .goc,.lich-doi .nm{position:sticky;left:0;z-index:2;background:var(--panel)}
.lich-doi .dem{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:46px;padding-bottom:4px;border-bottom:1px solid var(--line);background:var(--panel-2)}
.lich-doi .dem.cn{background:#F1F4F6}
.lich-doi .dem i{display:block;width:12px;border-radius:3px 3px 0 0;background:#C9D6DC;margin-bottom:2px}
.lich-doi .dem b{font-size:11.5px;font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
.lich-doi .dem.cao i{background:var(--gold)}
.lich-doi .dem.cao b{color:var(--warn)}
.lich-doi .dem-nhan{height:46px;display:flex;flex-direction:column;justify-content:center;border-bottom:1px solid var(--line);background:var(--panel-2)}
.lich-doi .bar{justify-content:center;padding:0 3px;font-size:10.5px;font-weight:700;letter-spacing:.02em;text-overflow:clip}
.lich-doi .bar.lich{background:var(--info-bg);color:var(--vna);border:1px solid #CFE3E9}
.lich-doi .bar.lich.off_thang,.lich-doi .bar.lich.khac{background:#EEF1F4;color:var(--ink-2);border-color:#DDE3E8}
.lich-doi .bar.don{background:var(--gold-2);color:#7A5200;border:1px solid #EBCF91}
.lich-doi .bar.cho{background:var(--panel);color:var(--warn);border:1.5px dashed var(--gold)}
.lich-doi a.bar:hover{filter:brightness(.96);text-decoration:none}
.chu-lich{margin:-6px 0 12px}
.chu-lich .ma{display:inline-grid;place-items:center;min-width:30px;height:20px;padding:0 4px;margin-right:7px;border-radius:5px;font-size:10.5px;font-weight:700;vertical-align:middle}
.chu-lich .ma.wo{background:var(--info-bg);color:var(--vna);border:1px solid #CFE3E9}
.chu-lich .ma.off{background:#EEF1F4;color:var(--ink-2);border:1px solid #DDE3E8}
.chu-lich .ma.don{background:var(--gold-2);color:#7A5200;border:1px solid #EBCF91}
.chu-lich .ma.cho{background:var(--panel);color:var(--warn);border:1.5px dashed var(--gold)}
@media (max-width:860px){
  .hb{padding:12px 14px 10px}
  .hb-dong{grid-template-columns:minmax(0,1fr) auto;gap:5px 12px}
  .hb-dong .thanh{grid-column:1/-1;grid-row:2}
  .hb-dong .ngay{grid-row:3;font-size:12px}.hb-dong .viec{grid-row:3;text-align:right}
  .hb-chan{justify-content:flex-start}
  .kv-gon{grid-template-columns:120px minmax(0,1fr)}
}
@media print{
  .hb{background:#fff;color:var(--ink);border-top:1px solid var(--line)}
  .hb-dau h2,.hb-dong .ten{color:var(--ink)}
  .hb-dong.con .con{color:var(--ok)}.hb-dong.sap .con{color:var(--warn)}.hb-dong.het .con{color:var(--bad)}
}

/* O loc cho o chon dai (o-chon.js, gop y kich ban 13, 27/10/2026) */
.tim-chon{display:block;width:100%;padding:7px 11px;margin-bottom:6px;border:1px solid var(--line);border-radius:var(--r-s);background:#fff;color:var(--ink);font-size:13px}
.tim-chon:focus{outline:0;border-color:var(--vna-2);box-shadow:0 0 0 3px rgba(11,122,147,.15)}
.tim-chon-dem{font-size:12px;color:var(--ink-3);margin-top:4px}.tim-chon-dem[hidden]{display:none}

/* ---------- Giao dien goi B (nguoi dung chot 01/11/2026; tai-lieu\nghien-cuu-giao-dien-01-11-2026.md) ---------- */
/* Nhom menu gap duoc: Safety Team / Training Team / Tai khoan (<details>, khong JS); dang mo trang trong nhom thi mo san.
   So dem cua nhom hien tren ten nhom khi dang gap. */
.sb details.nhom-menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;border-radius:var(--r-s)}
.sb details.nhom-menu>summary::-webkit-details-marker{display:none}
.sb details.nhom-menu>summary:hover{color:var(--ink-2)}
.sb details.nhom-menu>summary .chev{margin-left:auto;margin-right:6px;width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s;flex:none}
.sb details.nhom-menu[open]>summary .chev{transform:rotate(45deg)}
.sb .grp .cnt{font-size:11px;font-weight:700;border-radius:10px;padding:1px 7px;font-variant-numeric:tabular-nums;background:var(--line-2);color:var(--ink-2)}
.sb .grp .cnt.hot{background:var(--bad);color:#fff}.sb .grp .cnt.gold{background:var(--gold-2);color:#8A5800}
.sb details.nhom-menu[open]>summary .cnt{display:none}

/* Trang chu: cau ket luan thay "Xin chao"; viec gom Qua han / Gap va sap het han / Con lai; chi gan nhan cai bat thuong */
.ket-luan h1{line-height:1.3}
.ket-luan h1 em{font-style:normal;color:var(--vna)}
.ket-luan h1 b{color:var(--bad)}
.nhom-viec{display:flex;gap:var(--s2);align-items:center;padding:9px 18px 7px;font-size:12px;font-weight:700;color:var(--ink-3);background:var(--panel-2);border-bottom:1px solid var(--line-2)}
.nhom-viec.qua_han{color:var(--bad)}.nhom-viec.sap_het{color:var(--warn)}
.row.moi .t::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--vna-2);margin-right:7px;vertical-align:1px}
.chip.han-sap::before{content:"▲";font-size:8px}.chip.han-qua::before{content:"■";font-size:8px}
.ty-le-nhom{display:grid;grid-template-columns:150px 1fr 60px;gap:var(--s3);align-items:center;padding:7px 0;color:inherit;text-decoration:none}
.ty-le-nhom:hover{text-decoration:none}.ty-le-nhom span:first-child{font-size:13px;font-weight:600}
.ty-le-nho{display:inline-block;width:72px;height:6px;border-radius:3px;background:var(--line-2);overflow:hidden}
.ty-le-nho i{display:block;height:100%;background:var(--vna-2)}
.chart .fill.gold{fill:var(--gold)}

/* Dien thoai: thanh duoi day 5 muc giong nhau moi nguoi (Viec · Hop thu · Ho so · Nghi · Menu); "Menu" mo ngan menu
   day du (#sb-toggle) nen nut menu tren thanh tren an di. O nhap 16px de iPhone khong tu phong to khi cham. */
.nav-day{display:none}
@media (max-width:860px){
  html{font-size:16px}
  .tb .menu-btn{display:none}
  .content{padding-bottom:calc(var(--nav-day) + 28px + env(safe-area-inset-bottom))}
  .nav-day{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:60;height:calc(var(--nav-day) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -2px 8px rgba(20,35,43,.05)}
  .nav-day a,.nav-day label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:44px;font-size:11.5px;font-weight:600;color:var(--ink-3);text-decoration:none;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .nav-day .ic{width:22px;height:22px}
  .nav-day .on{color:var(--vna)}
  .nav-day .on::before{content:"";position:absolute;top:0;left:24%;right:24%;height:3px;border-radius:0 0 3px 3px;background:var(--vna)}
  .nav-day .cnt{position:absolute;top:5px;left:calc(50% + 5px);min-width:17px;padding:0 5px;border-radius:9px;background:var(--bad);color:#fff;font-size:10.5px;font-weight:700;line-height:17px;text-align:center;font-variant-numeric:tabular-nums}
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{font-size:16px}
  .row .t{font-size:15px}.row .s{font-size:13.5px}
  .ty-le-nhom{grid-template-columns:96px 1fr 48px}
}
@media print{.nav-day{display:none}}

/* ---------- Lich tuan (10/11/2026, THIET-KE 4 "Goi 2"): moi ngay mot hang, cot trai thu + ngay ---------- */
.lich-tuan .ngay{display:grid;grid-template-columns:132px 1fr;border-bottom:1px solid var(--line-2)}
.lich-tuan .ngay:last-child{border-bottom:0}
.lich-tuan .ngay.cuoi-tuan{background:var(--panel-2)}
.lich-tuan .ngay.hom-nay{box-shadow:inset 3px 0 0 var(--vna)}
.lich-tuan .thu{padding:12px 14px;display:flex;flex-direction:column;gap:3px;align-items:flex-start;border-right:1px solid var(--line-2)}
.lich-tuan .thu b{font-size:13.5px}
.lich-tuan .thu .num{font-size:12.5px;color:var(--ink-3)}
.lich-tuan .muc{padding:6px 0;min-width:0}
.lich-tuan .dong{display:grid;grid-template-columns:92px 1fr auto;gap:10px;align-items:baseline;padding:6px 14px;font-size:13.5px;color:var(--ink);text-decoration:none}
.lich-tuan a.dong:hover{background:var(--vna-3)}
.lich-tuan .dong .gio{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.lich-tuan .dong.hop .gio{color:var(--vna)}
.lich-tuan .dong .nd{min-width:0;overflow-wrap:anywhere}
.lich-tuan .dong .s{display:block;font-size:12.5px;color:var(--ink-3);font-weight:400}
.lich-tuan .dong .r{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.lich-tuan .dong.trong{color:var(--ink-4);grid-template-columns:1fr}
.lich-chu-thich{font-size:12.5px;color:var(--ink-3);margin:12px 2px 0;line-height:1.5}
@media (max-width:640px){
  .lich-tuan .ngay{grid-template-columns:1fr}
  .lich-tuan .thu{flex-direction:row;align-items:baseline;gap:8px;border-right:0;padding:10px 14px 2px}
  .lich-tuan .dong{grid-template-columns:64px 1fr}
  .lich-tuan .dong .r{grid-column:2;justify-content:flex-start}
}
@media print{.lich-tuan .ngay{break-inside:avoid}.lich-tuan .ngay.cuoi-tuan{background:none}.lich-chu-thich a,.page-h .acts{display:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* ---------- Giao dien goi C (nguoi dung chot 01/11/2026 sau khi kiem tung loai trang) ---------- */
/* Luoi 2 / 3 cot co lai duoc: truoc day bieu do 12 thang cua Safety (min 471px) day ca trang rong 519px tren man 375px
   -> trang bi thu nho, thanh duoi day roi khoi man hinh */
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.g-main{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){.g2,.g3{grid-template-columns:minmax(0,1fr)}}
/* Thanh loc: nhan thang hang (o "Go de loc" cua o-chon.js xuong duoi o chon); o tick khong bi keo gian; nut Loc ngang o chon */
.flt{align-items:start}
.flt>div{display:flex;flex-direction:column;min-width:0}
.flt .tim-chon{order:2;margin:4px 0 0;font-size:12.5px;padding:5px 9px}
.flt>div:has(>.btn){flex-direction:row;padding-top:20px}
.flt>.check,.flt>.fld.check{flex-direction:row;align-items:center;gap:7px;padding:20px 0 0!important}
.flt>.check input[type=checkbox],.flt>.fld.check input[type=checkbox]{width:auto;flex:none}
.flt>.check label,.flt>.fld.check label{margin:0}
/* The so (Tong hop doi) + thanh chia doan (trang Viec) thay bieu do vong */
.bar.gold i{background:var(--gold)}
.thanh-doan{display:flex;height:12px;border-radius:6px;background:var(--line-2);overflow:hidden;margin:10px 0 8px}
.thanh-doan i{display:block;height:100%}
.thanh-doan .xong{background:var(--vna-2)}.thanh-doan .cho{background:var(--gold)}.thanh-doan .ly-do{background:var(--ink-4)}
/* Danh sach chu (Bao cao huan luyen): .prose giu xuong dong cua van ban, khong dung cho the ul */
ul.prose{white-space:normal;padding-left:18px;margin:0}
ul.prose li{margin:0 0 8px;line-height:1.6}
/* Dien thoai: chip "ho so nhay cam / co ghi nhat ky" chi con o khoa (chu van doc duoc khi cham giu: title + chu an) */
@media (max-width:860px){
  .tb .lock{font-size:0;padding:6px;gap:0}
  .tb .lock .ic{width:16px;height:16px}
  /* tieu de the dai (ten rui ro "UNSTABLE APPROACH BELOW 1000FT" + nhan muc) tung day trang rong 401px */
  .card .hd{flex-wrap:wrap;row-gap:4px}.card .hd h2{white-space:normal;min-width:0}
}

/* Goi 7 (11/11/2026): nut sao ghim viec o trang Moi viec — dau sao ca nhan */
form.ghim{display:inline;margin-right:4px}
form.ghim button{border:0;background:transparent;padding:0 2px;font-size:16px;line-height:1;cursor:pointer;color:var(--ink-4)}
form.ghim button:hover{color:var(--gold)}
form.ghim button.on{color:var(--gold)}
@media print{form.ghim{display:none}}

/* 11/11/2026 (buoi dung thu theo vai): trang viec cua nguoi giao co 3-4 nut o thanh tren -> o kho hep dong duong dan bi ep
   con 27px, chu xep doc de len tieu de. Duong dan khong xuong dong (cat bang dau ...), cac nut cuon ngang trong khung cua no. */
@media (max-width:860px){
  .tb .crumb{flex:0 1 auto;min-width:96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tb .sp{flex:1 0 2px}
  .tb .acts{flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
  .tb .acts::-webkit-scrollbar{display:none}
  .tb .acts>*{flex:none}
  .tb .acts .btn{white-space:nowrap}
}

/* Dot 2 (11/11/2026): in Bang nhom — chu "in luc ..." chi hien khi in; bang dai duoc ngat trang, khong cat ngang */
.chi-in{display:none}
@media print{
  .chi-in{display:inline}
  .seg,.nhac-1,.nav-day,.legend .mk{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .seg,.nhac-1,.nav-day{display:none!important}
  .card:has(.tbl.matrix){break-inside:auto;overflow:visible!important}
  .tbl.matrix tr{break-inside:avoid}
  .tbl.matrix th,.tbl.matrix td{font-size:11px;padding:5px 6px}
}

/* ---------- Dot 3 (11/11/2026): menu theo vai — cong/menu.py ---------- */
/* Hang the cua cum: cac trang cu gop duoi mot muc menu (vi du Nghi = Nghi cua toi + Duyet nghi + Lich nghi doi). Dang vien
   tron de khac hang .tabs gach chan ma mot so trang da dung ben trong. */
.the-cum{display:flex;gap:6px;margin:0 0 16px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.the-cum::-webkit-scrollbar{display:none}
.the-cum a{flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border:1px solid var(--line);border-radius:999px;background:var(--panel);font-size:13px;font-weight:600;color:var(--ink-3);text-decoration:none;white-space:nowrap}
.the-cum a:hover{background:var(--panel-2);color:var(--ink)}
.the-cum a.on{background:var(--vna-3);border-color:var(--vna-3);color:var(--vna)}
.the-cum .cnt{font-size:11px;font-weight:700;border-radius:10px;padding:0 6px;line-height:1.6;background:var(--line-2);color:var(--ink-2);font-variant-numeric:tabular-nums}
.the-cum .cnt.hot{background:var(--bad);color:#fff}.the-cum .cnt.gold{background:var(--gold-2);color:#8A5800}
.sb nav>a.it:first-child{margin-top:6px}
@media (max-width:860px){.the-cum a{min-height:36px}}
@media print{.the-cum{display:none!important}}
/* O chon nhieu nguoi (o-chon.js): moi dong mot o tick, dong da chon thanh the co dau x, co o go tim */
.chon-nhieu{border:1px solid var(--line);border-radius:var(--r-s);background:#fff}
.cn-da{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line-2);font-size:12.5px;color:var(--ink-3)}
.cn-da button{border:0;background:var(--vna-3);color:var(--vna);border-radius:999px;padding:3px 10px;font:inherit;font-weight:600;cursor:pointer}
.cn-da button:hover{background:var(--bad-bg);color:var(--bad)}
.chon-nhieu .tim-chon{margin:8px 10px 4px;width:calc(100% - 20px)}
.cn-ds{max-height:236px;overflow-y:auto;padding:4px 0}
.f .cn-dong,.cn-dong{display:flex;gap:9px;align-items:center;padding:7px 12px;margin:0;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer}
.cn-dong:hover{background:var(--panel-2)}
.f .cn-dong input,.cn-dong input{width:16px;height:16px;flex:none;accent-color:var(--vna)}
.cn-dong[hidden],.cn-khong[hidden]{display:none}
.cn-khong{padding:8px 12px;font-size:12.5px;color:var(--ink-3)}
@media (max-width:860px){.cn-dong{padding:10px 12px}}
/* Mau tao viec gon (dot 3): tom tat loi dau trang; chi hien o chon dung voi pham vi dang chon; "Them tuy chon" gap san */
.loi-tom-tat ul{margin:6px 0 0 18px;list-style:disc}.loi-tom-tat li{margin:2px 0}
.f [data-theo-pham-vi][hidden]{display:none}
/* Toan canh (dot 4): moi doi mot hang, cac o thang cot giua cac hang; khung hep thi xep 2 cot roi 1 cot */
.tc-hang{display:grid;grid-template-columns:96px repeat(var(--tc-cot,5),minmax(0,1fr));gap:12px;margin-bottom:12px;align-items:stretch}
.tc-doi{display:flex;flex-direction:column;justify-content:center;padding:10px 12px;border-radius:var(--r);background:var(--vna-4);border:1px solid var(--line)}
.tc-doi b{font-size:18px;letter-spacing:-.01em}.tc-doi span{font-size:12px;color:var(--ink-3);overflow-wrap:anywhere}
.tc-hang .stat .v{font-size:24px}.tc-hang .stat .n .chip{white-space:normal;letter-spacing:0;font-size:11.5px}
.tc-trong{box-shadow:none;background:transparent;border-style:dashed}.tc-trong .v{color:var(--ink-3)}
a.stat:hover{border-color:var(--vna-3)}
@media (max-width:1100px){.tc-hang{grid-template-columns:repeat(2,minmax(0,1fr))}.tc-doi{grid-column:1/-1;flex-direction:row;align-items:baseline;gap:10px;justify-content:flex-start}}
@media (max-width:520px){.tc-hang{grid-template-columns:minmax(0,1fr)}}