/* ==========================================================================
   Tơ Hồng sign-in page (/dang-nhap, /dang-ky), on top of the app's base styles and v3 tokens.
   The card sits beside the story (thread visual, promises); phones get one column with the card first.
   ========================================================================== */
.auth-shell{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;max-width:1180px;margin:0 auto;padding:22px clamp(16px,4vw,40px) 40px}
.auth-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.auth-brand{display:flex;align-items:center;margin:0;color:inherit;text-decoration:none}
.auth-home{padding:8px 2px;color:var(--muted);font-size:14px;font-weight:500;text-decoration:none;transition:color .2s}
.auth-home:hover{color:#ffb3c7}
.auth-main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);grid-template-areas:"story card";gap:clamp(32px,6vw,88px);align-items:center;padding-block:clamp(24px,5vh,56px) 8px}

/* The card */
.auth-card{grid-area:card;position:relative;padding:32px 34px 26px;border:1px solid var(--line-strong);border-radius:28px;background:radial-gradient(420px 220px at 100% 0%,rgba(255,77,125,.14),transparent 70%),linear-gradient(180deg,rgba(255,236,242,.06),rgba(255,236,242,.02)),#1a1017;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--lift)}
.auth-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:28px;padding:4px;border:1px solid var(--line);border-radius:14px;background:rgba(10,4,8,.45)}
.auth-tabs a{display:flex;align-items:center;justify-content:center;min-height:40px;border-radius:10px;color:var(--muted);font-size:14px;font-weight:600;text-decoration:none;transition:background .2s,color .2s,box-shadow .2s}
.auth-tabs a:hover{background:rgba(255,236,242,.05);color:var(--ink)}
.auth-tabs a[aria-current="page"]{background:linear-gradient(135deg,rgba(255,77,125,.3),rgba(255,180,142,.14));color:#fff;box-shadow:inset 0 0 0 1px rgba(255,120,150,.45)}
.auth-card .eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.auth-card .eyebrow::before{content:"";flex:0 0 22px;height:2px;border-radius:2px;background:var(--brand)}
.auth-card h1{font-size:clamp(30px,3.4vw,38px);font-weight:700;line-height:1.18;letter-spacing:-.03em}
/* Gradient text is painted only inside its box, so the padding keeps Vietnamese stacked marks (ợ, ồ) whole. */
.auth-card h1 em{padding:.12em .08em .16em 0;background:linear-gradient(120deg,#ffd1dd 0%,#ff8fb0 45%,#ffb48e 100%);-webkit-background-clip:text;background-clip:text;color:transparent;font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.auth-lead{margin-top:12px;color:var(--muted);font-size:15px;line-height:1.65}
.auth-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-bottom:18px;padding:10px 14px;border:1px solid rgba(111,220,178,.3);border-radius:12px;background:rgba(111,220,178,.07);color:#c8f5e3;font-size:13.5px;line-height:1.5}
.auth-banner a{color:#8ff0c8;font-weight:600;text-decoration:none}
.auth-banner a:hover{text-decoration:underline}
.auth-error{margin-top:18px;padding:11px 14px;border:1px solid rgba(255,107,129,.45);border-radius:12px;background:rgba(255,77,125,.1);color:#ffd0dc;font-size:14px;line-height:1.5}
.auth-note{margin-top:22px;padding:12px 14px;border:1px dashed var(--line-strong);border-radius:12px;color:var(--muted);font-size:14px;line-height:1.55}

/* Forms: Google's button keeps Google's own look (white, the four-colour G). */
.auth-form{display:grid;gap:16px;margin-top:24px}
.auth-facts{display:grid;gap:9px;margin:0;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,236,242,.03);list-style:none}
.auth-facts li{position:relative;padding-left:24px;color:var(--muted);font-size:13.5px;line-height:1.5}
.auth-facts li::before{content:"";position:absolute;top:.4em;left:2px;width:11px;height:6px;border-bottom:2px solid var(--green);border-left:2px solid var(--green);transform:rotate(-45deg)}
.auth-check{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:14px;background:rgba(10,4,8,.35);color:var(--ink);font-size:14px;line-height:1.5;cursor:pointer;transition:border-color .2s,background .2s}
.auth-check:hover{border-color:rgba(255,120,150,.45)}
.auth-check:has(input:checked){border-color:rgba(255,77,125,.6);background:rgba(255,77,125,.08)}
.auth-check input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:#ff4d7d;cursor:pointer}
.google-button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:52px;padding:12px 20px;border:1px solid #dadce0;border-radius:999px;background:#fff;color:#1f1f1f;font-size:15.5px;font-weight:600;letter-spacing:0;box-shadow:0 10px 28px rgba(0,0,0,.3);transition:background .15s,box-shadow .2s,transform .15s}
.google-button:hover{background:#f6f7f9;box-shadow:0 12px 32px rgba(255,77,125,.24)}
.google-button:active{transform:translateY(1px)}
.google-button:focus-visible{outline:3px solid #ff8fb0;outline-offset:3px}
.google-mark{flex:0 0 auto;width:20px;height:20px}
.auth-divider{display:flex;align-items:center;gap:14px;margin-top:22px;color:var(--muted-2);font-size:12.5px}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:var(--line-strong)}
.auth-card .auth-alt,.auth-card .auth-create{justify-content:center;gap:8px;max-width:none;min-height:50px;margin:0;border-radius:999px;font-size:14.5px;text-decoration:none}
.auth-card .auth-alt{margin-top:14px}
.auth-switch{margin-top:18px;color:var(--muted);font-size:14px;text-align:center}
.auth-switch a{color:#ffb3c7;font-weight:600;text-decoration:none}
.auth-switch a:hover{text-decoration:underline}
.auth-fine{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted-2);font-size:12.5px;line-height:1.6;text-align:center}

/* The story beside the card */
.auth-story{grid-area:story;display:grid;justify-items:start;gap:26px;min-width:0}
.auth-story .auth-visual{max-width:340px}
.auth-quote{font-size:clamp(28px,3.3vw,44px);font-weight:700;line-height:1.16;letter-spacing:-.03em}
.auth-quote em{color:#ff8fb0;font-family:var(--font-display);font-weight:500;letter-spacing:-.01em}
.auth-points{display:grid;gap:16px;max-width:460px;margin:0;padding:0;list-style:none}
.auth-points li{display:flex;align-items:flex-start;gap:14px}
.auth-points span{display:grid;flex:0 0 auto;place-items:center;width:34px;height:34px;border:1px solid rgba(255,77,125,.35);border-radius:50%;background:rgba(255,77,125,.08);color:#ffb3c7;font:500 12px 'DM Mono',monospace}
.auth-points strong{display:block;font-size:15px;font-weight:600}
.auth-points p{margin-top:3px;color:var(--muted);font-size:14px;line-height:1.55}

@media(max-width:900px){
  .auth-main{grid-template-columns:minmax(0,1fr);grid-template-areas:"card" "story";justify-items:center;gap:36px;padding-top:26px}
  .auth-card,.auth-story{width:100%;max-width:520px}
  .auth-story .auth-visual{display:none}
  .auth-quote{font-size:30px}
}
@media(max-width:480px){
  .auth-shell{padding-top:14px;padding-bottom:28px}
  .auth-top .brand-logo{width:34px;height:34px}
  .auth-top .brand-name{font-size:23px}
  .auth-top .brand-caption{display:none}
  .auth-main{padding-top:18px}
  .auth-card{padding:24px 18px 20px;border-radius:22px}
  .auth-card h1{font-size:29px}
  .auth-tabs{margin-bottom:22px}
  .google-button{font-size:15px}
}