/* ===========================
   Modern Bootstrap-like styles (CENTER + AUTO WIDTH)
   Áp dụng riêng trong .scf
   =========================== */
.scf {
  --bs-body-bg: #fff;
  --bs-body-color: #212529;
  --bs-primary: #b39851;
  --bs-primary-rgb: 179, 152, 81; /* <- SỬA LẠI: dạng r,g,b */
  --bs-border-color: #b39851;
  --bs-border-radius: .5rem;
  --bs-shadow-sm: 0 .125rem .25rem rgba(0,0,0,.075);
  --bs-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
  --bs-focus-ring: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
  position: relative;
  color: var(--bs-body-color);
  text-align: center;                /* canh giữa nội dung */
}

/* Hàng form: dùng flex để canh giữa */
.scf__row{
  display: flex;
  justify-content: center;           /* canh giữa */
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* Field & Actions chỉ rộng theo nội dung */
.scf__field{ 
  flex: 0 0 auto;
  min-width: 0;
}
.scf__actions{
  flex: 0 0 auto;
  display: flex;
  align-items: end;
  gap: 8px;
}

.scf__field label{
  display:block; font-weight:600; margin-bottom:6px; font-size:14px;
}

/* Select/input: width theo nội dung (progressive), có fallback bằng JS ở dưới */
.scf__field select,
.scf__field input[type="text"],
.scf__field input[type="number"]{
  display: inline-block;
  width: auto;                       /* quan trọng */
  max-width: 100%;
  height: 42px;
  padding: 8px 12px;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background: #fff;
  transition: box-shadow .15s ease, border-color .15s ease;
  outline: none;
  appearance: none;
  /* thử cho trình duyệt mới */
  width: -moz-fit-content;
  width: fit-content;
}

.scf__field select:focus,
.scf__field input[type="text"]:focus,
.scf__field input[type="number"]:focus{
  border-color: rgba(var(--bs-primary-rgb), .6);
  box-shadow: var(--bs-focus-ring);
}

/* Nút */
.scf .button{
  display:inline-flex; align-items:center; justify-content:center;
  height:42px; padding:0 16px; font-weight:600; border-radius: var(--bs-border-radius);
  border:1px solid transparent;
  transition: filter .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
}
.scf .button:hover{ filter: brightness(.98); }
.scf .button.primary{
  background: var(--bs-primary); color:#fff; border-color: var(--bs-primary);
  box-shadow: var(--bs-shadow-sm);
}
.scf .button.primary:hover{ box-shadow: var(--bs-shadow); }
.scf .button.outline{
  background:#fff; color: var(--bs-primary);
  border-color: rgba(var(--bs-primary-rgb), .5);
}
.scf .button.outline:hover{
  background: rgba(var(--bs-primary-rgb), .06);
  border-color: var(--bs-primary);
}

/* Loading */
.scf.is-loading .scf__results{ opacity:.6; filter: blur(.5px); pointer-events:none; }
.scf.is-loading::after{
  content:"";
  position:absolute; inset:auto 12px 12px auto;
  width:22px; height:22px; border-radius:50%;
  border:2px solid rgba(0,0,0,.15);
  border-top-color: var(--bs-primary);
  animation: scf-spin .6s linear infinite;
}
@keyframes scf-spin{ to { transform: rotate(360deg); } }

.scf__results{ margin-top: 4px; }

/* Dark mode */
@media (prefers-color-scheme: dark){
  .scf{
    --bs-body-bg:#0b0e12;
    --bs-body-color:#e9ecef;
    --bs-border-color:#374151;
  }
  .scf__field select, .scf__field input{
    background:#111827; color:#e5e7eb; border-color:var(--bs-border-color);
  }
  .scf .button.outline{ background:#0b0e12; }
}