:root { --nen: #f4f6f9; --the: #fff; --chu: #14213d; --nhat: #5b6575; --vien: #d9dee6; --chinh: #1d3557; --nhan: #2a9d8f; --do: #c0392b; }
@media (prefers-color-scheme: dark) { :root { --nen: #0f1520; --the: #18202d; --chu: #e8ecf2; --nhat: #9aa5b5; --vien: #2a3444; --chinh: #8fb3e6; --nhan: #4cc3b3; --do: #ff7a6b; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--nen); color: var(--chu);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; padding: 16px; }
.hop { width: 100%; max-width: 380px; background: var(--the); border: 1px solid var(--vien); border-radius: 14px; padding: 28px 24px; }
.dau { display: flex; gap: 14px; align-items: center; margin-bottom: 22px; }
.dau h1 { margin: 0; font-size: 1.5rem; letter-spacing: -.01em; }
.dau p { margin: 0; color: var(--nhat); font-size: .9rem; }
label { display: block; font-size: .9rem; color: var(--nhat); margin-bottom: 14px; }
input { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font: inherit; color: var(--chu); background: var(--nen);
  border: 1px solid var(--vien); border-radius: 9px; }
input:focus { outline: 2px solid var(--nhan); outline-offset: 1px; }
button { width: 100%; padding: 12px; font: inherit; font-weight: 600; color: #fff; background: #1d3557; border: 0; border-radius: 9px; cursor: pointer; }
button:disabled { opacity: .6; }
#loi { min-height: 1.4em; margin: 0 0 10px; color: var(--do); font-size: .9rem; }