/* ==========================================================================
   Thanh Hiếu — MC · Speaker · Ironman
   Tokens + base
   ========================================================================== */

:root {
  --bg: #0A0A0A;
  --surface: #141414;
  --ink: #F5F5F5;
  --ink-dim: #8A8A8A;
  --volt: #C8FF00;
  --line: #262626;

  --font-display: "Anton", "Arial Narrow", sans-serif;
  --font-body: "Be Vietnam Pro", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace;

  --header-h: 64px;
  --pad-x: clamp(20px, 5vw, 72px);
  --section-gap: clamp(88px, 12vw, 160px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto là bắt buộc khi thẻ <img> có thuộc tính width/height (thêm vào để
   trình duyệt giữ chỗ, tránh giật layout): nếu thiếu, chiều cao trong HTML sẽ
   thắng aspect-ratio của CSS và ảnh bị kéo sai tỷ lệ. Các rule đặt height:100%
   theo class vẫn thắng dòng này nên không ảnh hưởng. */
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  /* Anton: chữ hoa thường cao 0.86em, nhưng chữ có dấu 2 tầng (Ế Ộ Ự Ữ) cao 1.08em.
     Mũ của dòng dưới đâm lên dòng trên nếu line-height <= 1.08 — "THANH/HIẾU" đọc
     thành "THẠNH". Cần >= 1.25 mới có khoảng thở thật sự. Đừng siết xuống nữa. */
  line-height: 1.26;
}

::selection { background: var(--volt); color: #0A0A0A; }

:focus-visible { outline: 2px solid var(--volt); outline-offset: 3px; }

/* --- KM marker: race-course milestone, the page's structural signature --- */
.km-marker {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  color: var(--ink-dim);
}
.km-marker .km-num {
  color: #0A0A0A;
  background: var(--volt);
  padding: 3px 10px;
  font-weight: 700;
}
.km-marker .km-label { color: var(--ink); }

/* --- image fallback (shown until real photo is dropped in) --- */
.img-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  min-height: 240px;
  background:
    repeating-linear-gradient(-45deg, transparent 0 22px, rgba(200, 255, 0, 0.04) 22px 44px),
    linear-gradient(160deg, #161616, #0d0d0d);
  border: 1px dashed rgba(200, 255, 0, 0.35);
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 16px;
}
.img-fallback strong { color: var(--volt); font-weight: 400; }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 28px;
  height: var(--header-h);
  padding: 0 var(--pad-x);
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

.logo {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--volt);
  letter-spacing: 0.04em;
}

.site-nav {
  display: flex;
  gap: 24px;
  margin-left: auto;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.site-nav a {
  position: relative;
  padding: 4px 0;
  color: var(--ink-dim);
  transition: color 0.2s;
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 2px;
  background: var(--volt);
  transition: right 0.25s ease;
}
.site-nav a:hover, .site-nav a.is-active { color: var(--ink); }
.site-nav a:hover::after, .site-nav a.is-active::after { right: 0; }

.site-nav .nav-cta {
  color: var(--volt);
  border: 1px solid var(--volt);
  padding: 4px 14px;
}
.site-nav .nav-cta:hover { background: var(--volt); color: #0A0A0A; }
.site-nav .nav-cta::after { display: none; }
.site-nav .nav-cta.is-active { color: var(--volt); } /* CTA không bị is-active làm nhạt đi */

.lang-switch {
  display: flex;
  border: 1px solid var(--line);
}
.lang-btn {
  background: none;
  border: 0;
  color: var(--ink-dim);
  font: 700 0.75rem var(--font-mono);
  letter-spacing: 0.1em;
  padding: 6px 10px;
  cursor: pointer;
}
.lang-btn.is-active { background: var(--volt); color: #0A0A0A; }

/* ==========================================================================
   Hero — KM 00
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden; /* parallax dịch ảnh xuống — không cho tràn sang mục dưới */
}

.hero-img,
.hero .img-fallback {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ảnh dọc trên màn ngang: chỉ số này quyết định đầu nhân vật nằm ở đâu.
     Càng lớn thì khung càng trượt xuống và người càng bị đẩy lên — 62% làm
     đầu chui vào sau header. 50% giữ đầu cách header >= ~150px ở mọi khổ
     màn hình desktop thông dụng (1280–1920 rộng, 800–1100 cao). */
  object-position: 50% 50%;
  will-change: transform;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Một vệt tối DUY NHẤT toả từ góc dưới-trái — nơi đặt tên và phụ đề.
     Trước đây dùng 2 lớp (một chéo 102deg + một dọc đậm ở cả trên lẫn dưới):
     mắt thấy tối → sáng → tối cộng một đường biên chéo, ra thành vệt loang.
     Radial nhiều chặng thì chuyển màu liền, không có cạnh, và nhạt dần đúng
     về phía phải nơi có nhân vật và cổng hoa.
     Tâm đặt ở giữa mép trái (0% 55%) chứ không phải góc dưới — neo ở góc thì
     phần trên khối tên nằm ngoài tầm với, chữ trắng trôi trên nền trời sáng. */
  background:
    radial-gradient(72% 95% at 0% 55%,
      rgba(10,10,10,0.90) 0%,
      rgba(10,10,10,0.87) 12%,
      rgba(10,10,10,0.82) 22%,
      rgba(10,10,10,0.76) 31%,
      rgba(10,10,10,0.68) 40%,
      rgba(10,10,10,0.58) 49%,
      rgba(10,10,10,0.47) 58%,
      rgba(10,10,10,0.35) 67%,
      rgba(10,10,10,0.23) 76%,
      rgba(10,10,10,0.13) 85%,
      rgba(10,10,10,0.05) 93%,
      rgba(10,10,10,0) 100%),
    /* gờ tối mỏng sát đáy, giữ chân khối chữ */
    linear-gradient(to top,
      rgba(10,10,10,0.62) 0%,
      rgba(10,10,10,0.56) 10%,
      rgba(10,10,10,0.45) 20%,
      rgba(10,10,10,0.32) 30%,
      rgba(10,10,10,0.20) 41%,
      rgba(10,10,10,0.11) 52%,
      rgba(10,10,10,0.04) 63%,
      rgba(10,10,10,0) 74%);
}

.hero-content {
  /* padding-top phải chừa đủ chỗ cho header: khối chữ căn đáy, nên trên màn
     thấp nó đội lên và dòng "KM 00" chui vào sau thanh header nếu không chừa. */
  padding:
    calc(var(--header-h) + clamp(12px, 3vh, 32px))
    var(--pad-x)
    clamp(64px, 9vh, 130px);
  width: 100%;
}

.hero-name {
  /* poster crop: the name is bigger than the frame wants to allow */
  /* chặn theo cả chiều cao màn hình (22vh), nếu không trên laptop màn thấp
     tên sẽ cao hơn cả khung hero và đẩy mọi thứ khác ra ngoài */
  font-size: clamp(3.2rem, min(15vw, 22vh), 13rem);
  line-height: 1.3; /* cỡ càng lớn dấu càng lấn — xem ghi chú line-height ở h1,h2,h3 */
  letter-spacing: 0.01em;
  margin: 18px 0 10px -0.04em;
  /* bóng đôi: một lớp sát nét để tách chữ khỏi nền, một lớp toả rộng để
     nâng cả khối chữ lên khỏi vùng ảnh sáng */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.40), 0 10px 34px rgba(0, 0, 0, 0.55);
}

.hero-roles {
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  letter-spacing: 0.32em;
  color: var(--volt);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.hero-roles .dot { color: var(--ink-dim); }

.hero-sub {
  margin-top: 14px;
  max-width: 34ch;
  color: #ECECEC;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 4px 18px rgba(0, 0, 0, 0.5);
}

.scroll-cue {
  position: absolute;
  right: var(--pad-x);
  bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  color: var(--ink-dim);
  writing-mode: vertical-rl;
}
.scroll-cue-line {
  width: 1px;
  height: 44px;
  background: var(--volt);
  animation: cue-pulse 1.6s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue-pulse {
  0%, 100% { transform: scaleY(0.3); opacity: 0.4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* ==========================================================================
   Marquee — start-corral banner
   ========================================================================== */

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--volt);
  color: #0A0A0A;
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 22s linear infinite;
}

.marquee-group {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 3vw, 1.9rem);
  text-transform: uppercase;
  padding: 12px 0;
}
.marquee-group span { padding: 0 28px; }
.marquee-group i { font-style: normal; font-size: 0.8em; }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ==========================================================================
   Sections shared
   ========================================================================== */

.section {
  padding: var(--section-gap) var(--pad-x) 0;
  max-width: 1280px;
  margin: 0 auto;
}

.section-title {
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  margin: 20px 0 26px;
  max-width: 16ch;
}

/* --- scroll reveal --- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   About — KM 05
   ========================================================================== */

.about {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) 7fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.about-media { position: relative; }
.about-media img,
.about-media .img-fallback {
  aspect-ratio: 3 / 4;
  width: 100%;
  object-fit: cover;
  filter: grayscale(20%) contrast(1.05);
}
.about-media::after {
  /* volt offset frame */
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid var(--volt);
  z-index: -1;
}

.about-body p + p { margin-top: 1em; }
.about-body { color: var(--ink-dim); }
.about-body .section-title { color: var(--ink); }

.pull-quote {
  margin-top: 36px;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.4vw, 2.4rem);
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--ink);
  border-left: 4px solid var(--volt);
  padding-left: 22px;
}

/* ==========================================================================
   Stats — KM 10
   ========================================================================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-top: 30px;
}

.stat {
  background: var(--bg);
  padding: clamp(24px, 4vw, 48px) clamp(16px, 3vw, 36px);
}

.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-num em { font-style: normal; color: var(--volt); }

.stat-label {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ==========================================================================
   Passions — KM 21
   ========================================================================== */

.passions-layout {
  display: grid;
  grid-template-columns: minmax(220px, 4fr) 7fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  margin-top: 30px;
}

.passions-photo img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.passion-list { list-style: none; border-top: 1px solid var(--line); }

.passion {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 18px;
  align-items: start;
  padding: clamp(18px, 2.6vw, 26px) 0;
  border-bottom: 1px solid var(--line);
}

.passion-idx {
  font-family: var(--font-display);
  font-size: 1.7rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--volt);
}

.passion h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-bottom: 6px; }
.passion p { color: var(--ink-dim); font-size: 0.94rem; }

.passions-strip { margin-top: clamp(20px, 3vw, 30px); }
.passions-strip img {
  width: 100%;
  aspect-ratio: 16 / 6;
  object-fit: cover;
  object-position: 50% 42%;
}

/* ==========================================================================
   Gallery — KM 30
   ========================================================================== */

.gallery-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
  margin-top: 30px;
}
.gallery-pair .gallery-item { aspect-ratio: 3 / 2; }

.gallery-item {
  position: relative;
  border: 0;
  padding: 0;
  background: var(--surface);
  cursor: pointer;
  overflow: hidden;
}
.gallery-item img,
.gallery-item .img-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.3s;
  min-height: 0;
}
.gallery-item:hover img { transform: scale(1.05); filter: brightness(1.08); }

/* ==========================================================================
   Services — KM 35
   ========================================================================== */

.services-list { margin-top: 30px; border-top: 1px solid var(--line); }

.service {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 24px;
  align-items: start;
  padding: clamp(24px, 4vw, 40px) 0;
  border-bottom: 1px solid var(--line);
  transition: border-color 0.25s;
}
.service:hover { border-bottom-color: var(--volt); }

.service-idx {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  color: transparent;
  -webkit-text-stroke: 1px var(--volt);
  line-height: 1;
}

.service h3 { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin-bottom: 8px; }
.service p { color: var(--ink-dim); max-width: 62ch; }

/* ==========================================================================
   Contact — KM 42 (finish line)
   ========================================================================== */

.contact { text-align: center; padding-bottom: var(--section-gap); }
.contact .km-marker { justify-content: center; }

.contact-cta {
  font-size: clamp(2.3rem, 7.2vw, 5.4rem);
  margin: 24px auto 16px;
  max-width: 18ch;
  text-wrap: balance;
}
/* "bùng nổ?" luôn đi cùng nhau — tránh chữ "NỔ?" rơi trơ trọi một dòng */
.contact-cta .volt { color: var(--volt); white-space: nowrap; }

.contact-sub { color: var(--ink-dim); }

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 36px;
}

.contact-btn {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  padding: 14px 30px;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.contact-btn:hover {
  background: var(--volt);
  border-color: var(--volt);
  color: #0A0A0A;
}

.contact-social { margin-top: 32px; }
.contact-social a {
  color: var(--ink-dim);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s, border-color 0.2s;
}
.contact-social a:hover { color: var(--volt); border-color: var(--volt); }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 26px var(--pad-x);
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: 0.82rem;
}
.site-footer .footer-tag { font-family: var(--font-mono); letter-spacing: 0.08em; }

/* ==========================================================================
   Lightbox
   ========================================================================== */

.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 1100px);
  max-height: 90vh;
}
.lightbox::backdrop { background: rgba(0, 0, 0, 0.88); }

.lightbox-img {
  max-width: 100%;
  max-height: 86vh;
  object-fit: contain;
  border: 1px solid var(--line);
}

.lightbox-close {
  position: fixed;
  top: 14px;
  right: 20px;
  background: none;
  border: 0;
  color: var(--ink);
  font-size: 2.4rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox-close:hover { color: var(--volt); }

/* ==========================================================================
   Phone modal — desktop fallback for the call button
   ========================================================================== */

.phone-modal {
  /* dead-center of the viewport, whatever the scroll position */
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(92vw, 460px);
  height: fit-content;
  border: 1px solid var(--volt);
  background: var(--surface);
  color: var(--ink);
  padding: clamp(28px, 5vw, 48px) clamp(24px, 5vw, 56px);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.phone-modal::backdrop { background: rgba(0, 0, 0, 0.85); }

.phone-modal[open] { animation: modal-pop 0.22s ease; }
@keyframes modal-pop {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.phone-modal-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.phone-modal-number {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  color: var(--volt);
  margin: 14px 0 24px;
  user-select: all; /* one click selects the whole number */
}

.phone-modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ==========================================================================
   Responsive + reduced motion
   ========================================================================== */

@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .passions-layout { grid-template-columns: 1fr; }
  .passions-photo { max-width: 420px; }
}

@media (max-width: 700px) {
  .gallery-pair { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  /* Giữ lại đúng nút Booking trên mobile — ẩn hết thì mất luôn CTA quan trọng nhất */
  .site-nav { gap: 0; margin-left: auto; }
  .site-nav a:not(.nav-cta) { display: none; }
  .site-header { gap: 12px; }
  .lang-switch { margin-left: 12px; }

  /* Trên máy dọc, ảnh tràn ngang: object-position X nhỏ = đẩy nhân vật sang phải,
     nhường nửa trái cho khối tên. (75% cũ đang kéo anh về giữa, đúng ngược ý định.) */
  .hero-img,
  .hero .img-fallback { object-position: 34% 50%; }

  /* 0.32em làm "IRONMAN" rơi xuống dòng riêng, bỏ lại dấu · lơ lửng cuối dòng */
  .hero-roles { letter-spacing: 0.16em; }

  .about { grid-template-columns: 1fr; }
  .about-media { max-width: 420px; }
  .about-media::after { inset: 12px -12px -12px 12px; }
}

/* JS tắt/lỗi => .reveal kẹt ở opacity:0 và cả trang trắng. Hiện nội dung ra. */
@media (scripting: none) {
  .reveal { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track { animation: none; }
  .scroll-cue-line { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .phone-modal[open] { animation: none; }
}