.loan-estimate { margin: 24px 0; padding: 20px 16px; border: 1px solid var(--c-border); border-top: 4px solid var(--c-primary); border-radius: var(--radius-lg); background: var(--c-surface); color: var(--c-text); }
.loan-estimate h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.4; }
.loan-estimate h3 { margin: 0 0 12px; font-size: 17px; }
.loan-estimate p { margin: 8px 0; line-height: 1.6; }
.loan-estimate__intro { font-size: 15px; }
.loan-estimate__source { color: var(--c-muted); font-size: 14px; }
.loan-estimate fieldset { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
.loan-estimate__fields { display: grid; gap: 18px; }
.loan-estimate__field { min-width: 0; }
.loan-estimate__field label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; line-height: 1.5; }
.loan-estimate__field input { display: block; box-sizing: border-box; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #858585; border-radius: var(--radius); background: #fff; color: var(--c-text); font: inherit; font-size: 16px; }
.loan-estimate__field input[aria-invalid="true"] { border: 2px solid var(--c-primary); }
.loan-estimate__field small { display: block; margin-top: 6px; color: var(--c-muted); font-size: 13px; line-height: 1.5; }
.loan-estimate .loan-estimate__error { color: var(--c-primary-600); font-size: 14px; font-weight: 600; }
.loan-estimate__field .loan-estimate__error:not([hidden]) { display: block; margin-top: 6px; }
.loan-estimate__required { color: var(--c-muted); font-size: 13px; }
.loan-estimate__submit { min-height: 48px; width: 100%; margin-top: 6px; padding: 12px 20px; border: 1px solid var(--c-primary); border-radius: var(--radius); background: var(--c-primary); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.loan-estimate__submit:hover { background: var(--c-primary-600); border-color: var(--c-primary-600); }
.loan-estimate :is(input, button, summary):focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; }
.loan-estimate__status:empty { margin: 0; }
.loan-estimate__status { font-size: 14px; }
.loan-estimate__result { margin-top: 16px; padding: 16px; border-radius: var(--radius); background: var(--c-accent-50); }
/* Chỉ hiện sau khi tính hợp lệ; không dùng :not(:empty) vì khung có sẵn nhãn. */
.loan-estimate .loan-estimate__result:not([hidden]) { display: block; }
.loan-estimate__result:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 3px; }
.loan-estimate__result dl { margin: 0; }
.loan-estimate__result dl > div { padding: 10px 0; border-bottom: 1px solid #dacda8; }
.loan-estimate__result dt { font-size: 14px; }
.loan-estimate__result dd { margin: 4px 0 0; font-size: 17px; font-weight: 600; overflow-wrap: anywhere; }
.loan-estimate__monthly dd { color: var(--c-link); font-size: 23px; }
.loan-estimate__result p { font-size: 13px; }
.loan-estimate__assumptions { margin-top: 16px; }
.loan-estimate__assumptions summary { min-height: 44px; padding: 10px 0; font-size: 14px; font-weight: 600; cursor: pointer; }
.loan-estimate__assumptions p { font-size: 13px; color: var(--c-muted); }
.loan-estimate [hidden] { display: none !important; }
@media (min-width: 600px) {
	.loan-estimate { padding: 24px; }
	.loan-estimate__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
	.loan-estimate__field--wide { grid-column: 1 / -1; }
	.loan-estimate__submit { width: auto; min-width: 180px; }
	.loan-estimate__result dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; }
	.loan-estimate__result dd { text-align: right; }
}