/**
 * iw-pdh-reviews — Section đánh giá + sao trên trang chi tiết gói.
 *
 * Render bởi includes/pdh-reviews.php → parts-template/global/pdh-reviews.php.
 * Scope: mọi selector dưới `.iw-pdh-reviews` để không leak global.
 * Token màu lấy từ assets/css/global/base.css (--iw-accent, --iw-border…).
 * Mirror cho dev-preview/global/pdh-reviews/; sửa file này = cập nhật cả 2 chỗ.
 */

/*
 * KHUNG NGOÀI KHÔNG NẰM Ở ĐÂY.
 *
 * Section wrapper (`__reviews`), container và section-head do LAYOUT CHỦ định
 * nghĩa — `.iw-pdh-detail__*` (net) hoặc `.iw-cam-detail__*` (camera); template
 * part in ra theo biến `$prefix`. Lý do bắt buộc phải vậy: trang chi tiết quy
 * định mọi section phải nằm trong danh sách "Fullwidth breakout" (width:100vw +
 * margin âm) để thoát ràng buộc `.col-inner` mà page.php của Flatsome áp lên.
 * Section tự chế class riêng sẽ không được áp luật đó → hẹp hơn hẳn phần còn lại
 * của trang.
 *
 * File này CHỈ giữ phần ruột riêng của component: card, tóm tắt điểm, bộ lọc,
 * danh sách, trả lời, form.
 */
.iw-pdh-reviews {
	font-family: inherit;
	color: #1f2937;
}

/* Card trắng bọc toàn section — đồng bộ với .iw-pdh-detail__extra-card. */
.iw-pdh-reviews__card {
	background: #fff;
	border-radius: 16px;
	padding: 28px;
	box-sizing: border-box;
}

/* ───────── Tóm tắt: điểm trung bình + phân bố ───────── */

.iw-pdh-reviews__summary {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--iw-border, #e5e7eb);
}
/* Chưa có đánh giá: bỏ kẻ dưới — không còn gì ngăn cách nó với kẻ TRÊN của form,
   để lại sẽ thành hai đường sát nhau. */
.iw-pdh-reviews__summary.is-empty {
	padding-bottom: 0;
	border-bottom: 0;
}

.iw-pdh-reviews__score {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
.iw-pdh-reviews__score-value {
	font-size: 48px;
	line-height: 1.1;
	font-weight: 700;
	color: #3d3d3d;
}
.iw-pdh-reviews__score-stars {
	display: inline-flex;
	gap: 2px;
	font-size: 20px;
	line-height: 1;
}
/* Sao rỗng mặc định; is-full tô đầy; is-half tô nửa trái bằng gradient nền. */
.iw-pdh-reviews__star {
	color: #d8dae0;
}
.iw-pdh-reviews__star.is-full {
	color: #f5a524;
}
.iw-pdh-reviews__star.is-half {
	background: linear-gradient(90deg, #f5a524 50%, #d8dae0 50%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.iw-pdh-reviews__score-count {
	font-size: 14px;
	color: #6b7280;
}

/* Biểu đồ phân bố 5→1 sao. */
.iw-pdh-reviews__dist {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.iw-pdh-reviews__dist-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.iw-pdh-reviews__dist-label {
	flex-shrink: 0;
	min-width: 34px;
	font-size: 13px;
	color: #6b7280;
	white-space: nowrap;
}
.iw-pdh-reviews__dist-bar {
	flex: 1;
	height: 8px;
	border-radius: 999px;
	background: #f0f1f4;
	overflow: hidden;
}
.iw-pdh-reviews__dist-fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: #f5a524;
}
.iw-pdh-reviews__dist-count {
	flex-shrink: 0;
	min-width: 28px;
	text-align: right;
	font-size: 13px;
	color: #6b7280;
}

/* ───────── Bộ lọc theo số sao ───────── */

.iw-pdh-reviews__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}
.iw-pdh-reviews__filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 14px;
	border: 1px solid var(--iw-border, #e5e7eb);
	border-radius: 999px;
	background: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: #4b5563;
	cursor: pointer;
	white-space: nowrap;
	margin: 0 10px 0 0;
	line-height: 20px;
}
.iw-pdh-reviews__filter:hover:not([disabled]):not(.is-active) {
	border-color: var(--iw-accent, #4564ed);
	color: var(--iw-accent, #4564ed);
}
.iw-pdh-reviews__filter.is-active {
	background: var(--iw-accent, #4564ed);
	border-color: var(--iw-accent, #4564ed);
	color: #fff;
}
.iw-pdh-reviews__filter[disabled] {
	opacity: .45;
	cursor: default;
}
.iw-pdh-reviews__filter-count {
	font-weight: 400;
	font-size: 13px;
	opacity: .75;
	font-variant-numeric: tabular-nums;
}

/* ───────── Danh sách đánh giá ───────── */

.iw-pdh-reviews__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 24px 0 0 !important;
	padding: 0 !important;
	list-style: none !important;
}
.iw-pdh-reviews__item {
	margin: 0 !important;
	padding: 0 0 20px !important;
	list-style: none !important;
	border-bottom: 1px solid var(--iw-border, #e5e7eb);
}
.iw-pdh-reviews__item:last-child {
	border-bottom: 0;
	padding-bottom: 0 !important;
}

.iw-pdh-reviews__item-head {
	display: flex;
	align-items: center;
	gap: 12px;
}
.iw-pdh-reviews__avatar {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--iw-accent-soft, #f5f7ff);
	color: var(--iw-accent, #4564ed);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	font-weight: 700;
}
.iw-pdh-reviews__meta {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.iw-pdh-reviews__author {
	font-size: 15px;
	font-weight: 600;
	color: #1f2937;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.iw-pdh-reviews__stars {
	font-size: 14px;
	line-height: 1;
	color: #f5a524;
	letter-spacing: 1px;
}
.iw-pdh-reviews__date {
	flex-shrink: 0;
	font-size: 13px;
	color: #9ca3af;
}
.iw-pdh-reviews__content {
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: #4b5563;
	overflow-wrap: anywhere;
}

/* Thu gọn nội dung dài — nội dung ĐẦY ĐỦ vẫn nằm trong DOM (SEO + no-JS đọc
   được), chỉ bị cắt bằng CSS. JS bỏ class `is-clamped` là bung hết. */
.iw-pdh-reviews__content.is-clamped,
.iw-pdh-reviews__reply-content.is-clamped {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.iw-pdh-reviews__reply-content.is-clamped {
	-webkit-line-clamp: 4;
}
.iw-pdh-reviews__expand {
	margin-top: 4px;
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--iw-accent, #4564ed);
	cursor: pointer;
}
.iw-pdh-reviews__expand:hover {
	text-decoration: underline;
}

/* Bộ đếm ký tự — bình thường xám nhạt, vượt giới hạn chuyển đỏ + đậm. */
.iw-pdh-reviews__counter {
	display: block;
	margin-top: 4px;
	text-align: right;
	font-size: 12px;
	color: #9ca3af;
	font-variant-numeric: tabular-nums;
}
.iw-pdh-reviews__counter.is-over {
	color: #e02424;
	font-weight: 600;
}

/* ───────── Trả lời (comment con) ─────────
   THỤT SÂU hẳn để phân tầng nhìn rõ ngay: canh thẳng mép trái nội dung đánh giá
   (40px avatar + 12px gap = 52px) rồi cộng thêm một bậc nữa. Mobile nhẹ hơn cho
   đỡ bóp chữ, nhưng vẫn đủ để thấy đây là tầng con. */
.iw-pdh-reviews__replies {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 24px 0 0 0px !important;
	padding-left: 24px !important;
	list-style: none !important;
	border-left: 1px solid var(--iw-border, #e5e7eb);
}
.iw-pdh-reviews__replies:empty {
	display: none;
}
.iw-pdh-reviews__reply {
	margin: 0 !important;
	padding: 12px 14px !important;
	list-style: none !important;
	border-radius: 10px;
	background: #f7f8fa;
}
/* Phản hồi của nhân viên — nhấn bằng viền + màu nhãn accent. */
.iw-pdh-reviews__reply--staff {
	background: var(--iw-accent-soft, #f5f7ff);
	border-left: 3px solid var(--iw-accent, #4564ed);
}
.iw-pdh-reviews__reply-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 4px;
}
.iw-pdh-reviews__reply-author {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	color: #374151;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.iw-pdh-reviews__reply--staff .iw-pdh-reviews__reply-author {
	color: var(--iw-accent, #4564ed);
}
/* "@Tên" — trả lời từ tầng 2 trở xuống, cho biết đang đáp lại ai sau khi danh
   sách đã được trải phẳng về 1 tầng.
   CỐ Ý để dạng block riêng một dòng, KHÔNG dùng `display:inline` ghép chung
   dòng với nội dung: quy tắc inline sẽ đè `display:-webkit-box` của `.is-clamped`
   (cùng độ đặc hiệu, khai báo sau thắng) làm hỏng thu gọn ở trả lời dài. */
.iw-pdh-reviews__reply-to {
	display: block;
	margin-bottom: 2px;
	font-size: 13px;
	font-weight: 600;
	color: var(--iw-accent, #4564ed);
}

.iw-pdh-reviews__reply-content {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #4b5563;
	overflow-wrap: anywhere;
}

/* Nút "Trả lời" + form trả lời — cùng mức thụt với danh sách trả lời. */
.iw-pdh-reviews__actions {
	margin-top: 12px;
	padding-left: 0px;
}
/* Dạng pill, đồng bộ với nút lọc sao và nút "Xem thêm đánh giá". */
.iw-pdh-reviews__reply-toggle {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 8px 20px;
	border: 1px solid var(--iw-border, #e5e7eb);
	border-radius: 999px;
	background: #fff;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--iw-accent, #4564ed);
	cursor: pointer;
}
.iw-pdh-reviews__reply-toggle:hover {
	border-color: var(--iw-accent, #4564ed);
	background: var(--iw-accent-soft, #f5f7ff);
}

.iw-pdh-reviews__reply-form {
	margin: 12px 0 0 32px;
	padding: 14px;
	border: 1px solid var(--iw-border, #e5e7eb);
	border-radius: 10px;
	background: #fbfbfc;
}
.iw-pdh-reviews__textarea--sm {
	min-height: 72px;
}
.iw-pdh-reviews__reply-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}
/* Nút của form trả lời: xem khối .iw-pdh-reviews__submit / __reply-cancel
   ở cuối file (đặt cạnh nhau để dễ so màu). */

.iw-pdh-reviews__empty {
	margin: 24px 0 0;
	font-size: 15px;
	color: #6b7280;
}
/* Nằm TRONG __summary (chỗ của biểu đồ phân bố) → chiếm nốt phần còn lại của
   hàng và bỏ margin, để cùng dòng với cụm điểm số thay vì tụt xuống dưới. */
.iw-pdh-reviews__summary .iw-pdh-reviews__empty {
	flex: 1;
	margin: 0;
}

.iw-pdh-reviews__more {
	display: block;
	margin: 20px auto 0;
	padding: 10px 24px;
	border: 1px solid var(--iw-accent, #4564ed);
	border-radius: 999px;
	background: transparent;
	color: var(--iw-accent, #4564ed);
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	min-height: 44px;
}
.iw-pdh-reviews__more:hover {
	background: var(--iw-accent, #4564ed);
	color: #fff;
}
.iw-pdh-reviews__more[disabled] {
	opacity: .6;
	cursor: default;
}

/* ───────── Form gửi đánh giá ───────── */

.iw-pdh-reviews__form {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--iw-border, #e5e7eb);
}
/* margin-bottom = 0: khoảng cách xuống field đầu tiên do `gap` của form lo,
   để lại sẽ cộng dồn thành 32px. */
.iw-pdh-reviews__form-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: #3d3d3d;
}
/* Field KHÔNG tự đẩy khoảng cách; giãn cách do form quyết định bằng `gap`.
   Làm vậy thì mọi con của form (tiêu đề, field, nút, feedback) cách đều nhau,
   không phải đi chỉnh margin từng cái, và không dính margin-bottom mặc định
   của Flatsome (.button,button,fieldset,input,select,textarea{margin-bottom:1em}). */
.iw-pdh-reviews .iw-pdh-reviews__field {
	margin-bottom: 0;
}
.iw-pdh-reviews .iw-pdh-reviews__form,
.iw-pdh-reviews .iw-pdh-reviews__reply-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
/* Form trả lời gọn hơn — nằm trong khung nhỏ, giãn 16px là thừa. */
.iw-pdh-reviews .iw-pdh-reviews__reply-form {
	gap: 12px;
}
/* BẮT BUỘC: JS đóng/mở form bằng $form.prop('hidden', …). `display:flex` ở trên
   có độ đặc hiệu cao hơn [hidden] của trình duyệt nên nếu thiếu dòng này thì
   MỌI form trả lời hiện vĩnh viễn ở mọi đánh giá. */
.iw-pdh-reviews .iw-pdh-reviews__reply-form[hidden] {
	display: none;
}
/* Nút gửi/huỷ không kéo dài hết chiều ngang khi form thành flex column. */
.iw-pdh-reviews .iw-pdh-reviews__submit,
.iw-pdh-reviews .iw-pdh-reviews__reply-actions {
	align-self: flex-start;
}
.iw-pdh-reviews__label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: #374151;
}
.iw-pdh-reviews__label span {
	color: #e02424;
}

/* Bộ chọn sao — nút to đủ chạm trên mobile (44px). */
.iw-pdh-reviews__picker {
	display: flex;
	gap: 4px;
}
.iw-pdh-reviews__picker-star {
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	font-size: 30px;
	line-height: 1;
	color: #d8dae0;
	cursor: pointer;
	transition: color .12s ease, transform .12s ease;
}
.iw-pdh-reviews__picker-star.is-on {
	color: #f5a524;
}
.iw-pdh-reviews__picker-star:hover {
	transform: scale(1.08);
}
.iw-pdh-reviews__picker-star:focus-visible {
	outline: 2px solid var(--iw-accent, #4564ed);
	outline-offset: 2px;
	border-radius: 6px;
}

.iw-pdh-reviews .iw-pdh-reviews__input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--iw-border, #e5e7eb);
	border-radius: 10px;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	color: #1f2937;
	box-shadow: none;
	margin: 0;
}
.iw-pdh-reviews .iw-pdh-reviews__input::placeholder {
	color: #9ca3af;
	opacity: 1;
}
.iw-pdh-reviews .iw-pdh-reviews__input:focus {
	border-color: var(--iw-accent, #4564ed);
	outline: none;
}
.iw-pdh-reviews .iw-pdh-reviews__textarea {
	resize: vertical;
	min-height: 110px;
	line-height: 1.6;
}

/* Trạng thái lỗi — JS gắn vào .iw-pdh-reviews__field. */
.iw-pdh-reviews__field--error .iw-pdh-reviews__input {
	border-color: #e02424;
}
.iw-pdh-reviews__field-error {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: #e02424;
}

/* Honeypot — ẩn khỏi mắt người dùng nhưng vẫn để bot thấy trong DOM. */
.iw-pdh-reviews__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Scope vào GỐC component (.iw-pdh-reviews), KHÔNG vào .iw-pdh-reviews__form:
   form trả lời mang class .iw-pdh-reviews__reply-form (token khác hẳn) nên
   scope kiểu cũ làm nút trả lời không nhận style nào, rơi về mặc định Flatsome.
   Vẫn phải giữ 2 class: Flatsome có rule button[type=submit] (0,1,1) sẽ đè nếu
   ta chỉ dùng 1 class (0,1,0). */
.iw-pdh-reviews .iw-pdh-reviews__submit {
	min-height: 44px;
	padding: 12px 32px;
	border: 0;
	border-radius: 999px;
	background: var(--iw-cta-bg, #4564ed);
	color: var(--iw-cta-fg, #fff);
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	margin: 0;
	transition: background-color .18s ease;
}
.iw-pdh-reviews .iw-pdh-reviews__submit:hover,
.iw-pdh-reviews .iw-pdh-reviews__submit:focus-visible {
	background: var(--iw-cta-bg-hover, #3a52c4);
	color: var(--iw-cta-fg, #fff);
}
.iw-pdh-reviews .iw-pdh-reviews__submit[disabled] {
	opacity: .6;
	cursor: default;
}
.iw-pdh-reviews .iw-pdh-reviews__submit[disabled]:hover {
	background: var(--iw-cta-bg, #4564ed);
}

/* Bản nhỏ dùng trong form trả lời. Đặt SAU rule gốc nên thắng mà không cần
   !important (cùng độ đặc hiệu, rule sau đè rule trước). */
.iw-pdh-reviews .iw-pdh-reviews__submit--sm {
	min-height: 38px;
	padding: 8px 20px;
	font-size: 14px;
}

/* Nút phụ "Huỷ": viền + nền trắng, mượn đúng ngôn ngữ nút phụ đã có của
   component (.iw-pdh-reviews__filter) nên không phát minh màu mới. Cùng chiều
   cao/bo góc với --sm để hai nút thẳng hàng. */
.iw-pdh-reviews .iw-pdh-reviews__reply-cancel {
	min-height: 38px;
	padding: 8px 20px;
	border: 1px solid var(--iw-border, #e5e7eb);
	border-radius: 999px;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: #4b5563;
	cursor: pointer;
	margin: 0;
	transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.iw-pdh-reviews .iw-pdh-reviews__reply-cancel:hover,
.iw-pdh-reviews .iw-pdh-reviews__reply-cancel:focus-visible {
	border-color: var(--iw-accent, #4564ed);
	background: #fff;
	color: var(--iw-accent, #4564ed);
	text-decoration: none;
}

.iw-pdh-reviews__feedback {
	margin-top: 0; /* `gap` của form đã lo khoảng cách */
	font-size: 14px;
	font-weight: 600;
}
.iw-pdh-reviews__feedback--success {
	color: #067647;
}
.iw-pdh-reviews__feedback--error {
	color: #e02424;
}

/* ───────── Desktop ─────────
   768px chứ KHÔNG phải 850px: layout chủ (pdh-detail.css) chuyển desktop tại
   `max-width: 767px`. Để lệch thì dải 768–849px thành vùng chết — trang đã đổi
   sang bố cục desktop trong khi section này vẫn giữ giá trị mobile. */
@media (min-width: 768px) {
	.iw-pdh-reviews__card {
		padding: 40px;
	}
	.iw-pdh-reviews__summary {
		flex-direction: row;
		align-items: center;
		gap: 48px;
	}
	.iw-pdh-reviews__score {
		min-width: 180px;
	}
	.iw-pdh-reviews__score-value {
		font-size: 56px;
	}
	.iw-pdh-reviews__form-title {
		font-size: 22px;
	}
	/* Desktop: thụt hẳn một bậc so với mép nội dung đánh giá (52px) cho phân tầng
	   rõ ràng — màn rộng nên không lo bóp chữ. */
	.iw-pdh-reviews__replies,
	.iw-pdh-reviews__reply-form {
		margin-left: 24px;
	}
	/* Nới lại khoảng cách vạch → thẻ (mobile để 0). !important vì rule gốc cũng
	   !important — cùng độ đặc hiệu, rule sau trong file mới thắng. */
	.iw-pdh-reviews__replies {
		padding-left: 24px !important;
		margin-left: 24px !important;
	}
	.iw-pdh-reviews__actions {
		padding-left: 0px;
	}
}