/* Auth pages — direction "Khối màu" (flat colour block).
 *
 * This is the ONLY stylesheet the three auth pages load, deliberately:
 * register-enhanced.css and components.css between them supplied 51px inputs
 * with 8px radii and a #007bff focus ring, which is what made the page read as
 * assembled rather than designed. Everything those files provided is restated
 * here, once, in one scale.
 *
 * House rules for this design: radius 0 everywhere, no box-shadow, no gradient,
 * no translucency. Emphasis comes from size, weight and flat colour only.
 */

/* ── type ─────────────────────────────────────────────────────────────── */
/* Be Vietnam Pro is drawn for Vietnamese: at 100px the tone marks sit clear of
   the cap height, where Inter and Roboto collide them. Self-hosted rather than
   pulled from Google so no visitor's IP leaves for a font. */
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/bvp-400-vietnamese.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/bvp-400-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/bvp-600-vietnamese.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/bvp-600-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;
  src:url(../fonts/bvp-800-vietnamese.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';font-style:normal;font-weight:800;font-display:swap;
  src:url(../fonts/bvp-800-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ink:#0a0a0a;
  --paper:#fff;
  --dim:#6b7280;
  --lab:#9aa1ab;
  --bad:#d62b1f;
  --ok:#0f7a4a;
  --font:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.auth{
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.auth-wrap{display:grid;grid-template-columns:1fr;min-height:100vh}
@media (min-width:900px){ .auth-wrap{grid-template-columns:48% 52%} }

/* ── the colour block ─────────────────────────────────────────────────── */
.ap{
  display:none;
  padding:34px 38px;
  color:#fff;
  flex-direction:column;
  /* The colour is the design; give it time to be noticed changing. */
  transition:background-color .55s ease;
}
@media (min-width:900px){ .ap{display:flex} }

.ap-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.ap-brand{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.72)}
.ap-back{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.72);text-decoration:none;white-space:nowrap}
.ap-back:hover{color:#fff}

.ap-stage{position:relative;flex:1;margin-top:auto;min-height:250px}
.ap-slide{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;
  color:#fff;text-decoration:none;
  opacity:0;pointer-events:none;
  transition:opacity .26s ease;
}
.ap-slide.is-on{opacity:1;pointer-events:auto;transition:opacity .38s ease .16s}
.ap-num{font-size:104px;line-height:.84;font-weight:800;letter-spacing:-.055em;
  font-variant-numeric:tabular-nums}
.ap-h{font-size:27px;line-height:1.08;font-weight:800;letter-spacing:-.035em;margin-top:16px}
.ap-p{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.86);margin-top:9px;max-width:34ch}
.ap-slide:hover .ap-h{text-decoration:underline;text-underline-offset:4px}

.ap-tabs{display:flex;margin-top:26px;border-top:1px solid rgba(255,255,255,.32)}
.ap-tab{
  flex:1;background:none;border:0;border-top:3px solid transparent;margin-top:-2px;
  padding:11px 4px 0;font-family:inherit;font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.55);
  cursor:pointer;text-align:left;white-space:nowrap;
}
.ap-tab.is-on{color:#fff;border-top-color:#fff}
.ap-tab:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ── the phone band ───────────────────────────────────────────────────── */
.apm{display:block;padding:20px 22px 24px;color:#fff;transition:background-color .55s ease}
@media (min-width:900px){ .apm{display:none} }
.apm-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.apm-brand{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:rgba(255,255,255,.75)}
.apm-x{color:rgba(255,255,255,.8);text-decoration:none;font-size:17px;line-height:1;padding:2px 4px}
.apm-num{font-size:60px;line-height:.88;font-weight:800;letter-spacing:-.05em;margin-top:16px;
  font-variant-numeric:tabular-nums}
.apm-h{font-size:15.5px;font-weight:700;margin-top:6px;letter-spacing:-.01em}

/* ── the form side ────────────────────────────────────────────────────── */
.auth-form-col{display:flex;justify-content:center;padding:34px 22px 46px;
  /* Top-aligned on phones: the coloured band already occupies the top of the
     screen, and centring the form in what is left stranded it 230px below. */
  align-items:flex-start}
@media (min-width:900px){ .auth-form-col{padding:40px 56px;align-items:center} }
.auth-form{width:100%;max-width:420px}

.auth-h{font-size:34px;line-height:1;letter-spacing:-.045em;font-weight:800;margin:0 0 8px}
@media (min-width:900px){ .auth-h{font-size:40px} }
.auth-sub{font-size:14.5px;color:var(--dim);margin:0 0 30px;line-height:1.5}

.f{margin-bottom:17px}
/* Explicit line-height, so the label block is exactly 16px and the input top
   edge lands at a predictable 23px — the reveal button is positioned off that. */
.f label,.f .lab{display:block;font-size:11px;line-height:16px;letter-spacing:.13em;
  text-transform:uppercase;font-weight:700;color:var(--lab);margin-bottom:7px}
.f input,.f select{
  width:100%;
  border:2px solid var(--ink);
  border-radius:0;
  background:var(--paper);
  color:var(--ink);
  font-family:inherit;
  /* 16px: below that iOS zooms the viewport on focus. */
  font-size:16px;
  font-weight:500;
  padding:13px 15px;
  height:50px;
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
}
.f input::placeholder{color:#b6bcc4;font-weight:400}
.f input:focus,.f select:focus{outline:3px solid var(--ink);outline-offset:2px;border-color:var(--ink)}
.f select{
  padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='3' stroke-linecap='square'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}

.f-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){ .f-two{grid-template-columns:1fr;gap:0} }

/* password reveal sits inside the box, flush right */
.f-pw{position:relative}
.f-pw input{padding-right:52px}
.f-pw button{
  /* Measured from the TOP, never the bottom: an error message renders below the
     input, so a bottom-anchored button drifts down with it. label(16) +
     margin(7) + border(2) = 25. */
  position:absolute;right:2px;top:25px;height:46px;width:48px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:var(--ink);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  font-family:inherit;
}
.f-pw button:hover{background:#f2f2f2}

/* ── errors ───────────────────────────────────────────────────────────── */
/* Beside the field that is wrong, not in a banner at the top of the page
   where a phone can scroll it out of sight. */
.f.bad input{border-color:var(--bad)}
.f-err{display:block;font-size:12.5px;line-height:1.45;color:var(--bad);margin-top:7px;font-weight:600}

.note{border:2px solid var(--ink);padding:14px 16px;margin-bottom:22px;font-size:13.5px;
  line-height:1.5;font-weight:500}
.note.ok{border-color:var(--ok);color:var(--ok)}
.note.bad{border-color:var(--bad);color:var(--bad)}

/* ── controls ─────────────────────────────────────────────────────────── */
.btn{
  display:block;width:100%;
  background:var(--ink);color:var(--paper);
  border:2px solid var(--ink);border-radius:0;
  font-family:inherit;font-size:15.5px;font-weight:800;letter-spacing:-.005em;
  padding:16px;cursor:pointer;text-align:center;text-decoration:none;
}
.btn:hover{background:#252525;border-color:#252525}
.btn:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.btn-ghost{background:var(--paper);color:var(--ink)}
.btn-ghost:hover{background:#f2f2f2}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){ .btn-row{grid-template-columns:1fr} }

/* checkbox: a hard square that fills in solid */
/* .check is a <label>, so inside a .f wrapper it inherits the uppercase 11px
   field-label rule and turns into small caps with no visible box. Matched at
   equal-or-higher specificity so it wins wherever it is nested. */
.check,
.f label.check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:13.5px;
  color:var(--ink);font-weight:500;line-height:1.4;text-transform:none;letter-spacing:0;
  margin-bottom:0}
.check input{position:absolute;opacity:0;width:18px;height:18px;margin:0}
.check .box{flex:0 0 auto;width:18px;height:18px;border:2px solid var(--ink);background:var(--paper);
  margin-top:1px;position:relative}
.check .box::after{content:"";position:absolute;left:4px;top:0;width:5px;height:10px;
  border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg) scale(0)}
.check input:checked ~ .box{background:var(--ink)}
.check input:checked ~ .box::after{transform:rotate(45deg) scale(1)}
.check input:focus-visible ~ .box{outline:3px solid var(--ink);outline-offset:2px}
.check a{color:var(--ink);font-weight:700;text-decoration:none;border-bottom:2px solid var(--ink)}

.opts{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 18px}
.link{background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;
  border-bottom:2px solid var(--ink);white-space:nowrap}
.link:hover{color:var(--dim);border-color:var(--dim)}

.foot{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  margin-top:18px;font-size:13px;color:var(--dim);flex-wrap:wrap}

.hint{font-size:12.5px;color:var(--dim);margin-top:8px;line-height:1.5}

@media (prefers-reduced-motion:reduce){
  .ap,.apm,.ap-slide{transition:none}
}

/* ── register, 'new' arm only ─────────────────────────────────────────────
   The two things that differ between the arms of the register experiment. */
.rg-gets{list-style:none;margin:0 0 26px;padding:16px 18px;border:2px solid var(--ink,#0a0a0a)}
.rg-gets li{font-size:13.5px;font-weight:600;line-height:1.45;color:var(--ink,#0a0a0a);
  padding:6px 0 6px 20px;position:relative}
/* A drawn mark, not an emoji or an icon font: this page loads neither. */
.rg-gets li::before{content:'';position:absolute;left:0;top:12px;width:9px;height:2px;
  background:var(--ink,#0a0a0a)}

.rg-str{margin-top:9px}
.rg-str[hidden]{display:none}
.rg-str-bar{height:4px;background:#e6e6e6;border-radius:0;overflow:hidden}
.rg-str-bar span{display:block;height:100%;width:0;background:#0a0a0a;transition:width .18s}
.rg-str-bar span.w0{width:12%;background:#c0392b}
.rg-str-bar span.w1{width:32%;background:#c0392b}
.rg-str-bar span.w2{width:56%;background:#d08700}
.rg-str-bar span.w3{width:80%;background:#0f7a4a}
.rg-str-bar span.w4{width:100%;background:#0f7a4a}
.rg-str-t{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--dim,#6b7280);margin-top:5px}