/* BiPlus ALS: site-wide chrome (header, footer, buttons). Values from biplus-tokens.css only. */

.bp-wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-5); }

/* ---------- Buttons (one arrow per zone: only .bp-btn--primary gets →) ---------- */
.bp-btn, .wp-block-button .wp-block-button__link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-body); font-size: 15px; font-weight: 800; line-height: 1;
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-card);
  text-decoration: none; border: 1.5px solid transparent;
  transition: background-color .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, transform .1s;
}
.bp-btn:active, .wp-block-button__link:active { transform: translateY(1px); }
.bp-btn--primary, .wp-block-button.is-style-bp-primary .wp-block-button__link {
  background: var(--y); color: var(--ink);
}
.bp-btn--primary:hover, .wp-block-button.is-style-bp-primary .wp-block-button__link:hover {
  background: var(--y-deep); color: var(--ink);
}
.wp-block-button.is-style-bp-primary .wp-block-button__link::after { content: "→"; font-weight: 800; }
.wp-block-button.is-style-bp-dark .wp-block-button__link { background: var(--dark); color: var(--text-light); }
.wp-block-button.is-style-bp-dark .wp-block-button__link:hover { background: var(--ink); }
.wp-block-button.is-style-bp-ghost .wp-block-button__link {
  background: transparent; color: var(--ink); border-color: var(--line);
}
.wp-block-button.is-style-bp-ghost .wp-block-button__link:hover { border-color: var(--ink); }
/* Focus: two-tone ring, white 2px against the button then ink 2px outside it. On light surfaces the ink ring
   carries the contrast, on dark bands and dark buttons the white one does, so every style passes 3:1. Instant. */
:is(.bp-btn, .wp-block-button__link, .bp-form__submit, .bp-docs-search button, .bp-header__toggle):focus { outline: none; }
body :is(.bp-btn, .wp-block-button__link, .bp-form__submit, .bp-docs-search button, .bp-header__toggle):focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--surface); transition: none;
}
/* Astra greys out focused <button>s; gold buttons keep their own fill */
body :is(.bp-form__submit, .bp-docs-search button):is(:focus, :active) { background: var(--y); color: var(--ink); }
body :is(.bp-form__submit, .bp-docs-search button):hover { background: var(--y-deep); color: var(--ink); }
/* Dark bands (contact, footer): ink inner ring against the gold button, gold outer ring against the band */
body .bp-footer :is(.bp-btn, .wp-block-button__link, .bp-form__submit):focus-visible { outline-color: var(--y); box-shadow: 0 0 0 2px var(--ink); }
/* Links in page content (cards, breadcrumbs, text links): the header's 2px ink ring. Low specificity so section
   rules (inset rings on cards) still win; transition off because Astra's "a { transition: all }" animated the ring in. */
:where(#content) a:focus:not(:focus-visible) { outline: none; }
:where(#content) a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; transition: none; }

/* ---------- Header ---------- */
.bp-header {
  position: sticky; top: 0; z-index: 100; background: var(--surface);
  border-bottom: 1px solid transparent; transition: box-shadow .18s, border-color .18s;
}
.admin-bar .bp-header { top: 32px; }
.bp-header.is-scrolled { box-shadow: var(--shadow-body); border-bottom-color: var(--line-soft); }
.bp-header__bar { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: var(--sp-5); }
.bp-header__logo img { display: block; height: 44px; width: auto; }
.bp-header__nav { display: flex; align-items: center; gap: var(--sp-6); }
.bp-header__toggle { display: none; background: none; border: 0; padding: var(--sp-3); cursor: pointer; }
.bp-header__burger, .bp-header__burger::before, .bp-header__burger::after {
  display: block; width: 22px; height: 2px; background: var(--ink); position: relative; transition: transform .18s;
}
.bp-header__burger::before, .bp-header__burger::after { content: ""; position: absolute; left: 0; }
.bp-header__burger::before { top: -7px; }
.bp-header__burger::after { top: 7px; }
.bp-header.is-open .bp-header__burger { background: transparent; }
.bp-header.is-open .bp-header__burger::before { transform: translateY(7px) rotate(45deg); }
.bp-header.is-open .bp-header__burger::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
  .bp-header__toggle { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; } /* 44px hit area */
  .bp-header__nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5) var(--sp-6); background: var(--surface); box-shadow: var(--shadow-hero);
  }
  .bp-header.is-open .bp-header__nav { display: flex; }
  .bp-header__cta { justify-content: center; }
}
@media (max-width: 782px) { .admin-bar .bp-header { top: 46px; } }

/* ---------- Footer ---------- */
.bp-footer { background: var(--dark); color: #d1d5db; font-family: var(--font-body); font-size: 15px; line-height: 1.6; }
.bp-footer a { color: var(--text-light); text-decoration: none; }
.bp-footer a[href^="tel:"] { white-space: nowrap; }
.bp-footer a:hover { text-decoration: underline; text-decoration-color: var(--y); text-underline-offset: 3px; }
.bp-footer__grid {
  display: grid; grid-template-columns: 1.6fr 1.2fr 1fr 1fr; gap: var(--sp-7);
  padding-top: var(--sp-9); padding-bottom: var(--sp-7);
}
.bp-footer__logo { height: 44px; width: auto; margin-bottom: var(--sp-4); }
.bp-footer__brand p { margin: 0 0 var(--sp-5); max-width: 360px; }
.bp-footer__badges { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.bp-footer__badges img { height: 40px; width: auto; background: var(--surface); border-radius: var(--r-chip); padding: var(--sp-1) var(--sp-2); }
.bp-footer__title {
  font-family: var(--font-body); font-size: 16px; font-weight: 700; letter-spacing: 0;
  color: var(--fg-on-dark); margin: 0 0 var(--sp-4);
}
.bp-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.bp-footer__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  padding-top: var(--sp-5); padding-bottom: var(--sp-5); border-top: 1px solid var(--gray-mid); font-size: 13px;
}
.bp-footer__social { display: flex !important; gap: var(--sp-5) !important; }
@media (max-width: 960px) { .bp-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .bp-footer__grid { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* Astra leftovers we no longer use on pages that render our chrome */
.bp-header ~ #content .ast-breadcrumbs-wrapper { display: none; }

/* Back to top (Astra #ast-scroll-top): ink disc, light chevron, gold focus ring. Shown by Astra's script. */
#ast-scroll-top {
  width: 48px; height: 48px; line-height: 48px; right: 24px; bottom: 24px; padding: 0; border-radius: var(--r-pill);
  background: var(--ink) !important; color: var(--text-light); box-shadow: var(--shadow-hero), 0 0 0 1px rgba(255,255,255,.14);
  transition: background-color .15s, transform .15s;
}
#ast-scroll-top .ast-icon.icon-arrow svg { width: 16px; fill: currentColor; }
#ast-scroll-top:hover { background: var(--dark) !important; transform: translateY(-2px); }
#ast-scroll-top:focus { outline: none; }
#ast-scroll-top:focus-visible { outline: 3px solid var(--y); outline-offset: 3px; }
@media (max-width: 600px) { #ast-scroll-top { right: 16px; bottom: 16px; width: 44px; height: 44px; line-height: 44px; } }
@media (max-width: 1080px) { .biplus-article #ast-scroll-top { bottom: 88px; } } /* clear the "Đang đọc" bar */
@media (prefers-reduced-motion: reduce) { #ast-scroll-top { transition: none; } #ast-scroll-top:hover { transform: none; } }