/* =============================================================================
   Mẫu đăng nhập 6 — Creator: nền gradient hoàng hôn, điện thoại minh hoạ, thẻ form viền gradient. Prefix cr-
   ============================================================================= */

.au-t6 {
    --au-font: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
    --cr-grad: linear-gradient(110deg, #f97316 0%, #ec4899 52%, #8b5cf6 100%);
    --au-bg: #fff7f2;
    --au-ink: #1c1233;
    --au-muted: #6b6280;
    --au-label: #2e2546;
    --au-soft: #fbf1f6;

    --au-input-bg: #fff;
    --au-input-border: #eadff0;
    --au-input-border-hover: #d8c6e6;
    --au-input-focus: #e9407a;
    --au-autofill: #fff1f6;
    --au-ring: rgba(233, 64, 122, .13);
    --au-placeholder: #a99fba;
    --au-ic: #b4a8c6;
    --au-radius: 14px;

    --au-primary: #e9407a;
    --au-btn-bg: var(--cr-grad);
    --au-btn-radius: 999px;
    --au-btn-shadow: 0 14px 28px -12px rgba(236, 72, 153, .75);
    --au-link: #d6336c;

    --au-tabs-bg: #f6edf5;
    --au-tabs-active-ink: #1c1233;
}
.au-t6 .au-tabs,
.au-t6 .au-tabs__item { border-radius: 999px; }

.cr-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(55% 55% at 12% 18%, rgba(249, 115, 22, .3), transparent 62%),
        radial-gradient(50% 50% at 88% 12%, rgba(236, 72, 153, .28), transparent 62%),
        radial-gradient(60% 60% at 62% 100%, rgba(139, 92, 246, .26), transparent 62%),
        var(--au-bg);
}

.cr-page {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 20px clamp(16px, 4vw, 48px) 22px;
}
.cr-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cr-top .au-brand__mark { border-radius: 50%; background: var(--cr-grad); }
.cr-top .lang-picker-row { width: auto; }

.cr-main {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    align-items: center;
    gap: clamp(32px, 6vw, 96px);
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 32px 0;
}

/* ---------- Điện thoại minh hoạ ---------- */
.cr-show {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 48px 0 44px;
}
.cr-phone {
    position: relative;
    width: 292px;
    padding: 14px 16px 20px;
    border: 9px solid #1c1233;
    border-radius: 44px;
    background: #fff;
    box-shadow: 0 50px 80px -30px rgba(76, 29, 149, .5);
    transform: rotate(-4deg);
}
.cr-phone__notch {
    width: 92px;
    height: 22px;
    margin: -14px auto 14px;
    border-radius: 0 0 14px 14px;
    background: #1c1233;
}
.cr-profile { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cr-avatar {
    flex: none;
    width: 54px;
    height: 54px;
    padding: 3px;
    border-radius: 50%;
    background: var(--cr-grad);
}
.cr-avatar > span {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #fde7f0;
    color: #1c1233;
    font-size: 20px;
    font-weight: 800;
}
.cr-profile__name { min-width: 0; }
.cr-profile__name b { display: block; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.cr-profile__name small { color: var(--au-muted); font-size: 12px; }
.cr-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 14px;
    text-align: center;
}
.cr-stats b { display: block; font-size: 16px; font-weight: 800; }
.cr-stats small { color: var(--au-muted); font-size: 10.5px; }
.cr-stats__hot {
    background: var(--cr-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.cr-post {
    position: relative;
    height: 210px;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(165deg, #fde68a 0%, #fb7185 48%, #a78bfa 100%);
}
.cr-post::before {
    content: "";
    position: absolute;
    top: 28px;
    right: 34px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff7cc;
    box-shadow: 0 0 0 12px rgba(255, 247, 204, .25);
}
.cr-post::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 46% at 22% 100%, rgba(91, 33, 182, .85) 0 98%, transparent 100%),
        radial-gradient(72% 52% at 84% 100%, rgba(190, 24, 93, .8) 0 98%, transparent 100%);
}
.cr-play {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #1c1233;
    box-shadow: 0 10px 24px -8px rgba(28, 18, 51, .5);
}
.cr-play svg { width: 20px; height: 20px; margin-left: 3px; }
.cr-actions { display: flex; gap: 16px; margin-top: 12px; font-size: 13px; font-weight: 700; }
.cr-actions span { display: inline-flex; align-items: center; gap: 5px; }
.cr-actions svg { width: 17px; height: 17px; }
.cr-actions__like svg { color: #f43f5e; }

.cr-hearts i {
    position: absolute;
    bottom: 54px;
    left: 26px;
    width: 18px;
    height: 18px;
    color: #f43f5e;
    opacity: 0;
    animation: cr-rise 3.6s ease-in var(--d, 0s) infinite;
}
.cr-hearts svg { display: block; width: 100%; height: 100%; }
@keyframes cr-rise {
    0% { opacity: 0; transform: translate(0, 0) scale(.6); }
    15% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--x, 0), -170px) scale(1.15); }
}

.cr-float {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px 10px 10px;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 20px 40px -18px rgba(76, 29, 149, .45);
    white-space: nowrap;
    animation: cr-bob 5s ease-in-out infinite;
}
.cr-float b { display: block; font-size: 15px; font-weight: 800; line-height: 1.2; }
.cr-float small { color: var(--au-muted); font-size: 12px; }
.cr-float__ic {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    color: #fff;
}
.cr-float__ic svg { width: 18px; height: 18px; }
.cr-float--likes { top: 16%; left: 0; }
.cr-float--likes .cr-float__ic { background: #f43f5e; }
.cr-float--follow { bottom: 16%; right: 0; animation-delay: -2.5s; }
.cr-float--follow .cr-float__ic { background: #8b5cf6; }
.cr-float--chart {
    top: 4%;
    right: 2%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 14px;
    animation-delay: -1.2s;
}
.cr-float__label { font-size: 12.5px; font-weight: 700; }
.cr-float__label em { margin-left: 4px; color: #16a34a; font-style: normal; }
.cr-bars { display: flex; align-items: flex-end; gap: 5px; height: 44px; }
.cr-bars i {
    width: 11px;
    height: var(--h);
    border-radius: 4px;
    background: linear-gradient(180deg, #ec4899, #f97316);
    transform-origin: bottom;
    animation: cr-bar 2.4s ease-in-out infinite alternate;
}
.cr-bars i:nth-child(2n) { animation-delay: -.8s; }
.cr-bars i:nth-child(3n) { animation-delay: -1.6s; }
@keyframes cr-bob { 50% { transform: translateY(-10px); } }
@keyframes cr-bar { from { transform: scaleY(.55); } }

.cr-note {
    position: absolute;
    bottom: 0;
    left: 50%;
    margin: 0;
    color: var(--au-muted);
    font-size: 12px;
    transform: translateX(-50%);
}

/* ---------- Thẻ form ---------- */
.cr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 34px 30px 28px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .9);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 40px 80px -32px rgba(76, 29, 149, .4);
}
.cr-card::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: var(--cr-grad);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.cr-title {
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.025em;
}
.cr-title em {
    padding-right: .06em;
    background: var(--cr-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-style: italic;
}
.cr-sub { margin: 8px 0 0; color: var(--au-muted); }

.cr-foot { color: var(--au-muted); font-size: 12.5px; text-align: center; }

@media (max-width: 960px) {
    .cr-main { grid-template-columns: minmax(0, 1fr); max-width: 480px; padding: 24px 0 32px; }
    .cr-show { display: none; }
}
@media (max-width: 520px) {
    .cr-page { padding: 14px 16px 20px; }
    .cr-card { gap: 20px; padding: 26px 18px 22px; border-radius: 24px; }
    .cr-title { font-size: 27px; }
}

/* ---------- Chân trang thương hiệu: thẻ kính sáng, link màu gradient ---------- */
.au-t6 .auth-footer__inner {
    max-width: 1120px;
    margin-top: 16px;
    padding: 12px 20px;
    border: 1px solid #eadff0;
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
    color: #6b6280;
}
.au-t6 .auth-footer__links a {
    background: var(--cr-grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}