.account-link { display:flex; align-items:center; gap:8px; font-size:.82rem; white-space:nowrap; min-height:44px; }
.account-link svg { width:20px; height:20px; }
.site-header { gap:24px; }
.site-header nav { gap:22px; }
.account-shell { max-width:1250px; width:90%; margin:65px auto; display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.account-story { padding:64px 48px; background:#172d45; color:#fff; display:flex; flex-direction:column; justify-content:center; }
.account-story h1 { font-size:clamp(2.4rem,4vw,4rem); line-height:1.13; letter-spacing:-.04em; margin:20px 0; }
.account-story p { color:#dde6f1; max-width:38ch; line-height:1.8; }
.account-story a { align-self:start; border-bottom:1px solid #8c9db2; padding:12px 0; margin-top:20px; }
.account-form { padding:48px; min-width:0; }
.account-form h2 { font-size:2rem; margin-bottom:12px; }
.account-form label { display:block; margin:20px 0; }
.account-form .muted a { text-decoration:underline; text-underline-offset:3px; }
.account-form small { display:block; font-size:.8rem; font-weight:400; margin-top:8px; }
.account-staff { border-top:1px solid var(--line); margin-top:30px; padding-top:24px; }
.account-staff p { font-size:.85rem; }
.account-staff .button { white-space:normal; text-align:center; }
.account-profile { max-width:1000px; }
.account-profile h1 { overflow-wrap:anywhere; }
.account-profile dt { font-size:.85rem; color:#576c80; margin-top:18px; }
.account-profile dd { margin:4px 0 20px; overflow-wrap:anywhere; }
.account-actions { display:flex; gap:20px; align-items:center; flex-wrap:wrap; }
.admin-tabs form { display:flex; align-items:center; }
@media(max-width:1050px) { .site-header { gap:15px; }.site-header nav { gap:14px; }.account-link span { max-width:90px; white-space:normal; }.account-form,.account-story { padding:32px; } }
@media(max-width:700px) {
    .account-shell { grid-template-columns:1fr; margin:24px auto; }
    .account-story,.account-form { padding:28px 22px; }
    .account-story h1 { font-size:2.3rem; }
    .account-story a { margin-top:0; }
    .account-link { margin-left:auto; gap:4px; font-size:.73rem; }
    .account-link span { max-width:65px; }
    .site-header .bag-link { margin-left:0; }
    .site-header { gap:12px; }
}
.site-header > .wordmark { flex-shrink:0; white-space:nowrap; }
.account-link svg, .site-header .menu-button { flex-shrink:0; }
/* Trang xác thực: giấy xếp lớp, nền vải xanh và ảnh bộ sưu tập UNIT. */
.auth-stage { position:relative; isolation:isolate; overflow:hidden; padding:60px 5%; background:#dce6e9; }
.auth-stage::before { content:''; position:absolute; z-index:-2; inset:-45px; background:linear-gradient(110deg,#d9e5e7a8,#213e53a6),url('/images/unit-campaign.png') 65% center/cover; filter:blur(22px); transform:scale(1.08); }
.auth-stage::after { content:''; position:absolute; z-index:-1; inset:0; background:linear-gradient(125deg,#edf2f0a6,transparent 55%,#0f334948); }
.auth-stage .account-shell { position:relative; width:100%; max-width:1180px; min-height:650px; margin:0 auto; display:grid; grid-template-columns:49% 51%; background:#fcfdfd; border:1px solid #ffffff9c; border-radius:34px; box-shadow:0 28px 70px #16304438; overflow:hidden; }
.auth-stage .account-form { align-self:center; position:relative; z-index:3; padding:48px 40px 48px 60px; }
.auth-eyebrow { font-size:.78rem; color:#567080; margin-bottom:14px; }
.auth-stage .account-form h1 { font-size:clamp(2.5rem,4vw,3.7rem); line-height:1.08; letter-spacing:-.045em; margin-bottom:16px; color:#173745; }
.auth-stage .account-form > .muted { font-size:.85rem; margin-bottom:28px; }
.auth-stage .account-form label { margin:17px 0; font-size:.83rem; color:#2c4755; }
.auth-stage .account-form input { border:1px solid #aabcc5; border-radius:28px; padding:12px 20px; min-height:48px; background:#ffffffbd; color:#173745; box-shadow:inset 0 2px 4px #16304404; }
.auth-stage .account-form input:focus { border-color:#176587; }
.auth-stage .account-form .button { border-radius:28px; background:#204958; border-color:#204958; min-height:48px; box-shadow:0 5px 12px #183b4b15; }
.auth-stage .account-form .button:hover { background:#153a49; }
.auth-stage .account-form .button.secondary { background:transparent; color:#204958; border-color:#b8c9d0; box-shadow:none; }
.auth-stage .account-form form>.button { margin-top:10px; }
.auth-stage .account-staff { text-align:center; padding-top:22px; margin-top:26px; font-size:.82rem; }
.auth-stage .account-staff p { font-size:.78rem; margin:8px 0 14px; }
.auth-note { text-align:center; font-size:.78rem; color:#58707e; margin:18px 0 0; }
.auth-visual { position:relative; min-width:0; background:#173745; min-height:650px; overflow:hidden; }
.auth-visual-media { position:absolute; inset:0; }
.auth-visual-media>img { width:100%; height:100%; object-fit:cover; object-position:78% center; }
.auth-visual::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#0d304b10 32%,#0e2d4670 64%,#092537f5 100%); }
.auth-paper { position:absolute; z-index:2; left:-1px; top:-1px; width:155px; height:calc(100% + 2px); pointer-events:none; filter:drop-shadow(12px 1px 10px #0c25304d); }
.auth-visual-copy { position:absolute; z-index:3; left:32%; right:22px; bottom:42px; color:white; pointer-events:none; }
.auth-brand { font-size:1.55rem; letter-spacing:-.065em; font-weight:700; }
.auth-brand>span { font-size:.65rem; vertical-align:super; padding-left:3px; }
.auth-visual-copy>p { font-size:clamp(2rem,3vw,3rem); font-weight:500; line-height:1.12; letter-spacing:-.04em; margin:15px 0; }
.auth-visual-caption { font-size:.73rem; color:#ddeaf0; }
.auth-film { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#173745; }
.auth-visual-video .auth-paper { width:85px; height:calc(100% - 75px); }
.auth-visual-video::after { display:none; }
.auth-visual-video .auth-visual-copy { bottom:auto; top:30px; padding:16px; border-radius:14px; background:#0e2d469e; }
.auth-visual-video .auth-visual-copy>p { font-size:1.7rem; }
.auth-visual .video-load-error { position:absolute; z-index:4; left:15%; right:12px; bottom:80px; color:white; background:#173745; padding:12px; font-size:.8rem; }
.auth-password { position:relative; }
.auth-password input { padding-right:60px !important; }
.auth-password-toggle { position:absolute; right:6px; top:3px; height:42px; width:44px; border:0; border-radius:50%; color:#436574; background:transparent; display:grid; place-items:center; }
.auth-password-toggle:hover { background:#dce8ec; }
.auth-password-toggle svg { width:19px; height:19px; }
@media(max-width:1000px) { .auth-stage { padding:38px 4%; }.auth-stage .account-form { padding:36px 25px 36px 35px; }.auth-paper { width:115px; }.auth-visual-copy { left:27%; } }
@media(max-width:700px) {
    .auth-stage { padding:28px 5% 36px; }
    .auth-stage .account-shell { display:flex; flex-direction:column; border-radius:26px; min-height:0; background:transparent; }
    .auth-visual { order:-1; min-height:260px; width:100%; }
    .auth-visual-media>img { object-position:76% 36%; }
    .auth-paper { display:none; }
    .auth-visual-copy { left:24px; bottom:52px; right:45%; }
    .auth-brand { font-size:1.3rem; }.auth-visual-copy>p { font-size:1.65rem; margin:10px 0; }.auth-visual-caption { font-size:.65rem; }
    .auth-stage .account-form { align-self:stretch; padding:30px 24px; margin-top:-28px; background:#fcfdfdf5; backdrop-filter:blur(14px); border-radius:28px 28px 0 0; box-shadow:0 -12px 28px #0d273528; }
    .auth-stage .account-form h1 { font-size:2.25rem; }.auth-stage .account-staff .button { width:100%; font-size:.75rem; }
    .auth-visual-video { min-height:260px; }
    .auth-visual-video + .account-form { margin-top:0; }
    .account-shell:has(.auth-visual-video) .account-form { margin-top:0; }
    .auth-visual-video .auth-visual-copy { top:15px; left:15px; bottom:auto; right:auto; padding:10px; }
    .auth-visual-video .auth-visual-copy>p { font-size:1.2rem; }.auth-visual-video .auth-visual-caption { display:none; }
}
@media(prefers-reduced-motion:reduce) { .auth-stage *, .auth-stage *::before, .auth-stage *::after { transition:none; animation:none; } }
.auth-recovery h1 { font-size: clamp(2.2rem, 4vw, 3.5rem); }
.auth-recovery .muted strong { overflow-wrap: anywhere; }
.auth-recovery .recovery-code { letter-spacing: .35em; font-size: 1.4rem; font-weight: 700; }
.auth-recovery .recovery-hint { color: var(--muted); font-size: .8rem; line-height: 1.7; }
.auth-recovery .recovery-resend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 18px; font-size: .85rem; }
.auth-recovery .recovery-resend .text-button { min-height: 44px; color: var(--blue); font-size: .85rem; }