/* ======= Select2 style chuẩn Tailwind ======= */
/* Hiển thị single select */
.select2-container--tailwind .select2-selection--single {
  display: flex;
  align-items: center;
  height: 2.5rem; /* 40px = h-10 */
  padding: 0.5rem 0.75rem; /* py-2 px-3 */
  border: 1px solid #d1d5db; /* gray-300 */
  border-radius: 0.375rem; /* rounded-md */
  background-color: #ffffff;
  box-shadow: none;
  color: #111827; /* text-gray-900 */
  font-size: 0.875rem; /* text-sm */
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* Khi mở (focus/open) */
.select2-container--tailwind.select2-container--open .select2-selection--single {
  border-color: #3b82f6; /* blue-500 */
  box-shadow: 0 0 0 1px rgba(59,130,246,0.15);
}

/* Placeholder */
.select2-container--tailwind .select2-selection--single .select2-selection__placeholder {
  color: #9ca3af; /* text-gray-400 */
}

/* Rendered text */
.select2-container--tailwind .select2-selection--single .select2-selection__rendered {
  line-height: 1.25rem; /* leading-5 */
  padding-left: 0;
  color: #111827;
}

/* Arrow */
.select2-container--tailwind .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 0.5rem;
  display: flex;
  align-items: center;
  padding-left: 0.5rem;
}

/* Dropdown */
.select2-container--tailwind .select2-dropdown {
  margin-top: 0.25rem;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08);
  background: #fff;
  overflow: hidden;
}

/* Items */
.select2-container--tailwind .select2-results__option {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  cursor: pointer;
}

/* Hover/highlight */
.select2-container--tailwind .select2-results__option--highlighted {
  background-color: #eff6ff; /* blue-50 */
  color: #1e40af; /* blue-800/darker */
}

/* Selected in list */
.select2-container--tailwind .select2-results__option[aria-selected="true"] {
  background-color: #dbeafe; /* blue-100 */
  color: #1e3a8a; /* blue-900 */
}

/* Multi-select pills */
.select2-container--tailwind .select2-selection--multiple {
  min-height: 2.5rem;
  padding: 0.25rem 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.select2-container--tailwind .select2-selection__choice {
  background-color: #eef2ff; /* indigo-50 like */
  border: 1px solid #e0e7ff;
  color: #3730a3;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
}

/* Small responsiveness tweaks if needed */
@media (min-width: 640px) {
  .select2-container--tailwind .select2-selection--single {
    min-width: 12rem;
  }
}
/* Giới hạn chiều cao danh sách dropdown và bật scroll */
.select2-container--tailwind .select2-results__options {
  max-height: 16rem; /* = h-64 (~256px), đủ hiển thị 6–8 dòng */
  overflow-y: auto;
  scrollbar-width: thin; /* Firefox */
}

/* Style scrollbar (optional, cho đẹp nếu bạn muốn giống Tailwind) */
.select2-container--tailwind .select2-results__options::-webkit-scrollbar {
  width: 6px;
}
.select2-container--tailwind .select2-results__options::-webkit-scrollbar-thumb {
  background-color: #d1d5db; /* gray-300 */
  border-radius: 9999px;
}
.select2-container--tailwind .select2-results__options::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af; /* gray-400 */
}
/* Đảm bảo dấu X nằm ở cuối, sau text */
.select2-container--tailwind .select2-selection--single .select2-selection__clear {
  order: 99;                /* đẩy ra cuối cùng */
  margin-left: auto;        /* đẩy sát mép phải */
  margin-right: 0.5rem;     /* cách viền phải 8px */
  color: #9ca3af;           /* gray-400 */
  cursor: pointer;
}

.select2-container--tailwind .select2-selection--single .select2-selection__clear:hover {
  color: #6b7280;           /* gray-500 */
}
.select2-container--tailwind .select2-selection--multiple .select2-selection__clear {
  order: 99;
  margin-left: auto;
  margin-right: 0.5rem;
}

/* Style cho ô tìm kiếm trong dropdown */
.select2-container--tailwind .select2-search--dropdown {
  padding: 0.5rem; /* tương đương p-2 */
}

.select2-container--tailwind .select2-search__field {
  width: 100%;
  padding: 0.5rem 0.75rem; /* px-3 py-2 */
  border: 1px solid #d1d5db; /* border-gray-300 */
  border-radius: 0.375rem;   /* rounded-md */
  font-size: 0.875rem;       /* text-sm */
  color: #111827;            /* text-gray-900 */
  outline: none;
  background-color: #fff;
}

.select2-container--tailwind .select2-search__field:focus {
  border-color: #3b82f6;     /* blue-500 */
  box-shadow: 0 0 0 1px #3b82f6;
}