/**
 * DS Elements — Tóm tắt sản phẩm
 *
 * Cột dọc, mọi khối cách nhau đúng một biến. Chữ nhãn nhóm ("MÀU SẮC") là h2 in
 * hoa cỡ nhỏ chứ không phải cỡ h2 thật: nó cần đúng bậc trong cây tiêu đề của
 * trang cho máy đọc màn hình, nhưng trong thiết kế nó chỉ là một dòng nhãn.
 */

.elementor-widget-ds-product-summary {
	width: 100%;
	min-width: 0;
}

.ds-psum {
	--ds-psum-gap: var(--ds-space-6);
	--ds-psum-swatch-size: 32px;

	display: flex;
	flex-direction: column;
	gap: var(--ds-psum-gap);
	width: 100%;
	min-width: 0;
}

.ds-psum *,
.ds-psum *::before,
.ds-psum *::after {
	box-sizing: border-box;
}

/* --- Tên và dòng thông tin ---------------------------------------------- */

.ds-psum__title {
	margin: 0;
	color: var(--ds-psum-title-color, var(--ds-color-brand));
	font-size: var(--ds-psum-title-fs, var(--ds-fs-h3));
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-h2);
	text-transform: uppercase;
}

/* Tên đứng liền dòng đánh giá — hai thứ đọc như một cụm, để cách đủ một bậc
   gap thì dòng sao trông như một khối riêng lơ lửng. */
.ds-psum__title + .ds-psum__meta {
	margin-top: calc(var(--ds-psum-gap) * -1 + var(--ds-space-3));
}

.ds-psum__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ds-space-2) var(--ds-space-3);
	color: var(--ds-psum-meta-color, var(--ds-color-body));
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
}

.ds-psum__rating {
	display: inline-flex;
	align-items: center;
	gap: var(--ds-space-2);
}

.ds-psum__stars {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	line-height: 0;
}

.ds-psum__stars-base,
.ds-psum__stars-fill {
	display: flex;
	gap: 2px;
}

.ds-psum__stars-base {
	color: var(--ds-color-border);
}

/* Lớp vàng cắt theo phần trăm điểm. overflow: hidden trên phần tử có width tính
   bằng % của khối sao, nên không phụ thuộc số sao hay cỡ sao. */
.ds-psum__stars-fill {
	position: absolute;
	inset: 0;
	overflow: hidden;
	color: var(--ds-psum-star-color, var(--ds-color-amber));
}

.ds-psum__stars svg {
	width: 15px;
	height: 15px;
	display: block;
	flex: 0 0 auto;
	fill: currentColor;
}

.ds-psum__score {
	color: var(--ds-color-heading);
	font-weight: var(--ds-fw-semibold);
}

.ds-psum__divider {
	width: 1px;
	height: 14px;
	background: var(--ds-color-border);
}

.ds-psum__sku b {
	color: var(--ds-color-heading);
	font-weight: var(--ds-fw-semibold);
}

.ds-psum__tagline {
	margin: 0;
	color: var(--ds-color-body);
	font-size: var(--ds-fs-body);
	font-weight: var(--ds-fw-semibold);
	line-height: var(--ds-lh-body);
}

/* --- Điểm nổi bật ------------------------------------------------------- */

.ds-psum__points {
	display: flex;
	flex-direction: column;
	gap: var(--ds-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-psum__point {
	display: flex;
	align-items: center;
	gap: var(--ds-space-3);
	min-width: 0;
	color: var(--ds-color-body);
	font-size: var(--ds-fs-body);
	line-height: var(--ds-lh-tight);
}

.ds-psum__point-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	color: var(--ds-psum-point-icon, var(--ds-color-brand-light));
}

.ds-psum__point-icon i {
	font-size: 16px;
	line-height: 1;
}

/* SVG của Elementor không kế thừa color — thiếu dòng này là icon đen kịt. */
.ds-psum__point-icon svg {
	width: 16px;
	height: 16px;
	display: block;
	fill: currentColor;
}

/* --- Nhóm thuộc tính ---------------------------------------------------- */

.ds-psum__group {
	display: flex;
	flex-direction: column;
	gap: var(--ds-space-3);
	min-width: 0;
}

.ds-psum__attr-label {
	margin: 0;
	color: var(--ds-psum-attr-label-color, var(--ds-color-brand));
	font-size: var(--ds-fs-small);
	font-weight: var(--ds-fw-bold);
	line-height: var(--ds-lh-tight);
	letter-spacing: var(--ds-ls-eyebrow);
	text-transform: uppercase;
}

.ds-psum__values {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ds-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ds-psum__value {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: border-color var(--ds-transition), color var(--ds-transition);
}

/* Nút chọn màu là <button> — gỡ nền/viền mặc định của trình duyệt để nó trông
   y hệt ô màu dạng <a>/<span>, chỉ khác ở con trỏ tay. */
button.ds-psum__value {
	background: none;
	font: inherit;
	cursor: pointer;
}

.ds-psum__value--static {
	cursor: default;
}

/* Ô màu: viền ngoài cách ô một khoảng, để màu tối vẫn thấy được vòng đánh dấu. */
.ds-psum__value--swatch {
	width: calc(var(--ds-psum-swatch-size) + var(--ds-space-2));
	height: calc(var(--ds-psum-swatch-size) + var(--ds-space-2));
	padding: 3px;
	border: 2px solid transparent;
	border-radius: var(--ds-radius-md);
}

.ds-psum__dot {
	width: 100%;
	height: 100%;
	display: block;
	border: 1px solid var(--ds-color-border);
	border-radius: var(--ds-radius-sm);
}

.ds-psum__value--chip {
	min-height: 40px;
	padding: var(--ds-space-2) var(--ds-space-4);
	color: var(--ds-color-body);
	font-size: var(--ds-fs-body);
	line-height: var(--ds-lh-tight);
	border: 1px solid var(--ds-color-border);
	border-radius: var(--ds-radius-md);
}

.ds-psum__value:hover {
	border-color: var(--ds-color-line-soft);
}

/* Giá trị mà sản phẩm đang xem thực sự có (nhóm lọc), và màu đang chiếu trên
   khung ảnh (nhóm đổi ảnh) — cùng một kiểu viền đánh dấu. */
.ds-psum__value.is-owned,
.ds-psum__value.is-current {
	border-color: var(--ds-psum-attr-active, var(--ds-color-brand));
}

.ds-psum__value--chip.is-owned,
.ds-psum__value--chip.is-current {
	color: var(--ds-color-brand);
	font-weight: var(--ds-fw-semibold);
}

/* --- Nút kêu gọi -------------------------------------------------------- */

.ds-psum__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ds-space-4);
}

.ds-psum__btn {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ds-space-2);
	min-height: 52px;
	padding: var(--ds-space-3) var(--ds-space-6);

	font-size: var(--ds-fs-button);
	font-weight: var(--ds-fw-semibold);
	line-height: var(--ds-lh-button);
	letter-spacing: var(--ds-ls-button);
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--ds-radius-md);
	transition: background var(--ds-transition), color var(--ds-transition), border-color var(--ds-transition);
}

.ds-psum__btn--primary {
	background: var(--ds-psum-primary-bg, var(--ds-color-brand));
	color: var(--ds-psum-primary-color, var(--ds-color-white));
	border: 1px solid transparent;
}

.ds-psum__btn--primary:hover {
	background: var(--ds-color-brand-light);
	color: var(--ds-psum-primary-color, var(--ds-color-white));
}

.ds-psum__btn--ghost {
	background: var(--ds-color-white);
	color: var(--ds-psum-secondary-color, var(--ds-color-brand));
	border: 1px solid var(--ds-psum-secondary-border, var(--ds-color-border));
}

.ds-psum__btn--ghost:hover {
	border-color: var(--ds-color-brand);
}

.ds-psum__btn-icon {
	display: grid;
	place-items: center;
}

.ds-psum__btn-icon i {
	font-size: 18px;
	line-height: 1;
}

.ds-psum__btn-icon svg {
	width: 18px;
	height: 18px;
	display: block;
	fill: currentColor;
}

/* --- Dòng ghi chú ------------------------------------------------------- */

.ds-psum__note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ds-space-2);

	/* Dính ngay dưới hàng nút, không cách một bậc gap: nó là chú thích của nút. */
	margin: calc(var(--ds-psum-gap) * -1 + var(--ds-space-3)) 0 0;
	color: var(--ds-psum-note-color, var(--ds-color-muted));
	font-size: var(--ds-fs-small);
	line-height: var(--ds-lh-small);
}

.ds-psum__note-icon {
	display: grid;
	place-items: center;
	color: var(--ds-color-amber);
}

.ds-psum__note-icon i {
	font-size: 14px;
	line-height: 1;
}

.ds-psum__note-icon svg {
	width: 14px;
	height: 14px;
	display: block;
	fill: currentColor;
}

/* --- Màn nhỏ ------------------------------------------------------------ */

@media (max-width: 767px) {
	.ds-psum {
		--ds-psum-gap: var(--ds-space-4);
	}

	/* Hai nút ngang nhau ở khổ 358px thì mỗi nút 171px, mà "NHẬN BÁO GIÁ NGAY"
	   riêng phần chữ đã 160px — vỡ dòng ngay. Xếp chồng. */
	.ds-psum__btn {
		flex: 1 1 100%;
	}
}