/* XỔ SỐ PHÚC KIM — shared design tokens for Public + Admin. */
:root,[data-theme="light"]{
  --bg-body:var(--app-bg-custom,#f6f8fb);
  --bg-surface:#fff;
  --bg-surface-2:#f8fafc;
  --bg-hover:#f1f5f9;
  --bg-active:#eef4ff;
  --bg-input:#f8fafc;
  --bg-hero:linear-gradient(135deg,#1e40af 0%,#2563eb 50%,#3b82f6 100%);
  --border:#e9eef3;
  --border-light:#eef2f6;
  --border-input:#e2e8f0;
  --text-primary:#0b1b33;
  --text-secondary:#334155;
  --text-muted:#64748b;
  --text-faint:#94a3b8;
  --accent:var(--brand-custom,#2563eb);
  --accent-hover:#1d4ed8;
  --accent-soft:#eef4ff;
  --accent-soft-text:#1e4bdb;
  --gold:var(--brand-secondary,#f59e0b);
  --gold-soft:#fff7e6;
  --gold-dark:#92400e;
  --success-bg:#e6f7e6;
  --success-text:#0e7a3c;
  --warning-bg:#fff5e6;
  --warning-text:#b45309;
  --danger-bg:#fee9e7;
  --danger-text:#b91c1c;
  --shadow-sm:0 4px 12px rgba(0,0,0,.04);
  --shadow-md:0 12px 24px -8px rgba(0,0,0,.08);
  --shadow-lg:0 20px 40px -12px rgba(0,0,0,.15);
  --scrollbar-thumb:#cbd5e1;
  --prize-bg:#fffbf0;
  --prize-special:linear-gradient(135deg,#fbbf24,#f59e0b);
  --ink:var(--text-primary);
  --muted:var(--text-muted);
  --line:var(--border);
  --bg:var(--bg-body);
  --surface:var(--bg-surface);
  --surface-soft:var(--bg-surface-2);
  --brand:var(--accent);
  --navy:var(--footer-custom,#0f172a);
  --success:var(--success-text);
  --danger:var(--danger-text);
  --warning:var(--warning-text);
  --overlay:rgba(15,23,42,.5);
  --shadow:var(--shadow-lg);
  --radius:14px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --layout-gap:var(--space-5);
  --content-pad:28px;
  --content-pad-mobile:14px;
  --sidebar-width:268px;
  --sidebar-collapsed-width:76px;
  --header-height:76px;
  --palette-strong:#1e40af;
  --palette-soft:var(--accent-soft);
  --palette-nav:var(--bg-surface);
  --palette-page-bg:var(--bg-body);
  --palette-header:var(--bg-surface);
  color-scheme:light;
}

html[data-theme="dark"]{
  --bg-body:#0b1120;
  --bg-surface:#131c2e;
  --bg-surface-2:#1a2438;
  --bg-hover:#1e2a42;
  --bg-active:#1e3a8a33;
  --bg-input:#1a2438;
  --bg-hero:linear-gradient(135deg,#0f172a 0%,#1e3a8a 50%,#1e40af 100%);
  --border:#26324a;
  --border-light:#1e293b;
  --border-input:#2d3a52;
  --text-primary:#f1f5f9;
  --text-secondary:#cbd5e1;
  --text-muted:#94a3b8;
  --text-faint:#64748b;
  --accent:var(--brand-dark-custom,#3b82f6);
  --accent-hover:#60a5fa;
  --accent-soft:#1e3a8a33;
  --accent-soft-text:#93c5fd;
  --gold:var(--brand-secondary-dark,#fbbf24);
  --gold-soft:#422006;
  --gold-dark:#fcd34d;
  --success-bg:#064e3b;
  --success-text:#6ee7b7;
  --warning-bg:#78350f;
  --warning-text:#fcd34d;
  --danger-bg:#7f1d1d;
  --danger-text:#fca5a5;
  --shadow-sm:0 4px 12px rgba(0,0,0,.25);
  --shadow-md:0 12px 24px -8px rgba(0,0,0,.45);
  --shadow-lg:0 20px 40px -12px rgba(0,0,0,.65);
  --scrollbar-thumb:#334155;
  --prize-bg:#1a2438;
  --prize-special:linear-gradient(135deg,#f59e0b,#b45309);
  --ink:var(--text-primary);
  --muted:var(--text-muted);
  --line:var(--border);
  --bg:var(--bg-body);
  --surface:var(--bg-surface);
  --surface-soft:var(--bg-surface-2);
  --brand:var(--accent);
  --navy:#091426;
  --success:var(--success-text);
  --danger:var(--danger-text);
  --warning:var(--warning-text);
  --overlay:rgba(0,0,0,.64);
  --shadow:var(--shadow-lg);
  --palette-strong:var(--accent-hover);
  --palette-soft:var(--bg-surface-2);
  --palette-nav:var(--bg-surface);
  --palette-page-bg:var(--bg-body);
  --palette-header:var(--bg-surface);
  color-scheme:dark;
}

/* Optional Admin palette choices use the same token contract everywhere. */
html[data-palette="blue"]{--brand:var(--accent)}
html[data-theme="light"][data-palette="emerald"]{--accent:#047857;--accent-hover:#065f46;--accent-soft:#ecf8f3;--accent-soft-text:#065f46;--brand:var(--accent);--palette-strong:#065f46}
html[data-theme="dark"][data-palette="emerald"]{--accent:#34d399;--accent-hover:#6ee7b7;--accent-soft:#064e3b;--accent-soft-text:#a7f3d0;--brand:var(--accent);--palette-strong:#6ee7b7}
html[data-theme="light"][data-palette="crimson"]{--accent:#be123c;--accent-hover:#9f1239;--accent-soft:#fff0f3;--accent-soft-text:#9f1239;--brand:var(--accent);--palette-strong:#9f1239}
html[data-theme="dark"][data-palette="crimson"]{--accent:#fb7185;--accent-hover:#fda4af;--accent-soft:#4c0519;--accent-soft-text:#fecdd3;--brand:var(--accent);--palette-strong:#fda4af}
html[data-theme="light"][data-palette="violet"]{--accent:#6d28d9;--accent-hover:#5b21b6;--accent-soft:#f3efff;--accent-soft-text:#5b21b6;--brand:var(--accent);--palette-strong:#5b21b6}
html[data-theme="dark"][data-palette="violet"]{--accent:#8b5cf6;--accent-hover:#a78bfa;--accent-soft:#2e1065;--accent-soft-text:#c4b5fd;--brand:var(--accent);--palette-strong:#a78bfa}
html[data-theme="light"][data-palette="energy"]{--accent:var(--brand-custom,#e11d2e);--accent-hover:#be123c;--accent-soft:#fff0f2;--accent-soft-text:#9f1239;--brand:var(--accent);--palette-strong:#9f1239}
html[data-theme="dark"][data-palette="energy"]{--accent:#fb7185;--accent-hover:#fda4af;--accent-soft:#4c0519;--accent-soft-text:#fecdd3;--brand:var(--accent);--palette-strong:#fda4af}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
html{scroll-behavior:smooth}
body{overflow-wrap:anywhere;transition:background .25s ease,color .25s ease}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:10px}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img,svg,video,canvas{max-width:100%}
h1,h2,h3,p{margin-top:0}
.muted{color:var(--muted)}
.eyebrow{font-size:12px;letter-spacing:.14em;font-weight:800;color:var(--brand)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:44px;max-width:100%;padding:0 18px;border-radius:10px;border:1px solid var(--line);font-weight:750;background:var(--surface);color:var(--ink);white-space:normal;text-align:center;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
.btn:hover{border-color:color-mix(in srgb,var(--brand) 34%,var(--line))}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 8px 16px -8px color-mix(in srgb,var(--brand) 52%,transparent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-1px)}
.btn-ghost{background:var(--surface)}
.btn-block{width:100%}
.icon-btn{display:inline-grid;place-items:center;flex:0 0 auto;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink)}
.card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow-sm)}
.badge{display:inline-flex;align-items:center;max-width:100%;min-height:26px;padding:3px 9px;border-radius:999px;background:var(--surface-soft);color:var(--muted);font-size:11px;font-weight:800;line-height:1.25;white-space:normal}
.badge-success{background:var(--success-bg);color:var(--success-text)}
.badge-danger{background:var(--danger-bg);color:var(--danger-text)}
.badge-warning{background:var(--warning-bg);color:var(--warning-text)}
.badge-secondary{background:var(--surface-soft);color:var(--muted)}
.alert{padding:12px 14px;border-radius:12px;margin:14px 0;background:var(--surface-soft);border:1px solid var(--line)}
.alert-success{background:var(--success-bg);color:var(--success-text)}
.alert-error,.alert-danger{background:var(--danger-bg);color:var(--danger-text)}
label{font-size:13px;font-weight:750}
input,select,textarea{width:100%;min-width:0;border:1px solid var(--border-input);border-radius:10px;padding:12px 13px;background:var(--bg-input);outline:none;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
input[type="checkbox"],input[type="radio"]{width:auto;min-width:0;padding:0;accent-color:var(--brand);box-shadow:none}
input:focus,select:focus,textarea:focus{border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)}
.table-wrap{width:100%;max-width:100%;overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface);overscroll-behavior:contain}
.table-wrap table,.table{width:100%;border-collapse:collapse}
.table-wrap th,.table-wrap td,.table th,.table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:normal;word-break:normal}
.table-wrap th,.table th{position:sticky;top:0;z-index:2;background:var(--surface);white-space:nowrap}
.table-wrap tbody tr:hover,.table tbody tr:hover{background:var(--surface-soft)}
.table-wrap td{max-width:36rem}
.tabs{display:flex;gap:var(--space-2);border-bottom:1px solid var(--line);overflow-x:auto}
.tab{padding:10px 12px;border-bottom:2px solid transparent;white-space:nowrap}
.tab.active{border-color:var(--brand);font-weight:800}
.pagination{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.state-page{min-height:100vh;display:grid;place-items:center;padding:var(--space-5)}
.state-card{max-width:620px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:36px}
.skeleton{display:block;min-height:16px;border-radius:8px;background:var(--surface-soft);animation:pulse 1.3s infinite alternate}
@keyframes pulse{to{opacity:.45}}
.inline,.inline-form{display:inline-flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.form-grid>label{min-width:0}
.form-grid>.btn{align-self:end}
.module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--layout-gap);align-items:start}
.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}
code{max-width:100%;overflow-wrap:anywhere}
html[data-theme="dark"] .lot-form,html[data-theme="dark"] .pos-catalog,html[data-theme="dark"] .pos-cart,html[data-theme="dark"] .pos-toolbar,html[data-theme="dark"] .pos-ticket,html[data-theme="dark"] .iam-form input,html[data-theme="dark"] .iam-form select,html[data-theme="dark"] .table-wrap th{background:var(--surface);color:var(--ink);border-color:var(--line)}
html[data-theme="dark"] .pos-ticket,html[data-theme="dark"] .pos-cart-line,html[data-theme="dark"] .lot-form,html[data-theme="dark"] .media-editor canvas{border-color:var(--line)}
html[data-theme="dark"] .media-editor canvas{background:var(--surface-soft)}
html[data-theme="dark"] .lot-kpis span,html[data-theme="dark"] .lot-head p,html[data-theme="dark"] .lot-note p,html[data-theme="dark"] .empty-state,html[data-theme="dark"] .review-card .muted{color:var(--muted)}
@media(max-width:767px){.form-grid,.module-grid{grid-template-columns:1fr}.page-head{display:block}.btn{min-height:42px}.table-wrap th,.table-wrap td,.table th,.table td{padding:10px 12px}}