/*** Import *****/
/* @import url("loading-btn.css"); */
/* @import url("loading-group.css"); */
/* @import url("H-custom.css"); */
/*** End ****/
.blog-info-tag span:before {
  content: ",";
  position: absolute;
  bottom: 6px;
  right: 0;
  height: 100%;
  font-size: 16px;
  width: auto;
  padding-right: 5px;
}
.blog-info-tag span {
  position: relative;
  display: inline-block;
  padding-right: 10px;
}
.blog-info-tag span:last-child:before {
  display: none;
}
/* .wpcf7 form .wpcf7-response-output {
  border: 0;
  margin: 0 auto;
  padding: 0;
  font-weight: bold;
  font-size: 12px;
  position: absolute;
  width: 100%;
} */
.wpcf7 form.sent .wpcf7-response-output {
  color: #46b450;
}
.wpcf7 form.invalid .wpcf7-response-output {
  color: red;
}

/* .popup-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px;
  font-size: 16px;
  color: #666;
}

.popup-loading::after {
  content: "";
  width: 24px;
  height: 24px;
  margin-left: 8px;
  border: 3px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
} */

.d-none {
  display: none;
}

/* AJAX loading state (product archive filter/pagination) */
.is-loading-btn.loading {
  position: relative;
  pointer-events: none;
}

.is-loading-btn.loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6);
  z-index: 2;
}

.is-loading-btn.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -16px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.12);
  border-top-color: rgba(0, 0, 0, 0.5);
  animation: mona-spin 0.8s linear infinite;
  z-index: 3;
}

@keyframes mona-spin {
  to {
    transform: rotate(360deg);
  }
}
#billing_country_field {
  display: none !important;
}
p.no-results {
  font-size: clamp(1.25rem, 1.05rem + 1.2vw, 2.25rem);

  margin: 0 auto;
  text-align: center;
  width: 100%;
}
.bannerv2-des .mona-content {
  color: var(--white);
}

/* ------------------ loading effect for btn add-to-cart ----------------- */

#custom-add-to-ajax.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;

}

/* --------- FIX #2: giãn khoảng cách gạch chân với text trong bài -------- */
/* Gạch chân đang dính sát chân chữ, đè lên dấu tiếng Việt (ạ, ợ, ụ...).
   Dùng em để offset tự co theo font-size (16px desktop / 14px mobile). */

.mona-content a,
.mona-content .custom-link,
.mona-content strong a {
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  text-decoration-skip-ink: auto;
}

/* ------- FIX #4: giá gốc và giá giảm về cùng 1 hàng (card sản phẩm) ------ */
/* WooCommerce xuất <del> (giá gốc) TRƯỚC <ins> (giá đã giảm), xen giữa là các
   <span class="screen-reader-text"> cho trình đọc màn hình. Dùng order để đảo
   thứ tự hiển thị mà không cần đụng vào PHP.
   Chỉ áp cho card sản phẩm (.pduct-desc / .wrap-flex) — giỏ hàng, thanh toán
   và lịch sử đơn dùng .shopcart-pc / .order-item nên không bị ảnh hưởng. */

.pduct-desc .pduct-price,
.wrap-flex .pduct-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* gap hẹp để 2 giá còn đủ chỗ trên card ở lưới nhiều cột */
  gap: 0.6rem;
}

.pduct-desc .pduct-price ins,
.wrap-flex .pduct-price ins {
  order: 1;
  /* trình duyệt mặc định gạch chân thẻ <ins> */
  text-decoration: none;
  font-weight: 600;
  /* không cho vỡ số tiền ra giữa chừng khi card hẹp */
  white-space: nowrap;
}

.pduct-desc .pduct-price del,
.wrap-flex .pduct-price del {
  order: 2;
  font-size: 0.72em;
  font-weight: 400;
  color: var(--color-disabled);
  text-decoration: line-through;
  white-space: nowrap;
}

/* Theme không định nghĩa .screen-reader-text ở đâu cả, đang phụ thuộc hoàn toàn
   vào CSS của WooCommerce. Khai báo lại để nếu file đó không nạp thì phần chữ
   "Giá gốc là..." cũng không rơi vào giữa hàng giá. */
.pduct-price .screen-reader-text {
  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;
}

/* ---- FIX #3: khung "Tin phổ biến" ở sidebar bài viết to hơn ------------- */
/* Cột đã nới 3/12 -> 4/12 trong single.php. Phần dưới phóng to card và làm
   bài đầu danh sách (bài gần nhất) nổi bật hơn các bài cũ. */

.newsdt-list {
  gap: 2rem;
}

/* card thường: ảnh và tiêu đề đều đang quá nhỏ */
.newsdt-list .nws-img {
  width: 12rem;
}

.newsdt-list .nws-desc .tt {
  font-size: 1.5rem;
}

/* bài đầu: chuyển sang dạng dọc, ảnh tràn ngang + tiêu đề lớn */
.newsdt-item.is-feature {
  padding-bottom: 2rem;
  border-bottom: 0.1rem solid var(--border-1);
}

.newsdt-item.is-feature .nws {
  flex-direction: column;
  gap: 1.2rem;
}

.newsdt-item.is-feature .nws-img {
  width: 100%;
  border-radius: 0.8rem;
}

.newsdt-item.is-feature .nws-desc .tt {
  font-size: 1.8rem;
  font-weight: 700;
}

/* Dưới 600px sidebar chiếm trọn bề ngang (rule sẵn có ở 950px), thumb 12rem sẽ
   ăn hết chỗ của tiêu đề trên máy 320-360px -> thu lại một chút. */
@media screen and (max-width: 600px) {
  .newsdt-list .nws-img {
    width: 10rem;
  }
  .newsdt-item.is-feature .nws-desc .tt {
    font-size: 1.6rem;
  }
}