/* ===== Form grid (component cha - chỉ lo layout) ===== */
.mc-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 20px;
}
@media (max-width: 640px) {
  .mc-form-grid { grid-template-columns: 1fr; }
}

/* ===== Input group ===== */
.mc-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mc-input-group--full { grid-column: 1 / -1; }

.mc-input-label {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a2e;
}
.mc-input-label .mc-required { color: #e11d48; margin-left: 2px; }

/* ===== Field (input / select / textarea dùng chung 1 style) ===== */
.mc-input-field {
  --mc-input-bg: #f7f9fb;
  --mc-input-border: #dae4ec;
  --mc-input-radius: 8px;

  width: 100%;
  background: var(--mc-input-bg);
  border: 1px solid var(--mc-input-border);
  border-radius: var(--mc-input-radius);
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  color: #1a1a2e;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea.mc-input-field { resize: vertical; min-height: 100px; }

/* ---- focus_ring ---- */
.mc-input-field:focus {
  outline: none;
  border-color: #0ea5e9;
  box-shadow: 0 0 0 3px rgba(14,165,233,.15);
}

/* ---- validation state ---- */
.mc-input-error {
  font-size: 12px;
  color: #e11d48;
  display: none;
}
.mc-input-group.is-invalid .mc-input-field { border-color: #e11d48; }
.mc-input-group.is-invalid .mc-input-error { display: block; }

/* ---- Dark mode: tự đổi theo html.mc-dark (đồng bộ với nút theme_spin đã làm) ---- */
html.mc-dark .mc-input-field {
  --mc-input-bg: #041321;
  --mc-input-border: rgba(70,139,177,.25);
  color: #e6f1f8;
}
html.mc-dark .mc-input-label { color: #e6f1f8; }