body{margin:0;background:#F5F8FF}
a{color:#1F5EFF;text-decoration:none}a:hover{color:#0B3FCC}
@property --zta{syntax:'<angle>';inherits:false;initial-value:0deg}
.zt-grad{background:linear-gradient(92deg,#1F5EFF 0%,#2E8BFF 45%,#22B8F0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Kính mờ */
.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)}
.g-blue{background:rgba(255,255,255,.10);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.28)}
.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%)}

/* Thanh tiến độ cuộn */
.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)}}

/* Hiện dần khi cuộn */
@keyframes ztRv{from{opacity:0;transform:translate3d(0,44px,0) scale(.985)}to{opacity:1;transform:none}}
@keyframes ztRvL{from{opacity:0;transform:translate3d(-56px,0,0)}to{opacity:1;transform:none}}
@keyframes ztRvR{from{opacity:0;transform:translate3d(56px,0,0)}to{opacity:1;transform:none}}
.zt-bar{display:block;width:64px;height:4px;border-radius:4px;background:linear-gradient(90deg,#1F5EFF,#22B8F0)}
@keyframes ztBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Đèn soi theo chuột */
.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-lift{transition:translate .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.zt-lift:hover{translate:0 -6px;box-shadow:inset 0 1px 0 #FFFFFF,0 34px 70px -30px rgba(20,60,180,.45)}

/* Chấm sáng chạy viền */
.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)}}

/* Vệt sáng lướt nút */
.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%}}

/* Logo */
.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-breathe{animation:ztBreathe 3s ease-in-out infinite}
@keyframes ztBreathe{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}

/* Mảng màu nền trôi */
.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)}}

/* Chấm toả sóng */
.zt-ping{position:relative;display:inline-block;width:8px;height:8px;border-radius:999px;background:#16A34A;flex:none}
.zt-ping::after{content:"";position:absolute;inset:-7px;border-radius:999px;border:2px solid #16A34A;animation:ztPing 2s ease-out infinite}
@keyframes ztPing{0%{transform:scale(.3);opacity:1}70%{transform:none;opacity:0}100%{opacity:0}}

/* Mô phỏng tự chạy */
.zt-tick{animation:ztTick 6s ease-in-out infinite both}
.zt-tick.d1{animation-delay:.4s}.zt-tick.d2{animation-delay:1.1s}.zt-tick.d3{animation-delay:1.8s}
@keyframes ztTick{0%,6%{opacity:0;transform:scale(.4)}16%,88%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.4)}}
.zt-strike{background:linear-gradient(#8A97B5,#8A97B5) 0 55%/0% 1.5px no-repeat;animation:ztStrike 6s ease-in-out infinite both}
.zt-strike.d1{animation-delay:.4s}.zt-strike.d2{animation-delay:1.1s}.zt-strike.d3{animation-delay:1.8s}
@keyframes ztStrike{0%,8%{background-size:0% 1.5px}22%,88%{background-size:100% 1.5px}100%{background-size:0% 1.5px}}
.zt-draw{stroke-dasharray:100;animation:ztDraw 6s ease-in-out infinite}
@keyframes ztDraw{0%{stroke-dashoffset:100}40%,88%{stroke-dashoffset:25}100%{stroke-dashoffset:100}}
.zt-glow{animation:ztGlow 2.4s ease-in-out infinite}
@keyframes ztGlow{0%,100%{box-shadow:0 0 0 0 rgba(31,94,255,0)}50%{box-shadow:0 0 0 4px rgba(31,94,255,.14),0 0 22px rgba(31,94,255,.30)}}
.zt-pop{animation:ztPop 7s ease-in-out infinite both}
@keyframes ztPop{0%,28%{opacity:0;transform:translateY(10px) scale(.96)}38%,92%{opacity:1;transform:none}100%{opacity:0}}
.zt-float{animation:ztFloat 6s ease-in-out infinite}
@keyframes ztFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.zt-gbar{transform-origin:50% 100%;animation:ztGbar 3.6s ease-in-out infinite}
.zt-gbar.b2{animation-delay:.15s}.zt-gbar.b3{animation-delay:.3s}.zt-gbar.b4{animation-delay:.45s}.zt-gbar.b5{animation-delay:.6s}
@keyframes ztGbar{0%,12%{transform:scaleY(.18)}32%,88%{transform:scaleY(1)}100%{transform:scaleY(.18)}}
.zt-run{background:repeating-linear-gradient(90deg,rgba(31,94,255,.55) 0 8px,transparent 8px 16px);animation:ztRun 1.2s linear infinite}
@keyframes ztRun{to{background-position:16px 0}}
.zt-scan{position:absolute;left:0;right:0;height:40%;background:linear-gradient(180deg,transparent,rgba(31,94,255,.08),transparent);animation:ztScan 4.2s ease-in-out infinite;pointer-events:none}
@keyframes ztScan{0%{transform:translateY(-120%)}60%,100%{transform:translateY(300%)}}
.zt-marquee{display:flex;gap:48px;width:max-content;animation:ztMq 40s linear infinite}
@keyframes ztMq{to{transform:translate3d(-50%,0,0)}}

/* Tab tự chuyển */
.zt-tprog{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:0 50%;background:linear-gradient(90deg,#1F5EFF,#22B8F0);animation:ztTprog 6s linear both}
@keyframes ztTprog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.zt-swap{animation:ztSwap .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes ztSwap{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.zt-nav a{position:relative}
.zt-nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:#1F5EFF;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s}
.zt-nav a:hover::after{transform:scaleX(1)}
.zt-bob:hover .zt-ic{animation:ztBob .5s ease}
@keyframes ztBob{0%{transform:none}32%{transform:translateY(-3px) scale(1.15) rotate(-6deg)}62%{transform:translateY(1px) scale(.98) rotate(3deg)}100%{transform:none}}

@keyframes ztOrbitSpin{to{transform:rotate(360deg)}}
@keyframes ztDash{to{stroke-dashoffset:-8}}
.span2{grid-column:span 2}
@media (max-width: 760px){.span2{grid-column:auto}}
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:1200px){
  .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}}

/* Ảnh minh hoạ */
.zt-ph img,.zt-bimg img{transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.zt-lift:hover .zt-ph img,.rv-l:hover .zt-ph img,.rv-r:hover .zt-ph img{transform:scale(1.04)}
@media (max-width:640px){.zt-ph{height:170px !important}.zt-bimg{height:140px !important}}