body{margin:0;background:#F5F8FF}
a{color:#1F5EFF;text-decoration:none}a:hover{color:#0B3FCC}
@property --zta{syntax:'<angle>';inherits:false;initial-value:0deg}
.g{background:rgba(255,255,255,.58);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);border:1px solid rgba(255,255,255,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 24px 60px -30px rgba(20,60,180,.35)}
.g-strong{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #FFFFFF,0 30px 80px -30px rgba(20,60,180,.4)}
.dots{background-image:radial-gradient(rgba(31,94,255,.16) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 40%,#000 30%,transparent 75%)}
.zt-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:80;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#1F5EFF,#22B8F0)}
@supports (animation-timeline: scroll()){.zt-prog{animation:ztProg linear both;animation-timeline:scroll(root)}}
@keyframes ztProg{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ztRv{from{opacity:0;transform:translate3d(0,40px,0)}to{opacity:1;transform:none}}
.zt-spot{position:relative;isolation:isolate}
.zt-spot::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),rgba(31,94,255,.10),transparent 62%)}
.zt-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .35s;background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgba(31,94,255,.75),transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.zt-spot:hover::before,.zt-spot:hover::after{opacity:1}
.zt-ring{position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;overflow:hidden;background:linear-gradient(120deg,rgba(31,94,255,.55),rgba(34,184,240,.35) 50%,rgba(31,94,255,.55));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.zt-ring>i{position:absolute;left:0;top:0;width:50%;height:50%;background:radial-gradient(closest-side,#FFFFFF,rgba(120,200,255,.7) 35%,transparent 70%);animation:ztOrbit 10s linear infinite}
.zt-ring.on-blue{background:linear-gradient(120deg,rgba(255,255,255,.55),rgba(255,255,255,.15) 50%,rgba(255,255,255,.55))}
@keyframes ztOrbit{0%{transform:translate3d(-50%,-50%,0)}32%{transform:translate3d(150%,-50%,0)}50%{transform:translate3d(150%,150%,0)}82%{transform:translate3d(-50%,150%,0)}100%{transform:translate3d(-50%,-50%,0)}}
.zt-sheen{position:relative;overflow:hidden;isolation:isolate}
.zt-sheen::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:ztSheen 5s ease-in-out infinite;pointer-events:none}
@keyframes ztSheen{0%,62%{left:-60%}100%{left:140%}}
.zt-logo{padding:2px;border-radius:12px;background:conic-gradient(from var(--zta),#1F5EFF,#22B8F0,#9CC2FF,#1F5EFF);animation:ztSpin 5.5s linear infinite;display:inline-flex}
@keyframes ztSpin{to{--zta:360deg}}
.zt-world{position:absolute;border-radius:999px;pointer-events:none;animation:ztDrift 28s ease-in-out infinite alternate}
@keyframes ztDrift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-5%,4%,0) scale(1.08)}100%{transform:translate3d(4%,-5%,0) scale(1)}}
.zt-float{animation:ztFloat 6s ease-in-out infinite}
@keyframes ztFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.zt-swap{animation:ztSwap .45s cubic-bezier(.2,.8,.2,1) both}
@keyframes ztSwap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
input.on-dark::placeholder{color:rgba(255,255,255,.75)}
option{color:#0A1B3D;background:#FFFFFF}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important}}

/* ==== RESPONSIVE: điện thoại / máy tính bảng / máy tính ==== */
html{scroll-padding-top:84px;-webkit-text-size-adjust:100%}
img,svg{max-width:100%}
.zt-burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid #D6E0F4;background:#FFFFFF;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.zt-burger span{display:block;width:18px;height:2px;border-radius:2px;background:#0A1B3D;transition:transform .25s,opacity .25s}
.zt-hdr.is-open .zt-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.zt-hdr.is-open .zt-burger span:nth-child(2){opacity:0}
.zt-hdr.is-open .zt-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
button,a{-webkit-tap-highlight-color:rgba(31,94,255,.12)}

/* Máy tính bảng & laptop nhỏ (≤1100px): menu gọn vào nút */
@media (max-width:1100px){
  .zt-burger{display:inline-flex}
  .zt-hdr-in{flex-wrap:nowrap !important}
  .zt-hdr-in>a:first-child{margin-right:auto}
  .zt-menu{display:none !important;order:10;flex:1 0 100%;flex-direction:column;gap:0 !important;padding:6px 0 4px}
  .zt-hdr.is-open .zt-hdr-in{flex-wrap:wrap !important}
  .zt-hdr.is-open .zt-menu{display:flex !important}
  .zt-menu a{padding:14px 4px;border-top:1px solid #E6ECF8;font-size:16px}
  .zt-menu a::after{display:none}
  .zt-sec{padding-top:72px !important;padding-bottom:72px !important}
  .zt-sec-b{padding-bottom:72px !important}
}
/* Máy tính bảng dọc (641–1023px) */
@media (min-width:641px) and (max-width:1023px){
  .zt-price{grid-template-columns:1fr !important;max-width:640px;width:100%;margin:0 auto}
  .zt-3col{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
  .zt-3col>*{padding:22px !important}
  .zt-3col span[style*="font-size: 32px"]{font-size:24px !important}
}
/* Điện thoại (≤640px) */
@media (max-width:640px){
  .zt-hdr-in{padding:10px 16px !important;gap:10px !important}
  .zt-hide-m{display:none !important}
  .zt-hcta,.zt-hdr-in>a.zt-sheen{padding:10px 12px !important;font-size:13px !important;white-space:nowrap}
  .zt-hdr-in>a:first-child span[style*="font-size: 21px"]{font-size:18px !important}
  #top span:has(>.zt-ping){font-size:10px !important;letter-spacing:.05em !important;text-align:left}
  .zt-sec{padding:56px 16px !important}
  .zt-sec-b{padding-left:16px !important;padding-right:16px !important;padding-bottom:56px !important}
  section[aria-label]{padding-left:16px !important;padding-right:16px !important}
  #top>div{padding-left:16px !important;padding-right:16px !important}
  .zt-pad{padding:22px 18px !important;border-radius:22px !important}
  .zt-cta-in{padding:32px 20px !important;border-radius:22px !important}
  .zt-hero-cta{flex-direction:column;align-items:stretch;width:100%}
  .zt-hero-cta>a{justify-content:center;text-align:center}
  .zt-stats{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  .zt-mock{height:440px !important}
  .zt-mock-main{left:6% !important;width:88% !important;height:400px !important}
  .zt-mock>div:not(.zt-mock-main){width:80% !important;height:330px !important}
  h1{letter-spacing:-0.035em !important}
  input,select,textarea{font-size:16px !important}
}
/* Điện thoại nhỏ (≤380px) */
@media (max-width:380px){
  .zt-hcta{display:none !important}
}
/* Thiết bị cảm ứng: tắt hiệu ứng chỉ dành cho chuột */
@media (hover:none){
  .zt-spot::before,.zt-spot::after{display:none}
  .zt-lift:hover{translate:none}
}

/* ==== HIỆU ỨNG XUẤT HIỆN (chậm, mượt, lần lượt) ==== */
.zt-js .rv,.zt-js .rv-l,.zt-js .rv-r{opacity:0;transition:opacity 1.2s ease-in-out,transform 1.4s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
.zt-js .rv{transform:translate3d(0,40px,0)}
.zt-js .rv-l{transform:translate3d(-48px,0,0)}
.zt-js .rv-r{transform:translate3d(48px,0,0)}
.zt-js .rv.is-in,.zt-js .rv-l.is-in,.zt-js .rv-r.is-in{opacity:1;transform:none}
.zt-js .rv2{transition-delay:.15s}.zt-js .rv3{transition-delay:.3s}.zt-js .rv4{transition-delay:.45s}
.zt-js .zt-bar{transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s cubic-bezier(.16,1,.3,1) .25s}
.zt-js .zt-bar.is-in{transform:scaleX(1)}
@media (prefers-reduced-motion: reduce){.zt-js .rv,.zt-js .rv-l,.zt-js .rv-r,.zt-js .zt-bar{opacity:1 !important;transform:none !important;transition:none !important}}