@charset "UTF-8";

/**
 * DevVN Reviews — giao diện đánh giá sản phẩm.
 *
 * Màu lấy từ biến của theme nếu có, không thì dùng mặc định của module, nên
 * copy sang theme khác vẫn hiển thị đúng.
 */

.devvn-reviews {
	--dvr-primary: var(--cl-accent, var(--fs-color-primary, #111111));
	--dvr-primary-dark: var(--cl-accent-dark, #000000);
	--dvr-star: var(--cl-star, #e8a33d);
	--dvr-line: var(--cl-line, #ececec);
	--dvr-ink: var(--cl-ink, #23201f);
	--dvr-body: var(--cl-body, #5b4a44);
	--dvr-muted: var(--cl-muted, #9b9b9b);
	--dvr-card: #fff;
	--dvr-radius: 0px;
	--dvr-star-empty: #dcdcdc;
	--dvr-green: #1a7f45;
	--dvr-green-soft: #e7f4ec;
	--dvr-empty-icon: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.6a8.4 8.4 0 0 1-9 8.4 9.5 9.5 0 0 1-2.7-.4L4 21.5l1.6-4.2A8.2 8.2 0 0 1 3.6 11.6 8.4 8.4 0 0 1 12 3.2a8.4 8.4 0 0 1 9 8.4Z'/%3E%3Cpath d='m12 7.6 1.3 2.7 2.9.4-2.1 2 .5 2.9-2.6-1.4-2.6 1.4.5-2.9-2.1-2 2.9-.4Z'/%3E%3C/svg%3E");
	color: var(--dvr-body);
}

/* --- Mục đánh giá đứng riêng dưới khối tab -------------------------------- */

.devvn-reviews-section {
	margin-bottom: 40px;
}

/* --- Bố cục hai cột ------------------------------------------------------ */

.dvr-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 400px;
	align-items: start;
	gap: 40px;
}

.dvr-title {
	margin: 0 0 22px;
	color: var(--dvr-ink);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

/* --- Ngôi sao dùng chung -------------------------------------------------- */

/* Hàng sao rỗng nằm trong dòng để tự quyết định bề rộng: đặt bề rộng cứng thì
   % của lớp phủ lệch khỏi bề ngang thật của glyph và sao bị tô thừa. */
.dvr-stars {
	position: relative;
	display: inline-block;
	font-size: 17px;
	letter-spacing: 0.12em;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	vertical-align: middle;
}

.dvr-stars::before,
.dvr-stars__fill::before {
	content: "★★★★★";
	display: block;
}

.dvr-stars::before {
	color: var(--dvr-star-empty);
}

.dvr-stars__fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	overflow: hidden;
}

.dvr-stars__fill::before {
	color: var(--dvr-star);
}

/* --- Tổng quan điểm ------------------------------------------------------- */

.dvr-summary {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	align-items: center;
	gap: 30px;
	margin-bottom: 26px;
}

.dvr-summary__score {
	text-align: left;
}

.dvr-summary__avg {
	display: inline-block;
	margin-right: 12px;
	color: var(--dvr-primary);
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
}

.dvr-summary__score .dvr-stars {
	font-size: 22px;
}

.dvr-summary__based {
	display: block;
	margin-top: 10px;
	color: var(--dvr-body);
	font-size: 14.5px;
}

.dvr-bars {
	margin: 0 !important;
	padding: 0 0 0 30px;
	border-left: 1px solid var(--dvr-line);
	list-style: none;
}

.dvr-bars__row {
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr) 40px 34px;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px !important;
	font-size: 13px;
}

.dvr-card__body.comment-text {
	padding: 0 !important;
}

.dvr-bars__row:last-child {
	margin-bottom: 0;
}

.dvr-bars__label {
	color: var(--dvr-body);
	text-align: right;
}

.dvr-bars__track {
	height: 7px;
	border-radius: 0;
	background-color: #e9e9e9;
	overflow: hidden;
}

.dvr-bars__fill {
	display: block;
	height: 100%;
	border-radius: 0;
	background-color: var(--dvr-star);
}

.dvr-bars__pct,
.dvr-bars__count {
	color: var(--dvr-muted);
}

.dvr-bars__pct {
	text-align: right;
}

/* --- Thẻ đánh giá --------------------------------------------------------- */

/* Theme thường đặt margin cho ol/ul bằng selector có hạng cao hơn. */
.dvr-list {
	margin: 0 !important;
	padding: 0;
	list-style: none;
}

/* Theme hay kẻ vạch ngăn giữa các comment bằng selector hạng cao. */
.dvr-list .dvr-item {
	margin: 0 0 14px;
	padding: 0;
	border: 0 !important;
	list-style: none;
}

.dvr-list .children {
	margin: 14px 0 0 46px;
	padding: 0;
	list-style: none;
}

.dvr-card {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 16px;
	padding: 18px 20px;
	border: 1px solid var(--dvr-line);
	border-radius: var(--dvr-radius);
	background-color: var(--dvr-card);
}

.dvr-card__side {
	text-align: center;
}

.dvr-card__avatar img {
	width: 68px;
	height: 68px;
	margin: 0 auto;
	border-radius: 50%;
	object-fit: cover;
}


.dvr-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.dvr-card__date {
	color: var(--dvr-muted);
	font-size: 13px;
}

.dvr-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0 0 8px;
}

.dvr-card__author {
	color: var(--dvr-ink);
	font-size: 15px;
	font-weight: 700;
}

/* Nhãn "Đã mua hàng": viên thuốc xanh lá, tách khỏi màu đỏ thương hiệu để đọc ra ngay là dấu xác thực. */
.dvr-card__verified {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px 3px 8px;
	border-radius: 0;
	background-color: var(--dvr-green-soft);
	color: var(--dvr-green);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}

.dvr-card__verified::before {
	content: "";
	flex: none;
	width: 12px;
	height: 12px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

.dvr-card__text {
	color: var(--dvr-body);
	font-size: 15px;
	line-height: 1.65;
}

.dvr-card__text p {
	margin: 0 0 8px;
}

.dvr-card__text p:last-child {
	margin-bottom: 0;
}

.dvr-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--dvr-line);
}

.dvr-helpful,
.dvr-card__foot .dvr-reply a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--dvr-muted);
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1.4;
	text-transform: none;
}

.dvr-helpful::before,
.dvr-card__foot .dvr-reply a::before {
	content: "";
	width: 15px;
	height: 15px;
	flex: none;
	background-color: currentColor;
}

.dvr-helpful::before {
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 22V11l5-9a2.5 2.5 0 0 1 2.4 3.2L13.5 9H20a2 2 0 0 1 2 2.4l-1.6 8A2 2 0 0 1 18.4 21H7z'/%3E%3Crect x='2' y='11' width='5' height='11' rx='1'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 22V11l5-9a2.5 2.5 0 0 1 2.4 3.2L13.5 9H20a2 2 0 0 1 2 2.4l-1.6 8A2 2 0 0 1 18.4 21H7z'/%3E%3Crect x='2' y='11' width='5' height='11' rx='1'/%3E%3C/svg%3E") center/contain no-repeat;
}

.dvr-card__foot .dvr-reply a::before {
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 14 4 9 9 4'/%3E%3Cpath d='M20 20v-7a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 14 4 9 9 4'/%3E%3Cpath d='M20 20v-7a4 4 0 0 0-4-4H4'/%3E%3C/svg%3E") center/contain no-repeat;
}

.dvr-helpful:hover,
.dvr-card__foot .dvr-reply a:hover,
.dvr-helpful.is-voted {
	background: none;
	box-shadow: none;
	color: var(--dvr-primary);
}

.dvr-helpful[disabled] {
	cursor: default;
	opacity: 1;
}

/* --- Phân trang ----------------------------------------------------------- */

.dvr-pagination {
	margin-top: 22px;
	text-align: center;
}

.dvr-pagination ul.page-numbers {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.dvr-pagination li {
	margin: 0;
	border: 0;
}

.dvr-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--dvr-line);
	border-radius: 50%;
	background-color: #fff;
	color: var(--dvr-body);
	font-size: 14px;
	font-weight: 600;
}

.dvr-pagination .page-numbers.current {
	border-color: var(--dvr-primary);
	background-color: var(--dvr-primary);
	color: #fff;
}

.dvr-pagination a.page-numbers:hover {
	border-color: var(--dvr-primary);
	color: var(--dvr-primary);
}

.dvr-page-arrow {
	width: 9px;
	height: 9px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.dvr-page-arrow--next {
	transform: rotate(45deg) translate(-1px, 1px);
}

.dvr-page-arrow--prev {
	transform: rotate(-135deg) translate(-1px, 1px);
}

/* --- Form đánh giá -------------------------------------------------------- */

.dvr-formcard {
	padding: 26px 24px 24px;
	border: 1px solid var(--dvr-line);
	border-radius: 0;
	background-color: var(--dvr-card);
}

/* Flatsome có #comments .comment-respond .comment-reply-title hạng (1,2,0), chỉ
   thắng khi thẻ form đã dời xuống dưới đánh giá — phải leo cao hơn cho chắc. */
.devvn-reviews #review_form_wrapper.dvr-formcard .comment-reply-title {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	color: var(--dvr-ink);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.dvr-form__lead {
	margin: 6px 0 20px;
	color: var(--dvr-muted);
	font-size: 14px;
}

.dvr-formcard form.comment-form {
	margin: 0;
}

.dvr-field {
	margin: 0 0 18px;
	position: relative;
}

.dvr-label,
.dvr-formcard .dvr-field label {
	display: block;
	margin: 0 0 8px;
	color: var(--dvr-ink);
	font-size: 14.5px;
	font-weight: 600;
}

.dvr-label .required,
.dvr-formcard .required {
	color: var(--dvr-primary);
}

.dvr-formcard input[type="text"],
.dvr-formcard input[type="email"],
.dvr-formcard textarea {
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var(--dvr-line);
	border-radius: 0;
	background-color: #fff;
	box-shadow: none;
	color: var(--dvr-ink);
	font-size: 15px;
	line-height: 1.6;
}

.dvr-formcard textarea {
	min-height: 130px;
	resize: vertical;
}

.dvr-formcard input:focus,
.dvr-formcard textarea:focus {
	border-color: var(--dvr-star);
	box-shadow: 0 0 0 3px rgba(226, 163, 60, 0.18);
	outline: none;
}

/* Họ tên và Email đứng chung một hàng hai cột. */
.dvr-identity {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}

.dvr-identity .dvr-field {
	flex: 1 1 150px;
	min-width: 0;
}

/* Ô "lưu tên, email..." của WordPress — chữ nhỏ, nhạt, không đứng chắn form. */
.dvr-formcard .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 14px 0 0;
}

.dvr-formcard .comment-form-cookies-consent input[type="checkbox"] {
	flex: none;
	margin: 3px 0 0;
}

.dvr-formcard .comment-form-cookies-consent label {
	margin: 0;
	color: var(--dvr-muted);
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.5;
}

.dvr-counter {
	display: block;
	margin-top: 6px;
	color: var(--dvr-muted);
	font-size: 12.5px;
	text-align: right;
}

/* Chọn sao: radio thật, CSS vẽ ngôi sao — vẫn bấm và tab được. */
.dvr-stars-input {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 6px;
}

.dvr-stars-input input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	overflow: hidden;
	white-space: nowrap;
}

.dvr-stars-input label {
	width: 34px;
	height: 34px;
	margin: 0;
	cursor: pointer;
	background-color: var(--dvr-star-empty);
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.1 8.6 22 9.6 17 14.6 18.2 21.6 12 18.3 5.8 21.6 7 14.6 2 9.6 8.9 8.6'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.1 8.6 22 9.6 17 14.6 18.2 21.6 12 18.3 5.8 21.6 7 14.6 2 9.6 8.9 8.6'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: background-color 0.15s;
}

/* row-reverse nên "~" phủ đúng các sao bên trái của sao đang chọn. */
.dvr-stars-input input:checked~label,
.dvr-stars-input label:hover,
.dvr-stars-input label:hover~label,
.dvr-stars-input input:focus-visible+label {
	background-color: var(--dvr-star);
}

.dvr-notes {
	margin: 4px 0 0;
}

.dvr-note {
	position: relative;
	margin: 0 0 10px;
	padding-left: 26px;
	color: var(--dvr-body);
	font-size: 13px;
	line-height: 1.5;
}

.dvr-note::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1px;
	width: 16px;
	height: 16px;
	background-color: var(--dvr-muted);
}

.dvr-note--shield::before {
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.dvr-note--user::before {
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E") center/contain no-repeat;
}

#review_form_wrapper .form-submit {
	margin: 20px 0 0;
}

/* Flatsome + CSS sinh từ Customizer có .button:not(.icon) — :not() tính như một
   class nên hạng (0,2,0), hoà với .dvr-formcard .dvr-submit mà lại in sau ở
   wp_head:100 nên thắng. Phải kèm #review_form_wrapper mới đè được.
   Chiều cao đặt bằng min-height chứ không dựa vào line-height: theme đặt
   line-height cho <span> bên trong nên nút bị bẹp còn 23px. */
.devvn-reviews #review_form_wrapper .dvr-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 54px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: 0;
	background-color: var(--dvr-primary);
	box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	transition: background-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.devvn-reviews #review_form_wrapper .dvr-submit__label {
	line-height: 1.2;
}

.devvn-reviews #review_form_wrapper .dvr-submit::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='22' y1='2' x2='11' y2='13'/%3E%3Cpolygon points='22 2 15 22 11 13 2 9'/%3E%3C/svg%3E") center/contain no-repeat;
}

.devvn-reviews #review_form_wrapper .dvr-submit:hover,
.devvn-reviews #review_form_wrapper .dvr-submit:focus-visible {
	background-color: var(--dvr-primary-dark);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
	color: #fff;
	transform: translateY(-1px);
}

.devvn-reviews #review_form_wrapper .dvr-submit:focus-visible {
	outline: 2px solid var(--dvr-star);
	outline-offset: 3px;
}

.devvn-reviews #review_form_wrapper .dvr-submit:active {
	box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {

	.devvn-reviews #review_form_wrapper .dvr-submit,
	.devvn-reviews #review_form_wrapper .dvr-submit:hover,
	.devvn-reviews #review_form_wrapper .dvr-submit:active {
		transform: none;
		transition: none;
	}
}

.dvr-policy {
	margin: 14px 0 0;
	color: var(--dvr-muted);
	font-size: 12.5px;
	line-height: 1.6;
	text-align: center;
}

.dvr-policy a {
	color: var(--dvr-primary);
	text-decoration: underline;
}

.dvr-empty {
	margin: 0;
	padding: 18px 20px;
	border: 1px solid var(--dvr-line);
	border-radius: var(--dvr-radius);
	background-color: var(--dvr-card);
	color: var(--dvr-body);
}

/* Chưa có đánh giá: một ô cao, icon và chữ canh giữa cho đỡ trống trải. */
.dvr-empty--state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 260px;
	padding: 40px 24px;
	text-align: center;
}

.dvr-empty__icon {
	display: block;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	background-color: var(--dvr-muted);
	-webkit-mask: var(--dvr-empty-icon) center/contain no-repeat;
	mask: var(--dvr-empty-icon) center/contain no-repeat;
}

.dvr-empty__title {
	margin: 0;
	color: var(--dvr-ink);
	font-size: 15px;
	font-weight: 600;
}

.dvr-empty__hint {
	margin: 0;
	color: var(--dvr-muted);
	font-size: 13.5px;
}

.comment-form>div,
.comment-form>p {
	padding: 0 !important;
}

/* --- Chế độ trả lời một đánh giá ----------------------------------------- */

/* comment_reply_link dùng respond_id = review_form_wrapper nên WordPress dời cả
   thẻ form xuống dưới đánh giá — mọi style .dvr-formcard vì thế vẫn còn nguyên. */
.dvr-list .dvr-item>.dvr-formcard {
	margin: 14px 0 0;
	border-color: var(--dvr-primary);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .07);
}

/* Flatsome tô nền xám và thụt lề cho #comments .comment-respond — chỉ ăn sau khi
   thẻ form dời vào #comments, nên phải trung hoà tại đây. */
.devvn-reviews #review_form_wrapper .comment-respond {
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
}

.dvr-formcard #cancel-comment-reply-link {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--dvr-muted);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.dvr-formcard #cancel-comment-reply-link::before {
	content: "";
	width: 13px;
	height: 13px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
}

.dvr-formcard #cancel-comment-reply-link:hover {
	color: var(--dvr-primary);
}

/* Hai câu dẫn cùng in ra, CSS chọn câu hợp chế độ. */
.dvr-form__lead--reply,
.dvr-formcard.is-reply .dvr-form__lead--new {
	display: none;
}

.dvr-formcard.is-reply .dvr-form__lead--reply {
	display: block;
}

/* Trả lời thì không chấm sao. */
.dvr-formcard.is-reply .comment-form-rating {
	display: none;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1099px) {
	.dvr-layout {
		grid-template-columns: minmax(0, 1fr) 340px;
		gap: 28px;
	}
}

@media (max-width: 849px) {
	.dvr-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 26px;
	}

	.dvr-summary {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.dvr-bars {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 549px) {
	.dvr-title {
		font-size: 18px;
	}

	.dvr-summary__avg {
		font-size: 34px;
	}

	.dvr-card {
		grid-template-columns: 60px minmax(0, 1fr);
		gap: 12px;
		padding: 14px;
	}

	.dvr-card__avatar img {
		width: 48px;
		height: 48px;
	}

	.dvr-card__top {
		flex-wrap: wrap;
	}

	.dvr-list .children {
		margin-left: 16px;
	}

	.dvr-formcard {
		padding: 20px 16px 18px;
	}

	.dvr-stars-input label {
		width: 30px;
		height: 30px;
	}

	/* Hai ô cạnh nhau chỉ còn ~156px, chật — cho xuống dòng. */
	.dvr-identity {
		display: block;
	}
}