*{box-sizing:border-box;margin:0}
html,body{min-height:100%}
body{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 18px 0;-webkit-font-smoothing:antialiased}
.gate{position:relative;width:100%;max-width:460px;text-align:center}
.check{position:relative;display:flex;gap:14px;align-items:flex-start;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.check input{position:absolute;opacity:0;width:1px;height:1px}
.box{flex:none;display:grid;place-items:center;transition:all .2s ease}
.box:after{content:"";width:40%;height:22%;border:solid currentColor;border-width:0 0 3px 3px;transform:rotate(-45deg) translate(1px,-1px) scale(0);transition:transform .2s ease}
.check input:checked+.box:after{transform:rotate(-45deg) translate(1px,-1px) scale(1)}
.txt{line-height:1.55}
.msg{min-height:1.5em;margin-top:16px;font-size:14px}
.again{margin-top:6px;font-size:14px}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;opacity:0}
.ai-notice{width:100%;max-width:720px;margin-top:auto;padding:56px 8px 22px;font-size:10.5px;line-height:1.5;text-align:center}
.ai-notice p+p{margin-top:6px}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Kẹo — pastel, bo tròn, vui mắt, ô tích to */
body{background:linear-gradient(160deg,#ffe4f1 0%,#e9e3ff 50%,#d9f6ff 100%);color:#3b2a55;font-family:Nunito,"Be Vietnam Pro",system-ui,sans-serif}
.gate{padding:40px 30px 30px;border-radius:36px;background:#fff;box-shadow:0 18px 0 -6px #f5c9e0,0 30px 60px -20px rgba(120,80,170,.35)}
.deco{position:absolute;top:-26px;left:50%;width:52px;height:52px;margin-left:-26px;border-radius:50%;
 background:radial-gradient(circle at 35% 35%,#fff7 0 18%,transparent 19%),linear-gradient(135deg,#ff8fc6,#a78bfa);
 box-shadow:0 8px 20px rgba(255,143,198,.5);animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-6px)}}
.kicker{margin-top:10px;font-size:15px;font-weight:800;color:#e0569b}
h1{font-weight:900;font-size:clamp(27px,6.4vw,34px);line-height:1.15;margin:6px 0 10px}
.lead{color:#7a6a92;font-size:16px;font-weight:600;line-height:1.55;margin-bottom:26px}
.check{padding:18px 20px;border-radius:24px;background:#f7f2ff;border:3px dashed #d9c9ff;align-items:center}
.check:hover{background:#f1e9ff}
.check:focus-within{outline:3px solid #a78bfa;outline-offset:3px}
.box{width:38px;height:38px;border-radius:50%;background:#fff;border:3px solid #c4b2f5;color:#fff}
.check input:checked+.box{background:linear-gradient(135deg,#ff8fc6,#a78bfa);border-color:transparent;transform:scale(1.08)}
.txt{font-size:16px;font-weight:700}.txt b{color:#e0569b}
.ok .check{border-style:solid;border-color:#a78bfa}
.msg{font-weight:700}.msg.good{color:#16a36b}.msg.err{color:#e0365f}
.again{font-weight:600}.again a{color:#7c3aed}
.ai-notice{color:#a596bd;font-weight:600}