/* Import font Inter hỗ trợ đầy đủ Tiếng Việt và các độ dày chữ (weights) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Brand ramp, derived from the shop's core blue #2b7dff ---- */
  --brand-20:  #f6faff; /* nhạt hơn brand-50 một bậc, riêng cho khối "Đá" ở cột chọn nhanh mobile */
  --brand-50:  #eef4ff;
  --brand-100: #dbe6fc;
  --brand-300: #9cbdf2;
  --brand-400: #6f9aec;
  --brand-500: #2b7dff; /* base */
  --brand-600: #2765d6;
  --brand-700: #1f4fa8;
  --brand-800: #173a7c;
  --brand-900: #102a58;

  /* ---- Supporting neutrals & accents ---- */
  --cream:      #fffaf2;   /* milk-foam white, warms up the blue */
  --taro:       #b9a6e8;   /* small accent for boba/taro drinks */
  --ink:        #16213a;
  --ink-soft:   #55617c;
  --line:       #e4e9f4;
  --success:      #16a34a;  /* xanh lá: thanh toán thông suốt / thành công */
  --success-bright: #22c55e;
  --success-dark: #15803d;
  --danger:     #e0445d;
  --danger-bg:  #fdeaee;
  --warning:    #b7791f;
  --warning-bg: #fff6e0;

  /* ---- Cấu hình Font chuẩn iOS Native Style ---- */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-card: 0 24px 60px -24px rgba(16, 42, 88, 0.35);

  /* ---- Neumorphism (nổi khối lồi/lõm) cho các nút chọn size/đường/đá.
     Nền lấy đúng brand-50 (#eef4ff) — màu topbar thật sự đang dùng trên
     mobile (@media max-width:640px { .shop-header { background: var(--brand-50) } }).
     Bóng đổ vẫn theo token của .mgrid-tile để đồng bộ phong cách. ---- */
  --topbar-bg: #e4edfd; /* nền topbar mobile: đậm hơn brand-50 (#eef4ff) 1 tone nhẹ */
  --nm-bg:    var(--brand-50);
  --nm-light: rgba(255, 255, 255, 0.9);
  --nm-dark:  rgba(163, 177, 198, 0.4);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

button {
  font-family: inherit;
}

.u-inline-25 {
  display: inline-block;
}

/* =====================================================
   Component dùng chung: form đăng nhập / khôi phục PIN
   ===================================================== */

/* ---------- Alerts ---------- */

.success-box {
  background: #eafaf0;
  color: #1a9251;
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 20px;
}

.error-box {
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 20px;
}

/* ---------- Inputs ---------- */

.input-group {
  margin-bottom: 18px;
}

.input-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.input-group .input,
.input-group input {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 13px 16px;
  font-size: 15px;
  font-family: var(--font-body);
  color: var(--ink);
  background: #fbfcff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.input-group .input:focus,
.input-group input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px var(--brand-50);
  background: #fff;
}

.password-wrapper {
  position: relative;
}

.password-wrapper .input,
.password-wrapper input {
  padding-right: 46px;
}

.toggle-password {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: var(--ink-soft);
  display: flex;
}

.toggle-password svg {
  width: 19px;
  height: 19px;
}

.toggle-password .d-none {
  display: none;
}

/* ---------- Buttons ---------- */

.btn-primary {
  width: 100%;
  border: none;
  border-radius: var(--radius-pill);
  padding: 14px 20px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  cursor: pointer;
  box-shadow: 0 14px 26px -12px var(--brand-600);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 30px -12px var(--brand-600);
}

.btn-primary:active {
  transform: translateY(0);
}

/* ---------- Footer chung ---------- */

.footer-links {
  margin-top: 18px;
  text-align: center;
}

.footer-links a {
  font-size: 13.5px;
  color: var(--brand-600);
  text-decoration: none;
  font-weight: 600;
}

.footer-links a:hover {
  text-decoration: underline;
}

.version {
  margin-top: 24px;
  text-align: center;
  font-size: 11.5px;
  color: #a7b0c2;
}

/* =====================================================
   Trang xác thực (login.php / forgot-password.php)
   ===================================================== */

body.login-body,
body.recovery-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background:
    radial-gradient(60% 50% at 85% 0%, var(--brand-100) 0%, transparent 60%),
    var(--cream);
}

/* ---------- Trang khôi phục PIN (forgot-password.php) ---------- */

.recovery-shell {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 44px 36px 36px;
  overflow: hidden;
}

.recovery-shell::before {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  right: -80px;
  top: -90px;
  border-radius: 50%;
  background: var(--brand-50);
  z-index: 0;
}

.recovery-badge,
.recovery-heading,
.recovery-shell .success-box,
.recovery-shell .error-box,
.recovery-shell form,
.recovery-shell .footer-links,
.recovery-shell .version {
  position: relative;
  z-index: 1;
}

.recovery-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 14px 26px -12px var(--brand-600);
  margin-bottom: 20px;
}

.recovery-badge svg {
  width: 26px;
  height: 26px;
}

.step-chip {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand-700);
  background: var(--brand-50);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}

.recovery-heading h1 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink);
}

.recovery-heading p {
  margin: 0 0 22px;
  color: var(--ink-soft);
  font-size: 14.5px;
}

.recovery-desc {
  margin: 0 0 20px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.55;
}

.recovery-resend-form {
  margin-top: 14px;
  text-align: center;
}

.recovery-resend-btn {
  border: none;
  background: none;
  padding: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-600);
  cursor: pointer;
}

.recovery-resend-btn:hover {
  text-decoration: underline;
}

@media (max-width: 480px) {
  body.recovery-body { padding: 0; }

  .recovery-shell {
    min-height: 100vh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 26px 40px;
  }
}

/* ---------- Trang đăng nhập (login.php) ---------- */

.login-shell {
  width: 100%;
  max-width: 920px;
  min-height: 560px;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.login-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 36px;
  color: #fff;
  background:
    radial-gradient(120% 90% at 15% 100%, var(--brand-600) 0%, transparent 55%),
    linear-gradient(160deg, var(--brand-500) 0%, var(--brand-800) 78%, var(--brand-900) 100%);
  overflow: hidden;
}

.login-brand::before,
.login-brand::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}

.login-brand::before {
  width: 220px;
  height: 220px;
  right: -70px;
  top: -60px;
}

.login-brand::after {
  width: 140px;
  height: 140px;
  left: -50px;
  bottom: 60px;
  background: rgba(255, 255, 255, 0.06);
}

.brand-word {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.2px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-word svg { width: 26px; height: 26px; flex-shrink: 0; }

.login-art {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin: 12px 0;
}

.login-art svg { width: 100%; max-width: 220px; height: auto; }

.brand-tagline {
  position: relative;
  z-index: 1;
}

.brand-tagline p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  max-width: 30ch;
}

.brand-tagline .shop-year {
  display: block;
  margin-top: 18px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.login-form-panel {
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-heading h1 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink);
}

.login-heading p {
  margin: 0 0 28px;
  color: var(--ink-soft);
  font-size: 14.5px;
}

.remember-device-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--ink-soft);
  margin: 4px 0 26px;
  cursor: pointer;
  user-select: none;
}

.remember-device-row input {
  width: 17px;
  height: 17px;
  accent-color: var(--brand-500);
}

@media (max-width: 760px) {
  body.login-body { padding: 0; }

  .login-shell {
    grid-template-columns: 1fr;
    min-height: 100vh;
    border-radius: 0;
    max-width: 480px;
  }

  .login-brand {
    padding: 28px 28px 22px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .login-art { display: none; }

  .brand-tagline p { display: none; }

  .brand-tagline .shop-year { margin-top: 0; }

  .login-form-panel {
    padding: 32px 26px 40px;
  }
}

/* =====================================================
   App shell dùng chung cho các trang sau đăng nhập
   (settings.php, pos.php, kho.php, baocao.php...)
   — cùng 1 bảng màu/font/bo góc với trang login ở trên.
   ===================================================== */

body {
  background: var(--cream);
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 16px 48px;
}

/* ---------- Thanh trên cùng: tên user + menu điều hướng ---------- */

.pos-topbar {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  margin-bottom: 18px;
}

.pos-topbar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pos-user-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pos-user-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}

.pos-logout-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--danger-bg);
  color: var(--danger);
  text-decoration: none;
  flex-shrink: 0;
}

.pos-topbar-actions {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.pos-nav-group {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.pos-icon-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.pos-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-600);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.pos-icon-group:hover .pos-icon-btn {
  transform: translateY(-1px);
}

.pos-icon-btn.is-active {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  box-shadow: 0 10px 20px -10px var(--brand-600);
}

.pos-icon-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
}

.pos-icon-btn.is-active + .pos-icon-label {
  color: var(--brand-700);
}

/* ---------- Lưới ô cài đặt (settings-tile) ---------- */

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.settings-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  background: #fff;
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: 20px 12px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.settings-tile:hover {
  transform: translateY(-2px);
}

.settings-tile:active {
  transform: translateY(0);
}

.card-icon {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: var(--brand-600);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card-icon-sm {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -3px;
  margin-right: 4px;
}

/* ---------- Modal cài đặt (settings-modal-overlay / settings-modal) ---------- */

.settings-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(16, 42, 88, 0.5);
  z-index: 1000;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.settings-modal-overlay.show {
  display: flex;
}

.settings-modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-card);
  padding: 28px 22px 32px;
}

/* ---- QR thanh toán chuyển khoản (modal Cài đặt kết nối) ---- */
.qr-setting-block {
  margin: 18px 0 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--brand-50);
}
.qr-setting-title { margin-bottom: 10px; font-size: 14px; font-weight: 800; color: var(--brand-700); }
.qr-setting-frame {
  width: min(200px, 100%); /* không vượt bề rộng khối chứa (modal hẹp trên mobile) */
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--line);
}
.qr-setting-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.qr-setting-empty { padding: 0 12px; font-size: 12.5px; color: var(--ink-soft); text-align: center; }
.qr-setting-img[hidden], .qr-setting-empty[hidden] { display: none; }
/* Thu phóng ảnh xem trước: chụm 2 ngón / lăn chuột / nút +- / chạm đúp; kéo để di chuyển khi đã phóng */
.qr-setting-frame { position: relative; touch-action: none; cursor: zoom-in; }
.qr-setting-frame.is-zoomed { cursor: grab; }
.qr-setting-frame.is-zoomed:active { cursor: grabbing; }
.qr-setting-img { transform-origin: center center; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; will-change: transform; }
.qr-setting-zoom { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -2px auto 10px; }
.qr-setting-zoom[hidden] { display: none; }
.qr-zoom-btn, .qr-zoom-level {
  height: 32px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--brand-700);
  font-family: var(--font-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.qr-zoom-btn { width: 36px; display: inline-flex; align-items: center; justify-content: center; }
.qr-zoom-level { min-width: 64px; padding: 0 10px; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qr-zoom-btn:active, .qr-zoom-level:active { background: var(--brand-100); }
.qr-zoom-btn:disabled { opacity: 0.4; cursor: default; }
.qr-setting-status {
  margin-bottom: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}
.qr-setting-status[hidden] { display: none; }
.qr-setting-status.is-info { background: #fff; color: var(--brand-700); border: 1px solid var(--brand-500); }
.qr-setting-status.is-success { background: #e7f7ec; color: var(--success-dark); border: 1px solid var(--success); }
.qr-setting-status.is-error { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); }
.qr-setting-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.qr-setting-actions[hidden] { display: none; }
.qr-setting-btn {
  flex: 1 1 110px;
  min-width: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 10px;
  border: 1.5px solid var(--brand-500);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--brand-700);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.qr-setting-btn[hidden] { display: none; }
.qr-setting-btn:active { background: var(--brand-100); }
.qr-setting-btn:disabled { opacity: 0.6; cursor: default; }
.qr-setting-btn.is-danger { flex: 1 1 80px; padding: 11px 16px; border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.qr-setting-btn.is-danger:active { background: var(--danger); color: #fff; }
.qr-setting-btn.is-ok { border-color: var(--success); background: #e7f7ec; color: var(--success-dark); }
.qr-setting-btn.is-ok:active { background: var(--success); color: #fff; }

.settings-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.settings-modal h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  padding-right: 30px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.settings-modal p {
  margin: 0 0 16px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.55;
}

.settings-modal hr {
  border: none;
  border-top: 1px dashed var(--line);
  margin: 18px 0;
}

@media (min-width: 620px) {
  .settings-modal-overlay {
    align-items: center;
  }
  .settings-modal {
    border-radius: var(--radius-lg);
  }
}

/* ---------- Modal trung tâm (luôn hiển thị giữa màn hình, không phải dạng bottom-sheet) ---------- */

.settings-modal-overlay--center {
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.settings-modal-overlay--center .settings-modal {
  border-radius: var(--radius-lg);
}

/* ---------- Modal con (nested), luôn hiển thị ở giữa màn hình, nằm trên modal cha ---------- */

.settings-modal-overlay--nested {
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1050;
  background: rgba(16, 42, 88, 0.55);
}

.settings-modal-overlay--nested .settings-modal {
  border-radius: var(--radius-lg);
  max-width: 420px;
  width: 100%;
}

.image-lightbox-overlay .image-lightbox-box {
  max-width: min(420px, 92vw);
  background: transparent;
  box-shadow: none;
  padding: 0;
  position: relative;
}
.image-lightbox-overlay .settings-modal-close {
  top: -14px;
  right: -14px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(16, 42, 88, 0.25);
}
.image-lightbox-overlay #imageLightboxImg {
  display: block;
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: #fff;
}

/* ---------- Form dùng trong modal (label rời + input rời, cách nhau bằng <br>) ---------- */

.settings-modal .form-label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.settings-modal .input,
.settings-modal select.input {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 15px;
  font-size: 14.5px;
  font-family: var(--font-body);
  color: var(--ink);
  background: #fbfcff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.settings-modal .input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px var(--brand-50);
  background: #fff;
}

.settings-modal .date-input {
  color: var(--ink);
  /* Ô ngày trên mobile (iOS/Chrome) có chiều rộng nội tại lớn nên tràn khỏi panel: ép về đúng bề ngang khung */
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}
.settings-modal .date-input::-webkit-date-and-time-value { text-align: left; min-width: 0; }
.settings-modal .date-input::-webkit-datetime-edit { padding: 0; }

/* Ô nhập mã voucher — nổi bật, chữ IN HOA, giãn chữ nhẹ */
.settings-modal .u-inline-18 {
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
  text-align: center;
}

/* Input có badge đơn vị bên phải (K / %) */
.settings-modal .price-input-wrap {
  position: relative;
}

.settings-modal .price-input-wrap .input {
  padding-right: 44px;
}

.settings-modal .price-unit-badge {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 13px;
  color: var(--brand-600);
}

.settings-modal .price-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-soft);
}

/* ---------- Danh sách nhân viên / khách hàng / voucher (mỗi mục 1 khối) ---------- */

.settings-modal .u-inline-16 {
  display: block;
  padding: 6px 0 4px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink);
}

.settings-modal .u-inline-16 small {
  color: var(--ink-soft);
}

.settings-modal .u-inline-17 {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  margin-right: 6px;
}

.settings-modal .u-inline-19 {
  color: var(--ink-soft);
  font-weight: 400;
}

/* Trạng thái voucher: hết hạn/tạm ngưng (đỏ) vs đang hoạt động (xanh) */
.settings-modal .u-inline-20,
.settings-modal .u-inline-21 {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  vertical-align: middle;
}
.settings-modal .u-inline-20 { background: var(--danger-bg); color: var(--danger); }
.settings-modal .u-inline-21 { background: #eafaf0; color: #1a9251; }

/* Liên kết dạng "nút chữ" có icon (Sửa / Xóa / Kick...) trong các khối danh sách */
.settings-modal .u-inline-16 a,
.settings-modal .btn-link-icon {
  display: inline-flex;
  align-items: center;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-600);
  text-decoration: none;
  cursor: pointer;
}
.settings-modal .u-inline-16 a:hover,
.settings-modal .btn-link-icon:hover {
  text-decoration: underline;
}
.settings-modal .u-inline-16 a[href*="delete"],
.settings-modal .u-inline-16 a[href*="kickout"] {
  color: var(--danger);
}

.settings-modal .btn-link-icon:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  text-decoration: none;
}

/* Trạng thái Online/Offline của nhân viên */
.staff-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  vertical-align: middle;

}
.staff-status-badge .staff-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.staff-status-badge.is-online { background: #eafaf0; color: #1a9251; }
.staff-status-badge.is-online .staff-status-dot { background: #1a9251; }
.staff-status-badge.is-offline { background: #f1f3f8; color: var(--ink-soft); }
.staff-status-badge.is-offline .staff-status-dot { background: #9aa5bd; }

/* ---------- Nút chính không full-width (VD: tải QR về máy) ---------- */

.settings-modal .u-inline-14 {
  width: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 18px auto 0;
}

/* ---------- Modal QR Shop ---------- */

.u-inline-11 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px;
  background: var(--brand-50);
  border-radius: var(--radius-md);
}

.u-inline-12 {
  width: 220px;
  height: 220px;
  max-width: 100%;
  background: #fff;
  border-radius: var(--radius-sm);
  padding: 10px;
  box-shadow: 0 10px 24px -14px rgba(16, 42, 88, 0.35);
}

.u-inline-13 {
  font-size: 12.5px;
  color: var(--ink-soft);
  text-align: center;
}
.u-inline-13 b { color: var(--brand-700); }

/* =====================================================
   Khung thẻ căn giữa dùng chung cho các trang phụ dạng
   "1 thẻ trắng giữa màn hình" (scan-shop-qr.php...) —
   khác với .login-shell (bố cục 2 cột của login.php).
   ===================================================== */

.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background:
    radial-gradient(60% 50% at 85% 0%, var(--brand-100) 0%, transparent 60%),
    var(--cream);
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 40px 32px 34px;
  text-align: center;
}

.logo-box {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 14px 26px -12px var(--brand-600);
}

.logo-svg { width: 26px; height: 26px; }

.login-card h1 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink);
}

.login-card .subtitle {
  margin: 0 0 22px;
  font-size: 13.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

@media (max-width: 480px) {
  .login-wrapper { padding: 0; }
  .login-card {
    min-height: 100vh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 24px;
  }
}

/* =====================================================
   Trang quét QR SHOP (scan-shop-qr.php)
   ===================================================== */

.qr-scan-card {
  padding-top: 52px;
}

.qr-scan-back-btn {
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
}
.qr-scan-back-btn:hover { color: var(--brand-600); }

.qr-tabs {
  display: flex;
  gap: 8px;
  margin: 4px 0 18px;
  background: var(--brand-50);
  padding: 5px;
  border-radius: var(--radius-pill);
}

.qr-tab {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: none;
  padding: 9px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.qr-tab.active {
  background: #fff;
  color: var(--brand-700);
  box-shadow: 0 6px 14px -8px rgba(16, 42, 88, 0.35);
}

.qr-tab-icon { width: 16px; height: 16px; }

.qr-panel.d-none { display: none; }

.qr-reader-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #0b1220;
  margin-bottom: 14px;
}

.qr-reader-frame #reader {
  width: 100%;
}

.qr-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0;
}

.qr-hint-icon { width: 15px; height: 15px; flex-shrink: 0; }

.qr-upload-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 1.5px dashed var(--brand-300);
  border-radius: var(--radius-md);
  padding: 32px 18px;
  cursor: pointer;
  background: var(--brand-50);
  color: var(--brand-700);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.qr-upload-drop:hover { background: var(--brand-100); border-color: var(--brand-500); }

.qr-upload-icon { width: 30px; height: 30px; color: var(--brand-500); }

.qr-upload-title { font-size: 14px; font-weight: 700; color: var(--ink); }

.qr-upload-hint { font-size: 12px; color: var(--ink-soft); }

.qr-upload-preview {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.qr-upload-preview img {
  max-width: 100%;
  max-height: 260px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.qr-upload-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--danger);
  cursor: pointer;
}
.qr-upload-clear svg { width: 14px; height: 14px; }

.qr-page-status {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  text-align: left;
}
.qr-page-status-loading { background: var(--brand-50); color: var(--brand-700); }
.qr-page-status-success { background: #eafaf0; color: #1a9251; }
.qr-page-status-error { background: var(--danger-bg); color: var(--danger); }

.qr-status-icon { width: 17px; height: 17px; flex-shrink: 0; }
.qr-status-icon.spin { animation: pa-spin 0.9s linear infinite; }

@keyframes pa-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------- Modal rộng (dùng cho bảng "Quản lý User") ---------- */

@media (min-width: 860px) {
  .settings-modal.settings-modal-xl {
    max-width: 880px;
  }
}

/* ---------- Nút phụ dùng chung (viền, không nền đặc) ---------- */

.settings-modal .btn-secondary {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 11px 16px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-700);
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.settings-modal .btn-secondary:hover {
  border-color: var(--brand-400);
  background: var(--brand-50);
}

/* ---------- Quản lý Menu: danh mục / sản phẩm / size / topping ---------- */

.settings-modal .menu-section-title {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 4px 0 12px;
}

.settings-modal .menu-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.settings-modal .menu-inline-form .input {
  width: auto;
  flex: 1 1 160px;
}
.settings-modal .menu-inline-form-wrap {
  align-items: stretch;
}
.settings-modal .menu-inline-form-wrap .input {
  flex: 1 1 100%;
}

.settings-modal .menu-category-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13.5px;
}
.settings-modal .menu-category-row:last-of-type {
  border-bottom: none;
}
.settings-modal .menu-category-name {
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}

.settings-modal .menu-row-actions {
  display: flex;
  gap: 14px;
  margin-left: auto;
}
.settings-modal .menu-row-actions a {
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-600);
  text-decoration: none;
}
.settings-modal .menu-row-actions a:hover {
  text-decoration: underline;
}
.settings-modal .menu-row-actions a[href*="delete"] {
  color: var(--danger);
}

.settings-modal .menu-product-block {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 12px;
  background: #fbfcff;
}

.settings-modal .menu-product-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.settings-modal .menu-product-chevron {
  display: inline-block;
  color: var(--ink-soft);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
.settings-modal .menu-product-block.is-open .menu-product-chevron {
  transform: rotate(90deg);
}
.settings-modal .menu-product-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
}
.settings-modal .menu-category-badge {
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--brand-50);
  color: var(--brand-700);
}

.settings-modal .menu-product-thumb {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--brand-50);
  flex-shrink: 0;
}
.settings-modal .menu-product-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-700);
}
.settings-modal .menu-product-thumb-edit {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
}
.settings-modal .menu-inline-form-wrap .menu-product-thumb-edit {
  flex: 1 1 100%;
}
.settings-modal .menu-product-thumb-edit .menu-product-thumb {
  width: 44px;
  height: 44px;
}
.settings-modal .menu-product-thumb--clickable {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.settings-modal .menu-product-thumb--clickable:hover {
  opacity: 0.8;
}
.settings-modal .menu-product-thumb-edit .menu-image-picker {
  flex: 1;
  min-width: 0;
}
.settings-modal .menu-remove-image-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-weight: 400;
}

.settings-modal .menu-product-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.settings-modal .menu-size-list {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.settings-modal .menu-product-block.is-open .menu-size-list {
  display: block;
}

.settings-modal .menu-size-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.settings-modal .menu-size-name-input {
  width: auto;
  flex: 1 1 90px;
  padding: 9px 12px;
}
.settings-modal .menu-size-price-wrap {
  flex: 0 0 100px;
}
.settings-modal .menu-size-price-wrap .input {
  padding: 9px 34px 9px 12px;
}
.settings-modal .menu-size-status-select {
  width: auto;
  flex: 0 0 90px;
  padding: 9px 10px;
}
.settings-modal .menu-size-code {
  flex: 0 0 auto;
}
.settings-modal .menu-size-row-add {
  border-top: 1px dashed var(--line);
  margin-top: 4px;
  padding-top: 12px;
}

.settings-modal .menu-add-product-toggle {
  margin-bottom: 14px;
}
.settings-modal .menu-add-product-form {
  display: none;
  border: 1.5px dashed var(--brand-400);
  border-radius: var(--radius-md);
  padding: 14px;
  margin-bottom: 16px;
  background: var(--brand-50);
}
.settings-modal .menu-add-product-form.is-open {
  display: block;
}

.settings-modal .menu-field-hint-inline {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-soft);
  opacity: 0.75;
  margin-left: 4px;
}

.settings-modal .menu-image-picker {
  display: flex;
}
.settings-modal .menu-image-picker-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.settings-modal .menu-image-picker-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 22px;
  border-radius: var(--radius-md);
  border: 1.5px dashed var(--brand-300);
  background: var(--brand-50);
  color: var(--brand-700);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.settings-modal .menu-image-picker-btn:hover {
  border-color: var(--brand-500);
  background: var(--brand-100);
}

.settings-modal .menu-nosize-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}
.settings-modal .menu-nosize-toggle input {
  width: 17px;
  height: 17px;
  accent-color: var(--brand-600);
  cursor: pointer;
}
.settings-modal .menu-nosize-toggle + .menu-nosize-toggle {
  margin-top: -4px;
}
.settings-modal .menu-inline-form-wrap .menu-nosize-toggle {
  flex: 1 1 100%;
  margin: 0;
}

.settings-modal .menu-size-input-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
.settings-modal .menu-size-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-modal .menu-size-input-select {
  flex: 1;
  min-width: 0;
}
.settings-modal .menu-size-input-custom {
  flex: 1;
  min-width: 0;
}
.settings-modal .menu-size-input-price-wrap {
  flex: 1;
  min-width: 0;
}
.settings-modal .menu-size-input-remove {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.settings-modal .menu-size-input-remove:hover {
  border-color: var(--danger);
  color: var(--danger);
}
.settings-modal .menu-add-size-row-btn {
  width: 100%;
  margin-bottom: 14px;
}
.settings-modal .menu-size-input-row.has-duplicate-size .menu-size-input-select,
.settings-modal .menu-size-input-row.has-duplicate-size .menu-size-input-custom {
  border-color: var(--danger);
  background: var(--danger-bg);
}

/* ---------- Quản lý Menu: layout theo hàng (Nhóm món / Món / Topping) ---------- */

.settings-modal .menu-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 4px 0 10px;
}
.settings-modal .menu-row-header--spaced {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.settings-modal .menu-row-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}
.settings-modal .menu-row-title-count {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-700);
  background: var(--brand-50);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}
.settings-modal .menu-row-add-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--brand-600);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.settings-modal .menu-row-add-btn:hover {
  border-color: var(--brand-400);
  background: var(--brand-50);
}
.settings-modal .menu-row-add-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.settings-modal .menu-chip-scroll {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 2px 10px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.settings-modal .menu-chip-scroll::-webkit-scrollbar {
  height: 5px;
}
.settings-modal .menu-chip-scroll::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: var(--radius-pill);
}

.settings-modal .menu-chip {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 7px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  background: var(--brand-50);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.settings-modal .menu-chip:hover {
  border-color: var(--brand-300);
  background: var(--brand-100);
}
.settings-modal .menu-chip.is-active {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}
.settings-modal .menu-chip.is-hidden-item {
  border-style: dashed;
  border-color: var(--line);
  opacity: 0.65;
}
.settings-modal .menu-chip--product {
  padding-left: 6px;
}
.settings-modal .menu-chip-thumb {
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  flex-shrink: 0;
}
.settings-modal .menu-chip-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-100);
  color: var(--brand-700);
}
.settings-modal .menu-chip-empty-hint {
  color: var(--ink-soft);
  font-size: 13px;
  padding: 4px 0 10px;
}

.settings-modal .menu-detail-actions {
  display: flex;
  align-items: center;
  flex: 1 1 100%;
  gap: 10px;
  margin-top: 2px;
}
.settings-modal .menu-detail-actions .cat-icon-btn.danger {
  margin-left: auto;
}
.settings-modal .menu-detail-actions--right {
  justify-content: flex-end;
}
.settings-modal .menu-detail-actions--right .cat-icon-btn.danger {
  margin-left: 0;
}


/* ---------- Modal Quản lý danh mục (AJAX) ---------- */

.settings-modal .cat-add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.settings-modal .cat-add-row .input {
  flex: 1;
}

.settings-modal .cat-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.settings-modal .cat-list-item .input {
  flex: 1;
  padding: 9px 12px;
}

.settings-modal .cat-icon-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--brand-600);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.settings-modal .cat-icon-btn:hover {
  border-color: var(--brand-400);
  background: var(--brand-50);
}
.settings-modal .cat-icon-btn.danger {
  color: var(--danger);
}
.settings-modal .cat-icon-btn.danger:hover {
  border-color: var(--danger);
  background: var(--danger-bg);
}

@media (max-width: 480px) {
  .settings-modal .menu-size-row {
    align-items: stretch;
  }
  .settings-modal .menu-size-name-input {
    flex: 1 1 70px;
  }
  .settings-modal .menu-size-price-wrap {
    flex: 1 1 90px;
  }
  .settings-modal .menu-size-status-select {
    flex: 1 1 80px;
  }
  .settings-modal .menu-size-code {
    flex: 1 1 100%;
    order: 5;
    font-size: 11px;
  }
  .settings-modal .menu-inline-form .input {
    flex: 1 1 100%;
  }
}

/* ---------- Card khách hàng trong "Quản lý User" ---------- */

.user-mgmt-card {
  padding: 8px 0 14px;
}

.user-mgmt-row-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 2px;
}

/* Nút icon xoá tài khoản khách hàng, đẩy về cuối hàng tiêu đề mỗi thẻ khách */
.user-mgmt-delete-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-md);
  color: var(--ink-soft);
  cursor: pointer;
  flex: 0 0 auto;
}
.user-mgmt-delete-btn:hover,
.user-mgmt-delete-btn:active {
  background: var(--danger-bg);
  color: var(--danger);
}

.user-mgmt-rank {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-soft);
  min-width: 26px;
}

.user-mgmt-sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 2px 0;
}

.inactive-warning-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--warning-bg);
  color: var(--warning);
  margin: 4px 0 2px;
}

.user-mgmt-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 12px 0 6px;
}

@media (min-width: 620px) {
  .user-mgmt-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.user-mgmt-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.user-mgmt-stat-label {
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 600;
}

.user-mgmt-stat-value {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

.user-mgmt-stat-highlight {
  color: var(--brand-700);
}

.user-mgmt-vouchers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.user-mgmt-voucher-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 6px 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--warning-bg);
  color: var(--warning);
}

.user-mgmt-voucher-chip a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
}

.user-mgmt-assign {
  margin-top: 10px;
}

.user-mgmt-assign summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--brand-600);
  list-style: none;
}

.user-mgmt-assign summary::-webkit-details-marker {
  display: none;
}

.user-mgmt-assign[open] summary {
  margin-bottom: 10px;
}

.user-mgmt-assign form .input {
  margin-bottom: 0;
}

/* ---------- Nickname + Sổ địa chỉ trong "Quản lý User" ---------- */

.user-mgmt-nickname {
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
}

.user-mgmt-addresses {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}

.user-mgmt-addresses-title {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 6px;
}

.user-mgmt-address-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  background: var(--brand-50);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-bottom: 6px;
}

.user-mgmt-address-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-700);
}

.user-mgmt-address-text {
  font-size: 12.5px;
  color: var(--ink);
  margin-top: 2px;
}

.user-mgmt-address-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

/* =====================================================
   Trang khách hàng (index.php) — Top menu & Trang chủ
   ===================================================== */

body.shop-body {
  min-height: 100vh;
  margin: 0;
  background: #ffffff;
}

/* ---------- Top menu ---------- */

.shop-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  row-gap: 6px;
  padding: 14px 20px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  /* Ép sang layer GPU riêng — tránh giật/lệch vài px lúc cuộn trên iOS
     Safari khi có nhiều khối position:sticky xếp chồng liên tiếp. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.shop-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

.shop-header-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}

.shop-header-brand-badge {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 3px 8px -3px var(--brand-600);
  flex-shrink: 0;
}

.shop-header-greeting {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
}

.shop-heart-icon {
  color: #ff5d78;
  flex-shrink: 0;
}

.shop-header-greeting-name {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 0 1 auto;
}

/* Khối lời chào khi đã đăng nhập: 2 dòng ở desktop/tablet (tên+logout,
   rồi dòng chúc), 3 dòng ở mobile (xem media query bên dưới). */
.shop-header-greeting-desktop {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.shop-header-greeting-mobile {
  display: none;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.shop-header-hello-small,
.shop-header-subgreeting {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-style: italic;
  font-weight: 600;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-header-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.shop-header-name-row .shop-header-greeting-name {
  font-size: 15.5px;
}

.shop-icon-btn-sm .shop-icon-btn-box {
  width: 26px;
  height: 26px;
}

.shop-header-points-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: var(--brand-50);
  border-radius: var(--radius-md);
  padding: 8px 14px;
}
.shop-header-points-bar-label {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.shop-header-points-bar-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--brand-700);
}

/* Dòng gợi ý đăng ký, nằm dưới hàng nút trên header, thay cho dòng
   phụ đề vốn nằm trong khối hero. Có 2 biến thể: bản mobile (ngắn
   gọn + icon quà, canh giữa) và bản desktop (đầy đủ, canh phải) —
   xem media query bên dưới để bật đúng biến thể theo màn hình. */
.shop-header-signup-hint {
  display: none;
  flex: 1 1 100%;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.shop-header-signup-hint-mobile {
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
}
.shop-header-signup-hint-mobile svg {
  flex-shrink: 0;
  color: var(--brand-500);
}
.shop-header-signup-hint-desktop {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  text-align: right;
  font-style: italic;
}
.shop-header-signup-hint-desktop svg {
  flex-shrink: 0;
  color: var(--brand-500);
}

.shop-header-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  flex-shrink: 0;
}

.shop-nav-link {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 6px;
  white-space: nowrap;
}
.shop-nav-link:hover {
  color: var(--brand-700);
}

.shop-nav-link-share {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.shop-nav-link-share svg {
  flex-shrink: 0;
}

.shop-nav-btn {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  display: inline-block;
}

.shop-nav-btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
}
.shop-nav-btn-primary:hover {
  filter: brightness(1.05);
}

.shop-nav-btn-outline {
  color: var(--brand-700);
  background: #fff;
  border: 1.5px solid var(--line);
}
.shop-nav-btn-outline:hover {
  border-color: var(--brand-400);
  background: var(--brand-50);
}

/* Chữ "Đăng ký" trong dòng hint header vẫn là 1 nút (bo viền) nhưng
   cỡ chữ/màu chữ khớp với phần chữ còn lại trong cùng hàng, thay vì
   nổi bật màu brand như nút Đăng nhập/Đăng ký thông thường. */
.shop-hero-hint-btn {
  padding: 5px 12px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* ---------- Nút icon: icon nằm trong ô vuông bo góc, tên nằm ngoài ô (dưới chân) ---------- */
/* Dùng cho: điểm / ưu đãi / đơn hàng / giới thiệu (share) / logout */

.shop-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 0;
  color: var(--ink-soft);
  cursor: pointer;
  flex-shrink: 0;
  text-decoration: none;
}

.shop-icon-btn-box {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--line);
  background: #fff;
  color: inherit;
}
.shop-icon-btn:hover .shop-icon-btn-box {
  border-color: var(--brand-400);
  background: var(--brand-50);
  color: var(--brand-700);
}

.shop-icon-btn-label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.15;
  white-space: normal;
  text-align: center;
  max-width: 62px;
  color: var(--ink-soft);
}
.shop-icon-btn:hover .shop-icon-btn-label {
  color: var(--brand-700);
}

.shop-icon-btn-logout .shop-icon-btn-box {
  border-radius: 50%;
  color: var(--danger);
  border-color: var(--danger-bg);
  background: var(--danger-bg);
}
.shop-icon-btn-logout:hover .shop-icon-btn-box {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.shop-icon-btn-points-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  line-height: 1;
  white-space: nowrap;
}

/* Nút "Điểm" (bản icon, màn hình to): khi số điểm dài ra, ô vuông
   40x40 tự giãn ngang thành viên thuốc thay vì bị cắt/tràn số. */
.shop-icon-btn-points-tile .shop-icon-btn-box {
  width: auto;
  min-width: 40px;
  padding: 0 8px;
}

.shop-icon-btn-disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.shop-icon-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 16px;
  height: 16px;
  padding: 0 3px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
/* .shop-icon-badge{display:flex} phía trên vô tình đè mất display:none
   mặc định của [hidden], khiến badge luôn hiện (kể cả khi giỏ hàng trống)
   thay vì ẩn đi như JS/PHP đã set qua thuộc tính hidden. */
.shop-icon-badge[hidden] {
  display: none;
}

/* Badge xanh lá — số đơn ĐÃ GỬI còn đang chờ xử lý. Đặt ở góc đối diện với
   badge đỏ (số món trong giỏ CHƯA gửi) trên cùng 1 icon, để 2 cảnh báo khác
   nghĩa không đè lên nhau khi cùng xuất hiện. */
.shop-icon-badge-sent {
  top: auto;
  bottom: -5px;
  left: -5px;
  right: auto;
  background: #16a34a;
  color: #fff;
}
.shop-hero-cart-link .shop-icon-badge-sent {
  top: auto;
  bottom: -4px;
  left: -4px;
  right: auto;
}

/* Ở mobile: chia header thành 2 dòng.
   Dòng 1 (.shop-header-left): thông tin cửa hàng khi chưa đăng nhập,
   hoặc lời chào + tên + logout khi đã đăng nhập.
   Dòng 2 (.shop-header-actions): toàn bộ icon (tên nằm dưới chân icon)
   và các nút còn lại, canh phải. */
@media (max-width: 640px) {
  .shop-header {
    flex-wrap: wrap;
    row-gap: 10px;
    background: var(--topbar-bg);
    border-bottom: none;
  }
  .shop-header-left {
    width: 100%;
    flex: 1 1 100%;
  }
  .shop-header-actions {
    width: 100%;
    flex: 1 1 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .shop-header-greeting-desktop {
    display: none;
  }
  .shop-header-greeting-mobile {
    display: flex;
    width: 100%;
  }

  /* Khi đã đăng nhập: khối lời chào + toàn bộ nút nằm CÙNG 1 hàng
     (không ép mỗi khối chiếm trọn 100% như lúc chưa đăng nhập), tile
     "Điểm" (icon) ẩn đi vì đã có thanh "Điểm tích lũy" riêng bên dưới. */
  .shop-header.shop-header--logged-in {
    row-gap: 8px;
  }
  .shop-header.shop-header--logged-in .shop-header-left {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  .shop-header.shop-header--logged-in .shop-header-actions {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }
  .shop-icon-btn-points-tile {
    display: none;
  }
  .shop-header-points-bar {
    display: flex;
    flex: 1 1 100%;
  }

  /* Đã đăng nhập: nút "Giới thiệu bạn bè", "Ưu đãi", "Giỏ hàng" dùng
     chung màu nền nhạt như nút giỏ hàng lúc chưa đăng nhập, thay cho
     nền trắng viền xám mặc định (không áp dụng cho tile "Điểm"). */
  .shop-header--logged-in .shop-header-actions .shop-icon-btn:not(.shop-icon-btn-points-tile) .shop-icon-btn-box {
    background: var(--brand-50);
    border-color: var(--brand-50);
  }

  /* Chưa đăng nhập: bỏ nút "Giỏ hàng" khỏi header, dời xuống ngay
     dưới tiêu đề hero cho gọn hàng nút phía trên. */
  .shop-header:not(.shop-header--logged-in) .shop-header-cart-link {
    display: none;
  }

  /* Chưa đăng nhập: bỏ nút "Đăng ký" khỏi hàng nút, vì chữ "Đăng ký"
     trong dòng gợi ý bên dưới giờ đã là một nút bấm. */
  .shop-header:not(.shop-header--logged-in) .shop-header-signup-btn {
    display: none;
  }

  /* Chưa đăng nhập: bỏ nút "Đăng nhập" khỏi hàng nút, dời lên cùng
     hàng với lời chào "Xin chào quý khách", thu nhỏ lại cho gọn. */
  .shop-header:not(.shop-header--logged-in) .shop-header-login-btn {
    display: none;
  }
  .shop-header-login-btn-mobile {
    display: inline-block;
    flex-shrink: 0;
    margin-left: auto;
    padding: 5px 13px;
    font-size: 13px;
  }
  .shop-header:not(.shop-header--logged-in) .shop-header-greeting {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .shop-header:not(.shop-header--logged-in) .shop-header-greeting-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Chưa đăng nhập: bỏ logo, chỉ giữ lại tên cửa hàng. */
  .shop-header:not(.shop-header--logged-in) .shop-header-brand-badge {
    display: none;
  }

  /* Chưa đăng nhập: đổi thứ tự hiển thị — dòng "Đăng ký để tích
     điểm..." lên trước, dòng "Giới thiệu bạn bè / Đăng nhập" xuống
     sau (chỉ đổi thứ tự hiển thị bằng flex order, không đổi DOM). */
  .shop-header:not(.shop-header--logged-in) .shop-header-left {
    order: 1;
  }
  .shop-header:not(.shop-header--logged-in) .shop-header-signup-hint-mobile {
    order: 2;
  }
  .shop-header:not(.shop-header--logged-in) .shop-header-actions {
    order: 3;
    justify-content: center;
  }

  /* Chưa đăng nhập: nút bo góc, nền màu nhạt cho link "Giới thiệu
     bạn bè" (đồng bộ màu với nút giỏ hàng trong hero). */
  .shop-header:not(.shop-header--logged-in) .shop-header-share-link {
    background: var(--brand-50);
    color: var(--brand-700);
    border-radius: var(--radius-pill);
    padding: 8px 16px;
  }

  /* Chưa đăng nhập: hiện bản mobile của dòng gợi ý đăng ký (ngắn
     gọn + icon quà) ngay dưới hàng nút trên header, ẩn bản desktop. */
  .shop-header-signup-hint-mobile {
    display: flex;
  }
  .shop-header-signup-hint-desktop {
    display: none;
  }

  /* Lưới 2x2 mới thay cho toàn bộ các dòng rời rạc ở trên (chỉ ở mobile) —
     ẩn hết các khối cũ, chỉ hiện lưới mới. */
  .shop-header-left,
  .shop-header-actions,
  .shop-header-points-bar,
  .shop-header-signup-hint-mobile,
  .shop-header-signup-hint-desktop {
    display: none !important;
  }
  

  /* Bỏ dòng "Mời bạn chọn món!" và nút giỏ hàng cạnh nó trên mobile —
     giỏ hàng đã có sẵn trong lưới 2x2 phía trên. Ẩn cả khối .shop-hero để
     không để lại khoảng trắng thừa (khối này chỉ chứa mỗi dòng đó). Giữ
     nguyên trên desktop. */
  .shop-hero {
    display: none;
  }
}

@media (min-width: 641px) {
  /* Chưa đăng nhập: hiện bản desktop của dòng gợi ý đăng ký (đầy đủ,
     canh phải) ngay dưới hàng nút trên header. */
  .shop-header-signup-hint-desktop {
    display: flex;
  }
  .shop-header-login-btn-mobile {
    display: none;
  }

  /* Lưới 2x2 chỉ dành cho mobile — ẩn hẳn trên desktop. */
  .shop-header-mobile-grid {
    display: none;
  }
}

/* ---------- Lưới 2x2 topbar mobile (chưa đăng nhập / đã đăng nhập) ----------
   display: grid được bật ở @media max-width:640px phía trên, display: none
   ở @media min-width:641px ngay trên đây — không đặt display mặc định ở
   đây nữa vì nó sẽ đứng sau cả 2 media query và luôn đè lên chúng. */






/* Hiệu ứng bấm: chỉ đổi màu nền đậm/nhạt, không dùng scale hay đổ bóng. */


/* Cột icon bên trái (tỷ lệ 2) — icon không có nền riêng, chỉ vòng tròn
   trắng đổ bóng lồi (neumorphism) tách khỏi nền chung của cả nút. */





/* Đường kẻ dọc phân tách icon (2) và tiêu đề (8). */


/* Cột tiêu đề + mô tả bên phải (tỷ lệ 8), canh trái. */






/* Tile không có icon (tên cửa hàng, chưa đăng nhập) — canh trái, tiêu đề +
   lời chào xếp chồng như một khối văn bản độc lập. */



/* Tile chia 5-5 (Giới thiệu | Đơn hàng, bản chưa đăng nhập) — 2 nửa bằng
   nhau, mỗi nửa là 1 nút riêng với icon ở trên, tiêu đề ở dưới, có đường
   dọc phân tách ở giữa. */







/* Khối "Xin chào!" (đã đăng nhập) — không có icon/đường phân tách riêng,
   canh trái để thẳng hàng với icon đăng xuất bên dưới. */





/* Icon đăng xuất: không có nền tròn, chỉ 1 gạch dọc ngắn ngăn với tên. */



/* ---------- Nội dung dưới top menu ---------- */

.shop-main {
  max-width: 460px;
  margin: 0 auto;
  padding: 28px 18px 40px;
}

/* Khung "Mời bạn chọn món!" tràn full chiều ngang, sát ngay dưới
   header (không padding top, không padding hai bên), không bo góc —
   dạng banner full-bleed, dùng cho cả 2 trạng thái đã/chưa đăng nhập. */
.shop-main-hero {
  max-width: none;
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.shop-main-hero .shop-footer {
  padding: 0 20px;
}

.shop-hero {
  background: #fff;
  border-radius: 0;
  padding: 18px 24px 8px;
  text-align: center;
  position: sticky;
  top: var(--sticky-header-h, 0px);
  z-index: 19;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.shop-hero-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.shop-hero h1 {
  font-family: var(--font-display);
  font-size: 22px;
  margin: 0;
  color: var(--ink);
}

.shop-hero p.sub {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.5;
}

/* Nút "Giỏ hàng" nằm cùng hàng với tiêu đề hero — chỉ dùng cho bản
   mobile khi khách chưa đăng nhập (xem media query 640px bên dưới),
   thay cho nút giỏ hàng vốn nằm trên header. */
.shop-hero-cart-link {
  display: none;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  position: relative;
  border-radius: 50%;
  border: none;
  background: var(--brand-50);
  color: var(--brand-700);
  text-decoration: none;
}
.shop-hero-cart-link:hover {
  background: var(--brand-100);
}
.shop-hero-cart-link .shop-icon-badge {
  position: absolute;
  top: -4px;
  right: -4px;
}

@media (max-width: 640px) {
  .shop-hero-cart-link {
    display: inline-flex;
  }
}

.shop-footer {
  text-align: center;
  color: var(--ink-soft);
  font-size: 12px;
  margin-top: 28px;
}

/* =====================================================
   Modal (đăng nhập / đăng ký / quên mật khẩu) — tích hợp
   trực tiếp trên index.php, dùng lại style của .recovery-*
   ===================================================== */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(16, 33, 58, 0.5);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.modal-overlay.is-open {
  visibility: visible;
  opacity: 1;
}

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 44px 32px 32px;
}

.modal-overlay:not(.is-open) .modal-panel {
  transform: translateY(8px);
}
.modal-overlay.is-open .modal-panel {
  transform: translateY(0);
  transition: transform 0.18s ease;
}

.modal-close {
  position: absolute;
  z-index: 5; /* nổi trên .modal-heading (position:relative; z-index:1) — nếu không, Android Chrome không nhận chạm vào nút X */
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--brand-50);
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  -webkit-tap-highlight-color: transparent; /* bỏ ô vuông xám/xanh nháy lên khi chạm trên Android */
  touch-action: manipulation;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.modal-close:hover {
  background: var(--brand-100, var(--brand-50));
  color: var(--brand-700);
}
.modal-close:active {
  background: var(--brand-100, var(--brand-50));
  color: var(--brand-700);
  transform: scale(0.92);
}
.modal-close:focus { outline: none; }
.modal-close:focus-visible {            /* giữ vòng focus khi dùng bàn phím */
  outline: 2px solid var(--brand-400, var(--brand-600));
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .modal-panel {
    padding: 36px 22px 26px;
  }
}

/* ---------- Modal gọn: bỏ avatar tròn + chip "Khách hàng",
   thu nhỏ khoảng cách để hạn chế cuộn trang trên di động ---------- */

.modal-panel-compact {
  padding: 26px 26px 24px;
}

.modal-heading {
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
  padding-right: 24px; /* tránh đè lên nút đóng */
}

.modal-heading h1 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 4px;
  color: var(--ink);
}

.modal-heading p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.4;
}

.modal-panel-compact .success-box,
.modal-panel-compact .error-box {
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}

.modal-panel-compact .recovery-desc {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.45;
}

.modal-panel-compact .input-group {
  margin-bottom: 12px;
}

.modal-panel-compact .input-group label {
  font-size: 12.5px;
  margin-bottom: 4px;
}

.modal-panel-compact .input-group .input,
.modal-panel-compact .input-group input {
  padding: 11px 14px;
  font-size: 14.5px;
}

.modal-panel-compact .input-hint {
  margin-top: 5px;
  margin-bottom: 12px;
  font-size: 11.5px;
  color: var(--ink-soft);
  line-height: 1.4;
}

.modal-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.modal-form-row .input-group {
  margin-bottom: 0;
}

.modal-panel-compact .btn-primary {
  padding: 12px 18px;
  font-size: 15px;
}

.modal-panel-compact .footer-links {
  margin-top: 12px;
}

.modal-panel-compact .footer-links a {
  font-size: 13px;
}

@media (max-width: 480px) {
  .shop-hero h1 {
    font-size: 15px; /* Tùy chỉnh kích thước chữ bạn muốn ở điện thoại */
  }
  .modal-panel-compact {
    padding: 24px 18px 20px;
  }
  .modal-form-row {
    gap: 8px;
  }
}

/* ================= Trang đặt hàng: danh mục + sản phẩm (chip) ================= */

.buy-section {
  max-width: 920px;
  margin: 0 auto;
  padding: 6px 20px 0;
}

.buy-cats {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 16px;
  margin: 0 -20px;
  padding-left: 20px;
  padding-right: 20px;
  scrollbar-width: none;
  position: sticky;
  top: var(--sticky-chips-top, 0px);
  z-index: 18;
  background: #fff;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}
.buy-cats::-webkit-scrollbar { display: none; }

.buy-cat-chip {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  border: none;
  background: #f2f2f5;
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.buy-cat-chip:hover {
  background: var(--brand-50);
  color: var(--brand-700);
}
.buy-cat-chip.is-active {
  color: #fff;
  background: var(--brand-500);
  box-shadow: 0 2px 8px -2px rgba(43, 125, 255, 0.45);
}

@media (max-width: 640px) {
  /* Khối chip danh mục: nền trắng, nút chip màu xanh nhạt (brand-50),
     riêng chip đang chọn dùng tông xanh nhạt hơn brand-500 mặc định. */
  .buy-cats {
    background: #fff;
  }
  .buy-cat-chip {
    background: var(--brand-50);
    color: var(--brand-700);
    border-radius: 14px;
    box-shadow: none;
    transition: background 0.12s ease, color 0.12s ease;
  }
  .buy-cat-chip:hover {
    background: var(--brand-50);
    color: var(--brand-700);
  }
  /* Hiệu ứng bấm: chuyển màu nền đậm/nhạt (giống các nút trong topbar). */
  .buy-cat-chip:active {
    background: #dde9ff;
  }
  .buy-cat-chip.is-active {
    background: var(--brand-400);
    color: #fff;
    box-shadow: none;
  }
  .buy-cat-chip.is-active:active {
    background: var(--brand-500);
  }
}

.buy-cat-group {
  margin-bottom: 30px;
}

.buy-cat-title {
  font-family: var(--font-display);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 14px;
}

.buy-products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 640px) {
  .buy-products {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

@media (min-width: 1080px) {
  .buy-products {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---- Chip món: nửa trái là ảnh vuông bo góc, gạch dọc mỏng phân tách,
   nửa phải hiện tên + giá.
   Dùng CSS Grid với minmax(0, 1fr) thay vì flex % để 2 nửa co giãn đúng
   theo bề rộng chip thật, tránh bị tràn khi chip hẹp (lưới 2 cột/điện thoại). ---- */
.buy-product-card {
  position: relative;
  text-align: left;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(16, 42, 88, 0.05);
  padding: 8px;
  cursor: pointer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  overflow: hidden;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.buy-product-card:hover {
  transform: translateY(-1px);
  border-color: var(--brand-300);
  box-shadow: 0 4px 12px -6px rgba(16, 42, 88, 0.15);
}

.buy-product-thumb-half {
  position: relative;
  min-width: 0;
  display: flex;
}

.buy-product-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm, 10px);
  object-fit: cover;
}
.buy-product-thumb--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-50);
  color: var(--brand-300);
}

/* Huy hiệu kính lúp ở góc ảnh — chỉ bấm vào đây mới mở ảnh lớn.
   Dùng tông xanh nhạt đồng bộ với hệ thống (brand-50 nền / brand-600 icon,
   giống .shop-icon-btn-box khi hover). */
.buy-product-zoom-badge {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-50);
  color: var(--brand-600);
  border: 1px solid #fff;
  box-shadow: 0 1px 4px rgba(16, 42, 88, 0.25);
  cursor: pointer;
}
.buy-product-zoom-badge:hover,
.buy-product-zoom-badge:focus-visible {
  background: var(--brand-100);
  color: var(--brand-700);
  outline: none;
}

/* Icon dấu "+" ở góc chip món — gợi ý cho khách rằng bấm vào chip là thêm món. */
/* Icon dấu "+" ở góc chip món — gợi ý cho khách rằng bấm vào chip là thêm món.
   Dùng cùng tông xanh nhạt với icon kính lúp để đồng bộ hệ thống. */
.buy-product-add-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-50);
  color: var(--brand-600);
  border: 1px solid #fff;
  box-shadow: 0 1px 4px rgba(16, 42, 88, 0.25);
  pointer-events: none;
  z-index: 1;
}

.buy-product-divider {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  margin: 2px 0;
}

.buy-product-info-half {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}

.buy-product-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.buy-product-price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--brand-700);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.buy-empty {
  color: var(--ink-soft);
  font-size: 13.5px;
  text-align: center;
  padding: 30px 20px;
}

@media (max-width: 640px) {
  .buy-cat-chip[data-cat="all"] {
    display: none;
  }
}


/* ---------- Lightbox xem ảnh lớn của món (trang index) ---------- */

.img-lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(16, 42, 88, 0.55);
  z-index: 1200;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.img-lightbox-overlay.is-open {
  display: flex;
}

.img-lightbox-box {
  position: relative;
  max-width: min(420px, 92vw);
  width: 100%;
}

.img-lightbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--ink-soft);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(16, 42, 88, 0.25);
}

#buyImageLightboxImg {
  display: block;
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: #fff;
}

/* ---------- Modal: chọn size / topping / đường / đá / ghi chú ---------- */

.modal-panel-product {
  max-width: 480px;
}

.pd-section {
  margin-bottom: 18px;
}

.pd-section-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 10px;
}

.pd-option-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Mỗi hàng: hàng trên là ô tròn tick + nhãn (size / đường / đá) nằm kế
   bên nhau, hàng dưới là giá (chỉ khối size) thụt vào thẳng hàng với nhãn
   phía trên (bỏ qua khoảng của ô tròn tick). Phong cách nổi khối lồi/lõm:
   nút nền trắng "nổi" lên khỏi nền brand-50 của khối chứa (.pd-combo-row),
   khi chọn thì "lõm" xuống như bị ấn vào — không dùng viền màu để báo
   trạng thái chọn. Bản thân .pd-combo-row không đổ bóng, chỉ từng nút. */
.pd-option-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  padding: 11px 14px;
  border: 1.5px solid var(--brand-100);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 5px 5px 10px var(--nm-dark), -5px -5px 10px var(--nm-light);
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.pd-option-row.is-selected {
  border-color: var(--brand-500);
  box-shadow: inset 4px 4px 8px var(--nm-dark), inset -4px -4px 8px var(--nm-light);
}

.pd-option-top {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

/* Vẽ lại ô tick tròn theo phong cách lồi/lõm thay vì radio mặc định của
   trình duyệt — giữ nguyên thẻ <input type="radio"> nên không đổi HTML/JS. */
.pd-option-row input {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: inset 2px 2px 4px var(--nm-dark), inset -2px -2px 4px var(--nm-light);
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.pd-option-row input:checked {
  box-shadow: 1px 1px 3px var(--nm-dark), -1px -1px 3px var(--nm-light);
}
.pd-option-row input:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-500);
  transform: translate(-50%, -50%);
}

.pd-option-label {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.pd-option-row.is-selected .pd-option-label {
  color: var(--brand-600);
}

.pd-option-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-700);
  white-space: nowrap;
  padding-left: 26px;
}

/* ---------- Khối gộp Size / Đường / Đá, 3 cột có đường phân tách dọc.
   Khối chứa (.pd-combo-row) mang nền brand-50 (đúng màu topbar mobile),
   không đổ bóng — chỉ từng nút .pd-option-row bên trong mới nổi khối. ---------- */
.pd-combo-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--nm-bg);
  border-radius: 20px;
  padding: 14px 12px;
}

.pd-combo-col {
  flex: 1;
  min-width: 0;
  padding: 0 10px;
}
.pd-combo-col:first-child {
  padding-left: 0;
}
.pd-combo-col:last-child {
  padding-right: 0;
}

.pd-combo-divider {
  width: 1px;
  align-self: stretch;
  background: var(--line);
  flex-shrink: 0;
}

/* Thu gọn size/đường/đá bên trong từng cột hẹp cho vừa 3 cột trên 1 hàng.
   min-height cố định để các nút đồng nhất kích thước với nhau dù nội
   dung 1 dòng (đường/đá) hay 2 dòng (size có thêm giá bên dưới). */
.pd-combo-col .pd-option-list {
  gap: 8px;
}
.pd-combo-col .pd-option-row {
  gap: 2px;
  padding: 8px 10px;
  min-height: 54px;
}
.pd-combo-col .pd-option-top {
  gap: 6px;
}
.pd-combo-col .pd-option-row input {
  width: 15px;
  height: 15px;
}
.pd-combo-col .pd-option-row input:checked::after {
  width: 7px;
  height: 7px;
}
.pd-combo-col .pd-option-label {
  font-size: 12.5px;
}
.pd-combo-col .pd-option-price {
  font-size: 11px;
  padding-left: 21px;
}

/* Dòng lưu ý nhỏ hiện ra khi chọn "Ít ngọt" — khung viền xanh nhạt, rộng
   bằng đúng nút (nằm cùng cột .pd-combo-col nên tự ăn theo chiều rộng). */
.pd-inline-note {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1.5px solid var(--brand-300);
  border-radius: var(--radius-md);
  background: #fff;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--brand-700);
}

/* ---------- Topping: dùng chung class .buy-product-card với thẻ món ở
   trang chính nên layout (avatar trái, gạch dọc, tên/giá phải, huy hiệu
   "+" góc trên) giống hoàn toàn — .pd-topping-card chỉ bổ sung trạng thái
   chọn (viền xanh, nền nhạt, xoay "+" thành "×") và ẩn checkbox thật. ---------- */
/* Nút "Topping" (tiêu đề khối, popup chọn món) — món setup "không chọn Topping" trong
   settings.php: giữ nguyên kiểu chữ của .pd-section-title, chỉ thêm layout ngang + icon
   mở/đóng. Món cho chọn topping bình thường: vẫn cùng khối này nhưng ở dạng tĩnh (không bấm được). */
.pd-topping-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: default;
}
.pd-topping-toggle.is-toggle { cursor: pointer; }
.pd-topping-toggle-chevron {
  flex-shrink: 0;
  display: none;
  color: var(--ink-soft);
  transition: transform 0.2s ease;
}
.pd-topping-toggle.is-toggle .pd-topping-toggle-chevron { display: inline-flex; }
.pd-topping-toggle.is-open .pd-topping-toggle-chevron { transform: rotate(180deg); }

/* Khối topping trượt mở/đóng: chiều cao 0 -> nội dung thật khi mở, có hiệu ứng trượt */
.pd-topping-collapse {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.25s ease;
}
.pd-topping-collapse.is-open { grid-template-rows: 1fr; }
.pd-topping-collapse > .pd-topping-grid { min-height: 0; }

.pd-topping-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.pd-topping-card.is-selected {
  background: var(--brand-50);
}

/* Icon "+" của riêng topping: đặt ở góc dưới-phải (khác với chip món ở
   trang chính đang để góc trên) — giữ nguyên màu như chip món trang chính. */
.pd-topping-card .buy-product-add-badge {
  top: auto;
  bottom: 6px;
  right: 6px;
}

.pd-topping-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Chọn rồi thì xoay dấu "+" thành "×" (gợi ý bấm lại để bỏ chọn) và tô đậm. */
.pd-topping-card.is-selected .buy-product-add-badge {
  background: var(--brand-500);
  color: #fff;
  transform: rotate(45deg);
}

.pd-qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 6px 8px;
  flex-shrink: 0;
}

.pd-qty-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.pd-qty-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  min-width: 20px;
  text-align: center;
}

.pd-note-input {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 11px 14px;
  font-size: 14px;
  font-family: var(--font-body);
  color: var(--ink);
  resize: vertical;
  min-height: 56px;
  box-sizing: border-box;
}
.pd-note-input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px var(--brand-50);
}

.pd-footer {
  position: sticky;
  bottom: -24px;
  margin: 20px -26px -24px;
  padding: 16px 26px;
  background: #fff;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.pd-footer .btn-primary {
  flex: 1;
  max-width: 220px;
  padding: 12px 16px;
  font-size: 14.5px;
  /* Nhạt hơn 2 tone so với bản trước (brand-600→800), giờ về brand-400→600. */
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  /* Giảm bóng đổ so với bản trước (14px/26px) cho nhẹ nhàng hơn. */
  box-shadow: 0 6px 14px -8px var(--brand-500);
}
.pd-footer .btn-primary:hover {
  box-shadow: 0 8px 16px -8px var(--brand-500);
}

@media (max-width: 480px) {
  .pd-footer {
    margin: 16px -18px -20px;
    padding: 14px 18px;
  }
}

/* ---------- Giỏ hàng (drawer trong modal) ---------- */

.cart-line {
  display: flex;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.cart-line:last-child {
  border-bottom: none;
}

.cart-line-info {
  flex: 1;
  min-width: 0;
}

.cart-line-name {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
}

.cart-line-meta {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
  line-height: 1.5;
}

.cart-line-price {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--brand-700);
  white-space: nowrap;
}


.cart-empty {
  text-align: center;
  color: var(--ink-soft);
  font-size: 13.5px;
  padding: 30px 0;
}

/* ---------- Sửa / Xóa món trong giỏ hàng ---------- */

.cart-line-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.cart-line-icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 5px 10px 5px 8px;
  background: #fff;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink-soft);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.cart-line-edit:hover {
  border-color: var(--brand-400);
  background: var(--brand-50);
  color: var(--brand-700);
}

.cart-line-remove {
  color: var(--danger);
}
.cart-line-remove:hover {
  border-color: var(--danger);
  background: rgba(220, 38, 38, 0.06);
}

/* ---------- Tổng kết giỏ hàng ---------- */

.cart-summary {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1.5px solid var(--line);
}

.cart-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.cart-summary-row-discount span:last-child {
  color: var(--danger);
  font-weight: 600;
}

.cart-summary-row-total {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}

.cart-summary-details-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  margin-top: 8px;
  padding: 9px 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--brand-50);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12.5px;
  color: var(--brand-600);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.cart-summary-details-toggle:hover {
  background: var(--brand-100);
  color: var(--brand-700);
}
.cart-summary-details-chevron {
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.cart-summary-details-toggle[aria-expanded="true"] .cart-summary-details-chevron {
  transform: rotate(180deg);
}

.cart-summary-details {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}
.cart-summary-details-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.cart-summary-details.is-open {
  grid-template-rows: 1fr;
}
.cart-summary-details.is-open .cart-summary-details-inner {
  opacity: 1;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  margin-top: 2px;
}

/* ---------- Chọn hình thức thanh toán ---------- */

.cart-pay-methods {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  margin-top: 16px;
}

.cart-pay-btn {
  border: none;
  background: none;
  padding: 12px 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: center;
  min-width: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.cart-pay-btn:hover {
  color: var(--brand-600);
}
.cart-pay-btn.is-selected {
  background: var(--brand-100);
  color: var(--brand-800);
  position: relative;
}
.cart-pay-btn.is-selected::before {
  content: '✓';
  display: inline-block;
  margin-right: 5px;
  color: var(--brand-600);
  font-weight: 900;
}

.cart-pay-divider {
  width: 1.5px;
  align-self: stretch;
  background: var(--line);
}

.cart-pay-panel {
  max-height: 0;
  margin-top: 0;
  padding: 0 14px;
  overflow: hidden;
  opacity: 0;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  text-align: center;
  transition: max-height 0.32s ease, opacity 0.25s ease, margin-top 0.28s ease, padding 0.28s ease;
}
.cart-pay-panel.is-open {
  max-height: 600px;
  margin-top: 14px;
  padding: 14px;
  opacity: 1;
}

.cart-qr-box {
  width: 180px;
  height: 180px;
  margin: 0 auto 10px;
  border-radius: var(--radius-md);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.cart-qr-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cart-qr-box img.cart-qr-missing {
  display: none;
}

.cart-qr-box:has(img.cart-qr-missing)::after {
  content: 'Chưa có mã QR, vui lòng liên hệ shop';
  font-size: 12px;
  color: var(--ink-soft);
  padding: 0 10px;
}

.cart-pay-hint {
  margin: 0 0 12px;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

.cart-pay-transfer-note {
  margin: 0 0 12px;
  font-size: 13.5px;
  color: var(--ink);
}
.cart-pay-transfer-note b {
  color: var(--brand-700);
  letter-spacing: 0.5px;
}

/* ---------- Chọn cách nhận hàng: Đến lấy / Ship tận nơi ---------- */

.cart-section-divider {
  margin-top: 16px;
  border-top: 1.5px solid var(--line);
}

.cart-section-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin: 14px 0 10px;
}

.cart-guest-signup-hint {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0 0 12px;
  line-height: 1.5;
}
.cart-guest-signup-hint a {
  color: var(--brand-600);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

.cart-guest-required-mark {
  color: var(--danger);
}

.cart-fulfill-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  margin-top: 18px;
}

.cart-fulfill-btn {
  border: none;
  background: none;
  padding: 12px 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: center;
  min-width: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.cart-fulfill-btn:hover {
  color: var(--brand-600);
}
.cart-fulfill-btn.is-selected {
  background: var(--brand-100);
  color: var(--brand-800);
  position: relative;
}
.cart-fulfill-btn.is-selected::before {
  content: '✓';
  display: inline-block;
  margin-right: 5px;
  color: var(--brand-600);
  font-weight: 900;
}

.cart-fulfill-divider {
  width: 1.5px;
  align-self: stretch;
  background: var(--line);
}

.cart-fulfill-summary {
  margin-top: 10px;
}

.cart-fulfill-summary-row {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.6;
}
.cart-fulfill-summary-row b {
  font-weight: 700;
}
.cart-fulfill-icon {
  display: inline-block;
  vertical-align: -2px;
  color: var(--brand-600);
  margin-right: 2px;
}

.cart-fulfill-summary-sub {
  font-size: 12.5px;
  color: var(--ink-soft);
}

.cart-fulfill-summary-warn {
  color: var(--danger);
}

.cart-fulfill-summary-link {
  border: none;
  background: none;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--brand-600);
  cursor: pointer;
  text-decoration: underline;
}
.cart-fulfill-summary-link:hover {
  color: var(--brand-700);
}

/* ---------- Modal: Thông tin cửa hàng (Đến lấy) ---------- */

.cart-store-info {
  text-align: center;
}

.cart-store-logo-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  margin: 0 auto 12px;
}

.cart-store-logo {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  background: var(--brand-50);
}
.cart-store-logo.cart-store-logo-missing {
  display: none;
}
.cart-store-logo-wrap:has(.cart-store-logo-missing) {
  background: var(--brand-50);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-store-logo-wrap:has(.cart-store-logo-missing)::before {
  content: '';
  width: 32px;
  height: 32px;
  background: var(--brand-300);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 3l9 6.5'/%3E%3Cpath d='M5 9v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 3l9 6.5'/%3E%3Cpath d='M5 9v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V9'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Icon kính lúp trên logo cửa hàng — cùng kiểu dáng, tông xanh nhạt với chip món */
.cart-store-logo-zoom {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-50);
  color: var(--brand-600);
  border: 1px solid #fff;
  box-shadow: 0 1px 4px rgba(16, 42, 88, 0.25);
  cursor: pointer;
}
.cart-store-logo-zoom:hover,
.cart-store-logo-zoom:focus-visible {
  background: var(--brand-100);
  color: var(--brand-700);
  outline: none;
}

.cart-store-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}

.cart-store-address {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------- Nút "Chỉ đường": 1 nút dài chia 2 (Google Maps / Apple Maps) ---------- */

.cart-store-direction-split {
  display: flex;
  align-items: stretch;
  width: 100%;
  margin-top: 16px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  box-shadow: 0 14px 26px -12px var(--brand-600);
}

.cart-store-direction-btn {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 14px 10px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background 0.12s ease;
}
.cart-store-direction-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

.cart-store-direction-divider {
  width: 1.5px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.35);
}

.cart-gps-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--brand-100);
  background: var(--brand-50);
  color: var(--brand-700);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.cart-gps-share-btn svg {
  flex-shrink: 0;
  color: var(--brand-600);
}
.cart-gps-share-btn:hover {
  background: var(--brand-100);
  border-color: var(--brand-300);
}
.cart-gps-share-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.cart-gps-share-btn.is-success {
  background: #f0fdf4;
  border-color: #bbf7d0;
  color: #15803d;
}
.cart-gps-share-btn.is-success svg {
  color: #16a34a;
}
.cart-gps-share-btn.is-success:hover {
  background: #dcfce7;
  border-color: #86efac;
}

/* ---------- Nút phụ dùng chung (viền, không nền đặc) ---------- */

.btn-secondary {
  display: inline-block;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 11px 20px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--brand-700);
  background: #fff;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.btn-secondary:hover {
  border-color: var(--brand-400);
  background: var(--brand-50);
}

/* ---------- Nút giỏ hàng "nháy" thu hút chú ý sau khi thêm món ---------- */

.js-open-cart.is-cart-pulse .shop-icon-btn-box,
.shop-hero-cart-link.js-open-cart.is-cart-pulse,
.shop-header-cart-link.js-open-cart.is-cart-pulse {
  animation: cartPulseBox 0.6s ease;
}

.js-open-cart.is-cart-pulse .shop-icon-badge {
  animation: cartPulseBadge 0.6s ease;
}

@keyframes cartPulseBox {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(43, 125, 255, 0.55); }
  35% { transform: scale(1.22); box-shadow: 0 0 0 8px rgba(43, 125, 255, 0); }
  60% { transform: scale(0.94); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(43, 125, 255, 0); }
}

@keyframes cartPulseBadge {
  0% { transform: scale(1); }
  40% { transform: scale(1.5); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* ---------- Tab trong modal giỏ hàng: "Đơn hàng mới" / "Đơn hàng đã gửi" ---------- */

.cart-tabs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  margin-top: 14px;
}

.cart-tab-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: none;
  padding: 12px 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink-soft);
  cursor: pointer;
  text-align: center;
  min-width: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.cart-tab-btn:hover {
  color: var(--brand-600);
}
.cart-tab-btn.is-selected {
  background: var(--brand-50);
  color: var(--brand-700);
}

.cart-tab-divider {
  width: 1.5px;
  align-self: stretch;
  background: var(--line);
}

.cart-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--brand-500);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}

/* ---------- Danh sách "Đơn hàng đã gửi" ---------- */

#cartTabSent {
  margin-top: 16px;
}

.sent-order-card {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 10px;
}
.sent-order-card:last-child {
  margin-bottom: 0;
}
.sent-order-card.is-new {
  border-color: var(--brand-400);
  background: var(--brand-50);
  animation: sentOrderCardIn 0.25s ease;
}

.sent-order-new-flag {
  margin: 0 0 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-700);
}

.sent-order-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.sent-order-status {
  font-size: 13px;
  color: var(--ink-soft);
  white-space: nowrap;
  margin-left: auto;
  margin-right: 4px;
}

.sent-order-chevron {
  flex-shrink: 0;
  color: var(--ink-soft);
  transition: transform 0.18s ease;
}
.sent-order-card.is-expanded .sent-order-chevron {
  transform: rotate(180deg);
}

.sent-order-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: #888;
}

.sent-order-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.22s ease;
}
.sent-order-detail-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.sent-order-card.is-expanded .sent-order-detail {
  grid-template-rows: 1fr;
  margin-top: 10px;
}
.sent-order-card.is-expanded .sent-order-detail-inner {
  opacity: 1;
}

.sent-order-detail-loading {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}

.sent-order-detail-items {
  border-top: 1px dashed var(--line);
  padding-top: 8px;
  margin-bottom: 6px;
}
.sent-order-detail-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--ink);
  padding: 2px 0;
}
.sent-order-detail-item-note {
  font-size: 12px;
  color: var(--ink-soft);
  padding: 0 0 4px;
}

.sent-order-detail-row {
  font-size: 12.5px;
  color: var(--ink-soft);
  padding: 2px 0;
}
.sent-order-detail-total {
  color: var(--ink);
  border-top: 1px dashed var(--line);
  margin-top: 4px;
  padding-top: 6px;
}

.sent-order-cancel-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-pill);
  border: 1.5px solid #fecaca;
  background: #fef2f2;
  color: #b91c1c;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.sent-order-cancel-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

@keyframes sentOrderCardIn {
  from { transform: translateY(-6px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ==== Kiểm đếm tiền mở ca (open-shift.php) ==== */
.shift-table-wrap {
  overflow-x: auto;
  margin: 16px -2px;
}

.shift-table {
  width: 100%;
  min-width: 320px;
  border-collapse: collapse;
}
.shift-table th,
.shift-table td {
  padding: 8px 4px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.shift-table th {
  font-weight: 600;
  opacity: 0.7;
}
.shift-table .line-total {
  text-align: right;
  white-space: nowrap;
}
.shift-table-qty-col {
  width: 138px;
}

.shift-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: 700;
  margin: 12px 0 20px;
  padding-top: 12px;
  border-top: 2px solid var(--line);
}

.qty-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.qty-stepper-input {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 40px;
  min-width: 40px;
  padding: 6px 2px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--line);
  font-family: var(--font-body);
  font-size: 14px;
  text-align: center;
  color: var(--ink);
  -moz-appearance: textfield;
}
.qty-stepper-input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px var(--brand-50);
}
.qty-stepper-input::-webkit-outer-spin-button,
.qty-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty-stepper-btn {
  box-sizing: border-box;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  padding: 0;
}
.qty-stepper-btn.qty-minus {
  background: var(--danger-bg);
  color: var(--danger);
}
.qty-stepper-btn.qty-plus {
  background: var(--brand-50);
  color: var(--brand-700);
}
.qty-stepper-btn:active {
  filter: brightness(0.94);
}

/* ==== Tóm tắt ca (close-shift.php) ==== */
.shift-summary-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 16px;
  background: var(--brand-50);
}
.shift-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--ink-soft);
  padding: 4px 0;
}
.shift-summary-row-total {
  font-weight: 700;
  color: var(--brand-700);
  border-top: 1px dashed var(--line);
  margin-top: 4px;
  padding-top: 8px;
}

/* ============================================================
   pos.php — màn hình bán hàng tại quầy
   ============================================================ */

.pos-shell {
  height: 100vh;
  height: 100dvh; /* iPhone Safari: không bị thanh địa chỉ che */
  display: flex;
  flex-direction: column;
  background: #fff;
  font-family: var(--font-body);
  color: var(--ink);
  overflow: hidden;
}

/* ---- Topbar ---- */
/* [FIX] .pos-topbar / .pos-topbar-actions đã được dùng ở phần "Thanh trên cùng"
   (dòng ~522) cho các trang khác (thẻ trắng + đổ bóng + margin + border-top).
   Thêm tiền tố .pos-shell để rule POS thắng, và reset các thuộc tính cũ bị thừa hưởng. */
.pos-shell .pos-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: auto;
  min-height: 52px;
  padding: 6px 14px;
  margin: 0;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--line);
}
.pos-topbar-user {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pos-avatar-sm {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-500);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pos-topbar-name {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pos-shell .pos-topbar-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border-top: none;
}
.pos-pill-icon {
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}
.pos-pill-icon svg { width: 15px; height: 15px; }
.pos-pill-static {
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 9px;
  border-radius: var(--radius-pill);
}
.pos-pill-round {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  justify-content: center;
  background: #f5f7fc;
  color: var(--ink-soft);
  padding: 0;
}
.pos-badge-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  background: var(--danger);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #fff;
}
.pos-badge-dot.pos-badge-web { top: auto; bottom: -3px; right: -3px; background: #16a34a; }
.pos-btn-closeshift {
  display: flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: var(--danger-bg);
  color: var(--danger);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
}
.pos-btn-closeshift svg { width: 14px; height: 14px; }

/* ---- Layout chính ---- */
.pos-body {
  flex: 1;
  display: flex;
  min-height: 0;
  position: relative;
}

/* ---- Khối đơn hàng ---- */
.pos-order-panel {
  width: 260px;
  flex: 0 0 260px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  background: #fff;
}
.pos-cart-summary { display: none; }
.pos-order-panel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px 12px 0;
  overflow: hidden;
}
.pos-order-panel > .pos-order-actions { margin-top: 0; padding: 10px 12px 12px; }
.pos-backdrop { display: none; }

.pos-service-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.pos-service-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  aspect-ratio: 1 / 1;
  padding: 10px 4px;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  border: 1.5px solid var(--brand-300);
  color: var(--brand-700);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: hidden;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pos-service-tab .pos-tab-icon,
.pos-service-tab .pos-tab-text {
  position: relative;
  z-index: 1;
}
.pos-service-tab .pos-tab-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}
.pos-service-tab .pos-tab-text {
  display: block;
  line-height: 1.15;
}
/* Chọn xong: bỏ viền, nền đậm, chữ trắng. Không còn hiệu ứng động (sóng/bong bóng): lớp .pos-tab-fx trong HTML được ẩn hẳn. */
.pos-service-tab.is-active {
  background: #e7f7ec; /* nền active: xanh lá nhạt, đồng bộ nút danh mục */
  border-color: var(--success);
  color: var(--success-dark);
}
.pos-tab-fx { display: none; }

.pos-field-row { margin-bottom: 10px; }
.pos-ship-fields { display: flex; flex-direction: column; gap: 6px; }

/* Hàng "N món | Hủy đơn" phía trên danh sách món */
.pos-items-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pos-items-head-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.pos-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  border: none;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.pos-clear-btn svg { width: 14px; height: 14px; flex: 0 0 auto; }
.pos-clear-btn.is-confirm { background: var(--danger); color: #fff; }

/* ---- Đơn web (khách đặt từ trang index) ---- */
.pos-web-empty { padding: 26px 10px; text-align: center; color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; }
.pos-web-card {
  margin: 8px 0;
  padding: 12px 12px 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* Đơn đang mở chi tiết: active giống nút chọn size (.pos-option-chip.is-selected) */
.pos-web-card.is-open { background: #e7f7ec; border-color: var(--success); }
.pos-web-tap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pos-web-card.is-new { animation: posWebFlash 2.6s ease; }
@keyframes posWebFlash {
  0%, 55% { background: #dff5e7; }
  100%    { background: transparent; }
}
.pos-web-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.pos-web-code { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.pos-web-age { font-size: 10.5px; font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.pos-web-status {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 11px;
  font-weight: 700;
}
.pos-web-status.is-pending   { background: #fff2cf; color: #9a5a00; }
.pos-web-status.is-shipping  { background: #e3f6ea; color: #17803d; }
.pos-web-meta { margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--ink); word-break: break-word; }
.pos-web-meta a { color: var(--brand-700); font-weight: 700; text-decoration: none; }
.pos-web-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--ink); }
/* Chi tiết món: thu gọn = 0 chiều cao, mở = trượt xuống theo nội dung */
.pos-web-items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; font-size: 12px; }
.pos-web-items-in { min-height: 0; overflow: hidden; }
.pos-web-card.is-open .pos-web-items { grid-template-rows: 1fr; }
.pos-web-items-in > .pos-web-item:first-child { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--success); }
.pos-web-item { padding: 3px 0; line-height: 1.35; }
.pos-web-item-sub { margin-top: 1px; font-size: 10.5px; color: var(--ink-soft); }
.pos-web-actions { display: flex; gap: 6px; margin-top: 10px; }
.pos-web-btn {
  position: relative; /* làm mốc cho lớp hiệu ứng .pos-pay-fx */
  flex: 1 1 auto;
  padding: 10px 6px;
  border: none;
  border-radius: 10px;
  background: var(--brand-500);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, background-color 0.15s ease, color 0.15s ease;
}
.pos-web-btn.is-cancel { flex: 0 0 auto; padding: 10px 14px; background: var(--danger-bg); color: var(--danger); }
.pos-web-btn.is-cancel.is-arm { background: var(--danger); color: #fff; }
/* Phản hồi khi nhấn: nút thu nhỏ + đậm màu; sau khi bấm chuyển xanh lá "Đang xử lý…" và khoá cả nhóm nút */
.pos-web-btn:active { transform: scale(0.95); background: var(--brand-800); }
.pos-web-btn.is-cancel:active { background: var(--danger); color: #fff; }
/* is-loading / is-success: animation "rót đầy ly" dùng chung với nút Thanh toán (xem khối ".pos-btn-pay" bên dưới) */
.pos-web-btn.is-loading,
.pos-web-btn.is-success { transform: none; }
.pos-web-actions.is-busy { pointer-events: none; }
.pos-web-actions.is-busy .pos-web-btn:not(.is-loading):not(.is-success) { opacity: 0.45; }

/* Banner báo đơn web mới (bấm để mở danh sách) */
.pos-web-alert {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translate(-50%, -24px);
  z-index: 85;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 92vw;
  padding: 10px 12px 10px 16px;
  border: none;
  border-radius: 999px;
  background: #16a34a;
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(22, 163, 74, 0.35);
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.pos-web-alert.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.pos-web-alert-go { padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.24); font-size: 11.5px; }

/* Form Giao hàng: lấy thông tin từ đơn web */
.pos-ship-pick-btn {
  padding: 9px 10px;
  border: none;
  border-radius: 10px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pos-ship-pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow-y: auto; }
.pos-ship-pick-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pos-ship-pick-item small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--ink-soft); }
.pos-ship-pick-item:active { background: var(--brand-50); border-color: var(--brand-500); }

/* Nút chọn bàn: 01, 02, ... (số bàn cài trong settings.php) */
.pos-table-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 6px;
  max-height: 138px; /* ~3 hàng, nhiều bàn hơn thì cuộn */
  overflow-y: auto;
}
.pos-table-btn {
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pos-table-btn.is-selected {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}
.pos-input, .pos-voucher-input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
}
.pos-input:focus, .pos-voucher-input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px var(--brand-50);
}

/* Nút "x" xoá nhanh riêng từng ô nhập (vd. 3 trường Tên khách / SĐT / Địa chỉ ở khối Giao hàng) */
.pos-input-clearable { position: relative; }
.pos-input-clearable .pos-input { padding-right: 32px; }
.pos-input-clear-btn {
  display: none;
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pos-input-clearable.has-value .pos-input-clear-btn { display: flex; }
.pos-input-clear-btn:active { background: var(--danger-bg); color: var(--danger); }

.pos-customer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
}
.pos-customer-empty, .pos-customer-selected {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
  min-width: 0;
}
.pos-customer-empty svg, .pos-customer-selected svg {
  width: 17px; height: 17px; flex: 0 0 auto; color: var(--brand-500);
}
.pos-customer-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pos-customer-points { font-size: 11px; color: var(--ink-soft); }
.pos-link-btn {
  border: none;
  background: none;
  color: var(--brand-500);
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
  padding: 0;
}
.pos-link-danger { color: var(--danger); }

.pos-order-items {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 8px;
}
.pos-order-empty {
  font-size: 12.5px;
  color: var(--ink-soft);
  padding: 16px 4px;
  text-align: center;
}
.pos-order-item {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.pos-order-item-main { cursor: pointer; }
.pos-order-item-name-row { display: flex; align-items: center; gap: 6px; }
.pos-order-item-name { font-size: 12.5px; font-weight: 600; flex: 1 1 auto; min-width: 0; }
.pos-order-item-meta { font-size: 10.5px; color: var(--ink-soft); margin-top: 2px; }
.pos-order-item-side { text-align: right; flex: 0 0 auto; }
.pos-order-item-price { font-size: 12.5px; font-weight: 600; margin-top: 4px; }
/* Nút xóa nhanh (x) cuối dòng tên món — cùng tông màu với nút "Hủy đơn" (.pos-clear-btn) */
.pos-order-item-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: none;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger);
  cursor: pointer;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.pos-order-item-delete svg { width: 11px; height: 11px; flex: 0 0 auto; }
.pos-order-item-delete:active { background: var(--danger); color: #fff; }
.pos-mini-stepper {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  justify-content: flex-end;
}
/* Nút +/- cùng tông màu nền/viền với khối nút Khách/Voucher (.pos-quick-actions) */
.pos-mini-btn {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid var(--brand-300);
  background: var(--brand-50);
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.pos-order-meta { border-top: 1px solid var(--line); padding-top: 8px; }
.pos-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12.5px;
  gap: 8px;
}
.pos-meta-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  white-space: nowrap;
}
.pos-meta-label svg { width: 15px; height: 15px; }
.pos-voucher-value { flex: 1; min-width: 0; text-align: right; }
.pos-voucher-input { text-align: right; padding: 6px 9px; font-size: 12px; }
.pos-voucher-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--brand-700);
  font-weight: 700;
  font-size: 12px;
}

.pos-switch { display: inline-flex; cursor: pointer; }
.pos-switch input { display: none; }
.pos-switch-track {
  width: 32px; height: 18px;
  border-radius: var(--radius-pill);
  background: var(--line);
  position: relative;
  transition: background 0.15s ease;
}
.pos-switch-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.15s ease;
}
.pos-switch input:checked + .pos-switch-track { background: var(--brand-500); }
.pos-switch input:checked + .pos-switch-track .pos-switch-thumb { transform: translateX(14px); }

/* Hàng "Dùng điểm tích lũy": tách 2 dòng — dòng trên là nhãn, dòng dưới là số điểm + công tắc bật/tắt */
.pos-points-row { flex-direction: column; align-items: stretch; gap: 4px; }
.pos-points-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.pos-points-count { color: var(--brand-700); font-weight: 700; }
.pos-points-hint { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
.pos-points-hint:empty { display: none; }
.pos-switch input:disabled + .pos-switch-track { opacity: 0.45; cursor: not-allowed; }

/* Khối cấu hình chương trình tích điểm (settings.php > Cài đặt kết nối) */
.points-config-block { margin-top: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
.points-config-title { font-weight: 700; margin-bottom: 8px; }
.points-config-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.points-config-grid > div { min-width: 0; }
.points-config-grid .input { width: 100%; min-width: 0; }
.points-config-summary { margin-top: 8px; font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.settings-field-hint { display: block; margin-top: 4px; color: #888; font-size: 12px; }

/* Hàng "Dùng điểm tích lũy" trong popup Khách hàng: chỉ dùng trên mobile (desktop đã có #posPointsRow trong cột giỏ hàng) */
.pos-modal-points-row { display: none; }

.pos-order-totals { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
.pos-totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--ink-soft);
  padding: 3px 0;
}
.pos-totals-discount { color: var(--danger); }
/* Dòng "Tiền khách đưa" / "Tiền thừa" — chỉ hiện sau khi chọn mức tiền ở cột trượt "Tiền khách đưa" */
.pos-totals-cash { color: var(--ink); font-weight: 600; cursor: pointer; }
.pos-totals-cash + .pos-totals-cash span:last-child { color: var(--danger); font-weight: 800; }

/* ===== Cột trượt "Tiền khách đưa" (#modal-cashamount) — cùng khổ cột Khách/Voucher ===== */
#modal-cashamount .modal-panel-slidecol { gap: 12px; }
.pos-cash-due-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 15px;
  font-weight: 700;
}
.pos-cash-due-row span:last-child { font-size: 20px; font-weight: 800; }
.pos-cash-due-row[hidden] { display: none; }

/* ===== Cột "Lịch sử hóa đơn" (#modal-history) ===== */
.pos-history-head {
  flex: 0 0 auto;
  padding: 2px 2px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.pos-history-title { font-family: var(--font-display); font-size: 16px; font-weight: 800; color: var(--ink); }
.pos-history-sum { margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--brand-700); }
.pos-history-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pos-history-empty { padding: 24px 6px; text-align: center; font-size: 12.5px; color: var(--ink-soft); }
.pos-history-item { padding: 10px 2px; border-bottom: 1px solid var(--line); }
.pos-history-item.is-cancelled .pos-history-code,
.pos-history-item.is-cancelled .pos-history-total { text-decoration: line-through; color: var(--ink-soft); }
.pos-history-item-top,
.pos-history-item-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pos-history-code { font-size: 13.5px; font-weight: 800; color: var(--ink); }
.pos-history-time { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.pos-history-meta { margin-top: 2px; font-size: 11.5px; color: var(--ink-soft); }
.pos-history-items {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pos-history-item-bottom { margin-top: 8px; }
.pos-history-total { font-size: 14px; font-weight: 800; color: var(--brand-600); }
.pos-history-print {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1.5px solid var(--brand-500);
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-700);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pos-history-print svg { width: 16px; height: 16px; }
.pos-history-print:active { background: var(--brand-100); }
.pos-history-print:disabled { opacity: 0.6; cursor: default; }
/* Tiêu đề "Khách đưa" (xanh lá) trên khối chip mệnh giá — dòng trên là nhãn, dòng dưới là số tiền đã chọn (ẩn khi chưa chọn); dưới là Cần thu (xanh dương) -> Tiền thừa (cam) */
.pos-cash-block-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 80px;
  flex: 0 0 auto;
  margin: 0 -26px; /* desktop: tràn hết chiều ngang cột (bù padding 26px của .modal-panel-compact) */
  border: none;
  border-radius: 0;
  background: var(--success-dark); /* đảo màu so với trước (nền #e7f7ec / chữ success-dark) */
  color: #e7f7ec;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
}
.pos-cash-title-amount {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}
.pos-cash-title-amount[hidden] { display: none; }
@media (max-width: 900px) {
  /* mobile: dính sát mép trên + tràn hết chiều ngang cột (bù padding 16px 14px của .modal-panel-slidecol) */
  .pos-cash-block-title { margin: -16px -14px 0; }
}

/* pos.php (≥901px): tiêu đề khối "Khách đưa" như mobile */
@media (min-width: 901px) {
  :where(body.pos-body-tag) .pos-cash-block-title { margin: -16px -14px 0; }
}

.pos-cash-row-due { background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-500); }
.pos-cash-row-change { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); }
.pos-cash-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
/* Chip mệnh giá: cùng style nút check ô nhập tiền (nền brand-50, viền brand-500, chữ brand-700) */
.pos-cash-btn {
  border: 1.5px solid var(--brand-500);
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-700);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  padding: 14px 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.pos-cash-btn:active { background: var(--brand-100); }
.pos-cash-custom-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.pos-cash-custom-row .pos-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
}
/* Ô nhập số tiền khách đưa: mặc định đơn vị K (= .000đ), chữ to đậm như các nút mức tiền */
.pos-cash-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}
.pos-cash-input-wrap .pos-input,
.pos-shell .pos-cash-input-wrap .pos-input,
#modal-cashamount .pos-cash-input-wrap .pos-input {
  width: 100%;
  padding: 13px 76px 13px 12px; /* chừa chỗ cho chữ K + nút check ở góc phải */
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
  text-align: right;
}
.pos-cash-input-wrap .pos-input::placeholder { color: var(--ink-soft); opacity: 0.45; font-weight: 800; }
.pos-cash-input-wrap .pos-input:focus { border-color: var(--brand-500); outline: none; }
.pos-cash-input-unit {
  position: absolute;
  top: 50%;
  right: 58px;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  color: var(--brand-600);
  pointer-events: none;
}
.pos-cash-ok-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  border: 1.5px solid var(--brand-500);
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-700);
  cursor: pointer;
}
.pos-cash-ok-btn svg { width: 20px; height: 20px; }
/* Nút check lồng vào góc phải, bên trong khung ô nhập */
.pos-cash-input-wrap .pos-cash-ok-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  width: 44px;
  border-radius: calc(var(--radius-md) - 4px);
}
.pos-cash-ok-btn:active { background: var(--brand-100); }
/* ---- Popup "Chuyển khoản": mã QR chuyển khoản của quán ---- */
.pos-qr-modal { max-width: 360px; text-align: center; }
/* Popup QR chuyển khoản luôn là lớp trên cùng: cao hơn cột Khách/Voucher (z-index 110 ở mobile) và các modal khác (100) */
#modal-qrtransfer { z-index: 120; }
.pos-qr-frame {
  display: flex;
  min-height: 220px;
  max-height: 360px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-md);
  margin: 10px 0 10px;
  padding: 10px;
  background: #fafbfe;
}
/* margin:auto thay cho justify/align-center để ảnh phóng to vẫn cuộn được tới mép trái/trên */
.pos-qr-img { display: block; margin: auto; max-width: 100%; max-height: 320px; border-radius: var(--radius-sm); }
.pos-qr-empty { margin: auto; font-size: 12.5px; color: var(--ink-soft); padding: 30px 10px; }
.pos-qr-empty[hidden], .pos-qr-img[hidden] { display: none; }
/* Thanh thu phóng */
.pos-qr-edit-block { display: flex; flex-direction: column; gap: 10px; }
.pos-qr-edit-block[hidden] { display: none; }
.pos-qr-zoom { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pos-qr-zoom[hidden] { display: none; }
.pos-qr-zoom-btn, .pos-qr-zoom-level {
  border: 1.5px solid var(--brand-500);
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-700);
  font-family: var(--font-display);
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pos-qr-zoom-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 38px; }
.pos-qr-zoom-btn svg { width: 18px; height: 18px; }
.pos-qr-zoom-level { min-width: 64px; height: 38px; font-size: 13.5px; }
.pos-qr-zoom-btn:active, .pos-qr-zoom-level:active { background: var(--brand-100); }
/* Dòng thông báo */
.pos-qr-status {
  margin: 0 0 10px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}
.pos-qr-status[hidden] { display: none; }
.pos-qr-status.is-info { background: var(--brand-50); color: var(--brand-700); border: 1px solid var(--brand-500); }
.pos-qr-status.is-success { background: #e7f7ec; color: var(--success-dark); border: 1px solid var(--success); }
.pos-qr-status.is-error { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); }
.pos-qr-owner-actions[hidden] { display: none; }
/* Hàng nút icon (bút = sửa, check = xác nhận thanh toán); STAFF chỉ có nút check nên chiếm hết hàng */
.pos-qr-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.pos-qr-icon-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  border: 1.5px solid var(--brand-500);
  color: var(--brand-700);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pos-qr-icon-btn svg { width: 22px; height: 22px; }
.pos-qr-icon-btn:active { background: var(--brand-100); }
.pos-qr-icon-btn.is-selected { background: var(--brand-100); }
.pos-qr-icon-btn.is-ok { background: #e7f7ec; border-color: var(--success); color: var(--success-dark); }
.pos-qr-icon-btn.is-ok:active { background: var(--success); color: #fff; }
/* Nút Xác nhận tải lên (xanh lá) / Chọn lại */
.pos-qr-confirm-btn, .pos-qr-cancel-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px; border-radius: var(--radius-md);
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pos-qr-confirm-btn { flex: 1; background: #e7f7ec; border: 1.5px solid var(--success); color: var(--success-dark); }
.pos-qr-cancel-btn { flex: 0 0 auto; padding: 10px 14px; background: #fff; border: 1.5px solid var(--line); color: var(--ink-soft); }
.pos-qr-confirm-btn:disabled, .pos-qr-cancel-btn:disabled { opacity: 0.6; cursor: default; }
.pos-qr-owner-actions { display: flex; gap: 8px; }
.pos-qr-upload-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  border-radius: var(--radius-md);
  background: var(--brand-50);
  border: 1.5px solid var(--brand-500);
  color: var(--brand-700);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pos-qr-upload-btn:active { background: var(--brand-100); }
.pos-qr-upload-btn svg { width: 16px; height: 16px; }
.pos-qr-delete-btn {
  flex: 0 0 auto;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--danger-bg);
  border: none;
  color: var(--danger);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Đang chọn (chip mệnh giá, hoặc nút check khi số tự nhập đang được dùng): tông xanh lá, giống nút danh mục active */
.pos-cash-btn.is-selected,
.pos-cash-ok-btn.is-selected {
  background: #e7f7ec;
  border-color: var(--success);
  color: var(--success-dark);
}
/* Desktop: cột "Tiền khách đưa" không chặn thao tác phía sau để vẫn bấm được nút Thanh toán khi cột đang mở */
@media (min-width: 901px) {
  #modal-cashamount { pointer-events: none; background: transparent; }
  #modal-cashamount .modal-panel { pointer-events: auto; }
}
.pos-totals-grand {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  padding-top: 6px;
}

.pos-order-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex: 0 0 auto;
}
.pos-btn-hold,
.pos-btn-transfer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.pos-btn-hold svg { width: 15px; height: 15px; }
.pos-btn-hold[hidden],
.pos-btn-transfer[hidden] { display: none !important; }
/* Đã chọn chuyển khoản: tông xanh lá giống chip mệnh giá đang chọn */
.pos-btn-transfer.is-selected { background: #e7f7ec; border-color: var(--success); color: var(--success-dark); }
.pos-pay-total { display: none; }
.pos-btn-pay {
  position: relative; /* để đặt animation chờ/thành công ở giữa nút */
  flex: 1;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  border: none;
  background: var(--brand-500);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
/* Đã chọn xong mệnh giá tiền khách đưa (dù đã thoát khỏi cột chọn mệnh giá): tone xanh lá để nhận biết sẵn sàng thanh toán */
.pos-btn-pay.is-ready {
  background: var(--success);
}

/* Chip nhắc "đã chọn mệnh giá": luôn nằm ngay trên 2 nút Giữ đơn/Thanh toán, kể cả sau khi thoát cột tiền */
.pos-cash-ready-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-top: 1px solid var(--line);
  background: #e7f7ec;
  color: var(--success-dark);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pos-cash-ready-chip b { font-weight: 800; }
#posCashReadyChangeText { color: var(--danger); }
.pos-cash-ready-edit {
  flex: 0 0 auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--success);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
}

/* ---- Nút Thanh toán: animation "rót đầy ly" ----
   is-loading : nước xanh lá dâng lên có sóng + bọt khí nổi lên (nhích dần, không bao giờ đầy hẳn trước khi đơn xong)
   is-success : nước đầy ly -> dấu tick tự vẽ -> vòng sóng + pháo bọt tỏa ra
   Animation chạy xong = thanh toán thành công; chỉ khi lỗi mới có thông báo (ly tự rút cạn về trạng thái ban đầu). */
.pos-pay-label {
  position: relative;
  z-index: 1;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.pos-pay-fx {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.pos-pay-tank {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  border-radius: inherit;
  transform: translateZ(0); /* ép Safari cắt đúng theo bo góc */
}
.pos-pay-liquid {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, var(--success-bright) 0%, var(--success) 100%);
  transform: translateY(calc(100% + 12px));
  transition: transform 0.4s ease-in; /* lỗi -> ly rút cạn */
}
.pos-pay-wave {
  position: absolute;
  left: 0;
  bottom: 100%;
  width: 200%;
  height: 12px;
  display: block;
}
.pos-pay-wave-front { fill: var(--success-bright); }
.pos-pay-wave-back  { fill: rgba(134, 239, 172, 0.6); margin-bottom: 2px; }

.pos-pay-bubble {
  position: absolute;
  bottom: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  opacity: 0;
}
.pos-pay-bubble-1 { left: 12%; }
.pos-pay-bubble-2 { left: 29%; width: 9px; height: 9px; }
.pos-pay-bubble-3 { left: 47%; width: 5px; height: 5px; }
.pos-pay-bubble-4 { left: 64%; width: 8px; height: 8px; }
.pos-pay-bubble-5 { left: 81%; }

.pos-pay-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.95);
  opacity: 0;
}
.pos-pay-check {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  fill: none;
  stroke: #fff;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  opacity: 0;
}
.pos-pay-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: #fff;
  opacity: 0;
}
.pos-pay-spark-1 { --dx: 46px;  --dy: -6px; }
.pos-pay-spark-2 { --dx: 34px;  --dy: -26px; width: 4px; height: 4px; background: #fde68a; }
.pos-pay-spark-3 { --dx: 0px;   --dy: -32px; background: #d9f99d; }
.pos-pay-spark-4 { --dx: -34px; --dy: -26px; width: 4px; height: 4px; }
.pos-pay-spark-5 { --dx: -46px; --dy: -6px;  background: #fde68a; }
.pos-pay-spark-6 { --dx: -34px; --dy: 22px;  width: 4px; height: 4px; background: #d9f99d; }
.pos-pay-spark-7 { --dx: 0px;   --dy: 30px; }
.pos-pay-spark-8 { --dx: 34px;  --dy: 22px;  width: 4px; height: 4px; background: #fde68a; }

/* -- Trạng thái chung: nền nút thành "thân ly" xanh lá đậm, chữ ẩn đi nhường chỗ cho animation -- */
.pos-order-actions .pos-btn-pay.is-loading,
.pos-order-actions .pos-btn-pay.is-success {
  background: var(--success-dark);
  box-shadow: none;
  opacity: 1;
  cursor: default;
  transition: background-color 0.2s ease;
}
/* (đơn web) */
.pos-web-btn.is-loading,
.pos-web-btn.is-success {
  background: var(--success-dark);
  box-shadow: none;
  opacity: 1;
  cursor: default;
  transition: background-color 0.2s ease;
}

.pos-btn-pay.is-loading .pos-pay-label,
.pos-btn-pay.is-success .pos-pay-label {
  opacity: 0;
  transform: translateY(-8px);
}
/* (đơn web) */
.pos-web-btn.is-loading .pos-pay-label,
.pos-web-btn.is-success .pos-pay-label {
  opacity: 0;
  transform: translateY(-8px);
}

.pos-btn-pay.is-loading .pos-pay-fx,
.pos-btn-pay.is-success .pos-pay-fx {
  opacity: 1;
}
/* (đơn web) */
.pos-web-btn.is-loading .pos-pay-fx,
.pos-web-btn.is-success .pos-pay-fx {
  opacity: 1;
}


/* -- Đang xử lý: nước dâng chậm tới ~76% rồi chờ, sóng chạy, bọt nổi -- */
.pos-btn-pay.is-loading .pos-pay-liquid {
  transform: translateY(24%);
  transition: transform 2.6s cubic-bezier(0.16, 0.7, 0.3, 1);
}
/* (đơn web) */
.pos-web-btn.is-loading .pos-pay-liquid {
  transform: translateY(24%);
  transition: transform 2.6s cubic-bezier(0.16, 0.7, 0.3, 1);
}

.pos-btn-pay.is-loading .pos-pay-wave,
.pos-btn-pay.is-success .pos-pay-wave {
  animation: posPayWave 1.2s linear infinite;
}
/* (đơn web) */
.pos-web-btn.is-loading .pos-pay-wave,
.pos-web-btn.is-success .pos-pay-wave {
  animation: posPayWave 1.2s linear infinite;
}

.pos-btn-pay.is-loading .pos-pay-wave-back,
.pos-btn-pay.is-success .pos-pay-wave-back {
  animation-duration: 1.9s;
  animation-direction: reverse;
}
/* (đơn web) */
.pos-web-btn.is-loading .pos-pay-wave-back,
.pos-web-btn.is-success .pos-pay-wave-back {
  animation-duration: 1.9s;
  animation-direction: reverse;
}

.pos-btn-pay.is-loading .pos-pay-bubble {
  animation: posPayBubble 1.5s ease-in infinite;
}
/* (đơn web) */
.pos-web-btn.is-loading .pos-pay-bubble {
  animation: posPayBubble 1.5s ease-in infinite;
}

.pos-btn-pay.is-loading .pos-pay-bubble-2 { animation-delay: 0.25s; }
/* (đơn web) */
.pos-web-btn.is-loading .pos-pay-bubble-2 { animation-delay: 0.25s; }

.pos-btn-pay.is-loading .pos-pay-bubble-3 { animation-delay: 0.55s; }
/* (đơn web) */
.pos-web-btn.is-loading .pos-pay-bubble-3 { animation-delay: 0.55s; }

.pos-btn-pay.is-loading .pos-pay-bubble-4 { animation-delay: 0.8s; }
/* (đơn web) */
.pos-web-btn.is-loading .pos-pay-bubble-4 { animation-delay: 0.8s; }

.pos-btn-pay.is-loading .pos-pay-bubble-5 { animation-delay: 1.1s; }
/* (đơn web) */
.pos-web-btn.is-loading .pos-pay-bubble-5 { animation-delay: 1.1s; }


/* -- Thành công: đầy ly -> tick tự vẽ -> vòng sóng + pháo bọt -- */
.pos-btn-pay.is-success .pos-pay-liquid {
  transform: translateY(0);
  transition: transform 0.38s cubic-bezier(0.3, 0.8, 0.3, 1);
}
/* (đơn web) */
.pos-web-btn.is-success .pos-pay-liquid {
  transform: translateY(0);
  transition: transform 0.38s cubic-bezier(0.3, 0.8, 0.3, 1);
}

.pos-btn-pay.is-success .pos-pay-check {
  animation: posPayTick 0.4s 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards,
             posPayPop 0.5s 0.3s ease-out;
}
/* (đơn web) */
.pos-web-btn.is-success .pos-pay-check {
  animation: posPayTick 0.4s 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards,
             posPayPop 0.5s 0.3s ease-out;
}

.pos-btn-pay.is-success .pos-pay-ring {
  animation: posPayRing 0.7s 0.42s ease-out forwards;
}
/* (đơn web) */
.pos-web-btn.is-success .pos-pay-ring {
  animation: posPayRing 0.7s 0.42s ease-out forwards;
}

.pos-btn-pay.is-success .pos-pay-spark {
  animation: posPaySpark 0.7s 0.42s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
/* (đơn web) */
.pos-web-btn.is-success .pos-pay-spark {
  animation: posPaySpark 0.7s 0.42s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}


/* Nút Hủy (đơn web): cùng animation nhưng ly nước màu đỏ */
.pos-web-btn.is-cancel.is-loading,
.pos-web-btn.is-cancel.is-success,
.pos-web-btn.is-cancel.is-loading:active { background: #b91c1c; }
.pos-web-btn.is-cancel .pos-pay-liquid { background: linear-gradient(180deg, #f87171 0%, var(--danger) 100%); }
.pos-web-btn.is-cancel .pos-pay-wave-front { fill: #f87171; }
.pos-web-btn.is-cancel .pos-pay-wave-back  { fill: rgba(252, 165, 165, 0.6); }

@keyframes posPayWave {
  to { transform: translateX(-50%); }
}
@keyframes posPayBubble {
  0%   { opacity: 0; transform: translateY(0) scale(0.4); }
  20%  { opacity: 0.95; }
  100% { opacity: 0; transform: translateY(-42px) scale(1.15); }
}
@keyframes posPayTick {
  from { opacity: 1; stroke-dashoffset: 24; }
  to   { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes posPayPop {
  0%   { transform: scale(0.6); }
  60%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes posPayRing {
  from { opacity: 0.9; transform: scale(0.5); }
  to   { opacity: 0;   transform: scale(2.6); }
}
@keyframes posPaySpark {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}
@media (prefers-reduced-motion: reduce) {
  .pos-btn-pay .pos-pay-wave,
  .pos-btn-pay .pos-pay-bubble { animation: none !important; }
}

/* ---- Sản phẩm ---- */
.pos-product-area {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  align-content: start;
}
.pos-product-group {
  display: contents;
}
.pos-product-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 9px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  display: flex;
  flex-direction: column;
}
.pos-product-card:active { border-color: var(--brand-500); }
.pos-product-thumb {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: var(--radius-sm);
  background: var(--brand-50);
  color: var(--brand-300);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 7px;
  overflow: hidden;
}
.pos-product-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* Tên chip món + chip topping (dùng chung): chữ đậm/to hơn nhưng line-height cố định bằng px = đúng chiều cao dòng cũ -> khối chip không cao thêm */
.pos-product-name {
  font-size: 13px;
  font-weight: 800;
  line-height: 15px;
  color: var(--ink);
  margin-bottom: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pos-product-price { font-size: 12px; font-weight: 700; color: var(--brand-600); }

/* ---- Danh mục ---- */
.pos-category-rail {
  width: 150px;
  flex: 0 0 150px;
  border-left: 1px solid var(--line);
  overflow-y: auto;
}
.pos-category-item {
  padding: 11px 14px;
  font-size: 14.5px;
  font-weight: 800;
  color: var(--ink-soft);
  text-align: right;
  cursor: pointer;
  border-right: 3px solid transparent;
}
.pos-category-item.is-active {
  background: #e7f7ec; /* nền active: xanh lá nhạt */
  color: var(--success-dark);
  border-right-color: var(--success);
}

/* ---- Khách hàng: kết quả tìm kiếm & đơn giữ ---- */
.pos-customer-results, #posHeldList { margin-top: 10px; max-height: 300px; overflow-y: auto; }
.pos-customer-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 8px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.pos-customer-result:hover { background: var(--brand-50); }
/* Khách đang chọn: cùng style nút chọn size đang chọn (.pos-option-chip.is-selected) */
.pos-customer-result.is-selected,
.pos-customer-result.is-selected:hover {
  background: #e7f7ec;
  border-radius: 11px;
  box-shadow: inset 0 0 0 1px var(--success);
}
.pos-customer-result.is-selected .pos-customer-result-name,
.pos-customer-result.is-selected .pos-customer-result-phone { color: var(--success-dark); }
.pos-customer-result.is-selected .pos-customer-result-points { background: #fff; color: var(--success-dark); }
.pos-customer-result-info { min-width: 0; flex: 1 1 auto; }
.pos-customer-result-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pos-customer-result-phone {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-600);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pos-customer-result-points {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-700);
  background: var(--brand-50);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pos-held-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line);
}
.pos-held-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.pos-held-row { cursor: pointer; }
.pos-held-row:hover,
.pos-held-row:active { background: var(--brand-50); }

/* ---- [FIX] thuộc tính hidden bị display:flex/grid của class đè mất (vd. badge "0" luôn hiện) ---- */
.pos-shell [hidden] { display: none !important; }

/* ---- Cột size/topping + các phần chỉ dành cho mobile: mặc định ẩn ---- */
.pos-option-rail,
.pos-cart-tabs,
.pos-held-view,
.pos-web-view,
.pos-cart-mini,
.pos-quick-actions,
.pos-service-caption { display: none; }

/* ---- Toast xác nhận đã thêm món ---- */
.pos-toast {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translate(-50%, -12px);
  max-width: 86vw;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(22, 33, 58, 0.92);
  color: #fff;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.pos-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }


/* ---- Người dùng trong cột danh mục + menu trượt ngang: mặc định ẩn (chỉ dùng ở mobile) ---- */
.pos-user-item,
.pos-user-flyout-wrap { display: none; }

/* ---- Responsive: mobile ---- */
@media (max-width: 900px) {

  /* ===== Mobile: giỏ hàng là modal dạng cột rộng 50% màn hình, trượt ra từ mép phải ===== */
  .pos-order-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50vw;
    min-width: 176px;
    flex: none;
    border-right: none;
    border-left: 1px solid var(--line);
    box-shadow: -10px 0 30px rgba(16, 42, 88, 0.16);
    z-index: 60;
    transform: translateX(104%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1), visibility 0s linear 0.28s;
  }
  .pos-order-panel.is-expanded { transform: none; visibility: visible; transition-delay: 0s; }
  .pos-cart-summary { display: none; }
  .pos-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(22, 33, 58, 0.40);
    z-index: 55;
  }
  .pos-backdrop.is-visible { display: block; }

  /* Header 2 nút chia đôi, có gạch phân tách ở giữa: Đơn hàng | Đơn giữ */
  .pos-cart-tabs {
    flex: 0 0 auto;
    display: flex;
    border-bottom: 1px solid var(--line);
  }
  .pos-cart-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 2px;
    border: none;
    background: #fff;
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }
  .pos-cart-tab + .pos-cart-tab { border-left: 1px solid var(--line); }
  .pos-cart-tab.is-active {
    background: #e7f7ec; /* nền active: xanh lá nhạt, đồng bộ nút danh mục */
    color: var(--success-dark);
    box-shadow: inset 0 -3px 0 var(--success);
  }

  /* Tab "Đơn giữ": danh sách hiển thị ngay trong cột */
  .pos-held-view { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px 12px; }
  .pos-order-panel.view-held .pos-held-view { display: block; }
  .pos-order-panel.view-held .pos-order-panel-body,
  .pos-order-panel.view-held .pos-order-actions { display: none; }
  .pos-web-view { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 12px; }
  .pos-order-panel.view-web .pos-web-view { display: block; }
  .pos-order-panel.view-web .pos-order-panel-body,
  .pos-order-panel.view-web .pos-order-actions { display: none; }
  .pos-held-row { padding: 12px 6px; }
  .pos-held-row .pos-link-btn { padding: 8px 4px; font-size: 12px; }
  .pos-order-panel-body {
    display: flex;
    overflow-y: auto;
    padding: 10px 10px 12px;
  }

  /* Nút tổng kết đơn: cố định ở cuối cột danh mục */
  .pos-cart-mini {
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--pos-rail-w);
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 4px calc(10px + env(safe-area-inset-bottom, 0px));
    border: none;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 -6px 14px rgba(16, 42, 88, 0.06);
    font-family: var(--font-body);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pos-cart-mini-total { font-size: 13.5px; font-weight: 800; color: var(--brand-600); }
  .pos-cart-mini-icon {
    position: relative;
    margin-top: 6px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-500);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(43, 125, 255, 0.30);
    transition: transform 0.12s ease;
  }
  .pos-cart-mini-icon svg { width: 20px; height: 20px; }
  .pos-cart-mini:active .pos-cart-mini-icon { transform: scale(0.92); }
  /* Nháy khi thêm món: dùng lại keyframes của trang index (cartPulseBox / cartPulseBadge) */
  .pos-cart-mini-icon.is-cart-pulse { animation: cartPulseBox 0.6s ease; }
  .pos-cart-mini-icon.is-cart-pulse .pos-cart-mini-badge:not(.pos-cart-mini-badge-held) { animation: cartPulseBadge 0.6s ease; }
  /* Chấm đỏ cảnh báo: tổng số món trong đơn */
  .pos-cart-mini-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Cảnh báo xanh nhạt: số đơn đang giữ (góc đối diện badge đỏ) */
  .pos-cart-mini-badge-held {
    top: auto;
    right: auto;
    bottom: -6px;
    left: -6px;
    background: var(--brand-300);
    color: var(--brand-900);
  }

  /* Đơn web chờ xác nhận: xanh lá (giống badge "đơn đã gửi" ở trang index), góc dưới-phải */
  .pos-cart-mini-badge-web {
    top: auto;
    left: auto;
    bottom: -6px;
    right: -6px;
    background: #16a34a;
    color: #fff;
  }
  /* Có đơn cảnh báo (món trong đơn đang mở / đơn giữ / đơn web chờ xác nhận): nút nền đỏ nhạt + vạch đỏ tươi trên đỉnh; hết cảnh báo thì về nền trắng */
  .pos-cart-mini.is-alert {
    background: #ffe3e3;
    /* Vạch đỏ tươi trên đỉnh nút (inset nên không đổi chiều cao), giống vạch active của nút danh mục */
    box-shadow: inset 0 4px 0 #ff1f1f, 0 -6px 14px rgba(16, 42, 88, 0.06);
  }
  .pos-cart-mini.is-alert .pos-cart-mini-badge { border-color: #ffe3e3; }
  .pos-cart-web-badge {
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Số đơn giữ (trên tab) */
  .pos-cart-held-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brand-300);
    color: var(--brand-900);
    font-size: 10.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Hình thức bán: 3 nút vuông icon + tên, thu nhỏ gọn hơn trên mobile */
  .pos-service-tabs { gap: 6px; margin-bottom: 4px; }
  .pos-service-tab { padding: 8px 2px; font-size: 10px; gap: 3px; }
  .pos-service-tab .pos-tab-icon { width: 18px; height: 18px; }
  .pos-service-caption {
    display: block;
    margin-bottom: 10px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--brand-700);
  }
  .pos-field-row { margin-bottom: 8px; }
  .pos-input { padding: 8px 10px; font-size: 12.5px; }

  /* Thứ tự hiển thị: món -> (Khách | Khuyến mãi) -> tổng -> nút */
  .pos-items-head { order: 4; }
  .pos-order-items { order: 5; flex: 1 1 auto; min-height: 120px; margin-bottom: 8px; }
  .pos-quick-actions { order: 6; }
  .pos-order-totals { order: 9; }

  /* Món trong giỏ: tên/ghi chú ở trên; hàng dưới là − số + và thành tiền */
  .pos-order-empty { padding: 20px 4px; font-size: 12px; line-height: 1.4; }
  .pos-order-item { flex-direction: column; gap: 8px; padding: 10px 0; }
  .pos-order-item-name { font-size: 12.5px; line-height: 1.3; }
  .pos-order-item-meta {
    font-size: 10.5px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .pos-order-item-side { display: flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; }
  .pos-mini-stepper { gap: 8px; font-size: 13px; justify-content: flex-start; }
  .pos-mini-btn { width: 28px; height: 28px; font-size: 16px; }
  .pos-order-item-price { margin-top: 0; text-align: right; font-size: 12.5px; }
  .pos-order-item-delete { width: 22px; height: 22px; }
  .pos-order-item-delete svg { width: 12px; height: 12px; }

  /* Khách hàng + khuyến mãi: 2 nút riêng biệt xếp dọc, mỗi nút rộng hết khổ cột (đủ chỗ hiện tên khách / thông tin voucher), bấm mở thẳng popup chọn khách / chọn mã */
  .pos-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-bottom: 8px;
  }
  .pos-quick-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 16px 12px;
    border: 1px solid var(--brand-300);
    border-radius: 10px;
    background: var(--brand-50);
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }
  .pos-quick-btn:active { background: var(--brand-100); }
  .pos-quick-btn svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--brand-500); }
  .pos-quick-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Đã chọn khách / đã áp mã: cùng style nút chọn size đang chọn (.pos-option-chip.is-selected) */
  .pos-quick-btn.has-info {
    color: var(--success-dark);
    background: #e7f7ec;
    border-color: var(--success);
    padding-right: 38px;
  }
  .pos-quick-btn.has-info svg { color: var(--success-dark); }
  .pos-quick-btn.has-info:active { background: #d3f0dc; }

  /* Nút "x" nhỏ ở góc nút Khách/Voucher: chỉ hiện khi đã chọn khách hàng / đã áp mã (class has-info) */
  .pos-quick-clear {
    display: none;
    position: absolute;
    top: 4px;
    right: 5px;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--danger);
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
  }
  .pos-quick-btn.has-info .pos-quick-clear { display: flex; }
  .pos-quick-clear:active { background: var(--danger); color: #fff; }

  /* Trên mobile, hàng Khách hàng / Khuyến mãi cũ không hiện inline nữa — đã thay bằng 2 nút + popup ở trên */
  .pos-customer-row,
  .pos-order-meta { display: none; }

  /* ---- Popup Khách hàng / Khuyến mãi trên mobile: cột trượt từ mép phải, cùng kích thước cột giỏ hàng ----
     (thay cho modal căn giữa màn hình; dùng chung khung .pos-order-panel ở trên).
     --pos-slidecol-gap (đặt bằng JS lúc mở popup, xem openModal()) = khoảng chừa phía dưới để không
     che hàng nút Khách/Khuyến mãi (#posQuickActions) đang hiện trong cột giỏ hàng bên dưới. */
  .modal-overlay-slidecol {
    top: 0;
    right: 0;
    left: 0;
    bottom: var(--pos-slidecol-gap, 0px);
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
    background: rgba(22, 33, 58, 0.40);
  }
  .modal-panel-slidecol {
    width: 50vw;
    min-width: 176px;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: 0;
    box-shadow: -10px 0 30px rgba(16, 42, 88, 0.16);
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }
  .modal-overlay-slidecol:not(.is-open) .modal-panel-slidecol { transform: translateX(104%); }
  .modal-overlay-slidecol.is-open .modal-panel-slidecol {
    transform: translateX(0);
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1);
  }
  /* Không cần tiêu đề / nút đóng trên mobile: đóng bằng cách chạm ra ngoài, hoặc bấm lại nút Khách/KM */
  .modal-overlay-slidecol .modal-heading,
  .modal-overlay-slidecol .modal-close { display: none; }

  /* Ô nhập SĐT + nút icon danh bạ (xem toàn bộ khách đã lưu) nằm chung 1 hàng */
  .pos-customer-search-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex: 0 0 auto;
  }
  .pos-customer-search-row .pos-input { flex: 1; min-width: 0; }
  /* STAFF không có nút danh bạ bên cạnh: giãn ô tìm kiếm rộng rãi hơn cho cân đối cả hàng */
  .pos-customer-search-row--full { margin-bottom: 2px; }
  .pos-customer-search-row--full .pos-input { padding: 11px 14px; }
  .pos-customer-all-btn {
    flex: 0 0 auto;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--brand-500);
    border-radius: var(--radius-md);
    background: var(--brand-50);
    color: var(--brand-600, var(--brand-700));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* [FIX] Nút này nằm trong popup Chọn khách hàng, NGOÀI .pos-shell nên rule ".pos-shell [hidden]"
     dùng chung không tới được — display:flex ở trên đè mất thuộc tính hidden (STAFF không bị ẩn nút). */
  .pos-customer-all-btn[hidden] { display: none !important; }
  .pos-customer-all-btn svg { width: 18px; height: 18px; }
  .pos-customer-all-btn:active { background: var(--brand-100); }
  /* Trạng thái "đang mở" (đã bấm để xem toàn bộ danh bạ): đảo màu để biết đang bật, bấm lại để tắt */
  .pos-customer-all-btn.is-open {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
  }
  .pos-customer-all-btn.is-open:active { background: var(--brand-700); }

  /* Khối kết quả tìm khách / danh sách voucher: chiếm hết khoảng trống còn lại phía trên,
     nhưng nội dung dồn sát xuống khối ô nhập bên dưới (chân cột) — có thêm nội dung thì hiện ngược lên trên. */
  .modal-panel-slidecol {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
  }
  .modal-panel-slidecol .pos-customer-results,
  .modal-panel-slidecol .voucher-picker-list {
    flex: 0 1 auto;
    min-height: 0;
    max-height: none;
    margin-top: 0;
    overflow-y: auto;
  }
  /* Danh sách khách: dòng giãn rộng hơn + cách ô nhập tên/SĐT bên dưới (trước đây dính sát) */
  .modal-panel-slidecol .pos-customer-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
  }
  .modal-panel-slidecol .pos-customer-result {
    flex: 0 0 auto;
    padding: 13px 12px;
  }
  .modal-panel-slidecol .voucher-picker-manual { flex: 0 0 auto; }

  /* Hàng "Dùng điểm tích lũy" trong cột Khách (mobile): nằm ngay dưới khối ô nhập + nút danh bạ */
  .pos-modal-points-row {
    flex: 0 0 auto;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .pos-modal-points-row:not([hidden]) { display: flex; }

  /* Tổng tiền */
  .pos-order-totals { padding-top: 8px; margin-top: 2px; }
  .pos-totals-grand span:last-child { font-weight: 800; color: var(--brand-600); }

  /* Chân cột 2 nút chia đôi: trái = Giữ đơn (xanh nhạt; sau khi bấm Thanh toán lần 1 đổi thành Chuyển khoản), phải = Thanh toán */
  .pos-order-panel > .pos-order-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--line);
    background: #fff;
  }
  .pos-btn-hold,
  .pos-btn-transfer,
  .pos-btn-pay {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    padding: 17px 4px;
    border: none;
    border-radius: 0;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
  }
  .pos-btn-hold,
  .pos-btn-transfer {
    background: var(--brand-50);
    color: var(--brand-700);
    font-weight: 700;
    border-right: 1px solid var(--line);
  }
  .pos-btn-hold svg { width: 16px; height: 16px; }
  .pos-btn-pay {
    background: var(--brand-500);
    color: #fff;
    font-weight: 800;
    transition: background-color 0.1s ease, box-shadow 0.1s ease;
  }
  .pos-btn-hold:active,
  .pos-btn-transfer:active { background: var(--brand-100); }
  .pos-btn-transfer.is-selected { background: #e7f7ec; color: var(--success-dark); }
  /* Nhấn: chuyển xanh lá đậm (thanh toán thông suốt), đổ bóng chìm vào trong, chữ lún xuống 2px -> thấy rõ là đã nhấn */
  .pos-btn-pay:active {
    background: var(--success-dark);
    box-shadow: inset 0 4px 12px rgba(0, 40, 10, 0.35);
  }

  /* Nút Thanh toán: tiêu đề + tổng tiền xếp dọc (tổng tiền nằm dưới chữ "Thanh toán") */
  .pos-btn-pay {
    flex-direction: column;
    gap: 2px;
    padding: 11px 4px;
  }
  /* Chuyển khoản + Thanh toán: nội dung luôn nằm chính giữa nút (ngang + dọc), cả khi đang nhấn (không đổi padding) */
  .pos-btn-transfer,
  .pos-btn-pay {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
  }
  .pos-btn-pay .pos-pay-label,
  .pos-btn-pay .pos-pay-total { width: 100%; text-align: center; }
  .pos-btn-pay:active .pos-pay-label,
  .pos-btn-pay:active .pos-pay-total { transform: translateY(2px); }
  .pos-pay-total {
    display: block;
    position: relative;
    z-index: 1;
    font-size: 14px; /* bằng cỡ chữ tiêu đề "Thanh toán" (.pos-btn-pay font-size) */
    font-weight: 800;
    line-height: 1.2;
    opacity: 1;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .pos-btn-pay.is-loading .pos-pay-total,
  .pos-btn-pay.is-success .pos-pay-total { opacity: 0; transform: translateY(-8px); }

  /* ---- Cột "Tiền khách đưa" dài xuống sát hàng Giữ đơn / Thanh toán; chân cột chứa khối Khách/Voucher + khối tính toán ---- */
  #modal-cashamount .modal-panel-slidecol {
    justify-content: flex-start;
    overflow-y: auto;
  }
  .pos-cash-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    padding-top: 10px;
  }
  .pos-cash-bottom:empty { display: none; }
  /* Các khối chuyển vào đây nằm NGOÀI .pos-shell nên rule ".pos-shell [hidden]" không tới được */
  .pos-cash-bottom [hidden] { display: none !important; }
  /* Cột Khách / Voucher mở chồng lên trên cột tiền */
  #modal-customer,
  #modal-voucher { z-index: 110; }
  /* 2 dòng "Tiền khách đưa"/"Tiền thừa" của khối tính toán đã có ngay đầu cột tiền -> không lặp lại */
  .pos-totals-cash { display: none !important; }

  /* Cột "Lịch sử hóa đơn": cao hết màn hình như cột giỏ hàng, danh sách xếp từ trên xuống và cuộn bên trong */
  #modal-history .modal-panel-slidecol {
    justify-content: flex-start;
    overflow: hidden;
  }

  .pos-product-area {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 8px 14px;
  }
  .pos-product-card {
    padding: 6px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Đang chọn: cùng style active của nút danh mục (nền xanh lá nhạt, viền/chữ xanh lá) */
  .pos-product-card.is-configuring { border-color: var(--success); background: #e7f7ec; }
  .pos-product-card.is-configuring .pos-product-name,
  .pos-product-card.is-configuring .pos-product-price { color: var(--success-dark); }

  /* Cột chọn món (bên PHẢI, rộng 50% màn hình): Size | Đường | Đá, rồi Topping; trượt ra từ mép phải, chạm ra ngoài để đóng */
  .pos-option-rail {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: max(var(--pos-opt-w), 176px);
    /* z-index cao hơn .pos-order-panel.is-expanded (60) để cột sửa món luôn nổi lên trên khi mở từ giỏ hàng đã mở */
    z-index: 65;
    background: #fff;
    border-left: 1px solid var(--line);
    box-shadow: -6px 0 18px rgba(16, 42, 88, 0.10);
    transform: translateX(102%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1), visibility 0s linear 0.28s;
  }
  .pos-option-rail.is-open { transform: none; visibility: visible; transition-delay: 0s; }

  /* Đầu cột: tên món đang chọn — cùng nền/viền/chiều cao với khối user (.pos-user-item) ở cột danh mục */
  .pos-opt-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 8px;
    background: var(--brand-700);
    color: #fff;
    border-bottom: 1px solid var(--brand-800);
  }
  .pos-opt-head-name {
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .pos-option-scroll {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }

  /* 3 cột có đường gạch phân tách: Size | Đường | Đá */
  .pos-opt-cols { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pos-opt-col { min-width: 0; padding: 12px 5px 16px; }
  .pos-opt-col + .pos-opt-col { border-left: 1px solid var(--brand-300); }
  /* 3 màu nhạt riêng cho từng khối Size / Đường / Đá để dễ phân biệt bằng mắt (vẫn giữ đường
     phân tách dọc .pos-opt-col + .pos-opt-col ở trên) */
  .pos-opt-col--size  { background: var(--brand-100); }
  .pos-opt-col--sugar { background: var(--brand-50); }
  .pos-opt-col--ice   { background: var(--brand-20); }
  .pos-opt-col-title {
    margin-bottom: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ink-soft);
  }
  .pos-option-list { display: flex; flex-direction: column; gap: 9px; }
  .pos-option-chip {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 3px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    word-break: break-word;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }
  .pos-option-chip.is-selected {
    background: #e7f7ec; /* giống .pos-category-item.is-active */
    border-color: var(--success);
    color: var(--success-dark);
  }

  /* Khối topping: nền xanh nhạt từ tiêu đề trở xuống, thẻ 2 cột có thumbnail như thẻ món */
  .pos-option-topping {
    flex: 1 0 auto;
    padding: 0 8px 12px;
    background: var(--brand-50);
  }
  .pos-option-title {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    color: var(--brand-700);
  }
  .pos-topping-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pos-topping-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    text-align: left;
    font-family: var(--font-body);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }
  .pos-topping-card.is-selected { border-color: var(--success); background: #e7f7ec; }
  .pos-topping-card.is-selected::after {
    content: '\2713';
    position: absolute;
    top: 9px;
    right: 9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Nút "Topping" (cột chọn nhanh mobile) — món setup "không chọn Topping" trong settings.php:
     dạng khối bấm trượt mở/đóng, cùng tông với khối tên món (.pos-opt-head-name) ở đầu cột.
     Món cho chọn topping bình thường: vẫn cùng khối này nhưng ở dạng tĩnh (không bấm được). */
  .pos-topping-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(100% + 16px);
    min-height: 30px; /* bằng chiều cao khối tên món (.pos-opt-head) */
    padding: 0 10px;
    margin: 0 -8px 8px;
    background: var(--brand-700);
    color: #fff;
    border: none;
    border-radius: 0;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
  }
  .pos-topping-toggle.is-toggle { cursor: pointer; }
  .pos-topping-toggle-chevron {
    flex-shrink: 0;
    display: none;
    transition: transform 0.2s ease;
  }
  .pos-topping-toggle.is-toggle .pos-topping-toggle-chevron { display: inline-flex; }
  .pos-topping-toggle.is-open .pos-topping-toggle-chevron { transform: rotate(180deg); }

  /* Khối topping trượt mở/đóng: chiều cao 0 -> nội dung thật khi mở, có hiệu ứng trượt */
  .pos-topping-collapse {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.25s ease;
  }
  .pos-topping-collapse.is-open { grid-template-rows: 1fr; }
  .pos-topping-collapse > .pos-topping-grid { min-height: 0; }

  /* Chân cột: [Thanh toán] | [+ Thêm] — 2 khối full chiều ngang cột, không bo góc, cùng tông khối tên món (.pos-opt-head),
     ngăn cách nhau bằng 1 đường dọc ở giữa, sát đáy màn hình */
  .pos-option-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--brand-800);
    background: var(--brand-700);
  }
  .pos-opt-pay-btn {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 51px;
    padding: 6px 4px;
    border: none;
    border-right: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 0;
    background: var(--brand-700);
    color: #fff;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    word-break: break-word;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease;
  }
  .pos-opt-pay-btn:active { background: var(--brand-800); }
  .pos-opt-pay-btn:disabled { opacity: 0.6; }
  /* Khi ẩn nút Thanh toán (đang sửa món) thì nút Lưu chiếm hết chiều ngang */
  .pos-opt-pay-btn[hidden] { display: none; }
  .pos-add-btn {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 51px;
    padding: 6px 4px;
    border: none;
    border-radius: 0;
    background: var(--brand-700);
    color: #fff;
    font-family: var(--font-body);
    box-shadow: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, opacity 0.2s ease;
  }
  .pos-add-btn-top { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 800; }
  .pos-add-btn-top svg { width: 17px; height: 17px; }
  .pos-add-btn-price { font-size: 12px; font-weight: 700; opacity: 0.92; }
  .pos-add-btn:active { background: var(--brand-800); }
  .pos-add-btn:disabled { opacity: 0.6; }
  .pos-product-thumb { margin-bottom: 5px; }
  .pos-product-name { font-size: 12.5px; font-weight: 800; line-height: 14.4px; margin-bottom: 2px; } /* 14.4px = 11.5px × 1.25 cũ -> chiều cao dòng không đổi */
  .pos-product-price { font-size: 11px; }
  .pos-body { --pos-rail-w: 88px; --pos-opt-w: 50vw; }
  .pos-category-rail { width: var(--pos-rail-w); flex: 0 0 var(--pos-rail-w); }
  /* Danh mục: giãn dọc + chữ to hơn; viền active nằm ở ĐÁY nút (box-shadow inset nên không làm nút đổi chiều cao) */
  .pos-category-item {
    position: relative;
    margin: 0;
    padding: 24px 5px 24px 16px; /* chừa bên trái cho mũi tên active */
    font-size: 15.5px;
    font-weight: 800;
    text-align: center;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .pos-category-item.is-active {
    background: #e7f7ec; /* nền active: xanh lá nhạt */
    box-shadow: inset 0 -3px 0 var(--success);
  }
  /* Dấu chọn: mũi tên chỉ sang trái (hướng ra chip món), luôn canh giữa theo chiều dọc của nút dù chữ xuống bao nhiêu dòng. */
  .pos-category-item.is-active::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-left: 2px solid var(--success);
    border-bottom: 2px solid var(--success);
    transform: translateY(-50%) rotate(45deg);
  }

  /* Mobile: bỏ topbar, chuyển tên/avatar + các nút vào cột danh mục */
  .pos-shell .pos-topbar { display: none; }
  .pos-category-rail { padding-bottom: 116px; } /* chừa chỗ cho nút tổng kết đơn cố định */

  .pos-user-item {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 14px 8px 12px;
    background: var(--brand-700);
    color: #fff;
    border: none;
    border-bottom: 1px solid var(--brand-800);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  /* Nền tròn vừa khít cho mũi tên, đứng TRƯỚC tên user */
  .pos-user-toggle-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.28s ease, background 0.2s ease, color 0.2s ease;
  }
  .pos-user-toggle-icon svg { width: 14px; height: 14px; }
  .pos-user-item.is-open { background: var(--brand-800); }
  .pos-user-item.is-open .pos-user-toggle-icon {
    transform: rotate(180deg);
    background: #fff;
    color: var(--brand-700);
  }
  .pos-user-item-name {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Khung cắt: menu "chui ra" từ mép trái của cột danh mục */
  .pos-user-flyout-wrap {
    display: block;
    position: absolute;
    top: 0;
    right: var(--pos-rail-w);
    z-index: 40;
    max-width: calc(100% - var(--pos-rail-w));
    padding: 8px 6px 20px 20px; /* chừa chỗ cho bóng đổ */
    overflow: hidden;
    pointer-events: none;
  }
  .pos-user-flyout {
    width: min(232px, calc(100vw - var(--pos-rail-w) - 32px));
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(16, 42, 88, 0.16);
    transform: translateX(110%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1),
                opacity 0.2s ease,
                visibility 0s linear 0.28s;
  }
  .pos-user-flyout.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .pos-flyout-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .pos-flyout-row svg { width: 18px; height: 18px; flex: 0 0 auto; }
  .pos-flyout-time { cursor: default; background: var(--brand-50); color: var(--brand-700); }
  .pos-flyout-time-text { display: flex; flex-direction: column; flex: 1; line-height: 1.25; }
  .pos-flyout-time-text small { font-size: 11px; font-weight: 500; color: var(--ink-soft); }
  .pos-flyout-elapsed { font-size: 12px; font-weight: 700; }
  .pos-flyout-btn:active { background: var(--brand-50); }
  .pos-flyout-danger { color: var(--danger); }
  .pos-flyout-danger:active { background: var(--danger-bg); }
}

/* ============================================================
   pos.php — MÀN HÌNH LỚN (≥901px) hiển thị y hệt bản mobile (giỏ hàng / cột chọn món / cột Khách – Voucher – Tiền khách đưa
   trượt từ mép phải, cột danh mục bên phải, chip món...). Chỉ khác: THANH TOPBAR trên cùng vẫn giữ nguyên như màn hình lớn.
   Bản sao của khối "@media (max-width: 900px)" ở trên, gắn với body.pos-body-tag (chỉ trang pos.php) và dùng :where()
   để độ ưu tiên selector không đổi so với bản mobile gốc (kết quả hiển thị giống hệt). Không ảnh hưởng index.php / settings.php.
   ============================================================ */
@media (min-width: 901px) {
  :where(body.pos-body-tag) .pos-order-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50vw;
    min-width: 176px;
    flex: none;
    border-right: none;
    border-left: 1px solid var(--line);
    box-shadow: -10px 0 30px rgba(16, 42, 88, 0.16);
    z-index: 60;
    transform: translateX(104%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1), visibility 0s linear 0.28s;
  }
  :where(body.pos-body-tag) .pos-order-panel.is-expanded { transform: none; visibility: visible; transition-delay: 0s; }
  :where(body.pos-body-tag) .pos-cart-summary { display: none; }
  :where(body.pos-body-tag) .pos-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(22, 33, 58, 0.40);
    z-index: 55;
  }
  :where(body.pos-body-tag) .pos-backdrop.is-visible { display: block; }
  :where(body.pos-body-tag) .pos-cart-tabs {
    flex: 0 0 auto;
    display: flex;
    border-bottom: 1px solid var(--line);
  }
  :where(body.pos-body-tag) .pos-cart-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 2px;
    border: none;
    background: #fff;
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  }
  :where(body.pos-body-tag) .pos-cart-tab + .pos-cart-tab { border-left: 1px solid var(--line); }
  :where(body.pos-body-tag) .pos-cart-tab.is-active {
    background: #e7f7ec; /* nền active: xanh lá nhạt, đồng bộ nút danh mục */
    color: var(--success-dark);
    box-shadow: inset 0 -3px 0 var(--success);
  }
  :where(body.pos-body-tag) .pos-held-view { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px 12px; }
  :where(body.pos-body-tag) .pos-order-panel.view-held .pos-held-view { display: block; }
  :where(body.pos-body-tag) .pos-order-panel.view-held .pos-order-panel-body,
  :where(body.pos-body-tag) .pos-order-panel.view-held .pos-order-actions { display: none; }
  :where(body.pos-body-tag) .pos-web-view { display: none; flex: 1; min-height: 0; overflow-y: auto; padding: 0 10px 12px; }
  :where(body.pos-body-tag) .pos-order-panel.view-web .pos-web-view { display: block; }
  :where(body.pos-body-tag) .pos-order-panel.view-web .pos-order-panel-body,
  :where(body.pos-body-tag) .pos-order-panel.view-web .pos-order-actions { display: none; }
  :where(body.pos-body-tag) .pos-held-row { padding: 12px 6px; }
  :where(body.pos-body-tag) .pos-held-row .pos-link-btn { padding: 8px 4px; font-size: 12px; }
  :where(body.pos-body-tag) .pos-order-panel-body {
    display: flex;
    overflow-y: auto;
    padding: 10px 10px 12px;
  }
  :where(body.pos-body-tag) .pos-cart-mini {
    position: absolute;
    right: 0;
    bottom: 0;
    width: var(--pos-rail-w);
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 4px calc(10px + env(safe-area-inset-bottom, 0px));
    border: none;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 -6px 14px rgba(16, 42, 88, 0.06);
    font-family: var(--font-body);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  :where(body.pos-body-tag) .pos-cart-mini-total { font-size: 13.5px; font-weight: 800; color: var(--brand-600); }
  :where(body.pos-body-tag) .pos-cart-mini-icon {
    position: relative;
    margin-top: 6px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-500);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(43, 125, 255, 0.30);
    transition: transform 0.12s ease;
  }
  :where(body.pos-body-tag) .pos-cart-mini-icon svg { width: 20px; height: 20px; }
  :where(body.pos-body-tag) .pos-cart-mini:active .pos-cart-mini-icon { transform: scale(0.92); }
  :where(body.pos-body-tag) .pos-cart-mini-icon.is-cart-pulse { animation: cartPulseBox 0.6s ease; }
  :where(body.pos-body-tag) .pos-cart-mini-icon.is-cart-pulse .pos-cart-mini-badge:not(.pos-cart-mini-badge-held) { animation: cartPulseBadge 0.6s ease; }
  :where(body.pos-body-tag) .pos-cart-mini-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    box-sizing: border-box;
    border: 2px solid #fff;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  :where(body.pos-body-tag) .pos-cart-mini-badge-held {
    top: auto;
    right: auto;
    bottom: -6px;
    left: -6px;
    background: var(--brand-300);
    color: var(--brand-900);
  }
  :where(body.pos-body-tag) .pos-cart-mini-badge-web {
    top: auto;
    left: auto;
    bottom: -6px;
    right: -6px;
    background: #16a34a;
    color: #fff;
  }
  :where(body.pos-body-tag) .pos-cart-mini.is-alert {
    background: #ffe3e3;
    /* Vạch đỏ tươi trên đỉnh nút (inset nên không đổi chiều cao), giống vạch active của nút danh mục */
    box-shadow: inset 0 4px 0 #ff1f1f, 0 -6px 14px rgba(16, 42, 88, 0.06);
  }
  :where(body.pos-body-tag) .pos-cart-mini.is-alert .pos-cart-mini-badge { border-color: #ffe3e3; }
  :where(body.pos-body-tag) .pos-cart-web-badge {
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  :where(body.pos-body-tag) .pos-cart-held-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brand-300);
    color: var(--brand-900);
    font-size: 10.5px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  :where(body.pos-body-tag) .pos-service-tabs { gap: 6px; margin-bottom: 4px; }
  :where(body.pos-body-tag) .pos-service-tab { padding: 8px 2px; font-size: 10px; gap: 3px; }
  :where(body.pos-body-tag) .pos-service-tab .pos-tab-icon { width: 18px; height: 18px; }
  :where(body.pos-body-tag) .pos-service-caption {
    display: block;
    margin-bottom: 10px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--brand-700);
  }
  :where(body.pos-body-tag) .pos-field-row { margin-bottom: 8px; }
  :where(body.pos-body-tag) .pos-input { padding: 8px 10px; font-size: 12.5px; }
  :where(body.pos-body-tag) .pos-items-head { order: 4; }
  :where(body.pos-body-tag) .pos-order-items { order: 5; flex: 1 1 auto; min-height: 120px; margin-bottom: 8px; }
  :where(body.pos-body-tag) .pos-quick-actions { order: 6; }
  :where(body.pos-body-tag) .pos-order-totals { order: 9; }
  :where(body.pos-body-tag) .pos-order-empty { padding: 20px 4px; font-size: 12px; line-height: 1.4; }
  :where(body.pos-body-tag) .pos-order-item { flex-direction: column; gap: 8px; padding: 10px 0; }
  :where(body.pos-body-tag) .pos-order-item-name { font-size: 12.5px; line-height: 1.3; }
  :where(body.pos-body-tag) .pos-order-item-meta {
    font-size: 10.5px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  :where(body.pos-body-tag) .pos-order-item-side { display: flex; align-items: center; justify-content: space-between; gap: 6px; text-align: left; }
  :where(body.pos-body-tag) .pos-mini-stepper { gap: 8px; font-size: 13px; justify-content: flex-start; }
  :where(body.pos-body-tag) .pos-mini-btn { width: 28px; height: 28px; font-size: 16px; }
  :where(body.pos-body-tag) .pos-order-item-price { margin-top: 0; text-align: right; font-size: 12.5px; }
  :where(body.pos-body-tag) .pos-order-item-delete { width: 22px; height: 22px; }
  :where(body.pos-body-tag) .pos-order-item-delete svg { width: 12px; height: 12px; }
  :where(body.pos-body-tag) .pos-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-bottom: 8px;
  }
  :where(body.pos-body-tag) .pos-quick-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    padding: 16px 12px;
    border: 1px solid var(--brand-300);
    border-radius: 10px;
    background: var(--brand-50);
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }
  :where(body.pos-body-tag) .pos-quick-btn:active { background: var(--brand-100); }
  :where(body.pos-body-tag) .pos-quick-btn svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--brand-500); }
  :where(body.pos-body-tag) .pos-quick-btn span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :where(body.pos-body-tag) .pos-quick-btn.has-info {
    color: var(--success-dark);
    background: #e7f7ec;
    border-color: var(--success);
    padding-right: 38px;
  }
  :where(body.pos-body-tag) .pos-quick-btn.has-info svg { color: var(--success-dark); }
  :where(body.pos-body-tag) .pos-quick-btn.has-info:active { background: #d3f0dc; }
  :where(body.pos-body-tag) .pos-quick-clear {
    display: none;
    position: absolute;
    top: 4px;
    right: 5px;
    width: 22px;
    height: 22px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--danger);
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
  }
  :where(body.pos-body-tag) .pos-quick-btn.has-info .pos-quick-clear { display: flex; }
  :where(body.pos-body-tag) .pos-quick-clear:active { background: var(--danger); color: #fff; }
  :where(body.pos-body-tag) .pos-customer-row,
  :where(body.pos-body-tag) .pos-order-meta { display: none; }
  :where(body.pos-body-tag) .modal-overlay-slidecol {
    top: 0;
    right: 0;
    left: 0;
    bottom: var(--pos-slidecol-gap, 0px);
    align-items: stretch;
    justify-content: flex-end;
    padding: 0;
    background: rgba(22, 33, 58, 0.40);
  }
  :where(body.pos-body-tag) .modal-panel-slidecol {
    width: 50vw;
    min-width: 176px;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: 0;
    box-shadow: -10px 0 30px rgba(16, 42, 88, 0.16);
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }
  :where(body.pos-body-tag) .modal-overlay-slidecol:not(.is-open) .modal-panel-slidecol { transform: translateX(104%); }
  :where(body.pos-body-tag) .modal-overlay-slidecol.is-open .modal-panel-slidecol {
    transform: translateX(0);
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1);
  }
  :where(body.pos-body-tag) .modal-overlay-slidecol .modal-heading,
  :where(body.pos-body-tag) .modal-overlay-slidecol .modal-close { display: none; }
  :where(body.pos-body-tag) .pos-customer-search-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex: 0 0 auto;
  }
  :where(body.pos-body-tag) .pos-customer-search-row .pos-input { flex: 1; min-width: 0; }
  :where(body.pos-body-tag) .pos-customer-search-row--full { margin-bottom: 2px; }
  :where(body.pos-body-tag) .pos-customer-search-row--full .pos-input { padding: 11px 14px; }
  :where(body.pos-body-tag) .pos-customer-all-btn {
    flex: 0 0 auto;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--brand-500);
    border-radius: var(--radius-md);
    background: var(--brand-50);
    color: var(--brand-600, var(--brand-700));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  :where(body.pos-body-tag) .pos-customer-all-btn[hidden] { display: none !important; }
  :where(body.pos-body-tag) .pos-customer-all-btn svg { width: 18px; height: 18px; }
  :where(body.pos-body-tag) .pos-customer-all-btn:active { background: var(--brand-100); }
  :where(body.pos-body-tag) .pos-customer-all-btn.is-open {
    background: var(--brand-500);
    border-color: var(--brand-500);
    color: #fff;
  }
  :where(body.pos-body-tag) .pos-customer-all-btn.is-open:active { background: var(--brand-700); }
  :where(body.pos-body-tag) .modal-panel-slidecol {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
  }
  :where(body.pos-body-tag) .modal-panel-slidecol .pos-customer-results,
  :where(body.pos-body-tag) .modal-panel-slidecol .voucher-picker-list {
    flex: 0 1 auto;
    min-height: 0;
    max-height: none;
    margin-top: 0;
    overflow-y: auto;
  }
  :where(body.pos-body-tag) .modal-panel-slidecol .pos-customer-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
  }
  :where(body.pos-body-tag) .modal-panel-slidecol .pos-customer-result {
    flex: 0 0 auto;
    padding: 13px 12px;
  }
  :where(body.pos-body-tag) .modal-panel-slidecol .voucher-picker-manual { flex: 0 0 auto; }
  :where(body.pos-body-tag) .pos-modal-points-row {
    flex: 0 0 auto;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  :where(body.pos-body-tag) .pos-modal-points-row:not([hidden]) { display: flex; }
  :where(body.pos-body-tag) .pos-order-totals { padding-top: 8px; margin-top: 2px; }
  :where(body.pos-body-tag) .pos-totals-grand span:last-child { font-weight: 800; color: var(--brand-600); }
  :where(body.pos-body-tag) .pos-order-panel > .pos-order-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0;
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--line);
    background: #fff;
  }
  :where(body.pos-body-tag) .pos-btn-hold,
  :where(body.pos-body-tag) .pos-btn-transfer,
  :where(body.pos-body-tag) .pos-btn-pay {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: auto;
    padding: 17px 4px;
    border: none;
    border-radius: 0;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
  }
  :where(body.pos-body-tag) .pos-btn-hold,
  :where(body.pos-body-tag) .pos-btn-transfer {
    background: var(--brand-50);
    color: var(--brand-700);
    font-weight: 700;
    border-right: 1px solid var(--line);
  }
  :where(body.pos-body-tag) .pos-btn-hold svg { width: 16px; height: 16px; }
  :where(body.pos-body-tag) .pos-btn-pay {
    background: var(--brand-500);
    color: #fff;
    font-weight: 800;
    transition: background-color 0.1s ease, box-shadow 0.1s ease;
  }
  :where(body.pos-body-tag) .pos-btn-hold:active,
  :where(body.pos-body-tag) .pos-btn-transfer:active { background: var(--brand-100); }
  :where(body.pos-body-tag) .pos-btn-transfer.is-selected { background: #e7f7ec; color: var(--success-dark); }
  :where(body.pos-body-tag) .pos-btn-pay:active {
    background: var(--success-dark);
    box-shadow: inset 0 4px 12px rgba(0, 40, 10, 0.35);
  }
  :where(body.pos-body-tag) .pos-btn-pay {
    flex-direction: column;
    gap: 2px;
    padding: 11px 4px;
  }
  :where(body.pos-body-tag) .pos-btn-transfer,
  :where(body.pos-body-tag) .pos-btn-pay {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
  }
  :where(body.pos-body-tag) .pos-btn-pay .pos-pay-label,
  :where(body.pos-body-tag) .pos-btn-pay .pos-pay-total { width: 100%; text-align: center; }
  :where(body.pos-body-tag) .pos-btn-pay:active .pos-pay-label,
  :where(body.pos-body-tag) .pos-btn-pay:active .pos-pay-total { transform: translateY(2px); }
  :where(body.pos-body-tag) .pos-pay-total {
    display: block;
    position: relative;
    z-index: 1;
    font-size: 14px; /* bằng cỡ chữ tiêu đề "Thanh toán" (.pos-btn-pay font-size) */
    font-weight: 800;
    line-height: 1.2;
    opacity: 1;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  :where(body.pos-body-tag) .pos-btn-pay.is-loading .pos-pay-total,
  :where(body.pos-body-tag) .pos-btn-pay.is-success .pos-pay-total { opacity: 0; transform: translateY(-8px); }
  :where(body.pos-body-tag) #modal-cashamount .modal-panel-slidecol {
    justify-content: flex-start;
    overflow-y: auto;
  }
  :where(body.pos-body-tag) .pos-cash-bottom {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    padding-top: 10px;
  }
  :where(body.pos-body-tag) .pos-cash-bottom:empty { display: none; }
  :where(body.pos-body-tag) .pos-cash-bottom [hidden] { display: none !important; }
  :where(body.pos-body-tag) #modal-customer,
  :where(body.pos-body-tag) #modal-voucher { z-index: 110; }
  :where(body.pos-body-tag) .pos-totals-cash { display: none !important; }
  :where(body.pos-body-tag) #modal-history .modal-panel-slidecol {
    justify-content: flex-start;
    overflow: hidden;
  }
  :where(body.pos-body-tag) .pos-product-area {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 10px 8px 14px;
  }
  :where(body.pos-body-tag) .pos-product-card {
    padding: 6px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  :where(body.pos-body-tag) .pos-product-card.is-configuring { border-color: var(--success); background: #e7f7ec; }
  :where(body.pos-body-tag) .pos-product-card.is-configuring .pos-product-name,
  :where(body.pos-body-tag) .pos-product-card.is-configuring .pos-product-price { color: var(--success-dark); }
  :where(body.pos-body-tag) .pos-option-rail {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: max(var(--pos-opt-w), 176px);
    /* z-index cao hơn .pos-order-panel.is-expanded (60) để cột sửa món luôn nổi lên trên khi mở từ giỏ hàng đã mở */
    z-index: 65;
    background: #fff;
    border-left: 1px solid var(--line);
    box-shadow: -6px 0 18px rgba(16, 42, 88, 0.10);
    transform: translateX(102%);
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1), visibility 0s linear 0.28s;
  }
  :where(body.pos-body-tag) .pos-option-rail.is-open { transform: none; visibility: visible; transition-delay: 0s; }
  :where(body.pos-body-tag) .pos-opt-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 8px;
    background: var(--brand-700);
    color: #fff;
    border-bottom: 1px solid var(--brand-800);
  }
  :where(body.pos-body-tag) .pos-opt-head-name {
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  :where(body.pos-body-tag) .pos-option-scroll {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  :where(body.pos-body-tag) .pos-opt-cols { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :where(body.pos-body-tag) .pos-opt-col { min-width: 0; padding: 12px 5px 16px; }
  :where(body.pos-body-tag) .pos-opt-col + .pos-opt-col { border-left: 1px solid var(--brand-300); }
  :where(body.pos-body-tag) .pos-opt-col--size { background: var(--brand-100); }
  :where(body.pos-body-tag) .pos-opt-col--sugar { background: var(--brand-50); }
  :where(body.pos-body-tag) .pos-opt-col--ice { background: var(--brand-20); }
  :where(body.pos-body-tag) .pos-opt-col-title {
    margin-bottom: 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ink-soft);
  }
  :where(body.pos-body-tag) .pos-option-list { display: flex; flex-direction: column; gap: 9px; }
  :where(body.pos-body-tag) .pos-option-chip {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 3px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    word-break: break-word;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }
  :where(body.pos-body-tag) .pos-option-chip.is-selected {
    background: #e7f7ec; /* giống .pos-category-item.is-active */
    border-color: var(--success);
    color: var(--success-dark);
  }
  :where(body.pos-body-tag) .pos-option-topping {
    flex: 1 0 auto;
    padding: 0 8px 12px;
    background: var(--brand-50);
  }
  :where(body.pos-body-tag) .pos-option-title {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    color: var(--brand-700);
  }
  :where(body.pos-body-tag) .pos-topping-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  :where(body.pos-body-tag) .pos-topping-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: #fff;
    text-align: left;
    font-family: var(--font-body);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }
  :where(body.pos-body-tag) .pos-topping-card.is-selected { border-color: var(--success); background: #e7f7ec; }
  :where(body.pos-body-tag) .pos-topping-card.is-selected::after {
    content: '\2713';
    position: absolute;
    top: 9px;
    right: 9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  :where(body.pos-body-tag) .pos-topping-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: calc(100% + 16px);
    min-height: 30px; /* bằng chiều cao khối tên món (.pos-opt-head) */
    padding: 0 10px;
    margin: 0 -8px 8px;
    background: var(--brand-700);
    color: #fff;
    border: none;
    border-radius: 0;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
  }
  :where(body.pos-body-tag) .pos-topping-toggle.is-toggle { cursor: pointer; }
  :where(body.pos-body-tag) .pos-topping-toggle-chevron {
    flex-shrink: 0;
    display: none;
    transition: transform 0.2s ease;
  }
  :where(body.pos-body-tag) .pos-topping-toggle.is-toggle .pos-topping-toggle-chevron { display: inline-flex; }
  :where(body.pos-body-tag) .pos-topping-toggle.is-open .pos-topping-toggle-chevron { transform: rotate(180deg); }
  :where(body.pos-body-tag) .pos-topping-collapse {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.25s ease;
  }
  :where(body.pos-body-tag) .pos-topping-collapse.is-open { grid-template-rows: 1fr; }
  :where(body.pos-body-tag) .pos-topping-collapse > .pos-topping-grid { min-height: 0; }
  :where(body.pos-body-tag) .pos-option-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    border-top: 1px solid var(--brand-800);
    background: var(--brand-700);
  }
  :where(body.pos-body-tag) .pos-opt-pay-btn {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 51px;
    padding: 6px 4px;
    border: none;
    border-right: 2px solid rgba(255, 255, 255, 0.7);
    border-radius: 0;
    background: var(--brand-700);
    color: #fff;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    word-break: break-word;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease;
  }
  :where(body.pos-body-tag) .pos-opt-pay-btn:active { background: var(--brand-800); }
  :where(body.pos-body-tag) .pos-opt-pay-btn:disabled { opacity: 0.6; }
  :where(body.pos-body-tag) .pos-opt-pay-btn[hidden] { display: none; }
  :where(body.pos-body-tag) .pos-add-btn {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-height: 51px;
    padding: 6px 4px;
    border: none;
    border-radius: 0;
    background: var(--brand-700);
    color: #fff;
    font-family: var(--font-body);
    box-shadow: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease, opacity 0.2s ease;
  }
  :where(body.pos-body-tag) .pos-add-btn-top { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 800; }
  :where(body.pos-body-tag) .pos-add-btn-top svg { width: 17px; height: 17px; }
  :where(body.pos-body-tag) .pos-add-btn-price { font-size: 12px; font-weight: 700; opacity: 0.92; }
  :where(body.pos-body-tag) .pos-add-btn:active { background: var(--brand-800); }
  :where(body.pos-body-tag) .pos-add-btn:disabled { opacity: 0.6; }
  :where(body.pos-body-tag) .pos-product-thumb { margin-bottom: 5px; }
  :where(body.pos-body-tag) .pos-product-name { font-size: 12.5px; font-weight: 800; line-height: 14.4px; margin-bottom: 2px; }
  :where(body.pos-body-tag) .pos-product-price { font-size: 11px; }
  :where(body.pos-body-tag) .pos-body { --pos-rail-w: 88px; --pos-opt-w: 50vw; }
  :where(body.pos-body-tag) .pos-category-rail { width: var(--pos-rail-w); flex: 0 0 var(--pos-rail-w); }
  :where(body.pos-body-tag) .pos-category-item {
    position: relative;
    margin: 0;
    padding: 24px 5px 24px 16px; /* chừa bên trái cho mũi tên active */
    font-size: 15.5px;
    font-weight: 800;
    text-align: center;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  :where(body.pos-body-tag) .pos-category-item.is-active {
    background: #e7f7ec; /* nền active: xanh lá nhạt */
    box-shadow: inset 0 -3px 0 var(--success);
  }
  :where(body.pos-body-tag) .pos-category-item.is-active::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-left: 2px solid var(--success);
    border-bottom: 2px solid var(--success);
    transform: translateY(-50%) rotate(45deg);
  }
  :where(body.pos-body-tag) .pos-category-rail { padding-bottom: 116px; }
  :where(body.pos-body-tag) .pos-user-item {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 14px 8px 12px;
    background: var(--brand-700);
    color: #fff;
    border: none;
    border-bottom: 1px solid var(--brand-800);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  :where(body.pos-body-tag) .pos-user-toggle-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.28s ease, background 0.2s ease, color 0.2s ease;
  }
  :where(body.pos-body-tag) .pos-user-toggle-icon svg { width: 14px; height: 14px; }
  :where(body.pos-body-tag) .pos-user-item.is-open { background: var(--brand-800); }
  :where(body.pos-body-tag) .pos-user-item.is-open .pos-user-toggle-icon {
    transform: rotate(180deg);
    background: #fff;
    color: var(--brand-700);
  }
  :where(body.pos-body-tag) .pos-user-item-name {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  :where(body.pos-body-tag) .pos-user-flyout-wrap {
    display: block;
    position: absolute;
    top: 0;
    right: var(--pos-rail-w);
    z-index: 40;
    max-width: calc(100% - var(--pos-rail-w));
    padding: 8px 6px 20px 20px; /* chừa chỗ cho bóng đổ */
    overflow: hidden;
    pointer-events: none;
  }
  :where(body.pos-body-tag) .pos-user-flyout {
    width: min(232px, calc(100vw - var(--pos-rail-w) - 32px));
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(16, 42, 88, 0.16);
    transform: translateX(110%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1),
                opacity 0.2s ease,
                visibility 0s linear 0.28s;
  }
  :where(body.pos-body-tag) .pos-user-flyout.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  :where(body.pos-body-tag) .pos-flyout-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  :where(body.pos-body-tag) .pos-flyout-row svg { width: 18px; height: 18px; flex: 0 0 auto; }
  :where(body.pos-body-tag) .pos-flyout-time { cursor: default; background: var(--brand-50); color: var(--brand-700); }
  :where(body.pos-body-tag) .pos-flyout-time-text { display: flex; flex-direction: column; flex: 1; line-height: 1.25; }
  :where(body.pos-body-tag) .pos-flyout-time-text small { font-size: 11px; font-weight: 500; color: var(--ink-soft); }
  :where(body.pos-body-tag) .pos-flyout-elapsed { font-size: 12px; font-weight: 700; }
  :where(body.pos-body-tag) .pos-flyout-btn:active { background: var(--brand-50); }
  :where(body.pos-body-tag) .pos-flyout-danger { color: var(--danger); }
  :where(body.pos-body-tag) .pos-flyout-danger:active { background: var(--danger-bg); }

  /* ---- Điều chỉnh riêng cho màn hình lớn (vì vẫn còn topbar) ---- */
  /* Cột "Tiền khách đưa": bản desktop cũ cho bấm xuyên qua nền — trả lại như mobile (chạm ngoài để đóng) */
  body.pos-body-tag #modal-cashamount { pointer-events: auto; background: rgba(22, 33, 58, 0.40); }
  /* Cột chọn món nằm trong .pos-body (dưới topbar) -> cho phủ hết chiều cao màn hình như giỏ hàng/các cột khác */
  body.pos-body-tag .pos-option-rail { position: fixed; }
  /* Lưới món: mật độ chip giống mobile (thẻ nhỏ), tự thêm cột khi màn hình rộng thay vì kéo 3 thẻ khổng lồ */
  body.pos-body-tag .pos-product-area { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
}





/* ---------- Hộp thoại "In voucher": xem trước + chọn máy in (settings.php > Quản lý voucher) ---------- */

.vprint-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--brand-50);
}
.vprint-preview img {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  padding: 4px;
  border-radius: var(--radius-sm);
  background: #fff;
  image-rendering: pixelated;
}
.vprint-preview-text { min-width: 0; }
.vprint-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--ink);
  word-break: break-all;
}
.vprint-content {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-700);
}
.vprint-validity {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-soft);
}

.vprint-printer-list {
  list-style: none;
  margin: 6px 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}
.vprint-printer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vprint-printer.is-selected {
  border-color: var(--brand-500);
  background: var(--brand-50);
}
.vprint-printer input[type="radio"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand-500);
}
.vprint-printer-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.vprint-printer-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  word-break: break-word;
}
.vprint-printer-addr {
  font-size: 12px;
  color: var(--ink-soft);
  word-break: break-word;
}
.vprint-tag {
  display: inline-block;
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}
.vprint-empty {
  padding: 14px 12px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
}
.vprint-msg {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
}
.vprint-msg.is-ok { background: #eafaf0; color: var(--success-dark); }
.vprint-msg.is-err { background: var(--danger-bg); color: var(--danger); }

/* ---------- Danh sách "chọn voucher nhanh" — dùng chung cho pos.php và index.php ---------- */

.voucher-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 12px;
}
.voucher-picker-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.voucher-picker-item:active { border-color: var(--brand-500); background: var(--brand-50); }
/* Đang áp dụng: cùng style nút chọn size đang chọn (.pos-option-chip.is-selected) */
.voucher-picker-item.is-selected { background: #e7f7ec; border-color: var(--success); }
.voucher-picker-item.is-selected .voucher-picker-item-code,
.voucher-picker-item.is-selected .voucher-picker-item-desc { color: var(--success-dark); }
.voucher-picker-item-code {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: var(--ink);
}
.voucher-picker-item-desc {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-700);
}
/* Voucher RIÊNG (shop gửi cho khách): nền vàng nhạt + icon hộp quà */
.voucher-picker-item--private {
  background: var(--warning-bg);
  border-color: #f2d58a;
}
.voucher-picker-item--private:active { background: #ffedc2; border-color: var(--warning); }
.voucher-picker-item--private.is-selected { background: #ffedc2; border-color: var(--warning); }
.voucher-picker-item--private .voucher-picker-item-desc,
.voucher-picker-item--private.is-selected .voucher-picker-item-desc { color: var(--warning); }
.voucher-picker-item--private.is-selected .voucher-picker-item-code { color: var(--ink); }
.voucher-picker-item-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.voucher-picker-gift { flex: 0 0 auto; color: var(--warning); }
.voucher-picker-item-tag {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #f2d58a;
  color: var(--warning);
  font-size: 10.5px;
  font-weight: 700;
}
.voucher-picker-item-note {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.voucher-picker-empty {
  padding: 16px 12px;
  border: 1.5px dashed var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--ink-soft);
  text-align: center;
}
.voucher-picker-manual {
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.voucher-picker-manual .pos-input,
.voucher-picker-manual .input {
  margin-top: 10px;
}

/* Khối "Áp mã khuyến mãi" trong giỏ hàng khách (index.php) */
.cart-voucher-box { margin-bottom: 10px; }
.cart-points-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.cart-points-box[hidden] { display: none; }
.cart-points-icon { display: inline-flex; color: var(--brand-700); flex: none; }
.cart-points-icon svg { width: 22px; height: 22px; }
.cart-points-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cart-points-title { font-size: 13px; font-weight: 800; color: var(--ink); }
.cart-points-hint { font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
.cart-points-hint:empty { display: none; }
.cart-voucher-add {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--brand-700);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cart-voucher-add svg { flex: 0 0 auto; width: 17px; height: 17px; }
.cart-voucher-add span:nth-child(2) { flex: 1; text-align: left; }
.cart-voucher-add-chevron { color: var(--ink-soft); }
.cart-voucher-applied {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--brand-500);
  border-radius: var(--radius-sm);
  background: var(--brand-50);
}
.cart-voucher-applied svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--brand-700); }
.cart-voucher-applied-text { flex: 1; min-width: 0; }
.cart-voucher-applied-code { display: block; font-size: 13px; font-weight: 800; color: var(--ink); }
.cart-voucher-applied-desc { display: block; font-size: 11.5px; font-weight: 600; color: var(--brand-700); }
.cart-voucher-remove {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

/* ================= Cài đặt nội dung in (settings.php: modalPrintContent) ================= */
.pc-section {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px dashed var(--border, #e2e2e2);
}
.pc-section:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
.pc-section-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.pc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 10px;
}
.pc-grid > div { min-width: 0; }
.pc-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.pc-checkbox-row input[type="checkbox"] {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  margin: 1px 0 0;
}
/* Ô tick đặt cạnh 1 ô nhập trong .pc-grid: cao tối thiểu bằng ô nhập, chữ dài thì tự xuống dòng bên cạnh ô tick */
.pc-checkbox-row.pc-checkbox-row--field {
  margin: 0;
  min-height: 44px;
  align-items: center;
  line-height: 1.3;
}
/* Chọn khổ giấy (radio K57 / K80): xuống dòng khi hẹp */
.pc-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 8px 0 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.pc-radio-row label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* ===== Bộ dựng khối nội dung tự do (settings.php: modalPrintContent > Hoá đơn quầy) ===== */
.pc-block-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 12px;
}
.pc-block {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: #fbfcff;
  padding: 10px 12px 12px;
}
.pc-block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
  margin-bottom: 8px;
}
.pc-block-type-tag {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--brand-700);
  background: var(--brand-50);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.pc-block-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-left: auto; /* khi xuống dòng vẫn nằm sát mép phải */
}
.pc-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* iOS Safari tự thêm padding ngang cho <button> -> ruột nút chỉ còn vài px, icon bị co tí hon */
  line-height: 0;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  flex: 0 0 auto;
}
.pc-icon-btn svg {
  display: block;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  pointer-events: none;
}
.pc-icon-btn:hover:not(:disabled) {
  border-color: var(--brand-400);
  color: var(--brand-700);
  background: var(--brand-50);
}
.pc-icon-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.pc-icon-btn.active {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
}
.pc-icon-btn-danger:hover:not(:disabled) {
  border-color: var(--danger);
  color: var(--danger);
  background: var(--danger-bg);
}
.pc-block-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pc-block-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: nowrap;
}
.pc-block-row .input {
  padding: 10px 12px;
  font-size: 13.5px;
  min-width: 0;
}
.pc-block-row > div { min-width: 0; }
.pc-block-row > div .input { min-width: 0; }
.pc-block { min-width: 0; }
/* Không dùng class .input cho 2 control này để tránh bị rule ".settings-modal .input { width:100% }"
   (specificity cao hơn) đè mất chiều rộng flex, gây vỡ layout (ô nhập bị bóp nhỏ xíu, ô cỡ chữ tràn ra ngoài modal). */
.pc-block-text-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 13.5px;
  font-family: var(--font-body);
  color: var(--ink);
  background: #fbfcff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.pc-block-text-input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px var(--brand-50);
}

.pc-block-size-select {
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 4px;
  font-size: 12.5px;
  font-family: var(--font-body);
  color: var(--ink);
  background: #fbfcff;
  text-align: center;
}
.pc-align-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  flex: 0 0 auto;
}
.pc-block-align-select {
  flex: 1 1 auto;
  min-width: 0;
}

/* Hàng "Khoảng cách dòng" chung cho mọi loại khối — px cộng thêm giữa các dòng
   bên trong khối (đặc biệt hữu ích cho khối CSDL nhiều dòng như giỏ hàng/tính toán). */
.pc-spacing-row {
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px dashed var(--line);
}
.pc-spacing-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.pc-spacing-input {
  flex: 0 0 64px;
  width: 64px;
  min-width: 64px;
  text-align: center;
}
.pc-spacing-hint {
  margin: 6px 0 0;
  white-space: normal;
  word-break: break-word;
}

/* Nút "Chọn tệp" lồng vào đầu ô chọn ảnh, màu xanh nhạt theo đúng bảng màu hệ thống. */
.pc-file-wrap {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: #fbfcff;
  overflow: hidden;
  cursor: pointer;
}
.pc-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 700;
  font-size: 12.5px;
  white-space: nowrap;
  border-right: 1.5px solid var(--line);
  transition: background 0.15s ease;
}
.pc-file-wrap:hover .pc-file-btn {
  background: var(--brand-100);
}
.pc-file-name {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.pc-image-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.pc-image-preview img {
  max-height: 48px;
  max-width: 120px;
  object-fit: contain;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px;
  background: #fff;
}
.pc-block-remove-img {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
}

/* Nút "+ Thêm khối" đơn ở cuối danh sách (dùng chung popover với nút "+" trong từng khối). */
.pc-add-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px dashed var(--brand-300, var(--line));
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--brand-700);
  background: var(--brand-50);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pc-add-trigger:hover {
  border-color: var(--brand-500);
  background: var(--brand-100);
}

/* Popover chọn loại khối mới (mở từ nút "+" trong từng khối, hoặc từ nút "+ Thêm khối"). */
.pc-add-menu {
  z-index: 3000;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(20, 25, 40, 0.16);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 210px;
}
.pc-add-menu button[data-newtype] {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  text-align: left;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  color: var(--ink);
  cursor: pointer;
}
.pc-add-menu button[data-newtype]:hover {
  background: var(--brand-50);
  color: var(--brand-700);
}
.pc-add-menu-db {
  border-top: 1px solid var(--line);
  margin-top: 4px;
  padding-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pc-add-menu-db-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pc-add-menu-db select {
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 7px 8px;
  font-size: 12.5px;
  font-family: var(--font-body);
  color: var(--ink);
  background: #fbfcff;
  margin: 0 6px;
  width: calc(100% - 12px);
}
.pc-add-menu-db button[data-newtype="db"] {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--brand-700);
  font-weight: 700;
  font-size: 12.5px;
  padding: 8px;
  margin: 0 6px;
  text-align: center;
  justify-content: center;
}
.pc-add-menu-db button[data-newtype="db"]:hover {
  background: var(--brand-50);
}

/* ================= Gán máy in theo mục đích (settings.php: printerSettingsModal, card-purpose) ================= */
.pa-purpose-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.pa-purpose-label {
  min-width: min(190px, 100%);
  font-weight: 700;
  color: var(--ink);
}
.pa-purpose-row select.pa-purpose-select {
  flex: 1;
  min-width: min(180px, 100%);
  max-width: 100%;
}
.pa-purpose-msg {
  min-height: 16px;
  margin: 2px 0 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-700, #2ECC71);
}
.pa-purpose-msg.is-error {
  color: var(--danger, #e14b4b);
}

/* Trang đăng ký: banner nhận điểm khi vào từ mã QR trên hoá đơn quầy */
.signup-claim-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--brand-200, var(--line));
  border-radius: var(--radius-sm);
  background: var(--brand-50);
  color: var(--brand-700);
}
.signup-claim-banner svg { flex: none; }
.signup-claim-title { font-size: 15px; font-weight: 800; color: var(--brand-800); }
.signup-claim-sub { margin-top: 2px; font-size: 12px; color: var(--ink-soft); line-height: 1.35; }
.signup-claim-notice {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--warning-bg);
  color: var(--warning);
  font-size: 13px;
  line-height: 1.4;
}


/* ============================================================
   settings.php — MOBILE: cột menu bên phải (giống pos.php) +
   modal mở thẳng ở phần màn hình còn lại bên trái cột menu
   ============================================================ */

/* Desktop: các phần tử chỉ dành cho mobile thì ẩn */
.st-user-item,
.st-user-flyout-wrap,
.st-empty-hint { display: none; }

@media (max-width: 900px) {

  body.settings-page {
    --st-rail-w: 88px;
    background: #fff;
  }

  /* Thanh trên cùng cũ (tên + điều hướng) được thay bằng nút tên user + menu trượt ở đầu cột menu */
  body.settings-page .pos-topbar { display: none; }

  /* Vùng nội dung = phần còn lại bên trái cột menu */
  body.settings-page .page {
    max-width: none;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    padding: 0 var(--st-rail-w) 0 0;
  }

  /* ---- Cột menu: lưới ô cài đặt biến thành cột dọc cố định mép phải ---- */
  body.settings-page .settings-grid {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--st-rail-w);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-left: 1px solid var(--line);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  body.settings-page .settings-tile {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    gap: 7px;
    padding: 18px 5px 18px 14px; /* chừa bên trái cho mũi tên đang chọn */
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--line);
    font-size: 11.5px;
    line-height: 1.25;
    word-break: break-word;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  }
  body.settings-page .settings-tile:hover,
  body.settings-page .settings-tile:active { transform: none; }
  body.settings-page .settings-tile:active { background: var(--brand-50); }
  body.settings-page .settings-tile .card-icon { transition: stroke 0.25s ease; }

  /* Ô đang chọn: cùng kiểu với danh mục đang chọn ở pos.php (nền xanh lá nhạt, viền đáy, mũi tên chỉ ra vùng nội dung) */
  body.settings-page .settings-tile.is-active {
    background: #e7f7ec;
    color: var(--success-dark);
    box-shadow: inset 0 -3px 0 var(--success);
  }
  body.settings-page .settings-tile.is-active .card-icon { stroke: var(--success-dark); }
  body.settings-page .settings-tile.is-active::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-left: 2px solid var(--success);
    border-bottom: 2px solid var(--success);
    transform: translateY(-50%) rotate(45deg);
    animation: stArrowNudge 1.1s ease-in-out infinite;
  }
  @keyframes stArrowNudge {
    0%, 100% { transform: translateY(-50%) translateX(0) rotate(45deg); }
    25%      { transform: translateY(-50%) translateX(-3px) rotate(45deg); }
    75%      { transform: translateY(-50%) translateX(2px) rotate(45deg); }
  }

  /* ---- Nút tên user (đầu cột menu) ---- */
  body.settings-page .st-user-item {
    position: sticky;
    top: 0;
    z-index: 3;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 14px 8px 12px;
    background: var(--brand-700);
    color: #fff;
    border: none;
    border-bottom: 1px solid var(--brand-800);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .st-user-toggle-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.28s ease, background 0.2s ease, color 0.2s ease;
  }
  .st-user-toggle-icon svg { width: 14px; height: 14px; }
  body.settings-page .st-user-item.is-open { background: var(--brand-800); }
  .st-user-item.is-open .st-user-toggle-icon { transform: rotate(180deg); background: #fff; color: var(--brand-700); }
  .st-user-item-name {
    flex: 1;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ---- Menu người dùng: chui ra từ mép trái của cột menu ---- */
  .st-user-flyout-wrap {
    display: block;
    position: fixed;
    top: 0;
    right: var(--st-rail-w);
    z-index: 1200;
    max-width: calc(100% - var(--st-rail-w));
    padding: 8px 6px 20px 20px; /* chừa chỗ cho bóng đổ */
    overflow: hidden;
    pointer-events: none;
  }
  .st-user-flyout {
    width: min(232px, calc(100vw - var(--st-rail-w) - 32px));
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(16, 42, 88, 0.16);
    transform: translateX(110%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1), opacity 0.2s ease, visibility 0s linear 0.28s;
  }
  .st-user-flyout.is-open {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .st-flyout-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .st-flyout-row svg { width: 18px; height: 18px; flex: 0 0 auto; }
  .st-flyout-time { cursor: default; background: var(--brand-50); color: var(--brand-700); }
  .st-flyout-time-text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
  .st-flyout-time-text small { font-size: 11px; font-weight: 500; color: var(--ink-soft); }
  .st-flyout-time-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .st-flyout-btn:active { background: var(--brand-50); }
  .st-flyout-danger { color: var(--danger); }
  .st-flyout-danger:active { background: var(--danger-bg); }

  /* ---- Gợi ý khi chưa mở mục nào ---- */
  .st-empty-hint {
    position: fixed;
    top: 0;
    left: 0;
    right: var(--st-rail-w);
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    text-align: center;
    color: var(--ink-soft);
    font-size: 13px;
    font-weight: 600;
    pointer-events: none;
  }
  .st-empty-hint svg { width: 30px; height: 30px; opacity: 0.55; }

  /* ---- Modal: mở thẳng ở phần màn hình còn lại, KHÔNG phủ cột menu (bấm ô khác để chuyển mục ngay) ---- */
  body.settings-page .settings-modal-overlay {
    inset: 0 var(--st-rail-w) 0 0;
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    background: #fff;
  }
  body.settings-page .settings-modal-overlay .settings-modal {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    padding: 22px 16px calc(28px + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
  }
  /* Trượt nhẹ từ phía cột menu ra mỗi khi đổi mục */
  body.settings-page .settings-modal-overlay:not(.settings-modal-overlay--nested).show .settings-modal {
    animation: stPanelIn 0.26s cubic-bezier(0.22, 0.9, 0.3, 1);
  }
  @keyframes stPanelIn {
    from { transform: translateX(26px); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }

  /* Modal con (sửa món, topping, thêm danh mục, lightbox...): vẫn nổi giữa vùng còn lại, nằm trên modal cha */
  body.settings-page .settings-modal-overlay.settings-modal-overlay--nested {
    padding: 12px;
    align-items: center;
    justify-content: center;
    background: rgba(16, 42, 88, 0.55);
  }
  body.settings-page .settings-modal-overlay--nested .settings-modal {
    width: 100%;
    max-width: 420px;
    height: auto;
    max-height: 100%;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 24px 18px 26px;
  }

  body.settings-page .image-lightbox-overlay .settings-modal { padding: 0; box-shadow: none; }

  /* Popup "Sửa thông tin máy in" (tạo động trong modal máy in) cũng chỉ nằm trong vùng còn lại */
  body.settings-page #printerSettingsModal .pa-edit-overlay { right: var(--st-rail-w); }

  /* Thông báo thành công / lỗi của trang: nổi phía trên modal (nếu không sẽ bị modal toàn vùng che mất), tự ẩn sau vài giây */
  body.settings-page .page > .success-box,
  body.settings-page .page > .error-box {
    position: fixed;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 10px;
    right: calc(var(--st-rail-w) + 10px);
    z-index: 1300;
    margin: 0;
    box-shadow: 0 8px 24px rgba(16, 42, 88, 0.18);
    animation: stToastOut 0.3s ease 5s forwards;
  }
  @keyframes stToastOut {
    to { opacity: 0; visibility: hidden; transform: translateY(-8px); }
  }

  @media (prefers-reduced-motion: reduce) {
    body.settings-page .settings-tile.is-active::before,
    body.settings-page .settings-modal-overlay:not(.settings-modal-overlay--nested).show .settings-modal { animation: none !important; }
  }
}


/* ============================================================
   settings.php — Accordion (nút trượt đóng/mở) trong các modal gộp:
   Nhân viên / Voucher / Khách hàng
   ============================================================ */
.st-acc {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.st-acc.is-open { border-color: var(--brand-500); box-shadow: 0 6px 16px -12px var(--brand-600); }
.st-acc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 13px 14px;
  border: none;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.st-acc-head:active { background: var(--brand-50); }
.st-acc.is-open > .st-acc-head { background: var(--brand-50); color: var(--brand-700); }
.st-acc-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-50);
  color: var(--brand-600);
  transition: background 0.2s ease, color 0.2s ease;
}
.st-acc.is-open .st-acc-icon { background: var(--brand-600); color: #fff; }
.st-acc-title { flex: 1; min-width: 0; }
.st-acc-badge {
  flex: 0 0 auto;
  min-width: 22px;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.st-acc-badge.is-alert { background: var(--danger); color: #fff; }
.st-acc-chevron { flex: 0 0 auto; color: var(--ink-soft); transition: transform 0.28s ease; }
.st-acc.is-open .st-acc-chevron { transform: rotate(180deg); }

/* Trượt mượt bằng grid-template-rows (0fr -> 1fr), không cần biết trước chiều cao nội dung */
.st-acc-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* cột không được rộng hơn khung, dù bên trong có chuỗi dài không xuống dòng được */
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.st-acc.is-open > .st-acc-panel { grid-template-rows: 1fr; }
.st-acc-panel-inner { min-height: 0; min-width: 0; overflow: hidden; }
.st-acc:not(.is-open) .st-acc-panel-inner { visibility: hidden; transition: visibility 0s linear 0.28s; }
.st-acc-body { padding: 4px 14px 16px; min-width: 0; }
.st-acc-body small,
.st-acc-body code { overflow-wrap: anywhere; }
.st-acc-body > hr:first-child { display: none; }
.st-acc-body > p:first-child { margin-top: 10px; }
.st-acc-body .success-box, .st-acc-body .error-box { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) {
  .st-acc-panel, .st-acc-chevron { transition: none; }
}

/* Nút Đổi PIN trên thanh điều hướng (là <button>, không phải liên kết) */
button.pos-icon-btn { border: 0; cursor: pointer; font: inherit; padding: 0; }
/* Ô "Lịch sử" trong lưới cài đặt là liên kết sang trang khác */
a.settings-tile { text-decoration: none; }

/* Accordion: sau khi trượt xong ("is-settled") cho nội dung tràn ra ngoài (menu thả xuống, popup...) để không bị cắt */
.st-acc-head { border-radius: calc(var(--radius-md) - 1px); }
.st-acc.is-open > .st-acc-head { border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0; }
.st-acc.is-settled { overflow: visible; }
.st-acc.is-settled > .st-acc-panel > .st-acc-panel-inner { overflow: visible; }
/* Khối "Cài đặt máy in" nằm trong mục trượt: bỏ khoảng đệm thừa của .pa-page */
.st-acc-body > #printerSettingsModal > .pa-page { margin-top: 10px; }

/* Modal máy in (print-agent.css nạp sau base.css -> selector có body.settings-page để thắng độ ưu tiên):
   ô chọn driver, nút và chữ trong thẻ máy in không được rộng hơn thẻ khi modal hẹp (mobile) */
body.settings-page #printerSettingsModal .printer-list li { min-width: 0; }
body.settings-page #printerSettingsModal .printer-list li > * { min-width: 0; max-width: 100%; }
body.settings-page #printerSettingsModal .printer-list select {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}
body.settings-page #printerSettingsModal .printer-list .p-addr { flex-wrap: wrap; overflow-wrap: anywhere; }
body.settings-page #printerSettingsModal .kv .v { min-width: 0; overflow-wrap: anywhere; }

/* "Cài đặt nội dung in" trên mobile: vùng nội dung chỉ còn ~200px nên các hàng khối phải xuống dòng,
   ô nhập không chiếm hết chiều ngang đẩy nút ✓đậm / cỡ chữ ra ngoài */
@media (max-width: 900px) {
  body.settings-page .pc-block-row { flex-wrap: wrap; }
  body.settings-page .pc-block-text-input { flex: 1 1 100%; }
  body.settings-page .pc-block-align-select { flex: 1 1 0; }
  body.settings-page .pc-block-row > .input[data-field^="labels."] { flex: 1 1 0; }
  body.settings-page .pc-add-menu { max-width: calc(100vw - 24px); min-width: 0; }
  /* Chốt chặn: modal không bao giờ trượt ngang */
  body.settings-page .settings-modal { overflow-x: hidden; }
}
@media (max-width: 900px) {
  /* Mobile: ô chọn driver chiếm trọn 1 hàng trong thẻ, các nút sửa/xoá/in nằm hàng dưới */
  body.settings-page #printerSettingsModal .printer-list select { flex: 1 1 100%; width: 100%; }
}


/* settings.php: ô "Bán hàng" dưới nút tên user (chỉ mobile) + nút Đăng xuất nằm CÙNG DÒNG với tên user trong menu (nút nhỏ, chỉ icon) */
.settings-tile.st-tile-mobile { display: none; }
@media (max-width: 900px) {
  body.settings-page .settings-tile.st-tile-mobile { display: flex; }
  .st-flyout-userblock { flex-direction: row; align-items: center; gap: 8px; }
  .st-flyout-userline { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; }
  .st-flyout-logout {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--danger);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .st-flyout-logout span { display: none; } /* chỉ hiện icon; nhãn "Đăng xuất" nằm ở title/aria-label của nút */
  .st-flyout-logout svg { width: 16px; height: 16px; flex: 0 0 auto; }
  .st-flyout-logout:active { background: var(--danger-bg); }
}

/* =====================================================
   POS — chữ đậm hơn (chỉ đổi font-weight, KHÔNG đổi cỡ chữ / line-height nên kích thước các khối giữ nguyên)
   Đặt cuối file để thắng các rule font-weight cũ cùng độ ưu tiên ở phía trên.
   ===================================================== */

/* Nền chung cho MỌI chữ trong cột giỏ hàng (kể cả khối Khách/Voucher + khối tính toán được JS chuyển sang cột tiền ở mobile):
   :where() có độ ưu tiên bằng 0 -> chỉ nâng các chữ chưa đặt font-weight riêng lên 700, không đè lên rule riêng của từng phần tử. */
:where(.pos-order-panel, .pos-order-panel *, .pos-cash-bottom, .pos-cash-bottom *) { font-weight: 700; }
.pos-order-panel ::placeholder { font-weight: 500; } /* chữ gợi ý trong ô nhập vẫn nhẹ hơn chữ đã nhập */

/* Các phần tử đang đặt font-weight riêng (600/700) -> đẩy lên 800 */
.pos-user-item-name,
.pos-topbar-name,                       /* tên user: mobile (cột danh mục) + desktop (topbar) */
.pos-opt-head-name,                     /* tên món ở đầu cột chọn size/topping + nút Topping */
.pos-opt-col-title,                     /* tiêu đề cột Size / Đường / Đá */
.pos-option-title,                      /* tiêu đề khối Topping */
.pos-option-chip,
.pos-option-chip.is-selected,           /* khối chọn size / đường / đá */
.pos-cart-tab,
.pos-service-tab,
.pos-service-caption,
.pos-items-head-label,
.pos-order-item-name,
.pos-order-item-price,
.pos-mini-stepper,
.pos-quick-btn,
.pos-customer-name,
.pos-points-count,
.pos-totals-grand,
.pos-btn-hold,
.pos-btn-transfer,
.pos-cash-ready-chip,
.pos-table-btn,
.pos-ship-pick-btn,
.pos-link-btn,
.pos-clear-btn { font-weight: 800; }
.pos-totals-cash { font-weight: 700; }


/* ============================================================
   TRANG INDEX (khách đặt món) — khu vực chọn món theo bố cục trang POS
   Giữ nguyên topbar (.shop-header); bên dưới là: món (trái) | cột danh mục (phải),
   nút giỏ hàng cố định ở chân cột danh mục. Không có phần thu tiền / hình thức bán / khách hàng của POS.
   Mọi rule đều gắn với body.shop-body--pos hoặc .shop-pos nên KHÔNG ảnh hưởng trang POS / settings.
   ============================================================ */

body.shop-body--pos {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.shop-body--pos .shop-header { flex: 0 0 auto; }

.shop-main.shop-main-pos {
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.shop-main-pos > .buy-empty { margin: 24px 20px; }

.shop-pos {
  flex: 1 1 auto;
  min-height: 0;
  background: #fff;
  font-family: var(--font-body);
  color: var(--ink);
}
@media all {
  .shop-pos { --pos-rail-w: 88px; --pos-opt-w: 50vw; }
}
.shop-pos [hidden] { display: none !important; }
.shop-pos .pos-product-area { min-width: 0; }
.shop-pos .pos-product-thumb { position: relative; }
.shop-pos .pos-category-rail { padding-bottom: 116px; } /* chừa chỗ cho nút giỏ hàng cố định */
.shop-pos .pos-category-item { -webkit-tap-highlight-color: transparent; outline: none; }
.shop-pos .pos-product-card { -webkit-tap-highlight-color: transparent; }

.shop-pos .shop-pos-footer {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---- Nút giỏ hàng ở chân cột danh mục (dùng cả desktop lẫn mobile) ---- */
.shop-pos .pos-cart-mini {
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--pos-rail-w);
  box-sizing: border-box;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px calc(10px + env(safe-area-inset-bottom, 0px));
  border: none;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 -6px 14px rgba(16, 42, 88, 0.06);
  font-family: var(--font-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shop-pos .pos-cart-mini-total { font-size: 13.5px; font-weight: 800; color: var(--brand-600); }
.shop-pos .pos-cart-mini-icon {
  position: relative;
  margin-top: 6px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-500);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(43, 125, 255, 0.30);
  transition: transform 0.12s ease;
}
.shop-pos .pos-cart-mini-icon svg { width: 20px; height: 20px; }
.shop-pos .pos-cart-mini:active .pos-cart-mini-icon { transform: scale(0.92); }
.shop-pos .pos-cart-mini.is-cart-pulse .pos-cart-mini-icon { animation: cartPulseBox 0.6s ease; }
.shop-pos .pos-cart-mini.is-cart-pulse .pos-cart-mini-badge { animation: cartPulseBadge 0.6s ease; }
.shop-pos .pos-cart-mini-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 4px;
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Đơn đã gửi đang xử lý: xanh lá, góc dưới-phải (giống badge đơn web ở trang POS) */
.shop-pos .pos-cart-mini-badge-web {
  top: auto;
  bottom: -6px;
  background: #16a34a;
}

/* ---- Mọi kích thước màn hình (mobile + màn lớn dùng chung): cột chọn size – đường – đá – topping trượt ra từ mép phải (giống cột chọn món của POS) ----
   Dùng lại modal #modal-product (đã có sẵn ghi chú + số lượng + thêm vào giỏ), chỉ đổi giao diện.
   Chạm vùng trống bên trái để đóng. Chỉ áp cho trang index (gắn với body.shop-body--pos) nên không ảnh hưởng pos.php. */
@media all {
  body.shop-body--pos #modal-product.modal-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: flex-end;
    background: rgba(22, 33, 58, 0.40);
  }
  body.shop-body--pos #modal-product .modal-panel {
    width: max(50vw, 176px);
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: -10px 0 30px rgba(16, 42, 88, 0.16);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Cột xếp dọc: chân cột (số lượng + Gửi đơn/Thêm) luôn nằm cuối cột dù nội dung ngắn (VD: Topping đang đóng) */
    display: flex;
    flex-direction: column;
  }
  body.shop-body--pos #modal-product .modal-panel > * { flex-shrink: 0; }
  body.shop-body--pos #modal-product.modal-overlay:not(.is-open) .modal-panel { transform: translateX(104%); }
  body.shop-body--pos #modal-product.modal-overlay.is-open .modal-panel {
    transform: translateX(0);
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1);
  }
  body.shop-body--pos #modal-product .modal-close { display: none; }

  /* Đầu cột: tên món (cùng kiểu .pos-opt-head) */
  body.shop-body--pos #modal-product .modal-heading {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0;
    padding: 6px 8px;
    min-height: 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-700);
    border-bottom: 1px solid var(--brand-800);
    text-align: center;
  }
  body.shop-body--pos #modal-product .modal-heading h1 {
    margin: 0;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    color: #fff;
    overflow-wrap: anywhere;
  }
  body.shop-body--pos #modal-product .modal-heading p { display: none; }

  body.shop-body--pos #modal-product .pd-section { margin: 0; }
  body.shop-body--pos #modal-product .pd-section-title {
    margin: 0 0 8px;
    font-family: var(--font-body);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    color: var(--ink-soft);
  }

  /* 3 cột có đường gạch phân tách: Size | Đường | Đá */
  body.shop-body--pos #modal-product .pd-combo-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 0;
    border-radius: 0;
    background: none;
  }
  body.shop-body--pos #modal-product .pd-combo-divider { display: none; }
  body.shop-body--pos #modal-product .pd-combo-col {
    min-width: 0;
    padding: 12px 5px 16px;
  }
  body.shop-body--pos #modal-product .pd-combo-col ~ .pd-combo-col { border-left: 1px solid var(--brand-300); }
  body.shop-body--pos #modal-product .pd-combo-col:nth-of-type(1) { background: var(--brand-100); }
  body.shop-body--pos #modal-product .pd-combo-col:nth-of-type(2) { background: var(--brand-50); }
  body.shop-body--pos #modal-product .pd-combo-col:nth-of-type(3) { background: var(--brand-20); }
  body.shop-body--pos #modal-product .pd-combo-col .pd-option-list { gap: 9px; }

  /* Nút chọn size / đường / đá: dạng chip như .pos-option-chip (ẩn ô tròn radio, chọn -> xanh lá nhạt) */
  body.shop-body--pos #modal-product .pd-option-row {
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 48px;
    padding: 10px 3px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    box-shadow: none;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }
  body.shop-body--pos #modal-product .pd-option-row.is-selected {
    background: #e7f7ec;
    border-color: var(--success);
    box-shadow: none;
  }
  body.shop-body--pos #modal-product .pd-option-row input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  body.shop-body--pos #modal-product .pd-option-top { justify-content: center; gap: 0; }
  body.shop-body--pos #modal-product .pd-option-label {
    flex: 0 1 auto;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    word-break: break-word;
    color: var(--ink);
  }
  body.shop-body--pos #modal-product .pd-option-price {
    padding-left: 0;
    font-size: 11px;
    text-align: center;
    color: var(--brand-600);
  }
  body.shop-body--pos #modal-product .pd-option-row.is-selected .pd-option-label,
  body.shop-body--pos #modal-product .pd-option-row.is-selected .pd-option-price { color: var(--success-dark); }

  /* Ghi chú */
  body.shop-body--pos #modal-product .pd-section:has(.pd-note-input) { padding: 12px 8px 14px; }
  body.shop-body--pos #modal-product .pd-note-input {
    min-height: 52px;
    padding: 8px 10px;
    font-size: 12.5px;
    border-radius: 10px;
  }

  /* Khối Topping: nền xanh nhạt, tiêu đề là khối đậm full chiều ngang (cùng tông tên món) */
  body.shop-body--pos #modal-product #pdToppingSection {
    padding: 0 8px 12px;
    background: var(--brand-50);
  }
  body.shop-body--pos #modal-product .pd-topping-toggle {
    justify-content: center;
    width: calc(100% + 16px);
    min-height: 30px;
    padding: 0 10px;
    margin: 0 -8px 8px;
    background: var(--brand-700);
    color: #fff;
    border-radius: 0;
  }
  body.shop-body--pos #modal-product .pd-topping-toggle.pd-section-title { color: #fff; margin-bottom: 8px; }
  body.shop-body--pos #modal-product .pd-topping-toggle-chevron { color: #fff; }
  body.shop-body--pos #modal-product .pd-topping-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

  /* Thẻ topping: ảnh trên – tên – giá (như .pos-topping-card), dấu ✓ khi chọn */
  body.shop-body--pos #modal-product .pd-topping-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
  }
  body.shop-body--pos #modal-product .pd-topping-card .buy-product-add-badge,
  body.shop-body--pos #modal-product .pd-topping-card .buy-product-divider { display: none; }
  body.shop-body--pos #modal-product .pd-topping-card .buy-product-thumb-half { margin-bottom: 6px; }
  body.shop-body--pos #modal-product .pd-topping-card .buy-product-info-half { gap: 2px; }
  body.shop-body--pos #modal-product .pd-topping-card .buy-product-name { font-family: var(--font-body); font-size: 12.5px; font-weight: 800; line-height: 14.4px; }
  body.shop-body--pos #modal-product .pd-topping-card .buy-product-price { font-family: var(--font-body); font-size: 11px; color: var(--brand-600); }
  body.shop-body--pos #modal-product .pd-topping-card.is-selected { border-color: var(--success); background: #e7f7ec; }
  body.shop-body--pos #modal-product .pd-topping-card.is-selected .buy-product-name,
  body.shop-body--pos #modal-product .pd-topping-card.is-selected .buy-product-price { color: var(--success-dark); }
  body.shop-body--pos #modal-product .pd-topping-card.is-selected::after {
    content: '\2713';
    position: absolute;
    top: 9px;
    right: 9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--success);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Chân cột: số lượng (− n +) rồi nút [Thêm · giá] full chiều ngang, nền đậm như chân cột chọn món của POS; dính đáy cột */
  body.shop-body--pos #modal-product .pd-footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: auto 0 0; /* đẩy xuống đáy cột khi nội dung ngắn */
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--brand-700);
    border-top: 1px solid var(--brand-800);
  }
  body.shop-body--pos #modal-product .pd-qty-stepper {
    align-self: stretch;
    justify-content: center;
    gap: 14px;
    padding: 8px 6px;
    border: none;
    border-radius: 0;
    background: #fff;
  }
  body.shop-body--pos #modal-product .pd-footer .btn-primary {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    min-height: 51px;
    padding: 6px 4px;
    border: none;
    border-radius: 0;
    background: var(--brand-700);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    font-size: 0; /* ẩn dấu "·" ngăn cách giữa nhãn và giá */
    transition: background-color 0.15s ease;
  }
  body.shop-body--pos #modal-product .pd-footer .btn-primary:active { background: var(--brand-800); }
  body.shop-body--pos #modal-product .pd-footer .btn-primary #pdAddToCartLabel { font-size: 14px; font-weight: 800; }
  body.shop-body--pos #modal-product .pd-footer .btn-primary #pdTotalPrice { font-size: 12px; font-weight: 700; opacity: 0.92; }
}


/* ============================================================
   Lần chỉnh 2 — trang index
   (1) Topbar mobile chưa đăng nhập: 3 khối (tên shop + chia sẻ | Đăng ký | Đăng nhập)
   (2) Chip món có trạng thái active giống chip topping
   (3) Tiêu đề danh mục món bớt đậm
   ============================================================ */

/* ---- (1) Topbar mobile, khách chưa đăng nhập ---- */


/* Khối tên shop: giữ vị trí cũ (cột trái), 3 dòng — tên / lời chào / đường nét đứt + dòng giới thiệu */







/* Khối chia đôi Đăng ký | Đăng nhập (cột phải, như bố cục cũ): icon trên, tiêu đề, lời giới thiệu ngắn */




/* ---- (2) Chip món đang chọn — cùng kiểu chip topping đã chọn (nền xanh lá nhạt, viền xanh lá, dấu ✓) ---- */
.pos-product-card { position: relative; transition: background-color 0.2s ease, border-color 0.2s ease; }
.shop-pos .pos-product-card.is-configuring {
  border-color: var(--success);
  background: #e7f7ec;
}
.shop-pos .pos-product-card.is-configuring .pos-product-name,
.shop-pos .pos-product-card.is-configuring .pos-product-price { color: var(--success-dark); }
.shop-pos .pos-product-card.is-configuring::after {
  content: '\2713';
  position: absolute;
  top: 9px;
  right: 9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- (3) Tiêu đề danh mục món (nếu có) bớt đậm; chữ danh mục ở cột phải: 800 -> 600 ---- */
.buy-cat-title { font-weight: 600; }
.shop-pos .pos-category-item { font-weight: 600; }


/* ============================================================
   Lần chỉnh 3 — trang index
   (1) Icon máy bay giấy: nút tròn nổi như icon Đăng ký
   (2) Topbar mobile đã đăng nhập: cùng bố cục bản chưa đăng nhập
   (3) Dòng copyright luôn nằm cuối khu vực cuộn (kể cả khi món ít)
   ============================================================ */

/* ---- (1) ---- */





/* ---- (2) Khối xin chào ---- */









/* ---- (3) Khu vực cuộn = [lưới món] + [copyright]; copyright bị đẩy xuống đáy khi món ít ---- */
.shop-pos .shop-pos-scroll {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.shop-pos .shop-pos-scroll > .pos-product-area.shop-pos-grid {
  flex: 0 0 auto;
  overflow: visible;
}
.shop-pos .shop-pos-scroll > .shop-pos-footer {
  grid-column: auto;
  flex: 0 0 auto;
  margin: auto 0 0;
  padding: 14px 0 calc(10px + env(safe-area-inset-bottom, 0px));
}


/* ============================================================
   Lần chỉnh 4 — trang index
   (1) Chữ "Xin chào" (khối chào mobile đã đăng nhập) không in đậm
   (2) Nút "Điểm" mở modal #modal-points-info: cơ chế tích điểm / đổi điểm
   ============================================================ */

/* ---- (1) ---- */


/* ---- (2) Nút Điểm là thẻ <a> (trước là <span>) ---- */
a.shop-icon-btn-points-tile{ -webkit-tap-highlight-color: transparent; }


/* ---- (2) Modal cơ chế điểm ---- */
.points-info-balance {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
}
.points-info-balance-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.18);
}
.points-info-balance-icon svg { width: 20px; height: 20px; }
.points-info-balance-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.points-info-balance-label { font-size: 11.5px; font-weight: 600; opacity: 0.85; }
.points-info-balance-value { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.15; }
.points-info-balance-money {
  flex: 0 0 auto;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.18);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.points-info-section { margin-bottom: 12px; }
.points-info-section-title {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-700);
}
.points-info-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.points-info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
}
.points-info-item + .points-info-item { border-top: 1px solid var(--line); }
.points-info-item strong { font-weight: 700; color: var(--brand-700); }
.points-info-item-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-50);
  color: var(--brand-600);
}
.points-info-item-icon svg { width: 16px; height: 16px; }
.points-info-item-text { flex: 1 1 auto; min-width: 0; }

.points-info-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}
.points-info-note svg { flex: 0 0 auto; width: 16px; height: 16px; }


/* ============================================================
   Lần chỉnh 5 — trang index
   (1) Modal "Điểm": mục Tích điểm / Đổi điểm trượt đóng mở (mặc định đóng)
   (2) Dòng "Giới thiệu bạn bè" to hơn 1 size, icon máy bay luôn sát cuối câu
   (3) Chữ "Xin chào" nhỏ hơn 1 size (icon bàn tay giữ nguyên)
   (4) Nút đăng xuất (khối chào mobile) dùng chung style nút svg tròn
   ============================================================ */

/* ---- (1) ---- */
.points-info-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.points-info-toggle:active { background: var(--brand-50); }
.points-info-section.is-open .points-info-toggle {
  border-color: var(--brand-300);
  background: var(--brand-50);
}
.points-info-toggle-title {
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: var(--brand-700);
}
.points-info-toggle-sum {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.points-info-toggle-chevron {
  flex: 0 0 auto;
  color: var(--brand-600);
  transition: transform 0.25s ease;
}
.points-info-section.is-open .points-info-toggle-chevron { transform: rotate(180deg); }

.points-info-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.points-info-section.is-open .points-info-collapse { grid-template-rows: 1fr; }
.points-info-collapse-inner { min-height: 0; overflow: hidden; }
.points-info-collapse-inner .points-info-list { margin-top: 8px; }

/* ---- (2) ---- */



/* ---- (3) ---- */


/* ---- (4) ---- */




/* ============================================================
   Lần chỉnh 6 — trang index
   (1) Hai khối topbar mobile: đã đăng nhập = chưa đăng nhập về chiều cao
       (chỉnh --mgrid-tile-h nếu muốn cao/thấp hơn, áp cho cả 2 trạng thái)
   (2) Nút đăng xuất: nằm sát tên, có gạch phân tách, tự dịch theo độ dài tên
   (3) Màu icon: đăng xuất = đỏ, ngôi sao = vàng, hộp quà = tím
   ============================================================ */



/* ---- (1) ---- */


/* ---- (2) ---- */





/* ---- (3) ---- */

/* Ngôi sao (nút Điểm) */

.shop-icon-btn-points-tile .shop-icon-btn-box svg { color: #f59e0b; }
/* Hộp quà (nút Quà tặng / Ưu đãi) */

.shop-header-actions a.shop-icon-btn[data-modal-open="my-vouchers"] .shop-icon-btn-box svg { color: #8b5cf6; }


/* ============================================================
   Lần chỉnh 7 — trang index (topbar mobile)
   (1) Chữ Đăng ký / Đăng nhập / Điểm / Quà tặng to hơn 1 size
   (2) Icon của 4 nút trên cách tiêu đề xa hơn một chút cho thoáng
   (3) Nền topbar đậm hơn 1 tone nhẹ (biến --topbar-bg ở :root)
   ============================================================ */




/* ============================================================
   Đăng ký bằng mã xác minh: bước nhập mã
   (trang customer-signup.php + modal đăng ký trên index.php)
   ============================================================ */
.signup-register[hidden],
.signup-verify[hidden],
.signup-verify-status[hidden],
[data-signup-sent-note][hidden] { display: none; }

.signup-verify-note {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 13px;
  line-height: 1.5;
}
.signup-code-input {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.5em;
  padding-left: 0.5em;
}
.signup-verify-status {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: #eafaf0;
  color: #1a9251;
  font-size: 13px;
  line-height: 1.5;
}
.signup-verify-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.signup-verify-actions .btn-secondary {
  flex: 1 1 0;
  text-align: center;
}
.signup-resend-form { margin-top: 12px; }
.signup-resend-form .btn-secondary {
  display: block;
  width: 100%;
  text-align: center;
}
.btn-secondary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

[data-forgot-request][hidden],
[data-forgot-reset][hidden] { display: none; }

/* ============================================================
   Topbar mobile (index) — bản thiết kế v2
   Dải 4 khối trong thẻ bo tròn nổi; dùng chung khách chưa đăng nhập (.mbar--guest)
   và đã đăng nhập (.mbar--member). Wrapper mang thêm class .shop-header-mobile-grid
   để tận dụng quy tắc ẩn/hiện theo breakpoint.
   Kích thước icon GIỮ NGUYÊN bản cũ: vòng tròn 30px (Giới thiệu 28px, đăng xuất 24px),
   svg 15px (đăng xuất 13px, bàn tay 17px, tim 15px).
   ============================================================ */
@media all {
  .shop-header.shop-header--mbar {
    padding: 7px 8px 8px;
    row-gap: 0;
  }

  .shop-header-mobile-grid.mbar {
    display: flex;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    padding: 5px 2px;
    border-radius: 20px;
    background: linear-gradient(180deg, #fff, #f3f8ff);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 16px -6px rgba(43, 90, 180, 0.28), 0 1px 3px rgba(43, 90, 180, 0.12);
  }

  .mbar-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    padding: 5px 4px;
    box-sizing: border-box;
    color: var(--ink);
    text-decoration: none;
    border-radius: 16px;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease;
  }
  /* đường kẻ dọc mờ dần ở 2 đầu */
  .mbar-cell + .mbar-cell::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(43, 125, 255, 0.22) 25%, rgba(43, 125, 255, 0.22) 75%, transparent);
  }
  a.mbar-cell:active { background: rgba(43, 125, 255, 0.10); }

  /* Khối 1: tên + lời chào, rộng nhất, canh trái */
  .mbar-brand {
    flex: 1.25 1 0;
    align-items: flex-start;
    gap: 5px;
    padding-left: 12px;
  }
  .mbar-btn { flex: 1 1 0; padding-left: 2px; padding-right: 2px; }

  .mbar-name {
    max-width: 100%;
    font-family: var(--font-display);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mbar-hi {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    font-size: 12.5px;
    line-height: 1.2;
    color: var(--ink-soft);
    white-space: nowrap;
  }
  /* đã đăng nhập: "Xin chào" + bàn tay, chữ không đậm */
  .mbar--member .mbar-hi {
    font-size: 14.5px;
    font-weight: 400;
    color: var(--ink);
  }
  .mbar-hi-icon { flex: 0 0 auto; color: #f59e0b; }
  .mbar-hi .shop-heart-icon { color: var(--danger); }

  .mbar-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    max-width: 100%;
    min-height: 24px;
  }
  .mbar--member .mbar-name { flex: 0 1 auto; min-width: 0; }
  .mbar-name-divider {
    flex: 0 0 auto;
    width: 1px;
    height: 16px;
    background: rgba(43, 125, 255, 0.25);
  }

  .mbar-ttl {
    max-width: 100%;
    font-family: var(--font-display);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Vòng tròn trắng nổi — y hệt bản cũ (30px) */
  .mbar-circ {
    position: relative;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--brand-600);
    text-decoration: none;
    box-shadow: 3px 3px 6px rgba(163, 177, 198, 0.5), -2px -2px 5px rgba(255, 255, 255, 0.9);
  }
  .mbar-circ svg { display: block; flex: 0 0 auto; }
  .mbar-circ--sm { width: 28px; height: 28px; margin: 1px 0; }  /* Giới thiệu: 28px như bản cũ */
  .mbar-circ--xs { width: 24px; height: 24px; }  /* đăng xuất: 24px như bản cũ */
  a.mbar-circ:active { background: #e6eefc; }

  /* màu icon */
  .mbar-c-share  { color: var(--brand-600); }
  .mbar-c-signup { color: #8b5cf6; }
  .mbar-c-login  { color: #2f9e5c; }
  .mbar-c-star   { color: #f59e0b; }
  .mbar-c-gift   { color: #8b5cf6; }
  .mbar-logout   { color: var(--danger); }

  /* badge (số voucher / số điểm) bám góc vòng tròn — kiểu .shop-icon-badge cũ */
  .mbar-circ .shop-icon-badge {
    top: -4px;
    right: -6px;
  }
  .mbar-circ .shop-icon-badge--points {
    background: #f59e0b;
    top: -10px;
    right: -12px;
    height: 15px;
    min-width: 15px;
    font-size: 9.5px;
  }
}

/* iPhone X trở xuống (≤ 375px): tiêu đề 3-4 nút nhỏ hơn 1 size (13.5 -> 12.5px) */
@media (max-width: 375px) {
  .mbar-ttl { font-size: 12.5px; }
}

/* Màn rất hẹp (≤ 340px): nhường chỗ cho 3 nút, tên quán vẫn cắt "..." */
@media (max-width: 340px) {
  .mbar-brand { flex: 1.3 1 0; padding-left: 8px; }
  .mbar-cell { padding-left: 2px; padding-right: 2px; }
  .mbar-ttl { font-size: 11.5px; }
}


/* ============================================================
   Chip món (index) — từ iPhone Pro Max trở xuống (≤ 440px): 2 món / hàng
   (440px = iPhone 16/17 Pro Max; màn lớn hơn giữ 3 món / hàng như cũ)
   Chỉ áp cho trang index (.shop-pos) — trang pos.php dùng chung .pos-product-area nên KHÔNG đụng tới.
   ============================================================ */
@media (max-width: 440px) {
  .shop-pos .pos-product-area {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Icon tim trong modal (Giới thiệu bạn bè) — cùng icon/màu với tim lời chào ở tên quán */
.modal-heading .shop-heart-icon {
  color: var(--danger);
  vertical-align: -2px;
}

/* Câu "Đã có tài khoản?" cạnh link Đăng nhập ở cuối modal Đăng ký — cùng cỡ với link */
.footer-links-text {
  font-size: 13px;
  color: var(--ink-soft);
}


/* reCAPTCHA trong modal (Đăng ký, Quên mật khẩu): widget rộng cố định 304px nên thu nhỏ
   ở màn hẹp để không tràn khung (khung modal còn ~299px ở 375, ~284px ở 360, ~244px ở 320). */
@media (max-width: 375px) {
  .modal-panel .g-recaptcha {
    transform: scale(0.92);
    transform-origin: 0 0;
    margin-bottom: -6px;
  }
}
@media (max-width: 340px) {
  .modal-panel .g-recaptcha {
    transform: scale(0.8);
    margin-bottom: -16px;
  }
}

.settings-modal-close:active { transform: scale(0.92); }
.settings-modal-close:focus:not(:focus-visible) { outline: none; }


/* ============================================================
   Trang index (pos) — cột chọn size + cột giỏ hàng (gửi đơn)
   Chỉ áp cho body.shop-body--pos (trang index). pos.php dùng body khác nên KHÔNG bị ảnh hưởng.
   (1) Tên món ở đầu cột chọn size cao 60px
   (2) Size / Đường / Đá xếp thành 3 hàng ngang (chip nằm ngang trong từng hàng)
   (3) Chân cột: nửa trái "Gửi đơn" | nửa phải "Thêm", có đường phân tách
   (4) Giỏ hàng (modal gửi đơn) thành cột trượt từ mép phải, cùng kích thước cột chọn size
   ============================================================ */

/* Mặc định mọi cỡ màn: giữ nguyên bố cục cũ của popup (nửa "Gửi đơn" chỉ hiện ở mobile/tablet đứng) */
.pd-footer-actions { display: contents; }
.pd-send-btn,
.pd-footer-divider { display: none; }
.cart-submit-btn { width: 100%; margin-top: 16px; }
.cart-order-error { color: #e14b4b; margin-top: 10px; font-size: 14px; }

@media all {

  /* ---------- (1) Tên món 60px ---------- */
  body.shop-body--pos #modal-product .modal-heading {
    min-height: 60px;
    padding: 8px 10px;
  }
  body.shop-body--pos #modal-product .modal-heading h1 {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
  }

  /* ---------- (2) Size / Đường / Đá: mỗi nhóm 1 hàng ngang ---------- */
  body.shop-body--pos #modal-product .pd-combo-row {
    grid-template-columns: minmax(0, 1fr);
  }
  body.shop-body--pos #modal-product .pd-combo-col {
    padding: 10px 8px 12px;
  }
  body.shop-body--pos #modal-product .pd-combo-col ~ .pd-combo-col {
    border-left: none;
    border-top: 1px solid var(--brand-300);
  }
  /* Gạch ngang phân tách ở CUỐI nhóm Đá (ngăn với ô Lời dặn bên dưới), cùng màu với các gạch giữa Size | Đường | Đá */
  body.shop-body--pos #modal-product .pd-combo-col:nth-of-type(3) {
    border-bottom: 1px solid var(--brand-300);
  }
  body.shop-body--pos #modal-product .pd-combo-col .pd-option-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 4px;
  }
  body.shop-body--pos #modal-product .pd-option-row {
    min-width: 0;
    min-height: 46px;
    padding: 8px 2px;
    border-radius: 10px;
  }
  body.shop-body--pos #modal-product .pd-option-label { font-size: 12px; }
  body.shop-body--pos #modal-product .pd-option-price { font-size: 10.5px; white-space: nowrap; }

  /* ---------- (3) Chân cột: [Gửi đơn | Thêm] ---------- */
  body.shop-body--pos #modal-product .pd-footer-actions {
    display: flex;
    align-items: stretch;
    width: 100%;
  }
  body.shop-body--pos #modal-product .pd-footer .pd-footer-actions .btn-primary {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  body.shop-body--pos #modal-product .pd-footer .pd-send-btn { display: flex; }
  body.shop-body--pos #modal-product .pd-send-label { font-size: 14px; font-weight: 800; }
  body.shop-body--pos #modal-product .pd-footer-divider {
    display: block;
    flex: 0 0 1px;
    width: 1px;
    margin: 8px 0;
    background: rgba(255, 255, 255, 0.38);
  }
  body.shop-body--pos #modal-product .pd-footer-actions [hidden] { display: none !important; }

  /* ---------- (4) Giỏ hàng = cột trượt từ phải, cùng cỡ cột chọn size ---------- */
  body.shop-body--pos #modal-cart.modal-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: flex-end;
    background: rgba(22, 33, 58, 0.40);
  }
  body.shop-body--pos #modal-cart .modal-panel {
    width: max(50vw, 176px);
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: -10px 0 30px rgba(16, 42, 88, 0.16);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.shop-body--pos #modal-cart.modal-overlay:not(.is-open) .modal-panel { transform: translateX(104%); }
  body.shop-body--pos #modal-cart.modal-overlay.is-open .modal-panel {
    transform: translateX(0);
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.3, 1);
  }
  body.shop-body--pos #modal-cart .modal-close { display: none; }

  /* Đầu cột */
  body.shop-body--pos #modal-cart .modal-heading {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0;
    padding: 8px 10px;
    min-height: 60px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-700);
    border-bottom: 1px solid var(--brand-800);
    text-align: center;
  }
  body.shop-body--pos #modal-cart .modal-heading h1 {
    margin: 0;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
  }

  /* Tab Đơn mới / Đơn đã gửi */
  body.shop-body--pos #modal-cart .cart-tabs { margin: 10px 8px 0; }
  body.shop-body--pos #modal-cart .cart-tab-btn {
    padding: 8px 4px;
    font-size: 11.5px;
    line-height: 1.25;
    text-align: center;
    flex-wrap: wrap;
    gap: 3px;
  }
  body.shop-body--pos #modal-cart #cartTabNew { padding: 10px 8px 0; }
  body.shop-body--pos #modal-cart #cartTabSent { padding: 10px 8px 14px; }

  /* Dòng món */
  body.shop-body--pos #modal-cart .cart-line { flex-direction: column; gap: 4px; padding: 10px 0; }
  body.shop-body--pos #modal-cart .cart-line-name { font-size: 12.5px; overflow-wrap: anywhere; }
  body.shop-body--pos #modal-cart .cart-line-meta { font-size: 11.5px; overflow-wrap: anywhere; }
  body.shop-body--pos #modal-cart .cart-line-price { font-size: 13px; }
  body.shop-body--pos #modal-cart .cart-line-qtyrow { margin-top: 8px; gap: 6px; }
  body.shop-body--pos #modal-cart .cart-line-qty-btn { width: 26px; height: 26px; font-size: 16px; }
  body.shop-body--pos #modal-cart .cart-line-qty-input { width: 30px; height: 26px; font-size: 12.5px; }
  body.shop-body--pos #modal-cart .cart-line-actions { margin-top: 0; }
  body.shop-body--pos #modal-cart .cart-empty { padding: 22px 0; font-size: 12.5px; }

  /* Voucher + điểm */
  body.shop-body--pos #modal-cart .cart-voucher-add { padding: 9px 8px; gap: 6px; font-size: 12px; }
  body.shop-body--pos #modal-cart .cart-voucher-add svg { width: 15px; height: 15px; }
  body.shop-body--pos #modal-cart .cart-voucher-applied { padding: 8px; gap: 6px; }
  body.shop-body--pos #modal-cart .cart-voucher-applied-code { font-size: 12px; overflow-wrap: anywhere; }
  body.shop-body--pos #modal-cart .cart-voucher-applied-desc { font-size: 11px; }
  body.shop-body--pos #modal-cart .cart-points-box { padding: 8px; gap: 8px; }
  body.shop-body--pos #modal-cart .cart-points-icon svg { width: 18px; height: 18px; }
  body.shop-body--pos #modal-cart .cart-points-title { font-size: 12px; }
  body.shop-body--pos #modal-cart .cart-points-hint { font-size: 11px; }

  /* Tổng tiền */
  body.shop-body--pos #modal-cart .cart-summary { margin-top: 10px; padding-top: 10px; }
  body.shop-body--pos #modal-cart .cart-summary-row { font-size: 12px; gap: 6px; }
  body.shop-body--pos #modal-cart .cart-summary-row-total { font-size: 14.5px; }

  /* Thông tin nhận hàng, thanh toán, nhận hàng */
  body.shop-body--pos #modal-cart .cart-section-divider { margin-top: 12px; }
  body.shop-body--pos #modal-cart .cart-section-title { font-size: 12.5px; margin: 12px 0 8px; line-height: 1.35; }
  body.shop-body--pos #modal-cart .cart-guest-signup-hint { font-size: 11.5px; }
  body.shop-body--pos #modal-cart .input-group label { font-size: 12px; }
  body.shop-body--pos #modal-cart .input-group .input { padding: 10px; font-size: 14px; }

  body.shop-body--pos #modal-cart .cart-pay-methods,
  body.shop-body--pos #modal-cart .cart-fulfill-toggle { grid-template-columns: minmax(0, 1fr); }
  body.shop-body--pos #modal-cart .cart-pay-divider,
  body.shop-body--pos #modal-cart .cart-fulfill-divider { width: auto; height: 1.5px; align-self: auto; }
  body.shop-body--pos #modal-cart .cart-pay-btn,
  body.shop-body--pos #modal-cart .cart-fulfill-btn {
    padding: 10px 6px;
    font-size: 12.5px;
    line-height: 1.25;
    white-space: normal;
  }

  body.shop-body--pos #modal-cart .cart-pay-panel.is-open { padding: 10px; }
  body.shop-body--pos #modal-cart .cart-qr-box { width: min(100%, 150px); height: auto; aspect-ratio: 1 / 1; }
  body.shop-body--pos #modal-cart .cart-pay-hint { font-size: 11.5px; }
  body.shop-body--pos #modal-cart .cart-pay-transfer-note { font-size: 12px; overflow-wrap: anywhere; }
  body.shop-body--pos #modal-cart .cart-pay-panel .btn-secondary {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
  body.shop-body--pos #modal-cart .cart-fulfill-summary-row { font-size: 12px; overflow-wrap: anywhere; }
  body.shop-body--pos #modal-cart .cart-fulfill-summary-sub,
  body.shop-body--pos #modal-cart .cart-fulfill-summary-link { font-size: 11.5px; }

  /* Đơn đã gửi */
  body.shop-body--pos #modal-cart .sent-order-card { padding: 8px 9px; }
  body.shop-body--pos #modal-cart .sent-order-card-head { flex-wrap: wrap; gap: 4px 6px; font-size: 12.5px; }
  body.shop-body--pos #modal-cart .sent-order-status { margin-left: 0; font-size: 11.5px; white-space: normal; }
  body.shop-body--pos #modal-cart .sent-order-detail-item,
  body.shop-body--pos #modal-cart .sent-order-detail-row { font-size: 12px; }

  /* Chân cột: nút "Gửi đơn hàng" full chiều ngang, dính đáy cột, nền đậm như chân cột chọn size */
  body.shop-body--pos #modal-cart .cart-order-error { margin-top: 8px; font-size: 12px; line-height: 1.35; }
  body.shop-body--pos #modal-cart .cart-submit-btn {
    width: 100%;
    margin: 0;
    min-height: 51px;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    border: none;
    border-radius: 0;
    background: var(--brand-700);
    box-shadow: none;
    font-size: 14px;
    font-weight: 800;
    transition: background-color 0.15s ease;
  }
  body.shop-body--pos #modal-cart .cart-submit-btn:active { background: var(--brand-800); }

  /* Nút "Gửi đơn hàng" luôn ở CUỐI cột: cột là flex dọc, vùng Đơn mới giãn hết chiều cao còn lại,
     khối chứa nút (#cartCheckoutSection) đẩy xuống đáy (margin-top:auto) và dính đáy khi danh sách món dài. */
  body.shop-body--pos #modal-cart .modal-panel { display: flex; flex-direction: column; }
  body.shop-body--pos #modal-cart #cartTabNew:not([hidden]),
  body.shop-body--pos #modal-cart #cartOrderControls:not([hidden]) {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
  }
  body.shop-body--pos #modal-cart #cartCheckoutSection {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: auto -8px 0;
    padding-top: 12px;
    background: #fff;
  }
  body.shop-body--pos #modal-cart #cartCheckoutSection .cart-submit-btn { padding-top: 6px; }
}


/* ============================================================
   Lần chỉnh 3 — trang index (cột chọn món kiểu POS)
   Chỉ áp dụng trong body.shop-body--pos (index.php) -> không ảnh hưởng pos.php.
   (1) Tên món cao 50px
   (2) Đường / Đá: khối trượt đóng/mở, mặc định đóng
   (3) Bỏ khối tăng/giảm số lượng ở chân cột
   (4) Đường phân tách giữa 2 nút cuối (Gửi đơn | Thêm) dày hơn
   ============================================================ */

/* Mặc định (desktop / popup giữa màn hình): nút tiêu đề Đường/Đá trông như tiêu đề thường, luôn hiện nội dung */
.pd-fold-toggle {
  display: block;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: default;
}
.pd-fold-collapse > .pd-fold-inner { min-height: 0; }

@media all {

  /* ---------- (1) Tên món 50px ---------- */
  body.shop-body--pos #modal-product .modal-heading {
    height: 50px;
    min-height: 50px;
    padding: 4px 10px;
    box-sizing: border-box;
    overflow: hidden;
  }
  body.shop-body--pos #modal-product .modal-heading h1 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* ---------- (2) Đường / Đá trượt đóng/mở ---------- */
  body.shop-body--pos #modal-product .pd-fold-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    min-height: 28px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  body.shop-body--pos #modal-product .pd-fold-collapse {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 0.25s ease;
  }
  body.shop-body--pos #modal-product .pd-fold-collapse.is-open { grid-template-rows: 1fr; }
  body.shop-body--pos #modal-product .pd-fold-collapse > .pd-fold-inner {
    min-height: 0;
    overflow: hidden;
  }
  /* Khoảng cách dưới tiêu đề nằm bên trong khối trượt -> khi đóng không để lại khoảng trống */
  body.shop-body--pos #modal-product .pd-fold-inner > .pd-option-list { padding-top: 8px; }

  /* ---------- (3) Bỏ khối tăng/giảm số lượng ---------- */
  body.shop-body--pos #modal-product .pd-qty-stepper { display: none; }

  /* ---------- (4) Đường phân tách giữa [Gửi đơn | Thêm] dày hơn ---------- */
  body.shop-body--pos #modal-product .pd-footer-divider {
    flex: 0 0 3px;
    width: 3px;
    margin: 6px 0;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.6);
  }
}


/* ============================================================
   Lần chỉnh 4 — trang index (giỏ hàng + khuyến mãi)
   Chỉ áp dụng trong body.shop-body--pos (index.php) -> không ảnh hưởng pos.php.
   ============================================================ */

/* Thuộc tính [hidden] bị display:flex của 2 khối này ghi đè -> dòng mã đã áp không biến mất khi xóa mã */
.cart-voucher-add[hidden],
.cart-voucher-applied[hidden] { display: none; }

/* Nút xóa mã: không nháy vuông khi chạm trên Android */
.cart-voucher-remove {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color 0.15s ease;
}
.cart-voucher-remove:focus,
.cart-voucher-remove:focus-visible { outline: none; box-shadow: none; }
.cart-voucher-remove:active { background: rgba(0, 0, 0, 0.06); }

@media all {

  /* Tiêu đề giỏ hàng 30px */
  body.shop-body--pos #modal-cart .modal-heading {
    height: 30px;
    min-height: 30px;
    padding: 0 10px;
    box-sizing: border-box;
    overflow: hidden;
  }
  body.shop-body--pos #modal-cart .modal-heading h1 {
    font-size: 13px;
    line-height: 30px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Tab Đơn mới | Đơn đã gửi: full chiều ngang cột, không bo góc, active giống nút danh mục */
  body.shop-body--pos #modal-cart .cart-tabs {
    margin: 0;
    border: none;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: #fff;
  }
  body.shop-body--pos #modal-cart .cart-tab-divider { width: 1px; background: var(--line); }
  body.shop-body--pos #modal-cart .cart-tab-btn {
    position: relative;
    padding: 8px 4px;
    border-radius: 0;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ink-soft);
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }
  body.shop-body--pos #modal-cart .cart-tab-btn.is-selected {
    background: #e7f7ec;
    color: var(--success-dark);
    box-shadow: inset 0 -3px 0 var(--success);
  }

  /* Ô nhập mã khuyến mãi trong cột Khuyến mãi */
  body.shop-body--pos #modal-voucher .voucher-picker-manual { padding: 10px 8px 12px; }
  body.shop-body--pos #modal-voucher .voucher-picker-manual .input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 11px 12px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: #fbfcff;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--ink);
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
  }
  body.shop-body--pos #modal-voucher .voucher-picker-manual .input::placeholder { color: var(--ink-soft); opacity: 0.8; }
  body.shop-body--pos #modal-voucher .voucher-picker-manual .input:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--brand-50);
    background: #fff;
  }
}


/* ============================================================
   Lần chỉnh 5 — trang index: khối tính toán, nút Gửi đơn hàng (2 dòng), modal Thông tin nhận hàng ở giữa màn hình
   Chỉ áp dụng cho index.php (đều gắn với #modal-cart / #modal-checkout) -> không ảnh hưởng pos.php.
   ============================================================ */

/* [hidden] bị display:flex của dòng tổng kết ghi đè -> dòng chiết khấu không biến mất khi xóa voucher */
.cart-summary-row[hidden] { display: none; }

/* Nút "Gửi đơn hàng" trong giỏ: tiêu đề + số tiền ngay bên dưới */
#modal-cart .cart-submit-open {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
#modal-cart .cart-submit-label { font-size: 14px; font-weight: 800; line-height: 1.2; }
#modal-cart .cart-submit-total { font-size: 12px; font-weight: 700; line-height: 1.2; opacity: 0.92; }

/* Modal Thông tin nhận hàng: popup giữa màn hình */
#modal-checkout .modal-panel-checkout { max-width: 440px; }
#modal-checkout .cart-order-error { margin-top: 12px; }

@media all {
  #modal-checkout.modal-overlay { padding: 14px; }
  #modal-checkout .modal-panel-checkout {
    width: 100%;
    max-width: 420px;
    max-height: calc(100% - 8px);
    padding: 40px 14px 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #modal-checkout .modal-heading { margin-bottom: 8px; }
  #modal-checkout .modal-heading h1 { font-size: 16px; }
  #modal-checkout .cart-section-divider { margin-top: 12px; }
  #modal-checkout .cart-section-title { font-size: 12.5px; margin: 12px 0 8px; line-height: 1.35; }
  #modal-checkout .cart-guest-signup-hint { font-size: 11.5px; }
  #modal-checkout .input-group { margin-bottom: 12px; }
  #modal-checkout .input-group label { font-size: 12px; }
  #modal-checkout .input-group .input { padding: 10px; font-size: 14px; }
  #modal-checkout .cart-pay-btn,
  #modal-checkout .cart-fulfill-btn {
    padding: 10px 6px;
    font-size: 12.5px;
    line-height: 1.25;
    white-space: normal;
  }
  #modal-checkout .cart-pay-panel.is-open { padding: 10px; }
  #modal-checkout .cart-qr-box { width: min(100%, 170px); height: auto; aspect-ratio: 1 / 1; }
  #modal-checkout .cart-pay-hint { font-size: 11.5px; }
  #modal-checkout .cart-pay-transfer-note { font-size: 12px; overflow-wrap: anywhere; }
  #modal-checkout .cart-pay-panel .btn-secondary {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
  #modal-checkout .cart-fulfill-summary-row { font-size: 12px; overflow-wrap: anywhere; }
  #modal-checkout .cart-fulfill-summary-sub,
  #modal-checkout .cart-fulfill-summary-link { font-size: 11.5px; }
  #modal-checkout .cart-order-error { font-size: 12px; line-height: 1.35; }
  #modal-checkout .cart-submit-btn { margin-top: 14px; min-height: 46px; font-size: 14px; font-weight: 800; }
}

/* ============================================================
   index.php — Modal "Mời bạn chọn cách nhận hàng" (#modal-checkout)
   2 nút Đến lấy / Ship tận nơi ở trên cùng (trạng thái active giống chip chọn món .buy-cat-chip.is-active),
   phần còn lại (.cart-fulfill-body) chỉ hiện sau khi chọn; khối thanh toán dùng chung cho cả 2.
   ============================================================ */
.cart-fulfill-opts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
}

.cart-fulfill-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 14px 8px;
  border: 1.5px solid transparent;
  border-radius: 16px;
  background: var(--brand-50);
  color: var(--brand-700);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
}
.cart-fulfill-opt svg { flex: 0 0 auto; }
.cart-fulfill-opt:hover { border-color: var(--brand-100); }
.cart-fulfill-opt:active { background: #dde9ff; transform: scale(0.98); }
/* Đang chọn: giống chip món / nút chọn size đang chọn (nền xanh lá nhạt + viền xanh lá) */
.cart-fulfill-opt.is-active {
  background: #e7f7ec;
  border-color: var(--success);
  color: var(--success-dark);
  box-shadow: none;
}
.cart-fulfill-opt.is-active:active { background: #d6f0de; }

.cart-fulfill-body { margin-top: 16px; }
.cart-fulfill-body[hidden],
.cart-fulfill-panel[hidden] { display: none; }

.cart-fulfill-note {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  text-align: center;
}

/* Khối liên hệ (khách vãng lai): thứ tự 2 ô đổi theo nút chọn — Đến lấy: SĐT trước, Ship: Tên trước */
.cart-contact-fields { display: flex; flex-direction: column; }
.cart-contact-fields .cart-guest-signup-hint { order: 0; }
.cart-contact-fields[data-mode="pickup"] .cart-contact-phone { order: 1; }
.cart-contact-fields[data-mode="pickup"] .cart-contact-name { order: 2; }
.cart-contact-fields[data-mode="delivery"] .cart-contact-name { order: 1; }
.cart-contact-fields[data-mode="delivery"] .cart-contact-phone { order: 2; }

@media all {
  #modal-checkout .cart-fulfill-opt { padding: 12px 6px; font-size: 13px; }
  #modal-checkout .cart-fulfill-body { margin-top: 12px; }
  #modal-checkout .cart-fulfill-note { font-size: 12px; margin-bottom: 10px; }
}

/* Nút "Chỉ đường" (Đến lấy): trượt mở/đóng thông tin cửa hàng, mặc định đóng */
.cart-directions-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--brand-100);
  border-radius: var(--radius-md);
  background: var(--brand-50);
  color: var(--brand-700);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cart-directions-toggle:active { background: #dde9ff; }
.cart-directions-toggle.is-open { background: #fff; border-color: var(--brand-300); }
.cart-directions-chevron { transition: transform 0.25s ease; }
.cart-directions-toggle.is-open .cart-directions-chevron { transform: rotate(180deg); }

.cart-directions-collapse {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.28s ease;
}
.cart-directions-collapse.is-open { grid-template-rows: 1fr; }
.cart-directions-inner { min-height: 0; overflow: hidden; }
.cart-directions-collapse.is-open .cart-directions-inner { padding-top: 14px; }

/* Chuyển khoản trước (Ship tận nơi): chỉ 1 nút, không có nút "Thanh toán khi nhận hàng" */
.cart-pay-methods.cart-pay-methods-single { grid-template-columns: minmax(0, 1fr); }
.cart-pay-block[hidden] { display: none; }

/* Địa chỉ giao hàng dạng chọn (index.php, Ship tận nơi): chọn xã/phường + nhập số nhà, đường */
.delivery-addr-pick .input-group { margin-bottom: 12px; }
.delivery-addr-district {
  margin: -4px 0 12px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-soft);
}

/* settings.php: khoảng cách giữa 2 ô liền nhau (khu vực giao hàng) */
.settings-field-gap { display: block; margin-top: 12px; }

/* Ô chọn xã/phường (select) cùng chiều cao + kiểu với các ô nhập khác, có mũi tên riêng */
.input-group select.input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-height: 48px;
  padding: 13px 42px 13px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-family: var(--font-body);
  line-height: 1.3;
  color: var(--ink);
  background-color: #fbfcff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a99' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  cursor: pointer;
  text-overflow: ellipsis;
}
.input-group select.input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px var(--brand-50);
  background-color: #fff;
}
#modal-checkout .input-group .input { min-height: 46px; box-sizing: border-box; }
@media all {
  #modal-checkout .input-group select.input { min-height: 46px; padding: 11px 38px 11px 14px; font-size: 14px; }
}

/* Báo lỗi số điện thoại ngay dưới ô nhập (modal gửi đơn hàng) */
.input-group .input.is-invalid { border-color: var(--danger); }
.input-group .input.is-invalid:focus { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.12); }
.cart-phone-error { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--danger); }
.cart-phone-error[hidden] { display: none; }

/* Số lượng món ngay trong giỏ hàng: [− ô nhập +] cùng hàng với tiền món (bên dưới nút Sửa / Xóa) */
.cart-line-qtyrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.cart-line-qty { display: inline-flex; align-items: center; gap: 4px; }
.cart-line-qty-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-700);
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, transform 0.12s ease;
}
.cart-line-qty-btn:active { background: #dde9ff; transform: scale(0.94); }
.cart-line-qty-input {
  width: 34px;
  height: 28px;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
}
.cart-line-qty-input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-50); }
.cart-line.is-updating .cart-line-qtyrow { opacity: 0.55; pointer-events: none; }

/* Giá tiền món nằm ở vị trí cũ của 2 nút Sửa/Xóa (dưới ghi chú); hàng dưới: [− số +] bên trái, 2 nút icon bên phải */
.cart-line-info > .cart-line-price { margin-top: 8px; text-align: right; }
.cart-line-qtyrow .cart-line-actions { margin-top: 0; gap: 6px; flex-shrink: 0; }
.cart-line-qtyrow .cart-line-icon-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  justify-content: center;
  gap: 0;
}
.cart-line-qtyrow .cart-line-icon-btn svg { width: 15px; height: 15px; }
.cart-line-qtyrow .cart-line-edit { background: #e7f7ec; color: var(--success-dark); }
.cart-line-qtyrow .cart-line-edit:hover { background: #d6f0de; color: var(--success-dark); border-color: transparent; }
.cart-line-qtyrow .cart-line-remove { background: #fdecec; color: var(--danger); }
.cart-line-qtyrow .cart-line-remove:hover { background: #fad7d7; border-color: transparent; }
.cart-line-qtyrow .cart-line-icon-btn:active { transform: scale(0.94); }


/* ============================================================
   Tắt / mở bán món & topping (is_available) — chỉ khách ở trang index bị chặn chọn
   ============================================================ */
/* Thẻ món trên index: mờ, xám, không bấm được + nhãn "Tạm hết" */
.pos-product-card.is-soldout { cursor: not-allowed; } /* giữ nguyên màu sắc bình thường, chỉ có nhãn "Tạm hết" và không bấm được */
.pos-product-card.is-soldout:active { border-color: var(--line); }
.pos-product-soldout-tag {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  padding: 3px 10px; border-radius: 999px;
  background: var(--danger); color: #fff;
  font-size: 12px; font-weight: 800; line-height: 1.5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
/* Topping trong cột chọn món */
.pd-topping-card.is-soldout { cursor: not-allowed; pointer-events: none; } /* màu bình thường, chỉ báo "Tạm hết" và không chọn được */
.pd-topping-card.is-soldout .buy-product-price { color: var(--danger); font-weight: 800; }
.pd-topping-card.is-soldout .buy-product-add-badge { display: none; }

/* Settings > Quản lý món: chip tạm hết + công tắc Đang bán */
.settings-modal .menu-chip.is-soldout-item { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
.settings-modal .menu-chip.is-soldout-item.is-active { background: var(--danger); border-color: var(--danger); color: #fff; }
.menu-chip-soldout-tag {
  margin-left: 6px; padding: 1px 6px; border-radius: 999px;
  background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 800; line-height: 1.5;
}
.settings-modal .menu-chip.is-soldout-item.is-active .menu-chip-soldout-tag { background: #fff; color: var(--danger); }

.menu-avail-switch {
  display: flex; align-items: center; gap: 12px;
  margin: 10px 0; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--brand-50); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.menu-avail-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.menu-avail-track {
  position: relative; flex: 0 0 auto; width: 44px; height: 26px; border-radius: 999px;
  background: #c9ced6; transition: background-color 0.2s ease;
}
.menu-avail-track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease;
}
.menu-avail-switch input:checked + .menu-avail-track { background: var(--success); }
.menu-avail-switch input:checked + .menu-avail-track::after { transform: translateX(18px); }
.menu-avail-switch input:focus-visible + .menu-avail-track { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.menu-avail-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-avail-text b { font-size: 14px; color: var(--ink); }
.menu-avail-text small { font-size: 12px; line-height: 1.35; color: var(--ink-soft); }


/* ============================================================
   Quản lý menu (settings): cột Nhóm món dạng danh mục như POS (bên trái) + cột chính Món/Topping (bên phải)
   Hai cột nằm cạnh nhau bằng flex (KHÔNG chồng lên nhau) nên cột danh mục không che cột chính.
   ============================================================ */
.settings-modal .menu-split {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.settings-modal .menu-cat-rail {
  order: 2; /* cột Nhóm món nằm bên phải, kế cột chính */
  position: sticky;
  top: 0;
  flex: 0 0 96px;
  width: 96px;
  max-height: calc(92vh - 70px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: #fff;
  scrollbar-width: thin;
}
.settings-modal .menu-cat-rail-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  border-bottom: 1px solid var(--line);
  background: var(--brand-50);
}
.settings-modal .menu-cat-rail-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
}
.settings-modal .menu-cat-list { display: flex; flex-direction: column; }
.settings-modal .menu-cat-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 16px 6px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  background: #fff;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  word-break: break-word;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.settings-modal .menu-cat-item:last-child { border-bottom: 0; }
.settings-modal .menu-cat-item:hover { background: var(--brand-50); }
/* Nhóm đang chọn: nền xanh lá nhạt (cùng kiểu danh mục POS), vạch xanh phía cột chính (bên trái) */
.settings-modal .menu-cat-item.is-active {
  background: #e7f7ec;
  color: var(--success-dark);
  border-left-color: var(--success);
}
.settings-modal .menu-cat-empty { margin: 10px 6px 6px; font-size: 12px; text-align: center; }
.settings-modal .menu-cat-empty-btn { display: block; width: calc(100% - 12px); margin: 0 6px 10px; padding: 9px 4px; font-size: 12px; white-space: normal; }

/* Cột chính chiếm toàn bộ phần còn lại, tự co giãn */
.settings-modal .menu-main { order: 1; flex: 1 1 0; min-width: 0; }
/* Món / topping trong cột chính: dạng danh sách dòng, ngăn cách bằng đường gạch (không còn là nút chip) */
.settings-modal .menu-main .menu-chip-scroll {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  overflow: visible; padding: 0;
  border-top: 1px solid var(--line);
}
.settings-modal .menu-main .menu-chip,
.settings-modal .menu-main .menu-chip.is-hidden-item,
.settings-modal .menu-main .menu-chip.is-soldout-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 13px 4px;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: transparent; color: var(--ink);
  font-size: 14px; font-weight: 600; text-align: left; white-space: normal;
  -webkit-tap-highlight-color: transparent;
}
.settings-modal .menu-main .menu-chip:hover { background: var(--brand-50); }
.settings-modal .menu-main .menu-chip.is-active { background: var(--brand-50); color: var(--brand-700); font-weight: 800; }
.settings-modal .menu-main .menu-chip.is-hidden-item { opacity: 0.55; }
.settings-modal .menu-main .menu-chip.is-soldout-item { color: var(--danger); }
.settings-modal .menu-main .menu-chip.is-soldout-item.is-active { background: var(--danger-bg); color: var(--danger); }
.settings-modal .menu-main .menu-chip-soldout-tag { margin-left: auto; }
.settings-modal .menu-main .menu-chip.is-soldout-item.is-active .menu-chip-soldout-tag { background: var(--danger); color: #fff; }

@media (min-width: 560px) {
  .settings-modal .menu-cat-rail { flex-basis: 140px; width: 140px; }
  .settings-modal .menu-cat-item { font-size: 14px; padding: 18px 10px; }
}

/* ---- Quản lý menu: 2 cột sát nhau, đường phân tách chạy suốt chiều ngang modal (tràn lề, bù padding 22px của .settings-modal) ---- */
.settings-modal .menu-split { gap: 0; margin: 0 -22px; }
.settings-modal .menu-cat-rail {
  border: 0;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
  border-radius: 0;
}
.settings-modal .menu-main .menu-row-header { padding: 0 12px 0 22px; }
.settings-modal .menu-main .menu-chip-empty-hint { padding: 0 12px 0 22px; }
.settings-modal .menu-main .menu-chip,
.settings-modal .menu-main .menu-chip.is-hidden-item,
.settings-modal .menu-main .menu-chip.is-soldout-item { padding: 13px 12px 13px 22px; }

/* ---- Quản lý menu: cột Nhóm món cao suốt chiều dọc modal; món/topping tô nền xen kẽ ---- */
#modalManageMenu .settings-modal {
  height: 92vh;
  height: 92dvh;
  display: flex;
  flex-direction: column;
}
#modalManageMenu .menu-split {
  flex: 1 0 auto;               /* lấp đầy chiều cao modal; nội dung dài hơn thì modal tự cuộn */
  align-items: stretch;
  margin: -28px -22px -32px;    /* tràn sát mép trên/dưới/hai bên modal (bù padding 28px 22px 32px) */
}
#modalManageMenu .menu-cat-rail {
  position: static;
  max-height: none;
  align-self: stretch;
  border-top: 0;
  background: var(--brand-50);
}
#modalManageMenu .menu-cat-item { background: transparent; }
#modalManageMenu .menu-cat-item.is-active { background: #e7f7ec; }
#modalManageMenu .menu-main { padding: 28px 0 32px; }

/* Dòng món / topping: trắng và xanh nhạt xen kẽ (.is-alt do menuZebraRefresh() gắn) */
.settings-modal .menu-main .menu-chip { background: #fff; }
.settings-modal .menu-main .menu-chip.is-alt,
.settings-modal .menu-main .menu-chip.is-alt.is-hidden-item,
.settings-modal .menu-main .menu-chip.is-alt.is-soldout-item { background: #eaf1fd; }
.settings-modal .menu-main .menu-chip:hover,
.settings-modal .menu-main .menu-chip.is-alt:hover { background: var(--brand-100); }
.settings-modal .menu-main .menu-chip.is-active,
.settings-modal .menu-main .menu-chip.is-alt.is-active {
  background: var(--brand-100);
  color: var(--brand-700);
  box-shadow: inset 3px 0 0 var(--brand-600);
}
.settings-modal .menu-main .menu-chip.is-soldout-item.is-active,
.settings-modal .menu-main .menu-chip.is-alt.is-soldout-item.is-active {
  background: var(--danger-bg);
  color: var(--danger);
  box-shadow: inset 3px 0 0 var(--danger);
}

/* ---- Quản lý menu: modal chiếm trọn chiều dọc màn hình, cột Nhóm món cao suốt từ trên xuống dưới, không nền ---- */
#modalManageMenu.settings-modal-overlay--center { padding: 0; }
#modalManageMenu .settings-modal {
  height: 100vh;
  height: 100dvh;
  max-height: none;
  padding: 0;                    /* mép modal = mép 2 cột; khoảng đệm do .menu-main tự giữ */
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
#modalManageMenu .menu-split {
  flex: 1 0 auto;
  align-items: stretch;
  margin: 0;
}
#modalManageMenu .menu-main { padding: 28px 0 32px; }
#modalManageMenu .menu-cat-rail {
  align-self: stretch;
  border-top: 0;
  background: transparent;       /* không tô nền cột nhóm món */
}
#modalManageMenu .menu-cat-rail-head { background: transparent; }
#modalManageMenu .menu-cat-item { background: transparent; }
#modalManageMenu .menu-cat-item:hover { background: transparent; }
#modalManageMenu .menu-cat-item.is-active { background: #e7f7ec; } /* chỉ nhóm đang chọn có nền, để biết đang ở nhóm nào */


/* ============================================================
   settings.php — Quản lý Menu: panel trượt đóng/mở (thay cho modal giữa màn hình)
   Dùng cho: sửa món, sửa topping, thêm món, thêm topping. Mặc định đóng.
   Trượt bằng grid-template-rows (0fr -> 1fr), không cần biết trước chiều cao nội dung.
   ============================================================ */
.settings-modal .menu-slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 0fr;
  background: var(--brand-50);
  transition: grid-template-rows 0.28s ease;
}
.settings-modal .menu-slide[hidden] { display: none; }
.settings-modal .menu-slide.is-open {
  grid-template-rows: 1fr;
  border-bottom: 1px solid var(--line);
}
.settings-modal .menu-slide-inner { min-height: 0; min-width: 0; overflow: hidden; }
.settings-modal .menu-slide:not(.is-open) .menu-slide-inner { visibility: hidden; transition: visibility 0s linear 0.28s; }
.settings-modal .menu-slide-body { min-width: 0; padding: 14px 12px 16px 22px; }
.settings-modal .menu-slide-body .menu-inline-form:last-child { margin-bottom: 0; }
.settings-modal .menu-slide-body .error-box { margin-top: 0; }

/* Nút + (thêm món / thêm topping) xoay thành dấu x khi panel đang mở */
.settings-modal .menu-row-add-btn svg { transition: transform 0.25s ease; }
.settings-modal .menu-row-add-btn.is-open svg { transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
  .settings-modal .menu-slide,
  .settings-modal .menu-row-add-btn svg { transition: none; }
}


/* ============================================================
   settings.php — Quản lý Menu: mỗi chip món/topping có mũi tên chỉ hướng trượt
   + công tắc Đang bán / Tạm hết nằm ngay trên chip (ngoài panel trượt)
   ============================================================ */
.settings-modal .menu-item-row { position: relative; }
.settings-modal .menu-main .menu-chip--slide { padding-right: 88px; }
.settings-modal .menu-chip-chevron {
  position: absolute; right: 12px; top: 50%; margin-top: -8px;
  color: var(--ink-soft); pointer-events: none;
  transition: transform 0.28s ease, color 0.2s ease;
}
.settings-modal .menu-chip--slide[aria-expanded="true"] .menu-chip-chevron { transform: rotate(180deg); color: var(--brand-600); }

.settings-modal .menu-avail-switch--chip {
  position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
  margin: 0; padding: 0; gap: 0; border: 0; background: transparent;
}
.settings-modal .menu-avail-switch--chip .menu-avail-track { width: 36px; height: 22px; }
.settings-modal .menu-avail-switch--chip .menu-avail-track::after { top: 3px; left: 3px; width: 16px; height: 16px; }
.settings-modal .menu-avail-switch--chip input:checked + .menu-avail-track::after { transform: translateX(14px); }
.settings-modal .menu-avail-switch--chip input:disabled + .menu-avail-track { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) {
  .settings-modal .menu-chip-chevron { transition: none; }
}


/* ============================================================
   settings.php — Quản lý Menu đợt 3
   - Chip topping: tên ┄┄┄ giá (đường nét đứt ở giữa)
   - Panel sửa topping: ô giá ngắn, nút Lưu/Xóa cùng hàng với ô giá
   - Panel sửa món: danh sách size/giá luôn hiện (trước đây chỉ hiện khi nằm trong .menu-product-block.is-open)
   ============================================================ */

.settings-modal .menu-slide .menu-size-list { display: block; margin-top: 4px; }

/* ============================================================
   settings.php — Quản lý Menu đợt 4 (khối hiển thị chip món / topping)
   Cột nội dung trên mobile chỉ còn ~170px nên các hàng giữ 1 dòng, ô nhập co giãn (min-width: 0)
   ============================================================ */
.settings-modal .menu-slide-body { padding: 12px 10px 14px 14px; }

/* Chip topping: dòng 1 = tên, đường nét đứt, dòng 2 = giá */
.settings-modal .menu-chip-text {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  flex: 1 1 auto; min-width: 0;
}
.settings-modal .menu-chip-name { min-width: 0; overflow-wrap: anywhere; }
.settings-modal .menu-chip-sep {
  display: block; height: 0; border-top: 1.5px dashed var(--ink-soft); opacity: 0.45;
}
.settings-modal .menu-chip-price { font-size: 13px; font-weight: 800; }

/* Panel sửa topping: tên, rồi 1 hàng gồm ô giá (nhỏ) + nút Lưu + nút Xóa (icon) ngay bên cạnh */
.settings-modal .menu-topping-form .input[name="topping_name"] { flex: 1 1 100%; }
.settings-modal .menu-topping-priceline {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 100%; min-width: 0;
}
.settings-modal .menu-topping-priceline .menu-size-price-wrap { flex: 0 0 84px; width: 84px; min-width: 0; }
/* Ô nhập phải tự co theo khung 84px: .menu-inline-form .input đang đặt width:auto (rộng theo mặc định của trình duyệt) nên trước đây ô giá tràn ra ngoài khung, đè lên 2 nút */
.settings-modal .menu-topping-priceline .menu-size-price-wrap .input {
  width: 100%; min-width: 0; box-sizing: border-box; flex: none; padding: 9px 26px 9px 10px;
}
.settings-modal .menu-topping-priceline .price-unit-badge { right: 9px; font-size: 12px; }
.settings-modal .menu-topping-priceline .menu-detail-actions {
  flex: 0 0 auto; margin: 0; gap: 8px; justify-content: flex-start;
}

/* Panel sửa món: mỗi size 1 hàng [size] [giá] [lưu] [xóa] (nút icon), không còn chọn Hiện/Ẩn */
.settings-modal .menu-size-row--icons {
  flex-wrap: nowrap; align-items: center; gap: 6px; padding: 4px 0;
}
.settings-modal .menu-size-row--icons .menu-size-name-input { flex: 1 1 0; min-width: 0; padding: 9px 8px; }
.settings-modal .menu-size-row--icons .menu-size-price-wrap { flex: 0 0 68px; width: 68px; }
.settings-modal .menu-size-row--icons .menu-size-price-wrap .input { width: 100%; min-width: 0; box-sizing: border-box; padding: 9px 24px 9px 8px; }
.settings-modal .menu-size-row--icons .price-unit-badge { right: 8px; font-size: 12px; }
.settings-modal .menu-size-row--icons .cat-icon-btn { width: 32px; height: 32px; }
.settings-modal .menu-size-row-add.menu-size-row--icons { padding-top: 12px; }

/* Dòng cuối của panel sửa món: nút Lưu + Xóa món */
.settings-modal .menu-detail-actions--final {
  margin-top: 8px; padding-top: 12px;
  border-top: 1.5px dashed var(--brand-300);
}

/* ---------- Voucher: 2 dạng (dùng chung / riêng) + gửi hàng loạt cho khách ---------- */
.voucher-scope-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.voucher-scope-title:first-child { margin-top: 6px; }
.voucher-scope-count {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: 11.5px;
  text-align: center;
}
.voucher-scope-empty { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-soft); }
.voucher-scope-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
.voucher-scope-chip--public { background: var(--brand-50); color: var(--brand-700); }
.voucher-scope-chip--private { background: var(--brand-600); color: #fff; }

.user-mgmt-bulk {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 6px;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--brand-50);
}
.user-mgmt-bulk-all {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
.user-mgmt-bulk-count {
  margin-left: auto;
  min-width: 22px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand-600);
  color: #fff;
  font-size: 12px;
  text-align: center;
}
.user-mgmt-bulk .btn-primary { width: 100%; }
.user-mgmt-bulk .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.user-mgmt-pick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  cursor: pointer;
}
.user-mgmt-pick input,
.user-mgmt-bulk-all input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand-600);
  cursor: pointer;
}

/* Topping "Tạm hết": chữ cảnh báo màu đỏ.
   Đặt độ ưu tiên cao hơn rule giá topping của #modal-product (màu xanh thương hiệu) để không bị đè. */
.pd-topping-card.is-soldout .buy-product-price,
body.shop-body--pos #modal-product .pd-topping-card.is-soldout .buy-product-price,
body.shop-body--pos #modal-product .pd-topping-card.is-soldout.is-selected .buy-product-price {
  color: var(--danger);
  font-weight: 800;
}

/* ---- Quản lý menu: nút Ẩn / Hiện (con mắt) gọn, nằm cạnh công tắc Đang bán ---- */
.settings-modal .menu-vis-btn {
  position: absolute; right: 82px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; margin: 0; padding: 0;
  border: 1px solid var(--brand-300, var(--line)); border-radius: 8px; background: var(--brand-50);
  color: var(--brand-600); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.settings-modal .menu-vis-btn:hover { background: var(--brand-100); border-color: var(--brand-400); }
.settings-modal .menu-vis-btn:disabled { opacity: 0.5; }
.settings-modal .menu-vis-btn .menu-vis-eye-off { display: none; }
.settings-modal .menu-vis-btn.is-off { color: var(--ink-soft); background: #f1f3f6; border-color: var(--line); }
.settings-modal .menu-vis-btn.is-off .menu-vis-eye { display: none; }
.settings-modal .menu-vis-btn.is-off .menu-vis-eye-off { display: block; }
/* Chừa chỗ bên phải dòng cho: con mắt + công tắc + mũi tên (đè cả các trạng thái hết hàng / ẩn) */
.settings-modal .menu-main .menu-chip.menu-chip--slide,
.settings-modal .menu-main .menu-chip.menu-chip--slide.is-hidden-item,
.settings-modal .menu-main .menu-chip.menu-chip--slide.is-soldout-item { padding-right: 118px; }

/* ---- Trang mở ca / đóng ca: nút phụ dạng liên kết (Đăng nhập ngoài ca, Quay lại POS) ---- */
.shift-alt-link {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin-top: 12px;
  padding: 12px 20px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-pill);
  background: #fff;
  color: var(--brand-700);
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.shift-alt-link:hover { border-color: var(--brand-400); background: var(--brand-50); }
.shift-alt-link svg { vertical-align: -4px; margin-right: 6px; }

/* POS: topping "Tạm hết" ở cột chọn nhanh (mobile) — chữ đỏ, không bấm được */
.pos-topping-card.is-soldout { cursor: not-allowed; pointer-events: none; }
.pos-topping-card.is-soldout .pos-product-price { color: var(--danger); font-weight: 800; }

/* ---- Trang khách (index): món / topping "Tạm hết" vẫn bấm được nhưng chỉ đổi tông đỏ (không có dấu ✓), không có tác dụng ----
   Dùng class .is-soldout-soft (chỉ index.php gắn) nên trang POS vẫn giữ kiểu không bấm được. */
.pos-product-card.is-soldout.is-soldout-soft { cursor: pointer; }
.pos-product-card.is-soldout.is-soldout-soft:active { border-color: var(--danger); }
.pos-product-card.is-soldout-picked,
.shop-pos .pos-product-card.is-soldout-picked {
  border-color: var(--danger);
  background: var(--danger-bg);
  animation: soldoutShake 0.35s ease;
}
.pos-product-card.is-soldout-picked .pos-product-name,
.pos-product-card.is-soldout-picked .pos-product-price { color: var(--danger); }

.pd-topping-card.is-soldout.is-soldout-soft { cursor: pointer; pointer-events: auto; }
.pd-topping-card.is-soldout-picked,
body.shop-body--pos #modal-product .pd-topping-card.is-soldout-picked {
  border-color: var(--danger);
  background: var(--danger-bg);
}
.pd-topping-card.is-soldout-picked .buy-product-name,
body.shop-body--pos #modal-product .pd-topping-card.is-soldout-picked .buy-product-name { color: var(--danger); }
@keyframes soldoutShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .pos-product-card.is-soldout-picked { animation: none; }
}

/* ---------- Nút "Mở camera" (scan-shop-qr.php) — cùng kiểu khung "Tải ảnh lên" ---------- */
.qr-camera-start {
  width: 100%;
  font-family: inherit;
}
.qr-camera-frame {
  display: none; /* chỉ hiện khi bật camera (JS đặt display) */
}

/* ---------- Chấm công (modal Chấm công trong settings.php) ---------- */
.att-empty { margin: 8px 0; color: var(--ink-soft); font-size: 14px; text-align: center; }
.att-muted { color: var(--ink-soft); font-size: 12.5px; }
.att-hint  { margin: 10px 0 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.5; }
.att-hint code { background: var(--brand-50); padding: 1px 6px; border-radius: 6px; font-size: 12px; }

.att-live { display: flex; flex-direction: column; gap: 8px; }
.att-live-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
}
.att-live-info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 140px; min-width: 0; }
.att-live-time { font-weight: 700; color: var(--success-dark); font-size: 14px; white-space: nowrap; }

.att-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.att-filter .input { flex: 1 1 140px; width: auto; min-width: 0; }

.att-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 9px 16px; border: 1px solid var(--brand-500); border-radius: var(--radius-pill);
  background: var(--brand-500); color: #fff; font: inherit; font-size: 13.5px; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.att-btn:hover { background: var(--brand-600); }
.att-btn--ghost { background: #fff; color: var(--brand-600); }
.att-btn--ghost:hover { background: var(--brand-50); }
.att-btn--danger { background: var(--danger); border-color: var(--danger); }
.att-btn--danger:hover { background: #c93450; }

.att-inline-form { display: inline; margin: 0; }
.att-actions { display: flex; gap: 10px; align-items: center; margin-top: 14px; }
.att-actions .btn-primary { width: auto; }

.att-table-wrap { overflow-x: auto; margin: 6px 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.att-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.att-table th, .att-table td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.att-table th { background: var(--brand-50); color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.att-table tbody tr:last-child td { border-bottom: 0; }
.att-table tfoot td { background: var(--brand-20); border-top: 1px solid var(--line); }
.att-table td.att-empty { white-space: normal; }

.att-tag { display: inline-block; padding: 2px 9px; border-radius: var(--radius-pill); background: #f1f3f8; color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.att-tag--live { background: #eafaf0; color: #1a9251; }
.att-tag--warn { background: var(--warning-bg); color: var(--warning); }

.att-row-actions { display: flex; gap: 10px; align-items: center; }
.att-row-actions a { color: var(--brand-600); font-weight: 600; text-decoration: none; }
.att-link-danger { background: none; border: 0; padding: 0; color: var(--danger); font: inherit; font-weight: 600; cursor: pointer; }

.att-edit { margin: 14px 0; padding: 14px; border: 1px solid var(--brand-100); border-radius: var(--radius-md); background: var(--brand-20); }
.att-edit h3 { margin: 0 0 8px; font-size: 15px; color: var(--ink); }

/* ---------- Lương (modal Lương trong settings.php) — dùng chung các lớp att-* ---------- */
.att-table th.pay-num,
.att-table td.pay-num { text-align: right; }
.pay-total { font-weight: 700; color: var(--ink); }
.pay-neg { color: var(--danger); }
.att-edit h3 + .att-table-wrap,
.att-edit h3 + .att-live-row { margin-top: 6px; }
.st-acc-body h3 { margin: 16px 0 8px; font-size: 14px; color: var(--ink); }
.st-acc-body h3:first-child { margin-top: 0; }

/* ---------- Modal Nhân viên: thanh tab Nhân viên / Chấm công / Lương ---------- */
.settings-modal--wide { max-width: 820px; }
.staff-tabs {
  display: flex; gap: 6px; margin: 4px 0 16px; padding: 4px;
  background: var(--brand-50); border-radius: var(--radius-pill);
}
.staff-tab {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 10px; border: 0; border-radius: var(--radius-pill); background: transparent;
  color: var(--ink-soft); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.staff-tab.is-active { background: #fff; color: var(--brand-600); box-shadow: var(--shadow-card); }
.staff-tab-badge {
  min-width: 18px; padding: 0 6px; border-radius: var(--radius-pill);
  background: #1a9251; color: #fff; font-size: 11.5px; font-weight: 700; line-height: 18px; text-align: center;
}
.staff-tab-badge[hidden] { display: none; }
.staff-tab-panel { display: none; }
.staff-tab-panel.is-active { display: block; }

/* ============================================================
   Trang index — màn hình lớn dùng ĐÚNG bố cục mobile
   - Topbar: 4 khối .mbar (tên quán | Giới thiệu | Đăng ký/Điểm | Đăng nhập/Quà tặng) thay cho header desktop
   - Khu chọn món: cột danh mục 88px bên phải (nút giỏ hàng ở chân cột), chip món nhỏ gọn như mobile
   - Các panel (chọn size/đường/đá, giỏ hàng, nhận hàng, khuyến mãi) đã áp dụng cho mọi kích thước ở các khối @media all phía trên
   Mọi rule gắn với body.shop-body--pos / .shop-pos nên KHÔNG ảnh hưởng pos.php, settings.php.
   ============================================================ */

/* ---- Topbar (từ 641px trở lên; ≤640px đã có sẵn bản mobile) ---- */
@media (min-width: 641px) {
  body.shop-body--pos .shop-header.shop-header--mbar {
    background: var(--topbar-bg);
    border-bottom: none;
    flex-wrap: wrap;
  }
  body.shop-body--pos .shop-header--mbar .shop-header-left,
  body.shop-body--pos .shop-header--mbar .shop-header-actions,
  body.shop-body--pos .shop-header--mbar .shop-header-points-bar,
  body.shop-body--pos .shop-header--mbar .shop-header-signup-hint-mobile,
  body.shop-body--pos .shop-header--mbar .shop-header-signup-hint-desktop {
    display: none !important;
  }
  /* Khối 4 nút topbar: tối đa 800px, canh giữa trên màn hình lớn */
  body.shop-body--pos .shop-header--mbar .shop-header-mobile-grid.mbar {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---- Khu chọn món + cột danh mục (từ 901px trở lên; ≤900px đã có sẵn bản mobile) ---- */
@media (min-width: 901px) {
  /* Lưới chip món (màn lớn): chip to hơn bản mobile, tự chia cột theo bề rộng khối chip (≤ 800px) */
  .shop-pos .pos-product-area {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
    padding: 14px 14px 18px;
  }
  .shop-pos .pos-product-card {
    padding: 10px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .shop-pos .pos-product-thumb { margin-bottom: 8px; }
  .shop-pos .pos-product-name { font-size: 16px; font-weight: 800; line-height: 19px; margin-bottom: 4px; }
  .shop-pos .pos-product-price { font-size: 14px; }

  /* Cột danh mục: hẹp 88px, nút giãn dọc, mũi tên chọn bên trái, viền active ở đáy */
  .shop-pos .pos-category-rail { width: auto; flex: 0 0 auto; min-width: 0; } /* bề rộng do grid .shop-pos quyết định (xem khối cuối file) */
  .shop-pos .pos-category-item {
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--cat-row-h);
    margin: 0;
    padding: 0 5px 0 16px;
    overflow: hidden;
    font-size: 15.5px;
    line-height: 1.25;
    text-align: center;
    border: 0; /* các đường kẻ do nền của cột danh mục vẽ (xem khối cuối file) */
  }
  .shop-pos .pos-category-item.is-active {
    background: #e7f7ec;
    box-shadow: inset 0 -3px 0 var(--success);
  }
  .shop-pos .pos-category-item.is-active::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-left: 2px solid var(--success);
    border-bottom: 2px solid var(--success);
    transform: translateY(-50%) rotate(45deg);
  }
}

/* ============================================================
   Trang index (màn hình lớn, từ 901px) — topbar và khu chọn món thẳng hàng
   - --shop-col-w: bề rộng CHUNG của khối 4 nút topbar và khối chip món (tối đa 800px, canh giữa)
   - Phần còn lại hai bên chia đều: [banner dọc] | [khối chip món] | [cột danh mục]
   - Cột danh mục: 1 cột khi mỗi bên < 176px; từ 1152px trở lên thành 2 cột sát nhau
   Dưới 901px không hiện banner, giữ nguyên bố cục mobile.
   ============================================================ */
.shop-pos-banner { display: none; }

@media (min-width: 901px) {
  body.shop-body--pos {
    --shop-side-min: 88px;  /* bề rộng tối thiểu mỗi bên (1 cột danh mục) */
    --shop-col-w: min(800px, calc(100vw - 2 * var(--shop-side-min)));
  }

  /* Khối 4 nút topbar dùng đúng bề rộng chung */
  body.shop-body--pos .shop-header--mbar .shop-header-mobile-grid.mbar {
    width: var(--shop-col-w);
    max-width: 800px;
  }

  /* Khu chọn món: 3 ô = banner | chip món | cột danh mục (hai bên bằng nhau) */
  .shop-pos {
    --cat-row-h: 68px;  /* chiều cao mỗi ô danh mục (cố định để đường kẻ nền khớp từng hàng) */
    --pos-rail-w: calc((100% - var(--shop-col-w)) / 2); /* nút giỏ hàng rộng bằng cột danh mục */
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--shop-col-w) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .shop-pos .shop-pos-banner {
    display: block;
    min-width: 0;
    background: transparent; /* tạm thời không màu, sau này thay bằng banner dọc */
  }

  /* Đường kẻ ngang phân tách từng hàng, kẻ suốt chiều cao cột danh mục kể cả chỗ chưa có danh mục */
  .shop-pos .pos-category-rail {
    background-image: linear-gradient(to bottom, transparent calc(var(--cat-row-h) - 1px), var(--line) calc(var(--cat-row-h) - 1px));
    background-size: 100% var(--cat-row-h);
    background-attachment: local; /* đường kẻ cuộn cùng danh sách */
  }
}

@media (min-width: 1152px) {
  body.shop-body--pos { --shop-side-min: 176px; } /* mỗi bên đủ chỗ cho 2 cột danh mục */

  .shop-pos .pos-category-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: var(--cat-row-h);
    align-content: start;
    /* thêm đường kẻ dọc giữa 2 cột (suốt chiều cao) chồng lên đường kẻ ngang */
    background-image:
      linear-gradient(to bottom, transparent calc(var(--cat-row-h) - 1px), var(--line) calc(var(--cat-row-h) - 1px)),
      linear-gradient(to right, transparent calc(50% - 1px), var(--line) calc(50% - 1px), var(--line) 50%, transparent 50%);
    background-size: 100% var(--cat-row-h), 100% 100%;
    background-repeat: repeat-y, no-repeat;
  }
}

/* ============================================================
   Trang index — iPad dọc (màn hình rộng 641–1151px và đang đặt dọc): cột danh mục to hơn
   Rộng 88px -> 132px, chữ 15.5px -> 18px, ô cao hơn, mũi tên chọn to hơn.
   (A) 641–900px: bố cục mobile (iPad mini 768, Air 820, Pro 11" 834)
   (B) 901–1151px: bố cục màn lớn 3 ô (iPad Pro 12.9" dọc 1024) — tăng bề rộng tối thiểu mỗi bên
   ============================================================ */
@media (min-width: 641px) and (max-width: 900px) and (orientation: portrait) {
  .shop-pos { --pos-rail-w: 132px; } /* rộng cột danh mục + nút giỏ hàng */
  .shop-pos .pos-category-item {
    padding: 30px 6px 30px 22px; /* chừa bên trái cho mũi tên active */
    font-size: 18px;
    line-height: 1.25;
  }
}

@media (min-width: 901px) and (max-width: 1151px) and (orientation: portrait) {
  body.shop-body--pos { --shop-side-min: 132px; } /* mỗi bên tối thiểu 132px => cột danh mục 132px (khối chip & topbar co lại tương ứng) */
  .shop-pos { --cat-row-h: 84px; }
  .shop-pos .pos-category-item {
    padding: 0 6px 0 22px;
    font-size: 18px;
  }
}

@media (min-width: 641px) and (max-width: 1151px) and (orientation: portrait) {
  .shop-pos .pos-category-item.is-active::before {
    left: 9px;
    width: 10px;
    height: 10px;
  }
}

/* ============================================================
   Topbar trang index — tiêu đề dài: mọi màn hình lớn (từ 901px, cả ngang lẫn dọc) và iPad đặt dọc 744–900px (mini 744/768, Air 820, Pro 11" 834)
   Giới thiệu -> Giới thiệu bạn bè | Đăng ký -> Đăng ký tài khoản | Đăng nhập -> Đăng nhập tích điểm
   Mặc định hiện bản ngắn; index.php có sẵn cả 2 bản trong .mbar-ttl-short / .mbar-ttl-long
   ============================================================ */
.mbar-ttl-long { display: none; }

@media (min-width: 901px), (min-width: 744px) and (max-width: 900px) and (orientation: portrait) {
  .mbar-ttl-short { display: none; }
  .mbar-ttl-long { display: inline; }
  .mbar-ttl-sub { font-weight: 400; } /* 2 chữ cuối của tiêu đề dài (bạn bè / tài khoản / tích điểm) không in đậm */
}

/* ============================================================
   Trang index — iPad lớn đặt dọc (901–1151px, ví dụ iPad Pro 12.9" dọc): chip món nhỏ hơn bản màn hình lớn
   (khối chip ~760px => khoảng 5 cột)
   ============================================================ */
@media (min-width: 901px) and (max-width: 1151px) and (orientation: portrait) {
  .shop-pos .pos-product-area {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    padding: 10px 10px 14px;
  }
  .shop-pos .pos-product-card { padding: 7px; }
  .shop-pos .pos-product-thumb { margin-bottom: 6px; }
  .shop-pos .pos-product-name { font-size: 13.5px; line-height: 16px; margin-bottom: 3px; }
  .shop-pos .pos-product-price { font-size: 12px; }
}

/* ============================================================
   Trang index (màn hình lớn, từ 901px) — panel chọn món #modal-product
   - Size | Đường | Đá: 3 cột dọc sát nhau (mỗi cột các lựa chọn xếp dọc), có đường kẻ dọc phân tách
   - Đường / Đá luôn mở sẵn (không trượt đóng/mở như bản mobile)
   - Topping: mỗi hàng 3 chip
   Dưới 901px giữ nguyên bản mobile (mỗi nhóm một hàng ngang, topping 2 chip/hàng).
   ============================================================ */
@media (min-width: 901px) {
  body.shop-body--pos #modal-product .pd-combo-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  /* Gọn gàng: 3 cột cùng một nền, khoảng cách nhỏ, đường kẻ dọc mảnh */
  body.shop-body--pos #modal-product .pd-combo-col:nth-of-type(n) { background: var(--brand-50); }
  body.shop-body--pos #modal-product .pd-combo-col {
    padding: 10px 10px 12px;
    border-bottom: 1px solid var(--brand-300);
  }
  body.shop-body--pos #modal-product .pd-combo-col ~ .pd-combo-col {
    border-top: none;
    border-left: 1px solid var(--brand-300);
  }
  body.shop-body--pos #modal-product .pd-combo-col .pd-option-list {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 8px;
  }
  /* Mọi nút Size / Đường / Đá cao bằng nhau (44px) -> các hàng của 3 cột thẳng hàng với nhau */
  body.shop-body--pos #modal-product .pd-option-row {
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    padding: 4px 6px;
    border-radius: 10px;
  }
  body.shop-body--pos #modal-product .pd-option-label { font-size: 13.5px; line-height: 1.2; }
  body.shop-body--pos #modal-product .pd-option-price { font-size: 12px; line-height: 1.2; }

  /* Đường / Đá luôn hiện nội dung */
  body.shop-body--pos #modal-product .pd-fold-collapse { grid-template-rows: 1fr; }
  body.shop-body--pos #modal-product .pd-fold-toggle { cursor: default; pointer-events: none; }
  /* Tiêu đề 3 cột (Chọn size / Đường / Đá) và khoảng cách tới danh sách lựa chọn đều nhau để các nút thẳng hàng */
  body.shop-body--pos #modal-product .pd-combo-col > .pd-section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    margin: 0;
  }
  body.shop-body--pos #modal-product .pd-combo-col > .pd-option-list,
  body.shop-body--pos #modal-product .pd-fold-inner > .pd-option-list { padding-top: 6px; }

  /* Topping: 3 chip mỗi hàng */
  body.shop-body--pos #modal-product .pd-topping-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  /* Ảnh topping dẹt hơn (4:3) để chip không quá cao khi chỉ có 3 chip/hàng */
  body.shop-body--pos #modal-product .pd-topping-card .buy-product-thumb { aspect-ratio: 4 / 3; }
}



/* ============================================================
   Trang index (màn hình lớn, từ 901px) — panel chọn món #modal-product
   Chia khối Size / Đường / Đá thành 4 cột: Size | Đường | Đá | Lời dặn.
   Cột 4 (#pdNoteSlot) chỉ có trong modal của index.php; JS chuyển khối "Lời dặn" vào đây.
   Dưới 901px: cột này ẩn, giữ nguyên bản mobile. Không đụng tới pos.php / settings.php.
   ============================================================ */
#modal-product .pd-combo-col--note { display: none; }

@media (min-width: 901px) {
  body.shop-body--pos #modal-product .pd-combo-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  body.shop-body--pos #modal-product .pd-combo-col--note {
    display: flex;
    flex-direction: column;
  }
  body.shop-body--pos #modal-product .pd-note-block {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  /* Tiêu đề cột 4 cao bằng tiêu đề 3 cột kia để ô nhập thẳng hàng với các nút bên cạnh */
  body.shop-body--pos #modal-product .pd-combo-col--note .pd-section-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    margin: 0;
  }
  /* Ô nhập giãn đầy chiều cao còn lại của cột, thẳng hàng với đáy các cột bên cạnh */
  body.shop-body--pos #modal-product .pd-combo-col--note .pd-note-input {
    flex: 1;
    min-height: 96px;
    margin-top: 6px;
    resize: none;
  }
}


/* ============================================================
   Trang index (màn hình lớn, từ 901px) — chỉnh khối Size | Đường | Đá | Lời dặn + tiêu đề Topping
   - Khối 4 cột sát mép panel (không padding ngoài); đường kẻ phân tách giữa tiêu đề và khối nút chọn
   - Tiêu đề topping đổi thành "THÊM TOPPING" (mobile giữ "Topping")
   ============================================================ */
#modal-product .pd-tt-full { display: none; }
@media (min-width: 901px) {
  body.shop-body--pos #modal-product .pd-tt-short { display: none; }
  body.shop-body--pos #modal-product .pd-tt-full { display: inline; text-transform: uppercase; }

  /* Khối 4 cột sát mép panel (không padding/margin ở khối bao ngoài); các cột vẫn giữ padding 2 bên */
  body.shop-body--pos #modal-product .pd-section:has(.pd-combo-row) { padding: 0; margin: 0; }
  body.shop-body--pos #modal-product .pd-combo-row { padding: 0; margin: 0; }
  body.shop-body--pos #modal-product .pd-combo-row .pd-combo-col { padding: 10px 10px 12px; }
  body.shop-body--pos #modal-product .pd-combo-row .pd-combo-col > .pd-section-title,
  body.shop-body--pos #modal-product .pd-combo-col--note .pd-section-title {
    min-height: 30px;
    border-bottom: 1px dashed var(--brand-300);
  }
  /* Tiêu đề Đường / Đá là nút nằm trong cột -> cùng đường kẻ */
  body.shop-body--pos #modal-product .pd-combo-row .pd-combo-col > .pd-fold-toggle { width: 100%; }
  body.shop-body--pos #modal-product .pd-combo-col > .pd-option-list,
  body.shop-body--pos #modal-product .pd-fold-inner > .pd-option-list { padding-top: 8px; }
  body.shop-body--pos #modal-product .pd-combo-col--note .pd-note-input { margin-top: 8px; }

  /* Đường / Đá: dạng trượt đóng/mở như mobile, mặc định ĐÓNG (JS data-pd-fold có sẵn; Size và Lời dặn luôn mở) */
  body.shop-body--pos #modal-product .pd-fold-collapse { grid-template-rows: 0fr; }
  body.shop-body--pos #modal-product .pd-fold-toggle { cursor: pointer; pointer-events: auto; }
  body.shop-body--pos #modal-product .pd-fold-toggle > span::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 0 3px 8px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
    vertical-align: middle;
  }
  body.shop-body--pos #modal-product .pd-fold-toggle.is-open > span::after { transform: rotate(-135deg); margin-bottom: -2px; }
}


/* ============================================================
   Trang index (màn hình lớn, từ 901px) — Topping: 4 chip mỗi hàng, tiêu đề cách chip thoáng hơn
   Chỉ áp cho #modal-product của index.php; dưới 901px giữ nguyên (2 chip/hàng).
   ============================================================ */
@media (min-width: 901px) {
  body.shop-body--pos #modal-product .pd-topping-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }
  body.shop-body--pos #modal-product .pd-topping-toggle,
  body.shop-body--pos #modal-product .pd-topping-toggle.pd-section-title {
    margin-bottom: 16px;
  }
  body.shop-body--pos #modal-product #pdToppingSection { padding: 0 12px 16px; }
  body.shop-body--pos #modal-product #pdToppingSection .pd-topping-toggle {
    width: calc(100% + 24px);
    margin-left: -12px;
    margin-right: -12px;
  }
}


/* ---- Topping "Tạm hết" (index): hiệu ứng chạm y hệt chip món "Tạm hết" — viền + nền đỏ, tên/giá đỏ, rung nhẹ rồi tự trả về (mọi kích thước màn hình) ---- */
.pd-topping-card.is-soldout.is-soldout-soft:active { border-color: var(--danger); }
.pd-topping-card.is-soldout-picked,
body.shop-body--pos #modal-product .pd-topping-card.is-soldout-picked {
  animation: soldoutShake 0.35s ease;
}
.pd-topping-card.is-soldout-picked .buy-product-price,
body.shop-body--pos #modal-product .pd-topping-card.is-soldout-picked .buy-product-price { color: var(--danger); }
@media (prefers-reduced-motion: reduce) {
  .pd-topping-card.is-soldout-picked { animation: none; }
}


/* ============================================================
   pos.php (màn hình lớn, ≥901px) — bỏ nút user ở cột danh mục (mọi nút đã nằm trên topbar),
   tên user trên topbar canh phải (sát cụm nút icon); nút icon Báo cáo / Cài đặt (OWNER) thêm vào topbar.
   Mobile (<901px) giữ nguyên: topbar ẩn, menu user vẫn dùng như cũ.
   ============================================================ */
@media (min-width: 901px) {
  body.pos-body-tag .pos-user-item,
  body.pos-body-tag .pos-user-flyout-wrap { display: none !important; }

  /* Tên user canh PHẢI: avatar + tên nằm sát cụm nút icon bên phải, cả cụm dồn về mép phải topbar */
  body.pos-body-tag .pos-shell .pos-topbar { justify-content: flex-end !important; gap: 14px !important; }
  body.pos-body-tag .pos-shell .pos-topbar-user {
    flex: 0 1 auto !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    text-align: right !important;
  }
  body.pos-body-tag .pos-shell .pos-topbar-actions { margin-left: 0 !important; }

  /* Nút icon dạng liên kết (Báo cáo / Cài đặt) trên topbar */
  body.pos-body-tag .pos-topbar-actions a.pos-pill-round { text-decoration: none; }
  body.pos-body-tag .pos-topbar-actions a.pos-pill-round:hover { background: var(--brand-50); color: var(--brand-700); }
}

/* [pos.php desktop topbar v3 — nếu thấy dòng này trong base.css trên server nghĩa là đã tải bản mới] */

/* ============================================================
   pos.php (màn hình lớn, ≥901px) — topbar giữ nguyên kích thước, chỉ giãn cách rộng hơn, mỗi nút một màu nền nhạt riêng;
   chip món to hơn. Tất cả gắn body.pos-body-tag + @media ≥901px nên KHÔNG ảnh hưởng mobile
   và các trang khác (index, settings...). Chip topping/cột chọn món không đổi.
   ============================================================ */
@media (min-width: 901px) {
  /* ---- Topbar: giữ nguyên kích thước cũ của topbar và các nút; chỉ giãn khoảng cách ---- */
  body.pos-body-tag .pos-shell .pos-topbar { gap: 22px !important; }
  body.pos-body-tag .pos-shell .pos-topbar-actions { gap: 14px !important; }
  body.pos-body-tag .pos-topbar-actions .pos-pill-round { transition: filter 0.15s ease, transform 0.15s ease; }
  body.pos-body-tag .pos-topbar-actions .pos-pill-round:hover { filter: brightness(0.95); transform: translateY(-1px); }

  /* ---- Màu nền nhạt riêng cho từng nút ---- */
  body.pos-body-tag .pos-topbar-actions .pos-pill-static        { background: #e6f0ff; color: #1d4ed8; } /* thời gian ca: xanh dương */
  body.pos-body-tag .pos-topbar-actions #posHeldBtn             { background: #fff3d6; color: #b45309; } /* đơn giữ: vàng */
  body.pos-body-tag .pos-topbar-actions #posWebBtn              { background: #e1f6e8; color: #15803d; } /* đơn web: xanh lá */
  body.pos-body-tag .pos-topbar-actions .pos-history-topbtn     { background: #ede7ff; color: #6d28d9; } /* lịch sử: tím */
  body.pos-body-tag .pos-topbar-actions .pos-topbtn-report      { background: #dff4f7; color: #0e7490; } /* báo cáo: xanh ngọc */
  body.pos-body-tag .pos-topbar-actions .pos-topbtn-settings    { background: #eceff4; color: #475569; } /* cài đặt: xám xanh */
  body.pos-body-tag .pos-topbar-actions .pos-topbtn-report:hover   { background: #dff4f7; color: #0e7490; }
  body.pos-body-tag .pos-topbar-actions .pos-topbtn-settings:hover { background: #eceff4; color: #475569; }

  /* ---- Chip món to hơn (chỉ lưới món chính) ---- */
  body.pos-body-tag .pos-product-area { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 16px; padding: 18px; }
  body.pos-body-tag .pos-product-area .pos-product-card { padding: 12px; }
  body.pos-body-tag .pos-product-area .pos-product-thumb { margin-bottom: 9px; }
  body.pos-body-tag .pos-product-area .pos-product-name { font-size: 14.5px; line-height: 18px; margin-bottom: 4px; }
  body.pos-body-tag .pos-product-area .pos-product-price { font-size: 13.5px; }
}

/* ============================================================
   pos.php (màn hình lớn, ≥901px) — (1) topping 3 chip/hàng; (2) nút Thanh toán + Thêm ở chân cột chọn món cao hơn;
   (3) 3 nút Tại bàn / Mang đi / Giao hàng ở cột giỏ hàng thành dạng nút viên thuốc nằm ngang như hàng nút trên topbar nhưng cao hơn.
   Gắn body.pos-body-tag + @media ≥901px: không ảnh hưởng mobile, index.php, settings.php...
   ============================================================ */
@media (min-width: 901px) {
  /* (1) Topping: mỗi hàng 3 chip */
  body.pos-body-tag .pos-topping-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

  /* (2) Khối nút ở chân cột chọn món: cao thêm một chút (51px -> 60px) */
  body.pos-body-tag .pos-option-foot .pos-add-btn,
  body.pos-body-tag .pos-option-foot .pos-opt-pay-btn { min-height: 60px; }

  /* (3) Hình thức bán: 3 nút nằm ngang, bo tròn dạng viên thuốc, cao 44px (topbar: 32–40px) */
  body.pos-body-tag .pos-service-tabs { gap: 10px; margin-bottom: 8px; }
  body.pos-body-tag .pos-service-tabs .pos-service-tab {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: row;
    gap: 7px;
    aspect-ratio: auto;
    height: 44px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 13px;
    white-space: nowrap;
  }
  body.pos-body-tag .pos-service-tabs .pos-service-tab .pos-tab-icon { width: 18px; height: 18px; }
}

/* ============================================================
   pos.php (màn hình lớn, ≥901px) — nút chọn số bàn: giãn khoảng cách + nền xanh nhạt.
   Nút đang chọn (.is-selected) giữ nguyên như cũ. Chỉ áp dụng trang pos.php, màn hình lớn.
   ============================================================ */
@media (min-width: 901px) {
  body.pos-body-tag .pos-table-grid {
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 10px;
    padding: 2px;                 /* chừa chỗ để viền nút ngoài cùng không bị cắt khi cuộn */
    max-height: 148px;            /* ~3 hàng với khoảng cách mới; nhiều bàn hơn thì cuộn */
  }
  body.pos-body-tag .pos-table-btn:not(.is-selected) {
    background: #eaf1ff;
    border-color: #d3e0fa;
    color: var(--brand-700);
  }
  body.pos-body-tag .pos-table-btn:not(.is-selected):hover { background: #dde9ff; }
}

/* ============================================================
   pos.php (màn hình lớn, ≥901px) — nút xóa nhanh (×) của món trong giỏ hàng to hơn (22px -> 32px, dấu × 12px -> 16px).
   Chỉ áp dụng trang pos.php, màn hình lớn; mobile và các trang khác không đổi.
   ============================================================ */
@media (min-width: 901px) {
  body.pos-body-tag .pos-order-item-delete { width: 32px; height: 32px; }
  body.pos-body-tag .pos-order-item-delete svg { width: 16px; height: 16px; }
}

/* ============================================================
   settings.php > Nhân viên > Chấm công (includes/settings/staff-attendance.php)
   Ô "Giờ vào" / "Giờ ra" là <input type="datetime-local" class="input"> nằm trực tiếp trong form (.att-edit và form Thêm phiên công).
   Ô ngày-giờ trên mobile (iOS Safari, Chrome Android) có chiều rộng nội tại lớn nên bị đẩy ra khỏi khung chứa;
   ép về đúng bề ngang khung, cùng cách xử lý với .date-input ở trên.
   ============================================================ */
.settings-modal input.input[type="datetime-local"],
.settings-modal input.input[type="date"],
.settings-modal input.input[type="time"],
.settings-modal input.input[type="month"] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 46px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}
.settings-modal input.input[type="datetime-local"]::-webkit-date-and-time-value,
.settings-modal input.input[type="date"]::-webkit-date-and-time-value,
.settings-modal input.input[type="time"]::-webkit-date-and-time-value,
.settings-modal input.input[type="month"]::-webkit-date-and-time-value { text-align: left; min-width: 0; }
.settings-modal input.input[type="datetime-local"]::-webkit-datetime-edit,
.settings-modal input.input[type="date"]::-webkit-datetime-edit,
.settings-modal input.input[type="time"]::-webkit-datetime-edit,
.settings-modal input.input[type="month"]::-webkit-datetime-edit { padding: 0; }

/* Khung form sửa phiên công: cho phép co lại theo cột modal hẹp */
.att-edit { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* Hàng lọc tháng / nhân viên: ô tháng vẫn co giãn theo flex thay vì 100% */
.settings-modal .att-filter input.input[type="month"] { width: auto; flex: 1 1 140px; }

/* ---------- Công & lương ngay trong danh sách nhân viên (settings.php > Nhân viên > Danh sách) ---------- */
.staff-pay-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 4px; padding: 10px 12px;
  border: 1px solid var(--brand-100); border-radius: var(--radius-sm);
  background: var(--brand-20); font-size: 13.5px; color: var(--ink-soft);
}
.staff-pay-summary b { font-size: 16px; font-weight: 800; color: var(--ink); }

.staff-pay {
  margin: 10px 0 6px; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--brand-20); line-height: 1.35;
}
.staff-pay-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px; }
.staff-pay-title { margin-right: auto; font-size: 13.5px; font-weight: 700; color: var(--ink); }

.staff-pay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.staff-pay-item {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff;
}
.staff-pay-item small { font-size: 11.5px; color: var(--ink-soft); }
.staff-pay-item b { font-size: 14px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.staff-pay-item b.pay-neg { color: var(--danger); }
.staff-pay-item--total { grid-column: 1 / -1; background: #eafaf0; border-color: #bfe9cf; }
.staff-pay-item--total small { color: var(--success-dark); font-weight: 600; }
.staff-pay-item--total b { font-size: 18px; font-weight: 800; color: var(--success-dark); }
.staff-pay-item--total b.pay-neg { color: var(--danger); }

.staff-pay-note { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.staff-pay-note b { color: var(--ink); font-weight: 700; }
.staff-pay-note--warn { color: var(--warning); }

.staff-pay-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); }

@media (min-width: 520px) {
  .staff-pay-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ---------- Chức danh nhân viên (Thu ngân / Phục vụ / Bếp - Bar) ---------- */
.staff-title-badge {
  display: inline-block; margin-right: 6px; padding: 2px 10px; vertical-align: middle;
  border-radius: var(--radius-pill); background: #f1f3f8; color: var(--ink-soft);
  font-size: 11.5px; font-weight: 700; line-height: 1.5;
}
.staff-title--cashier     { background: var(--brand-50);    color: var(--brand-600); }
.staff-title--waiter      { background: #eafaf0;            color: #1a9251; }
.staff-title--bar_kitchen { background: var(--warning-bg);  color: var(--warning); }
.staff-title--none        { background: var(--danger-bg);   color: var(--danger); }

/* Nhãn chức danh nằm trong bảng chấm công / lương, dòng "Đang làm việc", tiêu đề chi tiết */
.att-table .staff-title-badge,
.att-live-info .staff-title-badge,
.att-edit h3 .staff-title-badge { margin: 0 0 0 6px; font-size: 11px; }


/* ---------- Phân quyền theo chức danh: ẩn nút trong pos.php (chặn thật ở api/pos/*.php) ---------- */
body.pos-no-checkout #posPayBtn,
body.pos-no-checkout #posOptPayBtn { display: none !important; }

body.pos-no-sell #posHoldBtn,
body.pos-no-sell #pdAddToCart { display: none !important; }

/* Đơn giữ ẩn khi không bán và cũng không thanh toán (thu ngân thuần vẫn cần để nhận đơn phục vụ gửi) */
body.pos-no-held #posHeldBtn,
body.pos-no-held .pos-cart-tab[data-view="held"] { display: none !important; }

body.pos-no-history .js-history-open { display: none !important; }

body.pos-no-web #posWebBtn,
body.pos-no-web #posWebAlert,
body.pos-no-web #posShipPickBtn,
body.pos-no-web .pos-cart-tab[data-view="web"] { display: none !important; }

body.pos-no-web-update .pos-web-actions { display: none !important; }
body.pos-no-web-cancel [data-web-act="cancel"] { display: none !important; }

.pos-shell .pos-perm-note {
  flex: 0 0 auto; padding: 8px 14px; text-align: center;
  background: var(--warning-bg); color: var(--warning); font-size: 13px; font-weight: 600; line-height: 1.4;
}

/* Bảng phân quyền trong Cài đặt > Nhân viên */
.staff-perm-table th.staff-perm-cell,
.staff-perm-table td.staff-perm-cell { text-align: center; white-space: nowrap; }
.staff-perm-table input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand-600); cursor: pointer; }

/* Đơn phục vụ gửi thu ngân (danh sách "Đơn giữ") */
.pos-held-tag {
  display: inline-block; margin-left: 8px; padding: 1px 8px; vertical-align: middle;
  border-radius: 999px; background: var(--brand-50); color: var(--brand-600);
  font-size: 11px; font-weight: 700; line-height: 1.5;
}
.pos-held-tag.is-mine { background: var(--warning-bg); color: var(--warning); }

/* Trang mở ca: nút quay lại (icon) ở góc trên trái khung */
.recovery-shell .shift-back-btn {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink-soft);
  text-decoration: none; transition: border-color .15s, color .15s, background .15s;
}
.recovery-shell .shift-back-btn:hover,
.recovery-shell .shift-back-btn:focus-visible { border-color: var(--brand-400); color: var(--brand-600); background: var(--brand-50); }

/* reCAPTCHA (304px) trong khung trang đăng nhập / đăng ký / quên mật khẩu riêng: thu nhỏ khi màn hẹp để không tràn khung */
@media (max-width: 400px) {
  .recovery-shell .g-recaptcha { transform: scale(0.88); transform-origin: 0 0; margin-bottom: -8px; }
}
@media (max-width: 340px) {
  .recovery-shell .g-recaptcha { transform: scale(0.76); margin-bottom: -18px; }
}

/* Cài đặt > QR Shop: nút "Tạo mã mới" */
.settings-modal .shop-qr-renew-wrap { margin-top: 12px; text-align: center; }
.settings-modal .shop-qr-renew-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--brand-400); background: #fff; color: var(--brand-600);
  font-size: 14px; font-weight: 700; cursor: pointer;
  transition: background .15s, border-color .15s, opacity .15s;
}
.settings-modal .shop-qr-renew-btn:hover { background: var(--brand-50); }
.settings-modal .shop-qr-renew-btn:disabled { opacity: .55; cursor: wait; }

/* ---------- Nút bật / tắt MỞ BÁN trên thanh đầu trang Cài đặt ---------- */
.pos-icon-form { display: contents; }
.pos-icon-btn.pos-icon-shop { border: 0; cursor: pointer; padding: 0; }
.pos-icon-btn.pos-icon-shop.is-on  { background: #e7f7ec; color: var(--success-dark); }
.pos-icon-btn.pos-icon-shop.is-off { background: var(--danger-bg, #fdecef); color: var(--danger); }

/* ---------- Trang chủ khách khi TẠM NGƯNG BÁN (index.php, body.shop-closed) ---------- */
.shop-closed-screen,
.shop-closed-note { display: none; }

body.shop-closed:not(.shop-closed--browse) .shop-closed-screen {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px 20px 40px; text-align: center; background: #fff;
}
body.shop-closed:not(.shop-closed--browse) .shop-pos { display: none !important; }

body.shop-closed.shop-closed--browse .shop-closed-note {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 14px; background: var(--warning-bg); color: var(--warning);
  font-size: 13px; font-weight: 600; line-height: 1.4; text-align: center;
}
.shop-closed-note-btn {
  padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--warning); background: #fff; color: var(--warning);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}

/* Chế độ chỉ xem: ẩn mọi lối vào giỏ hàng */
body.shop-closed .js-open-cart,
body.shop-closed .pos-cart-mini { display: none !important; }

.shop-closed-teapot { width: min(220px, 56vw); height: auto; overflow: visible; }
.shop-closed-teapot .tp-stove { fill: #c9d3e6; }
.shop-closed-teapot .tp-body  { fill: var(--brand-400, #6f9aec); stroke: var(--brand-600, #2765d6); stroke-width: 4; stroke-linejoin: round; }
.shop-closed-teapot .tp-spout { fill: var(--brand-400, #6f9aec); stroke: var(--brand-600, #2765d6); stroke-width: 4; stroke-linejoin: round; }
.shop-closed-teapot .tp-handle { fill: none; stroke: var(--brand-600, #2765d6); stroke-width: 8; stroke-linecap: round; }
.shop-closed-teapot .tp-shine { fill: #fff; opacity: .35; }
.shop-closed-teapot .tp-lid-top { fill: var(--brand-600, #2765d6); }
.shop-closed-teapot .tp-knob { fill: var(--brand-600, #2765d6); }
.shop-closed-teapot .tp-steam { fill: none; stroke: #b9c6e0; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 46; stroke-dashoffset: 46; opacity: 0; animation: tpSteam 2.6s ease-in-out infinite; }
.shop-closed-teapot .tp-steam-2 { animation-delay: .8s; }
.shop-closed-teapot .tp-steam-3 { animation-delay: 1.5s; }
.shop-closed-teapot .tp-flame { fill: #ff9f1c; transform-box: fill-box; transform-origin: 50% 100%; animation: tpFlame .55s ease-in-out infinite alternate; }
.shop-closed-teapot .tp-flame-2 { fill: #ff6b35; animation-duration: .45s; animation-delay: .1s; }
.shop-closed-teapot .tp-flame-3 { animation-delay: .2s; }
.shop-closed-teapot .tp-lid { transform-box: fill-box; transform-origin: 50% 100%; animation: tpLid 1.2s ease-in-out infinite; }

@keyframes tpSteam {
  0%   { opacity: 0;  stroke-dashoffset: 46;  transform: translateY(8px); }
  35%  { opacity: .9; }
  100% { opacity: 0;  stroke-dashoffset: -46; transform: translateY(-10px); }
}
@keyframes tpFlame {
  from { transform: scaleY(.8) scaleX(.94); opacity: .85; }
  to   { transform: scaleY(1.18) scaleX(1.04); opacity: 1; }
}
@keyframes tpLid {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-2px) rotate(-1.6deg); }
  75%      { transform: translateY(-1px) rotate(1.6deg); }
}

.shop-closed-text { max-width: 440px; margin: 0; font-size: 17px; font-weight: 600; line-height: 1.7; color: var(--ink); }
.shop-closed-flower { width: 26px; height: 26px; margin-left: 4px; vertical-align: -6px; overflow: visible; }
.shop-closed-flower .fl-petals { fill: #ff8fb1; fill-opacity: .9; transform-box: fill-box; transform-origin: center; animation: flSpin 14s linear infinite; }
.shop-closed-flower .fl-center { fill: #ffd54f; transform-box: fill-box; transform-origin: center; animation: flPulse 1.8s ease-in-out infinite; }
@keyframes flSpin  { to { transform: rotate(360deg); } }
@keyframes flPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }

.shop-closed-btn {
  margin-top: 6px; padding: 12px 30px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--brand-600); color: #fff; font-size: 15px; font-weight: 700;
  box-shadow: 0 6px 16px rgba(39, 101, 214, .28); transition: transform .12s ease, box-shadow .12s ease;
}
.shop-closed-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(39, 101, 214, .34); }

.shop-closed-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 16px); z-index: 2147483000;
  max-width: 88vw; padding: 10px 16px; border-radius: 999px; background: rgba(22, 33, 58, .94); color: #fff;
  font-size: 13px; font-weight: 600; line-height: 1.35; text-align: center; opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.shop-closed-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .shop-closed-teapot *, .shop-closed-flower * { animation: none !important; }
  .shop-closed-teapot .tp-steam { opacity: .6; stroke-dashoffset: 0; }
}

/* Menu người dùng trượt (mobile, Cài đặt): hàng bật / tắt mở bán */
.st-flyout-form { display: contents; }
.st-flyout-btn.st-flyout-shop.is-on  { color: var(--success-dark); }
.st-flyout-btn.st-flyout-shop.is-off { color: var(--danger); }

/* ---------- Off đêm (19h-6h): màn hình trăng khuyết đang ngủ (index.php, body.shop-closed--night) ---------- */

.shop-closed-moon { width: min(220px, 56vw); height: auto; overflow: visible; }
.shop-closed-moon .mn-body { fill: #ffe08a; stroke: #f2b84b; stroke-width: 4; stroke-linejoin: round; }
.shop-closed-moon .mn-face { fill: none; stroke: #8a6a2e; stroke-width: 4; stroke-linecap: round; }
.shop-closed-moon .mn-blush { fill: #ffb3c1; opacity: .8; }
.shop-closed-moon .mn-float { transform-box: fill-box; transform-origin: 50% 50%; animation: mnFloat 4.4s ease-in-out infinite; }
.shop-closed-moon .mn-z { fill: #5b7bd5; font-family: var(--font-display, inherit); font-weight: 800; opacity: 0; animation: mnZ 3.2s ease-in-out infinite; }
.shop-closed-moon .mn-z-2 { animation-delay: 1s; }
.shop-closed-moon .mn-z-3 { animation-delay: 2s; }
.shop-closed-moon .mn-star { fill: #ffd54f; transform-box: fill-box; transform-origin: center; animation: mnTwinkle 2.4s ease-in-out infinite; }
.shop-closed-moon .mn-star-2 { animation-delay: .8s; }
.shop-closed-moon .mn-star-3 { animation-delay: 1.6s; }
.shop-closed-text--night { color: #3b4690; }

@keyframes mnFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-8px) rotate(2deg); }
}
@keyframes mnZ {
  0%   { opacity: 0; transform: translate(0, 10px) scale(.7); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(14px, -26px) scale(1.15); }
}
@keyframes mnTwinkle {
  0%, 100% { opacity: .25; transform: scale(.7); }
  50%      { opacity: 1;   transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .shop-closed-moon * { animation: none !important; }
  .shop-closed-moon .mn-z { opacity: .7; }
}

/* ---------- Loa báo tiền (assets/js/loa-bao-tien.js, ô "Loa báo tiền" ở Cài đặt, nút loa trên thanh POS) ---------- */
.pos-speaker-btn.is-on  { color: var(--success-dark); }
.pos-speaker-btn.is-off { color: var(--danger); opacity: .85; }
.pos-speaker-btn.is-locked { color: var(--warning); animation: pnPulse 1.6s ease-in-out infinite; }
@keyframes pnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .45); }
  50%      { box-shadow: 0 0 0 7px rgba(245, 158, 11, 0); }
}

/* Nút nổi dự phòng khi trang không có nút loa riêng */
.loa-bao-tien-fab {
  position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 2147482000;
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border: 0; border-radius: 50%; background: #fff; color: var(--success-dark); cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .22);
}
.loa-bao-tien-fab.is-off { color: var(--danger); }
.loa-bao-tien-fab.is-locked { color: var(--warning); animation: pnPulse 1.6s ease-in-out infinite; }

.settings-modal .pn-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; font-weight: 600; cursor: pointer; }
.settings-modal .pn-check input { width: 20px; height: 20px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--brand-600); }
.settings-modal .pn-token-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 8px; }
.settings-modal .pn-token-row .input { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.settings-modal .pn-token-row .att-btn { flex: 0 0 auto; white-space: nowrap; }
.settings-modal .pn-regen-form { margin: 2px 0 14px; text-align: right; }
.settings-modal .pn-steps { margin: 6px 0 18px; padding-left: 20px; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.settings-modal .pn-steps li { margin-bottom: 4px; }
.settings-modal .pn-steps b { color: var(--ink); }
.settings-modal .pn-raw { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); }