/* ============================================
   MOBILE NAVBAR FIX - PRIORITY OVERRIDE
   Sửa lỗi navbar không hiển thị trên mobile
   Menu mở NGAY LẬP TỨC không có animation
   ============================================ */

/* ⚡ INSTANT TOGGLE - Remove all transitions and animations */
.mean-container .mean-nav,
.mean-nav,
.mean-nav ul,
.mean-nav ul li,
.mean-nav ul li a,
.mean-expand {
    transition: none !important;
    animation: none !important;
}

/* ⚡ FORCE SHOW MOBILE NAV - Highest Priority */
@media only screen and (max-width: 991px) {
    /* Mobile nav PHẢI hiển thị */
    .mobile-nav {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        background: #fff !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        padding: 10px 0 !important;
        min-height: 70px !important;
    }
    
    .mobile-nav .logo {
        display: block !important;
        position: absolute !important;
        left: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10000 !important;
    }
    
    .mobile-nav .logo img {
        display: block !important;
        max-height: 50px !important;
        width: auto !important;
    }
    
    /* Main nav PHẢI ẩn trên mobile */
    .main-nav {
        display: none !important;
    }
    
    /* ⚡ MEANMENU ELEMENTS - FORCE SHOW */
    .mean-container {
        display: block !important;
        visibility: visible !important;
    }
    
    .mean-container .mean-bar {
        display: block !important;
        visibility: visible !important;
        background-color: transparent !important;
        position: relative !important;
        padding: 0 !important;
        min-height: 70px !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* Hamburger button PHẢI hiển thị */
    .mean-container a.meanmenu-reveal,
    .meanmenu-reveal {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10001 !important;
        width: 35px !important;
        height: 30px !important;
        cursor: pointer !important;
        text-align: center !important;
        line-height: 30px !important;
        font-size: 24px !important;
        font-weight: bold !important;
        color: #ec2d2d !important;
        text-decoration: none !important;
    }
    
    /* Ba gạch (☰) - hamburger icon */
    .mean-container a.meanmenu-reveal span {
        display: block !important;
        background: #ec2d2d !important;
        height: 4px !important;
        border-radius: 3px !important;
        margin-bottom: 5px !important;
        transition: all 0.3s !important;
    }
    
    .mean-container a.meanmenu-reveal span:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Nút X khi menu mở */
    .mean-container a.meanmenu-reveal.meanclose {
        font-size: 28px !important;
        line-height: 28px !important;
        color: #ec2d2d !important;
    }
    
    .mean-container a.meanmenu-reveal.meanclose span {
        display: none !important;
    }
    
    /* Menu dropdown của meanmenu - INSTANT TOGGLE */
    .mean-container .mean-nav {
        display: none; /* Ẩn mặc định */
        visibility: visible !important;
        float: left !important;
        width: 100% !important;
        background: #fff !important;
        margin-top: 0 !important;
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
        max-height: calc(100vh - 70px) !important;
        overflow-y: auto !important;
        z-index: 9998 !important;
        /* ⚡ INSTANT - No animation */
        transition: none !important;
        animation: none !important;
    }
    
    /* Khi menu được mở - nhiều selectors để đảm bảo */
    .mean-container .mean-nav[style*="display: block"],
    .mean-nav.meanmenu-open,
    body.mean-nav-open .mean-nav {
        display: block !important;
    }
    
    /* Force show khi có class active hoặc open */
    .mean-container.active .mean-nav,
    .mean-container.open .mean-nav,
    .mobile-nav.menu-open .mean-nav {
        display: block !important;
    }
    
    .mean-container .mean-nav ul {
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        /* ⚡ INSTANT - No animation */
        transition: none !important;
        animation: none !important;
    }
    
    .mean-container .mean-nav ul li {
        display: block !important;
        width: 100% !important;
        float: none !important;
        position: relative !important;
    }
    
    .mean-container .mean-nav ul li a {
        display: block !important;
        color: #333 !important;
        padding: 12px 20px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        font-size: 15px !important;
        text-decoration: none !important;
        transition: all 0.3s !important;
    }
    
    .mean-container .mean-nav ul li a:hover,
    .mean-container .mean-nav ul li a.active {
        color: #ec2d2d !important;
        background: #f8f8f8 !important;
    }
    
    /* Submenu styling - INSTANT TOGGLE */
    .mean-container .mean-nav ul li li a {
        padding-left: 30px !important;
        font-size: 14px !important;
    }
    
    .mean-container .mean-nav ul ul {
        /* ⚡ INSTANT - No animation for submenu */
        transition: none !important;
        animation: none !important;
        background: #f8f9fa !important;
        border-top: 1px solid #e0e0e0 !important;
    }
    
    /* Submenu items */
    .mean-container .mean-nav ul ul li a {
        padding: 10px 20px 10px 40px !important;
        font-size: 14px !important;
        color: #555 !important;
        border-bottom: 1px solid #e8e8e8 !important;
    }
    
    .mean-container .mean-nav ul ul li a:hover {
        background: #fff !important;
        color: #ec2d2d !important;
        padding-left: 45px !important;
    }
    
    /* Nested submenu (nếu có) */
    .mean-container .mean-nav ul ul ul li a {
        padding-left: 50px !important;
    }
    
    /* Expand button cho submenu - CHỈ Ở MỤC SẢN PHẨM */
    .mean-container .mean-nav ul li a.mean-expand {
        display: inline-block !important;
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        width: 50px !important;
        height: 100% !important;
        padding: 0 !important;
        text-align: center !important;
        background: transparent !important;
        border: none !important;
        border-left: 1px solid #f0f0f0 !important;
        font-size: 20px !important;
        font-weight: bold !important;
        color: #ec2d2d !important;
        line-height: 48px !important;
        cursor: pointer !important;
        text-decoration: none !important;
        transition: all 0.3s !important;
    }
    
    .mean-container .mean-nav ul li a.mean-expand:hover {
        background: #f8f8f8 !important;
        color: #d02020 !important;
    }
    
    .mean-container .mean-nav ul li a.mean-expand.mean-clicked {
        background: #f0f0f0 !important;
        color: #d02020 !important;
    }
    
    /* Menu item có expand button cần padding-right để tránh text đè lên nút */
    .mean-container .mean-nav ul li:has(> a.mean-expand) > a:not(.mean-expand) {
        padding-right: 60px !important;
    }
    
    /* Body padding để tránh content bị che bởi fixed navbar */
    body {
        padding-top: 70px !important;
    }
    
    /* Page title area adjustment */
    .page-title-area {
        margin-top: 0 !important;
    }
}

/* ⚡ DESKTOP - Đảm bảo mobile-nav ẩn */
@media only screen and (min-width: 992px) {
    .mobile-nav {
        display: none !important;
    }
    
    .main-nav {
        display: block !important;
    }
    
    /* Ẩn tất cả meanmenu elements trên desktop */
    .mean-container,
    .mean-bar,
    .meanmenu-reveal,
    .mean-nav {
        display: none !important;
    }
}

/* Sticky behavior */
.is-sticky {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    left: 0 !important;
    z-index: 9999 !important;
    animation: fadeInDown 500ms ease-in-out !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    background: #ffffff !important;
}

/* Animation */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}