/* =============================================================================
   SMO CARD — ĐĂNG NHẬP / ĐĂNG KÝ / QUÊN MẬT KHẨU
   -----------------------------------------------------------------------------
   Nạp SAU home-v2.css. Ba trang này là phễu đăng ký — nơi khách thật sự tạo
   tài khoản — nhưng trước đây vẫn ở bố cục UIkit cũ: nhãn "(*)" đỏ, nút viết
   inline style, và header cũ KHÔNG có nút "Tạo danh thiếp" nên người vào
   trang đăng nhập không có đường nào sang trang đăng ký ngoài một liên kết
   chữ nhỏ.
   ========================================================================== */
#page-auth {
    --c-smoke: #FCFAF8;
    --c-smoke-deep: #ECE6DF;
    --c-gold: #B88028;
    --c-gold-deep: #8F621C;
    --c-gold-wash: #FDF7EF;
    --c-ink: #101830;
    --g-metal: linear-gradient(135deg, #F0D79A 0%, #D9A83F 34%, #B88028 62%, #8F621C 100%);
    --g-metal-soft: linear-gradient(135deg, #F7E9C6 0%, #E0BC6A 50%, #C08A2E 100%);
}

.auth {
    position: relative;
    overflow: hidden;
    padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem) clamp(3rem, 2rem + 3vw, 5.5rem);
    background-color: #FCFAF8;
    background-image:
        radial-gradient(rgba(140, 104, 48, .07) 1px, transparent 1px),
        radial-gradient(38rem 26rem at 84% 4%, rgba(240, 202, 128, .45), transparent 64%),
        radial-gradient(28rem 22rem at 4% 98%, rgba(122, 148, 200, .22), transparent 68%);
    background-size: 24px 24px, auto, auto;
}
.auth__deco { position: absolute; inset: 0; pointer-events: none; }
.auth__deco::before {
    content: "";
    position: absolute;
    top: -4rem; right: -7rem;
    width: 26rem; height: 20rem;
    transform: rotate(-24deg);
    background: repeating-linear-gradient(90deg,
        rgba(184, 128, 40, .16) 0 2px, transparent 2px 16px);
    mask-image: linear-gradient(200deg, #000 8%, transparent 62%);
}

.auth__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    gap: clamp(var(--s-8), 5vw, var(--s-16));
    align-items: start;
}
.auth__grid--narrow { grid-template-columns: minmax(0, 30rem); justify-content: center; }

/* --- Khung biểu mẫu --- */
.auth__panel {
    padding: clamp(var(--s-6), 3vw, var(--s-10));
    background: var(--c-paper);
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-lg);
    box-shadow: 0 1px 2px rgba(16, 24, 48, .04), 0 18px 36px rgba(16, 24, 48, .07);
}
.auth__title { margin: 0 0 var(--s-2); font-size: var(--fs-h2); line-height: var(--lh-h2); }
.auth__lede { margin: 0 0 var(--s-6); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-text-muted); }

/* --- Thông báo --- */
.auth__alert {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    margin: 0 0 var(--s-5);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-sm);
    font-size: var(--fs-sm);
    line-height: var(--lh-body);
}
.auth__alert svg { flex: none; margin-top: 2px; }
.auth__alert--bad  { background: var(--c-danger-wash);  color: var(--c-danger); }
.auth__alert--good { background: var(--c-success-wash); color: var(--c-success); }

/* --- Trường nhập --- */
.authform { display: grid; gap: var(--s-5); }
.authform__field { display: grid; gap: var(--s-2); }
.authform__label { font-size: var(--fs-sm); font-weight: 600; }
.authform__field input {
    width: 100%;
    /* 48px là vùng chạm tối thiểu — bản cũ để ô cao 34px, bấm trên điện thoại
       rất dễ trượt sang ô bên cạnh. */
    min-height: 48px;
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--c-smoke-deep);
    border-radius: var(--r-sm);
    background: #fff;
    font-family: inherit;
    font-size: var(--fs-body);
    color: var(--c-text);
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.authform__field input::placeholder { color: #9AA1B1; }
.authform__field input:focus {
    outline: none;
    border-color: var(--c-gold);
    box-shadow: 0 0 0 3px rgba(184, 128, 40, .14);
}
.authform__field input:invalid:not(:placeholder-shown) { border-color: var(--c-danger); }

.authform__submit { width: 100%; margin-top: var(--s-1); }
.authform__alt { margin: 0; font-size: var(--fs-sm); }
.authform__alt a { color: var(--c-indigo); }
.authform__note {
    margin: 0;
    font-size: var(--fs-label);
    line-height: var(--lh-label);
    color: var(--c-text-muted);
}
.authform__note a { color: var(--c-indigo); }

.auth__switch {
    margin: var(--s-6) 0 0;
    padding-top: var(--s-5);
    border-top: 1px solid var(--c-smoke-deep);
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}
.auth__switch a { color: var(--c-gold); font-weight: 600; }

/* --- Cột phải --- */
.auth__aside { padding-top: var(--s-4); }
.auth__asidehead {
    margin: 0 0 var(--s-5);
    font-size: var(--fs-label);
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--c-gold);
}
.auth__points { display: grid; gap: var(--s-3); margin: 0 0 var(--s-6); padding: 0; list-style: none; }
.auth__points li { display: flex; align-items: flex-start; gap: var(--s-3); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--c-text-muted); }
.auth__points svg { flex: none; margin-top: 3px; color: var(--c-success); }

.auth__steps { display: grid; gap: var(--s-4); margin: 0 0 var(--s-6); padding: 0; list-style: none; counter-reset: none; }
.auth__steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--s-3); align-items: start; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--c-text-muted); }
.auth__steps li > span:first-child {
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 999px;
    background: linear-gradient(145deg, #1B2A4A, #101830);
    color: #E0BC6A;
    font-family: var(--ff-display);
    font-weight: 800;
    font-size: var(--fs-label);
}
.auth__asidecta { width: 100%; }

@media (max-width: 900px) {
    .auth__grid { grid-template-columns: 1fr; }
    /* Trên điện thoại, biểu mẫu phải đứng trước phần giới thiệu. */
    .auth__aside { order: 1; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .authform__field input { transition: none; }
}