/* ---------- Chuyển động toàn trang ---------- */
:root{--ease:cubic-bezier(.2,.7,.1,1)}
.nav{transition:transform .45s var(--ease),background .3s}
.nav.up{transform:translateY(-100%)}
.nav nav{position:relative}
.nav-ind{position:absolute;left:0;bottom:2px;height:2px;width:0;background:#B8862F;border-radius:2px;transition:transform .45s var(--ease),width .45s var(--ease),opacity .3s;opacity:0;pointer-events:none}
.nav nav a.on{color:#8C6324}
.nav-prog{position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,#B8862F,#9A6E22);transform-origin:left;transform:scaleX(var(--p,0));pointer-events:none}
/* hiện dần khi cuộn */
.pre{opacity:0;transform:translateY(28px)}
.rv{transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--si,0)*80ms)}
/* tiêu đề hiện từng chữ */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-top:.2em;margin-top:-.2em;padding-bottom:.1em;margin-bottom:-.1em}
.w>span{display:inline-block;transition:transform 1s var(--ease);transition-delay:calc(var(--wi,0)*55ms)}
.pre-h .w>span{transform:translateY(110%)}
/* mở đầu */
.hero-mark,.hero-title,.hero-meta,.hero-cta{animation:heroIn 1.2s var(--ease) both}
.hero-title{animation-delay:.18s}.hero-meta{animation-delay:.42s}.hero-cta{animation-delay:.58s}
@keyframes heroIn{from{opacity:0;transform:translateY(34px)}}
/* nút: vệt sáng lướt */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 35%,rgba(43,36,28,.28) 50%,transparent 65%);transform:translateX(-130%);transition:transform .7s var(--ease)}
.btn:hover::after{transform:translateX(130%)}
.btn:active{transform:translateY(0) scale(.98)}
/* ánh sáng theo con trỏ trên thẻ */
.iso,.good,.note,.jpanel,.vcard{position:relative}
.iso::after,.good::after,.note::after,.vcard::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(184,134,47,.16),transparent 70%)}
.iso:hover::after,.good:hover::after,.note:hover::after,.vcard:hover::after{opacity:1}
.iso svg{transition:transform .7s var(--ease)}
.iso:hover svg{transform:translateY(-8px) scale(1.03)}
.good{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .3s}
.good:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(10,20,50,.12);border-color:rgba(184,134,47,.35)}
.good .ic svg{transition:transform .6s var(--ease)}
.good:hover .ic svg{transform:scale(1.12) rotate(-3deg)}
.good.rv{transition:opacity .9s var(--ease),transform .9s var(--ease),box-shadow .5s var(--ease),border-color .3s;transition-delay:calc(var(--si,0)*80ms),calc(var(--si,0)*80ms),0s,0s}
.photo.rv{transition:opacity .9s var(--ease),transform .9s var(--ease),box-shadow .6s;transition-delay:calc(var(--si,0)*80ms)}
.goods.swap .good{animation:fadeUp .55s var(--ease) both;animation-delay:calc(var(--i)*45ms)}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}}
[data-pane]:not([hidden]),[data-jp]:not([hidden]),.vcard{animation:fadeUp .5s var(--ease)}
.faq details p{animation:fadeUp .45s var(--ease)}
.faq summary::after{transition:transform .35s var(--ease),background .3s}
.faq details[open] summary::after{transform:rotate(180deg)}
.chip,.seg button,.tabs button,.steps button,.vlist2 button,.results button{transition:background .25s,color .25s,border-color .25s,transform .2s}
.chip:hover{transform:translateY(-1px)}
.photo{transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.photo:hover{transform:rotate(0) translateY(-6px) scale(1.02);box-shadow:0 20px 40px rgba(0,0,0,.35)}
.toast{transition:opacity .4s var(--ease),transform .4s var(--ease)}
@media (prefers-reduced-motion:reduce){.pre{opacity:1;transform:none}.pre-h .w>span{transform:none}.hero-mark,.hero-title,.hero-meta,.hero-cta,.goods.swap .good,[data-pane]:not([hidden]),[data-jp]:not([hidden]),.vcard,.faq details p{animation:none}.nav.up{transform:none}}