/*
Theme Name: Bank Gần Đây
Description: Theme nhẹ cho danh bạ ngân hàng, chi nhánh theo 34 tỉnh thành mới. Cần plugin bgd-core.
Version: 0.1.0
Requires PHP: 8.1
Text Domain: bgd
*/

/* ---------- Tokens ---------- */
:root {
	--brand: #0f766e;
	--brand-ink: #0b5952;
	--brand-soft: #e6f4f2;
	--ink: #0f172a;
	--ink-2: #475569;
	--ink-3: #64748b;
	--line: #e2e8f0;
	--bg: #f8fafc;
	--surface: #ffffff;
	--warn-bg: #fff7ed;
	--warn-line: #fdba74;
	--radius: 8px;
	--shadow: 0 1px 2px rgb(15 23 42 / .06), 0 1px 3px rgb(15 23 42 / .08);
	--wrap: 1120px;
	--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color-scheme: light only;
}

/* ---------- Base ---------- */
[hidden] { display: none !important; } /* thuộc tính hidden luôn thắng các display: grid/flex bên dưới */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.6 var(--font); color: var(--ink); background: var(--bg); }
a { color: var(--brand-ink); text-underline-offset: 2px; }
a:hover { color: var(--brand); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); letter-spacing: -.01em; }
h2 { font-size: 1.5625rem; line-height: 1.3; } /* 25px */
h3 { font-size: 1.3125rem; line-height: 1.35; } /* 21px */
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; background: var(--surface); padding: 8px 12px; z-index: 10; }
.muted { color: var(--ink-3); font-size: .925em; }

/* ---------- Header / footer ---------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 700; font-size: 1.1rem; }
.logo__img { display: block; height: 36px; width: auto; max-width: 100%; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a, .nav__soon { padding: 6px 10px; border-radius: var(--radius); text-decoration: none; color: var(--ink-2); font-weight: 500; }
.nav a:hover, .nav a[aria-current] { background: var(--brand-soft); color: var(--brand-ink); }
.nav__soon { opacity: .5; cursor: default; }
/* Điện thoại: menu gập sau nút ☰ */
.nav-toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); padding: 6px; cursor: pointer; line-height: 0; }
@media (max-width: 720px) {
	.site-header__inner { flex-wrap: wrap; gap: 8px; min-height: 56px; }
	.logo { min-width: 0; flex: 1 1 auto; }
	.logo__img { height: 28px; }
	.nav-toggle { display: inline-flex; }
	.nav { display: none; width: 100%; flex-direction: column; gap: 2px; padding: 4px 0 10px; }
	.nav.is-open { display: flex; }
	.nav a, .nav__soon { padding: 10px 12px; font-size: 1rem; }
}

.site-footer { margin-top: 64px; background: var(--surface); border-top: 1px solid var(--line); color: var(--ink-2); font-size: .95rem; }
/* Hàng 1: cột giới thiệu 35%, 3 cột liên kết chia đều 65% */
.site-footer__grid { display: grid; gap: 24px 18px; padding-top: 32px; padding-bottom: 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site-footer__about { grid-column: 1 / -1; }
@media (min-width: 900px) { .site-footer__grid { grid-template-columns: 35% repeat(3, minmax(0, 1fr)); gap: 32px; } .site-footer__about { grid-column: auto; } }
@media (min-width: 560px) and (max-width: 899px) { .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.site-footer__brand { font-weight: 700; font-size: 1.1rem; color: var(--ink); margin-bottom: .5em; text-align: left; }
.site-footer__h { font-weight: 700; color: var(--ink); margin-bottom: .6em; text-align: left; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 6px 0; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--brand-ink); text-decoration: underline; }
.site-footer__meta { margin-top: 10px !important; font-size: .9rem; }
/* Hàng 2: bản quyền */
.site-footer__legal { border-top: 1px solid var(--line); padding: 16px 0 24px; font-size: .85rem; color: var(--ink-3); }
.site-footer__legal p { margin: 0 0 6px; }
.site-footer__copy { font-weight: 600; color: var(--ink-2); }

/* ---------- Hero / search (trang chủ) ---------- */
.hero { background: linear-gradient(180deg, var(--brand-soft), var(--bg)); padding: 40px 0 32px; }
.search { position: relative; max-width: 620px; margin: 20px 0; }
.search input { width: 100%; font: inherit; font-size: 1.05rem; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.search input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.stats { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 0; color: var(--ink-2); font-size: .95rem; }
.stats b { color: var(--ink); }

/* ---------- Page ---------- */
.wrap.page { padding-top: 16px; }
.page-head { margin: 8px 0 24px; }
.lead { color: var(--ink-2); font-size: 1.05rem; max-width: 70ch; margin: 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0 0 8px; font-size: .9rem; color: var(--ink-3); }
.crumbs li + li::before { content: "›"; margin-right: 4px; }
.crumbs a { color: var(--ink-3); }
.section { margin: 32px 0; }
.count { display: inline-block; min-width: 1.8em; padding: 0 .45em; border-radius: var(--radius); background: var(--brand-soft); color: var(--brand-ink); font-size: .8em; text-align: center; vertical-align: middle; }
.note { color: var(--ink-2); background: var(--surface); border-left: 3px solid var(--brand); padding: 10px 14px; border-radius: 0 var(--radius) var(--radius) 0; }
.callout { background: var(--warn-bg); border: 1px solid var(--warn-line); padding: 10px 14px; border-radius: var(--radius); }
.admin-flag { background: repeating-linear-gradient(-45deg, var(--warn-bg), var(--warn-bg) 10px, transparent 10px, transparent 20px); border: 1px dashed var(--warn-line); padding: 8px 12px; border-radius: var(--radius); font-size: .9rem; }
.pending { color: var(--ink-3); font-style: italic; }
.layout__side .box { position: sticky; top: 80px; }
.box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.more { font-weight: 600; text-decoration: none; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 12px; }
.grid--banks { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.card { display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.card:hover { border-color: var(--brand); box-shadow: var(--shadow); color: var(--ink); }
.bank-card__body { display: flex; flex-direction: column; min-width: 0; }
.bank-card__name { font-weight: 650; }
.bank-card__meta { font-size: .82rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.place-card__name { font-weight: 650; }
.place-card__meta { font-size: .82rem; color: var(--ink-3); }

.badge { flex: none; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius); font-weight: 800; font-size: .72rem; letter-spacing: .02em; color: #fff; background: hsl(var(--h) 55% 38%); }
.badge--sm { width: 26px; height: 26px; border-radius: var(--radius); font-size: .55rem; margin-right: 8px; vertical-align: middle; }
.badge--lg { width: 64px; height: 64px; border-radius: var(--radius); font-size: .95rem; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--ink-2); font-size: .9rem; }
.chip b { color: var(--brand-ink); }

/* Logo: khung cố định, logo nằm giữa, không méo */
.logo-img { flex: none; display: inline-block; object-fit: contain; object-position: center; }
.logo-img--sm { width: 56px; height: 22px; margin-right: 10px; vertical-align: middle; object-position: left center; }
.logo-img--md { width: 88px; height: 34px; }
.logo-img--lg { width: 168px; height: 64px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-sizing: content-box; }
.bank-card { gap: 14px; }
.bank-card .logo-img--md { padding-right: 12px; border-right: 1px solid var(--line); box-sizing: content-box; }
@media (max-width: 560px) {
	.grid--banks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.bank-card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; }
	.bank-card .logo-img--md { padding: 0 0 8px; border-right: 0; border-bottom: 1px solid var(--line); width: 100%; object-position: left center; }
	.bank-card__body { width: 100%; }
}

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.table th, .table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child > * { border-bottom: 0; }
.table thead th { background: var(--bg); font-size: .85rem; color: var(--ink-3); }

.source { margin-top: 12px; font-size: .85rem; color: var(--ink-3); }
.source a { color: var(--ink-3); }

/* ---------- Province lists ---------- */
.region { font-size: .95rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; margin-top: 20px; }
.wards summary { cursor: pointer; font-weight: 600; }
.ward-list { columns: 3 180px; padding-left: 18px; color: var(--ink-2); font-size: .92rem; }

/* ---------- Branches ---------- */
.branches { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.branch { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.branch__name { margin: 0 0 4px; }
.branch__addr { margin: 0; }
.branch__old { margin: 2px 0 0; font-size: .88rem; color: var(--ink-3); }
.branch__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0 0; font-size: .88rem; color: var(--ink-3); }
.empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 20px; }
.prose { max-width: 72ch; }
.code { font: 600 .95em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--bg); border: 1px solid var(--line); padding: 1px 6px; border-radius: var(--radius); letter-spacing: .03em; }
.src { font-size: .78rem; color: var(--ink-3); margin-left: 6px; }
.hotlines { list-style: none; margin: 0; padding: 0; }
.hotlines li { margin: 2px 0; }
.tel { font-weight: 650; text-decoration: none; }
.tag { display: inline-block; font-size: .72rem; padding: 0 6px; border-radius: var(--radius); background: var(--brand-soft); color: var(--brand-ink); }
.license summary { cursor: pointer; color: var(--brand-ink); font-size: .9rem; margin-top: 4px; }
.license-list { margin: 6px 0 0; padding-left: 18px; font-size: .88rem; color: var(--ink-2); }

/* ---------- Công cụ ---------- */
.tool-card { flex-direction: column; align-items: flex-start; gap: 4px; }
.tool-card__name { font-weight: 650; }
.tool-card__desc { font-size: .9rem; color: var(--ink-3); }
.search--tool { margin: 0 0 12px; max-width: none; }
.examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ink-3); font-size: .9rem; }
.chip--btn { cursor: pointer; font: inherit; font-size: .85rem; }
.chip--btn:hover { border-color: var(--brand); color: var(--brand-ink); }
.addr-results { display: grid; gap: 10px; margin-top: 12px; }
.addr-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.addr-card__old { margin: 0 0 6px; color: var(--ink-2); }
.addr-card__new { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.addr-card__new ul { list-style: none; margin: 0; padding: 0; }
.addr-card__arrow { color: var(--brand-ink); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.addr-card__note { margin: 8px 0 0; font-size: .85rem; color: var(--ink-3); }
.bank-inline { display: flex; align-items: center; gap: 4px; text-decoration: none; color: var(--ink); }
.bank-inline small { display: block; color: var(--ink-3); font-size: .8rem; }
.copy { border: 0; background: none; padding: 0; cursor: pointer; position: relative; }
.copy:hover .code { border-color: var(--brand); }
.copy.is-copied::after { content: "Đã sao chép"; position: absolute; left: 0; top: 100%; margin-top: 4px; font-size: .75rem; background: var(--ink); color: #fff; padding: 2px 6px; border-radius: var(--radius); white-space: nowrap; }
.filter-empty { color: var(--ink-3); }
.qr-tool { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 860px) { .qr-tool { grid-template-columns: minmax(0, 1fr) 360px; } }
.qr-form { display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.qr-form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.qr-form input, .qr-form select { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); width: 100%; }
.qr-form input:focus, .qr-form select:focus { outline: 2px solid var(--brand); outline-offset: 0; }
.qr-error { margin: 0; color: #b91c1c; }
.btn { font: inherit; font-weight: 600; background: var(--brand); color: #fff; border: 0; border-radius: var(--radius); padding: 11px 18px; cursor: pointer; justify-self: start; }
.btn:hover { background: var(--brand-ink); }
.btn--ghost { background: none; color: var(--brand-ink); border: 1px solid var(--line); }
.btn--ghost:hover { background: var(--brand-soft); }
.qr-card { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 12px; justify-items: center; }
.qr-card__logo { height: 34px; width: auto; max-width: 160px; object-fit: contain; }
.qr-card__code { width: 100%; max-width: 300px; }
.qr-card__code svg { display: block; width: 100%; height: auto; }
.qr-card__info { width: 100%; display: grid; gap: 4px; font-size: .92rem; }
.qr-card__info div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--line); padding-bottom: 4px; }
.qr-card__info span { color: var(--ink-3); }
.qr-card__info b { text-align: right; word-break: break-word; }

/* ---------- Công cụ tính ---------- */
.calc { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 860px) { .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.calc-form { display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.calc-form > label, .calc-more label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; }
.calc-form input:not([type=radio]) { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); width: 100%; }
.calc-form input:focus { outline: 2px solid var(--brand); outline-offset: 0; }
.calc-options { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.calc-options legend { font-weight: 600; font-size: .95rem; margin-bottom: 6px; padding: 0; }
.radio { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; cursor: pointer; }
.calc-more { border-top: 1px dashed var(--line); padding-top: 10px; display: grid; gap: 12px; }
.calc-more[open] { gap: 12px; }
.calc-more summary { cursor: pointer; color: var(--brand-ink); font-weight: 600; }
.calc-more label { margin-top: 10px; }
.small { font-size: .85rem; }
.calc-result { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: grid; gap: 14px; position: sticky; top: 80px; }
.calc-big { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.calc-big span { color: var(--ink-3); font-size: .9rem; }
.calc-big b { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); color: var(--brand-ink); line-height: 1.2; }
.calc-rows { display: grid; gap: 6px; }
.calc-rows > div { display: flex; justify-content: space-between; gap: 12px; }
.calc-rows span { color: var(--ink-2); }
.compare__title { font-weight: 600; margin: 0 0 6px; }
.table--num td:not(:first-child), .table--num th:not(:first-child) { text-align: right; white-space: nowrap; }
.table--num tr.is-current td { background: var(--brand-soft); font-weight: 600; }
.schedule summary { cursor: pointer; font-weight: 600; color: var(--brand-ink); margin-bottom: 10px; }
.schedule .table-wrap { max-height: 480px; overflow: auto; }

.codes-filter { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-bottom: 10px; }
.codes-filter__q { grid-column: 1 / -1; }
@media (min-width: 860px) { .codes-filter { grid-template-columns: 200px 220px 1fr; } .codes-filter__q { grid-column: auto; } }
.codes-filter select, .codes-filter input { font: inherit; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.codes-table td:first-child { white-space: nowrap; }

/* ---------- Tác giả, bài viết ---------- */
.person-photo { display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.person-photo--md { width: 96px; height: 96px; }
.person-photo--lg { width: 132px; height: 132px; }
.person-photo--initial { display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; font-size: 1.4em; }
.person-photo--lg.person-photo--initial { font-size: 3rem; }
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--line); }
.timeline li { padding: 0 0 14px 16px; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -6px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.timeline__time { display: block; font-size: .85rem; color: var(--ink-3); }
.cred-list, .post-list { padding-left: 18px; margin: 0; }
.cred-list li, .post-list li { margin: 6px 0; }
.chips--list { list-style: none; padding: 0; margin: 0; }
.check-list { padding-left: 18px; margin: 0 0 12px; font-size: .92rem; color: var(--ink-2); }
.check-list li { margin: 6px 0; }
.person-card__name { font-weight: 700; font-size: 1.05rem; }
.person-card__role { color: var(--brand-ink); font-size: .9rem; }
.person-card__bio { color: var(--ink-3); font-size: .88rem; }
.article { max-width: 760px; }
.article__head { margin: 8px 0 20px; }
.byline { display: flex; gap: 10px; align-items: center; font-size: .92rem; color: var(--ink-2); }
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; margin: 0 0 24px; }
.toc__title { font-weight: 700; margin: 0 0 6px; }
.toc ol { margin: 0; padding-left: 20px; }
.article__body { font-size: 1.05rem; }
.article__body h2 { margin-top: 1.6em; scroll-margin-top: 80px; }
.article__body h3 { scroll-margin-top: 80px; }
.sources { margin-top: 28px; font-size: .92rem; }
.sources h2 { font-size: 1.05rem; }
.disclaimer { font-size: .88rem; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 12px; margin-top: 24px; }
.author-box { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-top: 14px; }
.author-box p { margin: 0 0 4px; }
.author-box__name a { font-weight: 700; text-decoration: none; }

/* ---------- Điện thoại: tinh chỉnh ---------- */
.calc > *, .qr-tool > *, .layout > * { min-width: 0; }
@media (max-width: 600px) {
	.logo-img--lg { width: 120px; height: 46px; padding: 6px; }
	.person-photo--lg { width: 96px; height: 96px; }
	.person-photo--lg.person-photo--initial { font-size: 2.2rem; }
	.calc-result { position: static; }
	.layout__side .box { position: static; }
	.table th, .table td { padding: 9px 10px; }
	.table--num { font-size: .88rem; }
	.hero { padding: 28px 0 20px; }
	.section { margin: 26px 0; }
	h1 { font-size: 1.45rem; }
}
.calc-rows > div, .qr-card__info div { flex-wrap: wrap; }
.calc-rows b { margin-left: auto; }
@media (max-width: 360px) {
	.calc-form, .calc-result, .qr-form, .qr-card, .box { padding: 14px; }
	.wrap { padding: 0 12px; }
}
.calc-result, .qr-card, .qr-form, .calc-form { grid-template-columns: minmax(0, 1fr); }
.table--num td:first-child, .table--num th:first-child { min-width: 7.5em; }
@media (max-width: 600px) {
	.compare .table { font-size: .8rem; }
	.compare .table th, .compare .table td { padding: 8px 6px; }
	.compare .table td:first-child, .compare .table th:first-child { min-width: 5.5em; }
}

/* ---------- Căn đều hai bên cho văn bản thường ---------- */
/* Đoạn văn, danh sách trong bài/trang/tác giả: căn đều. Bảng, tiêu đề, dòng thông tin ngắn: giữ căn trái. */
p,
.prose li,
.check-list li,
.cred-list li,
.trust__item p,
.addr-card__note {
	text-align: justify;
	text-justify: inter-word;
}
table, table p, th, td,
.crumbs, .stats, .person-stats, .person-links, .person-role, .person-job,
.byline, .branch__meta, .branch__addr, .branch__old, .examples, .codes-count,
.addr-card__old, .compare__title, .toc, .qr-error, .site-footer__brand, .site-footer__h,
.person-card, .search__empty, .filter-empty, .source {
	text-align: left;
}

/* ---------- Form liên hệ / báo sai ---------- */
.wrap.page .prose { max-width: 760px; }
.bgd-form { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 12px 0 28px; max-width: 760px; }
.bgd-form label { display: grid; gap: 6px; font-weight: 600; font-size: .95rem; text-align: left; }
.bgd-form input:not([type=checkbox]), .bgd-form select, .bgd-form textarea { font: inherit; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); width: 100%; }
.bgd-form input:focus, .bgd-form select:focus, .bgd-form textarea:focus { outline: 2px solid var(--brand); outline-offset: 0; }
.bgd-form__row { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.bgd-form .consent { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; font-size: .88rem; color: var(--ink-2); }
.bgd-form .consent input { margin-top: 4px; }
.bgd-form .req { color: #b91c1c; }
.bgd-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bgd-form__msg { margin: 0; padding: 10px 12px; border-radius: var(--radius); text-align: left; }
.bgd-form__msg.is-ok { background: var(--brand-soft); color: var(--brand-ink); }
.bgd-form__msg.is-error { background: #fef2f2; color: #b91c1c; }
.bgd-form button[disabled] { opacity: .6; cursor: wait; }
/* Nhãn form: chữ, dấu * và ghi chú (…) nằm cùng dòng; ô nhập xuống dòng dưới */
.bgd-form label:not(.consent), .qr-form label, .calc-form > label, .calc-more label { display: block; }
.bgd-form label:not(.consent) > input, .bgd-form label > select, .bgd-form label > textarea,
.qr-form label > input, .qr-form label > select,
.calc-form > label > input, .calc-more label > input { display: block; margin-top: 6px; }
.bgd-form label .muted, .qr-form label .muted { font-weight: 400; }

/* ---------- Footer nền tối ---------- */
.site-footer { background: #0b1f24; border-top: 0; color: #b6c6c8; }
.site-footer__brand, .site-footer__h { color: #fff; }
.site-footer__h { text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; }
.site-footer a { color: #cfdcdd; }
.site-footer a:hover { color: #5eead4; }
.site-footer__meta a { color: #5eead4; }
.site-footer__legal { background: #071518; border-top: 1px solid rgba(255,255,255,.08); color: #8fa3a6; }
.site-footer__copy { color: #e2ecec; }

.site-footer__text p { margin: 0 0 .6em; }
.site-footer__text ul, .site-footer__text ol { margin: 0; padding: 0; list-style: none; }
.site-footer__text ol { list-style: decimal; padding-left: 18px; }
.site-footer__legal .site-footer__text p { margin: 0 0 6px; }

/* Tiêu đề cột: to hơn 1 cỡ + gạch chân màu thương hiệu */
.site-footer .site-footer__h { font-size: 1rem; padding-bottom: 10px; margin-bottom: 14px; position: relative; }
.site-footer .site-footer__h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; border-radius: 2px; background: #2dd4bf; }
/* Icon trước Biên tập / Email / Địa chỉ */
.site-footer__meta li { display: flex; gap: 8px; align-items: flex-start; }
.site-footer__icon { flex: none; margin-top: 3px; color: #2dd4bf; }
/* Chấm tròn trước các liên kết ở 3 cột */
.site-footer__col li { position: relative; padding-left: 16px; }
.site-footer__col li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: #2dd4bf; opacity: .85; }
.site-footer__col li:hover::before { opacity: 1; box-shadow: 0 0 0 3px rgba(45, 212, 191, .18); }
/* Dòng bản quyền căn giữa */
.site-footer .site-footer__copy { text-align: center; margin-bottom: 10px; }

/* =========================================================
   TRANG CHỦ (phong cách tổ chức tài chính)
   ========================================================= */
.icon { display: inline-block; vertical-align: middle; flex: none; }
.btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.btn--ghost { color: var(--brand-ink); }
.kicker { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); text-align: left; }
.home-head { margin-bottom: 26px; }
.home-head h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); letter-spacing: -.015em; margin: 0; }
.home-head__sub { color: var(--ink-3); margin: 8px 0 0; text-align: left; }
.home-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.home-section { padding: 64px 0 8px; }

/* Hero */
.home-hero { position: relative; color: #e6f0f0; background:
	radial-gradient(900px 420px at 85% -10%, rgba(45,212,191,.22), transparent 60%),
	radial-gradient(700px 400px at -10% 110%, rgba(15,118,110,.35), transparent 60%),
	linear-gradient(160deg, #0b1f24 0%, #0d2a2f 55%, #0b1f24 100%); padding: 64px 0 72px; overflow: hidden; }
.home-hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(180deg, #000 30%, transparent 100%); pointer-events: none; }
.home-hero__title { color: #fff; font-size: clamp(2rem, 1.3rem + 2.8vw, 3.3rem); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 18px; max-width: 18ch; }
.home-hero__title span { display: block; background: linear-gradient(90deg, #5eead4, #a7f3d0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-hero__lead { color: #b6c9ca; font-size: 1.1rem; max-width: 58ch; margin: 0 0 26px; text-align: left; }
.home-search__icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--ink-3); z-index: 1; pointer-events: none; }

/* Tính năng */
.home-features { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.feature { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s, border-color .2s; }
.feature:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(15,23,42,.08); border-color: rgba(15,118,110,.35); color: var(--ink); }
.feature__icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius); background: var(--brand-soft); color: var(--brand); }
.feature__title { font-size: 1.12rem; font-weight: 700; }
.feature__desc { color: var(--ink-3); font-size: .93rem; line-height: 1.55; flex: 1; }
.feature__meta { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-ink); font-weight: 600; font-size: .9rem; margin-top: 4px; }

/* Ngân hàng */
.bank-group { margin-bottom: 26px; }
.bank-group__title { display: flex; align-items: center; gap: 10px; font-size: .95rem; color: var(--ink-2); margin: 0 0 12px; }
.bank-group__title span { font-size: .78rem; font-weight: 700; color: var(--brand-ink); background: var(--brand-soft); border-radius: var(--radius); padding: 1px 8px; }
.bank-group__title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.bank-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); }
.bank-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.bank-tile:hover { border-color: rgba(15,118,110,.4); box-shadow: 0 10px 24px rgba(15,23,42,.06); color: var(--ink); }
.bank-tile .logo-img--md { width: 100%; height: 36px; object-position: left center; }
.bank-tile__name { font-weight: 700; }
.bank-tile__meta { font-size: .82rem; color: var(--ink-3); margin-top: -4px; }

/* Dải quy trình (nền tối) */
.home-band { margin-top: 64px; padding: 72px 0; color: #c6d6d7; background: radial-gradient(800px 360px at 100% 0%, rgba(45,212,191,.16), transparent 60%), #0b1f24; }
.home-head--light h2 { color: #fff; }
.home-head--light .kicker { color: #5eead4; }
.home-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); counter-reset: s; }
.step { position: relative; padding: 26px 22px; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); }
.step__num { position: absolute; top: 18px; right: 20px; font-size: 2rem; font-weight: 800; color: rgba(255,255,255,.08); letter-spacing: -.03em; }
.step__icon { display: grid; place-items: center; width: 50px; height: 50px; border-radius: var(--radius); background: rgba(45,212,191,.14); color: #5eead4; margin-bottom: 14px; }
.step h3 { color: #fff; font-size: 1.08rem; margin: 0 0 8px; }
.step p { margin: 0; font-size: .93rem; line-height: 1.6; color: #a9bfc0; }
.home-band__link { margin: 26px 0 0; text-align: left; }
.home-band__link a { display: inline-flex; align-items: center; gap: 6px; color: #5eead4; font-weight: 600; text-decoration: none; }

/* Tỉnh thành */
.city-cards { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.city-card { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; align-items: center; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: border-color .2s, box-shadow .2s; }
.city-card:hover { border-color: rgba(15,118,110,.4); box-shadow: 0 10px 24px rgba(15,23,42,.06); color: var(--ink); }
.city-card__icon { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius); background: var(--brand-soft); color: var(--brand); }
.city-card__name { font-weight: 700; font-size: 1.02rem; }
.city-card__meta { font-size: .82rem; color: var(--ink-3); }
.province-chips { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.province-chips a { display: inline-block; padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink-2); text-decoration: none; font-size: .9rem; }
.province-chips a:hover { border-color: var(--brand); color: var(--brand-ink); }
.tool-tile__icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--radius); background: var(--brand-soft); color: var(--brand); }
.tool-tile__name { display: block; font-weight: 700; margin-bottom: 2px; }
.tool-tile__desc { display: block; font-size: .88rem; color: var(--ink-3); line-height: 1.5; }
.home-team__intro h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); margin: 0 0 12px; }
.home-team__intro p { color: var(--ink-2); }
.home-checks .icon { color: var(--brand); }
.home-team__people { display: grid; gap: 12px; }
.person-tile__name { display: block; font-weight: 700; }
.person-tile__role { display: block; font-size: .88rem; color: var(--brand-ink); }

/* Kêu gọi cuối trang */
.home-cta { margin: 64px 0 0; padding: 34px 32px; border-radius: var(--radius); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: linear-gradient(120deg, var(--brand-soft), #f0fdfa); border: 1px solid rgba(15,118,110,.18); }
.home-cta h2 { margin: 0 0 6px; font-size: 1.35rem; }
.home-cta p { margin: 0; color: var(--ink-2); text-align: left; }
.home-cta__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.home-cta .btn--ghost { background: var(--surface); }

@media (max-width: 600px) {
	.home-hero { padding: 40px 0 44px; }
	.home-section { padding-top: 44px; }
	.home-band { padding: 48px 0; margin-top: 44px; }
	.home-cta { padding: 24px 20px; margin-top: 44px; }
	.bank-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bank-tile { padding: 12px; }
}
.home-hero__title { max-width: 24ch; }
.home-features, .home-steps { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .home-features, .home-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .home-features, .home-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.home-hero__title, .home-head h2, .home-team__intro h2 { text-wrap: balance; }
.home-hero__title { max-width: none; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); }
.home-hero__title { text-wrap: wrap; }
.home-hero__title .l { display: block; }
.home-hero__title span.hl { display: block; background: linear-gradient(90deg, #5eead4, #a7f3d0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-hero__title span.l { background: none; color: #fff; -webkit-background-clip: border-box; background-clip: border-box; }
.city-cards { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .city-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .city-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =========================================================
   HERO v2: nền ngân hàng (navy + guilloche + mặt tiền) + bộ chọn tìm kiếm
   ========================================================= */
.home-hero { padding: 72px 0 40px; color: #dbe7ea;
	background:
		url("assets/bank-facade.svg") right 6% bottom -8px / 360px auto no-repeat,
		url("assets/hero-guilloche.svg") center / cover no-repeat,
		radial-gradient(900px 480px at 50% -20%, rgba(45,212,191,.18), transparent 65%),
		linear-gradient(180deg, #071b2b 0%, #0a2638 55%, #0b2a35 100%); }
.home-hero::after { display: none; }
.home-hero::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, #c8a96a 20%, #e9d29f 50%, #c8a96a 80%, transparent); opacity: .7; }
.home-hero__inner { position: relative; z-index: 1; text-align: center; max-width: 980px; }
.home-hero .eyebrow { margin-left: auto; margin-right: auto; }
.home-hero__title { color: #fff; font-size: clamp(1.7rem, 1rem + 2.9vw, 3.1rem); line-height: 1.15; letter-spacing: -.02em; margin: 0 auto 16px; white-space: nowrap; text-align: center; }
.home-hero__lead { margin: 0 auto 30px; max-width: 70ch; text-align: center; color: #b9cbd0; }
@media (max-width: 700px) { .home-hero__title { white-space: normal; } }

/* Bộ chọn: Ngân hàng | Tỉnh thành | Xã/phường | Tìm kiếm */
.finder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; background: #fff; border-radius: var(--radius); padding: 8px; box-shadow: 0 24px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06); text-align: left; }
.finder__field { display: flex; flex-direction: column; gap: 2px; padding: 8px 16px; min-width: 0; border-right: 1px solid var(--line); cursor: pointer; }
.finder__field:nth-child(3) { border-right: 0; }
.finder__label { display: flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); }
.finder select { appearance: none; -webkit-appearance: none; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.6'/%3E%3C/svg%3E") right 2px center no-repeat; padding: 4px 22px 4px 0; font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink); cursor: pointer; width: 100%; text-overflow: ellipsis; }
.finder select:focus { outline: none; }
.finder__field:focus-within { background: var(--bg); border-radius: var(--radius); }
.finder select:disabled { color: var(--ink-3); cursor: not-allowed; }
.finder__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: var(--radius); padding: 0 28px; font: inherit; font-weight: 700; font-size: 1.02rem; color: #fff; cursor: pointer; background: linear-gradient(135deg, #0f766e, #0d9488); box-shadow: 0 8px 20px rgba(13,148,136,.35); }
.finder__btn:hover { background: linear-gradient(135deg, #0b5952, #0f766e); }
.finder__hint { min-height: 1.4em; margin: 10px 0 0; color: #fca5a5; font-size: .9rem; text-align: center; }
@media (max-width: 860px) {
	.finder { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.finder__field { border-right: 0; border-bottom: 1px solid var(--line); }
	.finder__field:nth-child(3) { border-bottom: 0; }
	.finder__btn { padding: 14px; }
}

/* Số liệu trên 1 dòng */
.hero-stats { list-style: none; margin: 26px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 0; color: #9fb6bc; font-size: .95rem; }
.hero-stats li { padding: 0 22px; border-left: 1px solid rgba(255,255,255,.14); }
.hero-stats li:first-child { border-left: 0; }
.hero-stats b { color: #fff; font-size: 1.25rem; font-weight: 700; margin-right: 4px; font-variant-numeric: tabular-nums; }
.hero-stats__updated { display: inline-flex; align-items: center; gap: 6px; color: #5eead4 !important; }
@media (max-width: 600px) {
	.home-hero { padding: 44px 0 30px; background-size: 220px auto, cover, auto, auto; }
	.hero-stats li { padding: 0 12px; font-size: .88rem; }
	.hero-stats b { font-size: 1.05rem; }
	.hero-stats__updated { width: 100%; justify-content: center; border-left: 0 !important; }
}
.home-hero { background-position: right -30px bottom -6px, center, center, center; background-size: 420px auto, cover, auto, auto; }
@media (max-width: 1100px) { .home-hero { background-size: 300px auto, cover, auto, auto; background-position: right -60px bottom -6px, center, center, center; } }
@media (max-width: 1200px) { .home-hero { background-size: 0 0, cover, auto, auto; } }

/* Ô gõ-chọn (combobox) trong thanh tìm kiếm */
.finder__field { position: relative; cursor: text; }
.combo__input { border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2364748b' stroke-width='1.6'/%3E%3C/svg%3E") right 2px center no-repeat; padding: 4px 22px 4px 0; font: inherit; font-size: 1rem; font-weight: 600; color: var(--ink); width: 100%; text-overflow: ellipsis; }
.combo__input::placeholder { color: var(--ink-3); font-weight: 500; }
.combo__input:focus { outline: none; }
.combo__input:disabled { cursor: not-allowed; background-image: none; }
.combo__list { position: absolute; z-index: 20; top: calc(100% + 10px); left: 0; min-width: 100%; width: max-content; max-width: min(420px, 92vw); max-height: 340px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 50px rgba(2, 20, 30, .28); text-align: left; overscroll-behavior: contain; }
.combo__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 12px; border-radius: var(--radius); color: var(--ink); font-size: .96rem; cursor: pointer; }
.combo__list li small { color: var(--ink-3); font-size: .8rem; white-space: nowrap; }
.combo__list li:hover, .combo__list li.is-active { background: var(--brand-soft); color: var(--brand-ink); }
.combo__list li[aria-selected="true"] { font-weight: 700; }
.combo__list .combo__empty, .combo__list .combo__more { color: var(--ink-3); font-size: .85rem; cursor: default; background: none !important; }
@media (max-width: 860px) {
	.combo__list { left: -8px; right: -8px; width: auto; max-width: none; max-height: 46vh; }
}

/* Khung nhập rõ ràng cho 3 ô tìm kiếm */
.finder { gap: 10px; padding: 14px; align-items: end; }
.finder__field { border-right: 0 !important; border-bottom: 0 !important; padding: 0; gap: 6px; }
.finder__field:focus-within { background: none; }
.finder__label { padding-left: 2px; }
.combo__input { border: 1.5px solid #cbd5e1; border-radius: var(--radius); background-color: #f8fafc; padding: 12px 38px 12px 14px; background-position: right 14px center; min-height: 50px; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.combo__input:hover:not(:disabled) { border-color: #94a3b8; background-color: #fff; }
.combo__input:focus { border-color: var(--brand); background-color: #fff; box-shadow: 0 0 0 4px rgba(15, 118, 110, .14); }
.combo__input:disabled { background-color: #f1f5f9; border-style: dashed; color: var(--ink-3); }
.finder__btn { min-height: 50px; }
.combo__list { top: calc(100% + 6px); }
@media (max-width: 860px) {
	.finder { gap: 12px; padding: 14px; }
	.combo__list { left: 0; right: 0; }
	.finder__btn { padding: 14px; margin-top: 2px; }
}

/* Trang chủ: ô tìm kiếm gọn hơn + bo góc nhỏ hơn cho mọi khung */
.finder { padding: 10px; gap: 8px; border-radius: var(--radius); }
.finder__label { font-size: .7rem; }
.combo__input { min-height: 42px; padding: 8px 34px 8px 12px; font-size: .95rem; border-radius: var(--radius); background-position: right 12px center; border-width: 1px; }
.combo__input:focus { box-shadow: 0 0 0 3px rgba(15, 118, 110, .14); }
.finder__btn { min-height: 42px; padding: 0 22px; font-size: .95rem; border-radius: var(--radius); }
.combo__list { border-radius: var(--radius); }
.combo__list li { border-radius: var(--radius); }
.feature, .bank-tile, .step, .city-card, .home-cta { border-radius: var(--radius); }
.feature__icon, .step__icon, .city-card__icon, .tool-tile__icon { border-radius: var(--radius); }
.province-chips a { border-radius: var(--radius); }
.home-cta .btn, .home-head .btn { border-radius: var(--radius); }
@media (max-width: 860px) { .finder { padding: 12px; gap: 10px; } .finder__btn { padding: 11px; } }
/* 4 nhóm ngân hàng nhỏ: 2 cột x 2 hàng */
.bank-groups-2col { display: grid; gap: 0 32px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .bank-groups-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bank-groups-2col .bank-tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }

/* Ô tìm kiếm có nút bấm (công cụ đổi địa chỉ) */
.search-bar { display: flex; gap: 8px; align-items: stretch; }
.search-bar input { flex: 1; min-width: 0; }
.search-bar__btn { flex: none; padding: 0 22px; border-radius: var(--radius); justify-content: center; }
@media (max-width: 480px) { .search-bar__btn { padding: 0 14px; } .search-bar input { font-size: 1rem; padding: 12px 14px; } }

/* Bảng tổng đài: 1 bảng, cột ngân hàng ghim bên trái khi cuộn ngang */
.hotline-table { min-width: 760px; }
.hotline-table th[scope=row] { font-weight: 400; white-space: nowrap; }
.hotline-table td { white-space: nowrap; }
.hotline-table .hl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 2px 0; }
.hotline-table .tel { font-weight: 650; font-variant-numeric: tabular-nums; }
.hotline-table thead th { white-space: nowrap; }
.hotline-table tbody tr:hover > * { background: #f8fafc; }
.tag--alt { background: #eef2ff; color: #3730a3; }
.table-wrap--sticky { overflow-x: auto; }
.table-wrap--sticky th[scope=row], .table-wrap--sticky thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
.table-wrap--sticky thead th:first-child { background: var(--bg); z-index: 2; }
/* Điện thoại: mỗi ngân hàng một khối, số kèm nhãn, không cuộn ngang */
@media (max-width: 640px) {
	.hotline-table { min-width: 0; }
	.hotline-table thead { display: none; }
	.hotline-table, .hotline-table tbody, .hotline-table tr, .hotline-table th, .hotline-table td { display: block; width: 100%; }
	.hotline-table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
	.hotline-table tr:last-child { border-bottom: 0; }
	.hotline-table th[scope=row] { position: static; box-shadow: none; padding: 0 0 6px; border: 0; background: none; }
	.hotline-table td { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 5px 0; border: 0; white-space: normal; }
	.hotline-table td::before { content: attr(data-label); color: var(--ink-3); font-size: .82rem; padding-top: 2px; flex: none; }
	.hotline-table td.is-empty { display: none; }
	.hotline-table td .hl { justify-content: flex-end; }
	.hotline-table td > div:only-child, .hotline-table td { text-align: right; }
	.hotline-table tbody tr:hover > * { background: none; }
	.table-wrap--sticky { overflow-x: visible; }
}
@media (max-width: 640px) {
	.hotline-table td { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 4px; }
	.hotline-table td::before { grid-column: 1; grid-row: 1 / span 6; }
	.hotline-table td .hl { grid-column: 2; justify-content: flex-end; margin: 0; }
}

/* Bảng trong nội dung trang/bài viết */
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.4em; font-size: .95rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: block; overflow-x: auto; }
.prose table thead th { background: var(--bg); color: var(--ink-2); font-size: .85rem; }
.prose th, .prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose tr:last-child > td { border-bottom: 0; }
.prose td:first-child { font-weight: 600; color: var(--ink); }
/* Bảng nguồn: URL dạng văn bản, tự xuống dòng */
.prose .source-table td.src-text { font: .85rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-2); font-weight: 400; word-break: break-all; }
.prose .source-table td:first-child { white-space: nowrap; }

/* Danh sách ngân hàng dạng bảng */
.bank-table { min-width: 860px; }
.bank-table td, .bank-table th { vertical-align: middle; }
.bank-table thead th { white-space: nowrap; }
.bank-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bank-table td.num small { display: block; color: var(--ink-3); font-size: .78rem; }
.bank-table__no { width: 3em; color: var(--ink-3); text-align: center !important; }
.bank-table__logo { width: 52px; padding-right: 0 !important; }
.bank-table__logo a { display: inline-flex; }
.bank-table th[scope=row] { white-space: nowrap; font-weight: 650; }
.bank-table th[scope=row] a { color: var(--ink); text-decoration: none; }
.bank-table th[scope=row] a:hover { color: var(--brand); text-decoration: underline; }
.bank-table td[lang=en] { color: var(--ink-2); }
.bank-table tbody tr:hover > * { background: #f8fafc; }
@media (max-width: 720px) {
	.bank-table { min-width: 0; }
	.bank-table thead { display: none; }
	.bank-table, .bank-table tbody { display: block; }
	.bank-table tr { display: grid; grid-template-columns: 1.6em auto 1fr; column-gap: 12px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); }
	.bank-table tr:last-child { border-bottom: 0; }
	.bank-table td, .bank-table th { padding: 0 !important; border: 0; }
	.bank-table td[data-label] { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; padding: 4px 0 !important; text-align: right !important; white-space: normal; font-size: .9rem; }
	.bank-table td[data-label]::before { content: attr(data-label); color: var(--ink-3); font-size: .82rem; text-align: left; flex: none; }
	.bank-table td.num small { display: inline; margin-left: 6px; }
	.bank-table__logo { width: auto; }
	.bank-table tr > td:nth-child(4) { margin-top: 8px; }
}

/* Danh sách tỉnh thành dạng bảng (dùng chung kiểu .bank-table) */
.province-table { min-width: 820px; }
.province-table td[data-label="Hợp nhất từ"] { color: var(--ink-2); }
@media (max-width: 720px) {
	.province-table { min-width: 0; }
	.province-table tr { grid-template-columns: 1.6em 1fr; }
	.province-table tr > td:nth-child(3) { margin-top: 8px; }
	.province-table tr > td:nth-child(4) { margin-top: 0; }
}

/* Hàng tiêu đề bảng ngân hàng, tỉnh thành: nền đậm, chữ đen căn giữa */
.bank-table thead th, .bank-table thead th.num { background: #e2e8f0; color: #000; text-align: center; font-size: .9rem; font-weight: 650; }

/* Bảng mã SWIFT */
.swift-table { min-width: 760px; table-layout: fixed; }
.swift-table td, .swift-table th[scope=row] { vertical-align: middle; }
.swift-table .bank-inline { gap: 12px; }
.swift-table .bank-inline b { color: var(--ink); }
.swift-table td[lang=en] { color: var(--ink-2); font-size: .92rem; }
.swift-table__code, .swift-table__src, .swift-table thead th:nth-child(n+3) { text-align: center; }
.swift-code { display: inline-block; font-weight: 700; font-size: .95rem; letter-spacing: .08em; color: var(--brand-ink); background: var(--brand-soft); border: 1px dashed var(--brand); border-radius: var(--radius); padding: 4px 10px; font-variant-numeric: tabular-nums; transition: background .15s; }
.copy:hover .swift-code { background: #d3ebe7; border-style: solid; }
.swift-table__src .src { font-size: .88rem; color: var(--ink-3); white-space: nowrap; }
.swift-table tbody tr:nth-child(even) > * { background: #fbfcfd; }
@media (max-width: 720px) {
	.swift-table { min-width: 0; table-layout: auto; }
	.swift-table colgroup { display: none; }
	.swift-table tr { grid-template-columns: 1fr; }
	.swift-table tr > td:first-child { padding-bottom: 6px !important; }
	.swift-table td[data-label] { align-items: center; }
	.swift-table tbody tr:nth-child(even) > * { background: none; }
}

/* Ô tìm kiếm trang chủ cao thêm ~20% (86px -> 104px) */
.finder { padding: 14px; }
.combo__input { min-height: 51px; font-size: 1rem; }
.finder__btn { min-height: 51px; padding: 0 30px; }
@media (max-width: 860px) {
	.finder__btn { padding: 15px; }
}

/* Ô lọc ngân hàng trên trang tỉnh */
.bank-search { position: relative; margin: 8px 0 4px; }
.bank-search > svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.bank-search input { width: 100%; min-height: 52px; padding: 12px 16px 12px 46px; font-size: 1rem; border: 1.5px solid #cbd5e1; border-radius: var(--radius); background: #fff; }
.bank-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,118,110,.14); }
.bank-card[hidden] { display: none !important; }

/* ===== Trang chi tiết ngân hàng ===== */
.bank-hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin: 8px 0 8px; box-shadow: 0 1px 2px rgba(15,23,42,.04); }
.bank-hero__id { display: flex; gap: 20px; align-items: center; }
.bank-hero__logo { flex: none; width: 132px; height: 88px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 10px; }
.bank-hero__logo .badge { width: 100%; height: 100%; border: 0; background: none; }
.bank-hero__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.bank-hero h1 { margin: 0 0 4px; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.2; }
.bank-hero__legal { margin: 0; color: var(--ink-2); font-size: 1.02rem; }
.bank-hero__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.pill { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; color: var(--brand-ink); background: var(--brand-soft); border-radius: var(--radius); padding: 4px 10px; }
.bank-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 22px 0 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.bank-stats > div { padding: 14px 16px; border-right: 1px solid var(--line); background: #fbfcfd; min-width: 0; }
.bank-stats > div:last-child { border-right: 0; }
.bank-stats dt { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.bank-stats dd { margin: 0; font-size: 1.3rem; font-weight: 750; color: var(--ink); line-height: 1.2; }
.bank-stats dd small { display: block; font-size: .78rem; font-weight: 500; color: var(--ink-3); margin-top: 2px; }
.bank-stats .tel { color: var(--brand-ink); text-decoration: none; font-size: 1.15rem; white-space: nowrap; }
.bank-stats .swift-code { font-size: 1rem; }
.bank-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.bank-hero__actions .btn { padding: 10px 16px; border-radius: var(--radius); }
.info-item__icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius); background: var(--brand-soft); color: var(--brand); }
.info-item dd .src { margin-left: 8px; font-size: .8rem; color: var(--ink-3); }
.info-item details.license { margin-top: 4px; font-weight: 400; }
.hotline-card__tags { display: flex; gap: 4px; margin-top: 4px; }

.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.section-head p { margin: 0; }
.prov-region { margin-top: 18px; }
.prov-region .region { margin: 0 0 8px; }
.prov-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.prov-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: border-color .15s, background .15s; }
a.prov-item:hover { border-color: var(--brand); background: var(--brand-soft); }
.prov-item__name { font-weight: 600; }
.prov-item__n { font-size: .8rem; font-weight: 600; color: var(--brand-ink); background: var(--brand-soft); border-radius: var(--radius); padding: 2px 8px; white-space: nowrap; }
.prov-item.is-empty .prov-item__name { color: var(--ink-3); font-weight: 500; }
.prov-item.is-empty .prov-item__n { background: var(--bg); color: var(--ink-3); font-weight: 500; }
.prov-item[hidden], .prov-region[hidden] { display: none !important; }

@media (max-width: 860px) {
	.bank-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bank-stats > div:nth-child(2) { border-right: 0; }
	.bank-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
	.bank-hero { padding: 16px; }
	.bank-hero__id { flex-direction: column; align-items: flex-start; gap: 12px; }
	.bank-hero__logo { width: 112px; height: 72px; }
	.bank-hero__actions .btn { flex: 1 1 auto; justify-content: center; }
}
.bank-hero__logo { width: 156px; height: 92px; padding: 12px; }
.bank-hero__logo .logo-img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 640px) {
	.prov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
	.prov-item { flex-direction: column; align-items: flex-start; gap: 4px; padding: 9px 12px; }
}
.bank-hero__logo .logo-img { border: 0; padding: 0; background: none; border-radius: 0; }
.bank-hero__legal, .bank-hero p { text-align: left; }

/* Bảng thông tin ngân hàng: 2 cột nhãn (có icon) | giá trị */
.info-table th, .info-table td { vertical-align: middle; padding: 12px 18px; }
.info-table th[scope=row] { width: 260px; background: #f8fafc; border-right: 1px solid var(--line); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.info-table__label { display: flex; align-items: center; gap: 12px; }
.info-table .info-item__icon { width: 34px; height: 34px; border-radius: var(--radius); }
.info-table td { color: var(--ink); font-weight: 500; }
.info-table td small { display: block; color: var(--ink-3); font-size: .85rem; font-weight: 400; margin-top: 2px; }
.info-table td details.license { margin-top: 4px; font-weight: 400; }
.info-table tbody tr:hover > * { background: #fbfcfd; }
.info-table tbody tr:hover > th { background: #f1f5f9; }
@media (max-width: 640px) {
	.info-table, .info-table tbody, .info-table tr, .info-table th, .info-table td { display: block; width: 100% !important; }
	.info-table tr { padding: 12px 14px; border-bottom: 1px solid var(--line); }
	.info-table tr:last-child { border-bottom: 0; }
	.info-table th[scope=row] { background: none !important; border: 0; padding: 0 0 6px; font-size: .85rem; color: var(--ink-3); }
	.info-table .info-item__icon { width: 28px; height: 28px; }
	.info-table td { border: 0; padding: 0 0 0 40px; }
}
.info-table .hl { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 2px 0; }
.info-table .hl .tel { font-weight: 700; color: var(--brand-ink); text-decoration: none; font-variant-numeric: tabular-nums; min-width: 8.5em; }
.info-table .hl .muted { font-size: .88rem; font-weight: 400; }

/* Khung đầu trang ngân hàng: nền ngân hàng giống hero trang chủ (navy + guilloche + mặt tiền) */
.bank-hero { position: relative; overflow: hidden; color: #dbe7ea; border: 0; border-radius: var(--radius); padding: 28px;
	background:
		url("assets/bank-facade.svg") right 3% bottom -10px / 300px auto no-repeat,
		url("assets/hero-guilloche.svg") center / cover no-repeat,
		radial-gradient(700px 360px at 85% -30%, rgba(45,212,191,.22), transparent 65%),
		linear-gradient(160deg, #071b2b 0%, #0a2638 55%, #0b2f3a 100%);
	box-shadow: 0 18px 40px rgba(7,27,43,.22); }
.bank-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, transparent, #c8a96a 20%, #e9d29f 50%, #c8a96a 80%, transparent); opacity: .8; }
.bank-hero > * { position: relative; z-index: 1; }
.bank-hero h1 { color: #fff; }
.bank-hero__legal { color: #b6cbd2; }
.bank-hero__logo { border: 0; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.bank-hero .pill { background: rgba(255,255,255,.08); color: #e2efe9; border: 1px solid rgba(255,255,255,.14); }
.bank-hero .pill .icon { color: #e9d29f; }
.bank-stats { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.04); backdrop-filter: blur(4px); }
.bank-stats > div { background: transparent; border-color: rgba(255,255,255,.12) !important; }
.bank-stats dt { color: #9fb8c0; }
.bank-stats dd { color: #fff; }
.bank-stats dd small { color: #9fb8c0; }
.bank-stats .tel { color: #5eead4; }
.bank-stats .swift-code { color: #ccfbf1; background: rgba(45,212,191,.12); border-color: rgba(94,234,212,.6); }
.bank-stats .copy:hover .swift-code { background: rgba(45,212,191,.22); }
.bank-hero__actions .btn { background: linear-gradient(135deg, #0f766e, #0d9488); box-shadow: 0 8px 20px rgba(13,148,136,.3); }
.bank-hero__actions .btn--ghost { background: rgba(255,255,255,.06); color: #e2efe9; border: 1px solid rgba(255,255,255,.22); box-shadow: none; }
.bank-hero__actions .btn--ghost:hover { background: rgba(255,255,255,.14); }
@media (max-width: 640px) {
	.bank-hero { padding: 18px; background-size: 180px auto, cover, auto, auto; }
}

/* Mobile: thu lề hai bên để nội dung rộng hơn trên màn hình nhỏ */
@media (max-width: 640px) {
	.wrap { padding: 0 10px; }
	.bank-hero { padding: 14px; border-radius: var(--radius); }
	.bank-stats > div { padding: 12px; }
	.info-table tr { padding: 10px 12px; }
	.table th, .table td { padding: 8px 10px; }
	.bank-table tr { padding: 10px 12px; }
	.hotline-table tr { padding: 10px 12px; }
	.callout, .note { padding-left: 12px; padding-right: 12px; }
}
@media (max-width: 360px) {
	.wrap { padding: 0 8px; }
}
@media (max-width: 640px) {
	.feature, .step { padding: 16px 14px; }
	.home-cta { padding: 16px 14px; }
	.city-card { padding: 14px 12px; }
	.box, .calc-form, .calc-result, .qr-form, .qr-card { padding: 14px 12px; }
}

/* Chi nhánh theo tỉnh: "BIDV Hà Nội: 35 điểm", 4 cột, số điểm dạng chữ thường */
.prov-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.prov-item { justify-content: flex-start; gap: 0; flex-wrap: wrap; padding: 11px 14px; }
.prov-item__n { background: none !important; padding: 0; border-radius: 0; font-weight: 500; color: var(--ink-2); font-size: .95rem; }
.prov-item.is-empty .prov-item__n { color: var(--ink-3); }
@media (max-width: 960px) { .prov-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .prov-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
	.prov-item { flex-direction: row; align-items: baseline; gap: 0; padding: 9px 10px; }
	.prov-item__name, .prov-item__n { font-size: .9rem; }
}

/* ===== Trang ngân hàng × tỉnh ===== */
.intro { margin: 18px 0 4px; max-width: none !important; }
.intro p { margin: 0; color: var(--ink-2); }
.branch-group h2 .muted { font-weight: 500; font-size: .8em; }
.branch-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.branch-card { display: flex; flex-direction: column; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; transition: border-color .15s, box-shadow .15s; scroll-margin-top: 80px; }
.branch-card:hover { border-color: #b7d9d3; box-shadow: 0 4px 14px rgba(15,23,42,.06); }
.branch-card:target { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,118,110,.14); }
.branch-card[hidden], .branch-group[hidden] { display: none !important; }
/* Trang nhiều điểm (chi nhánh/ATM): trình duyệt chỉ vẽ phần đang ở trong màn hình, phần ngoài tầm nhìn để dành (vẫn có đủ trong HTML để Google đọc và để tìm trong trang). contain-intrinsic-size giữ chỗ để thanh cuộn không giật; từ khoá auto nhớ chiều cao thật sau lần vẽ đầu. */
.branch-card, .atm-item { content-visibility: auto; contain-intrinsic-size: auto 132px; }
.branch-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.branch-card__head h3 { margin: 0; font-size: 1.02rem; line-height: 1.35; }
.branch-card__head .tag { flex: none; white-space: nowrap; margin-top: 2px; }
.branch-card__addr { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--ink); font-size: .95rem; text-align: left; }
.branch-card__addr > .icon { flex: none; color: var(--brand); margin-top: 3px; }
.branch-card__addr small { display: block; color: var(--ink-3); font-size: .84rem; margin-top: 2px; }
.branch-card__addr a { color: var(--brand-ink); font-weight: 600; text-decoration: none; }
.branch-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); font-size: .85rem; color: var(--ink-3); }
.branch-card__code { display: inline-flex; align-items: center; gap: 8px; }
.branch-card__code .swift-code { font-size: .85rem; padding: 2px 8px; }
.branch-card__map { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--brand-ink); text-decoration: none; padding: 5px 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.branch-card__map:hover { border-color: var(--brand); background: var(--brand-soft); }
.link-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.link-grid a { padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink-2); font-size: .93rem; }
.link-grid a b { color: var(--ink); font-weight: 600; }
.link-grid a:hover { border-color: var(--brand); background: var(--brand-soft); }
@media (max-width: 960px) { .link-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
	.branch-grid { grid-template-columns: minmax(0, 1fr); }
	.link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.branch-card { padding: 12px; }
	.link-grid a { padding: 9px 10px; font-size: .88rem; }
}

/* Breadcrumb: chữ đậm, rõ hơn; cách header và nội dung bên dưới bằng nhau (14px) */
.wrap.page { padding-top: 0; }
.crumbs { padding: 14px 0; }
.crumbs ol { margin: 0; font-size: .92rem; font-weight: 500; color: var(--ink-2); gap: 6px; }
.crumbs li + li::before { margin-right: 6px; color: var(--ink-3); }
.crumbs a { color: var(--brand-ink); font-weight: 600; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.crumbs + * { margin-top: 0 !important; }
@media (max-width: 640px) { .crumbs { padding: 12px 0; } .crumbs ol { font-size: .88rem; } }

/* Logo trong khung đầu trang cao đúng bằng khối chữ bên cạnh (H1 + tên + nhãn) */
@media (min-width: 641px) {
	.bank-hero__id { align-items: stretch; }
	.bank-hero__logo { height: auto; width: 210px; align-self: stretch; min-height: 92px; padding: 14px 18px; }
	.bank-hero__id > div:last-child { display: flex; flex-direction: column; justify-content: center; }
	.bank-hero__tags { margin-bottom: 0; }
}
/* Mép trên logo ngang đỉnh chữ hoa của H1 (bù khoảng trống line-height ≈ 0.26em cỡ chữ H1) */
@media (min-width: 641px) {
	.bank-hero__logo { margin-top: calc(clamp(1.4rem, 2.6vw, 2rem) * 0.26); }
}

/* Link trong bảng, khung: màu thương hiệu + gạch chân mảnh để nhận ra là link */
.bank-table th[scope=row] a,
.swift-table .bank-inline b, .hotline-table .bank-inline b,
a.prov-item .prov-item__name,
.link-grid a b,
.bank-card .bank-card__name, .place-card__name, .city-card__name {
	color: var(--brand); text-decoration: underline; text-decoration-color: rgba(15,118,110,.35); text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.bank-table th[scope=row] a:hover,
.swift-table .bank-inline:hover b, .hotline-table .bank-inline:hover b,
a.prov-item:hover .prov-item__name,
.link-grid a:hover b,
.bank-card:hover .bank-card__name, .city-card:hover .city-card__name {
	color: var(--brand-ink); text-decoration-color: currentColor;
}

/* ===== Hồ sơ thành viên (post type Đội ngũ) — 1 cột, không sidebar ===== */
.person-hero__id { display: flex; gap: 22px; align-items: center; }
.person-hero .person-photo--lg { width: 128px; height: 128px; border: 3px solid rgba(255,255,255,.85); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.person-hero__role { margin: 0 0 6px; color: #5eead4; font-weight: 600; text-align: left; }
.person-hero .bank-hero__legal { max-width: 760px; }
.person-bio { max-width: none !important; }
.person-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 26px 0; }
.person-card-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; min-width: 0; }
.person-card-box h2 { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; margin: 0 0 14px; }
.person-card-box h2 .icon { flex: none; width: 34px; height: 34px; padding: 7px; border-radius: var(--radius); background: var(--brand-soft); color: var(--brand); box-sizing: border-box; }
.person-card-box .timeline, .person-card-box .cred-list, .person-card-box .check-list { margin-bottom: 0; }
.person-card-box .chips--list { margin: 0; }
.person-card-box .more { display: inline-block; margin-top: 10px; }

/* Trang Đội ngũ biên tập */
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 8px 0 0; }
.team-card { display: flex; gap: 18px; align-items: flex-start; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.team-card:hover { border-color: var(--brand); box-shadow: 0 6px 18px rgba(15,23,42,.07); }
.team-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.team-card__name { font-weight: 700; font-size: 1.15rem; color: var(--brand); text-decoration: underline; text-decoration-color: rgba(15,118,110,.35); text-underline-offset: 3px; }
.team-card__role { color: var(--brand-ink); font-weight: 600; font-size: .92rem; }
.team-card__bio { color: var(--ink-2); font-size: .92rem; }
.team-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.team-card__more { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-weight: 600; font-size: .9rem; color: var(--brand-ink); }
@media (max-width: 760px) {
	.person-cols, .team-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
	.person-hero__id { flex-direction: column; align-items: flex-start; gap: 12px; }
	.person-hero .person-photo--lg { width: 96px; height: 96px; }
	.person-card-box { padding: 14px 12px; }
	.team-card { padding: 14px 12px; gap: 12px; }
	.team-card .person-photo--md { width: 64px; height: 64px; }
}

/* Hồ sơ thành viên: khung đầu nền sáng (không dùng nền ngân hàng), không có dải số liệu */
.person-hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; margin: 0 0 8px; }
.person-hero .person-photo--lg { border: 0; box-shadow: none; }
.person-hero h1 { margin: 0 0 4px; color: var(--ink); }
.person-hero__role { color: var(--brand); }
.person-hero__bio { margin: 0; color: var(--ink-2); max-width: 820px; text-align: left; }
.person-hero__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.person-hero__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line); }
.person-hero__actions .btn { padding: 9px 14px; }
@media (max-width: 640px) { .person-hero { padding: 16px 12px; } }
.page-404__title { margin-top: 28px; }

/* Mục lục: chỉ đánh số mục H2, mục H3 dùng gạch đầu dòng (không làm lệch số) */
.toc ol { list-style: none; padding-left: 0; counter-reset: toc; }
.toc li { margin: 3px 0; }
.toc__l2 { counter-increment: toc; }
.toc__l2::before { content: counter(toc) ". "; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.toc li.toc__l3 { margin-left: 22px; list-style: none; }

/* Bảng trong bài viết: luôn trải đủ chiều ngang (display:block làm thân bảng co lại, hở bên phải).
   Bo góc dùng border-collapse: separate. Chỉ cho cuộn ngang trên màn hình nhỏ. */
.prose table { display: table; width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; }
@media (max-width: 640px) {
	.prose table { display: block; overflow-x: auto; }
	.prose table > thead, .prose table > tbody { display: table; width: 100%; }
}

/* Bài viết: trải hết chiều ngang khung nội dung, không chừa khoảng trống bên phải (không có sidebar) */
.article, .wrap.page .article .prose, .article .toc { max-width: none; }
/* Mục lục nằm trong thân bài (sau sapo): khoảng cách trên/dưới, không thừa kiểu danh sách của .prose */
.article__body .toc { margin: 18px 0 26px; }
.article__body .toc ol { padding-left: 0; margin: 0; }
.article__body .toc li { margin: 4px 0; }
.article__body .toc__title { margin: 0 0 8px; }

/* Dòng thông tin dưới H1 bài viết: Tác giả | Đăng ngày | Cập nhật — 1 dòng, có icon */
.byline--meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 10px 0 0; font-size: .92rem; color: var(--ink-2); }
.byline--meta > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.byline--meta .icon { color: var(--brand); flex: none; }
.byline--meta a { color: var(--brand); font-weight: 600; }
.byline__sep { color: var(--line); }
@media (max-width: 640px) { .byline--meta { font-size: .85rem; gap: 4px 8px; } }

/* Bài viết + trang tĩnh: vùng nội dung (breadcrumb → trước footer) rộng 950px, căn giữa.
   Header, footer giữ khung --wrap. */
.wrap.wrap--narrow { max-width: calc(950px + 32px); }
.wrap.wrap--narrow .prose, .wrap.wrap--narrow .article { max-width: none; }
@media (max-width: 640px) { .wrap.wrap--narrow { max-width: none; } }

/* ===== Danh sách bài viết kiểu báo (/huong-dan/, chuyên mục) ===== */
.feed-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.feed-cats__item { padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink-2); text-decoration: none; font-size: .88rem; font-weight: 500; }
.feed-cats__item:hover { border-color: var(--brand); color: var(--brand-ink); }
.feed-cats__item.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }

.post-cover { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); background: var(--bg); }
.post-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.post-cover--auto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #fff; text-align: center; padding: 16px;
	background-image: radial-gradient(circle at 85% 15%, rgba(255,255,255,.16), transparent 45%), repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 14px); }
.post-cover--auto .icon { width: 44px; height: 44px; opacity: .95; }
.post-cover__label { font-weight: 650; font-size: .95rem; letter-spacing: .01em; opacity: .95; }
.post-cover--t0 { background-color: #0f766e; } .post-cover--t1 { background-color: #1e3a5f; } .post-cover--t2 { background-color: #7c2d12; }
.post-cover--t3 { background-color: #3f3f8f; } .post-cover--t4 { background-color: #14532d; } .post-cover--t5 { background-color: #6b2148; }
a:hover > .post-cover img { transform: scale(1.03); }

.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .8rem; color: var(--ink-3); margin-bottom: 6px; }
.post-meta__cat { color: var(--brand); font-weight: 650; text-transform: uppercase; letter-spacing: .04em; font-size: .74rem; }
.feed-lead a, .feed-card a, .feed-row a { color: var(--ink); text-decoration: none; }
.feed-lead__title a:hover, .feed-card__title a:hover, .feed-row__title a:hover { color: var(--brand-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.feed-lead { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 28px; align-items: start; padding: 8px 0 28px; border-bottom: 1px solid var(--line); }
.feed-lead .post-cover { aspect-ratio: 16 / 10; }
.feed-lead .post-cover--auto .icon { width: 64px; height: 64px; }
.feed-lead__title { font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.25; margin: 0 0 14px; }
.feed-lead__sapo { color: var(--ink-2); font-size: 1.05rem; line-height: 1.6; margin: 0; text-align: left; }

.feed-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line); }
.feed-card .post-cover { margin-bottom: 12px; }
.feed-card__title { font-size: 1.1rem; line-height: 1.4; margin: 0; }

.feed-list { padding-top: 8px; }
.feed-row { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; align-items: start; padding: 24px 0; border-bottom: 1px dashed var(--line); }
.feed-row__title { font-size: 1.15rem; line-height: 1.4; margin: 0 0 8px; }
.feed-row__sapo { color: var(--ink-2); margin: 0; line-height: 1.6; text-align: left; }

.wrap.page .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 28px 0 8px; }
.wrap.page .nav-links .page-numbers { min-width: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); text-align: center; text-decoration: none; color: var(--ink-2); background: var(--surface); }
.wrap.page .nav-links .page-numbers.current { background: var(--brand); border-color: var(--brand); color: #fff; }

@media (max-width: 860px) {
	.feed-lead { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.feed-trio { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.feed-row { grid-template-columns: 220px minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 560px) {
	.feed-trio { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.feed-row { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 16px 0; }
	.feed-row .post-cover { aspect-ratio: 1 / 1; }
	.feed-row .post-cover--auto .post-cover__label { display: none; }
	.feed-row .post-cover--auto .icon { width: 32px; height: 32px; }
	.feed-row__title { font-size: 1rem; }
	.feed-row__sapo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .9rem; }
}
@media (max-width: 560px) {
	.feed-lead .post-cover { aspect-ratio: 16 / 9; }
	.feed-trio { gap: 0; padding: 8px 0; }
	.feed-card { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; padding: 14px 0; border-bottom: 1px dashed var(--line); }
	.feed-card:last-child { border-bottom: 0; }
	.feed-card__media { grid-row: 1 / span 2; }
	.feed-card .post-cover { margin: 0; aspect-ratio: 1 / 1; }
	.feed-card .post-cover--auto .post-cover__label { display: none; }
	.feed-card .post-cover--auto .icon { width: 32px; height: 32px; }
	.feed-card__title { font-size: 1rem; }
}

/* Tiêu đề bài viết & trang tĩnh: bớt đậm (700 -> 600), H2 +3px (20 -> 23px), H3 +2px (16,8 -> ~19px) */
h1, h2, h3 { font-weight: 500; }

/* ===== Bài viết liên quan ===== */
.related { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.related h2 { margin-bottom: 18px; }
.related__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; }
.related .feed-card__title { font-size: 1rem; line-height: 1.4; }
@media (max-width: 760px) { .related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .related__grid { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* ===== Bình luận ===== */
.comments { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.comments__count { color: var(--ink-3); font-weight: 500; }
.comment-list, .comment-list .children { list-style: none; margin: 0; padding: 0; }
.comment-list > li { border-bottom: 1px solid var(--line); }
.comment-list .children { margin-left: 52px; border-left: 2px solid var(--brand-soft); padding-left: 16px; }
.cmt { display: flex; gap: 14px; padding: 16px 0; }
.comment__avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #e2e8f0; color: var(--ink-2); font-weight: 600; }
.comment__avatar--staff { background: var(--brand); color: #fff; }
.comment__body { min-width: 0; flex: 1; }
.comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 4px; }
.comment__name a { color: var(--ink); text-decoration: none; }
.comment__badge { font-size: .72rem; font-weight: 600; color: var(--brand-ink); background: var(--brand-soft); border-radius: var(--radius); padding: 1px 8px; }
.comment__time { font-size: .8rem; color: var(--ink-3); }
.comment__pending { margin: 0 0 4px; font-size: .85rem; color: #b45309; }
.comment__text p { margin: 0 0 6px; text-align: left; }
.comment__reply { margin: 2px 0 0; }
.comment__reply a { font-size: .85rem; font-weight: 600; color: var(--brand-ink); text-decoration: none; }
.comment__reply a:hover { text-decoration: underline; }

.comment-respond { margin-top: 22px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.comment-list .comment-respond { margin: 4px 0 16px 52px; }
.comment-reply-title { font-size: 1.1rem; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.comment-reply-title small a { font-size: .85rem; font-weight: 500; color: var(--ink-3); }
.comment-notes { font-size: .85rem; color: var(--ink-3); margin: 0 0 14px; text-align: left; }
.comment-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.comment-form p { margin: 0 0 12px; }
.comment-form label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 5px; color: var(--ink-2); }
.comment-form .req { color: #dc2626; }
.comment-form input[type=text], .comment-form input[type=email], .comment-form textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 10px 12px; border: 1px solid #cbd5e1; border-radius: var(--radius); background: #fff; color: var(--ink); }
.comment-form textarea { resize: vertical; min-height: 120px; }
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(15,118,110,.14); }
.comment-form .form-submit { margin: 4px 0 0; }
.comment-submit { cursor: pointer; padding: 11px 22px; }
@media (max-width: 560px) {
	.comment-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.comment-list .children { margin-left: 20px; padding-left: 12px; }
	.comment-list .comment-respond { margin-left: 0; }
	.comment-respond { padding: 14px 12px; }
}

/* Văn bản trải đủ chiều rộng khung nội dung trên mọi trang (bỏ giới hạn 70ch/72ch/760px gây hở bên phải).
   Giữ nguyên phần căn giữa ở đầu trang chủ (.home-hero). */
.lead, .hero__lead, .prose, .wrap.page .prose, .person-hero__bio, .person-hero .bank-hero__legal { max-width: none; }

/* FAQ dạng đóng/mở (trang công cụ) */
.faq { display: grid; gap: 12px; margin: 16px 0 24px; }
.faq__item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface, #fff); }
.faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 16px 18px; font-weight: 600; color: var(--ink); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before { content: "+"; flex: 0 0 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; font-weight: 400; font-size: 1.125rem; line-height: 1; color: var(--ink-3); }
.faq__item summary::after { content: ""; margin-left: auto; flex: 0 0 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.faq__item[open] summary::before { content: "−"; }
.faq__item[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq__item summary:hover { color: var(--brand-ink); }
.faq__a { padding: 0 18px 16px 60px; }
.faq__a > :first-child { margin-top: 0; }
.faq__a > :last-child { margin-bottom: 0; }
@media (max-width: 640px) { .faq__item summary { padding: 14px; gap: 10px; } .faq__a { padding: 0 14px 14px; } }

/* Tìm … gần bạn (template-parts/nearby.php) */
.nearby { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin: 24px 0; }
.nearby__head { display: flex; gap: 14px; align-items: flex-start; }
.nearby__head h2 { margin: 0 0 4px; }
.nearby__head p { margin: 0; color: var(--ink-2); }
.nearby__icon { flex: 0 0 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.nearby__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 16px; }
.nearby__or { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font-size: .92rem; }
.nearby__or select { min-height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font: inherit; color: var(--ink); max-width: 260px; }
.nearby__status { margin: 16px 0 0; font-weight: 600; color: var(--ink); }
.nearby__list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.nearby__item { display: flex; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.nearby__dist { flex: 0 0 78px; text-align: center; color: var(--brand-ink); }
.nearby__dist b { display: block; font-size: 1.05rem; }
.nearby__dist small { display: block; font-size: .7rem; color: var(--ink-3); line-height: 1.3; }
.nearby__body { min-width: 0; }
.nearby__body h3 { margin: 0 0 2px; font-size: 1rem; }
.nearby__body h3 .tag { vertical-align: middle; font-weight: 400; }
.nearby__body p { margin: 0; color: var(--ink-2); font-size: .94rem; }
.nearby__links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px !important; }
.nearby__links a { font-weight: 600; }
.nearby__note { margin: 14px 0 0; font-size: .82rem; color: var(--ink-3); }
@media (max-width: 640px) {
	.nearby { padding: 16px 14px; }
	.nearby__or { flex-wrap: wrap; width: 100%; }
	.nearby__or select { max-width: none; width: 100%; }
	.nearby__actions .btn { width: 100%; justify-content: center; }
	.nearby__item { padding: 10px; gap: 10px; }
	.nearby__dist { flex-basis: 62px; }
}

/* Giờ làm việc (bgd_hours_html) */
.hours-box { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.hours-box__icon { flex: 0 0 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.hours-box p { margin: 0; }
.hours-box__title { font-weight: 600; }
.hours-box small, .info-table td small { display: block; color: var(--ink-3); font-size: .82rem; margin-top: 2px; }
.nearby__types { display: inline-flex; margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.nearby__types label { display: flex; align-items: center; gap: 6px; padding: 8px 14px; cursor: pointer; font-size: .92rem; font-weight: 600; color: var(--ink-2); }
.nearby__types label + label { border-left: 1px solid var(--line); }
.nearby__types input { position: absolute; opacity: 0; pointer-events: none; }
.nearby__types label:has(input:checked) { background: var(--brand-soft); color: var(--brand-ink); }
.nearby__types label:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: -2px; }

/* ATM trên trang ngân hàng × tỉnh */
.atm-grid { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.atm-item { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 10px 12px; }
.atm-item p { margin: 0; }
.atm-item__name { font-weight: 600; }
.atm-item__name .tag { font-weight: 400; vertical-align: middle; }
.atm-item__addr { color: var(--ink-2); font-size: .92rem; }
.atm-item__addr small { color: var(--ink-3); }
.atm-item__map { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: .9rem; font-weight: 600; }
@media (max-width: 640px) { .atm-grid { grid-template-columns: 1fr; } }
.nearby__hours { font-size: .86rem !important; color: var(--ink-3) !important; }

/* Mạng xã hội ở footer (Footer Settings → Cột 1) */
.site-footer__social { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.site-footer__social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #e2e8f0; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .16); transition: background .15s, color .15s; }
.site-footer__social a:hover, .site-footer__social a:focus-visible { background: #5eead4; color: #0f172a; border-color: #5eead4; }

/* Trang tỉnh: xã, phường mới theo quận, huyện cũ */
.od-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.od-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; }
.od-card__head { margin: 0 0 6px; }
.od-card__head .muted { font-size: .85rem; }
.od-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.od-card__list a { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); font-size: .9rem; text-decoration: none; }
.od-card__list a:hover { background: var(--brand); color: #fff; }
.od-card__old { margin-top: 8px; font-size: .85rem; color: var(--ink-3); }
.od-card__old summary { cursor: pointer; }
.od-card__old p { margin: 4px 0 0; }
@media (max-width: 900px) { .od-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .od-grid { grid-template-columns: 1fr; } }

/* Trang ngân hàng × tỉnh: tỉnh khác theo 3 miền, mỗi miền một khung */
.region-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.region-links__box { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 14px 18px; }
.region-links__box h3 { margin: 0 0 8px; font-size: 1rem; }
.region-links__box ul { list-style: none; margin: 0; padding: 0; }
.region-links__box li { padding: 4px 0; }
@media (max-width: 900px) { .region-links { grid-template-columns: 1fr; } }

/* Trang tìm kiếm */
.search-results { list-style: none; margin: 0; padding: 0; }
.search-results li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.search-results p { margin: 4px 0 0; font-size: .92rem; }

/* Bài giới thiệu ngân hàng (trang /ngan-hang/{slug}/) */
.bank-profile { margin-top: 8px; }
.bank-profile h3 { margin-top: 1.4em; }
.bank-profile__sources { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .88rem; color: var(--ink-2); }
.bank-profile__label { margin: 0 0 6px; font-weight: 600; color: var(--ink); }
.bank-profile__sources ol { margin: 0; padding-left: 20px; }
.bank-profile__sources li { margin: 2px 0; }

/* Chữ in đậm trong nội dung (bài viết, trang, bài giới thiệu ngân hàng): nhẹ hơn mặc định 700 */
.prose strong, .prose b { font-weight: 500; }

.atm-fold > summary { cursor: pointer; font-weight: 600; color: var(--brand-ink); margin: 6px 0 14px; }