/* ==========================================================================
   Custom WooCommerce Review Styles
   ========================================================================== */

/* --- Phần tóm tắt đánh giá --- */
.wn-pd-review .custom-reviews-summary-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1.5em;
  border-bottom: 1px solid #e0e0e0;
}

.wn-pd-review .custom-reviews-summary-wrapper .average-rating-display {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.wn-pd-review
  .custom-reviews-summary-wrapper
  .average-rating-display
  .rating-value {
  font-size: 2.5em; /* Cỡ chữ điểm trung bình */
  font-weight: 600; /* Độ đậm */
  line-height: 1;
  color: #111;
}

/* Điều chỉnh sao trong phần tóm tắt */
.wn-pd-review
  .custom-reviews-summary-wrapper
  .average-rating-display
  .star-rating {
  line-height: 1;
  font-size: 1.1em; /* Có thể chỉnh kích thước sao */
}
.wn-pd-review .star-rating::before {
  color: #ccc; /* Màu sao rỗng */
}
.wn-pd-review .star-rating span::before,
.wn-pd-review .star-rating::before {
  color: #ffc107 !important;
}

.wn-pd-review .custom-reviews-summary-wrapper .reviews-count {
  margin: 0;
  color: #555;
  font-size: 0.9em; /* Cỡ chữ số lượng review */
  line-height: 1.3;
}

.wn-pd-review .custom-reviews-summary-wrapper .reviews-count .count {
  font-weight: bold;
}

.wn-pd-review
  .custom-reviews-summary-wrapper
  .summary-right
  .write-review-button {
  background-color: var(--primary-color);
  color: #fff;
  padding: 10px 25px;
  border-radius: 4px;
  font-size: 0.95em;
  border: none;
  cursor: pointer;
  margin: 0;
}

/* --- Danh sách đánh giá --- */
.wn-pd-review .commentlist {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* --- Định dạng cho một đánh giá đơn lẻ (li.comment) --- */
/* Quan trọng: Class bên trong li.comment cần khớp với HTML trong review.php của bạn */
.wn-pd-review .commentlist li.comment {
  padding: 2em 0; /* Padding trên dưới cho mỗi review */
  margin: 0;
  border: none; /* Bỏ border mặc định nếu có */
  border-bottom: 1px solid #eaeaea; /* Đường kẻ phân cách */
}
.wn-pd-review .commentlist li.comment:last-child {
  border-bottom: none; /* Bỏ đường kẻ ở review cuối cùng */
  padding-bottom: 0;
}

/* Sử dụng Flexbox để tạo layout 2 cột cho mỗi review */
.wn-pd-review .commentlist .comment-container {
  /* Thêm div này bao quanh nội dung trong review.php */
  display: flex;
  gap: 20px; /* Khoảng cách giữa cột trái và cột phải */
}

/* --- Cột trái (Avatar, Tên, Verified) --- */
.wn-pd-review .comment-author-column {
  flex: 0 0 80px; /* Cố định chiều rộng cột trái */
  display: flex;
  flex-direction: column; /* Sắp xếp các phần tử theo chiều dọc */
  align-items: center; /* Căn giữa theo chiều ngang */
  text-align: center;
}

.wn-pd-review .avatar-initials-wrap {
  /* Div bao quanh avatar hoặc tên viết tắt */
  width: 50px;
  height: 50px;
  border-radius: 50%; /* Bo tròn */
  background-color: #e9e9e9; /* Màu nền cho tên viết tắt */
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Đảm bảo ảnh avatar vừa vặn */
  margin-bottom: 8px;
  font-weight: bold;
  font-size: 1.2em;
}

.wn-pd-review .avatar-initials-wrap img.avatar {
  /* Style cho ảnh avatar */
  width: 100%;
  height: 100%;
  object-fit: cover; /* Cắt ảnh cho vừa */
}

.wn-pd-review .verified-badge {
  /* Huy hiệu Verified */
  font-size: 0.75em;
  color: #007700; /* Màu xanh lá */
  font-weight: bold;
  margin-bottom: 5px;
  display: inline-flex; /* Sử dụng flex để căn icon và text */
  align-items: center;
  gap: 3px;
}
.wn-pd-review .verified-badge::before {
  /* Thêm icon tick (cần font icon như FontAwesome) */
  /* content: '\f058'; */ /* Ví dụ FontAwesome check-circle */
  /* font-family: 'Font Awesome 5 Free'; */
  font-weight: 900;
  /* Hoặc dùng SVG/ảnh */
  content: "✓"; /* Ký tự tick đơn giản */
  margin-right: 3px;
}

.wn-pd-review .woocommerce-review__author {
  font-size: 0.9em;
  font-weight: 600; /* Tên tác giả đậm hơn */
  color: #333;
  margin: 0;
  line-height: 1.3;
}

/* --- Cột phải (Sao, Tiêu đề, Nội dung, Actions) --- */
.wn-pd-review .comment-content-column {
  flex-grow: 1; /* Chiếm hết phần không gian còn lại */
}

/* Sao đánh giá trong từng review */
.wn-pd-review .comment-content-column .star-rating {
  font-size: 0.9em; /* Cỡ sao nhỏ hơn sao trung bình */
  margin-bottom: 8px;
  display: block; /* Để xuống dòng riêng */
}

.wn-pd-review .review-title {
  /* Tiêu đề review (cần thêm HTML) */
  font-size: 1.1em;
  font-weight: bold;
  color: #111;
  margin: 0 0 8px 0;
}

.wn-pd-review .review-product-link {
  /* Link sản phẩm/tour (cần thêm HTML) */
  font-size: 0.9em;
  color: #555;
  margin-bottom: 10px;
  display: block;
}

.wn-pd-review .comment-content-column .description {
  font-size: 0.95em;
  line-height: 1.6;
  color: #333;
  margin-bottom: 15px;
}
.wn-pd-review .comment-content-column .description p:last-child {
  margin-bottom: 0; /* Bỏ margin của đoạn cuối cùng trong nội dung */
}

.wn-pd-review .review-actions {
  /* Phần Helpful/Share (cần thêm HTML) */
  font-size: 0.85em;
  color: #777;
}
.wn-pd-review .review-actions span,
.wn-pd-review .review-actions a {
  margin-right: 15px; /* Khoảng cách giữa các action */
  color: #777;
  text-decoration: none;
}
.wn-pd-review .review-actions a:hover {
  color: #111;
  text-decoration: underline;
}

/* ==========================================================================
   Responsive adjustments (Ví dụ cho màn hình nhỏ)
   ========================================================================== */
@media (max-width: 768px) {
  /* --- Tóm tắt --- */
  .wn-pd-review .custom-reviews-summary-wrapper {
    flex-direction: column; /* Chuyển thành cột */
    align-items: flex-start; /* Căn trái */
    gap: 15px;
  }
  .wn-pd-review .custom-reviews-summary-wrapper .summary-right {
    width: 100%; /* Nút chiếm toàn bộ chiều rộng */
  }
  .wn-pd-review
    .custom-reviews-summary-wrapper
    .summary-right
    .write-review-button {
    display: block; /* Cho nút thành block */
    text-align: center;
  }

  /* --- Từng review --- */
  .wn-pd-review .commentlist .comment-container {
    flex-direction: column; /* Chuyển thành cột */
    gap: 15px;
  }
  .wn-pd-review .comment-author-column {
    flex-basis: auto; /* Bỏ chiều rộng cố định */
    align-items: flex-start; /* Căn trái */
    flex-direction: row; /* Sắp xếp avatar, tên, verified theo hàng ngang */
    align-items: center;
    gap: 10px;
    text-align: left;
  }
  .wn-pd-review .avatar-initials-wrap {
    width: 40px; /* Avatar nhỏ hơn */
    height: 40px;
    font-size: 1em;
    margin-bottom: 0; /* Bỏ margin dưới */
  }
  .wn-pd-review .comment-author-details {
    /* Thêm 1 div bao quanh tên và verified nếu cần */
    display: flex;
    flex-direction: column;
  }
  .wn-pd-review .verified-badge {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   CSS cho một mục đánh giá đơn lẻ (Review Item)
   ========================================================================== */

/* --- Container chính cho mỗi đánh giá --- */
/* Áp dụng cho thẻ LI nếu bạn thêm class vào LI */
li.wn-pd-review-item {
  padding: 2em 0 !important;
  margin: 0;
  margin-left: 0 !important;
  border: none;
  border-top: none !important;
  border-bottom: 1px solid #eaeaea;
  list-style: none;
}
li.wn-pd-review-item:last-child {
  border-bottom: none; /* Bỏ đường kẻ ở review cuối */
  padding-bottom: 0;
}

/* --- Flex container bao bọc 2 cột --- */
/* Giả sử bạn có <div class="comment-container"> bên trong LI hoặc DIV .wn-pd-review-item */
.wn-pd-review-item .comment-container {
  display: flex;
  gap: 25px; /* Khoảng cách giữa cột trái và cột phải */
  align-items: flex-start; /* Căn các cột theo đỉnh */
}

/* --- Cột trái (Author Meta) --- */
.wn-pd-review-item .comment-author-column {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  align-items: start;
}

/* Vòng tròn Avatar/Initials */
.wn-pd-review-item .avatar-initials-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #eaeaea; /* Màu nền xám nhạt */
  color: #333; /* Màu chữ initials */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px; /* Khoảng cách tới tên */
  font-weight: bold;
  font-size: 1.4em;
  line-height: 1; /* Căn chữ initials giữa theo chiều dọc tốt hơn */
  text-transform: uppercase;
}
.wn-pd-review-item .avatar-initials-wrap img.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wn-pd-review-item .avatar-initials-wrap .initials {
  /* CSS cho thẻ span chứa initials nếu bạn dùng */
}

/* Tên tác giả */
.wn-pd-review-item .woocommerce-review__author {
  font-size: 0.95em;
  color: #222;
  margin: 0;
  font-weight: bold;
  line-height: 1.3;
  word-break: break-word; /* Tránh tên quá dài làm vỡ layout */
}

/* Huy hiệu Verified (Nếu bạn đặt nó dưới tên) */
.wn-pd-review-item .verified-badge {
  font-size: 0.8em;
  color: #007700;
  font-weight: normal;
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.wn-pd-review-item .verified-badge::before {
  content: "✓";
  font-weight: bold;
}

/* --- Cột phải (Review Content) --- */
.wn-pd-review-item .comment-content-column {
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  padding-left: 25px;
  flex-grow: 1; /* Chiếm không gian còn lại */
}

/* Sao đánh giá */
.wn-pd-review-item .comment-content-column .star-rating {
  font-size: 1em;
  margin-bottom: 12px;
  display: block; /* Đảm bảo nằm trên 1 dòng riêng */
  width: calc(5.3em * 1); /* Điều chỉnh width theo font-size */
  height: calc(1.618em * 1);
}
/* Màu sao trong từng review (ghi đè nếu cần) */
.wn-pd-review-item .comment-content-column .star-rating::before {
  color: #ccc;
}
.wn-pd-review-item .comment-content-column .star-rating span::before {
  color: #ffc107;
}

/* Tiêu đề Review (Cần thêm HTML với class này) */
.wn-pd-review-item .review-title {
  font-size: 1.1em;
  font-weight: bold;
  color: #111;
  margin: 0 0 8px 0;
}

/* Link sản phẩm/tour (Cần thêm HTML với class này) */
.wn-pd-review-item .review-product-link {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 10px;
  display: block;
}
.wn-pd-review-item .review-product-link a {
  color: #555;
  text-decoration: none;
}
.wn-pd-review-item .review-product-link a:hover {
  text-decoration: underline;
}

/* Nội dung review */
.wn-pd-review-item .comment-content-column .description {
  font-size: 1em;
  line-height: 1.65;
  color: #333;
  margin-bottom: 15px;
  word-wrap: break-word; /* Ngăn từ dài làm vỡ layout */
}
.wn-pd-review-item .comment-content-column .description p:last-child {
  margin-bottom: 0;
}

/* Actions (Helpful/Share) (Cần thêm HTML với class này) */
.wn-pd-review-item .review-actions {
  font-size: 0.85em;
  color: #777;
  margin-top: 10px;
}
.wn-pd-review-item .review-actions span,
.wn-pd-review-item .review-actions a {
  margin-right: 15px;
  color: #777;
  text-decoration: none;
}
.wn-pd-review-item .review-actions a:hover {
  color: #111;
  text-decoration: underline;
}
.wn-pd-review-item .review-actions .helpful-buttons a {
  margin-left: 5px;
}

/* ==========================================================================
   Responsive Adjustments cho Review Item
   ========================================================================== */
@media (max-width: 768px) {
  .wn-pd-review-item .comment-container {
    flex-direction: column; /* Chuyển thành cột */
    gap: 15px;
  }
  .wn-pd-review-item .comment-author-column {
    flex-basis: auto; /* Bỏ chiều rộng cố định */
    align-items: flex-start; /* Căn trái */
    flex-direction: row; /* Xếp avatar/tên theo hàng ngang */
    align-items: center;
    gap: 10px;
    text-align: left;
    margin-bottom: 5px; /* Thêm khoảng cách dưới hàng author */
  }
  .wn-pd-review-item .avatar-initials-wrap {
    width: 45px; /* Avatar nhỏ hơn */
    height: 45px;
    font-size: 1.1em;
    margin-bottom: 0; /* Bỏ margin dưới avatar */
  }
  /* Bạn có thể cần thêm 1 div bao quanh tên và huy hiệu để dễ sắp xếp */
  .wn-pd-review-item .comment-author-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .wn-pd-review-item .verified-badge {
    margin-top: 2px; /* Điều chỉnh khoảng cách */
  }

  .wn-pd-review-item .comment-content-column {
    padding-top: 0; /* Reset padding */
  }

  /* Điều chỉnh cỡ chữ nếu cần */
  .wn-pd-review-item .comment-content-column .description {
    font-size: 0.95em;
  }
}

/* ==========================================================================
   CSS cho form review
   ========================================================================== */

#review_form_wrapper {
  display: none; /* Hoàn toàn ẩn đi */
  overflow: hidden; /* Cần thiết cho hiệu ứng slide */
}

.comment-form {
  margin-bottom: 0;
}

.comment-form .comment-reply-title {
  font-size: 1.5rem;
  font-weight: bold;
}