/* ==========================================================================
   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;
}
.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
   -------------------------------------------------------------------------- */
.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; }