:root{color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:16px;font:16px/1.5 "Segoe UI Variable","Segoe UI",system-ui,sans-serif;
color:#eaf0f8;background:radial-gradient(60rem 40rem at 15% 10%,#1d4fa3aa,transparent 60%),radial-gradient(50rem 40rem at 90% 90%,#2bb3e066,transparent 60%),#070c1a}
main{width:min(26rem,100%);padding:32px 28px;border-radius:24px;background:rgba(17,26,46,.62);border:1px solid rgba(255,255,255,.14);
box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.12);-webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%)}
h1{margin:0;font-size:1.6rem}h1 span{background:#e0b979;color:#0b1f3f;border-radius:8px;padding:0 .3em}
.phu{margin:.25rem 0 1.5rem;color:#b0bdd2}
label{display:block;font-size:.85rem;color:#b0bdd2;margin-bottom:.35rem}
label+input+label{margin-top:.9rem}
input[type=password],input[type=text]{width:100%;padding:.75rem .9rem;border-radius:12px;border:1px solid rgba(255,255,255,.22);background:rgba(7,12,26,.6);color:#eaf0f8;font:inherit}
input:focus,button:focus{outline:2px solid #93b6ff;outline-offset:2px}
button{margin-top:1rem;width:100%;padding:.75rem;border:0;border-radius:12px;font:inherit;font-weight:600;color:#071021;background:linear-gradient(135deg,#93b6ff,#5fd0f0);cursor:pointer}
.loi{color:#ffb4a8}.canh-bao{color:#ffd58a;font-size:.9rem}pre{white-space:pre-wrap;background:rgba(7,12,26,.7);padding:.75rem;border-radius:10px;font-size:.85rem}