/* Styles for custom stock filter interface */

/* ============================================================
   Design tokens — theme-agnostic component styles reference these
   via var(--...). Three states are wired:
     :root                                 → light (default)
     @media (prefers-color-scheme: dark)   → follows OS
       (guarded by :not([data-theme]) so an explicit choice wins)
     :root[data-theme="dark"]              → JS toggle override
   The bottom of this file has a large :root[data-theme="dark"]
   patch block that also monkey-patches semantic components (chip
   pastels, pack colors) whose colour needs bespoke reworking for
   the dark ground — those never went through tokens.
============================================================ */
:root {
    --bg:            #f8fafc;
    --surface:       #ffffff;
    --surface-2:     #f9fafb;
    --surface-hover: #f1f5f9;

    --text:          #111827;
    --text-muted:    #6b7280;
    --text-faint:    #94a3b8;
    --text-quiet:    #9ca3af;
    --text-heading:  #0f172a;

    --border:        #e5e7eb;
    --border-strong: #d1d5db;
    --border-subtle: #f1f5f9;
    --border-tint:   #e2e8f0;

    --accent:        #10b981;
    --accent-hover:  #059669;
    --accent-soft:   #ecfdf5;
    --accent-text:   #065f46;
    --accent-tint:   #a7f3d0;

    --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-accent: 0 2px 6px rgba(16, 185, 129, 0.25);
}
/* Dark palette calibrated against simplize.vn's own dark mode — near-black
   ground (#0a0a0a) with #191919 cards, #2d2e2f hover, pure-white text.
   The brand accent stays green (project identity); everything else follows
   the simplize stack for the same visual mood. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:            #0a0a0a;
        --surface:       #191919;
        --surface-2:     #0d0d0d;
        --surface-hover: #2d2e2f;

        --text:          #ffffff;
        --text-muted:    #a7adb2;
        --text-faint:    #656f79;
        --text-quiet:    #a7adb2;
        --text-heading:  #ffffff;

        --border:        rgba(255, 255, 255, 0.10);
        --border-strong: rgba(255, 255, 255, 0.16);
        --border-subtle: rgba(255, 255, 255, 0.05);
        --border-tint:   rgba(255, 255, 255, 0.10);

        --accent:        #34D399;
        --accent-hover:  #4ADE80;
        --accent-soft:   rgba(52, 211, 153, 0.14);
        --accent-text:   #A7F3D0;
        --accent-tint:   rgba(52, 211, 153, 0.32);

        --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.6);
        --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.7);
        --shadow-accent: 0 2px 6px rgba(52, 211, 153, 0.25);
    }
}
:root[data-theme="dark"] {
    --bg:            #0a0a0a;
    --surface:       #191919;
    --surface-2:     #0d0d0d;
    --surface-hover: #2d2e2f;

    --text:          #ffffff;
    --text-muted:    #a7adb2;
    --text-faint:    #656f79;
    --text-quiet:    #a7adb2;
    --text-heading:  #ffffff;

    --border:        rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.16);
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-tint:   rgba(255, 255, 255, 0.10);

    --accent:        #34D399;
    --accent-hover:  #4ADE80;
    --accent-soft:   rgba(52, 211, 153, 0.14);
    --accent-text:   #A7F3D0;
    --accent-tint:   rgba(52, 211, 153, 0.32);

    --shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.6);
    --shadow-md:     0 4px 16px rgba(0, 0, 0, 0.7);
    --shadow-accent: 0 2px 6px rgba(52, 211, 153, 0.25);
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.container {
    margin-top: 30px;
    max-width: 1200px;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.page-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.page-header-right {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* ── Auth UI: Login button + User avatar menu ─────────────────────────────── */
.btn-login {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--surface, #fff);
    color: var(--text, #1e293b);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    cursor: pointer;
}
.btn-login:hover {
    background: var(--surface-2, #f8fafc);
    border-color: var(--border-strong, #cbd5e1);
    text-decoration: none;
}

.user-menu {
    position: relative;
    display: inline-block;
}
/* Header button: chỉ avatar + caret nhỏ — compact, không show name. Style
   như FireAnt: avatar tròn 32px + caret bên phải, không viền pill. */
.user-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 2px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s;
}
.user-menu-btn:hover { background: var(--surface-2, #f8fafc); }
.user-menu-btn:focus,
.user-menu-btn:focus-visible { outline: none; }
.user-avatar-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Padding-bottom để chừa chỗ cho badge overflow — không cắt vào caret. */
    padding-bottom: 8px;
}
.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--border, #e2e8f0);
    display: block;
}
/* Tier badge nhỏ dưới avatar (kiểu Simplize) — visual identifier compact,
   biết tier ngay không cần mở dropdown. */
.user-tier-badge {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border-radius: 8px;
    line-height: 1.3;
    background: #64748b;
    color: #fff;
    border: 1.5px solid var(--surface, #fff);
    white-space: nowrap;
    text-transform: uppercase;
}
.user-tier-badge.tier-free    { background: #64748b; }  /* xám */
.user-tier-badge.tier-basic   { background: #2563eb; }  /* xanh */
.user-tier-badge.tier-pro     { background: #dc2626; }  /* đỏ */
.user-tier-badge.tier-premium { background: linear-gradient(135deg, #eab308, #dc2626); }  /* gold-red */
.user-menu-caret {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 50%;
    color: var(--text-muted, #64748b);
    font-size: 9px;
    margin-left: -6px;
    margin-top: 20px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    flex-shrink: 0;
}

/* Dropdown: centered avatar + info + menu items — như FireAnt */
.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 260px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
    z-index: 1000;
    overflow: hidden;
    padding: 4px 0;
}
.user-menu-header {
    padding: 18px 16px 14px;
    text-align: center;
}
.user-menu-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border, #e2e8f0);
    margin-bottom: 10px;
}
.user-menu-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text, #1e293b);
    margin-bottom: 4px;
}
.user-menu-tier {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted, #94a3b8);
}
.user-menu-tier.tier-free { color: var(--text-muted, #94a3b8); }
.user-menu-tier.tier-basic { color: #2563eb; }
.user-menu-tier.tier-pro   { color: #dc2626; }
.user-menu-tier.tier-premium {
    /* Gold-red gradient text — nhất quán với .user-tier-badge.tier-premium
       (badge chip trên avatar) để user phân biệt Premium (top tier) với
       Pro (paid tier thường). */
    background: linear-gradient(135deg, #eab308, #dc2626);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
}

.user-menu-divider {
    height: 1px;
    background: var(--border, #e2e8f0);
    margin: 4px 0;
}

.user-menu-form { margin: 0; }
.user-menu-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: transparent;
    border: 0;
    color: var(--text, #1e293b);
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s;
}
.user-menu-item:hover {
    background: var(--surface-2, #f8fafc);
    text-decoration: none;
    color: var(--text, #1e293b);
}
.user-menu-item svg {
    color: var(--text-muted, #64748b);
    flex-shrink: 0;
}
/* "Nâng cấp / Gia hạn" — style hoàn toàn đồng bộ item khác (icon xám). */

.page-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    /* Was a green-gradient filled square with a white funnel SVG inside —
       replaced by the SonarSignal logo <img>. The image itself is a black
       square with the sonar S artwork; overflow:hidden + 50% radius clips
       it into a perfect circle without needing per-image radius. */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
}

.page-icon svg,
.page-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-title {
    font-size: 26px;
    font-weight: 700;
    color: #111827;
    line-height: 1.1;
}

.page-subtitle {
    font-size: 13px;
    color: #6b7280;
    margin-top: 3px;
}

/* As-of date pill in the status bar. Two states:
     - default (grey)  = "Hôm nay", real-time scan
     - .historical (amber) = replaying a past session at YYYY-MM-DD
   Click opens a native <input type="date"> via showPicker(); picking today
   drops the historical class back to "Hôm nay". */
.date-pill-wrap { position: relative; display: inline-block; }
.date-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 500; line-height: 1.2;
    cursor: pointer; font-family: inherit;
    border: 0;
    background: var(--surface-2);
    color: var(--text-muted);
    transition: background .15s, color .15s;
}
.date-pill:hover { background: var(--surface-hover); color: var(--text); }
/* Kill the UA :focus ring for mouse clicks (Firefox draws it black on <button>).
   Keep :focus-visible so keyboard users still see an accent-coloured ring. */
.date-pill:focus { outline: none; }
.date-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.date-pill .date-icon { font-size: 12px; opacity: 0.7; }
.date-pill .caret { font-size: 8px; opacity: 0.6; }
.date-pill.historical {
    background: #fffbeb;
    color: #92400e;
    font-weight: 600;
}
.date-pill.historical .date-icon { opacity: 1; }
.date-pill.historical .caret { opacity: 0.9; }
.date-pill-native {
    position: absolute; top: 100%; left: 0;
    width: 1px; height: 1px; padding: 0; margin: 0; border: 0;
    opacity: 0; pointer-events: none;
}

/* Session state pill — 5 states, colored dot with pulse when market live */
.session-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    /* default (unset state) — will be overridden by state class */
    background: #f1f5f9;
    color: #64748b;
}
.session-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.9;
}
.session-badge .time { color: inherit; opacity: 0.6; font-weight: 500; margin-left: 2px; }

.session-badge.ss-open   { background: #dcfce7; color: #15803d; }
.session-badge.ss-open   .dot { background: #16a34a; animation: session-pulse 2s infinite; }

.session-badge.ss-ato    { background: #fef3c7; color: #a16207; }
.session-badge.ss-ato    .dot { background: #f59e0b; animation: session-pulse 2s infinite; }

.session-badge.ss-atc    { background: #fee2e2; color: #b91c1c; }
.session-badge.ss-atc    .dot { background: #dc2626; animation: session-pulse 2s infinite; }

.session-badge.ss-lunch  { background: #f1f5f9; color: #64748b; }
.session-badge.ss-lunch  .dot { background: #94a3b8; }

.session-badge.ss-closed { background: #f1f5f9; color: #64748b; }
.session-badge.ss-closed .dot { background: #cbd5e1; }

@keyframes session-pulse {
    0%,100% { opacity: 1; }
    50%     { opacity: 0.4; }
}

/* Filter card wrapper */
.filter-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-bottom: 24px;
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 20px;
    margin-bottom: 20px;
}

/* JS toggles `.has-param` when parametric N field is visible — adds a narrow
   5th column. Class-based (not :has() with style substring) so jQuery show/hide
   which sets `style="display: none"` with a space doesn't defeat the match. */
.filter-grid.has-param {
    grid-template-columns: repeat(4, 1fr) 100px;
}

.filter-field {
    display: flex;
    flex-direction: column;
}

.filter-field-narrow input {
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
/* Belt & suspenders: even though we switched to type="text", strip any
   webkit/moz number spinner if a browser rehydrates the type. */
.filter-field-narrow input::-webkit-outer-spin-button,
.filter-field-narrow input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.filter-field-narrow input {
    -moz-appearance: textfield;
    appearance: textfield;
}

@media (max-width: 1024px) {
    .filter-grid,
    .filter-grid.has-param { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .filter-grid,
    .filter-grid.has-param { grid-template-columns: 1fr; }
}

.filter-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 6px;
}

.filter-card .form-control {
    height: 42px;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 14px;
    color: #111827;
    transition: border-color 120ms, box-shadow 120ms;
}

.filter-card .form-control:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}

/* Choices.js overrides: match native form-control look */
.filter-card .choices {
    margin-bottom: 0;
}

.filter-card .choices__inner {
    height: 42px;
    min-height: 42px;
    padding: 0 8px !important;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: #111827;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Multi-select only: chips row stays on one line, scrollable horizontally
   with an invisible scrollbar — only appears on hover to avoid unbalancing
   the field visually when idle. Wheel-to-horizontal (bound in JS) still
   works everywhere. */
.filter-card .choices[data-type*="select-multiple"] .choices__inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;              /* Firefox — hidden by default */
    -ms-overflow-style: none;
}
.filter-card .choices[data-type*="select-multiple"] .choices__inner::-webkit-scrollbar {
    height: 0;                          /* Chrome/Safari — hidden */
}
/* Show on hover: reveal a 2px slim scrollbar */
.filter-card .choices[data-type*="select-multiple"] .choices__inner:hover {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.filter-card .choices[data-type*="select-multiple"] .choices__inner:hover::-webkit-scrollbar {
    height: 2px;
}
.filter-card .choices[data-type*="select-multiple"] .choices__inner:hover::-webkit-scrollbar-track {
    background: transparent;
}
.filter-card .choices[data-type*="select-multiple"] .choices__inner:hover::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

/* Chips container inside multi-select — force horizontal layout so chips
   line up on a single scrollable row instead of stacking vertically. */
.filter-card .choices[data-type*="select-multiple"] .choices__list--multiple {
    display: inline-flex;
    flex-wrap: nowrap;
    flex-shrink: 0;
    gap: 4px;
    padding: 0;
    margin: 0;
    width: auto;
}
.filter-card .choices[data-type*="select-multiple"] .choices__list--multiple .choices__item {
    flex-shrink: 0;
    margin: 0;
}

/* Compact mode: when ≥3 items selected, hide chips row + search input and
   show "Đã chọn N ngành/sàn" summary read from data-summary attribute.
   Choices.js state stays intact; the dropdown popover still opens normally
   when the user clicks the field to add/remove items. */
.filter-card .choices.is-compact .choices__list--multiple,
.filter-card .choices.is-compact .choices__input {
    display: none !important;
}
.filter-card .choices.is-compact .choices__inner {
    justify-content: flex-start;
    cursor: pointer;
    position: relative;
}
.filter-card .choices.is-compact .choices__inner::before {
    content: attr(data-summary);
    color: #059669;
    font-weight: 500;
    font-size: 13px;
    background: #ecfdf5;
    padding: 4px 12px;
    border-radius: 999px;
    margin-right: 8px;
}
/* Keep the ▾ arrow visible on the right */
.filter-card .choices.is-compact::after {
    right: 12px;
}

/* "Đã chọn" header injected at top of the dropdown when in compact mode —
   lets user see current selections + remove them via ✕ (chips themselves are
   hidden in compact mode so this is the only removal affordance). */
.filter-card .compact-selected-header {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    background: #fafafa;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.filter-card .compact-selected-title {
    font-size: 11px;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 600;
    margin-bottom: 6px;
}
.filter-card .compact-selected-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.filter-card .compact-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px 3px 10px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}
.filter-card .compact-chip-x {
    padding: 0 4px;
    margin-left: 2px;
    border-left: 1px solid #a7f3d0;
    color: #dc2626;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}
.filter-card .compact-chip-x:hover { color: #991b1b; }

/* Single-select: no horizontal scroll (would clip the ▾ arrow) — the item
   itself gets nowrap+ellipsis so long labels truncate instead of pushing. */
.filter-card .choices[data-type*="select-one"] .choices__inner {
    overflow: hidden;
}


/* Multi-select chips inside the select */
.filter-card .choices__list--multiple .choices__item {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    padding: 3px 6px 3px 10px;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Replace Choices' default white × icon (invisible on our light-mint chip) with a plain char */
.filter-card .choices__list--multiple .choices__item .choices__button {
    background-image: none !important;
    text-indent: 0;
    overflow: visible;
    color: #065f46;
    font-size: 0;
    line-height: 1;
    width: auto;
    height: auto;
    padding: 0 4px;
    margin: 0 0 0 4px;
    border-left: 1px solid #a7f3d0;
    opacity: 1;
    cursor: pointer;
}

.filter-card .choices__list--multiple .choices__item .choices__button::before {
    content: '×';
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: #dc2626;
}

.filter-card .choices__list--multiple .choices__item .choices__button:hover::before {
    color: #b91c1c;
}

.filter-card .choices[data-type*="select-one"]::after {
    right: 12px;
    border-color: #6b7280 transparent transparent transparent;
}

.filter-card .choices.is-focused .choices__inner,
.filter-card .choices.is-open .choices__inner {
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}

.filter-card .choices__list--dropdown,
.filter-card .choices__list[aria-expanded] {
    border: 1px solid #d1d5db;
    border-radius: 8px;
    margin-top: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    /* Let dropdown widen past the input when long options need more room,
       so labels like "MACD cắt xuống đường tín hiệu" fit on one line. */
    min-width: 100%;
    width: max-content;
    max-width: 420px;
}

.filter-card .choices__list--dropdown .choices__item--selectable.is-highlighted,
.filter-card .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: #ecfdf5;
}

/* Dropdown OPEN state — let long option labels wrap so users can read the
   full text (e.g. "MACD cắt xuống đường tín hiệu"). The closed input still
   uses nowrap+ellipsis because it has to fit inside a narrow filter cell. */
.filter-card .choices__list--dropdown .choices__item,
.filter-card .choices__list[aria-expanded] .choices__item {
    white-space: normal;
    line-height: 1.4;
    word-break: break-word;
}

.filter-card .choices__input {
    background: #f9fafb;
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
}

/* Normalise every dropdown so Ngành/Sàn/Chỉ báo/Tín hiệu look identical.
   Two things matter for text NOT to wrap:
     1. The list container fills the flex row (flex: 1) but is allowed to
        shrink below content size (min-width: 0) — without that, flex children
        default to min-width: auto and refuse to squeeze, pushing overflow.
     2. The item inside is a block with the same min-width: 0 + nowrap so
        long labels ellipsis instead of wrapping. */
.filter-card .choices__list--single {
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.filter-card .choices__list--single .choices__item,
.filter-card .choices__placeholder {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    padding: 0 24px 0 4px !important;   /* right pad leaves room for ▾ arrow */
    line-height: 40px;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
}

/* Placeholder text ("Chọn tín hiệu" / "Tất cả ngành"…) — same light gray tone
   across single-select and multi-select so the four fields read consistently. */
.filter-card .choices__list--single .choices__item.is-placeholder,
.filter-card .choices__placeholder,
.filter-card .choices__input::placeholder {
    color: #9ca3af;
    opacity: 1;
}

/* Hide the empty placeholder row from the OPEN dropdown list — user shouldn't
   see "Chọn tín hiệu" as a selectable option once the list opens.
   Choices.js marks placeholder items with the .choices__placeholder class
   (added alongside .choices__item), so target that specifically inside the
   dropdown list (not the closed .choices__list--single). */
.filter-card .choices__list--dropdown .choices__item.choices__placeholder,
.filter-card .choices__list[aria-expanded] .choices__item.choices__placeholder {
    display: none !important;
}

/* Multi-select search input — add 4px left padding so the placeholder text
   ("Tất cả ngành") aligns with the single-select's displayed value
   ("Chọn tín hiệu"), which sits at container.padding + item.padding. */
.filter-card .choices[data-type*="select-multiple"] .choices__input {
    min-width: 130px;
    background: transparent;
    padding: 0 0 0 4px;
    margin: 0;
    font-size: 14px;
}

/* Buttons */
.btn-primary-soft, .btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    transition: background-color 120ms;
    border: none;
}

.btn-primary-soft svg, .btn-cancel svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-primary-soft         { background: #10b981; color: #fff; padding: 0 22px; box-shadow: 0 2px 6px rgba(16,185,129,0.25); }
.btn-primary-soft:hover   { background: #059669; color: #fff; box-shadow: 0 4px 10px rgba(16,185,129,0.35); }

.btn-cancel        { background: #fee2e2; color: #b91c1c; padding: 0 22px; }
.btn-cancel:hover  { background: #fecaca; color: #991b1b; }

/* Preset signal packs — row above the filter grid */
.packs-block {
    margin-bottom: 18px;
}
.packs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.packs-title {
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
/* Block layout: mỗi .packs-group xuống dòng riêng (Cơ hội mua / Cảnh
   báo rủi ro / Cổ tức mỗi cái 1 hàng). Flex trước làm 2 group ngắn
   ngồi cùng dòng nếu còn chỗ ("Cảnh báo rủi ro" + "Cổ tức" cùng dòng). */
.packs-row {
    display: block;
}
/* Grouped packs: bullish "Cơ hội mua" vs bearish "Cảnh báo rủi ro".
   Label is subtle (matches .packs-title tone) and left-aligned above its row. */
#packsRow .packs-group + .packs-group { margin-top: 10px; }
.packs-group-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.packs-group-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pack-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 9px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    color: #334155;
    transition: all 120ms;
    line-height: 1;
}
.pack-btn:hover {
    background: #fff;
    border-color: #10b981;
    color: #059669;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(16,185,129,.1);
}
.pack-btn:focus,
.pack-btn:focus-visible {
    outline: none;   /* drop the browser's default black focus ring */
}
.pack-btn.active {
    background: #ecfdf5;
    border-color: #10b981;
    color: #059669;
    box-shadow: 0 2px 8px rgba(16,185,129,.15);
}
.pack-btn-icon {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pack-btn-icon svg {
    width: 13px;
    height: 13px;
}
.pack-btn-count {
    font-size: 11px;
    color: #94a3b8;
    font-weight: 500;
    padding: 2px 6px;
    background: #f1f5f9;
    border-radius: 999px;
}
.pack-btn.active .pack-btn-count { background: #dcfce7; color: #059669; }
.pack-btn:hover .pack-btn-count  { background: #dcfce7; color: #059669; }

/* Icon color variants keyed to signal_packs.json's `color` field */
.pack-color-green  .pack-btn-icon { background: #dcfce7; color: #059669; }
.pack-color-amber  .pack-btn-icon { background: #fef3c7; color: #a16207; }
.pack-color-blue   .pack-btn-icon { background: #dbeafe; color: #1e40af; }
.pack-color-pink   .pack-btn-icon { background: #fce7f3; color: #a21caf; }
.pack-color-orange .pack-btn-icon { background: #fed7aa; color: #c2410c; }
.pack-color-red    .pack-btn-icon { background: #fee2e2; color: #b91c1c; }
.pack-color-purple .pack-btn-icon { background: #f3e8ff; color: #7c3aed; }

/* Active-pack badge next to the "Tín hiệu đã chọn (N)" header */
.selected-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.active-pack-badge {
    font-size: 12px;
    color: #475569;
    font-weight: 500;
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 3px 10px;
    border-radius: 999px;
}

/* Selected signals block */
.selected-block {
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid #f1f5f9;
}

.results-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

#selectedSignalsHeader {
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
    margin: 0;
}
#selectedSignalsHeader strong {
    font-weight: 600;
    color: #0f172a;
}

.selected-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

/* Footer note under the filter card — DNSE link inherits color and drops its
   underline so the sentence reads as one visual line. Underline appears on
   hover so the link stays discoverable without breaking the reading rhythm. */
#footerNote { padding-left: 12px; }   /* khớp mép trái cột "Mã chứng khoán" */
#footerNote a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
#footerNote a:hover {
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 2px;
}

/* Reset filters — subtle text link with arrow-loop icon */
.reset-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
    color: #94a3b8;
    background: none;
    border: none;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: color 120ms, background 120ms;
    line-height: 1;
}
.reset-link:hover {
    color: #dc2626;
    background: #fef2f2;
}
.reset-link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* Results header line */
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 24px 0 8px;
}

#companyCount {
    margin: 0;
    color: #4b5563;
    font-size: 14px;
    /* Padding-left đặt ở #companyCount thay vì .results-header để giữ
       đúng vị trí khi clone riêng vào snapshot wrap (không còn parent
       header thì bare <p> mất indent). */
    padding-left: 12px;
}
#companyCount strong {
    font-weight: 600;
    color: #0f172a;
}

.results-actions {
    display: flex;
    align-items: center;
}

.custom-hr {
    border: 0;
    height: 1px;
    background: #1b1b1b;
    background-image: linear-gradient(to right, #ccc, #fff, #ccc);
    margin: 20px 0;
}

/* Selected signal chips */
#selectedSignalsContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 32px;
}

#selectedSignalsContainer .list-group-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 10px;
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    max-width: none;
    flex-basis: auto;
    text-align: left;
}

#selectedSignalsContainer .list-group-item .remove-signal {
    background: transparent;
    border: none;
    border-left: 1px solid #a7f3d0;
    padding: 0 4px;
    margin: 0 0 0 4px;
    font-size: 0;
    line-height: 1;
    color: transparent;
    cursor: pointer;
    float: none !important;
    display: inline-flex;
    align-items: center;
}

#selectedSignalsContainer .list-group-item .remove-signal::before {
    content: '×';
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    color: #dc2626;
}

#selectedSignalsContainer .list-group-item .remove-signal:hover::before {
    color: #b91c1c;
}

/* Index dashboard bar */
.index-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.idx-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.idx-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.idx-name {
    font-weight: 700;
    font-size: 14px;
    color: #111827;
    letter-spacing: 0.02em;
}

.idx-pct {
    font-weight: 700;
    font-size: 13px;
}

.idx-body {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.idx-value {
    font-size: 20px;
    font-weight: 700;
}

.idx-change {
    font-size: 13px;
    font-weight: 600;
}

.idx-meta {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.3;
}

.idx-turnover {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.idx-turnover .idx-sep {
    color: #cbd5e1;
    margin: 0 2px;
}

.idx-bottom {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.idx-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.idx-bottom .idx-meta {
    flex-shrink: 0;
}

.idx-breadth {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}

.idx-breadth > span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    line-height: 1;
}

.idx-breadth .brd-up   { color: #16a34a; }
.idx-breadth .brd-down { color: #dc2626; }
.idx-breadth .brd-flat { color: #ca8a04; }

.idx-breadth .brd-up::before,
.idx-breadth .brd-down::before {
    font-size: 9px;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

.idx-breadth .brd-up::before   { content: '\25B2'; }
.idx-breadth .brd-down::before { content: '\25BC'; }

.idx-breadth .brd-square {
    width: 8px;
    height: 8px;
    background: #f59e0b;
    display: inline-block;
    border-radius: 1px;
    vertical-align: middle;
    flex-shrink: 0;
}

.idx-breadth .brd-up   .brd-sub { color: #a855f7; font-weight: 600; margin-left: 2px; }
.idx-breadth .brd-down .brd-sub { color: #06b6d4; font-weight: 600; margin-left: 2px; }

.idx-spark {
    flex: 0 0 100px;
    min-width: 0;
    line-height: 0;
}

.idx-spark .sparkline {
    width: 100%;
    height: 40px;
    display: block;
}

.idx-up .idx-pct, .idx-up .idx-change, .idx-up .idx-value       { color: #16a34a; }
.idx-down .idx-pct, .idx-down .idx-change, .idx-down .idx-value { color: #dc2626; }
.idx-flat .idx-pct, .idx-flat .idx-change, .idx-flat .idx-value { color: #ca8a04; }

.idx-loading, .idx-err {
    color: #9ca3af;
    font-size: 13px;
}

.idx-error {
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Responsive tweaks */
@media (max-width: 992px) {
    .index-bar { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .results-header { flex-direction: column; align-items: stretch; gap: 8px; }
    .filter-card { padding: 16px; }
    .index-bar { grid-template-columns: 1fr; }
}

/* Results table scroll container — thin scrollbar */
.results-scroll {
    overflow-y: auto;
    overflow-x: auto;     /* CA cols có thể làm bảng vượt viewport hẹp */
    max-height: 400px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.results-scroll::-webkit-scrollbar {
    width: 6px;
}

.results-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.results-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.results-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Style for results table — borderless with soft row separators */
#resultsTable {
    margin-top: 20px;
    border-collapse: separate;
    border-spacing: 0;
}

#resultsTable thead tr {
    text-align: center;
    position: sticky;
    top: 0px;
    /* Blend into the page ground instead of sitting as a bright bar — the
       results-scroll has no card wrapper, so a --surface fill looked like
       a boxy strip. Sticky still needs an opaque fill (must hide rows
       scrolling under it), and --bg is opaque, so the sticky behavior is
       preserved. */
    background: var(--bg);
}

#resultsTable thead th {
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    font-weight: 500;
    font-size: 12px;
    color: var(--text-faint);
    padding: 10px 12px;   /* 12px ngang khớp với tbody td padding: 14px 12px */
    text-transform: none;
    letter-spacing: 0.2px;
    /* Center để khớp text-align: center của tbody td (Bootstrap default th
       inherit left → cột Biến động và các cột số bị lệch với giá trị). */
    text-align: center;
    /* Bootstrap 4 mặc định vertical-align: bottom → header có toggle pill
       (Biến động) nhô cao hơn header chữ đơn. Middle cho khớp trục ngang. */
    vertical-align: middle;
}

#resultsTable thead th:first-child {
    text-align: left;
}

/* Header labels giữ 1 dòng — 2 cột CA thêm vào làm chật, header trước tự
   xuống dòng ("Giá khớp" / "Tổng khối lượng" / "Biểu đồ phiên"). Nowrap
   toàn bộ th; nếu overflow ngang thì .results-scroll xử lý (khi có CA). */
#resultsTable thead th { white-space: nowrap; }

/* Biến động column fixed width so header toggle (%/+-) doesn't shift others */
#resultsTable th:nth-child(3),
#resultsTable td:nth-child(3) {
    width: 180px;
    min-width: 180px;
    white-space: nowrap;
}

/* Change column toggle: default show %, show absolute when .mode-abs */
.change-cell .change-abs { display: none; }
#resultsTable.mode-abs .change-cell .change-pct { display: none; }
#resultsTable.mode-abs .change-cell .change-abs { display: inline; }

.change-header {
    cursor: pointer;
    user-select: none;
}

.change-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 6px;
    padding: 2px 6px;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}

.mode-arrow {
    color: #9ca3af;
    font-size: 9px;
}

#resultsTable tbody tr {
    transition: background-color 120ms;
}

#resultsTable tbody tr:hover {
    background: #f9fafb;
}

#resultsTable tbody td {
    text-align: center;
    vertical-align: middle;
    padding: 14px 12px;
    border-top: none;
    border-bottom: 1px solid #f1f5f9;
}

/* Symbol cell: round logo + (symbol / company name stacked) */
.symbol-cell {
    text-align: left !important;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-img, .logo-avatar {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.logo-img {
    object-fit: contain;
    padding: 3px;
}

.logo-avatar {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    border: none;
}

.symbol-info {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.symbol-text {
    font-weight: 600;
    font-size: 14px;
    color: #111827;
}

.symbol-company {
    font-size: 12px;
    color: #6b7280;
    white-space: normal;
    word-break: break-word;
}

/* % change color coding (yellow for tham chiếu, matching Vietnamese market convention) */
.pct-up    { color: #16a34a; font-weight: 600; }
.pct-down  { color: #dc2626; font-weight: 600; }
.pct-flat  { color: #ca8a04; font-weight: 600; }
.pct-ceil  { color: #D946EF; font-weight: 600; }   /* kịch trần — tím, dùng chung tone với chip .stat-ceil */
.pct-floor { color: #0EA5E9; font-weight: 600; }   /* kịch sàn — xanh lơ (broker VN convention) */

/* KL/TB 20 phiên — inline label + mini bar, capped at 5x visually */
.vol-ratio-cell { white-space: nowrap; }

.vol-ratio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.vol-ratio .vr-label {
    font-weight: 600;
    min-width: 32px;
    text-align: right;
}

.vol-ratio .vr-bar {
    width: 50px;
    height: 6px;
    background: #f1f5f9;
    border-radius: 3px;
    overflow: hidden;
    display: inline-block;
}

.vol-ratio .vr-fill {
    display: block;
    height: 100%;
    background: #cbd5e1;
    transition: width 200ms;
}

.vol-ratio.vr-low     .vr-label { color: #94a3b8; }
.vol-ratio.vr-low     .vr-fill  { background: #cbd5e1; }

.vol-ratio.vr-normal  .vr-label { color: #334155; }
.vol-ratio.vr-normal  .vr-fill  { background: #64748b; }

.vol-ratio.vr-strong  .vr-label { color: #16a34a; }
.vol-ratio.vr-strong  .vr-fill  { background: #16a34a; }

.vol-ratio.vr-spike   .vr-label { color: #ea580c; }
.vol-ratio.vr-spike   .vr-fill  { background: #f97316; }

.vol-ratio-na {
    color: #cbd5e1;
    font-size: 14px;
}

/* Foreign net buy/sell column — reuses .pct-up / .pct-down so the tone
   matches "Biến động" exactly. .foreign-none is the muted em-dash shown
   when the WS snapshot hasn't populated yet or the mã is outside coverage. */
.foreign-cell        { font-variant-numeric: tabular-nums; white-space: nowrap; }
.foreign-none        { color: #cbd5e1; }

/* CA (corporate action) columns — hidden by default, only shown when the
   scan uses a CA signal/pack and results carry ca_event. JS toggles the
   `.has-ca` class on #resultsTable to reveal both header + body cells.
   Cột tech (KL/TB + NN ròng) giờ giữ nguyên khi CA active — sau khi bỏ
   "Ngày chia" (→ tooltip), có đủ chỗ hiện đủ info cho dividend investor
   (momentum + foreign flow đều có ích: catch mã bị gom + income fund
   ngoại tích lũy). */
#resultsTable .ca-col { display: none; }
#resultsTable.has-ca .ca-col { display: table-cell; }
.ca-col              { white-space: nowrap; }
.ca-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    vertical-align: middle;
}
.ca-badge .ca-icon   { width: 13px; height: 13px; flex-shrink: 0; }
/* Icon-only badge — hẹp hơn, chỉ icon (bỏ text Tiền/CP/Quyền), amount
   hiển thị bên ngoài badge cho compact + rõ số. */
.ca-badge-icon       { padding: 3px; gap: 0; }
.ca-badge.ca-cash    { background: #dcfce7; color: #15803d; }
.ca-badge.ca-stock   { background: #dbeafe; color: #1d4ed8; }
.ca-badge.ca-rights  { background: #fef3c7; color: #a16207; }
/* Dùng biến --text để amount/date tự sáng ở dark mode (như cột Tổng KL);
   hardcoded #334155 trước bị chìm trên background tối. */
.ca-amount           { color: var(--text); font-variant-numeric: tabular-nums; }
.ca-date             { color: var(--text); font-variant-numeric: tabular-nums; }
.ca-none             { color: var(--text-faint); }

/* Yield bar meter — "Tỷ suất 1 năm" cột. Label % + fill bar cap 15%.
   Tier màu theo yield: <3% xám (không đáng kể), 3-6% xanh nhạt (trung
   bình), 6-10% xanh (tốt), ≥10% xanh đậm (rất cao). Bar cạnh label,
   inline-flex giống KL/TB 20 phiên style. */
.yield-bar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.yb-label {
    font-size: 12px;
    font-weight: 600;
    min-width: 42px;
    text-align: right;
    color: var(--text);
}
.yb-track {
    display: inline-block;
    width: 44px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}
.yb-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    transition: width 0.2s ease;
}
.yield-bar.yb-low   .yb-fill  { background: #94a3b8; }   /* xám */
.yield-bar.yb-mid   .yb-fill  { background: #86efac; }   /* xanh nhạt */
.yield-bar.yb-high  .yb-fill  { background: #22c55e; }   /* xanh */
.yield-bar.yb-vhigh .yb-fill  { background: #15803d; }   /* xanh đậm */
/* Track darker trong dark mode để bar fill nổi */
:root:not([data-theme="light"]) .yb-track { background: #334155; }
:root[data-theme="dark"]        .yb-track { background: #334155; }

/* Skeleton loading rows */
.skeleton-row td {
    padding: 14px 12px !important;
}

.skel {
    display: inline-block;
    background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
    background-size: 200% 100%;
    animation: skelShimmer 1.4s ease-in-out infinite;
    border-radius: 4px;
    height: 12px;
    vertical-align: middle;
}

.skel-line { display: inline-block; height: 10px; }

.skel-circle {
    width: 36px; height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-right: 10px;
}

.skel-spark {
    display: block;
    width: 100px; height: 30px;
    margin: 0 auto;
    border-radius: 4px;
}

.skeleton-row .symbol-info {
    display: flex;
    flex-direction: column;
}

@keyframes skelShimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Sparkline mini chart */
.spark-cell {
    padding: 4px !important;
}

.spark-cell .sparkline {
    width: 70px;
    height: 26px;
    display: block;
    margin: 0 auto;
}

.sparkline {
    display: block;
    margin: 0 auto;
}

/* Stats strip above the results table */
.stats-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0 10px 12px;   /* left 12px để khớp cột "Mã chứng khoán" */
}

.stats-label {
    color: #6b7280;
    font-size: 13px;
    margin-right: 6px;
}

.stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.stat-pill svg {
    width: 13px;
    height: 13px;
    display: inline-block;
    flex-shrink: 0;
}

.stat-pill strong { font-weight: 700; }

.stat-ceil  { background: #fdf2f8; color: #D946EF; }   /* pink pastel */
.stat-up    { background: #f0fdf4; color: #15803d; }   /* green pastel */
.stat-flat  { background: #fefce8; color: #a16207; }   /* yellow pastel */
.stat-down  { background: #fef2f2; color: #b91c1c; }   /* red pastel */
.stat-floor { background: #ecfeff; color: #0EA5E9; }   /* cyan pastel — text tone chung với pct-floor */


/* ============================================================
   DARK THEME OVERRIDES
   Everything above is the light-first design. This block patches
   the components whose colours are hardcoded inline for dark, so
   the app doesn't need a full token refactor. Applies when either
   the OS prefers dark (and no explicit choice) or the user toggle
   picked dark. Grouped by component to keep the diff auditable.
============================================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Page + typography */
        .page-title            { color: var(--text-heading); }
        .page-subtitle         { color: var(--text-muted); }
        #companyCount          { color: var(--text-muted); }
        #companyCount strong   { color: var(--text-heading); }
        #selectedSignalsHeader { color: var(--text-muted); }
        #selectedSignalsHeader strong { color: var(--text-heading); }
        .stats-label           { color: var(--text-muted); }

        /* Session badge — pastel bgs become translucent tints, dot stays saturated */
        .session-badge.ss-open   { background: rgba(22, 163, 74, 0.16); color: #4ADE80; }
        .session-badge.ss-ato    { background: rgba(245, 158, 11, 0.16); color: #FDBA74; }
        .session-badge.ss-atc    { background: rgba(239, 68, 68, 0.16); color: #FCA5A5; }
        .session-badge.ss-lunch  { background: rgba(148, 163, 184, 0.14); color: #9CA3AF; }
        .session-badge.ss-closed { background: rgba(148, 163, 184, 0.14); color: #9CA3AF; }

        /* Historical date pill — amber tint that survives dark ground */
        .date-pill.historical {
            background: rgba(245, 158, 11, 0.16);
            color: #FBBF24;
        }

        /* Filter card + all form inputs */
        .filter-card                { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); }
        .filter-label               { color: var(--text-muted); }
        .filter-card .form-control  { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
        .filter-card .choices__inner { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
        .filter-card .choices__input { background: var(--surface-hover); color: var(--text); }
        .filter-card .choices__list--single .choices__item.is-placeholder,
        .filter-card .choices__placeholder,
        .filter-card .choices__input::placeholder { color: var(--text-quiet); }
        .filter-card .choices[data-type*="select-one"]::after { border-color: var(--text-muted) transparent transparent transparent; }
        .filter-card .choices.is-focused .choices__inner,
        .filter-card .choices.is-open .choices__inner {
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
        }
        .filter-card .choices__list--dropdown,
        .filter-card .choices__list[aria-expanded] {
            background: var(--surface);
            border-color: var(--border-strong);
            box-shadow: var(--shadow-md);
            color: var(--text);
        }
        .filter-card .choices__list--dropdown .choices__item--selectable.is-highlighted,
        .filter-card .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
            background: var(--accent-soft);
            color: var(--accent-text);
        }
        .filter-card .choices[data-type*="select-multiple"] .choices__inner:hover { scrollbar-color: var(--border-strong) transparent; }
        .filter-card .choices[data-type*="select-multiple"] .choices__inner:hover::-webkit-scrollbar-thumb { background: var(--border-strong); }

        /* Multi-select chips + compact chips (both use the same green pill) */
        .filter-card .choices__list--multiple .choices__item,
        .filter-card .compact-chip,
        #selectedSignalsContainer .list-group-item {
            background: rgba(52, 211, 153, 0.14);
            color: #A7F3D0;
            border-color: rgba(52, 211, 153, 0.32);
        }
        .filter-card .choices__list--multiple .choices__item .choices__button,
        .filter-card .compact-chip-x,
        #selectedSignalsContainer .list-group-item .remove-signal {
            border-left-color: rgba(52, 211, 153, 0.32);
        }
        .filter-card .choices__list--multiple .choices__item .choices__button::before,
        #selectedSignalsContainer .list-group-item .remove-signal::before {
            color: #F87171;
        }
        .filter-card .choices.is-compact .choices__inner::before {
            background: rgba(52, 211, 153, 0.14);
            color: #A7F3D0;
        }
        .filter-card .compact-selected-header {
            background: var(--surface-2);
            border-bottom-color: var(--border-subtle);
        }
        .filter-card .compact-selected-title { color: var(--text-faint); }

        /* Buttons */
        .btn-primary-soft       { background: var(--accent); color: #0d1219; box-shadow: var(--shadow-accent); }
        .btn-primary-soft:hover { background: var(--accent-hover); color: #0d1219; }
        .btn-cancel             { background: rgba(220, 38, 38, 0.18); color: #F87171; }
        .btn-cancel:hover       { background: rgba(220, 38, 38, 0.28); color: #FCA5A5; }
        .theme-toggle-btn       { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
        .theme-toggle-btn:hover { background: var(--surface-hover); border-color: var(--accent); }

        /* Pack buttons (preset filter chips) */
        .packs-title        { color: var(--text-muted); }
        .pack-btn           { background: var(--surface-2); border-color: var(--border); color: var(--text); }
        .pack-btn:hover     { background: var(--surface); border-color: var(--accent); color: var(--accent-hover); }
        .pack-btn.active    { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hover); }
        .pack-btn-count     { background: var(--surface-hover); color: var(--text-faint); }
        .pack-btn:hover .pack-btn-count,
        .pack-btn.active .pack-btn-count { background: rgba(52, 211, 153, 0.22); color: var(--accent-hover); }

        /* Pack icon colour variants — swap pastel bgs for translucent tints on dark */
        .pack-color-green  .pack-btn-icon { background: rgba(22, 163, 74, 0.20); color: #4ADE80; }
        .pack-color-amber  .pack-btn-icon { background: rgba(245, 158, 11, 0.20); color: #FDBA74; }
        .pack-color-blue   .pack-btn-icon { background: rgba(59, 130, 246, 0.20); color: #93C5FD; }
        .pack-color-pink   .pack-btn-icon { background: rgba(236, 72, 153, 0.20); color: #F9A8D4; }
        .pack-color-orange .pack-btn-icon { background: rgba(249, 115, 22, 0.20); color: #FDBA74; }
        .pack-color-red    .pack-btn-icon { background: rgba(220, 38, 38, 0.20); color: #FCA5A5; }
        .pack-color-purple .pack-btn-icon { background: rgba(124, 58, 237, 0.22); color: #C4B5FD; }

        .active-pack-badge  { background: var(--surface); border-color: var(--border); color: var(--text-muted); }
        .selected-block     { border-top-color: var(--border-subtle); }
        .reset-link         { color: var(--text-faint); }
        .reset-link:hover   { color: #F87171; background: rgba(220, 38, 38, 0.14); }

        /* Index cards */
        .idx-card         { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); }
        .idx-name         { color: var(--text-heading); }
        .idx-meta,
        .idx-turnover     { color: var(--text-muted); }
        .idx-turnover .idx-sep { color: var(--border-strong); }
        .idx-loading, .idx-err { color: var(--text-faint); }

        /* Breadth + index-card semantic colours kept identical to light mode. */

        /* Results table */
        .results-scroll                     { scrollbar-color: var(--border-strong) transparent; }
        .results-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); }
        .results-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
        #resultsTable thead tr              { background: var(--bg); }
        #resultsTable thead th              { color: var(--text-faint); border-bottom-color: var(--border-subtle); }
        #resultsTable tbody tr:hover        { background: rgba(255, 255, 255, 0.035); }
        #resultsTable tbody td              { border-bottom-color: var(--border-subtle); color: var(--text); }
        .symbol-text                        { color: var(--text-heading); }
        .symbol-company                     { color: var(--text-muted); }
        /* Logo bubbles keep white in dark mode — see note in [data-theme] block. */
        .logo-img { background: #fff; border-color: var(--border); }

        /* pct-* stays identical to light mode (user request). Prefix with
           #resultsTable to beat the generic td colour override above. */
        #resultsTable td.pct-up    { color: #16a34a; }
        #resultsTable td.pct-down  { color: #dc2626; }
        #resultsTable td.pct-flat  { color: #ca8a04; }
        #resultsTable td.pct-ceil  { color: #D946EF; }
        #resultsTable td.pct-floor { color: #0EA5E9; }

        /* Change mode toggle chip */
        .change-mode-toggle { background: var(--surface-hover); color: var(--text-muted); }
        .mode-arrow         { color: var(--text-faint); }

        /* Volume ratio — see [data-theme] block for the rationale. */
        .vol-ratio .vr-bar   { background: rgba(255, 255, 255, 0.08); }
        .vol-ratio .vr-fill  { background: #94a3b8; }
        .vol-ratio.vr-low    .vr-label { color: var(--text-muted); }
        .vol-ratio.vr-low    .vr-fill  { background: #64748b; }
        .vol-ratio.vr-normal .vr-label { color: var(--text); }
        .vol-ratio.vr-normal .vr-fill  { background: #cbd5e1; }
        .vol-ratio.vr-strong .vr-label { color: #4ADE80; }
        .vol-ratio.vr-strong .vr-fill  { background: #16a34a; }
        .vol-ratio.vr-spike  .vr-label { color: #FDBA74; }
        .vol-ratio.vr-spike  .vr-fill  { background: #F97316; }
        .vol-ratio-na        { color: var(--text-quiet); }

        /* Skeleton — lift the shimmer so it reads on dark. background-image
           only (see [data-theme] block for rationale). */
        .skel {
            background-image: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.06) 75%);
            background-size: 200% 100%;
        }

        /* Stat pills — translucent tints instead of pastels */
        .stat-ceil  { background: rgba(217, 70, 239, 0.14); color: #F0A5FF; }
        .stat-up    { background: rgba(22, 163, 74, 0.16); color: #4ADE80; }
        .stat-flat  { background: rgba(202, 138, 4, 0.16); color: #FDD670; }
        .stat-down  { background: rgba(220, 38, 38, 0.16); color: #F87171; }
        .stat-floor { background: rgba(14, 165, 233, 0.16); color: #7DD3FC; }
    }
}

/* Explicit dark toggle — same block, duplicated so specificity works
   independent of the media query. Kept in sync manually. */
:root[data-theme="dark"] .page-title            { color: var(--text-heading); }
:root[data-theme="dark"] .page-subtitle         { color: var(--text-muted); }
:root[data-theme="dark"] #companyCount          { color: var(--text-muted); }
:root[data-theme="dark"] #companyCount strong   { color: var(--text-heading); }
:root[data-theme="dark"] #selectedSignalsHeader { color: var(--text-muted); }
:root[data-theme="dark"] #selectedSignalsHeader strong { color: var(--text-heading); }
:root[data-theme="dark"] .stats-label           { color: var(--text-muted); }

:root[data-theme="dark"] .session-badge.ss-open   { background: rgba(22, 163, 74, 0.16); color: #4ADE80; }
:root[data-theme="dark"] .session-badge.ss-ato    { background: rgba(245, 158, 11, 0.16); color: #FDBA74; }
:root[data-theme="dark"] .session-badge.ss-atc    { background: rgba(239, 68, 68, 0.16); color: #FCA5A5; }
:root[data-theme="dark"] .session-badge.ss-lunch  { background: rgba(148, 163, 184, 0.14); color: #9CA3AF; }
:root[data-theme="dark"] .session-badge.ss-closed { background: rgba(148, 163, 184, 0.14); color: #9CA3AF; }

:root[data-theme="dark"] .date-pill.historical {
    background: rgba(245, 158, 11, 0.16);
    color: #FBBF24;
}

:root[data-theme="dark"] .filter-card                { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .filter-label               { color: var(--text-muted); }
:root[data-theme="dark"] .filter-card .form-control  { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
:root[data-theme="dark"] .filter-card .choices__inner { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
:root[data-theme="dark"] .filter-card .choices__input { background: var(--surface-hover); color: var(--text); }
:root[data-theme="dark"] .filter-card .choices__list--single .choices__item.is-placeholder,
:root[data-theme="dark"] .filter-card .choices__placeholder,
:root[data-theme="dark"] .filter-card .choices__input::placeholder { color: var(--text-quiet); }
:root[data-theme="dark"] .filter-card .choices[data-type*="select-one"]::after { border-color: var(--text-muted) transparent transparent transparent; }
:root[data-theme="dark"] .filter-card .choices.is-focused .choices__inner,
:root[data-theme="dark"] .filter-card .choices.is-open .choices__inner {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18);
}
:root[data-theme="dark"] .filter-card .choices__list--dropdown,
:root[data-theme="dark"] .filter-card .choices__list[aria-expanded] {
    background: var(--surface);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
    color: var(--text);
}
:root[data-theme="dark"] .filter-card .choices__list--dropdown .choices__item--selectable.is-highlighted,
:root[data-theme="dark"] .filter-card .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: var(--accent-soft);
    color: var(--accent-text);
}
:root[data-theme="dark"] .filter-card .choices[data-type*="select-multiple"] .choices__inner:hover { scrollbar-color: var(--border-strong) transparent; }
:root[data-theme="dark"] .filter-card .choices[data-type*="select-multiple"] .choices__inner:hover::-webkit-scrollbar-thumb { background: var(--border-strong); }

:root[data-theme="dark"] .filter-card .choices__list--multiple .choices__item,
:root[data-theme="dark"] .filter-card .compact-chip,
:root[data-theme="dark"] #selectedSignalsContainer .list-group-item {
    background: rgba(52, 211, 153, 0.14);
    color: #A7F3D0;
    border-color: rgba(52, 211, 153, 0.32);
}
:root[data-theme="dark"] .filter-card .choices__list--multiple .choices__item .choices__button,
:root[data-theme="dark"] .filter-card .compact-chip-x,
:root[data-theme="dark"] #selectedSignalsContainer .list-group-item .remove-signal {
    border-left-color: rgba(52, 211, 153, 0.32);
}
:root[data-theme="dark"] .filter-card .choices__list--multiple .choices__item .choices__button::before,
:root[data-theme="dark"] #selectedSignalsContainer .list-group-item .remove-signal::before {
    color: #F87171;
}
:root[data-theme="dark"] .filter-card .choices.is-compact .choices__inner::before {
    background: rgba(52, 211, 153, 0.14);
    color: #A7F3D0;
}
:root[data-theme="dark"] .filter-card .compact-selected-header {
    background: var(--surface-2);
    border-bottom-color: var(--border-subtle);
}
:root[data-theme="dark"] .filter-card .compact-selected-title { color: var(--text-faint); }

:root[data-theme="dark"] .btn-primary-soft       { background: var(--accent); color: #0d1219; box-shadow: var(--shadow-accent); }
:root[data-theme="dark"] .btn-primary-soft:hover { background: var(--accent-hover); color: #0d1219; }
:root[data-theme="dark"] .btn-cancel             { background: rgba(220, 38, 38, 0.18); color: #F87171; }
:root[data-theme="dark"] .btn-cancel:hover       { background: rgba(220, 38, 38, 0.28); color: #FCA5A5; }
:root[data-theme="dark"] .theme-toggle-btn       { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
:root[data-theme="dark"] .theme-toggle-btn:hover { background: var(--surface-hover); border-color: var(--accent); }

:root[data-theme="dark"] .packs-title        { color: var(--text-muted); }
:root[data-theme="dark"] .pack-btn           { background: var(--surface-2); border-color: var(--border); color: var(--text); }
:root[data-theme="dark"] .pack-btn:hover     { background: var(--surface); border-color: var(--accent); color: var(--accent-hover); }
:root[data-theme="dark"] .pack-btn.active    { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-hover); }
:root[data-theme="dark"] .pack-btn-count     { background: var(--surface-hover); color: var(--text-faint); }
:root[data-theme="dark"] .pack-btn:hover .pack-btn-count,
:root[data-theme="dark"] .pack-btn.active .pack-btn-count { background: rgba(52, 211, 153, 0.22); color: var(--accent-hover); }

:root[data-theme="dark"] .pack-color-green  .pack-btn-icon { background: rgba(22, 163, 74, 0.20); color: #4ADE80; }
:root[data-theme="dark"] .pack-color-amber  .pack-btn-icon { background: rgba(245, 158, 11, 0.20); color: #FDBA74; }
:root[data-theme="dark"] .pack-color-blue   .pack-btn-icon { background: rgba(59, 130, 246, 0.20); color: #93C5FD; }
:root[data-theme="dark"] .pack-color-pink   .pack-btn-icon { background: rgba(236, 72, 153, 0.20); color: #F9A8D4; }
:root[data-theme="dark"] .pack-color-orange .pack-btn-icon { background: rgba(249, 115, 22, 0.20); color: #FDBA74; }
:root[data-theme="dark"] .pack-color-red    .pack-btn-icon { background: rgba(220, 38, 38, 0.20); color: #FCA5A5; }
:root[data-theme="dark"] .pack-color-purple .pack-btn-icon { background: rgba(124, 58, 237, 0.22); color: #C4B5FD; }

:root[data-theme="dark"] .active-pack-badge  { background: var(--surface); border-color: var(--border); color: var(--text-muted); }
:root[data-theme="dark"] .selected-block     { border-top-color: var(--border-subtle); }
:root[data-theme="dark"] .reset-link         { color: var(--text-faint); }
:root[data-theme="dark"] .reset-link:hover   { color: #F87171; background: rgba(220, 38, 38, 0.14); }

:root[data-theme="dark"] .idx-card         { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .idx-name         { color: var(--text-heading); }
:root[data-theme="dark"] .idx-meta,
:root[data-theme="dark"] .idx-turnover     { color: var(--text-muted); }
:root[data-theme="dark"] .idx-turnover .idx-sep { color: var(--border-strong); }
:root[data-theme="dark"] .idx-loading,
:root[data-theme="dark"] .idx-err          { color: var(--text-faint); }

/* Breadth + index-card semantic colours kept identical to light mode. */

:root[data-theme="dark"] .results-scroll                     { scrollbar-color: var(--border-strong) transparent; }
:root[data-theme="dark"] .results-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); }
:root[data-theme="dark"] .results-scroll::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
:root[data-theme="dark"] #resultsTable thead tr              { background: var(--bg); }
:root[data-theme="dark"] #resultsTable thead th              { color: var(--text-faint); border-bottom-color: var(--border-subtle); }
/* Hover row: subtle brighten overlay instead of jumping to surface-hover.
   The old block-level bg swap could sit at similar luminance to text-quiet
   (vol-ratio low label, empty cells) and looked like data was blanked out
   on hover. The overlay lifts the row without dulling any child text. */
:root[data-theme="dark"] #resultsTable tbody tr:hover        { background: rgba(255, 255, 255, 0.035); }
:root[data-theme="dark"] #resultsTable tbody td              { border-bottom-color: var(--border-subtle); color: var(--text); }
:root[data-theme="dark"] .symbol-text                        { color: var(--text-heading); }
:root[data-theme="dark"] .symbol-company                     { color: var(--text-muted); }
/* Logo bubble keeps its white ground in dark mode too — most logo PNGs
   have transparent grounds with dark linework that vanishes on a dark
   circle, and the coloured letter-avatars stack their letter on top of a
   per-symbol tinted background that reads fine in either theme. */
:root[data-theme="dark"] .logo-img { background: #fff; border-color: var(--border); }

/* pct-* colours stay identical to light mode (user request) — the softened
   dark tones (#4ADE80 etc.) were dropped. Still needs the #resultsTable prefix
   to beat the tbody-td colour override that fixes Bootstrap's dark-grey td
   inheritance; without it price cells would render bright white. */
:root[data-theme="dark"] #resultsTable td.pct-up    { color: #16a34a; }
:root[data-theme="dark"] #resultsTable td.pct-down  { color: #dc2626; }
:root[data-theme="dark"] #resultsTable td.pct-flat  { color: #ca8a04; }
:root[data-theme="dark"] #resultsTable td.pct-ceil  { color: #D946EF; }
:root[data-theme="dark"] #resultsTable td.pct-floor { color: #0EA5E9; }

/* Watchlist dark theme — mirror #resultsTable rules (không dùng class .table) */
:root[data-theme="dark"] .watchlist-scroll                { scrollbar-color: var(--border-strong) transparent; }
:root[data-theme="dark"] .watchlist-scroll::-webkit-scrollbar-thumb        { background: var(--border-strong); }
:root[data-theme="dark"] .watchlist-scroll::-webkit-scrollbar-thumb:hover  { background: var(--text-faint); }
:root[data-theme="dark"] #watchlistTable thead th        { color: var(--text-faint); border-bottom-color: var(--border-subtle); }
:root[data-theme="dark"] #watchlistTable tbody tr:hover  { background: rgba(255, 255, 255, 0.035); }
:root[data-theme="dark"] #watchlistTable tbody td        { border-bottom-color: var(--border-subtle); color: var(--text); }
:root[data-theme="dark"] #watchlistTable td.pct-up    { color: #16a34a; }
:root[data-theme="dark"] #watchlistTable td.pct-down  { color: #dc2626; }
:root[data-theme="dark"] #watchlistTable td.pct-flat  { color: #ca8a04; }
:root[data-theme="dark"] #watchlistTable td.pct-ceil  { color: #D946EF; }
:root[data-theme="dark"] #watchlistTable td.pct-floor { color: #0EA5E9; }

:root[data-theme="dark"] .change-mode-toggle { background: var(--surface-hover); color: var(--text-muted); }
:root[data-theme="dark"] .mode-arrow         { color: var(--text-faint); }

/* Vol-ratio bar: track = subtle overlay lifted from card, fill = brighter
   gray. surface-hover was too close to the card surface, leaving the track
   invisible; text-quiet as fill sat at similar luminance to the track. */
:root[data-theme="dark"] .vol-ratio .vr-bar   { background: rgba(255, 255, 255, 0.08); }
:root[data-theme="dark"] .vol-ratio .vr-fill  { background: #94a3b8; }
:root[data-theme="dark"] .vol-ratio.vr-low    .vr-label { color: var(--text-muted); }
:root[data-theme="dark"] .vol-ratio.vr-low    .vr-fill  { background: #64748b; }
:root[data-theme="dark"] .vol-ratio.vr-normal .vr-label { color: var(--text); }
:root[data-theme="dark"] .vol-ratio.vr-normal .vr-fill  { background: #cbd5e1; }
:root[data-theme="dark"] .vol-ratio.vr-strong .vr-label { color: #4ADE80; }
:root[data-theme="dark"] .vol-ratio.vr-strong .vr-fill  { background: #16a34a; }
:root[data-theme="dark"] .vol-ratio.vr-spike  .vr-label { color: #FDBA74; }
:root[data-theme="dark"] .vol-ratio.vr-spike  .vr-fill  { background: #F97316; }
:root[data-theme="dark"] .vol-ratio-na        { color: var(--text-quiet); }

:root[data-theme="dark"] .skel {
    /* background-image only — using the `background` shorthand would reset
       background-size back to auto and kill the shimmer sweep. */
    background-image: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.22) 50%, rgba(255,255,255,0.06) 75%);
    background-size: 200% 100%;
}

:root[data-theme="dark"] .stat-ceil  { background: rgba(217, 70, 239, 0.14); color: #F0A5FF; }
:root[data-theme="dark"] .stat-up    { background: rgba(22, 163, 74, 0.16); color: #4ADE80; }
:root[data-theme="dark"] .stat-flat  { background: rgba(202, 138, 4, 0.16); color: #FDD670; }
:root[data-theme="dark"] .stat-down  { background: rgba(220, 38, 38, 0.16); color: #F87171; }
:root[data-theme="dark"] .stat-floor { background: rgba(14, 165, 233, 0.16); color: #7DD3FC; }

/* ============================================================
   Theme toggle button — small pill in the page header. Renders
   ☀️ in dark mode (indicating "switch to light") and 🌙 in light.
============================================================ */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: 36px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: background 120ms, border-color 120ms;
}
.theme-toggle-btn:hover {
    border-color: var(--accent);
    background: var(--surface-2);
}
/* Drop the browser's default black outline on focus/click; keep the pill
   border as the only edge, and make focus visible by tinting the border
   instead. Prevents the thick square outline seen right after a click. */
.theme-toggle-btn:focus,
.theme-toggle-btn:focus-visible {
    outline: none;
    border-color: var(--accent);
}
/* Icon hiện chế độ đang dùng: sáng → mặt trời, tối → mặt trăng.
   Có màu như emoji cũ: mặt trời cam, trăng vàng tô đặc. */
.theme-toggle-btn .icon-sun  { display: inline-flex; color: #f59e0b; }
.theme-toggle-btn .icon-moon { display: none; color: #facc15; }
.theme-toggle-btn .icon-moon svg { fill: currentColor; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle-btn .icon-sun  { display: none; }
    :root:not([data-theme="light"]) .theme-toggle-btn .icon-moon { display: inline-flex; }
}
:root[data-theme="dark"] .theme-toggle-btn .icon-sun  { display: none; }
:root[data-theme="dark"] .theme-toggle-btn .icon-moon { display: inline-flex; }

/* ============================================================
   DIỄN BIẾN THỊ TRƯỜNG — tab, widgets, mirror, sector heatmap.
   Data from /market_movers endpoint.
============================================================ */
.tabs-strip {
    display: inline-flex; gap: 4px; padding: 4px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 12px; margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}
.tab-btn {
    padding: 10px 18px; border: 0; background: transparent;
    color: var(--text-muted); font-weight: 500; font-size: 13.5px;
    border-radius: 8px; cursor: pointer; font-family: inherit;
    display: inline-flex; align-items: center; gap: 6px;
}
.tab-btn.active { background: var(--accent); color: white; }
.tab-btn:not(.active):hover { background: var(--surface-hover); color: var(--text); }
.tab-btn svg { flex-shrink: 0; }

#tabMarket .widget-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 16px; padding: 18px 20px 14px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 14px;
}

/* Widget bị khoá: header rõ, nội dung (dữ liệu giả từ server) mờ dần xuống
   dưới để vẫn thấy "có gì đó" bên trong — kích tò mò. Panel mở khoá nằm giữa. */
#tabMarket .widget-card.wl-locked {
    position: relative;
    overflow: hidden;
    min-height: 180px;
}
#tabMarket .widget-card.wl-locked > :not(.widget-header):not(.wl-overlay) {
    filter: blur(5px);
    opacity: 0.55;
    pointer-events: none;
    user-select: none;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 35%, transparent 100%);
}

.wl-overlay {
    position: absolute;
    inset: 52px 0 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
/* Nút nhỏ giữa vùng mờ — 1 dòng, không lặp lại khối giải thích */
.wl-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: var(--surface);
    color: var(--text-heading);
    border: 1px solid var(--border-strong);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s, border-color 0.15s;
}
.wl-chip svg { width: 15px; height: 15px; color: var(--accent); }
.wl-chip:hover { transform: translateY(-1px); border-color: var(--accent); color: var(--text-heading); text-decoration: none; }
.wl-chip:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Chip điểm cạnh avatar */
.points-chip {
    display: inline-flex; align-items: center;
    padding: 5px 11px; margin-right: 8px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
    background: var(--accent-soft); color: var(--accent-text);
    border: 1px solid var(--accent-tint); text-decoration: none;
}
.points-chip:hover { text-decoration: none; color: var(--accent-text); border-color: var(--accent); }
.points-chip.points-low { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
:root[data-theme="dark"] .points-chip.points-low { background: rgba(249,115,22,0.15); color: #fdba74; border-color: rgba(249,115,22,0.35); }

/* ── Thẻ "Mời bạn" (profile) ─────────────────────────────────────── */
.invite-card { border: 1px solid var(--accent-tint); background: linear-gradient(135deg, var(--accent-soft), var(--surface) 60%); }
.invite-body { display: flex; flex-direction: column; gap: 14px; }
.invite-link-row { display: flex; gap: 8px; flex-wrap: wrap; }
.invite-url {
    flex: 1; min-width: 220px;
    padding: 9px 12px; border-radius: 8px;
    border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px;
}
.invite-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
    border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
    cursor: pointer; white-space: nowrap;
}
.invite-btn:hover { border-color: var(--accent); }
.invite-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.invite-btn-primary:hover { background: var(--accent-hover); }
.invite-qr img { border-radius: 8px; border: 1px solid var(--border); background: #fff; padding: 6px; }
.invite-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.invite-stats > div {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 12px; border-radius: 10px;
    background: var(--surface); border: 1px solid var(--border-subtle);
}
.invite-stats strong { font-size: 20px; color: var(--text-heading); font-variant-numeric: tabular-nums; }
.invite-stats span { font-size: 12px; color: var(--text-muted); }
.invite-note { font-size: 12px; color: var(--text-faint); }
:root[data-theme="dark"] .invite-btn-primary { color: #0a0a0a; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .invite-btn-primary { color: #0a0a0a; }
}

/* Gói lọc bị khoá: vẫn thấy tên (kích tò mò), nhạt màu + icon khoá nhỏ */
.pack-btn.pack-locked { opacity: 0.6; }
.pack-btn.pack-locked:hover { opacity: 0.9; }
.pack-btn .pack-lock-ico { width: 12px; height: 12px; margin-left: 6px; flex-shrink: 0; opacity: 0.8; }

.pack-gate {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
    padding: 10px 40px 10px 14px;
    border-radius: 10px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-tint);
    font-size: 13px;
    color: var(--text-muted);
}
.pack-gate > span { flex: 1; min-width: 200px; }
.pack-gate strong { color: var(--text-heading); }
.pack-gate .wl-msg { flex-basis: 100%; }
.pack-gate-close {
    position: absolute;
    top: 6px;
    right: 8px;
    border: none;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px;
}
.pack-gate-close:hover { color: var(--text-heading); }

/* Banner duy nhất đầu tab — giải thích + CTA chính */
.wl-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-tint);
    flex-wrap: wrap;
}
.wl-banner-ico {
    width: 38px; height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface);
    color: var(--accent);
}
.wl-banner-ico svg { width: 18px; height: 18px; }
.wl-banner-text {
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: var(--text-muted);
}
.wl-banner-text strong { font-size: 14px; color: var(--text-heading); }
.wl-banner .wl-msg { flex-basis: 100%; margin-top: 0; }
.wl-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s, background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.wl-btn:hover { text-decoration: none; transform: translateY(-1px); }
.wl-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.wl-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.wl-btn-primary:hover:not(:disabled) { background: var(--accent-hover); color: #fff; }
.wl-btn-google { background: #fff; border-color: var(--border-strong); color: #0f172a; }
.wl-btn-google:hover { background: #f8fafc; color: #0f172a; }
.wl-msg { font-size: 12px; color: #dc2626; }
.wl-msg:empty { display: none; }
.wl-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-text);
    white-space: nowrap;
}
:root[data-theme="dark"] .wl-btn-primary { color: #0a0a0a; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wl-btn-primary { color: #0a0a0a; }
}
.widget-header {
    display: flex; align-items: center;
    gap: 8px; margin-bottom: 6px;
}
/* Pill scope tự đẩy về phải bằng auto-margin để không phụ thuộc vào số con
   trước nó (button snapshot có/không). space-between cũ đẩy con giữa (title)
   ra chính giữa khi có 3 item — hỏng căn chỉnh. */
.widget-header .widget-scope-pill { margin-left: auto; }
.widget-title {
    font-size: 15px; font-weight: 700; color: var(--text-heading);
    letter-spacing: -0.01em;
    display: inline-flex; align-items: center; gap: 8px;
}
.widget-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 7px;
    font-size: 12px;
}
.icon-up   { background: rgba(22,163,74,0.10); color: #16a34a; }
.icon-down { background: rgba(239,68,68,0.10); color: #ef4444; }
.icon-vol  { background: var(--accent-soft); color: var(--accent); }
.icon-ceil { background: rgba(217,70,239,0.10); color: #D946EF; }
.icon-flow { background: rgba(99,102,241,0.12); color: #6366f1; }
.icon-sector { background: rgba(139,92,246,0.12); color: #8b5cf6; }
:root[data-theme="dark"] .icon-flow { color: #818cf8; }
:root[data-theme="dark"] .icon-sector { color: #a78bfa; }
.widget-scope-pill {
    padding: 4px 10px; background: var(--surface-2);
    border-radius: 6px; font-size: 11px; color: var(--text-muted);
    font-weight: 500;
}
.market-grid-2 {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 900px) { .market-grid-2 { grid-template-columns: 1fr; } }

.foreign-header {
    display: flex; gap: 24px; align-items: baseline;
    margin: 10px 0 14px; flex-wrap: wrap;
    padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.fh-net { display: flex; flex-direction: column; gap: 2px; }
.fh-label {
    font-size: 10px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.fh-net-value {
    font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.15;
}
.fh-net-value.down { color: #ef4444; }
.fh-net-value.up   { color: #16a34a; }
.fh-net-value .unit { font-size: 12px; opacity: 0.65; font-weight: 500; }
.fh-totals { display: flex; gap: 16px; margin-left: auto; font-size: 12.5px; }
.fh-tot { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.fh-tot-label { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.fh-tot-value { font-weight: 700; font-size: 14px; }
.fh-tot-value.up   { color: #16a34a; }
.fh-tot-value.down { color: #ef4444; }
:root[data-theme="dark"] .fh-tot-value.up,
:root[data-theme="dark"] .fh-net-value.up { color: #4ade80; }
:root[data-theme="dark"] .fh-tot-value.down,
:root[data-theme="dark"] .fh-net-value.down { color: #f87171; }

.subtab-strip {
    display: inline-flex; gap: 4px; padding: 3px;
    background: var(--surface-2); border-radius: 10px; margin-bottom: 14px;
}
.subtab {
    padding: 6px 14px; border: 0; background: transparent;
    color: var(--text-muted); font-weight: 500; font-size: 12px;
    border-radius: 7px; cursor: pointer; font-family: inherit;
}
.subtab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 600; }

.widget-legend {
    display: flex; justify-content: center; gap: 20px;
    margin-top: 12px; font-size: 11.5px; color: var(--text-muted);
}
.lg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 5px; }

#tabMarket .col-header-row {
    display: grid; gap: 12px;
    padding: 10px 4px 8px;
    font-size: 11px; color: var(--text-muted); font-weight: 500;
    border-bottom: 1px solid var(--border);
    margin-top: 4px;
}
/* minmax(0, 1fr) — plain `1fr` grew columns to their content minimum, so
   column 1 (header "Mã cổ phiếu" text vs logo+ticker in the value row)
   ended up different widths, dragging every downstream column off between
   the two rows. Forcing minmax(0, 1fr) locks all four columns to the same
   width regardless of content, so header right-edge = value right-edge. */
#tabMarket .col-header-row.layout-vol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
#tabMarket .col-header-row.layout-vcp { grid-template-columns: 120px 1fr 1fr 1fr 1.5fr 1fr; gap: 10px; padding: 10px 6px 8px; }
#tabMarket .col-header-row .ch { display: block; min-width: 0; white-space: nowrap; }
#tabMarket .col-header-row .ch.center { text-align: center; }
#tabMarket .col-header-row .ch.right { text-align: right; }

#tabMarket .rows { display: flex; flex-direction: column; padding-top: 2px; }
#tabMarket .row {
    display: grid; align-items: center; gap: 12px;
    padding: 10px 4px; border-radius: 6px;
    /* Bootstrap's global .row class ships `margin: 0 -15px` for its grid.
       Our widget rows also use class="row" and inherited that, extending
       the row 15px past the header on both sides — the value col-4 grid
       track then ran wider than the header's col-4, so right-aligned
       content landed at a different X than the header. Reset to zero. */
    margin: 0;
    transition: background 0.12s; cursor: pointer;
}
#tabMarket .row:hover { background: var(--surface-2); }
#tabMarket .row.layout-vol { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }

/* Giá khớp cell — same color palette as Biến động, matches Lọc results style */
.r-price {
    font-weight: 600; font-size: 13.5px;
    white-space: nowrap; text-align: center;
    font-variant-numeric: tabular-nums;
}
.r-price.up    { color: #16a34a; }
.r-price.down  { color: #ef4444; }
.r-price.ceil  { color: #D946EF; }
.r-price.floor { color: #0EA5E9; }
.r-price.flat  { color: #9CA3AF; }
:root[data-theme="dark"] .r-price.up    { color: #4ade80; }
:root[data-theme="dark"] .r-price.down  { color: #f87171; }
:root[data-theme="dark"] .r-price.ceil  { color: #f472e0; }
:root[data-theme="dark"] .r-price.floor { color: #38bdf8; }

.r-cell-ma { display: flex; align-items: center; gap: 12px; min-width: 0; }
.r-cell-center { display: block; text-align: center; min-width: 0; }
.r-cell-right { display: block; text-align: right; min-width: 0; }
/* Vertical centering is handled by the parent grid's align-items: center
   (see #tabMarket .row) — no per-cell flex needed. text-align on a block
   grid item aligns inline content to the cell's edge the same way the
   header spans do, so both rows anchor to the identical X. */

#tabMarket .r-logo {
    width: 32px; height: 32px; border-radius: 50%;
    overflow: hidden; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface-2);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
#tabMarket .r-logo img { width: 100%; height: 100%; object-fit: cover; }
#tabMarket .r-logo-fb {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 700; font-size: 12px;
}
.r-ticker {
    font-size: 14px; font-weight: 700; color: var(--text-heading);
    letter-spacing: -0.01em; white-space: nowrap;
}
.r-pct {
    font-weight: 600; font-size: 13.5px;
    display: inline-flex; align-items: center; gap: 3px;
    justify-content: center; white-space: nowrap;
}
/* Market widgets: tabular figures so every row lines up on the digits;
   keep center alignment to match the column header + Lọc results table. */
#tabMarket .r-pct { font-variant-numeric: tabular-nums; }
.r-pct.up    { color: #16a34a; }
.r-pct.down  { color: #ef4444; }
.r-pct.ceil  { color: #D946EF; }
.r-pct.floor { color: #0EA5E9; }
.r-pct.flat  { color: #9CA3AF; }
:root[data-theme="dark"] .r-pct.up    { color: #4ade80; }
:root[data-theme="dark"] .r-pct.down  { color: #f87171; }
:root[data-theme="dark"] .r-pct.ceil  { color: #f472e0; }
:root[data-theme="dark"] .r-pct.floor { color: #38bdf8; }
.r-pct .arw { font-size: 10px; opacity: 0.9; }
/* Toggle % / +- per widget (mỗi widget-card có class .mode-abs riêng) */
#tabMarket .widget-card .r-pct .change-pct { display: inline; }
#tabMarket .widget-card .r-pct .change-abs { display: none; }
#tabMarket .widget-card.mode-abs .r-pct .change-pct { display: none; }
#tabMarket .widget-card.mode-abs .r-pct .change-abs { display: inline; }
/* Scoped toggle per column (VCP có 2 cột toggle độc lập) */
#tabMarket .widget-card.mode-abs-trigger .col-trigger .change-pct { display: none; }
#tabMarket .widget-card.mode-abs-trigger .col-trigger .change-abs { display: inline; }
#tabMarket .widget-card.mode-abs-price   .col-price   .change-pct { display: none; }
#tabMarket .widget-card.mode-abs-price   .col-price   .change-abs { display: inline; }
.ch-toggle-market {
    display: inline-flex; align-items: center; gap: 4px;
    cursor: pointer; margin-left: 6px;
    padding: 1px 6px; border-radius: 4px;
    background: var(--surface-2); color: var(--text-faint);
    border: 0; font-family: inherit; font-weight: 600; font-size: 10px;
}
.ch-toggle-market:hover { background: var(--surface-hover); color: var(--accent); }
.ch-toggle-market .mode-arrow { opacity: 0.5; font-size: 8px; }
.r-num {
    display: block;                       /* stretch to grid cell width */
    font-weight: 600; font-size: 13px; color: var(--text);
    white-space: nowrap; text-align: right;
    font-variant-numeric: tabular-nums;
}

#tabMarket .vol-ratio {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; font-size: 13px; color: var(--text);
}
#tabMarket .vr-label {
    min-width: 34px; text-align: right;
    font-variant-numeric: tabular-nums;
}
#tabMarket .vol-ratio.vr-low .vr-label    { color: var(--text-faint); }
#tabMarket .vol-ratio.vr-strong .vr-label { color: #16a34a; }
#tabMarket .vol-ratio.vr-spike  .vr-label { color: var(--accent); }
:root[data-theme="dark"] #tabMarket .vol-ratio.vr-strong .vr-label { color: #4ade80; }
#tabMarket .vr-bar {
    width: 44px; height: 6px;
    background: #e5e7eb;
    border-radius: 3px; overflow: hidden;
}
:root[data-theme="dark"] #tabMarket .vr-bar { background: rgba(255,255,255,0.12); }
#tabMarket .vr-fill { height: 100%; border-radius: 3px; background: var(--text-faint); }
#tabMarket .vol-ratio.vr-normal .vr-fill { background: #16a34a; }
#tabMarket .vol-ratio.vr-strong .vr-fill { background: #22c55e; }
#tabMarket .vol-ratio.vr-spike  .vr-fill { background: var(--accent); }

.mirror-row {
    display: grid;
    /* Value column FIXED 140px (fit "+12.98% [5 phiên]" widest content) —
       không dùng minmax auto vì mỗi .mirror-row là grid độc lập, auto
       size theo content mỗi row riêng → logo lệch giữa các hàng. */
    grid-template-columns: 140px 1fr 80px 80px 1fr 140px;
    align-items: center; gap: 10px;
    padding: 8px 4px; border-radius: 6px;
    cursor: pointer; transition: background 0.12s;
}
.mirror-row:hover { background: var(--surface-2); }
.mr-lv { text-align: left;  font-weight: 700; font-size: 13px; color: #16a34a; }
.mr-rv { text-align: right; font-weight: 700; font-size: 13px; color: #ef4444; }
/* Bucket-based colors: ceil tím, floor cyan, up/down giữ xanh/đỏ mặc định,
   flat vàng. Cùng palette với .r-pct để consistent qua các widget. */
.mr-lv.ceil, .mr-rv.ceil   { color: #D946EF; }
.mr-lv.floor, .mr-rv.floor { color: #0EA5E9; }
.mr-lv.flat, .mr-rv.flat   { color: #ca8a04; }
.mr-lv.up                  { color: #16a34a; }
.mr-rv.down                { color: #ef4444; }
:root[data-theme="dark"] .mr-lv.ceil, :root[data-theme="dark"] .mr-rv.ceil   { color: #f472e0; }
:root[data-theme="dark"] .mr-lv.floor, :root[data-theme="dark"] .mr-rv.floor { color: #38bdf8; }
:root[data-theme="dark"] .mr-lv.up   { color: #4ade80; }
:root[data-theme="dark"] .mr-rv.down { color: #f87171; }

/* VCP table — header + rows: Mã | Ngày tăng | KL so TB | Bao lâu | KL đã siết | Giá */
.vcp-row {
    display: grid;
    grid-template-columns: 120px 1fr 1fr 1fr 1.5fr 1fr;
    gap: 10px; align-items: center;
    padding: 8px 6px; border-radius: 6px;
    transition: background 0.12s;
    font-size: 12.5px;
}
.vcp-row:hover { background: var(--surface-2); }
/* vcp-header removed — dùng .col-header-row.layout-vcp chuẩn */
.vcp-sym { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.vcp-ticker { color: var(--text-heading); }
.ta-c { text-align: center; }
.ta-r { text-align: right; }
.vcp-cell-up { color: #16a34a; font-weight: 700; }
:root[data-theme="dark"] .vcp-cell-up { color: #4ade80; }
/* Phiên tăng cell — tô màu theo bucket (ceil/floor/up/down/flat) */
.vcp-trig { font-weight: 700; }
.vcp-trig.up   { color: #16a34a; }
.vcp-trig.down { color: #ef4444; }
.vcp-trig.ceil  { color: #D946EF; }
.vcp-trig.floor { color: #0EA5E9; }
.vcp-trig.flat  { color: #ca8a04; }
:root[data-theme="dark"] .vcp-trig.up { color: #4ade80; }
:root[data-theme="dark"] .vcp-trig.down { color: #f87171; }
:root[data-theme="dark"] .vcp-trig.ceil  { color: #f472e0; }
:root[data-theme="dark"] .vcp-trig.floor { color: #38bdf8; }
.vcp-muted { color: var(--text-muted); }
.vcp-siet { font-size: 11px; color: var(--text-faint); margin-left: 3px; }
/* Tô màu KL đã giảm theo mức siết — hài hòa palette card khác */
.siet-strong b { color: #16a34a; }
.siet-mid    b { color: #ca8a04; }
.siet-weak   b { color: var(--text-muted); }
:root[data-theme="dark"] .siet-strong b { color: #4ade80; }
:root[data-theme="dark"] .siet-mid    b { color: #eab308; }
.vcp-price { font-weight: 700; font-size: 13px; }
.vcp-price.up { color: #16a34a; }
.vcp-price.down { color: #ef4444; }
:root[data-theme="dark"] .vcp-price.up { color: #4ade80; }
:root[data-theme="dark"] .vcp-price.down { color: #f87171; }

/* Streak phiên count — badge nhỏ với bg mờ, tách khỏi % cho dễ đọc.
   Trước dùng "·5p" inline dính sát % khiến khó phân biệt 2 số. */
.streak-subp {
    display: inline-block;
    font-size: 10.5px; font-weight: 600;
    color: var(--text-muted, #94a3b8);
    background: var(--surface-2);
    padding: 1px 5px;
    border-radius: 3px;
    margin: 0 6px;
    letter-spacing: 0.2px;
}
:root[data-theme="dark"] .mr-lv { color: #4ade80; }
:root[data-theme="dark"] .mr-rv { color: #f87171; }
.mr-lt, .mr-rt {
    font-weight: 700; font-size: 13.5px; color: var(--text-heading);
    display: inline-flex; align-items: center; gap: 6px; padding: 0 8px;
}
.mr-lt { justify-content: flex-end; }
.mr-rt { justify-content: flex-start; }
.mirror-bar-l, .mirror-bar-r {
    height: 14px; background: var(--surface-2);
    border-radius: 4px; position: relative; overflow: hidden;
}
.mirror-bar-l .fill {
    height: 100%; margin-left: auto;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 4px 0 0 4px; display: block;
}
.mirror-bar-r .fill {
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #f87171);
    border-radius: 0 4px 4px 0; display: block;
}
.mirror-avatar {
    width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-2); flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.mirror-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mirror-avatar-fb {
    width: 100%; height: 100%; display: flex; align-items: center;
    justify-content: center; color: white; font-weight: 700; font-size: 11px;
}
.mr-lt { padding: 0 10px; }
.mr-rt { padding: 0 10px; }

#tabMarket .sector-grid {
    display: grid; grid-template-columns: repeat(6, 1fr);
    gap: 4px; margin-top: 12px;
}
@media (max-width: 900px) { #tabMarket .sector-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 600px) { #tabMarket .sector-grid { grid-template-columns: repeat(3, 1fr); } }
#tabMarket .sector-cell {
    padding: 12px 10px; border-radius: 8px; color: white;
    display: flex; flex-direction: column; min-height: 72px;
    font-size: 11px; cursor: pointer; transition: transform 0.1s;
}
#tabMarket .sector-cell:hover { transform: scale(1.02); }
/* Flat sectors sit on amber, which white text cannot be read against. */
#tabMarket .sector-cell.sc-flat { color: #422006; }
#tabMarket .sector-cell.sc-flat .scount { opacity: 0.7; }
#tabMarket .sector-cell .sname { font-weight: 700; font-size: 12.5px; line-height: 1.2; }
#tabMarket .sector-cell .schg { font-weight: 700; font-size: 14px; margin-top: 4px; }
#tabMarket .sector-cell .scount {
    font-size: 10px; margin-top: auto; opacity: 0.85; padding-top: 4px;
}

/* ============================================================
   Dark-mode card treatment — simplize style
   ------------------------------------------------------------
   Simplize's dark cards have NO visible outline: the #191919 surface
   sits on the #0a0a0a body and the contrast alone defines the card.
   Our tokens had every card render a 10%-white border on top of that,
   which reads as a hard "frame" — visually thô compared to simplize's
   softer feel. Strip the outline from the outer card containers only;
   internal borders (form fields, table dividers, foreign-header underline)
   stay so functional structure is still legible.
============================================================ */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .filter-card,
    :root:not([data-theme="light"]) .idx-card,
    :root:not([data-theme="light"]) #tabMarket .widget-card {
        border-color: transparent;
        box-shadow: none;
    }
}
:root[data-theme="dark"] .filter-card,
:root[data-theme="dark"] .idx-card,
:root[data-theme="dark"] #tabMarket .widget-card {
    border-color: transparent;
    box-shadow: none;
}


/* ============================================================================
   SNAPSHOT BUTTON (📸 chụp thẻ) — inject vào widget-header + results-actions
   qua JS. Style riêng vì user sẽ share ảnh — nút phải nhỏ gọn, không phá
   header layout, nhưng đủ to để chạm ngón trên mobile (44px).
   ============================================================================ */

.btn-snapshot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 6px;
    color: var(--text-faint, #6b7280);
    cursor: pointer;
    transition: color 120ms, border-color 120ms, background 120ms;
    flex-shrink: 0;
}
.btn-snapshot:hover {
    color: #10b981;
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.06);
}
.btn-snapshot:active {
    transform: scale(0.96);
}
.btn-snapshot svg {
    pointer-events: none;
}

/* Trong results-actions: match chiều cao button "Lọc cổ phiếu" (btn-primary-soft) */
.results-actions .btn-snapshot {
    height: 38px;
    width: 38px;
    /* Palette: xanh brand chỉ dành cho CTA "Lọc cổ phiếu" (primary). Snapshot
       là secondary → neutral gray border, hover amber (#f59e0b) tone camera/ảnh.
       Amber contrast tốt cả light + dark theme, khác cả xanh (CTA) lẫn indigo
       (preset save) tạo palette rõ ràng. */
    border-color: var(--border, #e2e8f0);
    color: var(--text-muted, #64748b);
    border-radius: 8px;
}
.results-actions .btn-snapshot:hover {
    background: rgba(245, 158, 11, 0.10);
    border-color: #f59e0b;
    color: #f59e0b;
}

@media (max-width: 768px) {
    /* Touch target 44px — WCAG cho ngón cái */
    .btn-snapshot,
    .results-actions .btn-snapshot {
        width: 44px;
        height: 44px;
    }
}

/* Watchlist star — cạnh symbol code trong results row. */
.watch-star {
    background: none;
    border: none;
    outline: none;
    padding: 0 4px;
    margin-left: 2px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    color: var(--text-faint, #cbd5e1);
    transition: color 0.15s ease;
    vertical-align: baseline;      /* align với chữ, không middle */
    position: relative;
    top: 1px;                       /* fine-tune baseline pixel */
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.watch-star:hover,
.watch-star:focus,
.watch-star:active {
    color: #eab308;
    outline: none;
    box-shadow: none;
}
.watch-star.active {
    color: #eab308;
}
.watch-star::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Profile dashboard (/profile) — wide layout, hero card + stats grid +
   activity chart + watchlist + snapshot history. Dark mode aware.
   ───────────────────────────────────────────────────────────────────────── */
/* Section title dùng cho các trang phụ (Hồ sơ, Cài đặt, ...) — thay thế
   việc override page-subtitle (chỗ đó cần giữ slogan chung của app). */
.page-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
}
.page-section-title svg { flex-shrink: 0; }

/* Hero card — avatar + info + logout button. Compact: card user < brand header */
.profile-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
}
.profile-hero-avatar {
    /* Nhỏ hơn logo .page-icon (64px) → visual hierarchy: brand > user card */
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border, #e2e8f0);
    flex-shrink: 0;
}
.profile-hero-avatar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: #fff;
}
.profile-hero-avatar-icon svg {
    width: 30px;
    height: 30px;
}
.profile-hero-info {
    flex: 1;
    min-width: 0;
}
.profile-hero-name {
    /* Nhỏ hơn .page-title (26px) → tên user không lấn brand */
    font-size: 17px;
    font-weight: 600;
    color: var(--text, #0f172a);
    margin: 0 0 2px;
}
.profile-hero-email {
    font-size: 12px;
    color: var(--text-muted, #64748b);
    margin-bottom: 6px;
}
.profile-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted, #64748b);
}
.profile-hero-dot { color: var(--text-faint, #cbd5e1); }
.profile-hero-actions { flex-shrink: 0; }

/* Stats grid — 4 columns responsive */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.stat-card {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 20px;
    text-align: left;
}
.stat-label {
    font-size: 12px;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}
.stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text, #0f172a);
    line-height: 1;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
.stat-sub {
    font-size: 12px;
    color: var(--text-faint, #94a3b8);
}

/* Dashboard card wrapper — dùng cho activity, watchlist, snapshot */
.dashboard-card {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}
.dashboard-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 16px;
}
.dashboard-card-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text, #0f172a);
    margin: 0;
}
.dashboard-card-header .dashboard-card-sub {
    font-size: 12px;
    color: var(--text-muted, #64748b);
}
.badge-count {
    display: inline-block;
    background: var(--surface-hover, #f1f5f9);
    color: var(--text-muted, #64748b);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
    margin-left: 6px;
}

/* Activity chart — bar per day */
.activity-chart {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    height: 140px;
    padding-top: 20px;
    /* Horizontal gridlines — 4 dòng ngang subtle giúp mắt so sánh chiều cao cột */
    background-image: repeating-linear-gradient(
        to top,
        transparent 0,
        transparent calc(25% - 1px),
        var(--border-subtle, #f1f5f9) calc(25% - 1px),
        var(--border-subtle, #f1f5f9) 25%
    );
    background-size: 100% calc(100% - 20px);
    background-position: 0 100%;
    background-repeat: no-repeat;
}
.activity-bar-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    position: relative;
}
.activity-bar {
    width: 100%;
    max-width: 40px;
    background: linear-gradient(180deg, #22c55e, #16a34a);
    border-radius: 4px 4px 0 0;
    min-height: 4px;
    transition: height 0.3s ease;
}
/* Ngày không scan → chỉ hiển thị baseline mảnh 6px màu xám vừa.
   Số "0" trên đầu KHÔNG hiển thị (bỏ trong template) — theo pattern của
   Cloudflare Analytics / Stripe Dashboard / PostHog: bar chart ẩn label
   khi giá trị = 0, hover tooltip cho chi tiết. */
.activity-bar-wrap.no-activity .activity-bar {
    background: var(--border-strong, #cbd5e1);
    min-height: 6px;
    border-radius: 3px;
    opacity: 1;
}
.activity-bar-wrap:hover .activity-bar {
    filter: brightness(0.95);
}
.activity-bar-wrap.no-activity:hover .activity-bar {
    background: #94a3b8;
    filter: none;
}
.activity-bar-value {
    position: absolute;
    top: -18px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text, #0f172a);
    font-variant-numeric: tabular-nums;
}
.activity-bar-label {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

/* 2-column row for watchlist + snapshot side by side */
.dashboard-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}
.dashboard-card-half { margin-bottom: 0; }

/* Watchlist mini table với live prices — profile dashboard */
.watchlist-loading {
    text-align: center;
    padding: 30px;
    color: var(--text-muted, #64748b);
    font-size: 13px;
}
/* ── Portfolio (danh mục đầu tư) card ─────────────────────────────────── */
/* Form add row: grid 4 cột phân phối cân đối theo width bảng — Mã input rộng
   nhất (search + autocomplete), KL/Giá vốn fixed medium, button auto. Trên
   mobile hẹp (<640px) collapse xuống 2 cột rồi 1 cột. */
.pf-add-row {
    display: grid;
    grid-template-columns: minmax(200px, 1fr) 150px 180px auto;
    gap: 10px;
    margin-bottom: 12px;
    align-items: stretch;
}
@media (max-width: 768px) {
    .pf-add-row { grid-template-columns: 1fr 1fr; }
    .pf-add-input-wrap { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
    .pf-add-row { grid-template-columns: 1fr; }
    .pf-add-input-wrap { grid-column: auto; }
}
.pf-add-input-wrap {
    position: relative;
}
.pf-input {
    padding: 8px 12px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text, #0f172a);
    background: var(--surface, #ffffff);
    outline: none;
    transition: border-color 120ms, box-shadow 120ms;
}
.pf-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.pf-sym-input { width: 100%; padding-left: 36px; }
.pf-qty-input, .pf-cost-input { width: 100%; }
.pf-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 16px;
    border: 1px solid #10b981;
    background: #10b981;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
}
.pf-add-btn:hover { background: #059669; border-color: #059669; }
.pf-add-btn:active { transform: scale(0.97); }
.pf-add-btn::-moz-focus-inner { border: 0; }
.pf-add-btn:focus, .pf-add-btn:focus-visible { outline: none; }

#pfTable {
    margin-top: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
#pfTable thead th {
    font-size: 12px;
    color: var(--text-faint, #94a3b8);
    padding: 10px 12px;
    text-transform: none;
    letter-spacing: 0.2px;
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    white-space: nowrap;
}
#pfTable thead th:first-child { text-align: left; }
#pfTable tbody td {
    text-align: center;
    vertical-align: middle;
    padding: 12px;
    border-top: none;
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
    font-variant-numeric: tabular-nums;
}
#pfTable td.pct-up   { color: #16a34a; font-weight: 600; }
#pfTable td.pct-down { color: #dc2626; font-weight: 600; }
#pfTable td.pct-flat { color: #ca8a04; font-weight: 600; }
#pfTable td.pct-ceil { color: #D946EF; font-weight: 600; }
#pfTable td.pct-floor{ color: #0EA5E9; font-weight: 600; }
#pfTable.mode-abs .change-cell .change-pct { display: none; }
#pfTable.mode-abs .change-cell .change-abs { display: inline; }
#pfTable tbody tr:hover { background: #f9fafb; }
#pfTable .wl-remove-cell { width: 40px; padding: 4px; }

/* Inline edit cell — hover báo clickable, active input indigo focus */
#pfTable td.pf-editable {
    cursor: pointer;
    position: relative;
}
#pfTable td.pf-editable:hover {
    background: rgba(99, 102, 241, 0.08);
    box-shadow: inset 0 -1px 0 rgba(99, 102, 241, 0.3);
}
.pf-inline-edit {
    width: 100%;
    max-width: 120px;
    padding: 4px 6px;
    border: 1px solid #6366f1;
    border-radius: 4px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: center;
    outline: none;
    background: var(--surface, #fff);
    color: var(--text, #0f172a);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.pf-inline-edit::-webkit-outer-spin-button,
.pf-inline-edit::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Footer row tổng — chỉ dùng border-bottom của tbody row cuối làm separator
   (tránh double 2 line stack). Padding + bg subtle nhẹ đủ visual weight.
   vertical-align: top → mini label align cùng dòng dù value dưới có 1 hay 2 dòng. */
#pfTable tfoot .pf-totals-row td {
    text-align: center;
    padding: 14px 12px;
    border-top: 0;
    background: var(--surface-hover, #f8fafc);
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    vertical-align: top;
}
#pfTable tfoot .pf-totals-row td:first-child { text-align: left; }
.pf-total-abs {
    display: block;
    font-size: 11px;
    opacity: 0.85;
    font-weight: 500;
}
/* Mini label trên mỗi total cell — style broker (Simplize/DNSE) */
.pf-total-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-faint, #94a3b8);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}
.pf-total-value {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* Tỷ trọng: % allocation của position — muted color để không lấn P&L */
#pfTable td.pf-weight {
    color: var(--text-muted, #64748b);
    font-weight: 500;
}

/* Delete button portfolio row */
.pf-remove {
    background: none;
    border: none;
    outline: none;
    color: var(--text-faint, #94a3b8);
    font-size: 18px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 4px;
}
.pf-remove:hover { background: rgba(220,38,38,0.15); color: #dc2626; }
.pf-remove::-moz-focus-inner { border: 0; }
.pf-remove:focus, .pf-remove:focus-visible { outline: none; }

/* Badge ⏱ cho position có giá TT cũ (bar cuối < today) */
.pf-stale-badge {
    display: inline-block;
    margin-left: 4px;
    font-size: 12px;
    opacity: 0.7;
    cursor: help;
    color: #f59e0b;
}

/* Dark theme mirror */
:root[data-theme="dark"] #pfTable thead th        { color: var(--text-faint); border-bottom-color: var(--border-subtle); }
:root[data-theme="dark"] #pfTable tbody tr:hover  { background: rgba(255, 255, 255, 0.035); }
:root[data-theme="dark"] #pfTable tbody td        { border-bottom-color: var(--border-subtle); color: var(--text); }
/* Dark theme: bỏ border-top (đã có border-bottom của tbody row cuối stack lại
   thành đường 2px), bg transparent. Chỉ dựa vào border-bottom hàng cuối để
   phân cách → 1 đường 1px duy nhất, mảnh như separator tbody. */
:root[data-theme="dark"] #pfTable tfoot .pf-totals-row td {
    background: transparent;
    border-top: 0;
}
:root[data-theme="dark"] #pfTable td.pct-up    { color: #16a34a; }
:root[data-theme="dark"] #pfTable td.pct-down  { color: #dc2626; }
:root[data-theme="dark"] #pfTable td.pct-flat  { color: #ca8a04; }

/* ── Filter presets card + main-page save button ─────────────────────── */
/* Palette: indigo #6366f1 (preset accent — ties vào category tabs profile).
   Xanh lá dành riêng CTA "Lọc cổ phiếu" để giữ hierarchy: primary vs secondary.
   Indigo hoạt động tốt cả light + dark theme không cần token đặc biệt. */
.btn-preset-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(99, 102, 241, 0.35);
    background: transparent;
    color: #6366f1;
    font-size: 14px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: color 120ms, border-color 120ms, background 120ms;
    outline: none;
}
.btn-preset-save:hover {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
}
.btn-preset-save:active { transform: scale(0.97); }
.btn-preset-save::-moz-focus-inner { border: 0; }
.btn-preset-save:focus, .btn-preset-save:focus-visible { outline: none; }
.btn-preset-save svg { width: 16px; height: 16px; flex-shrink: 0; }
/* .is-locked class + :disabled: button vẫn visible (giữ layout ổn định)
   nhưng grayed out, không click được, cursor not-allowed. Dùng khi đang scan
   để tránh race condition. */
.btn-preset-save.is-locked,
.btn-preset-save:disabled,
.results-actions .btn-snapshot.is-locked,
.results-actions .btn-snapshot:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Loading toast khi apply preset — match indigo palette của preset system */
.preset-loading-toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #6366f1;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.15);
    font-size: 14px;
    font-weight: 500;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    animation: preset-toast-slide 0.3s ease;
}
@keyframes preset-toast-slide {
    from { opacity: 0; transform: translate(-50%, -20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.preset-loading-toast .spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: preset-spin 0.8s linear infinite;
}
@keyframes preset-spin { to { transform: rotate(360deg); } }

.preset-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.preset-item {
    display: grid;
    grid-template-columns: 1fr auto auto auto;   /* info · meta · share · del */
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle, #f1f5f9);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: background 120ms, border-color 120ms;
}
.preset-item:hover {
    background: rgba(99,102,241,0.05);
    border-color: rgba(99,102,241,0.3);
    text-decoration: none;
    color: inherit;
}
.preset-info { min-width: 0; }
.preset-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.preset-sub {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    margin-top: 2px;
}
.preset-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    font-size: 11px;
    color: var(--text-faint, #94a3b8);
    white-space: nowrap;
}
.preset-use {
    background: var(--border-subtle, #f1f5f9);
    padding: 1px 6px;
    border-radius: 8px;
    font-weight: 500;
}
.preset-del {
    background: none;
    border: none;
    color: var(--text-faint, #94a3b8);
    font-size: 18px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 4px;
    outline: none;
}
.preset-del:hover { background: rgba(220,38,38,0.15); color: #dc2626; }
.preset-del::-moz-focus-inner { border: 0; }
.preset-del:focus, .preset-del:focus-visible { outline: none; }

/* ── Top movers widget (2-col grid, gainers/losers card) ─────────────── */
.dashboard-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
@media (max-width: 768px) {
    .dashboard-row-2col { grid-template-columns: 1fr; }
}
.top-movers-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.top-movers-empty {
    color: var(--text-faint, #94a3b8);
    font-size: 13px;
    padding: 20px;
    text-align: center;
}
.tm-row {
    display: grid;
    grid-template-columns: 32px 1fr auto auto;
    gap: 10px;
    align-items: center;
    padding: 8px 4px;
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}
.tm-row:last-child { border-bottom: none; }
.tm-logo, .tm-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border-subtle, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
}
/* Match main table logo (.logo-img): contain thay vì cover để logo simplize
   (text "DGW", "HPG"...) không bị crop edges → hiển thị đầy đủ. */
.tm-logo { object-fit: contain; padding: 2px; }
.tm-avatar { object-fit: cover; }
.tm-info { min-width: 0; }
.tm-sym {
    font-weight: 600;
    font-size: 13px;
    color: var(--text, #0f172a);
}
.tm-name {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tm-price, .tm-pct {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    min-width: 60px;
}
.tm-price.pct-up, .tm-pct.pct-up { color: #16a34a; }
.tm-price.pct-down, .tm-pct.pct-down { color: #dc2626; }
.tm-price.pct-flat, .tm-pct.pct-flat { color: #ca8a04; }
.tm-price.pct-ceil, .tm-pct.pct-ceil { color: #D946EF; }
.tm-price.pct-floor, .tm-pct.pct-floor { color: #0EA5E9; }

/* ── Category tabs ──────────────────────────────────────────────────────
   Tab bar cho watchlist multi-category. Scroll ngang khi nhiều danh mục.
   Design: pill-shaped tabs, active có border underline dày + màu accent. */
.wl-tabs-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 16px;
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
    padding-bottom: 4px;
}
.wl-tabs {
    display: flex;
    gap: 4px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    padding-bottom: 2px;
}
.wl-tabs::-webkit-scrollbar { height: 4px; }
.wl-tabs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
.wl-tab-loading {
    color: var(--text-faint, #94a3b8);
    font-size: 13px;
    padding: 8px 12px;
}
.wl-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 120ms, background 120ms, border-color 120ms;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.wl-tab::-moz-focus-inner { border: 0; }
.wl-tab:focus,
.wl-tab:focus-visible,
.wl-tab:active { outline: none; box-shadow: none; }
.wl-tab:hover {
    background: var(--surface-hover, #f8fafc);
    color: var(--text, #0f172a);
}
.wl-tab.active {
    color: #6366f1;
    border-bottom-color: #6366f1;
    font-weight: 600;
}
.wl-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    background: var(--border, #e2e8f0);
    color: var(--text-muted, #64748b);
    border-radius: 9px;
}
/* Inline rename: contenteditable focus visible. Prevent line break wrap. */
/* Tab icon — mỗi tab 1 màu tươi khác nhau, giữ nguyên khi hover/active */
.wl-tab-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
}
.wl-tab-ico-dash  { color: #6366f1; }   /* Indigo — Tổng quan */
.wl-tab-ico-users { color: #10b981; }   /* Emerald — Người dùng */
.wl-tab-ico-cfg   { color: #f59e0b; }   /* Amber — Cấu hình điểm */
.wl-tab:hover .wl-tab-ico { transform: scale(1.05); transition: transform 0.15s; }

.wl-tab-name[contenteditable="true"] {
    background: var(--surface, #fff);
    outline: 2px solid #6366f1;
    outline-offset: 1px;
    border-radius: 3px;
    padding: 0 4px;
    cursor: text;
    min-width: 40px;
    white-space: nowrap;
}
.wl-tab-editable { cursor: pointer; }
.wl-tab.active .wl-tab-count {
    background: rgba(99,102,241,0.15);
    color: #6366f1;
}
.wl-tab-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--text-faint, #94a3b8);
    border-radius: 4px;
    font-size: 15px;
    line-height: 1;
    margin-left: 2px;
}
.wl-tab-close:hover {
    background: rgba(220,38,38,0.15);
    color: #dc2626;
}
.wl-tab-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px dashed var(--border-strong, #cbd5e1);
    background: transparent;
    color: var(--text-muted, #64748b);
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.wl-tab-new-btn::-moz-focus-inner { border: 0; }
.wl-tab-new-btn:focus,
.wl-tab-new-btn:focus-visible,
.wl-tab-new-btn:active { outline: none; box-shadow: none; }
.wl-tab-new-btn:hover {
    border-color: #6366f1;
    color: #6366f1;
    background: rgba(99,102,241,0.05);
}

/* ── Add mã autocomplete input ──────────────────────────────────────── */
.wl-add-row {
    margin-bottom: 12px;
}
.wl-add-input-wrap {
    position: relative;
    max-width: 480px;
}
.wl-add-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint, #94a3b8);
    pointer-events: none;
}
.wl-add-input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text, #0f172a);
    background: var(--surface, #ffffff);
    outline: none;
    transition: border-color 120ms, box-shadow 120ms;
}
.wl-add-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.15);
}
.wl-autocomplete {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.12);
    max-height: 320px;
    overflow-y: auto;
    z-index: 20;
}
.wl-ac-item {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}
.wl-ac-item:last-child { border-bottom: none; }
.wl-ac-item:hover, .wl-ac-item.active {
    background: rgba(99,102,241,0.08);
}
.wl-ac-sym {
    font-weight: 600;
    color: var(--text, #0f172a);
}
.wl-ac-name {
    color: var(--text-muted, #64748b);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wl-ac-ex {
    color: var(--text-faint, #94a3b8);
    font-size: 11px;
    padding: 2px 6px;
    background: var(--border-subtle, #f1f5f9);
    border-radius: 4px;
}

/* Scrollable container — mirror .results-scroll: 6px webkit + Firefox
   scrollbar-color + track transparent. Trước thiếu track transparent +
   scrollbar-color → Firefox và Chrome đôi khi rơi về default 13px thô. */
.watchlist-scroll {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.watchlist-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.watchlist-scroll::-webkit-scrollbar-track { background: transparent; }
.watchlist-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.watchlist-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
/* Watchlist reuse #resultsTable styling — same look as main results.
   Cell padding + header format khớp qua class .table (Bootstrap) +
   #resultsTable style rules đã có. Extra: .wl-remove-cell narrow. */
#watchlistTable {
    margin-top: 0;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
#watchlistTable thead th {
    font-size: 12px;
    color: var(--text-faint, #94a3b8);
    padding: 10px 12px;
    text-transform: none;
    letter-spacing: 0.2px;
    text-align: center;
    vertical-align: middle;
    font-weight: 600;
    white-space: nowrap;
}
#watchlistTable thead th:first-child {
    text-align: left;
}
#watchlistTable tbody td {
    text-align: center;
    vertical-align: middle;
    padding: 14px 12px;
    border-top: none;
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}
#watchlistTable td.pct-up   { color: #16a34a; font-weight: 600; }
#watchlistTable td.pct-down { color: #dc2626; font-weight: 600; }
#watchlistTable td.pct-flat { color: #ca8a04; font-weight: 600; }
#watchlistTable td.pct-ceil { color: #D946EF; font-weight: 600; }
#watchlistTable td.pct-floor{ color: #0EA5E9; font-weight: 600; }
/* Biến động fixed width (khớp #resultsTable) — tránh layout shift khi toggle % ↔ +/- */
#watchlistTable th:nth-child(3),
#watchlistTable td:nth-child(3) {
    width: 180px;
    min-width: 180px;
    white-space: nowrap;
}
/* Toggle % ↔ +/- giống #resultsTable — cùng .change-cell rule ở dòng ~1372
   đã hide .change-abs mặc định. Watchlist chỉ cần rule mode-abs riêng. */
#watchlistTable.mode-abs .change-cell .change-pct { display: none; }
#watchlistTable.mode-abs .change-cell .change-abs { display: inline; }
#watchlistTable tbody tr:hover { background: #f9fafb; }
#watchlistTable .wl-remove-cell {
    width: 40px;
    padding: 4px;
}
.watchlist-table th {
    text-align: left;
    padding: 8px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--border, #e2e8f0);
}
.watchlist-table td {
    padding: 10px 6px;
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
    font-variant-numeric: tabular-nums;
    color: var(--text, #0f172a);
}
.watchlist-table tr:last-child td { border-bottom: none; }
.watchlist-table .wl-sym {
    font-weight: 600;
    color: var(--text, #0f172a);
}
/* Override — pct-up/down phải thắng .watchlist-table td rule (cao specificity) */
.watchlist-table td.pct-up   { color: #16a34a; font-weight: 600; }
.watchlist-table td.pct-down { color: #dc2626; font-weight: 600; }
.watchlist-remove {
    background: none;
    border: none;
    outline: none;
    color: var(--text-faint, #94a3b8);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    -webkit-tap-highlight-color: transparent;
}
.watchlist-remove:hover,
.watchlist-remove:focus,
.watchlist-remove:active {
    background: #fef2f2;
    color: #dc2626;
    outline: none;
    box-shadow: none;
}
.watchlist-remove::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/* Snapshot history */
.snapshot-items {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 320px;
    overflow-y: auto;
}
.snapshot-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}
.snapshot-item:last-child { border-bottom: none; }
.snapshot-label {
    font-size: 13px;
    color: var(--text, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}
.snapshot-meta {
    font-size: 12px;
    color: var(--text-muted, #64748b);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Empty state — placeholder khi list rỗng */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted, #64748b);
}
.empty-icon {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.6;
}
.empty-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text, #0f172a);
    margin-bottom: 4px;
}
.empty-sub {
    font-size: 12px;
    color: var(--text-muted, #64748b);
    max-width: 280px;
    margin: 0 auto;
}

/* Responsive — stack columns on narrow screens */
@media (max-width: 900px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-row { grid-template-columns: 1fr; }
    .profile-hero { flex-direction: column; text-align: center; }
    .profile-hero-meta { justify-content: center; }
}

/* Profile page cũ (narrow card) — kept for backward compat, unused giờ */
.profile-page {
    max-width: 480px;
    margin: 32px auto 40px;
    padding: 0 16px;
}
.profile-card {
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    padding: 32px 24px 24px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.profile-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--border, #e2e8f0);
    margin-bottom: 16px;
}
.profile-name {
    font-size: 20px;
    font-weight: 700;
    color: var(--text, #0f172a);
    margin: 0 0 4px;
}
.profile-email {
    font-size: 14px;
    color: var(--text-muted, #64748b);
    margin: 0 0 12px;
}
.profile-tier {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    color: white;
}
.profile-tier.tier-free    { background: #64748b; }
.profile-tier.tier-basic   { background: #2563eb; }
.profile-tier.tier-pro     { background: #dc2626; }
.profile-tier.tier-premium { background: linear-gradient(135deg, #eab308, #dc2626); }

.profile-info {
    margin-top: 24px;
    border-top: 1px solid var(--border, #e2e8f0);
    padding-top: 20px;
    text-align: left;
}
.profile-info .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}
.profile-info .info-row:last-child { border-bottom: none; }
.profile-info .info-label {
    color: var(--text-muted, #64748b);
}
.profile-info .info-value {
    color: var(--text, #0f172a);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.profile-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
}
.btn-profile-secondary,
.btn-profile-danger,
.btn-profile-admin {
    flex: 1;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;    /* Không wrap text — giữ buttons đều chiều cao */
    border: 1px solid var(--border, #e2e8f0);
    transition: background 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.btn-profile-secondary {
    background: transparent;
    color: var(--text, #0f172a);
}
.btn-profile-secondary:hover {
    background: var(--surface-hover, #f1f5f9);
    text-decoration: none;
}
.btn-profile-danger {
    background: transparent;
    color: #dc2626;
    border-color: #fecaca;
}
.btn-profile-danger:hover {
    background: #fef2f2;
}
/* Nút Trang quản trị — màu indigo primary của app, khác với nút danger đỏ */
.btn-profile-admin {
    background: transparent;
    color: #6366f1;
    border-color: #c7d2fe;
}
.btn-profile-admin:hover {
    background: rgba(99, 102, 241, 0.08);
    color: #4f46e5;
    text-decoration: none;
}

/* Footer nhỏ dưới cùng trang profile */
.app-footer {
    text-align: center;
    padding: 32px 16px 24px;
    color: var(--text-faint, #94a3b8);
    font-size: 12px;
}
.app-footer p { margin: 4px 0; }
.app-footer .disclaimer { font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════
   Admin panel (/admin) — layout match /profile (container + page-header
   + dashboard-card + horizontal tabs). Reuse .stats-grid, .wl-tabs.
   ═══════════════════════════════════════════════════════════════════════ */
.admin-tab-content { padding-top: 16px; }
.admin-tab-content h4 {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 12px;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.admin-info-note {
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.20);
    color: var(--text, #0f172a);
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
    line-height: 1.5;
}
.admin-info-note code {
    background: var(--surface-hover, #f1f5f9);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
}
.admin-section { margin-bottom: 20px; }
/* Panel card style match .dashboard-card ở /profile — border rõ, shadow nhẹ,
   margin-bottom lớn để tách section rõ ràng, không bị dính nhau. */
.admin-panel-card {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.03);
    text-align: left;   /* Reset — tránh inherit center từ parent (grid item, dashboard-row) */
}
.admin-panel-card h4 {
    text-align: left;   /* Explicit left cho tiêu đề card */
    margin-top: 0;
}
.admin-panel-card table { text-align: left; }
.admin-panel-card td, .admin-panel-card th { text-align: inherit; }
/* Global admin-num — right-align cho toàn bộ tables trong admin (User + Log
   tables render trực tiếp trong .admin-tab-content, không nằm trong .admin-panel-card) */
.admin-table td.admin-num, .admin-table th.admin-num { text-align: right; }
.admin-panel-card td.admin-num, .admin-panel-card th.admin-num { text-align: right; }
.admin-chart-section { padding: 20px 24px 24px; }
/* Row 2-col gap ngang, mỗi card inside vẫn giữ margin-bottom 0 (grid item) */
.admin-row-2col {
    margin-bottom: 0;
}
.admin-row-2col .admin-panel-card {
    margin-bottom: 20px;
}
.admin-loading, .admin-empty, .admin-error, .admin-info {
    padding: 24px;
    text-align: center;
    color: var(--text-muted, #64748b);
    font-size: 13px;
}
/* Meta info trên đầu bảng — count + hint cuộn */
.admin-table-meta {
    padding: 10px 4px;
    font-size: 12px;
    color: var(--text-muted, #64748b);
    display: flex;
    align-items: center;
    gap: 4px;
}
.admin-table-meta strong {
    color: var(--text, #0f172a);
    font-weight: 600;
}
/* Cell action right-align: button "Chi tiết" trong Users tab */
/* Specificity đủ để thắng .admin-table tbody td { text-align: left } */
.admin-table tbody td.admin-cell-actions {
    text-align: right;
}
/* Cột "Người tạo" trong card Bộ lọc chạy nhiều nhất — nằm trong 2-col
   layout chật → cho phép email wrap 2 dòng, break tại @ để đọc được */
.admin-table td.admin-preset-owner {
    text-align: right;
    white-space: normal;
    word-break: break-all;
    font-size: 11px;
    line-height: 1.4;
}
.admin-cell-actions .admin-btn {
    display: inline-flex;
}
.admin-error { color: #dc2626; }
.admin-empty { font-style: normal; }
.admin-info { text-align: right; padding: 12px 0; font-size: 12px; }

/* Chart bars — cùng style .activity-chart profile page nhưng 2 bar mỗi ngày */
.admin-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    gap: 8px;
    height: 180px;
    padding: 16px 8px 0;
    background-image: repeating-linear-gradient(
        to top, transparent 0, transparent calc(25% - 1px),
        var(--border-subtle, #f1f5f9) calc(25% - 1px), var(--border-subtle, #f1f5f9) 25%
    );
    background-size: 100% calc(100% - 30px);
    background-position: 0 100%;
    background-repeat: no-repeat;
    margin-bottom: 8px;
}
.admin-chart-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    max-width: 80px;
}
.admin-chart-bars {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    width: 100%;
    height: 100%;
}
.admin-chart-bar {
    flex: 1;
    max-width: 24px;
    min-height: 2px;
    border-radius: 3px 3px 0 0;
    transition: opacity 120ms;
}
.admin-chart-bar:hover { opacity: 0.8; }
.admin-chart-bar-earn { background: linear-gradient(180deg, #22c55e, #16a34a); }
.admin-chart-bar-spend { background: linear-gradient(180deg, #f87171, #dc2626); }
.admin-chart-bar-dau { background: linear-gradient(180deg, #6366f1, #4f46e5); }
.admin-chart-bar-signup { background: linear-gradient(180deg, #22c55e, #16a34a); }
.admin-chart-bar-scan { background: linear-gradient(180deg, #f59e0b, #d97706); }
.admin-chart-bars-3 { gap: 2px; }
.admin-chart-bars-3 .admin-chart-bar { max-width: 16px; }
.admin-chart-labels-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2px;
    font-size: 9px !important;
}
.admin-chart-dau-lbl { color: #4f46e5; }
.admin-chart-signup-lbl { color: #16a34a; }
.admin-chart-scan-lbl { color: #d97706; }
.admin-chart-lgd-dau::before { background: #6366f1; }
.admin-chart-lgd-signup::before { background: #16a34a; }
.admin-chart-lgd-scan::before { background: #f59e0b; }
.admin-chart-labels {
    display: flex;
    justify-content: space-around;
    gap: 4px;
    width: 100%;
    margin-top: 4px;
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.admin-chart-earn-lbl { color: #16a34a; }
.admin-chart-spend-lbl { color: #dc2626; }
.admin-chart-date {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.admin-chart-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 8px 0 16px;
    font-size: 12px;
    color: var(--text-muted, #64748b);
}
.admin-chart-lgd {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.admin-chart-lgd::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}
.admin-chart-lgd-earn::before { background: #16a34a; }
.admin-chart-lgd-spend::before { background: #dc2626; }

@media (max-width: 768px) {
    .admin-chart-day { max-width: 60px; }
    .admin-chart-bar { max-width: 16px; }
}

.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.admin-table thead th {
    text-align: left;
    padding: 8px 10px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}
.admin-table tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
    color: var(--text, #0f172a);
    text-align: left;   /* Override Bootstrap 4 default 'td { text-align: center }' */
}
.admin-table tbody tr:hover { background: var(--surface-hover, #f8fafc); }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table .admin-num { text-align: right; }
.admin-table .pct-up { color: #16a34a; font-weight: 600; }
.admin-table .pct-down { color: #dc2626; font-weight: 600; }
.admin-table-wrap { overflow-x: auto; }
.admin-mono { font-family: 'SF Mono', 'Consolas', monospace; font-size: 12px; }

.admin-search-row {
    display: flex;
    gap: 8px;
    margin: 4px 0 16px;
    align-items: center;
    flex-wrap: wrap;
    /* Padding trái 14px = padding của .wl-tab (tab bar) → input BOX left
       thẳng hàng với chữ tab bar phía trên + chữ cell table phía dưới
       (cell padding-left cũng chỉnh 14px). */
    padding: 0 14px;
}
.admin-search-row .pf-input {
    flex: 1;
    min-width: 200px;
}
/* Info note trên đầu tab Config — box left/right khớp với card CỘNG ĐIỂM
   bên dưới; padding trong khớp padding-left của card (20px) để chữ "Sửa rate…"
   và chữ "CỘNG ĐIỂM" đều bắt đầu cùng vị trí x */
.admin-info-note {
    padding: 12px 20px;
    margin: 0 0 16px;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;   /* Khớp border-radius: 12px của .admin-panel-card */
    font-size: 12px;
    color: var(--text-muted, #64748b);
    line-height: 1.5;
}
.admin-info-note code {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
}
/* Meta line trên bảng — align với chữ tab bar (14px) + cell text (14px) */
.admin-table-meta {
    padding: 8px 14px;
    margin: 0;
}
.admin-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--surface, #fff);
    color: var(--text, #0f172a);
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    white-space: nowrap;
    text-decoration: none;   /* Bỏ gạch chân khi dùng <a> làm button */
}
.admin-btn:hover, .admin-btn:focus {
    text-decoration: none;
}
.admin-btn:hover { background: var(--surface-hover, #f1f5f9); border-color: #6366f1; color: #6366f1; }
.admin-btn-small { padding: 4px 10px; font-size: 12px; }
.admin-btn-danger { color: #dc2626; border-color: #fecaca; padding: 4px 8px; }
.admin-btn-danger:hover { background: rgba(220, 38, 38, 0.08); border-color: #dc2626; color: #dc2626; }
.admin-row-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
}
.admin-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.admin-panel-header h4 { margin: 0; }

/* Dense table cho admin — padding compact hơn, số liệu align chuẩn */
/* Unified admin table system — cho toàn bộ tables trong /admin:
   - Header: allow wrap (không truncate, breathing room)
   - Cell data: ellipsis nếu quá dài
   - table-layout fixed → column widths inline style chính xác 100% */
.admin-table-dense,
.admin-table-tight,
.admin-config-table {
    table-layout: fixed;
    width: 100%;
}
.admin-table-dense thead th,
.admin-table-tight thead th,
.admin-config-table thead th {
    padding: 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.3;
    white-space: nowrap;    /* Header 1 dòng — column widths inline đã tính đủ chỗ */
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    height: 44px;   /* Ép header row đều chiều cao ở mọi bảng admin */
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
    background: var(--surface, #fff);
}
.admin-table-dense tbody td,
.admin-table-tight tbody td {
    padding: 8px 10px;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
/* Data rows đều chiều cao — dùng tr height thay vì td để cell 2-dòng
   (feat-name + feat-key trong log) vẫn fit mà không bị crop */
.admin-table-dense tbody tr,
.admin-table-tight tbody tr {
    height: 48px;
}
/* Sticky header — khi user cuộn dọc trong watchlist-scroll (max-height 500-600),
   header dính top để luôn nhìn thấy label cột (giống Excel freeze row 1) */
.watchlist-scroll .admin-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}
/* Table wrapper inset 4px trái/phải → cộng với cell padding 10 = 14px
   → cell text thẳng hàng với chữ tab bar (padding 14), input search-row
   (padding 14), meta line (padding 14) — tất cả cùng 1 vị trí x=14 */
.admin-tab-content > .watchlist-scroll,
.admin-tab-content > div > .watchlist-scroll {
    padding: 0 4px;
}
.admin-table-dense .admin-mono,
.admin-table-tight .admin-mono {
    font-size: 11px;
}
.admin-table-dense .admin-mono { font-size: 11px; }
.admin-table-dense .pf-input {
    padding: 4px 8px;
    font-size: 11px;
    height: 28px;
}
.admin-config-label { font-size: 11px !important; }

/* Config table — inputs stretch full width cell, không ellipsis (khác dense).
   table-layout auto để column widths inline (px) áp dụng chính xác. */
.admin-config-table {
    width: 100%;
    table-layout: fixed;
}
.admin-config-table thead th {
    padding: 8px 10px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}
.admin-config-table tbody td {
    padding: 6px 10px;
    vertical-align: middle;
}
.admin-config-table td .pf-input {
    width: 100%;
    padding: 6px 10px;
    font-size: 12px;
    height: 32px;
}
.admin-config-table td.admin-mono {
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-config-table .admin-row-actions {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
}

/* Icon-only buttons cho config table — thay text "Lưu" / "×" */
.admin-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--surface, #fff);
    color: var(--text-muted, #64748b);
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.admin-icon-btn:hover {
    background: var(--surface-hover, #f1f5f9);
    border-color: #6366f1;
    color: #6366f1;
}
.admin-icon-save.admin-icon-ok,
.admin-icon-save.admin-icon-ok:hover {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}
.admin-icon-del { color: #dc2626; border-color: #fecaca; }
.admin-icon-del:hover {
    background: rgba(220, 38, 38, 0.08);
    border-color: #dc2626;
    color: #dc2626;
}

/* ── Config table value cells: 2 dạng khác nhau ─────────────────────
   - Số: input nhỏ ~100px canh phải
   - JSON: chip preview + nút bút chì, click mở modal textarea */
.admin-cfg-num-cell {
    text-align: right;
}
.admin-cfg-num-input {
    width: 100px !important;   /* Chỉ đủ chứa 3-4 chữ số + spacing */
    max-width: 100%;
    text-align: right;
    padding: 6px 10px !important;
    font-size: 12px !important;
    height: 30px !important;
    font-variant-numeric: tabular-nums;
    display: inline-block !important;
}
.admin-cfg-json-cell {
    padding: 4px 10px !important;
}
.admin-cfg-json-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    background: rgba(99, 102, 241, 0.04);
    border: 1px dashed rgba(99, 102, 241, 0.35);
    border-radius: 6px;
    color: var(--text, #0f172a);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, border-color 0.12s;
    overflow: hidden;
}
.admin-cfg-json-btn:hover {
    background: rgba(99, 102, 241, 0.09);
    border-color: #6366f1;
    border-style: solid;
}
.admin-cfg-json-btn svg {
    flex-shrink: 0;
    color: #6366f1;
    opacity: 0.7;
}
.admin-cfg-json-btn:hover svg { opacity: 1; }
.admin-cfg-json-preview {
    flex: 1;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 11px;
    color: var(--text-muted, #64748b);
    background: transparent;
    padding: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── JSON edit modal ─────────────────────────────────────────────── */
.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-modal[hidden] { display: none; }
.admin-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}
.admin-modal-body {
    position: relative;
    background: var(--surface, #fff);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.35);
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.admin-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}
.admin-modal-header h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text, #0f172a);
}
.admin-modal-close {
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    padding: 0 4px;
}
.admin-modal-close:hover { color: #dc2626; }
.admin-modal-content {
    padding: 16px 20px 20px;
    overflow-y: auto;
}
.admin-modal-key {
    font-size: 12px;
    color: var(--text-muted, #64748b);
    margin-bottom: 10px;
}
.admin-modal-key code {
    background: var(--surface-hover, #f1f5f9);
    color: var(--text, #0f172a);
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}
.admin-json-textarea {
    width: 100%;
    min-height: 180px;
    padding: 10px 12px;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 13px;
    color: var(--text, #0f172a);
    background: var(--bg, #fafbfc);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    outline: none;
    resize: vertical;
    line-height: 1.5;
}
.admin-json-textarea:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.admin-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

/* ── Note preview trong Log table ─────────────────────────────────
   Ghi chú có thể dài → cell chỉ show icon + short preview + "…",
   click mở modal xem full text. Empty note → dấu "—" mờ */
/* Specificity đủ để thắng rule .admin-table tbody td { text-align: left } */
.admin-table tbody td.admin-note-cell { text-align: right; }
.admin-note-empty {
    color: var(--text-faint, #cbd5e1);
    font-size: 12px;
}
.admin-note-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 6px;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    font-size: 11px;
    max-width: 100%;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.admin-note-btn:hover {
    background: rgba(99, 102, 241, 0.12);
    border-color: #6366f1;
    color: #6366f1;
}
.admin-note-btn svg {
    flex-shrink: 0;
    opacity: 0.8;
}
.admin-note-preview {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Note view modal (read-only) — nhỏ gọn, chỉ vừa text ngắn */
.admin-modal-body.admin-modal-note {
    max-width: 380px;
    width: auto;
    min-width: 260px;
}
.admin-modal-body.admin-modal-note .admin-modal-header {
    padding: 12px 16px;
}
.admin-modal-body.admin-modal-note .admin-modal-header h2 { font-size: 13px; }
.admin-modal-body.admin-modal-note .admin-modal-content { padding: 12px 16px 16px; }
.admin-note-text {
    background: var(--bg, #fafbfc);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    padding: 8px 12px;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text, #0f172a);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 50vh;
    overflow-y: auto;
    margin: 0;
}

/* Plain-text label (click-to-edit) trong config table */
.admin-config-label-text {
    display: inline-block;
    padding: 4px 6px;
    font-size: 12px;
    color: var(--text, #0f172a);
    line-height: 1.3;
    cursor: text;
    border-radius: 4px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-config-label-text:hover {
    background: var(--surface-hover, #f1f5f9);
}

/* Usage bar visualization — hiển thị mức độ dùng của mỗi tính năng */
.admin-usage-bar {
    position: relative;
    width: 100%;
    height: 10px;
    background: var(--surface-hover, #f1f5f9);
    border-radius: 5px;
    overflow: hidden;
}
.admin-usage-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 5px;
    transition: width 0.25s ease;
}

/* ── Panel header với subtitle bên phải ─────────────────────────── */
.admin-panel-sub {
    font-size: 12px;
    color: var(--text-muted, #64748b);
    font-weight: normal;
}

/* ── Horizontal bar chart cho Tính năng + Top mã ────────────────── */
.admin-hbar-chart { padding: 4px 0; }
.admin-hbar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}
.admin-hbar-row:last-child { border-bottom: 0; }
.admin-hbar-label {
    flex: 0 0 220px;
    font-size: 12px;
    color: var(--text, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-hbar-track {
    flex: 1;
    position: relative;
    height: 22px;
    background: var(--surface-hover, #f1f5f9);
    border-radius: 4px;
    overflow: hidden;
}
.admin-hbar-fill {
    height: 100%;
    /* Xanh lá theo convention VN (tăng/tích cực) — khớp tab Diễn biến thị trường */
    background: linear-gradient(90deg, #16a34a, #22c55e);
    border-radius: 4px;
    transition: width 0.3s ease;
}
.admin-hbar-value {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--text, #0f172a);
    font-variant-numeric: tabular-nums;
}
.admin-hbar-users {
    flex: 0 0 140px;
    text-align: right;
    font-size: 11px;
    color: var(--text-muted, #64748b);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Top symbols variant — label mono, fill emerald */
.admin-hbar-sym-label {
    flex: 0 0 90px;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-weight: 600;
    font-size: 13px;
    color: #6366f1;
    text-transform: uppercase;
}
.admin-hbar-sym-fill {
    /* Xanh dương đậm — tone professional của app tài chính (Vietstock/SSI/VND) */
    background: linear-gradient(90deg, #1d4ed8, #3b82f6);
}
/* Mã cổ phiếu — màu đen chuẩn theo convention bảng giá VN */
.admin-hbar-sym-label { color: var(--text, #0f172a); }

/* ── Retention cards (D1/D7/D30) ────────────────────────────────── */
.admin-retention-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 4px;
}
.admin-retention-card {
    background: var(--surface-hover, #f8fafc);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.admin-retention-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
}
/* Palette VN broker: xanh lá = tốt, vàng = tham chiếu, đỏ = cần chú ý */
.admin-retention-card.ret-good::before { background: #16a34a; }
.admin-retention-card.ret-mid::before  { background: #ca8a04; }
.admin-retention-card.ret-low::before  { background: #dc2626; }
.admin-retention-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.admin-retention-pct {
    font-size: 32px;
    font-weight: 700;
    color: var(--text, #0f172a);
    margin: 4px 0;
    font-variant-numeric: tabular-nums;
}
.admin-retention-card.ret-good .admin-retention-pct { color: #16a34a; }
.admin-retention-card.ret-mid  .admin-retention-pct { color: #ca8a04; }
.admin-retention-card.ret-low  .admin-retention-pct { color: #dc2626; }
.admin-retention-sub {
    font-size: 11px;
    color: var(--text-muted, #64748b);
}

/* ── Adoption funnel — Modern SaaS ngang (Linear/Stripe inspired):
   6 card xếp ngang, chia đều bằng flex:1, chevron compact ~44px giữa.
   Không cuộn ngang — tất cả fit trong 1 hàng. */
.admin-funnel {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 12px 0;
    flex-wrap: nowrap;
}
.admin-funnel-card {
    flex: 1 1 0;
    min-width: 0;
    background: var(--surface, #fff);
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 12px;
    padding: 12px 10px 12px;
    transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
}
.admin-funnel-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.1);
}
.admin-funnel-card:hover {
    transform: translateY(-2px);
    border-color: rgba(99, 102, 241, 0.35);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.1);
}
/* Top row: badge + số bậc bên phải cạnh nhau */
.admin-funnel-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 6px;
}
.admin-funnel-card-badge {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.15));
    color: #6366f1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.admin-funnel-card-badge svg { width: 18px; height: 18px; }
/* Bậc màu badge đậm dần indigo → violet */
.admin-funnel-card[data-step="1"] .admin-funnel-card-badge { background: linear-gradient(135deg, rgba(14, 165, 233, 0.10), rgba(14, 165, 233, 0.16)); color: #0ea5e9; }
.admin-funnel-card[data-step="2"] .admin-funnel-card-badge { background: linear-gradient(135deg, rgba(99, 102, 241, 0.10), rgba(99, 102, 241, 0.16)); color: #6366f1; }
.admin-funnel-card[data-step="3"] .admin-funnel-card-badge { background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(124, 58, 237, 0.16)); color: #7c3aed; }
.admin-funnel-card[data-step="4"] .admin-funnel-card-badge { background: linear-gradient(135deg, rgba(139, 92, 246, 0.10), rgba(139, 92, 246, 0.16)); color: #8b5cf6; }
.admin-funnel-card[data-step="5"] .admin-funnel-card-badge { background: linear-gradient(135deg, rgba(168, 85, 247, 0.10), rgba(168, 85, 247, 0.16)); color: #a855f7; }
.admin-funnel-card[data-step="6"] .admin-funnel-card-badge { background: linear-gradient(135deg, rgba(192, 132, 252, 0.10), rgba(192, 132, 252, 0.20)); color: #a855f7; }
.admin-funnel-card-idx {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    background: var(--surface-hover, #f1f5f9);
    color: var(--text-muted, #64748b);
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.admin-funnel-card-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--text, #0f172a);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    margin-top: 2px;
}
.admin-funnel-card-num-sfx {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    margin-left: 3px;
    letter-spacing: 0;
}
.admin-funnel-card-pct {
    font-size: 12px;
    font-weight: 700;
    color: #6366f1;
    font-variant-numeric: tabular-nums;
    padding: 2px 8px;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 999px;
}
.admin-funnel-card-step {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    line-height: 1.35;
    font-weight: 500;
    padding-top: 6px;
    border-top: 1px solid var(--border-subtle, #f1f5f9);
    width: 100%;
    min-height: 32px;   /* 2 dòng để cards đều chiều cao */
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Chevron ngang giữa 2 card — width tự cân theo flex, có % conversion */
.admin-funnel-conv {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    min-width: 48px;
    max-width: 60px;
}
.admin-funnel-conv-line {
    width: 100%;
    height: 1.5px;
    background: #64748b;
    border-radius: 1px;
    position: relative;
    margin-bottom: 6px;
}
.admin-funnel-conv-line::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 7px solid #64748b;
}
.admin-funnel-conv-pct {
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.admin-funnel-conv-keep { color: #16a34a; }
.admin-funnel-conv-drop { color: #dc2626; }
.admin-funnel-conv-drop-lbl {
    font-size: 10px;
    color: #dc2626;
    font-weight: 500;
    white-space: nowrap;
    margin-top: 2px;
}

/* ── Donut chart cho phân bố gói người dùng ────────────────────── */
.admin-donut-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 4px;
}
.admin-donut {
    flex: 0 0 140px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    position: relative;
}
.admin-donut-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    background: var(--surface, #fff);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.admin-donut-total {
    font-size: 22px;
    font-weight: 700;
    color: var(--text, #0f172a);
    line-height: 1;
}
.admin-donut-total-lbl {
    font-size: 10px;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 4px;
}
.admin-donut-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.admin-donut-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}
.admin-donut-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}
.admin-donut-legend-label {
    flex: 0 0 70px;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 11px;
    font-weight: 600;
    color: var(--text, #0f172a);
    letter-spacing: 0.3px;
}
.admin-donut-legend-num {
    color: var(--text-muted, #64748b);
    font-variant-numeric: tabular-nums;
}
.admin-donut-legend-num strong { color: var(--text, #0f172a); }

/* ── Trang chi tiết người dùng /admin/user/<uid> ─────────────────────
   Style match /profile: dùng .profile-hero + .stats-grid + .dashboard-card */
.admin-user-hero {
    margin-bottom: 20px;
}
.admin-user-stats {
    margin-bottom: 20px;
}
/* Form row layout: label trái cố định (110px) + input phải fill */
.admin-detail-form {
    padding: 8px 4px 4px;
}
.admin-form-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.admin-form-label {
    flex: 0 0 140px;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;   /* "Số điểm thay đổi" luôn 1 dòng */
}
.admin-form-row .pf-input {
    flex: 1;
    min-width: 0;
}
.admin-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    color: var(--text, #0f172a);
    cursor: pointer;
    flex: 1;
}
.admin-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}
.admin-toggle code {
    background: var(--surface-hover, #f1f5f9);
    color: var(--text-muted, #64748b);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 12px;
}
.admin-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}
/* Button trong 2 card action đều min-width → 2 nút "Áp dụng" và "Lưu"
   cùng chiều rộng, cân đối dù text khác nhau */
.admin-form-actions .pf-add-btn {
    min-width: 140px;
}
.admin-form-msg {
    margin-top: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
}
.admin-form-msg-ok {
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
    border: 1px solid rgba(22, 163, 74, 0.2);
}
.admin-form-msg-err {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.2);
}
/* pf-chip cho hero meta — match .profile-hero-meta */
.pf-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--surface-hover, #f1f5f9);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    margin-right: 6px;
}

/* Feature name 2-line: label chính + technical key mờ dưới */
.admin-feat-name {
    font-size: 12px;
    color: var(--text, #0f172a);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.admin-feat-key {
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 10px;
    color: var(--text-faint, #94a3b8);
    line-height: 1.3;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Dead features — tags danh sách tính năng chưa được dùng */
.admin-dead-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 0;
}
.admin-dead-tag {
    display: inline-block;
    padding: 4px 10px;
    background: var(--surface-hover, #f8fafc);
    border: 1px dashed var(--border-strong, #cbd5e1);
    border-radius: 6px;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 11px;
    color: var(--text-muted, #64748b);
}
.admin-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
    letter-spacing: 0.3px;
    margin-right: 4px;
    font-weight: 500;
}

.admin-badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(220, 38, 38, 0.15);
    color: #dc2626;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}
/* Badge cho user thường (không admin) — màu trung tính, phân biệt với admin đỏ */
.admin-badge.admin-badge-user {
    background: var(--surface-hover, #f1f5f9);
    color: var(--text-muted, #64748b);
    letter-spacing: 0.3px;
}
.admin-tier-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    color: white;
    text-transform: uppercase;
}
.admin-tier-badge.tier-free { background: #64748b; }
.admin-tier-badge.tier-basic { background: #2563eb; }
.admin-tier-badge.tier-pro { background: #dc2626; }
.admin-tier-badge.tier-premium { background: linear-gradient(135deg, #eab308, #dc2626); }

/* Modal */
.admin-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
}
.admin-modal-body {
    position: relative;
    background: var(--surface, #fff);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 20px 24px;
}
.admin-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}
.admin-modal-header h2 { font-size: 18px; margin: 0; color: var(--text-heading, #0f172a); }
.admin-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-muted, #64748b);
    padding: 4px 8px;
}
.admin-modal-close:hover { color: #dc2626; }

.admin-user-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
    padding: 12px 0;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text, #0f172a);
}
.admin-adjust-form, .admin-tier-form {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.admin-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--surface-hover, #f8fafc);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
}

.admin-config-input {
    min-width: 200px;
    max-width: 400px;
    font-family: 'SF Mono', 'Consolas', monospace;
    font-size: 12px;
}

/* Dark theme adjust */
:root[data-theme="dark"] .admin-nav-item.active { background: rgba(99, 102, 241, 0.20); }
:root[data-theme="dark"] .admin-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); }
:root[data-theme="dark"] .admin-modal-backdrop { background: rgba(0, 0, 0, 0.7); }
:root[data-theme="dark"] .admin-checkbox { background: rgba(255, 255, 255, 0.05); }

/* ══════════════════════════════════════════════════════════════════════
   SHARE LINKS — URL rút gọn cho preset đã lưu
   ══════════════════════════════════════════════════════════════════════ */

/* Nút chia sẻ (📤) trong preset item */
.preset-share {
    background: transparent;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    margin-right: 4px;
    transition: all 0.15s;
}
.preset-share:hover {
    background: rgba(16, 185, 129, 0.08);
    border-color: #10b981;
    color: #10b981;
}

.share-items {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}
.share-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 10px;
    transition: all 0.15s;
}
.share-item:hover {
    border-color: #10b981;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
}
.share-item-main { flex: 1; min-width: 0; }
.share-item-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text, #0f172a);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}
.share-item-url { display: flex; align-items: center; gap: 6px; }
.share-url-code {
    font-family: SFMono-Regular, Consolas, monospace;
    font-size: 11px;
    background: var(--surface-hover, #f1f5f9);
    color: var(--text-muted, #64748b);
    padding: 2px 8px;
    border-radius: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.share-copy-btn {
    background: transparent;
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-muted, #64748b);
    flex-shrink: 0;
    transition: all 0.12s;
}
.share-copy-btn:hover {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
    color: #10b981;
}
.share-item-desc {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    margin-top: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.share-item-stats {
    flex-shrink: 0;
    text-align: center;
    min-width: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.share-item-stats .share-stat-num {
    font-size: 18px;
    font-weight: 700;
    color: var(--text, #0f172a);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.share-item-stats .share-stat-sub {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    margin-top: 2px;
    line-height: 1;
}
.share-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.share-action-btn {
    background: transparent;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.12s;
    color: var(--text-muted, #64748b);
}
.share-action-btn:hover {
    background: var(--surface-hover, #f1f5f9);
    border-color: #6366f1;
    color: #6366f1;
}
.share-action-del:hover {
    background: rgba(220, 38, 38, 0.08);
    border-color: #dc2626;
    color: #dc2626;
}

/* Badges trong share item name */
.share-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 500;
    border-radius: 4px;
    background: var(--surface-hover, #f1f5f9);
    color: var(--text-muted, #64748b);
}
.share-badge-pw       { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
.share-badge-ttl      { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.share-badge-expired  { background: rgba(220, 38, 38, 0.12); color: #dc2626; }
.share-badge-limit    { background: rgba(14, 165, 233, 0.12); color: #0284c7; }
.share-badge-disabled { background: rgba(148, 163, 184, 0.18); color: #64748b; }

/* Modal share — reuse admin-modal, override max-width per modal */
.share-modal-body   { max-width: 520px; }
.share-detail-modal { max-width: 640px; }
.share-qr-modal     { max-width: 360px; }

/* Form tạo link - polished */
.share-form-preset {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(16, 185, 129, 0.06));
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 10px;
    margin-bottom: 20px;
}
.share-form-preset-ico {
    font-size: 24px;
    flex-shrink: 0;
}
.share-form-preset-lbl {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 2px;
}
.share-form-preset-name {
    font-size: 14px;
    color: var(--text, #0f172a);
    font-weight: 600;
}
.share-form-group { display: flex; flex-direction: column; gap: 14px; }
.share-form-row { display: flex; flex-direction: column; gap: 6px; }
.share-form-row label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text, #0f172a);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}
.share-form-ico {
    font-size: 13px;
    display: inline-flex;
    align-items: center;
}
.share-form-opt { font-weight: normal; color: var(--text-faint, #94a3b8); font-size: 11px; }
.share-form-hint { font-size: 11px; color: var(--text-faint, #94a3b8); margin-top: 0; }
.share-form-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.share-form-row-2col > div { display: flex; flex-direction: column; gap: 6px; }
.share-form-row-2col label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text, #0f172a);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Slug prefix pill before input */
.share-form-slug-wrap {
    display: flex;
    align-items: stretch;
}
.share-form-slug-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    background: var(--surface-hover, #f1f5f9);
    border: 1px solid var(--border, #e2e8f0);
    border-right: none;
    border-radius: 6px 0 0 6px;
    font-family: SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    color: var(--text-muted, #64748b);
    font-weight: 600;
}
.share-form-slug-wrap input {
    border-radius: 0 6px 6px 0;
    flex: 1;
}

/* Advanced section toggle */
.share-form-adv-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 14px;
    margin: 16px 0 0;
    background: transparent;
    border: 1px dashed var(--border, #e2e8f0);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    transition: all 0.15s;
}
.share-form-adv-toggle:hover {
    background: var(--surface-hover, #f1f5f9);
    border-color: #6366f1;
    color: #6366f1;
    border-style: solid;
}
.share-form-adv-icon { transition: transform 0.2s; }
.share-form-adv-toggle.is-open .share-form-adv-icon { transform: rotate(180deg); }
.share-form-adv {
    margin-top: 14px;
    padding: 16px;
    background: var(--bg, #fafbfc);
    border-radius: 8px;
    border: 1px solid var(--border-subtle, #f1f5f9);
}

/* Actions row */
.share-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle, #e2e8f0);
}
.share-btn-cancel {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: all 0.15s;
}
.share-btn-cancel:hover { background: var(--surface-hover, #f1f5f9); color: var(--text, #0f172a); }
/* Variant đỏ cho nút xoá — border + text đỏ, hover đậm */
.share-btn-danger { color: #dc2626; border-color: #fecaca; }
.share-btn-danger:hover {
    background: rgba(220, 38, 38, 0.08);
    border-color: #dc2626;
    color: #dc2626;
}
.share-btn-submit {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.25);
}
.share-btn-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
}
.share-btn-submit:active { transform: translateY(0); }

/* Share detail modal — analytics */
.share-detail-url {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 18px;
}
.share-detail-url code {
    flex: 1;
    background: var(--surface-hover, #f1f5f9);
    padding: 8px 12px;
    border-radius: 6px;
    font-family: SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.share-detail-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}
.share-stat-tile {
    background: var(--surface-hover, #f8fafc);
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}
.share-stat-num {
    font-size: 22px;
    font-weight: 700;
    color: #10b981;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.share-stat-lbl { font-size: 11px; color: var(--text-muted, #64748b); margin-top: 4px; }
.share-detail-modal h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-muted, #64748b);
    margin: 18px 0 10px;
}
.share-chart {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 100px;
    padding: 10px 4px 0;
}
.share-chart-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
}
.share-chart-bar {
    width: 100%;
    background: linear-gradient(180deg, #10b981, #059669);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    margin-top: auto;
}
.share-chart-date { font-size: 10px; color: var(--text-muted, #64748b); font-variant-numeric: tabular-nums; }
.share-ref-list { display: flex; flex-direction: column; gap: 6px; }
.share-ref-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--surface-hover, #f8fafc);
    border-radius: 6px;
    font-size: 12px;
}
.share-ref-src { text-transform: capitalize; color: var(--text, #0f172a); font-weight: 500; }
.share-ref-count { color: var(--text-muted, #64748b); font-variant-numeric: tabular-nums; }

/* QR modal */
.share-qr-content { text-align: center; padding: 20px; }
.share-qr-img {
    width: 240px;
    height: 240px;
    display: block;
    margin: 0 auto 12px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle, #e2e8f0);
}
.share-qr-hint {
    font-size: 11px;
    color: var(--text-muted, #64748b);
    font-family: SFMono-Regular, Consolas, monospace;
    margin: 0 0 14px;
    word-break: break-all;
    text-align: center;
    background: var(--surface-hover, #f1f5f9);
    padding: 6px 10px;
    border-radius: 4px;
}
.share-qr-modal-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}

/* ── Public pages: /s/<slug> error / password polish ────────────── */
/* Brand header sát mép trái CARD (cùng max-width + margin auto với card
   bên dưới) — thẳng trục trái với khung lỗi. */
.share-err-brand-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    margin: 0 auto 24px;
    max-width: 520px;
    padding: 0;
}
.share-err-brand-header .page-icon {
    width: 56px;
    height: 56px;
}
.share-err-brand-header .page-title {
    font-size: 22px;
}

.share-err-card {
    max-width: 520px;
    margin: 20px auto;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 16px;
    padding: 36px 28px 28px;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.06);
    text-align: center;
}
.share-err-ico-wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.share-err-ico-warn    { background: rgba(245, 158, 11, 0.12); color: #d97706; }
.share-err-ico-danger  { background: rgba(220, 38, 38, 0.12);  color: #dc2626; }
.share-err-ico-neutral { background: rgba(100, 116, 139, 0.12); color: #475569; }
.share-err-card h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text, #0f172a);
    margin: 0 0 10px;
}
.share-err-msg {
    font-size: 14px;
    color: var(--text-muted, #64748b);
    margin: 0 0 24px;
    line-height: 1.55;
}
.share-err-msg strong {
    color: var(--text, #0f172a);
    font-weight: 600;
}
.share-err-msg code {
    background: var(--surface-hover, #f1f5f9);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    color: var(--text, #0f172a);
}
.share-err-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}
.share-err-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
    transition: all 0.15s;
}
.share-err-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
    color: #fff;
    text-decoration: none;
}
.share-err-btn-ghost {
    font-size: 13px;
    color: var(--text-muted, #64748b);
    text-decoration: none;
    padding: 6px 12px;
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;
}
/* Google login button — nền trắng, Google G màu chuẩn */
.share-err-btn-google {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 24px;
    background: #fff;
    color: #0f172a;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    transition: all 0.15s;
}
.share-err-btn-google:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    border-color: #94a3b8;
    color: #0f172a;
    text-decoration: none;
}
.share-err-btn-ghost:hover { color: var(--text, #0f172a); text-decoration: underline; }
.share-err-btn-ghost:focus { outline: none; }

/* Giữ landing + password form dùng card nền trung tính (nhưng không chung class error) */
.share-landing-card {
    max-width: 560px;
    margin: 40px auto;
    padding: 32px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}
/* Pw status chip trong form settings — hiển thị link có mật khẩu hay công khai */
.share-pw-status { margin-left: 6px; }
.share-pw-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.share-pw-badge-on  { background: rgba(99, 102, 241, 0.14); color: #4f46e5; }
.share-pw-badge-off { background: rgba(100, 116, 139, 0.14); color: #475569; }

/* Share password form inside error-style card */
.share-pw-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 320px;
    margin: 0 auto;
}
.share-pw-input {
    padding: 12px 16px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    font-size: 14px;
    text-align: center;
    letter-spacing: 2px;
    background: var(--surface, #fff);
    color: var(--text, #0f172a);
    transition: all 0.15s;
}
.share-pw-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.share-pw-error {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #dc2626;
    font-size: 13px;
    padding: 10px 12px;
    background: rgba(220, 38, 38, 0.08);
    border: 1px solid rgba(220, 38, 38, 0.2);
    border-radius: 6px;
}
.share-landing-card { max-width: 640px; text-align: left; }
.share-landing-header {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-subtle, #e2e8f0);
    margin-bottom: 20px;
}
.share-landing-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 12px;
}
.share-landing-card h1 { font-size: 26px; color: var(--text, #0f172a); margin: 0 0 8px; }
.share-landing-desc { color: var(--text-muted, #64748b); margin: 0; }
.share-landing-config h3 {
    font-size: 13px;
    text-transform: uppercase;
    color: var(--text-muted, #64748b);
    margin-bottom: 8px;
}
.share-config-json {
    background: var(--bg, #fafbfc);
    border: 1px solid var(--border-subtle, #e2e8f0);
    border-radius: 6px;
    padding: 12px;
    font-family: SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    max-height: 240px;
    overflow-y: auto;
    color: var(--text, #0f172a);
    white-space: pre-wrap;
    word-break: break-word;
}
.share-landing-cta {
    text-align: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle, #e2e8f0);
}
.share-landing-cta p { color: var(--text-muted, #64748b); margin-bottom: 14px; }
.share-landing-cta .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-weight: 600;
}

/* Admin dashboard share link row */
.admin-share-link {
    color: var(--text, #0f172a);
    font-weight: 500;
    text-decoration: none;
}
.admin-share-link:hover { color: #10b981; }
.admin-share-slug {
    font-family: SFMono-Regular, Consolas, monospace;
    font-size: 11px;
    color: var(--text-muted, #64748b);
    margin-top: 2px;
}

/* Slim scrollbar cho modal content (admin-modal, share-modal) */
.admin-modal-content {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.admin-modal-content::-webkit-scrollbar { width: 6px; }
.admin-modal-content::-webkit-scrollbar-track { background: transparent; }
.admin-modal-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.admin-modal-content::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Share dashboard trang riêng /profile/share/{id} ─────────────── */
.share-dash-hero {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: start;
}
.share-dash-hero-content { min-width: 0; }
.share-dash-title h1 {
    font-size: 24px;
    color: var(--text, #0f172a);
    margin: 10px 0 6px;
}
.share-dash-desc {
    color: var(--text-muted, #64748b);
    margin: 0 0 16px;
}
.share-dash-url-group {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}
.share-dash-url {
    flex: 1;
    background: var(--surface-hover, #f1f5f9);
    padding: 10px 14px;
    border-radius: 8px;
    font-family: SFMono-Regular, Consolas, monospace;
    font-size: 13px;
    color: var(--text, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Nút action cạnh URL — nổi bật hơn copy btn mặc định */
.share-dash-url-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 8px;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.share-dash-url-btn:hover {
    background: rgba(99, 102, 241, 0.08);
    border-color: #6366f1;
    color: #6366f1;
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.15);
}
.share-dash-url-btn:active { transform: translateY(0); }
.share-dash-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.share-dash-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.share-dash-qr-img {
    width: 180px;
    height: 180px;
    border-radius: 10px;
    border: 1px solid var(--border, #e2e8f0);
    padding: 8px;
    background: #fff;
}
.share-dash-qr-actions {
    display: flex;
    gap: 6px;
    width: 100%;
}
.share-qr-action {
    flex: 1;
    padding: 6px 10px;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 6px;
    font-size: 12px;
    color: var(--text-muted, #64748b);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.share-qr-action:hover {
    background: rgba(16, 185, 129, 0.08);
    border-color: #10b981;
    color: #10b981;
}
.share-dash-stats { margin-bottom: 20px; }

/* Section bên trong dashboard-card gom nhiều widget liên quan.
   Pattern giống tab Diễn biến thị trường — mỗi section có head mini
   (title uppercase + sub) và content. Khi nằm trong subgrid 2-col,
   có divider dọc tách 2 bên. */
.share-dash-section + .share-dash-section { margin-top: 20px; }
.share-dash-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
}
.share-dash-section-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
}
.share-dash-section-sub {
    font-size: 11px;
    color: var(--text-faint, #94a3b8);
    font-variant-numeric: tabular-nums;
}

/* Subgrid 2 columns bên trong 1 card — chia widget liên quan */
.share-dash-subgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 20px;
}
.share-dash-subgrid > .share-dash-section { margin-top: 0; }
.share-dash-subgrid > .share-dash-section:first-child {
    padding-right: 24px;
    border-right: 1px solid var(--border-subtle, #f1f5f9);
}
@media (max-width: 768px) {
    .share-dash-subgrid { grid-template-columns: 1fr; gap: 16px; }
    .share-dash-subgrid > .share-dash-section:first-child {
        padding-right: 0;
        border-right: 0;
        padding-bottom: 20px;
        border-bottom: 1px solid var(--border-subtle, #f1f5f9);
    }
}

/* Chart timeline (full width trong dashboard) */
.share-dash-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 160px;
    padding: 12px 4px 0;
}
.share-dash-chart-day {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
}
.share-chart-bar-wrap {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: flex-end;
    min-height: 0;
}
.share-dash-chart-day .share-chart-bar {
    width: 100%;
    min-height: 1px;
}

/* Hourly 24-bar chart */
.share-dash-hourly {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 140px;
    padding: 10px 4px 0;
}
.share-hour-cell {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    height: 100%;
}
.share-hour-bar {
    width: 100%;
    background: linear-gradient(180deg, #6366f1, #4f46e5);
    border-radius: 2px 2px 0 0;
    min-height: 1px;
    transition: opacity 0.15s;
}
.share-hour-bar.is-peak {
    background: linear-gradient(180deg, #f59e0b, #d97706);
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
}
.share-hour-bar:hover { opacity: 0.85; }
.share-hour-lbl {
    font-size: 9px;
    color: var(--text-muted, #64748b);
    height: 12px;
    font-variant-numeric: tabular-nums;
}

/* Donut chart (user type guest vs member) */
.share-donut-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 4px;
}
.share-donut {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}
.share-donut-hole {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 78px;
    height: 78px;
    background: var(--surface, #fff);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.share-donut-total {
    font-size: 22px;
    font-weight: 700;
    color: var(--text, #0f172a);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.share-donut-lbl {
    font-size: 10px;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}
.share-donut-legend {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.share-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text, #0f172a);
}
.share-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Bar row chart cho referrer, device, browser, dow */
.share-bar-row {
    display: grid;
    grid-template-columns: 100px 1fr 100px;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    font-size: 12px;
}
.share-bar-label {
    color: var(--text, #0f172a);
    font-weight: 500;
    text-transform: capitalize;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.share-bar-label.is-weekend { color: #dc2626; }
.share-bar-ico {
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.share-brand-ico {
    width: 16px;
    height: 16px;
    display: inline-block;
    object-fit: contain;
    vertical-align: middle;
}
.share-brand-ico-fallback { font-size: 14px; }

/* Toast popup — thông báo thao tác thành công/lỗi (float top center) */
.share-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    z-index: 9999;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.18);
    animation: share-toast-in 0.3s ease;
    pointer-events: none;
}
.share-toast-success { background: #10b981; color: #fff; }
.share-toast-error   { background: #dc2626; color: #fff; }
.share-toast.is-fading {
    animation: share-toast-out 0.3s ease forwards;
}
@keyframes share-toast-in {
    from { opacity: 0; transform: translate(-50%, -20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes share-toast-out {
    from { opacity: 1; transform: translate(-50%, 0); }
    to   { opacity: 0; transform: translate(-50%, -20px); }
}
.share-bar-track {
    height: 10px;
    background: var(--surface-hover, #f1f5f9);
    border-radius: 3px;
    overflow: hidden;
}
.share-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981, #059669);
    border-radius: 3px;
    transition: width 0.3s;
}
.share-bar-fill-blue   { background: linear-gradient(90deg, #0ea5e9, #0284c7); }
.share-bar-fill-purple { background: linear-gradient(90deg, #8b5cf6, #7c3aed); }
.share-bar-value {
    color: var(--text-muted, #64748b);
    font-variant-numeric: tabular-nums;
    text-align: right;
    font-size: 11px;
}

/* Recent clicks */
.share-recent-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-subtle, #f1f5f9);
    font-size: 12px;
}
.share-recent-row:last-child { border-bottom: 0; }
.share-recent-time {
    color: var(--text, #0f172a);
    font-weight: 500;
}
.share-recent-src {
    color: var(--text-muted, #64748b);
    font-size: 11px;
}

/* Settings form */
.share-dash-settings .share-form-row,
.share-dash-settings .share-form-row-2col {
    margin-bottom: 14px;
}

/* Responsive — mobile */
@media (max-width: 768px) {
    .share-dash-hero {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .share-dash-qr {
        flex-direction: row;
        justify-content: center;
    }
    .share-dash-qr-img { width: 140px; height: 140px; }
}