/* ==========================================================================
   Product Reviews Slider — [product_reviews_slider]
   Card style theo Loox card carousel: ảnh đồng nhất (padding-bottom 72%),
   nền #f3f3f3, shadow offset-dark, sao xanh. Peek do ux_slider (slide_width) lo.
   LƯU Ý: KHÔNG dùng height:100% trên slide/card → gây vòng lặp với
   flickity-viewport làm slider cao 0 (ẩn mất).
   ========================================================================== */

/* Block bọc ngoài full sát mép màn hình (full-bleed) dù nằm trong cột có lề. */
/* Full-bleed sang phải tới mép màn hình — cùng kỹ thuật block best-seller
   (.amlab_products_sale): overflow visible + clip-path cho cards tràn phải,
   container giữ nguyên (không phá bằng margin âm → không bị cột cha chặn). */
.pr-reviews-fullwidth {
	overflow: visible !important;
	clip-path: inset(0 -100vw 0 0) !important;
}
.pr-reviews-fullwidth .slider,
.pr-reviews-fullwidth .flickity-viewport,
.pr-reviews-fullwidth .flickity-slider {
	overflow: visible !important;
}

/* Mỗi .pr-review-slide là 1 cell Flickity. padding = gutter giữa các card. */
.pr-review-slide {
	padding: 0 10px !important; /* !important để thắng rule .flickity-slider>* của Flatsome */
	box-sizing: border-box !important;
}

/* --- Card (giống Loox). Card là thẻ <a> → reset link + cursor pointer --- */
.pr-card {
	display: block;
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	background: #f3f3f3;
	border-radius: 8px;
	box-shadow: 0 7px 12px -4px rgba(0, 0, 0, 0.22); /* Loox: offset-dark */
	overflow: hidden;
	padding-bottom: 20px;
}
.pr-card:hover {
	color: inherit;
}

/* Ảnh: kỹ thuật padding-bottom để MỌI ảnh cùng tỉ lệ ngang 0.72 (giống Loox) */
.pr-card__photo {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 72%; /* Loox imageRatio=0.72 */
	margin: 0;
	overflow: hidden;
}
.pr-card__photo .pr-card__img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Badge sao: pill trắng bo tròn, đè lên mép dưới ảnh, căn giữa */
.pr-card__stars {
	display: block;
	width: -moz-fit-content;
	width: fit-content;
	margin: -20px auto 12px;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	padding: 6px 14px;
	position: relative;
	z-index: 2;
	white-space: nowrap;
}
.pr-star {
	color: #e3e3e3; /* sao rỗng giống Loox */
	font-size: 22px;
	line-height: 1;
	letter-spacing: 2px;
}
.pr-star--on {
	color: #ffb600; /* sao vàng */
}

.pr-card__name {
	font-weight: 700;
	text-align: center;
	color: #000;
	font-size: 15px;
	padding: 0 14px;
	margin-bottom: 8px;
}
/* Tick verified: chấm tròn tối, dấu check trắng dùng icon Flatsome (icon-checkmark) */
.pr-card__verified {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-left: 5px;
	color: #fff;
	background: #1a1a1a;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	vertical-align: middle;
}
.pr-card__verified i.icon-checkmark {
	font-size: 8px;
	line-height: 1;
}

/* Text: clamp 3 dòng + min-height để các card cao gần đều nhau */
.pr-card__text {
	text-align: center;
	color: #000;
	font-size: 14px;
	line-height: 1.5;
	padding: 0 18px;
	min-height: 4.5em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   Popup chi tiết review (mở bằng lightbox Flatsome) — layout 2 cột giống plugin
   ========================================================================== */
/* Nền tối backdrop: KHÔNG dùng CSS — đã thêm class "dark" qua data-class trên
   thẻ <a> của card → Flatsome tự cho nền tối (rule nền trắng
   .mfp-bg.off-canvas-center:not(.dark) không còn khớp). */

.pr-review-popup {
	background: #fff;
	max-width: 900px;
	margin: 0 auto;
	border-radius: 6px;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	position: relative;
}
.pr-review-popup .pr-popup__media {
	flex: 0 0 45%;
	max-width: 45%;
	background: #f3f3f3;
}
.pr-review-popup .pr-popup__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.pr-review-popup .pr-popup__thumbs {
	display: flex;
	gap: 6px;
	padding: 6px;
	background: #fff;
	flex-wrap: wrap;
}
.pr-review-popup .pr-popup__thumb {
	width: 54px;
	height: 54px;
	object-fit: cover;
	border-radius: 4px;
}
.pr-review-popup .pr-popup__body {
	flex: 1;
	padding: 24px 26px;
	min-width: 260px;
}
.pr-review-popup .pr-popup__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6px;
}
.pr-review-popup .pr-popup__author {
	font-weight: 700;
	color: #222;
}
.pr-review-popup .pr-popup__date {
	color: #999;
	font-size: 13px;
	font-style: italic;
}
.pr-review-popup .pr-popup__stars {
	display: block;
	margin: 0 0 10px;
	padding: 0;
	background: none;
	box-shadow: none;
	text-align: left;
}
.pr-review-popup .pr-popup__text {
	color: #333;
	line-height: 1.6;
	margin-bottom: 18px;
}
/* Vote like/dislike */
.pr-popup__vote {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}
.pr-popup__vote-label {
	color: #555;
	font-size: 14px;
}
.pr-vote {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: none;
	border: 0;
	padding: 4px 6px;
	margin: 0;
	cursor: pointer;
	color: #333;
	font-size: 14px;
	line-height: 1;
	box-shadow: none;
}
.pr-vote:hover { color: #000; }
.pr-vote[disabled] { opacity: 0.5; cursor: default; }
.pr-vote.is-voted { font-weight: 700; }
.pr-vote__icon { font-size: 16px; }
.pr-review-popup .pr-popup__product {
	display: flex;
	align-items: center;
	gap: 12px;
	border-top: 1px solid #eee;
	padding-top: 16px;
}
.pr-review-popup .pr-popup__product-thumb img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	border-radius: 4px;
}
.pr-review-popup .pr-popup__product-info {
	flex: 1;
	min-width: 0;
}
.pr-review-popup .pr-popup__product-name {
	display: block;
	font-weight: 600;
	color: #222;
	line-height: 1.35;
	margin-bottom: 2px;
}
.pr-review-popup .pr-popup__product-price {
	font-weight: 700;
}
.pr-review-popup .pr-popup__product-price del {
	color: #999;
	font-weight: 400;
	margin-right: 6px;
}
.pr-review-popup .pr-popup__choose {
	flex: 0 0 auto;
	margin: 0;
}

/* Mobile: popup 1 cột */
@media (max-width: 549px) {
	.pr-review-popup .pr-popup__media,
	.pr-review-popup .pr-popup__body {
		flex: 0 0 100%;
		max-width: 100%;
	}
}