/* admin/style.css cho body `display:flex; flex-direction:column; min-height:100vh`
   để khu quản trị xếp thanh trên rồi tới thân trang. Trang đăng nhập chỉ có một
   thẻ, nên tận dụng luôn flex sẵn đó mà căn giữa cả hai chiều — không phải khai
   lại display.

   100dvh chứ không 100vh: trên di động, 100vh tính theo lúc thanh địa chỉ đã
   thu, nên dùng vh là trang cao hơn màn hình thật và sinh ra thanh cuộn dù
   chẳng có gì để cuộn. padding giữ thẻ không dính mép ở màn hình thấp. */
body.login-page {
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
    padding: min(calc(24 * 100vw / 400), 24px) min(calc(16 * 100vw / 400), 16px);
    box-sizing: border-box;
}

.login-form {
    width: min(calc(380 * 100vw / 400), 380px);
    max-width: 100%;
    min-height: min(calc(150 * 100vw / 400), 150px);
    display: block;
    background: #FFF;
    /* Lề trên 80px cũ là cách đẩy thẻ xuống khi trang căn từ mép trên. Giờ căn
       giữa bằng flex nên phải bỏ, không thì thẻ lệch xuống 40px. */
    margin: 0 auto;
    padding: min(calc(35 * 100vw / 400), 35px) min(calc(40 * 100vw / 400), 40px);
    border-radius: min(calc(12 * 100vw / 400), 12px);
    /* Dải đầu thẻ tràn ra sát mép bằng lề âm; không cắt thì góc vuông của nó
       thò ra ngoài bốn góc bo của thẻ. */
    overflow: hidden;
    border: min(calc(1 * 100vw / 400), 1px) solid #e8e8e8;
    box-shadow: 0 min(calc(2 * 100vw / 400), 2px) min(calc(8 * 100vw / 400), 8px) rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease;
}

.login-form:hover {
    box-shadow: 0 min(calc(4 * 100vw / 400), 4px) min(calc(12 * 100vw / 400), 12px) rgba(0, 0, 0, 0.08);
}

/* Dải đầu thẻ, nền xanh lá giống thanh trên khu quản trị. Lề âm bằng đúng
   padding của .login-form để tràn ra sát mép; padding dưới nhỏ hơn trên vì chữ
   đã có sẵn khoảng thở của line-height. */
.login-head {
    margin: calc(-1 * min(calc(35 * 100vw / 400), 35px))
            calc(-1 * min(calc(40 * 100vw / 400), 40px))
            min(calc(28 * 100vw / 400), 28px);
    padding: min(calc(22 * 100vw / 400), 22px) min(calc(40 * 100vw / 400), 40px)
             min(calc(18 * 100vw / 400), 18px);
    background: var(--brand);
    text-align: center;
}

/* logo.svg vẽ TRẮNG, không nền — đặt lên nền sáng là mất hút, nên chỉ dùng
   được trên dải xanh này, đúng như trên thanh trên khu quản trị. Tỉ lệ gốc 2:1
   (96x48), hiện 80x40. */
.login-logo {
    display: block;
    width: min(calc(80 * 100vw / 400), 80px);
    height: min(calc(40 * 100vw / 400), 40px);
    margin: 0 auto min(calc(10 * 100vw / 400), 10px);
    background-image: url(../images/logo.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Chữ trên nền --brand phải dùng --brand-ink, KHÔNG phải trắng: xanh lá
   #82b440 sáng nên chữ trắng chỉ đạt 2.2:1. --brand-ink là màu mà
   AdminBrandPalette đã chọn sẵn cho đúng nền này (thongke: #101828, đo 8.0:1). */
.login-form h2 {
    display: block;
    margin: 0;
    font-size: 1.5rem;
    text-align: center;
    color: var(--brand-ink);
    font-weight: 600;
}

.login-form input[type=text], 
.login-form input[type=password] {
    width: 100%;
    border: min(calc(1.5 * 100vw / 400), 1.5px) solid #e3e3e3;
    padding: min(calc(12 * 100vw / 400), 12px) min(calc(14 * 100vw / 400), 14px);
    border-radius: min(calc(8 * 100vw / 400), 8px);
    margin-bottom: min(calc(16 * 100vw / 400), 16px);
    font-size: 0.95rem;
    transition: all 0.3s ease;
    outline: none;
    background: #fafafa;
}

.login-form input[type=text]:focus, 
.login-form input[type=password]:focus {
    border-color: #4a90e2;
    background: #fff;
    box-shadow: 0 0 0 min(calc(3 * 100vw / 400), 3px) rgba(74, 144, 226, 0.1);
}

.login-form input[type=text]:hover, 
.login-form input[type=password]:hover {
    border-color: #d0d0d0;
    background: #fff;
}

.login-form label {
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: min(calc(5 * 100vw / 400), 5px) 0 min(calc(20 * 100vw / 400), 20px);
    font-size: 0.9rem;
    color: #555;
    user-select: none;
}

.login-form input[type=checkbox] {
    margin-right: min(calc(8 * 100vw / 400), 8px);
    width: min(calc(17 * 100vw / 400), 17px);
    height: min(calc(17 * 100vw / 400), 17px);
    cursor: pointer;
    accent-color: #4a90e2;
}

.login-form button {
    background: #454545;
    border: none;
    color: white;
    width: 100%;
    padding: min(calc(13 * 100vw / 400), 13px) min(calc(20 * 100vw / 400), 20px);
    text-align: center;
    text-decoration: none;
    display: block;
    font-size: 1.0rem;
    font-weight: 500;
    border-radius: min(calc(8 * 100vw / 400), 8px);
    cursor: pointer;
    transition: all 0.3s ease;
}

.login-form button:hover {
    background: #333;
    transform: translateY(calc(-1 * min(calc(2 * 100vw / 400), 2px)));
}

.login-form button:active {
    transform: translateY(0);
}

.login-form .message {
    background: #fee;
    border: min(calc(1 * 100vw / 400), 1px) solid #fcc;
    color: #c33;
    padding: min(calc(10 * 100vw / 400), 10px);
    border-radius: min(calc(6 * 100vw / 400), 6px);
    margin-bottom: min(calc(15 * 100vw / 400), 15px);
    font-size: 0.9rem;
    text-align: center;
}

.login-form .text-danger {
    color: #e74c3c;
    font-size: 0.85rem;
    display: block;
    margin-top: calc(-1 * min(calc(12 * 100vw / 400), 12px));
    margin-bottom: min(calc(12 * 100vw / 400), 12px);
}