/* ═══════════════════════════════════════════════════════════
   Form — Field layout (vertical: label trên, input dưới)
═══════════════════════════════════════════════════════════ */
.ls-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.ls-field .contact-form_item--label {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--color-text-primary, #141414);
  margin-bottom: 0;
  line-height: var(--leading-snug, 1.4);
}

.ls-field .contact-form_item--input {
  width: 100%;
}

/* Spacing bên trong form container */
.contact-form_bg {
  padding: clamp(var(--space-6), 3vw, var(--space-8));
}

/* ═══════════════════════════════════════════════════════════
   Form — Method selector cards (Tỉ lệ vay / Số tiền vay)
═══════════════════════════════════════════════════════════ */
.ls-method-group {
  border-top: 1px solid var(--color-border, #dcdcdc);
  padding-top: var(--space-4, 1rem);
}

.ls-method-group__label {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  color: var(--color-text-primary, #141414);
  margin-bottom: var(--space-3, 0.75rem);
}

.ls-method-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3, 0.75rem);
}

.ls-method-card {
  border: 1.5px solid var(--color-border, #dcdcdc);
  border-radius: var(--radius-lg, 12px);
  padding: var(--space-4, 1rem);
  background: var(--color-white, #fff);
  transition: border-color var(--duration-normal, 250ms) ease,
              background-color var(--duration-normal, 250ms) ease;
}

.ls-method-card:has(.rd-phuongthucvay:checked) {
  border-color: var(--color-red-600, #cc0000);
  background: var(--color-red-50, #fff5f5);
}

.ls-method-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-3, 0.75rem);
}

.ls-method-card__header .form-check-input {
  flex-shrink: 0;
  margin-top: 0;
  width: 1.1em;
  height: 1.1em;
  accent-color: var(--color-red-600, #cc0000);
  cursor: pointer;
}

.ls-method-card__title {
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
  cursor: pointer;
  margin-bottom: 0;
  line-height: var(--leading-snug, 1.4);
}

.ls-method-card__body .contact-form_item--input {
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   Result card
═══════════════════════════════════════════════════════════ */
.laisuat-result {
  margin-top: var(--space-6, 1.5rem);
  padding: clamp(1.25rem, 4vw, 2rem);
  background: var(--color-white, #fff);
  border: 1px solid var(--color-border, #dcdcdc);
  border-radius: var(--radius-xl, 16px);
  box-shadow: var(--shadow-md, 0 4px 20px rgba(0, 0, 0, 0.08));
}

/* Ảnh xe */
.laisuat-result .preview-image {
  background: var(--color-neutral-50, #f8f8f8);
  border-radius: var(--radius-lg, 12px);
  padding: 1rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.laisuat-result .preview-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}

/* Bảng tóm tắt kết quả */
.laisuat-result .table-theme .table {
  margin-bottom: 0;
}

.laisuat-result .table-theme td,
.laisuat-result .table-theme th {
  padding: 10px 14px;
  font-size: 0.875rem;
  vertical-align: middle;
  border-color: var(--color-neutral-100, #f4f5f5);
}

.laisuat-result .table-theme td:first-child {
  color: var(--color-text-secondary, #6b6b6b);
  width: 46%;
}

.laisuat-result .table-theme th {
  font-weight: 600;
  color: var(--color-text-primary, #141414);
}

/* Hàng số tiền trả hàng tháng — nổi bật */
.ls-result-monthly-row td,
.ls-result-monthly-row th {
  background: var(--color-red-50, #fff5f5) !important;
  border-top: 1.5px solid var(--color-red-100, #ffe0e0) !important;
  border-bottom: 1.5px solid var(--color-red-100, #ffe0e0) !important;
}

.ls-result-monthly-row td:first-child {
  color: var(--color-red-600, #cc0000) !important;
  font-weight: 600;
}

.ls-result-monthly-row .table-result_value {
  color: var(--color-red-600, #cc0000);
  font-size: 1.0625rem;
  font-weight: 700;
}

/* Hàng tổng gốc & lãi */
.table-result_value.active {
  color: var(--color-red-600, #cc0000);
  font-size: 1rem;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════
   Bảng chi tiết lịch trả góp
═══════════════════════════════════════════════════════════ */
#preview-button {
  margin-top: var(--space-4, 1rem);
}

.action-result-collapse {
  margin-top: var(--space-4, 1rem);
}

/* ─── Wrapper: bo góc + border ngoài ─── */
.table-theme_2 {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  margin-top: var(--space-4);
}

.table-theme_2 .table {
  margin-bottom: 0;
  table-layout: fixed;
  width: 100%;
}

/* ─── Header ─── */
.table-theme_2 thead th {
  background: var(--color-neutral-900);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  padding: var(--space-3) var(--space-4);
  border-color: transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Cột "Kỳ trả" — cố định hẹp */
.table-theme_2 thead th:first-child {
  width: 64px;
}

/* ─── Body cells ─── */
.table-theme_2 tbody td {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border-color: var(--color-border);
  vertical-align: middle;
}

/* Zebra rows */
.table-theme_2 tbody tr:nth-child(even) td {
  background: var(--color-neutral-50);
}

/* Hover */
.table-theme_2 tbody tr:hover td {
  background: var(--color-red-50);
}

/* ─── Dòng tổng cuối ─── */
.table-theme_2 tbody tr:last-child td {
  background: var(--color-red-50);
  border-top: 2px solid var(--color-red-100);
  color: var(--color-red-600);
  font-weight: var(--weight-semibold);
}

.table-theme_2 tbody tr:last-child td:first-child {
  color: var(--color-text-primary);
}

/* ═══════════════════════════════════════════════════════════
   Responsive — Mobile (< 768px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .contact-form_bg {
    padding: var(--space-5, 1.25rem);
  }

  .ls-method-cards {
    grid-template-columns: 1fr;
  }

  .laisuat-result {
    padding: 1.25rem;
    margin-top: 1.25rem;
  }

  .laisuat-result .table-theme td,
  .laisuat-result .table-theme th {
    padding: 8px 10px;
    font-size: 0.8125rem;
  }

  .table-theme_2 thead th,
  .table-theme_2 tbody td {
    font-size: var(--text-xs, 0.75rem);
    padding: var(--space-2, 0.5rem);
  }
}