/**
 * Mega menu cho header của Flatsome (#masthead)
 * Dropdown có menu cấp 3 sẽ bung rộng, mỗi mục cấp 2 là 1 nhóm gồm tiêu đề + danh sách menu con
 * Nhóm có nhiều menu con sẽ tự chia thành nhiều cột
 */
@media (min-width: 850px) {
    /* rộng bằng .container của header -> luôn nằm ngay dưới menu cấp 1, rê chuột xuống không bị hụt */
    #masthead .header-nav > li.current-dropdown > .nav-dropdown:has(ul.sub-menu) {
        position: fixed;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: 100%;
        max-width: var(--wgr-container-width, 1050px) !important;
    }

    #masthead .header-nav .nav-dropdown:has(ul.sub-menu) {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        gap: 0 30px;
        padding: 25px 30px;
    }

    /* clearfix của Flatsome sẽ thành 1 cột thừa trong grid */
    #masthead .header-nav .nav-dropdown:has(ul.sub-menu)::after {
        display: none;
    }

    #masthead .header-nav .nav-dropdown:has(ul.sub-menu) > li,
    #masthead .header-nav .nav-dropdown:has(ul.sub-menu) > li.nav-dropdown-col {
        display: block;
        grid-column: span 2;
        width: auto;
        min-width: 0;
        margin: 0;
        border: 0;
        white-space: normal;
    }

    /* nhóm nhiều menu con thì chiếm rộng hơn và chia cột */
    #masthead .header-nav .nav-dropdown:has(ul.sub-menu) > li:has(> ul > li:nth-child(11)) {
        grid-column: span 3;
    }

    #masthead .header-nav .nav-dropdown:has(ul.sub-menu) > li:has(> ul > li:nth-child(21)) {
        grid-column: span 4;
    }

    #masthead .header-nav .nav-dropdown:has(ul.sub-menu) > li:has(> ul > li:nth-child(11)) > ul.sub-menu {
        column-count: 2;
        column-gap: 20px;
    }

    #masthead .header-nav .nav-dropdown:has(ul.sub-menu) > li:has(> ul > li:nth-child(21)) > ul.sub-menu {
        column-count: 3;
    }

    /* tiêu đề nhóm */
    #masthead .header-nav .nav-dropdown:has(ul.sub-menu) > li > a,
    #masthead .header-nav .nav-dropdown:has(ul.sub-menu) > li.menu-item-has-children > a {
        display: block;
        margin: 0 0 8px;
        padding: 0 0 8px;
        border-bottom: 2px solid var(--fs-color-primary, #446084);
        color: #000;
        font-size: .85em;
        font-weight: bold;
        line-height: 1.3;
        text-transform: uppercase;
    }

    #masthead .header-nav .nav-dropdown:has(ul.sub-menu) > li > a:hover {
        color: var(--fs-color-primary, #446084);
    }

    /* danh sách menu con */
    #masthead .header-nav .nav-dropdown:has(ul.sub-menu) > li > ul.sub-menu {
        position: static;
        display: block;
        margin: 0;
        padding: 0;
    }

    #masthead .header-nav .nav-dropdown:has(ul.sub-menu) > li li {
        display: block;
        margin: 0;
        break-inside: avoid;
    }

    #masthead .header-nav .nav-dropdown:has(ul.sub-menu) > li li > a,
    #masthead .header-nav .nav-dropdown:has(ul.sub-menu) > li li.menu-item-has-children > a {
        display: block;
        margin: 0;
        padding: 6px 0;
        border-bottom: 0;
        color: rgba(74, 74, 74, .85);
        font-size: .95em;
        font-weight: normal;
        line-height: 1.3;
        text-transform: none;
        transition: color .2s, padding-left .2s;
    }

    #masthead .header-nav .nav-dropdown:has(ul.sub-menu) > li li > a:hover {
        padding-left: 5px;
        color: var(--fs-color-primary, #446084);
    }

    /* cấp 4 trở đi hiển thị thụt lề ngay bên dưới */
    #masthead .header-nav .nav-dropdown:has(ul.sub-menu) > li li ul {
        padding-left: 12px;
    }
}