/* Review Style — migrated from Code Snippets #48 */
/* Woo: (8 customer reviews) -> (8) */
a.woocommerce-review-link{
  font-size: 0; /* ẩn toàn bộ text */
}

a.woocommerce-review-link .count{
  font-size: 16px; /* bật lại số */
}

a.woocommerce-review-link::before{ content: "("; font-size: 16px; }
a.woocommerce-review-link::after{ content: ")"; font-size: 16px; }


.wcpr-filter-container .wcpr-filter-button {
    background-color: rgba(0, 0, 0, .03);
    border-color: var(--fs-color-primary);
    color: var(--fs-color-primary);
    border-radius: 5px;
	padding: 10px !important;
}

.wcpr-filter-container .wcpr-filter-button.wcpr-active {
    background: #1b1717;
    color: #fff;
}
.review-form-inner.has-border {
    padding: 1em;
}
.wcpr-filter-container .wcpr-filter-button {
    margin: 10px 0!important;
    width: auto;
}

.wcpr-filter-container {
    border: 0;
    gap: 5px;
    justify-content: space-between;
    margin: 1em 0;
    flex-wrap: nowrap;
}
.wcpr-comment-form-title {
    margin-bottom: 1em;
}


.comment-form label {
    color: #1b1717;
}

/* ===== WCPR Filters: 3 nút cùng style, 1 hàng, responsive ===== */

/* Container: luôn hiện, 3 cột bằng nhau, canh giữa, giới hạn bề rộng */
.wcpr-filter-container{
display:grid !important;                             /* override inline display:none */
 grid-template-columns: repeat(3, minmax(0, 1fr));    /* 3 cột = 3 nút */
 gap:12px;
 max-width: 680px;                                    /* màn rộng => cụm nút gọn ở giữa */
 margin: 16px auto 18px;                              /* canh giữa */
 width: 100%;
}

/* Mỗi nút chiếm full ô của grid */
.wcpr-filter-container > a.wcpr-filter-button,
.wcpr-filter-container > .wcpr-filter-button-wrap{
  width:100%;
  align-items:center;
}

/* Dropdown của "All stars": rộng đúng bằng nút & đồng bộ */
.wcpr-filter-button-wrap{ position:relative; width:100%;}
.wcpr-filter-button-ul{
  position:absolute;
  left:0;
  width:100%;
  background:#fff;
  border-radius:5px;
}

/* Chữ 1 dòng + co giãn theo viewport, vẫn đọc tốt */
.wcpr-filter-container a.wcpr-filter-button,
.wcpr-filter-rating-placeholder{
  white-space: nowrap;         /* không xuống hàng */
  text-wrap: nowrap;           /* spec mới – bổ sung */
  overflow: hidden;            /* nếu quá hẹp, ẩn phần thừa */
  text-overflow: ellipsis;     /* rất hẹp thì hiện … */
  font-size: clamp(12px, 2.2vw, 14px); /* co giãn chữ theo màn hình */
  padding-inline: clamp(10px, 1.8vw, 16px); /* co giãn padding để đủ chỗ */
}


/* Active: giữ đúng cùng style */
.wcpr-filter-container a.wcpr-filter-button.wcpr-active,
.wcpr-filter-button-wrap.wcpr-active .wcpr-filter-rating-placeholder {
  border-color:var(--brand-primary, #1b1717) !important;
  box-shadow:none !important;
}

.wcpr-filter-rating-placeholder {
	color:#fff}

/* Màn rất nhỏ: siết gap & font */
@media (max-width: 360px){
  .wcpr-filter-container{ gap:8px; }
  .wcpr-filter-container a.wcpr-filter-button,
  .wcpr-filter-rating-placeholder{
    font-size:12px;
    padding-inline:8px;
  }
}

/* === Rating filter: dropdown bằng đúng width nút 'All stars' === */

/* Bọc nút + dropdown */
.wcpr-filter-button-wrap.wcpr-filter-button {
  position: relative;
}

/* List dropdown luôn rộng = nút All stars */
.wcpr-filter-button-wrap.wcpr-filter-button .wcpr-filter-button-ul {
  width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box;
}

/* Mỗi option  (All stars, 5 stars, 4 stars, ...) full-width */
.wcpr-filter-button-wrap.wcpr-filter-button .wcpr-filter-button-ul li,
.wcpr-filter-button-wrap.wcpr-filter-button .wcpr-filter-button-ul li a,
.wcpr-filter-button-wrap.wcpr-filter-button .wcpr-filter-button-ul li button {
  display: block;
  width: 100% !important;
  box-sizing: border-box;
  text-align: center;
}

/* Remove border of review form (Flatsome) */
.single-product #reviews .review-form-inner.has-border{
  border: 0 !important;
  box-shadow: none !important;
}

/* Nếu Flatsome vẽ viền bằng pseudo-element */
.single-product #reviews .review-form-inner.has-border:before,
.single-product #reviews .review-form-inner.has-border:after{
  border: 0 !important;
  box-shadow: none !important;
  content: none !important;
}

/* ================================
   Woo Reviews: header 1-row + meta above stars + full-width body
   Works with your HTML structure (.comment_container, .avatar, .meta, .star-rating, .wcpr-review-title, .description)
================================ */

/* Tùy chỉnh nhanh */
:root{
  --review-avatar: 20px;
  --review-gap: 5px;
}

/* ---- Base: sắp xếp meta nằm trên sao (fallback dùng flex) ---- */
.woocommerce #reviews #comments ol.commentlist li.review .comment_container{
  display: flex;
  gap: var(--review-gap);
  align-items: flex-start;
}

.woocommerce #reviews #comments ol.commentlist li.review .comment_container > .flex-col{
  flex: 0 0 var(--review-avatar);
  width: var(--review-avatar);
}

.woocommerce #reviews #comments ol.commentlist li.review .comment_container img.avatar{
  width: var(--review-avatar);
  height: var(--review-avatar);
  border-radius: 999px; /* nếu muốn avatar tròn */
  display: block;
}

.woocommerce #reviews #comments ol.commentlist li.review .comment-text{
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Meta (tên + verified + ngày) lên trước sao */
.woocommerce #reviews #comments ol.commentlist li.review .comment-text .meta{
  order: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 0 5px 0;
  line-height: 1.2;
}

/* Siết khoảng cách giữa tên author và icon verified */
.woocommerce #reviews #comments ol.commentlist li.review .meta{
  gap: 5px; /* giữ chung cho các phần còn lại */
}

.woocommerce #reviews #comments ol.commentlist li.review .woocommerce-review__author{
  margin-right: -6px  !important; /* kéo verified lại gần */
}

.woocommerce #reviews #comments ol.commentlist li.review em.woocommerce-review__verified{
  margin-left: -6px !important; /* siết thêm nếu cần */
}

/* Sao nằm dưới meta */
.woocommerce #reviews #comments ol.commentlist li.review .comment-text .star-rating{
  order: 2;
  margin: 0 0 10px 0;
}

/* Tăng khoảng cách giữa tên/meta và star rating */
.woocommerce #reviews #comments ol.commentlist li.review .comment-text .meta{
  margin-bottom: 10px !important; /* tăng/giảm tuỳ ý */
}

.woocommerce #reviews #comments ol.commentlist li.review .comment-text .star-rating{
  margin-top: 0 !important; /* giữ sạch, tránh cộng dồn khoảng cách */
}

/* Title + content + images nằm sau */
.woocommerce #reviews #comments ol.commentlist li.review .comment-text .wcpr-review-title{ order: 3; }
.woocommerce #reviews #comments ol.commentlist li.review .comment-text .description{ order: 4; }
.woocommerce #reviews #comments ol.commentlist li.review .comment-text .kt-reviews-image-container{ order: 5; }

/* Meta: giữ ngày gọn + verified icon không tụt dòng vô tội vạ */
.woocommerce #reviews #comments ol.commentlist li.review time.woocommerce-review__published-date{
  white-space: nowrap;
}
.woocommerce #reviews #comments ol.commentlist li.review em.woocommerce-review__verified{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- Enhanced: làm body span full width (không bị thụt do avatar) ---- */
@supports (display: grid) {
  .woocommerce #reviews #comments ol.commentlist li.review .comment_container{
    display: grid;
    grid-template-columns: var(--review-avatar) 1fr;
    column-gap: var(--review-gap);
    row-gap: 6px;
    align-items: start;
  }

  /* Avatar ở cột 1, hàng 1 */
  .woocommerce #reviews #comments ol.commentlist li.review .comment_container > .flex-col{
    grid-column: 1;
    grid-row: 1;
  }

  /* Cho phép “đẩy” các con của .comment-text ra làm grid item */
  .woocommerce #reviews #comments ol.commentlist li.review .comment-text{
    display: contents;
  }

  /* Meta ở cột 2, hàng 1 (cùng hàng với avatar) */
  .woocommerce #reviews #comments ol.commentlist li.review .comment-text .meta{
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  /* Sao ở cột 2, hàng 2 (nằm dưới meta) */
  .woocommerce #reviews #comments ol.commentlist li.review .comment-text .star-rating{
    grid-column: 1;
    grid-row: 2;
    margin: 0 0 8px 0;
  }

  /* Title + content + images span full width (cả 2 cột) */
  .woocommerce #reviews #comments ol.commentlist li.review .comment-text .wcpr-review-title{
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
    margin-top: 4px;
  }
  .woocommerce #reviews #comments ol.commentlist li.review .comment-text .description{
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
  }
  .woocommerce #reviews #comments ol.commentlist li.review .comment-text .kt-reviews-image-container{
    grid-column: 1 / -1;
    grid-row: 5;
    width: 100%;
  }
}