:root{
    --p1:#8364E2; --p2:#B69FFB; --p3:#7471ED; --p4:#8769E5;
    --p5:#E4D8FF; --p6:#CCD3FF; --p7:#F7F4FD;
}

body, html {
    height: 100%;
    margin: 0;
    font-family: 'JetBrains Mono', monospace;
}

/* Background full-screen đẹp hơn */
.auth-page{
    height:100%;
    display:flex; justify-content:center; align-items:center;
    /*background: radial-gradient(circle at top left, var(--p1), var(--p3) 40%, var(--p5));*/
    background-attachment: fixed;
}

/* Card login */
.auth-card{
    background:#fff; padding:36px 40px; border-radius:20px;
    width:100%; max-width:420px;
    box-shadow:0 15px 40px rgba(0,0,0,.15);
    animation: fadeInUp .5s ease;
}

.auth-title{
    text-align:center; font-size:1.7rem; font-weight:700;
    color:var(--p1); margin-bottom:22px;
}

/* Input */
.auth-field{ margin-bottom:16px; }
.auth-label{ display:block; margin-bottom:6px; font-weight:500; color:#444; }
.auth-input {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--p6);
    border-radius: 10px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;   /* quan trọng để padding tính trong width */
}
.auth-input:focus{
    border-color:var(--p3);
    box-shadow:0 0 0 3px rgba(131,100,226,.15);
}

/* Buttons */
.auth-btn{
    margin-top: 20px;
    width:100%; padding:13px; border:none; border-radius:10px;
    background:linear-gradient(90deg,var(--p1),var(--p3));
    color:#fff; font-weight:600; cursor:pointer;
    transition:opacity .2s ease;
}
.auth-btn:hover{ opacity:.9; }

.auth-sep{
    display:flex; align-items:center; gap:10px; margin:20px 0;
    color:#777; font-size:.9rem;
}
.auth-sep::before,.auth-sep::after{
    content:""; flex:1; height:1px; background:var(--p6);
}

.auth-google{
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; padding:12px; border:1px solid var(--p6); border-radius:10px;
    background:var(--p7); font-weight:600; cursor:pointer;
    transition: background .2s ease;
}
.auth-google:hover{ background:var(--p5); }

/* Links */
.auth-links{ margin-top:16px; display:flex; justify-content:space-between; font-size:.9rem; }
.auth-link{ color:var(--p1); text-decoration:none; }
.auth-link:hover{ text-decoration:underline; }

/* Animation */
@keyframes fadeInUp{
    from{ transform:translateY(20px); opacity:0; }
    to{ transform:translateY(0); opacity:1; }
}

/* Remember me checkbox area */
.custom-checkbox {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    cursor: pointer;
    border: 2px solid #8364E2;
    border-radius: 4px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline: none;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    vertical-align: middle;
}

/* khi checked */
.custom-checkbox:checked {
    background-color: #8364E2;
    border-color: #8364E2;
    position: relative;
}

/* dấu tick */
.custom-checkbox:checked::after {
    content: "✔";
    color: #fff;
    font-size: 12px;
    position: absolute;
    top: -1px;
    left: 3px;
}

/* Sign in button */
.btn-primary {
    background-color: #8364E2;
    border-color: #8364E2;
    color: #fff;
    font-weight: 600;
    padding: 10px 18px;
    margin-top: 10px; /* thêm khoảng cách trên */
    width: 100%;      /* full width cho đẹp */
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
}

.btn-primary:hover {
    background-color: #7471ED;
    border-color: #7471ED;
}

.validation-summary-errors {
    color: #b00020;
    margin-bottom: 10px;
}

.field-validation-error {
    display: block;
    color: #b00020;
    margin-top: 6px;
    font-size: 0.9rem;
}

.input-validation-error {
    border-color: #b00020 !important;
    box-shadow: 0 0 0 3px rgba(176,0,32,.12) !important;
}

.auth-container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;

    background: url('../images/37.png') no-repeat center center;
    background-size: cover;

    font-family: 'JetBrains Mono', monospace;
}

/* Mobile / Tablet (mặc định) */
.auth-card {
    width: 92vw;        /* chiếm 92% chiều rộng viewport */
    max-width: 250px;   /* nhưng không vượt quá 520px */
    padding: 28px 32px; /* padding gọn hơn cho màn nhỏ */
}

/* Desktop ≥ 992px */
@media (min-width: 992px) {
    .auth-card {
        width: 60vw;        /* ~60% viewport */
        max-width: 340px;   /* nhưng tối đa 720px */
        padding: 40px 56px; /* padding lớn hơn */
    }
}

/* Desktop lớn ≥ 1440px */
@media (min-width: 1440px) {
    .auth-card {
        width: 440px;       /* cố định rộng 440px */
        max-width: none;    /* bỏ giới hạn max-width */
        padding: 44px 60px; /* tuỳ chỉnh padding cho cân đối */
    }
}

.auth-title {
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
    color: var(--p1); /* #8364E2 */
}

.auth-link {
    margin-top: 16px;
    text-align: center;
}

.auth-link a {
    color: var(--p1);
    text-decoration: none;
    font-weight: 500;
}

.verify-card { text-align:center; }

.verify-icon {
    width: 80px; height: 80px; margin: 0 auto 14px auto;
}

.verify-icon .ring {
    fill: #F7F4FD;                 /* nền nhạt */
    stroke: #8364E2;               /* màu chủ đạo */
    stroke-width: 2;
}

.verify-icon .check {
    fill: none;
    stroke: #8364E2;               /* màu chủ đạo */
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.verify-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #8364E2;
    margin: 6px 0 6px;
}

.verify-text {
    color: #444;
    margin-bottom: 12px;
}