:root {
  --primaryColor: #710e23;
  /* 15.56rem = ĐÚNG chiều cao thật của header ở 1201-1600px:
     .header-top 115.6px + .header-main 40px (padding 0.8rem trên+dưới) = 155.6px.
     Số thập phân là cố ý, KHÔNG làm tròn lên 15.6rem: 115.6 đến từ tỉ lệ ảnh
     logo (480/764) nên vốn là số lẻ. Làm tròn lên 156px thì nền đỏ của header
     lòi ra 0.4px dưới dải menu trắng, màn thật làm tròn thành vạch đỏ 1px.
     Trước đây gán 15rem (150px) trong khi nội dung 155.6px nên dải menu tràn
     5.6px xuống đè lên breadcrumb. */
  --heightHeader: 15.56rem;
}

/* Từ 1601px, một media query trong common.css tắt phần nới logo
   (margin-left -1.6rem) nên logo co từ 184px về 168px, kéo .header-top thấp
   từ 115.6px xuống 105.5px. Header thật khi đó = 105.5 + 40 = 145.5px.
   Không hạ biến ở đây thì nền đỏ của header lòi ra 10.5px dưới dải menu trắng.
   Mốc 1601px đo bằng nhị phân: 1600px vẫn 115.6px, 1601px đã 105.5px. */
@media (min-width: 1601px) {
  :root {
    /* Header thật ở đây = .header-top 105.5 + dải menu 40 = 145.5px.
       Đặt 14.5rem (145px) tức LÀM TRÒN XUỐNG nửa pixel: dải menu trắng phủ
       quá đáy header 0.5px nên nền đỏ không bao giờ lòi ra. Nửa pixel trắng
       chờm lên breadcrumb (nền #f7f6f5) thì mắt không thấy.
       Làm tròn LÊN (14.6rem) mới là lỗi: hở 0.5px đỏ, màn thật vẽ thành vạch 1px. */
    --heightHeader: 14.5rem;
  }
}

.mona-content h2 {
  font-size: calc(2.4 * var(--fs));
}

.mona-content h3 {
  font-size: calc(2 * var(--fs));
}

.mona-content table th,
.mona-content table tbody tr:first-child td {
  font-size: calc(1.6 * var(--fs));
  text-transform: unset;
}

.mona-content .table-resp table,
.mona-content table {
  background-color: unset;
  border-radius: 1rem;
  border: 0.1rem solid #f0f0f0;
  border-collapse: collapse !important;
}

.mona-content table thead {
  background-color: var(--primaryColor);
  color: #fff;
}

.mona-content table td {
  color: unset;
}

/* ===== Ảnh trong tab "Thông tin sản phẩm" =====
 * Ảnh gốc 936x1170 nên mỗi ảnh cao hơn cả màn laptop; 22 ảnh = 26.364px.
 * Giới hạn chiều cao 66rem (06/08: 60rem -> 40rem; 22/09 user yêu cầu tăng: 40rem -> 66rem) và để width:auto -> thu nhỏ
 * THEO TỈ LỆ, thấy trọn
 * ảnh, không cắt xén (ảnh có chữ và thông số nên cắt là mất thông tin).
 * Trên mobile ảnh vốn chỉ cao ~447px nên rule này không đổi gì.
 */
.m-productdt_tab .mona-content img {
  max-height: 66rem;
  width: auto;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* Chiều cao khi THU GỌN.
 * PostModule.js đọc max-height từ CSS trước, chỉ dùng 1200 mặc định khi CSS
 * không đặt gì (xem dòng 14-22) — nên chỉnh được ở đây, không cần sửa JS.
 *
 * 160rem vì: bằng ~2 màn laptop (mốc thường dùng cho khối thu gọn), và rơi
 * vào GIỮA ảnh thứ 3 (ảnh 3 nằm ở 1322-1922px) nên chỗ cắt lộ rõ là còn nội
 * dung bên dưới. Cắt đúng mép ảnh sẽ trông như đã hết bài.
 *
 * CHỈ áp từ 577px: dưới mốc đó PostModule.js tự dùng 300px cho mobile, đặt
 * max-height ở CSS sẽ đè mất giá trị đó. */
@media (min-width: 577px) {
  .m-productdt_tab .mona-content {
    max-height: 160rem;
  }
}

.m-product_cat-content {
  /* 23/09/2026: 9.6rem là khoảng cách từ hồi khối này nằm TRÊN lưới sản phẩm. Nay nó xuống dưới
     lưới (order 6) nên giãn vậy là thưa — user yêu cầu giảm. */
  margin-top: 4rem;
  position: relative;
}

@media (max-width: 768px) {
  .m-product_cat-content {
    margin-top: 2.4rem;
  }
}

.m-product_cat-content .mona-content {
  overflow: hidden;
  position: relative;
}

.m-product_cat-content .view-more_content::before {
  background: linear-gradient(transparent, #fff 100%);
}

.l-filter {
  gap: 0.8rem;
  /* Cho các mục lọc xuống dòng thay vì cuộn ngang.
     common.css dòng 7781 đặt white-space:nowrap + overflow-y:auto khiến hàng
     lọc 18 mục giấu ~2.240px nội dung sau thanh cuộn ngang. Đè lại ở đây thay
     vì sửa common.css: file đó là bản biên dịch từ SCSS (883 KB, có sourcemap),
     sửa trực tiếp sẽ mất khi ai đó build lại. */
  flex-wrap: wrap;
  white-space: normal;
  overflow: visible;
}

/* ===== Dropdown "Xem tất cả" của hàng lọc =====
 * JS (home.js) chỉ để lại 2 chip + nút, phần còn lại nhét vào .l-filter_more.
 * overflow:visible ở trên là BẮT BUỘC, nếu không dropdown bị cắt.
 */
.l-filter_item.view-all.has-dropdown {
  position: relative;
}

/* Nút mở panel: nền trắng viền mảnh, KHÔNG giống chip.
   Chip là lựa chọn lọc, nút này là "xem thêm lựa chọn" — để cùng nền đỏ như chip
   thì khách đọc lướt sẽ tưởng nó cũng là một danh mục. Nền trắng giữa dãy chip đỏ
   là chỗ mắt dừng lại, đúng vai.
   Trọng số 0-0-3-1 nên thắng rule chung `.l-filter_item > *` (0-0-1-0) bất kể thứ
   tự trong file — không phải canh đặt trước hay sau. */
.l-filter_item.view-all.has-dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  /* Đệm dọc 0,3rem chứ không phải 0,8rem như chip: icon 2,4rem cao hơn dòng chữ nên
     nó mới là thứ quyết định chiều cao nút. Để 0,8rem thì nút cao 42px trong khi chip
     32px, đứng cùng hàng nhô lên trông như lỗi. Cộng lại: 24 (icon) + 6 (đệm) + 2
     (viền) = 32px, bằng đúng chip. Đổi cỡ icon thì phải tính lại số này. */
  padding: 0.3rem 1.4rem;
  border: 1px solid #dcdcdc;
  border-radius: 0.4rem;
  background-color: #fff;
  color: var(--primaryColor);
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s, color 0.2s;
}

/* Icon dùng stroke="currentColor" nên nó ăn theo `color` của nút — một chỗ đổi màu
   là cả chữ lẫn nét vẽ đổi theo, không bao giờ lệch tông.
   ⚠️ SVG user gửi có sẵn stroke="#D70018" (đỏ của trang họ chụp làm mẫu). Tôi đổi
   sang currentColor để nó theo #710E23 của site này — hai sắc đỏ khác nhau đứng
   cạnh nhau nhìn như lỗi in. Muốn giữ đúng #D70018 thì đặt lại màu ở đây. */
.l-filter_item.view-all.has-dropdown > a .l-filter_more-icon {
  width: 2.4rem;
  height: 2.4rem;
  flex: none;              /* không cho icon co lại khi chữ dài */
}

.l-filter_item.view-all.has-dropdown > a:hover,
.l-filter_item.view-all.has-dropdown.is-open > a {
  border-color: var(--primaryColor);
  color: var(--primaryColor);
}

/* Điện thoại: bám theo UX19 (chip 1,2rem / đệm 0,8rem) cho nút không lệch cỡ chip. */
@media (max-width: 767.98px) {
  .l-filter_item.view-all.has-dropdown > a {
    /* chip ở khổ này cao 30px: 24 + 4 + 2 = 30 */
    padding: 0.2rem 0.8rem;
    font-size: calc(1.2 * var(--fs));
  }

}

/* Selector phải đủ mạnh để thắng rule có sẵn `.l-filter_item > *`
   (nền đỏ + display:flex) nằm PHÍA SAU trong file — cùng độ ưu tiên thì
   rule sau thắng, biến cả panel thành flex hàng ngang màu đỏ. */
.l-filter_item.view-all > .l-filter_more {
  display: block;
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.8rem);
  /* Neo bên PHẢI: nút "Xem tất cả" luôn là mục cuối hàng lọc và hàng lọc
     căn về phải, nên neo trái sẽ làm dropdown tràn khỏi màn ở desktop. */
  right: 0;
  left: auto;
  width: max-content;
  min-width: 100%;
  max-width: min(52rem, calc(100vw - 3.2rem));
  padding: 1.6rem;
  border-radius: 1.2rem;
  background-color: #fff;
  box-shadow: 0 0.8rem 3.2rem rgba(0, 0, 0, 0.16);
  /* Hiệu ứng mờ dần. Dùng opacity + visibility chứ KHÔNG dùng display:none:
     display không chuyển động được nên sẽ giật, không mượt. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.6rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.l-filter_item.view-all.is-open > .l-filter_more {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* các chip xếp thành lưới, xuống dòng khi hết chỗ */
.l-filter_item.view-all .l-filter_more-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  max-height: 29rem;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* chip trong dropdown: viên thuốc nền xám nhạt, KHÁC chip đỏ ngoài hàng lọc */
.l-filter_more-list .l-filter_item > * {
  padding: 0.8rem 1.6rem;
  border: 1px solid #e4e4e7;
  border-radius: 9999px;
  background-color: #f4f4f5;
  color: #18181b;
  white-space: nowrap;
}

.l-filter_more-list .l-filter_item > *:hover,
.l-filter_more-list .l-filter_item.is-active > * {
  border-color: var(--primaryColor);
  background-color: var(--primaryColor);
  color: #fff;
}

/* hàng nút dưới cùng */
.l-filter_item.view-all .l-filter_more-foot {
  display: flex;
  gap: 1.2rem;
  margin-top: 1.6rem;
}

.l-filter_item.view-all .l-filter_more-foot > * {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 1.6rem;
  border-radius: 0.8rem;
  font-weight: 600;
  text-align: center;
  transition: 0.2s;
}

.l-filter_item.view-all .l-filter_more-close {
  border: 1px solid #d4d4d8;
  background-color: #fff;
  color: #18181b;
  cursor: pointer;
}

.l-filter_item.view-all .l-filter_more-close:hover {
  border-color: #a1a1aa;
  background-color: #fafafa;
}

.l-filter_item.view-all .l-filter_more-submit {
  border: 1px solid var(--primaryColor);
  background-color: var(--primaryColor);
  color: #fff;
}

.l-filter_item.view-all .l-filter_more-submit:hover {
  background-color: #e41a33;
  border-color: #e41a33;
  color: #fff;
}

@media (max-width: 576px) {
  /* Trên mobile hàng lọc xuống dòng nên nút "Xem tất cả" có thể nằm bất kỳ đâu.
     Neo dropdown theo cả hàng lọc (.l-filter) thay vì theo nút, bằng cách bỏ
     position:relative của nút — khi đó tổ tiên định vị gần nhất là .l-filter.
     Nhờ vậy dropdown luôn nằm gọn trong màn, không tràn trái/phải. */
  .l-filter {
    position: relative;
  }

  .l-filter_item.view-all.has-dropdown {
    position: static;
  }

  .l-filter_item.view-all > .l-filter_more {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    padding: 1.2rem;
  }

  .l-filter_item.view-all .l-filter_more-foot {
    flex-direction: column;
    gap: 0.8rem;
  }
}

/* Selector phải đủ mạnh để thắng rule có sẵn `.l-filter_item > *`
   (nền đỏ + display:flex) nằm PHÍA SAU trong file — cùng độ ưu tiên thì
   rule sau thắng, biến cả panel thành flex hàng ngang màu đỏ. */
.l-filter_item.view-all > .l-filter_more {
  display: block;
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.8rem);
  /* Neo bên PHẢI: nút "Xem tất cả" luôn là mục cuối hàng lọc và hàng lọc
     căn về phải, nên neo trái sẽ làm dropdown tràn khỏi màn ở desktop. */
  right: 0;
  left: auto;
  width: max-content;
  min-width: 100%;
  max-width: min(52rem, calc(100vw - 3.2rem));
  padding: 1.6rem;
  border-radius: 1.2rem;
  background-color: #fff;
  box-shadow: 0 0.8rem 3.2rem rgba(0, 0, 0, 0.16);
  /* Hiệu ứng mờ dần. Dùng opacity + visibility chứ KHÔNG dùng display:none:
     display không chuyển động được nên sẽ giật, không mượt. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.6rem);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

.l-filter_item.view-all.is-open > .l-filter_more {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* các chip xếp thành lưới, xuống dòng khi hết chỗ */
.l-filter_item.view-all .l-filter_more-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  max-height: 29rem;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* chip trong dropdown: viên thuốc nền xám nhạt, KHÁC chip đỏ ngoài hàng lọc */
.l-filter_more-list .l-filter_item > * {
  padding: 0.8rem 1.6rem;
  border: 1px solid #e4e4e7;
  border-radius: 9999px;
  background-color: #f4f4f5;
  color: #18181b;
  white-space: nowrap;
}

.l-filter_more-list .l-filter_item > *:hover,
.l-filter_more-list .l-filter_item.is-active > * {
  border-color: var(--primaryColor);
  background-color: var(--primaryColor);
  color: #fff;
}

/* hàng nút dưới cùng */
.l-filter_item.view-all .l-filter_more-foot {
  display: flex;
  gap: 1.2rem;
  margin-top: 1.6rem;
}

.l-filter_item.view-all .l-filter_more-foot > * {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 1.6rem;
  border-radius: 0.8rem;
  font-weight: 600;
  text-align: center;
  transition: 0.2s;
}

.l-filter_item.view-all .l-filter_more-close {
  border: 1px solid #d4d4d8;
  background-color: #fff;
  color: #18181b;
  cursor: pointer;
}

.l-filter_item.view-all .l-filter_more-close:hover {
  border-color: #a1a1aa;
  background-color: #fafafa;
}

.l-filter_item.view-all .l-filter_more-submit {
  border: 1px solid var(--primaryColor);
  background-color: var(--primaryColor);
  color: #fff;
}

.l-filter_item.view-all .l-filter_more-submit:hover {
  background-color: #e41a33;
  border-color: #e41a33;
  color: #fff;
}

@media (max-width: 576px) {
  /* Trên mobile hàng lọc xuống dòng nên nút "Xem tất cả" có thể nằm bất kỳ đâu.
     Neo dropdown theo cả hàng lọc (.l-filter) thay vì theo nút, bằng cách bỏ
     position:relative của nút — khi đó tổ tiên định vị gần nhất là .l-filter.
     Nhờ vậy dropdown luôn nằm gọn trong màn, không tràn trái/phải. */
  .l-filter {
    position: relative;
  }

  .l-filter_item.view-all.has-dropdown {
    position: static;
  }

  .l-filter_item.view-all > .l-filter_more {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    padding: 1.2rem;
  }

  .l-filter_item.view-all .l-filter_more-foot {
    flex-direction: column;
    gap: 0.8rem;
  }
}

/* Người dùng bật "giảm chuyển động" thì bỏ hiệu ứng */
@media (prefers-reduced-motion: reduce) {
  .l-filter_item.view-all > .l-filter_more {
    transition: none;
  }
}

.l-filter_item > * {
  display: flex;
  padding: 0.8rem 1.4rem;   /* 1.6 -> 1.4rem, user chốt 06/08 */
  border-radius: 0.4rem;
  background-color: var(--primaryColor);
  color: #fff;
  transition: 0.3s;
}

/* UX19 (10/08/2026) — chip lọc trên điện thoại: chữ nhỏ lại, đệm đều 4 phía.
   Bản desktop là `padding: 0.8rem 1.4rem` (user chốt 06/08). Ở khổ hẹp, đệm ngang
   1.4rem làm mỗi chip rộng ra khiến hàng lọc chiếm nhiều dòng; 0.8rem đều 4 phía
   gom lại gọn hơn. Không đặt `font-size` ở bản desktop nên chip vốn thừa hưởng cỡ
   chữ cha — ở đây khai 1.2rem cho riêng khổ điện thoại.

   Mốc 767.98px: dùng lại đúng mốc theme đang dùng cho nhóm này, và để .98 chứ không
   phải 768 để không chồng lấn với rule min-width: 768px. */
@media (max-width: 767.98px) {
  .l-filter_item > * {
    font-size: calc(1.2 * var(--fs));
    padding: 0.8rem;
  }
}

.l-filter_item > *:hover,
.l-filter_item.is-active > * {
  color: #fff;
  background-color: #e41a33;
}

.l-filter_item > *::before {
  content: none;
}

.product-shortcode-box .price {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  color: #d71a21;
  font-weight: bold;
}

.product-shortcode-box .price del {
  color: #999;
  font-size: 14px;
  font-weight: normal;
}

.product-shortcode-box .price ins {
  text-decoration: none;
}

.product-shortcode-box {
  border: 1px solid #e0e0e0;
  border-radius: 1.6rem;
  padding: 2.4rem;
  position: relative;
  margin: 2.4rem auto;
  max-width: max-content;
  overflow: hidden;
}

@keyframes styles_slide__SvF_62 {
  0% {
    left: -20%;
  }
  70%,
  80%,
  90%,
  100% {
    left: 120%;
  }
}

.ps-shine {
  position: absolute;
  top: 50%;
  left: 0;
  width: 20%;
  height: 120%;
  transform: translateY(-50%);
  pointer-events: none;
  animation: styles_slide__SvF_62 3s infinite;
}

.ps-shine::before,
.ps-shine::after {
  content: "";
  height: 100%;
  position: absolute;
  background: hsla(0, 0%, 100%, 0.2);
  transform: skewX(-20deg);
}

.ps-shine::before {
  width: 50%;
  left: 40%;
}
.ps-shine::after {
  width: 15%;
  left: 0;
}

.ps-sale-badge {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  background: #ff6b6b;
  color: white;
  padding: 0.2rem 0.8rem;
  border-radius: 0.4rem;
  font-weight: bold;
  overflow: hidden;
}

.ps-content-wrapper {
  display: flex;
  gap: 2rem;
}

.ps-image {
  width: 20rem;
  flex-shrink: 0;
}

.ps-image img {
  margin: 0;
}

.ps-footer {
  margin-top: 1.6rem;
  display: flex;
  justify-content: flex-end;
}

.product-shortcode-box .ps-title {
  margin-top: 0;
  margin-bottom: 1.6rem;
}

.ps-btn {
  background: var(--primaryColor);
  color: white !important;
  padding: 1.2rem 2.4rem;
  border-radius: 2.4rem;
  text-decoration: none !important;
  display: inline-block;
  transition: 0.3s;
}

.ps-btn:hover {
  background: #c20e2e !important;
}

.article-price del span,
.article-price .price del span {
  font-size: calc(1.4 * var(--fs));
}

.ps-description-inner {
  display: -webkit-box;
  -webkit-line-clamp: 4; /* Số dòng tối đa bạn muốn hiển thị */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6em; /* Khớp với line-height của text */
  max-height: 6.4em; /* = line-height x số dòng (1.6 x 4) */
}

.ps-description-inner ul {
  margin: 0;
  padding-left: 2.4rem;
}

.postdt-inner {
  gap: 1.6rem;
}

.mona-sidebar-left {
  width: calc(calc(3 / 12 * 100% - 1.6rem));
}

.postdt .postdt-left {
  width: calc(50% - 1.6rem);
}

.sidebar-sticky-wrapper {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

.sidebar-sticky-wrapper * {
  width: 100% !important;
}

.sidebar-sticky-wrapper ul li a {
  display: flex;
  padding: 0.6rem 1.2rem;
  transition: 0.3s;
}

.sidebar-sticky-wrapper ul li a:hover {
  color: var(--primaryColor);
}

.sidebar-sticky-wrapper .wp-caption-text {
  display: none;
}

.widget-title {
  font-size: calc(2 * var(--fs));
  font-weight: 700;
  margin-bottom: 1.2rem;
}

.radius-10 {
  border-radius: 1rem;
}

.m-productdt .m-productdt_sale .title {
  background-image: url("../../assets/images/product/sale_bg_new.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.function-item .article-img {
  aspect-ratio: 1 / 1;
}

.custom-star-rating {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.custom-star-rating .review-count {
  font-size: calc(1.4 * var(--fs));
}

.woocommerce .star-rating span {
  color: #fbc13e;
}

.js-product-shortcode .swiper-slide {
  width: calc(100% / 3.08);
}

.mona-content .js-product-shortcode img {
  margin: 0 auto;
}

.mona-content .js-product-shortcode a {
  font-weight: normal;
  text-transform: none;
  text-decoration: none;
}

.mona-content .js-product-shortcode .item-actions a {
  color: #fff;
  font-size: calc(1.4 * var(--fs));
}

.mona-content .js-product-shortcode .item-actions a.btn-pri:hover {
  color: var(--primaryColor);
}

.mona-content
  .js-product-shortcode
  .item-actions
  a.btn-four:not(.disabled):hover {
  color: #181818;
}

.mona-content .js-product-shortcode .article-title {
  margin: 0;
}

.mona-content .js-product-shortcode .article-title a {
  color: #18181b;
  text-decoration: none;
}

.mona-content .js-product-shortcode ul,
.mona-content .js-product-shortcode ol {
  margin: 0;
  padding: 0;
}

.mona-content .js-product-shortcode li {
  margin: 0;
  padding: 0.6rem 1.2rem;
}

.mona-content .js-product-shortcode li img {
  margin: 0;
}

.mona-content .js-product-shortcode span {
  font-size: calc(1.2 * var(--fs));
}

.mona-content .js-product-shortcode .article-price span {
  font-size: calc(1.4 * var(--fs));
}

/* .m-productdt_sale .sale-item::before,
.m-productdt_sale .desc ul li::before {
  content: "\2713" !important;
  font-weight: 700 !important;
} */

.group-action {
  margin: 2.4rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.m-productdt_detail .group-btn {
  flex-wrap: nowrap;
  flex: 1;
}

.m-productdt_detail .group-btn .btn {
  max-width: max-content;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  border-radius: 0.8rem;
  padding: 1.2rem 1.6rem;
}

.m-productdt_detail .group-btn .btn.btn-third {
  flex: 1;
  max-width: 100%;
  background-color: var(--primaryColor);
  color: #fff;
}

.m-productdt_detail .group-btn .btn.btn-fo {
      background-color: #E5E7EB;
      color: var(--primaryColor);
}

.m-productdt_detail .group-btn .btn.btn-fo img {
  filter: brightness(0) saturate(100%) invert(12%) sepia(30%) saturate(7218%) hue-rotate(332deg) brightness(87%) contrast(100%);
      -webkit-filter: brightness(0) saturate(100%) invert(12%) sepia(30%) saturate(7218%) hue-rotate(332deg) brightness(87%) contrast(100%);
}

.m-productdt_right .m-productdt_detail .group-btn .btn img {
  width: 3.2rem;
  height: 3.2rem;
}

.m-productdt_detail .group-btn .icon-add {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  font-size: calc(1.2 * var(--fs));
}

header.header {
  background-color: var(--primaryColor);
  padding: 0;
}

.main {
  padding-top: calc(var(--heightHeader) + 1.6rem);
}

/* .main chừa chỗ nhiều hơn chiều cao header thật (do cộng thêm 1.6rem), nên
   trang nào mở đầu bằng một khối TRÀN VIỀN sẽ hở một dải trắng giữa header và
   khối đó. Kéo khối đầu tiên lên đúng phần dư.

   Áp cho 2 khối tràn viền:
     .breadcrumb  — dải xám (trang thương hiệu, danh sách/chi tiết SP, liên hệ,
                    về chúng tôi, video)
     .banner-sub  — banner ảnh lớn (trang Tin tức)

   KHÔNG áp cho trang chủ (.m-list) và giỏ hàng (.woocommerce): đó là nội dung
   nằm trong container có lề, giữ 1.6rem thở là hợp lý.

   Phần dư khác nhau theo khổ màn vì --heightHeader là số gán cứng, chỉ khớp
   header thật ở dải >=1201px:

     khổ màn      header thật   .main chừa   dư
     >=1201px     145.5-155.6   +1.6rem      16px    -> kéo 1.6rem
     1200px       118px          96px        (header đè 22px, lỗi có sẵn)
     620-1150px    94px          96px        2px     -> bỏ qua, không đáng
     <=600px       63px          96px        33px    -> kéo 3.32rem

   3.32rem đo từ header mobile hiện tại. Nếu sau này sửa chiều cao header
   mobile thì phải đo lại số này. */
@media (min-width: 1201px) {
  .main > .breadcrumb:first-child,
  .main > .banner-sub:first-child {
    margin-top: -1.6rem;
  }
}

@media (max-width: 600px) {
  .main > .breadcrumb:first-child,
  .main > .banner-sub:first-child {
    margin-top: -3.32rem;
  }
}

.header-top {
  display: flex;
  align-items: center;
  width: calc(100% + 1.6rem);
  margin-left: -0.8rem;
}

.header-logo {
  width: 18.4rem;
  padding: 0 0.8rem;
}

header .main-logo,
header .custom-logo-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-top-search {
  padding: 0 0.8rem;
  /* Giữ nguyên flex: 1 (flex-basis 0%) như cũ để KHÔNG bóp logo trên mobile,
     chỉ chặn trần 48rem (480px) và dùng margin auto đẩy vào giữa header.
     Đặt flex-basis 48rem sẽ làm logo mobile co từ 100px xuống 55px. */
  flex: 1;
  max-width: 48rem;
  margin: 0 auto;
}

.dgwt-wcas-style-pirx
  .dgwt-wcas-sf-wrapp
  input[type="search"].dgwt-wcas-search-input {
  border: none;
  background-color: #fff;
  border-radius: 99rem !important;
  padding: 1.6rem !important;
}

.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
  pointer-events: auto;
  bottom: 1.6rem;
  right: 1.6rem !important;
}

.header-main {
  padding: 0;
  padding-bottom: 1.6rem;
}

/* Chia đều 0.8rem trên + dưới cho chữ menu nằm giữa dải trắng
   (trước đây padding-top 0 / bottom 1.6rem nên chữ dính sát mép trên).
   CHỈ áp từ 1201px — đó là dải duy nhất dải menu hiện ra. Dưới mốc đó menu
   đổi sang icon 3 gạch, mà đặt padding-top ở đó thì header cao thêm 8px
   (media query max-width 1200px chỉ zero padding-bottom, không zero top)
   khiến breadcrumb bị header đè ở MỌI khổ nhỏ. */
@media (min-width: 1201px) {
  .header-main {
    padding: 0.8rem 0;
  }
}

/* ===== Dải menu nền TRẮNG, dải trên giữ đỏ =====
 * .header-main nằm trong .container (1216px) nên nền của nó không chạm mép
 * màn. Dùng pseudo-element tràn 100vw để dải trắng chạy hết chiều ngang.
 *
 * isolation: isolate là BẮT BUỘC — không có nó thì nền trắng z-index:-1 tụt
 * ra sau nền đỏ của header.header và biến mất.
 *
 * KHÔNG dùng clip-path/overflow để tràn viền: dropdown "Danh mục" tràn xuống
 * dưới .header-main nên sẽ bị cắt mất.
 * 100vw an toàn ở đây vì body đã có overflow-x: hidden.
 */
.header-main {
  position: relative;
  isolation: isolate;
}

.header-main::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  /* Rộng ĐÚNG 100vw, mép trái tính bằng calc để trùng mép màn hình:
       50% (nửa .header-main) - 50vw (nửa màn) = khoảng lùi cần thiết.
     Ba cách KHÔNG được dùng, đều đã thử và vỡ:
       - left:50% + translateX(-50%): transform tạo layer raster riêng, ở khổ
         màn lẻ (1919px) làm tròn lệch nửa pixel -> lòi sợi đỏ sát mép trái.
       - left:-100vw + right:-100vw : rộng gấp 3 màn -> TRÀN NGANG 1328px trên
         MỌI trang. body{overflow-x:hidden} không cứu được vì header.header là
         position:absolute và không có tổ tiên positioned, nên containing block
         của nó là <html>, body không clip tới.
       - clip-path / overflow:hidden : cắt mất dropdown "Danh mục". */
  left: calc(50% - 50vw);
  width: 100vw;
  background-color: #fff;
  /* 18/08 theo yêu cầu user: sợi chỉ ngăn cách chân header, chạy hết bề ngang.
     Đặt trên ::before chứ không trên .header-main vì .header-main chỉ rộng bằng
     container — border ở đó sẽ đứt ở hai mép màn hình. */
  border-bottom: 0.1rem solid rgba(0, 0, 0, 0.1);
  z-index: -1;
}

/* chữ và icon trong dải menu đổi sang màu tối */
.header-main,
.header-main a,
.header-main span,
.header-main p {
  color: #18181b;
}

/* icon 3 vạch của "Danh mục" là SVG trắng -> đảo sang đen.
   CHỈ nhắm icon này, KHÔNG filter mọi img: dropdown "Danh mục" có ảnh
   sản phẩm thật, filter bao trùm là phá hết. */
.header-main img[src$="icon_cate1.svg"] {
  filter: brightness(0);
}

/* mục đang xem + hover dùng màu đỏ thương hiệu làm điểm nhấn */
.header-main .menu-list > li > a:hover,
.header-main .menu-list > li.current-menu-item > a,
.header-main .menu-list > li.current-menu-parent > a,
.header-main .menu-list > li.current-product-ancestor > a {
  color: var(--primaryColor);
}

.menu-list {
  justify-content: space-between;
}

.header-top-right {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 0 0.8rem;
}

.m-search {
  margin: 0;
}

@keyframes group-btn-fixed-ani {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

.group-btn-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15rem;
  background: #fafafc;
  z-index: 15;
  padding: 1.6rem 0;
  display: flex;
  align-items: center;
  border-top: 1px solid #e8e8ed;
  transform: translateY(100%);
  opacity: 0;
  transition: 0.3s;
}

.group-btn-fixed .container {
  height: auto;
}

.group-btn-fixed.is-fixed {
  display: flex;
  opacity: 1;
  animation: group-btn-fixed-ani 0.3s linear forwards;
}

.group-btn-fixed-flex {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.group-btn-fixed-left {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.group-btn-fixed-left .img {
  width: 11rem;
  flex-shrink: 0;
}

.group-btn-fixed-left .text {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.group-btn-fixed-left .category {
  text-transform: uppercase;
  color: #6f0a24;
}

.group-btn-fixed-left .name {
  font-size: calc(2.4 * var(--fs));
  font-weight: 700;
}

.group-btn-fixed-right {
  width: 50%;
  display: flex;
  align-items: center;
  align-items: stretch;
  justify-content: flex-end;
  gap: 1.6rem;
}

.group-btn-fixed-right .btn {
  border-radius: 0.8rem;
}

.group-btn-fixed-right .btn-third {
  background-color: var(--primaryColor);
  color: #fff;
  border: 0.1rem solid var(--primaryColor);
}

.group-btn-fixed-right .btn-third::before {
  background-color: #fff;
}

.group-btn-fixed-right .btn-zalo {
  font-weight: 700;
  text-transform: uppercase;
}

.group-btn-fixed-right .btn img {
  width: 2.2rem;
  height: 2.2rem;
}

.group-btn-fixed-right .btn-text {
  display: none;
}

.single-product .group-contact {
  bottom: 18rem;
}

.single-product .footer {
  margin-bottom: 15rem;
}

.footer-bottom_inner {
  padding-right: 3.2rem;
}

/* Container bọc 2 ô */
.custom-price-container {
  display: flex;
  gap: 1.6rem;
  margin: 20px 0;
}

/* Style chung cho cả 2 ô */
.custom-price-container .price-box {
  flex: 1;
  border-radius: 1.6rem;
  padding: 2rem;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.custom-price-container .price-box .box-title {
  font-size: calc(1.4 * var(--fs));
}

.custom-price-container .price-box .box-price {
  font-weight: 800;
  font-size: calc(2.4 * var(--fs));
}

/* --- Ô SHOWROOM (Bên trái) --- */
.custom-price-container .showroom-box {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
}
.custom-price-container .showroom-box .box-title {
  color: #18181B;
}
.custom-price-container .showroom-box .box-price {
  color: #1e293b;
}
.custom-price-container .showroom-box .box-note {
  color: #64748b;
  font-size: calc(1.2 * var(--fs));
  white-space: nowrap;
}

/* --- Ô ONLINE (Bên phải) --- */
.custom-price-container .online-box {
  border: 0.2rem solid #ef4444;
  background-color: #fff;
  box-shadow: 0 0.4rem 1.2rem #fee2e2;
}
.custom-price-container .online-box .box-title {
  color: #dc2626;
}
.custom-price-container .online-box .box-price {
  color: #dc2626;
}

/* Tag TIẾT KIỆM đè lên viền góc trên bên phải */
@keyframes pulseSubtle {
  25%,
  75% {
    opacity: 0;
  }
  0%,
  100%,
  50% {
    opacity: 1;
  }
}
.animate-pulse-subtle::after {
  background-color: #dc2626;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 0.1em #dc2626,
    inset 0 0 0.8em 0.2em rgba(220, 15, 15, 0.4),
    0 0 0 0.1em #dc2626,
    0 0 0.8em 0.2em rgba(220, 40, 40, 0.4);
  content: "";
  inset: 0;
  position: absolute;
  z-index: -1;
  transition: all 0.3s ease-in-out;
  animation: pulseSubtle 4s linear 0.3s infinite;
}

.custom-price-container .badge-saving {
  position: absolute;
  top: 0;
  right: 0;
  background: #dc2626;
  color: #fff;
  font-size: calc(1 * var(--fs));
  font-weight: 700;
  padding: 0.2rem 0.8rem;
  border-radius: 0 1rem 0 1rem;
  text-transform: uppercase;
}

/* Các tag phụ phía dưới giá online */
.custom-price-container .box-tags {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex: 1;
}
.custom-price-container .tag-discount {
  background-color: #fee2e2;
  color: #ef4444;
  font-size: calc(1.2 * var(--fs));
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
}
.custom-price-container .tag-shipping {
  color: #10b981;
  font-size: calc(1.2 * var(--fs));
  font-weight: 600;
}

/* Container tổng */
.mona-cusrev-reviews-wrapper {
  margin-top: 35px;
  padding: 30px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
}

/* Đưa bảng điểm 0,0 và thanh tiến độ vào một hàng ngang cân xứng */
.mona-cusrev-reviews-wrapper .cr-summaryBox-wrap {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  padding: 25px !important;
  border-radius: 12px !important;
  gap: 20px;
}

/* Khối điểm số bên trái (0,0) */
.mona-cusrev-reviews-wrapper .cr-summaryBox-wrap .left {
  text-align: center;
  flex: 1;
  min-width: 140px;
}

/* Ép size chữ 0,0 to rõ ràng, đậm nét */
.mona-cusrev-reviews-wrapper .cr-summary-stat-number {
  font-size: 46px !important;
  font-weight: 800 !important;
  color: #1e293b !important;
  line-height: 1.1 !important;
}

/* Khối tiến độ 5 sao ở giữa - Tạo vách ngăn dọc tinh tế */
.mona-cusrev-reviews-wrapper .cr-summaryBox-wrap .middle {
  flex: 2;
  min-width: 280px;
  border-left: 1px solid #cbd5e1 !important;
  padding-left: 25px !important;
}

/* Khối chứa NÚT VIẾT ĐÁNH GIÁ bên phải */
.mona-cusrev-reviews-wrapper .cr-summaryBox-wrap .right {
  flex: 1;
  min-width: 180px;
  display: flex;
  justify-content: center;
}

.mona-cusrev-reviews-wrapper .cr-summaryBox-wrap .ivole-meter {
  height: 10px;
  border-radius: 99rem;
}

.ivole-meter .ivole-meter-bar {
  border-radius: 99rem;
}

/* Custom nút bấm "Viết đánh giá" (Review) xuất hiện sau khi thêm tham số */
.mona-cusrev-reviews-wrapper button.cr-write-review-btn,
.mona-cusrev-reviews-wrapper .cr-write-review-btn {
  background-color: #dc2626 !important; /* Màu đỏ thương hiệu tiệp màu nút mua online */
  color: #ffffff !important;
  border: none !important;
  padding: 12px 24px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 4px 10px rgba(220, 38, 38, 0.15) !important;
}

.cr-all-reviews-shortcode
  .cr-summaryBox-wrap
  .cr-add-review-wrap
  .cr-all-reviews-add-review:hover,
.cr-reviews-grid
  .cr-summaryBox-wrap
  .cr-add-review-wrap
  .cr-all-reviews-add-review:hover {
  background-color: #b91c1c !important;
  transform: translateY(-1px);
}

/* Bóp ngắn thanh Tìm kiếm (Search) lại, không để tràn hết màn hình */
.mona-cusrev-reviews-wrapper .cr-ajax-search-form {
  max-width: 450px !important;
  margin: 20px 0 10px 0 !important;
  display: flex;
  gap: 6px;
}

.mona-cusrev-reviews-wrapper .cr-ajax-search-input {
  height: 40px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  padding: 0 14px !important;
}

.mona-cusrev-reviews-wrapper .cr-ajax-search-button {
  height: 40px !important;
  background: #475569 !important;
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 0 15px !important;
  cursor: pointer;
}

.mona-cusrev-reviews-wrapper .review-title {
  font-size: calc(1.8 * var(--fs));
  font-weight: 700;
  margin-bottom: 1.6rem;
}

.cr-ajax-search,
.cr-count-row,
.cr-search-no-reviews {
  display: none !important;
}

.cr-all-reviews-shortcode
  .cr-summaryBox-wrap
  .cr-add-review-wrap
  .cr-all-reviews-add-review,
.cr-reviews-grid
  .cr-summaryBox-wrap
  .cr-add-review-wrap
  .cr-all-reviews-add-review,
.cr-all-reviews-shortcode
  .cr-review-form-wrap
  .cr-review-form-buttons
  .cr-review-form-submit,
.cr-ajax-reviews-review-form
  .cr-review-form-wrap
  .cr-review-form-buttons
  .cr-review-form-submit,
.cr-reviews-grid
  .cr-review-form-wrap
  .cr-review-form-buttons
  .cr-review-form-submit,
.cr-qna-block .cr-review-form-buttons .cr-review-form-submit {
  background-color: var(--primaryColor);
  border-radius: 0.8rem;
}

.cr-all-reviews-shortcode .cr-review-form-comment .cr-review-form-comment-txt,
.cr-ajax-reviews-review-form
  .cr-review-form-comment
  .cr-review-form-comment-txt,
.cr-reviews-grid .cr-review-form-comment .cr-review-form-comment-txt,
.cr-qna-block .cr-review-form-comment .cr-review-form-comment-txt {
  font-size: calc(1.6 * var(--fs));
  line-height: 1.4;
}

.cr-all-reviews-shortcode
  .cr-review-form-wrap
  .cr-review-form-buttons
  .cr-review-form-cancel,
.cr-ajax-reviews-review-form
  .cr-review-form-wrap
  .cr-review-form-buttons
  .cr-review-form-cancel,
.cr-reviews-grid
  .cr-review-form-wrap
  .cr-review-form-buttons
  .cr-review-form-cancel,
.cr-qna-block .cr-review-form-buttons .cr-review-form-cancel {
  border-radius: 0.8rem;
}

.m-product_inner {
  flex-direction: column;
}

.m-product .m-product_category,
.category-item:nth-child(1) {
  width: 100%;
  max-width: max-content;
}

.m-product .category-box,
.m-product_category .category-item:nth-child(1) {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.m-product .m-product_item {
  width: calc(3 / 12 * 100% - 1.6rem);
}

.m-product .m-product_brand .brand-item {
  height: 5rem;
}

.m-product .m-product_brand .brand-item.show-more {
  padding: 0.4rem 2.4rem;
  line-height: 1.3;
}

.m-product .m-result,
.m-result .woocommerce .woocommerce-ordering {
  margin: 0;
}

.m-product .category-box .checkbox {
  padding: 0;
  padding: 0.4rem 0.8rem;
  min-height: 5rem;
}

.category-item:nth-child(8),
.category-item:nth-child(9),
.category-item:nth-child(10),
.category-item:nth-child(11) {
  display: block;
}

.category-heading {
  display: none;
}

.category-item.current-parent-category {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0;
}

.m-product .m-product_category .category-item.current-parent-category .checkbox,
.category-item {
  max-width: max-content;
  position: relative;
  padding: 0 !important;
}

.category-item .checkmark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #e8e6e1;
  border-radius: 0.8rem;
  background-image: unset;
}

.m-product_box {
  width: 100% !important;
}

.category-item .checkbox-input:checked ~ .checkmark {
  border-color: var(--primaryColor);
}

.checkbox-input:checked ~ .checkmark::after {
  display: none;
}

/* Sidebar danh mục đổi sang <a> link thật (23/09/2026): hết <input type="checkbox"> nên
   trạng thái "đang xem" bám class .is-active thay cho :checked. */
.category-item .checkbox.is-active .checkmark {
  border-color: var(--primaryColor);
}

/* Danh mục 0 sản phẩm render thành <span>, không tạo link vào trang rỗng.
   product.css nạp sau backdoor.css nên cần thêm .m-product_category để thắng độ ưu tiên
   cái filter làm trắng luôn viền chip. */
.m-product_category .category-item.is-disable > .checkbox .checkmark {
  -webkit-filter: none;
  filter: none;
  border-color: #f1f0ee;
}

/* Nút gỡ danh mục ở khối "Đã chọn" nay là <a> thay cho <button> */
.m-result_item > a.m-result_remove {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* H2 của lưới sản phẩm mượn class .category-title (vốn dành cho tiêu đề "Danh mục") nên
   đang 16px — bằng đúng cỡ tên sản phẩm H3 bên dưới, nhìn không ra tiêu đề.
   Nâng lên nấc h2 sẵn có của theme. Phải đủ 2 class mới thắng được .category-title
   trong product.css, vì product.css nạp SAU backdoor.css. */
.m-product_heading.category-title {
  font-size: calc(2 * var(--fs));
}

@media only screen and (max-width: 800px) {
  .m-product_heading.category-title {
    font-size: calc(1.8 * var(--fs));
  }
}

/* Dưới 600px nút "Lọc" là position:absolute, xưa nay nép vào khoảng trống mà .m-result_box
   chừa ra bằng padding-left: 7.4rem. Trang danh mục nay không còn dòng "Đã chọn" (danh mục
   là trang chứ không phải bộ lọc) nên .m-result_box rỗng và bị MenuModule.js ẩn đi — không
   còn ai chừa chỗ, nút đè lên ô "Sắp xếp". Cho ô sắp xếp tự chừa đúng khoảng đó. */
/* Cụm "Lọc / Đã chọn / Xoá tất cả" — gom thành MỘT nhóm ----------------- */

/* Dưới 600px nút "Lọc" vốn là position:absolute, phải nhờ .m-result_box chừa chỗ bằng
   padding-left: 7.4rem. Cách đó vỡ khi không còn dòng "Đã chọn", và còn đẩy select ẩn
   của bộ sắp xếp ra ngoài khung gây tràn ngang. Cho nút vào dòng chảy là hết cả hai. */
@media (max-width: 600px) {
  .m-result_inner > .m-filter {
    position: static;
  }

  .m-result_inner > .m-result_box {
    padding-left: 0;
  }
}

/* Có badge thì cụm điều khiển xuống hàng riêng ngay dưới tiêu đề, giữ nguyên nhóm
   [Lọc] [Đã chọn … Xoá tất cả] … [Sắp xếp]. (Thử ép 4 cột đều nhau thì vỡ: nội dung
   4 cột chênh nhau quá nhiều nên tràn ngang ở 992–1200px — đã bỏ.) */
/* 23/09: cụm điều khiển nay là ô của lưới .m-product_bar, chip "Đã chọn" xếp ở hàng 3
   (xem .m-product_bar .m-result_box). */

.m-result_inner {
  flex-wrap: wrap;
  row-gap: 1.2rem;
  column-gap: 1.6rem;
}

.m-result_box {
  align-items: center;
  column-gap: 1.2rem;
  row-gap: 0.8rem;
}

.m-result_erase {
  white-space: nowrap;
}

/* select2 ẩn select gốc bằng clip, nhưng nó vẫn rộng 35rem và vẫn tính vào bề rộng
   cuộn → tràn ngang trên mobile. Kẹp lại; clip lo phần nhìn thấy nên không đổi giao diện. */
.m-result_sort {
  min-width: 0;
  /* select gốc là position:absolute — không có khung chứa thì max-width dưới đây
     tính theo tổ tiên xa hơn và vẫn nong ra ngoài. */
  position: relative;
}

/* CSS select2 của theme thiếu phần width/height cho select gốc: nó bị clip nên không
   nhìn thấy, nhưng vẫn rộng bằng cả khối và VẪN tính vào bề rộng cuộn → tràn ngang
   mobile. Trả về 1px đúng như select2 chuẩn vẫn làm. */
.m-result_sort select.select2-hidden-accessible {
  width: 1px !important;
  height: 1px !important;
  min-width: 0 !important;
}

.m-product_category .category-box-child .category-item {
  padding: 0;
  border: unset;
}

.m-product_category .category-box-child {
  display: flex !important;
  align-items: center;
  gap: 0.8rem;
}
.m-product_category .category-box-child .category-item:first-child {
  margin-top: 0;
}
.m-product_category .category-box-child .category-item {
  padding: 0.4rem 0.8rem;
  border: 1px solid #e8e6e1;
  border-radius: 0.4rem;
}

.m-product_category .category-box-child .category-item .checkbox-text,
.checkbox-text {
  max-width: 100%;
  white-space: nowrap;
}

.checkbox-qty {
  margin-left: 0.4rem;
}

.cr-all-reviews-shortcode
  .cr-review-form-res
  .cr-review-form-result
  .cr-review-form-continue,
.cr-ajax-reviews-review-form
  .cr-review-form-res
  .cr-review-form-result
  .cr-review-form-continue,
.cr-all-reviews-shortcode
  .cr-review-form-not-logged-in
  .cr-review-form-continue,
.cr-ajax-reviews-review-form
  .cr-review-form-not-logged-in
  .cr-review-form-continue,
.cr-reviews-grid
  .cr-review-form-res
  .cr-review-form-result
  .cr-review-form-continue,
.cr-reviews-grid .cr-review-form-not-logged-in .cr-review-form-continue,
.cr-qna-block
  .cr-review-form-res
  .cr-review-form-result
  .cr-review-form-continue,
.cr-qna-block .cr-review-form-not-logged-in .cr-review-form-continue {
  padding: 0.8rem;
  border-radius: 0.8rem;
  background-color: var(--primaryColor);
}

#reviews.cr-reviews-ajax-reviews .cr-ajax-reviews-cus-images-div,
.cr-all-reviews-shortcode .cr-ajax-reviews-cus-images-div {
  display: none;
}

.cr-all-reviews-shortcode ol.commentlist,
#reviews.cr-reviews-ajax-reviews
  #comments.cr-reviews-ajax-comments
  .cr-ajax-reviews-list {
  margin-top: 2.4rem;
}

.text-emerald-600 {
  color: #000;
  font-size: calc(1.2 * var(--fs));
}

.m-productdt .m-productdt_sale .sale-item::before,
.m-productdt .m-productdt_sale .desc ul li::before {
  content: none;
}

.m-productdt .m-productdt_sale .sale-item,
.m-productdt .m-productdt_sale .desc ul li {
  padding-left: 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0;
}

.m-productdt .m-productdt_sale .sale-item:not(:last-child),
.m-productdt .m-productdt_sale .desc ul li:not(:last-child) {
  border-bottom: 0.1rem solid #efefef;
}

.p-icon {
  width: 2.4rem;
  flex-shrink: 0;
}

.p-link {
  color: var(--primaryColor);
}

.m-productdt_sale {
  border-radius: 1.6rem;
  overflow: hidden;
  border: 0.1rem solid #ff8080;
}

/* Khung bọc bộ lọc bên ngoài popup */
.m-result_inner {
  position: relative;
}
.m-filter {
  position: relative;
  z-index: 10;
}
.m-filter-icon {
  cursor: pointer;
  padding: 0.8rem 1.6rem;
  border-radius: 0.8rem;
  border: 0.1rem solid var(--primaryColor);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--primaryColor);
}
.m-filter-icon img {
  width: 2rem;
  aspect-ratio: 1/1;
}
.m-filter-popup {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  max-width: 850px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial,
    sans-serif;
  overflow: hidden;
  position: absolute;
  width: 90rem;
  top: calc(100% + 0.8rem);
  left: 0;
}

/* Tiêu đề góc trên */
.m-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #f0f0f0;
}
.m-filter-header h2,
.m-filter-header .m-filter-heading {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  color: #333;
}
.m-filter-close {
  background: #fff;
  border: 1px solid #ddd;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #555;
  transition: all 0.2s ease;
}
.m-filter-close:hover {
  background: #f5f5f5;
}

/* Vùng nội dung các khối lọc */
.m-filter-body {
  padding: 20px;
  max-height: 550px;
  overflow-y: auto;
}
.filter-block {
  margin-bottom: 25px;
}
.filter-title {
  font-size: 15px;
  font-weight: 600;
  color: #222;
  margin: 0 0 12px 0;
}

/* Grid chứa các ô lựa chọn dạng Thẻ (Card) */
.filter-options-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-item-logo {
  height: 4rem;
  width: calc(100% / 6);
}

.filter-item-logo img {
  height: 100%;
  object-fit: contain;
}

/* Ẩn checkbox mặc định của trình duyệt */
.filter-checkbox-hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Custom Thẻ label giả lập button */
.filter-label-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  user-select: none;
  transition:
    box-shadow 0.2s,
    border-color 0.2s,
    color 0.2s;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0.8rem 1.6rem;
}

/* Hiệu ứng khi hover vào thẻ */
.filter-label-card:hover {
  border-color: #2f80ed;
  color: #2f80ed;
}

/* Trạng thái KHI ĐƯỢC CHỌN (Checked) */
.filter-checkbox-hidden:checked + .filter-label-card {
  border-color: #2f80ed;
  color: #2f80ed;
  background-color: #f2f7fe;
}

/* Thanh hành động phía dưới cùng */
.m-filter-footer {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 15px 20px;
  background: #ffffff;
  border-top: 1px solid #f0f0f0;
}
.btn-clear-filter {
  background: #fff;
  border: 1px solid #e0e0e0;
  color: #eb5757;
  padding: 12px 35px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  min-width: 150px;
}
.btn-clear-filter:hover {
  background: #fff5f5;
}
.btn-submit-filter {
  background: #2f80ed;
  border: none;
  color: #fff;
  padding: 12px 35px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  min-width: 180px;
  transition: background 0.2s;
}
.btn-submit-filter:hover {
  background: #1b66ca;
}
.btn-submit-filter:disabled {
  pointer-events: none;
  opacity: 0.7;
}

.m-result_box {
  align-items: center;
}

.m-result_item {
  padding: 0.8rem 1.6rem;
  background: rgba(242, 244, 247, 1);
  border-radius: 0.8rem;
}

/* Responsive mượt mà trên điện thoại */
@media (max-width: 768px) {
  .mona-cusrev-reviews-wrapper .cr-summaryBox-wrap {
    flex-direction: column;
    align-items: stretch;
  }
  .mona-cusrev-reviews-wrapper .cr-summaryBox-wrap .middle {
    border-left: none !important;
    border-top: 1px solid #cbd5e1 !important;
    padding-left: 0 !important;
    padding-top: 20px !important;
  }
}

/* Responsive cho màn hình điện thoại nhỏ */
@media (max-width: 600px) {
  .custom-price-container {
    gap: 0.8rem;
  }

  .custom-price-container .price-box {
    padding: 1.8rem 1.6rem;
    border-radius: 1.2rem;
  }

  .custom-price-container .price-box .box-title {
    font-size: calc(1.2 * var(--fs));
  }

  .custom-price-container .price-box .box-price {
    font-size: calc(2 * var(--fs));
  }

  .custom-price-container .showroom-box .box-note {
    white-space: normal;
  }

  .m-product_box .m-result_txt,
  .m-product_box .m-result_erase {
    display: none;
  }

  .m-result .container {
    padding: 0;
  }

  .m-filter {
    position: absolute;
    z-index: 100;
  }

  .m-filter-icon {
    padding: 0.8rem;
  }

  .m-result_box {
    padding-left: 7.4rem;
  }

  .m-filter-popup {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 0;
  }

  .btn-clear-filter,
  .btn-submit-filter {
    padding: 0.4rem 0.8rem;
    min-width: 45%;
    min-height: 4.2rem;
  }

  .m-filter-header,
  .m-filter-body,
  .m-filter-footer {
    padding: 1.6rem;
  }

  .m-filter-body {
    max-height: calc(100dvh - 13.8rem);
  }

  .filter-options-grid {
    gap: 8px;
  }

  .filter-item-logo {
    width: calc(100% / 4 - 6px);
  }

  .filter-label-card {
    padding: 0.6rem 0.8rem;
  }

  .m-product .m-product_brand .brand-item {
    height: 4rem;
  }
}

.select2-container--open .select2-dropdown--below {
  top: 35px;
}

.article-price-label {
  font-weight: 600;
  color: #e00a39;
  font-size: calc(1.4 * var(--fs));
  line-height: 1.7;
}

@media (min-width: 1201px) {
  header.header {
    height: var(--heightHeader);
  }
}

@media (max-width: 1200px) {
  :root {
    --heightHeader: 8rem;
  }

  .header-main {
    padding-bottom: 0;
  }

  .header-logo {
    width: 15rem;
  }

  .group-btn-fixed-right {
    width: 50%;
  }
}

@media (max-width: 991px) {
  .postdt-inner {
    flex-direction: column-reverse;
  }

  .postdt .postdt-left {
    width: 100%;
  }

  .mona-sidebar-left {
    width: 100%;
  }

  .m-product .m-product_item {
    width: calc(4 / 12 * 100% - 1.6rem);
  }
}

@media (max-width: 768px) {
  .postdt .mona-content .table-resp tbody tr {
    display: table-row;
  }

  .postdt .mona-content .table-resp tbody tr td:has(:not([colspan*=""])) {
    width: unset !important;
    border-bottom: 0.1rem solid #f0f0f0;
    border-right: unset;
  }

  .postdt .mona-content table :is(th, td):not(:last-child) {
    border-right: 0.1rem solid #f0f0f0 !important;
  }

  .mona-content .table-resp tbody tr {
    display: table-row;
  }

  .mona-content table tbody tr:not(:is(:first-child)) td {
    border-right: 0.1rem solid #f0f0f0;
  }

  .mona-content table tbody tr:not(:is(:first-child)) td {
    border-bottom: 0.1rem solid #f0f0f0;
  }

  .mona-content table tbody tr td:first-child {
    border-left: 0.1rem solid #f0f0f0;
  }

  .mona-content table tbody tr:first-child td {
    border-top: 0.1rem solid #f0f0f0;
  }
}

@media (max-width: 600px) {
  .ps-content-wrapper {
    flex-direction: column;
  }

  .widget-title {
    font-size: calc(1.6 * var(--fs));
    margin-bottom: 0.8rem;
  }

  .js-product-shortcode .swiper-slide {
    width: calc(100% / 2.2);
  }

  .m-productdt_right .m-productdt_detail .group-btn .btn.btn-third {
    width: 100%;
  }

  .header-logo {
    width: 10rem;
  }

  .group-btn-fixed {
    height: auto;
    padding: 0.8rem 0;
  }

  .group-btn-fixed-left {
    display: none;
  }

  .group-btn-fixed-right {
    width: 100%;
    gap: 0.8rem;
    justify-content: center;
  }

  .group-btn-fixed-right .btn-text-pc {
    display: none;
  }

  .group-btn-fixed-right .btn-text {
    display: block;
  }

  .single-product .footer {
    margin-bottom: 5rem;
  }

  .single-product .group-contact {
    bottom: 7rem;
  }

  .group-btn-fixed-right .btn-zalo img {
    display: none;
  }

  :root {
    --heightHeader: 8rem;
  }

  .m-product .m-product_item {
    width: calc(50% - 0.8rem);
  }

  .m-product .category-box,
  .m-product_category .category-item:nth-child(1) {
    /* flex-wrap: nowrap; */
  }

  .m-product .category-box {
    overflow: auto hidden;
    padding-bottom: 0.8rem;
  }

  .category-inner {
    padding: 0 !important;
  }

  .m-product .m-product_category .category-item.current-parent-category .checkbox, .category-item {
    width: calc(50% - 0.4rem);
  }

  .m-product .category-box .checkbox {
    min-height: 4.2rem;
  }

  .checkbox-qty,
  .checkbox-text {
    font-size: calc(1.2 * var(--fs));
  }

  .m-product_category .category-box-child .category-item .checkbox-text, .checkbox-text {
    white-space: normal;
  }

  .m-product .category-box .checkbox img {
    width: 22px !important;
    height: 22px !important;
  }

  .m-product .m-product_brand .brand-item.show-more {
    padding: 0.4rem;
  }

  .custom-price-container .price-box {
    gap: 0.4rem;
  }

  .mona-cusrev-reviews-wrapper {
    padding: 3.2rem 0;
  }

  .mona-cusrev-reviews-wrapper .cr-summaryBox-wrap {
    padding: 1.6rem !important;
  }

  .cr-all-reviews-shortcode
    .cr-summaryBox-wrap.cr-summaryBox-add-review
    .cr-summary-separator,
  .cr-reviews-grid
    .cr-summaryBox-wrap.cr-summaryBox-add-review
    .cr-summary-separator {
    display: none;
  }
}

@media (max-width: 576px) {
  .custom-price-container {
    margin: 0;
  }

 .group-action .mercial-box {
    gap: 0.8rem;
    flex-direction: column;
 }
}

/* Panel giỏ hàng ở mobile lòi ra ngoài mép trái 20px: panel rộng
   calc(100vw - 3.2rem) nhưng neo lệch phải 4rem so với icon giỏ, mà icon
   giỏ chỉ cách mép phải 9.2rem (đo ở 320/360/390/414/576px đều 9.2rem).
   Kéo về 7.6rem để panel nằm gọn 1.6rem mỗi bên, và dời mũi tên từ
   4.4rem sang 8.1rem cho nó vẫn chỉ đúng tâm icon giỏ. */
@media (max-width: 576px) {
  .header-cart .cart-mini {
    right: -7.6rem;
  }

  .header-cart .cart-mini::before {
    right: 8.1rem;
  }
}

/* =====================================================================
   Giãn lề hai bên .container — 2026-08-05
   ---------------------------------------------------------------------
   common.css:211 đặt `.container, .container-sec, .container-third,
   .container-four { max-width: 124.8rem; padding: 0 16px; }` cho MỌI khổ màn.
   Hệ quả đo được trên live: từ 1248px trở xuống trang dính sát mép, lề mỗi bên
   chỉ 16px ở cả 390 / 576 / 768 / 1024 / 1200px.

   Chỉ đè `padding-left` / `padding-right`, CỐ Ý không dùng shorthand `padding:`
   — shorthand sẽ ghi đè luôn padding dọc mà nơi khác đang đặt (đã vấp trước đây).

   Mobile <=575px giữ nguyên 16px: màn vốn hẹp, lấy thêm chỗ mỗi bên sẽ bóp
   lưới 2 cột sản phẩm mà gần như không thấy thoáng hơn.
   Từ 1280px trở lên cũng giữ nguyên: đã có sẵn lề ngoài 32-352px do max-width.
   ===================================================================== */
@media (min-width: 576px) and (max-width: 1023.98px) {
  .container,
  .container-sec,
  .container-third,
  .container-four {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  .container,
  .container-sec,
  .container-third,
  .container-four {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* =====================================================================
   Nới bề rộng tối đa của container: 124.8rem -> 136rem  (1248px -> 1360px)
   ---------------------------------------------------------------------
   Chỉ có tác dụng từ màn >=1248px; dưới mức đó container vốn đã hẹp hơn
   1248px nên không đổi gì (điện thoại/tablet/laptop nhỏ không bị ảnh hưởng).

   Đo trên live sau khi nới: nội dung 1216 -> 1328px; thẻ sản phẩm
   288 -> 316px (danh mục), 189 -> 208px (trang chủ), 292 -> 320px (PDP).
   Lưới sản phẩm là `repeat(4, 1fr)` CỐ ĐỊNH nên thẻ to hơn chứ không thêm cột.
   Tràn ngang 0px ở trang chủ / danh mục / PDP / giỏ hàng / liên hệ tại
   1366, 1440, 1920px. Header không đổi (cao 156/156/145px, ô tìm kiếm 480px).
   Không ảnh nào bị mờ (đo 97 ảnh trang chủ, 25 ảnh danh mục).

   ĐÁNH ĐỔI CÓ CHỦ Ý: lề nhìn thấy ở 1440px giảm 96px -> 40px.
   ===================================================================== */
.container,
.container-sec,
.container-third,
.container-four {
  max-width: 136rem;
}

/* Bốn chỗ dưới cũng gán cứng 124.8rem trong common.css / news.css.
   Không sửa kèm thì chúng hẹp hơn container và lệch hẳn ra. */

/* common.css:228 — bề rộng tự tính theo container */
.swiper-container {
  width: calc(100vw - ((100vw - 136rem) / 2));
}

/* common.css:4782 + :5077 — khung thông báo của WooCommerce */
.woocommerce .woocommerce-notices-wrapper,
.woocommerce-NoticeGroup {
  max-width: 136rem;
}

/* news.css:379 — banner trang chi tiết tin tức.
   news.css nạp SAU backdoor.css nên cần thêm `body` cho đủ trọng số,
   thay vì phải dùng !important. */
body .p-newsdt .banner-sub .swiper-container {
  max-width: 136rem;
}

/* ---------------------------------------------------------------------
   Chặn tràn ngang do hiệu ứng AOS ở trang giới thiệu.
   `.m-solution_left` dùng data-aos="fade-right", `.m-solution_right` dùng
   "fade-left" — AOS dịch chúng bằng transform, quãng dịch tỉ lệ với bề rộng
   phần tử, nên container rộng ra thì tràn nặng hơn (đo ở 1366px: 25 -> 81px).
   Đã kiểm: tắt AOS thì tràn = 0px ở MỌI mức -> bố cục không sai, chỉ là hiệu ứng.

   Dùng `clip` chứ KHÔNG dùng `hidden`: `hidden` tạo scroll container và sẽ giết
   `position: sticky` bên trong — site này đã vấp đúng lỗi đó khi đặt overflow-x
   lên body. Trình duyệt cũ không hiểu `clip` thì rơi về hiện trạng, không vỡ thêm.
   --------------------------------------------------------------------- */
.m-solution_inner {
  overflow-x: clip;
}

/* =====================================================================
   H1 trang danh mục / thương hiệu / cửa hàng — BỎ ẨN  (2026-08-06)
   ---------------------------------------------------------------------
   common.css:5881 đặt `header.woocommerce-products-header { display: none }`
   nên thẻ <h1> của 57 trang danh mục + 26 trang thương hiệu + /san-pham/
   (84 trang) bị ẩn khỏi cả người đọc lẫn công cụ tìm kiếm. Đo trên live:
   getBoundingClientRect trả 0x0 dù chính h1 có visibility:visible — vì phần
   tử CHA bị display:none. Heading hiện đầu tiên trên trang danh mục là tên
   sản phẩm ở y=1431, tức là trang không có tiêu đề nào cho người đọc.

   🚨 BẪY — VÌ SAO KHÔNG ĐƯỢC CHỈ ĐỔI `display: none` THÀNH `block`:
   ngay dưới rule đó, common.css có `header { position: absolute; top: 0;
   left: 0; right: 0; z-index: var(--z-i-header); width: 100%;
   padding-top: 2.1rem; background-color: #181818 }` — áp cho MỌI thẻ
   <header>, kể cả cái này. Bỏ mỗi display:none thì tiêu đề danh mục biến
   thành một dải ĐEN position:absolute phủ lên đầu trang. Nên khối dưới
   phải trung hoà đủ 7 thuộc tính đó trước khi tạo hình lại.

   Phần tử là con TRỰC TIẾP của <main class="main">, KHÔNG nằm trong
   .container — nên phải tự dựng lại hình học container, khớp đúng bậc
   padding mà UX1 đã đặt ở cuối file này (16 / 24 / 32px) và max-width 136rem.
   Sai bậc này thì tiêu đề lệch hẳn so với breadcrumb ngay trên nó.

   Bên trong <header> chỉ có duy nhất thẻ h1 (đã kiểm 3 loại trang:
   danh mục, /san-pham/, /thuong-hieu/bosch/) nên bỏ ẩn không làm lộ
   thêm thứ gì khác.

   Đặt ở backdoor.css chứ KHÔNG phải mona-custom.css: file này có
   cache-busting theo filemtime (UX1 thêm), còn mona-custom.css vẫn dùng
   ?ver=4.2.7 cố định + max-age 604800 nên khách cũ sẽ không thấy suốt 7 ngày.
   ===================================================================== */
header.woocommerce-products-header {
  /* 1. bỏ ẩn */
  display: block;

  /* 2. trung hoà rule `header {}` chung của common.css */
  position: static;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
  width: auto;
  padding-top: 0;
  background-color: transparent;
  transition: none;

  /* 3. dựng lại hình học container (phần tử nằm ngoài .container) */
  max-width: 136rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 576px) and (max-width: 1023.98px) {
  header.woocommerce-products-header {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 1024px) and (max-width: 1279.98px) {
  header.woocommerce-products-header {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* Tiêu đề vốn không có style riêng ở bất kỳ file CSS nào (đã grep cả
   common.css, product.css, mona-custom.css) nên đang thừa kế 1.6rem/400,
   nhìn y hệt chữ thường. Đặt cỡ tiêu đề thật. */
.woocommerce-products-header__title.page-title {
  margin-top: 0.8rem;
  margin-bottom: 1.6rem;
  color: #18181B;
  font-size: calc(2.8 * var(--fs));
  font-weight: 700;
  line-height: 1.3;
}

@media (max-width: 767.98px) {
  .woocommerce-products-header__title.page-title {
    font-size: calc(2.2 * var(--fs));
  }
}

/* =====================================================================
   UX18 - TRA FONT CHINH VE SFProDisplay   (10/08/2026)
   ---------------------------------------------------------------------
   Dao lai UX2 (05/08) theo yeu cau cua khach.

   KHONG khai lai bien --font-pri o day: 'SFProDisplay' von la gia tri goc
   trong :root cua 12 file CSS theme (common, home, product, news, cart,
   about, brand, biomass, contact, policy, recruit, video). Go khoi de cu
   la font tu ve nguyen ban. Khai them mot lan nua chi che mat cho dinh
   nghia that, nguoi sau sua font se lan nham vao day.

   VI SAO KHAI BAO FONT NAM TRONG FILE NAY CHU KHONG PHAI wp_enqueue_style
   Cach dung bai la nap lai stylesheet.css cua SF-Pro-Display trong
   common.php. Nhung the <link> nam trong HTML, ma HTML dang bi W3TC cache
   toi 24 gio - suot 24 gio do cac trang cache cu se co bien --font-pri
   bang 'SFProDisplay' (vi file CSS nay da doi) ma KHONG co khai bao font
   de tai ve, tuc tut ve font he thong tren TOAN SITE. Dat khai bao ngay
   trong backdoor.css thi font di lien voi file CSS, trang cache cu hay
   moi deu hien dung.
   Thang 8/2026 site dang co 23 trang cache hong khong purge duoc, nen
   chon cach khong phu thuoc vao viec HTML duoc dung lai.

   Duong dan de TUYET DOI tu goc site, giong khoi UX15 tro toi
   ribbon-sale.webp - khong gay neu ai do gop hoac doi cho file CSS.
   Da kiem qua FTP truoc khi day: ca 18 file .woff2 duoc tro toi ben duoi
   deu CO THAT tren server.

   HAI DIEU DA BAO KHACH TRUOC KHI LAM, KHACH CHON GIU SF PRO:
   1. Giay phep: day la font Apple that (bang name ghi "(c) 2015-2020
      Apple Inc.", Version 16.0d18e1). Giay phep font SF chi cho phep
      thiet ke giao dien ung dung cho nen tang Apple, KHONG cho nhung lam
      webfont tren website thuong mai. Co OS/2.fsType = 0 la co ky thuat,
      khong phai giay phep.
   2. Nang: 5-6 file tinh 300-372 KB moi trang, so voi 71 KB cua Be
      Vietnam Pro. Font nay khong co subset rieng cho tieng Viet.
   Day la quyet dinh cua khach sau khi duoc bao ro, khong phai ket luan
   ky thuat cua minh.

   HOAN TAC: xoa ca khoi nay roi khai lai rule cho html:root, dat bien
   --font-pri thanh 'Be Vietnam Pro', system-ui, sans-serif. Be Vietnam
   Pro van dang duoc nap san trong URL Google Fonts o
   core/includes/custom/scripts/common.php nen khong phai dung file PHP.
   Ban truoc khi doi nam ngay canh file nay: backdoor.css.truoc-font-*
   ===================================================================== */
@font-face {
    font-family: 'SFProDisplay';
    src: url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-BoldItalic.woff2') format('woff2'),
        url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SFProDisplay';
    src: url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-Heavy.woff2') format('woff2'),
        url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-Heavy.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SFProDisplay';
    src: url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-HeavyItalic.woff2') format('woff2'),
        url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-HeavyItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SFProDisplay';
    src: url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-Light.woff2') format('woff2'),
        url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SFProDisplay';
    src: url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-LightItalic.woff2') format('woff2'),
        url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SFProDisplay';
    src: url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-Medium.woff2') format('woff2'),
        url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SFProDisplay';
    src: url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-MediumItalic.woff2') format('woff2'),
        url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SFProDisplay';
    src: url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-Regular.woff2') format('woff2'),
        url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SFProDisplay';
    src: url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-Semibold.woff2') format('woff2'),
        url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SFProDisplay';
    src: url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-RegularItalic.woff2') format('woff2'),
        url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-RegularItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SFProDisplay';
    src: url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-SemiboldItalic.woff2') format('woff2'),
        url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-SemiboldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SFProDisplay';
    src: url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-Thin.woff2') format('woff2'),
        url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SFProDisplay';
    src: url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-ThinItalic.woff2') format('woff2'),
        url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SFProDisplay';
    src: url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-Ultralight.woff2') format('woff2'),
        url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-Ultralight.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SFProDisplay';
    src: url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-UltralightItalic.woff2') format('woff2'),
        url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-UltralightItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'SFProDisplay';
    src: url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-Bold.woff2') format('woff2'),
        url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SFProDisplay';
    src: url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-Black.woff2') format('woff2'),
        url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SFProDisplay';
    src: url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-BlackItalic.woff2') format('woff2'),
        url('/template/assets/fonts/SF-Pro-Display/SFProDisplay-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

/* =====================================================================
   UX4 — Placeholder ô tìm kiếm: nhẹ hơn, nghiêng, nhỏ hơn   (2026-08-06)
   ---------------------------------------------------------------------
   common.css:8058 đang đặt placeholder ở font-weight 700 / 1.6rem, đậm
   ngang với chữ người dùng gõ vào nên nhìn như đã có nội dung sẵn.
   Đổi thành 400 / nghiêng / 1.4rem để nó lùi về đúng vai gợi ý.

   Selector giữ NGUYÊN như common.css (cùng trọng số 0-4-2); backdoor.css
   nạp SAU common.css nên thắng. Đã kiểm 13 file CSS: chỉ common.css khai
   rule này, không file nào nạp sau ghi đè lại.

   Chỉ đụng ô tìm kiếm của plugin (dgwt-wcas). Rule `.m-search input::
   placeholder` (common.css:7989) là ô khác, CỐ Ý không đổi.
   ===================================================================== */
.dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp input[type=search].dgwt-wcas-search-input::placeholder {
  font-size: calc(1.4 * var(--fs));
  font-weight: 400;
  font-style: italic;
}

/* =====================================================================
   UX5 — Giá trị cốt lõi: 3 thẻ vào chung một lưới, cân chiều cao bằng CSS
   ---------------------------------------------------------------------
   Trước: value #1 render ở .m-solution_left, hai value còn lại ở ul trong
   .m-solution_right. Ba thẻ nằm ở HAI container anh em nên trình duyệt không
   cân được chiều cao — phải đo bằng JS. Nay template render cả ba vào một
   `ul.m-solution_list`, phần cân chiều cao trả về cho CSS grid.

   🔑 PHẢI ĐỦ TRỌNG SỐ, không được viết `.m-solution_list { display: grid }`:
   `about.css` nạp SAU `backdoor.css` và đang khai `.m-solution_list{display:flex;
   flex-direction:column}`. Cùng trọng số 0-1-0 thì file nạp sau thắng — đo trên
   local ra `display: flex` dù đã viết grid. Thêm `.m-solution` ở trước cho thành
   0-2-0 là thắng bất kể thứ tự nạp. Đây đúng cái bẫy đã vấp ở UX1 với news.css.

   🔑 `grid-auto-rows: 1fr` là mấu chốt thứ hai: 3 thẻ trên lưới 2 cột thì hàng 1
   có hai thẻ (tự bằng nhau nhờ align stretch) còn hàng 2 chỉ có một thẻ. Thiếu
   dòng này thì thẻ thứ ba cao theo nội dung riêng và vẫn lệch.
   ===================================================================== */
.m-solution .m-solution_inner {
  display: block;
}

/* Ô tiêu đề: cùng nằm trên lưới nhưng KHÔNG có nền thẻ, chữ căn trên cho khỏi
   trôi xuống giữa ô khi hàng cao lên theo thẻ dài nhất. */
.m-solution .m-solution_item--heading {
  align-items: flex-start;
}

.m-solution .m-solution_item--heading .m-solution_heading {
  margin-bottom: 0;
}

.m-solution .m-solution_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 3.2rem;
}

/* để .about-item cao hết ô lưới, không co theo nội dung */
.m-solution .m-solution_item {
  display: flex;
}

.m-solution .m-solution_item > .about-item {
  width: 100%;
  margin-top: 0;
}

@media screen and (max-width: 992px) {
  .m-solution .m-solution_list {
    grid-template-columns: 1fr;
    gap: 1.6rem;
  }
}

/* =====================================================================
   UX8 — Banner đầu trang: slider 1 ảnh full chiều ngang   (06/08/2026)
   ---------------------------------------------------------------------
   Trước: ở desktop theme dựng 5 slide thành mosaic (grid 4 cột) và tắt luôn
   swiper bằng `transform: none !important`. Khối grid đó nay đã bị khoá sau
   class `.is-grid` trong common.css, phần dưới đây dựng lại kích thước slide.

   🔑 Trọng số: rule gốc là `.js-banner-top .swiper-slide:nth-child(1)` (0-3-0)
   nên override phải đạt ít nhất 0-3-1 mới thắng — thêm `body` ở đầu. Viết
   `.js-banner-top .swiper-slide` không thôi (0-2-0) là thua, aspect-ratio cũ
   của từng slide vẫn giữ nguyên và 5 ảnh cao thấp khác nhau.

   Khung 90.8/34 (~2,67:1) lấy đúng theo banner chính hiện có, ảnh khác tỉ lệ
   sẽ bị cắt trên/dưới bằng object-fit: cover — user đã chọn phương án này.
   Khung cố định nên chiều cao không nhảy khi đổi slide, giữ CLS đang tốt.
   ===================================================================== */
@media screen and (min-width: 992.02px) {
  body .js-banner-top .swiper-wrapper {
    display: flex !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }

  body .js-banner-top .swiper-slide:nth-child(n) {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    aspect-ratio: 90.8/34;
  }

}

body .js-banner-top .swiper-slide .review-item,
body .js-banner-top .swiper-slide .review-item_img {
  height: 100%;
}

body .js-banner-top .swiper-slide .review-item_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Bỏ hẳn chấm phân trang của banner đầu trang ở MỌI khổ màn (user chốt 06/08).
   Ẩn bằng CSS chứ không chỉ gỡ trong JS: thẻ .swiper-pagination do template in ra,
   gỡ option pagination thì Swiper không vẽ chấm nữa nhưng thẻ rỗng vẫn còn chiếm chỗ. */
body .js-banner-top .swiper-pagination {
  display: none;
}

/* Đồng bộ khối chữ trên 5 slide banner.
   Đo trước khi sửa: slide 1-4 đặt chữ ở ĐÁY, riêng slide 5 ở ĐỈNH (top:0;bottom:unset)
   — tàn dư từ bố cục mosaic cũ, nơi ô thứ 5 là ô dọc bên phải nên chữ để trên cho cân.
   Nay cả 5 là slide full-width giống nhau nên chữ phải cùng một chỗ.

   🔑 Trọng số: rule gốc `.js-banner-top .swiper-slide:nth-child(5) .review-item_content`
   là 0-4-0, nên override cần 0-4-1 — thêm `body` ở đầu mới thắng. */
body .js-banner-top .swiper-slide:nth-child(n) .review-item_content {
  top: auto;
  bottom: 0;
}

/* Bỏ dòng mô tả phụ trong khối chữ của banner (user chốt 06/08).
   Ẩn bằng CSS chứ không xoá trong ACF: dữ liệu của khách vẫn còn nguyên, muốn hiện
   lại chỉ cần gỡ rule này — không phải đi nhập lại chữ.
   Chỉ có slide 5 ("Spa đồ hiệu tại nhà") đang dùng .desc, nhưng viết cho cả khối để
   sau này khách thêm mô tả ở slide khác cũng không lệch kiểu. */
body .js-banner-top .review-item_content .desc {
  display: none;
}

/* =====================================================================
   UX9 — Cụm nút liên hệ nổi: khoảng cách 1.2rem, nút 4rem   (06/08/2026)
   ---------------------------------------------------------------------
   Trước: gap 1.6rem và nút 5.6rem ở desktop; ở <=768px là 1.2rem / 4.4rem.
   Nay thống nhất MỘT cỡ cho mọi khổ màn theo yêu cầu.

   Dùng `body` ở đầu (0-1-1) để thắng cả rule gốc lẫn rule trong media query
   <=768px của common.css (đều 0-1-0). Media query KHÔNG cộng thêm trọng số,
   nên nếu viết cùng 0-1-0 thì trên mobile vẫn phải trông chờ vào thứ tự nạp.
   ===================================================================== */
body .group-contact {
  gap: 1.2rem;
}

body .group-contact_item {
  width: 4rem;
  height: 4rem;
}

/* =====================================================================
   UX10 — Hàng lọc trang chủ: hiện đủ chip, cho xuống dòng   (06/08/2026)
   ---------------------------------------------------------------------
   `.filter-heading` là flex nowrap: tiêu đề bên trái, danh sách chip bên phải.
   Thiếu flex-wrap thì khi chip nhiều, danh sách bị bóp lại thay vì cho phép
   khối tự xuống dòng ở màn hẹp.

   Trọng số: rule gốc `.filter-heading` (0-1-0) còn một bản trong media query
   <=992px; thêm `body` (0-1-1) để thắng cả hai, không phụ thuộc thứ tự nạp.
   ===================================================================== */
body .filter-heading {
  flex-wrap: wrap;
}

/* =====================================================================
   UX12 — Trang "Sản phẩm bán chạy"                        (06/08/2026)
   ---------------------------------------------------------------------
   Dùng lại y nguyên chip lọc (.l-filter / .l-filter_item) và lưới sản phẩm
   (.m-product_list) của theme để trang mới không lệch phong cách; phần dưới
   chỉ thêm khung cho các nhóm lọc và vài trạng thái riêng.
   ===================================================================== */
/* Trang bán chạy: giảm khoảng trắng đầu trang.
   `.pd-80` của theme đặt padding 8rem trên/dưới (6rem <=1024, 4rem <=576) — dùng
   `.m-product.mona-bc` (0-2-0) để thắng `.pd-80` (0-1-0), và CHỈ đổi phía trên,
   phần dưới vẫn theo utility gốc để khoảng cách với footer không lệch. */
.m-product.mona-bc {
  padding-top: 4rem;
}

.mona-bc_head {
  margin-bottom: 3.2rem;
}

.mona-bc_desc {
  margin-top: 1.2rem;
  max-width: 80rem;
}

/* 25/08/2026 — BỎ KHUNG. Thẻ nền #FAF7F6 bo góc này không tồn tại ở bất kỳ đâu
   khác trên site: trang chủ đặt hàng chip ngay cạnh tiêu đề mục, trang danh mục
   đặt nút "Lọc" + chip đã chọn nằm trần. Giữ nó là trang bán chạy lạc tông. */
.mona-bc_filter {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 0;
  border: 0;
  background: none;
}

/* Từ 768px gộp "Chọn theo tiêu chí" và "Sắp xếp" thành khối hai dòng: nhãn cùng
   một cột, chip cùng một cột — giống cách trang chủ đặt tiêu đề mục cạnh hàng chip.
   🔑 Phải chốt bề ngang nhãn (18rem = vừa "Chọn theo tiêu chí" ở 1.8rem đậm, kèm
   nowrap để nó không xuống hai dòng). Thiếu bước này thì hai hàng chip lệch nhau
   ~9rem, đọc ra hai khối rời chứ không phải một bộ lọc. */
@media (min-width: 768px) {
  .mona-bc_filter {
    flex-direction: row;
    align-items: center;
    gap: 1.6rem;
  }

  .mona-bc_title,
  .mona-bc_sort-label {
    flex: none;
    width: 18rem;
    white-space: nowrap;
  }
}

.mona-bc_group-label {
  margin: 0 0 0.8rem;
  font-size: calc(1.4 * var(--fs));
  font-weight: 600;
  color: #6E6165;
}

/* chip "đang chọn" dùng lại đúng màu trạng thái is-active sẵn có của theme */
.mona-bc_meta {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  margin: 2.4rem 0 1.6rem;
  font-size: calc(1.4 * var(--fs));
  color: #6E6165;
}

.mona-bc_reset {
  color: var(--primaryColor, #710E23);
  text-decoration: underline;
}

.mona-bc_empty {
  padding: 4.8rem 0;
  text-align: center;
}

.mona-bc_empty p {
  margin-bottom: 1.6rem;
}

@media screen and (max-width: 576px) {
  /* Khối đệm/viền cũ đi cùng khung đã bỏ; chỉ còn giãn cách. */
  .mona-bc_filter {
    gap: 1.6rem;
  }
}

/* Lưới sản phẩm của trang bán chạy.
   Chỉ còn khai display:flex + gap. Phần bề ngang thẻ CỐ Ý bỏ trống để thừa hưởng
   thang đo dùng chung của mọi trang sản phẩm (backdoor.css 1441 / 1964 / 2066):
      ≥1201px → calc(3/12*100% - 1.6rem)  = 4 cột
      ≤991px  → calc(4/12*100% - 1.6rem)  = 3 cột
      ≤600px  → calc(50% - 0.8rem)        = 2 cột
   Section này mang sẵn class `.m-product` nên thang đó tự áp vào.

   🔑 ĐÍNH CHÍNH chú thích cũ ở đúng chỗ này (25/08/2026). Bản trước ghi "số đo lấy
   y theo trang danh mục" rồi cắm cứng 4/12 + mốc 768px, nhưng ĐO THẬT trên live ở
   khổ 1440 thì /ket-sat/ ra 4 cột thẻ 262px, còn trang bán chạy ra 3 cột thẻ 358px.
   Tức nó KHÔNG hề giống trang danh mục, và chính khối override này là thứ làm nó
   khác. 4/12 lấy nhầm từ product.css:50 (bản biên dịch cũ) thay vì luật đang thắng
   ở backdoor.css:1441. Gỡ override đi là hai trang khớp nhau, KHÔNG phải chỉnh số
   cho trùng — sau này đổi thang chung một chỗ là cả hai trang đi theo.

   posts_per_page của template-best-seller.php là 12, chia hết cho cả 4, 3 và 2 nên
   không nấc nào sinh hàng cụt. */
.mona-bc .m-product_list {
  display: flex;
  flex-wrap: wrap;
  gap: 3.2rem 1.6rem;
}

/* =====================================================================
   UX15 — Nhãn trên thẻ sản phẩm: bỏ "Best seller", nhãn giảm giá dùng
   ĐÚNG ảnh ruy-băng user gửi, đổi sang màu chủ đạo   (06/08/2026)
   ---------------------------------------------------------------------
   Ảnh gốc: discount-badge-ui-2025.webp, 79x22, màu #D80019.
   Đã đổi màu sang #710E23 theo tỉ lệ độ sáng từng điểm ảnh (nếp gấp vẫn tối
   hơn thân đúng như bản gốc), lưu ở images/product/ribbon-sale.webp — 224 byte.

   🔑 Dùng `border-image` chứ không phải `background-size: 100% 100%`:
   số phần trăm mỗi sản phẩm một khác ("Giảm 7%" vs "Giảm 47%") nên nhãn phải co
   giãn. Kéo giãn cả ảnh thì nếp gấp trái và đuôi khuyết phải bị méo. border-image
   giữ nguyên hai đầu, chỉ giãn phần giữa.

   Lát cắt: trái 10px (nếp gấp), phải 12px (đuôi khuyết chữ V), trên/dưới 0.
   ===================================================================== */
body .article-info_item.best {
  display: none;
}

/* Nhãn nay là con TRỰC TIẾP của .product-item (ra khỏi cả .product-img lẫn
   .product-top — hai khối đó buộc phải giữ overflow:hidden để giấu nút trượt và
   thanh .item-actions). Khối cha mới cần position:relative để nhãn bám đúng. */
body .product-item {
  position: relative;
  overflow: visible;
}

body .article-info {
  right: auto;
  top: 0;
}

/* Ruy-băng nhô LÊN TRÊN mép ảnh, thụt vào 1rem từ trái — theo mẫu user đưa. */
body .article-info_item.sale {
  position: absolute;
  z-index: 5;
  top: -0.6rem;
  left: 0.6rem;
  width: auto;
  min-height: 2.2rem;
  padding: 0.3rem 1.6rem 0.3rem 1rem;
  font-size: calc(1.3 * var(--fs));
  font-weight: 600;
  background-color: transparent;
  border-style: solid;
  border-width: 0 12px 0 10px;
  border-image-source: url("/template/assets/images/product/ribbon-sale.webp");
  border-image-slice: 0 12 0 10 fill;
  border-image-width: 0 12px 0 10px;
  border-image-repeat: stretch;
}

/* Nhãn nhô ra ngoài khung ảnh nên bị `overflow: hidden` của swiper cắt mất.
   Nới đệm rồi kéo lề âm đúng bằng đó: vùng nhìn thấy của swiper cao thêm 4rem
   cho nhãn lọt vào, nhưng bố cục xung quanh KHÔNG xê dịch một pixel nào.
   2rem → 4rem ngày 17/08: nhãn mới có cụm 3 vạch nhô lên trên đỉnh 0,78 lần
   chiều cao nhãn, đo được thò 3px qua mép swiper nên bị xén; cộng thêm việc
   nâng --nhan-cao lên 2.4rem thì càng cao hơn. */
body .js-product-section .swiper {
  padding: 4rem 0;
  margin: -4rem 0;
}

/* =====================================================================
   UX17 — Header nhóm theo không gian (BẢN DEMO, bật bằng ?header=moi)
   ---------------------------------------------------------------------
   Thanh ngang liệt kê 5 không gian + "Về chúng tôi". Rê vào một không gian
   thì xổ panel 2 cột: trái là danh mục, phải là danh mục theo thương hiệu.
   Chỉ hiện khi URL có ?header=moi nên không ảnh hưởng header đang chạy.
   ===================================================================== */
.mona-kg {
  display: flex;
  align-items: center;
  gap: 2.8rem;
}

.mona-kg_item {
  position: static;
}

.mona-kg_item > span {
  /* 18/08 theo yêu cầu user: đổi từ `default` sang `pointer`.
     Lý do cũ tôi viết là "không có đích, đừng mời người ta bấm" — đúng ở chỗ 6 mục này
     là <span tabindex="0">, bấm KHÔNG dẫn đi đâu, panel mở bằng rê chuột/chạm.
     Nhưng con trỏ chữ làm chúng trông như chữ chết, trong khi mục "Về chúng tôi" ngay
     cạnh (là <a>) lại có bàn tay — hai mục cùng hàng mà con trỏ khác nhau thì rối hơn.
     Bàn tay cũng là quy ước quen thuộc cho nút mở menu xổ. */
  cursor: pointer;
}

.mona-kg_item > a,
.mona-kg_item > span {
  display: inline-block;
  white-space: nowrap;
}

/* Panel trải hết bề ngang thanh menu, neo theo .header-nav */
.header-nav {
  position: relative;
}

.mona-kg_panel {
  position: absolute;
  top: calc(100% + 0.8rem);
  left: 0;
  right: 0;
  z-index: 30;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.8rem);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
  background: #fff;
  /* 18/08 theo yêu cầu user: bỏ bo góc, panel vuông cạnh.
     (trước: border-radius: 0 0 0.8rem 0.8rem) */
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, 0.14);
}

/* Lớp giả bắc cầu qua khoảng hở 1.2rem giữa mục menu và panel.
   Không có nó thì chuột đi từ chữ xuống panel phải băng qua vùng trống, hover đứt
   và panel đóng sập giữa chừng. Panel nằm BÊN TRONG <li> nên chuột chạm vào cầu
   này vẫn tính là hover của <li> — trạng thái giữ nguyên.
   Cầu chỉ tồn tại khi panel đang mở, vì panel đóng thì visibility:hidden ăn xuống
   cả ::before, không chắn click của thứ khác. */
.mona-kg_panel::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -0.8rem;
  height: 0.8rem;
}

.mona-kg_item--co-panel:hover > .mona-kg_panel,
.mona-kg_item--co-panel:focus-within > .mona-kg_panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mona-kg_panel-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 3.2rem;
  padding: 2.8rem 3.2rem;
}

.mona-kg_col-title {
  margin: 0 0 1.2rem;
  font-size: calc(1.6 * var(--fs));
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6E6165;
}

.mona-kg_col ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 2.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Cột thương hiệu nhiều mục nên chia thành nhiều cột con.
   Dùng auto-fill + minmax thay vì `repeat(3, 1fr)` cứng: tên như
   "Robot hút bụi lau nhà Roborock" rộng 261px, nhét vào ô 224px của lưới 3 cột
   thì chữ tràn đè sang ô bên (đo được 2 mục tràn ở "Chăm sóc sàn nhà" và 2 ở
   "Cửa & An ninh"). Với auto-fill, số cột tự giảm khi tên dài. */
.mona-kg_col--th ul {
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
}

/* Menu của theme đặt white-space: nowrap; ở đây cho phép xuống dòng để tên dài
   không phải phụ thuộc hoàn toàn vào bề rộng cột. */
.mona-kg_col a {
  white-space: normal;
}

.mona-kg_col a {
  display: block;
  padding: 0.2rem 0;
  font-size: calc(1.4 * var(--fs));
  color: #1A1518;
}

.mona-kg_col a:hover {
  color: var(--primaryColor, #710E23);
}

@media screen and (max-width: 1200px) {
  .mona-kg {
    gap: 1.6rem;
  }

  .mona-kg_panel-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem;
  }
}

/* Panel "Thương hiệu": một cột duy nhất nên cho trải rộng thành nhiều cột con,
   khác panel không gian (2 khối Danh mục | Thương hiệu). */
.mona-kg_panel-inner--th {
  grid-template-columns: 1fr;
}

.mona-kg_col--hang ul {
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
}


/* =====================================================================
   Logo thương hiệu trong panel "Thương hiệu" của header mới   (17/08/2026)
   ---------------------------------------------------------------------
   Chỉ ảnh hưởng header mới (`?header=moi`); header thật không có class .mona-kg nào.
   Nối ở CUỐI file và dựng từ chính bản server: bản backdoor.css trên máy local đang
   THIẾU khối `.l-filter_item.view-all` và khối `@font-face` mà server có, nên đẩy file
   local đè lên sẽ xoá mất hai thứ đó.
   ===================================================================== */
.mona-kg_col ul li a {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

/* Ô logo hãng: khung CỐ ĐỊNH, logo co vừa bên trong.
   Tỉ lệ logo lệch nhau rất xa — Tineco gần vuông, Liebherr dài 6,4:1 — nên nếu để ảnh
   tự do thì mỗi dòng một chiều cao, danh sách 26 hãng nhìn lộn xộn. Khung cố định +
   object-fit: contain giữ mọi dòng thẳng hàng mà không cắt mất phần nào của logo. */
.mona-kg_col--hang .mona-kg_logo {
  width: 6rem;
  height: 4rem;
  flex: none;
  object-fit: contain;
  object-position: center;
}

/* Mục đã có logo thì tắt icon nhãn, tránh vẽ cả hai. */
.mona-kg_col--hang li a.co-logo::before {
  content: none;
}

/* Icon nhãn cho hai hãng chưa có logo (Brandson, Hexa) — giữ chỗ để dòng không thụt.
   Vẽ bằng ::before nên không đụng markup, và không thêm request nào (SVG nhúng trong
   CSS, ~360 byte). */
.mona-kg_col--hang li a::before {
  content: "";
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23710E23' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0l-7.2-7.2A2 2 0 0 1 3 12V5a2 2 0 0 1 2-2h7a2 2 0 0 1 1.4.6l7.2 7.2a2 2 0 0 1 0 2.6Z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3' fill='%23710E23' stroke='none'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 🔑 PHẢI NHẮM THẲNG VÀO <span>, ĐỔI MÀU THẺ <a> LÀ VÔ TÁC DỤNG.
   Tên hãng nằm trong <span> bên trong <a>, mà file này có `.header-main span
   { color: #18181B }` gán màu CỨNG cho mọi <span> trong header — màu của <a> không
   thừa kế xuống được. Đo trước khi vá: rê chuột thì <a> đổi sang rgb(113,14,35) đúng
   như mong đợi nhưng <span> vẫn đứng nguyên rgb(24,24,27), khách không thấy gì đổi.
   Ép màu lên <a> kèm !important cũng KHÔNG cứu được, vì vấn đề không phải trọng số
   của <a> mà là <span> có luật riêng.
   Trọng số: chỗ này 0-0-2-2, `.header-main span` chỉ 0-0-1-1 → thắng đủ. */
.mona-kg_col a:hover span {
  color: var(--primaryColor, #710E23);
}

/* Ô ảnh danh mục trong panel header mới   (17/08/2026).
   Nền xám nhạt để ảnh nền trong suốt không chìm vào nền trắng panel; `flex: none` để ô
   không bị bóp khi tên danh mục dài. 38/56 mục có ảnh, mục thiếu thì không in thẻ <img>
   nên chữ thụt sát trái. */
.mona-kg_anh {
  width: 4rem;
  height: 4rem;
  flex: none;
  object-fit: contain;
  border-radius: 0.4rem;
  background-color: #f5f5f5;
}

/* =====================================================================
   UX22 — Nhãn giảm giá có tia sét   (12/08/2026)
   ---------------------------------------------------------------------
   Mẫu user gửi có hai phần: nhãn "Giảm 8%" kèm tia sét, VÀ giá bán nằm trong
   băng đỏ vát chéo. Đã dựng thử cả hai, user xem rồi chốt 12/08: GIỮ NGUYÊN
   phần giá như cũ, chỉ đổi nhãn giảm giá. Phần băng giá đã gỡ bỏ.
   Màu giữ mận #710E23 của site, không lấy đỏ tươi của mẫu.

   ===================================================================== */
/* ---------------------------------------------------------------------
   Nhãn giảm giá — dựng lại 18/08/2026 theo mẫu user đưa.
   ---------------------------------------------------------------------
   THAY TRỌN bản UX22 ngày 17/08 (viên thuốc bo tròn + tia sét vàng + 3 vạch
   động + vệt sáng chạy + lớp nền lệch). Mẫu mới phẳng hoàn toàn: chữ nhật bo
   góc vừa, nền mận đặc, một icon nhãn giá bên trái. User chốt bỏ HẾT trang trí
   và toàn bộ animation.

   Nhờ vậy gỡ được: 3 khối @keyframes, 1 khối @media prefers-reduced-motion, và
   2 file SVG ngoài (nhan-sale-tia-set.svg, nhan-sale-vach.svg) nay không còn ai
   dùng — có thể xoá khỏi máy chủ ở một đợt dọn riêng.

   🔑 Icon vẽ bằng SVG nét, nhúng thẳng dạng data-URI và dùng làm MẶT NẠ chứ
   không phải ảnh nền: mask lấy alpha nên hình tô theo `currentColor`, luôn khớp
   màu chữ. Đổi màu nhãn sau này thì icon tự theo, không phải xuất lại file.
   Bọc trong @supports vì trình duyệt không hỗ trợ mask sẽ vẽ ra ô vuông đặc —
   hỏng còn tệ hơn không có icon (đã vấp đúng lỗi này ở bộ icon header 17/08).

   Kích thước: cao 3.2rem, bo 1rem, chữ 1.4rem — theo mẫu, user đã duyệt.
   --------------------------------------------------------------------- */
body .article-info_item.sale {
  --nhan-cao: 2.8rem;
  position: relative;
  top: 1rem;
  left: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: var(--nhan-cao);
  padding: 0 0.8rem;
  /* Gỡ ruy-băng ảnh nền của bản gốc theme: nếu chỉ đặt background mà quên
     border-image thì ảnh ruy-băng vẫn phủ đè lên nền mới. */
  border: 0;
  border-image: none;
  border-radius: 0.4rem;
  background: #710E23;
  box-shadow: none;
  font-size: calc(1.4 * var(--fs));
  font-weight: 600;
  line-height: 130%;
  color: #fff;
}

/* Icon nhãn giá. `flex: 0 0 auto` để không bị bóp khi chữ dài. */
body .article-info_item.sale::before {
  content: "";
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.6%2013.4%2013.4%2020.6a2%202%200%200%201-2.8%200L2%2012V2h10l8.6%208.6a2%202%200%200%201%200%202.8z%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%221.6%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20.6%2013.4%2013.4%2020.6a2%202%200%200%201-2.8%200L2%2012V2h10l8.6%208.6a2%202%200%200%201%200%202.8z%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%227%22%20r%3D%221.6%22%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* Bản cũ dùng ::after cho cụm 3 vạch — tắt hẳn. */
body .article-info_item.sale::after {
  content: none;
}

/* Trả span về mặc định: bản cũ nhồi padding và overflow vào đây để làm khung
   cắt cho vệt sáng. Không còn vệt sáng thì phải gỡ, nếu không chữ bị thụt trái
   1,36 lần chiều cao nhãn — đúng chỗ tia sét từng nằm. */
body .article-info_item.sale > span {
  position: static;
  display: inline;
  height: auto;
  padding: 0;
  overflow: visible;
  border-radius: 0;
}

body .article-info_item.sale > span::after {
  content: none;
}

@supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  /* Không hỗ trợ mask thì bỏ icon hẳn, đừng để lại ô vuông đặc. */
  body .article-info_item.sale::before {
    display: none;
  }
}

/* Rê chuột vào mục trên thanh header mới thì ĐỔI MÀU   (17/08/2026).

   Đo trước khi làm: KHÔNG có luật :hover nào chạm tới chữ của thanh này — rê
   chuột chữ vẫn nguyên rgb(24,24,27), chỉ độ mờ icon đổi.

   🔑 CHỈ ĐỔI `color` LÀ ĐỦ CHO CẢ CHỮ LẪN ICON, vì icon tô bằng
   `background-color: currentColor` qua mask. Không phải viết thêm quy tắc nào
   cho icon, và cũng không phải xuất lại file mặt nạ theo màu mới.

   🔑 PHẢI NHẮM VÀO <span>, KHÔNG NHẮM VÀO <li>. `.header-main span` gán màu
   CỨNG cho mọi <span> trong header nên màu đặt ở <li> không thừa kế xuống
   được — đúng bẫy đã vấp ở phần đổi màu hover của panel Thương hiệu.
   Trọng số: chỗ này (0,0,2,1) > `.header-main span` (0,0,1,1) nên thắng đủ,
   KHÔNG cần !important.

   Áp cho MỌI mục cấp 1 chứ không riêng 5 mục có icon, để "Thương hiệu" và
   "Về chúng tôi" cũng phản hồi giống nhau. */
.mona-kg_item > a,
.mona-kg_item > span {
  transition: color .2s;
}

.mona-kg_item:hover > a,
.mona-kg_item:hover > span,
.mona-kg_item:focus-within > span {
  color: var(--primaryColor, #710E23);
}

/* H1 trang chủ: đổi từ "giấu chữ" sang ẩn ĐÚNG CHUẨN   (17/08/2026).

   header.php in ra <h1 class="hide-sitename"> chứa mô tả có từ khoá, còn
   mona-custom.css ẩn nó bằng `visibility:hidden; height:0; width:0`. Đo trên
   live: khung 0×0, visibility hidden — đó là kiểu GIẤU CHỮ, và hệ quả là trang
   chủ không có H1 nào nhìn thấy được.

   Kỹ thuật dưới đây (visually-hidden) giữ chữ VÔ HÌNH VỚI MẮT y như cũ nhưng
   trình đọc màn hình và công cụ tìm kiếm vẫn đọc bình thường — không còn là
   giấu chữ. Giao diện KHÔNG đổi một pixel: phần tử bị kéo ra khỏi luồng bằng
   position:absolute nên không chiếm chỗ.

   🔑 PHẢI ĐẶT Ở ĐÂY CHỨ KHÔNG SỬA mona-custom.css: file đó nạp với `?ver=4.2.7`
   CỐ ĐỊNH kèm max-age 7 ngày, sửa trong đó thì khách cũ vẫn thấy bản cũ suốt
   một tuần. backdoor.css có cache-busting theo filemtime.

   🔑 PHẢI TRẢ LẠI `visibility: visible`: luật gốc đặt hidden, mà visibility là
   thuộc tính THỪA KẾ — không trả lại thì chữ vẫn vô hình với cả trình đọc màn
   hình, tức không sửa được gì. */
body .hide-sitename {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  visibility: visible;
}

/* =====================================================================
   Bộ lọc trang "Sản phẩm bán chạy" — dựng lại 18/08/2026 theo mẫu user đưa.
   ---------------------------------------------------------------------
   TRƯỚC: 4 nhóm luôn mở, ~33 chip mận ĐẶC chữ hoa, cao gần 600px.
   NAY  : 3 chip thu gọn viền nhạt, bấm xổ panel chọn nhiều; "Sắp xếp" tách riêng.

   🔑 MÀU: mẫu dùng đỏ tươi, ở đây lấy MẬN #710E23 của site cho khớp nhận diện
   (cùng màu với nhãn giảm giá và header). Đổi 3 biến dưới là đổi cả bộ.

   🔑 Panel định vị `absolute` trong `.mona-bc_drop` (position:relative) nên nó
   PHỦ LÊN lưới sản phẩm thay vì đẩy trang giãn ra — đó là điểm chính khiến bố cục
   gọn hẳn so với bản cũ.

   ⚠️ `<summary>` mặc định có marker (mũi tên/tam giác) ở mọi trình duyệt. Phải gỡ
   bằng CẢ HAI cách: `list-style:none` cho Firefox và `::-webkit-details-marker`
   cho Safari — thiếu một cái là lòi tam giác đen cạnh chip.
   ===================================================================== */
/* 25/08/2026 — bảng màu lấy thẳng từ hệ chip của site thay vì bộ xám tự chọn.
   --bc-mau-hover #e41a33 là màu hover đã dùng cho chip trang chủ (backdoor.css:474);
   --bc-vien-nut #dcdcdc là viền nút "Xem tất cả"; --bc-vien-o/--bc-nen-o là viền và
   nền chip trong dropdown trang chủ. */
.mona-bc {
  --bc-mau: var(--primaryColor, #710E23);
  --bc-mau-hover: #e41a33;
  --bc-vien: #E3E3E6;
  --bc-vien-nut: #dcdcdc;
  --bc-vien-o: #e4e4e7;
  --bc-nen-o: #f4f4f5;
  --bc-chu: #18181b;
}

.mona-bc_title {
  margin-bottom: 0;
  font-size: calc(1.8 * var(--fs));
  font-weight: 700;
  color: var(--bc-chu);
}

.mona-bc_chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.mona-bc_drop {
  position: relative;
}

/* ---- chip thu gọn ---- */
.mona-bc_chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  /* 🔑 KHÔNG cắm `height`, dùng ĐỆM như chip trang chủ (.l-filter_item > *:
     `padding: .8rem 1.4rem`). Lý do đo được: live tách hai thang — cỡ chữ chốt
     14px qua var(--fs), còn `rem` là thang BỐ CỤC co theo khổ (root 10px ở 1920
     nhưng 6,95px ở 1201). Cắm `height: 3.4rem` thì chip lùn dần còn chữ đứng yên:
     34px ở 1920 nhưng chỉ 23,6px ở 1201, trong khi chip trang chủ vẫn ~28px —
     hai hàng chip cùng trang mà lệch chiều cao. Đệm thì cao thấp đi cùng nhau.

     Đệm dọc 0.7rem chứ KHÔNG phải 0.8rem như chip trang chủ: chip đó nền đặc,
     KHÔNG viền; chip này có viền 1px trên + dưới. Đo thật: để 0.8rem thì cao hơn
     đúng 2px ở MỌI khổ (34 vs 32 ở 1920, 29,1 vs 27,1 ở 1201). Trừ 0.1rem đệm là
     khớp. Cùng lối tính đã dùng cho nút "Xem tất cả" ở backdoor.css:136. */
  padding: 0.7rem 1.4rem;
  /* 25/08/2026 — góc 0.4rem + viền #dcdcdc + chữ burgundy weight 600: bê nguyên nút
     "Xem tất cả" của hàng lọc trang chủ (.l-filter_item.view-all > a). Trước là viên
     thuốc 999px viền xám chữ đen — không khớp thứ gì trên site.
     🔑 CỐ Ý không cho nền burgundy đặc như chip trang chủ. Lý do đã chốt ở
     backdoor.css:124: chip đặc là MỘT LỰA CHỌN lọc, còn cái này là nút MỞ danh sách;
     cùng nền đỏ thì khách đọc lướt tưởng nó cũng là một danh mục. */
  border: 0.1rem solid var(--bc-vien-nut);
  border-radius: 0.4rem;
  background: #fff;
  font-size: calc(1.4 * var(--fs));
  font-weight: 600;
  /* 25/08/2026 (user chốt) — chữ ĐEN như chip "Sắp xếp" ngay dưới, không phải
     burgundy. Ở trạng thái nghỉ hai hàng chip giờ cùng một tông; burgundy để dành
     cho trạng thái CÓ Ý NGHĨA: hover, đang mở panel, hoặc nhóm đang có lựa chọn
     (xem rule .mona-bc_chip:hover bên dưới). Mũi tên ::after vẽ bằng currentColor
     nên tự đi theo, không phải sửa thêm chỗ nào. */
  color: var(--bc-chu);
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s, color 0.2s;
  list-style: none;                    /* Firefox */
}

.mona-bc_chip::-webkit-details-marker { /* Safari */
  display: none;
}

/* Mũi tên tự vẽ, xoay khi mở — không dùng ký tự để khỏi phụ thuộc font. */
.mona-bc_chip::after {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border-right: 0.15rem solid currentColor;
  border-bottom: 0.15rem solid currentColor;
  transform: translateY(-0.2rem) rotate(45deg);
  transition: transform 0.2s;
}

.mona-bc_drop[open] > .mona-bc_chip::after {
  transform: translateY(0.1rem) rotate(-135deg);
}

.mona-bc_chip:hover,
.mona-bc_drop[open] > .mona-bc_chip,
.mona-bc_drop.is-chon > .mona-bc_chip {
  border-color: var(--bc-mau);
  color: var(--bc-mau);
}

/* Số lượng đang chọn */
.mona-bc_dem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 18/08 theo yêu cầu user: vòng tròn CỐ ĐỊNH 2rem, bỏ padding, chữ 1.2rem.
     Trước là `min-width` + padding để tự nới khi số có 2 chữ số. Nay cố định nên
     hình luôn tròn đều — đổi lại số 2 chữ số phải vừa trong 20px, đã đo ở dưới. */
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--bc-mau);
  font-size: calc(1.2 * var(--fs));
  font-weight: 600;
  color: #fff;
}

/* ---- panel xổ ---- */
.mona-bc_panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.8rem);
  left: 0;
  min-width: 45rem;
  max-width: min(52rem, 90vw);
  padding: 1.6rem;
  /* Bỏ viền, dùng đúng bóng đổ của dropdown trang chủ (.l-filter_more). Viền + bóng
     cùng lúc làm panel nặng hơn hẳn panel trang chủ khi đặt cạnh nhau. */
  border: 0;
  border-radius: 1.2rem;
  background: #fff;
  box-shadow: 0 0.8rem 3.2rem rgba(0, 0, 0, 0.16);
}

.mona-bc_opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  max-height: 34rem;
  /* 18/08 theo yêu cầu user. `hidden auto` = chặn trục ngang, cho cuộn dọc.
     Cần khai TƯỜNG MINH trục ngang: khi một trục là `auto` mà trục kia để
     `visible`, CSS quy định trục `visible` đó bị tính thành `auto` — tức vẫn
     có thể mọc thanh cuộn ngang dù không ai muốn. */
  overflow: hidden auto;
}

/* Ô chọn: checkbox ẩn đi, cái nhìn thấy là viên thuốc bọc ngoài.
   KHÔNG dùng display:none cho input — làm vậy là bàn phím không tới được nó nữa. */
.mona-bc_opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* Viên thuốc nền xám nhạt — đúng chip trong dropdown trang chủ
     (.l-filter_more-list .l-filter_item > *). Trước là nền trắng viền xám, nhìn
     giống ô nhập hơn là lựa chọn bấm được. */
  padding: 0.8rem 1.6rem;
  border: 0.1rem solid var(--bc-vien-o);
  border-radius: 999px;
  background: var(--bc-nen-o);
  font-size: calc(1.4 * var(--fs));
  color: var(--bc-chu);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.mona-bc_opt input {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.mona-bc_opt:hover,
.mona-bc_opt:focus-within {
  border-color: var(--bc-mau);
  background: var(--bc-mau);
  color: #fff;
}

.mona-bc_opt.is-chon,
.mona-bc_opt:has(input:checked) {
  border-color: var(--bc-mau);
  background: var(--bc-mau);
  color: #fff;
}

/* ---- chân panel ---- */
.mona-bc_panel-foot {
  display: flex;
  gap: 1.2rem;
  margin-top: 1.6rem;
}

.mona-bc_btn {
  flex: 1 1 0;
  padding: 1.2rem 1.6rem;
  border-radius: 0.8rem;
  font-size: calc(1.4 * var(--fs));
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s;
}

/* 25/08/2026 — theo .l-filter_more-foot của trang chủ: nút phụ để TRUNG TÍNH
   (viền xám, chữ đen), chỉ nút chính mới mang màu thương hiệu. Trước cả hai nút
   đều burgundy nên không phân được đâu là hành động chính.
   Hover đổi màu nền thay vì giảm opacity — opacity làm cả chữ mờ theo. */
.mona-bc_btn--dong {
  border: 0.1rem solid #d4d4d8;
  background: #fff;
  color: var(--bc-chu);
}

.mona-bc_btn--dong:hover {
  border-color: #a1a1aa;
  background: #fafafa;
}

.mona-bc_btn--xem {
  border: 0.1rem solid var(--bc-mau);
  background: var(--bc-mau);
  color: #fff;
}

.mona-bc_btn--xem:hover {
  border-color: var(--bc-mau-hover);
  background: var(--bc-mau-hover);
}

.mona-bc_xoa {
  font-size: calc(1.4 * var(--fs));
  color: var(--bc-mau);
  text-decoration: underline;
}

/* ---- hàng sắp xếp, tách riêng ---- */
.mona-bc_sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  margin-top: 2rem;
}

.mona-bc_sort-label {
  font-size: calc(1.8 * var(--fs));
  font-weight: 700;
  color: var(--bc-chu);
}

.mona-bc_sort-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* Khác chip mở nhóm ở trên: đây MỚI là lựa chọn thật, nên dùng đúng chip lọc của
   trang chủ — góc 0.4rem, chọn = nền burgundy đặc, hover = #e41a33. */
.mona-bc_sort-item > a {
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.4rem;   /* 0.7 chứ không 0.8 — xem chú thích ở .mona-bc_chip */
  border: 0.1rem solid var(--bc-vien-nut);
  border-radius: 0.4rem;
  font-size: calc(1.4 * var(--fs));
  color: var(--bc-chu);
  transition: 0.2s;
}

.mona-bc_sort-item > a:hover {
  border-color: var(--bc-mau);
  background: var(--bc-mau);
  color: #fff;
}

.mona-bc_sort-item.is-active > a {
  border-color: var(--bc-mau);
  background: var(--bc-mau);
  color: #fff;
}

.mona-bc_sort-item.is-active > a:hover {
  border-color: var(--bc-mau-hover);
  background: var(--bc-mau-hover);
}

@media (max-width: 767.98px) {
  .mona-bc_panel {
    min-width: 0;
    width: min(34rem, calc(100vw - 3.2rem));
  }

  /* Bê nguyên UX19 (10/08): ở khổ hẹp theme rút chip xuống 1.2rem + đệm 0.8rem đều
     4 phía. Không làm theo thì chip trang bán chạy to hơn chip trang chủ thấy rõ,
     và 4 mục "Sắp xếp" tràn xuống hai dòng. Mốc .98 để không chồng lấn min-width:768px. */
  .mona-bc_chip,
  .mona-bc_sort-item > a {
    padding: 0.7rem 0.8rem;
    font-size: calc(1.2 * var(--fs));
  }

  .mona-bc_opt {
    padding: 0.6rem 1.2rem;
    font-size: calc(1.2 * var(--fs));
  }
}

/* =====================================================================
   UX30 — DẢI MENU ĐỔI SANG NỀN ĐEN, CHỮ TRẮNG   (19/08/2026)
   ---------------------------------------------------------------------
   Theo ảnh mẫu user gửi. Đảo màu của dải menu (trước là nền TRẮNG + chữ
   #18181B); dải trên GIỮ NGUYÊN nền đỏ #710E23 — user chốt chỉ đổi dải menu.

   PHẠM VI: CHỈ MÀU. Không đụng bố cục, không đụng cỡ chữ, không đụng
   khoảng cách. User đã xem thử bản căn-giữa + giãn chữ 0.08em rồi chốt
   GIỮ CÁCH DÀN CŨ (`space-between`, chữ không giãn) — nên ở đây không có
   một dòng `justify-content` hay `letter-spacing` nào.

   ĐO TRƯỚC KHI LÀM, ba thứ vốn ĐÃ ĐÚNG như ảnh nên KHÔNG đụng tới:
     • chữ đã IN HOA sẵn (`.menu-item { text-transform: uppercase }` ở
       common.css:6024) — thêm `text-transform` ở đây là thừa;
     • cỡ chữ 1.6rem / weight 400 / line-height 150% cũng đã khớp ảnh;
     • nên chiều cao dải giữ ĐÚNG 40px (0.8rem đệm trên + 24px dòng chữ +
       0.8rem đệm dưới). Quan trọng: `--heightHeader` là số GÁN CỨNG
       15.56rem, đổi chiều cao dải là breadcrumb bị header đè ở MỌI khổ màn.
   ===================================================================== */

/* Nền: đổi màu của ::before (lớp tràn 100vw), KHÔNG đặt background lên
   .header-main — .header-main chỉ rộng bằng .container 1216px nên nền sẽ
   đứt ở hai mép màn. Đường kẻ chân dải cũng thành trong suốt: kẻ đen
   rgba(0,0,0,.1) trên nền đen là vô nghĩa, mà nền đen với thân trang trắng
   đã tự tách bạch rồi. */
.header-main::before {
  background-color: #181818;
  border-bottom-color: transparent;
}

/* Chữ trắng.
   🔑 PHẢI NHẮM THẲNG VÀO <span> VÀ <a> CẤP 1, KHÔNG NHẮM VÀO <li>:
   file này có `.header-main span { color: #18181B }` gán màu CỨNG cho MỌI
   <span> trong header, nên màu đặt ở <li> không thừa kế xuống được — đúng
   bẫy đã vấp hai lần trước (panel Thương hiệu 17/08, chữ footer M6 05/08).
   Trọng số chỗ này 0-0-2-1 > `.header-main span` 0-0-1-1 → thắng đủ, KHÔNG
   cần !important.
   🔑 Dùng dấu `>` (con TRỰC TIẾP) chứ không phải dấu cách: panel mega-menu
   nằm BÊN TRONG cùng <li> và nền panel là TRẮNG — quét cả con cháu là chữ
   trong panel thành trắng-trên-trắng, mất hút. Đã đo lại sau khi sửa: chữ
   trong panel vẫn rgb(26,21,24). */
.header-main .mona-kg_item > span,
.header-main .mona-kg_item > a {
  color: #fff;
  text-decoration: none;
  text-underline-offset: 0.6rem;
  text-decoration-thickness: 0.1rem;
}

/* Rê chuột / mục đang xem: GIỮ chữ trắng, báo hiệu bằng gạch chân.
   Luật cũ đổi chữ sang --primaryColor #710E23 — trên nền #181818 tỉ lệ
   tương phản chỉ ~1,6:1 (chuẩn WCAG cho chữ thường là 4,5:1), khách rê vào
   là chữ gần như biến mất. Gạch chân dùng text-decoration nên KHÔNG đẩy
   layout (border-bottom thì làm dòng chữ nhích lên 1px).
   🔑 PHẢI CHÈN `.menu-list` VÀO GIỮA — ĐO RỒI MỚI BIẾT, ĐỪNG BỎ ĐI.
   Bản đầu tôi viết `.header-main .mona-kg_item:hover > a` (0-0-3-1) và tưởng
   là đủ. KHÔNG đủ: dòng 977 phía trên có
       `.header-main .menu-list > li > a:hover`  =  0-0-3-2
   (ba class .header-main/.menu-list/:hover + HAI thẻ li và a) nên nó thắng,
   và "Về chúng tôi" vẫn đỏ #710E23 khi rê chuột — tức gần như vô hình trên
   nền đen. Chèn `.menu-list` đẩy chỗ này lên 0-0-4-1 > 0-0-3-2.

   ⚠️ CHỈ "Về chúng tôi" DÍNH, nên rất dễ lọt lưới: nó là mục cấp 1 DUY NHẤT
   dùng thẻ <a> (có đích để đi), sáu mục còn lại là <span tabindex="0"> chỉ để
   mở panel — mà luật cũ nhắm vào `a`. Rê thử một mục bất kỳ trong sáu mục kia
   sẽ thấy trắng và tưởng đã xong. Lần sau đo hover phải đo ĐÚNG mục <a>. */
.header-main .menu-list > .mona-kg_item:hover > span,
.header-main .menu-list > .mona-kg_item:hover > a,
.header-main .menu-list > .mona-kg_item:focus-within > span,
.header-main .menu-list > .mona-kg_item:focus-within > a,
.header-main .menu-list > .mona-kg_item.current-menu-item > a,
.header-main .menu-list > .mona-kg_item.current-menu-parent > a,
.header-main .menu-list > .mona-kg_item.current-product-ancestor > a {
  color: #fff;
  text-decoration: underline;
}

/* =====================================================================
   H2 — GIẾT CLS 0,123 DO FONT ĐỔI MUỘN   (19/08/2026)
   ---------------------------------------------------------------------
   Đo trước khi làm (bài /kich-thuoc-ket-sat/, khổ 390px, so "có SF Pro" với
   "chặn hẳn file font"): SF Pro HẸP hơn font dự phòng, nên mỗi đoạn văn rụng
   một dòng khi font về. Thẻ <h2> ngay trong màn hình đầu nhảy 25,6px = đúng
   1 dòng; càng xuống dưới càng dồn, tới −166px; cả trang lệch 372px. 18 khối
   @font-face đều `font-display: swap` nên chuyện này xảy ra CHẮC CHẮN, không
   phải thỉnh thoảng.

   CÁCH XỬ: khai font dự phòng ẢO khớp metric với SF Pro. Chữ vẽ lần đầu đã
   chiếm đúng số chỗ SF Pro sẽ chiếm nên lúc đổi font KHÔNG dồn dòng.
   Tốn 0 byte tải thêm, không đụng font-display.

   ⚠️ KHÔNG chọn preload 2 file font (124 KB): ảnh LCP của mẫu bài viết vừa kéo
   được về ~2.520ms, NẰM NGAY TRÊN vạch 2.500ms — nhét thêm 124 KB tranh băng
   thông đúng đoạn đó là đổi chỉ số xấu này lấy chỉ số xấu khác.
   ⚠️ KHÔNG dùng font-display: optional — máy chậm mất hẳn font thương hiệu.

   ⚠️ NEO VÀO ARIAL: `system-ui` trên Mac CHÍNH LÀ SF Pro (đo được trùng khít
   4252,25px) nên lấy nó làm mốc thì trên Mac số nào cũng "đúng" mà Windows và
   Android vẫn lệch. Arial có thật trên Windows lẫn Mac; Android thay bằng
   Roboto nên còn sai số nhỏ — chấp nhận được.

   🔑 PHẢI TÁCH HAI FACE THEO ĐỘ ĐẬM — ĐÃ VẤP MỘT LẦN: bản đầu tôi khai MỘT
   face `font-weight: 100 900`. Khai như vậy là nói với trình duyệt "face này
   lo hết mọi độ đậm", nên chữ ĐẬM cũng lấy Arial THƯỜNG và không được làm đậm
   giả. Kết quả đo: chữ đậm trong bản dự phòng hẹp hơn hẳn, tiêu đề rụng dòng,
   và lúc SF Pro Bold về thì nội dung DÀI RA — lệch +57px, tức đổi lỗi cũ lấy
   lỗi mới ngược dấu. Đo riêng từng độ đậm mới ra hai hệ số khác nhau:
       SF ÷ Arial ở weight 400 = 0,9305   |   ở weight 700 = 0,9424
   ===================================================================== */
@font-face {
  font-family: 'SFProDisplay-duphong';
  src: local('Arial'), local('Helvetica Neue'), local('Roboto');
  size-adjust: 93.05%;
  /* ascent/descent thật của SF Pro là 95%/24% em; chia lại cho size-adjust để
     sau khi bị co còn 93,05% thì hộp dòng cao ĐÚNG bằng SF Pro (đo: 119/119). */
  ascent-override: 102.10%;
  descent-override: 25.79%;
  line-gap-override: 0%;
  font-weight: 100 500;
  font-style: normal;
}

@font-face {
  font-family: 'SFProDisplay-duphong';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Neue Bold'), local('Roboto Bold');
  size-adjust: 94.24%;
  ascent-override: 100.81%;
  descent-override: 25.47%;
  line-gap-override: 0%;
  font-weight: 600 900;
  font-style: normal;
}

/* 🔑 PHẢI LÀ `html:root` (0-0-1-1), KHÔNG PHẢI `:root` (0-0-1-0):
   `--font-pri` được khai lại trong `:root` của 12/13 file CSS theme, mà
   news.css/product.css/home.css… nạp SAU backdoor.css — dùng `:root` thì khối
   này bị ghi đè ngược về stack cũ và bản vá thành vô tác dụng.
   (Đúng bẫy đã ghi lại từ đợt đổi font 05/08.) */
html:root {
  --font-pri: 'SFProDisplay', 'SFProDisplay-duphong', sans-serif;
}

/* ---------------------------------------------------------------------
   Nhãn giảm giá — thu nhỏ RIÊNG TRÊN ĐIỆN THOẠI   (19/08/2026)
   ---------------------------------------------------------------------
   Theo yêu cầu user: desktop giữ nguyên cỡ cũ (2.8rem / chữ 1.4rem / icon
   1.6rem), chỉ điện thoại nhỏ lại. Mốc 576px là mốc điện thoại của chính
   theme — common.css dùng nó 194 lần, nhiều gấp đôi mọi mốc khác.

   🔑 PHẢI KHAI LẠI `min-height`, KHÔNG THÌ `--nhan-cao` DƯỚI 2.2rem KHÔNG ĂN.
   Khối ruy-băng gốc của theme (cũng là `body .article-info_item.sale`, nằm
   TRÊN trong file này) có `min-height: 2.2rem`. Khối UX27 không khai lại thuộc
   tính đó nên nó vẫn còn hiệu lực và CHẶN SÀN chiều cao ở 22px. Hồi để 2.8rem
   thì không ai thấy vì 28px > 22px; hạ xuống 2rem mới chạm sàn — đo được nhãn
   vẫn ra ĐÚNG 22px trong khi mã ghi 20px. Buộc min-height bám theo biến để con
   số viết ra là con số hiện lên.
   --------------------------------------------------------------------- */
@media screen and (max-width: 576px) {
  body .article-info_item.sale {
    --nhan-cao: 2rem;
    min-height: var(--nhan-cao);
    top: 0.6rem;
    left: 0.6rem;
    font-size: calc(1.2 * var(--fs));
  }

  body .article-info_item.sale::before {
    width: 1.2rem;
    height: 1.2rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Yêu cầu 20/08/2026 — ba chỉnh dưới khổ điện thoại (<=600px)

   MỐC 600px, KHÔNG phải 576px hay 992px. Lý do nằm ở mục 3: `--heightHeader`
   là số GÁN CỨNG 8rem = 80px, trong khi header THẬT đo được là 63px ở <=600px
   nhưng 94px ở dải 601-992px. Bỏ phần "+1.6rem" ở dải 601-992px là chừa 80px
   cho một header 94px -> nội dung chui xuống dưới header.

   🔑 MỤC 3 CHỈ ÁP TRANG CHỦ nên KHÔNG phải đụng khối bù trừ -3.32rem ở trên.
   Khối đó kéo `.breadcrumb`/`.banner-sub` đầu trang lên để nuốt phần đệm dư —
   mà trang chủ không có hai khối đó làm con đầu (đã đo: selector trả về null),
   nên `.main` của trang chủ giảm 1.6rem không kéo theo gì cả.
   ⚠️ Nếu sau này muốn áp mục 3 cho TOÀN SITE thì BẮT BUỘC sửa -3.32rem thành
   -1.72rem, không thì hai khối đó đè vào header ở 6 loại trang.

   Mục 1 và 2 không cần giới hạn theo trang: `.js-pd-top` và `.pd-basic` chỉ
   xuất hiện trên trang chủ (đã kiểm 6 loại trang).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* 1. Slider sản phẩm: hiện 2,5 thẻ thay vì 2 (thẻ thứ ba ló ra làm gợi ý vuốt).
        Đè rule width:50% của common.css ở <=576px. */
  .js-pd-top .swiper-slide {
    width: calc(100% / 2.5);
  }

  /* 2. Tên sản phẩm ở thẻ cơ bản: 1.6rem -> 1.4rem.
        Selector này (0,3,0) đặc hiệu hơn `.product-item .article-title` (0,2,0)
        vốn đang đặt 1.6rem, nên thắng bất kể thứ tự. */
  .product-item.pd-basic .article-title {
    font-size: calc(1.4 * var(--fs));
  }

  /* 3. RIÊNG TRANG CHỦ: chừa đúng --heightHeader, không cộng thêm 1.6rem.
        Đo được: header thật 63px, --heightHeader 80px -> vẫn dư 17px.
        `body.home main.main` (0,2,2) đặc hiệu hơn `.main` (0,1,0) ở trên. */
  body.home main.main {
    padding-top: calc(var(--heightHeader));
  }

  /* 4. Banner đầu trang: tỉ lệ khung 1.26.
        CẦN `!important` thật — không phải thừa: `common.css` đang đặt
        `aspect-ratio: 1.46 !important` ở <=992px, và `backdoor.css` (UX8 06/08)
        đặt `aspect-ratio: 90.8/34` cho `body .js-banner-top .swiper-slide:nth-child(n)`
        với đặc hiệu (0,3,1). Khối này ở <=600px nằm sau trong cùng file nên thắng
        cả hai khi cùng có `!important`. */
  .js-banner-top .swiper-slide {
    aspect-ratio: 1.26 !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Mục 5 (20/08/2026) — khoảng cách giữa các khối ở khu m-list, khổ <=576px.
   Mốc 576px do user chỉ định, KHÁC mốc 600px của bốn mục trên.

   🔑 Dùng `body .m-list_inner` chứ KHÔNG phải `.m-list_inner` trần:
   `home.css` đặt `gap: 3.2rem` cho cùng selector ở cùng mốc <=576px, mà
   `home.css` nạp SAU `backdoor.css` — thứ tự thật đo trên live:
       woocommerce.css → common.css → backdoor.css → home.css
   Cùng đặc hiệu (0,1,0) thì file sau thắng, nên rule ở đây phải mạnh hơn.
   `body .m-list_inner` là (0,1,1) → thắng bất kể thứ tự, và không cần `!important`.

   Đo được: gap 32px → 16px ở <=576px; từ 577px trở lên giữ nguyên 16px.
   ───────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 576px) {
  body .m-list_inner {
    gap: 1.6rem;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Bố cục co giãn cho dải 1201-1728px, CHỮ ĐỨNG YÊN (yêu cầu 21/08/2026).
   Thiết kế gốc dựng ở 1728px với html{font-size:10px}; công thức 100vw/172.8
   cho đúng 10px tại 1728px rồi co tuyến tính xuống 6,95px tại 1201px.

   🔑 HAI CẦN GẠT, TRƯỚC ĐÂY LÀ MỘT:
     · html font-size   → đơn vị BỐ CỤC (padding/margin/gap/width... vẫn dùng rem)
     · --fs             → đơn vị CHỮ (font-size/letter-spacing dùng calc(X*var(--fs)))
   Bản 20/08 chỉ có một cần gạt nên phải chặn sàn 9px để chữ khỏi rớt xuống 11,1px,
   và cái sàn đó ĐÓNG BĂNG LUÔN bố cục từ 1555px trở xuống — đúng thứ cần tránh.
   Nay bỏ sàn: bố cục co suốt dải, còn --fs giữ 10px nên chữ y nguyên cỡ thiết kế.

   MUỐN VẶN LẠI THÌ SỬA ĐÚNG MỘT DÒNG `--fs` bên dưới:
     10px                              → chữ đứng yên hoàn toàn (đang dùng)
     max(9.5px, calc(100vw / 172.8))   → chữ co nhẹ, thấp nhất 15,2px
     max(9px,   calc(100vw / 172.8))   → y hệt hành vi bản 20/08
   ───────────────────────────────────────────────────────────────────────────── */
@media screen and (min-width: 1201px) and (max-width: 1728px) {
  html {
    font-size: calc(100vw / 172.8);
    --fs: 10px;
  }
}


/* ─────────────────────────────────────────────────────────────────────────────
   M1 (21/08/2026) — sàn 16px cho ô nhập chữ ở khổ nhỏ.

   Đi KÈM việc bỏ user-scalable=no khỏi thẻ viewport. Lý do phải làm cùng lúc:
   iOS Safari TỰ PHÓNG cả trang khi người dùng chạm vào ô nhập có cỡ chữ dưới
   16px, rồi không tự thu lại. Nỗi sợ đó chính là cớ để theme khoá phóng to cả
   site — nhưng khoá phóng to là lỗi tiếp cận (WCAG 2.1 mục 1.4.4 đòi phóng
   được tới 200%), còn nâng cỡ chữ ô nhập mới là cách xử đúng gốc.

   ĐO TRƯỚC KHI SỬA (khổ 375px, tính cả ô đang ẩn trong popup):
     · input[tel] của Contact Form 7      14px   — có ở MỌI trang, 2 ô
     · select.re-select-main ("Sắp xếp")  14px   — trang /san-pham/
     · mọi ô nhập chữ còn lại            ≥16px   — không phải đụng
     · 92 ô checkbox                    13,3px   — KHÔNG liên quan: iOS chỉ tự
       phóng ở ô nhập chữ và <select>, không phóng ở checkbox/radio.

   Dùng calc(1.6 * var(--fs)) chứ không phải 16px cứng, để ăn theo cùng cần gạt
   cỡ chữ của site; ở khổ ≤1024px thì --fs luôn là 10px nên ra đúng 16px.
   Cố ý KHÔNG đụng checkbox/radio để không làm to ô tích.
   ───────────────────────────────────────────────────────────────────────────── */
@media screen and (max-width: 1024px) {
  body input[type="text"],
  body input[type="tel"],
  body input[type="email"],
  body input[type="url"],
  body input[type="search"],
  body input[type="number"],
  body input[type="password"],
  body input:not([type]),
  body textarea,
  body select,
  /* 🔑 Phải có nhánh .form-group: common.css đặt `.form-group select` = 1.4rem ở
     khổ ≤800px, đặc hiệu (0,1,1) — thắng `body select` (0,0,2) của nhánh trên.
     Nhánh này (0,2,1) mới đè được. Đo bằng cách duyệt CSSOM tìm rule khớp thật,
     không đoán từ đọc file. Kèm .select2 để hộp chọn do JS dựng khớp cỡ chữ. */
  body .form-group input,
  body .form-group textarea,
  body .form-group select,
  body .form-group .select2 {
    font-size: calc(1.6 * var(--fs));
  }
}

/* ==========================================================================
   [2026-08-28] Mục lục bài viết (Easy TOC + .postdt-toc) — icon mũi tên phình
   --------------------------------------------------------------------------
   TRIỆU CHỨNG: trong mục lục cạnh bài viết, các mục cấp 2 ("2. …", "3. …")
   hiện HAI mũi tên đen khổng lồ ~207×124px chèn giữa danh sách.
   Ví dụ: /khoa-cua-thong-minh-cao-cap-chon-theo-loai-cua/

   NGUYÊN NHÂN 1 — icon cấp 2/3 không khớp rule kích thước nào:
     common.css chỉ định cỡ bằng `#ez-toc-container .ez-toc-list > * > img`.
     Class `.ez-toc-list` CHỈ có trên <ul> cấp 1; các <ul> con mang
     `.ez-toc-list-level-2` / `-level-3` nên KHÔNG khớp → icon rơi về rule
     toàn cục `img { width: 100% }` ở đầu common.css và giãn hết bề ngang cột
     theo tỉ lệ file arr_down_nobg.svg (10×6).
     Đo trên live 1440px: li cấp 1 = 10×8,3px ✅ · li cấp 2 = 206,7×124px ❌

   NGUYÊN NHÂN 2 — icon bị chèn TRÙNG, và cái đầu tiên bấm không ăn:
     SideModule.js (dòng 62-81) dùng `$(this).find("ul").closest('li')`
     (find lấy cả <ul> cháu) trong `.each()` chạy trên MỌI `.ez-toc-page-1`,
     nên li cấp 2 được append <img> hai lần. Tệ hơn: vòng lặp của li cấp 1 đã
     gắn handler click cho icon đó rồi, vòng lặp của chính li cấp 2 gắn thêm
     lần nữa → slideToggle chạy 2 lần triệt tiêu nhau.
     Nghiệm thu bằng click thật: icon #1 KHÔNG đổi trạng thái, icon #2 mới
     đóng/mở được. Vì vậy phải ẩn cái ĐẦU và giữ cái CUỐI, không làm ngược.

   Vá bằng CSS để khỏi đụng SideModule.js — file đó còn điều khiển
   overlay-news / .postdt-right. Sửa gốc ở JS ghi thành việc tồn đọng.
   ========================================================================== */

/* 1. Trả cỡ đúng cho MỌI icon trong mục lục, không phụ thuộc cấp.
      Số liệu lấy y nguyên từ rule cấp 1 trong common.css. */
#ez-toc-container li > img {
  margin-top: 0.8rem;
  width: 1.2rem;
  height: 1rem;
  flex-shrink: 0;
  cursor: pointer;
}

/* 2. Ẩn icon chèn trùng. Giữ cái CUỐI vì đó là cái còn bấm được (xem
      NGUYÊN NHÂN 2). Li cấp 1 chỉ có 1 icon nên nó là :last-of-type,
      không bị ảnh hưởng. */
#ez-toc-container li > img:not(:last-of-type) {
  display: none;
}

/* 3. Li cấp 2/3 vốn là block nên icon sẽ rơi xuống dòng riêng. Cho nó cùng
      bố cục với li cấp 1 (`#ez-toc-container .ez-toc-list > *` trong
      common.css) để icon nằm bên phải chữ.
      `#ez-toc-container ul ul { width: 100%; order: 1 }` đã có sẵn nên danh
      sách con vẫn tự xuống dòng dưới. */
#ez-toc-container ul ul li:has(> img) {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}



/* ==== M9-LCP-BO-AOS-HERO-VE-CHUNG-TOI-20260909 : BAT DAU ====

   VẤN ĐỀ ĐO ĐƯỢC (Lighthouse mobile 05/09/2026): /ve-chung-toi/ 82 điểm, LCP 3,8s
   trong khi ngân sách là 2,5s — riêng LCP làm mất 11 điểm.

   Phần tử LCP là ảnh hero: section.t-img_top > div.container > ... > img
   Bản vá M4 (21/08) đã dọn xong phần TẢI ảnh (gỡ lazy, fetchpriority=high, sizes
   đúng khung). Ảnh nay chỉ 38,6 KB dạng WebP. Nhưng LCP vẫn 3,8s.

   Phần còn lại là phần VẼ, và nguyên nhân nằm trong aos.css:

       html:not(.no-js) [data-aos^=fade][data-aos^=fade] { opacity: 0 }
       html:not(.no-js) [data-aos^=fade][data-aos^=fade].aos-animate { opacity: 1 }

   Khối hero mang data-aos="fade-up", nên trình duyệt giữ nó ở opacity:0 cho tới khi
   aos.js gắn class .aos-animate. Mà aos.js nạp bằng defer — tức phải đợi phân tích
   xong toàn bộ HTML rồi mới chạy. Ảnh đã tải về từ lâu mà KHÔNG ĐƯỢC PHÉP VẼ.
   Trình duyệt chỉ tính LCP khi phần tử thực sự hiện ra.

   Cùng cơ chế đã làm trang chủ LCP 8,6 → 3,74s khi gỡ data-aos hồi 04/08 (H2).
   Trang này chưa được áp.

   ═══ CỐ Ý CHỈ NHẮM ĐÚNG KHỐI HERO ═══

   Trang có 11 khối data-aos. 10 khối kia nằm DƯỚI màn hình đầu — hiệu ứng ở đó
   không đụng tới LCP, nên giữ nguyên. Chỉ khối .t-img_top (khối duy nhất trong màn
   hình đầu, chứa H1 và ảnh LCP) bị tắt hiệu ứng.

   ⚠️ ĐÁNH ĐỔI HÌNH THỨC THẬT: khối tiêu đề + ảnh ở đầu trang Giới thiệu sẽ hiện ra
   ngay thay vì trượt lên mờ dần. Các khối còn lại vẫn trượt như cũ.

   ═══ VÌ SAO ĐẶT Ở backdoor.css ═══

   backdoor.css có cache-busting theo filemtime (mona-ux-css-ver.php) nên khách cũ
   thấy ngay; mona-custom.css thì kẹt ?ver=4.2.7 + max-age 7 ngày.
   Thứ tự nạp: aos.css → common.css → backdoor.css → about.css, nên khối này nằm
   SAU aos.css. !important để chắc chắn, dù đặc hiệu đã thắng sẵn.

   ═══ HOÀN TÁC ═══
   Xoá nguyên khối giữa hai dòng BAT DAU / KET THUC rồi purge page cache W3TC.
*/
body.p-about .t-img_top > .container[data-aos] {
  opacity: 1 !important;
  -webkit-transform: none !important;
  transform: none !important;
  transition: none !important;
}
/* ==== M9-LCP-BO-AOS-HERO-VE-CHUNG-TOI-20260909 : KET THUC ==== */

/* ─── Đánh giá: sản phẩm chưa có đánh giá nào (thêm 16/09/2026) ───────────────
   Giấu "0,0", 5 sao rỗng và bảng histogram 0% — khoe số 0 là tự bắn vào chân.
   GIỮ nguyên nút "Đánh giá sản phẩm" (.cr-summaryBox-add-review) để khách vẫn
   viết được. Không tắt được bằng tham số shortcode vì CusRev in nút chung hộp
   với bảng thống kê. */
.mona-chua-co-danh-gia .cr-overall-rating-wrap,
.mona-chua-co-danh-gia .ivole-summaryBox,
.mona-chua-co-danh-gia .cr-summary-separator,
.mona-chua-co-danh-gia .cr-summary-separator-side {
  display: none !important;
}
.mona-chua-co-danh-gia .cr-summaryBox-wrap {
  justify-content: center;
}

/* ==========================================================================
   Giao diện khối lọc theo mockup 23/09/2026
   Nền trang giữ trắng như cũ; chỉ dựng lại tiêu đề section, thẻ danh mục,
   chỉ báo chọn ở logo thương hiệu và gộp hàng H2 + sắp xếp + đếm kết quả.
   Mọi selector bọc trong .m-product_* vì product.css nạp SAU file này.
   ========================================================================== */

/* --- Tiêu đề section --------------------------------------------------- */
.m-product_category .category-block,
.m-product .m-section-head {
  position: relative;
}

/* Bỏ display:none ở trên để hiện tiêu đề "Danh mục sản phẩm nổi bật" */
.m-product_category .category-heading {
  display: block;
  padding: 0 14rem 1.6rem 0;
  border-bottom: 0;
  /* product.css gắn click thu gọn cả khối danh mục (CategoryModule.js) — mockup
     không có hành vi đó, chặn ở CSS để khỏi sửa JS dùng chung. */
  pointer-events: none;
  cursor: default;
}

.m-product_category .category-heading::before {
  content: none;
}

.m-product_category .category-heading .category-title,
.m-product .m-section-head_title {
  position: relative;
  max-width: 100%;
  padding-left: 1.6rem;
  color: #18181b;
  font-size: calc(2 * var(--fs));
  font-weight: 700;
  line-height: 1.4;
}

.m-product_category .category-heading .category-title::before,
.m-product .m-section-head_title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 0.4rem;
  height: 1em;
  border-radius: 0.2rem;
  background: var(--primaryColor);
}

/* .m-product_box là flex column có sẵn gap 3.2rem giữa các con, nên margin dương ở đây
   bị CỘNG THÊM. Kéo âm để khoảng cách tiêu đề → hàng logo còn 1.6rem. */
.m-product .m-section-head {
  margin: 0 0 -1.6rem;
}

.m-product .m-section-head_desc {
  margin: 0.4rem 0 0 1.6rem;
  color: #71717a;
  font-size: calc(1.4 * var(--fs));
  line-height: 1.5;
}

/* "Hiển thị thêm / Thu gọn" lên góc phải hàng tiêu đề.
   GIỮ NGUYÊN vị trí trong DOM: handler toggle dò bằng closest('.category-wrapper'). */
.m-product_category .category-sidebar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}

.m-product_category .category-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  color: var(--primaryColor);
  font-size: calc(1.4 * var(--fs));
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

/* Chevron vẽ bằng border để ăn theo màu chữ — các file icon_chev_right.svg/
   icon_plus.svg trong theme có màu cố định (xám / TRẮNG) nên không tô lại được. */
.m-product_category .category-more::after {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-top: 0.2rem solid currentColor;
  border-right: 0.2rem solid currentColor;
  transform: rotate(45deg);
}

/* --- Thẻ danh mục ------------------------------------------------------ */
.m-product_category .category-box {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

.m-product_category .category-box .category-item {
  max-width: none;
  width: auto;
}

.m-product_category .category-box .category-item .checkbox {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: auto;
  min-height: 7.2rem;
  padding: 1.2rem 1.6rem;
  justify-content: flex-start;
}

.m-product_category .category-box .category-item .category-icon {
  flex: 0 0 auto;
  width: 4.8rem;
  height: 4.8rem;
  margin: 0;
  object-fit: contain;
}

.m-product_category .category-box .category-item .checkbox-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
}

.m-product_category .category-box .category-item .checkbox-text {
  max-width: none;
  color: #27272a;
  font-size: calc(1.5 * var(--fs));
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
}

/* Số đếm thành viên thuốc thay cho "(47)" */
.m-product_category .category-box .category-item .checkbox-qty {
  margin: 0;
  padding: 0.2rem 0.9rem;
  border-radius: 999px;
  background: #fbe9ec;
  color: var(--primaryColor);
  font-size: calc(1.2 * var(--fs));
  font-weight: 600;
  line-height: 1.5;
}

.m-product_category .category-box .category-item .checkbox-arrow {
  flex: 0 0 auto;
  width: 0.7rem;
  height: 0.7rem;
  margin-left: 0.8rem;
  border-top: 0.2rem solid #a1a1aa;
  border-right: 0.2rem solid #a1a1aa;
  transform: rotate(45deg);
  transition: border-color 0.3s, transform 0.3s;
}

.m-product_category .category-box .category-item .checkbox:hover .checkbox-arrow,
.m-product_category .category-box .category-item .checkbox.is-active .checkbox-arrow {
  border-color: var(--primaryColor);
  transform: rotate(45deg) translate(0.15rem, -0.15rem);
}

.m-product_category .category-box .category-item .checkmark {
  border-radius: 1.2rem;
  transition: border-color 0.3s;
}

.m-product_category .category-box .category-item .checkbox:hover .checkmark {
  border-color: var(--primaryColor);
}

/* Danh mục 0 sản phẩm: không có mũi tên, pill xám */
.m-product_category .category-box .category-item.is-disable .checkbox-arrow {
  display: none;
}

.m-product_category .category-box .category-item.is-disable .checkbox-qty {
  background: #f4f4f5;
  color: #a1a1aa;
}

/* --- Logo thương hiệu: chỉ báo chọn ------------------------------------ */
/* Đây là nút lọc bật/tắt chứ không phải link, nên dùng dấu + / ✓
   chứ không phải mũi tên điều hướng. */
.m-product .m-product_brand .brand-item:not(.show-more) {
  position: relative;
  padding-right: 3.2rem;
}

.m-product .m-product_brand .brand-item:not(.show-more)::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.6rem;
  height: 1.6rem;
  background-image: linear-gradient(#a1a1aa, #a1a1aa), linear-gradient(#a1a1aa, #a1a1aa);
  background-size: 1.4rem 0.2rem, 0.2rem 1.4rem;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.6;
  transition: opacity 0.3s;
}

.m-product .m-product_brand .brand-item:not(.show-more):hover::after {
  opacity: 1;
}

/* Đã chọn: dấu ✓ màu thương hiệu. Dùng data-URI vì icon_check.svg của theme màu xanh lá. */
.m-product .m-product_brand .brand-item.is-active::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13 4.5 6.5 11 3 7.5' fill='none' stroke='%23710E23' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain;
  opacity: 1;
}

.m-product .m-product_brand .brand-item.show-more::after {
  content: "";
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin-left: 0.8rem;
  vertical-align: 0.1rem;
  border-top: 0.2rem solid currentColor;
  border-right: 0.2rem solid currentColor;
  transform: rotate(45deg);
}

/* --- Hàng H2 + sắp xếp + đếm kết quả ----------------------------------- */
#ajax_return {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 1.6rem;
}

/* 23/09/2026: ba khối này nay nằm trong MỘT div .m-product_bar (woocommerce/archive-product.php),
   nên chúng canh giữa theo cùng một hàng thay vì mỗi khối tự canh giữa theo chiều cao riêng. */
#ajax_return > .m-product_bar {
  /* Mẫu user 23/09/2026: hàng 1 = tiêu đề | Sắp xếp, hàng 2 = nút Lọc | đếm kết quả.
     [Lọc] và [Sắp xếp] nằm chung hộp .m-result > .m-result_inner nên không tách được về hai hàng
     bằng flex. Hai hộp đó rỗng hoàn toàn (đã đo: không nền/viền/padding/margin) -> cho
     display:contents để con của chúng thành ô của lưới này. */
  order: 1;
  flex: 0 0 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.6rem;
  row-gap: 1.2rem;
  align-items: center;
}

.m-product_bar > .m-result,
.m-product_bar .m-result_inner {
  display: contents;
}

.m-product_bar > .m-product_heading {
  grid-area: 1 / 1;
  margin: 0;
  /* .m-product_heading (1 class) thua .category-title { max-width: 90% } của product.css vì file đó
     nạp SAU backdoor.css; selector 2 class ở đây thắng lại. */
  max-width: 100%;
}

.m-product_bar .m-result_sort {
  grid-area: 1 / 2;
  justify-self: end;
}

.m-product_bar .m-filter {
  grid-area: 2 / 1;
  justify-self: start;
}

.m-product_bar > .m-product_result {
  grid-area: 2 / 2;
  justify-self: end;
  margin: 0;
}

/* Chip "Đã chọn …  Xoá tất cả" (chỉ có khi đang lọc) xuống hàng riêng, trọn bề ngang. */
.m-product_bar .m-result_box {
  grid-area: 3 / 1 / auto / -1;
}

#ajax_return > .m-product_list,
#ajax_return > .pagination,
#ajax_return > .woocommerce-info,
#ajax_return > .woocommerce-no-products-found {
  order: 4;
  flex: 0 0 100%;
  margin-top: 2.4rem;
}

#ajax_return > .pagination {
  order: 5;
}

/* Khối nội dung danh mục (mô tả term) nằm CUỐI trong HTML, nhưng #ajax_return là flex và khối này
   KHÔNG được gán order -> mặc định 0 -> nhảy lên trước cả tiêu đề, đẩy lưới sản phẩm xuống ~3.400px.
   Cho xuống sau phân trang. (23/09/2026)
   Đừng "sửa" bằng cách bỏ order:4 của .m-product_list: lưới cũng về 0 và sẽ nhảy lên TRÊN tiêu đề
   + thanh Lọc/Sắp xếp. */
#ajax_return > .m-product_cat-content {
  order: 6;
  flex: 0 0 100%;
}

/* Icon thẻ trước tiêu đề lưới sản phẩm */
.m-product_heading {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* tag.svg có stroke="black" cố định — dùng mask để tô theo màu thương hiệu */
.m-product_heading_ico {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  background-color: var(--primaryColor);
  -webkit-mask: url("../images/icon/tag.svg") no-repeat center / contain;
  mask: url("../images/icon/tag.svg") no-repeat center / contain;
}

@media screen and (max-width: 768px) {
  .m-product_category .category-heading {
    padding-right: 12rem;
  }

  .m-product_category .category-box .category-item .checkbox {
    min-height: 6.4rem;
    padding: 1rem 1.2rem;
    gap: 0.8rem;
  }

  .m-product_category .category-box .category-item .category-icon {
    width: 4rem;
    height: 4rem;
  }

  /* Phải gắn #ajax_return: rule gốc của lưới nằm ở #ajax_return > .m-product_bar, một class thua nó. */
  #ajax_return > .m-product_bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .m-product_bar > .m-product_heading,
  .m-product_bar .m-result_sort,
  .m-product_bar .m-filter,
  .m-product_bar > .m-product_result,
  .m-product_bar .m-result_box {
    grid-area: auto;
    justify-self: stretch;
  }
}

/* 01/10/2026 — ảnh trong mô tả danh mục: thu gọn thay vì tràn full khung (ảnh 2000px hiện 1128px) */
.m-product_cat-content .mona-content img {
  display: block;
  max-width: min(100%, 600px);
  height: auto;
  margin: 16px auto;
}
.m-product_cat-content .mona-content .wp-caption {
  width: auto !important;
  max-width: min(100%, 600px);
  margin: 16px auto;
}
.m-product_cat-content .mona-content .wp-caption img { margin: 0 auto; }
.m-product_cat-content .mona-content .wp-caption .wp-caption-text { text-align: center; }

/* 01/10/2026 — khung mô tả danh mục rộng full 1128px (dòng ~180 ký tự, khó đọc): thu về 860px, căn giữa.
   Đặt trên chính .m-product_cat-content để mục lục + nội dung + nút "Xem thêm" thu cùng nhau. */
.m-product_cat-content {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}