/* ==============================================================
   CONSOLIDATED CSS - Iz6688 Web Application
   Replaces: assets/css/extra.css (partial) + assets/css/custom.css + css/css.css
   Keep separate: hoe.css, bootstrap.min.css, font-awesome.min.css,
                  assets/css/print.css, css/theme/{SiteCode}.css
   ==============================================================
   Sections:
     0.  Design Tokens (CSS Variables)
     1.  Base Reset & Global
     2.  Layout Structure
     3.  Active Theme Colors  (logo-bg8 / header-bg7)
     4.  Utility (colors, fonts, spacing)
     5.  Login Page
     6.  Header & Navigation
     7.  Footer
     8.  Game Board (sport selection, odds)
     9.  Wager Form (straight bet)
     10. Open Bet / Pending Wagers
     11. Weekly History
     12. Parlay Ticket
     13. Wager Result Panel
     14. Common Components (lgs, sel-games, game-item, wager-item …)
     15. Sport Team Logo Sprites
     16. Responsive / Media Queries
   ============================================================== */

@import url('https://fonts.googleapis.com/css?family=Oswald:300,400,700');


/* ============================================================
   0. DESIGN TOKENS
   ============================================================ */

/* ---- DARK THEME TOKENS (Pick7s brief) ---- */
:root {
    /* ══ Backgrounds ══ */
    --bg-base:        #0F1A2E;   /* page canvas — darkest navy */
    --bg-surface:     #16243D;   /* card / panel surface */
    --bg-surface-2:   #1B2E4A;   /* hover row / alternate row */
    --border:         #27374D;   /* divider, card border */

    /* ══ Brand ══ */
    --header-band:    #1A4FA0;   /* panel title bar (NBA/MLB) — calmer than primary */
    --primary:        #1E63D0;   /* buttons, links — brighter blue */
    --primary-hover:  #2B72E0;   /* hover state for primary */
    --accent:         #16C79A;   /* teal — logo, odds highlight, selection */
    --accent-dim:     rgba(22,199,154,.15); /* teal tint for bg highlights */

    /* ══ Status ══ */
    --warning:        #F5A623;   /* balance, Top button, caution */
    --success:        #22C55E;   /* Continue button, win amounts */
    --danger:         #EF4444;   /* risk amounts, errors, delete */

    /* ══ Text ══ */
    --text-primary:   #E6EDF7;   /* main text on dark bg */
    --text-secondary: #8A9BB5;   /* muted labels, timestamps */
    --text-on-primary:#FFFFFF;   /* on --primary blue buttons */
    --text-on-success:#052E16;   /* on --success green buttons */
    --text-on-warning:#451A03;   /* on --warning orange buttons */

    /* ══ Radius ══ */
    --radius-sm: 6px;
    --radius-md: 8px;

    /* ══════════════════════════════════════════════════════════
       ALIAS MAP — old var(--c-*) names → new dark-theme values
       All existing CSS rules auto-inherit without touching selectors
       ══════════════════════════════════════════════════════════ */

    /* Brand */
    --c-primary:        var(--primary);
    --c-primary-dk:     #1652B8;
    --c-primary-lt:     var(--primary-hover);

    /* Surfaces */
    --c-surface-dk:     var(--bg-base);
    --c-surface-md:     var(--bg-surface);

    /* Status */
    --c-risk:           var(--danger);
    --c-win:            var(--success);
    --c-selection:      var(--accent);       /* bet selection titles → teal */
    --c-positive:       var(--success);
    --c-negative:       var(--danger);
    --c-draw:           var(--text-secondary);

    /* Text */
    --c-text:           var(--text-primary);
    --c-text-label:     var(--accent);       /* labelT, teamsNameRot → teal */
    --c-text-muted:     var(--text-secondary);
    --c-text-subtle:    #617090;
    --c-text-invert:    var(--text-primary); /* "invert" on dark bg = still light */

    /* Backgrounds */
    --c-page:           var(--bg-base);
    --c-bg:             var(--bg-surface);
    --c-bg-light:       var(--bg-surface);
    --c-bg-hover:       var(--bg-surface-2);
    --c-bg-alt:         #111827;             /* darkest inset (between surface and base) */
    --c-bg-stripe-even: var(--bg-surface-2);

    /* Game board rows */
    --c-row-team:       var(--bg-surface-2); /* team names bar */
    --c-row-label:      #111827;             /* SPREAD/TOTAL/MONEYLINE separator */
    --c-row-odds:       var(--bg-surface);   /* odds rows */

    /* Borders */
    --c-border:         var(--border);
    --c-border-md:      #344560;
    --c-border-focus:   var(--accent);

    /* Misc */
    --c-icon-gold:      var(--warning);
    --c-header-text:    var(--accent);       /* lgs header text → teal */
    --c-separator:      var(--accent);       /* "@" between teams → teal */
    --c-hasbet:         #1A3A60;

    /* Login */
    --c-login-bg:       var(--bg-base);
    --c-login-form-bg:  var(--bg-surface);

    /* Shadows — deeper on dark theme */
    --shadow-card:      0 2px 8px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.3);
    --shadow-card-md:   0 6px 20px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35);

    /* ── Parameterized theme tokens ──
       Used in shared rules so light/dark/fire can override via :root[data-theme] */
    --text-on-accent:   #FFFFFF;

    /* Alternating row backgrounds */
    --c-row-alt-a:      #16243D;
    --c-row-alt-b:      #1B2E4A;

    /* Section label (SPREAD / TOTAL / MONEYLINE) */
    --c-label-bg:       #1B2E4A;
    --c-label-text:     #8A9BB5;

    /* Login form surface */
    --c-login-form-surface: var(--bg-surface);

    /* ── Sidebar navigation ── */
    --nav-bg:            #0C1525;   /* slightly darker than bg-base */
    --nav-active-bg:     #1B2E4A;   /* bg-surface-2 */
    --nav-active-accent: #16C79A;   /* teal bar + text */
    --nav-hover-bg:      #152035;
    --nav-item-border:   #27374D;   /* border between items */
    --nav-icon:          #617090;   /* ">" arrow icons */
}


/* ============================================================
   0b. DARK THEME — component overrides
       (rules that have hardcoded light values not reachable via variable aliasing)
   ============================================================ */

/* Bootstrap inputs / form controls on dark surface */
.form-control {
    background-color: var(--bg-surface-2);
    border-color: var(--border);
    color: var(--text-primary);
}
.form-control:focus {
    background-color: var(--bg-surface-2);
    border-color: var(--accent);
    color: var(--text-primary);
    box-shadow: 0 0 0 3px rgba(22,199,154,.2);
}
.form-control option { background-color: var(--bg-surface); color: var(--text-primary); }

/* Bootstrap dropdown menu */
.dropdown-menu {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-card-md);
}
.dropdown-menu > li > a {
    color: var(--text-primary);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: var(--bg-surface-2);
    color: var(--text-primary);
}

/* Bootstrap panels inherit dark surface */
.panel { background-color: var(--bg-surface); border-color: var(--border); }
.panel-body { background-color: var(--bg-surface); }

/* Bootstrap collapse panel inside game board */
.panel-collapse { background-color: var(--bg-surface); }

/* Balance display — orange warning color */
.hoe-balance-amount       { color: var(--warning) !important; font-weight: 700; }
.hoe-balance-amount:hover { color: var(--warning) !important; }
.hoe-balance-amount.is-negative { color: var(--danger) !important; }
.hoe-logout-icon          { color: var(--danger) !important; }

/* Logo / site name → teal accent */
#hoe-header .hoe-left-header span,
#hoe-header .hoe-left-header a span {
    color: var(--accent) !important;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ── Sidebar navigation — shared rules; colors via --nav-* vars ── */

#hoe-left-panel,
#hoe-left-panel .panel-list > li > a {
    background-color: var(--nav-bg) !important;
}
#hoe-left-panel {
    border-right: 1px solid var(--nav-item-border);
}

/* Every item: thin bottom divider */
#hoe-left-panel .nav.panel-list > li {
    border-bottom: 1px solid var(--nav-item-border);
}

/* Base link state — transparent left-border reserves space (no layout shift) */
#hoe-left-panel .nav.panel-list > li > a {
    color: var(--c-text-muted);
    border-left: 3px solid transparent;
    padding-left: 13px;          /* 16px - 3px border = same visual indent */
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    display: block;
}

/* Hover */
#hoe-left-panel .nav.panel-list > li > a:hover {
    background-color: var(--nav-hover-bg) !important;
    color: var(--c-text) !important;
    border-left-color: rgba(128,128,128,.25);
}

/* Active — orange/teal/blue bar depending on theme */
#hoe-left-panel .nav.panel-list > li.active > a {
    background-color: var(--nav-active-bg) !important;
    border-left: 3px solid var(--nav-active-accent) !important;
    color: var(--nav-active-accent) !important;
    font-weight: 600;
}

/* ">" glyphicon arrow — muted normally, accent when active/hover */
#hoe-left-panel .nav.panel-list > li > a > i.glyphicon {
    color: var(--nav-icon);
    transition: color 0.15s;
}
#hoe-left-panel .nav.panel-list > li.active > a > i.glyphicon,
#hoe-left-panel .nav.panel-list > li > a:hover > i.glyphicon {
    color: var(--nav-active-accent);
}

/* LIVE CASINO / LOTS (header__nav) — no left-bar treatment */
#hoe-left-panel .nav.panel-list > li.header__nav > a {
    border-left-color: transparent !important;
}
#hoe-left-panel .nav.panel-list > li.header__nav.active > a {
    border-left-color: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    font-weight: normal;
}

/* Footer buttons — use semantic colors */
.footer .back-to-top,
a.back-to-top {
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
    color: var(--text-on-warning) !important;
    font-weight: 600;
}
.footer #controlBtn,
#controlBtn.btn-continue,
.btn-continue {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
    color: #06351C !important;   /* dark forest green — matches btn-success */
    font-weight: 600;
}

/* Odds value numbers → teal accent for quick recognition */
.lineDetail label     { color: var(--text-primary); }
.lineDetail .lnk-odds,
.lineDetail span b    { color: var(--accent); font-weight: 700; }

/* Login form — override hardcoded white gradient */
.bgLoginform {
    background: var(--bg-surface) !important;
    filter: none !important;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,.6) !important;
    color: var(--text-primary) !important;
}
.bgLoginform label,
.bgLoginform .control-label { color: var(--text-secondary); }

/* Checkbox — teal accent, applies to all checkboxes in the app */
input[type="checkbox"] {
    accent-color: #16C79A;
    border-radius: 4px;
    cursor: pointer;
}
input[type="checkbox"].checkBox {
    accent-color: #16C79A;
    width: 16px;
    height: 16px;
    cursor: pointer;
    vertical-align: middle;
}

/* Selected game row in wager */
.lineDetail input[type="checkbox"]:checked ~ * { color: var(--accent); }

/* Modal (message dialog) */
.modal-message .modal-content {
    background-color: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
}
.modal-message .modal-header {
    background-color: var(--bg-surface-2);
    border-bottom-color: var(--border);
    color: var(--text-primary);
}

/* Bootstrap alert variants on dark bg */
.alert-warning { background-color: rgba(245,166,35,.15); border-color: rgba(245,166,35,.3); color: var(--warning); }
.alert-danger  { background-color: rgba(239,68,68,.15);  border-color: rgba(239,68,68,.3);  color: var(--danger); }
.alert-info    { background-color: rgba(30,99,208,.15);  border-color: rgba(30,99,208,.3);  color: var(--primary-hover); }
.alert-success { background-color: rgba(34,197,94,.15);  border-color: rgba(34,197,94,.3);  color: var(--success); }

/* Primary button */
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--text-on-primary);
    border-radius: var(--radius-sm);
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--text-on-primary);
}

/* Success button (Continue) */
.btn-success {
    background-color: var(--success);
    border-color: var(--success);
    color: #06351C;                /* dark forest green — softer than black */
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.btn-success:hover, .btn-success:focus {
    background-color: #16A34A;
    border-color: #16A34A;
    color: #06351C;
}

/* Warning button (Top) */
.btn-warning {
    background-color: var(--warning);
    border-color: var(--warning);
    color: var(--text-on-warning);
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.btn-warning:hover, .btn-warning:focus {
    background-color: #D4891E;
    border-color: #D4891E;
    color: var(--text-on-warning);
}

/* Default / secondary button */
.btn-default {
    background-color: var(--bg-surface-2);
    border-color: var(--border);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
}
.btn-default:hover, .btn-default:focus {
    background-color: var(--border);
    border-color: var(--border);
    color: var(--text-primary);
}

/* teamsOddsAmountB — formerly green-100 on white, now teal-tint on dark */
.teamsOddsAmountB { background-color: var(--accent-dim); }

/* Table stripes on dark */
.table-bordered,
.table-condensed { border-color: var(--border); color: var(--text-primary); }
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td { border-color: var(--border); }
.table > thead > tr > th { background-color: var(--bg-surface-2); color: var(--text-secondary); }

/* Wager input — dark surface */
.wager-input-sm {
    background-color: var(--bg-surface-2) !important;
    border-color: var(--border) !important;
    color: var(--text-primary) !important;
}
.wager-input-sm:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(22,199,154,.2) !important;
}

/* ── Alternating rows ─────────────────────────────────────────
   Game board: alternate per match block
   Wager list: alternate per line item
   Open bets / History: alternate per accordion item
   ──────────────────────────────────────────────────────────── */

/* ── Alternating rows — use parameterized vars, adapt to both themes ──── */

/* Game board — alternate each match card */
.gameOddsBox:nth-child(odd)  { background-color: var(--c-row-alt-a); }
.gameOddsBox:nth-child(even) { background-color: var(--c-row-alt-b); }
.gameOddsBox:nth-child(odd)  .lineDetail,
.gameOddsBox:nth-child(even) .lineDetail { background-color: transparent; }
.gameOddsBox:nth-child(odd)  .teamsBox   { background-color: rgba(128,128,128,.06); }
.gameOddsBox:nth-child(even) .teamsBox   { background-color: rgba(128,128,128,.10); }
/* .gameTime uses var(--bg-surface-2) consistently — no per-nth override needed */

/* Straight-bet wager list */
.wager-list .wager-item:nth-child(odd)  { background-color: var(--c-row-alt-a); }
.wager-list .wager-item:nth-child(even) { background-color: var(--c-row-alt-b); }

/* Parlay ticket */
.section-wagers .bet-row:nth-child(odd)  { background-color: var(--c-row-alt-a); }
.section-wagers .bet-row:nth-child(even) { background-color: var(--c-row-alt-b); }

/* Open bets + History */
.section-openbet .acc-item:nth-child(odd),
.section-history .acc-item:nth-child(odd)  { background-color: var(--c-row-alt-a); }
.section-openbet .acc-item:nth-child(even),
.section-history .acc-item:nth-child(even) { background-color: var(--c-row-alt-b); }

/* Wager item hover — keep accent bar, slight bg lift */
.wager-item:hover { box-shadow: inset 4px 0 0 var(--accent); background-color: #223554 !important; }

/* Win / risk column colors in open-bet and result */
.col-risk, .wr-risk { color: var(--danger)  !important; }
.col-win,  .wr-win  { color: var(--success) !important; }

/* ============================================================
   1. BASE RESET & GLOBAL
   ============================================================ */

textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus,
.btn:focus,
a:focus {
    outline: none !important;
    box-shadow: none !important;
}

a            { color: var(--c-text); }
a:hover,
a:focus      { text-decoration: none; }

body {
    margin-bottom: 0;
    background-color: var(--c-page);
}

/* Page canvas backgrounds — override hoe.css background-image patterns */
#hoeapp-wrapper,
#hoeapp-container,
#main-content,
#pageSport {
    background-color: var(--bg-base) !important;
    background-image: none !important;
}

/* ── Scroll fix ────────────────────────────────────────────────
   hoe.js computes min-height = WH - HeaderH - FooterH - 2 and
   sets it on #main-content so the body can scroll.
   If that JS calc fails (e.g. footer not found), we fall back:
   override hoe.css's overflow-y:hidden on the wrapper so the
   browser's normal body scroll takes over.
   ──────────────────────────────────────────────────────────── */
html {
    height: auto !important;
    min-height: 100%;
}
body {
    height: auto !important;
    min-height: 100vh;
    background-color: var(--bg-base);
    background-image: none !important;
}
#hoeapp-wrapper {
    overflow-y: visible !important;
    height: auto !important;
    min-height: 100vh;
    background-color: var(--bg-base) !important;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
#hoeapp-container {
    flex: 1;
    box-sizing: border-box;
}

.alert { font-size: 13px; padding: 5px; margin: 5px 0; }

input[type="checkbox"],
.handheld input[type="radio"] { width: 18px !important; height: 18px !important; }

.svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em;
    padding-left: 5px;
}


/* ============================================================
   2. LAYOUT STRUCTURE  (from extra.css)
   ============================================================ */

#main-content { margin-left: 230px; position: relative; }

.content-title {
    border-bottom: 1px solid var(--c-border);
    border-top:    1px solid var(--c-border);
    padding: 10px 20px;
}
.content-title .main-title { font-size: 20px; font-weight: 300; margin: 0; }

.inner-content {
    padding: 10px;
}

.theme-panel .panel-heading {
    border-bottom: 1px solid var(--c-border);
    text-align: center;
}
.theme-panel .panel-heading .panel-title {
    font-size: 12px;
    text-align: left;
    text-transform: uppercase;
}

.hoe-minimized-lpanel #main-content { margin-left: 50px; }

#hoeapp-container[hoe-lpanel-effect="shrink"]               #main-content { margin-left: 230px; }
#hoeapp-container[hoe-lpanel-effect="shrink"].hoe-minimized-lpanel  #main-content { margin-left: 50px; }
#hoeapp-container[hoe-lpanel-effect="overlay"]              #main-content { margin-left: 50px; }
#hoeapp-container[hoe-lpanel-effect="overlay"].hoe-minimized-lpanel #main-content { margin-left: 50px; }
#hoeapp-container[hoe-lpanel-effect="push"]                 #main-content { margin-left: 230px; margin-right: -230px; }
#hoeapp-container[hoe-lpanel-effect="push"].hoe-minimized-lpanel    #main-content { margin-left: 50px; margin-right: 0; }


/* ============================================================
   3. ACTIVE THEME COLORS  (logo-bg8 / header-bg7 → dark theme)
   ============================================================ */

/* Left header / logo area — darkest navy */
#hoe-header[hoe-color-type="logo-bg8"] .hoe-left-header                { background: var(--bg-base); }
#hoe-header[hoe-color-type="logo-bg8"] .hoe-left-header a              { color: var(--text-primary); }
#hoe-header[hoe-color-type="logo-bg8"] .hoe-left-header a:hover,
#hoe-header[hoe-color-type="logo-bg8"] .hoe-left-header a:focus        { color: var(--accent); }
#hoe-header[hoe-color-type="logo-bg8"] .hoe-left-header a i            { color: var(--text-primary); }
#hoeapp-wrapper[hoe-device-type="phone"] #hoe-header[hoe-color-type="logo-bg8"] .hoe-left-header .hoe-sidebar-toggle a:after {
    color: var(--text-primary);
    border: 0 solid var(--border);
}

/* Right header — dark surface with border bottom */
.hoe-right-header[hoe-color-type="header-bg7"]                         { background: var(--bg-surface); border-bottom: 1px solid var(--border); }
.hoe-right-header[hoe-color-type="header-bg7"] a i                     { color: var(--text-secondary); }
.hoe-right-header[hoe-color-type="header-bg7"] a:hover i               { color: var(--accent); }
.hoe-right-header[hoe-color-type="header-bg7"] .hoe-sidebar-toggle a:after      { border: 0 solid var(--border); color: var(--text-secondary); }
.hoe-right-header[hoe-color-type="header-bg7"] .hoe-sidebar-toggle a:hover:after{ color: var(--accent); }
.hoe-right-header[hoe-color-type="header-bg7"] li a                    { color: var(--text-secondary); }
.hoe-right-header[hoe-color-type="header-bg7"] li a:hover,
.hoe-right-header[hoe-color-type="header-bg7"] li a:focus              { background: var(--bg-surface-2); color: var(--text-primary); }
.hoe-right-header[hoe-color-type="header-bg7"] .theme-config a         { border-left: 1px solid var(--border); }


/* ============================================================
   4. UTILITY — Colors, Fonts, Spacing
   ============================================================ */

/* Status color helpers */
.tbColor  { color: var(--c-primary); }
.tcColor  { color: #E3043D; }
.tgColor  { color: var(--c-win); }
.toColor  { color: #F59E0B; }

.bg-green { color: var(--c-text-invert) !important; background-color: var(--c-win) !important; border-color: var(--c-win) !important; }
.bg-green > span,
.bg-green > span > .fa-check-circle { color: var(--c-text-invert) !important; }

.likeLink       { display: inline-flex; align-items: center; gap: 6px; color: var(--c-primary-lt); cursor: pointer; }
.likeLink:hover { color: var(--c-primary-dk); text-decoration: underline; }
.betStepsTitle  { color: var(--c-surface-dk); }
.weight-700     { font-weight: 700; }

/* Font sizes */
.f10   { font-size: 10px; }
.f11   { font-size: 11px; }
.f12   { font-size: 12px; }
.f14   { font-size: 14px; }
.f18   { font-size: 18px; }
.font-13 { font-size: 13px; }

/* Margins */
.m0  { margin: 0; }   .m5  { margin: 5px; }   .m10 { margin: 10px; }
.m20 { margin: 20px; } .m30 { margin: 30px; } .m40 { margin: 40px; }
.m50 { margin: 50px; } .m60 { margin: 60px; } .m70 { margin: 70px; }
.m80 { margin: 80px; } .m90 { margin: 90px; }
.ml5  { margin-left: 5px; }   .ml10 { margin-left: 10px; }
.mr5  { margin-right: 5px; }
.mb5  { margin-bottom: 5px; } .mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; } .mb30 { margin-bottom: 30px; }

/* Paddings */
.p0  { padding: 0; }   .p5  { padding: 5px; }   .p10 { padding: 10px; }
.p20 { padding: 20px; } .p30 { padding: 30px; } .p40 { padding: 40px; }
.p50 { padding: 50px; } .p60 { padding: 60px; } .p70 { padding: 70px; }
.p80 { padding: 80px; } .p90 { padding: 90px; }
.pl10 { padding-left: 10px; }

/* Misc */
.shadow   { box-shadow: 0 4px 0 0 rgba(0,0,0,.5); }
.txCenter { text-align: center; }
.mainBtn  { display: none; }


/* ============================================================
   5. LOGIN PAGE
   ============================================================ */

html, body { height: 100%; }

.body_Login {
    background: var(--c-login-bg) url(/content/assets/images/body-bg.png) 0 0 repeat-x;
    text-align: center;
    color: var(--c-text-invert);
    font-family: 'Oswald', sans-serif;
    margin-top: 10px;
}

.bgLoginform {
    background: linear-gradient(to bottom, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f6f8f9', endColorstr='#f5f7f9', GradientType=0);
    padding: 20px;
    border-radius: 10px;
    border: 0 solid transparent;
    box-shadow: 0 10px 14px 0 rgba(0,0,0,.25);
    color: var(--c-text);
}


/* ============================================================
   6. HEADER / SIDE NAVIGATION
   ============================================================ */

.header__nav span.fire:after {
    position: absolute;
    content: "";
    width: 24px; height: 24px;
    background-size: 100%;
    bottom: 50%;
    background-image: url('/content/imgs/fire.db51d401.gif');
}

.productThumbnail-item[data-v-15471f40] {
    width: 100%;
    padding: 0.5rem;
    position: relative;
}
.productThumbnail-item img[data-v-15471f40] { width: 100%; }
.productThumbnail-item-title[data-v-15471f40] {
    position: absolute;
    top: 1rem; right: 0.7rem; bottom: 0.5rem;
    font-size: 2rem; font-weight: 900;
    width: 40%;
    display: flex; align-items: center; justify-content: center;
    color: var(--c-text-invert);
    text-align: center;
    text-shadow: 0 3px 3px rgba(0,0,0,.8);
    font-style: italic;
}

/* Balance display in header dropdown */
.hoe-balance-amount  { color: var(--c-primary); font-weight: bold; }
.hoe-balance-amount.is-negative { color: var(--c-risk); }

/* Logout icon */
.hoe-logout-icon { color: var(--c-risk); }


/* ============================================================
   7. FOOTER
   ============================================================ */

.footer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 99999;
}


/* ============================================================
   8. GAME BOARD — Sport Selection & Odds Display
   ============================================================ */

/* Panel overrides */
.panel-body { padding: 5px 0; position: relative; }
.panel-body .allLink { position: absolute; top: 4px; right: 12px; z-index: 999; }

.panel-default > .panel-heading {
    color: var(--text-on-primary);
    background-color: var(--header-band);   /* #1A4FA0 — calmer than --primary */
    border-color: #143B80;
    padding: 8px 12px;
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
}

/* Panel heading links must stay light regardless of global a { color } */
.panel-default > .panel-heading a,
.panel-default > .panel-heading a:hover,
.panel-default > .panel-heading a:focus,
.panel-default > .panel-heading .panel-title,
.panel-default > .panel-heading .panel-title > a,
.panel-default > .panel-heading .panel-title > a:hover,
.panel-default > .panel-heading .panel-title > a:focus {
    color: var(--text-on-primary) !important;
    text-decoration: none;
}
/* Chevron icon in panel heading */
.panel-default > .panel-heading i.glyphicon { color: rgba(255,255,255,.7); }

.panel-title > a { display: block; }

/* ==== Game Odds Box — Card layout ====
   Layer 1 : page          #F0F2F5  neutral gray
   Layer 2 : gameOddsBox   #FFFFFF  white card  + shadow
   Layer 3a: teamsBox      #EDF0F5  very light gray — team names bar
   Layer 3b: labelT        #E4E8EE  slightly darker — section separator
   Layer 3c: lineDetail    #FFFFFF  white — odds rows
   ===================================== */

.gameOddsBox {
    font-size: 11px;
    background-color: var(--c-bg);
    border-radius: 6px;
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-card);
    margin: 0 0 12px;
    overflow: hidden;
}

/* Time/date row — bg-surface-2 across all themes:
   dark=#1B2E4A  light=#E9EFF6  fire=#241A1A */
.gameTime {
    display: block;
    padding: 5px 12px;
    background-color: var(--bg-surface-2);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
}
.gameTime small { display: inline-block; font-size: 11px; width: 48%; color: var(--text-secondary); }
.gameDate { padding: 4px 12px; background-color: var(--bg-surface-2); color: var(--text-secondary); font-size: 12px; }
.gameDate small { display: inline-block; font-size: 11px; width: 48%; color: var(--text-secondary); }

/* Team names bar — neutral light gray (not blue-tinted) */
.teamsBox {
    background-color: var(--c-row-team);
    width: 100%;
    border-bottom: 1px solid var(--c-border);
    margin: 0;
    border-radius: 0;
}
.teamsTeaser { background-color: var(--c-row-team); width: 98%; border-radius: 3px; margin: 0 auto 10px; }
.teamsodds {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
}

.teamsNameRot {
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    color: var(--c-primary);
    padding: 5px 8px;
}
.teamsNameRot span {
    color: var(--c-separator);
    font-size: 15px;
    margin-left: 8px;
    margin-right: 8px;
}

/* Section label — SPREAD / TOTAL / MONEYLINE */
.labelT {
    width: 100%;
    margin: 0;
    padding: 3px 10px;
    background-color: var(--c-label-bg);
    color: var(--c-label-text);
    border-bottom: 1px solid var(--c-border);
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
}

/* Odds row */
.lineDetail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;                          /* mobile: full width */
    background-color: var(--c-row-odds);
    border-top: 1px solid var(--c-border); /* border-top tránh double-line ở cuối card */
    color: var(--c-text);
    font-size: 13px;
    padding: 6px 10px;
    transition: background-color 0.1s;
    box-sizing: border-box;
}
/* Desktop: two teams side by side */
@media (min-width: 768px) {
    .teamsodds .lineDetail { width: 50%; }
    .teamsodds .lineDetail:nth-child(odd) { border-right: 1px solid var(--c-border); }
}
.lineDetail:hover { background-color: var(--c-bg-hover); }
.lineDetail span { font-size: 13px; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.lineDetail span label { display: flex; align-items: center; gap: 5px; margin: 0; cursor: pointer; }
.lineDetail i, .lineSpan i {
    color: var(--c-primary);
    font-size: 10px;
    vertical-align: middle !important;
    padding-bottom: 4px;
}

.teamnsLogos { margin-top: 5px; margin-right: 4px; }

.bannerSport {
    display: block;
    margin: 8px auto 0;
    border-radius: 3px;
    background: var(--c-bg);
    font-size: 12px;
    text-transform: uppercase;
    color: var(--c-text-label);
    font-weight: bold;
    padding-left: 5px;
}

.teamsNameRotCon { font-size: 12px; text-align: left; color: var(--c-text-label); border-radius: 3px 0 0 3px; }
.teamsNameRotCon span { color: var(--c-text); float: right; font-size: 14px; }

.teamsOddsAmountA { background-color: var(--c-bg); width: 98%; border-radius: 3px; margin: 0 auto 10px; }
.teamsOddsAmountB { background-color: #DCFCE7; width: 98%; border-radius: 3px; margin: 0 auto 10px; text-align: center; }
.teamsOddsAmountErr { width: 98%; border-radius: 3px; margin: 0 auto 10px; text-align: center; }

/* All dark-background headers: links must be white
   (global a { color } would otherwise override to dark text) */
.ob-header a,
.ob-header a:hover,
.wr-header a,
.wr-header a:hover,
.lgs > .lg-head a,
.lgs > .lg-head a:hover {
    color: var(--c-text-invert) !important;
}

/* Sport / game board panel */
.panel.theme-panel {
    border-radius: 6px;
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-card);
    margin-bottom: 10px;
    background-color: var(--bg-base);     /* page canvas — gap shows same as page */
}
.panel.theme-panel > .panel-body {
    background-color: var(--bg-base);     /* no white flash between header and cards */
    padding: 0;                           /* flush — gameOddsBox.m5 provides own margin */
}
/* Inner panel (wraps the heading + game rows) */
.panel.theme-panel .panel-default {
    background-color: var(--bg-base);
}
.panel.theme-panel .panel-default .panel-collapse > .panel-body {
    background-color: var(--bg-base);
    padding: 4px 0 0;                     /* tiny top breath, no sides */
}
/* Sport/league checkbox links inside selection panels */
.panel.theme-panel .panel-body a,
.panel.theme-panel .panel-body label {
    color: var(--c-primary);
    font-size: 13px;
}
.panel.theme-panel .panel-body a:hover { color: var(--c-primary-dk); text-decoration: underline; }

/* Stripped table */
.stripedTB { display: table; margin-bottom: 15px; border: 1px solid var(--c-border); padding: 3px 0; width: 100%; }
.stripedTB th { background-color: var(--c-primary); color: var(--c-text-invert); padding: 5px; }
.stripedTB tr:nth-child(even) { background: var(--c-bg-stripe-even); color: var(--c-text); }
.stripedTB tr:nth-child(odd)  { background: var(--c-bg); color: var(--c-text); }
.stripedTB td { padding: 2px 5px; border: 1px solid var(--c-border); }


/* ============================================================
   9. WAGER FORM — Straight Bet
   ============================================================ */

/* Wager form card container */
.panel.theme-panel .sel-games,
#collapseWager { background-color: var(--c-bg); }

.wager-list { padding: 0; list-style: none; background: var(--c-bg); margin-bottom: 0; border-radius: 0 0 5px 5px; overflow: hidden; }

.wager-header {
    display: flex;
    font-weight: 600;
    background: var(--c-bg-light);
    border-bottom: 1px solid var(--c-border);
    padding: 12px 0;
    color: var(--c-text-muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.wager-item {
    border-bottom: 1px solid var(--c-border);
    padding: 16px 0;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.wager-item:hover {
    background: var(--c-bg-hover);
    box-shadow: inset 4px 0 0 var(--c-primary);
}

.wager-row { display: flex; align-items: center; width: 100%; }

.wager-col-remove    { flex: 0 0 30px; text-align: center; }
.wager-col-selection { flex: 1; padding-right: 20px; padding-left: 0; min-width: 0; }
.wager-col-odds      { flex: 0 0 160px; display: flex; justify-content: center; padding: 0 8px; }
.wager-col-risk      { flex: 0 0 100px; display: flex; justify-content: flex-end; padding: 0 8px; }
.wager-col-win       { flex: 0 0 100px; display: flex; justify-content: flex-end; padding: 0 8px; }

.wager-selection-title {
    color: var(--c-selection);
    font-weight: 600;
    font-size: 13px;
    text-decoration: none !important;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wager-selection-details {
    color: var(--c-text);
    font-size: 13px;
    font-weight: normal;
    display: inline-block;
    margin-left: 4px;
}

.wager-input-sm {
    height: 34px;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 4px;
    border: 1px solid var(--c-border-md);
    background-color: var(--c-bg);
    color: var(--c-text);
    font-weight: 500;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: none;
}
.wager-input-sm:focus {
    border-color: var(--c-border-focus);
    box-shadow: 0 0 0 3px rgba(59,130,246,.2);
    outline: none;
}

.wager-info-collapse {
    margin: 5px 0 0;
    padding: 8px 12px;
    background: var(--c-bg-light);
    border-radius: 4px;
    font-size: 12px;
    color: var(--c-text-muted);
    border-left: 3px solid var(--c-border-md);
    line-height: 1.6;
}

.wager-trash-btn {
    color: var(--c-risk);
    font-size: 10px;
    transition: background 0.2s, color 0.2s;
    display: inline-flex;
    width: 18px; height: 18px;
    align-items: center; justify-content: center;
    border-radius: 2px;
    border: 1px solid var(--c-risk);
    background: var(--c-bg);
}
.wager-trash-btn:hover { color: var(--c-text-invert); background: var(--c-risk); }

.wager-odds-display {
    background: var(--c-bg-light);
    padding: 6px 12px;
    border-radius: 4px;
    color: var(--c-text);
    font-weight: 600;
    display: inline-block;
    font-size: 12px;
    border: 1px solid var(--c-border);
    min-width: 80px;
}


/* ============================================================
   10. OPEN BET / PENDING WAGERS
   ============================================================ */

.section-openbet {
    background-color: var(--c-bg);
    border-radius: 6px;
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.section-openbet .ob-header {
    background-color: var(--c-primary);
    color: var(--c-text-invert);
    padding: 10px 15px;
    font-weight: bold;
    font-size: 14px;
}
.section-openbet .ob-col-header {
    display: flex;
    padding: 6px 10px 6px 15px;
    border-bottom: 1px solid var(--c-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--c-text-muted);
}

.section-openbet .acc-item { border-bottom: 1px solid var(--c-border); }

.section-openbet .acc-header a {
    display: flex; align-items: center;
    padding: 10px 10px 10px 15px;
    text-decoration: none;
    color: var(--c-text);
    width: 100%;
    box-sizing: border-box;
}
.section-openbet .acc-header a:hover,
.section-openbet .acc-header a:focus { background-color: var(--c-bg-hover); text-decoration: none; color: var(--c-text); }

.section-openbet .acc-header .col--left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.section-openbet .acc-header .col--left i              { color: var(--c-text-subtle); flex-shrink: 0; font-size: 13px; margin-top: 2px; }
.section-openbet .acc-header .col--left .game-title    { font-weight: 600; font-size: 13px; color: var(--c-selection); }
.section-openbet .acc-header .col--left .game-sub      { font-weight: normal; color: var(--c-text); }
.section-openbet .acc-header .col--right               { display: flex; flex-shrink: 0; }
.section-openbet .acc-header .col-risk { width: 55px; text-align: right; padding-right: 6px; font-weight: 600; color: var(--c-risk); }
.section-openbet .acc-header .col-win  { width: 65px; text-align: right; font-weight: 600; color: var(--c-win); }

.section-openbet .acc-body {
    background-color: var(--c-bg-light);
    padding: 10px 15px 10px 38px;
    border-left: 3px solid var(--c-border-md);
    border-top: 1px solid var(--c-border);
    font-size: 12px;
    color: var(--c-text-muted);
    line-height: 1.6;
}
.section-openbet .acc-body h5 { font-size: 13px; font-weight: 600; margin: 0 0 5px; color: var(--c-text); }
.section-openbet .acc-body p  { margin: 0 0 3px; }

.section-openbet .parlay-leg { padding: 5px 0; border-bottom: 1px dashed var(--c-border); }
.section-openbet .parlay-leg:last-child { border-bottom: none; }
.section-openbet .parlay-leg > a {
    display: flex; align-items: center; gap: 6px;
    text-decoration: none; padding: 6px 0;
    font-size: 12px; color: var(--c-text-muted); background: none;
}
.section-openbet .parlay-leg > a:hover { background: none; color: var(--c-text); }
.section-openbet .parlay-leg > a i    { color: var(--c-text-subtle); flex-shrink: 0; }
.section-openbet .parlay-leg .leg-title { color: var(--c-selection); font-weight: 600; font-size: 12px; }
.section-openbet .parlay-leg .leg-sub   { color: var(--c-text-muted); font-size: 12px; }
.section-openbet .parlay-leg .leg-detail {
    padding: 4px 0 4px 18px;
    font-size: 12px; color: var(--c-text-muted); line-height: 1.6;
    background-color: var(--c-bg-alt);
    border-top: 1px solid var(--c-border);
}
.section-openbet .parlay-leg .leg-detail p       { margin: 0 0 3px; }
.section-openbet .parlay-leg .leg-detail .leg-vs { font-weight: 600; color: var(--c-text); margin-bottom: 4px; }
.section-openbet .leg-loading { color: var(--c-text-subtle); font-size: 12px; margin: 0; }
.section-openbet .ob-footer {
    display: flex; justify-content: flex-end;
    padding: 8px 15px;
    font-size: 12px; color: var(--c-text-muted);
    background: var(--c-bg-light);
    border-top: 1px solid var(--c-border);
}


/* ============================================================
   11. WEEKLY HISTORY
   ============================================================ */

/* History card wrapper */
.ez-body {
    background-color: var(--c-bg);
    border-radius: 6px;
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-card);
    margin-bottom: 10px;
}

.section-result.section-history {
    background-color: var(--c-bg);
    border-radius: 6px;
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-card);
    margin-top: 10px;
}

.winlist-day-title {
    list-style: none; margin: 0;
    padding: 8px 12px;
    background-color: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
}
.winlist-day-title li.header { display: flex; align-items: center; font-size: 13px; }

.weekly-history { overflow-x: auto; }
.weekly-history table { min-width: 600px; width: 100%; }
.weekly-history table td { font-size: 13px; vertical-align: middle; white-space: nowrap; padding: 6px 8px; text-align: right; }
.weekly-history table td.title { font-weight: 600; background-color: var(--c-bg-light); min-width: 80px; text-align: left; }
.weekly-history table thead td.title:last-child { text-align: right; }
.weekly-history table td.date-title { text-align: center; font-size: 12px; line-height: 1.4; color: var(--text-secondary); }
.weekly-history table td a:not(.text-danger):not(.text-success) { color: var(--text-secondary); }
.weekly-history .text-danger  { color: var(--danger)  !important; }
.weekly-history .text-success { color: var(--success) !important; }

.section--bot.mb { display: none; }

/* Wager list */
.section-history #bet-line { padding: 0; }
.section-history .acc-item { border-bottom: 1px solid var(--c-border); }
.section-history .acc-item:last-child { border-bottom: none; }

.section-history .acc-header a {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 8px 8px 6px;
    color: var(--c-text); text-decoration: none;
    font-size: 13px; line-height: 1.4;
}
.section-history .acc-header a:hover,
.section-history .acc-header a:focus { background-color: var(--c-bg-hover); text-decoration: none; color: var(--c-text); }

.section-history .acc-header .col--left { display: flex; align-items: flex-start; gap: 6px; flex: 1; min-width: 0; }
.section-history .acc-header .col--left i { color: var(--c-text-subtle); font-size: 13px; flex-shrink: 0; margin-top: 2px; }
.section-history .acc-header .col--left .game-title { font-weight: 600; color: var(--c-selection); }
.section-history .acc-header .col--right { flex-shrink: 0; min-width: 70px; text-align: right; font-weight: 600; font-size: 13px; padding-left: 8px; }

.section-history .acc-body {
    padding: 8px 10px 10px 26px;
    background-color: var(--c-bg-light);
    border-top: 1px solid var(--c-border);
    font-size: 12px; color: var(--c-text-muted); line-height: 1.6;
}
.section-history .acc-body p  { margin: 0 0 3px; }
.section-history .acc-body h5 { font-size: 13px; font-weight: 600; margin: 0 0 5px; color: var(--c-text); }

.section-history .acc-header a .fa-plus-square-o:before    { content: "\f147"; }
.section-history .acc-header a.collapsed .fa-plus-square-o:before { content: "\f196"; }

.section-history .acc-body > div              { border-bottom: 1px dashed var(--c-border); }
.section-history .acc-body > div:last-child   { border-bottom: none; }
.section-history .acc-body .acc-header a      { padding: 6px 0; font-size: 12px; color: var(--c-text-muted); background: none; }
.section-history .acc-body .acc-header a:hover{ background: none; color: var(--c-text); }
.section-history .acc-body .acc-body          { padding-left: 18px; background-color: var(--c-bg-alt); border-top: 1px solid var(--c-border); }


/* ============================================================
   12. PARLAY TICKET  (section-wagers)
   ============================================================ */

.section-wagers .bet-row { display: flex; align-items: flex-start; padding: 10px 5px; border-bottom: 1px solid var(--c-border); }
.section-wagers .bet-row:last-child { border-bottom: none; }
.section-wagers .bet-info  { flex: 1; min-width: 0; }
.section-wagers .bet-title { font-weight: 600; font-size: 13px; color: var(--c-selection); display: block; }
.section-wagers .bet-vs    { display: block; font-size: 12px; color: var(--c-text-muted); margin-top: 2px; }
.section-wagers .bet-sport { display: block; font-size: 11px; color: var(--c-text-subtle); margin-top: 1px; }

.section-wagers .bet-remove { flex-shrink: 0; color: var(--c-risk); font-size: 12px; padding: 2px 4px; margin-left: 8px; text-decoration: none; }
.section-wagers .bet-remove:hover { color: #991B1B; text-decoration: none; }

.section-wagers .parlay-table { width: 100%; border: none; }
.section-wagers .parlay-table > thead > tr > th,
.section-wagers .parlay-table > tbody > tr > td,
.section-wagers .parlay-table > tfoot > tr > th { border: none; border-bottom: 1px solid var(--c-border); }
.section-wagers .parlay-table > tfoot > tr > th { border-top: 2px solid var(--c-border-md); border-bottom: none; }
.section-wagers .parlay-table th { background-color: var(--c-bg-light); color: var(--c-text-muted); font-weight: 600; font-size: 12px; padding: 6px; vertical-align: middle; text-align: center; }
.section-wagers .parlay-table td { font-size: 12px; padding: 6px; vertical-align: middle; color: var(--c-text); text-align: center; }
.section-wagers .parlay-table col.col-parlays  { width: 28%; }
.section-wagers .parlay-table col.col-bets     { width: 14%; }
.section-wagers .parlay-table col.col-risk-pp  { width: 26%; }
.section-wagers .parlay-table col.col-total-r  { width: 16%; }
.section-wagers .parlay-table col.col-total-w  { width: 16%; }
.section-wagers .parlay-table td.num-col,
.section-wagers .parlay-table tfoot th.num-col { text-align: right; padding-right: 10px; }
.section-wagers .parlay-table tfoot th         { background-color: var(--c-bg-alt); color: var(--c-text); font-size: 12px; font-weight: 600; }
.section-wagers .parlay-table td.win-col,
.section-wagers .parlay-table tfoot th.win-col { color: var(--c-win); font-weight: 600; }
.section-wagers .parlay-table .risk-input {
    width: 80px; font-size: 12px; height: 30px; padding: 4px 6px;
    background-color: var(--bg-surface-2);
    border: 1px solid var(--c-border); border-radius: 4px;
    color: var(--c-text); text-align: right; display: block;
}
.section-wagers .parlay-table .risk-input:focus {
    border-color: var(--accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(22,199,154,.2);
}


/* ============================================================
   13. WAGER RESULT PANEL  (wr-*)
   ============================================================ */

.wr-panel .panel-body { padding: 0; }
.wr-header { background-color: var(--c-primary); color: var(--c-text-invert); padding: 10px 15px; font-weight: bold; font-size: 14px; }
.wr-body   { padding: 10px 15px; }

.wr-col-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--c-border);
    font-size: 13px; color: var(--c-text-muted);
}
.wr-col-header .wr-col-amounts         { display: flex; gap: 30px; }
.wr-col-header .wr-col-amounts span    { font-weight: 600; color: var(--c-text-muted); }

.wr-sport-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-border); cursor: pointer; }
.wr-sport-row:hover { background-color: var(--c-bg-hover); }

.wr-sport-left   { display: flex; align-items: center; gap: 8px; }
.wr-sport-left i { color: var(--c-text-subtle); font-size: 13px; }
.wr-sport-title  { color: var(--c-selection); font-weight: 600; font-size: 13px; text-decoration: none; }
.wr-sport-title:hover { color: var(--c-selection); text-decoration: none; }

.wr-sport-amounts          { display: flex; gap: 30px; min-width: 100px; justify-content: flex-end; }
.wr-sport-amounts .wr-risk { color: var(--c-risk); font-weight: 600; }
.wr-sport-amounts .wr-win  { color: var(--c-win);  font-weight: 600; }

.wr-detail         { background: var(--c-bg-light); padding: 8px 15px; border-left: 3px solid var(--c-border-md); margin-bottom: 5px; }
.wr-detail-leg     { padding: 6px 0; border-bottom: 1px dashed var(--c-border); font-size: 12px; color: var(--c-text); }
.wr-detail-leg:last-child { border-bottom: none; }
.wr-detail-leg .leg-select { font-weight: 600; color: var(--c-selection); }
.wr-detail-leg .leg-odds   { color: var(--c-text); font-weight: normal; }
.wr-detail-leg .leg-vs     { color: var(--c-text-muted); margin-top: 2px; }
.wr-detail-leg .leg-sport  { color: var(--c-text-subtle); font-size: 11px; margin-top: 1px; }
.wr-btn-view { padding: 15px 0 5px; }


/* ============================================================
   14. COMMON COMPONENTS
   ============================================================ */

/* --- lgs (league group panels) --- */
.lgs, .profile-form {
    box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 2px 10px rgba(0,0,0,.08) !important;
}
.lgs > .lg-head, .profile-form > .head {
    display: flex; background-color: var(--c-primary); color: var(--c-text-invert);
    padding: 5px; border-radius: 5px 5px 0 0;
}
.lgs > .lg-head > span:first-child,
.profile-form > .head > span:first-child { flex: 1; text-transform: uppercase; color: var(--c-header-text); }
.lgs > .lg-head > span:last-child,
.profile-form > .head > span:last-child  { flex: 2; font-size: 11px; text-align: right; color: rgba(255,255,255,.7); }
.lgs > .lg-head.one > span:first-child   { flex: 1; text-transform: uppercase; color: var(--c-header-text); text-align: center; font-size: 15px; }
.lgs > .lg-head.one.lg-name > span:first-child { font-size: 12px; text-align: left; }
.lgs > .lg-head.one.lg-name > span:first-child > span { text-align: left; color: rgba(255,255,255,.8); }

.lgs > .lg-1 { margin: 0; padding: 0; }
.lgs > .lg-1 > li { box-shadow: 0 1px 3px rgba(0,0,0,.1) !important; }
.lgs .fa-check-circle { color: var(--c-win); }
.lgs > .lg-1 > li > .lg-group { background-color: rgba(226,232,240,.5); color: var(--c-text); }
.lgs li { list-style: none; }
.lgs .lg-group { display: flex; padding: 5px; align-items: center; border-bottom: 1px solid var(--c-border); }
.lgs .lg-group.active { color: var(--c-win); font-weight: bold; }
.lgs .lg-1 > li > .lg-group > span:first-child { width: 34px; text-align: center; font-size: 16px; color: var(--c-icon-gold); }
.lgs .lg-1 > li > .lg-group > span:last-child  { width: calc(100% - 34px); font-weight: 600; margin-left: 5px; }
.lgs > .lg-1 > li > .lg-2,
.lgs > .lg-1 > li > .lg-2 > li > .lg-3 { margin: 0; padding: 0; }
.lgs .lg-1 > li > .lg-2 > li > .lg-group > span:first-child,
.lgs .lg-1 > li > .lg-2 > li > .lg-3 > li > .lg-group > span:nth-child(2) { width: 16px; font-size: 20px; }
.lgs .lg-1 > li > .lg-2 > li > .lg-group > span:last-child,
.lgs .lg-1 > li > .lg-2 > li > .lg-3 > li > .lg-group > span:last-child  { width: calc(100% - 16px); margin-left: 13px; font-size: 14px; }
.lgs .lg-1 > li > .lg-2 > li > .lg-group > span:first-child,
.lgs .lg-1 > li > .lg-2 > li > .lg-group > span:last-child { padding-left: 10px; }
.lgs .lg-1 > li > .lg-2 > li > .lg-3 > li > .lg-group > span:first-child { width: 33px; margin-left: 8px; }
.lgs .lg-1 > li > .lg-2 > li > .lg-3 > li > .lg-group > span:nth-child(2) { margin-left: 6px; }

/* --- sel-games (wager review list) --- */
.sel-games ul { margin: 0; padding: 0; }
.sel-games ul li { display: flex; align-items: center; border-top: 1px solid var(--c-border); padding: 10px 5px; }
.sel-games ul > li > span { font-size: 13px; }
.sel-games ul > li > span > .btn { line-height: inherit; box-shadow: 0 2px 4px rgba(0,0,0,.1) !important; }
.sel-games ul > li > span:first-child { width: 22px; }
.sel-games ul > li > span:first-child > a        { color: var(--c-text-subtle); }
.sel-games ul > li > span:first-child > a:hover  { color: var(--c-risk); }
.sel-games ul > li > span:nth-child(2)            { width: calc(100% - 207px); color: var(--c-selection); }
.sel-games.accepted ul > li > span:nth-child(2)   { width: calc(100% - 185px); color: var(--c-selection); }
.sel-games.accepted ul > li > span.selection-info { color: var(--c-text); }
.sel-games ul > li > span:nth-child(3) { width: 100px; text-align: right; font-size: 13px; margin-right: 1px; }
.sel-games ul > li > span:nth-child(3) > span { font-size: 10px; line-height: 14px; vertical-align: text-top; font-weight: normal; }
.sel-games ul > li > span:nth-child(4),
.sel-games ul > li > span:last-child   { width: 55px; text-align: center; }
.sel-games ul > li:first-child > span:nth-child(4) { color: var(--c-risk); font-size: 14px; }
.sel-games ul > li.tip > span { font-size: 12px; color: var(--c-risk); width: 100%; text-align: left; }
.sel-games ul > li.btn-group  { display: flex; justify-content: space-between; align-items: center; }
.sel-games ul > li.btn-group > .btn { margin: 0 2px; text-transform: uppercase; }
.sel-games.accepted ul > li > span:first-child { display: none; }
.sel-games.accepted ul > li.text-center > .btn { margin: 0 auto; }
.sel-games ul li.collapse { border: none !important; padding-top: 0; }
.sel-games ul li span.selection-info { font-size: 12px; width: 100% !important; text-align: justify !important; }

/* --- his-item (history list rows) --- */
.his-item { margin: 0; padding: 0; }
.his-item li:first-child, .his-item li:last-child { font-size: 12px; background-color: var(--c-bg-stripe-even); padding: 5px; line-height: 1.5em; display: flex; }
.his-item li:last-child span { font-weight: bold; }
.his-item li:last-child > span:last-child { flex: 1; text-align: right; }
.his-item li:first-child > a { display: flex; align-content: center; }
.his-item li:first-child > a > span:first-child { font-size: 18px; color: var(--c-surface-dk); margin-right: 5px; }
.his-item li:first-child > a > span:last-child  { font-weight: 600; }
.his-item li:nth-child(n+2) { border-bottom: 1px solid var(--c-border); }
.his-item li:nth-child(n+2) > a { display: flex; justify-content: space-between; align-items: center; height: 36px; }
.his-item li:nth-child(n+2) > a > span { flex: 1; text-align: right; font-size: 13px; padding: 10px; height: 100%; }
.his-item li:nth-child(n+2) > a > span:nth-child(1) { flex: 1.3; text-align: left; display: flex; }
.his-item li:nth-child(n+2) > a > span:first-child  { font-size: 13px; color: var(--c-text); font-weight: 600; white-space: nowrap; overflow-x: hidden; flex: 5; }
.his-item li:nth-child(n+2) > a > span:first-child > span > span { font-weight: 700; color: var(--c-text); }
.his-item li:nth-child(n+2) > a > span:last-child   { font-weight: 700; font-size: 12px; }
.his-item li.footer { display: flex; justify-content: space-between; align-items: center; font-size: 13px; background-color: rgba(59,130,246,.12); }
.his-item li.footer > span { margin: 10px; }
.his-item li.footer > span > span { font-weight: 700; }
.his-item li.footer > span:last-child > span { color: var(--c-risk); }
.his-item li:nth-child(n+2) > div { padding: 0 10px; }
.his-item li:nth-child(n+2) > div > span { font-size: 12px; line-height: 1.5em; display: block; }
.his-item li:nth-child(n+2) > div > ul > li { background-color: transparent; display: flex; align-items: center; font-size: 12px; color: var(--c-text-muted); border: 0; line-height: 1em; padding: 3px; }
.his-item li:nth-child(n+2) > div > ul > li > span:first-child { width: 60px; }
.his-item li:nth-child(n+2) > div > ul > li > span:last-child  { width: calc(100% - 60px); }
.his-item .selection-info { font-size: 11px; }

/* Transaction status */
.tran-draw              { color: var(--c-draw); }
.tran-win, .tran-wh     { color: var(--c-win); }
.tran-lose, .tran-refund,
.tran-lh, .tran-waiting-rejected { color: var(--c-risk); }
.tran-pending, .tran-waiting     { color: var(--c-text); }

/* --- winloss-day --- */
.winloss-day li { border-bottom: 1px solid var(--c-border); display: flex; align-items: center; height: 38px; padding: 5px 8px 5px 5px; font-size: 14px; }
.winloss-day li.active { background-color: rgba(219,234,254,.4); }
.winloss-day li:last-child > span:nth-child(2),
.winloss-day li:last-child > span:nth-child(3) { font-weight: 600; }
.winloss-day li > span:nth-child(1) { font-weight: 600; width: 100px; }
.winloss-day li > span:nth-child(2) { width: calc(100% - 150px); }
.winloss-day li > span:nth-child(3),
.winloss-day li > a    { width: 50px; text-align: right; }
.winloss-day li .negative { color: var(--c-risk); font-weight: 600; }
.winloss-day li .positive { color: var(--c-win); font-weight: 600; }

/* --- game-item --- */
.game-item li:first-child { font-size: 12px; background-color: var(--c-bg-stripe-even); padding: 2px 5px; line-height: 1.5em; }
.game-item li:first-child > a > span:first-child { font-size: 18px; color: var(--c-surface-dk); }
.game-item li:first-child > a > span:last-child > span:first-child { color: var(--c-surface-dk); font-size: 13px; font-weight: 700; }
.game-item li:nth-child(n+2) { border-bottom: 1px solid var(--c-border); }
.game-item li:nth-child(n+2) > a { display: flex; justify-content: space-between; align-items: center; height: 52px; }
.game-item li:nth-child(n+2) > a > span { flex: 1; text-align: center; font-size: 12px; padding: 10px 3px; height: 100%; }
.game-item li:nth-child(n+2) > a > span:nth-child(1) { flex: 1.3; text-align: left; display: flex; }
.game-item li:nth-child(n+2) > a > span:nth-child(1) > span:first-child { margin-right: 2px; }
.game-item li:nth-child(n+2) > a > span:nth-child(2) { background-color: rgba(219,234,254,.4); }
.game-item span.lnk-game-value.bt-moneyline { background: rgba(219,234,254,.4); }
.game-item li:nth-child(n+2) > a > span:first-child > span:last-child { font-weight: 700; }
.game-item li:nth-child(n+2) > a > span:nth-child(n+2) > span:last-child { font-size: 11px; vertical-align: text-top; line-height: 18px; color: var(--c-text-muted); font-weight: 500; }
.game-item li:nth-child(n+2) > a span.lnk-game-value > span:first-child { font-weight: 700; color: var(--c-primary); font-size: 15px; }
.game-item .hasbet { background: var(--c-hasbet) !important; }

/* --- Parlay helpers --- */
.sel-games-parlay { margin: 5px; }
.sel-games-parlay ul { margin: 0; padding: 0; }
.sel-games-parlay ul li { display: flex; align-items: center; border-top: 1px solid var(--c-border); padding: 10px 5px; }
.sel-games-parlay ul li.collapse { display: none; }
.sel-games-parlay ul li.collapse.in { display: block; visibility: visible; }
.wager_row_parlay ul > li > span { font-size: 12px; font-weight: 600; }
.wager_row_parlay .trash { width: 22px; }
.wager_row_parlay .trash a { color: var(--c-text-subtle); }
.wager_row_parlay .selection { width: calc(100% - 122px); color: var(--c-selection); }
.wager_row_parlay .text-odds { width: 100px; text-align: right; }

/* --- Selection title helpers --- */
.selection-title { margin-right: 28px; }
.pull-right.selection-title span { width: 150px; color: var(--c-risk); display: block; text-align: center; float: left; font-size: 15px; font-weight: bold; }
.selected-item .pull-right span  { width: 150px; display: block; text-align: center; float: left; font-size: 15px; font-weight: bold; }

/* --- Misc --- */
.wrapper  { margin: 0 auto; padding: 0; }
.btodd    { width: 100%; text-align: right; font-weight: bold; }
.md-button {
    display: inline-block; position: relative; cursor: pointer;
    min-height: 36px; min-width: 88px; line-height: 36px;
    vertical-align: middle; align-items: center; text-align: center;
    border-radius: 3px; box-sizing: border-box;
    user-select: none; outline: none; border: 0;
    padding: 0 6px; margin: 6px 8px;
    background: 0 0; color: currentColor; white-space: nowrap;
    text-transform: uppercase; font-weight: 500; font-size: 14px;
    font-family: inherit; text-decoration: none; overflow: hidden;
    transition: box-shadow .4s cubic-bezier(.25,.8,.25,1), background-color .4s cubic-bezier(.25,.8,.25,1);
}
.md-button.md-raised:not([disabled]),
.md-button:not([disabled]).md-fab.md-focused,
.md-button:not([disabled]).md-raised.md-focused { box-shadow: 0 2px 5px 0 rgba(0,0,0,.2); }


/* ============================================================
   15. SPORT TEAM LOGO SPRITES
   ============================================================ */

/* NFL */
.nfl-atlanta-falcons      { background: url('/content/assets/images/teams-nfl-25.png') no-repeat 0 -1px; width:25px; height:24px; }
.nfl-buffalo-bills        { background: url('/content/assets/images/teams-nfl-25.png') no-repeat 0 -55px; width:25px; height:17px; }
.nfl-chicago-bears        { background: url('/content/assets/images/teams-nfl-25.png') no-repeat 0 -104px; width:25px; height:17px; }
.nfl-cincinnati-bengals   { background: url('/content/assets/images/teams-nfl-25.png') no-repeat 0 -154px; width:25px; height:18px; }
.nfl-cleveland-browns     { background: url('/content/assets/images/teams-nfl-25.png') no-repeat -1px -203px; width:23px; height:19px; }
.nfl-dallas-cowboys       { background: url('/content/assets/images/teams-nfl-25.png') no-repeat -1px -251px; width:24px; height:24px; }
.nfl-denver-broncos       { background: url('/content/assets/images/teams-nfl-25.png') no-repeat 0 -302px; width:25px; height:19px; }
.nfl-detroit-lions        { background: url('/content/assets/images/teams-nfl-25.png') no-repeat 0 -353px; width:25px; height:19px; }
.nfl-green-bay-packers    { background: url('/content/assets/images/teams-nfl-25.png') no-repeat 0 -405px; width:25px; height:17px; }
.nfl-tennessee-titans     { background: url('/content/assets/images/teams-nfl-25.png') no-repeat 0 -454px; width:25px; height:18px; }
.nfl-indianapolis-colts   { background: url('/content/assets/images/teams-nfl-25.png') no-repeat -1px -501px; width:23px; height:24px; }
.nfl-kansas-city-chiefs   { background: url('/content/assets/images/teams-nfl-25.png') no-repeat -1px -555px; width:24px; height:16px; }
.nfl-las-vegas-raiders    { background: url('/content/assets/images/teams-nfl-25.png') no-repeat -1px -600px; width:23px; height:24px; }
.nfl-los-angeles-rams     { background: url('/content/assets/images/teams-nfl-25.png') no-repeat 0 -655px; width:25px; height:17px; }
.nfl-miami-dolphins       { background: url('/content/assets/images/teams-nfl-25.png') no-repeat -1px -703px; width:24px; height:19px; }
.nfl-minnesota-vikings    { background: url('/content/assets/images/teams-nfl-25.png') no-repeat -2px -751px; width:20px; height:24px; }
.nfl-new-england-patriots { background: url('/content/assets/images/teams-nfl-25.png') no-repeat -1px -807px; width:24px; height:12px; }
.nfl-new-orleans-saints   { background: url('/content/assets/images/teams-nfl-25.png') no-repeat -3px -851px; width:19px; height:23px; }
.nfl-new-york-giants      { background: url('/content/assets/images/teams-nfl-25.png') no-repeat -1px -904px; width:24px; height:19px; }
.nfl-new-york-jets        { background: url('/content/assets/images/teams-nfl-25.png') no-repeat -1px -956px; width:24px; height:13px; }
.nfl-philadelphia-eagles  { background: url('/content/assets/images/teams-nfl-25.png') no-repeat 0 -1004px; width:25px; height:18px; }
.nfl-arizona-cardinals    { background: url('/content/assets/images/teams-nfl-25.png') no-repeat 0 -1051px; width:25px; height:23px; }
.nfl-pittsburgh-steelers  { background: url('/content/assets/images/teams-nfl-25.png') no-repeat -1px -1101px; width:24px; height:24px; }
.nfl-los-angeles-chargers { background: url('/content/assets/images/teams-nfl-25.png') no-repeat 0 -1156px; width:25px; height:14px; }
.nfl-san-francisco-49ers  { background: url('/content/assets/images/teams-nfl-25.png') no-repeat 0 -1206px; width:25px; height:15px; }
.nfl-seattle-seahawks     { background: url('/content/assets/images/teams-nfl-25.png') no-repeat 0 -1258px; width:25px; height:11px; }
.nfl-tampa-bay-buccaneers { background: url('/content/assets/images/teams-nfl-25.png') no-repeat -1px -1301px; width:24px; height:21px; }
.nfl-washington-redskins  { background: url('/content/assets/images/teams-nfl-25.png') no-repeat -2px -1352px; width:22px; height:23px; }
.nfl-carolina-panthers    { background: url('/content/assets/images/teams-nfl-25.png') no-repeat 0 -1406px; width:25px; height:14px; }
.nfl-jacksonville-jaguars { background: url('/content/assets/images/teams-nfl-25.png') no-repeat 0 -1454px; width:25px; height:19px; }
.nfl-baltimore-ravens     { background: url('/content/assets/images/teams-nfl-25.png') no-repeat 0 -1607px; width:24px; height:12px; }
.nfl-houston-texans       { background: url('/content/assets/images/teams-nfl-25.png') no-repeat 0 -1652px; width:24px; height:23px; }

/* NBA */
.nba-atlanta-hawks         { background: url('/content/assets/images/teams-nba-25.png') no-repeat -3px -4px; width:20px; height:20px; }
.nba-boston-celtics        { background: url('/content/assets/images/teams-nba-25.png') no-repeat -2px -52px; width:22px; height:22px; }
.nba-new-orleans-pelicans  { background: url('/content/assets/images/teams-nba-25.png') no-repeat -2px -101px; width:21px; height:24px; }
.nba-chicago-bulls         { background: url('/content/assets/images/teams-nba-25.png') no-repeat 0 -152px; width:25px; height:23px; }
.nba-cleveland-cavaliers   { background: url('/content/assets/images/teams-nba-25.png') no-repeat -1px -204px; width:24px; height:18px; }
.nba-dallas-mavericks      { background: url('/content/assets/images/teams-nba-25.png') no-repeat -2px -252px; width:21px; height:21px; }
.nba-denver-nuggets        { background: url('/content/assets/images/teams-nba-25.png') no-repeat -3px -303px; width:20px; height:20px; }
.nba-detroit-pistons       { background: url('/content/assets/images/teams-nba-25.png') no-repeat -3px -352px; width:16px; height:21px; }
.nba-golden-state-warriors { background: url('/content/assets/images/teams-nba-25.png') no-repeat -3px -403px; width:20px; height:20px; }
.nba-houston-rockets       { background: url('/content/assets/images/teams-nba-25.png') no-repeat -3px -450px; width:19px; height:25px; }
.nba-indiana-pacers        { background: url('/content/assets/images/teams-nba-25.png') no-repeat -1px -502px; width:23px; height:21px; }
.nba-los-angeles-clippers  { background: url('/content/assets/images/teams-nba-25.png') no-repeat -5px -552px; width:16px; height:22px; }
.nba-los-angeles-lakers    { background: url('/content/assets/images/teams-nba-25.png') no-repeat -2px -604px; width:21px; height:17px; }
.nba-miami-heat            { background: url('/content/assets/images/teams-nba-25.png') no-repeat -2px -651px; width:22px; height:23px; }
.nba-milwaukee-bucks       { background: url('/content/assets/images/teams-nba-25.png') no-repeat -4px -702px; width:17px; height:22px; }
.nba-timberwolves          { background: url('/content/assets/images/teams-nba-25.png') no-repeat -2px -752px; width:21px; height:22px; }
.nba-brooklyn-nets         { background: url('/content/assets/images/teams-nba-25.png') no-repeat -2px -802px; width:22px; height:22px; }
.nba-new-york-knicks       { background: url('/content/assets/images/teams-nba-25.png') no-repeat -2px -852px; width:22px; height:22px; }
.nba-orlando-magic         { background: url('/content/assets/images/teams-nba-25.png') no-repeat 0 -906px; width:25px; height:14px; }
.nba-philadelphia-76ers    { background: url('/content/assets/images/teams-nba-25.png') no-repeat -1px -951px; width:24px; height:24px; }
.nba-phoenix-suns          { background: url('/content/assets/images/teams-nba-25.png') no-repeat -1px -1001px; width:24px; height:24px; }
.nba-portland-trail-blazers{ background: url('/content/assets/images/teams-nba-25.png') no-repeat -3px -1052px; width:19px; height:21px; }
.nba-sacramento-kings      { background: url('/content/assets/images/teams-nba-25.png') no-repeat -2px -1106px; width:22px; height:15px; }
.nba-san-antonio-spurs     { background: url('/content/assets/images/teams-nba-25.png') no-repeat -3px -1152px; width:19px; height:23px; }
.nba-oklahoma-city-thunder { background: url('/content/assets/images/teams-nba-25.png') no-repeat 0 -1206px; width:25px; height:14px; }
.nba-utah-jazz             { background: url('/content/assets/images/teams-nba-25.png') no-repeat 0 -1255px; width:25px; height:17px; }
.nba-washington-wizards    { background: url('/content/assets/images/teams-nba-25.png') no-repeat -2px -1302px; width:22px; height:22px; }
.nba-toronto-raptors       { background: url('/content/assets/images/teams-nba-25.png') no-repeat -2px -1353px; width:22px; height:22px; }
.nba-memphis-grizzlies     { background: url('/content/assets/images/teams-nba-25.png') no-repeat 0 -1401px; width:25px; height:24px; }
.nba-charlotte-hornets     { background: url('/content/assets/images/teams-nba-25.png') no-repeat -2px -1452px; width:22px; height:22px; }

/* MLB */
.mlb-baltimore-orioles    { background: url('/content/assets/images/teams-mlb-25.png') no-repeat 0 -1px; width:25px; height:24px; }
.mlb-boston-red-sox       { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -4px -50px; width:19px; height:25px; }
.mlb-los-angeles-angels   { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -4px -101px; width:18px; height:24px; }
.mlb-chicago-white-sox    { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -3px -150px; width:18px; height:25px; }
.mlb-indians              { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -4px -201px; width:18px; height:24px; }
.mlb-detroit-tigers       { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -3px -251px; width:20px; height:24px; }
.mlb-kansas-city-royals   { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -2px -301px; width:23px; height:23px; }
.mlb-milwaukee-brewers    { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -2px -351px; width:21px; height:24px; }
.mlb-minnesota-twins      { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -2px -403px; width:21px; height:21px; }
.mlb-new-york-yankees     { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -2px -450px; width:23px; height:24px; }
.mlb-oakland-athletics    { background: url('/content/assets/images/teams-mlb-25.png') no-repeat 0 -502px; width:25px; height:21px; }
.mlb-seattle-mariners     { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -5px -551px; width:15px; height:24px; }
.mlb-texas-rangers        { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -2px -601px; width:21px; height:24px; }
.mlb-toronto-blue-jays    { background: url('/content/assets/images/teams-mlb-25.png') no-repeat 0 -652px; width:25px; height:22px; }
.mlb-atlanta-braves       { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -3px -704px; width:18px; height:17px; }
.mlb-chicago-cubs,
.mlb-gm1-chicago-cubs     { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -1px -751px; width:23px; height:24px; }
.mlb-cincinnati-reds      { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -2px -805px; width:22px; height:16px; }
.mlb-houston-astros       { background: url('/content/assets/images/teams-mlb-25.png') no-repeat 0 -850px; width:25px; height:25px; }
.mlb-los-angeles-dodgers  { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -3px -900px; width:20px; height:25px; }
.mlb-washington-nationals { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -1px -951px; width:24px; height:24px; }
.mlb-new-york-mets        { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -4px -1000px; width:19px; height:24px; }
.mlb-philadelphia-phillies{ background: url('/content/assets/images/teams-mlb-25.png') no-repeat -3px -1050px; width:19px; height:25px; }
.mlb-pittsburgh-pirates   { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -4px -1101px; width:19px; height:25px; }
.mlb-gm1-stl-cardinals,
.mlb-st-Louis-cardinals   { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -3px -1151px; width:20px; height:24px; }
.mlb-san-diego-padres     { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -3px -1201px; width:19px; height:24px; }
.mlb-san-francisco-giants { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -4px -1251px; width:18px; height:24px; }
.mlb-colorado-rockies     { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -3px -1301px; width:21px; height:24px; }
.mlb-miami-marlins        { background: url('/content/assets/images/teams-mlb-25.png') no-repeat 0 -1350px; width:25px; height:23px; }
.mlb-arizona-diamondbacks { background: url('/content/assets/images/teams-mlb-25.png') no-repeat 0 -1402px; width:25px; height:21px; }
.mlb-tampa-bays-rays      { background: url('/content/assets/images/teams-mlb-25.png') no-repeat -1px -1452px; width:24px; height:22px; }

/* NHL */
.nhl-boston-bruins        { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 0; width:25px; height:25px; }
.nhl-buffalo-sabres       { background: url('/content/assets/images/teams-nhl-25.png') no-repeat -1px -51px; width:24px; height:24px; }
.nhl-calgary-flames       { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -102px; width:25px; height:22px; }
.nhl-chicago-blackhawks   { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -152px; width:25px; height:22px; }
.nhl-detroit-red-wings    { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -203px; width:25px; height:19px; }
.nhl-edmonton-oilers      { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -251px; width:25px; height:25px; }
.nhl-carolina-hurricanes  { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -305px; width:25px; height:15px; }
.nhl-los-angeles-kings    { background: url('/content/assets/images/teams-nhl-25.png') no-repeat -3px -351px; width:20px; height:24px; }
.nhl-dallas-stars         { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -402px; width:25px; height:21px; }
.nhl-montreal-canadiens   { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -454px; width:25px; height:17px; }
.nhl-new-jersey-devils    { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -500px; width:25px; height:26px; }
.nhl-new-york-islanders   { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -551px; width:25px; height:24px; }
.nhl-new-york-rangers     { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -601px; width:25px; height:25px; }
.nhl-ottawa-senators      { background: url('/content/assets/images/teams-nhl-25.png') no-repeat -2px -651px; width:20px; height:24px; }
.nhl-philadelphia-flyers  { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -704px; width:25px; height:18px; }
.nhl-pittsburgh-penguins  { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -751px; width:25px; height:24px; }
.nhl-colorado-avalanche   { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -802px; width:25px; height:21px; }
.nhl-san-jose-sharks      { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -852px; width:25px; height:22px; }
.nhl-st-louis-blues       { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -903px; width:25px; height:20px; }
.nhl-tampa-bay-lightning  { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -951px; width:25px; height:24px; }
.nhl-toronto-maple-leafs  { background: url('/content/assets/images/teams-nhl-25.png') no-repeat -1px -1000px; width:24px; height:25px; }
.nhl-vancouver-canucks    { background: url('/content/assets/images/teams-nhl-25.png') no-repeat -2px -1052px; width:22px; height:21px; }
.nhl-washington-capitals  { background: url('/content/assets/images/teams-nhl-25.png') no-repeat -1px -1104px; width:23px; height:18px; }
.nhl-arizona-coyotes      { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -1150px; width:25px; height:26px; }
.nhl-anaheim-ducks        { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -1206px; width:25px; height:14px; }
.nhl-florida-panthers     { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -1250px; width:25px; height:25px; }
.nhl-nashville-predators  { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -1306px; width:25px; height:15px; }
.nhl-winnipeg-jets        { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -1350px; width:25px; height:25px; }
.nhl-columbus-blue-jackets{ background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -1402px; width:25px; height:22px; }
.nhl-minnesota-wild       { background: url('/content/assets/images/teams-nhl-25.png') no-repeat 0 -1455px; width:25px; height:16px; }


/* ============================================================
   16. RESPONSIVE / MEDIA QUERIES
   ============================================================ */

/* ── Tablet sidebar height fix (covers iPad mini 6 at 744px and all larger tablets) ── */
@media (min-width: 600px) and (max-width: 1024px) {
    #hoe-left-panel {
        height: auto !important;
        min-height: 0 !important;  /* override hoe.css min-height: 100% which stretches sidebar */
        bottom: auto !important;
    }
    #hoeapp-container {
        padding-bottom: calc(46px + env(safe-area-inset-bottom));
        box-sizing: border-box;
    }
    /* hoe.css hides site name when hoe-minimized-lpanel is on header — restore it for tablets */
    #hoe-header.hoe-minimized-lpanel > .hoe-left-header {
        width: 180px !important;
        min-width: 180px !important;
    }
    #hoe-header.hoe-minimized-lpanel > .hoe-left-header > a > span {
        display: inline !important;
    }
}

/* ── iPad / full-size tablet: keep full sidebar width and margins ── */
@media (min-width: 768px) and (max-width: 1024px) {
    #hoe-left-panel { width: 180px !important; }
    #hoeapp-container.hoe-minimized-lpanel #main-content { margin-left: 180px !important; }
    #hoeapp-container.hoe-minimized-lpanel #hoe-left-panel { display: block !important; }
    #hoeapp-container.hoe-minimized-lpanel .panel-list .menu-text { display: inline !important; }
    #hoeapp-container.hoe-minimized-lpanel .panel-list li > a { padding: 10px 8px; }
    .hoe-minimized-lpanel #main-content { margin-left: 180px !important; }
}

@media (max-width: 768px) {
    /* Let #hoeapp-wrapper keep min-height:100vh to fill viewport bg correctly.
       Override only main-content (setHeight guard now <=768 so JS won't override). */
    #main-content { min-height: auto !important; }
    html, body    { height: auto !important; }
    .weekly-history  { display: none; }
    .section--bot.mb { display: block; }
    .section--bot.mb .tb-row { display: flex; flex-direction: column; }
    .section--bot.mb .tb-col {
        display: flex; align-items: center;
        flex: 0 0 100%; width: 100%;
        padding: 7px 10px; border-bottom: 1px solid var(--c-border);
        font-size: 13px; height: 36px;
    }
    .section--bot.mb .tb-col:last-child  { border-bottom: none; background-color: var(--c-bg-light); font-weight: 600; }
    .section--bot.mb .tb-col span:nth-child(1) { flex: 0 0 55px; color: var(--c-text-subtle); font-size: 12px; }
    .section--bot.mb .tb-col span:nth-child(2) { flex: 1; font-weight: 600; font-size: 13px; color: var(--c-text); }
    .section--bot.mb .tb-col span:nth-child(3) { flex: 0 0 80px; text-align: right; font-weight: 700; font-size: 13px; }
}

@media (max-width: 767px) {
    .sel-games ul    { margin-left: 0; padding-left: 0; }
    .sel-games ul li { margin-left: 0; padding-left: 0; }

    /* Wager form: 2-row grid */
    .wager-header {
        display: grid;
        grid-template-areas: "remove selection selection selection" ". odds risk win";
        grid-template-columns: 30px 1.5fr 1fr 1fr;
        gap: 8px; padding: 10px;
        border-bottom: 1px solid var(--c-border); background: var(--c-bg-light);
    }
    .wager-header .wager-col-remove    { grid-area: remove; visibility: hidden; }
    .wager-header .wager-col-selection { grid-area: selection; font-size: 10px; color: var(--c-text-muted); }
    .wager-header .wager-col-odds      { grid-area: odds; font-size: 10px; color: var(--c-text-muted); text-align: left; padding-left: 0; }
    .wager-header .wager-col-risk      { grid-area: risk; font-size: 10px; color: var(--c-text-muted); text-align: right; }
    .wager-header .wager-col-win       { grid-area: win; font-size: 10px; color: var(--c-text-muted); text-align: right; }

    .wager-row {
        display: grid;
        grid-template-areas: "remove selection selection selection" ". odds risk win";
        grid-template-columns: 30px 1.5fr 1fr 1fr;
        gap: 8px; padding: 0 10px;
    }
    .wager-col-remove    { grid-area: remove; align-self: center; padding-top: 0; }
    .wager-col-selection { grid-area: selection; white-space: normal; padding: 0; }
    .wager-col-odds      { grid-area: odds; width: 100%; padding: 0; display: block; }
    .wager-col-risk      { grid-area: risk; width: 100%; padding: 0; display: block; position: relative; }
    .wager-col-win       { grid-area: win; width: 100%; padding: 0; display: block; position: relative; }

    .wager-col-odds::before,
    .wager-col-risk::before,
    .wager-col-win::before { display: none; }

    .wager-input-sm {
        width: 100% !important; height: 44px !important;
        padding-top: 6px !important; font-size: 13px !important; font-weight: 600 !important;
    }
    .wager-odds-display { width: 100% !important; height: 44px; line-height: 32px; text-align: left; }
    .wager-info-collapse { margin: 5px 0 0; }
}


/* ================================================================
   LIGHT THEME  :root[data-theme="light"]
   All shared selectors auto-adapt via the variable override.
   Rules below only target components that use hardcoded dark values.
   ================================================================ */

:root[data-theme="light"] {

    /* ── Semantic tokens (brief spec) ── */
    --bg-base:        #F4F7FB;
    --bg-surface:     #FFFFFF;
    --bg-surface-2:   #E9EFF6;
    --border:         #DDE5EE;
    --primary:        #1E63D0;
    --primary-hover:  #1A4FA0;
    --header-band:    #1E63D0;   /* slightly brighter for light bg contrast */
    --accent:         #0E9E76;
    --accent-dim:     rgba(14,158,118,.12);
    --warning:        #E8870B;
    --success:        #16A34A;
    --danger:         #DC2626;
    --text-primary:   #0F1E36;
    --text-secondary: #64748B;
    --text-on-primary: #FFFFFF;
    --text-on-accent:  #FFFFFF;
    --text-on-success: #052E16;
    --text-on-warning: #451A03;

    /* ── Alias map (light overrides) ── */
    --c-primary:        #1E63D0;
    --c-primary-dk:     #1A4FA0;
    --c-primary-lt:     #3B82F6;
    --c-surface-dk:     #1E3A8A;
    --c-surface-md:     #E9EFF6;
    --c-risk:           #DC2626;
    --c-win:            #16A34A;
    --c-selection:      #0E9E76;
    --c-positive:       #16A34A;
    --c-negative:       #DC2626;
    --c-draw:           #64748B;
    --c-text:           #0F1E36;
    --c-text-label:     #1E63D0;
    --c-text-muted:     #64748B;
    --c-text-subtle:    #94A3B8;
    --c-text-invert:    #FFFFFF;
    --c-page:           #F4F7FB;
    --c-bg:             #FFFFFF;
    --c-bg-light:       #F8FAFC;
    --c-bg-hover:       #EBF2FF;
    --c-bg-alt:         #E9EFF6;
    --c-bg-stripe-even: #EEF2FF;
    --c-row-team:       #E0EBF8;   /* teamsBox — blue-tinted, deeper than before */
    --c-row-label:      #D6E3F4;
    --c-row-odds:       #FFFFFF;
    --c-border:         #C8D5E5;   /* slightly darker → card edges more visible */
    --c-border-md:      #A8BACE;
    --c-border-focus:   #1E63D0;
    --c-icon-gold:      #E8870B;
    --c-header-text:    #FFFFFF;
    --c-separator:      #0E9E76;
    --c-hasbet:         #DBEAFE;
    --c-login-bg:       #F4F7FB;
    --c-login-form-bg:  #FFFFFF;
    --c-login-form-surface: #FFFFFF;
    --shadow-card:      0 2px 6px rgba(15,30,54,.10), 0 1px 3px rgba(15,30,54,.07);
    --shadow-card-md:   0 6px 18px rgba(15,30,54,.14), 0 2px 6px rgba(15,30,54,.08);

    /* Alternating rows */
    --c-row-alt-a:      #FFFFFF;
    --c-row-alt-b:      #F6F9FD;   /* subtle blue tint thay vì gray */

    /* Section label */
    --c-label-bg:       #D6E3F4;   /* deeper blue */
    --c-label-text:     #2D4A7A;   /* dark blue — sắc nét, không phải gray */

    /* Sidebar navigation */
    --nav-bg:            #F8FAFC;
    --nav-active-bg:     #EBF2FF;
    --nav-active-accent: #1E63D0;
    --nav-hover-bg:      #EBF2FF;
    --nav-item-border:   #DDE5EE;
    --nav-icon:          #94A3B8;
}

/* ── Light theme component overrides ─────────────────────────── */

/* Page / wrapper backgrounds */
:root[data-theme="light"] body,
:root[data-theme="light"] #hoeapp-wrapper,
:root[data-theme="light"] #hoeapp-container,
:root[data-theme="light"] #pageSport { background-color: #F4F7FB; }

/* Header — logo area uses primary blue in light theme */
:root[data-theme="light"] #hoe-header[hoe-color-type="logo-bg8"] .hoe-left-header {
    background: #1E63D0 !important;
}
:root[data-theme="light"] #hoe-header[hoe-color-type="logo-bg8"] .hoe-left-header span,
:root[data-theme="light"] #hoe-header[hoe-color-type="logo-bg8"] .hoe-left-header a span {
    color: #FFFFFF !important;
}
:root[data-theme="light"] #hoe-header[hoe-color-type="logo-bg8"] .hoe-left-header a:hover {
    color: #E9EFF6 !important;
}

/* Right header bar */
:root[data-theme="light"] .hoe-right-header[hoe-color-type="header-bg7"] {
    background: #FFFFFF !important;
    border-bottom: 1px solid #DDE5EE !important;
}

/* Sidebar — nav vars handle colors; only box-shadow override needed */
:root[data-theme="light"] #hoe-left-panel {
    box-shadow: 1px 0 4px rgba(15,30,54,.06);
}

/* Form controls */
:root[data-theme="light"] .form-control {
    background-color: #FFFFFF;
    border-color: #DDE5EE;
    color: #0F1E36;
}
:root[data-theme="light"] .form-control:focus {
    background-color: #FFFFFF;
    border-color: #1E63D0;
    box-shadow: 0 0 0 3px rgba(30,99,208,.15);
}

/* Dropdown */
:root[data-theme="light"] .dropdown-menu {
    background-color: #FFFFFF;
    border: 1px solid #DDE5EE;
    box-shadow: 0 4px 12px rgba(15,30,54,.10);
}
:root[data-theme="light"] .dropdown-menu > li > a { color: #0F1E36; }
:root[data-theme="light"] .dropdown-menu > li > a:hover,
:root[data-theme="light"] .dropdown-menu > li > a:focus { background-color: #E9EFF6; color: #0F1E36; }

/* Bootstrap panels */
:root[data-theme="light"] .panel          { border-color: #DDE5EE; box-shadow: 0 1px 3px rgba(15,30,54,.06); }
:root[data-theme="light"] .panel-body    { background-color: #FFFFFF; }
:root[data-theme="light"] .panel-collapse { background-color: #FFFFFF; }
/* .panel.theme-panel and its .panel-body use var(--bg-base)=#F4F7FB via shared rule */

/* Login form — restore light gradient */
:root[data-theme="light"] .body_Login         { background-color: #1E3A8A; background-image: none; }
:root[data-theme="light"] .bgLoginform {
    background: linear-gradient(to bottom, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%) !important;
    filter: none !important;
    border: 1px solid #DDE5EE !important;
    box-shadow: 0 6px 20px rgba(15,30,54,.15) !important;
    color: #0F1E36 !important;
}
:root[data-theme="light"] .bgLoginform label,
:root[data-theme="light"] .bgLoginform .control-label { color: #64748B; }

/* Alert variants — standard Bootstrap look on light bg */
:root[data-theme="light"] .alert-warning { background-color: #FEF3C7; border-color: #FDE68A; color: #92400E; }
:root[data-theme="light"] .alert-danger  { background-color: #FEE2E2; border-color: #FECACA; color: #991B1B; }
:root[data-theme="light"] .alert-info    { background-color: #DBEAFE; border-color: #BFDBFE; color: #1E40AF; }
:root[data-theme="light"] .alert-success { background-color: #DCFCE7; border-color: #BBF7D0; color: #166534; }

/* Wager inputs */
:root[data-theme="light"] .wager-input-sm {
    background-color: #FFFFFF !important;
    border-color: #DDE5EE !important;
    color: #0F1E36 !important;
}
:root[data-theme="light"] .wager-input-sm:focus {
    border-color: #1E63D0 !important;
    box-shadow: 0 0 0 3px rgba(30,99,208,.15) !important;
}
:root[data-theme="light"] .wager-odds-display {
    background: #F4F7FB;
    border-color: #DDE5EE;
    color: #0F1E36;
}
:root[data-theme="light"] .wager-item:hover {
    box-shadow: inset 4px 0 0 #1E63D0;
    background-color: #EBF2FF !important;
}

/* lgs header — keep accent as header text on light */
:root[data-theme="light"] .lgs > .lg-head,
:root[data-theme="light"] .profile-form > .head { background-color: #1E63D0; }
:root[data-theme="light"] .lgs > .lg-head > span:first-child { color: #FCD34D; }

/* Wager result / open bet card backgrounds */
:root[data-theme="light"] .section-openbet,
:root[data-theme="light"] .ez-body,
:root[data-theme="light"] .section-result.section-history {
    background-color: #FFFFFF;
    border-color: #DDE5EE;
    box-shadow: 0 1px 3px rgba(15,30,54,.06);
}

/* Win/risk column contrast check (text-on-colored-bg) */
:root[data-theme="light"] .col-risk,
:root[data-theme="light"] .wr-risk { color: #DC2626 !important; }
:root[data-theme="light"] .col-win,
:root[data-theme="light"] .wr-win  { color: #16A34A !important; }

/* teamsOddsAmountB — green tint, legible on white */
:root[data-theme="light"] .teamsOddsAmountB { background-color: #DCFCE7; }

/* Modal */
:root[data-theme="light"] .modal-message .modal-content {
    background-color: #FFFFFF;
    border: 1px solid #DDE5EE;
    color: #0F1E36;
}
:root[data-theme="light"] .modal-message .modal-header {
    background-color: #F4F7FB;
    border-bottom-color: #DDE5EE;
    color: #0F1E36;
}

/* gameOddsBox inner overlays — lighter in light theme */
:root[data-theme="light"] .gameOddsBox { border-color: #DDE5EE; }
:root[data-theme="light"] .gameOddsBox:nth-child(odd)  .teamsBox { background-color: rgba(0,0,0,.03); }
:root[data-theme="light"] .gameOddsBox:nth-child(even) .teamsBox { background-color: rgba(0,0,0,.05); }
:root[data-theme="light"] .gameTime,
:root[data-theme="light"] .gameDate {
    background-color: #E8F0FB;
    color: #1A3A6E;
    font-weight: 700;
    border-bottom-color: #C0D0E8;
}

/* History striped table */
:root[data-theme="light"] .his-item li:first-child,
:root[data-theme="light"] .his-item li:last-child { background-color: #EBF2FF; }
:root[data-theme="light"] .his-item li.footer { background-color: rgba(30,99,208,.08); }

/* ── Theme switch — 3-button group ───────────────────────────── */
.theme-switch {
    display: inline-flex;
    align-items: center;
    background: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.theme-switch button {
    display: flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.theme-switch button:hover:not(.is-active) {
    background: var(--bg-surface-2);
    color: var(--text-primary);
}

/* Active state — --primary bg, white text (--text-on-primary = #fff across all themes) */
.theme-switch button.is-active {
    background: var(--primary);
    color: var(--text-on-primary);
    font-weight: 500;
}

/* ================================================================
   FIRE THEME  :root[data-theme="fire"]
   ================================================================ */

:root[data-theme="fire"] {

    /* ── Semantic tokens ── */
    --bg-base:        #0A0A0C;
    --bg-surface:     #161214;
    --bg-surface-2:   #241A1A;
    --border:         #3A2A26;
    --primary:        #E11D2A;
    --primary-hover:  #FF2E3C;
    --header-band:    #E11D2A;
    --accent:         #FF6B1A;
    --accent-dim:     rgba(255,107,26,.15);
    --warning:        #FFB020;
    --success:        #16A34A;
    --danger:         #B91C1C;
    --text-primary:   #F5E6D8;
    --text-secondary: #A1887A;
    --text-on-primary: #FFFFFF;
    --text-on-accent:  #1A0E06;
    --text-on-success: #052E16;
    --text-on-warning: #1A0E06;

    /* ── Alias map ── */
    --c-primary:        #E11D2A;
    --c-primary-dk:     #B91C1C;
    --c-primary-lt:     #FF2E3C;
    --c-surface-dk:     #0A0A0C;
    --c-surface-md:     #161214;
    --c-risk:           #B91C1C;
    --c-win:            #16A34A;
    --c-selection:      #FF6B1A;
    --c-positive:       #16A34A;
    --c-negative:       #B91C1C;
    --c-draw:           #A1887A;
    --c-text:           #F5E6D8;
    --c-text-label:     #FF6B1A;
    --c-text-muted:     #A1887A;
    --c-text-subtle:    #6B5248;
    --c-text-invert:    #F5E6D8;
    --c-page:           #0A0A0C;
    --c-bg:             #161214;
    --c-bg-light:       #161214;
    --c-bg-hover:       #241A1A;
    --c-bg-alt:         #0E0C0C;
    --c-bg-stripe-even: #241A1A;
    --c-row-team:       #241A1A;
    --c-row-label:      #0E0C0C;
    --c-row-odds:       #161214;
    --c-border:         #3A2A26;
    --c-border-md:      #4A3A36;
    --c-border-focus:   #FF6B1A;
    --c-icon-gold:      #FFB020;
    --c-header-text:    #FFB020;
    --c-separator:      #FF6B1A;
    --c-hasbet:         #3A1A10;
    --c-login-bg:       #0A0A0C;
    --c-login-form-bg:  #161214;
    --c-login-form-surface: #161214;
    --shadow-card:      0 2px 8px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.4);
    --shadow-card-md:   0 6px 20px rgba(0,0,0,.7), 0 2px 6px rgba(0,0,0,.5);

    /* Alternating rows */
    --c-row-alt-a:      #161214;
    --c-row-alt-b:      #241A1A;

    /* Section label */
    --c-label-bg:       #1E1212;
    --c-label-text:     #A1887A;

    /* Sidebar navigation */
    --nav-bg:            #0F0C0D;   /* slightly off from bg-base to separate block */
    --nav-active-bg:     #241A1A;
    --nav-active-accent: #FF6B1A;   /* orange cam bar + text */
    --nav-hover-bg:      #1C1517;
    --nav-item-border:   #3A2A26;
    --nav-icon:          #A1887A;   /* arrow ">" — text-secondary */
}

/* ── Fire theme component overrides ──────────────────────────── */

/* Page backgrounds */
:root[data-theme="fire"] body,
:root[data-theme="fire"] #hoeapp-wrapper,
:root[data-theme="fire"] #hoeapp-container,
:root[data-theme="fire"] #pageSport      { background-color: #0A0A0C; }

/* Panel header — red + amber glow (req 1) */
:root[data-theme="fire"] .panel-default > .panel-heading {
    background-color: #E11D2A;
    border-color: #B91C1C;
    box-shadow: 0 1px 0 rgba(255,107,26,.3);  /* amber under-glow */
}
:root[data-theme="fire"] .panel-default > .panel-heading a,
:root[data-theme="fire"] .panel-default > .panel-heading a:hover,
:root[data-theme="fire"] .panel-default > .panel-heading .panel-title > a,
:root[data-theme="fire"] .panel-default > .panel-heading .panel-title > a:hover {
    color: #FFFFFF !important;   /* white on red — req 4 */
}

/* Header logo area — black bg, orange logo text (req 2) */
:root[data-theme="fire"] #hoe-header[hoe-color-type="logo-bg8"] .hoe-left-header {
    background: #0A0A0C !important;
    border-right: 1px solid #3A2A26;
}
:root[data-theme="fire"] #hoe-header .hoe-left-header span,
:root[data-theme="fire"] #hoe-header .hoe-left-header a span {
    color: #FF6B1A !important;   /* --accent orange for logo */
    text-shadow: 0 0 8px rgba(255,107,26,.4);
}

/* Right header */
:root[data-theme="fire"] .hoe-right-header[hoe-color-type="header-bg7"] {
    background: #161214 !important;
    border-bottom: 1px solid #3A2A26 !important;
}

/* Sidebar — nav vars handle everything; no hardcoded overrides needed */

/* Form controls */
:root[data-theme="fire"] .form-control {
    background-color: #241A1A; border-color: #3A2A26; color: #F5E6D8;
}
:root[data-theme="fire"] .form-control:focus {
    background-color: #241A1A; border-color: #FF6B1A;
    box-shadow: 0 0 0 3px rgba(255,107,26,.2);
    color: #F5E6D8;
}

/* Dropdown */
:root[data-theme="fire"] .dropdown-menu {
    background-color: #161214; border: 1px solid #3A2A26;
    box-shadow: 0 4px 16px rgba(0,0,0,.7);
}
:root[data-theme="fire"] .dropdown-menu > li > a              { color: #F5E6D8; }
:root[data-theme="fire"] .dropdown-menu > li > a:hover,
:root[data-theme="fire"] .dropdown-menu > li > a:focus        { background-color: #241A1A; color: #F5E6D8; }

/* Bootstrap panels */
:root[data-theme="fire"] .panel          { border-color: #3A2A26; }
:root[data-theme="fire"] .panel-body    { background-color: #161214; }
:root[data-theme="fire"] .panel-collapse { background-color: #161214; }
/* .panel.theme-panel and its .panel-body use var(--bg-base)=#0A0A0C via shared rule */

/* Buttons — req 4: red bg → white; orange/amber bg → #1A0E06 */
:root[data-theme="fire"] .btn-primary {
    background-color: #E11D2A; border-color: #E11D2A; color: #FFFFFF;
}
:root[data-theme="fire"] .btn-primary:hover,
:root[data-theme="fire"] .btn-primary:focus {
    background-color: #FF2E3C; border-color: #FF2E3C; color: #FFFFFF;
}
:root[data-theme="fire"] .btn-warning {
    background-color: #FFB020; border-color: #FFB020; color: #1A0E06;
}
:root[data-theme="fire"] .btn-warning:hover { background-color: #E8870B; border-color: #E8870B; color: #1A0E06; }
:root[data-theme="fire"] .btn-default {
    background-color: #241A1A; border-color: #3A2A26; color: #F5E6D8;
}
:root[data-theme="fire"] .btn-default:hover { background-color: #3A2A26; border-color: #3A2A26; color: #F5E6D8; }
/* Continue button stays green (req 3) — already set via --success: #16A34A ✓ */

/* Login */
:root[data-theme="fire"] .body_Login { background-color: #0A0A0C; background-image: none; }
:root[data-theme="fire"] .bgLoginform {
    background: #161214 !important;
    filter: none !important;
    border: 1px solid #3A2A26 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.7), 0 0 20px rgba(225,29,42,.1) !important;
    color: #F5E6D8 !important;
}
:root[data-theme="fire"] .bgLoginform label,
:root[data-theme="fire"] .bgLoginform .control-label { color: #A1887A; }

/* Alerts */
:root[data-theme="fire"] .alert-warning { background-color: rgba(255,176,32,.12); border-color: rgba(255,176,32,.25); color: #FFB020; }
:root[data-theme="fire"] .alert-danger  { background-color: rgba(185,28,28,.15);  border-color: rgba(185,28,28,.3);   color: #FF2E3C; }
:root[data-theme="fire"] .alert-info    { background-color: rgba(255,107,26,.10); border-color: rgba(255,107,26,.2);  color: #FF6B1A; }
:root[data-theme="fire"] .alert-success { background-color: rgba(22,163,74,.12);  border-color: rgba(22,163,74,.25);  color: #16A34A; }

/* Wager inputs */
:root[data-theme="fire"] .wager-input-sm {
    background-color: #241A1A !important; border-color: #3A2A26 !important; color: #F5E6D8 !important;
}
:root[data-theme="fire"] .wager-input-sm:focus {
    border-color: #FF6B1A !important; box-shadow: 0 0 0 3px rgba(255,107,26,.2) !important;
}
:root[data-theme="fire"] .wager-item:hover {
    box-shadow: inset 4px 0 0 #FF6B1A; background-color: #2A1A10 !important;
}

/* Accepted/status label on primary-color header — fire uses amber from its own palette */
:root[data-theme="fire"] .section-openbet .ob-header span,
:root[data-theme="fire"] .wr-header span { color: #FFB020 !important; }

/* Modal */
:root[data-theme="fire"] .modal-message .modal-content { background-color: #161214; border: 1px solid #3A2A26; color: #F5E6D8; }
:root[data-theme="fire"] .modal-message .modal-header  { background-color: #241A1A; border-bottom-color: #3A2A26; color: #F5E6D8; }

/* gameOddsBox inner overlays */
:root[data-theme="fire"] .gameOddsBox              { border-color: #3A2A26; }
:root[data-theme="fire"] .gameOddsBox:nth-child(odd)  .teamsBox { background-color: rgba(255,107,26,.04); }
:root[data-theme="fire"] .gameOddsBox:nth-child(even) .teamsBox { background-color: rgba(255,107,26,.07); }

/* History/Open bet cards */
:root[data-theme="fire"] .section-openbet,
:root[data-theme="fire"] .ez-body,
:root[data-theme="fire"] .section-result.section-history {
    background-color: #161214; border-color: #3A2A26;
}

/* lgs header */
:root[data-theme="fire"] .lgs > .lg-head,
:root[data-theme="fire"] .profile-form > .head { background-color: #E11D2A; }
:root[data-theme="fire"] .lgs > .lg-head > span:first-child { color: #FFB020; }


/* ================================================================
   MỤCC 4 — body[data-theme] structural overrides
   Dùng selector body[data-theme] để tương thích khi data-theme
   được set trên cả <html> và <body>.
   ================================================================ */

/* Page background — !important overrides hoe.css (#hoeapp-wrapper bg: #f7f7f7) */
body[data-theme="dark"]  { background: #0F1A2E !important; }
body[data-theme="light"] { background: #F4F7FB !important; }
body[data-theme="fire"]  { background: #0A0A0C !important; }

/* Sidebar */
body[data-theme="dark"]  #hoe-left-panel { background-color: #0C1525 !important; }
body[data-theme="light"] #hoe-left-panel { background-color: #F8FAFC !important; }
body[data-theme="fire"]  #hoe-left-panel { background-color: #0F0C0D !important; }

/* Active sidebar item — vars from :root[data-theme] cascade down to body */
body[data-theme] #hoe-left-panel .nav.panel-list > li.active > a {
    background-color: var(--nav-active-bg)    !important;
    border-left:  3px solid var(--nav-active-accent) !important;
    color: var(--nav-active-accent)           !important;
    font-weight: 600;
}
body[data-theme] #hoe-left-panel .nav.panel-list > li > a {
    border-bottom: 1px solid var(--nav-item-border);
}

/* League band heading (NBA / MLB) */
body[data-theme] .panel-default > .panel-heading {
    background: var(--header-band)   !important;
    color: #fff                      !important;
    box-shadow: none;
}

/* Date/time row (.c-time, .c-code) — removes white gap below band */
body[data-theme] .c-time,
body[data-theme] .c-code {
    background: var(--bg-surface-2);
    color: var(--text-secondary);
}

/* ── Smooth theme transition ──────────────────────────────────── */
body,
#hoeapp-wrapper, #hoeapp-container, #hoe-header,
#hoe-left-panel, #main-content,
.panel, .panel-body, .panel-heading, .panel-collapse,
.gameOddsBox, .lineDetail, .teamsBox, .labelT, .gameTime,
.wager-list, .wager-item, .wager-row,
.section-openbet, .section-openbet .acc-item, .section-openbet .acc-body,
.section-history, .section-history .acc-item, .section-history .acc-body,
.section-wagers, .section-wagers .bet-row,
.dropdown-menu, .form-control, .btn,
.modal-content, .modal-header {
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.15s ease,
        box-shadow 0.2s ease;
}


/* ===== THEME — CẤU TRÚC DÙNG CHUNG (màu lấy từ biến brand) ===== */
#hoe-left-panel { background: var(--color-secondary-1); }
#hoe-left-panel .panel-list > li.active > a {
  background: var(--color-secondary-3);
  border-left: 3px solid var(--color-primary);
  color: var(--color-primary);
}
#hoe-left-panel .panel-list > li > a { border-bottom: 1px solid var(--color-support-4); }
.panel-default > .panel-heading { background: var(--color-primary); color: #fff; }

/* ===== COLOR-* VARS FOR ODDS TABLE (bảng kèo) ===== */
:root body, :root[data-theme="dark"] body {
  --color-primary:#1E63D0; --color-secondary-1:#16243D; --color-secondary-2:#0F1A2E;
  --color-secondary-3:#1B2E4A; --color-secondary-3-active:#234070;
  --color-green:#22C55E; --color-yellow:#F5A623; --color-red:#EF4444;
  --color-support-1:#E6EDF7; --color-support-3:#8A9BB5; --color-support-4:#27374D;
  --color-highlight:#1B2E4A; --color-favorite:#243A1F;
}
:root[data-theme="light"] body {
  --color-primary:#1E63D0; --color-secondary-1:#FFFFFF; --color-secondary-2:#F4F7FB;
  --color-secondary-3:#E9EFF6; --color-secondary-3-active:#DCE6F2;
  --color-green:#16A34A; --color-yellow:#E8870B; --color-red:#DC2626;
  --color-support-1:#0F1E36; --color-support-3:#64748B; --color-support-4:#DDE5EE;
  --color-highlight:#EEF7FF; --color-favorite:#FFF2CE;
}
:root[data-theme="fire"] body {
  --color-primary:#E11D2A; --color-secondary-1:#161214; --color-secondary-2:#0A0A0C;
  --color-secondary-3:#241A1A; --color-secondary-3-active:#3A2420;
  --color-green:#16A34A; --color-yellow:#FFB020; --color-red:#B91C1C;
  --color-support-1:#F5E6D8; --color-support-3:#A1887A; --color-support-4:#3A2A26;
  --color-highlight:#241A1A; --color-favorite:#2A1F12;
}
.c-time, .c-code { background: var(--color-secondary-3); color: var(--color-support-3); }

/* ===== SKELETON LOADER ===== */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.game-skeleton { padding: 8px 0; }
.skeleton-panel { margin-bottom: 12px; border-radius: 6px; overflow: hidden; border: 1px solid var(--c-border); }
.skeleton-header,
.skeleton-row {
  height: 18px; margin: 10px 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bg-surface-2) 25%, var(--bg-surface) 50%, var(--bg-surface-2) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
}
.skeleton-header { height: 36px; margin: 0; border-radius: 0; }
.skeleton-row.short { width: 55%; }

/* ===== EMPTY STATE ===== */
.game-empty {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-secondary);
}
.game-empty .fa { font-size: 40px; margin-bottom: 12px; opacity: 0.5; }
.game-empty p  { font-size: 14px; margin: 0; }

/* ===== FIX FOOTER hiển thị ===== */
#footer.footer {
  position: fixed !important;
  left: 0; right: 0; bottom: 0;
  min-height: 46px;
  background: var(--header-band, #1A4FA0) !important;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom)) 8px;
  z-index: 100000;
  box-shadow: 0 -2px 6px rgba(0,0,0,.25);
}
#main-content { padding-bottom: 90px !important; }

/* ================================================================
   LIGHT THEME — ODDS BOARD MOBILE REFINEMENTS
   ================================================================ */

:root[data-theme="light"] body {
  --color-primary:#1746A0;          /* deeper blue for band/links */
  --color-secondary-1:#FFFFFF;
  --color-secondary-2:#EEF3FA;
  --color-secondary-3:#E3ECF7;      /* alternating row — more visible */
  --color-support-1:#0B1B33;        /* dark navy text — crisp */
  --color-support-3:#5A6B82;        /* secondary labels — stronger */
  --color-support-4:#C7D3E3;        /* borders — more visible */
}

/* League header band (MLB/NBA) — depth without double border */
:root[data-theme="light"] .panel-default > .panel-heading {
  background: #1E63D0;
  border: none;
  box-shadow: 0 1px 2px rgba(11,27,51,.15);
}
/* Remove any double border between band and content */
:root[data-theme="light"] .panel-default > .panel-heading + *,
:root[data-theme="light"] .panel-collapse,
:root[data-theme="light"] .panel-body { border-top: none !important; }

/* Section label SPREAD/TOTAL/MONEYLINE — clearer block */
:root[data-theme="light"] #game tr.subtitle th,
:root[data-theme="light"] .c-time, :root[data-theme="light"] .c-code {
  background: #DCE6F4;
  color: #34496A;
  font-weight: 600;
}

/* Odds row: visible bottom border + row contrast */
:root[data-theme="light"] #game tr td { border-bottom: 1px solid #D5E0EF; }
:root[data-theme="light"] #game tbody tr:hover td { background: #E8F0FB; }

/* Odds value — bold and sharp */
:root[data-theme="light"] .c-hdp .odds span,
:root[data-theme="light"] .lineDetail span b { color: #C0392B; font-weight: 700; }

/* Odds + checkbox alignment — custom-gameodds.css table */
#game td .odds,
.c-hdp .odds {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
#game td input[type="checkbox"],
.c-hdp .odds input[type="checkbox"] {
  margin: 0;
  vertical-align: middle;
  flex: 0 0 auto;
}

/* Odds + checkbox alignment — lineDetail label (RenderGames view) */
:root[data-theme="light"] .lineDetail span label,
.lineDetail span label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  cursor: pointer;
}
:root[data-theme="light"] .lineDetail span label input[type="checkbox"],
.lineDetail span label input[type="checkbox"] {
  margin: 0;
  flex: 0 0 auto;
}

/* ================================================================
   LIGHT THEME — STRAIGHT WAGER PAGE
   ================================================================ */

/* Panel heading band — override inline style="background:#014D9A" */
:root[data-theme="light"] .panel.lgs.sel-games > .panel-heading {
    background: #1E63D0 !important;
    border: none;
    box-shadow: 0 1px 2px rgba(11,27,51,.15);
}

/* Wager list container */
:root[data-theme="light"] .wager-list { background: #FFFFFF; }
:root[data-theme="light"] #collapseWager { background-color: #FFFFFF; }

/* Column header row: SELECTION / ODDS / RISK $ / WIN $ */
:root[data-theme="light"] .wager-header {
    background: #DCE6F4;
    color: #34496A;
    font-weight: 700;
    border-bottom: 2px solid #C7D3E3;
}

/* Wager rows — alternating bg + bottom border */
:root[data-theme="light"] .wager-item { border-bottom: 1px solid #D5E0EF; }
:root[data-theme="light"] .wager-list .wager-item:nth-child(odd)  { background: #FFFFFF; }
:root[data-theme="light"] .wager-list .wager-item:nth-child(even) { background: #F1F6FC; }
:root[data-theme="light"] .wager-item:hover {
    background: #E8F0FB !important;
    box-shadow: inset 4px 0 0 #1E63D0;
}

/* Selection title and detail text */
:root[data-theme="light"] .wager-selection-title { color: #12356E; font-weight: 700; }
:root[data-theme="light"] .wager-selection-details { color: #4A5E7A; }
:root[data-theme="light"] .wager-info-collapse { color: #1A3A6E; font-size: 12px; }

/* Risk/Win inputs + Odds dropdown — white bg, navy text, visible border */
:root[data-theme="light"] .wager-input-sm,
:root[data-theme="light"] .wager-col-odds select,
:root[data-theme="light"] .wager-odds-display {
    border: 1px solid #C7D3E3 !important;
    background: #FFFFFF !important;
    color: #0B1B33 !important;
    font-weight: 600;
}
:root[data-theme="light"] .wager-input-sm:focus,
:root[data-theme="light"] .wager-col-odds select:focus {
    border-color: #1E63D0 !important;
    box-shadow: 0 0 0 2px rgba(30,99,208,.15) !important;
}

/* Remove button */
:root[data-theme="light"] .wager-trash-btn { color: #C0392B; }
:root[data-theme="light"] .wager-trash-btn:hover { color: #7B0F0F; }