/* ============================================================
   Tân Tiến Việt Vending (quanly.maybannuoctudong.vn) — "Uniform-first"
   Loads after skin-soft.css → skin-bold.css; same-or-higher specificity wins.

   The staff shirt: burgundy at the shoulders fading to red at the hem, a thin
   white collar, a small white chest badge. The machines: red cabinets with
   white panels and a red canopy sign in white capitals. The site: red-led,
   navy as the second colour (navy stat tiles next to red numbers).
     - sidebar + navbar brand column = the shirt (burgundy → red, top → bottom),
       a 2px white "collar" where the navbar meets the sidebar, a pale panel seam
       on the sidebar's right edge, and a white logo card like the chest badge;
     - active menu item = a white pill on the fabric (burgundy text, red icon);
     - content = white panels with a hairline red top edge (the machine);
     - page badge = the canopy marquee: solid red, white capitals, small radius;
     - KPI icon = solid navy tile with a white glyph, value in burgundy (the
       site's stat row); navy also for links, pagination and info chips;
     - login = flat red cabinet with faint panel seams, the card wears a red
       canopy band over its header.
   Contrast: red #C8102E 5.9:1 on white; burgundy #6E0F1E 11.4:1 on white;
   navy #0A2A6B 12.6:1 on white; muted #5F5B66 6.4:1 on white, 5.9:1 on #F6F5F7;
   white on burgundy/red ≥ 5.9:1.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

:root {
    --wl-primary: #C8102E;
    --wl-primary-rgb: 200 16 46;
    --wl-primary-hover: #A40D25;
    --wl-primary-soft: #FBE9EC;
    --wl-secondary: #0A2A6B;
    --wl-secondary-rgb: 10 42 107;
    --wl-accent: #0A2A6B;
    --wl-accent-rgb: 10 42 107;
    --wl-accent-soft: #E6ECF7;
    --wl-bg: #F6F5F7;
    --wl-border: #E6E3E8;
    --wl-ink: #1F1B24;
    --wl-muted: #5F5B66;
    --wl-font: 'Be Vietnam Pro', 'Nunito', -apple-system, 'Segoe UI', sans-serif;
    --wl-radius: 16px;
    --wl-radius-sm: 12px;

    /* uniform fabric */
    --ttv-burgundy: #6E0F1E;
    --ttv-burgundy-rgb: 110 15 30;
    --ttv-wine: #8C1124;
    --ttv-red: #B5101F;
    --ttv-collar: #FFFFFF;
    --ttv-fabric: linear-gradient(180deg, var(--ttv-burgundy) 0%, var(--ttv-wine) 48%, var(--ttv-red) 100%);
    --ttv-head-bg: #FAF6F7;
}

body.brand-maybannuoc ::selection { background: var(--wl-primary-soft); color: var(--wl-ink); }
body.brand-maybannuoc.skin-bold .text-muted,
body.brand-maybannuoc.skin-bold .form-text,
body.brand-maybannuoc.skin-bold .summary-label { color: var(--wl-muted) !important; }

/* ---------- Navbar: white bar, burgundy brand column, red hem line ---------- */
body.brand-maybannuoc.skin-bold .navbar {
    border-bottom: 3px solid transparent !important;
    border-image: linear-gradient(90deg, var(--ttv-burgundy) 0 250px, var(--wl-primary) 250px 60%, var(--ttv-red) 100%) 1 !important;
}
@media (min-width: 768px) {
    body.brand-maybannuoc.skin-bold .navbar::before {
        background: var(--ttv-burgundy) !important;
        bottom: 0 !important;
    }
}
/* Logo: the light wordmark sits straight on the burgundy column, no white card */
body.brand-maybannuoc.skin-bold .navbar-logo {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    height: 46px !important;
    box-shadow: none !important;
}
@media (max-width: 767.98px) {
    /* no brand column on phones: the bar is white, so swap in the coloured wordmark */
    body.brand-maybannuoc.skin-bold .navbar-logo {
        content: url("/static/brands/maybannuoc/logo-horizontal.png?v=261104h");
        height: 38px !important;
    }
    body.brand-maybannuoc.skin-bold .navbar {
        border-image: linear-gradient(90deg, var(--ttv-burgundy) 0%, var(--wl-primary) 60%, var(--ttv-red) 100%) 1 !important;
    }
}

/* ---------- Sidebar: the shirt ---------- */
body.brand-maybannuoc.skin-bold .sidebar {
    background: var(--ttv-fabric) !important;
    /* collar: a 2px white line at the neck with a soft stitch under it; a pale panel seam on the right edge */
    /* collar: 3px white band at the neck, level with the navbar's red hem (both start at 56px);
       the sidebar sits above the navbar's drop shadow so the collar wins on the brand column */
    box-shadow: inset 0 3px 0 var(--ttv-collar), inset -1px 0 0 rgba(255, 255, 255, 0.22) !important;
    z-index: 1031 !important;
    padding-top: 14px !important;
}
body.brand-maybannuoc.skin-bold .sidebar .nav-link,
body.brand-maybannuoc.skin-bold .sidebar .sidebar-section-toggle,
body.brand-maybannuoc.skin-bold .sidebar .nav-link i,
body.brand-maybannuoc.skin-bold .sidebar .sidebar-section-toggle i {
    color: rgba(255, 255, 255, 0.92) !important;
}
body.brand-maybannuoc.skin-bold .sidebar .sidebar-section-toggle { color: rgba(255, 255, 255, 0.8) !important; }
body.brand-maybannuoc.skin-bold .sidebar .sidebar-section + .sidebar-section { border-top-color: rgba(255, 255, 255, 0.14); }
body.brand-maybannuoc.skin-bold .sidebar .nav-link:hover:not(.active),
body.brand-maybannuoc.skin-bold .sidebar .sidebar-section-toggle:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}
/* Active item: a white pill on the fabric, burgundy text, red icon (the badge again) */
body.brand-maybannuoc.skin-bold .sidebar .nav-link.active {
    background: #fff !important;
    color: var(--ttv-burgundy) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
}
body.brand-maybannuoc.skin-bold .sidebar .nav-link.active i { color: var(--wl-primary) !important; }
body.brand-maybannuoc.skin-bold .sidebar .sidebar-submenu { border-left-color: rgba(255, 255, 255, 0.3); }
/* Footer: darker hem, white build chip with a green dot */
body.brand-maybannuoc.skin-bold .sidebar .sidebar-footer {
    background: rgba(0, 0, 0, 0.2) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
body.brand-maybannuoc.skin-bold .sidebar .sidebar-footer *,
body.brand-maybannuoc.skin-bold .sidebar .sidebar-footer :is(.text-muted, .font-tech, .d-flex > span.font-tech.text-muted) {
    color: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}
body.brand-maybannuoc.skin-bold .sidebar .sidebar-footer .status-code {
    background: #fff !important;
    color: var(--ttv-burgundy) !important;
    font-weight: 700 !important;
}
body.brand-maybannuoc.skin-bold .sidebar .sidebar-footer .status-code::before { background: #15803D !important; }

/* ---------- Cards: white panels with a hairline red top edge ---------- */
body.brand-maybannuoc.skin-bold :is(.card, .summary-card-tech, .data-terminal, .chart-card, .kpi-card, .chamfer-card,
    .info-panel-titanium, .stock-level-panel, .filter-section, .filter-deck-titanium, .status-breakdown-card,
    .sysadmin-stat-card, .table-titanium-wrapper, .revenue-section, .sysadmin-table) {
    border-radius: 16px !important;
    box-shadow: inset 0 2px 0 var(--wl-primary), 0 1px 2px rgba(31, 27, 36, 0.04), 0 8px 22px rgba(31, 27, 36, 0.07) !important;
}
body.brand-maybannuoc.skin-bold :is(.summary-card-tech, .kpi-card, .chart-card):hover {
    box-shadow: inset 0 2px 0 var(--wl-primary), 0 2px 4px rgba(31, 27, 36, 0.06), 0 14px 30px rgba(31, 27, 36, 0.11) !important;
}
/* Nested/modal cards stay flat; the device card wears the 4px red roof edge the bold skin gives it */
body.brand-maybannuoc.skin-bold .modal .card,
body.brand-maybannuoc.skin-bold .card .card { box-shadow: none !important; border: 1px solid var(--wl-border) !important; }
body.brand-maybannuoc.skin-bold .device-card-titanium {
    border-radius: 16px !important;
    box-shadow: inset 0 4px 0 var(--wl-primary), 0 1px 2px rgba(31, 27, 36, 0.04), 0 8px 22px rgba(31, 27, 36, 0.07) !important;
}
/* The red edge replaces soft's navy border-top on KPI cards */
body.brand-maybannuoc.skin-bold .summary-card-tech { border-top: 0 !important; }

/* KPI icons: solid navy tile with a white glyph next to a burgundy value — the site's stat row */
body.brand-maybannuoc.skin-bold .summary-icon-tech,
body.brand-maybannuoc.skin-bold .summary-card-tech .summary-icon-tech {
    background: var(--wl-secondary) !important;
    color: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 10px rgb(var(--wl-secondary-rgb) / 0.25) !important;
}
body.brand-maybannuoc.skin-bold .summary-icon-tech i { color: #fff !important; }
/* Semantic KPI icons keep their meaning: solid status tile, white glyph */
body.brand-maybannuoc.skin-bold .summary-icon-tech.text-success,
body.brand-maybannuoc.skin-bold .wallet-kpi .summary-icon-tech.text-success { background: #15803D !important; color: #fff !important; }
body.brand-maybannuoc.skin-bold .summary-icon-tech.text-warning { background: #B45309 !important; color: #fff !important; }
body.brand-maybannuoc.skin-bold .summary-icon-tech.text-danger,
body.brand-maybannuoc.skin-bold .wallet-kpi .summary-icon-tech.text-danger { background: #B91C1C !important; color: #fff !important; }
body.brand-maybannuoc.skin-bold .summary-icon-tech.text-info { background: var(--wl-secondary) !important; color: #fff !important; }
body.brand-maybannuoc.skin-bold .wallet-kpi .summary-icon-tech i { color: #fff !important; }
body.brand-maybannuoc.skin-bold .summary-card-header .summary-card-arrow { color: var(--wl-secondary) !important; }
body.brand-maybannuoc.skin-bold .summary-value,
body.brand-maybannuoc.skin-bold .summary-card-tech .summary-value { color: var(--ttv-burgundy) !important; }
body.brand-maybannuoc.skin-bold .summary-card-danger .summary-value { color: #B91C1C !important; }

/* Page header: the canopy marquee (solid red, white capitals, small radius) and a burgundy title */
body.brand-maybannuoc.skin-bold .logs-header-titanium .logs-code-badge {
    background: var(--wl-primary) !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase;
    box-shadow: 0 2px 6px rgb(var(--wl-primary-rgb) / 0.3) !important;
}
body.brand-maybannuoc.skin-bold .logs-header-titanium .logs-code-badge * { color: #fff !important; }
body.brand-maybannuoc.skin-bold .logs-title { color: var(--ttv-burgundy) !important; }
body.brand-maybannuoc.skin-bold .logs-subtitle { color: var(--wl-muted) !important; }
body.brand-maybannuoc.skin-bold .modal .modal-header .logs-code-badge { background: var(--wl-primary) !important; color: #fff !important; border-radius: 6px !important; }
body.brand-maybannuoc.skin-bold .modal .modal-header .logs-code-badge * { color: #fff !important; }

/* ---------- Buttons: red pills with a shirt-like top→bottom shade ---------- */
body.brand-maybannuoc.skin-bold :is(.btn, .btn-titanium, .chamfer-btn, .btn-chamfer, .btn-titanium-login) { border-radius: var(--wl-radius-sm) !important; }
body.brand-maybannuoc.skin-bold :is(.btn-primary, .btn-titanium-primary, .btn-titanium-login) {
    background: linear-gradient(180deg, #D21634 0%, var(--wl-primary) 100%) !important;
    border-color: var(--wl-primary) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgb(var(--wl-primary-rgb) / 0.28) !important;
}
body.brand-maybannuoc.skin-bold :is(.btn-primary, .btn-titanium-primary, .btn-titanium-login):hover {
    background: linear-gradient(180deg, var(--wl-primary-hover) 0%, var(--ttv-burgundy) 100%) !important;
    border-color: var(--wl-primary-hover) !important;
}
body.brand-maybannuoc.skin-bold :is(.btn-primary, .btn-titanium-primary, .btn-titanium-login):focus-visible {
    outline: 2px solid var(--wl-secondary) !important;
    outline-offset: 2px;
}
body.brand-maybannuoc.skin-bold .btn-outline-primary {
    color: var(--ttv-burgundy) !important;
    border-color: rgb(var(--wl-primary-rgb) / 0.45) !important;
    background: #fff !important;
}
body.brand-maybannuoc.skin-bold .btn-outline-primary:hover,
body.brand-maybannuoc.skin-bold .btn-outline-primary.active { background: var(--wl-primary-soft) !important; color: var(--ttv-burgundy) !important; border-color: var(--wl-primary) !important; }
body.brand-maybannuoc.skin-bold :is(.btn-titanium-outline, .btn-titanium-ghost, .btn-outline-secondary, .btn-secondary) {
    background: #fff !important;
    border: 1px solid var(--wl-border) !important;
    color: #3F3A47 !important;
}
body.brand-maybannuoc.skin-bold :is(.btn-titanium-outline, .btn-titanium-ghost, .btn-outline-secondary, .btn-secondary):hover {
    background: var(--ttv-head-bg) !important;
    color: var(--ttv-burgundy) !important;
    border-color: rgb(var(--wl-primary-rgb) / 0.35) !important;
}
body.brand-maybannuoc.skin-bold .btn-outline-secondary.active,
body.brand-maybannuoc.skin-bold .btn-check:checked + .btn { color: var(--ttv-burgundy) !important; background: var(--wl-primary-soft) !important; border-color: rgb(var(--wl-primary-rgb) / 0.45) !important; }

/* ---------- Navy for links and info ---------- */
body.brand-maybannuoc.skin-bold .breadcrumb-item a,
body.brand-maybannuoc.skin-bold :is(.card-body, .data-terminal, .table, .modal-body) a:not([class*='btn']):not(.badge):not(.nav-link):not(.dropdown-item):not(.page-link):not([class*='chip']) {
    color: var(--wl-secondary) !important;
}
body.brand-maybannuoc.skin-bold :is(.card-body, .data-terminal, .table, .modal-body) a:not([class*='btn']):not(.badge):not(.nav-link):not(.dropdown-item):not(.page-link):not([class*='chip']):hover {
    color: #061B47 !important;
}
body.brand-maybannuoc.skin-bold .page-link { color: var(--wl-secondary) !important; }
body.brand-maybannuoc.skin-bold .page-item.active .page-link { background: var(--wl-secondary) !important; border-color: var(--wl-secondary) !important; color: #fff !important; }
body.brand-maybannuoc.skin-bold .nav-tabs .nav-link.active,
body.brand-maybannuoc.skin-bold .nav-pills .nav-link.active { color: var(--ttv-burgundy) !important; border-bottom-color: var(--wl-primary) !important; }
body.brand-maybannuoc.skin-bold .alert-info { border-left-color: var(--wl-secondary) !important; }

/* Tables: a faint burgundy-tinted header band with small-caps navy labels (12.3:1 on #FAF6F7) */
body.brand-maybannuoc.skin-bold :is(.table > thead th, .table-header th) {
    background: var(--ttv-head-bg) !important;
    color: var(--wl-secondary) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase;
}
body.brand-maybannuoc.skin-bold .table-hover > tbody > tr:hover > * { background: #FCF3F4 !important; }

/* Controls: 12px radius everywhere, red focus ring, red checks */
body.brand-maybannuoc.skin-bold :is(.form-control, .form-select, .input-group-text, .ts-control) { border-radius: var(--wl-radius-sm) !important; }
body.brand-maybannuoc.skin-bold .input-group > :not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
body.brand-maybannuoc.skin-bold .input-group > :not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
body.brand-maybannuoc.skin-bold textarea.form-control { border-radius: 14px !important; }
body.brand-maybannuoc.skin-bold :is(.form-control, .form-select):focus {
    border-color: var(--wl-primary) !important;
    box-shadow: 0 0 0 3px rgb(var(--wl-primary-rgb) / 0.14) !important;
}
body.brand-maybannuoc.skin-bold .form-check-input:checked { background-color: var(--wl-primary) !important; border-color: var(--wl-primary) !important; }

/* Dropdowns: white sheet, red-tinted hover with burgundy text */
body.brand-maybannuoc.skin-bold .dropdown-menu {
    border: 1px solid var(--wl-border) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 2px 0 var(--wl-primary), 0 12px 28px rgba(31, 27, 36, 0.12) !important;
}
body.brand-maybannuoc.skin-bold .dropdown-item { border-radius: 8px; color: var(--wl-ink) !important; }
body.brand-maybannuoc.skin-bold .dropdown-item:is(:hover, :focus, .active) { background: var(--wl-primary-soft) !important; color: var(--ttv-burgundy) !important; }
body.brand-maybannuoc.skin-bold .dropdown-item:is(:hover, :focus, .active) i { color: var(--wl-primary) !important; }

/* ---------- Modals: white, dark titles (the skins already do this); red hairline only ---------- */
body.brand-maybannuoc.skin-bold .modal-content { box-shadow: inset 0 3px 0 var(--wl-primary), 0 24px 48px rgba(16, 24, 40, 0.22) !important; }
body.brand-maybannuoc.skin-bold .modal .modal-title { color: var(--ttv-burgundy) !important; }
body.brand-maybannuoc.skin-bold .modal-footer { background: var(--ttv-head-bg) !important; border-top: 1px solid var(--wl-border) !important; }

/* ---------- Auth pages: the red cabinet as the backdrop, the card wears a canopy band ---------- */
body.brand-maybannuoc.skin-bold .login-page {
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 96px),
        repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 96px),
        radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, 0.08) 0, transparent 45%),
        radial-gradient(ellipse at 85% 100%, rgba(0, 0, 0, 0.2) 0, transparent 50%),
        var(--ttv-fabric) !important;
    /* collar line along the very top of the page */
    box-shadow: inset 0 3px 0 var(--ttv-collar), inset 0 4px 0 rgba(255, 255, 255, 0.3);
}
body.brand-maybannuoc.skin-bold .login-card {
    border-radius: 24px !important;
    box-shadow: 0 30px 60px rgba(40, 0, 10, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
    overflow: hidden;
}
/* Canopy: the header band bleeds to the card edges, solid red, white title, logo on a white chest badge */
body.brand-maybannuoc.skin-bold .login-header {
    margin: -2rem -2rem 1.75rem !important;
    padding: 1.5rem 2rem 1.35rem !important;
    background: linear-gradient(180deg, #D21634 0%, var(--wl-primary) 100%) !important;
    box-shadow: inset 0 -3px 0 var(--ttv-burgundy);
}
body.brand-maybannuoc.skin-soft .login-header .login-logo-img {
    width: 248px;
    height: 72px;
    padding: 4px 14px;
    margin-bottom: 0.9rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
body.brand-maybannuoc.skin-bold .login-title { color: #fff !important; letter-spacing: .04em !important; }
body.brand-maybannuoc.skin-bold .login-title .accent { color: #fff !important; opacity: 0.9; }
body.brand-maybannuoc.skin-bold .login-version {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    font-weight: 600;
}
body.brand-maybannuoc.skin-bold .card-footer-status { background: var(--ttv-head-bg) !important; }
body.brand-maybannuoc.skin-bold .floating-label { color: rgba(255, 255, 255, 0.9) !important; }

/* ---------- Phones: nothing wider than the viewport, same fabric in the drawer ---------- */
@media (max-width: 767.98px) {
    body.brand-maybannuoc.skin-bold .sidebar { box-shadow: inset 0 2px 0 var(--ttv-collar), 8px 0 24px rgba(0, 0, 0, 0.25) !important; }
    body.brand-maybannuoc.skin-bold .login-page { box-shadow: inset 0 2px 0 var(--ttv-collar); }
    body.brand-maybannuoc.skin-bold .login-header { margin: -2rem -2rem 1.5rem !important; }
}

/* Login template paints its own grid sheet over the page and uses sky-blue accents
   (--c-accent) for the required badge, forgot link, input icon and laser line.
   Let the cabinet show through and move those accents onto the brand red. */
body.brand-maybannuoc.skin-bold .login-bg-grid { background: transparent !important; }
body.brand-maybannuoc.skin-bold .login-page {
    --c-accent: var(--wl-primary);
    --c-dark: var(--ttv-burgundy);
}
body.brand-maybannuoc.skin-bold :is(.req-badge, .forgot-link) { color: var(--wl-primary) !important; }
body.brand-maybannuoc.skin-bold .forgot-link:hover { color: var(--ttv-burgundy) !important; }
body.brand-maybannuoc.skin-bold .input-icon-box { color: var(--wl-muted); }
body.brand-maybannuoc.skin-bold .input-group:focus-within .input-icon-box { color: var(--wl-primary); background: var(--wl-primary-soft); }
body.brand-maybannuoc.skin-bold .input-laser { background: var(--wl-primary) !important; }
body.brand-maybannuoc.skin-bold .tech-input:focus { border-color: var(--wl-primary); }

/* ---------- Review pass: muted text to the brand floor, wallet hero on the fabric, navbar hem ---------- */
/* Login card: the template's slate --c-muted (#94a3b8) and #cbd5e1 placeholders are below 4.5:1 on white */
body.brand-maybannuoc .login-page { --c-muted: var(--wl-muted); --c-border: var(--wl-border); }
body.brand-maybannuoc .login-page .form-check-label { color: var(--wl-muted) !important; }
body.brand-maybannuoc .login-page .remember-duration { color: #7A7580 !important; }
body.brand-maybannuoc .login-page .status-text { color: var(--ttv-burgundy) !important; }
body.brand-maybannuoc .login-page .tech-input::placeholder { color: #8A8591 !important; opacity: 1 !important; }
body.brand-maybannuoc .login-page .floating-label { color: rgba(255, 255, 255, 0.92) !important; }

/* Sidebar footer caption: full-strength white on the hem (BUILD:v1.0.0) */
body.brand-maybannuoc.skin-bold .sidebar .sidebar-footer,
body.brand-maybannuoc.skin-bold .sidebar .sidebar-footer *:not(.status-code) { color: rgba(255, 255, 255, 0.92) !important; opacity: 1 !important; }

/* Navbar: a visible 3px red hem under the white collar; clock / ORG label in burgundy instead of slate */
body.brand-maybannuoc.skin-bold .navbar {
    border-bottom: 0 !important;
    border-image: none !important;
    /* red hem drawn just below the bar (56–59px) so it lines up with the sidebar collar */
    box-shadow: 0 3px 0 var(--wl-primary) !important;
}
body.brand-maybannuoc.skin-bold .navbar :is(.font-tech, .text-muted, .nav-link:not(.dropdown-toggle) i) { color: var(--ttv-burgundy) !important; }
body.brand-maybannuoc.skin-bold .navbar .nav-link { color: var(--ttv-burgundy) !important; }
body.brand-maybannuoc.skin-bold .navbar .badge.bg-danger { color: #fff !important; }

/* Settings/organization: page title gets the red canopy edge like the other headers */
body.brand-maybannuoc.skin-bold .sysadmin-header .header-title,
body.brand-maybannuoc.skin-bold .header-title {
    color: var(--ttv-burgundy) !important;
    padding-left: 12px;
    box-shadow: inset 4px 0 0 var(--wl-primary);
}
body.brand-maybannuoc.skin-bold .sysadmin-header .header-subtitle { color: var(--wl-muted) !important; }
/* Wallet hero wears the uniform fabric instead of the shared red→navy gradient */
body.brand-maybannuoc.skin-bold .org-wallet-hero {
    background: var(--ttv-fabric) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 2px 0 var(--ttv-collar), 0 10px 24px rgb(var(--ttv-burgundy-rgb) / 0.3) !important;
}
body.brand-maybannuoc.skin-bold .org-wallet-hero::after { display: none; }
body.brand-maybannuoc.skin-bold .org-wallet-hero .wb-label { opacity: 1; color: rgba(255, 255, 255, 0.92); }
body.brand-maybannuoc.skin-bold .org-wallet-hero .wb-btn { border-radius: 10px !important; }
body.brand-maybannuoc.skin-bold .org-wallet-hero .wb-btn-primary { background: #fff !important; color: var(--ttv-burgundy) !important; }
body.brand-maybannuoc.skin-bold .org-wallet-hero .wb-btn-ghost {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    color: #fff !important;
}

/* Transactions: "Clear all" chip is solid white with a red outline, not a pink tint */
body.brand-maybannuoc.skin-bold #clearAllFiltersChips {
    background: #fff !important;
    border: 1px solid var(--wl-primary) !important;
    color: var(--wl-primary) !important;
}
body.brand-maybannuoc.skin-bold #clearAllFiltersChips:hover { background: var(--wl-primary-soft) !important; color: var(--ttv-burgundy) !important; }

/* Ranking lists ("Thiết bị hàng đầu"): rank numbers and "n txn" captions in the brand muted ink */
body.brand-maybannuoc.skin-bold :is(.ranking-body, .ranking-list, .ranking-card) :is(.ranking-sub, .ranking-position, .position-number, .ranking-stats, .text-muted, small) { color: var(--wl-muted) !important; }
body.brand-maybannuoc.skin-bold :is(.ranking-body, .ranking-list) .position-number.top-three { color: var(--ttv-burgundy) !important; }
body.brand-maybannuoc.skin-bold :is(.ranking-body, .ranking-list) :is(.ranking-device-id, .ranking-name) { color: var(--wl-ink) !important; }

/* Device cards: unit captions and placeholders at ≥4.5:1 on the grey panel; cash row on one line; sparkline in navy */
body.brand-maybannuoc.skin-bold .device-card-titanium :is(.stat-unit, .stat-label, .text-muted, small, .heartbeat-info.text-muted) { color: var(--wl-muted) !important; }
body.brand-maybannuoc.skin-bold .device-card-titanium :is(.cashbox-value, .recycler-value, .signal-value, .health-value, .balance-value) { color: var(--wl-ink) !important; }
body.brand-maybannuoc.skin-bold .device-card-titanium .realtime-stats-row-cash .stat-item { font-size: 12px !important; white-space: nowrap; }
body.brand-maybannuoc.skin-bold .device-card-titanium .realtime-stats-row-cash .stat-label { white-space: nowrap; }
body.brand-maybannuoc.skin-bold .device-card-titanium .mini-sparkline .bar { background: #D9D6DD !important; }
body.brand-maybannuoc.skin-bold .device-card-titanium .mini-sparkline .bar.active { background: var(--wl-secondary) !important; }
body.brand-maybannuoc.skin-bold .device-card-titanium .mini-sparkline { opacity: 0.6; }

/* Dashboard org alerts: burgundy stripe + red icon, no navy third colour */
body.brand-maybannuoc.skin-bold .org-alert { border-left-color: var(--ttv-burgundy) !important; }
body.brand-maybannuoc.skin-bold .org-alert .org-alert-ico { color: var(--wl-primary) !important; }

/* Phones: header actions sit left under the subtitle, less dead space before content */
@media (max-width: 575.98px) {
    body.brand-maybannuoc.skin-bold .logs-header-titanium .logs-header-actions { justify-content: flex-start !important; margin-top: .5rem !important; }
    body.brand-maybannuoc.skin-bold .logs-header-titanium { padding-bottom: .5rem !important; }
}
/* Skip link (focus-only) on burgundy instead of platform blue */
body.brand-maybannuoc a.skip-navigation { background: var(--ttv-burgundy) !important; color: #fff !important; }