/* =============================================================================
   Mẫu đăng nhập 9 — Clay: anh em với landing page12. Nền pastel, khối 3D đất sét
   trôi nhẹ, thẻ form phồng (bóng kép), ô nhập ấn lõm, tab viên thuốc, nút lún khi nhấn.
   Prefix ck-
   ============================================================================= */

.au-t9 {
    --au-font: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ck-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
    --ck-violet: #7c5cff;
    --ck-violet-d: #5f3ff0;
    --ck-ink-2: #463d70;
    --ck-ease: cubic-bezier(.22, .8, .24, 1);
    --ck-bounce: cubic-bezier(.34, 1.56, .64, 1);
    --ck-drop: rgba(88, 64, 184, .32);

    --au-bg: #f4f1ff;
    --au-ink: #2b2350;
    --au-muted: #6b6491;
    --au-label: #2b2350;
    --au-soft: #f1edff;

    --au-input-h: 52px;
    --au-input-bg: #f2eeff;
    --au-input-ink: #2b2350;
    --au-input-bw: 2px;
    --au-input-border: transparent;
    --au-input-border-hover: #e2daff;
    --au-input-focus: #8b6dff;
    --au-autofill: #f2eeff;
    --au-ring: rgba(124, 92, 255, .16);
    --au-placeholder: #958dbb;
    --au-ic: #8b78e8;
    --au-radius: 18px;
    --au-gap: 18px;

    --au-primary: #6c4cf5;
    --au-primary-ink: #fff;
    --au-btn-bg: linear-gradient(180deg, #ff9879 0%, #ff7a59 52%, #f86c45 100%);
    --au-btn-h: 56px;
    --au-btn-radius: 999px;
    --au-btn-border: 0;
    --au-btn-shadow:
        0 18px 26px -14px rgba(232, 90, 52, .7),
        0 6px 10px -6px rgba(232, 90, 52, .45),
        inset 0 6px 9px -3px rgba(255, 255, 255, .6),
        inset 0 -7px 12px -4px rgba(186, 58, 22, .4);
    --au-link: #5f3ff0;

    --au-tabs-bg: #ece6ff;
    --au-tabs-ink: #6b6491;
    --au-tabs-active-bg: #fff;
    --au-tabs-active-ink: #2b2350;
    --au-tabs-active-shadow:
        0 10px 16px -10px rgba(88, 64, 184, .6),
        inset 0 4px 6px -2px rgba(255, 255, 255, 1),
        inset 0 -5px 8px -3px rgba(124, 92, 255, .25);

    --au-pop-bg: #fff;
    --au-pop-ink: #463d70;
    --au-pop-border: #e6e0fb;
    --au-danger: #d62d4f;
    --au-ok: #1f9a6d;
}
body.au-t9 {
    position: relative;
    overflow-x: hidden;
    background:
        radial-gradient(60vmax 60vmax at 100% 0%, rgba(255, 217, 199, .7), rgba(255, 217, 199, 0) 60%),
        radial-gradient(60vmax 60vmax at 0% 100%, rgba(201, 243, 226, .75), rgba(201, 243, 226, 0) 60%),
        radial-gradient(50vmax 50vmax at 60% 60%, rgba(211, 231, 255, .5), rgba(211, 231, 255, 0) 60%),
        var(--au-bg);
    background-attachment: fixed;
}

.ck-defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* =============================================================================
   Khối 3D (cùng công thức với landing page12)
   ============================================================================= */
.ck-ball,
.ck-capsule,
.ck-torus {
    --s1: #e4dbff;
    --s2: #a28bff;
    --s3: #6a4cf0;
    --sd: rgba(106, 76, 240, .42);
    display: block;
}
.ck-ball--violet, .ck-torus--violet { --s1: #e4dbff; --s2: #a28bff; --s3: #6a4cf0; --sd: rgba(106, 76, 240, .42); }
.ck-capsule--coral { --s1: #ffe2d8; --s2: #ff9474; --s3: #ec5530; --sd: rgba(236, 85, 48, .4); }
.ck-torus--mint { --s1: #e9fcf4; --s2: #8ee3c2; --s3: #2fb486; --sd: rgba(47, 180, 134, .4); }
.ck-ball--sky { --s1: #eaf3ff; --s2: #9fc8ff; --s3: #4c88ee; --sd: rgba(76, 136, 238, .4); }
.ck-ball--peach { --s1: #fff1ea; --s2: #ffc3a9; --s3: #f58c64; --sd: rgba(240, 130, 90, .38); }

.ck-ball {
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .96) 0, rgba(255, 255, 255, .55) 7%, rgba(255, 255, 255, 0) 24%),
        radial-gradient(circle at 72% 86%, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 26%),
        radial-gradient(circle at 38% 32%, var(--s1) 0%, var(--s2) 48%, var(--s3) 100%);
    box-shadow: 0 24px 30px -18px var(--sd);
}
.ck-capsule {
    border-radius: 999px;
    background:
        radial-gradient(ellipse 34% 26% at 30% 30%, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0)),
        radial-gradient(ellipse 50% 40% at 70% 90%, rgba(255, 255, 255, .25), rgba(255, 255, 255, 0)),
        linear-gradient(180deg, var(--s1) 0%, var(--s2) 46%, var(--s3) 100%);
    box-shadow: 0 22px 28px -18px var(--sd);
}
.ck-torus {
    position: absolute;
    aspect-ratio: 1;
    filter: drop-shadow(0 16px 14px var(--sd));
}
.ck-torus::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 27% 21%, rgba(255, 255, 255, .95) 0, rgba(255, 255, 255, 0) 17%),
        radial-gradient(circle at 74% 80%, rgba(255, 255, 255, .45) 0, rgba(255, 255, 255, 0) 14%),
        radial-gradient(circle closest-side, var(--s3) 48%, var(--s2) 58%, var(--s1) 72%, var(--s2) 86%, var(--s3) 100%);
    -webkit-mask: radial-gradient(circle closest-side, transparent 47%, #000 49.5%, #000 97.5%, transparent 100%);
    mask: radial-gradient(circle closest-side, transparent 47%, #000 49.5%, #000 97.5%, transparent 100%);
}
.ck-star3d,
.ck-heart3d { display: block; overflow: visible; }
.ck-star3d { filter: drop-shadow(0 14px 12px rgba(214, 150, 10, .38)); }
.ck-heart3d { filter: drop-shadow(0 14px 12px rgba(223, 58, 108, .36)); }
.ck-coin {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .92) 0, rgba(255, 255, 255, 0) 24%),
        radial-gradient(circle at 40% 34%, #fff3b8 0%, #ffd649 46%, #eda817 100%);
    color: #c98a06;
    box-shadow:
        inset 0 0 0 .16em #ffd13f,
        inset 0 0 0 .24em rgba(196, 128, 0, .35),
        0 .2em 0 #d8920f,
        0 .9em 1.1em -.5em rgba(196, 128, 0, .55);
}
.ck-coin svg { width: 46%; height: 46%; }

@keyframes ck-float {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--r0, 0deg)); }
    50% { transform: translate3d(0, var(--fy, -14px), 0) rotate(var(--r1, 6deg)); }
}
@keyframes ck-bob {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -7px, 0); }
}

/* Khối trôi trên nền trang */
.ck-floats {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.ck-floats > * { position: absolute; }
.ck-floats__a { top: 22%; left: -64px; width: 170px; --r1: 0deg; --fy: -18px; animation: ck-float 11s ease-in-out infinite; }
.ck-floats__b { bottom: -34px; left: -30px; width: 130px; --r1: 18deg; animation: ck-float 9s ease-in-out -2s infinite; }
.ck-floats__c { top: 11%; right: 6%; width: 74px; height: 74px; --r0: -10deg; --r1: 10deg; animation: ck-float 7s ease-in-out -1s infinite; }
.ck-floats__d { bottom: 14%; right: -34px; width: 150px; height: 60px; --r0: -32deg; --r1: -22deg; animation: ck-float 10s ease-in-out -4s infinite; }
.ck-floats__e { bottom: 5%; left: 46%; width: 44px; --fy: -10px; animation: ck-float 8s ease-in-out -3s infinite; }
.ck-floats__f { top: 9%; left: 40%; width: 26px; --fy: 10px; animation: ck-float 6s ease-in-out -2s infinite; }

/* =============================================================================
   Khung trang
   ============================================================================= */
.ck-page {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 18px clamp(16px, 4vw, 48px) 22px;
}
.ck-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.ck-top .au-brand {
    padding: 6px 18px 6px 6px;
    border-radius: 999px;
    background: #fff;
    box-shadow:
        0 18px 26px -18px var(--ck-drop),
        inset 0 6px 10px -5px rgba(255, 255, 255, 1),
        inset 0 -7px 12px -6px rgba(124, 92, 255, .22);
    transition: transform .4s var(--ck-bounce);
}
.ck-top .au-brand:hover { transform: translateY(-2px); }
.ck-top .au-brand:has(.au-brand__logo) { padding: 8px 18px; }
.ck-top .au-brand__logo { max-height: 34px; border-radius: 10px; }
.ck-top .au-brand__mark {
    width: 40px;
    height: 40px;
    padding-top: 3px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, 0) 26%),
        radial-gradient(circle at 38% 32%, #b7a3ff 0%, #8164ff 50%, #5a3be8 100%);
    font-family: var(--ck-display);
    font-size: 20px;
    text-shadow: 0 2px 0 rgba(43, 20, 140, .35);
    box-shadow: 0 8px 14px -8px rgba(90, 59, 232, .7);
}
.ck-top .au-brand__name {
    max-width: 260px;
    font-family: var(--ck-display);
    font-size: 18px;
    font-weight: 800;
    line-height: 1.2;
}
.ck-top .lang-picker-row { width: auto; }

.au-t9 .lang-picker,
.au-t9 .lp-menu {
    --lp-bg: #fff;
    --lp-border: #e6e0fb;
    --lp-ink: #2b2350;
    --lp-ink-2: #463d70;
    --lp-muted: #6b6491;
    --lp-hover: #f4f1ff;
    --lp-primary: #5f3ff0;
    --lp-primary-soft: rgba(124, 92, 255, .12);
    font-family: var(--au-font);
}
.au-t9 .lang-picker .lp-btn {
    border-color: transparent;
    border-radius: 999px;
    font-weight: 700;
    box-shadow:
        0 14px 22px -14px var(--ck-drop),
        inset 0 5px 8px -4px rgba(255, 255, 255, 1),
        inset 0 -6px 10px -5px rgba(124, 92, 255, .22);
}
.au-t9 .lp-menu { border-radius: 22px; box-shadow: 0 30px 50px -20px rgba(88, 64, 184, .45); }

.ck-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: 1140px;
    margin: 0 auto;
    padding: 36px 0;
}

/* =============================================================================
   Giới thiệu + minh hoạ
   ============================================================================= */
.ck-intro {
    min-width: 0;
    container-type: inline-size;
}
.ck-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    padding: 6px 18px 6px 6px;
    border-radius: 999px;
    background: #fff;
    color: var(--au-ink);
    font-size: 14.5px;
    font-weight: 800;
    box-shadow:
        0 18px 26px -18px var(--ck-drop),
        inset 0 6px 10px -5px rgba(255, 255, 255, 1),
        inset 0 -7px 12px -6px rgba(124, 92, 255, .22);
}
.ck-chip__dot {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, 0) 30%),
        radial-gradient(circle at 40% 34%, #ffe58a, #ffc93a 55%, #eba514);
    color: #8a5d00;
    box-shadow: 0 6px 10px -5px rgba(214, 156, 18, .7);
}
.ck-chip__dot svg { width: 15px; height: 15px; }

.ck-title {
    margin: 0 0 16px;
    color: var(--au-ink);
    font-family: var(--ck-display);
    font-size: clamp(34px, 4.4vw, 60px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.015em;
    text-wrap: balance;
}
.ck-squish {
    position: relative;
    display: inline-block;
    padding: 0 .12em;
    color: var(--ck-violet-d);
    isolation: isolate;
    animation: ck-squish 1.4s var(--ck-ease) .4s both;
}
.ck-squish::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 48%;
    bottom: 2%;
    z-index: -1;
    border-radius: .4em;
    background: linear-gradient(180deg, #ffe88f, #ffd659);
    box-shadow: inset 0 4px 6px -2px rgba(255, 255, 255, .8), inset 0 -5px 8px -3px rgba(214, 156, 18, .45), 0 10px 16px -10px rgba(214, 156, 18, .7);
    transform: rotate(-1.5deg);
}
@keyframes ck-squish {
    0% { transform: scale(1, 1); }
    18% { transform: scale(1.1, .88) translateY(3px); }
    36% { transform: scale(.94, 1.08) translateY(-6px); }
    54% { transform: scale(1.03, .97); }
    72% { transform: scale(.99, 1.01); }
    100% { transform: scale(1, 1); }
}
.ck-lead {
    max-width: 46ch;
    margin: 0;
    color: var(--au-muted);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.65;
}

/* Sân khấu minh hoạ: đơn vị em, co theo bề rộng cột */
.ck-scene {
    position: relative;
    width: 31em;
    max-width: 100%;
    margin-top: 1.6em;
    padding: 2.6em 3.4em 2.4em 3.2em;
    font-size: 15px;
    font-size: min(16px, 100cqi / 31.5);
    line-height: 1.3;
}
.ck-board {
    position: relative;
    z-index: 2;
    padding: 1.2em 1.3em 1.3em;
    border-radius: 2em;
    background: #fff;
    transform: rotate(-2deg);
    box-shadow:
        0 2em 2.6em -1.8em rgba(88, 64, 184, .55),
        0 .8em 1.2em -.9em rgba(88, 64, 184, .35),
        inset 0 .5em .9em -.4em rgba(255, 255, 255, 1),
        inset 0 -.7em 1.2em -.5em rgba(124, 92, 255, .22);
}
.ck-board__top { display: flex; align-items: center; gap: .7em; }
.ck-board__ava {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.6em;
    height: 2.6em;
    padding-top: .15em;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .9) 0, rgba(255, 255, 255, 0) 28%),
        radial-gradient(circle at 40% 34%, #ffc0a8, #ff8a66 55%, #ee5f39);
    color: #fff;
    font-family: var(--ck-display);
    font-size: 1.1em;
    font-weight: 800;
    text-shadow: 0 2px 0 rgba(150, 40, 10, .3);
    box-shadow: 0 .5em .8em -.4em rgba(236, 85, 48, .7);
}
.ck-board__who { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ck-board__who b {
    overflow: hidden;
    color: var(--au-ink);
    font-family: var(--ck-display);
    font-size: 1.05em;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ck-board__who small { color: var(--au-muted); font-size: .76em; font-weight: 700; }
.ck-board__up {
    display: inline-flex;
    align-items: center;
    gap: .3em;
    flex-shrink: 0;
    margin-left: auto;
    padding: .25em .65em;
    border-radius: 999px;
    background: #cff4e5;
    color: #12744f;
    font-size: .76em;
    font-weight: 800;
}
.ck-board__up svg { width: 1.1em; height: 1.1em; }
.ck-board__num {
    margin: .5em 0 .5em;
    color: var(--au-ink);
    font-family: var(--ck-display);
    font-size: 2.1em;
    font-weight: 800;
    line-height: 1.05;
}
.ck-bars {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .55em;
    align-items: end;
    height: 6.4em;
    padding: .7em .8em .6em;
    border-radius: 1.3em;
    background: #f1edff;
    box-shadow: inset 0 .3em .7em rgba(91, 66, 190, .16), inset 0 -.2em .3em rgba(255, 255, 255, .9);
}
.ck-bars i {
    display: block;
    height: var(--h);
    min-height: 1.3em;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .5) 0 16%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(180deg, #b4a1ff 0%, #8366ff 55%, #6748f2 100%);
    box-shadow: inset 0 -.3em .45em rgba(60, 30, 180, .32), inset 0 .25em .3em rgba(255, 255, 255, .45), 0 .4em .6em -.3em rgba(91, 66, 190, .6);
    transform-origin: 50% 100%;
    animation: ck-grow 1s var(--ck-bounce) both;
    animation-delay: calc(var(--i) * 90ms + 400ms);
}
.ck-bars i.is-hot {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .5) 0 16%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(180deg, #ffb39b 0%, #ff8462 55%, #f2603a 100%);
    box-shadow: inset 0 -.3em .45em rgba(180, 50, 20, .32), inset 0 .25em .3em rgba(255, 255, 255, .45), 0 .4em .7em -.3em rgba(236, 85, 48, .7);
    animation: ck-grow 1s var(--ck-bounce) both, ck-jiggle 3.2s ease-in-out 2.2s infinite;
    animation-delay: calc(var(--i) * 90ms + 400ms), 2.2s;
}
@keyframes ck-grow { from { transform: scaleY(0); } }
@keyframes ck-jiggle {
    0%, 60%, 100% { transform: scale(1, 1); }
    68% { transform: scale(1.12, .9); }
    78% { transform: scale(.94, 1.06); }
    88% { transform: scale(1.02, .98); }
}

.ck-scene__ring { right: .4em; bottom: -.2em; width: 5.6em; --r1: 16deg; animation: ck-float 9s ease-in-out -2s infinite; }
.ck-scene__star { position: absolute; left: .4em; top: .6em; width: 4.2em; height: 4.2em; --r0: -12deg; --r1: 8deg; --fy: -.7em; animation: ck-float 7s ease-in-out infinite; }
.ck-scene__heart { position: absolute; left: .2em; bottom: 3.4em; z-index: 3; width: 4.4em; height: 3.7em; --r0: -10deg; --r1: 6deg; --fy: -.7em; animation: ck-float 7.5s ease-in-out -3s infinite; }
.ck-scene__coin { position: absolute; right: 1.2em; top: 6.4em; z-index: 3; width: 3.8em; --r0: -16deg; --r1: 10deg; --fy: -.6em; animation: ck-float 6.5s ease-in-out -1s infinite; }

.ck-pop {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: .6em;
    padding: .5em 1em .5em .5em;
    border-radius: 999px;
    background: #fff;
    white-space: nowrap;
    box-shadow:
        0 1.4em 2em -1.3em rgba(88, 64, 184, .6),
        inset 0 .45em .7em -.35em rgba(255, 255, 255, 1),
        inset 0 -.55em .9em -.45em rgba(124, 92, 255, .24);
    animation: ck-bob 5.5s ease-in-out infinite;
}
.ck-pop__ic {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.2em;
    height: 2.2em;
    border-radius: 50%;
    color: #fff;
    box-shadow: inset 0 .2em .3em rgba(255, 255, 255, .5), inset 0 -.25em .4em rgba(0, 0, 0, .12);
}
.ck-pop__ic svg { width: 1.05em; height: 1.05em; }
.ck-pop__ic--pink { background: radial-gradient(circle at 36% 30%, #ffa8c9, #ec5c95 70%); }
.ck-pop__ic--mint { background: radial-gradient(circle at 36% 30%, #8ee3c2, #1f9a6d 70%); }
.ck-pop__text { display: flex; flex-direction: column; line-height: 1.2; }
.ck-pop__text b { color: var(--au-ink); font-family: var(--ck-display); font-size: .92em; font-weight: 800; }
.ck-pop__text small { color: var(--au-muted); font-size: .7em; font-weight: 700; }
.ck-pop--like { top: 0; right: 0; animation-delay: -1s; }
.ck-pop--done { left: 1.2em; bottom: 0; animation-delay: -3s; }

.ck-note {
    width: 31em;
    max-width: 100%;
    margin: 4px 0 0;
    color: var(--au-muted);
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
}

/* =============================================================================
   Thẻ form phồng
   ============================================================================= */
.ck-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 28px 30px 30px;
    border-radius: 40px;
    background: #fff;
    box-shadow:
        0 44px 60px -36px rgba(88, 64, 184, .55),
        0 18px 26px -18px rgba(88, 64, 184, .35),
        inset 0 10px 16px -6px rgba(255, 255, 255, 1),
        inset 0 -14px 22px -10px rgba(124, 92, 255, .22);
}
.ck-card__nub {
    position: absolute;
    top: -20px;
    left: 36px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .96) 0, rgba(255, 255, 255, .55) 7%, rgba(255, 255, 255, 0) 24%),
        radial-gradient(circle at 38% 32%, #ffe8f1 0%, #ffa0c6 48%, #e9578f 100%);
    box-shadow: 0 16px 20px -12px rgba(233, 87, 143, .6);
    pointer-events: none;
    animation: ck-float 6s ease-in-out infinite;
    --fy: -8px;
}

/* Tab dạng viên thuốc: rãnh ấn lõm, tab đang chọn phồng lên */
.au-t9 .au-tabs {
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    box-shadow: inset 0 4px 8px rgba(91, 66, 190, .16), inset 0 -2px 3px rgba(255, 255, 255, .95);
}
.au-t9 .au-tabs__item {
    height: 46px;
    padding-top: 3px;
    border-radius: 999px;
    font-family: var(--ck-display);
    font-size: 16.5px;
    font-weight: 700;
    transition: color .2s, background .2s, box-shadow .2s, transform .4s var(--ck-bounce);
}
.au-t9 .au-tabs__item:not(.is-active):hover { color: var(--ck-violet-d); }
.au-t9 .au-tabs__item:active { transform: scale(.96); }

/* Ô nhập ấn lõm */
.au-t9 .au-label { font-weight: 800; font-size: 14.5px; }
.au-t9 .au-control__ic { left: 18px; }
.au-t9 .au-input {
    padding-left: 48px;
    font-weight: 600;
    box-shadow: inset 0 4px 8px rgba(91, 66, 190, .16), inset 0 -2px 3px rgba(255, 255, 255, .95);
}
.au-t9 .au-input::placeholder { font-weight: 500; }
.au-t9 .au-input:focus {
    background: #fbfaff;
    box-shadow: inset 0 3px 6px rgba(91, 66, 190, .12), 0 0 0 4px var(--au-ring);
}
.au-t9 .au-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 100px var(--au-autofill) inset, inset 0 4px 8px rgba(91, 66, 190, .16);
}
.au-t9 .au-eye { right: 7px; border-radius: 50%; }
.au-t9 .au-eye:hover { color: var(--ck-violet-d); background: rgba(124, 92, 255, .1); }

/* Nút mập: nảy khi rê, lún xuống khi nhấn */
.au-t9 .au-btn {
    padding-top: 3px;
    color: var(--au-ink);
    font-family: var(--ck-display);
    font-size: 18px;
    font-weight: 800;
    transition: transform .4s var(--ck-bounce), box-shadow .2s, filter .2s;
}
.au-t9 .au-btn svg { margin-top: -3px; }
.au-t9 .au-btn:hover { filter: brightness(1.03); transform: translateY(-2px) scale(1.015); }
.au-t9 .au-btn:active {
    transform: translateY(2px) scale(.98);
    transition-duration: .08s;
    box-shadow:
        0 6px 10px -8px rgba(232, 90, 52, .6),
        inset 0 6px 12px -2px rgba(176, 52, 18, .42),
        inset 0 -3px 6px -2px rgba(255, 255, 255, .35);
}
.au-t9 .au-btn:focus-visible { outline-color: var(--ck-violet); }
.au-t9 .au-btn:disabled { transform: none; box-shadow: var(--au-btn-shadow); }

.au-t9 .au-link { font-weight: 800; }
.au-t9 .au-link:hover { color: #e2552f; text-decoration: none; }
.au-t9 .au-switch { font-weight: 600; }
.au-t9 .au-try {
    border-radius: 999px;
    background: #f4f1ff;
    color: var(--ck-ink-2);
    font-weight: 600;
    box-shadow: inset 0 3px 6px rgba(91, 66, 190, .12), inset 0 -2px 3px rgba(255, 255, 255, .95);
}
.au-t9 .au-chip-btn {
    height: 32px;
    padding: 2px 14px 0;
    border: 0;
    background: #fff1bd;
    color: #6b4a00;
    font-weight: 800;
    box-shadow: 0 8px 12px -8px rgba(196, 146, 24, .6), inset 0 3px 5px -2px rgba(255, 255, 255, .9), inset 0 -4px 6px -2px rgba(222, 168, 28, .4);
    transition: transform .35s var(--ck-bounce);
}
.au-t9 .au-chip-btn:hover { background: #ffecaa; transform: translateY(-1px); }
.au-t9 .au-chip-btn:active { transform: scale(.95); }
.au-t9 .au-check { color: var(--ck-ink-2); font-weight: 600; }
.au-t9 .au-check__box {
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 8px;
    background: #f2eeff;
    box-shadow: inset 0 3px 5px rgba(91, 66, 190, .2), inset 0 -1px 2px rgba(255, 255, 255, .95);
}
.au-t9 .au-check input { width: 22px; height: 22px; }
.au-t9 .au-check input:checked + .au-check__box {
    background: radial-gradient(circle at 36% 30%, #a58fff, #6c4cf5 75%);
    box-shadow: 0 6px 10px -6px rgba(95, 63, 240, .7), inset 0 2px 3px rgba(255, 255, 255, .45);
}
.au-t9 .au-field--pw .check-password {
    border: 0;
    border-radius: 22px;
    box-shadow: 0 24px 40px -18px rgba(88, 64, 184, .55), inset 0 -6px 10px -6px rgba(124, 92, 255, .2);
}
.au-t9 .re-check-password { font-weight: 700; }

/* Modal OTP */
.au-t9 #modalOTP .modal-content {
    border-radius: 32px;
    box-shadow: 0 40px 70px -24px rgba(43, 35, 80, .45), inset 0 -10px 18px -10px rgba(124, 92, 255, .22);
}
.au-t9 #modalOTP .modal-title { font-family: var(--ck-display); font-size: 19px; font-weight: 800; }
.au-t9 #modalOTP .close { border-radius: 50%; background: #f1edff; color: var(--ck-violet-d); }
.au-t9 #modalOTP .btn-confirm-otp {
    height: 48px;
    padding: 3px 30px 0;
    border-radius: 999px;
    background: var(--au-btn-bg);
    color: var(--au-ink);
    font-family: var(--ck-display);
    font-size: 16px;
    font-weight: 800;
    box-shadow: var(--au-btn-shadow);
}

.ck-foot {
    color: var(--au-muted);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

/* =============================================================================
   Màn nhỏ
   ============================================================================= */
@media (max-width: 960px) {
    .ck-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;
        max-width: 500px;
        padding: 30px 0 34px;
    }
    .ck-intro { text-align: center; }
    .ck-title { font-size: clamp(30px, 8.4vw, 44px); margin-bottom: 12px; }
    .ck-lead { margin: 0 auto; font-size: 15.5px; }
    .ck-scene,
    .ck-note { display: none; }
    .ck-floats__a { top: 30%; width: 110px; left: -58px; }
    .ck-floats__b { width: 80px; left: -18px; bottom: 4%; }
    .ck-floats__c { top: 86px; right: 10px; width: 48px; height: 48px; }
    .ck-floats__d { width: 110px; height: 44px; right: -44px; bottom: 26%; }
    .ck-floats__e { display: none; }
    .ck-floats__f { top: 92px; left: 14px; }
}
@media (max-width: 520px) {
    .ck-page { padding: 14px 16px 20px; }
    .ck-top .au-brand { padding-right: 14px; }
    .ck-top .au-brand__mark { width: 36px; height: 36px; font-size: 18px; }
    .ck-top .au-brand__name { max-width: 150px; font-size: 16.5px; }
    .ck-chip { margin-bottom: 14px; font-size: 13.5px; }
    .ck-card { gap: 18px; padding: 22px 18px 24px; border-radius: 32px; }
    .ck-card__nub { width: 36px; height: 36px; top: -16px; left: 28px; }
    .au-t9 .au-tabs__item { height: 42px; font-size: 15.5px; }
    .au-t9 .area-captcha .g-recaptcha { transform: scale(.9); transform-origin: 50% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ck-floats > *,
    .ck-scene *,
    .ck-squish,
    .ck-card__nub { animation: none !important; }
}