/* Ví dụ CSS tùy chỉnh */
.custom-tabs .nav-link {
    border: 1px solid #dee2e6;
    border-bottom: none; /* Bỏ viền dưới mặc định */
    margin-right: 2px;
    color: #495057; /* Màu chữ khi không active */
    background-color: #f8f9fa; /* Màu nền khi không active */
    border-radius: 5px 5px 0 0; /* Bo góc trên */
    padding: 10px 20px;
    display: flex; /* Căn chỉnh icon và text */
    align-items: center;
    gap: 5px; /* Khoảng cách giữa icon và text */
}

.custom-tabs .nav-link.active {
    color: #0d6efd; /* Màu chữ khi active */
    background-color: #ffffff; /* Màu nền khi active (trắng) */
    border-color: #dee2e6 #dee2e6 #ffffff; /* Điều chỉnh viền khi active */
    font-weight: bold;
}

.custom-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    isolation: isolate;
    background-color: #e9ecef; /* Màu nền khi hover */
}

.custom-tab-content {
    border: 1px solid #dee2e6;
    border-top: none; /* Chỉ giữ viền xung quanh, bỏ viền trên */
    padding: 20px; /* Thêm padding cho nội dung */
    background-color: #ffffff; /* Nền trắng cho nội dung */
    border-radius: 0 0 5px 5px; /* Bo góc dưới */
}

/* Canh chỉnh lại form bên trong tab nếu cần */
.custom-tab-content .search-form {
    margin-top: 15px; /* Thêm khoảng cách trên cho form */
}

/* Đảm bảo các select box và input hiển thị đúng */
.select-box {
    position: relative; /* Cần thiết để định vị icon */
    margin-bottom: 15px; /* Thêm khoảng cách dưới */
}

.select-box i {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d; /* Màu icon */
}

.select-box .form-control {
    padding-left: 40px; /* Tạo khoảng trống cho icon */
}
.select-box select.form-control {
     /* Có thể cần thêm !important nếu CSS khác ghi đè */
    padding-left: 40px !important;
}