/* BS3/BS4 utility shims for legacy templates on Bootstrap 5 */
.form-group {
  margin-bottom: 1rem;
}
.control-label {
  margin-bottom: 0.5rem;
}
.help-block {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-secondary-color);
}
.input-group-btn {
  display: flex;
  align-items: stretch;
}
.input-group .form-control {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}

/* BS3 responsive utility classes (subset) */
@media (max-width: 767.98px) {
  .hidden-xs {
    display: none !important;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .hidden-sm {
    display: none !important;
  }
}
@media (max-width: 767.98px) {
  .visible-xs {
    display: block !important;
  }
}
@media (min-width: 768px) {
  .visible-xs {
    display: none !important;
  }
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}

/*
 * Legacy templates: .col-* cần cha flex (.row). Nhiều file BS3 chỉ gắn col trên con
 * mà quên .row — BS5 không còn float grid nên cột chồng dọc. Các rule :has() biến
 * cha thành hàng flex + gutter giống .row (trừ khi đã có .row).
 */
.form-group:not(.row):has(> [class*="col-"]),
.f-module-page-desc:not(.row):has(> [class*="col-"]),
.f-feedback-home-item:not(.row):has(> [class*="col-"]) {
  display: flex;
  flex-wrap: wrap;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.form-group:not(.row):has(> [class*="col-"]) > input[type="hidden"] {
  display: none;
}

.form-group:not(.row):has(> [class*="col-"]) > [class*="col-"],
.f-module-page-desc:not(.row):has(> [class*="col-"]) > [class*="col-"],
.f-feedback-home-item:not(.row):has(> [class*="col-"]) > [class*="col-"] {
  box-sizing: border-box;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}