/* Hero tràn ngang thử nghiệm 13/10/2026 (anh Lộc: layout giống trang chủ BioGaia US). Bản 1 ảnh tĩnh, bản 2 clip.
   Chữ đặt góc dưới trái trên lớp phủ tối để mặt người ở phần trên khung không bị che. */
.hb { position: relative; display: flex; align-items: flex-end; min-height: clamp(480px, 72vh, 660px); overflow: hidden; background: #2b3a36; color: #fff; }
.hb-media, .hb-media img, .hb-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hb-media img { object-position: 60% 35%; }
.hb-media video { opacity: 0; transition: opacity .6s ease; }
.hb-media video.on { opacity: 1; }
.hb::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(12, 28, 24, .72) 0%, rgba(12, 28, 24, .45) 38%, rgba(12, 28, 24, 0) 62%),
              linear-gradient(0deg, rgba(12, 28, 24, .55) 0%, rgba(12, 28, 24, 0) 45%); }
.hb-txt { position: relative; z-index: 1; width: 100%; padding-block: var(--g-xl, 64px) var(--g-l); }
.hb-box { max-width: 620px; }
.hb .crumbs, .hb .crumbs a, .hb .crumbs span, .hb .byline, .hb .byline a { color: rgba(255, 255, 255, .9); }
.hb h1 { color: #fff; margin: 12px 0 var(--g-s); max-width: 18ch; }
.hb .sub { margin: 0 0 var(--g-s); font-size: var(--t-lead); line-height: 1.45; color: #fff; max-width: 40ch; }
.hb .byline { margin: 0; font-size: var(--t-small); }
.hb-pause { position: absolute; z-index: 2; right: var(--gutter); bottom: var(--g-m); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7);
  background: rgba(12, 28, 24, .35); color: #fff; display: grid; place-items: center; cursor: pointer; }
.hb-pause[hidden] { display: none; }
.hb-intro { padding-block: var(--g-l); }
.hb-intro .container { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--g-l); align-items: start; }
.hb-intro .lead { margin: 0; max-width: 60ch; }
.hb-intro .quick { margin: 0; }
@media (max-width: 767px) {
  .hb { min-height: min(86vh, 620px); }
  .hb::after { background: linear-gradient(0deg, rgba(12, 28, 24, .82) 0%, rgba(12, 28, 24, .5) 42%, rgba(12, 28, 24, 0) 70%); }
  .hb-media img { object-position: 70% 30%; }
  .hb-txt { padding-block: 0 var(--g-m); }
  .hb-pause { top: var(--g-s); bottom: auto; }
  .hb-intro .container { grid-template-columns: 1fr; gap: var(--g-m); }
}