/* Hallmark · genre: modern-minimal · macrostructure: Workbench (app shell) · design-system: design.md · designed-as-app
 * theme: Cobalt (Be Vietnam Pro only — no mono) · nav: side rail ≥60rem (4 job groups) + bottom tab bar & sheet <60rem · footer: none (app)
 * panes: pane-head → scope → blocks → log (design.md § Pane anatomy) · contrast: pass (40–41)
 * audience: studio owners + staff · use: check revenue, issue codes, sync booths · tone: utilitarian, calm
 * Hallmark · pre-emit critique: P5 H5 E4 S4 R5 V4
 * ==========================================================================
   Photobooth — Portal quản trị
   --------------------------------------------------------------------------
   Viết mobile-first: kiểu gốc là điện thoại (thanh tab dưới + ngăn "Thêm"),
   từ 60rem trở lên mới có sidebar cố định. Mọi màu/font lấy từ tokens.css.

   Màu riêng của studio KHÔNG được dùng ở đây, trừ khung xem trước trong
   mục Thương hiệu (--preview-paper) — portal luôn giữ hệ màu chuẩn.
   ========================================================================== */

.portal {
  --side-w:   16.5rem;
  --topbar-h: 3.5rem;
  --tabbar-h: 3.75rem;

  font-size: var(--text-ui);
  line-height: 1.5;
}

/* Nút trong portal co theo nội dung và gọn hơn bản dùng cho gallery.
   Hai luật cùng độ đặc hiệu (0,2,0) để --wide thắng nhờ đứng sau. */
.portal .lm-btn {
  width: auto;
  min-height: var(--control-h);
  padding: 0 var(--space-md);
  font-size: var(--text-sm);
}
.portal .lm-btn--wide { width: 100%; }
.portal .lm-btn svg {
  flex: none;
  width: 1.125rem; height: 1.125rem;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (pointer: coarse) {
  .portal .lm-btn { min-height: var(--tap); }
}

/* ══ 1. Ô nhập ═══════════════════════════════════════════════════════════ */
.field {
  display: block;
  min-height: var(--control-h);
  padding: 0 var(--space-sm);
  border: var(--rule-w) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-ui);
  line-height: 1.3;
  transition: border-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) {
  .field:hover { border-color: var(--color-rule-3); }
}
.field:focus,
.field:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -1px;
  border-color: var(--color-focus);
}
.field::placeholder { color: var(--color-faint); }
.field:disabled { background: var(--color-paper-2); color: var(--color-faint); cursor: not-allowed; }
.field[aria-invalid="true"] { border-color: var(--color-danger); }

select.field {
  padding-right: var(--space-xl);
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    right 1.05rem center,
    right 0.75rem center;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
}
input.field[type="file"] {
  padding: var(--space-2xs) var(--space-2xs);
  min-height: var(--control-h);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
input.field[type="file"]::file-selector-button {
  margin-right: var(--space-sm);
  min-height: calc(var(--control-h) - 0.625rem);
  padding: 0 var(--space-sm);
  border: var(--rule-w) solid var(--color-rule-2);
  border-radius: var(--radius-xs);
  background: var(--color-paper-2);
  color: var(--color-ink);
  font: 500 var(--text-xs) / 1 var(--font-body);
  cursor: pointer;
}
input.field[type="date"],
input.field[type="datetime-local"] { font-variant-numeric: tabular-nums; }

.field--mini {
  width: 7rem;
  min-height: var(--control-h-sm);
  margin-top: var(--space-2xs);
  padding: 0 var(--space-xs);
  font-size: var(--text-sm);
  text-align: right;
}
td:not(.num) > .field--mini { text-align: left; width: auto; max-width: 14rem; }
.field--block { width: 100%; }
.field--num { font-variant-numeric: tabular-nums; }
.field--code,
.field--pin { font-variant-numeric: tabular-nums slashed-zero; letter-spacing: 0.06em; }
.field--req.is-empty { border-color: var(--color-danger); }

/* iOS phóng to trang khi ô nhập < 16px — giữ 16px trên màn cảm ứng. */
@media (pointer: coarse) {
  .field { min-height: var(--tap); font-size: var(--text-base); }
  .field--mini { min-height: var(--control-h); font-size: var(--text-base); }
}

.field-label {
  display: block;
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-ink-2);
}
.field-label--req span { color: var(--color-danger); }

/* ══ 2. Đăng nhập ═════════════════════════════════════════════════════════ */
.login {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--color-paper);
}
.login-main {
  display: flex;
  align-items: center;
  padding:
    max(var(--space-xl), env(safe-area-inset-top))
    max(var(--space-md), env(safe-area-inset-right))
    max(var(--space-xl), env(safe-area-inset-bottom))
    max(var(--space-md), env(safe-area-inset-left));
}
.login-card { width: min(24rem, 100%); margin-inline: auto; }
.login-logo {
  width: min(14rem, 100%);
  height: 2.5rem;
  aspect-ratio: auto;
  margin-bottom: var(--space-xl);
}
.login-title { margin: 0 0 var(--space-xs); font-size: var(--text-2xl); }
.login-sub { margin: 0 0 var(--space-lg); font-size: var(--text-sm); line-height: 1.55; }

.login-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2xs);
  margin: 0 0 var(--space-lg);
  padding: var(--space-2xs);
  border-radius: var(--radius-sm);
  background: var(--color-paper-3);
}
.login-tab {
  min-height: 2.25rem;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) { .login-tab:hover { color: var(--color-ink); } }
@media (pointer: coarse) { .login-tab { min-height: var(--tap); } }
.login-tab.active { background: var(--color-surface); color: var(--color-ink); }

.login-form .field { width: 100%; margin: 0 0 var(--space-md); }
.login-form .lm-btn { min-height: 2.875rem; margin-top: var(--space-xs); font-size: var(--text-ui); }
/* Giữ sẵn một dòng kể cả khi trống: lỗi hiện ra không đẩy cả form xuống. */
.login-error {
  min-height: 1.5em;
  margin: var(--space-md) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-danger);
  white-space: pre-wrap;
}
.login-foot {
  margin: var(--space-xl) 0 0;
  padding-top: var(--space-md);
  border-top: var(--rule-w) solid var(--color-rule);
  font-size: var(--text-xs);
}

/* Dải than chì — nhịp tối duy nhất của cả hệ, chỉ hiện trên màn rộng. */
.login-aside {
  display: none;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-xl);
  padding: var(--space-2xl) clamp(var(--space-xl), 5vw, var(--space-3xl));
  background: var(--color-graphite);
  color: var(--color-graphite-ink);
}
.login-aside-lede {
  margin: 0;
  max-width: 20ch;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
}
.login-aside-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 30rem;
  border-top: var(--rule-w) solid var(--color-graphite-2);
}
.login-aside-list li {
  padding: var(--space-sm) 0;
  border-bottom: var(--rule-w) solid var(--color-graphite-2);
  color: var(--color-graphite-muted);
  font-size: var(--text-sm);
}

@media (min-width: 60rem) {
  .login { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .login-main { padding: var(--space-2xl) clamp(var(--space-xl), 7vw, var(--space-3xl)); }
  .login-card { margin-inline: 0; }
  .login-aside { display: flex; }
}

/* ══ 3. Platform admin: chọn studio / quản lý admin phụ ══════════════════ */
.admin-select {
  min-height: 100dvh;
  padding:
    max(var(--space-xl), env(safe-area-inset-top))
    max(var(--space-md), env(safe-area-inset-right))
    var(--space-2xl)
    max(var(--space-md), env(safe-area-inset-left));
  background: var(--color-paper);
}
.admin-panel { width: min(40rem, 100%); margin-inline: auto; }
.admin-logo {
  width: min(14rem, 100%);
  height: 2.5rem;
  aspect-ratio: auto;
  margin-bottom: var(--space-xl);
}
.admin-title { margin: 0 0 var(--space-2xs); font-size: var(--text-xl); }
.admin-sub { margin: 0 0 var(--space-lg); font-size: var(--text-sm); }
.admin-search { width: 100%; margin-bottom: var(--space-sm); }

.admin-studio-list {
  display: flex;
  flex-direction: column;
  border: var(--rule-w) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.admin-studio-list:empty { display: none; }
.admin-studio-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 3.5rem;
  padding: var(--space-sm) var(--space-md);
  border: 0;
  border-bottom: var(--rule-w) solid var(--color-rule);
  background: transparent;
  color: var(--color-ink);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.admin-studio-item:last-child { border-bottom: 0; }
@media (hover: hover) { .admin-studio-item:hover { background: var(--color-paper-2); } }
.admin-studio-item:focus-visible { outline-offset: -2px; }
.admin-studio-name { display: block; font-weight: 600; }
.admin-studio-email {
  display: block;
  margin-top: var(--space-3xs);
  font-size: var(--text-xs);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}
.admin-studio-count { flex: none; }

.admin-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-lg); }
.admin-actions--right { justify-content: flex-end; }
.admin-form-card { margin-top: var(--space-lg); }
.admin-form-card .field { width: 100%; margin-bottom: var(--space-md); }
.admin-all-row { margin: var(--space-xs) 0 var(--space-md); }
.admin-check-list,
.admin-current-list { display: flex; flex-direction: column; }
.admin-check-list {
  max-height: 14rem;
  overflow: auto;
  padding: var(--space-2xs);
  border: var(--rule-w) solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-paper);
}
.admin-check-list.is-disabled { opacity: .5; pointer-events: none; }
.admin-section-title { margin: var(--space-xl) 0 var(--space-xs); font-size: var(--text-md); }
.admin-current-item { padding: var(--space-sm) 0; border-bottom: var(--rule-w) solid var(--color-rule); }
.admin-current-item:last-child { border-bottom: 0; }
.admin-current-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-md);
}
.platform-chip {
  display: inline-flex;
  align-items: center;
  margin-right: var(--space-xs);
  font-size: var(--text-xs);
  color: var(--color-muted);
}

/* ══ 4. Khung ứng dụng ═══════════════════════════════════════════════════ */
.shell { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100dvh; }
.main { min-width: 0; display: flex; flex-direction: column; }

/* ── Sidebar = ngăn "Thêm" trượt từ đáy trên màn hẹp ─────────────────── */
.side {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sheet);
  display: flex;
  flex-direction: column;
  max-height: min(86dvh, 46rem);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-pop);
  transform: translateY(102%);
  visibility: hidden;
  transition:
    transform var(--dur-short) var(--ease-in),
    visibility 0s linear var(--dur-short);
}
.side.open {
  transform: none;
  visibility: visible;
  transition: transform var(--dur-long) var(--ease-out), visibility 0s;
}
.side-grab {
  flex: none;
  align-self: center;
  width: 2.25rem; height: 0.25rem;
  margin: var(--space-xs) 0 var(--space-2xs);
  border-radius: var(--radius-pill);
  background: var(--color-rule-2);
}
.side-brand {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md) var(--space-sm);
}
.side-logo {
  width: auto;
  min-width: 0;
  height: 1.75rem;
  min-height: 0;
  aspect-ratio: auto;
  flex: 1 1 auto;
  max-width: 11rem;
}
.side-logo::before { font-size: var(--text-md); }
.side-logo.has-custom-logo { width: 8rem; flex: none; }
.side-tag {
  flex: none;
  margin: 0;
  font-size: var(--text-2xs);
  color: var(--color-muted);
}

.side-nav {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-3xs) var(--space-2xs);
  padding: 0 var(--space-sm) var(--space-sm);
  scrollbar-width: thin;
  scrollbar-color: var(--color-rule-2) transparent;
}
.side-nav > .side-label,
.side-nav > .branch-group { grid-column: 1 / -1; }
.side-label {
  margin: var(--space-sm) var(--space-xs) var(--space-2xs);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}

.side .nav-item,
.branch-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: var(--tap);
  padding: 0 var(--space-sm);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.side .nav-item svg,
.branch-toggle svg {
  flex: none;
  width: 1.125rem; height: 1.125rem;
  fill: none; stroke: var(--color-muted); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
@media (hover: hover) {
  .side .nav-item:hover,
  .branch-toggle:hover { background: var(--color-paper-2); color: var(--color-ink); }
}
.side .nav-item:focus-visible,
.branch-toggle:focus-visible { outline-offset: -2px; }
.side .nav-item.active { background: var(--color-accent-soft); color: var(--color-accent-text); }
.side .nav-item.active svg { stroke: var(--color-accent-text); }

/* Studio nhiều chi nhánh: mỗi chi nhánh là một nhóm thu gọn. */
.branch-toggle { color: var(--color-ink); font-weight: 600; }
.branch-toggle span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.branch-toggle svg { width: 0.875rem; height: 0.875rem; transition: transform var(--dur-short) var(--ease-out); }
.branch-group.open > .branch-toggle svg { transform: rotate(90deg); }
.branch-items {
  display: none;
  margin: var(--space-2xs) 0 var(--space-xs) var(--space-md);
  padding-left: var(--space-xs);
  border-left: var(--rule-w) solid var(--color-rule);
}
.branch-group.open > .branch-items {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xs) var(--space-2xs);
}
.branch-items > .side-label { grid-column: 1 / -1; }

.side-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-top: var(--rule-w) solid var(--color-rule);
}
.acct { flex: 1 1 auto; min-width: 0; }
.acct-name {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-mail {
  display: block;
  font-size: var(--text-2xs);
  color: var(--color-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-role {
  display: inline-block;
  margin-top: var(--space-2xs);
  padding: var(--space-3xs) var(--space-xs);
  border-radius: var(--radius-xs);
  background: var(--color-accent-soft);
  color: var(--color-accent-text);
  font-size: var(--text-2xs);
  font-weight: 500;
}
.acct-role:empty { display: none; }
.side-foot .lm-btn { flex: none; }

/* Hai cột nút trong ngăn khi đủ chỗ — 15 mục một cột thì phải cuộn dài. */
@media (min-width: 23rem) {
  .side-nav,
  .branch-group.open > .branch-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: var(--color-scrim);
  animation: pt-fade var(--dur-short) var(--ease-out);
}
html.sheet-open body { overflow: hidden; }

/* ── Thanh trên ──────────────────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: calc(var(--topbar-h) + env(safe-area-inset-top));
  padding:
    env(safe-area-inset-top)
    max(var(--space-md), env(safe-area-inset-right))
    0
    max(var(--space-md), env(safe-area-inset-left));
  background: var(--color-topbar);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: var(--rule-w) solid var(--color-rule);
}
.topbar-title {
  min-width: 0;
  margin: 0;
  font-size: var(--text-md);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-spacer { flex: 1 1 auto; }
.menu-btn { display: none; }
.topbar .lm-btn { flex: none; }
.topbar-refresh span { display: none; }
.portal .topbar-refresh { width: var(--control-h); padding: 0; }
@media (pointer: coarse) { .portal .topbar-refresh { width: var(--tap); } }

/* ── Vùng nội dung ───────────────────────────────────────────────────────── */
.content {
  width: 100%;
  max-width: 96rem;
  padding:
    var(--space-md)
    max(var(--space-md), env(safe-area-inset-right))
    calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-xl))
    max(var(--space-md), env(safe-area-inset-left));
}

/* ── Thanh tab dưới ──────────────────────────────────────────────────────── */
.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--color-topbar);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: var(--rule-w) solid var(--color-rule);
}
.tab-item {
  flex: 1 1 0;
  min-width: 0;
  height: var(--tabbar-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  padding: 0 var(--space-2xs);
  border: 0;
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-2xs);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--dur-micro) var(--ease-out);
}
.tab-item svg {
  width: 1.375rem; height: 1.375rem;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.tab-more svg { fill: currentColor; stroke: none; }
.tab-item span { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-item.active { color: var(--color-accent-text); }
.tab-item.active svg { stroke-width: 2.1; }
.tab-item:active { color: var(--color-ink); }
.tab-item:focus-visible { outline-offset: -4px; border-radius: var(--radius-sm); }
/* 320px: năm tab chỉ còn 64px mỗi tab — bớt đệm và cỡ chữ để "Doanh thu"
   không bị cắt. */
@media (width < 22.5rem) {
  .tab-item { padding: 0; font-size: 0.6875rem; letter-spacing: -0.01em; }
}

/* ══ 5. Màn rộng: sidebar cố định ════════════════════════════════════════ */
@media (min-width: 40rem) {
  .topbar-refresh span { display: inline; }
  .portal .topbar-refresh { width: auto; padding: 0 var(--space-md); }
}

@media (min-width: 60rem) {
  .shell { grid-template-columns: var(--side-w) minmax(0, 1fr); }

  .side {
    position: sticky;
    top: 0;
    bottom: auto;
    z-index: var(--z-raised);
    height: 100dvh;
    max-height: none;
    padding-bottom: 0;
    background: var(--color-paper-2);
    border-right: var(--rule-w) solid var(--color-rule);
    border-radius: 0;
    box-shadow: none;
    transform: none;
    visibility: visible;
    transition: none;
  }
  .side-grab { display: none; }
  .side-brand {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
    padding: var(--space-lg) var(--space-md) var(--space-md);
  }
  .side-logo { flex: none; width: 100%; }
  .side-nav,
  .branch-group.open > .branch-items { grid-template-columns: minmax(0, 1fr); }
  .side-nav { padding: 0 var(--space-sm) var(--space-md); }
  .side .nav-item,
  .branch-toggle { min-height: 2.25rem; }
  .side .nav-item.active { background: var(--color-surface); box-shadow: 0 0 0 var(--rule-w) var(--color-rule); }
  .side-foot { flex-direction: column; align-items: stretch; }
  .side-foot .lm-btn { width: 100%; }

  .scrim { display: none; }
  html.sheet-open body { overflow: visible; }

  .topbar { padding-inline: var(--space-xl); }
  .topbar-title { font-size: var(--text-lg); }
  .content { padding: var(--space-xl) var(--space-xl) var(--space-2xl); }
  .tabbar { display: none; }
}

/* ══ 6. Khung chuẩn của mọi panel ═════════════════════════════════════════
   Mỗi panel đi theo cùng một trình tự, để người dùng mở mục nào cũng biết
   nhìn đâu:
     .pane-head  một câu nói trang này để làm gì + nút hành động chính (phải)
     .scope      dải bộ lọc / máy đang cấu hình — chỉ có ô chọn, không có nút
     .block      khối nội dung: đầu khối (tiêu đề · số đếm · công cụ) rồi thân.
                 Bảng nằm sát mép khối, không có viền riêng.
     .block--log lịch sử đồng bộ, thu gọn trong <details>, luôn ở cuối.
   Điện thoại: khối chứa bảng bỏ khung (bảng đã thành từng thẻ — không lồng
   thẻ trong thẻ); khối chứa form vẫn giữ khung. */
.pane {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.pane-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm) var(--space-lg);
}
.pane-lede {
  flex: 1 1 24rem;
  min-width: 0;
  max-width: 72ch;
  margin: 0;
  font-size: var(--text-ui);
  line-height: 1.55;
  color: var(--color-ink-2);
}
.pane-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.pane-head--detail { align-items: flex-start; }
.pane-head-text { flex: 1 1 16rem; min-width: 0; }
.pane-head-text .block-title { overflow-wrap: anywhere; }
.pane-head-text .pane-lede { margin-top: var(--space-3xs); font-size: var(--text-sm); color: var(--color-muted); }
.pane-status:empty { display: none; }
.pane-status { margin: calc(-1 * var(--space-sm)) 0 0; }
@media (width < 40rem) {
  .pane-actions { width: 100%; }
  .pane-actions .lm-btn { flex: 1 1 0; }
}

/* Dải phạm vi: bộ lọc nằm chung một dải nền xám nhạt. */
.scope {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-2);
  border: var(--rule-w) solid var(--color-rule);
  border-radius: var(--radius-md);
}
.scope-field { min-width: 0; }
.scope-field .field { width: 100%; }
.scope-field--wide { grid-column: 1 / -1; }
/* Ô ngày trên màn hẹp: bớt đệm để "dd/mm/yyyy" + biểu tượng lịch vừa nửa cột. */
@media (width < 30rem) {
  .scope input.field[type="date"] { padding-inline: var(--space-xs); }
}
@media (min-width: 48rem) {
  .scope { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-sm) var(--space-md); }
  .scope-field { flex: 0 1 12rem; }
  .scope-field--wide { flex-basis: 20rem; }
}

/* Khối */
.block {
  min-width: 0;
  background: var(--color-surface);
  border: var(--rule-w) solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-md);
  min-height: 3.25rem;
  padding: var(--space-xs) var(--space-md);
  border-bottom: var(--rule-w) solid var(--color-rule);
}
.block-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: var(--tracking-display);
  line-height: 1.3;
  color: var(--color-ink);
}
.block-meta {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}
.block-meta:empty { display: none; }
.block-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-left: auto;
}
.block-body { padding: var(--space-md); }
.block-body > .hint:first-child { margin-top: 0; }
.block-note {
  max-width: 80ch;
  margin: 0;
  padding: var(--space-sm) var(--space-md) 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.block-note + .table-wrap { margin-top: var(--space-sm); border-top: var(--rule-w) solid var(--color-rule); }
.block > .table-wrap {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.block .viewer { border: 0; border-radius: 0; }
.block--narrow { max-width: 46rem; }
@media (min-width: 40rem) {
  .block-head { padding-inline: var(--space-lg); }
  .block-body { padding: var(--space-lg); }
  .block-note { padding-inline: var(--space-lg); }
}

/* Khối không khung: lưới thẻ (hình nền, ảnh chia sẻ) — thẻ không nằm trong thẻ. */
.block--plain {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.block--plain > .block-head {
  min-height: 0;
  padding: 0 0 var(--space-sm);
  border-bottom: 0;
}

/* Hai khối cạnh nhau trên màn rộng. */
.block-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
}
@media (min-width: 64rem) {
  .block-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Bảng giá 5 cột có ô nhập: chỉ đặt cạnh nhau khi đủ rộng để thấy cột "Bật". */
.block-row--wide { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64rem) { .block-row--wide { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 100rem) { .block-row--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Lịch sử đồng bộ: thu gọn, mở khi cần tra lỗi. */
.block--log > summary {
  list-style: none;
  cursor: pointer;
  border-bottom: 0;
}
.block--log > summary::-webkit-details-marker { display: none; }
.block--log > summary::after {
  content: "";
  width: 0.5rem; height: 0.5rem;
  margin-left: auto;
  border-right: 1.5px solid var(--color-muted);
  border-bottom: 1.5px solid var(--color-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--dur-short) var(--ease-out);
}
.block--log[open] > summary { border-bottom: var(--rule-w) solid var(--color-rule); }
.block--log[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
@media (hover: hover) { .block--log > summary:hover { background: var(--color-paper-2); } }
.block--log > summary:focus-visible { outline-offset: -2px; }
.block--log > summary .block-title { font-size: var(--text-ui); color: var(--color-ink-2); }

/* Điện thoại: khối chứa bảng-thành-thẻ bỏ khung để không lồng thẻ trong thẻ. */
@media (width < 40rem) {
  .block:has(.is-cardable) {
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .block:has(.is-cardable) > .block-head {
    min-height: 0;
    padding: 0 0 var(--space-xs);
    border-bottom: 0;
  }
  .block:has(.is-cardable) > .block-note { padding: 0 0 var(--space-xs); }
  .block:has(.is-cardable) > .block-note + .table-wrap { margin-top: 0; border-top: 0; }
}

/* ── Tải file lên: ô kéo-thả ───────────────────────────────────────────────
   Input file trong suốt phủ kín ô — bấm hay thả file đều rơi thẳng vào
   input, không cần JS. shell.js chỉ thay dòng chữ bằng tên file đã chọn. */
.upload {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-md);
}
.drop {
  position: relative;
  flex: 1 1 18rem;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-3xs);
  min-height: 6.5rem;
  padding: var(--space-md);
  border: var(--rule-w) dashed var(--color-rule-3);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}
.drop--small { flex-basis: 14rem; min-height: 4.75rem; }
.drop-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.drop-title { font-size: var(--text-ui); font-weight: 600; color: var(--color-ink); }
.drop-hint {
  max-width: 100%;
  font-size: var(--text-sm);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}
@media (hover: hover) { .drop:hover { border-color: var(--color-accent); } }
.drop.is-over { border-color: var(--color-accent); background: var(--color-accent-soft); }
.drop.has-files { border-style: solid; border-color: var(--color-accent); }
.drop.has-files .drop-hint { color: var(--color-accent-text); font-weight: 500; }
.drop:has(.drop-input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.upload-actions {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space-2xs);
}
.upload-actions .hint { margin: 0; }
@media (width < 40rem) {
  .upload-actions { flex: 1 1 100%; }
  .upload-actions .lm-btn { width: 100%; }
}

/* Form một dòng (Thêm chi nhánh) */
.inline-form { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.inline-form .field { flex: 1 1 14rem; min-width: 0; }
@media (width < 40rem) { .inline-form .lm-btn { width: 100%; } }

/* Dòng thông tin ngắn (link cổng nhân viên) */
.note-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-2);
  border: var(--rule-w) solid var(--color-rule);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.note-bar a { min-width: 0; overflow-wrap: anywhere; color: var(--color-accent-text); }
.note-bar-k { color: var(--color-muted); font-weight: 500; }

.radio-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin: 0 0 var(--space-md); }
.check-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3xs) var(--space-md);
}
@media (min-width: 30rem) { .check-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Nút phụ cho thao tác xóa hàng loạt: viền thường, chữ đỏ. */
.lm-btn--danger-text { --btn-fg: var(--color-danger); }
@media (hover: hover) { .lm-btn--danger-text:hover { --btn-fg: var(--color-danger); --btn-bd: var(--color-danger); } }

/* ══ 6b. Thành phần dùng lại ══════════════════════════════════════════════ */
.card {
  background: var(--color-surface);
  border: var(--rule-w) solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
@media (min-width: 40rem) {
  .card { padding: var(--space-lg); }
}

.hint {
  max-width: 75ch;
  margin: var(--space-xs) 0 0;
  font-size: var(--text-sm);
  line-height: 1.55;
}
.hint:empty { margin: 0; }
.hint--lead { margin: 0 0 var(--space-md); }

/* Giải thích dài thu vào một dòng; ai cần mới mở ra. */
.hint-more { max-width: 75ch; margin: 0 0 var(--space-sm); font-size: var(--text-sm); }
.hint-more summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h-sm);
  color: var(--color-muted);
  cursor: pointer;
}
@media (hover: hover) { .hint-more summary:hover { color: var(--color-ink); } }
@media (pointer: coarse) { .hint-more summary { min-height: var(--tap); } }
.hint-more summary:focus-visible { border-radius: var(--radius-xs); }
.hint-more .hint { margin-top: 0; }
.hint--bad { color: var(--color-danger); }

/* Chuỗi máy đọc (mã voucher, HWID, session, link cổng): vẫn Be Vietnam Pro —
   phân biệt bằng số đều cột, nét 500 và khoảng chữ hơi rộng, không đổi font. */
.mono {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums slashed-zero;
  letter-spacing: 0.02em;
}

/* ── Thanh công cụ (bộ lọc + hành động) ────────────────────────────────────
   Điện thoại: lưới tự chia cột, mỗi ô ≥ 9.5rem → 375px được 2 cột,
   320px còn 1 cột; nhãn nút không bao giờ xuống dòng. */
.toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr));
  align-items: end;
  gap: var(--space-sm) var(--space-xs);
  margin-bottom: var(--space-md);
}
.toolbar .topbar-spacer { display: none; }
.toolbar .field { width: 100%; }
.toolbar .lm-btn { width: 100%; }
.toolbar-field { min-width: 0; }
.toolbar--tight { margin: var(--space-sm) 0 0; }
.toolbar--inline { display: flex; flex-wrap: wrap; align-items: center; }
.toolbar--inline .field { flex: 1 1 12rem; width: auto; }
.toolbar--inline .lm-btn { width: auto; flex: none; }
.toolbar--inline .topbar-spacer { display: block; flex: 1 1 auto; }

@media (min-width: 48rem) {
  .toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
  }
  .toolbar .topbar-spacer { display: block; flex: 1 1 auto; }
  .toolbar .lm-btn { width: auto; }
  .toolbar-field { flex: 0 1 12rem; }
  .toolbar-field .field { width: 100%; }
}

/* ── Lưới biểu mẫu ─────────────────────────────────────────────────────────
   2 cột (điện thoại) → 4 cột (≥40rem) → 12 cột (≥72rem, đúng span gốc). */
.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}
.grid .field { width: 100%; }
.sp-2, .sp-3, .sp-4 { grid-column: span 1; }
.sp-6, .sp-8, .sp-9, .sp-12 { grid-column: 1 / -1; }
.grid-end { display: flex; align-items: flex-end; }
@media (min-width: 40rem) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sp-2 { grid-column: span 1; }
  .sp-3, .sp-4, .sp-6 { grid-column: span 2; }
  .sp-8, .sp-9, .sp-12 { grid-column: 1 / -1; }
}
@media (min-width: 72rem) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md) var(--space-lg); }
  .sp-2  { grid-column: span 2; }
  .sp-3  { grid-column: span 3; }
  .sp-4  { grid-column: span 4; }
  .sp-6  { grid-column: span 6; }
  .sp-8  { grid-column: span 8; }
  .sp-9  { grid-column: span 9; }
  .sp-12 { grid-column: span 12; }
}

/* ── Dải số liệu doanh thu ─────────────────────────────────────────────────
   Một khối, chia ô bằng khe 1px lộ màu kẻ (không phải 8 thẻ rời).
   Ô "Thực thu" là nhịp tối của trang. Cỡ số co theo bề rộng ô (cqi) để số
   tiền 9 chữ số không bao giờ tràn. */
.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--rule-w);
  margin-bottom: var(--space-xs);
  border: var(--rule-w) solid var(--color-rule);
  border-radius: var(--radius-md);
  background: var(--color-rule);
  overflow: hidden;
}
.metric {
  container-type: inline-size;
  min-width: 0;
  padding: var(--space-sm) var(--space-md) var(--space-md);
  background: var(--color-surface);
}
.metric--lead,
.metric--wide { grid-column: 1 / -1; }
.metric-k {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-muted);
}
.metric-v {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-size: clamp(1rem, 14cqi, 1.375rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.metric-v small {
  margin-left: var(--space-3xs);
  font-size: 0.62em;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-muted);
}
.metric-sub { display: block; margin-top: var(--space-2xs); font-size: var(--text-xs); color: var(--color-muted); }

.metric--lead {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-graphite);
}
.metric--lead .metric-k { color: var(--color-graphite-muted); }
.metric--lead .metric-v {
  font-size: clamp(1.75rem, 13cqi, 2.75rem);
  letter-spacing: -0.03em;
  color: var(--color-graphite-ink);
}
.metric--lead .metric-v small { color: var(--color-graphite-muted); }
.metric--lead .metric-sub { color: var(--color-graphite-muted); }

@media (min-width: 48rem) {
  .metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .metric--wide { grid-column: span 2; }
}
@media (min-width: 80rem) {
  .metrics { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
  .metric--lead { grid-column: 1; grid-row: 1 / span 2; padding: var(--space-lg); }
}

/* ── Bảng ──────────────────────────────────────────────────────────────── */
.table-wrap {
  background: var(--color-surface);
  border: var(--rule-w) solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-rule-2) transparent;
}
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-sm);
}
thead th {
  padding: var(--space-xs) var(--space-md);
  background: var(--color-paper-2);
  border-bottom: var(--rule-w) solid var(--color-rule);
  text-align: left;
  white-space: nowrap;
  font-size: var(--text-2xs);
  font-weight: 500;
  color: var(--color-muted);
  vertical-align: bottom;
}
tbody td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--rule-w) solid var(--color-rule);
  vertical-align: middle;
  color: var(--color-ink);
}
tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) {
  tbody tr:hover td { background: var(--color-paper); }
}
td a { color: var(--color-accent-text); text-underline-offset: 3px; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-empty { padding: var(--space-xl) var(--space-md); text-align: center; font-size: var(--text-sm); color: var(--color-muted); }
p.table-empty { margin: 0; }

/* Bảng chi tiết giao dịch có 14 cột: đủ rộng rồi cuộn ngang, trừ cột ghi
   chú được phép xuống dòng. */
.wide-table { min-width: 97.5rem; }
/* Danh sách mã chỉ 9 cột — không cần rộng như bảng giao dịch 14 cột. */
.wide-table:has(#codeRows) { min-width: 66rem; }
.wide-table tbody td { white-space: nowrap; }
.wide-table tbody td:last-child { white-space: normal; min-width: 11rem; }

/* ── Bảng sổ cái: kẻ ô đầy đủ như Excel, cột đầu dính khi cuộn ngang ──── */
.ledger-table th,
.ledger-table td {
  border-right: var(--rule-w) solid var(--color-rule);
  border-bottom: var(--rule-w) solid var(--color-rule);
}
.ledger-table th:last-child,
.ledger-table td:last-child { border-right: 0; }
.ledger-table thead th {
  text-align: center;
  vertical-align: middle;
  white-space: normal;
  line-height: 1.35;
}
.ledger-table thead th.num { min-width: 6rem; }
.ledger-table thead th.col-group { text-align: center; }
.ledger-table thead tr.col-no th {
  padding-top: var(--space-3xs);
  padding-bottom: var(--space-2xs);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--color-faint);
}
.ledger-table tbody tr:last-child td { border-bottom: var(--rule-w) solid var(--color-rule); }
.ledger-table tfoot td {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-2);
  border-right: var(--rule-w) solid var(--color-rule);
  font-weight: 600;
  white-space: nowrap;
}
.ledger-table tfoot td:last-child { border-right: 0; }
.ledger-table tfoot td.total-label { text-align: center; }
.ledger-table td.num,
.ledger-table th.num { font-variant-numeric: tabular-nums; }
.ledger-table tbody td:first-child,
.ledger-table thead tr:first-child th:first-child {
  position: sticky;
  left: 0;
  z-index: var(--z-base);
}
.ledger-table tbody td:first-child { background: var(--color-surface); }
@media (hover: hover) {
  .ledger-table tbody tr:hover td:first-child { background: var(--color-paper); }
}

.cell-warn { color: var(--color-danger); font-weight: 500; }
.note-unclassified { color: var(--color-danger); }

/* ── Bảng thành thẻ trên điện thoại (shell.js gắn .is-cardable + data-label) */
@media (width < 40rem) {
  .table-wrap:has(> .is-cardable) {
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  table.is-cardable,
  .is-cardable tbody,
  .is-cardable tfoot,
  .is-cardable tr,
  .is-cardable td { display: block; }
  /* Bảng chi tiết 14 cột: trên điện thoại thành thẻ nên bỏ bề rộng tối thiểu. */
  .wide-table.is-cardable { min-width: 0; }
  .is-cardable thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .is-cardable tbody { display: grid; gap: var(--space-xs); }
  .is-cardable tbody tr {
    padding: var(--space-2xs) var(--space-md);
    background: var(--color-surface);
    border: var(--rule-w) solid var(--color-rule);
    border-radius: var(--radius-md);
  }
  /* Nhãn là float nằm trong vùng đệm trái (lề âm) thay vì dùng grid: một ô
     có thể chứa nhiều nút/chip/<br> — làm grid thì mỗi mảnh thành một ô lưới
     riêng. flow-root để ô cao theo nhãn khi nhãn dài xuống nhiều dòng
     ("Phương thức thanh toán · Tiền mặt") — nhãn tuyệt đối thì đè dòng dưới.
     Bề rộng nhãn tính bằng rem: % của padding và % của float đo theo hai
     khối khác nhau nên không khớp. */
  .is-cardable tbody td,
  .is-cardable.ledger-table tbody td {
    --label-w: 7.5rem;
    display: flow-root;
    position: relative;
    min-height: 2.25rem;
    padding: var(--space-xs) 0 var(--space-xs) calc(var(--label-w) + var(--space-sm));
    border: 0;
    border-bottom: var(--rule-w) solid var(--color-rule);
    background: transparent;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .is-cardable tbody td:last-child,
  .is-cardable.ledger-table tbody tr:last-child td:last-child { border-bottom: 0; }

  /* Dòng Tổng cộng: một thẻ riêng, nền sẫm hơn để tách khỏi danh sách. */
  .is-cardable tfoot { margin-top: var(--space-xs); }
  .is-cardable tfoot tr {
    padding: var(--space-2xs) var(--space-md);
    background: var(--color-paper-2);
    border: var(--rule-w) solid var(--color-rule);
    border-radius: var(--radius-md);
  }
  .is-cardable tfoot td,
  .is-cardable.ledger-table tfoot td {
    --label-w: 7.5rem;
    display: flow-root;
    position: relative;
    min-height: 2.25rem;
    padding: var(--space-xs) 0 var(--space-xs) calc(var(--label-w) + var(--space-sm));
    border: 0;
    border-bottom: var(--rule-w) solid var(--color-rule);
    background: transparent;
    text-align: left;
    white-space: normal;
  }
  .is-cardable tfoot td:last-child { border-bottom: 0; }
  .is-cardable tfoot td.cell-bare { padding-left: 0; }
  .is-cardable tfoot td.cell-bare::before { content: none; }
  .is-cardable tfoot td:empty { display: none; }
  .is-cardable tbody td::before,
  .is-cardable tfoot td::before {
    content: attr(data-label);
    float: left;
    width: var(--label-w);
    margin: 0 var(--space-sm) 0 calc(-1 * (var(--label-w) + var(--space-sm)));
    padding-top: 0.1em;
    font-size: var(--text-2xs);
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-muted);
    overflow-wrap: normal;
  }
  .is-cardable tbody td .chip { margin: var(--space-3xs) var(--space-3xs) var(--space-3xs) 0; }
  .is-cardable tbody td.cell-bare {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-md);
    padding-left: 0;
  }
  .is-cardable tbody td.cell-bare::before { content: none; }
  .is-cardable tbody td.cell-lead { font-weight: 600; }
  .is-cardable tbody td.table-empty { display: block; padding: var(--space-lg) 0; text-align: center; border: 0; }
  .is-cardable tbody td.table-empty::before { content: none; }
  .is-cardable tbody tr:hover td { background: transparent; }
  .is-cardable .field--mini { width: 100%; max-width: none; margin-top: 0; text-align: left; }
}

/* ── Chip trạng thái — luôn có chữ, màu chỉ là tín hiệu phụ ─────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0 var(--space-xs);
  border-radius: var(--radius-xs);
  background: var(--color-paper-3);
  color: var(--color-ink-2);
  font-size: var(--text-2xs);
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.chip--on  { background: var(--color-accent-soft);  color: var(--color-accent-text); }
.chip--new { background: var(--color-warn-soft);    color: var(--color-warn); }
.chip--off { background: var(--color-ink);          color: var(--color-paper); }
.chip--bad { background: var(--color-danger-soft);  color: var(--color-danger); }

.link-btn {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent-text);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) { .link-btn:hover { text-decoration-color: currentColor; } }
.link-btn:focus-visible { border-radius: var(--radius-xs); }
.link-btn--danger { color: var(--color-danger); }
@media (pointer: coarse) {
  td .link-btn { display: inline-flex; align-items: center; min-height: var(--tap); }
}

/* ── Hình nền (thẻ theo màn hình máy) ──────────────────────────────────── */
.bg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: var(--space-md);
}
.bg-card {
  background: var(--color-surface);
  border: var(--rule-w) solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.bg-preview {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background: var(--color-paper-2);
  border-bottom: var(--rule-w) solid var(--color-rule);
}
.bg-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bg-preview-empty { color: var(--color-muted); font-size: var(--text-xs); font-weight: 500; }
.bg-card-body { padding: var(--space-md); }
.bg-card h3 { margin: var(--space-xs) 0 var(--space-3xs); font-size: var(--text-ui); font-weight: 600; }
.bg-card .hint { margin: 0; overflow-wrap: anywhere; font-size: var(--text-2xs); font-variant-numeric: tabular-nums; }
.bg-toggle { margin-top: var(--space-xs); }

/* ── Thương hiệu ───────────────────────────────────────────────────────────
   Khung xem trước dùng đúng nền mà trang ảnh khách sẽ hiện (portal.js →
   renderBrandPreview ghi --preview-paper, đã qua resolvePaper). is-light /
   is-dark ép màu chữ theo nền đó, bất kể portal đang ở chế độ sáng hay tối. */
.brand-preview {
  min-height: 10rem;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-lg);
  padding: var(--space-lg);
  border: var(--rule-w) solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--preview-paper, var(--color-paper));
  color: var(--color-ink);
}
.brand-preview.is-light .lm-logo { color: var(--color-ink-on-light); }
.brand-preview.is-dark .lm-logo { color: var(--color-ink-on-dark); }
.brand-preview-logo { width: min(16rem, 88%); }
/* Khối Nhận diện: các cặp nhãn + ô xếp dọc, cách nhau một nhịp. */
.brand-grid .block-body > .field-label:not(:first-child),
.brand-grid .block-body > .brand-colors { margin-top: var(--space-md); }
.brand-grid .drop { width: 100%; }
.brand-colors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: var(--space-md);
}
.brand-colors label {
  display: grid;
  gap: var(--space-2xs);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  font-weight: 500;
}
.brand-colors input[type="color"] {
  width: 100%;
  height: 3rem;
  padding: var(--space-2xs);
  border: var(--rule-w) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  cursor: pointer;
}

/* ── Ảnh / media ───────────────────────────────────────────────────────── */
.viewer {
  min-height: 16rem;
  display: grid;
  place-items: center;
  padding: var(--space-sm);
  background: var(--color-paper-2);
  border: var(--rule-w) solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* Ảnh ghép thường là strip DỌC: chặn cả hai chiều để khối chi tiết session
   luôn nhìn hết được trong một màn. */
.viewer img,
.viewer video { max-width: 100%; max-height: min(58dvh, 32rem); display: block; border-radius: var(--radius-xs); }
.viewer--dark { background: var(--color-graphite); border-color: var(--color-graphite); }
.viewer-empty { font-size: var(--text-sm); color: var(--color-muted); }
.viewer--dark .viewer-empty { color: var(--color-graphite-muted); }

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr));
  gap: var(--space-sm);
}
.media-card {
  min-width: 0;
  background: var(--color-surface);
  border: var(--rule-w) solid var(--color-rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.media-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0;
  border: 0;
  background: var(--color-paper-2);
  cursor: zoom-in;
  overflow: hidden;
}
.media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-thumb:focus-visible { outline-offset: -2px; }
.media-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-top: var(--rule-w) solid var(--color-rule);
}
.media-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-2xs); color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* ── Thư viện ảnh khách chia sẻ ────────────────────────────────────────── */
.shared-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(8.5rem, 100%), 1fr));
  gap: var(--space-sm);
}
.shared-library-grid > .hint,
.shared-library-grid > p { grid-column: 1 / -1; }
.shared-library-card {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  background: var(--color-surface);
  border: var(--rule-w) solid var(--color-rule);
  border-radius: var(--radius-md);
  transition: border-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) { .shared-library-card:hover { border-color: var(--color-rule-3); } }
.shared-library-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--color-paper-2);
}
.shared-library-meta { display: block; padding: var(--space-xs) var(--space-sm); border-top: var(--rule-w) solid var(--color-rule); }
.shared-library-meta strong { display: block; font-size: var(--text-xs); font-weight: 600; }
.shared-library-meta span { display: block; margin-top: var(--space-3xs); font-size: var(--text-2xs); color: var(--color-muted); overflow-wrap: anywhere; }

/* ── Ảnh & session: thumbnail trong bảng + trang chi tiết ──────────────── */
.session-thumb {
  display: block;
  width: 4.5rem; height: 3.375rem;
  padding: 0;
  border: var(--rule-w) solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
  overflow: hidden;
  cursor: pointer;
}
.session-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.session-thumb.is-empty::after {
  content: "—";
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  color: var(--color-faint);
}
.table-thumb {
  width: 2.875rem; height: 2.875rem;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: var(--rule-w) solid var(--color-rule);
  background: var(--color-paper-2);
}

/* ── Xem ảnh lớn ───────────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  background: var(--color-overlay);
  color: var(--color-overlay-ink);
  animation: pt-fade var(--dur-short) var(--ease-out);
}
.lightbox-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl) var(--space-md) var(--space-sm);
}
.lightbox-stage img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-xs); }
.lightbox-close {
  position: absolute;
  top: calc(env(safe-area-inset-top) + var(--space-sm));
  right: var(--space-sm);
  width: var(--tap); height: var(--tap);
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-overlay-chip);
  color: var(--color-overlay-ink);
  font-size: var(--text-xl);
  line-height: 1;
  cursor: pointer;
}
.lightbox-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}
.lightbox-label { min-width: 0; font-size: var(--text-sm); font-variant-numeric: tabular-nums; color: var(--color-overlay-ink); }

/* ── Thông báo nổi ─────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--space-md));
  z-index: var(--z-toast);
  width: max-content;
  max-width: min(35rem, calc(100% - 2 * var(--space-md)));
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-w) solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-graphite);
  color: var(--color-graphite-ink);
  font-size: var(--text-sm);
  line-height: 1.5;
  box-shadow: var(--shadow-pop);
  transform: translateX(-50%);
  animation: pt-toast var(--dur-long) var(--ease-out);
}
.toast--bad {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
  color: var(--color-danger);
}
@media (min-width: 60rem) {
  .toast { bottom: var(--space-lg); }
}

/* ══ 7. Hộp thoại ═════════════════════════════════════════════════════════
   Điện thoại: trồi lên từ đáy như một sheet. Màn rộng: ở giữa. */
.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--color-scrim);
  animation: pt-fade var(--dur-short) var(--ease-out);
}
.modal-card {
  width: 100%;
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-lg) var(--space-md) 0;
  background: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-pop);
  animation: pt-rise var(--dur-long) var(--ease-out);
}
.modal-title { margin: 0 0 var(--space-2xs); font-size: var(--text-lg); }
.modal-sub { margin: 0 0 var(--space-md); font-size: var(--text-sm); overflow-wrap: anywhere; }
.modal-card .field-label { margin-top: var(--space-xs); }
.modal-card .quick-row:empty { display: none; }
/* Lỗi kiểm tra trong hộp nhập — giữ sẵn một dòng để form không giật. */
.field-error {
  min-height: 1.5em;
  margin: var(--space-xs) 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-danger);
}
/* Dính đáy khung cuộn: danh sách quyền dài thì nút Lưu vẫn luôn thấy. */
.modal-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  gap: var(--space-xs);
  margin: var(--space-lg) calc(-1 * var(--space-md)) 0;
  padding: var(--space-sm) var(--space-md) max(var(--space-md), env(safe-area-inset-bottom));
  border-top: var(--rule-w) solid var(--color-rule);
  background: var(--color-surface);
}
.modal-actions .lm-btn { flex: 1 1 0; }
.modal-actions:empty { display: none; }

@media (min-width: 40rem) {
  .modal { align-items: center; padding: var(--space-lg); }
  .modal-card {
    width: min(38rem, 100%);
    max-height: 88dvh;
    padding: var(--space-lg) var(--space-lg) 0;
    border: var(--rule-w) solid var(--color-rule);
    border-radius: var(--radius-lg);
  }
  .modal-card--sm { width: min(27rem, 100%); }
  .modal-actions {
    margin-inline: calc(-1 * var(--space-lg));
    padding: var(--space-md) var(--space-lg);
  }
  .modal-actions .lm-btn { flex: none; }
}

.progress-track {
  height: 0.375rem;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--color-paper-3);
}
.progress-track span {
  display: block;
  width: 8%;
  height: 100%;
  border-radius: inherit;
  background: var(--color-accent);
}

/* ── Danh sách quyền / ô tick ──────────────────────────────────────────── */
.perm-list { display: block; }
.perm-group + .perm-group { margin-top: var(--space-md); }
.perm-group-t {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-muted);
}
.perm-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: var(--control-h);
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) { .perm-row:hover { background: var(--color-paper-2); } }
@media (pointer: coarse) { .perm-row { min-height: var(--tap); } }
.perm-row input {
  flex: none;
  width: 1.125rem; height: 1.125rem;
  margin: 0;
  accent-color: var(--color-accent);
  cursor: pointer;
}
.perm-row span { flex: 1; min-width: 0; }
.perm-row small { display: block; font-size: var(--text-2xs); }
.perm-key { font-family: var(--font-body); font-size: var(--text-2xs); color: var(--color-faint); }

/* ── Chip có nút xóa (ghi chú dùng lại) ────────────────────────────────── */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.chip--edit { gap: var(--space-2xs); min-height: 2rem; padding: 0 var(--space-2xs) 0 var(--space-sm); font-size: var(--text-xs); }
.chip-x {
  display: inline-grid;
  place-items: center;
  width: 1.5rem; height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-base);
  line-height: 1;
  cursor: pointer;
}
@media (hover: hover) { .chip-x:hover { background: var(--color-danger-soft); color: var(--color-danger); } }
/* Màn cảm ứng: nút × trong chip 24px là quá nhỏ — mở rộng vùng chạm lên 44px
   bằng lề âm để chip không phình ra. */
@media (pointer: coarse) {
  .chip--edit { min-height: var(--control-h); }
  .chip-x {
    width: var(--tap); height: var(--tap);
    margin: calc((var(--control-h) - var(--tap)) / 2) calc(-1 * var(--space-2xs)) calc((var(--control-h) - var(--tap)) / 2) 0;
  }
}

/* ── Phiếu yêu cầu mở khóa ─────────────────────────────────────────────── */
.qr-req {
  border: var(--rule-w) solid var(--color-rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.qr-req-row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
}
.qr-req-row > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.qr-req-row + .qr-req-row { border-top: var(--rule-w) solid var(--color-rule); }
.qr-req-k {
  flex: none;
  width: 6.5rem;
  font-size: var(--text-2xs);
  font-weight: 500;
  color: var(--color-muted);
}
#qrPendingBody .modal-actions {
  position: static;
  margin: var(--space-md) 0 0;
  padding: 0;
  border: 0;
  justify-content: flex-start;
}

/* ── Nhân viên: hộp mã vừa cấp ─────────────────────────────────────────── */
.staff-created {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
}
.staff-created p { margin: var(--space-2xs) 0; overflow-wrap: anywhere; }
.staff-created .mono { font-size: var(--text-base); font-weight: 500; }

/* ── Tạo mã: nút chuyển Voucher ↔ Loyalty (cùng hình với tab đăng nhập) ─── */
.seg {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--space-2xs);
  width: min(20rem, 100%);
  margin: 0 0 var(--space-md);
  padding: var(--space-2xs);
  border-radius: var(--radius-sm);
  background: var(--color-paper-3);
}
.seg-btn {
  min-height: 2.25rem;
  padding: 0 var(--space-md);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) { .seg-btn:hover { color: var(--color-ink); } }
@media (pointer: coarse) { .seg-btn { min-height: var(--tap); } }
.seg-btn.is-on { background: var(--color-surface); color: var(--color-ink); }
.seg-btn:active { transform: translateY(1px); }

/* ── Tạo mã: chọn nhanh, ghi chú bắt buộc, hiệu lực realtime ───────────── */
.quick-row { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-xs); }
.quick-chip {
  min-height: 2rem;
  padding: 0 var(--space-sm);
  border: var(--rule-w) solid var(--color-rule-2);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-ink-2);
  font-size: var(--text-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
@media (hover: hover) { .quick-chip:hover { border-color: var(--color-rule-3); color: var(--color-ink); } }
@media (pointer: coarse) { .quick-chip { min-height: var(--tap); padding: 0 var(--space-md); } }
.quick-chip.active {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}
.validity-custom {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  margin-top: var(--space-sm);
}
.validity-custom .field-label { margin: 0; }
.validity-custom .field { width: 100%; }
@media (min-width: 40rem) {
  .validity-custom { display: flex; flex-wrap: wrap; }
  .validity-custom .field { width: auto; min-width: 13rem; }
}
.validity-live {
  margin: var(--space-sm) 0 0;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  background: var(--color-paper-2);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.validity-live:empty { display: none; }
.validity-live--bad { background: var(--color-danger-soft); color: var(--color-danger); }

/* ── Trạng thái nhấn / vô hiệu cho các phần tử tương tác nhỏ ──────────── */
.link-btn:active,
.quick-chip:active,
.chip-x:active,
.login-tab:active,
.side .nav-item:active,
.branch-toggle:active,
.admin-studio-item:active { transform: translateY(1px); }
.link-btn:disabled,
.quick-chip:disabled,
.login-tab:disabled {
  color: var(--color-faint);
  text-decoration: none;
  cursor: not-allowed;
  transform: none;
}

/* ══ 8. Chuyển động ═══════════════════════════════════════════════════════ */
@keyframes pt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pt-rise {
  from { opacity: 0; transform: translateY(1rem); }
  to   { opacity: 1; transform: none; }
}
@keyframes pt-toast {
  from { opacity: 0; transform: translate(-50%, 0.5rem); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .side,
  .side.open { transform: none; transition: opacity 150ms linear, visibility 0s linear 150ms; }
  .side { opacity: 0; }
  .side.open { opacity: 1; transition: opacity 150ms linear; }
  .modal-card { animation-name: pt-fade; }
  .toast { animation-name: pt-fade; }
  @media (min-width: 60rem) { .side { opacity: 1; } }
}