/**
 * Mobile Quick Menu Fix - FINAL
 * Đảm bảo quick-menu-bar luôn hiển thị trên mobile
 */

/* Ultra High Priority - Mobile Quick Menu Display */
@media screen and (max-width: 767px) {
    /* LAYOUT ORDER: Banner → Header → Quick Menu (NOT fixed) */
    
    /* Body reset */
    html body,
    body {
        padding-top: 0 !important;
        margin: 0 !important;
    }
    
    /* Banner at top - Natural position, static */
    html body .hero-banner-wrapper,
    body .hero-banner-wrapper,
    .hero-banner-wrapper {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        order: 1 !important;
        z-index: 1 !important;
    }
    
    html body .hero-banner-container,
    body .hero-banner-container,
    .hero-banner-container {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    html body .banner-image,
    body .banner-image,
    .banner-image {
        width: 100% !important;
        height: auto !important;
        max-height: 150px !important;
        object-fit: cover !important;
        display: block !important;
    }
    
    /* Header below banner - Static position */
    html body .site-header,
    body .site-header,
    .site-header {
        position: relative !important; /* Changed from fixed */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 100 !important;
        height: 50px !important;
        background: linear-gradient(135deg, #c8232c 0%, #e74c3c 100%) !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
        margin: 0 !important;
        order: 2 !important;
    }
    
    /* Quick menu bar below header - Static position */
    html body .quick-menu-bar,
    body .quick-menu-bar,
    .quick-menu-bar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important; /* Changed from fixed */
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        z-index: 99 !important;
        background: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
        border-bottom: 1px solid #e0e0e0 !important;
        height: auto !important;
        min-height: 45px !important;
        overflow-x: auto !important; /* Enable scroll on parent */
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        transform: none !important;
        order: 3 !important;
    }
    
    /* Menu wrapper */
    html body .quick-menu-bar .menu-wrapper,
    body .quick-menu-bar .menu-wrapper,
    .quick-menu-bar .menu-wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important; /* Auto width to allow scrolling */
        min-width: 100% !important; /* At least full width */
        max-width: none !important; /* Can be wider than screen */
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        overflow: visible !important;
    }
    
    /* Quick menu container */
    html body .quick-menu-bar .quick-menu,
    body .quick-menu-bar .quick-menu,
    .quick-menu-bar .quick-menu {
        display: inline-flex !important; /* inline-flex to allow width > 100% */
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: row !important; /* Hiển thị theo hàng ngang như PC */
        justify-content: flex-start !important; /* Align left for scrolling */
        align-items: center !important;
        padding: 6px 8px !important; /* Ultra minimal vertical padding */
        margin: 0 !important;
        gap: 4px !important; /* Very minimal gap between items */
        width: auto !important; /* Auto width to fit content */
        min-width: 100% !important; /* At least full width */
        box-sizing: border-box !important;
        overflow: visible !important; /* Let parent handle scroll */
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
        scrollbar-width: none !important; /* Hide scrollbar on Firefox */
        background: transparent !important;
        flex-wrap: nowrap !important; /* Don't wrap to next line */
    }
    
    /* Hide scrollbar but keep functionality */
    html body .quick-menu-bar .quick-menu::-webkit-scrollbar,
    body .quick-menu-bar .quick-menu::-webkit-scrollbar,
    .quick-menu-bar .quick-menu::-webkit-scrollbar,
    .quick-menu::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* Add subtle gradient on right edge to indicate more content */
    html body .quick-menu-bar::after,
    body .quick-menu-bar::after,
    .quick-menu-bar::after {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        width: 30px !important;
        height: 100% !important;
        background: linear-gradient(to left, rgba(255,255,255,0.3), transparent) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }
    
    /* Quick menu items */
    html body .quick-menu-bar .quick-menu-item,
    body .quick-menu-bar .quick-menu-item,
    .quick-menu-bar .quick-menu-item {
        display: inline-flex !important; /* inline-flex like desktop */
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: row !important; /* Row direction: icon + text side by side */
        align-items: center !important;
        justify-content: center !important;
        padding: 4px 8px !important; /* Ultra minimal padding - very tight */
        color: white !important;
        text-decoration: none !important;
        gap: 4px !important; /* Minimal gap between icon and text */
        flex: 0 0 auto !important; /* Don't shrink, auto width */
        min-width: auto !important; /* Auto width based on content */
        max-width: none !important; /* No max width restriction */
        width: auto !important; /* Auto width */
        text-align: center !important;
        transition: all 0.3s !important;
        border-radius: 12px !important; /* Smaller radius for very compact look */
        background: #ff6600 !important; /* Default orange, will be overridden by specific classes */
        height: auto !important;
        min-height: 0 !important; /* Remove any min-height */
        border: none !important;
        box-sizing: border-box !important;
        font-weight: 600 !important; /* Bold like desktop */
        font-size: 10px !important; /* Very compact size */
        white-space: nowrap !important; /* Prevent text wrapping */
        line-height: 1.2 !important; /* Very tight line height */
        vertical-align: middle !important;
    }
    
    /* Specific colors for each menu item - matching desktop exactly */
    html body .quick-menu-bar .quick-menu-item.soi-cau,
    body .quick-menu-bar .quick-menu-item.soi-cau,
    .quick-menu-bar .quick-menu-item.soi-cau {
        background: #ff6600 !important; /* Orange */
    }
    
    html body .quick-menu-bar .quick-menu-item.thong-ke,
    body .quick-menu-bar .quick-menu-item.thong-ke,
    .quick-menu-bar .quick-menu-item.thong-ke {
        background: #009688 !important; /* Teal */
    }
    
    html body .quick-menu-bar .quick-menu-item.ket-qua,
    body .quick-menu-bar .quick-menu-item.ket-qua,
    .quick-menu-bar .quick-menu-item.ket-qua {
        background: #4CAF50 !important; /* Green */
    }
    
    html body .quick-menu-bar .quick-menu-item.quay-thu,
    body .quick-menu-bar .quick-menu-item.quay-thu,
    .quick-menu-bar .quick-menu-item.quay-thu {
        background: #9C27B0 !important; /* Purple */
    }
    
    /* Hover/Active state */
    .quick-menu-item:hover,
    .quick-menu-item:active,
    .quick-menu-item:focus {
        opacity: 0.8 !important;
        color: white !important;
        text-decoration: none !important;
        transform: none !important;
    }
    
    /* Quick menu icons */
    html body .quick-menu-bar .quick-menu-icon,
    body .quick-menu-bar .quick-menu-icon,
    .quick-menu-bar .quick-menu-icon {
        display: inline-block !important; /* inline with text */
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 11px !important; /* Very compact icon size */
        color: white !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        vertical-align: middle !important;
        flex-shrink: 0 !important; /* Don't shrink icon */
    }
    
    /* Quick menu text */
    html body .quick-menu-bar .quick-menu-item span,
    body .quick-menu-bar .quick-menu-item span,
    .quick-menu-bar .quick-menu-item span {
        display: inline !important; /* inline with icon */
        visibility: visible !important;
        opacity: 1 !important;
        color: white !important;
        font-size: 10px !important; /* Very compact text size */
        line-height: 1.2 !important; /* Very tight line height */
        font-weight: 600 !important; /* Bold like desktop */
        white-space: nowrap !important; /* No wrapping */
        overflow: visible !important; /* Show all text */
        text-overflow: clip !important; /* No ellipsis */
        max-width: none !important; /* No max width */
        padding: 0 !important;
        margin: 0 !important;
        vertical-align: middle !important;
    }
    
    /* No special body padding needed - everything is static/relative now */
    
    /* Ensure proper layout for #page */
    html body #page,
    body #page,
    #page {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* Landscape mode - Make elements more compact */
@media screen and (max-width: 767px) and (orientation: landscape) {
    /* Banner more compact */
    html body .banner-image,
    body .banner-image,
    .banner-image {
        max-height: 100px !important;
    }
    
    /* Header more compact */
    html body .site-header,
    body .site-header,
    .site-header {
        height: 40px !important;
    }
    
    .header-wrapper,
    .header-top {
        height: 40px !important;
        padding: 5px 10px !important;
    }
    
    .site-logo {
        font-size: 14px !important;
    }
    
    /* Quick menu more compact */
    html body .quick-menu-bar,
    body .quick-menu-bar,
    .quick-menu-bar {
        min-height: 35px !important;
    }
    
    .quick-menu {
        padding: 4px 3px !important;
    }
    
    .quick-menu-item {
        padding: 4px 8px !important;
        min-width: 55px !important;
        max-width: 70px !important;
        font-size: 10px !important;
    }
    
    .quick-menu-icon {
        font-size: 12px !important;
    }
    
    .quick-menu-item span {
        font-size: 9px !important;
    }
}

/* Remove any conflicting styles and ensure correct order */
@media screen and (max-width: 767px) {
    /* Override any hiding styles */
    .quick-menu-bar[style*="display: none"],
    .quick-menu-bar[style*="visibility: hidden"],
    .quick-menu-bar[style*="opacity: 0"] {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Ensure header wrapper and top have proper height */
    html body .header-wrapper,
    body .header-wrapper,
    .header-wrapper {
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    html body .header-top,
    body .header-top,
    .header-top {
        height: 50px !important;
        min-height: 50px !important;
        display: flex !important;
        align-items: center !important;
        padding: 0 10px !important;
    }
    
    /* Override any other fixed positioning from other CSS files */
    html body.mobile-layout .site-header,
    body.mobile-layout .site-header {
        position: relative !important;
    }
    
    html body.mobile-layout .quick-menu-bar,
    body.mobile-layout .quick-menu-bar {
        position: relative !important;
        top: 0 !important;
    }
}