/* ═══════════════════════════════════════════════════════════════════════════
   Bida Manager v2 — hệ thống giao diện
   Bộ màu và số đo lấy từ canvas thiết kế đã duyệt.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── Token ──────────────────────────────────────────────────────────────── */

:root, [data-theme="dark"] {
  /* Bảng màu xanh ngọc. Tên biến giữ nguyên từ bảng cũ (--purple, --cyan…) vì
     chúng nằm rải rác trong hàng trăm chỗ; giá trị mới mới là thứ có nghĩa.
     Đọc theo VAI TRÒ chứ đừng đọc theo tên. */
  --bg:         #0b1220;   /* nền trang  */
  --bg2:        #111a2b;   /* nền chìm hơn, dùng cho khối lồng bên trong */
  --fg:         #f8fafc;   /* chữ chính — sáng hơn bảng cũ cho dễ đọc     */
  --card:       #151d2c;   /* mặt thẻ    */
  --card2:      #101827;   /* mặt thẻ chìm */
  --muted-fg:   #94a3b8;   /* chữ phụ — bảng cũ để #64748b, mờ quá        */
  --dim:        #64748b;   /* chữ mờ nhất */
  --border:     rgba(148,163,184,.16);
  --border2:    rgba(148,163,184,.09);
  --input-bg:   rgba(148,163,184,.05);

  --purple:  #10b981;   /* NHẤN CHÍNH — ngọc lục, thay cho tím  */
  --blue:    #38bdf8;
  --cyan:    #38bdf8;   /* ĐANG CHƠI — xanh trời                */
  --green:   #34d399;   /* THÀNH CÔNG — ngọc nhạt               */
  --orange:  #fb923c;   /* TẠM DỪNG, CẢNH BÁO NHẸ               */
  --err:     #ef4444;   /* LỖI, QUÁ GIỜ                         */
  --gold:    #f59e0b;   /* TIỀN — hổ phách                      */

  --grad-brand: linear-gradient(135deg, #10b981 0%, #38bdf8 100%);
  --grad-ok:    linear-gradient(135deg, #34d399 0%, #10b981 100%);
  --grad-warn:  linear-gradient(135deg, #fb923c 0%, #ef4444 100%);
  --grad-gold:  linear-gradient(135deg, #f59e0b 0%, #fb923c 100%);

  --sidebar-w: 240px;
  --header-h:  68px;

  --r-sm: 8px;  --r-md: 11px; --r-lg: 14px;
  --r-xl: 18px; --r-2xl: 24px; --r-full: 9999px;

  --shadow-md: 0 4px 20px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.25);
  --shadow-lg: 0 10px 40px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.30);
}

[data-theme="light"] {
  --bg:       #f4f6fa;
  --bg2:      #ffffff;
  --fg:       #0f172a;
  --card:     #ffffff;
  --card2:    #f8fafc;
  --muted-fg: #64748b;
  --dim:      #94a3b8;
  --border:   rgba(15,23,42,.10);
  --border2:  rgba(15,23,42,.06);
  --input-bg: #ffffff;
  --shadow-md: 0 4px 16px rgba(15,23,42,.08);
  --shadow-lg: 0 12px 36px rgba(15,23,42,.12);
}

body {
  font-family: 'Be Vietnam Pro', system-ui, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: #7dd3fc; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted-fg); }

/* ─── Nút ────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--r-md);
  font-family: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
  cursor: pointer; transition: filter .18s, transform .18s, box-shadow .18s;
  white-space: nowrap;
}
.btn:hover  { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; transform: none; }
.btn-full { width: 100%; }
.btn-lg   { height: 54px; font-size: 15px; }

.btn-brand {
  background: var(--grad-brand); color: #0b1220;
  box-shadow: 0 0 26px rgba(16,185,129,.32);
}
.btn-ok {
  background: var(--grad-ok); color: #022c22;
  box-shadow: 0 0 24px rgba(52,211,153,.28);
}
.btn-warn {
  background: var(--grad-warn); color: #1a0d05;
  box-shadow: 0 0 22px rgba(251,146,60,.28);
}
.btn-outline {
  background: var(--input-bg); border-color: var(--border); color: var(--fg);
}
.btn-outline:hover { border-color: rgba(56,189,248,.4); color: var(--cyan); }

/* Vệt sáng chạy ngang nút chính */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -45%; width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-18deg);
  animation: shine 3.2s ease-in-out infinite;
}
@keyframes shine {
  0%, 62% { left: -45%; }
  100%    { left: 125%; }
}

/* ─── Ô nhập ─────────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 7px; }
.label { font-size: 12px; font-weight: 700; color: rgba(148,163,184,.9); }

.input-wrap {
  display: flex; align-items: center; gap: 11px;
  height: 50px; padding: 0 14px;
  border-radius: 13px; background: var(--input-bg);
  border: 1.5px solid var(--border);
  transition: border-color .18s, box-shadow .18s;
}
.input-wrap:focus-within {
  border-color: var(--purple);
  box-shadow: 0 0 0 4px rgba(16,185,129,.12);
}
.input-wrap svg { flex-shrink: 0; color: var(--muted-fg); }
.input-wrap:focus-within svg { color: var(--purple); }

.input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  font-family: inherit; font-size: 14px; color: var(--fg);
}
.input::placeholder { color: var(--dim); }

/* Ô giờ và ô phút: co đúng bề rộng hai chữ số, không giãn ra như .input thường */
.input.hm { flex: 0 0 auto; width: 2.1em; text-align: center; }
.hm-sep { flex: 0 0 auto; opacity: .5; margin: 0 -5px; }

.eye {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255,255,255,.05); border: none;
  color: var(--muted-fg); cursor: pointer;
}
.eye:hover { color: var(--fg); }

/* ─── Báo lỗi ────────────────────────────────────────────────────────────── */

.alert {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 600;
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.28);
  color: #fca5a5;
  animation: shake .35s ease;
}
.alert svg { flex-shrink: 0; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* ═══ MÀN HÌNH ĐĂNG NHẬP ═════════════════════════════════════════════════ */

.auth { display: flex; min-height: 100vh; }

/* Nửa trái — mặt tiền thương hiệu */
.auth-brand {
  flex: 1 1 58%; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #0f1a2e 0%, #0b1220 55%, #12082a 100%);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 52px 60px;
}
.aurora { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }
.aurora-1 {
  width: 640px; height: 640px; top: -180px; left: -140px;
  background: radial-gradient(circle, rgba(16,185,129,.4), transparent 68%);
  animation: float 18s ease-in-out infinite;
}
.aurora-2 {
  width: 540px; height: 540px; bottom: -190px; right: -120px;
  background: radial-gradient(circle, rgba(56,189,248,.34), transparent 68%);
  animation: float 18s ease-in-out -6s infinite;
}
@keyframes float {
  0%, 100% { transform: translate(0,0) scale(1); }
  33%      { transform: translate(40px,-30px) scale(1.08); }
  66%      { transform: translate(-30px,40px) scale(.95); }
}
.auth-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(148,163,184,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 45% 45%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 65% at 45% 45%, #000 30%, transparent 78%);
}
.brand-row { position: relative; display: flex; align-items: center; gap: 13px; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 13px;
  background: var(--grad-brand);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 26px rgba(16,185,129,.5);
}
.brand-name { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: #f1f5f9; }

/* Logo thật của quán. object-fit cover để ảnh vuông hay chữ nhật đều lấp đầy
   khung mà không bị méo; viền mảnh cho nó tách khỏi nền tối. */
.brand-logo {
  border-radius: 13px; object-fit: cover; flex-shrink: 0;
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 0 22px rgba(16,185,129,.35);
  background: #0b1220;
}

.balls { position: relative; display: flex; justify-content: center; margin: -20px 0; }
.balls svg { overflow: visible; animation: bob 7s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.auth-copy { position: relative; }
.auth-eyebrow {
  font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(56,189,248,.75); margin-bottom: 14px;
}
.auth-headline {
  font-size: 46px; font-weight: 900; line-height: 1.06; letter-spacing: -.035em;
  color: #f8fafc; max-width: 560px; text-wrap: pretty;
}
.grad-text {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-pills { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 30px; }
.pill {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; border-radius: 13px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
}
.pill-k { font-size: 10px; color: var(--muted-fg); font-weight: 600; }
.pill-v { font-size: 15px; font-weight: 800; }
.dot-live {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
  background: var(--cyan); box-shadow: 0 0 10px currentColor;
}

/* Nửa phải — biểu mẫu */
.auth-form {
  flex: 1 1 42%; min-width: 460px; position: relative;
  background: var(--card2); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 62px;
}
.auth-form::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #10b981, #38bdf8, transparent);
}
.auth-title {
  font-size: 33px; font-weight: 900; letter-spacing: -.03em;
  margin: 0 0 8px; color: #f8fafc;
}
[data-theme="light"] .auth-title { color: var(--fg); }
.auth-sub { font-size: 13.5px; color: var(--muted-fg); margin-bottom: 30px; }
.auth-foot {
  position: absolute; bottom: 28px; left: 62px; right: 62px;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: var(--dim);
}

.divider { display: flex; align-items: center; gap: 14px; margin: 4px 0; }
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}
.divider span { font-size: 11px; color: var(--dim); font-weight: 600; }

/* Xuất hiện lần lượt */
.stagger > * {
  opacity: 0; transform: translateY(12px);
  animation: rise .5s cubic-bezier(.22,1,.36,1) forwards;
}
.stagger > *:nth-child(1) { animation-delay: .05s; }
.stagger > *:nth-child(2) { animation-delay: .12s; }
.stagger > *:nth-child(3) { animation-delay: .19s; }
.stagger > *:nth-child(4) { animation-delay: .26s; }
.stagger > *:nth-child(5) { animation-delay: .33s; }
.stagger > *:nth-child(6) { animation-delay: .40s; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

/* ─── Bàn phím PIN ───────────────────────────────────────────────────────── */

/* Khối form căn giữa gọn — hết cảnh nội dung trôi lơ lửng trong panel trống */
.auth-card { width: 100%; max-width: 460px; margin: 0 auto; text-align: center; }
.auth-card .auth-title, .auth-card .auth-sub { text-align: center; }
.auth-card .auth-title { font-size: clamp(30px, 3vw, 46px); }
.auth-card .auth-sub { font-size: clamp(14px, 1.1vw, 17px); }

/* Nhân viên hiện thành viên bi trên bàn — mỗi người một màu như bộ bi */
.who-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px,2vw,34px); margin: clamp(26px,3vw,44px) 0 clamp(22px,2.5vw,34px); }
.who {
  display: flex; flex-direction: column; align-items: center; gap: clamp(10px,1vw,15px);
  width: clamp(96px, 9vw, 148px); padding: 6px; border: none; background: none;
  cursor: pointer; font-family: inherit; border-radius: 16px; transition: transform .14s;
}
.who:hover { transform: translateY(-3px); }
.who:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.who-name { font-size: clamp(13px, 1.05vw, 16px); font-weight: 700; color: var(--muted-fg); }
.who:hover .who-name { color: var(--fg); }

.ball {
  width: clamp(66px, 6.4vw, 108px); height: clamp(66px, 6.4vw, 108px);
  border-radius: 50%; position: relative; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: clamp(24px, 2.6vw, 40px); font-weight: 900; letter-spacing: -.02em;
  box-shadow: inset 0 3px 7px rgba(255,255,255,.45),
              inset 0 -8px 14px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.4);
}
.ball::after {
  content: ''; position: absolute; top: 19%; left: 25%;
  width: 26%; height: 20%; border-radius: 50%;
  background: rgba(255,255,255,.5); filter: blur(2px);
}
.who:hover .ball {
  box-shadow: inset 0 3px 7px rgba(255,255,255,.5),
              inset 0 -8px 14px rgba(0,0,0,.4), 0 12px 24px rgba(16,185,129,.4);
}
.ball-lg { width: clamp(76px, 6.6vw, 104px); height: clamp(76px, 6.6vw, 104px); font-size: clamp(28px, 2.6vw, 40px); }
.ball-0 { background: radial-gradient(circle at 35% 28%, #6ee7b7, #10b981 55%, #065f46); color: #04231a; }
.ball-1 { background: radial-gradient(circle at 35% 28%, #7dd3fc, #0ea5e9 55%, #075985); color: #04212e; }
.ball-2 { background: radial-gradient(circle at 35% 28%, #fcd34d, #f59e0b 55%, #b45309); color: #3a1c00; }
.ball-3 { background: radial-gradient(circle at 35% 28%, #c4b5fd, #8b5cf6 55%, #5b21b6); color: #f5f3ff; }
.ball-4 { background: radial-gradient(circle at 35% 28%, #fda4af, #f43f5e 55%, #9f1239); color: #fff1f2; }
.ball-5 { background: radial-gradient(circle at 35% 28%, #5eead4, #14b8a6 55%, #0f766e); color: #032420; }

/* Màn nhập PIN: người đã chọn hiện ở trên */
.pin-back {
  display: inline-flex; align-items: center; gap: 5px; padding: 0; margin-bottom: 20px;
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--muted-fg);
}
.pin-back:hover { color: var(--fg); }
.pin-who { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 6px; }
.pin-who > div { text-align: left; }
.pin-hi { font-size: 13px; color: var(--muted-fg); line-height: 1; }
.pin-name { font-size: clamp(24px, 2.3vw, 34px); font-weight: 900; letter-spacing: -.02em; color: var(--fg); line-height: 1.15; }

.auth-alt { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted-fg); }

.pin-dots { display: flex; align-items: center; justify-content: center; gap: 16px; }
.pin-dot {
  width: 17px; height: 17px; border-radius: 50%;
  border: 2px solid rgba(100,120,160,.35); background: transparent;
  transition: all .15s;
}
.pin-dot.filled {
  background: var(--purple); border-color: var(--purple);
  box-shadow: 0 0 14px rgba(16,185,129,.9);
}

.keypad { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.key {
  display: flex; align-items: center; justify-content: center;
  height: 66px; border-radius: 16px;
  background: rgba(255,255,255,.045); border: 1.5px solid var(--border);
  font-family: inherit; font-size: 25px; font-weight: 800; color: var(--fg);
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: all .12s;
}
.key:hover  { border-color: rgba(56,189,248,.4); background: rgba(56,189,248,.08); }
.key:active { transform: scale(.96); }
.key-ghost {
  background: transparent; border-color: transparent;
  color: var(--dim); font-size: 12.5px; font-weight: 700;
}
.key-del { background: rgba(239,68,68,.08); border-color: rgba(239,68,68,.25); }

/* ═══ KHUNG APP ══════════════════════════════════════════════════════════ */

.app-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(11,17,32,.86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(56,189,248,.06), 0 2px 8px rgba(0,0,0,.3);
  display: flex; align-items: center;
}
[data-theme="light"] .app-header { background: rgba(255,255,255,.9); }

.header-logo {
  width: var(--sidebar-w); height: var(--header-h); flex-shrink: 0;
  display: flex; align-items: center; gap: 11px; padding: 0 18px;
  border-right: 1px solid var(--border);
}
.header-right {
  margin-left: auto; display: flex; align-items: center; gap: 12px; padding-right: 20px;
}
.chip {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 13px; border-radius: var(--r-md);
  background: var(--input-bg); border: 1px solid var(--border);
  font-size: 12px; font-weight: 600;
}
.chip-live {
  background: rgba(52,211,153,.08); border-color: rgba(52,211,153,.22); color: var(--green);
}

.app-sidebar {
  position: fixed; top: var(--header-h); left: 0; bottom: 0; z-index: 90;
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #0d1a30 0%, #0b1220 100%);
  border-right: 1px solid var(--border);
  padding: 14px 10px; display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
}
[data-theme="light"] .app-sidebar { background: var(--card); }

.side-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .10em;
  color: var(--muted-fg); padding: 12px 12px 6px;
}
.side-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--r-lg);
  font-size: 13px; font-weight: 500; color: var(--muted-fg);
  border: 1px solid transparent; transition: all .18s;
}

/* Mỗi mục một màu riêng, giữ nguyên cả khi chưa được chọn. Năm mục xám như nhau
   thì phải đọc chữ mới biết đang ở đâu; có màu thì liếc một cái là thấy. */
.side-ico {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(148,163,184,.07); border: 1px solid rgba(148,163,184,.12);
  color: var(--muted-fg); transition: all .18s;
}
.side-link:hover { background: rgba(148,163,184,.06); color: var(--fg); }
.side-link:hover .side-ico { transform: translateY(-1px); }

.side-link.c-cyan   .side-ico { background: rgba(56,189,248,.1);  border-color: rgba(56,189,248,.2);  color: var(--cyan); }
.side-link.c-purple .side-ico { background: rgba(16,185,129,.1);  border-color: rgba(16,185,129,.2);  color: var(--purple); }
.side-link.c-orange .side-ico { background: rgba(251,146,60,.1);  border-color: rgba(251,146,60,.2);  color: #fb923c; }
.side-link.c-rose   .side-ico { background: rgba(244,114,182,.1); border-color: rgba(244,114,182,.2); color: #f472b6; }
.side-link.c-green  .side-ico { background: rgba(52,211,153,.1);  border-color: rgba(52,211,153,.2);  color: var(--green); }
.side-link.c-gold   .side-ico { background: rgba(245,158,11,.1);  border-color: rgba(245,158,11,.2);  color: var(--gold); }

.side-link.on { font-weight: 700; color: var(--fg); }
.side-link.on .side-ico { box-shadow: 0 0 14px currentColor; }
.side-link.c-cyan.on   { background: rgba(56,189,248,.1);  border-color: rgba(56,189,248,.26);  color: var(--cyan); }
.side-link.c-purple.on { background: rgba(16,185,129,.11); border-color: rgba(16,185,129,.28); color: var(--purple); }
.side-link.c-orange.on { background: rgba(251,146,60,.1);  border-color: rgba(251,146,60,.26);  color: #fb923c; }
.side-link.c-rose.on   { background: rgba(244,114,182,.1); border-color: rgba(244,114,182,.26); color: #f472b6; }
.side-link.c-green.on  { background: rgba(52,211,153,.1);  border-color: rgba(52,211,153,.26);  color: var(--green); }
.side-link.c-gold.on   { background: rgba(245,158,11,.1);  border-color: rgba(245,158,11,.26);  color: var(--gold); }

.side-badge {
  margin-left: auto; font-size: 10.5px; font-weight: 800;
  padding: 2px 7px; border-radius: 9999px;
  background: rgba(148,163,184,.16); color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.side-badge.warn { background: rgba(251,146,60,.18); color: #fb923c; }
.side-badge[hidden] { display: none; }

/* Tiền đã thu trong ca, ghim dưới đáy thanh bên — luôn nhìn thấy mà không phải
   cuộn trang hay bấm sang đâu. */
.side-money {
  /* Nút thu gọn ở ngay trên đã đẩy cả khối xuống đáy rồi — để cả hai cùng
     margin-top:auto thì chúng chia nhau khoảng trống và tách rời nhau ra. */
  margin-top: 8px; border-radius: 14px; padding: 13px 14px;
  background: linear-gradient(145deg, rgba(245,158,11,.07), rgba(251,146,60,.04));
  border: 1px solid rgba(245,158,11,.18);
}
.side-money-k {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(245,158,11,.75);
}
.side-money-v {
  font-size: 21px; font-weight: 900; color: var(--gold);
  letter-spacing: -.6px; margin-top: 3px;
  text-shadow: 0 0 14px rgba(245,158,11,.35);
}
.side-money-s { font-size: 10.5px; color: var(--muted-fg); margin-top: 4px; }

/* Nút thu gọn thanh bên thành dãy icon */
.side-toggle {
  margin-top: auto; display: flex; align-items: center; gap: 11px;
  padding: 8px 11px; border-radius: var(--r-lg);
  background: none; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 500; color: var(--dim);
  transition: all .18s;
}
.side-toggle:hover { background: rgba(148,163,184,.07); color: var(--fg); }
.side-toggle svg { flex-shrink: 0; width: 30px; transition: transform .22s; }

/* ── Dạng thu gọn: chỉ còn icon ─────────────────────────────────────────
   Tên lớp là side-gon chứ không phải "rail": .rail đã là thanh điều hướng
   trong trang Quản trị (display:flex, rộng 198px). Đặt trùng tên rồi gắn vào
   <body> là biến cả trang thành hộp flex rộng 198px.
   Màn 1500px thì 240px thanh bên chiếm 16% bề ngang mà suốt ngày chỉ nhìn
   một lần lúc chuyển trang. Thu lại còn 62px, chữ ẩn đi, rê chuột lên icon
   thì hiện tên. */
body.side-gon { --sidebar-w: 62px; }
body.side-gon .app-sidebar { padding: 14px 8px; overflow: visible; }
body.side-gon .side-label { display: none; }
body.side-gon .side-link { justify-content: center; padding: 8px 0; gap: 0; position: relative; }
body.side-gon .side-link > span:not(.side-ico):not(.side-badge) { display: none; }
body.side-gon .side-badge {
  position: absolute; top: 2px; right: 4px; margin: 0;
  min-width: 16px; padding: 1px 4px; font-size: 9.5px; line-height: 1.3;
}
body.side-gon .side-toggle { justify-content: center; padding: 8px 0; }
body.side-gon .side-toggle span { display: none; }
body.side-gon .side-toggle svg { transform: rotate(180deg); width: auto; }

/* Thẻ doanh thu co lại còn con số */
body.side-gon .side-money { padding: 9px 6px; text-align: center; }
body.side-gon .side-money-k, body.side-gon .side-money-s { display: none; }
body.side-gon .side-money-v { font-size: 11.5px; letter-spacing: -.3px; margin: 0; }

/* Tên hiện ra khi rê chuột, vì icon không tự nói nó là gì */
body.side-gon .side-link::after {
  content: attr(data-name);
  position: absolute; left: calc(100% + 10px); top: 50%;
  transform: translateY(-50%) translateX(-4px);
  padding: 6px 11px; border-radius: 9px; white-space: nowrap;
  background: var(--card); border: 1px solid var(--border);
  color: var(--fg); font-size: 12px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; z-index: 120;
  transition: opacity .14s, transform .14s;
}
body.side-gon .side-link:hover::after { opacity: 1; transform: translateY(-50%); }

/* Logo trên thanh tiêu đề co theo, giữ thẳng hàng với thanh bên */
body.side-gon .header-logo > div:last-child { display: none; }

/* Trên màn hẹp thanh bên vốn đã là ngăn kéo, đừng thu gọn thêm */
@media (max-width: 1024px) {
  body.side-gon { --sidebar-w: 268px; }
  body.side-gon .app-sidebar { padding: 14px 10px; }
  body.side-gon .side-label,
  body.side-gon .side-link > span,
  body.side-gon .side-toggle span,
  body.side-gon .side-money-k,
  body.side-gon .side-money-s { display: revert; }
  body.side-gon .side-link { justify-content: flex-start; padding: 9px 11px; gap: 11px; }
  body.side-gon .side-link::after { display: none; }
  body.side-gon .side-badge { position: static; margin-left: auto; }
  body.side-gon .side-money-v { font-size: 21px; }
  .side-toggle { display: none; }
}

/* Nút ba gạch chỉ hiện trên màn hình hẹp */
.menu-btn {
  display: none; width: 42px; height: 100%; flex-shrink: 0;
  align-items: center; justify-content: center;
  background: none; border: none; color: var(--muted-fg); cursor: pointer;
}
.side-scrim {
  display: none; position: fixed; inset: 0; z-index: 85;
  background: rgba(3,7,18,.6); backdrop-filter: blur(3px);
}

.app-main {
  margin-left: var(--sidebar-w); padding-top: var(--header-h);
  min-height: 100vh;
}
.page { padding: 24px 28px 40px; }

.page-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.page-icon {
  width: 46px; height: 46px; border-radius: 15px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(16,185,129,.2), rgba(56,189,248,.14));
  border: 1px solid rgba(16,185,129,.3); color: var(--purple);
}
.page-title { font-size: 27px; font-weight: 900; letter-spacing: -.03em; }
.page-sub { font-size: 12.5px; color: var(--muted-fg); margin-top: 3px; }

.card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 20px 22px;
}

/* ─── Trang giữa màn hình (check-in, cài đặt lần đầu) ────────────────────── */

.center-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 40px 20px; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #0f1a2e 0%, #0b1220 55%, #12082a 100%);
}
[data-theme="light"] .center-page { background: var(--bg); }
.center-card {
  position: relative; z-index: 5; width: 100%; max-width: 460px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-2xl); padding: 34px 34px 28px;
  box-shadow: var(--shadow-lg);
}
.center-card.wide { max-width: 560px; }

/* ═══ TRANG QUẢN TRỊ ═════════════════════════════════════════════════════ */

.admin-wrap { display: flex; gap: 16px; align-items: flex-start; }

.rail {
  width: 198px; flex-shrink: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 12px 10px; display: flex; flex-direction: column; gap: 3px;
}
.rail-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 13px;
  font-size: 13px; font-weight: 600; color: var(--muted-fg);
  border: 1px solid transparent; transition: all .18s;
}
.rail-item:hover { background: rgba(16,185,129,.06); color: var(--fg); }
.rail-item.on {
  background: rgba(16,185,129,.11); color: var(--purple);
  border-color: rgba(16,185,129,.26); font-weight: 700;
}
.rail-item svg { flex-shrink: 0; }
.rail-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: var(--muted-fg); padding: 6px 13px 8px;
}

.admin-body { flex: 1; min-width: 0; }

.sec-label {
  font-size: 10.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  color: rgba(148,163,184,.6);
}

/* ─── Bảng ───────────────────────────────────────────────────────────────── */

.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(148,163,184,.6); padding: 0 12px 11px; text-align: left;
}
.tbl td {
  padding: 12px; border-top: 1px solid var(--border2);
  font-size: 12.5px; vertical-align: middle;
}
.tbl tbody tr:hover { background: rgba(255,255,255,.02); }
.right { text-align: right; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--input-bg);
  color: var(--muted-fg); cursor: pointer; transition: all .16s;
}
.icon-btn:hover { color: var(--cyan); border-color: rgba(56,189,248,.4); }
.icon-btn.danger:hover { color: var(--err); border-color: rgba(239,68,68,.45); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-full);
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
}
.badge-vip { background: var(--grad-gold); color: #1a0d05; }
.badge-ok  { background: rgba(52,211,153,.12); color: var(--green); border: 1px solid rgba(52,211,153,.22); }
.badge-warn{ background: rgba(251,146,60,.12); color: var(--orange); border: 1px solid rgba(251,146,60,.24); }
.badge-err { background: rgba(239,68,68,.14); color: var(--err); border: 1px solid rgba(239,68,68,.26); }
.badge-dim { background: rgba(100,120,160,.14); color: var(--muted-fg); }

/* ─── Dải giá 24 giờ ─────────────────────────────────────────────────────── */

.price-strip {
  display: flex; gap: 2px; border-radius: 13px; overflow: hidden; min-height: 62px;
  background: rgba(0,0,0,.25);
}
.price-seg {
  display: flex; flex-direction: column; justify-content: center;
  padding-left: 13px; min-width: 0; overflow: hidden;
  border-left: 3px solid currentColor;
}
.price-seg-h { font-size: 10.5px; font-weight: 700; opacity: .9; white-space: nowrap; }
.price-seg-p { font-size: 15px; font-weight: 900; margin-top: 2px; white-space: nowrap; }
.seg-c0 { background: linear-gradient(160deg,#1e3a5f,#16293f); color: #38bdf8; }
.seg-c1 { background: linear-gradient(160deg,#26313f,#1a222c); color: #94a3b8; }
.seg-c2 { background: linear-gradient(160deg,#4a3410,#2e2009); color: #d97706; }
.seg-c3 { background: linear-gradient(160deg,#331b3f,#22132a); color: #10b981; }
.seg-gap{ background: repeating-linear-gradient(45deg, rgba(100,120,160,.14) 0 6px, transparent 6px 12px); color: #64748b; }

.hour-ticks {
  display: flex; justify-content: space-between;
  font-size: 10px; color: var(--dim); margin-top: 7px; padding: 0 2px;
  font-variant-numeric: tabular-nums;
}

.win-row {
  display: grid; grid-template-columns: 12px 1fr 84px 84px 120px 34px;
  align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  background: rgba(0,0,0,.22); border: 1px solid var(--border2);
}
.win-swatch { width: 10px; height: 30px; border-radius: 4px; }
.mini {
  height: 34px; width: 100%; padding: 0 10px;
  border-radius: 9px; background: var(--input-bg); border: 1px solid var(--border);
  color: var(--fg); font-family: inherit; font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums; outline: none;
}
.mini:focus { border-color: rgba(56,189,248,.5); }
.mini.right { text-align: right; }

.add-dashed {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; border-radius: 12px; width: 100%;
  border: 1.5px dashed rgba(100,120,160,.3); background: none;
  font-family: inherit; font-size: 12.5px; font-weight: 700; color: var(--muted-fg);
  cursor: pointer; transition: all .18s;
}
.add-dashed:hover { border-color: rgba(56,189,248,.45); color: var(--cyan); }

.hint {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: var(--r-md); font-size: 12px; font-weight: 600;
}
.hint-ok  { background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.24); color: #6ee7b7; }
.hint-warn{ background: rgba(251,146,60,.08); border: 1px solid rgba(251,146,60,.26); color: #fdba74; }
.hint-err { background: rgba(239,68,68,.09); border: 1px solid rgba(239,68,68,.28); color: #fca5a5; }

/* ─── Hộp thoại ──────────────────────────────────────────────────────────── */

/* ═══ POPUP ══════════════════════════════════════════════════════════════
   Ba việc để popup nổi hẳn khỏi trang thay vì nằm bẹt trên đó:
   nền sau tối và mờ sâu hơn, mặt popup sáng hơn nền trang, và các khối bên
   trong tối hơn mặt popup. Ba lớp rõ ràng thì mắt biết ngay đâu là nội dung
   chính, đâu là nền. */

.overlay {
  position: fixed; inset: 0; z-index: 200;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(16,185,129,.10), transparent 62%),
    rgba(5,10,18,.84);
  backdrop-filter: blur(10px) saturate(.7);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.overlay.open { display: flex; animation: fadein .22s ease; }
@keyframes fadein { from { opacity: 0; } }

.modal {
  --modal-accent: linear-gradient(90deg, var(--purple), var(--cyan));
  position: relative;
  width: 100%; max-width: 520px; max-height: 88vh; overflow-y: auto;
  background: linear-gradient(168deg, #1c2637 0%, #151d2c 44%, #111825 100%);
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 20px;
  box-shadow:
    0 32px 70px -12px rgba(0,0,0,.75),
    0 0 0 1px rgba(148,163,184,.05),
    inset 0 1px 0 rgba(255,255,255,.07);
  animation: pop .28s cubic-bezier(.2,.9,.3,1.15);
}
[data-theme="light"] .modal {
  background: linear-gradient(168deg, #fff, #f8fafc);
  border-color: rgba(100,120,160,.2);
  box-shadow: 0 30px 60px -14px rgba(15,23,42,.28), inset 0 1px 0 #fff;
}

/* Vệt màu mảnh trên đỉnh, nói ngay popup này để làm gì */
.modal::before {
  content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 2px;
  background: var(--modal-accent); border-radius: 0 0 3px 3px;
  opacity: .9; pointer-events: none;
}
.modal.acc-ok   { --modal-accent: linear-gradient(90deg, var(--green), var(--cyan)); }
.modal.acc-gold { --modal-accent: linear-gradient(90deg, var(--gold), #fb923c); }
.modal.acc-warn { --modal-accent: linear-gradient(90deg, #fb923c, var(--err)); }

.modal.lg { max-width: 720px; }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(.965); } }

/* Đầu và chân popup: chuyển sắc mềm thay vì kẻ một vạch cứng */
.modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 21px 22px 15px;
  border-bottom: 1px solid rgba(148,163,184,.1);
}
.modal-title { font-size: 17.5px; font-weight: 800; letter-spacing: -.015em; }

/* Biểu tượng đầu popup: nói ngay popup này làm gì, trước cả khi đọc chữ */
.modal-ico {
  width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(148,163,184,.1); border: 1px solid rgba(148,163,184,.16);
  color: var(--muted-fg);
}
.modal-ico.ico-ok     { background: rgba(52,211,153,.13);  border-color: rgba(52,211,153,.28);  color: var(--green); }
.modal-ico.ico-gold   { background: rgba(245,158,11,.13);  border-color: rgba(245,158,11,.28);  color: var(--gold); }
.modal-ico.ico-purple { background: rgba(16,185,129,.14);  border-color: rgba(16,185,129,.3);   color: var(--purple); }
.modal-ico.ico-warn   { background: rgba(251,146,60,.13);  border-color: rgba(251,146,60,.28);  color: #fb923c; }

/* Tiêu đề chiếm hết chỗ còn lại, đẩy nút đóng sát mép phải */
.modal-head > div:not(.modal-ico) { flex: 1; min-width: 0; }
.modal-body { padding: 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.modal-foot {
  display: flex; gap: 11px; padding: 15px 22px 20px;
  border-top: 1px solid rgba(148,163,184,.1);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.16));
  border-radius: 0 0 20px 20px;
}

/* Nút chính rộng gấp đôi nút phụ — huỷ và xác nhận không thể nặng ngang nhau */
.modal-foot .btn { flex: 1; height: 46px; }
.modal-foot .btn-brand,
.modal-foot .btn-ok,
.modal-foot .btn-full { flex: 2; }
.modal-foot .btn-outline { background: rgba(148,163,184,.06); }

/* Thanh cuộn trong popup: mảnh và chìm, không cắt ngang bố cục */
.modal::-webkit-scrollbar,
.modal-body::-webkit-scrollbar { width: 9px; }
.modal::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.22); border-radius: 9999px;
  border: 3px solid transparent; background-clip: content-box;
}
.modal::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.4); background-clip: content-box; }
.modal::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track { background: transparent; }

/* Nút đóng ở góc: to hơn cho dễ bấm, sáng lên khi rê chuột */
.modal-head .icon-btn {
  width: 34px; height: 34px; border-radius: 11px;
  background: rgba(148,163,184,.08); border: 1px solid rgba(148,163,184,.14);
}
.modal-head .icon-btn:hover {
  background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.35);
  color: var(--err);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ─── Thông báo nổi ──────────────────────────────────────────────────────── */

.toasts {
  position: fixed; top: 84px; right: 22px; z-index: 300;
  display: flex; flex-direction: column; gap: 9px;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 600; box-shadow: var(--shadow-md);
  background: var(--card); border: 1px solid var(--border);
  animation: slidein .22s cubic-bezier(.22,1.1,.36,1);
}
@keyframes slidein { from { opacity: 0; transform: translateX(20px); } }
.toast-ok  { border-color: rgba(52,211,153,.4); color: var(--green); }
.toast-err { border-color: rgba(239,68,68,.45); color: var(--err); }

.empty-box {
  text-align: center; padding: 48px 24px;
  color: var(--muted-fg); font-size: 13px;
}

/* ═══ LƯỚI BÀN ═══════════════════════════════════════════════════════════ */

.stats-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 14px; margin-bottom: 18px;
}
.stat {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 15px 17px; display: flex; align-items: center; gap: 14px;
}
.stat-ico {
  width: 42px; height: 42px; border-radius: 13px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.stat-k { font-size: 11px; color: var(--muted-fg); font-weight: 500; }
.stat-v {
  font-size: 23px; font-weight: 900; letter-spacing: -.5px;
  font-variant-numeric: tabular-nums; margin-top: 1px;
}

/* Dải cần chú ý */
.attention {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 12px 15px; border-radius: 16px; margin-bottom: 16px;
  background: linear-gradient(100deg, rgba(239,68,68,.08) 0%, rgba(251,146,60,.05) 45%, rgba(19,31,53,.5) 100%);
  border: 1px solid rgba(239,68,68,.2);
}
.att-tag {
  display: flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding-right: 13px; border-right: 1px solid var(--border);
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--err);
}
.att-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 14px 9px 11px; border-radius: 12px;
  font-size: 12px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
}

/* Bộ lọc */
.tabs { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.tab {
  padding: 8px 16px; border-radius: var(--r-full);
  font-family: inherit; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--border); color: var(--muted-fg);
  background: transparent; cursor: pointer; transition: all .18s;
}
.tab:hover { color: var(--fg); }
.tab.on {
  background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(56,189,248,.12));
  border-color: rgba(16,185,129,.4); color: #d1fae5;
}

/* Thẻ bàn */
.tables-grid {
  /* auto-FIT chứ không phải auto-fill: quán 5 bàn trên màn rộng thì auto-fill
     vẫn chừa sẵn cột thứ 6 trống, thẻ dồn hết sang trái. auto-fit bỏ cột trống
     đi nên 5 thẻ giãn ra vừa khít bề ngang. */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
  gap: 16px; align-items: start;
}
/* Quán chỉ có một hai bàn thì đừng giãn thẻ ra cả màn hình */
.tables-grid > .tcard { max-width: 460px; width: 100%; }

.tcard {
  border-radius: var(--r-xl); overflow: hidden;
  display: flex; flex-direction: column; position: relative;
  border: 1.5px solid var(--border);
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.tcard:hover { transform: translateY(-3px); }
.tcard-accent { height: 3px; flex-shrink: 0; }
.tcard-in { padding: 15px 15px 14px; display: flex; flex-direction: column; flex: 1; }

.tcard.is-empty   { background: linear-gradient(145deg,#141b28,#0f1520); border-color: rgba(148,163,184,.12); }
.tcard.is-playing {
  background: linear-gradient(145deg,#0f1e38,#0c1829);
  border-color: rgba(56,189,248,.35);
  box-shadow: 0 0 0 1px rgba(56,189,248,.12), 0 0 22px rgba(56,189,248,.13);
}
.tcard.is-combo {
  background: linear-gradient(145deg,#1a1035,#130c2a);
  border-color: rgba(16,185,129,.4);
  box-shadow: 0 0 0 1px rgba(16,185,129,.12), 0 0 22px rgba(16,185,129,.15);
}
.tcard.is-over {
  background: linear-gradient(145deg,#2a1220,#1a0c18);
  border-color: rgba(239,68,68,.45);
  box-shadow: 0 0 0 1px rgba(239,68,68,.16), 0 0 26px rgba(239,68,68,.2);
}
.tcard.is-paused {
  background: linear-gradient(145deg,#241a12,#17110c);
  border-color: rgba(251,146,60,.38);
}
.tcard.is-maint { background: var(--card2); opacity: .55; }

[data-theme="light"] .tcard.is-empty   { background: #fff; }
[data-theme="light"] .tcard.is-playing { background: linear-gradient(145deg,#f0fdff,#ecfeff); }
[data-theme="light"] .tcard.is-combo   { background: linear-gradient(145deg,#fdfaff,#faf5ff); }
[data-theme="light"] .tcard.is-over    { background: linear-gradient(145deg,#fff5f5,#fef2f2); }
[data-theme="light"] .tcard.is-paused  { background: linear-gradient(145deg,#fffbeb,#fff7ed); }

.tc-name { font-size: 18px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.tc-sub  { font-size: 11px; color: var(--muted-fg); margin-top: 3px; }

.tc-timer {
  font-size: 33px; font-weight: 900; letter-spacing: -1.6px; line-height: 1;
  font-variant-numeric: tabular-nums; color: #fff;
}
[data-theme="light"] .tc-timer { color: var(--fg); }
.tc-tsub { font-size: 10.5px; color: var(--muted-fg); margin-top: 5px; letter-spacing: .03em; }

.tc-box {
  border-radius: 12px; padding: 10px 12px; margin: 10px 0 11px;
  background: rgba(0,0,0,.32); border: 1px solid rgba(245,158,11,.14);
}
[data-theme="light"] .tc-box { background: rgba(248,250,252,.8); border-color: rgba(15,23,42,.06); }
.tc-box-k {
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(148,163,184,.65);
}
.tc-box-v {
  font-size: 25px; font-weight: 900; letter-spacing: -.8px; margin-top: 2px;
  font-variant-numeric: tabular-nums; color: var(--gold);
  text-shadow: 0 0 14px rgba(245,158,11,.45);
}
[data-theme="light"] .tc-box-v { text-shadow: none; color: #b45309; }
.tc-box-d {
  font-size: 10.5px; color: rgba(148,163,184,.7); margin-top: 5px;
  font-variant-numeric: tabular-nums;
}

.tc-main {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; border-radius: 13px; border: none;
  font-family: inherit; font-size: 13.5px; font-weight: 800; letter-spacing: .04em;
  cursor: pointer; transition: filter .18s;
}
.tc-main:hover { filter: brightness(1.08); }

.tc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.tc-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; border-radius: 11px;
  border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.035);
  font-family: inherit; font-size: 11.5px; font-weight: 600; color: rgba(148,163,184,.9);
  cursor: pointer; transition: all .16s; white-space: nowrap;
}
[data-theme="light"] .tc-btn { border-color: var(--border); background: var(--card2); color: var(--muted-fg); }
.tc-btn:hover { background: rgba(56,189,248,.1); border-color: rgba(56,189,248,.35); color: var(--cyan); }
.tc-btn.wide { grid-column: span 2; }
.tc-btn.buy  { border-color: rgba(245,158,11,.28); color: var(--gold); background: rgba(245,158,11,.07); }
.tc-btn.serv { border-color: rgba(16,185,129,.28); color: #34d399; background: rgba(16,185,129,.07); }
.tc-btn.pay  { border-color: rgba(52,211,153,.28); color: var(--green); background: rgba(52,211,153,.07); }
.tc-btn:disabled { opacity: .45; cursor: not-allowed; }

/* Vành combo */
.ring-wrap { position: relative; width: 116px; height: 116px; margin: 0 auto; }
.ring-wrap svg { transform: rotate(-90deg); }
.ring-mid {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ring-v {
  font-size: 27px; font-weight: 900; letter-spacing: -1.2px;
  font-variant-numeric: tabular-nums; color: #fff;
}
[data-theme="light"] .ring-v { color: var(--fg); }
.ring-k {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  margin-top: 2px;
}

/* Nhấp nháy khi combo hết hạn */
.blink { animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .45; } }

/* Danh sách chọn trong hộp thoại */
.pick {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 13px;
  border: 1.5px solid var(--border); background: var(--input-bg);
  cursor: pointer; transition: all .16s; width: 100%; text-align: left;
  font-family: inherit; color: var(--fg);
}
.pick:hover { border-color: rgba(56,189,248,.4); }
.pick.on { border-color: rgba(16,185,129,.55); background: rgba(16,185,129,.1); }
.pick-ico {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.pick-t { font-size: 13px; font-weight: 700; }
.pick-s { font-size: 11px; color: var(--muted-fg); margin-top: 1px; }

.bill-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; padding: 7px 0;
}
/* Số khách phải trả là thứ duy nhất nhân viên đọc to lên cho khách nghe.
   Cho nó một khối riêng viền vàng thay vì lẫn vào dãy dòng chữ phía trên. */
.bill-row.total {
  margin-top: 10px; padding: 13px 15px; border-radius: 14px;
  font-size: 15px; font-weight: 800;
  background: linear-gradient(135deg, rgba(245,158,11,.09), rgba(251,146,60,.05));
  border: 1px solid rgba(245,158,11,.25);
  box-shadow: inset 0 1px 0 rgba(245,158,11,.12);
}
.bill-row.total > span:first-child {
  color: var(--gold); letter-spacing: .05em; font-size: 12.5px;
}
.bill-k { color: var(--muted-fg); }
.bill-v { font-weight: 700; font-variant-numeric: tabular-nums; }

.seg-list {
  background: rgba(0,0,0,.22); border: 1px solid var(--border2);
  border-radius: 12px; padding: 10px 12px;
}
[data-theme="light"] .seg-list { background: var(--card2); }
/* Danh sách món đã ghi vào phiếu, hiện trong popup gọi dịch vụ */
.prev-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 7px;
}
.prev-list { max-height: 168px; overflow-y: auto; display: grid; gap: 5px; }
.prev-line {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 9px;
  background: rgba(148,163,184,.06);
  border: 1px solid var(--border);
}
.prev-n {
  font-size: 12.5px; font-weight: 700; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prev-s { font-size: 10.5px; color: var(--dim); margin-top: 1px; }
.prev-v {
  font-size: 12.5px; font-weight: 800; color: var(--gold);
  flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.prev-btn {
  flex-shrink: 0; width: 25px; height: 25px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(148,163,184,.1); border: 1px solid var(--border);
  color: var(--muted-fg); cursor: pointer; font-size: 15px; font-weight: 800;
  transition: background .15s, color .15s, border-color .15s;
}
.prev-btn:hover { background: rgba(148,163,184,.2); color: var(--fg); }
.prev-btn.danger:hover {
  background: rgba(239,68,68,.16); color: var(--err);
  border-color: rgba(239,68,68,.4);
}
.prev-btn:disabled { opacity: .5; cursor: default; }

/* Lý do lệch két hiện thẳng dưới con số, không giấu trong tooltip — chênh lệch
   tiền mặt là thứ chủ quán cần đọc được ngay, không phải rê chuột lên mới thấy */
.lech-ly-do {
  font-size: 10.5px; color: var(--dim); margin-top: 3px;
  max-width: 240px; margin-left: auto; text-align: right; line-height: 1.45;
}

/* Xếp chồng popup: bấm một giao dịch trong popup ca thì popup chi tiết phải
   nằm trên, không bị popup ca che mất */
#txn-modal { z-index: 320; }

/* Mỗi khu của trang Báo cáo là một tab; ẩn bằng [hidden] chứ không xoá khỏi
   cây, để đổi tab không phải dựng lại biểu đồ. */
.pane[hidden] { display: none; }

/* Chi tiết giờ công theo từng ngày, bung ra dưới mỗi nhân viên */
.day-list {
  display: grid; gap: 3px; margin: 0 14px;
  padding: 9px 12px; border-radius: 10px;
  background: rgba(148,163,184,.06); border: 1px solid var(--border);
}
.day-line {
  display: grid; grid-template-columns: 1fr auto auto auto;
  gap: 16px; align-items: center;
  font-size: 11.5px; color: var(--muted-fg);
  padding: 3px 0; font-variant-numeric: tabular-nums;
}
.day-line > :nth-child(3) { min-width: 92px; text-align: right; color: var(--fg); }
.day-line > :nth-child(4) { min-width: 78px; text-align: right; }

.seg-line {
  display: flex; justify-content: space-between; font-size: 11.5px;
  color: var(--muted-fg); padding: 3px 0; font-variant-numeric: tabular-nums;
}

.pay-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; }
.pay-opt {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 4px; border-radius: 12px;
  border: 1.5px solid var(--border); background: var(--input-bg);
  font-family: inherit; font-size: 11px; font-weight: 700; color: var(--muted-fg);
  cursor: pointer; transition: all .16s;
}
.pay-opt.on { background: rgba(56,189,248,.1); border-color: rgba(56,189,248,.45); color: var(--cyan); }

/* ═══ POPUP GỌI DỊCH VỤ ══════════════════════════════════════════════════ */

/* Hộp thoại cao cố định. Nếu để cao theo nội dung thì lưới sản phẩm bị flex bóp
   lại, thẻ tụt xuống còn vài chục pixel và ảnh bị cắt cụt. */
.modal.svc {
  max-width: 940px;
  height: min(88vh, 780px);
  display: flex; flex-direction: column;
}
.modal.svc .modal-body { flex: 1; min-height: 0; overflow: hidden; }

.svc-layout {
  display: grid; grid-template-columns: 1fr 316px; gap: 16px;
  height: 100%; min-height: 0;
}
.svc-left { display: flex; flex-direction: column; gap: 11px; min-width: 0; min-height: 0; }

.cat-row { display: flex; gap: 7px; flex-wrap: wrap; flex-shrink: 0; }
.cat {
  padding: 6px 13px; border-radius: var(--r-full);
  font-family: inherit; font-size: 11.5px; font-weight: 700;
  border: 1px solid var(--border); color: var(--muted-fg);
  background: transparent; cursor: pointer; transition: all .16s; white-space: nowrap;
}
.cat:hover { color: var(--fg); border-color: rgba(56,189,248,.35); }
.cat.on {
  background: linear-gradient(135deg, rgba(16,185,129,.2), rgba(56,189,248,.14));
  border-color: rgba(16,185,129,.45); color: #d1fae5;
}

.prod-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  grid-auto-rows: max-content;      /* hàng cao theo nội dung, không bị kéo giãn */
  gap: 13px; padding: 3px 5px 3px 3px;
  flex: 1; min-height: 0; overflow-y: auto; align-content: start;
}

.prod {
  /* Thẻ và nền popup gần cùng một sắc thì cả lưới trông trơn lì, mắt không
     tách được từng món. Nền sáng hơn nền popup, viền rõ hơn, và đổ bóng để
     thẻ nổi hẳn lên. */
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(160deg, #1d2838, #151d2c);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 2px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  cursor: pointer; transition: transform .14s, border-color .14s, box-shadow .14s;
  padding: 0; font-family: inherit; text-align: left; color: var(--fg);
  display: flex; flex-direction: column;
}
[data-theme="light"] .prod {
  background: #fff; border-color: rgba(100,120,160,.22);
  box-shadow: 0 2px 8px rgba(15,23,42,.09);
}
.prod:hover {
  transform: translateY(-3px); border-color: rgba(56,189,248,.55);
  box-shadow: 0 10px 26px rgba(0,0,0,.5), 0 0 0 1px rgba(56,189,248,.2);
}
.prod:active { transform: scale(.97); }
.prod.picked { border-color: rgba(16,185,129,.6); box-shadow: 0 0 0 1px rgba(16,185,129,.3); }

/* Hết hàng: làm xám và mờ đi, không tô đỏ chói cả màn hình */
.prod.out { opacity: .5; cursor: not-allowed; filter: grayscale(.7); }
.prod.out:hover { transform: none; box-shadow: none; border-color: var(--border); }

.prod-thumb {
  /* Ảnh sản phẩm của quán là ảnh chai đứng. Khung ngang thấp cộng object-fit
     cover thì cắt mất đầu và đáy chai, chỉ còn khúc giữa — nhìn chai nào cũng
     na ná nhau. Khung vuông cộng contain thì thấy trọn chai, thừa ra hai bên
     là chuyện nhỏ. */
  aspect-ratio: 1 / 1; width: 100%; flex-shrink: 0;
  position: relative; overflow: hidden; padding: 7px;
  background: #0c1420;
  border-bottom: 1px solid rgba(148,163,184,.14);
  display: flex; align-items: center; justify-content: center;
}
[data-theme="light"] .prod-thumb {
  background: #f8fafc; border-bottom-color: rgba(100,120,160,.16);
}
.prod-thumb img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block;
}
.prod-letter { font-size: 30px; font-weight: 900; color: rgba(148,163,184,.3); }

.prod-body {
  padding: 9px 10px 10px; display: flex; flex-direction: column;
  gap: 3px; flex: 1; justify-content: space-between;
}
.prod-name {
  font-size: 12px; font-weight: 700; line-height: 1.3; color: var(--fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.prod-price {
  font-size: 13px; font-weight: 900; color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.prod-stock {
  position: absolute; bottom: 6px; right: 6px;
  padding: 2px 7px; border-radius: var(--r-full);
  font-size: 9.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  backdrop-filter: blur(6px);
}
.stock-ok  { background: rgba(15,23,42,.72);  color: #6ee7b7; }
.stock-low { background: rgba(217,119,6,.92); color: #fffbeb; }
.stock-out { background: rgba(30,41,59,.85);  color: #94a3b8; }

/* Số lượng đang có trong giỏ, đè lên góc ảnh */
.prod-qty {
  position: absolute; top: 6px; left: 6px;
  min-width: 25px; height: 25px; padding: 0 6px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand); color: #0b1220;
  font-size: 12.5px; font-weight: 900; font-variant-numeric: tabular-nums;
  box-shadow: 0 0 14px rgba(16,185,129,.7);
  animation: pop .2s cubic-bezier(.22,1.2,.36,1);
}

/* ─── Giỏ tạm ────────────────────────────────────────────────────────────── */

.svc-cart {
  display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: rgba(0,0,0,.24); border: 1px solid var(--border);
  border-radius: 16px; padding: 14px;
}
[data-theme="light"] .svc-cart { background: var(--card2); }

.svc-cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 11px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.svc-cart-list {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: 7px; padding: 10px 0;
}

.cart-line {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 12px;
  background: var(--card); border: 1px solid var(--border2);
  animation: pop .18s cubic-bezier(.22,1.2,.36,1);
}
.cart-thumb {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  object-fit: cover; background: var(--card2); border: 1px solid var(--border);
  display: block;
}
.cart-thumb-ph {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--card2); border: 1px solid var(--border);
  font-size: 14px; font-weight: 900; color: rgba(148,163,184,.45);
}
.cart-name {
  font-size: 11.5px; font-weight: 700; line-height: 1.25; color: var(--fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cart-unit { font-size: 10.5px; color: var(--muted-fg); font-variant-numeric: tabular-nums; margin-top: 1px; }
.cart-sum {
  font-size: 12px; font-weight: 800; color: var(--gold);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.step {
  width: 25px; height: 25px; border-radius: 8px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--input-bg); border: 1px solid var(--border);
  color: var(--muted-fg); font-family: inherit; font-size: 15px; font-weight: 800;
  cursor: pointer; line-height: 1;
}
.step:hover { color: var(--cyan); border-color: rgba(56,189,248,.45); }
.step.del { color: var(--err); border-color: rgba(239,68,68,.28); }

.svc-cart-foot { padding-top: 12px; border-top: 1px solid var(--border); flex-shrink: 0; }

/* Chấm +1 bay vào giỏ */
.fly {
  position: fixed; width: 30px; height: 30px; border-radius: 50%;
  background: var(--grad-brand); color: #0b1220;
  font-size: 12px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; pointer-events: none;
  box-shadow: 0 2px 14px rgba(16,185,129,.7);
}

/* Ảnh nhỏ trong bảng quản trị */
.thumb-sm {
  width: 38px; height: 38px; border-radius: 9px; object-fit: cover;
  border: 1px solid var(--border); background: var(--card2); display: block;
}
.thumb-ph {
  width: 38px; height: 38px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: var(--card2);
  font-size: 15px; font-weight: 900; color: rgba(148,163,184,.4);
}

/* ═══ HIỆU ỨNG THAO TÁC ══════════════════════════════════════════════════ */
/* Mạng lag thì nhân viên phải thấy máy đang làm việc, không được im lìm.   */

/* Nút đang chờ máy chủ */
.is-busy { position: relative; pointer-events: none; color: transparent !important; }
.is-busy > * { opacity: 0; }
.is-busy::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px;
  border: 2.5px solid currentColor; border-top-color: transparent;
  border-radius: 50%; opacity: .85;
  animation: spin .62s linear infinite;
  color: var(--cyan);
}
.tc-main.is-busy::after,
.btn-brand.is-busy::after,
.btn-ok.is-busy::after { color: #05221a; width: 20px; height: 20px; margin: -10px 0 0 -10px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Thẻ đang chờ máy chủ — mờ nhẹ và có vệt sáng quét ngang */
.tcard.busy { position: relative; }
.tcard.busy::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.09) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: sweep 1.1s ease-in-out infinite;
}
@keyframes sweep {
  0%   { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}

/* Vòng sáng lan ra từ thẻ khi thao tác xong */
.ripple {
  position: absolute; inset: -2px; border-radius: var(--r-xl);
  pointer-events: none; z-index: 4;
  border: 2px solid currentColor; opacity: .9;
  animation: ripple .62s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes ripple {
  to { transform: scale(1.06); opacity: 0; }
}

/* Mảnh lửa bắn ra khi mở bàn */
.spark {
  position: fixed; width: 8px; height: 8px; border-radius: 50%;
  z-index: 9998; pointer-events: none;
}

/* Thẻ vừa mở bàn — nảy lên một nhịp */
.pop-in { animation: popin .45s cubic-bezier(.2,1.3,.4,1); }
@keyframes popin {
  0%   { transform: scale(.9); }
  55%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}

/* Đồng hồ nhấp một cái khi cộng thêm tiền */
.bump { animation: bump .34s cubic-bezier(.2,1.4,.4,1); }
@keyframes bump {
  0%, 100% { transform: scale(1); }
  45%      { transform: scale(1.11); }
}

/* Thẻ chuyển sang tạm dừng — xám dần */
.fade-pause { animation: fadepause .5s ease forwards; }
@keyframes fadepause {
  from { filter: saturate(1); }
  to   { filter: saturate(.35); }
}

/* Khung xương lúc tải lần đầu */
.skel {
  border-radius: var(--r-xl); height: 300px;
  background: linear-gradient(100deg, var(--card) 30%, rgba(255,255,255,.05) 50%, var(--card) 70%);
  background-size: 220% 100%;
  animation: sweep 1.3s ease-in-out infinite;
  border: 1px solid var(--border);
}

/* Chấm báo mất kết nối */
.offline-tag {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--r-full);
  background: rgba(251,146,60,.12); border: 1px solid rgba(251,146,60,.3);
  font-size: 11.5px; font-weight: 700; color: var(--orange);
}

/* ═══ POPUP NHÂN VIÊN ════════════════════════════════════════════════════ */

.me-pop {
  position: fixed; top: calc(var(--header-h) + 8px); right: 20px; z-index: 210;
  width: 340px; padding: 18px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  display: none;
  animation: pop .2s cubic-bezier(.22,1.1,.36,1);
}
.me-pop.open { display: block; }
.me-pop::before {
  content: ''; position: absolute; top: -6px; right: 92px;
  width: 11px; height: 11px; transform: rotate(45deg);
  background: var(--card); border-left: 1px solid var(--border); border-top: 1px solid var(--border);
}

.me-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; font-size: 12.5px;
}
.me-k { color: var(--muted-fg); }
.me-v { font-weight: 700; font-variant-numeric: tabular-nums; }

.me-stat {
  padding: 12px 14px; border-radius: 13px;
  background: rgba(0,0,0,.24); border: 1px solid var(--border2);
}
[data-theme="light"] .me-stat { background: var(--card2); }
.me-stat-k { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-fg); }
.me-stat-v { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; margin-top: 2px; }

.me-hist {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; font-size: 11.5px; border-top: 1px solid var(--border2);
  font-variant-numeric: tabular-nums;
}

.chip-btn { cursor: pointer; transition: border-color .16s, background .16s; }
.chip-btn:hover { border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.06); }

/* ═══ BÁN LẺ ═════════════════════════════════════════════════════════════ */

.retail-wrap { display: grid; grid-template-columns: 1fr 372px; gap: 18px; align-items: start; }

.quick-row { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; margin-bottom: 20px; }
.quick {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 8px 11px; border-radius: 15px; cursor: pointer;
  background: linear-gradient(150deg, rgba(56,189,248,.1), rgba(16,185,129,.06));
  border: 1.5px solid rgba(56,189,248,.28);
  font-family: inherit; color: var(--fg); transition: transform .14s, box-shadow .14s;
}
.quick:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(56,189,248,.16); }
.quick:active { transform: scale(.96); }
.quick-img {
  width: 46px; height: 46px; border-radius: 12px; object-fit: cover;
  background: var(--card2); border: 1px solid var(--border);
}
.quick-nm {
  font-size: 11.5px; font-weight: 700; text-align: center; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.quick-pr { font-size: 11.5px; font-weight: 800; color: var(--cyan); font-variant-numeric: tabular-nums; }

.retail-cart {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 17px 18px; position: sticky; top: calc(var(--header-h) + 18px);
  display: flex; flex-direction: column; max-height: calc(100vh - var(--header-h) - 40px);
}
.retail-cart-list {
  flex: 1; min-height: 90px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 7px; padding: 11px 0;
}
.pay-line {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 15px; border-radius: 14px; margin: 12px 0;
  background: linear-gradient(135deg, rgba(245,158,11,.1), rgba(251,146,60,.05));
  border: 1px solid rgba(245,158,11,.24);
}

/* ═══ KHO HÀNG ═══════════════════════════════════════════════════════════ */

.bar-track {
  height: 7px; border-radius: var(--r-full);
  background: rgba(100,120,160,.16); overflow: hidden;
}
.bar-fill { height: 100%; border-radius: var(--r-full); transition: width .3s; }

.inv-row-low  { background: linear-gradient(90deg, rgba(251,146,60,.07), transparent 60%); }
.inv-row-out  { background: linear-gradient(90deg, rgba(239,68,68,.08), transparent 60%); }
.inv-row-low td:first-child { border-left: 3px solid var(--orange); }
.inv-row-out td:first-child { border-left: 3px solid var(--err); }

.count-input {
  width: 78px; height: 34px; padding: 0 9px; text-align: right;
  border-radius: 9px; background: var(--input-bg); border: 1.5px solid rgba(56,189,248,.35);
  color: var(--fg); font-family: inherit; font-size: 13px; font-weight: 800;
  font-variant-numeric: tabular-nums; outline: none;
}
.count-input:focus { border-color: var(--cyan); }
.diff-tag {
  font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums;
  padding: 2px 8px; border-radius: var(--r-full);
}

/* ═══ SỔ NỢ ══════════════════════════════════════════════════════════════ */

.age-bar { display: flex; height: 34px; border-radius: 11px; overflow: hidden; gap: 2px; }
.age-seg {
  display: flex; align-items: center; padding-left: 13px;
  font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums;
  min-width: 0; overflow: hidden; white-space: nowrap;
}

.debt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.debt-card {
  border-radius: var(--r-xl); padding: 16px 17px; position: relative; overflow: hidden;
  border: 1.5px solid var(--border); background: var(--card);
}
.debt-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
.debt-fresh { border-color: rgba(22,163,74,.32); }
.debt-fresh::before { background: linear-gradient(90deg,#16a34a,#38bdf8); }
.debt-warn  { border-color: rgba(217,119,6,.38); background: linear-gradient(150deg,#241a12,#16111d); }
.debt-warn::before { background: linear-gradient(90deg,#d97706,#f59e0b); }
.debt-old   { border-color: rgba(239,68,68,.4); background: linear-gradient(150deg,#2a1216,#16111d); box-shadow: 0 0 22px rgba(239,68,68,.1); }
.debt-old::before { background: linear-gradient(90deg,#ef4444,#fb923c); }
[data-theme="light"] .debt-warn { background: #fffbeb; }
[data-theme="light"] .debt-old  { background: #fef2f2; }

.age-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-full);
  font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}

.timeline { display: flex; align-items: center; }
.tl-node { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 92px; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.tl-line { flex: 1; height: 2px; min-width: 18px; }

/* ═══ KẾT CA ═════════════════════════════════════════════════════════════ */

.den-row {
  display: grid; grid-template-columns: 96px 1fr 112px; align-items: center; gap: 11px;
  padding: 7px 0; border-bottom: 1px solid var(--border2);
}
.den-row:last-child { border-bottom: none; }
.den-val { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.den-qty {
  width: 52px; height: 34px; border-radius: 9px; text-align: center;
  background: rgba(0,0,0,.3); border: 1px solid rgba(100,120,160,.24);
  color: var(--fg); font-family: inherit; font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums; outline: none;
}
[data-theme="light"] .den-qty { background: var(--card2); }
.den-qty:focus { border-color: var(--cyan); }
.den-sum { text-align: right; font-size: 13.5px; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }

.recon { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.recon-box { padding: 16px 18px; border-radius: 15px; background: rgba(0,0,0,.25); border: 1px solid var(--border2); }
[data-theme="light"] .recon-box { background: var(--card2); }
.recon-k { font-size: 11px; color: var(--muted-fg); font-weight: 600; }
.recon-v { font-size: 27px; font-weight: 900; letter-spacing: -.8px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.recon-diff-bad {
  background: linear-gradient(150deg, rgba(239,68,68,.14), rgba(239,68,68,.05));
  border: 1.5px solid rgba(239,68,68,.45);
}
.recon-diff-ok {
  background: linear-gradient(150deg, rgba(22,163,74,.14), rgba(22,163,74,.05));
  border: 1.5px solid rgba(52,211,153,.4);
}

.reason-chip {
  padding: 7px 13px; border-radius: var(--r-full);
  font-family: inherit; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--border); color: var(--muted-fg);
  background: transparent; cursor: pointer;
}
.reason-chip.on { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.4); color: #fca5a5; }

/* ═══ BÁO CÁO ════════════════════════════════════════════════════════════ */

/* Màu biểu đồ đã kiểm định cho cả ba dạng mù màu trên nền #131f35 */
.chart-cash     { background: #0891b2; }
.chart-transfer { background: #d97706; }
.chart-debt     { background: #9333ea; }
.chart-table    { background: #0891b2; }
.chart-retail   { background: #9333ea; }

.chart-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl); padding: 18px 22px; }
.chart-title { font-size: 13.5px; font-weight: 800; }
.chart-note { font-size: 11.5px; color: var(--muted-fg); margin-top: 2px; }
.axis { font-size: 9.5px; fill: #64748b; font-variant-numeric: tabular-nums; }
.legend { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted-fg); }
.legend i { width: 11px; height: 11px; border-radius: 3px; display: block; }

.mix-bar { display: flex; height: 42px; border-radius: 10px; overflow: hidden; gap: 2px; }
.mix-seg { display: flex; align-items: center; padding-left: 13px; font-size: 13px; font-weight: 900; }

.delta-tag {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: var(--r-full);
}
.delta-up   { background: rgba(22,163,74,.16); color: var(--green); }
.delta-down { background: rgba(239,68,68,.16); color: var(--err); }

/* Dòng giao dịch bấm được trong báo cáo */
.txn-row { transition: background .14s; }
.txn-row:hover { background: rgba(56,189,248,.07) !important; }
.txn-row:hover td:first-child { box-shadow: inset 3px 0 0 var(--cyan); }


/* ═══ MÀN HÌNH HẸP ═══════════════════════════════════════════════════════
   Chủ quán xem báo cáo bằng điện thoại khi không ở nhà. Thanh bên cố định
   240px chiếm quá nửa màn hình 390px, nên nó phải thu vào thành ngăn kéo.
   Đặt ở cuối file để đè lên mọi khai báo phía trước. */

/* ── Máy tính bảng và điện thoại: thanh bên thành ngăn kéo ───────────── */
@media (max-width: 1024px) {
  .menu-btn { display: flex; }

  .app-sidebar {
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 12px 0 32px rgba(0, 0, 0, .5);
    width: 268px;
  }
  body.side-open .app-sidebar { transform: none; }
  body.side-open .side-scrim { display: block; }

  .app-main { margin-left: 0; }
  .page { padding: 18px 16px 32px; }

  /* Ô tìm kiếm và nhãn dài không còn chỗ */
  .header-logo { width: auto; border-right: none; padding: 0 12px 0 4px; }
  .header-right { gap: 8px; padding-right: 12px; }

  /* Trang bán lẻ: giỏ hàng xuống dưới thay vì nằm cạnh */
  .retail-wrap { grid-template-columns: 1fr; }
  .quick-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Điện thoại ──────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .page { padding: 14px 12px 90px; }

  /* Thanh tiêu đề: bỏ tên nhân viên và đồng hồ ca, giữ lại nút bấm */
  .app-header .header-logo > div:last-child > div:last-child { display: none; }
  .chip-live span:not(.dot-live) { display: none; }
  .chip-live { padding: 0 10px; }
  #me-chip span { display: none; }
  #me-chip { padding: 0 6px; }
  .btn-warn span { display: none; }

  .page-title { font-size: 21px; }
  .page-sub { font-size: 11.5px; }
  .page-icon { width: 38px; height: 38px; border-radius: 12px; }
  .page-icon svg { width: 17px; height: 17px; }

  /* Thẻ số liệu: hai cột thay vì bốn, chữ nhỏ lại */
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .stat { padding: 12px 13px; gap: 10px; }
  .sico, .stat-ico { width: 34px; height: 34px; border-radius: 11px; }
  .stat-v, .sval { font-size: 18px; }

  /* Lưới bàn: một cột, thẻ không bị chặn bề ngang nữa */
  .tables-grid { grid-template-columns: 1fr; gap: 12px; }
  .tables-grid > .tcard { max-width: none; }

  /* Mọi lưới hai cột xếp dọc lại */
  .grid-2 { grid-template-columns: 1fr !important; }
  .quick-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Popup chiếm gần trọn màn hình, nút bấm to cho ngón tay */
  .overlay { padding: 0; align-items: flex-end; }
  .modal, .modal.lg {
    max-width: none; width: 100%; max-height: 92vh;
    border-radius: 22px 22px 0 0;
  }
  /* Trượt lên từ đáy thì chân popup chạm mép màn hình, đừng bo góc dưới */
  .modal-foot { border-radius: 0; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .modal { animation: truot-len .26s cubic-bezier(.2,.9,.3,1.05); }
  @keyframes truot-len { from { transform: translateY(40px); opacity: .4; } }
  .modal-foot .btn { height: 46px; }

  /* Bảng xếp thành thẻ dọc — xem bên dưới. Không đặt min-width ở đây: bộ chọn
     :has() bọc ngoài không khớp mọi cách lồng thẻ, và khi nó trượt thì bảng đẩy
     rộng cả trang, kéo tiêu đề lẫn nội dung lệch sang trái. */

  /* Tab kỳ báo cáo trượt ngang thay vì xuống dòng lộn xộn */
  .tabs {
    overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab { flex-shrink: 0; }

  /* Popup nhân viên bám mép phải màn hình */
  .me-pop { left: 10px; right: 10px; width: auto; }

  /* Biểu đồ thấp lại cho vừa màn */
  .chart-card { padding: 14px 13px; }
}

/* ── Điện thoại nhỏ ──────────────────────────────────────────────────── */
@media (max-width: 360px) {
  .quick-row { grid-template-columns: 1fr 1fr; }
  .page-title { font-size: 19px; }
}

/* Máy cảm ứng: bỏ hiệu ứng nhấc thẻ lên, vì không có con trỏ để rê */
@media (hover: none) {
  .tcard:hover { transform: none; }
  .side-link:hover .side-ico { transform: none; }
}


/* ═══ BẢNG TRÊN MÀN HÌNH HẸP ═════════════════════════════════════════════
   Bảng 8 cột trên màn 390px thì phải kéo ngang mới đọc hết, mà kéo ngang trong
   một trang dọc là thao tác rất khó chịu. Bỏ hàng tiêu đề đi, mỗi dòng thành
   một thẻ, mỗi ô tự mang nhãn cột của nó qua thuộc tính data-th. */

@media (max-width: 700px) {
  .tbl thead { display: none; }

  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: auto; }

  .tbl tr {
    background: rgba(148,163,184,.05);
    border: 1px solid var(--border);
    border-radius: 13px;
    padding: 11px 13px;
    margin-bottom: 9px;
  }
  .tbl tr:last-child { margin-bottom: 0; }

  .tbl td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 4px 0; border: none; text-align: left !important;
    min-height: 26px;
  }
  .tbl td::before {
    content: attr(data-th);
    flex-shrink: 0;
    font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--dim);
  }
  /* Ô không có nhãn (ảnh, nút bấm) thì trải rộng cho thoáng */
  .tbl td:not([data-th])::before { content: none; }
  .tbl td[data-lead] {
    justify-content: flex-start; font-size: 14px; font-weight: 800;
    padding-bottom: 8px; margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
  }
  .tbl td[data-actions] { justify-content: flex-end; padding-top: 8px; gap: 8px; }

  /* Dòng "đang tải" / "chưa có gì" trải hết chiều ngang */
  .tbl td.empty-box { display: block; text-align: center !important; }
  .tbl td.empty-box::before { content: none; }

  /* Bảng hai cột nhãn–giá trị đã vừa màn rồi, giữ nguyên dạng bảng */
  .tbl.pair, .tbl.pair thead { display: table; width: 100%; }
  .tbl.pair tbody { display: table-row-group; }
  .tbl.pair tr {
    display: table-row; padding: 0; margin: 0; background: none;
    border: none; border-bottom: 1px solid var(--border);
  }
  .tbl.pair td { display: table-cell; padding: 9px 4px; }
  .tbl.pair td::before { content: none; }

  /* Ảnh sản phẩm và biểu đồ mini: nằm ngang hàng tên, không cần nhãn riêng */
  .tbl td.cell-thumb { position: absolute; right: 13px; margin-top: -2px; padding: 0; }
  .tbl tr { position: relative; }
  .tbl td.cell-thumb + td[data-lead] { padding-right: 54px; }
  .tbl td.cell-spark { display: none; }
  .tbl td.cell-bar { flex-direction: column; align-items: stretch; gap: 5px; }
  .tbl td.cell-bar::before { align-self: flex-start; }
  .tbl td.cell-label {
    max-width: none !important; white-space: normal !important;
    overflow: visible !important; line-height: 1.4;
  }
}

/* Không bao giờ để cả trang trượt ngang. Thứ gì quá rộng thì tự cuộn trong
   khung của nó, chứ không được đẩy tiêu đề và thanh bên lệch đi. */
html, body { overflow-x: hidden; max-width: 100%; }
.page { min-width: 0; max-width: 100%; }


/* ═══ BÁN LẺ TRÊN ĐIỆN THOẠI ═════════════════════════════════════════════
   Giỏ hàng nằm cạnh danh sách món thì trên màn hẹp nó bị đẩy xuống tận đáy —
   chọn một món xong phải cuộn cả trang mới thấy giỏ. Nay giỏ thành ngăn kéo
   trượt từ phải, mở bằng nút tròn nổi luôn hiện ở góc. */

.cart-fab {
  display: none;
  position: fixed; right: 16px; bottom: 18px; z-index: 150;
  height: 56px; padding: 0 20px 0 16px; border-radius: 9999px;
  align-items: center; gap: 11px;
  background: var(--grad-brand); color: #0b1220;
  border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 800;
  box-shadow: 0 8px 26px rgba(16,185,129, .45);
  transition: transform .16s;
}
.cart-fab:active { transform: scale(.95); }
.cart-fab .fab-n {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(11, 17, 32, .28); font-size: 12px; font-variant-numeric: tabular-nums;
}
/* Chân thẻ số liệu: nhãn so sánh và ghi chú */
.stat-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

@media (max-width: 700px) {
  /* Hai dòng phụ chen nhau trên màn hẹp thì chữ nào cũng xuống dòng giữa từ */
  .stat-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* Hàng tìm kiếm và lọc danh mục */
.find-row { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }

@media (max-width: 700px) {
  /* Ô tìm kiếm 270px cộng một dãy chip trên màn 390px thì chip bị ép xuống
     thành cột dọc bên phải. Cho ô tìm kiếm chiếm trọn một hàng, chip cuộn
     ngang ở hàng dưới. */
  .find-row { flex-direction: column; align-items: stretch; gap: 9px; }
  .find-box { width: auto !important; }
  .cat-row {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; padding-bottom: 2px;
  }
  .cat-row::-webkit-scrollbar { display: none; }
  .cat-row .cat { flex-shrink: 0; }

  /* Trang Sổ nợ đặt tab trước ô tìm kiếm; trên điện thoại thì ô tìm kiếm
     lên trước cho thuận tay hơn */
  .find-flip .find-box { order: -1; margin-left: 0 !important; }
  .find-row .tabs { margin: 0 !important; }
}

/* Thanh đầu trang: tiêu đề bên trái, nút bên phải */
.page-bar {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 18px;
}

@media (max-width: 700px) {
  /* Trên màn hẹp, tiêu đề và nút chen nhau thì tiêu đề bị ép thành cột chữ
     một hai từ, còn nút thì tràn ra ngoài mép. Cho nút xuống hàng riêng. */
  .page-bar { flex-direction: column; align-items: stretch; gap: 11px; margin-bottom: 14px; }
  .page-bar > * { min-width: 0; }
  .page-bar > *:not(.page-head) {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start;
  }
  .page-bar .btn { flex: 1 1 auto; justify-content: center; }
  .page-head { align-items: center; }
  .page-head p, .page-sub { white-space: normal; }
}

/* Một ca đang chờ quản trị đếm két bù */
.pending-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px; border-radius: 12px; margin-bottom: 8px;
  background: rgba(148,163,184,.05); border: 1px solid var(--border);
}
.pending-row:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .pending-row { flex-wrap: wrap; }
  .pending-row .btn { width: 100%; justify-content: center; }
}

/* Dải nhắc nhân viên khi ca chạy quá giờ đóng cửa */
.shift-warn {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; margin-bottom: 16px; border-radius: 14px;
  background: rgba(251,146,60,.09); border: 1px solid rgba(251,146,60,.3);
  color: #fdba74; font-size: 13px;
}
.shift-warn[hidden] { display: none; }
.shift-warn svg { flex-shrink: 0; color: #fb923c; }
.shift-warn.gap {
  background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.38); color: #fca5a5;
  animation: nhap 2.4s ease-in-out infinite;
}
.shift-warn.gap svg { color: var(--err); }
@keyframes nhap { 50% { border-color: rgba(239,68,68,.75); } }

@media (max-width: 700px) {
  .shift-warn { flex-wrap: wrap; }
  .shift-warn .btn { width: 100%; justify-content: center; }
}

/* Chỉ hiện trên màn hình hẹp */
.only-narrow { display: none !important; }
@media (max-width: 1024px) { .only-narrow { display: inline-flex !important; } }

.cart-scrim {
  display: none; position: fixed; inset: 0; z-index: 155;
  background: rgba(3, 7, 18, .62); backdrop-filter: blur(3px);
}

@media (max-width: 1024px) {
  .cart-fab { display: flex; }

  .retail-cart {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 160;
    width: min(420px, 92vw); max-height: none;
    border-radius: 0; border-right: none;
    transform: translateX(100%);
    transition: transform .24s cubic-bezier(.4, 0, .2, 1);
    box-shadow: -14px 0 36px rgba(0, 0, 0, .5);
    overflow-y: auto;
  }
  body.cart-open .retail-cart { transform: none; }
  body.cart-open .cart-scrim { display: block; }
  body.cart-open .cart-fab { display: none; }

  /* Chừa chỗ cho nút tròn nổi khỏi che món cuối */
  .retail-wrap { padding-bottom: 84px; }
}


/* ═══ MÀN HÌNH HẸP — ĐĂNG NHẬP & POPUP DỊCH VỤ ══════════════════════════════
   Hai chỗ này vốn dựng theo bố cục hai cột của desktop nên trên điện thoại bị
   chồng cột, chữ dồn cục. Xếp dọc lại. */

@media (max-width: 820px) {
  /* Trang đăng nhập: dải thương hiệu thu thành thanh gọn trên đầu, form full màn */
  .auth { flex-direction: column; min-height: 100vh; }

  .auth-brand {
    flex: 0 0 auto; flex-direction: row; align-items: center;
    padding: 16px 20px; min-height: 0;
  }
  .auth-brand .aurora,
  .auth-brand .auth-grid,
  .auth-brand .balls,
  .auth-brand .auth-copy { display: none; }
  .auth-brand .brand-row { margin: 0; }

  .auth-form {
    flex: 1 1 auto; min-width: 0; width: 100%;
    border-left: none; justify-content: center; overflow-y: auto;
    padding: 28px 20px 76px;
  }
  .auth-form::before { height: 3px; }
  .auth-title { font-size: 25px; }
  .auth-sub { margin-bottom: 20px; }
  .auth-foot { left: 20px; right: 20px; bottom: 14px; }

  .who-grid { gap: 16px; margin: 22px 0 18px; }
}

@media (max-width: 700px) {
  /* Popup Gọi dịch vụ: lưới sản phẩm trên, giỏ hàng dưới */
  .modal.svc { height: 92vh; }
  .svc-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 12px;
  }
  .svc-cart { max-height: 38vh; }
  .modal.svc .prod-grid {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 10px;
  }
}


/* Danh sách nhập kho hàng loạt */
.bulk-list { display: flex; flex-direction: column; gap: 7px; max-height: 48vh; overflow-y: auto; }
.bulk-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 12px;
  background: rgba(148,163,184,.05); border: 1px solid var(--border);
}
.bulk-row.on { border-color: rgba(16,185,129,.4); background: rgba(16,185,129,.07); }
.bulk-name { flex: 1; min-width: 0; }
.bulk-name > div:first-child {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bulk-qty { display: flex; align-items: center; gap: 7px; flex-shrink: 0; }
.bulk-qty .input {
  width: 62px; height: 38px; text-align: center; font-size: 15px; font-weight: 800;
  background: var(--input-bg); border: 1px solid var(--border); border-radius: 10px;
}
.bulk-qty .step { width: 32px; height: 38px; font-size: 18px; }

@media (max-width: 700px) {
  .bulk-qty .input { width: 54px; }
  .bulk-list { max-height: 42vh; }
}