/* Login ECN — redesign 2026, port từ ECN V3 (EINVoiceV3: src/EInvoice.EcnWebApp/wwwroot/css/login/login.css,
   commit fd077d92 + 65dabf0f + e88d9822). Nạp SAU bundle ~/Content/Logincss (bootstrap 3 + Login.css dùng chung
   các trang ForgotPass...), mọi rule scope trong body.login-page để không ảnh hưởng trang khác.

   Đơn vị: toàn bộ kích thước dùng rem, baseline html = 16px tại ≤1366px, phóng mượt tới 19.2px (1.2x) tại ≥1920px.
   Rule html dưới đây ghi đè `html { font-size: 10px }` của bootstrap 3 — bootstrap 3 dùng px nên modal không bị ảnh hưởng. */
* { box-sizing: border-box; }
html, body { margin: 0; }
html {
    font-size: clamp(16px, calc(16px + (100vw - 1366px) * 0.0057762), 19.2px);
}
body.login-page {
    background: #eef4fb url('Img/login-bg-2026.jpg') no-repeat center top; background-size: cover;
    display: flex; flex-direction: column; min-height: 100vh;
}

/* Font/line-height gốc của thiết kế CHỈ áp cho 3 khối trang login — không đặt trên body vì các modal
   (thông báo ND70, bảo trì, quên mật khẩu) kế thừa từ body và cần giữ 14px / 1.42857 của bootstrap 3. */
.login-page .login-header,
.login-page .login-body,
.login-page .login-footer {
    font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; color: #333;
    font-size: 1rem; line-height: normal;
}

/* ── Header: min-height = chiều cao footer (6.9375rem = 111px@1366) để card căn giữa đúng theo chiều dọc ── */
.login-page .login-header {
    min-height: 6.9375rem; padding: 1.875rem 5rem 0;
    display: flex; align-items: flex-start; gap: 1rem;
    max-width: 105rem; margin: 0 auto; width: 100%;
}
.login-page .login-header .logo img { height: 2.5rem; display: block; }
.login-page .login-header .title h3 { margin: 0; color: #0c5f89; font-size: .875rem; font-weight: 700; line-height: normal; letter-spacing: .0125rem; }
.login-page .login-header .title h5 { margin: .1875rem 0 0; color: #0c5f89; font-size: .8125rem; font-weight: 500; line-height: normal; opacity: .75; }

/* ── Body ── */
.login-page .login-body {
    flex: 1; display: flex; align-items: center; justify-content: space-between;
    padding: 1.875rem 5rem; max-width: 105rem; margin: 0 auto; width: 100%;
}
.login-page .login-left { flex: 1 1 auto; display: flex; justify-content: center; }
.login-page .login-left .hero-img { max-width: 32.5rem; width: 100%; }

/* ── Card đăng nhập ──
   margin-right nội suy tuyến tính theo bề rộng màn: 0 tại ≤1366px → 176px tại ≥1920px
   (hệ số 176 / (1920 - 1366) = 0.3176895). Dùng px + vw, không dùng rem vì rem cũng tự co giãn theo vw. */
.login-page .login-card {
    flex: 0 0 23.75rem; width: 23.75rem; align-self: center;
    margin-right: clamp(0px, calc((100vw - 1366px) * 0.3176895), 176px);
    background: #fff; border-radius: 1rem; box-shadow: 0 .625rem 1.875rem rgba(20,40,80,.12); padding: 2.5rem;
}
.login-page .login-card h2 { margin: 0 0 .25rem; text-align: center; color: #1a2b4c; font-size: 1.5rem; font-weight: 700; line-height: normal; }
.login-page .login-card .subtitle { margin: 0 0 1.375rem; text-align: center; color: #8a8a8a; font-size: .8125rem; }
.login-page .login-card .field { margin-bottom: .875rem; }
.login-page .login-card label { display: block; max-width: none; margin-bottom: .375rem; font-size: .875rem; font-weight: 500; color: #1a2b4c; }
.login-page .login-card input[type=text],
.login-page .login-card input[type=password] {
    width: 100%; height: 2.375rem; padding: 0 .75rem; border: .0625rem solid #dde3ec; border-radius: .375rem;
    font-size: .875rem; line-height: 2.25rem; color: #333; background: #fbfcfe; box-shadow: none;
}
.login-page .login-card input::placeholder { color: #a8b0bd; }
.login-page .login-card input:focus { outline: none; border-color: #3276b1; box-shadow: 0 0 0 .125rem rgba(50,118,177,.15); }
/* Chrome autofill: chỉ nuke nền vàng mặc định; quirk cỡ chữ trước tương tác thật là giới hạn của Chrome (V3 D-2026-09-23-ECN-04). */
.login-page .login-card input:-webkit-autofill,
.login-page .login-card input:-webkit-autofill:hover,
.login-page .login-card input:-webkit-autofill:focus,
.login-page .login-card input:autofill,
.login-page .login-card input:autofill:hover,
.login-page .login-card input:autofill:focus {
    font-size: .875rem !important; line-height: 2.25rem !important;
    -webkit-text-fill-color: #333 !important;
    -webkit-box-shadow: 0 0 0 1000px #fbfcfe inset !important;
    box-shadow: 0 0 0 1000px #fbfcfe inset !important;
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
    caret-color: #333;
}
.login-page .login-card input:-webkit-autofill:focus,
.login-page .login-card input:autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #fbfcfe inset, 0 0 0 .125rem rgba(50,118,177,.15) !important;
    box-shadow: 0 0 0 1000px #fbfcfe inset, 0 0 0 .125rem rgba(50,118,177,.15) !important;
}
.login-page #userName { text-transform: lowercase; }
.login-page #userName::placeholder { text-transform: none; }
.login-page .login-card .btn-login { width: 100%; height: 2.5rem; margin-top: .5rem; border: none; border-radius: .375rem; background: #0f5c96; color: #fff; font-size: .9375rem; font-weight: 600; cursor: pointer; }
.login-page .login-card .btn-login:hover { background: #0c4a79; }
/* "Quên mật khẩu?" nằm NGOÀI .form-group của ô mật khẩu: bootstrapValidator chèn lỗi vào cuối .form-group,
   để link bên trong thì lỗi bị đẩy xuống dưới link. Ô mật khẩu bỏ margin-bottom, link tự bù lại khoảng cách. */
.login-page .login-card .field-password { margin-bottom: 0; }
.login-page .login-card .forgot { text-align: right; margin: .375rem 0 .875rem; }
.login-page .login-card .forgot a { color: #3276b1; font-size: .8125rem; font-weight: 500; text-decoration: none; }
.login-page .login-card .forgot a:hover { text-decoration: underline; }

/* Thông báo lỗi server (_Notifications) + lỗi bootstrapValidator — riêng legacy, V3 không có */
.login-page .login-card .customAlert { font-size: .8125rem; }
.login-page .login-card .customAlert .alert { margin-bottom: .875rem; padding: .625rem 2rem .625rem .75rem; border-radius: .375rem; }
.login-page .login-card .help-block { margin: .25rem 0 0; color: #dc2626; font-size: .75rem; }

/* Captcha (CaptchaMvc, hiện sau 3 lần nhập sai) — riêng legacy: ảnh + nút làm mới cùng hàng, ô nhập full width bên dưới */
.login-page .login-card .captcha-box { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.login-page .login-card .captcha-box img { height: 2.375rem; border-radius: .375rem; }
.login-page .login-card .captcha-box a { color: #3276b1; font-size: 1rem; text-decoration: none; cursor: pointer; }
.login-page .login-card .captcha-box input[type=text] { flex: 1 0 100%; height: 2.375rem !important; }

/* ── Footer ── */
.login-page .login-footer { padding: .75rem 5rem 1.125rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; max-width: 105rem; margin: 0 auto; width: 100%; }
.login-page .login-footer .company { display: flex; align-items: center; gap: .75rem; border-top: .0625rem solid rgba(0, 51, 109, .3); padding-top: 1rem; }
.login-page .login-footer .company a { text-decoration: none; display: flex; }
.login-page .login-footer .company img { height: 4rem; }
.login-page .login-footer .company .name { display: flex; flex-direction: column; gap: .5rem; font-size: .72rem; color: #585555; }
.login-page .login-footer .company .name strong { color: #005d8c; font-size: .875rem; font-weight: 500; }
.login-page .login-footer .contact { font-size: .875rem; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; padding-top: 1rem; }
.login-page .login-footer .contact a { color: #3276b1; text-decoration: none; font-weight: 500; }
.login-page .login-footer .contact .hotline { color: #3276b1; }
.login-page .login-footer .contact .hotline .phone-ico { width: .875rem; height: .875rem; vertical-align: -2px; margin-right: .375rem; }
.login-page .login-footer .contact .hotline b { color: #f49d12; }

/* ── ≤1199 ── */
@media (max-width: 1199px) {
    .login-page .login-header { padding: 1.875rem 3rem 0; }
    .login-page .login-header .logo img { height: 2rem; }
    .login-page .login-body { padding: 1.875rem 3rem; }
    .login-page .login-footer { padding: .75rem 3rem 1.125rem; }
    .login-page .login-left .hero-img { max-width: 21.25rem; }
    .login-page .login-card { flex-basis: 21.25rem; width: 21.25rem; }
}

/* ── ≤991: xếp dọc ── */
@media (max-width: 991px) {
    .login-page .login-header { min-height: 6rem; padding: 1rem 1.25rem; align-items: center; }
    .login-page .login-body { flex-direction: column; align-items: center; padding: 1.5rem; gap: 1.5rem; }
    .login-page .login-left .hero-img { max-width: 18.75rem; }
    .login-page .login-card { order: -1; margin: 0 auto; flex-basis: auto; width: 100%; max-width: 25rem; }
    .login-page .login-footer { flex-direction: column; text-align: center; }
    .login-page .login-footer .contact { text-align: center; align-items: center; }
}

/* ── Điện thoại ≤767: ẩn ảnh minh hoạ để form lên trước ── */
@media (max-width: 767px) {
    .login-page .login-left { display: none; }
    .login-page .login-body { padding-top: 1.5rem; }
    .login-page .login-card { padding-left: 1.5rem; padding-right: 1.5rem; }
    .login-page .login-footer .company { flex-direction: column; }
}