/* =============================================================================
   Giao diện "bàn gỗ" cho 3 trang: /login, /register, /forgot_pass
   -----------------------------------------------------------------------------
   Nền: assets/images/auth_desk_bg.webp (bàn gỗ trắng + đồ vật vẽ tay, giữa để
   trống cho khung form). Khung form trắng bo góc ở giữa, logo phía trên,
   chọn ngôn ngữ phía dưới, footer pháp lý dính đáy trang.
   Trang dùng file này KHÔNG nạp auth.css (bộ reset Metronic cũ).
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&display=swap');

:root {
    --ad-primary: #1877f2;
    --ad-primary-2: #2f9bff;
    --ad-primary-soft: #eaf3ff;
    --ad-ink: #1f2a44;
    --ad-ink-2: #4a5570;
    --ad-muted: #8a93a8;
    --ad-line: #dfe4ec;
    --ad-card: rgba(255, 255, 255, .96);
    --ad-danger: #ef4444;
    --ad-warn: #f59e0b;
    --ad-ok: #10b981;
    --ad-radius: 12px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body.ad-page {
    font-family: 'Quicksand', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--ad-ink);
    background: #f3f3f1 url('/assets/images/auth_desk_bg.webp') center center / cover no-repeat fixed;
    -webkit-font-smoothing: antialiased;
}

.ad-page a { color: var(--ad-primary); text-decoration: none; }
.ad-page a:hover { text-decoration: underline; }
.ad-page button, .ad-page input { font-family: inherit; }

/* ---------- khung trang ---------- */
.ad-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.ad-main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px 16px 24px;
}

.ad-brand {
    display: block;
    margin-bottom: 18px;
}
.ad-brand img {
    display: block;
    width: 132px;
    height: auto;
}

.ad-card {
    width: 100%;
    max-width: 470px;
    padding: 26px 30px 24px;
    background: var(--ad-card);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 22px;
    box-shadow: 0 18px 50px rgba(31, 42, 68, .12), 0 2px 6px rgba(31, 42, 68, .05);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ---------- tab Đăng nhập / Đăng ký ---------- */
.ad-tabs {
    display: flex;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--ad-line);
}
.ad-tab {
    flex: 1;
    padding: 10px 0 12px;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--ad-muted) !important;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
}
.ad-tab:hover { color: var(--ad-ink-2) !important; text-decoration: none !important; }
.ad-tab.is-active {
    color: var(--ad-primary) !important;
    border-bottom-color: var(--ad-primary);
}

/* ---------- tiêu đề (trang quên mật khẩu) ---------- */
.ad-head { text-align: center; margin-bottom: 20px; }
.ad-title {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    color: var(--ad-ink);
}
.ad-sub {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--ad-muted);
}

/* ---------- trường nhập ---------- */
.ad-field { margin-bottom: 16px; }

.ad-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}
.ad-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ad-ink);
}
.ad-badge {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--ad-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}
/* báo lỗi nằm cùng hàng nhãn: hiện/ẩn không đẩy nút gửi xuống */
.ad-label-note {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ad-danger);
    visibility: hidden;
}
.ad-label-note.is-show { visibility: visible; }
/* bản nằm trong ô nhập (ô không có nhãn), đứng trước nút con mắt */
/* ẩn hẳn (không giữ chỗ) để chữ gợi ý không bị cắt; chỉ hiện khi ô đã có chữ nên không chiếm chỗ placeholder */
.ad-label-note--inline { display: none; flex: none; margin-left: 8px; white-space: nowrap; }
.ad-label-note--inline.is-show { display: inline; }

.ad-input {
    position: relative;
    display: flex;
    align-items: center;
    height: 52px;
    background: #fff;
    border: 1px solid var(--ad-line);
    border-radius: var(--ad-radius);
    transition: border-color .15s, box-shadow .15s;
}
.ad-input:focus-within {
    border-color: var(--ad-primary);
    box-shadow: 0 0 0 3px rgba(24, 119, 242, .12);
}
.ad-input__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 100%;
    color: var(--ad-ink-2);
}
.ad-input__icon svg { width: 22px; height: 22px; }
.ad-input--divided .ad-input__icon { border-right: 1px solid var(--ad-line); height: 60%; }
.ad-input--divided .ad-input__icon + input { padding-left: 14px; }

.ad-input input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 14px 0 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 500;
    color: var(--ad-ink);
}
.ad-input input::placeholder { color: #a3abbd; }
.ad-input input[readonly] { color: var(--ad-ink-2); }

.ad-eye {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ad-ink-2);
    cursor: pointer;
}
.ad-eye:hover { background: #f1f4f9; }
.ad-eye svg { width: 20px; height: 20px; }
.ad-eye .ad-eye__off { display: none; }
.ad-eye.is-shown .ad-eye__on { display: none; }
.ad-eye.is-shown .ad-eye__off { display: block; }

/* ô nhập + nút đứng cạnh (Gmail + Gửi OTP) */
.ad-inline {
    display: flex;
    gap: 10px;
}
.ad-inline .ad-input { flex: 1; min-width: 0; }

/* ---------- hộp ghi chú ---------- */
.ad-note {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--ad-primary-soft);
    color: #2b5fa8;
    font-size: 13px;
    line-height: 1.5;
}
.ad-note svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ad-primary); }

/* ---------- độ mạnh mật khẩu ---------- */
.ad-strength {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.ad-strength__bars {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.ad-strength__bars span {
    height: 5px;
    border-radius: 999px;
    background: #e3e7ee;
    transition: background .2s;
}
.ad-strength__label {
    min-width: 72px;
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    color: var(--ad-muted);
}
.ad-strength[data-level="1"] .ad-strength__bars span:nth-child(-n+1),
.ad-strength[data-level="2"] .ad-strength__bars span:nth-child(-n+2) { background: var(--ad-danger); }
.ad-strength[data-level="3"] .ad-strength__bars span:nth-child(-n+3) { background: var(--ad-warn); }
.ad-strength[data-level="4"] .ad-strength__bars span { background: var(--ad-ok); }
.ad-strength[data-level="1"] .ad-strength__label,
.ad-strength[data-level="2"] .ad-strength__label { color: var(--ad-danger); }
.ad-strength[data-level="3"] .ad-strength__label { color: var(--ad-warn); }
.ad-strength[data-level="4"] .ad-strength__label { color: var(--ad-ok); }

.ad-rules {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--ad-muted);
}
.ad-rules span.is-ok { color: var(--ad-ok); }

/* ---------- OTP ---------- */
.ad-otp {
    display: flex;
    justify-content: center;
    gap: 8px;
}
.ad-otp input {
    width: 44px;
    height: 50px;
    padding: 0;
    border: 1px solid var(--ad-line);
    border-radius: 10px;
    background: #fff;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--ad-ink);
    text-transform: uppercase;
    outline: 0;
    transition: border-color .15s, box-shadow .15s;
}
.ad-otp input:focus {
    border-color: var(--ad-primary);
    box-shadow: 0 0 0 3px rgba(24, 119, 242, .12);
}

/* ---------- dòng phụ / checkbox ---------- */
.ad-row-end {
    display: flex;
    justify-content: flex-end;
    margin: -6px 0 14px;
    font-size: 14px;
}

.ad-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 18px;
    font-size: 14px;
    color: var(--ad-ink-2);
    cursor: pointer;
}
/* checkbox tự vẽ: ô bo góc, tick SVG trắng trên nền gradient khi chọn */
.ad-check input {
    -webkit-appearance: none;
    appearance: none;
    flex: none;
    position: relative;
    width: 20px;
    height: 20px;
    margin: 0;
    border: 1.5px solid #c5ccd9;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.ad-check input::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5l3 3 6-7'/%3E%3C/svg%3E") center / 16px no-repeat;
    opacity: 0;
    transform: scale(.5);
    transition: opacity .15s, transform .15s;
}
.ad-check:hover input { border-color: var(--ad-primary); }
.ad-check input:focus-visible { box-shadow: 0 0 0 3px rgba(24, 119, 242, .18); outline: 0; }
.ad-check input:checked {
    border-color: transparent;
    background: linear-gradient(135deg, var(--ad-primary), var(--ad-primary-2));
    box-shadow: 0 3px 8px rgba(24, 119, 242, .3);
}
.ad-check input:checked::after { opacity: 1; transform: scale(1); }
.ad-check--center { justify-content: center; }

.ad-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ad-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.ad-toggle svg { width: 14px; height: 14px; transition: transform .2s; }
.ad-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
.ad-collapse[hidden] { display: none; }

/* ---------- nút ---------- */
.ad-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 52px;
    padding: 0 20px;
    border: 0;
    border-radius: var(--ad-radius);
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s, transform .1s, box-shadow .15s;
}
.ad-btn svg { width: 20px; height: 20px; }
.ad-btn:disabled { opacity: .6; cursor: not-allowed; }
.ad-btn--primary {
    width: 100%;
    color: #fff;
    background: linear-gradient(90deg, var(--ad-primary), var(--ad-primary-2));
    box-shadow: 0 8px 20px rgba(24, 119, 242, .28);
}
.ad-btn--primary:not(:disabled):hover { filter: brightness(1.05); }
.ad-btn--primary:not(:disabled):active { transform: translateY(1px); }
.ad-btn--outline {
    flex: none;
    color: var(--ad-primary);
    background: #fff;
    border: 1.5px solid var(--ad-primary);
}
.ad-btn--outline:not(:disabled):hover { background: var(--ad-primary-soft); }

.ad-foot {
    margin-top: 16px;
    text-align: center;
    font-size: 15px;
    color: var(--ad-ink-2);
}
.ad-foot a { font-weight: 600; }
.ad-foot--back a { display: inline-flex; align-items: center; gap: 8px; }
.ad-foot--back svg { width: 18px; height: 18px; }
.ad-foot__try { margin-top: 6px; font-size: 14px; }
.ad-foot__try a { cursor: pointer; }

/* reCAPTCHA (bật/tắt ở admin) */
.ad-captcha { display: flex; justify-content: center; margin-bottom: 14px; }

/* ---------- chọn ngôn ngữ ---------- */
.ad-page .lang-picker-row { padding: 16px 0 0; }
.ad-page .lang-picker .lp-btn { box-shadow: 0 4px 14px rgba(31, 42, 68, .08); }

/* ---------- footer pháp lý ---------- */
.ad-page .auth-footer {
    flex: none;
    padding: 10px 24px;
    background: rgba(255, 255, 255, .94);
    border-top: 1px solid #eceff4;
    font-size: 13px;
    color: var(--ad-muted);
}
.ad-page .auth-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1600px;
    margin: 0 auto;
}
.ad-page .auth-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.ad-page .auth-footer__sep { margin: 0 10px; color: #c8cdd8; }
.ad-page .auth-footer__links { display: flex; align-items: center; white-space: nowrap; }
.ad-page .auth-footer__links a { color: var(--ad-ink-2); }

/* ---------- nút liên hệ nổi (components/right_icons.ejs) ---------- */
.ad-page .icon-middle {
    position: fixed;
    right: 16px;
    bottom: 140px;
    z-index: 3;
    transition: right .2s;
}
.ad-page .icon-middle .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--ad-primary);
    box-shadow: 0 6px 16px rgba(24, 119, 242, .22);
    overflow: hidden;
    transition: transform .2s;
}
.ad-page .icon-middle .icon:hover { transform: scale(1.06); }
.ad-page .icon-middle .icon img { width: 100%; height: 100%; object-fit: cover; }
.ad-page .icon-middle .icon img.icon-svg {
    width: 100%;
    height: 100%;
    padding: 10px;
    background: var(--ad-primary);
}
.ad-page.mini-icons .icon-middle { right: -64px; }
.ad-page #middle-control {
    position: fixed;
    right: 16px;
    bottom: 56px;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 9px;
    border-radius: 10px;
    background: var(--ad-primary);
    box-shadow: 0 6px 16px rgba(24, 119, 242, .25);
    cursor: pointer;
}
.ad-page #middle-control img { width: 100%; }

/* Google Translate: ẩn banner, không đẩy body */
.ad-page .skiptranslate iframe { display: none !important; }
.translated-ltr body.ad-page { top: 0 !important; }
.ad-page .grecaptcha-badge { visibility: hidden; }

/* ---------- màn nhỏ ---------- */
@media (max-width: 1024px) {
    .ad-page .auth-footer__inner { flex-direction: column; text-align: center; gap: 6px; }
    .ad-page .auth-footer__legal { justify-content: center; }
    .ad-page .auth-footer__sep--addr { display: none; }
    .ad-page .auth-footer__addr { flex-basis: 100%; }
}

@media (max-width: 560px) {
    /* giữa ảnh nền là gỗ trống: logo + form không đè lên đồ vật */
    body.ad-page { background-attachment: scroll; background-position: center center; }
    .ad-main { padding: 20px 16px 16px; }
    .ad-brand img { width: 104px; }
    .ad-card { padding: 18px 16px 16px; border-radius: 18px; }
    .ad-tabs { margin-bottom: 16px; }
    .ad-tab { font-size: 16px; padding: 6px 0 9px; }
    /* nhãn + ô nhập gọn hơn để form không quá dài */
    .ad-field { margin-bottom: 12px; }
    .ad-label-row { margin-bottom: 4px; }
    .ad-label { font-size: 13.5px; }
    .ad-badge { font-size: 10px; padding: 1px 7px; }
    .ad-input { height: 44px; border-radius: 10px; }
    .ad-input__icon { width: 42px; }
    .ad-input__icon svg { width: 19px; height: 19px; }
    .ad-input input { font-size: 14px; }
    .ad-eye { width: 32px; height: 32px; margin-right: 6px; }
    .ad-note { margin-top: 8px; padding: 8px 12px; font-size: 12.5px; }
    .ad-strength { margin-top: 8px; }
    .ad-rules { margin-top: 4px; font-size: 12px; line-height: 1.4; }
    .ad-check { margin: 2px 0 14px; font-size: 13.5px; }
    .ad-toggle { margin-bottom: 10px; font-size: 13.5px; }
    .ad-btn { height: 46px; font-size: 16px; }
    .ad-foot { margin-top: 12px; font-size: 14px; }
    .ad-title { font-size: 22px; }
    .ad-inline { flex-direction: column; }
    .ad-inline .ad-input { flex: none; }
    .ad-btn--outline { height: 44px; }
    .ad-otp { gap: 5px; }
    .ad-otp input { width: 34px; height: 42px; font-size: 17px; }
    .ad-page .auth-footer { padding: 10px 16px; font-size: 12px; }
}