/* Lớp hoàn thiện giao diện: tăng độ rõ, chiều sâu và cảm giác hiện đại mà không đổi luồng sử dụng. */
:root {
  --bg:#f3f6fb;
  --surface-2:#f7f9fc;
  --hover:#f1f4f8;
  --text:#172033;
  --text-2:#596579;
  --text-3:#8792a6;
  --border:#e7ebf2;
  --border-2:#dce2eb;
  --shadow-sm:0 1px 2px rgba(20,32,55,.04), 0 5px 16px rgba(20,32,55,.04);
  --shadow-lg:0 18px 48px rgba(20,32,55,.16);
  --radius:14px;
  --radius-sm:9px;
  --gap:18px;
}

body {
  min-height:100vh;
  background:
    radial-gradient(900px 440px at 72% -180px, color-mix(in srgb, var(--primary) 8%, transparent), transparent 72%),
    linear-gradient(180deg, #f7f9fc 0, var(--bg) 240px);
}

/* Thanh điều hướng có nhịp điệu rõ hơn và vùng bấm thoáng hơn. */
.rail {
  padding-top:16px;
  border-right-color:#e9edf4;
  box-shadow:5px 0 24px rgba(25,42,70,.035);
}
.rail__logo {
  position:relative;
  width:50px;
  height:50px;
  color:var(--primary);
  background:linear-gradient(145deg, var(--primary-050), #fff) !important;
  border:1px solid color-mix(in srgb, var(--primary) 16%, var(--border)) !important;
  box-shadow:0 7px 18px color-mix(in srgb, var(--primary) 14%, transparent);
}
.rail__logo::after {
  content:"";
  position:absolute;
  right:5px;
  bottom:5px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--success);
  border:2px solid #fff;
}
.rail__logo svg { width:27px; height:27px; stroke-width:1.9; }
.rail nav { gap:7px; }
.rail__item {
  min-height:67px;
  justify-content:center;
  border:1px solid transparent;
  transition:transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease;
}
.rail__item:hover { transform:translateY(-1px); }
.rail__item[aria-current="page"] {
  color:var(--primary);
  background:linear-gradient(135deg, var(--rail-active), #fff);
  border-color:color-mix(in srgb, var(--primary) 13%, transparent);
  box-shadow:0 6px 15px color-mix(in srgb, var(--primary) 8%, transparent);
}
.rail__item[aria-current="page"]::before {
  content:"";
  position:absolute;
  left:-7px;
  top:17px;
  bottom:17px;
  width:3px;
  border-radius:0 4px 4px 0;
  background:var(--primary);
}
.rail__item svg { stroke-width:1.8; }
.rail__item .n.hot,
.icon-btn .count { box-shadow:0 3px 9px rgba(220,55,45,.28); }

/* Thanh trên nhẹ, trong và nổi vừa đủ khi cuộn. */
.topbar {
  height:72px;
  padding-inline:28px;
  background:rgba(255,255,255,.88);
  border-bottom-color:rgba(220,226,235,.8);
  box-shadow:0 4px 18px rgba(26,39,63,.035);
  backdrop-filter:blur(16px) saturate(1.2);
}
.topbar h1 {
  font-size:21px;
  font-weight:650;
  letter-spacing:-.025em;
}
.topbar h1::after {
  content:"";
  display:block;
  width:30px;
  height:3px;
  margin-top:5px;
  border-radius:4px;
  background:var(--primary);
  opacity:.9;
}
.icons { gap:8px; }
.icon-btn {
  width:42px;
  height:42px;
  border:1px solid transparent;
  transition:transform .16s ease, color .16s ease, background .16s ease, border-color .16s ease;
}
.icon-btn:hover,
.icon-btn[aria-expanded="true"] {
  transform:translateY(-1px);
  border-color:var(--border);
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.avatar { background:linear-gradient(145deg, var(--avatar), color-mix(in srgb, var(--avatar) 76%, #102b2d)); }

/* Nội dung chính và thẻ. */
.page { max-width:1640px; padding:26px 28px 48px; }
.banner {
  border:1px solid color-mix(in srgb, var(--warning) 22%, transparent);
  box-shadow:var(--shadow-sm);
}
.panel {
  border-color:rgba(224,229,238,.92);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease, border-color .2s ease;
}
.panel:hover { border-color:var(--border-2); box-shadow:0 10px 28px rgba(26,39,63,.065); }
.panel-head { min-height:57px; padding:15px 20px; background:linear-gradient(180deg, #fff, #fdfdfe); }
.panel-head h2 { font-size:15px; font-weight:650; letter-spacing:-.01em; }
.panel-body { padding:19px 20px; }

/* KPI có dải nhận diện màu và chuyển động nhỏ khi rê chuột. */
.kpis { gap:18px; }
.kpi {
  position:relative;
  overflow:hidden;
  min-height:90px;
  padding:18px 19px;
  border-color:rgba(224,229,238,.92);
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.kpi::before {
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--info);
}
.kpi:has(.i-red)::before { background:var(--danger); }
.kpi:has(.i-amber)::before { background:var(--warning); }
.kpi:has(.i-green)::before { background:var(--success); }
.kpi:has(.i-grey)::before { background:#7c8799; }
a.kpi:hover,
button.kpi:hover {
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--primary) 16%, var(--border));
  background:#fff;
  box-shadow:0 14px 30px rgba(26,39,63,.09);
}
.kpi__icon {
  width:46px;
  height:46px;
  border-radius:13px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);
}
.kpi .v { font-size:23px; letter-spacing:-.03em; }
.kpi .l { margin-top:5px; line-height:1.35; }

/* Điều khiển đồng nhất và rõ trạng thái tương tác. */
.btn {
  min-height:36px;
  border-radius:9px;
  box-shadow:0 1px 2px rgba(20,32,55,.03);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform:translateY(-1px); box-shadow:0 5px 12px rgba(20,32,55,.07); }
.btn.primary {
  background:linear-gradient(135deg, var(--primary), var(--primary-600));
  box-shadow:0 6px 14px color-mix(in srgb, var(--primary) 22%, transparent);
}
.btn.primary:hover { filter:brightness(.98) saturate(1.08); }
input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], input[type="time"], input[type="tel"], select, textarea {
  min-height:38px;
  border-radius:9px;
  background:#fff;
  box-shadow:0 1px 2px rgba(20,32,55,.025);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color:color-mix(in srgb, var(--primary) 72%, #fff);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent);
}
.chips { gap:7px; }
.chip { height:32px; border-radius:9px; }
.chip:hover { border-color:color-mix(in srgb, var(--primary) 32%, var(--border)); color:var(--text); }
.chip[aria-pressed="true"] {
  box-shadow:0 3px 10px color-mix(in srgb, var(--primary) 10%, transparent);
}

/* Bảng bớt khô: đầu bảng có nền, hàng thoáng và hover liền mạch. */
.table-wrap { scrollbar-color:var(--border-2) transparent; }
th {
  padding-block:11px;
  color:#6f7b8f;
  background:#f7f9fc;
  border-bottom-color:var(--border-2);
  font-weight:650;
  letter-spacing:.015em;
}
td { padding-block:13px; }
tbody tr { transition:background .12s ease; }
tbody tr:nth-child(even) td { background:#fbfcfe; }
tbody tr:hover td { background:#f2f6fb; }
.plate {
  border-width:1px;
  border-color:#584d05;
  border-radius:5px;
  box-shadow:0 2px 5px rgba(80,70,0,.12);
}
.badge { height:25px; font-weight:600; box-shadow:inset 0 0 0 1px rgba(255,255,255,.55); }
.todo li { padding:13px 20px; transition:background .15s ease; }
.todo li:hover { background:#f8fafc; }

/* Hộp nổi và hộp thoại cùng một ngôn ngữ thị giác. */
.pop,
dialog {
  border-color:var(--border-2);
  box-shadow:0 22px 54px rgba(20,32,55,.17);
}
.pop { border-radius:15px; }
dialog { border-radius:16px; }
dialog::backdrop { background:rgba(18,28,45,.46); backdrop-filter:blur(3px); }
.dlg-head { padding:18px 20px; }
.dlg-body { padding:19px 20px; }
.dlg-foot { padding:14px 20px; background:#fafbfd; }
.tab { font-weight:600; }
.tab[aria-selected="true"] { border-bottom-width:3px; }

@media (prefers-reduced-motion: no-preference) {
  .view:not([hidden]) { animation:view-in .28s ease-out both; }
  @keyframes view-in { from { opacity:.45; transform:translateY(5px); } to { opacity:1; transform:none; } }
}

@media (max-width:640px) {
  :root { --gap:14px; }
  body { background:var(--bg); }
  .rail {
    height:66px;
    padding:0 5px;
    background:rgba(255,255,255,.96);
    box-shadow:0 -8px 24px rgba(20,32,55,.08);
    backdrop-filter:blur(14px);
  }
  .rail__logo { width:42px; height:42px; box-shadow:none; }
  .rail__logo::after { right:3px; bottom:3px; }
  .rail__item { min-height:55px; transform:none !important; border:0; box-shadow:none !important; }
  .rail__item[aria-current="page"]::before {
    left:28%; right:28%; top:auto; bottom:0; width:auto; height:3px; border-radius:3px 3px 0 0;
  }
  .main { padding-bottom:66px; }
  .topbar { height:60px; padding-inline:14px; }
  .topbar h1 { font-size:18px; }
  .topbar h1::after { width:23px; height:2px; margin-top:3px; }
  .page { padding:15px 12px 26px; }
  .kpis { grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .kpi { min-height:94px; padding:14px 12px; gap:10px; align-items:flex-start; }
  .kpi::before { top:14px; bottom:14px; }
  .kpi__icon { width:38px; height:38px; border-radius:10px; }
  .kpi__icon svg { width:19px; height:19px; }
  .kpi .v { font-size:19px; }
  .kpi .l { font-size:11.5px; }
  .panel:hover { box-shadow:var(--shadow-sm); }
  .panel-head { padding:13px 14px; }
  .panel-body { padding:15px 14px; }
  .table-wrap tr { margin:10px; padding:12px; border:1px solid var(--border); border-radius:11px; background:#fff; box-shadow:0 3px 10px rgba(20,32,55,.04); }
  .table-wrap tbody tr:last-child { border-bottom:1px solid var(--border); }
  .table-wrap table td { background:transparent !important; }
}

@media (max-width:390px) {
  .kpis { grid-template-columns:minmax(0,1fr); }
  .kpi { min-height:82px; align-items:center; }
}