@charset "UTF-8";
/* ==========================================================================
   Thẻ tín dụng — trang chi tiết và trang lưu trữ
   Nạp sau lender.css nên dùng lại bảng màu, khối FAQ, bảng và nút của module đó.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mặt thẻ dựng bằng CSS (dùng khi chưa có ảnh thật)
   -------------------------------------------------------------------------- */
.cardart,
.ccard__art {
	position: relative;
	aspect-ratio: 1.586;               /* tỷ lệ thẻ ngân hàng chuẩn */
	border-radius: 14px;
	overflow: hidden;
	background:
		linear-gradient(140deg, color-mix(in oklab, var(--card-accent, #2547B0) 78%, #fff) 0%,
		                        var(--card-accent, #2547B0) 55%,
		                        color-mix(in oklab, var(--card-accent, #2547B0) 62%, #000) 100%);
	box-shadow: 0 16px 38px -18px rgba(13, 22, 48, .55);
	color: #fff;
}

.cardart img,
.ccard__art img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   Khung ảnh thật — nhận cả ảnh dựng đứng lẫn nằm ngang
   --------------------------------------------------------------------------
   Ảnh thẻ do biên tập viên tải lên có thể theo hai hướng. Ép tỷ lệ 1.586 kèm
   object-fit:cover sẽ cắt mất phần lớn ảnh dọc, nên khi có ảnh thật thì khung
   bỏ tỷ lệ cố định và ôm theo chính ảnh, dùng object-fit:contain.
   -------------------------------------------------------------------------- */
.cardart--img {
	aspect-ratio: auto;
	display: grid;
	place-items: center;
	padding: 16px;
	background: var(--c-soft);
	border: 1px solid var(--edge);
	box-shadow: 0 12px 30px -20px rgba(13, 22, 48, .45);
}

.cardart--img img {
	width: auto;
	height: auto;
	max-width: 100%;
	object-fit: contain;
	border-radius: 10px;
	/* Chặn ảnh dọc quá khổ đẩy cột hero cao vống lên */
	max-height: 460px;
}
.cardart--portrait img { max-height: 480px; }
.cardart--landscape img { max-height: 260px; }

/* Vệt sáng và lớp phủ chỉ dành cho mặt thẻ tự dựng */
.cardart--img::after,
.ccard__art--img::after { display: none; }

/*
 * Trong lưới thì giữ nguyên tỷ lệ khung như thẻ chưa có ảnh, nếu không các
 * thẻ sẽ so le nhau. Ảnh nằm gọn bên trong theo object-fit:contain — ảnh dọc
 * hiển thị nhỏ hơn nhưng vẫn thấy trọn vẹn, đổi lại cả lưới thẳng hàng.
 */
.ccard__art--img {
	background: var(--c-soft);
	border: 1px solid var(--edge);
	box-shadow: none;
}
/*
 * Ảnh định vị tuyệt đối, kích thước ghi tường minh.
 *
 * Hai cách làm tưởng đúng nhưng đều hỏng ở đây:
 *   · grid item + height:100% — khung lấy chiều cao từ aspect-ratio còn hàng
 *     lưới tự co theo nội dung, nên phần trăm phân giải theo hàng chứ không
 *     theo khung, ảnh dọc tràn ra và bị overflow cắt.
 *   · inset bốn phía + width:auto — <img> là phần tử thay thế, theo chuẩn CSS
 *     thì width:auto lấy kích thước nội tại của ảnh, right/bottom bị bỏ qua.
 *
 * Ghi rõ width/height theo calc() thì phần trăm phân giải đúng theo khung
 * (chiều cao đã xác định nhờ aspect-ratio), object-fit:contain lo phần còn lại.
 */
.ccard__art--img img {
	position: absolute;
	top: 12px;
	left: 12px;
	width: calc(100% - 24px);
	height: calc(100% - 24px);
	object-fit: contain;
	border-radius: 8px;
}

/*
 * Lớp phủ tối ở mép trên và dưới của mặt thẻ tự dựng.
 *
 * Màu nền thẻ do biên tập viên chọn nên không thể giả định là đủ tối cho
 * chữ trắng. Lớp phủ này bảo đảm tên ngân hàng và tổ chức thẻ luôn đọc được
 * dù chọn màu gì. Chỉ áp dụng khi chưa có ảnh thật (không có <img>).
 */
.cardart:not(:has(img))::before,
.ccard__art:not(:has(img))::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,0) 42%, rgba(0,0,0,0) 62%, rgba(0,0,0,.30) 100%);
	pointer-events: none;
}

.cardart__chip, .cardart__bank, .cardart__net { z-index: 2; }

/* Vệt sáng chéo cho mặt thẻ tự dựng */
.cardart::after,
.ccard__art::after {
	content: "";
	position: absolute;
	top: -40%; right: -30%;
	width: 80%; aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,.22), rgba(255,255,255,0) 68%);
	pointer-events: none;
}

.cardart__chip {
	position: absolute;
	left: 8%; top: 30%;
	width: 13%; aspect-ratio: 4 / 3;
	border-radius: 4px;
	background: linear-gradient(150deg, #F4D58A, #C9A227);
	box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}

.cardart__bank {
	position: absolute;
	left: 8%; top: 10%;
	font-size: clamp(11px, 1.5vw, 15px);
	font-weight: 700;
	letter-spacing: .4px;
}

.cardart__net {
	position: absolute;
	right: 8%; bottom: 9%;
	font-size: clamp(12px, 1.7vw, 17px);
	font-weight: 700;
	font-style: italic;
	opacity: .95;
}

/* --------------------------------------------------------------------------
   Hero trang chi tiết
   -------------------------------------------------------------------------- */
.chero {
	padding-block: 22px clamp(28px, 4vw, 44px);
	background:
		radial-gradient(1000px 420px at 82% 6%, #E3EAFD 0%, rgba(227,234,253,0) 62%),
		linear-gradient(180deg, #F7F9FF 0%, #FFFFFF 82%);
}

.chero__grid {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	gap: clamp(24px, 3.4vw, 46px);
	align-items: start;
}

.chero__visual { position: sticky; top: 96px; }

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

/* .chips và .chip nằm ở compare.css — vay vốn cũng dùng. */

/* .verified nằm ở compare.css vì trang bảo hiểm dùng chung. */

.cattags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.cattags a {
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid var(--edge);
	border-radius: var(--r-pill, 999px);
	font-size: 13px;
	color: var(--gray);
	transition: border-color .2s, color .2s, background-color .2s;
}
.cattags a:hover { border-color: var(--c-brand-200); color: var(--purple); background: var(--purple-50); }

/* Lưới ô thông số phí */
.specgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 10px;
	margin: 20px 0 0;
}

.specbox {
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 10px;
	transition: border-color .2s;
}
.specbox:hover { border-color: var(--c-brand-200); }
.specbox dt { font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase; color: var(--gray-2); }
.specbox dd {
	margin: 4px 0 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	line-height: 1.35;
	font-variant-numeric: tabular-nums;
}

.chero__summary { margin-top: 18px; font-size: 15.5px; color: var(--gray); line-height: 1.65; }

.chero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

/* .btn-ghost nằm ở compare.css vì trang bảo hiểm dùng chung. */

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

/* --------------------------------------------------------------------------
   Bộ mô phỏng hoàn tiền
   -------------------------------------------------------------------------- */
.sim__lead { margin-bottom: 18px; font-size: 15.5px; color: var(--gray); }

.sim__panel {
	padding: clamp(18px, 2.2vw, 26px);
	background: linear-gradient(125deg, var(--purple-50), var(--c-act-50));
	border-radius: 14px;
}

.sim__rows {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}

.simrow {
	padding: 14px 16px;
	background: #fff;
	border-radius: 11px;
	box-shadow: 0 4px 14px -10px rgba(13, 22, 48, .4);
}

.simrow__head { display: flex; align-items: center; gap: 10px; }

/* Icon cùng bộ với bảng hoàn tiền bên dưới, để hai khối đọc như một mạch */
.simrow__icon {
	display: grid; place-items: center;
	width: 32px; height: 32px;
	flex: none;
	border-radius: 9px;
	background: var(--purple-50);
	color: var(--purple);
	transition: background-color .2s, color .2s;
}
.simrow__icon .ico { width: 17px; height: 17px; stroke-width: 1.7; }
.simrow.is-active .simrow__icon { background: var(--purple); color: #fff; }

.simrow__label { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 700; color: var(--ink); }

.simrow__rate {
	flex: none;
	padding: 3px 10px;
	border-radius: var(--r-pill, 999px);
	background: var(--c-act-50);
	font-size: 13px;
	font-weight: 700;
	color: var(--green-dark);
	font-variant-numeric: tabular-nums;
}

.simrow__range { width: 100%; margin-top: 10px; accent-color: var(--purple); }

.simrow__foot {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	margin-top: 4px;
	font-size: 12.5px;
	color: var(--gray-2);
	font-variant-numeric: tabular-nums;
}
.simrow__back { font-weight: 700; color: var(--green-dark); }
/* Nhóm đã chạm trần — chi thêm không tăng hoàn nữa */
.simrow__back.is-capped { color: var(--c-warm-700); }
.simrow__back.is-capped::after { content: " (chạm trần)"; font-weight: 400; }

.sim__out {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid rgba(13, 22, 48, .10);
}
.sim__out div { text-align: center; }
.sim__out dt { font-size: 12.5px; color: var(--gray-2); }
.sim__out dd {
	margin: 4px 0 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}
.sim__out--hi dd { font-size: 24px; color: var(--green-dark); }

.sim__note { margin-top: 12px; font-size: 12.5px; color: var(--gray-2); text-align: center; }

/* --------------------------------------------------------------------------
   Bảng mức hoàn theo danh mục
   -------------------------------------------------------------------------- */
.cbrows {
	border: 1px solid var(--edge);
	border-radius: 12px;
	overflow: hidden;
}

.cbrow {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: #fff;
	transition: background-color .2s;
}
.cbrow + .cbrow { border-top: 1px solid var(--edge-2); }
.cbrow:hover { background: var(--purple-50); }

.cbrow__icon {
	display: grid; place-items: center;
	width: 42px; height: 42px;
	border-radius: 12px;
	background: var(--purple-50);
	color: var(--purple);
}
.cbrow__icon .ico { width: 21px; height: 21px; stroke-width: 1.6; }

.cbrow__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cbrow__label { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.cbrow__note { font-size: 13px; color: var(--gray-2); line-height: 1.45; }

/* Tỷ lệ hoàn dạng viên để nổi bật trong hàng dữ liệu dày đặc */
.cbrow__rate { white-space: nowrap; }
.cbrow__rate b {
	display: inline-block;
	min-width: 62px;
	padding: 6px 12px;
	border-radius: var(--r-pill, 999px);
	background: var(--c-act-50);
	border: 1px solid #BFE6D5;
	font-size: 17px;
	font-weight: 700;
	color: var(--green-dark);
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.cbrow__cap {
	font-size: 12.5px;
	color: var(--gray-2);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.cbtable__foot {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-top: 12px;
	font-size: 13px;
	color: var(--gray-2);
	line-height: 1.6;
}
.cbtable__foot .ico { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--purple); }

/* .perkgrid, .perkcard, .reqlist và .spectable nằm ở compare.css — thẻ, gửi
   tiết kiệm và vay vốn đều dùng. */

/* --------------------------------------------------------------------------
   Trang lưu trữ
   -------------------------------------------------------------------------- */
.carc__hero {
	padding-block: 18px clamp(26px, 3.6vw, 44px);
	background:
		radial-gradient(900px 400px at 86% 10%, #E3EAFD 0%, rgba(227,234,253,0) 62%),
		linear-gradient(180deg, #F7F9FF 0%, #FFFFFF 88%);
}

.carc__title {
	margin-top: 12px;
	font-size: clamp(25px, 3vw, 36px);
	font-weight: 700;
	color: var(--purple);
	line-height: 1.26;
	letter-spacing: -.3px;
	max-width: 26ch;
}
.carc__hl { position: relative; white-space: nowrap; }
.carc__hl::after {
	content: "";
	position: absolute;
	left: -.04em; right: -.04em; bottom: -.18em;
	height: .3em;
	background-color: var(--green);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M1.5 10.2 Q100 2.6 198.5 5.6 Q100 9.7 1.5 10.2 Z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M1.5 10.2 Q100 2.6 198.5 5.6 Q100 9.7 1.5 10.2 Z'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	opacity: .92;
	animation: tbp-underline .9s cubic-bezier(.22, .68, .3, 1) .25s both;
}
@media (prefers-reduced-motion: reduce) {
	.carc__hl::after { animation: none; }
}

/* 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,
   thay vì tiêu đề trải hết chiều rộng rồi để trống nửa phải. */
.carc__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
	gap: clamp(24px, 3.4vw, 48px);
	align-items: center;
	margin-top: 14px;
}

.carc__copy { min-width: 0; }

.carc__title {
	margin-top: 0;
	max-width: 20ch;
}

.carc__lead { margin-top: 14px; font-size: 15.5px; color: var(--gray); line-height: 1.7; }

/* Số liệu tóm tắt — lấp phần trống bên phải hero bằng thông tin có ích */
.carc__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);
}

/* .cstat2, .cfilter, .chipbar, .chipf nằm ở compare.css — dùng chung với trang bảo hiểm. */

/* Lưới thẻ */
.cardgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: clamp(14px, 1.8vw, 22px);
}

.ccard {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 14px;
	overflow: hidden;
	transition: border-color .22s, box-shadow .22s, transform .22s;
}
.ccard:hover {
	border-color: var(--c-brand-200);
	box-shadow: 0 16px 34px -22px rgba(13, 22, 48, .55);
	transform: translateY(-3px);
}
.ccard[hidden] { display: none; }

/* Mặt thẻ trong danh sách thấp hơn trang chi tiết để nhường chỗ cho dữ liệu */
.ccard__art { position: relative; margin: 16px 16px 0; border-radius: 11px; }

/* Nhãn hoàn tiền — con số quan trọng nhất khi so sánh, đặt ngay trên mặt thẻ */
.ccard__badge {
	position: absolute;
	right: 10px; bottom: 10px;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	padding: 7px 12px;
	background: rgba(255, 255, 255, .95);
	border-radius: 10px;
	box-shadow: 0 4px 12px -6px rgba(13, 22, 48, .6);
	line-height: 1.1;
}
.ccard__art--img .ccard__badge { border: 1px solid var(--edge); }

/*
 * Nhãn góc trên mặt thẻ. Đặt bên trái để không chồng lên .ccard__badge (hoàn
 * tiền) vốn nằm góc phải dưới.
 */
.ccard__stopped {
	position: absolute;
	left: 10px; bottom: 10px;
	z-index: 3;
	padding: 5px 11px;
	border-radius: var(--r-pill, 999px);
	background: rgba(255, 255, 255, .94);
	color: #4A5261;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .01em;
}
.ccard__badge b {
	font-size: 19px;
	font-weight: 700;
	color: var(--green-dark);
	font-variant-numeric: tabular-nums;
}
.ccard__badge i {
	font-size: 10.5px;
	font-style: normal;
	color: var(--gray-2);
	letter-spacing: .2px;
}

.ccard__body { display: flex; flex-direction: column; gap: 8px; padding: 16px; flex: 1; }

.ccard__bank { font-size: 12.5px; color: var(--gray-2); }
.ccard__name { font-size: 17px; font-weight: 700; color: var(--ink); line-height: 1.35; }

.ccard__facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 4px 0 0;
	padding: 12px 0;
	border-block: 1px solid var(--edge-2);
}
.ccard__facts dt { font-size: 11.5px; color: var(--gray-2); }
.ccard__facts dd {
	margin: 3px 0 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.ccard__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ccard__tags li {
	padding: 3px 9px;
	background: var(--purple-50);
	border-radius: var(--r-pill, 999px);
	font-size: 11.5px;
	color: var(--purple);
}

.ccard__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-top: auto;
	padding: 12px 18px;
	background: var(--green);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	border-radius: 8px;
	transition: background-color .2s;
}
.ccard__btn:hover { background: var(--green-dark); }
.ccard__btn .ico { width: 16px; height: 16px; }

/* .cardgrid__empty nằm ở compare.css. */

/* --------------------------------------------------------------------------
   Đáp ứng màn hình
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
	.chero__grid { grid-template-columns: minmax(0, 240px) minmax(0, 1fr); }
	.chero__visual { position: static; }
	.carc__grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
	.chero__grid { grid-template-columns: 1fr; }
	.chero__visual { max-width: 300px; }
	.cbrow { grid-template-columns: 42px minmax(0, 1fr); }
	.cbrow__rate { grid-column: 2; font-size: 18px; }
	.cbrow__cap { grid-column: 2; }
	.reqlist__row { grid-template-columns: 1fr; gap: 4px; }
	.carc__stats { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Mặt thẻ tự dựng — biến theo hạng thẻ
   --------------------------------------------------------------------------
   Không dùng ảnh sản phẩm của ngân hàng (tác phẩm có bản quyền, mang nhãn hiệu
   của ngân hàng và tổ chức thẻ). Thay vào đó mặt thẻ vẽ bằng CSS và đổi bề mặt
   theo hạng, để 16 thẻ của cùng một ngân hàng không ra 16 hình giống hệt nhau.

   Hạng cao phủ tối và thêm ánh kim; hạng thấp giữ nguyên màu thương hiệu.
   -------------------------------------------------------------------------- */

/* Chip có vân tiếp điểm thay vì ô vàng trơn */
.cardart__chip {
	background:
		linear-gradient(150deg, #F6DFA4, #C9A227 62%, #9C7B18);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.cardart__chip::before,
.cardart__chip::after {
	content: "";
	position: absolute;
	inset: 22% 14%;
	border: 1px solid rgba(0, 0, 0, .22);
	border-left: 0;
	border-right: 0;
	pointer-events: none;
}
.cardart__chip::after { inset: 38% 26%; border: 1px solid rgba(0, 0, 0, .16); }

/* Biểu tượng thanh toán không tiếp xúc */
.cardart__wave {
	position: absolute;
	left: 25%; top: 31%;
	width: 7%; aspect-ratio: 1;
	z-index: 2;
	background: radial-gradient(circle at 0 50%, transparent 34%, currentColor 36%, currentColor 44%, transparent 46%,
	                            transparent 58%, currentColor 60%, currentColor 68%, transparent 70%);
	opacity: .75;
	pointer-events: none;
}

/* Hạng thẻ, in nhỏ dưới tên ngân hàng */
.cardart__tier {
	position: absolute;
	left: 8%; top: 19%;
	z-index: 2;
	font-size: clamp(8px, 1vw, 10.5px);
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	opacity: .78;
}
.cardart__tier:empty { display: none; }

/*
 * Hạng cao: nền tối hẳn, chỉ giữ một chút màu thương hiệu ở góc. Thẻ bạch kim
 * ngoài đời hầu như không bao giờ dùng màu tươi.
 */
.cardart--platinum,
.cardart--signature,
.cardart--infinite {
	background:
		radial-gradient(120% 90% at 12% 8%, color-mix(in oklab, var(--card-accent, #2547B0) 48%, #0B1220) 0%, transparent 62%),
		linear-gradient(145deg, #253044 0%, #131A28 46%, #0A0F1A 100%);
}

/* Vệt kim loại quét chéo, chỉ ở hạng cao */
.cardart--platinum:not(:has(img))::before,
.cardart--signature:not(:has(img))::before,
.cardart--infinite:not(:has(img))::before {
	background:
		linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .14) 46%, rgba(255, 255, 255, .03) 54%, transparent 68%),
		linear-gradient(180deg, rgba(0, 0, 0, .26) 0%, rgba(0, 0, 0, 0) 44%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, .30) 100%);
}

.cardart--infinite { --card-accent: #2B2B33; }

/* Hạng vàng và titanium: giữ màu thương hiệu, thêm sắc kim nhẹ */
.cardart--gold:not(:has(img))::before,
.cardart--titanium:not(:has(img))::before {
	background:
		linear-gradient(115deg, transparent 34%, rgba(255, 236, 190, .16) 50%, transparent 66%),
		linear-gradient(180deg, rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, 0) 42%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .28) 100%);
}

/* --------------------------------------------------------------------------
   Trạng thái rỗng của trang nhóm ngân hàng
   Dùng cho hai tình huống: đơn vị không phát hành thẻ tín dụng, và ngân hàng
   chưa nhập dữ liệu. Cùng một khối, khác nội dung — xem archive-tb_card.php.
   -------------------------------------------------------------------------- */
.cempty {
	max-width: 640px;
	margin-inline: auto;
	padding: 44px 28px 40px;
	text-align: center;
	background: var(--c-soft);
	border: 1px solid var(--edge, #E3E7EE);
	border-radius: var(--r-lg, 16px);
}
.cempty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px -4px rgba(13, 22, 48, .18);
}
.cempty__icon .ico { width: 22px; height: 22px; color: var(--c-brand-600); }

.cempty__title {
	margin: 0 0 10px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.32;
	color: var(--c-ink);
}
.cempty__text {
	margin: 0;
	font-size: 15px;
	line-height: 1.62;
	color: var(--c-muted);
}
.cempty__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 22px;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--c-brand-600);
	text-decoration: none;
}
.cempty__cta:hover { text-decoration: underline; }
.cempty__cta .ico { width: 15px; height: 15px; }

@media (max-width: 520px) {
	.cempty { padding: 34px 20px 30px; }
	.cempty__title { font-size: 19px; }
}