/* ============================================
   MOBILE NAVBAR FIX - SIMPLE VERSION
   Để meanmenu tự xử lý, chỉ fix những gì cần thiết
   ============================================ */

/* ⚡ 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 */
    .mean-container {
        display: block !important;
        width: 100% !important;
    }
    
    .mean-container .mean-bar {
        background-color: transparent !important;
        padding: 0 !important;
        min-height: 70px !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    /* Hamburger button */
    .mean-container a.meanmenu-reveal {
        display: block !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: 8px !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 - CHO PHÉP JS CONTROL */
    .mean-container .mean-nav {
        /* Không set display ở đây, để JS control hoàn toàn */
        float: left;
        width: 100%;
        background: #fff;
        margin-top: 0;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        z-index: 9998;
    }
    
    .mean-container .mean-nav ul {
        display: block;
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    .mean-container .mean-nav ul li {
        display: block;
        width: 100%;
        float: none;
        position: relative;
    }
    
    .mean-container .mean-nav ul li a {
        display: block;
        color: #333;
        padding: 12px 20px;
        border-bottom: 1px solid #f0f0f0;
        font-size: 15px;
        text-decoration: none;
    }
    
    .mean-container .mean-nav ul li a:hover,
    .mean-container .mean-nav ul li a.active {
        color: #ec2d2d;
        background: #f8f8f8;
    }
    
    /* Submenu */
    .mean-container .mean-nav ul li li a {
        padding-left: 30px;
        font-size: 14px;
    }
    
    .mean-container .mean-nav ul ul {
        background: #f8f9fa;
        border-top: 1px solid #e0e0e0;
    }
    
    .mean-container .mean-nav ul ul li a {
        padding: 10px 20px 10px 40px;
        font-size: 14px;
        color: #555;
        border-bottom: 1px solid #e8e8e8;
    }
    
    .mean-container .mean-nav ul ul li a:hover {
        background: #fff;
        color: #ec2d2d;
        padding-left: 45px;
    }
    
    /* Expand button (+/-) - FIXED POSITIONING */
    .mean-container .mean-nav > ul > li > a.mean-expand {
        display: block;
        position: absolute;
        right: 0;
        top: 200px;
        width: 50px;
        height: 48px;
        padding: 0;
        text-align: center;
        background: transparent;
        border: none;
        border-left: 1px solid #f0f0f0;
        font-size: 20px;
        font-weight: bold;
        color: #ec2d2d;
        line-height: 48px;
        cursor: pointer;
        text-decoration: none;
        z-index: 10;
    }
    
    /* Đảm bảo parent li có position relative */
    .mean-container .mean-nav > ul > li {
        position: relative;
    }
    
    .mean-container .mean-nav ul li a.mean-expand:hover {
       
        color: #d02020;
    }
    
    .mean-container .mean-nav ul li a.mean-expand.mean-clicked {
       
        color: #d02020;
    }
    
    /* Đảm bảo parent li có position relative */
    .mean-container .mean-nav > ul > li {
        position: relative;
    }
    
    /* Menu item có expand button - padding cho text */
    .mean-container .mean-nav > ul > li:has(> a.mean-expand) > a:not(.mean-expand) {
        padding-right: 60px;
    }
    
    /* Menu item KHÔNG có expand button - full width */
    .mean-container .mean-nav > ul > li:not(:has(> a.mean-expand)) > a {
        padding-right: 20px;
    }
    
    /* Body padding */
    body {
        padding-top: 70px !important;
    }
    
    .page-title-area {
        margin-top: 0 !important;
    }
}

/* ⚡ DESKTOP - Ẩn mobile-nav */
@media only screen and (min-width: 992px) {
    .mobile-nav {
        display: none !important;
    }
    
    .main-nav {
        display: block !important;
    }
    
    .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;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    background: #ffffff !important;
}