:root {
  color-scheme: light;
  --vnb-navy: #102A43;
  --vnb-navy-hover: #173F5E;
  --vnb-cyan: #00C8F0;
  --vnb-cyan-hover: #00B5DA;
  --vnb-background: #F4F8FC;
  --vnb-surface: #FFFFFF;
  --vnb-border: #D9E2EC;
  --vnb-muted: #526579;
  --vnb-success: #16803C;
  --vnb-error: #C62828;
  --vnb-navy-soft: #EAF1F7;
  --vnb-cyan-soft: #E6F9FD;
  --vnb-success-soft: #EDF8F0;
  --vnb-error-soft: #FDF0F0;
  --vnb-warning: #835F1C;
  --vnb-warning-soft: #FFF8E7;
  --bs-primary: #102A43;
  --bs-primary-rgb: 16,42,67;
  --bs-success: #16803C;
  --bs-success-rgb: 22,128,60;
  --bs-danger: #C62828;
  --bs-danger-rgb: 198,40,40;
  --bs-body-color: #102A43;
  --bs-body-bg: #F4F8FC;
  --bs-border-color: #D9E2EC;
  --bs-link-color: #102A43;
  --bs-link-color-rgb: 16,42,67;
  --bs-link-hover-color: #173F5E;
  --bs-link-hover-color-rgb: 23,63,94;
  --ink: #102A43;
  --ink-muted: #526579;
  --line: #D9E2EC;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { min-width: 320px; color: var(--ink); background: #f5f8fc; font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
svg { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.page-shell { overflow: clip; min-height: 100vh; position: relative; }
.page-shell::before { content: ""; position: absolute; z-index: -1; top: 90px; right: -200px; width: 530px; height: 580px; pointer-events: none; border-radius: 50%; background: radial-gradient(ellipse, rgb(44 139 221 / 12%), transparent 67%); }
.site-header { padding-top: 30px; padding-bottom: 16px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: #0d1b32; font-size: 21px; font-weight: 800; letter-spacing: -.7px; text-decoration: none; }
.brand:hover { color: #0d1b32; }
.brand-icon { display: grid; place-items: center; width: 40px; height: 40px; padding: 8px; color: #fff; border-radius: 12px; background: #103e78; box-shadow: 0 6px 17px rgb(21 69 143 / 16%); }
.brand-icon svg { width: 24px; height: 24px; }
.brand-light { color: #1b66cb; }
.header-badge { display: inline-flex; align-items: center; gap: 10px; padding: 10px 15px; color: #237b67; border: 1px solid #dbeee6; background: #f1fbf7; border-radius: 999px; font-size: 12px; font-weight: 680; white-space: nowrap; }
.live-dot { display: inline-block; width: 8px; height: 8px; background: #08b98f; border-radius: 50%; box-shadow: 0 0 0 4px #daf7e9; }
.intro { max-width: 820px; margin: 35px auto 38px; text-align: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px; color: #177b87; font-size: 11px; font-weight: 800; letter-spacing: 2px; }
.eyebrow-line { display: inline-block; width: 25px; height: 2px; background: #08a68c; border-radius: 2px; }
.intro h1 { max-width: 800px; margin: 0 auto; font-size: clamp(32px, 4vw, 49px); line-height: 1.17; letter-spacing: -1.9px; font-weight: 800; }
.intro h1 span { color: #176bce; }
.intro p { max-width: 625px; margin: 15px auto 0; color: var(--ink-muted); font-size: 15px; line-height: 1.8; }
/* Bootstrap's grid controls column sizing and spacing. */
.panel.card { min-width: 0; border: 1px solid var(--line); border-radius: 21px; background: #fff; box-shadow: 0 15px 45px rgb(22 41 70 / 5%), 0 2px 5px rgb(19 38 71 / 3%); }
.form-panel { padding: 30px 32px; }
.preview-panel { padding: 27px 27px 24px; }
.panel-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.panel-heading-compact { gap: 12px; margin-bottom: 20px; }
.heading-icon { display: grid; place-items: center; width: 45px; height: 45px; flex-shrink: 0; color: #235ed7; background: #eaf0ff; border-radius: 13px; }
.heading-icon svg { width: 23px; height: 23px; }
.heading-icon-mint { color: #008e78; background: #e5f8f2; }
.section-overline { margin: 0 0 3px; color: #8090a8; font-size: 10px; font-weight: 800; letter-spacing: 1.3px; }
.panel-heading h2 { margin: 0; color: var(--ink); font-size: 20px; font-weight: 770; letter-spacing: -.5px; }
.field .form-label { color: #273951; font-size: 13px; margin-bottom: 9px; }
.field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.optional-tag, .counter { color: #8694a8; font-size: 11px; }
.counter { font-variant-numeric: tabular-nums; }
.counter.over, .required { color: #d34c60; }
.field .form-control { min-height: 49px; border-color: #dbe4ef; color: #17263d; font-size: 14px; font-weight: 520; }
.field input::placeholder { color: #9daabc; opacity: 1; font-weight: 430; }
.field .form-control:focus { border-color: #5790e7; box-shadow: 0 0 0 .22rem rgb(58 119 222 / 12%); }
.field .form-control.is-invalid { border-color: #d35b65; background-image: none; }
.field .form-control.is-invalid:focus { box-shadow: 0 0 0 .22rem rgb(211 91 101 / 12%); }
.field .form-control:not(.bank-input), .amount-wrap .input-group-text { border-radius: 10px; }
.amount-wrap .form-control { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.amount-wrap .input-group-text { border-top-left-radius: 0; border-bottom-left-radius: 0; border-color: #dbe4ef; background: #f8fafd; color: #607289; font-size: 12px; font-weight: 750; }
.field .form-text { margin: 7px 1px 0; color: #8694a7; font-size: 11px; line-height: 1.55; }
.field-error { margin: 6px 1px 0; font-size: 12px; line-height: 1.5; }
.field-error:empty { display: none; }
.bank-freshness { margin: 7px 0 0; font-size: 11px; color: #986a19; line-height: 1.5; }
.form-notice { padding: 12px 14px; margin-bottom: 16px; font-size: 12px; }
/* One accessible Bootstrap 5 input-group acts as the AJAX combobox. */
.bank-combobox { z-index: 3; }
.bank-combobox .input-group { flex-wrap: nowrap; }
.bank-input-icon { border-color: #dbe4ef; border-right: 0; border-radius: 10px 0 0 10px; color: #8496aa; }
.bank-input-icon svg { width: 18px; height: 18px; }
.bank-combobox .form-control.bank-input { min-width: 0; padding-left: 4px; border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
.bank-combobox .form-control.bank-input:focus { border-color: #dbe4ef; box-shadow: none; }
.bank-combobox .bank-toggle { display: grid; place-items: center; padding: 0 13px; border-color: #dbe4ef; border-radius: 0 10px 10px 0; background: #fff; color: #627b96; }
.bank-combobox .bank-toggle:hover, .bank-combobox .bank-toggle:focus-visible { color: #1b5dc2; background: #f3f7ff; box-shadow: none; }
.bank-toggle svg { width: 16px; height: 16px; transition: transform .15s; }
.bank-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.bank-combobox:focus-within .bank-input-icon,
.bank-combobox:focus-within .bank-toggle,
.bank-combobox:focus-within .bank-input { border-color: #5790e7 !important; }
.bank-combobox:has(.is-invalid) .bank-input-icon,
.bank-combobox:has(.is-invalid) .bank-toggle { border-color: #d35b65 !important; }
.bank-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1100; max-height: 340px; overflow-y: auto; padding: 6px; border: 1px solid #dce7f3; border-radius: 12px; background: #fff; box-shadow: 0 17px 38px rgb(20 44 82 / 14%) !important; }
.bank-option.dropdown-item { white-space: normal; border-radius: 8px; color: #1b2e47; }
.bank-option:hover, .bank-option.active { color: #173a6e; background: #eaf2ff; }
.bank-option[aria-selected="true"] { background: #f2f9f7; }
.bank-option-avatar { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 9px; background: #eaf3ff; color: #1b66bb; font-size: 12px; font-weight: 800; }
.bank-option-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.bank-option-copy strong, .bank-option-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bank-option-copy small { font-size: 11px; }
.bank-option-bin { color: #60758e !important; font-size: 11px; letter-spacing: .2px; }
.button.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; border-radius: 11px; padding: 11px 14px; font-size: 13px; font-weight: 740; transition: background .16s, border-color .16s, transform .16s; }
.button.btn:active:not(:disabled) { transform: translateY(1px); }
.button.btn svg { width: 18px; height: 18px; }
.button.btn-primary { --bs-btn-bg: #1d5bcf; --bs-btn-border-color: #1d5bcf; --bs-btn-hover-bg: #104dbc; --bs-btn-hover-border-color: #104dbc; --bs-btn-active-bg: #104dbc; box-shadow: 0 6px 15px rgb(32 91 218 / 15%); }
.button-primary .arrow-right { margin-left: auto; width: 17px; }
.form-footnote { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 13px 0 0; color: #8a99ad; font-size: 11px; line-height: 1.5; text-align: center; }
.form-footnote svg { width: 14px; height: 14px; }
.preview-header { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.preview-header .heading-icon { width: 42px; height: 42px; }
.preview-header .panel-heading h2 { font-size: 18px; }
.status-tag { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border: 1px solid #e4eaf2; border-radius: 999px; background: #f7f8fb; color: #8491a3; font-size: 11px; font-weight: 690; white-space: nowrap; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #a6b1c0; }
.status-ready { color: #007962; border-color: #cdeee2; background: #e9faf3; }
.status-ready .status-dot { background: #0bbf8b; }
.status-error { color: #a04a34; border-color: #f6e1d4; background: #fff7ee; }
.status-error .status-dot { background: #e49a62; }
.qr-stage { padding: 25px 25px 18px; border: 1px solid #e6f0f1; border-radius: 18px; background: radial-gradient(ellipse at top left, #ecf8f9, transparent 50%), linear-gradient(145deg, #f7fcfd, #eef5fd); text-align: center; }
.qr-paper { display: grid; place-items: center; aspect-ratio: 1; max-width: 440px; margin: 0 auto; padding: 15px; border: 1px solid #e9eff5; border-radius: 14px; background: #fff; box-shadow: 0 12px 28px rgb(32 69 109 / 6%); }
#qrCanvas { width: 100%; height: auto; aspect-ratio: 1; border-radius: 4px; }
.qr-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: #9dabbf; }
.placeholder-icon { display: grid; place-items: center; width: clamp(86px, 13vw, 135px); height: clamp(86px, 13vw, 135px); margin: -7px 0 9px; padding: 10px; border: 1px dashed #dbe7f0; border-radius: 26px; background: #fafcff; }
.placeholder-icon svg { width: 100%; height: 100%; color: #c3d5e6; }
.qr-placeholder strong { color: #62758d; font-size: 14px; }
.qr-placeholder > span { max-width: 210px; font-size: 11px; line-height: 1.5; }
.qr-provider-mark { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 18px; color: #3d7889; font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.mark-divider { width: 4px; height: 4px; border-radius: 50%; background: #a3c2ca; }
.result-details { margin-top: 18px; padding: 16px 18px 6px; border: 1px solid #e8edf3; border-radius: 13px; }
.result-bank { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 9px; border-bottom: 1px dashed #e6edf3; }
.bank-avatar { display: grid; place-items: center; flex: 0 0 41px; width: 41px; height: 41px; color: #1267bf; background: #eaf3fc; border-radius: 11px; font-size: 14px; font-weight: 800; }
.result-bank-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.result-label { color: #8b98ab; font-size: 10px; }
.result-bank-copy strong { overflow-wrap: anywhere; font-size: 13px; }
.result-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; font-size: 12px; }
.result-row > span { color: #7b89a0; flex-shrink: 0; }
.result-row > strong { max-width: 65%; overflow-wrap: anywhere; font-weight: 730; text-align: right; }
.result-value { display: inline-flex; align-items: center; gap: 7px; }
.result-value strong { overflow-wrap: anywhere; font-size: 13px; text-align: right; }
.result-amount { color: #137b6a; }
.icon-button { display: grid; place-items: center; padding: 5px; border: 1px solid #e8edf4; color: #6d839e; }
.icon-button svg { width: 14px; height: 14px; }
.preview-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 17px; }
.button-secondary.btn-outline-primary { --bs-btn-color: #27628f; --bs-btn-border-color: #deebfb; --bs-btn-hover-color: #1c5d9d; --bs-btn-hover-bg: #dfeeff; --bs-btn-hover-border-color: #d0e0f6; background: #eef6ff; }
.preview-actions .btn:disabled { color: #a5b2c1; border-color: #e9edf3; background: #f4f6fa; box-shadow: none; }
.preview-notice { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; color: #8896a8; font-size: 11px; line-height: 1.6; }
.preview-notice svg { width: 17px; height: 17px; margin-top: 1px; color: #93a5b8; }
.benefits { margin-top: 25px; margin-bottom: 45px; }
.benefit { display: flex; align-items: center; gap: 12px; padding: 17px 18px; border: 1px solid #e6ebf2; border-radius: 13px; background: rgb(255 255 255 / 80%); }
.benefit-icon { display: grid; place-items: center; flex: 0 0 39px; width: 39px; height: 39px; border-radius: 11px; background: #e8f4fb; color: #317cbe; }
.benefit-icon svg { width: 21px; height: 21px; }
.benefits .col-md-4:nth-child(2) .benefit-icon { color: #4a6ed1; background: #eff3ff; }
.benefits .col-md-4:nth-child(3) .benefit-icon { color: #148d6d; background: #eaf9f0; }
.benefit > span:last-child { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.benefit strong { color: #263b56; font-size: 12px; }
.benefit small { color: #8794a8; font-size: 11px; line-height: 1.5; }
.site-footer { padding-bottom: 25px; color: #8d9aaa; font-size: 11px; }
.app-toast { position: fixed; z-index: 1200; bottom: 24px; right: 24px; max-width: min(360px, calc(100vw - 48px)); padding: 13px 17px; color: #fff; background: #152940; border-radius: 12px; font-size: 12px; font-weight: 650; line-height: 1.5; box-shadow: 0 15px 30px rgb(14 30 53 / 25%); }
.app-toast.toast-error { background: #933e42; }
@media (max-width: 1199.98px) { .panel.card { max-width: 830px; margin-inline: auto; } }
@media (max-width: 767.98px) {
  .site-header { padding-top: 20px; }
  .brand { font-size: 17px; gap: 9px; }
  .brand-icon { width: 35px; height: 35px; }
  .header-badge { padding: 12px; font-size: 0; gap: 0; }
  .intro { margin: 30px auto 28px; }
  .eyebrow { margin-bottom: 12px; font-size: 10px; letter-spacing: 1.4px; }
  .intro h1 { font-size: clamp(30px, 8.4vw, 38px); letter-spacing: -1.3px; }
  .intro p { margin-top: 13px; font-size: 13px; line-height: 1.7; }
  .panel.card { border-radius: 17px; }
  .form-panel, .preview-panel { padding: 22px 18px; }
  .panel-heading { margin-bottom: 22px; }
  .panel-heading h2 { font-size: 18px; }
  .heading-icon { width: 42px; height: 42px; }
  .preview-header .panel-heading { margin-bottom: 17px; }
  .status-tag { padding: 7px 8px; font-size: 10px; }
  .qr-stage { padding: 20px 17px 15px; }
  .qr-paper { padding: 12px; }
  .placeholder-icon { width: 96px; height: 96px; }
  .qr-provider-mark { margin-top: 16px; }
  .result-details { padding: 15px 13px 5px; }
  .preview-actions { gap: 8px; }
  .preview-actions .button { gap: 5px; min-height: 46px; padding: 10px 6px; font-size: 12px; }
  .preview-actions .button svg { width: 16px; height: 16px; }
  .benefits { margin-top: 19px; margin-bottom: 25px; }
  .benefit { padding: 13px; }
  .site-footer { flex-direction: column; text-align: center; font-size: 10px; }
  .bank-option-copy small { max-width: min(48vw, 260px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* =====================================================
   vietnam-bank.com — shared design system for both pages
   ===================================================== */
body { background: #f8fafc; color: #1e293b; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.font-mono, code, kbd { font-family: 'JetBrains Mono', monospace; }
.page-shell { display: flex; flex-direction: column; min-height: 100vh; overflow: visible; }
.page-shell::before { display: none; }
.site-nav { background: #0f172a; min-height: 74px; box-shadow: 0 5px 22px rgb(8 18 40 / 14%); z-index: 1050; }
.site-nav .navbar-brand { margin-right: 2rem; }
.site-brand { letter-spacing: -.4px; text-decoration: none; }
.site-brand-mark { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px; color: white; background: linear-gradient(135deg,#3b82f6,#1d4ed8); box-shadow: 0 6px 16px rgb(17 74 183 / 28%); }
.site-brand-mark i { font-size: 21px; }
.site-brand-copy { display: flex; flex-direction: column; line-height: 1.3; }
.site-brand-copy strong { color: #fff; font-size: 19px; font-weight: 800; letter-spacing: -.75px; }
.site-brand-copy strong span { color: #93c5fd; }
.site-brand-copy small { margin-top: 1px; color: #9aacc7; font-size: 8px; letter-spacing: 1.15px; font-weight: 700; }
.site-nav .nav-link { color: #bdcbe2; border-radius: 9px; padding: 10px 14px !important; font-size: 13px; font-weight: 650; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus-visible { color: #fff; background: rgb(255 255 255 / 8%); }
.site-nav .nav-link.active { background: rgb(59 130 246 / 17%); color: #fff; }
.site-nav .nav-language .btn { font-size: 11px; font-weight: 750; border-color: #465872; }
.site-nav .nav-language .btn-primary { border-color: #2563eb; }
.site-hero { position: relative; overflow: hidden; padding: 57px 0 65px; color: #fff; border-bottom: 1px solid #263e65; background: radial-gradient(ellipse 60% 100% at 78% 1%, rgb(37 99 235 / 21%), transparent 75%), linear-gradient(150deg,#0f172a,#1e293b); }
.site-hero::after { content: ''; position: absolute; inset: auto -40px -130px auto; width: 300px; height: 300px; background: radial-gradient(circle, rgb(59 130 246 / 12%), transparent 75%); pointer-events: none; }
.hero-inner { position: relative; z-index: 1; }
.hero-kicker { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; margin-bottom: 20px; border: 1px solid rgb(147 197 253 / 25%); border-radius: 50rem; background: rgb(37 99 235 / 20%); color: #a7d5ff; font-size: 10px; letter-spacing: 1px; font-weight: 800; }
.hero-kicker i { font-size: 12px; color: #fcd34d; }
.hero-title { max-width: 800px; margin: 0 auto 15px; font-size: clamp(29px, 4.2vw, 46px); line-height: 1.23; letter-spacing: -1.4px; font-weight: 800; }
.hero-lead { max-width: 750px; margin: 0 auto; color: #c3d0e3; font-size: clamp(13px,1.5vw,16px); line-height: 1.8; }
.hero-search { max-width: 720px; margin-top: 30px; }
.hero-search .form-control { height: 62px; padding: 13px 50px 13px 57px; background: white; border: 0; border-radius: 13px; box-shadow: 0 12px 32px rgb(4 12 29 / 26%); color: #1e293b; font-size: 15px; }
.hero-search .form-control::placeholder { color: #93a0b4; }
.hero-search .form-control:focus { box-shadow: 0 0 0 4px rgb(147 197 253 / 24%), 0 12px 32px rgb(4 12 29 / 26%); }
.hero-search-icon { position: absolute; left: 20px; top: 19px; color: #64748b; z-index: 2; }
.hero-search-icon i { font-size: 19px; }
.hero-search kbd { position: absolute; right: 20px; top: 19px; border-radius: 6px; border: 1px solid #e2e8f0; background: #f8fafc; color: #64748b; font-size: 12px; padding: 3px 7px; }
.hero-bottom { margin-top: 19px; }
.hero-bottom-label { color: #a7b8d1; font-size: 11px; }
.hero-bottom-label i { color: #fbbf24; }
.hero-chip { padding: 5px 12px; color: #c7d4e5; font-size: 11px; font-weight: 600; background: transparent; border: 1px solid rgb(203 213 225 / 24%); border-radius: 50rem; }
.hero-chip:hover, .hero-chip:focus-visible { background: rgb(255 255 255 / 13%); border-color: rgb(203 213 225 / 50%); color: #fff; }
.hero-trust { color: #c4d7ec; font-size: 12px; padding: 4px 11px; border: 1px solid rgb(203 213 225 / 20%); border-radius: 50rem; }
.hero-trust i { color: #86efac; }
.site-hero-qr { padding: 43px 0 47px; }
.site-hero-qr .hero-title { max-width: 740px; }
.site-hero-qr .hero-lead { max-width: 660px; }
.site-footer-shared { margin-top: auto; background: #fff; border-top: 1px solid #e2e8f0; padding: 23px 0; color: #64748b; font-size: 11px; line-height: 1.6; }
.site-footer-shared strong { color: #334155; }
.directory-content { padding-top: 30px; padding-bottom: 70px; flex: 1; }
.directory-toolbar { padding: 24px 26px; border-radius: 18px; margin-bottom: 26px; }
.directory-toolbar h2 { color: #17243a; font-size: 19px; }
.directory-toolbar .form-select { width: auto; min-width: 160px; color: #475569; border-color: #e2e8f0; padding: 7px 32px 7px 10px; font-size: 12px; }
.filter-pill { border-radius: 50rem; padding: 7px 14px; font-size: 12px; font-weight: 650; transition: background .15s; }
.filter-pill.btn-outline-secondary { color: #64748b; border-color: #e2e8f0; background: #f8fafc; }
.filter-pill.btn-outline-secondary:hover { background: #e8effe; color: #1e40af; border-color: #bfd3ff; }
.filter-count { font-size: 10px; opacity: .7; padding-left: 3px; }
.bank-directory-card { border: 1px solid #e5eaf2; border-radius: 15px; box-shadow: 0 2px 9px rgb(15 23 42 / 3%); transition: border-color .2s, box-shadow .2s, transform .2s; }
.bank-directory-card:hover { border-color: #bed0ec; box-shadow: 0 12px 28px rgb(15 23 42 / 8%); transform: translateY(-2px); }
.bank-list-avatar { display: inline-flex; flex: 0 0 34px; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid #d7e5f7; border-radius: 9px; background: #eef5ff; }
.bank-row-avatar { width: 32px; height: 32px; flex-basis: 32px; border-radius: 8px; }
.bank-logo-img { display: block; width: 24px; height: 24px; object-fit: contain; }
.bank-card-names { min-width: 0; flex: 1 1 auto; }
.bank-card-meta { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 3px; }
.bank-card-meta .bank-small-code { flex: 0 0 auto; }
.bank-card-meta .bank-type-badge { display: block; flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font-size: 9px; }
.bank-card-names h3 { color: #1e293b; font-size: 15px; overflow-wrap: anywhere; }
.bank-small-code { font-size: 10px; color: #64748b; letter-spacing: .5px; }
.bank-popular-star { color: #e9ac3b; font-size: 16px; }
.bank-fullname { flex: 1; min-height: 48px; color: #64748b; font-size: 12px; line-height: 1.65; }
.bank-type-badge { color: #30547f; background: #eaf2fd; border: 1px solid #d8e8ff; font-size: 10px; max-width: 195px; white-space: normal; text-align: left; line-height: 1.3; font-weight: 700; }
.bank-actions { border-top: 1px solid #eaeff5; }
.bank-actions .btn, .directory-table-card .btn { font-size: 11px; font-weight: 700; border-radius: 8px; }
.bank-actions .btn-outline-primary { border-color: #d8e4fa; }
.directory-table-card { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 14px; }
.directory-table-card th { padding: 15px 20px; background: #f6f9fc; border-color: #e8edf4; color: #64748b; font-size: 11px; font-weight: 800; }
.directory-table-card td { padding: 12px 20px; border-color: #f0f3f8; font-size: 12px; }
.bank-skeleton { height: 265px; border-radius: 15px; border: 1px solid #e2e8f0; background: linear-gradient(110deg,#edf2f7 30%,#fff 48%,#edf2f7 68%); background-size: 200% 100%; animation: vnbShimmer 1.6s linear infinite; }
@keyframes vnbShimmer { to { background-position: -200% 0; } }
.empty-state { background: #fff; border: 1px dashed #cad5e5; border-radius: 14px; padding: 55px 20px; }
.bank-detail-modal { border-radius: 17px; overflow: hidden; border: 0; }
.detail-modal-header { background: #0f172a; color: white; padding: 20px 24px; border: 0; }
.detail-modal-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: #2563eb; color: white; font-size: 21px; }
.detail-freshness { border: 1px solid #ffedd5; border-radius: 9px; padding: 9px 13px; background: #fffbeb; color: #92400e; }
.detail-field { padding: 14px 15px; background: #f8fafc; border: 1px solid #e9eef6; border-radius: 10px; }
.detail-field-label { font-size: 11px; color: #64748b; margin-bottom: 7px; }
.detail-field-value { font-size: 13px; color: #1e293b; font-weight: 700; overflow-wrap: anywhere; }
.detail-field-value[href]:hover { color: #2563eb; }
.qr-content { padding-top: 38px; flex: 1; }
.qr-content .panel.card { border-radius: 18px; }
.qr-content .form-panel { border-top: 3px solid #2563eb; }
.qr-content .preview-panel { border-top: 3px solid #0d9488; }
.qr-content .field .form-control:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgb(37 99 235 / 12%); }
.qr-content .button.btn-primary { --bs-btn-bg: #2563eb; --bs-btn-border-color: #2563eb; --bs-btn-hover-bg: #1d4ed8; --bs-btn-hover-border-color: #1d4ed8; }
.qr-content .bank-option-avatar { background: #eaf2ff; color: #1d4ed8; }
.qr-content .qr-provider-mark { color: #1e40af; }
.qr-content .benefit { box-shadow: 0 2px 9px rgb(15 23 42 / 3%); }
@media (max-width:991.98px) {
  .site-nav .nav-language { margin: 12px 14px 15px; }
  .site-nav .nav-link { margin: 2px 0; }
}
@media (max-width:767.98px) {
  .site-nav { min-height: 65px; }
  .site-brand-copy strong { font-size: 17px; }
  .site-brand-copy small { font-size: 7px; letter-spacing: .8px; }
  .site-brand-mark { width: 36px; height: 36px; flex-basis: 36px; }
  .site-hero { padding: 38px 0 43px; }
  .site-hero-qr { padding: 35px 0 37px; }
  .hero-kicker { font-size: 9px; letter-spacing: .5px; }
  .hero-title { font-size: clamp(27px, 7.3vw, 37px); }
  .hero-search { margin-top: 24px; }
  .hero-search .form-control { height: 56px; padding-left: 47px; font-size: 13px; }
  .hero-search-icon { left: 17px; top: 15px; }
  .directory-toolbar { padding: 19px 16px; }
  .directory-toolbar .form-select { min-width: 125px; }
  .bank-directory-card .card-body { padding: 19px !important; }
  .directory-content { padding-top: 21px; padding-bottom: 35px; }
  .site-footer-shared { text-align: center; font-size: 10px; }
  .qr-content { padding-top: 24px; }
}
@media (prefers-reduced-motion:reduce) {
 .bank-skeleton { animation: none; }
 .bank-directory-card { transition: none; }
}

/* Helpful crawlable fallback cards are replaced by the interactive view after API load. */
.seo-guide { padding: 24px 28px; background: #fff; border: 1px solid #e5eaf2; border-radius: 16px; color: #475569; }
.seo-guide h2 { font-size: 1.12rem; color: #152641; font-weight: 800; margin-bottom: 12px; }
.seo-guide p { font-size: .91rem; line-height: 1.7; margin-bottom: 10px; }
.seo-guide p:last-child { margin-bottom: 0; }
.seo-steps { font-size: .91rem; line-height: 1.8; padding-left: 1.35rem; }
.seo-guide a { color: #1d4ed8; }
@media (max-width: 767.98px) { .seo-guide { padding: 20px; } }

/* First-party embed.v1.js integration guide on the VietQR page. */
.hero-embed-link { margin-top: 24px; }
.hero-embed-link .btn { border-radius: 11px; border-color: rgb(191 219 254 / 52%); padding: 10px 18px; font-size: 13px; font-weight: 750; }
.hero-embed-link .btn:hover { color: #12366e; }
.embed-guide { scroll-margin-top: 90px; }
.embed-guide-shell { overflow: hidden; border: 1px solid #dce6f4; background: #fff; border-radius: 20px; box-shadow: 0 12px 35px rgb(15 35 66 / 5%); }
.embed-guide-top { display: flex; justify-content: space-between; align-items: center; gap: 26px; padding: 38px 42px; color: #fff; background: radial-gradient(circle at 88% 30%,rgb(55 119 227 / 28%),transparent 40%),linear-gradient(130deg,#111e35,#213c66); }
.embed-guide-intro { flex: 1; max-width: 820px; }
.embed-eyebrow { display: inline-flex; align-items: center; color: #1d5caa; font-size: 10px; letter-spacing: 1.4px; font-weight: 800; text-transform: uppercase; }
.embed-guide-top .embed-eyebrow { color: #a9d5ff; }
.embed-guide-top h2 { margin: 12px 0; max-width: 710px; font-size: clamp(26px, 3.3vw, 39px); letter-spacing: -1.2px; line-height: 1.23; font-weight: 800; }
.embed-guide-top p { max-width: 730px; margin: 0; font-size: 13px; line-height: 1.8; color: #c9d8ed; }
.embed-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.embed-chips span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid rgb(191 219 254 / 22%); border-radius: 99px; background: rgb(255 255 255 / 6%); color: #e3eefc; font-size: 11px; font-weight: 700; }
.embed-chips i { color: #86efac; }
.embed-motif { flex: 0 0 216px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 187px; gap: 10px; border: 1px solid rgb(191 219 254 / 24%); border-radius: 16px; background: rgb(191 219 254 / 6%); }
.embed-motif-icon { display: grid; place-items: center; width: 68px; height: 68px; color: #cfe8ff; background: rgb(96 165 250 / 14%); border-radius: 17px; }
.embed-motif-icon i { font-size: 39px; }
.embed-motif code { color: #e9f4ff; font-size: 15px; font-weight: 700; }
.embed-motif small { color: #a6bddc; font-size: 11px; }
.embed-doc-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; padding: 14px 42px; border-bottom: 1px solid #e5ecf4; background: #f6f9fe; }
.embed-doc-nav a { border-radius: 8px; padding: 8px 13px; color: #315678; text-decoration: none; font-size: 12px; font-weight: 700; }
.embed-doc-nav a:hover, .embed-doc-nav a:focus-visible { background: #e8f0fe; color: #184c9d; }
.embed-doc-body { padding: 7px 42px 13px; }
.embed-section { padding: 33px 0 34px; border-bottom: 1px solid #e7ecf5; scroll-margin-top: 82px; }
.embed-last-section { border-bottom: 0; }
.embed-section-heading { margin-bottom: 24px; }
.embed-section-heading h3 { font-size: clamp(19px,2.2vw,23px); font-weight: 800; letter-spacing: -.5px; color: #172942; margin: 8px 0 6px; }
.embed-section-heading p { margin: 0; max-width: 780px; font-size: 13px; line-height: 1.75; color: #60748b; }
.embed-step-list { margin: 0; padding: 0; counter-reset: vnbEmbedStep; list-style: none; }
.embed-step-list li { position: relative; counter-increment: vnbEmbedStep; padding: 1px 0 21px 47px; min-height: 60px; }
.embed-step-list li::before { content: counter(vnbEmbedStep); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: #eaf3ff; color: #1c57a8; font-size: 12px; font-weight: 800; }
.embed-step-list li:not(:last-child)::after { content: ''; position: absolute; top: 37px; bottom: 6px; left: 15px; border-left: 1px dashed #bed3ed; }
.embed-step-list b { font-size: 13px; color: #253956; font-weight: 800; }
.embed-step-list p { color: #627690; font-size: 12px; line-height: 1.7; margin: 5px 0 0; }
.embed-code-stack { display: grid; gap: 12px; }
.embed-code-panel { border-radius: 13px; overflow: hidden; background: #111e31; border: 1px solid #2b3d56; }
.embed-code-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; color: #c8d8e9; background: #20324d; font-size: 11px; font-weight: 750; }
.embed-copy-btn { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid #587292; background: #2f496b; color: #fff; font-size: 11px; font-weight: 700; border-radius: 7px; padding: 7px 11px; }
.embed-copy-btn:hover, .embed-copy-btn:focus-visible { background: #446a9c; border-color: #85a7d4; color: #fff; }
.embed-code-panel pre { margin: 0; padding: 19px; max-height: 370px; color: #d3e8ff; font-size: 12px; line-height: 1.8; font-family: "JetBrains Mono",monospace; overflow: auto; white-space: pre; word-break: normal; tab-size: 2; }
.embed-code-panel pre code { font: inherit; color: inherit; }
.embed-sample-notice { margin: 12px 0 0; padding: 10px 12px; border: 1px solid #fde5af; border-radius: 9px; background: #fffbef; color: #825a12; font-size: 11px; line-height: 1.7; }
.embed-optional-block { padding-top: 30px; }
.embed-optional-block .embed-section-heading { margin-bottom: 13px; }
.embed-table-wrap { border: 1px solid #e3eaf4; border-radius: 13px; }
.embed-parameter-table { min-width: 650px; }
.embed-parameter-table th { padding: 13px 17px; font-size: 11px; font-weight: 750; color: #4a617e; background: #f3f7fc; border-color: #e5ecf4; }
.embed-parameter-table td { padding: 14px 17px; color: #526782; font-size: 12px; line-height: 1.7; border-color: #ebf0f5; vertical-align: middle; }
.embed-parameter-table tbody tr:last-child td, .embed-parameter-table tbody tr:last-child th { border-bottom: 0; }
.embed-parameter-table tbody th { padding: 14px 17px; vertical-align: middle; background: #fff; border-color: #ebf0f5; }
.embed-parameter-table code { font-size: 12px; font-weight: 700; color: #1d4ed8; }
.embed-pill { white-space: nowrap; display: inline-block; padding: 3px 8px; border-radius: 6px; font-size: 10px; background: #f1f5f9; color: #6b7b90; font-weight: 700; }
.embed-pill-required { color: #1d4ed8; background: #e8f0ff; }
.embed-inline-tip { margin: 13px 0 0; color: #55728b; font-size: 12px; line-height: 1.7; }
.embed-info-card { background: #f8fafc; border: 1px solid #e3eaf4; border-radius: 12px; padding: 19px; }
.embed-info-card h4 { font-size: 14px; font-weight: 800; color: #243b5a; margin-bottom: 10px; }
.embed-info-card p { margin: 0 0 9px; color: #40556f; line-height: 1.7; font-size: 12px; }
.embed-info-card p code { color: #14549b; overflow-wrap: anywhere; }
.embed-info-card small { font-size: 11px; line-height: 1.65; color: #6b7b90; }
.embed-faq-list { display: grid; gap: 9px; }
.embed-faq-item { border: 1px solid #e3eaf4; border-radius: 10px; background: #fff; }
.embed-faq-item summary { padding: 13px 17px; cursor: pointer; font-size: 13px; color: #263d5c; font-weight: 750; }
.embed-faq-item[open] { border-color: #bfd5f7; background: #fafcff; }
.embed-faq-item summary:focus-visible { outline: 3px solid #9ec5fe; outline-offset: 2px; }
.embed-faq-item p { font-size: 12px; line-height: 1.8; margin: 0; color: #61758d; padding: 0 17px 16px; }
.embed-doc-footer { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 20px; }
.embed-doc-footer .btn { font-size: 12px; font-weight: 750; border-radius: 9px; }
.embed-doc-footer span { color: #71839a; font-size: 11px; line-height: 1.7; }
@media(max-width:991.98px) {
  .embed-guide-top { padding: 29px; }
  .embed-motif { flex-basis: 165px; min-height: 160px; }
  .embed-doc-nav { padding: 12px 26px; }
  .embed-doc-body { padding: 4px 26px 10px; }
}
@media(max-width:767.98px) {
  .hero-embed-link .btn { font-size: 12px; }
  .embed-guide-shell { border-radius: 14px; }
  .embed-guide-top { display: block; padding: 25px 22px; }
  .embed-guide-top h2 { letter-spacing: -.65px; }
  .embed-chips { gap: 6px; }
  .embed-chips span { font-size: 10px; }
  .embed-motif { display: none; }
  .embed-doc-nav { padding: 10px 15px; gap: 3px; }
  .embed-doc-nav a { padding: 7px 9px; font-size: 11px; }
  .embed-doc-body { padding: 0 18px; }
  .embed-section { padding: 26px 0 28px; }
  .embed-code-panel pre { padding: 15px; font-size: 11px; }
  .embed-code-toolbar { padding: 10px 12px; }
}


/* ===============================================================
   vietnam-bank.com / Navy + Cyan design tokens (October 2026)
   Navy = trust, titles, finance values and secondary navigation.
   Cyan = intentional payment/QR CTA with NAVY labels (WCAG AAA).
   Green/red strictly express success/error; soft tints are derived.
   =============================================================== */
body, .page-shell { color: var(--vnb-navy); background: var(--vnb-background); }
.text-secondary, .text-muted { color: var(--vnb-muted) !important; }
a { color: var(--vnb-navy); }
a:hover { color: var(--vnb-navy-hover); }
a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--vnb-navy); outline-offset: 3px;
}
.card, .panel.card, .directory-toolbar, .bank-directory-card, .directory-table-card,
.bank-detail-modal, .embed-guide-shell, .seo-guide, .embed-info-card,
.embed-faq-item, .qr-paper, .result-details, .benefit { border-color: var(--vnb-border); }
.card, .panel.card, .bank-directory-card, .directory-toolbar, .qr-paper,
.embed-guide-shell, .embed-faq-item, .empty-state { background-color: var(--vnb-surface); }

/* Bootstrap buttons: cyan actions must NEVER have white text. */
.btn-primary, .button.btn-primary, .qr-content .button.btn-primary,
.button-download.btn-primary, .vnb-btn-cta.btn-primary {
  --bs-btn-color: var(--vnb-navy);
  --bs-btn-bg: var(--vnb-cyan);
  --bs-btn-border-color: var(--vnb-cyan);
  --bs-btn-hover-color: var(--vnb-navy);
  --bs-btn-hover-bg: var(--vnb-cyan-hover);
  --bs-btn-hover-border-color: var(--vnb-cyan-hover);
  --bs-btn-focus-shadow-rgb: 16,42,67;
  --bs-btn-active-color: var(--vnb-navy);
  --bs-btn-active-bg: var(--vnb-cyan-hover);
  --bs-btn-active-border-color: var(--vnb-navy);
  --bs-btn-disabled-color: #526579;
  --bs-btn-disabled-bg: #E5EDF2;
  --bs-btn-disabled-border-color: var(--vnb-border);
  color: var(--bs-btn-color);
}
.button.btn-primary, .qr-content .button.btn-primary { box-shadow: 0 6px 15px rgb(16 42 67 / 9%); }
.btn-outline-primary, .button-secondary.btn-outline-primary, .vnb-btn-detail.btn-outline-primary {
  --bs-btn-color: var(--vnb-navy);
  --bs-btn-border-color: var(--vnb-navy);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: var(--vnb-navy);
  --bs-btn-hover-border-color: var(--vnb-navy);
  --bs-btn-active-bg: var(--vnb-navy);
  --bs-btn-active-border-color: var(--vnb-navy);
  --bs-btn-active-color: #FFFFFF;
  background: transparent;
}
.btn-outline-primary:hover, .button-secondary.btn-outline-primary:hover { color: #FFFFFF; }
.button-secondary.btn-outline-primary { background: #FFFFFF; }
.btn-success {
  --bs-btn-bg: var(--vnb-success); --bs-btn-border-color: var(--vnb-success);
  --bs-btn-hover-bg: #116B31; --bs-btn-hover-border-color: #116B31;
}
.btn-outline-secondary { --bs-btn-color: var(--vnb-muted); --bs-btn-border-color: var(--vnb-border); }
.btn-outline-secondary:hover { --bs-btn-hover-color: var(--vnb-navy); --bs-btn-hover-bg: var(--vnb-navy-soft); --bs-btn-hover-border-color: var(--vnb-navy); }
.button-download.btn-primary { box-shadow: none; }

/* Focus contrast is critical on dark nav and code surfaces. */
.site-nav a:focus-visible, .site-nav button:focus-visible,
.hero-chip:focus-visible, .hero-embed-link a:focus-visible,
.embed-copy-btn:focus-visible { outline: 2px solid var(--vnb-cyan); outline-offset: 3px; }
.site-nav .navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgb(0 200 240 / 26%); }
.text-danger { color: var(--vnb-error) !important; }
.text-success { color: var(--vnb-success) !important; }
.border-danger { border-color: var(--vnb-error) !important; }
.border-success { border-color: var(--vnb-success) !important; }

/* Header and navigation: cyan is a selected-tab indicator, not general icon color. */
.site-nav { background: var(--vnb-navy); box-shadow: 0 5px 22px rgb(16 42 67 / 12%); }
.site-brand-mark { background: var(--vnb-navy-hover); color: #FFFFFF; border: 1px solid rgb(255 255 255 / 22%); box-shadow: 0 5px 15px rgb(0 0 0 / 13%); }
.site-brand-copy strong { color: #FFFFFF; }
.site-brand-copy strong span { color: var(--vnb-cyan); }
.site-brand-copy small { color: #D9E2EC; }
.site-nav .nav-link { border-bottom: 2px solid transparent; border-radius: 0; color: #D9E2EC; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus-visible { color: #FFFFFF; background: rgb(255 255 255 / 6%); }
.site-nav .nav-link.active { background: transparent; border-bottom-color: var(--vnb-cyan); color: #FFFFFF; }
.site-nav .nav-language .btn-outline-light { color: #FFFFFF; border-color: #9AB1C3; }
.site-nav .nav-language .btn-outline-light:hover { color: var(--vnb-navy); background: #FFFFFF; }
.site-nav .nav-language .btn-primary { border-color: var(--vnb-cyan); color: var(--vnb-navy); }
.site-hero { background: radial-gradient(ellipse 60% 100% at 82% 0%, rgb(0 200 240 / 11%), transparent 72%), linear-gradient(150deg, #102A43, #173F5E); border-bottom-color: var(--vnb-border); }
.site-hero::after { background: radial-gradient(circle, rgb(0 200 240 / 10%), transparent 75%); }
.hero-title { color: #FFFFFF; }
.hero-lead, .hero-bottom-label, .hero-trust { color: #E3EDF4; }
.hero-kicker { border-color: rgb(217 226 236 / 38%); background: rgb(255 255 255 / 7%); color: #FFFFFF; }
.hero-kicker i, .hero-bottom-label i { color: var(--vnb-cyan); }
.hero-chip { color: #FFFFFF; border-color: rgb(217 226 236 / 45%); }
.hero-chip:hover, .hero-chip:focus-visible { color: #FFFFFF; border-color: var(--vnb-cyan); background: rgb(255 255 255 / 10%); }
.hero-trust { border-color: rgb(217 226 236 / 30%); }
.hero-trust i { color: #8EE5A6; }
.hero-search .form-control { color: var(--vnb-navy); border: 1px solid var(--vnb-border); background: #FFFFFF; }
.hero-search .form-control::placeholder { color: var(--vnb-muted); }
.hero-search .form-control:focus { border-color: var(--vnb-navy); box-shadow: 0 0 0 3px rgb(0 200 240 / 26%), 0 12px 32px rgb(4 12 29 / 20%); }
.hero-search-icon { color: var(--vnb-muted); }
.hero-search kbd { background: var(--vnb-background); border-color: var(--vnb-border); color: var(--vnb-muted); }
.hero-embed-link .btn { border-color: var(--vnb-border); color: #FFFFFF; }
.hero-embed-link .btn:hover { color: var(--vnb-navy); background: #FFFFFF; }

/* Bank directory: quiet cards, navy information, cyan only for Create VietQR. */
.directory-toolbar h2, .directory-toolbar .form-select, .bank-card-names h3,
.detail-field-value { color: var(--vnb-navy); }
.directory-toolbar .form-select { border-color: var(--vnb-border); background-color: #FFFFFF; }
.filter-pill.btn-primary, #gridViewBtn.btn-primary, #tableViewBtn.btn-primary {
  --bs-btn-bg: var(--vnb-navy); --bs-btn-border-color: var(--vnb-navy);
  --bs-btn-color: #FFFFFF; --bs-btn-hover-bg: var(--vnb-navy-hover);
  --bs-btn-hover-border-color: var(--vnb-navy-hover); --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-color: #FFFFFF;
  color: #FFFFFF;
}
.filter-pill.btn-outline-secondary { color: var(--vnb-muted); background: #FFFFFF; border-color: var(--vnb-border); }
.filter-pill.btn-outline-secondary:hover { color: var(--vnb-navy); background: var(--vnb-navy-soft); border-color: var(--vnb-navy); }
.bank-directory-card { border-color: var(--vnb-border); box-shadow: 0 3px 12px rgb(16 42 67 / 4%); }
.bank-directory-card:hover { border-color: #A5C0D2; box-shadow: 0 13px 29px rgb(16 42 67 / 9%); }
.bank-list-avatar, .bank-option-avatar, .bank-avatar, .bank-type-badge {
  background: var(--vnb-navy-soft); color: var(--vnb-navy); border-color: var(--vnb-border);
}
.bank-small-code, .bank-fullname, .bank-option-bin, .detail-field-label { color: var(--vnb-muted) !important; }
.bank-type-badge { background: var(--vnb-navy-soft); color: var(--vnb-navy); border: 1px solid var(--vnb-border); }
.detail-field { background: var(--vnb-background); border: 1px solid var(--vnb-border); }
.bank-actions { border-top-color: var(--vnb-border); }
.directory-table-card th { background: var(--vnb-background); color: var(--vnb-muted); border-color: var(--vnb-border); }
.directory-table-card td { border-color: var(--vnb-border); }
.bank-skeleton { border-color: var(--vnb-border); background: linear-gradient(110deg, #EAF1F7 30%, #FFFFFF 48%, #EAF1F7 68%); }
.empty-state { border-color: var(--vnb-border); }
.detail-modal-header { background: var(--vnb-navy); color: #FFFFFF; border-bottom: 3px solid var(--vnb-cyan); }
.detail-modal-icon { color: #FFFFFF; background: var(--vnb-navy-hover); }
.detail-field-value[href]:hover { color: var(--vnb-navy-hover); }
.detail-freshness, .bank-freshness { color: var(--vnb-warning); }
.site-footer-shared, .site-footer-shared strong { border-color: var(--vnb-border); color: var(--vnb-muted); }
.site-footer-shared strong { color: var(--vnb-navy); }

/* QR form, preview, and feedback. Currency/account values always stay navy. */
.panel.card { border-color: var(--vnb-border); }
.qr-content .form-panel { border-top: 3px solid var(--vnb-navy); }
.qr-content .preview-panel { border-top: 3px solid var(--vnb-navy); }
.heading-icon, .heading-icon-mint, .benefit-icon,
.benefits .col-md-4:nth-child(2) .benefit-icon,
.benefits .col-md-4:nth-child(3) .benefit-icon {
  color: var(--vnb-navy); background: var(--vnb-navy-soft);
}
.section-overline, .field .form-text, .optional-tag, .counter, .result-label,
.result-row > span, .preview-notice, .qr-placeholder, .qr-placeholder > span,
.benefit small, .form-footnote, .form-notice, .qr-provider-mark { color: var(--vnb-muted); }
.panel-heading h2, .field .form-label, .benefit strong,
.result-row > strong, .result-value strong { color: var(--vnb-navy); }
.result-amount { color: var(--vnb-navy); }
.field .form-control, .field .form-control:focus, .amount-wrap .input-group-text,
.bank-input-icon, .bank-combobox .bank-toggle { border-color: var(--vnb-border); color: var(--vnb-navy); }
.field input::placeholder { color: var(--vnb-muted); }
.field .form-control:focus, .qr-content .field .form-control:focus { border-color: var(--vnb-navy); box-shadow: 0 0 0 .2rem rgb(0 200 240 / 23%); }
.bank-combobox:focus-within .bank-input-icon,
.bank-combobox:focus-within .bank-toggle,
.bank-combobox:focus-within .bank-input { border-color: var(--vnb-navy) !important; }
.bank-combobox .form-control.bank-input:focus { border-color: var(--vnb-navy); }
.bank-combobox .bank-toggle:hover, .bank-combobox .bank-toggle:focus-visible {
  color: var(--vnb-navy); background: var(--vnb-background);
}
.bank-menu { border-color: var(--vnb-border); background: #FFFFFF; }
.bank-option.dropdown-item { color: var(--vnb-navy); }
.bank-option:hover, .bank-option.active, .bank-option[aria-selected="true"] { background: var(--vnb-navy-soft); color: var(--vnb-navy); }
.amount-wrap .input-group-text { background: var(--vnb-background); }
.qr-stage { border-color: var(--vnb-border); background: linear-gradient(145deg, #FFFFFF, #F4F8FC); }
.qr-paper, .result-details, .result-bank { border-color: var(--vnb-border); }
.placeholder-icon { border-color: var(--vnb-border); background: var(--vnb-background); }
.placeholder-icon svg { color: #7A91A5; }
.qr-placeholder strong { color: var(--vnb-navy); }
.status-tag { color: var(--vnb-muted); border-color: var(--vnb-border); background: var(--vnb-background); }
.status-ready { color: var(--vnb-success); border-color: #A9D6B4; background: var(--vnb-success-soft); }
.status-ready .status-dot { background: var(--vnb-success); }
.status-error { color: var(--vnb-error); border-color: #E6A8A8; background: var(--vnb-error-soft); }
.status-error .status-dot { background: var(--vnb-error); }
.required, .counter.over, .field-error, .invalid-feedback { color: var(--vnb-error); }
.field .form-control.is-invalid { border-color: var(--vnb-error); }
.field .form-control.is-invalid:focus { box-shadow: 0 0 0 .2rem rgb(198 40 40 / 16%); }
.bank-combobox:has(.is-invalid) .bank-input-icon,
.bank-combobox:has(.is-invalid) .bank-toggle { border-color: var(--vnb-error) !important; }
.icon-button { color: var(--vnb-muted); border-color: var(--vnb-border); }
.icon-button:hover { color: var(--vnb-navy); }
.app-toast { background: var(--vnb-success); color: #FFFFFF; }
.app-toast.toast-error { background: var(--vnb-error); color: #FFFFFF; }

/* Embed installation guide, EN and VI, shares the exact same design system. */
.seo-guide, .seo-guide h2 { color: var(--vnb-navy); }
.seo-guide p, .seo-steps { color: var(--vnb-muted); }
.seo-guide a { color: var(--vnb-navy); }
.embed-guide-top {
  color: #FFFFFF;
  background: radial-gradient(circle at 88% 26%, rgb(0 200 240 / 12%), transparent 41%),
              linear-gradient(130deg, var(--vnb-navy), var(--vnb-navy-hover));
}
.embed-guide-top .embed-eyebrow { color: #E0F8FC; }
.embed-eyebrow { color: var(--vnb-navy); }
.embed-guide-top p { color: #D9E2EC; }
.embed-chips span { color: #F4F8FC; border-color: rgb(217 226 236 / 30%); background: rgb(255 255 255 / 5%); }
.embed-chips i { color: #8EE5A6; }
.embed-motif { border-color: rgb(217 226 236 / 29%); background: rgb(255 255 255 / 5%); }
.embed-motif-icon { color: #FFFFFF; background: rgb(0 200 240 / 11%); }
.embed-motif code { color: #FFFFFF; }
.embed-motif small { color: #D9E2EC; }
.embed-doc-nav { border-bottom-color: var(--vnb-border); background: var(--vnb-background); }
.embed-doc-nav a { color: var(--vnb-navy); }
.embed-doc-nav a:hover, .embed-doc-nav a:focus-visible { color: var(--vnb-navy); background: var(--vnb-navy-soft); }
.embed-section { border-bottom-color: var(--vnb-border); }
.embed-section-heading h3, .embed-step-list b, .embed-info-card h4,
.embed-faq-item summary { color: var(--vnb-navy); }
.embed-section-heading p, .embed-step-list p, .embed-inline-tip,
.embed-info-card p, .embed-info-card small, .embed-faq-item p,
.embed-doc-footer span { color: var(--vnb-muted); }
.embed-step-list li::before { color: var(--vnb-navy); background: var(--vnb-navy-soft); }
.embed-step-list li:not(:last-child)::after { border-color: var(--vnb-border); }
.embed-code-panel { background: var(--vnb-navy); border-color: #31506A; }
.embed-code-toolbar { background: var(--vnb-navy-hover); color: #FFFFFF; }
.embed-code-panel pre, .embed-code-panel pre code { color: #F4F8FC; }
.embed-copy-btn { color: #FFFFFF; border-color: #8CA6B8; background: #31506A; }
.embed-copy-btn:hover, .embed-copy-btn:focus-visible { color: var(--vnb-navy); border-color: var(--vnb-cyan); background: var(--vnb-cyan); }
.embed-parameter-table th { color: var(--vnb-navy); background: var(--vnb-background); border-color: var(--vnb-border); }
.embed-parameter-table td { color: var(--vnb-muted); border-color: var(--vnb-border); }
.embed-parameter-table tbody th { border-color: var(--vnb-border); }
.embed-parameter-table code, .embed-info-card p code { color: var(--vnb-navy); }
.embed-table-wrap, .embed-info-card, .embed-faq-item { border-color: var(--vnb-border); }
.embed-pill { color: var(--vnb-muted); background: var(--vnb-background); }
.embed-pill-required { color: var(--vnb-navy); background: var(--vnb-navy-soft); }
.embed-info-card { background: var(--vnb-background); }
.embed-faq-item[open] { background: var(--vnb-background); border-color: #A9C5D5; }
.embed-faq-item summary:focus-visible { outline-color: var(--vnb-navy); }
.embed-sample-notice { color: var(--vnb-warning); background: var(--vnb-warning-soft); }

/* Accessible GitHub link positioned directly after the language selector. */
.site-nav .nav-github {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  color: #D9E2EC;
  border: 1px solid rgb(217 226 236 / 35%);
  border-radius: 9px;
  background: transparent;
  font-size: 19px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.site-nav .nav-github:hover {
  color: #FFFFFF;
  background: rgb(255 255 255 / 12%);
}
.site-nav .nav-github:focus-visible {
  outline: 2px solid var(--vnb-cyan);
  outline-offset: 3px;
  color: #FFFFFF;
}
@media (max-width: 991.98px) {
  .site-nav .nav-github { margin: 0 14px 15px; }
}

/* 2026-10-17: Viet Nam flag replaces the bank-building site mark. */
.site-brand-mark, .site-brand-mark:hover {
  background: transparent; color: inherit; border: 0; border-radius: 4px; box-shadow: none;
}
.site-brand-mark img { display: block; width: 100%; height: auto; object-fit: contain; }
/* Google returns 32px artwork; display it crisply at 24px. */
.bank-row-avatar .bank-logo-img { width: 24px; height: 24px; }
/* Two columns even on phones; preserve spacing and readable action labels. */
@media (max-width: 575.98px) {
  #bankGrid { --bs-gutter-x: .65rem; --bs-gutter-y: .65rem; }
  .bank-directory-card .card-body { padding: 12px !important; }
  .bank-directory-card .bank-list-avatar { flex-basis: 32px; width: 32px; height: 32px; border-radius: 9px; }
  .bank-directory-card .bank-logo-img { width: 24px; height: 24px; }
  .bank-directory-card .bank-card-names h3 { font-size: 12px; }
  .bank-directory-card .bank-card-names .bank-small-code { font-size: 9px; }
  .bank-directory-card .bank-card-names { overflow-wrap: anywhere; }
  .bank-directory-card .bank-fullname { font-size: 11px; min-height: 0; line-height: 1.5; }
  .bank-directory-card .bank-card-meta { gap: 4px; }
  .bank-directory-card .bank-card-meta .bank-type-badge { font-size: 8px; padding: 3px 5px; }
  .bank-directory-card .bank-actions { gap: 6px !important; }
  .bank-directory-card .bank-actions .btn { width: 100%; font-size: 10px; padding: 6px 5px; }
  .bank-directory-card .d-flex.gap-3 { gap: .4rem !important; }
  .bank-directory-card .bank-popular-star { font-size: 12px; }
}

/* Compact directory cards: name plus inline code/category, full name, and actions. */
.bank-directory-card .card-body { padding: 12px !important; gap: 2px; }
.bank-directory-card .bank-card-top { min-height: 36px; }
.bank-directory-card .bank-card-names { min-width: 0; }
.bank-directory-card .bank-card-names h3 { line-height: 1.25; }
.bank-directory-card .bank-fullname { flex: none; min-height: 0; margin-bottom: 2px !important;
  font-size: 11px; line-height: 1.35; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bank-directory-card .bank-actions { border-top: 1px solid var(--vnb-border);
  padding-top: 7px; margin-top: auto; }
.bank-directory-card .bank-actions .btn { min-width: 0; }
/* The bank avatar contains an image only, never initials or a text placeholder.
 * Let the browser paint completed images natively (do not wait for JS 'load'). */
.bank-list-avatar, .bank-option-avatar, .bank-avatar { position: relative; overflow: hidden; }
.bank-list-avatar .bank-logo-img, .bank-option-avatar .bank-logo-img, .bank-avatar .bank-logo-img {
  display: block; position: static; margin: auto; visibility: visible;
}
.bank-logo-img[hidden] { display: none !important; }
/* CSS display rules from Bootstrap should not override filtered/hidden rows. */
#bankGrid > [hidden], #bankGrid[hidden] { display: none !important; }
@media (max-width: 575.98px) {
  .bank-directory-card .card-body { padding: 10px !important; }
  .bank-directory-card .bank-list-avatar { width: 32px; height: 32px; flex-basis: 32px; }
  .bank-directory-card .bank-logo-img { width: 24px; height: 24px; }
  .bank-directory-card .bank-fullname { font-size: 10px; }
  .bank-directory-card .bank-actions { gap: 5px !important; }
  .bank-directory-card .bank-actions .btn { padding: 6px 4px; }
}