/* =====================================================================
   NHÓM SALE
   ---------------------------------------------------------------------
   Dùng lại biến màu của styles.css. Đừng đặt màu mới ở đây — tỉ lệ
   tương phản đã ghi rõ bên đó.

   Mã mời là thứ người ta ĐỌC QUA ĐIỆN THOẠI cho đồng nghiệp, nên nó to,
   giãn ký tự và dùng phông đều nét. Đọc nhầm một ký tự là gõ lại từ đầu.
   ===================================================================== */

.nh-nut {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 12px;
}
/* Ngón tay, không phải con trỏ chuột: 44px là mức chạm tối thiểu. */
.nh-nut .btn { min-height: 44px }

.nh-form { margin-top: 12px }
.nh-form .fld { display: block; max-width: 340px }
.nh-form input {
  width: 100%;
  background: var(--bg, #0c1119);
  color: var(--tx, #eaeef6);
  border: 1px solid var(--line2, #3f4b5e);
  border-radius: 8px;
  padding: 10px 11px;
  font: inherit;
  /* 16px để iPhone không tự phóng to trang khi chạm vào ô nhập */
  font-size: 16px;
  outline: none;
}
.nh-form input:focus { border-color: var(--acc2, #5cb2ff) }

.nh-ma-nhap {
  text-transform: uppercase;
  letter-spacing: .28em;
  font-weight: 700;
  font-size: 20px !important;
  text-align: center;
}

/* ---- Mã mời của nhóm mình ---- */
.nh-ma-khoi {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding: 12px 14px;
  background: var(--card2, #26303f);
  border: 1px dashed var(--line2, #3f4b5e);
  border-radius: 10px;
}
.nh-ma {
  font-size: 26px; font-weight: 700;
  letter-spacing: .22em;
  font-variant-numeric: tabular-nums;
  color: var(--acc2, #5cb2ff);
  /* Chọn được bằng cách quét, cho người không bấm nút Chép mã */
  user-select: all;
}

/* ---- Thành viên ---- */
.nh-tv { margin-top: 14px }
.nh-tv ul {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.nh-tv li {
  padding: 5px 11px; border-radius: 999px;
  background: var(--card2, #26303f);
  border: 1px solid var(--line, #303b4c);
  font-size: 13px;
}

.nh-luu-y { margin: 12px 0 0; color: var(--tx3, #93a0b2); max-width: 62ch }

.nh-bao { margin: 12px 0 0 }
.nh-bao.loi { color: var(--bad, #ea7b70) }
.nh-bao.ok  { color: var(--good, #6fcf97) }

/* ---- Chuông báo có chính sách nhóm mới ---- */
.nh-chuong {
  margin-bottom: 14px;
  border-color: var(--warn, #e3ad60);
}
.nh-chuong-dau {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.nh-cham {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--warn, #e3ad60);
  flex: 0 0 auto;
  animation: nh-tho 1.8s ease-in-out infinite;
}
@keyframes nh-tho { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
/* Người dùng tắt hiệu ứng trong cài đặt máy thì đừng nhấp nháy. */
@media (prefers-reduced-motion: reduce) {
  .nh-cham { animation: none }
}

/* ---- Bảng xem trước: cũ gạch ngang, mới đậm ---- */
.nh-xem {
  margin-top: 12px;
  display: flex; flex-direction: column; gap: 10px;
  /* Chia sẻ cả bảng 25 xe thì danh sách này dài. Cuộn trong khối, để
     hai nút Áp dụng / Đóng luôn nằm trong tầm mắt. */
  max-height: 46vh; overflow-y: auto;
  padding: 12px;
  background: var(--bg, #0c1119);
  border: 1px solid var(--line, #303b4c);
  border-radius: 10px;
}
.nh-xe b { font-size: 13.5px }
.nh-xe ul { list-style: none; margin: 5px 0 0; padding: 0 }
.nh-xe li {
  font-size: 13px; color: var(--tx2, #aeb9ca);
  padding: 2px 0;
  font-variant-numeric: tabular-nums;
}
.nh-xe s { color: var(--tx3, #93a0b2) }
.nh-xe li b { color: var(--good, #6fcf97); font-size: 13px }

@media (max-width: 560px) {
  .nh-nut .btn { flex: 1 1 100% }
  .nh-ma { font-size: 22px }
}