/* Hiệu ứng hiện dần khi cuộn + tiêu đề căn giữa + chữ nhấn. Chỉ ẩn nội dung khi JS đã chạy (html.js), nên không bao giờ mất chữ nếu JS lỗi. */

/* ---------- Tiêu đề section: căn giữa, viết thẳng ra ---------- */
.lp .lp-head{max-width:920px;margin:0 auto 44px;text-align:center}
.lp .lp-head h2{max-width:none;margin:0 auto 14px;text-wrap:balance;font-size:clamp(1.8rem,3.6vw,2.9rem);line-height:1.18}
.lp .lp-head p{max-width:640px;margin:0 auto;font-size:1.05rem}
.lp .lp-pain h2{text-align:center;max-width:none;margin-inline:auto;margin-bottom:34px;text-wrap:balance;font-size:clamp(1.8rem,3.6vw,2.9rem)}
.lp .pain-answer{text-align:center;margin:34px auto 0;max-width:820px}
.lp .lp-faq{display:block}
.lp .lp-faq .faq-list{max-width:840px;margin-inline:auto}
.lp .lp-always .always-inner{justify-content:center}
.lp .lp-final-inner{flex-direction:column;align-items:center;text-align:center;gap:26px}
.lp .lp-final h2{margin-inline:auto;text-wrap:balance}
@media(max-width:760px){.lp .lp-head{margin-bottom:30px}}

/* ---------- Chữ nhấn: chữ đổi màu (không tô nền) ---------- */
.lp{--hl-color:var(--accent)}
.lp-pain{--hl-color:#ffd878}
.lp-always,.lp-final{--hl-color:#ffe39a}
.hl{color:inherit;font-weight:inherit;background:none;transition:color .8s ease .4s}
.hl-dark{font-weight:700}
html:not(.js) .hl{color:var(--hl-color)}
html.js [data-rv].in .hl,html.js [data-rv-group].in .hl{color:var(--hl-color)}
.lp-hero h1 .hl{transition-delay:.75s;white-space:nowrap}

/* ---------- Trạng thái ẩn trước khi hiện ----------
   Dùng thuộc tính translate/scale/rotate riêng (không đụng `transform`) để không đè hover hay vị trí vốn có của từng thẻ. */
html.js [data-rv],html.js [data-rv-group]>*{opacity:0;will-change:translate,scale,rotate,opacity}
html.js [data-rv-group]{opacity:1}
html.js [data-rv].in:not(.rv-done),html.js [data-rv-group].in:not(.rv-done)>*{transition:opacity .8s ease,translate .85s cubic-bezier(.2,.8,.2,1),scale .85s cubic-bezier(.2,.8,.2,1),rotate .85s cubic-bezier(.2,.8,.2,1),filter .8s ease;transition-delay:calc(var(--i,0) * 110ms)}
html.js .rv-done,html.js .rv-done>*{will-change:auto}

html.js [data-rv=up],html.js [data-rv-group=up]>*{translate:0 28px}
html.js [data-rv=zoom]{translate:0 24px;scale:.94}
html.js [data-rv-group=tilt]>*{translate:0 34px;rotate:-2.4deg}
html.js [data-rv-group=tilt]>*:nth-child(2){rotate:1.8deg}
html.js [data-rv-group=tilt]>*:nth-child(3){rotate:-1.4deg}
html.js [data-rv-group=pop]>*{translate:0 24px;scale:.9}
html.js [data-rv-group=pop].in:not(.rv-done)>*{transition-timing-function:cubic-bezier(.2,1.4,.4,1)}
html.js [data-rv-group=flow]>*{translate:-26px 0}
html.js [data-rv-group=flip]{perspective:800px}
html.js [data-rv-group=flip]>*{translate:0 26px;rotate:1 0 0 -26deg;transform-origin:50% 100%}
html.js [data-rv=burst]{scale:.55;filter:blur(14px)}
html.js [data-rv=burst].in:not(.rv-done){transition-duration:1s;transition-timing-function:cubic-bezier(.2,1.2,.3,1)}
html.js [data-rv-group=plans]>*{translate:0 34px}
html.js [data-rv-group=plans]>:first-child{translate:-34px 0}
html.js [data-rv-group=plans]>.plan-featured{translate:0 40px;scale:.94}
html.js [data-rv-group=plans].in:not(.rv-done)>.plan-featured{transition-delay:.18s;transition-timing-function:cubic-bezier(.2,1.3,.4,1)}

/* trạng thái đã hiện: đặt SAU các trạng thái ẩn và đặc hiệu hơn (:nth-child(n)) để luôn thắng */
html.js [data-rv].in,html.js [data-rv-group].in>*:nth-child(n){opacity:1;translate:none;scale:none;rotate:none;filter:none}

/* số bước nhảy ra, quyền lợi hiện lần lượt */
html.js .flow-no,html.js .step-no{scale:.3;opacity:0}
html.js .flow.in .flow-no,html.js .steps.in .step-no{scale:1;opacity:1;transition:scale .6s cubic-bezier(.2,1.6,.4,1),opacity .4s ease;transition-delay:calc(var(--i,0) * 110ms + .3s)}
html.js [data-rv-group=plans] .plan-list li{opacity:0;translate:-10px 0}
html.js [data-rv-group=plans].in .plan-list li{opacity:1;translate:none;transition:opacity .5s ease,translate .5s ease;transition-delay:calc(.5s + var(--j,0) * 70ms)}
/* nút CTA cuối thở nhẹ sau khi hiện */

/* ---------- Thanh tiến độ cuộn ở đầu trang ---------- */
.lp-header{position:sticky}
.lp-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,#f5b625,#ffe08a);transform-origin:0 50%;transform:scaleX(var(--p,0));pointer-events:none}

@media(prefers-reduced-motion:reduce){
  html.js [data-rv],html.js [data-rv-group]>*,html.js [data-rv-group=plans] .plan-list li,html.js .flow-no,html.js .step-no{opacity:1!important;translate:none!important;scale:none!important;rotate:none!important;filter:none!important;transition:none!important;animation:none!important}
  .hl{color:var(--hl-color);transition:none}
}