/* Hệ motion VNPT (namespace vm-) – theo rulebook Rovant: mỗi nhóm "CHỌN 1" chỉ một hiệu ứng.
   ta1 Text Reveal · ia1 Scale In · h1 Scale Hover · btn4 Fill · pt1 Fade In · sa1/lg1 Stagger · nav1 Hamburger
   m2 Slide Drawer · fi2 Validation · fi3 Submit · m3 Toast · mi1 Ripple · dv4 Number · lg2 Lift · lg3 Filter
   ea1 Fade Out · cs3 Dots · se4 Fade on Scroll. Chỉ animate transform/opacity; nội dung luôn hiện khi không có JS.
   Chuyển động luôn bật, không có công tắc tắt và không theo prefers-reduced-motion (yêu cầu khách). */
: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}

/* ---------- ta1 Text Reveal (tách theo từ, chừa chỗ cho dấu tiếng Việt) ---------- */
.vm-w{display:inline-block;overflow:hidden;vertical-align:top;padding:.16em .02em .14em;margin:-.16em -.02em -.14em}
.vm-w>span{display:inline-block}
.vm-on .vm-ta1 .vm-w>span{transform:translateY(115%);transition:transform 1.1s var(--vm-ease);transition-delay:calc(var(--i,0) * 70ms)}
.vm-on .vm-ta1.vm-in .vm-w>span{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 ---------- */
/* dùng 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>*{opacity:1;translate:none}

/* ---------- lg3 Filter (đổi tab) ---------- */
@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 (panel tab, trang) ---------- */
@keyframes vm-pt1{from{opacity:0}to{opacity:1}}
.tp.on{animation:vm-pt1 .45s ease-out}
.vm-on.no-splash main{animation:vm-pt1 .6s ease-out}

/* ---------- h1 Scale Hover + lg2 Card Lift (chỉ thiết bị có hover) ---------- */
.why-i{transition:transform .3s ease}
.pc,.why,.dv,.svc{transition:transform .3s var(--vm-ease),box-shadow .3s var(--vm-ease)}
@media (hover:hover){
  .why:hover .why-i{transform:scale(1.15)}
  .pc:hover,.why:hover,.dv:hover,.svc:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(19,36,58,.12)}
}

/* ---------- btn4 Fill Effect + mi1 Ripple ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:color .3s,border-color .3s}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.btn-p::before{background:var(--blue-dd)}
.btn-o::before{background:var(--blue)}
.btn-p:hover{background:var(--blue)}
.btn-o:hover{background:#fff;color:#fff}
@media (hover:hover){.btn:hover::before{transform:scaleX(1)}}
.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-o .vm-rip,.tb .vm-rip{background:rgba(21,113,186,.22)}
.tb{position:relative;overflow:hidden}
@keyframes vm-mi1{to{transform:scale(4);opacity:0}}

/* ---------- nav1 Hamburger ---------- */
.burger .vm-bars{position:relative;width:24px;height:18px;display:block}
.vm-bars span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s,opacity .3s}
.vm-bars span:nth-child(1){top:0}.vm-bars span:nth-child(2){top:8px}.vm-bars span:nth-child(3){top:16px}
.burger.active .vm-bars span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger.active .vm-bars span:nth-child(2){opacity:0}
.burger.active .vm-bars span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.burger{position:relative;z-index:70}

/* ---------- m2 Slide Drawer ---------- */
.drawer{visibility:hidden;opacity:0;transition:opacity .3s,visibility 0s linear .3s}
.drawer.show{visibility:visible;opacity:1;transition:opacity .3s}
.dr-in{transform:translateX(100%);transition:transform .3s var(--vm-ease);height:100dvh;width:min(300px,100vw)}
.drawer.show .dr-in{transform:none}

/* ---------- fi2 Validation + fi3 Submit ---------- */
.reg-form input:focus,.reg-form select:focus{box-shadow:0 0 0 3px rgba(21,113,186,.12)}
.reg-form input.bad{animation:vm-fi2 .5s}
@keyframes vm-fi2{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.reg-form button.vm-loading{pointer-events:none;opacity:.7}
.reg-form 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:90;max-width:min(440px,calc(100vw - 32px));padding:14px 20px;border-radius:12px;background:var(--ink);color:#fff;
  font:500 14px/1.5 var(--fd);box-shadow:0 12px 30px rgba(19,36,58,.25);transform:translate(-50%,120px);transition:transform .4s var(--vm-ease)}
.vm-toast.show{transform:translate(-50%,0)}
.vm-toast.vm-ok{background:#0F6B3A}.vm-toast.vm-err{background:#B4321F}
.vm-toast.vm-out{animation:vm-ea1 .5s ease-out forwards}
@keyframes vm-ea1{to{opacity:0;transform:translate(-50%,0) scale(.95)}}

/* ---------- dv4 Animated Number (dải số liệu) ---------- */
.vm-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:40px}
.vm-stat{padding:28px 16px;border-radius:var(--r);background:var(--tint);text-align:center}
.vm-stat b{display:block;font:600 40px/1.15 var(--fd);color:var(--blue);font-variant-numeric:tabular-nums}
.vm-stat span{font-size:14px;color:var(--mut)}

/* ---------- cs3 Pagination Dots ---------- */
.vm-dots{display:flex;justify-content:center;gap:8px;margin-top:14px}
.vm-dots[hidden]{display:none}
.vm-dot{width:10px;height:10px;padding:0;border:0;border-radius:6px;background:#CBD7E4;cursor:pointer;transition:width .3s,background .3s}
.vm-dot.active{width:28px;background:var(--blue)}
.vm-dot:focus-visible,.tb:focus-visible,.btn:focus-visible,.rg button:focus-visible,.cnav:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

.vm-paused .mq-t{animation-play-state:paused}

@media (max-width:760px){
  .vm-stats{grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:28px}
  .vm-stat{padding:18px 10px}.vm-stat b{font-size:28px}.vm-stat span{font-size:12px}
  .vm-toast{bottom:76px}
}