/* DTCSoft agency UI — sinh từ mockup đã duyệt (canvas v34), selector đặt dưới .ag. Sửa trực tiếp file này. */
body.ag{margin:0;background:#F5F7FB}
.ag a{color:#2457F5;text-decoration:none}
.ag a:hover{color:#1A45D1}
.ag .wrap{max-width:1240px;margin:0 auto;padding:0 32px;box-sizing:border-box}
.ag .sec{padding:120px 0}
.ag .d{font-family:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif}
.ag .pill{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 8px;border-radius:999px;background:#FFFFFF;border:1px solid #E3E8F0;font-size:13px;font-weight:600;color:#0B1324}
.ag .pill b{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:#EAF0FF;color:#2457F5;font-size:12px}
.ag .h2{font-family:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif;font-size:68px;line-height:.98;letter-spacing:-.045em;font-weight:800;color:#0B1324;margin:0;text-wrap:balance}
.ag .lead{font-size:18px;line-height:1.65;color:#5B6680;margin:18px 0 0;max-width:600px}
.ag .eyb{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#2457F5;margin:0 0 18px}
.ag .head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap;margin-bottom:56px}
.ag .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 26px;border-radius:999px;font-weight:600;font-size:16px;box-sizing:border-box;border:0;font-family:inherit;cursor:pointer}
.ag .btn:focus-visible,.ag a:focus-visible,.ag summary:focus-visible{outline:3px solid #3DD2EE;outline-offset:3px}
.ag .bw{background:#FFFFFF;border-radius:16px;overflow:hidden;box-shadow:0 1px 0 #E3E8F0,0 30px 60px -20px rgba(11,19,36,.28)}
.ag .bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:#F1F4F9;border-bottom:1px solid #E3E8F0}
.ag .bar i{width:10px;height:10px;border-radius:50%;background:#D5DBE6;display:block}
.ag .bar span{margin-left:12px;flex:1;max-width:260px;height:20px;border-radius:6px;background:#FFFFFF;font-size:11px;color:#8A93A8;display:flex;align-items:center;padding:0 10px}
.ag .tile{background:#FFFFFF;border:1px solid #E3E8F0;border-radius:28px;padding:32px;display:flex;flex-direction:column;gap:12px;box-sizing:border-box;overflow:hidden;position:relative}
.ag .tile h3{font-family:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif;font-size:24px;letter-spacing:-.02em;line-height:1.15;color:#0B1324;margin:0}
.ag .tile p{margin:0;font-size:15px;line-height:1.6;color:#5B6680}
.ag .ln{height:8px;border-radius:4px;background:#E7EBF2}
.ag .chk{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5}
.ag .chk svg{flex:none;margin-top:2px}
.ag .svc{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:24px;align-items:center;padding:26px 0;border-top:1px solid #E3E8F0}
.ag .ic{width:56px;height:56px;border-radius:16px;background:#EAF0FF;color:#2457F5;display:flex;align-items:center;justify-content:center}
.ag .tag{display:inline-flex;padding:5px 11px;border-radius:999px;background:#F1F4F9;color:#33405A;font-size:12px;font-weight:600}
.ag .ind{display:flex;flex-direction:column;gap:18px}
.ag .ind .shot{position:relative;height:250px;overflow:hidden}
.ag .ind .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ag .ind .shot div{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,11,26,.55) 0%,rgba(5,11,26,.05) 45%,rgba(5,11,26,.6) 100%);display:flex;flex-direction:column;justify-content:space-between;padding:16px 20px;color:#FFFFFF}
.ag .g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ag .g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.ag .g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.ag .price{border-radius:28px;padding:36px;display:flex;flex-direction:column;gap:22px;box-sizing:border-box}
.ag .faq details{border-top:1px solid #E3E8F0;padding:24px 0}
.ag .faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;font-weight:600;font-size:18px;color:#0B1324}
.ag .faq summary::-webkit-details-marker{display:none}
.ag .faq p{margin:14px 0 0;font-size:16px;line-height:1.7;color:#5B6680;max-width:640px}
.ag .cover{height:220px;border-radius:20px;display:flex;align-items:flex-end;padding:24px;box-sizing:border-box;overflow:hidden;position:relative}
.ag .field{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:600;color:#A9B6D1}
.ag .field input,.ag .field select{height:52px;border-radius:14px;border:1px solid #24375F;background:#101D38;color:#FFFFFF;padding:0 16px;font-family:inherit;font-size:15px}
@media (max-width:1100px){.ag .hero{grid-template-columns:1fr !important}
.ag .bento{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.ag .bento>*{grid-column:auto !important;grid-row:auto !important}
.ag .split{grid-template-columns:1fr !important}
.ag .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
.ag .g4{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.ag .steps{grid-template-columns:repeat(3,minmax(0,1fr)) !important;row-gap:40px !important}
.ag .prices{grid-template-columns:1fr !important}
.ag .h2{font-size:42px}
}
@media (max-width:680px){.ag .g2,.ag .g3,.ag .g4,.ag .bento{grid-template-columns:1fr !important}
.ag .steps{grid-template-columns:1fr !important}
.ag .sec{padding:80px 0}
.ag .wrap{padding:0 16px}
.ag .nav,.ag .navx{display:none !important}
.ag .h1{font-size:44px !important}
.ag .h2{font-size:34px}
.ag .stage{height:420px !important}
.ag .svc{grid-template-columns:48px minmax(0,1fr)}
.ag .svc>a{display:none}
.ag .ctagrid{grid-template-columns:1fr !important;padding:32px !important}
.ag .ctaform{grid-template-columns:1fr !important}
}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes dash{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes tick{0%,8%{stroke-dashoffset:1}28%,100%{stroke-dashoffset:0}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(36,87,245,.55)}100%{box-shadow:0 0 0 10px rgba(36,87,245,0)}}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.8);opacity:0}}
@keyframes mq{to{transform:translateX(-50%)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blink{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@keyframes grow{0%{transform:scaleY(.2)}100%{transform:scaleY(1)}}
@keyframes msg{0%,6%{opacity:0;transform:translateY(8px) scale(.96)}14%,86%{opacity:1;transform:none}94%,100%{opacity:0}}
@keyframes shine{0%,55%{transform:translateX(-150%) skewX(-20deg)}100%{transform:translateX(350%) skewX(-20deg)}}
@keyframes flow{to{background-position:28px 0}}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(80px,-50px)}}
@keyframes tw{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.78) rotate(30deg)}}
@keyframes bd{to{--a:360deg}}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(-14deg)}20%{transform:rotate(12deg)}30%{transform:rotate(-8deg)}40%{transform:rotate(6deg)}}
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes shim{to{background-position:-200% 0}}
@keyframes rv{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes up{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes act{0%,15%{background:#2457F5;color:#FFFFFF;border-color:#2457F5;transform:translateY(-6px);box-shadow:0 16px 30px -12px rgba(36,87,245,.7)}20%,100%{background:#FFFFFF;color:#2457F5;border-color:#BFD0FF;transform:none;box-shadow:none}}
@keyframes cart{0%,70%,100%{transform:translateX(0)}80%{transform:translateX(4px)}90%{transform:translateX(-2px)}}
.ag .fl1{animation:fl 7s ease-in-out infinite}
.ag .fl2{animation:fl 6s ease-in-out -2s infinite}
.ag .fl3{animation:fl 8s ease-in-out -4s infinite}
.ag .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:dash 1.3s .4s cubic-bezier(.65,0,.35,1) forwards}
.ag .dot{width:7px;height:7px;border-radius:50%;background:#2457F5;display:inline-block;margin-right:6px;animation:pulse 1.8s infinite}
.ag .typing{display:flex;gap:4px;margin-top:8px}
.ag .typing i{width:6px;height:6px;border-radius:50%;background:#3DD2EE;animation:blink 1.2s infinite}
.ag .typing i:nth-child(2){animation-delay:.15s}
.ag .typing i:nth-child(3){animation-delay:.3s}
.ag .tick path{stroke-dasharray:1;stroke-dashoffset:1;animation:tick 5s ease-out infinite;animation-delay:var(--d,0s)}
.ag .mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ag .mqt{display:flex;width:max-content;animation:mq 45s linear infinite}
.ag .mq:hover .mqt{animation-play-state:paused}
.ag .mqt>span{display:flex;align-items:center;gap:36px;padding-right:36px}
.ag .star{display:inline-block;color:#3DD2EE;animation:spin 8s linear infinite}
.ag .bars>div{transform-origin:bottom;animation:grow 1.6s cubic-bezier(.3,.7,.3,1) infinite alternate}
.ag .bars>div:nth-child(2){animation-delay:.2s}
.ag .bars>div:nth-child(3){animation-delay:.4s}
.ag .bars>div:nth-child(4){animation-delay:.6s}
.ag .chat>*{animation:msg 7s ease infinite both}
.ag .chat>*:nth-child(2){animation-delay:1.2s}
.ag .chat>*:nth-child(3){animation-delay:2.4s}
.ag .caret{display:inline-block;width:2px;height:15px;background:#1A45D1;margin-left:2px;vertical-align:-2px;animation:caret 1s steps(1) infinite}
.ag .shim{background:linear-gradient(110deg,#2457F5 25%,#6E93FF 42%,#3DD2EE 58%,#2457F5 75%);background-size:200% 100%;animation:shim 5s linear infinite}
.ag .wv{transform-origin:50% 85%;animation:wave 3.2s ease-in-out infinite}
.ag .tw{transform-origin:center;animation:tw 2.6s ease-in-out infinite}
.ag .shine{position:relative;overflow:hidden;isolation:isolate}
.ag .shine::after{content:"";position:absolute;top:0;bottom:0;left:0;width:35%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:shine 3.6s ease-in-out infinite;pointer-events:none}
.ag .go:hover svg{animation:nudge .7s ease-in-out infinite}
.ag .orb{animation:drift 16s ease-in-out infinite}
.ag .ic{transition:background .35s,color .35s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.ag .ic svg *{stroke-dasharray:1;stroke-dashoffset:0}
.ag .svc:hover .ic svg *,.ag .tile:hover .ic svg *{animation:dash .9s cubic-bezier(.65,0,.35,1)}
.ag .svc:hover .ic,.ag .tile:hover .ic{background:#2457F5;color:#FFFFFF;transform:rotate(-8deg) scale(1.08)}
.ag .svc{transition:padding .35s}
.ag .svc:hover{padding-left:12px}
.ag .svc h3{transition:color .3s}
.ag .svc:hover h3{color:#2457F5 !important}
.ag .svc>a{transition:background .3s,color .3s,border-color .3s}
.ag .svc>a svg{transition:transform .35s}
.ag .svc:hover>a{background:#0B1324;border-color:#0B1324 !important;color:#FFFFFF !important}
.ag .svc:hover>a svg{transform:rotate(45deg)}
.ag .i-spin{animation:spin 9s linear infinite}
.ag .i-cart{animation:cart 2.4s ease-in-out infinite}
.ag .tile{transition:translate .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.ag .tile:hover{translate:0 -6px;box-shadow:0 30px 50px -30px rgba(11,19,36,.35)}
.ag .ind .bw{transition:translate .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.ag .ind:hover .bw{translate:0 -8px}
.ag .ind .shot img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.ag .ind:hover .shot img{transform:scale(1.07)}
.ag .zm img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.ag .zm:hover img{transform:scale(1.05)}
.ag .price{transition:translate .45s cubic-bezier(.2,.7,.2,1)}
.ag .price:hover{translate:0 -8px}
.ag .price .chk svg path{stroke-dasharray:1;stroke-dashoffset:0}
.ag .price:hover .chk svg path{animation:dash .7s ease both}
.ag .price:hover .chk:nth-child(2) path{animation-delay:.08s}
.ag .price:hover .chk:nth-child(3) path{animation-delay:.16s}
.ag .price:hover .chk:nth-child(4) path{animation-delay:.24s}
.ag .price:hover .chk:nth-child(5) path{animation-delay:.32s}
.ag .price:hover .chk:nth-child(6) path{animation-delay:.4s}
.ag .feat{position:relative;isolation:isolate}
.ag .feat::before{content:"";position:absolute;inset:-2px;border-radius:30px;background:conic-gradient(from var(--a),#2457F5,#3DD2EE,#FFFFFF,#2457F5);z-index:-1;animation:bd 5s linear infinite}
.ag .feat::after{content:"";position:absolute;inset:0;border-radius:28px;background:#FFFFFF;z-index:-1}
.ag .big{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.ag a:hover .big{transform:translate(-14px,10px) scale(1.06)}
.ag .flow{animation:flow 1s linear infinite}
.ag .stp{position:relative;width:64px;height:64px;border-radius:20px;border:2px solid #BFD0FF;background:#FFFFFF;color:#2457F5;display:flex;align-items:center;justify-content:center;box-sizing:border-box;animation:act 6s infinite;animation-delay:calc(var(--i) * 1s)}
.ag .stp svg *{stroke-dasharray:1;animation:tick 6s ease-out infinite;animation-delay:calc(var(--i) * 1s)}
.ag .pm{flex:none;width:30px;height:30px;border-radius:50%;background:#EAF0FF;position:relative;transition:transform .35s,background .35s}
.ag .pm::before,.ag .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:#2457F5;transition:background .35s}
.ag .pm::after{transform:rotate(90deg)}
.ag details[open] .pm{transform:rotate(135deg);background:#2457F5}
.ag details[open] .pm::before,.ag details[open] .pm::after{background:#FFFFFF}
.ag details[open] summary~*{animation:up .4s ease both}
.ag .nav a{background:linear-gradient(#3DD2EE,#3DD2EE) left bottom/0 2px no-repeat;padding:4px 0;transition:background-size .3s,color .3s}
.ag .nav a:hover{background-size:100% 2px;color:#FFFFFF !important}
.ag .prog{position:absolute;left:30px;right:30px;bottom:0;height:2px;border-radius:2px;background:linear-gradient(90deg,#2457F5,#3DD2EE);transform-origin:left;transform:scaleX(0)}
.ag .ringb{position:relative}
.ag .ringb::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid currentColor;animation:ring 1.8s ease-out infinite}
.ag .fab{position:fixed;right:24px;bottom:24px;z-index:30;display:flex;flex-direction:column;gap:12px}
.ag .fab a{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px -10px rgba(10,20,40,.55);transition:transform .3s}
.ag .fab a:hover{transform:scale(1.08)}
.ag .sf a{color:#7584A3;transition:color .25s}
.ag .sf a:hover{color:#FFFFFF}
@supports (animation-timeline:view()){.ag .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 80%}
}
@supports (animation-timeline:scroll()){.ag .prog{animation:prog linear both;animation-timeline:scroll(root)}
}
@media (prefers-reduced-motion:reduce){.ag *,.ag *::before,.ag *::after{animation:none !important;transition:none !important}
.ag .draw,.ag .tick path{stroke-dashoffset:0 !important}
}
@media (max-width:1100px){.ag .sftop{grid-template-columns:repeat(2,1fr) !important}
.ag .sftop>:first-child{grid-column:1/-1}
.ag .fab{display:none}
}
.ag .xl{font-family:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif;font-weight:800;letter-spacing:-.055em;line-height:.92;color:#0B1324;margin:0}
.ag .ol{color:transparent;-webkit-text-stroke:2px #0B1324}
.ag .rot{display:inline-grid;vertical-align:top;overflow:hidden;padding-bottom:.08em}
.ag .rot>span{grid-area:1/1;color:#2457F5;opacity:0;animation:rotw 9s cubic-bezier(.7,0,.2,1) infinite}
.ag .rot>span:nth-child(2){animation-delay:3s}
.ag .rot>span:nth-child(3){animation-delay:6s}
@keyframes rotw{0%{opacity:0;transform:translateY(70%)}6%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-70%)}}
.ag .sticker{position:absolute;width:210px;height:210px;border-radius:50%;background:#3DD2EE;display:flex;align-items:center;justify-content:center;box-shadow:0 30px 60px -24px rgba(11,19,36,.45)}
.ag .sticker svg{position:absolute;inset:0;animation:spin 16s linear infinite}
.ag .sticker b{font-family:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif;font-size:46px;font-weight:800;letter-spacing:-.04em;color:#0B1324;line-height:1;text-align:center}
.ag .sticker b small{display:block;font-size:14px;letter-spacing:0;font-weight:700}
.ag .fan{position:relative;height:440px}
.ag .fan .bw{position:absolute;width:520px;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.ag .fan .bw img{display:block;width:100%;height:300px;object-fit:cover}
.ag .fan:hover .bw{transform:rotate(0) translateY(-10px) !important}
.ag .strike{position:relative;display:inline}
.ag .strike::after{content:"";position:absolute;left:-4px;right:-4px;top:54%;height:5px;border-radius:4px;background:#3DD2EE;transform-origin:left;transform:scaleX(0);animation:strk 6s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes strk{0%,10%{transform:scaleX(0)}25%,85%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.ag .sg{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,.9fr);gap:40px;align-items:center;padding:34px 0;border-top:1px solid rgba(255,255,255,.22)}
.ag .sg .n{font-family:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif;font-size:84px;font-weight:800;line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.7)}
.ag .sg h3{margin:0;font-family:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif;font-size:38px;line-height:1.08;letter-spacing:-.03em;color:#FFFFFF;font-weight:700}
.ag .grid9{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:2px solid #0B1324;border-left:2px solid #0B1324}
.ag .grid9>a{position:relative;display:flex;flex-direction:column;gap:12px;min-height:250px;padding:30px;border-right:2px solid #0B1324;border-bottom:2px solid #0B1324;color:#0B1324;overflow:hidden;transition:background .35s,color .35s}
.ag .grid9>a::before{content:"";position:absolute;inset:0;background:#0A1428;transform:translateY(101%);transition:transform .5s cubic-bezier(.7,0,.2,1);z-index:0}
.ag .grid9>a>*{position:relative;z-index:1}
.ag .grid9>a:hover::before,.ag .grid9>a.is-h::before{transform:none}
.ag .grid9>a:hover,.ag .grid9>a.is-h{color:#FFFFFF}
.ag .grid9 .no{font-family:'JetBrains Mono',ui-monospace,Consolas,monospace;font-size:13px;color:#2457F5}
.ag .grid9>a:hover .no,.ag .grid9>a.is-h .no{color:#3DD2EE}
.ag .grid9 h3{margin:auto 0 0;font-family:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif;font-size:30px;letter-spacing:-.03em;line-height:1.05}
.ag .grid9 p{margin:0;font-size:15px;line-height:1.55;opacity:.75;max-width:320px}
.ag .grid9 .go2{position:absolute;right:26px;top:26px;width:46px;height:46px;border-radius:50%;border:2px solid currentColor;display:flex;align-items:center;justify-content:center;transition:transform .4s}
.ag .grid9>a:hover .go2,.ag .grid9>a.is-h .go2{transform:rotate(45deg);background:#3DD2EE;border-color:#3DD2EE;color:#0B1324}
.ag .ticket{position:relative;border-radius:26px;background:#FFFFFF;border:2px solid #0B1324;display:grid;grid-template-rows:auto auto;transition:translate .45s cubic-bezier(.2,.7,.2,1),rotate .45s}
.ag .ticket:hover{translate:0 -8px;rotate:-1deg}
.ag .ticket .top{padding:30px 30px 26px;border-bottom:2px dashed #0B1324;position:relative}
.ag .ticket .top::before,.ag .ticket .top::after{content:"";position:absolute;bottom:-15px;width:28px;height:28px;border-radius:50%;background:#F5F7FB;border:2px solid #0B1324}
.ag .ticket .top::before{left:-16px;clip-path:inset(0 0 0 50%)}
.ag .ticket .top::after{right:-16px;clip-path:inset(0 50% 0 0)}
.ag .ticket .bot{padding:26px 30px 30px;display:flex;flex-direction:column;gap:11px}
.ag .tl{display:grid;grid-template-columns:180px minmax(0,1fr) auto;gap:40px;align-items:baseline;padding:30px 0;border-top:2px solid #0B1324;transition:padding .35s}
.ag .tl:hover{padding-left:16px}
.ag .tl .big{font-family:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif;font-size:120px;font-weight:800;line-height:.75;letter-spacing:-.06em;color:#0B1324}
.ag .tl:hover .big{color:#2457F5}
.ag .chipx{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:999px;border:2px solid #0B1324;font-family:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif;font-size:26px;font-weight:700;letter-spacing:-.02em;color:#0B1324;background:#FFFFFF}
.ag .rev{animation-direction:reverse !important}
.ag .megacta{display:flex;align-items:center;gap:28px;color:#0B1324}
.ag .megacta .arr{flex:none;width:150px;height:150px;border-radius:50%;background:#2457F5;color:#FFFFFF;display:flex;align-items:center;justify-content:center;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.ag .megacta:hover .arr{transform:rotate(-45deg) scale(1.08)}
@media (max-width:1100px){.ag .sg{grid-template-columns:80px 1fr}
.ag .sg>p{grid-column:2}
.ag .grid9{grid-template-columns:repeat(2,minmax(0,1fr))}
.ag .tl{grid-template-columns:110px 1fr}
.ag .tl>span:last-child{grid-column:2}
.ag .tickets{grid-template-columns:1fr !important}
.ag .xl.h{font-size:96px !important}
}
@media (max-width:680px){.ag .grid9{grid-template-columns:1fr}
.ag .xl.h{font-size:60px !important}
.ag .sticker{display:none}
.ag .fan{display:none}
.ag .sg h3{font-size:28px}
.ag .tl .big{font-size:72px}
}
.ag .grid9 .ic{width:56px;height:56px;border-radius:16px}
.ag .grid9>a:hover .ic,.ag .grid9>a.is-h .ic{background:#3DD2EE !important;color:#0B1324 !important;transform:rotate(-8deg) scale(1.08)}
.ag .grid9>a:hover .ic svg *,.ag .grid9>a.is-h .ic svg *{animation:dash .9s cubic-bezier(.65,0,.35,1)}
.ag .grid9.six>a{min-height:280px}
@media (max-width:1100px){.ag .herobar{grid-template-columns:1fr !important}
}
.ag .ba-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ag .ba{background:#F5F7FB;border:1px solid #E3E8F0;border-radius:28px;padding:14px;display:flex;flex-direction:column;transition:translate .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.ag .ba:hover{translate:0 -6px;box-shadow:0 30px 50px -30px rgba(11,19,36,.35)}
.ag .ba-art{position:relative;height:270px;border-radius:20px;background:#FFFFFF radial-gradient(#E3E8F0 1px,transparent 1px);background-size:20px 20px;border:1px solid #E3E8F0;overflow:hidden}
.ag .ba-l{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:56px 40px 28px}
.ag .bf{animation:baB 8s infinite;animation-delay:var(--d)}
.ag .af{opacity:0;animation:baA 8s infinite;animation-delay:var(--d)}
@keyframes baB{0%,42%{opacity:1;transform:none}50%,92%{opacity:0;transform:scale(.95)}100%{opacity:1;transform:none}}
@keyframes baA{0%,42%{opacity:0;transform:scale(1.05)}50%,92%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.05)}}
.ag .ba-tg{position:absolute;top:14px;left:14px;z-index:3;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:#F1F4F9;border:1px solid #E3E8F0;font-size:12px;font-weight:700}
.ag .ba-tg span{position:relative;z-index:1;padding:5px 14px;text-align:center}
.ag .ba-tg span:first-child{animation:baL1 8s infinite;animation-delay:var(--d)}
.ag .ba-tg span:last-child{color:#667089;animation:baL2 8s infinite;animation-delay:var(--d)}
.ag .ba-tg i{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#8A93A8;animation:baT 8s infinite;animation-delay:var(--d)}
@keyframes baT{0%,42%{transform:none;background:#8A93A8}50%,92%{transform:translateX(100%);background:#2457F5}100%{transform:none;background:#8A93A8}}
@keyframes baL1{0%,42%{color:#FFFFFF}50%,92%{color:#667089}100%{color:#FFFFFF}}
@keyframes baL2{0%,42%{color:#667089}50%,92%{color:#FFFFFF}100%{color:#667089}}
.ag .ba:hover .ba-l,.ag .ba:hover .ba-tg span,.ag .ba:hover .ba-tg i{animation-play-state:paused}
.ag .mock{position:relative;width:100%;max-width:300px;height:170px;background:#FFFFFF;border:1px solid #E3E8F0;border-radius:14px;padding:14px;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;box-shadow:0 20px 40px -24px rgba(11,19,36,.35)}
.ag .mbar{height:14px;border-radius:5px;background:#D5DBE6;margin:-4px -4px 4px}
.ag .mbtn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 14px;border-radius:999px;color:#FFFFFF;font-size:11px;font-weight:700}
.ag .toast{position:absolute;right:22px;bottom:20px;display:flex;gap:8px;align-items:center;padding:10px 14px;border-radius:14px;background:#FFFFFF;box-shadow:0 16px 30px -12px rgba(11,19,36,.35);font-size:12px;font-weight:600;color:#0B1324;animation:fl 4s ease-in-out infinite}
.ag .serp{width:100%;max-width:370px;background:#FFFFFF;border:1px solid #E3E8F0;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;box-sizing:border-box}
.ag .serp .u{font-size:11px;color:#0E8A5F}
.ag .serp .t{font-size:15px;font-weight:600;color:#1A45D1;line-height:1.3}
.ag .serp .ds{font-size:12px;color:#5B6680;line-height:1.5}
.ag .sl{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:7px;background:#F1F4F9;font-size:11px;font-weight:600;color:#33405A}
.ag .ph{width:120px;height:200px;border-radius:24px;background:#0B1324;padding:5px;box-sizing:border-box;box-shadow:0 20px 40px -20px rgba(11,19,36,.5)}
.ag .ph-in{height:100%;border-radius:19px;background:#FFFFFF;overflow:hidden;padding:10px;box-sizing:border-box;display:flex;flex-direction:column;gap:7px}
.ag .spin8{width:30px;height:30px;border-radius:50%;border:3px solid #E3E8F0;border-top-color:#9AA3B5;animation:spin 1s linear infinite;box-sizing:border-box}
.ag .slow{height:100%;width:30%;background:#9AA3B5;animation:slow 4s ease-in-out infinite}
@keyframes slow{0%{width:5%}100%{width:45%}}
.ag .ba-tx{padding:24px 14px 14px;display:flex;flex-direction:column;gap:8px}
.ag .ba-tx h3{margin:0;font-family:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif;font-size:26px;letter-spacing:-.02em;color:#0B1324;line-height:1.15}
.ag .ba-tx p{margin:0;font-size:15px;line-height:1.6;color:#5B6680;max-width:460px}
@media (max-width:680px){.ag .ba-grid{grid-template-columns:1fr}
.ag .ba-art{height:240px}
}
.ag .ba-art{height:300px}
.ag .bgp{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:baP 8s infinite;animation-delay:var(--d);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.ag .ba:hover .bgp{transform:scale(1.05)}
@keyframes baP{0%,42%{filter:grayscale(1) brightness(.72) blur(1.5px)}50%,92%{filter:none}100%{filter:grayscale(1) brightness(.72) blur(1.5px)}}
.ag .ba-l{z-index:2;transition:opacity .5s,transform .5s}
.ag .ba-l .mock,.ag .ba-l .serp,.ag .ba-l .ph{box-shadow:0 30px 50px -20px rgba(5,11,26,.6)}
.ag .ba:hover .bgp{animation-play-state:paused}
.ag .basw-in{position:absolute;opacity:0;pointer-events:none}
.ag .basw-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:-20px 0 28px}
.ag .basw{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:999px;background:#F1F4F9;border:1px solid #E3E8F0;cursor:pointer;font-weight:700;font-size:14px;user-select:none}
.ag .basw span{position:relative;z-index:1;padding:11px 22px;text-align:center;transition:color .3s}
.ag .basw span:first-child{color:#FFFFFF}
.ag .basw span:last-child{color:#667089}
.ag .basw i{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:#0B1324;transition:transform .45s cubic-bezier(.3,1.4,.5,1),background .3s}
.ag .basw-in:checked~.basw-row .basw i{transform:translateX(100%);background:#2457F5}
.ag .basw-in:checked~.basw-row .basw span:first-child{color:#667089}
.ag .basw-in:checked~.basw-row .basw span:last-child{color:#FFFFFF}
.ag .basw-in:focus-visible~.basw-row .basw{outline:3px solid #3DD2EE;outline-offset:3px}
.ag .basw-in:checked~.ba-grid .bf{animation:none;opacity:0;transform:scale(.95)}
.ag .basw-in:checked~.ba-grid .af{animation:none;opacity:1;transform:none}
.ag .basw-in:checked~.ba-grid .bgp{animation:none;filter:none}
.ag .basw-in:checked~.ba-grid .ba-tg i{animation:none;transform:translateX(100%);background:#2457F5}
.ag .basw-in:checked~.ba-grid .ba-tg span:first-child{animation:none;color:#667089}
.ag .basw-in:checked~.ba-grid .ba-tg span:last-child{animation:none;color:#FFFFFF}
.ag .ba-cta{margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:32px;align-items:center;padding:28px 32px;border-radius:28px;background:#0A1428;position:relative;overflow:hidden}
.ag .ba-in{display:flex;gap:10px;padding:6px;border-radius:999px;background:#101D38;border:1px solid #24375F}
.ag .ba-in input{flex:1;min-width:0;border:0;background:transparent;color:#FFFFFF;font:inherit;font-size:15px;padding:0 18px}
.ag .ba-in input::placeholder{color:#7F8DAA}
.ag .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:1100px){.ag .ba-cta{grid-template-columns:1fr}
}
@media (max-width:680px){.ag .ba-in{flex-direction:column;border-radius:20px}
.ag .ba-in input{height:48px}
}
.ag .iph{--w:220px;position:relative;width:var(--w);height:calc(var(--w) * 2.07);border-radius:calc(var(--w) * .18);padding:calc(var(--w) * .038);box-sizing:border-box;background:linear-gradient(150deg,#5B606B,#22252C 30%,#14161B 70%,#4A4F59);box-shadow:inset 0 0 0 1.5px #7A808C,inset 0 0 0 4px #1A1C21,0 60px 90px -36px rgba(11,19,36,.6)}
.ag .iph::before{content:"";position:absolute;left:-2px;top:22%;width:3px;height:9%;border-radius:2px;background:#3A3E47;box-shadow:0 calc(var(--w) * .25) 0 #3A3E47}
.ag .iph::after{content:"";position:absolute;right:-2px;top:28%;width:3px;height:14%;border-radius:2px;background:#3A3E47}
.ag .iph .scr{position:relative;height:100%;border-radius:calc(var(--w) * .145);overflow:hidden;background:#FFFFFF;font-size:11px;color:#0B1324}
.ag .iph .di{position:absolute;z-index:6;top:calc(var(--w) * .03);left:50%;width:31%;height:calc(var(--w) * .088);transform:translateX(-50%);border-radius:999px;background:#000}
.ag .iph .sb{position:absolute;z-index:5;top:0;left:0;right:0;height:calc(var(--w) * .135);display:flex;justify-content:space-between;align-items:center;padding:0 9% 0 11%;font-size:calc(var(--w) * .052);font-weight:700;color:#0B1324;pointer-events:none}
.ag .iph .sb.w{color:#FFFFFF}
.ag .iph .sb i{display:inline-flex;gap:3px;align-items:center}
.ag .iph .sb i b{display:block;width:3px;border-radius:1px;background:currentColor}
.ag .iph .sb i u{display:block;width:calc(var(--w) * .1);height:calc(var(--w) * .048);border-radius:3px;border:1.5px solid currentColor;box-sizing:border-box;position:relative;margin-left:4px;text-decoration:none}
.ag .iph .sb i u::after{content:"";position:absolute;inset:1.5px;right:25%;border-radius:1px;background:currentColor}
.ag .iph .hi{position:absolute;z-index:6;bottom:calc(var(--w) * .022);left:50%;width:36%;height:calc(var(--w) * .018);transform:translateX(-50%);border-radius:3px;background:rgba(11,19,36,.85)}
.ag .iph .hi.w{background:rgba(255,255,255,.9)}
.ag .scroll{animation:scr var(--t,12s) ease-in-out infinite alternate}
@keyframes scr{0%,12%{transform:translateY(0)}88%,100%{transform:translateY(var(--y))}}
.ag .mbp{position:relative;width:760px}
.ag .mbp .lid{position:relative;background:#0B0D12;border-radius:20px 20px 0 0;padding:14px 14px 20px;box-shadow:inset 0 0 0 2px #2E323B,0 50px 90px -40px rgba(11,19,36,.55)}
.ag .mbp .notch{position:absolute;top:14px;left:50%;width:110px;height:15px;transform:translateX(-50%);background:#0B0D12;border-radius:0 0 9px 9px;z-index:6}
.ag .mbp .scr{position:relative;height:440px;border-radius:6px;overflow:hidden;background:#FFFFFF;font-size:11px;color:#0B1324}
.ag .mbp .base{position:relative;height:18px;margin:0 -64px;background:linear-gradient(180deg,#E3E6EC,#B5BBC6 70%,#8E95A1);border-radius:2px 2px 22px 22px / 2px 2px 14px 14px}
.ag .mbp .base::before{content:"";position:absolute;left:50%;top:0;width:130px;height:7px;transform:translateX(-50%);border-radius:0 0 8px 8px;background:#A2A9B4}
.ag .ipad{position:relative;width:300px;height:410px;border-radius:30px;background:linear-gradient(150deg,#4A4F59,#1C1F26 40%,#2C3038);padding:13px;box-sizing:border-box;box-shadow:inset 0 0 0 1.5px #6B717D,0 50px 80px -36px rgba(11,19,36,.55)}
.ag .ipad .scr{position:relative;height:100%;border-radius:18px;overflow:hidden;background:#FFFFFF;font-size:10px;color:#0B1324}
.ag .mb{display:inline-flex;align-items:center;justify-content:center;height:26px;padding:0 12px;border-radius:999px;color:#FFFFFF;font-size:10px;font-weight:700;white-space:nowrap}
.ag .xs{font-size:9px;color:#667089}
.ag .lnx{height:6px;border-radius:3px;background:#E7EBF2}
.ag .show{position:relative;height:660px}
.ag .show .lbl{position:absolute;z-index:8;display:inline-flex;gap:10px;align-items:center;padding:12px 16px;border-radius:16px;background:#FFFFFF;box-shadow:0 20px 40px -18px rgba(11,19,36,.35);font-size:14px;font-weight:600;color:#0B1324}
.ag .show .lbl svg{flex:none}
.ag .dev-tabs{display:inline-flex;gap:4px;padding:5px;border-radius:999px;background:#FFFFFF;border:1px solid #E3E8F0}
.ag .dev-tabs span{display:inline-flex;gap:8px;align-items:center;padding:9px 16px;border-radius:999px;font-size:14px;font-weight:600;color:#5B6680}
.ag .dev-tabs span.on{background:#0B1324;color:#FFFFFF}
.ag .ind .stagewrap{position:relative}
.ag .ind .iph{position:absolute;right:-14px;bottom:-34px;z-index:3;transition:translate .5s cubic-bezier(.2,.7,.2,1),rotate .5s}
.ag .ind:hover .iph{translate:0 -14px;rotate:-3deg}
@media (max-width:1100px){.ag .show{transform:scale(.78);transform-origin:top center;height:540px}
}
@media (max-width:680px){.ag .show{transform:scale(.46);height:320px}
.ag .show .lbl{display:none}
}
.ag .bento2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:290px;gap:20px}
.ag .bt{position:relative;border-radius:28px;overflow:hidden;background:#FFFFFF;border:1px solid #E3E8F0;transition:translate .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.ag .bt:hover{translate:0 -6px;box-shadow:0 34px 60px -34px rgba(11,19,36,.45)}
.ag .bt-a{grid-column:span 2;grid-row:span 2;border:0}
.ag .bt-b,.ag .bt-e,.ag .bt-f{grid-column:span 2}
.ag .bt .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.ag .bt:hover .bg{transform:scale(1.06)}
.ag .bt .tx{position:relative;z-index:2;padding:28px 30px;display:flex;flex-direction:column;gap:10px}
.ag .bt h3{margin:0;font-family:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif;font-size:26px;line-height:1.1;letter-spacing:-.025em;color:#0B1324}
.ag .bt p{margin:0;font-size:15px;line-height:1.6;color:#5B6680}
.ag .btag{font-family:'JetBrains Mono',ui-monospace,Consolas,monospace;font-size:12px;font-weight:700;color:#2457F5;letter-spacing:.02em}
.ag .gauge{stroke-dasharray:1;stroke-dashoffset:1;animation:gauge 4s cubic-bezier(.3,.7,.2,1) infinite}
@keyframes gauge{0%{stroke-dashoffset:1}45%,90%{stroke-dashoffset:.08}100%{stroke-dashoffset:1}}
.ag .note{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:#FFFFFF;box-shadow:0 20px 36px -16px rgba(11,19,36,.5);font-size:12px;color:#667089;animation:msg 6s ease infinite both;animation-delay:var(--d)}
.ag .note b{display:block;font-size:13px;color:#0B1324}
.ag .ni{flex:none;width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center}
@media (max-width:1100px){.ag .bento2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){.ag .bento2{grid-template-columns:1fr;grid-auto-rows:auto}
.ag .bt{min-height:300px}
.ag .bt-a,.ag .bt-b,.ag .bt-e,.ag .bt-f{grid-column:auto;grid-row:auto}
.ag .bt-a{min-height:520px}
.ag .bt-b,.ag .bt-e,.ag .bt-f{grid-template-columns:1fr !important}
.ag .bt-b>div:last-child,.ag .bt-e>div:first-child,.ag .bt-f>div:last-child{min-height:240px}
}
.ag .types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ag .ty{position:relative;display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:#FFFFFF;border:1px solid #E3E8F0;color:#0B1324;transition:translate .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.ag .ty:hover,.ag .ty.is-h{translate:0 -8px;box-shadow:0 40px 70px -40px rgba(11,19,36,.55);color:#0B1324}
.ag .ty-img{position:relative;height:230px;overflow:hidden;margin:10px 10px 0;border-radius:20px}
.ag .ty-img .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.ag .ty:hover .ty-img .bg,.ag .ty.is-h .ty-img .bg{transform:scale(1.07)}
.ag .ty-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,11,26,.35),transparent 40%,transparent 60%,rgba(5,11,26,.45))}
.ag .ty-no{position:absolute;left:16px;top:14px;z-index:2;font-family:'JetBrains Mono',ui-monospace,Consolas,monospace;font-size:12px;font-weight:700;color:#FFFFFF;letter-spacing:.04em}
.ag .ty-go{position:absolute;right:14px;top:12px;z-index:2;width:42px;height:42px;border-radius:50%;background:#FFFFFF;color:#0B1324;display:flex;align-items:center;justify-content:center;transition:transform .45s cubic-bezier(.3,1.6,.5,1),background .3s,color .3s}
.ag .ty:hover .ty-go,.ag .ty.is-h .ty-go{transform:rotate(45deg);background:#3DD2EE}
.ag .ty-ui{position:absolute;left:14px;bottom:14px;z-index:2;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:14px;background:#FFFFFF;box-shadow:0 16px 30px -12px rgba(5,11,26,.55);font-size:12px;font-weight:600;color:#0B1324;max-width:calc(100% - 28px);box-sizing:border-box}
.ag .ty-ui .mb{height:24px;font-size:10px}
.ag .ty-tx{position:relative;display:flex;gap:16px;align-items:flex-start;padding:22px 24px 26px;isolation:isolate}
.ag .ty-tx::before{content:"";position:absolute;inset:0;z-index:-1;background:#0A1428;transform:translateY(101%);transition:transform .5s cubic-bezier(.7,0,.2,1)}
.ag .ty:hover .ty-tx::before,.ag .ty.is-h .ty-tx::before{transform:none}
.ag .ty-tx h3{margin:0;font-family:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif;font-size:24px;line-height:1.1;letter-spacing:-.025em;transition:color .35s}
.ag .ty-tx p{margin:6px 0 12px;font-size:14.5px;line-height:1.55;color:#5B6680;transition:color .35s}
.ag .ty-tx .tag{transition:background .35s,color .35s}
.ag .ty .ic{width:48px;height:48px;border-radius:14px;flex:none}
.ag .ty:hover .ty-tx h3,.ag .ty.is-h .ty-tx h3{color:#FFFFFF}
.ag .ty:hover .ty-tx p,.ag .ty.is-h .ty-tx p{color:#A9B6D1}
.ag .ty:hover .ty-tx .tag,.ag .ty.is-h .ty-tx .tag{background:#1A2B4F;color:#D9E1F0}
.ag .ty:hover .ic,.ag .ty.is-h .ic{background:#3DD2EE;color:#0B1324;transform:rotate(-8deg) scale(1.08)}
.ag .ty:hover .ic svg *,.ag .ty.is-h .ic svg *{animation:dash .9s cubic-bezier(.65,0,.35,1)}
@media (max-width:1100px){.ag .types{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){.ag .types{grid-template-columns:1fr}
.ag .ty-img{height:200px}
}
.ag .fr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ag .fr{display:flex;flex-direction:column;border-radius:30px;background:#FFFFFF;border:1px solid #E3E8F0;overflow:hidden;transition:translate .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s}
.ag .fr:hover{translate:0 -6px;box-shadow:0 40px 70px -40px rgba(11,19,36,.5)}
.ag .fr-vis{position:relative;height:340px;margin:10px 10px 0;border-radius:22px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.ag .fr-vis .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.ag .fr:hover .fr-vis .bg{transform:scale(1.05)}
.ag .fr-vis::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,rgba(10,20,40,.78),rgba(10,20,40,.35))}
.ag .rep{position:relative;z-index:2;width:78%;max-width:400px;background:#FFFFFF;border-radius:18px;padding:16px 18px;box-shadow:0 30px 60px -20px rgba(5,11,26,.7);display:flex;flex-direction:column;gap:10px}
.ag .rings{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px 0 4px;border-bottom:1px solid #EEF1F6}
.ag .rings>span{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:#0B1324}
.ag .rings b{font-weight:700}
.ag .rings i{font-style:normal;font-size:10px;font-weight:700}
.ag .rg{stroke-dasharray:1;stroke-dashoffset:1;animation:rgf 6s cubic-bezier(.3,.7,.2,1) infinite}
@keyframes rgf{0%{stroke-dashoffset:1}30%,90%{stroke-dashoffset:calc(1 - var(--v))}100%{stroke-dashoffset:1}}
.ag .iss{display:flex;gap:10px;align-items:center;font-size:12px;color:#33405A}
.ag .iss i{flex:none;width:8px;height:8px;border-radius:50%}
.ag .flowv{position:relative;z-index:2;display:grid;grid-template-columns:auto 50px auto 50px auto;align-items:center;height:200px;padding:0 14px}
.ag .srcs{display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.ag .fc{display:inline-flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border-radius:12px;background:#FFFFFF;font-size:12px;font-weight:600;color:#0B1324;box-shadow:0 16px 30px -12px rgba(5,11,26,.6);white-space:nowrap}
.ag .fc b{width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px}
.ag .wires{width:100%;height:200px;overflow:visible}
.ag .fline{fill:none;stroke:#3DD2EE;stroke-width:2;stroke-dasharray:6 6;vector-effect:non-scaling-stroke;animation:fdash 1s linear infinite}
@keyframes fdash{to{stroke-dashoffset:-12}}
.ag .hub{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:96px;height:96px;border-radius:26px;background:#2457F5;color:#FFFFFF;font-size:11px;font-weight:700;text-align:center;box-shadow:0 20px 40px -12px rgba(36,87,245,.8)}
.ag .fr-tx{display:flex;flex-direction:column;gap:10px;padding:26px 30px 30px}
.ag .fr-tx h3{margin:0;font-family:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif;font-size:30px;line-height:1.1;letter-spacing:-.025em;color:#0B1324}
.ag .fr-tx p{margin:0;font-size:16px;line-height:1.6;color:#5B6680;max-width:480px}
.ag .fr-in{display:flex;gap:8px;margin-top:8px;padding:5px;border-radius:999px;background:#F5F7FB;border:1px solid #E3E8F0}
.ag .fr-in input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:15px;padding:0 16px;color:#0B1324}
.ag .fr-in:focus-within{border-color:#2457F5;box-shadow:0 0 0 4px rgba(36,87,245,.12)}
.ag .steps3{list-style:none;margin:24px 0 0;padding:26px 30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;border-radius:26px;background:#FFFFFF;border:1px solid #E3E8F0}
.ag .steps3 li{position:relative;display:flex;gap:16px;align-items:flex-start;font-size:14px;line-height:1.55;color:#5B6680}
.ag .steps3 li:not(:last-child)::after{content:"";position:absolute;right:-22px;top:18px;width:12px;height:12px;border-top:2px solid #BFD0FF;border-right:2px solid #BFD0FF;transform:rotate(45deg)}
.ag .steps3 b{display:block;font-size:16px;color:#0B1324;margin-bottom:3px}
.ag .s3i{flex:none;width:48px;height:48px;border-radius:15px;background:#EAF0FF;color:#2457F5;display:flex;align-items:center;justify-content:center}
.ag .more{margin-top:24px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 14px 14px 26px;border-radius:999px;border:1px dashed #BFD0FF;background:#F8FAFF}
.ag .more>b{font-size:18px;color:#0B1324;margin-right:auto}
.ag .more a{display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:999px;background:#FFFFFF;border:1px solid #E3E8F0;font-size:14px;font-weight:600;color:#0B1324;transition:border-color .3s,translate .3s}
.ag .more a:hover{border-color:#2457F5;translate:0 -2px}
.ag .more .ic{width:34px;height:34px;border-radius:50%}
.ag .more a:hover .ic{background:#2457F5;color:#FFFFFF}
.ag .more a:hover .ic svg *{animation:dash .9s cubic-bezier(.65,0,.35,1)}
.ag .faq2{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
.ag .faq-side{position:sticky;top:110px}
.ag .help{margin-top:30px;border-radius:28px;background:#0A1428;overflow:hidden}
.ag .help-img{position:relative;height:170px;overflow:hidden}
.ag .help-img .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s}
.ag .help:hover .help-img .bg{transform:scale(1.05)}
.ag .qtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.ag .qtabs span{padding:9px 16px;border-radius:999px;background:#F1F4F9;font-size:14px;font-weight:600;color:#5B6680}
.ag .qtabs span.on{background:#0B1324;color:#FFFFFF}
.ag .faq-list{display:flex;flex-direction:column;gap:12px}
.ag .qa{border-radius:20px;background:#F5F7FB;border:1px solid #E3E8F0;transition:background .3s,border-color .3s,box-shadow .3s}
.ag .qa:hover{border-color:#BFD0FF}
.ag .qa[open]{background:#FFFFFF;border-color:#BFD0FF;box-shadow:0 24px 44px -30px rgba(36,87,245,.55)}
.ag .qa summary{list-style:none;display:flex;gap:16px;align-items:center;padding:20px 22px;cursor:pointer;font-weight:600;font-size:17px;color:#0B1324}
.ag .qa summary::-webkit-details-marker{display:none}
.ag .qa summary:focus-visible{outline:3px solid #3DD2EE;outline-offset:2px;border-radius:20px}
.ag .qa .qn{flex:none;width:34px;height:34px;border-radius:11px;background:#FFFFFF;border:1px solid #E3E8F0;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',ui-monospace,Consolas,monospace;font-size:12px;color:#2457F5}
.ag .qa[open] .qn{background:#2457F5;border-color:#2457F5;color:#FFFFFF}
.ag .qa .pm{margin-left:auto}
.ag .qa p{margin:0;padding:0 22px 22px 72px;font-size:15.5px;line-height:1.7;color:#5B6680}
@media (max-width:1100px){.ag .fr-grid,.ag .faq2{grid-template-columns:1fr}
.ag .faq-side{position:static}
.ag .steps3{grid-template-columns:1fr}
.ag .steps3 li::after{display:none}
}
@media (max-width:680px){.ag .flowv{transform:scale(.8)}
.ag .more{border-radius:24px}
.ag .qa p{padding-left:22px}
}
.ag .burger{display:none}
.ag .mbar2{display:none}
@media (max-width:680px){.ag header .wrap>div{height:60px !important;padding:0 7px 0 16px !important}
.ag header img{height:30px !important}
.ag header .btn.shine{display:none !important}
.ag .burger{display:flex;width:46px;height:46px;border-radius:50%;border:0;background:#1A2B4F;align-items:center;justify-content:center;cursor:pointer}
.ag .mbar2{display:grid;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:40;height:62px;grid-template-columns:1fr 1fr 1.5fr;gap:6px;padding:6px;box-sizing:border-box;border-radius:999px;background:#0A1428;box-shadow:0 16px 30px -10px rgba(10,20,40,.55)}
.ag .mbar2 a{display:flex;align-items:center;justify-content:center;gap:6px;border-radius:999px;color:#FFFFFF;font-size:14px;font-weight:600}
.ag .mbar2 a:nth-child(2){background:#0068FF}
.ag .mbar2 a:last-child{background:#2457F5}
.ag .pill{font-size:12px}
.ag .xl{letter-spacing:-.045em}
.ag .head .xl{font-size:54px !important}
.ag .head{margin-bottom:30px;gap:20px}
.ag .herobar{margin-top:28px !important;gap:24px !important}
.ag .herobar>div:last-child{display:grid !important;grid-template-columns:1fr}
.ag .herobar .btn{width:100%}
.ag .stage.fan{display:block !important;height:380px !important;margin-top:44px !important}
.ag .stage>.bw:nth-of-type(1),.ag .stage>.bw:nth-of-type(3){display:none}
.ag .stage>.bw:nth-of-type(2){left:0 !important;margin-left:0 !important;width:100% !important;transform:none !important}
.ag .stage>.bw:nth-of-type(2) img{height:220px !important}
.ag .stage>.bw:nth-of-type(2) .d{font-size:24px !important}
.ag .stage .hph{--w:128px !important;right:-6px !important;bottom:-24px !important}
.ag .stage .hseo{left:-6px !important;bottom:-34px !important;width:200px !important;scale:.82;transform-origin:bottom left}
.ag .stage .hcb{display:none !important}
.ag .bands{height:160px !important;margin-top:10px !important}
.ag .bands .mq:first-child{top:44px !important}
.ag .bands .mq:last-child{top:58px !important}
.ag .bands .mqt{font-size:20px !important;padding:13px 0 !important}
.ag .show{height:460px !important;transform:none !important}
.ag .show .mbp{left:0 !important;margin-left:0 !important;top:6px !important;scale:.45;transform-origin:top left}
.ag .show .ipad,.ag .show .sh-spa,.ag .show .lbl{display:none !important}
.ag .show .sh-food{--w:138px !important;right:-4px !important;top:150px !important}
.ag .dev-tabs span{padding:8px 11px;font-size:13px}
.ag .bento2{grid-template-columns:1fr 1fr !important;gap:12px !important}
.ag .bt-a,.ag .bt-b,.ag .bt-e,.ag .bt-f{grid-column:span 2 !important}
.ag .bt:not(.bt-a):not(.bt-b):not(.bt-e):not(.bt-f){grid-column:span 1;min-height:270px}
.ag .bt .tx{padding:20px}
.ag .bt h3{font-size:21px}
.ag .bt-a h3{font-size:28px !important}
.ag .bt-a .fl3{display:none !important}
.ag .bt-b>div:last-child,.ag .bt-e>div:first-child,.ag .bt-f>div:last-child{min-height:200px !important}
.ag .snapm{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px !important;margin:0 -16px;padding:6px 16px 22px;scrollbar-width:none}
.ag .snapm::-webkit-scrollbar{display:none}
.ag .snapm>*{flex:none;width:300px;scroll-snap-align:start}
.ag .ba-art{height:250px}
.ag .ba-tx h3{font-size:22px}
.ag .basw-row{margin-top:-10px}
.ag .basw span{padding:10px 14px}
.ag .types.snapm>*,.ag .prices.snapm>*{width:310px}
.ag .prices{padding-top:10px !important}
.ag .prices>.feat{order:-1}
.ag .indg>*{width:296px}
.ag .steps .flow{display:none}
.ag .steps>div{display:grid !important;grid-template-columns:64px 1fr;column-gap:16px;padding-right:0 !important}
.ag .steps .stp{grid-row:span 3}
.ag .steps>div>div.d{margin:0 !important}
.ag .steps{row-gap:26px !important}
.ag .rep{width:92%}
.ag .flowv{transform:scale(.66) !important}
.ag .fr-vis{height:290px}
.ag .fr-tx{padding:22px}
.ag .fr-tx h3{font-size:24px}
.ag .fr-in{flex-direction:column;border-radius:20px}
.ag .fr-in input{height:46px}
.ag .more>b{width:100%}
.ag .bigcta{padding:10px 0 40px !important}
.ag .bigcta .xl{font-size:84px !important}
.ag .bigcta .star{font-size:54px !important}
.ag .ctagrid h2{font-size:40px !important}
.ag .sf{padding-bottom:110px !important}
.ag .qa summary{font-size:16px;padding:16px;gap:12px}
.ag .qa .qn{width:30px;height:30px}
.ag .cover{height:180px}

}
.ag .dd{display:inline-flex;align-items:center;gap:6px}
.ag .dd svg{transition:transform .3s}
.ag .dd[aria-expanded="true"] svg{transform:rotate(180deg)}
.ag .dd[aria-expanded="true"]{background-size:100% 2px}
.ag .mi{display:flex;gap:14px;align-items:flex-start;padding:10px 12px;margin:0 -12px;border-radius:16px;color:#0B1324;transition:background .25s}
.ag .mi:hover,.ag .mi.is-h{background:#F5F7FB;color:#0B1324}
.ag .mi .ic{width:42px;height:42px;border-radius:12px;flex:none}
.ag .mi b{display:block;font-size:15px;font-weight:600;line-height:1.3}
.ag .mi .t{display:block;font-size:13px;color:#5B6680;line-height:1.45;margin-top:3px}
.ag .mi:hover .ic,.ag .mi.is-h .ic{background:#2457F5;color:#FFFFFF;transform:rotate(-8deg) scale(1.08)}
.ag .mi:hover .ic svg *,.ag .mi.is-h .ic svg *{animation:dash .9s cubic-bezier(.65,0,.35,1)}
.ag .ml{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;font-size:15px;font-weight:500;color:#33405A;border-bottom:1px solid #EEF1F6}
.ag .ml svg{opacity:0;transform:translateX(-8px);transition:opacity .25s,transform .25s;flex:none}
.ag .ml:hover,.ag .ml.is-h{color:#2457F5}
.ag .ml:hover svg,.ag .ml.is-h svg{opacity:1;transform:none}
.ag .mh{margin:0 0 12px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8A93A8}
.ag .panel{background:#FFFFFF;border-radius:28px;box-shadow:0 50px 90px -30px rgba(10,20,40,.5),0 0 0 1px #E3E8F0;padding:12px;animation:up .45s cubic-bezier(.2,.7,.2,1) both}
.ag .node{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#16264A;color:#3DD2EE;flex:none}
.ag .thumb{width:48px;height:48px;border-radius:12px;object-fit:cover;flex:none;transition:transform .4s}
.ag .mi:hover .thumb,.ag .mi.is-h .thumb{transform:scale(1.08) rotate(-3deg)}
body.ag{font-family:'Be Vietnam Pro',system-ui,sans-serif;color:#33405A}
.ag-hd,.ag-ft{font-family:'Be Vietnam Pro',system-ui,sans-serif;color:#33405A;line-height:normal}
.ag-hd{position:sticky;top:0;z-index:50}
.ag-hd header{position:relative;padding:16px 0 0}
.ag-hd .hbar{display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;height:68px;padding:0 10px 0 24px;border-radius:999px;background:rgba(10,20,40,.94);box-shadow:0 12px 30px -12px rgba(10,20,40,.5)}
.ag-hd .logo{display:flex;align-items:center}
.ag-hd .logo img{height:36px;width:auto;display:block}
.ag-hd .nav{display:flex;gap:26px;font-size:15px;font-weight:500}
.ag-hd .nav a,.ag-hd .nav button{color:#D9E1F0}
.ag-hd .nav [aria-current="page"],.ag-hd .nav .is-cur{color:#FFFFFF;font-weight:600;background-size:100% 2px}
.ag-hd .nav button{font:inherit;border:0;cursor:pointer;background:linear-gradient(#3DD2EE,#3DD2EE) left bottom/0 2px no-repeat;padding:4px 0;transition:background-size .3s,color .3s}
.ag-hd .nav button:hover,.ag-hd .nav button[aria-expanded="true"]{background-size:100% 2px;color:#FFFFFF}
.ag-hd .hact{display:flex;gap:16px;align-items:center}
.ag-hd .hcta{background:#2457F5;color:#FFFFFF;min-height:48px;padding:0 22px;font-size:15px}
.ag .mega{position:absolute;left:0;right:0;top:calc(100% + 12px);z-index:2}
.ag .mega[hidden],.ag .mdim[hidden]{display:none}
.ag .mdim{position:fixed;inset:0;z-index:-1;background:rgba(10,20,40,.38);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ag .mega .panel{max-height:calc(100vh - 120px);overflow:auto}
.ag .skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:10px 16px;border-radius:10px;background:#FFFFFF;color:#0B1324;font-weight:600}
.ag .skip:focus{left:16px}
.ag a:focus-visible,.ag button:focus-visible,.ag summary:focus-visible{outline:3px solid #3DD2EE;outline-offset:2px}
.ag .mm{position:fixed;inset:0;z-index:60;overflow:auto;background:#FFFFFF;padding-bottom:96px;font-family:'Be Vietnam Pro',system-ui,sans-serif;color:#33405A}
.ag .mm[hidden]{display:none}
.ag .mm-top{position:sticky;top:0;z-index:2;margin:12px;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 18px;border-radius:999px;background:#0A1428}
.ag .mm-top img{height:30px;width:auto;display:block}
.ag .mm-x{width:44px;height:44px;border-radius:50%;border:0;background:#2457F5;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ag .mm nav{padding:8px 20px 0;max-width:640px;margin:0 auto}
.ag .mm .ic{display:flex;align-items:center;justify-content:center;background:#EAF0FF;color:#2457F5}
.ag .mm-acc{border-bottom:1px solid #E3E8F0}
.ag .mm-acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:18px 0;font-family:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em;color:#0B1324}
.ag .mm-acc summary::-webkit-details-marker{display:none}
.ag .mm-in{padding:0 0 20px;display:flex;flex-direction:column;gap:18px}
.ag .mm-chips{display:flex;flex-wrap:wrap;gap:8px}
.ag .mm-chip{display:inline-flex;padding:8px 12px;border-radius:999px;background:#F1F4F9;color:#33405A;font-size:13px;font-weight:600}
.ag .mm-row{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid #E3E8F0;font-family:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em;color:#0B1324}
.ag .mm-row:hover{color:#2457F5}
.ag .mm-tag{padding:5px 10px;border-radius:999px;background:#EAF0FF;color:#2457F5;font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:0}
.ag .mm-2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ag .mm-2 a{padding:14px;border-radius:16px;background:#F5F7FB;color:#0B1324;font-weight:600;font-size:14px}
.ag .mm-foot{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:1fr 1.4fr;gap:8px;max-width:640px;margin:0 auto}
.ag .mm-foot a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;border-radius:999px;font-weight:600}
.ag .mm-foot a:first-child{border:1px solid #D5DBE6;background:#FFFFFF;color:#0B1324}
.ag .mm-foot a:last-child{background:#2457F5;color:#FFFFFF}
.ag .tplg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ag .tp{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:#0B1324}
.ag .tp img{width:100%;height:72px;object-fit:cover;border-radius:12px;display:block;transition:transform .4s}
.ag .tp:hover img{transform:scale(1.04)}
.ag .mpromo{position:relative;display:block;height:190px;border-radius:20px;overflow:hidden}
.ag .mpromo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ag .mpromo-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:18px;background:linear-gradient(180deg,rgba(10,20,40,.1),rgba(10,20,40,.88))}
.ag .mb{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;font-weight:700;white-space:nowrap}
body.ag.mm-open{overflow:hidden}
@media (max-width:1080px){.ag-hd .nav{display:none !important}
.ag-hd .burger{display:flex !important;width:46px;height:46px;border-radius:50%;border:0;background:#1A2B4F;align-items:center;justify-content:center;cursor:pointer}
.ag .mega,.ag .mdim{display:none !important}
}
.ag-ft .sf ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ag-ft .sf h4{margin:0 0 16px;color:#FFFFFF;font-size:14px;font-weight:600}
.ag-ft .sf img{max-width:none}
.ag .agf-err{margin:0;padding:12px 14px;border-radius:12px;background:#FDECEC;color:#B42318;font-size:14px}
.ag .agf-err[hidden],.ag .agf-done[hidden]{display:none}
.ag .is-bad input,.ag .is-bad textarea,.ag input.is-bad{border-color:#D92D20 !important;box-shadow:0 0 0 4px rgba(217,45,32,.12) !important}
.ag .agf-done{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:32px;border-radius:24px;background:#EAF7F1;color:#0B1324}
.ag .agf-done b{font-family:'Bricolage Grotesque','Be Vietnam Pro',system-ui,sans-serif;font-size:26px;letter-spacing:-.02em}
.ag .agf-done p{margin:0;line-height:1.6;color:#33405A}
.ag .agf-done.dark{background:#0D1A33;color:#FFFFFF}
.ag .agf-done.dark p{color:#A9B6D1}
.ag .agf-done.dark b{color:#FFFFFF}
.ag .hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}
.ag .ins-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:680px){body.ag:not(.ag){padding-bottom:84px}
}

.ag [data-agform][hidden]{display:none !important}