@font-face{font-family:"HXS Display";src:url(/assets/fonts/InterDisplay-Black.otf) format("opentype");font-display:swap}
@font-face{font-family:"HXS Body";src:url(/assets/fonts/Inter-ExtraBold.otf) format("opentype");font-weight:600 900;font-display:swap}
@font-face{font-family:"HXS Italic";src:url(/assets/fonts/Inter-SemiBoldItalic.otf) format("opentype");font-display:swap}

:root{--bg:#060914;--panel:rgba(16,21,42,.72);--line:rgba(120,140,200,.18);--text:#eef1fb;--sub:#a3acc9;--muted:#6d7899;--blue:#4c8dff;--violet:#8e6bff;--pink:#ff4f8b;--mint:#2dd4a0;--gold:#ffbf47;--red:#ff5c6c;--dc:#5865f2;
--grad:linear-gradient(135deg,#4c8dff 0%,#8e6bff 50%,#ff4f8b 100%);--f:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--fm:ui-monospace,"SFMono-Regular",Consolas,monospace}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--f);color:var(--text);background:var(--bg);overflow-x:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit}
/* nền */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg .au{position:absolute;inset:-20%;background:radial-gradient(35% 30% at 18% 28%,rgba(76,141,255,.45),transparent 70%),radial-gradient(30% 28% at 82% 18%,rgba(255,79,139,.35),transparent 70%),radial-gradient(40% 35% at 65% 88%,rgba(142,107,255,.35),transparent 70%);filter:blur(30px);animation:au 16s ease-in-out infinite alternate}
@keyframes au{to{transform:translate(3%,-2%) rotate(6deg) scale(1.06)}}
.bg .hx{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='90' viewBox='0 0 51.96 90'%3E%3Cpath d='M25.98 0 51.96 15v30L25.98 60 0 45V15zM25.98 60v30' fill='none' stroke='%238cb2ff' stroke-opacity='.09'/%3E%3C/svg%3E");background-size:64px 111px;-webkit-mask:radial-gradient(ellipse at 40% 50%,#000 20%,transparent 75%);mask:radial-gradient(ellipse at 40% 50%,#000 20%,transparent 75%)}
.bg .gr{position:absolute;inset:0;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E")}
/* bố cục */
.wrap{position:relative;z-index:1;min-height:100vh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(400px,.85fr);gap:40px;align-items:center;max-width:1320px;margin:0 auto;padding:40px 36px}
.brand{display:flex;align-items:center;gap:12px;margin-bottom:26px}
.brand i{width:46px;height:46px;border-radius:14px;background:var(--grad);display:grid;place-items:center;font:900 15px var(--f);font-style:normal;box-shadow:0 10px 30px rgba(142,107,255,.4)}
.brand b{display:block;font-size:16px}.brand small{font:600 10px var(--fm);letter-spacing:.2em;color:var(--sub)}
h1{margin:0;font:900 clamp(32px,3.8vw,48px)/1.06 var(--f);letter-spacing:-.03em}
h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{margin:16px 0 0;font-size:16.5px;line-height:1.65;color:var(--sub);max-width:540px}
/* quy trình */
.flow{display:flex;align-items:center;gap:8px;margin:26px 0 0;flex-wrap:wrap}
.st{display:flex;align-items:center;gap:9px;padding:10px 13px;border-radius:14px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(10px);font-size:13px;font-weight:600;opacity:0;transform:translateY(8px);animation:up .5s forwards}
.st span{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:15px}
.arr{color:var(--muted);opacity:0;animation:up .5s forwards}
@keyframes up{to{opacity:1;transform:none}}
/* sân khấu điện thoại */
.show{position:relative;height:370px;margin-top:26px}
.ph{position:absolute;width:178px;aspect-ratio:9/16;border-radius:26px;padding:7px;background:linear-gradient(145deg,#2e3850,#0d1222 45%,#252d40);box-shadow:0 30px 70px rgba(0,0,0,.55)}
.ph .sc{position:relative;width:100%;height:100%;border-radius:20px;overflow:hidden;font-size:5.6px}
.ph.p1{left:0;top:40px;transform:rotate(-7deg);animation:fl 7s ease-in-out infinite}
.ph.p2{left:150px;top:0;z-index:2;width:196px;animation:fl 6s ease-in-out -2s infinite}
.ph.p3{left:318px;top:50px;transform:rotate(7deg);animation:fl 8s ease-in-out -4s infinite}
@keyframes fl{50%{translate:0 -12px}}
.img{position:absolute;inset:0}
.img::after{content:attr(data-e);position:absolute;left:0;right:0;top:26%;text-align:center;font-size:58px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4))}
.i1{background:radial-gradient(120% 90% at 20% 10%,#7fb4ff,#2a55c9 45%,#0e1d52)}
.i2{background:radial-gradient(120% 90% at 80% 10%,#ffb3cd,#e0407a 45%,#4a0f2c)}
.i3{background:radial-gradient(120% 90% at 70% 20%,#ffe2a1,#e69a17 45%,#4b2a00)}
/* thẻ tiêu đề mini */
.cd{position:absolute;left:0;right:0;bottom:0;height:52%;--c1:#14a67e;--c2:#09523f;--ac:#b8ffe6}
.cd .bgc{position:absolute;inset:0;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--c1) 70%,transparent) 22%,var(--c1) 42%,var(--c2))}
.cd .bgc::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(255,255,255,.07) 0 .25em,transparent .25em 1.1em);-webkit-mask:linear-gradient(transparent 20%,#000 60%);mask:linear-gradient(transparent 20%,#000 60%)}
.cd .lg{position:absolute;left:1.5em;top:9%;line-height:.86}
.cd .lg b{display:block;font:400 3.4em/.84 "HXS Display",Impact,sans-serif}.cd .lg b i{font-style:normal;color:var(--ac)}
.cd .lg span{font:700 1.15em "HXS Body",sans-serif;letter-spacing:.06em}
.cd .dt{position:absolute;left:1.5em;top:33%;padding:.2em .7em;background:rgba(255,255,255,.2);border-left:.18em solid var(--ac);transform:skewX(-12deg);font:italic 600 .95em "HXS Body",sans-serif;white-space:nowrap}
.cd .tt{position:absolute;left:1.5em;right:1.3em;top:42%;font:400 2.15em/1.13 "HXS Display",Impact,sans-serif;text-transform:uppercase}
.cd .tt em{font-style:normal;color:var(--ac)}
.red{--c1:#e5352e;--c2:#6e0b11;--ac:#ffd34d}.blu{--c1:#2f6bf2;--c2:#121f57;--ac:#9fe3ff}
.subt{position:absolute;left:8%;right:8%;top:40%;text-align:center}
.subt span{font:800 1.9em/1.4 var(--f);background:rgba(0,0,0,.6);padding:.15em .5em;border-radius:.5em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.subt em{font-style:normal;color:var(--gold)}
.lgo{position:absolute;top:5%;right:6%;width:3.6em;height:3.6em;border-radius:1em;background:var(--grad);display:grid;place-items:center;font:900 1.2em var(--f)}
.bad{position:absolute;padding:9px 12px;border-radius:13px;background:rgba(16,21,42,.85);border:1px solid var(--line);backdrop-filter:blur(10px);font-size:12px;font-weight:600;display:flex;gap:8px;align-items:center;box-shadow:0 14px 34px rgba(0,0,0,.4);z-index:4;animation:fl 5s ease-in-out infinite}
.bad b{font:700 14px var(--f)}.bad small{display:block;color:var(--sub);font-weight:500;font-size:11px}
.bad .dt{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px}
.wave{display:flex;gap:2px;align-items:center;height:18px}.wave i{width:3px;border-radius:2px;background:var(--pink);animation:wv 1s ease-in-out infinite}
@keyframes wv{50%{height:4px}}
/* thẻ đăng nhập */
.card{position:relative;padding:34px 32px 26px;border-radius:28px;background:linear-gradient(180deg,rgba(22,28,54,.86),rgba(13,17,34,.9));border:1px solid var(--line);backdrop-filter:blur(18px);box-shadow:0 40px 100px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06)}
.card::before{content:"";position:absolute;inset:-1px;border-radius:29px;padding:1px;background:linear-gradient(140deg,rgba(76,141,255,.6),transparent 35%,transparent 65%,rgba(255,79,139,.6));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.srv{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.srv .ic{position:relative;width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,#0b1830,#2f6bf2);display:grid;place-items:center;font:900 14px var(--f)}
.srv .ic::after{content:"";position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:50%;background:var(--mint);border:3px solid #121833}
.srv b{display:block;font-size:14.5px}.srv small{color:var(--sub);font-size:12px}
.srv .on{margin-left:auto;text-align:right;font:600 11px var(--fm);color:var(--mint)}
.card h2{margin:22px 0 6px;font:800 26px var(--f);letter-spacing:-.02em}
.card p.s{margin:0;color:var(--sub);line-height:1.6;font-size:14px}
.dcb{position:relative;overflow:hidden;width:100%;height:56px;margin-top:22px;border:0;border-radius:16px;background:var(--dc);display:flex;align-items:center;justify-content:center;gap:12px;font-weight:800;font-size:16px;cursor:pointer;box-shadow:0 14px 34px rgba(88,101,242,.45);transition:.2s}
.dcb:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(88,101,242,.6)}
.dcb::after{content:"";position:absolute;top:0;bottom:0;width:60px;left:-80px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:sh 3.2s 1s infinite}
@keyframes sh{40%,100%{left:120%}}
.dcb.ld{pointer-events:none;opacity:.85}
.dcb .sp{width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:rt .7s linear infinite;display:none}
.dcb.ld .sp{display:block}.dcb.ld svg{display:none}
@keyframes rt{to{transform:rotate(360deg)}}
.chk{margin-top:18px;display:grid;gap:9px}
.chk div{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--sub);line-height:1.5}
.chk div i{flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-size:12px;background:rgba(76,141,255,.14)}
.chk b{color:var(--text)}
.perm{margin-top:18px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px dashed var(--line);font-size:12px;color:var(--sub);line-height:1.6}
.perm .h{display:flex;align-items:center;gap:6px;font:600 10.5px var(--fm);letter-spacing:.12em;color:var(--muted);margin-bottom:6px}
.perm code{font:600 11px var(--fm);padding:1px 6px;border-radius:5px;background:rgba(255,255,255,.06);color:#c9d6ff}
.alert{display:none;margin-top:16px;padding:12px 14px;border-radius:14px;font-size:13px;line-height:1.55;gap:10px;align-items:flex-start}
.alert.on{display:flex;animation:up .3s forwards}
.alert i{font-style:normal;font-size:18px}
.a-err{background:rgba(255,92,108,.1);border:1px solid rgba(255,92,108,.35);color:#ffc2c8}
.a-role{background:rgba(255,191,71,.08);border:1px solid rgba(255,191,71,.35);color:#ffe0a3}
.a-role a{color:#fff;font-weight:700}
.rem{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;color:var(--sub);cursor:pointer}
.rem input{accent-color:var(--violet);width:16px;height:16px}
.ft{display:flex;justify-content:space-between;align-items:center;margin-top:22px;padding-top:16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted)}
.ft a{color:var(--sub);text-decoration:none}.ft a:hover{color:#fff}
.demo{position:fixed;right:16px;bottom:16px;z-index:5;display:flex;gap:6px;padding:6px;border-radius:12px;background:rgba(16,21,42,.85);border:1px solid var(--line);font-size:11px}
.demo span{color:var(--muted);padding:5px 4px}
.demo button{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:8px;padding:5px 9px;cursor:pointer;font-size:11px}
@media(max-width:1020px){.wrap{grid-template-columns:1fr;max-width:560px;padding:28px 16px}.show{display:none}.left{text-align:left}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}.st,.arr{opacity:1;transform:none}}

.brand i.has,.srv .ic.has,.lgo.has{background-size:cover!important;background-position:center!important;color:transparent}
.cd .tt,.cd .lg b{transform-origin:left;}
.cd .tt{letter-spacing:-.01em}

.flow{flex-wrap:nowrap;gap:6px}.st{white-space:nowrap;padding:9px 11px;font-size:12.5px}
@media(max-width:1020px){.flow{flex-wrap:wrap}}