/* =========================================================
 * MUSKIS - HEADER
 *
 * Chỉ CSS. Không sửa HTML, không sửa JS của Flatsome.
 * Sticky do JS Flatsome lo: nó thêm class .stuck vào
 * .header-wrapper và tự chừa chiều cao chống giật.
 *
 * Markup Flatsome:
 *   #header.header.has-sticky
 *     .header-wrapper[.stuck]
 *       #masthead.header-main
 *         .header-inner            <- viên pill
 *           #logo
 *           .flex-col.hide-for-medium  <- menu desktop
 *           .flex-col.show-for-medium  <- nút hamburger mobile
 *
 * Hai trạng thái desktop và mobile đều là một viên pill nổi,
 * chỉ khác kích thước.
 *
 * CÔNG TẮC: --musk-position
 *   relative  = header nằm trong luồng trang (mặc định)
 *   absolute  = header nổi đè lên banner
 * ========================================================= */

#header {
  --musk-position: relative;

  /* Chiều cao viên pill. Tổng chiều cao header = giá trị này
     cộng 2 lần đệm của wrapper.
     Desktop: 66 + 24 = 90px, khớp margin-top âm của banner.

     Cuộn hay không cuộn đều dùng chung con số này - khi cuộn
     chỉ đổi màu, không đổi kích thước. */
  --musk-h: 66px;

  /* CHIỀU CAO logo, đặt thẳng lên thẻ <img>.
     Không đi vòng qua bề ngang thẻ <a> nữa: Flatsome có tuỳ
     chọn riêng cho logo lúc sticky, cứ để kích thước phụ
     thuộc thẻ bao là còn đường cho nó chen vào. */
  --musk-logo-h: 30px;

  --musk-max: 1840px;

  --musk-text: #ffffff;
  --musk-text-soft: rgba(255, 255, 255, 0.82);

  --musk-normal-bg: rgba(4, 12, 22, 0.45);
  --musk-normal-border: rgba(255, 255, 255, 0.09);
  --musk-sticky-border: rgba(255, 255, 255, 0.16);

  --musk-ease: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  position: var(--musk-position);
  top: 0;
  right: 0;
  left: 0;

  /* Phải THẤP hơn menu off-canvas của Flatsome (khoảng 1040),
     không thì header đè lên bảng menu khi mở trên mobile. */
  z-index: 900;

  width: 100%;
  background: transparent;
  box-shadow: none;
}

/* Bắt buộc. Không có dòng này thì thẻ <a> trong submenu đặt
   width: 100% sẽ CỘNG thêm padding, tràn ra khỏi khung đúng
   bằng phần padding - nhìn ra là ô hover dính sát mép phải
   trong khi mép trái vẫn có khoảng cách. */

#header,
#header *,
#header *::before,
#header *::after {
  box-sizing: border-box;
}

/* Submenu phải tràn ra ngoài được. Flatsome hay đặt
   overflow: hidden làm mất dropdown. */

#header,
#header .header-wrapper,
#header .header-main,
#header .header-inner,
#header .flex-row,
#header .flex-col,
#header .header-nav,
#header .header-nav > li {
  overflow: visible;
}

/* Nền mặc định của Flatsome: tắt hẳn, nền nằm ở viên pill. */

#header .header-bg-container,
#header .header-bg-image,
#header .header-bg-color {
  display: none;
}

/* =========================================================
 * WRAPPER - KHOẢNG ĐỆM QUANH VIÊN PILL
 * ========================================================= */

#header .header-wrapper {
  display: block;
  width: 100%;
  background: transparent;
}

#header .header-wrapper:not(.stuck) {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  padding: 12px 24px;
  opacity: 1;
  visibility: visible;
  transform: none;
}

#header .header-wrapper.stuck {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  padding: 12px 24px;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  visibility: visible;
  transform: none;
  animation: none;
}

/* Flatsome ẩn masthead khi stuck. Không cho ẩn. */

#header #masthead,
#header #masthead.hide-for-sticky,
#header .header-wrapper.stuck #masthead.hide-for-sticky {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Chiều cao phải !important và phải nêu cả trạng thái stuck.
   Customizer của Flatsome có ô riêng cho chiều cao header lúc
   sticky, không chặn thì cuộn xuống header tự phình to. */

#header #masthead.header-main,
#header .header-wrapper.stuck #masthead.header-main {
  position: relative;
  width: 100%;
  height: var(--musk-h) !important;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* =========================================================
 * VIÊN PILL
 * ========================================================= */

#header .header-inner {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  max-width: var(--musk-max);
  height: 100%;
  padding: 0 18px 0 22px;
  margin: 0 auto;
  border: 1px solid var(--musk-normal-border);
  border-radius: 999px;
  background: var(--musk-normal-bg);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  box-shadow: none;
  transition:
    border-color var(--musk-ease),
    background var(--musk-ease),
    box-shadow var(--musk-ease);
}

/* Khi cuộn CHỈ đổi màu. Kích thước giữ nguyên: pill, logo và
   chữ menu không co lại, tránh giật một nhịp lúc chuyển. */

#header .header-wrapper.stuck .header-inner {
  border-color: var(--musk-sticky-border);
  backdrop-filter: blur(24px);
  background: var(--musk-normal-bg);
  box-shadow:
    0 14px 32px #0006,
    inset 0 1px #ffffff14;
}

/* =========================================================
 * LOGO
 * ========================================================= */

#header #logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: auto !important;
  min-width: 0;
  max-width: none;
  padding: 0;
  margin: 0 34px 0 0;
}

#header #logo a,
#header .header-wrapper.stuck #logo a {
  display: flex;
  width: auto !important;
  max-width: 100%;
  align-items: center;
  height: auto;
  margin: 0;
}

/* Ép thẳng height lên thẻ <img>, không dùng max-height.
   max-height chỉ là trần: Flatsome đặt #logo img { width: 100% }
   nên ảnh giãn theo thẻ bao và chưa bao giờ chạm trần đó.
   Đặt height cố định thì bề ngang tự suy ra theo tỉ lệ, mọi
   tuỳ chọn của Flatsome thành vô hiệu.

   Liệt kê cả trạng thái stuck và mọi biến thể logo mà Flatsome
   có thể xuất ra. */

#header #logo img,
#header #logo img.header_logo,
#header #logo img.header-logo,
#header #logo img.header-logo-sticky,
#header .header-wrapper.stuck #logo img {
  display: block;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: var(--musk-logo-h) !important;
  max-height: none !important;
  margin: 0;
  object-fit: contain;
  opacity: 1;
  visibility: visible;
  transform: none !important;
}

/* Flatsome xuất hai thẻ img giống hệt nhau. Tắt cái thứ hai
   ở MỌI kích thước màn hình. */

#header #logo img.header-logo-dark {
  display: none;
}

/* =========================================================
 * CỘT MENU
 * ========================================================= */

#header .header-inner > .flex-col.hide-for-medium.flex-left {
  min-width: 0;
  flex: 1 1 auto;
  justify-content: center;
}

#header .header-inner > .flex-col.hide-for-medium.flex-right {
  flex: 0 0 auto;
  justify-content: flex-end;
  margin-left: 24px;
}

/* =========================================================
 * LINK MENU CHÍNH
 * ========================================================= */

#header .header-nav-main {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  height: auto;
  padding: 0;
  margin: 0 auto;
}

/* Mục menu cao bằng viên pill: rê chuột vào bất cứ đâu trong
   ô là mở được submenu, không phải trúng đúng chữ. */

#header .header-nav-main > li {
  position: relative;
  display: flex;
  align-self: stretch;
  align-items: center;
  height: auto;
  margin: 0;
}

#header .header-nav-main > li > a.nav-top-link {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 44px;
  padding: 0 11px;
  color: var(--musk-text-soft);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: capitalize;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  transition: color 0.2s ease;
}

/* Cuộn rồi thì nền đã đặc, bỏ đổ bóng chữ cho sạch. */

#header .header-wrapper.stuck .header-nav-main > li > a.nav-top-link {
  text-shadow: none;
}

#header .header-nav-main > li > a.nav-top-link:hover,
#header .header-nav-main > li > a.nav-top-link:focus-visible,
#header .header-nav-main > li.active > a.nav-top-link,
#header .header-nav-main > li.current-menu-item > a.nav-top-link,
#header .header-nav-main > li.current-menu-parent > a.nav-top-link {
  color: var(--musk-text);
}

#header .header-nav-main > li > a.nav-top-link:focus-visible {
  border-radius: 6px;
  outline: 2px solid rgba(255, 255, 255, 0.6);
  outline-offset: 2px;
}

/* Không dùng gạch chân hay chấm đánh dấu. Trang hiện tại đã
   phân biệt bằng màu chữ sáng hơn. */

#header .header-nav-main > li > a.nav-top-link::after,
#header .header-nav-main > li > a.nav-top-link::before,
#header .header-bottom-nav > li > a::after,
#header .header-bottom-nav > li > a::before {
  display: none;
  content: none;
}

/* Tắt tam giác nhọn Flatsome vẽ trên thẻ <li>.
   Phải tắt vì nó không đều: mục trỏ tới URL thật được gắn
   thêm class nav-dropdown-toggle và Flatsome bỏ qua nhóm đó,
   thành ra chỗ có chỗ không.
   Dropdown đã cách viên pill 10px nên tam giác dính vào cũng
   không còn hợp. */

#header .header-nav-main > li::before,
#header .header-nav-main > li::after {
  display: none !important;
  content: none !important;
}

#header .nav-top-link .icon-angle-down {
  display: inline-flex;
  margin-left: 5px;
  font-size: 11px;
  opacity: 0.7;
}

/* =========================================================
 * DROPDOWN
 * ========================================================= */

#header .header-nav-main > li.has-dropdown,
#header .header-nav-main > li.menu-item-has-children {
  position: relative;
}

#header .header-nav-main > li > ul.nav-dropdown {
  position: absolute;

  /* Cách viên pill một chút cho thoáng. Khoảng hở này được
     cầu nối vô hình ::before che lại nên rê chuột xuống
     không bị mất hover. */
  top: calc(100% + 10px);

  right: auto;
  left: 6px;
  z-index: 999999;
  width: max-content;
  min-width: 280px;
  max-width: 490px;
  padding: 10px;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(10, 20, 38, 0.78);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  backdrop-filter: blur(26px) saturate(145%);
  box-shadow: 0 16px 40px rgba(3, 8, 20, 0.26);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transform-origin: top left;
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease,
    transform 0.18s ease;
}

/* Cầu nối vô hình: rê chuột từ menu xuống submenu không mất hover. */

#header .header-nav-main > li > ul.nav-dropdown::before {
  position: absolute;
  top: -14px;
  right: 0;
  left: 0;
  height: 14px;
  content: "";
}

#header .header-nav-main > li:hover > ul.nav-dropdown,
#header .header-nav-main > li:focus-within > ul.nav-dropdown,
#header .header-nav-main > li.current-dropdown > ul.nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Hai mục cuối đổ sang trái để không tràn khỏi màn hình. */

#header .header-nav-main > li:nth-last-child(-n + 2) > ul.nav-dropdown {
  right: 6px;
  left: auto;
  transform-origin: top right;
}

#header ul.nav-dropdown > li {
  display: block;
  width: 100%;
  border: 0;
  margin: 0;
}

/* Khoảng cách đều giữa các mục, kể cả mục cuối. */

#header ul.nav-dropdown > li + li {
  margin-top: 2px;
}

#header ul.nav-dropdown > li > a {
  display: block;
  width: auto;
  padding: 11px 13px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0.03em;
  text-transform: capitalize;
  white-space: normal;
  transition:
    color 0.18s ease,
    background 0.18s ease;
}

#header ul.nav-dropdown > li > a:hover,
#header ul.nav-dropdown > li > a:focus-visible {
  background: rgba(255, 255, 255, 0.07);
  color: var(--musk-text);
}

/* =========================================================
 * NÚT HAMBURGER
 * ========================================================= */

#header .header-nav-main > li.nav-icon,
#header .mobile-nav > li.nav-icon {
  height: auto;
}

#header .nav-icon > a,
#header .nav-icon .header-button > a {
  display: flex;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  margin: 0;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: none;
  color: var(--musk-text);
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

#header .nav-icon > a:hover,
#header .nav-icon .header-button > a:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(1.04);
}

#header .nav-icon .icon-menu {
  color: var(--musk-text);
  font-size: 24px;
}

/* =========================================================
 * DESKTOP - ẨN NAV MOBILE
 * ========================================================= */

@media (min-width: 850px) {
  #header .header-inner > .flex-col.show-for-medium {
    display: none;
  }

  #header .header-inner > .flex-col.hide-for-medium {
    display: flex;
    align-items: center;
    opacity: 1;
    visibility: visible;
  }
}

/* =========================================================
 * MÀN HÌNH HẸP 850 - 1250px
 * Menu nhiều mục, thu nhỏ lại cho khỏi tràn.
 * ========================================================= */

@media (min-width: 850px) and (max-width: 1250px) {
  #header .header-wrapper:not(.stuck),
  #header .header-wrapper.stuck {
    padding: 10px 12px;
  }

  #header .header-inner {
    padding: 0 10px;
  }

  #header #logo {
    margin-right: 18px;
  }

  #header {
    --musk-logo-h: 28px;
  }

  #header .header-nav-main > li > a.nav-top-link {
    padding: 0 6px;
    font-size: 11px;
    letter-spacing: 0.02em;
  }

  #header .header-inner > .flex-col.hide-for-medium.flex-right {
    margin-left: 10px;
  }
}

/* =========================================================
 * MOBILE / TABLET (< 850px)
 *
 * Vẫn là viên pill nổi, chỉ nhỏ lại. Sticky do JS Flatsome
 * thêm class .stuck - phải bật "Sticky Header" cho mobile
 * trong Customizer thì class đó mới có.
 * ========================================================= */

@media (max-width: 849px) {
  #header {
    --musk-h: 56px;
  }

  #header .header-wrapper:not(.stuck),
  #header .header-wrapper.stuck {
    padding: 10px 12px;
  }

  #header .header-inner {
    padding: 0 10px 0 14px;
    border-radius: 999px;
  }

  /* Menu desktop tắt, nav mobile bật. */

  #header .header-inner > .flex-col.hide-for-medium {
    display: none;
  }

  #header .header-inner > .flex-col.show-for-medium {
    display: flex;
    align-items: center;
  }

  #header .header-inner > .flex-col.show-for-medium.flex-left {
    flex: 0 0 auto;
  }

  #header .header-inner > .flex-col.show-for-medium.flex-right {
    flex: 0 0 auto;
    justify-content: flex-end;
    margin-left: auto;
  }

  /* Logo canh trái, không để Flatsome kéo ra giữa. */

  #header .header-inner.medium-logo-center #logo {
    flex: 0 1 auto;
    order: 0;
    margin: 0 12px 0 0;
    text-align: left;
  }

  #header {
    --musk-logo-h: 27px;
  }

  /* Logo khi cuộn y hệt lúc chưa cuộn. Chặn nốt đường phóng
     to bằng transform nếu Flatsome có dùng. */

  #header .header-wrapper.stuck #logo,
  #header .header-wrapper.stuck #logo a,
  #header .header-wrapper.stuck #logo img {
    transform: none !important;
  }

  #header .nav-icon > a,
  #header .nav-icon .header-button > a {
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
  }

  #header .nav-icon .icon-menu {
    font-size: 22px;
  }
}

/* =========================================================
 * MOBILE NHỎ
 * ========================================================= */

@media (max-width: 420px) {
  #header .header-wrapper:not(.stuck),
  #header .header-wrapper.stuck {
    padding: 8px 10px;
  }

  #header {
    --musk-logo-h: 23px;
  }
}

/* =========================================================
 * GIẢM CHUYỂN ĐỘNG
 * ========================================================= */

@media (prefers-reduced-motion: reduce) {
  #header,
  #header * {
    transition: none !important;
    animation: none !important;
  }
}