:root {
  --navy:#173e7e;
  --blue:#1f66ad;
  --cyan:#229bd0;
  --ink:#18324d;
  --muted:#778a9b;
  --line:#dce7f0;
  --page:#f4f8fb;
  --panel:#ffffff;
  --soft:#edf5fb;
  --green:#1f9d6b;
  --orange:#e98a15;
  --red:#d64545;
  --shadow:0 12px 32px rgba(23,62,126,.10);
  --radius:17px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:"Segoe UI", Arial, sans-serif;
  color:var(--ink); background:var(--page); overflow-x:hidden;
}
button,a,input { font:inherit; }
a { text-decoration:none; color:inherit; }
[hidden] { display:none !important; }
body.no-scroll { overflow:hidden; }

.viewer { position:fixed; inset:0; z-index:200; display:flex; padding:24px; background:rgba(10,25,50,.55); }
.viewer-box {
  width:100%; max-width:1440px; margin:auto; height:100%; display:flex; flex-direction:column;
  background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.3);
}
.viewer-head { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line); }
.viewer-head strong { flex:1; min-width:0; color:#183b7c; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.viewer-head .btn { flex:none; }
.unit-box { max-width:860px; height:min(100%, 880px); }
.unit-body { flex:1; overflow:auto; padding:14px 16px 18px; }
.unit-toolbar {
  display:flex; align-items:center; gap:8px 10px; flex-wrap:wrap;
  padding:10px 12px; background:#f7fafd; border-bottom:1px solid var(--line);
}
.unit-toolbar select {
  height:34px; min-width:220px; border:1px solid #c7d9e8; border-radius:9px; padding:0 10px;
  background:#fff; color:#17468a; font-weight:700; font-size:12.5px;
}
.seg { display:flex; flex-wrap:wrap; gap:6px; }
.seg button {
  height:34px; border:1px solid #c7d9e8; background:#fff; color:#48647d; border-radius:9px;
  padding:0 11px; font-size:12px; font-weight:700; cursor:pointer;
}
.seg button span { margin-left:3px; color:#8a9baa; font-weight:800; }
.seg button.active { background:#2a65ad; border-color:#2a65ad; color:#fff; }
.seg button.active span { color:#d6e6f7; }
.seg.status { padding-left:10px; border-left:1px solid var(--line); }
.seg.status button.done.active { background:var(--green); border-color:var(--green); }
.seg.status button.open.active { background:var(--orange); border-color:var(--orange); }
.seg.status button.active span { color:#fff; opacity:.85; }
.unit-section.done { color:var(--green); margin-top:16px; }
.done-case { border:1px solid var(--line); border-left:4px solid var(--green); background:#fff; border-radius:10px; padding:9px 12px; }
.done-case .oc-meta strong { color:var(--green); }
.oc-unit { margin-left:auto; flex:none; font-size:10.5px; font-weight:700; color:#5d7286; background:#eef3f8; border-radius:6px; padding:2px 6px; }
.unit-date { margin:0 0 12px; color:#7e909f; font-size:12px; }
.unit-section { margin:0 0 8px; font-size:13px; color:#b86a00; text-transform:uppercase; letter-spacing:.4px; }
.open-cases { display:grid; gap:8px; }
.open-case { border:1px solid #f6d9a6; border-left:4px solid var(--orange); background:#fffaf1; border-radius:10px; padding:9px 12px; }
.oc-top { display:flex; align-items:baseline; gap:8px; }
.oc-top b { color:#183b7c; font-size:13.5px; }
.oc-type { flex:none; font-size:10px; font-weight:700; padding:1px 6px; border-radius:6px; color:#5d7286; background:#eef3f8; }
.oc-type.mn { color:#2f66b3; background:#e8f0fb; }
.oc-type.ny { color:#a85e08; background:#fdf0e1; }
.oc-type.cln { color:#23854b; background:#e6f4ec; }
.oc-meta { margin-top:3px; font-size:12px; color:#5d7286; }
.oc-meta em { font-style:normal; font-weight:700; color:#b86a00; }
.all-done { background:#e3f6ee; color:var(--green); font-weight:700; border-radius:10px; padding:12px 14px; }
.unit-link {
  border:0; background:none; padding:0; font:inherit; font-weight:700; color:#183b7c; text-align:left; cursor:pointer;
  border-bottom:1px dashed #9db8d6;
}
.unit-link:hover { color:var(--blue); border-bottom-color:var(--blue); }

.app { min-height:100vh; display:grid; grid-template-columns:230px minmax(0,1fr); }

.sidebar {
  position:sticky; top:0; height:100vh; background:#fff;
  border-right:1px solid var(--line); padding:18px 14px;
  display:flex; flex-direction:column; z-index:30;
}
.brand { text-align:center; padding:7px 7px 22px; border-bottom:1px solid var(--line); }
.brand img { width:96px; height:96px; object-fit:contain; }
.brand strong {
  display:block; margin-top:7px; color:#183a7d; font-size:14px; line-height:1.35;
}
.brand span { display:block; margin-top:4px; font-size:11px; color:#8c9baa; }

.nav-label {
  margin:20px 10px 8px; font-size:10px; font-weight:800;
  color:#98a6b2; letter-spacing:1.2px; text-transform:uppercase;
}
.nav { display:grid; gap:6px; }
.nav button {
  border:0; background:transparent; border-radius:11px; cursor:pointer;
  display:flex; align-items:center; gap:11px; padding:12px 13px;
  color:#48647d; font-weight:700; text-align:left;
}
.nav button:hover,.nav button.active { background:#eaf4fb; color:#17468a; }
.nav button:disabled { color:#a9b6c2; cursor:not-allowed; background:transparent; }
.nav .ico { width:20px; text-align:center; font-size:17px; }
.nav .ico.morning { color:#f1a000; }
.nav .ico.noon { color:#336ac3; }
.nav .ico.afternoon { color:#6745c4; }
.side-bottom {
  margin-top:auto; border:1px solid var(--line); border-radius:13px;
  background:#f9fbfd; padding:12px 13px;
}
.side-bottom strong { display:block; color:#17468a; font-size:12px; }
.side-bottom span { display:block; color:#8798a7; font-size:10px; line-height:1.5; margin-top:4px; }

.main { min-width:0; }
.topbar {
  height:42px; background:#173c7e; color:#fff;
  display:flex; align-items:center; justify-content:flex-end;
  padding:0 28px; gap:24px; font-size:11px; font-weight:700;
}
.hero {
  min-height:205px; padding:28px 30px 66px; color:#fff; position:relative; overflow:hidden;
  background:
    linear-gradient(90deg,rgba(23,60,126,.98),rgba(33,99,170,.95) 58%,rgba(34,155,208,.92)),
    linear-gradient(180deg,#1a5fa8,#0f83b8);
}
.hero::after {
  content:""; position:absolute; width:255px; height:255px;
  right:6%; top:-10px; background:url('logo.png') center/contain no-repeat; opacity:.07;
}
.hero-row {
  max-width:1400px; margin:auto; position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:25px;
}
.hero-copy .eyebrow {
  font-size:12px; letter-spacing:1.25px; font-weight:800; text-transform:uppercase;
}
.hero-copy h1 {
  font-size:clamp(34px,4.4vw,54px); line-height:1.02; margin:6px 0 9px; letter-spacing:-1px;
}
.hero-copy p { margin:0; color:rgba(255,255,255,.88); font-size:14px; }
.datebox {
  min-width:206px; padding:16px 19px; border-radius:16px;
  background:rgba(12,54,104,.72); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.datebox small {
  display:block; color:#cde3f5; text-transform:uppercase; letter-spacing:.8px; font-weight:700; font-size:10px;
}
.access { position:relative; display:flex; align-items:center; gap:6px; margin:6px 0 4px; }
.access-btn {
  width:30px; height:30px; flex:none; border-radius:9px; cursor:pointer; line-height:1;
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08); color:#fff; font-size:18px; font-weight:800;
}
.access-btn:hover:not(:disabled) { background:rgba(255,255,255,.18); }
.access-btn:disabled { opacity:.3; cursor:default; }
.access-date {
  display:inline-flex; align-items:center; gap:6px; padding:2px 6px; border:0; border-radius:8px;
  background:transparent; color:#fff; cursor:pointer;
}
.access-date:hover { background:rgba(255,255,255,.1); }
.access-date strong { font-size:24px; }
.access-cal { font-size:12px; opacity:.75; }
/* Ô date thật được ẩn, chỉ dùng để bật lịch chọn ngày của trình duyệt. */
.access-picker { position:absolute; left:50%; bottom:0; width:1px; height:1px; padding:0; border:0; opacity:0; pointer-events:none; }
.access-meta { display:flex; align-items:center; gap:10px; min-height:20px; }
.access-meta span { font-size:11px; color:#ecf6ff; }
.access-today {
  border:0; border-radius:999px; padding:3px 10px; cursor:pointer;
  background:#fff; color:#17468a; font-size:10.5px; font-weight:800;
}

.content {
  max-width:1440px; margin:-44px auto 0; padding:0 26px 36px;
  position:relative; z-index:5;
}
.quick-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:19px; }
.quick {
  background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow);
  padding:14px 17px; display:flex; align-items:center; gap:12px; cursor:pointer; text-align:left;
}
.quick.active { border:2px solid #82bce5; padding:13px 16px; }
.quick .qico {
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  font-size:20px; background:#edf6fc; color:#1e65aa; flex:none;
}
.quick .qico.morning { background:#fff3d8; color:#f1a000; }
.quick .qico.noon { background:#eaf2ff; color:#336ac3; }
.quick .qico.afternoon { background:#f1edff; color:#6745c4; }
.quick strong { display:block; color:#183b7c; font-size:14px; }
.quick span { display:block; color:#8a99a7; font-size:10px; margin-top:3px; }

.report-card {
  background:#fff; border:1px solid var(--line); border-radius:17px; box-shadow:var(--shadow);
  overflow:hidden;
}
.report-head {
  min-height:76px; display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:15px 18px; border-bottom:1px solid var(--line);
}
.report-title { display:flex; align-items:center; gap:13px; min-width:0; }
.report-icon {
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:#fff3d8; color:#f1a000; font-size:20px; flex:none;
}
.title-line { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; }
.report-title h2 { margin:0; font-size:18px; color:#183b7c; }
.head-side { display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none; }
.report-title p { margin:4px 0 0; font-size:11px; color:#7e909f; }
.actions { display:flex; gap:9px; flex:none; }
.btn {
  border:1px solid #c7d9e8; background:#fff; color:#17468a; border-radius:10px;
  padding:9px 12px; font-weight:800; font-size:11px; cursor:pointer; text-align:center;
}
.btn.primary { background:#2a65ad; color:#fff; border-color:#2a65ad; }
.btn:disabled { opacity:.6; cursor:wait; }

.status-pill {
  flex:none; padding:5px 10px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:.3px;
  background:#eef2f6; color:#6d7f8f;
}
.status-pill.ok { background:#e3f6ee; color:var(--green); }
.status-pill.pending { background:#fff1de; color:#b86a00; }
.updated { color:#8a9baa; font-size:11px; text-align:right; }

.report-body { padding:18px; background:#eef5fa; }
.state {
  min-height:260px; display:grid; place-items:center; text-align:center;
  background:#fff; border-radius:12px; color:#7e909f; padding:30px;
}
.state.error { color:var(--red); }
.state.muted { color:#6d7f8f; font-size:14px; }
.state.loading { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; }
.spinner {
  width:42px; height:42px; border-radius:50%;
  border:4px solid #dbe8f3; border-top-color:var(--blue);
  animation:spin .8s linear infinite;
}
.refresh-ico { display:inline-block; }
.btn.loading .refresh-ico { animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {
  .spinner, .btn.loading .refresh-ico { animation-duration:2.4s; }
}

.summary {
  background:#fff; border-left:4px solid var(--blue); border-radius:12px;
  padding:13px 16px; margin-bottom:14px; line-height:1.65; font-size:13.5px; white-space:pre-wrap;
}

.kpis { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:14px; }
.kpi {
  background:#fff; border-radius:13px; padding:14px 15px; border-top:4px solid var(--blue);
  box-shadow:0 4px 14px rgba(23,62,126,.06);
}
.kpi small { display:block; font-size:10.5px; font-weight:800; color:#7e909f; letter-spacing:.5px; text-transform:uppercase; }
.kpi strong { display:block; font-size:30px; line-height:1.1; margin-top:6px; color:#183b7c; }
.kpi span { display:block; font-size:11px; color:#8a9baa; margin-top:3px; }
.kpi.total { border-top-color:var(--navy); }
.kpi.loss { border-top-color:var(--cyan); }
.kpi.weak { border-top-color:#6c8fd6; }
.kpi.quality { border-top-color:#8a63d2; }
.kpi.done { border-top-color:var(--green); }
.kpi.done strong { color:var(--green); }
.kpi.open { border-top-color:var(--orange); }
.kpi.open strong { color:var(--orange); }

.grid-2 { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:14px; margin-bottom:14px; }
.panel { background:#fff; border-radius:13px; padding:15px 16px; }
.panel h3 { margin:0 0 11px; font-size:13px; color:#183b7c; text-transform:uppercase; letter-spacing:.4px; }
.panel h3 small { color:#8a9baa; font-weight:600; text-transform:none; letter-spacing:0; }
.panel h3.mt { margin-top:18px; }
.note { margin:12px 0 0; font-size:11px; color:#8a9baa; }

.units { width:100%; border-collapse:collapse; font-size:13px; }
.units th {
  text-align:right; font-size:10.5px; color:#7e909f; text-transform:uppercase; letter-spacing:.4px;
  padding:8px; border-bottom:2px solid var(--line); white-space:nowrap;
}
.units td { padding:10px 8px; border-bottom:1px solid #edf2f7; text-align:right; white-space:nowrap; }
.units th:first-child, .units td:first-child { text-align:left; white-space:normal; }
.units td:first-child { font-weight:700; color:#183b7c; }
.units tr.total td { font-weight:800; background:#f7fafd; border-bottom:0; }
.pct { display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.pct-bar { width:80px; height:7px; border-radius:9px; background:#e8eef4; overflow:hidden; }
.pct-bar i { display:block; height:100%; border-radius:9px; background:var(--green); }
.pct-bar i.mid { background:var(--orange); }
.pct-bar i.low { background:var(--red); }
.pct b { min-width:46px; }

.overview { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:14px; margin-bottom:14px; }
.overview .kpis { grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:1fr; margin-bottom:0; }
.overview .kpi { display:flex; flex-direction:column; justify-content:center; }
.overview .kpis.four { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pie-wrap { display:flex; align-items:center; gap:20px; }
.pie {
  width:160px; height:160px; flex:none; border-radius:50%;
  box-shadow:0 0 0 4px #fff, 0 4px 14px rgba(23,62,126,.12);
}
.pie:not(.empty-pie) { cursor:pointer; touch-action:manipulation; }
.pie.empty-pie { background:#e8eef4; }
.pie svg { display:block; width:100%; height:100%; overflow:visible; }
.pie svg [data-i] { transition:opacity .15s; }
.pie-legend li[data-i] { transition:opacity .15s; }
.pie-legend.has-active li[data-i]:not(.active) { opacity:.45; }
.pie-legend li.active span { font-weight:800; color:#183b7c; }
.chart-tip {
  position:fixed; z-index:100; pointer-events:none; max-width:260px;
  background:#173c7e; color:#fff; border-radius:8px; padding:7px 10px;
  font-size:12px; line-height:1.5; white-space:pre-line; box-shadow:0 8px 22px rgba(10,30,70,.25);
}
.chart-tip::first-line { font-weight:800; }
.pie-legend { list-style:none; margin:0; padding:0; flex:1; min-width:0; display:grid; gap:8px; font-size:13px; }
.pie-legend li { display:grid; grid-template-columns:12px minmax(0,1fr) auto 52px; align-items:center; gap:8px; }
.pie-legend i { width:12px; height:12px; border-radius:3px; }
.pie-legend b { color:#183b7c; text-align:right; }
.pie-legend em { font-style:normal; color:#8a9baa; text-align:right; font-size:12px; }
.pie-legend li.total { border-top:1px solid var(--line); padding-top:8px; font-weight:800; color:#183b7c; }
.pie-legend li.total span { grid-column:2; }

.hotspots { display:grid; gap:7px; }
.hot {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:#fff6f2; border:1px solid #fbd9cb; border-radius:10px; padding:9px 11px; font-size:12.5px;
}
.hot b { color:#183b7c; display:block; }
.hot span { color:#7e909f; }
.hot em { font-style:normal; font-weight:800; color:var(--red); white-space:nowrap; }
.empty { font-size:12px; color:#8a9baa; padding:9px 11px; background:#f7fafd; border-radius:10px; }

.legend { display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap; font-size:11px; color:#7e909f; margin-bottom:10px; }
.lg { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:-8px; }
.lg.done { background:var(--green); }
.lg.open { background:var(--orange); }
.lg.avg { width:18px; height:0; border-radius:0; border-top:2px solid var(--blue); }
.legend b { color:var(--blue); margin-left:-8px; }
.bars {
  position:relative;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(22px,1fr); gap:5px;
  align-items:end; height:190px; overflow-x:auto; padding-bottom:4px;
}
.avg-line { position:absolute; left:0; height:0; border-top:2px solid var(--blue); pointer-events:none; z-index:2; }
.avg-line span {
  position:absolute; right:2px; bottom:3px; pointer-events:auto; cursor:default; white-space:nowrap;
  background:#fff; color:var(--blue); border:1px solid #bcd5ee; border-radius:5px; padding:1px 5px; font-size:10px; font-weight:800;
}
.bar {
  height:100%; display:flex; flex-direction:column; justify-content:flex-end; align-items:center;
  border:0; background:transparent; padding:0; cursor:pointer; min-width:22px;
}
.bar .val { font-size:10px; color:#7e909f; margin-bottom:3px; }
.bar .stack {
  width:72%; max-width:26px; display:flex; flex-direction:column-reverse; border-radius:5px 5px 2px 2px; overflow:hidden;
  background:#e8eef4; min-height:2px; flex-shrink:0;
}
.bar .stack i { display:block; width:100%; }
.bar .stack .d { background:var(--green); }
.bar .stack .o { background:var(--orange); }
.bar .day { font-size:10px; color:#7e909f; margin-top:4px; padding:2px 3px; border-radius:5px; }
.bar.selected .day { background:#2a65ad; color:#fff; font-weight:800; }
.bar.future { opacity:.35; cursor:default; }

.kpis.four { grid-template-columns:repeat(4,minmax(0,1fr)); }

.hbars { display:grid; gap:10px; }
.hbar { display:grid; grid-template-columns:minmax(120px,190px) 1fr 32px; align-items:center; gap:10px; font-size:13px; }
.hbar .name { font-weight:700; color:#183b7c; }
.hbar .track { height:10px; border-radius:9px; background:#e8eef4; overflow:hidden; }
.hbar .track i { display:block; height:100%; border-radius:9px; background:linear-gradient(90deg,#f0a35a,var(--red)); }
.hbar b { text-align:right; color:var(--red); }

.results { width:100%; border-collapse:collapse; font-size:13px; }
.results th {
  text-align:right; font-size:10.5px; color:#7e909f; text-transform:uppercase; letter-spacing:.4px;
  padding:8px; border-bottom:2px solid var(--line);
}
.results td { padding:10px 8px; border-bottom:1px solid #edf2f7; text-align:right; font-weight:700; }
.results th:first-child, .results td:first-child { text-align:left; }
.results td:first-child { color:#183b7c; }

.case-title { margin:16px 0 8px; font-size:13px; color:#183b7c; }
.case-title:first-child { margin-top:0; }
.case-title span { color:#8a9baa; font-weight:600; }
.cases { width:100%; border-collapse:collapse; font-size:13px; }
.cases th {
  text-align:left; font-size:10.5px; color:#7e909f; text-transform:uppercase; letter-spacing:.4px;
  padding:8px; border-bottom:2px solid var(--line); white-space:nowrap;
}
.cases td { padding:9px 8px; border-bottom:1px solid #edf2f7; vertical-align:top; }
.cases td:first-child { font-weight:700; color:#183b7c; }
.cases td:nth-child(3) { white-space:nowrap; color:#5d7286; }
.cases .reason.ok { color:var(--green); }
.cases .reason.warn { color:#b86a00; }

.mobile-top { display:none; }
footer {
  max-width:1440px; margin:auto; padding:0 26px 24px; color:#8998a5; font-size:10px;
  display:flex; justify-content:space-between; gap:15px;
}

@media(max-width:1200px) {
  .kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid-2 { grid-template-columns:1fr; }
  .overview { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
  .pie { width:130px; height:130px; }
}

@media(max-width:900px) {
  .app { grid-template-columns:1fr; }
  .sidebar { display:none; }
  .mobile-top {
    display:flex; position:sticky; top:0; z-index:50; height:48px;
    background:#173c7e; color:#fff; align-items:center; justify-content:space-between;
    padding:0 13px; box-shadow:0 5px 16px rgba(0,0,0,.12);
  }
  .mobile-top img { width:32px; height:32px; background:#fff; border-radius:50%; padding:1px; }
  .mobile-top strong { font-size:12px; }
  .topbar { display:none; }
  .hero { min-height:170px; padding:22px 18px 54px; }
  .hero-row { gap:16px; }
  .hero-copy { min-width:0; }
  /* Trừ phần ô "Ngày truy cập" bên phải để tiêu đề vẫn vừa 1 dòng. */
  .hero-copy h1 { font-size:clamp(20px,calc((100vw - 300px) / 14),40px); letter-spacing:-.5px; }
  .hero-copy p { font-size:12.5px; }
  .datebox { flex:none; min-width:0; padding:12px 15px; text-align:right; }
  .access, .access-meta { justify-content:flex-end; }
  .access-date strong { font-size:21px; }
  .content { padding:0 10px 28px; margin-top:-34px; }
  .quick-tabs { gap:8px; }
  .quick { padding:10px 9px; gap:8px; }
  .quick.active { padding:9px 8px; }
  .quick .qico { width:35px; height:35px; }
  .quick strong { font-size:11px; }
  .quick span { display:none; }
  .report-head { align-items:flex-start; flex-direction:column; padding:14px; }
  .head-side { width:100%; align-items:stretch; }
  .actions { width:100%; }
  .btn { flex:1; }
  .updated { text-align:left; }
  .report-body { padding:10px; }
  .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .overview { grid-template-columns:1fr; gap:10px; }
  .overview .kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .overview .kpis.four { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .pie-wrap { justify-content:center; }
  .pie-legend { max-width:320px; }
  .kpi { padding:11px 12px; }
  .kpi strong { font-size:25px; }
  .panel { padding:13px 12px; }

  .units thead { display:none; }
  .units, .units tbody, .units tr, .units td { display:block; width:100%; }
  .units tr {
    display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px 8px;
    padding:11px 0; border-bottom:1px solid #edf2f7;
  }
  .units td { border:0; padding:0; text-align:left; white-space:normal; }
  .units td:first-child { grid-column:1 / -1; font-size:13.5px; }
  .units td[data-label]::before {
    content:attr(data-label); display:block; font-size:9.5px; color:#8a9baa;
    text-transform:uppercase; letter-spacing:.3px;
  }
  .units td.pct-cell { grid-column:1 / -1; }
  .units td.pct-cell::before { display:none; }
  .pct { justify-content:flex-start; }
  .pct-bar { flex:1; width:auto; }
  .units tr.total { background:#f7fafd; border-radius:10px; padding:11px 10px; border-bottom:0; margin-top:6px; }
  .units tr.total td { background:transparent; }

  .bars { height:160px; grid-auto-columns:24px; }

  .kpis.four { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hbar { grid-template-columns:minmax(0,1fr) 90px 24px; }
  .cases thead { display:none; }
  .cases, .cases tbody, .cases tr, .cases td { display:block; width:100%; }
  .cases tr { padding:10px 0; border-bottom:1px solid #edf2f7; }
  .cases td { border:0; padding:2px 0; }
  .cases td[data-label]::before {
    content:attr(data-label) ": "; font-size:10px; color:#8a9baa; text-transform:uppercase; letter-spacing:.3px;
  }
  footer { padding:0 12px 20px; display:block; }
}

@media(max-width:560px) {
  .hero { min-height:0; padding:18px 14px 52px; }
  .hero-row { display:block; }
  .hero-copy .eyebrow { font-size:10.5px; letter-spacing:.8px; }
  /* Cỡ chữ theo chiều rộng màn hình để tiêu đề luôn vừa 1 dòng. */
  .hero-copy h1 { font-size:6.1vw; white-space:nowrap; letter-spacing:-.3px; margin:5px 0 7px; }
  .hero-copy p { font-size:12px; line-height:1.45; }
  .datebox {
    display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; margin-top:12px;
    padding:8px 10px; border-radius:14px; text-align:left;
  }
  .datebox small { font-size:9px; letter-spacing:.5px; width:100%; }
  .access { margin:0; justify-content:flex-start; }
  .access-btn { width:28px; height:28px; font-size:16px; }
  .access-date strong { font-size:17px; }
  .access-meta { justify-content:flex-start; }
  .quick, .quick.active { flex-direction:column; justify-content:flex-start; text-align:center; gap:6px; padding:9px 5px; }
  .quick.active { padding:8px 4px; }
  .quick .qico { width:32px; height:32px; font-size:17px; }
  .quick strong { font-size:10.5px; line-height:1.3; }
  .report-title { align-items:flex-start; gap:10px; }
  .report-icon { width:36px; height:36px; font-size:17px; border-radius:10px; }
  .report-title h2 { font-size:15px; line-height:1.35; }
  .overview .kpis, .overview .kpis.four { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .viewer { padding:0; }
  .viewer-box { border-radius:0; }
  .unit-box { height:100%; }
  .unit-body { padding:12px; }
  .unit-toolbar { padding:8px; }
  .unit-toolbar select { width:100%; min-width:0; }
  .seg { width:100%; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
  .seg button { padding:0 4px; font-size:11px; }
  .seg.status { grid-template-columns:repeat(2,minmax(0,1fr)); padding-left:0; border-left:0; }
  .oc-top { flex-wrap:wrap; }
  .viewer-head { padding:8px; gap:6px; }
  .viewer-head strong { font-size:12.5px; }
  .pie-wrap { flex-direction:column; gap:16px; }
  .pie { width:min(210px, 58vw); height:min(210px, 58vw); }
  .pie-legend { width:100%; max-width:none; }
  .pie-legend { font-size:12.5px; }
  .pie-legend li { grid-template-columns:10px minmax(0,1fr) auto 44px; gap:6px; }
}