/* ======================================================================================== */
/* MAIN MENU DESKTOP - Flatsome Header Navigation                                            */
/* Custom nested submenu / flyout - optimized                                                */
/* ======================================================================================== */

.header-nav-main,
.header-nav-main * {
    box-sizing: border-box;
}

.header-nav-main {
    --mm-dropdown-width: 218px;
    --mm-duration: 0.18s;
    --mm-ease: ease;

    display: flex;
    align-items: center;
    justify-content: center !important;
    width: 100%;
    height: 100%;
    min-height: 48px;
    margin: 0;
    padding: 0;
}

.header-nav-main ul,
.header-nav-main li {
    list-style: none;
}

.header-nav-main>li {
    height: 100%;
}

/* Reset Flatsome spacing */
.header-nav-main:is(.nav-spacing-large, .nav-spacing-xlarge)>li {
    margin: 0;
}

/* ======================================================================================== */
/* LEVEL 1 - Main menu item                                                                  */
/* ======================================================================================== */

.header-nav-main>li {
    position: relative;
    margin: 0;
}

.header-nav-main>li>a.nav-top-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 48px;
    padding: 0 18px;
    color: var(--text-heading) !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 1 !important;
    letter-spacing: 0;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* Hover hoặc đúng menu cấp 1 hiện tại */
.header-nav-main>li:is(:hover, .current-menu-item, .current_page_item)>a.nav-top-link {
    color: var(--link-color) !important;
}

/* Remove Flatsome underline effects */
.header-nav-main>li>a.nav-top-link::before {
    display: none;
}

/* Hide default Flatsome dropdown icon */
.header-nav-main>li>a.nav-top-link .icon-angle-down {
    display: none !important;
}

/* Level 1 dropdown icon */
.header-nav-main>li:is(.menu-item-has-children, .has-dropdown)>a.nav-top-link::after {
    content: "\f107";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    color: currentColor;
    font-family: "Font Awesome 7 Pro";
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    opacity: 0.78;
    transform: translateY(1px);
    transition:
        transform var(--mm-duration) var(--mm-ease),
        opacity var(--mm-duration) var(--mm-ease);
}

.header-nav-main>li:is(.menu-item-has-children, .has-dropdown):is(:hover, .current-dropdown)>a.nav-top-link::after,
.header-nav-main>li>a.nav-top-link[aria-expanded="true"]::after {
    opacity: 1;
    transform: translateY(1px) rotate(180deg);
}

/* ======================================================================================== */
/* DROPDOWN BASE - Apply for all submenu levels                                               */
/* ======================================================================================== */

.header-nav-main :is(.sub-menu, .nav-dropdown) {
    display: block !important;
    width: var(--mm-dropdown-width);
    min-width: var(--mm-dropdown-width);
    height: auto !important;
    max-height: none !important;
    margin: 0;
    padding: 0 !important;
    border: 1px solid rgba(var(--accent-rgb), 0.12) !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    background: var(--bg-soft);
    box-shadow:
        0 16px 36px rgba(var(--black-rgb), 0.40),
        0 0 20px rgba(var(--accent-rgb), 0.10);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    overflow: visible;
    transition:
        opacity var(--mm-duration) var(--mm-ease),
        visibility var(--mm-duration) var(--mm-ease),
        transform var(--mm-duration) var(--mm-ease);
}

/* ======================================================================================== */
/* LEVEL 2 - Dropdown below main menu                                                        */
/* ======================================================================================== */

.header-nav-main>li> :is(.sub-menu, .nav-dropdown) {
    position: absolute;
    top: 100%;
    left: 50% !important;
    right: auto;
    transform: translateX(-50%) translateY(8px);
    z-index: 9999;
}

/* JS anti-overflow: dropdown cấp 2 căn phải khi bị tràn */
.header-nav-main>li> :is(.sub-menu, .nav-dropdown).is-align-right {
    left: auto !important;
    right: 0 !important;
    transform: translateY(8px);
}

/* Show level 2 */
.header-nav-main>li:is(:hover, .current-dropdown)> :is(.sub-menu, .nav-dropdown) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(-1px);
}

/* Show level 2 when aligned right */
.header-nav-main>li:is(:hover, .current-dropdown)> :is(.sub-menu, .nav-dropdown).is-align-right {
    transform: translateY(0);
}

/* ======================================================================================== */
/* NESTED SUBMENU - Level 3, 4, 5...                                                         */
/* ======================================================================================== */

.header-nav-main :is(.sub-menu, .nav-dropdown) :is(.sub-menu, .nav-dropdown) {
    position: absolute !important;
    top: 0;
    left: 100%;
    right: auto;
    transform: translateX(8px);
    z-index: 10000;
}

/* Show nested submenu */
.header-nav-main :is(.sub-menu, .nav-dropdown) li:hover> :is(.sub-menu, .nav-dropdown) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(0, -1px);
}

/* JS anti-overflow: flyout cấp sâu bay ngược sang trái */
.header-nav-main :is(.sub-menu, .nav-dropdown) :is(.sub-menu, .nav-dropdown).is-left {
    left: auto !important;
    right: 100% !important;
    transform: translateX(-8px);
}

.header-nav-main :is(.sub-menu, .nav-dropdown) li:hover> :is(.sub-menu, .nav-dropdown).is-left {
    transform: translateX(0);
}

/* ======================================================================================== */
/* SUBMENU ITEM + LINK - Apply for all submenu levels                                        */
/* ======================================================================================== */

.header-nav-main :is(.sub-menu, .nav-dropdown) li {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 !important;
}

.header-nav-main :is(.sub-menu, .nav-dropdown) li>a {
    display: flex;
    align-items: center;
    min-height: 46px;
    width: 100%;
    margin: 0 !important;
    padding: 0 16px;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.14);
    background: transparent;
    color: rgba(var(--text-rgb), 0.82);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    transition:
        color var(--mm-duration) var(--mm-ease),
        border-color var(--mm-duration) var(--mm-ease);
}

.header-nav-main :is(.sub-menu, .nav-dropdown) li:is(:hover)>a,
.header-nav-main :is(.sub-menu, .nav-dropdown) li>a:hover {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--link-color) !important;
}

.header-nav-main :is(.sub-menu, .nav-dropdown) li:last-child>a {
    border-bottom: none;
}

/* ======================================================================================== */
/* ARROW FOR SUBMENU ITEM HAS CHILD                                                          */
/* ======================================================================================== */

.header-nav-main :is(.sub-menu, .nav-dropdown) li:is(.menu-item-has-children, .has-child)>a {
    justify-content: space-between;
    gap: 12px;
}

/* Font Awesome Pro v7 - fa-angle-right */
.header-nav-main :is(.sub-menu, .nav-dropdown) li:is(.menu-item-has-children, .has-child)>a::after {
    content: "\f105";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    color: currentColor;
    font-family: "Font Awesome 7 Pro";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    opacity: 0.85;
    transition:
        transform var(--mm-duration) var(--mm-ease),
        opacity var(--mm-duration) var(--mm-ease);
}

.header-nav-main :is(.sub-menu, .nav-dropdown) li:is(.menu-item-has-children, .has-child):hover>a::after {
    opacity: 1;
    transform: translateX(2px);
}

/* ======================================================================================== */
/* FIX FLATSOME NAV-COLUMN BEHAVIOR                                                          */
/* ======================================================================================== */

.header-nav-main :is(.sub-menu.nav-column, .nav-dropdown.nav-column, .nav-column) {
    display: block !important;
    flex: none !important;
    width: var(--mm-dropdown-width) !important;
    min-width: var(--mm-dropdown-width) !important;
    max-width: none !important;
}

/* ======================================================================================== */
/* RESPONSIVE                                                                                */
/* ======================================================================================== */

@media (max-width: 1180px) and (min-width: 850px) {
    .header-nav-main>li>a.nav-top-link {
        padding: 0 12px;
        font-size: 13px;
    }
}

@media (max-width: 849px) {
    .header-nav-main {
        min-height: 44px;
    }

    .header-nav-main>li>a.nav-top-link {
        min-height: 44px;
        padding: 0 12px;
        font-size: 13px;
    }
}