/* Popup "Trở thành Thành viên VNE" — 4 thẻ chọn cách bắt đầu.
   Dựng trên class theme vne-v3 đã có (.vn-dialog__overlay, .vn-dialog) nên file này chỉ chứa phần RIÊNG (tiền tố .bm-, BEM nhẹ).
   Không inline style, không !important, cỡ chữ theo rem. Dùng biến của theme: --brand-*, --accent-*, --text-*, --border-*, --shadow-*, --font-*.
   Bố cục lưới theo bề rộng màn hình: ≥ 60rem → 4 thẻ trên MỘT hàng · 36–60rem → 2×2 · ≤ 36rem → 1 cột (thẻ nằm ngang).
   Markup: Views/Shared/_BecomeMemberModal.cshtml · Logic: js/become-member/become-member.js */

/* ── Lớp phủ + khung ───────────────────────────────────────────────────── */

/* .vn-dialog__overlay đặt display:flex nên thuộc tính hidden của HTML bị đè — khai lại để ẩn/hiện bằng hidden. */
.bm-overlay[hidden] { display: none; }

html.bm-scroll-lock { overflow: hidden; }

.bm-dialog {
  --dialog-w: 58rem;   /* vừa đủ cho 4 thẻ một hàng; màn hẹp hơn thì hộp co theo màn hình */
  position: relative;
  max-height: calc(100vh - 2rem);
  border-radius: 2rem;   /* cùng độ bo với popup đăng nhập */
}

@supports (height: 100dvh) {
  .bm-dialog { max-height: calc(100dvh - 2rem); }
}

.bm-dialog:focus { outline: none; }

/* Nền chuyển nhẹ từ xanh brand nhạt (đầu thẻ, sau tiêu đề) sang trắng ở phần thẻ chọn. */
.bm-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 3rem 1.5rem 1.75rem;
  background: linear-gradient(180deg, var(--brand-50) 0, var(--surface-card) 9rem);
  scrollbar-width: thin;
}

.bm-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.125rem;
  height: 2.125rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}

.bm-close:hover { background: var(--surface-scrim); color: var(--text-primary); }
.bm-close:focus-visible { outline: none; box-shadow: var(--ring-brand); }

/* ── Đầu trang ──────────────────────────────────────────────────────────── */

.bm-head { text-align: center; }

.bm-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.625rem;
  font-weight: var(--weight-extra);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--brand-800);
  text-wrap: balance;   /* câu tiêu đề khá dài: khi xuống dòng thì chia đều, không để sót một từ lẻ */
}

/* Cụm chữ có nghĩa (markup bọc sẵn): trình duyệt chỉ xuống dòng GIỮA các cụm, không cắt đôi từ ghép kiểu "doanh / nghiệp".
   inline-block thay vì nowrap: cụm nào dài hơn cả dòng (màn rất hẹp) vẫn tự xuống dòng bên trong, không tràn khỏi thẻ. */
.bm-keep { display: inline-block; }

/* ── Lưới 4 thẻ (mặc định 2×2; ≥ 60rem một hàng 4 thẻ; ≤ 36rem một cột) ─────────────── */

.bm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 60rem) {
  .bm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Thẻ hiện lần lượt từ dưới lên khi popup mở (display:none → block khởi động lại hoạt ảnh). */
.bm-grid > li {
  display: flex;
  animation: bm-rise var(--duration-slow) var(--ease-out) both;
}

.bm-grid > li:nth-child(2) { animation-delay: 60ms; }
.bm-grid > li:nth-child(3) { animation-delay: 120ms; }
.bm-grid > li:nth-child(4) { animation-delay: 180ms; }

@keyframes bm-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.bm-card {
  --bm-tint: var(--brand-50);
  --bm-ink: var(--brand-600);
  --bm-edge: var(--brand-300);
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;   /* icon ở trên chữ, nằm giữa thẻ */
  gap: 0.75rem;
  width: 100%;
  padding: 1rem;
  overflow: hidden;
  text-align: center;
  font: inherit;
  color: inherit;
  cursor: pointer;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 1rem;
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

/* Hai thẻ chéo nhau dùng tông đất nung (accent) để hàng thẻ có nhịp màu, không đơn điệu. */
.bm-card--accent {
  --bm-tint: var(--accent-50);
  --bm-ink: var(--accent-600);
  --bm-edge: var(--accent-300);
}

/* Vạch màu mảnh trên đỉnh thẻ, chỉ hiện khi rê chuột / focus. */
.bm-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0.1875rem;
  background: var(--bm-ink);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.bm-card:hover {
  transform: translateY(-3px);
  border-color: var(--bm-edge);
  box-shadow: var(--shadow-lg);
}

.bm-card:active { transform: translateY(-1px); }

.bm-card:focus-visible {
  outline: none;
  border-color: var(--bm-ink);
  box-shadow: 0 0 0 3px var(--bm-tint), 0 0 0 4px var(--bm-ink);
}

.bm-card:hover::before,
.bm-card:focus-visible::before { opacity: 1; }

/* Icon 3D (ảnh WebP vuông 192px, nền trong suốt) hiển thị 88px; rê chuột / focus thì nổi nhẹ lên. */
.bm-card__icon {
  display: block;
  flex: none;
  width: 5.5rem;
  height: 5.5rem;
  object-fit: contain;
  transition: transform var(--duration-base) var(--ease-out);
}

.bm-card:hover .bm-card__icon,
.bm-card:focus-visible .bm-card__icon { transform: translateY(-3px) scale(1.06); }

.bm-card__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.bm-card__title {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: var(--weight-extra);
  line-height: 1.3;
  color: var(--text-primary);
  text-wrap: balance;
}

.bm-card__desc {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-secondary);
  text-wrap: balance;
}

/* Bố cục lưới (4 thẻ một hàng và 2×2): tiêu đề nào cũng đúng 2 dòng cho đồng bộ — mỗi tiêu đề gồm đúng 2 cụm bm-keep, mỗi cụm một dòng
   ("Công bố / Hồ sơ Tín nhiệm", "Đăng nhu cầu / kết nối", "Đăng chương trình / trải nghiệm", "Tham gia cộng đồng / VNE Hub"). Nhờ vậy phần mô tả
   của các thẻ cùng hàng cũng thẳng hàng. Màn hẹp (≤ 36rem) là danh sách một cột nên để chữ tự xuống dòng. */
@media (min-width: 36.0625rem) {
  .bm-card__title .bm-keep { display: block; }
}

/* Mũi tên góc phải: trượt vào khi rê chuột / focus; thiết bị cảm ứng không có hover nên hiện sẵn. */
.bm-card__go {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--bm-tint);
  color: var(--bm-ink);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-out);
}

.bm-card__go svg { width: 0.875rem; height: 0.875rem; }

.bm-card:hover .bm-card__go,
.bm-card:focus-visible .bm-card__go {
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .bm-card__go { opacity: 1; transform: none; }
}

/* ── Màn hình hẹp (≤ 36rem): một cột, thẻ nằm ngang (icon trái · chữ giữa · mũi tên phải) cho đỡ cao ──
   Icon, mũi tên, khoảng đệm đều thu nhỏ để nhường bề ngang cho chữ: tiêu đề vừa một dòng từ 360px, mô tả 2–3 dòng thay vì 4–5,
   và cả 4 thẻ lọt trong một màn hình điện thoại phổ biến (360×640) mà không phải cuộn. */

@media (max-width: 36rem) {
  .bm-overlay { padding: 0.75rem; }
  .bm-body { padding: 2.75rem 1rem 1.25rem; }
  .bm-title { font-size: 1.3125rem; }
  .bm-grid { grid-template-columns: minmax(0, 1fr); gap: 0.625rem; margin-top: 1.125rem; }

  .bm-card {
    flex-direction: row;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem;
    text-align: left;
  }

  .bm-card__icon { width: 3rem; height: 3rem; }

  /* Chữ căn trái: "pretty" lấp đầy dòng và chỉ tránh để sót một cụm lẻ ở dòng cuối ("balance" chia đều dòng sẽ để thừa khoảng trắng bên phải). */
  .bm-card__desc { text-wrap: pretty; }

  .bm-card__go {
    position: static;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    opacity: 1;
    transform: none;
  }

  .bm-card__go svg { width: 0.75rem; height: 0.75rem; }
}

/* Dưới 360px (máy rất hẹp): bỏ cột mũi tên — cả thẻ đã là nút bấm có viền rõ — và thu icon, tiêu đề thêm một bậc để chữ còn đủ chỗ. */
@media (max-width: 22.4375rem) {
  .bm-title { font-size: 1.1875rem; }
  .bm-card__icon { width: 2.5rem; height: 2.5rem; }
  .bm-card__go { display: none; }
}

/* ── Màn hình thấp (điện thoại nằm ngang…): nén bớt để thấy được nhiều thẻ hơn ── */

@media (max-height: 40rem) {
  .bm-body { padding-top: 2.5rem; padding-bottom: 1.25rem; }
  .bm-grid { margin-top: 0.875rem; }
}

/* ── Giảm chuyển động ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .bm-grid > li { animation: none; }

  .bm-card,
  .bm-card::before,
  .bm-card__icon,
  .bm-card__go { transition: none; }

  .bm-card:hover,
  .bm-card:active { transform: none; }

  .bm-card:hover .bm-card__icon,
  .bm-card:focus-visible .bm-card__icon { transform: none; }
}