/* Select2 multi-select layout.
   The vendor stylesheet floats every chip left and the "clear all" × right. When a chip does not
   fit on the current row the browser parks it next to the (shorter) × float instead of at the
   left edge, so chips stair-step down the field, one per row, as soon as the field is narrow
   (e.g. "Người Thực Hiện" in the task detail modal). Lay the chips out as a wrapping flex row
   instead and pin the × to the corner.

   The leading `html` raises specificity just above the vendor rules so this wins regardless of
   stylesheet order, while page-scoped overrides (#schemaModal, .doctpl-perm, ...) still win. */

html .select2-container--default .select2-selection--multiple {
  position: relative;
}

html .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* keep chips and the search field clear of the pinned × */
  padding-inline-end: 2rem;
}

html .select2-container--default .select2-selection--multiple .select2-selection__choice {
  float: none;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html .select2-container--default .select2-selection--multiple .select2-search--inline {
  float: none;
  flex: 1 1 auto;
  min-width: 0;
}

html .select2-container--default .select2-selection--multiple .select2-selection__clear {
  position: absolute;
  inset-block-start: 0.4rem;
  inset-inline-end: 0.75rem;
  float: none;
  margin: 0;
  z-index: 1;
}