/* Chuyển động khi cuộn cho landing. Chỉ bật khi JS gắn html.fx (và người dùng không chọn giảm chuyển động).
   Dùng thuộc tính translate/scale/rotate riêng + animation (không đụng transform và transition có sẵn của trang). */
html.fx [data-fx]:not(.in){opacity:0}
html.fx [data-fx].in{animation:var(--fx,fxUp) .95s cubic-bezier(.2,.75,.2,1) var(--d,0s) backwards}
html.fx [data-fx="line"].in{animation:none}
html.fx [data-fx="up"]{--fx:fxUp}
html.fx [data-fx="left"]{--fx:fxLeft}
html.fx [data-fx="right"]{--fx:fxRight}
html.fx [data-fx="zoom"]{--fx:fxZoom}
html.fx [data-fx="rot"]{--fx:fxRot}
html.fx [data-fx="drop"]{--fx:fxDrop}
html.fx [data-fx="wipe"]{--fx:fxWipe;animation-duration:1.15s!important}
html.fx [data-fx="pop"]{--fx:fxPop;animation-duration:.7s!important}

@keyframes fxUp{from{opacity:0;translate:0 56px}}
@keyframes fxLeft{from{opacity:0;translate:-80px 0}}
@keyframes fxRight{from{opacity:0;translate:80px 0}}
@keyframes fxZoom{from{opacity:0;scale:.78}}
@keyframes fxRot{from{opacity:0;rotate:-10deg;translate:0 60px;scale:.92}}
@keyframes fxDrop{from{opacity:0;translate:0 -70px;rotate:4deg}}
@keyframes fxWipe{from{opacity:1;clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes fxPop{0%{opacity:0;scale:.4}60%{opacity:1;scale:1.14}100%{scale:1}}

/* Tiêu đề chạy từng dòng từ dưới lên (mặt nạ cắt) */
.fxl{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.fxl>span{display:block}
html.fx .fxl>span{translate:0 112%}
html.fx .in .fxl>span,html.fx .fx-line-in .fxl>span{translate:0 0;transition:translate 1s cubic-bezier(.2,.8,.15,1) calc(var(--l,0)*.11s + var(--d,0s))}

/* Gạch chân chạy dưới chữ nhấn */
html.fx .lp-h2 em,html.fx .lp-h1 em{background:linear-gradient(currentColor,currentColor) 0 94%/0 2px no-repeat}
html.fx .in .lp-h2 em,html.fx .fx-line-in em{background-size:100% 2px;transition:background-size 1.1s cubic-bezier(.2,.8,.2,1) .5s}

/* Đường mũi tên tự vẽ */
html.fx .lp-art__arrow path,html.fx .lp-note-top svg path{stroke-dasharray:220;stroke-dashoffset:220}
html.fx .lp-art__arrow.in path,html.fx .lp-art__arrow.fx-done path,html.fx .lp-note-top.in svg path,html.fx .lp-note-top.fx-done svg path{
  stroke-dashoffset:0;transition:stroke-dashoffset 1.4s ease .6s}

/* Thanh tiến độ cuộn */
.fx-bar{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);z-index:90;pointer-events:none;
  background:linear-gradient(90deg,#E0562A,#F4B860)}
/* Vệt sáng bám con trỏ ở hero */
.fx-glow{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(520px circle at var(--gx,50%) var(--gy,40%),rgba(224,86,42,.20),transparent 62%);mix-blend-mode:screen}
.lp-hero:hover .fx-glow{opacity:1}
/* Nút "hút" theo con trỏ */
.lp-btn{will-change:translate}
/* ===== Lớp 2: sống động liên tục + tương tác ===== */
/* Trôi nhẹ không ngừng (dùng rotate/scale để không đụng parallax đang dùng translate) */
html.fx .fx-float.fx-done{animation:fxFloat var(--fl,7s) ease-in-out var(--fd,0s) infinite alternate}
@keyframes fxFloat{from{rotate:-1.6deg;scale:1}to{rotate:1.8deg;scale:1.03}}
html.fx .lp-globe svg{animation:fxSpin 42s linear infinite}
@keyframes fxSpin{to{rotate:360deg}}
/* Từ khoá lần lượt sáng lên */
html.fx .lp-kw span{animation:fxKw 7s ease-in-out infinite;animation-delay:calc(var(--i,0)*1.1s)}
@keyframes fxKw{0%,14%,100%{color:inherit;translate:0 0}5%,9%{color:#F4B860;translate:-8px 0}}
/* Từng chữ trong tiêu đề phản ứng khi rê/chạm */
.fxw{display:inline-block;transition:translate .38s cubic-bezier(.3,1.7,.5,1),rotate .38s cubic-bezier(.3,1.7,.5,1),color .25s;white-space:pre}
@media (hover:hover){.fxw:hover{translate:0 -.16em;rotate:-3.5deg;color:#E0562A}}
.fxw.fx-tap{translate:0 -.16em;rotate:-3.5deg;color:#E0562A}
/* Dải chữ chạy theo cuộn */
.fx-ribbons{position:relative;overflow:hidden;padding:clamp(1.6rem,5vw,3.2rem) 0;background:#0c0b09;z-index:3}
.fx-rib{white-space:nowrap;will-change:translate;font:800 clamp(1.15rem,3.6vw,2.5rem)/1.15 var(--lp-sans,system-ui);letter-spacing:.04em;text-transform:uppercase;
  padding:.55em 0;margin:0 -6%;display:block}
.fx-rib--a{background:#E0562A;color:#fff;rotate:-1.8deg;box-shadow:0 14px 30px -12px rgba(0,0,0,.7)}
.fx-rib--b{background:#F4EBDD;color:#14110d;rotate:1.5deg;margin-top:-.6em}
.fx-rib i{font-style:normal;margin:0 .7em;opacity:.55}
/* Con trỏ vòng + gợn sóng khi bấm + vệt sáng trên poster */
.fx-ring{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1.5px solid rgba(244,184,96,.9);border-radius:50%;z-index:95;pointer-events:none;
  opacity:0;transition:opacity .25s,width .25s,height .25s,margin .25s,background .25s,border-color .25s;mix-blend-mode:difference}
.fx-ring.on{opacity:1}
.fx-ring.big{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(244,184,96,.18)}
.fx-rip{position:absolute;border-radius:50%;pointer-events:none;background:rgba(255,255,255,.55);scale:0;animation:fxRip .7s ease-out forwards}
@keyframes fxRip{to{scale:1;opacity:0}}
.lp-btn{position:relative;overflow:hidden}
.lp-posters{perspective:900px}
.fx-glare{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;transition:opacity .25s;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.38),transparent 55%);mix-blend-mode:soft-light}
.lp-poster:hover .fx-glare{opacity:1}
/* Bước đang ở giữa màn hình */
html.fx .lp-steps li{transition:translate .4s cubic-bezier(.2,.8,.2,1),opacity .4s}
html.fx .lp-steps li b{transition:scale .4s cubic-bezier(.3,1.6,.5,1),color .3s}
html.fx .lp-steps li.fx-on{translate:10px 0}
html.fx .lp-steps li.fx-on b{scale:1.22;color:#E0562A}
html.fx .lp-steps li:not(.fx-on):not([data-fx]){opacity:.62}
/* Nút lên đầu trang có vòng tiến độ */
.fx-top{position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));z-index:80;width:48px;height:48px;border-radius:50%;
  border:0;background:rgba(12,11,9,.82);color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(8px);
  opacity:0;translate:0 14px;pointer-events:none;transition:opacity .3s,translate .3s}
.fx-top.on{opacity:1;translate:0 0;pointer-events:auto}
.fx-top svg{position:absolute;inset:0;width:100%;height:100%;rotate:-90deg}
.fx-top circle{fill:none;stroke-width:3}
.fx-top .a{stroke:rgba(255,255,255,.18)}.fx-top .b{stroke:#E0562A;stroke-linecap:round}
@media (max-width:700px){
  .fx-glow{display:none}
  .fx-rib{font-size:clamp(1rem,5.2vw,1.4rem)}
}
@media (prefers-reduced-motion:reduce){
  .fx-ribbons,.fx-ring,.fx-top{display:none}
  html.fx .fx-float.fx-done,html.fx .lp-globe svg,html.fx .lp-kw span{animation:none}
  html.fx [data-fx]:not(.in){opacity:1}
  html.fx [data-fx].in{animation:none}
  html.fx .fxl>span{translate:0 0}
}