/* ---------------------------------------------------------------------------
   Trang sản phẩm: dải ảnh, ô chọn phiên bản, video.

   CSS THUẦN, không đi qua Tailwind: `node_modules` không có trên máy phát triển
   nên bất cứ thứ gì phải `npm run build` lại đều là một bước dễ quên, và quên
   thì bản đã deploy không có style mới (xem cảnh báo ở CLAUDE.md).
--------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Bố cục trang chi tiết — lưới BA VÙNG

   Cột phải (thẻ mua) xuất hiện ở CẢ hai hàng nên nó trải suốt chiều cao của
   ảnh + mô tả + đánh giá — và chính chiều cao đó là khoảng để thẻ mua ghim vào.
   Thẻ nằm trong một lưới chỉ bọc khu vực ảnh thì `position:sticky` hết chỗ dính
   ngay khi cuộn qua khỏi ảnh.
--------------------------------------------------------------------------- */

.hdnt-pp {
  display: grid;
  /* Cột PHẢI nới 440px → tối đa 520px và co theo bề ngang khung (chốt của chủ
     site 2026-08-09: "ảnh sản phẩm trên desktop to quá"). Ảnh vì thế hẹp lại
     đúng chừng ấy — hai bên cân nhau hơn, mà thẻ mua rộng ra thì nó THẤP đi nên
     càng an toàn cho việc ghim theo cuộn.
     ⚠️ Đừng để một con số CỐ ĐỊNH 520px: ở dải 1000–1240px thì cột phải rộng
     hơn cả ảnh (đo được 520 so với 427px ở khổ 1024). `clamp()` với sàn 400px
     giữ đúng thứ tự "ảnh rộng hơn thẻ" ở mọi khổ máy tính.
     ⚠️ Đã có lúc ô này mượn chung `--hdnt-side-w` (380px) với trang Giỏ hàng ·
     Thanh toán rồi chủ site chốt TRẢ VỀ như cũ (2026-08-09) — trang sản phẩm
     giữ bộ số riêng, đừng "gộp cho gọn" lần nữa. */
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(400px, 40%, 520px));
  grid-template-areas: "media info" "content info";
  gap: clamp(24px, 2.8vw, 40px);
  /* Cùng cái hộp với `mx-auto max-w-container px-6` của trang chủ: 1320px đã
     TÍNH CẢ lề trong (box-sizing:border-box bật toàn cục), nên mép chữ trùng
     khít mọi dải khác. */
  max-width: 1320px;
  margin-inline: auto;
  padding: 32px 24px 24px;
  align-items: start;
  /* Chiều cao chung của HAI cột trên máy tính — khai MỘT chỗ rồi cả thẻ mua lẫn
     khung ảnh cùng mượn (chốt của chủ site 2026-08-09: "cho kích thước chiều cao
     layout sản phẩm trái bằng với layout phải"). Hai nơi tự gõ một con số là
     kiểu sửa một bên rồi quên bên kia.
     `vh` khai trước làm bản dự phòng: `svh` loại bỏ phần thanh địa chỉ ẩn/hiện
     trên điện thoại, trình duyệt chưa hiểu thì rơi về dòng trên. */
  --hdnt-col-h: calc(100vh - var(--hdnt-stick-h, 76px) - 32px);
  --hdnt-col-h: calc(100svh - var(--hdnt-stick-h, 76px) - 32px)
}

/*
 * KHUNG ẢNH — viền bo quanh CẢ cụm (ảnh lớn + dải ảnh phụ).
 *
 * ⚠️ Phần TRANG TRÍ (viền · bo góc · nền · cắt tràn) và phần NỘI KHỐI khai ở
 * tầng GỐC nên áp cho cả điện thoại — chốt của chủ site 2026-08-09: *"ảnh sản
 * phẩm trên mobile cũng cần đóng khung, bo viền và hiện ảnh phụ giống desktop"*.
 * Chỉ phần KÍCH THƯỚC (cạnh ô vuông tính theo chiều cao cột) mới nằm riêng ở
 * khối `min-width:1001px`: ở đó ràng buộc là "không được cao hơn thẻ mua", còn
 * trên điện thoại thì cụm ảnh xếp dọc, chẳng có thẻ nào bên cạnh để so.
 *
 * ⚠️ ĐẢO LẠI quyết định "tràn hai mép + dải ảnh phụ thành chấm" của bản trước.
 * Lý do cũ (dải ô vuông ăn cả trăm pixel chiều cao) vẫn đúng, nên dải ảnh phụ ở
 * khổ hẹp thu ô xuống 56px thay vì bỏ đi — xem khối `max-width:620px`.
 */
.hdnt-pp-media {
  grid-area: media;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  /* Căn GIỮA cả hai trục: ô ảnh vuông nên nhỏ hơn cột ở trục dài hơn. */
  align-items: center;
  justify-content: center;
  border: 1px solid #EAECEF;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  /* Chiều cao dải ảnh phụ phải TRỪ ra khi tính cạnh ô vuông ở khổ máy tính:
     82px ô + 10px lề trên + 10px lề dưới + 2px viền = 104px.
     Sản phẩm chỉ có MỘT ảnh thì không in dải ấy — `:has()` hạ về đúng phần
     viền. Mặc định 104px là bản an toàn: trình duyệt chưa hiểu `:has()` thì ảnh
     nhỏ hơn 104px chứ không tràn khỏi chiều cao cột. */
  --hdnt-pt-h: 104px
}
.hdnt-pp-media:not(:has(.hdnt-pt)) { --hdnt-pt-h: 2px }

/* ⚠️ Ảnh BỎ bo góc riêng: `overflow:hidden` của cụm đã cắt hai góc trên rồi. Để
   ảnh giữ bo góc của nó thì mép DƯỚI ảnh cũng cong và hở ra hai khe trắng ngay
   giữa khung — đúng bài học của "Dải danh mục · Thẻ bo khối" và thẻ bài viết.
   ⚠️ `min-height:0` là bắt buộc: ô flex mặc định không co nhỏ hơn nội dung, nên
   thiếu nó thì ảnh giữ khổ vuông và đẩy dải ảnh phụ tràn ra ngoài khung. */
.hdnt-pp-media .hdnt-pg {
  flex: 0 0 auto;
  min-height: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  box-shadow: none
}
.hdnt-pp-media .hdnt-pg-track { height: 100% }

/* Bỏ khổ vuông của từng tấm: chiều cao nay do KHUNG quyết định, giữ
   `aspect-ratio` ở đây là hai nguồn cùng đòi quyết một con số. */
.hdnt-pp-media .hdnt-pg-slide { height: 100%; aspect-ratio: auto; background: #fff }

/* ⚠️ `cover` chứ không `contain` — đây là chỗ CẮT VUÔNG. Ngoại lệ có chủ ý của
   luật "thà chừa lề còn hơn cắt mất sản phẩm": ảnh ở đây là ảnh CẢNH bếp chứ
   không phải hàng hoá tách nền, cắt bớt rìa không mất món hàng nào — và thẻ
   ngoài trang Cửa hàng vốn đã `cover` từ lâu. */
.hdnt-pp-media .hdnt-pg-slide img,
.hdnt-pp-media .hdnt-pg-video { object-fit: cover }

/* Dải ảnh phụ nằm TRONG khung nên phải tự chừa lề với viền — cụm khai đệm 0
   (chính 12px đệm của bản cũ là thứ hiện ra thành hai vệt trắng dọc mép ảnh). */
/*
 * ⚠️ Đệm TRÊN phải đủ chỗ cho vòng chọn. `.hdnt-pt` khai `overflow-x: auto`, mà
 * một trục `auto` đi với một trục `visible` thì trình duyệt tính `visible` thành
 * `auto` — dải thành khối cuộn và XÉN CẢ TRỤC DỌC (đúng bẫy đã gặp ở `.ub-side`
 * của trình dựng). Đệm dưới 10px nên vòng chọn 2px sống sót ở dưới, còn đệm trên
 * bằng 0 nên nó bị cắt cụt: chủ site thấy "ảnh phụ bị cắt border phía trên".
 * ⚠️ Lấy 3px từ `margin-top` bù sang `padding-top` chứ KHÔNG cộng thêm — tổng
 * chiều cao dải phải giữ nguyên 92px, nếu không `--hdnt-pt-h` tính sai và ô ảnh
 * vuông ở cột trái hụt mất mấy pixel.
 */
.hdnt-pp-media .hdnt-pt {
  flex: 0 0 auto;
  margin-top: 7px;
  padding: 3px 10px 10px
}

/* `stretch` để cột phải cao bằng cả hàng — thiếu nó thì sticky lại hết chỗ dính
   (cột co đúng bằng thẻ). */
.hdnt-pp-info {
  grid-area: info;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 24px
}

.hdnt-pp-content {
  grid-area: content;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 3.5vw, 44px)
}

.hdnt-pp-h {
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #EAE6DF;
  font-size: clamp(19px, 1.7vw, 23px);
  font-weight: 800;
  line-height: 1.3;
  color: #161310
}

/* ---- dải ảnh ---- */
.hdnt-pg {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #EAECEF, 0 10px 30px rgba(0, 0, 0, .06)
}

/* Cuộn ngang bằng CHÍNH cơ chế của trình duyệt: vuốt tay, con lăn, phím mũi tên
   đều chạy sẵn — tự bắt touchstart/touchmove thì phải làm lại quán tính, và
   thường nuốt luôn thao tác cuộn dọc của trang. */
.hdnt-pg-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch
}

.hdnt-pg-track::-webkit-scrollbar { display: none }

/* Khung VUÔNG — đúng tỉ lệ thẻ sản phẩm ngoài trang Cửa hàng
   (`product-card.php` khai `aspect-square`) và đúng tỉ lệ ô chọn phiên bản.
   Trước đây khung 4/3 mà ảnh tủ bếp chủ site tải lên lại vuông, nên hai bên hở
   hai dải kem rộng — nhìn như ảnh bị đặt lệch trong một cái khung không vừa. */
.hdnt-pg-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  aspect-ratio: 1 / 1;
  background: #F6F1E7
}

.hdnt-pg-slide img,
.hdnt-pg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* `contain`: ảnh sản phẩm rộng hơn cao thì `cover` cắt mất hai đầu. Với hàng
     hoá, cắt mất sản phẩm luôn tệ hơn chừa lề. */
  object-fit: contain;
  display: block
}

/* ⚠️ Phải khai LẠI `display:none` cho `hidden`. Thuộc tính `hidden` chỉ đặt
   display:none ở mức trình duyệt, mà `.hdnt-pg-video` là quy tắc của tác giả nên
   nó thắng — video "đã ẩn" vẫn đè kín tấm ảnh bên dưới. */
.hdnt-pg-video[hidden] { display: none }

/* ---- chấm chỉ mục ---- */
.hdnt-pg-dots {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  /* Nền trắng mờ trên ảnh nền trắng — đúng loại ảnh hàng hoá hay dùng nhất — là
     vô hình. Phải có viền và bóng. */
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .12)
}

.hdnt-pg-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #C9C3B8
}

.hdnt-pg-dots span.is-on { background: #C49B40 }

/* ---- dải ảnh nhỏ ---- */
/* Căn GIỮA dưới ảnh chính. Khai HAI lần là cố ý: `center` trơn khi dải dài hơn
   khung sẽ đẩy tràn ra CẢ HAI bên, mà phần tràn bên TRÁI thì không cuộn tới
   được — mất luôn mấy ảnh đầu. `safe center` tự lùi về `start` đúng lúc đó;
   trình duyệt cũ không hiểu dòng sau thì giữ dòng trước nên không mất phần căn
   giữa.
   ⚠️ Đừng thay bằng `margin:auto` ở từng ô: auto margin chia đều chỗ trống vào
   GIỮA các ô, dải dãn ra như bị `justify-content:space-around`. */
.hdnt-pt {
  display: flex;
  justify-content: center;
  justify-content: safe center;
  gap: 10px;
  margin-top: 12px;
  overflow-x: auto;
  scrollbar-width: none
}

.hdnt-pt::-webkit-scrollbar { display: none }

.hdnt-pt-item {
  flex: 0 0 auto;
  width: 82px;
  height: 82px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #F6F1E7;
  cursor: pointer;
  /* Vòng chọn vẽ bằng box-shadow chứ không border: border cộng thêm vào kích
     thước nên ô đang chọn nhỏ hơn các ô khác. */
  box-shadow: 0 0 0 1px #EAECEF
}

.hdnt-pt-item.is-on { box-shadow: 0 0 0 2px #C49B40 }

/*
 * ⚠️ `cover` — CẮT VUÔNG, giống hệt ảnh lớn và thẻ ngoài trang Cửa hàng.
 *
 * Trước đây là `contain` từ hồi dải ảnh phụ nằm NGOÀI khung, trên nền kem: ở đó
 * "thà chừa lề còn hơn cắt mất sản phẩm" là đúng. Nhưng ảnh bếp chủ site tải
 * lên là ảnh NGANG (16:10), nhét vào ô vuông thì hở hai dải kem trên dưới, mà
 * bo góc 12px của ô lại cắt vào chính hai dải ấy — nhìn ra thành "ảnh phụ bị bo
 * méo phía trên". Đo được: ô 82×82 mà mực ảnh chỉ chiếm dải giữa cao 51px.
 *
 * Và nó còn LỆCH với ảnh lớn: chủ site đã chốt "ảnh sản phẩm mặc định cắt vuông
 * hết" nên tấm lớn `cover` còn ô chọn `contain` — hai lối cắt cho cùng một tấm
 * ảnh, đặt ngay cạnh nhau.
 */
.hdnt-pt-item img { width: 100%; height: 100%; object-fit: cover; display: block }

/*
 * Ngoại lệ: preset "Điện tử" là hàng hoá TÁCH NỀN, ở đó cắt là cắt mất chính
 * sản phẩm. Ảnh lớn của preset ấy đã `contain` thì ô chọn phải theo — không thì
 * ô chọn cắt cụt món hàng mà tấm lớn ngay trên lại hiện đủ.
 */
.hdnt-ps--tech .hdnt-pt-item img,
.hdnt-ps--tech .hdnt-opt-thumb { object-fit: contain }

/* ---- ô chọn phiên bản ---- */
/* fieldset/legend mặc định có viền + thụt lề riêng của trình duyệt, phải xoá. */
.hdnt-opts-w { border: 0; margin: 0; padding: 0; min-inline-size: 0 }

/* Phiên bản KHÔNG có ảnh (Melamine / Laminate / Acrylic…): xếp FLEX, ô co theo
   bề dài của chữ và nằm CẠNH NHAU, dài quá mới xuống dòng. */
.hdnt-opts--text {
  display: flex;
  flex-wrap: wrap;
  gap: 10px
}

/* Phiên bản CÓ ảnh: lưới 4 ô vuông. Bề ngang ô do CỘT LƯỚI chặn TRẦN, không
   đặt cỡ cứng — `1fr` chia hết chỗ nên ở khổ một cột (thẻ mua trải hết màn) mỗi
   ô phình to hơn cả ảnh sản phẩm; `minmax(0,92px)` giữ 92px ở chỗ rộng và tự co
   ở chỗ hẹp, `justify-content:start` dồn phần dư ra ngoài dải. */
.hdnt-opts--swatch {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 92px));
  justify-content: start;
  gap: 10px
}

.hdnt-opt-tile {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  color: #161310;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0 0 1px #EAECEF;
  transition: box-shadow .18s, background .18s
}

.hdnt-opt-tile:hover { box-shadow: 0 0 0 1px #C49B40 }
.hdnt-opt-tile.is-on { background: #FBF6EA; box-shadow: 0 0 0 2px #C49B40 }

/* Ô ẢNH: vuông, ảnh chiếm gần trọn ô, KHÔNG lề trong — ảnh sản phẩm vốn đã
   chừa sẵn khoảng trắng quanh món hàng, thêm lề của ô nữa là đệm hai lớp.
   ⚠️ `width:100%` khai TƯỜNG MINH bên cạnh `aspect-ratio`: Safari coi bề ngang
   là suy ra được từ tỉ lệ nên thôi kéo giãn, ô méo hẳn (bài học #49 của meta). */
.hdnt-opts--swatch .hdnt-opt-tile {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  min-height: 0;
  padding: 0;
  border-radius: 16px;
  background: #F6F1E7
}

.hdnt-opt-thumb {
  width: 100%;
  height: 100%;
  /*
   * ⚠️ `cover` — đổi từ `contain` cùng đợt với dải ảnh phụ, và vì đúng lý do đó:
   * ô vuông mà ảnh bếp nằm NGANG thì `contain` hở hai dải kem trên dưới, rồi bo
   * góc 15px cắt vào chính hai dải ấy.
   * Ghi chú cũ ("cover cắt mất hai đầu") viết TRƯỚC chốt "ảnh sản phẩm mặc định
   * cắt vuông hết" của chủ site — ở đây là ảnh CẢNH bếp chứ không phải hàng hoá
   * tách nền, cắt bớt rìa không mất món hàng nào. Ô chọn nằm cách dải ảnh phụ
   * đúng một gang tay nên hai lối cắt khác nhau là lộ ngay.
   */
  object-fit: cover;
  /* Bo bằng đúng góc trong của ô: ô hết lề rồi nên ảnh chạm thẳng vào viền, để
     góc vuông là nó thò ra đè lên đường bo. */
  border-radius: 15px;
  display: block
}

/* Ô CHỮ lọt vào lưới ảnh thì trải cả hàng — nhãn tiếng Việt dài, ép vào ô vuông
   89px là chữ tràn hoặc bị cắt. */
.hdnt-opts--swatch .hdnt-opt-tile--text {
  grid-column: 1 / -1;
  width: auto;
  max-width: none;
  aspect-ratio: auto;
  height: auto;
  min-height: 42px;
  padding: 8px 16px;
  border-radius: 999px;
  background: #fff
}

/* Ô radio ẩn nhưng VẪN nhận tiêu điểm bàn phím — `display:none` là người dùng
   bàn phím không chọn được phiên bản nào. */
.hdnt-opt-tile input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none
}

.hdnt-opt-tile:focus-within { box-shadow: 0 0 0 2px #C49B40 }

/* Dòng "Cánh: Acrylic trắng" — mỗi cặp một dòng, tên nhạt hơn giá trị. */
.hdnt-buy-attrs { margin-top: 14px; display: flex; flex-direction: column; gap: 4px }
.hdnt-buy-attrs p { margin: 0; font-size: 14px; display: flex; gap: 6px }
.hdnt-buy-attrs span { color: #6b6357 }
.hdnt-buy-attrs b { color: #161310 }

/* ---------------------------------------------------------------------------
   Thẻ mua hàng (ghim theo cuộn)
--------------------------------------------------------------------------- */

.hdnt-buy {
  /* Đầu trang `sticky` cao ĐÚNG 76px ở mọi khổ (`h-[76px]`, không có biến thể
     responsive) và dải topbar 36px thì cuộn đi mất — nên đây là hằng số, không
     phải thứ cần JS đo như theme có đầu trang co giãn. Đổi chiều cao header thì
     sửa con số này. */
  position: sticky;
  top: calc(var(--hdnt-stick-h, 76px) + 16px);
  /* ⚠️ Thẻ CAO HƠN khung nhìn thì `sticky` ghim đỉnh rồi đứng im — nút "Thêm vào
     giỏ" nằm dưới mép màn hình và cuộn kiểu gì cũng KHÔNG tới được (đo thật với
     7 phiên bản có ảnh: thẻ 994px, nút ở y=877 trong khung nhìn 900px, không
     nhúc nhích khi cuộn). Số phiên bản là DỮ LIỆU, không chặn được bằng cách
     bớt nội dung — nên chặn trần rồi cho cuộn TRONG thẻ: thẻ vừa khung thì
     không sinh thanh cuộn nào, chỉ thẻ quá cao mới có.
     `svh` chứ không `vh`: thanh địa chỉ trên điện thoại ẩn/hiện lúc cuộn. Khai
     `vh` trước làm bản dự phòng cho trình duyệt chưa hiểu. */
  max-height: var(--hdnt-col-h);
  overflow-y: auto;
  scrollbar-width: thin;
  /* ⚠️ CỐ Ý không đặt `overscroll-behavior:contain`: nó chặn "lây" cuộn sang
     trang, nên cuộn hết thẻ rồi là con lăn ĐỨNG IM khi con trỏ còn nằm trên
     thẻ — khách tưởng trang treo. Ở một cột phụ thì lây sang trang mới đúng. */
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 0 0 1px #EAECEF, 0 10px 30px rgba(0, 0, 0, .06)
}

.hdnt-buy-head { display: flex; align-items: flex-start; gap: 12px }
.hdnt-buy-cat {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13px;
  color: #6b6357;
  text-transform: uppercase;
  letter-spacing: .02em
}
.hdnt-buy-cat a { color: inherit; text-decoration: none }
.hdnt-buy-cat a:hover { color: #C49B40 }

.hdnt-buy-flag {
  flex: none;
  padding: 4px 11px;
  border-radius: 8px;
  background: #C49B40;
  color: #fff;
  font-size: 12px;
  font-weight: 700
}

.hdnt-buy-title {
  margin: 0;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #161310
}

/*
 * Dòng điểm + số lượt dưới tiêu đề. Cả dòng là một liên kết tới #danh-gia — đọc
 * điểm xong thì việc tiếp theo bao giờ cũng là muốn xem ai đã viết gì.
 * ⚠️ `color: inherit` là bắt buộc: đây là thẻ `<a>` nên quy tắc link của theme
 * sẽ tô nó thành màu nhấn nếu không chốt lại.
 */
.hdnt-buy-rate {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 10px;
  color: inherit;
  text-decoration: none
}
.hdnt-buy-rate strong { font-size: 16px; font-weight: 700; color: #161310 }
/* Vạch ngăn vẽ bằng viền của chính ô số — không thêm thẻ nào vào HTML. */
.hdnt-buy-rate-n {
  padding-left: 10px;
  border-left: 1px solid #E3DCCC;
  font-size: 14px;
  color: #6b6357
}
.hdnt-buy-rate-n b { font-weight: 700; color: #161310 }
.hdnt-buy-rate:hover .hdnt-buy-rate-n { color: #161310 }

.hdnt-buy-price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid #EAE6DF
}
.hdnt-buy-price strong { font-size: 26px; font-weight: 800; color: #161310 }
.hdnt-buy-price del { font-size: 17px; color: #6b6357 }

.hdnt-buy-x { margin: 0; color: #6b6357; font-size: 15px; line-height: 1.55 }

/* ---- thông số đóng/mở ---- */
.hdnt-buy-specs { border-top: 1px solid #EAE6DF; border-bottom: 1px solid #EAE6DF; padding: 4px 0 }
.hdnt-buy-specs summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 15px;
  color: #161310
}
.hdnt-buy-specs summary::-webkit-details-marker { display: none }
/* Mũi tên vẽ bằng viền, không dùng ký tự — mỗi phông một dáng khác nhau. */
.hdnt-buy-specs summary::after {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-right: 2px solid #6b6357;
  border-bottom: 2px solid #6b6357;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s
}
.hdnt-buy-specs[open] summary::after { transform: rotate(-135deg) translateY(-2px) }
.hdnt-buy-specs-l { margin: 0 0 14px; display: flex; flex-direction: column; gap: 9px }
.hdnt-buy-specs-l > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; font-size: 14px }
.hdnt-buy-specs-l dt { margin: 0; color: #6b6357 }
.hdnt-buy-specs-l dd { margin: 0; color: #161310; font-weight: 500 }

/*
 * Ba kiểu MỞ SẴN. Tiêu đề là `<p>` thường (khối không gập được thì không dựng
 * `<details>` — xem chú thích ở template), nên phải tự khai lại dáng chữ mà
 * `summary` vốn có.
 * ⚠️ Kiểu `fold` KHÔNG có quy tắc nào ở đây: dáng đang chạy phải là nhánh "không
 * áp thêm gì", không phải một kiểu tự khai lại đúng bộ số ấy — hai nơi cùng giữ
 * một giá trị thì bên bị quên chính là giao diện mặc định của mọi site.
 */
.hdnt-buy-specs-h {
  margin: 0;
  padding: 12px 0 10px;
  font-weight: 700;
  font-size: 15px;
  color: #161310
}

/* Bảng kẻ dòng: mỗi dòng một vạch, nhãn trái · giá trị phải. */
.hdnt-buy-specs--table .hdnt-buy-specs-l { gap: 0 }
.hdnt-buy-specs--table .hdnt-buy-specs-l > div {
  padding: 9px 0;
  border-top: 1px solid #F0ECE4
}
.hdnt-buy-specs--table .hdnt-buy-specs-l > div:first-child { border-top: 0 }
.hdnt-buy-specs--table .hdnt-buy-specs-l dd { text-align: right }

/*
 * Lưới 2 cột: nhãn NẰM TRÊN giá trị, hai cặp một hàng — đọc nhanh khi thông số
 * ngắn (kích thước, chất liệu, bảo hành).
 * ⚠️ Phải đè lại `grid-template-columns` của quy tắc gốc `> div` (0,2,0), nên
 * selector ở đây cũng đủ (0,2,0) và đứng SAU trong tệp là thắng.
 */
.hdnt-buy-specs--grid .hdnt-buy-specs-l {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px
}
.hdnt-buy-specs--grid .hdnt-buy-specs-l > div {
  display: block;
  padding: 9px 11px;
  border-radius: 10px;
  background: #F6F1E7
}
.hdnt-buy-specs--grid .hdnt-buy-specs-l dt { font-size: 12px; line-height: 1.3 }
.hdnt-buy-specs--grid .hdnt-buy-specs-l dd { margin-top: 2px; font-size: 14px }

/* Ô hẹp thì lưới 2 cột thành 1 — hai cột trên thẻ mua 400px là mỗi ô ~180px,
   "Chất liệu thùng" xuống ba dòng. */
@media (max-width: 460px) {
  .hdnt-buy-specs--grid .hdnt-buy-specs-l { grid-template-columns: minmax(0, 1fr) }
}

/* ---- khối giao hàng ---- */
.hdnt-buy-ship-t { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: #161310 }
.hdnt-buy-ship ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px }
.hdnt-buy-ship li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #6b6357 }
.hdnt-buy-ship li svg { flex: none; margin-top: 1px; color: #161310 }
.hdnt-buy-ship b { color: #161310 }

/* ---- nút ---- */
.hdnt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: filter .18s, background .18s, box-shadow .18s
}
.hdnt-btn:active { transform: scale(.97) }
.hdnt-btn--primary { background: #C49B40; color: #fff; box-shadow: 0 8px 22px rgba(196, 155, 64, .3) }
.hdnt-btn--primary:hover { filter: brightness(1.06) }
.hdnt-btn--dark { background: #161310; color: #fff }
.hdnt-btn--dark:hover { background: #2a241d }
.hdnt-btn--ghost { background: #fff; color: #161310; box-shadow: 0 0 0 1px #EAECEF }
.hdnt-btn--ghost:hover { background: #FAF8F4 }

/* Nút chính chiếm HÀNG RIÊNG, rộng hết thẻ: lời kêu gọi chính của cả trang thì
   không nên chia hàng với nút khác. Hai nút phụ đứng cạnh nhau ở hàng dưới. */
.hdnt-buy-actions { display: flex; flex-wrap: wrap; gap: 10px }
.hdnt-buy-actions .hdnt-btn { flex: 1 1 140px }

/* Ô Số lượng bên TRÁI, "Thêm vào giỏ" bên phải — CÙNG một hàng, và hàng ấy là
   của RIÊNG hai đứa nó.
   ⚠️ Đừng chỉ đổi `flex-basis` của nút chính rồi trông vào `flex-wrap` tự bẻ
   dòng: đo thật ở 1440px thì "Mua ngay" (`flex:1 1 140px`) vẫn lọt lên chung
   hàng — ba thứ chia nhau 460px nên nút chính co còn 180px và nhãn "Thêm vào
   giỏ" GÃY LÀM HAI DÒNG. Số đo chiều cao vẫn đẹp, phải nhìn ảnh chụp mới thấy.
   Một thẻ bọc riêng là chốt chắc chắn, không phụ thuộc bề ngang thẻ mua. */
.hdnt-buy-row1 { flex: 1 1 100%; display: flex; gap: 10px }
.hdnt-buy-actions .hdnt-btn--primary { flex: 1 1 auto; min-height: 52px; font-size: 16px }

.hdnt-qty {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 52px;
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
  /* Vành vẽ bằng box-shadow như mọi chỗ khác của theme — `border` cộng thêm vào
     kích thước nên ô số lượng sẽ cao hơn nút bên cạnh đúng 2px. */
  box-shadow: 0 0 0 1px #EAECEF
}

.hdnt-qty-b {
  width: 38px;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: #161310;
  font-size: 19px;
  line-height: 1;
  cursor: pointer
}

.hdnt-qty-b:hover:not(:disabled) { background: #F6F1E7 }
.hdnt-qty-b:disabled { opacity: .35; cursor: default }

.hdnt-qty-i {
  width: 40px;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #161310;
  /* Mặc định chữ số "1" hẹp hơn "8" nên ô nhảy qua nhảy lại mỗi lần bấm +/−. */
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield
}

/* Nút xoay của ô số mặc định chiếm chỗ và lệch hẳn tông với cặp nút +/− tự vẽ. */
.hdnt-qty-i::-webkit-outer-spin-button,
.hdnt-qty-i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0 }

.hdnt-qty-i:focus-visible { outline: 2px solid #C49B40; outline-offset: -2px }

/* ---- ba cam kết ---- */
/* Biểu tượng nằm TRÊN chữ chứ không cạnh chữ: ba nhãn tiếng Việt cộng lại dài
   hơn lòng thẻ, để cạnh nhau là chữ bị xén. Ba cột bằng nhau thì nhãn dài tự
   xuống dòng trong cột của nó, không đụng gì tới hai cột kia. */
.hdnt-buy-trust {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  display: grid;
  /* Số cột theo số mục THẬT SỰ in ra: chủ site xoá trắng một ô chữ ở Tuỳ biến
     thì dải còn hai mục, mà `repeat(3,…)` cứng sẽ chừa một rãnh trống lệch hẳn
     sang phải. PHP in `--hdnt-trust-n`; dự phòng 3 = đúng dáng cũ. */
  grid-template-columns: repeat(var(--hdnt-trust-n, 3), minmax(0, 1fr));
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.35;
  color: #6b6357;
  text-align: center
}
.hdnt-buy-trust li { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0 }
.hdnt-buy-trust svg { flex: none; color: #C49B40 }

/* ---------------------------------------------------------------------------
   Sản phẩm liên quan — dải trượt ngang
--------------------------------------------------------------------------- */

.hdnt-rel-h { margin: 0 0 20px; font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; color: #161310 }
.hdnt-rel-slider { position: relative }

/* Bề ngang ô tính THEO KHUNG chứ không `1fr`: `1fr` chia đều chỗ trống nên chỉ
   có 2 sản phẩm là mỗi ô phình ra nửa dải, ảnh to bằng ảnh sản phẩm chính.

   3 ô mỗi lượt xem trên máy tính (chốt của chủ site 2026-08-09: 4 ô thì "hơi
   nhỏ"). Cột nội dung của trang sản phẩm chỉ ~723px ở 1440px — chia 4 thì mỗi ô
   còn ~170px, hẹp hơn cả ô chọn phiên bản 92px×2; chia 3 ra ~229px.
   ⚠️ Nấc ≤1000px cũ cũng là 3 nên nay THỪA — đã gỡ. Để lại thì nó ghim chết
   con số 3 ở khổ ấy, ai đổi nấc máy tính về sau sẽ thấy đúng một dải bề ngang
   không đổi theo mà không hiểu vì sao. */
.hdnt-rel-rail {
  --rel-gap: 18px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--rel-gap)) / 3);
  gap: var(--rel-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 4px;
  justify-content: start
}
.hdnt-rel-rail::-webkit-scrollbar { display: none }

/* Nút tròn nằm ĐÈ lên dải, không thò ra ngoài lề: dải nằm trong cột nội dung
   của lưới, đẩy nút ra ngoài là sinh thanh cuộn ngang cho cả trang ở màn hẹp.
   `top:38%` để nút ngang tầm giữa khu vực ẢNH — nửa dưới thẻ là chữ và nút. */
.hdnt-rel-nav {
  position: absolute;
  top: 38%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #161310;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 1px #EAECEF, 0 6px 18px rgba(0, 0, 0, .12)
}
.hdnt-rel-nav:hover { background: #FAF8F4 }
.hdnt-rel-nav[hidden] { display: none }
.hdnt-rel-prev { left: 8px }
.hdnt-rel-next { right: 8px }
/* Mũi tên vẽ bằng viền, không dùng ký tự ‹ › — mỗi phông một dáng khác nhau. */
.hdnt-rel-nav::before {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor
}
.hdnt-rel-next::before { transform: rotate(-45deg) translate(-2px, -2px) }
.hdnt-rel-prev::before { transform: rotate(135deg) translate(-2px, -2px) }

.hdnt-rel-card {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 1px #EAECEF
}
/* Dải "Sản phẩm liên quan" dựng ĐÚNG như thẻ ngoài trang Cửa hàng
   (`product-card.php`): khung vuông, ảnh LẤP KÍN và chạm thẳng ba mép thẻ —
   `overflow:hidden` của thẻ lo phần bo góc. Ba chỗ cùng in ảnh sản phẩm mà mỗi
   chỗ một dáng thì lộ ngay ra rằng chúng do ba nơi khác nhau dựng.
   ⚠️ Bỏ `margin-top:12px`: chỉ 12px ấy thôi đã đủ làm tấm ảnh trông như bị đặt
   lệch trong một cái khung rộng hơn nó.
   ⚠️ Đổi `contain` → `cover` là CHỦ Ý của chủ site (2026-08-09, "để ảnh full
   giống ảnh 2"), khác luật chung "thà chừa lề còn hơn cắt mất sản phẩm": ở đây
   là ảnh CẢNH bếp chứ không phải hàng hoá tách nền, cắt bớt rìa không mất món
   hàng nào — và thẻ Cửa hàng vốn đã `cover` từ lâu. */
.hdnt-rel-media {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 1 / 1
}
.hdnt-rel-media img { width: 100%; height: 100%; object-fit: cover; display: block }
/* `flex:1` cho thân thẻ chiếm hết chiều cao còn lại — thiếu dòng này thì
   `margin-top:auto` của nút không có chỗ trống nào để đẩy. */
/* Đệm trên 16px như thẻ Cửa hàng (`p-4`). Ảnh nay chạm thẳng mép trên khối
   chữ nên 4px cũ là dòng chuyên mục dính sát đáy ảnh. */
.hdnt-rel-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px 18px;
  flex: 1;
  align-items: center;
  text-align: center
}
.hdnt-rel-cat { font-size: 13px; color: #6b6357 }
.hdnt-rel-name { font-size: 16px; font-weight: 700; line-height: 1.3; color: #161310; text-decoration: none }
.hdnt-rel-name:hover { color: #C49B40 }
/* Nút GHIM ĐÁY thẻ: tên sản phẩm dài 1–3 dòng nên xếp nối tiếp là nút mỗi thẻ
   một độ cao, cả dải nhìn răng cưa. Dạng viên thuốc căn giữa chứ không kéo hết
   bề ngang — nhãn ngắn mà nút rộng bằng thẻ trông như một thanh trống. */
.hdnt-rel-cta {
  margin-top: auto;
  align-self: center;
  min-width: 118px;
  padding: 9px 18px;
  border-radius: 999px;
  background: #fff;
  color: #161310;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0 0 1px #EAECEF
}
.hdnt-rel-cta:hover { box-shadow: 0 0 0 1px #C49B40; color: #C49B40 }

/* ---------------------------------------------------------------------------
   Mô tả sản phẩm: thu gọn + nút "Xem thêm" / "Thu gọn"

   Nội dung in ĐẦY ĐỦ trong HTML, đây chỉ là lớp che — máy tắt JS vẫn đọc trọn
   bài. Vì vậy trạng thái thu gọn do JS gắn (`is-clamp`), KHÔNG phải mặc định:
   thiếu JS mà mặc định thu gọn thì khách mất nửa bài mà không có nút nào mở ra.
   ------------------------------------------------------------------------ */
.hdnt-more-body { position: relative }
.hdnt-more.is-clamp .hdnt-more-body {
  max-height: var(--hdnt-more-h, 420px);
  overflow: hidden
}
/* Dải mờ dần ở đáy — nói ra "còn nữa" mà không tốn thêm một dòng chữ nào.
   ⚠️ `pointer-events:none`: nó phủ lên phần cuối bài, để bắt sự kiện thì mọi
   liên kết nằm dưới nó bấm không trúng. */
.hdnt-more.is-clamp .hdnt-more-body::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 88%)
}
.hdnt-more-bar { display: flex; justify-content: center; margin-top: 6px }
.hdnt-more-bar[hidden] { display: none }
.hdnt-more-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #161310;
  font: inherit;
  font-weight: 700;
  cursor: pointer
}
.hdnt-more-btn:hover { color: #C49B40 }
/* Mũi tên xoay theo trạng thái — một hình cho cả hai chiều, không nuôi hai icon
   rồi sửa một bên quên bên kia. */
.hdnt-more-btn svg { transition: transform .2s }
.hdnt-more-btn[aria-expanded="true"] svg { transform: rotate(180deg) }
@media (prefers-reduced-motion: reduce) {
  .hdnt-more-btn svg { transition: none }
}

/* Thanh mua ghim đáy: CHỈ bản điện thoại. Trên máy tính thẻ mua đã ghim sẵn ở
   cột phải nên thêm thanh này chỉ tổ che mất nội dung. */
.hdnt-buybar { display: none }

/* ---------------------------------------------------------------------------
   MÁY TÍNH: ảnh lớn + ảnh phụ nằm CHUNG một khung có viền, cao bằng thẻ mua

   Chốt của chủ site 2026-08-09: *"cho kích thước chiều cao layout sản phẩm trái
   bằng với layout phải; thêm hết ảnh phụ vào bên trong khung layout trái và bo
   viền toàn bộ cả ảnh to và các ảnh phụ luôn"*.

   Trước đây `.hdnt-pg` tự mang bo góc + vành, còn dải ảnh phụ nằm NGOÀI nó —
   nhìn ra hai khối rời. Nay vành và bo góc dời lên `.hdnt-pp-media`, bọc trọn
   cả hai; `.hdnt-pg` bên trong chỉ còn bo góc nhỏ, không vành.

   Chiều cao lấy `--hdnt-col-h` — CÙNG con số thẻ mua đang dùng làm trần. Đo
   trước khi sửa: khung trái 817px so với thẻ mua 792px ở 1440×900, và 797 so
   với 692 ở 1280×800 — tức cột trái đang CAO HƠN, đúng cảm giác "vẫn khá lớn".

   ⚠️ Chỉ áp từ 1001px trở lên — đúng ngưỡng thẻ mua thôi ghim. Dưới đó khung
   nhìn thấp mà ép chiều cao là ảnh teo lại còn một dải mỏng.
--------------------------------------------------------------------------- */
@media (min-width: 1001px) {
  /*
   * Ở khổ máy tính, ràng buộc là **không được cao hơn thẻ mua** — nên cạnh ô
   * ảnh tính theo CHIỀU CAO còn lại của cột chứ không theo bề ngang.
   *
   * ⚠️ `height:auto` + trần, KHÔNG phải `height: var(--hdnt-col-h)`. Ép đúng
   * chiều cao trần thì cụm cao hơn nội dung của nó ở những khổ mà bề ngang cột
   * là ràng buộc — hồi chưa có viền thì không ai thấy, nhưng nay nó hiện ra
   * thành hai dải trắng trên và dưới TRONG lòng khung (đo được 892px khung so
   * với 825px nội dung ở 1600×1000).
   *
   * ⚠️ Cạnh ô vuông phải tính bằng `min()` của BỀ NGANG cột và CHIỀU CAO còn
   * lại — không làm được bằng `height:100%` + `max-width:100%`: khi bề ngang là
   * ràng buộc thì `max-width` kẹp bề ngang nhưng chiều cao vẫn 100%, ra hình
   * CHỮ NHẬT. Đo được ở 1600×1000 · 1100×900 · 1024×800 đều lệch (723×798 ·
   * 600×698 · 547×598) trong khi 1440×900 thì tình cờ vuông.
   */
  .hdnt-pp-media {
    height: auto;
    max-height: var(--hdnt-col-h);
    width: min(100%, calc(var(--hdnt-col-h) - var(--hdnt-pt-h)));
    margin-inline: auto
  }

  /* Chấm chỉ mục CHỈ dành cho điện thoại — chốt của chủ site 2026-08-09:
     *"giao diện desktop thì bỏ các hạt này không hiện"*. Ở đây đã có dải ảnh
     phụ làm chỉ mục, mà dải ấy còn bấm được và nói rõ tấm nào là tấm nào. */
  .hdnt-pg-dots { display: none }
}

@media (max-width: 1000px) {
  /* Một cột: thứ tự trong HTML đã là ảnh → thẻ mua → nội dung, đúng thứ tự cần
     đọc trên điện thoại, nên chỉ cần bỏ khai báo vùng. */
  .hdnt-pp { grid-template-columns: minmax(0, 1fr); grid-template-areas: none }
  .hdnt-pp-media,
  .hdnt-pp-info,
  .hdnt-pp-content { grid-area: auto }

  /* Ghim theo cuộn chỉ có nghĩa khi thẻ nằm CẠNH ảnh. Xếp dọc rồi mà còn sticky
     thì thẻ che mất nội dung bên dưới.
     ⚠️ Phải trả luôn `max-height`/`overflow` về mặc định: hết ghim rồi mà còn
     chặn trần thì thẻ mọc thanh cuộn RIÊNG ngay giữa trang — khách phải cuộn
     hai tầng lồng nhau, tệ hơn hẳn cái nó định chữa. */
  .hdnt-buy { position: static; max-height: none; overflow: visible }

  /* Giá TRÊN, nút DƯỚI. Xếp ngang thì nút chỉ còn ~60% bề ngang màn hình, mà
     đây là nút duy nhất của cả trang. */
  .hdnt-buybar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    padding: 10px clamp(12px, 4vw, 20px);
    /* Lùi thêm cho vạch home của iPhone; máy không có thì env() trả 0. */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #EAECEF;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .08)
  }
  .hdnt-buybar-p { display: flex; align-items: baseline; justify-content: center; gap: 8px; min-width: 0 }
  .hdnt-buybar-p strong { font-size: 19px; font-weight: 800; color: #161310; white-space: nowrap }
  .hdnt-buybar-p del { font-size: 13px; color: #6b6357; white-space: nowrap }
  /* Hai nút CÙNG một hàng, chia đôi bề ngang — chốt của chủ site: thanh ghim chỉ
     còn "Thêm vào giỏ" và "Mua ngay". */
  .hdnt-buybar-b { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
  .hdnt-buybar .hdnt-btn { width: 100%; min-height: 50px; font-size: 16px }

  /*
   * Icon giỏ ở thanh ghim đáy (chốt của chủ site 2026-08-09). Nút chỉ được nửa
   * bề ngang màn hình nên phải thu LỀ TRONG cho vừa — `.hdnt-btn` khai
   * `padding: 0 22px`, mà 44px lề trên một nút 175px thì nhãn "Thêm vào giỏ"
   * gãy làm hai dòng ngay từ 414px.
   *
   * ⚠️ Đo bằng SỐ DÒNG CHỮ (`Range.getClientRects().length`), đừng đo chiều cao
   * nút: nút khai `min-height` cố định nên chữ gãy đôi mà chiều cao vẫn ra đúng
   * 50px — mọi phép đo kích thước đều "đẹp", chỉ nhìn ảnh chụp mới thấy.
   */
  .hdnt-buybar .hdnt-btn { padding-inline: 12px; gap: 6px }
  .hdnt-buybar .hdnt-btn svg { width: 18px; height: 18px; flex: none }
  /*
   * ⚠️ Thanh ghim MẶC ĐỊNH ẨN, JS mới bật khi cụm nút trong thẻ cuộn khỏi tầm
   * mắt. Bản trước ghim thường trực và `display:none` cả cụm nút lẫn GIÁ trong
   * thẻ — nên trên điện thoại khách không có ô Số lượng, không có "Mua ngay", và
   * giá chỉ nằm ở thanh dưới chứ không hề hiện trong thẻ sản phẩm.
   *
   * ⚠️ Phải có `visibility`, không chỉ `transform`: khối đã đẩy ra ngoài khung
   * nhìn vẫn NHẬN TIÊU ĐIỂM bàn phím, nên bấm Tab lại đi qua hai cái nút không
   * nhìn thấy (đúng bài học của nút co hẹp cột trái ở trình dựng).
   */
  .hdnt-buybar {
    transform: translateY(115%);
    visibility: hidden;
    transition: transform .22s ease, visibility .22s
  }
  .hdnt-buybar.is-on { transform: none; visibility: visible }

  /* Chừa chỗ cho thanh, nếu không nó đè lên chân trang. `:has` để CHỈ trang nào
     có thanh mới bị đẩy — trang khác giữ nguyên. */
  body:has(.hdnt-buybar) { padding-bottom: 124px }

  /*
   * ⚠️ ĐÃ BỎ lối "ảnh tràn hai mép + dải ảnh phụ thành chấm" — chốt của chủ site
   * 2026-08-09: điện thoại cũng phải có KHUNG BO VIỀN và DẢI ẢNH PHỤ thật như
   * máy tính. Phần trang trí và nội khối nay khai ở tầng gốc nên khối này không
   * còn gì phải làm cho cụm ảnh, ngoài việc thu dải ảnh phụ lại cho vừa màn.
   *
   * Lý do cũ ("một dải ô vuông 82px ăn mất cả trăm pixel chiều cao") vẫn đúng,
   * nên dải không bị bỏ mà chỉ THU NHỎ ô — xem khối `max-width:620px` bên dưới.
   */

  /* Chấm chỉ mục đè đáy ảnh: ở đây khách VUỐT là chính, mà dải ảnh phụ nằm dưới
     khung nên trong lúc vuốt không có gì nói đang ở tấm thứ mấy. */
  .hdnt-pg-dots { display: flex }
}

/* Bậc thang xuống dần cho màn hẹp — đo ở 375px và 360px thì bộ số trên vẫn còn
   chật, phải hạ thêm cỡ chữ và lề.
   ⚠️ Ba khối này để NGOÀI khối 1000px, KHÔNG chèn vào giữa nó: cắt khối 1000px
   làm đôi thì ngoặc vẫn CÂN mà bốn quy tắc ở nửa sau (ẩn thanh mặc định · chừa
   chỗ chân trang · chấm chỉ mục) rơi vào khối hẹp hơn — tức thanh ghim hiện sẵn
   ngay lúc mở trang trên MỌI điện thoại. Đã vấp thật ngay trong đợt này. */
@media (max-width: 399.98px) {
  .hdnt-buybar .hdnt-btn { padding-inline: 8px; font-size: 15px; gap: 5px }
}

/* Máy rất hẹp (iPhone SE đời đầu, 320px): tới đây nhãn gãy dòng kể cả khi đã hạ
   hết cỡ chữ, nên bỏ icon — bậc cuối, không phải một nhát cắt cho mọi khổ. */
@media (max-width: 339.98px) {
  .hdnt-buybar .hdnt-btn--primary svg { display: none }
}

@media (max-width: 620px) {
  .hdnt-buy { padding: 20px; border-radius: 18px }
  /* Vẫn 4 cột, chỉ bo góc nhỏ lại. KHÔNG ép `width`/`height` cứng: cỡ cứng cộng
     ba khe là vừa khít màn 390px nhưng tràn ngay ở màn hẹp hơn — mà `height`
     cứng còn đè lên `aspect-ratio` làm ô thành chữ nhật. */
  .hdnt-opts--swatch .hdnt-opt-tile { border-radius: 14px }
  .hdnt-opts--swatch .hdnt-opt-thumb { border-radius: 13px }
  .hdnt-opts--swatch .hdnt-opt-tile--text { width: auto; height: auto; aspect-ratio: auto }
  .hdnt-rel-rail { grid-auto-columns: calc((100% - var(--rel-gap)) / 2) }
  .hdnt-pp { padding: 20px 16px 16px }

  /* Khung ảnh bo nhẹ lại cho hợp khổ hẹp. */
  .hdnt-pp-media { border-radius: 16px }
  /*
   * Dải ảnh phụ THU NHỎ ô thay vì bỏ đi. Lý do cũ vẫn đúng — một dải ô 82px ăn
   * mất cả trăm pixel chiều cao trên màn hẹp — nhưng chủ site cần thấy ảnh phụ,
   * nên chữa bằng cách hạ cỡ ô chứ không phải giấu cả dải.
   * Cùng lẽ với khổ rộng: 3px chuyển từ margin sang padding để vòng chọn không
   * bị dải cuộn xén mất mép trên; tổng chiều cao giữ nguyên.
   */
  .hdnt-pp-media .hdnt-pt { gap: 8px; margin-top: 5px; padding: 3px 8px 8px }
  .hdnt-pt-item { width: 56px; height: 56px; border-radius: 10px }
}

/*
 * BỐ CỤC NGANG ở khổ máy tính (chốt của chủ site 2026-08-09, kèm ảnh mẫu): ô
 * điểm bên trái trải HAI hàng, dãy chip ở trên phải, thanh phân bố ngay dưới
 * chip. Nút "Đánh giá ngay" nằm cuối cột trái.
 * ⚠️ Dải nền nằm ở vỏ chung; ba khối con KHÔNG tự khai nền, nếu không bố cục
 * ngang lộ ra mấy mảng kem lồng nhau.
 */
.hdnt-rv-panel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "score chips"
    "score bars"
    "btn   bars";
  gap: 16px 28px;
  align-items: start;
  padding: 20px 24px;
  border-radius: 18px;
  background: #F6F1E7
}
.hdnt-rv-score { grid-area: score }
.hdnt-rv-chips { grid-area: chips }
.hdnt-rv-bars  { grid-area: bars }
.hdnt-rv-open  { grid-area: btn }

/*
 * ⚠️ Xếp bằng FLEX CỘT, không phải `text-align` + `display: block`.
 * `hdnt_stars_html()` trả về một thẻ `<span>`, nên quy tắc cũ `.hdnt-rv-score
 * span { display: block }` biến CẢ DẢI SAO thành khối rộng 5em — mà `text-align`
 * chỉ căn được nội dung dòng, không căn khối. Hệ quả: số điểm nằm một chỗ còn dải
 * sao dính mép trái, đo được lệch tâm 113px ở khổ 390px.
 */
.hdnt-rv-score {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px
}
/* Số điểm và chữ "trên 5" cùng một dòng, căn theo ĐƯỜNG CHÂN CHỮ — căn giữa thì
   chữ nhỏ trôi lên lưng chừng con số. */
.hdnt-rv-avg { display: flex; align-items: baseline; gap: 7px; margin: 0 }
.hdnt-rv-avg strong { font-size: 38px; font-weight: 800; line-height: 1; color: #161310 }
.hdnt-rv-avg span { font-size: 15px; color: #6b6357 }
.hdnt-rv-count { font-size: 13px; color: #6b6357 }
/* Sao ở khối tóm tắt to hơn hẳn dải trong danh sách — đây là con số khách nhìn
   đầu tiên để quyết định có đọc tiếp hay không. */
.hdnt-rv-score .hdnt-stars { font-size: 21px }
/*
 * Nút nằm ở hàng thứ BA của cột trái, dưới khối điểm — `margin-top:auto` của bản
 * cũ đã hết tác dụng vì nút không còn là con của `.hdnt-rv-score`.
 * `align-self:end` ghim nó xuống đáy ô để thẳng hàng với thanh phân bố cuối.
 */
.hdnt-rv-open { align-self: end }

.hdnt-rv-bars { display: grid; gap: 7px; align-content: start }
/* Cột phải để `auto`: nó chứa "50% · 3 đánh giá" chứ không còn mỗi con số. Ghim
   34px như bản cũ thì chữ gãy làm bốn dòng và mỗi hàng cao gấp năm. */
.hdnt-rv-bar { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: 13px; color: #6b6357 }
/*
 * ⚠️ Phải là `> i` (con TRỰC TIẾP), không phải `.hdnt-rv-bar i`. Nhãn bên trái
 * cũng chứa một thẻ `<i>` — ngôi sao SVG — nên selector trần (0,1,1) tóm luôn nó
 * và thắng `.hdnt-star1` (0,1,0): sao bị ép `height:8px` + tô màu RÃNH.
 * Đo được: sao ra 13×8px màu rgb(227,220,204) thay vì 13×13 màu vàng. Số đo
 * "tràn ngang 0" và thứ tự khối vẫn đẹp — NHÌN ẢNH CHỤP mới thấy.
 */
.hdnt-rv-bar > i { display: block; height: 8px; border-radius: 999px; background: #E3DCCC; overflow: hidden }
/*
 * ⚠️ Phải nhắm ĐÚNG `> i > b`. Bản cũ viết `.hdnt-rv-bar b` — mà ô phần trăm
 * cũng dùng thẻ `<b>`, nên nó lĩnh luôn `background: #C49B40` và hiện ra một
 * mảng vàng đè lên chữ "50%". Nhìn ảnh chụp mới thấy; số đo chiều cao vẫn "đẹp".
 */
.hdnt-rv-bar > i > b { display: block; height: 100%; background: #C49B40 }
.hdnt-rv-bar-n { white-space: nowrap; font-size: 12px }
.hdnt-rv-bar-n b { font-weight: 700; color: #161310 }

/* Sao vẽ bằng CSS mask chứ không dùng glyph ★: glyph có mũi quá nhọn và mỗi
   phông một dáng khác nhau. Hai lớp xếp chồng, lớp màu bị width:% cắt.
   ⚠️ Bề ngang buộc bằng ĐƠN VỊ `em` (`5em` trên `1em`), KHÔNG phải hai con số px
   rời nhau. Bản cũ khai `width:88px; height:16px` mà ảnh mask vuông — 88 ÷ 16 =
   **5,5 sao**, tức mỗi dải mọc thêm nửa ngôi sao thứ sáu; bản `--sm` cũng vậy
   (66 ÷ 12). Chủ site đọc ra thành "mỗi đánh giá hiện 6 ngôi sao". Đi qua `em`
   thì đổi cỡ chỉ còn MỘT con số và số sao là chốt toán học, không đặt sai được.
   Cỡ khai bằng `font-size` nên chỗ nào cần to hơn chỉ việc đè một dòng. */
.hdnt-stars { position: relative; display: inline-block; font-size: 16px; width: 5em; height: 1em; vertical-align: -.14em }
.hdnt-stars--sm { font-size: 13px }
.hdnt-stars-bg,
.hdnt-stars-fill {
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  background-size: auto 100%;
  -webkit-mask-image: var(--hdnt-star);
  mask-image: var(--hdnt-star);
  -webkit-mask-size: auto 100%;
  mask-size: auto 100%;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x
}
/*
 * Ngôi sao ĐƠN cho nhãn thanh phân bố. Mượn CHÍNH `--hdnt-star` của dải sao —
 * một hình cho cả hai chỗ, đổi dáng sao là cả trang theo. Trước đây chỗ này là
 * ký tự `★`, mà ký tự thì mỗi hệ điều hành vẽ một kiểu và không cùng dáng với
 * dải sao ngay bên trên nó.
 */
.hdnt-star1 {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -.14em;
  background-color: #C49B40;
  -webkit-mask-image: var(--hdnt-star);
  mask-image: var(--hdnt-star);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat
}
.hdnt-rv-bar-s { display: flex; align-items: center; gap: 3px; font-weight: 700; color: #161310 }
.hdnt-stars-bg { background-color: #DCD5C5 }
.hdnt-stars-fill { background-color: #C49B40; width: 0 }

/*
 * KHỔ HẸP của khối đánh giá.
 *
 * ⚠️ Khối này BẮT BUỘC đứng SAU cụm quy tắc gốc ở trên. Trước đây nó nằm trong
 * khối `@media (max-width: 620px)` ở dòng ~1043 — tức TRƯỚC `.hdnt-rv-panel`
 * gốc — mà media query KHÔNG cộng thêm độ ưu tiên: hai bên cùng (0,1,0) nên bản
 * gốc thắng theo thứ tự nạp và bố cục điện thoại **CHƯA BAO GIỜ chạy**.
 *
 * Nhìn số đo thì không thấy: chiều cao, thứ tự khối và phép "tràn ngang" đều ra
 * số hợp lý. Chỉ khi CHỤP ẢNH ở 390px mới lộ ra — dãy chip xếp thành 8 hàng dọc
 * trong một cột hẹp bên phải, đúng bố cục máy tính bị bóp lại.
 * Đo lại sau khi vá: 1440px ra "score chips"/"score bars"/"btn bars";
 * 390px ra "score bars"/"chips chips"/"btn btn".
 */
@media (max-width: 620px) {
  /* Điểm và thanh phân bố nằm cạnh nhau cho gọn, chip xuống hàng riêng vì chúng
     cần cả bề ngang, NÚT xuống dưới cùng (chốt của chủ site 2026-08-09). */
  .hdnt-rv-panel {
    grid-template-areas:
      "score bars"
      "chips chips"
      "btn   btn";
    gap: 14px 16px;
    padding: 16px
  }
  /*
   * Thanh phân bố chỉ giữ PHẦN TRĂM, bỏ "N đánh giá". Cột thứ ba khai `auto`
   * (cố ý — xem quy tắc gốc) nên nó không co được, mà ở đây dải thanh chỉ chiếm
   * nửa hàng nên chính chuỗi ấy đẩy trang tràn ngang: đo được 13px ở 375px,
   * 28px ở 360px, 68px ở 320px. Số lượt vẫn đọc được ở dãy chip ngay trên.
   * ⚠️ Lỗi tràn này CÓ TỪ TRƯỚC đợt sửa nút — đã đối chiếu với bản trong git,
   * hai bên tràn y hệt nhau.
   */
  .hdnt-rv-bar-c { display: none }
  .hdnt-rv-avg strong { font-size: 32px }
  .hdnt-rv-score .hdnt-stars { font-size: 18px }
  /* Nút trải hết bề ngang ở hàng cuối — đích bấm lớn nhất, và đó là việc tiếp
     theo khách làm sau khi đọc xong điểm + bộ lọc. */
  .hdnt-rv-open { width: 100%; align-self: auto }
}

/*
 * Ngôi sao MẬP và BO TRÒN (chốt của chủ site 2026-08-09: "lớn và tròn hơn").
 * Hai thứ quyết định dáng:
 *   1. Tỉ lệ bán kính trong/ngoài 0,55 thay cho 0,382 của sao hình học cổ điển —
 *      cánh ngắn và dày hơn, đúng dáng các sàn TMĐT.
 *   2. `stroke` cùng màu + `stroke-linejoin: round` bo tròn cả 10 góc. Mask đọc
 *      theo vùng phủ nên nét viền hoà làm một với phần tô, không thành hai lớp.
 * ⚠️ Bán kính ngoài phải TRỪ HAO nét viền: nét 3,4 nở ra mỗi bên 1,7 nên bán kính
 * thật là 7,6 + 1,7 = 9,3 — để 9 là mũi sao chạm mép viewBox rồi bị xén cụt.
 * ⚠️ Đừng đẩy nét dày hơn nữa: thử tới 4,2 thì sao mất dáng, nhìn ra bông hoa.
 */
:root {
  --hdnt-star: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10.00 2.40 L12.46 6.62 L17.23 7.65 L13.98 11.29 L14.47 16.15 L10.00 14.18 L5.53 16.15 L6.02 11.29 L2.77 7.65 L7.54 6.62 Z' fill='%23000' stroke='%23000' stroke-width='3.4' stroke-linejoin='round'/%3E%3C/svg%3E")
}

/* ---- chip lọc ---- */
.hdnt-rv-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 }
.hdnt-rv-chip {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #161310;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 0 0 1px #EAECEF
}
.hdnt-rv-chip:hover:not(:disabled) { box-shadow: 0 0 0 1px #C49B40 }
.hdnt-rv-chip.is-on { background: #C49B40; color: #fff; box-shadow: none }
/* Chip không có mục nào: vẫn in ra để dãy chip đứng yên giữa các sản phẩm,
   nhưng mờ đi và KHÔNG bấm được — bấm vào một chip lọc ra danh sách rỗng thì
   khách tưởng trang hỏng. */
.hdnt-rv-chip:disabled { opacity: .45; cursor: default }

.hdnt-rv-none { color: #6b6357; margin: 0 0 16px }

.hdnt-rv-open {
  height: 42px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #161310;
  color: #fff;
  font-weight: 600;
  cursor: pointer
}

/* ---- danh sách ---- */
.hdnt-rv-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 18px }
.hdnt-rv-item { padding-bottom: 18px; border-bottom: 1px solid #EAE6DF }
.hdnt-rv-item[hidden] { display: none }

.hdnt-rv-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: #6b6357 }
.hdnt-rv-top strong { color: #161310; font-size: 14px }
.hdnt-rv-ok { padding: 2px 8px; border-radius: 999px; background: #EAF6EC; color: #2F7D3A; font-size: 11px; font-weight: 600 }
.hdnt-rv-txt { margin: 8px 0 0; color: #161310; line-height: 1.6 }

/* ---------------------------------------------------------------------------
   Ảnh + video khách gửi kèm đánh giá — MỘT lưới, ô vuông bằng nhau.

   ⚠️ Bản trước để ảnh 74px còn video 92px nên hàng so le hẳn. Hai bộ kích thước
   cho hai loại phương tiện xếp cạnh nhau thì lộ ngay ra là chúng do hai chỗ
   khác nhau dựng — mà đây là chỗ khách nhìn để tin vào đánh giá.
   ------------------------------------------------------------------------ */
.hdnt-rv-media { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px }
.hdnt-rv-m {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--hdnt-rvm, 96px);
  height: var(--hdnt-rvm, 96px);
  border-radius: 10px;
  overflow: hidden;
  background: #F6F1E7;
  cursor: zoom-in
}
.hdnt-rv-m img,
.hdnt-rv-m video { width: 100%; height: 100%; object-fit: cover; display: block }
/* Nền ĐEN cho ô video: khung hình đầu của video quay dọc để lại hai dải trống
   hai bên, để nền kem thì hai dải ấy lệch hẳn tông với chính tấm video. */
.hdnt-rv-m--v { background: #000; cursor: pointer }

/* Dấu phát: vòng tròn mờ + tam giác trắng, vẽ bằng CSS nên không thêm thẻ nào
   vào HTML và không tải thêm tệp hình nào.
   ⚠️ `::before` là VÒNG TRÒN, `::after` là TAM GIÁC — vẽ ngược thứ tự thì vòng
   tròn phủ lên tam giác và mất hẳn dấu phát. */
.hdnt-rv-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none
}
.hdnt-rv-play::before {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .38)
}
.hdnt-rv-play::after {
  content: "";
  position: relative;
  width: 0;
  height: 0;
  /* Lệch 3px sang phải là bù QUANG HỌC: trọng tâm hình tam giác nằm lệch trái
     so với hộp bao nó, căn giữa theo hộp thì mắt thấy nó dính mép trái. */
  margin-left: 3px;
  border-left: 11px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent
}

@media (max-width: 620px) {
  /* Ô nhỏ lại cho vừa màn hẹp — vẫn đủ nhận ra ảnh gì. */
  .hdnt-rv-media { --hdnt-rvm: 80px }
}

.hdnt-rv-reply { margin: 10px 0 0 18px; padding: 10px 14px; border-left: 3px solid #EAE6DF; background: #FAF8F4; border-radius: 0 10px 10px 0 }
.hdnt-rv-reply.is-seller { border-left-color: #C49B40 }
.hdnt-rv-reply p { margin: 4px 0 0; color: #161310; font-size: 14px }
.hdnt-rv-badge { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #C49B40; color: #fff; font-size: 11px; font-weight: 600 }

.hdnt-rv-reply-btn { margin-top: 8px; padding: 0; border: 0; background: none; color: #C49B40; font-size: 13px; font-weight: 600; cursor: pointer }
.hdnt-rv-nomatch { margin-top: 18px; color: #6b6357 }

/* ---------------------------------------------------------------------------
   Khung viết đánh giá — POPUP phủ kín màn hình.

   Trước đây nó là một khối nằm ngay trong trang, ẩn/hiện bằng `hidden`: mở ra
   thì cả danh sách đánh giá bị đẩy xuống, mà mở form xong vẫn thấy nội dung
   trang chạy sau lưng nên không rõ mình đang ở đâu.
--------------------------------------------------------------------------- */
.hdnt-rv-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(12px, 4vh, 48px) 16px;
  overflow-y: auto;
  background: rgba(22, 19, 16, .55)
}
/* `hidden` chỉ đặt display:none ở mức trình duyệt, mà quy tắc trên là của tác
   giả nên nó thắng — thiếu dòng này thì popup "đã ẩn" vẫn phủ kín cả trang. */
.hdnt-rv-modal[hidden] { display: none }

.hdnt-rv-box {
  width: 100%;
  max-width: 620px;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(22, 19, 16, .28)
}

.hdnt-rv-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px }
.hdnt-rv-title { flex: 1; margin: 0; font-size: 18px; font-weight: 800; line-height: 1.35; color: #161310 }
.hdnt-rv-x {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #F6F1E7;
  color: #6b6357;
  font-size: 22px;
  line-height: 1;
  cursor: pointer
}
.hdnt-rv-x:hover { background: #EAE6DF; color: #161310 }

/* Tên + email đứng cạnh nhau; nhận xét và SĐT chiếm trọn hàng. */
.hdnt-rv-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px }
.hdnt-rv-form > * { grid-column: 1 / -1 }
.hdnt-rv-f--half { grid-column: auto }

.hdnt-rv-f { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px }
/* Chế độ trả lời ẩn ô SĐT / thanh ảnh / chọn sao bằng `hidden` — cả ba đều có
   display của tác giả nên phải đè lại, đúng bẫy của `.hdnt-rv-modal[hidden]`. */
.hdnt-rv-f[hidden], .hdnt-rv-imgbar[hidden], .hdnt-rv-pick[hidden] { display: none }
.hdnt-rv-f input,
.hdnt-rv-f textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #EAE6DF;
  border-radius: 12px;
  background: #fff;
  color: #161310;
  font: inherit;
  font-size: 16px
}
.hdnt-rv-f input { height: 50px; padding: 0 14px }
.hdnt-rv-f input:focus,
.hdnt-rv-f textarea:focus { outline: none; border-color: #C49B40; box-shadow: 0 0 0 3px rgba(196, 155, 64, .18) }

/* Thanh xám dưới ô nhận xét: nút gửi ảnh + gợi ý + bộ đếm ký tự + ảnh xem trước. */
.hdnt-rv-imgbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: -8px 0 14px;
  padding: 10px 12px;
  border: 1px solid #EAE6DF;
  border-radius: 12px;
  background: #FAF8F4
}
.hdnt-rv-imgbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid #EAE6DF;
  border-radius: 10px;
  background: #fff;
  color: #161310;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer
}
.hdnt-rv-imgbtn:hover { border-color: #C49B40; color: #C49B40 }
.hdnt-rv-hint { font-size: 12.5px; color: #6b6357 }
.hdnt-rv-count { margin-left: auto; font-size: 12.5px; color: #6b6357; font-variant-numeric: tabular-nums }
.hdnt-rv-count.is-short { color: #C0392B }
.hdnt-rv-prev { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: 8px }
.hdnt-rv-prev:empty { display: none }
.hdnt-rv-prev img { width: 56px; height: 56px; object-fit: cover; border: 1px solid #EAE6DF; border-radius: 10px; display: block }
.hdnt-rv-imgerr { flex: 0 0 100%; margin: 0; font-size: 12.5px; color: #C0392B }

/* Chọn sao 1 → 5 theo đúng thứ tự DOM. KHÔNG dùng mẹo `row-reverse`: mẹo đó đảo
   cả nhãn chữ nên "Rất tốt" nhảy sang bên trái. `:has(~ …)` tô được cả những
   sao ĐỨNG TRƯỚC sao đang trỏ. */
.hdnt-rv-pick { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px }
.hdnt-rv-pick-q { font-size: 13.5px; font-weight: 600; color: #161310 }
.hdnt-rv-pick-in { display: inline-flex; align-items: flex-start; gap: 16px }
/* min-width vừa đủ cho nhãn dài nhất ("Bình thường") nằm một dòng — nhãn hai
   dòng làm cả hàng sao cao lệch. */
.hdnt-rv-star {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 78px;
  color: #DCD5C5;
  cursor: pointer;
  transition: color .12s
}
.hdnt-rv-star input { position: absolute; width: 1px; height: 1px; opacity: 0 }
.hdnt-rv-star-i { font-size: 28px; line-height: 1 }
.hdnt-rv-star-t { font-size: 11.5px; color: #6b6357; text-align: center; line-height: 1.3; white-space: nowrap }
.hdnt-rv-star:hover, .hdnt-rv-star:has(~ .hdnt-rv-star:hover),
.hdnt-rv-star:has(input:checked), .hdnt-rv-star:has(~ .hdnt-rv-star input:checked) { color: #C49B40 }
/* Nhãn chữ chỉ đậm lên ở sao đang trỏ/chọn, không lan sang các sao bên cạnh. */
.hdnt-rv-star:hover .hdnt-rv-star-t,
.hdnt-rv-star:has(input:checked) .hdnt-rv-star-t { color: #C49B40; font-weight: 600 }
.hdnt-rv-star:has(input:focus-visible) { outline: 2px solid #C49B40; outline-offset: 2px; border-radius: 8px }

.hdnt-rv-modal .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; font-size: 13px; color: #6b6357 }
.hdnt-rv-modal .comment-form-cookies-consent input { margin-top: 3px }
.hdnt-rv-modal .form-submit { margin: 0 }
.hdnt-rv-modal .submit {
  height: 46px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: #C49B40;
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer
}
.hdnt-rv-modal .submit:hover { background: #A57F2C }

@media (max-width: 620px) {
  /* Vỏ tóm tắt ở khổ này đã khai đủ ở khối 620px phía trên (đổi bảng vùng) —
     không lặp lại ở đây. */
  .hdnt-rv-open { width: 100%; text-align: center }
  .hdnt-rv-form { grid-template-columns: minmax(0, 1fr) }
  .hdnt-rv-pick-in { gap: 2px }
  .hdnt-rv-star { flex: 1; min-width: 0 }
  .hdnt-rv-star-i { font-size: 23px }
  .hdnt-rv-star-t { font-size: 10px }
}

/* ---------------------------------------------------------------------------
   Bình luận bài viết
--------------------------------------------------------------------------- */

.hdnt-cmts { margin-top: 48px }
.hdnt-cmts-h { font-size: 20px; font-weight: 800; color: #161310; margin: 0 0 18px }

.hdnt-cmt-list,
.hdnt-cmt-list .children { list-style: none; margin: 0; padding: 0 }
.hdnt-cmt-list .children { margin-top: 14px; padding-left: 22px; border-left: 2px solid #EAE6DF }

.hdnt-cmt { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #EAE6DF }
.hdnt-cmt:last-child { border-bottom: 0 }

.hdnt-cmt-h { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #6b6357 }
.hdnt-cmt-h strong { color: #161310; font-size: 14px; margin-right: 6px }
.hdnt-cmt-av { border-radius: 50%; flex: none }

/* Nhãn "Ban quản trị" — để khách biết ai đang trả lời. */
.hdnt-cmt-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: #C49B40;
  color: #fff;
  font-size: 11px;
  font-weight: 600
}

.hdnt-cmt--staff > article { background: #FBF8F1; border-radius: 12px; padding: 12px 14px }
.hdnt-cmt-b { margin-top: 8px; color: #161310; line-height: 1.65 }
.hdnt-cmt-b p { margin: 0 0 10px }
.hdnt-cmt-b p:last-child { margin-bottom: 0 }
.hdnt-cmt-wait { margin: 8px 0 0; color: #A57F2C; font-size: 13px; font-style: italic }
.hdnt-cmt-closed { color: #6b6357 }

.hdnt-cmt .comment-reply-link {
  display: inline-block;
  margin-top: 8px;
  color: #C49B40;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none
}

.hdnt-cmts .comment-respond { margin-top: 26px; padding: 22px; border-radius: 18px; background: #F6F1E7 }
.hdnt-cmts .comment-respond input[type=text],
.hdnt-cmts .comment-respond input[type=email],
.hdnt-cmts .comment-respond input[type=url],
.hdnt-cmts .comment-respond textarea {
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-radius: 12px;
  background: #fff;
  font: inherit;
  box-shadow: 0 0 0 1px #EAE6DF
}
.hdnt-cmts .comment-respond .submit {
  height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: #C49B40;
  color: #fff;
  font-weight: 700;
  cursor: pointer
}

/* ---------------------------------------------------------------------------
   Chia trang danh sách đánh giá (6 mục/trang) — thanh số do JS dựng.
   ------------------------------------------------------------------------ */
.hdnt-rv-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 18px
}
.hdnt-rv-pager[hidden] { display: none }
.hdnt-rv-pg {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  color: #161310;
  font: inherit;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-shadow: 0 0 0 1px #EAECEF
}
.hdnt-rv-pg:hover:not(:disabled):not(.is-on) { box-shadow: 0 0 0 1px #C49B40; color: #C49B40 }
.hdnt-rv-pg.is-on { background: #C49B40; color: #fff; box-shadow: none; cursor: default }
/* Nút ‹ › ở đầu/cuối dải mờ đi thay vì biến mất: dải nhảy bề ngang mỗi lần đổi
   trang thì các số bên trong cũng dịch chỗ, bấm liên tiếp rất dễ trượt. */
.hdnt-rv-pg:disabled { opacity: .35; cursor: default }

/* Nhãn thời lượng: nền tối mờ để đọc được trên MỌI khung hình đầu — chữ trắng
   trần trên một khung hình sáng là vô hình. */
.hdnt-rv-vid-t {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  pointer-events: none
}
/* Khung xem trước trong popup: mỗi ô chọn một nhóm riêng, xếp cùng một hàng. */
.hdnt-rv-prev-g { display: contents }
.hdnt-rv-prev video { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: #000 }

/* ---------------------------------------------------------------------------
   KIỂU DÁNG TRANG SẢN PHẨM THEO NGÀNH (2026-08-09)

   Chốt của chủ site: *"thêm một số kiểu dáng cho trang sản phẩm phù hợp với từng
   ngành nghề, để người dùng có thêm nhiều sự lựa chọn hơn về phong cách"*.
   Chọn ở Cửa hàng ▸ Cài đặt ▸ Trang cửa hàng.

   ⚠️ `classic` KHÔNG có lớp nào ở đây — dáng đang chạy là nhánh "không quy tắc
   nào áp thêm". Khai lại đúng bộ số ấy thành một preset là hai nơi cùng giữ một
   giá trị, và bên bị quên sẽ là giao diện MẶC ĐỊNH của mọi site.

   ⚠️ Bốn preset chỉ đổi những thứ CSS thật sự làm được trên đúng markup sẵn có:
   tỉ lệ ảnh · cách lấp khung · viền · bo góc. Bịa thêm lựa chọn mà bấm vào không
   thấy gì đổi thì tệ hơn hẳn việc không có lựa chọn ấy.

   ⚠️ Cạnh ô ảnh phải tính lại theo TỈ LỆ, không dùng lại công thức ô vuông:
   `--hdnt-ar-w` là bề ngang trên một đơn vị chiều cao (3:4 → 0.75). Giữ nguyên
   `min()` nên tính chất "không bao giờ cao hơn thẻ mua" vẫn còn ở mọi tỉ lệ.
   ------------------------------------------------------------------------ */
@media (min-width: 1001px) {
  .hdnt-ps--fashion .hdnt-pp-media,
  .hdnt-ps--tech .hdnt-pp-media,
  .hdnt-ps--food .hdnt-pp-media,
  .hdnt-ps--beauty .hdnt-pp-media {
    width: min(100%, calc((var(--hdnt-col-h) - var(--hdnt-pt-h)) * var(--hdnt-ar-w, 1)))
  }
}
.hdnt-ps--fashion .hdnt-pp-media .hdnt-pg,
.hdnt-ps--tech .hdnt-pp-media .hdnt-pg,
.hdnt-ps--food .hdnt-pp-media .hdnt-pg,
.hdnt-ps--beauty .hdnt-pp-media .hdnt-pg,
.hdnt-ps--fashion .hdnt-pg-slide,
.hdnt-ps--tech .hdnt-pg-slide,
.hdnt-ps--food .hdnt-pg-slide,
.hdnt-ps--beauty .hdnt-pg-slide { aspect-ratio: var(--hdnt-ar, 1 / 1) }

/* Tỉ lệ ảnh · viền · bo góc · nền của preset đều khai ở tầng GỐC nên áp cho CẢ
   điện thoại.
   ⚠️ Đây là ĐẢO LẠI ghi chú cũ ("bốn preset phải giống hệt `classic` ở khổ
   hẹp"). Lý do cũ là ở ≤1000px cụm ảnh TRÀN hai mép màn hình, nên bo góc ở đó
   là bo vào đúng mép màn. Nay điện thoại đã có khung bo viền như máy tính nên
   lý do ấy hết hiệu lực — giữ nguyên mới là sai, vì chọn preset "Mỹ phẩm" mà
   trên điện thoại vẫn ra góc vuông của `classic`. */
.hdnt-ps--fashion { --hdnt-ar: 3 / 4; --hdnt-ar-w: .75 }
.hdnt-ps--tech { --hdnt-ar: 1 / 1; --hdnt-ar-w: 1 }
.hdnt-ps--food { --hdnt-ar: 4 / 3; --hdnt-ar-w: 1.3333 }
.hdnt-ps--beauty { --hdnt-ar: 1 / 1; --hdnt-ar-w: 1 }

/* Thời trang: ảnh DỌC 3:4 — ảnh mặc trên người vốn cao hơn rộng, ép vuông là
   cắt mất nửa dưới bộ đồ. */
.hdnt-ps--fashion .hdnt-pp-media { border-radius: 18px }

/* Điện tử: hàng hoá TÁCH NỀN nên `contain` + nền trắng.
   ⚠️ Đây là preset DUY NHẤT quay về `contain`, và nó KHÔNG mâu thuẫn với chốt
   "cắt vuông hết" của mặc định: chốt ấy dành cho ảnh CẢNH bếp (cắt rìa không
   mất món hàng nào), còn ở đây cắt là cắt mất chính sản phẩm — đúng luật chung
   "thà chừa lề còn hơn cắt mất sản phẩm". */
.hdnt-ps--tech .hdnt-pp-media { border-radius: 14px }
.hdnt-ps--tech .hdnt-pg-slide { background: #fff }
.hdnt-ps--tech .hdnt-pg-slide img,
.hdnt-ps--tech .hdnt-pg-video { object-fit: contain }

/* Thực phẩm: ảnh NGANG 4:3, bo tròn nhiều, BỎ viền — món ăn bán bằng chính
   tấm ảnh, thêm một nét kẻ quanh nó chỉ làm nhỏ phần nhìn thấy. */
.hdnt-ps--food .hdnt-pp-media { border: 0; border-radius: 26px }

/* Mỹ phẩm: vuông nhưng bo rất tròn, viền nhạt hơn. */
.hdnt-ps--beauty .hdnt-pp-media { border-radius: 32px; border-color: #F0EAE0 }
.hdnt-ps--beauty .hdnt-buy { border-radius: 26px }
.hdnt-ps--beauty .hdnt-rel-card { border-radius: 26px }


/* Tôn trọng "giảm chuyển động": thanh vẫn hiện/ẩn đúng lúc, chỉ bỏ phần trượt. */
@media (prefers-reduced-motion: reduce) {
  .hdnt-buybar { transition: none }
}

/* ---------------------------------------------------------------------------
   Khổ hẹp: nhãn "Thêm vào giỏ" phải nằm gọn MỘT dòng.

   ⚠️ Đo bằng số DÒNG CHỮ (`Range.getClientRects().length`), đừng đo chiều cao
   nút: nút khai `min-height` cố định nên chữ gãy làm hai dòng mà chiều cao vẫn
   ra đúng 52px — mọi phép đo kích thước đều "đẹp", chỉ nhìn ảnh chụp mới thấy.
   Đo được ở 390px và 360px: 2 dòng.

   ⚠️ Bản vá đầu BỎ CẢ BA thứ cùng lúc — thu ô số lượng, thu lề trong, VÀ giấu
   icon giỏ. Đo lại từng thứ một thì hai cái đầu đã đủ: nhãn giữ 1 dòng tới tận
   360px kể cả khi icon còn nguyên. Giấu icon là chữa quá tay, và chủ site nhận
   ra ngay ("thêm icon giỏ hàng phía trước giống ở desktop"). Nay icon ở lại.

   Dưới 360px thì mới thật sự hết chỗ (đo được 2 dòng ở 320px kể cả khi KHÔNG có
   icon), nên ở đó mới bỏ icon — bậc thang xuống dần, không phải một nhát cắt
   cho mọi khổ điện thoại.
   ------------------------------------------------------------------------ */
@media (max-width: 620px) {
  .hdnt-buy-row1 .hdnt-btn--primary { padding-inline: 14px }
  .hdnt-qty { flex: 0 0 auto }
  .hdnt-qty-b { width: 34px }
  .hdnt-qty-i { width: 34px }
}

/* Máy rất hẹp (iPhone SE đời đầu, 320px): tới đây thì nhãn gãy dòng kể cả khi
   không có icon, nên bỏ icon và thu tiếp ô số lượng. */
@media (max-width: 359.98px) {
  .hdnt-buy-row1 .hdnt-btn--primary svg { display: none }
  .hdnt-buy-row1 .hdnt-btn--primary { padding-inline: 10px }
  .hdnt-qty-b { width: 30px }
  .hdnt-qty-i { width: 30px }
}

/* ---------------------------------------------------------------------------
   Khung xem ảnh / video của đánh giá.

   ⚠️ `z-index` phải trên MỌI thứ đang `fixed`/`sticky` của theme — đầu trang
   (z-50) · thanh liên hệ nổi (z-40) · thanh mua đáy (z-40) · cookie (z-65) ·
   ngăn kéo giỏ (z-75) · popup viết đánh giá (120). Thấp hơn cái nào là cái ấy
   đè lên đúng chỗ có nút Đóng.
   ------------------------------------------------------------------------ */
.hdnt-rvlb {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .86)
}
/* ⚠️ `hidden` chỉ đặt `display:none` ở mức TRÌNH DUYỆT, mà dòng trên là quy tắc
   của tác giả nên nó thắng — khung "đã ẩn" vẫn phủ kín màn hình và nuốt mọi cú
   bấm. Đúng bẫy đã vấp với `<video hidden>` của dải ảnh sản phẩm. */
.hdnt-rvlb[hidden] { display: none }
/* Khoá cuộn nền: không khoá thì cuộn bằng ngón tay là trang chạy sau lưng khung. */
body.hdnt-rvlb-on { overflow: hidden }

.hdnt-rvlb-in {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%
}
.hdnt-rvlb-in img,
.hdnt-rvlb-in video {
  max-width: min(1100px, 100%);
  max-height: calc(100svh - 40px);
  border-radius: 10px;
  display: block
}
.hdnt-rvlb-in [hidden] { display: none }

.hdnt-rvlb-x,
.hdnt-rvlb-n {
  position: absolute;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  cursor: pointer
}
.hdnt-rvlb-x:hover,
.hdnt-rvlb-n:hover { background: rgba(255, 255, 255, .26) }
.hdnt-rvlb-x { top: 14px; right: 14px }
.hdnt-rvlb-p { left: 14px; top: 50%; transform: translateY(-50%) }
.hdnt-rvlb-nx { right: 14px; top: 50%; transform: translateY(-50%) }
.hdnt-rvlb-n[hidden],
.hdnt-rvlb-x[hidden] { display: none }

/* Dấu × và hai mũi tên vẽ bằng CSS — không tải thêm tệp hình nào. */
.hdnt-rvlb-x::before,
.hdnt-rvlb-x::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #fff
}
.hdnt-rvlb-x::before { transform: rotate(45deg) }
.hdnt-rvlb-x::after { transform: rotate(-45deg) }
.hdnt-rvlb-n::before {
  content: "";
  width: 12px;
  height: 12px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff
}
.hdnt-rvlb-p::before { transform: rotate(45deg); margin-left: 4px }
.hdnt-rvlb-nx::before { transform: rotate(-135deg); margin-right: 4px }