/* Giao diện trang đăng nhập / đổi mật khẩu (dùng chung). Lấy từ mẫu form test/login.html. */
:root{--navy:#102a64;--blue:#2563eb;--gold:#fbbf24;--ink:#1e293b;--muted:#64748b;--line:#cbd5e1}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);overflow-x:hidden;overflow-y:auto;
 background:radial-gradient(ellipse at 15% 75%,#06357a 0%,#04204a 38%,#010f26 75%,#000b1c 100%);}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
.shade{position:fixed;inset:0;pointer-events:none;background:linear-gradient(to top right,rgba(0,15,50,.55),rgba(0,15,50,0) 55%)}
.page{position:relative;z-index:1;min-height:100%;display:flex;align-items:center;justify-content:flex-end;padding:24px clamp(24px,10vw,190px)}
.hero{position:fixed;left:clamp(24px,5.6vw,110px);bottom:clamp(40px,10vh,110px);color:#fff;pointer-events:none}
.hero h1{font-size:clamp(34px,2.9vw,56px);line-height:1.15;letter-spacing:.5px;font-weight:800}
.hero h1 span{color:var(--gold);display:block}
.hero i{display:block;width:120px;height:5px;border-radius:3px;background:var(--gold);margin:18px 0 16px}
.hero p{font-size:clamp(14px,1.1vw,20px);color:#93c5fd}
.card{width:440px;max-width:100%;background:rgba(255,255,255,.96);border-radius:26px;padding:34px 38px 30px;
 box-shadow:0 30px 80px rgba(0,10,40,.55);animation:rise .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.logo{width:112px;height:112px;border-radius:50%;display:block;margin:0 auto 14px;box-shadow:0 6px 20px rgba(16,42,100,.25)}
h2{text-align:center;font-size:22px;color:var(--navy);letter-spacing:.5px}
.sub{text-align:center;font-size:13.5px;color:var(--muted);margin:6px 0 24px}
label{display:block;font-size:13px;font-weight:700;margin-bottom:7px}
.field{position:relative;margin-bottom:18px}
.field input{width:100%;height:50px;border:1.5px solid var(--line);border-radius:12px;background:#f4f7fc;
 padding:0 46px;font-size:15px;color:var(--ink);outline:none;transition:.2s}
.field input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 4px rgba(37,99,235,.15)}
.field svg{position:absolute;left:15px;bottom:13px;width:22px;height:22px;stroke:var(--muted);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.eye{position:absolute;right:6px;bottom:5px;width:40px;height:40px;border:0;background:none;cursor:pointer;border-radius:10px}
.eye svg{left:9px;bottom:9px;pointer-events:none}
.eye:hover svg{stroke:var(--blue)}
.row{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin:2px 0 20px}
.row label{display:flex;align-items:center;gap:8px;font-weight:400;margin:0;color:#475569;cursor:pointer}
.row input{width:17px;height:17px;accent-color:var(--blue)}
.row a{color:var(--blue);font-weight:700;text-decoration:none}
.row a:hover{text-decoration:underline}
.btn{width:100%;height:52px;border:0;border-radius:13px;color:#fff;font-size:16.5px;font-weight:700;cursor:pointer;
 background:linear-gradient(90deg,#2563eb,#0e3ca0);box-shadow:0 8px 22px rgba(37,99,235,.35);transition:.2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(37,99,235,.45)}
.btn:disabled{opacity:.8;cursor:wait;transform:none}
.msg{min-height:20px;margin-top:12px;text-align:center;font-size:13px;line-height:1.45;color:#dc2626}
.msg.ok{color:#15803d}
.msg.info{color:#1d4ed8}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.foot{position:fixed;right:28px;bottom:18px;font-size:12px;color:#94a3b8}
.hint{font-size:12px;color:var(--muted);margin:-8px 0 16px;line-height:1.45}
.hello{text-align:center;font-size:13px;color:var(--navy);font-weight:700;margin:-14px 0 20px}
.links{display:flex;justify-content:center;gap:28px;margin-top:10px;font-size:13px}
.links a{color:var(--blue);font-weight:700;text-decoration:none;cursor:pointer}
.links a:hover{text-decoration:underline}
.btn:disabled{opacity:.8;cursor:wait;transform:none}
@media(max-width:900px){
 .page{justify-content:center}.hero{display:none}.foot{right:50%;transform:translateX(50%);white-space:nowrap}
 .page{padding:16px}.card{padding:26px 22px 22px}h2{font-size:19px}
}
@media(prefers-reduced-motion:reduce){.card{animation:none}}