/****************************
 * Menu > Common
****************************/
/* general */
.vii-menu {padding:var(--vii-header-offset) var(--vii-gap-container) 0;}
.vii-menu-row {
    padding:0 4px;gap:12px;
    min-height:var(--vii-header-height);
    background-color:var(--vii-color-white);
    border-radius:var(--vii-header-radius);
    box-shadow:var(--vii-header-box-shadow);
}

/* menu logo */
.vii-menu-logo {
    height:var(--vii-logo-height);
    img {width:auto;}
}

/* menu-sticky */
[data-menu*="sticky"] {top:calc(var(--admin-bar-height) + var(--height-tradding-view));}
body.scroll-middle .vii-trading-view {transform:translateY(-100%);}
body.scroll-down:not(.scroll-bottom) [data-menu*="sticky"] {transform:translateY(calc(-1 * var(--height-tradding-view) - 100%));}
body.scroll-up:not(.scroll-top) [data-menu*="sticky"],
body.scroll-bottom [data-menu*="sticky"] {
    transform:translateY(calc(-1 * var(--height-tradding-view) - var(--vii-header-offset) / 2));
}

/* menu with body banner-small, banner-detail */
body.banner-small {
    padding-top:calc(var(--vii-header-height) + var(--height-tradding-view));
}
body:is(.banner-detail, .banner-simple-detail) {
    padding-top:calc(var(--vii-header-height) + var(--height-tradding-view) + 80px);
}
body.banner-default {
    padding-top:var(--height-tradding-view);
}

/* Toggle menu */
.vii-menu-mobile-toggle_menu {background-color:rgba(0, 0, 0, 0.3);}

/* vii-hamburger-button */
.vii-hamburger-button {background-color:transparent;}
.vii-hamburger-button__inner {width:20px;height:16px;}
.vii-hamburger-button__inner i {height:2px;}
.vii-hamburger-button__inner i:nth-child(2) {top:7px;}
.vii-hamburger-button__inner i:nth-child(3) {width:15px;}
html.menu-open .vii-hamburger-button__inner i:nth-child(1) {top:9px;transform:rotate(45deg);}
html.menu-open .vii-hamburger-button__inner i:nth-child(2) {width:0; left:50%;}
html.menu-open .vii-hamburger-button__inner i:nth-child(3) {bottom:5px;width:100%;transform:rotate(-45deg);}


/****************************
 * Responsive Menu > Common
****************************/
@media only screen and (min-width:1181px) {
    .vii-menu-col.right {gap:20px;}
    .vii-menu-row:not( :has(.vii-header-cta-buttons)) .vii-menu-col.right {
        margin-left:auto;margin-right:auto;
        padding-right:190px;
    }
}
@media only screen and (max-width:1180px) {
    body.banner-default {
        padding-top:calc(var(--height-tradding-view) + var(--vii-header-height));
    }
    .vii-menu-row {padding:0 var(--vii-gap-container);}
    .vii-menu-col.tools {gap:12px;}
}
@media screen and (max-width:480px) {
    .vii-menu-row {gap:8px;}
    .vii-menu-col.tools {gap:12px;padding-right:0;}
}