/* Layout: thanh trên cố định + tab; nội dung một cột trên điện thoại, hai cột trên máy tính */
/* Màu nhận diện Huyền Anh: xanh navy + vàng gold, xanh ngọc làm màu phụ, nền ngà */
:root{
  --bg:#F4F1EA; --panel:#FFFFFF; --ink:#0B1424; --muted:#5A6577; --line:#E2DDD1; --soft:#F8F5EE;
  --navy:#0B1424; --navy2:#070B14; --gold:#9A6A0C; --gold-bg:#F4B942; --gold-lt:#FFE3A3; --gold-soft:#FFF3D6;
  --teal:#0E4F4A; --teal-2:#2FC3A6; --teal-soft:#E3F2EE; --steel:#9FC3D8;
  --bad:#B3261E; --bad-soft:#FBE4E1; --warn:#8A5A00; --warn-soft:#FFF1D2;
  --f-display:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif; --f-body:"Be Vietnam Pro","Segoe UI",system-ui,sans-serif; --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#070B14; --panel:#0B1424; --ink:#EEF2F7; --muted:#9FB0C4; --line:#1E2B42; --soft:#101B30;
  --navy:#070B14; --navy2:#04070D; --gold:#F4B942; --gold-bg:#F4B942; --gold-lt:#FFE3A3; --gold-soft:#2A220F;
  --teal:#2FC3A6; --teal-2:#2FC3A6; --teal-soft:#0E2E2B; --steel:#9FC3D8;
  --bad:#F2887F; --bad-soft:#3A1916; --warn:#F5C267; --warn-soft:#2E2410; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#070B14; --panel:#0B1424; --ink:#EEF2F7; --muted:#9FB0C4; --line:#1E2B42; --soft:#101B30;
  --navy:#070B14; --navy2:#04070D; --gold:#F4B942; --gold-bg:#F4B942; --gold-lt:#FFE3A3; --gold-soft:#2A220F;
  --teal:#2FC3A6; --teal-2:#2FC3A6; --teal-soft:#0E2E2B; --steel:#9FC3D8;
  --bad:#F2887F; --bad-soft:#3A1916; --warn:#F5C267; --warn-soft:#2E2410; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:14px/1.5 var(--f-body);margin:0}
button,input,select,textarea{font:inherit;color:inherit}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:linear-gradient(180deg,#0B1424,#070B14);color:#fff;border-bottom:3px solid var(--gold-bg);box-shadow:0 1px 0 #2FC3A640}
.top .in{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.top img{height:34px;width:auto}
.top .nm{font:700 17px var(--f-display);letter-spacing:.2px}.top .nm span{color:#F4B942}.top .nm{color:#fff}
.top .who{margin-left:auto;display:flex;gap:8px;align-items:center;font-size:12px;color:#B9C7D8}
.top select{background:#101B30;border:1px solid #2B3D58;color:#fff;border-radius:8px;padding:4px 8px}
nav{max-width:1180px;margin:0 auto;padding:0 16px;display:flex;gap:4px;overflow-x:auto}
nav button{background:none;border:0;color:#9FC3D8;padding:9px 12px;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap;margin-bottom:-3px;font-weight:600}
nav button[aria-current="true"]{color:#FFE3A3;border-color:#F4B942}
main{max-width:1180px;margin:0 auto;padding-block:18px 60px;padding-inline:16px}
h1{font:700 22px var(--f-display);margin:0 0 4px;text-wrap:balance}
h2{font:700 16px var(--f-display);margin:0 0 10px}
.sub{color:var(--muted);margin:0 0 16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
.grid{display:grid;gap:14px}.g2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}.g4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.kpi .v{font:700 clamp(18px,5vw,24px) var(--f-display);font-variant-numeric:tabular-nums}.kpi .l{color:var(--muted);font-size:12.5px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:7px 12px;cursor:pointer;font-weight:600}
.btn:hover{border-color:var(--gold-bg)}.btn:focus-visible,nav button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold-bg);outline-offset:1px}
.btn.pri{background:var(--gold-bg);border-color:var(--gold-bg);color:#0B1424}.btn.pri:hover{background:var(--gold-lt);border-color:var(--gold-lt)}.btn.gold{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.sm{padding:4px 9px;font-size:12.5px}.btn.bad{color:var(--bad)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
input,select,textarea{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 9px;min-width:0}
label.f{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted)}label.f>*{color:var(--ink)}
.fields{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--soft);font-size:12px;color:var(--muted);font-weight:700;white-space:nowrap}
td.n,th.n{text-align:right;white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr.click{cursor:pointer}tbody tr.click:hover{background:var(--soft)}
.pill{display:inline-block;padding:2px 9px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap}
.s-bg{background:var(--soft);color:var(--muted)}.s-chot{background:var(--gold-soft);color:var(--gold)}.s-sx{background:var(--teal-soft);color:var(--teal)}
.s-lap{background:var(--warn-soft);color:var(--warn)}.s-xong{background:var(--teal);color:var(--panel)}.s-huy{background:var(--bad-soft);color:var(--bad)}
.muted{color:var(--muted)}.mono{font-family:var(--f-mono);font-size:12.5px}
.tot{font:700 20px var(--f-display);font-variant-numeric:tabular-nums}
.banner{border-radius:10px;padding:10px 12px;background:var(--warn-soft);color:var(--warn);margin-bottom:14px;font-size:13px}
.steps{display:flex;gap:6px;flex-wrap:wrap}
.step{flex:1 1 120px;border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center;cursor:pointer;background:var(--panel);font-weight:600}
.step.done{background:var(--teal-soft);border-color:var(--teal);color:var(--teal)}
.step small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.bar{display:flex;height:26px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--bad-soft)}
.bar div{border-right:2px solid var(--panel);background:var(--teal-soft);color:var(--ink);font-size:11px;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;min-width:0}
.sheet svg{max-width:100%;height:auto;background:var(--bad-soft);border:1px solid var(--line);border-radius:6px}
.tabs2{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.tabs2 .btn[aria-pressed="true"]{background:var(--navy);color:#FFE3A3;border-color:var(--gold-bg)}
.qr{background:#fff;padding:8px;border-radius:8px;display:inline-block}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:#0B1424;color:#FFE3A3;border:1px solid #F4B942;padding:9px 16px;border-radius:99px;z-index:9;font-weight:600}
textarea{width:100%;min-height:110px}
.formula{font-family:var(--f-mono);font-size:12.5px}
.empty{padding:26px;text-align:center;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){.card{transition:border-color .15s}}

.top .who{margin:0}
.btn.dark{background:#16233A;border-color:#2B3D58;color:#fff}
.banner.bad{background:var(--bad-soft);color:var(--bad)}
.auth{max-width:440px;margin:24px auto;display:grid;gap:14px}
.alogo{height:44px;width:auto;background:#0B1424;padding:8px 12px;border-radius:10px;justify-self:start}
.auth h1{margin:0}
.kpi{border-top:3px solid var(--gold-bg)}
.card h2{color:var(--ink)}
.tot{color:var(--gold)}

/* Bản vẽ mặt đứng */
:root{--bv-k:#0B1424;--bv-m:#5A6577;--bv-g:#D5ECF4;--bv-t:#ECE6D8;--bv-d:#9A6A0C;--bv-n:#FFFFFF}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bv-k:#EEF2F7;--bv-m:#9FB0C4;--bv-g:#17384A;--bv-t:#26324A;--bv-d:#F4B942;--bv-n:#0B1424}}
:root[data-theme="dark"]{--bv-k:#EEF2F7;--bv-m:#9FB0C4;--bv-g:#17384A;--bv-t:#26324A;--bv-d:#F4B942;--bv-n:#0B1424}
.bvsvg{background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:10px;margin-top:8px}
.bvsvg svg{display:block;max-height:520px}
.bv{margin-bottom:14px;break-inside:avoid}
.bvhd{display:none}
.ck{display:flex;gap:8px;align-items:center;padding:4px 0}
.tkimg{display:block;width:100%;max-height:360px;object-fit:contain;border-radius:10px;margin-top:10px;background:var(--soft);border:1px solid var(--line)}
.tkimg.empty{height:160px;display:grid;place-items:center;color:var(--muted)}
.tkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.tkfig{margin:0}.tkfig img{width:100%;border-radius:10px;display:block;border:1px solid var(--line)}
.tkfig figcaption{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-top:6px}
.tkpre{white-space:pre-wrap;font:12px/1.5 var(--f-mono);background:var(--soft);padding:10px;border-radius:8px;overflow:auto;max-height:240px}
/* ===== Giao diện tối xanh ngọc (theo mẫu nhận diện Huyền Anh KTS AI) ===== */
:root,:root[data-theme="dark"],:root[data-theme="light"]{
  --bg:#060B0B; --panel:rgba(12,25,24,.80); --ink:#EAF4F1; --muted:#93ABA5; --line:rgba(52,217,168,.18); --soft:rgba(52,217,168,.06);
  --navy:#050A0A; --navy2:#030707; --gold:#3DDBB0; --gold-bg:#34D9A8; --gold-lt:#7FF0CF; --gold-soft:rgba(52,217,168,.14);
  --teal:#34D9A8; --teal-2:#34D9A8; --teal-soft:rgba(52,217,168,.13); --steel:#9FC3D8; --coral:#F2876A; --coral-soft:rgba(242,135,106,.13);
  --bad:#FF8E7E; --bad-soft:rgba(255,120,100,.13); --warn:#F7B58A; --warn-soft:rgba(242,135,106,.12); color-scheme:dark;
  --bv-k:#A6F5DC; --bv-m:#5FB39C; --bv-g:rgba(52,217,168,.14); --bv-t:rgba(52,217,168,.06); --bv-d:#F2876A; --bv-n:#060B0B}
@media (prefers-color-scheme: light){:root:not([data-theme]){
  --bg:#060B0B; --panel:rgba(12,25,24,.80); --ink:#EAF4F1; --muted:#93ABA5; --line:rgba(52,217,168,.18); --soft:rgba(52,217,168,.06);
  --navy:#050A0A; --gold:#3DDBB0; --gold-bg:#34D9A8; --gold-lt:#7FF0CF; --gold-soft:rgba(52,217,168,.14); --teal:#34D9A8; --teal-soft:rgba(52,217,168,.13);
  --bad:#FF8E7E; --bad-soft:rgba(255,120,100,.13); --warn:#F7B58A; --warn-soft:rgba(242,135,106,.12); color-scheme:dark;
  --bv-k:#A6F5DC; --bv-m:#5FB39C; --bv-g:rgba(52,217,168,.14); --bv-t:rgba(52,217,168,.06); --bv-d:#F2876A; --bv-n:#060B0B}}
body{background:
  radial-gradient(900px 520px at 88% -8%, rgba(47,195,166,.24), transparent 62%),
  radial-gradient(700px 520px at -12% 38%, rgba(47,195,166,.10), transparent 62%),
  radial-gradient(600px 400px at 100% 100%, rgba(242,135,106,.07), transparent 60%),
  linear-gradient(rgba(52,217,168,.035) 1px, transparent 1px) 0 0/44px 44px,
  linear-gradient(90deg, rgba(52,217,168,.035) 1px, transparent 1px) 0 0/44px 44px,
  #060B0B; background-attachment:fixed; min-height:100vh}
.top{background:rgba(5,10,10,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(52,217,168,.28);box-shadow:0 8px 30px rgba(0,0,0,.35)}
.top .nm span{color:#3DDBB0}.top .who{color:#93ABA5}
.top select,.btn.dark{background:rgba(52,217,168,.08);border-color:rgba(52,217,168,.3);color:#EAF4F1}
nav button{color:#93ABA5}nav button[aria-current="true"]{color:#3DDBB0;border-color:#34D9A8}
h1{color:#fff;letter-spacing:.2px}
.card{border-radius:16px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 10px 30px rgba(0,0,0,.25)}
.card h2{color:#fff}
.kpi{border-top:0;border-left:3px solid var(--gold-bg)}.kpi .v{color:#3DDBB0}
.btn{background:rgba(52,217,168,.05);border-color:rgba(52,217,168,.22)}.btn:hover{border-color:#34D9A8}
.btn.pri{background:linear-gradient(180deg,#44E4B6,#2CC79B);border-color:#34D9A8;color:#03201A;box-shadow:0 0 18px rgba(52,217,168,.35)}
.btn.pri:hover{background:#7FF0CF;border-color:#7FF0CF}
.btn.gold{background:transparent;border-color:#34D9A8;color:#3DDBB0}
.btn.bad{color:var(--bad);border-color:rgba(255,142,126,.35)}
.tabs2 .btn[aria-pressed="true"],.btn[aria-pressed="true"]{background:rgba(52,217,168,.16);color:#3DDBB0;border-color:#34D9A8}
input,select,textarea{background:rgba(0,0,0,.28);border-color:rgba(52,217,168,.2)}
option{background:#0B1716;color:#EAF4F1}
th{background:rgba(52,217,168,.07);color:#8FD9C2;letter-spacing:.3px}
.tw{background:rgba(0,0,0,.15)}
.pill.s-chot{background:var(--coral-soft);color:var(--coral)}
.s-xong{background:#34D9A8;color:#03201A}
.banner{border:1px solid rgba(242,135,106,.25)}
.tot{color:#3DDBB0;text-shadow:0 0 18px rgba(52,217,168,.35)}
.step.done{background:rgba(52,217,168,.14);border-color:#34D9A8;color:#3DDBB0}
.toast{background:#0B1A18;color:#3DDBB0;border-color:#34D9A8;box-shadow:0 0 20px rgba(52,217,168,.3)}
.alogo{background:transparent;padding:0}
.bvsvg{background:linear-gradient(rgba(52,217,168,.05) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(52,217,168,.05) 1px,transparent 1px) 0 0/24px 24px,rgba(0,0,0,.25)}
.qr{background:#fff}
.quytrinh{gap:6px}.quytrinh .so{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:rgba(52,217,168,.18);color:#3DDBB0;font-size:11px;margin-right:6px}
.quytrinh .btn[aria-pressed="true"] .so{background:#34D9A8;color:#03201A}
@media print{
  header.top,nav,#nav,.tabs2,.banner,.noin,.btn,#toast{display:none!important}
  body,main{background:#fff!important;color:#000}
  h1,.card h2{color:#000!important}
  th{color:#000!important;background:#f3f3f3!important}.tot{text-shadow:none}
  :root{--bv-k:#000;--bv-m:#444;--bv-g:#e3f1f6;--bv-t:#eee;--bv-d:#7a5200;--soft:#fff;--line:#bbb;--panel:#fff;--ink:#000;--muted:#333}
  .bvhd{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:12px}
  .bvhd img{height:40px;background:#0B1424;padding:6px 10px;border-radius:6px}
  .card{box-shadow:none!important;border:1px solid #bbb}
  .bvsvg svg{max-height:150mm}
  main h1,main .sub{display:none}
}

/* Bản in báo giá */
#inbg{display:none}
@media print{
  body.in-bg > :not(#inbg){display:none!important}
  body.in-bg #inbg{display:block!important;color:#000;font-size:12.5px}
  .bg-in h1,.bg-in h3{color:#000!important}
  .bg-hd{display:flex;gap:14px;align-items:center;border-bottom:2px solid #0B6E57;padding-bottom:10px}
  .bg-hd img{height:42px;background:#0B1424;padding:6px 10px;border-radius:6px}
  .bg-x{font-size:17px;font-weight:700;color:#0B6E57;text-transform:uppercase}
  .bg-tt{text-align:center;font-size:22px;margin:16px 0 2px;display:block!important}
  .bg-so{text-align:center;font-style:italic;color:#444;margin:0 0 12px}
  .bg-in table{width:100%;border-collapse:collapse;margin-bottom:10px}
  .bg-kh td{padding:3px 6px;border:none}.bg-kh td:nth-child(odd){color:#444;width:14%}
  .bg-t th{background:#0B6E57!important;color:#fff!important;padding:6px;border:1px solid #999;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .bg-t td{border:1px solid #999;padding:5px 6px;vertical-align:top}
  .bg-t .n{text-align:right;white-space:nowrap}.bg-t .c{text-align:center}.bg-t .b{font-weight:700}
  .bg-tong td{font-weight:700;font-size:14px;color:#B23B1E;background:#E6F7F1!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .bg-chu{font-style:italic;margin:0 0 10px}
  .bg-in h3{font-size:13px;margin:12px 0 4px}.bg-in ul{margin:0;padding-left:18px}
  .bg-ky{display:grid;grid-template-columns:1fr 1fr;text-align:center;margin-top:24px;min-height:110px}
  .bg-ft{text-align:center;color:#888;font-size:10px;margin-top:10px}
  .bg-t tr{break-inside:avoid}
}
@media print{html:has(body.in-bg),body.in-bg{background:#fff!important}}
@media print{@page{size:A4;margin:12mm}}
@media print{:root,:root:not([data-theme]){color-scheme:light!important}}

/* Chấm công */
.ccwrap{max-height:70vh}
.ccbang{border-collapse:separate;border-spacing:0;font-size:12px}
.ccbang th,.ccbang td{padding:2px;text-align:center}
.ccbang .cct{position:sticky;left:0;z-index:2;background:#0B1A18;text-align:left;padding:4px 8px;white-space:nowrap;min-width:110px}
.ccbang thead th{position:sticky;top:0;z-index:1;background:#0B1A18}.ccbang thead .cct{z-index:3}
.ccbang .ccd span{font-size:10px;color:var(--muted)}
.ccbang .cn{background:rgba(242,135,106,.08)}
.ccb{width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:transparent;color:var(--ink);font-weight:700;cursor:pointer;padding:0}
.ccb.vx{background:#34D9A8;color:#03201A;border-color:#34D9A8}.ccb.vh{background:rgba(52,217,168,.3);color:#EAF4F1}.ccb.vn{background:rgba(255,120,100,.18);color:#FF8E7E}
.cctong td{border-top:2px solid var(--line)}
@media (max-width:640px){.cchn{flex-direction:column;align-items:flex-start}}
@media print{.bg-luong td:nth-child(2){white-space:nowrap}.bg-luong{font-size:11.5px}}