/*
 * Bộ chọn tuỳ chọn cộng tiền.
 *
 * Cố ý trông GIỐNG bộ chọn biến thể của theme (.variations .obtn): với khách,
 * "chọn 128GB hay 256GB" và "chọn màu" là cùng một việc — hai kiểu nút khác
 * nhau trên cùng một khối mua hàng chỉ làm người ta khựng lại.
 *
 * Dùng biến của theme (--fg, --line, --card, --price…) kèm giá trị dự phòng.
 */

/* Lưu ý màu: chỗ nào là CHỮ màu đỏ trên nền sáng thì dùng --price-text (đỏ đậm
   hơn), không dùng --price. #E11D2A làm chữ cỡ nhỏ trên nền nhạt chỉ đạt 4,28,
   dưới ngưỡng WCAG 4,5. Nền và viền vẫn giữ --price để không đổi màu nhận
   diện. Biến do theme khai. Sửa 2026-09-20. */

.vio-adg {
	margin: 14px 0;
}

.vio-adg-nhom + .vio-adg-nhom {
	margin-top: 12px;
}

.vio-adg-ten {
	margin-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	color: var(--fg-2, #4B5563);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.vio-adg-sao {
	color: var(--price-text, #C2151F);
}

.vio-adg-hang {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.vio-adg-nut {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;

	/* 44px — ngón tay, không phải con trỏ chuột. */
	min-height: 44px;
	padding: 7px 14px;

	border: 1.5px solid var(--line, #E7E9EE);
	border-radius: var(--r-sm, 8px);
	background: var(--card, #FFFFFF);
	color: var(--fg, #0E1116);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.vio-adg-nut:hover {
	border-color: var(--fg-3, #8A93A0);
}

.vio-adg-nut.on {
	border-color: var(--price, #E11D2A);
	background: var(--price-soft, #FFF1F2);
	box-shadow: inset 0 0 0 1px var(--price, #E11D2A);
}

.vio-adg-nut:focus-visible {
	outline: 2px solid var(--info, #1C64F2);
	outline-offset: 2px;
}

.vio-adg-tien {
	font-size: 12px;
	font-weight: 600;
	color: var(--fg-2, #4B5563);
}

.vio-adg-nut.on .vio-adg-tien {
	color: var(--price-text, #C2151F);
}

/* Nhóm bắt buộc mà khách bấm mua khi chưa chọn — JS gắn class này. */
.vio-adg-nhom.thieu .vio-adg-hang {
	padding: 6px;
	margin: -6px;
	border-radius: var(--r-sm, 8px);
	box-shadow: 0 0 0 2px var(--price, #E11D2A);
}

.vio-adg-nhom.thieu .vio-adg-ten::after {
	content: " — bạn chọn giúp mình mục này";
	font-weight: 600;
	color: var(--price-text, #C2151F);
	text-transform: none;
	letter-spacing: 0;
}

/* --- Dòng tổng tiền cộng thêm ------------------------------------------- */

.vio-adg-tong {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
	padding: 10px 12px;
	border-radius: var(--r-sm, 8px);
	background: var(--line-2, #F1F3F6);
	font-size: 14px;
}

.vio-adg-tong-nhan {
	color: var(--fg-2, #4B5563);
}

.vio-adg-tong b {
	font-size: 16px;
	color: var(--price-text, #C2151F);
	white-space: nowrap;
}

@media (max-width: 640px) {
	.vio-adg-nut { font-size: 13px; padding: 7px 12px; }
}