@charset "UTF-8";
/* ==========================================================================
   Khối "Sản phẩm của {ngân hàng}" — trang ngân hàng giao dịch
   ==========================================================================

   Một ngân hàng có thể mang sáu loại sản phẩm khác hẳn nhau, từ thẻ tín dụng
   tới hợp đồng bảo hiểm. Nếu bày thành sáu khối nối đuôi thì trang dài gấp
   mấy lần mà người đọc vẫn phải cuộn tìm. Ở đây tất cả nằm chung một lưới,
   lọc bằng dải tab phía trên — cuộn ít, so sánh dễ.

   Mỗi thẻ mang một màu nhận dạng theo loại (--accent), chỉ dùng cho vạch trên
   đầu thẻ và nhãn loại. Chữ vẫn để màu trung tính của tokens.css nên độ tương
   phản không phụ thuộc màu sản phẩm.
   -------------------------------------------------------------------------- */

.tprods {
	padding: 56px 0 8px;
}

/* --- Dải tab lọc ------------------------------------------------------- */

.tprods__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 24px;
}

.tprods__tab {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 9px 16px;
	color: var(--c-text);
	font-weight: 600;
	font-size: 14px;
	font-family: inherit;
	line-height: 1.2;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: 999px;
	cursor: pointer;
	transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.tprods__tab:hover {
	color: var(--c-brand-600);
	border-color: var(--c-brand-200);
}

.tprods__tab.is-on {
	color: var(--c-white);
	background: var(--c-brand-600);
	border-color: var(--c-brand-600);
}

.tprods__n {
	padding: 1px 8px;
	color: var(--c-muted);
	font-weight: 700;
	font-size: 12px;
	background: var(--c-soft);
	border-radius: 999px;
}

.tprods__tab.is-on .tprods__n {
	color: var(--c-white);
	background: rgba(255, 255, 255, .22);
}

/* --- Lưới thẻ ---------------------------------------------------------- */

.tprods__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tprods__none {
	margin: 8px 0 0;
	color: var(--c-muted);
}

/* --- Một thẻ ----------------------------------------------------------- */

.tprod {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 20px 20px 18px;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	border-radius: 14px;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/*
 * Bộ lọc ẩn thẻ bằng thuộc tính hidden. Khai báo display ở trên có độ ưu tiên
 * cao hơn quy tắc [hidden] mặc định của trình duyệt, nên nếu thiếu dòng này
 * thẻ vẫn hiện nguyên và bộ lọc trông như hỏng.
 */
.tprod[hidden] {
	display: none;
}

/* Vạch màu mảnh chạy dọc mép trên, đủ để phân loại mà không ồn. */
.tprod::before {
	position: absolute;
	top: -1px;
	right: 18px;
	left: 18px;
	height: 3px;
	background: var(--accent, var(--c-brand-600));
	border-radius: 0 0 3px 3px;
	content: "";
}

.tprod:hover {
	border-color: var(--c-brand-200);
	box-shadow: 0 10px 26px rgba(21, 26, 36, .09);
	transform: translateY(-2px);
}

.tprod__tag {
	align-self: flex-start;
	margin-bottom: 10px;
	padding: 3px 10px;
	color: var(--accent, var(--c-brand-600));
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	background: color-mix(in srgb, var(--accent, #2547B0) 9%, #fff);
	border-radius: 999px;
}

.tprod__name {
	margin: 0 0 8px;
	font-weight: 700;
	font-size: 17px;
	line-height: 1.35;
}

.tprod__name a {
	color: var(--c-ink);
	text-decoration: none;
}

/* Cả thẻ bấm được, nhưng vùng bấm vẫn là một liên kết thật cho trình đọc màn hình. */
.tprod__name a::after {
	position: absolute;
	inset: 0;
	border-radius: 14px;
	content: "";
}

.tprod:hover .tprod__name a {
	color: var(--c-brand-600);
}

.tprod__sum {
	margin: 0 0 16px;
	color: var(--c-muted);
	font-size: 14px;
	line-height: 1.6;
}

/* --- Bảng thông số ----------------------------------------------------- */

.tprod__specs {
	margin: 0 0 16px;
	padding: 14px 0 0;
	border-top: 1px solid var(--c-line-soft);
}

.tprod__spec {
	display: flex;
	gap: 12px;
	align-items: baseline;
	justify-content: space-between;
	padding: 5px 0;
}

.tprod__spec dt {
	flex: 0 0 auto;
	color: var(--c-muted);
	font-size: 13px;
}

.tprod__spec dd {
	margin: 0;
	color: var(--c-ink);
	font-weight: 600;
	font-size: 13px;
	text-align: right;
}

/* --- Nút giả ----------------------------------------------------------- */

.tprod__cta {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	margin-top: auto;
	color: var(--c-act-700);
	font-weight: 700;
	font-size: 14px;
}

.tprod__cta svg {
	width: 16px;
	height: 16px;
	transition: transform .18s ease;
}

.tprod:hover .tprod__cta svg {
	transform: translateX(3px);
}

/* --- Màn hình hẹp ------------------------------------------------------ */

@media (max-width: 640px) {
	.tprods {
		padding-top: 40px;
	}

	.tprods__grid {
		grid-template-columns: 1fr;
	}

	.tprods__tabs {
		flex-wrap: nowrap;
		margin-right: -16px;
		margin-left: -16px;
		padding: 0 16px 4px;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.tprods__tabs::-webkit-scrollbar {
		display: none;
	}

	.tprods__tab {
		flex: 0 0 auto;
	}
}