/* Bộ lọc: sidebar trên desktop, bottom sheet trên mobile. */

.gpkm-shop-layout { display: block; }

@media (min-width: 900px) {
  /* CHÍNH XÁC 2 cột cho 2 con: sidebar và khối kết quả.
     Nút lọc và hàng chip nằm ngoài grid (parts/bo-loc-dau.php) — nhồi chúng vào
     đây là grid có 4 con và xếp thành 2 hàng, cột lưới hẹp còn ~35px. */
  .gpkm-shop-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: var(--sp-5);
    align-items: start;
  }
}

.gpkm-bo-loc-dau { margin-bottom: var(--sp-3); }

/* --- nút mở bộ lọc (chỉ hiện ở mobile) ---------------------------------- */

.gpkm-nut-loc {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  margin-bottom: var(--sp-3);
  padding: 11px var(--sp-4);
  background: var(--surface);
  border: var(--vien);
  border-radius: var(--bo-goc);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.gpkm-nut-loc:hover { border-color: var(--rose-red); color: var(--primary); }

.gpkm-nut-loc__so {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding-inline: 6px;
  background: var(--primary);
  color: var(--surface);
  border-radius: var(--bo-goc-vien-thuoc);
  font-size: 0.75rem;
}

@media (min-width: 900px) {
  .gpkm-nut-loc,
  .gpkm-bo-loc__dau { display: none; }
}

/* --- sidebar ------------------------------------------------------------ */

/* Mobile: ẩn mặc định, JS thêm class --sheet để mở. */
.gpkm-bo-loc { display: none; }

@media (min-width: 900px) {
  .gpkm-bo-loc {
    display: block;
    position: sticky;
    top: calc(var(--cao-dau-trang) + var(--sp-4));
    max-height: calc(100vh - var(--sp-6));
    overflow-y: auto;
    padding: var(--sp-4);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid color-mix(in srgb, var(--line) 20%, transparent);
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(226, 45, 79, 0.06);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
  }
}

.gpkm-bo-loc--sheet {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 200;
  overflow-y: auto;
  padding: var(--sp-3);
  background: var(--surface);
}

.gpkm-bo-loc__dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: var(--vien);
}

.gpkm-bo-loc--sheet .gpkm-bo-loc__dau { display: flex; }

.gpkm-bo-loc__dong {
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.gpkm-bo-loc__nhom { margin-bottom: var(--sp-4); }

.gpkm-bo-loc__nhom h3 {
  margin: 0 0 var(--sp-2);
  color: var(--ink-soft);
  font-family: var(--font-than);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gpkm-bo-loc__nhom ul { margin: 0; padding: 0; list-style: none; }

/* Mục lọc dạng hàng, có ô vuông kiểu checkbox bên trái (::before — link thường
   vẫn dùng được không cần JS, xem assets/js/filter.js và bài kiểm "TẮT
   JavaScript" ở filter.spec.js; input[type=checkbox] thật sẽ không nằm được
   trong thẻ <a> theo đúng chuẩn HTML). */
.gpkm-muc-loc {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  /* ≥44px chiều cao vùng chạm. */
  min-height: 44px;
  padding: var(--sp-2) var(--sp-2) var(--sp-2) calc(var(--sp-2) + 18px + var(--sp-2));
  border-radius: var(--bo-goc);
  color: var(--ink-2);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background var(--nhanh) var(--easing), color var(--nhanh) var(--easing);
}

.gpkm-muc-loc::before {
  content: '';
  position: absolute;
  left: var(--sp-2);
  top: 50%;
  width: 18px;
  height: 18px;
  /* --line (#e4bdbe trên nền trắng) chỉ đạt 1,70:1 — dưới ngưỡng 3:1 mà WCAG
     1.4.11 đòi cho ranh giới thành phần giao diện, và ở trạng thái CHƯA chọn
     viền 1px này là thông tin duy nhất cho biết có ô chọn. --line-2 đạt
     4,49:1. */
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--surface);
  transform: translateY(-50%);
  transition: background var(--nhanh) var(--easing), border-color var(--nhanh) var(--easing);
}

.gpkm-muc-loc--bat::before { background: var(--rose-red); border-color: var(--rose-red); }

/* Dấu tick trắng trên ô vuông đã chọn — thông tin "đang chọn" không chỉ dựa
   vào màu nền, còn có aria-current="true" ở thẻ <a> cho trình đọc màn hình. */
.gpkm-muc-loc--bat::after {
  content: '';
  position: absolute;
  left: calc(var(--sp-2) + 6px);
  top: 50%;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--surface);
  border-bottom: 2px solid var(--surface);
  transform: translateY(-65%) rotate(45deg);
}

.gpkm-muc-loc:hover { background: var(--surface-2); color: var(--primary); }

.gpkm-muc-loc--bat {
  background: var(--accent-soft);
  color: var(--primary);
  font-weight: 500;
}

.gpkm-bo-loc__dem { color: var(--ink-soft); font-size: 0.8125rem; }
.gpkm-muc-loc--bat .gpkm-bo-loc__dem { color: var(--primary); }

/* --- pill chiết suất ----------------------------------------------------- */

/* `<li>` giữ nguyên là list item thật (không dùng display:contents — mất
   ngữ nghĩa list-item khỏi cây accessibility ở một số trình đọc màn hình);
   chính `<li>` làm flex item để bọc pill bên trong. */
.gpkm-bo-loc__nhom--vien-thuoc ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.gpkm-bo-loc__nhom--vien-thuoc li { display: flex; }

.gpkm-bo-loc__vien-thuoc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  /* Cùng lý do đổi --line -> --line-2 như .gpkm-muc-loc::before ở trên. */
  border: 1px solid var(--line-2);
  border-radius: var(--bo-goc-vien-thuoc);
  color: var(--ink-2);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: border-color var(--nhanh) var(--easing), color var(--nhanh) var(--easing);
}

.gpkm-bo-loc__vien-thuoc:hover { border-color: var(--rose-red); color: var(--primary); }

.gpkm-bo-loc__vien-thuoc--bat {
  border: 2px solid var(--rose-red);
  /* Viền dày thêm 1px mỗi cạnh (1px -> 2px): bù cả hai chiều padding, không
     chỉ padding-block — thiếu chiều ngang thì pill đã chọn rộng hơn pill
     chưa chọn 2px, hàng flex xô nhẹ. */
  padding-block: calc(var(--sp-2) - 1px);
  padding-inline: calc(var(--sp-3) - 1px);
  color: var(--primary);
  font-weight: 500;
}

.gpkm-bo-loc__vien-thuoc--bat .gpkm-bo-loc__dem { color: var(--primary); }

/* --- chip đã chọn ------------------------------------------------------- */

.gpkm-chip-da-chon {
  display: flex;
  flex-wrap: wrap;
  /* ≥8px giữa hai vùng chạm cạnh nhau. */
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.gpkm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 7px var(--sp-3);
  background: var(--accent-soft);
  border: 1px solid var(--rose-red);
  border-radius: var(--bo-goc-vien-thuoc);
  color: var(--primary);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: background var(--nhanh) var(--easing);
}

.gpkm-chip:hover { background: var(--surface); color: var(--primary-dam); }

.gpkm-chip--xoa-het {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink-soft);
}

.gpkm-chip--xoa-het:hover { border-color: var(--ink-soft); color: var(--ink); }

/* --- trạng thái rỗng ---------------------------------------------------- */

.gpkm-rong .gpkm-chip-da-chon,
.gpkm-khong-ket-qua .gpkm-chip-da-chon { justify-content: center; margin-block: var(--sp-4); }