/* ==========================================================================
   32 · ĐĂNG KÝ / ĐĂNG NHẬP 4 CÁCH, CHUNG 1 MẬT KHẨU (24/10/2026)
   Trang: dang-ky.html, dang-nhap.html · JS: vw-signin.js
   Quy tắc máy chủ: YEU-CAU-KY-THUAT-BACKEND.md mục 4.2A
   ========================================================================== */

/* Khung "1 tài khoản, đăng nhập bằng…" để người dùng hiểu ngay từ đầu */
.vw-auth-ways {
  display: flex;
  flex-direction: column;
  gap: var(--vw-sp-3);
  padding: var(--vw-sp-4);
  border: 1px solid var(--vw-line);
  border-radius: var(--vw-r-lg);
  background: var(--vw-surface-2);
}
.vw-auth-ways__title { margin: 0; font-size: var(--vw-fs-min); font-weight: 600; }
.vw-auth-ways__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vw-sp-2);
}
.vw-auth-ways__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--vw-line-strong);
  border-radius: var(--vw-r-pill);
  background: var(--vw-surface);
  font-size: var(--vw-fs-sm);
  font-weight: 600;
}
.vw-auth-ways__item .vw-icon { width: 16px; height: 16px; color: var(--vw-primary); }
.vw-auth-ways__or { font-size: var(--vw-fs-xs); color: var(--vw-subtle); }
.vw-auth-ways__plus {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--vw-fs-sm);
  font-weight: 600;
  color: var(--vw-primary-ink);
}
.vw-auth-ways__plus .vw-icon { width: 16px; height: 16px; }
.vw-auth-ways .vw-text-xs { margin: 0; }

/* Mỗi bước là 1 khung, chỉ hiện 1 khung một lúc */
.vw-auth-panel[hidden] { display: none !important; }

/* Dòng "Bước 1 / 2 · …" và nút quay lại trong khung */
.vw-auth-step {
  display: flex;
  align-items: center;
  gap: var(--vw-sp-2);
  font-size: var(--vw-fs-sm);
  color: var(--vw-subtle);
}
.vw-auth-step b { color: var(--vw-ink); font-weight: 600; }
.vw-auth-back {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 32px;
  padding: 0 6px 0 0;
  border: 0;
  background: none;
  color: var(--vw-primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.vw-auth-back .vw-icon { width: 18px; height: 18px; }

/* Nhãn "Khuyên dùng" cạnh cách số điện thoại */
.vw-auth-rec {
  display: inline-flex;
  align-items: center;
  height: 20px;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: var(--vw-r-pill);
  background: var(--vw-accent-soft);
  color: var(--vw-accent);
  font-size: var(--vw-fs-min);
  font-weight: 700;
  vertical-align: 1px;
}

/* Nút cách khác: 2 dòng (tên + ghi chú) */
.vw-btn--social .vw-auth-sub {
  margin-left: auto;
  font-size: var(--vw-fs-xs);
  font-weight: 500;
  color: var(--vw-subtle);
}
.vw-auth-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--vw-primary-soft);
  color: var(--vw-primary);
}
.vw-auth-mark .vw-icon { width: 15px; height: 15px; }

/* Ô mật khẩu có nút hiện / ẩn */
.vw-pw { position: relative; }
.vw-pw .vw-input { padding-right: 52px; }
.vw-pw__eye {
  position: absolute;
  top: 50%;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--vw-touch);
  height: var(--vw-touch);
  transform: translateY(-50%);
  border: 0;
  border-radius: var(--vw-r-md);
  background: none;
  color: var(--vw-subtle);
  cursor: pointer;
}
.vw-pw__eye:hover { color: var(--vw-ink); }

/* Thước độ mạnh mật khẩu: 3 vạch */
.vw-pwmeter { display: flex; gap: 4px; }
.vw-pwmeter i {
  flex: 1;
  height: 4px;
  border-radius: 2px;
  background: var(--vw-line);
  transition: background var(--vw-dur) var(--vw-ease-out);
}
.vw-pwmeter[data-level="1"] i:nth-child(-n+1) { background: var(--vw-danger); }
.vw-pwmeter[data-level="2"] i:nth-child(-n+2) { background: var(--vw-orange); }
.vw-pwmeter[data-level="3"] i { background: var(--vw-success); }

/* Ô "SĐT / email / tên tài khoản": icon bên trái đổi theo loại máy nhận ra */
.vw-idfield .vw-input { padding-left: 44px; }
.vw-idfield { position: relative; }
.vw-idfield > .vw-icon {
  position: absolute;
  left: 14px;
  top: 24px;
  transform: translateY(-50%);
  color: var(--vw-subtle);
  pointer-events: none;
  transition: color var(--vw-dur-fast);
}
.vw-idfield.is-known > .vw-icon { color: var(--vw-primary); }
.vw-idhint {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  margin: 0;
  font-size: var(--vw-fs-xs);
  color: var(--vw-subtle);
}
.vw-idhint b { color: var(--vw-primary-ink); font-weight: 600; }
.vw-idhint.is-bad b { color: var(--vw-danger); }

/* Ô tên tài khoản: tiền tố @ và trạng thái còn trống / đã có người dùng */
.vw-handle { position: relative; }
.vw-handle .vw-input { padding-left: 34px; }
.vw-handle::before {
  content: "@";
  position: absolute;
  left: 16px;
  top: 24px;
  transform: translateY(-50%);
  font-weight: 600;
  color: var(--vw-subtle);
}
.vw-handle-state { margin: 0; font-size: var(--vw-fs-xs); min-height: 18px; color: var(--vw-subtle); }
.vw-handle-state.is-ok { color: var(--vw-success); font-weight: 600; }
.vw-handle-state.is-bad { color: var(--vw-danger); font-weight: 600; }
.vw-handle-sugg { display: flex; flex-wrap: wrap; gap: 6px; }
.vw-handle-sugg button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--vw-line-strong);
  border-radius: var(--vw-r-pill);
  background: var(--vw-surface);
  font: inherit;
  font-size: var(--vw-fs-sm);
  cursor: pointer;
}
.vw-handle-sugg button:hover { border-color: var(--vw-primary); color: var(--vw-primary); }

/* Dòng "Số 0912 345 678 đã xác minh" ở đầu bước đặt mật khẩu */
.vw-auth-verified {
  display: flex;
  align-items: center;
  gap: var(--vw-sp-2);
  padding: 10px var(--vw-sp-3);
  border-radius: var(--vw-r-md);
  background: var(--vw-success-soft);
  color: var(--vw-success);
  font-size: var(--vw-fs-sm);
  font-weight: 600;
}
.vw-auth-verified .vw-icon { flex: none; }

/* Ô đồng ý: chữ nhiều dòng, ô tích nằm trên cùng */
.vw-check--top { align-items: flex-start; }
.vw-check--top input { flex: none; margin-top: 1px; }
.vw-check--top span { line-height: 1.5; }

/* Dòng "Ghi nhớ đăng nhập · Quên mật khẩu?" */
.vw-auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--vw-sp-2);
  flex-wrap: wrap;
}
.vw-auth-row a { font-size: var(--vw-fs-min); font-weight: 600; }

/* Thông báo lỗi chung dưới form đăng nhập */
.vw-notice--danger { background: var(--vw-danger-soft); color: var(--vw-danger); }
.vw-notice--danger .vw-icon { color: var(--vw-danger); }
.vw-notice p { margin: 0; }
.vw-notice p + p { margin-top: 4px; color: var(--vw-ink); font-weight: 400; }

/* Chỗ đặt captcha (Cloudflare Turnstile) sau 3 lần sai */
.vw-captcha {
  display: flex;
  align-items: center;
  gap: var(--vw-sp-3);
  height: 65px;
  padding: 0 var(--vw-sp-4);
  border: 1px solid var(--vw-line-strong);
  border-radius: var(--vw-r-md);
  background: var(--vw-surface-2);
  font-size: var(--vw-fs-min);
}

/* Chọn nơi nhận mã khi quên mật khẩu */
.vw-auth-channels { display: flex; flex-direction: column; gap: var(--vw-sp-2); }
.vw-auth-channel {
  display: flex;
  align-items: center;
  gap: var(--vw-sp-3);
  min-height: 52px;
  padding: 0 var(--vw-sp-4);
  border: 1px solid var(--vw-line-strong);
  border-radius: var(--vw-r-md);
  cursor: pointer;
  font-size: var(--vw-fs-body);
}
.vw-auth-channel:has(input:checked) { border-color: var(--vw-primary); background: var(--vw-primary-soft); }
.vw-auth-channel input { width: 18px; height: 18px; accent-color: var(--vw-primary); }

/* Tóm tắt cuối: "Từ nay bạn đăng nhập bằng…" */
.vw-auth-done { align-items: center; text-align: center; }
.vw-auth-sum {
  width: 100%;
  margin: 0;
  padding: var(--vw-sp-4);
  border: 1px solid var(--vw-line);
  border-radius: var(--vw-r-lg);
  background: var(--vw-surface-2);
  text-align: left;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--vw-sp-2);
  font-size: var(--vw-fs-min);
}
.vw-auth-sum li { display: flex; align-items: center; gap: var(--vw-sp-2); }
.vw-auth-sum .vw-icon { width: 18px; height: 18px; color: var(--vw-primary); flex: none; }
.vw-auth-sum .is-off { color: var(--vw-subtle); }
.vw-auth-sum .is-off .vw-icon { color: var(--vw-line-strong); }

.vw-auth-foot { margin: 0; text-align: center; font-size: var(--vw-fs-min); }
.vw-auth-foot a { font-weight: 600; }

/* ==========================================================================
   Sửa theo góp ý 24/10/2026 (tối)
   ========================================================================== */

/* Câu giới thiệu thay nhau trong cùng 1 chỗ (mờ dần / hiện dần), không đẩy khung nhập */
.vw-rotator { display: grid; margin: 0; }
.vw-rotator > span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .6s var(--vw-ease-out), transform .6s var(--vw-ease-out);
}
.vw-rotator > span.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .vw-rotator > span { transition: none; }
}

/* Tên tài khoản chỉ để đăng nhập: bỏ chữ @ phía trước (@ dành cho đường dẫn riêng viecvat.com/@…) */
.vw-handle .vw-input { padding-left: 16px; }
.vw-handle::before { content: none; }

/* Chọn vai trò ngay sau khi tạo tài khoản */
.vw-auth-role { width: 100%; display: flex; flex-direction: column; gap: var(--vw-sp-3); text-align: left; }
.vw-auth-role__title { margin: 0; font-weight: 700; font-size: var(--vw-fs-md, 17px); text-align: center; }
.vw-auth-role__opt {
  display: flex;
  align-items: center;
  gap: var(--vw-sp-3);
  width: 100%;
  min-height: 72px;
  padding: 12px var(--vw-sp-4);
  border: 1.5px solid var(--vw-line-strong);
  border-radius: var(--vw-r-lg);
  background: var(--vw-surface);
  font: inherit;
  text-align: left;
  color: var(--vw-ink);
  cursor: pointer;
  transition: border-color var(--vw-dur-fast), background var(--vw-dur-fast);
}
.vw-auth-role__opt:hover, .vw-auth-role__opt:focus-visible { border-color: var(--vw-primary); background: var(--vw-primary-soft); }
.vw-auth-role__opt b { display: block; font-size: var(--vw-fs-body); }
.vw-auth-role__opt small { display: block; margin-top: 2px; font-size: var(--vw-fs-sm); color: var(--vw-subtle); }
.vw-auth-role__ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--vw-primary-soft);
  color: var(--vw-primary);
}
.vw-auth-role__opt--emp .vw-auth-role__ico { background: var(--vw-orange-soft, #FFF1E6); color: var(--vw-orange, #F26B0F); }
.vw-auth-role__opt--emp:hover, .vw-auth-role__opt--emp:focus-visible { border-color: var(--vw-orange, #F26B0F); background: var(--vw-orange-soft, #FFF1E6); }