@charset "UTF-8";
/* ==========================================================================
   Liên kết tự động quanh hồ sơ ngân hàng — phần bổ sung của ndh_auto
   ==========================================================================

   Khối "Sản phẩm khác của <ngân hàng>" (trang ngân hàng của thẻ / tài khoản /
   giao dịch / vay, trang tiết kiệm, trang sản phẩm thẻ) và "Sản phẩm ngân hàng
   của <ngân hàng>" (trang cổ phiếu ngân hàng), "Cổ phiếu niêm yết của <chủ đầu
   tư>". Dựng ở src/lib/ndh/banking/bank-links.ts (bankEcoHtml); chỉ nạp khi
   khối có in, không bao giờ ở chế độ NDH_PARITY=1. Màu lấy từ tokens.css.
   -------------------------------------------------------------------------- */

.bankx {
	padding-block: clamp(26px, 3.6vw, 44px);
	background: var(--c-white, #fff);
	border-top: 1px solid var(--c-line-soft, #EDEDED);
}
.bankx + .bankx { border-top: 0; padding-top: 0; }

.bankx__head { display: grid; gap: 4px; margin-bottom: 16px; }
.bankx__title {
	display: flex; align-items: center; gap: 10px;
	margin: 0;
	font-size: clamp(19px, 2.1vw, 23px); font-weight: 700; line-height: 1.3; color: var(--c-ink, #1A1A1A);
}
.bankx__title .ico, .bankx__title-ico { width: 22px; height: 22px; flex: none; color: var(--c-brand-500, #9B6107); }
.bankx__lead { margin: 0; font-size: 14px; line-height: 1.55; color: var(--c-muted, #606060); }

.bankx__grid {
	display: grid; gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 232px), 1fr));
	margin: 0; padding: 0; list-style: none;
}
.bankx__grid > li { margin: 0; min-width: 0; }

.bankx__item {
	display: flex; align-items: center; gap: 12px;
	height: 100%;
	padding: 12px 12px 12px 14px;
	background: var(--c-white, #fff);
	border: 1px solid var(--c-line, #DEDEDE);
	border-radius: 14px;
	color: inherit; text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.bankx__item:hover, .bankx__item:focus-visible {
	border-color: var(--c-brand-300, #D9A447);
	box-shadow: 0 6px 18px rgba(26, 26, 26, .07);
	color: inherit;
}
.bankx__item:focus-visible { outline: 2px solid var(--c-brand-500, #9B6107); outline-offset: 2px; }

.bankx__icon {
	display: grid; place-items: center; flex: none;
	width: 40px; height: 40px;
	background: var(--c-brand-50, #FDF7ED);
	border-radius: 11px;
	color: var(--c-brand-500, #9B6107);
}
.bankx__icon .ico { width: 21px; height: 21px; }

.bankx__body { display: grid; gap: 1px; flex: 1 1 auto; min-width: 0; }
.bankx__label {
	display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
	font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--c-muted, #606060);
}
.bankx__fact {
	font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--c-ink, #1A1A1A);
	font-variant-numeric: tabular-nums;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bankx__sub {
	font-size: 12.5px; line-height: 1.4; color: var(--c-muted, #606060);
	overflow-wrap: anywhere;
	font-variant-numeric: tabular-nums;
}
.bankx__go { width: 16px; height: 16px; flex: none; color: var(--c-muted, #606060); }

.bankx__badge {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 11px; font-style: normal; font-weight: 600; line-height: 1.5;
}
.bankx__badge--auto { background: var(--c-up-50, #E8F4EC); color: var(--c-up, #0B7A3E); }
.bankx__badge--manual { background: var(--c-soft, #F5F5F3); color: var(--c-muted, #606060); border: 1px solid var(--c-line, #DEDEDE); }

.bankx__item.is-up .bankx__sub { color: var(--c-up, #0B7A3E); }
.bankx__item.is-down .bankx__sub { color: var(--c-down, #C62828); }

.bankx__item.is-muted { background: var(--c-soft, #F7F7F5); }
.bankx__item.is-muted .bankx__fact { font-size: 15px; font-weight: 600; color: var(--c-muted, #606060); }
.bankx__item.is-muted .bankx__icon { background: var(--c-white, #fff); color: var(--c-muted, #606060); }

@media (max-width: 560px) {
	.bankx__grid { grid-template-columns: 1fr; gap: 8px; }
	.bankx__item { padding: 10px 10px 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { .bankx__item { transition: none; } }