/* Landing page – Chiến dịch 120 ngày đêm – VNPT Tây Ninh */
:root{
  --navy:#1B2470; --blue:#2853D3; --accent:#FFB020; --ink:#0F172A;
  --muted:#475569; --line:#E2E8F0; --bg:#F4F6FB; --soft:#F8FAFF;
  --green:#15803D; --amber:#D97706; --red:#DC2626;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);font-family:'Be Vietnam Pro',system-ui,sans-serif;color:var(--ink)}
a{color:var(--blue)}a:hover{color:var(--navy)}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.sec{padding:72px 0}
.eyebrow{font-size:13px;font-weight:800;color:var(--blue);letter-spacing:1.5px}
.h2{margin:8px 0 0;font-size:clamp(26px,3.4vw,38px);font-weight:900;color:var(--navy)}

/* Nav */
.navbar{position:sticky;top:0;z-index:50;background:var(--navy);box-shadow:0 2px 12px rgba(10,20,80,.25)}
.navbar .wrap{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brand img{height:40px;width:auto;border-radius:6px;display:block}
.brand span{color:#fff;font-weight:800;font-size:15px;letter-spacing:.5px;white-space:nowrap}
.navlinks{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{white-space:nowrap;text-decoration:none;color:#E6ECFF;font-size:14px;font-weight:600;padding:10px 12px;border-radius:8px}
.navlinks a:hover,.navlinks a.active{background:rgba(255,255,255,.14);color:#fff}

/* Chips, cards */
.chip{font-weight:700;font-size:13px;border-radius:999px;padding:5px 10px}
.chip-blue{background:#E8EEFF;color:var(--navy)}
.chip-green{background:#DCFCE7;color:#166534}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.kpi{border-radius:16px;padding:24px}
.kpi-label{font-size:13px;font-weight:700;letter-spacing:.5px}
.kpi-value{font-size:clamp(34px,4vw,44px);font-weight:900;margin-top:8px}
.bar-track{height:8px;border-radius:99px;margin-top:4px;overflow:hidden}
.bar{height:8px;border-radius:99px}
.legend{display:flex;flex-wrap:wrap;gap:10px 20px;font-size:13px;color:#334155;font-weight:600}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:12px;height:12px;border-radius:3px;display:inline-block}

/* Buttons / tabs */
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:12px;text-decoration:none;font-weight:800}
.btn-accent{background:var(--accent);color:var(--navy)}
.btn-ghost{border:2px solid #fff;color:#fff}
.tab{min-height:44px;padding:0 16px;border-radius:10px;border:2px solid #CBD5E1;background:#fff;color:var(--navy);font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
.tab[aria-selected="true"]{border-color:var(--navy);background:var(--navy);color:#fff}
.ldtab{min-height:64px;padding:10px 16px;border-radius:12px;text-align:left;cursor:pointer;font-family:inherit;background:#fff;color:var(--navy);border:2px solid #CBD5E1}
.ldtab[aria-selected="true"]{background:var(--blue);color:#fff;border-color:var(--blue)}

/* Accordion */
.acc{border-radius:14px;border:1px solid var(--line);background:#fff}
.acc.open{border-color:var(--blue);background:var(--soft)}
.acc-btn{width:100%;display:flex;align-items:center;gap:14px;background:transparent;border:0;padding:16px 18px;cursor:pointer;text-align:left;font-family:inherit;min-height:56px}
.acc-no{flex-shrink:0;width:36px;height:36px;border-radius:10px;background:var(--navy);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center}
.acc-sign{font-size:22px;font-weight:700;color:var(--blue);width:24px;text-align:center}
.acc-body{padding:0 18px 18px 68px}
.badge-key{background:var(--accent);color:var(--navy);font-weight:800;font-size:11px;letter-spacing:.5px;border-radius:999px;padding:5px 10px;white-space:nowrap}

/* Tables */
.tbox{margin-top:10px;overflow-x:auto;border-radius:12px;border:1px solid var(--line)}
table.rt{width:100%;border-collapse:collapse;font-size:14px;background:#fff}
table.rt th{background:var(--navy);color:#fff;text-align:right;padding:10px 12px;font-weight:600;white-space:nowrap}
table.rt th:first-child,table.rt th:nth-child(2){text-align:left}
table.rt td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
table.rt td.nm,table.rt td.st{text-align:left}
table.rt tr.lv0 td{background:#E8EEFF;font-weight:800}
table.rt tr.lv1 td{font-weight:700}
table.rt tr.lv3 td.nm{padding-left:28px;color:#334155}

@media (max-width:960px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(1,minmax(0,1fr))}}
@media (max-width:720px){
  .g2{grid-template-columns:repeat(1,minmax(0,1fr))}
  .sec{padding:48px 0}
  .wrap{padding:0 16px}
  .acc-body{padding:0 16px 16px 16px}
  .acc-btn{flex-wrap:wrap}
  .acc-btn > span:nth-child(2){flex:1 1 160px;min-width:0}
  .badge-key{order:5;margin-left:50px}
  table.rt thead{display:none}
  table.rt,table.rt tbody{display:block;background:transparent}
  table.rt tr{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:8px 14px}
  table.rt td{display:flex;justify-content:space-between;gap:12px;border:0;padding:4px 0;text-align:right}
  table.rt td::before{content:attr(data-label);color:var(--muted);font-weight:500;text-align:left}
  table.rt td.nm{font-weight:700;font-size:15px;padding:6px 0;text-align:left}
  table.rt td.nm::before,table.rt td.st::before{content:none}
  table.rt td.st{color:#64748B;font-size:12px}
  table.rt td.st:empty{display:none}
  table.rt tr.lv0,table.rt tr.lv0 td{background:#E8EEFF}
  table.rt tr.lv3 td.nm{padding-left:0}
}
@media print{.navbar,.noprint{display:none!important}body{background:#fff}.sec{break-inside:avoid}}