/* ═══════════════════════════════════════════════════════════════════
   APP DESIGN SYSTEM — ported from QLBH3 (HE_THONG_DESIGN_QLBH3.html)
   Token-based, dark-mode aware, theme color configurable from /settings.
   KHÔNG hardcode hex trong template — luôn dùng var(--c-*).
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand (configurable qua /settings → inject inline override ở base.html) ── */
  --c-primary:        #2CB24A;
  --c-primary-hover:  #1E8C38;
  --c-primary-light:  #E8F7ED;
  --c-primary-text:   #ffffff;
  --c-gradient-primary: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-hover) 100%);
  --c-gradient-avatar:  linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-hover) 100%);

  /* ── Neutral scale ── */
  --c-n50:  #F7F8F7; --c-n100: #EDEFED; --c-n200: #D9DAD9;
  --c-n300: #C3C5C3; --c-n400: #9B9C9B; --c-n500: #666766;
  --c-n600: #4A4B4A; --c-n700: #333433; --c-n800: #222322; --c-n900: #111211;

  /* ── Surfaces ── */
  --c-bg:           #FFFFFF;
  --c-surface:      #F7F8F7;
  --c-bg-2:         #EEF4F0;  /* nền form sửa/thêm — hơi ngả xanh, tách khỏi card trắng */
  --c-page-bg:      #F8FAFC;
  --c-border:       #D9DAD9;
  --c-border-focus: color-mix(in srgb, var(--c-primary) 42%, transparent);
  --c-text:         #111211;
  --c-text-2:       #666766;
  --c-text-muted:   #9B9C9B;
  --c-sidebar-bg:   #1C2B1E;

  /* ── Semantic (cố định) ── */
  --c-ok-bg:   #E8F7ED; --c-ok-text:   #166534;
  --c-warn-bg: #FFF7ED; --c-warn-text: #9A3412;
  --c-err-bg:  #FEF2F2; --c-err-text:  #B91C1C;
  --c-info-bg: #EEF2FF; --c-info-text: #1E3A8A;

  /* ── Typography ── */
  --font-body: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --fz-floor:0px;  /* cỡ chữ tối thiểu (đặt theo thiết bị ở base.html); 0 = không ép */
  --fz-xs:max(12px,var(--fz-floor)); --fz-sm:max(13px,var(--fz-floor)); --fz-base:max(14px,var(--fz-floor)); --fz-md:max(16px,var(--fz-floor));
  --fz-lg:max(18px,var(--fz-floor)); --fz-xl:max(20px,var(--fz-floor)); --fz-2xl:max(26px,var(--fz-floor)); --fz-3xl:max(32px,var(--fz-floor));
  --lh-body:1.65; --lh-heading:1.25;

  /* ── Spacing (8px base) ── */
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:20px; --sp6:24px; --sp8:32px; --sp10:40px;

  /* ── Radius ── */
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:9999px;

  /* ── Shadow ── */
  --shadow-xs: 0 1px 3px rgba(0,0,0,.07);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);
  --shadow-xl: 0 16px 40px rgba(0,0,0,.14);

  --transition: 200ms ease;

  /* ── Button tokens ── */
  /* Chiều cao CHUẨN cho mọi ô form + nút = 40px (input/select/dropdown/nút đồng đều) */
  --btn-h:40px; --btn-px:16px; --btn-fz:var(--fz-sm); --btn-fw:600;
  --btn-h-sm:30px; --btn-px-sm:10px;        /* cỡ nhỏ: dùng trong bảng/dòng dày */
  --btn-h-lg:46px; --btn-px-lg:24px; --btn-fz-lg:var(--fz-md);
  --input-h:40px;

  /* ── Z-index ── */
  --z-sticky:5; --z-dropdown:100; --z-page-header:150;
  --z-modal:1000; --z-toast:2000; --z-lightbox:9000;

  --page-w: 1400px;
}

/* ── DARK MODE ── */
html[data-theme="dark"] {
  color-scheme: dark;
  --c-primary-light: color-mix(in srgb, var(--c-primary) 32%, var(--c-bg));
  --c-border-focus:  color-mix(in srgb, var(--c-primary) 55%, transparent);
  --c-n50:#1B2638; --c-n100:#1F2C42; --c-n200:#2A3A55; --c-n300:#3B4D6C;
  --c-n400:#607290; --c-n500:#8A99B5; --c-n600:#B0BCD3; --c-n700:#CCD5E5;
  --c-n800:#E2E8F2; --c-n900:#F1F5FB;
  --c-bg:#182234; --c-surface:#1F2A40;
  --c-bg-2:#212F47;  /* nền form sửa/thêm — sáng hơn card 1 bậc, nổi rõ trên nền tối */
  --c-page-bg:#0B1220; --c-border:#2D3B53;
  --c-text:#F1F5FB; --c-text-2:#CBD5E1; --c-text-muted:#94A3B8;
  --c-sidebar-bg:#0E1626;
  --c-input-bg:#0E1830;
  --c-ok-bg:rgba(74,222,128,.18); --c-ok-text:#86EFAC;
  --c-warn-bg:rgba(251,191,36,.22); --c-warn-text:#FCD34D;
  --c-err-bg:rgba(248,113,113,.22); --c-err-text:#FCA5A5;
  --c-info-bg:rgba(96,165,250,.22); --c-info-text:#93C5FD;
  --shadow-xs:0 1px 3px rgba(0,0,0,.40); --shadow-sm:0 2px 8px rgba(0,0,0,.50);
  --shadow-md:0 4px 16px rgba(0,0,0,.55); --shadow-lg:0 8px 24px rgba(0,0,0,.60);
  --shadow-xl:0 16px 40px rgba(0,0,0,.65);
}

/* ── RESET & BASE ── */
*,*::before,*::after { box-sizing:border-box; }
html { font-size:max(16px,var(--fz-floor,0px)); scrollbar-gutter:stable; }
/* Ép Be Vietnam Pro toàn bộ — kể cả monospace fallback */
html, body, button, input, select, textarea,
kbd, samp, tt, var { font-family: var(--font-body); }
body { margin:0; font-family:var(--font-body); font-size:var(--fz-base);
  line-height:var(--lh-body); color:var(--c-text); background:var(--c-page-bg);
  -webkit-font-smoothing:antialiased; overflow-x:clip; }
/* chặn tràn ngang toàn web (mobile) — bảng cần cuộn vẫn dùng .table-wrap riêng */
.app-main, .app-main-inner { max-width:100%; min-width:0; }
.card-header { flex-wrap:wrap; gap:6px; }
a { color:inherit; text-decoration:none; }
h1,h2,h3,h4,h5,h6 { margin:0; line-height:var(--lh-heading); color:var(--c-text); }
h1 { font-size:var(--fz-3xl); font-weight:700; }
h2 { font-size:var(--fz-2xl); font-weight:700; }
h3 { font-size:var(--fz-lg); font-weight:600; }
h4 { font-size:var(--fz-md); font-weight:600; }
.num, code, pre, .tabular { font-variant-numeric:tabular-nums; }

/* ═══ APP SHELL — top header nav ═══ */
.app-header { position:sticky; top:0; z-index:var(--z-page-header);
  background:var(--c-bg); border-bottom:1px solid var(--c-border); box-shadow:var(--shadow-xs); }
.app-header-inner { max-width:var(--page-w); margin:0 auto; height:60px;
  display:flex; align-items:center; gap:var(--sp4); padding:0 var(--sp6); }

.app-brand { display:flex; align-items:center; gap:var(--sp2); flex-shrink:0; }
.app-brand .dot { width:34px; height:34px; border-radius:var(--r-md);
  background:var(--c-gradient-primary); display:flex; align-items:center;
  justify-content:center; color:#fff; font-weight:800; font-size:max(15px,var(--fz-floor,0px)); box-shadow:var(--shadow-sm); }
.app-brand-logo { height:38px; max-width:150px; object-fit:contain; display:block; }
.app-brand-name { display:flex; flex-direction:column; line-height:1.1; }
.app-brand-name b { font-weight:700; font-size:max(15px,var(--fz-floor,0px)); color:var(--c-text); }
.app-brand-name small { font-size:max(10px,var(--fz-floor,0px)); font-weight:600; letter-spacing:.5px;
  text-transform:uppercase; color:var(--c-text-muted); margin-top:2px; }

.app-mainmenu { display:flex; align-items:center; gap:2px; flex:1; }
.menu-item, .menu-group { position:relative; }
.menu-link, .menu-trigger { display:flex; align-items:center; gap:6px; height:60px;
  padding:0 13px; font-size:var(--fz-sm); font-weight:600; color:var(--c-text-2);
  background:none; border:none; cursor:pointer; font-family:inherit;
  border-bottom:2.5px solid transparent; white-space:nowrap;
  transition:color var(--transition), border-color var(--transition); }
.menu-link .ico, .menu-trigger .ico { font-size:max(15px,var(--fz-floor,0px)); }
.menu-link:hover, .menu-trigger:hover { color:var(--c-text); }
.menu-link.active, .menu-group.is-active .menu-trigger {
  color:var(--c-primary); border-bottom-color:var(--c-primary); }
.menu-trigger .caret { font-size:max(9px,var(--fz-floor,0px)); opacity:.65; transition:transform var(--transition); }
.menu-group:hover .menu-trigger .caret { transform:rotate(180deg); }

.menu-dropdown { position:absolute; top:100%; left:0; min-width:212px;
  background:var(--c-bg); border:1px solid var(--c-border); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); padding:6px; opacity:0; visibility:hidden;
  transform:translateY(6px); z-index:var(--z-dropdown);
  transition:opacity var(--transition), transform var(--transition), visibility var(--transition); }
.menu-group:hover .menu-dropdown, .menu-group:focus-within .menu-dropdown {
  opacity:1; visibility:visible; transform:translateY(0); }
.menu-dropdown a { display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:var(--r-sm); font-size:var(--fz-sm); font-weight:500; color:var(--c-text-2);
  transition:background var(--transition), color var(--transition); }
.menu-dropdown a .ico { width:18px; text-align:center; }
.menu-dropdown a:hover { background:var(--c-n50); color:var(--c-text); }
.menu-dropdown a.active { background:var(--c-primary-light); color:var(--c-primary); font-weight:600; }

.app-header-actions { display:flex; align-items:center; gap:var(--sp2); flex-shrink:0; margin-left:auto; }
.menu-burger { display:none; width:44px; height:44px; border-radius:var(--r-md);
  background:transparent; border:none; color:var(--c-text);
  font-size:max(28px,var(--fz-floor,0px)); line-height:1; cursor:pointer; align-items:center; justify-content:center; }
.menu-burger:hover { background:var(--c-n100); }

.app-main { padding:var(--sp6) var(--sp6) var(--sp10);
  min-height:calc(100vh - 60px); background:var(--c-page-bg); }
.app-main-inner { max-width:var(--page-w); margin:0 auto; }

/* Topbar */
.app-topbar { display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--sp4); flex-wrap:wrap; margin-bottom:var(--sp6); }
.app-controls { display:flex; align-items:center; gap:var(--sp2); flex-wrap:wrap; }

/* Page header */
.page-title { font-size:var(--fz-2xl); font-weight:800; color:var(--c-text);
  letter-spacing:-.4px; margin:0 0 4px; line-height:var(--lh-heading); }
.page-subtitle { font-size:var(--fz-sm); color:var(--c-text-muted); margin:0;
  line-height:var(--lh-body); max-width:760px; }

/* Dark toggle + theme dots */
.dark-toggle { display:flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--c-bg); border:1px solid var(--c-border); border-radius:var(--r-pill);
  padding:6px 13px; font-size:var(--fz-xs); font-weight:600; color:var(--c-text-2);
  transition:background var(--transition); user-select:none; }
.dark-toggle:hover { background:var(--c-n50); }
.theme-dots { display:flex; gap:6px; align-items:center; }
.theme-dot { width:22px; height:22px; border-radius:50%; cursor:pointer;
  border:2px solid transparent; transition:transform .15s, border-color .15s; }
.theme-dot:hover { transform:scale(1.15); }
.theme-dot.active { border-color:var(--c-text); }

/* ═══ GEAR MENU (tài khoản + giao diện + hệ thống) ═══ */
.gear { position:relative; }
.gear-trigger { width:40px; height:40px; border-radius:var(--r-md); background:transparent;
  border:1px solid transparent; cursor:pointer; font-size:max(19px,var(--fz-floor,0px));
  line-height:1; display:inline-flex; align-items:center; justify-content:center;
  color:var(--c-text-2); transition:background var(--transition),border-color var(--transition); }
.gear-trigger:hover { background:var(--c-n50); }
.gear.open .gear-trigger, .gear-trigger.active { background:var(--c-primary-light); border-color:var(--c-primary-light); }
.gear-panel { position:absolute; top:calc(100% + 6px); right:0; min-width:240px;
  background:var(--c-bg); border:1px solid var(--c-border); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); padding:8px; z-index:var(--z-dropdown);
  opacity:0; visibility:hidden; transform:translateY(6px);
  transition:opacity var(--transition),transform var(--transition),visibility var(--transition); }
.gear.open .gear-panel { opacity:1; visibility:visible; transform:translateY(0); }
.gear-user { padding:6px 10px 10px; }
.gear-user-name { font-weight:700; font-size:var(--fz-sm); color:var(--c-text); }
.gear-user-role { font-size:var(--fz-xs); color:var(--c-text-muted); margin-top:2px; }
.gear-label { font-size:max(10px,var(--fz-floor,0px)); font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; color:var(--c-text-muted); padding:6px 10px 4px; }
.gear-theme { display:flex; gap:5px; padding:0 6px 4px; }
.gear-theme button { flex:1; padding:7px 4px; border:1px solid var(--c-border);
  background:var(--c-bg); border-radius:var(--r-sm); cursor:pointer; font-family:inherit;
  font-size:max(11px,var(--fz-floor,0px)); font-weight:600; color:var(--c-text-2); white-space:nowrap;
  transition:background var(--transition),border-color var(--transition),color var(--transition); }
.gear-theme button:hover { background:var(--c-n50); }
.gear-theme button.sel { background:var(--c-primary-light); border-color:var(--c-primary); color:var(--c-primary); }
.gear-divider { height:1px; background:var(--c-border); margin:6px 4px; }
.gear-link { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--r-sm);
  font-size:var(--fz-sm); font-weight:500; color:var(--c-text-2);
  transition:background var(--transition),color var(--transition); }
.gear-link .ico { width:18px; text-align:center; }
.gear-link:hover { background:var(--c-n50); color:var(--c-text); }
.gear-link.active { background:var(--c-primary-light); color:var(--c-primary); font-weight:600; }
.gear-logout { width:100%; display:flex; align-items:center; gap:8px; padding:9px 10px;
  border:none; background:transparent; border-radius:var(--r-sm); cursor:pointer; font-family:inherit;
  font-size:var(--fz-sm); font-weight:600; color:var(--c-err-text); text-align:left;
  transition:background var(--transition); }
.gear-logout:hover { background:var(--c-err-bg, rgba(220,38,38,.08)); }

/* ═══ BUTTON ═══ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:var(--btn-h); padding:0 var(--btn-px); border-radius:var(--r-md);
  font-family:inherit; font-size:var(--btn-fz); font-weight:var(--btn-fw);
  line-height:1; cursor:pointer; white-space:nowrap; border:none; outline:none;
  text-decoration:none;
  transition:background var(--transition),box-shadow var(--transition),opacity var(--transition),transform var(--transition); }
.btn:disabled, .btn.btn-disabled { opacity:.45; cursor:not-allowed; pointer-events:none; }
.btn-primary { background:var(--c-primary); color:var(--c-primary-text); box-shadow:var(--shadow-xs); }
.btn-primary:hover:not(:disabled) { background:var(--c-primary-hover); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.btn-primary-grad { background:var(--c-gradient-primary); color:var(--c-primary-text); box-shadow:var(--shadow-xs); }
.btn-primary-grad:hover:not(:disabled) { filter:brightness(1.08); box-shadow:var(--shadow-sm); }
.btn-secondary { background:var(--c-bg); color:var(--c-text); border:1px solid var(--c-border); box-shadow:var(--shadow-xs); }
.btn-secondary:hover:not(:disabled) { background:var(--c-n50); border-color:var(--c-n300); }
.btn-ghost { background:transparent; color:var(--c-text-2); border:1px solid transparent; }
.btn-ghost:hover:not(:disabled) { background:var(--c-n100); color:var(--c-text); }
.btn-danger { background:var(--c-err-bg); color:var(--c-err-text); border:1px solid rgba(185,28,28,.15); }
.btn-danger:hover:not(:disabled) { background:rgba(185,28,28,.12); }
.btn-outline { background:transparent; color:var(--c-primary); border:1.5px solid var(--c-primary); }
.btn-outline:hover:not(:disabled) { background:var(--c-primary-light); }
.btn-link { background:none; border:none; padding:0; color:var(--c-primary);
  font-weight:600; font-size:var(--fz-sm); cursor:pointer; }
.btn-link:hover { text-decoration:underline; }
.btn-sm { height:var(--btn-h-sm); padding:0 var(--btn-px-sm); font-size:var(--fz-xs); border-radius:var(--r-sm); }
.btn-lg { height:var(--btn-h-lg); padding:0 var(--btn-px-lg); font-size:var(--btn-fz-lg); border-radius:var(--r-lg); }
.btn-icon { width:var(--btn-h); height:var(--btn-h); padding:0; flex-shrink:0; }
.btn-icon.btn-sm { width:var(--btn-h-sm); height:var(--btn-h-sm); }
.btn-pill { border-radius:var(--r-pill) !important; }
.btn-block { width:100%; }

/* Loading spinner on button */
.btn.loading { position:relative; color:transparent !important; pointer-events:none; }
.btn.loading::after { content:''; position:absolute; width:14px; height:14px;
  border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%;
  animation:spin .7s linear infinite; top:calc(50% - 7px); left:calc(50% - 7px); }
.btn-ghost.loading::after, .btn-outline.loading::after, .btn-secondary.loading::after {
  border-color:rgba(0,0,0,.25); border-top-color:var(--c-primary); }
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══ BADGE ═══ */
.badge { display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 10px;
  border-radius:var(--r-pill); font-size:var(--fz-xs); font-weight:600; line-height:1;
  background:var(--c-primary-light); color:var(--c-primary); }
.badge-ok, .badge-green   { background:var(--c-ok-bg);   color:var(--c-ok-text); }
.badge-warn, .badge-yellow{ background:var(--c-warn-bg); color:var(--c-warn-text); }
.badge-error, .badge-red  { background:var(--c-err-bg);  color:var(--c-err-text); }
.badge-info, .badge-blue  { background:var(--c-info-bg); color:var(--c-info-text); }
.badge-muted, .badge-gray { background:var(--c-n100);    color:var(--c-text-2); }
.badge-dot::before { content:''; display:inline-block; width:6px; height:6px;
  border-radius:50%; background:currentColor; }

/* ═══ INPUT / FORM ═══ */
.input, .textarea, .select { display:block; width:100%; height:var(--input-h);
  padding:0 12px; border-radius:var(--r-md); border:1px solid var(--c-border);
  background:var(--c-bg); font-family:inherit; font-size:var(--fz-base); color:var(--c-text);
  transition:border-color var(--transition),box-shadow var(--transition); outline:none; }
.input::placeholder, .textarea::placeholder { color:var(--c-text-muted); }
.input:hover, .textarea:hover, .select:hover { border-color:var(--c-n300); }
.input:focus, .textarea:focus, .select:focus {
  border-color:var(--c-border-focus); box-shadow:0 0 0 3px var(--c-border-focus); }
.textarea { height:auto; padding:10px 12px; resize:vertical; min-height:90px; }
/* Ô nhập "nhỏ" giữ font/padding gọn NHƯNG chiều cao = chuẩn 40px (đồng bộ toàn web).
   Riêng textarea.input-sm có rule cao auto/grow riêng bên dưới nên không bị ảnh hưởng. */
.input-sm { height:var(--input-h); padding:0 10px; font-size:var(--fz-sm); border-radius:var(--r-sm); }
/* Đồng bộ chiều cao: trong form LỌC (GET) nút Tìm cao bằng ô input/dropdown (40px) */
form[method="get" i] .btn, form[method="get" i] .btn-sm { height:var(--input-h); }
/* Trong toolbar (thanh lọc) cũng ép mọi ô + nút về 40px cho thẳng hàng */
.toolbar .btn, .toolbar .btn-sm, .toolbar .input-sm, .toolbar .cs-sm .cs-trigger { height:var(--input-h); }
.label, .form-label { display:block; font-size:var(--fz-base); font-weight:600;
  color:var(--c-text); margin-bottom:5px; }
.form-label .required { color:var(--c-err-text); margin-left:3px; }
.form-group { margin-bottom:var(--sp4); }
.form-hint { display:block; margin-top:var(--sp1); font-size:var(--fz-xs);
  color:var(--c-text-2); line-height:var(--lh-body); }
.form-label-xs { font-size:var(--fz-xs); font-weight:600; color:var(--c-text-2); margin-bottom:3px; }

/* ═══ FORM ACTIONS — hàng nút chuẩn hoá ═══
   Quy ước: nút submit/thao tác của form luôn auto-width (vừa nội dung),
   canh PHẢI mặc định. Dùng --start để canh trái, --center để canh giữa.
   KHÔNG dùng full-width cho nút trừ trong thẻ hẹp (login) qua .btn-block. */
.form-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp2);
  margin-top:var(--sp4); justify-content:flex-end; }
.form-actions--start { justify-content:flex-start; }
.form-actions--center { justify-content:center; }
.form-actions--end { justify-content:flex-end; }
.form-actions .spacer { margin-left:auto; }

/* ═══ FORM GRID 6 — lưới 6 cột dùng chung cho form THÊM & form SỬA ═══
   Mỗi ô gắn .c1..c6 = chiếm bấy nhiêu cột. Hàng nút .form-actions canh phải, sát đáy. */
.form-grid6 { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr));
  gap:12px 16px; align-items:end; }   /* canh đáy → các ô input thẳng hàng dù nhãn 1/2 dòng */
.form-grid6 > .c1 { grid-column:span 1; }
.form-grid6 > .c2 { grid-column:span 2; }
.form-grid6 > .c3 { grid-column:span 3; }
.form-grid6 > .c4 { grid-column:span 4; }
.form-grid6 > .c6 { grid-column:span 6; }
.form-grid6 > .c5 { grid-column:span 5; }
.form-grid6 .form-actions { align-self:end; margin-top:0; }
.form-grid6 > .form-actions.is-footer { grid-column:1 / -1; align-self:auto;
  margin-top:6px; padding-top:14px; border-top:1px solid var(--c-border); }
@media (max-width:760px){ .form-grid6 { grid-template-columns:1fr; }
  .form-grid6 > .c1, .form-grid6 > .c2, .form-grid6 > .c3,
  .form-grid6 > .c4, .form-grid6 > .c5, .form-grid6 > .c6 { grid-column:1 / -1; } }

/* ═══ INLINE EDIT — panel form sửa, full-width nằm giữa 2 dòng bảng ═══ */
.inline-edit { width:100%; margin:0; padding:16px 18px;
  background:var(--c-n50); border-top:2px solid var(--c-primary); }
.inline-edit textarea.input-sm { height:auto; min-height:58px; padding:8px 10px; }

/* alias textarea: auto cao theo nội dung, không thanh cuộn, sàn = chiều cao ô input */
textarea.alias-grow { resize:none; overflow:hidden; line-height:1.45;
  height:var(--input-h); min-height:var(--input-h); padding:9px 12px; }
.inline-edit textarea.alias-grow.input-sm,
textarea.alias-grow.input-sm { height:var(--input-h); min-height:var(--input-h); padding:9px 10px; }
tr.edit-row > td { padding:0 !important; background:var(--c-n50); }
tr.edit-row[hidden] { display:none !important; }

/* ═══ COND BUILDER — chọn điều kiện không cần code (combobox) ═══ */
.cond-builder { background:transparent; border:none; border-top:1px solid var(--c-border);
  border-radius:0; padding:13px 0 0; margin-top:6px; }
.cond-title { font-size:var(--fz-sm); font-weight:600; color:var(--c-text-2); margin:0 0 11px; }
.cond-title .text-secondary { font-weight:400; }
.cond-grid { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:12px 14px; }
.cond-sublabel { display:block; font-size:var(--fz-xs); font-weight:600;
  color:var(--c-text-2); margin-bottom:6px; }

/* combobox tag-input */
.combo { position:relative; }
.combo-box { display:flex; flex-wrap:wrap; gap:5px; align-items:center;
  min-height:var(--input-h); padding:5px 10px; border:1px solid var(--c-border);
  border-radius:var(--r-md); background:var(--c-bg); cursor:text; }
.combo-box:hover { border-color:var(--c-n300); }
.combo-box:focus-within { border-color:var(--c-border-focus);
  box-shadow:0 0 0 3px var(--c-border-focus); }
/* input con không tự vẽ glow xanh — chỉ .combo-box mới hiện viền focus */
.combo-input:focus, .combo-input:focus-visible { box-shadow:none !important; border-color:transparent !important; }
.combo-tag { display:inline-flex; align-items:center; gap:4px; padding:2px 4px 2px 9px;
  border-radius:999px; font-size:var(--fz-xs); font-weight:600; line-height:1.6;
  background:color-mix(in srgb, var(--c-primary) 14%, transparent);
  color:var(--c-primary-hover); }
.combo-x { border:none; background:none; cursor:pointer; font-size:max(15px,var(--fz-floor,0px));
  line-height:1; color:inherit; padding:0 2px; opacity:.65; }
.combo-x:hover { opacity:1; }
.combo-input { flex:1; min-width:84px; border:none; outline:none; background:none;
  font-size:var(--fz-sm); color:var(--c-text); padding:3px 2px; }
.combo-pop { position:absolute; z-index:30; left:0; right:0; top:calc(100% + 3px);
  max-height:212px; overflow-y:auto; background:var(--c-bg); border:1px solid var(--c-border);
  border-radius:var(--r-sm); box-shadow:0 8px 24px rgba(0,0,0,.18); padding:4px;
  scrollbar-width:thin; scrollbar-color:var(--c-n300) transparent; }
.combo-opt { display:flex; align-items:baseline; gap:8px; padding:6px 9px;
  border-radius:var(--r-sm); cursor:pointer; font-size:var(--fz-sm); }
.combo-opt:hover { background:color-mix(in srgb, var(--c-primary) 12%, transparent); }
.combo-opt b { font-weight:600; }
@media (max-width:980px){ .cond-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:760px){ .cond-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ═══ KEBAB — menu thao tác dạng 3 chấm dọc ═══ */
.kebab { position:relative; display:inline-block; }
.kebab-btn { display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; padding:0; border-radius:var(--r-sm);
  background:transparent; border:1px solid transparent; color:var(--c-text-2);
  font-size:max(18px,var(--fz-floor,0px)); line-height:1; cursor:pointer; transition:background var(--transition); }
.kebab-btn:hover { background:var(--c-n100); color:var(--c-text); }
.kebab-menu { position:absolute; right:0; top:calc(100% + 4px); z-index:var(--z-dropdown);
  min-width:168px; padding:5px; display:flex; flex-direction:column; gap:1px;
  background:var(--c-bg); border:1px solid var(--c-border); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg); text-align:left; }
.kebab-menu[hidden] { display:none; }
.kebab-menu form { margin:0; }
.kebab-item { display:flex; align-items:center; gap:9px; width:100%;
  padding:8px 10px; border:none; background:transparent; border-radius:var(--r-sm);
  font-family:inherit; font-size:var(--fz-sm); font-weight:500; color:var(--c-text);
  text-align:left; cursor:pointer; }
.kebab-item:hover { background:var(--c-n50); }
.kebab-item.is-danger { color:var(--c-err-text); }
.kebab-item.is-danger:hover { background:var(--c-err-bg); }

.select-wrapper { position:relative; }
.select-wrapper::after { content:'▾'; position:absolute; right:14px; top:50%;
  transform:translateY(-50%); color:var(--c-text-muted); pointer-events:none; font-size:max(13px,var(--fz-floor,0px)); }

/* Dropdown / select ăn theo theme color */
.select, select { accent-color:var(--c-primary); }
.select option, select option { background:var(--c-bg); color:var(--c-text); }
.select option:checked, select option:checked,
.select option:hover, select option:hover {
  background:var(--c-primary); color:var(--c-primary-text); }

input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color:var(--c-primary); }
input[type="checkbox"], input[type="radio"] { width:16px; height:16px; cursor:pointer; }

/* ═══ CUSTOM SELECT (thay native <select> để dropdown ăn theo theme) ═══ */
select.cs-native { position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; border:0 !important; opacity:0 !important;
  overflow:hidden; clip:rect(0 0 0 0); pointer-events:none; }
.select-wrapper:has(.cs)::after { display:none; }
.cs { position:relative; display:inline-block; min-width:170px; max-width:100%; vertical-align:middle; }
.cs.cs-sm { min-width:120px; }
.cs-trigger { display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; height:var(--input-h); padding:0 12px; border:1px solid var(--c-border);
  border-radius:var(--r-md); background:var(--c-bg); color:var(--c-text); font-family:inherit;
  font-size:var(--fz-base); cursor:pointer; text-align:left; line-height:1;
  transition:border-color var(--transition), box-shadow var(--transition); }
.cs-sm .cs-trigger { height:var(--input-h); padding:0 10px; font-size:var(--fz-sm); border-radius:var(--r-sm); }
.cs-trigger:hover { border-color:var(--c-n300); }
.cs.open .cs-trigger, .cs-trigger:focus-visible { outline:none;
  border-color:var(--c-border-focus); box-shadow:0 0 0 3px var(--c-border-focus); }
.cs-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.cs-caret { flex-shrink:0; font-size:max(10px,var(--fz-floor,0px)); color:var(--c-text-muted); transition:transform var(--transition); }
.cs.open .cs-caret { transform:rotate(180deg); }
.cs-panel { position:absolute; top:calc(100% + 4px); left:0; right:auto;
  min-width:100%; width:max-content; max-width:min(360px, 88vw);
  z-index:var(--z-dropdown); background:var(--c-bg); border:1px solid var(--c-border);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:5px; max-height:300px;
  overflow-y:auto; overflow-x:hidden; display:none;
  scrollbar-width:thin; scrollbar-color:var(--c-n300) transparent; }
.cs-panel::-webkit-scrollbar { width:8px; }
.cs-panel::-webkit-scrollbar-track { background:transparent; }
.cs-panel::-webkit-scrollbar-thumb { background:var(--c-n300); border-radius:99px;
  border:2px solid var(--c-bg); background-clip:padding-box; }
.cs-panel::-webkit-scrollbar-thumb:hover { background:var(--c-n400); background-clip:padding-box; border:2px solid var(--c-bg); }
.cs.open .cs-panel { display:block; }
.cs-panel.cs-up { top:auto; bottom:calc(100% + 4px); }
.cs-option { padding:8px 11px; border-radius:var(--r-sm); font-size:var(--fz-sm); color:var(--c-text);
  cursor:pointer; line-height:1.4; overflow-wrap:anywhere; word-break:break-word;
  transition:background var(--transition), color var(--transition); }
.cs-option.hl { background:var(--c-primary-light); color:var(--c-primary); }
.cs-option.sel { background:var(--c-primary); color:var(--c-primary-text); font-weight:600; }
.cs-option.sel.hl { background:var(--c-primary-hover); color:var(--c-primary-text); }
.cs-option.cs-disabled { opacity:.45; cursor:not-allowed; }
.cs-option.cs-disabled.hl { background:transparent; color:var(--c-text); }

/* Focus form ăn theo theme — gỡ viền xanh mặc định của trình duyệt */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):focus-visible,
select:focus-visible, textarea:focus-visible {
  outline:none; border-color:var(--c-border-focus);
  box-shadow:0 0 0 3px var(--c-border-focus); }
input[type="color"] { -webkit-appearance:none; appearance:none; border:1px solid var(--c-border);
  border-radius:var(--r-md); cursor:pointer; padding:0; background:var(--c-bg); }
input[type="color"]::-webkit-color-swatch-wrapper { padding:3px; }
input[type="color"]::-webkit-color-swatch { border:none; border-radius:var(--r-sm); }

/* ═══ CARD & SECTION ═══ */
.card { background:var(--c-bg); border:1px solid var(--c-border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:var(--sp5);
  transition:box-shadow var(--transition),transform var(--transition); }
.card.flush { padding:0; overflow:hidden; }
.card-hover:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.card-header { display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp2); margin-bottom:var(--sp3); }
.card-title { font-size:var(--fz-md); font-weight:700; color:var(--c-text); line-height:var(--lh-heading); }
.section { background:var(--c-bg); border:1px solid var(--c-border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:var(--sp5) var(--sp6); }
.section + .section { margin-top:var(--sp4); }
.section-hdr { display:flex; align-items:center; gap:10px; margin-bottom:var(--sp5); }
.section-title { font-size:var(--fz-lg); font-weight:700; color:var(--c-text); }
.divider { border:none; border-top:1px solid var(--c-border); margin:var(--sp5) 0; height:0; }

/* ═══ EDIT PANEL — khung form sửa/thêm theo-từng-ô (catalog + SmartImport) ═══
   Nổi bật, tương phản rõ với hàng bảng + nền trang nhờ:
   nền khác tông (--c-bg-2), viền trái màu thương hiệu, đổ bóng nhẹ, đầu đề. */
.edit-panel { position:relative; background:var(--c-bg-2);
  border:1px solid var(--c-border); border-left:3px solid var(--c-primary);
  border-radius:var(--r-md); box-shadow:var(--shadow-md);
  padding:14px 16px 16px; }
.edit-panel-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.edit-panel-title { font-size:var(--fz-sm); font-weight:700; color:var(--c-text);
  display:flex; align-items:center; gap:7px; }
.edit-panel-title .ep-ico { width:24px; height:24px; border-radius:var(--r-sm);
  background:var(--c-primary-light); color:var(--c-primary);
  display:inline-flex; align-items:center; justify-content:center; font-size:14px; }
.edit-panel-sub { font-size:var(--fz-xs); color:var(--c-text-2); }

/* Lưới 7 cột: 1 ô = nhãn nhỏ trên + input dưới, canh đáy để input thẳng hàng. */
.cat-edit-grid { display:grid; gap:10px 12px; align-items:end;
  grid-template-columns:repeat(7, minmax(0,1fr)); }
.cat-edit-grid .input { min-width:0; width:100%; }
.cat-edit-grid .form-group { display:flex; flex-direction:column;
  justify-content:flex-end; margin:0; }
.cat-edit-grid .cat-edit-actions { grid-column:span 2; display:flex;
  justify-content:flex-end; align-items:flex-end; gap:8px; }
@media (max-width:1100px) {
  .cat-edit-grid { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .cat-edit-grid .cat-edit-actions { grid-column:1 / -1; }
}
@media (max-width:560px) {
  .cat-edit-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ═══ STAT CARD ═══ */
.stat-cards { display:flex; flex-wrap:wrap; gap:var(--sp3); }
.stat-card { flex:1 1 180px; background:var(--c-bg); border:1px solid var(--c-border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:var(--sp5); }
.stat-card-label, .stat-label { font-size:var(--fz-sm); color:var(--c-text-2); line-height:1.4; }
.stat-card-val, .stat-value { font-size:var(--fz-2xl); font-weight:800; line-height:1.1;
  color:var(--c-primary); margin-top:6px; }
.stat-card-note, .stat-sub { font-size:var(--fz-xs); color:var(--c-text-muted); margin-top:var(--sp1); line-height:1.4; }

/* Feature card (legacy home) */
.feature-card { background:var(--c-bg); border:1px solid var(--c-border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:var(--sp5);
  transition:all var(--transition); }
.feature-card:hover { box-shadow:var(--shadow-md); border-color:var(--c-primary-light); }
.feature-icon { width:42px; height:42px; background:var(--c-primary-light);
  border-radius:var(--r-md); display:flex; align-items:center; justify-content:center;
  font-size:max(20px,var(--fz-floor,0px)); margin-bottom:var(--sp3); }

/* ═══ TABLE ═══ */
.table-wrap { border:1px solid var(--c-border); border-radius:var(--r-lg);
  overflow-x:auto; background:var(--c-bg); box-shadow:var(--shadow-sm);
  scrollbar-width:thin; }
.table-wrap.flush { border:none; box-shadow:none; }
.table, .table-wrap table { width:100%; border-collapse:collapse; font-size:var(--fz-sm); }
.table-wrap thead, .table thead { background:var(--c-surface); }
.table th, .table-wrap th { text-align:left; padding:var(--sp3) var(--sp4);
  font-size:var(--fz-xs); font-weight:700; color:var(--c-text-2);
  text-transform:uppercase; letter-spacing:.5px; border-bottom:1px solid var(--c-border); }
.table td, .table-wrap td { padding:var(--sp3) var(--sp4);
  border-bottom:1px solid var(--c-n100); vertical-align:top; line-height:var(--lh-body); color:var(--c-text); }
.table-wrap tr:last-child td, .table tr:last-child td { border-bottom:none; }
.table-wrap tbody tr:hover td, .table tbody tr:hover td { background:var(--c-surface); }
.table .num, .table-wrap .num { text-align:right; font-variant-numeric:tabular-nums; }
.row-dim { opacity:.5; }

/* ═══ PAGER — biến thể gom cụm, căn phải (đi kèm .pager gốc) ═══ */
.pager.pager--right { justify-content:flex-end; gap:14px; }
.pager-nav { display:flex; align-items:center; gap:6px; }

/* ═══ DISCLOSURE — <details> với summary là 1 nút (dùng chung toàn web) ═══ */
details.disclosure > summary { list-style:none; width:max-content; max-width:100%; cursor:pointer; user-select:none; }
details.disclosure > summary::-webkit-details-marker { display:none; }
details.disclosure > summary::marker { content:""; }
.disclosure-ico { display:inline-block; font-size:max(16px,var(--fz-floor,0px)); line-height:0; font-weight:700;
  transition:transform var(--transition); }
details.disclosure[open] > summary .disclosure-ico { transform:rotate(45deg); }
.disclosure-chip { background:rgba(255,255,255,.22); padding:1px 9px; border-radius:var(--r-pill);
  font-size:var(--fz-xs); font-weight:600; }

/* Ô tìm kiếm trong .toolbar — rộng vừa phải, KHÔNG giãn hết hàng */
.toolbar-search { flex:0 1 280px; min-width:170px; max-width:100%; }

/* ═══ CARDS-ALWAYS — bảng nhiều cột → LƯỚI THẺ ở MỌI bề rộng (kể cả PC) ═══
   Mỗi <td> cần data-label="Nhãn"; ô thao tác dùng .td-actions; hàng sửa .edit-row #}
   Tự co: PC nhiều thẻ/hàng dùng hết bề ngang, mobile về 1 thẻ.                  */
.cards-always { display:block; width:100%; }
.cards-always thead { display:none; }
.cards-always tbody { display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(min(320px,100%), 1fr)); }
.cards-always tr { display:block; background:var(--c-bg); border:1px solid var(--c-border);
  border-radius:var(--r-md); padding:11px 14px; }
.cards-always tr.row-dim { opacity:.55; }
.cards-always td { display:block; width:auto; border:none; padding:3px 0; text-align:left; white-space:normal; overflow-wrap:anywhere; }
.cards-always td.num { text-align:left; }
.cards-always td[data-label]::before { content:attr(data-label); display:block; font-size:max(10px,var(--fz-floor,0px));
  font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--c-text-muted); margin-bottom:1px; }
.cards-always .td-actions { margin-top:8px; padding-top:9px; border-top:1px dashed var(--c-border); }
/* hàng "sửa" (toggle) trải hết chiều rộng lưới, không thành thẻ */
.cards-always tr.edit-row { grid-column:1 / -1; background:transparent; border:none; padding:0; }
.cards-always tr.edit-row[hidden] { display:none; }
/* bỏ khung wrap khi chứa lưới thẻ */
.table-wrap:has(> .cards-always) { border:none; box-shadow:none; background:transparent; overflow:visible; }

/* ═══ ALERT ═══ */
.alert { display:flex; gap:10px; padding:12px 14px; border-radius:var(--r-md);
  font-size:var(--fz-sm); line-height:1.5; margin-bottom:var(--sp4); border:1px solid transparent; }
.alert .alert-icon { font-size:max(18px,var(--fz-floor,0px)); flex-shrink:0; margin-top:1px; }
.alert .alert-body { flex:1; }
.alert .alert-title { font-weight:700; margin-bottom:2px; }
.alert-info, .alert-blue { background:var(--c-primary-light); color:var(--c-primary); }
.alert-ok, .alert-success { background:var(--c-ok-bg); color:var(--c-ok-text); }
.alert-warn, .alert-warning { background:var(--c-warn-bg); color:var(--c-warn-text); }
.alert-error { background:var(--c-err-bg); color:var(--c-err-text); }

/* ═══ TAB BAR ═══ */
.tab-bar { display:flex; border-bottom:1.5px solid var(--c-border); gap:2px; overflow-x:auto; }
.tab-btn { padding:9px 14px; font-size:var(--fz-sm); font-weight:600; font-family:inherit;
  background:none; border:none; border-bottom:2.5px solid transparent; margin-bottom:-1.5px;
  cursor:pointer; white-space:nowrap; color:var(--c-text-2);
  transition:color var(--transition),border-color var(--transition); }
.tab-btn:hover { color:var(--c-text); }
.tab-btn--active { color:var(--c-primary); font-weight:700; border-bottom-color:var(--c-primary); }
.tab-count { display:inline-flex; align-items:center; justify-content:center; min-width:18px;
  height:18px; padding:0 5px; border-radius:var(--r-pill); font-size:var(--fz-xs);
  font-weight:700; background:var(--c-n100); color:var(--c-text-2); margin-left:5px; }
.tab-btn--active .tab-count { background:var(--c-primary-light); color:var(--c-primary); }

/* ═══ SEGMENT ═══ */
.seg-group { display:inline-flex; border:1px solid var(--c-border); border-radius:var(--r-md); overflow:hidden; }
.seg-btn { padding:7px 14px; font-size:var(--fz-sm); font-weight:600; font-family:inherit;
  cursor:pointer; border:none; background:var(--c-bg); color:var(--c-text);
  transition:background var(--transition),color var(--transition); }
.seg-btn:hover { background:var(--c-n50); }
.seg-btn--active { background:var(--c-primary); color:#fff; }
.seg-btn--active:hover { background:var(--c-primary-hover); }

/* ═══ AVATAR ═══ */
.avatar { display:inline-flex; align-items:center; justify-content:center; border-radius:50%;
  font-weight:700; flex-shrink:0; user-select:none; color:#fff; }
.avatar-sm { width:32px; height:32px; font-size:var(--fz-xs); }
.avatar-md { width:38px; height:38px; font-size:var(--fz-base); }
.avatar-lg { width:56px; height:56px; font-size:var(--fz-xl); border-radius:var(--r-md); }
.avatar-primary { background:var(--c-gradient-avatar); }

/* ═══ PAGER ═══ */
.pager { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:var(--sp2); padding:10px 0; border-top:1px solid var(--c-n100); margin-top:var(--sp3); }
.pager-info { font-size:var(--fz-xs); color:var(--c-text-muted); }
.pager-btns { display:flex; align-items:center; gap:6px; }
.pager-btn { padding:5px 14px; font-size:var(--fz-sm); font-family:inherit; border-radius:var(--r-sm);
  border:1px solid var(--c-border); background:var(--c-bg); color:var(--c-text); cursor:pointer;
  transition:background var(--transition),border-color var(--transition); }
.pager-btn:disabled { background:var(--c-n100); color:var(--c-text-muted); cursor:not-allowed; }
.pager-btn:not(:disabled):hover { background:var(--c-n50); border-color:var(--c-n300); }
.pager-page { font-size:var(--fz-sm); color:var(--c-text); padding:0 4px; user-select:none; }

/* ═══ INFO GRID ═══ */
.info-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr)); gap:14px 24px; }
.info-row-label { font-size:var(--fz-base); font-weight:700; color:var(--c-text-muted); margin-bottom:3px; }
.info-row-val { font-size:var(--fz-sm); color:var(--c-text); line-height:1.5; }

/* ═══ TOOLBAR / ACCORDION / CODE ═══ */
.toolbar { display:flex; flex-wrap:wrap; gap:var(--sp2); align-items:center; margin-bottom:var(--sp4); }
details.card > summary, details.section > summary { cursor:pointer; user-select:none; list-style:none;
  font-weight:700; display:flex; align-items:center; gap:var(--sp2); }
details > summary::-webkit-details-marker { display:none; }
details.card > summary::before, details.section > summary::before {
  content:'+'; color:var(--c-primary); font-weight:700; font-size:max(18px,var(--fz-floor,0px)); line-height:1;
  transition:transform var(--transition); }
details.card[open] > summary::before, details.section[open] > summary::before { transform:rotate(45deg); }
pre.code { white-space:pre-wrap; word-break:break-word; font-size:max(12.5px,var(--fz-floor,0px));
  background:var(--c-surface); padding:var(--sp3); border-radius:var(--r-md);
  color:var(--c-text); line-height:1.5; }
code, code.inline { background:var(--c-primary-light); color:var(--c-primary);
  padding:1px 6px; border-radius:4px; font-size:max(12px,var(--fz-floor,0px)); }

/* ═══ TOAST ═══ */
#toast-stack { position:fixed; top:20px; right:20px; z-index:var(--z-toast);
  display:flex; flex-direction:column; gap:8px; max-width:400px; }
.toast { display:flex; gap:10px; align-items:flex-start; padding:12px 16px;
  border-radius:var(--r-md); box-shadow:var(--shadow-lg); font-size:max(14px,var(--fz-floor,0px));
  background:var(--c-bg); color:var(--c-text); border-left:4px solid var(--c-primary);
  animation:toast-in 200ms ease-out; }
.toast.error { border-left-color:var(--c-err-text); }
.toast.info  { border-left-color:var(--c-info-text); }
@keyframes toast-in { from { transform:translateX(120%); } to { transform:translateX(0); } }
@keyframes toast-out { to { opacity:0; transform:translateX(40px); } }

/* ═══ MODAL ═══ */
#modal-bg { display:none; position:fixed; inset:0; background:rgba(15,23,42,.5);
  z-index:var(--z-modal); align-items:center; justify-content:center; }
#modal-bg.active { display:flex; }
#modal-box { background:var(--c-bg); border-radius:var(--r-lg); padding:24px;
  max-width:480px; width:90%; box-shadow:var(--shadow-xl); }
#modal-title { font-size:max(17px,var(--fz-floor,0px)); font-weight:700; margin-bottom:10px; color:var(--c-text); }
#modal-body { font-size:max(14px,var(--fz-floor,0px)); color:var(--c-text-2); margin-bottom:20px; line-height:1.6; }
#modal-actions { display:flex; gap:8px; justify-content:flex-end; }

/* ═══ BULK BAR ═══ */
.bulk-bar { display:none; position:sticky; top:0; z-index:var(--z-sticky);
  align-items:center; gap:12px; padding:10px 16px; margin-bottom:12px;
  background:var(--c-primary-light); border:1.5px solid var(--c-primary);
  border-radius:var(--r-md); box-shadow:var(--shadow-sm); font-size:max(14px,var(--fz-floor,0px)); }
.bulk-bar.active { display:flex; }
.bulk-bar .bulk-count { color:var(--c-primary); font-weight:800; }
.bulk-check, .bulk-master { accent-color:var(--c-primary); cursor:pointer; }

/* ═══ UTILITY u-* ═══ */
.u-muted { color:var(--c-text-muted) !important; }
.u-text-2 { color:var(--c-text-2) !important; }
.u-primary { color:var(--c-primary) !important; }
.u-err { color:var(--c-err-text) !important; }
.u-warn { color:var(--c-warn-text) !important; }
.u-ok { color:var(--c-ok-text) !important; }
.text-secondary { color:var(--c-text-2); }
.text-muted { color:var(--c-text-muted); }
.u-fz-xs { font-size:var(--fz-xs); } .u-fz-sm { font-size:var(--fz-sm); }
.u-fz-base { font-size:var(--fz-base); } .u-fz-md { font-size:var(--fz-md); }
.u-fz-lg { font-size:var(--fz-lg); } .u-fz-xl { font-size:var(--fz-xl); }
.u-fw-medium { font-weight:500; } .u-fw-semibold { font-weight:600; }
.u-fw-bold { font-weight:700; } .u-fw-800 { font-weight:800; }
.u-truncate, .truncate-1 { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.u-badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px;
  border-radius:var(--r-pill); font-size:var(--fz-xs); font-weight:600; }
.u-badge-ok   { background:var(--c-ok-bg);   color:var(--c-ok-text); }
.u-badge-warn { background:var(--c-warn-bg);  color:var(--c-warn-text); }
.u-badge-err  { background:var(--c-err-bg);   color:var(--c-err-text); }
.u-badge-info { background:var(--c-primary-light); color:var(--c-primary); }
.u-badge-muted{ background:var(--c-n100);     color:var(--c-text-2); }

/* layout helpers (thay Tailwind dần) */
.u-flex { display:flex; } .u-flex-col { flex-direction:column; }
.u-items-center { align-items:center; } .u-items-start { align-items:flex-start; }
.u-justify-between { justify-content:space-between; }
.u-flex-1 { flex:1; } .u-shrink-0 { flex-shrink:0; } .u-flex-wrap { flex-wrap:wrap; }
.u-gap-1 { gap:var(--sp1); } .u-gap-2 { gap:var(--sp2); } .u-gap-3 { gap:var(--sp3); } .u-gap-4 { gap:var(--sp4); }
.u-items-end { align-items:flex-end; }
.u-gap-5 { gap:var(--sp5); } .u-gap-6 { gap:var(--sp6); }
.u-grid { display:grid; }
.u-grid-1 { grid-template-columns:1fr; }
.u-grid-2 { grid-template-columns:repeat(2,1fr); }
.u-grid-3 { grid-template-columns:repeat(3,1fr); }
.u-grid-4 { grid-template-columns:repeat(4,1fr); }
.u-grid-5 { grid-template-columns:repeat(5,1fr); }
.u-grid-auto { grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr)); }
/* item lưới/flex co lại được → chữ dài/truncate không đẩy tràn ngang */
.u-grid > *, .u-flex-1 { min-width:0; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:var(--sp4) var(--sp5); align-items:end; }
.u-maxw-prose { max-width:760px; }
.u-col-span-2 { grid-column:span 2; }
.u-col-span-3 { grid-column:span 3; }
.u-space-y-2 > * + * { margin-top:var(--sp2); }
.u-space-y-3 > * + * { margin-top:var(--sp3); }
.u-mt-1 { margin-top:var(--sp1); } .u-mt-2 { margin-top:var(--sp2); } .u-mt-3 { margin-top:var(--sp3); } .u-mt-4 { margin-top:var(--sp4); }
.u-mt-5 { margin-top:var(--sp5); } .u-mt-6 { margin-top:var(--sp6); }
.u-mb-1 { margin-bottom:var(--sp1); } .u-mb-2 { margin-bottom:var(--sp2); } .u-mb-3 { margin-bottom:var(--sp3); } .u-mb-4 { margin-bottom:var(--sp4); }
.u-mb-5 { margin-bottom:var(--sp5); } .u-mb-6 { margin-bottom:var(--sp6); } .u-mb-8 { margin-bottom:var(--sp8); }
.u-w-full { width:100%; } .u-text-center { text-align:center; } .u-text-right { text-align:right; }

/* ═══ MOBILE ═══ */
@media (max-width:1024px) {
  .u-grid-5 { grid-template-columns:repeat(3,1fr); }
  .u-grid-4 { grid-template-columns:repeat(2,1fr); }
  .u-grid-3 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px) {
  .app-header-inner { gap:var(--sp2); padding:0 var(--sp4); }
  .app-brand-name small { display:none; }
  .menu-burger { display:inline-flex; }
  /* Menu mobile: phủ TOÀN MÀN HÌNH dưới header */
  .app-mainmenu { display:none; position:fixed; top:60px; left:0; right:0; bottom:0;
    padding:12px; background:var(--c-bg); overflow-y:auto;
    border-top:1px solid var(--c-border); box-shadow:var(--shadow-lg); z-index:100; }
  /* 2 cột LIỀN MẠCH: chảy từ trên xuống dưới rồi sang phải, không hở khoảng */
  .app-mainmenu.open { display:block; column-count:2; column-gap:10px; }
  .app-mainmenu.open > .menu-item,
  .app-mainmenu.open > .menu-group {
    break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 10px; }
  .menu-link, .menu-trigger { height:auto; padding:11px 14px; width:100%;
    justify-content:flex-start; border-bottom:none; border-radius:var(--r-sm);
    background:var(--c-surface); }
  .menu-link.active, .menu-group.is-active .menu-trigger {
    background:var(--c-primary-light); border-bottom:none; }
  .menu-group .menu-trigger .caret { display:none; }   /* mobile: nhóm luôn mở, ẩn mũi tên */
  .menu-dropdown { position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border:none; padding:4px 0 2px 10px; min-width:0; }
  .app-main { padding:var(--sp5) var(--sp4) var(--sp8); }
}
@media (max-width:540px) {
  .app-main { padding:var(--sp4) 12px var(--sp8); }
  .u-grid-2, .u-grid-3, .u-grid-4, .u-grid-5 { grid-template-columns:1fr; }
  .u-col-span-2, .u-col-span-3 { grid-column:auto; }
  .page-title { font-size:var(--fz-xl); }
}

/* ═══ MOBILE CLASS DÙNG CHUNG (toàn web) ═══
   .table-cards  : bảng tự chuyển thành thẻ xếp dọc (mỗi <td> cần data-label="Nhãn")
   .td-actions   : ô chứa nút thao tác — tách xuống đáy thẻ
   .table-wrap.flush-m : bỏ khung wrap trên mobile (để thẻ đứng riêng)
   .form-grid6.grid-m2 : form 6 cột → 2 cột trên mobile (thay vì 1)            */
@media (max-width:760px) {
  /* ô lọc/tìm trong .toolbar xếp dọc full-width */
  .toolbar > .select, .toolbar > .input { flex:1 1 100% !important; min-width:0 !important; }
  .toolbar-search { flex:1 1 100% !important; }

  /* bảng → thẻ */
  .table-wrap.flush-m { border:none; box-shadow:none; background:transparent; overflow:visible; }
  .table-cards, .table-cards tbody { display:block; width:100%; }
  .table-cards thead { display:none; }
  .table-cards tr { display:block; }
  /* GIỮ hàng ẩn (sửa/xem chi tiết) thật sự ẩn trên mobile — '.table-cards tr{display:block}'
     ở trên vô tình ĐÈ thuộc tính [hidden] khiến hàng sửa tự bung. Trả lại đúng hành vi. */
  .table-cards tr[hidden] { display:none !important; }
  .table-cards td { display:block; width:auto !important; border:none !important;
    padding:3px 0 !important; text-align:left !important; white-space:normal !important;
    overflow-wrap:anywhere; }
  .table-cards tbody tr { background:var(--c-bg); border:1px solid var(--c-border);
    border-radius:var(--r-md); padding:11px 13px; margin-bottom:8px; }
  /* nhãn + giá trị chung 1 dòng → "Màu: Silver"; giá trị dài (kể cả phần tử con)
     tự xuống dòng nhờ min-width:0 trên flex-item con */
  .table-cards td[data-label] { display:flex; gap:6px; align-items:baseline; flex-wrap:wrap; }
  .table-cards td[data-label]::before { content:attr(data-label) ":"; display:inline;
    flex:0 0 auto; font-size:max(12px,var(--fz-floor,0px)); font-weight:700;
    color:var(--c-text-muted); }
  .table-cards td[data-label] > * { min-width:0; max-width:100%; overflow-wrap:anywhere; }
  /* ô muốn giữ kiểu khối (nhãn trên, nội dung dưới): thêm class .td-block */
  .table-cards td.td-block { display:block; }
  .table-cards td.td-block::before { display:block; margin-bottom:1px; }
  .table-cards .td-actions { display:block; text-align:left !important; margin-top:8px;
    padding-top:8px !important; border-top:1px dashed var(--c-border) !important; }
  .table-cards .kebab-menu { left:0; right:auto; }

  /* form 6 cột → 2 cột */
  .form-grid6.grid-m2 { grid-template-columns:1fr 1fr; }
  .form-grid6.grid-m2 > .c1, .form-grid6.grid-m2 > .c2 { grid-column:span 1; }
  .form-grid6.grid-m2 > .c3, .form-grid6.grid-m2 > .c4, .form-grid6.grid-m2 > .c5,
  .form-grid6.grid-m2 > .c6, .form-grid6.grid-m2 > .form-actions { grid-column:1 / -1; }
}

/* Dark mode input differentiation */
html[data-theme="dark"] .input,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] .select,
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="hidden"]),
html[data-theme="dark"] textarea, html[data-theme="dark"] select {
  background-color:var(--c-input-bg); border-color:var(--c-border); color:var(--c-text);
}
/* combobox: nền khớp ô input thường; input bên trong trong suốt để KHÔNG tạo hộp con hẹp hơn viền */
html[data-theme="dark"] .combo-box { background-color:var(--c-input-bg); }
html[data-theme="dark"] .combo-input { background:transparent !important; }

html[data-theme="dark"] code, html[data-theme="dark"] code.inline { background:var(--c-n100); color:var(--c-n800); }

/* Theme transition */
html.theme-transitioning, html.theme-transitioning *,
html.theme-transitioning *::before, html.theme-transitioning *::after {
  transition:background-color 200ms ease, color 200ms ease, border-color 200ms ease !important;
}