/* =========================================================================
   CHÈ TÂM HỒ TÂY — hệ thiết kế "vàng ánh kim"
   Mặc định nền đen ấm + vàng kim; giao diện sáng màu ngà cho nơi nhiều nắng.
   Bố cục: điện thoại (thanh điều hướng dưới) → máy tính bảng/máy tính (thanh bên).
   ========================================================================= */
:root {
  --bg: #0c0b09;
  --bg-2: #12100c;
  --surface: #191611;
  --surface-2: #211d16;
  --surface-3: #2a251c;
  --line: rgba(212, 175, 55, 0.13);
  --line-2: rgba(212, 175, 55, 0.28);
  --text: #f4eee0;
  --text-2: #cbc1aa;
  --muted: #9d927c;
  --faint: #6f6655;
  --gold: #d4af37;
  --gold-hi: #f4dc8c;
  --gold-lo: #94711f;
  --gold-ink: #e8c766;
  --gold-soft: rgba(212, 175, 55, 0.12);
  --gold-grad: linear-gradient(135deg, #7d5b14 0%, #c39a35 20%, #f7e39b 44%, #d6b23c 58%, #a67d22 78%, #e2c56b 100%);
  --gold-text: linear-gradient(120deg, #c9a03a 0%, #f6e3a1 38%, #d4af37 62%, #a8812a 100%);
  --on-gold: #1b1407;
  --ok: #5bc890; --ok-bg: rgba(91, 200, 144, 0.13);
  --warn: #f0ab4f; --warn-bg: rgba(240, 171, 79, 0.14);
  --bad: #f07373; --bad-bg: rgba(240, 115, 115, 0.13);
  --info: #86b5f2; --info-bg: rgba(134, 181, 242, 0.13);
  --violet: #b9a6f2; --violet-bg: rgba(185, 166, 242, 0.13);
  --scrim: rgba(5, 4, 3, 0.62);
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-gold: 0 6px 22px rgba(212, 175, 55, 0.22);
  --r: 18px; --r-sm: 12px; --r-xs: 9px;
  --font: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --display: 'Playfair Display', 'Cambria', Georgia, 'Times New Roman', serif;
  --nav-w: 240px;
  --top-h: 60px;
  --bottom-h: 66px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: dark;
}
:root[data-theme='light'] {
  --bg: #f5efe2;
  --bg-2: #efe7d6;
  --surface: #fffdf8;
  --surface-2: #faf5ea;
  --surface-3: #f2e9d6;
  --line: rgba(140, 105, 30, 0.15);
  --line-2: rgba(140, 105, 30, 0.3);
  --text: #1d1911;
  --text-2: #463d2d;
  --muted: #6c614d;
  --faint: #978b73;
  --gold: #b8901f;
  --gold-hi: #d9b44a;
  --gold-lo: #8a6a16;
  --gold-ink: #8a6714;
  --gold-soft: rgba(184, 144, 31, 0.12);
  /* Chữ vàng trên nền ngà phải ĐẬM hơn bản tối (vàng nhạt trên nền sáng chỉ đạt ~2:1, khó đọc) */
  --gold-text: linear-gradient(120deg, #6e4f0c 0%, #a57d1b 42%, #8a6714 66%, #5e430a 100%);
  --ok: #17824f; --ok-bg: rgba(23, 130, 79, 0.1);
  --warn: #b46a07; --warn-bg: rgba(180, 106, 7, 0.1);
  --bad: #c23838; --bad-bg: rgba(194, 56, 56, 0.09);
  --info: #2f69b8; --info-bg: rgba(47, 105, 184, 0.1);
  --violet: #6b51c9; --violet-bg: rgba(107, 81, 201, 0.1);
  --scrim: rgba(30, 24, 12, 0.42);
  --shadow: 0 18px 40px rgba(70, 52, 14, 0.16), 0 2px 8px rgba(70, 52, 14, 0.08);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; }
a { color: var(--gold-ink); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
::selection { background: var(--gold-soft); }
.num, .money { font-variant-numeric: tabular-nums; }
.display { font-family: var(--display); letter-spacing: 0.005em; }
.gold-text { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.label { font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.ok { color: var(--ok); } .warn { color: var(--warn); } .bad { color: var(--bad); }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.spacer { flex: 1; }
.right { margin-left: auto; }
.center { text-align: center; }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hairline { height: 1px; background: linear-gradient(90deg, transparent, var(--line-2), transparent); border: 0; margin: 14px 0; }

/* ---------- Khung ứng dụng ---------- */
.shell { min-height: 100dvh; display: flex; }
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--nav-w);
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; padding: 18px 12px 14px; z-index: 30;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 4px 6px 18px; }
.brand-mark {
  width: 42px; height: 42px; border-radius: 13px; flex: none;
  background: var(--gold-grad); color: var(--on-gold);
  display: grid; place-items: center; box-shadow: var(--shadow-gold);
}
.brand-name { font-family: var(--display); font-weight: 700; font-size: 17.5px; line-height: 1.15; text-wrap: balance; }
.brand-sub { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; flex: 1; scrollbar-width: none; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  color: var(--text-2); text-decoration: none; font-weight: 500; font-size: 14.5px; position: relative;
  transition: background 0.18s var(--ease), color 0.18s;
}
.nav a:hover { background: var(--surface); color: var(--text); }
.nav a.on { background: var(--gold-soft); color: var(--gold-ink); }
.nav a.on::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--gold-grad); }
.nav .badge { margin-left: auto; }
.nav-sep { height: 1px; background: var(--line); margin: 10px 8px; }
.me { margin-top: 10px; padding: 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.main { flex: 1; min-width: 0; margin-left: var(--nav-w); display: flex; flex-direction: column; min-height: 100dvh; }
.topbar {
  position: sticky; top: 0; z-index: 20; min-height: var(--top-h);
  display: flex; align-items: center; gap: 12px; padding: 10px 26px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.page-title { font-family: var(--display); font-size: 24px; font-weight: 700; margin: 0; line-height: 1.15; }
.page-sub { color: var(--muted); font-size: 13px; }
.content { padding: 22px 26px 40px; flex: 1; }
.conn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.conn i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.conn.off i { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); animation: pulse 1.2s infinite; }
.offline-bar { background: var(--bad-bg); color: var(--bad); border-bottom: 1px solid var(--bad); padding: 8px 16px; font-size: 13.5px; font-weight: 600; text-align: center; }
.bottomnav { display: none; }

@media (max-width: 1023px) {
  :root { --nav-w: 84px; }
  .sidebar { padding: 14px 8px; }
  .brand { justify-content: center; padding-bottom: 14px; }
  .brand-text, .nav a span.t, .me .grow { display: none; }
  .nav a { flex-direction: column; gap: 4px; font-size: 11px; padding: 9px 4px; text-align: center; }
  .nav a span.s { display: block; font-size: 10.5px; line-height: 1.15; }
  .nav a.on::before { left: -8px; }
  .nav .badge { position: absolute; top: 4px; right: 10px; margin: 0; }
  .me { justify-content: center; padding: 8px 4px; }
}
@media (min-width: 1024px) { .nav a span.s { display: none; } }
@media (max-width: 767px) {
  .sidebar { display: none; }
  .main { margin-left: 0; padding-bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom, 0px)); }
  .topbar { padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .page-title { font-size: 21px; }
  .content { padding: 16px 16px 28px; }
  .bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(var(--bottom-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--bg-2) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
  }
  .bottomnav a, .bottomnav button {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 600; background: none; border: 0; position: relative; min-height: 48px;
  }
  .bottomnav .on { color: var(--gold-ink); }
  .bottomnav .on svg { filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.45)); }
  .bottomnav .badge { position: absolute; top: 6px; left: calc(50% + 6px); }
}

/* ---------- Nút ---------- */
.btn {
  --h: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--h); padding: 0 16px; border-radius: 13px; border: 1px solid var(--line-2);
  background: var(--surface-2); color: var(--text); font-weight: 600; font-size: 14.5px; cursor: pointer;
  transition: transform 0.12s var(--ease), background 0.18s, border-color 0.18s, box-shadow 0.18s, opacity 0.18s;
  white-space: nowrap; user-select: none; text-decoration: none;
}
.btn:hover { border-color: var(--gold-lo); background: var(--surface-3); }
.btn:active { transform: scale(0.97); }
.btn[disabled], .btn.busy { opacity: 0.45; pointer-events: none; }
.btn.gold {
  background: var(--gold-grad); background-size: 160% 160%; color: var(--on-gold); border-color: transparent;
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.35); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn.gold:hover { background-position: 100% 0; box-shadow: 0 10px 28px rgba(212, 175, 55, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text); }
.btn.outline { background: transparent; border-color: var(--gold-lo); color: var(--gold-ink); }
.btn.danger { background: var(--bad-bg); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.btn.ok-btn { background: var(--ok-bg); color: var(--ok); border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.btn.sm { --h: 36px; padding: 0 12px; font-size: 13.5px; border-radius: 11px; }
.btn.lg { --h: 54px; font-size: 16px; padding: 0 22px; border-radius: 15px; }
.btn.xl { --h: 62px; font-size: 17.5px; padding: 0 26px; border-radius: 17px; }
.btn.block { width: 100%; }
.btn.icon { width: var(--h); padding: 0; }
.btn .spin { width: 16px; height: 16px; }

/* ---------- Thẻ, khối ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; }
.card.pad-0 { padding: 0; }
.card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.card-t { font-weight: 700; font-size: 15.5px; margin: 0; }
.card.luxe { position: relative; overflow: hidden; }
.card.luxe::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(140deg, rgba(212,175,55,.55), transparent 35%, transparent 65%, rgba(212,175,55,.35)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.grid { display: grid; gap: 14px; }
.grid.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .grid.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid.k21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 899px) { .grid.k21 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .grid.k3, .grid.k2 { grid-template-columns: minmax(0, 1fr); } .grid.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.stat { padding: 16px 18px; }
.stat .v { font-family: var(--display); font-size: 27px; font-weight: 700; line-height: 1.15; margin-top: 6px; font-variant-numeric: tabular-nums; }
.stat .d { font-size: 12.5px; margin-top: 4px; color: var(--muted); }
@media (max-width: 767px) { .stat { padding: 13px 14px; } .stat .v { font-size: 22px; } }

/* ---------- Nhãn trạng thái ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: var(--surface-3); color: var(--text-2); }
.chip.gold { background: var(--gold-soft); color: var(--gold-ink); }
.chip.ok { background: var(--ok-bg); color: var(--ok); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.info { background: var(--info-bg); color: var(--info); }
.chip.violet { background: var(--violet-bg); color: var(--violet); }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 11.5px; font-weight: 700; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.badge.gold { background: var(--gold-grad); color: var(--on-gold); }

/* ---------- Ô nhập ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field .hint { font-size: 12px; color: var(--muted); }
.field .err { font-size: 12.5px; color: var(--bad); }
.input, .select, .textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--bg-2); color: var(--text); font-size: 15.5px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.textarea { min-height: 84px; resize: vertical; line-height: 1.45; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.input.big { font-family: var(--display); font-size: 26px; font-weight: 700; text-align: right; min-height: 60px; }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
/* Ô ngày / giờ / tháng kiểu Việt (không phụ thuộc ngôn ngữ trình duyệt) */
.datefield { position: relative; display: inline-flex; min-width: 0; width: 100%; }
.datefield .datebtn { display: flex; align-items: center; gap: 9px; white-space: nowrap; cursor: pointer; }
.datefield .datebtn svg { color: var(--gold-ink); flex: none; }
.datefield input[type=date] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0; color-scheme: dark light; }
.datefield input[type=date]::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.datefield:focus-within .datebtn { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.timefield { display: inline-flex; align-items: center; gap: 6px; }
.timefield .select { width: 84px; padding-right: 30px; font-variant-numeric: tabular-nums; }
.timefield b { color: var(--muted); }
.monthfield { display: inline-flex; align-items: center; gap: 6px; }
.monthfield .mf-label { min-width: 132px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.search { position: relative; }
.search .input { padding-left: 42px; }
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.form { display: grid; gap: 14px; }
.form.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .form.two { grid-template-columns: minmax(0, 1fr); } }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; color: var(--text-2); }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--gold); flex: none; }
.switch { position: relative; display: inline-block; vertical-align: middle; width: 48px; height: 28px; flex: none; }
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; cursor: pointer; z-index: 1; }
.switch i { position: absolute; inset: 0; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--line-2); transition: background 0.2s; }
.switch i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text-2); transition: transform 0.2s var(--ease), background 0.2s; }
.switch input:checked + i { background: var(--gold-grad); border-color: transparent; }
.switch input:checked + i::after { transform: translateX(20px); background: var(--on-gold); }
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + i { opacity: 0.45; }
.toggle-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.toggle-row:last-child { border-bottom: 0; }

/* ---------- Tab / phân đoạn ---------- */
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 6px 4px 14px; margin: -6px -4px -12px; }
@media (min-width: 768px) { .tabs.wrap { flex-wrap: wrap; } }
.tabs::-webkit-scrollbar { display: none; }
.tab { height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); font-weight: 600; font-size: 13.5px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; transition: all 0.18s; }
.tab:hover { border-color: var(--line-2); color: var(--text); }
.tab.on { background: var(--gold-grad); color: var(--on-gold); border-color: transparent; box-shadow: var(--shadow-gold); }
.tab .n { font-variant-numeric: tabular-nums; opacity: 0.75; }
.seg { display: inline-flex; padding: 3px; border-radius: 13px; background: var(--bg-2); border: 1px solid var(--line); gap: 2px; }
.seg button { border: 0; background: transparent; padding: 8px 13px; border-radius: 10px; font-weight: 600; font-size: 13.5px; color: var(--muted); cursor: pointer; }
.seg button { white-space: nowrap; flex: none; }
.show-sm, .show-sm-inline { display: none; }
.t.sticky1 th:first-child, .t.sticky1 td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.t.sticky1 thead th:first-child { background: var(--surface-2); }
@media (max-width: 767px) {
  .hide-sm { display: none !important; }
  .show-sm { display: block; }
  .show-sm-inline { display: inline; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .t th, .t td { padding-left: 12px; padding-right: 12px; }
  .stack-sm { flex-direction: column; align-items: stretch !important; }
  .stack-sm > .btn { width: 100%; justify-content: center; }
}
.seg button.on { background: var(--surface-3); color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---------- Bảng ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font-size: 11.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; position: sticky; top: 0; }
table.t td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t td.r, table.t th.r { text-align: right; font-variant-numeric: tabular-nums; }
table.t tbody tr.click { cursor: pointer; }
table.t tbody tr.click:hover { background: var(--surface-2); }
table.t tfoot td { font-weight: 700; background: var(--surface-2); border-top: 1px solid var(--line-2); }

/* ---------- Danh sách ---------- */
.list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.li { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); min-height: 58px; }
.li:last-child { border-bottom: 0; }
.li.click { cursor: pointer; transition: background 0.15s; }
.li.click:hover { background: var(--surface-2); }
.li .t { font-weight: 600; }
.li .s { font-size: 12.5px; color: var(--muted); }
.avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--on-gold); flex: none; background: var(--gold-grad); }

/* ---------- Hộp thoại / tấm trượt ---------- */
.scrim { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; animation: fade 0.18s ease-out; }
.modal {
  width: min(560px, 100%); max-height: min(88dvh, 860px); display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 22px; box-shadow: var(--shadow);
  animation: pop 0.22s var(--ease);
}
.modal.wide { width: min(880px, 100%); }
.modal.xwide { width: min(1100px, 100%); }
.modal-h { display: flex; align-items: center; gap: 10px; padding: 18px 20px 12px; }
.modal-h h3 { font-family: var(--display); font-size: 21px; margin: 0; font-weight: 700; }
.modal-b { padding: 6px 20px 18px; overflow-y: auto; }
.modal-f { padding: 14px 20px 18px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px; row-gap: 8px; align-items: center; }
.grabber { display: none; }
@media (max-width: 767px) {
  .scrim { align-items: flex-end; padding: 0; }
  .modal, .modal.wide, .modal.xwide { width: 100%; max-height: 92dvh; border-radius: 22px 22px 0 0; border-bottom: 0; animation: up 0.26s var(--ease); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .grabber { display: block; width: 42px; height: 5px; border-radius: 9px; background: var(--line-2); margin: 9px auto 0; }
  .modal-h { padding-top: 10px; }
  .modal-f > .btn { flex: 1 1 auto; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
@keyframes up { from { transform: translateY(100%); } }
@keyframes pulse { 50% { opacity: 0.35; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
.spin { animation: spin 0.8s linear infinite; }
.skeleton { border-radius: 12px; background: linear-gradient(90deg, var(--surface) 0%, var(--surface-3) 50%, var(--surface) 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }

/* ---------- Thông báo nổi ---------- */
.toasts { position: fixed; z-index: 120; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
@media (max-width: 767px) { .toasts { left: 12px; right: 12px; bottom: calc(var(--bottom-h) + 12px + env(safe-area-inset-bottom, 0px)); } }
.toast { pointer-events: auto; min-width: 260px; max-width: 420px; padding: 13px 16px; border-radius: 15px; background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: var(--shadow); display: flex; gap: 11px; align-items: flex-start; font-size: 14px; animation: pop 0.22s var(--ease); }
.toast.ok { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.toast.bad { border-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.toast .ti { flex: none; margin-top: 1px; }
.toast.ok .ti { color: var(--ok); } .toast.bad .ti { color: var(--bad); } .toast.info .ti { color: var(--gold); }

/* ---------- Trống / tải ---------- */
.empty { text-align: center; padding: 46px 20px; color: var(--muted); }
.empty .ei { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 20px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); }
.empty h4 { color: var(--text); margin: 0 0 6px; font-size: 16px; }
.loading { display: grid; place-items: center; min-height: 40vh; color: var(--muted); }

/* ---------- Đăng nhập / bàn phím PIN ---------- */
.auth-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(1200px 600px at 50% -10%, rgba(212, 175, 55, 0.14), transparent 60%), var(--bg); }
.auth { width: min(440px, 100%); }
.auth-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 26px; text-align: center; }
.auth-logo .brand-mark { width: 64px; height: 64px; border-radius: 20px; }
.auth-logo h1 { font-family: var(--display); font-size: 30px; margin: 4px 0 0; }
.ornament { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--gold); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; }
.ornament::before, .ornament::after { content: ''; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.ornament::after { transform: scaleX(-1); }
.staff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.staff-btn { border: 1px solid var(--line); background: var(--surface); border-radius: 16px; padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; transition: all 0.18s var(--ease); }
.staff-btn:hover { border-color: var(--gold-lo); transform: translateY(-2px); }
.staff-btn .avatar { width: 48px; height: 48px; border-radius: 15px; font-size: 18px; }
.staff-btn b { font-size: 14px; }
.staff-btn small { color: var(--muted); font-size: 11.5px; }
.pin-dots { display: flex; justify-content: center; gap: 14px; margin: 18px 0 22px; }
.pin-dots i { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--gold-lo); transition: all 0.15s var(--ease); }
.pin-dots i.on { background: var(--gold-grad); border-color: transparent; transform: scale(1.12); box-shadow: 0 0 10px rgba(212, 175, 55, 0.5); }
.pin-dots.shake { animation: shake 0.42s; }
@keyframes shake { 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 320px; margin: 0 auto; }
.pinpad button { height: 66px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); font-size: 24px; font-weight: 600; cursor: pointer; transition: all 0.12s; font-variant-numeric: tabular-nums; }
.pinpad button:hover { border-color: var(--line-2); background: var(--surface-2); }
.pinpad button:active { transform: scale(0.94); background: var(--gold-soft); }
.pinpad button.fn { font-size: 14px; color: var(--muted); background: transparent; border-color: transparent; }

/* ---------- Sơ đồ bàn ---------- */
.floor { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; }
@media (max-width: 767px) { .floor { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.tcard {
  position: relative; min-height: 136px; padding: 14px 15px; border-radius: 20px; cursor: pointer; text-align: left;
  background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px;
  transition: transform 0.16s var(--ease), border-color 0.18s, box-shadow 0.18s; overflow: hidden;
}
.tcard:hover { transform: translateY(-2px); border-color: var(--line-2); }
.tcard:active { transform: scale(0.98); }
.tcard .tn { font-family: var(--display); font-size: 28px; font-weight: 700; line-height: 1; }
.tcard .ts { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.tcard .tm { font-size: 12.5px; color: var(--muted); }
.tcard .tt { margin-top: auto; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.tcard .seats { position: absolute; right: 14px; top: 15px; font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.tcard.free .ts { color: var(--muted); }
.tcard.serving { background: linear-gradient(160deg, color-mix(in srgb, var(--gold) 16%, var(--surface)) 0%, var(--surface) 70%); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.tcard.serving .tn { background: var(--gold-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tcard.serving .ts { color: var(--gold-ink); }
.tcard.bill { background: linear-gradient(160deg, color-mix(in srgb, var(--warn) 18%, var(--surface)), var(--surface) 70%); border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.tcard.bill .ts { color: var(--warn); }
.tcard.reserved { background: linear-gradient(160deg, color-mix(in srgb, var(--info) 14%, var(--surface)), var(--surface) 70%); border-color: color-mix(in srgb, var(--info) 45%, transparent); border-style: dashed; }
.tcard.reserved .ts { color: var(--info); }
.tcard .flags { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; }
/* (1.6.2) Bàn khách đang chờ — xin thanh toán (cam) / gọi nhân viên (đỏ): cả thẻ đổi nền, viền đậm, chữ trạng thái nền đặc,
   nhịp sáng nhẹ quanh thẻ để nhìn lướt sơ đồ là thấy. Máy bật "giảm chuyển động" thì giữ quầng sáng đứng yên. */
:root { --bill-solid: var(--warn); --bill-ink: #1b1407; --call-solid: var(--bad); --call-ink: #1b0a0a; }
:root[data-theme='light'] { --bill-solid: color-mix(in srgb, var(--warn) 82%, #000); --bill-ink: #fff; --call-ink: #fff; }
.tcard.bill, .tcard.calling { --hl: var(--bill-solid); border-color: var(--hl); box-shadow: inset 0 0 0 1px var(--hl); animation: tcard-glow 1.8s ease-in-out infinite; }
.tcard.bill { background: color-mix(in srgb, var(--warn) 34%, var(--surface)); }
.tcard.calling { --hl: var(--call-solid); background: color-mix(in srgb, var(--bad) 30%, var(--surface)); }
.tcard.calling .tn { background: none; color: var(--text); }
.tcard.bill .tm, .tcard.calling .tm, .tcard.bill .seats, .tcard.calling .seats { color: color-mix(in srgb, var(--text) 80%, transparent); }
.tcard.bill .ts .chip { background: var(--bill-solid); color: var(--bill-ink); }
.tcard.calling .ts .chip { background: var(--call-solid); color: var(--call-ink); }
@keyframes tcard-glow { 0%, 100% { box-shadow: inset 0 0 0 1px var(--hl), 0 0 0 0 transparent; } 50% { box-shadow: inset 0 0 0 1px var(--hl), 0 0 0 6px color-mix(in srgb, var(--hl) 32%, transparent); } }
@media (prefers-reduced-motion: reduce) { .tcard.bill, .tcard.calling { animation: none; box-shadow: inset 0 0 0 1px var(--hl), 0 0 0 4px color-mix(in srgb, var(--hl) 26%, transparent); } }
.flag { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; }
.flag.qr { background: var(--violet-bg); color: var(--violet); }
.flag.call { background: var(--bad-bg); color: var(--bad); animation: ring 1.4s infinite; }
.flag.ready { background: var(--ok-bg); color: var(--ok); }
.flag.unsent { background: var(--warn-bg); color: var(--warn); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---------- Màn gọi món ---------- */
.order-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 18px; align-items: start; }
@media (max-width: 1100px) { .order-layout { grid-template-columns: minmax(0, 1fr) 360px; } }
@media (max-width: 767px) { .order-layout { grid-template-columns: minmax(0, 1fr); } }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (max-width: 767px) { .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.mitem {
  position: relative; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: 18px;
  padding: 14px; min-height: 104px; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
  transition: transform 0.12s var(--ease), border-color 0.18s, background 0.18s;
}
.mitem:hover { border-color: var(--gold-lo); }
.mitem:active { transform: scale(0.97); background: var(--gold-soft); }
.mitem .mn { font-weight: 600; font-size: 14.5px; line-height: 1.3; }
.mitem .mfoot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.mitem .mp { font-weight: 700; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.mitem .mchip { height: 20px; font-size: 11px; padding: 0 7px; }
.mitem.out { opacity: 0.45; cursor: not-allowed; }
.mitem.in { border-color: var(--gold-lo); background: linear-gradient(180deg, var(--gold-soft), transparent 75%), var(--surface); }
.mitem .qty-in { position: absolute; top: -7px; right: -7px; min-width: 24px; height: 24px; font-size: 12.5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
.order-panel { position: sticky; top: calc(var(--top-h) + 16px); max-height: calc(100dvh - var(--top-h) - 40px); display: flex; flex-direction: column; padding: 0; }
.op-h { padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.op-b { flex: 1; overflow-y: auto; padding: 6px 0; }
.op-f { padding: 14px 18px 16px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r) var(--r); }
.oline { display: flex; gap: 10px; padding: 11px 18px; align-items: flex-start; }
.oline + .oline { border-top: 1px dashed var(--line); }
.oline .on { font-weight: 600; font-size: 14.5px; }
.oline .oo { font-size: 12.5px; color: var(--muted); }
.oline .op { margin-left: auto; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.oline.cancelled { opacity: 0.5; }
.oline.cancelled .on { text-decoration: line-through; }
.group-h { padding: 10px 18px 4px; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-2); border-radius: 11px; overflow: hidden; flex: none; }
.stepper button { width: 34px; height: 34px; border: 0; background: var(--surface-2); cursor: pointer; display: grid; place-items: center; color: var(--text); }
.stepper button:active { background: var(--gold-soft); }
.stepper span { min-width: 30px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper.lg button { width: 46px; height: 46px; }
.stepper.lg span { min-width: 46px; font-size: 18px; }
.totals .tr { display: flex; justify-content: space-between; font-size: 14px; padding: 2px 0; color: var(--text-2); }
.totals .grand { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.totals .grand b { font-family: var(--display); font-size: 28px; }
.cart-bar { display: none; }
@media (max-width: 767px) {
  .order-panel.desk { display: none; }
  .cart-bar {
    display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(var(--bottom-h) + 10px + env(safe-area-inset-bottom, 0px)); z-index: 35;
    align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 18px; background: var(--surface-2); border: 1px solid var(--gold-lo); box-shadow: var(--shadow);
  }
}
.opt-group { padding: 12px 0; border-bottom: 1px solid var(--line); }
.opt-group:last-child { border-bottom: 0; }
.opt { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--line); margin-top: 8px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.opt.on { border-color: var(--gold); background: var(--gold-soft); }
.opt .mark { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--line-2); display: grid; place-items: center; flex: none; }
.opt.on .mark { background: var(--gold-grad); border-color: transparent; color: var(--on-gold); }
.opt.radio .mark { border-radius: 50%; }

/* ---------- Thanh toán ---------- */
.pay-due { text-align: center; padding: 6px 0 14px; }
.pay-due .v { font-family: var(--display); font-size: 44px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) { .methods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.method { border: 1px solid var(--line); background: var(--surface-2); border-radius: 15px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; font-size: 13px; transition: all 0.15s; }
.method.on { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--gold); }
.quick { display: flex; flex-wrap: wrap; gap: 8px; }
.quick button { flex: 1 1 auto; min-width: 88px; height: 42px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface-2); font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; }
.quick button:active { background: var(--gold-soft); }
.qr-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; border-radius: 18px; background: #fff; color: #111; }
.qr-box canvas, .qr-box img { width: 230px; height: 230px; image-rendering: pixelated; }
.change { text-align: center; padding: 12px; border-radius: 14px; background: var(--ok-bg); color: var(--ok); font-weight: 700; }
.change b { font-family: var(--display); font-size: 26px; display: block; }
.success { text-align: center; padding: 18px 0 8px; }
.success .ring { width: 86px; height: 86px; border-radius: 50%; margin: 0 auto 14px; display: grid; place-items: center; background: var(--gold-grad); color: var(--on-gold); box-shadow: var(--shadow-gold); animation: pop 0.35s var(--ease); }

/* ---------- Màn hình bếp ---------- */
.kds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 1023px) { .kds { grid-template-columns: minmax(0, 1fr); } }
.kcol-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kcol-h h3 { margin: 0; font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; }
.ticket { border-radius: 18px; border: 1px solid var(--line); background: var(--surface); margin-bottom: 12px; overflow: hidden; }
.ticket-h { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.ticket-h .tbl { font-family: var(--display); font-size: 22px; font-weight: 700; }
.ticket.late .ticket-h { background: var(--warn-bg); }
.ticket.very-late .ticket-h { background: var(--bad-bg); }
.kline { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-top: 1px dashed var(--line); cursor: pointer; transition: background 0.15s; }
.kline:first-of-type { border-top: 0; }
.kline:hover { background: var(--surface-2); }
.kline .kq { font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--gold-ink); min-width: 34px; line-height: 1.05; }
.kline .kn { font-weight: 700; font-size: 16px; }
.kline .kx { font-size: 13px; color: var(--text-2); }
.kline .kote { font-size: 13px; color: var(--warn); font-weight: 600; }

/* ---------- Biểu đồ ---------- */
.chart { width: 100%; height: 240px; display: block; }
.chart text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart .grid line { stroke: var(--line); }
.chart .grid line.zero { stroke: var(--line-2); stroke-width: 1.4; }
.chart .bar { fill: url(#goldbar); }
.chart .bar.dim { opacity: 0.35; }
.chart .line { fill: none; stroke: var(--gold); stroke-width: 2.4; }
.chart .line2 { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 4 4; }
.chart .area { fill: url(#goldarea); }
.heat td.h { text-align: center; font-variant-numeric: tabular-nums; font-size: 13px; }
.progress { height: 8px; border-radius: 9px; background: var(--surface-3); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: inherit; background: var(--gold-grad); }

/* ---------- In mã QR bàn (khổ A4) ---------- */
.qr-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.qr-card { border: 1px solid #c9a03a; border-radius: 16px; padding: 16px 12px; text-align: center; background: #fff; color: #1b1407; break-inside: avoid; }
.qr-card .qn { font-family: var(--display); font-size: 30px; font-weight: 700; }
.qr-card canvas { width: 150px; height: 150px; image-rendering: pixelated; }
@media print {
  body { background: #fff !important; }
  .no-print, .sidebar, .topbar, .bottomnav, .toasts { display: none !important; }
  .main { margin: 0 !important; padding: 0 !important; }
  .content { padding: 0 !important; }
  .scrim { position: static; background: none; backdrop-filter: none; padding: 0; display: block; }
  .modal { box-shadow: none; border: 0; max-height: none; width: 100% !important; }
  .modal-h, .modal-f, .grabber { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* Phông tiêu đề (Playfair) mặc định dùng số kiểu cổ (số 9 thòng xuống, số 0 lùn) — với tiền và số bàn,
   số thẳng hàng dễ đọc hơn và trông "sang" hơn. */
.display, .brand-name, .page-title, .stat .v, .input.big, .modal-h h3, .auth-logo h1, .tcard .tn, .totals .grand b,
.pay-due .v, .change b, .ticket-h .tbl, .kline .kq, .qr-card .qn, .gold-text { font-variant-numeric: lining-nums tabular-nums; }

/* ---------- Bản 1.1 ---------- */
.ribbons { display: flex; flex-direction: column; }
.ribbon { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 7px 16px; font-size: 13px; font-weight: 600; text-align: center; line-height: 1.4; border-bottom: 1px solid var(--line); }
.ribbon svg { flex: none; }
.ribbon.pilot { background: var(--info-bg); color: var(--info); }
.ribbon.demo { background: var(--gold-soft); color: var(--gold-ink); }
.ribbon.clock { background: var(--warn-bg); color: var(--warn); }
.flags-list { display: flex; flex-direction: column; gap: 8px; }
.flag-item { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px; line-height: 1.45; }
.flag-item.bad { background: var(--bad-bg); color: var(--bad); }
.flag-item.warn { background: var(--warn-bg); }
.flag-item.warn .fi { color: var(--warn); }
.flag-item.info .fi { color: var(--info); }
.flag-item .fi { flex: none; margin-top: 1px; }
.oline.comp .on::after { content: 'TẶNG'; margin-left: 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; background: var(--violet-bg); color: var(--violet); vertical-align: 2px; }
.strike { text-decoration: line-through; opacity: .6; }
.cust-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-top: 8px; border-radius: 12px; background: var(--surface-2); cursor: pointer; font-size: 13.5px; }
.cust-bar.loyal { background: var(--violet-bg); }
.cust-bar.empty { color: var(--muted); border: 1px dashed var(--line); background: transparent; }
.pay-rows { display: flex; flex-direction: column; gap: 10px; }
.pay-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 36px; gap: 8px; align-items: center; }
@media (max-width: 520px) { .pay-row { grid-template-columns: minmax(0, 1fr) 120px 36px; } }
.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; font-size: 14px; }
.kv > :nth-child(even) { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.kv .sum { border-top: 1px solid var(--line); padding-top: 6px; font-weight: 800; }
.zgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.chk { width: 20px; height: 20px; accent-color: var(--gold); flex: none; }
.unit-toggle { min-width: 92px; }

/* ---------- Trợ lý AI (chỉ chủ quán) ---------- */
/* Khung chat cao đúng màn hình: luồng trò chuyện cuộn bên trong, ô gõ luôn nằm dưới */
.main:has(.ai-wrap) { height: 100dvh; }
.content:has(> .ai-wrap) { display: flex; flex-direction: column; min-height: 0; padding-bottom: 18px; }
.ai-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 18px; }
.ai-side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.ai-convs { flex: 1; min-height: 0; overflow-y: auto; }
.ai-convs .li { min-height: 54px; padding: 10px 8px 10px 14px; gap: 6px; }
.ai-convs .li.on, .list .li.on { background: var(--gold-soft); }
.ai-convs .li.on .t { color: var(--gold-ink); }
.iconbtn { width: 40px; height: 40px; flex: none; display: inline-grid; place-items: center; border-radius: 12px; border: 0; background: transparent; color: var(--muted); cursor: pointer; transition: background 0.15s, color 0.15s; }
.iconbtn:hover { background: var(--surface-3); color: var(--text); }
.linkbtn { background: none; border: 0; padding: 0; color: var(--bad); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ai-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.ai-thread { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 22px 8px; scroll-behavior: smooth; overscroll-behavior: contain; }
.ai-welcome { max-width: 760px; margin: 0 auto; }
.ai-todo .li { min-height: 52px; padding: 10px 12px; }
.ai-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--faint); }
.ai-dot.bad { background: var(--bad); box-shadow: 0 0 0 3px var(--bad-bg); }
.ai-dot.warn { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-bg); }
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-chip { min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; }
.ai-chip:hover { border-color: var(--gold); color: var(--text); }
.ai-chip.outline { background: transparent; border-style: dashed; }
.ai-turn { max-width: 820px; margin: 0 auto 22px; animation: pop 0.22s var(--ease); }
.ai-q { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.ai-bubble { max-width: 80%; padding: 11px 15px; border-radius: 18px 18px 6px 18px; background: var(--gold-soft); border: 1px solid var(--line-2); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.ai-deep { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 999px; background: var(--surface-3); color: var(--gold-ink); font-size: 11.5px; font-weight: 700; vertical-align: 1px; white-space: nowrap; }
.ai-a { display: flex; gap: 12px; align-items: flex-start; }
.ai-av { width: 32px; height: 32px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--gold-grad); color: var(--on-gold); box-shadow: var(--shadow-gold); margin-top: 2px; }
.ai-body { flex: 1; min-width: 0; }
.ai-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ai-tool { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; }
.ai-tool svg { color: var(--ok); flex: none; }
.ai-tool .spin { width: 12px; height: 12px; color: var(--gold); }
.ai-md { line-height: 1.62; overflow-wrap: anywhere; }
.ai-md p { margin: 0 0 9px; }
.ai-md ul, .ai-md ol { margin: 0 0 9px; padding-left: 22px; }
.ai-md li { margin: 3px 0; }
.ai-md li::marker { color: var(--gold); }
.ai-md .ai-h { font-weight: 700; color: var(--gold-ink); margin-top: 12px; }
.ai-md code { font-size: 13px; padding: 1px 6px; border-radius: 6px; background: var(--surface-3); }
.ai-md > :last-child { margin-bottom: 0; }
.ai-meta { margin-top: 8px; font-size: 12px; color: var(--faint); font-variant-numeric: tabular-nums; }
.ai-err { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; padding: 10px 12px; border-radius: 12px; background: var(--bad-bg); color: var(--bad); font-size: 14px; }
.ai-err svg { flex: none; margin-top: 2px; }
.ai-err.soft { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.ai-typing { display: inline-flex; gap: 5px; padding: 10px 2px; }
.ai-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); animation: ai-blink 1.2s infinite ease-in-out; }
.ai-typing span:nth-child(2) { animation-delay: 0.15s; } .ai-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-blink { 0%, 80%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.ai-draft { margin-top: 12px; padding: 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line-2); box-shadow: inset 3px 0 0 var(--gold); }
.ai-draft.applied { box-shadow: inset 3px 0 0 var(--ok); }
.ai-draft.discarded { box-shadow: none; opacity: 0.72; }
.ai-draft-ic { width: 28px; height: 28px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); }
.ai-draft.applied .ai-draft-ic { background: var(--ok-bg); color: var(--ok); }
.ai-draft .table-wrap { margin-bottom: 8px; background: var(--surface); }
.ai-draft .kv { font-size: 14px; }
.ai-draft .kv > b { overflow-wrap: anywhere; }
.ai-t td { padding: 9px 12px; }
.ai-warn { display: flex; gap: 7px; align-items: flex-start; margin-top: 8px; color: var(--warn); font-size: 13px; line-height: 1.45; }
.ai-warn svg { flex: none; margin-top: 2px; }
.ai-composer { padding: 10px 14px 14px; border-top: 1px solid var(--line); background: var(--surface); }
.ai-box { max-width: 820px; margin: 0 auto; border: 1px solid var(--line-2); border-radius: 18px; background: var(--bg-2); transition: border-color 0.15s, box-shadow 0.15s; }
.ai-box:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-soft); }
.ai-input { display: block; width: 100%; min-height: 48px; max-height: 140px; resize: none; border: 0; outline: none; background: transparent; padding: 13px 16px 4px; font-size: 16px; line-height: 1.45; color: var(--text); }
.ai-input::placeholder { color: var(--faint); }
.ai-tools-row { padding: 4px 8px 8px 10px; gap: 6px; }
.ai-toggle { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.ai-toggle.on { background: var(--gold-soft); border-color: var(--gold-lo); color: var(--gold-ink); }
.ai-mic.on { color: var(--bad); background: var(--bad-bg); animation: pulse 1.2s infinite; }
.ai-mic-hint { display: none; }
.ai-setup { max-width: 640px; margin: 24px auto; text-align: center; padding: 30px 24px; }
.ai-setup h3 { font-family: var(--display); font-size: 24px; margin: 12px 0 6px; }
.ai-setup-ic { width: 68px; height: 68px; margin: 0 auto; border-radius: 22px; display: grid; place-items: center; background: var(--gold-grad); color: var(--on-gold); box-shadow: var(--shadow-gold); }
.ai-steps { text-align: left; margin: 12px auto 18px; max-width: 520px; line-height: 1.7; padding-left: 22px; }
.ai-bell { position: relative; display: inline-flex; }
.ai-bell .badge { position: absolute; top: 3px; right: 2px; pointer-events: none; min-width: 18px; height: 18px; font-size: 11px; }
.ai-md .ai-tw { margin: 0 0 9px; }
/* Thông báo nổi không che ô gõ / nút Gửi khi đang ở trang trợ lý */
body:has(.ai-wrap) .toasts { bottom: 132px; }
.ai-engines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ai-engine { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.ai-engine:hover { border-color: var(--gold-lo); }
.ai-engine.on { border-color: var(--gold); background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold); }
.ai-engine b { display: block; margin-bottom: 2px; }
.ai-engine .small { display: block; line-height: 1.4; }
.ai-engine-ic { width: 30px; height: 30px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--gold-ink); }
.ai-engine.on .ai-engine-ic { background: var(--gold-grad); color: var(--on-gold); }
.ai-cli { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--ok-bg); color: var(--text-2); font-size: 13.5px; line-height: 1.5; }
.ai-cli svg { flex: none; margin-top: 2px; color: var(--ok); }
.ai-cli.bad { background: var(--warn-bg); }
.ai-cli.bad svg { color: var(--warn); }
.ai-usage { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--line-2); }
.ai-usage b { font-size: 18px; font-variant-numeric: tabular-nums; }
.ai-goi { width: auto; min-width: 92px; flex: none; }
.ai-setup-ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; text-align: left; margin: 16px 0 18px; }
.ai-setup-ways > div { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface-2); }
.ai-setup-ways ol { margin: 8px 0 6px; padding-left: 20px; line-height: 1.6; }
.ai-setup-ways .chip { height: 22px; font-size: 11.5px; margin-left: 6px; vertical-align: 1px; }
.ai-help { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: var(--gold-soft); color: var(--text-2); line-height: 1.6; }
@media (max-width: 1023px) { .ai-wrap { grid-template-columns: 220px minmax(0, 1fr); gap: 14px; } }
@media (max-width: 767px) {
  .content:has(> .ai-wrap) { padding: 8px 12px 8px; }
  .ai-wrap { grid-template-columns: minmax(0, 1fr); }
  .ai-main { border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .ai-thread { padding: 8px 2px 6px; }
  .ai-composer { border-top: 0; background: transparent; }
  body:has(.ai-wrap) .toasts { bottom: calc(var(--bottom-h) + 118px + env(safe-area-inset-bottom, 0px)); }
  .ai-bubble { max-width: 88%; }
  .ai-a { gap: 9px; }
  .ai-av { width: 28px; height: 28px; border-radius: 9px; }
  .ai-composer { padding: 6px 0 4px; }
  .ai-mic-hint { display: inline; text-align: right; line-height: 1.3; max-width: 120px; }
  .ai-setup { margin: 4px 0; padding: 24px 16px; }
  .ai-engines, .ai-setup-ways { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .ai-turn, .ai-typing span, .ai-mic.on { animation: none; } .ai-thread { scroll-behavior: auto; } }

/* Ô xếp bàn khi đặt bàn (1.4.1): mỗi bàn một ô, màu theo tình trạng ĐÚNG giờ khách đặt */
.tpick { display: grid; gap: 8px; }
.tp-area { margin-top: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.tp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.tp { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; padding: 9px 11px; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); }
.tp:hover { border-color: var(--gold); }
.tp:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.tp.on { border-color: var(--gold); background: var(--gold-soft); box-shadow: 0 0 0 2px var(--gold-soft); }
.tp-none { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.tp-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; width: 100%; }
.tp-top b { font-size: 19px; line-height: 1.1; }
.tp-seat { font-size: 12px; color: var(--text-2); white-space: nowrap; }
.tp-seat.warn, .tp-note { color: var(--warn); }
.tp-note { font-size: 12px; font-weight: 600; }
.tp-sub { width: 100%; font-size: 12.5px; color: var(--text-2); }
.tp-st { display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0; font-size: 12.5px; font-weight: 600; }
.tp-st .dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tp-ok .tp-st { color: var(--ok); }
.tp-warn { background: var(--warn-bg); } .tp-warn .tp-st { color: var(--warn); }
.tp-bad { background: var(--bad-bg); } .tp-bad .tp-st { color: var(--bad); }
.tp-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 2px; }
.tp-li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tp-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.tp-key.ok { background: var(--ok); } .tp-key.warn { background: var(--warn); } .tp-key.bad { background: var(--bad); }
@media (prefers-reduced-motion: reduce) { .tp { transition: none; } }

/* Vốn & tài sản (1.5): khoản đầu tư chia dần vào lãi, dự toán, hoàn vốn, sổ vốn chủ */
.inv-open { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 14px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); font-size: 14px; line-height: 1.45; }
.inv-open > svg { flex: none; color: var(--gold-ink); }
.inv-open.warn { background: var(--warn-bg); border-color: transparent; color: var(--text); }
.inv-open.warn > svg { color: var(--warn); }
.quick button.on { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink); }
.inv-choice { display: flex; flex-wrap: wrap; gap: 8px; }
.inv-choice button { min-height: 40px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2); font-size: 13.5px; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); }
.inv-choice button:hover:not(:disabled) { border-color: var(--gold); }
.inv-choice button.on { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink); }
.inv-choice button:disabled { opacity: 0.45; cursor: not-allowed; }
.inv-prev { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--gold-soft); color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.inv-prev.warn { background: var(--warn-bg); color: var(--text-2); }
.inv-group { margin-top: 18px; }
.inv-group:first-of-type { margin-top: 4px; }
.inv-group-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0 2px 8px; }
.inv-group-h h4 { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.inv-group-h > .money, .inv-group-h > .chip { margin-left: auto; }
.inv-list { display: grid; gap: 10px; }
.inv-item { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.inv-row1 { display: flex; align-items: flex-start; gap: 12px; }
.inv-name { font-weight: 700; font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere; }
.inv-meta { margin-top: 3px; font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.inv-amt { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.inv-amt b { font-size: 16px; }
.inv-sub { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; margin-top: 7px; font-size: 12.5px; color: var(--text-2); }
.inv-end { padding: 8px 11px; border-radius: 10px; background: var(--surface-2); font-size: 13px; line-height: 1.5; color: var(--text-2); }
.inv-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.inv-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.inv-chips .chip { height: 24px; font-size: 12px; }
.inv-acts { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.inv-crow { align-items: flex-start; }
.inv-crow .inv-dir { margin-top: 2px; }
.inv-ctop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.inv-ctop .money { flex: none; }
.inv-cgap { width: 36px; flex: none; }
.progress.lg { height: 12px; }
.inv-big { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; }
.inv-big b { font-family: var(--display); font-size: 30px; line-height: 1.15; }
.inv-eta { margin-top: 12px; padding: 10px 12px; border-radius: 12px; background: var(--gold-soft); color: var(--text-2); font-size: 14px; line-height: 1.55; }
.inv-eta.ok { background: var(--ok-bg); color: var(--text-2); }
.inv-eta.warn { background: var(--warn-bg); color: var(--text-2); }
.inv-brow { display: grid; grid-template-columns: minmax(0, 1fr) 132px 132px 120px 150px; align-items: center; gap: 4px 14px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.inv-brow:last-child { border-bottom: 0; }
.inv-brow.head { padding-top: 9px; padding-bottom: 9px; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--surface-2); }
.inv-brow .r { text-align: right; font-variant-numeric: tabular-nums; }
.inv-brow .nm { min-width: 0; overflow-wrap: anywhere; }
.inv-brow .act { display: flex; justify-content: flex-end; gap: 4px; }
.inv-dir { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; }
.inv-dir.in { background: var(--ok-bg); color: var(--ok); }
.inv-dir.out { background: var(--bad-bg); color: var(--bad); }
.li.off { opacity: 0.6; }
.inv-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 12px; }
.inv-file { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.inv-thumb { display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface-2); cursor: zoom-in; }
.inv-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.inv-thumb .pdf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 100%; font-weight: 800; color: var(--gold-ink); }
.inv-file .x { position: absolute; top: 6px; right: 6px; background: var(--surface); box-shadow: var(--shadow); }
.inv-file .cap { font-size: 12px; color: var(--muted); }
.inv-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 3 / 4; padding: 10px; border: 1.5px dashed var(--line-2); border-radius: 12px; color: var(--gold-ink); text-align: center; cursor: pointer; }
.inv-add:hover { border-color: var(--gold); background: var(--gold-soft); }
.inv-add.busy { opacity: 0.6; cursor: progress; }
.inv-add input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.inv-add:focus-within { outline: 2px solid var(--gold); outline-offset: 2px; }
.inv-add b { color: var(--text); font-size: 13.5px; }
.inv-view img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: 10px; background: #fff; }
@media (max-width: 767px) {
  .inv-item { padding: 13px 14px; }
  .inv-row1 { flex-wrap: wrap; gap: 8px; }
  .inv-amt { flex-direction: row-reverse; align-items: center; justify-content: space-between; width: 100%; }
  .inv-brow { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 12px 14px; }
  .inv-brow.head { display: none; }
  .inv-brow .nm { grid-column: 1 / -1; }
  .inv-brow .r { text-align: left; }
  .inv-brow .r::before { content: attr(data-l); display: block; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
  .inv-brow .act { grid-column: 1 / -1; justify-content: flex-start; }
  .inv-brow .act:empty { display: none; }
  .inv-big b { font-size: 25px; }
  .inv-acts { width: 100%; margin-left: -8px; }
  .inv-acts > .btn:nth-child(2) { margin-right: auto; }
  .inv-cgap { display: none; }
}
@media (prefers-reduced-motion: reduce) { .inv-choice button { transition: none; } }
.inv-months { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.inv-months button { height: 36px; padding: 0 4px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text-2); font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.inv-months button.on { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-ink); }

/* ---------- 1.6 Gọi món ít chạm ---------- */
.mcell { position: relative; display: flex; min-width: 0; }
.mcell > .mitem { flex: 1; min-width: 0; }
.mitem.has-opt .mn { padding-right: 30px; }
.mitem .qty-in { right: auto; left: -7px; }
.mopt { position: absolute; top: 7px; right: 7px; width: 36px; height: 36px; border-radius: 11px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--gold-ink); display: grid; place-items: center; cursor: pointer; z-index: 1; transition: background 0.15s, border-color 0.15s; }
.mopt:hover { border-color: var(--gold-lo); }
.mopt:active { background: var(--gold-soft); transform: scale(0.95); }
.mopt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.quick-pay { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 8px; }
.quick-pay .qp { min-height: 62px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 8px; transition: background 0.15s, border-color 0.15s; touch-action: manipulation; }
.quick-pay .qp b { font-family: var(--display); font-size: 20px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; }
.quick-pay .qp span { font-size: 12px; color: var(--muted); font-weight: 600; }
.quick-pay .qp.exact { border-color: var(--gold); background: var(--gold-soft); }
.quick-pay .qp.exact span { color: var(--gold-ink); }
.quick-pay .qp:hover { border-color: var(--gold-lo); }
.quick-pay .qp:active { transform: scale(0.97); }
.quick-pay .qp:disabled { opacity: 0.55; cursor: progress; }
.paid-banner { position: fixed; z-index: 60; left: calc(var(--nav-w) + 20px); bottom: 20px; width: min(520px, calc(100vw - var(--nav-w) - 40px)); display: flex; align-items: center; gap: 12px; padding: 12px 10px 12px 14px; border-radius: 18px; background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--ok) 55%, transparent); box-shadow: var(--shadow); animation: pop 0.22s var(--ease); }
.paid-banner .pb-ic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok); flex: none; }
.paid-banner .pb-t { font-weight: 700; font-size: 14.5px; }
.paid-banner .pb-change { font-size: 14px; color: var(--ok); font-weight: 700; }
.paid-banner .pb-change b { font-family: var(--display); font-size: 24px; margin-left: 4px; font-variant-numeric: lining-nums tabular-nums; }
/* 1.6.1 Sai cách trả: nút ở dải báo; đang chọn thì viền vàng, các cách trả nằm một hàng dưới tiêu đề */
.paid-banner { width: min(640px, calc(100vw - var(--nav-w) - 40px)); }
.paid-banner .nw { white-space: nowrap; }
.paid-banner .pb-acts { display: flex; align-items: center; gap: 2px; flex: none; }
.paid-banner.picking { flex-wrap: wrap; row-gap: 10px; border-color: color-mix(in srgb, var(--gold) 70%, transparent); }
.paid-banner.picking .pb-ic { background: var(--gold-soft); color: var(--gold-ink); }
.paid-banner .pb-sw { order: 3; flex: 1 1 100%; display: flex; gap: 8px; padding-left: 50px; }
.paid-banner .pb-sw .btn { min-height: 44px; }
@media (max-width: 1279px) { body:has(.paid-banner) .toasts { bottom: 112px; } }
@media (max-width: 767px) {
  .paid-banner { left: 12px; right: 12px; width: auto; bottom: calc(var(--bottom-h) + 10px + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; row-gap: 6px; }
  .paid-banner .grow { flex: 1 1 calc(100% - 100px); min-width: 0; }
  .paid-banner .pb-acts { order: 3; width: 100%; padding-left: 50px; }
  .paid-banner .pb-sw { padding-left: 0; }
  .paid-banner .pb-sw .btn { flex: 1 1 auto; min-width: 0; padding-left: 12px; padding-right: 12px; }
  .paid-banner .pb-sw .btn.ghost { flex: 0 0 auto; }
  body:has(.paid-banner) .toasts { bottom: calc(var(--bottom-h) + 104px + env(safe-area-inset-bottom, 0px)); }
  body:has(.cart-bar) .paid-banner { bottom: calc(var(--bottom-h) + 84px + env(safe-area-inset-bottom, 0px)); }
}
/* Món xong chờ bưng (sơ đồ bàn) */
.ready-strip { margin-bottom: 16px; }
.ready-strip .rs-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.ready-strip .rs-row:first-of-type { border-top: 0; }
.ready-strip .rs-where { font-family: var(--display); font-size: 22px; font-weight: 700; min-width: 64px; line-height: 1.1; }
/* Bếp 1 / 2 bước */
.kds.cols-1 { grid-template-columns: minmax(0, 1fr); }
.kds.cols-1 > section > .kcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.kds.cols-1 > section > .kcards > .ticket { margin-bottom: 0; }
.kds.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1023px) { .kds.cols-2 { grid-template-columns: minmax(0, 1fr); } }
.ticket .kdone { padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.ticket .kdone .btn { width: 100%; min-height: 50px; font-size: 16px; }
.krecent { margin-top: 18px; }
.krecent .kr-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px dashed var(--line); font-size: 14px; }
.krecent .kr-row:first-of-type { border-top: 0; }