: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; }
.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;
}
.datebox strong { display:block; font-size:26px; margin:5px 0 3px; }
.datebox span { font-size:11px; color:#ecf6ff; }

.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;
}
.report-title h2 { margin:0; font-size:18px; color:#183b7c; }
.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; }

.toolbar {
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 18px; background:#f7fafd; border-bottom:1px solid var(--line);
}
.date-nav { display:flex; align-items:center; gap:6px; }
.date-nav input {
  height:36px; border:1px solid #c7d9e8; border-radius:10px; padding:0 10px;
  color:#17468a; font-weight:700; background:#fff;
}
.icon-btn {
  width:36px; height:36px; border:1px solid #c7d9e8; border-radius:10px; background:#fff;
  color:#17468a; font-size:18px; font-weight:800; cursor:pointer; line-height:1;
}
.icon-btn:disabled { opacity:.4; cursor:default; }
.status-pill {
  padding:6px 11px; 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 { margin-left:auto; color:#8a9baa; font-size:11px; }

.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.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-line;
}

.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; }

.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); }
.bars {
  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;
}
.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;
}
.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; }

.frame-shell { padding:12px; background:#eef5fa; }
.excel-frame { display:block; width:100%; height:720px; border:0; border-radius:10px; background:#fff; }
.frame-note { text-align:right; padding:7px 4px 0; color:#8a9baa; font-size:10px; }

.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; }
}

@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; }
  .hero-copy h1 { font-size:clamp(26px,4.6vw,40px); letter-spacing:-.5px; }
  .hero-copy p { font-size:12.5px; }
  .datebox { flex:none; min-width:0; padding:12px 15px; text-align:right; }
  .datebox strong { font-size:22px; }
  .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; }
  .actions { width:100%; }
  .btn { flex:1; }
  .toolbar { padding:10px 12px; gap:8px; }
  .date-nav { width:100%; }
  .date-nav input { flex:1; min-width:0; }
  .updated { margin-left:0; width:100%; }
  .report-body { padding:10px; }
  .kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .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; }
  .excel-frame { height:610px; }
  .frame-shell { padding:5px; }
  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:inline-flex; align-items:center; gap:8px; margin-top:12px;
    padding:6px 12px; border-radius:999px; text-align:left;
  }
  .datebox small { font-size:9px; letter-spacing:.5px; }
  .datebox strong { font-size:15px; margin:0; }
  .datebox span { font-size:11px; }
  .datebox span::before { content:"•"; margin-right:8px; opacity:.6; }
}