/* ======================================================================================== */
/* MOBILE SIDEBAR MENU - Flatsome Mobile Off Canvas                                          */
/* Clean UI - Nested accordion, no hover                                                     */
/* Scope riêng #main-menu.mobile-sidebar, không ảnh hưởng desktop                            */
/* ======================================================================================== */

#main-menu.mobile-sidebar,
#main-menu.mobile-sidebar * {
    box-sizing: border-box;
}

#main-menu.mobile-sidebar {
    --mb-bg: var(--section-bg);
    --mb-surface: var(--surface-bg);
    --mb-border: var(--border-ui);
    --mb-border-active: var(--badge-primary-border);
    --mb-heading: var(--text-main);
    --mb-text: var(--text-main);
    --mb-text-muted: var(--text-sub);
    --mb-active: var(--primary);
    --mb-active-bg: var(--primary-50);
}

/* ======================================================================================== */
/* SIDEBAR WRAPPER                                                                           */
/* ======================================================================================== */

#main-menu.mobile-sidebar .sidebar-menu {
    padding: 72px 12px 20px;
    background: var(--mb-bg);
    min-height: 100dvh;
}

/* ======================================================================================== */
/* RESET                                                                                     */
/* ======================================================================================== */

#main-menu.mobile-sidebar .nav-sidebar,
#main-menu.mobile-sidebar .nav-sidebar ul {
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

#main-menu.mobile-sidebar .nav-sidebar li {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    list-style: none;
}

#main-menu.mobile-sidebar .nav-sidebar a {
    border: none !important;
    text-decoration: none;
}

/* Tắt icon giả trên thẻ a để tránh chồng icon */
#main-menu.mobile-sidebar .nav-sidebar li>a::after {
    content: none !important;
    display: none !important;
}

/* ======================================================================================== */
/* LEVEL 1 - MAIN ITEM                                                                        */
/* ======================================================================================== */

#main-menu.mobile-sidebar .nav-sidebar>li {
    margin-bottom: 16px;
    border: 1px solid var(--mb-border);
    border-radius: var(--radius-md);
    background: var(--mb-surface);
    box-shadow: var(--shadow-ui-card);
    overflow: hidden;
}

/* Search đã có border riêng trên input, bỏ lớp card bên ngoài của menu item. */
#main-menu.mobile-sidebar .nav-sidebar>li.header-search-form {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

#main-menu.mobile-sidebar .header-search-form .searchform {
    border-radius: 12px;
    background: var(--surface-bg);
}

#main-menu.mobile-sidebar .nav-sidebar>li>a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 44px;
    width: 100%;
    padding: 0 46px 0 14px;
    color: var(--mb-heading);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: 0.01em;
    text-transform: none;
    background: transparent !important;
    border-radius: var(--radius-md);
    transition:
        color var(--transition-ui),
        background-color var(--transition-ui);
}



#main-menu.mobile-sidebar .nav-sidebar>li>a {
    gap: 10px;
}

#main-menu.mobile-sidebar .nav-sidebar>li>a>.mobile-menu-item-icon {
    display: inline-flex;
    flex: 0 0 18px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    opacity: 1 !important;
}

#main-menu.mobile-sidebar .nav-sidebar>li>a>span {
    margin-left: 0 !important;
}

#main-menu.mobile-sidebar .nav-sidebar>li:is(.is-open,
    .current-menu-item,
    .current_page_item)>a>.mobile-menu-item-icon {
    color: var(--mb-active);
}

/* Level 1 đang mở hoặc là trang hiện tại */
#main-menu.mobile-sidebar .nav-sidebar>li:is(.is-open, .current-menu-item, .current_page_item) {
    background: var(--mb-surface);
    border-color: var(--mb-border-active);
    box-shadow: 0 10px 26px rgba(var(--primary-rgb), 0.10);
}

#main-menu.mobile-sidebar .nav-sidebar>li:is(.is-open, .current-menu-item, .current_page_item)>a {
    color: var(--mb-active);
    background: var(--mb-active-bg) !important;
    font-weight: 700;
}

/* Vạch trái chỉ nằm trên dòng link cấp 1, không kéo dài theo submenu */
#main-menu.mobile-sidebar .nav-sidebar>li>a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 999px;
    background: var(--mb-active);
    opacity: 0;
    transition: opacity var(--transition-ui);
    z-index: 2;
}

#main-menu.mobile-sidebar .nav-sidebar>li:is(.is-open, .current-menu-item, .current_page_item)>a::before {
    opacity: 1;
}

/* ======================================================================================== */
/* SUBMENU TOGGLE BEHAVIOR                                                                   */
/* ======================================================================================== */

#main-menu.mobile-sidebar .nav-sidebar li:is(.menu-item-has-children, .has-child)>:is(.sub-menu, .children) {
    display: none !important;
}

#main-menu.mobile-sidebar .nav-sidebar li:is(.menu-item-has-children, .has-child).is-open>:is(.sub-menu, .children) {
    display: block !important;
}

/* ======================================================================================== */
/* SUBMENU STRUCTURE                                                                          */
/* ======================================================================================== */

#main-menu.mobile-sidebar .nav-sidebar :is(.sub-menu, .children) {
    position: relative;
    margin: 2px 0;
    padding: 0px;
    background: transparent;
}

#main-menu.mobile-sidebar .nav-sidebar>li>:is(.sub-menu, .children) {
    padding: 4px 8px 8px 14px;
}

#main-menu.mobile-sidebar .nav-sidebar>li>:is(.sub-menu, .children)>li>a {
    min-height: 38px;
    padding-left: 12px;
    font-size: 14px;
}

#main-menu.mobile-sidebar .nav-sidebar>li>:is(.sub-menu, .children)>li>:is(.sub-menu, .children) {
    /* margin: 0 0 4px 12px; */
    padding: 2px 0 0px 14px;
}

#main-menu.mobile-sidebar .nav-sidebar>li>:is(.sub-menu, .children)>li>:is(.sub-menu, .children) li>a {
    min-height: 38px;
    width: calc(100% - 0px);
    padding-left: 12px;
    font-size: 13px;
    /* color: var(--mb-text-muted); */
}

#main-menu.mobile-sidebar .nav-sidebar :is(.sub-menu, .children) :is(.sub-menu, .children) :is(.sub-menu, .children) {
    padding-left: 14px;
}

#main-menu.mobile-sidebar .nav-sidebar :is(.sub-menu, .children) li {
    margin: 0px 0;
    border: none;
    background: transparent;
}

/* ======================================================================================== */
/* SUBMENU LINK - SHARED                                                                      */
/* ======================================================================================== */

#main-menu.mobile-sidebar .nav-sidebar :is(.sub-menu, .children) li>a {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 40px;
    width: 100%;
    padding: 0 42px 0 12px;
    color: var(--mb-text);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    background: transparent !important;
    border-radius: 6px;
    transition:
        color var(--transition-ui),
        background-color var(--transition-ui);
}

@media (hover: hover) and (pointer: fine) {
    #main-menu.mobile-sidebar .nav-sidebar :is(.sub-menu, .children) li:has(>a:hover, >button:hover)>a {
        color: var(--mb-active);
        background: var(--mb-active-bg) !important;
    }

    #main-menu.mobile-sidebar .nav-sidebar :is(.sub-menu, .children) li:has(>a:hover, >button:hover)> :is(button.toggle, button.mobile-submenu-toggle) {
        color: var(--mb-active) !important;
        background: transparent !important;
    }
}

/* Submenu item đang mở */
#main-menu.mobile-sidebar .nav-sidebar :is(.sub-menu, .children) li.is-open>a {
    color: var(--primary);
    background: var(--primary-50) !important;
    font-weight: 600;
}


/* Account item: mục WooCommerce hiện tại dùng cùng màu active của submenu */
#main-menu.mobile-sidebar .nav-sidebar .account-item>.children>li:is(.current-menu-item,
    .current_page_item)>a {
    color: var(--primary);
    background: var(--primary-50) !important;
    font-weight: 600;
}

/* ======================================================================================== */
/* TOGGLE BUTTON - Flatsome default + JS generated                                           */
/* ======================================================================================== */

#main-menu.mobile-sidebar .nav-sidebar li> :is(button.toggle, button.mobile-submenu-toggle) {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--mb-text-muted) !important;
    cursor: pointer;
    opacity: 1 !important;
    z-index: 20 !important;
    transform: rotate(0deg) !important;
    transform-origin: center center;
    transition:
        color var(--transition-ui),
        transform var(--transition-ui);
}

/* Cấp 1 cao 46px */
#main-menu.mobile-sidebar .nav-sidebar>li> :is(button.toggle, button.mobile-submenu-toggle) {
    width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
}

/* Cấp con thấp hơn */
#main-menu.mobile-sidebar .nav-sidebar :is(.sub-menu, .children) li> :is(button.toggle, button.mobile-submenu-toggle) {
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
}

/* Ẩn icon mặc định của Flatsome */
#main-menu.mobile-sidebar .nav-sidebar li>button.toggle>i,
#main-menu.mobile-sidebar .nav-sidebar li>button.toggle>i::before,
#main-menu.mobile-sidebar .nav-sidebar li>button.toggle>i::after,
#main-menu.mobile-sidebar .nav-sidebar li>button.toggle::after,
#main-menu.mobile-sidebar .nav-sidebar li>button.mobile-submenu-toggle::after {
    content: none !important;
    display: none !important;
}

/* Nếu có cả toggle mặc định và custom thì chỉ giữ toggle mặc định */
#main-menu.mobile-sidebar .nav-sidebar li>button.toggle~button.mobile-submenu-toggle {
    display: none !important;
}

#main-menu.mobile-sidebar .nav-sidebar li:has(>button.toggle)>button.mobile-submenu-toggle {
    display: none !important;
}

/* Icon duy nhất: pseudo chỉ dùng để vẽ icon, không xoay pseudo */
#main-menu.mobile-sidebar .nav-sidebar li> :is(button.toggle, button.mobile-submenu-toggle)::before {
    content: "\f107" !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-family: "Font Awesome 7 Pro" !important;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    color: currentColor;
    transform: none !important;
    transition: color var(--transition-ui);
}

/* Open state: đổi màu và xoay cả button */
#main-menu.mobile-sidebar .nav-sidebar li.is-open> :is(button.toggle, button.mobile-submenu-toggle) {
    color: var(--mb-active) !important;
    transform: rotate(180deg) !important;
}

/* Item có submenu chừa chỗ cho nút */
#main-menu.mobile-sidebar .nav-sidebar li:is(.menu-item-has-children, .has-child)>a {
    padding-right: 44px !important;
}

/* Giờ mở cửa */
#main-menu.mobile-sidebar .html_top_right_text {
    padding: 0 !important;
}

#main-menu.mobile-sidebar .pcn-open-time {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 58px;
    padding: 9px 14px;
    color: var(--text-main);
}

#main-menu.mobile-sidebar .pcn-open-time>div:first-child {
    flex: 0 0 18px;
    text-align: center;
}

#main-menu.mobile-sidebar .pcn-open-time i {
    margin: 0;
    font-size: 16px;
}

#main-menu.mobile-sidebar .pcn-open-time strong,
#main-menu.mobile-sidebar .pcn-open-time p {
    margin: 0;
    color: inherit;
    font-size: 13px;
    line-height: 1.35;
}

#main-menu.mobile-sidebar .pcn-open-time strong {
    display: block;
    font-weight: 700;
}

/* ======================================================================================== */
/* OFFCANVAS CLOSE BUTTON                                                                     */
/* ======================================================================================== */

.mfp-wrap.off-canvas .mfp-close {
    top: 12px !important;
    right: 14px !important;
    width: 36px !important;
    height: 36px !important;
    color: var(--text-sub) !important;
    opacity: 1 !important;
}

.mfp-wrap.off-canvas .mfp-close:hover {
    color: var(--primary) !important;
}