/* ============================================================
   project-page.css — Trang Dự án (18) & Chi tiết dự án (19)
   Dùng chung cho: du-an.html · du-an-chi-tiet.html
   Chỉ chứa style riêng của 2 trang này. Component dùng lại
   (.breadcrumb / .page-head / .project-card / .tile-card /
   .band-grey / .nav-group / .sec-head) nằm trong common.css §15.
   ============================================================ */

/* ============================================================
   A · TRANG DỰ ÁN (du-an.html)
   ============================================================ */

/* Breadcrumb đã có padding riêng, bỏ bớt padding-top của section
   để tổng khoảng cách dưới header không bị gấp đôi. */
.page-project .p-list { padding-top: 0; }

/* --- Lưới dự án + hàng lọc ---
   Từ 30/07/2026 khối này KHÔNG còn là Swiper: bộ lọc và phân trang phải tính
   chung một lượt nên chuyển hẳn sang catalog.js (xem chú thích trong du-an.html).
   Lưới lấy .grid-3 của common.css, ở đây chỉ lo hàng lọc và nhịp dọc. */
.p-list__grid { row-gap: clamp(26px, 3.2vw, 40px); }

.p-list__filters {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px; margin-bottom: clamp(18px, 2.4vw, 26px);
}
/* Ô lọc trong hàng ngang cần bề rộng có giới hạn — .re-select-main--field vốn
   dựng cho sidebar dọc nên mặc định là width:100%, để nguyên thì mỗi ô chiếm
   trọn một dòng. */
.p-list__filters .re-select-main--field { flex: 0 1 300px; min-width: 220px; }
.p-list__filters .filter__reset { flex: none; }

.p-list .pagination { margin-top: clamp(28px, 3.4vw, 44px); }

/* ============================================================
   B · TRANG CHI TIẾT DỰ ÁN (du-an-chi-tiet.html)
   ============================================================ */

.page-project-detail .p-detail__head { padding-bottom: 0; }

/* Dòng địa danh dưới tiêu đề — biến thể của .page-head */
.page-head__place {
  margin-top: 10px;
  font-size: var(--fs-xs);
  color: var(--c-muted);
}

/* --- 1 · Ảnh hero bo góc --- */
.p-hero {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-grey-light);
  aspect-ratio: 2 / 1;
  cursor: zoom-in;
}
.p-hero img { width: 100%; height: 100%; object-fit: cover; }

/* --- 2 · Khối mô tả 2 cột: văn bản trái · ảnh phải --- */
.p-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.p-intro__text { max-width: 46ch; }
.p-intro__text p { font-size: var(--fs-body); line-height: 1.75; color: var(--c-body); }
.p-intro__text p + p { margin-top: 14px; }

.p-intro__media {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-grey-light);
  aspect-ratio: 6 / 5;
  cursor: zoom-in;
}
.p-intro__media img { width: 100%; height: 100%; object-fit: cover; }

/* --- 3 · Thư viện ảnh trên dải nền xám --- */
/* Ảnh tràn ra ngoài mép khung để lộ slide kế tiếp, đúng như ghi chú
   đỏ ở trang 19 file thiết kế. */
.p-detail__gallery .p-gallery__swiper { overflow: visible; }
/* Cắt ĐÚNG MỘT TRỤC — chỉ chiều ngang, đúng việc cần làm (chặn slide tràn ra làm
   trang cuộn ngang). Trước đây là `overflow: hidden`, tức cắt luôn chiều dọc, và
   đó là một cái bẫy đã bắn trúng cụm mũi tên bên dưới ("thiếu mũi tên trang chi
   tiết dự án", 30/07/2026 — main.js §REVEAL_SKIP giữ .nav-group ngoài reveal để
   dứt điểm chuyện đó, ở đây gỡ CƠ CHẾ gây ra nó):

   .p-gallery__nav là con CUỐI của khung, mép dưới của nó TRÙNG mép dưới khung.
   Trạng thái chưa-reveal của common.css §14 là `translateY(56px)`, nên phần tử bị
   đẩy hẳn xuống dưới vùng cắt (đo được: rect 710–752px, vùng cắt dừng ở 697px).
   IntersectionObserver tính vùng giao SAU KHI cắt bởi overflow của tổ tiên → vùng
   giao luôn bằng 0 → `isIntersecting` không bao giờ true → .is-inview không bao
   giờ được gắn → phần tử nằm mãi ở `opacity: 0`. Chỉ phần tử THẤP HƠN quãng trượt
   56px mới bị cắt sạch kiểu đó, nên hàng nút 41px mất tăm trong khi lưới logo đối
   tác 84px của gioi-thieu.html (cùng kiểu khung, about.css:187) vẫn hiện.

   PHẢI là `clip` chứ không phải `hidden`: cặp (hidden, visible) bị CSS quy về
   (hidden, auto) — sinh ra một khung cuộn dọc lồng trong trang. Cặp (clip,
   visible) hợp lệ, giữ nguyên `visible` ở trục dọc. */
.p-detail__gallery .container { overflow-x: clip; }

.p-shot {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-grey-light);
  aspect-ratio: 16 / 9;
  cursor: zoom-in;
}
.p-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-media) var(--ease); }
.p-shot:hover img { transform: scale(1.03); }

.p-gallery__nav { margin-top: clamp(22px, 2.6vw, 32px); }
/* Nút trên dải nền xám (--c-grey = #c9c9c9) — DẠNG VIỀN, giữ đồng bộ từng chữ
   với `.a-gallery .nav-btn` (news-page.css) vì hai chỗ là CÙNG một dải nền xám;
   lý do đầy đủ ghi ở đó. Tóm lại: `background: #fff` trên nền xám đọc ra một đĩa
   tô đặc chứ không phải nút viền, còn viền --c-line-strong (#c4c4c4) thì gần
   trùng nền #c9c9c9 nên mất hút — client báo cả hai kiểu ("thiếu mũi tên", rồi
   "dạng filled"). Nền trong suốt + viền rgba(0,0,0,.45) cho ~2.8:1 với nền.

   TỪ PHẢN HỒI MONA R1 (tr.9), .m-project (home.css §5) và .job-card
   (common.css §15.6) ĐÃ NHẬP vào cùng công thức này — trước đó hai chỗ đó cố ý
   tách ra vì nền của chúng là --c-grey-light #eaeaea sáng hơn. Viền
   rgba(0,0,0,.45) cho ~3.2:1 trên #eaeaea nên dùng chung được. Giờ sửa MỘT chỗ
   là phải soi cả BỐN.

   Viền rgba(0,0,0,.12) của bản đầu là mức QUÁ NHẠT đã bị client trả lại, đừng
   lùi về đó.

   PHẢI khai đủ CẢ BA thuộc tính ở cả hai trạng thái: `.p-gallery__nav .nav-btn`
   là (0,2,0), đúng BẰNG `.nav-btn:hover` của common.css, mà project-page.css nạp
   sau — nên mọi thuộc tính khai ở đây sẽ THẮNG cả lúc hover. Bản trước chỉ khai
   border-color, kết quả là hover đổi nền xanh nhưng viền kẹt ở màu nhạt. */
.p-gallery__nav .nav-btn {
  background: transparent; border-color: rgba(0, 0, 0, .45); color: var(--c-ink);
}
.p-gallery__nav .nav-btn:hover {
  background: var(--c-primary); border-color: var(--c-primary); color: #fff;
}

/* --- 4 · Sản phẩm sử dụng trong dự án --- */
.p-detail__used .sec-head h2 { font-weight: var(--fw-title); }
.p-used__nav { margin-top: clamp(24px, 3vw, 38px); }

/* ============================================================
   C · RESPONSIVE (1024 / 720 / 640 — theo common.css §16)
   ============================================================ */
@media (max-width: 1024px) {
}

@media (max-width: 720px) {
  .p-intro { grid-template-columns: 1fr; gap: 24px; }
  .p-intro__text { max-width: none; order: 2; }
  .p-intro__media { order: 1; aspect-ratio: 4 / 3; }
  .p-hero { aspect-ratio: 16 / 9; }
}

@media (max-width: 640px) {
  .p-hero { aspect-ratio: 4 / 3; }
  .p-shot { aspect-ratio: 4 / 3; }

  /* ---- Hàng lọc: hai ô nằm ngang, nút đặt lại ở cuối ----
     Bản flex cũ đặt `min-width: 180px` cho mỗi ô: ở màn 375px, khung trong chỉ
     còn 343px nên hai ô + nút reset không đủ chỗ trên một dòng và rơi xuống mỗi
     ô một dòng, kéo theo nút reset đứng trơ một mình ở dòng thứ ba.

     Chuyển sang grid `1fr 1fr auto`: hai ô chia đôi phần dư dù màn hẹp tới đâu,
     nút reset (kích thước cố định) luôn nằm cuối cùng hàng. min-width: 0 là bắt
     buộc — mặc định min-width:auto của grid item không cho ô co dưới bề rộng
     nội dung, chính nó gây tràn. */
  .p-list__filters {
    display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px;
  }
  .p-list__filters .re-select-main--field { flex: initial; min-width: 0; }
  /* padding 16px → 10px để nhãn "Khu vực" / "Loại hình" cùng mũi tên còn đủ chỗ. */
  .p-list__filters .re-select__btn { padding: 0 10px; }
}

/* .project-card__desc (mô tả 3 dòng dưới mỗi thẻ) đã bỏ theo yêu cầu client ở
   pass 30/07 — thẻ dự án giờ chỉ còn ảnh + tên + địa điểm, mô tả đầy đủ nằm ở
   trang chi tiết. Không giữ rule mồ côi ở đây. */