/* Bestlist.ai – style dùng chung. Font tự lưu trong /assets/fonts. */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
img{max-width:100%}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
body{margin:0;background:#05070D}

a{color:#7FA6FF;text-decoration:none}
a:hover{color:#A9C3FF}

.bl-root{position:relative;overflow:hidden}

.bl-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(148,163,184,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.055) 1px,transparent 1px);background-size:96px 96px;animation:blGrid 28s linear infinite;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%)}

@keyframes blGrid{to{background-position:96px 96px,96px 96px}
}

.bl-glow{position:absolute;pointer-events:none;border-radius:50%;filter:blur(40px)}

.bl-glow.a{width:900px;height:620px;left:-220px;top:-260px;background:radial-gradient(closest-side,rgba(50,110,240,.42),transparent);animation:blDrift 16s ease-in-out infinite alternate}

.bl-glow.b{width:700px;height:520px;right:-260px;top:1300px;background:radial-gradient(closest-side,rgba(91,140,255,.18),transparent);animation:blDrift 20s ease-in-out infinite alternate-reverse}

@keyframes blDrift{0%{transform:translate(0,0) scale(1)}
100%{transform:translate(120px,60px) scale(1.12)}
}

.mono{font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase}

.grad{background:linear-gradient(100deg,#3B7BFF 0%,#7FA6FF 35%,#3B7BFF 70%,#9DB8FF 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:blShine 6s ease-in-out infinite}

@keyframes blShine{0%,100%{background-position:0% 50%}
50%{background-position:100% 50%}
}

.dot{width:8px;height:8px;border-radius:50%;position:relative;display:inline-block;flex:0 0 auto}

.dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid currentColor;opacity:.6;animation:blPing 1.8s ease-out infinite}

@keyframes blPing{0%{transform:scale(.6);opacity:.7}
100%{transform:scale(1.9);opacity:0}
}

.rise{opacity:0;transform:translateY(18px);animation:blRise .9s cubic-bezier(.2,.7,.2,1) forwards}

@keyframes blRise{to{opacity:1;transform:none}
}

.d1{animation-delay:.05s}
.d2{animation-delay:.18s}
.d3{animation-delay:.32s}
.d4{animation-delay:.46s}
.d5{animation-delay:.6s}
.d6{animation-delay:.75s}

.caret{display:inline-block;width:9px;height:1.1em;background:#7FA6FF;vertical-align:-3px;margin-left:3px;animation:blBlink 1s steps(1) infinite}

@keyframes blBlink{50%{opacity:0}
}

.scan{position:absolute;left:0;right:0;height:120px;pointer-events:none;background:linear-gradient(to bottom,transparent,rgba(91,140,255,.14),transparent);animation:blScan 4.5s linear infinite}

@keyframes blScan{0%{top:-120px}
100%{top:100%}
}

.marquee{display:flex;width:max-content;animation:blMarquee 38s linear infinite}

@keyframes blMarquee{to{transform:translateX(-50%)}
}

.btn-p{transition:transform .2s,box-shadow .2s,background .2s}

.btn-p:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(50,110,240,.45);background:#4A80FF !important;color:#FFFFFF !important}

.btn-g{transition:border-color .2s,background .2s}

.btn-g:hover{border-color:rgba(148,163,184,.5) !important;background:rgba(148,163,184,.08) !important;color:#EEF2F8 !important}

.navlink:hover{color:#EEF2F8 !important}

.lab{position:relative;transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,background .35s}

.lab:hover{transform:translateY(-6px);border-color:rgba(91,140,255,.55) !important;background:rgba(18,28,52,.9) !important}

.lab:hover .lab-q{color:#EEF2F8 !important}

.lab::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at 0% 0%,rgba(91,140,255,.16),transparent 45%);opacity:0;transition:opacity .35s}

.lab:hover::before{opacity:1}

.shimmer{position:relative;overflow:hidden}

.shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.08) 50%,transparent 80%);transform:translateX(-100%);animation:blSweep 3.2s ease-in-out infinite}

@keyframes blSweep{60%,100%{transform:translateX(100%)}
}

.float{animation:blFloat 7s ease-in-out infinite}

@keyframes blFloat{0%,100%{transform:translateY(0)}
50%{transform:translateY(-12px)}
}

.orbit{animation:blSpin 40s linear infinite}

@keyframes blSpin{to{transform:rotate(360deg)}
}

@supports (animation-timeline: view()){
.reveal{animation:blRise linear both;animation-timeline:view();animation-range:entry 0% cover 28%;opacity:0;transform:translateY(28px)}

}

.vf-play{position:relative;width:88px;height:88px;border-radius:50%;background:#326EF0;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 0 rgba(50,110,240,.55);animation:blPulse 2.2s ease-out infinite}

@keyframes blPulse{0%{box-shadow:0 0 0 0 rgba(50,110,240,.55)}
100%{box-shadow:0 0 0 28px rgba(50,110,240,0)}
}

.sk{display:block;height:10px;border-radius:6px;background:linear-gradient(90deg,#1A2440 0%,#2A3B66 50%,#1A2440 100%);background-size:200% 100%;animation:blSk 1.8s linear infinite}

@keyframes blSk{to{background-position:-200% 0}
}

.field{opacity:.35;transition:opacity .5s,border-color .5s}

.field.on{opacity:1;border-color:rgba(91,140,255,.55) !important}

.vote{transition:background .2s,border-color .2s,color .2s}

.vote:hover{border-color:rgba(91,140,255,.6) !important;color:#EEF2F8 !important}

@media (max-width: 680px){.bl-grid,.bl-glow,.orbit,.marquee,.scan,.float{animation:none !important}
.bl-glow{display:none}
}

input::placeholder{color:#6F7993}

input:focus{outline:2px solid #326EF0;outline-offset:1px}

summary{list-style:none}
summary::-webkit-details-marker{display:none}

@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important}
.rise,.reveal{opacity:1 !important;transform:none !important}
}

/* Điện thoại */
@media (max-width: 680px){
header nav{display:none !important}
.pill{font-size:11px !important;letter-spacing:.08em !important;padding:9px 14px !important;gap:8px !important}
.perks{grid-template-columns:1fr !important}
}