/***************************/

/**** MENU PANEL PRO ******/

/***************************/

/* lock body khi mở menu */
body.menu-open{overflow:hidden;touch-action:none}
/* desktop hide */
@media(min-width:992px){#mobileMenuBtn{display:none}}
/* =========================
PANEL WRAP
========================= */
.header-panel{position:fixed;top:0;left:0;bottom:0;width:360px;max-width:100%;background:#0f0f0f;border-right:1px solid rgba(255,255,255,.08);z-index:999999;overflow:hidden;transform:translateX(-100%);transition:transform .35s cubic-bezier(.77,0,.18,1);will-change:transform;backface-visibility:hidden}
/* active */
.header-panel.active{transform:translateX(0)}
/* mobile width */
@media(max-width:991px){.header-panel{width:300px}/********************************    MENU BUTTON    ********************************/    #mobileMenuBtn{display:flex;align-items:center;padding-left:15px}.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}.menu-toggle:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(0,0,0,.16),0 3px 8px rgba(0,0,0,.08)}.menu-toggle:active{transform:scale(.94)}.menu-toggle span{width:18px;height:2px;border-radius:10px;background:#111;transition:.25s ease}.menu-toggle span:nth-child(2){width:14px}.menu-toggle span:nth-child(3){width:18px}}
/* =========================
HEADER
========================= */
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid rgba(255,255,255,.08);flex-shrink:0}
.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
========================= */
.panel-stack{display:flex;width:100%;height:calc(100% - 91px);transition:transform .4s cubic-bezier(.77,0,.18,1);will-change:transform}
/* =========================
LEVEL
========================= */
.panel-level{min-width:100%;overflow-y:auto;overflow-x:hidden;background:#0f0f0f;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* =========================
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}
/* hide original submenu */
.panel-menu .sub-menu{display:none;padding:0;margin:0;list-style:none}
/* =========================
LINK EFFECT
========================= */
.panel-level a.clickable{display:block;position:relative;transition:all .12s ease}
.panel-level a.clickable:hover{transform:translateY(-1px)}
.panel-level a.clickable:active{background:rgba(0,0,0,0.25);box-shadow:inset 0 4px 10px rgba(0,0,0,0.45),inset 0 -2px 2px rgba(255,255,255,0.06);color:#ffffff}
/* =========================
ITEM
========================= */
.header-panel .panel-level li{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.06)}
/* link */
.header-panel .panel-level li a{flex:1;min-width:0;display:block;padding:14px 0;padding-right:40px;font-size:15px;font-weight:500;letter-spacing:.2px;color:#eaeaea;word-break:break-word;transition:color .2s ease,transform .2s ease}
/* 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}
@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)}}