/* THẺ SẢN PHẨM CHUẨN: một quy cách cho mọi loại thẻ (.product-card, .catalog-card, .mc-card).
   Muốn đổi giao diện thẻ: chỉ sửa các biến --the-* ở đây. Thẻ loại mới: thêm 5 selector vào 5 nhóm bên dưới. */

.product-card, .catalog-card, .mc-card {
  --the-dai-nhan: 28px;      /* dải phía trên ảnh dành cho nhãn %, nhãn không bao giờ đè ảnh */
  --the-cao-ten: 34px;       /* tên cố định 2 dòng */
  --the-dong-ten: 17px;
  --the-chu-ten: 13px;
  --the-chu-gia: 14px;
  --the-chu-gia-goc: 9px;
  --the-le: 8px;
}
.mc-card { --the-dai-nhan: 6px; }   /* thẻ không có nhãn: chỉ chừa lề nhỏ */

/* 1) KHUNG ẢNH: vuông 1:1, rộng đúng thẻ, không đặt chiều cao cố định */
:is(.product-card .product-image, .catalog-card .catalog-card__image, .mc-card .mc-product-media) {
  display: block !important; flex: 0 0 auto !important;
  height: auto !important; min-height: 0 !important; max-height: none !important; aspect-ratio: auto !important;
  padding: var(--the-dai-nhan) 0 0 !important; background: #fff !important; overflow: hidden !important;
}
:is(.product-card .product-image, .catalog-card .catalog-card__image, .mc-card .mc-product-media) img {
  display: block !important; width: 100% !important; max-width: 100% !important;
  height: auto !important; min-height: 0 !important; max-height: none !important;
  aspect-ratio: 1 / 1 !important; object-fit: contain !important;
}
.product-card, .mc-card { min-height: 0 !important; height: auto !important; }

/* 2) NHÃN %: góc phải trên cùng, trong dải riêng; ẩn nhãn "Sẵn hàng" */
.product-card .badges { position: absolute !important; top: 5px !important; right: 8px !important; left: auto !important; gap: 0 !important; z-index: 3 !important; }
.product-card .badges .badge--status { display: none !important; }
:is(.product-card .badges .badge--primary, .catalog-card > .catalog-card__discount) {
  font-size: 12px !important; font-weight: 800 !important; line-height: 18px !important;
  padding: 1px 9px !important; border-radius: 9px !important;
  max-width: none !important; width: auto !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important;
}
.catalog-card > .catalog-card__discount { position: absolute !important; top: 5px !important; right: 8px !important; left: auto !important; bottom: auto !important; z-index: 3 !important; }

/* 3) THÂN THẺ: lưới 2 hàng cố định (tên, giá) nên giá luôn thẳng hàng giữa các thẻ */
:is(.product-card .product-content, .catalog-card .catalog-card__body, .mc-card .mc-product-body) {
  display: grid !important; grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: var(--the-cao-ten) auto !important;
  row-gap: 2px !important; align-content: start !important; flex: 0 0 auto !important; height: auto !important; min-height: 0 !important;
  padding: var(--the-le) var(--the-le) 10px !important;
}
:is(.product-card .product-category, .catalog-card .catalog-card__category, .catalog-card .catalog-card__availability) { display: none !important; }

/* 4) TÊN: cố định 2 dòng */
:is(.product-card h3, .catalog-card h2, .mc-card h2) {
  grid-column: 1 !important; grid-row: 1 !important; height: var(--the-cao-ten) !important; min-height: var(--the-cao-ten) !important; margin: 0 !important;
  font-size: var(--the-chu-ten) !important; line-height: var(--the-dong-ten) !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; overflow: hidden !important;
}
:is(.product-card h3 a, .catalog-card h2 a, .mc-card h2 a) { display: inline !important; font-size: var(--the-chu-ten) !important; line-height: var(--the-dong-ten) !important; height: auto !important; }

/* 5) GIÁ: giá gốc gạch cùng hàng, cùng đường cơ sở với giá bán */
:is(.product-card .price, .catalog-card .catalog-card__price) {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: baseline !important;
  grid-column: 1 !important; grid-row: 2 !important; gap: 2px !important; min-height: 0 !important; overflow: hidden !important;
}
:is(.product-card .price strong, .catalog-card .catalog-card__price strong) { flex: none !important; font-size: var(--the-chu-gia) !important; white-space: nowrap !important; align-self: baseline !important; }
:is(.product-card .price del, .catalog-card .catalog-card__price del) { flex: none !important; font-size: var(--the-chu-gia-goc) !important; white-space: nowrap !important; align-self: baseline !important; }
.catalog-card .catalog-card__price span { display: none !important; }
.mc-card .mc-price-row { grid-column: 1 !important; grid-row: 2 !important; min-height: 0 !important; }
.mc-card .mc-price-row strong { font-size: var(--the-chu-gia) !important; white-space: nowrap !important; }
@media (max-width: 349px) { :is(.product-card .price del, .catalog-card .catalog-card__price del) { display: none !important; } }
/* Keep the full image inside its square frame, including on hover. */
:is(.product-card .product-image,.catalog-card .catalog-card__image) img{transform:none!important}
:is(.product-card h3,.catalog-card h2,.mc-card h2){font-weight:600!important}
:is(.product-card .price,.catalog-card .catalog-card__price,.mc-card .mc-price-row){margin-top:0!important}
:is(.product-card .price strong,.catalog-card .catalog-card__price strong,.mc-card .mc-price-row strong){line-height:20px!important}
:is(.product-card .price del,.catalog-card .catalog-card__price del){line-height:14px!important}
.mc-card .mc-add{margin-block:0!important}