/*
 * Mobile off-canvas menu V2.
 * Replaces the recognizable default Flatsome drawer with a branded layout.
 */

@media (max-width: 849px) {
    /* Darken the page behind the drawer. */
    .mfp-bg,
    .off-canvas .mfp-bg {
        background: #031a32 !important;
        opacity: .78 !important;
    }

    /* Drawer width and main background. */
    .off-canvas-left .mfp-content,
    .off-canvas-right .mfp-content,
    .mfp-content:has(.mobile-sidebar) {
        width: min(88vw, 370px) !important;
        max-width: 370px !important;
        background: transparent !important;
        box-shadow: 18px 0 50px rgba(0, 0, 0, .28);
    }

    .mobile-sidebar,
    .off-canvas .mobile-sidebar {
        position: relative;
        min-height: 100vh;
        padding: 0 !important;
        overflow-x: hidden;
        color: #fff;
        background:
            radial-gradient(circle at 95% 3%, rgba(244, 155, 36, .18), transparent 28%),
            linear-gradient(165deg, #082f5a 0%, #061f3c 58%, #04172d 100%) !important;
    }

    /* Brand heading created without changing PHP markup. */
    .mobile-sidebar::before {
        display: block;
        padding: 25px 70px 8px 22px;
        color: #fff;
        content: "BẾP INOX BẢO LINH";
        font-size: 18px;
        font-weight: 850;
        letter-spacing: -.01em;
        line-height: 1.2;
    }

    .mobile-sidebar::after {
        position: absolute;
        top: 53px;
        left: 22px;
        color: rgba(255, 255, 255, .58);
        content: "Thiết bị bếp công nghiệp";
        font-size: 11px;
        font-weight: 500;
    }

    /* Remove the faded Flatsome logo/header block inside the drawer. */
    .mobile-sidebar .logo,
    .mobile-sidebar .header-logo,
    .mobile-sidebar .mobile-sidebar-header,
    .mobile-sidebar .header-block {
        display: none !important;
    }

    /* Close button. */
    .mfp-wrap .mfp-close,
    .off-canvas .mfp-close {
        top: 17px !important;
        right: 15px !important;
        display: inline-flex !important;
        width: 39px !important;
        height: 39px !important;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 255, 255, .18) !important;
        border-radius: 50% !important;
        color: #fff !important;
        background: rgba(255, 255, 255, .08) !important;
        font-size: 28px !important;
        line-height: 1 !important;
        opacity: 1 !important;
    }

    .mfp-wrap .mfp-close:hover {
        border-color: rgba(244, 155, 36, .7) !important;
        background: rgba(244, 155, 36, .18) !important;
    }

    /* Inner content spacing, including room for the fixed contact bar. */
    .mobile-sidebar .sidebar-menu {
        padding: 31px 18px 100px !important;
    }

    /* Search box. */
    .mobile-sidebar .header-search-form,
    .mobile-sidebar .search-form,
    .mobile-sidebar .searchform-wrapper {
        margin: 0 0 19px !important;
        padding: 0 !important;
    }

    .mobile-sidebar form.searchform {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 48px;
        gap: 0;
        padding: 4px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .16);
        border-radius: 11px;
        background: rgba(255, 255, 255, .09);
        box-shadow: none;
    }

    .mobile-sidebar form.searchform .flex-col {
        display: block;
        min-width: 0;
    }

    .mobile-sidebar form.searchform input[type="search"],
    .mobile-sidebar form.searchform .search-field {
        width: 100% !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 13px !important;
        border: 0 !important;
        color: #fff !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 13px !important;
    }

    .mobile-sidebar form.searchform input::placeholder {
        color: rgba(255, 255, 255, .58);
    }

    .mobile-sidebar form.searchform button,
    .mobile-sidebar form.searchform .ux-search-submit {
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 8px !important;
        color: #fff !important;
        background: var(--bep-accent) !important;
    }

    /* Main navigation. */
    .mobile-sidebar .nav,
    .mobile-sidebar .nav-vertical {
        margin: 0 !important;
        padding: 0 !important;
    }

    .mobile-sidebar .nav-vertical > li {
        position: relative;
        margin: 7px 0 !important;
        border: 0 !important;
    }

    .mobile-sidebar .nav-vertical > li > a {
        position: relative;
        display: flex !important;
        min-height: 52px;
        align-items: center;
        padding: 11px 50px 11px 16px !important;
        border: 1px solid rgba(255, 255, 255, .09) !important;
        border-radius: 10px;
        color: rgba(255, 255, 255, .9) !important;
        background: rgba(255, 255, 255, .055);
        font-size: 13px !important;
        font-weight: 750 !important;
        letter-spacing: .025em;
        line-height: 1.3;
        text-transform: uppercase;
    }

    .mobile-sidebar .nav-vertical > li > a::before {
        display: inline-block;
        width: 5px;
        height: 5px;
        margin-right: 11px;
        border-radius: 50%;
        background: var(--bep-accent);
        content: "";
        box-shadow: 0 0 0 5px rgba(244, 155, 36, .09);
    }

    .mobile-sidebar .nav-vertical > li.current-menu-item > a,
    .mobile-sidebar .nav-vertical > li.current-menu-ancestor > a,
    .mobile-sidebar .nav-vertical > li.active > a,
    .mobile-sidebar .nav-vertical > li > a:hover {
        border-color: rgba(244, 155, 36, .34) !important;
        color: #fff !important;
        background: linear-gradient(
            135deg,
            rgba(11, 111, 207, .65),
            rgba(11, 79, 156, .46)
        );
    }

    /* Dropdown toggle on the right. */
    .mobile-sidebar .nav-vertical li .toggle {
        top: 6px !important;
        right: 6px !important;
        display: inline-flex !important;
        width: 40px !important;
        height: 40px !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 8px;
        color: rgba(255, 255, 255, .72) !important;
        background: rgba(255, 255, 255, .075);
        opacity: 1 !important;
    }

    .mobile-sidebar .nav-vertical li .toggle i {
        top: auto !important;
        color: inherit !important;
        font-size: 13px !important;
    }

    .mobile-sidebar .nav-vertical li.active > .toggle {
        color: #fff !important;
        background: rgba(244, 155, 36, .2);
    }

    /* Child menu becomes a slim indented panel. */
    .mobile-sidebar .nav-vertical .children,
    .mobile-sidebar .nav-vertical .sub-menu {
        margin: 7px 0 10px 18px !important;
        padding: 5px 0 5px 12px !important;
        border: 0 !important;
        border-left: 1px solid rgba(244, 155, 36, .38) !important;
        background: transparent !important;
    }

    .mobile-sidebar .nav-vertical .children li,
    .mobile-sidebar .nav-vertical .sub-menu li {
        margin: 3px 0 !important;
        border: 0 !important;
    }

    .mobile-sidebar .nav-vertical .children li a,
    .mobile-sidebar .nav-vertical .sub-menu li a {
        display: flex !important;
        min-height: 42px;
        align-items: center;
        padding: 8px 12px !important;
        border: 0 !important;
        border-radius: 8px;
        color: rgba(255, 255, 255, .72) !important;
        background: transparent !important;
        font-size: 13px !important;
        font-weight: 550 !important;
        line-height: 1.35;
        text-transform: none !important;
    }

    .mobile-sidebar .nav-vertical .children li a::before,
    .mobile-sidebar .nav-vertical .sub-menu li a::before {
        width: 5px;
        height: 1px;
        margin-right: 9px;
        background: var(--bep-accent);
        content: "";
    }

    .mobile-sidebar .nav-vertical .children li a:hover,
    .mobile-sidebar .nav-vertical .sub-menu li a:hover,
    .mobile-sidebar .nav-vertical .children .current-menu-item > a,
    .mobile-sidebar .nav-vertical .sub-menu .current-menu-item > a {
        color: #fff !important;
        background: rgba(255, 255, 255, .075) !important;
    }

    /*
     * Remove default utility items that make the drawer look like a stock
     * Flatsome installation. Also remove empty separators.
     */
    .mobile-sidebar .account-item,
    .mobile-sidebar .header-newsletter-item,
    .mobile-sidebar li.header-newsletter-item,
    .mobile-sidebar .social-icons,
    .mobile-sidebar .social-icons-wrapper,
    .mobile-sidebar .html_topbar_left,
    .mobile-sidebar .html_topbar_right,
    .mobile-sidebar .nav-vertical > li:empty {
        display: none !important;
    }

    /* If Account/Newsletter are normal menu items, hide them by URL/class. */
    .mobile-sidebar a[href*="my-account"],
    .mobile-sidebar a[href*="tai-khoan"],
    .mobile-sidebar a[href*="newsletter"] {
        display: none !important;
    }

    .mobile-sidebar li:has(> a[href*="my-account"]),
    .mobile-sidebar li:has(> a[href*="tai-khoan"]),
    .mobile-sidebar li:has(> a[href*="newsletter"]) {
        display: none !important;
    }

    /* Keep the custom three-button contact bar visually separate. */
    .bep-mobile-contact {
        z-index: 100001 !important;
        border-top: 1px solid #dce6f0;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 -8px 24px rgba(4, 31, 61, .12);
        backdrop-filter: blur(10px);
    }
}

/* Very small phones. */
@media (max-width: 380px) {
    .off-canvas-left .mfp-content,
    .off-canvas-right .mfp-content,
    .mfp-content:has(.mobile-sidebar) {
        width: 92vw !important;
    }

    .mobile-sidebar .sidebar-menu {
        padding-right: 14px !important;
        padding-left: 14px !important;
    }

    .mobile-sidebar::before {
        padding-left: 18px;
        font-size: 16px;
    }

    .mobile-sidebar::after {
        left: 18px;
    }
}
@media (max-width: 849px) {
    /* Bỏ dải xám ở mép phải drawer */
    .off-canvas-left .mfp-content,
    .off-canvas-right .mfp-content,
    .mfp-content:has(.mobile-sidebar) {
        border-right: 0 !important;
    }

    .mobile-sidebar {
        border-right: 0 !important;
        box-shadow: 18px 0 50px rgba(0, 0, 0, 0.28) !important;
    }

    /* Sửa nút đóng bị chồng hai lớp */
    .mfp-wrap .mfp-close,
    .off-canvas .mfp-close {
        overflow: hidden !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .mfp-wrap .mfp-close::before,
    .mfp-wrap .mfp-close::after,
    .off-canvas .mfp-close::before,
    .off-canvas .mfp-close::after {
        display: none !important;
        content: none !important;
    }

    /* Làm submenu toggle cân giữa hơn */
    .mobile-sidebar .nav-vertical li .toggle {
        top: 7px !important;
        right: 7px !important;
        width: 38px !important;
        height: 38px !important;
    }
}
/* Căn chính giữa nút và mũi tên submenu mobile */
@media (max-width: 849px) {
    .mobile-sidebar .nav-vertical li {
        position: relative;
    }

    .mobile-sidebar .nav-vertical li .toggle {
        top: 50% !important;
        right: 7px !important;
        width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translateY(-50%) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-sidebar .nav-vertical li .toggle i {
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: block !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;

        font-size: 13px !important;
        line-height: 1 !important;
        transform: none !important;
    }

    /* Xoay mũi tên khi submenu mở */
    .mobile-sidebar .nav-vertical li.active > .toggle i {
        transform: rotate(180deg) !important;
    }
}
/* Căn chuẩn nút submenu theo chiều cao menu cấp 1 */
@media (max-width: 849px) {
    .mobile-sidebar .nav-vertical > li {
        position: relative;
    }

    .mobile-sidebar .nav-vertical > li > .toggle {
        top: 7px !important;
        right: 7px !important;
        width: 38px !important;
        height: 38px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Bỏ icon Flatsome mặc định vì baseline thường bị lệch */
    .mobile-sidebar .nav-vertical > li > .toggle i {
        display: none !important;
    }

    /* Tự vẽ mũi tên để luôn nằm chính giữa */
    .mobile-sidebar .nav-vertical > li > .toggle::before {
        display: block !important;
        width: 8px;
        height: 8px;
        margin-top: -4px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        content: "";
        transform: rotate(45deg);
        transition: transform 0.2s ease, margin 0.2s ease;
    }

    /* Khi menu con mở, mũi tên quay lên */
    .mobile-sidebar .nav-vertical > li.active > .toggle::before {
        margin-top: 4px;
        transform: rotate(225deg);
    }
}