/* ============================================================
   BTX ACADEMY — ĐIỂM BỨT PHÁ
   Cinematic Luxury Landing Page
   ============================================================ */

:root {
  --black: #0a0a0a;
  --charcoal: #141414;
  --graphite: #1c1c1e;
  --gunmetal: #2a2a2d;
  --ink: #050505;

  --gold: #d1962f;
  --gold-light: #f5c065;
  --gold-soft: rgba(209, 150, 47, 0.15);
  --gold-line: rgba(209, 150, 47, 0.32);
  --gold-metallic: linear-gradient(120deg, #b8752e 0%, #f5c065 25%, #fbe3ac 45%, #d1962f 65%, #f5c065 85%, #b8752e 100%);

  --white: #f5f3ee;
  --mist: rgba(245, 243, 238, 0.88);
  --mist-dim: rgba(245, 243, 238, 0.68);

  --serif: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --sans: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --container: 1180px;
  /* Khoảng cách giữa các mục. Trước là clamp(88px, 12vw, 160px) khiến 19,6%
     chiều cao trang chỉ là khoảng trống, khách phải cuộn qua rất nhiều chỗ rỗng.
     Thu lại vừa phải: vẫn thoáng nhưng ngắn hơn khoảng 1.100px trên máy tính. */
  --gap-section: clamp(64px, 9vw, 120px);
  --radius: 6px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

section { position: relative; }
.section-tight { padding: 72px 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 20px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold);
}
.eyebrow.center::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold);
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.01em;
  text-decoration: none;
}

h2 {
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.2;
  margin-bottom: 24px;
  text-transform: uppercase;
}
.heading-sub {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: -14px 0 20px;
}

h3 {
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0;
}

p { margin: 0 0 18px; max-width: 640px; }
p.lede {
  font-size: 20px;
  color: var(--mist);
  max-width: 620px;
}

.gold { color: var(--gold); }
.center { text-align: center; margin-left: auto; margin-right: auto; }

.divider {
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin: 28px 0;
}
.center .divider { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 66px;
  padding: 0 44px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: box-shadow .35s ease, transform .35s ease, background .35s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--gold-metallic);
  background-size: 200% auto;
  color: #17130a;
  box-shadow: 0 0 0 1px var(--gold-line), 0 8px 32px rgba(209,150,47,0.35);
}
.btn-primary:hover {
  box-shadow: 0 0 0 1px var(--gold-line), 0 10px 44px rgba(209,150,47,0.55);
  transform: translateY(-2px);
}
.btn-outline {
  background: transparent;
  border-color: var(--gold-line);
  color: var(--white);
}
.btn-outline:hover {
  background: var(--gold-soft);
  border-color: var(--gold);
}
.btn-small { height: 56px; padding: 0 34px; font-size: 15px; }

/* ---------- Reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1.is-visible { transition-delay: .12s; }
.reveal-delay-2.is-visible { transition-delay: .24s; }
.reveal-delay-3.is-visible { transition-delay: .36s; }

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  z-index: 999;
  transition: width .08s linear;
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  padding: 26px 0;
  transition: padding .4s ease, background .4s ease, backdrop-filter .4s ease, box-shadow .4s ease;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.site-header.is-scrolled {
  padding: 14px 0;
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 var(--gold-line);
}
.brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  line-height: 1;
  text-decoration: none;
  color: var(--white);
  flex-shrink: 0;
}
.brand-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-light);
  line-height: 1;
}
.logo-mark {
  height: 60px;
  width: auto;
  color: var(--gold-light);
}
.logo-mark path, .logo-mark polygon {
  fill: currentColor;
}
.header-nav {
  display: none;
  align-items: center;
  gap: 30px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mist);
  flex: 1;
  padding-left: 44px;
}
.header-nav a {
  color: var(--mist);
  text-decoration: none;
  transition: color .3s ease;
}
.header-nav a:hover { color: var(--gold-light); }
@media (min-width: 900px) {
  .header-nav { display: flex; }
}
/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(180deg, rgba(5,5,5,0.05) 0%, rgba(5,5,5,0.28) 55%, rgba(5,5,5,0.78) 100%),
              /* Giữ đúng lớp phủ nguyên bản để ảnh hero sáng, không bị xám.
                 Chữ đè lên vùng người đọc được nhờ bóng đổ đậm ở .hero h1 và
                 .hero p.lede, không cần phủ tối thêm. */
              linear-gradient(90deg, rgba(5,5,5,0.5) 0%, rgba(5,5,5,0.05) 55%),
              url("../img/hero-bg.jpg?v=20260821b") 68% 32% / cover no-repeat;
  padding-bottom: 96px;
  padding-top: 160px;
  overflow: hidden;
}
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(232,212,160,0.55), transparent),
    radial-gradient(1.5px 1.5px at 60% 22%, rgba(232,212,160,0.45), transparent),
    radial-gradient(2px 2px at 80% 52%, rgba(232,212,160,0.4), transparent),
    radial-gradient(1.5px 1.5px at 35% 62%, rgba(232,212,160,0.35), transparent),
    radial-gradient(2px 2px at 50% 78%, rgba(232,212,160,0.45), transparent),
    radial-gradient(1.5px 1.5px at 12% 78%, rgba(232,212,160,0.3), transparent);
  animation: hero-drift 16s ease-in-out infinite alternate;
}
@keyframes hero-drift {
  from { transform: translateY(0); }
  to { transform: translateY(-26px); }
}
/* Nới từ 640px lên 700px (21/07). Trừ 32px đệm mỗi bên thì chữ có 636px thay vì
   576px. Vế đầu của tiêu đề cần đúng 576px, tức là trước đây vừa khít không dư
   một pixel nào, nên chỉ cần máy khách hiển thị lệch chút là chữ cuối rớt xuống
   thành một dòng lẻ loi. Nay có 60px dư làm biên an toàn. */
.hero-inner { max-width: 700px; }
.hero-speaker-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 6px 18px 6px 6px;
  background: rgba(10,10,10,0.5);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero-speaker-badge img {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 1px solid var(--gold-line);
}
.hero-speaker-badge .name { font-weight: 700; color: var(--gold-light); font-size: 16px; line-height: 1.3; }
.hero-speaker-badge .role { font-size: 13px; color: var(--mist-dim); }
.hero-script {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 22px;
}
.hero h1 {
  /* Sửa 20/07: trước đây tối đa 39px, trong khi h2 các mục tới 42px, nên tiêu đề
     chính của trang lại nhỏ hơn tiêu đề mục. Trên điện thoại còn lệch nặng hơn:
     h1 chỉ 20px còn h2 tới 28px. Nay h1 luôn lớn nhất trang ở mọi khổ màn hình.

     Sửa 21/07: hạ trần từ 52px xuống 46px. Ở 52px, tiêu đề mới dài hơn nên bị
     rớt dòng lệch, chữ cuối rơi xuống một mình trông rất xấu. 46px vẫn lớn hơn
     h2 (42px) ở mọi khổ màn hình, nên thứ bậc thị giác vẫn giữ nguyên. */
  /* Hạ thêm 46 → 44px, cộng với khung nới rộng thì vế đầu chỉ chiếm 551/636px,
     dư 13% làm biên. Vẫn lớn hơn h2 (42px) nên thứ bậc thị giác giữ nguyên. */
  font-size: clamp(30px, 4.4vw, 44px);
  /* Sửa lần 2 ngày 21/07: bỏ max-width: 16ch. Chính nó ép khung hẹp tới mức
     chữ "PHÁ" bị đẩy xuống một mình thành dòng thứ ba, đúng cái lỗi định chữa.
     Nay chỗ ngắt được đặt thẳng trong HTML bằng <br class="br-may">, chia đều
     "CHỦ DOANH NGHIỆP CẦN" và "MỘT ĐIỂM BỨT PHÁ".
     Vẫn giữ text-wrap: balance để lo giúp các khổ màn hình trung gian. */
  text-wrap: balance;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--white);
  margin-bottom: 26px;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 0 4px 26px rgba(0,0,0,0.55), 0 2px 10px rgba(0,0,0,0.5);
}
.hero h1 em {
  font-style: normal;
  color: var(--gold-light);
  text-shadow: 0 4px 26px rgba(0,0,0,0.75), 0 2px 10px rgba(0,0,0,0.7);
}
.hero p.lede {
  color: var(--white);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.5;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 2px 18px rgba(0,0,0,0.7);
  margin-bottom: 40px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center; }
.hero-meta {
  margin-top: 56px;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px 22px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--mist);
  white-space: nowrap;
}
.hero-meta span { color: var(--gold-light); }
@media (max-width: 860px) {
  .hero-meta { flex-wrap: wrap; white-space: normal; font-size: 14px; gap: 8px 18px; }
}

.scroll-cue {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 46px;
  background: linear-gradient(180deg, var(--gold), transparent);
  opacity: .8;
}

/* ============================================================
   STORY / SPLIT SECTIONS
   ============================================================ */
.feature-block {
  padding: var(--gap-section) 0;
  text-align: center;
}
.feature-head { max-width: 720px; margin: 0 auto 56px; }
.feature-visual-wrap {
  width: 100%;
  padding: 0 24px;
}
.feature-visual {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 50px 120px -40px rgba(0,0,0,0.85);
}
.feature-visual img { width: 100%; display: block; }
.feature-body {
  max-width: 700px;
  margin: 56px auto 0;
  text-align: left;
}
.feature-body p { color: var(--mist); font-weight: 500; }
.feature-body .subtitle {
  display: block;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-light);
  font-size: 22px;
  margin: 32px 0 14px;
}
.quote {
  display: inline-block;
  margin: 28px auto;
  padding-left: 20px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-weight: 700;
  font-style: normal;
  color: var(--gold-light);
  font-size: 21px;
  max-width: 640px;
  text-align: left;
}
.feature-body .quote,
.split-text .quote {
  margin: 28px 0;
  padding-left: 20px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-weight: 700;
  font-style: normal;
  color: var(--gold-light);
  font-size: 21px;
  max-width: 640px;
}
@media (max-width: 640px) {
  .feature-visual-wrap { padding: 0 12px; }
}

.section-bg-charcoal { background: var(--charcoal); }
.section-bg-graphite { background: var(--graphite); }

/* ============================================================
   PAIN LIST
   ============================================================ */
.pain-list { list-style: none; margin: 28px 0; padding: 0; max-width: none; }
.pain-list li {
  position: relative;
  padding: 16px 0 16px 34px;
  border-bottom: 1px solid var(--gold-line);
  color: var(--mist);
  font-size: 17px;
  white-space: nowrap;
}
.pain-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 15px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 700px) {
  .pain-list li { white-space: normal; }
}

/* ============================================================
   VIDEO INTRO
   ============================================================ */
.video-intro {
  padding: var(--gap-section) 0;
  background: var(--graphite);
  text-align: center;
}
.video-wrap {
  margin-top: 48px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--gold-line);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7);
  background: #000;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.video-wrap video {
  width: 100%;
  height: auto;
  max-height: 640px;
  display: block;
  margin: 0 auto;
}
.video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ============================================================
   SPEAKER — MAGAZINE LAYOUT
   ============================================================ */
.speaker {
  padding: var(--gap-section) 0;
  background: var(--ink);
  overflow: hidden;
}
.speaker-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}
@media (min-width: 960px) {
  .speaker-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  /* Đẩy ảnh xuống để chữ nền "NGUYỄN TRƯƠNG TUYẾN" phía sau lộ hẳn ra, trước đây
     bị mép trên tấm ảnh cắt mất 67px. Mức 8.5% bề ngang cột cũng vừa đủ để chân
     ảnh hạ xuống ngang đáy khối trích dẫn ở cột bên phải. Chỉ áp dụng từ 960px
     trở lên, vì dưới ngưỡng đó lưới xếp dọc, đẩy xuống chỉ tạo khoảng trắng thừa. */
  .speaker-figure img { margin-top: 17.5%; }
}
.speaker-figure { position: relative; }
.speaker-figure img {
  width: 100%;
  border-radius: var(--radius);
  filter: grayscale(0.06);
  position: relative;
  z-index: 1;
}
.speaker-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--radius);
  background: linear-gradient(200deg, rgba(209,150,47,0.14), transparent 55%);
  pointer-events: none;
}
.speaker-name-bg {
  position: absolute;
  top: -4%;
  left: -3%;
  z-index: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  max-width: 108%;
}
.speaker-name-bg .line1 {
  font-family: var(--serif);
  font-size: clamp(26px, 5vw, 58px);
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 2px var(--gold-line);
  line-height: 1.05;
  white-space: nowrap;
}
.speaker-name-bg .line2 {
  font-family: var(--sans);
  font-size: clamp(11px, 1.6vw, 18px);
  font-weight: 700;
  letter-spacing: 0.28em;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-line);
  margin-top: 6px;
}
.speaker-copy { position: relative; z-index: 1; }
.speaker-name {
  white-space: nowrap;
  font-size: clamp(24px, 3vw, 42px);
}
.speaker-role {
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.speaker-credentials {
  list-style: none;
  margin: 0 0 32px;
  padding: 28px 32px;
  max-width: 600px;
  background: var(--graphite);
  border: 1px solid var(--gold-line);
  border-radius: 8px;
}
.speaker-credentials li {
  position: relative;
  padding: 12px 0 12px 34px;
  border-bottom: 1px solid var(--gold-line);
  color: var(--mist);
  font-size: 16px;
  line-height: 1.6;
}
.speaker-credentials li:first-child { padding-top: 0; }
.speaker-credentials li:last-child { border-bottom: none; padding-bottom: 0; }
.speaker-credentials li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
}
.speaker-credentials li::after {
  content: "✓";
  position: absolute;
  left: 3px;
  top: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
}
.speaker-credentials li.is-highlight {
  color: var(--gold-light);
  font-weight: 700;
}
.speaker-credentials li.is-highlight::before {
  background: var(--gold);
  border-color: var(--gold);
}
.speaker-credentials li.is-highlight::after { color: var(--ink); }
.speaker-bio-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 1120px;
  margin: 56px auto 0;
}
@media (min-width: 900px) {
  .speaker-bio-wrap { grid-template-columns: 1.35fr 0.85fr; align-items: start; }
}
.speaker-bio { max-width: none; margin: 0; }
.speaker-bio p { color: var(--mist); max-width: none; font-weight: 500; }
.speaker-bio-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
@media (min-width: 900px) {
  .speaker-bio-gallery { flex-direction: column; flex-wrap: nowrap; gap: 88px; }
}
.speaker-bio-gallery img {
  flex: 1 1 calc(50% - 7px);
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--gold-line);
  box-shadow: 0 25px 60px -20px rgba(0,0,0,0.6);
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
@media (min-width: 900px) {
  .speaker-bio-gallery img { flex: none; }
}
.speaker-fill {
  display: inline-block;
  background: var(--gold-soft);
  border: 1px dashed var(--gold-line);
  color: var(--gold-light);
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 15px;
}

.speaker-pull-quote {
  margin: 0 0 36px;
  padding: 28px 32px;
  background: var(--graphite);
  border-left: 3px solid var(--gold);
  border-radius: 4px;
  font-family: var(--serif);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.45;
  color: var(--gold-light);
  max-width: 620px;
}

.speaker-mission {
  margin: 32px auto 0;
  padding: 36px 40px;
  text-align: center;
  background: linear-gradient(135deg, rgba(209,150,47,0.1), transparent);
  border: 1px solid var(--gold-line);
  border-radius: 4px;
  max-width: 760px;
}
.speaker-mission .eyebrow { margin-bottom: 12px; }
.speaker-mission p {
  margin: 0;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  color: var(--white);
  line-height: 1.6;
  max-width: none;
}

/* ============================================================
   ROADMAP KEY-VISUAL SECTIONS (5 điểm / 07 bước)
   ============================================================ */
.roadmap {
  padding: var(--gap-section) 0;
  text-align: center;
}
.roadmap-head { max-width: 820px; margin: 0 auto 56px; }
.roadmap-visual-wrap {
  width: 100%;
  padding: 0 24px;
  perspective: 1600px;
}
.roadmap-visual {
  position: relative;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 50px 120px -40px rgba(0,0,0,0.85);
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
}
.roadmap-visual img { width: 100%; display: block; }
.roadmap-visual .glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 82% 30%, rgba(232,212,160,0.18), transparent 70%);
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.roadmap-visual.is-visible .glow { opacity: 1; }

/* checkpoint scroll-lighting */
.checkpoint {
  position: absolute;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(232,212,160,0.35);
  transition: background .5s ease, box-shadow .5s ease;
  pointer-events: none;
}
.checkpoint::after {
  content: "";
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,212,160,0.4), transparent 72%);
  opacity: 0;
  transition: opacity .6s ease;
}
.checkpoint .cp-num {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: 12px;
  color: var(--gold-light);
  opacity: 0;
  transition: opacity .5s ease, transform .5s ease;
  white-space: nowrap;
}
.checkpoint.is-lit {
  background: var(--gold-light);
  box-shadow: 0 0 16px 5px rgba(232,212,160,.6);
}
.checkpoint.is-lit::after { opacity: 1; }
.checkpoint.is-lit .cp-num { opacity: 1; transform: translateX(-50%) translateY(-3px); }

@media (max-width: 640px) {
  .roadmap-visual-wrap { padding: 0 12px; }
  .checkpoint .cp-num { display: none; }
}

.roadmap-detail {
  list-style: none;
  margin: 64px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  text-align: left;
}
@media (min-width: 700px) {
  .roadmap-detail { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .roadmap-detail { grid-template-columns: repeat(3, 1fr); }
}
.roadmap-detail li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.roadmap-detail .rd-icon {
  flex-shrink: 0;
  font-size: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--gold-line);
  display: flex;
  align-items: center;
  justify-content: center;
}
.roadmap-detail h3 { font-size: 16px; margin-bottom: 10px; color: var(--gold-light); }
.roadmap-detail p { font-size: 15.5px; color: var(--mist); margin: 0; max-width: 420px; font-weight: 400; line-height: 1.85; }
.roadmap-closing {
  max-width: 680px;
  margin: 48px auto 0;
  text-align: center;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 19px;
  color: var(--gold-light);
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials { padding: var(--gap-section) 0; }
.t-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  margin-top: 56px;
}
@media (min-width: 760px) {
  .t-grid { grid-template-columns: repeat(3, 1fr); }
}
.t-card {
  background: var(--graphite);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform .35s ease, border-color .35s ease;
}
.t-card:hover { transform: translateY(-4px); border-color: var(--gold); }
.t-card.is-featured {
  border-color: var(--gold);
  background: linear-gradient(160deg, rgba(209,150,47,0.09), var(--graphite) 45%);
}
.t-avatar {
  width: 104px; height: 104px;
  border-radius: 50%;
  object-fit: cover;
}
.t-card.is-featured .t-avatar { width: 128px; height: 128px; }
.t-card blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  font-style: normal;
  color: var(--gold-light);
  line-height: 1.5;
}
.t-card.is-featured blockquote { font-size: 24px; }
.t-card p.t-body { color: var(--mist); font-size: 16px; margin: 0; font-weight: 500; }
.t-name { font-weight: 700; color: var(--white); font-size: 17px; }
.t-role { font-size: 14px; color: var(--mist-dim); }
.testimonials-closing {
  max-width: 680px;
  margin: 56px auto 0;
  text-align: center;
  color: var(--mist);
  font-size: 17px;
}

/* ============================================================
   NẾU 90 NGÀY SAU
   ============================================================ */
.vision {
  padding: var(--gap-section) 0;
  background: var(--ink);
  text-align: center;
}
.vision-list {
  list-style: none;
  max-width: 640px;
  margin: 48px auto 0;
  padding: 0;
  text-align: left;
}
.vision-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--gold-line);
  color: var(--white);
  font-size: 18px;
}
.vision-list li:first-child { padding-top: 0; }
.vision-list li:last-child { border-bottom: none; }
.vision-list li::before {
  content: "✓";
  flex: none;
  margin-top: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold-soft);
  border: 1px solid var(--gold-line);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vision-closing {
  margin: 40px auto 0;
  max-width: 700px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--gold-light);
  white-space: nowrap;
}

/* ============================================================
   CTA CUỐI
   ============================================================ */
.final-cta {
  padding: var(--gap-section) 0;
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(209,150,47,0.14), transparent 60%),
    var(--charcoal);
  text-align: center;
}
.final-cta-inner { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.final-cta-inner p { font-size: 19px; color: var(--mist); margin: 0; }
.final-cta-photo {
  width: 176px; height: 176px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 3px solid var(--gold-light);
  box-shadow: 0 0 0 6px rgba(10,10,10,0.4), 0 20px 50px -15px rgba(209,150,47,0.5);
  margin-bottom: 8px;
}
.final-cta-tagline {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--gold-light);
  margin-top: 12px;
}

/* ============================================================
   MOSAIC — ĐÀO TẠO
   ============================================================ */
.mosaic-section { padding: var(--gap-section) 0 0; }
.mosaic-head { max-width: 820px; margin: 0 auto 56px; text-align: center; }
.mosaic-head h2 { font-size: clamp(22px, 2.6vw, 30px); }
.mosaic {
  columns: 2;
  column-gap: 10px;
  padding: 0 10px var(--gap-section);
}
@media (min-width: 700px) { .mosaic { columns: 3; } }
@media (min-width: 1000px) { .mosaic { columns: 4; } }
.mosaic img {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 4px;
  break-inside: avoid;
  filter: saturate(0.92) contrast(1.02);
  transition: transform .5s ease, filter .5s ease, opacity .7s ease;
}
.mosaic img:hover { transform: scale(1.015); filter: saturate(1.05); }
.mosaic img.featured { column-span: all; width: 100%; max-height: 60vh; object-fit: cover; }
.mosaic img.reveal { opacity: 0; transform: translateY(20px); }
.mosaic img.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   TICKETS / CTA
   ============================================================ */
.tickets {
  padding: var(--gap-section) 0;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(209,150,47,0.22), transparent 60%),
    linear-gradient(180deg, var(--charcoal), var(--black) 70%);
  text-align: center;
}
.tickets-head { max-width: 700px; margin: 0 auto 20px; }
.tickets-eyebrow { font-size: 18px; letter-spacing: 0.22em; }
.tickets-h2 { font-size: clamp(32px, 4.4vw, 50px); text-shadow: 0 0 40px rgba(209,150,47,0.35); }
.tickets-highlight {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
  margin-top: 32px;
  padding: 16px 30px;
  border: 1px solid var(--gold);
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold-light);
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 1px rgba(209,150,47,0.2), 0 0 36px rgba(209,150,47,0.35);
  animation: tickets-glow 2.6s ease-in-out infinite alternate;
}
.tickets-highlight .dot { color: var(--gold); opacity: 0.6; }
.tickets-highlight strong { color: var(--white); font-weight: 900; }
@keyframes tickets-glow {
  from { box-shadow: 0 0 0 1px rgba(209,150,47,0.2), 0 0 24px rgba(209,150,47,0.25); }
  to   { box-shadow: 0 0 0 1px rgba(209,150,47,0.35), 0 0 46px rgba(209,150,47,0.55); }
}
@media (max-width: 640px) { .tickets-highlight { font-size: 14px; padding: 14px 20px; } }
.tickets-date {
  display: inline-flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 12px 0 56px;
  font-size: 17px;
  color: var(--mist);
  letter-spacing: 0.02em;
}
.tickets-date b { color: var(--gold); font-weight: 700; }

.t-plans {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  text-align: left;
}
@media (min-width: 860px) {
  .t-plans { grid-template-columns: repeat(3, 1fr); }
}
.plan {
  position: relative;
  background: radial-gradient(120% 100% at 20% 0%, rgba(209,150,47,0.06), transparent 60%), var(--graphite);
  border: 1px solid var(--gold-line);
  border-radius: var(--radius);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
}
.plan.is-popular {
  border-color: var(--gold);
  box-shadow: 0 30px 80px -30px rgba(209,150,47,0.35);
  transform: translateY(-8px);
}
.plan-badge {
  position: absolute;
  top: -14px; left: 32px;
  background: var(--gold-metallic);
  background-size: 200% auto;
  color: #17130a;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 14px;
  border-radius: 999px;
}
.plan-name { font-size: 22px; color: var(--gold-light); font-family: var(--serif); margin-bottom: 6px; }
.plan-price {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 4px;
  background: var(--gold-metallic);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.plan-for { font-size: 14px; color: var(--mist-dim); margin-bottom: 20px; }
.plan-includes {
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold);
  margin-bottom: 10px;
}
.plan-features { list-style: none; padding: 0; margin: 0 0 20px; }
.plan-features li {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--gold-line);
  font-size: 15px;
  color: var(--mist);
  font-weight: 500;
}
.plan-features li:first-child { border-top: none; }
.plan-features svg { flex-shrink: 0; margin-top: 3px; }
.plan-note {
  flex: 1;
  font-size: 13.5px;
  font-style: italic;
  color: var(--mist-dim);
  margin: 0 0 24px;
}
.plan .btn { width: 100%; }

/* ============================================================
   FAQ
   ============================================================ */
/* ============================================================
   CẢM NHẬN HỌC VIÊN & NGƯỜI THẦY GIỚI THIỆU
   Ảnh chụp màn hình bài đăng thật, chiều cao rất khác nhau nên
   dùng masonry kiểu `columns` cho khỏi so le vụng. Nền trắng đặt
   sẵn trên thẻ bọc để lúc ảnh chưa tải xong không bị nháy đen.
   ============================================================ */
.cam-nhan {
  padding: var(--gap-section) 0;
  background: linear-gradient(180deg, var(--black), var(--charcoal) 45%, var(--black));
}
.cn-sub {
  text-align: center;
  font-size: clamp(16px, 1.9vw, 20px);
  font-weight: 700;
  color: var(--gold-light);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 52px 0 22px;
}
.cn-sub:first-of-type { margin-top: 8px; }
/* Điện thoại để 2 cột chứ không phải 1: xếp 1 cột thì riêng khối này đã dài
   7.600px, khách phải cuộn gần 10 màn hình. Ở 2 cột ảnh nhỏ không đọc nổi chữ,
   nhưng vai trò lúc đó là cho thấy CÓ RẤT NHIỀU người khen; ai muốn đọc thì
   bấm vào ảnh để mở bản gốc. */
.cn-grid { columns: 2; column-gap: 10px; }
@media (min-width: 620px)  { .cn-grid { columns: 2; column-gap: 14px; }
                             .cn-item { margin-bottom: 14px; } }
@media (min-width: 960px)  { .cn-grid { columns: 3; } }
@media (min-width: 1200px) { .cn-grid { columns: 4; } }
/* Nhóm người thầy giới thiệu: ảnh to hơn, ít cột hơn cho dễ đọc */
@media (min-width: 960px)  { .cn-grid-gt { columns: 3; } }
@media (min-width: 1200px) { .cn-grid-gt { columns: 3; } }
.cn-item {
  display: block;
  break-inside: avoid;
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(245, 243, 238, 0.10);
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.cn-item img { display: block; width: 100%; height: auto; }
.cn-item:hover {
  transform: translateY(-3px);
  border-color: var(--gold-line);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}
.cn-note { margin-top: 28px; color: var(--mist-dim); font-size: 14px; }

.faq { padding: var(--gap-section) 0; }
.faq-list { margin-top: 48px; max-width: 780px; }
.faq-item {
  border-bottom: 1px solid var(--gold-line);
}
.faq-q {
  width: 100%;
  background: none;
  border: none;
  color: var(--white);
  font-family: var(--serif);
  font-size: 19px;
  text-align: left;
  padding: 26px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  cursor: pointer;
}
.faq-q .plus {
  flex-shrink: 0;
  width: 22px; height: 22px;
  position: relative;
  color: var(--gold);
}
.faq-q .plus::before, .faq-q .plus::after {
  content: "";
  position: absolute;
  background: var(--gold);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}
.faq-q .plus::before { width: 14px; height: 1.5px; }
.faq-q .plus::after { width: 1.5px; height: 14px; transition: transform .3s ease; }
.faq-item.is-open .plus::after { transform: translate(-50%,-50%) rotate(90deg) scale(0); }

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .45s ease, padding .45s ease;
}
.faq-a p { color: var(--mist); font-size: 16px; max-width: 700px; font-weight: 500; }
.faq-item.is-open .faq-a { max-height: 400px; padding-bottom: 26px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  padding: 120px 0 48px;
  background: linear-gradient(180deg, var(--charcoal), var(--black) 70%);
  text-align: center;
}
.footer-inner { max-width: 760px; margin: 0 auto; }
.footer-logo {
  height: 72px;
  margin: 0 auto -14px;
}
.footer-brand-label {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-light);
  line-height: 1;
  margin-bottom: 18px;
}
.footer-slogan {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 22px;
  color: var(--gold-light);
  margin-bottom: 40px;
}
.footer-qr {
  width: 96px; height: 96px;
  border: 1px dashed var(--mist-dim);
  border-radius: 4px;
  margin: 0 auto 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--mist-dim);
  text-align: center;
}
.footer-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 56px;
  margin: 0 auto 48px;
  text-align: left;
}
.footer-col h4 {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 16px;
}
.footer-col a, .footer-col div {
  display: block;
  color: var(--mist);
  text-decoration: none;
  font-size: 16px;
  margin-bottom: 10px;
}
.footer-col a:hover { color: var(--gold-light); }
.footer-venue-row { display: flex; flex-direction: column; gap: 14px; align-items: stretch; text-align: left; }
.footer-venue-photo {
  width: 100%;
  height: 150px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--gold-line);
}
.footer-venue-row > div div { margin-bottom: 6px; font-size: 15px; }
.footer-col-venue { width: 100%; max-width: 320px; }
.footer-copy {
  font-size: 14px;
  color: var(--mist-dim);
  padding-top: 32px;
  border-top: 1px solid var(--gold-line);
}

/* ============================================================
   BENEFITS GRID
   ============================================================ */
.benefits {
  padding: var(--gap-section) 0;
}
.benefits-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin-top: 56px;
}
@media (min-width: 640px) { .benefits-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .benefits-grid { grid-template-columns: repeat(4, 1fr); } }
.benefit {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  padding: 32px 28px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform .35s ease, border-color .35s ease, background .35s ease;
}
.benefit:hover {
  transform: translateY(-4px);
  border-color: var(--gold);
  background: rgba(255,255,255,0.05);
}
.benefit p { color: var(--mist); font-size: 15.5px; font-weight: 500; }
.benefit p .hl { color: var(--gold-light); font-weight: 700; }
.benefit .corner-deco {
  position: absolute; top: -22px; right: -22px;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.08;
  pointer-events: none;
}
.benefit-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px 6px 10px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #17130a;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.benefit h3 { font-size: clamp(20px, 2.2vw, 24px); position: relative; z-index: 1; }

.benefits-recap {
  max-width: 640px;
  margin: 64px auto 0;
  padding-top: 48px;
  border-top: 1px solid var(--gold-line);
}
.benefits-recap h3 { margin-bottom: 8px; }

/* ============================================================
   QUALIFY
   ============================================================ */
.qualify-grid {
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
  margin-top: 48px;
  text-align: left;
}
@media (min-width: 860px) {
  .qualify-grid { grid-template-columns: 1fr 1fr; }
}
.qualify-grid h3 { font-size: 16px; margin-bottom: 18px; }
.tag-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.tag {
  border: 1px solid var(--gold-line);
  padding: 9px 16px;
  border-radius: 30px;
  font-size: 13.5px;
  color: var(--gold-light);
  background: var(--gold-soft);
}
.not-for {
  padding: 26px 28px;
  border: 1px solid var(--gold-line);
  border-radius: 8px;
  background: var(--graphite);
}
.not-for h4 { color: var(--gold-light); font-size: 16px; margin-bottom: 12px; }
.not-for p { color: var(--mist); font-size: 15px; }
.not-for .quote { margin: 16px 0 0; }

/* ============================================================
   CREDIBILITY STRIP
   ============================================================ */
.credibility { padding: 56px 0; }
.credibility-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 32px 24px;
}
.credibility-item {
  flex: 1;
  min-width: 200px;
  text-align: center;
  position: relative;
  padding: 0 16px;
}
.credibility-item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 8px;
  height: 44px;
  width: 1px;
  background: var(--gold-line);
}
.ct-label { font-size: 13px; color: var(--mist-dim); line-height: 1.6; font-weight: 600; }
@media (max-width: 860px) {
  .credibility-item:not(:last-child)::after { display: none; }
}

/* ============================================================
   COST OF WAITING
   ============================================================ */
.cost-block {
  padding: var(--gap-section) 0;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(209,150,47,0.1), transparent 60%),
    var(--graphite);
  text-align: center;
}
.cost-block p { color: var(--mist); max-width: 700px; margin-left: auto; margin-right: auto; }
.cost-block .quote {
  display: inline-block;
  margin: 28px auto;
  padding-left: 20px;
  border-left: 2px solid var(--gold);
  font-family: var(--serif);
  font-weight: 700;
  color: var(--gold-light);
  font-size: 21px;
  max-width: 520px;
  text-align: left;
}

/* ============================================================
   VENUE PHOTO + EVENT INFO
   ============================================================ */
.venue-photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 48px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,0.6);
}
.venue-photo img { width: 100%; height: 320px; object-fit: cover; display: block; }
.venue-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px 26px;
  background: linear-gradient(0deg, rgba(8,8,10,0.92), transparent);
  color: var(--gold-light);
  font-weight: 600;
  font-size: 14.5px;
  text-align: left;
}
.event-info {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  text-align: center;
}
@media (min-width: 700px) { .event-info { grid-template-columns: repeat(3, 1fr); } }
.event-info .item { padding: 26px; border: 1px solid var(--gold-line); border-radius: 8px; background: var(--graphite); }
.event-info .ic { font-size: 24px; margin-bottom: 10px; }
.event-info .label { font-size: 12.5px; letter-spacing: 0.1em; color: var(--mist-dim); text-transform: uppercase; margin-bottom: 8px; }
.event-info .val { font-weight: 700; color: var(--gold-light); font-size: 15.5px; }

/* ============================================================
   UTIL
   ============================================================ */
.section-head { max-width: 680px; margin-bottom: 56px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

@media (max-width: 640px) {
  .container { padding: 0 20px; }
  body { font-size: 16px; }
  .hero { padding-top: 130px; padding-bottom: 64px; }
  .speaker-stats { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}

/* ============================================================
   STICKY CTA BAR
   ============================================================ */
.sticky-cta {
  display: flex;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 950;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: rgba(10,10,10,0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--gold-line);
  transform: translateY(120%);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.sticky-cta.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}
.sticky-cta-close {
  position: absolute;
  top: -32px; right: 14px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(10,10,10,0.92);
  border: 1px solid var(--gold-line);
  color: var(--mist);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .2s ease, border-color .2s ease;
}
.sticky-cta-close:hover { color: var(--gold-light); border-color: var(--gold); }
.sticky-cta-info {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
  min-width: 0;
}
.sticky-cta-urgency {
  font-weight: 800;
  color: var(--gold-light);
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sticky-cta-name {
  font-size: 13px;
  color: var(--mist);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.has-sticky-cta { padding-bottom: 78px; }

/* ============================================================
   CHECKOUT MODAL (thanh toan tu dong: form -> QR -> Zalo)
   ============================================================ */
.co-modal {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
}
.co-modal.open { opacity: 1; visibility: visible; }
.co-backdrop {
  position: absolute; inset: 0;
  background: rgba(4,4,4,0.84);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.co-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto;
  background: linear-gradient(160deg, #16130d 0%, #0a0a0a 100%);
  border: 1px solid var(--gold-line);
  border-radius: 14px;
  box-shadow: 0 30px 90px rgba(0,0,0,0.7), 0 0 60px rgba(209,150,47,0.12);
  transform: translateY(24px) scale(.97);
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
  text-align: center;
  font-size: 16px;
}
.co-modal.open .co-card { transform: translateY(0) scale(1); }
.co-close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid var(--gold-line);
  color: var(--mist); font-size: 15px; cursor: pointer; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  transition: all .25s ease;
}
.co-close:hover { background: #f0455e; color: #fff; border-color: transparent; transform: rotate(90deg); }
.co-banner {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(90deg, rgba(240,69,94,0.14), rgba(209,150,47,0.16));
  border-bottom: 1px solid rgba(209,150,47,0.22);
  border-radius: 14px 14px 0 0;
  padding: 13px 46px; font-size: 13px; font-weight: 800;
  color: var(--gold-light); letter-spacing: 0.02em; line-height: 1.3;
  text-transform: uppercase;
}
.co-banner b { color: #f0455e; }
.co-body { padding: 26px 30px 30px; }
.co-title { font-family: var(--serif); font-size: 27px; font-weight: 800; color: var(--gold-light); margin: 0 0 8px; text-transform: uppercase; line-height: 1.1; }
.co-sub { font-size: 15px; color: var(--mist); line-height: 1.6; margin: 0 0 22px; }
.co-sub b { color: var(--gold-light); }

/* package chooser */
.co-pkg { display: flex; gap: 8px; margin-bottom: 16px; }
.co-pkg label {
  flex: 1; cursor: pointer; position: relative;
  border: 1px solid var(--gold-line); border-radius: 8px;
  padding: 11px 6px; text-align: center; transition: all .2s ease;
  background: rgba(255,255,255,0.02);
}
.co-pkg input { position: absolute; opacity: 0; pointer-events: none; }
.co-pkg label span { display: block; }
.co-pkg label b { display: block; font-size: 13px; color: var(--white); margin-bottom: 3px; }
.co-pkg label em { font-style: normal; font-size: 13px; color: var(--gold-light); font-weight: 700; }
.co-pkg input:checked + span,
.co-pkg label:has(input:checked) { }
.co-pkg label:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); box-shadow: 0 0 0 1px var(--gold); }

.co-field { text-align: left; margin-bottom: 13px; }
.co-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--mist); margin-bottom: 6px; }
.co-field input {
  width: 100%; padding: 13px 16px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--gold-line);
  border-radius: 8px; font-family: var(--sans); font-size: 15px; color: var(--white);
  outline: none; transition: all .2s ease; box-sizing: border-box;
}
.co-field input::placeholder { color: var(--mist-dim); }
.co-field input:focus { border-color: var(--gold); background: rgba(209,150,47,0.05); box-shadow: 0 0 0 3px rgba(209,150,47,0.12); }

.co-submit {
  width: 100%; margin-top: 8px; padding: 15px;
  border: none; border-radius: var(--radius);
  background: var(--gold-metallic); background-size: 200% auto;
  color: #17130a; font-family: var(--sans); font-size: 16px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.03em; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .3s ease; box-shadow: 0 6px 24px rgba(209,150,47,0.32);
}
.co-submit:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 10px 40px rgba(209,150,47,0.5); }
.co-submit:disabled { cursor: default; opacity: .85; transform: none; }
.co-note { font-size: 12.5px; color: var(--mist-dim); margin: 14px 0 0; }

/* QR step */
.co-amount { font-size: 14px; color: var(--mist); margin-bottom: 6px; }
.co-amount strong { display: block; font-size: 30px; font-weight: 800; color: var(--gold-light); font-family: var(--serif); margin-top: 2px; }
.co-qrimg { width: 230px; height: 230px; object-fit: contain; background: #fff; border-radius: 8px; padding: 8px; margin: 14px auto 16px; display: block; }
.co-bankinfo { text-align: left; background: rgba(255,255,255,0.03); border: 1px solid var(--gold-line); border-radius: 8px; padding: 12px 16px; margin-bottom: 14px; }
.co-bankinfo div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 14px; }
.co-bankinfo span { color: var(--mist-dim); }
.co-bankinfo b { color: var(--white); text-align: right; word-break: break-all; }
.co-wait { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--gold-light); font-size: 14px; font-weight: 600; margin: 10px 0; }
.co-spin { width: 16px; height: 16px; border: 2px solid rgba(209,150,47,0.3); border-top-color: var(--gold); border-radius: 50%; animation: co-spin .8s linear infinite; }
@keyframes co-spin { to { transform: rotate(360deg); } }
.co-steps { text-align: left; background: rgba(209,150,47,0.06); border: 1px dashed var(--gold-line); border-radius: 8px; padding: 14px 16px; margin: 14px 0; }
.co-steps__t { font-weight: 800; color: var(--gold-light); font-size: 13.5px; margin-bottom: 8px; }
.co-steps ol { margin: 0; padding-left: 20px; }
.co-steps li { font-size: 13px; color: var(--mist); margin-bottom: 6px; line-height: 1.5; }
.co-steps__warn { color: #f0a83c; font-size: 12.5px; font-weight: 600; margin-top: 8px; }
.co-paidbtn { width: 100%; margin-top: 6px; padding: 13px; border: 1px solid var(--gold); border-radius: var(--radius); background: transparent; color: var(--gold-light); font-family: var(--sans); font-size: 15px; font-weight: 700; cursor: pointer; transition: all .2s ease; }
.co-paidbtn:hover { background: var(--gold-soft); }
.co-paidbtn:disabled { opacity: .7; cursor: default; }
.co-paidnote { font-size: 12.5px; color: var(--mist); background: rgba(22,176,122,0.1); border-radius: 8px; padding: 10px 12px; margin-top: 10px; line-height: 1.6; }
.co-help { font-size: 12px; color: var(--mist-dim); margin: 12px 0 0; line-height: 1.6; }
.co-fallback { font-size: 12.5px; color: var(--mist-dim); margin: 10px 0 0; }
.co-fallback a { color: var(--gold-light); }

/* success / error */
.co-check { font-size: 44px; margin-bottom: 6px; }
.co-zalo { width: 210px; height: 210px; object-fit: contain; background: #fff; border-radius: 8px; padding: 8px; margin: 8px auto 16px; display: block; }

@media (max-width: 480px) {
  .co-title { font-size: 22px; }
  .co-body { padding: 22px 20px 24px; }
  .co-banner { padding: 12px 42px; font-size: 12px; }
  .co-qrimg { width: 200px; height: 200px; }
}

/* ===========================================================
   NÂNG CẤP 20/07/2026 — neo giá, nút chép, ô hoá đơn, đơn còn dở
   =========================================================== */

/* ----- Neo giá: giá trị thật gạch ngang, đặt NGAY TRÊN giá bán ----- */
.plan-anchor {
  font-size: 13.5px; color: var(--mist-dim); margin-bottom: 2px; letter-spacing: .01em;
}
.plan-anchor s { color: var(--mist-dim); text-decoration-thickness: 1.5px; opacity: .85; }
.plan-save {
  font-size: 12.5px; font-weight: 700; color: #d1962f; margin: -4px 0 12px;
  letter-spacing: .01em; line-height: 1.4;
}

/* ----- Nút chép trong khối thông tin ngân hàng ----- */
.co-bankinfo .co-vv { display: flex; align-items: center; gap: 8px; min-width: 0; justify-content: flex-end; }
.co-cp {
  flex: none; background: rgba(209,150,47,0.14); border: 1px solid var(--gold-line);
  color: #e8bd6d; border-radius: 6px; padding: 4px 9px; font-size: 11.5px; font-weight: 700;
  cursor: pointer; font-family: var(--sans); line-height: 1.3; transition: all .18s;
}
.co-cp:hover { background: rgba(209,150,47,0.26); }
.co-cp:active { transform: scale(.94); }
.co-cp.done { background: rgba(22,176,122,.18); border-color: rgba(22,176,122,.4); color: #16b07a; }

/* ----- Khối hoá đơn: gấp lại, không làm form dài ra ----- */
.co-vat { text-align: left; margin: 4px 0 14px; }
.co-vat summary {
  cursor: pointer; font-size: 12.5px; color: var(--mist-dim); padding: 9px 0;
  list-style: none; user-select: none;
}
.co-vat summary::-webkit-details-marker { display: none; }
.co-vat summary:hover { color: #e8bd6d; }
.co-vat summary em { font-style: normal; opacity: .72; }
.co-vat[open] summary { color: #e8bd6d; margin-bottom: 4px; }

/* ----- Băng nhắc đơn giữ vé còn dở ----- */
.co-resume {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 88px; z-index: 940;
  max-width: min(560px, calc(100vw - 24px)); width: max-content;
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: linear-gradient(135deg, #f5c065, #d1962f); color: #17130a;
  border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.42);
  font-size: 13.5px; font-weight: 600; line-height: 1.4;
  animation: coResumeIn .35s ease both;
}
@keyframes coResumeIn { from { opacity: 0; transform: translateX(-50%) translateY(12px); } }
.co-resume a { color: #17130a; font-weight: 800; text-decoration: underline; white-space: nowrap; }
.co-resume button {
  flex: none; background: rgba(0,0,0,.14); border: 0; color: #17130a; cursor: pointer;
  border-radius: 6px; width: 24px; height: 24px; font-size: 15px; line-height: 1; font-family: inherit;
}
.co-resume button:hover { background: rgba(0,0,0,.24); }
@media (max-width: 560px) {
  .co-resume { bottom: 82px; font-size: 12.5px; padding: 11px 13px; gap: 9px; }
}

/* ----- Hero: ba thông tin quyết định (ngày, nơi, giá) -----
   Đặt ngay dưới câu dẫn, trên nút bấm. Trước đây khách phải cuộn 23 màn
   hình mới thấy giá, nên phần lớn thoát trang khi chưa biết vé bao nhiêu. */
.hero-facts {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 10px 22px; margin: 22px 0 26px; font-size: 15px; color: var(--mist);
  font-weight: 600; letter-spacing: .01em;
}
.hero-facts span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.hero-facts .hero-price {
  background: rgba(209,150,47,0.14); border: 1px solid var(--gold-line);
  border-radius: 999px; padding: 6px 16px; color: #f0cf8e;
}
.hero-facts .hero-price b { color: #ffd98a; font-size: 17px; font-weight: 800; margin-left: 2px; }
@media (max-width: 560px) {
  .hero-facts { gap: 8px 14px; font-size: 13.5px; margin: 18px 0 22px; }
  .hero-facts .hero-price { padding: 5px 13px; }
  .hero-facts .hero-price b { font-size: 15.5px; }
}

/* ===========================================================
   MÀN THANH TOÁN — gỡ nỗi sợ và cho lý do trả tiền ngay
   Ba người đầu tiên đều đi tới màn QR rồi dừng. Hai khối dưới đây
   trả lời đúng hai câu hỏi họ đang tự hỏi: "giao tiền cho ai đây?"
   và "sao phải trả ngay bây giờ?".
   =========================================================== */

/* ----- Quà tặng + mốc tăng giá ----- */
.co-gap {
  text-align: left; background: rgba(209,150,47,0.08);
  border: 1px solid var(--gold-line); border-radius: 10px;
  padding: 13px 15px; margin: 0 0 16px; display: grid; gap: 11px;
}
.co-gap__row { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--mist); }
.co-gap__row span { flex: none; font-size: 17px; line-height: 1.3; }
.co-gap__row b { color: #f0cf8e; font-weight: 700; }
.co-gap__row em { font-style: normal; color: var(--mist-dim); font-size: 12.5px; }

/* ----- Khối yên tâm: ai đứng sau, hoàn tiền, kênh hỏi ----- */
.co-yentam { text-align: left; display: grid; gap: 11px; margin: 0 0 16px; }
.co-yentam__ai { display: flex; align-items: center; gap: 12px; }
.co-yentam__ai img {
  width: 54px; height: 54px; flex: none; border-radius: 50%; object-fit: cover;
  object-position: center 20%; border: 2px solid var(--gold-line);
}
.co-yentam__ai b { display: block; color: var(--white); font-size: 14.5px; line-height: 1.3; }
.co-yentam__ai span { color: var(--mist-dim); font-size: 12.5px; }
.co-yentam__hoan {
  background: rgba(22,176,122,0.10); border: 1px solid rgba(22,176,122,0.32);
  border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.55; color: var(--mist);
}
.co-yentam__hoan b { display: block; color: #3ed99b; font-size: 14px; margin-bottom: 4px; }
.co-yentam__zalo {
  display: block; text-decoration: none; background: rgba(74,163,255,0.10);
  border: 1px solid rgba(74,163,255,0.34); border-radius: 10px; padding: 12px 14px;
  font-size: 13.5px; line-height: 1.5; color: var(--mist); transition: background .2s;
}
.co-yentam__zalo:hover { background: rgba(74,163,255,0.18); }
.co-yentam__zalo b { color: #7bbcff; font-size: 15px; }
.co-yentam__zalo em { display: block; font-style: normal; color: var(--mist-dim); font-size: 12px; margin-top: 3px; }

@media (max-width: 560px) {
  .co-gap { padding: 11px 12px; }
  .co-gap__row { font-size: 12.8px; }
  .co-yentam__ai img { width: 46px; height: 46px; }
  .co-yentam__hoan, .co-yentam__zalo { font-size: 12.8px; padding: 11px 12px; }
}

/* ----- Băng mốc tăng giá, đặt ngay trên bảng vé ----- */
.moc-gia {
  max-width: 760px; margin: 0 auto 30px; text-align: center;
  background: rgba(209,150,47,0.09); border: 1px solid var(--gold-line);
  border-radius: 12px; padding: 15px 20px;
  font-size: 15px; line-height: 1.65; color: var(--mist);
}
.moc-gia b { color: #f0cf8e; }
@media (max-width: 560px) {
  .moc-gia { font-size: 13.5px; padding: 13px 15px; margin-bottom: 24px; }
}

/* ===========================================================
   CHẶN HIỂU NHẦM "KHOÁ HỌC ONLINE"  (21/07/2026)

   Một khách đã chuyển tiền vì tưởng đây là khoá online, phải hoàn lại.
   Với giá 99k cho hai ngày, người lướt Facebook mặc định nghĩ là online,
   vì hai ngày ngồi hội trường mà 99k là con số bất thường. Ghi mỗi
   "Aqua Jardin, TP.HCM" là chưa đủ, phải nói thẳng hai chữ TRỰC TIẾP.
   =========================================================== */

/* ----- Dòng địa điểm ở hero ----- */
.hero-facts .hero-tructiep b {
  color: #ffd98a; font-weight: 800; letter-spacing: .02em;
}

/* ----- Khối cảnh báo trong form và ở màn thanh toán ----- */
.co-canhbao {
  display: flex; gap: 11px; align-items: flex-start; text-align: left;
  background: rgba(209,120,47,0.11); border: 1px solid rgba(224,140,60,0.42);
  border-radius: 10px; padding: 12px 14px; margin: 0 0 14px;
  font-size: 13.5px; line-height: 1.55; color: var(--mist);
}
.co-canhbao span { flex: none; font-size: 17px; line-height: 1.35; }
.co-canhbao b { color: #f5b26b; font-weight: 800; }
.co-canhbao--qr { margin-bottom: 16px; }

@media (max-width: 560px) {
  .co-canhbao { font-size: 12.8px; padding: 11px 12px; gap: 9px; }
}

/* ----- Câu dẫn ở hero: ba triệu chứng rồi một câu hỏi -----
   Ngắt dòng có chủ ý để tách phần "bạn đang gặp gì" khỏi phần "bạn sẽ làm gì",
   đúng nhịp của thông điệp. Trên màn hẹp thì thu nhỏ lại cho khỏi tràn. */
.lede-hero {
  font-size: clamp(16px, 2vw, 21px);
  max-width: 34ch;
  line-height: 1.5;
}
@media (max-width: 640px) {
  .lede-hero br { display: none; }   /* để chữ tự chảy, khỏi ngắt gượng ép */
  .lede-hero { max-width: 100%; }
}

/* Chỗ ngắt dòng của tiêu đề hero: chỉ áp dụng trên máy tính, nơi khung đủ rộng
   để hai vế nằm cân nhau. Trên điện thoại khung hẹp, ép ngắt cứng sẽ tạo ra
   những dòng cụt lủn, nên bỏ đi cho chữ tự chảy. */
@media (max-width: 700px) {
  .br-may { display: none; }
}