/*
 * Badge theo thuộc tính pa_product-type.
 *
 * Badge được chèn vào hệ thống nhãn của Woodmart qua filter
 * 'woodmart_product_label_output' (xem functions/components/product-badge.php),
 * nên chúng là `<span class="product-label ...">` nằm trong `.product-labels`.
 *
 * Vì vậy ở đây CHỈ khai báo màu. Vị trí, hình dạng, padding, cỡ chữ, khoảng
 * cách giữa các nhãn đều do `.product-label` của theme quyết định — đó chính là
 * điều làm badge trông đồng bộ với nhãn "Hết hàng".
 *
 * KHÔNG thêm position/top/right vào đây. Bản trước dùng
 * `.product-badge-list { position:absolute; top:25px; right:0 }` và đó là
 * nguyên nhân badge lệch góc, vuông góc, dính sát mép so với nhãn của theme,
 * đồng thời đè lên nút wishlist/so sánh ở góc phải trên.
 *
 * Dùng selector kép `.product-label.hm-label--x` để đủ độ ưu tiên đè màu nền
 * mặc định mà theme đặt cho .product-label.
 */

.product-label.hm-label {
  color: #fff;

  /*
   * Theme đặt `min-width: 50px; padding: 5px 10px` cho .product-label — hợp lý
   * với nhãn dài như "Hết hàng", nhưng nhãn ngắn như "Mới" (3 ký tự) bị kéo
   * thành pill dẹt và rỗng hai bên.
   *
   * Bỏ sàn chiều rộng và thu padding ngang lại để nhãn ôm sát chữ. Vẫn giữ
   * nguyên padding dọc, cỡ chữ, font-weight và bo góc của theme, nên chiều cao
   * và hình dạng vẫn đồng bộ với "Hết hàng" — chỉ chiều rộng là co theo nội
   * dung. Nhãn dài của mình như "Free Ship" gần như không đổi.
   *
   * CHỈ áp cho .hm-label. Không đụng .product-label của theme.
   */
  min-width: 0;
  padding-inline: 8px;
}

.product-label.hm-label--new {
  background-color: #d80032;
}

.product-label.hm-label--free-ship {
  background-color: #0277ff;
}

.product-label.hm-label--flash-sale {
  background-color: #e60000;
}

.product-label.hm-label--best-seller {
  background-color: orangered;
}

/* Giá trị pa_product-type chưa được map trong PHP: vẫn hiện, dùng màu trung
   tính thay vì nền trong suốt khiến chữ trắng thành tàng hình. */
.product-label.hm-label--default {
  background-color: #6e6e73;
}