.elementor-3699 .elementor-element.elementor-element-1daa0c3f{--display:flex;}.elementor-3699 .elementor-element.elementor-element-880961e .e-contact-buttons{--e-contact-buttons-button-icon:var( --e-global-color-primary );--e-contact-buttons-button-bg:#E1E1E27A;--e-contact-buttons-button-bg-hover:#37393B;--e-contact-buttons-contact-button-bg:#37393B80;--e-contact-buttons-contact-button-icon-hover:var( --e-global-color-primary );--e-contact-buttons-horizontal-offset:20px;--e-contact-buttons-vertical-offset:120px;}/* Start custom CSS for contact-buttons-var-4, class: .elementor-element-880961e *//* 1. Ẩn icon SVG mặc định đi */

.e-contact-buttons__contact-links a:nth-child(1) svg {

    display: none !important;

}



/* 2. Thêm icon Zalo làm hình nền cho thẻ span chứa icon */

/* 2.1. Cài đặt cho CÁI HỘP (Giữ màu nền ô tròn, XÓA ảnh icon ở lớp nền) */
.e-contact-buttons__contact-links a:nth-child(1) .e-contact-buttons__contact-icon-container {
    position: relative;
    background-image: none !important;
}

/* 2.2. Tạo lớp giả (::before) chứa ICON Zalo màu TRẮNG */
.e-contact-buttons__contact-links a:nth-child(1) .e-contact-buttons__contact-icon-container::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    
    /* Ảnh nền Zalo */
    background-image: url('https://hanacasa.vn/wp-content/uploads/2025/09/zalo-logo-original.svg');
    background-size: 45% 45%;
    background-repeat: no-repeat;
    background-position: center;
    
    /* Biến thành màu TRẮNG */
    filter: brightness(0) invert(1);
    
    /* Thêm hiệu ứng chuyển màu mượt mà (0.3 giây) */
    transition: filter 0.3s ease;
    
    pointer-events: none;
}

/* 3. Hiệu ứng HOVER: Khi rê chuột vào nút -> Trả lại màu ĐEN gốc */
.e-contact-buttons__contact-links a:nth-child(1):hover .e-contact-buttons__contact-icon-container::before {
    /* Gỡ bỏ bộ lọc màu trắng, icon sẽ hiện lại màu gốc (đen) */
    filter: none; 
}/* End custom CSS */