/* ══════════════════════════════════════════════════════════
   Ngành Học Tarot — landing page
   Bảng màu lấy từ mockup: tím đêm sâu + vàng nến + hồng lavender
   ══════════════════════════════════════════════════════════ */

/* Toàn bộ giá trị nằm ở public/css/tokens.css (trích từ docs/ref/idea.jpeg).
   Khối dưới đây chỉ ánh xạ tên cũ → token, giữ phần còn lại của file gọn gàng. */
:root {
  --bg-abyss:   var(--t-ink-900);
  --bg-deep:    var(--c-bg);
  --bg-purple:  var(--t-violet-900);
  --bg-raise:   var(--c-surface-raise);
  --violet:     var(--t-violet-700);
  --violet-lit: var(--t-card-halo);

  --gold:        var(--c-gold);
  --gold-bright: var(--c-gold-bright);
  --gold-deep:   var(--t-gold-700);

  --text:      var(--c-text);
  --text-soft: var(--c-text-soft);
  --text-mute: var(--c-text-mute);
  --pink:      var(--t-accent-rose);
  --lavender:  var(--t-accent-lilac);

  --line:      var(--c-line);
  --line-soft: var(--c-line-soft);

  --font-display: var(--f-display);
  --font-serif:   var(--f-text);
  --font-sans:    var(--f-ui);

  --radius:    var(--r-md);
  --radius-sm: var(--r-sm);
  --shell:     var(--s-shell);
  --ease:      var(--e-ease);
}

/* ── reset ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--s-header-h);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--f-text);
  font-size: var(--f-body);
  font-weight: var(--f-w-med);
  color: var(--c-text-body);
  background: var(--c-bg);
  line-height: var(--f-lh-base);
  overflow-x: hidden;   /* dự phòng cho Safari < 16, nơi `clip` chưa được hiểu */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas, picture { display: block; max-width: 100%; }

/* Cormorant mặc định dùng chữ số kiểu cổ (thấp/lệch baseline). Với giá tiền, số
   liệu và thời lượng, chữ số thẳng hàng dễ đọc hơn hẳn. */
.plan-price, .stat strong, .spread-time, .subscribe input {
  font-variant-numeric: lining-nums tabular-nums;
}
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.18; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }

.container { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: 32px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 12px; z-index: 999;
  padding: 10px 18px; border-radius: 999px;
  background: var(--c-gold); color: var(--c-on-gold);
}
.skip-link:focus { left: 24px; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.tw-star { font-style: normal; color: var(--gold); font-size: .78em; opacity: .9; }
.tw-star.sm { font-size: .42em; vertical-align: .6em; margin-left: .3em; }

/* ══════════════════ HEADER ══════════════════ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  height: var(--s-header-h);
  display: flex; align-items: center;
  background: var(--c-header);
  box-shadow: 0 1px 0 var(--c-line-soft);
  transition: height var(--e-dur-base) var(--ease), box-shadow var(--e-dur-base) var(--ease);
}
.site-header.is-scrolled {
  height: 4.5rem;
  box-shadow: 0 1px 0 var(--c-line-soft), 0 18px 40px -28px #000;
}

.header-inner {
  display: flex; align-items: center; gap: var(--s-6);
  padding-inline: var(--s-gutter-lg);
  max-width: none;
}

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-mark { width: 4.5rem; height: 4.5rem; flex-shrink: 0; margin-left: -.5rem; }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 12px rgba(233, 200, 139, .35)); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-top {
  font-family: var(--f-text); font-size: var(--f-eyebrow);
  font-weight: var(--f-w-med); letter-spacing: var(--f-ls-eyebrow);
  color: var(--c-gold);
}
.brand-main {
  font-family: var(--f-display); font-size: var(--f-logo);
  font-weight: var(--f-w-med); letter-spacing: .01em;
  color: var(--c-gold-bright); margin-top: 1px; line-height: 1;
  text-shadow: 0 0 26px rgba(208, 177, 130, .45);
}

.site-nav { margin-left: auto; }
.site-nav > ul { display: flex; align-items: center; gap: clamp(1.5rem, 3.4vw, var(--s-10)); }
.nav-link {
  position: relative; display: inline-block; padding: .375rem .125rem;
  font-family: var(--f-text); font-size: var(--f-nav);
  font-weight: var(--f-w-med); letter-spacing: var(--f-ls-nav);
  color: var(--c-nav); white-space: nowrap;
  transition: color var(--e-dur-fast) var(--ease);
}
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .25rem; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-line-bright) 22%,
              var(--c-line-bright) 78%, transparent);
  transform: scaleX(0); transition: transform .35s var(--ease);
}
/* viên kim cương nhỏ giữa gạch chân — chi tiết có trong mẫu */
.nav-link::before {
  content: ''; position: absolute; left: 50%; bottom: 0.25rem;
  width: 5px; height: 5px; translate: -50% 50%; rotate: 45deg;
  background: var(--c-line-bright);
  opacity: 0; transition: opacity .35s var(--ease);
}
.nav-link:hover { color: var(--c-nav-active); }
.nav-link:hover::after, .nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active::before { opacity: 1; }
.nav-link.is-active { color: var(--c-nav-active); }
.nav-login-mobile { display: none; }

.header-login { margin-left: var(--s-6); flex-shrink: 0; }

.nav-toggle { display: none; width: 44px; height: 44px; flex-direction: column; gap: 6px; align-items: center; justify-content: center; margin-left: auto; }
.nav-toggle span { display: block; width: 24px; height: 1.6px; background: var(--gold); transition: transform .3s var(--ease), opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.6px) rotate(-45deg); }

/* ══════════════════ NÚT ══════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .625rem;
  border-radius: var(--r-pill); font-family: var(--f-text); font-weight: var(--f-w-semi);
  white-space: nowrap; transition: transform .3s var(--ease), box-shadow .3s var(--ease),
    background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.btn-ghost {
  /* pill đo được 163×50px @1440 */
  padding: 0 1.75rem; min-height: 3.125rem; line-height: 1;
  font-size: var(--f-nav); color: var(--c-nav-active);
  border: 1px solid var(--c-line);
  background: transparent;
  box-shadow: var(--e-lift-sm);
}
.btn-ghost:hover {
  border-color: var(--c-gold); color: var(--c-gold-bright);
  background: rgba(208, 177, 130, .08);
  box-shadow: 0 0 26px -8px rgba(208, 177, 130, .55);
}
.btn-gold {
  padding: .875rem 2.125rem; font-size: 1.0625rem;
  font-weight: var(--f-w-semi); color: var(--c-on-gold);
  background: var(--c-cta-gradient);
  box-shadow: var(--e-glow-cta);
}
.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px var(--t-gold-050) inset,
              0 22px 54px -16px rgba(242, 205, 149, .95),
              0 0 84px -16px rgba(255, 236, 198, .8);
}
/* CTA chính: đo 330×76px, nhãn 26px */
.btn-hero {
  /* lề ngang rộng để pill đạt ~330px như trong mẫu */
  padding: 0 7rem; min-height: 4.75rem;
  font-size: var(--f-btn); font-weight: var(--f-w-semi); letter-spacing: .01em;
}
.btn-hero .tw-star { color: rgba(38, 6, 18, .5); font-size: .62em; }
.btn-sm { padding: .6875rem 1.375rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* ══════════════════ HERO ══════════════════ */
.hero {
  position: relative; isolation: isolate;
  overflow-x: clip;
  min-height: clamp(640px, 71.2vw, 1058px);
  padding: calc(var(--s-header-h) + var(--s-8)) 0 0;
  display: flex; flex-direction: column; justify-content: center;
}

/* Nền đứng yên khi cuộn: khung cảnh giữ nguyên, nội dung trôi lên trên nó.
   overflow:hidden chuyển từ .hero xuống đây để sân khấu vẫn bị cắt gọn. */
.hero-bg {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  /* iOS: thanh địa chỉ thu vào/nhả ra làm đổi chiều cao khung nhìn trực quan,
     khiến lớp fixed nhảy theo. 100lvh lấy chiều cao khung nhìn LỚN nhất nên
     mặt bàn neo ở đáy đứng yên suốt lúc cuộn. */
  height: 100lvh;
  z-index: 0;
  overflow: hidden;
}
.hero-bg::before {
  content: ''; position: absolute; inset: 0;
  /* Đo trên ảnh mẫu: góc trời #080312 (rất tối) nhưng vũng giữa lên tới
     #1A123C–#221637, độ sáng 49–67. Dải cũ chỉ đạt 16 nên cả khung xám xịt
     và mất hẳn sắc tím. */
  background:
    radial-gradient(58% 46% at 54% 33%, #2C1B50 0%, #1B1038 42%, var(--t-ink-850) 74%, var(--t-ink-900) 100%),
    linear-gradient(180deg, var(--t-ink-950) 0%, var(--t-ink-800) 100%);
}
.hero-curtains {
  display: none;   /* nếp rèm đã nằm sẵn trong sprite nền */
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(46, 22, 45, .55) 0 22px, rgba(10, 4, 15, .55) 22px 58px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 26%, transparent 74%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 26%, transparent 74%, #000 100%);
  opacity: .42;
}
.hero-moon {
  display: none;   /* thay bằng .scene-moon */
  position: absolute; top: 8%; right: 4%; width: 170px; height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 42%, var(--t-gold-050), var(--t-gold-200) 60%, var(--t-gold-600) 100%);
  -webkit-mask-image: radial-gradient(circle at 74% 26%, transparent 58%, #000 59%);
  mask-image: radial-gradient(circle at 74% 26%, transparent 58%, #000 59%);
  filter: drop-shadow(0 0 70px rgba(255, 226, 170, .55));
  opacity: .8; transform: rotate(-12deg);
}
.starfield { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── Sân khấu 2.5D ────────────────────────────────────────────────────
   Các thành phần được cắt trực tiếp từ docs/ref/idea.jpeg rồi xếp lớp.
   Sân khấu giữ đúng tỉ lệ ảnh mẫu (1487×1058) và neo vào đáy hero, nên
   dù khung nhìn cao thấp thế nào, mặt bàn vẫn nằm sát mép dưới. */
.scene-stage {
  /* .hero-bg là position:fixed nên cao đúng bằng viewport (100vh) — trên màn
     hình rộng-lùn (vd. 1920×1080), width:100% (=100vw) từng khiến chiều cao
     suy ra từ tỉ lệ ảnh gốc VƯỢT quá 100vh, bị overflow:hidden cắt mất phần
     trên (đầu/mũ phù thuỷ). Khoá bề rộng theo 100vh×tỉ-lệ để chiều cao không
     bao giờ vượt quá viewport — sân khấu co lại theo chiều ngang (letterbox
     hai bên) thay vì bị cắt theo chiều dọc. Mặt bàn vẫn neo sát đáy. */
  position: absolute; left: 50%; bottom: 0;
  width: min(100%, 140.55vh); height: auto;
  aspect-ratio: 1487 / 1058;
  translate: -50% 0;
  pointer-events: none;
  opacity: 0; transition: opacity 1s var(--e-ease);
}
.scene-stage.is-ready { opacity: 1; }

.scene-layer {
  position: absolute;
  left: var(--l); top: var(--t); width: var(--w);
  z-index: var(--z, 1);
  translate: var(--dx, 0) var(--dy, 0);
  will-change: translate;
}
.scene-layer img { width: 100%; height: auto; }

/* Lớp 3D quanh lá bài */
.cardfx {
  /* <canvas> là phần tử thay thế: inset âm KHÔNG kéo giãn nó, nó vẫn giữ kích
     thước nội tại (thuộc tính width/height). Phải cho width/height tường minh,
     nếu không canvas co lại thành một dải hẹp và hiệu ứng bị cắt cụt ở mép. */
  position: absolute;
  left: -80%; top: -24%;
  width: 260%; height: 148%;
  /* reset toàn cục đặt `canvas { max-width: 100% }` — nó ghim bề ngang canvas
     đúng bằng bề rộng lá bài, làm luồng sáng bị bó lại và cắt ở hai mép. */
  max-width: none;
  display: block; pointer-events: none;
  opacity: 0; transition: opacity 1.2s var(--e-ease);
}
.cardfx--back  { z-index: 1; }   /* nửa quỹ đạo phía sau lá bài */
.cardfx--front { z-index: 3; }   /* nửa quỹ đạo phía trước */
.has-cardfx .cardfx { opacity: 1; }
/* vòng CSS cũ nhường chỗ cho vòng sáng 3D */
.has-cardfx .orbit { display: none; }

/* Càng cuộn xuống, khung cảnh càng chìm để chữ ở các section nổi lên.
   --scrim do public/js/parallax.js đặt. */
.scene-scrim {
  position: absolute; inset: 0; z-index: 9;
  background: var(--t-ink-900);
  opacity: var(--scrim, 0);
  pointer-events: none;
}

.hero-vignette {
  position: absolute; inset: 0;
  /* Ảnh mẫu: góc chỉ còn 28% độ sáng của tâm — có tối góc thật, nhưng lớp cũ
     phủ tới 80% đen lên một nền vốn đã tối, làm phẳng cả khung và ăn mất sắc
     tím. Nới điểm trong suốt ra 50% và hạ độ đậm. */
  background:
    radial-gradient(82% 72% at 52% 40%, transparent 50%, rgba(5, 3, 15, .5) 100%),
    /* KHÔNG tối ở đáy: mặt bàn thêu vàng nằm đúng đó, dải tối cũ ăn mất gần
       một nửa lượng vàng của khung. Việc chuyển tiếp xuống các section bên
       dưới đã có .scene-scrim lo theo vị trí cuộn. */
    linear-gradient(180deg, rgba(0, 1, 14, .7) 0%, transparent 13%, transparent 100%);
}

.hero-inner {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center; gap: 40px;
  flex: 1;
}

/* — chữ bên trái — */
.hero-copy { position: relative; z-index: 4; padding-bottom: clamp(40px, 8vh, 90px); }
.hero-title {
  position: relative;
  font-family: var(--font-display);
  font-size: var(--f-hero);
  font-weight: var(--f-w-semi); line-height: var(--f-lh-hero);
  letter-spacing: var(--f-ls-hero);
  color: var(--c-text);
  text-shadow: var(--e-glow-text);
}
.hero-title .line { display: block; }
.hero-title .accent {
  position: relative; display: inline-block;
  font-family: var(--font-display); font-weight: 700; font-style: normal;
  font-size: 1.05em; line-height: 1; letter-spacing: .01em;
  padding-block: .12em;
  background: var(--c-accent-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(239, 202, 245, .4));
}

/* — trái tim + sao lấp lánh quanh tiêu đề — */
.hero-heart {
  display: inline-block; width: .68em; height: .68em; margin-left: .18em;
  vertical-align: .06em; color: var(--t-accent-rose, #F0BCE6); rotate: -8deg;
  filter: drop-shadow(0 0 10px rgba(240, 188, 230, .55));
  animation: twinkle 3.4s ease-in-out infinite;
}

.hero-sparkle {
  position: absolute; color: var(--c-gold-bright); pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255, 236, 198, .6));
  animation: twinkle 2.6s ease-in-out infinite;
}
.hero-sparkle--1 { top: 6%;  left: -6%;  width: 18px; height: 18px; animation-delay: .2s; }
.hero-sparkle--2 { top: 42%; left: -3%;  width: 12px; height: 12px; animation-delay: 1.1s; }
.hero-sparkle--3 { bottom: 4%; right: -4%; width: 15px; height: 15px; animation-delay: .6s; }

@keyframes twinkle {
  0%, 100% { opacity: .55; transform: scale(.85); }
  50%      { opacity: 1;   transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-heart, .hero-sparkle { animation: none; opacity: .9; }
}
.hero-sub {
  position: relative; display: table; margin: var(--s-5) 0 var(--s-7);
  font-family: var(--f-text); font-size: var(--f-lead);
  font-weight: var(--f-w-med); color: var(--c-text-body); letter-spacing: .01em;
}
.underline-swash {
  position: absolute; left: 8%; bottom: -14px; width: 78%; height: 14px;
  color: rgba(208, 177, 130, .7); overflow: visible;
}

/* — lá bài giữa — */
.hero-stage {
  position: relative; z-index: 3;
  display: grid; place-items: center;
  min-height: 520px;
  perspective: 1200px;
}

/* Trên màn rộng, lá bài được neo theo toạ độ của chính nó trong ảnh mẫu:
   tâm ở 49.8% bề rộng, 44.4% chiều cao, bề rộng 21.5% — nhờ vậy nó luôn nằm
   giữa cột chữ và nhân vật, không bao giờ đè lên mặt người đọc bài. */
@media (min-width: 981px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { max-width: 46%; }
  .hero-stage {
    position: absolute; left: 49.8%; top: 44.4%;
    /* Đúng 1,5 lần cỡ cũ clamp(153px, 14vw, 213px).
       Lớp hiệu ứng .cardfx tính kích thước theo sân khấu này, nên sân khấu
       BẮT BUỘC phải bằng đúng lá bài — nếu lệch thì quỹ đạo kim tuyến sẽ
       to nhỏ không khớp thẻ. */
    width: clamp(230px, 21vw, 320px);
    min-height: 0; margin: 0;
    translate: -50% -50%;
    aspect-ratio: 620 / 1131;
  }
  /* Chọn cụ thể hơn `.tarot-card` để không phụ thuộc thứ tự khai báo: quy tắc
     `.tarot-card { width: clamp(...) }` nằm SAU khối này trong file, nếu chỉ
     dùng `.tarot-card` thì nó đè mất và thẻ không đổi kích thước. */
  .hero-stage > .tarot-card {
    width: 100%;
    /* thẻ to lên thì bề dày cạnh phải to theo, nếu không cạnh giấy biến mất */
    --card-t: clamp(6px, .69vw, 12px);
  }
}

.orbit { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(208, 177, 130, .3);
  animation: spin 34s linear infinite;
}
.ring-1 { width: 118%; height: 78%; border-color: rgba(208, 177, 130, .34); transform: rotate(-14deg); }
.ring-2 { width: 92%; height: 104%; border-color: rgba(122, 76, 127, .5); animation-duration: 48s; animation-direction: reverse; }
.ring-3 {
  width: 132%; height: 60%; border-color: rgba(255, 236, 198, .38);
  animation-duration: 26s; transform: rotate(20deg);
  box-shadow: 0 0 40px rgba(208, 177, 130, .22);
}
@keyframes spin { to { transform: rotate(360deg); } }

.tarot-card {
  position: relative; z-index: 2;
  width: clamp(153px, 14vw, 213px); aspect-ratio: 620 / 1131;
  transform-style: preserve-3d;
  /* Nghiêng sẵn một chút quanh trục Y: nếu để đúng 0° thì cạnh giấy nhìn
     nghiêng tuyệt đối và biến mất, thẻ lại trông phẳng như lúc đầu.
     Góc này cũng có ích cho thiết bị cảm ứng và chế độ giảm chuyển động,
     nơi không có thao tác rê chuột để làm thẻ nghiêng. */
  transform:
    rotate(-6deg)
    rotateX(calc(1.5deg + var(--rx, 0deg)))
    rotateY(calc(-7deg + var(--ry, 0deg)));
  transition: transform .5s var(--ease);
  animation: float 7s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -16px; }
}
.tarot-card-inner {
  position: relative; width: 100%; height: 100%; z-index: 3;
  transform-style: preserve-3d;
}

/* ── Lá bài: ảnh tách từ docs/ref/card.jpeg, dựng thành khối có bề dày ──────
   Mặt trước nằm ở z = 0, thân thẻ lùi về phía sau tới z = -(bề dày).
   Mỗi dải cạnh được đặt NGAY BÊN NGOÀI mép thẻ rồi gập vào trong quanh chính
   mép đó (transform-origin đặt ở mép). Nhờ cách này không cần biết bề rộng
   hay chiều cao thẻ tính bằng pixel — translateZ không nhận đơn vị %, còn
   transform-origin thì nhận. */
.tarot-card {
  --card-t: clamp(4px, .46vw, 8px);   /* bề dày — phóng đại so với thẻ thật cho dễ thấy */
  --card-r: 3.6%;                     /* bo góc, khớp với ảnh lá bài */
}

.card-face { display: block; width: 100%; height: 100%; }
/* Bóng đổ đặt trên <img> chứ KHÔNG đặt trên .tarot-card: filter ép
   transform-style về flat, sẽ xoá sạch bề dày vừa dựng. Ảnh là nút lá nên
   filter ở đây vô hại. */
.card-face img {
  width: 100%; height: 100%; object-fit: contain;
  border-radius: var(--r-card);
  /* drop-shadow bám theo kênh alpha của ảnh, nên ba lớp đầu vẽ đúng một viền
     sáng ôm sát mép thẻ — vàng sát viền, tím toả rộng ra ngoài. */
  filter: drop-shadow(0 0 3px rgba(255, 244, 217, .55))
          drop-shadow(0 0 10px rgba(233, 200, 139, .45))
          drop-shadow(0 0 26px rgba(180, 120, 220, .35))
          drop-shadow(0 26px 54px rgba(0, 0, 0, .72));
}

.card-edge, .card-back {
  position: absolute;
  backface-visibility: hidden;
}

/* Cạnh giấy: lõi giấy ngà, sáng dần về phía mặt trước vì đó là chỗ bắt sáng */
.card-edge {
  background: linear-gradient(var(--edge-angle, 90deg),
    #F0E0BE 0%, #C9AE81 38%, #8A7047 78%, #5C482C 100%);
  box-shadow: inset 0 0 2px rgba(92, 72, 44, .6);
}

.card-edge--right {
  top: var(--card-r); bottom: var(--card-r);
  right: calc(-1 * var(--card-t)); width: var(--card-t);
  transform-origin: left center;
  transform: rotateY(90deg);
}
.card-edge--left {
  top: var(--card-r); bottom: var(--card-r);
  left: calc(-1 * var(--card-t)); width: var(--card-t);
  transform-origin: right center;
  transform: rotateY(-90deg);
  --edge-angle: 270deg;
}
.card-edge--top {
  left: var(--card-r); right: var(--card-r);
  top: calc(-1 * var(--card-t)); height: var(--card-t);
  transform-origin: center bottom;
  transform: rotateX(90deg);
  --edge-angle: 0deg;
}
.card-edge--bottom {
  left: var(--card-r); right: var(--card-r);
  bottom: calc(-1 * var(--card-t)); height: var(--card-t);
  transform-origin: center top;
  transform: rotateX(-90deg);
  --edge-angle: 180deg;
}

/* Mặt sau — với biên độ nghiêng hiện tại thì không nhìn thấy, nhưng có nó thì
   khối mới kín, không hở khi nghiêng mạnh */
.card-back {
  inset: 0; border-radius: var(--r-card);
  background:
    radial-gradient(70% 55% at 50% 45%, #2A1550, #1A1240 60%, #120C2C 100%);
  box-shadow: inset 0 0 0 2px #8A7047;
  transform: translateZ(calc(-1 * var(--card-t)));
}
.card-glow {
  position: absolute; inset: -34% -30%; z-index: 1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(242, 205, 149, .3) 0%, rgba(122, 76, 127, .45) 40%, transparent 72%);
  filter: blur(18px);
  animation: pulse 5.5s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: .75; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* — cô phù thuỷ bên phải — */
.hero-witch {
  position: absolute; z-index: 2;
  right: -2%; bottom: 0; width: min(50%, 760px);
  pointer-events: none;
  -webkit-mask-image: radial-gradient(72% 78% at 58% 46%, #000 55%, transparent 100%);
  mask-image: radial-gradient(72% 78% at 58% 46%, #000 55%, transparent 100%);
}
.hero-witch img { width: 100%; height: auto; }
.witch-fallback { display: none; }
.hero-witch.is-missing picture { display: none; }
.hero-witch.is-missing {
  right: -3%; bottom: -6%; width: min(26%, 350px);
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.hero-witch.is-missing .witch-fallback {
  display: block; position: relative; aspect-ratio: 4 / 5; opacity: .34;
  filter: drop-shadow(0 0 40px rgba(160, 110, 220, .5));
}
.witch-fallback svg { width: 100%; height: 100%; }

/* ══════════════════ SECTION CHUNG ══════════════════ */
.section {
  position: relative; z-index: 1;
  padding: clamp(80px, 10vw, 130px) 0;
  background: transparent;   /* khung cảnh cố định của hero hiện xuyên qua */
}
.section-alt {
  z-index: 1;
  /* vẫn phân biệt được với section thường, nhưng bằng lớp mờ chứ không đục */
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(60, 34, 92, .30), transparent 62%),
    linear-gradient(180deg, rgba(13, 6, 24, .34), rgba(13, 6, 24, .20));
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  border-block: 1px solid var(--line-soft);
}

.section-head { max-width: 720px; margin: 0 auto clamp(46px, 5vw, 70px); text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 20px; margin-bottom: 20px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--c-veil-strong);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--e-lift-sm);
  font-family: var(--font-serif); font-size: 15px; letter-spacing: .14em;
  color: var(--gold);
}
.section-head h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(30px, 3.6vw, 50px); line-height: 1.18; color: var(--c-text);
  text-shadow: 0 0 40px rgba(122, 76, 127, .5);
}
.section-head p { margin-top: 18px; font-size: 1.25rem; color: var(--c-text-soft); }

.icon { width: 100%; height: 100%; }

/* ── card chung ── */
.spread-card, .feature-card, .plan-card, .testimonial {
  position: relative; border-radius: var(--radius);
  border: 1px solid var(--line-soft);
  background: linear-gradient(160deg, var(--c-veil-raise), var(--c-veil));
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: var(--e-lift);
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
/* vệt sáng mảnh ở mép trên — thứ khiến thẻ trông có độ dày thật */
.spread-card::before, .feature-card::before, .plan-card::before, .testimonial::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  pointer-events: none;
}
.spread-card:hover, .feature-card:hover, .plan-card:hover, .testimonial:hover {
  transform: translateY(-6px);
  border-color: var(--c-line);
  box-shadow: var(--e-lift-lg), 0 0 60px -30px rgba(208, 177, 130, .5);
}

/* ══════════════════ TRẢI BÀI ══════════════════ */
.spread-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px; }
.spread-card { display: flex; flex-direction: column; padding: 36px 32px 30px; }
.spread-card.is-featured {
  border-color: var(--c-line);
  background: linear-gradient(160deg, rgba(122, 76, 127, .38), var(--c-veil-raise));
  box-shadow: var(--e-lift-lg), 0 0 70px -34px rgba(208, 177, 130, .55);
}
.spread-tag {
  position: absolute; top: 22px; right: 24px;
  padding: 5px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line);
  font-family: var(--f-ui); font-size: 12.5px; letter-spacing: .06em; color: var(--c-gold);
  background: var(--c-veil-strong);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: var(--e-lift-sm);
}
.spread-icon {
  display: grid; place-items: center; width: 54px; height: 54px; padding: 13px;
  border-radius: 16px; color: var(--gold-bright);
  background: linear-gradient(145deg, rgba(208, 177, 130, .22), rgba(208, 177, 130, .04));
  border: 1px solid var(--line);
  box-shadow: var(--e-lift-sm);
}
.spread-count {
  margin-top: 24px; font-family: var(--f-ui); font-size: var(--f-caption);
  font-weight: 500; letter-spacing: var(--f-ls-label); text-transform: uppercase;
  color: var(--t-accent-lilac);
}
.spread-card h3 {
  margin-top: 6px; font-family: var(--font-display);
  font-size: 26px; font-weight: 600; color: var(--c-text);
}
.spread-desc { margin-top: 14px; font-size: 1.125rem; color: var(--c-text-soft); flex: 1; }
.spread-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line-soft);
}
.spread-time { font-size: 14px; color: var(--text-mute); }
.link-arrow { font-size: 15px; font-weight: 500; color: var(--gold); }
.link-arrow span { display: inline-block; transition: transform .3s var(--ease); }
.link-arrow:hover span { transform: translateX(5px); }

/* ══════════════════ KHÁM PHÁ ══════════════════ */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; }
.feature-card { padding: 34px 28px; }
.feature-icon {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 12px;
  border-radius: 14px; color: var(--gold-bright);
  background: rgba(208, 177, 130, .1); border: 1px solid var(--line);
  box-shadow: var(--e-lift-sm);
}
.feature-card h3 { margin-top: 22px; font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.feature-card p { margin-top: 12px; font-size: 1.0625rem; color: var(--c-text-soft); }

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px; margin-top: 56px; padding: 38px 30px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(120deg, rgba(208, 177, 130, .10), rgba(122, 76, 127, .26)), var(--c-veil);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--e-lift);
  text-align: center;
}
.stat strong {
  display: block; font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 44px);
  font-weight: 600; color: var(--gold-bright); text-shadow: 0 0 30px rgba(208, 177, 130, .4);
}
.stat span { font-size: 14.5px; color: var(--text-mute); letter-spacing: .04em; }

/* ══════════════════ GÓI THÀNH VIÊN ══════════════════ */
.plan-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 26px; align-items: stretch;
}
.plan-card { display: flex; flex-direction: column; padding: 40px 32px 34px; }
.plan-card.is-featured {
  border-color: rgba(208, 177, 130, .5);
  background: linear-gradient(165deg, rgba(122, 76, 127, .44), var(--c-veil-raise));
  box-shadow: var(--e-lift-lg), 0 0 90px -40px rgba(208, 177, 130, .65);
}
.plan-badge {
  position: absolute; top: -13px; left: 50%; translate: -50% 0;
  padding: 6px 20px; border-radius: var(--r-pill); white-space: nowrap;
  font-family: var(--f-ui); font-size: 12.5px; font-weight: 500;
  letter-spacing: .05em; color: var(--c-on-gold);
  background: var(--c-cta-gradient);
  box-shadow: var(--e-lift-sm), 0 10px 26px -12px rgba(242, 205, 149, .85);
}
.plan-name { font-family: var(--font-serif); font-size: 19px; letter-spacing: .16em; color: var(--gold); }
.plan-price { margin-top: 14px; display: flex; align-items: baseline; gap: 8px; }
.plan-price strong { font-family: var(--font-display); font-size: clamp(32px, 3.2vw, 42px); font-weight: 600; color: var(--c-text); }
.plan-price span { font-size: 14.5px; color: var(--text-mute); }
.plan-desc { margin-top: 12px; font-size: 1.0625rem; color: var(--c-text-soft); }
.plan-perks { margin: 26px 0 32px; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.plan-perks li { display: flex; align-items: flex-start; gap: 11px; font-size: 1.0625rem; color: var(--c-text-soft); }
.plan-perks .icon { width: 19px; height: 19px; flex-shrink: 0; margin-top: 3px; color: var(--gold); }

/* ══════════════════ CẢM NHẬN ══════════════════ */
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px; }
.testimonial { margin: 0; padding: 38px 32px 30px; }
.quote-mark {
  display: block; font-family: var(--font-display); font-size: 62px; line-height: .6;
  color: rgba(208, 177, 130, .55);
}
.testimonial blockquote {
  margin: 18px 0 0; font-family: var(--font-serif); font-size: 19.5px;
  font-weight: var(--f-w-med); line-height: 1.6; color: var(--c-text-body);
}
.testimonial figcaption { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.testimonial figcaption strong { display: block; font-weight: 500; color: var(--gold-bright); }
.testimonial figcaption span { font-size: 14px; color: var(--text-mute); }

/* ══════════════════ CTA ══════════════════ */
.cta-band {
  position: relative; z-index: 1; padding: clamp(80px, 10vw, 130px) 0; text-align: center; overflow: hidden;
  background:
    radial-gradient(70% 120% at 50% 100%, rgba(122, 76, 127, .42), transparent 62%),
    linear-gradient(180deg, rgba(13, 6, 24, .18), rgba(19, 11, 48, .42));
}
.cta-band::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .5;
}
.cta-inner h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, 3.8vw, 52px); line-height: 1.22; color: var(--c-text);
  text-shadow: 0 0 46px rgba(122, 76, 127, .6);
}
.cta-inner p { margin: 20px auto 38px; max-width: 560px; font-size: 1.25rem; color: var(--c-text-soft); }

/* ══════════════════ FOOTER ══════════════════ */
.site-footer {
  position: relative; z-index: 1; padding: clamp(60px, 7vw, 90px) 0 34px;
  background: linear-gradient(180deg, rgba(0, 1, 14, .62), rgba(0, 1, 14, .88));
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  overflow: hidden;
}
.footer-glow {
  position: absolute; top: -160px; left: 50%; translate: -50% 0;
  width: 900px; height: 320px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(122, 76, 127, .5), transparent 70%);
  filter: blur(30px);
}
.footer-inner {
  position: relative; display: grid;
  grid-template-columns: minmax(280px, 1.5fr) repeat(3, minmax(140px, 1fr));
  gap: 46px 32px;
}
.footer-tagline { margin-top: 18px; font-family: var(--font-serif); font-size: 18px; color: var(--text-soft); }
.footer-col h4 {
  font-family: var(--font-serif); font-size: 16px; letter-spacing: .14em; color: var(--gold);
  margin-bottom: 18px;
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a { font-size: 1.0625rem; color: var(--c-text-soft); transition: color .25s var(--ease); }
.footer-col a:hover { color: var(--gold-bright); }

.subscribe { position: relative; display: flex; gap: 10px; margin-top: 24px; max-width: 400px; flex-wrap: wrap; }
.subscribe input {
  flex: 1; min-width: 190px; padding: 12px 18px;
  border-radius: var(--r-pill); border: 1px solid var(--line-soft);
  background: var(--c-veil); color: var(--text); font-size: 15px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--e-lift-sm);
}
.subscribe input::placeholder { color: var(--c-text-mute); }
.subscribe input:focus { outline: none; border-color: var(--gold); background: rgba(208, 177, 130, .07); }
.form-msg { flex-basis: 100%; min-height: 20px; font-family: var(--f-ui); font-size: 14px; color: var(--c-gold); }
.form-msg.is-error { color: #E7A6B6; }  /* trạng thái lỗi — không có trong mẫu, chọn hồng lạnh để không lẫn với vàng */

.footer-bottom {
  position: relative; display: flex; flex-wrap: wrap; gap: 10px 30px;
  justify-content: space-between; align-items: center;
  margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--line-soft);
  font-family: var(--f-ui); font-size: 13.5px; color: var(--c-text-mute);
}
.footer-note { max-width: 520px; }

/* ══════════════════ 404 ══════════════════ */
.notfound { padding: 220px 0 140px; text-align: center; }
.notfound h1 { font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 56px); font-weight: 600; margin-top: 14px; }

/* ══════════════════ REVEAL ══════════════════ */
.js [data-reveal] { opacity: 0; transform: translateY(26px); }
.js [data-reveal].is-visible {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease) var(--d, 0ms), transform .8s var(--ease) var(--d, 0ms);
}

/* ══════════════════ RESPONSIVE ══════════════════ */
@media (max-width: 1180px) {
  .site-nav > ul { gap: 22px; }
  .nav-link { font-size: 15px; }
  .header-login { margin-left: 12px; padding: 10px 20px; font-size: 14.5px; }
  .brand-main { font-size: 26px; }
  .hero-witch { width: 52%; opacity: .85; }
}

@media (max-width: 980px) {
  .container { padding-inline: 22px; }

  .nav-toggle { display: flex; }
  .header-login { display: none; }
  .site-nav {
    position: fixed; inset: 0 0 auto 0; margin: 0;
    padding: 92px 24px 34px;
    background: rgba(13, 6, 24, .97);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    transform: translateY(-102%); transition: transform .45s var(--ease);
  }
  .site-nav.is-open { transform: none; }
  .site-nav > ul { flex-direction: column; align-items: flex-start; gap: 22px; }
  .nav-link { font-size: 19px; font-family: var(--font-serif); }
  .nav-login-mobile { display: block; margin-top: 8px; }

  .hero { padding-top: 120px; min-height: auto; }
  .hero-inner { grid-template-columns: 1fr; gap: 10px; text-align: center; }
  .hero-copy { padding-bottom: 0; }
  .hero-sub { margin: var(--s-5) auto 32px; }
  .underline-swash { left: 11%; width: 78%; }
  .hero-stage {
    /* Ở bản xếp dọc, lá bài nằm ngay dưới nút CTA. 24px là quá sát — nút mất
       chỗ thở và mắt đọc bị hai khối kéo về hai phía. */
    min-height: 300px;
    margin-top: clamp(72px, 20vw, 120px);
    /* Bám đúng bề rộng lá bài. Nếu để sân khấu chiếm trọn bề ngang, lớp
       .cardfx (rộng 260% của nó) sẽ thò hẳn ra ngoài màn hình điện thoại. */
    width: clamp(153px, 14vw, 213px);
    margin-inline: auto;
  }
  .hero-witch {
    right: -12%; bottom: -4%; width: 74%; opacity: .32; z-index: 1;
  }
  .hero-table { bottom: -14%; width: 120vw; opacity: .4; }
  .hero-moon { width: 130px; height: 130px; top: 6%; right: 6%; }

  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .hero-title { font-size: 40px; }
  .btn-hero { width: 100%; padding: 18px 30px; }
  .tarot-card { width: 148px; }
  .hero-stage { min-height: 250px; }
  .spread-card, .plan-card, .testimonial { padding: 30px 24px; }
  .stats { padding: 28px 20px; }
  .footer-inner { grid-template-columns: 1fr; gap: 34px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* Trên thiết bị cảm ứng, nền vẫn đứng yên như trên máy tính. Trước đây ở đây
   trả .hero-bg về `absolute` vì sợ giật, nhưng làm vậy thì khung cảnh cuộn đi
   mất — khác hẳn hành vi trên máy tính.
   Bù lại, chuyển động theo con trỏ vốn đã tắt sẵn trên cảm ứng (parallax.js
   chỉ gắn pointermove khi `hover: hover`), nên phần nền chỉ còn phải vẽ lại
   theo cuộn, đủ nhẹ. */
@media (hover: none) {
  .scene-layer { will-change: auto; }   /* bớt lớp hợp thành cho máy yếu */
}