/* Base layer. Section/component CSS is added in later tasks. */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-sans, "Montserrat", system-ui, sans-serif);
  font-size: var(--text-base, 1rem);
  line-height: var(--leading-relaxed, 1.65);
  color: var(--text-body, #3D4048);
  background: var(--surface-page, #FBFCFD);
  overflow-x: hidden;
}
h1,h2,h3 { color: var(--text-heading, #283350); line-height: 1.25; margin: 0 0 .5em; }
a { color: var(--text-link, #A52610); }
a:hover { color: var(--text-link-hover, #7E1D0C); }
img { max-width: 100%; height: auto; }
.container { max-width: var(--container-xl, 1240px); margin-inline: auto; padding-inline: var(--space-6, 24px); }
:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring, #3A4C74); }

/* Shared eyebrow + section-heading pattern, used by every section. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 8px);
  font: var(--type-eyebrow, 700 12px/1.5 var(--font-sans));
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow, 0.16em);
  color: var(--text-brand, #A52610);
  margin: 0 0 var(--space-3, 12px);
}
.eyebrow--dark { color: var(--brand-highlight, #FCB415); }
.eyebrow__dot { width: 7px; height: 7px; border-radius: var(--radius-full, 999px); background: currentColor; flex: none; }
.section-heading { display: flex; flex-direction: column; max-width: var(--container-md, 840px); }
.section-heading h2,
.section h2 { font: var(--type-h2, 700 30px/1.25 var(--font-sans)); font-size: clamp(var(--text-xl, 24px), 3vw, var(--text-3xl, 38px)); margin: 0; }
.section-heading h2.on-dark { color: var(--text-on-dark, #fff); }
.section-subtitle { font: 400 var(--text-md, 18px)/1.4 var(--font-sans); color: var(--text-muted, #5B6270); margin-top: var(--space-1, 4px); }
.section-subtitle--dark { color: var(--text-on-dark-muted, #CCD6EB); }

/* Top-only vertical padding so two consecutive sections don't stack
 * before+after padding into a doubled gap. The gap between sections is one
 * section's top padding. Colored/dark sections restore bottom padding below
 * so their band isn't cropped. */
.section { position: relative; padding-block: var(--section-y, clamp(32px, 3.5vw, 48px)) 0; overflow: hidden; }
.section__backdrop { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.section__backdrop--warm { background-image: var(--bloom-warm), var(--bloom-gold); }
.section__backdrop--cool { background-image: var(--bloom-cool), var(--bloom-teal); }

.avide-dotfield--brand {
  background-image:
    radial-gradient(var(--brand-accent) 1.9px, transparent 2px),
    radial-gradient(var(--brand-highlight) 2.4px, transparent 2.5px),
    radial-gradient(var(--brand-primary) 1.4px, transparent 1.5px);
  background-size: 26px 26px, 42px 42px, 61px 61px;
  background-position: 0 0, 9px 13px, 13px 6px;
  opacity: 0.16;
}
.avide-dotfield--onDark {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(#fff 1.5px, transparent 1.6px);
  background-size: 24px 24px;
  opacity: 0.1;
}

/* Cards */
.card { border-radius: var(--radius-lg, 12px); padding: var(--space-6, 24px); }
.card--sunken { background: var(--surface-sunken, #F1F3F6); border: 1px solid transparent; }
.card--brand { background: var(--surface-brand-soft, #FDECEA); border: 1px solid var(--red-100); color: var(--red-800); }
.card__label { font: var(--type-label, 600 14px/1.5 var(--font-sans)); color: var(--text-brand, #A52610); }
.card--brand .card__label,
.card--brand .card__title,
.card--brand .card__body { color: var(--red-800); }
.card__title { font: var(--type-h3, 700 20px/1.25 var(--font-sans)); color: var(--text-heading, #283350); margin-top: 6px; }
.card__body { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-muted, #5B6270); margin-top: 6px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 8px);
  font-family: var(--font-sans, "Montserrat", sans-serif);
  font-weight: var(--weight-semibold, 600);
  font-size: var(--text-sm, 14px);
  letter-spacing: 0.005em;
  border-radius: var(--radius-full, 999px);
  border: 1px solid transparent;
  padding: 11px 22px;
  min-height: 44px;
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-control, background-color .18s ease, transform .12s ease);
}
/* `.btn` is a class selector, so its display beats the user agent's
   `[hidden] { display: none }`, and a button rendered with the attribute (the
   registration flow's "back to tier choice", hidden until step 2) showed up
   anyway. Class + attribute wins it back without !important. */
.btn[hidden] { display: none; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { text-decoration: none; }
.btn--lg { font-size: var(--text-md, 18px); padding: 15px 30px; min-height: 54px; }
.btn--primary {
  /* --red-600, not --avide-red: the white label needs 4.5:1, the raw logo red only clears 3.90:1. */
  background: var(--red-600, #C23A1E);
  color: var(--text-on-brand, #fff);
  box-shadow: var(--shadow-brand, 0 6px 18px rgba(194,58,30,.24));
}
.btn--primary:hover { background: var(--red-700, #9A2E17); color: var(--text-on-brand, #fff); }
.btn--primary:active { transform: scale(0.98); }
.btn--inverse { background: var(--neutral-0, #fff); color: var(--brand-primary, #283350); }
.btn--inverse:hover { background: var(--neutral-100, #F4F5F7); }
.btn--outline { background: transparent; color: var(--text-heading, #283350); border-color: var(--border-default, #CDD0D6); }
.btn--outline:hover { border-color: var(--brand-accent, #EF3E23); color: var(--brand-accent, #EF3E23); }
.btn--ghost { background: transparent; color: var(--text-heading, #283350); }
.btn--ghost:hover { background: var(--surface-sunken, #F1F3F6); }
.btn--sm { font-size: var(--text-sm, 14px); padding: 8px 16px; min-height: 34px; }

/* Value chain (charter wording: Kết nối – Tương trợ – Phát triển – Cống hiến) */
.value-chain { display: flex; align-items: center; gap: var(--space-3, 12px); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.value-chain li { display: inline-flex; align-items: center; gap: var(--space-2, 8px); font: var(--weight-bold, 700) var(--text-lg, 20px)/1.2 var(--font-sans); color: var(--text-heading, #283350); }
.value-chain__sep { color: var(--neutral-600, #6B7280); font-weight: 400; }
.value-chain__dot { width: 10px; height: 10px; border-radius: var(--radius-full, 999px); flex: none; }
.value-chain--dark li { color: var(--text-on-dark, #fff); }
.value-chain--dark .value-chain__sep { color: var(--text-on-dark-muted, #CCD6EB); }

/* ============ Header ============ */
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:var(--space-4,16px); top:var(--space-4,16px); z-index:100; background:#fff; padding:var(--space-2,8px) var(--space-4,16px); }
.site-header { position:sticky; top:0; z-index:50; background:oklch(1 0 0 / .86); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border-subtle,#E1E4E8); }
.site-header__inner { display:flex; align-items:center; gap:var(--space-8,40px); min-height:76px; flex-wrap: wrap; }
.site-header__brand { display: flex; flex: none; }
.site-header__brand img { display:block; }
.site-nav { display:flex; align-items:center; gap:var(--space-3,12px); flex-wrap: wrap; margin-left: auto; min-width: 0; }
.site-nav__list { display:flex; align-items: center; gap:var(--space-1,4px); list-style:none; margin:0; padding:0; flex-wrap: wrap; }
.site-nav__list a { color:var(--text-heading,#283350); text-decoration:none; font-weight:500; font-size: var(--text-sm, 14px); padding:10px 14px; border-radius: var(--radius-md, 8px); display:inline-block; white-space: nowrap; }
.site-nav__list a:hover { color: var(--text-heading, #283350); background: var(--surface-sunken, #F1F3F6); }
.site-nav__list .current-menu-item a,
.site-nav__list .current_page_item a { color: var(--text-brand, #A52610); font-weight: 700; box-shadow:inset 0 -2px 0 var(--brand-accent,#EF3E23); }
.btn--nav-cta { flex: none; }
.site-lang { display:flex; align-items: center; gap:var(--space-2,8px); list-style:none; margin:0 0 0 auto; padding:0; font-size: var(--text-xs, 12px); flex: none; }
/* When the nav row is full and the switcher wraps, keep it right-aligned and tight.
   Descendant (not direct-child) selector: .site-lang now sits one level deeper,
   inside .site-nav-drawer, which is `display:contents` at this width so the box
   tree (and therefore this rule's effect) is unchanged from before. */
.site-header__inner .site-lang { justify-content: flex-end; }
.site-lang a { color: var(--text-muted, #5B6270); text-decoration: none; }
.site-lang a:hover { color: var(--text-heading, #283350); }
.site-lang .current-lang a, .site-lang .current-lang { font-weight: 700; color: var(--text-heading, #283350); }

/* Utility bar (desktop): language + account, a slim row above the main nav so
   the primary menu carries only content pages. */
.site-utilitybar { border-bottom: 1px solid var(--border-subtle, #E1E4E8); background: var(--surface-sunken, #EFF1F5); }
.site-utilitybar__inner { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-5, 20px); min-height: 34px; }
.site-utilitybar .site-lang { margin: 0; }
.site-account { display: flex; align-items: center; gap: var(--space-3, 12px); }
.site-account__link { font-size: var(--text-xs, 12px); color: var(--text-muted, #5B6270); text-decoration: none; }
.site-account__link:hover { color: var(--text-heading, #283350); }
.site-account__link--logout { color: var(--text-link, #A52610); }
/* Compact site search: lives in the utility bar on desktop and repeats in
   the drawer on mobile, same as language + account. */
.site-search { display: flex; align-items: center; gap: var(--space-1, 4px); margin-right: auto; }
.site-search__input {
  font: 400 var(--text-xs, 12px)/1.4 var(--font-sans);
  color: var(--text-body, #333B4D);
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle, #E1E4E8);
  border-radius: var(--radius-sm, 6px);
  padding: 3px 8px;
  width: 180px;
  max-width: 100%;
}
.site-search__input:focus { outline: none; border-color: var(--focus-ring, #3A4C74); }
.site-search__submit {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; padding: 2px; cursor: pointer;
  color: var(--text-muted, #5B6270);
}
.site-search__submit:hover { color: var(--text-heading, #283350); }
.site-search__submit svg { width: 16px; height: 16px; }
/* The in-drawer copies of language/account are mobile-only. */
.site-nav-drawer__utility { display: none; }

/* ============ Mobile nav drawer (<=980px) ============ */
/* Above 980px .site-nav-drawer and .site-header__mobile-actions collapse to
   `display:contents`/`none` so the DOM additions below have zero effect on
   desktop layout: the box tree above 980px is identical to before. */
.site-nav-drawer { display: contents; }
.site-header__mobile-actions { display: none; }
.site-nav-toggle { display: none; }
/* Above 980px the utility bar carries the search; the header row's own copy
   is mobile-only. */
.site-search--mobile { display: none; }

@media (max-width: 980px) {
  /* The utility bar stays on mobile, reduced to the language switcher. It used
     to hide here and the switcher moved into the drawer, which meant changing
     language cost a tap on the hamburger first, with the pills at the bottom of
     a long menu. The bar is the first row of .site-header, and the header is
     position:sticky, so the switcher now rides at the top of the screen at all
     times. Search and account keep their own mobile copies (the header row and
     the drawer), so nothing else in the bar needs to show. */
  .site-utilitybar { display: block; }
  .site-utilitybar .site-search,
  .site-utilitybar__handbook,
  .site-utilitybar .site-account { display: none; }
  /* No min-height of its own: the bar is exactly as tall as the pill track,
     which nav.css sizes for touch. */
  .site-utilitybar__inner { justify-content: flex-end; gap: var(--space-3, 12px); min-height: 0; }
  .site-nav-drawer__utility { display: block; }
  .site-header__inner { padding-block: var(--space-3, 12px); flex-wrap: nowrap; position: relative; gap: var(--space-2, 8px); }
  .site-header .container { padding-inline: var(--space-4, 16px); }
  .site-header__brand img { width: 132px; height: auto; }
  /* The drawer's copy of the search is now redundant: the header row carries a
     visible one below 980px. Same treatment as the drawer's copy of the CTA. */
  .site-nav-drawer .site-search--drawer { display: none; }

  /* Search, visible rather than buried in the menu. There is no width left on
     the brand row (logo + CTA + 44px toggle already fill a 320px screen), so
     it takes a line of its own underneath. The drawer is absolutely positioned
     at `top: 100%` of this same box, so it still opens below the search. */
  .site-header__inner { flex-wrap: wrap; }
  .site-search--mobile {
    display: flex;
    flex: 1 0 100%;
    order: 3;
    margin-right: 0;
    margin-top: var(--space-2, 8px);
    gap: var(--space-2, 8px);
  }
  .site-search--mobile .site-search__input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    font-size: var(--text-sm, 14px);
    padding: 8px 12px;
    min-height: 40px;
  }
  .site-search--mobile .site-search__submit {
    flex: none;
    width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-subtle, #E1E4E8);
    border-radius: var(--radius-md, 8px);
  }
  .site-search--mobile .site-search__submit svg { width: 18px; height: 18px; }
  .site-nav-drawer .site-account--drawer { display: flex; flex-wrap: wrap; gap: var(--space-4, 16px); padding: var(--space-3, 12px) var(--space-4, 16px); border-top: 1px solid var(--border-subtle, #E1E4E8); }
  .site-nav-drawer .site-account--drawer .site-account__link { font-size: var(--text-sm, 14px); min-height: 32px; display: inline-flex; align-items: center; }

  /* The drawer becomes a real, positioned box that slides down below the
     compact header row and collapses to zero height when closed. */
  .site-nav-drawer {
    display: block;
    position: absolute;
    top: 100%; left: 0; right: 0;
    z-index: 49;
    background: var(--surface-card, #fff);
    border-bottom: 1px solid var(--border-subtle, #E1E4E8);
    box-shadow: var(--shadow-md, 0 8px 24px rgba(40,51,80,.14));
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--duration-normal, .22s) var(--ease-standard, cubic-bezier(.2,0,.2,1));
  }
  body.site-nav-open .site-nav-drawer {
    max-height: calc(100vh - var(--site-header-h, 76px));
    overflow-y: auto;
  }
  @media (prefers-reduced-motion: reduce) {
    .site-nav-drawer { transition: none; }
  }

  .site-nav-drawer .site-nav {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    margin-left: 0;
  }
  .site-nav-drawer .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }
  .site-nav-drawer .site-nav__list a { width: 100%; box-sizing: border-box; display: flex; align-items: center; min-height: 44px; padding: 12px 14px; }
  /* Sub-menus (Điều lệ / Đối Tác / Nhân Sự / Sự kiện / Đăng ký hội viên) are
     always expanded in the drawer, indented under their parent: never a
     nested accordion. */
  .site-nav-drawer .site-nav__list .sub-menu {
    display: block;
    position: static;
    min-width: 0;
    margin: 0;
    padding: 0 0 0 var(--space-4, 16px);
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .site-nav-drawer .site-nav__list .sub-menu a { padding-left: 28px; }
  /* The CTA already renders in the compact header row (.site-header__mobile-cta);
     hide the copy that lives inside the drawer's nav to avoid a duplicate. */
  .site-nav-drawer .site-nav > .btn--nav-cta { display: none; }

  /* `flex: 1 1 0`, not `flex: none`: the row wraps now (the search takes a line
     of its own below), and a flex line is filled using each item's base size
     before anything shrinks -- so an intrinsically-sized actions block dropped
     to its own line instead of narrowing. A zero base keeps it beside the
     logo; justify-content puts it back on the right. */
  /* flex-wrap, not overflow: a longer CTA translation (or a bigger system
     font) drops the buttons onto a second line instead of pushing the
     toggle off the screen. */
  .site-header__mobile-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2, 8px); margin-left: auto; flex: 1 1 0; min-width: 0; }
  .site-header__mobile-cta { padding: 8px 12px; font-size: var(--text-xs, 12px); min-height: 40px; white-space: nowrap; }
  /* Log in / log out beside the CTA. Icon-only and 40px square: the row is
     logo + CTA + this + a 44px toggle, which fills a 320px screen exactly, so
     there is no width for a label. 40x40 still clears the 24x24 WCAG 2.5.8
     asks for, and the accessible name comes from aria-label. */
  .site-header__account-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: none;
    border: 1px solid var(--border-subtle, #E1E4E8);
    border-radius: var(--radius-md, 8px);
    color: var(--text-heading, #283350);
    background: transparent;
  }
  .site-header__account-btn:hover { background: var(--surface-sunken, #F1F3F6); }
  .site-header__account-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
  .site-header__account-btn svg { width: 20px; height: 20px; }

  .site-nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex: none;
    background: transparent; border: 1px solid var(--border-subtle, #E1E4E8);
    border-radius: var(--radius-md, 8px);
    cursor: pointer; padding: 0;
  }
  .site-nav-toggle:focus-visible { outline: none; box-shadow: var(--ring-focus); }
  .site-nav-toggle__bars { display: block; position: relative; width: 20px; height: 14px; }
  .site-nav-toggle__bars span {
    display: block; position: absolute; left: 0; right: 0; height: 2px;
    background: var(--text-heading, #283350); border-radius: 1px;
  }
  .site-nav-toggle__bars span:nth-child(1) { top: 0; }
  .site-nav-toggle__bars span:nth-child(2) { top: 6px; }
  .site-nav-toggle__bars span:nth-child(3) { top: 12px; }
}

/* On a narrow phone the logo, the register CTA and the 44px toggle no longer
   fit the header's inner width, and the header pushed the whole document into
   a sideways scroll. The CTA is the part that varies: the same button reads
   "Đăng ký hội viên" (135px), "Medlemsregistrering" (161px) or "Membership
   Registration" (189px), so a fixed size cannot hold for all three. Let it
   shrink and wrap to two lines instead, which costs nothing in any language.
   The drawer's copy of this CTA is hidden below 980px, so this button must
   never be hidden -- it is the only register call to action on mobile. */
@media (max-width: 480px) {
  .site-header__mobile-cta {
    flex: 0 1 auto;
    min-width: 0;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
    padding: 8px 12px;
  }
}

@media (max-width: 380px) {
  .site-header .container { padding-inline: var(--space-3, 12px); }
  .site-header__brand img { width: 108px; }
  .site-header__mobile-cta { padding: 8px; font-size: var(--text-2xs, 11px); }
  /* Tighter still now that the account button shares the row: at 320px the
     line is logo + CTA + account + toggle with nothing to spare, and the CTA
     label is the widest in Danish ("Bliv medlem", 90px). Measured at 320:
     108 + 4 + 90 + 4 + 36 + 4 + 44 = 290 of the 296 available. */
  .site-header__inner { gap: var(--space-1, 4px); }
  .site-header__mobile-actions { gap: var(--space-1, 4px); }
  .site-header__account-btn { width: 36px; height: 36px; }
  .site-header__account-btn svg { width: 18px; height: 18px; }
}

/* ============ Hero ============ */
.hero { position: relative; min-height: 620px; display: flex; align-items: flex-end; overflow: hidden; color: var(--text-on-dark, #fff); }
.hero__media {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
}
.hero__scrim {
  position: absolute; inset: 0;
  /* Strong navy scrim, darkest at top so the eyebrow/H1 clear contrast against sky. */
  background: linear-gradient(to top,
    oklch(0.24 0.045 265 / 0.95) 6%,
    oklch(0.24 0.045 265 / 0.82) 48%,
    oklch(0.24 0.045 265 / 0.55));
}
.hero__bloom {
  position: absolute; inset: 0;
  background:
    radial-gradient(58% 62% at 88% 78%, oklch(0.62 0.170 40 / 0.34), transparent 68%),
    radial-gradient(46% 52% at 8% 96%, oklch(0.72 0.150 70 / 0.20), transparent 70%);
}
.hero__content { position: relative; z-index: 1; padding-block: clamp(var(--space-16, 64px), 7vw, var(--space-24, 96px)) clamp(var(--space-10, 40px), 4.5vw, var(--space-16, 64px)); }
.hero__title {
  color: var(--text-on-dark, #fff);
  font: var(--type-h1, 800 48px/1.1 var(--font-sans));
  font-size: clamp(var(--text-3xl, 38px), 5vw, var(--text-6xl, 76px));
  line-height: 1.25;
  max-width: 900px;
  margin-top: var(--space-4, 16px);
  margin-bottom: 0;
}
.hero__lead { font: 400 var(--text-lg, 20px)/1.45 var(--font-sans); color: var(--text-on-dark-muted, #CCD6EB); max-width: 720px; margin-top: var(--space-3, 12px); margin-bottom: 0; }
.hero__actions { display: flex; gap: var(--space-3, 12px); flex-wrap: wrap; margin-top: var(--space-8, 32px); }
.hero__chain { margin-top: var(--space-12, 48px); padding-top: var(--space-6, 24px); border-top: 1px solid oklch(1 0 0 / 0.2); }

@media (max-width: 640px) {
  .hero { min-height: 560px; }
}

/* ============ Mission ============ */
.mission__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-16, 64px); align-items: start; }
.mission__text { font: var(--type-body, 400 16px/1.65 var(--font-sans)); font-size: var(--text-md, 18px); margin-top: var(--space-5, 20px); max-width: 640px; }
.mission__cards { display: grid; gap: var(--space-4, 16px); }

@media (max-width: 900px) {
  .mission__grid { grid-template-columns: 1fr; }
}

/* ============ Purposes ============ */
.purposes__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4, 16px); margin-top: var(--space-8, 32px); }
.card--purpose {
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle, #E1E4E8);
  border-top: 3px solid var(--brand-accent);
  transition: box-shadow var(--duration-normal, .22s) var(--ease-standard, ease), transform var(--duration-normal, .22s) var(--ease-standard, ease);
  box-shadow: var(--shadow-sm);
}
.card--purpose:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.purpose__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full, 999px); }
.purpose__icon svg { width: 22px; height: 22px; }

/* ============ AVIDE's Way ============ */
.section--way { background: var(--surface-inverse, #283350); color: var(--text-on-dark, #fff); padding-bottom: var(--section-y, clamp(32px, 3.5vw, 48px)); }
.section--way .container { position: relative; z-index: 1; }
.way__grid { display: flex; gap: var(--space-10, 40px); align-items: center; flex-wrap: wrap; margin-top: var(--space-12, 48px); }

.pyramid { display: flex; gap: var(--space-4, 16px); align-items: stretch; flex: none; }
.pyramid__rail { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-block: 4px; }
.pyramid__rail-label {
  font: var(--weight-bold, 700) var(--text-2xs, 11px)/1 var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow, 0.16em);
  color: var(--brand-highlight, #FCB415);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.pyramid__rail-line { flex: 1; width: 2px; border-radius: 1px; background: oklch(1 0 0 / 0.28); }
.pyramid__bands { width: 480px; max-width: 100%; display: flex; flex-direction: column; gap: 4px; }
.pyramid__band {
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 12px);
}
/* Frustum bands: halfWidth(y) = 15 + 35y across the whole pyramid's height,
   band-1 = Cống hiến (top, narrowest) .. band-4 = Kết nối (base, widest). */
.pyramid__band--1 { clip-path: polygon(35% 0%, 65% 0%, 73.75% 100%, 26.25% 100%); }
.pyramid__band--2 { clip-path: polygon(26.25% 0%, 73.75% 0%, 82.5% 100%, 17.5% 100%); }
.pyramid__band--3 { clip-path: polygon(17.5% 0%, 82.5% 0%, 91.25% 100%, 8.75% 100%); }
.pyramid__band--4 { clip-path: polygon(8.75% 0%, 91.25% 0%, 100% 100%, 0% 100%); }
.pyramid__num { font: var(--weight-black, 800) var(--text-xs, 12px)/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.pyramid__label { font: var(--weight-black, 800) 22px/1.25 var(--font-sans); letter-spacing: -0.01em; white-space: nowrap; }

.way__legend { flex: 1 1 250px; min-width: 230px; display: flex; flex-direction: column; gap: var(--space-4, 16px); }
.way__legend-row { display: flex; gap: var(--space-3, 12px); align-items: flex-start; }
.way__legend-dot { width: 12px; height: 12px; flex: none; margin-top: 5px; border-radius: var(--radius-full, 999px); }
.way__legend-copy { display: flex; flex-direction: column; gap: 2px; }
.way__legend-term { font: var(--weight-bold, 700) var(--text-base, 16px)/1.35 var(--font-sans); color: var(--text-on-dark, #fff); }
.way__legend-en { font: 400 var(--text-xs, 12px)/1 var(--font-sans); color: var(--navy-300, #A9B6CF); margin-left: 8px; }
.way__legend-body { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-on-dark-muted, #CCD6EB); }

.way__note { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-on-dark-muted, #CCD6EB); margin-top: var(--space-10, 40px); max-width: 620px; }
.way__note strong { color: var(--text-on-dark, #fff); font-weight: var(--weight-semibold, 600); }

@media (max-width: 640px) {
  /* The pyramid is `flex: none`, so on its own wrapped row its width came from
     its own max-content, which is the rail label: 138px on a 390px phone, a
     third of the row, with every band label cut off by the frustum. Give it
     the whole row and let the bands take what the rail does not use. */
  .pyramid { flex: 1 1 100%; width: 100%; min-width: 0; gap: var(--space-3, 12px); }
  .pyramid__bands { flex: 1 1 auto; width: auto; min-width: 0; }
  .pyramid__band { height: 66px; gap: var(--space-2, 8px); }
  /* A gentler taper on phones: halfWidth(y) = 28 + 22y instead of 15 + 35y.
     The desktop frustum leaves the top band about 100px of usable centre at
     this width, and "Cống hiến" plus its number does not set in 100px. */
  .pyramid__band--1 { clip-path: polygon(22% 0%, 78% 0%, 83.5% 100%, 16.5% 100%); }
  .pyramid__band--2 { clip-path: polygon(16.5% 0%, 83.5% 0%, 89% 100%, 11% 100%); }
  .pyramid__band--3 { clip-path: polygon(11% 0%, 89% 0%, 94.5% 100%, 5.5% 100%); }
  .pyramid__band--4 { clip-path: polygon(5.5% 0%, 94.5% 0%, 100% 100%, 0% 100%); }
  .pyramid__label { font-size: 18px; }
  .way__grid { gap: var(--space-8, 32px); margin-top: var(--space-8, 32px); }
  .way__note { margin-top: var(--space-8, 32px); }
}

@media (max-width: 380px) {
  .pyramid__band { height: 60px; }
  .pyramid__label { font-size: 16px; }
}

/* ============ Stats + CTA ============ */
.stats__row { position: relative; display: flex; gap: var(--space-16, 64px); flex-wrap: wrap; align-items: center; justify-content: space-between; }
.stats__list { display: flex; gap: var(--space-16, 64px); flex-wrap: wrap; }
.stat-block { display: flex; flex-direction: column; gap: 4px; }
.stat-block__value { font: var(--weight-black, 800) var(--text-4xl, 48px)/1 var(--font-sans); color: var(--text-brand, #A52610); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-block__label { font: var(--type-label, 600 14px/1.5 var(--font-sans)); color: var(--text-heading, #283350); }
.stat-block__sub { font: 400 var(--text-xs, 12px)/1.5 var(--font-sans); color: var(--text-muted, #5B6270); }
.stats__cta { flex: 1 1 320px; max-width: 420px; }
.stats__cta .btn { margin-top: var(--space-5, 20px); }

/* ============ Footer ============ */
/* Sections use top-only padding, so the last section has no bottom padding.
 * This margin gives the light content a breathing gap before the dark footer
 * band, on every page regardless of which section ends it. */
.site-footer { position: relative; background: var(--surface-inverse, #283350); color: var(--text-on-dark, #fff); overflow: hidden; margin-top: var(--section-y, clamp(32px, 3.5vw, 48px)); }
.site-footer a { color: var(--text-on-dark-muted, #CCD6EB); text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer__dots { position: absolute; inset: 0; background-image: radial-gradient(#fff 1.5px, transparent 1.6px); background-size: 22px 22px; opacity: 0.1; pointer-events: none; }
.site-footer__inner { position: relative; padding-block: clamp(var(--space-10, 40px), 4.5vw, var(--space-16, 64px)) var(--space-8, 32px); }
.site-footer__top { display: flex; gap: var(--space-16, 64px); flex-wrap: wrap; align-items: flex-start; }
.site-footer__brand { flex: 1 1 300px; min-width: 260px; }
.site-footer__brand img { display: block; }
.site-footer__desc { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-on-dark-muted, #CCD6EB); margin-top: var(--space-4, 16px); max-width: 380px; }
.site-footer__social { margin-top: var(--space-6, 24px); }
.site-footer__social-label { display: block; font: 400 var(--text-2xs, 11px)/1.4 var(--font-sans); color: var(--navy-300, #A9B6CF); margin-bottom: var(--space-3, 12px); }
.social-links { display: flex; gap: var(--space-2, 8px); }
.social-links__item {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-full, 999px);
  background: oklch(1 0 0 / 0.1); color: var(--text-on-dark, #fff);
  transition: var(--transition-control);
}
.social-links__item:hover { background: oklch(1 0 0 / 0.2); color: var(--brand-highlight, #FCB415); }
.social-links__item svg { width: 19px; height: 19px; }

.site-footer__col { flex: 0 1 180px; }
.site-footer__col-title { font: var(--type-eyebrow, 700 12px/1.5 var(--font-sans)); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow, 0.16em); color: var(--brand-highlight, #FCB415); margin-bottom: var(--space-3, 12px); }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1, 6px); }
.site-footer__list a { font: var(--type-body-sm, 400 14px/1.4 var(--font-sans)); }

.site-footer__contact { margin-top: var(--space-12, 48px); padding-top: var(--space-6, 24px); border-top: 1px solid var(--navy-600, #3A4A6E); display: flex; gap: var(--space-8, 32px); flex-wrap: wrap; align-items: flex-start; }
.site-footer__contact-label { font: var(--type-eyebrow, 700 12px/1.5 var(--font-sans)); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow, 0.16em); color: var(--brand-highlight, #FCB415); flex: 0 0 auto; padding-top: 3px; }
.site-footer__contact-grid { flex: 1 1 460px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-6, 24px) var(--space-8, 32px); }
.site-footer__contact-item { display: flex; flex-direction: column; gap: 2px; }
.site-footer__contact-key { font: 400 var(--text-2xs, 11px)/1.4 var(--font-sans); color: var(--navy-300, #A9B6CF); }
.site-footer__contact-item a,
.site-footer__contact-val { font: var(--weight-medium, 500) var(--text-sm, 14px)/1.5 var(--font-sans); color: var(--text-on-dark, #fff); }

/* Novodan related-party disclosure: always body text size, never smaller.
   Governance requirement, not a design nicety - do not shrink this. */
.avide-disclosure { position: relative; color: #fff; font-size: var(--text-base,1rem); line-height: var(--leading-relaxed,1.65); margin-top: var(--space-6, 24px); padding-top: var(--space-6, 24px); border-top: 1px solid var(--navy-600, #3A4A6E); }
.avide-disclosure__title { color:#fff; font-size:var(--text-base,1rem); font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-bottom:var(--space-2,8px); }
.avide-disclosure p { margin:0; }

.site-footer__bottom { position: relative; margin-top: var(--space-8, 32px); padding-top: var(--space-6, 24px); border-top: 1px solid var(--navy-600, #3A4A6E); display: flex; justify-content: space-between; gap: var(--space-4, 16px); flex-wrap: wrap; }
.site-footer__bottom span:first-child { font: 400 var(--text-xs, 12px)/1.5 var(--font-sans); color: var(--navy-300, #A9B6CF); }
.site-footer__chain { font: var(--weight-medium, 500) var(--text-xs, 12px)/1.5 var(--font-sans); color: var(--text-on-dark-muted, #CCD6EB); white-space: nowrap; }

/* The footer sits on a navy (dark) surface, so its own focusable elements
   need the amber on-dark ring, not the navy light-surface ring from the
   base :focus-visible rule. Scoped to .site-footer only; header and the
   rest of the page keep the navy ring. */
.site-footer :focus-visible { outline:none; box-shadow:var(--ring-focus-inverse, 0 0 0 3px var(--focus-ring-on-dark, #FCB415)); border-radius:var(--radius-xs,2px); }

/* Stacked footer on phones. The 64px flex gap that sets the columns apart on a
   wide screen becomes 64px of empty navy between every block once they stack,
   which was most of the footer's height: 1546px, four screenfuls of mostly
   nothing. Two columns, tighter gaps, and no dead half-row. */
@media (max-width: 768px) {
  .site-footer__inner { padding-block: var(--space-8, 32px) var(--space-6, 24px); }
  .site-footer__top {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6, 24px) var(--space-6, 24px);
  }
  .site-footer__brand { grid-column: 1 / -1; min-width: 0; }
  .site-footer__col { min-width: 0; }
  .site-footer__social { margin-top: var(--space-4, 16px); }

  /* Three columns in a two-column grid leave the last one beside an empty
     half-row -- the largest single hole in the mobile footer. Give the last
     column the full width and set its links two-up instead, which closes the
     hole and costs two rows of height rather than five. */
  .site-footer__top > .site-footer__col:last-child { grid-column: 1 / -1; }
  .site-footer__top > .site-footer__col:last-child .site-footer__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2, 8px) var(--space-6, 24px);
  }

  .site-footer__contact { margin-top: var(--space-6, 24px); padding-top: var(--space-5, 20px); gap: var(--space-3, 12px); }
  .site-footer__contact-grid { flex-basis: 100%; gap: var(--space-4, 16px) var(--space-6, 24px); }
  .site-footer__bottom { margin-top: var(--space-5, 20px); padding-top: var(--space-4, 16px); }
}

@media (max-width: 640px) {
  /* space-between leaves the three bottom items at odd distances once they
     wrap; a column reads as three lines, which is what they are. */
  .site-footer__bottom { flex-direction: column; gap: var(--space-3, 12px); }
  /* The legal links inherit the 16px body size while everything else on this
     row sets 12px, so they wrapped onto a line each and read as the loudest
     thing in the footer. At 12px both fit one row and match their neighbours. */
  .site-footer__legal { gap: var(--space-3, 12px); }
  .site-footer__legal a { font-size: var(--text-xs, 12px); }
  /* "Kết nối – Tương trợ – Phát triển – Cống hiến" sets 265px wide and must be
     allowed to wrap, or it runs off a 320px screen. */
  .site-footer__chain { white-space: normal; }
}

@media (max-width: 900px) {
  .purposes__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* .hero is a flex container, so .hero__content sits at its own min-content
     width -- which the nowrap CTA label sets. In Danish and English that label
     is wide enough to push the hero box past the viewport, and .hero's
     overflow:hidden then cut the right edge off the title and the buttons.
     Let the box shrink and let the long labels wrap. */
  .hero__content { min-width: 0; }
  .hero__actions { width: 100%; }
  .hero__title { font-size: var(--text-3xl, 38px); }
  /* Same cause, same fix, for the stats CTA card: `flex: 1 1 320px` cannot
     shrink below the min-content its own button sets. */
  .stats__cta { min-width: 0; }
  /* A button label is nowrap by default, so a long one ("Membership
     Registration", "Medlemsregistrering") becomes the min-content width of
     every box that holds it and pushes it past a phone viewport. On a phone a
     two-line button is better than a clipped one. */
  .btn { white-space: normal; text-align: center; }
  /* Pasted page content (the Điều lệ page is the live example) carries runs of
     non-breaking spaces from Word, which the browser reads as one unbreakable
     84-character word and lets overflow, giving that page a sideways scroll on
     a phone. Breaking mid-run is the lesser evil; the real fix is to strip the
     nbsp from the post itself. */
  .entry-content, .prose { overflow-wrap: break-word; }
  .purposes__grid { grid-template-columns: 1fr; }
  .stats__row { gap: var(--space-8, 32px); }
  .stats__list { gap: var(--space-8, 32px); }
}

/* ── Inner-page header band (PageHeader): one height for every page at a given
   width, so the fold never shifts between pages; content bottom-aligned. The
   height tracks the viewport rather than sitting at a flat 300px, which ate
   most of a phone screen before any content appeared. Home is exempt (photo
   hero). ── */
.page-header { position: relative; overflow: hidden; background: var(--surface-sunken, #EFF1F5); border-bottom: 1px solid var(--border-subtle, #E1E4E8); }
.page-header__inner { position: relative; min-height: clamp(190px, 21vw, 300px); display: flex; flex-direction: column; justify-content: flex-end; padding-top: clamp(var(--space-10, 40px), 4.5vw, var(--space-16, 64px)); padding-bottom: clamp(var(--space-8, 32px), 3.4vw, var(--space-12, 48px)); }
.page-header h1 { font: var(--type-h1, 800 48px/1.25 var(--font-sans)); font-size: clamp(var(--text-3xl, 38px), 5vw, var(--text-4xl, 48px)); line-height: 1.25; margin: 0; }
.page-header__desc { max-width: var(--container-md, 840px); margin-top: var(--space-3, 12px); color: var(--text-muted, #55595F); }

/* ── Cộng đồng ── */
.community-stages { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5, 20px); margin-top: var(--space-10, 48px); }
.community-stage { position: relative; }
.community-stage__dot { display: block; width: 12px; height: 12px; border-radius: var(--radius-full, 999px); margin-bottom: var(--space-3, 12px); }
.community-stage__title { font: var(--type-h3, 700 20px/1.25 var(--font-sans)); margin: 0 0 var(--space-2, 8px); }
.community-stage__en { font: 400 var(--text-xs, 12px)/1.5 var(--font-sans); color: var(--text-muted, #55595F); margin-left: var(--space-1, 4px); }
.community-stage__body { font: 400 var(--text-sm, 14px)/1.5 var(--font-sans); color: var(--text-muted, #55595F); margin: 0; }
.community-stories__invite { margin-top: var(--space-8, 32px); }

/* ── Figure: fixed-ratio branded empty state (design system Figure) ── */
.figure { position: relative; overflow: hidden; border-radius: var(--radius-md, 8px); background: var(--surface-sunken, #EFF1F5); border: 1px dashed var(--border-default, #CDD0D6); }
.figure--16x9 { aspect-ratio: 16 / 9; }
.figure--wide { aspect-ratio: 21 / 9; }
.figure > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.figure--empty { display: flex; align-items: center; justify-content: center; background-image: repeating-linear-gradient(45deg, transparent 0 12px, oklch(0.55 0.02 265 / 0.06) 12px 24px); }
.figure__label { font: 500 var(--text-2xs, 11px)/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-muted, #55595F); letter-spacing: 0.08em; }
.cards.cards--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5, 20px); margin-top: var(--space-10, 48px); }
@media (max-width: 900px) { .community-stages { grid-template-columns: repeat(2, 1fr); } .cards.cards--3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .community-stages { grid-template-columns: 1fr; } }

/* ── Inner-page content: prose column for Gutenberg/UM/Jetpack output ── */
article.page, article.post { padding-block: var(--section-y, clamp(40px, 4.5vw, 64px)); }
.entry-content.prose { max-width: var(--container-md, 840px); margin-inline: auto; }
.prose > * + * { margin-top: var(--space-4, 16px); }
.prose h2 { font: var(--type-h2, 700 30px/1.25 var(--font-sans)); margin-top: var(--space-10, 48px); }
.prose h3 { font: var(--type-h3, 700 20px/1.25 var(--font-sans)); margin-top: var(--space-8, 32px); }
.prose p, .prose li { font: 400 var(--text-base, 16px)/var(--leading-relaxed, 1.65) var(--font-sans); color: var(--text-body, #3D4048); }
.prose ul, .prose ol { padding-left: var(--space-6, 24px); }
.prose li + li { margin-top: var(--space-2, 8px); }

/* ── Nav: depth-2 submenus (Giới thiệu -> Điều lệ / Đối Tác etc.) ── */
.site-nav__list li { position: relative; }
.site-nav__list .sub-menu {
  display: none;
  position: absolute; top: 100%; left: 0; z-index: 10;
  list-style: none; margin: 0; padding: var(--space-2, 8px);
  min-width: 200px;
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle, #E1E4E8);
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-md, 0 8px 24px rgba(40,51,80,.14));
}
.site-nav__list li:hover > .sub-menu,
.site-nav__list li:focus-within > .sub-menu { display: block; }
.site-nav__list .sub-menu a { display: block; padding: 8px 12px; white-space: nowrap; }

/* ── Giới thiệu (About) ── */
.about-articles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6, 24px); }
.about-article { display: flex; gap: var(--space-4, 16px); }
.about-article__num { font: var(--weight-black, 800) var(--text-2xl, 28px)/1 var(--font-sans); color: var(--text-brand, #A52610); flex: none; width: 34px; font-variant-numeric: tabular-nums; }
.about-article__body { font: 400 var(--text-base, 16px)/var(--leading-relaxed, 1.65) var(--font-sans); color: var(--text-body, #3D4048); margin: 0; }

.about-values {
  margin-top: var(--space-12, 48px); padding: var(--space-6, 24px);
  background: var(--surface-brand-soft, #FDECEA); border-radius: var(--radius-lg, 12px);
  display: flex; gap: var(--space-6, 24px); flex-wrap: wrap; align-items: center; justify-content: space-between;
}
.about-values__label { font: var(--type-label, 600 14px/1.5 var(--font-sans)); color: var(--red-700, #A52610); }
.about-values__chain { margin-top: var(--space-3, 12px); }
.about-values__note { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--red-800, #7E1D0C); }

.functions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4, 16px); margin-top: var(--space-8, 32px); }
.function-card { display: flex; flex-direction: column; gap: var(--space-4, 16px); background: var(--surface-card, #fff); border: 1px solid var(--border-subtle, #E1E4E8); box-shadow: var(--shadow-sm); }
.function-card__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-full, 999px);
  background: var(--brand-primary, #283350); color: var(--text-on-dark, #fff);
  font: var(--weight-bold, 700) var(--text-sm, 14px)/1 var(--font-sans);
}
.function-card__title { font: var(--type-h3, 700 20px/1.25 var(--font-sans)); color: var(--text-heading, #283350); }

/* ── Partners / sponsors ── */
.partners-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8, 32px); margin-top: var(--space-8, 32px); align-items: stretch; }
.partners-top > .partner-card { height: 100%; }
.partner-card--ceased .partner-card__logo { height: 64px; max-width: 64px; opacity: 0.9; }
.partners-tracks-full { margin-top: var(--space-12, 48px); padding-top: var(--space-8, 32px); border-top: 1px solid var(--border-subtle, #E1E4E8); }
.partner-tracks--row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-6, 24px); border-top: 0; margin-top: var(--space-4, 16px); }
.partner-tracks--row .partner-track { border: 1px solid var(--border-subtle, #E1E4E8); border-radius: var(--radius-md, 8px); padding: var(--space-4, 16px); flex-direction: column; align-items: flex-start; gap: var(--space-3, 12px); }
@media (max-width: 767px) { .partners-top { grid-template-columns: 1fr; } }
.partners-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--space-12, 48px); margin-top: var(--space-8, 32px); align-items: start; }
.partners-col-label { font: var(--type-label, 600 14px/1.5 var(--font-sans)); color: var(--text-muted, #5B6270); }
.partner-list { display: flex; flex-direction: column; gap: var(--space-4, 16px); margin-top: var(--space-4, 16px); }
.partner-card { display: flex; flex-direction: column; gap: var(--space-4, 16px); background: var(--surface-card, #fff); border: 1px solid var(--border-subtle, #E1E4E8); box-shadow: var(--shadow-sm); }
.partner-card__head { display: flex; gap: var(--space-4, 16px); align-items: center; }
.partner-card__logo { height: 40px; width: auto; max-width: 130px; object-fit: contain; flex: none; }
.partner-card__name { font: var(--weight-bold, 700) var(--text-base, 16px)/1.35 var(--font-sans); color: var(--text-heading, #283350); text-decoration: none; }
.partner-card__meta { display: flex; gap: var(--space-2, 8px); align-items: center; flex-wrap: wrap; }
.partner-card__value { font: var(--weight-bold, 700) var(--text-sm, 14px)/1 var(--font-sans); color: var(--text-heading, #283350); }
.partner-card__summary { font: 400 var(--text-xs, 12px)/1.4 var(--font-sans); color: var(--text-muted, #5B6270); flex-basis: 100%; }
.partners-caption { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-muted, #5B6270); margin-top: var(--space-6, 24px); }
.note-toggle summary {
  display: flex; align-items: center; gap: var(--space-2, 8px);
  list-style: none; cursor: pointer; width: fit-content;
  font: var(--weight-semibold, 600) var(--text-sm, 14px)/1.5 var(--font-sans);
  color: var(--text-link, #A52610);
}
.note-toggle summary::-webkit-details-marker { display: none; }
.note-toggle summary svg { width: 16px; height: 16px; transition: transform var(--duration-normal, .22s) var(--ease-standard, ease); }
.note-toggle[open] summary svg { transform: rotate(180deg); }
.note-toggle__body { display: flex; flex-direction: column; gap: var(--space-4, 16px); margin-top: var(--space-4, 16px); }
.note-toggle__text { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-body, #3D4048); }

.rate-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4, 16px); align-items: baseline; padding: var(--space-2, 8px) 0; border-top: 1px solid var(--border-subtle, #E1E4E8); }
.rate-row__detail { color: var(--text-muted, #5B6270); }
.rate-row__val { font: var(--weight-semibold, 600) var(--text-sm, 14px)/1.5 var(--font-sans); color: var(--text-heading, #283350); font-variant-numeric: tabular-nums; }
.rate-group-label { font: var(--type-label, 600 14px/1.5 var(--font-sans)); color: var(--text-muted, #5B6270); margin-bottom: var(--space-1, 4px); }
.rate-row--total { border-top: 2px solid var(--border-strong, #283350); }
.rate-row--total .rate-row__label,
.rate-row--total .rate-row__val { font-weight: var(--weight-bold, 700); }
.rate-basis { font: 400 var(--text-sm, 14px)/1.6 var(--font-sans); color: var(--text-body, #3D4048); }

/* Related-party disclosure, embedded beside the sponsor entry it discloses.
   Body-size text, never smaller - governance requirement (see spec §2 rule 4). */
.disclosure-inline { display: flex; gap: var(--space-3, 12px); padding: var(--space-3, 12px); border-radius: var(--radius-md, 8px); background: var(--surface-sunken, #F1F3F6); }
.disclosure-inline__icon { color: var(--text-muted, #5B6270); flex: none; margin-top: 1px; }
.disclosure-inline__icon svg { width: 16px; height: 16px; }
.disclosure-inline__body { font: 400 var(--text-sm, 14px)/1.6 var(--font-sans); color: var(--text-body, #3D4048); }
.disclosure-inline__title { font-weight: var(--weight-semibold, 600); color: var(--text-heading, #283350); }

.partner-tracks { margin-top: var(--space-4, 16px); border-top: 1px solid var(--border-subtle, #E1E4E8); }
.partner-track { display: flex; gap: var(--space-4, 16px); padding: var(--space-4, 16px) 0; border-bottom: 1px solid var(--border-subtle, #E1E4E8); align-items: flex-start; }
.partner-track__body { flex: 1; }
.partner-track__title { font: var(--weight-bold, 700) var(--text-base, 16px)/1.4 var(--font-sans); color: var(--text-heading, #283350); }
.partner-track__desc { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-muted, #5B6270); margin-top: 3px; }

.partners-bottom { display: grid; grid-template-columns: minmax(240px, 0.7fr) minmax(320px, 1.6fr); gap: var(--space-12, 48px); margin-top: var(--space-12, 48px); padding-top: var(--space-8, 32px); border-top: 1px solid var(--border-subtle, #E1E4E8); align-items: start; }
.past-supporters { display: flex; gap: var(--space-4, 16px); flex-wrap: wrap; margin-top: var(--space-4, 16px); }
.past-supporter-card { display: flex; flex-direction: column; gap: var(--space-2, 8px); align-items: center; width: 190px; background: var(--surface-sunken, #F1F3F6); }
.past-supporter-card img { height: 42px; width: auto; max-width: 140px; object-fit: contain; opacity: 0.75; }
.past-supporter-card__name { font: var(--weight-semibold, 600) var(--text-xs, 12px)/1.4 var(--font-sans); color: var(--text-heading, #283350); text-align: center; }

.tech-programs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6, 24px); margin-top: var(--space-4, 16px); }
.tech-program { display: flex; gap: var(--space-3, 12px); align-items: flex-start; }
.tech-program__icon { color: var(--brand-primary, #283350); flex: none; margin-top: 2px; }
.tech-program__icon svg { width: 18px; height: 18px; }
.tech-program__name { font: var(--weight-bold, 700) var(--text-sm, 14px)/1.4 var(--font-sans); color: var(--text-heading, #283350); display: block; }
.tech-program__body { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-muted, #5B6270); }

.leverage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4, 16px); margin-top: var(--space-8, 32px); }
.leverage-card { background: var(--surface-card, #fff); border: 1px solid var(--border-subtle, #E1E4E8); box-shadow: var(--shadow-sm); }
.leverage-card--inverse { background: var(--surface-inverse, #283350); border-color: transparent; color: var(--text-on-dark, #fff); }
.leverage-card__icon svg { width: 22px; height: 22px; }
.leverage-card--inverse .leverage-card__icon { color: var(--text-on-dark, #fff); }
.leverage-card__icon { color: var(--text-brand, #A52610); }
.leverage-card__title { font: var(--type-h3, 700 20px/1.25 var(--font-sans)); margin-top: var(--space-4, 16px); }
.leverage-card--inverse .leverage-card__title { color: var(--text-on-dark, #fff); }
.leverage-card__body { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-muted, #5B6270); margin-top: var(--space-2, 8px); }
.leverage-card--inverse .leverage-card__body { color: var(--text-on-dark-muted, #CCD6EB); }
.figure--4x3 { aspect-ratio: 4 / 3; }

/* Generic badge (design system Badge component) */
.badge { display: inline-flex; align-items: center; gap: var(--space-2, 8px); padding: 4px 10px; border-radius: var(--radius-full, 999px); font: var(--weight-semibold, 600) var(--text-xs, 12px)/1.4 var(--font-sans); white-space: nowrap; border: 1px solid transparent; }
.badge__dot { width: 6px; height: 6px; border-radius: var(--radius-full, 999px); background: currentColor; flex: none; }
.badge--neutral { background: var(--neutral-100, #F4F5F7); color: var(--text-body, #3D4048); border-color: var(--neutral-200, #E1E4E8); }
.badge--navy { background: var(--navy-50, #F2F4F8); color: var(--navy-700, #283350); border-color: var(--navy-100, #E1E5EE); }
.badge--success { background: var(--success-50, #EEF7F1); color: var(--success-500, #2F7A4B); border-color: var(--success-50, #EEF7F1); }
.badge--brand { background: var(--red-50, #FDECEA); color: var(--red-700, #A52610); border-color: var(--red-100, #F8CFC9); }

/* Generic tag (design system Tag component): a filter/topic chip, display-only here (no onClick). */
.tag { display: inline-flex; align-items: center; gap: var(--space-2, 8px); padding: 7px 14px; border-radius: var(--radius-full, 999px); border: 1px solid var(--border-subtle, #E1E4E8); background: var(--surface-card, #fff); color: var(--text-body, #3D4048); font: var(--weight-medium, 500) var(--text-sm, 14px)/1.3 var(--font-sans); white-space: nowrap; }

@media (max-width: 900px) {
  .partners-grid { grid-template-columns: 1fr; }
  .partners-bottom { grid-template-columns: 1fr; }
}
.prose blockquote { border-left: 3px solid var(--brand-primary, #283350); padding-left: var(--space-5, 20px); color: var(--text-muted, #55595F); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm, 14px); }
.prose th, .prose td { border: 1px solid var(--border-subtle, #E1E4E8); padding: var(--space-2, 8px) var(--space-3, 12px); text-align: left; }
.prose th { background: var(--surface-sunken, #EFF1F5); color: var(--text-heading, #283350); }
.prose img { border-radius: var(--radius-md, 8px); }
.prose hr { border: 0; border-top: 1px solid var(--border-subtle, #E1E4E8); margin-block: var(--space-8, 32px); }
.prose .has-text-align-center { text-align: center; }
.prose .wp-block-buttons .wp-block-button__link { background: var(--red-600, #D13217); color: #fff; border-radius: var(--radius-full, 999px); padding: var(--space-3, 12px) var(--space-6, 24px); text-decoration: none; }
.entry-thumb { max-width: var(--container-md, 840px); margin: var(--space-8, 32px) auto 0; }
.entry-thumb img { width: 100%; height: auto; border-radius: var(--radius-lg, 12px); }

/* ── Archive card grid ── */
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5, 20px); }
.archive-card { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.archive-card__media { display: block; border-radius: var(--radius-md, 8px); overflow: hidden; }
.archive-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.archive-card__title { font: var(--type-h3, 700 20px/1.25 var(--font-sans)); margin: 0; }
.archive-card__title a { color: var(--text-heading, #283350); text-decoration: none; }
.archive-card__title a:hover { color: var(--text-link, #A52610); }
.archive-card__excerpt { font: 400 var(--text-sm, 14px)/1.5 var(--font-sans); color: var(--text-muted, #55595F); margin: 0; }
.archive-pagination { margin-top: var(--space-10, 48px); text-align: center; }
.archive-pagination .page-numbers { display: inline-block; padding: var(--space-2, 8px) var(--space-3, 12px); border-radius: var(--radius-md, 8px); text-decoration: none; color: var(--text-heading, #283350); }
.archive-pagination .page-numbers.current { background: var(--brand-primary, #283350); color: #fff; }
@media (max-width: 900px) { .archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .archive-grid { grid-template-columns: 1fr; } }

/* ── Hoạt động (Activities): year-grouped programme list ── */
.activity-year-group + .activity-year-group { margin-top: var(--space-10, 48px); }
.activity-year-group__heading { font: var(--type-h2, 700 32px/1.25 var(--font-sans)); color: var(--text-heading, #283350); margin: 0 0 var(--space-6, 24px); }
.activity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-6, 24px); }
.activity-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.activity-card__media { display: block; }
.activity-card__media .figure { border: 0; border-radius: 0; }
.activity-card__body { display: flex; flex-direction: column; gap: var(--space-3, 12px); flex: 1; padding: var(--space-6, 24px); }
.activity-card__meta-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2, 8px); flex-wrap: wrap; }
.activity-card__title { font: var(--type-h3, 700 20px/1.25 var(--font-sans)); color: var(--text-heading, #283350); margin: 0; }
.activity-card__title a { color: inherit; text-decoration: none; }
.activity-card__title a:hover { color: var(--text-link, #A52610); }
.activity-card__date { color: var(--text-muted, #55595F); font: var(--weight-medium, 500) var(--text-xs, 12px)/1.3 var(--font-sans); }
.activity-card__excerpt { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-muted, #55595F); margin: 0; flex: 1; }
.activity-card__footer { display: flex; gap: var(--space-4, 16px); padding-top: var(--space-3, 12px); border-top: 1px solid var(--border-subtle, #E1E4E8); color: var(--text-muted, #55595F); flex-wrap: wrap; }
.activity-card__read-more { display: inline-flex; align-items: center; gap: 6px; color: var(--text-link, #A52610); font: var(--weight-semibold, 600) var(--text-sm, 14px)/1.3 var(--font-sans); text-decoration: none; }
.activity-card__read-more svg { width: 14px; height: 14px; flex: none; }
.activity-card__no-image { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-image: repeating-linear-gradient(45deg, transparent 0 12px, oklch(0.55 0.02 265 / 0.06) 12px 24px); }
@media (max-width: 640px) { .activity-grid { grid-template-columns: 1fr; } }

/* ── Cộng đồng (Community stories): single grid, tag-filterable ── */
.story-stage-group + .story-stage-group { margin-top: var(--space-10, 48px); }
.story-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-5, 20px); }
@media (max-width: 640px) { .story-grid { grid-template-columns: 1fr; } }
.story-stage-group__title { display: flex; align-items: center; gap: var(--space-2, 8px); font: var(--type-h3, 700 20px/1.25 var(--font-sans)); color: var(--text-heading, #283350); margin: 0 0 var(--space-5, 20px); }
.story-stage-group__dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-full, 999px); flex: none; }
.story-stage-group__en { font: 400 var(--text-xs, 12px)/1.5 var(--font-sans); color: var(--text-muted, #55595F); }
.story-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.story-card[hidden], .activity-card[hidden] { display: none; }
.story-card__media .figure { border-radius: 0; }
.story-card__body { display: flex; flex-direction: column; gap: var(--space-3, 12px); flex: 1; padding: var(--space-6, 24px); }
.story-card__meta-row { display: flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap; }
.story-card__title { font: var(--type-h3, 700 20px/1.25 var(--font-sans)); margin: 0; }
.story-card__title a { color: var(--text-heading, #283350); text-decoration: none; }
.story-card__title a:hover { color: var(--text-link, #A52610); }
.story-card__excerpt { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-muted, #55595F); margin: 0; flex: 1; }
.story-card__read-more { display: inline-flex; align-items: center; gap: 6px; padding-top: var(--space-3, 12px); border-top: 1px solid var(--border-subtle, #E1E4E8); color: var(--text-link, #A52610); font: var(--weight-semibold, 600) var(--text-sm, 14px)/1.3 var(--font-sans); text-decoration: none; }
.story-card__read-more svg { width: 14px; height: 14px; flex: none; }

/* Generic stage chip (design system "chip"): a coloured dot + label, distinct
 * from .tag (neutral topic/type label) and .badge (status). Colour comes
 * from the --chip-color custom property set inline per stage/type; text
 * stays navy ink, never the brand red, per the red-is-a-fill-never-text rule. */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-full, 999px); border: 1px solid var(--border-subtle, #E1E4E8); background: var(--surface-card, #fff); color: var(--text-body, #3D4048); font: var(--weight-medium, 500) var(--text-xs, 12px)/1.3 var(--font-sans); white-space: nowrap; }
.chip__dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full, 999px); background: var(--chip-color, var(--navy-300, #AAB9D8)); flex: none; }

/* Filter bar (Cộng đồng + Hoạt động): accessible toggle buttons with
 * aria-pressed, filtered client-side by assets/js/community-filter.js /
 * activity-filter.js. No motion is animated, so nothing to gate behind
 * prefers-reduced-motion beyond the focus ring already respecting it. */
.story-filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); margin: var(--space-6, 24px) 0; }
.story-filter-bar--type { margin-top: 0; }
.story-filter__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-full, 999px); border: 1px solid var(--border-subtle, #E1E4E8); background: var(--surface-card, #fff); color: var(--text-body, #3D4048); font: var(--weight-medium, 500) var(--text-sm, 14px)/1.3 var(--font-sans); cursor: pointer; }
.story-filter__btn[aria-pressed="true"] { background: var(--brand-primary, #283350); border-color: var(--brand-primary, #283350); color: #fff; }
.story-filter__btn:focus-visible { outline: 2px solid var(--brand-primary, #283350); outline-offset: 2px; }
.story-filter__dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full, 999px); flex: none; }
.story-filter-empty { color: var(--text-muted, #55595F); font: 400 var(--text-sm, 14px)/1.5 var(--font-sans); }

/* Single designed empty state (zero stories total): replaces what used to be
 * four separate empty stage boxes. */
.story-empty-state { display: flex; flex-direction: column; align-items: center; gap: var(--space-4, 16px); padding: var(--space-10, 48px) var(--space-6, 24px); text-align: center; background: var(--surface-sunken, #EFF1F5); border-radius: var(--radius-lg, 12px); }
.story-empty-state__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-full, 999px); background: var(--surface-card, #fff); color: var(--text-brand, #A52610); }
.story-empty-state__icon svg { width: 22px; height: 22px; }
.story-empty-state__title { font: var(--weight-semibold, 600) var(--text-base, 16px)/1.5 var(--font-sans); color: var(--text-heading, #283350); margin: 0; }

/* ── single-avide_story.php ── */
.story-single-meta { display: flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap; }
.story-consent-note { display: flex; align-items: center; gap: var(--space-2, 8px); margin-top: var(--space-6, 24px); padding: var(--space-4, 16px) var(--space-5, 20px); background: var(--surface-sunken, #EFF1F5); border-radius: var(--radius-md, 8px); color: var(--text-muted, #55595F); font: 400 var(--text-sm, 14px)/1.5 var(--font-sans); max-width: var(--container-md, 840px); margin-inline: auto; margin-top: var(--space-8, 32px); }
.story-single-back { display: block; max-width: var(--container-md, 840px); margin: var(--space-10, 48px) auto 0; }
.story-single-invite { max-width: var(--container-md, 840px); margin: var(--space-6, 24px) auto 0; padding-top: var(--space-6, 24px); border-top: 1px solid var(--border-subtle, #E1E4E8); font: 400 var(--text-base, 16px)/1.5 var(--font-sans); color: var(--text-muted, #55595F); }

/* ── Ban Chấp Hành (Board) ── */
.card--inverse { background: var(--surface-inverse, #283350); color: var(--text-on-dark, #fff); }

.board-counts { padding-top: var(--space-6, 24px); padding-bottom: var(--space-4, 16px); }

.board-advisors-section { padding-top: var(--space-4, 16px); }
.board-advisors { position: relative; overflow: hidden; }
.board-advisors h2 { margin-top: var(--space-2, 8px); }
.board-advisors__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4, 16px); margin-top: var(--space-8, 32px); }
.board-advisors__note { font: 400 var(--text-sm, 14px)/1.6 var(--font-sans); color: var(--text-on-dark-muted, #CCD6EB); margin-top: var(--space-6, 24px); max-width: 78ch; }
.board-advisor-card { display: flex; gap: var(--space-4, 16px); align-items: center; background: var(--surface-card, #fff); }

.board-chair-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-8, 32px); align-items: stretch; }
.board-charter-card { display: flex; flex-direction: column; justify-content: center; }
.board-charter-card__body { font: var(--weight-bold, 700) var(--text-lg, 20px)/1.45 var(--font-sans); color: var(--red-800, #7E1D0C); margin-top: var(--space-3, 12px); }

.person-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-4, 16px); margin-top: var(--space-8, 32px); }
.person-grid--pair { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: stretch; }

.person-card { display: flex; gap: var(--space-4, 16px); align-items: flex-start; background: var(--surface-card, #fff); border: 1px solid var(--border-subtle, #E1E4E8); box-shadow: var(--shadow-sm); }
.person-card--featured { padding: var(--space-8, 32px); }
.person-card--inactive { opacity: 0.6; }
.person-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.person-card__name { font: var(--type-h3, 700 20px/1.25 var(--font-sans)); color: var(--text-heading, #283350); }
.person-card--featured .person-card__name { font: var(--weight-black, 800) var(--text-2xl, 28px)/1.2 var(--font-sans); }
.person-card__role { font: var(--weight-semibold, 600) var(--text-sm, 14px)/1.4 var(--font-sans); color: var(--text-brand, #A52610); }
.person-card__unit { font: var(--weight-medium, 500) var(--text-sm, 14px)/1.4 var(--font-sans); color: var(--text-heading, #283350); }
.person-card__unit-en { font: 400 var(--text-xs, 12px)/1.4 var(--font-sans); color: var(--text-muted, #5B6270); margin-left: 6px; }
.person-card__meta { display: flex; align-items: center; gap: 6px; font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-muted, #5B6270); margin-top: 2px; }
.person-card__meta svg { width: 14px; height: 14px; flex: none; }
.person-card__country { padding: 2px 8px; font-size: 10px; }
.person-card__badge { margin-top: var(--space-2, 8px); }

/* Avatar (design system Avatar component): initials on a coloured disc, no portraits. */
.avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: var(--radius-full, 999px); font: var(--weight-bold, 700) 1em/1 var(--font-sans); letter-spacing: 0.02em; }
.avatar--lg { width: 64px; height: 64px; font-size: 23px; }
.avatar--xl { width: 88px; height: 88px; font-size: 32px; }
.avatar--2xl { width: 120px; height: 120px; font-size: 43px; }
.avatar--navy { background: var(--navy-100, #EEF0F6); color: var(--navy-700, #283350); }
.avatar--brand { background: var(--red-100, #ECC1BB); color: var(--red-700, #9A2E17); }
.avatar--accent { background: var(--amber-100, #FDF1D8); color: var(--navy-900, #171D2C); }
/* Portrait avatar: real photo, same round frame as the initials disc. */
.avatar--photo { overflow: hidden; background: var(--surface-sunken, #EFF1F5); }
.avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.badge--amber-soft { background: var(--amber-100, #FDF1D8); color: var(--navy-900, #171D2C); border-color: var(--amber-200, #FBE3A8); }

.vacancy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4, 16px); margin-top: var(--space-8, 32px); }
.vacancy-card { display: flex; gap: var(--space-4, 16px); align-items: center; border-style: dashed; border-width: 1px; border-color: var(--border-default, #CDD0D6); box-shadow: none; background: var(--surface-card, #fff); }
.vacancy-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border-radius: var(--radius-full, 999px); border: 1px dashed var(--border-default, #CDD0D6); color: var(--text-muted, #5B6270); }
.vacancy-card__icon svg { width: 22px; height: 22px; }
.vacancy-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vacancy-card__role { font: var(--type-h3, 700 20px/1.25 var(--font-sans)); color: var(--text-heading, #283350); }
.vacancy-card__unit { font: var(--weight-medium, 500) var(--text-sm, 14px)/1.4 var(--font-sans); color: var(--text-brand, #A52610); }
.vacancy-card__unit-en { font: 400 var(--text-xs, 12px)/1.5 var(--font-sans); color: var(--text-muted, #5B6270); }
.vacancy-card__cta { display: block; font: var(--weight-semibold, 600) var(--text-sm, 14px)/1.4 var(--font-sans); margin-top: 2px; }

.division-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4, 16px); margin-top: var(--space-8, 32px); }
.division-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-full, 999px); background: var(--surface-card, #fff); color: var(--text-brand, #A52610); }
.division-card__icon svg { width: 21px; height: 21px; }
.division-card__title { font: var(--type-h3, 700 20px/1.25 var(--font-sans)); color: var(--text-heading, #283350); margin-top: var(--space-4, 16px); }
.division-card__en { font: 400 var(--text-xs, 12px)/1.4 var(--font-sans); color: var(--text-muted, #5B6270); margin-top: 2px; }
.division-card__body { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-muted, #5B6270); margin-top: var(--space-3, 12px); }

.board-role-card { display: flex; flex-direction: column; justify-content: center; }
.board-role-card__body { font: var(--weight-medium, 500) var(--text-base, 16px)/1.6 var(--font-sans); color: var(--text-body, #3D4048); margin-top: var(--space-3, 12px); }

/* ── Giới thiệu: Các ban chuyên môn (reuses .division-grid / .division-card) ── */
.about-divisions-link { margin-top: var(--space-6, 24px); font: var(--weight-semibold, 600) var(--text-sm, 14px)/1.4 var(--font-sans); }
.about-governance { margin-top: var(--space-10, 48px); }
.about-governance__label { font: var(--weight-semibold, 600) var(--text-sm, 14px)/1.4 var(--font-sans); color: var(--text-muted, #5B6270); text-transform: uppercase; letter-spacing: 0.04em; }
.governance-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4, 16px); margin-top: var(--space-4, 16px); }

@media (max-width: 900px) {
  .board-chair-grid { grid-template-columns: 1fr; }
  .board-advisors__grid { grid-template-columns: 1fr 1fr; }
  .division-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .person-grid { grid-template-columns: 1fr; }
  .board-advisors__grid { grid-template-columns: 1fr; }
  .division-grid { grid-template-columns: 1fr; }
  .vacancy-grid { grid-template-columns: 1fr; }
  .governance-grid { grid-template-columns: 1fr; }
}

/* Ứng tuyển (recruitment): process steps + role-opening cards. */
.process-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4, 16px); margin-top: var(--space-8, 32px); counter-reset: process-step; }
.process-step { position: relative; }
.process-step__num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full, 999px); background: var(--red-600, #C23A1E); color: var(--text-on-brand, #fff); font: var(--weight-bold, 700) var(--text-md, 18px)/1 var(--font-sans); }
.process-step__title { font: var(--type-h3, 700 20px/1.25 var(--font-sans)); color: var(--text-heading, #283350); margin-top: var(--space-4, 16px); }
.process-step__body { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-muted, #5B6270); margin-top: var(--space-2, 8px); }
.process-step__arrow { display: none; }

.opening-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4, 16px); margin-top: var(--space-8, 32px); }
.opening-card { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.opening-card__unit { font: var(--weight-semibold, 600) var(--text-sm, 14px)/1.4 var(--font-sans); color: var(--text-brand, #A52610); }
.opening-card__unit-en { font: 400 var(--text-xs, 12px)/1.5 var(--font-sans); color: var(--text-muted, #5B6270); margin-left: 6px; }
.opening-card__role { font: var(--type-h3, 700 20px/1.25 var(--font-sans)); color: var(--text-heading, #283350); }
.opening-card__meta-list { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.opening-card__meta-row { display: flex; align-items: center; gap: 6px; font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-muted, #5B6270); }
.opening-card__meta-row svg { width: 14px; height: 14px; flex: none; }
.opening-card__cta { align-self: flex-start; margin-top: var(--space-2, 8px); }

.opening-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3, 12px); margin-top: var(--space-8, 32px); max-width: var(--container-md, 840px); }
.opening-empty__title { font: var(--type-h3, 700 20px/1.25 var(--font-sans)); color: var(--text-heading, #283350); }
.opening-empty__body { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-muted, #5B6270); }

.opening-closing { margin-top: var(--space-8, 32px); font: 400 var(--text-md, 18px)/1.6 var(--font-sans); color: var(--text-muted, #5B6270); }

.opening-single-meta { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.opening-single-back { margin-top: var(--space-8, 32px); }

@media (max-width: 900px) {
  .process-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .process-steps { grid-template-columns: 1fr; }
  .opening-grid { grid-template-columns: 1fr; }
}

/* Partner card: plain service list (no kroner valuation, per owner ruling). */
.partner-card__desc { font: 400 var(--text-sm, 14px)/1.5 var(--font-sans); color: var(--text-body, #3D4048); margin: var(--space-3, 12px) 0 0; }
.partner-card__services { margin: var(--space-3, 12px) 0 0; padding-left: var(--space-6, 24px); }
.partner-card__details .partner-card__desc,
.partner-card__details .partner-card__services { margin-top: 0; }
.partner-card__services li { font: 400 var(--text-sm, 14px)/1.5 var(--font-sans); color: var(--text-muted, #55595F); }
.partner-card__services li + li { margin-top: var(--space-1, 4px); }
.partner-card__basis { margin: 0; font: 400 var(--text-sm, 14px)/1.6 var(--font-sans); color: var(--text-body, #3D4048); }

/* ── Hội viên (Membership) ── */
.member-value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4, 16px); margin-top: var(--space-8, 32px); }
.member-value-card { display: flex; flex-direction: column; gap: var(--space-3, 12px); background: var(--surface-card, #fff); border: 1px solid var(--border-subtle, #E1E4E8); box-shadow: var(--shadow-sm); }
.member-value-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; flex: none; border-radius: var(--radius-full, 999px); background: var(--red-50, #FDECEA); color: var(--brand-primary, #283350); }
.member-value-card__icon svg { width: 21px; height: 21px; }
.member-value-card__title { font: var(--type-h3, 700 20px/1.25 var(--font-sans)); color: var(--text-heading, #283350); }
.member-value-card__body { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-body, #3D4048); flex: 1; margin: 0; }
.member-value-card__by { font: 400 var(--text-xs, 12px)/1.4 var(--font-sans); color: var(--text-muted, #5B6270); padding-top: var(--space-3, 12px); border-top: 1px solid var(--border-subtle, #E1E4E8); }

.member-nudge { margin-top: var(--space-6, 24px); display: flex; gap: var(--space-4, 16px); align-items: flex-start; }
.member-nudge__icon { color: var(--text-brand, #A52610); flex: none; margin-top: 2px; }
.member-nudge__icon svg { width: 20px; height: 20px; }
.member-nudge__body { display: flex; flex-direction: column; gap: var(--space-2, 8px); flex: 1; }
.member-nudge__title { font: var(--weight-bold, 700) var(--text-base, 16px)/1.4 var(--font-sans); color: var(--text-heading, #283350); }
.member-nudge__body p { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-body, #3D4048); margin: 0; }
.member-nudge__body .btn { margin-top: var(--space-1, 4px); align-self: flex-start; }

.tier-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4, 16px); margin-top: var(--space-8, 32px); }
.tier-card { display: flex; flex-direction: column; gap: var(--space-4, 16px); background: var(--surface-card, #fff); border: 1px solid var(--border-subtle, #E1E4E8); box-shadow: var(--shadow-sm); }
.tier-card--featured { border-color: var(--brand-accent, #EF3E23); box-shadow: var(--shadow-md); }
.tier-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.tier-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: none; border-radius: var(--radius-full, 999px); background: var(--surface-sunken, #F1F3F6); }
.tier-card__icon svg { width: 23px; height: 23px; }
/* TierBadge: the dot is the tier colour FILL; the label stays --text-heading (never coloured red/amber text). */
.tier-badge { display: inline-flex; align-items: center; gap: var(--space-2, 8px); padding: 6px 14px 6px 10px; border-radius: var(--radius-full, 999px); border: 1px solid var(--border-subtle, #E1E4E8); background: var(--surface-card, #fff); font: var(--weight-semibold, 600) var(--text-sm, 14px)/1.3 var(--font-sans); color: var(--text-heading, #283350); width: fit-content; }
.tier-badge__dot { width: 10px; height: 10px; border-radius: var(--radius-full, 999px); flex: none; }
.tier-card__fee-val { font: var(--weight-black, 800) var(--text-3xl, 32px)/1 var(--font-sans); color: var(--text-heading, #283350); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tier-card__fee-sub { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-muted, #5B6270); margin-top: 4px; }
.tier-card__benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2, 8px); flex: 1; }
.tier-card__benefits li { display: flex; gap: var(--space-2, 8px); font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-body, #3D4048); }
.tier-card__check { color: var(--text-brand, #A52610); flex: none; margin-top: 2px; }
.tier-card__check svg { width: 15px; height: 15px; }
.tier-card__duty { font: 400 var(--text-xs, 12px)/1.55 var(--font-sans); color: var(--text-muted, #5B6270); padding-top: var(--space-3, 12px); border-top: 1px solid var(--border-subtle, #E1E4E8); }
.tier-card__duty strong { font-weight: var(--weight-semibold, 600); color: var(--text-heading, #283350); }
.tier-card .btn { width: 100%; }

/* Licence basis, directly under the fee ladder: the @avide.dk mailbox and the
 * Microsoft 365 licence follow a volunteer or staff role, not the fee. Quiet
 * surface, full width, so it reads as a condition rather than a sales point. */
.tier-grid__intro { margin: var(--space-4, 16px) 0 0; font: 400 var(--text-sm, 14px)/1.6 var(--font-sans); color: var(--text-muted, #5B6270); max-width: 78ch; }
.tier-grid__licence-note { margin-top: var(--space-5, 20px); padding: var(--space-4, 16px); border: 1px solid var(--border-subtle, #E1E4E8); border-left: 3px solid var(--brand-highlight, #FCB415); border-radius: var(--radius-md, 8px); background: var(--surface-sunken, #F1F3F6); }
.tier-grid__licence-note strong { display: block; font: var(--weight-semibold, 600) var(--text-sm, 14px)/1.4 var(--font-sans); color: var(--text-heading, #283350); }
.tier-grid__licence-note p { margin: var(--space-2, 8px) 0 0; font: 400 var(--text-xs, 12px)/1.6 var(--font-sans); color: var(--text-muted, #5B6270); max-width: 78ch; }

.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4, 16px); margin-top: var(--space-8, 32px); }
.role-card { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.role-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.role-card__title { display: flex; align-items: center; gap: var(--space-3, 12px); }
.role-card__icon { color: var(--brand-primary, #283350); flex: none; display: inline-flex; }
.role-card__icon svg { width: 20px; height: 20px; }
.role-card__give { font: var(--weight-bold, 700) var(--text-sm, 14px)/1 var(--font-sans); color: var(--text-brand, #A52610); white-space: nowrap; }
.role-card__duty { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-muted, #5B6270); margin: 0; }
.role-card__benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.role-card__benefits li { position: relative; padding-left: 15px; font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-body, #3D4048); }
.role-card__benefits li::before { content: ''; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: var(--radius-full, 999px); background: var(--brand-highlight, #FCB415); }

.register-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-12, 48px); align-items: start; }
.register-card h3 { margin-top: var(--space-2, 8px); }
.register-card__body { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-body, #3D4048); margin-top: var(--space-4, 16px); }
.register-card__actions { margin-top: var(--space-5, 20px); }
.register-card__login { margin-top: var(--space-6, 24px); padding-top: var(--space-5, 20px); border-top: 1px solid var(--border-subtle, #E1E4E8); display: flex; gap: var(--space-2, 8px); align-items: center; flex-wrap: wrap; font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-muted, #5B6270); }
.register-card__login a { font-weight: var(--weight-semibold, 600); }

.qr-card { text-align: center; }
.qr-card__title { font: var(--type-h3, 700 20px/1.25 var(--font-sans)); color: var(--text-heading, #283350); }
.qr-card__body { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-muted, #5B6270); margin-top: var(--space-2, 8px); }
.qr-card__img { width: 190px; height: 190px; object-fit: contain; margin: var(--space-6, 24px) auto 0; display: block; background: #fff; border-radius: var(--radius-md, 8px); padding: 8px; }

@media (max-width: 1080px) {
  .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .register-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tier-grid { grid-template-columns: 1fr; }
  .role-grid { grid-template-columns: 1fr; }
}

/* Sổ tay (Handbook): emergency band, sticky section nav, sourced cards,
 * closing band. Maps to $DS/ui_kits/website/Handbook.jsx. */
.handbook-emergency { background: var(--surface-inverse, #283350); padding-block: var(--space-10, 40px); }
.handbook-emergency__head { display: flex; align-items: center; gap: var(--space-3, 12px); margin-bottom: var(--space-6, 24px); }
.handbook-emergency__icon { color: var(--brand-accent, #EF3E23); display: inline-flex; flex: none; }
.handbook-emergency__icon svg { width: 20px; height: 20px; }
.handbook-emergency__eyebrow { font: var(--type-eyebrow, 600 12px/1.4 var(--font-sans)); text-transform: uppercase; letter-spacing: 0.09em; color: #fff; }
.handbook-emergency__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-6, 24px); }
.handbook-emergency__item { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.handbook-emergency__num {
  font: var(--weight-black, 900) var(--text-5xl, 48px)/1 var(--font-sans);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
/* Brand red on navy measures only ~3.2:1 (the weakest contrast on the whole
 * site), and it happens to land on the emergency number. Use the light end
 * of the red scale instead (--red-300, ~6.8:1); see the AA rule in the
 * design system readme: red on navy must come from --red-200/300, never
 * --avide-red. */
.handbook-emergency__num--critical { color: var(--red-300, #E38A78); }
.handbook-emergency__num--warning { color: var(--brand-highlight, #FCB415); }
.handbook-emergency__when { font: var(--weight-bold, 700) var(--text-sm, 14px)/1.35 var(--font-sans); color: #fff; }
.handbook-emergency__body { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: rgba(255,255,255,0.72); margin: 0; }

/* .section sets overflow:hidden for backdrop-bloom clipping elsewhere on
 * the site; that also clips position:sticky's nearest-ancestor scroll box,
 * which stops .handbook-nav from sticking at all (it just scrolls away with
 * the content). This page has no backdrop bloom to clip, so undo it here. */
.handbook-body { overflow: visible; }
.handbook-layout { display: grid; grid-template-columns: minmax(0, 232px) minmax(0, 1fr); gap: var(--space-12, 48px); align-items: start; }

.handbook-nav { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--space-1, 4px); }
.handbook-nav__title { font: var(--type-eyebrow, 600 12px/1.4 var(--font-sans)); text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted, #5B6270); padding: 0 var(--space-3, 12px); margin-bottom: var(--space-3, 12px); }
.handbook-nav__item {
  display: flex; align-items: center; gap: var(--space-3, 12px);
  padding: var(--space-3, 12px); border-radius: var(--radius-md, 8px);
  color: var(--text-body, #3D4048);
  font: var(--weight-medium, 500) var(--text-sm, 14px)/1.3 var(--font-sans);
  text-decoration: none;
  transition: var(--transition-control, background-color .18s ease);
}
.handbook-nav__item:hover { background: var(--surface-sunken, #F1F3F6); text-decoration: none; }
.handbook-nav__icon { display: inline-flex; flex: none; color: var(--text-muted, #5B6270); }
.handbook-nav__icon svg { width: 18px; height: 18px; }
.handbook-nav__item.is-active {
  background: var(--red-50, #FDECEA);
  color: var(--text-brand, #A52610);
  font-weight: var(--weight-bold, 700);
}
.handbook-nav__item.is-active .handbook-nav__icon { color: var(--brand-primary, #283350); }
.handbook-nav__checked { margin-top: var(--space-6, 24px); padding: var(--space-4, 16px); border-radius: var(--radius-md, 8px); background: var(--surface-sunken, #F1F3F6); }
.handbook-nav__checked-label { font: var(--weight-semibold, 600) var(--text-xs, 12px)/1.4 var(--font-sans); color: var(--text-heading, #283350); }
.handbook-nav__checked-date { font: var(--type-body-sm, 400 14px/1.5 var(--font-sans)); color: var(--text-muted, #5B6270); margin-top: 4px; font-variant-numeric: tabular-nums; }

.handbook-content { display: flex; flex-direction: column; gap: var(--space-16, 64px); }
.handbook-section { scroll-margin-top: 110px; }
.handbook-section__intro { font: var(--type-body-lg, 400 18px/1.5 var(--font-sans)); color: var(--text-body, #3D4048); margin-top: var(--space-4, 16px); max-width: 62ch; }
.handbook-section .figure { margin-top: var(--space-8, 32px); }

.handbook-steps { list-style: none; margin: var(--space-8, 32px) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5, 20px); }
.handbook-step { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: var(--space-5, 20px); align-items: start; }
.handbook-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: var(--radius-full, 999px);
  background: var(--surface-brand, var(--brand-primary, #283350)); color: #fff;
  font: var(--weight-black, 900) var(--text-lg, 18px)/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.handbook-step__card { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.handbook-step__title { font: var(--type-h3, 700 20px/1.25 var(--font-sans)); color: var(--text-heading, #283350); }
.handbook-step__body { font: var(--type-body, 400 16px/1.6 var(--font-sans)); color: var(--text-body, #3D4048); margin: 0; }
.handbook-step__card .handbook-source { margin-top: var(--space-1, 4px); }

.handbook-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4, 16px); margin-top: var(--space-8, 32px); }
.fact-card { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.fact-card__title { font: var(--type-h3, 700 20px/1.25 var(--font-sans)); color: var(--text-heading, #283350); }
.fact-card__body { font: var(--type-body, 400 16px/1.6 var(--font-sans)); color: var(--text-body, #3D4048); flex: 1; margin: 0; }
.fact-card__source-row {
  padding-top: var(--space-3, 12px); border-top: 1px solid var(--border-subtle, #E1E4E8);
  display: flex; align-items: center; gap: var(--space-2, 8px); flex-wrap: wrap;
}
.fact-card__source-label { font: 400 var(--text-xs, 12px)/1.4 var(--font-sans); color: var(--text-muted, #5B6270); }

.handbook-source {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--weight-semibold, 600) var(--text-xs, 12px)/1.4 var(--font-sans);
  color: var(--text-brand, #A52610);
  text-decoration: none;
}
.handbook-source:hover { text-decoration: underline; }
.handbook-source svg { width: 13px; height: 13px; }

.handbook-closing { background: var(--surface-sunken, #F1F3F6); border-top: 1px solid var(--border-subtle, #E1E4E8); }
.handbook-closing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-10, 40px); align-items: start; }
.handbook-closing__col { display: flex; flex-direction: column; gap: var(--space-3, 12px); }
.handbook-closing__head { display: flex; align-items: center; gap: var(--space-3, 12px); }
.handbook-closing__icon { color: var(--brand-primary, #283350); display: inline-flex; flex: none; }
.handbook-closing__icon svg { width: 20px; height: 20px; }
.handbook-closing__title { font: var(--type-h3, 700 20px/1.25 var(--font-sans)); color: var(--text-heading, #283350); }
.handbook-closing__body { font: var(--type-body, 400 16px/1.6 var(--font-sans)); color: var(--text-body, #3D4048); margin: 0; }
.handbook-closing__actions { display: flex; gap: var(--space-3, 12px); margin-top: var(--space-2, 8px); flex-wrap: wrap; }

/* Mobile: the sticky column nav does not fit a 375px viewport. Collapse it
 * into a horizontally scrollable top strip above the content, same list,
 * same click targets, no JS change needed (handbook.js queries the same
 * .handbook-nav__item elements regardless of layout). */
@media (max-width: 900px) {
  .handbook-layout { grid-template-columns: 1fr; gap: var(--space-6, 24px); }
  .handbook-nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2, 8px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-2, 8px);
    flex-wrap: nowrap;
  }
  .handbook-nav__title { display: none; }
  .handbook-nav__item { flex: none; padding: 8px 14px; white-space: nowrap; }
  .handbook-nav__checked { display: none; }
}
@media (max-width: 640px) {
  .handbook-emergency__num { font-size: var(--text-4xl, 38px); }
}

/* Board: honoured former members (a show of gratitude) */
.board-former__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-5, 20px); margin-top: var(--space-8, 32px); }
.board-former-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2, 8px); padding: var(--space-4, 16px); }
.board-former-card__name { font: var(--weight-bold, 700) var(--text-base, 16px)/1.3 var(--font-sans); color: var(--text-heading, #283350); }
.board-former-card__unit { font: 400 var(--text-sm, 14px)/1.4 var(--font-sans); color: var(--text-muted, #55595F); }

/* Board: every member's avatar is the SAME size, regardless of role, so no
   photo reads as more important than another. Overrides avatar--lg/xl/2xl in
   board contexts. */
.person-card .avatar,
.board-advisor-card .avatar,
.board-former-card .avatar { width: 96px; height: 96px; font-size: 34px; }

/* ── Board: Sơ đồ tổ chức (org chart) ────────────────────────────────────────
   Laid out in CSS, not shipped as an image, so it reflows instead of scaling.
   Two layouts, switched at 1024px:
     wide   - the drawn tree. Three governance bodies across the top, six
              divisions on a row beneath, joined by rules drawn with
              pseudo-elements.
     narrow - a vertical list on a left rail. The tree shape is dropped
              rather than shrunk, because shrinking is what made the old
              image unreadable on a phone.
   Connector geometry is driven by --oc-gap and --oc-stub alone; change those
   two and every rule follows, since each line is positioned off them. ── */
.orgchart {
  --oc-gap: var(--space-5, 20px);
  --oc-stub: var(--space-5, 20px);
  --oc-line: 2px solid var(--border-default, #B7C2DA);
  margin: var(--space-8, 32px) 0 0;
}

.orgchart__node {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  gap: 2px;
  padding: var(--space-4, 16px);
  border-radius: var(--radius-xl, 20px);
  background: var(--surface-default, #fff);
  border: 1px solid var(--border-subtle, #D7DCE4);
  text-align: center;
}
.orgchart__name { font: var(--weight-bold, 700) var(--text-md, 18px)/1.3 var(--font-sans); color: var(--text-heading, #283350); }
.orgchart__en { font: 500 var(--text-xs, 12px)/1.3 var(--font-sans); color: var(--text-muted, #55595F); }
.orgchart__chair { margin-top: var(--space-2, 8px); font: var(--weight-semibold, 600) var(--text-sm, 14px)/1.3 var(--font-sans); }

/* The executive node is the one navy block, and carries the single amber
   accent, matching the emphasis the previous drawing used. */
.orgchart__node--exec { background: var(--surface-inverse, #283350); border-color: var(--surface-inverse, #283350); }
.orgchart__node--exec .orgchart__name { color: var(--text-on-dark, #fff); }
.orgchart__node--exec .orgchart__en { color: var(--text-on-dark-muted, #CCD6EB); }
.orgchart__node--exec .orgchart__chair { color: var(--text-on-dark, #fff); }
.orgchart__node--exec::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: var(--space-3, 12px); width: 96px; height: 3px; border-radius: 2px;
  background: var(--brand-highlight, #FCB415);
}
.orgchart__node--division { background: var(--surface-sunken, #F3F6FB); border-color: var(--border-subtle, #CCD6EB); }
.orgchart__node--division .orgchart__name { font-size: var(--text-sm, 14px); }

.orgchart__divisions { list-style: none; margin: 0; padding: 0; }

/* Names the parent of the division group. Above 1024px the drawn lines say the
   same thing, so it is taken out of the visual flow but left in the accessible
   tree; it must not occupy layout there, or it would push the list down and
   break the connector geometry, which is measured off the list's own edge. */
.orgchart__divisions-label {
  margin: var(--space-6, 24px) 0 var(--space-4, 16px);
  font: var(--type-eyebrow, 700 12px/1.5 var(--font-sans));
  text-transform: uppercase; letter-spacing: var(--tracking-eyebrow, 0.16em);
  color: var(--text-muted, #55595F);
}
@media (min-width: 1024px) {
  .orgchart__divisions-label {
    position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

@media (min-width: 1024px) {
  .orgchart__governance {
    position: relative;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--oc-gap);
    align-items: center;
  }
  /* Executive out to each side body. Each rule spans exactly the grid gap. */
  .orgchart__node--exec::before,
  .orgchart__governance > .orgchart__node--exec + .orgchart__node--aside::before {
    content: ""; position: absolute; top: 50%; width: var(--oc-gap); border-top: var(--oc-line);
  }
  .orgchart__node--exec::before { right: 100%; }
  .orgchart__governance > .orgchart__node--exec + .orgchart__node--aside::before { right: 100%; }
  .orgchart__node--exec .orgchart__chair { padding-bottom: var(--space-4, 16px); }

  .orgchart__divisions {
    position: relative;
    display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--oc-gap);
    margin-top: calc(var(--oc-stub) * 2);
  }
  /* Drop from the executive node down to the bus. The divisions list sits
     2 * stub below the governance row and the bus is drawn at the midpoint,
     so this segment occupies the upper half of that margin. */
  .orgchart__divisions::before {
    content: ""; position: absolute; left: 50%; bottom: calc(100% + var(--oc-stub));
    height: var(--oc-stub); border-left: var(--oc-line);
  }
  /* The bus itself, spanning first column centre to last column centre. With
     six equal columns and five gaps, half a column is (100% - 5 * gap) / 12. */
  .orgchart__divisions::after {
    content: ""; position: absolute; bottom: calc(100% + var(--oc-stub));
    left: calc((100% - 5 * var(--oc-gap)) / 12);
    right: calc((100% - 5 * var(--oc-gap)) / 12);
    border-top: var(--oc-line);
  }
  /* Stub from the bus down into each division. */
  .orgchart__node--division::before {
    content: ""; position: absolute; left: 50%; bottom: 100%;
    height: var(--oc-stub); border-left: var(--oc-line);
  }
}

@media (max-width: 1023px) {
  /* Vertical tree. The rail is drawn on the list, and each node reaches it
     with a short horizontal stub, so no node depends on its siblings. */
  .orgchart__governance { display: flex; flex-direction: column; gap: var(--oc-gap); }
  .orgchart__node { text-align: left; }
  .orgchart__node--exec::after { left: var(--space-4, 16px); transform: none; }
  .orgchart__node--exec .orgchart__chair { padding-bottom: var(--space-3, 12px); }

  .orgchart__divisions {
    position: relative;
    display: flex; flex-direction: column; gap: var(--oc-gap);
    margin-top: var(--oc-gap);
    padding-left: calc(var(--oc-stub) * 2);
  }
  /* The rail is drawn per node rather than once on the list, because the list
     cannot know where its last node's centre falls when nodes wrap to
     different heights. Each node owns the rail segment beside it, and the last
     one stops at its own midpoint so the line ends on the final stub instead
     of running past it. */
  .orgchart__node--division::after {
    content: ""; position: absolute; left: calc(var(--oc-stub) * -1);
    top: calc(var(--oc-gap) * -1);
    /* Segments abut on fractional pixel boundaries, where two antialiased ends
       meet as a visible seam. The extra pixel makes consecutive segments
       overlap so the rail paints as one line. */
    bottom: -1px;
    border-left: var(--oc-line);
  }
  .orgchart__node--division:last-child::after { bottom: 50%; }
  .orgchart__node--division::before {
    content: ""; position: absolute; right: 100%; top: 50%;
    width: var(--oc-stub); border-top: var(--oc-line);
  }
}

@media (min-width: 600px) and (max-width: 1023px) {
  /* Enough room for two columns of divisions; the rail becomes a plain
     indent, since one rail cannot serve two columns without guesswork. */
  .orgchart__divisions { display: grid; grid-template-columns: repeat(2, 1fr); padding-left: 0; }
  .orgchart__divisions::before { display: none; }
  .orgchart__node--division::before { display: none; }
  .orgchart__node--division { text-align: center; }
}

/* ============================================================
   UM (Ultimate Member) theming — Nhân Sự / Personale / Personnel
   directory pages + the UM profile page (slug `user`)
   ============================================================
   Restyles Ultimate Member's OWN directory and profile markup; it never
   replaces, unhooks or reimplements any of it. Everything below is scoped
   under .um-themed, the single wrapper class added by page-members.php,
   page-personale.php, page-personnel.php and page-user.php, so UM's stock
   look is untouched on the login/register/account pages that also render
   UM shortcodes via the_content().
   UM ships no CSS custom properties of its own (checked: no :root block in
   any um-*.css file), so overrides target UM's fixed class names directly
   rather than reassigning variables. Several UM rules use !important
   (border-radius on member photos, .um-button's box/border/radius,
   .um-form inputs); matching !important is used only on those properties,
   never added speculatively.
   The .um-member-cover / .um-cover bands get their pixel height from an
   inline style UM's own JS sets from data-ratio on load/resize
   (um-functions.js, jQuery .height()); max-height (a different property,
   not fought over in the cascade) caps that without touching the script.
   "Square photos with the theme's radius": the board templates' own Avatar
   component is circular-only ("initials on a coloured disc, no portraits",
   see page-ban-chap-hanh.php) — there is no literal square "board portrait"
   component to copy. This follows the theme's other real-photo treatment
   instead (.figure > img, .archive-card__media img): object-fit: cover
   inside a var(--radius-lg) corner, not a circle. */

/* ---- Directory: header row (search / sort / filters) ----
   Not visually verified against a live render: the seeded "Members" form
   (81) currently renders an empty .um-member-directory-header (no search
   fields configured), so these rules are written defensively from UM's own
   um-members.css class names and will take effect if/when search or filter
   fields are turned on for the form. */
.um-themed .um-directory { width: 100%; }
.um-themed .um-directory .um-member-directory-header { margin-bottom: var(--space-6, 24px); }
.um-themed .um-directory .um-member-directory-header .um-member-directory-search-line .um-search-line {
  border: 1px solid var(--border-default, #CDD0D6) !important;
  border-radius: var(--radius-full, 999px) !important;
  padding: 0 18px !important;
  background: var(--surface-card, #fff);
  font-family: var(--font-sans, "Montserrat", sans-serif) !important;
}
.um-themed .um-directory .um-member-directory-header .um-member-directory-search-line .um-search-line:focus {
  border-color: var(--focus-ring, #3A4C74) !important;
  box-shadow: var(--ring-focus, 0 0 0 3px var(--focus-ring)) !important;
}
.um-themed .um-directory .um-member-directory-header .um-do-search.um-button {
  border-radius: var(--radius-full, 999px) !important;
}
.um-themed .um-directory .um-member-directory-header .um-member-directory-sorting-a,
.um-themed .um-directory .um-member-directory-header .um-member-directory-filters-a {
  color: var(--text-heading, #283350);
  font: var(--weight-semibold, 600) var(--text-sm, 14px)/1.4 var(--font-sans);
}
.um-themed .um-directory .um-member-directory-header .um-filtered-line .um-members-filter-tag {
  background: var(--surface-sunken, #F1F3F6);
  border-radius: var(--radius-full, 999px);
  color: var(--text-body, #3D4048);
}
.um-themed .um-directory .um-member-directory-header .um-filtered-line .um-clear-filters a {
  color: var(--text-link, #A52610);
}
.um-themed .select2-container--default .select2-selection--single {
  border: 1px solid var(--border-default, #CDD0D6) !important;
  border-radius: var(--radius-full, 999px) !important;
  height: 40px !important;
}
.um-themed .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 38px !important;
  padding-left: 18px !important;
  color: var(--text-body, #3D4048) !important;
  font-family: var(--font-sans, "Montserrat", sans-serif);
}
.um-themed .select2-dropdown {
  border-color: var(--border-default, #CDD0D6) !important;
  border-radius: var(--radius-md, 8px) !important;
}

/* ---- Directory: "N members found" line ---- */
.um-themed .um-directory .um-members-wrapper .um-members-total {
  font: var(--weight-medium, 500) var(--text-sm, 14px)/1.5 var(--font-sans);
  color: var(--text-muted, #5B6270);
  text-align: left;
}

/* ---- Directory: card grid ----
   NOT CSS grid: UM_Member_Grid() (um-members.js) runs jQuery Masonry on
   .um-members-grid with columnWidth: '.um-member' and gutter:
   '.um-gutter-sizer' — it measures those two elements' rendered CSS widths
   once imagesLoaded fires, then repositions every .um-member with inline
   position:absolute/left/top/width, and relayouts on window resize
   (Masonry's own default). A `display:grid` override here would be
   silently defeated: the inline absolute positioning takes items out of
   grid flow entirely (this was tried and produced a broken, content-width
   masonry pack — see git history). So the column count is still set the
   way UM's own default CSS sets it, through percentage widths on
   .um-member and .um-gutter-sizer that Masonry reads as the column/gutter
   unit; only the percentages change per breakpoint, matching the
   responsive column counts to the theme's card sizing instead of UM's
   default 3-up/30%. */
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid {
  margin-inline: calc(var(--space-2, 8px) * -1);
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-gutter-sizer {
  width: 4%;
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member {
  width: 30.66%; /* 3-up: 3 × 30.66 + 2 × 4 ≈ 100 */
  margin: 0 0 var(--space-6, 24px) 0;
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-subtle, #E1E4E8);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition-control, box-shadow .18s ease, transform .12s ease);
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member.awaiting_admin_review,
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member.inactive,
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member.rejected {
  opacity: 0.75;
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-status.awaiting_admin_review,
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-status.inactive,
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-status.rejected {
  background: var(--warning-500, #B27C0E);
  font: var(--weight-semibold, 600) var(--text-xs, 12px)/1.4 var(--font-sans);
}

/* Cover band: hidden. UM paints a cover strip (grey #eee, or the user's
   cover photo) on every directory card; repeated across a full grid it
   reads as heavy chrome and wastes card height. The .with-cover class is
   no discriminator: UM stamps it on every card whenever the directory's
   cover option is on, cover photo or not (verified in the rendered DOM),
   so the band is removed outright. UM's JS sets an inline height from
   data-ratio, so the hide must win with display, not height. */
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-cover {
  display: none;
}

/* Card interior: name rides the navy band at the top, photo gets the room
   below. UM's DOM nests name/tagline/buttons inside .um-member-card AFTER
   the photo, so the name cannot be lifted into the band by source order.
   Instead the card is flattened (display: contents) so its children join
   .um-member's flex column, and the name is pulled to the top with order.
   Masonry only positions .um-member itself; the interior flex is safe. */
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member {
  display: flex;
  flex-direction: column;
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card {
  display: contents;
}

/* Photo: square + theme radius instead of UM's white-bordered circle
   overlapping the cover. Sizes/positions the same fixed way for both the
   plain and with-cover variants so the two never need separate math. */
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-photo {
  padding: var(--space-5, 20px) 0 var(--space-4, 16px) 0;
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-photo a img,
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member.with-cover .um-member-photo a img {
  width: 128px;
  height: 128px;
  object-fit: cover;
  border: 1px solid var(--surface-card, #fff);
  background: var(--surface-sunken, #EFF1F5);
  position: relative;
  top: 0;
  margin: 0 auto;
  float: none;
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-photo.radius-1 a img {
  border-radius: var(--radius-lg, 12px) !important;
}

/* Name band: the name IS the card header, white on the navy gradient the
   old empty cover band used, so the band carries information instead of
   chrome. order:-1 lifts it above the photo (see the display: contents
   note above). .um-member's overflow:hidden clips the band to the card
   radius. */
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-name {
  order: -1;
  margin: 0;
  background: linear-gradient(135deg, var(--navy-500, #526691), var(--navy-700, #283350));
  padding: var(--space-3, 12px) var(--space-4, 16px);
  text-align: center;
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-name a {
  font: var(--type-h3, 700 20px/1.25 var(--font-sans));
  font-size: var(--text-md, 18px);
  color: #fff;
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-name a:hover {
  opacity: 0.85;
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-tagline {
  color: var(--text-muted, #5B6270);
  font: var(--type-body-sm, 400 14px/1.5 var(--font-sans));
  padding: 0 var(--space-4, 16px);
  margin: 0 0 var(--space-4, 16px) 0;
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-members-edit-btn {
  padding: 0 var(--space-4, 16px) var(--space-4, 16px);
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-members-edit-btn a.um-edit-profile-btn {
  background: transparent !important;
  color: var(--text-heading, #283350) !important;
  border: 1px solid var(--border-default, #CDD0D6) !important;
  box-shadow: none !important;
  font: var(--weight-semibold, 600) var(--text-xs, 12px)/1.4 var(--font-sans) !important;
}
.um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-members-edit-btn a.um-edit-profile-btn:hover {
  border-color: var(--brand-accent, #EF3E23) !important;
  color: var(--brand-accent, #EF3E23) !important;
}

/* "No users match" empty state */
.um-themed .um-directory .um-members-wrapper .um-members .um-members-none {
  grid-column: 1 / -1;
  padding: var(--space-10, 48px) var(--space-6, 24px);
  text-align: center;
  background: var(--surface-sunken, #F1F3F6);
  border-radius: var(--radius-lg, 12px);
  color: var(--text-muted, #5B6270);
  font: var(--type-body, 400 16px/1.65 var(--font-sans));
}

/* Pagination */
.um-themed .um-directory .um-members-pagination-box {
  margin-top: var(--space-8, 32px);
}
.um-themed .um-directory .um-members-pagination-box .um-members-pagi .pagi {
  border-radius: var(--radius-full, 999px);
  margin: 0 2px;
  color: var(--text-heading, #283350) !important;
}
.um-themed .um-directory .um-members-pagination-box .um-members-pagi .pagi:hover:not(.disabled):not(.current) {
  background: var(--surface-sunken, #F1F3F6);
}
.um-themed .um-directory .um-members-pagination-box .um-members-pagi .pagi.current {
  background: var(--red-600, #C23A1E);
  color: var(--text-on-brand, #fff) !important;
}
.um-themed .um-directory .um-members-pagination-box .um-members-pagi .pagi.current:hover {
  color: var(--text-on-brand, #fff) !important;
}

/* ---- Profile (UM form "Default Profile", the /user/ page) ---- */
.um-themed .um-profile .um-cover {
  background: linear-gradient(135deg, var(--navy-500, #526691), var(--navy-800, #202A42));
  max-height: 220px;
  border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
}
.um-themed .um-profile .um-header {
  border-bottom-color: var(--border-subtle, #E1E4E8);
}
.um-themed .um-profile .um-profile-photo a.um-profile-photo-img,
.um-themed .um-profile .um-profile-photo img,
.um-themed .um-profile .um-profile-photo span.um-profile-photo-overlay {
  border-radius: var(--radius-lg, 12px) !important;
}
.um-themed .um-profile .um-profile-photo a.um-profile-photo-img {
  border-color: var(--surface-card, #fff);
  background: var(--surface-sunken, #EFF1F5);
  box-shadow: var(--shadow-md);
}
.um-themed .um-profile .um-profile-photo a.um-profile-photo-img img {
  object-fit: cover;
}
.um-themed .um-profile .um-name,
.um-themed .um-profile .um-name a {
  font: var(--type-h2, 700 30px/1.25 var(--font-sans));
  font-size: var(--text-xl, 24px);
  color: var(--text-heading, #283350);
}
.um-themed .um-profile .um-meta { color: var(--text-muted, #5B6270); }
.um-themed .um-profile .um-profile-status {
  border-left-color: var(--warning-500, #B27C0E);
  color: var(--text-muted, #5B6270);
}
.um-themed .um-profile .um-profile-status.approved { display: none; }

/* Tab bar: UM's own #444 dark strip becomes the theme's navy surface, with
   the active tab picked out as a filled pill instead of plain white text. */
.um-themed .um-profile .um-profile-nav {
  background: var(--brand-primary, #283350);
  border-radius: var(--radius-md, 8px);
}
.um-themed .um-profile .um-profile-nav-item a {
  border-radius: var(--radius-full, 999px);
  font: var(--weight-semibold, 600) var(--text-sm, 14px)/1.4 var(--font-sans) !important;
}
.um-themed .um-profile .um-profile-nav-item a:hover {
  background: color-mix(in oklch, var(--neutral-0) 15%, transparent);
}
.um-themed .um-profile .um-profile-nav-item.active a,
.um-themed .um-profile .um-profile-nav-item.active a:hover {
  background: var(--red-600, #C23A1E);
  color: var(--text-on-brand, #fff) !important;
}

.um-themed .um-profile .um-profile-note {
  color: var(--text-muted, #5B6270);
}
.um-themed .um-profile .um-field-label {
  border-bottom-color: var(--border-subtle, #E1E4E8);
  color: var(--text-heading, #283350);
  font: var(--weight-semibold, 600) var(--text-sm, 14px)/1.4 var(--font-sans) !important;
}

/* ---- Shared: UM's generic button + text-input chrome, wherever either
   template renders it (edit-profile button, cover/photo upload button when
   the profile is viewed by its owner, directory search button) ---- */
.um-themed .um-button,
.um-themed a.um-button,
.um-themed input[type="submit"].um-button {
  background: var(--red-600, #C23A1E) !important;
  color: var(--text-on-brand, #fff) !important;
  border-radius: var(--radius-full, 999px) !important;
  font-family: var(--font-sans, "Montserrat", sans-serif) !important;
  box-shadow: none !important;
}
.um-themed .um-button:hover,
.um-themed a.um-button:hover,
.um-themed input[type="submit"].um-button:hover {
  background: var(--red-700, #9A2E17) !important;
}
.um-themed .um-button.um-alt,
.um-themed a.um-button.um-alt {
  background: transparent !important;
  color: var(--text-heading, #283350) !important;
  border: 1px solid var(--border-default, #CDD0D6) !important;
}
.um-themed .um-form input[type="text"],
.um-themed .um-form input[type="search"],
.um-themed .um-form input[type="email"],
.um-themed .um-form input[type="url"],
.um-themed .um-form input[type="tel"],
.um-themed .um-form input[type="number"],
.um-themed .um-form input[type="password"] {
  border: 1px solid var(--border-default, #CDD0D6) !important;
  border-radius: var(--radius-md, 8px) !important;
  font-family: var(--font-sans, "Montserrat", sans-serif) !important;
}
.um-themed .um-form input:focus {
  border-color: var(--focus-ring, #3A4C74) !important;
}

/* ---- Responsive: 2-up at tablet, 1-up at phone widths, no card ever
   forces a horizontal scrollbar. 900px / 640px match the theme's existing
   breakpoints (see the other @media rules above). Widths, not
   grid-template-columns: see the comment on the card-grid rule above —
   Masonry reads .um-member's/.um-gutter-sizer's CSS width as its column
   unit, so the column count changes by changing those widths per
   breakpoint, not by switching layout modes. */
@media (max-width: 899px) {
  .um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-gutter-sizer {
    width: 5%;
  }
  .um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member {
    width: 47.5%; /* 2-up: 2 × 47.5 + 5 = 100 */
  }
}
@media (max-width: 640px) {
  .um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-gutter-sizer {
    width: 0;
  }
  .um-themed .um-directory .um-members-wrapper .um-members.um-members-grid .um-member {
    width: 100%;
  }
  .um-themed .um-directory .um-member-directory-header .um-member-directory-search-line {
    width: 100%;
  }
  .um-themed .um-directory .um-member-directory-header .um-search {
    grid-template-columns: 1fr;
  }
  .um-themed .um-profile .um-profile-photo {
    float: none !important;
    margin: 0 auto !important;
  }
  .um-themed .um-profile .um-header.no-cover .um-profile-photo,
  .um-themed .um-profile .um-profile-meta {
    text-align: center !important;
  }
  .um-themed .um-profile .um-name {
    float: none !important;
    text-align: center;
  }
  .um-themed .um-profile .um-profile-nav-item a {
    padding-left: 10px !important;
    margin-left: 3px;
  }
}

/* ==========================================================================
   Issue #27: 404, search, single-avide_person. Minimal additions only; the
   templates otherwise reuse .section, .container, .page-header, .card,
   .btn, .badge, .tag, .archive-grid/.archive-card, .prose, .person-card and
   .story-single-back already defined above. archive-avide_activity.php and
   single-avide_activity.php need no new CSS at all.
   ========================================================================== */

/* 404: search box + pill actions under the header band's explanation. */
.not-found-search { max-width: var(--container-sm, 640px); margin: 0 auto; }
.not-found-actions { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); justify-content: center; margin-top: var(--space-8, 32px); }

/* Accessible search form (searchform.php), reused by 404.php and search.php's
   no-results state. Visible label (not screen-reader-only: the theme has no
   .screen-reader-text rule defined, so a hidden label would just be inert).
   Pill input to match .btn's radius-full language. */
.search-form { display: flex; align-items: flex-end; gap: var(--space-2, 8px); flex-wrap: wrap; }
.search-form__field { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 4px; }
.search-form__field label { font: var(--weight-semibold, 600) var(--text-xs, 12px)/1.4 var(--font-sans); color: var(--text-muted, #5B6270); }
.search-form__input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans, "Montserrat", sans-serif);
  font-size: var(--text-base, 16px);
  color: var(--text-body, #3D4048);
  background: var(--surface-card, #fff);
  border: 1px solid var(--border-default, #CDD0D6);
  border-radius: var(--radius-full, 999px);
  padding: 11px 22px;
  min-height: 44px;
}
.search-form__input:focus { border-color: var(--focus-ring, #3A4C74); }

/* search.php no-results state */
.search-empty { max-width: var(--container-sm, 640px); margin: 0 auto; text-align: center; }
.search-empty .search-form { margin-top: var(--space-6, 24px); text-align: left; }

/* single-avide_person.php: narrow, centered card (rarely-visited page). */
.person-single__card { max-width: var(--container-sm, 640px); margin: 0 auto; }
.person-single__bio { margin-top: var(--space-8, 32px); }

/* ── Footer legal links (privacy + trade terms, carried over from the old
   theme's footer; owner request at cutover 2026-08-18) ── */
.site-footer__legal { display: flex; gap: var(--space-4, 16px); flex-wrap: wrap; }
.site-footer__legal a {
  color: inherit;
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.site-footer__legal a:hover { opacity: 1; }

/* ============ Form error summary (registration) ============ */
/* UM marks each failed field inline; that stays. This is the summary at
   the top of the form, which is what a visitor actually sees after the
   post-submit jump to the page header. */
.avide-form-errors {
  border: 1px solid var(--avide-red, #E03C1F);
  border-left-width: 4px;
  border-radius: var(--radius-md, 10px);
  background: var(--surface-card, #fff);
  padding: var(--space-4, 16px) var(--space-5, 20px);
  margin: 0 0 var(--space-6, 24px);
}
.avide-form-errors__title {
  margin: 0;
  font: var(--weight-semibold, 600) var(--text-base, 16px)/1.4 var(--font-sans);
  color: var(--avide-red, #E03C1F);
}
.avide-form-errors__hint {
  margin: var(--space-1, 4px) 0 var(--space-3, 12px);
  font-size: var(--text-sm, 14px);
  color: var(--text-muted, #5B6270);
}
.avide-form-errors__list { margin: 0; padding-left: var(--space-5, 20px); }
.avide-form-errors__list li { margin-bottom: var(--space-2, 8px); font-size: var(--text-sm, 14px); }
.avide-form-errors__list a { color: var(--text-heading, #283350); font-weight: var(--weight-semibold, 600); }
.avide-form-errors__msg { color: var(--text-muted, #5B6270); }
/* The field the summary links to, once jumped to. */
.um-field:target { outline: 2px solid var(--avide-red, #E03C1F); outline-offset: 6px; border-radius: var(--radius-sm, 6px); }

/* Generic inline notice, used by the tier-change page (snippet 21). */
.avide-notice {
  border: 1px solid var(--border-subtle, #E1E4E8);
  border-left: 4px solid var(--brand-accent, #E03C1F);
  border-radius: var(--radius-md, 10px);
  background: var(--surface-sunken, #EFF1F5);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  margin: 0 0 var(--space-5, 20px);
}
.avide-notice p { margin: 0; font-size: var(--text-sm, 14px); }
.avide-notice--ok { border-left-color: var(--success-500, #2E7D5B); }

/* ============ Member state on the Hội viên page ============ */
/* A paid member reads this page to decide about upgrading, not to register,
   so the card carries their standing and what the next tier adds. */
.member-card__now { margin: 0 0 var(--space-4, 16px); font-size: var(--text-base, 16px); }
.member-card__fee { color: var(--text-muted, #5B6270); font-weight: 400; }
.member-card__upgrade {
  border: 1px solid var(--border-subtle, #E1E4E8);
  border-left: 4px solid var(--brand-accent, #E03C1F);
  border-radius: var(--radius-md, 10px);
  background: var(--surface-sunken, #EFF1F5);
  padding: var(--space-4, 16px) var(--space-5, 20px);
}
.member-card__upgrade-head { font-size: var(--text-base, 16px); }
.member-card__upgrade-sub { margin: var(--space-2, 8px) 0 var(--space-2, 8px); font-size: var(--text-sm, 14px); color: var(--text-muted, #5B6270); }
.member-card__gain { margin-bottom: var(--space-4, 16px); }
.member-card__note { margin: var(--space-3, 12px) 0 0; font-size: var(--text-sm, 14px); color: var(--text-muted, #5B6270); }
.member-card__note--quiet { margin-top: var(--space-5, 20px); font-size: var(--text-xs, 12px); }
/* Tier cards for a member: their own tier, and the ones below it, are states
   rather than actions, so they must not look like buttons. */
.tier-card__state {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm, 14px); color: var(--text-muted, #5B6270);
  padding: var(--space-2, 8px) 0;
}
.tier-card__state svg { width: 16px; height: 16px; }
.tier-card__state--current { color: var(--success-500, #2E7D5B); font-weight: var(--weight-semibold, 600); }

/* Share bar (inc/share.php): after post/activity content. */
.avide-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2, 8px); margin: var(--space-8, 32px) 0 0; padding-top: var(--space-6, 24px); border-top: 1px solid var(--border-subtle, #E1E4E8); }
.avide-share__label { font: var(--weight-semibold, 600) var(--text-sm, 14px)/1 var(--font-sans); color: var(--text-muted, #5B6270); margin-right: var(--space-1, 4px); }
.avide-share__btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--border-subtle, #E1E4E8); border-radius: var(--radius-full, 999px); background: var(--surface-card, #fff); color: var(--text-heading, #283350); font: var(--weight-medium, 500) var(--text-sm, 14px)/1 var(--font-sans); cursor: pointer; text-decoration: none; }
.avide-share__btn svg { width: 18px; height: 18px; flex: none; }
.avide-share__btn:hover { border-color: var(--brand-navy, #283350); background: var(--surface-sunken, #F1F3F6); color: var(--text-heading, #283350); }
.avide-share__btn--fb:hover { border-color: #1877F2; color: #1877F2; }
.avide-share__btn--li:hover { border-color: #0A66C2; color: #0A66C2; }
.avide-share__copy.is-copied { border-color: #1e5c1e; color: #1e5c1e; background: #e6f4e6; }

/* Sổ tay (Handbook), 2026-09-10 additions: the PDF band and the reading
 * list. Same palette as the emergency band (surface-inverse) so the page
 * has two dark anchors, top and middle, and the sourced cards stay light. */
.handbook-download { padding-block: var(--space-10, 40px) 0; background: var(--surface-base, #FFFFFF); }
.handbook-download__card {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-8, 32px);
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--radius-xl, 20px);
  background: var(--surface-inverse, #283350);
  color: #fff;
  box-shadow: var(--shadow-lg, 0 18px 45px rgba(40, 51, 80, 0.16));
}
.handbook-download__card::before,
.handbook-download__card::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.handbook-download__card::before { width: 150px; height: 150px; right: -55px; top: -80px; background: var(--brand-accent, #EF3E23); opacity: 0.9; }
.handbook-download__card::after { width: 55px; height: 55px; right: 78px; bottom: -30px; background: var(--brand-highlight, #FCB415); }
.handbook-download__content, .handbook-download__action { position: relative; z-index: 1; }
.handbook-download__eyebrow { font: var(--type-eyebrow, 600 12px/1.4 var(--font-sans)); text-transform: uppercase; letter-spacing: 0.09em; color: var(--brand-highlight, #FCB415); margin-bottom: var(--space-2, 8px); }
.handbook-download__title { margin: 0 0 var(--space-3, 12px); color: #fff; font: var(--type-h2, 700 28px/1.2 var(--font-sans)); }
.handbook-download__text { max-width: 640px; margin: 0; color: rgba(255,255,255,0.82); font: var(--type-body, 400 16px/1.6 var(--font-sans)); }
.handbook-download__action { display: flex; min-width: 220px; flex-direction: column; align-items: flex-start; gap: var(--space-3, 12px); }
.handbook-download__meta { color: rgba(255,255,255,0.72); font: 400 var(--text-sm, 14px)/1.4 var(--font-sans); font-variant-numeric: tabular-nums; }
.handbook-download__count { color: rgba(255,255,255,0.82); font: 400 var(--text-sm, 14px)/1.4 var(--font-sans); }
.handbook-download__count strong { color: var(--brand-highlight, #FCB415); font-size: var(--text-md, 16px); }
.handbook-download__button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2, 8px);
  padding: 14px 20px; border-radius: 999px;
  background: var(--brand-accent, #EF3E23); color: #fff !important;
  font: var(--weight-bold, 700) var(--text-md, 16px)/1.2 var(--font-sans);
  text-decoration: none !important;
  box-shadow: 0 9px 22px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, background 0.2s ease;
}
.handbook-download__button:hover, .handbook-download__button:focus-visible { background: #D2331A; transform: translateY(-2px); }
.handbook-download__button svg { width: 19px; height: 19px; flex: none; }
.handbook-download + .handbook-body { padding-top: var(--space-10, 40px); }

.handbook-resources { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4, 16px); margin-top: var(--space-8, 32px); }
.resource-card { display: flex; flex-direction: column; gap: var(--space-2, 8px); }
.resource-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 12px); }
.resource-card__icon { color: var(--brand-primary, #283350); display: inline-flex; }
.resource-card__icon svg { width: 22px; height: 22px; }
.resource-card__lang { font-variant-numeric: tabular-nums; }
.resource-card__title { font: var(--type-h3, 700 20px/1.25 var(--font-sans)); color: var(--text-heading, #283350); margin: 0; }
.resource-card__by { font: 400 var(--text-sm, 14px)/1.5 var(--font-sans); color: var(--text-muted, #5B6270); margin: 0; }
.resource-card__desc { font: var(--type-body, 400 16px/1.6 var(--font-sans)); color: var(--text-body, #3D4048); margin: 0; flex: 1; }
.resource-card__note { font: 400 var(--text-sm, 14px)/1.5 var(--font-sans); color: var(--text-muted, #5B6270); margin: 0; padding-left: var(--space-3, 12px); border-left: 3px solid var(--brand-highlight, #FCB415); }
.resource-card__actions { margin-top: var(--space-2, 8px); }

@media (max-width: 760px) {
  .handbook-download__card { align-items: flex-start; flex-direction: column; }
  .handbook-download__card::before { right: -85px; }
  .handbook-download__action { min-width: 0; width: 100%; }
  .handbook-download__button { width: 100%; }
}