/* =========================================================
   Page: Login – đồng bộ style với Register
   ========================================================= */
:root{
    --brand:#2563eb; --brand-2:#1d4ed8;
    --ink:#0f172a; --muted:#64748b;
    --card:#ffffff; --bg-soft:#f7f9fc;
    --border:#e5e7eb; --radius:16px;
    --shadow:0 20px 45px -20px rgba(0,0,0,.25);
}

html,body{background:var(--bg-soft);}

/* Wrap & Card */
.auth-wrap{ max-width:720px; margin:0 auto 32px; padding:6px 12px; }
.login-card{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow); overflow:hidden;
}

/* Head */
.login-card .card-head{
    padding:18px 20px 6px; text-align:center;
    border-bottom:1px solid #f1f5f9;
    background:linear-gradient(180deg,#fff, #fafcff);
}
.login-card .brand{
    width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;
    border-radius:999px;background:#eef2ff;color:#3b82f6;margin-bottom:8px;font-size:20px
}
.login-card .title{ margin:0; font-size:22px; font-weight:800; color:var(--ink) }
.login-card .sub{ margin:6px 0 0; color:var(--muted); font-size:13px }

/* Body */
.login-card .card-body{ padding:16px 20px 18px }

/* Form-group spacing */
.form-group{ margin-bottom:12px; }

/* Input with icon (giữ icon không tụt khi có nội dung phụ bên ngoài) */
.input-icon{ position:relative; }
.input-icon > i{
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    color:#9aa5b1; font-size:14px; pointer-events:none;
}
.input-icon .form-control{
    padding-left:36px; height:42px; border-radius:10px;
    border:1px solid var(--border); box-shadow:none;
}
.input-icon .form-control:focus{
    border-color:#c7d2fe; outline:0;
    box-shadow:0 0 0 3px rgba(99,102,241,.15);
}

/* Password + eye button */
.input-icon.has-password .form-control{ padding-right:48px; }
.has-password .btn-peek{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    width:36px; height:36px; border:none; background:transparent;
    color:#334155; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
}
.has-password .btn-peek:hover{
    background:#eef2ff;
    box-shadow:0 0 0 3px rgba(99,102,241,.15);
}
.has-password .btn-peek:focus{ outline:0; box-shadow:0 0 0 3px rgba(99,102,241,.22) }

/* Footer */
.form-foot{
    display:flex; align-items:center; justify-content:space-between;
    gap:12px; margin-top:12px;
}
.form-foot .link{
    flex:1 1 auto; padding:8px 2px; color:#475569; text-decoration:none; white-space:nowrap;
}
.form-foot .link:hover{ color:var(--brand-2); text-decoration:underline }
.btn.btn-primary{
    background:var(--brand); border-color:var(--brand); padding:10px 18px; border-radius:10px
}
.btn.btn-primary:hover{ background:var(--brand-2); border-color:var(--brand-2) }

/* Utils */
.mrb10{ margin-bottom:10px !important; }

@media (max-width:480px){
    .login-card .card-body{ padding:14px 14px 16px }
    .form-foot{ flex-direction:column-reverse; align-items:stretch; }
    .form-foot .btn{ width:100% }
    .form-foot .link{ text-align:center }
}