/* =====================================================================
   HỒN VIỆT — SHARED DESIGN SYSTEM (base.css)
   Palette: cam · xanh rêu · kem sen  |  Font: xem assets/css/fonts.css
   Dùng chung cho MỌI trang. Sửa biến ở :root để đổi toàn bộ theme.
   ===================================================================== */
:root {
  --cream: #fbefef;
  --cream-2: #fcf7ec;
  --green: #0F3833; /* deep pine */
  --green-2: #1A4F48;
  --moss: #7e8c4b;
  --orange: #e1714a;
  --orange-2: #ec8a5c;
  --rose: #d8988b;
  --ink: #12251e;
  --line: rgba(18, 53, 40, 0.14);

  /* Font (--display / --serif / --body / --script) nay nằm trong
     assets/css/fonts.css — sửa chữ ở đó, một chỗ cho cả site. */

  --wrap: min(92vw, 1280px);
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}

/* Smooth scrolling (Lenis) — khi bật, tắt scroll-behavior mặc định */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
body {
  margin: 0;
  background: var(--cream);
  color: var(--green);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
section {
  position: relative;
}
button {
  font-family: inherit;
}

/* ---------- Utilities ------------------------------------------------ */
.wrap {
  width: var(--wrap);
  margin: 0 auto;
}
.eyebrow {
  font-family: var(--body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
}
.display {
  font-family: var(--display);
  /* 700 vì --display nay là Fraunces (font nhiều độ đậm). Anton cũ chỉ có
     400 nên chỗ này từng ghi cứng 400 — xem chú thích ở fonts.css. */
  font-weight: 700;
  font-optical-sizing: auto;
  letter-spacing: -0.015em;
  /* ĐỪNG HẠ SỐ NÀY XUỐNG.
     Anton dựng chữ rất cao, mà tiếng Việt còn CHỒNG dấu (Ở = sừng + hỏi,
     Ệ = mũ + nặng, Ạ = chấm dưới). Mực của dấu vươn khá xa trên đỉnh chữ
     hoa và xuống dưới đường chân, nên tít nhiều dòng cần khoảng cách chân
     dòng đủ rộng thì dấu HUYỀN của dòng dưới mới không chạm dấu SẮC của
     dòng trên (đúng cảnh "MỞ KHOÁ 34 TỈNH / THÀNH").
     Đã dò từng nấc ở cỡ 110px: 1.08 và 1.16 vẫn dính, 1.18 sát rạt,
     1.22 là mức chặt nhất mà mọi dấu đều hở. Dưới 1.2 là chữ đè nhau. */
  line-height: 1.22;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.serif {
  font-family: var(--serif);
}

/* Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}
.btn-orange {
  background: var(--orange);
  color: #fff;
}
.btn-orange:hover {
  transform: translateY(-3px);
  background: var(--orange-2);
}
.btn-green {
  background: var(--green);
  color: var(--cream);
}
.btn-green:hover {
  transform: translateY(-3px);
  background: var(--green-2);
}
.btn-ghost {
  background: transparent;
  color: currentColor;
  border: 1.5px solid currentColor;
}
.btn-ghost:hover {
  transform: translateY(-3px);
}

/* ---------- NAV ------------------------------------------------------ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px min(5vw, 48px);
  color: var(--cream);
  transition:
    background 0.4s ease,
    color 0.4s ease,
    padding 0.4s ease;
}
.nav.solid {
  background: var(--cream-2);
  color: var(--green);
  padding-top: 14px;
  padding-bottom: 14px;
  box-shadow: 0 8px 30px rgba(18, 53, 40, 0.08);
}
/* Trên các trang nền sáng, nav bắt đầu ở trạng thái tối (chữ xanh) */
.nav.on-light {
  color: var(--green);
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}
.brand .logo {
  width: 34px;
  height: 34px;
}
.brand .logo path {
  fill: currentColor;
}
.brand b {
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: 0.06em;
}
.brand small {
  font-size: 11px;
  letter-spacing: 0.24em;
  opacity: 0.7;
  display: block;
  margin-top: -3px;
}
/* Menu căn GIỮA thanh nav, không phụ thuộc độ rộng logo/nút */
.menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 30px;
  font-family: var(--menu);
  /* 17px chứ không phải 15px: Fraunces có x-height thấp (43.6 ở cỡ 100px),
     đặt 15px như font menu cũ thì chữ nhỏ hẳn đi và dấu tiếng Việt bí.
     font-optical-sizing để trục opsz tự làm nét dày dặn hơn ở cỡ nhỏ. */
  font-size: 17px;
  font-optical-sizing: auto;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.menu a {
  position: relative;
  opacity: 0.92;
}
.menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0;
  background: var(--orange);
  transition: width 0.3s ease;
}
.menu a:hover::after,
.menu a.active::after {
  width: 100%;
}
.nav-cta {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff !important;
  transition:
    transform 0.25s ease,
    background 0.25s ease;
}
.nav-cta:hover {
  transform: translateY(-2px);
  background: var(--orange-2);
}

/* ---------- NÚT VỀ ĐẦU TRANG ([data-to-top], xem animations.js mục 0b) ---
   Dành cho các trang cuộn rất dài (person.html dài ~26 màn hình): cuộn tay
   ngược về đầu là không tưởng, mà kéo thanh cuộn thì Lenis chặn.
   Ẩn hẳn (không chiếm chỗ, không bắt chuột) cho tới khi cuộn quá một màn.
--------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: min(5vw, 48px);
  bottom: 28px;
  z-index: 70;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  /* Cam chứ không phải xanh rêu: nút này nổi trên CẢ hai nền nó đi qua —
     cảnh kem sáng ở trên và footer xanh đậm ở dưới. Để xanh rêu thì xuống
     tới footer là nó lẫn hẳn vào nền, chỉ còn trơ mũi tên. */
  background: var(--orange);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  box-shadow: 0 10px 30px rgba(18, 53, 40, 0.22);
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease,
    background 0.25s ease;
}
.to-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.to-top:hover {
  background: var(--orange-2);
  transform: translateY(-3px);
}
@media (prefers-reduced-motion: reduce) {
  .to-top {
    transition: none;
  }
}

@media (max-width: 880px) {
  .menu {
    display: none;
  }
}

/* ---------- MARQUEE (băng chữ chạy) ---------------------------------- */
.marquee {
  background: var(--green);
  color: var(--cream);
  padding: 10px 0;
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid rgba(251, 239, 239, 0.12);
  border-bottom: 1px solid rgba(251, 239, 239, 0.12);
}
.marquee.orange {
  background: var(--orange);
  color: var(--cream-2);
}
.marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 26px;
  will-change: transform;
}
.marquee span {
  font-family: var(--display);
  /* Nhỏ lại nhiều so với bản cũ: băng chữ là chi tiết chuyển cảnh, không phải
     tiêu đề. Cỡ nhỏ nên nới letter-spacing cho chữ in hoa dễ đọc, thoáng hơn. */
  font-size: clamp(14px, 1.5vw, 20px);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.marquee svg {
  width: 14px;
  height: 14px;
  opacity: 0.6;
  flex: none;
}
.marquee svg path {
  fill: currentColor;
}

/* ---------- FOOTER --------------------------------------------------- */
footer {
  background: var(--green);
  color: var(--cream);
  padding: 70px 0 40px;
}
.foot-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(251, 239, 239, 0.15);
}
.foot-col h4 {
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange-2);
  margin: 0 0 16px;
}
.foot-col a {
  display: block;
  margin-bottom: 10px;
  opacity: 0.82;
  font-size: 14px;
}
.foot-col a:hover {
  opacity: 1;
  color: var(--orange-2);
}
.foot-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 26px;
  font-size: 13px;
  opacity: 0.7;
}
footer .brand p {
  max-width: 280px;
  opacity: 0.75;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 18px;
}

/* ---------- Reveal defaults (GSAP animates these in) ----------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
}
[data-hero] {
  opacity: 0;
  transform: translateY(40px);
}

/* Nếu người dùng tắt hiệu ứng chuyển động: hiện luôn nội dung */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  [data-reveal],
  [data-hero] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---------- SONG NGỮ (VI / EN) ---------------------------------------
   Cách làm: CẢ HAI thứ tiếng đều nằm trong HTML, thứ đang không chọn bị
   ẩn bằng CSS theo thuộc tính data-lang trên thẻ <html>.

     <span class="lang-vi">Xin chào</span><span class="lang-en">Hello</span>

   Ngôn ngữ do assets/js/lang.js đặt (và một đoạn nhỏ trong <head> để
   trang không "nháy" tiếng Việt rồi mới đổi sang tiếng Anh).
   MUỐN THÊM TRANG SONG NGỮ: xem hướng dẫn đầu file assets/js/lang.js.
--------------------------------------------------------------------- */
html[data-lang="vi"] .lang-en,
html[data-lang="en"] .lang-vi {
  display: none;
}

/* Nút gạt VI/EN trên thanh nav. Màu ăn theo currentColor của .nav nên
   dùng được cả trên nav trong suốt (nền video tối) lẫn nav sáng. */
.langbar {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(128, 128, 128, 0.4);              /* dự phòng */
  border-color: color-mix(in srgb, currentColor 32%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  backdrop-filter: blur(6px);
}
.lang-btn {
  border: 0;
  cursor: pointer;
  background: transparent;
  color: inherit;
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 7px 14px;
  border-radius: 999px;
  opacity: 0.6;
  transition: background 0.25s ease, color 0.25s ease, opacity 0.25s ease;
}
.lang-btn:hover { opacity: 1; }
.lang-btn.active {
  /* Cam là màu nhấn duy nhất đủ tương phản trên CẢ nền tối lẫn nền kem */
  background: var(--orange);
  color: #fff;
  opacity: 1;
}