:root {
  /* Apple-inspired ops — neutrals + one system blue; opaque chrome for iOS PWA */
  --chrome: #1d1d1f;
  --chrome-2: #2c2c2e;
  --chrome-3: #3a3a3c;
  --electric: #0071e3;
  --primary: #0071e3;
  --primary-600: #0077ed;
  --primary-700: #006edb;
  --primary-50: #eaf2fc;
  --primary-100: #d7e8fa;
  --primary-200: #c5d6f5;
  --ring: rgba(0, 113, 227, 0.22);
  --accent: #0071e3;
  --accent-soft: #eaf2fc;
  /* Thanh menu (header + sidebar) — early.js ghi đè theo màu admin chọn */
  --menu-bg: #1d1d1f;
  --menu-bg-2: #2c2c2e;
  --menu-bg-3: #3a3a3c;
  --menu-fg: #ffffff;
  --menu-muted: #a1a1a6;
  --menu-subtle: #636366;
  --menu-hover: rgba(255,255,255,.08);
  --menu-hover-2: rgba(255,255,255,.12);
  --menu-border: rgba(255,255,255,.08);
  --menu-ctrl-border: #48484a;
  --menu-active-bg: var(--primary);
  --menu-active-fg: #ffffff;
  --menu-active-count: rgba(255,255,255,.24);
  --menu-scroll: rgba(255,255,255,.22);
  --sidebar: var(--menu-bg);
  --sidebar-2: var(--menu-bg-2);
  --sidebar-text: var(--menu-muted);
  --bg: #f5f5f7;
  --bg-accent: #efeff2;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --border: #d2d2d7;
  --border-strong: #c7c7cc;
  --text: #1d1d1f;
  --text-2: #424245;
  --muted: #86868b;
  --danger: #d70015;
  --success: #248a3d;
  --warning: #b25000;
  --radius: 12px;
  --radius-sm: 10px;
  --radius-lg: 16px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .06);
  --shadow-md: 0 4px 14px -6px rgba(0, 0, 0, .10);
  --shadow-lg: 0 18px 40px -16px rgba(0, 0, 0, .22);
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --app-header-h: 52px;
  --sidebar-w: 240px;
  --sidebar-collapsed-w: 56px;
  --bp-mobile: 900px;
  --touch-min: 44px;
  --content-pad-x: 24px;
  --content-pad-y: 22px;
  /* Safari: 100dvh. iOS PWA standalone overrides via bootstrap/JS. */
  --app-height: 100dvh;

  /* Status — muted pastel, Apple-like (no neon).
     Mọi cặp bg/fg đều đạt WCAG AA (>= 4.5:1). Không cặp nào trùng nhau. */
  --slate-bg: #f2f2f7; --slate-fg: #636366;
  --blue-bg: #eaf2fc; --blue-fg: #0066cc;
  --sky-bg: #e4f4fe; --sky-fg: #00688f;
  --amber-bg: #fff6e5; --amber-fg: #8a6200;
  --orange-bg: #fff1e6; --orange-fg: #9a4a00;
  --violet-bg: #efedfe; --violet-fg: #5145cd;
  --purple-bg: #f6ecfb; --purple-fg: #7b2d8e;
  --green-bg: #e8f8ed; --green-fg: #1f7a34;
  --emerald-bg: #1f7a34; --emerald-fg: #ffffff;
  --teal-bg: #e6f7f5; --teal-fg: #0a7a6e;
  --red-bg: #fdeced; --red-fg: #c41e2a;
  --cyan-bg: #e8f6fa; --cyan-fg: #0a6e82;
  --indigo-bg: #eef0f8; --indigo-fg: #3a3f6e;
  --pink-bg: #f8eef1; --pink-fg: #8a3a52;
  --stone-bg: #f0efed; --stone-fg: #6b6660;
}

* { box-sizing: border-box; }
html {
  margin: 0; padding: 0;
  width: 100%; max-width: 100%;
  height: 100%;
  background-color: var(--menu-bg); /* khớp status bar iOS, tránh vùng notch bị mờ/lớp trong suốt */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body {
  overflow-x: clip;
  background-color: var(--menu-bg);
}
body {
  margin: 0; padding: 0;
  width: 100%; max-width: 100%;
  height: 100%;
  font-family: var(--font); font-size: 14px; color: var(--text); line-height: 1.47;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; font-variant-numeric: lining-nums; font-feature-settings: "zero" 0;
  overscroll-behavior: none;
}
/* Không position:fixed trên body/#app — iOS 26/27 sẽ clip shell theo lying viewport */
body:has(.shell) {
  background-color: var(--menu-bg);
  overflow: hidden;
  height: 100%;
  touch-action: manipulation;
}
#app, .shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
/* Header là sibling của .shell — không nằm trong overflow:hidden của shell */
#app:has(> .app-header) {
  display: flex;
  flex-direction: column;
  height: var(--app-height, 100dvh);
  max-height: var(--app-height, 100dvh);
  min-height: 0;
  overflow: hidden;
  position: relative;
  background-color: var(--menu-bg);
}
#app:has(> .app-header) > .app-header { flex: none; }
#app:has(> .app-header) > .shell {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
}
#app:not(:has(> .app-header)) {
  position: relative;
  min-height: var(--app-height, 100dvh);
}
.shell {
  display: flex;
  flex-direction: column;
  height: var(--app-height, 100dvh);
  max-height: var(--app-height, 100dvh);
  overflow: hidden;
  background-color: var(--bg);
  position: relative;
}

/* iOS PWA: header portal ra body — layer riêng, không bị #app/#shell clip/raster */
body.pwa-header-ported {
  background-color: var(--menu-bg);
}
body.pwa-header-ported > .app-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  width: 100%;
  height: var(--app-header-h, 52px);
  padding-top: 0;
  margin: 0;
  background-color: var(--menu-bg);
  background-image: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: auto;
}
body.pwa-header-ported #app {
  display: flex;
  flex-direction: column;
  height: var(--app-height, 100vh);
  max-height: var(--app-height, 100vh);
  padding-top: var(--app-header-h, 52px);
  box-sizing: border-box;
  overflow: hidden;
  background-color: var(--bg);
}
body.pwa-header-ported #app > .shell {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
}

/*
  PWA standalone + status-bar-style=black (đặc): webview nằm dưới status bar.
  Không dùng black-translucent (lớp kính mờ).

  QUAN TRỌNG (iOS 26/27): KHÔNG gắn filter / backdrop-filter / transform lên
  .app-header hay ancestor — kể cả giá trị none. WebKit vẫn promote layer
  và raster sai → chữ/icon header nhòe trong khi status bar hệ thống vẫn nét.
*/
html.pwa-standalone,
html.pwa-standalone body,
html.pwa-standalone #app,
html.pwa-ios,
html.pwa-ios body,
html.pwa-ios #app {
  background-color: var(--menu-bg);
}
html.pwa-standalone .shell {
  background-color: var(--bg);
}
html.pwa-standalone .app-header,
html.pwa-ios .app-header {
  height: var(--app-header-h, 52px);
  padding-top: 0;
  padding-right: max(14px, env(safe-area-inset-right, 0px));
  background-color: var(--menu-bg);
  background-image: none;
  /* Không khai báo filter/backdrop-filter/transform ở đây */
  -webkit-font-smoothing: auto;
}
@media (display-mode: standalone), (display-mode: fullscreen) {
  html { background-color: var(--menu-bg); }
  html body, html #app { background-color: var(--menu-bg); }
  .shell {
    background-color: var(--bg);
    height: var(--app-height, 100vh);
    max-height: var(--app-height, 100vh);
  }
  .app-header {
    height: var(--app-header-h, 52px);
    padding-top: 0;
    padding-right: max(14px, env(safe-area-inset-right, 0px));
    background-color: var(--menu-bg);
    background-image: none;
    -webkit-font-smoothing: auto;
  }
}
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; }
button, input, select, textarea { font: inherit; }
.input, .select, .textarea { color: var(--text); }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.boot {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 28px;
  height: var(--app-height, 100dvh);
  min-height: var(--app-height, 100dvh);
  background: var(--chrome);
  color: #8aa3b8;
  user-select: none;
}
.boot-brand {
  display: grid;
  justify-items: center;
  gap: 14px;
  transform-origin: center;
  animation: boot-grow 1.15s cubic-bezier(.22, 1, .36, 1) both;
}
.boot-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.boot-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}
.boot-msg {
  font-size: 13px;
  color: #86868b;
  animation: boot-fade 1.2s ease .35s both;
}
@keyframes boot-grow {
  0% { transform: scale(0.72); opacity: 0.55; }
  70% { transform: scale(1.06); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes boot-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .boot-brand, .boot-msg { animation: none; }
}
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12.5px; font-variant-numeric: lining-nums; font-feature-settings: "zero" 0; }
.right { text-align: right; }
.center { text-align: center; }
.strong { font-weight: 600; }
.danger-text { color: var(--danger); }
.success-text { color: var(--success); }
.hidden { display: none !important; }

/* ---------- Layout (DMS-style) ---------- */
.shell-body {
  display: grid;
  grid-template-columns: 240px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  transition: grid-template-columns .2s ease;
}
.main-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}
.main-pane > .content {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
}

.app-header {
  height: calc(var(--app-header-h, 52px) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(14px, env(safe-area-inset-right, 0px)) 0 0;
  background-color: var(--menu-bg);
  background-image: none;
  color: #fff; display: flex; align-items: center; gap: 0;
  position: relative; z-index: 40; flex: none;
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  /* Opaque paint — no frosted glass (iOS PWA-safe) */
  -webkit-font-smoothing: auto;
}
.app-brand {
  display: flex; align-items: center; gap: 10px;
  width: 240px; flex: none; box-sizing: border-box;
  height: 52px; min-height: 52px; max-height: 52px;
  padding: 0 42px 0 12px;
  border-right: 1px solid rgba(255,255,255,.10);
  min-width: 0;
  position: relative;
  overflow: visible;
}
.app-header .brand-logo {
  width: 40px; height: 40px; border-radius: 9px; overflow: hidden; flex: none;
  background: transparent; display: grid; place-items: center;
}
.app-header .brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.login .brand-logo {
  width: 48px; height: 48px; border-radius: 10px; overflow: hidden; flex: none;
  background: transparent; display: grid; place-items: center;
}
.login .brand-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.app-header .brand-text { min-width: 0; line-height: 1.15; overflow: hidden; }
.app-header .brand-name { font-family: var(--font-display); color: #fff; font-weight: 650; font-size: 16px; white-space: nowrap; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; }
.app-header .brand-sub { font-size: 11px; color: #86868b; white-space: nowrap; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }
.app-header-divider { display: none; }
.app-page-title {
  font-size: 14px; font-weight: 550; color: #f5f5f7; margin: 0 0 0 16px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.app-header .spacer { flex: 1; min-width: 8px; }
.app-header .topbar-tools { padding-right: 0; }
.app-header .tool-icon { color: #a1a1a6; }
.app-header .tool-icon:hover { background: rgba(255,255,255,.08); color: #fff; }
.app-header .lang-pill { background: rgba(255,255,255,.1); color: #f5f5f7; }
.app-header .lang-pill:hover { background: rgba(255,255,255,.16); }
.app-header .branch-select.select {
  background: var(--chrome-2); border-color: #48484a; color: #f5f5f7;
  height: 28px; min-height: 28px; font-size: 12px; padding: 0 6px;
  width: auto; min-width: 0; max-width: min(200px, 28vw); margin: 0;
}
.app-header .branch-select.select option,
.app-header .branch-select.select optgroup {
  color: #16223a !important;
  background: #fff !important;
}
.app-header .branch-label { background: var(--chrome-2); color: #f5f5f7; border: 0; }
.app-header .avatar { background: var(--chrome-3); color: #f5f5f7; border-color: #636366; }
.app-header .user-chip .avatar { border-color: #636366; }
.app-header .user-chip:hover { background: rgba(255,255,255,.08); border-color: transparent; }

.sidebar {
  background: var(--sidebar); color: var(--sidebar-text); display: flex; flex-direction: column;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  overflow: hidden;
  z-index: 30;
  border-right: 1px solid rgba(255,255,255,.08);
}
/* ‹ ở mép phải vùng logo — flex, KHÔNG transform (tránh blur compositing header iOS) */
.sidebar-toggle {
  position: absolute; top: 0; right: 6px; bottom: 0;
  margin: auto 0;
  width: 30px; height: 30px; border: 0; border-radius: 8px;
  background: transparent; color: #a1a1a6;
  display: grid; place-items: center; cursor: pointer; padding: 0; flex: none;
  z-index: 2;
}
.sidebar-toggle:hover { background: rgba(255,255,255,.12); color: #fff; }
.sidebar-toggle svg.i { width: 16px; height: 16px; stroke: currentColor; }
body.sidebar-collapsed .sidebar-toggle { display: none; }

/* ☰ trong cột sidebar, căn giữa, ngay trên icon Tổng quan khi thu gọn */
.sidebar-rail-head {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 8px 8px 2px;
}
.sidebar-rail-toggle {
  width: 36px; height: 36px; border: 0; border-radius: 10px;
  background: rgba(255,255,255,.06); color: #f5f5f7;
  display: grid; place-items: center; cursor: pointer; padding: 0;
}
.sidebar-rail-toggle:hover { background: rgba(255,255,255,.12); color: #fff; }
.sidebar-rail-toggle svg.i { width: 18px; height: 18px; stroke: currentColor; }
body.sidebar-collapsed .sidebar-rail-head { display: flex; }

/* Desktop: mobile dùng .menu-btn; desktop thu gọn dùng .sidebar-rail-toggle */
.menu-btn { display: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: #a1a1a6; place-items: center; cursor: pointer; padding: 0; flex: none; }
.menu-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.menu-btn svg.i { width: 18px; height: 18px; }

.nav {
  padding: 4px 8px 16px;
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.22) transparent;
}
.nav::-webkit-scrollbar { width: 6px; height: 6px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.22);
  border-radius: 8px;
}
.nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.35); }
.nav::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.nav::-webkit-scrollbar-corner { background: transparent; }
.nav-group { margin-top: 10px; }
.nav-group:first-child { margin-top: 0; }
.nav-group-title {
  font-size: 11px; text-transform: none; letter-spacing: -.01em; color: #636366;
  padding: 0 10px 6px; font-weight: 600; white-space: nowrap;
}
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px;
  color: #b7c3d6; font-weight: 500; margin-bottom: 2px; white-space: nowrap;
}
.nav a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav a.active { background: var(--primary); color: #fff; box-shadow: none; }
.nav a .count { margin-left: auto; background: rgba(255,255,255,.14); color: #fff; font-size: 11px; padding: 1px 7px; border-radius: 10px; }

/* Collapsed = icon rail (DMS) */
body.sidebar-collapsed .shell-body { grid-template-columns: 56px 1fr; }
body.sidebar-collapsed .app-brand {
  width: 56px; padding: 0; justify-content: center;
}
body.sidebar-collapsed .app-header .brand-logo { width: 36px; height: 36px; }
body.sidebar-collapsed .app-page-title { margin-left: 16px; }
body.sidebar-collapsed .app-header .brand-text { display: none; }
body.sidebar-collapsed .nav-group-title,
body.sidebar-collapsed .nav a span,
body.sidebar-collapsed .nav a .count { display: none; }
body.sidebar-collapsed .nav { padding: 4px 8px 12px; }
body.sidebar-collapsed .nav a { justify-content: center; padding: 10px; gap: 0; border-radius: 10px; }
body.sidebar-collapsed .nav-group { margin-top: 6px; }

.branch-select.select {
  width: auto; min-width: 0; max-width: min(200px, 28vw); height: 28px; min-height: 28px;
  font-size: 12px; padding: 0 6px; flex: none; margin: 0;
}
.topbar-tools .branch-select.select { order: 0; }
.branch-label {
  font-size: 11px; height: 28px; max-width: 88px; padding: 0 8px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0;
}
.topbar-tools { display: flex; align-items: center; gap: 4px; flex: none; }
.tool-icon { width: 30px; height: 30px; border: 0; background: transparent; color: var(--text); display: grid; place-items: center; border-radius: 8px; cursor: pointer; padding: 0; }
.tool-icon:hover { background: var(--bg); color: var(--primary); }
.tool-btn { width: 30px; height: 30px; border: 1px solid var(--border); background: var(--surface); color: var(--text); display: grid; place-items: center; border-radius: 8px; cursor: pointer; padding: 0; box-shadow: var(--shadow); }
.tool-btn:hover { border-color: var(--border-strong); color: var(--primary); }
.lang-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--primary-50); color: var(--primary-700); font-weight: 650; font-size: 12px; cursor: pointer; letter-spacing: .02em; }
.lang-pill:hover { background: var(--primary-100); }
.flag-vn { width: 22px; height: 15px; border-radius: 2px; background: #da251d; position: relative; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.flag-vn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; transform: translate(-50%, -50%); background: #ffff00; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.user-wrap { position: relative; flex: none; }
.user-chip { display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 50%; cursor: pointer; border: 1px solid transparent; background: none; -webkit-tap-highlight-color: transparent; }
.user-chip:hover { background: var(--bg); border-color: var(--border); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primary-50); color: var(--primary-700); display: grid; place-items: center; font-weight: 650; font-size: 11px; flex: none; letter-spacing: .02em; pointer-events: none; }
.avatar.sm { width: 26px; height: 26px; font-size: 11px; }
.avatar.avatar-img { overflow: hidden; padding: 0; background: var(--surface-2, #f1f5f9) !important; }
.avatar.avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.avatar.avatar-xl { width: 112px; height: 112px; font-size: 34px; }
.avatar-edit { display: grid; gap: 14px; justify-items: center; }
.cost-box { display: grid; gap: 6px; }
.cost-none { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2, #475569); cursor: pointer; user-select: none; width: fit-content; }
.cost-none input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary-600, #123a6b); }
.cost-box input[readonly] { background: var(--surface-2, #f1f5f9); color: var(--text-3, #64748b); }
.whats-new { display: grid; gap: 14px; }
.wn-item { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.wn-item b { display: block; margin-bottom: 2px; }
.wn-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--primary-50); color: var(--primary-700); }
.wn-ic svg { width: 18px; height: 18px; }
.user-chip .avatar { border: 1.5px solid var(--primary-100); }
.user-meta { display: flex; flex-direction: column; align-items: flex-start; text-align: left; line-height: 1.15; gap: 0; min-width: 0; }
.user-meta .n { font-weight: 600; font-size: 12.5px; color: var(--text); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.user-meta .r { font-size: 11px; font-weight: 400; color: var(--muted); white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.dd-user { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--text); }
.dd-user .strong { color: var(--text); }
.dd-user .muted { color: var(--muted); }
.dropdown {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: #fff; color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); min-width: 240px; max-width: min(320px, calc(100vw - 16px)); padding: 6px; z-index: 50;
}
/* Menu tài khoản: portal + fixed — không bị header overflow cắt */
.dropdown.user-dropdown,
#user-dd.dropdown {
  position: fixed;
  z-index: 300;
  max-height: calc(100dvh - 72px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.dropdown button, .dropdown a {
  display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 10px;
  border: 0; background: none; border-radius: 7px; cursor: pointer; text-align: left;
  color: var(--text);
}
.dropdown button:hover, .dropdown a:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.dropdown hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; }
.dropdown svg.i { color: var(--text-2); }

/* Header overlays must not inherit white text from .app-header */
.app-header .dropdown,
.app-header .dropdown .strong,
.app-header .dropdown button,
.app-header .dropdown a { color: var(--text); }
.app-header .dropdown .muted { color: var(--muted); }
.app-header .dropdown .avatar { background: var(--primary-50); color: var(--primary-600); border-color: var(--primary-100); }

body.theme-dark {
  --bg: #0f172a;
  --surface: #1e293b;
  --border: #334155;
  --border-strong: #475569;
  --text: #e2e8f0;
  --text-2: #cbd5e1;
  --muted: #94a3b8;
  /* Tông primary phải theo hệ xanh như theme sáng — trước đây là teal nên
     chữ xanh #0077ed trên nền teal chỉ đạt tương phản 2.19 (dưới chuẩn AA). */
  --primary-50: #16324f;
  --primary-100: #1c4370;
  --primary-200: #2a5c8f;
  --primary-600: #7cc0ff;
  /* Mỗi màu một sắc độ riêng, nền luôn nổi khỏi thẻ #1e293b, chữ đạt AA. */
  --slate-bg: #334155; --slate-fg: #e2e8f0;
  --blue-bg: #16375e; --blue-fg: #93c5fd;
  --sky-bg: #0d3f52; --sky-fg: #7dd3fc;
  --amber-bg: #53290a; --amber-fg: #fbbf24;
  --orange-bg: #431407; --orange-fg: #fb923c;
  --violet-bg: #2e2a5c; --violet-fg: #c4b5fd;
  --purple-bg: #4a2659; --purple-fg: #e9b5f5;
  --green-bg: #14532d; --green-fg: #86efac;
  --emerald-bg: #15803d; --emerald-fg: #ffffff;
  --teal-bg: #0f4a44; --teal-fg: #5eead4;
  --red-bg: #5c1616; --red-fg: #fca5a5;
  --cyan-bg: #0e4a52; --cyan-fg: #67e8f9;
  --indigo-bg: #242a54; --indigo-fg: #a5b4fc;
  --pink-bg: #5a1832; --pink-fg: #f9a8c8;
  --stone-bg: #3a3734; --stone-fg: #d6d3d1;
  color-scheme: dark;
}
/* Nền tối làm hình khối chip dễ chìm — viền mờ theo chính màu chữ giữ cho
   chip luôn đọc được thành một khối riêng. */
body.theme-dark .badge,
body.theme-dark .tag { border: 1px solid rgba(255, 255, 255, .10); }
body.theme-dark .card,
body.theme-dark .dropdown { background: var(--surface); color: var(--text); }
body.theme-dark .table th { background: #162032; color: var(--muted); }
body.theme-dark .table td { border-color: var(--border); }
body.theme-dark .input,
body.theme-dark .select,
body.theme-dark .textarea {
  background: #0b1220;
  color: var(--text);
  border-color: var(--border-strong);
}
body.theme-dark .select option,
body.theme-dark .select optgroup {
  background: #0b1220;
  color: #e2e8f0;
}
body.theme-dark .input::placeholder,
body.theme-dark .textarea::placeholder { color: #64748b; }
body.theme-dark .input[readonly] { background: #111827; }
body.theme-dark .btn {
  background: #1e293b;
  color: var(--text);
  border-color: var(--border-strong);
}
body.theme-dark .btn:hover { background: #273449; border-color: #64748b; }
body.theme-dark .btn-primary { background: var(--primary); border-color: transparent; color: #fff; box-shadow: none; }
body.theme-dark .btn-primary:hover { background: var(--primary-600); border-color: transparent; }
body.theme-dark .btn-ghost:hover { background: rgba(255,255,255,.06); }
body.theme-dark .acc-grid {
  background: #111827;
  border-color: var(--border);
}
body.theme-dark .acc-cell-lab { color: var(--text-2); }
body.theme-dark .check,
body.theme-dark .check span { color: var(--text); }
body.theme-dark .check input[type="checkbox"] {
  background: #0b1220;
  border-color: #64748b;
  color-scheme: dark;
}
body.theme-dark .check input[type="checkbox"]:checked {
  background: var(--primary);
  border-color: var(--primary);
}
body.theme-dark .seg-count { background: #0b1220; border-color: var(--border-strong); }
body.theme-dark .seg-opt span {
  color: var(--muted);
  border-color: var(--border);
  background: transparent;
}
body.theme-dark .seg-opt.on span,
body.theme-dark .seg-opt:has(input:checked) span {
  background: var(--primary-50);
  color: #5eead4;
}
body.theme-dark .seg {
  border-color: var(--border-strong);
}
body.theme-dark .seg button {
  background: #0b1220;
  color: var(--text-2);
}
body.theme-dark .seg button.on { background: var(--primary); color: #fff; }
body.theme-dark .seg button + button { border-left-color: var(--border); }
body.theme-dark .sticky-foot {
  background-color: #0f172a;
  border-top-color: var(--border);
}
body.theme-dark .modal {
  background: var(--surface); color: var(--text);
  border-color: var(--border);
}
body.theme-dark .modal-foot { background: #162032; border-color: var(--border); }
body.theme-dark .lookup-results,
body.theme-dark .lookup-results button,
body.theme-dark .choice,
body.theme-dark .chip,
body.theme-dark .quick-tabs a,
body.theme-dark .wo-card,
body.theme-dark .att {
  background: #0b1220;
  color: var(--text);
  border-color: var(--border);
}
body.theme-dark .choice.selected { background: var(--primary-50); border-color: var(--primary); }
body.theme-dark .selected-customer { background: var(--primary-50); border-color: var(--primary-100); }
body.theme-dark .hbar .track { background: #334155; }
body.theme-dark .empty svg.i { color: #475569; }
body.theme-dark .app-header .dropdown { background: var(--surface); }
body.theme-dark .app-header .dropdown .avatar {
  background: var(--chrome-3); color: #dbeafe; border-color: #3b6ea5;
}

/* Board / kanban (Điều phối xưởng) */
body.theme-dark .col { background: #111827; color: var(--text); }
body.theme-dark .col-head { color: var(--text); }
body.theme-dark .col-head .n { background: #0b1220; color: var(--text-2); }
body.theme-dark .wo-card {
  background: #1e293b;
  border-color: var(--border);
  color: var(--text);
  box-shadow: none;
}
body.theme-dark .wo-card:hover { border-color: var(--primary); background: #243247; }
body.theme-dark .wo-card .code,
body.theme-dark .wo-card .cust,
body.theme-dark .wo-card .foot { color: var(--text-2); }
body.theme-dark .wo-card .meta { color: var(--muted); }
body.theme-dark .progress { background: #334155; }

/* Tables & lists */
body.theme-dark .table th { background: #162032; }
body.theme-dark .table tbody tr.clickable:hover td { background: #1a2438; }
body.theme-dark .table tr.group-row td { background: #162032; color: var(--text-2); }
body.theme-dark .pipeline a:hover,
body.theme-dark a.list-item:hover,
body.theme-dark a.kpi:hover { background: #1a2438; }
body.theme-dark .pipeline { border-color: var(--border); }
body.theme-dark .pipeline a { border-color: var(--border); color: var(--text); }
body.theme-dark .list-item { border-color: var(--border); color: var(--text); }
body.theme-dark .time-pill { background: var(--primary-50); color: #5eead4; }
body.theme-dark .pagination { color: var(--muted); border-color: var(--border); }
body.theme-dark .tabs { border-color: var(--border); }
body.theme-dark .tabs a { color: var(--text-2); }
body.theme-dark .tabs a:hover { color: var(--text); }
body.theme-dark .tabs a.active { color: #7eb6e8; border-color: var(--primary); }
body.theme-dark .tabs a.active .count { background: var(--primary-50); color: #7eb6e8; }

/* WO detail / misc */
body.theme-dark .step .dot {
  background: #334155;
  color: var(--muted);
  border-color: var(--surface);
}
body.theme-dark .step.done .dot { background: var(--success); color: #fff; }
body.theme-dark .step.current .dot { background: var(--primary); color: #fff; }
body.theme-dark .wo-actionbar-stick {
  background: rgba(15, 23, 42, .96);
  border-bottom-color: var(--border);
}
body.theme-dark .wo-actionbar-body {
  background: transparent;
}
body.theme-dark .alert-info { background: #1e3a5f; color: #bfdbfe; }
body.theme-dark .alert-warn { background: #422006; color: #fde68a; }
body.theme-dark .alert-danger { background: #450a0a; color: #fecaca; }
body.theme-dark .alert-success { background: #14532d; color: #bbf7d0; }
body.theme-dark .card-head { border-color: var(--border); }
body.theme-dark .toolbar { border-color: var(--border); }
body.theme-dark .kpi { color: var(--text); }
body.theme-dark .kpi .l { color: var(--muted); }
body.theme-dark .search-box .input { background: #0b1220; color: var(--text); }
body.theme-dark .lang-pill { background: #1e3a5f; color: #e2e8f0; }
body.theme-dark .app-header .lang-pill { background: rgba(255,255,255,.1); color: #dce8f0; }
body.theme-dark .shift { background: #0b1220; border-color: var(--border); color: var(--muted); }
body.theme-dark .sched-wrap,
body.theme-dark .matrix th,
body.theme-dark .matrix td { border-color: var(--border); color: var(--text); }

.content {
  padding: 22px 24px max(40px, calc(24px + env(safe-area-inset-bottom, 0px)));
  width: 100%; min-width: 0; max-width: none;
  box-sizing: border-box;
  color: var(--text);
  height: 100%;
  min-height: 0;
  /* clip thay vì hidden — tránh phá position:sticky trên WebKit */
  overflow-x: clip;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: none;
  overscroll-behavior: none;
  scrollbar-width: thin;
  scrollbar-color: #c5cedb transparent;
}
/* Chi tiết phiếu: bỏ pad trên để thanh lệnh sát header */
.content:has(> .wo-actionbar) {
  padding-top: 0;
}
.content::-webkit-scrollbar { width: 5px; height: 5px; }
.content::-webkit-scrollbar-track { background: transparent; }
.content::-webkit-scrollbar-thumb { background: #c5cedb; border-radius: 8px; }
.content::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@media (hover: none) and (pointer: coarse) {
  .content { scrollbar-width: none; }
  .content::-webkit-scrollbar { width: 0; height: 0; }
}
.page-head {
  display: flex; align-items: flex-start; justify-content: flex-start;
  gap: 12px 16px; margin-bottom: 18px; flex-wrap: wrap;
  min-width: 0; max-width: 100%;
}
.page-head .titles {
  flex: 1 1 220px;
  min-width: min(100%, 180px);
  max-width: 100%;
}
.page-head h2 { font-family: var(--font-display); font-size: 28px; font-weight: 650; letter-spacing: -.03em; line-height: 1.2; color: var(--text); overflow-wrap: break-word; word-break: normal; }
.page-head .sub { color: var(--muted); margin-top: 2px; overflow-wrap: break-word; word-break: normal; }
.page-head-compact { align-items: center; margin-bottom: 12px; }
.page-head-compact .titles { min-width: min(100%, 160px); flex: 1 1 180px; }
.page-head-compact .titles:empty { display: none; flex: 0; min-width: 0; }
.page-head .actions,
.page-head-compact .actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  margin-left: auto;
}
.page-head .actions > .btn,
.page-head .actions > a.btn,
.page-head .actions > button.btn {
  flex: 0 1 auto;
  max-width: 100%;
  min-width: 0;
}
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; min-width: 0; max-width: 100%; }

/* ---------- Components ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: clip; }
.card-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); background: var(--surface); }
.card-head h3 { font-size: 14.5px; flex: 1; display: flex; align-items: center; gap: 8px; font-weight: 650; }
.card-head h3 > svg.i { flex: none; color: var(--text-2); }
.card-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; flex: none; }
.card-ico svg.i { width: 15px; height: 15px; }
.card-ico-bh { background: #eaf4ee; color: #1f8a55; }
.card-ico-inspect { background: var(--primary-50); color: var(--primary); }
.card-ico-sla { background: #f5efe4; color: #a06a18; }
.card-ico-assign { background: var(--blue-bg); color: var(--blue-fg); }
.card-head-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: none; margin-left: auto; }
.card-head-actions .btn { flex: none; }
.btn-label-short { display: none; }
.btn-label-full { display: inline; }
.card-body { padding: 16px; }
.card-body.flush { padding: 0; }
.grid { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
.stack { display: grid; gap: 16px; align-content: start; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-weight: 500; cursor: pointer; white-space: nowrap; transition: background .14s ease, border-color .14s ease, box-shadow .14s ease; }
.btn:hover { background: #f5f7fa; border-color: #aeb9c8; text-decoration: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn svg.i { width: 16px; height: 16px; }
.btn-primary { background: var(--primary); border-color: transparent; color: #fff; box-shadow: none; }
.btn-primary:hover { background: var(--primary); border-color: transparent; }
.btn-primary:active { transform: translateY(1px); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: #e4c0c0; }
.btn-danger:hover { background: #faf4f4; border-color: #d4a8a8; }
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover { background: #167a42; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--bg); border-color: transparent; }
.btn-sm { height: 30px; padding: 0 10px; font-size: 13px; }
.btn-icon { width: 36px; padding: 0; }
.btn-sm.btn-icon { width: 30px; }

.field { display: grid; gap: 5px; }
.field > label, .label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.field .req { color: var(--danger); }
.field .hint { font-size: 12px; color: var(--muted); }
.input, .select, .textarea { width: 100%; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 0 10px; background: #fff; color: var(--text); outline: none; transition: border-color .12s, box-shadow .12s; }
.select option { color: #16223a; background: #fff; }
.form-grid select.select { min-width: 0; max-width: 100%; text-overflow: clip; }
.input-scan { position: relative; display: flex; align-items: stretch; }
.input-scan .input { padding-right: 40px; }
.input-scan .scan-btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.input-scan .scan-btn:hover { color: var(--primary); }
.scan-viewport { position: relative; background: #0b1220; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; }
.scan-viewport video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-frame { position: absolute; inset: 18% 16%; border: 2px solid rgba(255,255,255,.85); border-radius: 10px; box-shadow: 0 0 0 999px rgba(0,0,0,.28); pointer-events: none; }
.textarea { height: auto; min-height: 80px; padding: 8px 10px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.input[readonly] { background: var(--bg); }
.input-sm { height: 30px; font-size: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.span-all { grid-column: 1 / -1; }
.ta { position: relative; }
.ta > .input { padding-right: 38px; }
.ta-btn { position: absolute; top: 0; right: 0; bottom: 0; width: 36px; display: grid; place-items: center; border: 0; background: none; color: var(--muted, #64748b); cursor: pointer; border-radius: 0 10px 10px 0; }
.ta-btn:hover { color: var(--primary); }
.ta-btn svg.i { width: 16px; height: 16px; }
.ta > .input:disabled ~ .ta-btn, .ta > .input[readonly] ~ .ta-btn { display: none; }
.ta-list { position: fixed; z-index: 300; max-height: 280px; overflow-y: auto; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface, #fff); box-shadow: 0 10px 28px rgba(15, 23, 42, .14); }
.ta-item { padding: 8px 10px; border-radius: 7px; font-size: 14px; cursor: pointer; }
.ta-item:hover, .ta-item.on { background: var(--primary-50, #e8f6fc); color: var(--primary); font-weight: 600; }
.form-grid.gsm-params {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.acc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  padding: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.nq-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
}
.nq-grid.nq-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 5 ô: hàng 1 ba ô (thay / sơn / kiểm tra), hàng 2 hai ô rộng (bảo hành / bỏ qua) */
.nq-grid.nq-cols-5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.nq-grid.nq-cols-5 > .field { grid-column: span 2; }
.nq-grid.nq-cols-5 > .field:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 1100px) {
  .nq-grid.nq-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nq-grid.nq-cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nq-grid.nq-cols-5 > .field, .nq-grid.nq-cols-5 > .field:nth-child(n+4) { grid-column: auto; }
  .nq-grid.nq-cols-5 > .field:nth-child(5) { grid-column: 1 / -1; }
}
.nq-grid .field { margin: 0; min-width: 0; }
.old-parts-row { margin-top: 12px; }
.nq-grid .textarea { min-height: 76px; resize: vertical; }
.nq-list { display: grid; gap: 6px; margin-top: 4px; }
.nq-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 12px; font-size: 13.5px; }
.nq-row dt { color: var(--muted); }
.nq-row dd { margin: 0; font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .nq-grid, .nq-grid.nq-cols-3, .nq-grid.nq-cols-5 { grid-template-columns: 1fr; }
  .nq-grid.nq-cols-5 > .field, .nq-grid.nq-cols-5 > .field:nth-child(n+4), .nq-grid.nq-cols-5 > .field:nth-child(5) { grid-column: auto; }
  .nq-row { grid-template-columns: 1fr; gap: 0; }
}
.acc-cell { display: grid; gap: 8px; align-content: start; min-width: 0; }
.acc-cell-lab { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.acc-cell-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-height: 36px; }
.acc-grid .seg-count { width: max-content; flex: none; }
.acc-grid .seg-opt span { min-width: 0; padding: 6px 12px; font-size: 12.5px; }
.acc-cell-lab .req { color: var(--danger); }
.acc-miss-hint { margin-top: -4px; font-size: 12px; font-weight: 500; color: var(--danger); }
.acc-miss-hint[hidden] { display: none; }
.acc-cell.acc-missing { position: relative; }
.acc-cell.acc-missing::before { content: ""; position: absolute; left: -9px; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--danger); }
.acc-cell.acc-missing .acc-cell-lab { color: var(--danger); }
.acc-cell.acc-missing .seg-count { border-color: var(--danger); }
.acc-cell.acc-missing .check input[type="checkbox"] { border-color: var(--danger); }
.seg-opt:has(input:focus-visible) span { outline: 2px solid var(--ring); outline-offset: -2px; }
.acc-charger-scan { flex: 1 1 100%; min-width: 0; }
.acc-cell-charger { grid-column: 1 / -1; }
.charger-qr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.charger-qr-item { display: grid; gap: 4px; min-width: 0; }
.charger-qr-lab { font-size: 12px; font-weight: 500; color: var(--muted); }
.acc-cell-pins { grid-column: 1 / -1; }
.acc-pin-serials { flex: 1 1 100%; min-width: 0; }
.acc-pin-serials[hidden], .pin-serial-item[hidden] { display: none; }
.acc-pin-serials-modal { margin-top: 8px; }
.pin-serial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.pin-serial-item { display: grid; gap: 4px; min-width: 0; }
.pin-serial-input { text-transform: uppercase; }
.pin-serial-input::placeholder { text-transform: none; }
.pin-serial-warn { font-size: 12px; font-weight: 500; color: var(--warning); }
.pin-serial-warn[hidden] { display: none; }
.pin-serial-bad .pin-serial-input { border-color: var(--warning); }
.pin-serial-req { color: var(--danger); }
.pin-serial-missing .pin-serial-input { border-color: var(--danger); }
.pin-serial-missing .charger-qr-lab { color: var(--danger); }
.pin-serial-line { margin-top: 8px; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .charger-qr-grid, .pin-serial-grid { grid-template-columns: 1fr; }
}
.acc-row-checks { gap: 12px 18px; }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; color: var(--text); }
.check span { font-size: 13px; color: var(--text); }
.check input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; margin: 0; flex: none;
  border: 1.5px solid #c7c7cc; border-radius: 4px;
  background: #fff; cursor: pointer; color-scheme: light;
  display: grid; place-items: center;
}
.check input[type="checkbox"]::before {
  content: ""; width: 9px; height: 9px; transform: scale(0);
  background: var(--primary); border-radius: 2px; transition: transform .1s ease;
}
.check input[type="checkbox"]:checked {
  border-color: var(--primary); background: var(--primary);
}
.check input[type="checkbox"]:checked::before {
  transform: scale(1);
  background: #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
  width: 10px; height: 10px; border-radius: 0;
}
.check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--ring); outline-offset: 2px;
}
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.gsm-only .textarea { width: 100%; min-height: 120px; }
.acc-block-title { padding: 10px 14px; font-size: 13px; font-weight: 700; color: var(--text); border-bottom: 1px solid var(--border); background: var(--surface); }
.acc-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.acc-row:last-child { border-bottom: 0; }
.acc-row-lab { font-size: 13px; font-weight: 600; color: var(--muted); }
.acc-row-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
.seg-count { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; background: var(--surface); }
.seg-opt { margin: 0; cursor: pointer; }
.seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg-opt span { display: block; padding: 7px 14px; font-size: 13px; color: var(--text-2, var(--muted)); border-right: 1px solid var(--border); white-space: nowrap; }
.seg-opt:last-child span { border-right: 0; }
.seg-opt.on span, .seg-opt:has(input:checked) span { background: var(--primary-50, #e8f0fe); color: var(--primary); font-weight: 650; }
.search-box { position: relative; }
.search-box svg.i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); width: 16px; height: 16px; }
.search-box .input { padding-left: 32px; }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.toolbar .search-box { flex: 1 1 16rem; min-width: min(220px, 100%); max-width: none; }
.toolbar .select, .toolbar .input { width: auto; }

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
}
.table-wrap::-webkit-scrollbar { height: 4px; width: 4px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.28);
  border-radius: 4px;
}
.table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.48); }
.table-wrap::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.table-wrap::-webkit-scrollbar-corner { background: transparent; }
body.theme-dark .table-wrap { scrollbar-color: rgba(148, 163, 184, 0.22) transparent; }
body.theme-dark .table-wrap::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.22); }
body.theme-dark .table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.4); }

table.table { width: 100%; border-collapse: collapse; }
.table.table-col-resize { table-layout: fixed; }
.table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; padding: 10px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.table th.th-resizable { position: relative; overflow: hidden; text-overflow: ellipsis; }
.table th.th-resizable > .col-resize-handle {
  position: absolute;
  top: 0;
  right: -2px;
  width: 7px;
  height: 100%;
  cursor: col-resize;
  touch-action: none;
  z-index: 3;
  user-select: none;
}
.table th.th-resizable > .col-resize-handle::after {
  content: '';
  position: absolute;
  top: 22%;
  bottom: 22%;
  left: 3px;
  width: 1px;
  border-radius: 1px;
  background: rgba(100, 116, 139, 0.22);
  opacity: 0;
  transition: opacity .12s;
}
.table th.th-resizable:hover > .col-resize-handle::after,
.table th.th-resizable > .col-resize-handle:hover::after,
.table th.is-resizing > .col-resize-handle::after {
  opacity: 1;
  background: rgba(0, 113, 227, 0.55);
}
body.col-resizing,
body.col-resizing * { cursor: col-resize !important; user-select: none !important; }
body.theme-dark .table th.th-resizable > .col-resize-handle::after { background: rgba(148, 163, 184, 0.28); }
body.theme-dark .table th.is-resizing > .col-resize-handle::after,
body.theme-dark .table th.th-resizable > .col-resize-handle:hover::after {
  background: rgba(96, 165, 250, 0.65);
}
.table td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr.clickable { cursor: pointer; }
.table tbody tr.clickable:hover td { background: var(--surface-2); }
.table tbody tr[data-click]:focus-visible { outline: 2px solid var(--primary, #18a4d8); outline-offset: -2px; }
.table tr.group-row td { background: #f5f5f7; font-weight: 600; color: var(--text-2); font-size: 12.5px; padding: 7px 14px; }
.table .t-title { font-weight: 600; color: var(--text); }
.table td:first-child .t-title { white-space: nowrap; }
.table .t-sub { font-size: 12.5px; color: var(--muted); }

/* ----- Danh sách xe: gọn 1 màn hình PC ----- */
.page-head-sm { margin-bottom: 10px; }
.page-head-sm h2 { font-size: 18px; }
.page-head-sm .titles { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.page-head-sm .sub { margin-top: 0; }
.toolbar-sm { padding: 8px 12px; gap: 6px; }
.toolbar-sm .search-box { max-width: none; min-width: min(180px, 100%); flex: 1 1 100%; }
.toolbar-sm .search-box-wide { flex: 1 1 100%; max-width: none; min-width: 0; width: 100%; }
.toolbar-sm .search-box-wide .input { width: 100%; }
.toolbar-sm .select { height: 30px; font-size: 13px; padding: 0 8px; max-width: 160px; }
.toolbar-meta { font-size: 12.5px; white-space: nowrap; margin-left: 4px; }
.toolbar-end { margin-left: auto; }

/* Mobile card lists */
.m-card-list { display: none; padding: 8px; gap: 8px; }
.m-card {
  display: block; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); text-decoration: none; color: inherit;
}
a.m-card:active { background: #f8fafc; }
.m-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.m-card-title { font-weight: 600; font-size: 15px; color: var(--text); word-break: break-word; }
.m-card-meta { font-size: 13px; color: var(--text-2); white-space: nowrap; flex: none; }
.m-card-line { margin-top: 4px; font-size: 13px; color: var(--text-2); word-break: break-word; overflow-wrap: anywhere; }
.m-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.desktop-hide { display: none !important; }
.mobile-hide { display: block; }
/* iPad dọc: 2 thẻ / hàng thay vì thẻ điện thoại kéo dài hết bề ngang */
@media (min-width: 641px) and (max-width: 900px) {
  .m-card-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .desktop-hide { display: grid !important; }
  .m-card-list.desktop-hide { display: grid !important; }
  .mobile-hide { display: none !important; }
  .wo-list-card .m-card-list { padding: 10px; gap: 8px; }
  .wo-list-card .m-card-meta .badge { white-space: nowrap; }
  .wo-list-card .m-card-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .wo-list-card .m-card-foot-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    align-items: baseline;
    width: 100%;
    min-width: 0;
  }
  .wo-list-card .m-card-foot-meta > span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .wo-list-card .table { min-width: 720px; }
  .toolbar-sm .search-box-wide { flex: 1 1 100%; max-width: none; min-width: 0; }
  .toolbar-sm .select { max-width: none; flex: 1 1 140px; }
  .toolbar-end { margin-left: 0; width: 100%; }
  .list-page .card-fill { min-height: calc(var(--app-height, 100dvh) - 120px); }
  .list-page .m-card-list { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; }
  .m-card-list.desktop-hide { align-content: start; }
  body.nav-open::after { pointer-events: auto; cursor: pointer; }

  /* Tables without mobile cards: scroll horizontally — never crush columns */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .table-wrap > table.table {
    min-width: 560px;
  }
  .table-wrap > table.table.matrix { min-width: 480px; }
  .m-card-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .m-card-actions .btn { flex: 1 1 auto; min-height: 40px; }
  .kpi .v, .kpi .l {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .kpi .l { white-space: normal; line-height: 1.3; }
  .login, .login-form-wrap, .login-form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  .login-form-wrap { padding-left: 20px; padding-right: 20px; }
  .login-form .input, .login-form .btn { width: 100%; max-width: 100%; box-sizing: border-box; }
}
.table-dense th { padding: 7px 10px; font-size: 11px; }
.table-dense td { padding: 5px 10px; font-size: 13px; line-height: 1.25; }
.table-veh { table-layout: fixed; width: 100%; min-width: 100%; border-collapse: collapse; }
.table-veh col.c-owner { width: 34%; }
.table-veh col.c-phone { width: 11%; }
.table-veh col.c-plate { width: 11%; }
.table-veh col.c-vin { width: 18%; }
.table-veh col.c-model { width: 16%; }
.table-veh col.c-color { width: 7%; }
.table-veh col.c-act { width: 44px; }
.table-veh th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 12px;
}
.table-veh td {
  padding: 8px 12px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 0;
}
.table-veh tbody tr:hover td { background: #f8fafc; }
body.theme-dark .table-veh tbody tr:hover td { background: #162032; }
.table-veh .col-owner {
  font-weight: 500;
  color: var(--text);
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
  line-height: 1.35;
}
.table-veh .col-phone,
.table-veh .col-plate,
.table-veh .col-vin {
  color: var(--text-2);
  font-family: inherit;
}
.table-veh .col-color { color: var(--text-2); }
.table-veh .col-act {
  text-align: right;
  padding-left: 4px;
  padding-right: 8px;
  overflow: visible;
}
.table-veh .model-line { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; overflow: hidden; }
.table-veh .model-line .t-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-veh .src { font-size: 10px; padding: 1px 6px; flex: none; }
.list-page .table-fill {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
}
.list-page .table-fill::-webkit-scrollbar { width: 4px; height: 4px; }
.list-page .table-fill::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.28); border-radius: 4px; }
.list-page .table-fill::-webkit-scrollbar-track { background: transparent; }
.list-page .table-fill::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.48); }
body.theme-dark .list-page .table-fill { scrollbar-color: rgba(148, 163, 184, 0.22) transparent; }
body.theme-dark .list-page .table-fill::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.22); }
.list-foot { border-top: 1px solid var(--border); }
.list-foot .pagination { padding: 6px 12px; margin: 0; }

.table-list { table-layout: fixed; width: 100%; min-width: 100%; border-collapse: collapse; }
.table-list col.c-name { width: 15%; }
.table-list col.c-phone { width: 11%; }
.table-list col.c-email { width: 22%; }
.table-list col.c-addr { width: 28%; }
.table-list col.c-veh-n { width: 6%; }
.table-list col.c-visits { width: 7%; }
.table-list col.c-last { width: 11%; }
.table-list th {
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  padding: 8px 12px;
}
.table-list td {
  padding: 8px 12px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 0;
  font-family: inherit;
}
.table-list tbody tr:hover td { background: #f8fafc; }
body.theme-dark .table-list tbody tr:hover td { background: #162032; }
.table-list .col-name { font-weight: 500; color: var(--text); }
.table-list .col-phone,
.table-list .col-email,
.table-list .col-addr,
.table-list .col-last { color: var(--text-2); }
.table-list .col-email,
.table-list .col-addr {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

@media (min-width: 901px) {
  .content:has(.list-page) {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: none;
    max-width: none;
    width: 100%;
    padding: 14px 18px 12px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .list-page {
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .list-page .card-fill {
    flex: 1;
    min-height: 0;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .list-page .table-fill {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    width: 100%;
    align-self: stretch;
    overflow: auto;
  }
  .list-page .table-fill > table {
    width: 100%;
    min-width: 100%;
  }
}
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.empty svg.i { width: 36px; height: 36px; color: #c2cbd8; margin-bottom: 6px; }

.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; background: var(--slate-bg); color: var(--slate-fg); border: 1px solid transparent; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .72; }
.badge.plain::before { display: none; }
.b-slate { background: var(--slate-bg); color: var(--slate-fg); }
.b-blue { background: var(--blue-bg); color: var(--blue-fg); }
.b-amber { background: var(--amber-bg); color: var(--amber-fg); }
.b-orange { background: var(--orange-bg); color: var(--orange-fg); }
.b-violet { background: var(--violet-bg); color: var(--violet-fg); }
.b-green { background: var(--green-bg); color: var(--green-fg); }
.b-teal { background: var(--teal-bg); color: var(--teal-fg); }
/* Bổ sung: tách các trạng thái trước đây phải dùng chung màu.
   (.b-cyan/.b-pink ở ~2230, .b-indigo ở ~2530 — thêm ở đây cho gọn.) */
.b-sky { background: var(--sky-bg); color: var(--sky-fg); }
.b-purple { background: var(--purple-bg); color: var(--purple-fg); }
.b-stone { background: var(--stone-bg); color: var(--stone-fg); }
.b-emerald { background: var(--emerald-bg); color: var(--emerald-fg); }
.b-emerald::before { opacity: .85; }
.t-sky { background: var(--sky-bg); color: var(--sky-fg); }
.t-purple { background: var(--purple-bg); color: var(--purple-fg); }
.t-stone { background: var(--stone-bg); color: var(--stone-fg); }
.t-emerald { background: var(--emerald-bg); color: var(--emerald-fg); }
.b-red { background: var(--red-bg); color: var(--red-fg); }
.tag { display: inline-block; white-space: nowrap; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 5px; background: var(--slate-bg); color: var(--slate-fg); }
.tag.urgent { background: var(--red-bg); color: var(--red-fg); }
.tag.blue { background: var(--blue-bg); color: var(--blue-fg); }
.plate { display: inline; white-space: nowrap; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: inherit; font-weight: 600; border: 0; border-radius: 0; padding: 0; background: transparent; color: inherit; letter-spacing: .02em; font-variant-numeric: lining-nums; font-feature-settings: "zero" 0; }
@media (max-width: 640px) {
  .plate { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
  .kv dd .plate { display: inline-block; max-width: 100%; }
}

.pagination { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: 13px; }
.pagination .spacer { flex: 1; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 10px; overflow-x: auto; background: var(--surface); }
.tabs a { padding: 12px 14px 10px; color: var(--text-2); font-weight: 550; border-bottom: 2px solid transparent; white-space: nowrap; display: flex; gap: 6px; align-items: center; border-radius: 8px 8px 0 0; transition: color .15s ease, background .15s ease; }
.tabs a:hover { color: var(--text); text-decoration: none; background: rgba(26,111,196,.035); }
.tabs a.active { color: var(--primary-600); border-color: var(--primary); font-weight: 650; }
.tabs .count { background: var(--slate-bg); color: var(--slate-fg); border-radius: 10px; padding: 0 7px; font-size: 11.5px; font-weight: 600; }
.tabs a.active .count { background: var(--primary-50); color: var(--primary-600); }

.kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; font-size: 13.5px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.acc-grid-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; padding: 2px 0; min-width: 0; }
.acc-grid-item span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* ---------- KPI ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 14px; margin-bottom: 16px; }
.kpi { padding: 14px 16px; display: flex; gap: 12px; align-items: center; color: inherit; min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color .15s ease, box-shadow .15s ease; }
a.kpi:hover { text-decoration: none; border-color: var(--primary-100); box-shadow: var(--shadow-md); }
.kpi-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.kpi-icon svg.i { width: 20px; height: 20px; }
.kpi .v { font-family: var(--font-display); font-size: 23px; font-weight: 700; line-height: 1.1; letter-spacing: -.03em; color: var(--text); }
.kpi .l { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.t-blue { background: var(--blue-bg); color: var(--blue-fg); }
.t-green { background: var(--green-bg); color: var(--green-fg); }
.t-violet { background: var(--violet-bg); color: var(--violet-fg); }
.t-amber { background: var(--amber-bg); color: var(--amber-fg); }
.t-red { background: var(--red-bg); color: var(--red-fg); }
.t-slate { background: var(--slate-bg); color: var(--slate-fg); }
.t-teal { background: var(--teal-bg); color: var(--teal-fg); }

.pipeline { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pipeline a { padding: 14px 16px; border-right: 1px solid var(--border); color: inherit; display: block; }
.pipeline a:last-child { border-right: 0; }
.pipeline a:hover { background: var(--surface-2); text-decoration: none; }
.pipeline .v { font-size: 22px; font-weight: 700; }
.pipeline .bar { height: 4px; border-radius: 3px; margin-top: 8px; }

.chart { width: 100%; height: auto; display: block; }
.chart text { font-size: 11px; fill: var(--muted); font-family: var(--font); }
.legend { display: flex; gap: 14px; font-size: 12.5px; color: var(--text-2); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.hbar { display: grid; grid-template-columns: minmax(110px, 180px) 1fr 44px; gap: 10px; align-items: center; padding: 6px 0; font-size: 13px; }
.hbar .track { height: 8px; background: #eef1f6; border-radius: 5px; overflow: hidden; }
.hbar .fill { height: 100%; background: var(--primary); border-radius: 5px; }
.hbar .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.list-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border); color: inherit; }
.list-item:last-child { border-bottom: 0; }
a.list-item:hover { background: var(--surface-2); text-decoration: none; }
.list-item .grow { flex: 1; min-width: 0; }
.time-pill { font-weight: 700; font-size: 13px; background: var(--primary-50); color: var(--primary-600); border-radius: 7px; padding: 4px 8px; min-width: 54px; text-align: center; }

/* ---------- Board ---------- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.col { background: #eaeef4; border-radius: var(--radius); display: flex; flex-direction: column; max-height: calc(var(--app-height, 100dvh) - 190px); }
.col-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 8px; font-weight: 600; }
.col-head .dot { width: 9px; height: 9px; border-radius: 50%; }
.col-head .n { margin-left: auto; background: #fff; border-radius: 10px; padding: 0 8px; font-size: 12px; color: var(--text-2); }
.col-body { padding: 4px 10px 10px; overflow-y: auto; display: grid; gap: 8px; }
.wo-card { background: #fff; border-radius: 10px; border: 1px solid var(--border); padding: 11px 12px; display: grid; gap: 6px; color: inherit; box-shadow: var(--shadow); border-left: 3px solid transparent; transition: border-color .15s ease, box-shadow .15s ease; }
.wo-card:hover { border-color: var(--primary-100); border-left-color: var(--primary); box-shadow: var(--shadow-md); text-decoration: none; }
.wo-card.urgent { border-left-color: var(--danger); }
.wo-card .top { display: flex; align-items: center; gap: 6px; }
.wo-card .code { font-weight: 600; font-size: 12.5px; color: var(--text-2); }
.wo-card .cust { font-weight: 600; }
.wo-card .meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.wo-card .foot { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); border-top: 1px dashed var(--border); padding-top: 6px; }
.wo-card .late { color: var(--danger); font-weight: 600; }
.progress { height: 5px; background: #eef1f6; border-radius: 4px; overflow: hidden; }
.progress > div { height: 100%; background: var(--success); }

/* ---------- Work order detail ---------- */
.stepper { display: flex; padding: 16px 18px; gap: 0; overflow-x: auto; }
.step { flex: 1; min-width: 110px; position: relative; text-align: center; font-size: 12.5px; color: var(--muted); padding: 0 4px; box-sizing: border-box; }
.step .dot { width: 28px; height: 28px; border-radius: 50%; margin: 0 auto 6px; display: grid; place-items: center; background: #eef1f6; color: var(--muted); font-weight: 700; position: relative; z-index: 1; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--border); }
.step .dot svg.i { width: 14px; height: 14px; stroke-width: 3; }
.step::before { content: ""; position: absolute; top: 14px; left: -50%; right: 50%; height: 2px; background: var(--border); }
.step:first-child::before { display: none; }
.step.done { color: var(--text-2); }
.step.done .dot { background: var(--success); color: #fff; box-shadow: none; }
.step.done::before, .step.current::before { background: var(--success); }
.step.current { color: var(--primary); font-weight: 600; }
.step.current .dot { background: var(--primary); color: #fff; box-shadow: 0 0 0 4px var(--primary-100); }
.step .t { font-size: 11.5px; color: var(--muted); font-weight: 400; line-height: 1.25; overflow-wrap: anywhere; word-break: break-word; }
.step > div:not(.dot) { position: relative; z-index: 1; line-height: 1.25; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; }
.step > div.by { margin-top: 2px; font-weight: 500; color: var(--text-2); word-break: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; cursor: default; }
.step:not(.done):not(.current) > div.by { color: var(--muted); }

.wo-actionbar {
  position: static;
  z-index: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin: 0 0 12px;
  padding: 0;
  background: transparent;
  border-bottom: 0;
  box-shadow: none;
}
/* Hàng ← / lệnh / in / hủy — cố định sát dưới header */
.wo-actionbar-stick {
  position: sticky;
  top: 0;
  z-index: 22;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(16, 24, 40, .04);
  margin: 0 -24px;
  width: calc(100% + 48px);
  box-sizing: border-box;
}
.wo-actionbar-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 12px;
  min-height: 36px;
}
.wo-actionbar-tools {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex: none;
  margin-left: auto;
}
.wo-actionbar-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 0 10px;
  background: transparent;
  border-bottom: 0;
}
@media (max-width: 900px) {
  /* Mobile: fixed sát header — sticky hay bị WebKit phá */
  .wo-actionbar {
    padding-top: 40px; /* khớp chiều cao hàng stick (~36–40px + border) */
    margin: 0 0 10px;
  }
  .wo-actionbar-stick {
    position: fixed;
    top: calc(var(--app-header-h, 52px) + env(safe-area-inset-top, 0px));
    left: 0;
    right: 0;
    width: auto;
    margin: 0;
    z-index: 30;
  }
  .wo-actionbar-top {
    min-height: 36px;
    height: auto;
    padding: 4px 10px;
    box-sizing: border-box;
    flex-wrap: nowrap;
    gap: 4px;
    overflow: hidden;
  }
  html.pwa-standalone .wo-actionbar-stick,
  html.pwa-ios .wo-actionbar-stick,
  body.pwa-header-ported .wo-actionbar-stick {
    top: var(--app-header-h, 52px);
  }
  @media (display-mode: standalone) {
    .wo-actionbar-stick { top: var(--app-header-h, 52px); }
  }
  .wo-actionbar-tools {
    max-width: min(52vw, 200px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 2px;
    flex: 0 1 auto;
    min-width: 0;
  }
  .wo-actionbar-tools::-webkit-scrollbar { display: none; }
  .wo-actionbar-stick .wo-btn-sync {
    padding: 0 6px !important;
    font-size: 11.5px;
    flex: none;
    max-width: 100%;
  }
  .wo-actionbar-stick .wo-btn-sync .btn-label-full,
  .wo-actionbar-stick .wo-btn-sync .btn-label-short {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.wo-actionbar-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.wo-actionbar-status .badge {
  font-size: 11.5px;
  padding: 2px 8px;
}
.wo-back {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: var(--text-2);
  flex: none;
}
.wo-back:hover { background: var(--bg); color: var(--primary); text-decoration: none; }
.wo-back svg.i { width: 15px; height: 15px; }
.wo-dms {
  display: inline-flex;
  align-items: center;
  font-weight: 650;
  font-size: 12.5px;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
  color: var(--primary-700);
  background: var(--primary-50);
  border: 1px solid var(--primary-100);
  padding: 0 8px;
  height: 28px;
  border-radius: 6px;
  line-height: 1;
  box-sizing: border-box;
}
.wo-dms.muted {
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
  background: #f8fafc;
  border-color: var(--border);
}
.wo-actionbar-top .tag.urgent {
  font-size: 11px;
  padding: 1px 6px;
  flex: none;
}
.wo-btn-print {
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  min-width: 28px;
  padding: 0 !important;
  color: var(--primary);
}
.wo-btn-print:hover { background: #eef4ff; color: var(--primary-600); }
.wo-btn-print svg.i { width: 15px; height: 15px; }
.wo-btn-cancel {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 8px !important;
  color: var(--danger);
  font-weight: 650;
  font-size: 12.5px;
}
.wo-btn-cancel:hover { background: #fff5f5; }
.wo-actionbar-stick .btn,
.wo-actionbar-stick .btn-sm,
.wo-actionbar-stick .btn-icon {
  min-height: 28px !important;
  height: 28px;
}
.wo-actionbar-primary { width: 100%; }
.wo-actionbar-primary .wo-btn-primary,
.wo-actionbar-primary .btn-primary {
  width: 100%;
  height: auto;
  min-height: 34px;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  padding: 6px 10px;
  font-weight: 650;
  font-size: 13px;
}
.wo-actionbar-more {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
}
.wo-actionbar-more .wo-btn-more {
  flex: 1 1 auto;
  min-height: 30px;
  height: 30px;
  font-size: 12.5px;
  font-weight: 600;
  background: #f8fafc;
  border-color: var(--border);
  color: var(--text-2);
}
.wo-actionbar-more .wo-btn-more:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: var(--text);
}
@media (min-width: 901px) {
  .wo-actionbar {
    margin: 0 0 12px;
  }
  .wo-actionbar-stick {
    margin: 0 -24px;
    width: calc(100% + 48px);
  }
  .wo-actionbar-top {
    padding: 4px 16px;
  }
  .wo-actionbar-body {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 8px 0 10px;
  }
  .wo-actionbar-status { flex: none; }
  .wo-actionbar-primary {
    width: auto;
    flex: 1 1 auto;
    max-width: min(360px, 40vw);
  }
  .wo-actionbar-primary .wo-btn-primary,
  .wo-actionbar-primary .btn-primary {
    width: auto;
    min-width: 0;
    height: 30px;
    min-height: 30px;
    white-space: nowrap;
    padding: 0 12px;
  }
  .wo-actionbar-more {
    width: auto;
    flex: none;
  }
  .wo-actionbar-more .wo-btn-more {
    flex: none;
    height: 30px;
    min-height: 30px;
  }
}
.wo-header { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 16px; }
.wo-header .titles { flex: 1; min-width: 260px; }
.wo-header h2 { font-size: 21px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wo-header .sub { color: var(--muted); margin-top: 4px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.timeline { list-style: none; margin: 0; padding: 4px 16px 16px; }
.timeline li { position: relative; padding: 10px 0 10px 26px; border-left: 2px solid var(--border); margin-left: 6px; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--border-strong); }
.timeline li.status::before { background: var(--primary); border-color: var(--primary); }
.timeline li.note::before { background: var(--warning); border-color: var(--warning); }
.timeline .when { font-size: 12px; color: var(--muted); }
.timeline .what { margin-top: 2px; }
.timeline .note-text { margin-top: 4px; background: #f7f9fc; border: 1px solid var(--border); border-radius: 7px; padding: 6px 9px; white-space: pre-wrap; font-size: 13px; }

.items-table td.done-cell { width: 44px; text-align: center; }
.items-table tr.is-done .desc { text-decoration: line-through; color: var(--muted); }
.total-row td { font-weight: 700; background: #f8fafc; }
.warranty-ok { color: var(--success); font-weight: 600; }
.warranty-no { color: var(--muted); }
.alert { display: flex; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13.5px; align-items: flex-start; line-height: 1.45; overflow-wrap: anywhere; word-break: break-word; }
.alert > div { min-width: 0; flex: 1; line-height: 1.45; overflow-wrap: anywhere; word-break: break-word; }
.alert svg.i { margin-top: 1px; }
.alert-warn { background: var(--amber-bg); color: #7a4507; }
.alert-danger { background: var(--red-bg); color: var(--red-fg); }
.alert-info { background: var(--blue-bg); color: #1e3a8a; }
.alert-success { background: var(--green-bg); color: #14532d; }
.pre { white-space: pre-wrap; }

/* ---------- New WO ---------- */
.section-num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--primary-50); color: var(--primary);
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 700; flex: none;
  border: 1px solid var(--primary-100);
}
.lookup-results { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 8px; max-height: 320px; overflow-y: auto; }
.lookup-results button { display: flex; width: 100%; text-align: left; gap: 12px; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--border); background: #fff; cursor: pointer; align-items: center; }
.lookup-results button:last-child { border-bottom: 0; }
.lookup-results button:hover { background: #f5f9ff; }
.lookup-results button.fleet-hit { align-items: flex-start; position: relative; padding-right: 12px; }
.lookup-results .fleet-hit-open {
  margin-left: auto;
  align-self: flex-start;
  white-space: nowrap;
  flex: none;
}
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.choice { border: 1.5px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; background: #fff; text-align: left; }
.choice:hover { border-color: var(--primary-100); }
.choice.selected { border-color: var(--primary); background: var(--primary-50); }
.choice input { margin-top: 3px; accent-color: var(--primary); }
.selected-customer { display: flex; gap: 12px; align-items: center; padding: 12px; background: var(--primary-50); border: 1px solid var(--primary-100); border-radius: var(--radius-sm); }
.selected-customer-top { align-items: flex-start; position: relative; }
.selected-customer-top .selected-change {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  margin: 0;
}
.selected-customer-side {
  align-items: flex-start;
  gap: 10px;
}
.selected-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: none;
  margin-left: auto;
  max-width: none;
  text-align: right;
}
.selected-side .selected-change { margin: 0; }
.selected-side-meta { line-height: 1.3; white-space: nowrap; }
.selected-customer-compact { gap: 10px; padding: 10px 12px; }
.selected-customer-compact .grow { display: grid; gap: 2px; min-width: 0; }
.selected-customer-compact .strong { line-height: 1.35; }
.selected-open-inline {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #7a4507;
  background: var(--amber-bg);
  border-radius: 6px;
  padding: 3px 8px;
  line-height: 1.3;
  white-space: nowrap;
  max-width: none;
}
.selected-open-inline svg.i { width: 13px; height: 13px; flex: none; }
.sticky-foot {
  position: static;
  background-color: transparent;
  background-image: none;
  border-top: 0;
  padding: 16px 0 max(8px, env(safe-area-inset-bottom, 0px));
  margin-top: 8px;
  display: flex; gap: 10px; justify-content: flex-end; align-items: center;
  z-index: auto;
  box-shadow: none;
}
body.theme-dark .sticky-foot {
  background-color: #0f172a;
  border-top-color: var(--border);
  box-shadow: 0 -6px 16px rgba(0, 0, 0, .35);
}

/* ---------- Modal & toast ---------- */
body.modal-open { overflow: hidden; }
/* iOS/PWA: khóa scrollport thật (.content), không chỉ body. Chỉ áp cho điện thoại / màn cảm ứng –
   trên máy tính giữ thanh cuộn (khóa sẽ làm mất thanh cuộn và trang xô lệch khi mở hộp thoại). */
@media (max-width: 900px), (hover: none) and (pointer: coarse) {
  body.modal-open .content,
  body.modal-open #main {
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
  }
}
/* Máy tính: chừa sẵn chỗ thanh cuộn → nội dung không nhảy khi thanh cuộn ẩn/hiện */
@media (min-width: 901px) and (hover: hover) { .content { scrollbar-gutter: stable; } }
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
  display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  z-index: 100; overflow: hidden;
  overscroll-behavior: none; animation: fade .12s ease-out;
}
.modal {
  background: var(--surface); color: var(--text); border-radius: var(--radius-lg);
  width: 100%; max-width: 560px; max-height: min(720px, calc(var(--app-height, 100dvh) - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border);
  animation: pop .18s cubic-bezier(.22,1,.36,1);
}
.modal.lg { max-width: 780px; }
.modal.sm { max-width: 420px; }
/* Chuyển trạng thái hàng loạt: rộng, cao gần hết màn hình, bảng xem trước cuộn riêng */
.modal.bulk-modal { max-width: 1180px; max-height: calc(var(--app-height, 100dvh) - 32px); }
.modal.bulk-modal .modal-body { gap: 14px; }
.bulk-targets { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.bulk-target { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--surface); }
.bulk-target:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.bulk-target input { width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.bulk-target .badge { font-size: 14px; padding: 5px 12px; }
.bulk-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr); gap: 14px; align-items: start; }
.bulk-grid textarea[name="vins"] { font-size: 13px; min-height: 150px; }
.bulk-table table { width: 100%; table-layout: auto; }
.bulk-table td, .bulk-table th { white-space: nowrap; overflow: visible; text-overflow: clip; }
.bulk-table { max-height: max(220px, calc(var(--app-height, 100dvh) - 520px)); overflow: auto; }
.bulk-table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }
.bulk-table .dp, .bulk-table input[type="date"] { min-width: 150px; }
.bulk-table .is-invalid { border-color: var(--danger); }
.bulk-off td { color: var(--muted); }
.bulk-good { color: var(--success); font-weight: 600; }
.bulk-bad { color: var(--danger); }
.bulk-sum { margin-right: auto; align-self: center; }
@media (max-width: 760px) { .bulk-grid { grid-template-columns: 1fr; } .modal.bulk-modal .modal-foot { flex-wrap: wrap; } .bulk-sum { flex-basis: 100%; } }
.stamp-cfg { display: grid; grid-template-columns: minmax(0, 480px) 200px; gap: 16px; align-items: start; }
.stamp-preview { width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--border); display: block; }
.stamp-logo-box { height: 96px; border: 1px dashed var(--border); border-radius: 10px; display: flex; align-items: center; justify-content: center;
  padding: 10px; overflow: hidden; background: repeating-conic-gradient(#eef1f4 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.stamp-logo-box img { max-width: 100%; max-height: 74px; object-fit: contain; }
.stamp-cfg .btn { justify-content: center; }
@media (max-width: 760px) { .stamp-cfg { grid-template-columns: 1fr; } }
@media (min-width: 641px) { .modal.ck-print-modal { max-width: min(720px, 92vw); } }
/* Xem trước phiếu in trong app (iframe) – trên cả modal (220) và drawer (200) */
.pp-backdrop {
  position: fixed; inset: 0; z-index: 300; background: rgba(15, 23, 42, .55);
  display: flex; align-items: center; justify-content: center; animation: fade .12s ease-out;
}
.pp-box {
  width: 90vw; height: 90vh; height: 90dvh; max-width: 1100px; background: var(--surface); color: var(--text);
  border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
}
.pp-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex: none; }
.pp-head h3 { flex: 1; font-size: 16px; font-family: var(--font-display); font-weight: 650; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pp-body { flex: 1; min-height: 0; background: #e5e5e5; }
.pp-frame { display: block; width: 100%; height: 100%; border: 0; background: #e5e5e5; }
@media (max-width: 640px) {
  .pp-box { width: 100%; height: 100%; max-width: none; border-radius: 0; border: 0; }
  .pp-head { padding-top: max(10px, env(safe-area-inset-top, 0px)); }
  .pp-body { padding-bottom: env(safe-area-inset-bottom, 0px); }
}
#print-fallback { display: none; }
@media print {
  html.pp-fallback body > *:not(#print-fallback) { display: none !important; }
  html.pp-fallback #print-fallback { display: block !important; }
  html.pp-fallback #print-fallback .no-print { display: none !important; }
}
.modal > form { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow: hidden; margin: 0; }
.modal-head { display: flex; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--border); gap: 10px; flex: none; background: var(--surface); }
.modal-head h3 { flex: 1; font-size: 17px; font-family: var(--font-display); font-weight: 650; letter-spacing: -.02em; }
.modal-body {
  padding: 16px 18px; display: grid; gap: 12px;
  overflow-y: auto; flex: 1; min-height: 0;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.modal > .modal-body { flex: 1; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px;
  border-top: 1px solid var(--border); background: var(--surface-2);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg); flex: none;
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: translateY(8px) scale(.98); opacity: 0; } }
#toast-root {
  position: fixed; right: max(20px, env(safe-area-inset-right, 0px));
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  display: none; gap: 8px; z-index: 1200;
  pointer-events: none;
  background: transparent;
}
#toast-root:not(:empty) {
  display: grid;
  pointer-events: none;
}
#toast-root .toast { pointer-events: auto; }

/* Safari iOS: chỉ tint thanh dưới; không phủ lớp fixed lên logo */
#ios-safari-bottom-tint {
  display: none;
  pointer-events: none;
}
@supports (-webkit-touch-callout: none) {
  @media (max-width: 900px) {
    #ios-safari-bottom-tint {
      display: block;
      position: fixed;
      bottom: -8px; left: 0;
      width: 100%;
      min-height: 14px;
      z-index: 3;
      background-color: var(--bg);
    }
    body.theme-dark #ios-safari-bottom-tint { background-color: #0f172a; }
  }
}
.modal-backdrop + .modal-backdrop { z-index: 110; }
@media (max-width: 640px) {
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal {
    max-width: none; width: 100%;
    max-height: min(92dvh, calc(var(--app-height, 100dvh) - env(safe-area-inset-top, 0px)));
    border-radius: 16px 16px 0 0;
  }
  .modal-foot { padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  /* Bàn phím iOS: giữ chân nút trong vùng nhìn thấy */
  .modal-body { padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
}
.toast { background: var(--chrome); border: 1px solid rgba(255,255,255,.12); color: #fff; padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow-lg); display: flex; gap: 10px; align-items: flex-start; max-width: min(420px, calc(100vw - 24px)); animation: pop .18s var(--ease); line-height: 1.4; overflow-wrap: anywhere; word-break: break-word; }
.toast.error { background: #b42318; border-color: rgba(255,255,255,.12); }
.toast.success { background: #146c3a; border-color: rgba(255,255,255,.12); }
.stars { display: inline-flex; gap: 2px; }
.stars button { border: 0; background: none; padding: 2px; cursor: pointer; color: #cfd6e1; }
.stars button.on { color: #f59e0b; }
.stars svg.i { width: 26px; height: 26px; fill: currentColor; stroke: currentColor; }
.stars-view { color: #f59e0b; letter-spacing: 1px; white-space: nowrap; }

/* ---------- Login ---------- */
.login { min-height: var(--app-height, 100dvh); width: 100%; display: grid; grid-template-columns: 1.1fr 1fr; }
.login-art { background: var(--chrome); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login-art::after { content: ""; position: absolute; right: -120px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%; border: 60px solid rgba(255,255,255,.035); }
.login-art h1 { font-family: var(--font-display); font-size: 36px; line-height: 1.12; max-width: 460px; margin-top: 12px; letter-spacing: -.035em; font-weight: 650; }
.login-art p { color: #a1a1a6; max-width: 440px; font-size: 15px; line-height: 1.55; }
.login-feats { display: grid; gap: 14px; margin-top: 28px; }
.login-feats div { display: flex; gap: 12px; align-items: center; color: #f5f5f7; }
.login-feats svg.i { color: var(--primary); }
.login-form-wrap { display: grid; place-items: center; padding: 32px; background: var(--bg);
  min-height: 100%; align-content: center; }
.login-form { width: 100%; max-width: 380px; display: grid; gap: 16px; }
.login-form h2 { font-family: var(--font-display); font-size: 28px; letter-spacing: -.03em; font-weight: 650; color: var(--text); }
.login-form .btn { height: 44px; font-weight: 600; }
.login-form .input { height: 44px; border-radius: 12px; }

/* ---------- Roles matrix ---------- */
.matrix th.rot { text-align: center; white-space: normal; min-width: 90px; text-transform: none; font-size: 12px; }
.matrix td.c { text-align: center; }
.matrix .yes { color: var(--success); }
.matrix .no { color: #d5dbe4; }

/* ---------- Print: Phiếu tiếp nhận & sửa chữa (HTML table) ---------- */
#print-root { display: none; }
@media print {
  @page { size: A4; margin: 6mm; }
  html, body { background: #fff !important; height: auto !important; }
  #app, #modal-root, #toast-root, .app-header, .shell { display: none !important; }
  #print-root {
    display: block !important;
    color: #000;
    font-family: "Times New Roman", Times, serif;
    font-size: 9.5px;
    line-height: 1.2;
  }
  .psc-sheet { width: 100%; }
  .psc-head {
    display: grid;
    grid-template-columns: 48px 1.2fr 1.4fr 110px;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
  }
  .psc-logo-l { width: 44px; height: auto; }
  .psc-logo-r { width: 110px; height: auto; justify-self: end; }
  .psc-co { font-size: 8.5px; font-weight: 700; line-height: 1.3; }
  .psc-br { font-size: 11px; font-weight: 800; }
  .psc-title { text-align: center; font-size: 15px; font-weight: 800; letter-spacing: .02em; }

  .psc-sheet table { border-collapse: collapse; width: 100%; }
  .psc-sheet td, .psc-sheet th {
    border: 1px solid #111;
    padding: 2px 4px;
    vertical-align: middle;
  }
  .psc-sheet th { background: #f2f2f2; font-weight: 700; text-align: center; font-size: 9px; }

  .psc-info .lab { font-weight: 700; white-space: nowrap; width: 1%; background: #fafafa; }
  .psc-info .val { min-width: 60px; }
  .psc-info .val.mono { font-family: Consolas, monospace; font-size: 8.5px; }
  .psc-info .wash { font-size: 9px; line-height: 1.45; }

  .psc-leg, .psc-note { font-size: 8px; margin: 4px 0; }
  .psc-pad0 { padding: 0 !important; vertical-align: top; width: 50%; }
  .psc-parts { width: 100%; }
  .psc-parts td { font-size: 8.5px; height: 14px; }
  .psc-mk { width: 14px; min-width: 14px; max-width: 14px; padding: 0 !important; text-align: center; }
  .psc-st { width: 24px; text-align: center; }

  .psc-jobs { margin-top: 4px; }
  .psc-jobs td { height: 16px; font-size: 9px; vertical-align: top; }

  .psc-foot { margin-top: 4px; }
  .psc-foot > tbody > tr > td { width: 50%; vertical-align: top; padding: 4px; }
  .psc-h { font-weight: 700; margin: 0 0 3px; font-size: 10px; }
  .psc-final td, .psc-next td { font-size: 8.5px; height: 13px; }
  .psc-sign td { text-align: center; font-size: 9px; vertical-align: top; }
  .psc-sign tr.tall td { height: 36px; }
  .psc-end { margin-top: 5px; font-size: 8px; font-style: italic; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .g-main { grid-template-columns: minmax(0, 1fr); }
  .pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pipeline a:nth-child(3n) { border-right: 0; }
  .pipeline a:nth-child(-n+3) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 900px) {
  .shell-body { grid-template-columns: 1fr; min-width: 0; width: 100%; }
  body.sidebar-collapsed .shell-body { grid-template-columns: 1fr; }
  /* Mobile shell: 1-row header — compact branch next to Làm mới */
  :root { --app-header-h: 52px; }

  .sidebar {
    position: fixed; left: 0;
    top: calc(var(--app-header-h, 52px) + env(safe-area-inset-top, 0px)); bottom: 0; width: min(300px, 86vw);
    height: auto; max-height: none;
    transform: translateX(-100%); transition: transform .2s; box-shadow: var(--shadow-lg);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 35;
    overflow: hidden;
  }
  html.pwa-standalone .sidebar {
    top: var(--app-header-h, 52px);
  }
  body.nav-open .sidebar { transform: none; }
  body.nav-open::after {
    content: ""; position: fixed;
    inset: calc(var(--app-header-h, 52px) + env(safe-area-inset-top, 0px)) 0 0;
    background: rgba(15,23,42,.4); z-index: 32;
    pointer-events: auto;
  }
  html.pwa-standalone body.nav-open::after {
    inset: var(--app-header-h, 52px) 0 0;
  }
  body.sidebar-collapsed .nav-group-title,
  body.sidebar-collapsed .nav a span,
  body.sidebar-collapsed .nav a .count { display: revert; }
  body.sidebar-collapsed .nav a { justify-content: flex-start; padding: 11px 12px; gap: 10px; min-height: 44px; }
  body.sidebar-collapsed .app-header .brand-text { display: block !important; }
  body.sidebar-collapsed .app-brand { width: auto !important; padding: 0 6px !important; justify-content: flex-start; }
  body.sidebar-collapsed .sidebar-toggle { display: none; }
  body.sidebar-collapsed .sidebar-rail-head { display: none; }
  body.sidebar-collapsed .app-page-title { margin-left: 0; }

  .menu-btn {
    display: grid;
    width: 40px;
    height: 40px;
    margin: 0 0 0 4px;
    flex: none;
    align-self: center;
  }
  .sidebar-toggle { display: none; }
  .sidebar-rail-head { display: none !important; }
  body.sidebar-collapsed .menu-btn { display: grid; }

  .app-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;
    height: calc(var(--app-header-h, 52px) + env(safe-area-inset-top, 0px));
    min-height: calc(var(--app-header-h, 52px) + env(safe-area-inset-top, 0px));
    max-height: calc(var(--app-header-h, 52px) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(0px, env(safe-area-inset-left, 0px));
    overflow: hidden;
  }
  .app-brand {
    width: auto;
    max-width: none;
    flex: 1 1 auto;
    min-width: 0;
    border-right: 0;
    padding: 0 4px;
    height: 48px;
    min-height: 48px;
    max-height: 48px;
    gap: 8px;
  }
  .app-header .brand-logo,
  body.sidebar-collapsed .app-header .brand-logo { width: 32px; height: 32px; border-radius: 8px; flex: none; }
  .app-header .brand-text { flex: 1 1 auto; min-width: 0; overflow: hidden; }
  .app-header .brand-name {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: none;
  }
  .app-header .brand-sub { display: none; }
  .app-page-title { display: none; }
  .app-header-divider { display: none; }
  .app-header .spacer { display: none; }

  /* Compact branch chip beside Làm mới — never full-width row */
  .branch-select.select,
  .app-header .branch-select.select {
    display: inline-block;
    box-sizing: border-box;
    width: auto !important;
    min-width: 0 !important;
    max-width: 72px !important;
    height: 30px;
    min-height: 30px;
    margin: 0 !important;
    padding: 0 4px 0 6px;
    font-size: 12px;
    line-height: 1.2;
    flex: none;
  }
  .app-header .branch-label {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    width: auto;
    max-width: 64px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 30px;
    margin: 0 !important;
    padding: 0 8px;
    font-size: 11px;
  }
  .topbar-tools {
    gap: 2px;
    flex: none;
    align-items: center;
    padding-right: 2px;
    min-width: 0;
  }
  .tool-icon { display: none; }
  .tool-icon[data-click="app-refresh"] {
    display: grid;
    width: 34px;
    height: 34px;
    min-width: 34px;
  }
  .lang-pill {
    display: inline-flex !important;
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,.12);
  }
  .lang-pill > span:not(.flag-vn) { display: none; }
  .lang-pill .flag-vn { width: 22px; height: 15px; }
  .user-chip { padding: 1px; min-width: 36px; min-height: 36px; }
  .user-meta { display: none; }

  .content {
    padding: 14px 14px max(24px, calc(14px + env(safe-area-inset-bottom, 0px)));
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: clip;
  }
  .content:has(> .wo-actionbar) {
    padding-top: 0;
  }
  .page-head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 14px;
  }
  .page-head .titles { flex: none; min-width: 0; width: 100%; }
  .page-head h2 { font-size: 20px; }
  .page-head .actions,
  .page-head-compact .actions {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    justify-content: stretch;
  }
  .page-head .actions:not(:has(.seg)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .page-head .actions:has(.seg) {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .page-head .actions .btn,
  .page-head .actions > a.btn,
  .page-head .actions > button.btn {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 40px;
    justify-content: center;
    white-space: normal;
    text-align: center;
    padding: 8px 12px;
    line-height: 1.3;
  }
  .page-head .actions:has(.seg) .btn { width: auto; white-space: nowrap; height: 36px; padding: 0 14px; }
  .page-head .actions .btn-primary { grid-column: 1 / -1; }

  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 12px; }
  .kpi-icon { display: none; }
  .kpi .v { font-size: 20px; }
  .kpi .l { font-size: 12px; line-height: 1.3; }

  .pipeline {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .pipeline a {
    border-right: 0 !important;
    border-bottom: 1px solid var(--border);
    padding: 12px;
  }

  .g-2, .g-3, .g-main { grid-template-columns: 1fr; }
  .login { grid-template-columns: 1fr; }
  .login-art { display: none; }
  .table-wrap, .board, .stepper, .sched-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .nav a { min-height: 44px; padding: 11px 12px; }
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .card { max-width: 100%; min-width: 0; }
  .wo-header .titles { min-width: 0; }
}
@media (max-width: 480px) {
  .page-head .actions:not(:has(.seg)) { grid-template-columns: minmax(0, 1fr); }
  .page-head .actions .btn-primary { grid-column: auto; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .form-grid.cols-3, .form-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .content { padding-left: 18px; padding-right: 18px; }
}
@media (max-width: 640px) {
  .form-grid, .form-grid.cols-3, .form-grid.cols-4, .form-grid.gsm-params, .checks { grid-template-columns: 1fr; grid-auto-flow: row; }
  .acc-grid { grid-template-columns: 1fr; }
  .acc-row { grid-template-columns: 1fr; gap: 8px; align-items: start; }
  .acc-charger-scan { max-width: none; flex: 1 1 100%; }
  .span-2 { grid-column: auto; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dt { margin-top: 8px; }
  .kv dt:first-child { margin-top: 0; }
  .toolbar .search-box { max-width: none; min-width: 100%; }
  .hbar { grid-template-columns: 100px 1fr 36px; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .btn-row, .toolbar { flex-wrap: wrap; }
  #toast-root { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
  #toast-root .toast { max-width: none; width: 100%; }
  .toast { max-width: none; }
  .app-header .brand-name { font-size: 15px; }
  .branch-select.select,
  .app-header .branch-select.select {
    max-width: 68px !important;
    font-size: 12px;
  }
  .sticky-foot {
    flex-wrap: wrap;
    justify-content: stretch;
    gap: 8px;
  }
  .sticky-foot .btn { flex: 1 1 calc(50% - 8px); min-height: 44px; }
  .sticky-foot .btn-primary { flex: 1 1 100%; }
}

/* ================= v2: GSM, SLA, đính kèm, lịch, cấu hình ================= */
:root { --cyan-bg: #e8f6fa; --cyan-fg: #0a6e82; --pink-bg: #f8eef1; --pink-fg: #8a3a52; }
.b-cyan { background: var(--cyan-bg); color: var(--cyan-fg); }
.b-pink { background: var(--pink-bg); color: var(--pink-fg); }
.t-cyan { background: var(--cyan-bg); color: var(--cyan-fg); }
.t-pink { background: var(--pink-bg); color: var(--pink-fg); }
.sla { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; white-space: nowrap; padding: 2px 8px; border-radius: 6px; }
.sla::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sla-overdue { background: var(--red-bg); color: var(--red-fg); }
.sla-warning { background: var(--amber-bg); color: var(--amber-fg); }
.sla-ok { background: var(--green-bg); color: var(--green-fg); }
.sla-not_counted, .sla-none { background: var(--slate-bg); color: var(--slate-fg); }
.sla-ready, .sla-completed { background: var(--teal-bg); color: var(--teal-fg); }
.sla-cancelled { background: var(--slate-bg); color: var(--muted); }
.src { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; letter-spacing: .02em; white-space: nowrap; }
.src-gsm { background: var(--primary-50); color: var(--primary-700); }
.src-retail { background: var(--slate-bg); color: var(--slate-fg); }
.src-bship { background: #e6f7f3; color: #0f766e; }
body.theme-dark .src-bship { background: rgba(20,184,166,.16); color: #5eead4; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border-strong); background: #fff; border-radius: 16px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; user-select: none; }
.chip:hover { border-color: var(--primary); }
.chip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip-static { cursor: default; background: var(--slate-bg); border-color: transparent; color: var(--text-2); padding: 1px 8px; font-size: 12px; }
.seg { display: inline-flex; flex-wrap: nowrap; align-items: stretch; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; max-width: 100%; }
.seg button { border: 0; background: #fff; padding: 8px 14px; cursor: pointer; font-weight: 600; color: var(--text-2); display: inline-flex; gap: 6px; align-items: center; justify-content: center; white-space: nowrap; flex: 0 0 auto; }
.seg button + button { border-left: 1px solid var(--border-strong); }
.seg button.on { background: var(--primary-50); color: var(--primary-600); }
@media (max-width: 900px) {
  .page-head .actions .seg { width: 100%; }
  .page-head .actions .seg button { flex: 1 1 0; min-height: 40px; }
}
.quick-tabs { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; padding: 12px 16px 0; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.quick-tabs a { display: inline-flex; gap: 6px; align-items: center; padding: 5px 11px; border-radius: 16px; border: 1px solid var(--border); color: var(--text-2); font-size: 12.5px; font-weight: 500; background: #fff; flex: none; white-space: nowrap; }
.quick-tabs a:hover { text-decoration: none; border-color: var(--primary-100); background: var(--primary-50); }
.quick-tabs a.active { background: var(--primary-50); border-color: var(--primary-100); color: var(--primary-600); font-weight: 650; }
.quick-tabs .n { font-size: 11.5px; font-weight: 700; opacity: .8; }
.wo-list-card .toolbar { border-top: 0; }
.wo-list-card .toolbar > .search-box {
  flex: 1 1 100%;
  width: 100%;
  max-width: none;
  min-width: 0;
}
.wo-list-card .toolbar > .search-box .input { width: 100%; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.att { position: relative; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.att a.thumb { display: grid; place-items: center; aspect-ratio: 4 / 3; background: #f1f4f9; color: var(--muted); overflow: hidden; }
.att a.thumb img { width: 100%; height: 100%; object-fit: cover; }
.att a.thumb svg.i { width: 34px; height: 34px; }
.gallery a.thumb { cursor: zoom-in; }

/* Xem ảnh trong app (trên cả bảng trượt 200 và hộp thoại 220) */
.lb { position: fixed; inset: 0; z-index: 400; background: rgba(10, 14, 22, .92); display: flex; flex-direction: column; animation: lb-in .15s ease-out; }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
.lb-top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; color: #fff; }
.lb-count { flex: 1; font-size: 14px; font-weight: 600; opacity: .85; }
.lb-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer; }
.lb-btn:hover { background: rgba(255, 255, 255, .22); }
.lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-btn svg.i { width: 22px; height: 22px; }
.lb-stage { flex: 1; min-height: 0; position: relative; display: flex; align-items: center; justify-content: center; padding: 0 64px 24px; overflow: hidden; }
.lb-img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; max-height: calc(100dvh - 88px); object-fit: contain; border-radius: 6px; cursor: zoom-in; user-select: none; }
.lb-note { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 13px; text-align: center; }
.lb-note[hidden] { display: none; }
.lb.zoom .lb-stage { display: block; text-align: center; overflow: auto; }
.lb.zoom .lb-img { display: inline-block; }
.lb.zoom .lb-img { max-width: none; max-height: none; cursor: zoom-out; }
.lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; }
.lb-prev { left: 12px; }
.lb-next { right: 12px; }
@media (max-width: 640px) {
  .lb-stage { padding: 0 8px 16px; }
  .lb-nav { top: auto; bottom: 16px; transform: none; }
}
.att .meta { padding: 6px 8px; font-size: 11.5px; line-height: 1.3; }
.att .meta .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att .del { position: absolute; top: 4px; right: 4px; background: rgba(255,255,255,.92); border-radius: 6px; }
.att .drive { position: absolute; top: 4px; left: 4px; font-size: 10px; font-weight: 700; background: #fff; color: #188038; border-radius: 4px; padding: 1px 5px; }
.upload-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.upload-bar label.btn input,
label.btn input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
label.btn { position: relative; cursor: pointer; }

.quote-cost-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: stretch;
}
.quote-cost-row .k {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 0;
  font-weight: 600;
  flex: none;
}
.quote-cost-row .v {
  font-weight: 600;
  font-size: 13.5px;
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}
.quote-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--primary-50);
  border: 1px solid var(--primary-100);
  min-width: 0;
  min-height: 0;
}
.quote-stat > .k {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.quote-stat > .v {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}
.quote-stat-pdf {
  background: #f6faf8;
  border-color: #dcece4;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
}
.quote-stat-pdf .k {
  text-align: center;
  flex: none;
}
.quote-stat-pdf .quote-files {
  justify-content: center;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  margin: 0;
}
.quote-stat-pdf .btn-sm {
  height: 28px;
  min-height: 28px;
  padding: 0 8px;
  font-size: 12.5px;
}
@media (max-width: 640px) {
  .quote-stat {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .quote-cost-row .v { text-align: left; }
  .quote-stat-pdf {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .quote-stat-pdf .k { text-align: left; }
  .quote-stat-pdf .quote-files {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .quote-chip .nm { max-width: min(160px, 42vw); }
}
.quote-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 36px; }
.quote-inline > .k { margin-bottom: 0; flex: none; }
.quote-files { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.quote-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 6px 8px 6px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: #f7f9fc; font-size: 12.5px; line-height: 1.2;
}
.quote-chip a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; min-width: 0; }
.quote-chip a:hover { color: var(--primary); }
.quote-chip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; font-weight: 500; }
.quote-chip .btn { flex: none; }

.bh-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.bh-section { margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--border); }
.bh-section:first-of-type { border-top: 0; padding-top: 0; }
.card-body > .bh-section:first-child { border-top: 0; padding-top: 0; }
.bh-section-title {
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin-bottom: 8px;
}
.bh-section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.bh-section-head .bh-section-title { margin-bottom: 0; }
.modal-body .bh-section { margin-top: 14px; padding-top: 12px; }
.modal-body .bh-section:first-child { margin-top: 8px; }

.photo-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.photo-slots.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.photo-slot { display: flex; flex-direction: column; gap: 6px; border: 1.5px dashed var(--border-strong); border-radius: 10px; padding: 10px; cursor: pointer; background: var(--bg); min-height: 0; }
.photo-slot:hover { border-color: var(--primary); background: var(--primary-50, #f0f6ff); }
.photo-slot.filled { border-style: solid; border-color: var(--primary-200, #c5d6f5); background: var(--surface); }
.photo-slot-preview { aspect-ratio: 4/3; border-radius: 8px; background: var(--surface); display: grid; place-items: center; color: var(--muted); overflow: hidden; }
.photo-slot-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-slot-label { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; line-height: 1.25; }
.photo-slot-label b { font-weight: 650; color: var(--text); }
.nq-row { display: grid; grid-template-columns: 120px 1fr; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.nq-row:last-child { border-bottom: 0; }
.nq-k { color: var(--muted); font-weight: 600; }
.nq-v { white-space: pre-wrap; color: var(--text); }
@media (max-width: 900px) {
  .photo-slots, .photo-slots.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nq-row { grid-template-columns: 1fr; gap: 2px; }
}
.progress-line { height: 3px; background: var(--primary-100); border-radius: 2px; overflow: hidden; margin: 8px 0; }
.progress-line div { height: 100%; width: 40%; background: var(--primary); animation: slide 1s infinite ease-in-out; }
.wo-clamp3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.35; font-size: 12px; }
.wo-nq-text { white-space: pre-line; overflow-wrap: anywhere; line-height: 1.45; font-size: 12px; padding: 2px 0; }
/* Đầu mục: chữ đậm, mỗi loại 1 màu (--nq), không tô nền */
.wo-nq { --nq: #334155; font-weight: 700; color: var(--nq); }
.wo-nq.nq-rep { --nq: #dc2626; } .wo-nq.nq-paint { --nq: #ea580c; } .wo-nq.nq-check { --nq: #2563eb; } .wo-nq.nq-bh { --nq: #16a34a; }
.wo-nq.nq-bq { --nq: #64748b; } .wo-nq.nq-out { --nq: #db2777; } .wo-nq.nq-tech { --nq: #7c3aed; } .wo-nq.nq-kh { --nq: #0891b2; }
.wo-nq.nq-plate { --nq: #b45309; } .wo-nq.nq-vin { --nq: #4f46e5; } .wo-nq.nq-odo { --nq: #0d9488; } .wo-nq.nq-pin { --nq: #65a30d; }
.wo-nq.nq-acc { --nq: #0284c7; } .wo-nq.nq-qr { --nq: #0f766e; } .wo-nq.nq-old { --nq: #e11d48; } .wo-nq.nq-driver { --nq: #9333ea; } .wo-nq.nq-phone { --nq: #c026d3; }
body.theme-dark .wo-nq { color: color-mix(in srgb, var(--nq) 55%, #fff); }
.att-progress-inline { margin-top: 6px; min-width: 0; }
.att-progress-inline .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-progress-inline .progress-line, #att-progress .progress-line { margin: 4px 0 0; background: #dcfce7; }
.att-progress-inline .progress-line div, #att-progress .progress-line div { background: #16a34a; }
@keyframes slide { from { margin-left: -40%; } to { margin-left: 100%; } }
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 18px; }
.info-grid .k { font-size: 12px; color: var(--muted); }
.info-grid .v { font-weight: 500; overflow-wrap: anywhere; }
.sched-wrap { overflow-x: auto; }
table.sched { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 760px; }
.sched th, .sched td { border-bottom: 1px solid var(--border); padding: 6px; text-align: center; }
.sched th { font-size: 12px; color: var(--muted); font-weight: 600; background: #f8fafc; }
.sched th.today { color: var(--primary); background: var(--primary-50); }
.sched td.name { text-align: left; white-space: nowrap; padding-left: 14px; }
.shift { display: inline-grid; place-items: center; min-width: 46px; height: 30px; border-radius: 7px; font-weight: 700; font-size: 12.5px; border: 1px dashed var(--border-strong); background: #fff; color: var(--muted); cursor: default; }
button.shift { cursor: pointer; }
button.shift:hover { border-color: var(--primary); }
.shift.s-1 { background: var(--green-bg); color: var(--green-fg); border: 0; }
.shift.s-05 { background: var(--cyan-bg); color: var(--cyan-fg); border: 0; }
.shift.s-OFF { background: var(--slate-bg); color: var(--slate-fg); border: 0; }
.shift.s-PN { background: var(--amber-bg); color: var(--amber-fg); border: 0; }
.settings-section { display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding: 20px; border-bottom: 1px solid var(--border); }
.settings-section:last-child { border-bottom: 0; }
.settings-section h4 { font-size: 14.5px; margin-bottom: 4px; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch input { appearance: none; width: 40px; height: 22px; border-radius: 12px; background: #cfd7e3; position: relative; cursor: pointer; transition: background .15s; margin: 0; }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked { background: var(--primary); }
.switch input:checked::after { left: 21px; }
.cv-status-bar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: #eef1f6; margin-top: 8px; }
.cv-status-bar div { height: 100%; }
@media (max-width: 900px) { .settings-section { grid-template-columns: 1fr; gap: 10px; } }
[hidden] { display: none !important; }
.t-orange { background: var(--orange-bg); color: var(--orange-fg); }

.card-head { flex-wrap: wrap; }
.card-head h3 { min-width: 0; overflow-wrap: anywhere; }
.stepper { min-width: 0; }
@media (max-width: 900px) {
  .wo-actionbar-top { padding: 4px 10px; min-height: 36px; }
  .card-head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
  }
  .card-inspect .card-head {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }
  .card-inspect .card-head h3,
  .card-head h3 {
    flex: 1 1 140px;
    min-width: 0;
    font-size: 14px;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .card-inspect .card-head-actions,
  .card-head-actions {
    margin-left: 0;
    flex: 1 1 auto;
    justify-content: flex-end;
    max-width: 100%;
  }
  .btn-label-full { display: none !important; }
  .btn-label-short { display: inline !important; }
}
@media (max-width: 640px) {
  .m-card-top {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 10px;
  }
  .m-card-title { flex: 1 1 140px; min-width: 0; }
  .m-card-meta { flex: 0 1 auto; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .wo-actionbar { padding-top: 38px; }
  .wo-actionbar-top { padding: 3px 8px; min-height: 34px; height: auto; }
  .wo-actionbar-body { padding: 6px 0 8px; gap: 5px; }
  .wo-header h2 { font-size: 18px; }
  .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .info-grid .k, .info-grid .v { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
  .app-header .brand-name { font-size: 15px; }
  .branch-select.select,
  .app-header .branch-select.select {
    max-width: 64px !important;
    font-size: 12px;
  }
  .kv, .kv-sla {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }
  .kv dt, .kv-sla dt {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.3;
  }
  .kv dt:first-child, .kv-sla dt:first-child { margin-top: 0; }
  .kv dd, .kv-sla dd {
    margin: 0 0 2px;
    line-height: 1.35;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .assign-people { grid-template-columns: 1fr; }
  .step { min-width: 96px; font-size: 11.5px; padding: 0 6px; }
  .step .t { font-size: 10.5px; }
  .bh-section-head { flex-wrap: wrap; align-items: center; }
  .note-head { flex-wrap: wrap; }
  .note-title { min-width: 0; overflow-wrap: anywhere; }
}
.grid > *, .stack > *, .form-grid > * { min-width: 0; }
:root { --indigo-bg: #eef0f8; --indigo-fg: #3a3f6e; }
.b-indigo { background: var(--indigo-bg); color: var(--indigo-fg); }
.t-indigo { background: var(--indigo-bg); color: var(--indigo-fg); }

/* ---------- Unified mobile/touch polish ---------- */
.dd-mobile-extra { display: none !important; }
@media (max-width: 900px) {
  button.dd-mobile-extra { display: flex !important; }
  hr.dd-mobile-extra { display: block !important; }
  /* Tránh Safari iOS tự zoom khi focus input — trừ select cơ sở header (compact) */
  .input, .select:not(.branch-select), .textarea,
  input.input, select.select:not(.branch-select), textarea.textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select:not(.branch-select), textarea {
    font-size: 16px;
  }
  .app-header .branch-select.select {
    font-size: 12px !important;
  }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  /* Actionbar stick giữ compact — không phình theo touch target chung */
  .wo-actionbar-stick .btn,
  .wo-actionbar-stick .btn-sm,
  .wo-actionbar-stick .btn-icon,
  .wo-actionbar-stick .wo-btn-print,
  .wo-actionbar-stick .wo-btn-cancel {
    min-height: 28px !important;
    height: 28px !important;
  }
  .wo-actionbar-stick .wo-btn-print {
    width: 28px !important;
    min-width: 28px;
    padding: 0 !important;
  }
  .wo-actionbar-stick .wo-btn-cancel {
    padding: 0 8px !important;
  }
  .card-body { padding: 12px; }
  .kpis { gap: 8px; margin-bottom: 12px; }
  .kpi .v { font-size: 18px; line-height: 1.2; }
  .kpi .l { font-size: 11.5px; }
  .login-form-wrap { padding: max(24px, env(safe-area-inset-top, 0px)) 20px max(24px, env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 380px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .app-header .brand-name { font-size: 15px; }
}

/* ---------- iOS PWA header crisp (compositing) ---------- */
/*
  Toàn bộ nội dung header phải native 1:1 — không scale/zoom/filter/blur/glass.
  Ancestor (#app, .shell) cũng không được transform/filter.
  Không khai báo filter/backdrop-filter/transform (kể cả none) trên header.
*/
html.pwa-ios .app-header,
html.pwa-standalone .app-header {
  -webkit-font-smoothing: auto;
  text-rendering: geometricPrecision;
  background-color: var(--menu-bg);
  background-image: none;
}
html.pwa-ios .app-header .brand-name,
html.pwa-standalone .app-header .brand-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
  -webkit-font-smoothing: auto;
}
html.pwa-ios .app-header .branch-select.select,
html.pwa-standalone .app-header .branch-select.select {
  background-color: var(--chrome-2);
  color: #dce8f0;
  border: 1px solid #1a3a52;
  opacity: 1;
  -webkit-appearance: none;
  appearance: none;
}
html.pwa-ios .app-header .avatar,
html.pwa-standalone .app-header .avatar {
  background-color: var(--chrome-3);
  color: #dbeafe;
  border-color: #3b6ea5;
  -webkit-font-smoothing: auto;
}
html.pwa-ios .app-header .menu-btn,
html.pwa-ios .app-header .user-chip,
html.pwa-standalone .app-header .menu-btn,
html.pwa-standalone .app-header .user-chip {
  opacity: 1;
  background-image: none;
}
html.pwa-ios .app-header .brand-logo img,
html.pwa-standalone .app-header .brand-logo img {
  image-rendering: auto;
}

/*
  DIAG kết luận: kill filter/transform KHÔNG hết mờ → ngoài nhóm compositor CSS.
  Header: portal ra body + system font (body.pwa-header-ported).
*/

/*
  iOS PWA — form/content blur (cùng gốc với header):
  Nested overflow:hidden + sticky trong .content → WebKit raster nhòe.
  Nút sticky-foot khi kéo tới nhìn ok hơn vì layer khác.
  Fix: một scrollport, footer fixed, tắt -webkit-overflow-scrolling.
*/
html.pwa-ios .shell,
body.pwa-header-ported #app > .shell {
  overflow: visible;
}
html.pwa-ios .shell-body {
  overflow: hidden;
  min-height: 0;
  height: 100%;
}
html.pwa-ios .content {
  -webkit-overflow-scrolling: auto;
  overscroll-behavior: contain;
  -webkit-font-smoothing: auto;
  background-color: var(--bg);
}

/* ---------- WO detail: màu nhẹ (pastel, không đậm) ---------- */
.card-sla .card-head {
  background: #fffaf3;
  border-bottom-color: #f5e6c8;
}
.card-inspect .card-head {
  background: #f7f9ff;
  border-bottom-color: #e2eafc;
}
.card-assign .card-head {
  background: #faf8ff;
  border-bottom-color: #ebe4ff;
}
.kv-sla dt {
  font-size: 12.5px;
  font-weight: 600;
}
.kv-sla dd {
  padding: 2px 0;
}
.assign-body { gap: 12px; }
.assign-people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.assign-person {
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid var(--border);
  min-width: 0;
}
.assign-person-tech {
  background: var(--primary-50);
  border-color: var(--primary-100);
}
.assign-person-qc {
  background: #fff8f1;
  border-color: #f3e0c8;
}
.assign-role {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 6px;
}
.assign-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 600;
  font-size: 13.5px;
  min-width: 0;
}
.assign-name .select { width: 100%; min-width: 0; }
.note-block {
  border-radius: 10px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.note-ktv {
  background: #f6fbf7;
  border-color: #d8eee4;
}
.note-cvdv {
  background: var(--primary-50);
  border-color: var(--primary-100);
}
.note-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.note-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
}
.note-title svg.i { width: 14px; height: 14px; }
.note-ktv .note-title { color: #3d9b6a; }
.note-cvdv .note-title { color: var(--primary); }
.note-body {
  padding: 10px 12px;
  font-size: 13.5px;
  min-height: 36px;
  color: var(--text);
}
/* Excel / export — xanh nhạt */
.page-head .actions .btn[data-click="wo-export"] {
  background: #f1faf5;
  border-color: #cfe8d8;
  color: #2f8f5b;
}
.page-head .actions .btn[data-click="wo-export"]:hover {
  background: #e6f6ec;
  border-color: #b7ddc4;
}
/* Card nhận xe — đầu mục tint nhẹ */
#wo-form .card > .card-head {
  background: #f8faff;
  border-bottom-color: #dce8f0;
}
#wo-form .card.gsm-only > .card-head {
  background: #f5faf8;
  border-bottom-color: #ddeee6;
}
body.theme-dark .card-sla .card-head,
body.theme-dark .card-assign .card-head,
body.theme-dark .card-inspect .card-head {
  background: transparent;
}
body.theme-dark .quote-stat,
body.theme-dark .assign-person,
body.theme-dark .note-block {
  background: #1e293b;
  border-color: var(--border);
}
body.theme-dark .assign-person-tech {
  background: #1e3a5f;
}
body.theme-dark .note-ktv .note-title { color: #86efac; }
body.theme-dark .note-cvdv .note-title { color: #5eead4; }

/* ---------- Mobile: chống chữ đè / chồng (v158) ---------- */
@media (max-width: 900px) {
  .wo-dms {
    flex: 1 1 0;
    min-width: 0;
    max-width: 100%;
  }
  .wo-actionbar-primary .wo-btn-primary,
  .wo-actionbar-primary .btn-primary,
  .wo-actionbar-more .wo-btn-more {
    white-space: normal;
    height: auto;
    min-height: 36px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .tabs { gap: 2px; }
  .tabs a { padding: 10px 10px 8px; font-size: 13px; }
  .modal-head h3,
  .modal-body .field > label,
  .modal-body .label {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .field > label, .label {
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .badge, .tag, .sla, .src {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .list-item { flex-wrap: wrap; align-items: flex-start; }
  .list-item .grow { min-width: 0; flex: 1 1 140px; }
}
@media (max-width: 480px) {
  .info-grid { grid-template-columns: 1fr; }
  .acc-grid { grid-template-columns: 1fr; }
  .page-head h2 { font-size: 18px; }
  .wo-actionbar-tools { max-width: min(48vw, 160px); }
  .quote-chip {
    max-width: 100%;
  }
  .quote-chip .nm { max-width: min(200px, 55vw); }
}

/* ---------- Redesign v162: mobile polish ---------- */
@media (max-width: 900px) {
  .wo-actionbar-top {
    gap: 6px;
    overflow: hidden;
    min-width: 0;
  }
  .wo-actionbar-status {
    width: 100%;
    gap: 6px;
  }
  .wo-actionbar-more {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .wo-actionbar-more .wo-btn-more {
    flex: none;
    width: 100%;
    min-height: 40px;
    height: auto;
    padding: 8px 10px;
    white-space: normal;
    line-height: 1.3;
    text-align: center;
  }
  .wo-back {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
  }
  .wo-dms {
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
    border-radius: 8px;
  }
  .card-head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
  }
  .card-head h3 {
    flex: 1 1 140px;
    min-width: 0;
    line-height: 1.35;
  }
  .card-head-actions {
    width: 100%;
    margin-left: 0;
    justify-content: stretch;
  }
  .card-head-actions .btn {
    flex: 1 1 auto;
    min-height: 40px;
  }
  .selected-customer,
  .selected-customer-side,
  .selected-customer-top {
    flex-wrap: wrap;
  }
  .selected-side {
    width: 100%;
    max-width: 100%;
    align-items: stretch;
    text-align: left;
    margin-left: 0;
  }
  .selected-side-meta { white-space: normal; }
  .selected-open-inline {
    white-space: normal;
    max-width: 100%;
  }
  .quick-tabs a {
    min-height: 36px;
    padding: 6px 12px;
  }
  .tabs a {
    min-height: 44px;
    align-items: center;
  }
  /* Modal / PDF bottom sheet: full width, safe scroll */
  .modal {
    max-width: none;
    width: 100%;
    max-height: min(92dvh, calc(var(--app-height, 100dvh) - env(safe-area-inset-top, 0px)));
  }
  .modal-head {
    gap: 8px;
    padding: 12px 14px;
    min-width: 0;
  }
  .modal-head h3 {
    min-width: 0;
    font-size: 15px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  .modal-body {
    padding: 14px;
    min-width: 0;
  }
  .modal-foot {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px max(12px, env(safe-area-inset-bottom, 0px));
  }
  .modal-foot .btn {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
  }
  .quote-chip {
    max-width: 100%;
    flex-wrap: wrap;
  }
  .quote-chip .nm {
    max-width: min(200px, 52vw);
    white-space: nowrap;
  }
  .toolbar-sm {
    align-items: stretch;
  }
  .toolbar-sm > .select {
    min-width: 0 !important;
    max-width: 100%;
    flex: 1 1 calc(50% - 6px);
  }
  .wo-list-card .toolbar > .select:first-of-type {
    flex: 1 1 100%;
  }
}
@media (max-width: 480px) {
  .wo-actionbar-more { grid-template-columns: 1fr; }
  .wo-actionbar-tools { max-width: min(46vw, 160px); }
  .app-brand { min-width: 0; }
  .branch-select.select,
  .app-header .branch-select.select {
    max-width: 60px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .nav a.active, .btn-primary, .modal, .toast { transition: none; animation: none; }
}

/* ---------- Apple-inspired redesign v241 (force cascade) ---------- */
.boot {
  background: var(--chrome) !important;
  color: #a1a1a6;
}
.boot-msg { color: #86868b; }
.main-pane {
  background: var(--bg) !important;
}
.nav a.active {
  background: var(--menu-active-bg, var(--primary)) !important;
  box-shadow: none !important;
}
.btn-primary {
  background: var(--primary) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.btn-primary:hover {
  background: var(--primary-600) !important;
}
.card-head,
.modal-head,
.tabs {
  background: var(--surface) !important;
}
.page-head h2 {
  font-size: 28px;
  font-weight: 650;
  letter-spacing: -.03em;
}
.kpi .v {
  font-size: 26px;
  font-weight: 650;
}
.login-art {
  background: var(--chrome) !important;
}
.login-art p { color: #a1a1a6; }
.login-feats div { color: #f5f5f7; }
.login-feats svg.i { color: var(--primary); }
.login-form-wrap {
  background: var(--bg) !important;
}
.login-form h2 {
  font-size: 28px;
  font-weight: 650;
}
.login-form .input { border-radius: 12px; }
.src-retail {
  background: var(--slate-bg) !important;
  color: var(--slate-fg) !important;
}
.seg button.on {
  background: var(--primary);
  color: #fff;
}
.sticky-foot,
.wo-actionbar-stick {
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 20px -18px rgba(0, 0, 0, .14);
}
.toast {
  border-color: rgba(255,255,255,.12);
  border-radius: 12px;
}
.app-header .brand-sub { color: #86868b; }
.app-page-title { color: #f5f5f7; }
.app-header .tool-icon { color: #a1a1a6; }
.sidebar-toggle,
.menu-btn { color: #a1a1a6; }
.nav a { color: #a1a1a6; }
.nav-group-title {
  text-transform: none;
  letter-spacing: -.01em;
  color: #636366;
  font-weight: 600;
}
.acc-grid {
  background: var(--surface-2);
  border-color: var(--border);
}
body.theme-dark .btn-primary {
  background: var(--primary) !important;
  box-shadow: none !important;
}
body.theme-dark .main-pane { background: #000 !important; }
body.theme-dark .card-head,
body.theme-dark .tabs,
body.theme-dark .modal-head { background: var(--surface) !important; }

/* ---------- v250: modal theo visualViewport (bàn phím ảo) + máy quét mã ---------- */
/* --vvh / --vv-top do core.js đặt từ window.visualViewport: modal co lên trên bàn phím */
.modal-backdrop {
  inset: auto 0;
  top: var(--vv-top, 0px);
  height: var(--vvh, 100%);
}
.modal { max-height: min(720px, 100%); }
@media (max-width: 900px) {
  .modal { max-height: min(92%, calc(100% - env(safe-area-inset-top, 0px))); }
}
@media (max-width: 640px) {
  .modal > .modal-body:last-child,
  .modal > form > .modal-body:last-child { padding-bottom: max(14px, env(safe-area-inset-bottom, 0px)); }
  html.kb-open .modal { max-height: calc(100% - 8px); }
}
html.kb-open .modal-foot { padding-bottom: 12px; }
html.kb-open .modal > .modal-body:last-child,
html.kb-open .modal > form > .modal-body:last-child { padding-bottom: 14px; }

.scan-body { display: flex; flex-direction: column; gap: 12px; }
.scan-hint { min-height: 1.4em; }
.scan-actions { display: flex; gap: 8px; justify-content: space-between; flex-wrap: wrap; }
@media (max-width: 640px) {
  .modal-backdrop.scan-backdrop { background: #000; align-items: stretch; padding: 0; }
  .modal-backdrop .modal.scan-modal {
    height: 100%; max-height: none; max-width: none; width: 100%;
    border: 0; border-radius: 0; box-shadow: none;
    background: #000; color: #fff;
    animation: fade .15s ease-out;
  }
  .modal-backdrop .modal.scan-modal .modal-head {
    background: #000 !important;
    border-bottom-color: rgba(255, 255, 255, .12);
    padding: max(12px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 12px max(14px, env(safe-area-inset-left, 0px));
  }
  .scan-modal .modal-head h3 { color: #fff; font-size: 17px; }
  .scan-modal .modal-head .btn { color: #fff; min-width: 44px; min-height: 44px; }
  .scan-modal .scan-body {
    flex: 1; overflow: hidden;
    padding: 12px max(12px, env(safe-area-inset-right, 0px)) max(16px, calc(10px + env(safe-area-inset-bottom, 0px))) max(12px, env(safe-area-inset-left, 0px));
  }
  .scan-modal .scan-viewport { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; border-radius: 16px; }
  .scan-modal .scan-frame {
    inset: auto; top: 50%; left: 50%;
    width: min(72%, 300px); aspect-ratio: 1; max-height: 80%;
    transform: translate(-50%, -50%);
    border-radius: 18px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .45);
  }
  .scan-modal .scan-hint { color: rgba(255, 255, 255, .8); text-align: center; }
  .scan-modal .scan-actions { flex-wrap: nowrap; }
  .scan-modal .scan-actions .btn {
    flex: 1 1 0; min-height: 48px; justify-content: center;
    background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255, 255, 255, .22);
  }
}

/* ---------- v252: trang Đồng bộ AppSheet ---------- */
.i.spin { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.warn-text { color: var(--amber-fg); }
.as-block { margin-bottom: 12px; }
#as-result > .alert { margin-bottom: 12px; }
#as-result .alert > div { min-width: 0; }
.as-result-close { flex: none; margin: -4px -6px -4px auto; color: inherit; }
.as-result-list { margin: 6px 0 0; padding-left: 18px; }
.as-result-list li + li { margin-top: 2px; }
.as-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; margin-bottom: 16px; }
.as-grid > * { min-width: 0; }
.as-switch { flex: none; margin-left: auto; font-size: 13px; font-weight: 500; }
.as-info { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px 20px; }
.as-info .v { margin-top: 2px; }
.as-sub { font-size: 12px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.as-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.as-stat { padding: 10px 6px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); text-align: center; min-width: 0; }
.as-stat .v { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.as-stat .l { font-size: 12px; color: var(--muted); }
.as-stat.warn .v { color: var(--amber-fg); }
.as-stat.bad .v { color: var(--red-fg); }
.as-cursors { margin-top: 14px; display: grid; }
.as-cursor { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 13px; padding: 10px 0; border-top: 1px solid var(--border); }
.as-cursor > div { min-width: 0; }
.as-cursor .right { text-align: right; flex: none; }
.as-runs th.num, .as-runs td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.as-runs tr.as-row { cursor: pointer; }
.as-runs tr.as-row:hover td { background: var(--surface-2); }
.as-runs tr.as-detail > td { background: var(--surface-2); padding: 12px 16px; }
.as-expand svg.i { transition: transform .15s; }
.as-expand[aria-expanded="true"] svg.i { transform: rotate(90deg); }
.as-tbl { display: grid; gap: 8px; }
.as-tbl-item { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.as-tbl-head { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 4px; }
.as-nums { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; font-size: 13px; color: var(--text-2); }
.as-nums b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.as-nums b.warn-text { color: var(--amber-fg); }
.as-extra { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.as-conf { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; }
.as-conf li + li { margin-top: 3px; }
.as-err { margin-top: 8px; white-space: pre-wrap; }
.as-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.as-m-card details { margin-top: 8px; }
.as-m-card summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--primary); padding: 4px 0; }
.as-m-card details .as-tbl { margin-top: 6px; }
.as-foot { padding: 10px 16px; border-top: 1px solid var(--border); }
.page-head .actions.as-actions:not(:has(.seg)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-head .actions.as-actions .btn-primary { grid-column: auto; }
@media (max-width: 900px) {
  .as-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .as-info { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
  .as-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .as-cursor { flex-direction: column; gap: 4px; }
  .as-cursor .right { text-align: left; }
  .as-switch span { font-size: 12.5px; }
}

/* ---------- v253: màu thanh menu (Cấu hình → Giao diện) ---------- */
/* Mọi màu header + sidebar lấy từ --menu-*; !important để thắng các khối PWA / theme-dark phía trên */
.app-header {
  background-color: var(--menu-bg) !important;
  color: var(--menu-fg);
  border-bottom-color: var(--menu-border) !important;
}
.app-brand { border-right-color: var(--menu-border); }
.app-header .brand-name,
.app-page-title { color: var(--menu-fg) !important; }
.app-header .brand-sub { color: var(--menu-muted) !important; }
.app-header .tool-icon,
.app-header .menu-btn,
.app-header .sidebar-toggle { color: var(--menu-muted) !important; }
.app-header .tool-icon:hover,
.app-header .menu-btn:hover,
.app-header .sidebar-toggle:hover,
.app-header .user-chip:hover {
  background: var(--menu-hover) !important;
  color: var(--menu-fg) !important;
  border-color: transparent !important;
}
.app-header .lang-pill,
.app-header .lang-pill:hover { background: var(--menu-hover-2) !important; color: var(--menu-fg) !important; }
.app-header .branch-select.select,
.app-header .branch-label {
  background-color: var(--menu-bg-2) !important;
  color: var(--menu-fg) !important;
  border: 1px solid var(--menu-ctrl-border) !important;
  color-scheme: dark;
}
html.menu-light .app-header .branch-select.select,
html.menu-light .app-header .branch-label { color-scheme: light; }
.app-header .user-chip .avatar {
  background: var(--menu-bg-3) !important;
  color: var(--menu-fg) !important;
  border-color: var(--menu-ctrl-border) !important;
}
.sidebar {
  background: var(--menu-bg);
  color: var(--menu-muted);
  border-right-color: var(--menu-border);
}
.sidebar-rail-toggle { background: var(--menu-hover); color: var(--menu-fg); }
.sidebar-rail-toggle:hover { background: var(--menu-hover-2); color: var(--menu-fg); }
.nav { scrollbar-color: var(--menu-scroll) transparent; }
.nav::-webkit-scrollbar-thumb,
.nav::-webkit-scrollbar-thumb:hover { background: var(--menu-scroll); }
.nav-group-title { color: var(--menu-subtle); }
.nav a { color: var(--menu-muted); }
.nav a:hover { background: var(--menu-hover); color: var(--menu-fg); }
.nav a.active,
.nav a.active:hover { background: var(--menu-active-bg) !important; color: var(--menu-active-fg); }
html.menu-custom .nav a.active { font-weight: 600; }
.nav a .count { background: var(--menu-hover-2); color: var(--menu-fg); }
.nav a.active .count { background: var(--menu-active-count); color: var(--menu-active-fg); }

/* Cấu hình: bảng chọn màu thanh menu */
.menu-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.menu-swatch {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text);
  font: inherit; font-size: 13px; font-weight: 500; text-align: left; cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.menu-swatch:hover { border-color: var(--border-strong); }
.menu-swatch[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.menu-swatch .dot { width: 24px; height: 24px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
body.theme-dark .menu-swatch .dot { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.menu-swatch .nm { min-width: 0; line-height: 1.25; }
.menu-color-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.menu-color-row input[type="color"] {
  width: 48px; height: 40px; padding: 3px; flex: none; cursor: pointer;
  border: 1px solid var(--border-strong); border-radius: 10px; background: var(--surface);
}
.menu-color-row .input.menu-hex { width: 130px; flex: none; text-transform: uppercase; }
.menu-color-row .input.menu-hex[aria-invalid="true"] { border-color: var(--danger); }
.menu-mini {
  display: grid; grid-template-columns: 112px 1fr; grid-template-rows: 34px 96px;
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; max-width: 420px;
  background: var(--bg);
}
.menu-mini-bar {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: var(--menu-bg); color: var(--menu-fg); border-bottom: 1px solid var(--menu-border);
  font-size: 12.5px; font-weight: 700; letter-spacing: -.01em;
}
.menu-mini-bar .sp { flex: 1; }
.menu-mini-bar .chip { height: 20px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; background: var(--menu-bg-2); border: 1px solid var(--menu-ctrl-border); }
.menu-mini-bar .av { width: 20px; height: 20px; border-radius: 50%; background: var(--menu-bg-3); display: grid; place-items: center; font-size: 9px; font-weight: 700; }
.menu-mini-side { background: var(--menu-bg); border-right: 1px solid var(--menu-border); padding: 8px 6px; display: grid; align-content: start; gap: 3px; }
.menu-mini-side .t { font-size: 10px; font-weight: 600; color: var(--menu-subtle); padding: 0 6px 2px; }
.menu-mini-side .it { font-size: 11.5px; color: var(--menu-muted); padding: 4px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-mini-side .it.on { background: var(--menu-active-bg); color: var(--menu-active-fg); font-weight: 600; }
.menu-mini-main { padding: 10px; display: grid; align-content: start; gap: 6px; }
.menu-mini-main span { display: block; height: 8px; border-radius: 4px; background: var(--border); }
.menu-mini-main span:nth-child(2) { width: 70%; }
.menu-mini-main span:nth-child(3) { width: 45%; }
@media (max-width: 640px) {
  .menu-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu-mini { max-width: none; }
}

/* Thanh báo phiên bản mới */
/* left/right + margin auto (không left:50% + translate – hộp bị co còn nửa màn, chữ xuống dòng từng từ) */
.update-bar{position:fixed;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));margin:0 auto;width:max-content;max-width:min(560px, calc(100vw - 32px));
  z-index:9999;display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:10px 10px 10px 16px;border-radius:14px;background:#0f172a;color:#fff;
  box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:14px;line-height:1.4}
.update-bar > span{flex:1 1 180px;min-width:0}
.update-bar .btn{min-height:40px;padding:0 16px}
.update-bar .btn-ghost{background:transparent !important;border:1px solid rgba(255,255,255,.28) !important;color:#e2e8f0 !important}
@media (max-width:640px){
  .update-bar{width:auto}
  .update-bar > span{flex-basis:100%}
  .update-bar .btn{flex:1 1 0;min-height:44px}
}

/* Danh sách phiếu gọn: mỗi phiếu 1 dòng, tìm kiếm + bộ lọc chung 1 hàng */
.table-compact th, .table-compact td { padding-top: 7px; padding-bottom: 7px; vertical-align: middle; }
.table-compact td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-compact .cell-ellipsis { max-width: 320px; }
.table-compact .badge, .table-compact .tag { white-space: nowrap; }
@media (min-width: 900px) {
  .wo-list-card .toolbar-sm > .search-box-wide { flex: 1 1 260px; width: auto; }
  .wo-list-card .quick-tabs { padding-top: 8px; padding-bottom: 4px; }
}

@media (min-width: 900px) {
  .table-compact { table-layout: fixed; width: 100%; }
  .table-compact th:nth-child(1) { width: 15%; }
  .table-compact th:nth-child(2) { width: 13%; }
  .table-compact th:nth-child(3) { width: auto; }
  .table-compact th:nth-child(4) { width: 16%; }
  .table-compact th:nth-child(5) { width: 11%; }
  .table-compact th:nth-child(6) { width: 7%; }
  .table-compact th:nth-child(7) { width: 16%; }
  .table-compact td { font-size: 13px; padding-left: 10px; padding-right: 10px; }
  .table-compact th { padding-left: 10px; padding-right: 10px; }
  .table-compact .badge { font-size: 11.5px; }
  .table-compact .cell-ellipsis { max-width: none; }
}

/* Bảng phiếu kiểu lưới dữ liệu */
.wo-grid-wrap { overflow-x: auto; }
.wo-grid { table-layout: fixed; }
.wo-grid th { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; user-select: none; }
.wo-grid th.sortable { cursor: pointer; }
.wo-grid th.sortable:hover { color: var(--text); }
.wo-grid th.num, .wo-grid td.num { text-align: right; }
.wo-grid .grid-resize { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; z-index: 2; }
.wo-grid .grid-resize::after { content: ''; position: absolute; top: 25%; bottom: 25%; right: 3px; width: 2px; border-radius: 2px; background: var(--border); }
.wo-grid th:hover .grid-resize::after { background: var(--primary-600, #1464f4); }
.wo-grid .grid-filter-row th { padding: 4px 6px; background: var(--surface); text-transform: none; letter-spacing: 0; overflow: visible; }
.wo-grid .grid-filter { width: 100%; height: 28px; font-size: 12.5px; padding: 0 6px; min-width: 0; }
body.col-resizing { cursor: col-resize; user-select: none; }
.grid-colpick { position: relative; }
.grid-colpick-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 30; background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 8px 12px; display: grid; gap: 6px; min-width: 200px; }
.grid-colpick-menu.hidden { display: none; }
@media (min-width: 900px) {
  .wo-grid.table-compact th:nth-child(n) { width: auto; }
  .wo-list-card .toolbar-sm > .search-box-wide { flex: 1 1 260px; }
}
.wo-grid { min-width: 100%; }

/* Tiêu đề cột kiểu Dynamics 365: nhãn + ↑/↓ khi sắp xếp + phễu khi lọc + ˅ mở menu */
.wo-grid thead th { padding-right: 24px; }
.wo-grid th .th-in { display: flex; align-items: center; gap: 4px; min-width: 0; }
.wo-grid th .th-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wo-grid th .th-sort, .wo-grid th .th-flt { flex: none; display: inline-grid; color: var(--primary-600, #1464f4); }
.wo-grid th .th-sort .i { width: 13px; height: 13px; stroke-width: 2.4; }
.wo-grid th .th-flt .i { width: 12px; height: 12px; }
.wo-grid .th-caret { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: grid; color: var(--muted); pointer-events: none; }
.wo-grid .th-caret .i { width: 13px; height: 13px; }
.wo-grid th:hover .th-caret, .wo-grid th:focus-visible .th-caret { color: var(--text); }
.wo-grid th.sortable:focus-visible { outline: 2px solid var(--primary-600, #1464f4); outline-offset: -2px; }
.wo-grid th.grouped .th-label, .wo-grid th.filtered .th-label, .wo-grid th.sorted .th-label { color: var(--primary-600, #1464f4); }
/* Tiêu đề cột xuống dòng cho thấy hết chữ, không cắt "…" */
.wo-grid thead th { white-space: normal; text-overflow: clip; vertical-align: middle; line-height: 1.25; }
.wo-grid th .th-label { overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
/* Dòng tiêu đề nhóm (bấm để thu gọn) */
.wo-grid tr.grid-group-row td { background: var(--surface-2); font-size: 13px; padding-top: 7px; padding-bottom: 7px; cursor: pointer; user-select: none; }
.wo-grid tr.grid-group-row:hover td { background: var(--primary-50, #eef4ff); }
.wo-grid tr.grid-group-row:focus-visible { outline: 2px solid var(--primary-600, #1464f4); outline-offset: -2px; }
.gm-grp-caret { display: inline-grid; vertical-align: -2px; margin-right: 6px; color: var(--muted); transition: transform .15s; }
.gm-grp-caret .i { width: 14px; height: 14px; }
.closed > td > .gm-grp-caret, .m-group-head.closed > .gm-grp-caret { transform: rotate(-90deg); }
.gm-grp-col { color: var(--muted); }
.gm-grp-n { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.m-group-head { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 13px; cursor: pointer; }
.m-card[hidden], .wo-grid tr[hidden] { display: none !important; }

/* Ô bộ lọc đang áp dụng */
.gm-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 14px 4px; }
.gm-chip { display: inline-flex; align-items: center; max-width: 100%; border: 1px solid var(--primary-100, #cfe0ff); background: var(--primary-50, #eef4ff); border-radius: 999px; color: var(--primary-600, #1464f4); font-size: 13px; }
.gm-chip-main { display: inline-flex; align-items: center; gap: 6px; min-width: 0; border: 0; background: none; color: inherit; font: inherit; padding: 4px 4px 4px 10px; cursor: pointer; }
.gm-chip-group .gm-chip-main { cursor: default; }
.gm-chip-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.gm-chip-main .i, .gm-chip-x .i { width: 13px; height: 13px; flex: none; }
.gm-chip-x { display: grid; place-items: center; width: 26px; height: 26px; border: 0; background: none; color: inherit; border-radius: 999px; cursor: pointer; margin-right: 2px; }
.gm-chip-x:hover, .gm-chip-main:hover { background: rgba(0, 119, 237, .10); border-radius: 999px; }
.gm-chips-clear { height: 28px; }
.wo-mfilter-btn { display: none; }
.wo-mfilter-btn .gm-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--primary-600, #1464f4); color: #fff; font-size: 11px; }
@media (max-width: 900px) { .wo-mfilter-btn { display: inline-flex; } }

/* Menu cột + hộp "Lọc theo" (thẻ trắng, bóng nhẹ, biểu tượng bên trái) */
.gm-pop { position: fixed; z-index: 1000; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 12px 32px -8px rgba(16, 24, 40, .22); font-size: 14px; }
.gm-menu { min-width: 248px; padding: 4px 0; }
.gm-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; border: 0; background: none; text-align: left; font: inherit; font-size: 14px;
  color: var(--text); padding: 0 14px 0 10px; cursor: pointer; }
.gm-item:hover, .gm-item:focus-visible, .gm-has-sub.open > .gm-item { background: var(--surface-2); outline: none; }
.gm-item:focus-visible { box-shadow: inset 2px 0 0 var(--primary-600, #1464f4); }
.gm-check, .gm-ic { flex: none; width: 18px; display: grid; place-items: center; }
.gm-check .i { width: 15px; height: 15px; stroke-width: 2.4; }
.gm-ic .i { width: 18px; height: 18px; stroke-width: 1.6; }
.gm-lab { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-more { display: grid; color: var(--muted); }
.gm-more .i { width: 15px; height: 15px; }
.gm-danger { color: var(--danger, #d92d20); }
.gm-sep { height: 1px; background: var(--border); margin: 4px 0; }
.gm-has-sub { position: relative; }
.gm-sub { display: none; position: absolute; left: 100%; top: -5px; min-width: 170px; padding: 4px 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px -8px rgba(16, 24, 40, .22); }
.gm-sub-left .gm-sub { left: auto; right: 100%; }
.gm-has-sub.open > .gm-sub { display: block; }
.gm-box { width: 320px; padding: 16px; display: grid; gap: 12px; }
.gm-head { display: flex; align-items: center; gap: 8px; }
.gm-head b, .gm-sheet-head b { font-size: 17px; font-weight: 650; }
.gm-head .muted { flex: 1; min-width: 0; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-x { margin-left: auto; flex: none; border: 0; background: none; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; cursor: pointer; color: var(--text); padding: 0; }
.gm-x:hover, .gm-x:focus-visible { background: var(--surface-2); }
.gm-box .select, .gm-box .input { height: 40px; border-radius: 8px; font-size: 14px; width: 100%; }
.gm-box .input.gm-invalid { border-color: var(--danger, #d92d20); }
.gm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gm-btns .btn { height: 40px; border-radius: 8px; font-size: 14px; justify-content: center; }
.gm-err { color: var(--danger, #d92d20); font-size: 13px; }
.gm-checks { display: grid; gap: 0; max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; padding: 4px 0; }
.gm-opt { display: flex; align-items: center; gap: 10px; padding: 7px 12px; cursor: pointer; font-size: 14px; }
.gm-opt:hover { background: var(--surface-2); }
.gm-opt input { width: 16px; height: 16px; accent-color: var(--primary-600, #1464f4); flex: none; }
.gm-opt[hidden] { display: none; }
.gm-search { margin-bottom: 8px; }
.gm-range2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gm-range2 label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.gm-width { display: grid; gap: 10px; }
.gm-range { width: 100%; accent-color: var(--primary-600, #1464f4); }
.gm-px { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.gm-px .input { width: 110px; }
.gm-sheet-head { display: none; }
.gm-picker .gm-scroll { max-height: min(60vh, 460px); overflow: auto; }
/* Điện thoại: menu / hộp lọc thành bảng trượt từ đáy */
.gm-backdrop { position: fixed; inset: 0; z-index: 999; background: rgba(15, 23, 42, .38); }
.gm-pop.gm-sheet { left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 85vh; overflow: auto; border-radius: 16px 16px 0 0; border-bottom: 0;
  padding-bottom: calc(12px + env(safe-area-inset-bottom)); animation: gm-up .18s ease-out; }
.gm-sheet.gm-box { padding: 18px 16px calc(16px + env(safe-area-inset-bottom)); }
.gm-sheet .gm-sheet-head { display: flex; align-items: center; padding: 12px 16px 6px; }
.gm-sheet .gm-item { min-height: 48px; padding: 0 18px 0 14px; font-size: 15px; }
.gm-sheet .gm-sub { position: static; display: none; border: 0; box-shadow: none; border-radius: 0; padding: 0 0 0 28px; min-width: 0; }
.gm-sheet .gm-has-sub.open > .gm-sub { display: block; }
.gm-sheet .gm-has-sub.open .gm-more { transform: rotate(90deg); }
.gm-sheet .select, .gm-sheet .input { height: 46px; font-size: 16px; }
@keyframes gm-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gm-pop.gm-sheet { animation: none; } .gm-grp-caret { transition: none; } }
body.theme-dark .gm-pop, body.theme-dark .gm-sub { box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .6); }
body.theme-dark .gm-chip { background: rgba(124, 192, 255, .12); border-color: rgba(124, 192, 255, .3); }
/* Thanh lọc danh sách phiếu: 1 hàng trên máy tính */
@media (min-width: 900px) {
  .wo-list-card .toolbar-sm { flex-wrap: nowrap; }
  .wo-list-card .toolbar-sm > .search-box-wide { flex: 1 1 auto; min-width: 180px; }
  .wo-list-card .toolbar-sm > select.select { flex: 0 0 auto; width: 150px; max-width: 150px; }
  .wo-list-card .toolbar-sm > .tb-date { flex: 0 0 auto; width: 132px; height: 30px; font-size: 12.5px; padding: 0 6px; }
  .wo-list-card .toolbar-sm > .btn, .wo-list-card .toolbar-sm > .grid-colpick { flex: 0 0 auto; }
}
.ck-svc { width: 170px; padding-right: 24px; text-overflow: ellipsis; }
.ck-svc-empty { border-color: var(--amber-fg, #b45309); color: var(--amber-fg, #b45309); }
.ck-table th, .ck-table td { padding-left: 10px; padding-right: 10px; }
.ck-table th { white-space: normal; }

/* ---------- v260: giao diện kiểu ATT DealerOS ----------
   Thanh bên xanh navy (gradient), mục chọn xanh sáng; thanh trên trắng; nền xám nhạt; thẻ trắng bo 16px. */
:root {
  --primary: #1677ff; --primary-600: #0f6ae6; --primary-700: #0b5ccc; --electric: #1677ff; --accent: #1677ff;
  --primary-50: #ecf4ff; --primary-100: #d6e7ff; --primary-200: #b5d3ff; --ring: rgba(22, 119, 255, .22);
  --blue-fg: #0b5ccc;
  --dos-nav-1: #10396a; --dos-nav-2: #0b2a52; --dos-nav-3: #081f40;
  --radius: 14px; --radius-lg: 18px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 10px -4px rgba(16, 24, 40, .06);
  --shadow-md: 0 8px 24px -12px rgba(16, 24, 40, .16);
}
body:not(.theme-dark) { --bg: #f3f6fa; --border: #e3e8ef; --border-strong: #d3dae4; --surface-2: #f8fafc; }

/* Thanh bên + ô logo: navy */
.sidebar, .app-header .app-brand {
  background: linear-gradient(180deg, var(--dos-nav-1) 0%, var(--dos-nav-2) 50%, var(--dos-nav-3) 100%) !important;
  border-right: 0 !important;
}
.app-header .app-brand { background: var(--dos-nav-1) !important; }
.app-header .brand-name { color: #fff !important; font-weight: 750; font-size: 17px; }
.app-header .brand-sub { color: rgba(255, 255, 255, .55) !important; }
.app-header .sidebar-toggle { color: rgba(255, 255, 255, .7) !important; }
.app-header .sidebar-toggle:hover { background: rgba(255, 255, 255, .1) !important; color: #fff !important; }
.nav { padding: 8px 12px 16px; scrollbar-color: rgba(255, 255, 255, .2) transparent; }
.nav-group { margin-top: 14px; }
.nav-group-title { color: rgba(255, 255, 255, .42) !important; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 700; padding: 0 10px 8px; }
.nav a { color: rgba(255, 255, 255, .86) !important; font-weight: 500; padding: 10px 12px; border-radius: 10px; margin-bottom: 3px; }
.nav a svg.i { opacity: .9; }
.nav a:hover { background: rgba(255, 255, 255, .08) !important; color: #fff !important; }
.nav a.active, .nav a.active:hover {
  background: linear-gradient(180deg, #2a86ff, #1270f0) !important; color: #fff !important; font-weight: 650;
  box-shadow: 0 8px 18px -8px rgba(22, 119, 255, .75) !important;
}
.nav a .count { background: rgba(255, 255, 255, .14) !important; color: #fff !important; }
.sidebar-rail-toggle { background: rgba(255, 255, 255, .08); color: #fff; }

/* Thanh trên: trắng (tối: theo nền thẻ) */
.app-header {
  background-color: var(--surface) !important; color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important; box-shadow: 0 1px 0 rgba(16, 24, 40, .02);
}
.app-page-title { color: var(--text) !important; font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin-left: 20px; }
.app-header .tool-icon, .app-header .menu-btn { color: var(--text-2) !important; }
.app-header .tool-icon:hover, .app-header .menu-btn:hover, .app-header .user-chip:hover {
  background: var(--primary-50) !important; color: var(--primary) !important; border-color: transparent !important;
}
.app-header .lang-pill, .app-header .lang-pill:hover {
  background: var(--surface) !important; color: var(--primary-700) !important; border: 1px solid var(--border) !important;
}
.app-header .branch-select.select, .app-header .branch-label {
  background-color: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border-strong) !important;
  border-radius: 10px; height: 32px; min-height: 32px; font-size: 13px; padding: 0 10px; color-scheme: light;
}
body.theme-dark .app-header .branch-select.select, body.theme-dark .app-header .branch-label { color-scheme: dark; }
.app-header .user-chip .avatar { background: var(--primary-50) !important; color: var(--primary-700) !important; border-color: var(--border) !important; }

/* Nội dung: thẻ trắng bo tròn, bóng nhẹ */
.card { border-radius: 16px; border-color: var(--border); box-shadow: var(--shadow); }
.page-head h2 { font-weight: 750; letter-spacing: -.03em; }
.btn { border-radius: 10px; font-weight: 600; }
.btn-primary { background: linear-gradient(180deg, #2a86ff, #1270f0) !important; box-shadow: 0 6px 14px -8px rgba(22, 119, 255, .8) !important; }
.btn-primary:hover { background: linear-gradient(180deg, #1f7cf7, #0d63da) !important; }
.input, .select, textarea.input { border-radius: 10px; }
.quick-tabs a { border-radius: 999px; padding: 6px 13px; background: var(--surface); }
.quick-tabs a.active { background: var(--primary-50); border-color: var(--primary-200); color: var(--primary-700); }
.table th { background: var(--surface-2); letter-spacing: .05em; }

/* Ô số liệu (Tổng quan): viền trái màu + nền chuyển nhẹ như DealerOS */
.kpi { --kc: var(--primary); position: relative; border-radius: 16px; border-left: 4px solid var(--kc);
  background: linear-gradient(120deg, var(--surface) 55%, color-mix(in srgb, var(--kc) 9%, var(--surface))); }
.kpi:has(.t-green) { --kc: #16a34a; } .kpi:has(.t-amber), .kpi:has(.t-orange) { --kc: #f59e0b; }
.kpi:has(.t-red) { --kc: #ef4444; } .kpi:has(.t-violet), .kpi:has(.t-indigo) { --kc: #7c3aed; }
.kpi:has(.t-cyan) { --kc: #0891b2; } .kpi:has(.t-slate) { --kc: #64748b; }
.kpi .l { text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; font-weight: 700; }
.kpi .v { font-size: 28px; font-weight: 800; }
.kpi:hover { box-shadow: var(--shadow-md); text-decoration: none; }
.app-header .branch-label { display: inline-flex; align-items: center; line-height: 1; font-weight: 700; }
/* Điện thoại: thanh trên trắng liền, logo không có ô navy */
@media (max-width: 900px) {
  .app-header .app-brand { background: transparent !important; }
  .app-header .brand-name { color: var(--text) !important; }
  .app-header .brand-sub { color: var(--muted) !important; }
}
/* Ô chọn cơ sở: đủ chỗ cho tên dài (vd "N54502 – VinFast CarOn Tân Tạo") */
.app-header .branch-select.select { max-width: min(360px, 36vw) !important; padding-right: 30px !important; text-overflow: ellipsis; }

/* v262 – Chi tiết phiếu (máy tính): thanh lệnh dính cố định khi cuộn + to hơn.
   Sticky chỉ dính trong khối cha → bỏ hộp .wo-actionbar (display: contents) để thanh bám theo cả trang. */
@media (min-width: 901px) {
  .wo-actionbar { display: contents; }
  .wo-actionbar-body { margin-bottom: 12px; }
  .wo-actionbar-stick { position: sticky; top: 0; z-index: 25; background: var(--surface) !important; }
  .wo-actionbar-top { min-height: 56px; padding: 8px 20px; gap: 12px; }
  .wo-actionbar-top .wo-back { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; }
  .wo-actionbar-top .wo-back:hover { background: var(--primary-50); }
  .wo-actionbar-top .wo-back svg.i { width: 20px; height: 20px; }
  .wo-actionbar-top .wo-dms { font-size: 15px; font-weight: 700; padding: 8px 14px; border-radius: 10px; }
  .wo-actionbar-stick .btn, .wo-actionbar-stick .btn-sm, .wo-actionbar-stick .btn-icon { height: 38px; min-height: 38px !important; font-size: 14px; }
  .wo-actionbar-stick .btn-icon { width: 38px; }
  .wo-actionbar-stick .btn-icon svg.i { width: 20px; height: 20px; }
  .wo-actionbar-tools { gap: 4px; }
}
/* Đăng ký tiếp nhận – ô ngày + QR; điện thoại: mỗi đăng ký là 1 thẻ */
.ck-head-actions .ck-date { width: 160px; }
@media (max-width: 900px) {
  .ck-head-actions { display: flex !important; gap: 8px; width: 100%; }
  .ck-head-actions .ck-date { flex: 1; width: auto; min-width: 0; height: 44px; -webkit-appearance: none; appearance: none; text-align: left; display: flex; align-items: center; }
  .ck-head-actions .ck-date::-webkit-date-and-time-value { text-align: left; }
  .ck-head-actions .btn { flex: none; width: auto !important; height: 44px; }
  .ck-table, .ck-table tbody { display: block; width: 100% !important; min-width: 0 !important; }
  .ck-table thead { display: none; }
  .ck-table tr { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
  .ck-table td { display: flex; align-items: center; gap: 10px; padding: 0 !important; border: 0 !important; max-width: none !important; min-width: 0 !important; white-space: normal; grid-column: 1 / -1; }
  .ck-table td[data-label]::before { content: attr(data-label); flex: 0 0 82px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
  .ck-table td:empty, .ck-table td[data-label]:not(:has(*)):empty { display: none; }
  .ck-table td.ck-c-cust { grid-column: 1; grid-row: 1; display: block; font-weight: 700; font-size: 15.5px; }
  .ck-table td.ck-c-time { grid-column: 2; grid-row: 1; justify-content: flex-end; align-self: start; color: var(--muted); font-size: 13px; }
  .ck-table td.ck-c-branch { grid-column: 2; grid-row: 2; justify-content: flex-end; color: var(--muted); font-size: 13px; }
  .ck-table td .ck-svc { flex: 1 1 0; width: 0; min-width: 0; height: 40px; }
  .ck-table td.ck-c-act { justify-content: flex-start; flex-wrap: wrap; padding-top: 6px !important; }
  .ck-table td.ck-c-act:empty { display: none; }
  .ck-table td.ck-c-act .btn-primary { flex: 1; height: 42px; }
  .ck-table td.ck-c-act .btn-ghost { height: 42px; width: 42px !important; }
  .ck-table tr:has(td[colspan]) { display: block; }
  .ck-table td[colspan] { display: block; text-align: center; }
}

@media (min-width: 901px) {
  .ck-table td.ck-c-act { font-size: 0; }
  .ck-table td.ck-c-act > * { font-size: 13px; margin-left: 2px; }
  .ck-table td.ck-c-act .btn-icon, .ck-table td.ck-c-act .btn-ghost { width: 28px !important; min-width: 28px; padding: 0; }
  .ck-table td.mono.small { font-size: 11.5px; letter-spacing: -.01em; }
}
/* Bảng phiếu vừa khít khung – không cuộn ngang (độ rộng cột chia theo tỉ lệ bằng JS) */
@media (min-width: 901px) {
  .wo-grid-wrap { overflow-x: auto !important; }
  .wo-grid td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Vuốt ngang trong bảng không kéo theo trang / không kích hoạt "vuốt để quay lại" của trình duyệt */
.wo-grid-wrap { overscroll-behavior-x: contain; }
.content:has(.wo-list-card) { overscroll-behavior: none; }
.draft-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.draft-bar .grow { flex: 1; min-width: 0; }
.draft-bar .draft-title { font-weight: 700; }
.draft-bar .draft-sub { font-size: 13px; margin-top: 2px; }
@media (max-width: 640px) { .draft-bar { flex-wrap: wrap; } .draft-bar .grow { flex-basis: calc(100% - 40px); } .draft-bar .btn { flex: 1; height: 40px; } }
/* Quét mã: nút phóng to / đèn trên khung camera */
.scan-tools { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; gap: 6px; padding: 4px; border-radius: 999px; background: rgba(0, 0, 0, .45); z-index: 2; }
.scan-tool { border: 0; min-width: 40px; height: 34px; padding: 0 10px; border-radius: 999px; background: transparent; color: #fff; font: inherit; font-weight: 700; font-size: 13px; display: grid; place-items: center; cursor: pointer; }
.scan-tool svg.i { width: 17px; height: 17px; }
.scan-tool.on { background: #fff; color: #0b1220; }

/* ---------- v280: làm mới chữ & bố cục ----------
   Be Vietnam Pro (thiết kế cho tiếng Việt, dấu không bị lệch font), bỏ giãn chữ âm,
   mã/số khung/biển số dùng cùng font với số đều cột thay cho font máy chữ. */
:root {
  --font: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
body { letter-spacing: 0; font-feature-settings: "tnum" 1; }
h1, h2, h3, h4, .page-head h2, .modal-head h3, .app-page-title { letter-spacing: -.01em; }
.mono, .plate {
  font-family: var(--font); letter-spacing: .01em;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}
.mono.small { font-size: 12.5px; color: var(--text-2); }
.plate { font-weight: 600; letter-spacing: .02em; }
input.mono, .input.mono { font-family: var(--font); letter-spacing: .02em; }

/* Thẻ danh sách phiếu */
.wo-list-card { border-radius: 14px; overflow: hidden; }

/* Tab nhanh: thanh gạch chân gọn thay cho hàng nút tròn */
.quick-tabs {
  gap: 2px; padding: 4px 16px 0; border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.quick-tabs::-webkit-scrollbar { display: none; }
.quick-tabs a, .quick-tabs a.active {
  position: relative; border: 0; border-radius: 0; background: transparent;
  padding: 12px 12px 11px; font-size: 13.5px; font-weight: 500; color: var(--muted);
}
.quick-tabs a:hover { background: transparent; color: var(--text); border: 0; }
.quick-tabs a.active { color: var(--primary-600, #1464f4); font-weight: 600; }
.quick-tabs a.active::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px;
  border-radius: 2px 2px 0 0; background: var(--primary-600, #1464f4);
}

/* Thanh lọc: mọi ô cùng chiều cao, bo góc đồng nhất */
.wo-list-card .toolbar { padding: 12px 16px; gap: 8px; border-bottom: 1px solid var(--border); }
.wo-list-card .toolbar .input,
.wo-list-card .toolbar .select,
.wo-list-card .toolbar .btn { height: 36px; border-radius: 9px; font-size: 13.5px; }
.wo-list-card .toolbar .select { max-width: 190px; padding: 0 30px 0 10px; }
.wo-list-card .toolbar .dp { color: var(--text-2); }

/* Bảng: tiêu đề chữ thường dễ đọc, dòng thoáng, mã phiếu nổi bật */
.wo-grid thead th, .table th {
  text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600;
  color: var(--muted); background: var(--surface-2);
}
.wo-grid td { padding-top: 10px; padding-bottom: 10px; font-size: 13px; }
.wo-grid td .mono.small { font-size: 12.5px; letter-spacing: 0; }
.wo-grid td .plate { letter-spacing: .01em; }
.wo-grid tbody tr { transition: background-color .12s; }
.wo-grid tbody tr:hover td { background: var(--primary-50, #eef5ff); }
.wo-grid td strong, .wo-grid td .strong { font-weight: 600; color: var(--text); }

/* Nhãn trạng thái & SLA: cùng một kiểu nền nhạt, không còn ô xanh đậm lạc tông */
.badge, .sla {
  height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 0; gap: 6px;
}
.badge::before, .sla::before { width: 6px; height: 6px; opacity: 1; }
.b-emerald, .badge.b-emerald { background: var(--surface, #fff); color: var(--green-fg); box-shadow: inset 0 0 0 1px #b9e3c5; }
body.theme-dark .b-emerald { background: transparent; box-shadow: inset 0 0 0 1px rgba(80, 200, 120, .45); color: #7fdc9b; }

/* Tên app ở thanh bên không bị cắt */
.app-header .brand-name, .brand-name { font-size: 15px; letter-spacing: -.01em; }

/* Chi tiết phiếu: mã lệnh hãng cùng font */
.wo-dms { font-family: var(--font); font-weight: 600; letter-spacing: .01em; }
.kpi .l { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; }
/* Tổng quan: ô số tách Sửa chữa / Bảo hành */
.kpi.kpi-split { display: flex; flex-direction: column; gap: 8px; }
.kpi.kpi-split .kpi-main { display: flex; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.kpi-kinds { display: flex; gap: 6px; flex-wrap: wrap; }
.kpi-kinds a { padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); text-decoration: none; }
.kpi-kinds a:hover { background: var(--primary-50); color: var(--primary-600, #1464f4); }

/* Danh sách tổng quan: xem nhanh theo công việc, vẫn có chế độ đầy đủ để đối chiếu dữ liệu. */
.wo-overview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.wo-overview-views { display: inline-flex; align-items: center; gap: 3px; padding: 3px; border-radius: 10px; background: var(--surface-2); }
.wo-overview-view { min-height: 32px; padding: 5px 14px; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.wo-overview-view:hover { color: var(--text); }
.wo-overview-view.active { background: var(--surface); color: var(--primary-600, #1464f4); box-shadow: 0 1px 4px rgba(20, 38, 64, .12); }
.wo-overview-view:focus-visible { outline: 2px solid var(--primary-600, #1464f4); outline-offset: 2px; }
.wo-overview-count { color: var(--muted); font-size: 13px; white-space: nowrap; }
.wo-overview-count strong { color: var(--text); font-variant-numeric: tabular-nums; }
.wo-overview .wo-grid-wrap { max-height: calc(100dvh - 250px); min-height: 380px; overflow: auto; }
.wo-overview .wo-grid thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); color: var(--text-2); border-bottom: 1px solid var(--border); }
.wo-overview .wo-grid thead th:hover,
.wo-overview .wo-grid thead th.grouped,
.wo-overview .wo-grid thead th.filtered .th-label { color: var(--primary-600, #1464f4); }
.wo-overview .wo-grid td { padding: 8px 10px; height: 46px; font-size: 13px; line-height: 1.35; }
.wo-overview .wo-grid td .mono.small { font-size: 12px; }
.wo-overview .wo-grid .badge, .wo-overview .wo-grid .sla { height: 22px; padding: 0 8px; font-size: 11.5px; }
.wo-overview .wo-grid tbody tr:nth-child(even) td { background: var(--surface-2); }
.wo-overview .wo-grid tbody tr:hover td { background: var(--primary-50, #eef5ff); }
.wo-overview .wo-grid tbody tr { border-bottom: 1px solid var(--border); }
.wo-overview .wo-grid tbody tr:last-child { border-bottom: 0; }
.wo-overview .wo-grid td:has(.wo-vehicle-main) { white-space: normal; }
.wo-vehicle-main { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.wo-vehicle-main .plate { color: var(--text); font-weight: 700; }
.wo-vehicle-model { color: var(--text-2); font-size: 12px; }
.wo-vehicle-vin { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11.5px; margin-top: 2px; }
@media (max-width: 899px) {
  .wo-overview-head { flex-wrap: wrap; }
  .wo-overview-views { width: 100%; justify-content: space-between; }
  .wo-overview-view { flex: 1; }
  .wo-overview .wo-grid-wrap { min-height: 0; }
}
/* Bảo hành tổng hợp */
.bh-sum { display: grid; gap: 12px; margin-bottom: 14px; }
.bh-src { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; justify-self: start; flex-wrap: wrap; }
.bh-src a { padding: 7px 14px; border-radius: 9px; font-weight: 600; font-size: 13.5px; color: var(--text-2); text-decoration: none; }
.bh-src a span { color: var(--muted); font-weight: 500; margin-left: 4px; }
.bh-src a.active { background: var(--surface); color: var(--primary-600, #1464f4); box-shadow: var(--shadow); }
.bh-sum.walkin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.walkin-head .btn { flex: none; }
.wo-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.wo-who-n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-who-p { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.walkin-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.walkin-bar[hidden] { display: none; }
.walkin-bar-l { font-size: 13px; font-weight: 600; color: var(--text-2); }
.walkin-bar .seg button { padding: 6px 12px; font-size: 13px; }
.walkin-bar .seg button svg.i { width: 15px; height: 15px; }
@media (max-width: 520px) {
  .walkin-bar .seg { width: 100%; }
  .walkin-bar .seg button { flex: 1 1 0; padding: 8px 6px; }
  .walkin-bar .seg button svg.i { display: none; }
}
.bh-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bh-tile { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--slate-fg); color: var(--text); text-decoration: none; }
.bh-tile .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bh-tile .l { font-size: 13px; font-weight: 600; color: var(--text-2); }
.bh-tile .s { font-size: 12px; color: var(--muted); }
.bh-tile:hover { text-decoration: none; border-color: var(--primary-200, #b9d3ff); }
.bh-tile.active { outline: 2px solid var(--primary-600, #1464f4); outline-offset: -1px; }
/* Cảnh báo tự động: thanh "Cần xử lý ngay" + chip trong bảng */
.wo-alertbar { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--amber-fg); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; display: grid; gap: 10px; }
.wo-alertbar-head { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--amber-fg); }
.wo-alertbar-head svg { width: 18px; height: 18px; }
.wo-alertbar-list { display: flex; flex-wrap: wrap; gap: 8px; }
.wo-alert-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); text-decoration: none; }
.wo-alert-chip .n { font-weight: 700; font-variant-numeric: tabular-nums; }
.wo-alert-chip:hover { text-decoration: none; border-color: var(--primary-200, #b9d3ff); }
.wo-alert-chip.t-red { background: var(--red-bg); color: var(--red-fg); border-color: transparent; }
.wo-alert-chip.t-amber { background: var(--amber-bg); color: var(--amber-fg); border-color: transparent; }
.wo-alert-chip.t-green { background: #dcfce7; color: #15803d; border-color: transparent; }
.wo-alert-chip.t-blue { background: #dbeafe; color: #1d4ed8; border-color: transparent; }
body.theme-dark .wo-alert-chip.t-green { background: rgba(34, 197, 94, .18); color: #86efac; }
body.theme-dark .wo-alert-chip.t-blue { background: rgba(59, 130, 246, .2); color: #93c5fd; }
.wo-alert-chip.active { outline: 2px solid currentColor; outline-offset: -1px; }
.wo-alert { display: inline-block; padding: 1px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; margin-right: 3px; }
.wo-alert.t-red { background: var(--red-bg); color: var(--red-fg); }
.wo-alert.t-amber { background: var(--amber-bg); color: var(--amber-fg); }
.colpick-presets { display: flex; gap: 6px; padding: 6px 0; border-top: 1px solid var(--border); margin-top: 6px; }

/* ---------- v300: bộ nhận diện ATT DealerOS (navy #123a6b + cyan #18a4d8) ----------
   Chữ: Inter cho giao diện, Be Vietnam Pro cho tiêu đề. Nền xám hệ thống, bo 12, bóng mềm. */
:root {
  --font: "Inter", "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-display: "Be Vietnam Pro", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  /* Xanh cyan VinFast làm màu nhấn / nút chính */
  --primary: #18a4d8; --primary-600: #18a4d8; --primary-700: #0f7fb2;
  --primary-50: #e8f6fc; --primary-100: #d2edf8; --primary-200: #a9dcf0;
  /* Thanh bên: navy thương hiệu thay cho đen */
  --menu-bg: #123a6b; --menu-bg-2: #0b2748; --menu-bg-3: #214f83;
  --menu-muted: #b7c9e0; --menu-subtle: #8aa3c4;
  --menu-border: rgba(255,255,255,.10); --menu-ctrl-border: rgba(255,255,255,.22);
  --menu-active-bg: #18a4d8; --menu-active-fg: #ffffff;
  --bg: #f3f6fa; --surface: #ffffff; --surface-2: #f6f9fc;
  --text: #132033; --text-2: #3d4f63; --muted: #667085; --border: #e2e8f0;
  --success: #16854c; --danger: #c62828; --warning: #b26a00;
  --shadow: 0 1px 2px rgba(26,47,77,.05), 0 1px 3px rgba(26,47,77,.07);
  --shadow-md: 0 6px 18px -8px rgba(26,47,77,.18);
  --shadow-lg: 0 10px 30px rgba(26,47,77,.14);
}
body { font-feature-settings: "kern" 1, "liga" 1, "cv02" 1, "cv03" 1; font-variant-numeric: tabular-nums; line-height: 1.45; }
/* Nền gốc = màu thanh trên (trắng) – iOS tô vùng giờ/pin theo nền gốc; navy cũ thành dải xanh mờ trên điện thoại */
html, html body, body:has(.shell), #app:has(> .app-header), body.pwa-header-ported,
html.pwa-standalone, html.pwa-standalone body, html.pwa-standalone #app,
html.pwa-ios, html.pwa-ios body, html.pwa-ios #app { background-color: var(--surface) !important; }
html:has(> body.theme-dark) { background-color: #1e293b !important; }
/* Màn hình đăng nhập nền navy: nền gốc cũng navy, nếu không iPhone phủ trắng mờ vùng giờ/pin và mép dưới */
html:has(.login-v2), html:has(.login-v2) body, html:has(.login-v2) #app { background-color: #0f2f5a !important; }
h1, h2, h3, h4, .page-head h2, .modal-head h3, .app-page-title { font-family: var(--font-display); letter-spacing: -.025em; font-weight: 700; }
.kpi .v, .as-stat .v { font-family: var(--font-display); letter-spacing: -.03em; font-weight: 800; }
table { font-feature-settings: "tnum" 1; }
/* Mã phiếu / số khung / biển số: dùng font giao diện, số đều cột */
.mono, .plate, .vin-code { font-family: var(--font); font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* ---------- v301: chép giao diện ATT DealerOS (bố cục, nút, bảng, thẻ) ---------- */
/* Thanh bên: nền chuyển navy, mục đang chọn có vạch cyan bên trái */
.sidebar, .app-menu, .menu {
  background: linear-gradient(180deg, #123a6b, #0b2748) !important;
  box-shadow: 4px 0 18px rgba(12, 39, 73, .08);
}
.nav a, .nav button {
  color: #dceafa; border-radius: 11px; padding: 11px 12px; font-size: 13px; font-weight: 520;
  letter-spacing: .01em; min-height: 44px; transition: .15s;
}
.nav a:hover, .nav button:hover { background: rgba(255, 255, 255, .12) !important; color: #fff; }
.nav a.active, .nav button.active { background: #ffffff17 !important; color: #fff; box-shadow: inset 3px 0 0 #58d0ff; }
.nav-group-title, .nav-section {
  font-size: 10px !important; font-weight: 700; letter-spacing: .08em; color: #b8d4ea !important;
  opacity: .5; margin: 14px 8px 6px !important; text-transform: uppercase;
}

/* Thanh tiêu đề trang */
.app-header, .topbar {
  min-height: 78px; background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 10px 18px;
}
.app-page-title { font-size: 21px !important; font-weight: 700; letter-spacing: -.035em; color: var(--text) !important; }

/* Thẻ, nút, ô nhập */
.card, .panel { background: var(--surface); border-color: var(--border); border-radius: 12px; }
.btn { border: 1px solid #cdd7e4; background: #fff; color: var(--text); padding: 9px 12px; border-radius: 10px; transition: .15s; }
.btn-primary { background: #18a4d8; border-color: #18a4d8; color: #fff; font-weight: 700; }
.btn-primary:hover { background: #0f7fb2; border-color: #0f7fb2; }
.input, .select, input, select, textarea { border-radius: 10px; }

/* Bảng dữ liệu */
.table-wrap, .wo-grid-wrap { border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.table th, .wo-grid thead th {
  background: #f8fafc; color: #556174; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .35px; border-top: 0;
}
.table td, .wo-grid td { padding: 10px 12px; border-bottom: 1px solid #edf1f5; font-size: 13px; vertical-align: middle; }
.table tbody tr:hover td, .wo-grid tbody tr:hover td { background: #fbfdff; }

/* Nhãn trạng thái */
.badge, .sla { border-radius: 999px; padding: 5px 9px; font-size: 11px; white-space: nowrap; }
.b-green, .sla-ok { background: #e8f7ef; color: #16854c; }
.b-amber, .sla-warning { background: #fff4df; color: #b26a00; }
.b-red, .sla-overdue { background: #fdecef; color: #c62828; }

/* Ô số liệu Tổng quan */
.kpi .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .35px; font-weight: 600; }
.kpi .v { font-size: 25px; font-weight: 900; line-height: 1.1; margin-top: 6px; }

/* ---------- v302: khung trang y hệt ATT DealerOS ----------
   .app lưới 262px + 1fr; thanh bên suốt chiều cao; thanh tiêu đề nằm trong vùng nội dung. */
.ds-app { display: grid; grid-template-columns: 262px 1fr; height: var(--app-height, 100dvh); min-height: var(--app-height, 100dvh); overflow: hidden; }
.ds-app > .sidebar {
  position: sticky; top: 0; height: var(--app-height, 100dvh);
  background: linear-gradient(180deg, #123a6b, #0b2748); color: #fff;
  padding: 14px 12px; display: flex; flex-direction: column; z-index: 30;
  box-shadow: 4px 0 18px rgba(12, 39, 73, .08); width: auto; max-width: none; transform: none;
}
.ds-app .sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px 16px 11px; }
.ds-app .brand-mark { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; color: #fff; }
.ds-app .brand-mark .brand-logo { width: 32px; height: 32px; flex: none; }
.ds-app .brand-mark .brand-name { font-size: 15px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-app .sidebar-collapse-btn { border: 0; background: rgba(255,255,255,.1); color: #cfe2f6; width: 28px; height: 28px; border-radius: 8px; flex: none; cursor: pointer; display: grid; place-items: center; }
.ds-app .sidebar-collapse-btn:hover { background: rgba(255,255,255,.2); color: #fff; }
.ds-app .sidebar-collapse-btn svg { width: 16px; height: 16px; }
.ds-app > .sidebar > .nav { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 0; }
.ds-app .app-stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; overflow: hidden; }
.ds-app .shell { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.ds-app .shell > main { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.ds-app .topbar {
  position: static; min-height: 78px; background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px; padding: 10px 18px; flex: none; width: auto; z-index: 40;
}
.ds-app .title-wrap { min-width: 150px; flex: 0 1 260px; display: grid; gap: 1px; }
.ds-app .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--primary-700); }
.ds-app .app-page-title { margin: 2px 0 0 !important; font-size: 21px !important; font-weight: 700; letter-spacing: -.035em; }
.ds-app .menu-btn { display: none; }
.ds-app #main.content {
  flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain; scrollbar-gutter: stable; padding: 18px;
}
.ds-app #main.content::-webkit-scrollbar { width: 8px; height: 8px; }
.ds-app #main.content::-webkit-scrollbar-thumb { background: rgba(120, 135, 155, .35); border-radius: 999px; }

/* Thu gọn menu (nút «) */
body.menu-collapsed .ds-app { grid-template-columns: 0 1fr; }
body.menu-collapsed .ds-app > .sidebar { padding: 0; overflow: hidden; }
body.menu-collapsed .ds-app .menu-btn { display: grid; place-items: center; }

/* Điện thoại / máy tính bảng: thanh bên trượt ra như ngăn kéo */
@media (max-width: 900px) {
  .ds-app { grid-template-columns: 1fr; }
  .ds-app > .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: 262px; transform: translateX(-100%);
    transition: transform .2s var(--ease, ease); z-index: 60;
  }
  body.menu-open .ds-app > .sidebar { transform: none; }
  .ds-app .menu-btn { display: grid; place-items: center; }
  .ds-app .topbar { min-height: 64px; padding: 8px 12px; }
  .ds-app #main.content { padding: 12px; }
}
/* Điện thoại: thanh tiêu đề gọn – ẩn dòng công ty, các nút không tràn */
@media (max-width: 900px) {
  .ds-app .eyebrow { display: none; }
  .ds-app .title-wrap { flex: 1 1 auto; min-width: 0; }
  .ds-app .app-page-title { font-size: 17px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ds-app .topbar .spacer { display: none; }
  .ds-app .topbar-tools { flex: none; gap: 4px; min-width: 0; }
  .ds-app .topbar-tools .select { max-width: 110px; }
}
@media (max-width: 560px) {
  .ds-app .topbar-tools .lang-pill, .ds-app .topbar-tools .tool-icon { display: none; }
  .ds-app .topbar-tools .select { max-width: 92px; font-size: 12px; }
}

/* ---------- v303: bảng trượt bên phải (drawer) – theo đúng ATT DealerOS ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: #0b1f3845; z-index: 199; }
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0; left: auto;
  width: min(760px, 96vw); height: 100vh; height: 100dvh;
  background: #fff; z-index: 200; box-shadow: -20px 0 70px #0d284340;
  display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
}
.drawer-head { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex: 0 0 auto; }
.drawer-head-main { min-width: 0; flex: 1; }
.drawer-head h2 { margin: 3px 0 0; font-size: 20px; }
.drawer-sub { margin-top: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; line-height: 1.35; }
.drawer-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.drawer-actions .btn { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.drawer-x { border: 0; background: transparent; font-size: 27px; line-height: 1; cursor: pointer; color: #526175; padding: 0 4px; }
.drawer-body { padding: 18px 20px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.drawer-foot { padding: 12px 20px; border-top: 1px solid #edf1f5; background: #fff; display: flex; gap: 8px; justify-content: space-between; align-items: center; flex: 0 0 auto; }
body.drawer-open { overflow: hidden; }
.colpick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px; }
.colpick-grid .check { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: 13.5px; }
.colpick-grid .check:hover { background: var(--surface-2); }
@media (max-width: 560px) { .drawer { width: 100vw; } .drawer-body { padding: 14px; } .colpick-grid { grid-template-columns: 1fr; } }

/* Chi tiết phiếu mở trong bảng trượt: rộng hơn, bỏ nút ← vì đã có nút × */
#drawer { width: min(860px, 50vw); background: var(--bg); }
@media (max-width: 1200px) { #drawer { width: min(760px, 92vw); } }
#drawer .drawer-body { padding: 16px 18px; }
#drawer .wo-back { display: none; }
#drawer .wo-actionbar-stick { position: static; }
#drawer .page-head { display: none; }
/* Bảng trượt nửa màn hình: nội dung xếp 1 cột cho dễ đọc */
#drawer .grid, #drawer .g-main, #drawer .wo-detail-grid { grid-template-columns: 1fr !important; }
#drawer .card-head h3 { white-space: normal; }
/* Hộp thoại luôn nổi trên bảng trượt (như DealerOS: hộp 220, bảng trượt 200) */
.modal-backdrop { z-index: 220 !important; }
.modal-backdrop + .modal-backdrop { z-index: 230 !important; }
/* Không để nội dung tràn ngang trong bảng trượt */
#drawer .drawer-body { overflow-x: hidden; }
#drawer .wo-actionbar, #drawer .card, #drawer .wo-actionbar-stick { max-width: 100%; min-width: 0; }
#drawer table { max-width: 100%; }
/* Bảng trượt: trượt vào / ra mượt, không chớp */
#drawer { transition: transform .22s cubic-bezier(.22,1,.36,1); }
#drawer.hidden { display: flex !important; transform: translateX(100%); pointer-events: none; visibility: hidden; }
#drawerBackdrop { transition: opacity .2s ease; }
#drawerBackdrop.hidden { display: block !important; opacity: 0; pointer-events: none; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { #drawer, #drawerBackdrop { transition: none; } }

/* Đang tải lại cùng trang (sắp xếp / lọc / đổi trang): thanh chạy mảnh trên đầu, nội dung mờ nhẹ */
.content.is-loading { position: relative; }
.content.is-loading::before {
  content: ''; position: sticky; top: 0; display: block; height: 3px; margin-bottom: -3px; z-index: 5; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--primary, #18a4d8), transparent); background-size: 40% 100%; background-repeat: no-repeat;
  animation: load-bar 1s linear infinite;
}
.content.is-loading > * { opacity: .6; transition: opacity .15s ease .12s; pointer-events: none; }
@keyframes load-bar { from { background-position: -40% 0; } to { background-position: 140% 0; } }

/* Khung chờ khi mở bảng trượt chi tiết */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.drawer-skel { display: flex; flex-direction: column; gap: 12px; }
.skel { border-radius: 8px; background: linear-gradient(90deg, #e9eef4 25%, #f4f7fa 50%, #e9eef4 75%); background-size: 200% 100%; animation: skel 1.2s ease-in-out infinite; }
.skel-bar { height: 44px; }
.skel-line { height: 14px; }
.skel-block { height: 120px; }
.skel.w45 { width: 45%; } .skel.w60 { width: 60%; } .skel.w70 { width: 70%; } .skel.w80 { width: 80%; }
body.theme-dark .skel { background: linear-gradient(90deg, #1e293b 25%, #273449 50%, #1e293b 75%); background-size: 200% 100%; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel, .content.is-loading::before { animation: none; } }

/* ===================== WO detail panel polish ===================== */
/* Thang khoảng cách 8px; nền phụ / đường kẻ riêng cho sáng – tối (--surface-2 không đổi theo theme tối) */
#drawer { --wd-soft: #f4f7fb; --wd-line: rgba(15, 23, 42, .08); --wd-gap: 16px; }
body.theme-dark #drawer { --wd-soft: rgba(148, 163, 184, .08); --wd-line: rgba(148, 163, 184, .16); }
body.theme-dark #drawer, body.theme-dark #drawer .drawer-head { background: var(--bg); }

/* Đầu bảng trượt: tiêu đề + trạng thái, dòng dưới mã phiếu · biển số · nguồn */
.ds-app .app-page-title { margin: 0 !important; }
#drawer .drawer-head { padding: 16px 20px 14px; border-bottom: 1px solid var(--wd-line); align-items: center; background: var(--surface); }
#drawer .drawer-head h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
#drawer .drawer-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
#drawer .drawer-status .badge { font-size: 12px; }
#drawer .drawer-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 6px; font-weight: 500; color: var(--muted); }
#drawer .drawer-sub.hidden { display: none; }
#drawer .wd-code { font-size: 14px; font-weight: 700; color: var(--text); letter-spacing: .01em; }
#drawer .wd-src { font-size: 12.5px; }
#drawer .drawer-x { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: var(--muted); flex: none; }
#drawer .drawer-x:hover { background: var(--wd-soft); color: var(--text); }
#drawer .drawer-body { padding: var(--wd-gap) 20px 24px; }
#drawer .drawer-body > .grid, #drawer .drawer-body .stack { gap: var(--wd-gap); }

/* Thanh công cụ: chip lệnh hãng bên trái, In / Sheets / ⋯ bên phải */
.wd-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: var(--wd-gap, 16px); min-width: 0; }
#drawer .wd-toolbar .wo-back { display: none; }
.wd-chip { display: inline-flex; align-items: center; gap: 8px; min-width: 0; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--primary-50); color: var(--text); font-size: 13px; }
.wd-chip-k { color: var(--muted); font-size: 12px; font-weight: 500; flex: none; }
.wd-chip-v { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wd-chip.is-empty { background: var(--wd-soft, #f4f7fb); }
.wd-chip.is-empty .wd-chip-v { color: var(--muted); font-weight: 500; }
.wd-tools { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }
.wd-tools .wd-tool { height: 32px; min-height: 32px; padding: 0 10px; gap: 6px; border-color: transparent; background: transparent; box-shadow: none; color: var(--text-2); font-weight: 600; }
body .wd-tools .wd-tool { border-color: transparent; background: transparent; box-shadow: none; }
.wd-tools .wd-tool:hover, body .wd-tools .wd-tool:hover { background: var(--wd-soft, #f4f7fb); color: var(--text); }
.wd-tools .wd-tool svg.i { width: 16px; height: 16px; }
.wd-more { position: relative; }
.wd-more > summary { list-style: none; width: 32px; padding: 0; justify-content: center; font-size: 18px; line-height: 1; cursor: pointer; }
.wd-more > summary::-webkit-details-marker { display: none; }
.wd-more[open] > summary { background: var(--wd-soft, #f4f7fb); }
.wd-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 180px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--wd-line, var(--border)); box-shadow: 0 12px 32px -12px rgba(15, 23, 42, .35); }
.wd-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 500; text-align: left; cursor: pointer; }
.wd-menu-item svg.i { width: 16px; height: 16px; }
.wd-menu-item:hover { background: var(--wd-soft, #f4f7fb); }
.wd-menu-item.is-danger { color: var(--danger); }

/* Tiến trình + vùng thao tác bước hiện tại chung một thẻ */
#drawer .card { border: 0; border-radius: 16px; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 0 0 1px var(--wd-line); }
#drawer .card-head { padding: 12px 16px; border-bottom: 1px solid var(--wd-line); background: transparent; }
#drawer .card-body { padding: 16px; }
.wd-progress { margin-bottom: var(--wd-gap, 16px); }
.wd-progress .stepper { position: relative; padding: 16px 12px 12px; scrollbar-width: thin; }
.wd-progress .step { min-width: 104px; padding: 0 2px; }
.wd-progress .step-label { white-space: nowrap; font-size: 12.5px; }
.wd-progress .step.current .step-label { font-weight: 700; }
.wd-progress .step.current .dot { box-shadow: 0 0 0 4px var(--primary-100); }
.wd-stepbar { display: flex; align-items: center; gap: 12px 16px; padding: 12px 16px; border-top: 1px solid var(--wd-line); background: var(--wd-soft, #f4f7fb); }
.wd-progress > .wd-stepbar:first-child { border-top: 0; }
.wd-stepbar-hint { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--text-2); }
.wd-stepbar-hint > svg.i { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--primary-700, var(--primary)); }
.wd-stepbar-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: none; max-width: 60%; }
.wd-stepbar-actions .btn { height: 36px; min-height: 36px; padding: 0 16px; font-size: 13.5px; }
.wd-stepbar-actions .wo-btn-more { background: var(--surface); }
.wd-alerts { gap: 8px !important; margin-bottom: var(--wd-gap, 16px); }

/* Kiểm tra & Báo giá: danh sách nhãn – giá trị */
.wd-inspect-body { gap: 20px !important; }
.wd-kv { margin: 0; border-radius: 12px; background: var(--wd-soft, #f4f7fb); padding: 0 12px; }
.wd-kv-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--wd-line, var(--border)); }
.wd-kv-row:first-child { border-top: 0; }
.wd-kv-row dt { color: var(--muted); font-size: 13px; font-weight: 500; flex: none; }
.wd-kv-row dd { margin: 0; min-width: 0; text-align: right; font-size: 13.5px; font-weight: 600; color: var(--text); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; overflow-wrap: anywhere; }
.wd-kv-row dd.wd-files { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.wd-kv-row .quote-chip { background: var(--surface); border-color: var(--wd-line, var(--border)); }
.wd-empty { color: var(--muted); font-weight: 400; }

.wd-sec-title { margin-bottom: 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--muted); }
.wd-sec > :not(.wd-sec-title) { font-size: 13.5px; }
#drawer .acc-grid { background: transparent; border: 0; padding: 0; gap: 8px 16px; }
#drawer .acc-grid-item { font-size: 13.5px; align-items: flex-start; }
#drawer .acc-grid-item svg.i { width: 16px; height: 16px; margin-top: 1px; }
.acc-grid-item.acc-charger { grid-column: 1 / -1; }
.acc-charger > span:last-child { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.wd-qr { display: inline-flex; align-items: baseline; gap: 8px; max-width: 100%; padding: 4px 8px; border: 0; border-radius: 6px; background: var(--wd-soft, #f4f7fb); color: var(--text-2); font: inherit; font-size: 12px; text-align: left; cursor: copy; }
.wd-qr:hover { background: var(--primary-50); }
.wd-qr .mono { font-size: 11.5px; overflow-wrap: anywhere; word-break: break-all; }
.wd-qr-k { flex: none; color: var(--muted); font-weight: 500; }
.wd-line { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 8px; font-size: 13px; color: var(--text-2); }
.wd-line-k { flex: none; color: var(--muted); }
.wd-line > span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* Thông tin xe: một dải ngang dưới tiến trình (nhãn nhỏ trên – giá trị đậm, vạch ngăn dọc), phần phụ sau nút Chi tiết */
.wd-vehicle { margin-bottom: var(--wd-gap, 16px); }
.card-ico-veh { background: #e6f6fc; color: #0e7fa8; }
.card-ico-log { background: var(--wd-soft, #f4f7fb); color: var(--text-2); }
body.theme-dark .card-ico-veh { background: rgba(24, 164, 216, .16); color: #6fd0f2; }
body.theme-dark .card-ico-log { background: rgba(148, 163, 184, .12); }
.wd-vhead { display: flex; align-items: center; gap: 10px; padding: 12px 16px 0; }
.wd-vtitle { flex: 1; min-width: 0; margin: 0; font-size: 14.5px; font-weight: 650; color: var(--text); }
.wd-vstrip { padding: 12px 16px 14px; }
/* Hàng 1: Biển số | Số khung | Loại xe | Số Km | % PIN — hàng 2: Họ và tên | Số điện thoại | Yêu cầu (phần còn lại) */
.wd-vitems { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); gap: 12px 20px; }
.wd-vf-vin .wd-copy-v { word-break: normal; white-space: nowrap; }
.wd-vehicle { container-type: inline-size; }
.wd-vitems > .wd-vf { margin: 0; padding: 0; border: 0; }
.wd-vf { min-width: 0; }
.wd-vf-k { display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 500; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.wd-vf-v { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text); overflow-wrap: anywhere; }
.wd-vf-v a[href^="tel:"] { color: var(--primary); }
.wd-plate-lg { font-size: 14px; font-weight: 700; letter-spacing: .01em; line-height: 1.35; }
.wd-copy-v { padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font-size: 13px; font-weight: 600; line-height: 1.35; text-align: left; word-break: break-all; cursor: copy; }
.wd-copy-v:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.wd-copy-v:focus-visible, .wd-vf-req:focus-visible, .wd-vmore:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.wd-vitems .wd-vf-req { grid-column: 3 / -1; display: block; padding: 0; border: 0; border-radius: 0; background: none; font: inherit; text-align: left; color: inherit; }
button.wd-vf-req { cursor: pointer; }
.wd-vf-req .wd-vf-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.wd-vitems .wd-vf-req.is-open .wd-vf-v { white-space: normal; text-overflow: clip; }
/* Sau quy tắc grid-column: 3 / -1 ở trên – nếu không lưới 2 cột sinh thêm cột ngầm, số khung đè sang cột bên */
@container (max-width: 620px) {
  .wd-vitems { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wd-vitems > .wd-vf-req { grid-column: 1 / -1; }
}
.wd-vmore { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: var(--wd-soft, #f4f7fb); color: var(--primary); font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.wd-vmore:hover { background: var(--primary-50); }
.wd-vloc { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 999px;
  background: #e6f6fc; border: 1px solid #b9e6f6; color: #0b6f96; font-size: 12.5px; font-weight: 650; white-space: nowrap; text-decoration: none; }
.wd-vloc span { overflow: hidden; text-overflow: ellipsis; }
.wd-vloc svg.i { width: 14px; height: 14px; flex: none; }
.wd-vloc:hover { background: #d4f0fa; text-decoration: none; }
body.theme-dark .wd-vloc { background: rgba(24, 164, 216, .14); border-color: rgba(90, 209, 250, .3); color: #7ee0ff; }
.wd-vmore-ic { display: inline-block; transition: transform .15s; }
.wd-vmore[aria-expanded="true"] .wd-vmore-ic { transform: rotate(180deg); }
.wd-vextra { padding: 10px 12px 12px; border-top: 1px solid var(--wd-line, var(--border)); }
.wd-vextra[hidden] { display: none; }
.wd-vextra-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px 16px; }
.wd-vextra-grid + .wd-vhist { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--wd-line, var(--border)); }
.wd-vhist > .wd-vf-k { display: flex; align-items: center; gap: 6px; }
.wd-vhist > .wd-vf-k svg.i { width: 14px; height: 14px; }

/* Một cột (bảng trượt, ≤1180px): bỏ cột trái/phải, xếp thẻ theo luồng công việc */
.wd-o-inspect { order: 1; } .wd-o-bh { order: 2; } .wd-o-assign { order: 3; } .wd-o-sla { order: 4; } .wd-o-chat { order: 5; } .wd-o-log { order: 6; }
#drawer .wd-main > .wd-col { display: contents; }
@media (max-width: 1180px) { .wd-main > .wd-col { display: contents; } }

/* Điện thoại: bảng trượt toàn màn hình, thao tác xếp dọc */
@media (max-width: 640px) {
  #drawer { width: 100vw; }
  #drawer .drawer-head { padding: 12px 16px; }
  #drawer .drawer-body { padding: 12px 12px 24px; }
  .wd-tools .wd-tool-label { display: none; }
  .wd-tools .wd-tool { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .wd-chip { height: 36px; }
  .wd-stepbar { flex-direction: column; align-items: stretch; }
  .wd-stepbar-actions { max-width: none; justify-content: stretch; }
  .wd-stepbar-actions .btn { flex: 1 1 auto; height: 44px; min-height: 44px; }
  .wd-stepbar-actions .wo-btn-primary { flex-basis: 100%; }
  .wd-progress .step { min-width: 84px; }
  .wd-progress .step-label { white-space: normal; text-wrap: balance; }
  .wd-kv-row { min-height: 48px; }
  #drawer .acc-grid { grid-template-columns: 1fr; }
  .wd-vstrip { flex-wrap: wrap; padding: 10px 12px; }
  .wd-vstrip > .card-ico { display: none; }
  .wd-vitems { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; overflow: visible; }
  .wd-vitems > .wd-vf { margin: 0; padding: 0; border: 0; }
  .wd-vmore { margin-left: auto; height: 36px; }
  .wd-vextra-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; }
}

/* ---------- Thanh công cụ danh sách kiểu VinFast DMS: dạng xem · Chỉnh sửa cột · Chỉnh sửa bộ lọc · từ khóa ---------- */
.wo-tb { display: flex; align-items: center; gap: 2px; min-height: 52px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--border); }
.wo-view-btn { display: inline-flex; align-items: center; gap: 6px; min-width: 0; height: 36px; padding: 0 8px; margin-left: -8px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font: inherit; font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; cursor: pointer; }
.wo-view-btn:hover, .wo-view-btn:focus-visible { background: var(--surface-2); outline: none; }
.wo-view-btn:focus-visible { box-shadow: 0 0 0 2px var(--primary-600, #1464f4); }
.wo-view-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-view-btn .i { width: 16px; height: 16px; flex: none; color: var(--muted); stroke-width: 2; }
.wo-tb-count { flex: none; margin-left: 2px; color: var(--muted); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wo-tb-sp { flex: 1 1 auto; min-width: 8px; }
.wo-tb-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 10px; border: 0; border-radius: 8px;
  background: none; color: var(--primary-600, #1464f4); font: inherit; font-size: 13.5px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.wo-tb-btn .i { width: 16px; height: 16px; stroke-width: 1.7; }
.wo-tb-btn:hover, .wo-tb-btn:focus-visible { background: var(--surface-2); outline: none; }
.wo-tb-btn:focus-visible { box-shadow: 0 0 0 2px var(--primary-600, #1464f4); }
.wo-tb-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--primary-600, #1464f4);
  color: #fff; font-size: 11px; font-weight: 650; line-height: 1; }
/* Nút thao tác (khác nút cài đặt hiển thị): viền + nền nhạt màu chính */
.wo-tb-action { margin-left: 4px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--primary-600, #1464f4) 35%, transparent);
  background: color-mix(in srgb, var(--primary-600, #1464f4) 7%, var(--surface)); font-weight: 600; }
.wo-tb-action:hover, .wo-tb-action:focus-visible { background: color-mix(in srgb, var(--primary-600, #1464f4) 14%, var(--surface)); }
@media (max-width: 1100px) { .wo-tb-action { padding: 0 9px; } .wo-tb-action .wo-tb-l { display: none; } }
.wo-tb-more { width: 34px; padding: 0; justify-content: center; color: var(--text-2); }
.wo-tb-more .i { width: 18px; height: 18px; }
.wo-search { display: flex; align-items: center; flex: 0 1 240px; min-width: 160px; height: 34px; margin: 0 2px 0 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); transition: border-color .15s, box-shadow .15s; }
.wo-search:focus-within { border-color: var(--primary-600, #1464f4); box-shadow: 0 0 0 3px rgba(20, 100, 244, .14); }
.wo-search-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--muted); cursor: text; }
.wo-search-ic .i { width: 15px; height: 15px; }
.wo-search input { flex: 1; min-width: 0; height: 32px; padding: 0 4px 0 0; border: 0; outline: none; background: none; color: var(--text); font: inherit; font-size: 13.5px; }
.wo-search input::placeholder { color: var(--muted); }
.wo-search-x { display: grid; place-items: center; flex: none; width: 26px; height: 26px; margin-right: 3px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.wo-search-x .i { width: 14px; height: 14px; }
.wo-search-x:hover, .wo-search-x:focus-visible { background: var(--surface-2); color: var(--text); outline: none; }
.wo-search input:placeholder-shown ~ .wo-search-x { display: none; }
.wo-search-scan { display: grid; place-items: center; flex: none; width: 28px; height: 28px; margin-right: 3px; padding: 0; border: 0; border-left: 1px solid var(--border); border-radius: 0 6px 6px 0; background: none; color: var(--primary-600, #1464f4); cursor: pointer; }
.wo-search-scan .i { width: 16px; height: 16px; }
.wo-search-scan:hover, .wo-search-scan:focus-visible { background: var(--primary-50, #e8f6fc); outline: none; }
.wo-tb + .gm-chips { padding-top: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.wo-tb-menu { min-width: 230px; }
.wo-tb-menu .gm-ic:empty { display: none; }
.wo-side .drawer-actions .btn .i { width: 14px; height: 14px; }
body.theme-dark .wo-search:focus-within { box-shadow: 0 0 0 3px rgba(124, 192, 255, .2); }

/* Bảng "Chỉnh sửa cột" / "Chỉnh sửa bộ lọc" */
.wo-side { width: min(420px, 100vw); background: var(--surface); color: var(--text); animation: wo-side-in .2s ease-out; }
.wo-side .drawer-head { padding: 16px 18px 14px; }
.wo-side .drawer-head h2 { margin: 0; font-size: 18px; font-weight: 650; letter-spacing: -.01em; }
.wo-side .drawer-sub { font-weight: 500; }
.wo-side .drawer-x { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: var(--muted); flex: none; }
.wo-side .drawer-x:hover, .wo-side .drawer-x:focus-visible { background: var(--surface-2); color: var(--text); outline: none; }
.wo-side .drawer-body { padding: 14px 18px; }
.wo-side .drawer-foot { padding: 12px 18px; background: var(--surface); border-top-color: var(--border); }
.wo-side .drawer-foot .btn { height: 38px; padding: 0 16px; border-radius: 9px; font-size: 14px; }
.wo-side-btns { display: inline-flex; gap: 8px; margin-left: auto; }
@keyframes wo-side-in { from { transform: translateX(24px); opacity: .5; } to { transform: none; opacity: 1; } }
.wo-fp-sec { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.wo-fp-sec:last-child { border-bottom: 0; margin-bottom: 0; }
.wo-fp-sec h3 { margin: 0 0 10px; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.wo-fp-field { display: grid; gap: 6px; margin-bottom: 12px; font-size: 13px; color: var(--text-2); }
.wo-fp-field:last-child { margin-bottom: 0; }
.wo-fp-field .select, .wo-fp-field .input { width: 100%; max-width: none; height: 38px; border-radius: 8px; font-size: 14px; }
.wo-fp-range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.wo-fp-two { display: grid; grid-template-columns: 1fr 130px; gap: 8px; }
.wo-fp-row { display: flex; align-items: center; gap: 2px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.wo-fp-edit { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 6px 9px 11px; border: 0; background: none; color: var(--text);
  font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; border-radius: 10px 0 0 10px; }
.wo-fp-edit span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-fp-edit .i { width: 14px; height: 14px; flex: none; color: var(--primary-600, #1464f4); }
.wo-fp-edit .i:last-child { color: var(--muted); }
.wo-fp-x { display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin-right: 2px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.wo-fp-x .i { width: 14px; height: 14px; }
.wo-fp-edit:hover, .wo-fp-x:hover, .wo-fp-edit:focus-visible, .wo-fp-x:focus-visible { background: var(--surface); color: var(--text); outline: none; }
.wo-fp-empty { padding: 2px 0 8px; font-size: 13px; color: var(--muted); }
.wo-fp-add { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; margin-left: -10px; border: 0; border-radius: 8px; background: none;
  color: var(--primary-600, #1464f4); font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer; }
.wo-fp-add .i { width: 15px; height: 15px; }
.wo-fp-add:hover, .wo-fp-add:focus-visible { background: var(--surface-2); outline: none; }
.wo-cp-list { list-style: none; margin: 0; padding: 0; }
.wo-cp-row { display: flex; align-items: center; gap: 2px; border-radius: 8px; }
.wo-cp-row:hover { background: var(--surface-2); }
.wo-cp-row .check { flex: 1; min-width: 0; padding: 8px 10px; font-size: 13.5px; }
.wo-cp-mv { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--text-2); cursor: pointer; }
.wo-cp-mv .i { width: 15px; height: 15px; }
.wo-cp-mv:hover:not(:disabled), .wo-cp-mv:focus-visible { background: var(--surface); color: var(--primary-600, #1464f4); outline: none; }
.wo-cp-mv:disabled { opacity: .25; cursor: default; }
.wo-cp-sep { margin: 14px 10px 4px; font-size: 12px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
body.theme-dark .wo-side { box-shadow: -20px 0 60px rgba(0, 0, 0, .55); }
body.theme-dark .table-wrap, body.theme-dark .wo-grid-wrap { background: var(--surface); }
body.theme-dark .wo-fp-row { background: rgba(255, 255, 255, .03); }

@media (max-width: 900px) {
  .wo-tb { padding: 6px 8px 6px 14px; }
  .wo-tb-l { display: none; }
  .wo-tb-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .wo-tb-btn .i { width: 19px; height: 19px; }
  .wo-tb-n { position: absolute; top: 3px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }
}
@media (max-width: 640px) {
  .wo-tb { flex-wrap: wrap; min-height: 54px; }
  .wo-view-btn { height: 40px; font-size: 16px; }
  .wo-tb-count { font-size: 12.5px; }
  .wo-search { flex: none; width: 40px; min-width: 0; height: 40px; margin: 0; border-color: transparent; background: none; }
  .wo-search-ic { width: 40px; height: 40px; color: var(--primary-600, #1464f4); cursor: pointer; }
  .wo-search-ic .i { width: 19px; height: 19px; }
  .wo-search:not(.open) input, .wo-search:not(.open) .wo-search-x { display: none; }
  .wo-search.open { order: 10; flex: 1 1 100%; width: auto; margin: 4px 2px 2px 0; border-color: var(--border); background: var(--surface); }
  .wo-search.open .wo-search-ic { color: var(--muted); cursor: text; }
  .wo-search input { font-size: 16px; height: 38px; }
  .wo-search-x { width: 34px; height: 34px; }
  .wo-search:not(.open) { width: auto; }
  .wo-search-scan { width: 40px; height: 38px; margin-right: 0; }
  .wo-search:not(.open) .wo-search-scan { border-left: 0; }
  .wo-search-scan .i { width: 19px; height: 19px; }
  .wo-side { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: auto; max-height: 88vh; max-height: 88dvh; border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, .25); animation: gm-up .2s ease-out; }
  .wo-side .drawer-head { padding: 14px 16px 10px; }
  .wo-side .drawer-body { padding: 12px 16px; }
  .wo-side .drawer-foot { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .wo-side .drawer-foot .btn { height: 44px; }
  .wo-fp-field .select, .wo-fp-field .input { height: 44px; font-size: 16px; }
  .wo-fp-two { grid-template-columns: 1fr 120px; }
  .wo-cp-row .check { padding: 11px 10px; }
  .wo-cp-mv { width: 40px; height: 40px; }
}
@media (max-width: 420px) { .wo-tb-count { display: none; } .wo-tb { padding-right: 6px; } }
@media (prefers-reduced-motion: reduce) { .wo-side { animation: none; } .wo-search { transition: none; } }

/* ---------- Thanh tiêu đề trang: cụm công cụ gọn kiểu Apple ----------
   Phạm vi .app-header.topbar (không dùng .ds-app) vì PWA iOS chuyển header ra ngoài #app.
   !important chỉ để thắng các lớp header cũ phía trên (PWA, menu màu, DealerOS). */
.app-header.topbar {
  --hd-line: rgba(15, 23, 42, .1); --hd-ctl: #fff; --hd-ctl-hover: #f4f6f9;
  --hd-hover: rgba(15, 23, 42, .06); --hd-press: rgba(15, 23, 42, .1);
  height: auto; min-height: 64px; max-height: none; padding: 10px 20px; gap: 12px; box-shadow: none !important;
}
body.theme-dark .app-header.topbar {
  --hd-line: rgba(148, 163, 184, .2); --hd-ctl: rgba(255, 255, 255, .04); --hd-ctl-hover: rgba(255, 255, 255, .08);
  --hd-hover: rgba(255, 255, 255, .08); --hd-press: rgba(255, 255, 255, .13);
}
.app-header.topbar .title-wrap { flex: 1 1 auto; min-width: 0; }
.app-header.topbar .spacer { display: none; }
.app-header.topbar .app-page-title {
  margin: 0 !important; font-size: 20px !important; font-weight: 700; letter-spacing: -.025em; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-header.topbar .topbar-tools { display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; padding: 0; margin-left: auto; }

.app-header.topbar .tool-icon,
.app-header.topbar .menu-btn {
  width: 36px; height: 36px; min-width: 36px; padding: 0; border: 0; border-radius: 10px;
  background: transparent !important; color: var(--text-2) !important; place-items: center; cursor: pointer;
  transition: background-color .15s ease, color .15s ease; -webkit-tap-highlight-color: transparent;
}
.app-header.topbar .tool-icon { display: grid; }
.app-header.topbar .tool-icon .i, .app-header.topbar .menu-btn .i { width: 19px; height: 19px; }
.app-header.topbar .tool-icon:hover,
.app-header.topbar .menu-btn:hover { background: var(--hd-hover) !important; color: var(--text) !important; }
.app-header.topbar .tool-icon:active,
.app-header.topbar .menu-btn:active { background: var(--hd-press) !important; }
.app-header.topbar .tool-icon:focus-visible,
.app-header.topbar .menu-btn:focus-visible,
.app-header.topbar .user-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Nút chọn cơ sở: viên thuốc có biểu tượng + nhãn + mũi tên; select gốc phủ trong suốt để giữ hộp chọn của hệ điều hành */
.app-header.topbar .branch-pick {
  position: relative; display: inline-flex; align-items: center; gap: 7px; box-sizing: border-box;
  height: 36px; min-height: 36px; max-width: min(340px, 40vw) !important; width: auto !important; margin: 0 !important;
  padding: 0 10px 0 11px !important; border: 1px solid var(--hd-line) !important; border-radius: 999px;
  background: var(--hd-ctl) !important; color: var(--text) !important; font-size: 13px !important; font-weight: 600;
  line-height: 1; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.app-header.topbar .branch-pick > .i { width: 16px; height: 16px; flex: none; color: var(--primary-600, #1464f4); }
.app-header.topbar .branch-pick .branch-pick-caret { width: 14px; height: 14px; color: var(--muted); margin-left: -1px; }
.app-header.topbar .branch-pick-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.app-header.topbar label.branch-pick:hover { background: var(--hd-ctl-hover) !important; border-color: var(--border-strong) !important; }
.app-header.topbar label.branch-pick:has(select:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }
.app-header.topbar .branch-pick select.branch-select {
  position: absolute; inset: 0; width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; cursor: pointer;
  font-size: 16px !important; -webkit-appearance: none; appearance: none;
}
.app-header.topbar .branch-pick.branch-label { cursor: default; }
.app-header.topbar label.branch-pick:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.app-header.topbar label.branch-pick[aria-expanded="true"] { background: var(--hd-ctl-hover) !important; border-color: var(--border-strong) !important; }
/* Máy tính: select gốc không nhận chuột (hộp chọn tự vẽ #branch-pop thay thế) — cùng điều kiện BRANCH_NATIVE_MQ trong shell.js */
@media (min-width: 641px) and (pointer: fine) {
  .app-header.topbar .branch-pick select.branch-select { pointer-events: none; visibility: hidden; }
}

.branch-pop {
  position: fixed; z-index: 230; box-sizing: border-box; min-width: 320px; max-width: min(460px, calc(100vw - 16px)); padding: 6px; overflow-y: auto;
  background: var(--surface); color: var(--text); border: 1px solid rgba(15, 23, 42, .08); border-radius: 12px;
  box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .22), 0 2px 6px rgba(15, 23, 42, .06);
  font-size: 14px; animation: fade .12s ease-out;
}
body.theme-dark .branch-pop { border-color: rgba(148, 163, 184, .2); box-shadow: 0 16px 40px -8px rgba(0, 0, 0, .6); }
.branch-pop-opt {
  display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 8px 10px; border-radius: 8px;
  cursor: pointer; outline: none; line-height: 1.3;
}
.branch-pop-opt:hover, .branch-pop-opt:focus { background: rgba(15, 23, 42, .06); }
body.theme-dark .branch-pop-opt:hover, body.theme-dark .branch-pop-opt:focus { background: rgba(255, 255, 255, .08); }
.branch-pop-txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.branch-pop-txt b { font-weight: 650; }
.branch-pop-opt .i { width: 16px; height: 16px; flex: none; color: var(--primary-600, #1464f4); visibility: hidden; }
.branch-pop-opt.on .i { visibility: visible; }
.branch-pop-opt.on .branch-pop-txt b { color: var(--primary-600, #1464f4); }
@media (prefers-reduced-motion: reduce) { .branch-pop { animation: none; } }

.app-header.topbar .topbar-sep { width: 1px; height: 20px; background: var(--hd-line); flex: none; margin: 0 2px; }

.app-header.topbar .user-chip {
  width: 36px; height: 36px; min-width: 36px; min-height: 36px; padding: 0; border: 0 !important; border-radius: 50%;
  background: transparent !important; display: grid; place-items: center;
}
.app-header.topbar .user-chip .avatar {
  width: 32px; height: 32px; font-size: 12px; font-weight: 700; letter-spacing: .02em; border: 0 !important;
  background: linear-gradient(135deg, #2a86ff, #123a6b) !important; color: #fff !important;
  transition: box-shadow .15s ease;
}
.app-header.topbar .user-chip:hover .avatar,
.app-header.topbar .user-chip[aria-expanded="true"] .avatar { box-shadow: 0 0 0 3px var(--hd-press); }

/* Thanh bên DealerOS: nút « (body.sidebar-collapsed, lưu localStorage 'sidebar') thu về dải biểu tượng 64px */
.ds-app > .sidebar > .nav { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.ds-app > .sidebar > .nav:hover { scrollbar-color: rgba(255, 255, 255, .22) transparent; }
.ds-app > .sidebar > .nav::-webkit-scrollbar { width: 6px; }
.ds-app > .sidebar > .nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
.ds-app > .sidebar > .nav:hover::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .22); }
/* Ô logo + tên ứng dụng đầu thanh bên: lề trái trùng biểu tượng menu; màu theo --menu-* (Cấu hình → Màu thanh menu) */
.ds-app .sidebar-head { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 2px 14px 12px; }
.ds-app .brand-mark { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.ds-app .brand-mark .brand-logo { width: 32px; height: 32px; flex: none; border-radius: 8px; overflow: hidden; background: none; box-shadow: none; }
.ds-app .brand-mark .brand-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-app .brand-text { display: grid; min-width: 0; gap: 1px; line-height: 1.2; }
.ds-app .brand-mark .brand-name {
  font-size: 15px !important; font-weight: 650; letter-spacing: -.01em; color: var(--menu-fg, #fff) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-app .brand-sub {
  font-family: var(--font-body, inherit); font-size: 11px; font-weight: 500; letter-spacing: 0;
  color: var(--menu-muted, rgba(255, 255, 255, .6)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ds-app .sidebar-collapse-btn {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center; padding: 0; border: 0 !important; border-radius: 8px;
  background: transparent !important; color: var(--menu-muted, #b7c9e0) !important; box-shadow: none !important; outline: none;
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.ds-app .sidebar-collapse-btn svg { width: 16px; height: 16px; }
.ds-app .sidebar-collapse-btn:hover { background: var(--menu-hover, rgba(255, 255, 255, .1)) !important; color: var(--menu-fg, #fff) !important; }
.ds-app .sidebar-collapse-btn:focus:not(:focus-visible) { outline: none; box-shadow: none !important; }
.ds-app .sidebar-collapse-btn:focus-visible { outline: 2px solid var(--menu-muted, #b7c9e0); outline-offset: 1px; }

/* Hộp thoại desktop căn giữa vùng nội dung (bên phải thanh menu), chừa khoảng thở 32px với menu */
@media (min-width: 901px) {
  body:has(.ds-app) .modal-backdrop { padding-left: calc(var(--ds-sb-w, 262px) + 32px); padding-right: 32px; }
  body.sidebar-collapsed { --ds-sb-w: 64px; }
  body.menu-collapsed { --ds-sb-w: 0px; }
}
@media (min-width: 901px) {
  body.sidebar-collapsed .ds-app { grid-template-columns: 64px 1fr; }
  body.sidebar-collapsed .ds-app > .sidebar { padding: 12px 8px; }
  body.sidebar-collapsed .ds-app .sidebar-head { flex-direction: column; justify-content: center; gap: 8px; padding: 4px 0 12px; }
  body.sidebar-collapsed .ds-app .brand-mark { flex: none; }
  body.sidebar-collapsed .ds-app .brand-text { display: none; }
  body.sidebar-collapsed .ds-app .sidebar-collapse-btn svg { transform: rotate(180deg); }
  body.sidebar-collapsed .ds-app > .sidebar > .nav { padding: 0; }
  body.sidebar-collapsed .ds-app .nav a { justify-content: center; padding: 10px; min-height: 42px; gap: 0; }
}

.dropdown .dd-lang .flag-vn { width: 18px; height: 12px; margin: 0; }

/* Máy tính bảng / điện thoại: nút menu, tiêu đề co lại, viên cơ sở chỉ mã */
@media (max-width: 900px) {
  .app-header.topbar {
    min-height: calc(56px + env(safe-area-inset-top, 0px)) !important; height: auto !important; max-height: none !important;
    padding: env(safe-area-inset-top, 0px) max(10px, env(safe-area-inset-right, 0px)) 0 max(6px, env(safe-area-inset-left, 0px)) !important;
    gap: 6px;
  }
  .app-header.topbar .menu-btn { display: grid; width: 40px; height: 40px; }
  .app-header.topbar .app-page-title { display: block; font-size: 17px !important; }
  .app-header.topbar .topbar-tools { gap: 6px; }
  .app-header.topbar .branch-pick { max-width: min(300px, 42vw) !important; padding: 0 9px 0 10px !important; gap: 5px; }
}
@media (max-width: 640px) {
  .app-header.topbar .tool-icon[data-click="toggle-theme"],
  .app-header.topbar .tool-icon[data-click="notif-menu"],
  .app-header.topbar .topbar-sep { display: none !important; }
  .app-header.topbar .tool-icon[data-click="app-refresh"] { display: grid !important; width: 38px; height: 38px; }
  .app-header.topbar .branch-pick { max-width: 104px !important; }
  .app-header.topbar .branch-pick > .i:first-child { width: 15px; height: 15px; }
  .app-header.topbar .user-chip { width: 38px; height: 38px; }
}
@media (max-width: 360px) {
  .app-header.topbar .branch-pick > .i:first-child { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .app-header.topbar .tool-icon, .app-header.topbar .menu-btn, .app-header.topbar .branch-pick, .app-header.topbar .user-chip .avatar { transition: none; }
}

/* ---------- Ô ngày dd/mm/yyyy + lịch chọn ngày (datepicker.js) ---------- */
.dp { display: inline-flex; align-items: center; gap: 2px; position: relative; padding: 0 3px 0 10px; cursor: text; vertical-align: middle; }
.field .dp, .form-grid .dp, .gm-box .dp, .wo-fp-range .dp { display: flex; }
.dp:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.dp > .dp-text { flex: 1 1 auto; width: 10.5ch; min-width: 0; height: 100% !important; min-height: 0 !important; margin: 0; padding: 0 !important;
  border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; outline: none; color: inherit; font: inherit;
  font-variant-numeric: tabular-nums; }
.dp.dp-dt > .dp-text { width: 16ch; }
.dp > .dp-text::placeholder { color: var(--muted); opacity: .8; }
.dp > .dp-btn { flex: none; display: inline-grid; place-items: center; width: 30px; height: 30px; max-height: 100%; margin: 0; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted); cursor: pointer; }
.dp > .dp-btn:hover, .dp > .dp-btn:focus-visible, .dp > .dp-btn[aria-expanded="true"] { background: var(--surface-2); color: var(--primary); outline: none; }
.dp > .dp-btn .i { width: 17px; height: 17px; }
.dp > .dp-btn:disabled { cursor: not-allowed; opacity: .5; }
.dp.dp-disabled { cursor: not-allowed; opacity: .65; }
.dp.dp-invalid, .dp.dp-invalid:focus-within { border-color: var(--danger); }
.dp.dp-invalid:focus-within { box-shadow: 0 0 0 3px rgba(215, 0, 21, .15); }
.dp-msg { position: absolute; left: 0; top: calc(100% + 3px); z-index: 5; padding: 2px 6px; border-radius: 6px; background: var(--surface); color: var(--danger);
  font-size: 12px; line-height: 1.35; white-space: nowrap; box-shadow: var(--shadow-md); pointer-events: none; }
.dp-pop { position: fixed; z-index: 1100; width: 296px; padding: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 14px 36px -8px rgba(16, 24, 40, .26); font-size: 14px; outline: none; }
.dp-pop.dp-inline { position: static; width: auto; padding: 8px 0 0; border: 0; border-radius: 0; box-shadow: none; }
.dp-pop.dp-sheet { left: 0; right: 0; bottom: 0; top: auto !important; width: auto; max-width: none; border-radius: 16px 16px 0 0; border-bottom: 0;
  padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); animation: gm-up .18s ease-out; }
.dp-backdrop { position: fixed; inset: 0; z-index: 1099; background: rgba(15, 23, 42, .38); }
.dp-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.dp-title { flex: 1; text-align: center; font-weight: 650; font-size: 15px; }
.dp-nav { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text); cursor: pointer; }
.dp-nav .i { width: 18px; height: 18px; }
.dp-nav:hover, .dp-nav:focus-visible { background: var(--surface-2); outline: none; }
.dp-grid { display: grid; gap: 2px; }
.dp-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-wd span { text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); padding: 4px 0; }
.dp-day { height: 36px; min-width: 0; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.dp-day:hover { background: var(--surface-2); }
.dp-day:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.dp-day.dp-out { color: var(--muted); opacity: .6; }
.dp-day.dp-today { color: var(--primary); font-weight: 700; box-shadow: inset 0 0 0 1px var(--primary); }
.dp-day.dp-sel, .dp-day.dp-sel:hover { background: var(--primary); color: #fff; opacity: 1; box-shadow: none; }
.dp-day:disabled { opacity: .3; cursor: not-allowed; background: none; }
.dp-time { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; color: var(--muted); }
.dp-time .select { width: 74px; height: 34px; }
.dp-time b { color: var(--text); }
.dp-foot { display: flex; gap: 8px; margin-top: 10px; }
.dp-foot .btn { flex: 1; justify-content: center; }
.dp-sheet .dp-day { height: 44px; font-size: 16px; }
.dp-sheet .dp-nav { width: 44px; height: 44px; }
.dp-sheet .dp-foot .btn { min-height: 44px; font-size: 15px; }
.dp-sheet .dp-time .select { height: 44px; font-size: 16px; }
body.theme-dark .dp-pop { box-shadow: 0 14px 36px -8px rgba(0, 0, 0, .65); }
body.theme-dark .dp-day:hover, body.theme-dark .dp-nav:hover, body.theme-dark .dp > .dp-btn:hover { background: rgba(255, 255, 255, .08); }
@media (prefers-reduced-motion: reduce) { .dp-pop.dp-sheet { animation: none; } }

/* Dashboard polish */
.dash-scope { color: var(--text-2); font-weight: 600; }
.dash-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; margin-bottom: 12px; }
.dash-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.dash-card-main { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.dash-card-main:hover { text-decoration: none; }
.dash-card-main:hover .dash-card-v { color: var(--primary); }
.dash-card-l { font-size: 13px; font-weight: 600; color: var(--muted); line-height: 1.3; }
.dash-card-v { font-family: var(--font-display); font-size: 34px; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; color: var(--text); font-variant-numeric: tabular-nums; }
.dash-card.tone-red .dash-card-v { color: var(--red-fg); }
.dash-card.tone-amber .dash-card-v { color: #b45309; }
.dash-card.tone-green .dash-card-v { color: #15803d; }
body.theme-dark .dash-card.tone-amber .dash-card-v { color: #fbbf24; }
body.theme-dark .dash-card.tone-green .dash-card-v { color: #4ade80; }
.dash-card-x { font-size: 12.5px; color: var(--muted); }
.dash-card-x a { color: var(--text-2); }
.dash-kinds { display: flex; flex-wrap: wrap; gap: 4px 6px; font-size: 12px; }
.dash-kinds a { padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); text-decoration: none; white-space: nowrap; }
.dash-kinds a:hover { background: var(--primary-50); color: var(--primary); }
.dash-kinds b { font-weight: 700; font-variant-numeric: tabular-nums; }
.dash-today-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dash-today-row > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.dash-today-row > div > a { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.dash-today-row > div > a:hover .dash-card-v { color: var(--primary); }
.dash-today-l { font-size: 12px; color: var(--muted); }
.dash-today .dash-kinds { gap: 3px; }
.dash-today .dash-kinds a { padding: 0 6px; font-size: 11.5px; }

.dash-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.dash-chip { display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; }
.dash-chip > a { color: var(--text-2); text-decoration: none; padding-right: 6px; }
.dash-chip > a b { color: var(--text); margin-left: 2px; }
.dash-chip.is-zero { opacity: .55; background: transparent; }

.dash-pipe { margin-bottom: 16px; }
.dash-pipe-bar { display: flex; gap: 2px; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-2); margin-bottom: 16px; }
.dash-pipe-bar > span { min-width: 4px; }
.dash-stages { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 18px; }
.dash-stage-h { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
.dash-stage-h .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.dash-stage-h b { margin-left: auto; color: var(--text); font-size: 13px; }
.dash-step { padding: 6px 0; border-bottom: 1px dashed var(--border); }
.dash-step:last-child { border-bottom: 0; }
.dash-step-main { display: flex; align-items: baseline; gap: 8px; color: var(--text); text-decoration: none; font-size: 13.5px; }
.dash-step-main:hover { text-decoration: none; color: var(--primary); }
.dash-step-main span { flex: 1; min-width: 0; }
.dash-step-main b { font-size: 16px; font-variant-numeric: tabular-nums; }
.dash-step .dash-kinds { margin-top: 3px; }
.dash-step .dash-kinds a { padding: 0 6px; font-size: 11.5px; }
.dash-step.is-zero { padding: 3px 0; }
.dash-step.is-zero .dash-step-main { color: var(--muted); font-size: 12.5px; opacity: .7; }
.dash-step.is-zero .dash-step-main b { font-size: 12.5px; font-weight: 500; }

.dash-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
.dash-cols > .card, .dash-cols > .stack { min-width: 0; }
.dash-od { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; }
.dash-od:last-child { border-bottom: 0; }
.dash-od:hover { background: var(--surface-2); text-decoration: none; }
.dash-od-days { flex: none; min-width: 74px; padding: 3px 8px; border-radius: 8px; background: var(--red-bg); color: var(--red-fg); font-size: 12px; font-weight: 700; text-align: center; white-space: nowrap; }
.dash-od-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-od-main > .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-od-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dash-age { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); color: inherit; text-decoration: none; font-size: 13.5px; }
.dash-age:last-child { border-bottom: 0; }
.dash-age:hover { background: var(--surface-2); text-decoration: none; }
.dash-age b { font-variant-numeric: tabular-nums; }
.dash-age.is-zero { color: var(--muted); }
.dash-age-bar { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.dash-age-bar > span { display: block; height: 100%; border-radius: 999px; }
.dash-branches { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-branches th { text-align: right; font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 8px 16px; border-bottom: 1px solid var(--border); }
.dash-branches td { text-align: right; padding: 9px 16px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.dash-branches th:first-child, .dash-branches td:first-child { text-align: left; }
.dash-branches tbody tr { cursor: pointer; }
.dash-branches tbody tr:hover { background: var(--surface-2); }
.dash-branches tbody tr:last-child td { border-bottom: 0; }

.dash-skel { border-radius: var(--radius); background: linear-gradient(90deg, var(--surface-2) 0%, var(--border) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: dash-skel 1.2s ease-in-out infinite; margin-bottom: 12px; }
.dash.is-skeleton .dash-cols .dash-skel { margin-bottom: 0; }
@keyframes dash-skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .dash-skel { animation: none; } }

@media (max-width: 1100px) {
  .dash-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .dash-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dash-card { padding: 14px; }
  .dash-card-v { font-size: 28px; }
  .dash-today { grid-column: 1 / -1; }
  .dash-stages { grid-template-columns: minmax(0, 1fr); }
  .dash-od { padding: 10px 12px; }
  .dash-age { grid-template-columns: 84px minmax(0, 1fr) auto; padding: 10px 12px; }
  .dash-branches th, .dash-branches td { padding: 8px 10px; }
}

/* List full-height */
.wo-alertbar-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.wo-alertbar-list > .wo-alert-chip { flex: none; white-space: nowrap; }
.wo-ps { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; white-space: nowrap; }
.wo-ps .select { height: 30px; width: auto; min-width: 0; padding: 0 26px 0 8px; font-size: 13px; }
@media (min-width: 901px) {
  .ds-app #main.content:has(> .wo-list-card) { display: flex; flex-direction: column; padding-bottom: 12px; }
  .ds-app #main.content:has(> .wo-list-card) > * { flex: none; }
  .ds-app #main.content > .wo-list-card { flex: 1 1 0; min-height: 300px; display: flex; flex-direction: column; margin-bottom: 0; }
  .wo-list-card > .wo-tb, .wo-list-card > .gm-chips, .wo-list-card > .pagination { flex: none; }
  .wo-list-card > .wo-grid-wrap { flex: 1 1 0; min-height: 0; max-height: none; overflow: auto !important; }
  .wo-list-card .wo-grid thead th { position: sticky; top: 0; z-index: 3; }
  .wo-list-card > .pagination { padding: 8px 16px; }
  /* Danh sách tổng quan: bảng sát mép, tận dụng hết vùng nội dung (chỉ cuộn trong bảng → bỏ rãnh cuộn của trang) */
  .ds-app #main.content:has(> .wo-overview) { padding: 8px 8px 6px; scrollbar-gutter: auto; }
  .ds-app #main.content > .wo-overview { border-radius: 10px; }
  .wo-overview .toolbar { padding: 7px 12px; }
  .wo-list-card.wo-overview > .pagination { padding: 5px 12px; }
}

/* ---------- Phiếu bảo hành (#/warranty-tickets) – lưới dùng chung kiểu Phiếu sửa chữa ---------- */
.wt-add { flex: none; height: 34px; margin-left: 6px; gap: 6px; }
.wt-add .i { width: 15px; height: 15px; }
.wt-fs { border: 0; margin: 0; padding: 0; min-width: 0; }.wt-sec { margin: 6px 0 -4px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.wt-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.wt-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.wt-log li { display: grid; grid-template-columns: 128px minmax(0, 140px) minmax(0, 1fr); gap: 10px; padding: 8px 2px; border-top: 1px solid var(--border); font-size: 13px; }
.wt-log li:first-child { border-top: 0; }
.wt-log-t { color: var(--muted); font-variant-numeric: tabular-nums; }
.wt-log-u { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Nhiều mã (Lệnh bảo hành / Số đề xuất BH) */
.wt-codes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; overflow: hidden; min-height: 36px; padding: 3px 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: #fff; cursor: text; transition: border-color .12s, box-shadow .12s; }
.wt-codes:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.wt-codes-in { flex: 1 1 120px; min-width: 120px; height: 28px; border: 0; outline: none; background: transparent; color: var(--text); padding: 0 4px; text-transform: uppercase; }
.wt-codes-in::placeholder { text-transform: none; }
.wt-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; height: 26px; padding: 0 2px 0 8px; border-radius: 6px; background: var(--slate-bg); color: var(--text); font-size: 12.5px; }
.wt-chip { min-width: 0; flex: 0 1 auto; }
.field:has(> .wt-codes), .field:has(.wt-codes) { min-width: 0; }
.wt-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-chip-x { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.wt-chip-x:hover { background: rgba(0, 0, 0, .08); color: var(--danger); }
.wt-fs[disabled] .wt-chip-x { display: none; }
.wt-cc { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; vertical-align: middle; }
.wt-cc-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wt-cc-n { flex: none; padding: 0 6px; border-radius: 9px; background: var(--slate-bg); color: var(--text-2); font-size: 11px; font-weight: 600; line-height: 18px; }
.wt-tag { display: inline-block; padding: 0 6px; border-radius: 5px; background: var(--slate-bg); color: var(--text-2); font-size: 11.5px; line-height: 18px; }
.wt-card-codes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.wt-code-lines { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
body.theme-dark .wt-codes { background: #0b1220; }
@media (max-width: 900px) {
  .wt-add { height: 40px; width: 40px; padding: 0; justify-content: center; }
  .wt-codes { min-height: 44px; }
  .wt-codes-in { height: 34px; font-size: 16px; }
  .wt-chip { height: 32px; }
  .wt-chip-x { width: 30px; height: 30px; }
}
@media (max-width: 640px) {
  .wt-log li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wt-log-a { grid-column: 1 / -1; }
}

/* Chuông thông báo */
.notif-btn { position: relative; }
.notif-n {
  position: absolute; top: -2px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
  border-radius: 8px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
  pointer-events: none;
}
.notif-pop { min-width: 280px; max-width: 360px; }
.notif-item { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.notif-item .gm-lab { flex: 1 1 auto; }
.notif-c { flex: none; min-width: 26px; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; text-align: center; }
.notif-amber { background: #fef3c7; color: #92400e; }
.notif-red { background: #fee2e2; color: #b91c1c; }
.notif-green { background: #dcfce7; color: #15803d; }
.notif-blue { background: #dbeafe; color: #1d4ed8; }

/* Năng suất KTV */
.ktv-table td.num, .ktv-table th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Màn cảm ứng (điện thoại, iPad): vùng bấm tối thiểu 44px ---------- */
@media (max-width: 900px), (pointer: coarse) {
  .input:not(textarea), .select { height: 44px; min-height: 44px; }
  .input.input-sm, .select.select-sm { height: 40px; min-height: 40px; }
  table .input:not(textarea), table .select { height: 36px; min-height: 36px; }
  .dp, .dp-text { min-height: 44px; }
  .dp > .dp-btn, .dp-btn { width: 40px; height: 40px; }
  .btn { min-height: 44px; }
  .btn.btn-sm { min-height: 40px; }
  table .btn, table .btn.btn-sm { min-height: 40px; min-width: 40px; }
  .shift { height: 40px; min-width: 48px; }
  .gm-chip-x { width: 36px; height: 36px; }
  .wt-chip-x { width: 36px !important; height: 36px !important; }
  .app-header .tool-icon, .app-header .user-chip, .app-header .menu-btn, .app-header .icon-btn { width: 44px !important; height: 44px !important; min-width: 44px !important; }
  body .app-header.topbar .branch-pick { height: 40px; min-height: 40px; }
  .seg button { min-height: 40px; }
}
@media (max-width: 400px) {
  body .app-header.topbar .app-page-title { font-size: 16px !important; margin-left: 4px !important; }
  body .app-header.topbar .branch-pick > .i:first-child { display: none; }
  .app-header .icon-btn, .app-header .tool-icon, .app-header .user-chip { width: 42px !important; min-width: 42px !important; }
}

/* Chi tiết phiếu – tối giản: phẳng, bỏ dòng trống, bớt chữ phụ */
#drawer .drawer-body { background: var(--surface); }
#drawer .drawer-body .card {
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  background: transparent !important; border-bottom: 1px solid var(--border, #e5e7eb) !important;
}
#drawer .drawer-body .card:last-child { border-bottom: 0 !important; }
#drawer .drawer-body .card-head { background: transparent !important; border: 0 !important; padding-bottom: 0; }
#drawer .card-ico, #drawer .card-head .i:first-child { display: none !important; }
#drawer .wd-chip.is-empty, #drawer .wd-stepbar-hint { display: none !important; }
#drawer .wd-kv-row:has(> dd > .wd-empty:only-child) { display: none; }
#drawer .wd-inspect-body .muted.small { display: none; }
#drawer .wd-inspect-body .upload-bar { margin-top: 0 !important; }
.wd-progress .stepper { padding: 2px 0 4px !important; }
.wd-progress .stepper .step { min-width: 0; font-size: 12px; }
.wd-progress .stepper .step::before { top: 9px; }
.wd-progress .stepper .dot { width: 18px; height: 18px; margin-bottom: 4px; font-size: 10px; border-width: 1px; }
.wd-progress .stepper .dot svg.i { width: 10px; height: 10px; }
.wd-progress .stepper .step.current .dot { box-shadow: 0 0 0 3px var(--primary-100); }
.wd-progress .stepper .step-label { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 1px; letter-spacing: -.1px; }
.wd-progress .stepper .step .t:not(.by) { display: none; }
/* Tên người chuyển trạng thái dưới mỗi bước (rê chuột: việc đã làm + thời điểm) */
.wd-progress .stepper .step .t.by { display: block; max-width: 100%; margin-top: 2px; padding: 0 4px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 11px; font-weight: 500; line-height: 1.3; color: var(--muted); }
.wd-progress .stepper .step.done .t.by { color: #15803d; }
.wd-progress .stepper .step.current .t.by { color: var(--primary-600, #1464f4); }
.wd-sla { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; margin-right: 4px; }
.wd-sla svg.i { width: 14px; height: 14px; }
.wd-sla-warning { background: #fff4e0; color: #9a5b00; }
.wd-sla-overdue { background: #fde8e8; color: #b42318; }
#drawer .drawer-body .wd-main > .wd-col > .card, #drawer .drawer-body .wd-main > .card {
  border: 1px solid var(--border, #e5e7eb) !important; border-radius: 12px !important; margin-bottom: 12px !important;
}
#drawer .drawer-body .card.wd-vehicle {
  border: 1px solid var(--border, #e5e7eb) !important; border-radius: 12px !important; margin-bottom: 12px;
}
#drawer .wd-vehicle .wd-vhead { padding: 10px 16px 0; gap: 8px; }
#drawer .wd-vehicle .wd-vhead > .card-ico { display: inline-grid !important; width: 28px; height: 28px; }
#drawer .wd-vehicle .wd-vhead > .card-ico svg.i { width: 17px; height: 17px; }
#drawer .wd-vehicle .wd-vmore { padding: 4px 10px; }
#drawer .wd-vehicle .wd-vstrip { padding-top: 8px; }
.wd-vehicle .wd-vitems { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px 20px; }
.wd-vehicle .wd-vitems > .wd-vrow { display: contents; }
.wd-vehicle .wd-vrow > .wd-vf-person { grid-column: 1 / 2 !important; min-width: 0; }
.wd-vehicle .wd-vrow > .wd-vf-req { grid-column: 2 / -1 !important; min-width: 0; align-self: start; }
.wd-vehicle .wd-vrow > .wd-vf:only-child { grid-column: 1 / -1 !important; }
.wd-vehicle .wd-vrow:has(> .wd-vf-hist) > .wd-vf-req { grid-column: 2 / 3 !important; }
.wd-vehicle .wd-vrow > .wd-vf-hist { grid-column: -2 / -1 !important; min-width: 0; align-self: start; }
button.wd-vf-hist { display: block; padding: 0; border: 0; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; }
button.wd-vf-hist .wd-vf-v { color: var(--primary); font-weight: 600; }
button.wd-vf-hist:hover .wd-vf-v { text-decoration: underline; }
button.wd-vf-hist:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.wd-vf-hist .wd-vf-k svg.i { width: 13px; height: 13px; vertical-align: -2px; }
.wd-hist-h { display: flex; align-items: center; gap: 6px; margin: 4px 0 6px; font-size: 13.5px; }
.wd-hist-h:not(:first-child) { margin-top: 16px; }
.wd-hist-h svg.i { width: 15px; height: 15px; color: var(--primary); }
.wd-hist-item { padding: 8px 0 !important; }
.wd-vf-person .wd-vf-v { white-space: normal; }
.wd-person-phone { margin-top: 2px; font-size: 13px; font-weight: 500; }
.wd-sep { color: var(--muted); font-weight: 400; margin: 0 6px; }
@container (min-width: 760px) {
  .wd-vehicle .wd-vitems { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}
@container (max-width: 440px) {
  .wd-vehicle .wd-vitems { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
#drawer .card-inspect .card-head h3 > .card-ico { display: inline-grid !important; width: 28px; height: 28px; }
#drawer .card-inspect .card-head h3 > .card-ico svg.i { width: 17px; height: 17px; }
#drawer .card-inspect .card-head h3 > .card-ico svg.i:first-child { display: inline-block !important; }
#drawer .card-inspect .card-head { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px; }
#drawer .card-inspect .card-head h3 { flex: 1 1 auto !important; min-width: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; word-break: normal !important; overflow-wrap: normal !important; }
#drawer .card-inspect .card-head-actions { flex: 0 0 auto !important; gap: 4px; }
#drawer .card-inspect .card-head-actions .btn { flex: 0 0 auto !important; width: auto !important; min-height: 34px; padding: 4px 10px; color: var(--primary); }
#drawer .acc-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; gap: 6px 16px !important; }
#drawer .acc-grid { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
#drawer .acc-grid-item.is-yes, #drawer .acc-grid-item.is-no { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px 4px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; }
#drawer .acc-grid-item svg.i { width: 14px; height: 14px; }
#drawer .acc-grid-item.is-yes { background: #e3f6ec; color: #136c3f; }
#drawer .acc-grid-item.is-yes .success-text { color: #1f9d5c; }
#drawer .acc-grid-item.is-no { background: #f1f3f6; color: #6b7685; font-weight: 500; }
#drawer .acc-grid-item.is-old.is-yes { background: #fff1db; color: #8a4b00; }
#drawer .acc-grid-item.is-old.is-yes .success-text { color: #d97706; }
body.theme-dark #drawer .acc-grid-item.is-yes { background: rgba(31, 157, 92, .18); color: #7ee2a8; }
body.theme-dark #drawer .acc-grid-item.is-no { background: rgba(148, 163, 184, .14); color: #a5b0bf; }
body.theme-dark #drawer .acc-grid-item.is-old.is-yes { background: rgba(217, 119, 6, .2); color: #fbbf6b; }
#drawer .wd-sec-box { padding: 12px 14px; border-radius: 10px; background: var(--wd-soft, #f4f7fb); }
#drawer .wd-sec-box .nq-row:last-child { border-bottom: 0; padding-bottom: 0; }
#drawer .wd-sec-title.wd-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--text, #132033); }
#drawer .wd-sec-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #e6f6fc; color: #0e7fa8; flex: none; }
#drawer .wd-sec-ico svg.i { width: 14px; height: 14px; display: inline-block !important; }
body.theme-dark #drawer .wd-sec-ico { background: rgba(24, 164, 216, .16); color: #6fd0f2; }
#drawer .wd-o-bh .card-head h3 > .card-ico { display: inline-grid !important; width: 28px; height: 28px; }
#drawer .wd-o-bh .card-head h3 > .card-ico { background: linear-gradient(135deg, #34c27a, #1f8a55); color: #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(31, 138, 85, .3); }
#drawer .wd-o-bh .card-head h3 > .card-ico svg.i { display: inline-block !important; width: 17px; height: 17px; stroke-width: 2.2; }
#drawer .wd-o-bh .card-head h3 > .card-ico svg.i path:first-child { fill: rgba(255, 255, 255, .22); }
#drawer .wd-o-bh .card-head > .btn { color: #1f8a55; border-color: #bfe5cf; background: #eefaf3; font-weight: 600; }
#drawer .wd-o-bh .card-head > .btn svg.i { display: inline-block !important; }
#drawer .wd-o-bh .card-head > .btn:hover { background: #dff4e8; }
#drawer .wd-sec-faults { background: #fff5f3; }
#drawer .wd-sec-faults .wd-sec-ico { background: #fde4df; color: #c2410c; }
#drawer .wd-sec-faults .chip { background: #fff; border: 1px solid #f8cfc6; color: #9a3412; font-weight: 600; }
body.theme-dark #drawer .wd-sec-faults { background: rgba(194, 65, 12, .1); }
#drawer .wd-o-bh .bh-section { --bk: #0e8f7e; --bk-soft: #eaf8f5; --bk-line: #bfe8df; margin: 0; padding: 12px 14px; border: 1px solid var(--bk-line); border-left: 4px solid var(--bk); border-radius: 10px; background: var(--bk-soft); }
#drawer .wd-o-bh .bh-k-motor { --bk: #6d4ed8; --bk-soft: #f3f0fd; --bk-line: #ddd3fa; }
#drawer .wd-o-bh .bh-k-other { --bk: #c27803; --bk-soft: #fff8eb; --bk-line: #f6dfb0; }
#drawer .wd-o-bh .bh-section-head { margin-bottom: 10px; }
#drawer .wd-o-bh .bh-section-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--bk); }
#drawer .wd-o-bh .bh-ico { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--bk); color: #fff; }
#drawer .wd-o-bh .bh-ico svg.i { display: inline-block !important; width: 15px; height: 15px; stroke-width: 2.2; }
#drawer .wd-o-bh .bh-section-head .btn { color: var(--bk); border-color: var(--bk-line); background: #fff; font-weight: 600; }
#drawer .wd-o-bh .bh-section-head .btn svg.i { display: inline-block !important; }
#drawer .wd-o-bh .bh-section-head .btn:hover { background: var(--bk); color: #fff; border-color: var(--bk); }
#drawer .wd-o-bh .bh-section .info-grid { gap: 10px 20px; }
#drawer .wd-o-bh .bh-section .info-grid .mono { color: var(--bk); font-weight: 600; }
body.theme-dark #drawer .wd-o-bh .bh-section { --bk-soft: rgba(14, 143, 126, .1); --bk-line: rgba(14, 143, 126, .35); }
body.theme-dark #drawer .wd-o-bh .bh-k-motor { --bk: #a48bff; --bk-soft: rgba(109, 78, 216, .12); --bk-line: rgba(164, 139, 255, .35); }
body.theme-dark #drawer .wd-o-bh .bh-k-other { --bk: #f0b44c; --bk-soft: rgba(194, 120, 3, .12); --bk-line: rgba(240, 180, 76, .35); }
body.theme-dark #drawer .wd-o-bh .bh-section-head .btn { background: transparent; }
#drawer .wd-o-assign .card-head h3 > .card-ico { display: inline-grid !important; width: 28px; height: 28px; }
#drawer .wd-o-assign .card-head h3 > .card-ico svg.i { display: inline-block !important; width: 16px; height: 16px; }
#drawer .assign-body { gap: 12px !important; container-type: inline-size; }
#drawer .assign-people { gap: 0 !important; grid-template-columns: 1fr 1fr; padding: 4px 14px; border-radius: 10px; background: var(--wd-soft, #f4f7fb); }
#drawer .assign-person { --ap: #2563eb; --ap-bg: #e5edff; display: flex; align-items: center; gap: 10px; padding: 10px 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; }
#drawer .assign-person:nth-child(-n+2) { border-bottom: 1px solid var(--border, #e5e7eb) !important; }
#drawer .assign-person:nth-child(odd) { padding-right: 14px !important; }
#drawer .ap-insp { --ap: #0e7fa8; --ap-bg: #e2f5fc; }
#drawer .ap-tech { --ap: #1f8a55; --ap-bg: #e3f6ec; }
#drawer .ap-qc { --ap: #c27803; --ap-bg: #fff1db; }
#drawer .ap-ico { flex: 0 0 34px; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ap-bg); color: var(--ap); }
#drawer .ap-ico svg.i { display: inline-block !important; width: 17px; height: 17px; stroke-width: 2.1; }
#drawer .ap-main { flex: 1; min-width: 0; }
#drawer .assign-role { margin: 0 0 2px !important; font-size: 12px !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--muted) !important; }
#drawer .assign-name { font-size: 14px; font-weight: 600; }
#drawer .assign-name > span:not(.badge) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#drawer .assign-name .muted { font-weight: 500; }
#drawer .assign-name .select { height: 34px; min-height: 34px; padding-top: 4px; padding-bottom: 4px; font-weight: 600; }
#drawer .note-block { --nt: #1f8a55; --nt-bg: #e3f6ec; border: 0 !important; border-radius: 10px; background: var(--wd-soft, #f4f7fb) !important; overflow: visible; }
#drawer .note-cvdv { --nt: #0e7fa8; --nt-bg: #e2f5fc; }
#drawer .note-head { padding: 10px 14px 0; border: 0; }
#drawer .note-title { gap: 8px; font-size: 14px; color: var(--text) !important; }
#drawer .note-ico { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--nt-bg); color: var(--nt); }
#drawer .note-title .note-ico svg.i { display: inline-block !important; width: 14px; height: 14px; }
#drawer .note-head .btn-icon { width: 30px; height: 30px; min-height: 30px; border: 0; background: transparent; color: var(--muted); }
#drawer .note-head .btn-icon svg.i { display: inline-block !important; }
#drawer .note-head .btn-icon:hover { background: var(--nt-bg); color: var(--nt); }
#drawer .note-body { min-height: 0; padding: 6px 14px 12px 46px; font-size: 13.5px; }
#drawer .note-empty { color: var(--muted); font-size: 13px; }
@container (max-width: 440px) {
  #drawer .assign-people { grid-template-columns: 1fr; }
  #drawer .assign-person:nth-child(-n+3) { border-bottom: 1px solid var(--border, #e5e7eb) !important; }
  #drawer .assign-person:nth-child(odd) { padding-right: 0 !important; }
}
body.theme-dark #drawer .ap-cvdv { --ap: #93b4ff; --ap-bg: rgba(37, 99, 235, .18); }
body.theme-dark #drawer .ap-insp, body.theme-dark #drawer .note-cvdv { --ap: #6fd0f2; --nt: #6fd0f2; --ap-bg: rgba(24, 164, 216, .16); --nt-bg: rgba(24, 164, 216, .16); }
body.theme-dark #drawer .ap-tech, body.theme-dark #drawer .note-ktv { --ap: #6ee7a8; --nt: #6ee7a8; --ap-bg: rgba(31, 138, 85, .2); --nt-bg: rgba(31, 138, 85, .2); }
body.theme-dark #drawer .ap-qc { --ap: #f0b44c; --ap-bg: rgba(194, 120, 3, .18); }
#drawer .wd-o-sla .card-head h3 > .card-ico { display: inline-grid !important; width: 28px; height: 28px; background: #fff1db; color: #c27803; }
#drawer .wd-o-sla .card-head h3 > .card-ico svg.i { display: inline-block !important; width: 16px; height: 16px; }
#drawer .sla-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
#drawer .sla-tile { --st: #6d4ed8; --st-bg: #f3f0fd; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--st-bg); min-width: 0; }
#drawer .sla-tile-ico { flex: 0 0 32px; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--st); color: #fff; }
#drawer .sla-tile-ico svg.i { display: inline-block !important; width: 16px; height: 16px; stroke-width: 2.1; }
#drawer .sla-k { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
#drawer .sla-v { font-size: 14px; font-weight: 700; color: var(--text); }
#drawer .sla-tile .badge { margin: 0; }
#drawer .sla-due-idle { --st: #64748b; --st-bg: #f1f5f9; }
#drawer .sla-due-ok { --st: #1f8a55; --st-bg: #e3f6ec; }
#drawer .sla-due-ok .sla-v { color: #136c3f; }
#drawer .sla-due-warn { --st: #c27803; --st-bg: #fff1db; }
#drawer .sla-due-warn .sla-v { color: #8a4b00; }
#drawer .sla-due-bad { --st: #dc2626; --st-bg: #fde8e8; }
#drawer .sla-due-bad .sla-v { color: #b42318; }
#drawer .sla-tile:nth-child(3) { --st: #0e7fa8; --st-bg: #e2f5fc; }
#drawer .sla-tl { list-style: none; margin: 0; padding: 0; }
#drawer .sla-tl li { position: relative; display: grid; grid-template-columns: 30px 130px minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px 0; }
#drawer .sla-tl li:not(:last-child)::after { content: ''; position: absolute; left: 14px; top: 34px; bottom: -6px; width: 2px; background: var(--border, #e5e7eb); }
#drawer .sla-tl li.is-done:not(:last-child)::after { background: #9fd8b8; }
#drawer .sla-dot { position: relative; z-index: 1; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #f1f3f6; color: #9aa4b2; border: 2px solid #fff; }
#drawer .sla-dot svg.i { display: inline-block !important; width: 15px; height: 15px; stroke-width: 2.1; }
#drawer .sla-tl li.is-done .sla-dot { background: #1f8a55; color: #fff; box-shadow: 0 2px 6px rgba(31, 138, 85, .28); }
#drawer .sla-tl-k { font-size: 13px; color: var(--muted); }
#drawer .sla-tl li.is-done .sla-tl-k { color: var(--text); font-weight: 600; }
#drawer .sla-tl-v { font-size: 13.5px; font-weight: 600; min-width: 0; }
#drawer .sla-tl-v .muted { font-weight: 400; }
@container (max-width: 440px) {
  #drawer .sla-tl li { grid-template-columns: 30px minmax(0, 1fr); row-gap: 0; }
  #drawer .sla-tl-v { grid-column: 2; }
}
#drawer .wd-o-sla .card-body { container-type: inline-size; }
body.theme-dark #drawer .sla-tile { --st-bg: rgba(109, 78, 216, .14); }
body.theme-dark #drawer .sla-due-idle { --st-bg: rgba(100, 116, 139, .16); }
body.theme-dark #drawer .sla-due-ok { --st-bg: rgba(31, 138, 85, .16); }
body.theme-dark #drawer .sla-due-warn { --st-bg: rgba(194, 120, 3, .16); }
body.theme-dark #drawer .sla-due-bad { --st-bg: rgba(220, 38, 38, .16); }
body.theme-dark #drawer .sla-tile:nth-child(3) { --st-bg: rgba(24, 164, 216, .14); }
body.theme-dark #drawer .sla-due-ok .sla-v, body.theme-dark #drawer .sla-due-warn .sla-v, body.theme-dark #drawer .sla-due-bad .sla-v { color: var(--text); }
body.theme-dark #drawer .sla-dot { background: #334155; border-color: #1e293b; }
.wd-progress .stepper .step.current + .step::before {
  background: linear-gradient(90deg, transparent, var(--primary) 45%, #7dd3f5 55%, transparent) no-repeat, var(--border);
  background-size: 45% 100%, 100% 100%;
  animation: wd-step-flow 1.8s linear infinite;
}
.wd-progress .stepper .step.current .dot { position: relative; animation: wd-step-pulse 1.8s ease-out infinite; }
@keyframes wd-step-flow { from { background-position: -82% 0, 0 0; } to { background-position: 182% 0, 0 0; } }
@keyframes wd-step-pulse {
  0% { box-shadow: 0 0 0 0 rgba(24, 164, 216, .55); }
  70% { box-shadow: 0 0 0 7px rgba(24, 164, 216, 0); }
  100% { box-shadow: 0 0 0 0 rgba(24, 164, 216, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .wd-progress .stepper .step.current + .step::before, .wd-progress .stepper .step.current .dot { animation: none; }
}
body.theme-dark #drawer .wd-sec-faults .chip { background: transparent; border-color: rgba(251, 146, 60, .35); color: #fdba74; }
#drawer .wd-sec-box .nq-list { margin-top: 0; }
#drawer .wd-codes { margin-top: 10px; gap: 0; padding-top: 4px; border-top: 1px solid var(--border); }
#drawer .wd-codes .nq-row { padding: 5px 0; border-bottom: 1px solid var(--border); }
#drawer .wd-codes .nq-row:last-child { border-bottom: 0; }
#drawer .wd-codes .wd-copy-v { padding: 0; border: 0; background: none; font-size: 13px; color: var(--text); cursor: copy; text-align: left; overflow-wrap: anywhere; }
#drawer .wd-inspect-body { gap: 14px !important; }
#drawer .wd-sec-title { margin-bottom: 6px; }
#drawer .wd-sec-inline { display: flex; align-items: baseline; gap: 10px; }
#drawer .wd-sec-inline .wd-sec-title { margin: 0; }
#drawer .nq-row { grid-template-columns: 170px minmax(0, 1fr) !important; gap: 12px !important; padding: 7px 0; }
#drawer .nq-row dt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#drawer .nq-row:has(> dd > .muted:only-child) { display: none; }
@media (max-width: 480px) {
  #drawer .nq-row { grid-template-columns: 1fr !important; gap: 2px !important; }
}
.wd-quote { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 10px 36px; padding: 12px 14px; border-radius: 10px; background: var(--wd-soft, #f4f7fb); container-type: inline-size; }
.wd-qf { min-width: 0; }
.wd-qf-k { font-size: 12px; color: var(--muted, #64748b); margin-bottom: 2px; }
.wd-qf-v { font-weight: 600; overflow-wrap: anywhere; }
.wd-qf-files .wd-qf-v { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 500; }
.wd-qf-files .wd-qf-v { gap: 2px 8px; }
.wd-qf-files .quote-chip { display: inline-flex; align-items: center; gap: 2px; padding: 0; border: 0 !important; background: none !important; min-width: 0; max-width: calc(100% - 34px); }
.wd-qf-files .quote-chip a { min-width: 0; }
.wd-qf-files .quote-chip a { color: var(--primary); font-weight: 600; gap: 4px; }
.wd-qf-files .quote-chip a svg.i { width: 15px; height: 15px; flex: none; }
.wd-qf-files .quote-chip .nm { max-width: none; min-width: 0; font-weight: 600; }
.wd-qf-files .quote-chip .btn { width: 26px; height: 26px; min-height: 26px !important; padding: 0; color: var(--muted); opacity: .6; }
.wd-qf-files .quote-chip .btn:hover { opacity: 1; color: var(--danger, #b42318); }
.wd-qf-files .quote-chip .btn svg.i { width: 14px; height: 14px; }
/* Bản sao trên Google Drive cạnh file PDF (mở PDF = bản máy chủ) */
.quote-chip a.quote-drive, .wd-qf-files .quote-chip a.quote-drive {
  flex: none; margin-left: 4px; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--muted); font-size: 11px; font-weight: 600; line-height: 18px;
}
.quote-chip a.quote-drive:hover, .wd-qf-files .quote-chip a.quote-drive:hover { color: var(--primary); border-color: var(--primary); }
.wd-qf-add { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 6px; color: var(--primary); font-weight: 600; font-size: 13px; cursor: pointer; }
.wd-qf-add:hover { background: var(--primary-50); }
.wd-qf-add svg.i { width: 15px; height: 15px; }
.wd-qf-add input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.wd-qf-wide { grid-column: 1 / -1; }
.wd-quote:has(> .wd-qf-parts) { display: flex; flex-wrap: wrap; gap: 10px 32px; }
.wd-quote:has(> .wd-qf-parts) > .wd-qf { flex: 0 1 auto; }
.wd-quote:has(> .wd-qf-parts) > .wd-qf-files { flex: 1 1 90px; }
.wd-quote:has(> .wd-qf-parts) > .wd-qf-wide { flex-basis: 100%; }
.wd-parts-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.wd-qf-parts .wd-qf-v { font-weight: 500; }
.wd-qf-parts .badge { font-size: 12px; }
button.wd-qf-add { border: 0; background: none; font-family: inherit; }
.wd-parts-miss { margin-top: 4px; font-weight: 500; }
@media (max-width: 480px) {
  .wd-quote, .wd-quote:has(> .wd-qf-parts) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wd-qf-files { grid-column: 1 / -1; }
}
#drawer .drawer-body { padding-top: 10px; }
#drawer .wd-progress { margin-bottom: 8px; }
#drawer .wd-stepbar { background: transparent !important; border: 0 !important; padding: 8px 0 0 !important; justify-content: flex-start; }
#drawer .wd-stepbar-actions { justify-content: flex-start; max-width: none; }
#drawer .wd-sec-title, #drawer .wd-inspect-body .label { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--muted, #64748b); }
:root.dark #drawer .drawer-body, [data-theme="dark"] #drawer .drawer-body { background: #1e293b; }
#drawer .drawer-head > .wd-tools { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; margin: 0; }
#drawer .drawer-head { align-items: center; }
#drawer:has(.wd-progress .stepper) .drawer-status { display: none !important; }
#drawer .wd-toolbar:not(:has(.wd-chip:not(.is-empty), .tag)) { display: none; }

/* Hướng dẫn sử dụng */
.guide-wrap { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 16px; align-items: start; }
.guide-toc { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 2px; padding: 8px; max-height: calc(100vh - 110px); overflow: auto; }
.guide-toc button { display: flex; align-items: center; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; line-height: 1.35; padding: 8px 10px; border-radius: 8px; cursor: pointer; min-height: 40px; }
.guide-toc button:hover { background: var(--surface-2, #f1f5f9); }
.guide-toc button.on { background: var(--primary-50, #e7f6fc); color: var(--navy, #123a6b); font-weight: 650; }
.guide-search { margin-bottom: 12px; max-width: 420px; }
.guide-secs { display: flex; flex-direction: column; gap: 12px; }
.guide-sec { scroll-margin-top: 12px; }
.guide-sec .card-body > :last-child { margin-bottom: 0; }
.guide-sec p, .guide-sec ul, .guide-sec ol { margin: 0 0 10px; }
.guide-sec ul, .guide-sec ol { padding-left: 1.25rem; }
.guide-sec li + li { margin-top: 4px; }
.guide-sec h4 { font-size: 15px; margin: 14px 0 8px; }
.guide-sec h4:first-child { margin-top: 0; }
.guide-sec .alert { margin: 0 0 10px; }
.guide-sec .table-wrap { margin: 0 0 12px; }
.guide-empty { padding: 28px 16px; text-align: center; color: var(--muted); }
@media (max-width: 820px) {
  .guide-wrap { grid-template-columns: 1fr; }
  .guide-toc { position: static; flex-direction: row; max-height: none; overflow-x: auto; }
  .guide-toc button { width: auto; white-space: nowrap; flex: 0 0 auto; }
}

/* Tồn kho miền Nam (#/inventory) – màu theo tuổi tồn: t0 xanh, t1 vàng, t2 cam, t3 đỏ */
.inv-t0 { --inv-c: #16a34a; --inv-bg: rgba(22, 163, 74, .10); }
.inv-t1 { --inv-c: #d97706; --inv-bg: rgba(217, 119, 6, .12); }
.inv-t2 { --inv-c: #ea580c; --inv-bg: rgba(234, 88, 12, .12); }
.inv-t3 { --inv-c: #dc2626; --inv-bg: rgba(220, 38, 38, .12); }

.inv-sums { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; margin-bottom: 16px; }
.inv-sum { position: relative; overflow: hidden; text-align: left; padding: 16px 18px 14px; cursor: pointer; font: inherit; color: inherit;
  border: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.inv-sum::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #0ea5e9, #6366f1); }
.inv-sum:hover { border-color: #6366f1; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(15, 23, 42, .08); }
.inv-sum.on { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99, 102, 241, .18); }
.inv-sum-top { display: flex; justify-content: space-between; align-items: center; }
.inv-sum-h { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13px; color: #4f46e5; text-transform: uppercase; letter-spacing: .04em; }
.inv-sum-h .i { width: 15px; height: 15px; }
.inv-sum-n { font-size: 12px; font-weight: 600; color: var(--muted); background: var(--surface-2, #f1f5f9); border-radius: 999px; padding: 2px 9px; }
.inv-sum-v { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.inv-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--surface-2, #f1f5f9); margin-top: 4px; }
.inv-bar span { background: var(--inv-c); min-width: 3px; }
.inv-ages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; font-size: 12px; }
.inv-ages span { display: flex; flex-direction: column; background: var(--inv-bg); border-left: 3px solid var(--inv-c); border-radius: 6px; padding: 4px 7px; font-weight: 700; color: var(--inv-c); }
.inv-ages i { font-style: normal; color: var(--muted); font-weight: 500; font-size: 11px; }
.inv-old { display: flex; align-items: center; gap: 5px; color: #c2410c; background: rgba(234, 88, 12, .08); border-radius: 6px; padding: 5px 8px; margin-top: 2px; }
.inv-old.is-ok { color: #15803d; background: rgba(22, 163, 74, .08); }
.inv-old .i { width: 14px; height: 14px; flex: none; }

.inv-toolbar .search-box { flex: 1 1 240px; min-width: 200px; }
.inv-toolbar select.input { width: auto; }
.inv-table td, .inv-table th { vertical-align: top; }
.inv-table { width: 100%; table-layout: auto; }
.inv-table td:nth-child(3) { min-width: 200px; }
.table-wrap:has(> .inv-table) { overflow-x: auto; }
.inv-table .inv-age-h { white-space: nowrap; }
.inv-age-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--inv-bg); color: var(--inv-c); font-weight: 700; }
.inv-c-h { color: #4f46e5; }
.inv-tot-row th { background: #f8fafc; border-bottom: 2px solid var(--border); text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text); padding-top: 8px; padding-bottom: 8px; }
.inv-tot-label { color: #4f46e5 !important; font-weight: 800; }
.inv-tot b { font-size: 14px; font-weight: 800; white-space: nowrap; }
.inv-tot.inv-t0, .inv-tot.inv-t1, .inv-tot.inv-t2, .inv-tot.inv-t3 { background: var(--inv-bg) !important; color: var(--inv-c); box-shadow: inset 0 3px 0 var(--inv-c); }
.inv-tot-sub { font-size: 11px; font-weight: 600; opacity: .8; white-space: nowrap; }
.inv-table td.inv-age b { color: var(--inv-c); }
.inv-table td.inv-age { background: linear-gradient(90deg, transparent 0, var(--inv-bg) 100%); }
.inv-age-v { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.inv-center-tag { display: inline-block; min-width: 30px; text-align: center; font-weight: 700; font-size: 12px; color: #4f46e5; background: rgba(99, 102, 241, .1); border-radius: 6px; padding: 2px 6px; }
.inv-chip { display: inline-block; min-width: 34px; text-align: center; font-weight: 700; color: #0369a1; background: rgba(14, 165, 233, .12); border-radius: 6px; padding: 2px 8px; }
.inv-hint { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 4px; color: var(--text); }
.inv-hint:empty { display: none; }
.inv-hint .i { width: 14px; height: 14px; }
.inv-hint-item { background: rgba(14, 165, 233, .12); border-radius: 6px; padding: 1px 6px; text-decoration: none; color: inherit; }
body.theme-dark .inv-tot-row th { background: #1e293b; }

/* Min-Max: phần tối thiểu phải giữ = tím, thiếu = đỏ */
.inv-tmin { --inv-c: #7c3aed; --inv-bg: rgba(124, 58, 237, .10); }
.inv-bar span.inv-tmin { background: repeating-linear-gradient(135deg, #7c3aed 0 4px, #a78bfa 4px 8px); }
.inv-keep { display: flex; align-items: center; gap: 6px; color: #6d28d9; }
.inv-keep-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; background: repeating-linear-gradient(135deg, #7c3aed 0 3px, #a78bfa 3px 6px); }
.inv-tier { font-size: 12px; font-weight: 600; color: #7c3aed; margin-top: -2px; }
.inv-short { display: flex; align-items: center; gap: 5px; color: #b91c1c; background: rgba(220, 38, 38, .08); border-radius: 6px; padding: 5px 8px; }
.inv-short.is-ok { color: #15803d; background: rgba(22, 163, 74, .08); }
.inv-short .i { width: 14px; height: 14px; flex: none; }
.inv-note { display: flex; align-items: flex-start; gap: 6px; margin: 0 16px 10px; padding: 7px 10px; border-radius: 8px; color: #5b21b6; background: rgba(124, 58, 237, .07); }
.inv-note .i { width: 14px; height: 14px; flex: none; margin-top: 2px; }
.inv-min { display: inline-block; min-width: 28px; text-align: center; font-weight: 700; color: #6d28d9; background: rgba(124, 58, 237, .10); border-radius: 6px; padding: 1px 7px; }
.inv-lack { display: inline-block; min-width: 28px; text-align: center; font-weight: 800; color: #fff; background: #dc2626; border-radius: 6px; padding: 1px 7px; }
.inv-order { display: inline-block; min-width: 28px; text-align: center; font-weight: 800; color: #c2410c; background: rgba(234, 88, 12, .14); border-radius: 6px; padding: 1px 7px; }
.inv-ok { color: #16a34a; }
.inv-ok .i { width: 15px; height: 15px; }
.inv-zero { color: #dc2626; font-weight: 700; }
.inv-from { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: #15803d; background: rgba(22, 163, 74, .10); border-radius: 6px; padding: 1px 7px; margin: 1px 0; }
.inv-from .i { width: 13px; height: 13px; }
.inv-chip.is-lack { color: #b91c1c; background: rgba(220, 38, 38, .12); }
.inv-min-of { font-size: 11.5px; color: #7c3aed; margin-left: 4px; }
.inv-tot.inv-tmin-h { background: rgba(124, 58, 237, .08) !important; color: #6d28d9; box-shadow: inset 0 3px 0 #7c3aed; }
.inv-warn { color: #c2410c; font-weight: 600; }

/* Tra nhiều mã */
.inv-bulk-in { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 14px; align-items: start; }
.inv-bulk-in textarea { min-height: 150px; resize: vertical; font-size: 13px; }
@media (max-width: 700px) { .inv-bulk-in { grid-template-columns: 1fr; } }
.inv-bulk-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 10px; border-radius: 8px; background: var(--surface-2, #f1f5f9); }
.inv-bulk-sum .btn { margin-left: auto; }
.inv-table th.inv-bulk-to, .inv-table td.inv-bulk-to { background: rgba(99, 102, 241, .07); }
.inv-bulk-spare { font-size: 11.5px; font-weight: 700; color: #15803d; }
.inv-bulk-miss td { background: rgba(220, 38, 38, .04); }
#inv-bulk-res .table-wrap { max-height: 55vh; overflow: auto; }

/* Bảng tồn kho cuộn trong khung (chiều cao do fitInvTable đặt), 2 hàng tiêu đề đứng yên */
.table-wrap.inv-scroll, body.theme-dark .table-wrap.inv-scroll { overflow: auto; overscroll-behavior: contain; scrollbar-width: auto; scrollbar-color: auto; }
.table-wrap.inv-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.table-wrap.inv-scroll::-webkit-scrollbar:vertical { width: 0; }
.ds-app #main.content:has(.inv-scroll), .content:has(.inv-scroll) { scrollbar-width: none; scrollbar-gutter: auto; }
.ds-app #main.content:has(.inv-scroll)::-webkit-scrollbar, .content:has(.inv-scroll)::-webkit-scrollbar { width: 0; height: 0; }
.table-wrap.inv-scroll::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .45); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.inv-scroll > .inv-table { border-collapse: separate; border-spacing: 0; }
.inv-scroll thead th { position: sticky; top: 0; z-index: 2; }
.inv-scroll thead tr + tr th { top: var(--inv-h1, 0px); }
.inv-scroll .inv-tot.inv-t0, .inv-scroll .inv-tot.inv-t1, .inv-scroll .inv-tot.inv-t2, .inv-scroll .inv-tot.inv-t3 { background: linear-gradient(var(--inv-bg), var(--inv-bg)), #fff !important; }
.inv-scroll .inv-tot.inv-tmin-h { background: linear-gradient(rgba(124, 58, 237, .08), rgba(124, 58, 237, .08)), #fff !important; }
body.theme-dark .inv-scroll .inv-tot.inv-t0, body.theme-dark .inv-scroll .inv-tot.inv-t1, body.theme-dark .inv-scroll .inv-tot.inv-t2,
body.theme-dark .inv-scroll .inv-tot.inv-t3 { background: linear-gradient(var(--inv-bg), var(--inv-bg)), #1e293b !important; }
body.theme-dark .inv-scroll .inv-tot.inv-tmin-h { background: linear-gradient(rgba(124, 58, 237, .08), rgba(124, 58, 237, .08)), #1e293b !important; }

/* Danh sách tổng quan kiểu Google Sheet: lưới ô, tiêu đề xám, nội dung xuống dòng */
.wo-overview .wo-grid-wrap { border-radius: 4px; background: #fff; }
.wo-overview .wo-grid {
  border-collapse: separate; border-spacing: 0; font-family: Arial, Helvetica, sans-serif;
}
.wo-overview .wo-grid thead th,
.wo-overview .wo-grid td {
  border-right: 1px solid #e2e3e3; border-bottom: 1px solid #e2e3e3;
  padding: 4px 6px; vertical-align: top; font-size: 12px; line-height: 1.35;
  background: #fff; color: #000;
}
.wo-overview .wo-grid thead th {
  position: sticky; top: 0; z-index: 4;
  background: #f8f9fa; font-weight: 700; font-size: 11px; color: #202124;
  white-space: normal; text-align: center; padding: 6px 4px;
}
.wo-overview .wo-grid thead th .th-caret { display: none; }
.wo-overview .wo-grid thead th { padding-right: 10px; }
.wo-overview .wo-grid tbody tr:hover td { background: #e8f0fe; }
.wo-overview .wo-grid .wo-stt-h, .wo-overview .wo-grid .wo-stt-td {
  position: sticky; left: 0; z-index: 5; background: #f8f9fa; text-align: center;
  min-width: 40px; color: #70757a; font-variant-numeric: tabular-nums;
}
.wo-overview .wo-grid thead th.wo-stt-h { z-index: 6; }
.wo-overview .wo-grid td.wo-stt-td { vertical-align: middle; }
/* Cột cố định như Google Sheet: vị trí left đặt bằng JS (freezeCols) */
.wo-overview .wo-grid .wo-frz { position: sticky; z-index: 3; background: #fff; }
.wo-overview .wo-grid thead th.wo-frz { z-index: 6; background: #f8f9fa; }
.wo-overview .wo-grid tbody tr:hover td.wo-frz { background: #e8f0fe; }
.wo-overview .wo-grid tbody td:first-child { font-weight: 600; }
.wo-overview .wo-grid .grid-resize::after { display: none; }
.wo-overview .wo-sheet-wrap { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11.5px; line-height: 1.4; }
.wo-overview .wo-sheet-a { color: #1155cc; text-decoration: underline; word-break: break-all; }
.wo-overview .wo-grid td .muted { color: #9aa0a6; }
.wo-overview .wo-grid td .plate { font-weight: 400; letter-spacing: 0; }
body.theme-dark .wo-overview .wo-grid thead th,
body.theme-dark .wo-overview .wo-grid .wo-stt-h,
body.theme-dark .wo-overview .wo-grid .wo-stt-td { background: #303134; color: #e8eaed; }
body.theme-dark .wo-overview .wo-grid td { background: #202124; color: #e8eaed; border-color: #3c4043; }
body.theme-dark .wo-overview .wo-grid td.wo-frz { background: #202124; }
body.theme-dark .wo-overview .wo-grid thead th.wo-frz { background: #303134; }
body.theme-dark .wo-overview .wo-grid tbody tr:hover td,
body.theme-dark .wo-overview .wo-grid tbody tr:hover td.wo-frz { background: #3c4043; }

/* Tổng quan – gọn: dòng thấp, nhãn trạng thái co theo ô */
.wo-overview .wo-grid td { height: 34px; padding: 3px 6px; vertical-align: middle; }
.wo-overview .wo-grid td .badge { max-width: 100%; height: 20px; padding: 0 6px; font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wo-overview .wo-grid td[data-col="vin"] .mono { font-size: 11px; }
.wo-overview .wo-grid thead th { padding: 6px 8px; line-height: 1.25; vertical-align: middle; text-align: center; }
.wo-overview .wo-grid thead th .th-in { justify-content: center; }
.wo-overview .wo-grid thead th .th-label { text-align: center; }
.wo-overview .wo-grid thead th.sorted .th-label { color: #9fe3ff; }
/* Tổng quan – tô màu: tiêu đề navy→xanh, dòng xen kẽ, màu theo cột (data-col) */
.wo-overview .wo-grid-wrap { border-radius: 10px; box-shadow: 0 1px 2px rgba(18, 58, 107, .06), 0 6px 18px -8px rgba(18, 58, 107, .18); }
/* Thanh cuộn dọc bắt đầu dưới tiêu đề (--wo-hh = chiều cao thead, đo bằng JS); dải cạnh tiêu đề tô cùng màu navy + gạch cyan.
   scrollbar-width/color phải để auto, nếu không Chrome bỏ qua ::-webkit-scrollbar. */
.wo-overview .wo-grid-wrap, body.theme-dark .wo-overview .wo-grid-wrap {
  scrollbar-width: auto; scrollbar-color: auto;
  background-image: linear-gradient(#18a4d8, #18a4d8), linear-gradient(180deg, #164b86 0%, #123a6b 100%);
  background-size: 100% 2px, 100% var(--wo-hh, 0px); background-position: 0 calc(var(--wo-hh, 0px) - 2px), 0 0; background-repeat: no-repeat;
}
.wo-overview .wo-grid-wrap::-webkit-scrollbar { width: 9px; height: 9px; }
.wo-overview .wo-grid-wrap::-webkit-scrollbar-track { background: transparent; }
.wo-overview .wo-grid-wrap::-webkit-scrollbar-track:vertical { margin-top: var(--wo-hh, 0px); }
.wo-overview .wo-grid-wrap::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .45); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.wo-overview .wo-grid-wrap::-webkit-scrollbar-thumb:hover { background-color: rgba(100, 116, 139, .7); }
.wo-overview .wo-grid-wrap::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.wo-overview .wo-grid-wrap::-webkit-scrollbar-corner { background: transparent; }
.wo-overview .wo-grid thead th,
.wo-overview .wo-grid thead th.wo-frz {
  background: linear-gradient(180deg, #164b86 0%, #123a6b 100%); color: #fff;
  border-right-color: rgba(255, 255, 255, .12); border-bottom: 2px solid #18a4d8; letter-spacing: .02em;
}
.wo-overview .wo-grid thead th:hover,
.wo-overview .wo-grid thead th.grouped,
.wo-overview .wo-grid thead th.filtered .th-label { color: #9fe3ff; }
.wo-overview .wo-grid thead th .th-sort, .wo-overview .wo-grid thead th .th-flt { color: #9fe3ff; }
.wo-overview .wo-grid td { border-color: #e6edf6; }
.wo-overview .wo-grid tbody tr:nth-child(even) td { background: #f5f9ff; }
.wo-overview .wo-grid tbody tr:hover td,
.wo-overview .wo-grid tbody tr:hover td.wo-frz { background: #e3f4fc; }
.wo-overview .wo-grid tbody tr:hover td:first-child { box-shadow: inset 3px 0 0 #18a4d8; }
.wo-overview .wo-grid td[data-col="code"] { color: #123a6b; font-weight: 700; }
.wo-overview .wo-grid td[data-col="vin"] .mono { color: #475569; }
.wo-overview .wo-grid td[data-col="model"] { color: #0e7490; font-weight: 600; }
.wo-overview .wo-grid td[data-col="plate"] .plate {
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  color: #9a5b00; font-size: 12px; font-weight: 600; white-space: nowrap;
}
.wo-overview .wo-grid td:is([data-col="received"], [data-col="removed_at"], [data-col="factory_at"], [data-col="repair_at"], [data-col="handover"]) { color: #475569; font-variant-numeric: tabular-nums; }
.wo-overview .wo-grid td[data-col="sla_due"] { color: #b45309; font-weight: 600; font-variant-numeric: tabular-nums; }
.wo-overview .wo-grid td[data-col="quote"] { color: #047857; font-weight: 700; }
.wo-overview .wo-grid td[data-col="tech"] { color: #6d28d9; font-weight: 600; }
.wo-overview .wo-grid td:is([data-col="bh_code"], [data-col="claim"], [data-col="ro"]) .mono { color: #1d4ed8; }
.wo-overview .wo-grid td[data-col="missing"] { color: #c2410c; }
.wo-overview .wo-grid td:is([data-col="foreman_note"], [data-col="advisor_note"]) .t-sub { color: #334155; font-style: italic; }
body.theme-dark .wo-overview .wo-grid thead th,
body.theme-dark .wo-overview .wo-grid thead th.wo-frz { background: linear-gradient(180deg, #16406f 0%, #0f2a4d 100%); color: #e8f4ff; }
body.theme-dark .wo-overview .wo-grid tbody tr:nth-child(even) td { background: #1b2433; }
body.theme-dark .wo-overview .wo-grid tbody tr:hover td,
body.theme-dark .wo-overview .wo-grid tbody tr:hover td.wo-frz { background: #173247; }
body.theme-dark .wo-overview .wo-grid td[data-col="code"] { color: #7cc4ff; }
body.theme-dark .wo-overview .wo-grid td[data-col="model"] { color: #5eead4; }
body.theme-dark .wo-overview .wo-grid td[data-col="plate"] .plate { background: none; color: #fcd58a; }
body.theme-dark .wo-overview .wo-grid td[data-col="quote"] { color: #6ee7b7; }
body.theme-dark .wo-overview .wo-grid td[data-col="tech"] { color: #c4b5fd; }
body.theme-dark .wo-overview .wo-grid td[data-col="sla_due"] { color: #fbbf24; }
body.theme-dark .wo-overview .wo-grid td:is([data-col="bh_code"], [data-col="claim"], [data-col="ro"]) .mono { color: #93c5fd; }
body.theme-dark .wo-overview .wo-grid td:is([data-col="foreman_note"], [data-col="advisor_note"]) .t-sub { color: #cbd5e1; }

/* ---------- Màn hình đăng nhập (login-v2): nền navy + dải chữ S bạc ở đáy (ảnh /img/login-ribbon.png làm khuôn),
   bố cục kiểu ATT DealerOS: chữ bên trái, thẻ trắng bên phải ---------- */
/* --rh = chiều cao dải chữ S; dải ngang trong ảnh dày đúng 20% chiều cao ảnh */
.login-v2 {
  grid-template-columns: minmax(0, 1fr) minmax(420px, 1fr); position: relative; overflow: hidden;
  --rh: clamp(170px, 30vh, 280px); --rb: 4vh;
  background:
    radial-gradient(900px 480px at 10% -10%, rgba(24, 164, 216, .22), transparent 60%),
    radial-gradient(800px 560px at 100% 20%, rgba(56, 120, 220, .18), transparent 65%),
    linear-gradient(160deg, #0f2f5a 0%, #143e72 55%, #164b86 100%);
}
.login-v2::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 75%); mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .35) 75%);
}
.login-v2 .login-art {
  background: transparent !important; justify-content: center; align-items: flex-end;
  padding: 40px 40px calc(var(--rb) + var(--rh) + 16px) 56px;
}
.login-v2 .login-art::before, .login-v2 .login-art::after { display: none; }
.login-v2 .la-hero { position: relative; z-index: 2; width: 100%; max-width: 540px; }
.login-v2 .la-brand { margin-bottom: 16px; }
.login-v2 .la-name { font-family: var(--font-display); font-weight: 700; font-size: 23px; letter-spacing: .01em; color: #fff; }
.login-v2 .la-hl { color: #5fd0ff; }
.login-v2 .login-art h1 {
  margin: 0; max-width: none; color: #fff; font-size: clamp(30px, 3.1vw, 46px); line-height: 1.18; font-weight: 700; letter-spacing: -.02em;
}
.login-v2 .la-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin-top: 18px; color: #c8d8ea; font-size: 16px; }
.login-v2 .la-dots span:not(:last-child)::after { content: "•"; margin: 0 10px; color: #7f9cbc; }
/* Nhãn viên thuốc + tiêu đề chữ chuyển màu + 3 vạch nhấn (cảm hứng từ cổng Aftersales VinFast) */
.login-v2 .la-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 16px 7px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .35); backdrop-filter: blur(6px);
}
.login-v2 .la-pill i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #5ad1fa; }
.login-v2 .la-pill .la-name { font-size: 16px; font-weight: 800; letter-spacing: .08em; }
.login-v2 .la-pill-t { color: rgba(255, 255, 255, .92); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.login-v2 .login-art h1 {
  background: linear-gradient(90deg, #5ad1fa 0%, #bdeeff 40%, #ffffff 70%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  .login-v2 .la-pill i { animation: la-ping 1.8s ease-out infinite; }
  @keyframes la-ping { 0% { box-shadow: 0 0 0 0 rgba(90, 209, 250, .7); } 100% { box-shadow: 0 0 0 9px rgba(90, 209, 250, 0); } }
  .login-v2 .login-form { animation: la-fade-up .7s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes la-fade-up { from { opacity: 0; transform: translateY(16px); } }
}
.login-v2 .la-bars { display: flex; gap: 8px; margin-top: 24px; }
.login-v2 .la-bars i { height: 3px; border-radius: 2px; background: #38bdf8; }
.login-v2 .la-bars i:nth-child(1) { width: 48px; }
.login-v2 .la-bars i:nth-child(2) { width: 26px; opacity: .7; }
.login-v2 .la-bars i:nth-child(3) { width: 10px; opacity: .45; }
/* Bong bóng kính trôi nhẹ, mỗi bong bóng ghi 1 mảng của app */
.login-v2 .la-bubbles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.login-v2 .la-bubble {
  position: absolute; display: grid; place-items: center; padding: 6px; border-radius: 50%; text-align: center;
  color: #fff; font-size: 10.5px; font-weight: 700; line-height: 1.15; text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .45);
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .95) 0, rgba(255, 255, 255, .55) 5%, rgba(255, 255, 255, 0) 17%),
    radial-gradient(circle at 72% 80%, rgba(255, 255, 255, .35) 0, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .04) 55%, rgba(90, 209, 250, .16) 100%);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, .28), inset -8px -10px 18px rgba(90, 209, 250, .18), 0 10px 24px -8px rgba(2, 14, 40, .45);
  backdrop-filter: blur(1.5px) brightness(1.12); -webkit-backdrop-filter: blur(1.5px) brightness(1.12);
}
.login-v2 .la-bubble::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 9%; height: 22%; border-radius: 50%;
  border-bottom: 2px solid rgba(255, 255, 255, .35); filter: blur(.5px); }
.login-v2 .la-bubble[data-k]::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; opacity: 0;
  border: 2px solid rgba(143, 224, 255, .85); box-shadow: 0 0 12px rgba(90, 209, 250, .6); }
.login-v2 .la-bubble b { position: relative; z-index: 1; max-width: 80%; font-size: 12px; font-weight: 800; line-height: 1.2; letter-spacing: .2px;
  color: rgba(255, 255, 255, .96); text-shadow: 0 0 8px rgba(90, 209, 250, .85), 0 1px 2px rgba(2, 14, 40, .5); }
.login-v2 .la-bubble-sm { padding: 0; }
@media (prefers-reduced-motion: no-preference) {
  .login-v2 .la-bubble-sm { animation: la-drift 9s ease-in-out infinite; }
  @keyframes la-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(6px, -14px) scale(1.02); }
    50% { transform: translate(-4px, -24px) scale(.99); } 75% { transform: translate(-8px, -10px) scale(1.01); } }
}
.login-v2 .la-foot {
  position: absolute; z-index: 2; left: 56px; bottom: max(8px, calc(var(--rb) / 2 - 8px)); font-size: 12px; color: #8fb0d3;
}
/* Xe máy điện chạy trên mặt dải ngang (bánh chạm mép trên dải), tới chỗ chữ S cong lên thì mờ dần rồi chạy lại */
/* Người lái xe máy điện (ảnh /img/login-rider.png, nền trong suốt) chạy trên mặt dải ngang; tới gần chữ S thì mờ dần rồi chạy lại */
.login-v2 .la-scooter {
  --sw: clamp(120px, 11vw, 160px);
  position: absolute; z-index: 2; left: 0; bottom: calc(var(--rb) + var(--rh) * .2 - 1px); width: var(--sw); height: auto; aspect-ratio: 320 / 295; pointer-events: none;
  transform: translateX(8vw); filter: drop-shadow(0 8px 8px rgba(0, 0, 0, .28));
}
.login-v2 .la-scooter img { display: block; width: 100%; height: 100%; }
/* Bánh quay: khung theo % của ảnh 320x295, khuôn che chỉ hở phần bánh trong ảnh gốc */
.login-v2 .sc-w { position: absolute; }
.login-v2 .sc-w svg { display: block; width: 100%; height: 100%; }
.login-v2 .sc-w .sc-spin { transform-box: view-box; }
.login-v2 .sc-wr { left: 2.8125%; top: 71.525%; width: 26.25%; height: 28.475%;
  -webkit-mask: url(/img/login-rider-wr.png?v=3) 0 0 / 100% 100% no-repeat; mask: url(/img/login-rider-wr.png?v=3) 0 0 / 100% 100% no-repeat; }
.login-v2 .sc-wf { left: 73.75%; top: 71.864%; width: 25.9375%; height: 28.136%;
  -webkit-mask: url(/img/login-rider-wf.png?v=3) 0 0 / 100% 100% no-repeat; mask: url(/img/login-rider-wf.png?v=3) 0 0 / 100% 100% no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .login-v2 .la-scooter { animation: la-ride 14s linear infinite; }
  .login-v2 .la-scooter img { animation: la-bob .5s ease-in-out infinite alternate; }
  .login-v2 .sc-w .sc-spin { animation: la-spin 1.1s linear infinite; }
  @keyframes la-spin { to { transform: rotate(360deg); } }
  @keyframes la-ride {
    0% { transform: translateX(calc(var(--sw) * -1.2)); opacity: 0; }
    4% { opacity: 1; }
    86% { opacity: 1; }
    94%, 100% { transform: translateX(calc(100vw - var(--rh) * 2.9257 * .22 - var(--sw))); opacity: 0; }
  }
  @keyframes la-bob { to { transform: translateY(-1px); } }
}
/* Dải chữ S ở đáy, chạy hết bề ngang: ảnh giữ đúng tỉ lệ ở góc phải + thanh kéo dài sang trái (cùng độ dày 20%) */
.login-v2 .la-ribbon {
  position: absolute; left: 0; right: 0; bottom: var(--rb); height: var(--rh); z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, #143e72 0%, rgba(20, 62, 114, .6) 22%, rgba(20, 62, 114, 0) 48%),
    linear-gradient(180deg, #f1f4f7 0%, #c9d1da 45%, #8e9aa7 100%);
  -webkit-mask:
    url(/img/login-ribbon.png) right bottom / auto 100% no-repeat,
    url(/img/login-ribbon-band.png) left bottom / calc(100% - var(--rh) * 2.9257 * .6) 100% no-repeat;
  mask:
    url(/img/login-ribbon.png) right bottom / auto 100% no-repeat,
    url(/img/login-ribbon-band.png) left bottom / calc(100% - var(--rh) * 2.9257 * .6) 100% no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .login-v2 .la-ribbon { animation: la-ribbon-in .9s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes la-ribbon-in { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
}
.login-v2 .login-form-wrap {
  position: relative; background: transparent !important; justify-items: start; align-content: center;
  padding: 40px 56px calc(var(--rb) + var(--rh) + 16px) clamp(40px, 6vw, 100px);
}
.login-v2 .lf-ribbon { display: none; }
/* Thẻ đăng nhập trắng, gọn như DealerOS */
/* Thẻ đăng nhập kiểu cổng Aftersales VinFast: kính mờ, vạch 2 màu mép trên, logo giữa có quầng sáng,
   tiêu đề xanh, ô nhập có icon, nút nổi trắng chữ xanh */
.login-v2 .login-form {
  position: relative; top: min(1vh, 8px); z-index: 3; width: 100%; max-width: 445px; gap: 20px; padding: 44px 40px 30px; border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, #ffffff 0%, #f5f8ff 55%, #e2ebfd 100%);
  border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 30px 70px -25px rgba(4, 18, 52, .7);
}
.login-v2 .login-form::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: linear-gradient(90deg, #1464f4, #3b8bff 50%, #5ad1fa 50%, #8fe0ff) 0 0 / 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .login-v2 .login-form::before { animation: la-bar 6s linear infinite; }
  @keyframes la-bar { from { background-position: 0 0; } to { background-position: -200% 0; } }
}
.login-v2 .lf-brand { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 2px 0 0; }
.login-v2 .lf-brand::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 260px; height: 90px; transform: translate(-50%, -50%); z-index: -1;
  background: radial-gradient(closest-side, rgba(90, 170, 250, .22), rgba(90, 170, 250, 0));
}
.login-v2 .lf-brand .brand-logo { width: 46px; height: 46px; border-radius: 11px; }
.login-v2 .lf-word {
  font-family: var(--font-display); font-size: 24px; font-weight: 800; letter-spacing: .04em; white-space: nowrap;
  background: linear-gradient(180deg, #9aa5b1 0%, #374151 55%, #6b7280 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-v2 .lf-head { text-align: center; margin-bottom: 6px; }
.login-v2 .lf-greet { font-size: 14.5px; color: #5b6b85; }
.login-v2 .login-form .lf-title { margin: 6px 0 0; font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: #1464f4; }
.login-v2 .login-form .input {
  height: 50px; border-radius: 12px; border: 1px solid #d7e1ee; background: #fff; font-size: 15px; padding-left: 46px;
  box-shadow: 0 1px 2px rgba(15, 42, 77, .04);
}
.login-v2 .login-form .input::placeholder { color: #94a3b8; }
.login-v2 .login-form .input:focus { border-color: #1a73e8; box-shadow: 0 0 0 3px rgba(26, 115, 232, .15); }
.login-v2 .lf-input { position: relative; }
.login-v2 .lf-input .lf-ic { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); display: grid; color: #94a3b8; pointer-events: none; }
.login-v2 .lf-input .lf-ic svg.i { width: 18px; height: 18px; }
.login-v2 .lf-input:focus-within .lf-ic { color: #1a73e8; }
.login-v2 .lf-input .input#lg-pass { padding-right: 46px; }
.login-v2 .lf-eye {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 8px;
  background: transparent; color: #4b5563; display: grid; place-items: center; cursor: pointer;
}
.login-v2 .lf-eye:hover { background: #f3f4f6; }
.login-v2 .lf-eye:focus-visible { outline: 2px solid #1a73e8; outline-offset: 1px; }
.login-v2 .lf-eye svg.i { width: 18px; height: 18px; }
.login-v2 .lf-hint { margin-top: -6px; text-align: right; }
.login-v2 .lf-forgot { border: 0; background: none; padding: 2px 0; font: inherit; font-size: 13.5px; font-weight: 600; color: #1464f4; cursor: pointer; }
.login-v2 .lf-forgot:hover { text-decoration: underline; }
.login-v2 .lf-forgot:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; border-radius: 4px; }
/* Nút nổi trắng (Đăng nhập chữ xanh, Tải ứng dụng chữ đen) */
.login-v2 .lf-submit, .login-v2 .lf-app {
  position: relative; overflow: hidden;
  width: 100%; height: 50px; border-radius: 8px; border: 1px solid #e6ecf5; gap: 8px; font-size: 15.5px; font-weight: 700;
  background: linear-gradient(180deg, #ffffff 0%, #f1f6ff 100%); box-shadow: 0 6px 14px -6px rgba(15, 35, 80, .28);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
/* vệt sáng lướt qua khi rê chuột */
.login-v2 .lf-submit::after, .login-v2 .lf-app::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 50%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0)); transform: skewX(-20deg);
  transition: left .6s ease;
}
.login-v2 .lf-submit:hover::after, .login-v2 .lf-app:hover::after { left: 120%; }
.login-v2 .lf-submit { color: #1464f4; letter-spacing: .2px; }
.login-v2 .lf-app { color: #1f2937; font-weight: 600; }
.login-v2 .lf-submit:hover, .login-v2 .lf-app:hover { border-color: #bcd3f2; box-shadow: 0 10px 22px -10px rgba(26, 111, 224, .45); }
.login-v2 .lf-submit:active, .login-v2 .lf-app:active { transform: translateY(1px); }
.login-v2 .lf-app svg.i { width: 17px; height: 17px; }
.login-v2 .lf-or { display: flex; align-items: center; gap: 12px; margin: -2px 0; color: #5b6b85; font-size: 13.5px; }
.login-v2 .lf-or::before, .login-v2 .lf-or::after { content: ""; flex: 1; height: 1px; background: #dbe3ee; }
.login-v2 .lf-power { margin-top: 2px; text-align: center; font-size: 13px; color: #5b6b85; }
/* Máy tính: nút Tải ứng dụng ở góc trên trái màn hình (kính mờ), bỏ khỏi thẻ; điện thoại: giữ trong thẻ */
.login-v2 .la-app-top {
  position: absolute; z-index: 4; top: 22px; left: 28px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px 0 14px;
  border-radius: 999px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #fff; font-size: 14px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45);
  transition: background .15s, border-color .15s;
}
.login-v2 .la-app-top:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .55); }
.login-v2 .la-app-top:focus-visible { outline: 2px solid #5ad1fa; outline-offset: 2px; }
.login-v2 .la-app-top svg.i { width: 17px; height: 17px; }
@media (min-width: 901px) {
  .login-v2 .lf-or, .login-v2 .lf-app { display: none; }
}
/* Chọn ngôn ngữ (góc trên phải, kính mờ như nút chọn quốc gia của VinFast) */
.login-v2 .la-lang { position: absolute; z-index: 6; top: 22px; right: 28px; }
.login-v2 .la-flag { width: 24px; height: 16px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); }
.login-v2 .la-lang-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px 0 16px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .45);
  color: #fff; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s, border-color .15s;
}
.login-v2 .la-lang-btn span { min-width: 82px; text-align: left; }
.login-v2 .la-lang-btn:hover { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .55); }
.login-v2 .la-lang-btn:focus-visible { outline: 2px solid #5ad1fa; outline-offset: 2px; }
.login-v2 .la-lang-btn svg.i { width: 18px; height: 18px; margin-left: 4px; transition: transform .2s; }
.login-v2 .la-lang-btn[aria-expanded="true"] svg.i { transform: rotate(180deg); }
.login-v2 .la-lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 100%; padding: 6px; border-radius: 14px;
  background: rgba(255, 255, 255, .97); box-shadow: 0 18px 40px -12px rgba(2, 14, 40, .5); border: 1px solid rgba(255, 255, 255, .8);
}
.login-v2 .la-lang-menu[hidden] { display: none; }
.login-v2 .la-lang-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px; border: 0; border-radius: 9px;
  background: transparent; color: #1f2a44; font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.login-v2 .la-lang-menu button span { flex: 1; text-align: left; }
.login-v2 .la-lang-menu button:hover { background: #eef4ff; }
.login-v2 .la-lang-menu button.on { color: #1464f4; }
.login-v2 .la-lang-menu button svg.i { width: 16px; height: 16px; color: #1464f4; }
.login-v2 .la-lang-menu button:focus-visible { outline: 2px solid #1464f4; outline-offset: -2px; }
.login-v2 .lf-power b { color: #475569; font-weight: 600; }
body.theme-dark .login-v2 .login-form { background: #111c2e; }
body.theme-dark .login-v2 .lf-word { background: linear-gradient(180deg, #e2e8f0, #94a3b8); -webkit-background-clip: text; background-clip: text; }
body.theme-dark .login-v2 .login-form .input, body.theme-dark .login-v2 .lf-submit, body.theme-dark .login-v2 .lf-app { background: #0f172a; border-color: #2b3b55; color: #e8f1fb; }
body.theme-dark .login-v2 .lf-submit { color: #7cc4ff; }
@media (max-height: 820px) and (min-width: 901px) {
  .login-v2 { --rh: clamp(140px, 24vh, 220px); --rb: 3vh; }
  .login-v2 .login-form { top: 0; gap: 12px; padding: 24px 28px 16px; }
}
/* Điện thoại: tiêu đề ở trên, thẻ đăng nhập ở giữa, chân trang ở dưới (không có dải chữ S / xe) */
@media (max-width: 900px) {
  /* chữ S bạc nằm dưới thẻ, ngay trên dòng chân trang */
  .login-v2 { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; align-content: start; --rh: clamp(90px, 28vw, 130px); --rb: 46px; }
  .login-v2 .la-pill-t { font-size: 11px; letter-spacing: .04em; white-space: normal; }
  .login-v2 .lf-brand .brand-logo { width: 38px; height: 38px; }
  .login-v2 .lf-word { font-size: 20px; }
  .login-v2 .la-scooter, .login-v2 .lf-ribbon, .login-v2 .la-bubbles, .login-v2 .la-bars, .login-v2 .lf-title,
  .login-v2 .la-app-top { display: none; }
  .login-v2 > .la-ribbon { animation: none; }
  .login-v2 .login-art {
    display: flex; justify-content: flex-start; align-items: stretch;
    padding: max(28px, calc(env(safe-area-inset-top, 0px) + 16px)) 22px 4px;
  }
  .login-v2 .la-hero { max-width: 420px; margin: 0 auto; }
  .login-v2 .la-brand { margin-bottom: 10px; }
  .login-v2 .la-name { font-size: 19px; }
  .login-v2 .login-art h1 { font-size: clamp(22px, 6.4vw, 28px); line-height: 1.22; }
  .login-v2 .la-dots { margin-top: 10px; font-size: 12.5px; }
  .login-v2 .la-dots span:not(:last-child)::after { margin: 0 5px; }
  .login-v2 .login-form-wrap { justify-items: center; align-content: start; padding: 18px 16px calc(var(--rh) + 6px); }
  .login-v2 .login-form { max-width: 420px; top: 0; padding: 24px 20px 16px; gap: 14px; }
  .login-v2 .la-foot {
    position: static; text-align: center; padding: 10px 16px max(16px, env(safe-area-inset-bottom, 0px));
  }
  .login-v2 .la-lang { top: max(12px, env(safe-area-inset-top, 0px)); right: 12px; }
  .login-v2 .la-lang-btn { height: 36px; gap: 8px; padding: 0 10px 0 12px; font-size: 13px; }
  .login-v2 .la-lang-btn span { min-width: 0; }
  .login-v2 .la-flag { width: 20px; height: 13px; }
  .login-v2 .login-art { padding-top: calc(max(12px, env(safe-area-inset-top, 0px)) + 52px); }
  .login-v2 .login-form { gap: 14px; padding: 26px 20px 18px; }
}
@media (max-width: 360px) {
  .login-v2 .lf-app { padding: 0 10px; font-size: 13px; }
}

/* ---------- Thanh tiến trình chi tiết phiếu (kiểu chấm viền: xong xanh lá, hiện tại xanh dương, chưa tới xám) ---------- */
.wd-progress .stepper { padding: 10px 0 6px !important; }
.wd-progress .stepper .step::before { top: 15px; height: 3px; border-radius: 3px; background: #dfe3e8; animation: none !important; }
.wd-progress .stepper .step.done::before { background: #22a06b; }
.wd-progress .stepper .step.current::before { background: linear-gradient(90deg, #22a06b, #1d9bd1); }
.wd-progress .stepper .dot { width: 30px; height: 30px; margin-bottom: 8px; border: 2px solid #d4d9df; background: #f3f5f7; color: transparent; font-size: 0; box-shadow: 0 0 0 3px #fff; animation: none !important; }
.wd-progress .stepper .step.done .dot { border-color: #22a06b; background: #f0fbf5; color: #22a06b; box-shadow: 0 0 0 3px #fff; }
.wd-progress .stepper .dot svg.i { width: 14px; height: 14px; stroke-width: 2.4; }
.wd-progress .stepper .step.current .dot { border-color: #1d9bd1; background: #e3f4fc; box-shadow: 0 0 0 3px #fff; overflow: visible; }
/* Bước hiện tại: 2 vòng sóng tỏa ra (chỉ viền mảnh – không che chữ / đường nối) */
.wd-progress .stepper .step.current .dot::before, .wd-progress .stepper .step.current .dot::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid #1d9bd1; pointer-events: none;
  animation: wd-dot-ripple 2s cubic-bezier(.2, .6, .35, 1) infinite;
}
.wd-progress .stepper .step.current .dot::after { animation-delay: 1s; }
@keyframes wd-dot-ripple { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.35); opacity: 0; } }
/* Chấm sáng chạy trên đoạn đường dẫn vào bước hiện tại */
.wd-progress .stepper .step.current::after {
  content: ""; position: absolute; top: 12px; left: -50%; width: 9px; height: 9px; border-radius: 50%; z-index: 0;
  background: #1d9bd1; box-shadow: 0 0 0 3px rgba(29, 155, 209, .22), 0 0 8px rgba(29, 155, 209, .55);
  animation: wd-step-run 2.4s ease-in-out infinite;
}
.wd-progress .stepper .step.current:first-child::after { display: none; }
@keyframes wd-step-run { 0% { left: -50%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(50% - 26px); opacity: 0; } }
.wd-progress .stepper .step-label { color: #6b7280; font-weight: 600; font-size: 12.5px; }
.wd-progress .stepper .step.done .step-label { color: #15803d; font-weight: 700; }
.wd-progress .stepper .step.current .step-label { color: #0e88c2; font-weight: 700; }
.wd-progress .stepper .step .t.by { color: #94a3b8 !important; font-weight: 500; font-size: 11px; }
@media (max-width: 640px) {
  .wd-progress .stepper .step-label { white-space: normal; text-overflow: clip; font-size: 11px; line-height: 1.2; overflow-wrap: normal; word-break: normal; }
  .wd-progress .stepper .dot { width: 26px; height: 26px; }
  .wd-progress .stepper .step::before { top: 13px; }
  .wd-progress .stepper .step.current::after { top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .wd-progress .stepper .step.current::after { animation: none; left: calc(50% - 26px); }
  .wd-progress .stepper .step.current .dot::before, .wd-progress .stepper .step.current .dot::after { display: none; }
}
body.theme-dark .wd-progress .stepper .step.current .dot::before, body.theme-dark .wd-progress .stepper .step.current .dot::after { border-color: #38bdf8; }
body.theme-dark .wd-progress .stepper .step::before { background: #334155; }
body.theme-dark .wd-progress .stepper .step.done::before { background: #22c55e; }
body.theme-dark .wd-progress .stepper .step.current::before { background: linear-gradient(90deg, #22c55e, #38bdf8); }
body.theme-dark .wd-progress .stepper .dot { border-color: #475569; background: #1e293b; box-shadow: 0 0 0 3px var(--surface); }
body.theme-dark .wd-progress .stepper .step.done .dot { border-color: #22c55e; background: rgba(34, 197, 94, .12); color: #4ade80; }
body.theme-dark .wd-progress .stepper .step.current .dot { border-color: #38bdf8; background: rgba(56, 189, 248, .15); }
body.theme-dark .wd-progress .stepper .step-label { color: #94a3b8; }
body.theme-dark .wd-progress .stepper .step.done .step-label { color: #4ade80; }
body.theme-dark .wd-progress .stepper .step.current .step-label { color: #7dd3fc; }
/* ---------- Sơ đồ xưởng 3D (#/workshop-map) ---------- */
.wsm { position: relative; height: calc(100dvh - 78px - 40px); min-height: 460px; border-radius: 14px; overflow: hidden; background: #E4E8E3; border: 1px solid var(--border); }
body.theme-dark .wsm { background: #0f172a; }
.wsm-c { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.wsm-panel { background: rgba(255, 255, 255, .93); border: 1px solid rgba(23, 32, 26, .12); border-radius: 12px; box-shadow: 0 6px 24px rgba(20, 30, 24, .12); backdrop-filter: blur(8px); color: #17201A; }
body.theme-dark .wsm-panel { background: rgba(15, 23, 42, .92); border-color: rgba(255, 255, 255, .12); color: #e2e8f0; }
.wsm-title { position: absolute; top: 12px; left: 12px; padding: 12px 14px; width: 420px; max-width: calc(100% - 24px); display: grid; gap: 8px; }
.wsm-eyebrow { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #58645C; font-weight: 700; }
body.theme-dark .wsm-eyebrow { color: #94a3b8; }
.wsm-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: #58645C; }
.wsm-stats b { color: inherit; font-weight: 700; font-variant-numeric: tabular-nums; }
body.theme-dark .wsm-stats { color: #cbd5e1; }
.wsm-late, .wsm-late b { color: #d63b3b !important; }
.wsm-search { display: flex; gap: 6px; }
.wsm-search .input { flex: 1; min-width: 0; }
.wsm-search .btn { flex: none; gap: 4px; }
.wsm-search .btn svg { width: 14px; height: 14px; }
.wsm-nf { padding: 8px 12px; border-radius: 8px; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 13px; line-height: 1.5; word-break: break-word; }
body.theme-dark .wsm-nf { background: rgba(185, 28, 28, .15); border-color: rgba(248, 113, 113, .35); color: #fca5a5; }
.wsm-legend { position: absolute; top: 12px; right: 12px; width: 270px; max-width: calc(100% - 24px); max-height: calc(100% - 80px); overflow: auto; }
.wsm-legend summary { list-style: none; cursor: pointer; padding: 11px 14px; display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 14px; }
.wsm-legend summary::-webkit-details-marker { display: none; }
.wsm-legend .wsm-car { font-size: 12px; opacity: .6; transition: transform .2s; }
.wsm-legend[open] .wsm-car { transform: rotate(180deg); }
.wsm-lg { padding: 0 14px 14px; display: grid; gap: 6px; font-size: 12.5px; }
.wsm-sec { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; font-weight: 700; margin-top: 4px; }
.wsm-key { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
.wsm-key span, .wsm-row { display: flex; align-items: center; gap: 8px; }
.wsm-key i, .wsm-row i { width: 12px; height: 12px; border-radius: 3px; flex: none; border: 1px solid rgba(0, 0, 0, .2); }
.wsm-row span { flex: 1; }
.wsm-row b { font-variant-numeric: tabular-nums; }
.wsm-ov summary { cursor: pointer; font-weight: 700; color: #d63b3b; padding: 6px 0; }
.wsm-ov-list { display: grid; gap: 2px; max-height: 220px; overflow: auto; }
.wsm-ov-list a { display: flex; justify-content: space-between; gap: 8px; padding: 4px 6px; border-radius: 6px; color: inherit; text-decoration: none; font-size: 12px; }
.wsm-ov-list a:hover { background: rgba(0, 0, 0, .05); }
.wsm-ov-list a span { opacity: .7; }
.wsm-hint { font-size: 11.5px; opacity: .7; line-height: 1.45; border-top: 1px solid rgba(0, 0, 0, .1); padding-top: 8px; margin-top: 4px; }
.wsm-views { position: absolute; left: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 24px); }
.wsm-views button { font: 600 13px/1 inherit; color: #17201A; background: rgba(255, 255, 255, .93); border: 1px solid rgba(23, 32, 26, .12); border-radius: 999px; padding: 9px 13px; cursor: pointer; box-shadow: 0 4px 14px rgba(20, 30, 24, .12); }
.wsm-views button[aria-pressed="true"] { background: #123a6b; color: #fff; border-color: transparent; }
body.theme-dark .wsm-views button { background: rgba(15, 23, 42, .92); color: #e2e8f0; border-color: rgba(255, 255, 255, .12); }
body.theme-dark .wsm-views button[aria-pressed="true"] { background: #18a4d8; color: #04111c; }
.wsm-tip { position: absolute; pointer-events: none; padding: 10px 12px; min-width: 170px; max-width: 260px; font-size: 12.5px; line-height: 1.45; z-index: 5; }
.wsm-tip .n { font-weight: 700; font-size: 13.5px; margin-bottom: 3px; }
.wsm-tip .ref { font-size: 11.5px; opacity: .65; font-weight: 500; }
.wsm-tip .st { display: inline-flex; align-items: center; gap: 6px; margin: 2px 0; }
.wsm-tip .st i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.wsm-pl { display: grid; gap: 4px; padding: 10px 12px; margin-bottom: 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13.5px; }
.wsm-pl .muted { font-size: 12px; }
.wsm-loading { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 600; color: #58645C; }
@media (max-width: 700px) {
  .wsm { height: calc(100dvh - 140px); border-radius: 10px; }
  .wsm-title { padding: 10px 12px; }
  .wsm-legend { top: auto; bottom: 58px; left: 12px; right: 12px; width: auto; max-height: 50%; }
  .wsm-views button { padding: 8px 10px; font-size: 12px; }
}

/* ---------- Menu trái: icon + mục đang mở sáng rõ ---------- */
.nav a svg.i { width: 19px; height: 19px; stroke-width: 1.75; opacity: .78; transition: opacity .15s, color .15s; }
.nav a:hover svg.i { opacity: 1; }
.nav a.active, .nav a.active:hover {
  position: relative;
  background: linear-gradient(90deg, #18a4d8 0%, #1d6fd8 100%) !important;
  color: #fff !important; font-weight: 650;
  box-shadow: 0 8px 20px -8px rgba(24, 164, 216, .85), inset 0 1px 0 rgba(255, 255, 255, .22) !important;
}
.nav a.active svg.i { opacity: 1; stroke-width: 2.1; }
.nav a.active::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0;
  background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .9);
}

/* ---------- iPhone: tai thỏ / thanh Home + nút đủ to cho ngón tay ---------- */
/* App cài trên iPhone: chiều cao báo lúc mở app thấp hơn màn hình thật → khung app cao 100% theo màn hình (không dùng
   position:fixed – tạo tầng xếp chồng riêng, lớp tối khi mở menu đè lên cả menu). Nền gốc = màu nền trang / navy khi mở menu
   để phần đáy màn hình app không phủ tới không thành dải trắng */
html.pwa-ios, html.pwa-ios body, html.pwa-ios #app { height: 100% !important; background-color: var(--bg) !important; }
/* Như ATT DealerOS: ghim html/body kín màn hình, chỉ vùng nội dung cuộn (hết kéo nảy cả trang / lệch chiều cao) */
html.pwa-ios, html.pwa-ios body { position: fixed; inset: 0; overflow: hidden !important; overscroll-behavior: none; }
/* iPhone/iPad: font hệ thống (SF Pro) cho giống app native – đủ dấu tiếng Việt, không phải tải font */
html.is-ios {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
}
/* iPhone tự phóng to cả trang khi bấm vào ô chữ nhỏ hơn 16px */
html.is-ios input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), html.is-ios select, html.is-ios textarea { font-size: 16px !important; }
html.pwa-ios:has(> body.nav-open), html.pwa-ios:has(> body.nav-open) body, html.pwa-ios:has(> body.nav-open) #app { background-color: #0b2748 !important; }
html.pwa-ios .ds-app { height: 100% !important; min-height: 0 !important; max-height: none !important; }
html.pwa-ios .ds-app .shell, html.pwa-ios .ds-app .shell > main { height: auto !important; max-height: none !important; min-height: 0 !important; }
@media (max-width: 900px) {
  /* Menu + lớp tối bắt đầu DƯỚI vùng giờ/pin: iPhone tô vùng này theo màu lúc mở app (trắng), phủ lên menu navy thành bóng mờ */
  html .ds-app > .sidebar {
    top: env(safe-area-inset-top, 0px); height: auto; min-height: 0;
    padding-top: 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .ds-app > .sidebar .sidebar-collapse-btn { display: none; }
  body.nav-open::after, html.pwa-standalone body.nav-open::after { inset: env(safe-area-inset-top, 0px) 0 0; z-index: 50; background: rgba(6, 18, 38, .55); }
  .ds-app #main.content { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  #drawer .drawer-head { flex-wrap: wrap; row-gap: 8px; padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  #drawer .drawer-body { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) {
  /* Tiêu đề + nút đóng 1 hàng, nhãn SLA / in / ⋯ xuống hàng dưới (trước bị bẻ mỗi chữ 1 dòng) */
  #drawer .drawer-head-main { flex: 1 1 calc(100% - 52px); }
  #drawer .drawer-head > .drawer-x { order: 2; }
  #drawer .drawer-head > .wd-tools { order: 3; flex: 1 1 100%; justify-content: flex-start; }
  #drawer .wd-vhead { flex-wrap: wrap; row-gap: 8px; }
  #drawer .wd-vhead > .wd-vtitle { flex: 1 0 auto; }
  #drawer .wd-vhead > .wd-vloc { order: 5; max-width: 100%; }
}
@media (pointer: coarse) {
  .dash-kinds a, .dash-card-x a { display: inline-flex; align-items: center; gap: .3em; min-height: 32px; }
  .wsm-views button { min-height: 40px; }
}

/* ---------- Truy cập bằng bàn phím + giảm chuyển động ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible,
[role="menuitem"]:focus-visible, [tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid #1d6fd8 !important; outline-offset: 2px;
}
tr[data-click]:focus-visible { outline-offset: -2px; }
body.theme-dark a:focus-visible, body.theme-dark button:focus-visible, body.theme-dark [tabindex]:not([tabindex="-1"]):focus-visible { outline-color: #5ad1fa !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* iPhone app cai: man dang nhap giu nen navy ca vung an toan phia duoi (rule pwa-ios o tren uu tien cao hon) */
html.pwa-ios:has(.login-v2), html.pwa-ios:has(.login-v2) body, html.pwa-ios:has(.login-v2) #app { background-color: #0f2f5a !important; }

/* Dang nhap tren dien thoai: 1 mau navy phang, bo luoi ke, chu S va chan trang */
@media (max-width: 900px) {
  .login-v2 { background: #0f2f5a !important; }
  .login-v2::before, .login-v2 .la-ribbon, .login-v2 .la-foot { display: none !important; }
}

/* App da cai tren iPhone: bo thanh tint day (la vach trang o day man hinh) */
html.pwa-ios #ios-safari-bottom-tint, html:has(.login-v2) #ios-safari-bottom-tint { display: none !important; }

/* iPhone app cai: black-translucent -> man hinh tran het co; dai navy dac co dinh phu vung gio/pin (khong de lo noi dung -> khong bong mo); noi dung nam trong vung an toan */
html.pwa-ios::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: #123a6b; z-index: 100000; pointer-events: none; }
html.pwa-ios:has(.login-v2)::before { background: #0f2f5a; }

/* Dang nhap dien thoai: bo khoi chu gioi thieu (pill, tieu de, dong cham) - chi con the dang nhap */
@media (max-width: 900px) {
  .login-v2 .login-art { display: none !important; }
}

/* Dang nhap dien thoai (khong con khoi chu): the nam giua man hinh, chua cho dai gio/pin + nut ngon ngu */
@media (max-width: 900px) {
  .login-v2 { grid-template-rows: 1fr; min-height: var(--app-height, 100dvh); }
  .login-v2 .login-form-wrap { grid-row: 1; align-content: center; padding: calc(env(safe-area-inset-top, 0px) + 64px) 16px max(32px, calc(env(safe-area-inset-bottom, 0px) + 16px)); }
}

/* iPhone app (black-translucent): 1 mau navy kin man hinh khi tai/dang nhap; nut ngon ngu va noi dung nam duoi vung mo cua iOS (~50px duoi dai gio/pin) */
html.pwa-ios:has(.boot), html.pwa-ios:has(.boot) body, html.pwa-ios:has(.boot) #app { background-color: #0f2f5a !important; }
html.pwa-ios .boot { background: #0f2f5a !important; color: #fff; }
html.pwa-ios .boot-brand, html.pwa-ios .boot-msg { color: #fff; }
@media (max-width: 900px) {
  html.pwa-ios .login-v2 .la-lang { top: calc(env(safe-area-inset-top, 0px) + 52px); }
  html.pwa-ios .login-v2 .login-form-wrap { padding-top: calc(env(safe-area-inset-top, 0px) + 112px); }
}

/* Dang nhap dien thoai: the cao hon (can giua, hoi lech len tren) */
@media (max-width: 900px) {
  html.pwa-ios .login-v2 .la-lang { top: calc(env(safe-area-inset-top, 0px) + 50px); }
  html.pwa-ios .login-v2 .login-form-wrap { padding-top: calc(env(safe-area-inset-top, 0px) + 80px); padding-bottom: max(150px, calc(env(safe-area-inset-bottom, 0px) + 120px)); }
}

/* Dang nhap dien thoai: the giu vi tri cu (padding 112/32), chi nang nut ngon ngu */
@media (max-width: 900px) {
  html.pwa-ios .login-v2 .la-lang { top: calc(env(safe-area-inset-top, 0px) + 40px); }
  html.pwa-ios .login-v2 .login-form-wrap { padding-top: calc(env(safe-area-inset-top, 0px) + 112px); padding-bottom: max(32px, calc(env(safe-area-inset-bottom, 0px) + 16px)); }
}

@media (max-width: 900px) {
  html.pwa-ios .login-v2 .la-lang { top: calc(env(safe-area-inset-top, 0px) + 30px); }
}

/* Dang nhap dien thoai: hien lai tieu de the 'He thong quan ly xuong dich vu' duoi dong 'Dang nhap de truy cap' */
@media (max-width: 900px) {
  .login-v2 .lf-title { display: block !important; }
}

/* Dang nhap dien thoai: nang the len ~40px cho can doi */
@media (max-width: 900px) {
  html.pwa-ios .login-v2 .login-form-wrap { padding-bottom: max(112px, calc(env(safe-area-inset-bottom, 0px) + 96px)); }
}

/* Da dang nhap: dai vung gio/pin trang, lien voi header trang. Dang nhap / dang tai / mo menu giu navy */
html.pwa-ios.att-logged::before { background: #ffffff; }
html.pwa-ios.att-logged:has(.boot)::before, html.pwa-ios.att-logged:has(.login-v2)::before { background: #0f2f5a; }
html.pwa-ios.att-logged:has(> body.nav-open)::before { background: #123a6b; }

/* Hop gan vi tri tren dien thoai: nam giua man hinh, khong dinh day */
@media (max-width: 640px) {
  .modal-backdrop.modal-mid { align-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); }
  .modal-backdrop.modal-mid .modal { border-radius: 16px; width: 100%; max-height: min(78dvh, calc(var(--app-height, 100dvh) - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))); }
}

/* Dien thoai: 5 goc nhin thanh 3 tren + 2 duoi can giua; bang chu thich nam tren cum nut */
@media (max-width: 700px) {
  .wsm-views { left: 12px; right: 12px; max-width: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .wsm-views button { width: 100%; text-align: center; padding: 8px 4px; white-space: nowrap; }
  .wsm-views button:nth-child(-n+3) { grid-column: span 2; }
  .wsm-views button:nth-child(4) { grid-column: 2 / span 2; }
  .wsm-views button:nth-child(5) { grid-column: 4 / span 2; }
  .wsm-legend { bottom: 108px; }
}

/* Dien thoai: so do gian het vung noi dung, khong con dai trong o day */
@media (max-width: 700px) {
  html.pwa-ios .app-stage:has(.wsm) > .shell,
  html.pwa-ios .app-stage:has(.wsm) > .shell > main { flex: 1 1 auto !important; height: 100% !important; max-height: 100% !important; min-height: 0 !important; }
  .ds-app #main.content:has(> .wsm) { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
  .ds-app #main.content > .wsm { flex: 1 1 auto; height: auto !important; min-height: 0 !important; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .wsm-views { bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
  .wsm-legend { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}

/* Cau hinh: mot muc mot luc */
.cfg { display: grid; grid-template-columns: 196px minmax(0, 1fr); align-items: start; }
.cfg-nav { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-right: 1px solid var(--border); background: var(--bg); position: sticky; top: 0; }
.cfg-nav button { appearance: none; border: 0; background: transparent; text-align: left; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--muted); padding: 9px 10px; border-radius: 8px; cursor: pointer; min-height: 40px; }
.cfg-nav button.on { background: var(--surface); color: #123a6b; box-shadow: inset 3px 0 0 #18a4d8; }
.cfg-main, .cfg-panel { min-width: 0; }
.cfg-block { padding: 16px 18px 18px; }
.cfg-block + .cfg-block { border-top: 1px solid var(--border); }
.cfg-block h4 { margin: 0 0 4px; font-size: 15px; }
.cfg-hint { margin: 0 0 12px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.cfg .stamp-cfg { grid-template-columns: minmax(0, 340px) 168px; }
.cfg .form-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cfg .label, .cfg .field label { overflow-wrap: anywhere; }
@media (max-width: 800px) {
  .cfg { grid-template-columns: 1fr; }
  .cfg-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); z-index: 2; }
  .cfg-nav button { white-space: nowrap; box-shadow: none; }
  .cfg-nav button.on { box-shadow: inset 0 -2px 0 #18a4d8; }
}

/* ===== Thẻ số liệu thống nhất (mẫu 20/10): nền pha màu nhạt, viền nhạt, chấm màu + nhãn hoa, vòng tròn mờ góc phải ===== */
:is(.dash-card, .kpi, .bh-tile, .inv-sum, .as-stat) { --sc: #1677ff; --sc-fg: #0b5ccc; }
.sc-blue { --sc: #1677ff; --sc-fg: #0b5ccc; }
.sc-violet { --sc: #8b5cf6; --sc-fg: #6d28d9; }
.sc-green { --sc: #16a34a; --sc-fg: #15803d; }
.sc-orange { --sc: #f97316; --sc-fg: #c2410c; }
.sc-amber { --sc: #f59e0b; --sc-fg: #b45309; }
.sc-red { --sc: #ef4444; --sc-fg: #b91c1c; }
.sc-slate { --sc: #64748b; --sc-fg: #334155; }
.sc-teal { --sc: #0d9488; --sc-fg: #0f766e; }
.sc-cyan { --sc: #0891b2; --sc-fg: #0e7490; }
body.theme-dark .sc-blue { --sc-fg: #93c5fd; } body.theme-dark .sc-violet { --sc-fg: #c4b5fd; }
body.theme-dark .sc-green { --sc-fg: #86efac; } body.theme-dark .sc-orange { --sc-fg: #fdba74; }
body.theme-dark .sc-amber { --sc-fg: #fcd34d; } body.theme-dark .sc-red { --sc-fg: #fca5a5; }
body.theme-dark .sc-slate { --sc-fg: #cbd5e1; } body.theme-dark .sc-teal { --sc-fg: #5eead4; }
body.theme-dark .sc-cyan { --sc-fg: #67e8f9; }

:is(.dash-card, .kpi, .bh-tile, .inv-sum, .as-stat) {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid color-mix(in srgb, var(--sc) 24%, var(--surface));
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--sc) 11%, var(--surface)) 0%, var(--surface) 80%);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
:is(.dash-card, .kpi, .bh-tile, .inv-sum, .as-stat)::after {
  content: ''; position: absolute; z-index: -1; top: -28px; right: -24px; width: 88px; height: 88px;
  border-radius: 50%; background: color-mix(in srgb, var(--sc) 14%, var(--surface)); pointer-events: none;
}
.inv-sum::before { display: none; }
.dash-card-l, .kpi .l, .bh-tile .l, .as-stat .l {
  display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--sc-fg); line-height: 1.3;
}
.dash-card-l::before, .kpi .l::before, .bh-tile .l::before, .as-stat .l::before {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 20%, transparent);
}
.inv-sum-h { color: var(--sc-fg); }
.kpi { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 16px; }
.kpi .v { font-size: 26px; font-weight: 800; margin-top: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-hint { font-size: 12px; color: var(--muted); }
.bh-tile { gap: 4px; }
.bh-tile .l { order: -1; }
.bh-tile .v { font-size: 24px; font-weight: 800; }
.as-stat { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; padding: 10px 12px; }
.as-stat .l { order: -1; }

.kpis { grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); }
.bh-tiles { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
.bh-tile .l { font-size: 10.5px; }

/* ===== Chat nội bộ + thông báo đẩy ===== */
.nav-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px;
  background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-style: normal;
}
.nav-badge.hidden { display: none; }
body.sidebar-collapsed .nav a { position: relative; }
body.sidebar-collapsed .nav-badge { position: absolute; top: 2px; right: 4px; min-width: 14px; height: 14px; line-height: 14px; font-size: 9px; padding: 0 3px; }

.chat { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.chat-list {
  display: flex; flex-direction: column; gap: 4px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  max-height: 340px; min-height: 120px; padding: 10px 12px; scroll-behavior: auto;
}
.chat-empty { margin: auto; padding: 18px 8px; text-align: center; color: var(--muted); font-size: 13px; }
.chat-day {
  align-self: center; margin: 8px 0 2px; padding: 3px 10px; border-radius: 11px;
  background: rgba(15, 23, 42, .45); color: #fff; font-size: 11px; font-weight: 600;
}
.chat-older { align-self: center; flex: none; }
.chat-msg { display: flex; align-items: flex-start; gap: 8px; max-width: 72%; }
.chat-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.chat-msg.mine .chat-msg-body { align-items: flex-end; }
.chat-who { margin: 0 2px 3px; font-size: 11px; font-weight: 600; color: var(--muted); }
.chat-bubble {
  position: relative; padding: 8px 12px 6px; border-radius: 8px; background: #fff; color: var(--text);
  font-size: 14.5px; line-height: 1.45; overflow-wrap: anywhere; min-width: 56px;
  box-shadow: 0 1px 1px rgba(16, 24, 40, .08);
}
.chat-msg.mine .chat-bubble { background: #d7f0fb; color: #0f172a; }
.chat-text { white-space: pre-wrap; }
.chat-bubble img { display: block; max-width: min(240px, 100%); max-height: 240px; border-radius: 6px; margin-bottom: 4px; }
.chat-clip { display: block; max-width: min(280px, 100%); max-height: 220px; border-radius: 8px; background: #0f172a; margin-bottom: 4px; }
.chat-file-card {
  display: flex; align-items: center; gap: 8px; padding: 6px 4px 4px 0; color: inherit; text-decoration: none; min-width: 160px;
}
.chat-file-card svg { width: 28px; height: 28px; flex: none; color: #0e7490; }
.chat-file-card b { display: block; font-size: 13.5px; }
.chat-file-prev { display: flex; align-items: center; gap: 8px; padding: 8px 28px 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.chat-wrap { position: relative; width: max-content; max-width: 100%; user-select: none; -webkit-user-select: none; }
.chat-msg-body { padding-bottom: 2px; }
.chat-msg.first:not(:first-child) { margin-top: 8px; }
.chat-msg:has(.chat-rx-badges) .chat-msg-body, .chat-msg.last .chat-msg-body { padding-bottom: 14px; }
.chat-av-gap { visibility: hidden; }
.chat-bubble > .chat-who { margin: 0 0 3px; font-size: 12.5px; font-weight: 500; color: #64748b; }
.chat-recalled { font-style: italic; color: #94a3b8; }
.chat-quote {
  display: block; width: 100%; margin: 0 0 6px; padding: 4px 8px; border: 0; border-left: 3px solid #18a4d8; border-radius: 4px;
  background: rgba(24, 164, 216, .08); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.chat-quote b { display: block; font-size: 12.5px; color: #0e7490; }
.chat-quote span {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 13px; color: #475569; white-space: pre-wrap;
}
.chat-bubble.flash { animation: chat-flash 1.2s ease-out; }
@keyframes chat-flash { 0%, 30% { box-shadow: 0 0 0 3px rgba(24, 164, 216, .55); } 100% { box-shadow: 0 1px 1px rgba(16, 24, 40, .08); } }
/* Hàng nút Trả lời / Chuyển tiếp / Thêm cạnh tin khi rê chuột (máy tính) */
.chat-acts {
  position: absolute; top: 50%; left: 100%; transform: translateY(-50%); z-index: 4;
  display: none; align-items: center; gap: 6px; padding: 0 0 0 10px; white-space: nowrap;
}
.chat-msg.mine .chat-acts { left: auto; right: 100%; padding: 0 10px 0 0; flex-direction: row-reverse; }
@media (hover: hover) and (pointer: fine) {
  .chat-msg:hover .chat-acts, .chat-acts:focus-within { display: flex; }
}
.chat-act {
  width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #fff; color: #475569;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .16); display: grid; place-items: center; cursor: pointer;
}
.chat-act:hover { color: #0e7490; background: #f0f9ff; }
.chat-act svg { width: 16px; height: 16px; }
.chat-menu {
  position: fixed; z-index: 1300; min-width: 200px; padding: 4px; border-radius: 10px; background: #fff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .2), 0 0 0 1px rgba(15, 23, 42, .06);
}
.chat-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 0 12px; border: 0; border-radius: 8px;
  background: transparent; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
.chat-menu button:hover, .chat-menu button:focus-visible { background: var(--bg-accent); }
.chat-menu button svg { width: 17px; height: 17px; color: #64748b; }
.chat-menu button.danger, .chat-menu button.danger svg { color: #dc2626; }
@media (pointer: coarse) { .chat-menu button { min-height: 44px; } }
.chat-reply-prev {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; background: var(--surface);
  border-top: 1px solid var(--border); color: #0e7490;
}
.chat-reply-prev > svg { width: 18px; height: 18px; flex: none; }
.chat-reply-main { flex: 1 1 auto; min-width: 0; border-left: 3px solid #18a4d8; padding-left: 8px; }
.chat-reply-main b { display: block; font-size: 12.5px; }
.chat-reply-main span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #475569; }
.chat-reply-x { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #64748b; display: grid; place-items: center; cursor: pointer; }
.chat-reply-x:hover { background: var(--bg-accent); }
.chat-reply-x svg { width: 16px; height: 16px; }
.chat-fw-prev {
  margin-bottom: 10px; padding: 8px 12px; border-left: 3px solid #18a4d8; border-radius: 6px; background: var(--bg, #f1f5f9);
  font-size: 13.5px; color: #475569; white-space: pre-wrap; max-height: 80px; overflow: hidden;
}
body.theme-dark .chat-act, body.theme-dark .chat-menu { background: #1e293b; color: #cbd5e1; }
.chat-msg:not(.mine) .chat-time { text-align: left; }
.chat-rx { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.chat-rx-bar {
  position: fixed; z-index: 80; display: none; align-items: center; gap: 2px; padding: 6px 10px;
  background: #fff; border-radius: 999px; transform-origin: left center;
  box-shadow: 0 4px 18px rgba(15, 23, 42, .18), 0 0 0 1px rgba(15, 23, 42, .05);
  pointer-events: auto;
}
.chat-msg.mine .chat-rx-bar { transform-origin: right center; }
.chat-wrap.open .chat-rx-bar { display: flex; animation: chat-rx-pop .14s ease-out; }
@keyframes chat-rx-pop { from { transform: scale(.86); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.chat-rx-e {
  width: 34px; height: 34px; padding: 0; border: 0; background: transparent; border-radius: 50%;
  font-size: 22px; line-height: 34px; cursor: pointer;
}
.chat-rx-e:hover, .chat-rx-e.on { transform: scale(1.18); }
.chat-like {
  position: absolute; bottom: -11px; left: auto; right: 12px; width: 26px; height: 26px; padding: 0;
  border: 0; border-radius: 50%; background: #fff; color: #94a3b8;
  box-shadow: 0 1px 4px rgba(15, 23, 42, .16); display: grid; place-items: center;
  cursor: pointer; pointer-events: auto; opacity: 0;
}
.chat-msg.mine .chat-like { right: auto; left: 12px; }
.chat-like svg { width: 14px; height: 14px; }
.chat-like-e { font-size: 14px; line-height: 1; }
.chat-msg:hover .chat-like, .chat-wrap.open .chat-like, .chat-like.on { opacity: 1; }
/* Điện thoại không có rê chuột: chỉ hiện nút thích ở tin cuối như Zalo */
@media (pointer: coarse) { .chat-msg.last .chat-like { opacity: 1; } }
.chat-like.on { color: #0068ff; }
.chat-rx-badges {
  position: absolute; bottom: -10px; left: auto; right: 42px; display: flex; gap: 2px; pointer-events: auto; z-index: 4;
}
.chat-msg.mine .chat-rx-badges { right: auto; left: 42px; }
.chat-rx-badges .chat-rx {
  position: static; pointer-events: auto; border: 0; background: #fff; border-radius: 12px;
  padding: 1px 6px 1px 5px; font-size: 13px; line-height: 18px; box-shadow: 0 1px 4px rgba(15, 23, 42, .14);
  display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
}
.chat-rx-badges .chat-rx span { font-size: 11px; color: #64748b; font-weight: 600; }
.chat-rx-badges .chat-rx.on { box-shadow: 0 0 0 1px #0068ff, 0 1px 4px rgba(15, 23, 42, .14); }
body.theme-dark .chat-rx-bar, body.theme-dark .chat-like, body.theme-dark .chat-rx-badges .chat-rx { background: #1e293b; }
body.theme-dark .chat-like { color: #94a3b8; }
.chat-call-sys {
  align-self: center; margin: 4px 0; padding: 4px 12px; border-radius: 12px;
  background: rgba(15, 23, 42, .08); color: #475569; font-size: 12.5px;
}
.chat-time { display: block; margin-top: 3px; text-align: right; font-size: 11px; color: #64748b; }
/* Màn cuộc gọi kiểu Zalo / iPhone: kín màn hình, tên trên – ảnh to giữa (vòng sáng khi đổ chuông) – nút to có chữ dưới */
.call-ov {
  position: fixed; inset: 0; z-index: 1400; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: calc(28px + env(safe-area-inset-top, 0px)) 20px calc(34px + env(safe-area-inset-bottom, 0px));
  color: #fff; overflow: hidden; background: linear-gradient(165deg, #0f2f5a 0%, #123a6b 45%, #0b4f6c 100%);
  animation: call-in .22s ease-out;
}
@keyframes call-in { from { opacity: 0; transform: scale(1.03); } }
.call-ov.video.live { background: #000; }
.call-bg {
  position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(36px) brightness(.45) saturate(1.2);
  opacity: .9; pointer-events: none;
}
.call-top, .call-mid, .call-acts { position: relative; z-index: 2; }
.call-top { text-align: center; width: 100%; max-width: 420px; }
.call-app { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; letter-spacing: .02em; color: rgba(255, 255, 255, .72); }
.call-app svg { width: 13px; height: 13px; }
.call-name { margin-top: 14px; font-size: 30px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.call-kind { margin-top: 8px; color: rgba(255, 255, 255, .8); font-size: 16px; font-variant-numeric: tabular-nums; }
.call-conn { margin: 8px auto 0; max-width: 320px; color: #fde68a; font-size: 13.5px; line-height: 1.4; min-height: 19px; }
.call-mid { flex: 1 1 auto; display: grid; place-items: center; width: 100%; min-height: 160px; }
.call-av-wrap { position: relative; width: 148px; height: 148px; }
.call-av {
  position: relative; z-index: 1; width: 148px; height: 148px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, #18a4d8, #1d6fd8); font-size: 54px; font-weight: 700; box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  border: 3px solid rgba(255, 255, 255, .85);
}
.call-av.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.call-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); opacity: 0; pointer-events: none; }
.call-ov.ringing .call-ring { animation: call-ring 2s ease-out infinite; }
.call-ov.ringing .call-ring.r2 { animation-delay: 1s; }
@keyframes call-ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.75); opacity: 0; } }
.call-acts { display: flex; justify-content: center; align-items: flex-start; gap: 44px; width: 100%; max-width: 420px; }
.call-ov.incoming.ringing .call-acts { justify-content: space-between; padding: 0 18px; }
.call-act { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.call-act > span { font-size: 14px; color: rgba(255, 255, 255, .9); }
.call-btn {
  width: 72px; height: 72px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff;
  display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .12s, background .12s;
}
.call-btn:active { transform: scale(.93); }
.call-btn svg { width: 30px; height: 30px; }
.call-btn.accept { background: #22c55e; box-shadow: 0 8px 24px rgba(34, 197, 94, .45); }
.call-ov.ringing .call-btn.accept { animation: call-shake 1.6s ease-in-out infinite; }
@keyframes call-shake { 0%, 60%, 100% { transform: rotate(0); } 66% { transform: rotate(-14deg); } 72% { transform: rotate(14deg); } 78% { transform: rotate(-10deg); } 84% { transform: rotate(8deg); } }
.call-btn.reject { background: #ef4444; box-shadow: 0 8px 24px rgba(239, 68, 68, .4); }
.call-btn.end svg { transform: rotate(135deg); }
.call-btn.off { background: #fff; color: #0f172a; }
.call-remote { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; z-index: 0; }
.call-local {
  position: absolute; right: 16px; top: calc(16px + env(safe-area-inset-top, 0px)); width: min(28vw, 140px); aspect-ratio: 3/4; object-fit: cover;
  border-radius: 14px; background: #123a6b; z-index: 3; border: 2px solid rgba(255, 255, 255, .6);
}
.call-ov.video.live .call-top { text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
@media (prefers-reduced-motion: reduce) { .call-ring, .call-btn.accept { animation: none !important; } }
.chat-info-vid { display: grid; place-items: center; background: #0f172a; color: #fff; font-size: 22px; text-decoration: none; }
.chat-form {
  display: flex; align-items: flex-end; gap: 4px; padding: 8px 10px; background: var(--surface);
  border-top: 1px solid var(--border); flex: none; z-index: 2;
}
/* Ô nhập kiểu Zalo: chữ phẳng không khung, nút cảm xúc bên trái, •••/micro/ảnh bên phải; đang gõ thì chỉ còn nút Gửi */
.chat-input {
  flex: 1 1 auto; min-height: 40px; max-height: 120px; resize: none; padding: 9px 6px; line-height: 1.4;
  border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit;
  outline: none;
}
.chat-input::placeholder { color: #94a3b8; }
.chat-tool, .chat-send, .chat-ico {
  flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent;
  color: #475569; display: grid; place-items: center; cursor: pointer;
}
.chat-tool:hover, .chat-ico:hover { background: var(--bg-accent); color: var(--text); }
.chat-tool.on { color: #0e7490; background: #e0f4fb; }
.chat-tool svg, .chat-send svg, .chat-ico svg { width: 22px; height: 22px; }
.chat-form .chat-send { display: none; }
.chat-form.typing .chat-send { display: grid; }
.chat-form.typing .chat-more-btn, .chat-form.typing .chat-mic, .chat-form.typing .chat-gal { display: none; }
.chat-mic.on { color: #fff; background: #ef4444; animation: chat-mic 1.2s ease-in-out infinite; }
@keyframes chat-mic { 50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, .2); } }
.chat-panel { flex: none; background: var(--surface); border-top: 1px solid var(--border); overflow: hidden auto; }
.chat-panel[hidden] { display: none; }
.chat-emo-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; padding: 8px; }
.chat-emo-grid button {
  min-width: 0; height: 44px; padding: 0; border: 0; border-radius: 10px; background: transparent; font-size: 24px; line-height: 1; cursor: pointer;
}
.chat-emo-grid button:hover, .chat-emo-grid button:active { background: var(--bg-accent); }
/* Bảng biểu tượng kiểu Zalo: tab trên, nhóm có tiêu đề (Gần đây, Cảm xúc…), thanh chọn nhóm ở đáy */
.chat-panel.is-emoji { overflow: hidden; }
.chat-emo { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-emo-tabs { flex: none; display: flex; justify-content: center; border-bottom: 1px solid var(--border); }
.chat-emo-tabs span {
  padding: 10px 16px 8px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #1d6fd8;
  border-bottom: 2px solid #1d6fd8; margin-bottom: -1px;
}
.chat-emo-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 6px; }
.chat-emo-h { position: sticky; top: 0; z-index: 1; padding: 8px 8px 4px; background: var(--surface); font-size: 13px; font-weight: 700; color: var(--text); }
.chat-emo-sec .chat-emo-grid { padding: 0 4px 6px; }
.chat-emo-cats {
  flex: none; display: flex; align-items: center; gap: 2px; padding: 4px 6px; border-top: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.chat-emo-cats::-webkit-scrollbar { display: none; }
.chat-emo-cats button {
  flex: 1 0 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: transparent; font-size: 20px; line-height: 1;
  color: #475569; display: grid; place-items: center; cursor: pointer; position: relative; filter: grayscale(.6); opacity: .75;
}
.chat-emo-cats button svg { width: 20px; height: 20px; }
.chat-emo-cats button:hover { background: var(--bg-accent); }
.chat-emo-cats button.on { filter: none; opacity: 1; color: #1d6fd8; }
.chat-emo-cats button.on::after { content: ''; position: absolute; left: 20%; right: 20%; bottom: -4px; height: 2px; border-radius: 2px; background: #1d6fd8; }
.chat-more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 6px; padding: 22px 10px 16px; }
.chat-more-grid button {
  display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; border: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 13px; line-height: 1.25; text-align: center; cursor: pointer;
}
.chat-more-grid button:active .chat-more-ic { transform: scale(.92); }
.chat-more-ic {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .18), inset 0 2px 0 rgba(255, 255, 255, .25); transition: transform .1s;
}
.chat-more-ic svg { width: 27px; height: 27px; stroke-width: 2.2; }
/* Bảng ảnh / video (như Zalo): ô Chụp ảnh + Thư viện, ảnh đã chọn có vòng đánh số, thanh Gửi (n) */
.chat-panel.is-photo { overflow: hidden; }
.chat-ph { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.chat-ph-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: max-content; align-content: start; gap: 3px; padding: 3px;
}
.chat-ph-tile, .chat-ph-it { position: relative; aspect-ratio: 1; border: 0; padding: 0; overflow: hidden; cursor: pointer; border-radius: 4px; }
.chat-ph-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--bg, #f1f5f9); color: var(--text); font: inherit; font-size: 13.5px;
}
.chat-ph-tile svg { width: 30px; height: 30px; color: #475569; }
.chat-ph-it { background: #0f172a; }
.chat-ph-it img, .chat-ph-it video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.chat-ph-it:not(.on) img, .chat-ph-it:not(.on) video { opacity: .55; }
.chat-ph-n {
  position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff;
  background: rgba(15, 23, 42, .25); color: #fff; font-size: 12.5px; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.chat-ph-it.on .chat-ph-n { background: #1d6fd8; }
.chat-ph-v { position: absolute; left: 6px; bottom: 6px; color: #fff; font-size: 12px; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.chat-ph-bar {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border); background: var(--surface);
}
.chat-ph-bar > span { flex: 1 1 auto; font-size: 13.5px; color: #475569; text-align: center; }
.chat-ph-bar .btn-primary svg { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .chat-panel.pop.is-photo { width: 380px; height: 400px; max-height: min(400px, 70vh); }
}
/* Máy tính (có chuột): như Zalo bản máy tính – hàng công cụ trên ô nhập; mặt cười + 👍 bên phải; bảng cảm xúc nổi */
.chat-tb, .chat-emo2, .chat-quick-like { display: none; }
.chat-quick-like { font-size: 22px; line-height: 1; }
@media (hover: hover) and (pointer: fine) {
  .chat { position: relative; }
  .chat-form { flex-wrap: wrap; align-items: center; padding: 0 10px 6px; gap: 2px; }
  .chat-tb {
    display: flex; flex: 1 0 100%; align-items: center; gap: 4px; padding: 4px 0;
    margin: 0 -10px 4px; padding-left: 8px; border-bottom: 1px solid var(--border);
  }
  .chat-tb .chat-tool { width: 36px; height: 36px; border-radius: 8px; }
  .chat-tb .chat-tool svg { width: 21px; height: 21px; }
  .chat-form .chat-emo-btn, .chat-form .chat-more-btn, .chat-form .chat-mic, .chat-form .chat-gal { display: none !important; }
  .chat-form .chat-emo2, .chat-form .chat-quick-like { display: grid; }
  .chat-form.typing .chat-quick-like { display: none; }
  .chat-input { padding-left: 4px; }
  .chat-panel.pop {
    position: absolute; z-index: 30; left: 10px; width: 352px; max-height: 300px;
    border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(15, 23, 42, .18);
  }
  .chat-panel.pop.at-right { left: auto; right: 10px; }
  .chat-panel.pop.is-emoji { width: 380px; height: 420px; max-height: min(420px, 70vh); }
  .chat-compact .chat-tb { margin: 0 0 4px; padding-left: 0; }
}
.chat-text a { color: #0e7490; text-decoration: underline; overflow-wrap: anywhere; }
.chat-msg.mine .chat-text a { color: #075985; }
.chat-send { color: #18a4d8; }
.chat-send:hover { background: #e0f4fb; }
.chat-send:disabled { opacity: .4; }
.chat-photo-prev { position: relative; align-self: flex-start; margin: 0 12px 6px; }
.chat-photo-prev img { display: block; max-height: 90px; max-width: 160px; border-radius: 10px; border: 1px solid var(--border); }
.chat-photo-x { position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: #1d1d1f; color: #fff; display: grid; place-items: center; cursor: pointer; }
.chat-photo-x svg { width: 12px; height: 12px; }
.chat-av {
  flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 15px; letter-spacing: .02em; line-height: 1;
}
.chat-av.sm { width: 28px; height: 28px; font-size: 11px; }
.chat-av.lg { width: 88px; height: 88px; font-size: 28px; margin: 0 auto 8px; }
.chat-av.has-img { overflow: hidden; background: var(--bg-accent); }
.chat-av.has-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Trang Tin nhắn — bố cục 3 cột kiểu messenger */
.ds-app:has(.chat-page) .topbar-tools,
body.pwa-header-ported:has(.chat-page) > .app-header .topbar-tools { margin-left: auto; }
.ds-app #main.content:has(> .chat-page) {
  padding: 0; overflow: hidden; display: flex; flex-direction: column;
}
.chat-page {
  display: grid; grid-template-columns: 340px minmax(0, 1fr) 280px; gap: 0;
  flex: 1 1 auto; min-height: 0; height: 100%; background: var(--surface);
  border-top: 1px solid var(--border);
}
.chat-page:not(.has-room) { grid-template-columns: 340px minmax(0, 1fr); }
.chat-side {
  display: flex; flex-direction: column; min-height: 0; height: 100%; padding: 0; overflow: hidden;
  background: var(--surface); border-right: 1px solid var(--border);
}
.chat-side-top { flex: none; display: flex; align-items: center; gap: 6px; padding: 10px 10px 6px; }
.chat-search {
  flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 0 12px; height: 36px; border-radius: 18px; background: var(--bg, #f1f5f9); color: var(--muted);
}
.chat-search svg { width: 16px; height: 16px; flex: none; }
.chat-search input {
  flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 13.5px; color: inherit; outline: none;
}
.chat-tabs {
  flex: none; display: flex; align-items: center; gap: 2px; padding: 0 10px 6px; border-bottom: 1px solid var(--border);
}
.chat-tabs [data-tab] {
  border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 16px; cursor: pointer;
}
.chat-tabs [data-tab]:hover { background: var(--bg-accent); color: var(--text); }
.chat-tabs [data-tab].active { background: #e0f4fb; color: #0e7490; }
.chat-tabs-more {
  margin-left: auto; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; padding: 6px 8px;
}
.chat-tabs-more:hover { color: var(--primary); }
.push-nudge {
  display: flex; align-items: center; gap: 8px; margin: 8px 10px 4px; padding: 10px 10px 10px 12px;
  border: 1px solid #bae6fd; border-radius: 10px; background: #f0f9ff; color: #0c4a6e; font-size: 13px; line-height: 1.4;
}
.push-nudge > svg { width: 18px; height: 18px; flex: none; color: #0284c7; }
.push-nudge-t { flex: 1 1 auto; min-width: 0; }
.push-nudge .btn { flex: none; }
.push-nudge.warn { border-color: #fcd34d; background: #fffbeb; color: #78350f; }
.push-nudge.warn > svg { color: #d97706; }
body.theme-dark .push-nudge { background: rgba(2, 132, 199, .12); border-color: rgba(56, 189, 248, .35); color: #bae6fd; }
.toast.toast-link { cursor: pointer; }
.toast.toast-link:hover { filter: brightness(1.08); }
.chat-rooms { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
/* Thanh menu dưới cột danh sách (như Zalo): Tin nhắn | Danh bạ | Nhóm | Cá nhân; vào 1 cuộc trò chuyện trên điện thoại thì ẩn theo cột */
.chat-tabbar {
  flex: none; display: flex; border-top: 1px solid var(--border); background: var(--surface);
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom, 0px));
}
.chat-tabbar button {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 52px; padding: 4px 2px;
  border: 0; background: transparent; color: #64748b; font: inherit; font-size: 11.5px; cursor: pointer;
}
.chat-tabbar button.on { color: #1d6fd8; font-weight: 600; }
.chat-tb-ic { position: relative; display: grid; place-items: center; }
.chat-tb-ic svg { width: 24px; height: 24px; }
.chat-tabbar button.on .chat-tb-ic svg path:first-child { fill: rgba(29, 111, 216, .12); }
.chat-tb-n {
  position: absolute; top: -6px; left: 14px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px;
  background: #ef4444; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; font-style: normal;
}
.chat-tb-n.hidden { display: none; }
.chat-side:not(.v-rooms) .chat-tabs, .chat-side:not(.v-rooms) #chat-push-nudge { display: none !important; }
button.chat-room { width: 100%; border: 0; background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; }
/* Trang Cá nhân trong Chat */
.chat-me { padding-bottom: 12px; background: var(--bg, #f1f5f9); flex: 1 1 auto; }
.chat-me-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px 18px; background: var(--surface); margin-bottom: 8px; }
.chat-me-card b { font-size: 18px; }
.chat-me-list { display: flex; flex-direction: column; background: var(--surface); }
.chat-me-list > button, .chat-me-list > a {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--border);
  background: transparent; color: var(--text); font: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer;
}
.chat-me-list > :last-child { border-bottom: 0; }
.chat-me-list svg { width: 20px; height: 20px; color: #64748b; flex: none; }
.chat-me-list span { flex: 1 1 auto; }
.chat-me-list .danger, .chat-me-list .danger svg { color: #dc2626; }
.chat-me-list > :active { background: var(--bg-accent); }
.chat-room {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: inherit; text-decoration: none; border-radius: 0;
}
.chat-room:hover { background: var(--bg-accent); text-decoration: none; }
.chat-room.active { background: #e8f6fc; }
.chat-room-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-room-row { display: flex; align-items: baseline; gap: 8px; }
.chat-room-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; }
.chat-room-time { margin-left: auto; flex: none; font-size: 12px; color: var(--muted); }
.chat-room-last { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--muted); }
.chat-unread {
  flex: none; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px;
  background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.chat-thread { display: flex; flex-direction: column; min-height: 0; height: 100%; padding: 0; overflow: hidden; background: #e8edf3; }
.chat-pick { margin: auto; color: var(--muted); font-size: 14px; }
.chat-head {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.chat-head .chat-av { width: 40px; height: 40px; font-size: 13px; }
.chat-head-main { flex: 1 1 auto; min-width: 0; }
.chat-head-main b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.chat-back { display: none; width: 36px; height: 36px; border-radius: 50%; color: var(--text); align-items: center; justify-content: center; }
.chat-back svg { width: 20px; height: 20px; }
.chat-host { flex: 1 1 auto; min-height: 0; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.chat-host > .chat { flex: 1 1 auto; min-height: 0; height: 100%; }
.chat-host .chat-list { flex: 1 1 auto; min-height: 0; max-height: none; }
.chat-info {
  display: flex; flex-direction: column; min-height: 0; height: 100%; overflow-y: auto; background: var(--surface);
  border-left: 1px solid var(--border); padding: 0 0 16px;
}
.chat-info-title { position: relative; padding: 14px 16px 8px; font-size: 16px; font-weight: 700; text-align: center; }
.chat-info-back {
  display: none; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--text); place-items: center; cursor: pointer;
}
.chat-info-back svg { width: 24px; height: 24px; }
@media (max-width: 900px) {
  .chat-info-back { display: grid; }
  .chat-page.show-info .chat-info-title { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
  .chat-page.show-info .chat-info-back { top: calc(50% + env(safe-area-inset-top, 0px) / 2); }
}
.chat-info-who { padding: 8px 16px 16px; text-align: center; border-bottom: 1px solid var(--border); }
.chat-info-who b { display: block; font-size: 16px; }
.chat-info-actions { display: flex; justify-content: center; gap: 18px; padding: 14px 12px; border-bottom: 1px solid var(--border); }
.chat-info-act {
  display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 11.5px; text-decoration: none; cursor: pointer; min-width: 64px;
}
.chat-info-act span { color: var(--muted); }
.chat-info-act svg { width: 22px; height: 22px; padding: 8px; box-sizing: content-box; border-radius: 50%; background: var(--bg, #f1f5f9); color: #0e7490; }
.chat-info-act:hover { text-decoration: none; }
.chat-info-act:hover svg { background: #e0f4fb; }
.chat-info-sec { padding: 12px 16px; }
.chat-info-sec h4 { margin: 0 0 8px; font-size: 13.5px; }
.chat-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.chat-info-grid a { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--bg); }
.chat-info-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-info-sec h4 { display: flex; align-items: center; gap: 8px; }
.chat-info-sec h4 svg { width: 18px; height: 18px; color: #64748b; }
.chat-info-title .t-narrow { display: none; }
.chat-info-tg .ic-narrow { display: none; }
.chat-info-tg span { display: grid; place-items: center; }
/* Thẻ cuộc gọi trong khung chat (như Zalo): bên phía người gọi, thời lượng / nhỡ, nút Gọi lại */
.chat-call-card { min-width: 210px; padding: 10px 14px 8px; }
.cc-title { font-weight: 600; font-size: 14.5px; }
.cc-sub { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: #64748b; font-size: 13px; }
.cc-sub svg { width: 15px; height: 15px; }
.cc-sub.bad { color: #dc2626; }
.cc-back {
  display: block; width: 100%; margin: 8px 0 2px; padding: 8px 0 2px; border: 0; border-top: 1px solid rgba(15, 23, 42, .08);
  background: transparent; color: #1d6fd8; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
}
.cc-back:hover { color: #0b4fb3; }
.chat-call-card .chat-time { margin-top: 2px; }
@media (max-width: 900px) {
  /* Đầu cuộc trò chuyện trên điện thoại như Zalo: ← tên | gọi, video, ☰ (tìm tin nằm trong Tuỳ chọn) */
  .chat-head > .chat-av { display: none; }
  .chat-head.is-dm [data-click="chat-search"] { display: none; }
  .chat-head-main b { font-size: 17px; }
  .chat-head-main .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-info-tg .ic-wide { display: none; }
  .chat-info-tg .ic-narrow { display: grid; }
  .chat-head .chat-ico { width: 44px; height: 44px; }
  /* Trang Tuỳ chọn (như Zalo): tên trang trái, ảnh + tên, hàng nút tròn, các mục cách nhau bằng dải nền */
  .chat-page.show-info .chat-info { background: var(--bg, #f1f5f9); padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .chat-info-title { text-align: left; padding-left: 56px; background: var(--surface); border-bottom: 1px solid var(--border); font-size: 18px; }
  .chat-info-title .t-wide { display: none; }
  .chat-info-title .t-narrow { display: inline; }
  .chat-info-who { background: var(--surface); padding: 20px 16px 8px; border-bottom: 0; }
  .chat-info-who b { font-size: 19px; margin-top: 4px; }
  .chat-info-actions { background: var(--surface); justify-content: space-evenly; gap: 8px; padding: 10px 8px 18px; border-bottom: 0; margin-bottom: 8px; flex-wrap: wrap; }
  .chat-info-act { min-width: 72px; font-size: 12.5px; }
  .chat-info-act svg { width: 22px; height: 22px; padding: 11px; }
  .chat-info-sec { background: var(--surface); margin-bottom: 8px; padding: 14px 16px; }
  .chat-info-sec h4 { font-size: 15px; font-weight: 500; margin-bottom: 10px; }
  .chat-info-media .chat-info-grid { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .chat-info-media .chat-info-grid::-webkit-scrollbar { display: none; }
  .chat-info-media .chat-info-grid a { flex: 0 0 76px; height: 76px; }
}
@media (min-width: 901px) { .chat-info-find { display: none; } }
.chat-compact { gap: 0; }
.chat-compact .chat-list { max-height: 240px; background: #e8edf3; border-radius: 10px; }
.chat-compact .chat-form { border: 0; padding: 8px 0 0; background: transparent; }
.chat-compact .chat-msg { max-width: 88%; }
body.theme-dark .chat-thread, body.theme-dark .chat-compact .chat-list { background: #0f172a; }
body.theme-dark .chat-bubble { background: #1e293b; color: var(--text); box-shadow: none; }
body.theme-dark .chat-msg.mine .chat-bubble { background: #164e63; color: #ecfeff; }
body.theme-dark .chat-day { background: rgba(148, 163, 184, .25); color: #e2e8f0; }
body.theme-dark .chat-room.active { background: #164e63; }
body.theme-dark .chat-tabs [data-tab].active { background: #164e63; color: #a5f3fc; }
body.theme-dark .chat-input { background: transparent; }
/* Nút khung bên phải (ẩn / hiện Thông tin hội thoại) + nút Tìm: tô xanh khi đang bật */
.chat-head .chat-ico { border-radius: 10px; }
.chat-head .chat-ico.on { background: #e0efff; color: #1d6fd8; }
.chat-head .chat-ico.on svg path:first-child { fill: rgba(29, 111, 216, .14); }
.chat-head .chat-info-tg.on svg path:last-child { stroke-width: 2.6; }
@media (min-width: 1181px) {
  .chat-page.has-room.hide-info { grid-template-columns: 340px minmax(0, 1fr); }
  .chat-page.hide-info .chat-info { display: none; }
}
/* Thanh tìm tin nhắn dưới đầu cuộc trò chuyện */
.chat-find {
  display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 14px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.chat-find[hidden] { display: none; }
.chat-find > svg { width: 17px; height: 17px; color: #64748b; flex: none; }
.chat-find input {
  flex: 1 1 auto; min-width: 0; height: 36px; border: 0; background: transparent; font: inherit; font-size: 14.5px; color: inherit; outline: none;
}
.chat-find-n { flex: none; font-size: 12.5px; color: #64748b; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.chat-find .chat-ico { width: 34px; height: 34px; border-radius: 8px; }
.chat-find .chat-ico svg { width: 18px; height: 18px; }
.chat-bubble.found { box-shadow: 0 0 0 2px #f59e0b, 0 2px 10px rgba(245, 158, 11, .25); }
@media (max-width: 1180px) {
  .chat-page, .chat-page:not(.has-room) { grid-template-columns: 300px minmax(0, 1fr); }
  .chat-info { display: none; }
  .chat-page.show-info { grid-template-columns: minmax(0, 1fr) 280px; }
  .chat-page.show-info .chat-side { display: none; }
  .chat-page.show-info .chat-info { display: flex; }
}
@media (max-width: 900px) {
  .chat-page, .chat-page:not(.has-room), .chat-page.show-info { grid-template-columns: minmax(0, 1fr); }
  .chat-page.has-room .chat-side { display: none; }
  .chat-page:not(.has-room) .chat-thread { display: none; }
  .chat-page.show-info .chat-thread { display: none; }
  .chat-page.show-info .chat-info { display: flex; }
  .chat-back { display: inline-flex; }
  .chat-input { font-size: 16px; }
  .chat-msg { max-width: 88%; }
  .chat-page .chat-form {
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  }
  html.kb-open .chat-page .chat-form,
  .chat-page .chat-form.kb,
  .chat-page .chat-form:has(+ .chat-panel:not([hidden])) {
    padding-bottom: 8px;
  }
  .chat-page .chat-panel { height: calc(300px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .chat-emo-grid button { height: 46px; }
  /* Đang trong 1 cuộc trò chuyện: ẩn thanh trên của app (như Zalo chỉ còn đầu cuộc trò chuyện) – thêm chỗ khi bàn phím mở */
  .ds-app:has(.chat-page.has-room) .app-header,
  body:has(.chat-page.has-room) > .app-header { display: none !important; }
  .chat-page.has-room .chat-head { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  .chat-back { width: 44px; height: 44px; margin-left: -6px; position: relative; }
  .chat-back svg { width: 24px; height: 24px; }
}
.chat-back-n {
  position: absolute; top: 4px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-style: normal;
}
.chat-back-n.hidden { display: none; }
/* Điện thoại: nút đủ to cho ngón tay, chặn bảng Sao chép / kính lúp của iPhone khi nhấn giữ tin */
.chat-wrap, .chat-wrap .chat-text { -webkit-touch-callout: none; }
.chat-list .chat-msg { position: relative; touch-action: pan-y; }
.chat-list .chat-msg::before {
  content: '↩'; position: absolute; left: -34px; top: 50%; transform: translateY(-50%) scale(.6);
  width: 28px; height: 28px; border-radius: 50%; background: #e0f4fb; color: #0e7490; font-size: 16px; line-height: 28px; text-align: center;
  opacity: 0; transition: opacity .12s, transform .12s; pointer-events: none;
}
.chat-list .chat-msg.swipe-ok::before { opacity: 1; transform: translateY(-50%) scale(1); }
.chat-msg.held .chat-bubble { box-shadow: 0 0 0 2px #18a4d8; }
@media (pointer: coarse) {
  .chat-head .chat-ico { width: 44px; height: 44px; }
  .chat-tool, .chat-send { width: 44px; height: 44px; }
  .chat-room { min-height: 64px; padding: 10px 14px; }
  .chat-tabs [data-tab] { min-height: 36px; padding: 6px 14px; }
  .chat-search { height: 40px; }
  .chat-side-top .chat-ico { width: 44px; height: 44px; }
  .chat-like { width: 32px; height: 32px; bottom: -22px; right: 6px; }
  .chat-msg.mine .chat-like { left: 6px; right: auto; }
  .chat-like svg { width: 17px; height: 17px; }
  .chat-like-e { font-size: 17px; }
  .chat-msg.last .chat-msg-body { padding-bottom: 24px; }
  .chat-rx-badges .chat-rx { padding: 3px 8px; font-size: 14px; }
  .chat-reply-x { width: 40px; height: 40px; }
  .chat-photo-x { width: 30px; height: 30px; }
  .chat-quote { padding: 6px 10px; }
}
/* Bảng thao tác khi nhấn giữ tin (điện thoại) */
.chat-sheet-wrap { position: fixed; inset: 0; z-index: 1250; }
.chat-sheet-bg { position: absolute; inset: 0; background: rgba(8, 18, 36, .45); animation: chat-fade .15s ease-out; }
@keyframes chat-fade { from { opacity: 0; } }
.chat-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; background: var(--surface); border-radius: 18px 18px 0 0;
  padding: 6px 12px calc(10px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 30px rgba(15, 23, 42, .18);
  animation: chat-up .18s ease-out;
}
@keyframes chat-up { from { transform: translateY(40px); opacity: .6; } }
.chat-sheet-grip { width: 40px; height: 4px; border-radius: 2px; background: #cbd5e1; margin: 4px auto 10px; }
.chat-sheet-prev { padding: 0 6px 10px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.chat-sheet-prev b { display: block; font-size: 12.5px; color: #0e7490; }
.chat-sheet-prev span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #475569; white-space: pre-wrap; }
.chat-sheet-rx { display: flex; justify-content: space-between; padding: 12px 2px; border-bottom: 1px solid var(--border); }
.chat-sheet-rx button {
  width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--bg, #f1f5f9); font-size: 26px; line-height: 1; cursor: pointer;
}
.chat-sheet-rx button.on { background: #e0f4fb; box-shadow: 0 0 0 2px #18a4d8; }
.chat-sheet-acts { display: flex; flex-direction: column; padding: 4px 0; }
.chat-sheet-acts button {
  display: flex; align-items: center; gap: 14px; min-height: 50px; padding: 0 8px; border: 0; background: transparent;
  color: var(--text); font: inherit; font-size: 15.5px; text-align: left; cursor: pointer; border-radius: 10px;
}
.chat-sheet-acts button:active { background: var(--bg-accent); }
.chat-sheet-acts button svg { width: 20px; height: 20px; color: #475569; }
.chat-sheet-acts button.danger, .chat-sheet-acts button.danger svg { color: #dc2626; }
.chat-sheet-cancel {
  width: 100%; min-height: 48px; margin-top: 4px; border: 0; border-radius: 12px; background: var(--bg, #f1f5f9);
  color: var(--text); font: inherit; font-size: 15.5px; font-weight: 600; cursor: pointer;
}
body.theme-dark .chat-sheet-rx button, body.theme-dark .chat-sheet-cancel { background: #1e293b; }
/* iPhone PWA giữ height 100% nên bàn phím đè ô nhập — khi gõ, co khung theo visualViewport */
html.kb-open .ds-app,
html.pwa-ios.kb-open .ds-app {
  height: var(--vvh, var(--app-height)) !important;
  max-height: var(--vvh, var(--app-height)) !important;
  min-height: 0 !important;
  /* iPhone đẩy vùng nhìn thấy lên khi mở bàn phím: dời khung theo để đầu trang + ô nhập cùng nằm trong màn hình */
  transform: translateY(var(--vv-top, 0px));
}

/* Chat: chọn người / nhóm */
.chat-people { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; max-height: min(52vh, 420px); overflow-y: auto; }
.chat-person { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; width: 100%; }
button.chat-person:hover, label.chat-person:hover { background: var(--bg-accent); }
.chat-person input[type=checkbox] { flex: none; width: 18px; height: 18px; }
.chat-person.hidden, .chat-pp-none.hidden { display: none; }
.chat-grp-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.chat-grp-row:last-child { border-bottom: 0; }
.chat-grp-row .chat-room-main .small { white-space: normal; overflow-wrap: anywhere; }