/* ==========================================================================
   BIZCA — site công khai. Dùng token trong tokens.css (semantic, tiền tố --bz-).
   Font tự host: 400 / 600 / 800.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  font-family: var(--bz-font-sans);
  font-size: var(--bz-text-body-base-size);
  line-height: var(--bz-text-body-base-lh);
  color: var(--bz-text-primary);
  background: var(--bz-bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--bz-text-link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--bz-text-link-hover); }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; color: var(--bz-text-brand); text-wrap: balance; font-weight: 800; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--bz-green-200); color: var(--bz-forest-900); }
html { scrollbar-color: var(--bz-forest-300) var(--bz-ivory-200); }
:focus-visible { outline: 3px solid var(--bz-green-500); outline-offset: 3px; box-shadow: none; border-radius: var(--bz-radius-sm); }

/* Thang chữ ----------------------------------------------------------- */
.bz-display  { font-size: clamp(36px, 2.6vw + 22px, 56px); line-height: 1.2; letter-spacing: -0.02em; }
.bz-h2       { font-size: clamp(28px, 1.4vw + 20px, 36px); line-height: 1.3; letter-spacing: -0.015em; }
.bz-h3       { font-size: 22px; line-height: 1.4; font-weight: 600; }
.bz-h4       { font-size: 18px; line-height: 1.5; font-weight: 600; }
.bz-lead     { font-size: 18px; line-height: 1.75; color: var(--bz-text-secondary); max-width: 58ch; }
.bz-small    { font-size: 14px; line-height: 1.7; }
.bz-muted    { color: var(--bz-text-muted); }

/* Bố cục ----------------------------------------------------------------- */
.bz-container { width: 100%; max-width: var(--bz-container-max); margin-inline: auto; padding-inline: 24px; }
.bz-section { padding-block: 96px; }
.bz-section--tight { padding-block: 64px; }
.bz-section--sunken { background: var(--bz-bg-surface-sunken); }
.bz-section--inverse { background: var(--bz-bg-inverse); color: var(--bz-text-on-inverse); }
.bz-section--inverse h2, .bz-section--inverse h3 { color: var(--bz-text-on-inverse); }
.bz-section--inverse .bz-lead { color: var(--bz-text-on-inverse-muted); }
.bz-section-head { max-width: 720px; margin-bottom: 48px; }
.bz-section-head .bz-lead { margin-top: 16px; }
.bz-grid { display: grid; gap: 24px; }
.bz-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bz-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bz-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1023px) { .bz-grid--4, .bz-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .bz-grid--4, .bz-grid--3, .bz-grid--2 { grid-template-columns: minmax(0, 1fr); } .bz-section { padding-block: 64px; } .bz-section--tight { padding-block: 48px; } .bz-container { padding-inline: 16px; } }

/* Nút ---------------------------------------------------------------------- */
.bz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--bz-radius-md);
  font-weight: 600; font-size: 16px; line-height: 1.4; text-decoration: none;
  border: 1.5px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s ease;
}
.bz-btn:active { transform: translateY(1px); }
.bz-btn--primary { background: var(--bz-green-500); color: var(--bz-forest-900); box-shadow: 0 1px 0 rgba(15,43,36,.12), 0 6px 16px -6px rgba(0,191,111,.55); }
.bz-btn--primary:hover { background: var(--bz-green-400); color: var(--bz-forest-900); box-shadow: 0 1px 0 rgba(15,43,36,.12), 0 10px 22px -8px rgba(0,191,111,.6); }
.bz-btn--outline { background: transparent; color: var(--bz-text-brand); border-color: var(--bz-forest-200); }
.bz-btn--outline:hover { border-color: var(--bz-forest-800); color: var(--bz-text-brand); background: var(--bz-forest-50); }
.bz-btn--inverse { background: var(--bz-bg-surface); color: var(--bz-text-brand); }
.bz-btn--inverse:hover { background: var(--bz-ivory-100); color: var(--bz-text-brand); }
.bz-btn--outline-inverse { background: transparent; color: var(--bz-text-on-inverse); border-color: var(--bz-forest-500); }
.bz-btn--outline-inverse:hover { border-color: var(--bz-text-on-inverse); color: var(--bz-text-on-inverse); }
.bz-btn--sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.bz-btn--lg { min-height: 56px; padding: 0 28px; font-size: 17px; }
.bz-btn .bz-ico { width: 18px; height: 18px; }
.bz-arrow-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: var(--bz-text-brand); }
.bz-arrow-link .bz-ico { width: 16px; height: 16px; transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.bz-arrow-link:hover .bz-ico { transform: translateX(3px); }
.bz-ico { width: 20px; height: 20px; flex: none; }

/* Skip link ----------------------------------------------------------- */
.bz-skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 16px; border-radius: var(--bz-radius-md); background: var(--bz-forest-800); color: #fff; font-weight: 600; text-decoration: none; }
.bz-skip:focus { top: 12px; }

/* Header ------------------------------------------------------------------- */
.bz-header { position: sticky; top: 0; z-index: 50; background: rgba(250,248,244,.92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--bz-border-subtle); }
.bz-header__inner { height: 72px; display: flex; align-items: center; gap: 32px; }
.bz-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--bz-text-brand); }
.bz-brand__mark { width: 36px; height: 36px; }
.bz-brand__name { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; line-height: 1; }
.bz-brand__tag { display: block; font-size: 11px; line-height: 1.2; color: var(--bz-text-secondary); font-weight: 600; margin-top: 3px; }
.bz-nav { flex: 1; display: flex; justify-content: center; }
.bz-nav__list { display: flex; gap: 4px; }
.bz-nav__btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: var(--bz-radius-md); border: 0; background: transparent; color: var(--bz-text-primary); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; transition: background-color .15s ease; }
.bz-nav__btn:hover, .bz-nav__btn[aria-expanded="true"] { background: var(--bz-forest-50); color: var(--bz-text-brand); }
.bz-nav__btn svg { width: 10px; height: 7px; transition: transform .18s ease; }
.bz-nav__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.bz-header__actions { display: flex; align-items: center; gap: 8px; }
.bz-header__login { font-weight: 600; text-decoration: none; color: var(--bz-text-primary); padding: 0 12px; height: 40px; display: inline-flex; align-items: center; border-radius: var(--bz-radius-md); }
.bz-header__login:hover { background: var(--bz-forest-50); color: var(--bz-text-brand); }
.bz-burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; background: transparent; border-radius: var(--bz-radius-md); cursor: pointer; }
.bz-burger:hover { background: var(--bz-forest-50); }
@media (max-width: 1023px) {
  .bz-header__inner { height: 60px; gap: 12px; }
  .bz-nav, .bz-header__login, .bz-header__cta { display: none; }
  .bz-header__actions { margin-left: auto; }
  .bz-burger { display: inline-flex; }
}

/* Mega menu */
.bz-mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--bz-bg-surface); border-bottom: 1px solid var(--bz-border-subtle); box-shadow: var(--bz-shadow-lg); }
.bz-mega[hidden] { display: none; }
.bz-mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 300px; gap: 32px; padding-block: 32px; }
.bz-mega__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)) 300px; }
.bz-mega__col h3 { font-size: 13px; font-weight: 600; color: var(--bz-text-muted); margin-bottom: 8px; padding-left: 12px; }
.bz-mega__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: var(--bz-radius-md); text-decoration: none; color: var(--bz-text-primary); }
.bz-mega__item:hover { background: var(--bz-forest-50); color: var(--bz-text-brand); }
.bz-mega__label { display: block; font-weight: 600; font-size: 15px; line-height: 1.4; }
.bz-mega__desc { display: block; font-size: 13px; line-height: 1.5; color: var(--bz-text-secondary); }
.bz-mega__chev { width: 8px; height: 12px; flex: none; opacity: 0; transition: opacity .15s ease, transform .15s ease; }
.bz-mega__item:hover .bz-mega__chev { opacity: 1; transform: translateX(2px); }
.bz-mega__promo { background: var(--bz-forest-800); color: #fff; border-radius: var(--bz-radius-lg); padding: 24px; display: flex; flex-direction: column; gap: 12px; justify-content: flex-end; min-height: 100%; position: relative; overflow: hidden; }
.bz-mega__promo h3 { color: #fff; font-size: 18px; line-height: 1.4; font-weight: 600; }
.bz-mega__promo p { color: var(--bz-text-on-inverse-muted); font-size: 14px; line-height: 1.65; }
.bz-mega__promo .bz-arrow-link { color: var(--bz-text-accent-on-inverse); position: relative; }

/* Drawer mobile */
.bz-drawer-overlay { position: fixed; inset: 0; background: rgba(15,43,36,.45); z-index: 60; }
.bz-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(92vw, 400px); background: var(--bz-bg-surface); z-index: 61; display: flex; flex-direction: column; box-shadow: var(--bz-shadow-lg); transform: translateX(0); }
.bz-drawer[hidden], .bz-drawer-overlay[hidden] { display: none; }
.bz-drawer__head { height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 20px; border-bottom: 1px solid var(--bz-border-subtle); }
.bz-drawer__body { flex: 1; overflow-y: auto; padding: 8px 12px 24px; }
.bz-drawer__foot { padding: 16px; border-top: 1px solid var(--bz-border-subtle); display: grid; gap: 8px; }
.bz-drawer details { border-bottom: 1px solid var(--bz-border-subtle); }
.bz-drawer summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 8px; font-weight: 600; cursor: pointer; border-radius: var(--bz-radius-md); }
.bz-drawer summary::-webkit-details-marker { display: none; }
.bz-drawer summary svg { width: 10px; height: 7px; transition: transform .18s ease; }
.bz-drawer details[open] summary svg { transform: rotate(180deg); }
.bz-drawer details a, .bz-drawer > .bz-drawer__body > a { display: block; padding: 10px 8px 10px 20px; text-decoration: none; color: var(--bz-text-primary); border-radius: var(--bz-radius-md); }
.bz-drawer > .bz-drawer__body > a { padding-left: 8px; font-weight: 600; border-bottom: 1px solid var(--bz-border-subtle); border-radius: 0; padding-block: 14px; }
.bz-drawer details a:hover { background: var(--bz-forest-50); }
.bz-drawer .bz-mega__desc { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .bz-drawer { animation: bz-slide-in .28s cubic-bezier(.2,.8,.2,1); }
  .bz-drawer-overlay { animation: bz-fade .2s ease; }
  .bz-mega { animation: bz-drop .18s cubic-bezier(.2,.8,.2,1); }
}
@keyframes bz-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bz-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes bz-drop { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Hero ------------------------------------------------------------------ */
.bz-hero { padding-block: 72px 80px; position: relative; overflow: hidden; }
.bz-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.bz-hero h1 { max-width: 19ch; }
.bz-hero h1 em { font-style: normal; color: var(--bz-text-accent); }
.bz-hero .bz-lead { margin-top: 24px; max-width: 52ch; }
.bz-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.bz-hero__mech { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--bz-border-subtle); }
.bz-hero__mech li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--bz-text-secondary); }
.bz-hero__mech .bz-ico { width: 18px; height: 18px; color: var(--bz-text-accent); }
.bz-hero__art { position: relative; }
.bz-hero__art svg { width: 100%; height: auto; }
@media (max-width: 1023px) {
  .bz-hero { padding-block: 48px 64px; }
  .bz-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .bz-hero h1 { max-width: none; }
  .bz-hero__art { max-width: 560px; }
}
@media (max-width: 639px) { .bz-hero { padding-block: 32px 48px; } .bz-hero__cta .bz-btn { flex: 1 1 100%; } }

/* Minh hoạ hero: nét chảy từ nhu cầu tới bàn được khớp */
.bz-art-flow { stroke-dasharray: 6 8; }
@media (prefers-reduced-motion: no-preference) {
  .bz-art-flow { animation: bz-flow 1.6s linear infinite; }
  .bz-art-pulse { transform-origin: center; transform-box: fill-box; animation: bz-pulse 2.4s ease-in-out infinite; }
}
@keyframes bz-flow { to { stroke-dashoffset: -28; } }
@keyframes bz-pulse { 0%, 100% { transform: scale(1); opacity: .35; } 50% { transform: scale(1.35); opacity: 0; } }

/* Hub: sổ cái hai cột ---------------------------------------------------- */
.bz-ledger { border-top: 1px solid var(--bz-border-subtle); }
.bz-ledger__row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 32px 48px; padding: 40px 0; border-bottom: 1px solid var(--bz-border-subtle); text-decoration: none; color: var(--bz-text-primary); position: relative; }
.bz-ledger__row:hover { color: var(--bz-text-primary); }
.bz-ledger__row:hover .bz-ledger__name { color: var(--bz-text-accent); }
.bz-ledger__name { font-size: 26px; line-height: 1.35; font-weight: 800; letter-spacing: -0.01em; color: var(--bz-text-brand); transition: color .18s ease; }
.bz-ledger__name span { display: block; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--bz-text-secondary); margin-top: 4px; }
.bz-ledger__body p { color: var(--bz-text-secondary); max-width: 62ch; }
.bz-ledger__body ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.bz-ledger__body ul li { font-size: 14px; font-weight: 600; color: var(--bz-text-brand); background: var(--bz-bg-surface); border: 1px solid var(--bz-border-subtle); border-radius: var(--bz-radius-full); padding: 6px 14px; line-height: 1.7; }
.bz-ledger__fee { display: flex; align-items: flex-start; gap: 10px; margin-top: 20px; font-size: 14px; color: var(--bz-text-secondary); }
.bz-ledger__fee .bz-ico { width: 18px; height: 18px; color: var(--bz-text-accent); margin-top: 3px; }
.bz-ledger__row .bz-arrow-link { position: absolute; right: 0; top: 40px; }
@media (max-width: 1023px) { .bz-ledger__row { grid-template-columns: minmax(0,1fr); gap: 16px; padding: 32px 0; } .bz-ledger__row .bz-arrow-link { position: static; margin-top: 16px; } .bz-ledger__name { font-size: 22px; } }

/* Các bước ----------------------------------------------------------------- */
.bz-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; counter-reset: step; position: relative; }
.bz-step { position: relative; padding: 32px 24px 0 0; counter-increment: step; }
.bz-step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--bz-ivory-300); }
.bz-step::after { content: ""; position: absolute; top: -5px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--bz-forest-800); box-shadow: 0 0 0 4px var(--bz-bg-canvas); }
.bz-step--fee::after { background: var(--bz-green-500); }
.bz-step__n { font-size: 13px; font-weight: 600; color: var(--bz-text-muted); display: block; margin-bottom: 8px; }
.bz-step__n::before { content: "Bước " counter(step); }
.bz-step h3 { font-size: 18px; line-height: 1.5; font-weight: 600; }
.bz-step p { margin-top: 8px; font-size: 15px; color: var(--bz-text-secondary); }
@media (max-width: 1023px) { .bz-steps { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 32px; } .bz-step { padding-right: 0; } }
@media (max-width: 639px) { .bz-steps { grid-template-columns: minmax(0,1fr); } }

/* Tin cậy ----------------------------------------------------------------- */
.bz-trust { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.bz-trust__list { display: grid; gap: 8px; }
.bz-trust__item { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px; border-radius: var(--bz-radius-lg); background: rgba(255,255,255,.04); border: 1px solid var(--bz-forest-600); }
.bz-trust__item .bz-ico { width: 44px; height: 44px; border-radius: var(--bz-radius-md); background: var(--bz-forest-700); color: var(--bz-green-500); padding: 11px; }
.bz-trust__item h3 { font-size: 17px; line-height: 1.5; font-weight: 600; }
.bz-trust__item h3 span { color: var(--bz-text-on-inverse-muted); font-weight: 400; }
.bz-trust__item p { color: var(--bz-text-on-inverse-muted); font-size: 15px; margin-top: 4px; }
.bz-trust__art svg { width: 100%; height: auto; }
@media (max-width: 1023px) { .bz-trust { grid-template-columns: minmax(0,1fr); gap: 40px; } .bz-trust__art { max-width: 560px; order: -1; } }

/* Phí ------------------------------------------------------------------------ */
.bz-price-wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.bz-price { background: var(--bz-bg-surface); border: 1px solid var(--bz-border-subtle); border-radius: var(--bz-radius-xl); padding: 32px; display: flex; flex-direction: column; gap: 20px; box-shadow: var(--bz-shadow-xs); position: relative; }
.bz-price--main { border-color: var(--bz-forest-800); box-shadow: 0 0 0 1px var(--bz-forest-800), var(--bz-shadow-md); }
.bz-price__badge { position: absolute; top: -13px; left: 32px; background: var(--bz-forest-800); color: #fff; font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: var(--bz-radius-full); }
.bz-price h3 { font-size: 18px; font-weight: 600; line-height: 1.5; }
.bz-price h3 span { display: block; font-size: 14px; font-weight: 400; color: var(--bz-text-secondary); }
.bz-price__amt { font-size: 40px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: var(--bz-text-brand); font-variant-numeric: tabular-nums; }
.bz-price__amt small { font-size: 16px; font-weight: 400; color: var(--bz-text-muted); letter-spacing: 0; margin-left: 4px; }
.bz-price ul { display: grid; gap: 10px; font-size: 15px; color: var(--bz-text-secondary); }
.bz-price ul li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.65; }
.bz-price ul .bz-ico { width: 18px; height: 18px; color: var(--bz-text-accent); margin-top: 3px; }
.bz-price .bz-btn { margin-top: auto; }
.bz-price__note { font-size: 13px; color: var(--bz-text-muted); }
.bz-fee-rule { margin-top: 32px; padding: 20px 24px; border-radius: var(--bz-radius-lg); background: var(--bz-bg-surface-sunken); display: flex; gap: 16px; align-items: flex-start; }
.bz-fee-rule .bz-ico { width: 24px; height: 24px; color: var(--bz-text-accent); flex: none; margin-top: 2px; }
.bz-fee-rule p { font-size: 15px; color: var(--bz-text-secondary); }
.bz-fee-rule strong { color: var(--bz-text-primary); }
@media (max-width: 767px) { .bz-price-wrap { grid-template-columns: minmax(0,1fr); } .bz-price__amt { font-size: 34px; } }

/* Cộng đồng: tranh + ba lối vào ---------------------------------------- */
.bz-band { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.bz-band__art svg { width: 100%; height: auto; }
.bz-band__links { display: grid; }
.bz-band__link { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 22px 0; border-top: 1px solid var(--bz-border-subtle); text-decoration: none; color: var(--bz-text-primary); }
.bz-band__link:last-child { border-bottom: 1px solid var(--bz-border-subtle); }
.bz-band__link:hover { color: var(--bz-text-primary); }
.bz-band__link:hover .bz-ico { transform: translateX(4px); }
.bz-band__link h3 { font-size: 20px; line-height: 1.4; font-weight: 600; }
.bz-band__link p { margin-top: 4px; font-size: 15px; color: var(--bz-text-secondary); }
.bz-band__link .bz-ico { width: 22px; height: 22px; color: var(--bz-text-brand); transition: transform .18s cubic-bezier(.2,.8,.2,1); }
@media (max-width: 1023px) { .bz-band { grid-template-columns: minmax(0,1fr); gap: 40px; } .bz-band__art { max-width: 560px; } }

/* FAQ ------------------------------------------------------------------------ */
.bz-faq { max-width: 800px; }
.bz-faq details { border-top: 1px solid var(--bz-border-subtle); }
.bz-faq details:last-child { border-bottom: 1px solid var(--bz-border-subtle); }
.bz-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; font-weight: 600; font-size: 17px; line-height: 1.5; color: var(--bz-text-brand); cursor: pointer; border-radius: var(--bz-radius-sm); }
.bz-faq summary::-webkit-details-marker { display: none; }
.bz-faq summary svg { width: 20px; height: 20px; flex: none; color: var(--bz-text-accent); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.bz-faq details[open] summary svg { transform: rotate(45deg); }
.bz-faq details p { padding: 0 4px 24px; color: var(--bz-text-secondary); max-width: 66ch; }
.bz-faq details p + p { margin-top: -12px; }
.bz-faq details a { color: var(--bz-text-link); }

/* CTA cuối --------------------------------------------------------------- */
.bz-close { background: var(--bz-forest-800); color: #fff; border-radius: var(--bz-radius-xl); padding: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; position: relative; overflow: hidden; }
.bz-close h2 { color: #fff; max-width: 18ch; }
.bz-close p { color: var(--bz-text-on-inverse-muted); margin-top: 12px; max-width: 52ch; }
.bz-close__cta { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 767px) { .bz-close { grid-template-columns: minmax(0,1fr); padding: 40px 24px; } }

/* Footer --------------------------------------------------------------- */
.bz-footer { background: var(--bz-forest-900); color: var(--bz-text-on-inverse-muted); padding-block: 64px 32px; margin-top: 96px; }
.bz-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 40px; }
.bz-footer h3 { color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.bz-footer ul { display: grid; gap: 8px; }
.bz-footer a { color: var(--bz-text-on-inverse-muted); text-decoration: none; font-size: 15px; }
.bz-footer a:hover { color: #fff; }
.bz-footer .bz-brand { color: #fff; }
.bz-footer .bz-brand__tag { color: var(--bz-text-on-inverse-muted); }
.bz-footer__about p { font-size: 14px; margin-top: 16px; max-width: 34ch; }
.bz-footer__legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--bz-forest-700); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; }
@media (max-width: 1023px) { .bz-footer__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .bz-footer__about { grid-column: 1 / -1; } }
@media (max-width: 639px) { .bz-footer { margin-top: 64px; } .bz-footer__grid { grid-template-columns: minmax(0,1fr); gap: 28px; } }


/* Trang trong: đầu trang + bảng + prose ------------------------------------ */
.bz-page-head { padding-block: 64px 48px; max-width: 800px; }
.bz-page-head h1 { margin-top: 12px; }
.bz-page-head .bz-lead { margin-top: 20px; }
.bz-page-head .bz-hero__cta { margin-top: 28px; }
@media (max-width: 639px) { .bz-page-head { padding-block: 40px 32px; } }
.bz-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--bz-border-subtle); border-radius: var(--bz-radius-lg); background: var(--bz-bg-surface); box-shadow: var(--bz-shadow-xs); }
.bz-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.bz-table caption { text-align: left; padding: 20px 24px 12px; font-weight: 600; font-size: 17px; color: var(--bz-text-brand); }
.bz-table th, .bz-table td { text-align: left; vertical-align: top; padding: 16px 24px; border-top: 1px solid var(--bz-border-subtle); line-height: 1.65; }
.bz-table thead th { font-size: 13px; font-weight: 600; color: var(--bz-text-secondary); background: var(--bz-bg-surface-sunken); border-top: 0; padding-block: 12px; }
.bz-table tbody th { font-weight: 600; color: var(--bz-text-brand); white-space: nowrap; }
.bz-table tbody th span { display: block; font-size: 13px; font-weight: 400; color: var(--bz-text-secondary); white-space: normal; }
.bz-table .bz-num { font-weight: 800; font-size: 20px; letter-spacing: -0.01em; color: var(--bz-text-brand); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.4; }
.bz-table .bz-num small { display: block; font-size: 13px; font-weight: 400; color: var(--bz-text-muted); letter-spacing: 0; }
.bz-table td { color: var(--bz-text-secondary); }
.bz-table tbody tr:hover td, .bz-table tbody tr:hover th { background: var(--bz-ivory-50); }
.bz-note { font-size: 14px; color: var(--bz-text-secondary); margin-top: 12px; }
.bz-prose { max-width: 68ch; margin-inline: 0; }
.bz-prose h2 { margin-top: 48px; font-size: 28px; line-height: 1.35; }
.bz-prose h3 { margin-top: 32px; font-size: 20px; line-height: 1.4; font-weight: 600; }
.bz-prose p, .bz-prose li { margin-top: 12px; color: var(--bz-text-secondary); }
.bz-prose ul { list-style: disc; padding-left: 22px; }
.bz-prose strong { color: var(--bz-text-primary); }
.bz-example { background: var(--bz-bg-surface); border: 1px solid var(--bz-border-subtle); border-radius: var(--bz-radius-lg); padding: 24px; }
.bz-example h3 { font-size: 16px; font-weight: 600; line-height: 1.5; }
.bz-example p { margin-top: 8px; font-size: 15px; color: var(--bz-text-secondary); }
.bz-example .bz-num { display: block; margin-top: 12px; font-size: 24px; font-weight: 800; color: var(--bz-text-brand); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1.3; }
.bz-example .bz-num small { font-size: 13px; font-weight: 400; color: var(--bz-text-muted); letter-spacing: 0; margin-left: 6px; }
.bz-split { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.bz-split > div { padding: 24px; border-radius: var(--bz-radius-lg); background: var(--bz-bg-surface); border: 1px solid var(--bz-border-subtle); }
.bz-split h3 { font-size: 17px; font-weight: 600; line-height: 1.5; }
.bz-split p { margin-top: 8px; font-size: 15px; color: var(--bz-text-secondary); }
@media (max-width: 1023px) { .bz-split { grid-template-columns: minmax(0,1fr); } }

/* Mục lục trong trang + trụ cột ------------------------------------------- */
.bz-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bz-toc a { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--bz-text-brand); background: var(--bz-bg-surface); border: 1px solid var(--bz-border-subtle); border-radius: var(--bz-radius-full); padding: 8px 14px; line-height: 1.6; }
.bz-toc a:hover { border-color: var(--bz-forest-800); }
.bz-pillars { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; counter-reset: pillar; }
.bz-pillars > li { counter-increment: pillar; padding: 28px; background: var(--bz-bg-surface); border: 1px solid var(--bz-border-subtle); border-radius: var(--bz-radius-lg); }
.bz-pillars > li::before { content: counter(pillar); display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--bz-forest-800); color: #fff; font-weight: 800; font-size: 14px; margin-bottom: 16px; }
.bz-pillars h3 { font-size: 18px; line-height: 1.5; font-weight: 600; }
.bz-pillars p { margin-top: 8px; font-size: 15px; color: var(--bz-text-secondary); }
@media (max-width: 1023px) { .bz-pillars { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 639px) { .bz-pillars { grid-template-columns: minmax(0,1fr); } }
.bz-detail { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 24px 48px; padding: 40px 0; border-top: 1px solid var(--bz-border-subtle); }
.bz-detail:last-child { border-bottom: 1px solid var(--bz-border-subtle); }
.bz-detail > h2 { font-size: 24px; line-height: 1.35; }
.bz-detail > h2 span { display: block; font-size: 14px; font-weight: 600; color: var(--bz-text-secondary); margin-top: 6px; }
.bz-detail__body > p { color: var(--bz-text-secondary); max-width: 66ch; }
.bz-detail__body > p + p { margin-top: 12px; }
.bz-detail__body ul { margin-top: 16px; display: grid; gap: 10px; }
.bz-detail__body ul li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: var(--bz-text-secondary); }
.bz-detail__body ul li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; background: var(--bz-forest-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m6 10 3 3 5-6' stroke='%23173F35' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; margin-top: 4px; }
.bz-detail__body ul li strong { color: var(--bz-text-primary); }
.bz-detail__body .bz-arrow-link { margin-top: 20px; }
.bz-detail__cols { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin-top: 8px; }
.bz-detail__cols h3 { font-size: 16px; font-weight: 600; line-height: 1.5; }
.bz-detail__cols p { margin-top: 6px; font-size: 15px; color: var(--bz-text-secondary); }
.bz-detail__cols .bz-num { display: block; font-size: 22px; font-weight: 800; color: var(--bz-text-brand); letter-spacing: -0.01em; line-height: 1.3; margin-bottom: 4px; }
@media (max-width: 1023px) { .bz-detail { grid-template-columns: minmax(0,1fr); gap: 16px; padding: 32px 0; } .bz-detail__cols { grid-template-columns: minmax(0,1fr); } }
.bz-tiers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; border: 1px solid var(--bz-border-subtle); border-radius: var(--bz-radius-lg); overflow: hidden; }
.bz-tiers > div { padding: 24px; background: var(--bz-bg-surface); border-left: 1px solid var(--bz-border-subtle); }
.bz-tiers > div:first-child { border-left: 0; }
.bz-tiers > div:last-child { background: var(--bz-forest-800); color: #fff; }
.bz-tiers > div:last-child h3, .bz-tiers > div:last-child p { color: #fff; }
.bz-tiers > div:last-child p { color: var(--bz-text-on-inverse-muted); }
.bz-tiers h3 { font-size: 16px; font-weight: 600; line-height: 1.5; }
.bz-tiers p { margin-top: 6px; font-size: 15px; color: var(--bz-text-secondary); }
@media (max-width: 767px) { .bz-tiers { grid-template-columns: minmax(0,1fr); } .bz-tiers > div { border-left: 0; border-top: 1px solid var(--bz-border-subtle); } .bz-tiers > div:first-child { border-top: 0; } }
@media (max-width: 639px) {
  .bz-ledger__body ul { display: block; margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--bz-text-brand); }
  .bz-ledger__body ul li { display: inline; padding: 0; border: 0; background: none; }
  .bz-ledger__body ul li + li::before { content: " · "; color: var(--bz-text-muted); }
}

/* Form -------------------------------------------------------------------- */
.bz-form { display: grid; gap: 20px; max-width: 720px; }
.bz-form__row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
@media (max-width: 639px) { .bz-form__row { grid-template-columns: minmax(0,1fr); } }
.bz-field { display: grid; gap: 6px; }
.bz-field label { font-size: 14px; font-weight: 600; color: var(--bz-text-primary); line-height: 1.5; }
.bz-field label small { font-weight: 400; color: var(--bz-text-secondary); }
.bz-field .bz-help { font-size: 13px; color: var(--bz-text-secondary); line-height: 1.65; }
.bz-input, .bz-select, .bz-textarea { width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; line-height: 1.5; color: var(--bz-text-primary); background: var(--bz-bg-surface); border: 1.5px solid var(--bz-ivory-400); border-radius: var(--bz-radius-md); transition: border-color .15s ease, box-shadow .15s ease; caret-color: var(--bz-green-600); }
.bz-input::placeholder, .bz-textarea::placeholder { color: var(--bz-slate-500); }
.bz-input:hover, .bz-select:hover, .bz-textarea:hover { border-color: var(--bz-forest-300); }
.bz-input:focus-visible, .bz-select:focus-visible, .bz-textarea:focus-visible { outline: none; border-color: var(--bz-forest-800); box-shadow: 0 0 0 3px rgba(0,191,111,.3); }
.bz-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='m1 1.5 5 5 5-5' stroke='%23173F35' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.bz-textarea { min-height: 160px; resize: vertical; }
.bz-field[data-invalid] .bz-input, .bz-field[data-invalid] .bz-select, .bz-field[data-invalid] .bz-textarea { border-color: var(--bz-danger-500); }
.bz-error { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; line-height: 1.65; color: var(--bz-danger-700); font-weight: 600; }
.bz-error[hidden] { display: none; }
.bz-error::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 1px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='8' cy='8' r='6.5' stroke='%23991B1B' stroke-width='1.5'/%3E%3Cpath d='M8 4.5v4m0 2.5h.01' stroke='%23991B1B' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.bz-check { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.6; color: var(--bz-text-secondary); cursor: pointer; }
.bz-check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--bz-green-600); }
.bz-check a { color: var(--bz-text-link); }
.bz-count { font-size: 13px; color: var(--bz-text-secondary); text-align: right; font-variant-numeric: tabular-nums; }
.bz-form__foot { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.bz-form__foot .bz-small { color: var(--bz-text-secondary); }
.bz-success { background: var(--bz-feedback-success-bg); border: 1px solid var(--bz-success-500); border-radius: var(--bz-radius-lg); padding: 24px 28px; max-width: 720px; }
.bz-success[hidden] { display: none; }
.bz-success h2 { font-size: 22px; line-height: 1.4; color: var(--bz-success-700); }
.bz-success p { margin-top: 8px; color: var(--bz-text-primary); }
.bz-aside { background: var(--bz-bg-surface); border: 1px solid var(--bz-border-subtle); border-radius: var(--bz-radius-lg); padding: 24px; position: sticky; top: 96px; }
.bz-aside h2 { font-size: 17px; line-height: 1.5; font-weight: 600; }
.bz-aside ul { display: grid; gap: 14px; margin-top: 16px; }
.bz-aside li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 15px; color: var(--bz-text-secondary); }
.bz-aside li strong { display: block; color: var(--bz-text-primary); }
.bz-aside .bz-ico { width: 22px; height: 22px; color: var(--bz-text-accent); margin-top: 2px; }
.bz-two { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px; align-items: start; }
@media (max-width: 1023px) { .bz-two { grid-template-columns: minmax(0,1fr); } .bz-aside { position: static; } }
.bz-callout { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--bz-radius-lg); background: var(--bz-bg-surface-sunken); border: 1px solid var(--bz-border-subtle); font-size: 15px; color: var(--bz-text-secondary); }
.bz-callout .bz-ico { width: 22px; height: 22px; color: var(--bz-text-brand); flex: none; margin-top: 2px; }
.bz-callout strong { color: var(--bz-text-primary); }

/* Liên hệ, chapter, partner --------------------------------------------- */
.bz-contact { display: grid; gap: 4px; }
.bz-contact dt { font-size: 13px; font-weight: 600; color: var(--bz-text-secondary); margin-top: 16px; }
.bz-contact dd { margin: 0; font-size: 17px; font-weight: 600; color: var(--bz-text-brand); }
.bz-contact dd a { color: var(--bz-text-brand); text-decoration: none; }
.bz-contact dd a:hover { text-decoration: underline; }
.bz-filter { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; padding: 20px; background: var(--bz-bg-surface); border: 1px solid var(--bz-border-subtle); border-radius: var(--bz-radius-lg); }
@media (max-width: 767px) { .bz-filter { grid-template-columns: minmax(0,1fr); } }
.bz-empty { padding: 32px; border: 1px dashed var(--bz-ivory-400); border-radius: var(--bz-radius-lg); text-align: center; color: var(--bz-text-secondary); }
.bz-empty[hidden] { display: none; }
.bz-empty strong { display: block; color: var(--bz-text-brand); font-size: 18px; margin-bottom: 6px; }
.bz-choice { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.bz-choice label { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1.5px solid var(--bz-border-subtle); border-radius: var(--bz-radius-lg); background: var(--bz-bg-surface); cursor: pointer; }
.bz-choice label:has(input:checked) { border-color: var(--bz-forest-800); box-shadow: 0 0 0 1px var(--bz-forest-800); }
.bz-choice label:has(input:focus-visible) { outline: 3px solid var(--bz-green-500); outline-offset: 3px; }
.bz-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bz-choice strong { font-size: 16px; color: var(--bz-text-brand); }
.bz-choice span { font-size: 14px; color: var(--bz-text-secondary); line-height: 1.6; }
@media (max-width: 1023px) { .bz-choice { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 639px) { .bz-choice { grid-template-columns: minmax(0,1fr); } }
.bz-faq-group + .bz-faq-group { margin-top: 48px; }
.bz-faq-group h2 { font-size: 24px; line-height: 1.35; margin-bottom: 8px; }
.bz-principles { counter-reset: p; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 32px; }
.bz-principles li { counter-increment: p; display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 14px 0; border-top: 1px solid var(--bz-border-subtle); }
.bz-principles li::before { content: counter(p, decimal-leading-zero); font-weight: 800; color: var(--bz-text-accent); font-variant-numeric: tabular-nums; line-height: 1.6; }
.bz-principles strong { display: block; color: var(--bz-text-brand); }
.bz-principles span { font-size: 15px; color: var(--bz-text-secondary); }
@media (max-width: 767px) { .bz-principles { grid-template-columns: minmax(0,1fr); } }

/* Bài viết, văn bản pháp lý, danh sách bài ------------------------------------ */
.bz-article { font-size: 17px; }
.bz-article > :first-child { margin-top: 0; }
.bz-article h2 { margin-top: 44px; font-size: 24px; line-height: 1.35; }
.bz-article h3 { margin-top: 28px; }
.bz-article p { margin-top: 14px; color: var(--bz-text-primary); }
.bz-article p em { color: var(--bz-text-secondary); }
.bz-article ul, .bz-article ol { margin-top: 12px; padding-left: 22px; }
.bz-article ul { list-style: disc; } .bz-article ol { list-style: decimal; }
.bz-article li { margin-top: 6px; color: var(--bz-text-primary); }
.bz-article table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 15px; }
.bz-article th, .bz-article td { text-align: left; padding: 10px 12px; border-top: 1px solid var(--bz-border-subtle); vertical-align: top; }
.bz-article th { font-weight: 600; color: var(--bz-text-brand); }
.bz-article blockquote { margin: 16px 0 0; padding: 12px 20px; border-left: 1px solid var(--bz-forest-300); color: var(--bz-text-secondary); }
.bz-article hr { border: 0; border-top: 1px solid var(--bz-border-subtle); margin: 32px 0; }
.bz-article a { color: var(--bz-text-link); }
.bz-posts { display: grid; gap: 0; border-top: 1px solid var(--bz-border-subtle); }
.bz-post a { display: grid; grid-template-columns: 120px 1fr; gap: 8px 32px; padding: 24px 0; border-bottom: 1px solid var(--bz-border-subtle); text-decoration: none; color: var(--bz-text-primary); }
.bz-post a:hover h2 { color: var(--bz-text-accent); }
.bz-post time { font-size: 14px; color: var(--bz-text-secondary); font-variant-numeric: tabular-nums; padding-top: 4px; }
.bz-post h2 { font-size: 20px; line-height: 1.4; font-weight: 600; transition: color .15s ease; }
.bz-post p { grid-column: 2; font-size: 15px; color: var(--bz-text-secondary); }
@media (max-width: 639px) { .bz-post a { grid-template-columns: minmax(0,1fr); } .bz-post p { grid-column: 1; } }
.bz-article { overflow-wrap: anywhere; }
.bz-article table { display: block; overflow-x: auto; }

/* Cửa khoá hội viên + auth ------------------------------------------------ */
.bz-gate { display: grid; grid-template-columns: 56px 1fr; gap: 20px; padding: 32px; background: var(--bz-bg-surface); border: 1px solid var(--bz-border-subtle); border-radius: var(--bz-radius-xl); max-width: 800px; }
.bz-gate .bz-ico { width: 56px; height: 56px; padding: 14px; border-radius: var(--bz-radius-lg); background: var(--bz-forest-50); color: var(--bz-forest-800); }
.bz-gate h2 { font-size: 22px; line-height: 1.4; font-weight: 600; }
.bz-gate p { margin-top: 8px; color: var(--bz-text-secondary); }
@media (max-width: 639px) { .bz-gate { grid-template-columns: minmax(0,1fr); padding: 24px; } }
.bz-auth { max-width: 460px; margin: 0 auto; background: var(--bz-bg-surface); border: 1px solid var(--bz-border-subtle); border-radius: var(--bz-radius-xl); padding: 32px; box-shadow: var(--bz-shadow-sm); }
.bz-auth h1 { font-size: 28px; line-height: 1.3; }
.bz-auth .bz-lead { font-size: 16px; margin-top: 8px; }
.bz-auth form { margin-top: 24px; }
.bz-auth__foot { margin-top: 20px; font-size: 14px; color: var(--bz-text-secondary); display: grid; gap: 6px; }

/* Đầu trang có minh hoạ ------------------------------------------------------ */
.bz-page-head--art { max-width: none; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; }
.bz-page-head--art > div:first-child { max-width: 720px; }
.bz-page-head__art svg { width: 100%; height: auto; }
@media (max-width: 1023px) { .bz-page-head--art { grid-template-columns: minmax(0, 1fr); gap: 32px; } .bz-page-head__art { max-width: 520px; } }