/* Component styles (CLAUDE.md §6.0). Only tokens.css variables are used here — no literal
   colors. Macros live in app/templates/components/. Reference page: /admin/ui-kit. */

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.5; max-width: 100%; }
/* overflow-x: hidden on BOTH html and body turns body into a scroll container, which silently breaks
   position: sticky for the sidebar (it scrolled away on long pages). html keeps `hidden` (propagates to
   the viewport); body uses `clip`, which cuts overflow without creating a scroll container. */
html { overflow-x: hidden; }
body { overflow-x: clip; }
/* Phase 1.1 (2026-10-10): 2-3 very soft fixed radial glows behind content — dark theme only (a
   light page doesn't want visible color blooms, so this is gated on [data-theme] NOT being light).
   Fixed + behind everything (z-index -1) so it never scrolls with content or sits above cards. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(640px circle at 85% -5%, rgba(96, 165, 250, 0.06), transparent 60%),
    radial-gradient(560px circle at -5% 35%, rgba(167, 139, 250, 0.05), transparent 60%),
    radial-gradient(680px circle at 60% 110%, rgba(52, 211, 153, 0.045), transparent 60%);
}
:root[data-theme="light"] body::before { display: none; }
h1, h2, h3, h4 { line-height: 1.3; font-weight: 600; margin: 0 0 var(--space-3); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
a { color: var(--color-accent); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.num, .tabular-nums { font-variant-numeric: tabular-nums; }
.muted { color: var(--color-text-muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- forms ---------- */
input[type="text"], input[type="email"], input[type="date"], input[type="search"], select {
  font: inherit; font-size: var(--text-base); width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  -webkit-appearance: none; appearance: none;
}
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
input:disabled { background: var(--color-bg); color: var(--color-text-muted); }
label, .field-label { display: block; font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-1); }
.field { margin-bottom: var(--space-4); }
.form-error { color: var(--color-status-overdue-text); font-size: var(--text-sm); margin-top: var(--space-1); }

/* ---------- buttons: four variants that must look different ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: inherit; font-size: var(--text-base); font-weight: 600; line-height: 1.2;
  min-height: 44px; padding: 10px var(--space-4); border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-primary { background: var(--color-accent); color: var(--color-accent-contrast); }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.btn-secondary:hover { background: var(--color-bg); }
.btn-ghost { background: transparent; color: var(--color-accent); }
.btn-ghost:hover { background: var(--color-accent-soft); }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: var(--color-danger-hover); }
.btn-sm { min-height: 34px; padding: 6px 12px; font-size: var(--text-sm); }
.btn-lg { min-height: 52px; font-size: var(--text-lg); }
.btn-block { width: 100%; }

/* ---------- badges & pills: soft tint + bold same-hue text ---------- */
.badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; }
.badge-overdue { background: var(--color-status-overdue-soft); color: var(--color-status-overdue-text); }
.badge-pending { background: var(--color-status-pending-soft); color: var(--color-status-pending-text); }
.badge-confirmed { background: var(--color-status-confirmed-soft); color: var(--color-status-confirmed-text); }
.badge-admin { background: var(--color-status-admin-soft); color: var(--color-status-admin-text); }
.badge-muted { background: var(--color-status-unseen-soft); color: var(--color-status-unseen-text); }

.pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--text-sm); white-space: nowrap; }
.pill b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pill-overdue { background: var(--color-status-overdue-soft); color: var(--color-status-overdue-text); }
.pill-pending { background: var(--color-status-pending-soft); color: var(--color-status-pending-text); }
.pill-unseen { background: var(--color-status-unseen-soft); color: var(--color-status-unseen-text); }
.pill-zero { opacity: 0.4; }

/* ---------- UI v2 app shell (2026-11-03, docs/ui/UI_V2.md §1): icon rail · secondary panel · top bar · mobile bottom bar ---------- */
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; padding: var(--space-2) var(--space-3); background: var(--color-accent); color: var(--color-accent-contrast); border-radius: var(--radius-sm); }
.skip-link:focus { left: 8px; }
.app { display: grid; grid-template-columns: var(--rail-width) minmax(0, 1fr); min-height: 100vh; }
.app.has-subnav { grid-template-columns: var(--rail-width) var(--subnav-width) minmax(0, 1fr); }
:root[data-subnav="collapsed"] .app.has-subnav { grid-template-columns: var(--rail-width) minmax(0, 1fr); }
:root[data-subnav="collapsed"] .subnav { display: none; }

.rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; background: var(--color-shell-bg); color: var(--color-shell-text); border-right: 1px solid var(--color-border); z-index: 20; overflow-y: auto; scrollbar-width: none; }
.rail-nav { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 0 6px; }
.rail-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 2px 7px; border-radius: var(--radius-md); color: var(--color-shell-text); text-decoration: none; font-size: 11px; line-height: 1.2; text-align: center; }
.rail-item svg { width: 22px; height: 22px; }
.rail-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.rail-item.active { background: rgba(96, 165, 250, 0.16); color: #fff; font-weight: 600; }
.rail-item.active svg { color: var(--color-neon-blue); }
.rail-item.active::before { content: ""; position: absolute; left: -6px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-neon-blue); }
.rail-item:focus-visible, .subnav-nav a:focus-visible, .topbar-icon:focus-visible, .topbar-search:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.rail-label { max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-dot { position: absolute; top: 6px; left: calc(50% + 7px); width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--color-status-overdue); box-shadow: 0 0 0 2px var(--color-shell-bg); }

.subnav { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--color-surface); border-right: 1px solid var(--color-border); padding: var(--space-3) var(--space-2); z-index: 18; }
.subnav-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); height: 40px; padding: 0 var(--space-2) var(--space-2); }
.subnav-title { font-weight: 700; font-size: var(--text-base); color: var(--color-text); }
.subnav-toggle, .subnav-close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text-muted); cursor: pointer; }
.subnav-toggle:hover, .subnav-close:hover { background: var(--color-surface-2); color: var(--color-text); }
.subnav-toggle svg { width: 18px; height: 18px; }
.subnav-close { display: none; font-size: var(--text-lg); }
.subnav-section { padding: var(--space-3) var(--space-3) var(--space-1); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-tertiary); }
.subnav-nav { display: flex; flex-direction: column; gap: 2px; }
.subnav-nav a { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; padding: 8px var(--space-3); border-radius: var(--radius-sm); color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); }
.subnav-nav a svg { width: 18px; height: 18px; flex-shrink: 0; }
.subnav-nav a:hover { background: var(--color-surface-2); color: var(--color-text); }
.subnav-nav a.active { background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }
.subnav-nav .nav-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.shell-body { min-width: 0; display: flex; flex-direction: column; }
.shell-topbar { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: var(--space-3); height: var(--topbar-height); padding: 0 var(--space-5); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.topbar-crumb { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-size: var(--text-sm); white-space: nowrap; }
.crumb-module { color: var(--color-text-muted); text-decoration: none; }
.crumb-module:hover { color: var(--color-text); text-decoration: underline; }
.crumb-sep { color: var(--color-text-tertiary); }
.crumb-page { font-weight: 700; font-size: var(--text-base); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.topbar-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: var(--radius-md); background: none; color: var(--color-text-muted); cursor: pointer; text-decoration: none; flex-shrink: 0; }
.topbar-icon svg { width: 20px; height: 20px; }
.topbar-icon:hover, .topbar-icon.is-active { background: var(--color-surface-2); color: var(--color-text); }
.subnav-open { display: none; }
:root[data-subnav="collapsed"] .subnav-open { display: inline-flex; }
.topbar-search { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); width: min(380px, 40vw); height: 38px; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg); color: var(--color-text-tertiary); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.topbar-search svg { width: 16px; height: 16px; flex-shrink: 0; }
.topbar-search:hover { border-color: var(--color-accent); color: var(--color-text-muted); }
.topbar-search-text { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--color-border-strong); border-radius: 6px; background: var(--color-surface-2); color: var(--color-text-muted); font: inherit; font-size: 11px; line-height: 1.5; white-space: nowrap; }

.topnote { position: relative; }
.topnote > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.topnote > summary::-webkit-details-marker { display: none; }
.topnote > summary svg { width: 15px; height: 15px; }
.topnote-warn > summary { background: var(--color-status-pending-soft); color: var(--color-status-pending-text); }
.topnote-error > summary { background: var(--color-status-overdue-soft); color: var(--color-status-overdue-text); }
.topnote-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; width: min(420px, calc(100vw - 32px)); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: var(--text-sm); }
.topnote-panel p { margin: var(--space-2) 0 0; color: var(--color-text-muted); }

.shell-main { width: 100%; max-width: var(--content-max-width); margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-8); }
@media (min-width: 1600px) { .shell-main { max-width: 1440px; } }

/* account menu: rail (avatar only, opens right) and top bar (avatar + name, drops down) */
.account { position: relative; }
.account > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-2); padding: 3px; border-radius: var(--radius-full); }
.account > summary::-webkit-details-marker { display: none; }
.account > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.account-avatar { width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--color-accent-soft); color: var(--color-accent); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-sm); flex-shrink: 0; }
.account-avatar-lg { width: 44px; height: 44px; font-size: var(--text-base); }
.account-rail .account-avatar { background: rgba(255, 255, 255, 0.12); color: #fff; width: 40px; height: 40px; }
.account-name { font-size: var(--text-sm); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); }
.account-panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 250px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-2); z-index: 40; }
.account-rail .account-panel { right: auto; left: calc(100% + 10px); top: 0; }
.account-panel-head { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-1); }
.account-panel-name { font-weight: 700; margin-bottom: 4px; }
.account-panel-sub { margin-top: 4px; font-size: var(--text-xs); color: var(--color-text-muted); }
.account-logout { display: block; padding: 10px var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; }
.account-logout:hover { background: var(--color-bg); }
.account-theme-toggle { display: flex; width: 100%; align-items: center; gap: var(--space-2); padding: 10px var(--space-3); border-radius: var(--radius-sm); border: none; background: none; color: var(--color-text); font: inherit; font-size: var(--text-base); text-align: left; cursor: pointer; }
.account-theme-toggle:hover { background: var(--color-bg); }
.account-theme-toggle svg { width: 18px; height: 18px; flex-shrink: 0; }
.account-theme-toggle span { display: flex; align-items: center; gap: var(--space-2); }

/* status tag — one palette for every module (docs/ui/UI_V2.md §6) */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; line-height: 1.5; white-space: nowrap; }
.tag-ok { background: var(--color-status-confirmed-soft); color: var(--color-status-confirmed-text); }
.tag-warn { background: var(--color-status-pending-soft); color: var(--color-status-pending-text); }
.tag-danger { background: var(--color-status-overdue-soft); color: var(--color-status-overdue-text); }
.tag-info { background: var(--color-accent-soft); color: var(--color-accent); }
.tag-admin { background: var(--color-status-admin-soft); color: var(--color-status-admin-text); }
.tag-muted { background: var(--color-status-unseen-soft); color: var(--color-status-unseen-text); }

/* person: avatar + display name, email only in the tooltip */
.person { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; vertical-align: middle; }
.person-av { flex-shrink: 0; width: 24px; height: 24px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; background: var(--color-accent-soft); color: var(--color-accent); }
.person-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* quick search dialog */
.qs { width: min(640px, calc(100vw - 32px)); margin: 12vh auto auto; padding: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-md); }
.qs::backdrop { background: rgb(0 0 0 / 0.5); }
.qs-form { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.qs-form svg { width: 18px; height: 18px; color: var(--color-text-tertiary); flex-shrink: 0; }
.qs-form input { flex: 1; min-width: 0; border: 0; background: none; color: var(--color-text); font: inherit; font-size: var(--text-lg); outline: none; }
.qs-results { max-height: 56vh; overflow-y: auto; padding: var(--space-2); }
.qs-hint { margin: 0; padding: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }
.qs-group + .qs-group { margin-top: var(--space-2); }
.qs-group-label { padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-tertiary); }
.qs-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: 10px var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; }
.qs-item:hover, .qs-item.is-active { background: var(--color-accent-soft); }
.qs-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-item-sub { flex-shrink: 0; font-size: var(--text-xs); color: var(--color-text-muted); }

/* mobile bottom bar + sheets */
.shell-tab-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 25; height: var(--tab-bar-height); background: var(--color-shell-bg); border-top: 1px solid var(--color-border); padding-bottom: env(safe-area-inset-bottom); }
.shell-tab-bar > a, .shell-tab-more > summary { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px 4px; color: var(--color-shell-text); text-decoration: none; font-size: 11px; border-top: 3px solid transparent; }
.shell-tab-bar > a svg, .shell-tab-more > summary svg { width: 22px; height: 22px; }
.shell-tab-bar > a span, .shell-tab-more > summary span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.shell-tab-bar > a.active, .shell-tab-more.active > summary { color: #fff; font-weight: 600; border-top-color: var(--color-neon-blue); }
.shell-tab-bar > a.active svg { color: var(--color-neon-blue); }
.rail-dot-tab { top: 6px; }
.shell-tab-more { flex: 1 1 0; min-width: 0; display: flex; }
.shell-tab-more > summary { list-style: none; cursor: pointer; width: 100%; }
.shell-tab-more > summary::-webkit-details-marker { display: none; }
.shell-tab-more-panel.sheet { position: fixed; left: 0; right: 0; bottom: var(--tab-bar-height); max-height: 72vh; overflow-y: auto; padding: var(--space-3) var(--space-4) var(--space-4); background: var(--color-surface); border-top: 1px solid var(--color-border-strong); border-radius: var(--radius-lg) var(--radius-lg) 0 0; box-shadow: var(--shadow-md); }
.sheet-group { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.sheet-group-label { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-tertiary); }
.sheet-group-label svg { width: 16px; height: 16px; }
.sheet-group a, .sheet-logout { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-2); color: var(--color-text); text-decoration: none; border-radius: var(--radius-sm); }
.sheet-group a.active { color: var(--color-accent); font-weight: 600; background: var(--color-accent-soft); }
.sheet-logout { justify-content: flex-start; margin-top: var(--space-2); color: var(--color-text-muted); }
.sheet-logout svg { width: 18px; height: 18px; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 29; background: rgb(0 0 0 / 0.5); }

@media (max-width: 1023px) {
  .topbar-search-text, .topbar-search kbd { display: none; }
  .topbar-search { width: 38px; padding: 0; justify-content: center; border-color: transparent; background: none; }
}
@media (max-width: 767px) {
  .app, .app.has-subnav, :root[data-subnav="collapsed"] .app.has-subnav { grid-template-columns: minmax(0, 1fr); }
  .rail { display: none; }
  .subnav, :root[data-subnav="collapsed"] .subnav { display: block; position: fixed; top: 0; bottom: 0; left: 0; width: min(300px, 86vw); height: auto; z-index: 30; transform: translateX(-105%); transition: transform 0.18s ease; box-shadow: var(--shadow-md); }
  .subnav-sheet-open .subnav { transform: none; }
  .subnav-toggle { display: none; }
  .subnav-close { display: inline-flex; }
  .subnav-open, :root[data-subnav="collapsed"] .subnav-open { display: inline-flex; }
  .shell-topbar { padding: 0 var(--space-2) 0 var(--space-3); gap: var(--space-1); }
  .topbar-crumb .crumb-module, .topbar-crumb .crumb-sep { display: none; }
  .account-top .account-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .shell-tab-bar { display: flex; }
  .shell-main { padding: var(--space-4) var(--space-4) calc(var(--tab-bar-height) + var(--space-6)); }
}
@media (prefers-reduced-motion: reduce) { .subnav { transition: none; } }

/* legacy hooks kept for pages still using them */
.nav-badge { margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: var(--radius-full); background: var(--color-accent-soft); color: var(--color-accent); font-size: var(--text-xs); font-weight: 700; text-align: center; }
.data-note { margin: var(--space-3) 0; padding: var(--space-3) var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm); }
.data-note > summary { cursor: pointer; font-weight: 600; }
.data-note ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }

.theme-toggle-to-dark { display: none; }
:root[data-theme="light"] .theme-toggle-to-light { display: none; }
:root[data-theme="light"] .theme-toggle-to-dark { display: flex; }

/* ---------- page header ---------- */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.page-header-breadcrumb { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-1); }
.page-header-breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.page-header-title { font-size: var(--text-2xl); margin: 0; }
.page-header-sub { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.page-header-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; position: relative; }

/* ---------- cards ---------- */
.card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--card-padding); margin-bottom: var(--gap-section);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 28px rgba(96, 165, 250, 0.07);
}
:root[data-theme="light"] .card:hover { box-shadow: var(--shadow-sm), 0 4px 16px rgba(15, 23, 42, 0.08); }
.card-pad { padding: var(--space-6); }
/* a .table-wrap sitting directly inside a .card is visual content, not a second nested card — drop its
   own surface chrome so only the outer .card reads as "a card" (§polish 3: no cards-in-cards) */
.card .table-wrap { box-shadow: none; border-left: none; border-right: none; border-radius: 0; }
.card .table-wrap:first-child { border-top: none; }

/* ---------- KPI cards ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--gap-grid); margin-bottom: var(--gap-section); align-items: stretch; }
/* two cards side by side (chart pairs); one column below 1024px. Replaces the old inline
   style="grid-template-columns: 1fr 1fr" that kept two charts squeezed side by side on phones. */
.card-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); margin-bottom: var(--gap-section); align-items: stretch; }
.card-grid-2 > .card { margin-bottom: 0; min-width: 0; }
@media (max-width: 1023px) { .card-grid-2 { grid-template-columns: minmax(0, 1fr); } }
/* a bare table/list card directly in the page flow gets the same section gap as a .card */
.shell-main > .table-wrap, .shell-main > .flat-list, .shell-main > .kho-list, .shell-main > .slip-list { margin-bottom: var(--gap-section); }
.kpi-card { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--card-padding); box-shadow: var(--shadow-sm); min-height: 108px; }
.kpi-card-value { font-size: var(--text-2xl); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); line-height: 1.1; }
.kpi-card-label { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); }
.kpi-card-sub { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kpi-card-sub[title] { cursor: help; }
.kpi-card-overdue .kpi-card-value { color: var(--color-status-overdue); }
.kpi-card-pending .kpi-card-value { color: var(--color-status-pending); }
.kpi-card-confirmed .kpi-card-value { color: var(--color-status-confirmed); }
.kpi-card-value[title] { cursor: help; text-decoration: underline dotted; text-decoration-color: var(--color-border-strong); text-underline-offset: 4px; }
.kpi-card-delta { font-size: var(--text-xs); font-weight: 600; margin-top: var(--space-1); }
.delta-good { color: var(--color-status-confirmed-text); font-weight: 600; }
.delta-bad { color: var(--color-status-overdue-text); font-weight: 600; }
.kpi-summary { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-5); }

/* ---------- info tooltip (hover/focus, CSS-only) ---------- */
.info-tip { position: relative; display: inline-block; margin-left: var(--space-1); cursor: help; color: var(--color-text-muted); }
.info-tip-bubble {
  position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -6px);
  width: max-content; max-width: 260px; background: var(--color-shell-bg); color: #fff;
  font-size: var(--text-xs); font-weight: 400; line-height: 1.4; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 20;
  opacity: 0; pointer-events: none; transition: opacity 0.1s ease;
}
.info-tip:hover .info-tip-bubble, .info-tip:focus .info-tip-bubble { opacity: 1; }
/* variants: open below (table headers sit at the top of a card), pinned to the start / end edge so a wide
   bubble near the card edge never overflows the page */
.info-tip-down .info-tip-bubble { bottom: auto; top: 100%; transform: translate(-50%, 6px); }
.info-tip-down.info-tip-start .info-tip-bubble { left: 0; transform: translateY(6px); }
.info-tip-down.info-tip-end .info-tip-bubble { left: auto; right: 0; transform: translateY(6px); }
.info-tip-bubble { white-space: normal; text-align: left; }

/* ---------- filter bar + date-range filter (<details>, right-aligned popover) ---------- */
.filter-bar { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-5); }
.filter-bar-form { display: flex; gap: var(--space-2); align-items: center; flex: 1 1 320px; flex-wrap: wrap; min-width: 0; }
.filter-bar-form > input, .filter-bar-form > select { flex: 1 1 180px; width: auto; }
.filter-bar-search { display: flex; gap: var(--space-2); align-items: center; flex: 1 1 320px; min-width: 0; }
.filter-bar-search input[type="text"] { flex: 1 1 auto; min-width: 0; }
.filter-bar-search datalist { display: none; }
.date-filter { position: relative; margin-left: auto; }
.date-filter > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 10px var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-weight: 600; color: var(--color-text); white-space: nowrap; }
.date-filter > summary::-webkit-details-marker { display: none; }
.date-filter > summary svg { width: 18px; height: 18px; color: var(--color-accent); }
.date-filter[open] > summary { border-color: var(--color-accent); }
.date-filter-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: min(360px, calc(100vw - 32px)); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-3); }
.date-filter-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-bottom: var(--space-3); }
.date-filter-presets a { padding: 9px var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; font-size: var(--text-sm); }
.date-filter-presets a:hover { background: var(--color-bg); }
.date-filter-presets a.active { background: var(--color-accent); color: var(--color-accent-contrast); font-weight: 600; }
.date-filter-custom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.date-filter-custom > div { min-width: 0; }
.date-filter-custom .btn { grid-column: 1 / -1; }
.date-filter-custom input { min-height: 40px; min-width: 0; width: 100%; }
.date-filter-note, .date-filter-warning { grid-column: 1 / -1; font-size: var(--text-xs); margin: 0; }
.date-filter-note { color: var(--color-text-muted); }
.date-filter-warning { color: var(--color-status-overdue-text); }
@media (max-width: 639px) { .date-filter-presets { grid-template-columns: 1fr; } }

/* ---------- slicer panel: multi-select filter popover (Batch 2b), same shape as .date-filter ---------- */
.slicer { position: relative; }
.slicer > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 10px var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font-weight: 600; color: var(--color-text); white-space: nowrap; }
.slicer > summary::-webkit-details-marker { display: none; }
.slicer[open] > summary { border-color: var(--color-accent); }
.slicer-count-badge { padding: 1px 8px; }
.slicer-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: min(320px, calc(100vw - 32px)); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-3); }
.slicer-form { display: flex; flex-direction: column; gap: var(--space-2); }
.slicer-search { min-height: 36px; width: 100%; }
.slicer-actions { display: flex; gap: var(--space-2); }
.slicer-action-btn { background: none; border: none; color: var(--color-accent); font-size: var(--text-xs); font-weight: 600; cursor: pointer; padding: 2px 0; }
.slicer-action-btn:hover { text-decoration: underline; }
.slicer-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: var(--space-2) 0; }
.slicer-option { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); padding: 4px var(--space-1); border-radius: var(--radius-sm); cursor: pointer; }
.slicer-option:hover { background: var(--color-bg); }
.slicer-option input { flex: 0 0 auto; }
@media (max-width: 639px) { .slicer-panel { position: fixed; left: 16px; right: 16px; top: auto; bottom: calc(var(--tab-bar-height) + 8px); width: auto; max-height: 70vh; overflow-y: auto; } }

/* ---------- info popover: collapsible ⓘ "Định nghĩa" next to a page title (Phase 2) ---------- */
.info-popover { position: relative; }
.info-popover > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); }
.info-popover > summary::-webkit-details-marker { display: none; }
.info-popover-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: min(480px, calc(100vw - 32px)); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-4); font-size: var(--text-sm); line-height: 1.5; color: var(--color-text); }
.info-popover-panel code { background: var(--color-bg); padding: 1px 4px; border-radius: 4px; }

/* ---------- chart metric tabs (Phase 2 trend chart) ---------- */
.chart-tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-3); flex-wrap: wrap; }
.chart-tab { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); padding: 6px var(--space-3); border-radius: var(--radius-full); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.chart-tab.active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); }

/* ---------- drawer (add/edit form, closed by default) ---------- */
.drawer { position: relative; }
.drawer > summary { list-style: none; }
.drawer > summary::-webkit-details-marker { display: none; }
.drawer-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; width: min(440px, calc(100vw - 32px)); padding: var(--space-5); box-shadow: var(--shadow-md); }
.drawer-panel h3 { margin-bottom: var(--space-4); }

/* ---------- kho chips (type-to-add picker) ---------- */
.kho-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-2); }
.kho-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--color-accent-soft); color: var(--color-accent); border-radius: var(--radius-full); padding: 4px 6px 4px 12px; font-size: var(--text-sm); font-weight: 600; }
.kho-chip-remove { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; background: none; border: none; cursor: pointer; color: var(--color-accent); width: 24px; height: 24px; border-radius: 50%; font-size: var(--text-sm); }
.kho-chip-remove:hover { background: var(--color-accent); color: #fff; }
.kho-picker-input { display: flex; gap: var(--space-2); }
.kho-picker-input input { flex: 1 1 auto; }

/* ---------- data table (+ horizontal scroll on narrow screens) ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: var(--space-3); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.data-table th { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 600; white-space: nowrap; background: var(--color-bg); position: sticky; top: 0; z-index: 2; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td.cell-actions { white-space: nowrap; }
.data-table tr[hidden] { display: none; }

/* ---------- bảng tháng × shop: cột đầu/header dính (sticky), cột số rộng đều (Phase 2) ---------- */
.table-scroll { overflow-x: auto; }
.table-monthly { table-layout: fixed; }
.table-monthly td { min-width: 150px; white-space: nowrap; }
.table-monthly th { min-width: 150px; max-width: 150px; white-space: normal; overflow-wrap: break-word; line-height: 1.3; vertical-align: bottom; }
.table-monthly th:first-child, .table-monthly td:first-child { min-width: 90px; white-space: nowrap; position: sticky; left: 0; z-index: 2; background: var(--color-surface); }
.table-monthly thead th { position: sticky; top: 0; z-index: 3; }
.table-monthly thead th:first-child { z-index: 4; }
.table-monthly tr.row-total td:first-child { background: var(--color-bg); }
.sort-link { color: inherit; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.sort-link:hover { color: var(--color-text); }
.sort-arrow { font-size: 0.7em; color: var(--color-text-muted); }
.sort-arrow.on { color: var(--color-accent); }
.cell-danger { color: var(--color-status-overdue-text); font-weight: 600; }
.row-overdue td { background: var(--color-status-overdue-soft); }

/* ---------- accordion (kho list) ---------- */
.kho-list { display: flex; flex-direction: column; gap: var(--space-3); }
details.accordion-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
details.accordion-item > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-4); }
details.accordion-item > summary::-webkit-details-marker { display: none; }
.accordion-title { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; min-width: 0; }
.accordion-chevron { display: inline-block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--color-text-muted); transition: transform 0.15s; flex-shrink: 0; }
details.accordion-item[open] > summary .accordion-chevron { transform: rotate(180deg); }
.accordion-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.accordion-item-counts { display: inline-flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.accordion-item-body { padding: 0 var(--space-4) var(--space-4); }

/* ---------- drill-down (Doanh thu thực: thương hiệu → chủng loại → nhóm hàng → mã, batch 1) ---------- */
.drill-list { display: flex; flex-direction: column; gap: var(--space-1); }
details.drill-item { border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
details.drill-item > summary { list-style: none; cursor: pointer; }
details.drill-item > summary::-webkit-details-marker { display: none; }
details.drill-item > summary:hover { background: var(--color-surface-2); }
/* one fixed grid per level: label + 3 right-aligned number columns under a single header row */
.drill-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 90px 90px; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.drill-row-label { display: flex; align-items: center; gap: var(--space-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drill-row-value { text-align: right; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.drill-head { padding-top: 0; padding-bottom: var(--space-1); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.drill-head .drill-row-value { font-size: var(--text-xs); }
.drill-row-leaf { border: 1px solid transparent; }
.drill-row-leaf .drill-row-label { padding-left: 22px; }
.drill-row-missing, .drill-row-missing .drill-row-value { color: var(--color-text-tertiary); }
.drill-body { padding: var(--space-2) var(--space-3) var(--space-3) var(--space-5); }
details.drill-item[open] > summary .row-chevron { transform: rotate(90deg); }

/* ---------- Phân tích đa chiều matrix table (Batch 2 e) ---------- */
.matrix-expand-btn { background: none; border: none; cursor: pointer; color: var(--color-accent); font-size: var(--text-xs); width: 20px; display: inline-flex; align-items: center; justify-content: center; }
.matrix-expand-body td { background: var(--color-bg); padding: 0; }
.matrix-total-row td { font-weight: 700; border-top: 2px solid var(--color-border-strong); }
.matrix-table th, .matrix-table td { white-space: nowrap; }

@media (max-width: 639px) {
  .drill-row { grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px var(--space-3); }
  .drill-row-label { grid-column: 1 / -1; white-space: normal; }
  .drill-head { display: none; }
  .drill-row-value::before { content: attr(data-label) " "; color: var(--color-text-muted); font-size: var(--text-xs); }
  .drill-row-value { text-align: left; }
  .drill-body { padding-left: var(--space-3); }
}

/* ---------- filter tabs (status tabs on / and per-kho on /admin) ---------- */
.filters { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
.filters a { padding: 8px 14px; border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-border-strong); color: var(--color-text); text-decoration: none; font-size: var(--text-sm); }
.filters a.active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); font-weight: 600; }

/* ---------- slip rows (card per slip, big confirm button) ---------- */
.slip-list { display: flex; flex-direction: column; gap: var(--space-3); }
.slip-row { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.slip-row.overdue { border-color: var(--color-status-overdue-soft); }
.slip-toggle > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-4); }
.slip-toggle > summary::-webkit-details-marker { display: none; }
.col-so-ct { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-meta { color: var(--color-text-muted); font-size: var(--text-sm); }
.col-badge { justify-self: end; }
.slip-items { padding: 0 var(--space-4) var(--space-4); }
.slip-action { padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--color-border); }
.slip-action form { margin: 0; }
.slip-action .btn { width: 100%; }
.slip-action .btn-confirm { min-height: 52px; font-size: var(--text-lg); }
@media (max-width: 639px) {
  .slip-toggle > summary { grid-template-columns: 1fr auto; }
  .slip-toggle > summary .col-meta { grid-column: 1 / -1; }
  .col-badge { grid-row: 1; grid-column: 2; }
}

/* ---------- mobile captions for card-style rows (flat lists, generic data table) ---------- */
@media (max-width: 639px) {
  .flat-cells > [data-label] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .flat-cells > [data-label]::before { content: attr(data-label); font-size: var(--text-xs); color: var(--color-text-muted); font-weight: 500; }
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr { border-bottom: 1px solid var(--color-border); padding: var(--space-3) 0; }
  .data-table td { border: none; padding: 3px var(--space-3); display: flex; justify-content: space-between; gap: var(--space-3); text-align: right; }
  .data-table td::before { content: attr(data-label); color: var(--color-text-muted); text-align: left; }
}

/* ---------- item table (product lines) ---------- */
.item-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.item-table th, .item-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--color-border); }
.item-table th { color: var(--color-text-muted); font-weight: 600; }
@media (max-width: 639px) {
  .item-table thead { display: none; }
  .item-table tr { display: block; border-bottom: 1px solid var(--color-border); padding: 6px 0; }
  .item-table td { display: flex; justify-content: space-between; border: none; padding: 3px 0; }
  .item-table td::before { content: attr(data-label); color: var(--color-text-muted); }
}

/* ---------- empty state, loading, load error, banner ---------- */
.empty-state { text-align: center; padding: var(--space-10) var(--space-4); color: var(--color-text-muted); }
.empty-state-icon { margin-bottom: var(--space-3); color: var(--color-border-strong); }
.empty-state-icon svg { width: 40px; height: 40px; }
.empty-state-title { font-size: var(--text-lg); font-weight: 600; color: var(--color-text); margin-bottom: var(--space-1); }
.empty { padding: var(--space-6); text-align: center; color: var(--color-text-muted); }
.loading { color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-2) 0; }
.load-error { display: block; background: none; border: none; padding: 0; font: inherit; color: var(--color-status-overdue-text); cursor: pointer; text-decoration: underline; margin: var(--space-2) 0; }
.banner svg { width: 20px; height: 20px; flex-shrink: 0; }
.banner { display: flex; align-items: center; gap: var(--space-2); background: var(--color-status-overdue-soft); color: var(--color-status-overdue-text); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-weight: 600; }
.banner-error { background: var(--color-status-overdue-soft); color: var(--color-status-overdue-text); }
.banner-info { display: block; background: var(--color-accent-soft); color: var(--color-text); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); font-weight: 400; font-size: var(--text-sm); }
.audit-line { color: var(--color-text-muted); font-size: var(--text-sm); }
.kpi-scope { font-size: var(--text-sm); margin: 0 0 var(--space-3); }
.section-note { color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-2) 0; }
.cell-nhanh { background: var(--color-status-pending-soft) !important; }
.row-total td { font-weight: 600; border-top: 2px solid var(--color-border-strong); }

/* ---------- toast (flash messages) ---------- */
.toast-stack { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.toast { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-base); border: 1px solid transparent; }
.toast-success { background: var(--color-status-confirmed-soft); color: var(--color-status-confirmed-text); border-color: var(--color-status-confirmed-soft); }
.toast-error { background: var(--color-danger); color: #fff; }

/* ---------- login / error: centered card, no shell ---------- */
.standalone { min-height: 100vh; display: grid; place-items: center; padding: var(--space-6); }
.standalone-card { width: min(400px, 100%); padding: var(--space-8); text-align: center; }
.standalone-brand { font-size: var(--text-xl); font-weight: 700; margin-bottom: var(--space-1); }
.standalone-desc { color: var(--color-text-muted); margin-bottom: var(--space-6); }
.standalone-code { font-size: 3rem; font-weight: 700; color: var(--color-accent); margin: 0; line-height: 1; }

/* ---------- misc ---------- */
.inline-form { display: inline; margin: 0; }
.nowrap { white-space: nowrap; }
.section { margin-top: var(--space-6); }
.section > h2 { margin-bottom: var(--space-3); }
.chart-card { margin-bottom: var(--gap-section); }
.chart-card canvas { width: 100% !important; }
.chart-box { height: 280px; padding-bottom: var(--space-2); }
.chart-box canvas { width: 100% !important; height: 100% !important; }
/* perf (2026-10-19): placeholder for sections loaded after first paint (hx-trigger="load"). */
.skeleton { border-radius: var(--radius-md); background: linear-gradient(90deg, var(--color-surface-2) 0%, var(--color-border) 50%, var(--color-surface-2) 100%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; }
.skeleton-chart { height: 280px; margin-bottom: var(--space-2); }
@keyframes skeleton-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.excel-btn-row { display: flex; justify-content: flex-end; margin: var(--space-3) 0 0; }

@media (max-width: 639px) {
  .page-header { align-items: stretch; }
  .page-header-actions { width: 100%; }
  .page-header-actions > * { flex: 1 1 auto; }
  .card, .card-pad { padding: var(--space-4); }
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--gap-section); }
  .kpi-card { padding: var(--space-3); min-height: 84px; }
  .kpi-card-value { font-size: var(--text-xl); }
  .kpi-card-label { font-size: var(--text-xs); }
  .kpi-card-sub { display: none; }
  .section { margin-top: var(--space-4); }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar > * { flex: 0 0 auto; width: 100%; }
  .date-filter { margin-left: 0; }
  .date-filter > summary { width: 100%; justify-content: center; }
  .date-filter-panel, .drawer-panel { position: fixed; left: 16px; right: 16px; top: auto; bottom: calc(var(--tab-bar-height) + 8px); width: auto; max-height: 70vh; overflow-y: auto; }
  .accordion-item-counts { width: 100%; margin-left: 0; }
  .filter-bar-form > input, .filter-bar-form > select { flex: 1 1 100%; }
.filter-bar-form > select { max-width: 100%; min-width: 0; }
}

/* ---------- flat overdue list (/qua-han, Phase 4.4): one row per slip, expandable ---------- */
.flat-list { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.flat-head, .flat-cells { display: grid; grid-template-columns: minmax(120px, 1.3fr) minmax(160px, 2fr) 96px 80px 64px minmax(110px, 1fr); gap: var(--space-3); align-items: center; padding: 10px var(--space-4); }
.flat-head { background: var(--color-bg); font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 600; border-bottom: 1px solid var(--color-border); }
.flat-row { border-bottom: 1px solid var(--color-border); }
.flat-row:last-child { border-bottom: none; }
.flat-row > summary { list-style: none; cursor: pointer; }
.flat-row > summary::-webkit-details-marker { display: none; }
.flat-row > summary:hover { background: var(--color-bg); }
.flat-row[open] > summary { background: var(--color-accent-soft); }
.flat-kho { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flat-tuoi b { color: var(--color-status-overdue-text); font-variant-numeric: tabular-nums; }
.flat-body { padding: 0 var(--space-4) var(--space-4); }
.flat-body .slip-action { border-top: none; padding: var(--space-3) 0; }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }
@media (max-width: 639px) {
  .flat-head { display: none; }
  .flat-cells { grid-template-columns: 1fr 1fr; gap: 4px var(--space-3); padding: var(--space-3) var(--space-4); }
  .flat-kho { grid-column: 1 / -1; order: 2; }
}

/* ---------- /qua-han confirm (Phase 4.5): fade the confirmed row out, 2x2 KPIs on phones ---------- */
.flat-row.htmx-swapping { opacity: 0.35; transition: opacity 0.3s ease; }
@media (max-width: 639px) {
  .kpi-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Hàng hóa (Phase H1): size drill-in row, hidden until toggled ---------- */
.size-detail-row { display: none; }
.size-detail-row.open { display: table-row; }
/* Mobile .data-table tr { display: block } (≥(0,1,1) specificity) outranks .size-detail-row alone
   ((0,1,0)) and leaks the hidden "Đang tải…" placeholder — raise specificity to win regardless of order. */
tr.size-detail-row { display: none; }
tr.size-detail-row.open { display: table-row; }
@media (max-width: 639px) {
  tr.size-detail-row.open { display: block; }
}
.data-table-compact td, .data-table-compact th { padding: var(--space-2) var(--space-3); }
.size-tier { margin-bottom: var(--space-4); }
.size-tier h4 { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }

/* ================================================================================
   Redesign Phase 1 (2026-10-10) — dark-first component kit, shown on /admin/ui-kit.
   Reference: docs/design/reference/ref_dashboard.mp4 (style/pattern only — not a pixel copy,
   no logos/branding from it). Everything below reads tokens.css variables only, so it re-themes
   automatically under :root[data-theme="light"]. ================================================= */

/* ---------- KPI card v2: icon+title, sparkline, big value, "kỳ này/kỳ trước/..." period row ---------- */
.kpi2-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap-grid); align-items: stretch; margin-bottom: var(--gap-section); }
/* two KPI rows in a row read as one block: grid gap between them, section gap only after the last */
.kpi2-grid:has(+ .kpi2-grid) { margin-bottom: var(--gap-grid); }
/* 5 compact cards on one row at 1440 (Hàng hóa stock row + Đang điều chuyển, 2026-10-24) */
.kpi2-grid-5 { grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); }
.kpi2-card { display: flex; flex-direction: column; gap: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--card-padding); box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
/* title row: icon + title on ONE line, ellipsis (never a 2-line clamp that could squeeze the
   sparkline row below it) — native title="" tooltip carries the full text when it overflows. */
.kpi2-title-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.kpi2-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-full); flex-shrink: 0; }
.kpi2-icon svg { width: 15px; height: 15px; }
.kpi2-icon-blue { background: color-mix(in srgb, var(--color-neon-blue) 15%, transparent); color: var(--color-neon-blue); }
.kpi2-icon-green { background: color-mix(in srgb, var(--color-status-confirmed) 15%, transparent); color: var(--color-status-confirmed); }
.kpi2-icon-amber { background: color-mix(in srgb, var(--color-status-pending) 15%, transparent); color: var(--color-status-pending); }
.kpi2-icon-pink { background: color-mix(in srgb, var(--color-neon-pink) 15%, transparent); color: var(--color-neon-pink); }
.kpi2-icon-purple { background: color-mix(in srgb, var(--color-neon-purple) 15%, transparent); color: var(--color-neon-purple); }
.kpi2-title { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 600; color: var(--color-text); cursor: help; }
/* subtitle sits UNDER the value row (never between title and value), so a card with a subtitle
   ("ELTON", "SETTLEMENT") keeps its value on the same baseline as its siblings; the period row is
   pushed to the card's bottom edge so those line up across the row too. */
.kpi2-subtitle { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-tertiary); }
/* value + sparkline share a row: value stays put at its natural width, sparkline takes the rest
   (~50% of the card per spec) and can never collide with the title row above since they're
   separate flex rows, not sharing horizontal space. */
/* min-height = the sparkline's height, so a card WITHOUT a sparkline centers its value on the same line */
.kpi2-value-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); min-height: 64px; }
.kpi2-value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--color-text); flex-shrink: 0; }
.kpi2-spark { width: 50%; height: 64px; flex-shrink: 0; position: relative; }
.kpi2-spark canvas { width: 100% !important; height: 100% !important; }
.kpi2-periods { display: flex; gap: var(--space-5); padding-top: var(--space-3); margin-top: auto; border-top: 1px solid var(--color-border); }
.kpi2-period { min-width: 0; }
.kpi2-period[title] { cursor: help; }
.kpi2-period-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-tertiary); margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi2-period-delta { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi2-period-delta.delta-flat { color: var(--color-text-muted); font-weight: 400; }
.kpi2-card-compact { padding: var(--space-4); gap: var(--space-1); }
.kpi2-card-compact .kpi2-value { font-size: var(--text-xl); }
.kpi2-card-compact .kpi2-spark { width: 44%; height: 40px; }
.kpi2-card-compact .kpi2-value-row { min-height: 40px; }
.kpi2-card-compact .kpi2-periods { border-top: none; padding-top: 0; gap: var(--space-4); }
@media (max-width: 639px) {
  .kpi2-spark { width: 42%; height: 52px; }
  .kpi2-value-row { min-height: 52px; }
  .kpi2-card-compact .kpi2-spark { height: 40px; }
}
.spark-pulse-dot {
  position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: var(--spark-pulse-color, var(--color-accent)); pointer-events: none;
  animation: px-spark-pulse 1.6s ease-out infinite;
}
@keyframes px-spark-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--spark-pulse-color, var(--color-accent)) 55%, transparent); }
  100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--spark-pulse-color, var(--color-accent)) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .spark-pulse-dot { animation: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--spark-pulse-color, var(--color-accent)) 30%, transparent); }
}

/* ---------- status flow ("metro line"): SVG stage nodes + branch to Hủy/Hoàn + legend ---------- */
.flow-headline { text-align: center; font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.flow-headline[title] { cursor: help; }
.flow-headline-value { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-status-confirmed); margin-right: 6px; text-shadow: 0 0 18px color-mix(in srgb, var(--color-status-confirmed) 55%, transparent); }
.flow-diagram { width: 100%; flex: 1 1 auto; min-height: 220px; display: flex; align-items: center; }
.flow-diagram svg { width: 100%; height: 100%; min-height: 220px; display: block; overflow: visible; }
.flow-line { fill: none; stroke-linecap: round; }
.flow-line-main { stroke: url(#flow-grad); stroke-width: 5; filter: drop-shadow(0 0 6px rgba(96, 165, 250, 0.55)); }
.flow-line-huy { stroke: var(--color-status-overdue); stroke-width: 3.5; opacity: 0.85; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-status-overdue) 60%, transparent)); }
.flow-line-hoan { stroke: var(--color-status-admin); stroke-width: 3.5; opacity: 0.85; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--color-status-admin) 60%, transparent)); }
.flow-travel-dot { fill: #fff; filter: drop-shadow(0 0 5px #fff); }
@media (prefers-reduced-motion: reduce) { .flow-dot-anim { display: none; } }
.flow-node-label { font-size: 9.5px; font-weight: 600; fill: var(--color-text-muted); font-family: var(--font-sans); }
.flow-node-count { font-size: 11.5px; font-weight: 700; font-family: var(--font-sans); letter-spacing: -0.01em; }
.flow-node-ring { fill: none; stroke: currentColor; stroke-width: 2; filter: drop-shadow(0 0 5px currentColor); }
.flow-node-fill { fill: var(--color-surface); stroke: var(--color-border); stroke-width: 1; }
.flow-blue { fill: var(--color-neon-blue); color: var(--color-neon-blue); stroke: var(--color-neon-blue); }
.flow-gray { fill: var(--color-text-muted); color: var(--color-text-muted); stroke: var(--color-text-muted); }
.flow-amber { fill: var(--color-status-pending); color: var(--color-status-pending); stroke: var(--color-status-pending); }
.flow-green { fill: var(--color-status-confirmed); color: var(--color-status-confirmed); stroke: var(--color-status-confirmed); }
.flow-red { fill: var(--color-status-overdue); color: var(--color-status-overdue); stroke: var(--color-status-overdue); }
.flow-purple { fill: var(--color-status-admin); color: var(--color-status-admin); stroke: var(--color-status-admin); }
.flow-legend { list-style: none; margin: var(--space-4) 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.flow-legend li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text); }
.flow-legend li b { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.flow-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; filter: drop-shadow(0 0 4px currentColor); background: currentColor; }
.flow-total { display: flex; justify-content: space-between; padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- glow progress bars (ranking: shop/reason/SKU Pareto) ---------- */
.glow-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.glow-bar-row { display: flex; align-items: center; gap: var(--space-3); }
.glow-bar-rank-circle { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--color-surface-2); color: var(--color-text-tertiary); font-size: 11px; font-weight: 700; flex-shrink: 0; }
.glow-bar-body { flex: 1 1 auto; min-width: 0; }
.glow-bar-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); margin-bottom: 6px; }
.glow-bar-rank { color: var(--color-text); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glow-bar-end { display: flex; align-items: baseline; gap: var(--space-2); flex-shrink: 0; }
.glow-bar-value { color: var(--color-text-muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.glow-bar-pct { color: var(--color-text); font-weight: 600; flex-shrink: 0; font-variant-numeric: tabular-nums; }
.glow-bar-track { position: relative; height: 8px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.05); overflow: hidden; }
:root[data-theme="light"] .glow-bar-track { background: rgba(15, 23, 42, 0.06); }
.glow-bar-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: var(--radius-full); min-width: 3px; animation: px-bar-grow 700ms ease-out; }
.glow-bar-green { background: linear-gradient(90deg, color-mix(in srgb, var(--color-status-confirmed) 55%, transparent), var(--color-status-confirmed)); box-shadow: 0 0 10px color-mix(in srgb, var(--color-status-confirmed) 70%, transparent); }
.glow-bar-amber { background: linear-gradient(90deg, color-mix(in srgb, var(--color-status-pending) 55%, transparent), var(--color-status-pending)); box-shadow: 0 0 10px color-mix(in srgb, var(--color-status-pending) 70%, transparent); }
.glow-bar-blue { background: linear-gradient(90deg, color-mix(in srgb, var(--color-neon-blue) 55%, transparent), var(--color-neon-blue)); box-shadow: 0 0 10px color-mix(in srgb, var(--color-neon-blue) 70%, transparent); }
.glow-bar-red { background: linear-gradient(90deg, color-mix(in srgb, var(--color-status-overdue) 55%, transparent), var(--color-status-overdue)); box-shadow: 0 0 10px color-mix(in srgb, var(--color-status-overdue) 70%, transparent); }
.glow-bar-sub { margin-top: 4px; font-size: var(--text-xs); color: var(--color-text-muted); text-align: right; font-variant-numeric: tabular-nums; }
@keyframes px-bar-grow { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .glow-bar-fill, .size-mix-fill { animation: none; } }

/* ---------- waterfall (Chart.js floating bars) + value/% legend ---------- */
.waterfall-chart-box { height: 260px; margin-bottom: var(--space-4); }
.waterfall-chart-box canvas { width: 100% !important; height: 100% !important; }
.waterfall-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.waterfall-legend li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text); }
.waterfall-legend li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.waterfall-legend-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; filter: drop-shadow(0 0 4px currentColor); }
.waterfall-legend-dot-start { background: var(--color-neon-blue); color: var(--color-neon-blue); }
.waterfall-legend-dot-down { background: var(--color-status-overdue); color: var(--color-status-overdue); }
.waterfall-legend-dot-up { background: var(--color-status-confirmed); color: var(--color-status-confirmed); }
.waterfall-legend-dot-end { background: var(--color-status-confirmed); color: var(--color-status-confirmed); }

/* ---------- size mix: horizontal glow bars (deliberately not the reference's radar chart) ---------- */
.size-mix { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.size-mix li { display: grid; grid-template-columns: 32px 1fr 56px; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.size-mix-label { font-weight: 600; color: var(--color-text); }
.size-mix-track { position: relative; height: 8px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.05); overflow: hidden; }
:root[data-theme="light"] .size-mix-track { background: rgba(15, 23, 42, 0.06); }
.size-mix-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: var(--radius-full); background: linear-gradient(90deg, color-mix(in srgb, var(--color-neon-purple) 55%, transparent), var(--color-neon-purple)); box-shadow: 0 0 10px color-mix(in srgb, var(--color-neon-purple) 65%, transparent); min-width: 3px; animation: px-bar-grow 700ms ease-out; }
.size-mix-pct { text-align: right; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

/* ---------- dashboard cluster (Phase 1.1): 4 equal-height panels, 2x2 at <=1280px, 1 col at 390px.
   Each panel = .card (header+hover already free) + flex column so its KPI header/visual/breakdown/
   footer stretch to fill the row's tallest panel instead of leaving empty space. ---------- */
.cluster-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid); align-items: stretch; margin-bottom: var(--gap-section); }
.cluster-grid > .card { display: flex; flex-direction: column; margin-bottom: 0; }
.cluster-panel-visual { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 0; }
@media (max-width: 1280px) { .cluster-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .cluster-grid { grid-template-columns: 1fr; } }

/* ---------- motion (Phase 1.1 item I): staggered card fade-up on load, respects reduced motion ---------- */
.px-fade-up { animation: px-fade-up 500ms ease-out both; }
@keyframes px-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .px-fade-up { animation: none; } }

/* ---------- card footer: muted note + small icon actions (info tooltip, Excel export) ---------- */
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.card-footer-note { font-size: var(--text-xs); color: var(--color-text-muted); }
.card-footer-actions { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
.card-footer-actions button, .card-footer-actions a { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-sm); border: none; background: none; color: var(--color-text-muted); cursor: pointer; text-decoration: none; }
.card-footer-actions button:hover, .card-footer-actions a:hover { background: var(--color-surface-2); color: var(--color-text); }
.card-footer-actions svg { width: 15px; height: 15px; }

/* ====================================================================================================
   Công việc module + Trang chủ (docs/modules/cong-viec.md). Tokens only — no new token, no literal color.
   ==================================================================================================== */

/* ---------- form controls the older pages never needed ---------- */
input[type="time"], input[type="number"], textarea {
  font: inherit; font-size: var(--text-base); width: 100%; min-height: 44px; padding: 10px 12px;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
}
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
textarea:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.check-row { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text); font-size: var(--text-base); margin-bottom: var(--space-2); cursor: pointer; }
.check-row input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--color-accent); }
.check-list { max-height: 176px; overflow-y: auto; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-3) var(--space-1); }
.form-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.form-alert { background: var(--color-status-overdue-soft); color: var(--color-status-overdue-text); border: 1px solid var(--color-status-overdue); border-radius: var(--radius-sm); padding: var(--space-3); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.form-actions { display: flex; gap: var(--space-2); justify-content: flex-end; flex-wrap: wrap; }
.btn-success { background: var(--color-status-confirmed); color: var(--color-accent-contrast); }
.btn-success:hover { background: var(--color-status-confirmed-text); }
.badge-info { background: var(--color-accent-soft); color: var(--color-accent); }
.badge-sm { font-size: var(--text-xs); padding: 2px 8px; }

/* ---------- shared: card heading row, row lists, avatar, progress, inline popover ---------- */
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.card-head h2 { margin: 0; font-size: var(--text-lg); }
.card-head a, .card-head span { font-size: var(--text-sm); }
.row-list { list-style: none; margin: 0; padding: 0; }
.row-list > li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.row-main { flex: 1 1 auto; min-width: 0; }
.row-title { display: block; font-weight: 600; color: var(--color-text); text-decoration: none; overflow-wrap: anywhere; }
a.row-title:hover { color: var(--color-accent); }
.row-sub { font-size: var(--text-xs); color: var(--color-text-muted); }
.row-time { flex-shrink: 0; width: 52px; font-weight: 700; font-variant-numeric: tabular-nums; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-shrink: 0; flex-wrap: wrap; }
.row-done .row-title { text-decoration: line-through; color: var(--color-text-muted); }
.tick-btn { flex-shrink: 0; width: 22px; height: 22px; padding: 0; border-radius: var(--space-1); border: 2px solid var(--color-border-strong); background: transparent; color: var(--color-accent-contrast); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.tick-btn:hover { border-color: var(--color-accent); background: var(--color-accent-soft); }
.tick-btn.on { background: var(--color-status-confirmed); border-color: var(--color-status-confirmed); }
.tick-btn svg { width: 14px; height: 14px; }
.avatar { flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 700; background: var(--color-status-confirmed-soft); color: var(--color-status-confirmed-text); }
.progress { height: 4px; border-radius: var(--radius-full); background: var(--color-surface-2); overflow: hidden; margin-top: var(--space-1); }
.progress > span { display: block; height: 100%; border-radius: var(--radius-full); background: var(--color-accent); }
.inline-pop { position: relative; }
.inline-pop > summary { list-style: none; }
.inline-pop > summary::-webkit-details-marker { display: none; }
.inline-pop-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(300px, calc(100vw - 32px)); display: flex; flex-direction: column; gap: var(--space-2); background: var(--color-surface-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-3); box-shadow: var(--shadow-md); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--gap-grid); align-items: start; }
.split > * { min-width: 0; }
.meta-line { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; color: var(--color-text-muted); font-size: var(--text-sm); }
@media (max-width: 1023px) { .split { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .form-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Trang chủ ---------- */
.home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); margin-bottom: var(--gap-section); align-items: start; }
.home-grid > .card { margin-bottom: 0; min-height: 100%; }
.kpi-card .badge { align-self: flex-start; margin-top: var(--space-2); }
.shortcut-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap-grid); margin-bottom: var(--gap-section); }
.shortcut { display: block; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); text-decoration: none; color: var(--color-text); }
.shortcut:hover { border-color: var(--color-border-strong); }
.shortcut b { display: block; }
.shortcut span { font-size: var(--text-sm); color: var(--color-text-muted); }
/* weather card (UI polish 2026-10-13): now + stats + 3-day mini-cards on one row, advice chip, 8-hour strip */
.weather-main { display: flex; align-items: center; gap: var(--space-5) var(--space-8); flex-wrap: wrap; }
.weather-now { display: flex; align-items: center; gap: var(--space-3); }
.weather-now-icon svg { width: 44px; height: 44px; display: block; }
.weather-temp { font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; }
.weather-now-text { display: flex; flex-direction: column; font-size: var(--text-sm); color: var(--color-text-muted); }
.weather-now-text b { font-size: var(--text-base); color: var(--color-text); }
.weather-tone-sun { color: var(--color-status-pending-text); }
.weather-tone-cloud { color: var(--color-text-muted); }
.weather-tone-rain { color: var(--color-accent); }
.weather-tone-storm { color: var(--color-status-admin-text); }
.weather-stats { display: grid; grid-template-columns: repeat(2, auto); gap: var(--space-2) var(--space-6); margin: 0; }
.weather-stats dt { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.weather-stats dd { margin: 0; font-weight: 600; }
.weather-days { list-style: none; display: flex; gap: var(--gap-grid); margin: 0 0 0 auto; padding: 0; }
.weather-days li { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 92px; padding: var(--space-3); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.weather-days svg { width: 24px; height: 24px; display: block; }
.weather-days small { font-weight: 400; color: var(--color-text-muted); font-size: var(--text-sm); }
.weather-day-label, .weather-hour-label { font-size: var(--text-xs); color: var(--color-text-muted); }
.weather-rain { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.weather-advice { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-4) 0 0; font-size: var(--text-sm); }
.weather-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }
.weather-chip svg { width: 16px; height: 16px; }
.weather-hours { list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-2); margin: var(--space-4) 0 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--color-border); }
.weather-hours li { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.weather-hours svg { width: 20px; height: 20px; display: block; }
@media (max-width: 1023px) { .weather-days { margin-left: 0; flex: 1 1 100%; } .weather-days li { flex: 1 1 0; min-width: 0; } }
@media (max-width: 639px) {
  .weather-main { gap: var(--space-4); }
  .weather-stats { flex: 1 1 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
  .weather-days { gap: var(--space-2); }
  .weather-days li { padding: var(--space-2); }
  .weather-hours { grid-template-columns: repeat(8, 56px); overflow-x: auto; padding-bottom: var(--space-1); }
}
@media (max-width: 1023px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Giao việc: kanban ---------- */
.kanban-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.kanban-toolbar .filters { margin-bottom: 0; }
.kanban-filters { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.kanban-filters select, .kanban-filters input { width: auto; min-width: 150px; flex: 1 1 150px; }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid); align-items: start; margin-bottom: var(--gap-section); }
.kanban-col-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-weight: 700; padding: 0 var(--space-1); margin-bottom: var(--space-3); }
.kanban-empty { border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-3); text-align: center; color: var(--color-text-tertiary); font-size: var(--text-sm); }
.task-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-3); box-shadow: var(--shadow-sm); }
.task-card-overdue { border-color: var(--color-status-overdue); }
.task-card-waiting { border-color: var(--color-status-pending); }
.task-card-done { opacity: 0.6; }
.task-card-done .task-card-title { text-decoration: line-through; }
.task-card-title { display: block; font-weight: 600; color: var(--color-text); text-decoration: none; margin-bottom: var(--space-2); overflow-wrap: anywhere; }
a.task-card-title:hover { color: var(--color-accent); }
.task-card-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-2); }
.task-card-note { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); overflow-wrap: anywhere; }
.task-card-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.task-card-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.task-card-actions > * { flex: 1 1 0; min-width: 0; }
.task-card-actions .btn { width: 100%; }
@media (max-width: 1023px) { .kanban { grid-template-columns: repeat(4, minmax(260px, 1fr)); overflow-x: auto; padding-bottom: var(--space-2); } }

/* ---------- Đặt phòng họp: day / week timeline ---------- */
.timeline { overflow-x: auto; margin-top: var(--space-3); }
.timeline-inner { min-width: 760px; }
.timeline-row { display: grid; grid-template-columns: 168px minmax(0, 1fr); border-top: 1px solid var(--color-border); }
.timeline-row-head { border-top: none; }
.timeline-label { padding: var(--space-3) var(--space-2) var(--space-3) 0; font-weight: 600; font-size: var(--text-sm); }
.timeline-track { position: relative; display: grid; grid-template-columns: repeat(var(--timeline-hours), minmax(0, 1fr)); min-height: 76px; }
.timeline-hour { font-size: var(--text-xs); color: var(--color-text-muted); padding: 0 var(--space-2) var(--space-1); font-variant-numeric: tabular-nums; }
.timeline-cell { border-left: 1px solid var(--color-border); }
a.timeline-cell:hover { background: var(--color-accent-soft); }
.timeline-block { position: absolute; top: var(--space-2); bottom: var(--space-2); overflow: hidden; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--color-accent); background: var(--color-surface-2); color: var(--color-accent); font-size: var(--text-xs); font-weight: 600; line-height: 1.3; text-decoration: none; }
.timeline-block-da_hop { border-color: var(--color-border-strong); color: var(--color-text-muted); }
.timeline-block-dang_hop { border-color: var(--color-status-confirmed); color: var(--color-status-confirmed-text); }
.day-nav { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.day-nav .filters { margin-bottom: 0; }

/* ---------- Biên bản họp ---------- */
.minutes-table td { vertical-align: top; }
.minutes-table input, .minutes-table select { min-height: 38px; padding: 6px 10px; min-width: 120px; }
.minutes-table td:first-child { color: var(--color-text-muted); width: 32px; }
.prose-block { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }

/* ---------- Sàn TMĐT · Quảng cáo (ads layer, 2026-10-13) — Seller Center "Hiệu quả" pattern ---------- */
.banner-warning { background: var(--color-status-pending-soft); color: var(--color-status-pending-text); font-weight: 500; font-size: var(--text-sm); }
.ads-section { scroll-margin-top: var(--space-6); }
.ads-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.ads-head .section-title { margin: 0; }
.ads-presets { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.ads-presets a.chart-tab { text-decoration: none; }
.ads-custom { margin-left: 0; }
.ads-custom > summary.chart-tab { min-height: 0; padding: 6px var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; gap: 0; }
.ads-custom > summary.chart-tab.active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); }
.ads-tz { font-size: var(--text-sm); margin-left: var(--space-2); white-space: nowrap; }
.ads-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.ads-tabs { display: flex; gap: var(--space-5); margin-right: auto; }
.ads-tab { padding: var(--space-2) 0; color: var(--color-text-muted); text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; }
.ads-tab:hover { color: var(--color-text); }
.ads-tab.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.ads-shop-form { display: flex; gap: var(--space-2); align-items: center; min-width: 0; }
.ads-shop-form select { width: auto; max-width: 240px; min-width: 0; }
.ads-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid); }
.ads-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-width: 0; text-align: left; font: inherit; color: var(--color-text); cursor: pointer; background: var(--color-surface); border: 1px solid var(--color-border); border-top: 3px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); transition: border-color 120ms ease, background 120ms ease; }
.ads-card:hover { border-color: var(--color-border-strong); }
.ads-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.ads-card.is-selected { border-top-color: var(--ads-accent); background: color-mix(in srgb, var(--ads-accent) 7%, var(--color-surface)); }
.ads-card.ads-card-full { border-color: var(--color-status-pending); }
.ads-accent-0 { --ads-accent: var(--color-neon-blue); }
.ads-accent-1 { --ads-accent: var(--color-status-pending); }
.ads-accent-2 { --ads-accent: var(--color-status-confirmed); }
.ads-accent-3 { --ads-accent: var(--color-neon-purple); }
.ads-card-label { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 600; }
.ads-card-value { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; }
.ads-card-deltas { display: flex; flex-wrap: wrap; gap: 2px var(--space-3); font-size: var(--text-xs); color: var(--color-text-tertiary); }
.ads-card-deltas b[title] { cursor: help; }
.ads-card-period { white-space: nowrap; }
.ads-chart-box { margin: var(--space-4) 0; }
.ads-breakdown-tabs { margin-top: var(--space-5); }
@media (min-width: 640px) { .ads-section .data-table td { white-space: nowrap; } }
.ads-campaign-name { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1023px) { .ads-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .ads-tabs { width: 100%; margin-right: 0; }
  .ads-shop-form { flex: 1 1 auto; }
  .ads-shop-form select { flex: 1 1 auto; max-width: none; }
  .ads-card { padding: var(--space-3); }
  .ads-card-value { font-size: var(--text-lg); }
  .ads-campaign-name { max-width: none; white-space: normal; }
}
.waterfall-footnote { margin: 0 0 var(--space-3); text-align: right; font-size: var(--text-xs); color: var(--color-status-pending-text); }

/* ====================================================================================================
   UI polish (2026-10-13). Tokens only. docs/modules/design-system.md § "UI polish".
   ==================================================================================================== */

/* ---------- delta chip: a ▲/▼ change as a soft pill (good = green, bad = red, flat = neutral) ---------- */
.delta-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.delta-chip[title] { cursor: help; }
.delta-chip-good { background: var(--color-status-confirmed-soft); color: var(--color-status-confirmed-text); }
.delta-chip-bad { background: var(--color-status-overdue-soft); color: var(--color-status-overdue-text); }
.delta-chip-flat { background: var(--color-status-unseen-soft); color: var(--color-status-unseen-text); font-weight: 500; }

/* ---------- Sàn TMĐT · Trạng thái đơn: header, insight line, SVG flow (Sankey), tiles ---------- */
.card-grid-2-wide { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 1023px) { .card-grid-2-wide { grid-template-columns: minmax(0, 1fr); } }
.sflow-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.sflow-head .section-title { margin: 0; }
.sflow-head-meta { font-size: var(--text-sm); color: var(--color-text-muted); }
.sflow-head-meta b { color: var(--color-text); font-size: var(--text-base); }
.sflow-insight { margin: var(--space-2) 0 var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); }
.sflow-insight b { color: var(--color-text); }
.sflow-diagram { margin-bottom: var(--space-5); }
.sflow-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sflow-compact { display: none; }
@media (max-width: 639px) { .sflow-wide { display: none; } .sflow-compact { display: block; } }
/* one status hue per element via currentColor: the bar, the count text, the tile's top border, the
   stacked-bar segment and the legend dot all read the same class */
.sflow-c-blue { color: var(--color-neon-blue); }
.sflow-c-green { color: var(--color-status-confirmed); }
.sflow-c-amber { color: var(--color-status-pending); }
.sflow-c-red { color: var(--color-status-overdue); }
.sflow-c-purple { color: var(--color-status-admin); }
.sflow-stop-from { stop-color: var(--color-neon-blue); stop-opacity: 0.28; }
.sflow-stop-blue { stop-color: var(--color-neon-blue); stop-opacity: 0.55; }
.sflow-stop-green { stop-color: var(--color-status-confirmed); stop-opacity: 0.6; }
.sflow-stop-amber { stop-color: var(--color-status-pending); stop-opacity: 0.6; }
.sflow-stop-red { stop-color: var(--color-status-overdue); stop-opacity: 0.6; }
.sflow-stop-purple { stop-color: var(--color-status-admin); stop-opacity: 0.6; }
.sflow-band { transition: opacity 120ms ease; }
.sflow-svg:hover .sflow-band { opacity: 0.55; }
.sflow-svg .sflow-band:hover { opacity: 1; }
.sflow-bar { fill: currentColor; }
.sflow-bar-empty { opacity: 0.35; }
.sflow-tint { fill: currentColor; opacity: 0.1; }
.sflow-name { fill: var(--color-text-muted); font-family: var(--font-sans); font-size: 13px; font-weight: 600; }
.sflow-count { fill: currentColor; font-family: var(--font-sans); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.sflow-pct { fill: var(--color-text-muted); font-family: var(--font-sans); font-size: 12px; font-variant-numeric: tabular-nums; }
.sflow-compact .sflow-name { font-size: 10.5px; }
.sflow-compact .sflow-count { font-size: 14px; }
.sflow-compact .sflow-pct { font-size: 10px; }

.status-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid); }
.status-tile { display: flex; flex-direction: column; gap: 2px; min-width: 0; background: var(--color-surface-2); border: 1px solid var(--color-border); border-top: 3px solid currentColor; border-radius: var(--radius-md); padding: var(--space-4); }
.status-tile > * { color: var(--color-text); }
.status-tile .status-tile-label { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.status-tile .status-tile-value { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.status-tile .status-tile-share { font-size: var(--text-sm); font-weight: 600; }
.status-tile .status-tile-extra { font-size: var(--text-sm); color: var(--color-text-muted); }
.status-tile .status-tile-delta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-tertiary); }
@media (max-width: 1023px) { .status-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .status-tile { padding: var(--space-3); } .status-tile .status-tile-value { font-size: var(--text-xl); } }

/* per-shop table: mini stacked bar + worst-row highlight */
.status-shop-table td:nth-child(2) { width: 30%; min-width: 96px; }
@media (min-width: 640px) { .status-shop-table td:first-child { white-space: nowrap; } }
.status-stack { display: flex; width: 100%; height: 8px; border-radius: var(--radius-full); overflow: hidden; background: var(--color-surface-2); }
.status-stack > span { display: block; height: 100%; background: currentColor; min-width: 2px; }
.data-table tr.row-worst td { background: var(--color-status-overdue-soft); }
.data-table tr.row-worst td:first-child { box-shadow: inset 3px 0 0 var(--color-status-overdue); font-weight: 600; }
.status-legend { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 0; padding: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.status-legend li { display: inline-flex; align-items: center; gap: 6px; }
.status-legend li > span { width: 9px; height: 9px; border-radius: 3px; background: currentColor; }
@media (max-width: 639px) { .status-shop-table td:nth-child(2) { width: 100%; align-items: center; } .status-shop-table .status-stack { max-width: 55%; } }

/* pending orders by age */
.age-bars { list-style: none; margin: var(--space-3) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.age-bars li { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto 52px; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.age-bars .age-label { color: var(--color-text-muted); }
.age-bars .age-share { color: var(--color-text-muted); text-align: right; }
.age-track { display: block; height: 8px; border-radius: var(--radius-full); background: var(--color-surface-2); overflow: hidden; }
.age-fill { display: block; height: 100%; border-radius: var(--radius-full); background: var(--color-status-pending); min-width: 2px; }
.age-old .age-fill { background: var(--color-status-overdue); }

/* ---------- breakdown table (Doanh thu thực · Theo chiều phân tích): sticky sortable header, row
   hover, chevron drill-down, share bar, muted "Chưa gán" ---------- */
#phan-tich { scroll-margin-top: var(--space-4); }
/* no overflow container at desktop width: a scroll wrapper would capture position: sticky and the
   header would stop following the page scroll. 8 columns fit the content width from 1024px up. */
.bd-table-wrap { overflow: visible; }
@media (min-width: 640px) and (max-width: 1023px) { .bd-table-wrap { overflow-x: auto; } }
.bd-table thead th { position: sticky; top: 0; z-index: 3; background: var(--color-surface-2); box-shadow: inset 0 -1px 0 var(--color-border-strong); }
.bd-table th[aria-sort] .sort-link { color: var(--color-text); }
.bd-table td { white-space: nowrap; }
.bd-table td.bd-label { white-space: normal; font-weight: 500; }
.bd-table tbody tr:not(.bd-expand-body):hover td { background: var(--color-surface-2); }
.bd-table tr.bd-row-missing td { color: var(--color-text-tertiary); font-weight: 400; }
.bd-table tr.bd-row-missing .share-bar > span { background: var(--color-text-tertiary); }
.bd-table tr.bd-expand-body > td { padding: var(--space-3) var(--space-3) var(--space-4) var(--space-8); background: var(--color-bg); white-space: normal; }
.row-toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: var(--space-1); padding: 0; border: none; border-radius: var(--radius-sm); background: none; color: var(--color-text-muted); cursor: pointer; vertical-align: middle; }
.row-toggle:hover { background: var(--color-accent-soft); color: var(--color-accent); }
.row-chevron { display: inline-block; width: 7px; height: 7px; flex-shrink: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s ease; }
.row-toggle[aria-expanded="true"] .row-chevron { transform: rotate(45deg); }
.share-cell { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }
.share-bar { display: block; width: 72px; height: 6px; border-radius: var(--radius-full); background: var(--color-surface-2); overflow: hidden; }
.share-bar > span { display: block; height: 100%; border-radius: var(--radius-full); background: var(--color-accent); }
.share-pct { min-width: 48px; text-align: right; }
.bd-table tbody tr:hover .share-bar { background: var(--color-border-strong); }
@media (max-width: 639px) {
  .bd-table td.bd-label { justify-content: flex-start; text-align: left; font-weight: 600; }
  .bd-table td.bd-label::before { content: none; }
  .bd-table tr.bd-expand-body > td { display: block; padding: var(--space-2) 0; }
  .bd-table tr.bd-expand-body > td::before { content: none; }
}

/* ---------- Website & GA4: coverage banner, dimension pickers, 2-level table with subtotals ---------- */
#da-chieu, #xu-huong, #tracking { scroll-margin-top: var(--space-4); }
.ga4-coverage { display: block; }
.ga4-coverage ul { margin: 0; padding-left: var(--space-5); }
.ga4-dq-note { color: var(--color-status-pending-text); }
.ga4-dims { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-3); }
.ga4-dims > .filter-bar-form { flex: 0 0 auto; align-items: flex-end; }
.ga4-dim-field { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 160px; min-width: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.ga4-dim-field select { width: 100%; }
.ga4-measures { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); }
.ga4-measure { display: inline-flex; align-items: center; gap: var(--space-1); cursor: pointer; white-space: nowrap; }
.ga4-detail-chip { padding-right: 12px; }
.ga4-table tr.ga4-row-l1 td { font-weight: 600; }
.ga4-table tr.ga4-row-l2 td { font-weight: 400; }
.ga4-table tr.ga4-row-l2 td.bd-label { padding-left: var(--space-8); font-weight: 400; color: var(--color-text-muted); }
.ga4-table td.bd-label { max-width: 420px; overflow-wrap: anywhere; }
.ga4-table tfoot td { font-weight: 700; background: var(--color-surface-2); border-top: 1px solid var(--color-border-strong); white-space: nowrap; }
.ga4-more { margin: var(--space-3) 0 0; }
.ga4-trend-controls { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.ga4-trend-controls a.chart-tab { text-decoration: none; }
.ga4-tracking-headline { font-size: var(--text-lg); margin: 0 0 var(--space-3); }
@media (max-width: 639px) {
  .ga4-table tr.ga4-row-l2 td.bd-label { padding-left: 0; }
  .ga4-table tr.ga4-row-l2 td.bd-label::after { content: none; }
}

/* Báo cáo 4T → Affiliate (2026-10-15): shop table under platform subtotals, plan-base header row. */
.aff-table tr.aff-row-platform td { font-weight: 600; background: var(--color-surface-2); }
.aff-table tr.aff-row-shop td.bd-label { padding-left: var(--space-8); color: var(--color-text-muted); }
.aff-table tfoot td { font-weight: 700; border-top: 1px solid var(--color-border-strong); white-space: nowrap; }
.aff-plan-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.aff-plan-head .section-title { margin-bottom: 0; }
.aff-link-card { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); text-decoration: none; color: inherit; }
.aff-link-card strong { font-size: var(--text-lg); }

/* Website & GA4 page tabs + tab "Sản phẩm" */
.ga4-page-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-4); }
.ga4-page-tabs a.chart-tab { text-decoration: none; }
.ga4-items-table td.ga4-item-name { min-width: 240px; max-width: 380px; overflow-wrap: anywhere; }
.ga4-items-table td.ga4-item-code { white-space: nowrap; font-size: var(--text-sm); }
.ga4-items-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.ga4-items-subtitle { margin-top: var(--space-6); }
@media (max-width: 639px) {
  .ga4-items-table td.ga4-item-name { min-width: 0; max-width: none; }
  .ga4-items-table td::before { flex-shrink: 0; white-space: nowrap; padding-right: var(--space-3); }
}

/* ---------- Affiliate phase 1.5: KPI row, tables, insight lines, small charts ---------- */
.aff-kpi-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.aff-kpi-grid .kpi2-card { min-width: 0; }
.aff-kpi-grid .kpi2-subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; }
.aff-kpi-grid .kpi2-periods { margin-top: auto; flex-direction: column; gap: var(--space-1); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.aff-kpi-grid .kpi2-period { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.aff-kpi-grid .kpi2-period-label { margin-bottom: 0; text-transform: none; letter-spacing: 0; font-size: 11px; }
.aff-kpi-grid .kpi2-period-delta { white-space: nowrap; }
@media (max-width: 1279px) { .aff-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) { .aff-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aff-table tr.aff-row-platform td { background: var(--color-surface-2); font-weight: 700; border-top: 1px solid var(--color-border-strong); }
.aff-table tr.aff-row-platform td.bd-label { text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--text-xs); color: var(--color-text); }
.aff-table tr.aff-row-zero td { color: var(--color-text-muted); }
.aff-table tr.aff-row-zero td.num { opacity: 0.6; }
.aff-share { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-2); width: 100%; }
.aff-share-track { flex: 0 0 64px; height: 6px; border-radius: var(--radius-full); background: var(--color-surface-2); overflow: hidden; }
.aff-share-fill { display: block; height: 100%; border-radius: var(--radius-full); background: var(--color-accent); }
.aff-share-val { min-width: 48px; text-align: right; }
.aff-insight { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-text); font-size: var(--text-sm); }
.aff-insight svg { flex-shrink: 0; margin-top: 2px; color: var(--color-accent); }
.aff-chart-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); }
@media (max-width: 1023px) { .aff-chart-pair { grid-template-columns: minmax(0, 1fr); } }
.aff-chart-title { font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); margin: 0 0 var(--space-2); }
.aff-subsection { margin-top: var(--space-6); }
.aff-chart-sm { height: 240px; }
.aff-month-table th.aff-month-head { text-align: center; border-left: 1px solid var(--color-border); }
.aff-month-table td.aff-flag { background: var(--color-status-pending-soft); color: var(--color-status-pending-text); font-weight: 600; }
.aff-flag-mark { font-size: var(--text-xs); }
.aff-prod-table td.aff-prod-name { min-width: 220px; max-width: 360px; overflow-wrap: anywhere; }
.aff-prod-table .aff-prod-code { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.aff-nowrap { white-space: nowrap; }
.aff-month-table td.num { white-space: nowrap; }
@media (min-width: 640px) {
  .aff-month-table .aff-sticky { position: sticky; left: 0; z-index: 1; white-space: nowrap; background: var(--color-surface); }
  .aff-month-table thead .aff-sticky { background: var(--color-bg); z-index: 3; }
}
.aff-creator-note { margin-top: calc(-1 * var(--space-2)); }
@media (max-width: 639px) {
  .aff-share { justify-content: flex-start; }
  .aff-prod-table td.aff-prod-name { min-width: 0; max-width: none; }
  .aff-table td::before { flex-shrink: 0; white-space: nowrap; padding-right: var(--space-3); }
}
@media (min-width: 640px) { .aff-table-wide td.bd-label { white-space: nowrap; } }

/* ---------- Hàng hóa: one-height product rows, compact brand chip (2026-10-15) ---------- */
.hh-sku { max-width: 240px; }
.hh-sku-name { display: block; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-sm); }
.hh-brand-chip { display: inline-block; padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-surface-2); border: 1px solid var(--color-border); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; cursor: help; }
@media (max-width: 639px) {
  .hh-sku { max-width: none; flex-wrap: wrap; }
  .hh-sku::before { white-space: nowrap; }
  .hh-sku-name { max-width: none; flex-basis: 100%; text-align: right; }
}

/* ---------- Hàng hóa: compact product table + detail panel + images (2026-10-16) ---------- */
.hh-table-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.hh-sort-form { display: flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.hh-table { width: 100%; }
.hh-table tr.hh-row { cursor: pointer; }
@media (min-width: 640px) { .hh-table tr.hh-row:hover td, .hh-table tr.hh-row.is-open td { background: var(--color-surface-2); } }
.hh-table th.hh-thumb-cell, .hh-table td.hh-thumb-cell { width: 56px; padding-right: 0; }
.hh-table th.hh-chev-cell, .hh-table td.hh-chev-cell { width: 44px; text-align: right; }
.hh-table td.hh-sku { max-width: 300px; }
.hh-table .hh-sku-name { max-width: 300px; }
.hh-chevron svg { width: 16px; height: 16px; transition: transform 120ms ease; }
.hh-row.is-open .hh-chevron svg { transform: rotate(90deg); }
.hh-img-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  border-radius: var(--radius-sm); background: var(--color-surface-2); border: 1px solid var(--color-border); color: var(--color-text-tertiary); }
.hh-img-wrap > svg { width: 45%; height: 45%; }
.hh-img-wrap > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--color-surface); }
.hh-thumb { width: 40px; height: 40px; vertical-align: middle; }
.hh-big { width: 180px; height: 180px; padding: 0; cursor: zoom-in; }
.hh-big.is-missing { cursor: default; }
.hh-detail { display: grid; grid-template-columns: minmax(320px, 380px) minmax(0, 1fr); gap: var(--space-5); align-items: start; padding: var(--space-3) 0; }
.hh-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); margin: 0; font-size: var(--text-sm); }
.hh-metrics dt { color: var(--color-text-muted); font-size: var(--text-xs); }
.hh-metrics dd { margin: 2px 0 0; font-variant-numeric: tabular-nums; }
.hh-metrics-wide { grid-column: 1 / -1; }
.hh-size-note { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.hh-size-scroll { overflow-x: auto; }
.hh-size-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.hh-size-table th, .hh-size-table td { padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--color-border); text-align: left; white-space: nowrap; }
.hh-size-table th { color: var(--color-text-muted); font-weight: 600; font-size: var(--text-xs); }
.hh-size-table .num { text-align: right; }
.hh-size-table tfoot th { color: var(--color-text); border-bottom: none; }
.hh-size-table tr.hh-size-dut td { background: var(--color-status-overdue-soft); }
.hh-size-table tr.hh-size-unknown td { color: var(--color-text-muted); font-style: italic; }
.hh-lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: var(--space-4);
  border: none; background: transparent; color: var(--color-overlay-text); overflow: hidden; }
.hh-lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); }
.hh-lightbox::backdrop { background: var(--color-overlay); }
.hh-lb-close { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 2; width: 40px; height: 40px; border: none;
  border-radius: var(--radius-full); background: var(--color-overlay-control); color: var(--color-overlay-text); font-size: var(--text-lg); cursor: pointer; }
.hh-lb-close:hover, .hh-lb-nav:hover { background: var(--color-overlay-control-hover); }
.hh-lb-stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; }
.hh-lb-viewport { width: 90vw; height: 85vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.has-gallery .hh-lb-viewport { height: calc(85vh - 72px); }
.hh-lb-img { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: 0 0;
  cursor: zoom-in; touch-action: none; user-select: none; -webkit-user-drag: none; }
.is-zoomed .hh-lb-img { cursor: grab; }
.is-zoomed .hh-lb-img:active { cursor: grabbing; }
.hh-lb-nav { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 64px; border: none;
  border-radius: var(--radius-md); background: var(--color-overlay-nav); color: var(--color-overlay-text); font-size: var(--text-2xl); line-height: 1; cursor: pointer; }
.hh-lb-prev { left: 0; }
.hh-lb-next { right: 0; }
.has-gallery .hh-lb-nav { display: block; }
.hh-lb-caption { margin: 0; max-width: 90vw; text-align: center; font-size: var(--text-sm); color: var(--color-overlay-text); opacity: 0.85; }
.hh-lb-strip { display: flex; gap: var(--space-2); max-width: 90vw; overflow-x: auto; padding-bottom: var(--space-1); }
.hh-lb-strip:empty { display: none; }
.hh-lb-thumb { flex: 0 0 auto; width: 56px; height: 56px; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm);
  background: var(--color-overlay-control); overflow: hidden; cursor: pointer; opacity: 0.6; }
.hh-lb-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hh-lb-thumb[aria-current="true"] { border-color: var(--color-accent); opacity: 1; }
@media (max-width: 639px) {
  .hh-lightbox { padding: var(--space-2); }
  .hh-lb-viewport { width: 100%; height: 75vh; }
  .has-gallery .hh-lb-viewport { height: calc(75vh - 64px); }
  .hh-lb-nav { width: 36px; height: 52px; }
  .hh-lb-thumb { width: 48px; height: 48px; }
}
@media (max-width: 1279px) {
  .hh-detail { grid-template-columns: minmax(0, 1fr); }
  .hh-dp-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  /* Card list: thumbnail + code/name/brand on top, metrics as label/value lines below. */
  .hh-table tr.hh-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: center; }
  .hh-table tr.hh-row td { padding: 2px 0; }
  .hh-table tr.hh-row td::before { content: none; }
  .hh-table td.hh-thumb-cell { grid-column: 1; grid-row: 1 / span 2; width: auto; }
  .hh-table td.hh-sku { grid-column: 2; grid-row: 1; display: block; text-align: left; max-width: none; }
  .hh-table td.hh-brand-cell { grid-column: 2; grid-row: 2; justify-content: flex-start; }
  .hh-table td.hh-chev-cell { grid-column: 3; grid-row: 1 / span 2; width: auto; }
  .hh-table td.hh-metric { grid-column: 1 / -1; }
  .hh-table tr.hh-row td.hh-metric::before { content: attr(data-label); }
  .hh-table tr.hh-row.is-open { background: var(--color-surface-2); }
  .hh-table .hh-sku-name { text-align: left; }
  .hh-detail { grid-template-columns: minmax(0, 1fr); }
  .hh-dp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hh-table tr.size-detail-row td { display: block; text-align: left; }
  .hh-table tr.size-detail-row td::before { content: none; }
  /* The size matrix is nested inside .data-table: undo its card-mode rules so it stays a real table. */
  .hh-table tr.size-detail-row .hh-size-table { display: table; width: 100%; }
  .hh-table tr.size-detail-row .hh-size-table thead { display: table-header-group; }
  .hh-table tr.size-detail-row .hh-size-table tbody { display: table-row-group; }
  .hh-table tr.size-detail-row .hh-size-table tfoot { display: table-footer-group; }
  .hh-table tr.size-detail-row .hh-size-table tr { display: table-row; padding: 0; }
  .hh-table tr.size-detail-row .hh-size-table td, .hh-table tr.size-detail-row .hh-size-table th { display: table-cell; width: auto; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--color-border); text-align: left; }
  .hh-table tr.size-detail-row .hh-size-table .num { text-align: right; }
  .hh-table tr.size-detail-row .hh-size-table td::before { content: none; }
  .hh-table tr.size-detail-row .hh-size-table { font-size: var(--text-xs); }
  .hh-table tr.size-detail-row .hh-size-table th, .hh-table tr.size-detail-row .hh-size-table td:first-child { white-space: normal; vertical-align: bottom; }
  .hh-table tr.size-detail-row .hh-size-table td, .hh-table tr.size-detail-row .hh-size-table th { padding: var(--space-1); }
  .hh-size-table .pill { font-size: var(--text-xs); padding: 1px 6px; }
}
.hh-sort-form select { width: auto; min-width: 0; }

/* ---------- Hàng hóa: dimension charts, classes, sparklines, history modal (2026-10-21) ---------- */
.hh-dim-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap-grid); }
@media (min-width: 1024px) { .hh-dim-grid { grid-template-columns: 1fr 1fr; } }
.hh-dim-chart { min-width: 0; }
.hh-dim-title { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); }
.hh-bars { list-style: none; margin: 0; padding: 0; }
.hh-bar { display: grid; grid-template-columns: minmax(72px, 112px) minmax(0, 1fr) auto; align-items: center; gap: var(--space-2);
  padding: 3px var(--space-1); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; font-size: var(--text-sm); }
a.hh-bar:hover, a.hh-bar:focus-visible { background: var(--color-surface-2); }
.hh-bar.is-static { color: var(--color-text-muted); }
.hh-bar.is-active .hh-bar-label { color: var(--color-accent); font-weight: 600; }
.hh-bar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hh-bar-track { height: 10px; border-radius: var(--radius-full); background: var(--color-surface-2); overflow: hidden; }
.hh-bar-fill { display: block; height: 100%; min-width: 2px; border-radius: var(--radius-full); background: var(--color-accent); }
.hh-bar.is-static .hh-bar-fill { background: var(--color-text-tertiary); }
.hh-bar-value { min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.hh-bar { position: relative; }
.hh-bar.is-muted .hh-bar-label, .hh-bar.is-muted .hh-bar-value { color: var(--color-text-muted); }
.hh-bar.is-muted .hh-bar-fill { background: var(--color-text-tertiary); }
.hh-bar-tip { position: absolute; left: var(--space-2); bottom: 100%; z-index: 20; width: max-content; max-width: 280px;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-shell-bg);
  color: var(--color-overlay-text); box-shadow: var(--shadow-md); font-size: var(--text-xs); line-height: 1.4;
  white-space: normal; opacity: 0; pointer-events: none; transition: opacity 0.1s ease; }
.hh-bar-tip .muted { color: var(--color-shell-text); }
.hh-bar:hover .hh-bar-tip, .hh-bar:focus-visible .hh-bar-tip { opacity: 1; }

.hh-median { margin: 0 0 var(--space-3); font-size: var(--text-sm); }
.hh-group-tabs a { display: inline-flex; align-items: center; gap: 6px; }
.hh-group-tabs a.is-parent { border-color: var(--color-accent); color: var(--color-accent); }
.hh-class-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); }
.hh-class-total { font-size: var(--text-sm); }
.hh-class-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-full);
  border: 1px solid transparent; font-size: var(--text-xs); font-weight: 600; text-decoration: none; white-space: nowrap; }
a.hh-class-chip:hover { border-color: currentColor; }
.hh-class-chip.is-active { border-color: currentColor; box-shadow: 0 0 0 1px currentColor; }
.hh-class-chip.is-static { padding: 2px 8px; }
.hh-class-sap-dut { color: var(--color-class-sap-dut); background: var(--color-class-sap-dut-soft); }
.hh-class-ton-dong { color: var(--color-class-ton-dong); background: var(--color-class-ton-dong-soft); }
.hh-class-chu-luc { color: var(--color-class-chu-luc); background: var(--color-class-chu-luc-soft); }
.hh-class-hang-duoi { color: var(--color-class-hang-duoi); background: var(--color-class-hang-duoi-soft); }
.hh-class-moi { color: var(--color-class-moi); background: var(--color-class-moi-soft); }
.hh-class-khong-hd { color: var(--color-class-khong-hd); background: var(--color-class-khong-hd-soft); border-style: dashed; border-color: currentColor; }
.hh-class-item { display: inline-flex; align-items: center; }
.hh-class-can-bo-sung { color: var(--color-class-can-bo-sung); background: var(--color-class-can-bo-sung-soft); }
.hh-signal-repeat { color: var(--color-signal-repeat); background: var(--color-signal-repeat-soft); }
.hh-signal-nho-ck { color: var(--color-signal-nho-ck); background: var(--color-signal-nho-ck-soft); }
.hh-signal-giam-nhiet { color: var(--color-signal-giam-nhiet); background: var(--color-signal-giam-nhiet-soft); }
.hh-class-qua-tang, .hh-signal-qua-tang { color: var(--color-class-qua-tang); background: var(--color-class-qua-tang-soft); }
.hh-signal-chips { margin-top: calc(-1 * var(--space-2)); }
.hh-chip-caption { font-size: var(--text-xs); }
/* velocity v2 row: code + class chip + signal icons on one line, name below */
.hh-sku-line { display: flex; align-items: center; gap: 4px; min-width: 0; }
.hh-sku-line strong { white-space: nowrap; }
/* desktop: the class is an icon dot next to the code (label in the tooltip); the card list (<= 639px) shows the label */
.hh-sku-line .hh-row-class { width: 18px; height: 18px; padding: 0; justify-content: center; flex: 0 0 auto; }
.hh-row-class-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 639px) {
  .hh-sku-line { flex-wrap: wrap; }
  .hh-sku-line .hh-row-class { width: auto; height: auto; padding: 1px 8px; gap: 3px; }
  .hh-row-class-label { position: static; width: auto; height: auto; clip: auto; }
}
.hh-signal-dot { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex: 0 0 auto;
  border-radius: var(--radius-full); }
.hh-search { resize: vertical; min-height: 38px; max-height: 160px; flex: 1 1 260px; font: inherit; }
.hh-search-result { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4); font-size: var(--text-sm); }
.hh-missing summary { cursor: pointer; color: var(--color-accent); }
.hh-missing textarea { display: block; width: min(320px, 80vw); margin-top: var(--space-1); font: inherit; font-size: var(--text-xs); }
.hh-size-table tr.hh-size-ke-thap td { background: var(--color-status-overdue-soft); }
.hh-class-sep { width: 1px; align-self: stretch; margin: 0 var(--space-1); background: var(--color-border-strong); }

/* compact table: fits the 1200px content column at 1440px without horizontal scroll */
.hh-table-v2 th, .hh-table-v2 td { padding-left: var(--space-2); padding-right: var(--space-2); }
.hh-table-v2 th { font-size: var(--text-xs); }
.hh-table-v2 td.hh-sku, .hh-table-v2 .hh-sku-name { max-width: 138px; }
.hh-spark-cell { white-space: nowrap; }
.hh-spark { display: inline-block; vertical-align: middle; padding: 0; border: none; background: none; cursor: pointer; border-radius: var(--radius-sm); }
.hh-spark:hover, .hh-spark:focus-visible { background: var(--color-surface-2); }
.hh-sparkline { display: block; }
.hh-sparkline polyline { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hh-sparkline-cum polyline { stroke: var(--color-text-muted); }
.hh-spark-total, .hh-first-n { display: inline-block; vertical-align: middle; margin-left: var(--space-1); font-size: var(--text-sm); }
.hh-first-n .is-partial { color: var(--color-text-tertiary); }
.hh-thumb.hh-zoom { padding: 0; cursor: zoom-in; }
/* polish (2026-10-21): single-line headers, sort arrow inline, ⓘ after it; numeric headers right-aligned;
   a "Bán" | "Tồn" group row above; the whole thead sticks (2 rows can't each stick at top: 0) */
.hh-table-v2 th { white-space: nowrap; line-height: 1.25; vertical-align: bottom; }
.hh-table-v2 thead { position: sticky; top: 0; z-index: 4; }
.hh-table-v2 thead th { position: static; background: var(--color-surface); }
.hh-th { display: inline-flex; align-items: center; gap: 1px; }
.hh-th .info-tip { margin-left: 1px; font-size: 11px; }
/* only the sorted column shows its arrow (the 1440px fit has no room for 10 idle ↕); the title underlines on hover */
.hh-table-v2 .sort-arrow:not(.on) { display: none; }
.hh-table-v2 .sort-link { gap: 2px; }
.hh-table-v2 .sort-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.hh-table-v2 th, .hh-table-v2 td { padding-left: var(--space-1); }
.hh-table-v2 th.hh-chev-cell, .hh-table-v2 td.hh-chev-cell, .hh-table-v2 .hh-group-row th:last-child { width: 28px; padding-right: 0; }
.hh-table-v2 .hh-chevron { padding: 2px; min-width: 0; min-height: 0; }
.hh-table-v2 th.num .hh-th { justify-content: flex-end; }
.hh-table-v2 .hh-group-row th { padding-top: 0; padding-bottom: var(--space-1); border-bottom: none; }
.hh-table-v2 th.hh-group-head { text-align: center; color: var(--color-text); letter-spacing: 0.04em;
  box-shadow: inset 0 -2px 0 var(--color-border-strong); }
@media (min-width: 640px) {
  .hh-table-v2 th.hh-grp-start, .hh-table-v2 td.hh-grp-start { border-left: 1px solid var(--color-border); }
}
.hh-table-v2 th.hh-chev-cell, .hh-table-v2 td.hh-chev-cell { width: 32px; padding-left: 0; }
/* stock / DOC headers wrap to 2 lines ("Kho / 1H/2H") so their columns size to the numbers (2026-10-23: 9 stock
   columns must still fit the 1440 card) */
.hh-table-v2 th.hh-th-wrap { white-space: normal; min-width: 48px; max-width: 64px; }
.hh-table-v2 th.hh-th-wrap .hh-th { flex-wrap: wrap; justify-content: flex-end; row-gap: 0; }
/* Tồn CH (2026-10-23): the sum column by default, "CH theo vùng" swaps it for CH Hà Nội + CH Tỉnh. From 640px the
   swap gives the hidden <col>s width 0 and empties their cells (2026-10-26, table-layout: fixed — hiding cells would
   shift every later column, and visibility: collapse shrinks the table after the widths are shared out); the card list
   on phones still hides the cells. */
@media (min-width: 640px) {
  .hh-table-v2 col.hh-c-ch.hh-c-ch-hn, .hh-table-v2 col.hh-c-ch.hh-c-ch-tinh,
  .hh-table-v2.hh-show-ch col.hh-c-ch.hh-c-ch-sum { width: 0; }
  .hh-table-v2.hh-show-ch col.hh-c-ch.hh-c-ch-hn, .hh-table-v2.hh-show-ch col.hh-c-ch.hh-c-ch-tinh { width: 44px; }
  .hh-table-v2 .hh-col-ch, .hh-table-v2.hh-show-ch .hh-col-ch-sum {
    padding-left: 0 !important; padding-right: 0 !important; border-left: 0 !important; overflow: hidden; visibility: hidden; }
  .hh-table-v2.hh-show-ch .hh-col-ch { padding-left: var(--space-1) !important; padding-right: var(--space-2) !important;
    visibility: visible; }
  .hh-table-v2.hh-show-ch .hh-col-ch.hh-grp-start { border-left: 1px solid var(--color-border) !important; }
}
@media (max-width: 639px) {
  .hh-table-v2 .hh-col-ch { display: none; }
  .hh-table-v2.hh-show-ch .hh-col-ch { display: table-cell; }
  .hh-table-v2.hh-show-ch .hh-col-ch-sum { display: none; }
}
/* CH open + Đang điều chuyển: tighter right padding on the number columns keeps the table inside the card at 1440 */
.hh-table-v2.hh-show-ch td.hh-metric, .hh-table-v2.hh-show-ch th.hh-th-wrap { padding-right: var(--space-1); }
.hh-ch-toggle { margin-left: var(--space-1); padding: 0 var(--space-1); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted); font: inherit;
  font-size: var(--text-xs); letter-spacing: 0; cursor: pointer; }
.hh-ch-toggle[aria-expanded="true"] { color: var(--color-text); border-color: var(--color-border-strong); }
.hh-kho-list { margin: var(--space-1) 0; }
.hh-kho-list p { max-height: 120px; overflow-y: auto; margin: var(--space-1) 0; font-size: var(--text-xs); }
/* 30/60/90 ngày đầu: the 3 numbers under the sparkline, so the column stays ~90px wide */
.hh-first-cell .hh-first-n { display: block; margin: 2px 0 0; font-size: var(--text-xs); }
@media (max-width: 639px) {
  /* card list: same grid as the 2026-10-16 compact table — class chip takes the old nhãn slot */
  .hh-table td.hh-class-cell { grid-column: 2; grid-row: 2; justify-content: flex-start; }
  .hh-table-v2 td.hh-spark-cell { align-items: center; }
  .hh-table-v2 td.hh-spark-cell > .hh-spark { margin-left: auto; }
  .hh-table-v2 td.hh-first-cell { flex-wrap: wrap; }
  .hh-first-cell .hh-first-n { flex-basis: 100%; margin: 2px 0 0; text-align: right; font-size: var(--text-sm); }
  .hh-table-v2 td.hh-sku, .hh-table-v2 .hh-sku-name { max-width: none; }
  .hh-spark-cell { display: flex; align-items: center; justify-content: space-between; }
}

.hh-history { width: min(960px, 96vw); max-width: none; padding: var(--card-padding); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); }
.hh-history::backdrop { background: var(--color-overlay); }
/* Hàng hóa "Đang điều chuyển" (2026-10-24): number button in the table + right-hand drawer with the rows */
.hh-dc-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--color-accent); cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px; }
.hh-dc-btn:hover, .hh-dc-btn:focus-visible { text-decoration-style: solid; }
.hh-table-v2 th.hh-col-dc .hh-th svg { flex: none; }
.hh-drawer { margin: 0 0 0 auto; width: min(880px, 100vw); max-width: none; height: 100dvh; max-height: none;
  padding: var(--card-padding); border: 0; border-left: 1px solid var(--color-border-strong); border-radius: 0;
  background: var(--color-surface); color: var(--color-text); overflow-y: auto; }
.hh-drawer::backdrop { background: var(--color-overlay); }
.hh-drawer .hh-history-head { flex-wrap: nowrap; align-items: flex-start; }
.hh-drawer .section-title { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); min-width: 0; }
.hh-dc-code { font-weight: 400; color: var(--color-text-muted); }
.hh-dc-table td { white-space: nowrap; }
.hh-dc-table td:nth-child(3), .hh-dc-table td:nth-child(4) { white-space: normal; min-width: 110px; }
.hh-dc-table td:last-child { white-space: normal; min-width: 96px; }
.hh-dc-foot { margin-top: var(--space-3); }
.hh-history-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.hh-history-head .filters { margin-bottom: 0; }
.filters button { padding: 6px 12px; border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-border-strong);
  color: var(--color-text); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.filters button.active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-contrast); font-weight: 600; }
.hh-history-chart { height: 300px; }
.hh-history-stock { height: 140px; }
.hh-history-stock-title { margin-top: var(--space-4); }
@media (max-width: 639px) { .hh-history { width: 100vw; max-height: 100dvh; border-radius: 0; } .hh-history-chart { height: 240px; } }

/* ---------- Sàn TMĐT · Khung giờ bán (2026-10-23) ---------- */
.kg { min-width: 0; max-width: 100%; } /* grid/flex child: let the heatmap scroll inside instead of widening the page */
.kg-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.kg-head .section-title, .kg-head .kg-subtitle { margin-right: auto; }
.kg-head .info-popover-panel { left: auto; right: 0; } /* the summary sits at the right edge: open leftwards */
.kg-controls { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); }
.kg-controls .chart-tabs { margin-bottom: 0; }
.kg a.chart-tab { text-decoration: none; }
.kg-subtitle { font-size: var(--text-base); font-weight: 600; margin: var(--space-4) 0 var(--space-2); }
.kg-cmp-head { margin-top: var(--space-5); }
.kg-cmp-head .kg-subtitle { margin: 0; }
.kg-heat-wrap { position: relative; } /* contains the cells' .sr-only (absolute) spans, else they widen the page */
/* Heatmap: one hue, surface -> --color-neon-blue by --v (0–1, set per cell). */
.kg-heat { border-collapse: separate; border-spacing: 2px; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.kg-heat th { font-weight: 500; color: var(--color-text-muted); text-align: center; padding: 0 2px; }
.kg-heat td { width: 24px; min-width: 22px; height: 20px; border-radius: 3px; background: color-mix(in srgb, var(--color-neon-blue) calc(var(--v, 0) * 100%), var(--color-surface-2)); }
.kg-heat td:hover { outline: 2px solid var(--color-text); outline-offset: -1px; }
.kg-heat .kg-heat-day { text-align: left; white-space: nowrap; padding-right: var(--space-2); color: var(--color-text); }
.kg-heat td.kg-heat-total { width: auto; background: none; color: var(--color-text-muted); padding-left: var(--space-2); white-space: nowrap; }
.kg-heat tr.kg-heat-campaign .kg-heat-day { font-weight: 700; }
.kg-tag { display: inline-block; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-accent-soft); color: var(--color-accent); font-size: var(--text-xs); font-weight: 700; }
.kg-legend { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.kg-scale { display: inline-flex; gap: 2px; }
.kg-scale i { width: 14px; height: 10px; border-radius: 2px; background: color-mix(in srgb, var(--color-neon-blue) calc(var(--v) * 100%), var(--color-surface-2)); }
.kg-panels { display: grid; gap: var(--space-5); }
.kg-panel { min-width: 0; }
.kg-panel-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
@media (min-width: 1100px) { .kg-panel-body { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.kg-platform { font-size: var(--text-base); font-weight: 700; margin: 0 0 var(--space-2); }
.kg-platform .muted { font-weight: 500; font-size: var(--text-sm); }
.kg-insights { margin: 0 0 var(--space-3); padding-left: var(--space-4); font-size: var(--text-sm); display: grid; gap: var(--space-1); }
.kg-chart-box { height: 240px; }
.kg-table td, .kg-table th { white-space: nowrap; padding-left: var(--space-2); padding-right: var(--space-2); }
/* Mobile: the band table stays a real table (8 short columns, horizontal scroll, sticky first column) instead of
   the generic .data-table card rows, which turned 7 rows × 8 values into a 2-screen list. */
@media (max-width: 639px) {
  .data-table.kg-table { display: table; width: auto; }
  .data-table.kg-table thead { display: table-header-group; }
  .data-table.kg-table tbody { display: table-row-group; width: auto; }
  .data-table.kg-table tr { display: table-row; width: auto; padding: 0; border-bottom: none; }
  .data-table.kg-table td { display: table-cell; width: auto; padding: 6px var(--space-2); border-bottom: 1px solid var(--color-border); text-align: right; }
  .data-table.kg-table td:first-child { text-align: left; position: sticky; left: 0; background: var(--color-surface); }
  .data-table.kg-table td::before { content: none; }
}

/* ---------- Hàng hóa → Nhóm hàng drill-down (2026-10-23) ---------- */
.hh-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: var(--space-2) 0; font-size: var(--text-sm); }
.hh-crumbs a { color: var(--color-accent); text-decoration: none; }
.hh-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.hh-crumb-sep { color: var(--color-text-muted); }
.hh-nhom-grid { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: var(--space-5); align-items: center; }
.hh-donut-wrap { position: relative; width: 100%; max-width: 300px; margin: 0 auto;
  transition: transform 220ms ease-in, opacity 220ms ease-in; }
.hh-donut-wrap.is-zooming { transform: scale(1.35); opacity: 0; }
.hh-donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; font-size: var(--text-xs); text-align: center; }
.hh-donut-center strong { font-size: var(--text-lg); color: var(--color-text); }
.hh-nhom-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hh-nhom-item { display: grid; grid-template-columns: 12px 1fr auto 56px; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; font-size: var(--text-sm); }
a.hh-nhom-item:hover, a.hh-nhom-item:focus-visible { background: var(--color-surface-2); }
.hh-nhom-item.is-muted { color: var(--color-text-muted); }
.hh-nhom-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-nhom-val, .hh-nhom-pct { text-align: right; }
.hh-nhom-pct { color: var(--color-text-muted); }
.hh-swatch { width: 12px; height: 12px; border-radius: 3px; }
.hh-cat-1 { background: var(--color-cat-1); } .hh-cat-2 { background: var(--color-cat-2); }
.hh-cat-3 { background: var(--color-cat-3); } .hh-cat-4 { background: var(--color-cat-4); }
.hh-cat-5 { background: var(--color-cat-5); } .hh-cat-6 { background: var(--color-cat-6); }
.hh-cat-7 { background: var(--color-cat-7); } .hh-cat-8 { background: var(--color-cat-8); }
.hh-cat-9 { background: var(--color-cat-9); } .hh-cat-10 { background: var(--color-cat-10); }
.hh-cat-muted { background: var(--color-cat-muted); }
.hh-cat-unmapped { background: var(--color-cat-unmapped); box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.hh-code-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hh-code-item { display: grid; grid-template-columns: 24px 32px minmax(0, 1fr) auto; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; font-size: var(--text-sm);
  animation: hh-code-in 260ms ease-out both; }
.hh-code-item:hover, .hh-code-item:focus-visible { background: var(--color-surface-2); }
.hh-code-item .hh-thumb { width: 32px; height: 32px; }
.hh-code-rank { color: var(--color-text-muted); text-align: right; }
.hh-code-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-code-name .hh-bar-track { display: block; height: 4px; margin-top: 4px; }
.hh-code-metrics { display: grid; grid-template-columns: repeat(4, 76px) 52px; gap: var(--space-2); text-align: right; font-size: var(--text-xs); }
.hh-code-metrics > span { display: flex; flex-direction: column; }
.hh-code-pct { align-self: center; color: var(--color-text-muted); }
@keyframes hh-code-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hh-code-item { animation: none; } .hh-donut-wrap { transition: none; } }
@media (max-width: 639px) {
  .hh-nhom-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .hh-donut-wrap { max-width: 240px; }
  .hh-code-item { grid-template-columns: 20px 32px minmax(0, 1fr); }
  .hh-code-metrics { grid-column: 2 / -1; grid-template-columns: repeat(4, 1fr) 44px; text-align: left; }
}

/* Hàng hóa table headers (2026-10-24): one line, fixed height, the label is the tooltip trigger (dotted underline,
   no ⓘ), sort arrow inline after it; numbers right-aligned in tabular figures */
.hh-table-v2 thead tr:last-child th { height: 34px; white-space: nowrap; vertical-align: middle; }
.hh-table-v2 th.hh-th-wrap { white-space: nowrap; max-width: none; }
.hh-th-tip { position: relative; }
.hh-th-label { text-decoration: underline dotted var(--color-text-tertiary); text-underline-offset: 3px; }
.hh-th-tip:hover .info-tip-bubble, .hh-th-tip:focus-within .info-tip-bubble { opacity: 1; }
.hh-table-v2 .sort-link:hover .hh-th-label { text-decoration-style: solid; }
.hh-table-v2 .sort-link:hover { text-decoration: none; }
.hh-table-v2 td.num, .hh-table-v2 th.num { font-variant-numeric: tabular-nums; }
.hh-sub-tang { display: block; font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }

/* SKU detail, left panel (2026-10-24) */
.hh-dp { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; font-size: var(--text-sm); }
.hh-dp-head { display: flex; gap: var(--space-3); align-items: flex-start; }
.hh-dp-img { flex: none; width: 96px; height: 96px; padding: 0; cursor: zoom-in; }
.hh-dp-img.is-missing { cursor: default; }
.hh-dp-id { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.hh-dp-id p { margin: 0; }
.hh-dp-name { font-weight: 600; line-height: 1.3; }
.hh-dp-sub, .hh-dp-first { color: var(--color-text-muted); font-size: var(--text-xs); }
.hh-dp-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; }
.hh-dp-action { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); border-left: 3px solid currentColor; background: var(--color-surface-2); }
.hh-dp-action span { color: var(--color-text); font-size: var(--text-xs); }
.hh-dp-action.is-critical { color: var(--color-status-overdue-text); background: var(--color-status-overdue-soft); }
.hh-dp-action.is-warning { color: var(--color-status-pending-text); background: var(--color-status-pending-soft); }
.hh-dp-action.is-ok { color: var(--color-status-confirmed-text); background: var(--color-status-confirmed-soft); }
.hh-dp-action.is-neutral { color: var(--color-text-muted); }
.hh-dp-sec { display: flex; flex-direction: column; gap: var(--space-2); }
.hh-dp-title { margin: 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-text-muted); }
.hh-dp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.hh-dp-tile { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); min-width: 0; }
.hh-dp-k { color: var(--color-text-muted); font-size: var(--text-xs); }
.hh-dp-v { font-size: var(--text-base); font-weight: 600; font-variant-numeric: tabular-nums; }
.hh-dp-v small { margin-left: 2px; font-size: var(--text-xs); font-weight: 400; color: var(--color-text-muted); }
.hh-dp-note { color: var(--color-text-muted); font-size: var(--text-xs); margin: 0; }
.hh-dp-bar { position: relative; display: block; height: 6px; border-radius: var(--radius-full); background: var(--color-surface-2);
  overflow: visible; }
.hh-dp-bar > span { display: block; height: 100%; border-radius: var(--radius-full); background: var(--color-accent); }
.hh-dp-bar.is-heat > span { background: var(--color-status-pending); }
.hh-dp-meter { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; }
.hh-dp-ck { display: flex; gap: var(--space-3); align-items: center; }
.hh-dp-big { font-size: var(--text-xl); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 72px; }
.hh-dp-ck-scale { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.hh-dp-marker { position: absolute; top: -3px; width: 2px; height: 12px; margin-left: -1px; background: var(--color-text); }
.hh-dp-scale-labels { display: flex; justify-content: space-between; color: var(--color-text-tertiary); font-size: var(--text-xs); }
.hh-dp-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.hh-dp-list > div { display: grid; grid-template-columns: minmax(120px, 42%) minmax(0, 1fr); gap: var(--space-2); }
.hh-dp-list dt { color: var(--color-text-muted); font-size: var(--text-xs); padding-top: 2px; }
.hh-dp-list dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-2); align-items: baseline; }
.hh-dp-list dd .muted { font-size: var(--text-xs); }
.hh-dp-runway.is-critical { color: var(--color-status-overdue-text); font-weight: 600; }
.hh-dp-runway.is-warning { color: var(--color-status-pending-text); font-weight: 600; }
.hh-dp-peer { margin: 0; }
.hh-howto { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.hh-howto summary { cursor: pointer; color: var(--color-text); }
.hh-howto ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-1); }
/* one-line headers are wider than the old 2-line ones: tighter right padding on number columns keeps the table in the
   1 136px card at 1440 (CH open or closed) */
.hh-table-v2 td.hh-metric, .hh-table-v2 thead tr:last-child th.num { padding-right: var(--space-1); }

/* Column alignment (2026-10-26): table-layout fixed + <colgroup>; Mã · Tên takes the rest of the width. Every numeric
   header and cell has the same horizontal padding and is right-aligned in tabular figures, so a header label ends exactly
   where its numbers end; the sort arrow sits before the label. Widths: the brief's starting widths add up to ~1 260px
   but the card's content box is 1 088px at both 1440 and 1920 (shell-main is capped at 1 200px), so each column is
   trimmed to the smallest width that shows its values in full — the table fits with CH theo vùng closed (Mã · Tên
   168px) and open (124px); below that (1280) it scrolls inside the card as before. */
@media (min-width: 640px) {
  .hh-table-v2 { table-layout: fixed; width: 100%; min-width: 1060px; }
  .hh-table-v2.hh-show-ch { min-width: 1088px; }
  .hh-table-v2 col.hh-c-thumb { width: 40px; }
  .hh-table-v2 col.hh-c-sl { width: 72px; }
  .hh-table-v2 col.hh-c-ck { width: 64px; }
  .hh-table-v2 col.hh-c-tv { width: 60px; }
  .hh-table-v2 col.hh-c-7n { width: 96px; }
  .hh-table-v2 col.hh-c-dau { width: 132px; }
  .hh-table-v2 col.hh-c-ke, .hh-table-v2 col.hh-c-kt { width: 48px; }
  .hh-table-v2 col.hh-c-tong { width: 56px; }
  .hh-table-v2 col.hh-c-sb { width: 64px; }
  .hh-table-v2 col.hh-c-4t, .hh-table-v2 col.hh-c-1h { width: 56px; }
  .hh-table-v2 col.hh-c-ch-sum { width: 60px; }
  .hh-table-v2 col.hh-c-ch-hn, .hh-table-v2 col.hh-c-ch-tinh { width: 44px; }
  .hh-table-v2 col.hh-c-dc { width: 72px; }
  .hh-table-v2 col.hh-c-chev { width: 28px; }
  /* right padding is what aligns a label with its numbers: identical in header and body; the left padding only
     gives the value room */
  .hh-table-v2 thead tr:last-child th.num, .hh-table-v2 tr.hh-row td.num { padding-left: var(--space-1);
    padding-right: var(--space-2); text-align: right; font-variant-numeric: tabular-nums; overflow: hidden; }
  .hh-table-v2 tr.hh-row td.num { font-size: var(--text-sm); }
  .hh-table-v2 th.num .hh-th, .hh-table-v2 th.num .sort-link { justify-content: flex-end; }
  .hh-table-v2 tr.hh-row td.hh-spark-cell { padding-left: 0; }
  .hh-table-v2 td.hh-sku, .hh-table-v2 .hh-sku-name { max-width: none; }
  .hh-table-v2 td.hh-sku { overflow: hidden; }
  .hh-table-v2 td.hh-sku, .hh-table-v2 thead tr:last-child th:nth-child(2) { padding-left: var(--space-1); padding-right: var(--space-1); }
  .hh-table-v2 th.hh-chev-cell, .hh-table-v2 td.hh-chev-cell { width: auto; padding: 0; text-align: center; }
}
@media (min-width: 640px) {
  .hh-sku-line { flex-wrap: nowrap; overflow: hidden; align-items: flex-start; }
  /* the code is never cut: badges give way first (clipped), then a code longer than the cell breaks onto a 2nd line */
  .hh-sku-line strong { flex: 0 0 auto; max-width: 100%; font-size: var(--text-sm); white-space: normal; overflow-wrap: anywhere; }
  .hh-sku-badges { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; flex: 0 1000 auto; }
}
@media (max-width: 639px) {
  .hh-sku-badges { display: contents; }
}
.hh-table-v2 .hh-sku-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hh-7n { display: grid; grid-template-columns: 48px 36px; column-gap: 4px; justify-content: end; align-items: center; }
.hh-7n .hh-spark { justify-self: start; }
.hh-7n .hh-sparkline { width: 100%; }
.hh-7n .hh-spark { width: 100%; }
.hh-7n .hh-spark-total { margin: 0; text-align: right; font-size: var(--text-sm); }
.hh-dau { display: flex; flex-direction: column; align-items: flex-end; gap: 0; }
.hh-dau .hh-sparkline { width: 88px; }
.hh-dau .hh-first-n { display: block; margin: 0; font-size: var(--text-xs); line-height: 1.3; white-space: nowrap; text-align: right; }
.hh-table-v2 .sort-arrow.on { margin-right: 2px; }
.hh-sl { display: flex; flex-direction: column; align-items: flex-end; }
.hh-sl .hh-sub-tang { line-height: 1.2; }
/* captions under a number (Đầu đời 30·60·90, "+N tặng"): proportional figures, narrower than the tabular main values */
.hh-dau .hh-first-n, .hh-sl .hh-sub-tang { font-variant-numeric: proportional-nums; }

/* Tooltip component (2026-10-26, templates/components/tooltip.html + static/js/tooltip.js) */
.tt-pop { position: fixed; z-index: 60; max-width: 320px; padding: var(--space-3); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); background: var(--color-shell-bg); color: var(--color-overlay-text); box-shadow: var(--shadow-md);
  font-size: var(--text-xs); font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; overflow-wrap: anywhere;
  pointer-events: auto; }
.tt-pop[hidden] { display: none; }
.tt-pop .tt-head { margin: 0; }
.tt-pop .tt-list { margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.tt-pop .tt-list li { margin: 2px 0 0; padding-left: 0.9em; text-indent: -0.9em; }
.tt-pop .tt-list li::before { content: "• "; }
.tt-pop .tt-k { color: var(--color-text-muted); }
.tt-btn { display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; padding: 0 2px; border: 0;
  background: none; color: var(--color-text-muted); font: inherit; font-size: var(--text-xs); line-height: 1; cursor: help; }
.tt-btn:hover, .tt-btn:focus-visible, .tt-btn[data-tt-open] { color: var(--color-text); }
.tt-trigger { cursor: help; text-decoration: underline dotted var(--color-text-tertiary); text-underline-offset: 3px; }
.tt-trigger:focus-visible, [data-tt]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 2px; }
.hh-th .sort-link[data-tt] { cursor: pointer; }
/* nhãn hiệu = ERP code, name as a muted 2nd line (2026-10-26) */
.hh-brand-code { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0.02em; }
.hh-brand-name { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
.hh-dc-done { color: var(--color-status-confirmed-text); background: var(--color-status-confirmed-soft); }
.hh-dc-so-le td { background: var(--color-status-overdue-soft); }

/* Hàng hóa search box (2026-10-26): one-line input, search icon left, × right, 40px like the filter controls next to it */
.hh-searchbox { position: relative; display: flex; align-items: center; flex: 1 1 260px; min-width: 200px; height: 40px; }
.hh-searchbox-icon { position: absolute; left: var(--space-3); display: inline-flex; color: var(--color-text-muted); pointer-events: none; }
.hh-search-input { width: 100%; height: 40px; min-height: 0; padding: 0 36px 0 38px; border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-sm); }
.hh-search-input::placeholder { color: var(--color-text-muted); }
.hh-search-input:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.hh-search-clear { position: absolute; right: var(--space-1); width: 32px; height: 32px; border: 0; border-radius: var(--radius-sm);
  background: none; color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1; cursor: pointer; }
.hh-search-clear:hover, .hh-search-clear:focus-visible { color: var(--color-text); background: var(--color-surface-2); }
.filter-bar:has(.hh-searchbox) .filter-bar-form > select,
.filter-bar:has(.hh-searchbox) .filter-bar-form .btn,
.filter-bar:has(.hh-searchbox) .slicer > summary { height: 40px; min-height: 40px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
.filter-bar:has(.hh-searchbox) { margin-bottom: var(--space-1); }
.hh-search-help { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--text-xs); }
.hh-search-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: 0 0 var(--space-2);
  font-size: var(--text-sm); }
.hh-code-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--space-2); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full); color: var(--color-text); text-decoration: none; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.hh-code-chip:hover { border-color: var(--color-accent); }
.hh-code-chip.is-missing { color: var(--color-text-muted); border-style: dashed; }
.hh-search-clear-all { color: var(--color-accent); font-size: var(--text-xs); }
.hh-search-missing { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--text-xs); overflow-wrap: anywhere; }
@media (max-width: 639px) { .hh-searchbox { flex: 1 1 100%; } }
/* the global form-control rule (input[type=text]…) out-ranks a single class: keep the icon / × padding and 40px */
.hh-searchbox .hh-search-input { height: 40px; min-height: 0; padding: 0 36px 0 38px; font-size: var(--text-sm); }
.filter-bar:has(.hh-searchbox) form.filter-bar-form { flex: 1 1 auto; flex-wrap: nowrap; }
.filter-bar:has(.hh-searchbox) form.filter-bar-form > select { flex: 0 1 190px; width: auto; min-width: 140px; }
.filter-bar:has(.hh-searchbox) .hh-searchbox { flex: 1 1 220px; }
@media (max-width: 639px) { .filter-bar:has(.hh-searchbox) form.filter-bar-form { flex-wrap: wrap; } }
.filter-bar:has(.hh-searchbox) .hh-searchbox { flex: 1 1 300px; min-width: 300px; }
@media (max-width: 639px) { .filter-bar:has(.hh-searchbox) .hh-searchbox { min-width: 0; } }

/* Mã · Tên badges + widths (2026-10-26 #2). The code + badge line never clips: the code keeps its full width
   (nowrap), badges sit in a fixed slot (18px, 4px gap, max 3 = first 2 + "+N"), a row whose badges do not fit next to
   its code collapses them into one "+N" pill (td.hh-tight, set by JS). Only the name (line 2) truncates.
   Room: the other columns take 924px at their smallest (every value fits — scripts/qa_hang_hoa_alignment.py), so on
   this page the 1 200px content cap is lifted, the side padding is 16px below 1600px and the sidebar starts collapsed
   below 1600px (hang_hoa.html; « re-opens it and is remembered). Mã · Tên takes the rest; a table that still does not
   fit its card (CH theo vùng open at 1280) scrolls sideways inside the card. */
.hh-table-wrap.hh-table-scroll { overflow-x: auto; }
.hh-badge-all { display: none; }
.shell-main:has(.hh-table-v2) { max-width: none; }
@media (min-width: 1024px) and (max-width: 1599px) {
  .shell-main:has(.hh-table-v2) { padding-left: var(--space-4); padding-right: var(--space-4); }
}
@media (min-width: 640px) {
  .hh-table-v2 td.hh-sku { overflow: visible; }
  .hh-sku-line { flex-wrap: nowrap; overflow: visible; align-items: center; gap: var(--space-1); }
  .hh-sku-line strong { flex: none; max-width: none; white-space: nowrap; overflow-wrap: normal; font-size: var(--text-sm); }
  .hh-sku-badges { display: flex; align-items: center; gap: var(--space-1); flex: none; overflow: visible; }
  .hh-sku-line .hh-badge { width: 18px; height: 18px; flex: none; padding: 0; }
  .hh-badge-more { display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 5px;
    border-radius: var(--radius-full); background: var(--color-surface-2); color: var(--color-text-muted);
    font-size: var(--text-xs); font-weight: 600; line-height: 1; cursor: help; }
  .hh-sku-line .hh-badge.hh-badge-more { width: auto; min-width: 18px; }
  .hh-table-v2 td.hh-sku .hh-badge-all { display: none; }
  .hh-table-v2 td.hh-tight .hh-badge { display: none; }
  .hh-table-v2 td.hh-sku.hh-tight .hh-badge-all { display: inline-flex; }
  .hh-table-v2 .hh-sku-name { max-width: 100%; }
  /* image 40px, 10px to the text */
  .hh-table-v2 col.hh-c-thumb { width: 44px; }
  .hh-table-v2 td.hh-thumb-cell { padding-left: var(--space-1); padding-right: 0; }
  .hh-table-v2 td.hh-sku, .hh-table-v2 thead tr:last-child th:nth-child(2) { padding-left: 10px; padding-right: var(--space-1); }
  .hh-table-v2 col.hh-c-sku { width: auto; }
  /* smallest widths at which every value fits its cell */
  .hh-table-v2 { min-width: 1138px; }
  .hh-table-v2.hh-show-ch { min-width: 1198px; }
  .hh-table-v2 col.hh-c-sl { width: 76px; }
  .hh-table-v2 col.hh-c-7n { width: 88px; }
  .hh-table-v2 col.hh-c-dau { width: 124px; }
  .hh-table-v2 col.hh-c-tv { width: 56px; }
  .hh-table-v2 col.hh-c-ck { width: 64px; }
  .hh-table-v2 col.hh-c-ke, .hh-table-v2 col.hh-c-kt { width: 48px; }
  .hh-table-v2 col.hh-c-tong { width: 52px; }
  .hh-table-v2 col.hh-c-4t, .hh-table-v2 col.hh-c-1h { width: 56px; }
  .hh-table-v2 col.hh-c-sb { width: 64px; }
  .hh-table-v2 col.hh-c-ch-sum { width: 60px; }
  .hh-table-v2.hh-show-ch col.hh-c-ch.hh-c-ch-hn, .hh-table-v2.hh-show-ch col.hh-c-ch.hh-c-ch-tinh { width: 60px; }
  .hh-table-v2 col.hh-c-dc { width: 68px; }
  .hh-table-v2 col.hh-c-chev { width: 24px; }
  .hh-7n { grid-template-columns: 40px 36px; }
  .hh-dau .hh-sparkline { width: 88px; }
  /* the CH theo vùng button wraps under "Ngoài DOC" instead of spilling past the table */
  .hh-table-v2 th.hh-ton-head { white-space: normal; line-height: 1.6; }
}

/* Hàng hóa KPI + forecast + shorter table (2026-10-26 #3). With a month-end forecast (current month to date) SL bán and
   DT NET take the first two columns and % active / Tồn sẵn bán stack in the third; the cards without a comparison
   have no period row and shrink to their content. */
.hh-kpi-stack { display: contents; }
@media (min-width: 900px) {
  .hh-kpi-top.has-fc { grid-template-columns: 1fr 1fr minmax(220px, 0.8fr); }
  .hh-kpi-top.has-fc .hh-kpi-stack { display: flex; flex-direction: column; gap: var(--gap-grid); }
  .hh-kpi-top.has-fc .hh-kpi-stack .kpi2-card { flex: 1; }
}
.hh-fc { display: flex; flex-direction: column; gap: 2px; padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
.hh-fc p { margin: 0; }
.hh-fc-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); font-size: var(--text-sm); }
.hh-fc-main strong { font-size: var(--text-lg); }
.hh-fc-k, .hh-fc-meta, .hh-fc-legend { color: var(--color-text-muted); }
.hh-fc-meta { font-size: var(--text-xs); line-height: 1.45; }
.hh-fc-progress { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-1) 0; }
.hh-fc-progress .hh-fc-meta { white-space: nowrap; }
.hh-fc-bar { flex: 1; height: 6px; border-radius: var(--radius-full); background: var(--color-surface-2); overflow: hidden; }
.hh-fc-bar span { display: block; height: 100%; border-radius: var(--radius-full); background: var(--color-cat-1); }
.hh-fc-chart { display: block; width: 100%; height: 32px; margin-top: var(--space-2); }
.hh-fc-b-thuong { fill: var(--color-cat-1); }
.hh-fc-b-camp { fill: var(--color-cat-2); }
.hh-fc-b-lan { fill: var(--color-cat-4); }
.hh-fc-hatch-bg { fill: var(--color-surface-2); }
.hh-fc-hatch-line { stroke: var(--color-cat-1); stroke-width: 2; }
.hh-fc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-1); font-size: 11px; }
.hh-fc-sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-left: var(--space-1); }
.hh-fc-sw:first-child { margin-left: 0; }
.hh-fc-sw-thuong { background: var(--color-cat-1); }
.hh-fc-sw-camp { background: var(--color-cat-2); }
.hh-fc-sw-lan { background: var(--color-cat-4); }
.hh-fc-sw-tail { background: repeating-linear-gradient(45deg, var(--color-cat-1) 0 2px, var(--color-surface-2) 2px 4px); }
/* row count next to the group tabs; "Xem thêm 20" under the table */
.hh-group-tabs { align-items: center; }
.hh-row-count { margin-left: auto; font-size: var(--text-sm); white-space: nowrap; }
.hh-more { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4) 0 var(--space-2); }
/* Ghi chú dữ liệu: collapsed at the bottom */
.hh-notes > summary { cursor: pointer; list-style: revert; display: list-item; margin: 0; }
.hh-notes[open] > summary { margin-bottom: var(--space-3); }
.hh-notes-list { margin: 0; padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--color-text-muted); }
.hh-notes-warn { color: var(--color-status-pending-text); }
/* Hàng hóa drawer · Giá & CK (2026-10-26 #4): Giá niêm yết (ERP) above the % CK bar */
.hh-dp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); margin-bottom: var(--space-3);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.hh-dp-price .hh-dp-note { flex-basis: 100%; margin: var(--space-1) 0 0; }

/* ===================== Công việc phase 1 (2026-10-27): shared ===================== */
.cv-pill { gap: 4px; }
.cv-pill svg, .cv-due svg, .cv-prio svg { flex-shrink: 0; }
.cv-due { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 600; padding: 2px 8px; border-radius: var(--radius-full); white-space: nowrap; }
.cv-due-confirmed { background: var(--color-status-confirmed-soft); color: var(--color-status-confirmed-text); }
.cv-due-pending { background: var(--color-status-pending-soft); color: var(--color-status-pending-text); }
.cv-due-overdue { background: var(--color-status-overdue-soft); color: var(--color-status-overdue-text); }
.cv-due-muted { background: var(--color-status-unseen-soft); color: var(--color-status-unseen-text); }
.cv-prio { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.cv-prio-cao { color: var(--color-status-overdue-text); font-weight: 600; }
.cv-prio-thap { color: var(--color-text-tertiary); }
.cv-demo-banner { display: flex; gap: var(--space-2); align-items: flex-start; }
.cv-demo-banner svg { flex-shrink: 0; margin-top: 2px; }
.cv-demo-banner code { font-size: var(--text-xs); }
.cv-region { position: relative; min-height: 120px; }
.cv-skel { display: none; }
.cv-skel-row { height: 64px; margin-bottom: var(--space-3); }
.cv-region.is-loading > .cv-skel { display: block; }
.cv-region.is-loading > .cv-region-body { display: none; }
.cv-empty .btn, .cv-error .btn { margin-top: var(--space-4); display: inline-flex; gap: var(--space-2); }
.cv-error .empty-state-icon { color: var(--color-status-overdue-text); }
.cv-toasts { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 90; display: flex; flex-direction: column; gap: var(--space-2); width: min(380px, calc(100vw - 32px)); pointer-events: none; }
.cv-toasts .toast { pointer-events: auto; box-shadow: var(--shadow-md); transition: opacity .3s ease, transform .3s ease; }
.cv-toasts .toast.cv-toast-out { opacity: 0; transform: translateY(8px); }
@media (max-width: 767px) { .cv-toasts { bottom: calc(var(--tab-bar-height) + var(--space-3)); left: var(--space-4); right: var(--space-4); width: auto; } }
.cv-dialog { border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); padding: var(--space-5); width: min(440px, calc(100vw - 32px)); box-shadow: var(--shadow-md); }
.cv-dialog::backdrop, .cv-drawer::backdrop { background: var(--color-overlay-nav); }
.cv-dialog-msg { margin: 0 0 var(--space-4); }
.cv-dialog h2 { font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.cv-drawer { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(520px, 100vw); border: none; border-left: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); padding: 0; box-shadow: var(--shadow-md); }
.cv-drawer[open] { display: flex; flex-direction: column; }
.cv-drawer form { display: flex; flex-direction: column; min-height: 100%; }
.cv-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; background: var(--color-surface); z-index: 2; }
.cv-drawer-head h2 { margin: 0; font-size: var(--text-lg); }
.cv-drawer-body { padding: var(--space-5); flex: 1 1 auto; }
.cv-drawer-foot { position: sticky; bottom: 0; background: var(--color-surface); border-top: 1px solid var(--color-border); padding: var(--space-3) var(--space-5); display: flex; gap: var(--space-2); justify-content: flex-end; }
.cv-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); cursor: pointer; text-decoration: none; flex-shrink: 0; }
.cv-icon-btn:hover { background: var(--color-bg); }
.btn svg { flex-shrink: 0; }
.btn.cv-ib { display: inline-flex; align-items: center; gap: var(--space-2); }
.cv-seg { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); overflow: hidden; }
.cv-seg a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; color: var(--color-text); text-decoration: none; font-size: var(--text-sm); }
.cv-seg a + a { border-left: 1px solid var(--color-border-strong); }
.cv-seg a.active { background: var(--color-accent); color: var(--color-accent-contrast); font-weight: 600; }
.cv-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.cv-toolbar .filters { margin-bottom: 0; }
.cv-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; margin-bottom: var(--space-4); }
.cv-filters .field { margin: 0; flex: 1 1 150px; min-width: 0; }
.cv-filters .field label { font-size: var(--text-xs); }
.cv-tab-count { display: inline-block; min-width: 20px; margin-left: 4px; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-surface-2); color: var(--color-text-muted); font-size: var(--text-xs); text-align: center; }
.filters a.active .cv-tab-count { background: var(--color-accent-contrast); color: var(--color-accent); }
.cv-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); background: var(--color-surface-2); color: var(--color-text); font-size: var(--text-xs); cursor: pointer; }
.cv-picker-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0; }
.cv-picker-list { max-height: 220px; overflow-y: auto; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.cv-picker-list label { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text); font-size: var(--text-sm); margin: 0; padding: 6px 0; cursor: pointer; }
.cv-picker-list label[hidden] { display: none; }
.cv-picker-list input { width: 18px; height: 18px; accent-color: var(--color-accent); }
.cv-picker-list small { color: var(--color-text-muted); margin-left: auto; }
.cv-conflict { font-size: var(--text-sm); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-3); }
.cv-conflict-ok { background: var(--color-status-confirmed-soft); color: var(--color-status-confirmed-text); }
.cv-conflict-bad { background: var(--color-status-overdue-soft); color: var(--color-status-overdue-text); }
.cv-conflict-muted { background: var(--color-status-unseen-soft); color: var(--color-text-muted); }

/* table -> cards under 768px */
@media (max-width: 767px) {
  .cv-table thead { display: none; }
  .cv-table, .cv-table tbody, .cv-table tr, .cv-table td { display: block; width: 100%; }
  .cv-table tr { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
  .cv-table td { border: none; padding: 4px 0; display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; text-align: right; }
  .cv-table td[data-label]::before { content: attr(data-label); color: var(--color-text-muted); font-size: var(--text-xs); text-align: left; flex-shrink: 0; }
  .cv-table td.cv-td-main { display: block; text-align: left; font-weight: 600; padding-bottom: var(--space-2); }
  .cv-table td.cv-td-main::before { content: none; }
  .cv-table tr.cv-group-row { background: transparent; border: none; padding: var(--space-3) 0 0; }
  .cv-table tr.cv-group-row td { justify-content: flex-start; }
  .cv-table td input, .cv-table td select { max-width: 62%; }
  .cv-table td .cv-date { max-width: 70%; }
}

/* ===================== Phòng họp: rooms x time grid ===================== */
.cv-grid-wrap { overflow-x: auto; }
.cv-grid { --slot-h: 30px; display: grid; grid-template-columns: 56px repeat(var(--cols), minmax(var(--col-min, 140px), 1fr)); min-width: calc(56px + var(--cols) * var(--col-min, 140px)); }
.cv-grid-head { position: sticky; top: 0; z-index: 3; background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: var(--space-2); font-size: var(--text-sm); font-weight: 600; min-height: 52px; }
.cv-grid-head small { display: block; font-weight: 400; color: var(--color-text-muted); font-size: var(--text-xs); }
.cv-grid-head.is-today { color: var(--color-accent); }
.cv-axis { position: relative; height: calc(var(--rows) * var(--slot-h)); }
.cv-axis span { position: absolute; right: var(--space-2); transform: translateY(-50%); font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.cv-col { position: relative; height: calc(var(--rows) * var(--slot-h)); border-left: 1px solid var(--color-border); }
.cv-col.is-today { background: var(--color-accent-soft); }
.cv-lanes { display: grid; grid-template-columns: repeat(var(--lanes), minmax(0, 1fr)); height: 100%; }
.cv-lane { position: relative; height: 100%; }
.cv-lane + .cv-lane { border-left: 1px dashed var(--color-border); }
.cv-slot { display: block; height: var(--slot-h); border-top: 1px solid var(--color-border); }
.cv-slot:nth-child(2n) { border-top-style: dashed; }
.cv-slot:hover { background: var(--color-accent-soft); }
.cv-slot-past { pointer-events: none; }
.cv-block { position: absolute; left: 3px; right: 3px; z-index: 2; overflow: hidden; border-radius: var(--radius-sm); padding: 4px 6px; font-size: var(--text-xs); line-height: 1.3; text-decoration: none; color: var(--color-text); background: var(--color-surface-2); border: 1px solid var(--color-border-strong); border-left: 3px solid var(--color-accent); }
.cv-block:hover { border-color: var(--color-accent); }
.cv-block b { display: block; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-block span { display: flex; align-items: center; gap: 3px; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cv-block.is-other { opacity: 0.45; }
.cv-block.cv-room-1 { border-left-color: var(--color-cat-1); }
.cv-block.cv-room-2 { border-left-color: var(--color-cat-3); }
.cv-block.cv-room-3 { border-left-color: var(--color-cat-7); }
.cv-block.cv-room-4 { border-left-color: var(--color-cat-2); }
.cv-block.cv-room-5 { border-left-color: var(--color-cat-5); }
.cv-block.cv-room-6 { border-left-color: var(--color-cat-9); }
.cv-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--color-status-overdue); z-index: 4; pointer-events: none; }
.cv-now::before { content: ""; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-status-overdue); }
.cv-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.cv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cv-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.cv-legend .cv-lg-1 { background: var(--color-cat-1); }
.cv-legend .cv-lg-2 { background: var(--color-cat-3); }
.cv-legend .cv-lg-3 { background: var(--color-cat-7); }
.cv-legend .cv-lg-4 { background: var(--color-cat-2); }
.cv-legend .cv-lg-5 { background: var(--color-cat-5); }
.cv-legend .cv-lg-6 { background: var(--color-cat-9); }
.cv-agenda { display: none; }
.cv-agenda-day h3 { font-size: var(--text-sm); color: var(--color-text-muted); margin: var(--space-4) 0 var(--space-2); }
.cv-agenda-day:first-child h3 { margin-top: 0; }
.cv-agenda-item { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-2); text-decoration: none; color: var(--color-text); background: var(--color-surface); }
.cv-agenda-item time { font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--text-sm); }
.cv-agenda-item small { display: flex; flex-wrap: wrap; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); }
.cv-agenda-item.is-other { opacity: 0.6; }
.cv-agenda-empty { color: var(--color-text-muted); font-size: var(--text-sm); padding: var(--space-2) 0; }
@media (max-width: 767px) {
  .cv-grid-wrap { display: none; }
  .cv-agenda { display: block; }
  .cv-legend { display: none; }
}
.cv-day-nav { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cv-mine { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text); margin: 0; }

/* ===================== Biên bản ===================== */
.cv-progress { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); white-space: nowrap; }
.cv-progress .progress { width: 72px; margin: 0; }
.cv-overdue-count { display: inline-flex; align-items: center; gap: 3px; color: var(--color-status-overdue-text); font-weight: 700; font-size: var(--text-sm); white-space: nowrap; }
.cv-min-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-6); align-items: start; padding-bottom: 96px; }
.cv-anchor { position: sticky; top: var(--space-4); display: flex; flex-direction: column; gap: 2px; }
.cv-anchor a { display: flex; align-items: center; gap: var(--space-2); padding: 8px 10px; border-radius: var(--radius-sm); color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); }
.cv-anchor a:hover { background: var(--color-surface); color: var(--color-text); }
.cv-anchor .cv-anchor-n { margin-left: auto; font-size: var(--text-xs); color: var(--color-text-tertiary); }
.cv-sec { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-4); scroll-margin-top: var(--space-4); }
.cv-sec > summary { list-style: none; display: flex; align-items: center; gap: var(--space-2); padding: var(--space-4) var(--space-5); font-weight: 700; font-size: var(--text-lg); cursor: pointer; }
.cv-sec > summary::-webkit-details-marker { display: none; }
.cv-sec > summary::after { content: "▾"; margin-left: auto; color: var(--color-text-muted); font-size: var(--text-sm); }
.cv-sec:not([open]) > summary::after { content: "▸"; }
.cv-sec-body { padding: 0 var(--space-5) var(--space-5); }
.cv-sec-hint { font-size: var(--text-xs); color: var(--color-text-muted); margin: var(--space-1) 0 0; }
.cv-bullets { margin: 0; padding-left: 1.2em; }
.cv-bullets li + li { margin-top: var(--space-1); }
.cv-bullets a, .cv-links a { color: var(--color-accent); }
.cv-links { list-style: none; margin: 0; padding: 0; }
.cv-links li { display: flex; align-items: center; gap: var(--space-2); padding: 6px 0; overflow-wrap: anywhere; }
.cv-head-people { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.cv-avatars { display: inline-flex; }
.cv-avatars .avatar { border: 2px solid var(--color-bg); margin-left: -6px; }
.cv-avatars .avatar:first-child { margin-left: 0; }
.cv-rows input, .cv-rows select { min-width: 0; }
.cv-rows td { vertical-align: top; }
.cv-rows .cv-row-viec { min-width: 200px; }
.cv-row-dept { color: var(--color-text-muted); font-size: var(--text-sm); white-space: nowrap; }
.cv-date { display: flex; gap: 4px; align-items: center; position: relative; }
.cv-date input { min-width: 136px; }
.cv-date .inline-pop-panel { width: 170px; }
.cv-date .inline-pop-panel button { justify-content: flex-start; }
.cv-csq-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: start; padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.cv-csq-item:first-child { border-top: none; }
.cv-csq-answer { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.cv-actionbar { position: fixed; left: calc(var(--rail-width) + var(--subnav-width)); right: 0; bottom: 0; z-index: 30; background: var(--color-surface); border-top: 1px solid var(--color-border-strong); box-shadow: var(--shadow-md); padding: var(--space-3) var(--space-6); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
:root[data-subnav="collapsed"] .cv-actionbar { left: var(--rail-width); }
.cv-actionbar-status { margin-right: auto; display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); flex-wrap: wrap; min-width: 0; }
@media (max-width: 767px) {
  .cv-actionbar, :root[data-subnav="collapsed"] .cv-actionbar { left: 0; bottom: var(--tab-bar-height); padding: var(--space-3) var(--space-4); }
}
@media (max-width: 1023px) {
  .cv-min-layout { grid-template-columns: minmax(0, 1fr); }
  .cv-anchor { display: none; }
}
@media (max-width: 767px) {
  .cv-actionbar .btn { flex: 1 1 0; }
  .cv-actionbar-status { flex: 1 1 100%; }
  .cv-min-layout { padding-bottom: 170px; }
}
.cv-send-groups fieldset { border: none; padding: 0; margin: 0 0 var(--space-4); }
.cv-send-groups legend { font-weight: 700; margin-bottom: var(--space-2); }
.cv-send-groups .check-row small { color: var(--color-text-muted); }
.cv-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-4); overflow-x: auto; }
.cv-tabs [role=tab] { background: none; border: none; border-bottom: 2px solid transparent; padding: var(--space-2) var(--space-3); color: var(--color-text-muted); font: inherit; font-size: var(--text-sm); cursor: pointer; white-space: nowrap; }
.cv-tabs [role=tab][aria-selected=true] { color: var(--color-text); border-bottom-color: var(--color-accent); font-weight: 600; }
.cv-email-frame { width: 100%; height: 560px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.cv-send-dialog { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }

/* ===================== Giao việc ===================== */
.kanban-col.is-drop { outline: 2px dashed var(--color-accent); outline-offset: 4px; border-radius: var(--radius-lg); }
.task-card[draggable=true] { cursor: grab; }
.task-card.is-dragging { opacity: 0.5; }
.cv-card-top { display: flex; align-items: flex-start; gap: var(--space-2); }
.cv-card-top .task-card-title { flex: 1 1 auto; margin-bottom: var(--space-2); }
.cv-card-top input[type=checkbox] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-accent); }
.cv-card-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; margin-bottom: var(--space-2); font-size: var(--text-xs); color: var(--color-text-muted); }
.cv-card-meta a { color: var(--color-accent); text-decoration: none; display: inline-flex; align-items: center; gap: 3px; }
.cv-card-person { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text); }
.cv-quick { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.cv-quick .inline-form, .cv-quick .inline-pop { flex: 0 0 auto; }
.cv-ext { font-size: var(--text-xs); background: var(--color-status-pending-soft); color: var(--color-status-pending-text); border-radius: var(--radius-md); padding: var(--space-2); margin-top: var(--space-2); }
.cv-bulk-bar { position: fixed; left: 50%; transform: translateX(-50%); bottom: var(--space-5); z-index: 40; display: flex; align-items: center; gap: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5); box-shadow: var(--shadow-md); }
.cv-bulk-bar[hidden] { display: none; }
@media (max-width: 767px) { .cv-bulk-bar { bottom: calc(var(--tab-bar-height) + var(--space-3)); } }
.cv-group-row td { background: var(--color-bg); font-weight: 700; }
@media (max-width: 1023px) and (min-width: 768px) { .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .kanban { grid-template-columns: minmax(0, 1fr); } }

/* ===================== Tóm tắt cho sếp ===================== */
.cv-boss { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-grid); align-items: start; }
.cv-boss > .cv-boss-wide { grid-column: 1 / -1; }
@media (max-width: 1023px) { .cv-boss { grid-template-columns: minmax(0, 1fr); } }
.cv-inbox-item { border-top: 1px solid var(--color-border); padding: var(--space-3) 0; }
.cv-inbox-item:first-of-type { border-top: none; }
.cv-inbox-q { font-weight: 600; margin: 0 0 var(--space-1); }
.cv-inbox-meta { font-size: var(--text-xs); color: var(--color-text-muted); display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cv-inbox-meta a { color: var(--color-accent); }
.cv-inbox-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.cv-meet-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--gap-grid); }
.cv-meet-card { display: block; text-decoration: none; color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); background: var(--color-surface); }
.cv-meet-card:hover { border-color: var(--color-accent); }
.cv-meet-card h3 { font-size: var(--text-base); margin: 0 0 var(--space-1); }
.cv-meet-card ul { margin: var(--space-2) 0; padding-left: 1.1em; font-size: var(--text-sm); color: var(--color-text-muted); }
.cv-meet-card li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-bars { display: flex; flex-direction: column; gap: var(--space-3); }
.cv-bar-row { display: grid; grid-template-columns: minmax(90px, 140px) minmax(0, 1fr) 84px; gap: var(--space-3); align-items: center; font-size: var(--text-sm); }
.cv-bar-track { height: 10px; border-radius: var(--radius-full); background: var(--color-surface-2); overflow: hidden; }
.cv-bar-fill { display: block; height: 100%; border-radius: var(--radius-full); background: var(--color-accent); }
.cv-bar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--color-text); }
.cv-od-group h3 { font-size: var(--text-sm); margin: var(--space-3) 0 var(--space-1); display: flex; gap: var(--space-2); align-items: center; }
.cv-od-list { list-style: none; margin: 0; padding: 0; }
.cv-od-list li { display: flex; justify-content: space-between; gap: var(--space-3); padding: 6px 0; border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
.cv-od-list li a { color: var(--color-text); text-decoration: none; overflow-wrap: anywhere; }
.cv-od-list small { color: var(--color-text-muted); display: block; }
.cv-week-nav { display: inline-flex; align-items: center; gap: var(--space-2); }
.cv-week-nav strong { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===================== Người dùng: bulk ===================== */
.cv-bulk-diff td.cv-new { color: var(--color-status-confirmed-text); font-weight: 600; }
.cv-bulk-diff td.cv-old { color: var(--color-text-muted); text-decoration: line-through; }
@media (min-width: 768px) { .cv-rows-wrap .cv-rows { min-width: 1000px; } .cv-rows .cv-row-viec { min-width: 240px; } .cv-rows select { min-width: 150px; } }
/* Công việc phase 1: finished cards stay AA (no opacity dimming) — muted, struck-through title instead. */
.kanban .task-card-done { opacity: 1; background: var(--color-bg); }
.kanban .task-card-done .task-card-title { color: var(--color-text-muted); }

/* ===== Logistic (2026-10-27) — tokens only; reuses hh-searchbox / slicer / kho-chip / kpi2-card / tooltip. ===== */
.lg-ib { display: inline-flex; align-items: center; gap: var(--space-2); }
.lg-fresh { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
.lg-fresh-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--text-xs);
  background: var(--color-surface-2); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.lg-fresh-pill strong { color: var(--color-text); font-weight: 600; }
.lg-fresh-pill.is-stale { background: var(--color-status-pending-soft); color: var(--color-status-pending-text); border-color: transparent; }
.lg-fresh-pill.is-stale strong { color: inherit; }
.lg-error { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.lg-error > span { flex: 1 1 260px; }

.lg-filter-bar { gap: var(--space-2); margin-bottom: var(--space-2); }
.lg-search-form { display: flex; flex: 1 1 280px; min-width: 220px; }
.lg-search-form .hh-searchbox { flex: 1 1 auto; }
.lg-toggles { display: inline-flex; gap: var(--space-2); flex-wrap: wrap; }
.lg-toggle { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong); color: var(--color-text); text-decoration: none; font-size: var(--text-sm); font-weight: 600; }
.lg-toggle:hover { background: var(--color-surface-2); }
.lg-toggle.is-on { background: var(--color-accent-soft); color: var(--color-accent); border-color: var(--color-accent); }
.lg-chips { align-items: center; }
.lg-clear { font-size: var(--text-sm); font-weight: 600; margin-left: var(--space-1); }

.lg-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid); margin: var(--space-4) 0 var(--gap-section); }
.lg-kpi { min-width: 0; }
.lg-kpi .kpi2-title { cursor: help; text-decoration: underline dotted var(--color-text-tertiary); text-underline-offset: 3px; }
.lg-kpi-value { font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-text); line-height: 1.2; margin-top: var(--space-1); }
.lg-kpi-of { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.lg-kpi-sub { font-size: var(--text-xs); color: var(--color-text-muted); }
.lg-kpi-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
.lg-minibars { display: flex; align-items: flex-end; gap: 3px; list-style: none; margin: 0; padding: 0; height: 40px; }
.lg-minibars li { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 16px; height: 100%; }
.lg-minibar { display: block; width: 10px; border-radius: 3px 3px 0 0; background: var(--color-status-confirmed); }
.lg-minibar-l { font-size: 9px; color: var(--color-text-tertiary); line-height: 1; margin-top: 2px; }
.lg-minibars li > .lg-minibar { flex: none; }
.lg-split { display: flex; gap: 2px; height: 8px; border-radius: var(--radius-full); overflow: hidden; background: var(--color-surface-2); margin: var(--space-1) 0; }
.lg-split-co { background: var(--color-neon-blue); min-width: 2px; }
.lg-split-khong { background: var(--color-class-sap-dut); min-width: 2px; }
.lg-split-empty { flex: 1; }
.lg-split-link { color: inherit; text-decoration: underline; text-decoration-color: var(--color-neon-blue); text-underline-offset: 3px; }
.lg-split-link.is-khong { text-decoration-color: var(--color-class-sap-dut); }
.lg-late { color: var(--color-status-overdue-text); font-weight: 600; }

.lg-table-card { padding: 0; overflow: hidden; }
.lg-table-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.lg-count { margin: 0; font-size: var(--text-sm); }
.lg-more-cols { display: none; }
.lg-table-wrap { overflow-x: auto; max-height: calc(100vh - 120px); overflow-y: auto; }
.lg-table { table-layout: fixed; width: 100%; min-width: 1500px; border-collapse: separate; border-spacing: 0; }
.lg-table col.lg-c-thumb { width: 52px; } .lg-table col.lg-c-sku { width: 220px; }
.lg-table col.lg-c-n { width: 70px; } .lg-table col.lg-c-s { width: 58px; } .lg-table col.lg-c-m { width: 78px; }
.lg-table col.lg-c-xs { width: 44px; } .lg-table col.lg-c-date { width: 90px; } .lg-table col.lg-c-lo { width: 132px; } .lg-table col.lg-c-chev { width: 36px; }
.lg-table th, .lg-table td { padding: var(--space-2) var(--space-2); font-size: var(--text-sm); border-bottom: 1px solid var(--color-border); }
.lg-table td.num, .lg-table th.num { text-align: right; font-variant-numeric: tabular-nums; padding-right: var(--space-2); }
.lg-table thead th { position: sticky; top: 0; z-index: 3; background: var(--color-surface); font-size: var(--text-xs); white-space: nowrap; vertical-align: bottom; }
.lg-table thead tr.lg-group-row th { top: 0; border-bottom: none; padding-bottom: 0; }
.lg-table thead tr:last-child th { top: 26px; }
.lg-table th.lg-group { text-align: center; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text); }
.lg-table .lg-grp-start { border-left: 1px solid var(--color-border); }
.lg-th { display: inline-flex; align-items: center; gap: 2px; color: var(--color-text-muted); text-decoration: none; max-width: 100%; }
.lg-table th.num .lg-th { justify-content: flex-end; }
.lg-th-label { overflow: hidden; text-overflow: ellipsis; text-decoration: underline dotted var(--color-text-tertiary); text-underline-offset: 3px; }
.lg-th:hover .lg-th-label { text-decoration-style: solid; color: var(--color-text); }
.lg-sticky { position: sticky; z-index: 2; background: var(--color-surface); }
.lg-sticky-c { left: 0; }
.lg-sticky-0 { left: 36px; }
.lg-sticky-1 { left: 88px; box-shadow: 1px 0 0 var(--color-border); }
.lg-table thead .lg-sticky { z-index: 5; }
.lg-table thead .lg-sticky-g { left: 0; z-index: 5; }
.lg-row:hover > td, .lg-row:hover > td.lg-sticky { background: var(--color-surface-2); }
.lg-row { cursor: pointer; }
.lg-row.is-open > td { border-bottom-color: transparent; background: var(--color-surface-2); }
.lg-thumb-cell { padding-left: var(--space-1) !important; }
.lg-sku { min-width: 0; }
.lg-sku-line { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.lg-sku-line strong { overflow: visible; }
.lg-sku-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-xs); }
.lg-badge { display: inline-flex; align-items: center; gap: 2px; flex: none; height: 18px; padding: 0 6px; border-radius: var(--radius-full);
  font-size: 10px; font-weight: 700; background: var(--color-accent-soft); color: var(--color-accent); }
.lg-badge-grey { background: var(--color-surface-2); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.lg-badge-sd { background: var(--color-class-sap-dut-soft); color: var(--color-class-sap-dut); padding: 0 4px; }
.lg-zero { color: var(--color-text-tertiary); }
.lg-cl { font-weight: 600; color: var(--color-text-muted); margin-right: 2px; }
.lg-dash { cursor: help; }
.lg-dq { display: inline-flex; vertical-align: -1px; margin-right: 3px; color: var(--color-status-pending); cursor: help; }
.lg-truck { display: inline-flex; vertical-align: -1px; margin-right: 3px; color: var(--color-neon-blue); }
.lg-lo span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-doc.is-red { background: var(--color-status-overdue-soft); color: var(--color-status-overdue-text); font-weight: 700; }
.lg-doc.is-amber { background: var(--color-status-pending-soft); color: var(--color-status-pending-text); font-weight: 600; }
.lg-chev-cell { text-align: center; padding: 0 !important; }
.lg-expand { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: none; background: none;
  border-radius: var(--radius-sm); color: var(--color-text-muted); cursor: pointer; transition: transform 0.15s; }
.lg-expand:hover { background: var(--color-surface-2); color: var(--color-text); }
.lg-expand[aria-expanded="true"] { transform: rotate(90deg); }
.lg-expand:focus-visible, .lg-tab:focus-visible, .lg-toggle:focus-visible, .lg-dq:focus-visible, .lg-dash:focus-visible,
.lg-th:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lg-detail-row > td { padding: 0 !important; background: var(--color-bg); }
.lg-detail { padding: var(--space-3) var(--space-4) var(--space-4); position: sticky; left: 0; width: var(--lg-wrap-w, 100%); box-sizing: border-box; }
.lg-skel { height: 64px; border-radius: var(--radius-md); background: linear-gradient(90deg, var(--color-surface-2), var(--color-surface), var(--color-surface-2));
  background-size: 200% 100%; animation: lg-skel 1.2s linear infinite; }
@keyframes lg-skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .lg-skel { animation: none; } .lg-expand { transition: none; } }
.lg-summary { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.lg-summary strong { color: var(--color-text); }
.lg-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-2); }
.lg-tab { border: none; background: none; padding: var(--space-2) var(--space-3); font: inherit; font-size: var(--text-sm); font-weight: 600;
  color: var(--color-text-muted); border-bottom: 2px solid transparent; cursor: pointer; }
.lg-tab[aria-selected="true"] { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.lg-sub-wrap { overflow-x: auto; }
.lg-sub { width: 100%; border-collapse: collapse; font-size: var(--text-xs); }
.lg-sub th, .lg-sub td { padding: 6px var(--space-2); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.lg-sub th.num, .lg-sub td.num { text-align: right; font-variant-numeric: tabular-nums; }
.lg-table .lg-sub thead th { position: static; top: auto; background: none; z-index: auto; vertical-align: bottom;
  color: var(--color-text-muted); font-weight: 600; white-space: nowrap; }
.lg-sub tfoot th { font-weight: 700; color: var(--color-text); border-bottom: none; }
.lg-sub-meta { display: block; font-size: 10px; }
.lg-flag { display: inline-flex; align-items: center; gap: 3px; margin: 0 4px 2px 0; padding: 1px 6px; border-radius: var(--radius-full);
  background: var(--color-status-pending-soft); color: var(--color-status-pending-text); font-size: 10px; font-weight: 600; white-space: nowrap; }
.lg-st { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; white-space: nowrap; }
.lg-st-done { background: var(--color-status-confirmed-soft); color: var(--color-status-confirmed-text); }
.lg-st-dang { background: color-mix(in srgb, var(--color-neon-blue) 16%, transparent); color: var(--color-text); }
.lg-st-dang svg { color: var(--color-neon-blue); }
.lg-more { padding: var(--space-3) var(--space-4); text-align: center; border-top: 1px solid var(--color-border); }
.lg-empty { padding: var(--space-8) var(--space-4); }

.lg-dq-box { margin-top: var(--gap-section); padding: var(--space-3) var(--space-4); }
.lg-dq-box > summary { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--text-sm); flex-wrap: wrap; }
.lg-dq-box > summary svg { color: var(--color-status-pending); }
.lg-dq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); margin: var(--space-3) 0; }
.lg-dq-title { font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.lg-dq-list { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
.lg-dq-list li { display: flex; justify-content: space-between; gap: var(--space-2); padding: 3px 0; border-bottom: 1px dashed var(--color-border); }

@media (max-width: 1279px) { .lg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) {
  .lg-more-cols { display: inline-flex; }
  .lg-table { min-width: 1300px; }
  .lg-table:not(.lg-show-doc) .lg-col-doc { display: none; }
  .lg-table:not(.lg-show-doc) col.lg-col-doc { width: 0; }
}
@media (max-width: 767px) {
  .lg-kpis { grid-template-columns: minmax(0, 1fr); }
  .lg-search-form { flex: 0 0 auto; width: 100%; }
  .lg-more-cols { display: none; }
  .lg-table-wrap { max-height: none; overflow: visible; }
  .lg-table, .lg-table tbody { display: block; min-width: 0; width: 100%; }
  .lg-table colgroup, .lg-table thead { display: none; }
  .lg-table tr.lg-row { display: grid; grid-template-columns: 44px 1fr 1fr; gap: 2px var(--space-3); padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border); }
  .lg-table tr.lg-row > td { display: none; border: none; padding: 0 !important; position: static; background: none !important; box-shadow: none; }
  .lg-table tr.lg-row > td.lg-thumb-cell { display: block; grid-row: span 2; }
  .lg-table tr.lg-row > td.lg-sku { display: block; grid-column: 2 / 4; }
  .lg-table tr.lg-row > td[data-label="Sẵn bán"], .lg-table tr.lg-row > td[data-label="Còn về"],
  .lg-table tr.lg-row > td[data-label="Đang ĐC"], .lg-table tr.lg-row > td[data-label="DOC tổng"] {
    display: flex; justify-content: space-between; gap: var(--space-2); text-align: right; font-size: var(--text-sm); }
  .lg-table tr.lg-row > td[data-label="Sẵn bán"], .lg-table tr.lg-row > td[data-label="Đang ĐC"] { grid-column: 2; }
  .lg-table tr.lg-row > td[data-label="Còn về"], .lg-table tr.lg-row > td[data-label="DOC tổng"] { grid-column: 3; }
  .lg-table tr.lg-row > td[data-label="Sẵn bán"]::before, .lg-table tr.lg-row > td[data-label="Còn về"]::before,
  .lg-table tr.lg-row > td[data-label="Đang ĐC"]::before, .lg-table tr.lg-row > td[data-label="DOC tổng"]::before {
    content: attr(data-label); color: var(--color-text-muted); text-align: left; }
  .lg-table tr.lg-row > td.lg-doc.is-red, .lg-table tr.lg-row > td.lg-doc.is-amber { padding: 0 4px !important; border-radius: var(--radius-sm); }
  .lg-table tr.lg-row > td.lg-doc.is-red { background: var(--color-status-overdue-soft) !important; }
  .lg-table tr.lg-row > td.lg-doc.is-amber { background: var(--color-status-pending-soft) !important; }
  .lg-table tr.lg-row > td.lg-chev-cell { display: block; grid-column: 1; grid-row: 3; }
  .lg-table tr.lg-row > td.lg-sku::before, .lg-table tr.lg-row > td.lg-thumb-cell::before,
  .lg-table tr.lg-row > td.lg-chev-cell::before { content: none; display: none; }
  .lg-table tr.lg-row > td.lg-sku { text-align: left; }
  .lg-table tr.lg-detail-row { display: block; }
  .lg-table tr.lg-detail-row[hidden] { display: none; }
  .lg-table tr.lg-detail-row > td { display: block; }
  .lg-detail { position: static; max-width: none; padding: var(--space-2) var(--space-3) var(--space-3); }
  .lg-sub thead { display: none; }
  .lg-sub tr { display: block; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
  .lg-sub td, .lg-sub tfoot th { display: flex; justify-content: space-between; gap: var(--space-2); border: none; padding: 2px 0; text-align: right; }
  .lg-sub td::before { content: attr(data-label); color: var(--color-text-muted); text-align: left; }
  .lg-sub td[data-label="Cảnh báo"]:empty { display: none; }
}

/* Admin banner: MySQL objects / freshness (app/db_check.py). Logistic: failing object, admins only. */
.db-health { margin-bottom: var(--space-4); align-items: flex-start; }
.db-health p { margin: var(--space-1) 0 0; font-weight: 400; }
.lg-error-detail { display: block; font-weight: 600; margin-top: var(--space-1); }
.lg-neg { color: var(--color-status-overdue-text); font-weight: 600; }
.lg-badge-gift { background: var(--color-class-qua-tang-soft); color: var(--color-class-qua-tang); }
.hh-fc-skel { display: block; height: 72px; margin-top: var(--space-2); }
.lg-badge-icon { padding: 0 4px; }

/* ===== Văn bản công ty (2026-11-02) — tokens only ===== */
.vb-ib { display: inline-flex; align-items: center; gap: var(--space-2); }
.vb-filters { gap: var(--space-2); }
.vb-search { flex: 1 1 260px; }
.vb-sel select { height: 40px; }
.vb-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); }
.vb-list { padding: 0; overflow: hidden; }
.vb-table td { vertical-align: top; }
.vb-main { min-width: 280px; }
.vb-open, .vb-link { border: none; background: none; padding: 0; font: inherit; color: var(--color-accent); text-align: left; cursor: pointer; }
.vb-open:hover, .vb-link:hover { text-decoration: underline; }
.vb-open:focus-visible, .vb-link:focus-visible, .vb-drop:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.vb-open strong { color: var(--color-text); }
.vb-sub { display: block; font-size: var(--text-xs); margin-top: 2px; }
.vb-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.vb-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600;
  background: var(--color-surface-2); color: var(--color-text-muted); }
.vb-badge.is-new { background: var(--color-accent-soft); color: var(--color-accent); }
.vb-badge.is-must { background: var(--color-status-overdue-soft); color: var(--color-status-overdue-text); }
.vb-badge.is-warn { background: var(--color-status-pending-soft); color: var(--color-status-pending-text); }
.vb-badge.is-done { background: var(--color-status-confirmed-soft); color: var(--color-status-confirmed-text); }
.vb-badge.is-meta { border: 1px solid var(--color-border); background: none; }
.vb-loai { display: inline-block; padding: 0 6px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; background: var(--color-surface-2); color: var(--color-text); }
.vb-pin { color: var(--color-status-pending); margin-right: 2px; }
.vb-status { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.vb-status.is-on { color: var(--color-status-confirmed-text); }
.vb-status.is-off { color: var(--color-text-muted); }
.vb-menu { position: relative; }
.vb-menu > summary { list-style: none; cursor: pointer; padding: 4px; border-radius: var(--radius-sm); color: var(--color-text-muted); }
.vb-menu > summary::-webkit-details-marker { display: none; }
.vb-menu-panel { position: absolute; right: 0; z-index: 10; min-width: 240px; padding: var(--space-2); display: grid; gap: 2px; }
.vb-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: none; background: none; font: inherit;
  font-size: var(--text-sm); color: var(--color-text); text-decoration: none; text-align: left; border-radius: var(--radius-sm); cursor: pointer; }
.vb-menu-item:hover { background: var(--color-surface-2); }
.vb-versions { font-size: var(--text-xs); margin: var(--space-1) 8px 0; }
.vb-modal, .vb-drawer { border: none; padding: 0; background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.vb-modal::backdrop, .vb-drawer::backdrop { background: var(--color-overlay); }
.vb-modal { width: min(1100px, 96vw); height: min(92vh, 1000px); }
.vb-modal-body { display: flex; flex-direction: column; height: 100%; }
.vb-viewer-head, .vb-drawer-head { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.vb-viewer-title, .vb-drawer-head h2 { margin: 0; font-size: var(--text-lg); }
.vb-viewer-meta { margin: 0 0 2px; font-size: var(--text-xs); }
.vb-frame { flex: 1; width: 100%; border: none; background: var(--color-surface-2); }
.vb-viewer-foot, .vb-drawer-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); }
.vb-read { margin-left: auto; }
.vb-skel { height: 60vh; margin: var(--space-4); }
.vb-drawer { width: min(720px, 100vw); max-height: 96vh; margin-right: 0; }
.vb-form { display: flex; flex-direction: column; max-height: 96vh; }
.vb-drop { margin: var(--space-4); padding: var(--space-5); border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg); text-align: center; cursor: pointer; color: var(--color-text-muted); }
.vb-drop.is-over { border-color: var(--color-accent); background: var(--color-accent-soft); }
.vb-drop p { margin: var(--space-1) 0; }
.vb-file-name { font-weight: 600; color: var(--color-text); }
.vb-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: 0 var(--space-4) var(--space-3); overflow: auto; }
.vb-meta label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); font-weight: 600; }
.vb-meta .vb-check { flex-direction: row; font-weight: 400; }
.vb-meta .vb-wide, .vb-meta fieldset { grid-column: 1 / -1; }
.vb-meta fieldset { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-3); }
.vb-choices { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); width: 100%; }
.vb-progress { padding: 0 var(--space-4); }
.vb-error { margin: 0 var(--space-4); color: var(--color-status-overdue-text); font-weight: 600; }
.vb-drawer-foot { justify-content: flex-end; }
.vb-report-sum { font-size: var(--text-lg); }
.vb-home .row-title { font-weight: 400; }
@media (max-width: 767px) {
  .vb-meta { grid-template-columns: minmax(0, 1fr); }
  .vb-main { min-width: 0; }
  .vb-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vb-filters > * { width: auto; min-width: 0; }
  .vb-filters .vb-search, .vb-filters .btn { grid-column: 1 / -1; flex: none; }
  .vb-table td.vb-main { display: block; text-align: left; padding-bottom: var(--space-2); }
  .vb-table td.vb-main::before { display: none; }
  .vb-table td.vb-main .vb-badges { justify-content: flex-start; }
}

/* ===== Giao việc v2 + Phân quyền + chuông thông báo (2026-11-03) — tokens only ===== */
.bell { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px; border-radius: var(--radius-md); color: inherit; text-decoration: none; }
.bell:hover { background: var(--color-overlay-control-hover); }
.bell:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.bell-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-full); background: var(--color-status-overdue); color: var(--color-accent-contrast);
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.shell-topbar .bell .bell-count { position: absolute; top: 0; right: -2px; }
.vc-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.vc-lists { padding: var(--space-3); }
.vc-side-title { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0 0 var(--space-2); text-transform: uppercase; letter-spacing: .04em; }
.vc-lists ul { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: grid; gap: 2px; }
.vc-lists li { display: flex; flex-direction: column; padding: 6px 8px; border-radius: var(--radius-sm); }
.vc-lists li:hover { background: var(--color-surface-2); }
.vc-lists a { color: var(--color-text); text-decoration: none; font-weight: 600; }
.vc-lists small { font-size: var(--text-xs); }
.vc-new-list { display: grid; gap: var(--space-2); border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.vc-tabs { margin-bottom: var(--space-3); }
.vc-count { display: inline-flex; min-width: 20px; justify-content: center; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-surface-2); font-size: var(--text-xs); }
.vc-count.is-alert { background: var(--color-status-overdue-soft); color: var(--color-status-overdue-text); }
.vc-card { padding: var(--space-3) var(--space-4); }
.vc-quick { display: flex; align-items: center; gap: var(--space-2); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); padding: 0 var(--space-3); margin-bottom: var(--space-3); }
.vc-quick:focus-within { border-color: var(--color-accent); border-style: solid; }
.vc-quick input[type="text"] { flex: 1; border: none; background: none; height: 40px; padding: 0; box-shadow: none; }
.vc-quick input[type="text"]:focus { outline: none; }
.vc-quick-plus { color: var(--color-accent); font-weight: 700; font-size: var(--text-lg); }
.vc-group { font-size: var(--text-sm); margin: var(--space-4) 0 var(--space-1); color: var(--color-text-muted); }
.vc-rows { list-style: none; margin: 0; padding: 0; }
.vc-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.vc-row:last-child { border-bottom: none; }
.vc-row.is-done .vc-title { color: var(--color-text-muted); text-decoration: line-through; }
.vc-row-main { flex: 1; min-width: 0; }
.vc-title { color: var(--color-text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.vc-title:hover { color: var(--color-accent); text-decoration: underline; }
.vc-row-sub { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; font-size: var(--text-xs); }
.vc-tick-form { margin: 0; }
.vc-tick { width: 20px; height: 20px; flex: none; border: 2px solid var(--color-border-strong); border-radius: var(--radius-full); background: none; cursor: pointer; padding: 0; display: inline-block; }
.vc-tick:hover { border-color: var(--color-status-confirmed); background: var(--color-status-confirmed-soft); }
.vc-tick.is-static { cursor: default; }
.vc-tick.is-done { background: var(--color-status-confirmed); border-color: var(--color-status-confirmed); }
.vc-pick { width: 16px; height: 16px; flex: none; }
.vc-pick-gap { width: 16px; flex: none; }
.vc-st { padding: 1px 8px; border-radius: var(--radius-full); font-weight: 600; background: var(--color-surface-2); color: var(--color-text-muted); }
.vc-st-dang_lam { background: var(--color-accent-soft); color: var(--color-accent); }
.vc-st-cho_duyet { background: var(--color-status-pending-soft); color: var(--color-status-pending-text); }
.vc-st-hoan_tat { background: var(--color-status-confirmed-soft); color: var(--color-status-confirmed-text); }
.vc-prio { padding: 1px 6px; border-radius: var(--radius-sm); font-weight: 700; }
.vc-prio.is-high { background: var(--color-status-overdue-soft); color: var(--color-status-overdue-text); }
.vc-prio.is-low { color: var(--color-text-muted); border: 1px solid var(--color-border); }
.vc-list-tag, .vc-sub-count { color: var(--color-text-muted); }
.vc-blocked { color: var(--color-status-pending-text); font-weight: 600; }
.vc-due { font-size: var(--text-xs); white-space: nowrap; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.vc-due.is-over { color: var(--color-status-overdue-text); font-weight: 700; }
.vc-avatars { display: inline-flex; flex: none; }
.vc-av { width: 26px; height: 26px; border-radius: var(--radius-full); background: var(--color-accent-soft); color: var(--color-accent); font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--color-surface); margin-left: -6px; }
.vc-av:first-child { margin-left: 0; }
.vc-av-more { background: var(--color-surface-2); color: var(--color-text-muted); }
.vc-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
.vc-groupby label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); white-space: nowrap; }
.vc-groupby select { width: auto; }
.vc-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
  border-radius: var(--radius-md); background: var(--color-accent-soft); }
.vc-board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: var(--space-3); overflow-x: auto; padding-bottom: var(--space-2); }
.vc-col { background: var(--color-surface-2); border-radius: var(--radius-lg); padding: var(--space-2); min-height: 200px; }
.vc-col.is-over { outline: 2px dashed var(--color-accent); }
.vc-col-head { font-size: var(--text-sm); margin: var(--space-1) var(--space-2) var(--space-2); }
.vc-col-body { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.vc-card-task { padding: var(--space-3); display: grid; gap: 6px; }
.vc-card-task[draggable="true"] { cursor: grab; }
.vc-card-task.is-dragging { opacity: .5; }
.vc-hint { font-size: var(--text-sm); margin-top: var(--space-2); }
.vc-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.vc-cal-head h3 { margin: 0; }
.vc-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
.vc-cal-dow { padding: 4px 6px; font-size: var(--text-xs); color: var(--color-text-muted); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.vc-cal-day { min-height: 96px; padding: 4px; border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vc-cal-day.is-out { background: var(--color-surface-2); color: var(--color-text-muted); }
.vc-cal-day.is-today .vc-cal-num { background: var(--color-accent); color: var(--color-accent-contrast); border-radius: var(--radius-full); padding: 0 6px; }
.vc-cal-num { font-size: var(--text-xs); align-self: flex-start; }
.vc-cal-task { font-size: 11px; padding: 1px 4px; border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text); background: var(--color-surface-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-cal-task.is-over { background: var(--color-status-overdue-soft); color: var(--color-status-overdue-text); }
.vc-cal-more { font-size: 11px; color: var(--color-text-muted); }
.vc-drawer, .vc-modal { border: none; padding: 0; background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-md); }
.vc-drawer::backdrop, .vc-modal::backdrop { background: var(--color-overlay); }
.vc-drawer { width: min(720px, 100vw); height: 100vh; max-height: 100vh; margin: 0 0 0 auto; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.vc-modal { width: min(560px, 96vw); border-radius: var(--radius-lg); }
.vc-drawer-body { padding: var(--space-4); }
.vc-skel { height: 70vh; }
.vc-d-head { display: flex; justify-content: space-between; gap: var(--space-3); }
.vc-d-meta { margin: 0; font-size: var(--text-xs); }
.vc-d-title { margin: 2px 0 4px; font-size: var(--text-lg); overflow-wrap: anywhere; }
.vc-d-sub { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--text-sm); }
.vc-d-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin: var(--space-3) 0; }
.vc-d-actions form { margin: 0; }
.vc-ext > summary { list-style: none; }
.vc-ext > summary::-webkit-details-marker { display: none; }
.vc-inline { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-end; margin: var(--space-2) 0 0; }
.vc-inline label { display: flex; flex-direction: column; font-size: var(--text-xs); gap: 2px; }
.vc-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.vc-fields label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); font-weight: 600; min-width: 0; }
.vc-fields select[multiple] { height: auto; min-height: 96px; }
.vc-fields fieldset { border: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.vc-fields legend { font-size: var(--text-sm); font-weight: 600; margin-bottom: 4px; }
.vc-wide { grid-column: 1 / -1; }
.vc-pair { display: flex; gap: var(--space-2); }
.vc-pair input { min-width: 0; flex: 1; }
.vc-fields .vc-check { flex-direction: row; align-items: center; font-weight: 400; gap: 6px; }
.vc-fields-foot { display: flex; justify-content: flex-end; }
.vc-desc { margin: var(--space-3) 0; font-size: var(--text-sm); }
.vc-desc p { margin: 0 0 var(--space-1); }
.vc-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--space-3); font-size: var(--text-sm); }
.vc-dl dt { color: var(--color-text-muted); }
.vc-dl dd { margin: 0; }
.vc-d-sec { margin-top: var(--space-5); }
.vc-d-sec h3 { font-size: var(--text-base); margin: 0 0 var(--space-2); }
.vc-comments { list-style: none; margin: 0 0 var(--space-2); padding: 0; display: grid; gap: var(--space-2); }
.vc-comments li { padding: var(--space-2) var(--space-3); background: var(--color-surface-2); border-radius: var(--radius-md); font-size: var(--text-sm); }
.vc-comments p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.vc-comment-form { display: flex; gap: var(--space-2); align-items: flex-end; }
.vc-comment-form textarea { flex: 1; }
.vc-activity { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--text-xs); }
.vc-error { color: var(--color-status-overdue-text); font-weight: 600; margin: var(--space-2) 0; }
.vc-page { padding: var(--space-4); }
.vc-crumb { font-size: var(--text-sm); margin: 0 0 var(--space-2); }
.vc-form { display: grid; gap: var(--space-3); padding: var(--space-4); }
.vc-form label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-sm); font-weight: 600; }
.vc-form-head, .vc-form-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.vc-form-head h2 { margin: 0; font-size: var(--text-lg); }
.vc-form-foot { justify-content: flex-end; }
.vc-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.vc-kpi { padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: 2px; }
.vc-kpi span { font-size: var(--text-sm); color: var(--color-text-muted); }
.vc-kpi strong { font-size: var(--text-2xl); font-variant-numeric: tabular-nums; }
.vc-kpi.is-alert strong { color: var(--color-status-overdue-text); }
.vc-load { height: 4px; background: var(--color-surface-2); border-radius: var(--radius-full); margin-top: 4px; max-width: 160px; }
.vc-load span { display: block; height: 100%; background: var(--color-accent); border-radius: var(--radius-full); }
.vc-inbox { list-style: none; margin: 0; padding: 0; }
.vc-inbox li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.vc-inbox li.is-unread .vc-link, .vc-inbox li.is-unread > .vc-inbox-main > span { font-weight: 700; }
.vc-inbox li.is-unread::before { content: ""; width: 8px; height: 8px; margin-top: 6px; border-radius: var(--radius-full); background: var(--color-accent); flex: none; }
.vc-inbox-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vc-inbox-main .vc-inline { margin: 0; }
.vc-kind { flex: none; font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: var(--radius-full); background: var(--color-surface-2); color: var(--color-text-muted); }
.vc-kind-qua_han { background: var(--color-status-overdue-soft); color: var(--color-status-overdue-text); }
.vc-kind-sap_toi_han, .vc-kind-cho_duyet { background: var(--color-status-pending-soft); color: var(--color-status-pending-text); }
.vc-kind-duoc_giao, .vc-kind-duoc_nhac { background: var(--color-accent-soft); color: var(--color-accent); }
.vc-link { border: none; background: none; padding: 0; font: inherit; color: var(--color-text); text-align: left; cursor: pointer; }
.vc-link:hover { color: var(--color-accent); text-decoration: underline; }
.pq-card { padding: var(--space-4); margin-bottom: var(--space-4); }
.pq-card h2 { font-size: var(--text-lg); margin: 0 0 var(--space-3); }
.pq-scroll { overflow-x: auto; }
.pq-table th small { display: block; font-weight: 400; }
.pq-table td { vertical-align: top; }
.pq-cell { display: flex; flex-wrap: wrap; gap: 4px; min-width: 150px; }
.pq-box { display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); font-size: 11px; cursor: pointer; }
.pq-box.is-changed { border-color: var(--color-status-pending); background: var(--color-status-pending-soft); }
.pq-box input { margin: 0; }
.pq-note { font-size: var(--text-sm); }
.pq-foot { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.pq-reasons { margin: 0; padding-left: var(--space-4); display: grid; gap: 4px; font-size: var(--text-sm); }
@media (max-width: 1023px) {
  .vc-layout { grid-template-columns: minmax(0, 1fr); }
  .vc-lists { order: 2; }
  .vc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .vc-fields { grid-template-columns: minmax(0, 1fr); }
  .vc-drawer { width: 100vw; border-radius: 0; }
  .vc-board { grid-template-columns: repeat(4, 80vw); scroll-snap-type: x mandatory; }
  .vc-col { scroll-snap-align: start; }
  .vc-cal-day { min-height: 64px; }
  .vc-cal-task { font-size: 10px; }
  .vc-row { flex-wrap: wrap; }
  .vc-row-main { flex-basis: calc(100% - 40px); }
  .vc-avatars { margin-left: 32px; }
  .vc-comment-form { flex-direction: column; align-items: stretch; }
}
.vc-bulk[hidden] { display: none; }
.vc-bulk select, .vc-bulk input[type="date"] { width: auto; min-width: 160px; }
.vc-bulk [hidden] { display: none; }

/* ---------- UI v2 shared bits: segmented control, section title (docs/ui/UI_V2.md §6) ---------- */
.seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg); }
.seg a, .seg button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 4px 12px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text-muted); font: inherit; font-size: var(--text-sm); text-decoration: none; cursor: pointer; }
.seg a:hover, .seg button:hover { color: var(--color-text); }
.seg a.active, .seg button.active, .seg button[aria-pressed="true"] { background: var(--color-surface-2); color: var(--color-text); font-weight: 600; box-shadow: var(--shadow-sm); }
.section-title { margin: 0 0 var(--space-3); font-size: var(--text-lg); }

/* ---------- UI v2 Trang chủ launcher (§2) ---------- */
.home-hello { align-items: flex-end; }
.home-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.weather-mini { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 6px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); color: var(--color-text-muted); }
.weather-mini svg { width: 16px; height: 16px; }
.weather-mini b { color: var(--color-text); }
.weather-mini-warn { display: inline-flex; align-items: center; gap: 4px; color: var(--color-accent); }
.home-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--gap-section); align-items: start; }
.home-col-main, .home-col-side { display: flex; flex-direction: column; gap: var(--gap-section); min-width: 0; }
.home-col-side > .card, .home-col-main > .card { margin: 0; }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap-grid); }
.mod-card { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.mod-card-head { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); text-decoration: none; }
.mod-card-head b { display: block; font-size: var(--text-base); }
.mod-card-head small { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
.mod-card-head:hover b { color: var(--color-accent); }
.mod-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--color-accent-soft); color: var(--color-accent); }
.mod-card-icon svg { width: 20px; height: 20px; }
.mod-phieu_xuat { background: var(--color-status-pending-soft); color: var(--color-status-pending-text); }
.mod-bao_cao { background: var(--color-status-confirmed-soft); color: var(--color-status-confirmed-text); }
.mod-hang_hoa { background: var(--color-status-admin-soft); color: var(--color-status-admin-text); }
.mod-van_ban { background: var(--color-status-unseen-soft); color: var(--color-text); }
.mod-quan_tri { background: var(--color-surface-2); color: var(--color-text-muted); }
.mod-links { list-style: none; margin: 0; padding: var(--space-2) 0 0; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; }
.mod-links li { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 34px; }
.mod-links a { color: var(--color-text); text-decoration: none; font-size: var(--text-sm); margin-right: auto; }
.mod-links a:hover { color: var(--color-accent); text-decoration: underline; }
.feed-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.feed-list { list-style: none; margin: 0; padding: 0; }
.feed-list li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.feed-list li.is-unread .feed-main > a, .feed-list li.is-unread .feed-main > span { font-weight: 600; }
.feed-list .tag { flex-shrink: 0; min-width: 84px; justify-content: center; }
.feed-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.feed-main a { color: var(--color-text); text-decoration: none; }
.feed-main a:hover { color: var(--color-accent); text-decoration: underline; }
.feed-empty { margin: var(--space-3) 0; }
.feed-all { display: inline-block; margin-top: var(--space-2); font-size: var(--text-sm); }
.vc-rows-compact .vc-row { padding: var(--space-2) 0; }
.home-waiting { display: inline-block; margin-top: var(--space-2); text-decoration: none; }
.home-support-name { margin: 0 0 var(--space-2); font-weight: 700; }
.home-support-admins { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-2); }
.home-support-list { margin: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.home-support-list div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-2); }
.home-support-list dt { color: var(--color-text-muted); }
.home-support-list dd { margin: 0; word-break: break-word; }
@media (max-width: 1023px) { .home-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .feed-list .tag { min-width: 0; } .home-hello .page-header-actions { width: 100%; } }
.vc-rows-compact .vc-avatars { display: none; }
.vc-rows-compact .vc-row-sub .vc-list-tag { display: none; }

/* ---------- UI v2 ERP data grid (§3) ---------- */
.grid { margin-bottom: var(--gap-section); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.grid-toolbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.grid-search { flex: 0 1 300px; min-width: 160px; height: 36px; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font: inherit; font-size: var(--text-sm); }
.grid-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-1); }
.grid-toolbar .btn[aria-pressed="true"] { background: var(--color-accent-soft); }
.grid-scroll { overflow: auto; max-height: calc(100vh - 220px); }
.grid-scroll:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.grid .data-table { margin: 0; border: 0; border-radius: 0; }
.grid .data-table thead th { position: sticky; top: 0; z-index: 3; background: var(--color-surface-2); box-shadow: inset 0 -1px 0 var(--color-border-strong); }
.grid .data-table th:first-child, .grid .data-table td:first-child { position: sticky; left: 0; z-index: 2; background: var(--color-surface); }
.grid .data-table thead th:first-child { z-index: 4; background: var(--color-surface-2); }
.grid .data-table tbody tr:hover td { background: var(--color-surface-2); }
.grid .data-table td, .grid .data-table th { height: var(--grid-row-h); }
.grid-compact .data-table td, .grid-compact .data-table th { height: var(--grid-row-h-compact); padding-top: 4px; padding-bottom: 4px; }
.grid-off, .grid-col-hidden { display: none !important; }
.grid-th { white-space: nowrap; }
.grid-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: inherit; }
.grid-sort::after { content: "↕"; font-size: 11px; color: var(--color-text-tertiary); }
.grid-th[aria-sort="ascending"] .grid-sort::after { content: "↑"; color: var(--color-accent); }
.grid-th[aria-sort="descending"] .grid-sort::after { content: "↓"; color: var(--color-accent); }
.grid-th[aria-sort] .grid-sort { color: var(--color-text); }
th.num .grid-sort { flex-direction: row-reverse; }
.grid-pop { position: relative; display: inline-block; }
.grid-pop > summary { list-style: none; cursor: pointer; }
.grid-pop > summary::-webkit-details-marker { display: none; }
.grid-th-filter { margin-left: 4px; }
.grid-th-filter > summary { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 4px; color: var(--color-text-tertiary); font-size: 11px; }
.grid-th-filter > summary:hover, .grid-th.is-filtered .grid-th-filter > summary { color: var(--color-accent); background: var(--color-accent-soft); }
.grid-pop-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 200px; max-height: 320px; overflow: auto; padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); text-align: left; font-weight: 400; }
.grid-th-filter .grid-pop-panel { right: auto; left: 0; }
th.num .grid-th-filter .grid-pop-panel { left: auto; right: 0; }
.grid-pop-panel input[type="search"] { width: 100%; height: 34px; padding: 0 var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font: inherit; font-size: var(--text-sm); }
.grid-col-opt { display: flex; align-items: center; gap: var(--space-2); padding: 6px var(--space-2); font-size: var(--text-sm); white-space: nowrap; cursor: pointer; }
.grid-footer { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-muted); flex-wrap: wrap; }
.grid-count { margin-right: auto; }
.grid-pager { display: flex; align-items: center; gap: 2px; }
.grid-page { min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--color-text); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.grid-page:hover:not(:disabled) { background: var(--color-surface-2); }
.grid-page.is-current { border-color: var(--color-accent); color: var(--color-accent); font-weight: 700; }
.grid-page:disabled:not(.is-current) { opacity: 0.4; cursor: default; }
.grid-gap { padding: 0 4px; }
.grid-footer select { height: 32px; padding: 0 var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font: inherit; font-size: var(--text-sm); }
.grid-empty { display: none; margin: 0; padding: var(--space-8) var(--space-4); text-align: center; color: var(--color-text-muted); }
.grid-none .grid-empty { display: block; }
.grid-none .grid-scroll tbody { display: none; }
.grid-filters { display: flex; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.grid-filters-fields { display: flex; flex-wrap: wrap; gap: var(--space-3); flex: 1 1 480px; align-items: flex-end; }
.grid-filters-fields > * { flex: 1 1 160px; min-width: 0; }
.grid-filters-fields label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); color: var(--color-text-muted); }
.grid-filters-actions { display: flex; gap: var(--space-2); margin-left: auto; }
@media (min-width: 768px) { .shell-topbar { position: relative; } }
@media (max-width: 767px) {
  .grid-scroll { max-height: none; }
  .grid-search { flex: 1 1 100%; }
  .grid-toolbar-right { margin-left: 0; }
  .grid-filters-actions { width: 100%; }
  .grid-filters-actions .btn { flex: 1; }
}
.card .grid { border: 0; border-radius: 0; background: none; margin-bottom: 0; }
.card .grid-toolbar, .card .grid-footer { padding-left: 0; padding-right: 0; }
.grid-footer select { width: auto; }
.grid-filters-fields > .vb-search, .grid-filters-fields > input[type="text"], .grid-filters-fields > input[type="search"], .grid-filters-fields > label:has(input[type="search"]) { flex: 2 1 240px; }
.banner-fold { display: block; }
.banner-fold > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-2); }
.banner-fold > summary::-webkit-details-marker { display: none; }
.banner-fold > summary svg { width: 18px; height: 18px; flex-shrink: 0; }
.banner-fold p { margin: var(--space-2) 0 0; font-size: var(--text-sm); }

/* ---------- UI v2 modal (confirm / short forms, docs/ui/UI_V2.md §6) ---------- */
dialog.modal { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-md); }
dialog.modal::backdrop { background: rgb(0 0 0 / 0.5); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border); }
.modal-head h2 { margin: 0; font-size: var(--text-lg); }
.modal-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border); }
.bk-rules-list { margin: 0; padding: var(--space-4) var(--space-5) var(--space-4) calc(var(--space-5) + var(--space-4)); display: grid; gap: var(--space-2); }

/* ---------- UI v2 Phòng họp: rooms × hours (§4) ---------- */
.bk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.bk-toolbar .cv-day-nav { flex-wrap: wrap; }
.bk-datepick input { height: 34px; padding: 0 var(--space-2); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font: inherit; font-size: var(--text-sm); }
.bk-day-label { margin: 0 var(--space-2); font-size: var(--text-lg); }
.bk-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.bk-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bk-sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.bk-sw-ok { background: var(--color-accent-soft); box-shadow: inset 3px 0 0 var(--color-accent); }
.bk-sw-mine { background: var(--color-block-mine-soft); box-shadow: inset 3px 0 0 var(--color-block-mine); }
.bk-sw-done { background: var(--color-status-unseen-soft); box-shadow: inset 3px 0 0 var(--color-text-tertiary); }
.bk-wrap { padding: 0; overflow-x: auto; }
.bk { --bk-room-w: 210px; min-width: calc(var(--bk-room-w) + var(--bk-ticks) * 20px); }
.bk-head, .bk-row { display: grid; grid-template-columns: var(--bk-room-w) minmax(0, 1fr); }
.bk-head { position: sticky; top: 0; z-index: 3; background: var(--color-surface-2); border-bottom: 1px solid var(--color-border-strong); }
.bk-corner { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; border-right: 1px solid var(--color-border); position: sticky; left: 0; background: var(--color-surface-2); }
.bk-scale { position: relative; height: 34px; }
.bk-scale span { position: absolute; top: 9px; transform: translateX(4px); font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.bk-row { border-bottom: 1px solid var(--color-border); min-height: 64px; }
.bk-row:last-child { border-bottom: 0; }
.bk-room { position: sticky; left: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: var(--space-2) var(--space-3); background: var(--color-surface); border-right: 1px solid var(--color-border); min-width: 0; }
.bk-room-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bk-room-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-room-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: var(--text-xs); color: var(--color-text-muted); }
.bk-room-meta > span:first-child { display: inline-flex; align-items: center; gap: 3px; }
.bk-chip { display: inline-flex; padding: 0 6px; border-radius: var(--radius-full); background: var(--color-surface-2); color: var(--color-text-muted); font-size: 11px; line-height: 18px; white-space: nowrap; }
.bk-info { position: relative; }
.bk-info > summary { list-style: none; display: inline-flex; cursor: pointer; color: var(--color-text-tertiary); border-radius: 4px; }
.bk-info > summary::-webkit-details-marker { display: none; }
.bk-info > summary:hover { color: var(--color-accent); }
.bk-info-panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: 240px; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: var(--text-sm); }
.bk-info-panel p { margin: var(--space-1) 0; color: var(--color-text-muted); }
.bk-track { position: relative; cursor: crosshair; touch-action: pan-y;
  background-image: linear-gradient(to right, var(--color-border-strong) 1px, transparent 1px), linear-gradient(to right, var(--color-border) 1px, transparent 1px);
  background-size: calc(100% / var(--bk-hours)) 100%, calc(100% / var(--bk-ticks)) 100%; }
.bk-block { position: absolute; top: 6px; bottom: 6px; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 6px; padding: 2px 8px; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-accent-soft); box-shadow: inset 3px 0 0 var(--color-accent); color: var(--color-text); text-decoration: none; font-size: var(--text-xs); cursor: pointer; }
.bk-block b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); }
.bk-block span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-muted); }
.bk-block:hover, .bk-block:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 0; z-index: 2; }
.bk-block.is-mine { background: var(--color-block-mine-soft); box-shadow: inset 3px 0 0 var(--color-block-mine); }
.bk-block.is-done { background: var(--color-status-unseen-soft); box-shadow: inset 3px 0 0 var(--color-text-tertiary); }
.bk-block.is-done b { color: var(--color-text-muted); }
.bk-block.is-other { opacity: 0.35; }
.bk-now { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; z-index: 2; background: var(--color-now-line); pointer-events: none; }
.bk-row:first-of-type .bk-now::before { content: ""; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-now-line); }
.bk-ghost { position: absolute; top: 6px; bottom: 6px; z-index: 3; display: flex; align-items: center; padding: 0 8px; border: 2px dashed var(--color-accent); border-radius: var(--radius-sm); background: var(--color-accent-soft); color: var(--color-accent); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; pointer-events: none; }
.bk-add { position: absolute; right: 4px; bottom: 2px; font-size: 11px; opacity: 0; }
.bk-add:focus { opacity: 1; z-index: 4; padding: 2px 6px; background: var(--color-surface); border-radius: 4px; }
.bk-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--gap-grid); }
.bk-card { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.bk-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); }
.bk-card-head h3 { margin: 0; font-size: var(--text-base); }
.bk-card-head p { margin: 2px 0 0; font-size: var(--text-xs); }
.bk-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.bk-card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--text-sm); flex: 1; }
.bk-card-list li { display: flex; gap: var(--space-2); }
.bk-card-list li.is-other { opacity: 0.4; }
.bk-card-list .num { flex-shrink: 0; color: var(--color-text-muted); }
.bk-card .btn { align-self: flex-start; }
@media (max-width: 767px) { .bk-wrap { display: none; } }
@media (min-width: 768px) { .bk-wrap ~ .cv-agenda { display: none; } }

/* ---------- UI v2 Giao việc (§5): grid rows, people, ERP form layout in the drawer ---------- */
.vc-table .vc-td-tick { width: 64px; white-space: nowrap; }
.vc-table .vc-td-tick > * { vertical-align: middle; }
.vc-table .vc-td-tick .vc-tick-form { display: inline-block; }
.vc-table .vc-td-title { min-width: 240px; }
.vc-table .vc-td-title .vc-title { font-weight: 600; }
.vc-table tr.is-done .vc-title { color: var(--color-text-muted); text-decoration: line-through; }
.vc-table .vc-sub-count, .vc-table .vc-blocked { margin-left: var(--space-2); }
.vc-people { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
#vc-quick { margin-bottom: var(--space-3); }
.vc-members { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.vc-members legend { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.vc-member-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: var(--space-2); }
@media (min-width: 768px) {
  .vc-drawer .vc-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .vc-drawer .vc-fields > label { display: grid; grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
  .vc-drawer .vc-fields > label > select[multiple], .vc-drawer .vc-fields > label > textarea { align-self: start; }
  .vc-drawer .vc-fields > fieldset { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: var(--space-3); border: 0; padding: 0; margin: 0; }
  .vc-drawer .vc-fields > fieldset > legend { float: left; font-size: var(--text-sm); color: var(--color-text-muted); }
}
@media (min-width: 768px) {
  .vc-drawer .vc-fields > fieldset { display: block; position: relative; padding-left: 152px; }
  .vc-drawer .vc-fields > fieldset > legend { position: absolute; left: 0; top: 2px; float: none; padding: 0; }
  .vc-drawer .vc-fields > fieldset .vc-check { display: inline-flex; align-items: center; gap: 6px; margin: 0 var(--space-4) var(--space-2) 0; }
}
.ui-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; }

/* ---------- Phiếu nhập — Online đã nhận (2026-11-03) ---------- */
.pn-open { padding: 0; border: 0; background: none; color: var(--color-accent); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.pn-open:hover { text-decoration: underline; }
.pn-table .tag { margin-left: 6px; }
.pn-drawer-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.pn-drawer-head h2 { margin: 0; font-size: var(--text-lg); }
.pn-slip-head h3 { margin: 0; }
.pn-slip-head p { margin: var(--space-1) 0; }
.pn-slip-tot { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.pn-slip-tot b { color: var(--color-text); }
.pn-other { margin: var(--space-2) 0 var(--space-3); font-weight: 400; }
.pn-quality { margin-top: var(--gap-section); }
.pn-quality > summary { cursor: pointer; }
.pn-quality table { margin-top: var(--space-3); }

/* ---------- Weather map v3 (2026-11-04): home card + /thoi-tiet ---------- */
.wx3-card { cursor: pointer; display: flex; flex-direction: column; gap: var(--space-2); }
.wx3-card:hover { border-color: var(--color-border-strong); }
.wx3-mini { height: 150px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-2); pointer-events: none; }
.wx3-card-body .load-error { margin: 0 0 var(--space-2); }
.wx3-card [data-wx3-ask] { align-self: flex-start; }
.wx3-now { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.wx3-now-ico { font-size: 1.6rem; line-height: 1; align-self: center; }
.wx3-now b { font-size: var(--text-xl); }
.wx3-now span:last-child { color: var(--color-text-muted); font-size: var(--text-sm); }
.wx3-sum { margin: 2px 0 0; font-size: var(--text-sm); }
.wx3-time { margin: 2px 0 0; font-size: var(--text-xs); }
.wx3-attr { margin: 0; font-size: 11px; color: var(--color-text-tertiary); }
.wx3-attr a { color: inherit; }
.wx3-stamp { font-size: var(--text-sm); align-self: center; }
.wx3-page { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: var(--gap-grid); align-items: stretch; }
.wx3-map-card { padding: 0; overflow: hidden; margin: 0; }
.wx3-tools { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.wx3-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); cursor: pointer; }
.wx3-rtime { font-size: var(--text-sm); }
.wx3-map { height: 70vh; min-height: 520px; background: var(--color-surface-2); }
.wx3-side { margin: 0; }
.wx3-side-title { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.wx3-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin: var(--space-3) 0; }
.wx3-stats div { padding: var(--space-2); border-radius: var(--radius-sm); background: var(--color-surface-2); }
.wx3-stats dt { font-size: var(--text-xs); color: var(--color-text-muted); }
.wx3-stats dd { margin: 2px 0 0; font-weight: 700; }
.wx3-sub { margin: var(--space-3) 0 var(--space-2); font-size: var(--text-base); }
.wx3-days { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wx3-days li { display: grid; grid-template-columns: auto 24px minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-sm); padding: 6px 0; border-top: 1px solid var(--color-border); }
.wx3-days li:first-child { border-top: 0; }
.wx3-day-label { white-space: nowrap; font-weight: 600; }
.wx3-day-text { color: var(--color-text-muted); overflow-wrap: anywhere; }
.wx3-day-temp { white-space: nowrap; font-weight: 700; }
.wx3-rain { color: var(--color-accent); text-align: right; }
.wx3-note { margin-top: var(--space-3); font-size: var(--text-sm); }
/* markers */
.wx3-pin-wrap { background: none; border: 0; }
.wx3-pin { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 4px; border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-sm); font-size: 12px; white-space: nowrap; line-height: 18px; }
.wx3-pin b { font-weight: 700; }
.wx3-pin.is-me { background: var(--color-accent); color: var(--color-accent-contrast); border-color: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-soft); }
.wx3-pin i { font-style: normal; font-weight: 700; font-size: 11px; }
.wx3-pop b { display: block; }
.wx3-pop dl { display: grid; grid-template-columns: auto auto; gap: 2px var(--space-3); margin: 6px 0 0; }
.wx3-pop dt { color: var(--color-text-muted); }
.wx3-page .leaflet-popup-content-wrapper, .wx3-page .leaflet-popup-tip { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-md); }
.wx3-page .leaflet-container a.leaflet-popup-close-button { color: var(--color-text-muted); }
.wx3-pop dd { margin: 0; font-weight: 600; }
.leaflet-container { font-family: var(--font-sans); }
@media (max-width: 1023px) { .wx3-page { grid-template-columns: minmax(0, 1fr); } .wx3-map { height: 64vh; min-height: 420px; } }
@media (max-width: 767px) { .wx3-map { height: 62vh; min-height: 320px; } }
.wx3-card [data-wx3-ask][hidden], .wx3-side [hidden] { display: none; }
.wx3-sea-label { background: none; border: 0; }
.wx3-sea-label span { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-size: 11px; font-style: italic; color: var(--color-text-muted); pointer-events: none; text-shadow: 0 0 3px var(--color-bg); }
.wx3-sea-label.is-small span { font-size: 8px; }
.wx3-pin .is-me-badge { margin-left: 2px; padding: 0 5px; border-radius: var(--radius-full); background: var(--color-accent); color: var(--color-accent-contrast); }
.wx3-pin.has-me { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.wx3-pop-me { display: block; margin-top: 4px; font-size: var(--text-xs); color: var(--color-accent); }
.wx3-no-outline { background: var(--color-bg); }
.wx3-days .wx3-rain { grid-column: 3 / -1; text-align: left; font-size: var(--text-xs); }
.wx3-page [data-wx3-play][hidden] { display: none; }
.wx3-page .leaflet-control-attribution, .wx3-page .leaflet-bar a { background: var(--color-surface); color: var(--color-text-muted); border-color: var(--color-border-strong); }
.wx3-page .leaflet-control-attribution a { color: var(--color-accent); }
/* v3.1 (2026-11-04): province choropleth, metric switcher, legend, anchored city pins, 7-day charts */
.wx3-tools { row-gap: var(--space-2); }
.wx3-metrics-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.wx3-metrics { flex-wrap: nowrap; white-space: nowrap; }
.wx3-layers { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.wx3-legend { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-sm); font-size: var(--text-xs); max-width: 220px; }
.wx3-legend[hidden] { display: none; }
.wx3-legend-title { font-weight: 600; margin-bottom: 4px; }
.wx3-legend-title:not(:first-child) { margin-top: var(--space-2); }
.wx3-legend-bins { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wx3-legend-bins li { display: flex; align-items: center; gap: 6px; color: var(--color-text-muted); }
.wx3-legend-bins i { width: 18px; height: 12px; border-radius: 3px; border: 1px solid var(--wx-border); flex: none; }
.wx3-legend-radar { height: 10px; border-radius: 3px; opacity: 0.85;
  background: linear-gradient(90deg, var(--wx-radar-1), var(--wx-radar-2), var(--wx-radar-3), var(--wx-radar-4), var(--wx-radar-5), var(--wx-radar-6)); }
.wx3-legend-radar-scale { display: flex; justify-content: space-between; color: var(--color-text-muted); margin-top: 2px; }
.wx3-page .leaflet-tooltip.wx3-tip { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-md); font-size: var(--text-sm); }
.wx3-page .leaflet-tooltip.wx3-tip::before { display: none; }
.wx3-pin.is-anchored { transform: translate(-9px, -50%); padding-left: 18px; }
.wx3-pin.is-anchored::before { content: ""; position: absolute; left: 5px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--color-text); box-shadow: 0 0 0 2px var(--color-surface); }
.wx3-pin.is-anchored.is-left { transform: translate(calc(-100% + 9px), -50%); padding-left: 7px; padding-right: 18px; }
.wx3-pin.is-anchored.is-left::before { left: auto; right: 5px; }
.wx3-pin.is-anchored.is-me::before { background: var(--color-accent-contrast); }
.wx3-chart { display: block; width: 100%; height: auto; overflow: visible; }
.wx3-chart .wx3-ch-max, .wx3-chart .wx3-ch-min { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.wx3-chart .wx3-ch-max { stroke: var(--wx-temp-5); }
.wx3-chart .wx3-ch-min { stroke: var(--wx-temp-1); }
.wx3-chart .wx3-ch-max-dot { fill: var(--wx-temp-5); stroke: var(--color-surface); stroke-width: 2; }
.wx3-chart .wx3-ch-min-dot { fill: var(--wx-temp-1); stroke: var(--color-surface); stroke-width: 2; }
.wx3-chart .wx3-ch-bar { fill: var(--wx-rain-4); }
.wx3-chart .wx3-ch-base { stroke: var(--color-border-strong); stroke-width: 1; }
.wx3-chart text { font-size: 11px; fill: var(--color-text-muted); font-family: var(--font-sans); }
.wx3-chart .wx3-ch-val { fill: var(--color-text); font-weight: 600; }
.wx3-ch-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin: var(--space-2) 0 2px; font-size: var(--text-xs); color: var(--color-text-muted); }
.wx3-ch-key { display: inline-flex; align-items: center; gap: 4px; }
.wx3-ch-key i { display: inline-block; width: 14px; height: 2px; border-radius: 1px; margin-left: 6px; }
.wx3-ch-key i.is-max { background: var(--wx-temp-5); }
.wx3-ch-key i.is-min { background: var(--wx-temp-1); }
@media (max-width: 767px) { .wx3-tools { padding: var(--space-2); } .wx3-legend { max-width: none; padding: 6px 8px; }
  .wx3-legend-bins { grid-auto-flow: column; gap: 4px; } .wx3-legend-bins li { flex-direction: column; gap: 2px; font-size: 10px; }
  .wx3-legend-bins i { width: 26px; height: 10px; } }