/* ==========================================================================
   Cam Xa Academy - Custom CSS Style Sheet
   Cloned and expanded from user uploaded template styling.
   ========================================================================== */

/* ─── DESIGN TOKENS (NEO-LUXURY HOROLOGY) ──────────────── */
:root {
  /* Tinted shadows matching background */
  --shadow-light: 0 12px 32px rgba(122, 108, 94, 0.08), 0 4px 12px rgba(122, 108, 94, 0.04);
  --shadow-dark: 0 12px 32px rgba(17, 17, 17, 0.25), 0 4px 12px rgba(17, 17, 17, 0.15);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --bg: #F7F4EF; /* Cream warm background */
  --text: #111111; /* Luxury charcoal text */
  --muted: #7A6C5E; /* Warm bronze-gray muted text */
  --accent: #C8A45A; /* Terracotta accent color */
  --accent-hover: #A07830; /* Darker terracotta for hover */
  --border: rgba(17, 17, 17, 0.12); /* Thin technical separator */
  --border-light: rgba(17, 17, 17, 0.06);
}

/* ─── RESET & BASE ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter Tight', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ─── TYPOGRAPHY ────────────────────────────────────────── */
.t-display {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.8rem, 7.5vw, 6.2rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.t-h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.4rem, 4.5vw, 4.2rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.015em;
}
.t-h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.9rem, 3vw, 2.9rem);
  font-weight: 600;
  line-height: 1.15;
}
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.t-display em, .t-h1 em, .t-h2 em {
  color: var(--accent);
  font-style: italic;
}
.t-label {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ─── LAYOUT HELPERS ──────────────────────────────────── */
.px-site { padding-left: clamp(1.25rem, 5vw, 5rem); padding-right: clamp(1.25rem, 5vw, 5rem); }
.py-section { padding-top: clamp(4rem, 8vw, 8rem); padding-bottom: clamp(4rem, 8vw, 8rem); }
.max-site { max-width: 1280px; margin-left: auto; margin-right: auto; }
.divider { width: 36px; height: 1px; background: var(--accent); flex-shrink: 0; }

/* ─── NAVIGATION ──────────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.45s ease, border-color 0.45s ease, backdrop-filter 0.45s ease;
}
#nav.scrolled {
  background: rgba(247, 244, 239,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(17, 17, 17,0.14);
}
#nav.nav-dark-bg:not(.scrolled) .t-label,
#nav.nav-dark-bg:not(.scrolled) .btn-underline {
  color: rgba(247, 244, 239, 0.7) !important;
}
#nav.nav-dark-bg:not(.scrolled) .t-label:hover,
#nav.nav-dark-bg:not(.scrolled) .btn-underline:hover {
  color: var(--bg) !important;
}
#nav.nav-dark-bg:not(.scrolled) .btn-underline::after {
  background-color: var(--bg) !important;
}
#nav.nav-dark-bg:not(.scrolled) .btn-underline::before {
  background-color: var(--accent) !important;
}
#nav.nav-dark-bg:not(.scrolled) .font-serif.text-char {
  color: var(--bg) !important;
}
#nav.nav-dark-bg:not(.scrolled) .text-stone {
  color: rgba(247, 244, 239, 0.5) !important;
}
#nav.nav-dark-bg:not(.scrolled) #hbg span {
  background-color: var(--bg) !important;
}
#nav.nav-dark-bg:not(.scrolled) .btn-dark {
  background: transparent !important;
  color: var(--bg) !important;
  border-color: rgba(247, 244, 239, 0.3) !important;
}
#nav.nav-dark-bg:not(.scrolled) .btn-dark:hover {
  background: rgba(247, 244, 239, 0.08) !important;
  border-color: rgba(247, 244, 239, 0.6) !important;
}

/* ─── ANIMATIONS ──────────────────────────────────────── */
.anim { opacity: 0; transition: opacity 0.75s ease, transform 0.75s ease; }
.anim-up  { transform: translateY(28px); }
.anim-in  { }
.anim.show { opacity: 1; transform: none; }

.d1 { transition-delay: 0.05s; }
.d2 { transition-delay: 0.15s; }
.d3 { transition-delay: 0.25s; }
.d4 { transition-delay: 0.35s; }
.d5 { transition-delay: 0.45s; }

/* ─── PHOTO PLACEHOLDERS ─────────────────────────────── */
.ph {
  background: linear-gradient(145deg, #D4B896 0%, #A8784E 45%, #6B4A2C 100%);
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.ph:hover {
  transform: scale(1.04);
}
.ph::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(17, 17, 17,.45) 0%, transparent 55%);
}
.ph-label {
  position: relative; z-index: 1;
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,.55);
  padding: 1rem 1.25rem;
}
.ph-sm {
  background: linear-gradient(135deg, #C9A880 0%, #8B6040 100%);
  border-radius: 50%;
}

/* ─── BUTTONS ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.09em; text-transform: uppercase;
  text-decoration: none; padding: .85rem 1.8rem;
  transition: all .3s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap; cursor: pointer;
  border-radius: 2px;
}
.btn-dark  { background: var(--text); color: var(--bg); border: 1px solid var(--text); }
.btn-dark:hover { background: var(--accent); border-color: var(--accent); color: var(--text); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--text); color: var(--bg); border-color: var(--text); transform: translateY(-2px); }
.btn-gold  { background: var(--accent); color: var(--text); border: 1px solid var(--accent); }
.btn-gold:hover { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-2px); }
.btn-ghost-light { background: transparent; color: var(--bg); border: 1px solid rgba(247, 244, 239,.3); }
.btn-ghost-light:hover { background: rgba(247, 244, 239,.08); border-color: rgba(247, 244, 239,.6); }

/* Double sliding underline effect from Singer Reimagined */
.btn-underline {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--text);
  position: relative;
  padding-bottom: 4px;
  cursor: pointer;
  display: inline-block;
  transition: color 0.3s ease;
}
.btn-underline::before, .btn-underline::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 100%;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.btn-underline::after {
  background-color: var(--text);
  transform: scaleX(1);
  transform-origin: right;
  transition-delay: 0s;
}
.btn-underline::before {
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition-delay: 0.1s;
}
.btn-underline:hover {
  color: var(--accent);
}
.btn-underline:hover::after {
  transform: scaleX(0);
  transform-origin: right;
  transition-delay: 0s;
}
.btn-underline:hover::before {
  transform: scaleX(1);
  transform-origin: left;
  transition-delay: 0.1s;
}

/* ─── TIER CARDS ─────────────────────────────────────── */
.tier-card {
  border: 1px solid rgba(17, 17, 17,.18);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.tier-card:hover { transform: translateY(-5px); box-shadow: 0 24px 48px rgba(17, 17, 17,.08); }
.tier-card-featured {
  background: var(--text); color: var(--bg);
  border-color: var(--accent);
}
.tier-card-featured:hover { box-shadow: 0 28px 60px rgba(17, 17, 17,.22); border-color: var(--accent); }

/* ─── MOBILE MENU ────────────────────────────────────── */
#mob-menu {
  position: fixed; inset: 0; background: var(--bg); z-index: 95;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transform: translateX(100%);
  transition: transform .45s cubic-bezier(.76,0,.24,1);
}
#mob-menu.open { transform: translateX(0); }

/* ─── SCROLL INDICATOR ───────────────────────────────── */
@keyframes dot-drop { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(11px);opacity:0} }
.scroll-indicator-container {
  position: absolute;
  bottom: 2.5rem;
  left: clamp(1.25rem, 5vw, 5rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 30;
  pointer-events: none;
}
.scroll-dot { width:4px; height:4px; border-radius:50%; background:var(--accent); animation:dot-drop 1.6s ease infinite; }

/* ─── STAT NUMBERS ───────────────────────────────────── */
.stat-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  font-weight: 300; line-height: 1; color: var(--accent);
}

/* ─── TIER MOBILE SCROLL ─────────────────────────────── */
.tier-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tier-scroll::-webkit-scrollbar { display: none; }

/* ─── FORM INPUTS ────────────────────────────────────── */
.form-inp {
  width: 100%; padding: .85rem 1rem;
  background: transparent;
  border: 1px solid rgba(247, 244, 239,.22);
  color: var(--bg); font-family: 'Inter Tight', sans-serif; font-size: .875rem;
  outline: none; transition: border-color .3s;
}
.form-inp::placeholder { color: rgba(247, 244, 239,.38); }
.form-inp:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(200, 164, 90, 0.25); outline: none; }

/* ─── PAIN ROWS ──────────────────────────────────────── */
.pain-row { border-top: 1px solid rgba(17, 17, 17,.2); padding: 1.4rem 0; transition: border-color .3s; }
.pain-row:hover { border-top-color: var(--accent); }

/* ─── COUNTRY ROWS ───────────────────────────────────── */
.country-row { border-left: 2px solid rgba(247, 244, 239,.12); padding-left: 1.2rem; transition: border-color .3s; }
.country-row:hover { border-left-color: var(--accent); }

/* ─── TESTIMONIAL ────────────────────────────────────── */
.test-card { border: 1px solid rgba(17, 17, 17,.15); transition: border-color .3s; }
.test-card:hover { border-color: rgba(17, 17, 17,.4); }


/* ==========================================================================
   NEW INTEGRATIONS (CALCULATOR, QUIZ, CHECKOUT MODAL)
   ========================================================================== */

/* ─── QUIZ WIDGET STYLING ───────────────────────────────── */
.quiz-question {
  display: none;
}
.quiz-question.active {
  display: block;
  animation: quizFadeIn 0.4s ease;
}
@keyframes quizFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.quiz-ans-btn-dark {
  width: 100%;
  text-align: left;
  padding: .75rem 1rem;
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.8rem;
  color: rgba(247, 244, 239,.75);
  background: rgba(247, 244, 239,.03);
  border: 1px solid rgba(247, 244, 239,.12);
  cursor: pointer;
  transition: all .3s;
}
.quiz-ans-btn-dark:hover {
  background: rgba(200, 164, 90,.1);
  border-color: var(--accent);
  color: var(--bg);
  transform: translateX(4px);
}

.quiz-ans-btn-light {
  width: 100%;
  text-align: left;
  padding: .75rem 1rem;
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.8rem;
  color: var(--text);
  background: rgba(17, 17, 17, .02);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .3s;
}
.quiz-ans-btn-light:hover {
  background: rgba(200, 164, 90, .15);
  border-color: var(--accent);
  color: var(--text);
  transform: translateX(4px);
}

/* ─── CHECKOUT MODAL ────────────────────────────────────── */
.payment-modal {
  position: fixed; inset: 0; z-index: 1000;
  background-color: rgba(17, 17, 17, 0.7);
  backdrop-filter: blur(8px);
  display: none;
  align-items: center; justify-content: center;
  padding: 1.5rem;
}
.payment-modal.active {
  display: flex;
}
.modal-content {
  background-color: var(--bg);
  border: 1px solid rgba(17, 17, 17,.3);
  width: 100%; max-width: 480px;
  padding: 2.5rem 2rem;
  position: relative;
  box-shadow: 0 32px 64px rgba(17, 17, 17,.25);
  animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
.modal-close {
  position: absolute; top: 1rem; right: 1.25rem;
  background: transparent; border: none;
  font-size: 1.5rem; cursor: pointer;
  color: #9A8C7E; transition: color .3s;
}
.modal-close:hover {
  color: var(--text);
}

.spinner {
  border-top-color: var(--accent);
}

/* ─── CERTIFICATE LIGHTBOX MODAL ───────────────────────── */
.cert-lightbox {
  position: fixed;
  inset: 0;
  background-color: rgba(17, 17, 17, 0.95);
  backdrop-filter: blur(12px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 1.5rem;
}
.cert-lightbox.active {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 2rem;
  background: transparent;
  border: none;
  font-size: 2.5rem;
  color: var(--bg);
  cursor: pointer;
  transition: color 0.3s, transform 0.3s;
  z-index: 2010;
}
.lightbox-close:hover {
  color: var(--accent);
  transform: scale(1.1);
}
.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: lightboxZoom 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes lightboxZoom {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}
.lightbox-content img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border: 1px solid rgba(247, 244, 239,0.1);
  box-shadow: 0 32px 64px rgba(0,0,0,0.5);
}
.lightbox-caption {
  margin-top: 1rem;
  background-color: rgba(17, 17, 17, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(247, 244, 239,0.15);
  color: var(--bg);
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.6rem 1.5rem;
  text-align: center;
}

/* ─── ROUNDED CORNERS — Design System ─────────────────────────────────── */

/* ① Cards & blocks */
.tier-card,
.syllabus-tier-block,
.test-card {
  border-radius: 2px;
}

/* ② Dark panels (div/button — không áp cho section full-width) */
div.bg-char,
button.bg-char,
[class*="bg-char"][class*="p-6"],
[class*="bg-char"][class*="p-8"],
[class*="bg-char"][class*="p-12"],
[class*="bg-char"][class*="px-6"],
#credential-card {
  border-radius: 2px;
}

/* ③ Panel nền trắng kem */
.bg-warm-white {
  border-radius: 2px;
}

/* ④ Photo frame & collage wrappers */
.ph,
[class*="aspect-"][class*="border"] {
  border-radius: 2px;
  overflow: hidden;
}

/* ⑤ Authority bar stats — mỗi stat item */
[class*="divide-x"] > div,
[class*="gap-8"] > [class*="text-center"] {
  border-radius: 2px;
}

/* ⑥ Research journey rows */
[class*="border-l-"][class*="pl-"] {
  border-radius: 2px;
}

/* ⑦ Inputs, selects, textareas */
input, select, textarea {
  border-radius: 2px !important;
}

/* ⑧ Lightbox */
.lightbox-content {
  border-radius: 2px;
  overflow: hidden;
}

/* ⑨ Lightbox caption bar */
.lightbox-caption {
  border-radius: 0 0 12px 12px;
}

/* ⑩ Payment / Modal overlays */
#payment-modal > div,
#cert-modal > div {
  border-radius: 2px;
  overflow: hidden;
}

/* ⑪ Badge & label chips */
[class*="absolute"][class*="-top-"] > span,
[class*="t-label"][class*="bg-"],
.badge-chip {
  border-radius: 2px;
}

/* ⑫ Mobile menu */
#mob-menu {
  border-radius: 0; /* giữ full-screen */
}

/* ⑬ Coaching 1:1 banner & CTA bars */
[class*="bg-char"][class*="border"][class*="border-gold"] {
  border-radius: 2px;
}

/* ⑭ Ebook book cover mockup */
[class*="book-cover"],
[class*="ebook-cover"] {
  border-radius: 2px;
}
/* ─────────────────────────────────────────────────────────────────────── */


/* ─── TESTIMONIAL INFINITE SCROLL ─────────────────────── */
.test-scroll-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  animation: testScrollUp 38s linear infinite;
  will-change: transform;
}
.test-scroll-reverse {
  animation: testScrollDown 32s linear infinite;
}
.test-scroll-slow {
  animation: testScrollUp 48s linear infinite;
}
.test-scroll-col:hover,
.test-scroll-reverse:hover,
.test-scroll-slow:hover {
  animation-play-state: paused;
}
.test-scroll-card {
  border-radius: 2px;
  flex-shrink: 0;
  transition: box-shadow .3s ease, transform .3s ease;
}
.test-scroll-card:hover {
  box-shadow: 0 12px 32px rgba(17, 17, 17,.08);
  transform: translateY(-2px);
}
@keyframes testScrollUp {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes testScrollDown {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}
/* ─────────────────────────────────────────────────────── */

/* ─── METHODOLOGY 2-COLUMN IMAGE SCROLL ────────────────── */
.meth-scroll-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: methScrollUp 42s linear infinite;
  will-change: transform;
}
.meth-scroll-reverse {
  animation: methScrollDown 38s linear infinite;
}
.meth-scroll-col:hover,
.meth-scroll-reverse:hover {
  animation-play-state: paused;
}
@keyframes methScrollUp {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}
@keyframes methScrollDown {
  0%   { transform: translateY(-50%); }
  100% { transform: translateY(0); }
}
/* ─────────────────────────────────────────────────────── */

/* ─── BRAND MINIMAL SEPIA FILTER ──────────────────────── */
.brand-sepia-img {
  filter: sepia(35%) saturate(95%) brightness(97%) contrast(102%);
  transition: filter 0.3s ease, transform 0.3s ease;
  transform: scale(1.08); /* Phóng to 8% để ẩn hoàn toàn viền trắng ở mép ảnh gốc */
}
.brand-sepia-img:hover {
  filter: sepia(20%) saturate(110%) brightness(100%) contrast(104%);
  transform: scale(1.12); /* Hiệu ứng zoom nhẹ sang trọng khi hover */
}
/* ─────────────────────────────────────────────────────── */


/* ─── KNOWLEDGE LIBRARY SLIDER ────────────────────────── */
#lib-slider::-webkit-scrollbar {
  display: none;
}
/* ─────────────────────────────────────────────────────── */

/* ─── DYNAMIC COURSE ROADMAP (Pill style) ────────────── */
.roadmap-pill-btn {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: rgba(17, 17, 17, 0.4);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  z-index: 10;
}

.roadmap-pill-btn:hover,
.roadmap-pill-btn.active {
  border-color: var(--accent);
  background: rgba(200, 164, 90, 0.08);
  box-shadow: 0 0 20px rgba(200, 164, 90, 0.2);
  transform: translateX(6px);
}

.roadmap-pill-btn.active {
  animation: pulse-pill-gold 2s infinite alternate;
}

@keyframes pulse-pill-gold {
  0% {
    box-shadow: 0 0 12px rgba(200, 164, 90, 0.15);
    border-color: rgba(200, 164, 90, 0.5);
  }
  100% {
    box-shadow: 0 0 24px rgba(200, 164, 90, 0.35);
    border-color: var(--accent);
  }
}

.roadmap-pill-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: var(--text);
  color: rgba(247, 244, 239, 0.75);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  flex-shrink: 0;
  z-index: 20;
}

.roadmap-pill-btn:hover .roadmap-pill-circle,
.roadmap-pill-btn.active .roadmap-pill-circle {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--text);
  box-shadow: 0 0 12px rgba(200, 164, 90, 0.5);
  transform: scale(1.08);
}

.roadmap-pill-name {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.85);
  transition: color 0.3s;
}

.roadmap-pill-btn:hover .roadmap-pill-name,
.roadmap-pill-btn.active .roadmap-pill-name {
  color: var(--bg);
}

.roadmap-pill-tag {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(200, 164, 90, 0.12);
  border: 1px solid rgba(200, 164, 90, 0.2);
  padding: 0.15rem 0.55rem;
  border-radius: 9999px;
  transition: all 0.3s;
  flex-shrink: 0;
}

.roadmap-pill-btn:hover .roadmap-pill-tag,
.roadmap-pill-btn.active .roadmap-pill-tag {
  background: var(--accent);
  color: var(--text);
  border-color: var(--accent);
}

@media (max-width: 1023px) {
  #hero {
    min-height: auto !important;
  }
}
/* ─────────────────────────────────────────────────────── */

/* ─── ACCORDION FAQ SECTION ───────────────────────────── */
.faq-container {
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 1.75rem 0;
  transition: border-color 0.3s;
}
.faq-item:first-child {
  border-top: 1px solid var(--border);
}
.faq-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.faq-question {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--text);
  transition: color 0.3s;
  line-height: 1.3;
}
.faq-trigger:hover .faq-question,
.faq-item.active .faq-question {
  color: var(--accent);
}
.faq-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: 1.5rem;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  background-color: var(--text);
  transition: transform 0.3s, background-color 0.3s;
}
/* Horizontal line */
.faq-icon::before {
  top: 7px;
  left: 0;
  width: 16px;
  height: 2px;
}
/* Vertical line */
.faq-icon::after {
  top: 0;
  left: 7px;
  width: 2px;
  height: 16px;
}
.faq-trigger:hover .faq-icon::before,
.faq-trigger:hover .faq-icon::after,
.faq-item.active .faq-icon::before,
.faq-item.active .faq-icon::after {
  background-color: var(--accent);
}
.faq-item.active .faq-icon::after {
  transform: rotate(90deg) scaleY(0);
}
.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding-top 0.4s ease;
}
.faq-item.active .faq-content {
  max-height: 600px;
  padding-top: 1.25rem;
}
.faq-answer {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--muted);
}
.faq-answer strong {
  color: var(--text);
}



.btn:active, .btn-primary:active, .btn-secondary:active, .btn-gold:active, .btn-dark:active, .btn-ghost:active, .btn-home:active {
  transform: scale(0.97) translateY(0) !important;
}

/* Hiển thị text hành trình lịch sử khi click/tap trên thiết bị di động */
.active-milestone .opacity-0 {
  opacity: 1 !important;
}
.active-milestone .max-w-0 {
  max-width: 300px !important;
  margin-left: 8px !important;
}
.active-milestone .max-h-0 {
  max-height: 160px !important;
  transform: translateY(0) !important;
  margin-top: 8px !important;
}