/* =========================================================
   NTV MENU CSS
   File: /assets/css/ntv-menu.css
   Rebuild clean & stable for desktop / tablet / mobile
   ========================================================= */

/* ===================== BASE ===================== */

body:not(.trang-chu) .menu-chinh{
    display:none;
}

.menu{
    background:#fff;
    position:relative;
    z-index:20;
}

.menu .container{
    position:relative;
    overflow:visible;
}

.menu.fadeInDown{
    animation:fadeInDown 1s both;
}

.mobile-menu-toggle{
    display:none;
}

/* ===================== DESKTOP / TABLET LAYOUT ===================== */

.row-menu{
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch;
    justify-content:space-between;
    overflow:visible;
}

.menu-left{
    position:relative;
    z-index:600;
    width:220px;
    min-width:220px;
    flex:0 0 220px;
}

.menu-right{
    position:relative;
    z-index:400;
    width:auto;
    min-width:0;
    flex:1 1 auto;
}

/* ===================== LEFT MENU TITLE ===================== */

.ul-menu-left{
    position:relative;
    overflow:visible;
}

.ul-menu-left > span,
.ul-menu-left span{
    display:block;
    background:#ffffff;
    border:1px solid #ccc;
    padding:9px 0;
    position:relative;
    cursor:pointer;
    color:#b30000;
    font-size:14px;
    font-weight:700;
    text-transform:uppercase;
}

.ul-menu-left span i{
    padding:0 5px 0 10px;
}

/* ===================== LEFT MENU LEVEL 1 ===================== */

.ul-list-left{
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    z-index:9999;
    background:#fff;
    border:1px solid #bebebe;
    border-top:none;
}

.ul-list-left > li{
    position:relative;
    list-style:none;
    border-bottom:1px solid #d9d9d9;
    background:#fff;
}

.ul-list-left > li:last-child{
    border-bottom:none;
}

.ul-list-left > li > a{
    display:flex;
    align-items:center;
    position:relative;
    min-height:40px;
    padding:8px 14px 8px 8px;
    font-size:14px;
    font-weight:600;
    color:#404040;
    text-transform:capitalize;
    text-decoration:none;
    box-sizing:border-box;
    background:#fff;
    transition:background .2s ease,color .2s ease;
}

.ul-list-left > li > a:hover,
.ul-list-left > li:hover > a{
    background:#0f5fa8;
    color:#fff;
}

.ul-list-left > li > a::after{
    content:'\276F';
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    font-size:14px;
    color:#888;
    transition:color .2s ease;
}

.ul-list-left > li:hover > a::after,
.ul-list-left > li > a:hover::after{
    color:#fff;
}

.ul-list-left > li > a img{
    display:block;
    width:auto;
    max-width:24px;
    max-height:24px;
    margin-right:8px;
    transition:transform .2s ease, filter .2s ease;
}

.ul-list-left li > a:hover img,
.ul-list-left > li:hover > a img{
    filter:
        drop-shadow(0 0 0px #fff)
        drop-shadow(0 0 2px #fff)
        drop-shadow(0 0 4px #fff);
    transform:scale(1.08);
    border-radius:4px;
}

/* ===================== LEFT MENU LEVEL 2 ===================== */

.ul-cat-left{
    display:none;
    position:absolute;
    top:-1px;
    left:100%;
    z-index:999999;
    width:980px;
    max-width:calc(100vw - 80px);
    box-sizing:border-box;
    background:#fff;
    border:1px solid #cacaca;
    padding:10px 0 12px;
    box-shadow:0 10px 28px rgba(0,0,0,.08);
}

.ul-list-left > li:hover > .ul-cat-left{
    display:flex;
    align-items:flex-start;
}

.ul-cat-left.flex_row{
    display:none;
    flex-wrap:wrap;
    align-items:flex-start;
    justify-content:flex-start;
    gap:0;
    list-style:none;
    margin:0;
    padding:10px 0 12px;
}

.ul-list-left > li:hover > .ul-cat-left.flex_row{
    display:flex;
}

.ul-cat-left.flex_row > li{
    width:25%;
    box-sizing:border-box;
    padding:0;
    margin:0;
    list-style:none;
}

.ul-cat-left.flex_row > li > a{
    display:block;
    height:40px;
    line-height:40px;
    padding:0 20px;
    margin:0;
    box-sizing:border-box;
    background:transparent;
    color:#333;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    text-transform:none;
    border-radius:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    transition:background .2s ease,color .2s ease;
}

.ul-cat-left.flex_row > li > a:hover{
    background:#0f5fa8;
    color:#fff;
}

.ul-cat-left li > a::after{
    display:none !important;
    content:none !important;
}

/* ===================== LEFT MENU LEVEL 3 ===================== */

.ul-item-left{
    display:block;
    list-style:none;
    margin:0;
    padding:6px 20px 8px;
}

.ul-item-left > li{
    display:block;
    width:100%;
    margin:0;
    padding:0;
    list-style:none;
}

.ul-item-left > li > a{
    display:block;
    color:#000;
    text-decoration:none;
    padding:4px 0;
    line-height:1.45;
    font-size:14px;
    text-align:left;
    white-space:normal;
    word-break:normal;
    overflow-wrap:break-word;
    text-transform:none;
    transition:color .2s ease;
}

.ul-item-left > li > a:hover{
    color:#0c71b9;
}

/* ===================== RIGHT TOP NAV ===================== */

.menu-right #main-nav{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    width:100%;
    padding:0;
    margin:0;
    list-style:none;
    background:linear-gradient(180deg,#1770c3 0%,#0f5fa8 100%);
}

.menu-right #main-nav > li{
    position:relative;
    z-index:99;
    flex:1 1 0;
    list-style:none;
}

.menu-right #main-nav > li:after{
    content:'';
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    width:1px;
    height:14px;
    background:#fff;
    opacity:.9;
}

.menu-right #main-nav > li:last-child:after{
    display:none;
}

.menu-right #main-nav > li > a{
    display:block;
    text-align:center;
    text-decoration:none !important;
    font-size:15px;
    color:#fff;
    padding:11px 0;
    text-transform:capitalize;
    transition:color .2s ease;
}

.menu-right #main-nav > li > a.active,
.menu-right #main-nav > li:hover > a{
    color:yellow;
}

#main-nav .menu-tiktok a{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

#main-nav .menu-tiktok a i{
    font-size:16px;
    line-height:1;
}

/* ===================== ANIMATION ===================== */

@-webkit-keyframes fadeInDown{
    0%{
        opacity:0;
        -webkit-transform:translateY(-20px);
        transform:translateY(-20px);
    }
    100%{
        opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
}
@keyframes fadeInDown{
    0%{
        opacity:0;
        -webkit-transform:translateY(-20px);
        transform:translateY(-20px);
    }
    100%{
        opacity:1;
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
}
.fadeInDown{
    -webkit-animation-name:fadeInDown;
    animation-name:fadeInDown;
}

.menu.on-show ul#main-nav li:nth-child(1){
    -webkit-animation:aiv_slide_right .65s;
    animation:aiv_slide_right .65s;
}
.menu.on-show ul#main-nav li:nth-child(2){
    -webkit-animation:aiv_slide_right .7s;
    animation:aiv_slide_right .7s;
}
.menu.on-show ul#main-nav li:nth-child(3){
    -webkit-animation:aiv_slide_right .75s;
    animation:aiv_slide_right .75s;
}
.menu.on-show ul#main-nav li:nth-child(4){
    -webkit-animation:aiv_slide_right .8s;
    animation:aiv_slide_right .8s;
}
.menu.on-show ul#main-nav li:nth-child(5){
    -webkit-animation:aiv_slide_right .85s;
    animation:aiv_slide_right .85s;
}
.menu.on-show ul#main-nav li:nth-child(6){
    -webkit-animation:aiv_slide_right .9s;
    animation:aiv_slide_right .9s;
}

@-webkit-keyframes aiv_slide_right{
    from{
        opacity:0;
        -webkit-transform:translateX(40px);
        transform:translateX(40px);
    }
    to{
        opacity:1;
        -webkit-transform:translateX(0);
        transform:translateX(0);
    }
}
@keyframes aiv_slide_right{
    from{
        opacity:0;
        -webkit-transform:translateX(40px);
        transform:translateX(40px);
    }
    to{
        opacity:1;
        -webkit-transform:translateX(0);
        transform:translateX(0);
    }
}

/* ===================== TABLET 1200 ↓ ===================== */

@media (max-width: 1199px){
    .menu-left{
        width:210px;
        min-width:210px;
        flex:0 0 210px;
    }

    .menu-right{
        width:auto;
        min-width:0;
        flex:1 1 auto;
    }

    .ul-cat-left{
        width:min(900px, calc(100vw - 60px));
        max-width:calc(100vw - 60px);
    }

    .menu-right #main-nav > li > a{
        font-size:14px;
        padding:10px 0;
    }
}

/* ===================== TABLET 992 ↓ but still desktop mode ===================== */

@media (max-width: 991px) and (min-width: 769px){
    .menu-left{
        width:210px;
        min-width:210px;
        flex:0 0 210px;
    }

    .menu-right{
        width:auto;
        min-width:0;
        flex:1 1 auto;
    }

    .ul-list-left > li > a{
        font-size:13px;
        padding:7px 12px 7px 8px;
    }

    .menu-right #main-nav > li > a{
        font-size:13px;
        padding:9px 0;
    }

    .ul-cat-left{
        width:min(760px, calc(100vw - 40px));
        max-width:calc(100vw - 40px);
    }

    .ul-cat-left.flex_row > li{
        width:33.3333%;
    }
}

/* ======================= MENU MOBILE ======================= */

@media (max-width: 768px){
    :root{
        --mm-overlay: rgba(8, 28, 54, .34);
        --mm-panel-bg: #ffffff;
        --mm-panel-border: rgba(15, 95, 168, .14);
        --mm-panel-shadow: 0 20px 48px rgba(15, 95, 168, .18);
        --mm-text: #16324f;
        --mm-muted: #6b7c93;
        --mm-primary: #0f5fa8;
        --mm-primary-light: #1770c3;
        --mm-primary-dark: #0a4f8d;
        --mm-row-border: #e5eef8;
        --mm-soft: #f2f8ff;
        --mm-soft-2: #f8fbff;
        --mm-radius: 18px;
        --mm-side-gap: 12px;
        --mm-top: calc(env(safe-area-inset-top, 0px) + 10px);
        --mm-bottom: calc(env(safe-area-inset-bottom, 0px) + 72px);
        --mm-head-h: 78px;
    }

    html,
    body{
        overflow-x:hidden !important;
    }

    html.menu-open,
    body.menu-open{
        overflow:hidden !important;
        overflow-x:hidden !important;
        overscroll-behavior:none !important;
    }

    body.menu-open{
        position:static !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        width:auto !important;
    }

    .mobile-menu-toggle{
        display:block !important;
    }

    .menu{
        background:transparent !important;
        margin:0 !important;
        padding:0 !important;
    }

    .menu .container{
        display:block !important;
        padding-left:0 !important;
        padding-right:0 !important;
        max-width:100% !important;
    }

    .row-menu{
        display:block !important;
    }

    .menu-left,
    .ul-menu-left,
    .ul-list-left{
        display:none !important;
    }

    .menu-right{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        flex:none !important;
    }

    .menu-right #main-nav{
        display:none !important;
    }

    .menu-right #main-nav > li:after{
        display:none !important;
    }

    #mobileMenu.mobile-menu-wrapper{
        position:fixed !important;
        inset:0 !important;
        z-index:999999 !important;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:opacity .25s ease, visibility .25s ease;
        display:block !important;
        background:transparent;
        padding:0 !important;
        margin:0 !important;
        overflow:hidden !important;
    }

    #mobileMenu.mobile-menu-wrapper[hidden]{
        display:block !important;
    }

    #mobileMenu.mobile-menu-wrapper.active{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    #mobileMenu .mobile-menu-overlay{
        position:absolute;
        inset:0 0 var(--mm-bottom) 0;
        background:var(--mm-overlay);
        opacity:0;
        transition:opacity .25s ease;
        z-index:1;
        backdrop-filter:blur(1px);
    }

    #mobileMenu.active .mobile-menu-overlay{
        opacity:1;
    }

    #mobileMenu .mobile-menu{
        position:absolute !important;
        top:var(--mm-top);
        left:var(--mm-side-gap);
        right:var(--mm-side-gap) !important;
        bottom:var(--mm-bottom);
        width:auto !important;
        max-width:none !important;
        min-width:0 !important;
        height:auto !important;
        max-height:none !important;
        margin:0 !important;
        padding:0 !important;
        background:var(--mm-panel-bg);
        border:1px solid var(--mm-panel-border);
        border-radius:var(--mm-radius);
        box-shadow:var(--mm-panel-shadow);
        display:flex !important;
        flex-direction:column !important;
        overflow:hidden !important;
        box-sizing:border-box;
        transform:translateX(-18px);
        opacity:0;
        transition:transform .28s ease, opacity .28s ease;
        -webkit-overflow-scrolling:touch;
        z-index:2;
    }

    #mobileMenu.active .mobile-menu{
        transform:translateX(0);
        opacity:1;
    }

    #mobileMenu .mm-header,
    #mobileMenu .mm-scroll{
        position:relative;
        z-index:3;
        width:100%;
        max-width:100%;
        box-sizing:border-box;
    }

    #mobileMenu .mm-header{
        flex:0 0 auto;
        min-height:var(--mm-head-h);
        padding:12px 56px 12px 14px;
        border-bottom:1px solid var(--mm-panel-border);
        background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
        display:flex;
        align-items:center;
        justify-content:center;
        overflow:hidden;
    }

    #mobileMenu .mm-header .brand{
        display:inline-flex;
        justify-content:center;
        align-items:center;
        min-height:50px;
        max-width:100%;
        text-decoration:none;
    }

    #mobileMenu .mm-header .brand img{
        display:block;
        max-width:170px;
        max-height:50px;
        width:auto;
        height:auto;
        object-fit:contain;
    }

    #mobileMenu .mobile-menu-close{
        position:absolute;
        top:50%;
        right:10px;
        transform:translateY(-50%);
        width:36px;
        height:36px;
        border:1px solid rgba(15,95,168,.16);
        border-radius:10px;
        background:#fff;
        color:var(--mm-primary);
        cursor:pointer;
        line-height:1;
        font-size:18px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        transition:all .2s ease;
        z-index:4;
        margin:0 !important;
        box-shadow:0 6px 14px rgba(15,95,168,.08);
        padding:0;
    }

    #mobileMenu .mobile-menu-close:hover,
    #mobileMenu .mobile-menu-close:focus{
        background:var(--mm-soft);
        border-color:rgba(15,95,168,.22);
        color:var(--mm-primary-dark);
    }

    #mobileMenu .mobile-menu-close:active{
        transform:translateY(-50%) scale(.98);
    }

    #mobileMenu .mm-scroll{
        flex:1 1 auto;
        min-height:0;
        overflow-y:auto;
        overflow-x:hidden;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
        background:#fff;
        padding:0;
        margin:0;
    }

    #mobileMenu .mm-scroll::-webkit-scrollbar{
        width:6px;
    }

    #mobileMenu .mm-scroll::-webkit-scrollbar-thumb{
        background:rgba(15,95,168,.28);
        border-radius:999px;
    }

    #mobileMenu .m-section,
    #mobileMenu .level-1,
    #mobileMenu .level-2{
        list-style:none !important;
        margin:0 !important;
        padding:0 !important;
        width:100%;
        max-width:100%;
        box-sizing:border-box;
    }

    #mobileMenu .m-heading{
        border-bottom:1px solid var(--mm-row-border);
        width:100%;
        max-width:100%;
        overflow:hidden;
        background:linear-gradient(180deg,var(--mm-primary-light) 0%,var(--mm-primary) 100%);
    }

    #mobileMenu .acc-btn{
        width:100%;
        min-height:56px;
        border:0;
        background:transparent;
        padding:0 16px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        text-align:left;
        cursor:pointer;
        font-size:16px;
        font-weight:800;
        color:#fff;
        box-sizing:border-box;
    }

    #mobileMenu .acc-btn .chev,
    #mobileMenu .row-toggle .chev{
        width:8px;
        height:8px;
        border-right:2px solid currentColor;
        border-bottom:2px solid currentColor;
        transform:rotate(45deg);
        display:inline-block;
        transition:transform .2s ease;
        margin-left:-1px;
    }

    #mobileMenu .acc-btn[aria-expanded="true"] .chev{
        transform:rotate(225deg);
    }

    #mobileMenu .tree-item{
        list-style:none !important;
        margin:0 !important;
        padding:0 !important;
        border-bottom:1px solid var(--mm-row-border);
        background:#fff;
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        overflow:hidden;
        transition:background .2s ease;
    }

    #mobileMenu .tree-item:last-child{
        border-bottom:0;
    }

    #mobileMenu .row{
        display:grid;
        grid-template-columns:24px minmax(0,1fr) 32px;
        align-items:center;
        column-gap:10px;
        min-height:58px;
        padding:0 12px;
        background:#fff;
        margin:0;
        width:100%;
        max-width:100%;
        box-sizing:border-box;
        overflow:hidden;
        transition:background .2s ease;
    }

    #mobileMenu .tree-item.has-children > .row{
        padding-right:12px;
    }

    #mobileMenu .tree-item > .row:active{
        background:var(--mm-soft);
    }

    #mobileMenu .row-icon{
        grid-column:1;
        width:24px;
        min-width:24px;
        height:24px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        align-self:center;
    }

    #mobileMenu .row-icon img{
        display:block;
        max-width:100%;
        max-height:100%;
        object-fit:contain;
    }

    #mobileMenu .row-icon .dot{
        width:6px;
        height:6px;
        border-radius:999px;
        background:var(--mm-primary-light);
        display:block;
        box-shadow:0 0 0 4px rgba(23,112,195,.10);
    }

    #mobileMenu .row-link{
        grid-column:2;
        min-width:0;
        max-width:100%;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:normal;
        word-break:break-word;
        overflow-wrap:anywhere;
        padding:10px 0;
        color:var(--mm-text);
        text-decoration:none;
        font-size:16px;
        font-weight:600;
        line-height:1.3;
        transition:color .2s ease;
    }

    #mobileMenu .row-link:hover,
    #mobileMenu .row-link:active{
        color:var(--mm-primary);
    }

    #mobileMenu .row-toggle{
        grid-column:3;
        width:32px;
        min-width:32px;
        height:32px;
        margin-left:0;
        border:1px solid rgba(15,95,168,.16);
        border-radius:999px;
        background:#fff;
        color:var(--mm-primary);
        display:inline-flex;
        align-items:center;
        justify-content:center;
        justify-self:end;
        align-self:center;
        cursor:pointer;
        padding:0;
        transition:all .2s ease;
        position:relative;
        z-index:4;
        flex:none;
        box-shadow:0 4px 10px rgba(15,95,168,.06);
    }

    #mobileMenu .row-toggle[aria-expanded="true"]{
        background:var(--mm-primary);
        border-color:var(--mm-primary);
        color:#fff;
        box-shadow:0 8px 18px rgba(15,95,168,.18);
    }

    #mobileMenu .row-toggle[aria-expanded="true"] .chev{
        transform:rotate(225deg);
    }

    #mobileMenu .row-toggle:active{
        background:var(--mm-soft);
    }

    #mobileMenu .level-2{
        background:var(--mm-soft-2);
    }

    #mobileMenu .level-2 > .tree-item{
        background:var(--mm-soft-2);
        border-top:1px solid #e9f1fa;
        border-bottom:0;
    }

    #mobileMenu .level-2 > .tree-item > .row{
        grid-template-columns:minmax(0,1fr) 32px;
        padding-left:42px;
        padding-right:12px;
        min-height:48px;
        background:var(--mm-soft-2);
    }

    #mobileMenu .level-2 > .tree-item > .row .row-icon{
        display:none;
    }

    #mobileMenu .level-2 > .tree-item > .row .row-link{
        grid-column:1;
        font-size:15px;
        font-weight:600;
        color:#2f4b68;
        padding:10px 0;
    }

    #mobileMenu .level-2 > .tree-item > .row .row-link:hover,
    #mobileMenu .level-2 > .tree-item > .row .row-link:active{
        color:var(--mm-primary);
    }

    #mobileMenu .level-2 > .tree-item > .row .row-toggle{
        grid-column:2;
    }

    #mobileMenu .m-section-lower{
        border-top:1px solid var(--mm-panel-border);
        background:#fff;
        width:100%;
        max-width:100%;
        box-sizing:border-box;
    }

    #mobileMenu .m-section-lower li{
        list-style:none;
        border-bottom:1px solid var(--mm-row-border);
        margin:0;
        padding:0;
    }

    #mobileMenu .m-section-lower li:last-child{
        border-bottom:0;
    }

    #mobileMenu .lower-link{
        display:block;
        padding:16px;
        text-decoration:none;
        color:var(--mm-text);
        font-size:16px;
        font-weight:700;
        background:#fff;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        transition:color .2s ease, background .2s ease;
    }

    #mobileMenu .lower-link:hover,
    #mobileMenu .lower-link:active,
    #mobileMenu .lower-link.is-active{
        color:var(--mm-primary);
        background:var(--mm-soft);
    }

    #mobileMenu .lower-link.is-tiktok{
        display:flex;
        align-items:center;
        gap:10px;
        white-space:normal;
    }

    #mobileMenu .lower-link.is-tiktok .fa-tiktok{
        width:18px;
        min-width:18px;
        text-align:center;
        font-size:18px;
        line-height:1;
    }
}