/* ==========================================================================
   Thành phần dùng chung cho các trang so sánh sản phẩm
   (thẻ tín dụng, bảo hiểm nhân thọ… — mọi module có hero số liệu + bộ lọc)

   Tách khỏi card.css để module mới dùng lại được mà không phải nạp toàn bộ
   CSS của trang thẻ, và để một lần chỉnh là cả hai trang cùng đổi.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Dải xác thực nguồn dữ liệu
   -------------------------------------------------------------------------- */
.verified {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 7px 14px;
	background: var(--c-act-50);
	border: 1px solid #BFE6D5;
	border-radius: var(--r-pill, 999px);
	font-size: 13.5px;
	color: var(--green-dark);
}
.verified .ico { width: 16px; height: 16px; flex: none; }

/* --------------------------------------------------------------------------
   Nút phụ
   -------------------------------------------------------------------------- */
.btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 22px;
	border: 1px solid var(--edge);
	border-radius: 8px;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--purple);
	background: #fff;
	transition: border-color .2s, background-color .2s;
}
.btn-ghost:hover { border-color: var(--c-brand-200); background: var(--purple-50); }
.btn-ghost .ico { width: 17px; height: 17px; }

/* --------------------------------------------------------------------------
   Ô số liệu tóm tắt trong hero
   -------------------------------------------------------------------------- */
.cstat2 { display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: 10px; transition: background-color .2s; }
.cstat2:hover { background: #fff; }

.cstat2__icon {
	display: grid; place-items: center;
	width: 38px; height: 38px;
	flex: none;
	border-radius: 11px;
	background: var(--purple-50);
	color: var(--purple);
}
.cstat2__icon .ico { width: 19px; height: 19px; stroke-width: 1.7; }
.cstat2:nth-child(3) .cstat2__icon { background: var(--c-act-50); color: var(--green-dark); }
.cstat2:nth-child(4) .cstat2__icon { background: var(--c-warm-50); color: var(--c-warm-700); }

.cstat2__body { display: flex; flex-direction: column; min-width: 0; }
.cstat2__value {
	font-size: 19px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}
.cstat2__label { font-size: 12.5px; color: var(--gray-2); line-height: 1.35; }

/* --------------------------------------------------------------------------
   Ô tìm kiếm + chip lọc
   -------------------------------------------------------------------------- */
.cfilter {
	margin-top: 22px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 14px;
	box-shadow: 0 10px 28px -22px rgba(13, 22, 48, .5);
}

.cfilter__bar { display: flex; flex-wrap: wrap; gap: 10px; }

.cfilter__sort {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	height: 50px;
	padding: 0 12px 0 14px;
	background: var(--c-soft);
	border: 1px solid transparent;
	border-radius: var(--r-pill, 999px);
	transition: border-color .2s, background-color .2s;
}
.cfilter__sort:focus-within { background: #fff; border-color: var(--c-brand-500); }
.cfilter__sort > .ico { width: 18px; height: 18px; color: var(--gray-2); flex: none; }
.cfilter__sort select {
	border: 0;
	background: none;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--ink);
	cursor: pointer;
	padding-right: 4px;
}
.cfilter__sort select:focus { outline: none; }

.cfilter__search {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 1 1 260px;
	min-width: 0;
	height: 50px;
	padding: 0 12px 0 16px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: var(--r-pill, 999px);
	transition: border-color .2s, box-shadow .2s;
}
.cfilter__search:focus-within {
	border-color: var(--c-brand-500);
	box-shadow: 0 0 0 3px rgba(59, 98, 212, .14);
}
.cfilter__search > .ico { width: 19px; height: 19px; color: var(--gray-2); flex: none; }

.cfilter__search input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font-size: 15.5px;
	color: var(--ink);
}
.cfilter__search input:focus { outline: none; }

.cfilter__clear {
	display: grid; place-items: center;
	width: 30px; height: 30px;
	flex: none;
	border-radius: 50%;
	background: var(--c-soft);
	color: var(--gray-2);
	cursor: pointer;
}
.cfilter__clear .ico { width: 15px; height: 15px; }
.cfilter__clear:hover { background: var(--edge); color: var(--ink); }

.chipbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--edge-2);
}

.chipf {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 14px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: var(--r-pill, 999px);
	font-size: 14px;
	color: var(--gray);
	cursor: pointer;
	transition: all .18s;
	/* Chip danh mục nay là thẻ <a>; gạch chân mặc định phá mất dáng viên thuốc. */
	text-decoration: none;
}
.chipf b {
	font-size: 12px;
	font-weight: 700;
	color: var(--gray-2);
	font-variant-numeric: tabular-nums;
}
.chipf:hover { border-color: var(--c-brand-200); color: var(--purple); }
.chipf.is-on {
	background: var(--c-brand-600);
	border-color: var(--c-brand-600);
	color: #fff;
}
.chipf.is-on b { color: rgba(255,255,255,.82); }

.cfilter__count {
	margin-left: auto;
	padding-left: 12px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--gray-2);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Trạng thái rỗng
   -------------------------------------------------------------------------- */
.cardgrid__empty {
	padding: 40px 20px;
	text-align: center;
	color: var(--gray-2);
	font-size: 15.5px;
}

/* --------------------------------------------------------------------------
   Đáp ứng màn hình
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
	.cfilter__search { max-width: none; }
	.cfilter__sort { width: 100%; }
}

/* ==========================================================================
   Khối dùng chung cho các trang nhóm sản phẩm
   ==========================================================================
   Ba module — vay vốn, thẻ tín dụng, bảo hiểm — dùng cùng một bộ khối: thanh
   chuyển nhóm, hàng chip lọc, danh sách sản phẩm nhóm theo tổ chức, thẻ nhóm ở
   trang gốc và lưới thông số. Tên class dùng tiền tố trung tính (p- cho product,
   hub- cho trang gốc) chứ không mang tên module nào.
   ========================================================================== */
/* --------------------------------------------------------------------------
   Thanh chuyển nhóm sản phẩm
   -------------------------------------------------------------------------- */
.linetabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

.linetabs__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: var(--r-pill, 999px);
	font-size: 14px;
	font-weight: 600;
	color: var(--gray);
	transition: border-color .2s, color .2s, background-color .2s;
}
.linetabs__item .ico { width: 17px; height: 17px; color: var(--gray-2); transition: color .2s; }
.linetabs__item:hover { border-color: var(--c-brand-200); color: var(--purple); }
.linetabs__item:hover .ico { color: var(--purple); }

.linetabs__item.is-on {
	background: var(--ins-accent, var(--purple));
	border-color: transparent;
	color: #fff;
	font-weight: 700;
}
.linetabs__item.is-on .ico { color: #fff; }

/* --------------------------------------------------------------------------
   Bộ lọc nhiều tiêu chí — mỗi tiêu chí một hàng có nhãn riêng
   -------------------------------------------------------------------------- */
.facetbars {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--edge-2);
}

.facetbar {
	display: grid;
	grid-template-columns: 150px minmax(0, 1fr);
	align-items: baseline;
	gap: 12px;
}

.facetbar__label {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: var(--gray-2);
	line-height: 2.6;
}

.facetbar__chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }

.facetbars .cfilter__count { margin-left: 0; padding-left: 0; text-align: right; }

.parc__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 14px;
	background: rgba(255, 255, 255, .72);
	border: 1px solid var(--edge);
	border-radius: 14px;
	backdrop-filter: blur(6px);
}


/* --------------------------------------------------------------------------
   Nhóm sản phẩm theo tổ chức
   -------------------------------------------------------------------------- */
.pgroups { display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 32px); }

.pgroup[hidden] { display: none; }

.pgroup__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--edge);
}

.pgroup__brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.pgroup__meta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.pgroup__name {
	font-size: clamp(18px, 2vw, 22px);
	font-weight: 700;
	color: var(--purple);
	line-height: 1.3;
}

.pgroup__count { font-size: 13.5px; color: var(--gray-2); }

.pgroup__all {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 16px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: var(--r-pill, 999px);
	font-size: 14px;
	font-weight: 700;
	color: var(--purple);
	transition: border-color .2s, background-color .2s;
}
.pgroup__all:hover { border-color: var(--c-brand-200); background: var(--purple-50); }
.pgroup__all .ico { width: 16px; height: 16px; transition: transform .2s; }
.pgroup__all:hover .ico { transform: translateX(3px); }

.prows { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

.prow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 430px) auto;
	align-items: center;
	gap: clamp(14px, 2vw, 26px);
	padding: 18px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 14px;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.prow[hidden] { display: none; }
.prow:hover {
	border-color: var(--c-brand-200);
	box-shadow: 0 18px 40px -30px rgba(13, 22, 48, .8);
	transform: translateY(-1px);
}

.prow__main { min-width: 0; }

.prow__kind {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--purple);
	text-transform: uppercase;
	letter-spacing: .3px;
}
.prow__kind .ico { width: 15px; height: 15px; }

.prow__name { margin-top: 6px; font-size: 17.5px; font-weight: 700; line-height: 1.38; }
.prow__name a { color: var(--ink); }
.prow__name a:hover { color: var(--purple); }

.prow__sum {
	margin-top: 6px;
	font-size: 14.5px;
	color: var(--gray);
	line-height: 1.55;
}

.prow__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 12px 14px;
	background: var(--c-soft);
	border-radius: 12px;
}

.pfact { min-width: 0; }
.pfact dt {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11.5px;
	color: var(--gray-2);
	line-height: 1.3;
}
.pfact__icon { display: inline-grid; place-items: center; color: var(--purple); }
.pfact__icon .ico { width: 14px; height: 14px; }
.pfact dd {
	margin: 4px 0 0;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
}

.prow__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	flex: none;
	padding: 13px 20px;
	border-radius: 10px;
	background: var(--green);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
	transition: background-color .2s;
}
.prow__btn:hover { background: var(--green-dark); }
.prow__btn .ico { width: 16px; height: 16px; }


/* --------------------------------------------------------------------------
   Kiến thức nền
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Nội dung giới thiệu công ty — thu gọn kèm nút "Xem thêm"
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   Trang giới thiệu (hình thức vay đánh dấu landing page)

   Mượn nguyên bố cục hai cột của trang bài viết. Phần dưới đây chỉ bù những
   thứ .lender__body chưa có khi đứng ngoài .post-page.
   -------------------------------------------------------------------------- */

/* Không có tiêu đề nào để dựng mục lục thì bỏ cột trái, cột chữ vào giữa. */
.parc .lender__body--solo {
	grid-template-columns: minmax(0, 820px);
	justify-content: center;
}

/*
 * Ảnh dán từ nơi khác không có lớp CSS nào của theme; để mặc định thì dính mép
 * trái và chừa một mảng trống bên phải. Cùng luật đã dùng cho .pseo__body.
 */
.parc .lender__prose img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 20px auto;
	border-radius: 12px;
}

/* --------------------------------------------------------------------------
   Bề rộng dòng chữ

   Cột nội dung rộng 826px, chữ 16px — đo được 107 ký tự một dòng, quá xa
   ngưỡng dễ đọc (45 – 75, chấp nhận tới 85). Dòng dài thì mắt hay nhảy sai
   hàng khi xuống dòng.

   Kẹp bề rộng ở từng khối chữ chứ không ở cả cột: ảnh vẫn cần trải rộng. Đoạn
   nào chỉ chứa ảnh thì thoát khỏi giới hạn — nội dung dán về hay bọc ảnh trong
   chính div.paragraph.
   -------------------------------------------------------------------------- */
.parc .lender__prose > p,
.parc .lender__prose > div.paragraph,
.parc .lender__prose > ul,
.parc .lender__prose > ol,
.parc .lender__prose > h2,
.parc .lender__prose > h3,
.parc .lender__prose > h4,
.parc .lender__prose > blockquote { max-width: 72ch; }

.parc .lender__prose > div.paragraph:has( > img ) { max-width: none; }

/* Khối nội dung của term cũng nhận chữ dán về, cùng luật đoạn văn. */
.pseo__body div.paragraph { margin: 0 0 14px; }
.pseo__body p,
.pseo__body div.paragraph,
.pseo__body ul,
.pseo__body ol { max-width: 72ch; }
.pseo__body div.paragraph:has( > img ) { max-width: none; }

/* Mục lục có hai cấp: h3 thụt vào cho thấy nó nằm dưới h2. */
.toc__lv3 .toc__link { padding-left: 14px; font-size: 14px; }

/* --------------------------------------------------------------------------
   Thẻ tóm tắt ở cột phải phần đầu trang giới thiệu
   -------------------------------------------------------------------------- */
.lsum {
	padding: 20px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(21, 26, 36, .06);
}

.lsum__label {
	margin: 0 0 12px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-muted);
}

.lsum__rows { margin: 0 0 16px; }

.lsum__rows > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 9px 0;
	border-top: 1px solid var(--c-line-soft);
}

.lsum__rows > div:first-child { border-top: 0; padding-top: 0; }

.lsum__rows dt {
	font-size: 13.5px;
	color: var(--c-muted);
}

.lsum__rows dd {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--c-ink);
	text-align: right;
}

/*
 * Nút gọi dùng màu nhấn của chính hình thức vay — ở đây nền là thẻ trắng nên
 * không có rủi ro tương phản như khối kêu gọi nền đêm ở cuối trang.
 */
.lsum__call {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	/*
	 * width: 100% là bắt buộc, không phải cho đẹp.
	 *
	 * Trước đây đây là thẻ <a>: display:flex biến nó thành khối và tự trải hết
	 * bề ngang thẻ. Đổi sang <button> để mở hộp bật lên thì nút co lại theo chữ
	 * — đo được 177px trong vùng 360px, dính mép trái, chừa 182px trống.
	 */
	width: 100%;
	padding: 13px 18px;
	border: 0;
	font-family: inherit;
	cursor: pointer;
	border-radius: 999px;
	background: var(--ins-accent, var(--c-brand-700));
	color: #fff;
	font-size: 17px;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	transition: transform .16s, box-shadow .16s;
}

.lsum__call:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(21, 26, 36, .18);
	color: #fff;
}

.lsum__call .ico { width: 19px; height: 19px; }

.lsum__note {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--c-muted);
	text-align: center;
}

/* Màn hẹp: thẻ xuống dưới phần chữ thay vì bị bóp thành cột hẹp. */
@media (max-width: 860px) {
	.parc__grid { grid-template-columns: 1fr; }
	.lsum { max-width: 420px; }
}

/* --------------------------------------------------------------------------
   Khối kêu gọi cuối trang giới thiệu

   Nền đêm chứ không phải màu nhấn của hình thức vay: màu nhấn do biên tập chọn
   tự do trên từng term, đặt chữ trắng lên một màu bất kỳ là chuyện hên xui về
   độ tương phản. Nền đêm luôn đọc được, và đúng bảng màu chân trang.
   -------------------------------------------------------------------------- */
.lcta {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: clamp(18px, 3vw, 36px);
	align-items: center;
	margin-top: 32px;
	padding: clamp(22px, 3vw, 30px);
	border-radius: 16px;
	background: linear-gradient(115deg, var(--c-night-900) 0%, var(--c-night-800) 100%);
	color: #fff;
}

.lcta__label {
	margin: 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}

.lcta__title {
	margin: 6px 0 0;
	font-size: clamp(19px, 2.1vw, 23px);
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

.lcta__text {
	margin: 8px 0 0;
	max-width: 52ch;
	font-size: 14.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .84);
}

.lcta__acts {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: stretch;
}

/* Số điện thoại là hành động chính: nút đặc, tương phản mạnh nhất trên nền đêm. */
.lcta__call {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 22px;
	border-radius: 999px;
	background: #fff;
	color: var(--c-night-900);
	font-size: 17px;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	transition: transform .16s, box-shadow .16s;
}

.lcta__call:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
	color: var(--c-night-900);
}

.lcta__call .ico { width: 19px; height: 19px; }

/* Hành động phụ: viền mảnh để không tranh chỗ với nút gọi. */
.lcta__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 999px;
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: background .16s, border-color .16s;
}

.lcta__link:hover {
	background: rgba(255, 255, 255, .12);
	border-color: rgba(255, 255, 255, .6);
	color: #fff;
}

.lcta__link .ico { width: 16px; height: 16px; transition: transform .2s; }
.lcta__link:hover .ico { transform: translateX(3px); }

/* Màn hẹp: xếp dọc, hai nút trải hết bề ngang cho dễ bấm. */
@media (max-width: 720px) {
	.lcta {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.lcta__text { max-width: none; }
}

/* Lưới thông số đứng riêng, không có vỏ hai cột của trang sản phẩm. */
.lspecs .termgrid { margin-top: 0; }

/*
 * Nới khoảng cách cho khối thông số của trang giới thiệu.
 *
 * Trên trang sản phẩm, lưới này nằm trong .factcard — cái khung trắng bo góc
 * quanh nó tự tạo ra khoảng thở. Trang giới thiệu bỏ khung đó đi nên lưới nằm
 * trần: các ô dính nhau, và hàng cuối chạm thẳng vào dòng đầu của bài viết bên
 * dưới, không còn ranh giới nào cho mắt bám.
 *
 * Chỉ chỉnh trong .lspecs, không đụng .termgrid gốc, để trang sản phẩm giữ
 * nguyên tỉ lệ đã cân với khung của nó.
 */
.lspecs { margin-bottom: 30px; }
.lspecs .termgrid { gap: 14px; }
.lspecs .termbox { padding: 15px 16px; }
.lspecs .termbox dd { margin-top: 5px; }

/*
 * Hàng chuyển hình thức vay: một hàng cuộn ngang, không xuống dòng.
 *
 * Site có 13 hình thức nên hàng chip tự xuống bốn dòng, cao 187px — chiếm gần
 * nửa màn hình đầu trước cả khi người đọc thấy dòng chữ nào. Cuộn ngang giữ
 * nguyên mọi lối đi mà chỉ tốn một hàng.
 */
.linetabs {
	flex-wrap: nowrap;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding-bottom: 6px;
}

.linetabs__item { flex: 0 0 auto; }

/* Trang giới thiệu không có ô số liệu và bộ lọc nên hero hụt hẫng ở đáy. */
.parc__hero:has(+ .lender__body) { padding-bottom: 12px; }
.parc .lender__body { padding-block: 28px 60px; }

/* --------------------------------------------------------------------------
   Bài viết gắn với danh mục — bản đứng riêng ở trang lưu trữ

   Ở trang sản phẩm, khối .lnews nằm sẵn trong .lender__main nên đã có khung và
   khoảng cách. Ở trang lưu trữ nó là con trực tiếp của vỏ trang, không thẻ nào
   kẹp chiều rộng — thiếu phần này thì lưới bài dính sát mép trái màn hình và
   kéo dài hết bề ngang, lệch hẳn với mọi khối còn lại.

   Cùng nhịp đứng với .pseo ngay bên dưới để ba khối cuối trang đọc thành một
   mạch: lưới thẻ → bài viết → giới thiệu → câu hỏi.
   -------------------------------------------------------------------------- */
.lnews--band {
	padding-block: clamp(32px, 4.4vw, 54px);
	background: #fff;
}

/*
 * .lender__h2 có margin-top 44px cho khoảng cách giữa các khối trong thân bài.
 * Ở đây khoảng cách đã do padding của section lo, cộng thêm thì đầu khối tụt
 * xuống thành một mảng trắng.
 */
.lnews--band .lender__h2 { margin-top: 0; }

/*
 * Lưới bài trên trang lưu trữ tự co theo số bài.
 *
 * Lưới mặc định là repeat(auto-fill, minmax(280px, 1fr)) — trong cột 1168px nó
 * luôn chia bốn ô. Một danh mục mới thường chỉ có một hai bài, và một thẻ 280px
 * nằm trong khung 1168px trông như bị bỏ quên ở góc trái chứ không phải một
 * khối được xếp đặt.
 *
 * Đếm bằng :has() thay vì thêm lớp từ PHP: số bài là chuyện của bố cục, không
 * đáng để template phải biết. Trình duyệt nào chưa hỗ trợ :has() thì rơi về
 * lưới bốn ô như cũ — xấu hơn chứ không vỡ.
 */
.lnews--band .lnewsgrid:not(:has(> :nth-child(2))) {
	grid-template-columns: minmax(0, 520px);
}

/*
 * 880px = vừa đúng ba cột 280px với hai khe 14px. Hụt vài pixel là auto-fit chỉ
 * xếp được hai cột, và ba bài lại thành hàng 2 + 1 lẻ — đúng cái đang muốn tránh.
 */
.lnews--band .lnewsgrid:has(> :nth-child(2)):not(:has(> :nth-child(4))) {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	max-width: 880px;
}


.pseo { padding-block: clamp(32px, 4.4vw, 54px); background: #fff; }

.pseo__box {
	padding: clamp(20px, 2.6vw, 30px);
	background: var(--c-soft, #F5F7FB);
	border: 1px solid var(--edge);
	border-radius: var(--r);
}

.pseo__title {
	margin: 0 0 14px;
	font-size: clamp(19px, 2.1vw, 24px);
	line-height: 1.3;
	font-weight: 700;
	color: var(--ink);
}

.pseo__body { font-size: 15.5px; line-height: 1.75; color: var(--ink-2, #3D4757); }
.pseo__body > :first-child { margin-top: 0; }
.pseo__body > :last-child { margin-bottom: 0; }
.pseo__body p,
.pseo__body ul,
.pseo__body ol { margin: 0 0 14px; }
/* Reset chung của theme đặt list-style:none, phải trả lại cho nội dung biên tập. */
.pseo__body ul,
.pseo__body ol { padding-left: 22px; }
.pseo__body ul { list-style: disc; }
.pseo__body ol { list-style: decimal; }

/*
 * Ảnh trong khối nội dung: khối, co vừa cột, căn giữa.
 *
 * Nội dung khối này phần lớn là chữ dán từ nơi khác, kèm ảnh không có lớp CSS
 * nào của theme. Để mặc định thì ảnh dính mép trái và chừa một mảng trống bên
 * phải — ảnh 762px trong cột 1106px.
 *
 * height:auto là bắt buộc chứ không phải cho đẹp: ảnh dán về thường mang sẵn
 * thuộc tính width/height, bị max-width bóp ngang mà chiều cao giữ nguyên thì
 * ảnh méo.
 */
.pseo__body img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 18px auto;
	border-radius: 12px;
}

/* Ảnh dán dạng khối của Gutenberg thì phần chú thích đi theo ảnh. */
.pseo__body figure {
	margin: 18px 0;
	text-align: center;
}

.pseo__body figcaption {
	margin-top: 8px;
	font-size: 13.5px;
	color: var(--c-muted);
}
.pseo__body li { margin-bottom: 6px; }
.pseo__body h2,
.pseo__body h3,
.pseo__body h4 { margin: 22px 0 10px; line-height: 1.35; color: var(--ink); }
.pseo__body h2 { font-size: 19px; }
.pseo__body h3 { font-size: 17px; }
.pseo__body h4 { font-size: 15.5px; }
.pseo__body a { color: var(--c-brand-600, #2547B0); }
.pseo__body img { height: auto; border-radius: 10px; }
.pseo__body table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.pseo__body th,
.pseo__body td { padding: 8px 10px; border: 1px solid var(--edge); text-align: left; }

/*
 * Lớp kẹp do JS gắn vào. Dùng max-height + mask thay vì display:none để chữ
 * vẫn nằm trong luồng tài liệu — máy tìm kiếm đọc được toàn bộ.
 */
.pseo__body.is-clamped {
	max-height: var(--pseo-clamp, 260px);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent 100%);
	mask-image: linear-gradient(180deg, #000 calc(100% - 72px), transparent 100%);
}

/*
 * Nút căn giữa khối. Dùng margin-inline:auto trên chính nút thay vì
 * text-align trên hộp cha: hộp cha còn chứa cả đoạn nội dung, canh giữa ở đó
 * sẽ kéo theo mọi dòng chữ bên trong.
 */
.pseo__more {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	margin: 20px auto 0;
	gap: 7px;
	padding: 9px 16px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 999px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-brand-600, #2547B0);
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease;
}
/*
 * display trong author stylesheet thắng [hidden]{display:none} của trình
 * duyệt, nên phải tự tắt: thiếu dòng này thì đoạn ngắn không cần thu gọn vẫn
 * lòi ra một cái nút "Xem thêm" bấm vào chẳng có gì.
 */
.pseo__more[hidden] { display: none; }

.pseo__more:hover { background: var(--c-brand-50, #EEF2FE); border-color: var(--c-brand-600, #2547B0); }
.pseo__more .ico { width: 16px; height: 16px; transition: transform .18s ease; }
.pseo__more[aria-expanded="true"] .ico { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
	.pseo__more,
	.pseo__more .ico { transition: none; }
}

/* --------------------------------------------------------------------------
   FAQ công ty — chỉ cần khung section, phần .faq__* dùng lại của lender.css
   -------------------------------------------------------------------------- */
.pfaq {
	padding-block: 0 clamp(32px, 4.4vw, 54px);
	background: #fff;
}

.pfaq__title {
	margin: 0 0 16px;
	font-size: clamp(19px, 2.1vw, 24px);
	line-height: 1.3;
	font-weight: 700;
	color: var(--ink);
}

/* Khối nội dung ở trên cũng nền trắng — thiếu khoảng đệm này thì hai khối
   dính liền thành một mảng trắng không rõ đâu là đâu. */
.pseo + .pfaq { padding-top: 4px; }

.pedu { padding-block: clamp(36px, 5vw, 60px); background: #fff; }

.edugrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 14px;
}

.educard {
	padding: 20px;
	background: var(--c-soft);
	border: 1px solid var(--edge-2);
	border-radius: 16px;
	transition: background-color .2s, border-color .2s, transform .2s;
}
.educard:hover { background: #fff; border-color: var(--c-brand-200); transform: translateY(-2px); }

.educard__icon {
	display: grid; place-items: center;
	width: 46px; height: 46px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid var(--edge);
	color: var(--purple);
}
.educard__icon .ico { width: 22px; height: 22px; stroke-width: 1.6; }
.educard:nth-child(2) .educard__icon { color: var(--green-dark); }
.educard:nth-child(3) .educard__icon { color: var(--c-warm-700); }

.educard__title {
	margin-top: 14px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.42;
}

.educard__text { margin-top: 8px; font-size: 14.5px; color: var(--gray); line-height: 1.62; }


/* --------------------------------------------------------------------------
   Thẻ nhóm sản phẩm ở trang gốc
   -------------------------------------------------------------------------- */
.hubgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: 16px;
}

.hubcard {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 22px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 18px;
	overflow: hidden;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.hubcard:hover {
	border-color: var(--ins-accent);
	box-shadow: 0 24px 50px -36px rgba(13, 22, 48, .95);
	transform: translateY(-3px);
}

/* Vạch màu trên cùng để phân biệt dòng ngay từ xa */
.hubcard__bar {
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--ins-accent);
}

.hubcard__head { display: flex; align-items: flex-start; gap: 14px; }

.hubcard__icon {
	display: grid; place-items: center;
	width: 54px; height: 54px;
	flex: none;
	border-radius: 16px;
	background: var(--ins-accent);
	color: #fff;
	transition: transform .2s;
}
.hubcard__icon .ico { width: 26px; height: 26px; stroke-width: 1.6; }
.hubcard:hover .hubcard__icon { transform: rotate(-6deg) scale(1.05); }

.hubcard__id { min-width: 0; }

.hubcard__name { font-size: 18.5px; font-weight: 700; line-height: 1.3; }
.hubcard__name a { color: var(--ins-accent); }
.hubcard__name a:hover { text-decoration: underline; }

.hubcard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 4px;
	font-size: 13px;
	color: var(--gray-2);
}
.hubcard__meta i { font-style: normal; }

/* Mức phí là con số người đọc tìm đầu tiên khi cân nhắc giữa các dòng */
.hubcard__fee {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-top: 14px;
	padding: 9px 14px;
	background: var(--c-soft);
	border-radius: 12px;
}
.hubcard__fee span { font-size: 12.5px; color: var(--gray-2); }
.hubcard__fee b {
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.hubcard__lead { margin-top: 14px; font-size: 14.5px; color: var(--gray); line-height: 1.62; }

.hubcard__specs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.hubcard__specs li {
	padding: 3px 11px;
	border-radius: var(--r-pill, 999px);
	background: var(--c-soft);
	font-size: 12px;
	color: var(--gray-2);
}

/* Vài sản phẩm có thật để thẻ không chỉ là lời hứa suông */
.hubcard__peek {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 16px 0;
	padding-top: 14px;
	border-top: 1px solid var(--edge-2);
}
.hubcard__peek a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 0;
	font-size: 14px;
	color: var(--gray);
	transition: color .2s;
}
.hubcard__peek a:hover { color: var(--ins-accent); }
.hubcard__peek .ico {
	width: 14px; height: 14px;
	flex: none;
	color: var(--ins-accent);
	transform: rotate(-90deg);
}
.hubcard__peek span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* margin-top:auto để nút của các thẻ cùng hàng thẳng một đường, dù phần
   nội dung bên trên dài ngắn khác nhau */
.hubcard__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: auto;
	padding: 12px 18px;
	border-radius: 10px;
	background: var(--ins-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	transition: filter .2s;
}
.hubcard__go:hover { filter: brightness(.9); }
.hubcard__go .ico { width: 16px; height: 16px; transition: transform .2s; }
.hubcard__go:hover .ico { transform: translateX(3px); }


/* --------------------------------------------------------------------------
   Danh sách tổ chức
   -------------------------------------------------------------------------- */
.complist { display: flex; flex-wrap: wrap; gap: 10px; }

.compchip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 16px 8px 8px;
	background: var(--c-soft);
	border: 1px solid var(--edge-2);
	border-radius: var(--r-pill, 999px);
	transition: background-color .2s, border-color .2s;
}
.compchip:hover { background: #fff; border-color: var(--c-brand-200); }

.compchip__mark {
	display: grid; place-items: center;
	width: 32px; height: 32px;
	border-radius: 50%;
	background: var(--purple);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}
.compchip__name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.compchip__count {
	font-size: 12px;
	font-weight: 700;
	color: var(--gray-2);
	font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   Lưới thông số sản phẩm
   -------------------------------------------------------------------------- */
.termgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 10px;
	margin: 22px 0 0;
}

.termbox {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 15px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 12px;
	transition: border-color .2s, box-shadow .2s;
}
.termbox:hover {
	border-color: var(--c-brand-200);
	box-shadow: 0 10px 26px -22px rgba(13, 22, 48, .6);
}

.termbox__icon {
	display: grid; place-items: center;
	width: 38px; height: 38px;
	flex: none;
	border-radius: 11px;
	background: var(--purple-50);
	color: var(--purple);
}
.termbox__icon .ico { width: 19px; height: 19px; stroke-width: 1.7; }
/* Luân phiên tông màu để dãy ô không phẳng một màu */
.termbox:nth-child(3n+2) .termbox__icon { background: var(--c-act-50); color: var(--green-dark); }
.termbox:nth-child(3n+3) .termbox__icon { background: var(--c-warm-50); color: var(--c-warm-700); }

.termbox__text { min-width: 0; }
.termbox dt { font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--gray-2); }
.termbox dd {
	margin: 3px 0 0;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Vỏ trang danh sách sản phẩm
   ========================================================================== */
.parc .section-w,
.parc .section-g { padding-block: clamp(36px, 5vw, 60px); }
.parc .section-w { background: #fff; }
.parc .section-g { background: var(--c-soft); }

.parc__hero {
	padding-block: 16px clamp(30px, 4.4vw, 52px);
	background:
		radial-gradient(900px 420px at 88% 10%, var(--purple-50) 0%, rgba(238,242,254,0) 62%),
		linear-gradient(180deg, #F7F9FF 0%, #FFFFFF 88%);
}

/* Tiêu đề và đoạn dẫn nằm chung cột trái để hai cột cùng bắt đầu một mốc */
.parc__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
	gap: clamp(24px, 3.4vw, 48px);
	align-items: center;
	margin-top: 14px;
}

.parc__copy { min-width: 0; }

.parc__title {
	max-width: 20ch;
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 700;
	color: var(--purple);
	line-height: 1.2;
	letter-spacing: -.5px;
}

/*
 * Màu nhấn của dòng bảo hiểm đặt trên nền trắng hoặc --c-soft, không đặt trên
 * --purple-50: nền đó kéo tông hổ phách của bảo hiểm nhà xuống 4,49:1, dưới
 * ngưỡng AA. Sáu tông còn lại đều đạt trên hai nền kia.
 */
.parc__hl { color: var(--ins-accent, var(--green-dark)); }

.parc__lead { margin-top: 14px; font-size: 15.5px; color: var(--gray); line-height: 1.7; }

/* ==========================================================================
   Vỏ trang gốc của một nhóm module
   ========================================================================== */
.phub .section-w,
.phub .section-g { padding-block: clamp(40px, 5.4vw, 68px); }
.phub .section-w { background: #fff; }
.phub .section-g { background: var(--c-soft); }
.phub .shell--faq { max-width: 860px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.phub__hero {
	position: relative;
	overflow: hidden;
	padding-block: 16px clamp(34px, 4.6vw, 58px);
	background: linear-gradient(180deg, #F7F9FF 0%, #FFFFFF 92%);
}

/*
 * Quầng sáng đặt ở lớp riêng thay vì nền của khối: nhờ vậy nó tràn ra ngoài
 * mép phải mà không kéo theo thanh cuộn ngang, và bo tròn được thành hình đĩa.
 */
.phub__aura {
	position: absolute;
	top: -34%;
	right: -12%;
	width: min(760px, 62vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 38% 38%, rgba(37, 71, 176, .16) 0%, rgba(37, 71, 176, 0) 62%),
		radial-gradient(circle at 68% 64%, rgba(18, 168, 122, .14) 0%, rgba(18, 168, 122, 0) 60%);
	pointer-events: none;
}

.phub__hero-inner { position: relative; }

.phub__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding: 7px 15px;
	background: #fff;
	border: 1px solid var(--purple-100);
	border-radius: var(--r-pill, 999px);
	box-shadow: 0 8px 22px -18px rgba(13, 22, 48, .7);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--purple);
}
.phub__eyebrow .ico { width: 16px; height: 16px; color: var(--green); }

.phub__title {
	margin-top: 16px;
	max-width: 20ch;
	font-size: clamp(30px, 4.2vw, 52px);
	font-weight: 700;
	color: var(--purple);
	line-height: 1.12;
	letter-spacing: -1px;
}
.phub__hl { color: var(--green-dark); }

.phub__lead { margin-top: 16px; max-width: 68ch; font-size: 16.5px; color: var(--gray); line-height: 1.7; }

/* Số liệu hero: hàng viên rời, không đóng khung — hero đã đủ nặng ở tiêu đề */
.phub__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 10px;
	margin-top: 26px;
	padding: 14px;
	background: rgba(255, 255, 255, .78);
	border: 1px solid var(--edge);
	border-radius: 16px;
	backdrop-filter: blur(6px);
}

.hstat { display: flex; align-items: center; gap: 12px; padding: 6px 8px; min-width: 0; }

.hstat__icon {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	flex: none;
	border-radius: 12px;
	background: var(--purple-50);
	color: var(--purple);
}
.hstat__icon .ico { width: 20px; height: 20px; stroke-width: 1.7; }
.hstat:nth-child(2) .hstat__icon { background: var(--c-act-50); color: var(--green-dark); }
.hstat:nth-child(3) .hstat__icon { background: var(--c-warm-50); color: var(--c-warm-700); }

.hstat__body { display: flex; flex-direction: column; min-width: 0; }
.hstat__body b {
	font-size: 21px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}
.hstat__body i { font-style: normal; font-size: 12.5px; color: var(--gray-2); line-height: 1.35; }

.phub__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.phub__actions .btn-apply .ico { transition: transform .2s; }
.phub__actions .btn-apply:hover .ico { transform: translateY(2px); }

/* --------------------------------------------------------------------------
   Khối kết ở trang gốc
   -------------------------------------------------------------------------- */
.phub__cta {
	padding-block: clamp(36px, 4.6vw, 56px);
	background: linear-gradient(115deg, var(--purple) 0%, var(--c-brand-600) 62%, var(--c-act-800) 100%);
	color: #fff;
}

.phub__cta-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(20px, 3vw, 44px);
	flex-wrap: wrap;
}

.phub__cta-title {
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 700;
	line-height: 1.28;
	color: #fff;
}

.phub__cta-text {
	margin-top: 10px;
	max-width: 62ch;
	font-size: 15.5px;
	line-height: 1.68;
	color: rgba(255, 255, 255, .88);
}

/* Nút trên nền tối phải đảo màu, nút xanh mặc định sẽ chìm vào nền */
.phub__cta .btn-apply {
	flex: none;
	background: #fff;
	color: var(--purple);
}
.phub__cta .btn-apply:hover { background: var(--purple-50); }

/* --------------------------------------------------------------------------
   Chip phân loại sản phẩm
   -------------------------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	border-radius: var(--r-pill, 999px);
	font-size: 13.5px;
	font-weight: 700;
	background: var(--purple-50);
	color: var(--purple);
	border: 1px solid var(--purple-100);
}
.chip .ico { width: 15px; height: 15px; }
.chip--net  { background: var(--c-brand-600); color: #fff; border-color: transparent; }
.chip--tier { background: var(--c-ink); color: #fff; border-color: transparent; }

/*
 * Thẻ ngừng mở mới không phải lỗi cũng không phải cảnh báo, nên dùng xám trung
 * tính chứ không dùng đỏ — đỏ ở đây sẽ đọc thành "thẻ có vấn đề".
 */
.chip--stopped {
	background: #EEF0F4;
	color: var(--c-muted);
	border-color: #DDE1E8;
}


/* --------------------------------------------------------------------------
   Danh sách điều kiện và bảng thông số hai cột
   --------------------------------------------------------------------------
   Dùng ở trang chi tiết của cả thẻ tín dụng lẫn vay vốn.
   -------------------------------------------------------------------------- */
.reqlist {
	margin: 0;
	border: 1px solid var(--edge);
	border-radius: 12px;
	overflow: hidden;
}
.reqlist__row {
	display: grid;
	grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
	gap: 16px;
	padding: 14px 18px;
	background: #fff;
}
.reqlist__row + .reqlist__row { border-top: 1px solid var(--edge-2); }
.reqlist__row { transition: background-color .2s; }
.reqlist__row:hover { background: var(--purple-50); }
.reqlist dt {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ink);
}

.reqlist__icon {
	display: grid; place-items: center;
	width: 34px; height: 34px;
	flex: none;
	border-radius: 10px;
	background: var(--purple-50);
	color: var(--purple);
	transition: background-color .2s, color .2s;
}
.reqlist__icon .ico { width: 17px; height: 17px; stroke-width: 1.7; }
.reqlist__row:hover .reqlist__icon { background: var(--purple); color: #fff; }
.reqlist dd { margin: 0; font-size: 15px; color: var(--gray); line-height: 1.55; }

/* Bảng thông số: kẻ xen kẽ cho dễ dò theo hàng */

/*
 * Bỏ min-width thừa hưởng từ .cmp__table. Con số 900px ở đó viết cho bảng so
 * sánh lãi suất 7 cột; bảng thông số chỉ có 2 cột toàn chữ nên 900px làm bảng
 * rộng hơn khung 824px của cột nội dung, và người đọc phải kéo ngang mới thấy
 * hết một câu — kéo ngang cả trên màn 1440. Đặt 0 để bảng co theo khung, chữ
 * tự xuống dòng (đã có white-space:normal ngay dưới đây).
 */
.spectable { min-width: 0; }

.spectable tbody th,
.spectable tbody td { white-space: normal; vertical-align: top; }
.spectable tbody tr:nth-child(even) > th,
.spectable tbody tr:nth-child(even) > td { background: var(--c-soft); }
.spectable tbody tr:hover > th,
.spectable tbody tr:hover > td { background: var(--purple-50); }

/* --------------------------------------------------------------------------
   Thẻ ưu đãi / lợi ích
   --------------------------------------------------------------------------
   Dùng ở trang thẻ tín dụng ("Ưu đãi"), gửi tiết kiệm ("Lợi ích") và bảo hiểm.
   Trước đây nằm ở card.css nên trang gửi tiết kiệm mất hẳn phần định dạng.
   -------------------------------------------------------------------------- */
.perkgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
}

.perkcard {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 12px;
	font-size: 15px;
	color: var(--gray);
	line-height: 1.55;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.perkcard:hover {
	border-color: var(--c-brand-200);
	box-shadow: 0 10px 24px -18px rgba(13, 22, 48, .5);
	transform: translateY(-2px);
}

.perkcard__icon {
	display: grid; place-items: center;
	width: 38px; height: 38px;
	flex: none;
	border-radius: 11px;
	background: var(--c-act-50);
	color: var(--green-dark);
	transition: transform .3s;
}
.perkcard:hover .perkcard__icon { transform: rotate(-6deg) scale(1.05); }
/* Luân phiên tông màu để dãy thẻ không đều một màu */
.perkcard:nth-child(3n+2) .perkcard__icon { background: var(--purple-50); color: var(--purple); }
.perkcard:nth-child(3n+3) .perkcard__icon { background: var(--c-warm-50); color: var(--c-warm-700); }
.perkcard__icon .ico { width: 19px; height: 19px; stroke-width: 1.6; }

/* --------------------------------------------------------------------------
   Khối liên kết cha ↔ con trong một cụm chủ đề

   Danh sách link thuần, không phải thẻ sản phẩm: mục đích là nối cụm lại chứ
   không phải giới thiệu từng mục, nên mỗi dòng chỉ cần đủ to để bấm và đủ rõ
   để quét mắt qua hai ba chục mục.
   -------------------------------------------------------------------------- */
.tclu {
	padding: 34px 0 6px;
}

/*
 * Trên trang không có khối bài viết hay câu hỏi phía dưới, khối này là thứ cuối
 * cùng trước chân trang — 6px đệm đáy khiến hàng thẻ dính vào dải màu của footer.
 */
.tclu:last-child {
	padding-bottom: 46px;
}

.tclu__head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 18px;
}

.tclu__title {
	margin: 0;
	font-size: clamp(19px, 1.7vw, 23px);
	font-weight: 700;
	color: var(--ink);
}

.tclu__lead {
	margin: 6px 0 0;
	max-width: 62ch;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--gray);
}

/* Đường về trang tổng quan của cụm — không phải một mục ngang hàng với anh em. */
.tclu__up {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	padding: 9px 15px;
	border: 1px solid var(--edge);
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	color: var(--purple);
	text-decoration: none;
	transition: border-color .18s, background .18s;
}
.tclu__up:hover { border-color: var(--purple); background: var(--purple-50); }
.tclu__up .ico { width: 15px; height: 15px; transition: transform .2s; }
.tclu__up:hover .ico { transform: translateX(3px); }

/*
 * auto-fill chứ không auto-fit: cụm chỉ có hai ba mục thì auto-fit kéo mỗi ô
 * rộng bằng nửa màn hình, nhìn như hai cái nút lạc lõng.
 */
.tclu__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tclu__item { min-width: 0; }

.tclu__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	height: 100%;
	padding: 13px 15px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 12px;
	font-size: 15px;
	color: var(--ink);
	text-decoration: none;
	transition: border-color .18s, box-shadow .18s, color .18s;
}
.tclu__link:hover {
	border-color: var(--c-brand-200);
	color: var(--purple);
	box-shadow: 0 10px 26px -22px rgba(13, 22, 48, .6);
}

.tclu__name { min-width: 0; }

.tclu__ico {
	flex: none;
	width: 15px; height: 15px;
	color: var(--gray-2);
	transition: transform .2s;
}
.tclu__link:hover .tclu__ico { transform: translateX(3px); color: var(--purple); }

@media (max-width: 600px) {
	.tclu__grid { grid-template-columns: 1fr; }
	.tclu__up { width: 100%; justify-content: center; }
}