/* ==========================================================================
   NLICT Finance
   Màu nhấn lấy từ biến --fin-accent, đổi trong phần Cài đặt.
   Các giá trị còn lại thừa hưởng biến của theme nếu có.
   ========================================================================== */

:root {
  --fin-accent: #128a4f;
  --fin-logo-h: 22px;
}

.fin-card,
.fin-compare,
.fin-calc,
.fin-detail {
  --_ink:   var(--ink, #16233d);
  --_soft:  var(--ink-soft, #55617a);
  --_muted: var(--muted, #7b869b);
  --_line:  var(--line, #e2e6ec);
  --_paper: var(--paper, #fff);
  --_surf:  var(--surface, #f5f6f8);
  --_radius: var(--radius, 12px);
}

/* --- Thẻ gói --- */
.fin-card {
  position: relative;
  background: var(--_paper);
  border: 1px solid var(--_line);
  border-radius: 18px;
  padding: 24px 24px 18px;
  margin: 26px 0;
  max-width: 420px;
  box-shadow: 0 1px 2px rgba(20, 30, 50, .04), 0 12px 30px -20px rgba(20, 30, 50, .28);
}

.fin-card__badge {
  position: absolute; right: 18px; top: 18px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: var(--fin-accent); color: #fff;
  padding: 4px 10px; border-radius: 999px;
}

/* Logo để nhỏ: vừa gọn mắt, vừa an toàn về sử dụng thương hiệu */
.fin-card__logo img {
  height: var(--fin-logo-h); width: auto; display: block; margin-bottom: 14px;
}
.fin-card__lender {
  display: block; margin-bottom: 12px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--_muted);
}

.fin-card__name {
  font-size: 19px; font-weight: 700; line-height: 1.35;
  margin: 0 0 18px; color: var(--_ink);
}

.fin-card__rows { margin: 0 0 22px; display: grid; gap: 0; }
.fin-card__rows div {
  display: flex; align-items: baseline; gap: 10px;
  padding: 11px 0; border-bottom: 1px dashed var(--_line);
}
.fin-card__rows div:last-child { border-bottom: 0; }
.fin-card__rows dt { flex: none; font-size: 14.5px; color: var(--_soft); margin: 0; }
.fin-card__rows dd {
  margin: 0 0 0 auto; text-align: right;
  font-size: 15px; font-weight: 700; color: var(--_ink);
}

.fin-card__acts { display: grid; gap: 12px; }

.fin-card__note {
  margin: 14px 0 0; text-align: center;
  font-size: 12.5px; color: var(--fin-accent); opacity: .85;
}

/* --- Nút ---
   Theme NLICT Review gạch chân mọi link nằm trong nội dung bài. Nút cũng là
   thẻ link nên dính theo, chữ trắng kèm gạch vàng đọc rất rối. Các selector
   dưới đây đặt hai lớp để thắng quy tắc của theme mà không phải dùng !important. */
.fin-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 26px; width: 100%;
  border: 0; border-radius: 999px;
  background: var(--fin-accent); color: #fff;
  font-size: 16px; font-weight: 700; text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}
.fin-btn:hover { filter: brightness(1.08); color: #fff; }

.fin-card .fin-btn,
.fin-list .fin-btn,
.fin-calc .fin-btn,
.fin-compare .fin-btn {
  text-decoration: none;
  color: #fff;
  letter-spacing: .01em;
}
.fin-card .fin-btn--ghost,
.fin-list .fin-btn--ghost,
.fin-calc .fin-btn--ghost,
.fin-compare .fin-btn--ghost { color: var(--fin-accent); }

/* Link tên gói trong bảng so sánh cũng nên gọn, không gạch chân */
.fin-compare .fin-compare__name a { text-decoration: none; color: var(--_ink); }
.fin-compare .fin-compare__name a:hover { color: var(--fin-accent); }
.fin-btn:active { transform: translateY(1px); }

.fin-btn--ghost {
  background: transparent; color: var(--fin-accent);
  border: 1.5px solid var(--fin-accent); font-weight: 600;
}
.fin-btn--ghost:hover { background: color-mix(in srgb, var(--fin-accent) 8%, transparent); color: var(--fin-accent); }

.fin-btn--sm { min-height: 38px; width: auto; padding: 0 18px; font-size: 14px; }

/* --- Danh sách thẻ --- */
.fin-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 22px; margin: 26px 0;
}
.fin-list .fin-card { margin: 0; max-width: none; }

/* --- Bảng so sánh --- */
.fin-compare { margin: 30px 0; }
.fin-compare__title { font-size: 20px; margin: 0 0 14px; }
.fin-compare__wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.fin-compare__table {
  width: 100%; min-width: 720px; border-collapse: collapse;
  background: var(--_paper); border: 1px solid var(--_line);
  border-radius: 14px; overflow: hidden; font-size: 14.5px;
}
.fin-compare__table th {
  text-align: left; padding: 12px 14px; background: var(--_surf);
  border-bottom: 1px solid var(--_line);
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--_muted);
}
.fin-compare__table td { padding: 14px; border-bottom: 1px solid var(--_line); vertical-align: middle; }
.fin-compare__table tr:last-child td { border-bottom: 0; }

.fin-compare__name { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.fin-compare__name img { height: 18px; width: auto; }
.fin-compare__name .fin-card__lender { margin: 0; font-size: 11px; }

.fin-compare__date { font-size: 13px; color: var(--_muted); white-space: nowrap; }
/* Lãi suất quá hạn đối chiếu thì nói thẳng, đừng giấu */
.fin-compare__date.is-stale { color: #a4562a; }
.fin-compare__date.is-stale::after { content: " \26A0"; }

.fin-compare__note { font-size: 13px; color: var(--_muted); margin-top: 12px; line-height: 1.6; }

/* --- Điều kiện và hồ sơ --- */
.fin-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 28px 0; }
.fin-detail__box { background: var(--_surf); border-radius: 14px; padding: 20px 22px; }
.fin-detail__box h3 { font-size: 16.5px; margin: 0 0 12px; }
.fin-detail__box ul { margin: 0; padding-left: 1.15em; font-size: 15px; color: var(--_soft); }
.fin-detail__box li { margin-bottom: 7px; }
.fin-detail__box--cons { background: #fdf3ee; }

/* --- Công cụ tính lãi --- */
.fin-calc {
  background: var(--_paper); border: 1px solid var(--_line);
  border-radius: 18px; padding: 24px; margin: 30px 0;
}
.fin-calc__title { font-size: 19px; margin: 0 0 18px; }

.fin-calc__inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.fin-calc__inputs p { margin: 0; position: relative; }
.fin-calc__inputs label { display: block; font-size: 13.5px; color: var(--_soft); margin-bottom: 6px; }
.fin-calc__inputs input {
  width: 100%; height: 48px; padding: 0 54px 0 14px;
  border: 1px solid var(--_line); border-radius: var(--_radius);
  font-family: inherit; font-size: 16px; font-weight: 600; color: var(--_ink);
  background: var(--_paper);
}
.fin-calc__inputs input:focus { outline: 2px solid var(--fin-accent); outline-offset: 1px; }
.fin-calc__unit {
  position: absolute; right: 14px; bottom: 13px;
  font-size: 13px; color: var(--_muted); pointer-events: none;
}

.fin-calc__methods { display: flex; gap: 22px; flex-wrap: wrap; margin: 18px 0 4px; }
.fin-calc__methods label { display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; cursor: pointer; }
.fin-calc__methods input { accent-color: var(--fin-accent); }

.fin-calc__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; }
.fin-calc__cards div {
  background: var(--_surf); border-radius: var(--_radius); padding: 14px 16px;
}
.fin-calc__cards div.is-total { background: color-mix(in srgb, var(--fin-accent) 10%, transparent); }
.fin-calc__cards span { display: block; font-size: 12.5px; color: var(--_muted); margin-bottom: 4px; }
.fin-calc__cards b { font-size: 17px; color: var(--_ink); }
.fin-calc__cards .is-total b { color: var(--fin-accent); }

.fin-calc__diff {
  margin: 14px 0 0; padding: 12px 16px;
  background: var(--_surf); border-left: 3px solid var(--fin-accent);
  border-radius: 0 var(--_radius) var(--_radius) 0;
  font-size: 14px; color: var(--_soft); line-height: 1.6;
}
.fin-calc__empty { font-size: 14px; color: var(--_muted); margin: 16px 0 0; }

.fin-calc__sched { margin-top: 18px; }
.fin-calc__sched summary { cursor: pointer; font-size: 14.5px; font-weight: 600; color: var(--fin-accent); }
.fin-calc__schedwrap { overflow-x: auto; margin-top: 12px; max-height: 380px; overflow-y: auto; }

.fin-calc__table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
.fin-calc__table th {
  position: sticky; top: 0; background: var(--_surf);
  text-align: left; padding: 9px 12px; font-size: 12.5px; color: var(--_muted);
}
.fin-calc__table td { padding: 9px 12px; border-bottom: 1px solid var(--_line); }

.fin-calc__cta { margin: 20px 0 0; }
.fin-calc__cta .fin-btn { max-width: 320px; }
.fin-calc__note { margin: 16px 0 0; font-size: 12.5px; color: var(--_muted); line-height: 1.6; }

@media (max-width: 720px) {
  .fin-calc__inputs { grid-template-columns: 1fr; }
  .fin-calc__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-detail { grid-template-columns: 1fr; }
  .fin-card { padding: 20px 18px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .fin-btn { transition: none; }
}