/* Hệ motion HIÊN (namespace vm-, cùng bộ với aaaweb.vn/thangmay và vnpt24h) – theo rulebook Rovant, mỗi nhóm "CHỌN 1" một hiệu ứng.
   cs1 Fade Carousel (banner) · se4 Fade on Scroll · ia1 Scale In · sa1/lg1 Stagger · h1 Scale Hover · lg2 Card Lift
   btn4 Fill + mi1 Ripple (mọi nút) · lg3 Filter · dv4 Number · nav1 Hamburger · pt1 Fade In · fi2 Validation
   fi3 Submit · m3 Toast + ea1 Fade Out · cs3 Pagination Dots · mi4 Accordion (Đẳng cấp dịch vụ). Chỉ animate transform/opacity; nội dung luôn hiện khi không có JS.
   Tiêu đề section đứng yên, không tách chữ (quyết định của chủ web 01/11/2026). */
:root{--vm-ease:cubic-bezier(.22,.61,.36,1);--vm-dur:600ms}

/* ---------- se4 Fade on Scroll ---------- */
.vm-on [data-vm-reveal]{opacity:0;transform:translateY(24px);transition:opacity var(--vm-dur) var(--vm-ease),transform var(--vm-dur) var(--vm-ease)}
.vm-on [data-vm-reveal].vm-in{opacity:1;transform:none}

/* ---------- ia1 Scale In ---------- */
.vm-on [data-vm-img]{opacity:0;transform:scale(.92);transition:opacity 1s var(--vm-ease),transform 1s var(--vm-ease)}
.vm-on [data-vm-img].vm-in{opacity:1;transform:none}

/* ---------- sa1 / lg1 Stagger ---------- */
/* thuộc tính translate (không phải transform) để không đè hover lift của lg2 */
.vm-on [data-vm-stagger]>*{opacity:0;translate:0 20px;transition:opacity .5s ease-out,translate .5s ease-out,transform .3s var(--vm-ease),box-shadow .3s var(--vm-ease);transition-delay:calc(var(--i,0) * 90ms),calc(var(--i,0) * 90ms),0s,0s}
.vm-on [data-vm-stagger].vm-in>*,.vm-on [data-vm-stagger]>.vm-in{opacity:1;translate:none}
/* banner: chạy chậm hơn một nhịp cho sang */
.vm-on .banner__body[data-vm-stagger]>*{translate:0 28px;transition-duration:.9s,.9s,.3s,.3s;transition-delay:calc(var(--i,0) * 140ms),calc(var(--i,0) * 140ms),0s,0s}
.vm-on .banner__body[data-vm-stagger].vm-in>*,.vm-on .banner__body[data-vm-stagger]>.vm-in{translate:none}

/* ---------- lg3 Filter (đổi tab dự án) ---------- */
@keyframes vm-lg3{from{opacity:0;scale:.92}to{opacity:1;scale:1}}
.vm-on .vm-lg3>*{animation:vm-lg3 .4s var(--vm-ease) both;animation-delay:calc(var(--i,0) * 60ms)}

/* ---------- pt1 Fade In (khi không có splash) ---------- */
@keyframes vm-pt1{from{opacity:0}to{opacity:1}}
.vm-on.no-splash main{animation:vm-pt1 .6s ease-out}

/* ---------- h1 Scale Hover + lg2 Card Lift (chỉ thiết bị có hover) ---------- */
.card__img img,.tt__img img,.who__imgs img,.jr__img img{transition:scale .7s var(--vm-ease)}
/* thẻ Hành trình: nền xám dâng từ dưới, vạch đỏ chạy trên đỉnh, icon nảy lên */
.jr__steps li{position:relative;isolation:isolate}
.jr__steps li::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--soft);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--vm-ease)}
.jr__steps li::after{content:"";position:absolute;left:-1px;right:0;top:-1px;height:3px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--vm-ease)}
.jr__top .ic,.jr__steps h3{transition:transform .35s var(--vm-ease),color .3s}
@media (hover:hover){
  .card:hover .card__img img,.tt__i:hover .tt__img img,.who__imgs figure:hover img,.jr__img:hover img{scale:1.06}
  .jr__steps li:hover::before{transform:scaleY(1)}
  .jr__steps li:hover::after{transform:scaleX(1)}
  .jr__steps li:hover .jr__top .ic{transform:translateY(-4px) scale(1.15);color:var(--accent)}
  .jr__steps li:hover h3{transform:translateX(5px)}
  .car__nav:not(:disabled):hover{background:var(--gold-h);border-color:var(--gold-b);color:var(--gold-ink);box-shadow:0 8px 22px rgba(195,154,68,.32);scale:1.1}
  .sp__item:not(.is-on) .sp__btn:hover{color:var(--ink-2)}
  .soc a:hover{scale:1.2;box-shadow:0 10px 24px rgba(0,0,0,.45)}
  .off__map:hover{border-color:var(--accent-l)}
  .vm-dot:hover{background:#9a9a9a}
}

/* ---------- btn4 Fill Effect + mi1 Ripple: mọi nút trên trang ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:color .3s,border-color .3s,box-shadow .3s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--vm-ease)}
.btn--accent::before{background:var(--gold-h)}
.btn--ghost::before{background:#fff}
/* nút "Xem tất cả" (tin tức, dự án): hover đổ màu đồng, chữ trắng */
.nw-all .btn--ghost::before,.pj-all .btn--ghost::before{background:var(--gold-h)}
.btn--outline::before{background:var(--gold-h)}
.ff .btn--accent::before{background:var(--gold-h)}
@media (hover:hover){
  .btn:hover::before{transform:scaleX(1)}
  .btn--ghost:hover{color:var(--ink);border-color:#fff}
  .nw-all .btn--ghost:hover,.pj-all .btn--ghost:hover{color:var(--gold-ink);border-color:var(--gold-b)}
  .btn--outline:hover{color:var(--gold-ink);border-color:var(--gold-b)}
  .btn--accent:hover{color:var(--gold-ink);box-shadow:0 12px 30px rgba(195,154,68,.32)}
}
/* ---------- btn2 Pulse: 2 nút banner chạy liên tục, hai nút thay phiên (lệch 1s); tạm dừng khi banner khuất ---------- */
@keyframes vm-btn2{0%{box-shadow:0 0 0 0 var(--vm-pulse)}70%{box-shadow:0 0 0 16px transparent}100%{box-shadow:0 0 0 0 transparent}}
.banner__ctas .btn{animation:vm-btn2 2s ease-out infinite}
.banner__ctas .btn--accent{--vm-pulse:rgba(183,149,82,.6)}
.banner__ctas .btn--ghost{--vm-pulse:rgba(226,227,229,.8);animation-delay:1s}
.vm-paused .banner__ctas .btn,.vm-paused .banner__ctas .btn::after{animation-play-state:paused}
/* ánh sáng lướt qua 2 nút banner (dải sáng nghiêng chạy trái → phải, lặp lại; 2 nút lệch nhau) */
@keyframes vm-shine{0%{transform:translateX(-130%) skewX(-20deg)}45%,100%{transform:translateX(330%) skewX(-20deg)}}
.banner__ctas .btn::after{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.5),rgba(255,255,255,0));transform:translateX(-130%) skewX(-20deg);animation:vm-shine 3.2s ease-in-out infinite}
.banner__ctas .btn--ghost::after{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95),rgba(255,255,255,0));animation-delay:1.6s}
@media (hover:hover){.banner__ctas .btn:hover{animation:none}}
/* btn2 Pulse bản card đồ hoạ (motion.js dựng .cta-ring sau mỗi nút, cùng hình box-shadow) — chỉ bật khi JS đã dựng xong */
.banner__ctas.vm-ring{position:relative;isolation:isolate}
.banner__ctas.vm-ring .btn{animation:none}
.cta-ring{position:absolute;left:0;top:0;z-index:-1;pointer-events:none;transition:opacity .3s}
.cta-ring.is-off{opacity:0}
.cta-ring b{position:absolute;left:0;top:0;opacity:0}
.cta-ring i{position:absolute;left:0;top:0;transform-origin:0 0;background:var(--c)}
.cta-ring i.o{border-radius:50%}

/* ---------- Đẳng cấp dịch vụ (desktop): đổi tab thì ảnh hiện dần + thu nhẹ, chữ trồi lên lần lượt ---------- */
@keyframes vm-sv-img{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
@keyframes vm-sv-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.sv__panel.vm-sw .sv__img img{animation:vm-sv-img .9s var(--vm-ease) both}
.sv__panel.vm-sw .sv__body>*{animation:vm-sv-up .6s var(--vm-ease) both}
.sv__panel.vm-sw .sv__body>:nth-child(2){animation-delay:.06s}
.sv__panel.vm-sw .sv__body>:nth-child(3){animation-delay:.12s}
.sv__panel.vm-sw .sv__body>:nth-child(4){animation-delay:.18s}
.sv__panel.vm-sw .sv__body>:nth-child(5){animation-delay:.24s}
/* thẻ dịch vụ: nền đồng dâng từ dưới lên phủ kín thẻ (~0,5s), chữ chuyển trắng, icon xoay nhẹ */
.sv__tab{isolation:isolate}
.sv__tab::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gold-h);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--vm-ease)}
.sv__tab .ic,.sv__name,.sv__no{transition:color .3s,transform .4s var(--vm-ease)}
@media (hover:hover){
  .sv__tab:not(.is-on):hover{color:var(--gold-ink)}
  .sv__tab:not(.is-on):hover::before{transform:scaleY(1)}
  .sv__tab:not(.is-on):hover .ic{transform:rotate(-10deg) scale(1.15);color:var(--gold-ink)}
  .sv__tab:not(.is-on):hover .sv__no{color:rgba(29,22,6,.7)}
}

/* ---------- Phản hồi khách hàng: cùng kiểu banner nhưng nhanh hơn (30% rồi thêm 20%) — ảnh mới kéo rèm tốc độ đều 0,83s phủ lên ảnh cũ (ảnh cũ đứng yên bên dưới),
   chữ cũ mờ đi nhanh, chữ mới trồi lên lần lượt (0,58s, lệch 90ms). Lùi lại thì rèm kéo từ trái. ---------- */
.rv2__item{visibility:hidden;z-index:0}
.rv2__item.is-on{visibility:visible;z-index:2}
.rv2__item.is-prev{visibility:visible;z-index:1}
.rv2__item.is-on .rv2__img{animation:rv-wipe .83s linear both}
.rv2[data-dir="prev"] .rv2__item.is-on .rv2__img{animation-name:rv-wipe-l}
@keyframes rv-wipe{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0)}}
@keyframes rv-wipe-l{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.rv2__item .rv2__body>*{opacity:0;translate:0 28px;transition:opacity .19s ease-out,translate 0s linear .19s}
.rv2__item.is-on .rv2__body>*{opacity:1;translate:none;transition:opacity .58s var(--vm-ease),translate .58s var(--vm-ease);transition-delay:calc(.19s + var(--k,0) * 90ms)}
.rv2__body>:nth-child(2){--k:1}.rv2__body>:nth-child(3){--k:2}
@media (hover:hover){.rv2__t:not(.is-on):hover{color:var(--ink-2)}.rv2__t:not(.is-on):hover img{filter:none;opacity:1}}

/* tab lọc: cùng kiểu fill */
.tab{position:relative;overflow:hidden;isolation:isolate;transition:color .3s,border-color .3s}
.tab::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gold-h);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--vm-ease)}
@media (hover:hover){.tab:hover{color:var(--gold-ink);border-color:var(--gold-b)}.tab:hover::before{transform:scaleX(1)}}
/* nút nổi + nút chấm banner + menu */
.fab.on>*{transition:opacity .3s,transform .3s,scale .25s var(--vm-ease),box-shadow .25s}
@media (hover:hover){
  .fab a:hover,.fab button:hover{scale:1.1;box-shadow:0 14px 30px rgba(0,0,0,.3)}
  .hs__dot:hover::before{background:rgba(255,255,255,.8)}
}
.vm-rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.4);transform:scale(0);animation:vm-mi1 .6s linear;pointer-events:none;z-index:0}
.btn--outline .vm-rip,.tab .vm-rip{background:rgba(17,17,17,.15)}
.btn--ghost .vm-rip{background:rgba(17,17,17,.15)}
@keyframes vm-mi1{to{transform:scale(4);opacity:0}}

/* ---------- fi2 Validation + fi3 Submit ---------- */
.ff input:focus{box-shadow:0 0 0 3px rgba(255,255,255,.1)}
.ff .bad{animation:vm-fi2 .5s}
@keyframes vm-fi2{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.ff button.vm-loading{pointer-events:none;opacity:.75}
.ff button.vm-loading::after{content:"";width:16px;height:16px;margin-left:8px;border:2px solid #fff;border-top-color:transparent;border-radius:50%;animation:vm-fi3 .8s linear infinite}
@keyframes vm-fi3{to{transform:rotate(360deg)}}

/* ---------- m3 Toast + ea1 Fade Out ---------- */
.vm-toast{position:fixed;left:50%;bottom:24px;z-index:95;max-width:min(440px,calc(100vw - 32px));padding:14px 20px;border-radius:4px;background:var(--dark);color:#fff;
  font:500 14px/1.5 var(--f-head);letter-spacing:0;box-shadow:0 12px 30px rgba(0,0,0,.25);transform:translate(-50%,140px);transition:transform .4s var(--vm-ease)}
.vm-toast.show{transform:translate(-50%,0)}
.vm-toast.vm-ok{background:#14532d}.vm-toast.vm-err{background:var(--accent)}
.vm-toast.vm-out{animation:vm-ea1 .5s ease-out forwards}
@keyframes vm-ea1{to{opacity:0;transform:translate(-50%,0) scale(.95)}}

.who__eb.vm-off::after{animation-play-state:paused}
.hs__dot:focus-visible,.fab a:focus-visible,.fab button:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:768px){.vm-toast{bottom:84px}}

/* quy trình chữ S: đường vàng tự vẽ, mỗi chấm bật lên đúng lúc đường chạy tới, số + chữ hiện theo sau, chấm loé 1 vòng sáng.
   transition chỉ gắn ở trạng thái .vm-in để lúc ẩn ban đầu không bị chạy ngược */
.vm-on .snk:not(.vm-in) .snk__line{stroke-dashoffset:1}
.vm-on .snk:not(.vm-in) .snk__dot,.vm-on .snk:not(.vm-in) .snk__mini{transform:scale(0)}
.vm-on .snk:not(.vm-in) .snk__s b,.vm-on .snk:not(.vm-in) .snk__s span{opacity:0;translate:0 10px}
.vm-on .snk.vm-in .snk__line{transition:stroke-dashoffset 2.6s linear .2s}
.vm-on .snk.vm-in .snk__dot,.vm-on .snk.vm-in .snk__mini{transition:transform .55s cubic-bezier(.34,1.56,.64,1) calc(.2s + var(--t) * 2.6s),background .35s,box-shadow .35s}
.vm-on .snk.vm-in .snk__s b,.vm-on .snk.vm-in .snk__s span{transition:opacity .6s ease calc(.3s + var(--t) * 2.6s),translate .6s var(--vm-ease) calc(.3s + var(--t) * 2.6s),color .35s}
.vm-on .snk.vm-in .snk__dot::after{animation:snk-ping 1.1s ease-out calc(.25s + var(--t) * 2.6s) both}
@keyframes snk-ping{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
@media (max-width:1024px){
  .vm-on .snk:not(.vm-in) .snk__list::before{transform:scaleY(0)}
  .vm-on .snk.vm-in .snk__list::before{transition:transform 2.6s linear .2s}
  .vm-on .snk:not(.vm-in) .snk__s b,.vm-on .snk:not(.vm-in) .snk__s span{translate:14px 0}
  .vm-on .snk.vm-in .snk__dot{transition-delay:calc(.2s + var(--u) * 2.6s),0s,0s}
  .vm-on .snk.vm-in .snk__s b,.vm-on .snk.vm-in .snk__s span{transition-delay:calc(.3s + var(--u) * 2.6s),calc(.3s + var(--u) * 2.6s),0s}
  .vm-on .snk.vm-in .snk__dot::after{animation-delay:calc(.25s + var(--u) * 2.6s)}
}