/* NHQN Design System v2.0 — giao diện chung của nganhangquangngai.com theo THIET_KE.md (nền sáng, lưới 40px, navy + cam).
   Một file phủ các trang dùng bộ biến cũ: so sánh/máy tính, bài viết, pháp lý, tuyển dụng, blog, tài liệu hệ sinh thái.
   Trang trung lập: dấu hiệu là biểu tượng Rạng đông của site, KHÔNG dùng logo SHB. Gỡ: bỏ dòng <link> khỏi trang. */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
 /* bộ biến "accent / ink / cream / paper" (so sánh, bài viết, audit, cong-nghe, pháp lý) */
 --accent:#F37021;--accent-dark:#C4540D;--accent-dk:#C4540D;--accent-bg:#FFF4EC;--accent-lt:#FFF4EC;--accent-soft:#FFE6D3;
 --ink:#0A1526;--cream:#F4F7FC;--paper:#FFFFFF;--bg:#F4F7FC;--black:#0A1526;
 --ink-90:#0A1526;--ink-70:#3D4F68;--ink-55:#617189;--ink-35:#8A97AB;--ink-08:#D6E2F2;
 --muted:#3D4F68;--muted-light:#617189;--border:#D6E2F2;--line:#D6E2F2;
 --amber:#B5831F;--amber-bg:#FBF3E2;
 --navy:#14286E;--navy-2:#1E3A8A;--navy-deep:#0E1D52;
 /* chữ */
 --serif:'Space Grotesk','Segoe UI',system-ui,sans-serif;--sans:'Inter','Segoe UI',system-ui,sans-serif;--mono:'JetBrains Mono',Consolas,monospace;
 --font-display:var(--serif);--font-sans:var(--sans);--font-mono:var(--mono);--fd:var(--serif);--fs:var(--sans);--fm:var(--mono);
 /* bộ biến nhóm tài liệu hệ sinh thái (links, reports, icons): cam/navy/xám cũ -> màu chuẩn */
 --orange:#F37021;--orange-deep:#C4540D;--orange-pale:#FFE6D3;--sun:#FF9A3C;--cream-warm:#EAF0F8;
 --body:#3D4F68;--ink-2:#14286E;
 /* bo góc */
 --r:12px;--rsm:8px;--rlg:14px;--rxl:20px;
}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans)!important;color:var(--ink);background-color:#F4F7FC!important;
 background-image:linear-gradient(#E3EBF6 1px,transparent 1px),linear-gradient(90deg,#E3EBF6 1px,transparent 1px)!important;background-size:40px 40px!important;background-attachment:fixed!important}

/* chữ tiêu đề */
h1,h2,h3,h4,.logo,.brand,.h-title,.hero h1,header.article h1{font-family:'Space Grotesk','Segoe UI',system-ui,sans-serif!important}
h1,h2{font-weight:700;letter-spacing:-.015em}
h3,h4{font-weight:600}
/* màu navy chỉ áp ở vùng nền sáng, không đụng khối hero tối của nhóm tài liệu */
.wrap h1,.wrap h2,.wrap h3,.wrap h4,header.article h1,article h2,article h3,section h2,section h3,main h1,main h2,.container>h1,.container>h2{color:var(--navy)}
h1 em,h2 em{font-style:normal;color:var(--accent)}
a{color:#2B6FB8}a:hover{color:var(--navy)}

/* nhãn vàng có gạch ngang phía trước */
.eyebrow,.dateline{display:flex;align-items:center;gap:10px;color:var(--amber)!important;font-family:'JetBrains Mono',Consolas,monospace!important;font-weight:600;letter-spacing:.2em}
.eyebrow:before,.dateline:before{content:"";width:34px;height:1.5px;background:var(--amber);flex:none}
header.article .eyebrow,.hero-text .eyebrow{display:inline-flex}

/* thanh trên: navy + dấu Rạng đông + vạch gradient */
body>nav,.topnav,.site-header,.nav-bar{background:var(--navy)!important;border-bottom:3px solid transparent!important;border-image:linear-gradient(90deg,#F37021 0%,#FF9A3C 35%,#2B6FB8 100%) 1}
body>nav .brand,.topnav a.brand,.site-header .logo,.nav-bar .logo{color:#fff!important;display:inline-flex;align-items:center;text-decoration:none}
body>nav .brand:before,.topnav a.brand:before,.site-header .logo:before,.nav-bar .logo:before{content:"";width:28px;height:28px;margin-right:10px;background:url(/assets/logo-rising-sun-favicon.svg) center/contain no-repeat;flex:none;border-radius:6px}
.logo-accent{color:#FF9A3C!important}
.site-header .logo>*,.nav-bar .logo>*,.topnav a.brand>*{margin-left:.3em}
body>nav .brand .dom{color:rgba(255,255,255,.55)}
body>nav a:not(.brand),.back-link,.topnav nav a,.nav-bar a:not(.logo){color:rgba(255,255,255,.78)!important}
body>nav a:not(.brand):hover,body>nav a.active,.back-link:hover,.topnav nav a:hover,.nav-bar a:not(.logo):hover{color:#FF9A3C!important}
body>nav a.active{border-bottom-color:#FF9A3C!important}
section.hero{background:transparent}
section.white{background:#fff}

/* thẻ, ô số, khối nhấn */
.stat,.profile,.card,.box,.job,.cta,.cta-box,.apply-box,.toc,.callout,.link,.icon-card,.gloss-card{border-radius:12px;border-color:var(--ink-08)}
.stat,.profile,.apply-box,.toc,.job,.card,.link{box-shadow:0 6px 18px -14px rgba(20,40,110,.35)}
.stat,.profile{border:1px solid var(--ink-08);border-left:1px solid var(--ink-08)}
.stat .num{color:var(--navy);font-weight:700}
.stat:nth-child(odd) .num{color:var(--accent)}
.profile .lbl{color:var(--amber)}

/* bảng: header navy chữ trắng mono, dòng chẵn #FAFCFF, số tabular */
.bank-table{border:1px solid var(--ink-08);border-radius:12px;margin:20px 0;background:#fff}
table th{background:var(--navy);color:#fff;font-family:'JetBrains Mono',Consolas,monospace}
table.banks th{border-bottom:none}
table tbody tr:nth-child(even) td{background:#FAFCFF}
table.banks tr.highlight td{background:var(--accent-bg)}
table td,table th{font-variant-numeric:tabular-nums}
table.banks td.num.accent{color:var(--accent-dark)}
@media(max-width:640px){table.banks thead th:first-child{background:var(--navy)}}

/* máy tính */
.calc{background:#fff;border:1px solid var(--ink-08);border-radius:14px;box-shadow:0 6px 18px -14px rgba(20,40,110,.35)}
.calc-form input:focus,.calc-form select:focus{border-color:#2B6FB8;box-shadow:0 0 0 3px #EAF2FB}
.calc-out{background:var(--accent-bg);border-left-color:var(--accent);border-radius:0 10px 10px 0}
.calc-out .row:last-child{color:var(--navy)}

/* nút, khung tư vấn, chân trang */
.btn,.job-btn,.fbtn.active{border-radius:999px}
section.cta{background:var(--navy);border-radius:20px}
footer{background:var(--navy)}
.sticky-call a{box-shadow:0 8px 22px -8px rgba(20,40,110,.45)}
.faq-item summary{color:var(--navy)}

/* pháp lý (privacy, terms): khối đầu navy */
body>header:not([class]){background:var(--navy)}
body>header:not([class]) .tag{color:#FF9A3C}
body>header:not([class]) h1{color:#fff!important}

/* điện thoại: bảng và khối mã rộng cuộn ngang trong khung, không làm tràn cả trang */
@media(max-width:640px){
 .container table,article table,.wrap>table{display:block;overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
 pre{overflow-x:auto;max-width:100%}
 code{word-break:break-word}
}