:root{
  --bg:#f4f6f9; --card:#fff; --ink:#1f2733; --muted:#6b7785;
  --brand:#0d6efd; --brand2:#0a58ca; --navy:#0b2545; --line:#e3e8ef;
  --green:#198754; --red:#dc3545; --amber:#b8860b; --soft:#eef4ff;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);
     color:var(--ink);font-size:14px}
a{color:var(--brand)}
.app{display:flex;min-height:100vh}

/* ---------- sidebar ---------- */
.sb{width:236px;flex:0 0 236px;background:var(--navy);color:#cfe0f5;
    display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sb .brand{display:flex;gap:10px;align-items:center;padding:16px 14px;
           border-bottom:1px solid rgba(255,255,255,.09)}
.sb .logo{width:38px;height:38px;border-radius:9px;background:#1b4a8a;color:#fff;
          display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.sb .brand .n{font-weight:700;color:#fff;font-size:14px;letter-spacing:.4px}
.sb .brand .s{font-size:11px;opacity:.7}
.sb nav{flex:1;overflow:auto;padding:8px 0}
.sb nav a{display:block;padding:8px 16px;color:#cfe0f5;text-decoration:none;font-size:13.5px}
.sb nav a:hover{background:rgba(255,255,255,.07);color:#fff}
.sb nav a.on{background:#1b4a8a;color:#fff;font-weight:600;
             box-shadow:inset 3px 0 0 #7db1ff}
.sb .grp{padding:12px 16px 4px;font-size:11px;text-transform:uppercase;
         letter-spacing:.7px;opacity:.55}
.sb .me{padding:12px 14px;border-top:1px solid rgba(255,255,255,.09);font-size:12px}
.sb .me .ten{color:#fff;font-weight:700}
.sb .me .vt{opacity:.65;margin-bottom:5px}
.sb .me a{color:#9dc4ff;text-decoration:none}
.badge{background:#dc3545;color:#fff;border-radius:20px;padding:0 6px;font-size:11px;
       font-weight:700;margin-left:4px}

/* ---------- main ---------- */
main{flex:1;min-width:0;padding:18px 22px 40px;max-width:1500px}
.top{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.top h1{font-size:19px;margin:0;flex:1}
.top .act{display:flex;gap:8px;flex-wrap:wrap}
.ft{margin-top:34px;font-size:12px;color:var(--muted);text-align:center}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
      padding:16px;margin-bottom:16px;box-shadow:0 1px 2px rgba(20,40,80,.04)}
.card h2{font-size:15px;margin:0 0 12px}
.card h3{font-size:12px;color:var(--muted);margin:16px 0 8px;text-transform:uppercase;
         letter-spacing:.5px}
.note{font-size:12.5px;color:var(--muted);line-height:1.65}
.muted{color:var(--muted)}
.right{text-align:right}
.center{text-align:center}

/* ---------- kpi ---------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px;
      margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:13px 15px}
.kpi .l{font-size:12px;color:var(--muted)}
.kpi .v{font-size:22px;font-weight:700;margin-top:3px}
.kpi .v.sm{font-size:17px}
.kpi.warn{border-color:#f2c94c;background:#fffdf3}
.kpi.bad{border-color:#f3b6b6;background:#fff6f6}
.kpi.ok{border-color:#b7e0c4;background:#f4fbf6}

/* ---------- table ---------- */
table{border-collapse:collapse;width:100%;font-size:13px;background:#fff}
th,td{border:1px solid var(--line);padding:6px 9px;text-align:left;vertical-align:middle}
th{background:var(--soft);color:#2b3a55;font-weight:600;white-space:nowrap}
td.n,th.n{text-align:right;white-space:nowrap}
td.c,th.c{text-align:center}
tr.total td{background:#fff7e6;font-weight:700}
tr.grp td{background:#f0f3f8;font-weight:700;color:#33415c}
.scroll{overflow:auto;border:1px solid var(--line);border-radius:8px;max-width:100%}
.scroll table{border:0}
tbody tr:hover{background:#fafcff}

/* ---------- form ---------- */
input[type=text],input[type=number],input[type=password],input[type=date],
input[type=email],select,textarea{
  padding:7px 9px;border:1px solid #cfd6e0;border-radius:6px;width:100%;
  font-family:inherit;font-size:13px;background:#fff}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(13,110,253,.12)}
input[disabled],select[disabled]{background:#f6f7f9;color:#8a94a2}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
.row{display:flex;flex-wrap:wrap;gap:13px}
.f{flex:1;min-width:165px;margin-bottom:11px}
.f.w2{min-width:340px;flex:2}
.f.w3{min-width:100%;flex:0 0 100%}
fieldset{border:1px solid var(--line);border-radius:9px;padding:13px 15px;margin:0 0 15px}
legend{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;
       padding:0 6px;font-weight:600}

.btn{background:var(--brand);color:#fff;border:none;padding:8px 14px;border-radius:7px;
     cursor:pointer;font-weight:600;font-size:13px;text-decoration:none;display:inline-block}
.btn:hover{background:var(--brand2)}
.btn.sec{background:#eef1f6;color:#33415c}
.btn.sec:hover{background:#e2e7ef}
.btn.danger{background:#fde8e8;color:var(--red)}
.btn.ok{background:var(--green)}
.btn.sm{padding:4px 9px;font-size:12px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

.flash{padding:10px 14px;border-radius:8px;margin-bottom:13px;font-size:13.5px}
.flash.ok{background:#e7f6ec;color:#0f5132;border:1px solid #b7e0c4}
.flash.err{background:#fdecec;color:#842029;border:1px solid #f3b6b6}

.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;
      font-weight:600;white-space:nowrap}
.pill.g{background:#e7f6ec;color:#0f5132}
.pill.r{background:#fdecec;color:#842029}
.pill.y{background:#fff3cd;color:#664d03}
.pill.b{background:#e7f0ff;color:#0a3d91}
.pill.n{background:#eef1f6;color:#55606e}

.tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:14px;border-bottom:1px solid var(--line)}
.tabs a{padding:8px 14px;color:var(--muted);text-decoration:none;font-size:13.5px;
        border-bottom:3px solid transparent}
.tabs a.on{color:var(--brand);border-bottom-color:var(--brand);font-weight:600}

/* ---------- cham cong ---------- */
.cc td.d{padding:0;text-align:center;min-width:27px;cursor:pointer;user-select:none;
         font-weight:600;font-size:12px}
.cc td.d.X{background:#e7f6ec;color:#0f5132}
.cc td.d.P{background:#fff3cd;color:#664d03}
.cc td.d.K{background:#f8d7da;color:#842029}
.cc td.d.O{background:#e7f0ff;color:#0a3d91}
.cc td.d.C{background:#efe7fb;color:#432c6b}
.cc td.d.L{background:#e2e7ef;color:#33415c}
.cc td.d.cn{background:#f5f6f8}
.cc th.cn{background:#e5e9f0}
.cc .nv{position:sticky;left:0;background:#fff;z-index:2;min-width:170px}
.cc th.nv{background:var(--soft);z-index:3}

/* ---------- phieu luong in ---------- */
@media print{
  .sb,.top .act,.tabs,.noprint,.ft,.flash{display:none!important}
  .app{display:block} main{padding:0;max-width:none}
  .card{border:0;box-shadow:none;padding:0}
  body{background:#fff}
}
@media (max-width:900px){
  .sb{position:fixed;left:-236px;transition:.2s;z-index:50}
  .app{display:block} main{padding:14px}
}