/* Bản thử landing có hiệu ứng 3D: chỉ ghi đè phần đầu trang, các mục bên dưới dùng chung landing.css */
.hero-3d { background: radial-gradient(1200px 700px at 78% 30%, #3a1d10 0%, #1a1310 45%, #120e0c 100%); color: #fff; padding: 56px 0 96px; }
.hero-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(520px 380px at 76% 42%, color-mix(in srgb, var(--brand) 38%, transparent), transparent 70%),
              radial-gradient(500px 300px at 8% 90%, rgba(255, 138, 76, .12), transparent 70%); }
.hero-3d .hero-in { position: relative; }
.hero-3d .pill { background: rgba(255, 255, 255, .08); color: #ffcfb3; box-shadow: inset 0 0 0 1px rgba(255, 180, 138, .25); }
.hero-3d h1 { color: #fff; }
.hero-3d .lead { color: rgba(255, 255, 255, .72); }
.hero-3d .hero-points { color: rgba(255, 255, 255, .7); }
.hero-3d .hero-points svg { color: #6fe3a1; }
.hero-3d .btn-ghost-dark { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); color: #fff; }
.hero-3d .btn-ghost-dark:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }

/* sân khấu 3D */
.stage { position: relative; height: 560px; }
.stage canvas { position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); display: block; touch-action: pan-y;
  /* mờ dần ở 4 mép để khối bay ra không bị cắt cứng */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect; }
.stage > .float, .stage > .scan-hint { display: none; }
.stage.webgl > .float { display: flex; }
.stage.webgl > .scan-hint { display: flex; }
.stage.webgl .hero-fallback { display: none; }
.stage .hero-fallback { height: 100%; align-items: center; }
.stage > .float { background: rgba(255, 255, 255, .96); color: var(--text); z-index: 2; }
.stage > .float.f1 { left: 0; top: 70px; }
.stage > .float.f2 { right: 0; bottom: 90px; }

.scan-hint { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; align-items: center; gap: 10px;
  padding: 8px 16px 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .85); white-space: nowrap; backdrop-filter: blur(6px); }
.scan-hint span { position: relative; width: 18px; height: 18px; border: 2px solid #ffb48a; border-radius: 4px; overflow: hidden; }
.scan-hint span::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: #ffb48a; box-shadow: 0 0 6px #ffb48a; animation: scanline 1.6s ease-in-out infinite; }
@keyframes scanline { 0%, 100% { top: 1px; } 50% { top: calc(100% - 3px); } }

.scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 24px; height: 38px; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .35); }
.scroll-cue span { position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

@media (max-width: 960px) {
  .stage { order: -1; height: 420px; }
  .scroll-cue { display: none; }
}
@media (max-width: 600px) {
  .hero-3d { padding: 8px 0 48px; }
  .stage { height: 330px; margin: 0 -16px; }
  .stage canvas { inset: 0; width: 100%; height: 100%; }
  .stage > .float.f1 { left: 12px; top: 18px; }
  .stage > .float.f2 { right: 12px; bottom: 54px; }
  .scan-hint { bottom: 6px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .scan-hint span::after, .scroll-cue span { animation: none; }
}

/* ---------- "Cách hoạt động": điện thoại 3D bên trái, các bước bên phải ---------- */
.how-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: start; }
/* điện thoại đứng yên trong lúc cuộn qua 3 bước */
.how-stage { position: sticky; top: 90px; height: 560px; }
.how-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.how-stage:not(.webgl) { display: none; }
.how-3d .steps { grid-template-columns: 1fr; max-width: none; margin: 0; gap: 14px; }
.how-3d .steps li { cursor: pointer; border: 2px solid transparent; transition: border-color .3s, box-shadow .3s, opacity .3s; }
.how-3d .steps li:not(.on) { opacity: .62; }
.how-3d .steps li.on { border-color: var(--brand); box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--brand) 55%, transparent); opacity: 1; }
.how-3d .steps li.on .step-no { color: color-mix(in srgb, var(--brand) 35%, #fff); }
.how-3d .steps li.on .step-ic { background: var(--brand); color: #fff; }

/* ---------- nền form đăng ký: khối 3D trôi ---------- */
.signup { position: relative; overflow: hidden; }
.field3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: .55; pointer-events: none; }
.signup .signup-in { position: relative; z-index: 1; }

/* ---------- thẻ nghiêng theo chuột + vệt sáng ---------- */
.tilt { position: relative; transform-style: preserve-3d; will-change: transform; }
.tilt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 55%); mix-blend-mode: soft-light; }
.tilt.tilting::after { opacity: 1; }
.tilt.tilting { box-shadow: 0 24px 50px -24px rgba(31, 26, 23, .35); }

@media (max-width: 960px) {
  .how-grid { grid-template-columns: 1fr; gap: 16px; }
  .how-stage { position: relative; top: auto; height: 440px; }
}
@media (max-width: 600px) {
  .how-stage { height: 380px; margin: 0 -16px; }
}

/* ---------- bảng giá: thẻ xếp vòng cung 3D ---------- */
.price-3d { overflow: hidden; }
.price-grid.cover { perspective: 1400px; transform-style: preserve-3d; }
.price-grid.cover .price { transform-origin: 50% 50%; backface-visibility: hidden;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1), box-shadow .4s, opacity .4s; opacity: .82; cursor: pointer; background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); }
.price-grid.cover .price.front { opacity: 1; cursor: default; box-shadow: 0 30px 60px -24px rgba(31, 26, 23, .35); }
.price-grid.cover .price.hot.front { box-shadow: 0 30px 70px -20px color-mix(in srgb, var(--brand) 60%, transparent); }
@media (max-width: 600px) {
  /* thanh kéo ngang: biến đổi chạy theo ngón tay nên không cần chuyển động trễ */
  .price-grid.cover { perspective: 900px; }
  .price-grid.cover .price { transition: box-shadow .3s, opacity .3s; }
}