/* ================================================================
   4CENTS THEME  :root[data-theme="4cents"]  (navy + gold)
   Tách riêng khỏi main.css để domain 4cents.asia chỉ tải đúng CSS
   của mình (không load chung với light/dark/fire). File này chứa
   cả phần theme cho trang chính (_Layout.cshtml) và trang login
   (Login.cshtml) — cả hai cùng include file này khi SiteCode=="4cents".
   ================================================================ */

:root[data-theme="4cents"] {

    /* ── Semantic tokens (light bg, navy + gold accent) ── */
    --bg-base:        #F4F7FB;
    --bg-surface:     #FFFFFF;
    --bg-surface-2:   #EAEEF6;
    --border:         #DCE1EC;
    --primary:        #17275F;
    --primary-hover:  #0F1B45;
    --header-band:    #17275F;
    --accent:         #D9B14E;
    --accent-dim:     rgba(217,177,78,.14);
    --warning:        #C9971F;
    --success:        #16A34A;
    --danger:         #DC2626;
    --text-primary:   #101B33;
    --text-secondary: #5A6B85;
    --text-on-primary: #FFFFFF;
    --text-on-accent:  #17275F;
    --text-on-success: #052E16;
    --text-on-warning: #451A03;

    /* ── Alias map ── */
    --c-primary:        #17275F;
    --c-primary-dk:     #0F1B45;
    --c-primary-lt:     #24397A;
    --c-surface-dk:     #0F1B45;
    --c-surface-md:     #EAEEF6;
    --c-risk:           #DC2626;
    --c-win:            #16A34A;
    --c-selection:      #D9B14E;
    --c-positive:       #16A34A;
    --c-negative:       #DC2626;
    --c-draw:           #5A6B85;
    --c-text:           #101B33;
    --c-text-label:     #17275F;
    --c-text-muted:     #5A6B85;
    --c-text-subtle:    #94A3B8;
    --c-text-invert:    #FFFFFF;
    --c-page:           #F4F7FB;
    --c-bg:             #FFFFFF;
    --c-bg-light:       #F8FAFC;
    --c-bg-hover:       #FBF3D9;
    --c-bg-alt:         #EAEEF6;
    --c-bg-stripe-even: #FBF3D9;
    --c-row-team:       #FBF3D9;
    --c-row-label:      #ECDCA6;
    --c-row-odds:       #FFFFFF;
    --c-border:         #ECDCA6;
    --c-border-md:      #DCC583;
    --c-border-focus:   #17275F;
    --c-icon-gold:      #D9B14E;
    --c-header-text:    #FFFFFF;
    --c-separator:      #D9B14E;
    --c-hasbet:         #FCF2D9;
    --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:      #FBF3D9;

    /* Section label */
    --c-label-bg:       #DCE3F0;
    --c-label-text:     #17275F;

    /* Sidebar navigation */
    --nav-bg:            #F8FAFC;
    --nav-active-bg:     #FCF2D9;
    --nav-active-accent: #D9B14E;
    --nav-hover-bg:      #EDF1FA;
    --nav-item-border:   #DCE1EC;
    --nav-icon:          #94A3B8;
}

/* ── 4cents theme component overrides ──────────────────────────── */

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

/* Panel header — navy + white text */
:root[data-theme="4cents"] .panel-default > .panel-heading {
    background-color: #17275F;
    border-color: #17275F;
    box-shadow: 0 1px 0 rgba(217,177,78,.35);
}
:root[data-theme="4cents"] .panel-default > .panel-heading a,
:root[data-theme="4cents"] .panel-default > .panel-heading a:hover,
:root[data-theme="4cents"] .panel-default > .panel-heading .panel-title > a,
:root[data-theme="4cents"] .panel-default > .panel-heading .panel-title > a:hover {
    color: #FFFFFF !important;
}

/* Header logo area — navy bg, gold logo text (kept dark for brand pop) */
:root[data-theme="4cents"] #hoe-header[hoe-color-type="logo-bg8"] .hoe-left-header {
    background: #17275F !important;
}
:root[data-theme="4cents"] #hoe-header .hoe-left-header span,
:root[data-theme="4cents"] #hoe-header .hoe-left-header a span {
    color: #D9B14E !important;
}
:root[data-theme="4cents"] #hoe-header[hoe-color-type="logo-bg8"] .hoe-left-header a:hover {
    color: #F1D779 !important;
}
:root[data-theme="4cents"] #hoe-header[hoe-color-type="logo-bg8"] .hoe-left-header .hoe-sidebar-toggle a:after {
    color: #D9B14E !important;
    border-color: #D9B14E !important;
}

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

/* Sidebar shadow */
:root[data-theme="4cents"] #hoe-left-panel {
    box-shadow: 1px 0 4px rgba(15,30,54,.06);
}

/* Form controls */
:root[data-theme="4cents"] .form-control {
    background-color: #FFFFFF; border-color: #DCE1EC; color: #101B33;
}
:root[data-theme="4cents"] .form-control:focus {
    background-color: #FFFFFF; border-color: #17275F;
    box-shadow: 0 0 0 3px rgba(23,39,95,.15);
    color: #101B33;
}

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

/* Bootstrap panels */
:root[data-theme="4cents"] .panel          { border-color: #DCE1EC; box-shadow: 0 1px 3px rgba(15,30,54,.06); }
:root[data-theme="4cents"] .panel-body    { background-color: #FFFFFF; }
:root[data-theme="4cents"] .panel-collapse { background-color: #FFFFFF; }

/* Buttons — gold bg → navy text */
:root[data-theme="4cents"] .btn-primary {
    background-color: #D9B14E; border-color: #D9B14E; color: #17275F;
}
:root[data-theme="4cents"] .btn-primary:hover,
:root[data-theme="4cents"] .btn-primary:focus {
    background-color: #F1D779; border-color: #F1D779; color: #17275F;
}
:root[data-theme="4cents"] .btn-warning {
    background-color: #F1D779; border-color: #F1D779; color: #17275F;
}
:root[data-theme="4cents"] .btn-warning:hover { background-color: #FFF0B3; border-color: #FFF0B3; color: #17275F; }
:root[data-theme="4cents"] .btn-default {
    background-color: #EAEEF6; border-color: #DCE1EC; color: #101B33;
}
:root[data-theme="4cents"] .btn-default:hover { background-color: #DCE1EC; border-color: #DCE1EC; color: #101B33; }
/* Continue button stays green — already set via --success: #16A34A */

/* Login — restore light gradient, navy page behind card */
:root[data-theme="4cents"] .body_Login { background-color: #17275F; background-image: none; }
:root[data-theme="4cents"] .bgLoginform {
    background: linear-gradient(to bottom, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%) !important;
    filter: none !important;
    border: 1px solid #DCE1EC !important;
    box-shadow: 0 6px 20px rgba(15,30,54,.15) !important;
    color: #101B33 !important;
}
:root[data-theme="4cents"] .bgLoginform label,
:root[data-theme="4cents"] .bgLoginform .control-label { color: #5A6B85; }

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

/* Wager slip team names — force navy instead of leftover link-blue */
:root[data-theme="4cents"] .wager-selection-title,
:root[data-theme="4cents"] .wager-selection-title strong,
:root[data-theme="4cents"] .wager-info-collapse,
:root[data-theme="4cents"] .wager-info-collapse strong {
    color: #17275F !important;
}

/* Wager slip header — hardcoded inline style in RenderGames.cshtml/_PartialGameWager.cshtml, needs !important to beat it */
:root[data-theme="4cents"] #headingWager,
:root[data-theme="4cents"] .lgs.sel-games > .panel-heading {
    background: #17275F !important;
}

/* League/event list links — warm brown instead of leftover navy-blue */
:root[data-theme="4cents"] .likeLink {
    color: #4A3B1F !important;
}
:root[data-theme="4cents"] .likeLink:hover {
    color: #17275F !important;
}

/* Checkbox accent — gold instead of leftover teal (shows on every bet selection) */
:root[data-theme="4cents"] input[type="checkbox"],
:root[data-theme="4cents"] input[type="checkbox"].checkBox {
    accent-color: #D9B14E;
}

/* Odds text — warm brown, harmonizes with gold instead of leftover blue */
:root[data-theme="4cents"] .teamsodds .lineDetail,
:root[data-theme="4cents"] .teamsodds .lineDetail * {
    color: #4A3B1F !important;
    font-weight: 600 !important;
}

/* Continue button — gold instead of generic green */
:root[data-theme="4cents"] #controlBtn.btn-continue,
:root[data-theme="4cents"] .btn-continue {
    background-color: #D9B14E !important;
    border-color: #D9B14E !important;
    color: #17275F !important;
}

/* SPREAD / TOTAL / MONEYLINE label — soft gold tint, not full-saturation (avoids fatigue when repeated many times down the page) */
:root[data-theme="4cents"] .labelT {
    background-color: #FBF3D9 !important;
    color: #7A5E1E !important;
    border-bottom-color: #ECDCA6 !important;
}

/* Wager inputs */
:root[data-theme="4cents"] .wager-input-sm {
    background-color: #FFFFFF !important; border-color: #DCE1EC !important; color: #101B33 !important;
}
:root[data-theme="4cents"] .wager-input-sm:focus {
    border-color: #17275F !important; box-shadow: 0 0 0 3px rgba(23,39,95,.15) !important;
}
:root[data-theme="4cents"] .wager-odds-display {
    background: #F4F7FB; border-color: #DCE1EC; color: #101B33;
}
:root[data-theme="4cents"] .wager-item:hover {
    box-shadow: inset 4px 0 0 #D9B14E; background-color: #FCF2D9 !important;
}

/* Accepted/status label */
:root[data-theme="4cents"] .section-openbet .ob-header span,
:root[data-theme="4cents"] .wr-header span { color: #17275F !important; }

/* Modal */
:root[data-theme="4cents"] .modal-message .modal-content { background-color: #FFFFFF; border: 1px solid #DCE1EC; color: #101B33; }
:root[data-theme="4cents"] .modal-message .modal-header  { background-color: #F4F7FB; border-bottom-color: #DCE1EC; color: #101B33; }

/* Win/risk column contrast */
:root[data-theme="4cents"] .col-risk,
:root[data-theme="4cents"] .wr-risk { color: #DC2626 !important; }
:root[data-theme="4cents"] .col-win,
:root[data-theme="4cents"] .wr-win  { color: #16A34A !important; }

/* teamsOddsAmountB */
:root[data-theme="4cents"] .teamsOddsAmountB { background-color: #DCFCE7; }

/* gameOddsBox inner overlays */
:root[data-theme="4cents"] .gameOddsBox              { border-color: #A7BDEF; }
:root[data-theme="4cents"] .gameOddsBox:nth-child(odd)  .teamsBox { background-color: #FFFFFF; }
:root[data-theme="4cents"] .gameOddsBox:nth-child(even) .teamsBox { background-color: #D2E7FF; }
:root[data-theme="4cents"] .gameTime { /* background-color: #C9D2E3; */ color: #17275F; font-weight: 700; border-bottom: 1px solid #A7B4CE; }
:root[data-theme="4cents"] .gameDate { color: #17275F; font-weight: 700; border-bottom-color: #C7D0E0; }

/* History/Open bet cards */
:root[data-theme="4cents"] .section-openbet,
:root[data-theme="4cents"] .ez-body,
:root[data-theme="4cents"] .section-result.section-history {
    background-color: #FFFFFF; border-color: #DCE1EC; box-shadow: 0 1px 3px rgba(15,30,54,.06);
}

/* History striped table */
:root[data-theme="4cents"] .his-item li:first-child,
:root[data-theme="4cents"] .his-item li:last-child { background-color: #FCF2D9; }
:root[data-theme="4cents"] .his-item li.footer { background-color: rgba(217,177,78,.10); }

/* lgs header — navy bg, gold accent text */
:root[data-theme="4cents"] .lgs > .lg-head,
:root[data-theme="4cents"] .profile-form > .head { background-color: #17275F; }
:root[data-theme="4cents"] .lgs > .lg-head > span:first-child { color: #D9B14E; }

/* ===== COLOR-* VARS FOR ODDS TABLE (bảng kèo) — #hoe-left-panel bg + active accent ===== */
:root[data-theme="4cents"] body {
  --color-primary:#D9B14E; --color-secondary-1:#FFFFFF; --color-secondary-2:#F4F7FB;
  --color-secondary-3:#FCF2D9; --color-secondary-3-active:#F7E7BE;
  --color-green:#16A34A; --color-yellow:#D9B14E; --color-red:#DC2626;
  --color-support-1:#101B33; --color-support-3:#5A6B85; --color-support-4:#DCE1EC;
  --color-highlight:#EAEEF6; --color-favorite:#FCF2D9;
}

/* ================================================================
   LOGIN PAGE (Login.cshtml — <style> riêng, không kế thừa _Layout)
   ================================================================ */
:root[data-theme="4cents"] .login-bg { background: #17275F; }
:root[data-theme="4cents"] .login-bg::after { --blob-color: rgba(217,177,78,.35); }
:root[data-theme="4cents"] { --accent-color: #D9B14E; --accent-glow: rgba(217,177,78,.25); --btn-color: #D9B14E; --btn-shadow: rgba(217,177,78,.4); }
:root[data-theme="4cents"] .login-btn { color: #17275F; }