/* ============================================================
   THEME: GOLD — Luxury / Premium / Gold-Black
   สไตล์: หรูหรา พรีเมียม โทนทอง-ดำ-ขาว
   ============================================================ */

:root {
    /* === Brand Colors === */
    --t-primary: #D4A017;
    --t-primary-dark: #B8860B;
    --t-primary-darker: #8B6914;
    --t-secondary: #F0C75E;

    /* === Text Colors === */
    --t-text: #E8C252;
    --t-text-light: #FFF3D0;
    --t-text-warm: #F0D78E;
    --t-text-white: #FFF8F0;

    /* === Background === */
    --t-bg-body: #0D0D0D;
    --t-bg-card: #1A1A1A;
    --t-bg-card-alt: #2A2218;
    --t-bg-card-light: #3A3228;
    --t-bg-topbar: linear-gradient(135deg, #1A1400 0%, #0D0D0D 100%);
    --t-bg-main: #0D0D0D;

    /* === Buttons === */
    --t-btn-primary-bg: linear-gradient(135deg, #D4A017, #B8860B);
    --t-btn-primary-border: #B8860B;
    --t-btn-primary-text: #FFFFFF;
    --t-btn-primary-shadow: 0 4px 14px rgba(212, 160, 23, 0.4);

    /* === Borders === */
    --t-border: #2A2218;
    --t-border-light: #3A3228;
    --t-border-gold: #D4A017;

    /* === Badge / Accent === */
    --t-badge-bg: #8B6914;
    --t-accent: #F0C75E;
    --t-accent-light: #E8C252;

    /* === Gradients === */
    --t-gradient-gold: linear-gradient(135deg, #8B6914, #D4A017, #F0C75E, #D4A017);
    --t-gradient-pattern: linear-gradient(135deg, #1A1400, #B8860B, #F0C75E, #B8860B);

    /* === Footer === */
    --t-footer-bg: #050505;
    --t-footer-text: #A09080;
    --t-footer-link: #F0C75E;
    --t-footer-link-hover: #E8C252;
}

/* ============================================================
   BODY / PAGE BACKGROUND
   ============================================================ */
html {
    height: 100% !important;
    background: #0D0D0D !important;
    background-image: none !important;
}
html, body {
    background: #0D0D0D !important;
    background-image: none !important;
    background-color: #0D0D0D !important;
}
body {
    background: #0D0D0D !important;
    background-color: #0D0D0D !important;
    background-image: none !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}
.fixed-bg {
    background: #0D0D0D !important;
    background-image: none !important;
}
.goldpattern2 {
    background: linear-gradient(135deg, #1A1400 0%, #0D0D0D 100%) !important;
    background-image: none !important;
}
.silverpattern2 {
    background: #0D0D0D !important;
    background-image: none !important;
}
#wrapper {
    flex: 1 0 auto !important;
    position: relative !important;
    background: transparent !important;
    background-image: none !important;
}
#content {
    position: relative !important;
    top: auto !important;
    min-height: auto !important;
    background: transparent !important;
    background-image: none !important;
}
.contentbody {
    flex: 1 0 auto !important;
    background: transparent !important;
}

/* ============================================================
   TOPBAR — แถบด้านบน ใช้พื้นหลังเรียบๆ แทน gold pattern
   ============================================================ */
.goldpattern {
    background: linear-gradient(135deg, #1A1400 0%, #0D0D0D 100%) !important;
    background-size: cover !important;
}

.top-fix {
    z-index: 10000 !important;
}

.topbar .logo a {
    color: #FFF8F0 !important;
    text-shadow: none !important;
}
.topbar .logo a:hover {
    color: #F0C75E !important;
}

.topbar .txt-logo {
    font-weight: 700;
    letter-spacing: 2px;
}

.txt-money {
    background: rgba(212, 160, 23, 0.15) !important;
    border: 1px solid rgba(212, 160, 23, 0.3) !important;
    color: #FFF8F0 !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
}

.topbar .iconmenu,
.topbar a.iconmenu {
    color: #A09080 !important;
    text-shadow: none !important;
}
.topbar .iconmenu:hover,
.topbar a:hover.iconmenu {
    color: #F0C75E !important;
    text-shadow: none !important;
}

/* ============================================================
   GOLD TEXT → GOLD GRADIENT TEXT
   ============================================================ */
.gold-text {
    color: #F0C75E !important;
    background: linear-gradient(135deg, #F0C75E 0%, #E8C252 50%, #D4A017 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* ============================================================
   GOLDEN BUTTON → GOLD MODERN BUTTON
   ============================================================ */
.golden-btn {
    background-image: linear-gradient(135deg, #D4A017, #B8860B) !important;
    border: none !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    text-shadow: none !important;
    box-shadow: 0 4px 14px rgba(212, 160, 23, 0.4) !important;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease !important;
}
.golden-btn:hover {
    background-image: linear-gradient(135deg, #B8860B, #8B6914) !important;
    box-shadow: 0 6px 20px rgba(212, 160, 23, 0.6) !important;
    border: none !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

/* ============================================================
   BTN-GOLD → GOLD FLAT BUTTON
   ============================================================ */
.btn-gold, .gold-btn {
    background-color: #D4A017 !important;
    background-image: none !important;
    border: 1px solid #B8860B !important;
    border-radius: 8px !important;
    color: #FFFFFF !important;
    text-shadow: none !important;
    transition: all 0.2s ease !important;
}
.btn-gold:hover, .gold-btn:hover {
    background-color: #B8860B !important;
    border-color: #8B6914 !important;
    color: #FFFFFF !important;
}

/* ============================================================
   SILVER BUTTON → SLATE BUTTON
   ============================================================ */
.silver-btn {
    background-image: linear-gradient(135deg, #3A3228, #2A2218) !important;
    border: 1px solid #3A3228 !important;
    border-radius: 8px !important;
    color: #E8E0D0 !important;
    text-shadow: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}
.silver-btn:hover {
    background-image: linear-gradient(135deg, #2A2218, #1A1A1A) !important;
    border-color: #D4A017 !important;
    color: #FFF8F0 !important;
    box-shadow: 0 4px 12px rgba(212, 160, 23, 0.3) !important;
}

/* ============================================================
   TOPBOX / TWBOX — Content Panels
   ============================================================ */
.topbox {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    border-radius: 10px 10px 0 0 !important;
    color: #FFF3D0 !important;
}
.topbox a {
    color: #FFF3D0 !important;
}
.topbox a:hover {
    color: #F0C75E !important;
}

.twbox {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    border-radius: 0 0 10px 10px !important;
    color: #E8E0D0 !important;
}
.twbox .nav-pills .nav-link {
    color: #A09080 !important;
    border: 1px solid #2A2218 !important;
    background-color: #0D0D0D !important;
}
.twbox .nav-pills .nav-link.active,
.twbox .nav-pills .show > .nav-link {
    color: #FFFFFF !important;
    background-color: #D4A017 !important;
    border-color: #B8860B !important;
}

/* ============================================================
   MAIN-CARD / INMAIN-CARD — Member Cards
   ============================================================ */
.main-card {
    border: 1px solid #2A2218 !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, #1A1A1A, #0D0D0D) !important;
    background-image: linear-gradient(145deg, #1A1A1A, #0D0D0D) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    padding: 8px !important;
}

.inmain-card {
    background: linear-gradient(145deg, #2A2218, #1A1A1A) !important;
    border-radius: 10px !important;
    border: 1px solid rgba(212, 160, 23, 0.15) !important;
}

/* ============================================================
   JACKPOT BOX — Pulse Animation (Blue)
   ============================================================ */
.boxjackpot {
    border: 1px solid rgba(212, 160, 23, 0.5) !important;
    box-shadow: 0 0 8px rgba(212, 160, 23, 0.3) !important;
    background: #1A1A1A !important;
    border-radius: 10px !important;
    animation: goldPulse 2s ease-in-out infinite !important;
}

.boxjptop {
    border: 1px solid rgba(212, 160, 23, 0.4) !important;
    box-shadow: 0 0 6px rgba(212, 160, 23, 0.2) !important;
    background: rgba(26, 20, 0, 0.8) !important;
    border-radius: 8px !important;
    animation: goldPulse 2s ease-in-out infinite !important;
}

@keyframes goldPulse {
    0%   { box-shadow: 0 0 5px rgba(212, 160, 23, 0.3); }
    50%  { box-shadow: 0 0 15px rgba(212, 160, 23, 0.6); }
    100% { box-shadow: 0 0 5px rgba(212, 160, 23, 0.3); }
}

/* ============================================================
   LOGIN FORM AREA
   ============================================================ */
.toplogin {
    background: rgba(22, 22, 22, 0.95) !important;
    border: 1px solid #2A2218 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(10px);
    color: #FFF3D0 !important;
}
.toplogin a {
    color: #E8C252 !important;
}
.toplogin a:hover {
    color: #F0C75E !important;
}

.toplogin .form-control {
    background: #0D0D0D !important;
    border: 1px solid #2A2218 !important;
    border-radius: 8px !important;
    color: #FFF8F0 !important;
    padding: 10px 15px !important;
    transition: border-color 0.2s ease !important;
}
.toplogin .form-control:focus {
    border-color: #D4A017 !important;
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.2) !important;
}
.toplogin .form-control::placeholder {
    color: #8A7A5E !important;
}

.toplogin .input-group-text {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    color: #F0C75E !important;
    border-radius: 8px 0 0 8px !important;
}

.toplogin .custom-control-label {
    color: #A09080 !important;
}

/* ============================================================
   FOOTER — Clean Dark Gold
   ============================================================ */
.footerindex {
    background: #050505 !important;
    border-top: 1px solid #1A1A1A !important;
    color: #A09080 !important;
    position: relative !important;
    bottom: auto !important;
    flex-shrink: 0 !important;
}
.footerindex a {
    color: #F0C75E !important;
}
.footerindex a:hover {
    color: #E8C252 !important;
}

/* ============================================================
   BOTTOM NAVBAR — Modern Tab Bar
   ============================================================ */
.botnavbar {
    background: #0D0D0D !important;
    border-top: 1px solid #1A1A1A !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3) !important;
}

#menu-mobile a {
    color: #A09080 !important;
    border-left: 1px solid transparent !important;
    border-right: 1px solid transparent !important;
    transition: all 0.2s ease !important;
}
#menu-mobile a:hover,
#menu-mobile a.active {
    color: #D4A017 !important;
    background: rgba(212, 160, 23, 0.08) !important;
    box-shadow: inset 0 -3px 0 #D4A017 !important;
    border-top: none !important;
}
#menu-mobile a i,
#menu-mobile a .sn-icon {
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-color: transparent !important;
    color: inherit !important;
}
#menu-mobile a small {
    color: inherit !important;
}

/* ============================================================
   HAMBURGER MENU — Full overlay override
   ============================================================ */
.outer-menu .menu > div {
    background: rgba(11, 11, 11, 0.99) !important;
    color: #FFF3D0 !important;
    text-shadow: none !important;
    width: 300vmax !important;
    height: 300vmax !important;
}
.outer-menu .menu > div > div {
    background: transparent !important;
}
.outer-menu .menu > div > div ul li a {
    color: #FFF3D0 !important;
    text-shadow: none !important;
}
.outer-menu .menu > div > div ul li a:hover {
    color: #D4A017 !important;
    text-shadow: none !important;
}
.outer-menu .menu > div > div ul li a:hover:after {
    background: #D4A017 !important;
}
.outer-menu .menu > div > div ul li {
    color: #FFF3D0 !important;
    text-shadow: none !important;
}
.outer-menu .menu > div > div ul li .badge {
    background-color: #2A2218 !important;
    color: #FFF8F0 !important;
}
.outer-menu .menu > div > div ul li .img-thumbnail {
    border-color: #D4A017 !important;
    background: #1A1A1A !important;
}
.outer-menu .hamburger {
    background: rgba(26, 20, 0, 0.85) !important;
}
.outer-menu .hamburger > div,
.outer-menu .hamburger > div::before,
.outer-menu .hamburger > div::after {
    background: #FFF8F0 !important;
}

/* ============================================================
   GENERIC CARDS / PANELS
   ============================================================ */
.card {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    border-radius: 12px !important;
}

.bg-dark {
    background-color: #1A1A1A !important;
}

.badge-dark {
    background-color: #2A2218 !important;
    color: #FFF8F0 !important;
}

.badge-light {
    background-color: rgba(212, 160, 23, 0.15) !important;
    color: #FFF8F0 !important;
}

.text-muted {
    color: #8A7A5E !important;
}

/* ============================================================
   TABLE STYLES
   ============================================================ */
.table {
    color: #E8E0D0 !important;
}
.table thead th {
    background: #1A1A1A !important;
    border-color: #2A2218 !important;
    color: #E8C252 !important;
}
.table td, .table th {
    border-color: #2A2218 !important;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(22, 22, 22, 0.5) !important;
}

/* ============================================================
   FORM CONTROLS (Global)
   ============================================================ */
.form-control {
    background-color: #0D0D0D !important;
    border: 1px solid #2A2218 !important;
    color: #FFF8F0 !important;
    border-radius: 8px !important;
}
.form-control:focus {
    border-color: #D4A017 !important;
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.15) !important;
    background-color: #0D0D0D !important;
    color: #FFF8F0 !important;
}

/* ============================================================
   MODAL STYLES
   ============================================================ */
.modal-content {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    border-radius: 16px !important;
    color: #E8E0D0 !important;
}
.modal-header {
    border-bottom: 1px solid #2A2218 !important;
}
.modal-footer {
    border-top: 1px solid #2A2218 !important;
}
.modal-header .close {
    color: #A09080 !important;
}

/* ============================================================
   DROPDOWN / SELECT
   ============================================================ */
.dropdown-menu {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}
.dropdown-item {
    color: #E8E0D0 !important;
}
.dropdown-item:hover {
    background: rgba(212, 160, 23, 0.1) !important;
    color: #D4A017 !important;
}

/* ============================================================
   ALERTS / TOASTS
   ============================================================ */
.alert-warning {
    background: rgba(212, 160, 23, 0.15) !important;
    border-color: #D4A017 !important;
    color: #E8C252 !important;
}

/* ============================================================
   MENU BUTTONS (Member Main)
   ============================================================ */
.menu-btn {
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}
.menu-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(212, 160, 23, 0.2) !important;
}

/* ============================================================
   IMAGE TABS / GAME CARDS
   ============================================================ */
.image-container {
    border-radius: 12px !important;
    overflow: hidden;
    border: 1px solid #2A2218 !important;
    transition: all 0.2s ease !important;
}
.image-container:hover {
    border-color: #D4A017 !important;
    box-shadow: 0 4px 16px rgba(212, 160, 23, 0.25) !important;
}
.image-tab {
    background: linear-gradient(transparent, rgba(11, 11, 11, 0.9)) !important;
    border: none !important;
    border-radius: 0 !important;
    color: #FFF8F0 !important;
    font-weight: 500;
    padding: 12px 10px 8px !important;
}

/* ============================================================
   SCROLLBAR (Webkit)
   ============================================================ */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #0D0D0D;
}
::-webkit-scrollbar-thumb {
    background: #2A2218;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #D4A017;
}

/* ============================================================
   USER INFO IN TOPBAR
   ============================================================ */
.txt-user {
    color: #FFF8F0 !important;
}
.txt-user small {
    color: #A09080 !important;
}

.pic-user {
    border: 2px solid #2A2218 !important;
    border-radius: 50% !important;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.page-item.active .page-link {
    background-color: #D4A017 !important;
    border-color: #D4A017 !important;
}
.page-link {
    background-color: #1A1A1A !important;
    border-color: #2A2218 !important;
    color: #E8C252 !important;
}
.page-link:hover {
    background-color: #2A2218 !important;
    color: #FFF8F0 !important;
}

/* ============================================================
   MISC OVERRIDES
   ============================================================ */
.btn-dark {
    background-color: #2A2218 !important;
    border-color: #3A3228 !important;
    border-radius: 8px !important;
}
.btn-dark:hover {
    background-color: #1A1A1A !important;
    border-color: #D4A017 !important;
}

.btn-primary {
    background-color: #D4A017 !important;
    border-color: #B8860B !important;
    border-radius: 8px !important;
}

.btn-outline-primary {
    color: #D4A017 !important;
    border-color: #D4A017 !important;
    border-radius: 8px !important;
}
.btn-outline-primary:hover {
    background-color: #D4A017 !important;
    color: #FFFFFF !important;
}

hr {
    border-top-color: #2A2218 !important;
}

.dropdown-divider {
    border-top-color: #2A2218 !important;
}

/* selection color */
::selection {
    background: #D4A017;
    color: #FFFFFF;
}

/* ============================================================
   BOOTSTRAP WARNING CLASSES → GOLD THEME
   badge-warning, bg-warning, btn-warning, border-warning, text-warning
   ============================================================ */
.badge-warning {
    background-color: #8B6914 !important;
    color: #FFF3D0 !important;
}

.bg-warning {
    background-color: #B8860B !important;
    color: #FFFFFF !important;
}

.btn-warning {
    background-color: #D4A017 !important;
    border-color: #B8860B !important;
    color: #FFFFFF !important;
}
.btn-warning:hover {
    background-color: #B8860B !important;
    border-color: #8B6914 !important;
    color: #FFFFFF !important;
}

.border-warning {
    border-color: #D4A017 !important;
}

.text-warning {
    color: #F0C75E !important;
}

.table-warning, .table-warning > td, .table-warning > th {
    background-color: rgba(212, 160, 23, 0.12) !important;
    color: #FFF3D0 !important;
}

.btn-outline-warning {
    color: #F0C75E !important;
    border-color: #D4A017 !important;
}
.btn-outline-warning:hover {
    background-color: #D4A017 !important;
    color: #FFFFFF !important;
}

/* ============================================================
   GOLDPATTERN → BLUE GRADIENT (head-huay, lottery headers)
   ============================================================ */
.head-huay.goldpattern {
    background: linear-gradient(135deg, #1A1400 0%, #0D0D0D 100%) !important;
    color: #FFF8F0 !important;
}
.head-huay.goldpattern a {
    color: #FFF3D0 !important;
}
.head-huay.goldpattern .fullflag {
    background-color: #B8860B !important;
    color: #FFFFFF !important;
}

/* ============================================================
   STATEMENT PAGE SPECIFIC
   ============================================================ */
.statement-table th {
    background: #1A1A1A !important;
    color: #E8C252 !important;
}

/* ============================================================
   DEPOSIT / WITHDRAW PAGE
   ============================================================ */
.bank-card, .bank-item {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    border-radius: 12px !important;
}

.step-header, .bs-stepper .step-trigger {
    color: #FFF3D0 !important;
}
.bs-stepper .step-trigger:hover {
    color: #F0C75E !important;
}

.bs-stepper .line {
    background-color: #2A2218 !important;
}

.active .bs-stepper-circle, .bs-stepper-circle {
    background-color: #D4A017 !important;
    color: #FFFFFF !important;
}

/* ============================================================
   LOTTERY PAGE — huay cards, flags
   ============================================================ */
.fullflag {
    background-color: #B8860B !important;
    color: #FFFFFF !important;
}

.closeflag {
    background-color: #DC2626 !important;
    color: #FFFFFF !important;
}

.head-huay {
    border-radius: 8px 8px 0 0 !important;
}

.body-huay {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    color: #E8E0D0 !important;
}

/* ============================================================
   POY / RECEIPT PAGE
   ============================================================ */
.card.border-warning {
    border-color: #D4A017 !important;
}
.card-header.border-warning {
    background: #1A1A1A !important;
    border-color: #D4A017 !important;
    color: #FFF3D0 !important;
}
.card-body.goldpattern {
    background: linear-gradient(135deg, #1A1400 0%, #0D0D0D 100%) !important;
    color: #FFF8F0 !important;
}
.card-body.table-warning {
    background: rgba(212, 160, 23, 0.08) !important;
    color: #FFF3D0 !important;
}

/* ============================================================
   SETTINGS PAGE
   ============================================================ */
.list-group-item {
    background-color: #1A1A1A !important;
    border-color: #2A2218 !important;
    color: #E8E0D0 !important;
}
.list-group-item:hover, .list-group-item.active {
    background-color: rgba(212, 160, 23, 0.1) !important;
    color: #FFF8F0 !important;
}

.nav-tabs .nav-link {
    color: #A09080 !important;
    border-color: transparent !important;
}
.nav-tabs .nav-link.active {
    background-color: #1A1A1A !important;
    border-color: #2A2218 #2A2218 transparent !important;
    color: #D4A017 !important;
}
.nav-tabs .nav-link:hover {
    color: #F0C75E !important;
}

.tab-content {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    border-top: none !important;
    border-radius: 0 0 10px 10px !important;
    color: #E8E0D0 !important;
}

/* ============================================================
   MISC: Ensure dark backgrounds everywhere
   ============================================================ */
.contentbody {
    color: #E8E0D0;
}

.bg-light {
    background-color: #1A1A1A !important;
}

.bg-white {
    background-color: #1A1A1A !important;
}

.text-dark {
    color: #FFF3D0 !important;
}

.text-secondary {
    color: #A09080 !important;
}

.text-light {
    color: #FFF8F0 !important;
}

.border {
    border-color: #2A2218 !important;
}

.border-bottom {
    border-bottom-color: #2A2218 !important;
}
.border-right {
    border-right-color: #2A2218 !important;
}
.border-left {
    border-left-color: #2A2218 !important;
}
.border-top {
    border-top-color: #2A2218 !important;
}

.shadow, .shadow-sm, .shadow-lg {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

input, select, textarea {
    color-scheme: dark;
}

/* ============================================================
   GLOBAL TEXT COLOR FIX — prevent dark text on dark bg
   ============================================================ */
body,
.contentbody,
#content,
#wrapper,
#section-content,
.main-content,
.container {
    color: #E8E0D0 !important;
}
p, span, div, li, td, th, label, small, strong, b, em {
    color: inherit;
}
.text-black,
.txt-box-news a,
.txt-box-news1 a {
    color: #E8E0D0 !important;
}
a {
    color: #E8C252;
}
a:hover {
    color: #F0C75E;
}
h1, h2, h3, h4, h5, h6 {
    color: #FFF8F0 !important;
}
.text-muted {
    color: #A09080 !important;
}
.text-body {
    color: #E8E0D0 !important;
}
.nav-link {
    color: #D4C4A0 !important;
}
.nav-link.active {
    color: #FFF8F0 !important;
}
.nav-pills .nav-link {
    color: #D4C4A0 !important;
}
.list-group-item {
    background: #1A1A1A !important;
    color: #E8E0D0 !important;
    border-color: #2A2218 !important;
}
.bar-back a.btn-outline-secondary {
    color: #D4C4A0 !important;
    border-color: #3A3228 !important;
}
.bar-back a.btn-outline-secondary:hover {
    color: #FFF8F0 !important;
    background: #2A2218 !important;
}
.addbankstatus .status small {
    color: #D4C4A0 !important;
}
#menucredit .nav-link {
    color: #D4C4A0 !important;
}
.round, .ribbon-lotto span.round {
    color: #D4C4A0 !important;
}
.nav-slide li,
.nav-slide-yeekee li {
    color: #FFF3D0 !important;
    text-shadow: none !important;
}
.btn {
    color: #E8E0D0;
}
.btn-outline-secondary {
    color: #D4C4A0 !important;
    border-color: #3A3228 !important;
}
.btn-outline-secondary:hover {
    color: #FFF8F0 !important;
    background: #3A3228 !important;
}
.close {
    color: #A09080 !important;
    text-shadow: none !important;
}
.close:hover {
    color: #FFF8F0 !important;
}

/* ============================================================
   BORDERED MENU ITEMS (twbox grid menu)
   ============================================================ */
.border-menu {
    border-color: #2A2218 !important;
}
.border-menu a {
    color: #FFF3D0 !important;
}
.border-menu a:hover {
    color: #D4A017 !important;
}

/* ============================================================
   REGISTER / FORGET PASSWORD PAGES
   ============================================================ */
.register-form, .forget-form {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    border-radius: 12px !important;
}

/* ============================================================
   ZEAN PAGE
   ============================================================ */
.zean-card {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
}

/* ============================================================
   INVITE / AFFILIATE PAGE
   ============================================================ */
.invite-box, .affiliate-card {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    border-radius: 12px !important;
}

/* Affiliate stats row */
.table-secondary .text-warning {
    color: #F0C75E !important;
}
.table-secondary .bg-secondary {
    background: linear-gradient(135deg, #8B6914, #D4A017) !important;
    border-radius: 10px !important;
}
.table-secondary .bg-secondary .text-warning {
    color: #FFF8F0 !important;
    font-size: 18px;
    font-weight: 700;
}
.table-secondary .bg-white,
.table-secondary .rounded.bg-white {
    background: #0D0D0D !important;
    border: 1px solid #2A2218 !important;
    border-radius: 10px !important;
}
.table-secondary .bg-white h6,
.table-secondary .rounded.bg-white h6 {
    font-weight: 700 !important;
}
.table-secondary .text-primary {
    color: #F0C75E !important;
}
.table-secondary .text-info {
    color: #38BDF8 !important;
}

/* btn-labeled for statement buttons */
.btn-labeled {
    border-radius: 12px !important;
}
.btn-labeled .btn-label {
    color: #F0C75E !important;
}

.btn-secondary {
    background-color: #2A2218 !important;
    border-color: #3A3228 !important;
    border-radius: 8px !important;
}
.btn-secondary:hover {
    background-color: #3A3228 !important;
    border-color: #D4A017 !important;
}

.btn-success {
    background-color: #059669 !important;
    border-color: #047857 !important;
    border-radius: 8px !important;
}
.btn-success:hover {
    background-color: #047857 !important;
}

.btn-danger {
    background-color: #DC2626 !important;
    border-color: #B91C1C !important;
    border-radius: 8px !important;
    background-image: none !important;
    text-shadow: none !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3) !important;
    color: #FFFFFF !important;
    background-size: auto !important;
}
.btn-danger:hover, .btn-danger:focus {
    background-color: #B91C1C !important;
    background-image: none !important;
    background-size: auto !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.4) !important;
    border-color: #991B1B !important;
    color: #FFFFFF !important;
    text-shadow: none !important;
}
.btn-danger:active {
    background-color: #991B1B !important;
    background-image: none !important;
    box-shadow: none !important;
}
.btn-outline-danger {
    color: #EF4444 !important;
    border-color: #EF4444 !important;
    background: transparent !important;
}
.btn-outline-danger:hover {
    background-color: #DC2626 !important;
    color: #FFFFFF !important;
}

.btn-info {
    background-color: #0EA5E9 !important;
    border-color: #0284C7 !important;
    border-radius: 8px !important;
}

.btn-light {
    background-color: #2A2218 !important;
    border-color: #3A3228 !important;
    color: #FFF8F0 !important;
    border-radius: 8px !important;
}
.btn-light:hover {
    background-color: #3A3228 !important;
    color: #FFFFFF !important;
}

/* ============================================================
   GOLD GRADIENT ELEMENTS → GOLD OVERRIDES
   style.css redefines many Bootstrap classes with gold gradients
   ============================================================ */

/* .subbglogin (login sub-section) */
.subbglogin {
    background-image: linear-gradient(135deg, #1A1A1A, #2A2218) !important;
    background-color: #1A1A1A !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    border-color: #2A2218 !important;
    color: #FFF3D0 !important;
}

/* sidebar — ensure it stays on top of everything */
#sidebar {
    z-index: 10000 !important;
}
.overlay {
    z-index: 9999 !important;
}
/* sidebar header */
#sidebar .sidebar-header {
    background-image: linear-gradient(135deg, #1A1400, #0D0D0D) !important;
    border-color: #2A2218 !important;
    color: #FFF8F0 !important;
}

/* .btn-success.btn-credit — site overrides this to gold! */
.btn-success.btn-credit,
.btn-credit {
    background-image: linear-gradient(135deg, #D4A017, #B8860B) !important;
    background-color: #D4A017 !important;
    border: 1px solid #B8860B !important;
    color: #FFFFFF !important;
    text-shadow: none !important;
    box-shadow: 0 4px 14px rgba(212, 160, 23, 0.4) !important;
}
.btn-success.btn-credit:hover,
.btn-credit:hover {
    background-image: linear-gradient(135deg, #B8860B, #8B6914) !important;
    box-shadow: 0 6px 20px rgba(212, 160, 23, 0.5) !important;
}

/* Modal headers with gold gradient */
.modal-header.bg-danger {
    background-image: linear-gradient(135deg, #1A1400, #0D0D0D) !important;
    background-color: #1A1A1A !important;
    border-color: #2A2218 !important;
    color: #FFF8F0 !important;
    text-shadow: none !important;
}

/* bg-danger gold override → keep red */
.bg-danger {
    background-color: #DC2626 !important;
    background-image: none !important;
}
.w-100.border.border-danger.bg-danger.rounded {
    background-image: none !important;
    background-color: #DC2626 !important;
    border-color: #B91C1C !important;
    text-shadow: none !important;
}
.w-100.border.border-danger.bg-danger.rounded.p-1.text-center {
    background: linear-gradient(135deg, #1A1400 0%, #8B6914 50%, #1A1400 100%) !important;
    background-image: linear-gradient(135deg, #1A1400 0%, #8B6914 50%, #1A1400 100%) !important;
    border: 1px solid rgba(212, 160, 23, 0.5) !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
    box-shadow: 0 0 20px rgba(212, 160, 23, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

.badge.badge-danger {
    background: #DC2626 !important;
    color: #FFFFFF !important;
}

/* Nav pills active tab (gold → blue) */
#nav-tab1.nav-pills .nav-link.active,
.nav-pills .nav-link.active {
    background-image: linear-gradient(135deg, #D4A017, #B8860B) !important;
    background-color: #D4A017 !important;
    color: #FFFFFF !important;
    text-shadow: none !important;
    border-color: #B8860B !important;
}
#nav-tab1.nav-pills .nav-link,
.nav-pills .nav-link {
    color: #A09080 !important;
    background-color: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    text-shadow: none !important;
}
.nav-pills .nav-link:hover {
    color: #F0C75E !important;
    background-color: #2A2218 !important;
}

/* bglogin section */
.bglogin {
    background: #1A1A1A !important;
    border-color: #2A2218 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    color: #FFF3D0 !important;
}

/* bgwhitealpha sections — full override (removes white border/bg) */
.bgwhitealpha {
    background: rgba(22, 22, 22, 0.95) !important;
    border: 1px solid #2A2218 !important;
    border-radius: 10px !important;
    color: #E8E0D0 !important;
}
.bgwhitealpha h6 {
    color: #FFF3D0 !important;
    text-shadow: none !important;
}
.bgwhitealpha h6.text-danger {
    color: #F0C75E !important;
    text-shadow: none !important;
}
.bgwhitealpha h6 span {
    text-shadow: none !important;
    color: #A09080 !important;
}
.bgwhitealpha .card-header {
    background: transparent !important;
    color: #E8E0D0 !important;
}
.bgwhitealpha .border-card-right {
    border-right-color: #2A2218 !important;
}
.bgwhitealpha .sub-card-header {
    color: #A09080 !important;
}
.bgwhitealpha .bg-danger {
    background-color: #DC2626 !important;
    background-image: none !important;
}

/* main-content area — transparent to avoid two-tone bg */
.main-content {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* bar-back navigation link */
.bar-back a {
    color: #E8C252 !important;
}
.bar-back a:hover {
    color: #F0C75E !important;
}

/* lotto-title */
.lotto-title h4 {
    color: #FFF3D0 !important;
}

/* font-number display */
.font-number {
    color: #FFF8F0 !important;
}

/* page-link gold → blue */
.page-link:hover {
    color: #D4A017 !important;
}

/* ============================================================
   #MENUCREDIT — Statement / Request tabs (gold → blue)
   ============================================================ */
#menucredit .nav-link {
    color: #A09080 !important;
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
}
#menucredit .nav-link:hover {
    color: #F0C75E !important;
    background: #2A2218 !important;
}
#menucredit .nav-link.active {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #D4A017, #B8860B) !important;
    border: 1px solid #B8860B !important;
    text-shadow: none !important;
}

/* ============================================================
   ACCORDION — Statement/Credit history cards
   ============================================================ */
.accordion .card {
    background: transparent !important;
    border: none !important;
}
.accordion .card-header {
    color: #E8E0D0 !important;
    background: #1A1A1A !important;
    padding: 0 !important;
}
.accordion .card-header:hover {
    background: rgba(42, 36, 24, 0.5) !important;
}
.accordion .card-header h4 {
    color: #FFF3D0 !important;
}
.accordion .card-body {
    background: #0D0D0D !important;
    color: #E8E0D0 !important;
}
.accordion .card-body:after {
    border-color: transparent transparent #0D0D0D transparent !important;
}
.accordion .card-body a {
    color: #F0C75E !important;
}

/* ============================================================
   SELECT / CUSTOM-SELECT
   ============================================================ */
select,
.custom-select {
    background-color: #0D0D0D !important;
    border: 1px solid #2A2218 !important;
    color: #FFF8F0 !important;
    color-scheme: dark;
}
select:focus,
.custom-select:focus {
    border-color: #D4A017 !important;
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.15) !important;
}

/* ============================================================
   INPUT GROUP TEXT (append/prepend icons)
   ============================================================ */
.input-group-text {
    background-color: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    color: #F0C75E !important;
}

/* ============================================================
   CARD-HEADER GENERIC — white bg override
   ============================================================ */
.card-header {
    background-color: #1A1A1A !important;
    border-bottom-color: #2A2218 !important;
    color: #FFF3D0 !important;
}
.card-footer {
    background-color: #1A1A1A !important;
    border-top-color: #2A2218 !important;
    color: #E8E0D0 !important;
}
.card-body {
    background-color: #1A1A1A !important;
    color: #E8E0D0 !important;
}

/* ============================================================
   ROUNDED containers with bg-light / bg-white
   ============================================================ */
.rounded.bg-light,
.rounded.bg-white {
    background-color: #1A1A1A !important;
}

/* ============================================================
   BOOTSTRAP TEXT UTILITY OVERRIDES for GOLD THEME
   ============================================================ */
.text-info {
    color: #38BDF8 !important;
}
.text-danger {
    color: #F87171 !important;
}
.text-success {
    color: #34D399 !important;
}
.text-primary {
    color: #F0C75E !important;
}

/* ============================================================
   NAV-SLIDE — Lottery round selectors (white bg → dark)
   ============================================================ */
.nav-slide li,
.nav-slide-yeekee li {
    background-color: rgba(22, 22, 22, 0.8) !important;
    color: #FFF3D0 !important;
}
.nav-slide .active,
.nav-slide-yeekee .active {
    background-color: #1A1A1A !important;
    box-shadow: inset 0px 0px 0px 2px #D4A017 !important;
    -webkit-box-shadow: inset 0px 0px 0px 2px #D4A017 !important;
    -moz-box-shadow: inset 0px 0px 0px 2px #D4A017 !important;
}
.border-active .nav-slide li,
.border-active .nav-slide-yeekee li {
    background-color: rgba(11, 11, 11, 0.7) !important;
    color: #FFF3D0 !important;
    text-shadow: none !important;
}
.border-active .nav-slide li.active,
.border-active .nav-slide-yeekee li.active {
    color: #FFF8F0 !important;
    text-shadow: none !important;
    background-color: #1A1A1A !important;
}
.border-active .nav-slide .active,
.border-active .nav-slide-yeekee .active {
    background-color: #1A1A1A !important;
    box-shadow: inset 0px 0px 0px 2px #F0C75E !important;
    -webkit-box-shadow: inset 0px 0px 0px 2px #F0C75E !important;
    -moz-box-shadow: inset 0px 0px 0px 2px #F0C75E !important;
}

/* ============================================================
   BORDER-SECONDARY
   ============================================================ */
.border-secondary {
    border-color: #3A3228 !important;
}

/* ============================================================
   COL-LOTTO BG-BTN
   ============================================================ */
.col-lotto .bg-btn {
    background: #1A1A1A !important;
    border-color: #2A2218 !important;
}

/* ============================================================
   BTN-GROUP-TOGGLE — Lottery number type buttons (gold → blue)
   ============================================================ */
.btn-group-toggle > .btn-outline-danger.focus,
.btn-group-toggle > .btn-outline-danger:hover {
    color: #D4A017 !important;
}
.btn-group-toggle > .btn-outline-danger.focus.active,
.btn-group-toggle > .btn-outline-danger.active {
    background: #D4A017 !important;
    color: #FFFFFF !important;
}
.btn-rood {
    border-color: #2A2218 !important;
    color: #E8E0D0 !important;
    background-color: #1A1A1A !important;
}
.btn-rood.active,
.btn-rood:hover {
    background-color: #D4A017 !important;
    border-color: #B8860B !important;
    color: #FFFFFF !important;
}

/* ============================================================
   LABEL ELEMENTS
   ============================================================ */
label {
    color: #FFF3D0 !important;
}

/* ============================================================
   TEXT-WHITE — ensure proper contrast
   ============================================================ */
.text-white {
    color: #FFF8F0 !important;
}

/* ============================================================
   BORDER-SUCCESS, BORDER-DANGER
   ============================================================ */
.border-success {
    border-color: #059669 !important;
}
.border-danger {
    border-color: #DC2626 !important;
}

/* ============================================================
   BTN-AF — Affiliate/Invite menu tabs (white/gold → dark/blue)
   ============================================================ */
.btn-af {
    background: #1A1A1A !important;
    color: #FFF3D0 !important;
    border-color: #2A2218 !important;
}
.btn-af:hover {
    background: #2A2218 !important;
    color: #FFF8F0 !important;
    border-color: #D4A017 !important;
}
.btn-af.active,
.btn-af:active {
    background: #D4A017 !important;
    color: #FFFFFF !important;
    border-color: #B8860B !important;
}

/* ============================================================
   BTN-OUTLINE-DANGER — style.css overrides this to gold!
   Must match EVERY high-specificity selector from style.css
   ============================================================ */
.btn-outline-danger {
    color: #EF4444 !important;
    background-color: #1A1A1A !important;
    border-color: #EF4444 !important;
}
.btn-outline-danger:hover {
    color: #FFFFFF !important;
    background-color: #DC2626 !important;
    border-color: #DC2626 !important;
}
.btn-outline-danger:not(:disabled):not(.disabled).active {
    color: #FFFFFF !important;
    background-color: #D4A017 !important;
    border-color: #B8860B !important;
}
.btn-af.btn-outline-danger {
    color: #FFF3D0 !important;
    background-color: #1A1A1A !important;
    border-color: #2A2218 !important;
}
.btn-af.btn-outline-danger:hover {
    color: #FFF8F0 !important;
    background-color: #2A2218 !important;
    border-color: #D4A017 !important;
}
.btn-af.btn-outline-danger:not(:disabled):not(.disabled).active {
    color: #FFFFFF !important;
    background: #D4A017 !important;
    border-color: #B8860B !important;
}

/* ============================================================
   TABLE-SECONDARY — Affiliate stats container
   ============================================================ */
.table-secondary,
.table-secondary > td,
.table-secondary > th {
    background-color: #1A1A1A !important;
    color: #E8E0D0 !important;
    border-color: #2A2218 !important;
}

/* ============================================================
   ALERTS — Override for dark theme
   ============================================================ */
.alert-primary {
    background-color: rgba(212, 160, 23, 0.15) !important;
    border-color: #D4A017 !important;
    color: #E8C252 !important;
}
.alert-success {
    background-color: rgba(5, 150, 105, 0.15) !important;
    border-color: #059669 !important;
    color: #6EE7B7 !important;
}
.alert-danger {
    background-color: rgba(220, 38, 38, 0.15) !important;
    border-color: #DC2626 !important;
    color: #FCA5A5 !important;
}
.alert-info {
    background-color: rgba(14, 165, 233, 0.15) !important;
    border-color: #0EA5E9 !important;
    color: #7DD3FC !important;
}

/* ============================================================
   BTN-OUTLINE-MENU — member.css gold overrides
   ============================================================ */
.btn-outline-menu {
    color: #FFF3D0 !important;
    border-color: #2A2218 !important;
    background: #1A1A1A !important;
}
.btn-outline-menu:hover,
.btn-outline-menu.focus {
    color: #F0C75E !important;
    background: #2A2218 !important;
}
.btn-outline-menu.active,
.btn-outline-menu.focus.active {
    color: #FFFFFF !important;
    background: #D4A017 !important;
    border-color: #B8860B !important;
}

/* ============================================================
   BG-SECONDARY
   ============================================================ */
.bg-secondary {
    background-color: #2A2218 !important;
}

/* ============================================================
   BANK RADIO CARDS — Withdraw/Deposit page
   ============================================================ */
input[type=radio]:checked+label>img {
    border-color: #D4A017 !important;
    box-shadow: 0 0 3px 3px rgba(212, 160, 23, 0.5) !important;
}
input[type=radio]:checked+label {
    background: #B8860B !important;
    color: #FFFFFF !important;
}
input[type=radio]:checked+label::after {
    color: #D4A017 !important;
    background: #0D0D0D !important;
    border-color: #D4A017 !important;
}
input[type=radio]+label>img {
    border-color: #2A2218 !important;
}
input[type=radio]+label>span {
    color: #FFF3D0 !important;
}
input[type=radio]+label>span.badge {
    background-color: #2A2218 !important;
    color: #FFF8F0 !important;
}
.bank-radio {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    border-radius: 8px !important;
}

/* ============================================================
   RESPONSIVE: ensure mobile bottom padding for botbar
   ============================================================ */
@media (max-width: 768px) {
    .contentbody {
        padding-bottom: 80px !important;
    }
}

/* ============================================================
   PAGEBET — Main Betting Page
   ============================================================ */

/* Lotto header card */
.col-lotto {
    background: linear-gradient(135deg, #1A1400 0%, #0D0D0D 100%) !important;
    border: 1px solid rgba(212, 160, 23, 0.2) !important;
    border-radius: 14px !important;
    padding: 14px 16px !important;
}
.tanghuay-h4 {
    color: #FFF8F0 !important;
    font-weight: 600 !important;
}
.tanghuay-time, .tanghuay-time_day {
    color: #E8C252 !important;
}
.tanghuay-time ul li span,
.tanghuay-time_day ul li span {
    color: #F0C75E !important;
}

/* Row menu grid container */
.row-menu-grid {
    background: transparent !important;
}
.cart-item-lists {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    border-radius: 14px !important;
    padding: 12px !important;
}

/* Nav tabs for keyboard/panghuay */
#nav-tab1.nav-tabs {
    border-bottom: 2px solid #2A2218 !important;
    gap: 4px;
}
#nav-tab1 .nav-link {
    background: #0D0D0D !important;
    border: 1px solid #2A2218 !important;
    border-radius: 10px 10px 0 0 !important;
    color: #A09080 !important;
    font-weight: 500;
    transition: all 0.2s ease;
    text-shadow: none !important;
}
#nav-tab1 .nav-link.active {
    background: #1A1A1A !important;
    border-color: #D4A017 !important;
    border-bottom-color: #1A1A1A !important;
    color: #D4A017 !important;
    font-weight: 600;
}
#nav-tab1 .nav-link:hover:not(.active) {
    color: #F0C75E !important;
    background: #2A2218 !important;
}

/* Action buttons row (pull poy / enter price) */
.sidebar-tanghuay .row.bg-dark {
    background: linear-gradient(135deg, #0D0D0D 0%, #1A1A1A 100%) !important;
    border: 1px solid #2A2218 !important;
    border-radius: 12px !important;
    padding: 12px 8px !important;
}

/* Sidebar bet list */
.sidebar-huay {
    background: transparent !important;
}
.sidebar-huay .title-huay {
    color: #F0C75E !important;
    font-weight: 600 !important;
}
.sidebar-huay .list-huay {
    background: #0D0D0D !important;
    border: 1px solid #2A2218 !important;
    border-radius: 10px !important;
}
.sidebar-huay .list-huay ol.num-huay {
    color: #E8E0D0 !important;
}
.sidebar-huay .list-huay ol.num-huay li::before {
    color: #8A7A5E !important;
}
.sidebar-huay .bet_num_count {
    color: #A09080 !important;
}
.sidebar-huay .btn-danger {
    background: linear-gradient(135deg, #DC2626, #B91C1C) !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
}
.sidebar-huay .btn-light {
    background: #2A2218 !important;
    border-color: #3A3228 !important;
    color: #FFF8F0 !important;
    border-radius: 10px !important;
}

/* Number display in show-list */
#show-list-huay {
    background: #0D0D0D !important;
    border: 1px solid #2A2218 !important;
    border-radius: 8px !important;
}
#show-list-huay .bet_num_count {
    background: #D4A017 !important;
    color: #FFFFFF !important;
}
#show-list-huay .btn-move-right {
    background: #2A2218 !important;
    color: #FFF8F0 !important;
}

/* Button move arrows */
.btn-move-left {
    background: #1A1A1A !important;
    color: #FFF8F0 !important;
}
.btn-move-left:before {
    border-right-color: #1A1A1A !important;
}
.btn-move-right {
    background: #1A1A1A !important;
    color: #FFF8F0 !important;
}
.btn-move-right:after {
    border-left-color: #1A1A1A !important;
}

/* Condition info box (rules) — override gold #dc9c35 from style.css */
.box__condition-info {
    background: #0D0D0D !important;
    border: 1px solid #2A2218 !important;
    border-radius: 10px !important;
    padding: 12px !important;
    color: #A09080 !important;
}
.box__condition-info h2 {
    color: #F0C75E !important;
    font-size: 14px !important;
    border-bottom-color: #2A2218 !important;
}
.box__condition-info h3 {
    color: #FFF8F0 !important;
    background: linear-gradient(135deg, #8B6914, #B8860B) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
}
.box__condition-info p {
    color: #A09080 !important;
}

/* Number buttons in panghuay/keyboard — override gold #b47e18 from style.css */
.panghuay_number {
    border-radius: 8px !important;
    font-weight: 500 !important;
    transition: all 0.15s ease !important;
}

/* UNSELECTED: subtle dark — clearly "not chosen" */
.btn-outline-danger.panghuay_number,
.btn-group-toggle .btn-outline-danger.panghuay_number {
    color: #A09080 !important;
    border: 1px solid #2A2218 !important;
    background: #0D0D0D !important;
    box-shadow: none !important;
}

/* HOVER: hint of blue — "about to choose" */
.btn-group-toggle > .btn-outline-danger.focus,
.btn-group-toggle > .btn-outline-danger:hover,
.btn-outline-danger.panghuay_number:hover {
    background: rgba(212, 160, 23, 0.1) !important;
    color: #F0C75E !important;
    border-color: #D4A017 !important;
}

/* SELECTED: bright solid blue with glow — clearly "chosen" */
.btn-group-toggle > .btn-outline-danger.active,
.btn-group-toggle > .btn-outline-danger.focus.active,
.btn-outline-danger.panghuay_number.active {
    background: #D4A017 !important;
    color: #FFFFFF !important;
    border-color: #B8860B !important;
    box-shadow: 0 0 12px rgba(212, 160, 23, 0.5), 0 0 0 2px rgba(212, 160, 23, 0.3) !important;
    font-weight: 700 !important;
    transform: scale(1.05);
}

/* LIMIT: clearly disabled */
.btn-limitnum {
    opacity: 0.25 !important;
    pointer-events: none !important;
    text-decoration: line-through !important;
    border-color: #1A1A1A !important;
}

/* Number tab pills (000, 100, 200...) */
#numlist-tab1 .nav-link {
    background: #0D0D0D !important;
    color: #A09080 !important;
    border: 1px solid #2A2218 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 4px 2px !important;
    text-shadow: none !important;
}
#numlist-tab1 .nav-link.active {
    background: #D4A017 !important;
    color: #FFFFFF !important;
    border-color: #B8860B !important;
}

/* btn-outline-red/blue/green — base overrides for GOLD THEME */
.btn-outline-red {
    color: #E8C252 !important;
    background-color: rgba(212, 160, 23, 0.05) !important;
    border-color: #2A2218 !important;
}
.btn-outline-red.active {
    color: #FFFFFF !important;
    background-color: #8B6914 !important;
    border-color: #8B6914 !important;
}
.btn-outline-blue {
    color: #E8C252 !important;
    background-color: rgba(212, 160, 23, 0.05) !important;
    border-color: #2A2218 !important;
}
.btn-outline-blue.active {
    color: #FFFFFF !important;
    background-color: #B8860B !important;
    border-color: #B8860B !important;
}
.btn-outline-green {
    color: #6EE7B7 !important;
    background-color: rgba(5, 150, 105, 0.05) !important;
    border-color: #2A2218 !important;
}
.btn-outline-green.active {
    color: #FFFFFF !important;
    background-color: #059669 !important;
    border-color: #059669 !important;
}

/* Bet type selector pills (สามตัว, สองตัว, เลขวิ่ง) */
#number-tab .nav-link {
    border-radius: 12px !important;
    font-weight: 600 !important;
    border: 2px solid transparent !important;
    transition: all 0.2s ease !important;
    background: #0D0D0D !important;
    color: #8A7A5E !important;
    text-shadow: none !important;
}
#number-tab .nav-link.active.btn-outline-red {
    background: #8B6914 !important;
    color: #FFFFFF !important;
    border-color: #8B6914 !important;
    box-shadow: 0 4px 12px rgba(139, 105, 20, 0.4) !important;
}
#number-tab .nav-link.active.btn-outline-blue {
    background: #B8860B !important;
    color: #FFFFFF !important;
    border-color: #B8860B !important;
    box-shadow: 0 4px 12px rgba(184, 134, 11, 0.4) !important;
}
#number-tab .nav-link.active.btn-outline-green {
    background: #059669 !important;
    color: #FFFFFF !important;
    border-color: #059669 !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.4) !important;
}

/* Bet type option buttons (3ตัวบน, 3ตัวโต๊ด, etc.) */
.btn-panghuay,
.btn-tanghuay {
    border-radius: 10px !important;
    border: 1px solid #2A2218 !important;
    background: #1A1A1A !important;
    transition: all 0.2s ease !important;
    color: #E8E0D0 !important;
}
.btn-panghuay.active,
.btn-tanghuay.active,
.btn-panghuay:hover,
.btn-tanghuay:hover {
    border-color: #D4A017 !important;
    box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.3) !important;
    background: rgba(212, 160, 23, 0.08) !important;
}

/* ACTIVE state: clear dashed outline → solid blue ring */
.row-btn-tanghuay .btn.active {
    outline: 2px solid #D4A017 !important;
    outline-offset: 2px !important;
}

/* Inner label divs — replace bg-danger red with theme-appropriate colors */
.btn-panghuay .bg-danger,
.btn-tanghuay .bg-danger,
.row-btn-tanghuay .btn .bg-danger {
    background-color: #8B6914 !important;
    background-image: none !important;
    border-radius: 8px 0 0 8px !important;
}
.btn-panghuay .bg-primary,
.btn-tanghuay .bg-primary,
.row-btn-tanghuay .btn .bg-primary {
    background-color: #B8860B !important;
    border-radius: 8px 0 0 8px !important;
}
.btn-panghuay .bg-success,
.btn-tanghuay .bg-success,
.row-btn-tanghuay .btn .bg-success {
    background-color: #059669 !important;
    border-radius: 8px 0 0 8px !important;
}

/* Pay rate value next to bet type label */
.btn-panghuay div:last-child,
.btn-tanghuay div:last-child,
.row-btn-tanghuay .btn div:last-child {
    color: #F0C75E !important;
    font-weight: 600 !important;
}

/* 2-option menu (19 ประตู, etc.) */
.bg-option {
    background: #0D0D0D !important;
    border: 1px solid #2A2218 !important;
    border-radius: 10px !important;
    color: #A09080 !important;
}
.bg-option .bg-btn {
    background: transparent !important;
}

/* Selected items display */
#resultoption {
    color: #A09080 !important;
}

/* Keyboard number pad */
.box__keyboard .btn-outline-primary {
    border-radius: 10px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    padding: 10px !important;
}

/* Empty placeholder buttons — hide into background */
.key-pad > .row > .col-3 .btn-blank,
.btn-blank {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    cursor: default !important;
    opacity: 0 !important;
}

/* ============================================================
   NUMBER INPUT BOXES (ระบุตัวเลข — keyboard mode)
   ============================================================ */

/* Container */
.label-number.lists {
    background: #0D0D0D !important;
    border: 1px solid #2A2218 !important;
    border-radius: 14px !important;
    padding: 16px 10px !important;
}

/* Heading */
.num-pad h4 {
    color: #F0C75E !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}

/* Individual number boxes */
label.number {
    background-color: #1A1A1A !important;
    border: 2px solid #3A3228 !important;
    border-radius: 12px !important;
    color: #FFF8F0 !important;
    width: 56px !important;
    height: 56px !important;
    line-height: 52px !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    margin: 0 6px !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
}

/* When a number is entered — highlight the box */
label.number:not(:empty) {
    border-color: #D4A017 !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 0 8px rgba(212, 160, 23, 0.2) !important;
}

/* Cursor/caret line inside the box */
label.number span {
    background: #D4A017 !important;
    width: 2px !important;
    border-radius: 1px !important;
}

/* #bet_num container for the 3 boxes */
#bet_num {
    display: inline-flex !important;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

/* Search number input */
#search-number, #search-number2, #search-number3 {
    background: #0D0D0D !important;
    border-color: #2A2218 !important;
    color: #FFF8F0 !important;
}

/* Result option box */
.w-100.bg-light.border.my-1 {
    background: #0D0D0D !important;
    border-color: #2A2218 !important;
    border-radius: 10px !important;
}
.w-100.bg-light.border.my-1 p {
    color: #8A7A5E !important;
    border-bottom-color: #2A2218 !important;
}

/* Overlay disable (locked number areas) */
.overlay-disable {
    background: rgba(11, 11, 11, 0.7) !important;
}

/* ============================================================
   PAGEBET MODALS — Dark GOLD THEME
   ============================================================ */

/* Modal wrapper overlay */
.pagemodal-wrapper {
    background: rgba(0, 0, 0, 0.85) !important;
}

/* Modal container */
.pagemodal {
    background: #0D0D0D !important;
}

/* Modal header */
.pagemodal .head {
    background: linear-gradient(135deg, #1A1400 0%, #B8860B 100%) !important;
    border: none !important;
    border-bottom: 1px solid rgba(212, 160, 23, 0.3) !important;
    color: #FFF8F0 !important;
    height: 44px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
    letter-spacing: 0.3px;
}
.pagemodal .head.bg-success {
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
}
.pagemodal .head .badge {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #FFF8F0 !important;
    font-weight: 500 !important;
    margin-left: 8px;
}

/* Close button in modal */
.pagemodal .btn-close {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}
.pagemodal .btn-close::before,
.pagemodal .btn-close::after {
    background: rgba(255, 255, 255, 0.7) !important;
}
.pagemodal .btn-close:hover::before,
.pagemodal .btn-close:hover::after {
    background: #FFFFFF !important;
}

/* Content scroll area */
.content-scroll {
    background: #0D0D0D !important;
    color: #E8E0D0 !important;
}

/* Fixed bottom bar */
.fixbot {
    background: #1A1A1A !important;
    border-top: 1px solid #2A2218 !important;
    backdrop-filter: blur(12px) !important;
}

/* Modal tab navigation */
.pagemodal .nav-tabs {
    border-bottom: 2px solid #2A2218 !important;
    background: #0D0D0D !important;
}
.pagemodal .nav-link {
    background: #1A1A1A !important;
    border: none !important;
    border-top: 3px solid transparent !important;
    border-bottom: none !important;
    color: #A09080 !important;
    text-shadow: none !important;
    font-weight: 500 !important;
    padding: 10px 8px !important;
    transition: all 0.2s ease !important;
}
.pagemodal .nav-tabs .nav-link.active {
    background: #0D0D0D !important;
    border-top: 3px solid #D4A017 !important;
    color: #D4A017 !important;
    font-weight: 600 !important;
}
.pagemodal .nav-link:hover:not(.active) {
    color: #F0C75E !important;
    background: #2A2218 !important;
}
.pagemodal .tab-pane {
    background: #0D0D0D !important;
    color: #E8E0D0 !important;
}

/* Modal tables */
.pagemodal table {
    color: #E8E0D0 !important;
}
.pagemodal .bg-info.text-light {
    background: linear-gradient(135deg, #1A1400, #0D0D0D) !important;
    color: #FFF8F0 !important;
}
.pagemodal .bg-dark.text-light {
    background: #1A1A1A !important;
    color: #FFF8F0 !important;
}
.pagemodal .table-striped tbody tr:nth-of-type(odd) {
    background: rgba(22, 22, 22, 0.5) !important;
}
.pagemodal .table td, .pagemodal .table th {
    border-color: #2A2218 !important;
}

/* Chip/Price buttons in prepare_poy modal */
.box__chip-lists .price {
    background: #2A2218 !important;
    border: 1px solid #3A3228 !important;
    color: #FFF8F0 !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 8px !important;
}
.box__chip-lists .price:hover {
    background: #D4A017 !important;
    border-color: #B8860B !important;
    color: #FFFFFF !important;
    transform: scale(1.05);
}
.box__chip-lists .price:active {
    transform: scale(0.95);
}

/* Price input in prepare_poy */
.pl_price {
    background: #0D0D0D !important;
    border: 1px solid #2A2218 !important;
    color: #FFF8F0 !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    text-align: center !important;
}
.pl_price:focus {
    border-color: #D4A017 !important;
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.2) !important;
    color: #FFFFFF !important;
}
.bg-black {
    background: #0D0D0D !important;
}
.text-gold {
    color: #F0C75E !important;
}
.border-right-gold {
    border-right-color: #D4A017 !important;
}

/* Prepare poy table row styling */
#price .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(11, 11, 11, 0.5) !important;
}
#price .table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(22, 22, 22, 0.5) !important;
}
#price .table {
    color: #E8E0D0 !important;
    border-color: #2A2218 !important;
}
#price .table td,
#price .table th {
    border-color: #2A2218 !important;
    vertical-align: middle !important;
}
#price .table .bg-success {
    background: #B8860B !important;
    border-radius: 6px !important;
}
#price .table .table-secondary {
    background: #0D0D0D !important;
    color: #8A7A5E !important;
}
#price .table .text-danger {
    color: #F0C75E !important;
}
#price .table .text-primary {
    color: #A09080 !important;
}
#price .table .text-dark {
    color: #A09080 !important;
}

/* Win amount display */
#model_poy_list_win,
.form-control[readonly] {
    background: #1A1A1A !important;
    border-color: #2A2218 !important;
    color: #6EE7B7 !important;
}

/* Credit and total display in fixbot */
.fixbot .bg-primary {
    background: linear-gradient(135deg, #8B6914, #D4A017) !important;
    border-radius: 10px !important;
}
.fixbot .bg-danger {
    background: linear-gradient(135deg, #B91C1C, #DC2626) !important;
    border-radius: 10px !important;
}

/* Number duplicate highlighting */
.number-is-duplicate.number-is-duplicate-active {
    background: #FBBF24 !important;
    color: #000 !important;
}
.multiply-change {
    background: rgba(251, 191, 36, 0.3) !important;
    color: #FBBF24 !important;
}
.multiply-close {
    background: #2A2218 !important;
    color: #A09080 !important;
}

/* Send poy / Print poy modals */
.pagemodal .border {
    border-color: #2A2218 !important;
}
.pagemodal .table-secondary {
    background-color: #1A1A1A !important;
    color: #E8E0D0 !important;
}
.pagemodal .table-success {
    background-color: rgba(5, 150, 105, 0.15) !important;
    color: #6EE7B7 !important;
}
.pagemodal .card-huay {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    border-radius: 10px !important;
    overflow: hidden;
}
.pagemodal .card-huay .card-header {
    background: #0D0D0D !important;
    border-bottom-color: #2A2218 !important;
}
.pagemodal .card-huay .card-body {
    background: #1A1A1A !important;
}

/* Poy receipt header */
.pagemodal .hbill {
    color: #FFF8F0 !important;
}
.pagemodal .hhuay {
    color: #FFF3D0 !important;
}
.pagemodal .hhuay_round {
    color: #E8C252 !important;
}

/* Send poy confirm card */
#sendpoy .card-huay .card-header .col-7 {
    color: #F0C75E !important;
}
#sendpoy .card-huay .card-body .thb {
    color: #F0C75E !important;
}
#sendpoy .table td,
#sendpoy .table th,
#printpoy .table td,
#printpoy .table th {
    border-color: #2A2218 !important;
}
#sendpoy .head.bg-success,
#printpoy .head.bg-success {
    background: linear-gradient(135deg, #8B6914, #B8860B) !important;
}

/* Alert in print poy */
.pagemodal .alert-success {
    background-color: rgba(5, 150, 105, 0.15) !important;
    border-color: #059669 !important;
    color: #6EE7B7 !important;
}

/* Note textarea */
.pagemodal textarea.form-control {
    background: #0D0D0D !important;
    border: 1px solid #2A2218 !important;
    color: #E8E0D0 !important;
    border-radius: 10px !important;
}
.pagemodal textarea.form-control:focus {
    border-color: #D4A017 !important;
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.15) !important;
}

/* Bill number in receipt */
.pagemodal .poynote {
    color: #A09080 !important;
}

/* Confirm/Delete modals */
.modal-content {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    border-radius: 16px !important;
}
.modal-header.bg-danger {
    background: linear-gradient(135deg, #1A1400, #0D0D0D) !important;
    border-bottom-color: #2A2218 !important;
}

/* Capture area (receipt screenshot) */
#capture {
    background: #0D0D0D !important;
    border-radius: 12px !important;
    overflow: hidden;
    border: 1px solid #2A2218 !important;
}

/* Yeekee section */
#numpage_2 {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    border-radius: 14px !important;
}
#numpage_2 h3 {
    color: #FFF3D0 !important;
}
.yeekee__number .btn-outline-primary {
    border-radius: 10px !important;
}
.yeekee__lists-number {
    color: #E8E0D0 !important;
}
.yeekee__lists-number h5 {
    color: #6EE7B7 !important;
}

/* Recommended number section */
.recommendnumber {
    background: linear-gradient(135deg, #8B6914, #D4A017) !important;
    border: 1px solid rgba(212, 160, 23, 0.3) !important;
    border-radius: 10px !important;
    color: #FFF8F0 !important;
}
.returnbtn {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    border-radius: 10px !important;
    color: #E8C252 !important;
}

/* ============================================================
   ROOD SECTION (19ประตู, รูดหน้า, รูดหลัง) — Card-based design
   ============================================================ */

/* Container for each rood group */
#pills-2 > .row > .col-12.col-sm-12.col-md-12.col-lg-4 {
    position: relative;
    background: #0D0D0D !important;
    border: 1px solid #2A2218;
    border-radius: 12px;
    padding: 10px 8px 6px !important;
    margin-bottom: 6px;
}

/* Section labels (19 ประตู, รูดหน้า, รูดหลัง) */
#pills-2 > .row > .col-12.col-sm-12.col-md-12.col-lg-4 > span {
    display: block !important;
    color: #F0C75E !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    padding-left: 4px;
}

/* Button group layout */
#pills-2 .btn-group.btn-group-sm {
    gap: 4px;
}

/* Individual rood buttons — UNSELECTED */
.btn-rood {
    border: 1px solid #2A2218 !important;
    color: #A09080 !important;
    background-color: #1A1A1A !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 8px 0 !important;
    min-width: 36px !important;
    transition: all 0.2s ease !important;
}
.btn-rood:hover {
    background-color: rgba(212, 160, 23, 0.1) !important;
    border-color: #D4A017 !important;
    color: #F0C75E !important;
}

/* Individual rood buttons — SELECTED */
.btn-rood.active {
    background-color: #D4A017 !important;
    border-color: #B8860B !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 10px rgba(212, 160, 23, 0.5) !important;
    font-weight: 700 !important;
    transform: scale(1.08);
}

/* Separator between rood and number grid */
#pills-2 .w-100.border-top {
    border-top-color: #2A2218 !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

/* Search number input group */
.btn-panghuay + .input-group .btn-outline-secondary {
    border-color: #2A2218 !important;
    color: #A09080 !important;
}

/* Rule modal */
#rule-yeekee .modal-header.bg-danger {
    background: linear-gradient(135deg, #1A1400 0%, #B8860B 100%) !important;
}

/* Setting number / show-keyboard — UNSELECTED */
.setting__number .btn-outline-red,
.setting__number .btn-outline-blue,
.setting__number .btn-outline-green {
    border-color: #2A2218 !important;
    background: #1A1A1A !important;
    color: #A09080 !important;
    border-radius: 10px !important;
    transition: all 0.2s ease !important;
}
/* Setting number — SELECTED: solid fill + glow */
.setting__number .btn-outline-red.active,
.setting__number .btn-outline-red:hover {
    background: rgba(139, 105, 20, 0.15) !important;
    border-color: #8B6914 !important;
    color: #E8C252 !important;
    box-shadow: 0 0 0 2px rgba(139, 105, 20, 0.3) !important;
}
.setting__number .btn-outline-blue.active,
.setting__number .btn-outline-blue:hover {
    background: rgba(184, 134, 11, 0.15) !important;
    border-color: #B8860B !important;
    color: #E8C252 !important;
    box-shadow: 0 0 0 2px rgba(184, 134, 11, 0.3) !important;
}
.setting__number .btn-outline-green.active,
.setting__number .btn-outline-green:hover {
    background: rgba(5, 150, 105, 0.15) !important;
    border-color: #059669 !important;
    color: #6EE7B7 !important;
    box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.3) !important;
}

/* Panghuay option 2 buttons — override btn-outline-secondary base */
.panghuay_option_2 {
    border-radius: 10px !important;
    border: 1px solid #2A2218 !important;
    color: #A09080 !important;
    background: #1A1A1A !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 8px 0 !important;
    min-width: 36px !important;
    transition: all 0.2s ease !important;
}
.panghuay_option_2:hover {
    background: rgba(212, 160, 23, 0.1) !important;
    border-color: #D4A017 !important;
    color: #F0C75E !important;
}
.panghuay_option_2.active {
    background: #D4A017 !important;
    color: #FFFFFF !important;
    border-color: #B8860B !important;
    box-shadow: 0 0 10px rgba(212, 160, 23, 0.5) !important;
    font-weight: 700 !important;
    transform: scale(1.08);
}

/* txt-num in tab pills */
.txt-num {
    color: #E8E0D0 !important;
    font-family: 'Kanit', sans-serif !important;
}

/* ============================================================
   GOLD GRADIENT KILL — Override ALL remaining gold from style.css
   ============================================================ */

/* Table header gold gradient → blue */
.bg-info.text-light,
tr.bg-info.text-light,
tr.bg-info.text-light th {
    background: linear-gradient(135deg, #1A1400, #0D0D0D) !important;
    background-image: linear-gradient(135deg, #1A1400, #0D0D0D) !important;
    color: #FFF8F0 !important;
}

/* Gold text in btn-group-toggle hover/focus — already handled above but extra safety */
.btn-group-toggle > .btn-outline-danger.focus,
.btn-group-toggle > .btn-outline-danger:hover {
    color: #F0C75E !important;
    background: rgba(212, 160, 23, 0.1) !important;
}
.btn-group-toggle > .btn-outline-danger.focus.active,
.btn-group-toggle > .btn-outline-danger.active {
    color: #FFFFFF !important;
    background: #D4A017 !important;
    border-color: #B8860B !important;
    box-shadow: 0 0 12px rgba(212, 160, 23, 0.5), 0 0 0 2px rgba(212, 160, 23, 0.3) !important;
}

/* Rood active state */
.btn-rood.active {
    background-color: #D4A017 !important;
    border-color: #B8860B !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 8px rgba(212, 160, 23, 0.4) !important;
}

/* Panghuay option 2 active */
.panghuay_option_2.active,
label.panghuay_option_2.active {
    background: #D4A017 !important;
    color: #FFFFFF !important;
    border-color: #B8860B !important;
    box-shadow: 0 0 8px rgba(212, 160, 23, 0.4) !important;
}

/* Sidebar title gold → blue */
.sidebar-huay .title-huay {
    color: #F0C75E !important;
}

/* Number pad show number font color */
.group__keyboard .box__show-number .lists div .animate__number span {
    color: #D4A017 !important;
}

/* Option2 active button state */
.option2btn.active,
.option2btn:active,
.option2btn.focus {
    box-shadow: 0 0 0 2px rgba(212, 160, 23, 0.4) !important;
    outline: none !important;
}

/* ============================================================
   POYLIST PAGE — Override gold/yellow colors from poylist.css
   ============================================================ */
.poylist-all span:last-child,
.poylist-unsuccess span:last-child,
.poylist-success span:last-child,
.poylist-history span:last-child {
    color: #F0C75E !important;
}
.tab-poylist.active {
    border-color: #D4A017 !important;
    text-shadow: none !important;
    background: #1A1A1A !important;
}
.poylist-all.active,
.poylist-unsuccess.active,
.poylist-success.active,
.poylist-history.active {
    background: #1A1A1A !important;
    border-bottom-color: #1A1A1A !important;
}
@media screen and (max-width: 767.98px) {
    .poylist-all.active span:last-child,
    .poylist-unsuccess.active span:last-child,
    .poylist-success.active span:last-child,
    .poylist-history.active span:last-child {
        color: #D4A017 !important;
        background: rgba(212, 160, 23, 0.1) !important;
        text-shadow: none !important;
        border-radius: 6px !important;
    }
}
#poylist-tabContent .tab-pane.active {
    border-color: #2A2218 !important;
    background: #0D0D0D !important;
}
.tab-poylist {
    background: #0D0D0D !important;
    border-color: #2A2218 !important;
    color: #A09080 !important;
}
.tab-poylist.active {
    color: #FFF8F0 !important;
}

/* Poy card — dark theme */
.card-poy {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    border-radius: 12px !important;
    color: #E8E0D0 !important;
}
.card-poy-header {
    background: #0D0D0D !important;
    border-bottom: 1px dashed #2A2218 !important;
    border-radius: 12px 12px 0 0 !important;
    color: #FFF3D0 !important;
}
.card-poy-header h5 {
    color: #FFF8F0 !important;
}
.card-poy-header small {
    color: #A09080 !important;
}
.card-poy-body {
    color: #E8E0D0 !important;
}
.card-poy-body small {
    color: #A09080 !important;
}
.poy-status {
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 4px 10px !important;
}
.poy-status.unsuccess {
    background: rgba(212, 160, 23, 0.15) !important;
    color: #F0C75E !important;
    text-shadow: none !important;
}
.poy-status.success {
    background: rgba(5, 150, 105, 0.15) !important;
    color: #6EE7B7 !important;
    text-shadow: none !important;
}
.poy-status.lost {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #FCA5A5 !important;
    text-shadow: none !important;
}
.poy-status.abort {
    background: rgba(100, 116, 139, 0.15) !important;
    color: #A09080 !important;
    text-shadow: none !important;
}

/* silverpattern → dark blue */
.silverpattern {
    background: #0D0D0D !important;
    color: #E8E0D0 !important;
}

/* Poy summary cards — override gold borders */
.card.border-warning .card-body.goldpattern {
    background: linear-gradient(135deg, #8B6914, #B8860B) !important;
    color: #FFF8F0 !important;
}
.card.border-warning .card-body.goldpattern h3 {
    color: #FFF8F0 !important;
}
.card.border-warning .card-body.table-warning {
    background: rgba(212, 160, 23, 0.08) !important;
}
.card.border-dark .card-body.silverpattern {
    background: #0D0D0D !important;
}

/* ============================================================
   REQUEST PAGE — Button Group Redesign
   ============================================================ */
.bgwhitealpha .btn-group {
    gap: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #2A2218 !important;
}
.bgwhitealpha .btn-group .btn {
    border: none !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    letter-spacing: 0.3px !important;
}
.bgwhitealpha .btn-group .btn-primary {
    background: linear-gradient(135deg, #D4A017, #B8860B) !important;
    color: #FFFFFF !important;
}
.bgwhitealpha .btn-group .btn-primary:hover {
    background: linear-gradient(135deg, #B8860B, #8B6914) !important;
}
.bgwhitealpha .btn-group .btn-success {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: #FFFFFF !important;
}
.bgwhitealpha .btn-group .btn-success:hover {
    background: linear-gradient(135deg, #047857, #065F46) !important;
}
.bgwhitealpha .btn-group .btn-danger {
    background: linear-gradient(135deg, #DC2626, #B91C1C) !important;
    background-image: linear-gradient(135deg, #DC2626, #B91C1C) !important;
    color: #FFFFFF !important;
}
.bgwhitealpha .btn-group .btn-danger:hover {
    background: linear-gradient(135deg, #B91C1C, #991B1B) !important;
    background-image: linear-gradient(135deg, #B91C1C, #991B1B) !important;
}
.bgwhitealpha .btn-group .btn + .btn {
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Request list items */
.addbankstatus {
    margin-bottom: 12px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid #2A2218 !important;
}
.addbankstatus .table-dark {
    background: #0D0D0D !important;
}
.addbankstatus .table-secondary {
    background: #1A1A1A !important;
}
.addbankstatus .status {
    padding: 4px 10px !important;
}
.addbankstatus .status.wait span,
.addbankstatus .status.wait0 span {
    color: #F0C75E !important;
}
.addbankstatus .status.confirm span {
    color: #6EE7B7 !important;
}
.addbankstatus .status.cancel span {
    color: #FCA5A5 !important;
}

/* ============================================================
   CONTACT / SUPPORT MODAL — Redesign for GOLD THEME
   ============================================================ */
#contactbox .modal-content {
    background: linear-gradient(180deg, #0D0D0D 0%, #1A1A1A 100%) !important;
    border: 1px solid rgba(212, 160, 23, 0.2) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}
#contactbox .modal-header {
    background: linear-gradient(135deg, #1A1400 0%, #0D0D0D 100%) !important;
    border-bottom: 1px solid rgba(212, 160, 23, 0.15) !important;
    padding: 20px 24px !important;
}
#contactbox .modal-header h5 {
    color: #FFF8F0 !important;
    font-weight: 600 !important;
    font-size: 18px !important;
}
#contactbox .modal-header .close {
    color: #A09080 !important;
    text-shadow: none !important;
    opacity: 0.8 !important;
}
#contactbox .modal-header .close:hover {
    color: #FFF8F0 !important;
    opacity: 1 !important;
}
#contactbox .modal-body {
    padding: 24px !important;
}
#contactbox .modal-body .row {
    gap: 0 !important;
}
#contactbox .btn-contactbox {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    border-radius: 16px !important;
    padding: 20px 16px !important;
    color: #E8E0D0 !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 100px !important;
}
#contactbox .btn-contactbox:hover {
    background: rgba(212, 160, 23, 0.08) !important;
    border-color: #D4A017 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(212, 160, 23, 0.15) !important;
    color: #FFF8F0 !important;
}
#contactbox .btn-contactbox i {
    font-size: 28px !important;
    margin: 0 !important;
}
#contactbox .btn-outline-danger.btn-contactbox {
    border-color: rgba(239, 68, 68, 0.3) !important;
}
#contactbox .btn-outline-danger.btn-contactbox:hover {
    border-color: #EF4444 !important;
    background: rgba(239, 68, 68, 0.08) !important;
}
#contactbox .btn-outline-danger.btn-contactbox i {
    color: #EF4444 !important;
}
#contactbox .btn-outline-success.btn-contactbox {
    border-color: rgba(5, 150, 105, 0.3) !important;
}
#contactbox .btn-outline-success.btn-contactbox:hover {
    border-color: #059669 !important;
    background: rgba(5, 150, 105, 0.08) !important;
}
#contactbox .btn-outline-success.btn-contactbox i {
    color: #059669 !important;
}
#contactbox .modal-footer {
    border-top: 1px solid rgba(212, 160, 23, 0.1) !important;
    padding: 16px 24px !important;
}
#contactbox .modal-footer .btn-danger {
    background: linear-gradient(135deg, #2A2218, #3A3228) !important;
    background-image: linear-gradient(135deg, #2A2218, #3A3228) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #E8E0D0 !important;
    padding: 10px 28px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
#contactbox .modal-footer .btn-danger:hover {
    background: linear-gradient(135deg, #3A3228, #8A7A5E) !important;
    background-image: linear-gradient(135deg, #3A3228, #8A7A5E) !important;
    color: #FFF8F0 !important;
}

/* ============================================================
   SLOT / CASINO SELECTION PAGE — Match Main Page Grid Style
   ============================================================ */
.bgwhitealpha.col-lotto h3 {
    color: #FFF8F0 !important;
    font-weight: 700 !important;
    font-size: 20px !important;
    margin-bottom: 16px !important;
}
.bgwhitealpha .image-container {
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid rgba(42, 36, 24, 0.6) !important;
    background: #0D0D0D !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin-bottom: 10px !important;
}
.bgwhitealpha .image-container:hover {
    border-color: #D4A017 !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(212, 160, 23, 0.2) !important;
}
.bgwhitealpha .image-container img {
    border-radius: 0 !important;
    transition: transform 0.4s ease !important;
}
.bgwhitealpha .image-container:hover img {
    transform: scale(1.05);
}
.bgwhitealpha .image-tab {
    background: linear-gradient(transparent, rgba(11, 11, 11, 0.95)) !important;
    border: none !important;
    border-radius: 0 !important;
    color: #FFF8F0 !important;
    font-weight: 600 !important;
    padding: 12px 10px 10px !important;
}

/* ============================================================
   DEPOSIT PAGE — Clean GOLD OVERRIDES
   ============================================================ */
.btn--red {
    background-color: #D4A017 !important;
    color: #FFFFFF !important;
    box-shadow: 0 3px 8px rgba(212, 160, 23, 0.3) !important;
}
.btn--red:before {
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%) !important;
}
#destep1, #destep2, #destep3 {
    border-color: #2A2218 !important;
    background: #1A1A1A !important;
    border-radius: 12px !important;
}
#destep1 .detail-bank,
#destep3 .detail-bank {
    border-radius: 10px !important;
}
.copyacc {
    background: #2A2218 !important;
    border-color: #3A3228 !important;
    color: #FFF8F0 !important;
    border-radius: 8px !important;
}
.copyacc:hover {
    background: #D4A017 !important;
    border-color: #B8860B !important;
    color: #FFFFFF !important;
}
.numacc {
    color: #F0C75E !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}
.moneyinput {
    font-size: 20px !important;
    font-weight: 700 !important;
    text-align: center !important;
}

/* Deposit success page */
.fromacc .alert-primary,
.toacc .alert-success {
    background: #0D0D0D !important;
    border: 1px solid #2A2218 !important;
    border-radius: 12px !important;
    color: #E8E0D0 !important;
}
.fromacc .alert-primary h5,
.toacc .alert-success h5 {
    color: #F0C75E !important;
}
.totalmoney {
    color: #6EE7B7 !important;
}

/* ============================================================
   WITHDRAW PAGE — Clean GOLD OVERRIDES
   ============================================================ */
.icon-bank {
    border-radius: 8px !important;
    padding: 4px !important;
}
.money-withdraw {
    font-size: 20px !important;
    font-weight: 700 !important;
}
#totalwithdraw {
    background: #D4A017 !important;
    border-color: #B8860B !important;
    color: #FFFFFF !important;
}
#totalwithdraw:hover {
    background: #B8860B !important;
    border-color: #8B6914 !important;
}

/* Withdraw/Deposit success — override bg-white */
.bg-white.shadow-sm.rounded {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
}

/* ============================================================
   LOTTERY LAOS / HANOI / MALAY / JACKPOT — Error & Result Pages
   ============================================================ */
.card.border-dark {
    border-color: #2A2218 !important;
    background: #1A1A1A !important;
    border-radius: 10px !important;
}
.card.border-dark .card-header {
    background: #0D0D0D !important;
    border-bottom-color: #2A2218 !important;
    color: #FFF3D0 !important;
}
.card.border-dark .card-body {
    background: #1A1A1A !important;
    color: #FFF8F0 !important;
}
.card.border-dark .card-body h3,
.card.border-dark .card-body h5 {
    color: #FFF8F0 !important;
}

/* Jackpot specific — premium blue-glow design for jackpot amounts */
.table-danger {
    background-color: rgba(212, 160, 23, 0.10) !important;
    border: 1px solid rgba(212, 160, 23, 0.25) !important;
    color: #FFF3D0 !important;
}
.table-danger h3 {
    color: #F0C75E !important;
    font-weight: 700 !important;
    text-shadow: 0 0 12px rgba(240, 199, 94, 0.4) !important;
}

/* ============================================================
   POPUP MODAL (AF announcement) — Override yellow/gold
   ============================================================ */
.swal2-popup,
.swal2-modal {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    border-radius: 16px !important;
    color: #E8E0D0 !important;
}
.swal2-title {
    color: #FFF8F0 !important;
}
.swal2-content {
    color: #E8E0D0 !important;
}
.swal2-confirm {
    background: linear-gradient(135deg, #D4A017, #B8860B) !important;
    border: none !important;
    border-radius: 10px !important;
}

/* ============================================================
   FILE UPLOAD AREA — Deposit slip
   ============================================================ */
.file-upload .file-upload-btn {
    background: #D4A017 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
}
.file-upload .image-upload-wrap {
    border: 2px dashed #2A2218 !important;
    background: #0D0D0D !important;
    border-radius: 10px !important;
}
.file-upload .image-upload-wrap:hover {
    border-color: #D4A017 !important;
}
.file-upload .drag-text h3 {
    color: #8A7A5E !important;
}
.file-upload .file-upload-content {
    background: #0D0D0D !important;
}
.file-upload .remove-image {
    background: #DC2626 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 8px !important;
}

/* ============================================================
   MAINTENANCE PAGE — Error Display
   ============================================================ */
.maintenance-card,
.error-card {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    border-radius: 16px !important;
    color: #E8E0D0 !important;
    text-align: center;
    padding: 40px 20px;
}

/* ============================================================
   SELECTPICKER — Bootstrap-select dropdown
   ============================================================ */
.bootstrap-select .dropdown-toggle {
    background: #0D0D0D !important;
    border: 1px solid #2A2218 !important;
    color: #FFF8F0 !important;
    border-radius: 8px !important;
}
.bootstrap-select .dropdown-toggle:focus {
    border-color: #D4A017 !important;
    box-shadow: 0 0 0 3px rgba(212, 160, 23, 0.15) !important;
}
.bootstrap-select .dropdown-menu {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    border-radius: 10px !important;
}
.bootstrap-select .dropdown-menu .inner li a {
    color: #E8E0D0 !important;
}
.bootstrap-select .dropdown-menu .inner li a:hover,
.bootstrap-select .dropdown-menu .inner li.selected a {
    background: rgba(212, 160, 23, 0.1) !important;
    color: #D4A017 !important;
}

/* ============================================================
   POY DETAIL PAGE
   ============================================================ */
.poy-detail-win {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: #FFFFFF !important;
    border-radius: 6px !important;
}
.poy-detail-lose {
    background: #2A2218 !important;
    color: #A09080 !important;
    border-radius: 6px !important;
}

/* ============================================================
   RE-CREDIT BUTTON — Override white bg for dark theme
   ============================================================ */
#re-credit span {
    border-color: #D4A017 !important;
    color: #FFF8F0 !important;
    background: #1A1A1A !important;
}
#re-credit:hover span {
    border-color: #F0C75E !important;
    background: #2A2218 !important;
    color: #FFF8F0 !important;
}
#re-credit.active span {
    background: #D4A017 !important;
    border-color: #B8860B !important;
    color: #FFFFFF !important;
}

/* ============================================================
   LOTTO-HEAD — Replace gold-pattern.jpg / gold-black.jpg / silver-pattern.jpg
   ============================================================ */
.lotto-head.lotto-government {
    background: linear-gradient(135deg, #1A1400 0%, #B8860B 100%) !important;
    background-image: linear-gradient(135deg, #1A1400 0%, #B8860B 100%) !important;
    border: 1px solid rgba(212, 160, 23, 0.4) !important;
}
.lotto-head.lotto-thaistock {
    background: linear-gradient(135deg, #8B6914 0%, #D4A017 100%) !important;
    background-image: linear-gradient(135deg, #8B6914 0%, #D4A017 100%) !important;
    border: 1px solid rgba(212, 160, 23, 0.4) !important;
}
.lotto-head.lotto-foreignstock {
    background: linear-gradient(135deg, #2A2218 0%, #3A3228 100%) !important;
    background-image: linear-gradient(135deg, #2A2218 0%, #3A3228 100%) !important;
    border: 1px solid #3A3228 !important;
}
.lotto-head.lotto-yeekee {
    background: linear-gradient(135deg, #0D0D0D 0%, #1A1A1A 100%) !important;
    background-image: linear-gradient(135deg, #0D0D0D 0%, #1A1A1A 100%) !important;
    border: 1px solid #2A2218 !important;
}
.lotto-head.lotto-la {
    background: linear-gradient(135deg, #1A1400 0%, #D4A017 100%) !important;
    background-image: linear-gradient(135deg, #1A1400 0%, #D4A017 100%) !important;
    border: 1px solid rgba(212, 160, 23, 0.4) !important;
}
.lotto-head.lotto-vn {
    background: linear-gradient(135deg, #B8860B 0%, #F0C75E 100%) !important;
    background-image: linear-gradient(135deg, #B8860B 0%, #F0C75E 100%) !important;
    border: 1px solid rgba(212, 160, 23, 0.4) !important;
}
.lotto-head.lotto-my {
    background: linear-gradient(135deg, #8B6914 0%, #B8860B 100%) !important;
    background-image: linear-gradient(135deg, #8B6914 0%, #B8860B 100%) !important;
    border: 1px solid rgba(212, 160, 23, 0.4) !important;
}
.lotto-head {
    color: #FFF8F0 !important;
    text-shadow: none !important;
}
.lotto-time {
    background: #1A1A1A !important;
    border: 1px solid #2A2218 !important;
    color: #E8E0D0 !important;
}
.head-yeekee {
    background: linear-gradient(135deg, #0D0D0D 0%, #1A1A1A 100%) !important;
    background-image: linear-gradient(135deg, #0D0D0D 0%, #1A1A1A 100%) !important;
    border: 1px solid #2A2218 !important;
}
.head-yeekee .fullflag {
    color: #F0C75E !important;
}

/* ============================================================
   JACKPOT PAGE — Premium Blue Redesign
   Tone down intense red, give a premium "jackpot" aesthetic
   ============================================================ */

/* Jackpot amount display box — premium blue glow instead of red */
.w-100.border.border-danger.table-danger.rounded {
    background-color: rgba(212, 160, 23, 0.08) !important;
    border: 1px solid rgba(212, 160, 23, 0.3) !important;
    color: #FFF3D0 !important;
}
.w-100.border.border-danger.table-danger.rounded .badge-light {
    background: rgba(212, 160, 23, 0.2) !important;
    color: #E8C252 !important;
}
.w-100.border.border-danger.table-danger.rounded h3 {
    color: #F0C75E !important;
    text-shadow: 0 0 12px rgba(240, 199, 94, 0.4) !important;
}

/* Jackpot result card — cleaner look */
.card.border-dark .card-body h3.card-text {
    color: #F0C75E !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    letter-spacing: 6px !important;
    text-shadow: 0 0 16px rgba(240, 199, 94, 0.3) !important;
}

/* Jackpot "alert-danger" — tone down red to blue info style */
.alert-danger.alert-sm {
    background: rgba(212, 160, 23, 0.1) !important;
    border-color: rgba(212, 160, 23, 0.25) !important;
    color: #E8C252 !important;
}

/* Jackpot count text-danger — use softer blue instead of red */
h4 span.text-danger {
    color: #F0C75E !important;
}
small.text-danger.font-weight-light {
    color: #A09080 !important;
}

/* .badge-danger used as label in jackpot */
.badge-danger.font-weight-light.w-100 {
    background: linear-gradient(135deg, #8B6914, #D4A017) !important;
    color: #FFF8F0 !important;
}

/* Jackpot border-danger box — softer blue border */
.w-100.border.border-danger.bg-danger.rounded .badge-dark {
    background: rgba(0, 0, 0, 0.3) !important;
    color: #FFF8F0 !important;
}

/* Jackpot page: winners section border */
.row.mx-0.border.rounded {
    border-color: #2A2218 !important;
    background: #0D0D0D !important;
    border-radius: 12px !important;
}

/* ============================================================
   GLOBAL BG IMAGE KILL — remove all leftover background images
   ============================================================ */
.card-main {
    background: linear-gradient(145deg, #1A1A1A, #0D0D0D) !important;
    background-image: linear-gradient(145deg, #1A1A1A, #0D0D0D) !important;
    border-color: #2A2218 !important;
}
.overlay {
    background: rgba(11, 11, 11, 0.5) !important;
}
#section-content {
    background: transparent !important;
}
#wrapper, #wrapper456 {
    background: transparent !important;
    background-image: none !important;
}