/* DMS — bổ sung trên shadcn.css (theme Zinc). Chỉ dùng token HSL của shadcn, không hardcode màu.
   Giữ các mẫu đã duyệt: toast dưới phải, khung thông báo viền trái 4px, <dialog> xác nhận, hàng mở rộng ▸/▾. */

:root {
  --sidebar: 0 0% 98%;
  --info: 221 83% 53%;
  --success-soft: 142 76% 96%;
  --warning-soft: 48 100% 96%;
  --destructive-soft: 0 86% 97%;
  --info-soft: 214 100% 97%;
}
.dark {
  color-scheme: dark;            /* ô ngày, thanh cuộn, checkbox gốc theo nền tối */
  --sidebar: 240 5.9% 7%;
  --success-soft: 142 40% 12%;
  --warning-soft: 38 40% 12%;
  --destructive-soft: 0 40% 13%;
  --info-soft: 221 40% 14%;
}

[hidden] { display: none !important; }
html { font-size: 16px; }
body { min-height: 100vh; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: hsl(var(--foreground)); }

/* Icon dạng sprite <svg class="icon"><use href="#i-x"/></svg> (Lucide) */
.icon { width: 1rem; height: 1rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; }
.icon-lg { width: 1.25rem; height: 1.25rem; }
.btn .icon { width: 1rem; height: 1rem; }

/* ---------- Khung ứng dụng ---------- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; width: 15.5rem;
  background-color: hsl(var(--sidebar)); padding: 0.75rem; gap: 0; transition: width .2s ease, padding .2s ease; z-index: 40; }

/* Menu thu gọn thành thanh icon khi đang ở một chức năng (body.sidebar-collapsed) */
.sidebar-collapsed .sidebar { width: 3.5rem; padding: 0.75rem 0.5rem; }
.sidebar-collapsed .sidebar .sidebar-group-label,
.sidebar-collapsed .sidebar .sidebar-link > span,
.sidebar-collapsed .sidebar .sidebar-brand > div:not(.mark) { display: none; }
.sidebar-collapsed .sidebar .sidebar-brand { padding: 0.5rem 0.25rem 1rem; justify-content: center; }
.sidebar-collapsed .sidebar .sidebar-link { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar-collapsed .sidebar .sidebar-link.active { padding-left: 0; padding-right: 0; }
.sidebar-collapsed .sidebar .sidebar-section { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid hsl(var(--border)); }
/* Bấm nút menu / Ctrl+B: mở đầy đủ, đè lên nội dung (không đẩy nội dung) */
.sidebar-collapsed.sidebar-open .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 15.5rem; padding: 0.75rem;
  box-shadow: var(--shadow-lg); }
.sidebar-collapsed.sidebar-open .sidebar .sidebar-group-label,
.sidebar-collapsed.sidebar-open .sidebar .sidebar-link > span { display: initial; }
.sidebar-collapsed.sidebar-open .sidebar .sidebar-brand > div:not(.mark) { display: block; }
.sidebar-collapsed.sidebar-open .sidebar .sidebar-brand { justify-content: flex-start; padding: 0.5rem 0.5rem 1rem; }
.sidebar-collapsed.sidebar-open .sidebar .sidebar-link { justify-content: flex-start; padding: 0.5rem 0.75rem; }
.sidebar-collapsed.sidebar-open .sidebar .sidebar-link.active { padding: calc(0.5rem - 1px) calc(0.75rem - 1px); }
.sidebar-collapsed.sidebar-open .sidebar .sidebar-section { border-top: 0; padding-top: 0; margin-top: 0.75rem; }
.sidebar-collapsed.sidebar-open .main { margin-left: 3.5rem; }
.sidebar-backdrop { display: none; }
.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgb(0 0 0 / 0.25); z-index: 35; }
.sidebar-toggle { margin-left: -0.5rem; }
.sidebar-brand { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.5rem 1rem; }
.sidebar-brand .mark { width: 2rem; height: 2rem; border-radius: calc(var(--radius) - 2px);
  background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); display: grid; place-items: center; }
.sidebar-brand .name { font-weight: 600; line-height: 1.2; }
.sidebar-brand .sub { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
.sidebar-section { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 1px; }
.sidebar-link { color: hsl(var(--foreground) / 0.85); font-weight: 400; }
.sidebar-link .icon { color: hsl(var(--muted-foreground)); }
.sidebar-link.active { background-color: hsl(var(--background)); font-weight: 500; color: hsl(var(--foreground));
  box-shadow: var(--shadow-sm); border: 1px solid hsl(var(--border)); padding: calc(0.5rem - 1px) calc(0.75rem - 1px); }
.sidebar-link.active .icon { color: hsl(var(--foreground)); }
.sidebar-footer { margin-top: auto; padding-top: 1rem; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 20; background-color: hsl(var(--background) / 0.9);
  backdrop-filter: blur(6px); gap: 1rem; }
.breadcrumb { display: flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: hsl(var(--muted-foreground));
  min-width: 0; }
.breadcrumb a { color: hsl(var(--muted-foreground)); }
.breadcrumb a:hover { color: hsl(var(--foreground)); text-decoration: none; }
.breadcrumb .current { color: hsl(var(--foreground)); font-weight: 500; white-space: nowrap; }
.breadcrumb .sep { opacity: .5; }
.topbar-right { display: flex; align-items: center; gap: 0.5rem; }
.npp-chip { display: inline-flex; align-items: center; gap: 0.5rem; height: 2rem; padding: 0 0.75rem;
  border: 1px solid hsl(var(--border)); border-radius: 9999px; font-size: 0.8125rem; font-weight: 500; }
.npp-chip .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background-color: hsl(var(--success)); }
.npp-select { height: 2rem; width: auto; min-width: 16rem; font-size: 0.8125rem; }

/* Menu người dùng (details/summary, không cần JS) */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 0.375rem); min-width: 14rem; z-index: 30;
  background-color: hsl(var(--popover)); border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 0.25rem; }
.menu-head { padding: 0.5rem 0.625rem; border-bottom: 1px solid hsl(var(--border)); margin-bottom: 0.25rem; }
.menu-head .name { font-weight: 500; }
.menu-head .meta { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
.menu-item { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.4375rem 0.625rem;
  border-radius: calc(var(--radius) - 4px); font-size: 0.875rem; color: hsl(var(--foreground)); background: none;
  border: 0; cursor: pointer; font-family: inherit; text-align: left; }
.menu-item:hover { background-color: hsl(var(--accent)); text-decoration: none; }
.menu-item .icon { color: hsl(var(--muted-foreground)); }
.avatar-sm { width: 2rem; height: 2rem; font-size: 0.75rem; font-weight: 600; background-color: hsl(var(--secondary)); }

/* Nội dung căn giữa vùng làm việc; trang form/cấu hình hẹp hơn (.content.narrow) */
.content { padding: 1.5rem 2rem 3rem; width: 100%; max-width: 80rem; margin: 0 auto; }
.content.narrow { max-width: 68rem; }
.content.narrow .form-layout { max-width: none; }

/* ---------- Đầu trang ---------- */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.25rem; }
.page-title { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; margin: 0; line-height: 1.25; }
.page-description { color: hsl(var(--muted-foreground)); margin: 0.25rem 0 0; }
.page-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- Thanh công cụ danh sách ---------- */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
  margin-bottom: 0.75rem; }
.search { position: relative; width: 20rem; max-width: 100%; }
.search .icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); }
.search .input { padding-left: 2.25rem; }
.tabs-list a.tab-trigger { text-decoration: none; gap: 0.375rem; }
.tab-trigger .count { font-size: 0.75rem; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
.tab-trigger.active .count { color: hsl(var(--foreground)); }

/* ---------- Bảng ---------- */
.table-wrap { background-color: hsl(var(--card)); box-shadow: var(--shadow-sm); }
.table thead th { background-color: hsl(var(--muted) / 0.5); height: 2.5rem; font-size: 0.8125rem; }
.table td { padding: 0.625rem 1rem; }
.table td.code, .code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.8125rem; }
.table td.strong { font-weight: 500; }
.table td.muted { color: hsl(var(--muted-foreground)); }
.table .col-toggle { width: 2.75rem; padding-right: 0; }
.table .col-actions { width: 1%; white-space: nowrap; text-align: right; }
.table tr.clickable { cursor: pointer; }
.row-actions { display: inline-flex; gap: 0.125rem; opacity: .7; transition: opacity .15s; }
tr:hover .row-actions { opacity: 1; }
.btn-icon-sm { width: 2rem; height: 2rem; padding: 0; }
.toggle { width: 1.75rem; height: 1.75rem; display: inline-grid; place-items: center; border-radius: calc(var(--radius) - 4px);
  border: 1px solid transparent; background: none; color: hsl(var(--muted-foreground)); cursor: pointer;
  transition: background-color .15s, transform .15s; font-size: 0.75rem; }
.toggle:hover { background-color: hsl(var(--accent)); color: hsl(var(--foreground)); }
.toggle[aria-expanded="true"] { background-color: hsl(var(--accent)); color: hsl(var(--foreground)); }
tr.detail > td { background-color: hsl(var(--muted) / 0.35); padding: 0; }
tr.detail:hover { background-color: transparent !important; }
.detail-box { padding: 1rem 1.25rem 1.25rem 3.75rem; }
.detail-title { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: hsl(var(--muted-foreground)); margin: 0 0 0.5rem; }
.detail-box .table-wrap { box-shadow: none; }
.detail-box .table th { background-color: hsl(var(--background)); }
dl.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.75rem 1.5rem; margin: 0 0 1rem; }
dl.kv dt { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
dl.kv dd { margin: 0.125rem 0 0; font-weight: 500; }
.dash { color: hsl(var(--muted-foreground) / 0.6); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0 0;
  font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }
.pager .pages { display: flex; align-items: center; gap: 0.5rem; }

/* Tiêu đề cột sắp xếp được */
.th-sort { display: inline-flex; align-items: center; gap: 0.25rem; color: inherit; text-decoration: none; white-space: nowrap;
  margin: 0 -0.375rem; padding: 0.25rem 0.375rem; border-radius: calc(var(--radius) - 4px); transition: background-color .15s, color .15s; }
.th-sort:hover { background-color: hsl(var(--accent)); color: hsl(var(--foreground)); text-decoration: none; }
.th-sort .icon { width: 0.875rem; height: 0.875rem; opacity: 0; transition: opacity .15s; }
.th-sort:hover .icon { opacity: .6; }
.th-sort.active { color: hsl(var(--foreground)); }
.th-sort.active .icon { opacity: 1; }
th.num .th-sort { flex-direction: row-reverse; }
[data-live-region].is-loading { opacity: .55; transition: opacity .15s; pointer-events: none; }

/* Ô chọn có tìm kiếm */
.combo { position: relative; }
.combo-list { position: absolute; left: 0; right: 0; top: calc(100% + 0.25rem); z-index: 30; max-height: 18rem; overflow-y: auto;
  background-color: hsl(var(--popover)); border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 0.25rem; min-width: 26rem; }
.combo-item { padding: 0.4375rem 0.625rem; border-radius: calc(var(--radius) - 4px); cursor: pointer; font-size: 0.875rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-item.active, .combo-item:hover { background-color: hsl(var(--accent)); }
.combo-item .code { font-family: ui-monospace, Consolas, monospace; font-size: 0.8125rem; }
.combo-empty { padding: 0.5rem 0.625rem; color: hsl(var(--muted-foreground)); font-size: 0.875rem; }

/* Bảng dòng hàng chứng từ */
.lines-editor .table td { padding: 0.375rem 0.5rem; }
.lines-editor .table th { padding: 0 0.5rem; }
.lines-editor .idx { width: 2.25rem; text-align: center; }
.lines-editor .prod-cell { min-width: 16rem; }
.lines-editor [data-f=qty] { width: 5.5rem; }
.lines-editor [data-f=price] { width: 7rem; }
.lines-editor [data-f=discount] { width: 5.5rem; }
.lines-editor [data-f=vat_percent] { width: 4.5rem; }
.lines-editor .select.sm { min-width: 5.5rem; }
.lines-editor .prod { display: flex; align-items: center; gap: 0.5rem; }
.lines-editor .prod .code { font-family: ui-monospace, Consolas, monospace; font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }
.input.sm, .select.sm { height: 2rem; font-size: 0.8125rem; padding-top: 0; padding-bottom: 0; }
.select.sm { min-width: 6rem; }
.num-input { text-align: right; font-variant-numeric: tabular-nums; width: 7.5rem; margin-left: auto; }
.lines-editor tr.promo td { background-color: hsl(var(--success-soft)); }
.stock-short { color: hsl(var(--destructive)) !important; font-weight: 600; }
.lines-add { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid hsl(var(--border)); }
.totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.75rem 1.5rem; padding: 1rem 1.5rem;
  border-bottom: 1px solid hsl(var(--border)); align-items: end; }
.totals > div { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }
.totals strong { font-size: 1rem; color: hsl(var(--foreground)); font-variant-numeric: tabular-nums; }
.totals .num-input { width: 100%; margin: 0; height: 2rem; }
.totals .grand strong { font-size: 1.375rem; }

/* Trạng thái trống */
.empty { text-align: center; padding: 3rem 1rem; }
.empty .empty-icon { width: 3rem; height: 3rem; margin: 0 auto 0.75rem; border-radius: 50%; display: grid; place-items: center;
  background-color: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.empty .empty-title { font-weight: 600; margin: 0; }
.empty .empty-text { color: hsl(var(--muted-foreground)); margin: 0.25rem 0 1rem; }

.badge .dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; margin-right: 0.375rem; }
.badge-soft-success { background-color: hsl(var(--success-soft)); color: hsl(var(--success)); }
.badge-soft-muted { background-color: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.badge-soft-warning { background-color: hsl(var(--warning-soft)); color: hsl(38 92% 35%); }

/* ---------- Form theo nhóm ---------- */
.form-layout { display: flex; flex-direction: column; gap: 1rem; max-width: 64rem; }
.form-section { display: grid; grid-template-columns: 15rem 1fr; gap: 1.5rem; padding: 1.5rem; }
.form-section + .form-section { border-top: 1px solid hsl(var(--border)); }
.form-section-head h3 { font-size: 0.9375rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.form-section-head p { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); margin: 0.25rem 0 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; align-content: start; }
.form-grid .span-2 { grid-column: 1 / -1; }
.form-grid .form-group { margin: 0; }
.req { color: hsl(var(--destructive)); }
.has-error .input, .has-error .select, .has-error .textarea { border-color: hsl(var(--destructive)); }
.has-error .label { color: hsl(var(--destructive)); }
.form-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 1rem 1.5rem;
  border-top: 1px solid hsl(var(--border)); background-color: hsl(var(--muted) / 0.35);
  border-radius: 0 0 var(--radius) var(--radius); }
.form-footer.sticky { position: sticky; bottom: 0; z-index: 5; background-color: hsl(var(--card));
  box-shadow: 0 -4px 12px -6px rgb(0 0 0 / 0.12); }
.check-row { display: flex; align-items: center; gap: 0.5rem; height: 2.25rem; }
ul.checklist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.5rem; }
ul.checklist label { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; cursor: pointer; }
@media (max-width: 900px) { .form-section { grid-template-columns: 1fr; gap: 1rem; } .form-grid { grid-template-columns: 1fr; } }

/* ---------- Khung thông báo tại chỗ (mẫu đã duyệt: viền trái 4px theo loại) ---------- */
.notice { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.875rem 1rem; margin-bottom: 1rem;
  border: 1px solid hsl(var(--border)); border-left-width: 4px; border-radius: var(--radius); background-color: hsl(var(--card)); }
.notice > .icon { margin-top: 0.125rem; }
.notice-body { flex: 1; min-width: 0; }
.notice-title { font-weight: 600; margin: 0; }
.notice-text { color: hsl(var(--muted-foreground)); margin: 0.125rem 0 0; }
.notice ul { margin: 0.375rem 0 0; padding-left: 1.125rem; color: hsl(var(--foreground)); }
.notice .close { background: none; border: 0; cursor: pointer; color: hsl(var(--muted-foreground)); padding: 0.125rem;
  border-radius: calc(var(--radius) - 4px); line-height: 0; }
.notice .close:hover { background-color: hsl(var(--accent)); color: hsl(var(--foreground)); }
.notice-error { border-left-color: hsl(var(--destructive)); background-color: hsl(var(--destructive-soft)); }
.notice-error > .icon, .notice-error .notice-title { color: hsl(var(--destructive)); }
.notice-info { border-left-color: hsl(var(--info)); background-color: hsl(var(--info-soft)); }
.notice-info > .icon { color: hsl(var(--info)); }
.notice-warning { border-left-color: hsl(var(--warning)); background-color: hsl(var(--warning-soft)); }
.notice-warning > .icon { color: hsl(38 92% 40%); }
.notice-success { border-left-color: hsl(var(--success)); background-color: hsl(var(--success-soft)); }
.notice-success > .icon, .notice-success .notice-title { color: hsl(var(--success)); }
.spin { animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Toast (dưới phải, tự ẩn ~3,5 s, có ×) ---------- */
#toasts { position: fixed; right: 1.25rem; bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; z-index: 100; }
.toast { display: flex; align-items: center; gap: 0.75rem; min-width: 20rem; max-width: 26rem; padding: 0.875rem 1rem;
  border: 1px solid hsl(var(--border)); border-radius: var(--radius); background-color: hsl(var(--background));
  box-shadow: var(--shadow-lg); animation: toast-in .2s ease-out; }
.toast .icon { color: hsl(var(--success)); }
.toast.error .icon { color: hsl(var(--destructive)); }
.toast .msg { flex: 1; font-weight: 500; }
.toast .close { background: none; border: 0; cursor: pointer; color: hsl(var(--muted-foreground)); line-height: 0; padding: 0.125rem;
  border-radius: calc(var(--radius) - 4px); }
.toast .close:hover { background-color: hsl(var(--accent)); color: hsl(var(--foreground)); }
.toast.out { opacity: 0; transform: translateY(0.5rem); transition: all .2s; }
@keyframes toast-in { from { opacity: 0; transform: translateY(0.5rem); } }

/* ---------- Hộp xác nhận ---------- */
dialog.dialog { padding: 0; }
dialog.dialog::backdrop { background-color: rgb(0 0 0 / 0.5); }
.dialog-body { padding: 1.5rem; }
.dialog .dialog-footer { margin-top: 1.25rem; }

/* ---------- Thống kê trang chủ ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.stat-card .stat-top { display: flex; align-items: center; justify-content: space-between; color: hsl(var(--muted-foreground)); }
.quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; }
.quick a { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; border: 1px solid hsl(var(--border));
  border-radius: var(--radius); color: hsl(var(--foreground)); background-color: hsl(var(--card)); transition: background-color .15s; }
.quick a:hover { background-color: hsl(var(--accent)); text-decoration: none; }
.quick .q-icon { width: 2.25rem; height: 2.25rem; border-radius: calc(var(--radius) - 2px); display: grid; place-items: center;
  background-color: hsl(var(--muted)); }
.quick .q-name { font-weight: 500; }
.quick .q-sub { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
.section-title { font-size: 0.9375rem; font-weight: 600; margin: 0 0 0.75rem; }

/* ---------- Ma trận quyền ---------- */
.perm-table th.c, .perm-table td.c { text-align: center; width: 5.5rem; }
.perm-table tr.group-row td { background-color: hsl(var(--muted) / 0.5); font-weight: 600; font-size: 0.8125rem; }

/* ---------- Đăng nhập ---------- */
.auth-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.auth-aside { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); padding: 2.5rem;
  display: flex; flex-direction: column; justify-content: space-between; }
.auth-aside .brand { display: flex; align-items: center; gap: 0.625rem; font-weight: 600; font-size: 1.0625rem; }
.auth-aside .brand .mark { width: 2rem; height: 2rem; border-radius: calc(var(--radius) - 2px);
  background-color: hsl(var(--primary-foreground)); color: hsl(var(--primary)); display: grid; place-items: center; }
.auth-aside blockquote { margin: 0; font-size: 1.125rem; line-height: 1.6; }
.auth-aside .muted { color: hsl(var(--primary-foreground) / 0.65); font-size: 0.875rem; margin-top: 0.5rem; }
.auth-main { display: grid; place-items: center; padding: 2rem; }
.auth-form { width: 100%; max-width: 22rem; }
.auth-form h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; margin: 0; }
.auth-form .lead { color: hsl(var(--muted-foreground)); margin: 0.375rem 0 1.5rem; }
@media (max-width: 900px) { .auth-page { grid-template-columns: 1fr; } .auth-aside { display: none; } }

/* ---------- Tiện ích ---------- */
.muted { color: hsl(var(--muted-foreground)); }
.nowrap { white-space: nowrap; }
.inline { display: inline; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.max-w-md { max-width: 32rem; }
.file-drop { border: 1px dashed hsl(var(--input)); border-radius: var(--radius); padding: 1.5rem; text-align: center;
  background-color: hsl(var(--muted) / 0.3); }
.file-drop input[type=file] { margin-top: 0.75rem; font-family: inherit; font-size: 0.875rem; }
ol.steps { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; }
pre.json { margin: 0; white-space: pre-wrap; font-size: 0.75rem; font-family: ui-monospace, Consolas, monospace;
  background-color: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) - 2px);
  padding: 0.5rem 0.75rem; max-height: 16rem; overflow: auto; }

@media (max-width: 900px) {
  /* Màn hình nhỏ: menu ẩn hẳn, mở bằng nút menu */
  .sidebar, .sidebar-collapsed .sidebar { display: flex; position: fixed; left: 0; top: 0; bottom: 0; width: 15.5rem;
    padding: 0.75rem; transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar-open .sidebar { transform: none; box-shadow: var(--shadow-lg); }
  .sidebar-collapsed .sidebar .sidebar-group-label, .sidebar-collapsed .sidebar .sidebar-link > span { display: initial; }
  .sidebar-collapsed .sidebar .sidebar-brand > div:not(.mark) { display: block; }
  .sidebar-collapsed .sidebar .sidebar-link { justify-content: flex-start; padding: 0.5rem 0.75rem; }
  .sidebar-collapsed.sidebar-open .main { margin-left: 0; }
  .content { padding: 1rem; }
}

/* Thị trường (GĐ3): bản đồ, ảnh, thống kê nhỏ */
.map-box { position: relative; isolation: isolate; height: 22rem; border-radius: calc(var(--radius) - 2px); overflow: hidden; background: hsl(var(--muted)); }
.map-empty { display: grid; place-items: center; height: 100%; color: hsl(var(--muted-foreground)); font-size: .875rem; }
.map-card { padding: .75rem; margin-bottom: 1rem; }
.map-card > summary { cursor: pointer; font-weight: 500; font-size: .875rem; padding: .25rem .25rem .75rem; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.stat-mini { display: flex; flex-direction: column; gap: .125rem; padding: .75rem 1rem; border: 1px solid hsl(var(--border)); border-radius: var(--radius);
  background: hsl(var(--card)); font-size: .8125rem; color: hsl(var(--muted-foreground)); }
.stat-mini strong { font-size: 1.125rem; color: hsl(var(--foreground)); font-variant-numeric: tabular-nums; }
.detail-grid { display: flex; flex-wrap: wrap; gap: 1rem 2rem; padding: .25rem 0; }
.detail-grid .kv { display: grid; grid-template-columns: 8rem 1fr; gap: .25rem .75rem; margin: 0; font-size: .875rem; }
.detail-grid .kv dt { color: hsl(var(--muted-foreground)); }
.detail-grid .kv dd { margin: 0; }
.thumbs { display: flex; gap: .5rem; flex-wrap: wrap; }
.thumbs img { width: 6rem; height: 6rem; object-fit: cover; border-radius: calc(var(--radius) - 2px); border: 1px solid hsl(var(--border)); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 1rem; }
.photo-grid figure { margin: 0; overflow: hidden; display: flex; flex-direction: column; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.photo-grid figcaption { display: flex; flex-direction: column; gap: .125rem; padding: .625rem .75rem; font-size: .8125rem; }
.photo-missing { aspect-ratio: 4 / 3; display: grid; place-items: center; text-align: center; padding: 1rem; background: hsl(var(--muted));
  color: hsl(var(--muted-foreground)); font-size: .8125rem; }

/* Khung khuyến mãi trên form đơn / hoá đơn (GĐ4b) */
.promo-panel { border-top: 1px solid hsl(var(--border)); padding: 1rem 1.5rem; }
.promo-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.promo-head p { margin: .125rem 0 0; }
.promo-panel .table td { vertical-align: top; }
.promo-panel input[readonly], .totals input[readonly] { background-color: hsl(var(--muted)); }

/* Bộ soạn KM: mức → phương án «hoặc» → món «và» */
.promo-level { border: 1px solid hsl(var(--border)); border-radius: var(--radius); margin-bottom: .875rem; }
.promo-level-head { display: flex; gap: .75rem; align-items: end; flex-wrap: wrap; padding: .75rem 1rem;
  border-bottom: 1px solid hsl(var(--border)); background-color: hsl(var(--muted) / .4); }
.promo-items td { vertical-align: middle; }
.promo-items .promo-tag { width: 3.5rem; }
.promo-items tr.promo-option-start:not(:first-child) td { border-top: 2px dashed hsl(var(--border)); }
.promo-join { font-size: .75rem; font-weight: 600; color: hsl(var(--muted-foreground)); text-transform: uppercase; }
.promo-join.or { color: hsl(var(--destructive)); }