/* ==========================================================================
   auth-form.css — khung đăng nhập / đăng ký kiểu thẻ mềm.

   Nguồn hình khối: https://uiverse.io/micaelgomestavares/purple-panda-95
   (Uiverse.io, tác giả micaelgomestavares, MIT). Thẻ trắng bo 20px, ô nhập cao
   50px viền mảnh 1.5px có icon bên trong, nút gửi tối kín bề ngang.
   Xem assets/vendor/THIRD_PARTY_NOTICES.md.

   Đây là lớp da THỨ BA của cùng một bộ khung: neo-brutalist (D3OXY) → Luminous
   Midnight → thẻ mềm này. Tên lớp lp-nb-* giữ nguyên qua cả ba đời — năm trang
   xác thực dùng chung chúng, đổi da chỉ là đổi tệp này, không đụng markup.

   NHỮNG CHỖ SỬA SO VỚI BẢN GỐC, VÀ LÝ DO

   1. TIỀN TỐ. Bản gốc dùng .form/.input/.btn/.span — va chạm chắc chắn.

   2. MÀU NỐI VÀO TOKEN, KHÔNG CHÉP MÃ CỨNG. Bản gốc: viền #ecedec, nhấn
      #2d79f3 (lam), nút #151717. Lam lạc hẳn bảng Sage; và mã cứng thì chết ở
      chế độ tối. Ánh xạ: #ecedec → --lp-rule-soft, #2d79f3 → --lp-accent,
      #151717 → --lp-invert (#2D312F — gần như cùng một màu than). Hình khối giữ
      đúng: 50px, 1.5px, bo 10/20px.

   3. BỎ nút đăng nhập mạng xã hội VÀ "Remember me". Dự án chưa có OAuth — nút xã hội là mời
      bấm vào chỗ không dẫn tới đâu (đúng lý do đời da trước đã bỏ các nút đó).
      LoginController không có phiên ghi nhớ, nên ô "Remember me" cũng là một
      điều khiển chết. Hàng flex-row của mẫu giữ lại cho liên kết Quên mật khẩu.

   4. FONT KẾ THỪA CỦA HỆ, không lấy stack -apple-system của mẫu: dự án đã chọn
      Inter có subset tiếng Việt; đổi stack là chữ Việt rơi về font hệ thống.
   ========================================================================== */

.lp-nb-form {
  --background: var(--lp-surface);
  --input-focus: var(--lp-accent);
  --font-color: var(--lp-ink);
  --font-color-sub: var(--lp-ink-faint);
  --bg-color: var(--lp-surface);
  --main-color: var(--lp-rule-soft);

  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  max-width: 450px;
  padding: 30px;
  background: var(--background);
  border-radius: 20px;
  /*
   * Mẫu gốc phẳng hoàn toàn — nó nằm trên nền xám tĩnh. Ở đây thẻ nổi trên nền
   * shader chuyển động, không có ranh giới thì mép thẻ "thở" theo nền. Một viền
   * mảnh + bóng rất nhẹ là đủ neo nó lại.
   */
  border: 1px solid var(--lp-rule-soft);
  box-shadow: 0 18px 44px rgba(25, 28, 27, 0.07);
}

/* --- tiêu đề nhỏ đầu thẻ --- */
.lp-nb-form > p {
  display: flex;
  flex-direction: column;
  margin: 0 0 6px;
  color: var(--font-color);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
}

.lp-nb-form > p > span {
  color: var(--font-color-sub);
  font-weight: 400;
  font-size: 14px;
}

/* --- nhãn trường: nhìn thấy được, đậm 600 — chữ ký của mẫu này --- */
.lp-nb-cap {
  font-size: 14px;
  font-weight: 600;
  color: var(--font-color);
}

/* Nhãn chỉ dành cho trình đọc màn hình (trang cũ còn dùng ở vài chỗ). */
.lp-nb-srlabel {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Ô NHẬP
   Mẫu đặt viền trên VỎ BỌC (.inputForm) chứ không trên input — icon và nút con
   mắt nằm chung trong vỏ, viền đổi màu bằng :focus-within. Ô nhập trần (các
   trang chưa có vỏ bọc) nhận cùng hình khối qua quy tắc input bên dưới.
   -------------------------------------------------------------------------- */
.lp-nb-form input,
.lp-nb-form select {
  width: 100%;
  height: 50px;
  border-radius: 10px;
  border: 1.5px solid var(--main-color);
  background-color: var(--bg-color);
  font-family: inherit;
  font-size: 15px;
  color: var(--font-color);
  padding: 0 12px;
  outline: none;
  transition: border-color 0.2s ease-in-out;
}

.lp-nb-form input::placeholder {
  color: var(--font-color-sub);
}

.lp-nb-form input:focus,
.lp-nb-form select:focus {
  border-color: var(--input-focus);
}

/* --- vỏ bọc có icon: viền dời từ input ra vỏ --- */
/*
 * Giữ tên lớp .lp-inline-field vì src/blob-entry.mjs tìm nút hiện mật khẩu theo
 * đúng cấu trúc `.lp-inline-field button` — đổi tên là blob thôi nhắm mắt.
 */
.lp-nb-form .lp-inline-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  padding-left: 10px;
  border: 1.5px solid var(--main-color);
  border-radius: 10px;
  background-color: var(--bg-color);
  transition: border-color 0.2s ease-in-out;
}

.lp-nb-form .lp-inline-field:focus-within {
  border-color: var(--input-focus);
}

.lp-nb-form .lp-inline-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin-left: 10px;
  padding: 0;
  border: none;
  border-radius: 10px;
  background: transparent;
}

/* Icon trường (email, khoá…) — tô theo mực phụ để không tranh với chữ. */
.lp-if-ico {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--font-color-sub);
  fill: currentColor;
}

/* --- nút con mắt trong ô mật khẩu --- */
.lp-nb-eye {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--font-color-sub);
  font-size: 15px;
  cursor: pointer;
}

.lp-nb-eye:hover {
  color: var(--font-color);
}

/* --- hàng ngang: quên mật khẩu, các lựa chọn phụ --- */
.lp-nb-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  font-size: 14px;
}

/* --------------------------------------------------------------------------
   NÚT
   -------------------------------------------------------------------------- */
.lp-nb-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  margin: 14px 0 4px;
  border: none;
  border-radius: 10px;
  background-color: var(--lp-invert);
  color: var(--lp-invert-ink);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out;
}

.lp-nb-btn:hover,
.lp-nb-btn:focus-visible {
  background-color: color-mix(in srgb, var(--lp-invert) 86%, var(--lp-invert-ink));
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {

  .lp-nb-btn:hover,
  .lp-nb-btn:focus-visible {
    background-color: var(--lp-invert);
    opacity: 0.92;
  }
}

.lp-nb-btn:focus-visible {
  outline: 3px solid var(--input-focus);
  outline-offset: 2px;
}

/*
 * Nút gửi lại mã bị khoá 60 giây đầu (trang OTP). Nhạt đi là biết chưa bấm
 * được; con trỏ nói nốt phần còn lại.
 */
.lp-nb-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* Mũi tên/icon trong nút — không kìm lại thì SVG lấy 24px từ thuộc tính. */
.lp-nb-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* --- nút chữ, dùng cho liên kết phụ --- */
.lp-nb-btn.is-quiet {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  color: var(--input-focus);
  font-size: 14px;
  font-weight: 500;
}

.lp-nb-btn.is-quiet:hover,
.lp-nb-btn.is-quiet:focus-visible {
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- vạch ngăn "HOẶC" --- */
.lp-nb-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 2px 0;
}

.lp-nb-sep > i {
  flex: 1;
  height: 1px;
  background-color: var(--main-color);
}

.lp-nb-sep > span {
  color: var(--font-color-sub);
  font-size: 13px;
}

/* --- dòng liên kết cuối thẻ: canh giữa như .p của mẫu --- */
.lp-nb-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin: 2px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--font-color);
}

.lp-nb-links a {
  color: var(--input-focus);
  font-weight: 500;
  text-decoration: none;
}

.lp-nb-links a:hover,
.lp-nb-links a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- thẻ báo trong khung: kế thừa .lp-alert, chỉ nắn cho vừa thẻ --- */
.lp-nb-form .lp-alert {
  width: 100%;
  margin: 0;
  border-radius: 10px;
  font-size: 14px;
}

/* ==========================================================================
   PHẦN MỞ RỘNG CHO TRANG ĐĂNG KÝ / QUÊN MẬT KHẨU

   Đăng ký có BẢY trường; xếp dọc hết thì khung cao gần gấp đôi cột linh vật.
   Nên: khung rộng hơn, trường ngắn xếp hai cột.
   ========================================================================== */

.lp-nb-form.is-wide {
  max-width: 620px;
}

.lp-nb-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.lp-nb-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Không có min-width:0 thì ô nhập bên trong đẩy cột phình khỏi lưới. */
  min-width: 0;
}

.lp-nb-cell.is-span2 {
  grid-column: 1 / -1;
}

/*
 * MỘT CỘT KHI HẸP. Ngưỡng 560px là chỗ mỗi cột còn dưới ~240px — ô mật khẩu ở
 * đó chỉ còn chừng 190px sau khi trừ nút con mắt, gõ vào là chữ trôi mất.
 */
@media (max-width: 560px) {
  .lp-nb-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- ô chọn vai trò --- */
/*
 * Mũi tên vẽ bằng MASK chứ không phải background-image: SVG nhúng không đọc
 * được biến CSS, nhưng mask thì hình lấy từ SVG còn MÀU lấy từ
 * background-color — tức lấy được từ token, sống được ở cả hai chế độ.
 */
.lp-nb-form select {
  padding-right: 34px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Đặt lớp này lên chính ô lưới chứa <select> (xem pages/auth/register.php). */
.lp-nb-field-select {
  position: relative;
}

.lp-nb-field-select::after {
  content: "";
  position: absolute;
  right: 12px;
  /*
   * Neo theo ĐÁY chứ không theo giữa: ô lưới chứa cả nhãn lẫn <select>, top:50%
   * rơi vào khoảng giữa hai thứ đó. <select> cao 50px và là phần tử cuối.
   */
  bottom: 25px;
  width: 14px;
  height: 14px;
  transform: translateY(50%);
  pointer-events: none;
  background-color: var(--font-color);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- radio dạng chip (kênh nhận OTP) --- */
/*
 * Ẩn ô radio bằng opacity+absolute chứ KHÔNG display:none — display:none mất
 * luôn tiêu điểm bàn phím, người dùng Tab sẽ nhảy vọt qua.
 */
.lp-nb-choice {
  display: flex;
  gap: 10px;
  width: 100%;
}

.lp-nb-chip {
  flex: 1;
  position: relative;
  min-width: 0;
  cursor: pointer;
}

.lp-nb-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.lp-nb-chip-face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 44px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1.5px solid var(--main-color);
  background-color: var(--bg-color);
  font-size: 14px;
  font-weight: 500;
  color: var(--font-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: border-color 150ms, background-color 150ms;
}

/* Chip được chọn: viền + nhuộm nhấn nhạt — người dùng phải thấy chắc chắn. */
.lp-nb-chip input:checked + .lp-nb-chip-face {
  border-color: var(--input-focus);
  background-color: var(--lp-accent-sub);
  color: var(--lp-ink);
  font-weight: 600;
}

.lp-nb-chip input:focus-visible + .lp-nb-chip-face {
  outline: 3px solid var(--input-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   PHẦN MỞ RỘNG CHO CHUỖI OTP (xác thực mã / đặt lại mật khẩu)
   ========================================================================== */

/*
 * Trang OTP có HAI biểu mẫu (gửi mã / xin gửi lại) — không lồng <form> trong
 * <form> được, nên ở đó .lp-nb-form là một <div> bọc cả hai.
 */
.lp-nb-form > form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  margin: 0;
}

.lp-nb-hint {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--font-color-sub);
}

/*
 * Ô nhập mã OTP: sáu chữ số giãn rộng. inputmode=numeric ở HTML để điện thoại
 * bật bàn phím số — type=number thì trình duyệt gắn mũi tên tăng giảm vô nghĩa.
 */
.lp-nb-form input.lp-nb-otp {
  height: 58px;
  text-align: center;
  font-family: var(--lp-f-data, ui-monospace, monospace);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 10px;
  /* Bù giãn cách thừa bên phải ký tự cuối, nếu không chữ lệch trái. */
  text-indent: 10px;
}

/* --- ô hiển thị nơi nhận mã --- */
.lp-nb-target {
  display: inline-block;
  max-width: 100%;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1.5px solid var(--main-color);
  background-color: var(--bg-color);
  font-family: var(--lp-f-data, ui-monospace, monospace);
  font-size: 13px;
  font-weight: 700;
  color: var(--font-color);
  word-break: break-all;
}

/* --- đoạn mô tả trong khung --- */
.lp-nb-desc {
  margin: -2px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--font-color-sub);
}

.lp-nb-desc strong {
  color: var(--font-color);
}

@media (prefers-reduced-motion: reduce) {

  .lp-nb-form input,
  .lp-nb-form select,
  .lp-nb-form .lp-inline-field,
  .lp-nb-btn,
  .lp-nb-chip-face {
    transition: none;
  }
}