/* Header – nền tối trùng màu nền logo, đường cong bên dưới theo mockup */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--color-dark);
  color: var(--color-on-dark);
  transition: box-shadow 0.3s var(--ease);
}
.site-header::after {
  /* Đường cong trang trí dưới khối logo */
  content: ""; position: absolute; left: 0; top: 100%;
  width: min(620px, 52vw); height: 30px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 30' preserveAspectRatio='none'%3E%3Cpath d='M0 0H620C500 0 440 3 380 10C270 23 150 30 0 30Z' fill='%231e1818'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  transition: opacity 0.3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); }
.site-header.is-scrolled::after { opacity: 0; }

.site-header__inner {
  display: flex; align-items: center; gap: 24px;
  min-height: var(--header-h);
}

/* Brand */
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex: none; }
.brand__logo { width: 96px; height: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__line1 { font-weight: 800; font-size: 1.25rem; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; }
.brand__line2 { font-weight: 800; font-size: 1.75rem; letter-spacing: 0.01em; text-transform: uppercase; color: var(--color-primary); margin-top: 2px; }
.brand__tagline { font-size: 0.8125rem; color: var(--color-on-dark-muted); margin-top: 5px; }
.brand:hover { color: inherit; }

/* Menu chính */
.main-nav { margin-left: auto; }
.main-nav__list { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 30px); }
.main-nav__list a {
  position: relative; display: inline-block; padding: 8px 0;
  font-size: var(--text-nav); font-weight: 500; color: var(--color-on-dark);
  text-decoration: none; white-space: nowrap;
}
.main-nav__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--color-primary); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform 0.25s var(--ease);
}
.main-nav__list a:hover,
.main-nav__list a[aria-current="page"],
.main-nav__list a.is-active { color: var(--color-primary); }
.main-nav__list a:hover::after,
.main-nav__list a[aria-current="page"]::after,
.main-nav__list a.is-active::after { transform: scaleX(1); }
.main-nav__mobile-cta { display: none; }

/* CTA phải */
.header-cta { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
.header-cta__phones { font-size: 0.8125rem; color: var(--color-on-dark); white-space: nowrap; }
.header-cta__phones a { color: inherit; text-decoration: none; }
.header-cta__phones a:hover { color: var(--color-primary); }

/* Nút hamburger */
.nav-toggle {
  display: none; width: 44px; height: 44px; border-radius: var(--radius-sm);
  align-items: center; justify-content: center; color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.nav-toggle .icon { width: 24px; height: 24px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* Trang chủ: khi đang ở một section, bỏ tô "Trang chủ" */
.main-nav__list a.is-muted { color: var(--color-on-dark); }
.main-nav__list a.is-muted::after { transform: scaleX(0); }