: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:150px;
  white-space:nowrap;font-size:13px}
.cc tr.grp .nv{font-weight:700;background:var(--soft)}
.cc tr.grp td{background:var(--soft)}
.cc tr.total td{background:#f7f3e8;font-weight:700;border-top:2px solid #c9ad6a}
.cc th.nv{background:var(--soft);z-index:3}

/* ---------- phieu luong in ---------- */
/* Khoi tieu de / o ky chi danh cho ban in — tren man hinh phai AN di.
   KHONG dat display:flex thang vao the: kieu viet trong the de len lop
   .print-only nen khoi o ky se lo ra giua man hinh. */
.print-only{display:none}

@media print{
  /* Bang luong 17 cot va bang cham cong 31 ngay -> BAT BUOC in ngang */
  @page{size:A4 landscape;margin:7mm 6mm}

  .sb,.top,.tabs,.noprint,.ft,.flash,.pill,.badge{display:none!important}
  .app{display:block}
  main{padding:0;max-width:none}
  .card{border:0;box-shadow:none;padding:0;margin:0 0 5px;background:none}
  .print-only{display:block}
  .chu-ky{display:flex!important;justify-content:space-around;text-align:center}

  /* IN TRANG DEN: bo sach mau nen. May in den trang quy mau thanh xam, bang
     lam ra den thui. Chi giu chu den tren nen trang + duong ke xam. */
  *{background:transparent!important;background-image:none!important;
    color:#000!important;box-shadow:none!important;
    -webkit-print-color-adjust:economy;print-color-adjust:economy}
  body{background:#fff!important;font-size:10px}

  /* Man hinh de bang trong khung cuon ngang; khi in phai mo het, neu khong
     phan ngoai khung bi cat (dung loi cua ban in truoc day). */
  .scroll{overflow:visible!important;max-width:none!important;border:0;border-radius:0}

  table{width:100%;border-collapse:collapse;font-size:8.5px;table-layout:auto}
  th,td{border:1px solid #777!important;padding:1.5px 3px;line-height:1.25}
  thead{display:table-header-group}      /* lap lai dong tieu de o moi trang */
  tr{page-break-inside:avoid}
  /* Phan biet dong nhom / dong tong bang DUONG KE va CHU DAM, khong bang mau */
  th{font-weight:700;text-align:center;border-bottom:1.5px solid #333!important}
  tr.grp td{font-weight:700;border-top:1.2px solid #333!important}
  tr.total td{font-weight:700;border-top:1.5px solid #000!important;
              border-bottom:1.5px solid #000!important}

  /* Ten nguoi va chuc danh: MOT DONG, khong gach chan */
  a{text-decoration:none!important}
  td a,td .muted{white-space:nowrap}
  input,select,textarea,button,label{display:none!important}

  /* So tien khong duoc xuong dong giua con so */
  td.n,th.n{text-align:right;white-space:nowrap}
  td.c,th.c{text-align:center;white-space:nowrap}

  /* Khoi chu ky phai di lien voi bang, khong bi day sang trang rieng */
  .print-only{page-break-inside:avoid;break-inside:avoid}

  /* Bang cham cong: cot ngay rat hep */
  .cc .nv{position:static!important;min-width:0;width:15%;white-space:nowrap}
  .cc td.d{min-width:0;font-size:8.5px;padding:1px}
  .cc th{font-size:7.5px;padding:1px!important}
}
@media (max-width:900px){
  .sb{position:fixed;left:-236px;transition:.2s;z-index:50}
  .app{display:block} main{padding:14px}
}

/* ten nguoi trong bang: bo gach chan cho bang do roi */
table td a{text-decoration:none}
table td a:hover{text-decoration:underline}

/* ---------------- VAN BAN HR (giu nguyen kieu trinh bay cua ban cu) ------- */
.vb-paper { max-width:820px;margin:0 auto;font-family:'Times New Roman',serif;
  font-size:15px;color:#000;line-height:1.6 }
.vb-paper .lh { display:flex;align-items:center;gap:14px;
  border-bottom:2px solid #0a3d91;padding-bottom:8px }
.vb-paper .coname { font-size:15px;font-weight:bold;color:#0a3d91 }
.vb-paper .coline { font-size:12px }
.vb-paper .natl { text-align:center;font-weight:bold;margin:2px 0 }
.vb-paper .title { text-align:center;font-weight:bold;font-size:18px;
  text-transform:uppercase;margin:14px 0 4px }
.vb-paper .subtitle { text-align:center;font-style:italic;margin-bottom:12px }
.vb-paper p { margin:4px 0;text-align:justify }
.vb-paper p + p { margin-top:10px }
.vb-paper .ind { text-indent:1.2cm }
.vb-paper h4 { margin:18px 0 8px;font-size:15px;border-bottom:1px solid #dde3f0;
  padding-bottom:3px }
.vb-paper table { border-collapse:collapse;width:100%;font-family:Arial,sans-serif;
  font-size:12px;margin:8px 0 }
.vb-paper td, .vb-paper th { border:1px solid #555;padding:4px 6px }
.vb-paper table + p { margin-top:10px }
.vb-paper .sign .col { text-align:center;min-width:240px }
.vb-paper .sign .role { font-weight:bold }
.vb-paper .sign .sp { height:60px }