/* Design tokens shared by every page. Change a color or font here, not in the markup. */
:root{
  --navy:#0F2A5C;        /* headings and display text */
  --blue:#0F2A5C;        /* brand blue: badges, footer, secondary button text */
  --blue-bright:#2161C2; /* pop color: primary call-to-action buttons, white button borders, eyebrows, icon badges */
  --blue-light:#3B93FF;  /* end of the about hero gradient */
  --blue-tint:#BDDEF7;   /* bottom of the hero sky: icon fills, accents on dark backgrounds */
  --text:#1B2238;        /* default text */
  --text-body:#3A4160;   /* paragraphs */
  --text-muted:#4A5169;  /* captions and secondary details */
  --text-nav:#2B3350;    /* navigation links */
  --page:#F2F8FD;        /* page background, also rows sitting on a white band */
  --page-deep:#E1EDFA;   /* hovered or open rows on a white band */
  --line:#E3E8F4;        /* borders and dividers */
  --line-strong:#7C86A8; /* form field borders */
  --text-placeholder:#6B7390; /* hint text inside form fields */
  --font-display:'Be Vietnam Pro',system-ui,sans-serif; /* headings and big numbers */
  --font-body:'Be Vietnam Pro',system-ui,sans-serif;    /* everything else */
  --font-quote:'Lora',Georgia,serif;                    /* scripture quote only, always italic */
  --section-space:72px;  /* space above and below every section's content */
  --badge:36px;          /* circle holding an icon or number beside a card heading */
  --badge-glyph:20px;    /* the icon inside that circle */
}
h2,h3,h4{color:var(--navy)} /* h1 sits on dark heroes and stays white */
h1,h2,h3,.stat-num,.stat-big{font-family:var(--font-display);font-weight:600}
/* Every page section: same space above and below, sections stack with no gaps */
.section{padding:var(--section-space) 6vw}
.quote{font-family:var(--font-quote);font-weight:500;font-style:italic}
.quote-cite{margin:24px 0 0;font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.85} /* scripture reference under a .quote */

/* Footer, shared by every page */
.footer{background:var(--blue);color:#fff;padding:56px 6vw 28px}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(3,max-content);justify-content:space-between;gap:40px 64px}
.footer-brand{display:flex;gap:18px;align-items:flex-start}
.footer-brand img{flex:none;width:72px;height:72px;border-radius:50%;background:#fff;display:block}
.footer-name{font-weight:800;font-size:20px;line-height:1.3;white-space:nowrap}
.footer-sub{margin-top:6px;font-size:16px;opacity:.85}
.footer-h{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue-tint);margin-bottom:14px}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:10px;font-size:16px}
.footer-col a{opacity:.9}
.footer-col a:hover{opacity:1;text-decoration:underline}
.footer-contact{display:inline-flex;align-items:center;gap:10px}
.footer-contact svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--blue-tint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.footer-bottom{max-width:1200px;margin:40px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);font-size:14px;opacity:.75}
/* The full name stays on one line: the brand gets its own row, then stacks over the logo on phones */
@media (max-width:1240px){.footer-inner{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-brand{grid-column:1/-1}}
@media (max-width:640px){.footer-inner{grid-template-columns:minmax(0,1fr);gap:32px}.footer-brand{flex-direction:column}.footer-name{font-size:min(20px,3.8vw)}}
.toast{position:fixed;left:50%;bottom:24px;z-index:50;max-width:calc(100% - 32px);padding:12px 20px;border-radius:999px;background:var(--blue);color:#fff;font-size:15px;font-weight:600;box-shadow:0 8px 24px rgba(27,42,78,.2);opacity:0;transform:translate(-50%,8px);transition:opacity .2s,transform .2s;pointer-events:none}
.toast-show{opacity:1;transform:translate(-50%,0)}

/* Document tables on Lịch Sử, Tài Liệu and Đề Tài Họp Liên Gia */
.doc-card{background:#fff;border-radius:24px;padding:48px}
.doc-group{scroll-margin-top:24px}
.doc-group+.doc-group{margin-top:44px}
.doc-group-h{display:flex;align-items:center;gap:12px;margin:0 0 14px;font-size:24px;line-height:1.3}
.doc-table{overflow:hidden;border:1px solid var(--line);border-radius:14px}
.doc-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:12px 20px}
.doc-row+.doc-row{border-top:1px solid var(--line)}
.doc-row:nth-child(even){background:var(--page)}
.doc-name{font-weight:600;line-height:1.4;color:var(--navy)}
a.doc-name:hover{color:var(--blue-bright);text-decoration:underline}
.doc-dl{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border:1.5px solid var(--blue-bright);border-radius:999px;background:#fff;color:var(--blue-bright);font-size:15px;font-weight:600;white-space:nowrap;transition:background .15s,color .15s}
.doc-dl:hover{background:var(--blue-bright);color:#fff}
.doc-dl:focus-visible,a.doc-name:focus-visible{outline:2px solid var(--blue-bright);outline-offset:2px}
.doc-dl svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.doc-soon{font-size:14px;color:var(--text-muted)}
@media (max-width:640px){.doc-card{padding:24px 16px}.doc-row{padding:12px 14px;gap:12px}.doc-dl{padding:8px 12px}.doc-dl-text{display:none}.doc-group-h{font-size:21px}}

/* Header stays pinned while scrolling once the menu collapses to the hamburger */
@media (max-width:1180px){
  .site-header{position:sticky;top:0;z-index:40}
  html{scroll-padding-top:72px} /* in-page links land below the pinned header */
}