/* EMES Intranet - giao diện sáng theo màu web công ty: nền trắng, xanh #0768AD, nhấn cam */
:root{
  --brand:#0768AD; --brand-ink:#05548C; --brand-soft:#E6F0F8;
  --orange:#F28C1E; --orange-soft:#FDF0E1;
  --bg:#F3F6F9; --surface:#FFFFFF; --surface-2:#F8FAFC;
  --fg:#16212C; --muted:#5B6B7B; --line:#DCE3EA;
  --ok:#1E8A4C; --ok-soft:#E3F3E9; --warn:#B86E00; --warn-soft:#FDF1DC; --bad:#C0392B; --bad-soft:#FBE7E4;
  --font:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --r:8px; color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:14px;line-height:1.5}
a{color:var(--brand)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.mono{font-family:var(--mono);font-size:.92em}
.num{font-variant-numeric:tabular-nums}
.b{font-weight:600}
.mt{margin-top:14px}.mt-s{margin-top:6px}.mb{margin-bottom:16px}

/* thanh trên */
.top{position:sticky;top:0;z-index:20;background:var(--surface);display:flex;align-items:center;gap:16px;padding:10px 20px;border-bottom:1px solid var(--line);box-shadow:inset 0 -3px 0 var(--brand)}
.logo{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--brand);text-decoration:none;white-space:nowrap;font-size:16px}
.logo-img{display:flex;align-items:center;flex:none}
.logo-img img{height:32px;width:auto;display:block}
.logo-img .mark{width:30px;height:30px;border-radius:6px;background:var(--brand);display:grid;place-items:center;color:#fff;font-size:13px;font-weight:700}
.logo .mark{width:30px;height:30px;border-radius:6px;background:var(--brand);display:grid;place-items:center;color:#fff;font-size:13px}
.search{flex:1;max-width:520px;min-width:0}
.search input{width:100%;border:1px solid var(--line);border-radius:6px;padding:8px 12px;background:var(--surface-2)}
.who{display:flex;align-items:center;gap:8px;margin-left:auto}
.me-name{font-weight:500}
.menu-btn{display:none;background:transparent;border:1px solid var(--line);border-radius:6px;padding:4px 10px;cursor:pointer}

/* khung */
.shell{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:calc(100vh - 55px);background:linear-gradient(90deg,var(--surface) 0,var(--surface) 236px,var(--bg) 236px)}
nav.rail{background:var(--surface);border-right:1px solid var(--line);padding:16px 10px;display:flex;flex-direction:column;gap:14px;position:sticky;top:55px;height:calc(100vh - 55px);overflow:auto}
.rail h4{margin:0 10px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.rail a{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;color:var(--fg);text-decoration:none}
.rail a:hover{background:var(--surface-2)}
.rail a.on{background:var(--brand-soft);color:var(--brand-ink);font-weight:600}
.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7}
.ic.xl{width:22px;height:22px;stroke:var(--ok)}
.grp{display:flex;flex-direction:column;gap:2px}
main{padding:22px 28px 48px;min-width:0}
.crumb{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
h1{font-size:24px;margin:2px 0 4px;text-wrap:balance}
h2{font-size:16px;margin:0 0 10px}
h2.h3{font-size:17px;margin:6px 0}
.lede{color:var(--muted);margin:0 0 18px;max-width:75ch}
.loading{display:flex;align-items:center;gap:10px;color:var(--muted);padding:40px 0}
.spin{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--brand);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.home{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.stack{display:flex;flex-direction:column;gap:16px;min-width:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.panel-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.panel-h h2{margin:0}
.panel-h a{font-size:13px}
.stat .n{font-size:26px;font-weight:700}.stat .n.ok{color:var(--ok)}

.hero{display:grid;gap:8px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:var(--r);padding:22px;position:relative;overflow:hidden;text-decoration:none;color:var(--fg)}
.hero::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;border:20px solid var(--brand-soft);border-radius:50%}
.hero .tag{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--orange);font-weight:600}
.hero h2{color:var(--brand-ink);font-size:21px;margin:0;max-width:34ch;position:relative;z-index:1}
.hero p{margin:0;max-width:65ch;color:var(--muted);position:relative;z-index:1}

.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.tile{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--fg);text-decoration:none}
.tile:hover{border-color:var(--brand)}
.tile .ic{width:22px;height:22px;stroke:var(--brand)}
.tile b{font-weight:600;font-size:13px}
.tile span{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.list{display:flex;flex-direction:column}
.row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.row:first-child{border-top:0;padding-top:0}
.row .main{flex:1;min-width:0}
.row .r{text-align:right}
.t{font-weight:600}
.s{color:var(--muted);font-size:13px}
.txt{font-size:13px;margin-top:4px}
.empty{color:var(--muted);font-size:13px;padding:6px 0}
.datebox{width:46px;flex:none;text-align:center;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--surface)}
.datebox i{display:block;font-style:normal;background:var(--orange);color:#fff;font-size:10px;letter-spacing:.04em;padding:1px 0}
.datebox b{display:block;font-size:17px;padding:2px 0}
.pill{display:inline-flex;align-items:center;border-radius:999px;padding:1px 9px;font-size:12px;font-weight:600;white-space:nowrap}
.p-ok{background:var(--ok-soft);color:var(--ok)}.p-warn{background:var(--warn-soft);color:var(--warn)}.p-bad{background:var(--bad-soft);color:var(--bad)}
.p-info{background:var(--brand-soft);color:var(--brand-ink)}.p-org{background:var(--orange-soft);color:var(--warn)}
.av{border-radius:50%;flex:none;display:inline-grid;place-items:center;font-weight:600;font-size:13px;color:#fff;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--brand)}
.bar.org i{background:var(--orange)}

table{width:100%;border-collapse:collapse}
.tbl{overflow-x:auto}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600;background:var(--surface-2);white-space:nowrap}
td.r,th.r{text-align:right}
td.w{min-width:110px}

.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:7px 12px;cursor:pointer;font-weight:500;text-decoration:none;color:var(--fg)}
.btn:hover{border-color:var(--brand)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.pri:hover{background:var(--brand-ink)}
.btn.sm{padding:3px 10px;font-size:12px}
.btn.bad{color:var(--bad)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

form.f{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.f label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:var(--muted)}
.f .full{grid-column:1/-1}
.f input,.f select,.f textarea,.toolbar input,.actions input{border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:var(--surface);font-weight:400;font-size:14px;width:100%;color:var(--fg)}
.actions input{width:auto;padding:4px 8px}
.f textarea{min-height:70px;resize:vertical}
.msg{padding:8px 12px;border-radius:6px;font-size:13px;background:var(--bad-soft);color:var(--bad)}

.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.toolbar input{max-width:320px}
.chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:3px 11px;cursor:pointer;font-size:13px}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff}

.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;gap:12px;min-width:0}
.card .main{min-width:0;flex:1;display:flex;flex-direction:column;gap:1px}
.card .s{overflow-wrap:anywhere}
.card .actions{margin-top:8px}
.who .big,.panel .who .big{font-weight:700;font-size:18px}
.panel .who{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 14px;margin:0}
.kv dt{color:var(--muted)}.kv dd{margin:0;overflow-wrap:anywhere}
.lock{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:6px;background:var(--brand-soft);color:var(--brand-ink);font-size:13px;margin-bottom:14px}
.body{margin:4px 0 8px;max-width:80ch}
.body p{margin:0 0 6px}
.evc{display:flex;gap:12px}.evc .main{min-width:0;flex:1}
.tool-h{display:flex;gap:8px;align-items:center}

/* lịch xe */
.tl{overflow-x:auto}
.tl-inner{min-width:720px}
.tl-head,.tl-row{display:grid;grid-template-columns:160px 1fr;align-items:center}
.tl-hours{display:grid;font-size:11px;color:var(--muted)}
.tl-hours span{border-left:1px solid var(--line);padding-left:3px}
.tl-row{border-top:1px solid var(--line);min-height:48px}
.tl-veh{font-size:13px;padding-right:8px}.tl-veh b{display:block}
.tl-track{position:relative;height:48px;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(100%/var(--n) - 1px),var(--line) calc(100%/var(--n) - 1px),var(--line) calc(100%/var(--n)))}
.bk{position:absolute;top:9px;bottom:9px;border-radius:5px;padding:2px 6px;font-size:11px;color:#fff;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bk.approved{background:var(--brand)}.bk.pending{background:var(--orange)}

/* lịch sự kiện */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);min-width:560px}
.cal div{border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-height:84px;padding:4px;font-size:12px;min-width:0}
.cal .dow{min-height:auto;background:var(--surface-2);font-weight:600;color:var(--muted);text-align:center}
.cal .out{background:var(--surface-2)}
.cal .today{box-shadow:inset 0 0 0 2px var(--orange)}
.cal .ev{display:block;margin-top:3px;background:var(--brand-soft);color:var(--brand-ink);border-radius:3px;padding:1px 4px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:11px}

.toast{position:fixed;right:16px;bottom:16px;background:#16212C;color:#fff;padding:10px 16px;border-radius:6px;z-index:50;box-shadow:0 6px 20px rgba(0,0,0,.25);max-width:calc(100vw - 32px)}
.toast.bad{background:var(--bad)}
.demo-foot{margin-top:28px;color:var(--muted);font-size:12px}
.demo-note{display:inline-block;background:var(--orange-soft);color:var(--warn);border-radius:4px;padding:1px 8px;font-weight:600;margin-right:6px}

@media (max-width:1100px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:880px){
  .shell{grid-template-columns:1fr;background:var(--bg)}
  nav.rail{display:none;position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  body.nav-open nav.rail{display:flex}
  .menu-btn{display:inline-block}
  .home,.g2,.g3{grid-template-columns:1fr}
  .search,.me-name{display:none}
  main{padding:18px 16px 40px}
  .top{padding:10px 16px}
  form.f{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}.kv dt{margin-top:6px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* dụng cụ thi công */
.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.stat .n.bad{color:var(--bad)}.stat .n.warn{color:var(--warn)}
.toolbar select{border:1px solid var(--line);border-radius:6px;padding:7px 10px;background:var(--surface)}
table.eq td.act{white-space:nowrap}
table.eq td.act .btn,table.eq td.act .pill{margin:2px 0 2px 4px}
tr.sub td{background:var(--surface-2)}
.hist{display:flex;flex-direction:column;gap:6px;padding:4px 2px}
.hist .row{padding:8px 0}
.modal{position:fixed;inset:0;background:rgba(22,33,44,.45);display:grid;place-items:center;z-index:40;padding:16px}
.modal .sheet{background:var(--surface);border-radius:10px;padding:18px;width:min(640px,100%);max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 12px 40px rgba(0,0,0,.25)}
@media (max-width:1100px){.g5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:880px){.g5{grid-template-columns:repeat(2,minmax(0,1fr))}}
table.eq td.mono{white-space:nowrap}
.btns{display:flex;flex-wrap:wrap;gap:8px}
.stepn{width:28px;height:28px;flex:none;border-radius:50%;background:var(--brand);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600}
.eqcell{display:flex;align-items:flex-start;gap:10px}
table.eq td:nth-child(2){min-width:240px}
.eqthumb{width:44px;height:44px;flex:none;border-radius:6px;border:1px solid var(--line);background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;color:var(--muted)}
.eqthumb img{width:100%;height:100%;object-fit:cover}
.eqthumb svg{width:20px;height:20px;opacity:.5}
.eqdetail{display:flex;gap:16px;align-items:flex-start}
.eqdetail .hist{flex:1;min-width:0}
.eqbig{width:220px;aspect-ratio:4/3;flex:none;border:1px solid var(--line);border-radius:8px;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;overflow:hidden;padding:0;cursor:zoom-in;text-align:center}
.eqbig.none{cursor:default;color:var(--muted);padding:10px}
.eqbig.none svg{width:28px;height:28px;opacity:.5}
.eqbig img{width:100%;height:100%;object-fit:cover}
.photo-in{display:flex;gap:14px;align-items:center;border-top:1px solid var(--line);padding-top:12px}
.photo-in .pv{width:120px;height:90px;flex:none;border:1px dashed var(--line);border-radius:8px;display:flex;flex-direction:column;gap:4px;align-items:center;justify-content:center;overflow:hidden;color:var(--muted);background:var(--bg)}
.photo-in .pv img{width:100%;height:100%;object-fit:cover}
.photo-in .pv svg{width:24px;height:24px;opacity:.5}
.photo-in label.btn{cursor:pointer}
.modal.lb{cursor:zoom-out}
.modal.lb figure{margin:0;max-width:92vw;max-height:90vh;text-align:center}
.modal.lb img{max-width:92vw;max-height:82vh;border-radius:8px;background:#fff;display:block;margin:0 auto}
.modal.lb figcaption{color:#fff;margin-top:8px;font-weight:500}
@media (max-width:700px){.eqdetail{flex-direction:column}.eqbig{width:100%}}
.photo-in label.btn{display:inline-flex;width:auto;margin-top:8px}.photo-in .btn.bad{margin-top:8px}
.modal.lb{background:rgba(10,15,20,.85)}
.hero h2 a{color:inherit;text-decoration:none}
.hero h2 a:hover{text-decoration:underline}
.hero-act{display:flex;flex-wrap:wrap;gap:8px;position:relative;z-index:1}
.hero-act .actions{margin:0}
.body a{text-decoration:underline}
.btn svg{width:15px;height:15px}
/* Trình xem PDF lật trang */
body.pdfv-open{overflow:hidden}
.pdfv{position:fixed;inset:0;z-index:60;background:#1d2730;display:flex;flex-direction:column;color:#fff}
.pdfv.pdfv-busy{background:rgba(22,33,44,.7);align-items:center;justify-content:center}
.pdfv-bar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#0f171e;border-bottom:3px solid var(--orange);flex-wrap:wrap}
.pdfv-title{flex:1;min-width:160px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdfv-tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pdfv-b{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:6px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;text-decoration:none;line-height:1.2}
.pdfv-b:hover{background:rgba(255,255,255,.18)}
.pdfv-x{border-color:var(--orange)}
.pdfv-b[data-a=prev],.pdfv-b[data-a=next]{font-size:18px;padding:3px 12px}
.pdfv-pg{font-size:13px;min-width:110px;text-align:center;opacity:.9;font-variant-numeric:tabular-nums}
.pdfv-stage{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:12px}
.pdfv-book{box-shadow:0 10px 40px rgba(0,0,0,.5)}
.pdfv-load{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:24px}
.pdfv-msg{font-size:14px;opacity:.9}
.pdfv-spin{width:36px;height:36px;border:4px solid rgba(255,255,255,.2);border-top-color:var(--orange);border-radius:50%;animation:pdfvspin .9s linear infinite}
@keyframes pdfvspin{to{transform:rotate(360deg)}}
.pdfv-zoom{position:absolute;inset:0;overflow:auto;background:#1d2730;display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px}
.pdfv-zoom img{width:min(1000px,100%);height:auto;background:#fff;box-shadow:0 6px 24px rgba(0,0,0,.4)}
@media (max-width:640px){.pdfv-bar{padding:8px}.pdfv-b{padding:5px 8px;font-size:12px}.pdfv-pg{min-width:80px}}
.row a.t{color:var(--fg);text-decoration:none;display:block}.row a.t:hover{color:var(--brand);text-decoration:underline}
/* Dự án */
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.pcard{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--fg);text-decoration:none;transition:border-color .15s,box-shadow .15s}
.pcard:hover{border-color:var(--brand);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.pc-h{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted)}
.pc-t{font-weight:600;font-size:16px;line-height:1.3}
.pc-s{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-f{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:4px;padding-top:8px;border-top:1px solid var(--line)}
.pc-f span{color:var(--brand);font-weight:600}
.ficon{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:6px;background:var(--bg,#f3f5f8);flex:none}
.ficon .ic{width:18px;height:18px;stroke:var(--muted)}
.ficon.fold .ic{stroke:#c98a10;fill:#fbd46d33}
a.frow{text-decoration:none;color:var(--fg)}
a.frow:hover .t{color:var(--brand)}
@media (max-width:820px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Finance: hồ sơ thanh toán */
table.pay td.act{white-space:nowrap}
table.pay td{vertical-align:top}
table.pay tr.muted td{opacity:.55}
.paysel{border:1px solid var(--line);border-radius:6px;padding:5px 8px;background:var(--surface);font-size:13px;max-width:170px}
label.chk{display:inline-flex;gap:6px;align-items:center;font-weight:400;font-size:13px;flex-direction:row}
label.chk input{width:auto}
.stat .s{margin-top:2px}
.ctline{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ctline a{color:inherit;text-decoration:underline dotted}
.debtbox .n{font-size:22px;font-weight:700}.debtbox .n.ok{color:var(--ok)}.debtbox .n.warn{color:var(--warn)}.s.bad{color:var(--bad)}
table.debt th{text-align:right}table.debt th:first-child{text-align:left}table.debt thead tr:first-child th{text-align:center}
table.debt tr.click{cursor:pointer}table.debt tr.click:hover td{background:var(--surface-2,rgba(0,0,0,.02))}
table.debt tr.total td{border-top:2px solid var(--line)}
/* Procurement: vendor list */
table.vend tr.click{cursor:pointer}table.vend tr.click:hover td{background:rgba(7,104,173,.04)}
table.vend td{vertical-align:top}
.vdetail{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 24px;font-size:13px;padding:4px 0}
@media (max-width:820px){.vdetail{grid-template-columns:1fr}}
table.vend a[href^="tel"]{white-space:nowrap}table.vend td.mono .s{font-family:inherit;font-weight:400}
/* Material Pricing */
.pzgrid{grid-template-columns:minmax(0,2.3fr) minmax(0,1fr);align-items:start}
@media (max-width:1100px){.pzgrid{grid-template-columns:1fr}}
form.f.pzset{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:880px){form.f.pzset{grid-template-columns:repeat(2,minmax(0,1fr))}}
table.pz td{vertical-align:top}table.pz td.num{white-space:nowrap;padding-top:14px}
table.pz input.pzin{width:100%;min-width:200px;border:1px solid var(--line);border-radius:6px;padding:7px 9px;font-size:13px;background:var(--surface);color:var(--fg)}
.pzmsg{font-size:12px;margin-top:3px;display:flex;flex-direction:column;gap:2px}.pzmsg .bad{color:var(--bad)}
.pzcat{max-height:560px;overflow:auto}.pzcat button.row{width:100%;text-align:left;background:none;border:0;cursor:pointer;font:inherit;color:inherit}
.pzcat button.row:hover{background:rgba(7,104,173,.05)}
table.pl input.plin,table.pay input.brin{width:110px;border:1px solid var(--line);border-radius:5px;padding:5px 7px;text-align:right;font-size:13px;background:var(--surface);color:var(--fg)}
table.pay input.brin[type=date]{width:150px;text-align:left}
input.dirty{background:#FFF7D6 !important;border-color:#E0B300 !important}
table.pl tr.newrow td{background:rgba(30,138,76,.06)}
.warnbox{border-left:4px solid var(--warn);background:var(--warn-soft)}
table.pz th{white-space:nowrap}

/* ---------- DB Schedule (công cụ tính toán tủ điện) ---------- */
a.tool-web{display:block;text-decoration:none;color:inherit;border-left:4px solid var(--orange)}
a.tool-web:hover{background:var(--orange-soft)}
a.tool-web .tool-h{display:flex;align-items:center;gap:10px}
a.tool-web p{margin:6px 0 0;color:var(--muted)}
.dbc-help{margin:0;padding-left:20px}.dbc-help li{margin:4px 0}
.dbc{display:flex;flex-direction:column;gap:12px;margin:-4px 0 0}
.dbc-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px 12px;position:sticky;top:62px;z-index:6}
.dbc-title{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.dbc-title b{font-size:15px}
.dbc-state{font-size:12px;color:var(--muted);margin-left:auto}
.dbc-state.dirty{color:var(--warn);font-weight:600}
.dbc-body{display:grid;grid-template-columns:230px minmax(0,1fr);gap:12px;align-items:start}
.dbc-tree{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:8px;position:sticky;top:122px;max-height:calc(100vh - 140px);overflow:auto}
.dbc-node{display:flex;align-items:center;gap:6px;width:100%;border:0;background:transparent;text-align:left;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:13px}
.dbc-node:hover{background:var(--surface-2)}
.dbc-node.on{background:var(--brand-soft);color:var(--brand-ink)}
.dbc-node b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.dbc-node .s{font-size:11px;white-space:nowrap}
.lv{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 4px;background:var(--surface)}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--line)}
.d-ok{background:var(--ok)}.d-warn{background:var(--warn)}.d-bad{background:var(--bad)}.d-info{background:#9AA8B5}
.dbc-src{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--orange);font-weight:700;margin:10px 8px 2px}
.dbc-add{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.dbc-main{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;min-width:0}
.dbc-h{font-size:15px;margin:18px 0 8px}.dbc-h:first-child{margin-top:0}
.dbc-ph{display:flex;align-items:center;gap:10px;margin-bottom:6px}.dbc-ph h2{margin:0;font-size:18px}
.dbc-form{display:flex;flex-wrap:wrap;gap:10px 14px;margin:6px 0 10px}
.dbf{display:flex;flex-direction:column;gap:3px;font-size:12px;color:var(--muted)}
.dbf i{font-style:normal;font-size:11px}
.dbi{border:1px solid var(--line);border-radius:5px;padding:4px 6px;background:#fff;font-size:13px;color:var(--fg);min-width:0}
.dbi:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 2px var(--brand-soft)}
select.dbi{padding:3px 2px}
.dbc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin:8px 0 12px}
.dbc-card{border:1px solid var(--line);border-radius:6px;padding:8px 10px;background:var(--surface-2)}
.dbc-card .v{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.dbc-card .s{font-size:11px;color:var(--muted)}
.dbc-card.c-bad{border-color:var(--bad);background:var(--bad-soft)}.dbc-card.c-warn{border-color:var(--warn);background:var(--warn-soft)}.dbc-card.c-ok{border-color:#B9DCC7}
.dbc-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:10px}
.dbc-gridbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.dbc-gridbar .s{font-size:12px;color:var(--muted)}
.dbc-grid{border:1px solid var(--line);border-radius:6px;max-height:calc(100vh - 260px);overflow:auto}
table.dbg{border-collapse:separate;border-spacing:0;font-size:12px;min-width:100%}
table.dbg th{position:sticky;top:0;z-index:2;background:#EEF3F7;color:var(--muted);font-weight:600;text-align:left;padding:6px 5px;border-bottom:1px solid var(--line);white-space:nowrap}
table.dbg td{padding:3px 4px;border-bottom:1px solid #EEF1F4;vertical-align:middle;white-space:nowrap}
table.dbg td.o{background:#F6F8FA}
table.dbg .stk{position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 var(--line)}
table.dbg th.stk{z-index:3;background:#EEF3F7}
table.dbg tr.rv td.rn{box-shadow:inset 3px 0 0 var(--bad)}
table.dbg tr.inc td{background:var(--brand-soft);font-weight:500;border-top:2px solid var(--brand)}
table.dbg td.rn{color:var(--muted);text-align:right;width:28px}
table.dbg .dbi{font-size:12px;padding:3px 4px}
table.dbg .pill{font-size:11px;padding:0 7px}
.nw{white-space:nowrap}.t-bad{color:var(--bad);font-weight:600}
.ib{border:1px solid var(--line);background:#fff;border-radius:4px;width:22px;height:22px;line-height:18px;padding:0;margin-left:2px;cursor:pointer;color:var(--muted)}
.ib:hover{color:var(--brand);border-color:var(--brand)}
.lnk{border:0;background:none;color:var(--brand);cursor:pointer;padding:0 0 0 4px;font:inherit}
.lnk:hover{text-decoration:underline}
.dbc-sec{margin-bottom:16px}.dbc-sec h3{font-size:14px;margin:6px 0}
table.kvt th{background:var(--surface-2);color:var(--muted);font-weight:500;width:14%;white-space:nowrap}
table.kvt td{min-width:110px}
.dbc-sum td{vertical-align:middle}
.dbc-issues{margin:0;padding-left:18px}.dbc-issues li.bad{color:var(--bad)}.dbc-issues li.warn{color:var(--warn)}
.dbc-note{margin-top:14px;font-size:13px;color:var(--muted)}.dbc-note summary{cursor:pointer}
@media (max-width:900px){.dbc-body{grid-template-columns:1fr}.dbc-tree{position:static;max-height:none}.dbc-bar{position:static}}