/* ==========================================================================
   Trang đăng nhập nội bộ (login.html)
   ========================================================================== */

/* Hero trái: stats */
.hero .stats{display:flex;gap:26px;margin-top:32px;z-index:1}
.hero .stats div b{font-family:var(--font-display);font-size:24px;font-weight:800;display:block}
.hero .stats div span{font-size:11.5px;color:#7A93A3}

/* Panel phải */
.login-side{display:flex;align-items:center;justify-content:center;padding:34px 24px}
.login-side .card{
  width:min(430px,100%);border-radius:22px;padding:34px;
  box-shadow:0 24px 60px -24px rgba(11,23,35,.18);animation:in .5s var(--ease);
}
.login-side .card h2{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.01em}
.login-side .card>p{color:var(--text-3);font-size:13px;margin:5px 0 22px}

.field{margin-bottom:15px}
.control input{padding:11.5px 0;font-size:14px}
.eye{color:var(--text-3);display:grid;place-items:center;transition:color .15s}
.eye:hover{color:var(--accent)}

.remember{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-2);cursor:pointer}
.remember input{accent-color:var(--accent);width:15px;height:15px}
.forgot{font-size:12.5px;font-weight:600;color:var(--accent);text-decoration:none}
.forgot:hover{color:var(--accent);text-decoration:underline}

/* Thông báo lỗi */
.err{
  display:none;align-items:center;gap:8px;background:var(--err-bg);color:var(--err);
  border-radius:10px;padding:9px 13px;font-size:12.5px;font-weight:600;margin-bottom:14px;
}
.err.show{display:flex;animation:shake .4s var(--ease)}

/* Spinner trong nút đăng nhập */
.spinner{
  width:16px;height:16px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:spin .7s linear infinite;display:none;
}
.submit.loading .spinner{display:block}

/* Divider + đăng nhập nhanh theo vai trò */
.divider{display:flex;align-items:center;gap:12px;margin:20px 0 14px;color:var(--text-3);font-size:11px;text-transform:uppercase;letter-spacing:.08em}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--border)}
.quick button{
  display:flex;align-items:center;gap:9px;width:100%;padding:10px 12px;
  border:1px solid var(--border);border-radius:12px;background:var(--surface);
  font-size:12.5px;font-weight:600;color:var(--text-2);
  transition:all .15s var(--ease);text-align:left;
}
.quick button:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(11,23,35,.2)}
.quick i{font-style:normal;font-size:16px}
.quick small{display:block;font-weight:400;font-size:10.5px;color:var(--text-3)}
.foot-note{text-align:center;font-size:11.5px;color:var(--text-3);margin-top:18px}
.foot-note a{color:var(--accent);font-weight:600;text-decoration:none}

/* Mobile */
@media (max-width:991.98px){
  .login-side{padding:22px 14px 44px}
  .login-side .card{padding:26px 20px}
}