/***************************/
/****  MENU PANEL PRO ******/
/***************************/
@media(min-width:992px){
#mobileMenuBtn{
display:none;
}
}
/* =========================
PANEL WRAP
========================= */
.header-panel{
position:fixed;
top:0;
left:0;

width:360px;
height:100dvh;

background:#0f0f0f;
border-right:1px solid rgba(255,255,255,.08);

z-index:99999;

/* FIX repaint */
transform:translateX(-100%);
transition:transform .35s cubic-bezier(.77,0,.18,1);

will-change:transform;
backface-visibility:hidden;

overflow:hidden;
}

/* active */
.header-panel.active{
transform:translateX(0);
}

/* mobile */
@media(max-width:991px){
.header-panel{
width:300px;
}
/********************************
MINIMAL PREMIUM MENU BUTTON
********************************/

#mobileMenuBtn{
    display:flex;
    align-items:center;
    padding-left:15px;
}

/* button */
.menu-toggle{
    width:44px;
    height:44px;

    border:none;
    border-radius:12px;

    background:#ffffff;
    box-shadow:
        0 6px 20px rgba(0,0,0,.12),
        0 2px 6px rgba(0,0,0,.08);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:4px;

    cursor:pointer;

    transition:
        transform .18s ease,
        box-shadow .25s ease,
        background .25s ease;
}

/* hover */
.menu-toggle:hover{
    transform:translateY(-1px);

    box-shadow:
        0 10px 28px rgba(0,0,0,.16),
        0 3px 8px rgba(0,0,0,.08);
}

/* click feel */
.menu-toggle:active{
    transform:scale(.94);
}

/* hamburger lines */
.menu-toggle span{
    width:18px;
    height:2px;

    border-radius:10px;
    background:#111;

    transition:.25s ease;
}

/* line spacing đẹp hơn */
.menu-toggle span:nth-child(2){
    width:14px;
}

.menu-toggle span:nth-child(3){
    width:18px;
}
}


/* =========================
HEADER PANEL
========================= */
.panel-head{
display:flex;
align-items:center;
justify-content:space-between;

padding:24px;

border-bottom:1px solid rgba(255,255,255,.08);
}

.panel-head button{
background:none;
border:none;

color:#fff;
font-size:28px;

cursor:pointer;
}

.panel-logo{
font-size:30px;
font-weight:900;
color:#fff;
}

.panel-logo span{
color:#ff2d6f;
}


/* =========================
STACK SYSTEM
========================= */
.panel-stack{
display:flex;

width:100%;
height:100%;

transition:transform .4s cubic-bezier(.77,0,.18,1);

will-change:transform;
transform:translateZ(0);
}

/* each level */
.panel-level{
min-width:100%;
height:100%;

overflow-y:auto;
overflow-x:hidden;

background:#0f0f0f;

transform:translateZ(0);
}


/* =========================
SCROLLBAR
========================= */
.panel-level::-webkit-scrollbar{
width:4px;
}

.panel-level::-webkit-scrollbar-thumb{
background:rgba(255,255,255,.1);
}


/* =========================
MENU BASE
========================= */
.panel-menu,
.panel-level ul{
margin:0;
padding:15px 24px;
list-style:none;

transform:translateZ(0);
}

/* hide original submenu */
.panel-menu .sub-menu{
display:none;
padding:0;
margin:0;
list-style:none;
}


/* =========================
ITEM
========================= */
.header-panel .panel-level li{
display:flex;
align-items:center;
justify-content:space-between;

border-bottom:1px solid rgba(255,255,255,.06);

transform:translateZ(0);
}

/* link */
.header-panel .panel-level li a{
flex:1;

display:block;

padding:14px 0;
padding-right:40px;

font-size:15px;
font-weight:500;
letter-spacing:.2px;

color:#eaeaea;

transition:
color .2s ease,
transform .2s ease;

transform:translateZ(0);
}

/* hover desktop only */
@media(hover:hover){

.header-panel .panel-level li a:hover{
color:#ff2d6f;
transform:translateX(6px);
}

}


/* =========================
SUBMENU ICON
========================= */
.header-panel .submenu-toggle{
width:24px;

flex-shrink:0;

margin-right:4px;

text-align:center;

font-size:36px;
line-height:1;

cursor:pointer;

opacity:.55;
color:#ff2d6f;

transition:
opacity .25s ease,
transform .25s ease;

transform:translateZ(0);
}

/* hover desktop only */
@media(hover:hover){

.header-panel li:hover .submenu-toggle{
opacity:1;
transform:translateX(4px);
}

}


/* =========================
SUB HEADER
========================= */
.panel-sub-head{
display:flex;
align-items:center;
gap:10px;

padding:20px;

font-weight:700;
color:#fff;

border-bottom:1px solid rgba(255,255,255,.08);
}

.panel-back{
font-size:20px;

cursor:pointer;

opacity:.7;

transition:
opacity .2s ease,
transform .2s ease;
}

@media(hover:hover){

.panel-back:hover{
opacity:1;
transform:translateX(-3px);
}

}