/* ═══════════════════════════════════════════════════════════════════════════
   RadiantX Retinol · Special Event 15–25/8 — stylesheet riêng
   Soạn 06/08/2026 · sửa 06/08 theo góp ý Hùng
   KHÔNG dùng lại ss-styles.css của landing (113KB, phần lớn không cần).

   Nguyên tắc sau vòng góp ý:
   · Không đặt nguyên bản slide KV lên trang. Các khối kết cấu / cộng hưởng /
     loại da đều dựng lại bằng HTML+SVG, chỉ mượn ảnh chụp thật (mặt người,
     hình kiểm nghiệm) làm bằng chứng.
   · Nền trang do JS đổi theo tiến độ cuộn. Quầng sáng ở khối công thức nở ra
     tràn màn hình rồi đổi hẳn tông nền cho các khối phía dưới.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"GB";src:url("fonts/body-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"GB";src:url("fonts/body-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"GB";src:url("fonts/body-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"GB";src:url("fonts/body-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"GD";src:url("fonts/disp-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"GD";src:url("fonts/disp-900.woff2") format("woff2");font-weight:900;font-display:swap}

:root{
  --violet:#4A22D8;  --violet-lo:#26109A;  --violet-hi:#7C5CFF;
  --night:#08041F;   --teal:#0B3C4A;       --dawn:#FF7A3C;
  --gold:#FFD98A;    --lemon:#FFD300;      --aqua:#7FE9FF;
  --cream:#F2E7CE;
  --ink:#F4F2FF;     --muted:rgba(244,242,255,.64);  --faint:rgba(244,242,255,.36);
  --line:rgba(255,255,255,.12);
  --fd:"GD","GB",system-ui,sans-serif;
  --fb:"GB",system-ui,-apple-system,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(20px,5vw,64px);
  --bg1:#3A1BD8; --bg2:#150A45;     /* JS ghi đè khi cuộn */
  --bloom:0; --bloomO:0;            /* quầng sáng nở ra ở khối công thức */
  --smear:0;                        /* tiến độ tán kem 0→1 */
}

*{box-sizing:border-box;margin:0;padding:0}
/* overflow-x phải đặt ở CẢ html lẫn body.
   Chỉ đặt ở body là KHÔNG đủ — đo trên máy thật ngày 10/08/2026 ở khổ 500px:
   body có overflow-x:hidden nhưng html vẫn `visible`, trang trượt ngang được
   114,5px. Thủ phạm là .ticker-row (dải chữ chạy, rộng 2685px) và .pin-disc
   (vòng tròn phóng to, 2755px) — hai khối cố tình rộng hơn màn hình.

   Dùng `clip` chứ KHÔNG dùng `hidden` cho html: `hidden` biến html thành vùng
   cuộn và sẽ làm chết `position:sticky` của khối .pin-in. Đã kiểm sau khi vá:
   hết trượt ngang, sticky vẫn chạy.
   Landing page 10kss cũng vá đúng kiểu này — ss-styles.css khối mobile. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  overflow-x:clip;max-width:100%}
body{font-family:var(--fb);color:var(--ink);background:var(--night);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

.sky{position:fixed;inset:0;z-index:-3;
  background:radial-gradient(120% 90% at 50% 8%, var(--bg1) 0%, var(--bg2) 55%, var(--night) 100%);
  transition:background .3s linear}
/* Quầng sáng nở — nằm TRÊN .sky, DƯỚI nội dung. Khi --bloom lớn nó phủ kín màn. */
.bloom{position:fixed;inset:0;z-index:-2;pointer-events:none;display:grid;place-items:center;overflow:hidden}
.bloom i{display:block;width:52vmin;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(150,120,255,.95) 0%,rgba(74,34,216,.55) 42%,rgba(20,10,70,0) 72%);
  filter:blur(24px);transform:scale(var(--bloom));opacity:var(--bloomO);will-change:transform,opacity}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.45;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:3px 3px}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:var(--pad)}
section{position:relative;padding-block:clamp(72px,11vh,140px)}

/* ── CHỮ ────────────────────────────────────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--fd);font-weight:800;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold);opacity:.6}
h1,h2,h3{font-family:var(--fd);font-weight:900;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(44px,9.5vw,116px);text-transform:uppercase}
h2{font-size:clamp(30px,5.2vw,62px);text-transform:uppercase}
h3{font-size:clamp(20px,2.4vw,30px);letter-spacing:-.01em}
.lead{font-size:clamp(16px,1.9vw,20px);color:var(--muted);max-width:62ch;text-wrap:pretty}
.small{font-size:13.5px;color:var(--faint);line-height:1.55}
.hl{color:var(--gold)} .hl-a{color:var(--aqua)}

.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.09s}.rv-d2{transition-delay:.18s}
.rv-d3{transition-delay:.27s}.rv-d4{transition-delay:.36s}
.line-mask{display:block;overflow:hidden}
.line-mask > span{display:block;transform:translateY(104%);transition:transform .95s var(--ease)}
.in .line-mask > span{transform:none}
.line-mask:nth-child(2) > span{transition-delay:.1s}
.line-mask:nth-child(3) > span{transition-delay:.2s}

/* ── HERO ───────────────────────────────────────────────────────────────── */
.hero{min-height:100svh;display:grid;align-items:center;padding-top:clamp(90px,14vh,150px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
.hero-badge{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;
  border:1px solid rgba(255,217,138,.4);background:rgba(255,217,138,.09);font-family:var(--fd);
  font-weight:800;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:22px}
.hero-badge .dot{width:7px;height:7px;border-radius:99px;background:var(--gold);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}
.hero h1 .thin{font-weight:800;color:var(--violet-hi)}
.hero .lead{margin-top:24px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--fd);
  font-weight:800;font-size:14px;letter-spacing:.05em;padding:17px 30px;border-radius:99px;border:0;
  cursor:pointer;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s}
.btn-p{background:var(--gold);color:#1A0B08;box-shadow:0 10px 34px rgba(255,217,138,.28)}
.btn-p:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(255,217,138,.4)}
.btn-g{background:rgba(255,255,255,.07);color:var(--ink);border:1px solid var(--line);backdrop-filter:blur(10px)}
.btn-g:hover{background:rgba(255,255,255,.13)}

.hero-tube{position:relative;display:grid;place-items:center}
/* Tuýp tỉ lệ 1:3.68 — khống chế theo CHIỀU CAO, không phải chiều rộng */
.hero-tube img{height:min(66svh,600px);width:auto;max-width:88%;
  filter:drop-shadow(0 40px 70px rgba(0,0,0,.65));will-change:transform}
.halo{position:absolute;width:74%;aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(124,92,255,.55) 0%,rgba(74,34,216,.18) 45%,transparent 70%);
  filter:blur(28px);animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.13);opacity:1}}

/* ── HÀNH TRÌNH MỘT ĐÊM (thay 3 box tĩnh) ────────────────────────────────
   Một đường dọc chạy xuyên qua các mốc giờ. JS đẩy --jr 0→1 theo tiến độ
   cuộn; đường sáng dâng lên tới đâu thì mốc đó bật sáng tới đó.           */
.jr{position:relative;margin-top:52px;padding-left:clamp(46px,7vw,78px)}
.jr::before{content:"";position:absolute;left:clamp(17px,2.6vw,29px);top:8px;bottom:8px;width:2px;
  background:rgba(255,255,255,.1);border-radius:2px}
.jr::after{content:"";position:absolute;left:clamp(17px,2.6vw,29px);top:8px;width:2px;border-radius:2px;
  height:calc(var(--jr,0) * (100% - 16px));
  background:linear-gradient(180deg,var(--violet-hi),#9B7BFF 45%,var(--gold));
  box-shadow:0 0 18px rgba(124,92,255,.75)}
.jrs{position:relative;padding-block:clamp(20px,3.4vh,34px)}
.jrs .bead{position:absolute;left:calc(-1 * clamp(46px,7vw,78px) + clamp(9px,1.7vw,21px));top:clamp(24px,3.8vh,40px);
  width:18px;height:18px;border-radius:50%;background:var(--night);border:2px solid rgba(255,255,255,.22);
  display:grid;place-items:center;transition:border-color .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.jrs .bead::after{content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2);
  transition:background .5s var(--ease)}
.jrs.on .bead{border-color:var(--violet-hi);box-shadow:0 0 0 6px rgba(124,92,255,.16);transform:scale(1.12)}
.jrs.on .bead::after{background:var(--gold)}
.jrs .hr{font-family:var(--fd);font-weight:900;font-size:clamp(30px,4.4vw,52px);line-height:1;
  letter-spacing:-.03em;color:rgba(255,255,255,.22);transition:color .6s var(--ease)}
.jrs.on .hr{color:var(--violet-hi)}
.jrs h3{margin:10px 0 7px;font-size:clamp(17px,2vw,22px)}
.jrs p{font-size:14.5px;color:var(--muted);line-height:1.5;max-width:46ch}
.jrs .tag{display:inline-block;margin-top:12px;font-family:var(--fd);font-weight:800;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:99px;
  border:1px solid rgba(255,255,255,.16);color:var(--faint);
  transition:color .5s,border-color .5s,background .5s}
.jrs.on .tag{color:var(--gold);border-color:rgba(255,217,138,.4);background:rgba(255,217,138,.09)}
/* biến thể dùng cho lộ trình 5 tuần: thêm thanh mức độ */
.jrs .meter{height:3px;border-radius:3px;background:rgba(255,255,255,.1);margin-top:16px;max-width:280px;overflow:hidden}
.jrs .meter i{display:block;height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,var(--violet-hi),var(--gold));transition:width 1s var(--ease) .15s}
.jrs.on .meter i{width:var(--w,33%)}

.ticker{overflow:hidden;border-block:1px solid var(--line);padding-block:15px}
.ticker-row{display:flex;gap:44px;white-space:nowrap;width:max-content;animation:slide 34s linear infinite;
  font-family:var(--fd);font-weight:800;font-size:12px;letter-spacing:.19em;text-transform:uppercase;color:var(--faint)}
.ticker-row b{color:var(--gold);font-weight:800}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── KẾT CẤU · VỆT KEM TÁN DỌC THEO SCROLL ──────────────────────────────────
   Đặt DỌC theo yêu cầu: tuýp to hơn hẳn, vệt kem chảy từ trên xuống nên nhìn
   rõ chất kem. Nét kem là stroke dày bo tròn đầu; JS đẩy --smear 0→1, CSS quy
   ra stroke-dashoffset. Dao trét bám ở đầu nét qua offset-path.             */
.smear-stage{position:relative;margin-top:40px;border-radius:clamp(20px,3vw,34px);overflow:hidden;
  background:linear-gradient(165deg,rgba(124,92,255,.2),rgba(8,4,31,.6));
  border:1px solid var(--line);padding:clamp(20px,3vw,40px);
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(10px,2vw,30px);
  min-height:min(78svh,720px)}
.smear-stage svg{width:100%;height:min(66svh,620px);display:block;overflow:visible}
.smear-path{fill:none;stroke:url(#creamGrad);stroke-linecap:round;stroke-width:118;
  stroke-dasharray:var(--len);stroke-dashoffset:calc(var(--len) * (1 - var(--smear)));
  filter:url(#creamSoft)}
.smear-sheen{fill:none;stroke:rgba(255,255,255,.55);stroke-linecap:round;stroke-width:18;
  stroke-dasharray:var(--len);stroke-dashoffset:calc(var(--len) * (1 - var(--smear)));opacity:.5}
.spatula{transform-box:fill-box;transform-origin:center;
  offset-path:path("M 210 70 C 90 250, 330 470, 200 700 S 100 1050, 220 1180");
  offset-distance:calc(var(--smear) * 100%);offset-rotate:auto;
  opacity:calc(min(var(--smear),.06) * 16)}
.smear-tube{justify-self:center;height:min(62svh,580px);width:auto;
  filter:drop-shadow(0 34px 60px rgba(0,0,0,.7));pointer-events:none}
.smear-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;justify-content:center}
.chip{font-family:var(--fd);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  padding:10px 18px;border-radius:99px;background:rgba(242,231,206,.13);border:1px solid rgba(242,231,206,.3);
  color:var(--cream);opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.chip.on{opacity:1;transform:none}

/* ── KHỐI GHIM · VÒNG TRÒN NỞ TRÀN MÀN ──────────────────────────────────────
   .pin cao 300svh; bên trong .pin-in ghim lại 1 màn hình. Cuộn trong đoạn đó
   KHÔNG đẩy trang đi mà chỉ đẩy --pin 0→1 → vòng tròn vừa đổi màu vừa phóng
   to tới khi phủ kín màn. Hết đoạn mới cuộn tiếp xuống nội dung dưới.
   Không chặn scroll bằng JS (làm vậy hỏng trên iOS) — dùng chiều cao thật.  */
.pin{height:300svh;position:relative}
.pin-in{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:hidden}
.pin-disc{position:absolute;width:min(58vmin,420px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 42% 38%, var(--d1) 0%, var(--d2) 52%, var(--d3) 100%);
  transform:scale(var(--pinS,1));will-change:transform;
  box-shadow:0 0 90px 20px rgba(124,92,255,.35)}
.pin-ring{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.14);
  width:min(74vmin,540px);aspect-ratio:1;transform:scale(var(--pinR,1));opacity:var(--pinRO,1)}
.pin-ring.b{width:min(92vmin,660px);border-style:dashed;border-color:rgba(255,255,255,.09)}
.pin-tube{position:relative;z-index:3;height:min(46svh,420px);width:auto;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.75));
  transform:scale(var(--pinT,1));opacity:var(--pinTO,1)}
.pin-cap{position:absolute;bottom:clamp(22px,5vh,54px);left:0;right:0;text-align:center;z-index:4;
  font-family:var(--fd);font-weight:800;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);opacity:var(--pinCO,1);transition:opacity .3s}
.pin-hint{display:inline-flex;align-items:center;gap:8px}
.pin-hint i{width:24px;height:1px;background:currentColor;opacity:.5}

/* ── BÓC LỚP CÔNG THỨC ──────────────────────────────────────────────────── */
.layers-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,72px);align-items:start}
.layers-stick{position:sticky;top:0;height:100svh;display:grid;place-items:center}
.stack{position:relative;display:grid;place-items:center;width:100%;height:100%}
.stack img.tb{height:min(52svh,470px);width:auto;filter:drop-shadow(0 30px 60px rgba(0,0,0,.7));z-index:3}
.orb{position:absolute;width:min(64%,300px);aspect-ratio:1;border-radius:50%;opacity:0;transform:scale(.6);
  transition:opacity .7s var(--ease),transform .9s var(--ease);mix-blend-mode:screen}
.orb.on{opacity:1;transform:scale(1)}
.orb-1{background:radial-gradient(circle at 35% 32%,rgba(124,92,255,.95),rgba(74,34,216,.35) 48%,transparent 72%)}
.orb-2{background:radial-gradient(circle at 68% 34%,rgba(127,233,255,.85),rgba(30,120,200,.3) 46%,transparent 70%)}
.orb-3{background:radial-gradient(circle at 40% 70%,rgba(255,211,0,.75),rgba(255,122,60,.28) 46%,transparent 70%)}
.orb-4{background:radial-gradient(circle at 66% 68%,rgba(255,255,255,.7),rgba(160,190,255,.26) 46%,transparent 70%)}
.ring{position:absolute;width:min(78%,360px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.13);opacity:0;transform:scale(.85);
  transition:opacity .8s var(--ease),transform 1s var(--ease)}
.ring.on{opacity:1;transform:scale(1)}
.ring-2{width:min(94%,430px);border-style:dashed;border-color:rgba(255,255,255,.09)}

.layer{border-top:1px solid var(--line);padding-block:clamp(46px,9vh,90px);min-height:70svh;
  display:flex;flex-direction:column;justify-content:center;position:relative;z-index:2}
.layer:first-child{border-top:0}
.layer .num{font-family:var(--fd);font-weight:900;font-size:13px;letter-spacing:.2em;color:var(--faint);margin-bottom:14px}
.layer h3{margin-bottom:6px}
.layer .sub{font-family:var(--fd);font-weight:800;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.layer p{color:var(--muted);font-size:16px;max-width:52ch}
.stat{display:flex;gap:clamp(18px,3vw,38px);margin-top:26px;flex-wrap:wrap}
.stat div{min-width:104px}
.stat .n{font-family:var(--fd);font-weight:900;font-size:clamp(28px,3.6vw,42px);color:var(--ink);
  letter-spacing:-.02em;line-height:1}
.stat .l{font-size:12px;color:var(--faint);margin-top:7px;line-height:1.4}
.src{margin-top:20px;font-size:11.5px;color:var(--faint);line-height:1.5;padding-left:13px;
  border-left:2px solid rgba(255,255,255,.14)}

/* Ảnh kiểm nghiệm gắn ngay dưới thông số */
.proof{margin-top:22px;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.04)}
.proof img{width:100%}
.proof figcaption{font-size:11.5px;color:var(--faint);padding:11px 14px;line-height:1.5;
  border-top:1px solid var(--line)}
.proof-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
.proof-duo .proof{margin-top:0}
.proof figcaption b{color:var(--gold);font-weight:800}
.gagfig svg{width:100%;height:auto;display:block;padding:14px 10px 4px}

/* ── MA TRẬN CỘNG HƯỞNG (dựng lại, không dùng slide KV) ─────────────────── */
.matrix{margin-top:44px;border:1px solid var(--line);border-radius:24px;overflow:hidden;
  background:rgba(255,255,255,.035)}
.mrow{display:grid;grid-template-columns:1.15fr repeat(4,1fr);align-items:center;
  border-top:1px solid var(--line)}
.mrow:first-child{border-top:0}
.mrow.head{background:rgba(255,255,255,.05)}
.mcell{padding:clamp(13px,1.8vw,20px) clamp(8px,1.4vw,16px);text-align:center;font-size:13px}
.mcell:first-child{text-align:left;font-family:var(--fd);font-weight:800;font-size:14.5px;letter-spacing:-.01em}
.mrow.head .mcell{font-family:var(--fd);font-weight:800;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--gold);line-height:1.35}
.tick{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:9px;
  background:rgba(255,255,255,.07);color:transparent;font-size:13px;font-weight:800;
  transition:background .5s var(--ease),color .5s var(--ease),transform .5s var(--ease);transform:scale(.86)}
.in .tick.y{background:linear-gradient(150deg,var(--violet-hi),var(--violet));color:#fff;transform:none;
  box-shadow:0 5px 16px rgba(124,92,255,.45)}
.matrix-foot{padding:18px;text-align:center;font-family:var(--fd);font-weight:800;font-size:13px;
  letter-spacing:.05em;color:var(--gold);border-top:1px solid var(--line);background:rgba(124,92,255,.1)}

/* ── BÌNH MINH · MẶT TRỜI ───────────────────────────────────────────────────
   Vào khối: chói loá. Cuộn xuống thì tối dần THEO TIẾN ĐỘ (--sun 1→0), không
   phải bật/tắt một nhát. Mọi lớp đều là radial-gradient tan hết về trong suốt
   ở mép, và khối cha KHÔNG overflow:hidden — nên không thấy khung ảnh.      */
.dawn{text-align:center;position:relative}
.sunwrap{position:relative;height:clamp(300px,48svh,470px);display:grid;place-items:center;
  margin-bottom:6px;pointer-events:none}
.sun-core,.sun-rays,.sun-flare{position:absolute;border-radius:50%;pointer-events:none}
.sun-core{width:min(46vw,260px);aspect-ratio:1;
  background:radial-gradient(circle,rgba(255,255,255,var(--sunA,1)) 0%,rgba(255,233,176,calc(var(--sunA,1)*.95)) 24%,
    rgba(255,170,80,calc(var(--sunA,1)*.7)) 48%,rgba(255,122,60,calc(var(--sunA,1)*.22)) 68%,transparent 82%);
  filter:blur(calc(6px + (1 - var(--sun,1)) * 14px));
  transform:scale(calc(.62 + var(--sun,1) * .56))}
.sun-rays{width:min(160vw,1600px);aspect-ratio:1;mix-blend-mode:screen;
  opacity:calc(var(--sun,1) * var(--sun,1) * .85);
  transform:scale(calc(.7 + var(--sun,1) * .3));
  -webkit-mask-image:radial-gradient(circle,#000 8%,rgba(0,0,0,.65) 30%,transparent 62%);
          mask-image:radial-gradient(circle,#000 8%,rgba(0,0,0,.65) 30%,transparent 62%);
  background:conic-gradient(from 0deg,rgba(255,225,160,.55) 0deg,transparent 5deg,transparent 16deg,
    rgba(255,225,160,.45) 21deg,transparent 26deg,transparent 39deg,rgba(255,225,160,.5) 44deg,transparent 49deg,
    transparent 62deg,rgba(255,225,160,.4) 67deg,transparent 72deg,transparent 85deg,rgba(255,225,160,.5) 90deg,transparent 95deg);
  animation:spin 46s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sun-flare{width:min(130vw,1200px);aspect-ratio:1;filter:blur(40px);
  opacity:calc(.32 + var(--sun,1) * .68);transform:scale(calc(.72 + var(--sun,1) * .28));
  background:radial-gradient(circle,rgba(255,200,120,.4) 0%,rgba(255,122,60,.13) 34%,transparent 62%)}
/* lớp chói phủ màn — cũng tan hết ở mép, và tắt dần theo --sun */
.sun-glare{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--glare,0);
  background:radial-gradient(circle at 50% 40%,rgba(255,238,205,.5) 0%,rgba(255,190,120,.16) 26%,transparent 55%)}
.dawn h2{max-width:16ch;margin-inline:auto;position:relative;z-index:2}
.dawn .lead{margin:22px auto 0;position:relative;z-index:2}
.uv-note{display:inline-flex;align-items:center;gap:9px;margin-top:26px;padding:10px 18px;border-radius:99px;
  border:1px solid rgba(255,122,60,.4);background:rgba(255,122,60,.12);font-family:var(--fd);font-weight:800;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#FFC49A}

/* ── AI NÊN / KHÔNG NÊN ─────────────────────────────────────────────────── */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.6vw,30px);margin-top:44px}
.card{border:1px solid var(--line);border-radius:24px;padding:clamp(24px,3vw,36px);background:rgba(255,255,255,.035)}
.card.warn{border-color:rgba(255,122,60,.42);background:rgba(255,122,60,.09)}
.card h3{font-size:19px;margin-bottom:18px;display:flex;align-items:center;gap:10px}
.card ul{list-style:none;display:flex;flex-direction:column;gap:13px}
.card li{display:flex;gap:11px;font-size:15px;color:var(--muted);line-height:1.5}
.card li b{color:var(--ink);font-weight:700}
.card .mk{flex-shrink:0;width:19px;height:19px;border-radius:6px;display:grid;place-items:center;
  font-size:11px;font-weight:800;margin-top:2px}
.card .ok{background:rgba(127,233,255,.16);color:var(--aqua)}
.card .no{background:rgba(255,122,60,.2);color:var(--dawn)}

/* ── LOẠI DA · GỌN LẠI ────────────────────────────────────────────────────
   Ảnh thu về ô vuông nhỏ bên trái, chữ nằm cạnh — chiếm ít diện tích hơn hẳn
   so với bản thẻ dọc trước đó.                                             */
.skins{display:flex;flex-direction:column;gap:12px;margin-top:38px}
.skin{display:grid;grid-template-columns:clamp(78px,11vw,116px) 1fr;gap:clamp(14px,2.4vw,24px);
  align-items:center;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.035);
  padding:clamp(12px,1.8vw,16px);transition:border-color .45s,background .45s}
.skin:hover{border-color:rgba(124,92,255,.45);background:rgba(124,92,255,.09)}
.skin figure{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;display:block}
.skin img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.85) contrast(1.05)}
.skin .lb{font-family:var(--fd);font-weight:800;font-size:clamp(14px,1.7vw,17px);letter-spacing:.01em;
  margin-bottom:5px}
.skin p{font-size:14px;color:var(--muted);line-height:1.5;max-width:58ch}

/* ── 50 SUẤT ────────────────────────────────────────────────────────────── */
.fifty{text-align:center}
.grid50{display:grid;grid-template-columns:repeat(10,1fr);gap:clamp(6px,1vw,12px);max-width:640px;margin:46px auto 0}
.cell{aspect-ratio:1;border-radius:7px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.03);
  opacity:.28;transform:scale(.82);transition:opacity .5s var(--ease),transform .5s var(--ease),background .5s,box-shadow .5s}
.cell.lit{opacity:1;transform:none;background:linear-gradient(150deg,var(--violet-hi),var(--violet));
  border-color:transparent;box-shadow:0 5px 18px rgba(124,92,255,.45)}
.count{font-family:var(--fd);font-weight:900;font-size:clamp(56px,13vw,150px);line-height:.9;letter-spacing:-.04em;
  background:linear-gradient(180deg,#fff,var(--violet-hi));-webkit-background-clip:text;background-clip:text;color:transparent}
.deadline{display:inline-flex;gap:clamp(12px,2.4vw,26px);margin-top:36px;flex-wrap:wrap;justify-content:center}
.dl{border:1px solid var(--line);border-radius:16px;padding:16px 22px;min-width:88px;background:rgba(255,255,255,.04)}
.dl .n{font-family:var(--fd);font-weight:900;font-size:clamp(26px,3.4vw,38px);line-height:1}
.dl .l{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-top:8px}

/* ── FORM NGAY TRÊN TRANG ───────────────────────────────────────────────── */
.fbox{max-width:760px;margin:38px auto 0;border:1px solid var(--line);border-radius:26px;
  background:rgba(255,255,255,.04);padding:clamp(22px,3.4vw,40px);backdrop-filter:blur(10px)}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.8vw,18px)}
.f-full{grid-column:1/-1}
.fld{display:flex;flex-direction:column;gap:7px}
.fld label{font-family:var(--fd);font-weight:800;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}
.fld label .req{color:var(--gold)}
.fld input,.fld select,.fld textarea{width:100%;font-family:var(--fb);font-size:15px;color:var(--ink);
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:13px;padding:14px 15px;
  outline:none;transition:border-color .25s,background .25s}
.fld textarea{min-height:132px;resize:vertical;line-height:1.55}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--violet-hi);background:rgba(124,92,255,.1)}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(244,242,255,.3)}
.fld select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 19px) 22px,calc(100% - 13px) 22px;background-size:6px 6px,6px 6px;
  background-repeat:no-repeat}
.fld select option{background:#160B3C;color:var(--ink)}
.cnt{font-size:11.5px;color:var(--faint);text-align:right}
.gifts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.gift{cursor:pointer;border:1px solid var(--line);border-radius:15px;padding:15px;
  background:rgba(255,255,255,.04);transition:border-color .25s,background .25s}
.gift input{position:absolute;opacity:0;pointer-events:none}
.gift b{display:block;font-family:var(--fd);font-weight:800;font-size:14.5px;margin-bottom:4px}
.gift span{font-size:12.5px;color:var(--faint);line-height:1.45}
.gift:has(input:checked){border-color:var(--gold);background:rgba(255,217,138,.12)}
.fnote{font-size:12.5px;color:var(--faint);line-height:1.55;margin-top:18px;
  padding-left:13px;border-left:2px solid rgba(255,255,255,.14)}
.fmsg{margin-top:16px;border-radius:13px;padding:14px 16px;font-size:14px;line-height:1.5;display:none}
.fmsg.err{display:block;background:rgba(255,122,60,.13);border:1px solid rgba(255,122,60,.4);color:#FFC49A}
.fmsg.ok{display:block;background:rgba(127,233,255,.1);border:1px solid rgba(127,233,255,.35);color:var(--aqua)}
.fdone{text-align:center;padding:clamp(20px,4vw,44px) 0}
.fdone .big{font-family:var(--fd);font-weight:900;font-size:clamp(34px,6vw,62px);line-height:1;
  background:linear-gradient(180deg,#fff,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.spinner{width:18px;height:18px;border:2px solid rgba(0,0,0,.2);border-top-color:#1A0B08;
  border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

footer{border-top:1px solid var(--line);padding-block:44px;text-align:center}
footer .lg{font-family:var(--fd);font-weight:900;font-size:22px;letter-spacing:.16em}
footer p{font-size:12.5px;color:var(--faint);margin-top:10px}
footer .links{display:flex;gap:20px;justify-content:center;margin-top:18px;font-size:12.5px;color:var(--muted)}

.prog{position:fixed;top:0;left:0;height:2px;z-index:50;width:0;
  background:linear-gradient(90deg,var(--violet-hi),var(--gold))}
.sticky-cta{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:none;opacity:0;
  transform:translateY(80px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.sticky-cta.on{opacity:1;transform:none}
.sticky-cta .btn{width:100%}

/* ── MOBILE ─────────────────────────────────────────────────────────────────
   Bỏ hẳn sticky ở khối công thức. Trên 1 cột, phần tử sticky bị ghim trong
   khung nhìn suốt chiều dài cột chữ nên chữ cuộn ĐÈ LÊN tuýp — lỗi thấy được
   trên ảnh chụp màn hình Hùng gửi. Thay bằng khối ảnh tĩnh nằm trên đầu.    */
@media (max-width:900px){
  .hero-grid,.layers-grid,.fit,.duo{grid-template-columns:1fr}
  .hero{min-height:auto;padding-top:110px}
  .hero-tube{order:-1;margin-bottom:14px}
  .hero-tube img{height:min(38svh,330px);max-width:70%}
  .proof-duo,.fgrid,.gifts{grid-template-columns:1fr}
  .layers-stick{position:static;height:auto;margin-bottom:8px}
  .stack{height:clamp(230px,34svh,300px)}
  .stack img.tb{height:min(28svh,230px)}
  .orb{width:min(52%,210px)}
  .ring{width:min(64%,250px)} .ring-2{width:min(80%,300px)}
  .layer{min-height:auto;padding-block:40px}
  .smear-stage{grid-template-columns:1fr;min-height:auto;gap:6px}
  .smear-stage svg{height:min(46svh,420px)}
  .smear-tube{height:min(30svh,270px)}
  .pin{height:260svh}
  .pin-tube{height:min(34svh,300px)}
  .mrow{grid-template-columns:1fr repeat(4,minmax(0,46px))}
  .mcell{padding:12px 4px;font-size:12px}
  .mcell:first-child{font-size:13px}
  .mrow.head .mcell{font-size:9.5px;letter-spacing:.04em}
  .tick{width:22px;height:22px;border-radius:7px}
  .skin{grid-template-columns:66px 1fr;gap:14px}
  .grid50{gap:5px}
  .sticky-cta{display:block}
  section{padding-block:clamp(56px,8vh,90px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .line-mask > span{transform:none}
  .orb,.ring,.cell,.chip{opacity:1;transform:none}
  .smear-path,.smear-sheen{stroke-dashoffset:0}
  .spatula{opacity:1}
}

/* ── HỘP CHỨA FORM 5 BƯỚC (dùng chung với Landing page 10kss) ─────────────
   #ssform-host là ranh giới cách ly: toàn bộ assets/form/form.css đã được
   thêm tiền tố "#ssform-host " nên chỉ có hiệu lực bên trong hộp này.
   Component gốc tự vẽ thẻ trắng .form-box, nên hộp ngoài phải trong suốt và
   rộng hơn 760px của .fbox thường — form là bố cục hai cột.               */
.fbox--ssform{max-width:1080px;padding:0;background:none;border:none;backdrop-filter:none}
#ssform-host{display:block;width:100%;text-align:left}

.ssform-loading{display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:80px 20px;color:var(--faint);font-size:14px}
.ssform-loading .spinner{border-color:rgba(255,255,255,.2);border-top-color:var(--gold)}

.ssform-fallback{padding:44px 26px;text-align:center;color:var(--ink);
  border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.05)}
.ssform-fallback a{color:var(--gold)}
.ssform-err-detail{margin-top:12px;font-size:12px;color:var(--faint);word-break:break-word}