@charset "UTF-8";
/* ==========================================================================
   Trang tổ chức cho vay
   Chỉ nạp khi xem single tb_lender. Header/footer dùng của theme.
   ========================================================================== */

/*
 * Tên biến giữ nguyên; giá trị lấy từ tokens.css để đồng bộ với toàn site.
 * "purple" nay là indigo chủ đạo, "green" là xanh ngọc hành động.
 */
.lender {
	--purple:      var(--c-brand-700);
	--purple-dark: var(--c-brand-600);
	--purple-50:   var(--c-brand-50);
	--purple-100:  var(--c-brand-100);
	--green:       var(--c-act-700);
	--green-dark:  var(--c-act-800);
	--ink:         var(--c-ink);
	--gray:        var(--c-text);
	--gray-2:      var(--c-muted);
	--edge:        var(--c-line);
	--edge-2:      var(--c-line-soft);

	background: #fff;
	color: var(--ink);
	font-size: 16px;
	line-height: 1.62;
}

/* --------------------------------------------------------------------------
   Thanh đường dẫn
   -------------------------------------------------------------------------- */
.lender__topbar {
	background: linear-gradient(180deg, var(--purple-50), rgba(238,242,254,0));
	padding-block: 16px 4px;
}

.lender__topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.lender .crumbs { margin: 0; font-size: 14px; color: var(--gray); }
.lender .crumbs a:hover { color: var(--purple); }
.lender .crumbs .ico { color: #A9B0C0; }

.lender__byline {
	display: flex; align-items: center; gap: 8px;
	font-size: 14px; color: var(--gray);
}
.lender__dot { color: var(--green); }

/* --------------------------------------------------------------------------
   Tiêu đề + thẻ chỉ số
   -------------------------------------------------------------------------- */
.lender__hero {
	position: relative;
	padding-block: 26px 44px;
	background:
		radial-gradient(1100px 460px at 78% 6%, #E3EAFD 0%, rgba(227,234,253,0) 62%),
		linear-gradient(180deg, #F7F9FF 0%, #FFFFFF 78%);
	overflow: hidden;
}

.lender__title {
	max-width: 940px;
	margin-inline: auto;
	text-align: center;
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 700;
	line-height: 1.24;
	color: var(--purple);
	letter-spacing: -.3px;
}

.lender__brand {
	position: relative;
	white-space: nowrap;
}

/*
 * Nét gạch chân dưới tên thương hiệu.
 *
 * Dùng mask thay vì background-image để màu vẫn lấy từ token, và hình là
 * nét cọ thon dần về hai đầu thay cho thanh chữ nhật cắt cụt.
 *
 * Hiệu ứng vẽ dần đặt ở @keyframes chứ không đặt clip-path tĩnh lên phần tử:
 * nếu trình duyệt không chạy animation thì nét vẽ vẫn hiện đầy đủ.
 */
.lender__brand::after {
	content: "";
	position: absolute;
	left: -.04em; right: -.04em;
	bottom: -.2em;
	height: .34em;
	background-color: var(--green);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M1.5 10.2 Q100 2.6 198.5 5.6 Q100 9.7 1.5 10.2 Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M1.5 10.2 Q100 2.6 198.5 5.6 Q100 9.7 1.5 10.2 Z'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	opacity: .92;
	filter: drop-shadow(0 1px 2px rgba(11, 110, 79, .28));
	animation: tbp-underline .9s cubic-bezier(.22, .68, .3, 1) .25s both;
}

@keyframes tbp-underline {
	from { clip-path: inset(0 100% 0 0); opacity: 0; }
	60%  { opacity: .92; }
	to   { clip-path: inset(0 0 0 0); opacity: .92; }
}

@media (prefers-reduced-motion: reduce) {
	.lender__brand::after { animation: none; }
}


.lender__headline { font-weight: 700; }

.lender__date,
.lender__subtitle {
	text-align: center;
	font-size: clamp(16px, 1.5vw, 20px);
	color: var(--purple);
	margin-top: 10px;
}
.lender__subtitle { margin-top: 4px; font-size: 16px; }

/* Thẻ trắng chứa chỉ số */
.factcard {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	gap: 28px;
	margin-top: 32px;
	padding: 28px 32px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 40px -16px rgba(13, 22, 48, .22), 0 2px 8px rgba(13, 22, 48, .05);
}

.facts { margin: 0; }

.fact {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block: 16px;
	border-bottom: 1px solid var(--edge-2);
}
.fact:first-child { padding-top: 0; }
.fact:last-child { border-bottom: 0; }

.fact__icon {
	display: grid; place-items: center;
	width: 54px; height: 54px;
	flex: none;
	border-radius: 50%;
	background: var(--purple-50);
	color: var(--purple);
}
.fact__icon .ico { width: 26px; height: 26px; stroke-width: 1.5; }

.fact__value {
	font-size: 22px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}
.fact__label { margin: 2px 0 0; font-size: 15px; color: var(--gray); }

/* Nhãn tin cậy */
.badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--edge-2);
}

.badge-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14.5px;
	color: var(--gray);
}
.badge-item__ico { width: 18px; height: 18px; color: var(--gray-2); }
.badge-item__ico--check { color: var(--green); }
.badge-item__ico--shield { color: var(--green); }

/* Cột phải: logo + nút */
.factcard__side {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 26px;
	padding-left: 28px;
	border-left: 1px solid var(--edge-2);
}

.factcard__logo { display: grid; place-items: center; min-height: 56px; }
.factcard__logo img { max-height: 56px; width: auto; object-fit: contain; }

.factcard__wordmark {
	font-size: 25px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--gray);
}

.btn-apply {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	max-width: 260px;
	padding: 14px 26px;
	background: var(--green);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	border-radius: 8px;
	box-shadow: 0 8px 20px -10px rgba(11, 110, 79, .9);
	transition: background-color .2s, transform .2s, box-shadow .2s;
}
.btn-apply:hover { background: var(--green-dark); transform: translateY(-1px); }
.btn-apply .ico { width: 17px; height: 17px; }
.btn-apply--lg { max-width: 320px; padding: 16px 32px; font-size: 17px; }

/* --------------------------------------------------------------------------
   Thân trang
   -------------------------------------------------------------------------- */
.lender__body {
	display: grid;
	grid-template-columns: 296px minmax(0, 1fr);
	gap: 46px;
	align-items: start;
	padding-block: 46px 60px;
}

/* Mục lục dính */
.toc { position: sticky; top: 20px; }

.toc__inner {
	border: 1px solid var(--edge);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

.toc__title {
	padding: 16px 20px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	border-bottom: 1px solid var(--edge-2);
}

.toc ul { max-height: min(66vh, 620px); overflow-y: auto; }

.toc__link {
	display: block;
	padding: 14px 20px;
	font-size: 15px;
	line-height: 1.45;
	color: var(--gray);
	border-left: 3px solid transparent;
	border-bottom: 1px solid var(--edge-2);
	transition: background-color .2s, color .2s, border-color .2s;
}
.toc li:last-child .toc__link { border-bottom: 0; }
.toc__link:hover { background: var(--c-soft); color: var(--ink); }

.toc__link.is-active {
	background: var(--c-act-50);
	color: var(--green-dark);
	border-left-color: var(--green);
	font-weight: 500;
}

/* Nội dung */
.lender__main { min-width: 0; }

.lender__h2,
.lender__prose h2 {
	position: relative;
	padding-left: 16px;
	margin-top: 44px;
	margin-bottom: 16px;
	font-size: clamp(21px, 2vw, 26px);
	font-weight: 700;
	color: var(--purple);
	line-height: 1.32;
	scroll-margin-top: 24px;
}
.lender__prose > h2:first-child { margin-top: 0; }

/* Vạch màu đầu tiêu đề — nhịp thị giác lặp lại của toàn site */
.lender__h2::before,
.lender__prose h2::before {
	content: "";
	position: absolute;
	left: 0; top: .18em; bottom: .18em;
	width: 4px;
	border-radius: 3px;
	background: linear-gradient(180deg, var(--purple), var(--green));
}

.lender__prose h3 {
	margin-top: 28px;
	margin-bottom: 10px;
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
}

.lender__prose p { margin-bottom: 16px; color: var(--gray); }
.lender__prose strong { color: var(--ink); }

.lender__prose ul, .lender__prose ol { margin: 0 0 16px; padding-left: 22px; }
.lender__prose ul { list-style: none; padding-left: 0; }
.lender__prose ul li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 9px;
	color: var(--gray);
}
.lender__prose ul li::before {
	content: "➤";
	position: absolute;
	left: 0; top: 0;
	color: var(--green);
	font-size: 13px;
}
.lender__prose ol { list-style: decimal; }
.lender__prose ol li { margin-bottom: 9px; color: var(--gray); }

.lender__prose a { color: var(--purple); text-decoration: underline; text-underline-offset: 2px; }
.lender__prose img { border-radius: 10px; }

.lender__prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: 18px; }
.lender__prose th, .lender__prose td { padding: 10px 14px; border: 1px solid var(--edge); text-align: left; }
.lender__prose th { background: var(--purple-50); color: var(--purple); font-weight: 700; }

/* --------------------------------------------------------------------------
   Máy tính khoản vay
   -------------------------------------------------------------------------- */
.calc {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	gap: 28px;
	align-items: center;
	margin-top: 44px;
	padding: 28px;
	background: linear-gradient(120deg, var(--purple-50), var(--c-act-50));
	border-radius: 14px;
}

/* Cột trái: nhãn, tiêu đề, số liệu, điểm nổi bật, hình trang trí */
.calc__intro { display: flex; flex-direction: column; }

.calc__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	align-self: flex-start;
	margin-bottom: 12px;
	padding: 5px 12px 5px 9px;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 2px 8px -4px rgba(79,43,114,.35);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: var(--purple);
}
.calc__eyebrow .ico { width: 15px; height: 15px; color: var(--green-dark); }

.calc__title { font-size: 24px; font-weight: 700; color: var(--purple); line-height: 1.28; }
.calc__lead { margin-top: 10px; font-size: 15.5px; color: var(--gray); }

/* Ba số liệu tóm tắt */
.calc__stats {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 20px;
	padding: 6px;
	background: rgba(255,255,255,.72);
	border-radius: 12px;
}

.cstat {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: 8px;
	transition: background-color .2s;
}
.cstat:hover { background: #fff; }

.cstat__icon {
	display: grid; place-items: center;
	width: 38px; height: 38px;
	flex: none;
	border-radius: 10px;
	background: var(--purple-100);
	color: var(--purple);
}
.cstat__icon .ico { width: 19px; height: 19px; stroke-width: 1.7; }

.cstat__body { display: flex; flex-direction: column; min-width: 0; }
.cstat__label { font-size: 12.5px; color: var(--gray-2); line-height: 1.3; }
.cstat__value {
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

/* Điểm nổi bật */
.calc__points {
	display: flex;
	flex-direction: column;
	gap: 9px;
	margin-top: 18px;
}
.calc__points li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-size: 14.5px;
	color: var(--gray);
	line-height: 1.5;
}
.calc__points .ico {
	width: 17px; height: 17px;
	flex: none;
	margin-top: 3px;
	color: var(--green-dark);
	stroke-width: 2.4;
}

/* Hình trang trí */
.calc__art {
	width: min(220px, 70%);
	height: auto;
	margin-top: auto;
	padding-top: 22px;
	align-self: flex-start;
	overflow: visible;
}
.calc__art-bars rect { fill: var(--purple); opacity: .16; }
.calc__art-bars rect:nth-child(2) { opacity: .26; }
.calc__art-bars rect:nth-child(3) { opacity: .38; }
.calc__art-bars rect:nth-child(4) { opacity: .55; }
.calc__art-coins circle { fill: none; stroke: var(--green); stroke-width: 5; opacity: .34; }
.calc__art-line { stroke: var(--green); stroke-width: 2.5; opacity: .75; fill: none; }

/* Cột dọc nhau trên màn hình hẹp thì bỏ hình cho gọn */
@media (max-width: 1080px) {
	.calc__art { display: none; }
	.calc__stats { flex-direction: row; flex-wrap: wrap; }
	.cstat { flex: 1 1 190px; }
}

.calc__panel {
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	box-shadow: 0 10px 28px -16px rgba(13, 22, 48, .35);
}

.calc__field + .calc__field { margin-top: 18px; }

.calc__label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--gray);
	margin-bottom: 8px;
}

.calc__amount {
	display: flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--edge);
	border-radius: 8px;
	padding: 0 12px;
	height: 46px;
	transition: border-color .2s;
}
.calc__amount:focus-within { border-color: var(--green); }

.calc__amount input {
	flex: 1; min-width: 0;
	border: 0; background: none;
	font-size: 19px; font-weight: 700;
	color: var(--ink);
	text-align: right;
	font-variant-numeric: tabular-nums;
}
.calc__amount input:focus { outline: none; }
.calc__unit { font-size: 17px; font-weight: 700; color: var(--gray-2); }

/* Giới hạn trong .calc để không đè lên thanh kéo của trang lưu trữ. */
.calc input[type="range"][data-calc-range] {
	width: 100%;
	margin-top: 14px;
	accent-color: var(--green);
}

.calc__minmax {
	display: flex; justify-content: space-between;
	margin-top: 6px;
	font-size: 12.5px; color: var(--gray-2);
	font-variant-numeric: tabular-nums;
}

.calc__terms { display: flex; flex-wrap: wrap; gap: 8px; }

.calc__term {
	padding: 8px 15px;
	border: 1px solid var(--edge);
	border-radius: 999px;
	font-size: 14.5px;
	color: var(--gray);
	cursor: pointer;
	transition: all .18s;
}
.calc__term:hover { border-color: var(--green); color: var(--green-dark); }
.calc__term[aria-pressed="true"] {
	background: var(--green);
	border-color: var(--green);
	color: #fff;
	font-weight: 500;
}

.calc__out {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin: 20px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--edge-2);
}
.calc__out div { text-align: center; }
.calc__out dt { font-size: 12.5px; color: var(--gray-2); }
.calc__out dd {
	margin: 4px 0 0;
	font-size: 16px; font-weight: 700; color: var(--purple);
	font-variant-numeric: tabular-nums;
}

.calc__note { margin-top: 14px; font-size: 12.5px; color: var(--gray-2); line-height: 1.5; }

/* --------------------------------------------------------------------------
   Ưu / nhược điểm
   -------------------------------------------------------------------------- */
.proscons__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.pc {
	padding: 22px;
	border: 1px solid var(--edge);
	border-radius: 12px;
	background: #fff;
}
.pc--pro { border-top: 3px solid var(--green); }
.pc--con { border-top: 3px solid var(--c-warm-600); }

.pc__title {
	display: flex; align-items: center; gap: 9px;
	font-size: 17px; font-weight: 700; color: var(--ink);
	margin-bottom: 14px;
}
.pc__title .ico { width: 20px; height: 20px; stroke-width: 2.2; }
.pc--pro .pc__title .ico { color: var(--green); }
.pc--con .pc__title .ico { color: var(--c-warm-600); }

.pc ul { display: flex; flex-direction: column; gap: 11px; }
.pc li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 15.5px;
	color: var(--gray);
	line-height: 1.55;
}
.pc__mark {
	width: 18px; height: 18px;
	flex: none;
	margin-top: 2px;
	padding: 2px;
	border-radius: 50%;
	stroke-width: 2.6;
}
.pc--pro .pc__mark { background: var(--purple-50); color: var(--green-dark); }
.pc--con .pc__mark { background: var(--c-warm-50); color: var(--c-warm-700); }

/* --------------------------------------------------------------------------
   Các bước
   -------------------------------------------------------------------------- */
.steps-list { display: flex; flex-direction: column; gap: 2px; counter-reset: s; }

/* Đường nối dọc giữa các số, cho thấy đây là chuỗi liên tiếp */
.steps-list { position: relative; }
.steps-list::before {
	content: "";
	position: absolute;
	left: 40px; top: 34px; bottom: 34px;
	width: 2px;
	background: var(--edge);
	border-radius: 2px;
}

.step-item {
	position: relative;
	display: flex;
	gap: 16px;
	padding: 18px 20px;
	border: 1px solid var(--edge);
	border-radius: 12px;
	background: #fff;
	transition: box-shadow .2s, border-color .2s;
}
.step-item + .step-item { margin-top: 10px; }
.step-item:hover { border-color: var(--c-brand-200); box-shadow: 0 8px 22px -14px rgba(13, 22, 48, .45); }

.step-item__num {
	position: relative;
	z-index: 1;
	display: grid; place-items: center;
	width: 34px; height: 34px;
	flex: none;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--c-brand-500), var(--purple));
	box-shadow: 0 0 0 4px #fff;
	color: #fff;
	font-size: 15px; font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.step-item__title { font-size: 16.5px; font-weight: 700; color: var(--ink); }
.step-item__desc { margin-top: 5px; font-size: 15px; color: var(--gray); }

/* --------------------------------------------------------------------------
   Bảng so sánh
   -------------------------------------------------------------------------- */
.cmp__scroll {
	overflow-x: auto;
	border: 1px solid var(--edge);
	border-radius: 12px;
}

.cmp__table {
	width: 100%;
	min-width: 900px;
	border-collapse: collapse;
	font-size: 14.5px;
	font-variant-numeric: tabular-nums;
}

.cmp__table th,
.cmp__table td {
	padding: 13px 15px;
	text-align: left;
	border-bottom: 1px solid var(--edge-2);
	white-space: nowrap;
}

.cmp__table thead th {
	background: var(--purple-50);
	color: var(--purple);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
	position: sticky;
	top: 0;
	z-index: 1;
}

.cmp__table tbody th {
	font-weight: 700;
	color: var(--ink);
	white-space: nowrap;
}

.cmp__table tbody td { color: var(--gray); }
.cmp__table tbody tr:last-child th,
.cmp__table tbody tr:last-child td { border-bottom: 0; }
.cmp__table tbody tr:hover th,
.cmp__table tbody tr:hover td { background: var(--purple-50); }

/* Dòng của chính tổ chức đang xem */
.cmp__table tbody tr.is-self > th,
.cmp__table tbody tr.is-self > td { background: var(--purple-50); }
.cmp__table tbody tr.is-self > th { box-shadow: inset 3px 0 0 var(--purple); }

/* Dòng có lãi suất thấp nhất */
.cmp__table tbody tr.is-best > th,
.cmp__table tbody tr.is-best > td { background: var(--c-act-50); }
.cmp__table tbody tr.is-best > th { box-shadow: inset 3px 0 0 var(--green); }
.cmp__table tbody tr.is-best.is-self > th { box-shadow: inset 3px 0 0 var(--purple); }

.cmp__name { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cmp__tag {
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .2px;
	white-space: nowrap;
}
.cmp__tag--self { background: var(--purple-100); color: var(--purple); }
.cmp__tag--best { background: #CDEFE0; color: var(--green-dark); }

.cmp__more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 14px;
	padding: 12px;
	border: 1px solid var(--edge);
	border-radius: 8px;
	background: #fff;
	font-size: 15px;
	font-weight: 500;
	color: var(--purple);
	transition: background-color .2s, border-color .2s;
}
.cmp__more:hover { background: var(--purple-50); border-color: var(--c-brand-200); }
.cmp__more .ico { width: 18px; height: 18px; transition: transform .25s; }
.cmp__more[aria-expanded="true"] .ico { transform: rotate(180deg); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq__list {
	border: 1px solid var(--edge);
	border-radius: 12px;
	overflow: hidden;
}

.faq__item + .faq__item { border-top: 1px solid var(--edge-2); }
.faq__item h3 { margin: 0; font-size: inherit; font-weight: inherit; }

.faq__num {
	display: grid; place-items: center;
	width: 26px; height: 26px;
	flex: none;
	border-radius: 8px;
	background: var(--purple-50);
	color: var(--purple);
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	transition: background-color .2s, color .2s;
}
.faq__q[aria-expanded="true"] .faq__num { background: var(--purple); color: #fff; }

.faq__text { flex: 1; min-width: 0; }

.faq__q {
	display: flex;
	align-items: center;
	gap: 13px;
	width: 100%;
	padding: 17px 20px;
	text-align: left;
	font-size: 16px;
	font-weight: 500;
	color: var(--ink);
	background: #fff;
	transition: background-color .2s, color .2s;
}
.faq__q:hover { background: var(--purple-50); color: var(--purple); }
.faq__q[aria-expanded="true"] { color: var(--purple); font-weight: 700; }

.faq__caret {
	width: 20px; height: 20px;
	flex: none;
	color: var(--gray-2);
	transition: transform .25s, color .2s;
}
.faq__q[aria-expanded="true"] .faq__caret { transform: rotate(180deg); color: var(--purple); }

.faq__a { padding: 0 20px 18px; }
.faq__a p { font-size: 15.5px; color: var(--gray); line-height: 1.65; }

/* --------------------------------------------------------------------------
   CTA cuối trang
   -------------------------------------------------------------------------- */
.lender__cta-foot {
	margin-top: 44px;
	padding: 28px;
	text-align: center;
	background: var(--purple-50);
	border-radius: 14px;
}
.lender__cta-foot .btn-apply { margin-inline: auto; }

.lender__disclaimer {
	margin-top: 16px;
	font-size: 13px;
	color: var(--gray-2);
	line-height: 1.6;
	max-width: 70ch;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Bài viết gắn với tổ chức cho vay
   -------------------------------------------------------------------------- */
.lnewsgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
}

.lnewscard { min-width: 0; }

.lnewscard__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 16px;
	overflow: hidden;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.lnewscard__link:hover {
	border-color: var(--c-brand-200);
	box-shadow: 0 20px 44px -34px rgba(13, 22, 48, .9);
	transform: translateY(-2px);
}

/* Khung ảnh giữ tỷ lệ cố định để lưới không so le khi ảnh khác kích thước */
.lnewscard__thumb {
	display: block;
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--c-soft);
}
.lnewscard__thumb img { width: 100%; height: 100%; object-fit: cover; }

/*
 * Ô thay ảnh chỉ cao bằng một dải, không giữ tỷ lệ 16:9: bài chưa có ảnh mà
 * dành nửa thẻ cho một icon thì phần chữ bị đẩy xuống quá thấp.
 */
.lnewscard__thumb--blank {
	display: grid;
	place-items: center;
	aspect-ratio: auto;
	height: 86px;
	background: linear-gradient(140deg, var(--purple-50), #fff 70%);
	border-bottom: 1px solid var(--edge-2);
	color: var(--purple);
}
.lnewscard__thumb--blank .ico { width: 30px; height: 30px; stroke-width: 1.4; opacity: .5; }

.lnewscard__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	flex: 1;
	padding: 16px;
}

.lnewscard__meta {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	color: var(--gray-2);
}
.lnewscard__meta i { font-style: normal; }

.lnewscard__title {
	font-size: 16.5px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.4;
}
.lnewscard__link:hover .lnewscard__title { color: var(--purple); }

.lnewscard__excerpt { font-size: 14.5px; color: var(--gray); line-height: 1.6; }

.lnewscard__go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 10px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--green-dark);
}
.lnewscard__go .ico { width: 16px; height: 16px; transition: transform .2s; }
.lnewscard__link:hover .lnewscard__go .ico { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Đáp ứng màn hình
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.lender__body { grid-template-columns: 1fr; gap: 28px; }

	/* Mục lục chuyển thành khối gập ở đầu nội dung */
	.toc { position: static; }
	.toc ul { max-height: 280px; }

	.calc { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
	.factcard { grid-template-columns: 1fr; padding: 22px; }
	.factcard__side {
		padding-left: 0; padding-top: 22px;
		border-left: 0; border-top: 1px solid var(--edge-2);
	}
	.btn-apply { max-width: none; }
	.proscons__grid { grid-template-columns: 1fr; }
	.lender__topbar-inner { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 560px) {
	.lender { font-size: 15.5px; }
	.fact__value { font-size: 19px; }
	.fact__icon { width: 46px; height: 46px; }
	.fact__icon .ico { width: 22px; height: 22px; }
	.calc__out { grid-template-columns: 1fr; gap: 10px; }
	.calc__out div { display: flex; justify-content: space-between; text-align: left; }
	.calc__out dd { margin: 0; }
	.badges { gap: 8px 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.lender * { transition-duration: .01ms !important; }
}