/**
 * Force Override CSS - Fix nhiều dấu mũi tên
 * Độ ưu tiên cao nhất để override tất cả CSS khác
 */

/* Reset hoàn toàn background-image cho tất cả select */
select.provinces-select,
select.wards-select,
.provinces-api-cf7-container select,
.wpcf7-form .provinces-api-cf7-container select,
.provinces-api-cf7-container select *,
.wpcf7-form .provinces-api-cf7-container select *,
.provinces-api-cf7-container select option,
.wpcf7-form .provinces-api-cf7-container select option {
    background-image: none !important;
    background: white !important;
}

/* Chỉ áp dụng một background-image duy nhất cho select dropdown */
select.provinces-select:not([multiple]),
select.wards-select:not([multiple]),
.provinces-api-cf7-container select:not([multiple]),
.wpcf7-form .provinces-api-cf7-container select:not([multiple]) {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667eea' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 18px !important;
    padding-right: 55px !important;
    background-color: white !important;
}

/* Loại bỏ tất cả pseudo-elements */
select.provinces-select::before,
select.provinces-select::after,
select.wards-select::before,
select.wards-select::after,
.provinces-api-cf7-container select::before,
.provinces-api-cf7-container select::after,
.wpcf7-form .provinces-api-cf7-container select::before,
.wpcf7-form .provinces-api-cf7-container select::after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
}

/* Loại bỏ mũi tên mặc định của các trình duyệt */
select.provinces-select::-ms-expand,
select.wards-select::-ms-expand,
.provinces-api-cf7-container select::-ms-expand,
.wpcf7-form .provinces-api-cf7-container select::-ms-expand {
    display: none !important;
}

/* Override tất cả appearance */
select.provinces-select,
select.wards-select,
.provinces-api-cf7-container select,
.wpcf7-form .provinces-api-cf7-container select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    -ms-appearance: none !important;
}

/* Đảm bảo không có background nào khác */
select.provinces-select *,
select.wards-select *,
.provinces-api-cf7-container select *,
.wpcf7-form .provinces-api-cf7-container select * {
    background-image: none !important;
    background: transparent !important;
}

/* Fix cho các theme có thể override */
body select.provinces-select,
body select.wards-select,
body .provinces-api-cf7-container select,
body .wpcf7-form .provinces-api-cf7-container select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667eea' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 18px !important;
    padding-right: 55px !important;
    background-color: white !important;
}

/* Override cho tất cả các trường hợp có thể */
html body select.provinces-select,
html body select.wards-select,
html body .provinces-api-cf7-container select,
html body .wpcf7-form .provinces-api-cf7-container select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667eea' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 20px center !important;
    background-size: 18px !important;
    padding-right: 55px !important;
    background-color: white !important;
} 