@charset "UTF-8";
/* ==========================================================================
   Bảo hiểm nhân thọ — trang chi tiết và trang lưu trữ
   Nạp sau lender.css và compare.css nên dùng lại bảng màu, mục lục, FAQ,
   bảng so sánh, nút và bộ lọc của hai module đó.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Khối thương hiệu — dùng chung cho hero và tiêu đề nhóm ở trang lưu trữ
   --------------------------------------------------------------------------
   Logo các hãng bảo hiểm rất khác nhau về tỷ lệ, nên khung cố định vuông và
   ảnh dùng object-fit:contain để không hãng nào bị cắt xén.
   -------------------------------------------------------------------------- */
.ibrand {
	display: grid;
	place-items: center;
	width: 116px;
	height: 116px;
	padding: 14px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 18px;
	box-shadow: 0 14px 34px -24px rgba(13, 22, 48, .55);
}

.ibrand__logo { max-width: 100%; max-height: 100%; object-fit: contain; }

.ibrand__initials {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	background: var(--ins-accent, var(--purple));
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: .5px;
}

.ibrand--sm {
	width: 62px;
	height: 62px;
	padding: 8px;
	border-radius: 14px;
	box-shadow: none;
}
.ibrand--sm .ibrand__initials { font-size: 18px; }

/* --------------------------------------------------------------------------
   Hero trang chi tiết
   -------------------------------------------------------------------------- */
.ihero {
	padding-block: 22px clamp(28px, 4vw, 44px);
	background:
		radial-gradient(1000px 420px at 84% 4%, var(--purple-50) 0%, rgba(238,242,254,0) 62%),
		linear-gradient(180deg, #F7F9FF 0%, #FFFFFF 84%);
}

.ihero__grid {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
	gap: clamp(22px, 3.2vw, 44px);
	align-items: start;
}

.ihero__brandcol {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	position: sticky;
	top: 96px;
}

.ihero__company {
	font-size: 15px;
	font-weight: 700;
	color: var(--purple);
	line-height: 1.4;
}
.ihero__company:hover { text-decoration: underline; }

/* Ở cột hẹp thì dải xác thực xuống dòng thay vì tràn ngang */
.verified--stack {
	margin-top: 2px;
	align-items: flex-start;
	border-radius: 12px;
	line-height: 1.45;
}

.ihero__kicker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	background: var(--purple-50);
	border: 1px solid var(--purple-100);
	border-radius: var(--r-pill, 999px);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--purple);
}
.ihero__kicker .ico { width: 16px; height: 16px; }

.ihero__title {
	margin-top: 14px;
	font-size: clamp(25px, 3vw, 38px);
	font-weight: 700;
	color: var(--purple);
	line-height: 1.22;
	letter-spacing: -.4px;
}

.ihero__summary {
	margin-top: 14px;
	max-width: 62ch;
	font-size: 16px;
	color: var(--gray);
	line-height: 1.68;
}


.ihero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.ihero__note {
	margin-top: 14px;
	max-width: 72ch;
	font-size: 12.5px;
	color: var(--gray-2);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Quyền lợi bảo hiểm
   -------------------------------------------------------------------------- */
.benefit-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.benefit {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	align-items: start;
	gap: 16px;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 14px;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.benefit:hover {
	border-color: var(--c-brand-200);
	box-shadow: 0 16px 36px -28px rgba(13, 22, 48, .7);
	transform: translateY(-1px);
}

.benefit__icon {
	display: grid; place-items: center;
	width: 52px; height: 52px;
	border-radius: 14px;
	background: var(--purple-50);
	color: var(--purple);
	transition: transform .2s;
}
.benefit:hover .benefit__icon { transform: rotate(-5deg) scale(1.04); }
.benefit__icon .ico { width: 24px; height: 24px; stroke-width: 1.6; }
.benefit:nth-child(3n+2) .benefit__icon { background: var(--c-act-50); color: var(--green-dark); }
.benefit:nth-child(3n+3) .benefit__icon { background: var(--c-warm-50); color: var(--c-warm-700); }

.benefit__body { min-width: 0; }

.benefit__title {
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.4;
}

.benefit__num {
	flex: none;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: var(--r-pill, 999px);
	background: var(--c-soft);
	color: var(--gray-2);
	font-size: 12px;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}

.benefit__desc {
	margin-top: 7px;
	font-size: 15px;
	color: var(--gray);
	line-height: 1.62;
}

/* Mức chi trả là con số người đọc tìm đầu tiên — tách hẳn sang phải */
.benefit__value {
	align-self: center;
	padding: 8px 15px;
	border-radius: var(--r-pill, 999px);
	background: var(--green);
	color: #fff;
	font-size: 14.5px;
	font-weight: 700;
	white-space: nowrap;
	text-align: center;
}

/* --------------------------------------------------------------------------
   Sản phẩm bổ trợ
   -------------------------------------------------------------------------- */
.riders__lead { margin-bottom: 18px; font-size: 15.5px; color: var(--gray); }

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

.rider {
	position: relative;
	padding: 18px 18px 18px 20px;
	background: var(--c-soft);
	border: 1px solid var(--edge-2);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color .2s, background-color .2s;
}
/* Vệt màu bên trái thay cho viền đậm — nhẹ hơn mà vẫn phân tách rõ */
.rider::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--green);
}
.rider:hover { background: #fff; border-color: var(--c-brand-200); }

.rider__mark {
	display: grid; place-items: center;
	width: 34px; height: 34px;
	border-radius: 10px;
	background: #fff;
	border: 1px solid var(--edge);
	color: var(--green-dark);
}
.rider__mark .ico { width: 18px; height: 18px; stroke-width: 1.7; }

.rider__name {
	margin-top: 12px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.4;
}

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

/* --------------------------------------------------------------------------
   Thông tin tham khảo
   -------------------------------------------------------------------------- */
.refinfo__h3 {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 22px 0 12px;
	font-size: 16.5px;
	font-weight: 700;
	color: var(--purple);
}
.refinfo__h3 .ico { width: 19px; height: 19px; color: var(--green); }

/*
 * Bảng của module cho vay đặt min-width 900px vì có tới 8 cột. Bảng ở đây chỉ
 * hai cột, giữ nguyên mức đó thì giá trị bị đẩy ra xa nhãn và màn hình nhỏ
 * phải cuộn ngang vô cớ.
 */
.ins-page .cmp__table { min-width: 0; }

/* Cột lãi suất canh phải, thẳng hàng với tiêu đề cột, số cùng bề rộng để dò nhanh */
.ins-page .ratetable th:last-child,
.ins-page .ratetable td:last-child { text-align: right; }

.ratetable__val {
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bonuslist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 10px;
}

/*
 * Mốc thời gian và mức thưởng xếp chồng chứ không đặt cạnh nhau: cả hai đều là
 * câu chữ dài, để cùng hàng thì mỗi bên chỉ còn vài chục pixel và vỡ thành một
 * chữ mỗi dòng.
 */
.bonusrow {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 16px;
	background: var(--c-warm-50);
	border: 1px solid #F6DFB6;
	border-radius: 12px;
}

.bonusrow__at {
	font-size: 12px;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: var(--c-warm-700);
	line-height: 1.4;
}
.bonusrow__val {
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.4;
}

.refinfo__note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-top: 16px;
	padding: 13px 16px;
	background: var(--purple-50);
	border-radius: 12px;
	font-size: 13.5px;
	color: var(--gray);
	line-height: 1.6;
}
.refinfo__note .ico { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--purple); }

/* --------------------------------------------------------------------------
   Hồ sơ cần chuẩn bị
   -------------------------------------------------------------------------- */
.doclist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: tbp-doc;
}

.docitem {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px 14px 15px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 12px;
	font-size: 15px;
	color: var(--gray);
	line-height: 1.5;
	counter-increment: tbp-doc;
	transition: border-color .2s, background-color .2s;
}
.docitem:hover { border-color: var(--c-brand-200); background: var(--purple-50); }

.docitem__icon {
	display: grid; place-items: center;
	width: 36px; height: 36px;
	flex: none;
	border-radius: 10px;
	background: var(--purple-50);
	color: var(--purple);
}
.docitem__icon .ico { width: 18px; height: 18px; stroke-width: 1.7; }
.docitem:hover .docitem__icon { background: var(--purple); color: #fff; }

/* Số thứ tự sinh bằng counter để danh sách vẫn là <ol> đúng ngữ nghĩa */
.docitem::after {
	content: counter(tbp-doc);
	margin-left: auto;
	flex: none;
	font-size: 13px;
	font-weight: 700;
	color: var(--gray-2);
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Sản phẩm khác cùng công ty
   -------------------------------------------------------------------------- */
/*
 * auto-fill chứ không phải auto-fit: công ty chỉ có một sản phẩm khác thì thẻ
 * vẫn giữ khổ như khi có nhiều thẻ, thay vì kéo dài hết chiều ngang.
 */
.sibgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 12px;
}

.sibcard a {
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 100%;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 14px;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.sibcard a:hover {
	border-color: var(--c-brand-200);
	box-shadow: 0 16px 34px -28px rgba(13, 22, 48, .7);
	transform: translateY(-2px);
}

.sibcard__kind {
	align-self: flex-start;
	padding: 4px 11px;
	border-radius: var(--r-pill, 999px);
	background: var(--purple-50);
	font-size: 12px;
	font-weight: 700;
	color: var(--purple);
}

.sibcard__name {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.42;
}

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

/* --------------------------------------------------------------------------
   Lối vào theo nhu cầu
   -------------------------------------------------------------------------- */
.needgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 14px;
}

.needcard {
	display: flex;
	flex-direction: column;
	padding: 22px;
	background: var(--c-soft);
	border: 1px solid var(--edge-2);
	border-radius: 18px;
	transition: background-color .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.needcard:hover {
	background: #fff;
	border-color: var(--c-brand-200);
	transform: translateY(-2px);
	box-shadow: 0 20px 44px -34px rgba(13, 22, 48, .85);
}

.needcard__icon {
	display: grid; place-items: center;
	width: 50px; height: 50px;
	border-radius: 15px;
	background: #fff;
	border: 1px solid var(--edge);
	color: var(--purple);
	transition: transform .2s;
}
.needcard:hover .needcard__icon { transform: rotate(-6deg) scale(1.05); }
.needcard__icon .ico { width: 24px; height: 24px; stroke-width: 1.6; }
.needcard:nth-child(2) .needcard__icon { color: var(--green-dark); }
.needcard:nth-child(3) .needcard__icon { color: var(--c-brand-600); }
.needcard:nth-child(4) .needcard__icon { color: var(--c-warm-700); }

.needcard__title {
	margin-top: 15px;
	font-size: 17px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.4;
}

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

.needcard__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 16px; }
.needcard__links a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 13px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: var(--r-pill, 999px);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ins-accent, var(--purple));
	transition: border-color .2s, box-shadow .2s;
}
.needcard__links a:hover {
	border-color: var(--ins-accent, var(--purple));
	box-shadow: 0 8px 20px -16px rgba(13, 22, 48, .8);
}
.needcard__links .ico { width: 15px; height: 15px; }
.needcard__links a .ico:last-child { transition: transform .2s; }
.needcard__links a:hover .ico:last-child { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Nhân thọ và phi nhân thọ
   -------------------------------------------------------------------------- */
.vsgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 16px;
}

.vscard {
	display: flex;
	flex-direction: column;
	padding: 24px;
	border-radius: 18px;
	border: 1px solid var(--edge);
	background: #fff;
}
.vscard--life { border-color: var(--c-brand-200); background: linear-gradient(180deg, var(--purple-50), #fff 60%); }
.vscard--nonlife { border-color: #BFE6D5; background: linear-gradient(180deg, var(--c-act-50), #fff 60%); }

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

.vscard__icon {
	display: grid; place-items: center;
	width: 48px; height: 48px;
	flex: none;
	border-radius: 14px;
	background: var(--purple);
	color: #fff;
}
.vscard--nonlife .vscard__icon { background: var(--green); }
.vscard__icon .ico { width: 23px; height: 23px; stroke-width: 1.6; }

.vscard__title { font-size: 19px; font-weight: 700; color: var(--purple); line-height: 1.3; }
.vscard--nonlife .vscard__title { color: var(--green-dark); }

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

.vscard__rows { margin-top: 18px; }
.vscard__rows > div {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	gap: 14px;
	padding: 11px 0;
	border-top: 1px solid var(--edge-2);
}
.vscard__rows dt { font-size: 13px; color: var(--gray-2); }
.vscard__rows dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); line-height: 1.5; }

.vscard__lines { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 18px; }
.vscard__lines a {
	display: inline-block;
	padding: 6px 14px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: var(--r-pill, 999px);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--purple);
	transition: border-color .2s, background-color .2s;
}
.vscard--nonlife .vscard__lines a { color: var(--green-dark); }
.vscard__lines a:hover { border-color: currentColor; }

/* --------------------------------------------------------------------------
   Quy trình bốn bước
   -------------------------------------------------------------------------- */
.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.step {
	position: relative;
	padding: 24px 20px 20px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 18px;
	transition: border-color .2s, box-shadow .2s;
}
.step:hover { border-color: var(--c-brand-200); box-shadow: 0 18px 40px -32px rgba(13, 22, 48, .85); }

/* Số bước nhô lên mép trên để đọc theo hàng ngang thấy rõ trình tự */
.step__num {
	position: absolute;
	top: -15px;
	left: 20px;
	display: grid; place-items: center;
	width: 34px; height: 34px;
	border-radius: 50%;
	background: var(--purple);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	box-shadow: 0 8px 20px -12px rgba(13, 22, 48, .9);
}
.step:nth-child(2) .step__num { background: var(--c-brand-600); }
.step:nth-child(3) .step__num { background: var(--green); }
.step:nth-child(4) .step__num { background: var(--c-warm-700); }

.step__icon {
	display: grid; place-items: center;
	width: 42px; height: 42px;
	margin-top: 8px;
	border-radius: 13px;
	background: var(--c-soft);
	color: var(--purple);
}
.step__icon .ico { width: 21px; height: 21px; stroke-width: 1.6; }

.step__title { margin-top: 13px; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.step__text { margin-top: 7px; font-size: 14.5px; color: var(--gray); line-height: 1.6; }

/* --------------------------------------------------------------------------
   Biểu phí theo chương trình
   -------------------------------------------------------------------------- */
.tiertable__fee { font-weight: 700; color: var(--green-dark); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Danh mục bệnh được chi trả
   -------------------------------------------------------------------------- */
.disgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 12px;
}

.discard {
	position: relative;
	padding: 18px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 14px;
	transition: border-color .2s, box-shadow .2s;
}
.discard:hover {
	border-color: var(--c-brand-200);
	box-shadow: 0 16px 34px -28px rgba(13, 22, 48, .7);
}

/* Số bệnh là con số người đọc quét đầu tiên nên cho nổi hẳn lên */
.discard__count {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 32px;
	padding: 0 10px;
	border-radius: var(--r-pill, 999px);
	background: var(--ins-accent, var(--purple));
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.discard__name {
	margin-top: 10px;
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.4;
}

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

/* --------------------------------------------------------------------------
   Đáp ứng màn hình
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.ihero__grid { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); }
	.ihero__brandcol { position: static; }
	.parc__grid { grid-template-columns: 1fr; }
	.prow { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
	.prow__btn { grid-column: 2; justify-self: end; }
	.hubgrid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

@media (max-width: 760px) {
	.ihero__grid { grid-template-columns: 1fr; }
	.ibrand { width: 92px; height: 92px; }
	.benefit { grid-template-columns: 44px minmax(0, 1fr); }
	.benefit__icon { width: 44px; height: 44px; border-radius: 12px; }
	.benefit__value { grid-column: 2; justify-self: start; }
	.prow { grid-template-columns: minmax(0, 1fr); }
	.prow__btn { grid-column: 1; justify-self: stretch; }
	.parc__stats { grid-template-columns: 1fr; }
	.hubgrid { grid-template-columns: 1fr; }
	.hubcard { padding: 18px; }
	.hubcard__icon { width: 48px; height: 48px; border-radius: 14px; }
	.needcard { padding: 18px; }
	.step { padding: 24px 16px 18px; }
	.vscard { padding: 20px; }
	.vscard__rows > div { grid-template-columns: 1fr; gap: 3px; }
	.phub__cta-inner { flex-direction: column; align-items: flex-start; }
	.phub__cta .btn-apply { align-self: stretch; }

	/* Nhãn tiêu chí xuống dòng riêng để chip có đủ bề ngang */
	.facetbar { grid-template-columns: 1fr; gap: 6px; }
	.facetbar__label { line-height: 1.4; }
	.facetbars .cfilter__count { text-align: left; }

	/* Hai cột thì cho chữ xuống dòng để bảng nằm gọn, khỏi phải cuộn ngang */
	.ins-page .cmp__table th,
	.ins-page .cmp__table td { padding: 11px 12px; white-space: normal; }
}