/* ===== MOBILE HAMBURGER MENU - FINAL ===== */

.top{
    position:relative !important;
    overflow:visible !important;
    z-index:1000 !important;
}

.top .nav{
    position:relative !important;
    overflow:visible !important;

    min-height:64px !important;

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

/* NÚT 3 GẠCH LUÔN NẰM BÊN PHẢI */
.menu-toggle{
    position:absolute !important;

    top:50% !important;
    right:6px !important;

    transform:translateY(-50%) !important;

    width:40px !important;
    height:40px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;

    margin:0 !important;
    padding:0 !important;

    background:#fff !important;
    border:1px solid #e3e3e7 !important;
    border-radius:11px !important;

    box-shadow:0 3px 12px rgba(0,0,0,.08) !important;

    cursor:pointer !important;
    z-index:9999 !important;
}

.menu-toggle span{
    display:block !important;

    width:19px !important;
    height:2px !important;

    margin:0 !important;

    background:#333 !important;
    border-radius:5px !important;

    transition:
        transform .18s ease,
        opacity .18s ease !important;
}

.menu-toggle.open span:nth-child(1){
    transform:translateY(7px) rotate(45deg) !important;
}

.menu-toggle.open span:nth-child(2){
    opacity:0 !important;
}

.menu-toggle.open span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg) !important;
}


/* GHI ĐÈ RULE MOBILE CŨ .nav nav { display:none } */
.top .nav .site-menu{
    position:fixed !important;

    top:68px !important;
    right:6px !important;
    left:auto !important;

    width:min(210px,calc(100vw - 16px)) !important;

    margin:0 !important;
    padding:7px !important;

    display:none !important;
    flex-direction:column !important;

    background:#fff !important;

    border:1px solid #e5e5e9 !important;
    border-radius:13px !important;

    box-shadow:
        0 12px 35px rgba(0,0,0,.14) !important;

    z-index:9998 !important;
}

.top .nav .site-menu.open{
    display:flex !important;
}

.top .nav .site-menu a{
    width:100% !important;

    display:flex !important;
    align-items:center !important;
    gap:11px !important;

    padding:12px 13px !important;

    color:#303238 !important;
    background:transparent !important;

    border-radius:9px !important;

    text-decoration:none !important;

    font-size:14px !important;
    font-weight:650 !important;
}

.top .nav .site-menu a:active{
    background:#f3f3f5 !important;
}

.menu-icon{
    width:24px !important;
    flex:0 0 24px !important;

    text-align:center !important;
    font-size:18px !important;
}


/* ĐIỆN THOẠI */
@media(max-width:700px){

    .top .nav{
        min-height:62px !important;
    }

    .menu-toggle{
    position:absolute !important;

    top:50% !important;
    right:6px !important;

    transform:translateY(-50%) !important;

    width:40px !important;
    height:40px !important;

    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:5px !important;

    margin:0 !important;
    padding:0 !important;

    background:#fff !important;
    border:1px solid #e3e3e7 !important;
    border-radius:11px !important;

    box-shadow:0 3px 12px rgba(0,0,0,.08) !important;

    cursor:pointer !important;
    z-index:9999 !important;
}

    .top .nav .site-menu{
        display:none !important;

        top:64px !important;
        right:6px !important;

        width:200px !important;
        max-width:calc(100vw - 12px) !important;
    }

    .top .nav .site-menu.open{
        display:flex !important;
    }
}

/* SUPPORT MENU START */

.support-toggle{
    width:100% !important;

    display:flex !important;
    align-items:center !important;
    gap:11px !important;

    padding:12px 13px !important;

    border:0 !important;
    border-radius:9px !important;

    background:transparent !important;
    color:#303238 !important;

    font:inherit !important;
    font-size:14px !important;
    font-weight:650 !important;

    text-align:left !important;
    cursor:pointer !important;
}

.support-toggle:hover,
.support-toggle.open{
    background:#f5f5f7 !important;
}

.support-title{
    flex:1;
}

.support-arrow{
    font-size:20px;
    color:#969aa1;

    transition:transform .18s ease;
}

.support-toggle.open .support-arrow{
    transform:rotate(90deg);
}


/* submenu hỗ trợ */

.support-panel{
    display:none;

    margin:3px 5px 6px;
    padding:5px;

    background:#f7f7f8;

    border:1px solid #ececef;
    border-radius:10px;
}

.support-panel.open{
    display:block;
}

.support-item{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;

    padding:10px !important;

    border-radius:8px !important;

    color:#333 !important;
    text-decoration:none !important;

    background:transparent !important;
}

a.support-item:hover{
    background:#fff !important;
}

.support-item-icon{
    width:25px;
    flex:0 0 25px;

    text-align:center;
    font-size:17px;
}

.support-item-text{
    min-width:0;

    display:flex;
    flex-direction:column;

    gap:1px;
}

.support-item-text small{
    color:#90939a;
    font-size:10px;
    font-weight:500;
}

.support-item-text strong{
    color:#303238;
    font-size:12px;
    font-weight:700;
    overflow-wrap:anywhere;
}

/* SUPPORT MENU END */











/* MENU ALIGN CONTENT START */

/* Cùng chiều rộng với .coin-page */
.top .nav{
    width:min(760px,calc(100% - 24px)) !important;
    margin:0 auto !important;
    position:relative !important;
}

/* Nút 3 gạch thẳng mép phải với khung trắng */
.menu-toggle{
    position:absolute !important;
    top:50% !important;
    right:0 !important;
    transform:translateY(-50%) !important;
    margin:0 !important;
}

/* Menu xổ xuống cũng cùng mép */
.top .nav .site-menu{
    position:absolute !important;
    top:calc(100% + 8px) !important;
    right:0 !important;
    left:auto !important;
    margin:0 !important;
}

/* Mobile dùng đúng width giống .coin-page */
@media(max-width:700px){

    .top .nav{
        width:calc(100% - 14px) !important;
    }

    .menu-toggle{
        right:0 !important;
    }

    .top .nav .site-menu{
        right:0 !important;
    }
}

/* MENU ALIGN CONTENT END */