/* /opt/tmh/public/app.css — TMH Web v0.1 */
:root{
  --bg:#F2F5F3; --paper:#FFFFFF; --line:#DDE4E0; --ink:#16302B; --muted:#5F726C; --soft:#EEF3F0;
  --green:#1E8E5A; --green-bg:#E3F3EA;
  --red:#D33A3A; --red-bg:#FBE7E7;
  --amber:#C97B00; --amber-bg:#FFF1D6;
  --grey:#8A9590; --grey-bg:#EDEFEE;
  --radius:8px; --top:48px; --side:290px;
  font-size:13px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:13px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--green);text-decoration:none} a:hover{text-decoration:underline}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus,button:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.btn{padding:6px 12px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink)}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.btn.danger{background:#fff;border-color:var(--red);color:var(--red)}
.btn:hover{filter:brightness(.97)}
.muted{color:var(--muted)} .right{text-align:right} .nowrap{white-space:nowrap}
.mono{font-variant-numeric:tabular-nums}

/* ---- đăng nhập ---- */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login form{width:340px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:26px}
.login h1{margin:0 0 4px;font-size:20px} .login p{margin:0 0 18px;color:var(--muted)}
.login label{display:block;margin:10px 0 4px}
.login input{width:100%} .login .btn{width:100%;margin-top:16px;padding:9px}
.err{background:var(--red-bg);color:var(--red);border-radius:6px;padding:8px 10px;margin-top:12px}
.ok{background:var(--green-bg);color:var(--green);border-radius:6px;padding:8px 10px;margin-top:12px}

/* ---- khung ---- */
.top{position:fixed;inset:0 0 auto 0;height:var(--top);background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 14px;z-index:5}
.top .brand{font-weight:700;font-size:15px;display:flex;align-items:center;gap:8px}
.top .brand i{width:10px;height:10px;border-radius:50%;background:var(--green);display:inline-block}
.top .spacer{flex:1}
.top .nav a{padding:6px 10px;border-radius:6px;color:var(--ink)} .top .nav a.on{background:var(--soft)}
.side{position:fixed;top:var(--top);left:0;bottom:0;width:var(--side);background:var(--paper);border-right:1px solid var(--line);display:flex;flex-direction:column}
.side .search{padding:10px;border-bottom:1px solid var(--line)} .side .search input{width:100%}
.tree{flex:1;overflow:auto;padding:6px 0}
.tree .grp{padding:8px 12px 4px;color:var(--muted);font-weight:600}
.tree .h{display:flex;align-items:center;gap:8px;padding:6px 12px;cursor:pointer;border-left:3px solid transparent}
.tree .h:hover{background:var(--soft)} .tree .h.on{background:var(--green-bg);border-left-color:var(--green)}
.tree .h .code{font-weight:700;min-width:58px} .tree .h .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.tree .h .bd{font-size:11px;padding:1px 6px;border-radius:10px;background:var(--red-bg);color:var(--red)}
.tree .h .bd.zero{background:var(--grey-bg);color:var(--grey)}
.tree .rooms{display:flex;flex-wrap:wrap;gap:4px;padding:2px 12px 8px 24px}
.tree .rooms a{padding:2px 7px;border-radius:5px;font-size:12px;color:var(--ink);background:var(--grey-bg)}
.tree .rooms a.trong{background:var(--red-bg);color:var(--red)} .tree .rooms a.sap_het{background:var(--amber-bg);color:var(--amber)} .tree .rooms a.con_han{background:var(--green-bg);color:var(--green)}
.tree .rooms a.on{outline:2px solid var(--ink)}
.tree .h.da_tra .code,.tree .h.da_tra .nm{text-decoration:line-through;color:var(--grey)}
.main{position:fixed;top:var(--top);left:var(--side);right:0;bottom:0;display:flex;flex-direction:column}
.main .head{padding:12px 20px 0;background:var(--paper);border-bottom:1px solid var(--line)}
.main .head h2{margin:0;font-size:18px;display:flex;align-items:baseline;gap:10px}
.main .head h2 small{font-weight:400;color:var(--muted);font-size:13px}
.crumb{color:var(--muted);margin-bottom:4px} .crumb a{color:var(--muted)}
.tabs{display:flex;gap:2px;margin-top:8px;overflow-x:auto}
.tabs a{padding:8px 12px;border-bottom:2px solid transparent;color:var(--muted);white-space:nowrap}
.tabs a.on{color:var(--ink);border-bottom-color:var(--green);font-weight:600}
.body{flex:1;overflow:auto;padding:16px 20px}

/* ---- tổng quan ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px}
.stat b{display:block;font-size:22px;line-height:1.1;font-variant-numeric:tabular-nums}
.stat.red b{color:var(--red)} .stat.amber b{color:var(--amber)} .stat.green b{color:var(--green)}
.cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:14px}
.card{overflow:auto} td.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cols table{table-layout:fixed} .cols td,.cols th{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cols th.n{width:44px} .cols th.w{width:64px} .cols th.d{width:86px}
.tenNha{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
@media (max-width:1100px){.cols{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px}
.card>h3{margin:0;padding:10px 14px;border-bottom:1px solid var(--line);font-size:13px;display:flex;justify-content:space-between;align-items:center}
.card>h3 span{font-weight:400;color:var(--muted)}
.card .in{padding:12px 14px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600;background:var(--soft);position:sticky;top:0}
tr:hover td{background:#FAFCFB}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tag{display:inline-block;padding:1px 7px;border-radius:10px;font-size:11px;background:var(--grey-bg);color:var(--grey)}
.tag.trong{background:var(--red-bg);color:var(--red)} .tag.sap_het{background:var(--amber-bg);color:var(--amber)} .tag.con_han,.tag.xong{background:var(--green-bg);color:var(--green)}
.tag.dang_lam{background:#E1ECFF;color:#2456B3} .tag.cho_duyet{background:var(--amber-bg);color:var(--amber)}

/* ---- khảm phòng (điểm nhấn) ---- */
.mosaic{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px}
.tile{display:block;border-radius:var(--radius);padding:8px 10px;border:1px solid var(--line);background:var(--grey-bg);color:var(--ink);min-height:62px}
.tile b{font-size:15px;display:block}
.tile small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile.trong{background:var(--red-bg);border-color:#F1C4C4} .tile.trong b{color:var(--red)}
.tile.sap_het{background:var(--amber-bg);border-color:#F1D9A6} .tile.sap_het b{color:var(--amber)}
.tile.con_han{background:var(--green-bg);border-color:#BFE3CE} .tile.con_han b{color:var(--green)}
.tile.chung{background:#fff;border-style:dashed}
.tile:hover{text-decoration:none;filter:brightness(.97)}
.legend{display:flex;gap:14px;margin:0 0 10px;color:var(--muted)} .legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}

/* ---- chi tiết dạng bảng khoá-giá trị ---- */
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 24px}
.kv div{display:flex;gap:10px;padding:5px 0;border-bottom:1px solid var(--line)}
.kv div span:first-child{color:var(--muted);min-width:130px}
.kv div span:last-child{flex:1;word-break:break-word;white-space:pre-wrap}
.empty{padding:26px;text-align:center;color:var(--muted)}
.empty b{display:block;color:var(--ink);margin-bottom:4px}
.sensitive{color:var(--grey);font-style:italic}

/* ---- mobile ---- */
.menu-btn{display:none}
@media (max-width:860px){
  .side{transform:translateX(-100%);transition:transform .2s;z-index:6;width:min(320px,90vw)}
  .side.open{transform:none}
  .main{left:0}
  .menu-btn{display:inline-block}
  .stats{grid-template-columns:repeat(2,1fr)}
  .top{gap:8px;padding:0 8px} .top .brand{white-space:nowrap} .top .nav a{padding:6px 6px}
  .cols table{table-layout:auto;min-width:520px} .cols th.n,.cols th.w,.cols th.d{width:auto}
  .main .head{padding:10px 12px 0} .body{padding:12px}
}
@media (prefers-reduced-motion:reduce){.side{transition:none}}
/* 09/09/2026 17:40:00 HN — TMH Web v0.1 */