@charset "UTF-8";
/* ==========================================================================
   Thẻ & tài khoản — phần bổ sung của ndh_auto (không có trong theme WordPress)
   ==========================================================================

   Trang chi tiết thẻ tín dụng / ghi nợ / trả trước / mở tài khoản: các khối
   "Tích điểm và quy đổi", "Phí và lãi cần biết", "Trả góp qua thẻ",
   "Đặc quyền du lịch", "Tiện ích và cách mở thẻ", "Nạp tiền và số dư",
   dòng "Biểu phí chính thức" dưới nguồn kiểm chứng ở đầu trang.
   Chỉ nạp khi bài đã nhập nhóm "Thông tin bổ sung …" (src/lib/ndh/cards/extra.ts).
   Dùng lại lớp của theme (termgrid/termbox, reqlist, perkgrid/perkcard ở
   compare.css; lender__h2 ở lender.css) — tệp này chỉ thêm phần còn thiếu,
   màu lấy từ biến của tokens.css.
   -------------------------------------------------------------------------- */

/* --- Khối chung ----------------------------------------------------------- */
.cardx__lead {
	margin: -4px 0 16px;
	max-width: 68ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--gray);
}
.cardx .termgrid { margin-top: 0; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.cardx .termbox { align-items: flex-start; }
.cardx .termbox__icon { margin-top: 1px; }
.cardx .termbox dd { overflow-wrap: anywhere; font-size: 15px; }

/* Nhãn bên trái của danh sách phí rộng hơn một chút: nhãn phí thường dài. */
.cardx__list .reqlist__row { grid-template-columns: minmax(0, 270px) minmax(0, 1fr); }
.cardx__list .reqlist__row { align-items: center; }
.cardx__list dd { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Ghi chú (cách quy đổi điểm, đối tác trả góp, kênh nạp tiền). */
.cardx__note {
	display: flex; align-items: flex-start; gap: 10px;
	margin-top: 12px; padding: 13px 16px;
	background: var(--c-soft, #FAF9F7);
	border: 1px solid var(--edge);
	border-radius: 12px;
	font-size: 14.5px; line-height: 1.6; color: var(--gray);
}
.cardx__note .ico { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--green); }
.cardx__note b { color: var(--ink); font-weight: 700; }
.cardx__grid + .cardx__note { margin-top: 14px; }

/* Có / Không trong ô thông số. */
.cardx-yes, .cardx-no { display: inline-flex; align-items: center; gap: 5px; }
.cardx-yes .ico, .cardx-no .ico { width: 16px; height: 16px; stroke-width: 2.2; }
.cardx-yes { color: var(--green-dark); }
.cardx-no { color: var(--gray-2); font-weight: 600; }

/* Đặc quyền du lịch: dòng đầu đậm, mô tả xuống dòng. */
.cardx .perkcard b { color: var(--ink); font-weight: 700; }

/* --- Nguồn biểu phí (đầu trang, dưới "Nguồn kiểm chứng") ----------------- */
.cardx-src {
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px;
	margin-top: 8px;
	font-size: 13.5px; color: var(--gray-2);
}
.cardx-src > .ico { width: 16px; height: 16px; flex: none; color: var(--green); }
.cardx-src a {
	display: inline-flex; align-items: center; gap: 4px;
	color: var(--purple); font-weight: 600;
	text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
.cardx-src a .ico { width: 13px; height: 13px; }
.cardx-src a:hover { color: var(--green-dark); }

@media (max-width: 640px) {
	.cardx__list .reqlist__row { grid-template-columns: 1fr; gap: 4px; }
	.cardx .termgrid { grid-template-columns: 1fr 1fr; gap: 8px; }
	.cardx .termbox { padding: 11px 12px; gap: 9px; }
	.cardx .termbox__icon { width: 32px; height: 32px; border-radius: 9px; }
}
@media (max-width: 380px) {
	.cardx .termgrid { grid-template-columns: 1fr; }
}

/* --- Trang ngân hàng phát hành: "So sánh nhanh các thẻ tín dụng <ngân hàng>" (cards/issuer-compare.ts) --- */
.icmp { margin-top: clamp(32px, 4vw, 48px); }
.icmp__lead {
	margin: -4px 0 16px;
	max-width: 72ch;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--ink-2, #464646);
}
.icmp__table { min-width: 760px; }
.icmp__table tbody th { white-space: normal; min-width: 220px; }
.icmp__table tbody th a { color: var(--ink); text-decoration: none; }
.icmp__table tbody th a:hover { color: var(--purple); text-decoration: underline; }
.icmp__table tbody td b { color: var(--green-dark); }
.icmp__table tbody tr.is-stopped > th,
.icmp__table tbody tr.is-stopped > td { color: var(--gray-2); }
.icmp__tag--stop { background: var(--c-soft, #F2F2F2); color: var(--gray-2); }
.icmp__foot {
	margin-top: 12px;
	max-width: 80ch;
	font-size: 13px;
	line-height: 1.6;
	color: var(--gray-2);
}

/* --- Trang ngân hàng phát hành: phần biên tập (cards/issuer-page.ts) --------------------------- */
.carc__copy:has(.carc__byline) .carc__title { max-width: 26ch; }
.carc__byline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 12px; font-size: 13.5px; color: var(--gray-2); }
.carc__byline > span { display: inline-flex; align-items: center; gap: 5px; }
.carc__byline .ico { width: 15px; height: 15px; flex: none; }
.carc__byline i { font-style: normal; opacity: .6; }
.carc__byline a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Mục lục: hàng nút nhảy tới từng phần (không dính, để không chồng lên thanh lọc). */
.inav { margin-top: 16px; }
.inav .shell { display: flex; flex-wrap: nowrap; gap: 8px; padding: 0 0 4px; max-width: none; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.inav .shell::-webkit-scrollbar { display: none; }
.inav a {
	padding: 6px 12px;
	border: 1px solid var(--edge);
	border-radius: 999px;
	background: #fff;
	font-size: 13.5px; font-weight: 600; color: var(--ink);
	white-space: nowrap;
	transition: border-color .2s, background-color .2s;
}
.inav a:hover { border-color: var(--purple); background: var(--purple-50); }
[id="danh-sach"], [id="chon-nhanh"], [id="so-sanh"], [id="so-voi-ngan-hang-khac"], .ibody__prose h2 { scroll-margin-top: 90px; }

/* Chọn nhanh theo nhu cầu */
.ipick { margin-bottom: clamp(24px, 3vw, 36px); }
.ipick .lender__h2 { margin-top: 0; }
.ipick__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ipick__list:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ipick__list:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ipick__item {
	display: flex; flex-direction: column; gap: 6px;
	padding: 16px 18px;
	border: 1px solid var(--edge);
	border-radius: 14px;
	background: #fff;
}
.ipick__need { margin: 0; font-size: 12.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--gray-2); }
.ipick__card { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 700; color: var(--purple); }
.ipick__card .ico { width: 16px; height: 16px; flex: none; }
.ipick__card:hover { text-decoration: underline; }
.ipick__why { margin: 0; font-size: 14px; line-height: 1.55; color: var(--gray); }

/* --- Khối "Đánh giá chi tiết thẻ tín dụng <ngân hàng>" (issuerArticleHtml) ---------------------
   Nền ấm tách khỏi khối phía trên; bài viết nằm trong thẻ trắng; cột phải dính: tóm tắt nhanh + mục lục. */
.ibody {
	padding-block: clamp(32px, 4.4vw, 56px);
	background: linear-gradient(180deg, #FAF8F4 0%, #FFFFFF 100%);
	border-top: 1px solid var(--edge-2);
}
.ibody__head { max-width: 760px; margin-bottom: clamp(20px, 2.6vw, 30px); }
.ibody__eyebrow {
	margin: 0 0 6px;
	font-size: 12.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
	color: var(--green-dark, #6B4B12);
}
.ibody__title { margin: 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; line-height: 1.25; color: var(--ink); }
.ibody__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; font-size: 13.5px; color: var(--gray-2); }
.ibody__meta span { display: inline-flex; align-items: center; gap: 6px; }
.ibody__meta .ico { width: 15px; height: 15px; flex: none; }

.ibody__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(24px, 3vw, 40px); align-items: start; }
.ibody__main {
	min-width: 0;
	padding: clamp(20px, 3.2vw, 44px);
	background: #fff;
	border: 1px solid var(--edge);
	border-radius: 18px;
	box-shadow: 0 18px 40px -32px rgba(60, 45, 20, .35);
}
.ibody__aside { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 16px; }
.ibody__toc { position: static; }
.ibody__toc .toc__link { padding: 11px 18px; font-size: 14.5px; }

/* Tóm tắt nhanh */
.ifacts { padding: 18px 20px; background: #fff; border: 1px solid var(--edge); border-radius: 14px; }
.ifacts__title { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--ink); }
.ifacts__list { margin: 0; }
.ifacts__list > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--edge); }
.ifacts__list > div:last-child { border-bottom: 0; }
.ifacts__list dt { font-size: 13.5px; color: var(--gray-2); }
.ifacts__list dd { margin: 0; font-size: 14px; font-weight: 700; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.ifacts__cta {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	margin-top: 12px; padding: 10px 12px;
	border-radius: 10px; background: var(--purple-50); color: var(--purple);
	font-size: 14px; font-weight: 700;
	transition: background-color .2s;
}
.ifacts__cta:hover { background: var(--purple-100, #EFE5D3); }
.ifacts__cta .ico { width: 16px; height: 16px; }

/* Thân bài */
.ibody__prose { font-size: 16px; }
.ibody__prose > p:first-child { font-size: 17.5px; line-height: 1.7; color: var(--ink); }
.ibody__prose h2 {
	margin-top: 40px; padding-top: 32px;
	border-top: 1px solid var(--edge-2);
	font-size: clamp(20px, 2vw, 24px);
}
.ibody__prose h2::before { top: calc(32px + .18em); bottom: auto; height: 1.05em; }
.ibody__prose h3 { margin-top: 26px; font-size: 17px; color: var(--ink); }

/* Danh sách "nhãn: nội dung" thành các dòng thẻ dễ quét */
.ibody__prose ul { display: grid; gap: 10px; margin: 0 0 20px; padding: 0; }
.ibody__prose ul li {
	margin: 0; padding: 14px 16px 14px 18px;
	background: #FBFAF7;
	border: 1px solid var(--edge-2);
	border-left: 3px solid var(--green);
	border-radius: 10px;
	line-height: 1.65;
}
.ibody__prose ul li::before { content: none; }
.ibody__prose ul li > strong:first-child { display: block; margin-bottom: 2px; color: var(--ink); }

/* Lưu ý: hộp thông tin có biểu tượng */
.ibody__prose blockquote {
	position: relative;
	margin: 0 0 24px; padding: 14px 18px 14px 50px;
	background: #F6F8FB; border: 1px solid #DCE5F0; border-radius: 12px;
}
.ibody__prose blockquote::before {
	content: "i";
	position: absolute; left: 16px; top: 15px;
	display: grid; place-items: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: #3B6EA8; color: #fff;
	font: italic 700 13px/1 Georgia, serif;
}
.ibody__prose blockquote p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--gray); }

/* Bảng trong bài */
.ibody__prose .cmp__scroll { margin-bottom: 20px; }
.ibody__prose .cmp__scroll table { margin: 0; min-width: 560px; }
.ibody__prose .cmp__scroll th, .ibody__prose .cmp__scroll td { border-left: 0; border-right: 0; }
.ibody__prose em { color: var(--gray-2); font-size: 14px; }

/* Bảng so với ngân hàng khác — cuối bài */
.ipeer { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--edge-2); }
.ipeer .lender__h2 { margin-top: 0; }
.ipeer .icmp__table { min-width: 600px; }
.ipeer .icmp__table thead th { white-space: normal; line-height: 1.35; }
.ipeer .icmp__table tbody th { min-width: 0; }

@media (max-width: 1080px) {
	.ibody__grid { grid-template-columns: minmax(0, 1fr); }
	.ibody__aside { display: none; }
}
@media (max-width: 560px) {
	.ibody__main { padding: 18px 16px; border-radius: 14px; }
	.ibody__prose > p:first-child { font-size: 16.5px; }
	.ibody__prose ul li { padding: 12px 14px; }
}

/* --- Trang ngân hàng: bố cục ưu tiên thẻ (đợt 2) ------------------------------------------------ */
/* Ô số liệu đầu trang: 3 ô một hàng trên desktop. */
.carc__copy:has(.carc__byline) ~ .carc__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: center; gap: 4px; }
.carc__copy:has(.carc__byline) ~ .carc__stats .cstat2 { flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 8px; }
.carc__copy:has(.carc__byline) ~ .carc__stats .cstat2__icon { display: none; }
.carc__copy:has(.carc__byline) ~ .carc__stats .cstat2__value { white-space: nowrap; }

/* Tiêu đề danh sách + hàng nút sắp xếp */
.ilist__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: clamp(8px, 1.6vw, 20px) 0 16px; }
.ilist__head .lender__h2 { margin: 0; }
.csort { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.csort__label { font-size: 13.5px; color: var(--gray-2); margin-right: 2px; }
.csort__btn {
	padding: 7px 13px; border: 1px solid var(--edge); border-radius: 999px; background: #fff;
	font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); cursor: pointer;
	transition: background-color .2s, border-color .2s, color .2s;
}
.csort__btn:hover { border-color: var(--purple); }
.csort__btn.is-on { background: var(--purple); border-color: var(--purple); color: #fff; }

/* Ô thẻ: nhãn "thấp nhất" + ưu đãi chính */
.ccard__best { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 0; }
.ccard__best span { padding: 3px 9px; border-radius: 999px; background: #F1E6D4; color: var(--green-dark, #6B4B12); font-size: 11.5px; font-weight: 700; }
.ccard__perk { display: flex; gap: 7px; align-items: flex-start; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--gray); }
.ccard__perk .ico { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--green); }

/* Bảng so sánh: cột tên thẻ dính bên trái khi cuộn ngang (desktop/tablet) */
.icmp__table--stack tbody th, .icmp__table--stack thead th:first-child { position: sticky; left: 0; z-index: 2; background: #fff; }
.icmp__table--stack thead th:first-child { background: var(--purple-50); z-index: 3; }
.icmp__table--stack tbody tr.is-self > th, .icmp__table--stack tbody tr:hover > th { background: var(--purple-50); }

/* Bài đánh giá: mỗi phần H2 là một <details> — desktop mở sẵn, điện thoại card.js gập phần sau */
.ibody__sec { border-top: 1px solid var(--edge-2); margin-top: 32px; }
.ibody__sec > summary { list-style: none; cursor: pointer; position: relative; padding-right: 32px; }
.ibody__sec > summary::-webkit-details-marker { display: none; }
.ibody__sec > summary::after {
	content: ""; position: absolute; right: 4px; top: calc(32px + .55em);
	width: 10px; height: 10px; border-right: 2px solid var(--gray-2); border-bottom: 2px solid var(--gray-2);
	transform: rotate(45deg); transition: transform .2s;
}
.ibody__sec:not([open]) > summary::after { transform: rotate(-45deg); }
.ibody__prose .ibody__sec > summary h2 { margin-top: 0; padding-top: 32px; border-top: 0; display: block; }
.ibody__prose .ibody__sec:not([open]) > summary h2 { margin-bottom: 0; padding-bottom: 6px; }
.ibody__prose h2 { scroll-margin-top: 90px; }

/* Thanh nút dính đáy (chỉ điện thoại) */
.icta { display: none; }

@media (max-width: 700px) {
	.ipick__list, .ipick__list:has(> :nth-child(4):last-child), .ipick__list:has(> :nth-child(2):last-child) {
		display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 6px; margin-right: -16px; padding-right: 16px;
	}
	.ipick__item { flex: 0 0 78%; scroll-snap-align: start; }
	.carc__copy:has(.carc__byline) ~ .carc__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 10px; }
	.carc__copy:has(.carc__byline) ~ .carc__stats .cstat2 { flex-direction: column; align-items: flex-start; gap: 4px; }
	.carc__copy:has(.carc__byline) ~ .carc__stats .cstat2__icon { display: none; }
	.carc__copy:has(.carc__byline) ~ .carc__stats .cstat2__value { font-size: 17px; }
	.carc__copy:has(.carc__byline) ~ .carc__stats .cstat2__label { font-size: 11.5px; }

	/* Bảng so sánh thành khối dọc từng thẻ */
	.icmp .cmp__scroll { overflow: visible; border: 0; }
	.icmp__table--stack { min-width: 0; }
	.icmp__table--stack thead { display: none; }
	.icmp__table--stack, .icmp__table--stack tbody, .icmp__table--stack tr { display: block; width: 100%; }
	.icmp__table--stack tr { margin-bottom: 10px; border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; background: #fff; }
	.icmp__table--stack tbody th { position: static; display: block; white-space: normal; padding: 12px 14px; background: var(--purple-50); border-bottom: 1px solid var(--edge-2); }
	.icmp__table--stack td { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; white-space: normal; text-align: right; border-bottom: 1px solid var(--edge-2); }
	.icmp__table--stack td::before { content: attr(data-label); color: var(--gray-2); font-size: 13px; text-align: left; flex: none; }
	.icmp__table--stack tr > td:last-child { border-bottom: 0; }

	.icta {
		display: flex; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 140;
		padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-top: 1px solid var(--edge);
		box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, .3);
	}
	.icta a, .icta button {
		flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 10px;
		font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
	}
	.icta__cmp { border: 1px solid var(--purple); color: var(--purple); background: #fff; }
	.icta__consult { border: 0; background: var(--c-warm-400, #F4B24C); color: var(--ink); }
	body:has(.icta) { padding-bottom: 72px; }
}


/* Trang ngân hàng: Hỏi đáp đứng ngay sau danh sách thẻ (trước bài đánh giá) — chừa khoảng trên, tiêu đề cùng kiểu H2 của trang. */
.section-g + .pfaq { padding-top: clamp(28px, 4vw, 48px); }
.section-g + .pfaq .pfaq__title { font-size: clamp(21px, 2vw, 26px); color: var(--purple); position: relative; padding-left: 16px; }
.section-g + .pfaq .pfaq__title::before { content: ""; position: absolute; left: 0; top: .18em; bottom: .18em; width: 4px; border-radius: 3px; background: linear-gradient(180deg, var(--purple), var(--green)); }
/* Bảng so sánh: ô chữ dài (vd. "Miễn phí cho hội viên …") xuống dòng thay vì đẩy cột cuối ra ngoài. */
.icmp__table--stack td { white-space: normal; min-width: 88px; }
.icmp__table--stack td[data-label="Phí thường niên"] { max-width: 210px; }
@media (max-width: 700px) {
	.icmp__table--stack td, .icmp__table--stack td[data-label="Phí thường niên"] { max-width: none; min-width: 0; }
}