/* Chip chọn biến thể.
   <select> vẫn CÒN trong DOM (WooCommerce cần nó để khớp tổ hợp và cập nhật giá)
   nhưng ẩn khỏi mắt — không dùng display:none vì như thế trình đọc màn hình cũng
   mất luôn, mà đây là điều khiển bắt buộc để mua hàng. */

/* CHỈ ẩn select KHI JS đã vẽ được chip (class --co-chip do swatch.js thêm).
   Ẩn vô điều kiện là JS lỗi hoặc bị tắt thì khách KHÔNG chọn được biến thể và
   không mua được gì — cùng nguyên tắc đã dùng cho bộ lọc.

   Bộ chọn phải đủ đặc hiệu để thắng hai luật đang đè lên:
   - Woo: `.woocommerce div.product form.cart .variations select { min-width:75% }` (0,3,2)
   - woo-single.css của chính mình: `.gpkm-trang-sp .variations select { min-height:44px }`
   Thiếu min-width:0 thì select rộng 876px; thiếu min-height:0 thì cao 44px. */
.woocommerce div.product form.cart .gpkm-swatch--co-chip table.variations select,
.gpkm-trang-sp .gpkm-swatch--co-chip table.variations select,
.gpkm-swatch--co-chip table.variations select {
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 0;
  min-height: 0;
  max-width: none;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Chưa có chip (JS chưa chạy): giữ nhãn ở dạng bảng bình thường để select dùng được. */
.gpkm-swatch:not(.gpkm-swatch--co-chip) table.variations tr { margin-bottom: var(--sp-3); }

/* Bảng của Woo vốn là 2 cột (nhãn | select). Đổi sang xếp dọc để hàng chip có
   hết chiều ngang, nhất là trên mobile. */
.gpkm-swatch table.variations { width: 100%; border-collapse: collapse; }
.gpkm-swatch table.variations tbody { display: block; }
.gpkm-swatch table.variations tr { display: block; margin-bottom: var(--sp-4); }

.gpkm-swatch table.variations th,
.gpkm-swatch table.variations td {
  display: block;
  padding: 0;
  border: 0;
  text-align: left;
}

.gpkm-swatch table.variations th label {
  display: block;
  margin-bottom: 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-swatch__hang {
  display: flex;
  flex-wrap: wrap;
  /* ≥8px giữa hai vùng chạm cạnh nhau. */
  gap: var(--sp-2);
}

.gpkm-swatch__chip {
  /* 44px cả hai chiều — ngưỡng vùng chạm trên mobile. */
  min-height: 44px;
  min-width: 44px;
  padding: 10px var(--sp-3);
  background: var(--surface);
  border: var(--vien);
  border-radius: var(--bo-goc);
  color: var(--ink-2);
  font: inherit;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: border-color var(--nhanh) var(--easing), background var(--nhanh) var(--easing);
}

.gpkm-swatch__chip:hover:not(:disabled) { border-color: var(--rose-red); color: var(--primary); }

.gpkm-swatch__chip--chon {
  background: var(--accent-soft);
  border-color: var(--rose-red);
  color: var(--primary);
  font-weight: 500;
}

/* Tổ hợp không tồn tại: vẫn HIỆN để khách biết có tuỳ chọn đó, nhưng rõ ràng là
   không chọn được. Ẩn hẳn thì hàng chip nhảy số lượng mỗi lần chọn, khách mất
   phương hướng. */
.gpkm-swatch__chip--het {
  opacity: 0.4;
  cursor: not-allowed;
  text-decoration: line-through;
}

.gpkm-swatch .reset_variations {
  display: inline-block;
  margin-top: var(--sp-2);
  color: var(--ink-soft);
  font-size: 0.875rem;
}

/* Giá của biến thể đã khớp. */
.gpkm-swatch .woocommerce-variation-price {
  margin-block: var(--sp-3);
  color: var(--ink);
  font-size: 1.375rem;
  font-weight: 600;
}

.gpkm-swatch .woocommerce-variation-availability { color: var(--ink-soft); font-size: 0.875rem; }