/* Đánh giá sao [wp_rating] */
.wp-rating {
	--wp-rating-size: 30px;
	--wp-rating-gap: 0px;
	--wp-rating-empty: #dcdcdc;
	--wp-rating-active: var(--site-primary-color, #F49E00);
	margin: 8px 0 0;
}

.wp-rating-align-center { text-align: center; }
.wp-rating-align-right  { text-align: right; }

.wp-rating-title {
	margin: 0 0 4px;
}

.wp-rating-stars {
	position: relative;
	display: inline-flex;
	vertical-align: middle;
	line-height: 0;
}

/* Mỗi sao 1 ô bằng nhau để phần tô theo % khớp điểm trung bình. */
.wp-rating-star {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: calc(var(--wp-rating-size) + var(--wp-rating-gap));
	height: var(--wp-rating-size);
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: var(--wp-rating-size);
	line-height: 1;
	color: var(--wp-rating-empty);
}

.wp-rating-star svg {
	display: block;
	width: var(--wp-rating-size);
	height: var(--wp-rating-size);
	transition: color .15s ease;
}

/* Lớp tô điểm trung bình, nằm trên các nút, không nhận chuột. */
.wp-rating-fill {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: flex;
	height: 100%;
	overflow: hidden;
	white-space: nowrap;
	pointer-events: none;
	transition: opacity .15s ease, width .3s ease;
}

.wp-rating-fill .wp-rating-star {
	color: var(--wp-rating-active);
}

/* Nút: DOM xếp 5 → 1, hiển thị đảo lại 1 → 5 để dùng selector "~" khi hover. */
.wp-rating-input {
	display: flex;
	flex-direction: row-reverse;
}

.is-readonly .wp-rating-input {
	flex-direction: row;
}

button.wp-rating-star {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

button.wp-rating-star:hover,
button.wp-rating-star:focus {
	background: none;
	outline: none;
	box-shadow: none;
}

button.wp-rating-star:focus-visible svg {
	outline: 2px solid var(--wp-rating-active);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Hover / focus: ẩn điểm trung bình, tô từ sao 1 tới sao đang trỏ. */
.wp-rating:not(.is-readonly) .wp-rating-stars:hover .wp-rating-fill,
.wp-rating:not(.is-readonly) .wp-rating-stars:has(:focus-visible) .wp-rating-fill {
	opacity: 0;
}

.wp-rating-input button.wp-rating-star:hover,
.wp-rating-input button.wp-rating-star:hover ~ .wp-rating-star,
.wp-rating-input button.wp-rating-star:focus-visible,
.wp-rating-input button.wp-rating-star:focus-visible ~ .wp-rating-star {
	color: var(--wp-rating-active);
}

/* Đang gửi */
.wp-rating.is-loading .wp-rating-stars {
	opacity: .6;
	pointer-events: none;
}

.wp-rating-text {
	margin: 4px 0 0;
	min-height: 20px;
}

.wp-rating-mine:not(:empty) {
	margin-left: 6px;
	color: var(--wp-rating-active);
}

.wp-rating-summary:empty + .wp-rating-mine {
	margin-left: 0;
}

.wp-rating-text.is-error .wp-rating-mine {
	color: #ff6b6b;
}

@media (max-width: 575px) {
	.wp-rating:not([style*="--wp-rating-size"]) {
		--wp-rating-size: 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-rating-star svg,
	.wp-rating-fill {
		transition: none;
	}
}