/* ════════════════════════════════════════════════════════════════
   COOL MIST-SLATE GLOBAL THEME — BanHangWebBlazor
   One source of truth for both layout and theme across all pages.
   Loaded LAST in App.razor. After this is in place the per-page
   .razor.css files are no longer needed.

   NOTE: variable names are kept (--cream-*) to avoid touching every
   selector. Values are cool mist / slate: bg = pale blue-gray,
   accent = slate-600 #475569 (muted gray-blue, neither cold sky
   nor warm gold), text = slate-800/900, font = Inter.
   ════════════════════════════════════════════════════════════════ */

:root {
    --cream-bg-1: #f0f3f6;
    --cream-bg-2: #dde2e8;
    --cream-radial-1: #e8eef2;
    --cream-radial-2: #ccd5dd;

    --cream-text: #1e293b;
    --cream-text-strong: #0f172a;
    --cream-text-muted: #475569;
    --cream-text-soft: #64748b;

    --cream-eyebrow: #475569;
    --cream-gold: #475569;
    --cream-gold-deep: #334155;
    --cream-gold-light: #94a3b8;

    --cream-line: rgba(30, 41, 59, .14);
    --cream-line-strong: rgba(30, 41, 59, .28);

    --cream-card-bg: rgba(255, 255, 255, .78);
    --cream-card-bg-soft: rgba(255, 255, 255, .62);
    --cream-card-bg-strong: rgba(255, 255, 255, .92);
    --cream-card-border: rgba(30, 41, 59, .10);

    --serif: 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* ──────────────────────────────────────────────────────
   CANVAS — body cream gradient, ambient drift, grain
   ────────────────────────────────────────────────────── */
html, body { background: transparent; }

body {
    font-family: var(--serif);
    color: var(--cream-text) !important;
    background-color: var(--cream-bg-1) !important;
    background-image:
        radial-gradient(900px 500px at 25% 18%, var(--cream-radial-1) 0%, transparent 65%),
        radial-gradient(700px 500px at 80% 90%, var(--cream-radial-2) 0%, transparent 70%),
        linear-gradient(135deg, var(--cream-bg-1) 0%, var(--cream-bg-2) 100%) !important;
    background-attachment: fixed !important;
    background-size: 110% 110%, 110% 110%, 100% 100% !important;
    animation: cream-ambient 28s ease-in-out infinite;
}

body.login-page { background-color: var(--cream-bg-1) !important; }

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(rgba(30, 41, 59, .055) 1px, transparent 1px),
        radial-gradient(rgba(30, 41, 59, .04) 1px, transparent 1px);
    background-size: 3px 3px, 5px 5px;
    background-position: 0 0, 1.5px 1.5px;
    mix-blend-mode: multiply;
    opacity: .55;
}

@keyframes cream-ambient {
    0%, 100% { background-position: 25% 18%, 80% 90%, 0% 0%; }
    50%      { background-position: 32% 24%, 72% 84%, 0% 0%; }
}

.appbar, .top-appbar, .secured-body, .login-container { position: relative; z-index: 1; }

/* ──────────────────────────────────────────────────────
   PAGE WRAPPERS — transparent so cream shows through
   Layout primitives kept (min-height, position, overflow)
   ────────────────────────────────────────────────────── */
.home-bg, .bc-bg, .lk-bg, .mu-bg, .ns-bg, .nsd-bg, .qldh-bg,
.reg-bg, .tcs-bg, .tp-bg, .tg-bg, .tt-bg, .xn-bg {
    min-height: calc(100vh - 56px);
    position: relative;
    overflow-x: hidden;
    overflow-y: auto;
    background: transparent !important;
    color: var(--cream-text);
}

.mu-wrap, .ns-wrap, .nsd-wrap { min-height: calc(100vh - 56px); }

.reg-bg { padding: 26px 0 40px; }

/* Decorative orbs and login neural dots — gone */
.home-orb, .bc-orb, .lk-orb, .mu-orb, .ns-orb, .nsd-orb, .qldh-orb,
.reg-orb, .tcs-orb, .tp-orb, .tg-orb, .tt-orb, .xn-orb,
.home-bg .hero-card-glow, .bc-hero-card-glow, .lk-hero-card-glow,
.mu-hero-card-glow, .ns-hero-card-glow, .nsd-hero-card-glow,
.qldh-hero-card-glow, .tcs-hero-card-glow, .tt-hero-card-glow,
.xn-hero-card-glow,
.neural-background, .neural-node {
    display: none !important;
}

/* ──────────────────────────────────────────────────────
   CONTENT WRAPPER — max-width + padding
   ────────────────────────────────────────────────────── */
.home-wrap, .bc-wrap, .lk-wrap, .mu-wrap, .ns-wrap, .nsd-wrap,
.qldh-wrap, .tcs-wrap, .tp-wrap, .tg-wrap, .tt-wrap, .xn-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 18px 40px;
}

.reg-wrap {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 18px;
}

/* Pages with full-height column flex (mu, ns, nsd) */
.mu-wrap, .ns-wrap, .nsd-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ──────────────────────────────────────────────────────
   HERO LAYOUT — two-column grid (left text / right card)
   ────────────────────────────────────────────────────── */
.home-bg .hero,
.bc-hero, .lk-hero, .mu-hero, .ns-hero, .nsd-hero, .qldh-hero,
.tcs-hero, .tg-hero, .tt-hero, .xn-hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 18px;
    align-items: stretch;
    margin-bottom: 14px;
}

.home-bg .hero, .bc-hero, .lk-hero, .qldh-hero, .tcs-hero, .tg-hero,
.tt-hero, .xn-hero { grid-template-columns: 1.1fr 0.9fr; }

.tp-hero { margin-bottom: 14px; }

/* Hero left/right (Home) */
.home-bg .hero-left, .home-bg .hero-right { display: block; }

/* ──────────────────────────────────────────────────────
   BADGE PILL (eyebrow over title)
   ────────────────────────────────────────────────────── */
.home-bg .badge,
.bc-badge, .lk-badge, .mu-badge, .ns-badge, .nsd-badge, .qldh-badge,
.tcs-badge, .tp-badge, .tg-badge, .tt-badge, .xn-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    width: fit-content;
    background: var(--cream-card-bg-soft) !important;
    border: 1px solid var(--cream-line) !important;
    color: var(--cream-eyebrow) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.home-bg .badge-text,
.bc-badge-text, .lk-badge-text, .mu-badge-text, .ns-badge-text,
.nsd-badge-text, .qldh-badge-text, .tcs-badge-text, .tp-badge-text,
.tg-badge-text, .tt-badge-text, .xn-badge-text {
    color: var(--cream-eyebrow);
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: .72rem;
    font-weight: 600;
}

.home-bg .dot,
.bc-dot, .lk-dot, .mu-dot, .ns-dot, .nsd-dot, .qldh-dot,
.tcs-dot, .tp-dot, .tg-dot, .tt-dot, .xn-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--cream-gold);
    box-shadow: 0 0 0 4px rgba(71, 85, 105, .18);
}

/* ──────────────────────────────────────────────────────
   PAGE TITLES — serif, warm dark
   ────────────────────────────────────────────────────── */
.home-bg .title,
.bc-title, .lk-title, .mu-title, .ns-title, .nsd-title, .qldh-title,
.tcs-title, .tp-title, .tg-title, .tt-title, .xn-title {
    margin: 14px 0 8px;
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--cream-text-strong);
    font-family: var(--serif);
    font-weight: 400;
}

.mu-title, .ns-title, .nsd-title { font-size: 38px; }

.reg-title {
    color: var(--cream-text-strong);
    font-family: var(--serif);
    font-weight: 500;
    font-size: 20px;
    letter-spacing: -.01em;
}

.home-bg .title-accent,
.bc-title-accent, .lk-title-accent, .mu-title-accent, .ns-title-accent,
.nsd-title-accent, .qldh-title-accent, .tcs-title-accent, .tp-title-accent,
.tg-title-accent, .tt-title-accent, .xn-title-accent {
    background: linear-gradient(90deg, var(--cream-gold) 0%, var(--cream-gold-deep) 60%, var(--cream-gold-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
}

.home-bg .subtitle,
.bc-subtitle, .lk-subtitle, .mu-subtitle, .ns-subtitle, .nsd-subtitle,
.qldh-subtitle, .tcs-subtitle, .tp-subtitle, .tg-subtitle, .tt-subtitle,
.xn-subtitle {
    margin: 0 0 16px;
    color: var(--cream-text-muted);
    font-family: var(--serif);
    font-style: italic;
    font-size: 15.5px;
    max-width: 70ch;
}

.lk-subtitle, .qldh-subtitle, .tt-subtitle { max-width: 70ch; }
.tp-subtitle { max-width: 72ch; }
.mu-subtitle, .ns-subtitle, .nsd-subtitle, .tcs-subtitle, .tg-subtitle,
.xn-subtitle { max-width: 62ch; }

.reg-subtitle {
    margin-top: 6px;
    color: var(--cream-text-muted);
    font-style: italic;
    font-size: 13px;
}

/* ──────────────────────────────────────────────────────
   META STRIP (label / value tiles)
   ────────────────────────────────────────────────────── */
.home-bg .meta,
.bc-meta, .mu-meta, .tt-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.xn-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 10px;
}

.home-bg .meta-item,
.bc-meta-item, .mu-meta-item, .tt-meta-item, .xn-meta-item {
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--cream-card-bg);
    border: 1px solid var(--cream-card-border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.home-bg .meta-label,
.bc-meta-label, .mu-meta-label, .tt-meta-label, .xn-meta-label {
    display: block;
    margin-bottom: 4px;
    font-size: .7rem;
    color: var(--cream-eyebrow);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
}

.home-bg .meta-value,
.bc-meta-value, .mu-meta-value, .tt-meta-value, .xn-meta-value {
    color: var(--cream-text-strong);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ──────────────────────────────────────────────────────
   ACTION BUTTON ROWS
   ────────────────────────────────────────────────────── */
.home-bg .hero-actions,
.qldh-actions, .tcs-actions, .tp-actions, .tg-actions,
.mu-actions, .reg-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.home-bg .hero-actions { margin-bottom: 14px; }
.qldh-actions { justify-content: flex-end; }
.mu-actions { margin-top: 12px; }
.tcs-actions, .tp-actions, .tg-actions { margin-bottom: 12px; }
.reg-actions { align-items: center; margin-top: 4px; }

/* ──────────────────────────────────────────────────────
   CARDS (hero card / info card / grid card / feature)
   Cream glass with gold border
   ────────────────────────────────────────────────────── */
.home-bg .hero-card, .home-bg .feature,
.bc-card, .bc-grid-card, .bc-hero-card,
.lk-card, .lk-grid-card, .lk-hero-card,
.mu-grid-card, .mu-hero-card,
.ns-card, .ns-grid-card, .ns-hero-card,
.nsd-grid-card, .nsd-stats,
.qldh-grid-card, .qldh-hero-card,
.reg-card,
.tcs-grid-card, .tcs-hero-card,
.tp-grid-card,
.tg-grid-card, .tg-hero-card,
.tt-grid-card, .tt-hero-card,
.xn-grid-card, .xn-hero-card {
    border-radius: 18px;
    background: var(--cream-card-bg) !important;
    border: 1px solid var(--cream-card-border) !important;
    box-shadow: 0 12px 28px rgba(30, 41, 59, .08) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
}

/* hero cards have padding */
.home-bg .hero-card,
.bc-hero-card, .lk-hero-card, .mu-hero-card, .ns-hero-card,
.qldh-hero-card, .tcs-hero-card, .tg-hero-card, .tt-hero-card,
.xn-hero-card, .nsd-stats {
    position: relative;
    height: 100%;
    padding: 16px;
}

/* feature card padding (Home) */
.home-bg .feature { padding: 14px 14px; }

/* qldh-hero is column flex */
.qldh-hero-card { display: flex; flex-direction: column; gap: 14px; }

/* nsd-stats is grid */
.nsd-stats { display: grid; grid-template-columns: 1fr; gap: 10px; }

/* mu/ns grid-card is full-height column flex */
.mu-grid-card, .ns-grid-card, .nsd-grid-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* lk/bc info-cards have margin-bottom */
.bc-card, .lk-card { margin-bottom: 12px; }

/* Card / grid heads (icon + title / right-side note) */
.home-bg .hero-card-header,
.bc-card-head, .bc-grid-head, .bc-hero-card-header,
.lk-card-head, .lk-grid-head,
.mu-grid-head,
.ns-card-head, .ns-grid-head,
.nsd-grid-head,
.qldh-grid-head,
.tcs-grid-head,
.tp-grid-head,
.tg-grid-head,
.tt-grid-head,
.xn-grid-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cream-line);
}
.qldh-grid-head { align-items: flex-end; }

.home-bg .hero-card-header { margin-bottom: 14px; padding: 0; border-bottom: none; }

.bc-hero-card-header { margin-bottom: 14px; padding: 0; border-bottom: none; }

.reg-head {
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--cream-line);
}

/* Card / grid title (icon + label) */
.home-bg .hero-card-title,
.bc-card-title, .bc-grid-title, .bc-hero-card-title,
.lk-card-title, .lk-grid-title,
.mu-grid-title,
.ns-card-title, .ns-grid-title,
.nsd-grid-title,
.qldh-grid-title,
.tcs-grid-title,
.tp-grid-title,
.tg-grid-title,
.tt-grid-title,
.xn-grid-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--serif);
    color: var(--cream-text-strong);
    font-weight: 500;
    letter-spacing: -.01em;
}
.home-bg .feature-title {
    color: var(--cream-text-strong);
    font-family: var(--serif);
    font-weight: 500;
}

/* Card / grid sub-note */
.home-bg .hero-card-sub,
.bc-grid-note, .bc-hero-card-sub,
.lk-grid-note, .mu-grid-note, .ns-grid-note, .nsd-grid-hint,
.qldh-grid-note, .tcs-grid-note, .tp-grid-note, .tg-grid-note,
.tt-grid-note, .xn-grid-note,
.home-bg .feature-text, .home-bg .hint, .bc-hint, .lk-hint, .mu-hint,
.ns-hint, .tcs-hint, .tg-hint, .tt-hint, .xn-hint {
    margin-top: 2px;
    color: var(--cream-text-muted);
    font-style: italic;
    font-size: 12.5px;
}

/* Card / grid body padding */
.home-bg .hero-card { padding: 16px; }
.bc-card-body, .bc-grid-body,
.lk-card-body, .lk-grid-body,
.ns-card-body, .ns-grid-body,
.nsd-grid-body,
.qldh-grid-body,
.tcs-grid-body,
.tp-grid-body,
.tg-grid-body,
.tt-grid-body,
.xn-grid-body { padding: 12px 12px 16px; }

.mu-grid-body, .ns-grid-body, .nsd-grid-body {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

.reg-body { padding: 16px 18px 18px; display: grid; gap: 14px; }

/* ──────────────────────────────────────────────────────
   FEATURE ROW (Home only — 3-col)
   ────────────────────────────────────────────────────── */
.home-bg .feature-row {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.home-bg .feature-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }

/* ──────────────────────────────────────────────────────
   QUICK TILES (button-row inside hero-card)
   ────────────────────────────────────────────────────── */
.home-bg .quick-grid,
.bc-quick-grid, .lk-quick-grid, .mu-quick-grid, .ns-quick-grid,
.tcs-quick-grid, .tg-quick-grid, .tt-quick-grid, .xn-quick-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 6px;
}

.home-bg .quick-tile,
.bc-quick-tile, .lk-quick-tile, .mu-quick-tile, .ns-quick-tile,
.tcs-quick-tile, .tg-quick-tile, .tt-quick-tile, .xn-quick-tile {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    text-align: left;
    cursor: pointer;
    background: var(--cream-card-bg-soft) !important;
    border: 1px solid var(--cream-line) !important;
    color: var(--cream-text-strong) !important;
    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}
.home-bg .quick-tile:hover,
.bc-quick-tile:hover, .lk-quick-tile:hover, .mu-quick-tile:hover,
.ns-quick-tile:hover, .tcs-quick-tile:hover, .tg-quick-tile:hover,
.tt-quick-tile:hover, .xn-quick-tile:hover {
    transform: translateY(-1px);
    background: var(--cream-card-bg-strong) !important;
    border-color: var(--cream-line-strong) !important;
}

.home-bg .tile-icon,
.bc-tile-icon, .lk-tile-icon, .mu-tile-icon, .ns-tile-icon,
.tcs-tile-icon, .tg-tile-icon, .tt-tile-icon, .xn-tile-icon,
.home-bg .feature-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: rgba(71, 85, 105, .14) !important;
    border: 1px solid var(--cream-line) !important;
    color: var(--cream-gold-deep) !important;
}
.home-bg .tile-icon.accent-2, .home-bg .feature-icon.accent-2,
.bc-tile-icon.accent-2, .lk-tile-icon.accent-2, .mu-tile-icon.accent-2,
.ns-tile-icon.accent-2, .tcs-tile-icon.accent-2, .tg-tile-icon.accent-2,
.tt-tile-icon.accent-2, .xn-tile-icon.accent-2 {
    background: rgba(71, 85, 105, .22) !important;
    border-color: var(--cream-line-strong) !important;
}
.home-bg .tile-icon.accent-3, .home-bg .feature-icon.accent-3,
.bc-tile-icon.accent-3, .lk-tile-icon.accent-3, .mu-tile-icon.accent-3,
.ns-tile-icon.accent-3, .tcs-tile-icon.accent-3, .tg-tile-icon.accent-3,
.tt-tile-icon.accent-3, .xn-tile-icon.accent-3 {
    background: rgba(51, 65, 85, .18) !important;
    border-color: var(--cream-line-strong) !important;
}
.home-bg .feature-icon { width: 38px; height: 38px; }

.home-bg .tile-text,
.bc-tile-text, .lk-tile-text, .mu-tile-text, .ns-tile-text,
.tcs-tile-text, .tg-tile-text, .tt-tile-text, .xn-tile-text {
    flex: 1 1 auto;
    min-width: 0;
}

.home-bg .tile-title,
.bc-tile-title, .lk-tile-title, .mu-tile-title, .ns-tile-title,
.tcs-tile-title, .tg-tile-title, .tt-tile-title, .xn-tile-title {
    color: var(--cream-text-strong);
    font-weight: 600;
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-bg .tile-sub,
.bc-tile-sub, .lk-tile-sub, .mu-tile-sub, .ns-tile-sub,
.tcs-tile-sub, .tg-tile-sub, .tt-tile-sub, .xn-tile-sub {
    margin-top: 2px;
    color: var(--cream-text-muted);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-bg .tile-arrow {
    color: var(--cream-gold);
    font-size: 18px;
    padding-right: 4px;
}

/* Hero footer (separator line under the tiles) */
.home-bg .hero-footer,
.bc-hero-footer, .lk-hero-footer, .mu-hero-footer, .ns-hero-footer,
.tcs-hero-footer, .tg-hero-footer, .tt-hero-footer, .xn-hero-footer {
    position: relative;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--cream-line);
}

/* ──────────────────────────────────────────────────────
   DECORATIVE LOGO + spinning rings (kept, recolored gold)
   ────────────────────────────────────────────────────── */
.home-bg .logo,
.bc-logo, .lk-logo, .mu-logo, .ns-logo,
.tcs-logo, .tg-logo, .tt-logo, .xn-logo {
    position: relative;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, .55) !important;
    border: 1px solid var(--cream-line) !important;
    color: var(--cream-gold-deep) !important;
}

.home-bg .logo-core,
.bc-logo-core, .lk-logo-core, .mu-logo-core, .ns-logo-core,
.tcs-logo-core, .tg-logo-core, .tt-logo-core, .xn-logo-core {
    position: relative;
    z-index: 2;
    color: var(--cream-gold-deep);
}

.home-bg .logo-rings .ring,
.bc-logo-rings .ring, .lk-logo-rings .ring, .mu-logo-rings .ring,
.ns-logo-rings .ring, .tcs-logo-rings .ring, .tg-logo-rings .ring,
.tt-logo-rings .ring, .xn-logo-rings .ring {
    position: absolute;
    inset: 6px;
    border-radius: 999px;
    border: 1px solid var(--cream-gold-light);
    opacity: .45;
    animation: cream-spin 7.5s linear infinite;
}
.home-bg .logo-rings .ring-2,
.bc-logo-rings .ring-2, .lk-logo-rings .ring-2, .mu-logo-rings .ring-2,
.ns-logo-rings .ring-2, .tcs-logo-rings .ring-2, .tg-logo-rings .ring-2,
.tt-logo-rings .ring-2, .xn-logo-rings .ring-2 {
    inset: 11px;
    animation-duration: 9.5s;
    animation-direction: reverse;
}
.home-bg .logo-rings .ring-3,
.bc-logo-rings .ring-3, .lk-logo-rings .ring-3, .mu-logo-rings .ring-3,
.ns-logo-rings .ring-3, .tcs-logo-rings .ring-3, .tg-logo-rings .ring-3,
.tt-logo-rings .ring-3, .xn-logo-rings .ring-3 {
    inset: 16px;
    animation-duration: 12s;
}

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

/* ──────────────────────────────────────────────────────
   PAGE-SPECIFIC LAYOUT
   ────────────────────────────────────────────────────── */

/* LuanChuyenKho */
.lk-form, .lk-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Transfer dashboard layout */
.lk-route {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}
.lk-route .ip-filter-select { min-width: 150px; flex: 1 1 150px; }
.lk-arrow {
    color: var(--cream-gold-deep);
    font-size: 20px;
    font-weight: 700;
    flex: 0 0 auto;
    user-select: none;
}

.lk-filter-bar { padding: 8px 14px; }
.lk-zero-toggle { white-space: nowrap; flex: 0 0 auto; }

.lk-stock-src { color: var(--cream-text-strong); font-weight: 700; }
.lk-stock-dst { color: var(--cream-gold-deep); font-weight: 600; }

.lk-stepper {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-top: 4px;
}
.lk-step-btn {
    width: 42px;
    flex: 0 0 42px;
    border-radius: 8px;
    border: 1px solid var(--cream-line);
    background: rgba(255, 255, 255, .85);
    color: var(--cream-text-strong);
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease, color 100ms ease;
    user-select: none;
}
.lk-step-btn:hover:not(:disabled) {
    background: rgba(71, 85, 105, .12);
    border-color: var(--cream-gold);
    color: var(--cream-gold-deep);
}
.lk-step-btn:active:not(:disabled) { transform: scale(.96); }
.lk-step-btn:disabled { opacity: .35; cursor: not-allowed; }
.lk-stepper-input {
    flex: 1 1 auto;
    min-width: 60px;
    padding: 8px 10px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid var(--cream-line);
    border-radius: 8px;
    background: rgba(255, 255, 255, .85);
    color: var(--cream-text-strong);
    font-variant-numeric: tabular-nums;
    font-family: var(--serif);
}
.lk-stepper-input:focus {
    outline: none;
    border-color: var(--cream-gold);
    box-shadow: 0 0 0 3px rgba(71, 85, 105, .14);
    background: #fff;
}

.lk-row-warn {
    background: rgba(251, 191, 36, .12) !important;
    border-color: rgba(251, 191, 36, .45) !important;
}
.lk-warn {
    margin-top: 6px;
    font-size: 12.5px;
    color: #b45309;
    font-style: italic;
}

.lk-history-section {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid var(--cream-line);
}
.lk-history-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: var(--cream-text-strong);
    font-family: var(--serif);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0;
    transition: color 120ms ease;
}
.lk-history-toggle:hover { color: var(--cream-gold-deep); }
.lk-history-chev { font-size: 11px; color: var(--cream-text-muted); }
.lk-history-count {
    font-size: 12px;
    color: var(--cream-text-muted);
    font-weight: 400;
    font-style: italic;
}
.lk-history-grid {
    margin-top: 10px;
    background: var(--cream-card-bg-strong);
    border: 1px solid var(--cream-card-border);
    border-radius: 12px;
    overflow: hidden;
}
.lk-alert, .tcs-alert, .tp-alert, .tg-alert, .reg-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(220, 38, 38, .08);
    border: 1px solid rgba(220, 38, 38, .22);
    color: #7a1f1f;
}
.tcs-alert.success {
    background: rgba(71, 85, 105, .12);
    border-color: var(--cream-line-strong);
    color: var(--cream-text-strong);
}
.tcs-alert.danger, .tp-alert.danger {
    background: rgba(220, 38, 38, .08);
    border-color: rgba(220, 38, 38, .22);
    color: #7a1f1f;
}

/* ManageUsers — inline-edit user card */
.mu-user-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 12px 14px;
}
.mu-user-expanded {
    background: rgba(255, 255, 255, .94) !important;
    border-color: var(--cream-line-strong) !important;
}

.mu-user-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.mu-user-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mu-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    flex: 0 0 auto;
}
.mu-status-active {
    background: rgba(34, 197, 94, .18);
    color: #166534;
    border: 1px solid rgba(34, 197, 94, .35);
}
.mu-status-pending {
    background: rgba(251, 191, 36, .18);
    color: #92400e;
    border: 1px solid rgba(251, 191, 36, .45);
}
.mu-status-locked {
    background: rgba(220, 38, 38, .12);
    color: #991b1b;
    border: 1px solid rgba(220, 38, 38, .35);
}
.mu-expand-btn { flex: 0 0 auto; }

/* ─── Row-click expand ─────────────────────────────────────────
   The whole user-head is the toggle target. Cursor + tap highlight
   make it feel clickable. The chevron at the right rotates 180°
   when expanded as a visual cue. */
.mu-user-head {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    border-radius: 10px;
    transition: background 120ms ease;
    outline: none;
}
.mu-user-head:hover    { background: rgba(184, 134, 46, .06); }
.mu-user-head:active   { background: rgba(184, 134, 46, .10); }
.mu-user-head:focus-visible {
    box-shadow: 0 0 0 2px rgba(184, 134, 46, .35);
}

.mu-expand-chevron {
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 14px;
    color: var(--cream-text-muted);
    transition: transform 200ms ease;
    display: inline-block;
}
.mu-user-expanded .mu-expand-chevron {
    transform: rotate(180deg);
    color: var(--cream-gold-deep);
}

/* ─── Smooth panel expand ──────────────────────────────────────
   grid-template-rows: 0fr → 1fr animates to actual content height
   (modern browsers since 2023, including iOS Safari 16.4+). The
   inner panel must have overflow:hidden + min-height:0 so its
   content can be clipped during the transition. */
.mu-panel-anim {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 280ms cubic-bezier(.2, .8, .2, 1);
}
.mu-user-expanded .mu-panel-anim {
    grid-template-rows: 1fr;
}
.mu-panel-anim > .mu-perm-panel {
    overflow: hidden;
    min-height: 0;
}

.mu-perm-panel {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--cream-line);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.mu-perm-section { display: flex; flex-direction: column; gap: 6px; }
.mu-perm-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cream-eyebrow);
    flex-wrap: wrap;
}
.mu-perm-toggle-all {
    background: none;
    border: none;
    color: var(--cream-gold-deep);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
}
.mu-perm-toggle-all:hover {
    background: rgba(71, 85, 105, .10);
}

.mu-status-segment {
    display: inline-flex;
    border: 1px solid var(--cream-line);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(255, 255, 255, .65);
    width: fit-content;
}
.mu-seg-btn {
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: var(--cream-text-muted);
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.mu-seg-btn:hover { background: rgba(71, 85, 105, .08); }
.mu-seg-on-active {
    background: rgba(34, 197, 94, .18) !important;
    color: #166534 !important;
}
.mu-seg-on-locked {
    background: rgba(220, 38, 38, .14) !important;
    color: #991b1b !important;
}

.mu-perm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 6px;
    max-height: 360px;
    overflow-y: auto;
    padding: 4px 2px;
}
.mu-perm-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .55);
    border: 1px solid var(--cream-line);
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease;
}
.mu-perm-item:hover {
    background: rgba(255, 255, 255, .85);
    border-color: var(--cream-line-strong);
}
.mu-perm-item-on {
    background: rgba(71, 85, 105, .10) !important;
    border-color: var(--cream-line-strong) !important;
}
.mu-perm-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    accent-color: var(--cream-gold);
    cursor: pointer;
}
.mu-perm-text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.mu-perm-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--cream-text-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mu-perm-link {
    font-size: 11px;
    color: var(--cream-text-muted);
    font-family: 'Cascadia Code', 'Consolas', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mu-perm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid var(--cream-line);
}

@media (max-width: 768px) {
    .mu-user-head { flex-wrap: wrap; }
    .mu-status-pill { order: 3; }
    .mu-expand-btn { order: 4; margin-left: auto; }
    .mu-perm-grid { grid-template-columns: 1fr; max-height: none; }
    .mu-status-segment { width: 100%; }
    .mu-seg-btn { flex: 1; }

    /* Save/Cancel split 50/50 instead of right-aligned. Avoids the
       Magic Lock corner trigger overlapping the Save button when the
       expanded panel is scrolled near the bottom of the viewport. */
    .mu-perm-actions { gap: 10px; padding-top: 10px; }
    .mu-perm-actions .ip-btn { flex: 1; min-height: 44px; }
}

/* ManageUsers — main column + grid full-height */
.mu-main { flex: 1 1 auto; min-height: 0; display: flex; }
.mu-grid-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.mu-grid { height: 100%; }
.mu-usercell, .ns-itemcell, .nsd-itemcell {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.mu-avatar, .ns-itemicon, .nsd-itemicon {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-weight: 700;
    letter-spacing: .02em;
    flex: 0 0 auto;
    color: #fff;
    background: linear-gradient(135deg, var(--cream-gold) 0%, var(--cream-gold-deep) 100%);
    border: 1px solid var(--cream-line-strong);
}
.mu-usertext, .ns-itemtext, .nsd-itemtext { min-width: 0; }
.mu-name, .ns-itemname, .nsd-itemname {
    font-weight: 600;
    color: var(--cream-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mu-sub, .ns-itemsub, .nsd-itemsub {
    margin-top: 2px;
    color: var(--cream-text-muted);
    font-size: 12.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mu-status-card {
    border-radius: 14px;
    padding: 12px;
    background: var(--cream-card-bg-strong);
    border: 1px solid var(--cream-line);
}
.mu-status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mu-status-label { font-weight: 600; color: var(--cream-text-strong); }
.mu-status-hint {
    margin-top: 8px;
    font-size: 12.5px;
    color: var(--cream-text-muted);
    line-height: 1.35;
}

/* NhapSanPham + DayDu — main + form + help */
.ns-main, .nsd-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ns-form, .nsd-form { display: flex; flex-direction: column; gap: 12px; }
.ns-two, .nsd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ns-help, .nsd-help { display: flex; flex-direction: column; gap: 10px; }
.ns-help-line, .nsd-help-line {
    color: var(--cream-text);
    font-weight: 500;
    font-size: 13px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.ns-help-dot, .nsd-help-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--cream-gold);
    margin-top: 5px;
    flex: 0 0 auto;
}

/* NhapSanPhamDayDu stats panel */
.nsd-stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    color: var(--cream-text);
}
.nsd-stat-k { color: var(--cream-text-muted); font-weight: 500; }
.nsd-stat-v {
    font-size: 18px;
    font-weight: 700;
    color: var(--cream-text-strong);
    font-family: var(--serif);
}

/* QuanLyDatHangNoiBo metrics + dialog kpi */
.qldh-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.qldh-metric {
    border-radius: 14px;
    padding: 12px;
    background: var(--cream-card-bg);
    border: 1px solid var(--cream-card-border);
}
.qldh-metric-label {
    color: var(--cream-eyebrow);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
}
.qldh-metric-value {
    margin-top: 4px;
    font-size: 22px;
    font-weight: 600;
    color: var(--cream-text-strong);
    font-family: var(--serif);
}
.qldh-dialog-kpi {
    border-radius: 14px;
    background: var(--cream-card-bg);
    border: 1px solid var(--cream-card-border);
    padding: 10px 12px;
    text-align: right;
}
.qldh-kpi-label {
    color: var(--cream-eyebrow);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
}
.qldh-kpi-value {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 700;
    color: var(--cream-text-strong);
    font-family: var(--serif);
}
.qldh-dialog-body { padding: 12px; }
.qldh-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: transparent;
    border-bottom: 1px solid var(--cream-line);
}
.qldh-dialog :deep(.e-dlg-header-content) { padding: 0; }

/* Register fields */
.reg-field { display: grid; gap: 6px; }
.reg-label {
    color: var(--cream-eyebrow);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
}
.reg-field-error { color: #b91c1c; font-size: 12.5px; }
.reg-btn { border-radius: 12px; }
.reg-btn-flat { color: var(--cream-text-muted); background: transparent; border: none; }
.reg-note { margin: 4px 0 0; color: var(--cream-text-muted); font-size: 12.5px; font-style: italic; }

/* TelegramPermission */
.tp-section-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: var(--cream-text-strong);
    font-family: var(--serif);
    font-weight: 500;
}
.tp-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tp-field { display: flex; flex-direction: column; gap: 6px; }
.tp-field-inline { margin-top: 8px; }
.tp-label {
    color: var(--cream-eyebrow);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
}
.tp-command-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 12px;
    max-height: 320px;
    overflow: auto;
    padding: 6px 2px;
}
.tp-command-item {
    background: var(--cream-card-bg-soft);
    border: 1px solid var(--cream-line);
    border-radius: 12px;
    padding: 8px 10px;
    color: var(--cream-text);
}
.tp-muted { color: var(--cream-text-muted); font-size: 13px; font-style: italic; }
.tp-spinner, .tg-spinner, .bc-spinner { z-index: 2000; }

/* Dialog headers / shells / panels (used by bc, lk, mu, ns, nsd, qldh, tp, xn) */
.bc-dialog-header, .mu-dialog-header, .ns-dialog-header, .nsd-dialog-header,
.tp-dialog-header, .xn-dialog-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 2px 0;
}
.bc-dialog-title, .mu-dialog-title, .ns-dialog-title, .nsd-dialog-title,
.qldh-dialog-title, .tp-dialog-title, .xn-dialog-title {
    font-size: 16px;
    font-family: var(--serif);
    font-weight: 500;
    color: var(--cream-text-strong);
    letter-spacing: -.01em;
}
.bc-dialog-sub, .mu-dialog-sub, .ns-dialog-sub, .nsd-dialog-sub,
.qldh-dialog-sub, .tp-dialog-sub, .xn-dialog-sub {
    font-size: 12.5px;
    color: var(--cream-text-muted);
    font-style: italic;
}
.bc-dialog-shell, .xn-dialog-shell { padding: 14px; }
.tp-dialog-shell { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.mu-dialog-shell, .ns-dialog-shell, .nsd-dialog-shell {
    padding: 14px;
    display: grid;
    grid-template-columns: 1.4fr 0.6fr;
    gap: 12px;
}
.ns-dialog-shell, .nsd-dialog-shell { grid-template-columns: 1.35fr 0.65fr; }

.bc-dialog-panel, .mu-dialog-panel, .ns-dialog-panel, .nsd-dialog-panel,
.tp-dialog-panel, .xn-dialog-panel {
    background: var(--cream-card-bg-soft) !important;
    border: 1px solid var(--cream-line) !important;
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.mu-dialog-panel-right, .ns-dialog-panel-right, .nsd-dialog-panel-right {
    background: var(--cream-card-bg-strong) !important;
}
.bc-field-title, .mu-field-title, .ns-field-title, .nsd-field-title,
.tp-section-title, .xn-field-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--serif);
    font-weight: 500;
    color: var(--cream-text-strong);
    margin-bottom: 10px;
}
.bc-radio-group { display: flex; gap: 16px; flex-wrap: wrap; }
.tp-dialog-alert { margin-bottom: 10px; }

/* ──────────────────────────────────────────────────────
   BUTTONS — primary becomes warm gold
   ────────────────────────────────────────────────────── */
.home-btn.e-btn,
.bc-btn.e-btn, .lk-btn.e-btn, .mu-btn.e-btn, .ns-btn.e-btn,
.qldh-btn.e-btn, .tcs-btn.e-btn, .tp-btn.e-btn, .tg-btn.e-btn {
    border-radius: 12px;
    padding: 10px 14px;
    font-weight: 600;
    letter-spacing: .01em;
}

.home-btn.primary.e-btn,
.tcs-btn.primary.e-btn, .tp-btn.primary.e-btn, .tg-btn.primary.e-btn,
.qldh-btn-primary.e-btn, .qldh-btn-accent.e-btn,
.e-btn.btn-professional, .btn-professional.e-btn,
.btn-primary {
    background: var(--cream-gold) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: var(--cream-gold) !important;
    box-shadow: 0 6px 14px rgba(51, 65, 85, .25) !important;
}
.home-btn.primary.e-btn:hover,
.tcs-btn.primary.e-btn:hover, .tp-btn.primary.e-btn:hover, .tg-btn.primary.e-btn:hover,
.qldh-btn-primary.e-btn:hover, .qldh-btn-accent.e-btn:hover,
.e-btn.btn-professional:hover, .btn-professional.e-btn:hover,
.btn-primary:hover, .btn-primary:focus {
    background: var(--cream-gold-deep) !important;
    border-color: var(--cream-gold-deep) !important;
    color: #fff !important;
    filter: none !important;
}

.home-btn.ghost.e-btn,
.lk-btn.e-btn, .mu-btn.ghost.e-btn,
.qldh-btn-ghost.e-btn, .tcs-btn.ghost.e-btn, .tp-btn.ghost.e-btn,
.tg-btn.ghost.e-btn,
.btn-cancel-professional.e-btn {
    background: var(--cream-card-bg-soft) !important;
    color: var(--cream-text-strong) !important;
    border: 1px solid var(--cream-line) !important;
}
.home-btn.ghost.e-btn:hover,
.lk-btn.e-btn:hover, .mu-btn.ghost.e-btn:hover,
.qldh-btn-ghost.e-btn:hover, .tcs-btn.ghost.e-btn:hover,
.tp-btn.ghost.e-btn:hover, .tg-btn.ghost.e-btn:hover,
.btn-cancel-professional.e-btn:hover {
    background: var(--cream-card-bg) !important;
    border-color: var(--cream-line-strong) !important;
}

/* ──────────────────────────────────────────────────────
   APPBAR — TGift-style nav, recolored cream/gold
   The nav root is .appbar with scoped CSS in AppBar.razor.css
   for layout. We override the dark colors here so cream wins.
   ────────────────────────────────────────────────────── */
.appbar {
    background: linear-gradient(135deg, var(--cream-gold-deep) 0%, var(--cream-gold) 100%) !important;
    border-bottom: 1px solid var(--cream-line-strong) !important;
    box-shadow: 0 6px 18px rgba(30, 41, 59, .18);
}

.appbar .brand-text { color: #fff !important; }
.appbar .brand-icon { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25)); }

.appbar .nav-pill,
.appbar .nav-dropdown-toggle {
    color: rgba(255, 255, 255, .82) !important;
}
.appbar .nav-pill:hover,
.appbar .nav-dropdown-toggle:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .14) !important;
}
.appbar .nav-pill.active {
    color: #fff !important;
    background: rgba(255, 255, 255, .22) !important;
    font-weight: 600;
}

/* Dropdown panel — cream surface with gold border */
.appbar .dropdown-panel {
    background: var(--cream-card-bg-strong, #fff) !important;
    border: 1px solid var(--cream-line-strong) !important;
    box-shadow: 0 18px 38px rgba(30, 41, 59, .22) !important;
}
.appbar .dropdown-link {
    color: var(--cream-text-strong) !important;
}
.appbar .dropdown-link:hover {
    color: var(--cream-text-strong) !important;
    background: rgba(71, 85, 105, .14) !important;
}
.appbar .dropdown-link.active {
    color: var(--cream-gold-deep) !important;
    background: rgba(71, 85, 105, .18) !important;
    font-weight: 600;
}

/* User avatar + email */
.appbar .user-avatar {
    background: linear-gradient(135deg, var(--cream-gold-light) 0%, var(--cream-gold) 100%) !important;
    color: var(--cream-text-strong) !important;
    border: 1px solid rgba(255, 255, 255, .35);
}
.appbar .user-email {
    color: rgba(255, 255, 255, .92) !important;
    font-weight: 500;
}

/* Logout button on appbar */
.appbar .btn-logout {
    color: rgba(255, 255, 255, .82) !important;
}
.appbar .btn-logout:hover {
    color: #fff !important;
    background: rgba(220, 38, 38, .35) !important;
}

/* Hamburger lines */
.appbar .hamburger-line { background: #fff !important; }
.appbar .appbar-hamburger:hover { background: rgba(255, 255, 255, .14) !important; }

/* Mobile sidebar — cream surface.
   Note: SfSidebar in Syncfusion 29 renders CssClass="mobile-sidebar" as a
   literal HTML attribute, NOT as a CSS class. So we target .e-sidebar
   directly. BanHang only uses SfSidebar in AppBar, so this is unique.
   Syncfusion only sets z-index + width inline; explicit top/bottom/height
   here gives it the full viewport (otherwise it renders 0px tall and looks
   empty even when open). */
.e-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: var(--cream-card-bg-strong, #fff) !important;
    border-right: 1px solid var(--cream-line) !important;
    box-shadow: 4px 0 30px rgba(30, 41, 59, .22) !important;
    z-index: 1300 !important; /* above .appbar (1100) so it isn't covered */
    display: flex !important;
    flex-direction: column !important;
}
.e-sidebar.e-left { left: 0 !important; }
.e-sidebar.e-right { right: 0 !important; }
.e-sidebar .sb-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.e-sidebar .sb-header {
    border-bottom: 1px solid var(--cream-line) !important;
}
.e-sidebar .appbar-brand .brand-text {
    color: var(--cream-text-strong) !important;
}
.e-sidebar .sb-close {
    color: var(--cream-text-muted) !important;
}
.e-sidebar .sb-close:hover {
    color: var(--cream-text-strong) !important;
    background: rgba(71, 85, 105, .12) !important;
}
.e-sidebar .user-avatar {
    background: linear-gradient(135deg, var(--cream-gold) 0%, var(--cream-gold-deep) 100%) !important;
    color: #fff !important;
}
.e-sidebar .user-email { color: var(--cream-text) !important; }
.e-sidebar .sb-group-title {
    color: var(--cream-eyebrow) !important;
}
.e-sidebar .sb-link {
    color: var(--cream-text) !important;
}
.e-sidebar .sb-link:hover {
    color: var(--cream-text-strong) !important;
    background: rgba(71, 85, 105, .12) !important;
}
.e-sidebar .sb-link.active {
    color: var(--cream-gold-deep) !important;
    background: rgba(71, 85, 105, .18) !important;
}
.e-sidebar .sb-footer {
    border-top: 1px solid var(--cream-line) !important;
}
.e-sidebar .sb-logout {
    color: var(--cream-text-muted) !important;
}
.e-sidebar .sb-logout:hover {
    color: #b91c1c !important;
    background: rgba(220, 38, 38, .08) !important;
}

/* Syncfusion overlay (the dim screen behind sidebar) — warm, not pure black */
.e-overlay,
.e-sidebar-overlay {
    background: rgba(30, 41, 59, .45) !important;
}

/* ──────────────────────────────────────────────────────
   SYNCFUSION GRID — cream glass with gold accents
   ────────────────────────────────────────────────────── */
.e-grid,
.e-grid .e-gridcontent, .e-grid .e-gridheader, .e-grid .e-headercontent,
.e-grid .e-headercell, .e-grid .e-rowcell {
    background: transparent !important;
}
.e-grid {
    border: 1px solid var(--cream-card-border) !important;
    border-radius: 12px;
    overflow: hidden;
}
.e-grid .e-gridheader {
    background: rgba(255, 255, 255, .35) !important;
    border-bottom: 1px solid var(--cream-line) !important;
}
.e-grid .e-headercell {
    color: var(--cream-eyebrow) !important;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .72rem;
    font-weight: 600 !important;
    border-color: var(--cream-line) !important;
}
.e-grid .e-rowcell {
    color: var(--cream-text) !important;
    border-color: var(--cream-line) !important;
}
.e-grid .e-row:hover .e-rowcell { background: rgba(71, 85, 105, .08) !important; }
.e-grid .e-row.e-altrow .e-rowcell { background: rgba(255, 255, 255, .25) !important; }
.e-grid .e-summarycell {
    color: var(--cream-text-strong) !important;
    font-weight: 600;
}

/* Row highlight semantics — preserve red (shortage) / gold (excess) */
.bg-thieu, .e-row.bg-thieu .e-rowcell {
    background-color: rgba(220, 38, 38, .12) !important;
    color: #7a1f1f !important;
}
.bg-du, .e-row.bg-du .e-rowcell {
    background-color: rgba(71, 85, 105, .15) !important;
    color: var(--cream-text-strong) !important;
}

/* ──────────────────────────────────────────────────────
   SYNCFUSION INPUTS / TEXTAREAS / RADIO / CHECKBOX
   ────────────────────────────────────────────────────── */
.e-input-group, .e-input-group.e-control-wrapper,
.e-textbox,
.bc-numeric .e-input-group, .bc-textarea .e-input-group,
.lk-numeric .e-input-group,
.tp-input .e-input-group,
.tcs-numeric .e-input-group,
.xn-textarea .e-input-group {
    background: rgba(255, 255, 255, .75) !important;
    border: 1px solid var(--cream-line) !important;
    border-radius: 10px !important;
}
.e-input-group:not(.e-disabled):not(.e-success):not(.e-warning):not(.e-error):hover,
.e-input-group.e-input-focus {
    border-color: var(--cream-gold) !important;
    box-shadow: 0 0 0 3px rgba(71, 85, 105, .18) !important;
}
.e-input-group input.e-input, .e-input-group .e-input,
.e-input, .e-textbox input { color: var(--cream-text) !important; }

input[type="text"], input[type="email"], input[type="number"],
input[type="date"], input[type="search"], input[type="password"],
select, textarea {
    background: rgba(255, 255, 255, .75);
    border: 1px solid var(--cream-line);
    color: var(--cream-text);
    border-radius: 8px;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus,
input[type="date"]:focus, input[type="search"]:focus, input[type="password"]:focus,
select:focus, textarea:focus {
    border-color: var(--cream-gold);
    outline: none;
    box-shadow: 0 0 0 3px rgba(71, 85, 105, .18);
}

.e-radio-wrapper, .bc-radio .e-radio-wrapper {
    background: var(--cream-card-bg-strong) !important;
    border: 1px solid var(--cream-line) !important;
    border-radius: 10px;
    padding: 6px 12px;
}
.e-radio:checked + label::before,
.e-checkbox-wrapper .e-frame.e-check {
    background: var(--cream-gold) !important;
    border-color: var(--cream-gold) !important;
}

/* ──────────────────────────────────────────────────────
   SYNCFUSION DIALOG — cream surface with gold accents
   ────────────────────────────────────────────────────── */
.e-dialog,
.e-dialog.e-dialog-professional,
.bc-dialog .e-dialog,
.qldh-dialog.e-dialog {
    background: var(--cream-card-bg-strong, #fff) !important;
    border: 1px solid var(--cream-line-strong) !important;
    border-radius: 16px !important;
    box-shadow: 0 30px 60px rgba(30, 41, 59, .25) !important;
}
.e-dialog .e-dlg-header-content,
.e-dialog .e-dlg-header {
    background: transparent !important;
    border-bottom: 1px solid var(--cream-line) !important;
    color: var(--cream-text-strong) !important;
}
.e-dialog .e-footer-content {
    background: transparent !important;
    border-top: 1px solid var(--cream-line) !important;
}

.e-spinner-pane .e-spinner-inner svg path { stroke: var(--cream-gold) !important; }

/* ──────────────────────────────────────────────────────
   LOGIN PAGE (Index.razor) — cream-glass card
   Overrides app.css's dark login-card
   ────────────────────────────────────────────────────── */
.login-container .login-card {
    background: var(--cream-card-bg-strong, rgba(255, 255, 255, .85)) !important;
    border: 1px solid var(--cream-line-strong) !important;
    box-shadow: 0 30px 60px rgba(30, 41, 59, .18) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.login-container .ai-glow {
    background: radial-gradient(circle, rgba(71, 85, 105, .14) 0%, transparent 70%) !important;
}
.login-container .login-header h1 {
    color: var(--cream-text-strong) !important;
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.02em;
}
.login-container .login-header p {
    color: var(--cream-text-muted) !important;
    font-style: italic;
}
.login-container .ai-logo .logo-core { color: var(--cream-gold-deep) !important; }
.login-container .ai-logo .ring { border-color: var(--cream-gold-light) !important; }

.login-container .auth-separator .separator-line {
    background: linear-gradient(90deg, transparent, var(--cream-line-strong), transparent) !important;
}
.login-container .auth-separator .separator-text {
    color: var(--cream-eyebrow) !important;
}

.login-container .social-neural { color: var(--cream-text-strong) !important; }
.login-container .social-neural .social-bg {
    background: var(--cream-card-bg-soft) !important;
    border: 1px solid var(--cream-line) !important;
}
.login-container .social-neural:hover .social-bg {
    background: var(--cream-card-bg) !important;
    border-color: var(--cream-line-strong) !important;
}
.login-container .social-neural .social-glow {
    background: rgba(71, 85, 105, .25) !important;
}

/* ──────────────────────────────────────────────────────
   REGISTER smart-fields
   ────────────────────────────────────────────────────── */
.reg-bg .smart-field .field-background,
.smart-field .field-background {
    background: rgba(255, 255, 255, .7) !important;
    border: 1px solid var(--cream-line) !important;
}
.smart-field input { color: var(--cream-text) !important; }
.smart-field label {
    color: var(--cream-text-muted) !important;
    background: rgba(240, 243, 246, .9) !important;
}
.smart-field input:focus + label,
.smart-field input:not(:placeholder-shown) + label {
    color: var(--cream-gold-deep) !important;
}
.smart-field input:focus ~ .field-background {
    border-color: var(--cream-gold) !important;
    background: rgba(255, 255, 255, .9) !important;
    box-shadow: 0 0 0 1px rgba(71, 85, 105, .35) !important;
}
.smart-field .field-completion {
    background: linear-gradient(90deg, var(--cream-gold-light), var(--cream-gold)) !important;
}

.neural-button .button-bg {
    background: linear-gradient(135deg, var(--cream-gold) 0%, var(--cream-gold-deep) 100%) !important;
}
.neural-button:hover .button-bg {
    background: linear-gradient(135deg, var(--cream-gold-deep) 0%, var(--cream-gold) 100%) !important;
}
.neural-button .button-glow {
    background: linear-gradient(135deg, var(--cream-gold-light), var(--cream-gold)) !important;
}

.neural-link, .neural-signup { color: var(--cream-gold-deep) !important; }
.neural-link::after, .neural-signup::after { background: var(--cream-gold) !important; }
.neural-link:hover, .neural-signup:hover { color: var(--cream-gold) !important; }

.smart-checkbox { color: var(--cream-text) !important; }
.smart-checkbox input[type="checkbox"]:checked + .checkbox-ai .checkbox-core {
    background: var(--cream-gold) !important;
    border-color: var(--cream-gold) !important;
    box-shadow: 0 0 8px rgba(71, 85, 105, .35) !important;
}
.smart-checkbox .checkbox-core {
    background: rgba(255, 255, 255, .65) !important;
    border-color: var(--cream-line-strong) !important;
}

/* ──────────────────────────────────────────────────────
   GENERIC TEXT
   ────────────────────────────────────────────────────── */
a:not(.e-btn):not(.social-neural):not(.neural-link):not(.neural-signup) {
    color: var(--cream-gold-deep);
}
a:not(.e-btn):not(.social-neural):not(.neural-link):not(.neural-signup):hover {
    color: var(--cream-gold);
}
code, .font-weight-bold { color: var(--cream-text-strong); }

/* ══════════════════════════════════════════════════════
   THONG-TIN-BAN-HANG-DAY-DU — earnings-style layout
   Filter row, pill toolbar, summary cards, plain table.
   Cream-gold palette (no purple). Used by /thongtinbanhangdaydu.
   ══════════════════════════════════════════════════════ */

.tt-loading {
    margin: 12px 0;
    padding: 18px;
    text-align: center;
    color: var(--cream-text-muted);
    font-style: italic;
}

.tt-error {
    margin: 8px 0 12px;
    padding: 10px 14px;
    background: rgba(220, 38, 38, .08);
    border: 1px solid rgba(220, 38, 38, .35);
    border-radius: 10px;
    color: #7a1f1f;
    font-size: .9rem;
}

/* ── Filter row ─────────────────────────────────────── */
.tt-filters {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: flex-end;
    background: var(--cream-card-bg);
    border: 1px solid var(--cream-card-border);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 12px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.tt-filter {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
}

.tt-filter-grow { flex: 1; min-width: 220px; }

.tt-filter-label {
    font-size: .7rem;
    text-transform: uppercase;
    color: var(--cream-eyebrow);
    font-weight: 600;
    letter-spacing: .12em;
}

.tt-filter-input {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--cream-line);
    background: rgba(255, 255, 255, .75);
    color: var(--cream-text);
    font-size: .92rem;
    font-family: inherit;
}

.tt-filter-input:focus {
    outline: none;
    border-color: var(--cream-gold);
    box-shadow: 0 0 0 3px rgba(71, 85, 105, .18);
}

.tt-filter-quick { display: flex; gap: 6px; flex-wrap: wrap; }

.tt-quick-btn {
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--cream-line);
    color: var(--cream-text-strong);
    padding: 7px 12px;
    border-radius: 8px;
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.tt-quick-btn:hover {
    background: rgba(71, 85, 105, .12);
    border-color: var(--cream-gold);
    color: var(--cream-gold-deep);
}

.tt-filter-reloading {
    color: var(--cream-gold-deep);
    font-size: .85rem;
    font-weight: 600;
    align-self: flex-end;
    padding-bottom: 6px;
    font-style: italic;
}

/* ── Summary cards ──────────────────────────────────── */
.tt-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin: 4px 0 14px;
}
.tt-card {
    background: var(--cream-card-bg-strong);
    border: 1px solid var(--cream-card-border);
    border-radius: 14px;
    padding: 14px 16px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.tt-card-accent {
    background: linear-gradient(180deg, rgba(148, 163, 184, .35) 0%, rgba(255, 255, 255, .82) 100%);
    border-color: var(--cream-line-strong);
}
.tt-card-clear {
    background: linear-gradient(180deg, rgba(71, 85, 105, .14) 0%, rgba(255, 255, 255, .82) 100%);
    border-color: var(--cream-line-strong);
}
.tt-card-due {
    background: linear-gradient(180deg, rgba(220, 38, 38, .10) 0%, rgba(255, 255, 255, .82) 100%);
    border-color: rgba(220, 38, 38, .35);
}
.tt-label {
    font-size: .7rem;
    text-transform: uppercase;
    color: var(--cream-eyebrow);
    letter-spacing: .12em;
    font-weight: 600;
}
.tt-value {
    margin-top: 4px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--cream-text-strong);
    font-family: var(--serif);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* ── Table ──────────────────────────────────────────── */
.tt-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--cream-card-bg-strong);
    border: 1px solid var(--cream-card-border);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.tt-table th, .tt-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--cream-line);
    color: var(--cream-text);
    font-size: .88rem;
}
.tt-table thead th {
    font-size: .7rem;
    text-transform: uppercase;
    color: var(--cream-eyebrow);
    background: rgba(255, 255, 255, .35);
    letter-spacing: .12em;
    font-weight: 700;
}
.tt-table tbody tr:hover td { background: rgba(71, 85, 105, .08); }
.tt-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .25); }
.tt-table tfoot td {
    background: rgba(71, 85, 105, .12);
    border-top: 1px solid var(--cream-line-strong);
    border-bottom: none;
    font-family: var(--serif);
    color: var(--cream-text-strong);
}
.tt-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tt-pos { color: #166534; font-weight: 600; }
.tt-neg { color: #b91c1c; font-weight: 600; }

.tt-empty {
    margin: 8px 0;
    padding: 22px;
    background: var(--cream-card-bg-soft);
    border: 1px dashed var(--cream-line-strong);
    border-radius: 12px;
    color: var(--cream-text-muted);
    font-style: italic;
    text-align: center;
}

/* ── Mobile card list (alt of .tt-table on small screens) ── */
.tt-desktop-only { display: table; }
.tt-mobile-only  { display: none; }

.tt-list {
    flex-direction: column;
    gap: 8px;
}
.tt-row-card {
    background: var(--cream-card-bg-strong);
    border: 1px solid var(--cream-card-border);
    border-radius: 12px;
    padding: 12px 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.tt-row-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.tt-row-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--cream-text-strong);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tt-row-profit {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
.tt-row-meta {
    margin-top: 4px;
    font-size: 12px;
    color: var(--cream-text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.tt-row-sep {
    color: var(--cream-text-soft);
    opacity: .55;
}
.tt-row-numbers {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--cream-line);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.tt-row-num {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.tt-row-num-k {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cream-eyebrow);
    font-weight: 600;
}
.tt-row-num-v {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--cream-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tt-row-num-strong {
    font-weight: 700;
    color: var(--cream-text-strong);
}

.tt-row-total {
    margin-top: 4px;
    padding: 12px 14px;
    background: var(--cream-card-bg);
    border: 1px solid var(--cream-line-strong);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.tt-row-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 13px;
    color: var(--cream-text-muted);
}
.tt-row-total-row strong {
    font-size: 14px;
    color: var(--cream-text-strong);
    font-variant-numeric: tabular-nums;
    font-family: var(--serif);
}

/* ── Pager ──────────────────────────────────────────── */
.tt-pager {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
    margin: 12px 0 4px;
}
.tt-page-btn {
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--cream-line);
    color: var(--cream-text-strong);
    padding: 7px 14px;
    border-radius: 8px;
    font-size: .85rem;
    cursor: pointer;
    font-weight: 600;
}
.tt-page-btn:hover:not(:disabled) {
    background: rgba(71, 85, 105, .12);
    border-color: var(--cream-gold);
    color: var(--cream-gold-deep);
}
.tt-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.tt-page-info { font-size: .85rem; color: var(--cream-text); font-weight: 600; }
.tt-page-sub { font-size: .78rem; color: var(--cream-text-muted); font-weight: 400; margin-left: 4px; }

/* ── tt mobile responsive ───────────────────────────── */
@media (max-width: 768px) {
    .tt-desktop-only { display: none !important; }
    .tt-mobile-only  { display: flex !important; }

    .tt-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
    .tt-card  { padding: 10px 12px; }
    .tt-value { font-size: 1.05rem; }

    .tt-filters {
        padding: 10px;
        gap: 10px;
        border-radius: 12px;
    }
    .tt-filter { min-width: calc(50% - 5px); }
    .tt-filter-grow { min-width: 100%; }
    .tt-filter-quick {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .tt-quick-btn { white-space: nowrap; flex-shrink: 0; }
    .tt-filter-input { font-size: 16px; /* prevent iOS zoom */ }

    .tt-pager { gap: 8px; flex-wrap: wrap; }
    .tt-page-btn { padding: 7px 12px; }

    .tt-title { font-size: 28px !important; }
}

/* ══════════════════════════════════════════════════════
   INLINE PRODUCT EDITOR — /nhapsanpham, /nhapsanphamdaydu
   Scanner-first inline edit. Top toolbar (scan + counters +
   batch save) + editable table with per-row status dot.
   ══════════════════════════════════════════════════════ */
.ip-toolbar {
    display: flex;
    gap: 14px;
    align-items: stretch;
    padding: 14px 16px;
    background: var(--cream-card-bg-strong);
    border: 1px solid var(--cream-card-border);
    border-radius: 16px;
    margin-bottom: 14px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.ip-scan {
    position: relative;
    flex: 1 1 auto;
    min-width: 280px;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .85);
    border: 1px solid var(--cream-line);
    border-radius: 12px;
    padding: 0 14px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.ip-scan:focus-within {
    border-color: var(--cream-gold);
    box-shadow: 0 0 0 4px rgba(71, 85, 105, .15);
}
.ip-scan-icon {
    color: var(--cream-gold-deep);
    font-size: 18px;
    margin-right: 10px;
}
.ip-scan-input {
    flex: 1;
    padding: 14px 0;
    border: none;
    background: transparent;
    color: var(--cream-text-strong);
    font-size: 15px;
    font-family: var(--serif);
    outline: none;
}
.ip-scan-input::placeholder { color: var(--cream-text-soft); }
.ip-scan-status {
    color: var(--cream-gold-deep);
    font-size: 13px;
    font-style: italic;
    margin-left: 10px;
}

.ip-stats {
    display: flex;
    gap: 8px;
}
.ip-stat {
    background: rgba(255, 255, 255, .65);
    border: 1px solid var(--cream-line);
    border-radius: 12px;
    padding: 8px 14px;
    text-align: center;
    min-width: 84px;
}
.ip-stat-warn {
    background: linear-gradient(180deg, rgba(71, 85, 105, .14) 0%, rgba(255, 255, 255, .8) 100%);
    border-color: var(--cream-line-strong);
}
.ip-stat-k {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--cream-eyebrow);
    font-weight: 600;
}
.ip-stat-v {
    margin-top: 2px;
    font-size: 18px;
    font-weight: 700;
    color: var(--cream-text-strong);
    font-family: var(--serif);
    font-variant-numeric: tabular-nums;
}

.ip-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.ip-btn {
    padding: 10px 18px;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 60ms ease;
    font-family: var(--serif);
    border: 1px solid transparent;
}
.ip-btn:active:not(:disabled) { transform: translateY(1px); }
.ip-btn:disabled { opacity: .45; cursor: not-allowed; }
.ip-btn-primary {
    background: linear-gradient(135deg, var(--cream-gold) 0%, var(--cream-gold-deep) 100%);
    color: #fff;
    border-color: var(--cream-gold-deep);
    box-shadow: 0 4px 12px rgba(71, 85, 105, .25);
}
.ip-btn-primary:hover:not(:disabled) {
    background: var(--cream-gold-deep);
}
.ip-btn-ghost {
    background: rgba(255, 255, 255, .7);
    border-color: var(--cream-line);
    color: var(--cream-text-strong);
}
.ip-btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, .9);
    border-color: var(--cream-gold);
    color: var(--cream-gold-deep);
}

.ip-alert {
    padding: 10px 14px;
    border-radius: 10px;
    margin-bottom: 12px;
    font-size: .9rem;
}
.ip-alert-success {
    background: rgba(180, 138, 58, .10);
    border: 1px solid var(--cream-line-strong);
    color: var(--cream-text-strong);
}
.ip-alert-error {
    background: rgba(220, 38, 38, .10);
    border: 1px solid rgba(220, 38, 38, .35);
    color: #7a1f1f;
}

.ip-empty {
    padding: 48px 24px;
    background: var(--cream-card-bg-soft);
    border: 1px dashed var(--cream-line-strong);
    border-radius: 14px;
    color: var(--cream-text-muted);
    text-align: center;
    font-style: italic;
    line-height: 1.7;
}

.ip-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--cream-card-bg-strong);
    border: 1px solid var(--cream-card-border);
    border-radius: 14px;
    overflow: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ip-table thead th {
    padding: 12px 12px;
    text-align: left;
    font-size: .7rem;
    text-transform: uppercase;
    color: var(--cream-eyebrow);
    background: rgba(255, 255, 255, .35);
    letter-spacing: .12em;
    font-weight: 700;
    border-bottom: 1px solid var(--cream-line);
}
.ip-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--cream-line);
    color: var(--cream-text);
    vertical-align: middle;
}
.ip-table tbody tr:last-child td { border-bottom: none; }
.ip-row { transition: background 200ms ease; }
.ip-row:hover { background: rgba(71, 85, 105, .05); }
.ip-row-new { background: rgba(125, 211, 252, .10); }
.ip-row-dirty { background: rgba(71, 85, 105, .10); }
.ip-row-saving { background: rgba(255, 255, 255, .35); opacity: .7; }
.ip-row-saved { background: rgba(34, 197, 94, .12); }
.ip-row-error { background: rgba(220, 38, 38, .10); }

.ip-st-col { width: 32px; text-align: center; }
.ip-act-col { width: 88px; text-align: right; white-space: nowrap; }
.ip-num { text-align: right; font-variant-numeric: tabular-nums; }

.ip-mono {
    font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
    font-size: .82rem;
    color: var(--cream-text-strong);
    font-weight: 600;
}

.ip-cell {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--cream-text);
    font-size: .9rem;
    font-family: var(--serif);
    border-radius: 6px;
    transition: background 100ms ease, border-color 100ms ease;
}
.ip-cell:hover:not(:disabled) {
    background: rgba(255, 255, 255, .65);
    border-color: var(--cream-line);
}
.ip-cell:focus {
    outline: none;
    background: #fff;
    border-color: var(--cream-gold);
    box-shadow: 0 0 0 3px rgba(71, 85, 105, .14);
}
.ip-cell:disabled {
    color: var(--cream-text-muted);
    background: rgba(30, 41, 59, .04);
    cursor: not-allowed;
}
.ip-cell-num { text-align: right; font-variant-numeric: tabular-nums; }
.ip-cell-text {
    resize: vertical;
    min-height: 32px;
    line-height: 1.4;
    font-family: var(--serif);
}

.ip-filter-group {
    display: flex;
    gap: 8px;
    align-items: stretch;
    flex-wrap: wrap;
}
.ip-filter-select {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--cream-line);
    background: rgba(255, 255, 255, .85);
    color: var(--cream-text);
    font-size: .9rem;
    font-family: var(--serif);
    min-width: 160px;
    cursor: pointer;
}
.ip-filter-select:focus {
    outline: none;
    border-color: var(--cream-gold);
    box-shadow: 0 0 0 4px rgba(71, 85, 105, .15);
}

.ip-cb {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--cream-gold);
    vertical-align: middle;
}
.ip-cb:disabled { opacity: .4; cursor: not-allowed; }
.ip-row-approving { background: rgba(255, 255, 255, .35); opacity: .65; }
.ip-row-approved {
    background: rgba(34, 197, 94, .18);
    transition: opacity 600ms ease;
}

.ip-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: rgba(30, 41, 59, .25);
    vertical-align: middle;
}
.ip-dot-new { background: #38bdf8; box-shadow: 0 0 0 3px rgba(56, 189, 248, .25); }
.ip-dot-dirty { background: var(--cream-gold); box-shadow: 0 0 0 3px rgba(71, 85, 105, .25); }
.ip-dot-saving { background: var(--cream-gold-deep); animation: ip-pulse 1.2s ease-in-out infinite; }
.ip-dot-saved { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .25); }
.ip-dot-error { background: #dc2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, .25); }
.ip-dot-ok { background: rgba(30, 41, 59, .25); }

@keyframes ip-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .55; transform: scale(.85); }
}

.ip-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--cream-text-muted);
    cursor: pointer;
    margin-left: 2px;
    font-size: 16px;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.ip-icon-btn:hover:not(:disabled) {
    background: rgba(71, 85, 105, .12);
    border-color: var(--cream-line);
    color: var(--cream-gold-deep);
}
.ip-icon-btn:disabled { opacity: .35; cursor: not-allowed; }

/* ── Mobile card list (alt to .ip-table on phones) ── */
.ip-desktop-only { /* default visible — actual display set by element */ }
.ip-mobile-only  { display: none; }

.ip-list {
    flex-direction: column;
    gap: 10px;
}

.ip-card-row {
    background: var(--cream-card-bg-strong);
    border: 1px solid var(--cream-card-border);
    border-radius: 14px;
    padding: 12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: background 200ms ease;
}

.ip-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--cream-line);
}
.ip-card-x { margin-left: auto; }

.ip-card-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.ip-card-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--cream-eyebrow);
    font-weight: 600;
}

.ip-card-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ip-card-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.ip-card-title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: var(--cream-text-strong);
    font-family: var(--serif);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ip-card-static {
    font-size: 14px;
    color: var(--cream-text);
    font-variant-numeric: tabular-nums;
    padding: 7px 0;
    word-break: break-word;
}

.ip-card-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.ip-btn-sm {
    padding: 8px 14px;
    font-size: .85rem;
    border-radius: 10px;
}

/* Inputs inside cards: full-bordered (table inputs are borderless) */
.ip-card-row .ip-cell {
    border: 1px solid var(--cream-line);
    background: rgba(255, 255, 255, .85);
}
.ip-card-row .ip-cell:focus {
    border-color: var(--cream-gold);
    box-shadow: 0 0 0 3px rgba(71, 85, 105, .14);
    background: #fff;
}

@media (max-width: 980px) {
    .ip-toolbar { flex-direction: column; }
    .ip-stats { justify-content: space-between; }
    .ip-table { font-size: .82rem; }
    .ip-act-col { width: 70px; }
}

@media (max-width: 768px) {
    .ip-desktop-only { display: none !important; }
    .ip-mobile-only  { display: flex !important; }

    .ip-toolbar {
        padding: 10px;
        gap: 10px;
        border-radius: 12px;
    }
    .ip-scan { min-width: 0; padding: 0 10px; }
    .ip-scan-input { padding: 12px 0; font-size: 16px; }
    .ip-stats { width: 100%; gap: 6px; }
    .ip-stat { flex: 1; min-width: 0; padding: 6px 8px; }
    .ip-actions { width: 100%; }
    .ip-actions .ip-btn { flex: 1; }
    .ip-cell { font-size: 16px; padding: 10px 12px; }
    .ip-empty { padding: 28px 16px; font-size: .9rem; }
}

/* ── Home grid (per-permission tile list) ───────────────── */
.home-greeting { margin: 8px 0 28px; }
.home-greeting-eyebrow {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--cream-eyebrow);
    font-weight: 600;
    margin-bottom: 6px;
}
.home-greeting-title {
    margin: 0 0 8px;
    font-size: 32px;
    line-height: 1.15;
    color: var(--cream-text-strong);
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -.02em;
}
.home-greeting-sub {
    margin: 0;
    color: var(--cream-text-muted);
    font-style: italic;
    font-size: 14px;
}

.home-section { margin-bottom: 28px; }
.home-section-title {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--cream-eyebrow);
    font-weight: 600;
    margin: 0 0 12px 4px;
    font-family: var(--serif);
}

.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

.home-tile-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    background: var(--cream-card-bg-strong);
    border: 1px solid var(--cream-card-border);
    color: var(--cream-text-strong);
    text-decoration: none !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 4px 14px rgba(30, 41, 59, .06);
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.home-tile-link:hover {
    transform: translateY(-2px);
    border-color: var(--cream-gold);
    box-shadow: 0 12px 26px rgba(30, 41, 59, .15);
    background: rgba(255, 255, 255, .98);
    color: var(--cream-text-strong) !important;
}

.home-tile-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background: linear-gradient(135deg, rgba(148, 163, 184, .35) 0%, rgba(71, 85, 105, .28) 100%);
    border: 1px solid var(--cream-line);
    color: var(--cream-gold-deep);
    font-size: 20px;
}
.home-tile-accent-2 .home-tile-icon {
    background: linear-gradient(135deg, rgba(71, 85, 105, .32) 0%, rgba(51, 65, 85, .35) 100%);
    border-color: var(--cream-line-strong);
}
.home-tile-accent-3 .home-tile-icon {
    background: linear-gradient(135deg, rgba(51, 65, 85, .32) 0%, rgba(30, 41, 59, .35) 100%);
    border-color: var(--cream-line-strong);
    color: var(--cream-text-strong);
}

.home-tile-text { flex: 1 1 auto; min-width: 0; }
.home-tile-title {
    font-weight: 600;
    font-size: 15px;
    color: var(--cream-text-strong);
    font-family: var(--serif);
    letter-spacing: -.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-tile-sub {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--cream-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.home-tile-arrow {
    color: var(--cream-gold-deep);
    font-size: 20px;
    flex: 0 0 auto;
    opacity: 0;
    transition: opacity 160ms ease, transform 160ms ease;
    margin-left: 4px;
}
.home-tile-link:hover .home-tile-arrow {
    opacity: 1;
    transform: translateX(3px);
}

@media (max-width: 600px) {
    .home-grid { grid-template-columns: 1fr; }
    .home-greeting-title { font-size: 26px; }
}

/* ── Stocktake worksheet (báo cáo cân đối) ───────────────── */
.ip-btn-icon {
    width: 48px;
    padding: 0;
    font-size: 18px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bc-row-thieu td:not(.ip-st-col):not(.ip-act-col) {
    background: rgba(220, 38, 38, .07);
}
.bc-row-du td:not(.ip-st-col):not(.ip-act-col) {
    background: rgba(71, 85, 105, .12);
}
.bc-lech-neg { color: #b91c1c; font-weight: 700; }
.bc-lech-pos { color: var(--cream-gold-deep); font-weight: 700; }
.bc-lech-zero { color: var(--cream-text-muted); }

/* ── Camera scan modal ──────────────────────────────────── */
.cam-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(15, 23, 42, .68);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.cam-shell {
    width: min(92vw, 520px);
    background: var(--cream-card-bg-strong);
    border: 1px solid var(--cream-line-strong);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .35);
    display: flex;
    flex-direction: column;
}
.cam-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    color: var(--cream-text-strong);
    font-family: var(--serif);
    font-weight: 500;
    border-bottom: 1px solid var(--cream-line);
    background: rgba(255, 255, 255, .55);
}
.cam-viewport {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #000;
    position: relative;
    overflow: hidden;
}
.cam-viewport video,
.cam-viewport canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
/* Square scan guide overlay — visual cue for user (any orientation works) */
.cam-viewport::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 78%;
    height: 78%;
    border: 2px solid rgba(255, 255, 255, .65);
    border-radius: 12px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, .35);
    pointer-events: none;
}
.cam-err {
    padding: 10px 14px;
    background: rgba(220, 38, 38, .12);
    color: #7a1f1f;
    font-size: .9rem;
    border-top: 1px solid rgba(220, 38, 38, .25);
}

/* ──────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────── */
@media (max-width: 980px) {
    .home-bg .hero,
    .bc-hero, .lk-hero, .mu-hero, .ns-hero, .nsd-hero, .qldh-hero,
    .tcs-hero, .tg-hero, .tt-hero, .xn-hero {
        grid-template-columns: 1fr;
    }

    .home-bg .feature-row,
    .home-bg .meta,
    .bc-meta, .mu-meta, .tt-meta,
    .qldh-metrics,
    .lk-form, .lk-grid-layout,
    .ns-two, .nsd-two,
    .tp-field-grid, .tp-command-grid,
    .mu-dialog-shell, .ns-dialog-shell, .nsd-dialog-shell {
        grid-template-columns: 1fr;
    }

    .home-bg .title,
    .bc-title, .lk-title, .mu-title, .ns-title, .nsd-title, .qldh-title,
    .tcs-title, .tp-title, .tg-title, .tt-title, .xn-title {
        font-size: 32px;
    }

    .qldh-actions { justify-content: flex-start; }

    .ns-grid-body, .nsd-grid-body { height: 420px; }

    .tp-dialog.e-dialog { width: 95vw !important; max-width: 95vw !important; }
}

/* ──────────────────────────────────────────────────────
   REDUCED MOTION
   ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    body { animation: none; }
    .home-bg .logo-rings .ring,
    .bc-logo-rings .ring, .lk-logo-rings .ring, .mu-logo-rings .ring,
    .ns-logo-rings .ring, .tcs-logo-rings .ring, .tg-logo-rings .ring,
    .tt-logo-rings .ring, .xn-logo-rings .ring,
    .login-container .ai-logo .ring {
        animation: none;
    }
}