/**
 * === header-footer.css - Site header + Thuận Hải overlay contract ===
 *
 * Mô tả: Header base legacy-compatible styles plus active Thuận Hải compact
 *        control shell, search/language controls, staged entrance, and shared
 *        desktop/mobile navigation overlay. Footer styles ở footer.css.
 *
 * Flow:
 *   1. Glass surface utility class (.glass-surface) + @supports fallback
 *   2. Site header container + sticky positioning
 *   3. Top utility bar (desktop/tablet, ẩn mobile)
 *   4. Brand bar: logo, identity, CTA group
 *   5. Primary nav bar + dropdown menu
 *   6. Sticky collapse rules (.is-sticky)
 *   7. Button utilities dùng trong header
 *   8. Tablet breakpoint (768-1023px)
 *   9. Mobile breakpoint (<768px): compact header + hamburger
 *  10. Mobile drawer off-canvas + overlay
 *  11. Page overlay
 */

/* ============================================================
   1. Glass surface utility
   ============================================================ */

.glass-surface {
  background: var(--glass-subtle-bg, rgba(255, 255, 255, 0.94));
  border: 1px solid var(--glass-border, rgba(117, 56, 55, 0.16));
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(var(--glass-blur-sm, 8px));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm, 8px));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-surface {
    background: var(--color-surface);
  }
}

/* ============================================================
   2. Site header container
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  /* GPU layer + tránh subpixel gap khi sticky */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background: var(--color-surface);
}

/* ============================================================
   3. Top utility bar
   ============================================================ */

.utility-bar {
  background-color: var(--color-surface-warm);
  border-bottom: 1px solid var(--color-border);
  /* max-height animatable smooth (height: auto/36px không animate được mượt) */
  max-height: 36px;
  display: flex;
  align-items: center;
  margin: 0;
  padding-block: 0;
  overflow: hidden;
  /* Same timing function + duration → synced smooth animation */
  transition:
    max-height 550ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 400ms cubic-bezier(0.22, 0.61, 0.36, 1) 80ms,
    border-color 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: max-height;
}

.utility-bar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0;
}

.utility-bar__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.utility-bar__chip {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-ink-700);
  font-size: var(--text-sm);
}

.utility-bar__divider {
  color: var(--color-border);
  margin: 0 8px;
  font-size: var(--text-sm);
}

.utility-bar__hotline {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary-800);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-standard);
}

.utility-bar__hotline:hover {
  color: var(--color-primary-600);
}

.utility-bar__icon {
  flex-shrink: 0;
  color: var(--color-ink-500);
}

/* ============================================================
   4. Brand bar
   ============================================================ */

.brand-bar {
  background-color: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  margin: 0;
  padding: 0;
  /* Same timing function vá»›i utility-bar + tagline cho synced animation */
  transition:
    background-color 400ms cubic-bezier(0.22, 0.61, 0.36, 1),
    border-color 400ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 400ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.brand-bar__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 16px;
  /* Smooth padding collapse khi sticky */
  transition: padding-block 550ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: padding-block;
}

.brand-bar__logo-link {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.brand-bar__logo-img {
  height: 64px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  display: block;
  /* Smooth shrink REAL layout height (không chỉ scale visual) */
  transition:
    height 550ms cubic-bezier(0.22, 0.61, 0.36, 1),
    max-width 550ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: height;
}

.brand-bar__name-fallback {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-primary-900);
}

.brand-bar__logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-primary-900);
}

.brand-bar__identity {
  flex: 1;
  min-width: 0;
}

.brand-bar__name {
  margin: 0;
  font-family: var(--font-heading);
  font-size: var(--text-card-h3);
  font-weight: var(--weight-bold);
  color: var(--color-primary-900);
  line-height: var(--lh-tight);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  /* Smooth font-size shrink khi sticky */
  transition: font-size 550ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.brand-bar__name a {
  color: inherit;
  text-decoration: none;
}

.brand-bar__tagline {
  margin: 4px 0 0;
  font-size: var(--text-sm);
  color: var(--color-ink-700);
  font-style: italic;
  /* Transition chính ở rule sau (.brand-bar__tagline section 6) - duplicate this for spec consistency */
}

.brand-bar__cta-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-shrink: 0;
  /* Reserve right space cho .theme-toggle absolute (~56px width + edge gap) */
  padding-right: 56px;
}

/* ============================================================
   5. Button utilities (header scope)
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  /* Transition chỉ cho hover effect (background/color/border) - NO font-size/padding để tránh giật */
  transition:
    background 150ms cubic-bezier(0.4, 0, 0.2, 1),
    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 550ms cubic-bezier(0.22, 0.61, 0.36, 1);
  white-space: nowrap;
  border: 2px solid transparent;
  transform-origin: right center;
}

.btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--color-medical-600);
  color: #ffffff;
  border-color: var(--color-medical-600);
}

.btn--primary:hover {
  background: var(--color-medical-800);
  border-color: var(--color-medical-800);
  color: #ffffff;
}

.btn--outline-primary {
  background: transparent;
  color: var(--color-primary-800);
  border-color: var(--color-primary-200);
}

.btn--outline-primary:hover {
  background: var(--color-primary-100);
  border-color: var(--color-primary-800);
}

/* ============================================================
   6. Primary navigation bar
   ============================================================ */

/* ============================================================
   Primary Nav — Solid bar với hover darken + active yellow underline
   ============================================================ */

.primary-nav-bar {
  background-color: var(--color-primary-800);
}

.primary-nav-bar__inner {
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 48px;
}

.primary-nav {
  flex: 1;
}

.primary-nav__list {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 48px;
}

.primary-nav__list > .menu-item {
  position: relative;
  display: flex;
  align-items: stretch;
}

.primary-nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition:
    background var(--motion-fast) var(--ease-standard),
    border-color var(--motion-fast) var(--ease-standard);
}

.primary-nav__link:hover,
.primary-nav__list > .menu-item:hover > .primary-nav__link {
  background: rgba(255, 255, 255, 0.32);
  border-bottom-color: #ffffff;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  box-shadow: inset 0 -3px 0 #ffffff, 0 2px 8px rgba(0, 0, 0, 0.12);
}

.primary-nav__list > .current-menu-item > .primary-nav__link,
.primary-nav__list > .current-menu-ancestor > .primary-nav__link {
  background: rgba(255, 255, 255, 0.42);
  border-bottom-color: #ffffff;
  color: #ffffff;
  font-weight: var(--weight-bold);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 -3px 0 #ffffff;
}

.primary-nav__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.primary-nav__icon {
  flex-shrink: 0;
  opacity: 0.85;
}

.primary-nav__link--has-dropdown {
  padding-right: 6px;
}

.primary-nav__dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #ffffff;
  cursor: pointer;
  padding: 0 10px 0 4px;
  height: 100%;
  transition: transform var(--motion-fast) var(--ease-standard);
}

.primary-nav__dropdown-toggle:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.dropdown-open > .primary-nav__link > .primary-nav__dropdown-toggle,
.primary-nav__dropdown-toggle[aria-expanded="true"] {
  transform: rotate(180deg);
}

/* Dropdown menu */

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--color-glass-light-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(var(--glass-blur-md, 12px));
  -webkit-backdrop-filter: blur(var(--glass-blur-md, 12px));
  list-style: none;
  margin: 0;
  padding: 6px 0;
  z-index: 100;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease-standard),
              transform var(--motion-fast) var(--ease-standard);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .dropdown-menu {
    background: var(--color-surface);
  }
}

.dropdown-open > .dropdown-menu,
.menu-item-has-children:focus-within > .dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-menu[hidden] {
  display: none;
}

.dropdown-open > .dropdown-menu[hidden] {
  display: block;
}

.dropdown-menu__link {
  display: flex;
  align-items: center;
  padding: 10px 18px;
  font-size: var(--text-sm);
  color: var(--color-ink-950);
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}

.dropdown-menu__link:hover,
.dropdown-menu__link:focus-visible {
  background: var(--color-primary-050);
  color: var(--color-primary-900);
  outline: none;
}

/* ============================================================
   7. Sticky collapse rules (.is-sticky)
   ============================================================ */

/* Sticky collapse strategy:
 * - Utility bar collapse smoothly (height + opacity)
 * - Tagline collapse smoothly (max-height + opacity)
 * - Logo + name + brand bar GIỮ NGUYÊN size để tránh reflow cascade jitter
 * - Header thêm box-shadow + glass background
 */

.is-sticky .utility-bar {
  max-height: 0;
  opacity: 0;
  border-color: transparent;
  pointer-events: none;
}

/* Animated tagline collapse - same timing function vá»›i utility-bar cho synced animation */
.brand-bar__tagline {
  overflow: hidden;
  max-height: 4em;
  opacity: 1;
  transition:
    max-height 550ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 400ms cubic-bezier(0.22, 0.61, 0.36, 1) 80ms,
    margin 550ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: max-height;
}

.is-sticky .brand-bar__tagline {
  max-height: 0;
  opacity: 0;
  margin: 0;
}

/* Sticky compact mode - tất cả elements shrink synced 350ms cho main header thấp xuống đồng bộ */

.is-sticky .brand-bar__inner {
  padding-block: 6px;
}

/* Logo height thực sự shrink (không phải scale visual) → layout co lại */
.is-sticky .brand-bar__logo-img {
  height: 40px;
  max-width: 132px;
}

.is-sticky .brand-bar__name {
  font-size: var(--text-nav);
}

/* Button "Đặt lịch khám" compact - dùng transform: scale (GPU, no text re-rasterize) */
.is-sticky .brand-bar .btn,
.is-sticky .brand-bar__cta-group .btn {
  transform: scale(0.85);
  will-change: transform;
}

.is-sticky .site-header {
  box-shadow: var(--shadow-soft);
}

.is-sticky .brand-bar {
  background: var(--glass-subtle-bg, rgba(255, 255, 255, 0.94));
  backdrop-filter: blur(var(--glass-blur-sm, 8px));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm, 8px));
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .is-sticky .brand-bar {
    background: var(--color-surface);
  }
}

/* ============================================================
   8. Tablet breakpoint (768-1023px) — spec section 4.6.1
   ============================================================ */

@media (min-width: 768px) and (max-width: 1023px) {
  .utility-bar__chip { display: none; }
  .utility-bar__divider { display: none; }

  .brand-bar__logo-img {
    height: 56px;
    max-width: 168px;
  }

  .brand-bar__name {
    font-size: var(--text-h4);
  }

  .btn {
    padding: 8px 14px;
  }

  .primary-nav__link {
    padding: 0 10px;
    font-size: var(--text-caption);
  }

  .hamburger-btn {
    display: none;
  }

  .primary-nav-bar__mobile-actions {
    display: none;
  }
}

/* ============================================================
   9. Mobile breakpoint (<768px)
   ============================================================ */

@media (max-width: 767px) {
  .utility-bar {
    display: none;
  }

  .brand-bar__inner {
    padding-block: 8px;
    gap: 10px;
  }

  .brand-bar__logo-img {
    height: 48px;
    max-width: 156px;
  }

  .brand-bar__tagline {
    display: none;
  }

  .brand-bar__cta-group {
    display: none;
  }

  .primary-nav {
    display: none;
  }

  .primary-nav-bar__inner {
    justify-content: space-between;
    min-height: 48px;
  }

  .primary-nav-bar__mobile-actions {
    display: flex;
    align-items: center;
  }

  .mobile-call-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #ffffff;
    border-radius: var(--radius-sm);
    transition: background var(--motion-fast) var(--ease-standard);
  }

  .mobile-call-btn:hover {
    background: rgba(255, 255, 255, 0.15);
  }

  .mobile-call-btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }
}

/* ============================================================
   10. Hamburger button
   ============================================================ */

.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast) var(--ease-standard);
}

@media (max-width: 767px) {
  .hamburger-btn {
    display: flex;
  }
}

.site-header--thuanhai .hamburger-btn {
  display: flex;
  gap: 6px;
  overflow: hidden;
}

.hamburger-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

.hamburger-btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.hamburger-btn__bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-surface);
  border-radius: 2px;
  transition: transform var(--motion-fast) var(--ease-standard),
              opacity var(--motion-fast) var(--ease-standard);
}

.hamburger-btn[aria-expanded="true"] .hamburger-btn__bar--one {
  opacity: 0;
}

.site-header--thuanhai .hamburger-btn__bar,
.site-header--thuanhai .nav-click .one,
.site-header--thuanhai .nav-click .two,
.site-header--thuanhai .nav-click .three,
.site-header--thuanhai .nav-click .four {
  background: var(--color-ink-950);
}

@media (hover: hover) and (pointer: fine) {
  .site-header--thuanhai .nav-click:not(.active):hover .one,
  .site-header--thuanhai .nav-click:not(.active):hover .four,
  .site-header--thuanhai .hamburger-btn:hover .hamburger-btn__bar--one,
  .site-header--thuanhai .hamburger-btn:hover .hamburger-btn__bar--four {
    width: 0;
    opacity: 0;
  }

  .site-header--thuanhai .nav-click:not(.active):hover .two,
  .site-header--thuanhai .hamburger-btn:hover .hamburger-btn__bar--two {
    width: 90px;
    transform: translate3d(-5px, -15px, 0);
  }

  .site-header--thuanhai .nav-click:not(.active):hover .three,
  .site-header--thuanhai .hamburger-btn:hover .hamburger-btn__bar--three {
    width: 90px;
    transform: translate3d(-30px, 15px, 0);
  }
}

.hamburger-btn[aria-expanded="true"] .hamburger-btn__bar--two {
  transform: translateY(7px) rotate(45deg);
}

.hamburger-btn[aria-expanded="true"] .hamburger-btn__bar--three {
  transform: translateY(-7px) rotate(-45deg);
}

.hamburger-btn[aria-expanded="true"] .hamburger-btn__bar--four {
  opacity: 0;
}

/* ============================================================
   11. Mobile drawer off-canvas
   ============================================================ */

.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms var(--ease-standard);
}

.mobile-drawer[aria-hidden="false"] {
  pointer-events: auto;
}

.mobile-drawer--open {
  opacity: 1;
}

.mobile-drawer__panel {
  position: absolute;
  inset: clamp(72px, 10vh, 112px) clamp(20px, 5vw, 72px) clamp(20px, 6vh, 72px);
  width: auto;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(var(--glass-blur-md, 12px));
  -webkit-backdrop-filter: blur(var(--glass-blur-md, 12px));
  border: 1px solid var(--color-border);
  border-radius: clamp(20px, 3vw, 34px);
  box-shadow: var(--shadow-glass, 0 18px 50px rgba(90, 36, 38, 0.14));
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.985);
  opacity: 0;
  transition: transform 800ms var(--ease-standard), opacity 500ms var(--ease-standard);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-drawer__panel {
    background: var(--color-surface);
  }
}

.mobile-drawer--showed .mobile-drawer__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.mobile-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.mobile-drawer__title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-primary-900);
}

.mobile-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-ink-700);
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast) var(--ease-standard);
}

.mobile-drawer__close:hover {
  background: var(--color-primary-100);
  color: var(--color-primary-900);
}

.mobile-drawer__close:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.mobile-drawer__nav {
  flex: 1;
  padding: clamp(18px, 3vw, 34px);
}

.mobile-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-drawer__list .menu-item {
  border-bottom: 1px solid rgba(117, 56, 55, 0.12);
}

.mobile-drawer__list .menu-item:last-child {
  border-bottom: none;
}

.mobile-drawer__link,
.mobile-drawer__list .primary-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 0;
  font-size: clamp(1.25rem, 3vw, 2.25rem);
  color: var(--color-ink-950);
  text-decoration: none;
  min-height: 56px;
  transition: background var(--motion-fast) var(--ease-standard),
              color var(--motion-fast) var(--ease-standard);
}

.mobile-drawer__link:hover,
.mobile-drawer__list .primary-nav__link:hover {
  background: transparent;
  color: var(--color-primary-900);
}

.mobile-drawer__link:focus-visible,
.mobile-drawer__list .primary-nav__link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.mobile-drawer__list .current-menu-item > .mobile-drawer__link,
.mobile-drawer__list .current-menu-item > .primary-nav__link {
  color: var(--color-primary-800);
  font-weight: var(--weight-semibold);
  background: var(--color-primary-100);
}

.mobile-drawer__footer {
  padding: 16px 20px;
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-drawer__hotline-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  background: var(--color-medical-600);
  color: #ffffff;
  border-radius: var(--radius-md);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  text-decoration: none;
  transition: background var(--motion-fast) var(--ease-standard);
}

.mobile-drawer__hotline-btn:hover {
  background: var(--color-medical-800);
  color: #ffffff;
}

.mobile-drawer__hotline-btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.mobile-drawer__address {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--color-ink-700);
  margin: 0;
  line-height: var(--leading-body);
}

/* ============================================================
   12. Page overlay (backdrop khi drawer mở)
   ============================================================ */

.page-overlay {
  position: fixed;
  inset: 0;
  z-index: 1099;
  background: rgba(28, 23, 23, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms var(--ease-standard);
}

.page-overlay--visible {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 767px) {
  .mobile-drawer__panel {
    inset: 0 0 0 auto;
    width: min(88vw, 380px);
    border-radius: 0;
    border-width: 0 0 0 1px;
    transform: translateX(100%);
    transition: transform 500ms var(--ease-standard), opacity 500ms var(--ease-standard);
  }

  .mobile-drawer--showed .mobile-drawer__panel {
    transform: translateX(0);
  }

  .mobile-drawer__nav {
    padding: 8px 0;
  }

  .mobile-drawer__link,
  .mobile-drawer__list .primary-nav__link {
    padding: 14px 20px;
    font-size: var(--text-body);
    min-height: 48px;
  }
}

/* ============================================================
   13. Thuận Hải migration overrides
   ============================================================ */

.site-header--thuanhai {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
  min-height: 76px;
  padding: 12px max(20px, calc((100vw - var(--container-max, 1180px)) / 2));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  transition:
    transform 320ms var(--ease-standard),
    background 220ms var(--ease-standard),
    border-color 220ms var(--ease-standard),
    box-shadow 220ms var(--ease-standard),
    opacity 220ms var(--ease-standard);
}

.site-header--thuanhai.is-scrolled {
  box-shadow: var(--shadow-soft);
}

.site-header--thuanhai.is-hidden {
  transform: translateY(-100%);
}

.site-header--thuanhai.active,
.site-header--thuanhai.is-overlay-open {
  background: var(--color-white-alpha-96);
  border-bottom-color: transparent;
  box-shadow: var(--shadow-glass);
}

.site-header--thuanhai .logo {
  flex: 0 0 auto;
  opacity: 0;
  animation: goRight 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.site-header--thuanhai .right-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}

.site-header--thuanhai .top-menu,
.site-header--thuanhai .seach-top,
.site-header--thuanhai .nav-click,
.site-header--thuanhai .language {
  opacity: 0;
  animation: goLeft 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.site-header--thuanhai .top-menu {
  display: grid;
  gap: 4px;
  animation-delay: 0.2s;
}

.site-header--thuanhai .seach-top {
  animation-delay: 0.3s;
}

.site-header--thuanhai .nav-click {
  animation-delay: 0.4s;
}

.site-header--thuanhai .language {
  animation-delay: 0.5s;
}

.site-header--thuanhai .top-menu__identity {
  color: var(--color-normal);
  font-family: var(--font-thuanhai-heading);
  font-size: var(--text-nav);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-header--thuanhai .top-menu__tagline {
  color: var(--color-ink-700);
  font-size: var(--text-caption);
  line-height: var(--lh-snug);
}

.site-header--thuanhai .brand-bar__logo-img {
  height: 56px;
  max-width: 180px;
}

.site-header--thuanhai.is-scrolled {
  min-height: 64px;
  padding-block: 8px;
}

.site-header--thuanhai.is-scrolled .brand-bar__logo-img {
  height: 48px;
  max-width: 156px;
}

.site-header--thuanhai .brand-bar {
  border-bottom: 0;
  background: transparent;
}

.site-header--thuanhai .brand-bar__inner--thuanhai {
  min-height: 76px;
  padding-block: 12px;
  gap: 16px;
}

.site-header--thuanhai .brand-bar__identity--compact {
  display: grid;
  gap: 4px;
}

.site-header--thuanhai .brand-bar__name--compact {
  margin: 0;
  font-family: var(--font-thuanhai-heading, var(--font-primary));
  font-size: var(--text-nav);
  font-weight: var(--weight-bold);
  color: var(--color-primary-900);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.site-header--thuanhai .brand-bar__tagline--compact {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--color-ink-700);
  font-style: italic;
}

.site-header--thuanhai .brand-bar__cta-group--thuanhai {
  padding-right: 0;
  gap: 12px;
}

.site-header--thuanhai .header-search-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-ink-950);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.site-header--thuanhai .seach-top {
  position: relative;
  display: grid;
  grid-template-columns: minmax(160px, 240px) 42px;
  align-items: center;
  gap: 8px;
}

.site-header--thuanhai .header-search-trigger:hover,
.site-header--thuanhai .header-search-trigger:focus-visible {
  background: var(--color-primary-100);
  color: var(--color-primary-900);
  border-color: var(--color-primary-200);
}

.site-header--thuanhai .header-language {
  position: relative;
}

.site-header--thuanhai .lang-active,
.site-header--thuanhai .header-language__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-ink-950);
  cursor: pointer;
  font-size: var(--text-caption);
  font-weight: var(--weight-bold);
}

.site-header--thuanhai .header-language__toggle:hover,
.site-header--thuanhai .header-language__toggle:focus-visible,
.site-header--thuanhai .header-language.on-hover .header-language__toggle {
  background: var(--color-primary-100);
  border-color: var(--color-primary-200);
  color: var(--color-primary-900);
}

.site-header--thuanhai .header-language__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 92px;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: var(--shadow-soft);
  z-index: 1102;
  margin: 0;
  list-style: none;
}

.site-header--thuanhai .header-language__item {
  display: block;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--color-ink-950);
  font-size: var(--text-caption);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.site-header--thuanhai .header-language__item:hover,
.site-header--thuanhai .header-language__item:focus-visible,
.site-header--thuanhai .header-language__item.is-active {
  background: var(--color-primary-100);
  color: var(--color-primary-900);
}

.site-header--thuanhai .header-search-panel {
  position: relative;
}

.site-header--thuanhai .header-search-panel__input {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-ink-950);
}

.site-header--thuanhai .header-search-panel__submit {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--color-primary-800);
  color: #fff;
  cursor: pointer;
  font-weight: var(--weight-semibold);
}

.site-header--thuanhai .header-search-panel__error {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: max-content;
  max-width: 280px;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  margin: 0;
  color: var(--color-red);
  font-size: var(--text-caption);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.site-header--thuanhai .header-search-panel__error.show {
  opacity: 1;
}

.site-header--thuanhai .btn--primary {
  padding: 10px 18px;
  border-radius: 999px;
}

.site-header--thuanhai .primary-nav-bar {
  background: transparent;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  transition: opacity 220ms var(--ease-standard), transform 220ms var(--ease-standard);
}

.site-header--thuanhai .primary-nav-bar__inner--thuanhai {
  min-height: 52px;
  justify-content: space-between;
  gap: 18px;
}

.site-header--thuanhai .primary-nav__list {
  height: auto;
  gap: 10px;
}

.site-header--thuanhai .primary-nav__list > .menu-item {
  align-items: center;
}

.site-header--thuanhai .primary-nav__link {
  min-height: 44px;
  padding: 0 6px;
  color: var(--color-ink-950);
  border-bottom: 0;
  background: transparent;
  box-shadow: none;
  text-shadow: none;
}

.site-header--thuanhai .primary-nav__link:hover,
.site-header--thuanhai .primary-nav__list > .menu-item:hover > .primary-nav__link,
.site-header--thuanhai .primary-nav__list > .current-menu-item > .primary-nav__link,
.site-header--thuanhai .primary-nav__list > .current-menu-ancestor > .primary-nav__link {
  background: transparent;
  color: var(--color-primary-800);
  border-bottom: 0;
  box-shadow: none;
  text-shadow: none;
}

.site-header--thuanhai .primary-nav__dropdown-toggle {
  color: var(--color-ink-950);
}

.site-header--thuanhai.is-overlay-open .primary-nav-bar {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.site-header--thuanhai .primary-nav-bar__search {
  display: flex;
  align-items: center;
  min-width: 220px;
}

.site-header--thuanhai .primary-nav-bar__search input {
  width: 100%;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-ink-950);
}

.site-header--thuanhai .primary-nav-bar__search input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.site-header--thuanhai .primary-nav-bar__search {
  display: none;
}

.site-header--thuanhai .navigation {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: block;
  background: var(--color-white-alpha-96);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-16px);
  transition: opacity 500ms var(--ease-standard), transform 500ms var(--ease-standard);
}

.site-header--thuanhai .navigation > span {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, var(--color-normal), var(--color-normal-light));
  opacity: 0;
  transition: opacity var(--motion-thuanhai-overlay-close) var(--ease-standard);
}

.site-header--thuanhai .navigation.showed > span {
  opacity: 1;
  transition-duration: var(--motion-thuanhai-overlay-open);
}

.site-header--thuanhai .navigation.show {
  pointer-events: auto;
}

.site-header--thuanhai .navigation.showed {
  opacity: 1;
  transform: translateY(0);
  transition-duration: 800ms;
}

.site-header--thuanhai .navigation__panel {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  padding: clamp(24px, 6vw, 72px) max(24px, calc((100vw - var(--container-max, 1180px)) / 2));
}

.site-header--thuanhai .navigation__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header--thuanhai .navigation__title {
  color: var(--color-normal);
  font-family: var(--font-thuanhai-heading);
  font-size: var(--text-section-h2);
  font-weight: var(--weight-bold);
}

.site-header--thuanhai .navigation__close {
  color: var(--color-ink-950);
}

.site-header--thuanhai .navigation__menu {
  display: flex;
  align-items: center;
}

.site-header--thuanhai .navigation__list {
  display: grid;
  gap: clamp(12px, 2.5vw, 28px);
  width: 100%;
  height: auto;
  padding: clamp(24px, 6vw, 72px) 0 0;
}

.site-header--thuanhai .navigation__list > .menu-item {
  display: block;
  border-bottom: 1px solid var(--color-black-alpha-01);
}

.site-header--thuanhai .navigation__list > .menu-item > .primary-nav__link {
  min-height: auto;
  padding: 0 0 clamp(12px, 2vw, 20px);
  color: var(--color-ink-950);
  font-family: var(--font-thuanhai-heading);
  font-size: clamp(28px, 5vw, 72px);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.site-header--thuanhai .navigation__list > .nav-item > .link-hoz .text-nav {
  display: inline-block;
}

.site-header--thuanhai .navigation__list > .menu-item > .primary-nav__link:hover,
.site-header--thuanhai .navigation__list > .current-menu-item > .primary-nav__link,
.site-header--thuanhai .navigation__list > .current-menu-ancestor > .primary-nav__link {
  color: var(--color-normal);
}

.site-header--thuanhai.is-scrolled .brand-bar__inner--thuanhai {
  min-height: 64px;
  padding-block: 8px;
}

.site-header--thuanhai.is-scrolled .brand-bar__logo-img {
  height: 48px;
  max-width: 156px;
}

.site-header--thuanhai.is-scrolled .brand-bar__tagline--compact {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

@media (max-width: 1100px) {
  .site-header--thuanhai .top-menu__tagline,
  .site-header--thuanhai .seach-top .header-search-panel__input,
  .site-header--thuanhai .btn--primary {
    display: none;
  }

  .site-header--thuanhai .seach-top {
    display: block;
  }

  .site-header--thuanhai .header-search-panel__error {
    left: auto;
    right: 0;
  }

  .site-header--thuanhai.is-hidden {
    transform: none;
  }
}

@media (max-width: 767px) {
  .site-header--thuanhai {
    min-height: 64px;
    padding-inline: 16px;
  }

  .site-header--thuanhai .top-menu {
    display: none;
  }

  .site-header--thuanhai .language {
    display: none;
  }

  .site-header--thuanhai .navigation__list > .menu-item > .primary-nav__link {
    font-size: clamp(24px, 9vw, 40px);
  }
}

@media (max-width: 767px) {
  .site-header--thuanhai .header-search-panel {
    left: 12px;
    right: 12px;
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header--thuanhai .logo,
  .site-header--thuanhai .top-menu,
  .site-header--thuanhai .seach-top,
  .site-header--thuanhai .language,
  .site-header--thuanhai .nav-click {
    opacity: 1;
    animation: none;
  }

  .navigation,
  .page-overlay {
    transition-duration: 1ms;
  }
}

/* ============================================================
   14. Active Thuận Hải global header contract
   ============================================================ */

:root {
  --bvyhct-header-height: 81px;
  --motion-thuanhai-overlay-open: 800ms;
  --motion-thuanhai-overlay-close: 500ms;
}

body.is-header-overlay-open {
  overflow: hidden;
}

.site-main {
  padding-top: var(--bvyhct-header-height);
}

.header.site-header--thuanhai {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: var(--bvyhct-header-height);
  padding: 0 clamp(18px, 2.1vw, 30px);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 18px 60px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: min-height 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

.header.site-header--thuanhai .logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  width: auto;
  max-width: 520px;
  min-height: 80px;
  color: #000;
  font-weight: 800;
  text-decoration: none;
  opacity: 1;
  animation: none;
  transform-origin: left center;
  transition: min-height 220ms ease, width 220ms ease, gap 220ms ease, transform 220ms ease;
}

.header.site-header--thuanhai .logo__image {
  display: block;
  flex: 0 0 auto;
  width: auto;
  max-width: 202px;
  max-height: 64px;
  object-fit: contain;
  transition: max-height 220ms ease;
}

.header.site-header--thuanhai .logo__mark {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary-900), var(--color-primary-600));
  color: var(--color-white);
}

.header.site-header--thuanhai .logo__identity {
  display: grid;
  align-content: center;
  gap: 2px;
  max-width: 360px;
  overflow: hidden;
  max-height: 40px;
  transition: max-width 220ms ease, opacity 180ms ease, transform 220ms ease;
}

.header.site-header--thuanhai .logo__name {
  display: block;
  color: #000;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
}

.header.site-header--thuanhai .right-header {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  min-width: 0;
  height: 52px;
  margin-left: clamp(40px, 4.35vw, 64px);
  transition: margin-left 220ms ease, height 220ms ease;
}

.header.site-header--thuanhai.is-scrolled {
  min-height: 70px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.header.site-header--thuanhai.is-scrolled .logo {
  min-height: 60px;
  width: auto;
  gap: 0;
  transform: translate(clamp(280px, 22vw, 420px), 1px);
}

.header.site-header--thuanhai.is-scrolled .logo__image {
  max-height: 60px;
}

.header.site-header--thuanhai.is-scrolled .logo__identity {
  max-width: 0;
  max-height: 0;
  opacity: 0;
  transform: translateX(-14px);
  pointer-events: none;
}

.header.site-header--thuanhai.is-scrolled .right-header {
  height: 44px;
  margin-left: 0;
}

.header.site-header--thuanhai .top-menu,
.header.site-header--thuanhai .nav-click {
  opacity: 1;
  animation: none;
}

.header.site-header--thuanhai .top-menu {
  flex: 1 1 auto;
  max-width: calc(100% - 52px);
  padding-right: 28px;
  overflow: visible;
  transition: padding-right 220ms ease;
}

.header.site-header--thuanhai.is-scrolled .top-menu {
  padding-right: 0;
}

.header.site-header--thuanhai .top-menu__list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  white-space: nowrap;
}

.header.site-header--thuanhai .top-menu__list > .menu-item {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 39px;
  padding: 0 15px;
}

.header.site-header--thuanhai .top-menu__list > .menu-item:first-child {
  padding-left: 0;
}

.header.site-header--thuanhai .top-menu__list > .menu-item:last-child {
  padding-right: 0;
}

.header.site-header--thuanhai .top-menu__list > .menu-item + .menu-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 14px;
  background: rgba(34, 34, 35, 0.18);
  transform: translateY(-50%);
}

.header.site-header--thuanhai .top-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 39px;
  color: #000;
  font-family: var(--font-thuanhai-heading);
  font-size: 12.8px;
  font-weight: 700;
  line-height: 19.2px;
  letter-spacing: normal;
  text-decoration: none;
  text-transform: uppercase;
}

.header.site-header--thuanhai .top-menu .text-nav {
  position: relative;
  display: inline-block;
  color: #000;
  font-family: var(--font-thuanhai-heading);
  font-size: 12.8px;
  font-weight: 700;
  line-height: 19.2px;
  transition: color 150ms ease-in-out;
}

.header.site-header--thuanhai .top-menu .text-nav::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: var(--color-primary-800);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 150ms ease-in-out;
}

.header.site-header--thuanhai .top-menu a:hover,
.header.site-header--thuanhai .top-menu a:focus-visible {
  color: var(--color-primary-800);
}

.header.site-header--thuanhai .top-menu .menu-item:hover .text-nav,
.header.site-header--thuanhai .top-menu .menu-item:focus-within .text-nav,
.header.site-header--thuanhai .top-menu .current-menu-item .text-nav,
.header.site-header--thuanhai .top-menu .current_page_item .text-nav,
.header.site-header--thuanhai .top-menu .current-menu-ancestor .text-nav,
.header.site-header--thuanhai .top-menu .current_page_parent .text-nav {
  color: var(--color-primary-800);
}

.header.site-header--thuanhai .top-menu .menu-item:hover .text-nav::after,
.header.site-header--thuanhai .top-menu .menu-item:focus-within .text-nav::after,
.header.site-header--thuanhai .top-menu .current-menu-item .text-nav::after,
.header.site-header--thuanhai .top-menu .current_page_item .text-nav::after,
.header.site-header--thuanhai .top-menu .current-menu-ancestor .text-nav::after,
.header.site-header--thuanhai .top-menu .current_page_parent .text-nav::after {
  transform: scaleX(1);
}

.header.site-header--thuanhai .top-menu__list > .menu-item-has-children {
  padding-right: 20px;
}

.header.site-header--thuanhai .top-menu__list > .menu-item-has-children::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
}

.header.site-header--thuanhai .top-menu__list > .menu-item-has-children > a::after {
  content: '';
  margin-left: 8px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 150ms ease;
}

.header.site-header--thuanhai .top-menu__list > .menu-item-has-children:hover > a::after,
.header.site-header--thuanhai .top-menu__list > .menu-item-has-children:focus-within > a::after,
.header.site-header--thuanhai .top-menu__list > .menu-item-has-children.current-menu-ancestor > a::after {
  transform: rotate(225deg) translateY(-1px);
}

.header.site-header--thuanhai .top-menu__list > .menu-item > .sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 1200;
  min-width: 220px;
  padding: 10px 0;
  margin: 0;
  list-style: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(17, 24, 39, 0.08);
  box-shadow: 0 22px 40px rgba(15, 23, 42, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  pointer-events: none;
  transition:
    opacity 150ms ease 180ms,
    transform 150ms ease 180ms,
    visibility 0ms linear 330ms;
}

.header.site-header--thuanhai .top-menu__list > .menu-item:hover > .sub-menu,
.header.site-header--thuanhai .top-menu__list > .menu-item:focus-within > .sub-menu,
.header.site-header--thuanhai .top-menu__list > .menu-item.current-menu-ancestor > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0ms;
}

.header.site-header--thuanhai .top-menu__list > .menu-item > .sub-menu > .menu-item {
  padding: 0;
}

.header.site-header--thuanhai .top-menu__list > .menu-item > .sub-menu > .menu-item::before {
  content: none;
}

.header.site-header--thuanhai .top-menu__list > .menu-item > .sub-menu a {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  color: #0f172a;
  font-family: var(--font-heading, var(--font-primary));
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
}

.header.site-header--thuanhai .top-menu__list > .menu-item > .sub-menu a:hover,
.header.site-header--thuanhai .top-menu__list > .menu-item > .sub-menu a:focus-visible,
.header.site-header--thuanhai .top-menu__list > .menu-item > .sub-menu .current-menu-item > a {
  color: var(--color-primary-800);
  background: rgba(6, 208, 1, 0.08);
}

.header.site-header--thuanhai .nav-click {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  min-width: 28px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-primary-900);
  cursor: pointer;
}

.header.site-header--thuanhai .nav-click__bars {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 18px;
}

.header.site-header--thuanhai .nav-click .one,
.header.site-header--thuanhai .nav-click .two,
.header.site-header--thuanhai .nav-click .three {
  display: block;
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}

.header.site-header--thuanhai .nav-click.active .one {
  transform: translateY(7.5px) rotate(45deg);
}

.header.site-header--thuanhai .nav-click.active .two {
  opacity: 0;
}

.header.site-header--thuanhai .nav-click.active .three {
  transform: translateY(-7.5px) rotate(-45deg);
}

.header.site-header--thuanhai .navigation {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: block;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-18px);
  transition: opacity var(--motion-thuanhai-overlay-close) ease, transform var(--motion-thuanhai-overlay-close) ease;
}

.header.site-header--thuanhai .navigation.show {
  pointer-events: auto;
}

.header.site-header--thuanhai .navigation.showed {
  opacity: 1;
  transform: translateY(0);
  transition-duration: var(--motion-thuanhai-overlay-open);
}

.header.site-header--thuanhai .navigation > span {
  position: fixed;
  inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary-900) 96%, black 4%), color-mix(in srgb, var(--color-primary-800) 94%, black 6%));
  opacity: 0;
  transition: opacity var(--motion-thuanhai-overlay-close) ease;
}

.header.site-header--thuanhai .navigation.showed > span {
  opacity: 1;
  transition-duration: var(--motion-thuanhai-overlay-open);
}

.header.site-header--thuanhai .navigation__panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(32px, 6vw, 72px);
  min-height: 100vh;
  padding: clamp(96px, 12vh, 150px) clamp(24px, 7vw, 96px) 56px;
  color: var(--color-white);
}

.header.site-header--thuanhai .navigation__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header.site-header--thuanhai .navigation__eyebrow {
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.header.site-header--thuanhai .navigation__close {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: transparent;
  color: var(--color-white);
  cursor: pointer;
  padding: 10px 18px;
}

.header.site-header--thuanhai .navigation__list,
.header.site-header--thuanhai .navigation__list .sub-menu {
  display: grid;
  gap: 14px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.header.site-header--thuanhai .navigation__list > .menu-item > a,
.header.site-header--thuanhai .navigation__link {
  display: inline-flex;
  color: var(--color-white);
  font-size: clamp(34px, 5vw, 72px);
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.header.site-header--thuanhai .navigation__list .sub-menu {
  margin-top: 14px;
  padding-left: clamp(18px, 3vw, 44px);
}

.header.site-header--thuanhai .navigation__list .sub-menu a {
  color: var(--color-white-alpha-82);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 700;
  text-decoration: none;
}

@media (hover:hover) and (pointer:fine) and (min-width:1100px) {
  .header.site-header--thuanhai.has-desktop-hover .nav-click:not(.active):hover .one {
    transform: translateX(4px) scaleX(0.78);
  }

  .header.site-header--thuanhai.has-desktop-hover .nav-click:not(.active):hover .two {
    transform: scaleX(1);
  }

  .header.site-header--thuanhai.has-desktop-hover .nav-click:not(.active):hover .three {
    transform: translateX(-4px) scaleX(0.78);
  }
}

@media (max-width:1100px) {
  :root {
    --bvyhct-header-height: 70px;
  }

  .header.site-header--thuanhai {
    min-height: var(--bvyhct-header-height);
    padding-inline: 14px;
  }

  .header.site-header--thuanhai .logo {
    width: auto;
    min-height: 70px;
  }

  .header.site-header--thuanhai .logo__image {
    max-width: 150px;
    max-height: 52px;
  }

  .header.site-header--thuanhai .logo__identity {
    display: none;
  }

  .header.site-header--thuanhai .top-menu {
    display: none;
  }

  .header.site-header--thuanhai .right-header {
    flex: 0 0 auto;
    margin-left: auto;
    width: auto;
    height: 44px;
    gap: 0;
  }

  .header.site-header--thuanhai .nav-click {
    display: inline-flex;
    min-width: 26px;
    width: 26px;
    height: 20px;
    padding: 0;
  }

  .header.site-header--thuanhai .nav-click__bars {
    width: 26px;
    height: 16px;
  }
}

@media (max-width:580px) {
  .header.site-header--thuanhai .right-header {
    width: auto;
    gap: 0;
  }

  .header.site-header--thuanhai .nav-click {
    width: 24px;
    min-width: 24px;
    height: 18px;
  }

  .header.site-header--thuanhai .nav-click__bars {
    width: 24px;
    height: 14px;
  }

  .header.site-header--thuanhai .nav-click .one,
  .header.site-header--thuanhai .nav-click .two,
  .header.site-header--thuanhai .nav-click .three {
    width: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .header.site-header--thuanhai,
  .header.site-header--thuanhai *,
  .header.site-header--thuanhai .navigation,
  .header.site-header--thuanhai .navigation > span {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}

/* ============================================================
   NOTE: === FOOTER STYLES IN footer.css (Phase 04) ===
   ============================================================ */