/* =============================================================================
   Mẫu đăng nhập 3 — Aurora: nền tối, dải màu chuyển động, thẻ kính mờ. Prefix ar-
   ============================================================================= */

.au-t3 {
    --au-font: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
    --au-bg: #060816;
    --au-ink: #f1f4ff;
    --au-muted: #97a2c3;
    --au-label: #c9d2ea;
    --au-soft: rgba(255, 255, 255, .05);

    --au-input-bg: rgba(255, 255, 255, .04);
    --au-input-border: rgba(255, 255, 255, .1);
    --au-input-border-hover: rgba(255, 255, 255, .22);
    --au-input-focus: #67e8f9;
    --au-autofill: #141a33;
    --au-ring: rgba(103, 232, 249, .16);
    --au-placeholder: #5d688a;
    --au-ic: #6b7699;
    --au-radius: 14px;

    --au-primary: #8b5cf6;
    --au-btn-bg: linear-gradient(115deg, #7c3aed 0%, #6366f1 45%, #06b6d4 100%);
    --au-btn-shadow: 0 12px 30px -10px rgba(124, 58, 237, .8), inset 0 1px 0 rgba(255, 255, 255, .25);
    --au-link: #a5b4fc;

    --au-tabs-bg: rgba(255, 255, 255, .05);
    --au-tabs-ink: #8f9abb;
    --au-tabs-active-bg: rgba(255, 255, 255, .12);
    --au-tabs-active-ink: #fff;
    --au-tabs-active-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 16px -6px rgba(0, 0, 0, .6);

    --au-pop-bg: #121731;
    --au-pop-ink: #c9d2ea;
    --au-pop-border: rgba(255, 255, 255, .14);
    --au-danger: #fb7185;
    --au-ok: #34d399;
}
body.au-t3 { overflow-x: hidden; }

/* ---------- Nền ---------- */
.ar-scene {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.ar-blob {
    position: absolute;
    border-radius: 50%;
    opacity: .55;
    filter: blur(90px);
    will-change: transform;
}
.ar-blob--1 {
    top: -16vmax;
    left: -14vmax;
    width: 48vmax;
    height: 48vmax;
    background: radial-gradient(circle at 40% 40%, #7c3aed, transparent 66%);
    animation: ar-drift-1 22s ease-in-out infinite alternate;
}
.ar-blob--2 {
    top: 8vh;
    right: -14vmax;
    width: 42vmax;
    height: 42vmax;
    background: radial-gradient(circle, #0891b2, transparent 66%);
    animation: ar-drift-2 26s ease-in-out infinite alternate;
}
.ar-blob--3 {
    bottom: -24vmax;
    left: 22vw;
    width: 44vmax;
    height: 44vmax;
    opacity: .4;
    background: radial-gradient(circle, #db2777, transparent 66%);
    animation: ar-drift-3 30s ease-in-out infinite alternate;
}
.ar-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 25%, transparent 75%);
}
@keyframes ar-drift-1 { to { transform: translate(12vw, 10vh) scale(1.12); } }
@keyframes ar-drift-2 { to { transform: translate(-10vw, 14vh) scale(.9); } }
@keyframes ar-drift-3 { to { transform: translate(-14vw, -8vh) scale(1.1); } }

/* ---------- Khung trang ---------- */
.ar-page {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 20px clamp(16px, 4vw, 40px);
}
.ar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.ar-top .au-brand__mark {
    background: linear-gradient(135deg, #8b5cf6, #06b6d4);
    box-shadow: 0 6px 18px -4px rgba(139, 92, 246, .7);
}
.ar-top .au-brand__logo {
    max-height: 44px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .92);
}
.ar-top .lang-picker-row { width: auto; }

.ar-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 36px 0;
}
.ar-stage {
    position: relative;
    width: 100%;
    max-width: 440px;
}

/* ---------- Thẻ kính ---------- */
.ar-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 32px 30px 28px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 28px;
    background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025));
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    backdrop-filter: blur(24px) saturate(140%);
    box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.ar-card::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 18%;
    right: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(165, 180, 252, .95), transparent);
}

.ar-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid rgba(139, 92, 246, .38);
    border-radius: 999px;
    background: rgba(139, 92, 246, .14);
    color: #c4b5fd;
    font-size: 12px;
    font-weight: 600;
}
.ar-badge svg { width: 13px; height: 13px; }
.ar-title {
    margin: 14px 0 6px;
    background: linear-gradient(180deg, #fff 30%, #c7d2fe);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
}
.ar-sub {
    margin: 0;
    color: var(--au-muted);
    font-size: 14.5px;
}
.ar-sub b { color: #e0e7ff; font-weight: 600; }

/* ---------- Thẻ nổi quanh form (màn rộng) ---------- */
.ar-chips { margin: 0; padding: 0; list-style: none; }
.ar-chip {
    position: absolute;
    display: none;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 8px 8px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #dbe3ff;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .55);
    animation: ar-float 6s ease-in-out infinite;
}
.ar-chip__ic {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: linear-gradient(135deg, rgba(139, 92, 246, .5), rgba(6, 182, 212, .5));
    color: #fff;
}
.ar-chip__ic svg { width: 16px; height: 16px; }
.ar-chip--1 { top: 9%; right: calc(100% + 44px); }
.ar-chip--2 { top: 52%; right: calc(100% + 76px); animation-delay: -2s; }
.ar-chip--3 { top: 16%; left: calc(100% + 56px); animation-delay: -4s; }
.ar-chip--4 { top: 62%; left: calc(100% + 32px); animation-delay: -1s; }
@keyframes ar-float { 50% { transform: translateY(-10px); } }
@media (min-width: 1100px) {
    .ar-chip { display: inline-flex; }
}

/* ---------- Chân trang ---------- */
.ar-foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: #5d688a;
    font-size: 12.5px;
}
.ar-foot p { margin: 0; }
.ar-platforms {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    color: #59647f;
}
.ar-platforms svg { width: 18px; height: 18px; }

/* ---------- Chọn ngôn ngữ trên nền tối ---------- */
.au-t3 .lang-picker,
.au-t3 .lp-menu {
    --lp-bg: rgba(255, 255, 255, .06);
    --lp-border: rgba(255, 255, 255, .12);
    --lp-ink: #e2e8f0;
    --lp-ink-2: #c9d2ea;
    --lp-muted: #8f9abb;
    --lp-hover: rgba(255, 255, 255, .1);
    --lp-primary: #a5b4fc;
    --lp-primary-soft: rgba(165, 180, 252, .14);
}
.au-t3 .lp-menu { --lp-bg: #121731; }

@media (max-width: 520px) {
    .ar-page { padding: 14px 16px; }
    .ar-main { padding: 22px 0; }
    .ar-card { gap: 20px; padding: 24px 18px 22px; border-radius: 22px; }
    .ar-title { font-size: 24px; }
    .ar-blob { filter: blur(60px); }
}

/* ---------- Chân trang thương hiệu: dải kính mờ ---------- */
.au-t3 .auth-footer__inner {
    max-width: 920px;
    margin-top: 16px;
    padding: 12px 20px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #97a2c3;
}
.au-t3 .auth-footer__links a { color: #a5b4fc; }
.au-t3 .auth-footer__links a:hover { color: #67e8f9; text-decoration: none; }