/* Trang chi tiết sản phẩm.

   GHI SỔ cho Task 11 (review độc lập Task 9 vòng sửa 2, 2026-08-05): file này
   hiện có 6 chỗ phải "escalate" độ đặc hiệu để thắng CSS lõi của WooCommerce
   (`woocommerce.css`/`woocommerce-layout.css`) — float ảnh/tóm tắt, clearfix
   "Sản phẩm tương tự", nút thêm giỏ, giá tiền, và cả khối tab (container +
   li + a). Mỗi lần Woo thêm một class vào luật của họ là một workaround ở
   đây có thể lật ngược ÂM THẦM (không lỗi cú pháp, chỉ đổi hành vi im lặng).
   Từng cân nhắc gỡ hẳn CSS lõi Woo bằng cách bỏ `woocommerce_enqueue_styles`,
   nhưng CHƯA làm ở Task 9: theme mới đè template của shop/sản phẩm, CHƯA đè
   giỏ hàng/thanh toán/tài khoản — gỡ CSS lõi lúc này phá luôn 3 trang đó.
   Task 10 sắp làm giỏ hàng/thanh toán; nên đánh giá việc gỡ CSS lõi SAU khi
   nhìn được toàn cảnh cả 2 trang đó, không phải bây giờ. */

.gpkm-trang-sp { padding-block: var(--sp-5); }

.woocommerce-product-gallery,
.gpkm-trang-sp .summary { margin-bottom: var(--sp-5); }

/* WooCommerce dựng trang sản phẩm bằng float từ thời chưa có grid:
   `.woocommerce div.product div.images { width: 48%; float: left }`. Luật đó
   vẫn áp vào con của grid, nên ảnh 600px bị bóp còn 48% của một CỘT (~288px)
   thay vì đầy cột. Phải huỷ float TRƯỚC khi grid có tác dụng.

   Bộ chọn phải khớp theo ĐÚNG hình dạng luật của Woo. Gallery mang luôn class
   `images`, và `.woocommerce div.product div.images` có độ đặc hiệu (0,3,2) —
   `.gpkm-trang-sp .woocommerce-product-gallery` (0,2,0) thua, ảnh vẫn 23%. */
body.woocommerce .gpkm-trang-sp div.product div.images,
body.woocommerce .gpkm-trang-sp div.product div.summary {
  float: none;
  width: 100%;
  margin-right: 0;
}

.gpkm-trang-sp .woocommerce-product-gallery__image img { width: 100%; height: auto; }

@media (min-width: 900px) {
  /* Con TRỰC TIẾP: `.gpkm-trang-sp .product` khớp luôn `li.product` của khối
     "Sản phẩm tương tự", biến từng thẻ thành grid 2 cột nên link bên trong chỉ
     được một cột (112px trong thẻ 274px) và ảnh co còn 80px. */
  .gpkm-trang-sp > div.product {
    display: grid;
    /* Mockup PDP dành 7/12 chiều ngang cho gallery và 5/12 cho summary. */
    grid-template-columns: minmax(0, 7fr) minmax(360px, 5fr);
    gap: var(--sp-6);
    align-items: start;
  }
  /* Gallery dính theo khi cuộn phần mô tả dài. Cộng thêm chiều cao đầu
     trang dính (Task 4) — nếu không gallery chui dưới lớp kính mờ. */
  .gpkm-trang-sp > div.product > .woocommerce-product-gallery { position: sticky; top: calc(var(--cao-dau-trang) + var(--sp-4)); }
  /* Tab và mô tả trải hết chiều ngang, không bó trong một cột. */
  .gpkm-trang-sp > div.product > .woocommerce-tabs,
  .gpkm-trang-sp > div.product > .related { grid-column: 1 / -1; }
}

.gpkm-trang-sp .product_title { margin-bottom: var(--sp-3); }

.gpkm-trang-sp .price {
  margin-bottom: var(--sp-4);
  font-size: 1.375rem;
  font-weight: 600;
}

/* Bộ chọn màu PHẢI thắng luật riêng của WooCommerce:
   `.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product
   p.price, ... span.price` có độ đặc hiệu (0,3,2) — `:where()` không cộng độ
   đặc hiệu nhưng `div.product p.price`/`span.price` vẫn đủ thắng
   `.gpkm-trang-sp .price` (0,2,0), ra màu xám mặc định của Woo thay vì
   --primary. Cùng dạng specificity đã gặp ở nút thêm giỏ (dòng ~160 dưới) và
   luật float (đầu file) — khớp lại đúng hình dạng `div.product p.price` /
   `span.price` của Woo rồi cộng thêm `body.woocommerce` + `.gpkm-trang-sp`
   để chắc chắn thắng bất kể thứ tự nạp file. */
body.woocommerce .gpkm-trang-sp div.product p.price,
body.woocommerce .gpkm-trang-sp div.product span.price {
  /* --primary (6,38:1 trên --page) — giá tiền, cùng quy tắc màu đã dùng cho
     giá ở thẻ sản phẩm (Task 6). */
  color: var(--primary);
}

.gpkm-trang-sp .price del { margin-right: var(--sp-2); color: var(--ink-soft); font-weight: 400; }
.gpkm-trang-sp .price ins { text-decoration: none; }

/* --- breadcrumb (Task 9) -------------------------------------------------- */

.gpkm-trang-sp__duong-dan {
  margin-bottom: var(--sp-4);
  /* --ink-soft (8,89:1 trên --page) tô phần chữ/dấu phân cách không phải link
     — các thẻ <a> bên trong tự có màu --primary từ luật `a` chung ở base.css. */
  color: var(--ink-soft);
  font-size: 0.875rem;
}

@media (min-width: 900px) {
  /* Con TRỰC TIẾP của `div.product` (cùng cấp gallery/summary, xem chú thích
     ở gpkm_duong_dan_sp() trong inc/woocommerce.php) — phải trải hết 2 cột,
     không thì grid tự đặt nó vào ô đầu và đẩy lệch gallery/summary. */
  .gpkm-trang-sp > div.product > .gpkm-trang-sp__duong-dan { grid-column: 1 / -1; }
}

/* --- nhãn giảm giá "-N%" (Task 9, thay nhãn "Sale!" mặc định) ------------- */

.gpkm-trang-sp__nhan-giam {
  display: inline-block;
  margin-bottom: var(--sp-4);
  padding: 2px 8px;
  /* Cùng cặp màu đã dùng cho nhãn thẻ sản phẩm (Task 6): nền --primary + chữ
     trắng đạt 6,69:1 — KHÔNG dùng --rose-red (chỉ 4,45:1, không đủ AA cho chữ
     trắng nhỏ). */
  background: var(--primary);
  border-radius: var(--bo-goc);
  color: var(--surface);
  font-family: var(--font-tieu-de);
  font-size: 0.75rem;
  font-weight: 700;
}

/* --- dải "vì sao chọn" cuối khối sản phẩm (Task 9) ------------------------ */

.gpkm-trang-sp__cam-ket-khoi { margin-top: var(--sp-6); }

@media (min-width: 900px) {
  /* Cũng là con trực tiếp của `div.product` — SAU tab mô tả (ưu tiên 12 >
     10, xem gpkm_dai_cam_ket_sp() ở inc/woocommerce.php), TRƯỚC upsell/related
     (15/20) — cần trải hết 2 cột như `.woocommerce-tabs`/`.related` (dòng ~40
     ở trên), không thì rơi vào ô 1 cột và bị bóp hẹp. */
  .gpkm-trang-sp > div.product > .gpkm-trang-sp__cam-ket-khoi { grid-column: 1 / -1; }
}

/* --- khối tư vấn thay nút mua (tròng kính) ------------------------------- */

.gpkm-khoi-tu-van {
  margin: var(--sp-4) 0;
  padding: var(--sp-4);
  background: var(--accent-soft);
  border: 1px solid var(--rose-red);
  border-radius: var(--bo-goc);
}

.gpkm-khoi-tu-van__ly-do {
  margin: 0 0 var(--sp-3);
  color: var(--ink);
  font-weight: 500;
}

.gpkm-khoi-tu-van__nut {
  display: flex;
  flex-wrap: wrap;
  /* ≥8px giữa hai vùng chạm cạnh nhau. */
  gap: var(--sp-3);
}

/* --- bảng giá tham khảo -------------------------------------------------- */

.gpkm-bang-gia-tham-khao {
  width: 100%;
  margin-top: var(--sp-4);
  border-collapse: collapse;
  background: var(--surface);
  font-size: 0.875rem;
}

.gpkm-bang-gia-tham-khao caption {
  padding-bottom: var(--sp-2);
  color: var(--ink-soft);
  text-align: left;
}

.gpkm-bang-gia-tham-khao th,
.gpkm-bang-gia-tham-khao td {
  padding: var(--sp-2) var(--sp-3);
  border: var(--vien);
  font-weight: 400;
  text-align: left;
}

.gpkm-bang-gia-tham-khao thead th { background: var(--surface-2); font-weight: 600; }

/* --- nút thêm giỏ (sản phẩm bán online) --------------------------------- */

/* Bộ chọn PHẢI thắng luật của WooCommerce:
   `.woocommerce ... button.button.alt { background-color: #7f54b3 }` có độ đặc
   hiệu (0,3,1) — nút thêm giỏ sẽ ra màu TÍM của Woo thay vì màu nhấn teal của
   thương hiệu. Dùng `background-color` cùng thuộc tính với Woo, và thêm
   `body.woocommerce` + `.alt` cho đủ đặc hiệu.

   CỐ Ý không dùng body class `woocommerce-block-theme-has-button-styles` (cơ chế
   opt-out của Woo): nó tắt style nút trên MỌI trang, kể cả trang Tài khoản chưa
   có CSS riêng, và sẽ ra nút trơ không viền. */
body.woocommerce .gpkm-trang-sp .single_add_to_cart_button,
body.woocommerce .gpkm-trang-sp button.single_add_to_cart_button.alt,
.gpkm-trang-sp .single_add_to_cart_button {
  min-height: 52px;
  padding: 14px var(--sp-5);
  background-color: var(--rose-red);
  color: var(--surface);
  border: 1px solid var(--rose-red);
  border-radius: var(--bo-goc-vien-thuoc);
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(226, 45, 79, 0.2);
  transition: background-color var(--nhanh) var(--easing), transform var(--nhanh) var(--easing);
}

body.woocommerce .gpkm-trang-sp .single_add_to_cart_button:hover,
body.woocommerce .gpkm-trang-sp button.single_add_to_cart_button.alt:hover,
.gpkm-trang-sp .single_add_to_cart_button:hover {
  background-color: var(--primary);
  transform: translateY(-1px);
}

.gpkm-trang-sp .product_title {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
}

.gpkm-trang-sp .woocommerce-product-gallery__image {
  border-radius: 1rem;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(226, 45, 79, 0.05);
}

.gpkm-trang-sp .flex-control-thumbs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: 0;
  list-style: none;
}

.gpkm-trang-sp .flex-control-thumbs li {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

.gpkm-trang-sp .flex-control-thumbs img {
  border-radius: var(--bo-goc);
  border: 2px solid transparent;
  opacity: 1;
}

.gpkm-trang-sp .flex-control-thumbs .flex-active {
  border-color: var(--rose-red);
}

.gpkm-trang-sp .related > h2,
.gpkm-trang-sp .up-sells > h2 {
  margin: var(--sp-7) 0 var(--sp-5);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 700;
}

/* Nút bị vô hiệu hoá (chưa chọn đủ biến thể) phải trông rõ là chưa dùng được. */
body.woocommerce .gpkm-trang-sp button.single_add_to_cart_button.disabled,
body.woocommerce .gpkm-trang-sp button.single_add_to_cart_button:disabled {
  background-color: var(--surface-3);
  border-color: var(--line-2);
  color: var(--ink-soft);
  cursor: not-allowed;
}

.gpkm-trang-sp .quantity input {
  min-height: 44px;
  padding: var(--sp-2);
  border: var(--vien);
  border-radius: var(--bo-goc);
}

/* --- tình trạng kho ------------------------------------------------------ */

/* Với sản phẩm hết hàng, WooCommerce in `<p class="stock out-of-stock">` rồi
   BỎ hẳn form thêm giỏ. Không style dòng này thì trang chỉ có giá và một dòng
   chữ mờ giữa khoảng trắng — khách không hiểu vì sao không mua được. */
.gpkm-trang-sp .stock {
  margin: var(--sp-3) 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--bo-goc);
  font-weight: 500;
}

/* Giữ nguyên màu đỏ mặc định của Woo — đúng nghĩa cảnh báo và đủ tương phản
   trên nền surface-2. Chỉ thêm khung để nó thành một khối rõ ràng. */
.gpkm-trang-sp .stock.out-of-stock {
  background: var(--surface-2);
  border: 1px solid var(--line-2);
}

.gpkm-trang-sp .stock.in-stock {
  /* Còn hàng thì nút mua đã nói hết — chỉ cần một dòng nhẹ, không đóng khung. */
  padding: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 0.875rem;
  font-weight: 400;
}

/* --- chọn biến thể: chip thay dropdown (Task G2-T2 làm đầy đủ) ---------- */

.gpkm-trang-sp .variations select {
  min-height: 44px;
  padding: var(--sp-2);
  background: var(--surface);
  border: var(--vien);
  border-radius: var(--bo-goc);
}

.gpkm-trang-sp .variations th { padding-block: var(--sp-2); text-align: left; }

/* --- khối "Sản phẩm tương tự" ------------------------------------------- */

/* Khối này do Woo render với `<ul class="products columns-4">`, KHÔNG mang class
   `.gpkm-luoi-sp`, nên lưới ở woo-archive.css không áp vào: thẻ rơi về float
   của Woo, ảnh co lại còn ~100px và các thẻ cao thấp lệch nhau. */
body.woocommerce .gpkm-trang-sp .related ul.products,
body.woocommerce .gpkm-trang-sp .up-sells ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  margin: 0 0 var(--sp-6);
  padding: 0;
  list-style: none;
}

/* Woo còn chèn clearfix bằng ::before/::after — trong grid chúng thành 2 ô rỗng
   đẩy lệch cả hàng. */
body.woocommerce .gpkm-trang-sp .related ul.products::before,
body.woocommerce .gpkm-trang-sp .related ul.products::after,
body.woocommerce .gpkm-trang-sp .up-sells ul.products::before,
body.woocommerce .gpkm-trang-sp .up-sells ul.products::after { content: none; display: none; }

body.woocommerce .gpkm-trang-sp .related ul.products li.product,
body.woocommerce .gpkm-trang-sp .up-sells ul.products li.product {
  float: none;
  clear: none;
  width: auto;
  margin: 0;
}

@media (min-width: 640px) {
  body.woocommerce .gpkm-trang-sp .related ul.products,
  body.woocommerce .gpkm-trang-sp .up-sells ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
  }
}

/* --- tab --------------------------------------------------------------- */

/* SỬA Task 9 vòng sửa 2 (review độc lập): vòng trước CHỈ escalate `color`,
   để nguyên `.woocommerce-tabs .tabs`/`.tabs li a` ở độ đặc hiệu thường —
   toàn bộ khối đó thua CSS lõi Woo, đo THẬT trên production lúc bị bắt lỗi:

     phần tử                  | Woo thắng bằng                              | độ đặc hiệu Woo | độ đặc hiệu mình (cũ)
     ul.tabs (khung)          | .woocommerce div.product .woocommerce-tabs ul.tabs        | (0,4,2) | (0,2,0)
     li (từng chip)           | .woocommerce div.product .woocommerce-tabs ul.tabs li      | (0,4,3) | — (chưa từng đặt luật)
     li.active                | ...ul.tabs li.active                                        | (0,5,3) | — (chưa từng đặt luật)
     a (link trong chip)      | .woocommerce div.product .woocommerce-tabs ul.tabs li a     | (0,4,4) | (0,2,1)

   Hệ quả đo được: chip nền xám #e9e6ed + viền trên #cfc8d8 1px của Woo, thụt
   `padding-left: 1em` (Woo) thay vì `padding: 0` (mình), `margin: 0 -5px`
   (Woo) làm 2 chip dính nhau — `margin`/`gap` của mình không bao giờ áp dụng.
   Sửa: escalate CẢ khối (không chỉ color) bằng cách khớp đúng hình dạng
   selector của Woo (`div.product .woocommerce-tabs ul.tabs` / `li` / `a`) rồi
   cộng `body.woocommerce` + `.gpkm-trang-sp` để chắc thắng mọi thuộc tính,
   không riêng một token. Bài học ghi vào đầu file (workaround #6). */

body.woocommerce .gpkm-trang-sp div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-5) 0 0;
  padding: 0;
  list-style: none;
  /* --line-2 (4,49:1) — chuẩn Task 8 cho viền thành phần giao diện, KHÔNG
     dùng --vien (--line, chỉ 1,70:1) vì đây là ranh giới của chính component
     tab, không phải viền trang trí phụ. */
  border-bottom: 1px solid var(--line-2);
}

/* li: xoá SẠCH nền xám/viền trên/thụt lề/margin âm mặc định của Woo — để nó
   thành một flex item trơn, mọi hình thức (viền dưới khi active, khoảng cách)
   do `a` bên trong và `.tabs` (gap) tự lo. */
body.woocommerce .gpkm-trang-sp div.product .woocommerce-tabs ul.tabs li,
body.woocommerce .gpkm-trang-sp div.product .woocommerce-tabs ul.tabs li.active {
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
}

body.woocommerce .gpkm-trang-sp div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  min-height: 44px;
  padding: 11px var(--sp-3);
  color: var(--ink-soft);
  text-decoration: none;
}

body.woocommerce .gpkm-trang-sp div.product .woocommerce-tabs ul.tabs li.active a {
  /* --primary (6,38:1 trên --page) — tab đang mở, cùng quy tắc "chữ nhỏ" của
     token này (Task 2). */
  color: var(--primary);
  border-bottom: 2px solid var(--rose-red);
}

.woocommerce-Tabs-panel { padding-top: var(--sp-4); }
.woocommerce-Tabs-panel > * { max-width: var(--do-rong-chu); }
/* Bảng trong mô tả sản phẩm phải CUỘN NGANG được, không đẩy cả trang tràn.
   Từ khi MarkdownConverter biết dựng bảng (Task 6), mô tả sản phẩm mới bắt đầu
   có <table> — và bảng so sánh nhiều cột làm tràn ngang ở 375px. Bài viết đã có
   luật này trong prose.css nhưng trang sản phẩm không nạp file đó. */
.woocommerce-Tabs-panel table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.woocommerce-Tabs-panel th,
.woocommerce-Tabs-panel td {
  padding: var(--sp-2) var(--sp-3);
  border: var(--vien);
  text-align: left;
}

.woocommerce-Tabs-panel thead th { background: var(--surface-2); }

/* --- GĐ2-C: tuỳ chọn tròng kính bán kèm ở trang gọng -------------------- */

.gpkm-ban-kem-trong {
  margin-block: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface-2);
  /* Viền THÀNH PHẦN (không phải mảng lớn) — --line-2 (4,49:1), KHÔNG --line
     (1,70:1, gần như vô hình) — cùng chuẩn Task 8/9 đã ghi ở nhiều nơi khác
     trong file này. */
  border: 1px solid var(--line-2);
  border-radius: var(--bo-goc-lon);
}

.gpkm-ban-kem-trong__dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.gpkm-ban-kem-trong__tieu-de {
  margin: 0;
  font-family: var(--font-tieu-de);
  font-size: 1.0625rem;
  color: var(--ink);
}

.gpkm-ban-kem-trong__bang-gia {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: 0 0 auto;
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gpkm-ban-kem-trong__ds {
  display: flex;
  flex-direction: column;
  /* ≥8px giữa hai vùng chạm cạnh nhau. */
  gap: var(--sp-2);
}

/* Grid thay vì flex-wrap: label có 3 mảnh nội dung (tên+giá cùng hàng, mô tả
   xuống hàng dưới, chiếm hết chiều ngang) — flex-wrap với một item
   flex-basis:100% ĐẨY LUÔN các item sau nó (kể cả "giá") xuống dòng ba thay vì
   giữ "giá" ở dòng đầu cạnh "tên". Grid areas định vị đúng vị trí không phụ
   thuộc thứ tự item nào có mặt (mục "Không thêm tròng" không có mô tả/giá,
   vẫn xếp đúng vì vùng rỗng chỉ đơn giản không chiếm chỗ). */
.gpkm-ban-kem-trong__muc {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  grid-template-areas:
    "radio ten gia"
    "radio mota mota";
  align-items: center;
  column-gap: var(--sp-2);
  row-gap: 2px;
  /* ≥44px vùng chạm — tính trên CẢ label, không chỉ riêng ô tròn radio. */
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--bo-goc);
  cursor: pointer;
  transition: border-color var(--nhanh) var(--easing), background var(--nhanh) var(--easing);
}

/* Viền nổi bật khi đang chọn — input là con của .gpkm-ban-kem-trong__muc nên
   cần :has() để đổi kiểu của CHA theo trạng thái con; không hỗ trợ :has() (rất
   hiếm ở trình duyệt còn cập nhật) thì chấm radio (accent-color bên dưới) vẫn
   đủ báo trạng thái, chỉ mất viền nổi bật — suy biến nhẹ, không mất chức năng. */
.gpkm-ban-kem-trong__muc:has(input:checked) {
  border-color: var(--rose-red);
  background: var(--page);
}

.gpkm-ban-kem-trong__muc input[type="radio"] {
  grid-area: radio;
  width: 20px;
  height: 20px;
  margin: 0;
  /* Chấm chọn — mảng nhỏ mang tính "icon trạng thái", không phải chữ, nên
     --rose-red hợp lệ ở đây dù dưới 16px (quy tắc token chỉ giới hạn CHỮ nhỏ
     phải dùng --primary, không áp cho control đồ hoạ như chấm radio). */
  accent-color: var(--rose-red);
}

.gpkm-ban-kem-trong__ten {
  grid-area: ten;
  font-weight: 500;
  color: var(--ink-2);
}

.gpkm-ban-kem-trong__mo-ta {
  grid-area: mota;
  color: var(--ink-soft);
  font-size: 0.875rem;
}

.gpkm-ban-kem-trong__gia {
  grid-area: gia;
  justify-self: end;
  /* Giá — chữ nhỏ, phải dùng --primary (6,69:1), KHÔNG --rose-red (4,45:1,
     dành cho mảng lớn/viền/nút đặc chữ trắng ≥16px theo token). */
  color: var(--primary);
  font-weight: 600;
  white-space: nowrap;
}

.gpkm-ban-kem-trong__tong {
  margin: var(--sp-3) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line-2);
  color: var(--ink-2);
}

.gpkm-ban-kem-trong__so-tien {
  color: var(--primary);
  font-size: 1.125rem;
}

@media (max-width: 479px) {
  .gpkm-ban-kem-trong__dau { align-items: flex-start; }
  .gpkm-ban-kem-trong__bang-gia { min-width: 86px; justify-content: flex-end; }
}