/* ==============================================
   MOBILE OPTIMIZED CSS - Version 3.6
   Google Material Design style menu:
   - Chữ nhỏ (14px) và sạch sẽ
   - Có gạch ngăn cách giữa các item
   - Nút đóng màu đỏ
   - Font Roboto
   ============================================== */

/* ========== MOBILE BASE STYLES ========== */
@media (max-width: 767px) {
    /* Reset root elements */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Fix all custom sections alignment */
    body * {
        box-sizing: border-box !important;
    }
    
    body > *, 
    body #page,
    body .site {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    #page {
        overflow-x: hidden;
        padding: 0 !important;
    }
    
    /* ========== HEADER LAYOUT ========== */
    body .site-header,
    body #masthead {
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 1000 !important;
    }
    
    body .header-wrapper {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 1px !important;
        width: 100% !important;
        background: linear-gradient(135deg, #c8232c 0%, #ff6b35 100%) !important;
    }
    
    .site-branding {
        flex: 1 !important;
    }
    
    .custom-logo {
        max-height: 40px !important;
        width: auto !important;
    }
    
    /* ========== MOBILE MENU TOGGLE BUTTON - 3 GẠCH ========== */
    .mobile-menu-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 40px !important;
        height: 40px !important;
        padding: 8px !important;
        background: rgba(255,255,255,0.2) !important;
        border: none !important;
        border-radius: 5px !important;
        cursor: pointer !important;
        z-index: 1001 !important;
        position: relative !important;
    }
    
    .mobile-menu-toggle:hover {
        background: rgba(255,255,255,0.3) !important;
    }
    
    .mobile-menu-toggle:active {
        background: rgba(255,255,255,0.4) !important;
    }
    
    /* Hamburger 3 lines */
    .mobile-menu-toggle span {
        display: block !important;
        width: 100% !important;
        height: 3px !important;
        background: #fff !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
        transform-origin: center !important;
    }
    
    /* Animation when active (menu opened) */
    .mobile-menu-toggle.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg) !important;
    }
    
    .mobile-menu-toggle.active span:nth-child(2) {
        opacity: 0 !important;
        transform: translateX(-20px) !important;
    }
    
    .mobile-menu-toggle.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg) !important;
    }
    
    /* Hide FontAwesome icon if any */
    .mobile-menu-toggle i {
        display: none !important;
    }
    
    /* ========== TIME & COUNTDOWN SECTION ========== */
    .time-countdown-section {
        order: 1 !important;
        width: 100% !important;
        position: relative !important;
        z-index: 100 !important;
    }
    
    /* ========== BANNER SECTION ========== */
    .hero-banner-wrapper {
        order: 2 !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative !important;
        z-index: 50 !important;
    }
    
    .hero-banner-container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .banner-image,
    .banner-slider {
        width: 100% !important;
        border-radius: 0 !important;
        display: block !important;
    }
    
    .banner-image img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    
    /* ========== QUICK MENU BAR ========== */
    body .quick-menu-bar,
    html body .quick-menu-bar,
    .quick-menu-bar,
    section.quick-menu-bar,
    div.quick-menu-bar {
        display: block !important;
        order: 3 !important;
        position: relative !important;
        width: 100% !important;
        padding: 6px 0 2px 0 !important; /* tighter top/bottom */
        margin: 0 !important;
        background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
        overflow-x: scroll !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 90 !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        /* Hide scrollbar but keep functionality */
        scrollbar-width: thin !important;
        scrollbar-color: rgba(200, 35, 44, 0.3) transparent !important;
    }
    
    .quick-menu-bar::-webkit-scrollbar {
        height: 4px !important;
    }
    
    .quick-menu-bar::-webkit-scrollbar-track {
        background: transparent !important;
    }
    
    .quick-menu-bar::-webkit-scrollbar-thumb {
        background: rgba(200, 35, 44, 0.3) !important;
        border-radius: 2px !important;
    }
    
    .quick-menu-bar::-webkit-scrollbar-thumb:hover {
        background: rgba(200, 35, 44, 0.5) !important;
    }
    
    body .quick-menu,
    html body .quick-menu,
    .quick-menu,
    .quick-menu ul,
    #quick-menu,
    nav.quick-menu,
    ul.quick-menu,
    div.quick-menu {
        display: flex !important;
        padding: 0 1px !important;
        gap: 6px !important;
        min-width: fit-content !important;
        flex-wrap: nowrap !important;
        visibility: visible !important;
        opacity: 1 !important;
        list-style: none !important;
        margin: 0 !important;
        align-items: center !important;
    }
    
    /* Quick menu items with high specificity */
    body .quick-menu-bar .quick-menu-item,
    body .quick-menu-bar .quick-menu li,
    body .quick-menu-bar .quick-menu a,
    body .quick-menu .quick-menu-item,
    body .quick-menu li,
    body .quick-menu a,
    html body .quick-menu-item,
    html body .quick-menu li,
    html body .quick-menu a,
    .quick-menu-item,
    .quick-menu li,
    .quick-menu a {
        display: inline-flex !important; /* prevent baseline gap */
        align-items: center !important;
        vertical-align: middle !important;
        padding: 2px 4px !important; /* tighter */
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        border-radius: 14px !important;
        font-size: 13px !important;
        line-height: 1 !important; /* stable height */
        font-weight: 600 !important;
        text-decoration: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
        margin: 0 !important; /* remove extra space */
    }
    
    /* Hover state */
    body .quick-menu-bar .quick-menu-item:hover,
    body .quick-menu-bar .quick-menu li:hover,
    body .quick-menu-bar .quick-menu a:hover,
    body .quick-menu .quick-menu-item:hover,
    body .quick-menu li:hover,
    body .quick-menu a:hover,
    html body .quick-menu-item:hover,
    html body .quick-menu li:hover,
    html body .quick-menu a:hover,
    .quick-menu-item:hover,
    .quick-menu li:hover,
    .quick-menu a:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important;
    }
    
    /* Active state */
    body .quick-menu-bar .quick-menu-item:active,
    body .quick-menu-bar .quick-menu li:active,
    body .quick-menu-bar .quick-menu a:active,
    body .quick-menu .quick-menu-item:active,
    body .quick-menu li:active,
    body .quick-menu a:active,
    html body .quick-menu-item:active,
    html body .quick-menu li:active,
    html body .quick-menu a:active,
    .quick-menu-item:active,
    .quick-menu li:active,
    .quick-menu a:active {
        transform: translateY(0) !important;
        box-shadow: 0 2px 4px rgba(200, 35, 44, 0.2) !important;
    }
    
    /* Active/Current menu item */
    body .quick-menu-bar .quick-menu-item.current-menu-item,
    body .quick-menu-bar .quick-menu li.current-menu-item,
    body .quick-menu-bar .quick-menu a.current-menu-item,
    body .quick-menu .quick-menu-item.current-menu-item,
    body .quick-menu li.current-menu-item,
    body .quick-menu a.current-menu-item,
    body .quick-menu-bar .quick-menu-item.active,
    body .quick-menu-bar .quick-menu li.active,
    body .quick-menu-bar .quick-menu a.active,
    body .quick-menu .quick-menu-item.active,
    body .quick-menu li.active,
    body .quick-menu a.active,
    html body .quick-menu-item.current-menu-item,
    html body .quick-menu li.current-menu-item,
    html body .quick-menu a.current-menu-item,
    html body .quick-menu-item.active,
    html body .quick-menu li.active,
    html body .quick-menu a.active,
    .quick-menu-item.current-menu-item,
    .quick-menu li.current-menu-item,
    .quick-menu a.current-menu-item,
    .quick-menu-item.active,
    .quick-menu li.active,
    .quick-menu a.active {
        background: linear-gradient(135deg, #c8232c 0%, #ff6b35 100%) !important;
        border-color: #c8232c !important;
        color: #fff !important;
        font-weight: 600 !important;
    }
    
    /* ========== MAIN CONTENT ========== */
    .site-content {
        order: 4 !important;
        width: 100% !important;
        padding: 10px 1px !important;
    }
    
    /* ========== MOBILE MENU OVERLAY ========== */
    .mobile-menu-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0,0,0,0.7) !important;
        z-index: 9998 !important;
        backdrop-filter: blur(3px) !important;
    }
    
    .mobile-menu-overlay.active {
        display: block !important;
    }
    
    .main-navigation {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: transparent !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        pointer-events: none !important;
    }
    
    .main-navigation.active {
        display: block !important;
    }
    
    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }
    
    .main-navigation .nav-wrapper {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 280px !important;
        max-width: 85vw !important;
        height: 100% !important;
        background: #fff !important;
        box-shadow: 2px 0 15px rgba(0,0,0,0.2) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        pointer-events: all !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .main-navigation.active .nav-wrapper {
        transform: translateX(0) !important;
    }
    
    .mobile-menu-close {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        width: 40px !important;
        height: 40px !important;
        background: #fff !important;
        border: none !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        font-size: 20px !important;
        color: #c8232c !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 10000 !important;
        transition: all 0.2s ease !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    }
    
    .mobile-menu-close:hover {
        background: #fee !important;
        transform: rotate(90deg) !important;
        box-shadow: 0 4px 8px rgba(200,35,44,0.2) !important;
    }
    
    /* Menu container - Google Material style */
    .main-navigation .container {
        background: transparent !important;
        padding: 60px 0 20px !important;
    }
    
    .main-navigation .menu,
    .main-navigation .nav-menu,
    .main-navigation ul {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .main-navigation .menu li,
    .main-navigation .nav-menu li,
    .main-navigation ul li {
        margin: 0 !important;
        border: none !important;
        border-bottom: 1px solid #e0e0e0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    .main-navigation .menu li:first-child,
    .main-navigation .nav-menu li:first-child,
    .main-navigation ul li:first-child {
        border-top: 1px solid #e0e0e0 !important;
    }
    
    /* Menu links - Google Material Design style */
    html body .main-navigation .menu a,
    html body .main-navigation .nav-menu a,
    html body .main-navigation ul a,
    body .main-navigation .menu a,
    body .main-navigation .nav-menu a,
    body .main-navigation ul a,
    .main-navigation .menu a,
    .main-navigation .nav-menu a,
    .main-navigation ul a {
        display: block !important;
        padding: 14px 24px !important;
        color: #202124 !important;
        background: transparent !important;
        text-decoration: none !important;
        border-radius: 0 !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 20px !important;
        margin: 0 !important;
        border: none !important;
        font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif !important;
        letter-spacing: 0.2px !important;
        text-align: left !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
    
    /* Hover state - Google ripple effect */
    html body .main-navigation .menu a:hover,
    html body .main-navigation .nav-menu a:hover,
    html body .main-navigation ul a:hover,
    body .main-navigation .menu a:hover,
    body .main-navigation .nav-menu a:hover,
    body .main-navigation ul a:hover,
    .main-navigation .menu a:hover,
    .main-navigation .nav-menu a:hover,
    .main-navigation ul a:hover {
        background: rgba(200,35,44,0.08) !important;
        color: #c8232c !important;
        transform: none !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* Active/Current menu item */
    html body .main-navigation .menu .current-menu-item a,
    html body .main-navigation .nav-menu .current-menu-item a,
    .main-navigation .menu .current-menu-item a,
    .main-navigation .nav-menu .current-menu-item a {
        background: rgba(200,35,44,0.12) !important;
        color: #c8232c !important;
        font-weight: 500 !important;
    }
    
    /* ========== FOOTER ========== */
    .site-footer {
        order: 999 !important;
        width: 100% !important;
        padding: 20px 1px !important;
        margin-top: 30px !important;
    }
    
    /* ========== MOBILE BOTTOM NAV ========== */
    .mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: #fff !important;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
        z-index: 1000 !important;
        padding: 10px 0 !important;
    }
    
    .mobile-bottom-nav .nav-items {
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
    }
    
    .mobile-bottom-nav .nav-item {
        flex: 1 !important;
        text-align: center !important;
        padding: 5px !important;
    }
    
    .mobile-bottom-nav .nav-item a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        color: #666 !important;
        text-decoration: none !important;
        font-size: 11px !important;
    }
    
    .mobile-bottom-nav .nav-item i {
        font-size: 20px !important;
        margin-bottom: 3px !important;
    }
    
    /* ========== CONTAINER RESETS ========== */
    .container,
    .container-fluid,
    .wp-block-group,
    .entry-content,
    .site-main {
        padding: 0 1px !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .row {
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* Fix custom sections padding - minimal spacing */
    .custom-section,
    .widget,
    .widget-area,
    section {
        padding-left: 1px !important;
        padding-right: 1px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Fix any elements extending beyond viewport */
    body .site-content > *,
    body .entry-content > * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Hide desktop navigation */
    .header-info {
        display: none !important;
    }
}

/* ========== DESKTOP STYLES ========== */
@media (min-width: 768px) {
    /* Hide mobile elements on desktop */
    .mobile-menu-toggle,
    .mobile-menu-close,
    .mobile-bottom-nav {
        display: none !important;
    }
    
    /* Show desktop navigation */
    .main-navigation {
        display: block !important;
        position: relative !important;
        background: transparent !important;
    }
    
    .main-navigation .nav-wrapper {
        position: relative !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    
    .quick-menu-bar {
        position: relative !important;
    }
}


/* ==================================================
   QUICK MENU COLOR OVERRIDE - FINAL FIX
   Must be at the end to override everything
   ================================================== */
@media (max-width: 767px) {
    /* Keep item shapes but allow class colors from main CSS */
    body .quick-menu-bar .quick-menu-item,
    body .quick-menu-bar .quick-menu li,
    body .quick-menu-bar .quick-menu a,
    body .quick-menu .quick-menu-item,
    body .quick-menu li,
    body .quick-menu a {
        border-radius: 14px !important;
        padding: 2px 4px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    }
    
    /* Mobile specific colors per item */
    .quick-menu-item.soi-cau { background: #ff6600 !important; color: #fff !important; }
    .quick-menu-item.thong-ke { background: #009688 !important; color: #fff !important; }
    .quick-menu-item.ket-qua { background: #4CAF50 !important; color: #fff !important; }
    .quick-menu-item.quay-thu { background: #9C27B0 !important; color: #fff !important; }

    /* tighten icon spacing */
    .quick-menu-item i, .quick-menu-item .quick-menu-icon { margin-right: 4px !important; line-height: 1 !important; }
    
    /* Default item */
    .quick-menu-item:not(.soi-cau):not(.thong-ke):not(.ket-qua):not(.quay-thu) {
        background: linear-gradient(135deg, #3498db 0%, #2980b9 100%) !important;
        color: #fff !important;
    }
    
    /* Hover */
    body .quick-menu-bar .quick-menu-item:hover,
    body .quick-menu-bar .quick-menu li:hover,
    body .quick-menu-bar .quick-menu a:hover,
    body .quick-menu .quick-menu-item:hover,
    body .quick-menu li:hover,
    body .quick-menu a:hover {
        filter: brightness(0.95) !important;
        transform: none !important; /* no jump */
        box-shadow: 0 2px 6px rgba(0,0,0,0.18) !important;
    }
}