/* =====================================================================
   ONIC.VN – MENU MOBILE (sidebar trượt)  ·  assets/onic-mobile-menu.css (theme con)
   Thay cho CSS đã dán ở Flatsome > Advanced > Custom CSS > ô "Tablets and down".
   Toàn bộ nằm trong @media (max-width: 849px) = đúng điểm ngắt off-canvas của Flatsome.
   ===================================================================== */
@media (max-width: 849px) {

    /* 1. Khung sidebar */
    #main-menu.mobile-sidebar {
        width: 100% !important;
        max-width: 360px !important;
        background-color: #fff !important;
    }

    #main-menu.mobile-sidebar .sidebar-menu {
        background-color: #fff !important;
        padding-top: 16px !important;
    }

    /* 2. Mục menu chính */
    #main-menu.mobile-sidebar .menu-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #DBE5EF !important;
        padding: 0 15px;
    }

    #main-menu.mobile-sidebar .menu-item:last-child {
        border-bottom: 0 !important;
    }

    #main-menu.mobile-sidebar .menu-item > a {
        flex-grow: 1;
        white-space: nowrap;
        padding: 14px 0 !important;
        color: #071A3A !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        text-transform: none !important;
    }

    #main-menu.mobile-sidebar .menu-item > a:hover,
    #main-menu.mobile-sidebar .current-menu-item > a {
        color: #1268C4 !important;
    }

    /* 3. Nút mũi tên mở menu con */
    #main-menu.mobile-sidebar .toggle {
        flex-shrink: 0;
        padding: 14px !important;
    }

    #main-menu.mobile-sidebar .toggle i {
        color: #1268C4 !important;
        font-size: 16px !important;
    }

    /* 4. Menu con */
    #main-menu.mobile-sidebar .sub-menu {
        width: 100% !important;
        background-color: #F7FBFF !important;
    }

    #main-menu.mobile-sidebar .sub-menu .menu-item > a {
        color: #52657D !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        padding: 11px 28px !important;
    }

    #main-menu.mobile-sidebar .nav-slide-header {
        background-color: #E8F4FF !important;
        color: #071A3A !important;
        font-size: 16px !important;
        font-weight: 700 !important;
        padding: 14px 15px !important;
    }

    /* 5. Lớp phủ phía sau menu (navy mờ, không dùng trắng) */
    .off-canvas-overlay {
        background-color: rgba(7, 26, 58, 0.55) !important;
    }

    /* 6. HAI NÚT CUỐI MENU: Hotline + Dùng thử 7 ngày (cùng kích thước, cùng một hàng chữ/icon)
       Vì sao cần: assets/custom-site.css có quy tắc ".off-canvas .nav-sidebar > li > a[href*=tel]"
       ép display:block !important nên icon bị đẩy lên trên chữ. Quy tắc dưới đây có ID nên thắng. */
    #main-menu.mobile-sidebar .nav-sidebar > li:has(> a.btn-hotline-call),
    #main-menu.mobile-sidebar .nav-sidebar > li:has(> a.onic-mm-cta),
    #main-menu.mobile-sidebar .nav-sidebar > li:has(> a.onic-mm-chat) {
        display: block;
        padding: 0 15px !important;
        border-bottom: 0 !important;
    }

    #main-menu.mobile-sidebar .nav-sidebar > li > a.btn-hotline-call,
    #main-menu.mobile-sidebar .nav-sidebar > li > a.onic-mm-cta,
    #main-menu.mobile-sidebar .nav-sidebar > li > a.onic-mm-chat {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
        min-height: 48px;
        margin: 8px 0 !important;
        padding: 10px 16px !important;
        border-radius: 999px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        text-transform: none !important;
        text-decoration: none !important;
        white-space: nowrap;
    }

    /* Hotline: giữ màu xanh lá của site */
    #main-menu.mobile-sidebar .nav-sidebar > li > a.btn-hotline-call {
        background: #E8F5E9 !important;
        border: 1.5px solid #4CAF50 !important;
        color: #2E7D32 !important;
    }

    #main-menu.mobile-sidebar a.btn-hotline-call .hotline-icon-pulse {
        flex: 0 0 auto;
        margin: 0 !important;
    }

    #main-menu.mobile-sidebar a.btn-hotline-call .hotline-num {
        margin: 0 !important;
        line-height: 1.2;
    }

    /* Dùng thử 7 ngày: màu cam CTA của Onic */
    #main-menu.mobile-sidebar .nav-sidebar > li > a.onic-mm-cta {
        background: #F28A1A !important;
        border: 1.5px solid #F28A1A !important;
        color: #fff !important;
    }

    #main-menu.mobile-sidebar .nav-sidebar > li > a.onic-mm-cta:hover {
        background: #D9740D !important;
        border-color: #D9740D !important;
    }

    /* Chat với AI: nút viền xanh Onic, nền trắng (nhẹ hơn nút CTA cam để không tranh sự chú ý) */
    #main-menu.mobile-sidebar .nav-sidebar > li > a.onic-mm-chat {
        background: #fff !important;
        border: 1.5px solid #1268C4 !important;
        color: #1268C4 !important;
        cursor: pointer;
    }

    #main-menu.mobile-sidebar .nav-sidebar > li > a.onic-mm-chat:hover,
    #main-menu.mobile-sidebar .nav-sidebar > li > a.onic-mm-chat:active {
        background: #E8F4FF !important;
    }

    #main-menu.mobile-sidebar a.onic-mm-chat svg {
        flex: 0 0 auto;
        display: block;
    }

    /* 6b. Nút xanh "Check SEO, GEO miễn phí" trong menu mobile: cùng cỡ với nút Dùng thử và Hotline.
       (Ở menu ngang trên máy tính nút vẫn nhỏ gọn theo onic-global.css, quy tắc này chỉ áp trong sidebar.) */
    #main-menu.mobile-sidebar li:has(> a.btn-onic-check) {
        display: block;
        padding: 0 15px !important;
        border-bottom: 0 !important;
    }

    #main-menu.mobile-sidebar a.btn-onic-check {
        display: flex !important;
        justify-content: center !important;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
        height: auto !important;
        min-height: 48px !important;
        margin: 8px 0 !important;
        padding: 10px 16px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
        color: #fff !important;
        text-transform: uppercase !important;
    }

    #main-menu.mobile-sidebar a.btn-onic-check span {
        font-size: inherit !important;
        font-weight: inherit !important;
        color: inherit !important;
    }

    #main-menu.mobile-sidebar a.btn-onic-check svg {
        width: 17px;
        height: 17px;
    }

    /* 7. Tablet lớn (từ 600px): sidebar rộng và chữ lớn hơn một chút */
    @media (min-width: 600px) {
        #main-menu.mobile-sidebar {
            max-width: 420px !important;
        }
        #main-menu.mobile-sidebar .menu-item > a {
            font-size: 19px !important;
            padding: 17px 0 !important;
        }
        #main-menu.mobile-sidebar .sub-menu .menu-item > a {
            font-size: 17px !important;
        }
    }

    /* 8. Điện thoại (tối đa 549px): chừa vệt bên phải để chạm đóng menu */
    @media (max-width: 549px) {
        #main-menu.mobile-sidebar {
            max-width: 88vw !important;
        }
    }

}