/* Trang đăng ký (/dang-ky), thiết kế "Dang ky.dc.html" 26/10/2026. Luôn nền sáng; điện thoại: form trước phần giới thiệu. */
.su{--ink:#1E1528;--ink2:#6B6075;--ink3:#4E4458;--line:#E4DEE8;--pink:#C2187A;--plum:#7C1FAA;
  margin:0;min-height:100vh;background:#F1EDF2;color:var(--ink);color-scheme:light;font-family:'Be Vietnam Pro',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.su a{color:var(--pink);text-decoration:none}.su a:hover{color:var(--plum)}
.su .mono{font-family:'JetBrains Mono',ui-monospace,monospace}
.su :focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.su-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 20px;box-sizing:border-box}
.su-card{width:100%;max-width:1200px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 1px 0 var(--line),0 30px 80px rgba(60,20,80,.14)}

/* Cột giới thiệu (nền tối) */
.su-intro{position:relative;padding:44px 48px;display:flex;flex-direction:column;gap:28px;color:#fff;
  background:radial-gradient(120% 80% at 100% 0%,#5A1670 0%,rgba(90,22,112,0) 60%),radial-gradient(90% 70% at 0% 100%,#6E0F4E 0%,rgba(110,15,78,0) 65%),#22122E}
.su-intro a{color:#FF8CC6}.su-intro a:hover{color:#fff}
.su-logo{display:flex;align-items:center;gap:11px;color:#fff!important}
.su-logo img{width:38px;height:38px}
.su-logo span{display:flex;flex-direction:column;gap:3px}
.su-logo b{font-size:21px;line-height:1.05;letter-spacing:-.5px}
.su-logo small{font:600 8px 'JetBrains Mono',monospace;letter-spacing:1.6px;color:#CDBFD8}
.su-head{display:flex;flex-direction:column;gap:14px}
.su-badge{align-self:flex-start;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font:600 11px 'JetBrains Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#F6D6E8}
.su-head h1{margin:0;font-size:35px;line-height:1.16;text-wrap:balance;font-weight:700;letter-spacing:-.025em}
.su-head h1 em{font-style:normal;color:#FF8CC6}
.su-head p{margin:0;font-size:16px;line-height:1.6;color:#DCD0E4;max-width:460px}
.su-preview{border-radius:18px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 20px 50px rgba(0,0,0,.25);padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.su-prow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.su-live{width:9px;height:9px;border-radius:50%;background:#2BD18E;flex:none;animation:suPulse 2s infinite}
@keyframes suPulse{0%{box-shadow:0 0 0 0 rgba(22,163,106,.55)}70%{box-shadow:0 0 0 9px rgba(22,163,106,0)}100%{box-shadow:0 0 0 0 rgba(22,163,106,0)}}
@media (prefers-reduced-motion:reduce){.su-live{animation:none}}
.su-pdom{flex:1;min-width:0;font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-ok{font-size:12.5px;font-weight:600;color:#2BD18E;padding:4px 10px;border-radius:999px;background:rgba(43,209,142,.12)}
.su-bars{display:flex;gap:3px;height:30px}
.su-bars i{flex:1;border-radius:3px;background:rgba(43,209,142,.55)}.su-bars i.w{background:#E3A72F}.su-bars i.n{background:#2BD18E}
.su-pstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.su-pstats div{display:flex;flex-direction:column;gap:3px}
.su-pstats span{font-size:11.5px;color:#BFB1CA}.su-pstats b{font-size:17px;font-weight:600}.su-cd{color:#FF8CC6}
.su-benefits{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px}
.su-benefits li{display:flex;gap:12px}
.su-ic{width:34px;height:34px;flex:none;border-radius:10px;background:rgba(255,140,198,.14);display:grid;place-items:center;color:#FF8CC6}
.su-benefits li>span:last-child{display:flex;flex-direction:column;gap:3px}
.su-benefits b{font-size:14.5px;font-weight:600}.su-benefits li span span{font-size:13px;line-height:1.5;color:#CDBFD8}
.su-more{margin-top:auto;font-size:13.5px;color:#CDBFD8}

/* Cột form */
.su-main{padding:48px;display:flex;flex-direction:column;justify-content:center}
.su-form,.su-done{display:flex;flex-direction:column;gap:18px;max-width:520px;width:100%;margin:0 auto}
.su-ftitle{display:flex;flex-direction:column;gap:8px}
.su-ftitle h2,.su-done h2{margin:0;font-size:30px;line-height:1.15;font-weight:700;letter-spacing:-.02em}
.su-ftitle p{margin:0;font-size:15px;line-height:1.55;color:var(--ink2)}
.su-error{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:#FCE8EA;color:#8E1A28;font-size:14px;line-height:1.5}
.su-error svg{flex:none;margin-top:1px}
.su-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.su-field>span:first-child{font-size:14px;font-weight:600}.su-field i{font-style:normal;color:var(--pink)}
.su-web{display:flex;align-items:center;gap:10px;height:58px;padding:0 16px;border-radius:14px;background:#FBF6FA;box-shadow:inset 0 0 0 1.5px #E7C3DA;color:var(--pink)}
.su-web:focus-within{box-shadow:inset 0 0 0 2px var(--pink)}
.su-web input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:500 17px 'JetBrains Mono',monospace;color:var(--ink)}
.su-web.is-locked{background:#F4F1F6;box-shadow:inset 0 0 0 1px var(--line)}
.su-hint{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2)}.su-hint.ok{color:#0E6B45}
.su-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.su-in{height:50px;padding:0 14px;border-radius:12px;border:0;outline:0;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);font:15.5px 'Be Vietnam Pro',sans-serif;color:var(--ink);min-width:0}
.su-in:focus{box-shadow:inset 0 0 0 2px var(--pink)}
.su input::placeholder{color:#A59BAE}
.su-consent{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:14px 16px;border-radius:12px;background:#FAF8F7;box-shadow:inset 0 0 0 1px #EFEAF1;font-size:13.5px;line-height:1.55;color:var(--ink3)}
.su-consent input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--pink)}
.su-consent b{color:var(--ink);font-weight:600}
.su-consent-opt{background:transparent;box-shadow:none;padding:0 16px}
.su-btn{height:58px;border:0;border-radius:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;font:700 17px 'Be Vietnam Pro',sans-serif;color:#fff!important;background:linear-gradient(100deg,#C2187A,#8E1DA6);box-shadow:0 12px 28px rgba(194,24,122,.30)}
.su-btn:hover{filter:brightness(1.05);box-shadow:0 16px 34px rgba(194,24,122,.42)}
.su-btn:disabled{opacity:.7;cursor:wait}
.su-btn-ghost{background:#fff;color:var(--ink)!important;box-shadow:inset 0 0 0 1.5px var(--ink);height:50px;font-size:15px}
.su-trust{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;font-size:13px;color:var(--ink2)}
.su-trust span{display:inline-flex;align-items:center;gap:6px}.su-trust svg{color:#16A36A}
.su-login{padding-top:16px;border-top:1px solid #EFEAF1;text-align:center;font-size:14.5px;color:var(--ink2)}
.su .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Đã đăng ký */
.su-check{width:64px;height:64px;border-radius:50%;background:#E3F6EC;display:grid;place-items:center;color:#16A36A}
.su-done p{margin:8px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink3)}.su-done p b{color:var(--ink);font-weight:600}
.su-steps{list-style:none;margin:0;padding:0;border-radius:14px;box-shadow:inset 0 0 0 1px #EFEAF1}
.su-steps li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-top:1px solid #EFEAF1}.su-steps li:first-child{border-top:0}
.su-steps li>.mono{font-size:12px;font-weight:600;color:#7A6F85;margin-top:2px}.su-steps li.on>.mono{color:#16A36A}
.su-steps li>span:last-child{display:flex;flex-direction:column;gap:4px;font-size:14.5px}
.su-link{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:14px}

@media (max-width:900px){
  .su-card{grid-template-columns:1fr}
  .su-main{order:-1;padding:32px 24px}        /* điện thoại: form trước */
  .su-intro{padding:32px 24px}
  .su-head h1{font-size:30px}
}
@media (max-width:520px){
  .su-wrap{padding:0}.su-card{border-radius:0}
  .su-row,.su-benefits{grid-template-columns:1fr}
  .su-ftitle h2,.su-done h2{font-size:26px}
}
/* Không để 1 chữ rơi xuống dòng cuối (Huy 26/10/2026: "ngủ", "plugin") */
.su-benefits li span span{text-wrap:pretty}
.su-benefits li span span a{font-weight:600}
.su-head p,.su-benefits li span span,.su-consent,.su-ftitle p{text-wrap:pretty}
.su-benefits b{text-wrap:balance}
@media (min-width:901px) and (max-width:1180px){
  .su-head h1{font-size:31px}
  .su-benefits{grid-template-columns:1fr;gap:14px}
}