/* Ẩn menu mobile trên màn hình mặc định (Desktop) */
.menu-bar-mobile {
    display: none;
}

@media screen and (max-width: 1280px) {

}

@media screen and (max-width: 1177px) {
    /* CHỈ ẩn Menu Desktop (SmartMenus và nút Hamburger gốc). 
       KHÔNG ẩn .nav_header vì thẻ này đang là thẻ cha chứa cả khối HTML của file nav.cshtml */
    #main-menu,
    .main-menu-btn {
        display: none !important;
    }
    
    .nav_header {
        background: transparent !important;
    }

    /* Hiển thị Bottom Navbar */
    .menu-bar-mobile {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: #FFFCF7; /* Đồng bộ nền sáng theo .header */
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08); /* Đổ bóng nhẹ lên trên */
        z-index: 1050; /* Luôn nổi trên cùng */
        padding-bottom: env(safe-area-inset-bottom); /* Fix cho iPhone màn hình tai thỏ/đảo động */
    }

    .mobile-bottom-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 5px 10px;
    }

    .mobile-bottom-nav li {
        flex: 1 1 0%;
        min-width: 0; /* Ép buộc chia cột bằng nhau tuyệt đối bất kể chữ dài hay ngắn */
    }

    .mobile-bottom-nav a,
    .mobile-bottom-nav .mobile-menu-trigger {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        height: 100%;
        text-decoration: none;
        cursor: pointer;
        margin: 0;
        margin-top: 8px;
        padding: 8px 0;
        border-radius: 12px;
        transition: all 0.3s ease;
        word-break: break-word;
        position: relative;
        color: var(--Content-text-tertiary, #6A7282);
        text-align: center;
        font-family: "Be Vietnam Pro";
        font-size: 11px;
        font-style: normal;
        font-weight: 500;
        line-height: 16px;
        letter-spacing: 0.5px;
    }

    .mobile-bottom-nav a.current,
    .mobile-bottom-nav .mobile-menu-trigger.active,
    .mobile-bottom-nav .mobile-menu-trigger.open-menu-state {
        color: #009B7C; /* Đổi màu xanh chủ đạo của thương hiệu (#009B7C) */
        background-color: #DAF8EC; /* Toát lên khối nền xanh êm nhẹ báo hiệu active */
    }
    
    /* Vạch kẻ chỉ báo Active ở sát mép đỉnh trên cùng */
    .mobile-bottom-nav a.current::before,
    .mobile-bottom-nav .mobile-menu-trigger.active::before,
    .mobile-bottom-nav .mobile-menu-trigger.open-menu-state::before {
        content: '';
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 2px;
        background-color: #009B7C;
        border-radius: 8px;
    }
    
    /* Bộ lọc mầu CSS tự động nhộm xanh cho icon ảnh (PNG/JPG) khi đang được Active */
    .mobile-bottom-nav a.current img.iconsmall,
    .mobile-bottom-nav .mobile-menu-trigger.active img.iconsmall,
    .mobile-bottom-nav .mobile-menu-trigger.open-menu-state img.iconsmall {
        filter: invert(34%) sepia(85%) saturate(1450%) hue-rotate(130deg) brightness(89%) contrast(100%);
    }

    .mobile-bottom-nav a.current svg,
    .mobile-bottom-nav .mobile-menu-trigger.active svg,
    .mobile-bottom-nav .mobile-menu-trigger.open-menu-state svg {
        stroke: #009B7C;
    }

    .mobile-bottom-nav img.iconsmall,
    .mobile-bottom-nav svg {
        width: 24px; /* Icon giữ nguyên cỡ chuẩn trên Tablet/iPad */
        height: 24px;
        margin-bottom: 4px;
        object-fit: contain;
    }

    /* ====================================================
       OFF-CANVAS MOBILE MENU CSS
       ==================================================== */
    
    /* --- LỚP PHỦ ĐEN BACKDROP --- */
    .offcanvas-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        z-index: 1060;
        transition: all 0.3s ease;
    }
    
    .offcanvas-backdrop.active {
        opacity: 1;
        visibility: visible;
    }

    /* --- KHỐI OFF-CANVAS TRƯỢT TỪ TRÁI --- */
    .mobile-offcanvas-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #FFFFFF;
        z-index: 1070;
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        display: flex;
        flex-direction: column;
        box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
    }
    
    .mobile-offcanvas-menu.active {
        transform: translateX(0);
    }
    
    /* HEADER */
    .offcanvas-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #009B7C;
        color: #fff;
        padding: 10px 15px; /* Giảm padding một chút để gọn gàng hơn vì logo to */
    }
    
    .offcanvas-brand {
        display: flex;
        align-items: center;
    }
    
    .offcanvas-brand img {
        width: 76px;
        height: 76px;
        object-fit: contain;
        background-color: #fff; /* Lót nền trắng đặc trưng của header offcanvas */
        border-radius: 50%;
        padding: 2px;
        margin-right: 8px; /* Margin giống logo gốc */
    }
    
    .offcanvas-brand a {
        text-decoration: none;
        display: flex;
        flex-shrink: 0;
    }
    
    .offcanvas-brand .logocontent {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        height: 100%;
    }
    
    .offcanvas-brand .toplogocontent,
    .offcanvas-brand .bottomlogocontent {
        font-family: "Be Vietnam Pro", sans-serif;
        color: #fff !important; /* Ép chữ màu trắng trên nền Header xanh */
        text-transform: uppercase;
    }
    
    .offcanvas-brand .toplogocontent {
        font-size: 20px;
        font-weight: 900;
        line-height: 1.33;
    }
    
    .offcanvas-brand .bottomlogocontent {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.4;
    }
    
    .offcanvas-close {
        color: #fff;
        display: flex;
        align-items: center;
        transition: transform 0.2s ease;
    }
    
    .offcanvas-close:active {
        transform: scale(0.9);
    }
    
    /* KHU VỰC CUỘN ĐƯỢC */
    .offcanvas-body {
        flex: 1;
        overflow-y: auto;
        background-color: #F9FAFB;
    }
    
    /* Gói nội dung chính (trừ footer) để giữ padding 20px */
    .offcanvas-content-wrapper {
        padding: 20px;
    }
    
    /* VÙNG THỜI GIAN ĐỊA ĐIỂM Ở MENU */
    .offcanvas-location {
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #E5E7EB;
        text-align: center;
    }
    .offcanvas-location .nav-city {
        font-family: inherit;
        font-size: 16px;
        font-weight: 700;
        color: #111827;
        margin-bottom: 4px;
    }
    .offcanvas-location .nav-time {
        font-size: 13px;
        color: #6B7280;
    }
    
    /* LOGIN BUTTON */
    .offcanvas-auth {
        margin-bottom: 25px;
    }
    
    .offcanvas-auth .btn-login {
        display: block;
        text-align: center;
        background-color: #009B7C;
        color: #fff;
        padding: 12px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 15px;
        text-decoration: none;
        font-family: "Be Vietnam Pro", sans-serif;
    }
    
    /* THỰC ĐƠN ACCORDION DỌC */
    .offcanvas-nav {
        background: #fff;
        border-radius: 12px;
        padding: 10px 0 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        margin-bottom: 25px;
        overflow: hidden;
    }
    
    .offcanvas-nav .nav-title {
        padding: 5px 20px 10px;
        font-size: 11px;
        text-transform: uppercase;
        font-weight: 700;
        color: #9CA3AF;
        letter-spacing: 1px;
    }
    
    .offcanvas-main-ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .offcanvas-main-ul li.popup-item {
        border-bottom: 1px solid #F3F4F6;
    }
    .offcanvas-main-ul li.popup-item:last-child {
        border-bottom: none;
    }
    
    .nav-item-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
        transition: background 0.2s;
        cursor: pointer; /* Thêm bàn tay để báo hiệu có thể click toàn bộ dòng */
    }
    
    .nav-item-wrapper:not(.current):not(.open):active {
        background-color: #f0fdf4; /* Hiệu ứng nhẹ khi chạm vào */
    }

    .nav-item-wrapper.current:active,
    .nav-item-wrapper.open:active {
        background-color: #00876D; /* Xanh đậm hơn chút khi click nhấn vào dòng đã xanh */
    }
    
    .nav-item-wrapper a {
        flex: 1;
        font-size: 15px;
        color: #1F2937;
        font-weight: 500;
        text-decoration: none;
        line-height: 1.4;
    }
    
    /* Khi mục mẹ đang bật/active hoặc đang được mở ra (open) */
    .nav-item-wrapper.current,
    .nav-item-wrapper.open {
        background-color: #009B7C;
    }

    .nav-item-wrapper.current a,
    .nav-item-wrapper.open a {
        color: #FFF;
        font-weight: 600;
    }
    
    /* Nút Toggle mở menu con */
    .nav-toggle-icon {
        width: 32px;
        height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: #F3F4F6;
        color: #6B7280;
        cursor: pointer;
        transition: all 0.3s;
    }
    
    /* Nút Toggle sáng trắng mềm mại trên nền xanh */
    .nav-item-wrapper.current .nav-toggle-icon,
    .nav-item-wrapper.open .nav-toggle-icon {
        background-color: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .nav-item-wrapper.open .nav-toggle-icon {
        transform: rotate(180deg);
    }
    
    /* MENU CON (Submenu) */
    .nav-submenu {
        display: none;
        background-color: #FFF; /* Nền xám nhạt phân tầng rõ rệt */
        padding: 6px 0;
        border-top: 1px solid #F3F4F6; /* Viền nhỏ tinh tế */
    }
    
    .nav-submenu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .nav-submenu a {
        display: block;
        padding: 10px 20px 10px 42px; /* Lùi trái để thể hiện cấp con */
        font-size: 14px;
        font-weight: 400; /* Font chữ thuôn mỏng, nhẹ nhàng hơn bậc cha */
        color: #4B5563;
        text-decoration: none;
        position: relative;
        transition: all 0.2s ease;
        line-height: 1.5;
        border-top: 1px solid #F3F4F6;
    }

    .nav-submenu ul li:first-child a {
        border-top: none; /* Bỏ viền trên cùng của submenu để gọn hơn */
    }

    /* Thêm dấu chấm chỉ thị nhỏ (bullet) đằng trước */
    .nav-submenu a::before {
        content: "";
        position: absolute;
        left: 24px;
        top: 50%;
        transform: translateY(-50%);
        width: 5px;
        height: 5px;
        background-color: #D1D5DB;
        border-radius: 50%;
        transition: all 0.2s ease;
    }
    
    /* Hiệu ứng khi chạm vào menu con */
    .nav-submenu a:active {
        background-color: #F3F4F6;
        color: #009B7C;
    }

    .nav-submenu a:active::before {
        background-color: #009B7C;
        transform: translateY(-50%) scale(1.5); /* Chấm nháy to lên */
    }
    
    /* Trạng thái đang chọn (current) của menu con */
    .nav-submenu a.current {
        color: #009B7C;
        font-weight: 600; /* Đậm vừa phải để phân biệt với con khác */
        background-color: #F0FAF4; /* Nền xanh nhạt dịu mắt */
    }

    .nav-submenu a.current::before {
        background-color: #009B7C;
        transform: translateY(-50%) scale(1.5); /* Chấm xanh to rực lên báo hiệu vị trí hiện tại */
    }
    
    /* FOOTER TRONG OFF CANVAS */
    /* #offcanvas-footer-placeholder {
        margin-top: auto;
    }
    #offcanvas-footer-placeholder .footer {
        background: transparent !important;
    }
    #offcanvas-footer-placeholder .footer img {
        max-width: 150px;
    }
    #offcanvas-footer-placeholder .footer p,
    #offcanvas-footer-placeholder .footer span,
    #offcanvas-footer-placeholder .footer a {
        font-size: 12px !important;
        line-height: 1.5;
        color: #6B7280 !important;
    } */

    footer .main-footer-copyright {
        padding-bottom: 16px !important;
    }

    /* ---------------------------------
       DỌN DẸP LẠI HEADER BÊN NGOÀI
       --------------------------------- */
    /* Ẩn cục Location và Action thừa thãi trên top */
    .nav-information,
    .nav-action {
        display: none !important;
    }
    

    .footer {
        display: none !important;
    }

    #offcanvas-footer-placeholder .footer {
        display: block !important;
    }
   
    
    /* Canh Logo sang trái, cho Header Top rộng rãi */
    .nav_top_option {
        justify-content: flex-start !important;
    }
}

@media screen and (max-width: 991px) {

}

@media screen and (max-width: 768px) {
    .offcanvas-brand img { width: 68px; height: 68px; }
    .offcanvas-brand .toplogocontent { font-size: 18px; }
    .offcanvas-brand .bottomlogocontent { font-size: 15px; }
}

@media screen and (max-width: 576px) {
    /* Thu nhỏ icon và font nếu màn hình ngang */
    .mobile-bottom-nav a, .mobile-bottom-nav .mobile-menu-trigger { font-size: 10px; line-height: 1.5; }
    .mobile-bottom-nav img.iconsmall, .mobile-bottom-nav svg { width: 20px; height: 20px; margin-bottom: 4px; } /* Xuống 576px mới bắt đầu giảm icon còn 20px */

    /* Ở 576px: Giảm còn 5 nút (4 Items + 1 Menu) */
    .bottom-item-4 { display: none !important; }

    /* Logo giống Responsive navbar_mobile.css tại đây */
    .offcanvas-brand img { width: 60px; height: 60px; }
    .offcanvas-brand .toplogocontent { font-size: 16px; }
    .offcanvas-brand .bottomlogocontent { font-size: 14px; }
}

@media screen and (max-width: 480px) {

}

@media screen and (max-width: 460px) {

    /* Màn chuẩn điện thoại thu gọn bé hơn */
    .mobile-bottom-nav a, .mobile-bottom-nav .mobile-menu-trigger { font-size: 10px; line-height: 1.5; }

    /* Ở 460px: Giảm còn 4 nút (3 Items + 1 Menu) */
    .bottom-item-3 { display: none !important; }

    .offcanvas-brand img { width: 54px; height: 54px; }
    .offcanvas-brand .toplogocontent { font-size: 15px; }
    .offcanvas-brand .bottomlogocontent { font-size: 13px; }
}

@media screen and (max-width: 420px) {

}

@media screen and (max-width: 400px) {

}

@media screen and (max-width: 380px) {

    /* Ép cỡ cực nhỏ cho màn cổ điển để nhét vừa nút */
    .mobile-bottom-nav a, .mobile-bottom-nav .mobile-menu-trigger { font-size: 8.5px; line-height: 1.5; }

    /* Nhỏ hơn 380px vẫn giữ tối thiểu 4 nút theo yêu cầu */

    .offcanvas-brand img { width: 56px; height: 56px; }
    .offcanvas-brand .toplogocontent { font-size: 14px; }
    .offcanvas-brand .bottomlogocontent { font-size: 12px; }
}

@media screen and (max-width: 320px) {
    .offcanvas-brand img { width: 42px; height: 42px; }
    .offcanvas-brand .toplogocontent { font-size: 13px; }
    .offcanvas-brand .bottomlogocontent { font-size: 11px; }
}

@media screen and (max-width: 280px) {

}