:root {
	--google-blue: #1a73e8;
	--star-color: #ff8a00;
	--bg-card: #f1f3f4;
	--gap: 20px; 
}
.container-review-title {
	font-family: 'Montserrat', sans-serif;
	font-weight: 500; font-size: 26px; color: #224E6F; text-align: center; margin-bottom: 30px;
}

.container-review {
	max-width: 1400px; margin: 0 auto; display: flex; padding: 0 15px; gap: 30px; align-items: flex-start;
}

.overall-rating { flex: 0 0 200px; text-align: center; position: sticky; top: 20px; }
.score-big { font-size: 40px; font-weight: bold; color: #333; }
.stars-orange { color: var(--star-color); font-size: 18px; margin-bottom: 10px; }

.google-btn {
	background: var(--google-blue); color: white; padding: 10px 15px;
	border-radius: 20px; text-decoration: none; font-size: 12px; font-weight: bold;
}

.slider-wrapper-review {
	flex: 1; position: relative; display: flex; align-items: center; padding: 0 50px; overflow: hidden;
}

.review-viewport { width: 100%; overflow: hidden; }
.review-track { display: flex; transition: transform 0.5s ease-out; gap: var(--gap); }

/* Desktop: 3 cột */
.review-card-home {
	flex: 0 0 calc((100% / 3) - (var(--gap) * 2 / 3));
	min-width: calc((100% / 3) - (var(--gap) * 2 / 3));
	background: var(--bg-card); padding: 20px; border-radius: 12px;
	box-sizing: border-box; display: flex; flex-direction: column; min-height: 240px;
}

.nav-btn-review {
	position: absolute; background: white; border: 1px solid #ddd; width: 35px; height: 35px;
	border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center;
	justify-content: center; box-shadow: 0 2px 5px rgba(0,0,0,0.1); top: 50%; transform: translateY(-50%);
}

#prevBtnReview { left: 5px; }
#nextBtnReview { right: 5px; }

.card-top { display: flex; justify-content: space-between; margin-bottom: 10px; }
.user-info { display: flex; gap: 10px; align-items: center; }
.avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.u-name { color: var(--google-blue); font-weight: bold; font-size: 14px; }
.g-icon { color: #ea4335; font-size: 16px; }
.rev-text { font-size: 13.5px; line-height: 1.5; color: #444; }

@media (max-width: 768px) {
	.container-review { flex-direction: column; align-items: center; }
	.overall-rating { width: 100%; position: static; margin-bottom: 20px; }
	.review-card-home { flex: 0 0 100%; min-width: 100%; }
	.slider-wrapper-review { padding: 0 45px; width: 100%; box-sizing: border-box; }
}
@media (max-width: 650px) {
	.container-review-title {
		font-size: 19px;
	}
}