/* ==========================================================================
   BIZCA — Lớp trình bày trang công khai
   Dựng từ board Figma "Trang chủ — Desktop 1440" (Y6aLKm9LpU3K3WXNQbvZxN).
   Chỉ dùng token semantic --bz-* của bizca-tokens.css, không nhập giá trị thô.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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;
}

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul { padding: 0; list-style: none; }

/* Chỉ hiện cho trình đọc màn hình */
.bz-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bz-skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 12px 20px; border-radius: var(--bz-radius-md);
  background: var(--bz-bg-inverse); color: var(--bz-text-on-inverse);
  font-weight: 600; transition: top .18s ease-out;
}
.bz-skip:focus { top: 16px; }

/* --------------------------------------------------------------------------
   Bố cục chung
   -------------------------------------------------------------------------- */

/* Cột nội dung phải rộng đúng --bz-container-max (1280), lề nằm NGOÀI con số đó,
   khớp với board Figma 1440 = 1280 nội dung + 80 lề mỗi bên. */
.bz-container {
  width: 100%;
  max-width: calc(var(--bz-container-max) + 2 * var(--bz-space-24));
  margin-inline: auto;
  padding-inline: var(--bz-space-24);
}

.bz-section { padding-block: var(--bz-space-64); }
.bz-section--sunken { background: var(--bz-bg-surface-sunken); }
.bz-section--inverse { background: var(--bz-bg-inverse); color: var(--bz-text-on-inverse); }

.bz-head { display: grid; gap: var(--bz-space-12); justify-items: center; text-align: center; }
.bz-head p { max-width: 62ch; color: var(--bz-text-secondary); text-wrap: pretty; }
.bz-section--inverse .bz-head p { color: var(--bz-text-on-inverse-muted); }

h1, h2, h3, h4 { text-wrap: balance; }
.bz-display { font-size: var(--bz-text-display-m-size); line-height: var(--bz-text-display-m-lh); font-weight: 800; letter-spacing: -.5px; }
.bz-h1 { font-size: var(--bz-text-heading-2-size); line-height: var(--bz-text-heading-2-lh); font-weight: 800; letter-spacing: -.3px; }
.bz-h3 { font-size: var(--bz-text-heading-3-size); line-height: var(--bz-text-heading-3-lh); font-weight: 700; }
.bz-h4 { font-size: var(--bz-text-heading-4-size); line-height: var(--bz-text-heading-4-lh); font-weight: 600; }
.bz-lead { font-size: var(--bz-text-body-base-size); line-height: var(--bz-text-body-base-lh); color: var(--bz-text-secondary); text-wrap: pretty; }
.bz-eyebrow {
  font-size: var(--bz-text-overline-size); line-height: var(--bz-text-overline-lh);
  font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--bz-text-accent);
}
.bz-section--inverse .bz-eyebrow { color: var(--bz-text-accent-on-inverse); }
.bz-muted { color: var(--bz-text-muted); }
.bz-accent { color: var(--bz-text-accent); }

/* --------------------------------------------------------------------------
   Nút
   -------------------------------------------------------------------------- */

.bz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bz-space-8);
  min-height: var(--bz-control-height-md);
  padding: 0 var(--bz-space-24);
  border-radius: var(--bz-radius-md);
  font-size: var(--bz-text-label-base-size); font-weight: 600; line-height: 1.4;
  border: var(--bz-border-width-hairline) solid transparent;
  transition: background-color .16s ease-out, border-color .16s ease-out, transform .16s ease-out;
}
.bz-btn--lg { min-height: var(--bz-control-height-lg); padding-inline: var(--bz-space-32); font-size: var(--bz-text-label-large-size); }
/* Nút chính dùng green/700 + chữ trắng (5,41:1) thay vì green/500 + chữ
   forest/800 (4,8:1). Cả hai đều đạt AA, nhưng chữ đậm trên nền sáng rực đọc
   bị chìm; chữ trắng trên nền xanh đậm bật hẳn lên. */
.bz-btn--primary { background: var(--bz-action-primary-bg); color: var(--bz-action-primary-text); }
.bz-btn--primary:hover { background: var(--bz-action-primary-bg-hover); }
.bz-btn--secondary { background: var(--bz-action-secondary-bg); color: var(--bz-action-secondary-text); }
.bz-btn--secondary:hover { background: var(--bz-action-secondary-bg-hover); }
.bz-btn--outline { border-color: var(--bz-action-outline-border); color: var(--bz-action-outline-border); background: var(--bz-bg-surface); }
.bz-btn--outline:hover { background: var(--bz-bg-brand-subtle); }
.bz-btn--outline-inverse { border-color: var(--bz-text-on-inverse); color: var(--bz-text-on-inverse); }
.bz-btn--outline-inverse:hover { background: rgba(255,255,255,.1); }
.bz-btn--block { width: 100%; }

.bz-arrow-link {
  display: inline-flex; align-items: center; gap: var(--bz-space-8);
  font-size: var(--bz-text-label-base-size); font-weight: 600; color: var(--bz-text-accent);
}
.bz-arrow-link svg { transition: transform .16s ease-out; }
.bz-arrow-link:hover svg { transform: translateX(3px); }

.bz-pill {
  display: inline-flex; align-items: center; gap: var(--bz-space-8);
  padding: 6px var(--bz-space-16);
  border-radius: var(--bz-radius-full);
  background: var(--bz-bg-brand-subtle); color: var(--bz-text-brand);
  font-size: var(--bz-text-label-small-size); font-weight: 600;
}

/* --------------------------------------------------------------------------
   Header + Mega menu
   -------------------------------------------------------------------------- */

.bz-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bz-bg-surface);
  border-bottom: var(--bz-border-width-hairline) solid var(--bz-border-subtle);
}
.bz-header__inner {
  display: flex; align-items: center; gap: var(--bz-space-24);
  height: 60px;
  transition: height .2s ease-out;
}
.bz-header.is-stuck { box-shadow: var(--bz-shadow-sm); }

.bz-brand { display: flex; align-items: center; gap: var(--bz-space-12); flex: none; }
.bz-brand__mark {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--bz-radius-md);
  background: var(--bz-green-700); color: var(--bz-base-white);
  font-weight: 800; font-size: 18px;
}
.bz-brand__name { font-size: 20px; font-weight: 800; letter-spacing: -.3px; color: var(--bz-text-brand); line-height: 1.1; }
.bz-brand__tag { font-size: 9px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--bz-text-muted); }

.bz-nav { display: none; }
.bz-nav__list { display: flex; align-items: center; gap: var(--bz-space-8); }
.bz-nav__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px var(--bz-space-12); border-radius: var(--bz-radius-md);
  font-size: var(--bz-text-label-base-size); font-weight: 600; color: var(--bz-text-primary);
}
.bz-nav__btn:hover { background: var(--bz-bg-surface-sunken); }
.bz-nav__btn[aria-expanded="true"] { color: var(--bz-text-accent); background: var(--bz-bg-brand-subtle); }
.bz-nav__btn svg { transition: transform .16s ease-out; }
.bz-nav__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.bz-header__actions { display: flex; align-items: center; gap: var(--bz-space-12); margin-left: auto; }
.bz-iconbtn {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--bz-radius-md);
  border: var(--bz-border-width-hairline) solid var(--bz-border-default);
  color: var(--bz-text-secondary); background: var(--bz-bg-surface);
}
.bz-iconbtn:hover { background: var(--bz-bg-surface-sunken); }
.bz-header__login { display: none; font-size: var(--bz-text-label-base-size); font-weight: 600; }

.bz-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--bz-bg-surface);
  border-top: var(--bz-border-width-hairline) solid var(--bz-border-subtle);
  box-shadow: var(--bz-shadow-lg);
  padding-block: var(--bz-space-40);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease-out, transform .16s ease-out, visibility .16s;
}
.bz-mega.is-open { opacity: 1; visibility: visible; transform: none; }
.bz-mega__grid { display: grid; grid-template-columns: repeat(3, 1fr) 356px; gap: var(--bz-space-32); }
.bz-mega__col > h3 {
  font-size: var(--bz-text-overline-size); font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--bz-text-muted); margin-bottom: var(--bz-space-12);
}
.bz-mega__item {
  display: flex; align-items: center; gap: var(--bz-space-12);
  padding: 10px var(--bz-space-12); border-radius: var(--bz-radius-md);
  transition: background-color .14s ease-out;
}
.bz-mega__item:hover { background: var(--bz-bg-surface-hover); }
.bz-mega__item:hover .bz-mega__label { color: var(--bz-text-accent); }
.bz-mega__item:hover .bz-mega__chev { opacity: 1; transform: none; }
.bz-mega__label { display: block; font-size: var(--bz-text-label-large-size); font-weight: 600; }
.bz-mega__desc { display: block; font-size: var(--bz-text-body-small-size); line-height: 1.5; color: var(--bz-text-muted); }
.bz-mega__chev { margin-left: auto; color: var(--bz-text-accent); opacity: 0; transform: translateX(-4px); transition: opacity .14s, transform .14s; }
.bz-mega__promo {
  display: grid; gap: var(--bz-space-12); align-content: start;
  padding: var(--bz-space-20); border-radius: var(--bz-radius-lg);
  background: var(--bz-bg-inverse); color: var(--bz-text-on-inverse);
}
.bz-mega__promo p { color: var(--bz-text-on-inverse-muted); font-size: var(--bz-text-body-small-size); }
.bz-mega__promo .bz-arrow-link { color: var(--bz-text-accent-on-inverse); }

/* Drawer mobile */
.bz-drawer {
  position: fixed; inset: 0; z-index: 90;
  visibility: hidden;
}
.bz-drawer.is-open { visibility: visible; }
.bz-drawer__scrim {
  position: absolute; inset: 0; background: var(--bz-bg-overlay);
  opacity: 0; transition: opacity .25s ease-out;
}
.bz-drawer.is-open .bz-drawer__scrim { opacity: .55; }
.bz-drawer__panel {
  position: absolute; inset-block: 0; right: 0; width: min(320px, 88vw);
  display: flex; flex-direction: column;
  background: var(--bz-bg-surface); box-shadow: var(--bz-shadow-lg);
  transform: translateX(100%); transition: transform .25s cubic-bezier(.32,.72,0,1);
}
.bz-drawer.is-open .bz-drawer__panel { transform: none; }
.bz-drawer__top {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--bz-space-8) var(--bz-space-12) var(--bz-space-8) var(--bz-space-20);
  border-bottom: var(--bz-border-width-hairline) solid var(--bz-border-subtle);
}
.bz-drawer__list { flex: 1; overflow-y: auto; padding: var(--bz-space-8) var(--bz-space-20); }
.bz-drawer__list details { border-bottom: var(--bz-border-width-hairline) solid var(--bz-border-subtle); }
.bz-drawer__list summary {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; font-size: var(--bz-text-label-large-size); font-weight: 600;
  cursor: pointer; list-style: none;
}
.bz-drawer__list summary::-webkit-details-marker { display: none; }
.bz-drawer__list details[open] > summary { color: var(--bz-text-accent); }
.bz-drawer__list details[open] > summary svg { transform: rotate(180deg); }
.bz-drawer__list summary svg { color: var(--bz-text-muted); transition: transform .16s ease-out; }
.bz-drawer__sub { padding: 0 0 var(--bz-space-8) var(--bz-space-12); }
.bz-drawer__sub a { display: flex; align-items: center; min-height: 44px; color: var(--bz-text-secondary); }
.bz-drawer__cta {
  display: grid; gap: var(--bz-space-12);
  padding: var(--bz-space-16) var(--bz-space-20) var(--bz-space-24);
  border-top: var(--bz-border-width-hairline) solid var(--bz-border-subtle);
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.bz-hero { padding-block: var(--bz-space-48) var(--bz-space-64); }
.bz-hero__grid { display: grid; gap: var(--bz-space-40); align-items: center; }
.bz-hero__copy { display: grid; gap: var(--bz-space-20); justify-items: start; }
.bz-hero h1 { font-size: clamp(34px, 6.2vw, 56px); line-height: 1.2; font-weight: 800; letter-spacing: -1px; }
.bz-hero__lead { max-width: 46ch; }
.bz-hero__cta { display: flex; flex-wrap: wrap; gap: var(--bz-space-12); }
.bz-hero__cta .bz-btn { flex: 1 1 auto; }

.bz-proof { display: grid; gap: var(--bz-space-12); width: 100%; padding-top: var(--bz-space-8); }
.bz-proof__row { display: flex; align-items: center; gap: var(--bz-space-12); }
.bz-avatars { display: flex; }
.bz-avatars span {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: var(--bz-radius-full);
  background: var(--bz-green-700); color: var(--bz-base-white);
  font-size: 11px; font-weight: 700;
  box-shadow: 0 0 0 2px var(--bz-bg-canvas);
}
.bz-avatars span + span { margin-left: -8px; }
.bz-meter { height: 10px; border-radius: var(--bz-radius-full); background: var(--bz-bg-brand-subtle); overflow: hidden; max-width: 420px; }
.bz-meter > i { display: block; height: 100%; border-radius: inherit; background: var(--bz-bg-accent); }

.bz-hero__art { position: relative; }
.bz-hero__art svg { border-radius: var(--bz-radius-lg); }
.bz-float {
  display: flex; align-items: center; gap: var(--bz-space-12);
  padding: var(--bz-space-16) var(--bz-space-20);
  border-radius: var(--bz-radius-lg);
  background: var(--bz-bg-surface);
  border: var(--bz-border-width-hairline) solid var(--bz-border-subtle);
  box-shadow: var(--bz-shadow-md);
}
.bz-float__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--bz-bg-accent); flex: none; }
.bz-float strong { display: block; font-size: var(--bz-text-label-base-size); }
.bz-float span { display: block; font-size: var(--bz-text-body-small-size); color: var(--bz-text-muted); }

/* --------------------------------------------------------------------------
   Bằng chứng xã hội
   -------------------------------------------------------------------------- */

.bz-logos {
  display: flex; gap: var(--bz-space-32); align-items: center;
  overflow-x: auto; scrollbar-width: none; padding-block: var(--bz-space-24);
}
.bz-logos::-webkit-scrollbar { display: none; }
.bz-logos li {
  flex: none; font-size: var(--bz-text-label-base-size); font-weight: 600;
  letter-spacing: 1.4px; color: var(--bz-text-disabled); white-space: nowrap;
  transition: color .16s ease-out;
}
.bz-logos li:hover { color: var(--bz-text-brand); }
.bz-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: var(--bz-border-width-hairline) solid var(--bz-border-subtle);
  padding-top: var(--bz-space-24);
}
.bz-metrics li { text-align: center; }
.bz-metrics li + li { border-left: var(--bz-border-width-hairline) solid var(--bz-border-subtle); }
.bz-metrics b {
  display: block; font-size: var(--bz-text-heading-2-size); line-height: 1.2;
  font-weight: 800; color: var(--bz-text-brand); font-variant-numeric: tabular-nums;
}
.bz-metrics span { display: block; font-size: var(--bz-text-body-small-size); color: var(--bz-text-secondary); }

/* --------------------------------------------------------------------------
   Thẻ hub
   -------------------------------------------------------------------------- */

.bz-grid { display: grid; gap: var(--bz-space-16); margin-top: var(--bz-space-32); }
.bz-grid--4 { grid-template-columns: 1fr; }

.bz-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: var(--bz-space-24);
  border-radius: var(--bz-radius-lg);
  background: var(--bz-bg-surface);
  border: var(--bz-border-width-hairline) solid var(--bz-border-subtle);
  box-shadow: var(--bz-shadow-xs);
  transition: transform .16s ease-out, box-shadow .16s ease-out;
}
a.bz-card:hover { transform: translateY(-2px); box-shadow: var(--bz-shadow-md); }
.bz-card__icon {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: var(--bz-radius-md);
  background: var(--bz-bg-brand-subtle); color: var(--bz-text-accent);
}
.bz-card__eyebrow {
  font-size: var(--bz-text-overline-size); font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--bz-text-accent);
}
.bz-card p { font-size: var(--bz-text-body-small-size); color: var(--bz-text-secondary); flex: 1; }
.bz-card .bz-arrow-link { margin-top: 6px; }

/* --------------------------------------------------------------------------
   Tabs — cách vận hành
   -------------------------------------------------------------------------- */

.bz-tabs { display: flex; gap: var(--bz-space-8); justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-top: var(--bz-space-24); }
.bz-tabs::-webkit-scrollbar { display: none; }
.bz-tab {
  flex: none; padding: 10px var(--bz-space-16);
  font-size: var(--bz-text-label-base-size); font-weight: 600; color: var(--bz-text-secondary);
  border-bottom: var(--bz-border-width-thick) solid transparent;
}
.bz-tab[aria-selected="true"] { color: var(--bz-text-accent); border-bottom-color: var(--bz-bg-accent); }

.bz-panel {
  display: grid; gap: var(--bz-space-24); align-items: center;
  margin-top: var(--bz-space-24); padding: var(--bz-space-20);
  border-radius: var(--bz-radius-lg);
  background: var(--bz-bg-surface);
  border: var(--bz-border-width-hairline) solid var(--bz-border-subtle);
  box-shadow: var(--bz-shadow-xs);
}
.bz-panel[hidden] { display: none; }
.bz-panel__copy { display: grid; gap: var(--bz-space-16); }
.bz-checklist { display: grid; gap: var(--bz-space-12); }
.bz-checklist li { display: flex; gap: var(--bz-space-12); align-items: flex-start; font-size: var(--bz-text-body-small-size); color: var(--bz-text-secondary); }
.bz-checklist svg { flex: none; margin-top: 2px; }

/* --------------------------------------------------------------------------
   Sàn giao dịch
   -------------------------------------------------------------------------- */

.bz-deal { display: grid; gap: var(--bz-space-12); position: relative; }
.bz-deal__meta { display: flex; gap: var(--bz-space-12); font-size: var(--bz-text-label-small-size); color: var(--bz-text-muted); }
.bz-deal__value { font-size: var(--bz-text-heading-3-size); font-weight: 800; color: var(--bz-text-brand); }
.bz-deal--locked { background: var(--bz-bg-surface-sunken); }
.bz-deal--locked .bz-deal__title { color: var(--bz-text-muted); }
.bz-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--bz-radius-full);
  font-size: var(--bz-text-label-small-size); font-weight: 600;
}
.bz-badge--accent { background: var(--bz-bg-accent-subtle); color: var(--bz-text-accent); }
.bz-badge--neutral { background: var(--bz-bg-surface-sunken); color: var(--bz-text-secondary); }
.bz-badge--dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* --------------------------------------------------------------------------
   Bảng phí
   -------------------------------------------------------------------------- */

.bz-tiers { display: grid; gap: var(--bz-space-16); margin-top: var(--bz-space-32); align-items: center; }
.bz-tier {
  display: grid; gap: var(--bz-space-12);
  padding: var(--bz-space-24);
  border-radius: var(--bz-radius-lg);
  background: var(--bz-bg-surface);
  border: var(--bz-border-width-hairline) solid var(--bz-border-subtle);
  box-shadow: var(--bz-shadow-xs);
  text-align: center;
}
.bz-tier--featured {
  border: var(--bz-border-width-thick) solid var(--bz-border-accent);
  box-shadow: var(--bz-shadow-md);
}
.bz-tier__price { font-size: var(--bz-text-heading-1-size); font-weight: 800; letter-spacing: -.5px; }
.bz-tier__period { font-size: var(--bz-text-body-small-size); color: var(--bz-text-muted); }
.bz-tier ul { display: grid; gap: 10px; text-align: left; margin-top: var(--bz-space-8); }
.bz-tier li { display: flex; gap: 10px; align-items: flex-start; font-size: var(--bz-text-body-small-size); }
.bz-tier li svg { flex: none; margin-top: 3px; }
.bz-tier li.is-off { color: var(--bz-text-muted); }

/* --------------------------------------------------------------------------
   Cộng đồng + FAQ + CTA
   -------------------------------------------------------------------------- */

.bz-split { display: grid; gap: var(--bz-space-32); align-items: center; }
.bz-split__copy { display: grid; gap: var(--bz-space-16); justify-items: start; }

.bz-faq { display: grid; gap: var(--bz-space-12); max-width: 880px; margin: var(--bz-space-32) auto 0; }
.bz-faq details {
  padding: var(--bz-space-20) var(--bz-space-24);
  border-radius: var(--bz-radius-md);
  background: var(--bz-bg-surface);
  border: var(--bz-border-width-hairline) solid var(--bz-border-subtle);
}
.bz-faq details[open] { border-color: var(--bz-border-accent); }
.bz-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bz-space-16);
  font-size: var(--bz-text-heading-4-size); font-weight: 600; cursor: pointer; list-style: none;
}
.bz-faq summary::-webkit-details-marker { display: none; }
.bz-faq details[open] summary { color: var(--bz-text-accent); }
.bz-faq details[open] summary svg { transform: rotate(180deg); }
.bz-faq summary svg { flex: none; color: var(--bz-text-muted); transition: transform .16s ease-out; }
.bz-faq details[open] summary svg { color: var(--bz-text-accent); }
.bz-faq p { margin-top: var(--bz-space-12); color: var(--bz-text-secondary); }

.bz-cta { text-align: center; display: grid; gap: var(--bz-space-16); justify-items: center; }
.bz-cta__row { display: flex; flex-wrap: wrap; gap: var(--bz-space-12); justify-content: center; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.bz-footer { background: var(--bz-bg-inverse-deep); color: var(--bz-text-on-inverse); padding-block: var(--bz-space-48) var(--bz-space-24); }
.bz-footer__grid { display: grid; gap: var(--bz-space-32); }
.bz-footer h3 {
  font-size: var(--bz-text-overline-size); font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--bz-text-accent-on-inverse); margin-bottom: var(--bz-space-12);
}
.bz-footer li + li { margin-top: var(--bz-space-8); }
.bz-footer a { font-size: var(--bz-text-body-small-size); color: var(--bz-text-on-inverse-muted); }
.bz-footer a:hover { color: var(--bz-text-on-inverse); }
.bz-footer__about p { font-size: var(--bz-text-body-small-size); color: var(--bz-text-on-inverse-muted); margin-top: var(--bz-space-12); }
.bz-footer__brand .bz-brand__name { color: var(--bz-text-on-inverse); }
.bz-footer__brand .bz-brand__tag { color: var(--bz-text-on-inverse-muted); }
.bz-news { display: grid; gap: var(--bz-space-12); }
.bz-news label { font-size: var(--bz-text-label-base-size); font-weight: 600; }
.bz-news input {
  width: 100%; min-height: var(--bz-control-height-md);
  padding: 0 var(--bz-space-16); border-radius: var(--bz-radius-md);
  border: var(--bz-border-width-hairline) solid var(--bz-border-inverse);
  background: var(--bz-bg-surface); color: var(--bz-text-primary);
  font: inherit; font-size: var(--bz-text-body-base-size);
}
.bz-news small { font-size: var(--bz-text-body-small-size); color: var(--bz-text-on-inverse-muted); }
.bz-footer__legal {
  display: flex; flex-wrap: wrap; gap: var(--bz-space-16); justify-content: space-between;
  margin-top: var(--bz-space-32); padding-top: var(--bz-space-24);
  border-top: var(--bz-border-width-hairline) solid var(--bz-border-inverse);
  font-size: var(--bz-text-body-small-size); color: var(--bz-text-on-inverse-muted);
}

/* --------------------------------------------------------------------------
   Điểm ngắt
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .bz-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .bz-tiers { grid-template-columns: repeat(2, 1fr); }
  .bz-hero__cta .bz-btn { flex: 0 0 auto; }
}

@media (min-width: 1024px) {
  .bz-container {
    padding-inline: var(--bz-space-80);
    max-width: calc(var(--bz-container-max) + 2 * var(--bz-space-80));
  }
  .bz-section { padding-block: var(--bz-space-96); }
  .bz-header__inner { height: 72px; }
  .bz-header.is-stuck .bz-header__inner { height: 60px; }
  .bz-nav { display: block; }
  .bz-header__login { display: inline-flex; }
  .bz-header__burger { display: none; }
  .bz-hero { padding-block: var(--bz-space-80) var(--bz-space-96); }
  /* 60/40 với máng 40 cho ra cột chữ 744px — đúng bề rộng board Figma,
     đủ để tiêu đề 56px giữ hai dòng thay vì vỡ thành bốn. */
  .bz-hero__grid { grid-template-columns: 60fr 40fr; gap: var(--bz-space-40); }
  .bz-hero__art .bz-float { position: absolute; left: -40px; bottom: 24px; }
  .bz-grid--4 { grid-template-columns: repeat(4, 1fr); gap: var(--bz-space-24); }
  .bz-grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--bz-space-24); }
  .bz-tiers { grid-template-columns: repeat(3, 1fr); gap: var(--bz-space-24); }
  .bz-tier--featured { transform: translateY(-12px); }
  .bz-panel { grid-template-columns: 520px 1fr; gap: var(--bz-space-40); padding: var(--bz-space-32); }
  .bz-split { grid-template-columns: 1fr 1fr; gap: var(--bz-space-64); }
  .bz-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr; }
  .bz-h1 { font-size: var(--bz-text-heading-1-size); line-height: var(--bz-text-heading-1-lh); }
  .bz-lead { font-size: var(--bz-text-body-large-size); line-height: var(--bz-text-body-large-lh); }
  .bz-logos { justify-content: space-between; overflow: visible; }
}

@media (max-width: 1023px) {
  .bz-mega { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bz-drawer__panel, .bz-mega, .bz-card, .bz-btn { transition: none; }
}

/* --------------------------------------------------------------------------
   Chống rò từ CSS của plugin
   BuddyPress, Elementor và Tribe Events vẫn nạp trên trang này và có nhiều
   luật nhắm thẳng vào thẻ button/a. Khối dưới khoá lại những chỗ đã thấy vỡ.
   -------------------------------------------------------------------------- */

body.bizca-2026 .bz-skip {
  position: absolute !important;
  top: -60px !important;
  left: 16px !important;
  width: auto !important;
  z-index: 100;
}
body.bizca-2026 .bz-skip:focus { top: 16px !important; }

/* Plugin đang tô nền đỏ cho mọi <button> kèm !important, nên chỗ này buộc phải
   dùng !important để giành lại. Chỉ nhắm đúng ba class của thiết kế mới. */
body.bizca-2026 .bz-nav__btn,
body.bizca-2026 .bz-tab,
body.bizca-2026 .bz-iconbtn {
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  border-radius: var(--bz-radius-md);
}
/* Plugin còn ép cả color cho <button> — nút mega menu thành chữ trắng trên nền
   trắng nên biến mất. Phải ép lại cả màu chữ và màu gạch chân của tab. */
body.bizca-2026 .bz-nav__btn { color: var(--bz-text-primary) !important; border: 0 !important; }
body.bizca-2026 .bz-nav__btn:hover { background-color: var(--bz-bg-surface-sunken) !important; }
body.bizca-2026 .bz-nav__btn[aria-expanded="true"] { background-color: var(--bz-bg-brand-subtle) !important; color: var(--bz-text-accent) !important; }
body.bizca-2026 .bz-iconbtn { color: var(--bz-text-primary) !important; }
body.bizca-2026 .bz-tab {
  color: var(--bz-text-secondary) !important;
  border: 0 !important;
  border-bottom: var(--bz-border-width-thick) solid transparent !important;
}
body.bizca-2026 .bz-tab[aria-selected="true"] {
  color: var(--bz-text-accent) !important;
  border-bottom-color: var(--bz-bg-accent) !important;
}
body.bizca-2026 .bz-iconbtn { border: var(--bz-border-width-hairline) solid var(--bz-border-default) !important; }
body.bizca-2026 .bz-iconbtn:hover { background-color: var(--bz-bg-surface-sunken) !important; }
body.bizca-2026 .bz-tab { border-radius: 0; }

body.bizca-2026 .bz-btn { text-transform: none !important; letter-spacing: normal !important; box-shadow: none !important; }
body.bizca-2026 .bz-btn--primary { background-color: var(--bz-action-primary-bg) !important; color: var(--bz-action-primary-text) !important; }
body.bizca-2026 .bz-btn--primary:hover { background-color: var(--bz-action-primary-bg-hover) !important; }
body.bizca-2026 .bz-btn--secondary { background-color: var(--bz-action-secondary-bg) !important; color: var(--bz-action-secondary-text) !important; }
body.bizca-2026 .bz-btn--outline { background-color: var(--bz-bg-surface) !important; color: var(--bz-action-outline-border) !important; }
body.bizca-2026 .bz-btn--outline-inverse { background-color: transparent !important; color: var(--bz-text-on-inverse) !important; }

/* padding-inline thôi — dùng padding tắt sẽ xoá luôn padding-block của
   .bz-logos và .bz-metrics, làm dải logo dính vào dòng nhãn phía trên. */
body.bizca-2026 ul { list-style: none !important; margin: 0; padding-inline: 0; }
body.bizca-2026 summary { list-style: none; }
body.bizca-2026 main { padding: 0; margin: 0; max-width: none; }

/* --------------------------------------------------------------------------
   Dấu hiệu bấm được ở header
   Chữ đã đạt 15,9:1 nhưng ba nút xổ trông y hệt chữ thường và nút tìm kiếm
   viền quá nhạt, nên cả cụm đọc như chữ chết. Thêm tín hiệu tương tác:
   mũi tên xổ màu nhấn, nút tìm kiếm có nền và viền rõ.
   -------------------------------------------------------------------------- */

body.bizca-2026 .bz-nav__btn svg {
  color: var(--bz-text-accent) !important;
  stroke-width: 2.2;
}
body.bizca-2026 .bz-nav__btn:hover svg { color: var(--bz-text-brand) !important; }

body.bizca-2026 .bz-iconbtn {
  background-color: var(--bz-bg-surface-sunken) !important;
  border: var(--bz-border-width-hairline) solid var(--bz-border-strong) !important;
}
body.bizca-2026 .bz-iconbtn:hover {
  background-color: var(--bz-bg-brand-subtle) !important;
  border-color: var(--bz-border-accent) !important;
}
body.bizca-2026 .bz-iconbtn svg { stroke-width: 2; }

/* Đăng nhập là hành động phụ nhưng vẫn phải nhìn ra là bấm được */
body.bizca-2026 .bz-header__login {
  padding: 10px var(--bz-space-12);
  border-radius: var(--bz-radius-md);
  color: var(--bz-text-brand) !important;
}
body.bizca-2026 .bz-header__login:hover { background-color: var(--bz-bg-surface-sunken); }

/* ==========================================================================
   Trang bên trong (template-bizca-2026-inner.php)
   Nội dung do biên tập viên/Elementor sinh ra nên không kiểm soát được markup.
   Khối .bz-prose chỉ canh lại nhịp đọc: line-height 1.75 cho tiếng Việt,
   bề rộng giới hạn, và các thành phần hay gặp (bảng, danh sách, ảnh).
   ========================================================================== */

.bz-pagehead {
  padding-block: var(--bz-space-40) var(--bz-space-32);
  background: var(--bz-bg-surface-sunken);
  border-bottom: var(--bz-border-width-hairline) solid var(--bz-border-subtle);
}
.bz-pagehead h1 { margin-top: var(--bz-space-12); color: var(--bz-text-primary); }
.bz-pagehead .bz-lead { margin-top: var(--bz-space-12); max-width: 68ch; }

.bz-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--bz-space-8);
  font-size: var(--bz-text-body-small-size); color: var(--bz-text-muted);
}
.bz-crumbs a { color: var(--bz-text-muted); }
.bz-crumbs a:hover { color: var(--bz-text-accent); text-decoration: underline; }
.bz-crumbs [aria-current] { color: var(--bz-text-primary); font-weight: 600; }

.bz-prose {
  padding-block: var(--bz-space-48) var(--bz-space-80);
  font-size: var(--bz-text-body-base-size);
  line-height: var(--bz-text-body-base-lh);
  color: var(--bz-text-secondary);
}
/* Giới hạn 68ch chỉ áp cho khối chữ thuần. Nội dung của site bọc trong
   <section>/<div> có container riêng bên trong — bó chúng lại là lưới thẻ vỡ. */
.bz-prose > * { max-width: 68ch; }
.bz-prose > section, .bz-prose > div, .bz-prose > .alignwide, .bz-prose > .alignfull,
.bz-prose > table, .bz-prose > figure, .bz-prose > .bz-full { max-width: none; }

.bz-prose h2 {
  margin: var(--bz-space-40) 0 var(--bz-space-12);
  font-size: var(--bz-text-heading-2-size); line-height: var(--bz-text-heading-2-lh);
  font-weight: 800; letter-spacing: -.3px; color: var(--bz-text-primary);
}
.bz-prose h3 {
  margin: var(--bz-space-32) 0 var(--bz-space-8);
  font-size: var(--bz-text-heading-3-size); line-height: var(--bz-text-heading-3-lh);
  font-weight: 700; color: var(--bz-text-primary);
}
.bz-prose h4 {
  margin: var(--bz-space-24) 0 var(--bz-space-8);
  font-size: var(--bz-text-heading-4-size); font-weight: 600; color: var(--bz-text-primary);
}
.bz-prose p { margin-bottom: var(--bz-space-16); text-wrap: pretty; }
.bz-prose a { color: var(--bz-text-accent); text-decoration: underline; text-underline-offset: 2px; }
.bz-prose a:hover { color: var(--bz-text-brand); }
.bz-prose strong { color: var(--bz-text-primary); font-weight: 600; }

.bz-prose ul, .bz-prose ol { margin: 0 0 var(--bz-space-16); padding-left: var(--bz-space-24); }
.bz-prose ul { list-style: disc; }
.bz-prose ol { list-style: decimal; }
.bz-prose li { margin-bottom: var(--bz-space-8); }
.bz-prose li::marker { color: var(--bz-text-accent); }

.bz-prose img { border-radius: var(--bz-radius-lg); }
.bz-prose blockquote {
  margin: var(--bz-space-24) 0; padding: var(--bz-space-16) var(--bz-space-24);
  border-left: var(--bz-border-width-accent) solid var(--bz-border-accent);
  background: var(--bz-bg-brand-subtle); border-radius: 0 var(--bz-radius-md) var(--bz-radius-md) 0;
}

/* Bảng trong nội dung: cuộn ngang trong khung riêng, trang không bao giờ tràn */
.bz-prose table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  margin: var(--bz-space-24) 0; display: block; overflow-x: auto;
  border: var(--bz-border-width-hairline) solid var(--bz-border-subtle);
  border-radius: var(--bz-radius-lg); background: var(--bz-bg-surface);
}
.bz-prose th {
  background: var(--bz-bg-surface-sunken);
  font-size: var(--bz-text-label-small-size); font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; color: var(--bz-text-muted);
  text-align: left; padding: var(--bz-space-12) var(--bz-space-16);
  border-bottom: var(--bz-border-width-hairline) solid var(--bz-border-subtle);
}
.bz-prose td {
  padding: var(--bz-space-12) var(--bz-space-16);
  border-bottom: var(--bz-border-width-hairline) solid var(--bz-border-subtle);
  font-size: var(--bz-text-body-small-size); color: var(--bz-text-primary);
}
.bz-prose tr:last-child td { border-bottom: 0; }

/* Form của plugin thành viên (đăng nhập, đăng ký, hồ sơ) */
.bz-2026-inner .swpm-login-form-inner,
.bz-prose form { max-width: 480px; }
.bz-prose input[type="text"], .bz-prose input[type="email"],
.bz-prose input[type="password"], .bz-prose input[type="tel"],
.bz-prose select, .bz-prose textarea {
  width: 100%; min-height: var(--bz-control-height-md);
  padding: 0 var(--bz-space-16); margin-bottom: var(--bz-space-12);
  border-radius: var(--bz-radius-md);
  border: var(--bz-border-width-hairline) solid var(--bz-border-strong);
  background: var(--bz-bg-surface); font: inherit;
  font-size: var(--bz-text-body-base-size); color: var(--bz-text-primary);
}
.bz-prose textarea { padding: var(--bz-space-12) var(--bz-space-16); min-height: 120px; }
.bz-prose input:focus, .bz-prose select:focus, .bz-prose textarea:focus {
  border-color: var(--bz-border-accent);
  outline: 2px solid var(--bz-border-focus); outline-offset: 1px;
}
.bz-prose input[type="submit"], .bz-prose button[type="submit"] {
  width: auto; min-height: var(--bz-control-height-md);
  padding: 0 var(--bz-space-24); border: 0; border-radius: var(--bz-radius-md);
  background: var(--bz-green-700); color: var(--bz-base-white);
  font-weight: 600; font-size: var(--bz-text-label-base-size); cursor: pointer;
}
.bz-prose input[type="submit"]:hover, .bz-prose button[type="submit"]:hover {
  background: var(--bz-green-800);
}

@media (min-width: 1024px) {
  .bz-pagehead { padding-block: var(--bz-space-64) var(--bz-space-48); }
  .bz-prose { padding-block: var(--bz-space-64) var(--bz-space-96); }
}

/* --------------------------------------------------------------------------
   Form của Simple WP Membership
   Plugin dựng form bằng <table>, nhãn nằm cùng dòng với ô nhập nên đè lên
   viền. Ép về layout khối, nhãn nằm trên ô đúng quy ước blueprint §3.4.
   -------------------------------------------------------------------------- */

.bizca-2026-inner .swpm-login-form-inner,
.bizca-2026-inner .swpm-login-form-inner tbody,
.bizca-2026-inner .swpm-login-form-inner tr,
.bizca-2026-inner .swpm-login-form-inner td,
.bizca-2026-inner form[class*="swpm"] table,
.bizca-2026-inner form[class*="swpm"] tbody,
.bizca-2026-inner form[class*="swpm"] tr,
.bizca-2026-inner form[class*="swpm"] td {
  display: block;
  width: 100%;
  border: 0 !important;
  padding: 0;
  background: none;
}

.bizca-2026-inner .swpm-login-form-inner { max-width: 420px; }

.bizca-2026-inner [class*="swpm"] label,
.bizca-2026-inner .swpm-username-label,
.bizca-2026-inner .swpm-password-label {
  display: block;
  margin: var(--bz-space-16) 0 6px;
  font-size: var(--bz-text-label-base-size);
  font-weight: 600;
  color: var(--bz-text-primary);
}

.bizca-2026-inner [class*="swpm"] input[type="text"],
.bizca-2026-inner [class*="swpm"] input[type="email"],
.bizca-2026-inner [class*="swpm"] input[type="password"] {
  width: 100%;
  min-height: var(--bz-control-height-md);
  padding: 0 var(--bz-space-16);
  margin: 0;
  border: var(--bz-border-width-hairline) solid var(--bz-border-strong) !important;
  border-radius: var(--bz-radius-md);
  background: var(--bz-bg-surface);
  font-size: var(--bz-text-body-base-size);
}

.bizca-2026-inner [class*="swpm"] input[type="checkbox"] {
  width: 18px; height: 18px; margin-right: var(--bz-space-8);
  vertical-align: middle; accent-color: var(--bz-green-700);
}

.bizca-2026-inner input[type="submit"][class*="swpm"],
.bizca-2026-inner .swpm-login-submit,
.bizca-2026-inner form[class*="swpm"] input[type="submit"] {
  width: 100%;
  min-height: var(--bz-control-height-lg);
  margin-top: var(--bz-space-20);
  padding: 0 var(--bz-space-24);
  border: 0;
  border-radius: var(--bz-radius-md) !important;
  background: var(--bz-green-700) !important;
  color: var(--bz-base-white) !important;
  font-weight: 600;
  font-size: var(--bz-text-label-large-size);
  cursor: pointer;
}
.bizca-2026-inner input[type="submit"][class*="swpm"]:hover,
.bizca-2026-inner form[class*="swpm"] input[type="submit"]:hover {
  background: var(--bz-green-800) !important;
}

.bizca-2026-inner .swpm-forgot-pass-link,
.bizca-2026-inner .swpm-join-us-link {
  display: inline-block;
  margin-top: var(--bz-space-12);
  margin-right: var(--bz-space-20);
  font-size: var(--bz-text-body-small-size);
  color: var(--bz-text-accent);
}

/* Ô "ghi nhớ đăng nhập": nhãn phải nằm cạnh checkbox, không xuống dòng */
.bizca-2026-inner [class*="swpm"] input[type="checkbox"] + label,
.bizca-2026-inner [class*="swpm"] label:has(input[type="checkbox"]) {
  display: inline-block;
  margin: 0 0 0 var(--bz-space-8);
  font-weight: 400;
  color: var(--bz-text-secondary);
}
.bizca-2026-inner [class*="swpm"] input[type="checkbox"] { margin-top: var(--bz-space-16); }
.bizca-2026-inner input[type="submit"][class*="swpm"],
.bizca-2026-inner form[class*="swpm"] input[type="submit"] { text-align: center; }

/* ==========================================================================
   Trang Hub (template-bizca-2026-hub.php) — blueprint §2.3
   ========================================================================== */

.bz-hubhero {
  background: var(--bz-bg-inverse);
  color: var(--bz-text-on-inverse);
  padding-block: var(--bz-space-32) var(--bz-space-48);
}
.bz-hubhero__grid { display: grid; gap: var(--bz-space-32); align-items: center; margin-top: var(--bz-space-20); }
.bz-hubhero__copy { display: grid; gap: var(--bz-space-16); justify-items: start; }
.bz-hubhero h1 { color: var(--bz-text-on-inverse); }
.bz-hubhero .bz-lead { color: var(--bz-text-on-inverse-muted); max-width: 60ch; }
.bz-hubhero__cta { display: flex; flex-wrap: wrap; gap: var(--bz-space-12); }
.bz-hubhero__art svg { border-radius: var(--bz-radius-lg); }

.bz-crumbs--inverse { color: var(--bz-text-on-inverse-muted); }
.bz-crumbs--inverse a { color: var(--bz-text-on-inverse-muted); }
.bz-crumbs--inverse a:hover { color: var(--bz-text-accent-on-inverse); }
.bz-crumbs--inverse [aria-current] { color: var(--bz-text-on-inverse); }

/* Thanh chip: mobile là mục lục dính; desktop ẩn đi vì đã có sidebar */
.bz-chipbar {
  position: sticky; top: 60px; z-index: 40;
  background: var(--bz-bg-surface);
  border-bottom: var(--bz-border-width-hairline) solid var(--bz-border-subtle);
}
.bz-chipbar__row {
  display: flex; gap: var(--bz-space-8);
  overflow-x: auto; scrollbar-width: none;
  padding-block: var(--bz-space-12);
}
.bz-chipbar__row::-webkit-scrollbar { display: none; }
.bz-chip {
  flex: none; padding: 8px var(--bz-space-16);
  border-radius: var(--bz-radius-full);
  background: var(--bz-bg-surface-sunken);
  color: var(--bz-text-secondary);
  font-size: var(--bz-text-label-small-size); font-weight: 600;
  white-space: nowrap;
}
.bz-chip.is-current { background: var(--bz-bg-brand-subtle); color: var(--bz-text-brand); }

.bz-hublayout { display: grid; gap: var(--bz-space-32); }
.bz-hubmain { padding-block: var(--bz-space-40) var(--bz-space-64); }
.bz-hubmain > * { max-width: 68ch; }
.bz-hubmain > table, .bz-hubmain > figure, .bz-hubmain > .alignwide, .bz-hubmain > .alignfull { max-width: none; }

.bz-hubside { display: none; }
.bz-hubside__sticky { position: sticky; top: 96px; display: grid; gap: var(--bz-space-20); }
.bz-hubside__title {
  font-size: var(--bz-text-overline-size); font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--bz-text-muted);
}
.bz-toc { display: grid; gap: 2px; }
.bz-toc__item {
  display: flex; align-items: center; gap: var(--bz-space-12);
  padding: 10px var(--bz-space-12);
  border-radius: var(--bz-radius-md);
  font-size: var(--bz-text-label-base-size); font-weight: 600;
  color: var(--bz-text-secondary);
  border-left: var(--bz-border-width-accent) solid var(--bz-border-subtle);
}
.bz-toc__item:hover { background: var(--bz-bg-surface-hover); color: var(--bz-text-primary); }
.bz-toc__item.is-current {
  background: var(--bz-bg-brand-subtle);
  color: var(--bz-text-brand);
  border-left-color: var(--bz-bg-accent);
}
.bz-hubside__cta {
  display: grid; gap: var(--bz-space-12);
  padding: var(--bz-space-20);
  border-radius: var(--bz-radius-lg);
  background: var(--bz-bg-inverse); color: var(--bz-text-on-inverse);
}
.bz-hubside__cta p { font-size: var(--bz-text-body-small-size); color: var(--bz-text-on-inverse-muted); }

/* Neo cuộn không bị header dính che mất tiêu đề */
.bz-hubmain h2 { scroll-margin-top: 120px; }

@media (min-width: 1024px) {
  .bz-hubhero { padding-block: var(--bz-space-40) var(--bz-space-64); }
  .bz-hubhero__grid { grid-template-columns: 1fr 420px; gap: var(--bz-space-48); }
  .bz-chipbar { display: none; }
  .bz-hublayout { grid-template-columns: 280px 1fr; gap: var(--bz-space-64); align-items: start; }
  .bz-hubside { display: block; padding-top: var(--bz-space-40); }
  .bz-hubmain { padding-block: var(--bz-space-40) var(--bz-space-96); }
}