/* Hallmark · shape: app screen · genre: modern-minimal · theme: brand · redesign: full
 * paper: oklch(98.5% 0.004 150) · accent: oklch(50% 0.13 148) · display: Be Vietnam Pro · body: Be Vietnam Pro
 * nav: kept (main/header.php) · signature: the sign-in panel that turns into the OTP + new-password step in place · states: default, error, info, success, busy
 * axes: light/grotesk-sans/chromatic-green · posture: panel beside help · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H3 E4 S3 R4 V3 · weakest: S, the shell is the site's Bootstrap header, so the screen carries itself with one panel and quiet help beside it */
/* Hallmark · waive 49b · register.php "Thêm thông tin" list · the links are full-sentence list items kept verbatim from the old page */
/* base.css is not imported: its global .container, h1 and img rules would restyle the Bootstrap shell, so the same rules are scoped under .auth below */

:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.2rem; --text-xl: 1.44rem; --text-2xl: 1.728rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms; --dur-short: 220ms;
  --gutter: 24px;
  --color-paper: oklch(98.5% 0.004 150); --color-paper-2: oklch(96.2% 0.007 150); --color-paper-3: oklch(93.5% 0.009 150);
  --color-surface: oklch(100% 0 0);
  --color-ink: oklch(24% 0.015 160); --color-ink-2: oklch(40% 0.015 160); --color-muted: oklch(52% 0.012 160);
  --color-rule: oklch(90% 0.008 150);
  --color-accent: oklch(50% 0.13 148); --color-accent-2: oklch(44% 0.12 148); --color-accent-bright: oklch(80% 0.17 148); --color-accent-ink: oklch(99% 0 0);
  --color-focus: oklch(42% 0.14 255);
  --color-error: oklch(52% 0.19 27); --color-error-wash: oklch(97% 0.02 27);
  --color-success: oklch(48% 0.12 150); --color-success-wash: oklch(97% 0.025 150);
  --font-body: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif; --font-display: var(--font-body);
  --radius-card: 12px; --radius-input: 8px; --rule-hair: 1px;
}

html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); }
body.auth-page { background: var(--color-paper); }

/* The kept shell (main/header.php, main/footer.php), only on these screens: ring and contrast */
.auth-page .navbar :focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: 2px; }
.auth-page .navbar-brand b { color: var(--color-accent-bright) !important; }
.auth-page footer a { color: var(--color-accent-2); }

/* Base, scoped to the screen */
.auth { color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); padding-block: var(--space-xl) var(--space-2xl); }
.auth *, .auth *::before, .auth *::after { box-sizing: border-box; }
.auth ::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
.auth :focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.auth a { color: var(--color-accent-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
.auth a:hover { color: var(--color-ink); }
.auth h1, .auth h2, .auth h3 { margin: 0; font-family: var(--font-display); font-weight: 600; color: var(--color-ink); letter-spacing: -0.01em; line-height: 1.2; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
.auth h1 { font-size: var(--text-2xl); }
.auth h2 { font-size: var(--text-lg); }
.auth h3 { font-size: var(--text-md); }
.auth p { margin: 0; text-wrap: pretty; }
.auth b, .auth strong { font-weight: 600; }
.auth ul { margin: 0; padding-left: 1.25em; }
.auth li + li { margin-top: var(--space-2xs); }
.auth img { max-width: 100%; height: auto; display: block; }

/* Layout */
.auth__wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); align-items: start; }
@media (min-width: 60rem) {
  .auth__wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: var(--space-2xl); }
  .auth__wrap--register { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
  .auth__panel--sticky { position: sticky; top: var(--space-lg); }
  .auth__only-narrow { display: none !important; }
}
@media (max-width: 40rem) { :root { --gutter: 16px; } .auth { padding-block: var(--space-lg) var(--space-xl); } }

.auth__panel { background: var(--color-surface); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); padding: var(--space-xl); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
@media (max-width: 40rem) { .auth__panel { padding: var(--space-lg) var(--space-md); } }
.auth__head { display: grid; gap: var(--space-xs); }
.auth__lead { color: var(--color-ink-2); }
.auth__notices { display: grid; gap: var(--space-sm); }
.auth__notices:not(:has(*)) { display: none; }

.auth__side { display: grid; gap: var(--space-xl); }
.auth__block { display: grid; gap: var(--space-sm); }
.auth__block + .auth__block { padding-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.auth__note { font-size: var(--text-sm); color: var(--color-ink-2); }
.auth__figure { margin: 0; border-radius: var(--radius-card); overflow: hidden; outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.auth__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

/* Notices: one component, the message carries the state, never colour alone */
.notice { display: grid; gap: var(--space-xs); padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-left-width: 4px; border-radius: var(--radius-input); background: var(--color-paper-2); color: var(--color-ink); font-size: var(--text-sm); }
.notice strong:first-child { font-size: var(--text-md); }
.notice--error { border-color: var(--color-error); background: var(--color-error-wash); }
.notice--success { border-color: var(--color-success); background: var(--color-success-wash); }

/* Fields */
.auth-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
.field { display: grid; gap: var(--space-2xs); }
.field__label { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink); }
.field__control { position: relative; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.field__input { flex: 1 1 10rem; min-width: 0; min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-surface); color: var(--color-ink); font: inherit; outline: 2px solid transparent; outline-offset: -3px; transition: background-color var(--dur-short) var(--ease-out); }
.field__input::placeholder { color: var(--color-muted); }
.field__input:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink-2); }
.field__input[aria-invalid="true"] { border-color: var(--color-error); }
.field__input:disabled { opacity: 0.55; cursor: not-allowed; }
@media (hover: hover) { .field__input:hover:not(:focus-visible) { background: var(--color-paper-2); } }
.field__input--slot { padding-right: 6.5rem; }
.field__slot { position: absolute; top: 50%; right: var(--space-2xs); transform: translateY(-50%); }
.field__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.field__help--error { color: var(--color-error); }
.field--hidden { display: none; }

/* Controls, eight states */
.auth-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent); border-radius: var(--radius-input); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.auth a.auth-btn { color: var(--color-accent-ink); text-decoration: none; }
.auth-btn--block { width: 100%; }
.auth-btn:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
.auth-btn:active { transform: translateY(1px); }
.auth-btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.auth-btn:disabled, .auth-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.auth-btn[aria-busy="true"] { cursor: progress; opacity: 0.8; }
.auth-btn--quiet, .auth a.auth-btn--quiet { background: transparent; color: var(--color-ink); border-color: var(--color-muted); }
.auth-btn--quiet:hover, .auth a.auth-btn--quiet:hover { background: var(--color-paper-2); color: var(--color-ink); border-color: var(--color-ink-2); }
.auth-btn--small { min-height: 40px; padding: 0 var(--space-md); font-size: var(--text-sm); font-weight: 500; }
.auth-btn--slot { position: relative; min-height: 36px; padding: 0 var(--space-sm); font-size: var(--text-sm); font-weight: 500; background: transparent; color: var(--color-ink-2); border-color: transparent; }
.auth-btn--slot::before { content: ""; position: absolute; inset: -4px; }
.auth-btn--slot:hover { background: var(--color-paper-2); color: var(--color-ink); border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .auth-btn, .field__input { transition: none; }
  .auth-btn:active { transform: none; }
}