/* ===================================
   MOBILE FIX - FINAL
   Đảm bảo header và hamburger button hiển thị trên mobile
   =================================== */

/* Force header to display on mobile */
@media (max-width: 992px) {
    /* Header phải hiển thị */
    header,
    .header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        background: white !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
    
    /* Ẩn desktop navigation trên mobile */
    .nav-menu {
        display: none !important;
    }
    
    /* Ẩn search box và contact info trên mobile */
    .search-box,
    .contact-info {
        display: none !important;
    }
    
    /* Logo hiển thị */
    .header .logo {
        display: block !important;
    }
    
    .header .logo img {
        height: 70px !important;
        width: auto !important;
    }
    
    /* Container header - ẩn đi, logo lấy từ .header trực tiếp */
    .header .container {
        display: contents !important;
    }
    
    /* Mobile header actions wrapper (language + hamburger) */
    .mobile-header-actions {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        position: fixed !important;
        top: 22px !important;
        right: 15px !important;
        transform: none !important;
        z-index: 10001 !important;
        flex-shrink: 0 !important;
        pointer-events: auto !important;
    }

    /* Hamburger button - inside .mobile-header-actions */
    .mobile-menu-btn {
        display: flex !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        width: 45px !important;
        height: 45px !important;
        background: #159611 !important;
        border: none !important;
        border-radius: 10px !important;
        cursor: pointer !important;
        z-index: 10001 !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 10px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
    }
    
    .mobile-menu-btn span {
        display: block !important;
        width: 22px !important;
        height: 2.5px !important;
        background: white !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
    }
    
    /* Body padding để không bị header che */
    body {
        padding-top: 90px !important;
    }
    
    /* Language switcher nhỏ gọn */
    .user-section,
    .language {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .header .logo img {
        height: 60px !important;
    }
    
    .mobile-header-actions {
        top: 17px !important;
        right: 12px !important;
        gap: 6px !important;
    }

    .mobile-menu-btn {
        width: 42px !important;
        height: 42px !important;
    }
    
    .mobile-menu-btn span {
        width: 20px !important;
        height: 2.5px !important;
    }
    
    body {
        padding-top: 80px !important;
    }
}

@media (max-width: 480px) {
    .header .logo img {
        height: 50px !important;
    }
    
    .mobile-header-actions {
        top: 13px !important;
        right: 10px !important;
        gap: 5px !important;
    }

    .mobile-menu-btn {
        width: 40px !important;
        height: 40px !important;
    }
    
    .mobile-menu-btn span {
        width: 18px !important;
        height: 2px !important;
    }
    
    body {
        padding-top: 70px !important;
    }
}
