/* ══════════════════════════════════════════════════════════════════════════════
   CỬA VÀO — kiểu dáng dùng chung cho ĐĂNG NHẬP · ĐĂNG KÝ · ĐẶT LẠI MẬT KHẨU · XÁC MINH EMAIL
   ══════════════════════════════════════════════════════════════════════════════

   🔴 VÌ SAO TÁCH RA — 25/08/2026.
   Trước đây mỗi cửa vào tự khai lại toàn bộ màu, bo góc, cỡ chữ trong thẻ `<style>` của
   chính nó. Ba trang, ba bản chép tay, và chúng ĐÃ lệch nhau thật. Nên sửa bằng cách bỏ hẳn
   chỗ để lệch: một tệp, mọi cửa vào cùng đọc. Ai thêm cửa vào mới thì `<link>` tệp này, đừng chép.

   🔴 28/09/2026 (Luồng B · UI-1) — CHỈ DÙNG TOKEN `--gu-*` / `--status-*` CỦA `genup-mau.css`.
   Bản trước khai bộ màu riêng (`--den`, `--tx`…) bằng mã hex ⇒ nút đổi nền sáng/tối của
   `genup-ui.js` đổi `data-theme` mà cửa vào vẫn đen: một NÚT CHẾT ngay ở cửa đầu tiên khách gặp.
   Nay mọi màu trỏ vào token hai chế độ; cỡ chữ theo vai trò (DEC-20260922-023). */

:root{
  --cv-rong:430px;
  --cv-vet: radial-gradient(ellipse at center, color-mix(in srgb, var(--genup-red) 22%, transparent),
    color-mix(in srgb, var(--genup-blue-2) 8%, transparent) 44%, transparent 70%);
}
:root[data-theme="light"]{
  --cv-vet: radial-gradient(ellipse at center, color-mix(in srgb, var(--genup-red) 9%, transparent),
    color-mix(in srgb, var(--genup-blue-2) 6%, transparent) 44%, transparent 70%);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--gu-surface-0);color:var(--gu-text-2);font-family:var(--gu-font-body);
  font-size:var(--gu-fs-than);line-height:var(--gu-lh-body);-webkit-font-smoothing:antialiased;
  display:grid;place-items:center;padding:var(--gu-sp-6) var(--gu-sp-4)}
a{color:inherit;text-decoration:none}

/* Vệt đỏ mờ phía sau — cùng ngôn ngữ với trang bìa, không để cửa vào trơ trọi. */
body:before{content:"";position:fixed;left:50%;top:-160px;width:760px;height:520px;max-width:100vw;
  transform:translateX(-50%);pointer-events:none;z-index:0;background:var(--cv-vet)}

.hop{position:relative;z-index:1;width:min(var(--cv-rong),100%);background:var(--gu-surface-1);
  border:0;border-radius:var(--gu-radius-lg);box-shadow:var(--gu-shadow-2);
  padding:var(--gu-sp-8) var(--gu-sp-8) var(--gu-sp-6);max-height:calc(100vh - 48px);overflow-y:auto}

/* Logo: bản chữ TRẮNG cho nền tối, bản chữ ĐEN cho nền sáng — một cặp, đổi theo `data-theme`. */
.lg{display:block;height:40px;width:auto;margin:0 auto var(--gu-sp-2)}
.lg--sang{display:none}
:root[data-theme="light"] .lg--toi{display:none}
:root[data-theme="light"] .lg--sang{display:block}

.os{text-align:center;font-size:var(--gu-fs-nhan);font-weight:var(--gu-fw-strong);letter-spacing:var(--gu-ls-eyebrow);
  color:var(--gu-text-mut);margin-bottom:var(--gu-sp-5)}
/* Nút 🌐 ở cửa vào: căn giữa, nằm giữa dòng "AI BUSINESS OS" và hai cửa. */
.nn-o{display:flex;justify-content:center;margin:calc(var(--gu-sp-3) * -1) 0 var(--gu-sp-4);min-height:30px}

h1{margin:0 0 var(--gu-sp-1);font-family:var(--gu-font-body);font-size:var(--gu-fs-trang);font-weight:var(--gu-fw-strong);line-height:var(--gu-lh-tieu-de);
  color:var(--gu-text);letter-spacing:-.01em;text-align:center;text-wrap:balance}
.phu{margin:0 0 var(--gu-sp-6);font-size:var(--gu-fs-mo-ta);color:var(--gu-text-mut);text-align:center;text-wrap:pretty}

/* ── HAI CỬA NẰM CẠNH NHAU ──────────────────────────────────────────────────────
   Chủ dự án 25/08/2026: *"luôn luôn phải có đăng ký cạnh bên đăng nhập vì không phải ai
   cũng có đăng ký rồi"*. Đưa lên đầu, ngang hàng, cùng cỡ chữ. */
.cua{display:grid;grid-template-columns:1fr 1fr;gap:var(--gu-sp-1);background:var(--gu-surface-2);
  border:1px solid var(--gu-border);border-radius:var(--gu-radius-md);padding:var(--gu-sp-1);margin-bottom:var(--gu-sp-6)}
.cua a{display:block;text-align:center;padding:var(--gu-sp-2) var(--gu-sp-3);border-radius:var(--gu-radius-sm);
  font-size:var(--gu-fs-mo-ta);font-weight:var(--gu-fw-strong);color:var(--gu-text-mut);
  transition:background var(--gu-dur-1) var(--gu-ease),color var(--gu-dur-1) var(--gu-ease)}
.cua a:hover{color:var(--gu-text);background:var(--gu-surface-1)}
/* 29/09/2026 — OWNER: ĐỎ CHỈ CHO NÚT CHÍNH. Thẻ chọn đang mở là điều hướng, không phải hành động ⇒ nút
   phân đoạn trung tính (mặt nổi + viền rõ); đỏ để dành cho nút "Đăng nhập"/"Tạo tài khoản" bên dưới. */
.cua a[aria-current="page"]{background:var(--gu-surface-1);color:var(--gu-text);box-shadow:inset 0 0 0 1px var(--gu-border-strong)}
.cua a[aria-current="page"]:hover{background:var(--gu-surface-1)}

label{display:block;font-size:var(--gu-fs-nhan);font-weight:var(--gu-fw-strong);color:var(--gu-label-text);
  margin:0 0 var(--gu-sp-1);letter-spacing:.01em}
label .sao{color:var(--gu-chu-do)}
label .them{font-weight:var(--gu-fw-body);color:var(--gu-text-mut)}
/* Ô nhập VÀ hộp chọn: một kiểu filled surface, không viền (OWNER 29/09 — trước đó <select> quốc gia/ngôn ngữ còn là hộp trắng thô của trình duyệt). */
input,select{width:100%;height:var(--gu-input-h);background:var(--gu-input-bg);border:1px solid transparent;
  border-radius:var(--gu-input-radius);padding:0 var(--gu-input-pad-x);font:inherit;font-size:var(--gu-fs-than);
  color:var(--gu-input-text);outline:0;transition:background var(--gu-dur-1) var(--gu-ease),box-shadow var(--gu-dur-1) var(--gu-ease)}
input:hover:not(:focus),select:hover:not(:focus){background:var(--gu-input-bg-hover)}
input::placeholder{color:var(--gu-input-placeholder)}
input:focus,select:focus{background:var(--gu-input-bg-focus);box-shadow:var(--gu-input-glow)}
/* OWNER 30/09/2026 (ảnh trang Sign in): Chrome TỰ ĐIỀN tài khoản ⇒ ô đổi sang nền trắng mặc định của trình duyệt,
   con mắt hiện mật khẩu (màu chữ sáng) biến mất trên nền ấy. Giữ ô tự điền đúng nền/chữ của thiết kế. */
input:-webkit-autofill,input:-webkit-autofill:hover{-webkit-text-fill-color:var(--gu-input-text);caret-color:var(--gu-input-text);
  -webkit-box-shadow:0 0 0 1000px var(--gu-surface-2) inset;transition:background-color 99999s linear 0s}
input:-webkit-autofill:focus{-webkit-text-fill-color:var(--gu-input-text);-webkit-box-shadow:0 0 0 1000px var(--gu-surface-2) inset,var(--gu-input-glow)}
input[aria-invalid="true"],select[aria-invalid="true"]{background:var(--status-error-nen);box-shadow:0 0 0 2px rgba(219,25,32,.38)}
/* Safari iOS phóng to cả trang khi chạm vào ô chữ < 16px. */
@media (pointer:coarse){input,select{font-size:max(16px,var(--gu-fs-than))}}
.hang{margin-bottom:var(--gu-sp-4)}
.goi{font-size:var(--gu-fs-nhan);color:var(--gu-help-text);margin-top:var(--gu-sp-1);text-wrap:pretty}

/* Ô nhập mã 6 số: chữ to, giãn rộng, đẳng khoảng — người dùng đang chép số từ điện thoại sang. */
#ma{text-align:center;font-size:var(--gu-fs-xl);letter-spacing:.42em;font-weight:var(--gu-fw-strong);
  height:auto;padding:var(--gu-sp-3) var(--gu-sp-3) var(--gu-sp-3) var(--gu-sp-6);font-variant-numeric:tabular-nums}

.nut{display:block;width:100%;min-height:var(--gu-btn-h);border:0;border-radius:var(--gu-btn-radius);
  padding:var(--gu-sp-3) var(--gu-sp-4);font-family:var(--gu-font-body);font-size:var(--gu-fs-than);
  font-weight:var(--gu-fw-strong);text-align:center;cursor:pointer;
  background:var(--gu-btn-primary-bg);color:var(--gu-btn-primary-text);
  transition:background var(--gu-dur-1) var(--gu-ease),opacity var(--gu-dur-1) var(--gu-ease)}
/* 🔴 Nền đỏ khi rê chuột DẪM hơn, không SÁNG hơn — chữ trắng trên đỏ sáng chỉ được 4,01. */
.nut:hover:not(:disabled){background:var(--gu-btn-primary-bg-hover)}
.nut:focus-visible{outline:2px solid var(--gu-input-border-focus);outline-offset:2px}
.nut:disabled{opacity:.55;cursor:default}
.nut.phu{background:var(--gu-btn-secondary-bg);color:var(--gu-text);
  margin:var(--gu-sp-3) 0 0}
.nut.phu:hover:not(:disabled){background:var(--gu-btn-secondary-bg-hover)}
.nut[hidden]{display:none}

/* ── NÚT GOOGLE ─────────────────────────────────────────────────────────────────
   Chủ dự án: *"ký hiệu đăng nhập với Google phải thêm logo GG cho người ta dễ biết"*.
   Logo nằm ở MỘT tệp `/assets/logo-google.svg`, không nhúng thẳng vào từng trang. */
.nut.gg{display:flex;align-items:center;justify-content:center;gap:var(--gu-sp-2);margin:0 0 var(--gu-sp-1)}
.nut.gg img{width:18px;height:18px;display:block;flex:none}

.vach{display:flex;align-items:center;gap:var(--gu-sp-3);margin:var(--gu-sp-5) 0;color:var(--gu-text-mut);font-size:var(--gu-fs-nhan)}
.vach:before,.vach:after{content:"";flex:1;height:1px;background:var(--gu-ke)}

/* Hộp báo — một lớp, ba trạng thái. Tên cũ `xau/tot` giữ cho dang-nhap/dang-ky; `loi/ok` cho hai cửa còn lại. */
.bao{border-radius:var(--gu-radius-sm);padding:var(--gu-sp-3) var(--gu-sp-4);font-size:var(--gu-fs-mo-ta);
  margin-bottom:var(--gu-sp-4);display:none;text-wrap:pretty}
.bao.xau,.bao.loi{display:block;background:var(--status-error-nen);border:1px solid var(--status-error-vien);color:var(--status-error-chu)}
.bao.tot,.bao.ok{display:block;background:var(--status-info-nen);border:1px solid var(--status-info-vien);color:var(--status-info-chu)}
.bao.cho{display:block;background:var(--gu-surface-2);border:1px solid var(--gu-border);color:var(--gu-text-2)}

.chan{margin-top:var(--gu-sp-5);text-align:center;font-size:var(--gu-fs-mo-ta);color:var(--gu-text-mut)}
.chan a{color:var(--gu-chu-lam);font-weight:var(--gu-fw-strong)}
.chan a:hover{text-decoration:underline}
.quen{display:block;text-align:right;font-size:var(--gu-fs-nhan);color:var(--gu-text-mut);
  margin-top:calc(var(--gu-sp-1) * -1);margin-bottom:var(--gu-sp-4)}
.quen:hover{color:var(--gu-text)}

/* ── HỘP ĐIỀU KHOẢN + Ô TÍCH ĐỒNG Ý ────────────────────────────────────────────
   Chủ dự án 25/08/2026: *"khi đăng ký phải hiện bảng điều lệ ra cho người dùng đọc và
   tick vào tôi đồng ý"*. Hộp PHẢI cuộn được và đủ cao để thấy là có chữ bên trong.
   Ô tích KHÔNG tự tích sẵn. */
.dieu-le{background:var(--gu-surface-2);border:1px solid var(--gu-border);border-radius:var(--gu-radius-md);
  padding:var(--gu-sp-3) var(--gu-sp-4);max-height:190px;overflow-y:auto;font-size:var(--gu-fs-nhan);line-height:1.6;
  color:var(--gu-text-2);margin-bottom:var(--gu-sp-3);-webkit-overflow-scrolling:touch}
.dieu-le h3{margin:0 0 var(--gu-sp-2);font-size:var(--gu-fs-nhan);font-weight:var(--gu-fw-strong);color:var(--gu-text);letter-spacing:.02em}
.dieu-le dl{margin:0}
.dieu-le dt{font-weight:var(--gu-fw-strong);color:var(--gu-text);margin-top:var(--gu-sp-2)}
.dieu-le dt:first-child{margin-top:0}
.dieu-le dd{margin:2px 0 0;color:var(--gu-text-mut)}
.dieu-le .toan-van{display:block;margin-top:var(--gu-sp-3);color:var(--gu-chu-lam);font-weight:var(--gu-fw-strong)}
.dieu-le .toan-van:hover{text-decoration:underline}
.dieu-le .dang-tai{color:var(--gu-text-mut)}
/* Trạng thái HỎNG — tách hẳn khỏi `.dang-tai`: một lỗi mặc áo "đang tải" thì người đọc ngồi đợi mãi. */
.dieu-le .tai-hong{color:var(--status-error-chu)}

/* Ô tích: `align-items:flex-start` vì câu chữ xuống hai dòng. */
.dong-y{display:flex;align-items:flex-start;gap:var(--gu-sp-2);margin-bottom:var(--gu-sp-4);cursor:pointer;
  font-size:var(--gu-fs-mo-ta);line-height:1.5;color:var(--gu-text-2)}
.dong-y input[type=checkbox]{width:18px;height:18px;flex:none;margin:2px 0 0;padding:0;accent-color:var(--gu-btn-primary-bg);cursor:pointer}
.dong-y a{color:var(--gu-chu-lam);font-weight:var(--gu-fw-strong)}
.dong-y a:hover{text-decoration:underline}

.buoc2{display:none}

/* Hàng nút cuối hộp (xác minh email): hai nút cạnh nhau, điện thoại thì xếp dọc. */
.hang-nut{display:flex;flex-wrap:wrap;gap:var(--gu-sp-3);margin-top:var(--gu-sp-4)}
.hang-nut .nut{flex:1 1 160px;width:auto;margin:0}

/* Người bật "giảm chuyển động" ở hệ điều hành thì bỏ hết hiệu ứng. */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
@media(max-width:430px){.hop{padding:var(--gu-sp-6) var(--gu-sp-5) var(--gu-sp-5)}}