/* ============================================================
   sanitary.css — Trang Thiết bị vệ sinh (13) & Chi tiết TBVS (14)
   Dùng cho: thiet-bi-ve-sinh.html · thiet-bi-ve-sinh-chi-tiet.html
   Nạp SAU common.css.
   Card (.tile-card), bộ lọc (.filter__group/.check), gallery, .spec,
   .pagination… nằm trong common.css §15 — ở đây chỉ bổ sung phần riêng.
   Ảnh sản phẩm Tepe lấy từ file thiết kế PA1-R6 (trang 13, 14).
   ============================================================ */

/* ===== 1 · BANNER (trang 13) ===== */
/* Ảnh banner dùng .page-banner__img của common.css, không cần bổ sung. */

/* ===== 2 · DANH SÁCH + BỘ LỌC (trang 13) ===== */
.sanitary-list { padding-bottom: var(--sp-section); }

/* Accordion lọc (viên thuốc khi đóng, khung bo góc khi mở), ô tick và trạng
   thái "đã chọn" nay dùng chung với trang Sản phẩm gạch — common.css §15.7.
   Trang 13 vẽ HAI nhóm ở trạng thái ĐANG MỞ, nên markup để sẵn `.is-open`. */

/* ===== 3 · CHI TIẾT SẢN PHẨM (trang 14) ===== */
.sanitary-detail__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
}

/* Thiết kế trang 14: ảnh chính gần vuông, cột thumb 4 ô cao xấp xỉ ảnh chính.
   Ghi đè `aspect-ratio: 1` ở đây đã xoá — vuông nay là mặc định của
   `.gallery__main` (common.css §15.10), giữ lại chỉ là giá trị lặp. */

/* --fs-h1/700 → --fs-h2/500 (phản hồi client 31/07/2026: "giảm font-size và
   font-weight tên sản phẩm"). Cùng thang với .pd-code (product-detail.css) và
   .adh-hero__name (adhesive.css). */
/* 500 → 600 (phản hồi 30/07/2026: "tăng nhẹ font-weight tên sản phẩm") — đi kèm
   .adh-hero__name và .pd-code. */
.sanitary-detail__info h1 {
  font-size: var(--fs-h2); font-weight: var(--fw-ui);
  letter-spacing: -.02em; line-height: 1.15;
}
.sanitary-detail__brand { margin-top: 4px; font-size: var(--fs-sm); color: var(--c-muted); }
.sanitary-detail .spec { margin-top: clamp(18px, 2.4vw, 28px); }
.sanitary-detail__actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(22px, 3vw, 34px);
}

/* ===== 4 · ĐẶC ĐIỂM NỔI BẬT (trang 14) ===== */
.sanitary-feature__title {
  font-size: var(--fs-h2); font-weight: var(--fw-title); letter-spacing: -.01em;
  margin-bottom: clamp(20px, 2.6vw, 30px);
}
.sanitary-feature__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px); align-items: start;
}
.sanitary-feature__text { font-size: var(--fs-body); color: var(--c-body); }
.sanitary-feature__list { margin-top: 16px; display: grid; gap: 14px; }
.sanitary-feature__list li { position: relative; padding-left: 16px; }
.sanitary-feature__list li::before {
  content: "•"; position: absolute; left: 0; top: 0; color: var(--c-body);
}
.sanitary-feature__list b { font-weight: var(--fw-title); color: var(--c-ink); }

/* Nay là thẻ `img` chứ không còn là ô chờ: giữ nguyên khung 4/3 và cắt ảnh theo
   khung thay vì kéo méo — tỉ lệ khung đổi theo breakpoint nên phải có cover. */
.sanitary-feature__media {
  display: block; width: 100%; height: auto; border-radius: var(--r-lg);
  background: var(--c-grey-light); aspect-ratio: 5 / 4; object-fit: cover;
  /* Ô lưới mặc định giãn theo chiều cao hàng; `start` giữ đúng tỉ lệ trên
     thay vì để ảnh bị kéo dài theo cột chữ bên trái. */
  align-self: start;
}

/* ===== 5 · SẢN PHẨM LIÊN QUAN (trang 14) ===== */
.sanitary-related { padding-bottom: var(--sp-section); }
.sanitary-related__title {
  font-size: var(--fs-h2); font-weight: var(--fw-title); letter-spacing: -.01em;
  margin-bottom: clamp(20px, 2.6vw, 30px);
}
.sanitary-related__nav { margin-top: clamp(22px, 3vw, 32px); }

/* ===== 6 · RESPONSIVE (1024 / 720) ===== */
@media (max-width: 1024px) {
  .sanitary-detail__top { grid-template-columns: 1fr; gap: 28px; }
  .sanitary-feature__grid { grid-template-columns: 1fr; }
  /* Một cột: ảnh chính không cần cao bằng cả màn hình */
  .page-sanitary-detail .gallery { max-width: 620px; }
}
@media (max-width: 720px) {
  .page-sanitary-detail .gallery__main { aspect-ratio: 4 / 3; }
  .sanitary-detail__actions .btn { flex: 1 1 auto; }
}