/* Hiệu ứng chuyển động nhẹ cho website NETC. Chỉ chạy khi người dùng không tắt chuyển động trong hệ điều hành. */
html{scroll-behavior:smooth}
.prog{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:0 50%;z-index:30;pointer-events:none}
nav.main{transition:box-shadow .25s ease}
nav.main.stuck{box-shadow:0 4px 14px var(--k-rgba-15-60-130-07)}
.btn,.tile,.leader,.person,.svc-item,.nitem,.flow>div{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,filter .2s ease}
.btn{position:relative}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.tile:hover,.leader:hover,.person:hover,.svc-item:hover{transform:translateY(-4px);box-shadow:0 10px 24px var(--k-rgba-15-60-130-22)}
.nitem:hover{transform:translateY(-3px)}
.flow>div{border-top-color:var(--line);background-image:linear-gradient(var(--navy),var(--navy));background-repeat:no-repeat;background-size:0 4px;background-position:0 0}
.flow>div.in{background-size:100% 4px;transition:background-size .8s ease .15s,transform .22s ease}
.stats3>div{transition:background-color .25s ease}
.stats3>div:hover{background:var(--tint)}
.steps li{transition:transform .22s ease,border-color .22s ease}
.steps li:hover{transform:translateX(4px);border-color:var(--navy)}
.totop{position:fixed;left:16px;bottom:16px;width:44px;height:44px;border:1px solid var(--line);background:var(--surface);color:var(--link);cursor:pointer;display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s,visibility .25s;z-index:9}
.totop.on{opacity:1;visibility:visible;transform:none}
.totop:hover{border-color:var(--navy)}
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
  .rv.in{opacity:1;transform:none}
  .tile.rv.in:hover,.leader.rv.in:hover,.person.rv.in:hover,.svc-item.rv.in:hover{transform:translateY(-4px);transition-delay:0s;transition-duration:.22s}
  .hero2 .ov>*{animation:up .7s cubic-bezier(.2,.7,.2,1) both}
  .hero2 .ov>*:nth-child(2){animation-delay:.1s}.hero2 .ov>*:nth-child(3){animation-delay:.2s}
  .hero2 .himg{animation:fadeimg 1s ease both}
  .hero2 .himg img{animation:zoom 9s ease-out both}
  @keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes fadeimg{from{opacity:0}to{opacity:1}}
  @keyframes zoom{from{transform:scale(1.06)}to{transform:scale(1)}}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
  .tile:hover,.leader:hover,.person:hover,.svc-item:hover,.nitem:hover,.btn:hover,.steps li:hover{transform:none}
  .flow>div{background-size:100% 4px}
}

/* Đợt 2: hiệu ứng nổi bật hơn */
nav.main ul a{position:relative}
nav.main ul a::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .3s ease}
nav.main ul a:hover::after{transform:scaleX(1)}
.btn{overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);pointer-events:none}
.btn:hover::after{left:130%;transition:left .7s ease}
.sec>h2{position:relative;padding-bottom:12px}
.sec>h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:4px;background:var(--red);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s cubic-bezier(.2,.7,.2,1) .25s}
.sec>h2.in::after{transform:scaleX(1)}
.itile .cap h3::after{content:" \2192";display:inline-block;opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .25s}
.itile:hover .cap h3::after{opacity:1;transform:none}
.chips a{transition:transform .2s ease,background-color .2s ease,color .2s ease}
.chips a:hover{transform:translateY(-2px)}
.hero2{isolation:isolate}
.hero2::before{content:"";position:absolute;z-index:-1;width:420px;height:420px;right:-120px;top:-160px;border-radius:50%;background:radial-gradient(circle,var(--hero1),transparent 70%);opacity:.9}
.band{position:relative;overflow:hidden}
.faq details{transition:background-color .25s ease,border-color .25s ease}
.faq details[open]{background:var(--tint)}
.faq details[open] summary{color:var(--link)}
.faq details[open]>*:not(summary){animation:faq .35s ease both}
@keyframes faq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cta-band .btn{animation:pulse 2.8s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.45)}60%{box-shadow:0 0 0 12px rgba(255,255,255,0)}}
.logo{transition:transform .3s ease}
.brand:hover .logo{transform:scale(1.04)}
.itile{transition:box-shadow .3s ease}
.itile:hover{box-shadow:0 14px 30px rgba(5,20,50,.28)}
.himg{will-change:transform}
@media (prefers-reduced-motion:no-preference){
  .hero2::before{animation:drift 14s ease-in-out infinite alternate}
  @keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,50px) scale(1.15)}}
  .page.on{animation:pg .45s cubic-bezier(.2,.7,.2,1)}
  @keyframes pg{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .rv.from-l{transform:translateX(-30px)}.rv.from-r{transform:translateX(30px)}
  .rv.from-l.in,.rv.from-r.in{transform:none}
  .itile.rv{transform:translateY(26px) scale(.96)}.itile.rv.in{transform:none}
  .itile{will-change:transform}
  .tilt{transition:transform .15s ease-out,box-shadow .3s ease}
}
@media (prefers-reduced-motion:reduce){
  .btn::after,.hero2::before{display:none}
  .cta-band .btn{animation:none}
  .sec>h2::after{transform:scaleX(1)}
}