/* ==========================================================================
   REGISTER — ghi đè design system "Technical Minimalist" cho trang đăng ký.

   Nguyên tắc: KHÔNG sửa markup và JS. register.html là funnel nhiều màn hình
   điều khiển hoàn toàn bằng JS với 93 id và 6 lệnh fetch. Sửa markup là rủi
   ro làm hỏng luồng đăng ký thật, nên file này chỉ thay lớp ngoài: màu, chữ,
   đường kẻ, bo góc — giữ nguyên mọi thuộc tính layout của bản gốc.
   ========================================================================== */

/* ── 1. NỀN ──────────────────────────────────────────────────────────────
   Bản gốc đặt nền xám #f6f7fa phẳng. Nay dùng nền giấy #F7F7F5 cho khớp
   các landing page. Nền phẳng, không hoạ tiết ô gạch. */
body {
  background-color: #F7F7F5;
  color: #3A3A38;
  font-family: 'General Sans', 'Be Vietnam Pro', system-ui, sans-serif;
}

/* ── 2. PHẲNG: bỏ bóng, bo góc 0px/2px ───────────────────────────────── */
.welcome-screen,
.card, .step-panel, .success-card, .summary-box, .fee-box,
.info-box, .otp-box, .otp-boxes, .notify-box, .next-steps-card,
.toast, .email-pill, .module-badge, .btn-next, .btn-back, .btn-gl,
.btn-row .btn, .link-btn, .field input, .field select, .field textarea {
  box-shadow: none !important;
}
.welcome-screen, .card, .step-panel, .success-card, .summary-box, .fee-box,
.info-box, .otp-box, .notify-box, .next-steps-card, .toast,
.email-pill, .module-badge, .btn-next, .btn-back, .btn-gl, .field input,
.field select, .field textarea, .lookup-input, .check-row {
  border-radius: 2px !important;
}
@media (min-width: 1100px) { .welcome-screen { border-radius: 2px !important; } }

/* ── 3. VIỀN HAIRLINE ─────────────────────────────────────────────────── */
.welcome-screen { border: 1px solid rgba(58, 58, 56, .20) !important; }
.card, .step-panel, .success-card, .summary-box, .fee-box, .info-box,
.next-steps-card, .notify-box {
  background: #FFFFFF !important;
  border: 1px solid rgba(58, 58, 56, .20) !important;
}
.field input, .field select, .field textarea, .lookup-input, .check-row {
  background: #FFFFFF !important;
  border: 1px solid rgba(58, 58, 56, .20) !important;
  color: #3A3A38 !important;
}
.field input:focus, .field select:focus, .field textarea:focus,
.lookup-input:focus {
  outline: none !important;
  border-color: #B33630 !important;
  box-shadow: none !important;
}

/* ── 3b. NỀN TRẮNG ───────────────────────────────────────────────────────
   Bản gốc để nền #f6f7fa (xám xanh) và chữ #101828 — thuộc hệ màu cũ. Nay nền
   TRẮNG TUYET ĐỐI #FFFFFF, chữ đen.

   Trước đây trang này còn vẽ hoạ tiết ô gạch giống landing page (ô SVG
   240×240 tô #FFFFFF). Đã bỏ: nền trắng phẳng dễ đọc hơn, và đồng bộ với
   phần còn lại của sản phẩm sau khi bỏ hoạ tiết ở landing/payment. */

body {
  background: #FFFFFF !important;
  color: #0A0A0A !important;
}
.welcome-screen, .welcome-body, .welcome-head {
  background-color: #FFFFFF !important;
}
.welcome-module-btn, .module-card, .card, .step-panel,
.welcome-features .feature-item { background-color: #FFFFFF !important; }

/* ── 4. CHỮ ───────────────────────────────────────────────────────────── */
.welcome-title, .head-title, .panel-title, .module-name,
.feature-item h4, .success-title, .ty-title, .card-head h2, .card-head h3 {
  font-family: 'Space Grotesk', 'Be Vietnam Pro', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  color: #0A0A0A !important;
}
.lbl, .sc-label, .sc-val, .sc-note, .module-badge, .fee-lbl,
.fee-note, .panel-sub, .head-sub, .welcome-sub, .module-desc,
.feature-item p, .success-sub, .welcome-intro p {
  color: rgba(58, 58, 56, .68) !important;
}
.lbl, .sc-label, .fee-lbl, .module-badge {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: .1em !important;
}
.amt, .fee-note, .registerId, .sc-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}

/* ── 5. ĐẦU TRANG: NỀN GIẤY, CHỮ ĐEN ─────────────────────────────────────
   Trước đây bô đặc xanh rừng cả khối đầu. Landing page dùng nền giấy cho
   header, xanh rừng chỉ ở nút đặc — làm vậy màn hình này mới khớp. */
.welcome-head {
  background: #FFFFFF !important;
  border-bottom: 1px solid rgba(58, 58, 56, .20) !important;
}
.welcome-head .welcome-title,
.welcome-head .welcome-sub,
.head-top {
  color: #0A0A0A !important;
}
.welcome-sub { color: #5A5A58 !important; }
.welcome-intro p { color: #5A5A58 !important; }
.welcome-intro h3 {
  font-family: 'Space Grotesk', 'Be Vietnam Pro', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  color: #0A0A0A !important;
}
.welcome-clean-link, .welcome-intro a { color: #0A0A0A !important; }
.welcome-logo {
  width: 120px !important;
  height: 120px !important;
  margin: 0 auto 22px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* ── 5b. Ô AVATAR TRONG ĐẦU MÀN HÌNH ĐĂNG KÝ ──────────────────────────────
   Bản gốc: ô 70×70 nền tối theo từng module (#1a2040, #321817, #c93d37…),
   bo góc 20px — thiết kế hệ tối. Nay đầu trang nền trắng nên ô tối thành
   một cục thẫm lạc lõng, và bo góc 20px lệch quy tắc chỉ cho 0 hoặc 2px.

   Đặt ô trung tính: viền hairline, bo góc 2px, vừa khung ảnh 64px. Ảnh thật
   hiện lên đúng kích thước nên không cần nền nữa. */
.logo-sm {
  width: 64px !important;
  height: 64px !important;
  border-radius: 2px !important;
  border: 1px solid rgba(58, 58, 56, .20) !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
  flex-shrink: 0;
}
.logo-sm svg { width: 64px; height: 64px; }
/* Nền theo module là của hệ tối — bỏ hết cho nền trung tính */
.logo-gl, .logo-gv, .logo-cs, .logo-sp, .logo-fd, .logo-rx {
  background: #FFFFFF !important;
}
.logo-sm img { display: block; border-radius: 2px; }
/* Avatar là biểu tượng nhận diện nên giữ màu thật, không áp blend xám như
   các ảnh trang trí ở màn hình chào. */
.logo-sm img { mix-blend-mode: normal !important; opacity: 1 !important; }

/* ── 5c. THẺ BANNER TRONG DẢI CHẠY ────────────────────────────────────────
   Thẻ banner nằm trong inline <style> của register.html với bo góc 14px và
   đổ bóng — thuộc hệ cũ. Đưa về phẳng: bo góc 2px, không đổ bóng, viền
   hairline. Nền thẻ vẫn đặc để tách nền trắng. */
.wb-card {
  border-radius: 2px !important;
  box-shadow: none !important;
  border: 1px solid rgba(58, 58, 56, .20) !important;
  background: #FFFFFF !important;
}
.wb-card-title { color: #0A0A0A !important; }
.wb-card-sub   { color: #5A5A58 !important; }
.wb-card-img   { background: #EEF0ED !important; }

/* Hai mép mờ ở hai đầu dải. Đây là MẶT NẠ để thẻ chạy ra chứ không phải bề
   mặt tô màu, nên vẫn giữ dù hệ thiết kế cấm gradient cho bề mặt — trước đây
   bị tắt cùng loạt dọn gradient, dải chạy bị cắt cụt ở hai đầu. */
.welcome-banner-wrap::before,
.welcome-banner-wrap::after {
  display: block !important;
  background: linear-gradient(90deg, #FFFFFF, rgba(255,255,255,0)) !important;
}
.welcome-banner-wrap::after {
  background: linear-gradient(270deg, #FFFFFF, rgba(255,255,255,0)) !important;
}

/* ── 5e. LOGO CRABOR + TIÊU ĐỀ MÀN HÌNH CHÀO ────────────────────────────────
   Ba lỗi cùng một chỗ, đều làm logo trông như sai:

   1. SAI VỊ TRÍ. Bản gốc đặt .welcome-logo là ô 120×120 nhưng ảnh chỉ 48px,
      mà ô đó không phải flex nên ảnh rơi về góc trên-trái, lệch hẳn giữa
      khối. Nay ô vừa đúng ảnh và canh giữa.
   2. MẤT MÀU. Rule blend áp mix-blend-mode: luminosity lên .welcome-logo img.
      Trên nền trắng nó giữ độ sáng của ảnh nhưng ném sắc độ của nền — logo đỏ
      #E1534B thành xám nhạt. Logo là biểu tượng thương hiệu, phải giữ màu thật.
   3. DÒNG PHỤ BIẾN MẤT. .welcome-title em vẫn màu #FFD84D từ hệ cũ nền tối.
      Trên nền giấy trắng chỉ còn tương phản 1.4:1 — không đọc được. Đổi sang
      coral-ink #8C4D3A (6.05:1), cùng họ màu với dải nhấn ở email. */
.welcome-logo {
  width: 56px !important;
  height: 56px !important;
  margin: 0 auto 22px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.welcome-logo img {
  width: 112px !important;
  height: auto !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  filter: none !important;
}
/* Bỏ bóng đổ cứng của hệ cũ — chữ đen trên giấy không cần và nhìn thô */
.welcome-title {
  text-shadow: none !important;
  font-family: 'Space Grotesk', 'Be Vietnam Pro', sans-serif !important;
  color: #0A0A0A !important;
}
.welcome-title em {
  color: #8C4D3A !important;
  font-family: 'Space Grotesk', 'Be Vietnam Pro', sans-serif !important;
}

/* ── 6. NÚT ───────────────────────────────────────────────────────────── */
.btn-next {
  background: #B33630 !important;
  color: #F7F7F5 !important;
  border: 1px solid #B33630 !important;
  border-radius: 2px !important;
}
.btn-next:hover { background: #8E2A24 !important; border-color: #8E2A24 !important; }
.btn-gl, .btn-back {
  background: transparent !important;
  color: #0A0A0A !important;
  border: 1px solid #B33630 !important;
  border-radius: 2px !important;
}
.btn-gl:hover, .btn-back:hover { background: #B33630 !important; color: #F7F7F5 !important; }
.btn-row .btn { border-radius: 2px !important; }
.link-btn {
  color: #0A0A0A !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none !important;
  border: 1px solid rgba(58, 58, 56, .20) !important;
  border-radius: 2px !important;
}

/* ── 7. THANH TIẾN TRÌNH ─────────────────────────────────────────────── */
.steps-bar, .progress-wrap, .prog-wrap {
  background: rgba(58, 58, 56, .12) !important;
  border-radius: 0 !important;
}
.steps-bar .on, .progress-wrap .on, .prog-gl .on {
  background: #B33630 !important;
}
.head-badge, .module-badge, .fee-badge, .sp-early-badge {
  background: rgba(233,182,180, .30) !important;
  color: #0A0A0A !important;
  border: 1px solid rgba(59,28,27, .25) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

/* ── 8. HỘP LƯI Ý / PHÍ ───────────────────────────────────────────────── */
.info-box {
  background: rgba(244, 211, 94, .12) !important;
  border: 1px solid rgba(58, 58, 56, .22) !important;
  border-left: 2px solid #F4D35E !important;
}
.fee-box {
  background: rgba(255, 140, 105, .10) !important;
  border: 1px solid rgba(58, 58, 56, .20) !important;
  border-left: 2px solid #FF8C69 !important;
}
.fee-box .amt { color: #FF8C69 !important; }
.notify-box {
  background: rgba(233,182,180, .14) !important;
  border: 1px solid rgba(59,28,27, .25) !important;
  border-left: 2px solid #B33630 !important;
}
.otp-boxes input, .otp-box {
  background: #FFFFFF !important;
  border: 1px solid rgba(58, 58, 56, .30) !important;
  color: #0A0A0A !important;
  font-family: 'JetBrains Mono', monospace !important;
}
.otp-boxes input:focus { border-color: #B33630 !important; }
.err-msg { color: #C4552F !important; }

/* ── 9. THẺ MODULE ────────────────────────────────────────────────────── */
.welcome-module-btn, .module-card, .feature-item {
  background: #FFFFFF !important;
  border: 1px solid rgba(58, 58, 56, .20) !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.welcome-module-btn:hover, .module-card:hover {
  border-color: #B33630 !important;
  background: #FFFFFF !important;
}
/* Ảnh module: giống img.lum của landing.css — mix-blend-luminosity + .9,
   rê chuột trả về màu đầy đủ. Bản cũ dùng grayscale(1) opacity(.75) và không
   có bước trả lại, nên ảnh xám nhạt trông như mất ảnh. */
.module-icon img, .success-icon, .feature-icon {
  mix-blend-mode: luminosity;
  opacity: .92;
  transition: mix-blend-mode .18s ease-out, opacity .18s ease-out;
}
.welcome-module-btn:hover .module-icon img,
.module-card:hover .module-icon img { mix-blend-mode: normal; opacity: 1; }
.feature-icon { color: #0A0A0A !important; }
.success-icon { font-size: 3rem; line-height: 1; }

/* ── 10. MÀN HÌNH THÀNH CÔNG ──────────────────────────────────────────── */
.success-wrap, .success-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(58, 58, 56, .20) !important;
}
.success-title { color: #0A0A0A !important; }
.success-title-gl { color: #0A0A0A !important; }
.summary-box .amt, .summary-box strong { color: #0A0A0A !important; }

.toast {
  background: #B33630 !important;
  color: #F7F7F5 !important;
  border: 1px solid #B33630 !important;
  border-radius: 2px !important;
}

/* ── 11. THANH CUỘN / VÙNG CHẠM ───────────────────────────────────────── */
* { scrollbar-color: rgba(58, 58, 56, .30) transparent; }
::selection { background: #0A0A0A; color: #F7F7F5; }

/* ── 12. DỌN MẢNG SẮC/GRADIENT CÒN SÓT ───────────────────────────────────
   Bản gốc còn 31 chỗ linear-gradient, 19 chỗ box-shadow và các nền hover
   màu phẳng kiểu #f0f4ff / #fff5f5. Design system mới cấm gradient và bóng
   đổ, nên ép phẳng hết ở đây. */
.welcome-head::before,
.welcome-head::after,
.card-head::before,
.card-head::after { display: none !important; }

.welcome-module-btn:hover,
.welcome-module-btn.gl:hover,
.welcome-module-btn.gv:hover,
.welcome-module-btn.cs:hover,
.welcome-module-btn.sp:hover,
.welcome-module-btn.fd:hover,
.welcome-module-btn.rx:hover {
  transform: none !important;
  box-shadow: none !important;
  background: #FFFFFF !important;
  border-color: #B33630 !important;
}
.welcome-banner-wrap::before,
.welcome-banner-wrap::after { display: none !important; }

/* Nhãn trạng thái dùng nền phẳng, bo góc 2px, viền hairline */
.module-badge, .fee-badge, .head-badge, .sp-early-badge {
  background: rgba(233,182,180, .26) !important;
  border: 1px solid rgba(59,28,27, .28) !important;
}
/* ── Điều khoản pháp lý trong popup đăng ký ─────────────────────────────────
   Nội dung do register.js dựng từ public/legal-policy.js (nguồn DOCX bản v3)
   nên chỉ style thôi ở đây, không viết từ câu chữ. */
.legal-meta {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; margin-bottom: 20px;
  background: rgba(179,54,48,.05);
  border: 1px solid rgba(179,54,48,.20);
  border-left: 3px solid #B33630;
  border-radius: 8px;
}
.legal-meta b {
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #B33630;
}
.legal-meta span { font-size: 12.5px; line-height: 1.6; color: #3A3A38; }
.legal-scope { margin-top: 2px; padding-top: 6px; border-top: 1px solid rgba(58,58,56,.12); color: #B33630; font-weight: 700; }

.legal-doc h4 {
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: #B33630; font-weight: 900;
  margin: 26px 0 8px; padding-bottom: 6px;
  border-bottom: 1px solid rgba(179,54,48,.18);
}
.legal-doc h4:first-child { margin-top: 0; }
.legal-doc h5 { font-size: .95rem; font-weight: 800; color: #8E2A24; margin: 18px 0 6px; }
.legal-doc p { margin: 0 0 10px; color: #333; }
.legal-doc .legal-ul { padding-left: 18px; margin: 0 0 10px; list-style: none; }
.legal-doc .legal-ul li { position: relative; padding-left: 14px; margin-bottom: 6px; }
.legal-doc .legal-ul li::before { content: "—"; position: absolute; left: 0; color: #B33630; }
.legal-missing { color: #8E2A24; font-weight: 700; }
/* Nút mở điều khoản nằm trong label của checkbox: trông như link nhưng là
   button để không nhảy trang (CSP cấm inline onclick). */
.legal-link {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; font-weight: 700; color: #B33630;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.legal-link:hover { color: #8E2A24; }