/* ==========================================================================
   NAVIGATION RESPONSIVE CHO LAPDATFPTWIFI.COM
   Menu máy bàn (Desktop >= 769px) LUÔN HIỂN THỊ 1 HÀNG ĐỀU ĐẸP, không bị rớt dòng
   Hỗ trợ đầy đủ menu con (Dropdown Sub-menu) được tạo từ WP Admin -> Menus
   ========================================================================== */

/* 1. MÁY BÀN & LAPTOP (>= 769px): MENU LUÔN HIỂN THỊ NGANG RÕ RÀNG, ĐỀU NHAU */
@media (min-width: 769px) {
    #siteNav {
        display: block !important;
        background: linear-gradient(180deg, #1E40AF 0%, #0F172A 100%) !important;
        border-top: 2px solid #38BDF8 !important;
        border-bottom: 2px solid #0284C7 !important;
        box-shadow: 0 4px 15px rgba(15, 23, 42, 0.2) !important;
        width: 100% !important;
        position: relative !important;
        z-index: 99;
    }

    #siteNav .tdlx-container {
        padding: 0 10px;
    }

    #siteNav .nav-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        width: 100% !important;
    }

    #siteNav .nav-menu > li {
        flex: 1 1 auto !important;
        display: block !important;
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }

    #siteNav .nav-menu > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 12px 6px !important;
        color: #FFFFFF !important;
        font-size: 12.5px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.2px !important;
        border-right: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-left: 1px solid rgba(0, 0, 0, 0.18) !important;
        border-top: none !important;
        border-bottom: none !important;
        text-decoration: none !important;
        white-space: nowrap !important;
        width: 100% !important;
        box-sizing: border-box !important;
        transition: all 0.2s ease !important;
    }

    #siteNav .nav-menu > li:first-child > a {
        border-left: none !important;
    }

    #siteNav .nav-menu > li:last-child > a {
        border-right: none !important;
    }

    #siteNav .nav-menu > li > a:hover,
    #siteNav .nav-menu > li.current-menu-item > a {
        background: #0F172A !important;
        color: #38BDF8 !important;
        box-shadow: inset 0 -3px 0 #38BDF8 !important;
    }

    /* Dropdown Sub-menu khi người dùng tạo menu con trong WP Admin */
    #siteNav .nav-menu .sub-menu {
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        min-width: 220px !important;
        background: #0F172A !important;
        border: 1px solid #0284C7 !important;
        border-top: 2px solid #38BDF8 !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
        list-style: none !important;
        padding: 6px 0 !important;
        margin: 0 !important;
        z-index: 999 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(10px) !important;
        transition: all 0.25s ease !important;
        pointer-events: none !important;
    }

    #siteNav .nav-menu > li:hover > .sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    #siteNav .nav-menu .sub-menu li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #siteNav .nav-menu .sub-menu li a {
        display: block !important;
        padding: 10px 18px !important;
        color: #F8FAFC !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        text-transform: none !important;
        text-align: left !important;
        border: none !important;
        white-space: nowrap !important;
    }

    #siteNav .nav-menu .sub-menu li a:hover {
        background: #1E40AF !important;
        color: #38BDF8 !important;
        box-shadow: none !important;
    }

    /* Trên máy bàn: Ẩn tuyệt đối nút hamburger */
    .mobile-menu-toggle,
    .header-actions .mobile-menu-toggle {
        display: none !important;
    }

    /* Giữ các nút Zalo & Đăng ký trên máy bàn */
    .header-actions .btn-header-zalo,
    .header-actions .btn-header-dangky {
        display: inline-flex !important;
    }
}

/* Tinh chỉnh cho màn hình laptop nhỏ (769px - 1024px): Thu gọn padding để thanh menu không bị co ép */
@media (min-width: 769px) and (max-width: 1024px) {
    #siteNav .nav-menu > li > a {
        padding: 11px 4px !important;
        font-size: 11.5px !important;
        gap: 3px !important;
        letter-spacing: 0 !important;
    }
}

/* 2. ĐIỆN THOẠI DI ĐỘNG (<= 768px): DÙNG HAMBURGER MENU DROPDOWN */
@media (max-width: 768px) {
    #siteNav {
        display: none;
        background: #0F172A !important;
        border-top: 2px solid #38BDF8 !important;
        border-bottom: 2px solid #0284C7 !important;
        width: 100% !important;
    }

    #siteNav.mobile-active {
        display: block !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }

    #siteNav .nav-menu {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 8px 0 !important;
        margin: 0 !important;
    }

    #siteNav .nav-menu > li {
        width: 100% !important;
    }

    #siteNav .nav-menu > li + li {
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    #siteNav .nav-menu > li > a {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 13px 20px !important;
        color: #F8FAFC !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        border: none !important;
        text-decoration: none !important;
        transition: background-color 0.2s ease, color 0.2s ease !important;
    }

    #siteNav .nav-menu > li > a:hover,
    #siteNav .nav-menu > li.current-menu-item > a {
        background: #1E40AF !important;
        color: #38BDF8 !important;
    }

    /* Submenu trên mobile */
    #siteNav .nav-menu .sub-menu {
        display: block !important;
        background: rgba(0, 0, 0, 0.3) !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    #siteNav .nav-menu .sub-menu li a {
        padding-left: 35px !important;
        font-size: 13px !important;
        color: #94A3B8 !important;
    }

    #siteNav .nav-menu .sub-menu li a:hover {
        color: #38BDF8 !important;
    }

    .mobile-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        background: linear-gradient(135deg, #1E40AF 0%, #0F172A 100%) !important;
        border: 1.5px solid #38BDF8 !important;
        border-radius: 8px !important;
        color: #FFFFFF !important;
        font-size: 18px !important;
        cursor: pointer !important;
        padding: 0 !important;
    }

    .header-actions .btn-header-zalo,
    .header-actions .btn-header-dangky {
        display: none !important;
    }
}