/* Kiểu riêng của trang dang-ky-dung-thu.html
   ------------------------------------------------------------
   Trước đây khối này nằm thẳng trong thẻ <style> của file HTML.
   Tách ra đây để CSP không còn phải mở style-src cho 'unsafe-inline':
   đóng được cửa đó thì kẻ chèn được mã vào trang cũng không dựng
   nổi một khối <style> giả để che nút, đè nội dung hay dò dữ liệu
   người dùng gõ vào form bằng mẹo selector.
   Nạp SAU styles.css nên vẫn ghi đè được như khi còn nằm trong HTML. */

.reg {
  position: relative; overflow: hidden; min-height: 100vh; isolation: isolate;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 40px 22px 64px;
}
/* ảnh nền trang đăng ký */
.reg::after {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: url("dang-ky-bg.jpg") center / cover no-repeat;
      filter: brightness(1.24) contrast(1.10) saturate(1.12) hue-rotate(28deg);
}
/* lớp phủ tối để form luôn đọc rõ */
.reg__veil {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(13,13,26,0.66), rgba(13,13,26,0.54) 45%, rgba(13,13,26,0.74));
}
.reg::before {
  content: ""; position: absolute; z-index: 0; top: 8%; left: 50%;
  width: min(760px, 120vw); height: min(760px, 120vw); transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(37, 99, 235,0.16), transparent 62%); pointer-events: none;
}

.reg__brand {
  position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 2px;
  text-decoration: none; font-family: var(--f-head); font-size: 22px; font-weight: 800;
  opacity: .92; margin-bottom: 26px; transition: opacity .2s ease;
}
.reg__brand:hover { opacity: 1; }
.reg__brand img { height: 34px; width: auto; margin-right: 2px; }

.reg__card {
  position: relative; z-index: 1; width: 100%; max-width: 620px;
  background: linear-gradient(180deg, rgba(20,18,42,0.72), rgba(11,11,20,0.72));
  border: 1px solid rgba(37, 99, 235,0.28); border-radius: 22px;
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 24px 70px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: regRise .6s cubic-bezier(.22,1,.36,1) both;
}
@keyframes regRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.reg__title {
  font-family: var(--f-head); font-weight: 800; color: #fff; line-height: 1.15;
  font-size: clamp(24px, 4vw, 34px); margin-bottom: 10px;
}
.reg__sub { color: rgba(255,255,255,0.6); font-size: 15px; line-height: 1.6; margin-bottom: 26px; }

.reg__field { margin-bottom: 20px; }
.reg__label { display: block; font-weight: 700; color: #fff; font-size: 15px; margin-bottom: 9px; }
.reg__req { color: #ff7a6b; margin-left: 2px; }

.reg__input, .reg__select, .reg__textarea {
  width: 100%; font-family: var(--f-body); font-size: 15.5px; color: #fff;
  background: rgba(10,10,20,0.6); border: 1.5px solid rgba(37, 99, 235,0.28); border-radius: 12px;
  padding: 15px 16px; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  -webkit-appearance: none; appearance: none;
}
.reg__input::placeholder, .reg__textarea::placeholder { color: rgba(255,255,255,0.32); }
/* Bấm chuột vào ô: đổi màu viền và quầng nhẹ, KHÔNG hiện vòng sáng
   (bấm chuột mà hiện vòng thì nhìn rối). */
.reg__input:focus, .reg__select:focus, .reg__textarea:focus {
  border-color: var(--blue); background: rgba(37, 99, 235,0.08);
  box-shadow: 0 0 0 3px rgba(37, 99, 235,0.18);
}
.reg__input:focus:not(:focus-visible),
.reg__select:focus:not(:focus-visible),
.reg__textarea:focus:not(:focus-visible) { outline: none; }
/* Đi bằng BÀN PHÍM thì phải thấy rõ mình đang ở ô nào. Trước đây dòng
   trên để "outline: none" trần, nên tab qua form là mất dấu hoàn toàn.
   File này nạp SAU styles.css nên phải sửa ở đây, chứ thêm quy tắc bên
   styles.css thì bị dòng này đè mất. */
.reg__input:focus-visible,
.reg__select:focus-visible,
.reg__textarea:focus-visible {
  outline: 3px solid var(--blue-pale);
  outline-offset: 2px;
}
.reg__textarea { resize: vertical; min-height: 108px; line-height: 1.6; }
.invalid { border-color: #ff6b6b !important; box-shadow: 0 0 0 3px rgba(255,107,107,0.14) !important; }

/* mũi tên cho ô chọn vai trò */
.reg__selectwrap { position: relative; }
.reg__selectwrap::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid rgba(96, 165, 250,0.9); border-bottom: 2px solid rgba(96, 165, 250,0.9);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.reg__select { cursor: pointer; padding-right: 42px; }
.reg__select option { color: #111; }
.reg__select:required:invalid { color: rgba(255,255,255,0.32); }

.reg__hint { color: rgba(255,255,255,0.42); font-size: 13px; margin-top: 8px; line-height: 1.5; }

.reg__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 100%;
  font-family: var(--f-body); font-weight: 700; font-size: 16px; color: #fff; cursor: pointer;
  /* Xanh công nghệ, cùng tông với nút "Đăng ký dùng thử sản phẩm" trên thanh menu */
  background: linear-gradient(135deg, var(--blue-deep), #14318F); color: #fff;
  border: 1.5px solid rgba(147, 197, 253, .85); border-radius: 14px; padding: 16px; margin-top: 6px;
  box-shadow: 0 6px 20px rgba(29, 78, 216, .42), inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, background .2s ease;
}
.reg__btn:hover:not(:disabled) { background: linear-gradient(135deg, var(--blue), var(--blue-deep)); border-color: #BFDBFE; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 30px rgba(37, 99, 235, .55), 0 0 22px rgba(96, 165, 250, .4), inset 0 1px 0 rgba(255,255,255,.24); }
.reg__btn:active:not(:disabled) { transform: translateY(0) scale(.99); }
.reg__btn:disabled { opacity: .8; cursor: default; }

.reg__note { margin-top: 14px; font-size: 14px; line-height: 1.55; min-height: 1px; }
.reg__note--ok { color: #86efac; }
.reg__note--error { color: #ff9a8f; }

.reg__back { position: relative; z-index: 1; margin-top: 22px; }
.reg__back a { color: rgba(96, 165, 250,0.85); text-decoration: none; font-size: 14px; }
.reg__back a:hover { color: #fff; }

/* ---------- ĐIỆN THOẠI ---------- */
@media (max-width: 1024px) {
  /* Ảnh nền nhẹ hơn cho màn hình nhỏ (30KB thay vì 149KB) và hiện NGUYÊN
     KHUNG HÌNH: rộng bằng màn hình, cao đúng tỉ lệ gốc, rồi tan dần
     xuống nền tím — thay vì bị phóng to cắt cụt như trước. */
  .reg::after {
    background-image: url("dang-ky-bg-m.jpg");
    background-size: 100% auto;
    background-position: top center;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 0, #000 38vw, transparent 57vw);
            mask-image: linear-gradient(180deg, #000 0, #000 38vw, transparent 57vw);
  }
  .reg__veil {
    background: linear-gradient(180deg,
      rgba(13,13,26,0.52) 0, rgba(13,13,26,0.58) 40vw, rgba(13,13,26,0.86) 70vw, rgba(13,13,26,0.92) 100%);
  }

  /* 16px là ngưỡng để iOS Safari KHÔNG tự phóng to trang khi bấm vào ô nhập */
  .reg__input, .reg__select, .reg__textarea { font-size: 16px; padding: 15px 16px; }
  .reg__select { padding-right: 42px; }

  /* nút chính: to, rộng gần hết chiều ngang, nổi bật */
  .reg__btn {
    font-size: 17px; padding: 17px; min-height: 56px; border-radius: 15px;
    background: linear-gradient(135deg, var(--blue-deep), #14318F);
    box-shadow: 0 10px 28px rgba(29, 78, 216, 0.45), inset 0 1px 0 rgba(255,255,255,.18);
  }
  /* vùng chạm đủ lớn cho 2 liên kết nhỏ */
  .reg__brand { min-height: 44px; }
  .reg__back a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; font-size: 15px; }

  /* chừa chỗ cho tai thỏ / thanh vuốt của iPhone */
  .reg {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: calc(48px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 480px) {
  .reg { padding-top: 24px; }
  .reg__card { padding: 22px 18px; border-radius: 18px; }
  .reg__sub { margin-bottom: 20px; }
  .reg__field { margin-bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .reg__card { animation: none; } }