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

/* ─── 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: #FAF7F2;
  color: #1C1917;
  -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: 400;
  line-height: 0.94;
  letter-spacing: -0.025em;
}
.t-h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.4rem, 4.5vw, 4.2rem);
  font-weight: 400;
  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: #8B6B47;
  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: #8B6B47; 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(250,247,242,0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(139,107,71,0.14);
}
#nav.nav-dark-bg:not(.scrolled) .t-label {
  color: rgba(250, 247, 242, 0.7) !important;
}
#nav.nav-dark-bg:not(.scrolled) .t-label:hover {
  color: #FAF7F2 !important;
}
#nav.nav-dark-bg:not(.scrolled) .font-serif.text-char {
  color: #FAF7F2 !important;
}
#nav.nav-dark-bg:not(.scrolled) .text-stone {
  color: rgba(250, 247, 242, 0.5) !important;
}
#nav.nav-dark-bg:not(.scrolled) #hbg span {
  background-color: #FAF7F2 !important;
}
#nav.nav-dark-bg:not(.scrolled) .btn-dark {
  background: transparent !important;
  color: #FAF7F2 !important;
  border-color: rgba(250, 247, 242, 0.3) !important;
}
#nav.nav-dark-bg:not(.scrolled) .btn-dark:hover {
  background: rgba(250, 247, 242, 0.08) !important;
  border-color: rgba(250, 247, 242, 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(28,25,23,.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: 6px;
}
.btn-dark  { background: #8B6B47; color: #FAF7F2; border: 1px solid #8B6B47; }
.btn-dark:hover { background: #5E4530; border-color: #5E4530; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: #1C1917; border: 1px solid rgba(28,25,23,.35); }
.btn-ghost:hover { background: #8B6B47; color: #FAF7F2; border-color: #8B6B47; transform: translateY(-2px); }
.btn-gold  { background: #C8A45A; color: #1C1917; border: 1px solid #C8A45A; }
.btn-gold:hover { background: #b89040; border-color: #b89040; transform: translateY(-2px); }
.btn-ghost-light { background: transparent; color: #FAF7F2; border: 1px solid rgba(250,247,242,.3); }
.btn-ghost-light:hover { background: rgba(250,247,242,.08); border-color: rgba(250,247,242,.6); }

/* ─── TIER CARDS ─────────────────────────────────────── */
.tier-card {
  border: 1px solid rgba(139,107,71,.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(28,25,23,.08); }
.tier-card-featured {
  background: #1C1917; color: #FAF7F2;
  border-color: #8B6B47;
}
.tier-card-featured:hover { box-shadow: 0 28px 60px rgba(28,25,23,.22); border-color: #C8A45A; }

/* ─── MOBILE MENU ────────────────────────────────────── */
#mob-menu {
  position: fixed; inset: 0; background: #FAF7F2; 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:#8B6B47; 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: #C8A45A;
}

/* ─── 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(250,247,242,.22);
  color: #FAF7F2; font-family: 'Inter Tight', sans-serif; font-size: .875rem;
  outline: none; transition: border-color .3s;
}
.form-inp::placeholder { color: rgba(250,247,242,.38); }
.form-inp:focus { border-color: #C8A45A; }

/* ─── PAIN ROWS ──────────────────────────────────────── */
.pain-row { border-top: 1px solid rgba(139,107,71,.2); padding: 1.4rem 0; transition: border-color .3s; }
.pain-row:hover { border-top-color: #8B6B47; }

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

/* ─── TESTIMONIAL ────────────────────────────────────── */
.test-card { border: 1px solid rgba(139,107,71,.15); transition: border-color .3s; }
.test-card:hover { border-color: rgba(139,107,71,.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(250,247,242,.75);
  background: rgba(250,247,242,.03);
  border: 1px solid rgba(250,247,242,.12);
  cursor: pointer;
  transition: all .3s;
}
.quiz-ans-btn-dark:hover {
  background: rgba(200,164,90,.1);
  border-color: #C8A45A;
  color: #FAF7F2;
  transform: translateX(4px);
}

/* ─── CHECKOUT MODAL ────────────────────────────────────── */
.payment-modal {
  position: fixed; inset: 0; z-index: 1000;
  background-color: rgba(28,25,23, 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: #FAF7F2;
  border: 1px solid rgba(139,107,71,.3);
  width: 100%; max-width: 480px;
  padding: 2.5rem 2rem;
  position: relative;
  box-shadow: 0 32px 64px rgba(28,25,23,.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: #1C1917;
}

.spinner {
  border-top-color: #8B6B47;
}

/* ─── CERTIFICATE LIGHTBOX MODAL ───────────────────────── */
.cert-lightbox {
  position: fixed;
  inset: 0;
  background-color: rgba(28, 25, 23, 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: #FAF7F2;
  cursor: pointer;
  transition: color 0.3s, transform 0.3s;
  z-index: 2010;
}
.lightbox-close:hover {
  color: #C8A45A;
  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(250,247,242,0.1);
  box-shadow: 0 32px 64px rgba(0,0,0,0.5);
}
.lightbox-caption {
  margin-top: 1rem;
  background-color: rgba(28, 25, 23, 0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(250,247,242,0.15);
  color: #FAF7F2;
  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: 8px;
}

/* ② 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: 10px;
}

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

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

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

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

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

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

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

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

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

/* ⑫ 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: 10px;
}

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


/* ─── 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: 10px;
  flex-shrink: 0;
  transition: box-shadow .3s ease, transform .3s ease;
}
.test-scroll-card:hover {
  box-shadow: 0 12px 32px rgba(28,25,23,.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(28, 25, 23, 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: #C8A45A;
  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: #C8A45A;
  }
}

.roadmap-pill-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: #1C1917;
  color: rgba(250, 247, 242, 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: #C8A45A;
  border-color: #C8A45A;
  color: #1C1917;
  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(250, 247, 242, 0.85);
  transition: color 0.3s;
}

.roadmap-pill-btn:hover .roadmap-pill-name,
.roadmap-pill-btn.active .roadmap-pill-name {
  color: #FAF7F2;
}

.roadmap-pill-tag {
  font-family: 'Inter Tight', sans-serif;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #C8A45A;
  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: #C8A45A;
  color: #1C1917;
  border-color: #C8A45A;
}

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