@charset "UTF-8";
/* ==========================================================================
   Gửi tiết kiệm — trang so sánh và trang chi tiết
   Nạp sau lender.css, compare.css và insurance.css nên dùng lại vỏ trang,
   hero thương hiệu, lưới thông số, bảng và bảng màu của các module đó.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bảng so sánh lãi suất
   --------------------------------------------------------------------------
   Bảng rộng theo số kỳ hạn nên luôn cuộn ngang trong khung riêng; cột ngân
   hàng ghim trái để cuộn tới kỳ hạn xa vẫn biết đang đọc dòng nào.
   -------------------------------------------------------------------------- */
.svtable {
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 16px;
	overflow: hidden;
}

.svtable__scroll { overflow-x: auto; }

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

.svtable__table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 13px 10px;
	background: var(--purple-50);
	font-size: 13px;
	font-weight: 700;
	color: var(--purple);
	text-align: center;
	white-space: nowrap;
	border-bottom: 1px solid var(--edge);
}
.svtable__table thead th abbr { text-decoration: none; border: 0; }

/* Cột ngân hàng ghim trái, đè lên các ô đang cuộn qua bên dưới */
.svtable__bank {
	position: sticky;
	left: 0;
	z-index: 3;
	min-width: 220px;
	padding: 10px 14px;
	background: #fff;
	text-align: left;
	border-right: 1px solid var(--edge-2);
}
.svtable__table thead .svtable__bank { z-index: 4; background: var(--purple-50); }

.svtable__table tbody tr { border-top: 1px solid var(--edge-2); transition: background-color .15s; }
.svtable__table tbody tr:hover { background: var(--purple-50); }
.svtable__table tbody tr:hover .svtable__bank { background: var(--purple-50); }
.svtable__table tbody tr[hidden] { display: none; }

.svbank { display: flex; align-items: center; gap: 10px; min-width: 0; }
.svbank__name {
	font-size: 14.5px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.35;
}
.svbank:hover .svbank__name { color: var(--purple); }

/* Khung logo cỡ nhỏ dùng riêng trong bảng */
.ibrand--xs {
	width: 38px;
	height: 38px;
	padding: 5px;
	flex: none;
	border-radius: 10px;
	box-shadow: none;
}
.ibrand--xs .ibrand__initials { font-size: 12px; border-radius: 7px; }

.svcell {
	padding: 12px 10px;
	text-align: center;
	color: var(--gray);
	white-space: nowrap;
}

/*
 * Ô dẫn đầu kỳ hạn: nền xanh ngọc nhạt, chữ act-800 — 8,68:1, thừa ngưỡng AA.
 * Không dùng nền đậm chữ trắng vì cả bảng sẽ loang lổ khó đọc.
 */
.svcell.is-top {
	background: var(--c-act-50);
	font-weight: 700;
	color: var(--c-act-800);
}

.svtable__go { padding: 10px 14px; text-align: right; }

.svgo {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 7px 13px;
	border-radius: var(--r-pill, 999px);
	background: var(--c-soft);
	font-size: 13px;
	font-weight: 700;
	color: var(--green-dark);
	white-space: nowrap;
	transition: background-color .2s;
}
.svgo:hover { background: var(--c-act-50); }
.svgo .ico { width: 14px; height: 14px; }

.svtable__note {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 14px 18px;
	border-top: 1px solid var(--edge-2);
	background: var(--c-soft);
	font-size: 13px;
	color: var(--gray-2);
	line-height: 1.6;
}
.svtable__note .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--purple); }

/* --------------------------------------------------------------------------
   Trang chi tiết
   -------------------------------------------------------------------------- */
.svbest {
	display: flex;
	flex-direction: column;
	gap: 2px;
	width: 100%;
	padding: 12px 16px;
	background: var(--c-act-50);
	border: 1px solid #BFE6D5;
	border-radius: 12px;
}
.svbest__label { font-size: 11.5px; letter-spacing: .3px; text-transform: uppercase; color: var(--green-dark); }
.svbest__value {
	font-size: 26px;
	font-weight: 700;
	color: var(--c-act-800);
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

/* Ma trận lãi suất ở trang chi tiết */
.svmatrix { min-width: 660px; }
.svmatrix thead th { text-align: center; }
.svmatrix thead th:first-child { text-align: left; }
.svmatrix thead th abbr { text-decoration: none; border: 0; }
.svmatrix__cell { text-align: center; font-variant-numeric: tabular-nums; }
.svmatrix__cell.is-top { background: var(--c-act-50); font-weight: 700; color: var(--c-act-800); }

.bonusrow__note { font-size: 13px; color: var(--gray-2); line-height: 1.45; }

/* --------------------------------------------------------------------------
   Máy tính lãi tiền gửi
   -------------------------------------------------------------------------- */
.svcalc__panel {
	margin-top: 18px;
	padding: clamp(18px, 2.4vw, 26px);
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 16px;
}

.svcalc__field + .svcalc__field { margin-top: 22px; }

.svcalc__label {
	display: block;
	margin-bottom: 8px;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--ink);
}

.svcalc__input {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: var(--c-soft);
	border: 1px solid transparent;
	border-radius: 10px;
	transition: border-color .2s, background-color .2s;
}
.svcalc__input:focus-within { background: #fff; border-color: var(--c-brand-500); }
.svcalc__input input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 20px;
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.svcalc__input input:focus { outline: none; }
.svcalc__input span { font-size: 16px; font-weight: 700; color: var(--gray-2); }

.svcalc__range { width: 100%; margin-top: 12px; accent-color: var(--green); }

.svcalc__scale {
	display: flex;
	justify-content: space-between;
	margin-top: 4px;
	font-size: 12.5px;
	color: var(--gray-2);
}

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

.svcalc__term {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	padding: 9px 15px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 10px;
	font: inherit;
	cursor: pointer;
	transition: border-color .2s, background-color .2s;
}
.svcalc__term span { font-size: 13px; color: var(--gray-2); }
.svcalc__term b { font-size: 15px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.svcalc__term:hover { border-color: var(--c-brand-200); }

.svcalc__term[aria-pressed="true"] { background: var(--green); border-color: var(--green); }
.svcalc__term[aria-pressed="true"] span { color: rgba(255, 255, 255, .85); }
.svcalc__term[aria-pressed="true"] b { color: #fff; }

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

.svcalc__note { margin-top: 14px; font-size: 12.5px; color: var(--gray-2); text-align: center; line-height: 1.6; }

/* --------------------------------------------------------------------------
   Đáp ứng màn hình
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
	/* Cột ngân hàng hẹp lại để còn chỗ cho ít nhất hai cột kỳ hạn */
	.svtable__bank { min-width: 150px; padding: 10px; }
	.svbank__name { font-size: 13.5px; }
	.ibrand--xs { width: 32px; height: 32px; }
	.svtable__go { display: none; }
	.svcalc__out { grid-template-columns: 1fr; }
	.svcalc__out div { display: flex; justify-content: space-between; text-align: left; }
	.svcalc__out dd { margin: 0; }
	.svcalc__term { flex: 1 1 calc(50% - 4px); }
}

/* --------------------------------------------------------------------------
   Các ngân hàng khác — dải cuối trang chi tiết
   --------------------------------------------------------------------------
   Nền xám nhạt tách hẳn khỏi phần thân trắng phía trên, để mắt hiểu đây là chỗ
   đi tiếp chứ không phải nội dung của ngân hàng đang xem.
   -------------------------------------------------------------------------- */
.svmore {
	margin-top: 8px;
	padding: clamp(34px, 4.5vw, 56px) 0 clamp(40px, 5vw, 64px);
	background: var(--c-soft);
	border-top: 1px solid var(--edge-2);
}

.svmore__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 14px 24px;
	margin-bottom: clamp(18px, 2.4vw, 26px);
}

.svmore__title {
	margin: 0;
	font-size: clamp(21px, 2.4vw, 27px);
	font-weight: 800;
	color: var(--ink);
	line-height: 1.25;
	letter-spacing: -.2px;
}

.svmore__lead {
	max-width: 62ch;
	margin: 7px 0 0;
	font-size: 15px;
	color: var(--gray);
	line-height: 1.6;
}

.svmore__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	padding: 10px 17px;
	border-radius: var(--r-pill, 999px);
	background: #fff;
	border: 1px solid var(--edge);
	font-size: 14px;
	font-weight: 700;
	color: var(--purple);
	transition: border-color .2s, box-shadow .2s;
}
.svmore__all:hover { border-color: var(--c-brand-200); box-shadow: 0 8px 20px -14px rgba(13, 22, 48, .5); }
.svmore__all .ico { width: 15px; height: 15px; }

.svmore__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 14px;
}

/* --------------------------------------------------------------------------
   Thẻ một ngân hàng
   -------------------------------------------------------------------------- */
.svcard {
	display: flex;
	flex-direction: column;
	padding: 16px 18px 14px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 14px;
	transition: border-color .2s, box-shadow .2s, transform .2s;
}
.svcard:hover {
	border-color: var(--c-brand-200);
	box-shadow: 0 14px 30px -20px rgba(13, 22, 48, .55);
	transform: translateY(-2px);
}

.svcard__top { display: flex; align-items: center; gap: 11px; min-width: 0; }
.svcard__id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.svcard__name {
	font-size: 15.5px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.3;
	overflow-wrap: anywhere;
}
.svcard:hover .svcard__name { color: var(--purple); }
.svcard__group { font-size: 12.5px; color: var(--gray-2); }

/* Hàng lãi suất cao nhất: con số lớn bên trái, chênh lệch dán ngay cạnh */
.svcard__best {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 9px;
	margin-top: 14px;
	padding-top: 13px;
	border-top: 1px solid var(--edge-2);
}
.svcard__best-label {
	width: 100%;
	font-size: 11.5px;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: var(--gray-2);
}
.svcard__best-value {
	font-size: 25px;
	font-weight: 800;
	color: var(--c-act-800);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

/*
 * Chênh lệch so với ngân hàng đang xem. Xanh khi cao hơn, xám khi thấp hơn —
 * không dùng đỏ, vì lãi suất thấp hơn không phải là lỗi hay cảnh báo.
 */
.svcard__diff {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border-radius: var(--r-pill, 999px);
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.svcard__diff .ico { width: 13px; height: 13px; }
.svcard__diff--up { background: var(--c-act-50); color: var(--c-act-800); }
.svcard__diff--down,
.svcard__diff--same { background: var(--c-soft); color: var(--gray-2); }

.svcard__rates {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 13px;
}
.svcard__rate {
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: 8px 11px;
	background: var(--c-soft);
	border-radius: 9px;
}
.svcard__rate span { font-size: 12px; color: var(--gray-2); }
.svcard__rate b {
	font-size: 15px;
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.svcard__go {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 13px;
	padding-top: 12px;
	border-top: 1px solid var(--edge-2);
	font-size: 13.5px;
	font-weight: 700;
	color: var(--purple);
}
.svcard__go .ico { width: 14px; height: 14px; transition: transform .2s; }
.svcard:hover .svcard__go .ico { transform: translateX(3px); }

@media (max-width: 560px) {
	.svmore__all { width: 100%; justify-content: center; }
}