<style>
/* Đổi con trỏ chuột khi tương tác với các nhóm combo từ 1 đến 6 */
#GROUP1, #GROUP2, #GROUP3, #GROUP4, #GROUP5, #GROUP6 {
cursor: pointer !important;
}
/* 1. KHI ĐƯỢC CHỌN: TRIỆT TIÊU VIỀN GỐC CỦA RECT ĐỂ TRÁNH LÊN 2 VIỀN */
.rect-active {
border: none !important;
box-shadow: none !important;
outline: none !important;
}
/* 2. LỚP PHỦ ƯU TIÊN CAO NHẤT: VỪA TẠO VIỀN ĐEN VỪA PHỦ MỜ 8% */
.custom-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
border-radius: 15px !important; /* Độ bo góc 15px chuẩn thiết kế */
box-sizing: border-box !important;
/* Viền đen 2px và Nền tối mờ 8% */
border: 2px solid #000000 !important;
background-color: rgba(0, 0, 0, 0.08) !important;
z-index: 99999 !important; /* Đè lên trên cùng của Group */
pointer-events: none !important; /* Không cản trở click */
}
/* 3. HIỆU ỨNG CHO ICON HÌNH TRÒN KHI ĐƯỢC CHỌN */
.icon-checked {
position: relative !important;
overflow: visible !important;
}
.icon-checked::after {
content: "" !important;
position: absolute !important;
top: 4px !important;
left: 4px !important;
right: 4px !important;
bottom: 4px !important;
background-color: #000000 !important; /* Nhân đen bên trong */
border-radius: 50% !important;
z-index: 100000 !important; /* Nổi lên trên lớp phủ */
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
// Cấu hình danh sách 6 nhóm Combo của bạn
const comboConfig = [
{ group: "#GROUP1", rect: "#RECT1", icon: "#ICON1", formIndex: 0 },
{ group: "#GROUP2", rect: "#RECT2", icon: "#ICON2", formIndex: 1 },
{ group: "#GROUP3", rect: "#RECT3", icon: "#ICON3", formIndex: 2 },
{ group: "#GROUP4", rect: "#RECT4", icon: "#ICON4", formIndex: 3 },
{ group: "#GROUP5", rect: "#RECT5", icon: "#ICON5", formIndex: 4 },
{ group: "#GROUP6", rect: "#RECT6", icon: "#ICON6", formIndex: 5 }
];
// Hàm dọn dẹp trạng thái cũ
function resetCombos() {
comboConfig.forEach(item => {
const groupElement = document.querySelector(item.group);
const rectElement = document.querySelector(item.rect);
const iconElement = document.querySelector(item.icon);
if (rectElement) rectElement.classList.remove("rect-active");
if (iconElement) iconElement.classList.remove("icon-checked");
if (groupElement) {
const oldOverlay = groupElement.querySelector(".custom-overlay");
if (oldOverlay) oldOverlay.remove();
}
});
}
// Hàm đồng bộ với 6 ô chọn trong Form LadiPage
function syncWithLadiForm(targetIndex) {
const formInputs = document.querySelectorAll('.ladi-form-item input[type="checkbox"], .ladi-form-item input[type="radio"]');
if (formInputs.length > 0) {
formInputs.forEach((input, index) => {
if (index === targetIndex) {
input.checked = true;
const event = new Event('change', { bubbles: true });
input.dispatchEvent(event);
} else {
input.checked = false;
}
});
}
}
// Hàm kích hoạt hiệu ứng
function activeCombo(item) {
resetCombos();
const currentGroup = document.querySelector(item.group);
const currentRect = document.querySelector(item.rect);
const currentIcon = document.querySelector(item.icon);
if (currentRect) currentRect.classList.add("rect-active");
if (currentIcon) currentIcon.classList.add("icon-checked");
if (currentGroup && currentRect) {
const overlay = document.createElement("div");
overlay.className = "custom-overlay";
// Tính toán tọa độ và kích thước khít theo HCN nền
overlay.style.top = currentRect.offsetTop + "px";
overlay.style.left = currentRect.offsetLeft + "px";
overlay.style.width = currentRect.offsetWidth + "px";
overlay.style.height = currentRect.offsetHeight + "px";
currentGroup.appendChild(overlay);
}
syncWithLadiForm(item.formIndex);
}
// Gán sự kiện click cho cả 6 nhóm
comboConfig.forEach(item => {
const groupElement = document.querySelector(item.group);
if (groupElement) {
groupElement.addEventListener("click", function () {
activeCombo(item);
});
}
});
});
</script>