/**
 * 🔥 ULTIMATE CTA BUTTON FIX - PROFESSIONAL GRADE
 * Force text visibility with maximum contrast
 */

/* ===================================
   CTA BUTTONS GROUP - HORIZONTAL LAYOUT
   =================================== */

/* FORCE PARENT CONTAINER TO BE HORIZONTAL */
ul.header-nav.nav-right,
ul.header-nav-main.nav-right,
.header-inner .flex-right ul,
.flex-right .header-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
    width: auto !important;
}

/* FORCE LIST ITEMS TO BE INLINE */
li.html.header-button-1,
li.html.header-button-2 {
    display: inline-block !important;
    float: none !important;
    width: auto !important;
    margin: 0 6px !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
}

/* FORCE INNER DIV TO BE INLINE */
.header-button-1 .header-button,
.header-button-2 .header-button {
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
}

/* POSITION CONTAINERS */
.header-button-1,
.header-button-2 {
    display: inline-block !important;
    vertical-align: middle !important;
    position: relative !important;
    z-index: 10 !important;
    width: auto !important;
}

/* Clear any floats */
.header-nav.nav-right::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* ===================================
   BUTTON 1: ĐĂNG KÝ +888K - RED FIRE
   =================================== */

/* Force ALL text inside button to be PURE WHITE */
.header-button-1 a,
.header-button-1 a:link,
.header-button-1 a:visited,
.header-button-1 a:hover,
.header-button-1 a:active,
.header-button-1 .button,
.header-button-1 .button-text,
.header-button-1 .button-icon {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: linear-gradient(135deg, #FF1744 0%, #E50914 50%, #B71C1C 100%) !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    padding: 18px 40px !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
    font-size: 17px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.8px !important;
    border: 3px solid #FFD700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    position: relative !important;
    overflow: hidden !important;
    min-width: 210px !important;
    height: auto !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* MEGA TEXT SHADOW - 5 LAYERS */
    text-shadow: 
        -1px -1px 0 rgba(0, 0, 0, 0.5),
        1px -1px 0 rgba(0, 0, 0, 0.5),
        -1px 1px 0 rgba(0, 0, 0, 0.5),
        1px 1px 0 rgba(0, 0, 0, 0.5),
        0 0 8px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(255, 255, 255, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.6) !important;
    
    /* TEXT STROKE FOR SHARPNESS */
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.3);
    
    box-shadow: 
        0 8px 30px rgba(255, 23, 68, 0.7),
        0 0 40px rgba(255, 23, 68, 0.5),
        inset 0 3px 0 rgba(255, 255, 255, 0.4),
        inset 0 -3px 0 rgba(0, 0, 0, 0.3) !important;
    
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation: pulse-red 2s infinite;
}

/* Override Flatsome theme styles that might interfere */
.header-button-1 a.nav-top-link {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #FF1744 0%, #E50914 50%, #B71C1C 100%) !important;
    border: 3px solid #FFD700 !important;
}

/* Shine overlay */
.header-button-1 a::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent) !important;
    transition: left 0.6s ease !important;
    z-index: 1 !important;
    border-radius: 12px !important;
    pointer-events: none !important;
}

/* Badge +888K */
.header-button-1::after {
    content: "+888K" !important;
    position: absolute !important;
    top: -14px !important;
    right: -8px !important;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
    color: #B71C1C !important;
    padding: 5px 11px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    box-shadow: 
        0 4px 15px rgba(255, 215, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    border: 2px solid #FFFFFF !important;
    z-index: 100 !important;
    animation: badge-bounce 2s infinite !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    display: block !important;
}

/* ===================================
   BUTTON 2: ĐĂNG NHẬP +288K - GREEN EMERALD
   =================================== */

/* Force ALL text inside button to be PURE WHITE */
.header-button-2 a,
.header-button-2 a:link,
.header-button-2 a:visited,
.header-button-2 a:hover,
.header-button-2 a:active,
.header-button-2 .button,
.header-button-2 .button-text,
.header-button-2 .button-icon {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    background: linear-gradient(135deg, #10B981 0%, #059669 50%, #047857 100%) !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    padding: 18px 40px !important;
    border-radius: 12px !important;
    font-weight: 900 !important;
    font-size: 17px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.8px !important;
    border: 3px solid #FFD700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    position: relative !important;
    overflow: hidden !important;
    min-width: 210px !important;
    height: auto !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    visibility: visible !important;
    opacity: 1 !important;
    
    /* MEGA TEXT SHADOW - 5 LAYERS */
    text-shadow: 
        -1px -1px 0 rgba(0, 0, 0, 0.5),
        1px -1px 0 rgba(0, 0, 0, 0.5),
        -1px 1px 0 rgba(0, 0, 0, 0.5),
        1px 1px 0 rgba(0, 0, 0, 0.5),
        0 0 8px rgba(0, 0, 0, 0.8),
        0 0 15px rgba(255, 255, 255, 0.6),
        0 2px 4px rgba(0, 0, 0, 0.6) !important;
    
    /* TEXT STROKE FOR SHARPNESS */
    -webkit-text-stroke: 1px rgba(0, 0, 0, 0.3);
    
    box-shadow: 
        0 8px 30px rgba(16, 185, 129, 0.7),
        0 0 40px rgba(16, 185, 129, 0.5),
        inset 0 3px 0 rgba(255, 255, 255, 0.4),
        inset 0 -3px 0 rgba(0, 0, 0, 0.3) !important;
    
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    animation: pulse-green 2s infinite;
}

/* Override Flatsome theme styles */
.header-button-2 a.nav-top-link {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, #10B981 0%, #059669 50%, #047857 100%) !important;
    border: 3px solid #FFD700 !important;
}

/* Shine overlay */
.header-button-2 a::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent) !important;
    transition: left 0.6s ease !important;
    z-index: 1 !important;
    border-radius: 12px !important;
    pointer-events: none !important;
}

/* Badge +288K */
.header-button-2::after {
    content: "+288K" !important;
    position: absolute !important;
    top: -14px !important;
    right: -8px !important;
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%) !important;
    color: #047857 !important;
    padding: 5px 11px !important;
    border-radius: 8px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    box-shadow: 
        0 4px 15px rgba(255, 215, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    border: 2px solid #FFFFFF !important;
    z-index: 100 !important;
    animation: badge-bounce 2s infinite !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    display: block !important;
}

/* ===================================
   ANIMATIONS
   =================================== */

@keyframes pulse-red {
    0%, 100% {
        box-shadow: 
            0 8px 30px rgba(255, 23, 68, 0.7),
            0 0 40px rgba(255, 23, 68, 0.5),
            inset 0 3px 0 rgba(255, 255, 255, 0.4),
            inset 0 -3px 0 rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 
            0 10px 40px rgba(255, 23, 68, 0.9),
            0 0 60px rgba(255, 23, 68, 0.7),
            inset 0 3px 0 rgba(255, 255, 255, 0.5),
            inset 0 -3px 0 rgba(0, 0, 0, 0.4);
    }
}

@keyframes pulse-green {
    0%, 100% {
        box-shadow: 
            0 8px 30px rgba(16, 185, 129, 0.7),
            0 0 40px rgba(16, 185, 129, 0.5),
            inset 0 3px 0 rgba(255, 255, 255, 0.4),
            inset 0 -3px 0 rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 
            0 10px 40px rgba(16, 185, 129, 0.9),
            0 0 60px rgba(16, 185, 129, 0.7),
            inset 0 3px 0 rgba(255, 255, 255, 0.5),
            inset 0 -3px 0 rgba(0, 0, 0, 0.4);
    }
}

@keyframes badge-bounce {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-4px) scale(1.1);
    }
}

/* ===================================
   HOVER EFFECTS
   =================================== */

.header-button-1 a:hover {
    background: linear-gradient(135deg, #FF4569 0%, #FF1744 50%, #D50000 100%) !important;
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 
        0 14px 50px rgba(255, 23, 68, 0.9),
        0 0 70px rgba(255, 23, 68, 0.6),
        inset 0 3px 0 rgba(255, 255, 255, 0.5) !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
}

.header-button-1 a:hover::before {
    left: 100% !important;
}

.header-button-2 a:hover {
    background: linear-gradient(135deg, #34D399 0%, #10B981 50%, #059669 100%) !important;
    transform: translateY(-4px) scale(1.05) !important;
    box-shadow: 
        0 14px 50px rgba(16, 185, 129, 0.9),
        0 0 70px rgba(16, 185, 129, 0.6),
        inset 0 3px 0 rgba(255, 255, 255, 0.5) !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
}

.header-button-2 a:hover::before {
    left: 100% !important;
}

/* ===================================
   FIRE/LIGHTNING ICONS
   =================================== */

.header-button-1 {
    position: relative !important;
}

.header-button-1 > .button-icon,
.header-button-1 > .fire-icon,
.header-button-1 > .header-button-icon {
    color: #FFFFFF !important;
    font-size: 18px !important;
    filter: drop-shadow(0 0 8px rgba(255, 100, 0, 0.8)) !important;
}

.header-button-2 {
    position: relative !important;
}

.header-button-2 > .button-icon,
.header-button-2 > .lightning-icon,
.header-button-2 > .header-button-icon {
    color: #FFFFFF !important;
    font-size: 18px !important;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8)) !important;
}

/* ===================================
   RESPONSIVE - MOBILE OPTIMIZATION
   =================================== */

/* TABLET - Stack buttons if needed */
@media (max-width: 992px) {
    .header-button-1 a,
    .header-button-2 a {
        padding: 14px 28px !important;
        font-size: 14px !important;
        min-width: 170px !important;
        letter-spacing: 1.2px !important;
    }
    
    .header-button-1::after,
    .header-button-2::after {
        padding: 4px 9px !important;
        font-size: 11px !important;
    }
}

/* MOBILE - Professional vertical stack below logo */
@media (max-width: 849px) {
    /* Force header wrapper to be visible on mobile */
    .header-wrapper,
    .header-inner {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 15px 10px !important;
        background: #FFFFFF !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Logo container on mobile - Full width, center */
    .header-wrapper .header-logo,
    .flex-left .header-logo {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
        padding: 5px 0 !important;
        order: 1 !important;
    }
    
    /* Flex right container with CTA buttons - Full width, centered */
    .header-inner .flex-right,
    .header-inner > .flex-right,
    .flex-right {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin: 10px 0 0 0 !important;
        padding: 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        order: 2 !important;
        background: linear-gradient(135deg, #F8F9FA 0%, #E9ECEF 100%) !important;
        border-radius: 12px !important;
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06) !important;
    }
    
    /* Flex left container - hide on mobile (already showed logo) */
    .header-inner .flex-left {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }
    
    /* Nav right UL - Vertical stack */
    ul.header-nav.nav-right,
    ul.header-nav-main.nav-right {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    /* Hide original desktop nav menu items on mobile */
    .header-nav.nav-left,
    .header-nav-main.nav-left {
        display: none !important;
    }
    
    /* Button list items - Full width stack */
    li.html.header-button-1,
    li.html.header-button-2 {
        display: block !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 !important;
        float: none !important;
    }
    
    /* Buttons themselves - Compact & professional */
    .header-button-1 a,
    .header-button-2 a {
        display: flex !important;
        width: 100% !important;
        padding: 14px 20px !important;
        font-size: 15px !important;
        font-weight: 800 !important;
        min-width: unset !important;
        max-width: 320px !important;
        letter-spacing: 1.2px !important;
        border-radius: 10px !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important;
        margin: 0 auto !important;
        text-align: center !important;
        box-shadow: 
            0 6px 20px rgba(0, 0, 0, 0.3),
            0 0 30px rgba(255, 215, 0, 0.4),
            inset 0 2px 0 rgba(255, 255, 255, 0.3),
            inset 0 -2px 0 rgba(0, 0, 0, 0.2) !important;
    }
    
    /* Button 1 - Red/Fire - Slightly larger emphasis */
    .header-button-1 a {
        padding: 16px 24px !important;
        font-size: 16px !important;
    }
    
    /* Badges on mobile - Smaller & adjusted position */
    .header-button-1::after,
    .header-button-2::after {
        top: -10px !important;
        right: 4px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
        border-radius: 6px !important;
        font-weight: 800 !important;
    }
    
    /* Hide trust badges on mobile to save space */
    .header-live-users,
    .header-trust-badge {
        display: none !important;
    }
}

/* VERY SMALL MOBILE - Further compact */
@media (max-width: 550px) {
    .mobile-header .header-button-1 a,
    .mobile-header .header-button-2 a {
        padding: 12px 18px !important;
        font-size: 14px !important;
        letter-spacing: 0.8px !important;
        max-width: 280px !important;
    }
    
    .mobile-header .header-button-1 a {
        padding: 14px 20px !important;
        font-size: 15px !important;
    }
    
    .mobile-header ul.header-nav.nav-right,
    .mobile-header .flex-right {
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    
    .mobile-header .header-button-1::after,
    .mobile-header .header-button-2::after {
        padding: 3px 7px !important;
        font-size: 10px !important;
    }
}

/* EXTRA SMALL - Most compact */
@media (max-width: 400px) {
    .mobile-header .header-button-1 a,
    .mobile-header .header-button-2 a {
        padding: 11px 16px !important;
        font-size: 13px !important;
        max-width: 260px !important;
    }
    
    .mobile-header .header-button-1 a {
        padding: 13px 18px !important;
        font-size: 14px !important;
    }
}