/* Final header/menu rules loaded after page-specific styles. */

header:not(.sticky) #logo_home h1 a,
header:not(.sticky) #logo_home .logo-mark,
header#plain:not(.sticky) #logo_home h1 a,
header#plain:not(.sticky) #logo_home .logo-mark,
header#colored:not(.sticky) #logo_home h1 a,
header#colored:not(.sticky) #logo_home .logo-mark {
  background-image: url("../img/logo_vn.png") !important;
}

body:has(main > .home-hero) header:not(.sticky) #logo_home h1 a,
body:has(main > .home-hero) header:not(.sticky) #logo_home .logo-mark {
  background-image: url("../img/logo_sticky.png") !important;
}

body:has(main > .product-detail-page) header #logo_home h1 a,
body:has(main > .product-detail-page) header #logo_home .logo-mark,
body:has(main > .product-detail-page) header:not(.sticky) #logo_home h1 a,
body:has(main > .product-detail-page) header:not(.sticky) #logo_home .logo-mark,
body:has(main > .product-detail-page) header.sticky #logo_home h1 a,
body:has(main > .product-detail-page) header.sticky #logo_home .logo-mark {
  background-image: url("../img/logo_sticky.png") !important;
}

header.sticky #logo_home h1 a,
header.sticky #logo_home .logo-mark,
header#plain.sticky #logo_home h1 a,
header#plain.sticky #logo_home .logo-mark,
header#colored.sticky #logo_home h1 a,
header#colored.sticky #logo_home .logo-mark {
  background-image: url("../img/logo_sticky.png") !important;
}

@media only screen and (max-width: 991px) {
  header,
  header#plain,
  header#colored {
    min-height: 64px;
    padding: 0 !important;
    z-index: 10040;
  }

  header.sticky,
  header#plain.sticky,
  header#colored.sticky {
    background: #fff !important;
    box-shadow: 0 10px 28px rgba(17, 24, 39, 0.1) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  header .container {
    position: relative;
    max-width: 100%;
  }

  header .row {
    align-items: center;
    min-height: 64px;
  }

  header nav.col-9,
  header nav,
  header.sticky nav {
    position: static;
    min-height: 64px;
    margin-top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  #logo_home h1,
  #logo_home .logo-mark,
  header.sticky #logo_home h1,
  header.sticky #logo_home .logo-mark {
    margin: 0 !important;
  }

  #logo_home h1 a,
  #logo_home .logo-mark,
  header.sticky #logo_home h1 a,
  header.sticky #logo_home .logo-mark,
  header#plain #logo_home h1 a,
  header#plain #logo_home .logo-mark,
  header#colored #logo_home h1 a,
  header#colored #logo_home .logo-mark,
  header.sticky#colored #logo_home h1 a,
  header.sticky#colored #logo_home .logo-mark {
    width: 162px !important;
    height: 34px !important;
    background-size: 162px 34px !important;
  }

  .cmn-toggle-switch {
    top: 50% !important;
    right: 15px !important;
    width: 38px !important;
    height: 38px !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
    z-index: 10060 !important;
  }

  .cmn-toggle-switch span {
    top: 18px !important;
    left: 4px;
    right: 4px;
    height: 2px;
  }

  .cmn-toggle-switch span::before,
  .cmn-toggle-switch span::after {
    left: 0;
    height: 2px;
  }

  .cmn-toggle-switch span::before {
    top: -8px;
  }

  .cmn-toggle-switch span::after {
    bottom: -8px;
  }

  header:not(.sticky) .cmn-toggle-switch span,
  header:not(.sticky) .cmn-toggle-switch span::before,
  header:not(.sticky) .cmn-toggle-switch span::after {
    background-color: #243247 !important;
  }

  header.sticky .cmn-toggle-switch span,
  header.sticky .cmn-toggle-switch span::before,
  header.sticky .cmn-toggle-switch span::after,
  header#plain.sticky .cmn-toggle-switch span,
  header#plain.sticky .cmn-toggle-switch span::before,
  header#plain.sticky .cmn-toggle-switch span::after {
    background-color: #243247 !important;
  }

  .cmn-toggle-switch__htx.active span {
    background: none !important;
  }

  body:has(main > .dest-hero) header:not(.sticky),
  body:has(main > .listing-category-hero) header:not(.sticky) {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.42), rgba(15, 23, 42, 0.08)) !important;
    box-shadow: none !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  body:has(main > .dest-hero) header:not(.sticky) .cmn-toggle-switch span,
  body:has(main > .dest-hero) header:not(.sticky) .cmn-toggle-switch span::before,
  body:has(main > .dest-hero) header:not(.sticky) .cmn-toggle-switch span::after,
  body:has(main > .listing-category-hero) header:not(.sticky) .cmn-toggle-switch span,
  body:has(main > .listing-category-hero) header:not(.sticky) .cmn-toggle-switch span::before,
  body:has(main > .listing-category-hero) header:not(.sticky) .cmn-toggle-switch span::after {
    background-color: #fff !important;
  }

  .layer {
    z-index: 10010 !important;
    background-color: rgba(12, 18, 28, 0.55) !important;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  .main-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(88vw, 360px) !important;
    max-width: 100%;
    height: 100dvh !important;
    padding-bottom: 18px;
    transform: translateX(-100%) !important;
    border-radius: 0 20px 20px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    z-index: 10050 !important;
  }

  .main-menu.show {
    transform: translateX(0) !important;
  }

  #header_menu {
    min-height: 72px;
    padding: 17px 66px 15px 20px !important;
    border-bottom: 1px solid #eceff3;
  }

  #header_menu img {
    max-width: 178px;
    height: auto;
  }

  a#close_in {
    top: 17px;
    right: 16px;
    width: 38px;
    height: 38px;
  }

  .main-menu > ul > li > a {
    padding: 16px 20px !important;
    color: #1f2937 !important;
    font-size: 18px;
    line-height: 1.3;
  }

  .main-menu ul li.submenu ul li a,
  .main-menu ul .menu-wrapper ul li a {
    padding: 11px 20px 11px 34px !important;
    color: #475569 !important;
    font-size: 15px;
  }

  .main-menu ul .menu-wrapper h3 {
    padding: 13px 20px 6px 20px;
  }
}

@media only screen and (max-width: 480px) {
  .main-menu {
    width: min(90vw, 352px) !important;
    border-radius: 0 18px 18px 0;
  }

  #logo_home h1 a,
  #logo_home .logo-mark,
  header.sticky #logo_home h1 a,
  header.sticky #logo_home .logo-mark {
    width: 154px !important;
    height: 32px !important;
    background-size: 154px 32px !important;
  }
}