/* Header dính trên cùng. Trong suốt khi đang ở Hero, chuyển sang nền sáng khi
   đã cuộn qua — main.js gắn/gỡ class .is-scrolled. */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-height);
  color: var(--white);
  transition: background var(--dur-fast) var(--ease-soft),
    color var(--dur-fast) var(--ease-soft),
    box-shadow var(--dur-fast) var(--ease-soft);
}

.header.is-scrolled {
  background: var(--off-white);
  color: var(--black-soft);
  box-shadow: 0 1px 0 var(--border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

/* -------------------------------------------------------------- logo */

/* Cùng kiểu chữ với "VSC TIRE" ở footer. */
.logo {
  display: inline-flex;
  align-items: center;
  /* Vùng bấm cao hết header cho dễ trúng, kể cả trên màn cảm ứng. */
  height: 100%;
  font-family: var(--font-brand);
  font-weight: var(--weight-brand);
  font-size: 2.25rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--gold);
  transition: color var(--dur-fast) var(--ease-soft);
}

.header.is-scrolled .logo {
  color: var(--gold-deep);
}

/* --------------------------------------------------------- menu chính */

.header__panel {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-6), 4vw, var(--sp-12));
}

.header__nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--sp-6), 3vw, var(--sp-10));
}

.header__nav a {
  position: relative;
  padding-block: var(--sp-2);
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Gạch chân chạy ra từ giữa khi hover hoặc khi đang ở đúng phần đó. */
.header__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform var(--dur-fast) var(--ease-out);
}

.header__nav a:hover::after,
.header__nav a.is-active::after {
  transform: scaleX(1);
}

.header.is-scrolled .header__nav a::after {
  background: var(--gold-deep);
}

/* --------------------------------------------------- chọn ngôn ngữ */

.lang {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  margin: 0;
}

.lang__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Cờ chỉ cao 16px nên vùng bấm phải nới ra mới đủ 44px cho ngón tay. */
  min-width: 2.75rem;
  min-height: 2.75rem;
}

.lang__flag {
  width: 1.5rem;
  height: 1rem;
  object-fit: cover;
  /* Cờ Mỹ và cờ Trung Quốc đều có mảng trắng/vàng sát mép; viền mảnh giúp
     tách chúng khỏi nền, cả nền tối lẫn nền sáng. */
  outline: 1px solid rgb(255 255 255 / 0.25);
  outline-offset: -1px;
  /* Cờ chưa chọn chỉ mờ nhẹ, KHÔNG giảm bão hoà: cờ là dấu hiệu ngôn ngữ duy
     nhất ở đây (không còn chữ EN/VI/ZH), làm xỉn màu thì cờ Trung Quốc và
     cờ Việt Nam đều thành mảng nâu sẫm, nhìn không phân biệt được.
     Cờ đang chọn phân biệt bằng viền gold và phóng to, không bằng màu. */
  opacity: 0.72;
  transition: opacity var(--dur-fast) var(--ease-soft),
    outline-color var(--dur-fast) var(--ease-soft),
    transform var(--dur-fast) var(--ease-soft);
}

.lang__item:hover .lang__flag {
  opacity: 1;
}

.lang__item[data-active="true"] .lang__flag {
  opacity: 1;
  transform: scale(1.1);
  outline-width: 2px;
  outline-color: var(--gold);
}

.header.is-scrolled .lang__flag {
  outline-color: rgb(0 0 0 / 0.18);
}

.header.is-scrolled .lang__item[data-active="true"] .lang__flag {
  outline-color: var(--gold-deep);
}

/* ------------------------------------------------------ nút hamburger */

.header__toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  /* Căn phải sát mép container: bù phần đệm trong của nút. */
  margin-right: -0.5rem;
  padding: 0.6875rem 0.5rem;
  flex-direction: column;
  justify-content: space-between;
}

.header__toggle-bar {
  display: block;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

/* Hai vạch chụm lại thành dấu X khi menu mở. */
.header__toggle[aria-expanded="true"] .header__toggle-bar:first-child {
  transform: translateY(0.5rem) rotate(45deg);
}

.header__toggle[aria-expanded="true"] .header__toggle-bar:last-child {
  transform: translateY(-0.5rem) rotate(-45deg);
}

/* ---------------------------------------------------------- mobile */

@media (max-width: 40em) {
  .header__toggle {
    display: flex;
  }

  .header__panel {
    position: fixed;
    inset: var(--header-height) 0 0;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-12);
    background: var(--ink-900);
    color: var(--white);
    /* Ẩn bằng visibility chứ không phải display:none để còn chuyển động được,
       và để phần tử bên trong không nhận được tab khi đang đóng. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.75rem);
    transition: opacity var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out),
      visibility var(--dur-fast);
  }

  .header__panel.is-open {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .header__nav {
    flex-direction: column;
    gap: var(--sp-8);
  }

  .header__nav a {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: 1.75rem;
    letter-spacing: -0.01em;
  }

  /* Trong panel tối, chữ luôn sáng dù header phía trên đã đổi sang nền sáng. */
  .header.is-scrolled .header__panel {
    color: var(--white);
  }

  .header.is-scrolled .header__nav a::after {
    background: var(--gold);
  }

  .header.is-scrolled .lang__flag {
    outline-color: rgb(255 255 255 / 0.25);
  }

  .header.is-scrolled .lang__item[data-active="true"] .lang__flag {
    outline-color: var(--gold);
  }

  /* Trong panel mở rộng, cờ để to hơn cho dễ nhắm. */
  .lang {
    gap: var(--sp-3);
  }

  .lang__flag {
    width: 2.25rem;
    height: 1.5rem;
  }
}