/* ════════════════════════════════════════════════════════════════════════════
   NBRE · nav-menu.css — BẢNG MEGA MENU
   ────────────────────────────────────────────────────────────────────────────
   Đi kèm nav-menu.js. CSS cho nút/mũi tên/trạng thái mở ĐÃ CÓ SẴN trong
   components.css (`.navm`, `.navm__btn`, `.navm__car`, `.navm.is-open`) — tệp này
   CHỈ thêm phần bảng, phần trước nay bị thiếu nên hai nút mở ra không có gì.
   ⛔ Đừng khai lại `.navm` / `.navm__btn` ở đây: hai nguồn cho một khối là drift.

   Nền theo `--ink` ⇒ tự lật đúng ở chế độ Sáng, không cần vào nhóm giữ-nền-tối.
   ════════════════════════════════════════════════════════════════════════════ */

.navm__panel {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  z-index: 60;
  min-width: min(30rem, 86vw);
  padding: clamp(1.4rem, 2vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--ink) 94%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 34px 80px -34px var(--ink);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.26s var(--ease),
    transform 0.26s var(--ease);
}
/* `hidden` gỡ khỏi luồng khi đóng; `.is-open` mới cho hiện. Hai lớp: một cho
   trình đọc màn hình, một cho mắt. */
.navm__panel[hidden] { display: none; }
.navm.is-open .navm__panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Có tài sản nổi bật ⇒ hai cột. KHÔNG có ⇒ một cột, bảng tự hẹp lại.
   Đây là chỗ luật "thiếu thì ẨN" thành hình: không bao giờ có ô trống chờ ảnh. */
.navmp__cols { display: grid; gap: clamp(1.2rem, 2vw, 2.2rem); }
.navm__panel--feat { min-width: min(46rem, 92vw); }
.navm__panel--feat .navmp__cols { grid-template-columns: 1fr minmax(12rem, 15rem); }

.navmp__list { list-style: none; margin: 0; padding: 0; }
.navmp__list li + li { margin-top: 0.15rem; }
.navmp__list a {
  display: block;
  padding: 0.62rem 0.7rem;
  border-radius: var(--r-0);
  text-decoration: none;
  transition: background 0.22s var(--ease);
}
.navmp__list a:hover { background: color-mix(in srgb, var(--nbre-ivory) 6%, transparent); }
.navmp__list a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.navmp__t {
  display: block;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--text);
  letter-spacing: 0.02em;
}
/* Dòng mô tả — VĂN XUÔI NGẮN ⇒ dùng --text-soft, không dùng --text.
   (Dải tương phản khoá 29/08: đoạn đọc trên nền tối ở 9–12:1, không phải 17,7:1.) */
.navmp__d {
  display: block;
  margin-top: 0.16rem;
  font-family: var(--sans);
  font-size: var(--fs-2xs);
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* ── Cột phải: MỘT hồ sơ thật ─────────────────────────────────────────────── */
.navmp__feat {
  display: block;
  text-decoration: none;
  border-left: 1px solid var(--line);
  padding-left: clamp(1.1rem, 1.8vw, 1.8rem);
}
.navmp__feat-img {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-0);
  background: color-mix(in srgb, var(--nbre-ivory) 5%, transparent);
}
.navmp__feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.navmp__feat-lab {
  display: block;
  margin-top: 0.7rem;
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-wide, 0.18em);
  text-transform: uppercase;
  color: var(--muted);
}
.navmp__feat-name {
  display: block;
  margin-top: 0.28rem;
  font-family: var(--display);
  font-size: var(--fs-md);
  color: var(--text);
  line-height: 1.3;
}
.navmp__feat-loc {
  display: block;
  margin-top: 0.14rem;
  font-size: var(--fs-2xs);
  color: var(--muted);
}
.navmp__price {
  display: block;
  margin-top: 0.4rem;
  font-family: var(--sans);
  font-size: var(--fs-sm);
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* Khổ nhỏ: ngăn kéo điện thoại đã có lối đi riêng (.navdw) — bảng thả xuống chỉ
   dành cho khổ lớn. Dưới 820px thì không dựng để tránh hai hệ điều hướng chồng nhau. */
@media (max-width: 820px) {
  .navm__panel { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .navm__panel { transition: none; }
}