/*!
 * Select2 Bootstrap4 Fix
 * Giúp Select2 hiển thị theo style Bootstrap 4 mà vẫn hỗ trợ tags:true
 */

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-top-right-radius: .25rem; border-top-left-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-sizing: border-box;
}

/* Khi focus */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color:#80bdff;
    outline: 0;
    /* box-shadow: 0 0 0 .2rem rgba(0,123,255,.25); */
}

/* Nút xóa trong select */
.select2-selection__clear {
    cursor: pointer;
    font-weight: bold;
    color: #dc3545 !important;
    margin-right: .5rem;
}

/* Dropdown */
.select2-dropdown {
    border-radius: .25rem;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
}

/* Option */
.select2-results__option {
    padding: .375rem .75rem;
    font-size: 1rem;
}

/* Option hover */
.select2-results__option--highlighted {
    background-color: #007bff !important;
    color: #fff !important;
}

/* Multiple select - tag style */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #007bff;
    border: none;
    color: #fff;
    padding: 0 .4rem;
    margin-top: .25rem;
    margin-right: .25rem;
    border-radius: .2rem;
}

/* Multiple select - nút xóa trong tag */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgba(255, 255, 255, 0.9);
    margin-right: 3px;
    font-weight: bold;
}

/* Đặt viền cho dropdown */
.select2-container .select2-dropdown {
    border: 1px solid #80bdff;   /* giống border form-control */
    border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem;    /* bo góc chuẩn bootstrap */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1); /* đổ bóng nhẹ */
}

/* Đặt viền trên cùng gắn liền với input */
.select2-container .select2-dropdown--below {
    margin-top: -1px;  /* để dính liền border với ô input */
}

.select2-container .select2-dropdown--above {
    margin-bottom: -1px;
}
/* Căn giữa icon tam giác trong select2 */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 50%;
    transform: translateY(-50%); /* căn giữa theo chiều dọc */
    right: 3px; /* chỉnh khoảng cách với viền phải */
}
/* Đổi màu tam giác trong Select2 */
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: black transparent transparent transparent;
}