/* =====================================================================================================
 * trang-phu.css — TRANG PHỤ "Tạp chí sống" (đợt 2 · làn lan ra 1, 26/09/2026): hồ sơ cô Ari (bài phỏng vấn dài), ứng dụng
 * (lưới công cụ), hộp xem ảnh, ô "sắp cập nhật", dải kêu gọi cuối trang, trang 404 "Trang này chưa in".
 * Cần ari-tokens.css + ari-chung.css nạp trước (không chép tay token nào ở đây). Flow Video: flow-video.css. Bản tin: ban-tin.css.
 * HTML: build-pages.py + trang_phu.py (trang .html), flow_page.py / ban_tin_page.py (trang .php).
 * ===================================================================================================== */

/* ---------- 1. Khung trang phụ ---------- */
.trang-phu main { display: block; padding-top: clamp(96px, 11vw, 132px); }
.muc { padding-block: clamp(64px, 9vw, 128px); }
.muc-dau { max-width: 62ch; }
.muc-dau .dan { margin-top: 16px; }
.dau-trang { padding-bottom: clamp(36px, 5vw, 64px); }
.dau-trang .td-lon { max-width: 16ch; }

/* chữ hiện dần khi cuộn tới — chỉ CSS (animation-timeline), không JS; giảm chuyển động / nút dừng thì đứng yên */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hien-dan { animation: hien-len linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .dung-het .hien-dan { animation: none; }
  }
}
@keyframes hien-len { from { opacity: 0; translate: 0 28px; } }

/* ô "sắp cập nhật" (khi admin chưa có dữ liệu) */
.cho-trong { padding: 28px 24px; border-radius: var(--r-lg); border: 1px dashed var(--c-line-strong); background: rgb(255 255 255 / .55); color: var(--c-text-2); }
.cho-trong b { display: block; margin-bottom: 4px; font: 650 1.05rem var(--f-hien); color: var(--c-text); }

/* ô ảnh bấm được (mở hộp xem ảnh) */
.o-anh { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-md); overflow: hidden; background: var(--c-bg-sunk); cursor: zoom-in; aspect-ratio: 4 / 3; }
.o-anh img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-flow); }
.o-anh:hover img { transform: scale(1.045); }
.o-anh-chu { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 5px 9px; border-radius: 10px; background: rgb(29 21 25 / .84); color: var(--c-text-invert); font: 500 .8125rem/1.35 var(--f-doc); text-align: left; }
.o-anh:focus-visible { outline-offset: 3px; }

/* ---------- 2. Dải kêu gọi cuối trang (kính đen) ---------- */
.ket-trang { padding-bottom: clamp(56px, 8vw, 104px); }
.ket-hop { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px 48px; align-items: end;
  padding: clamp(32px, 5vw, 64px); border-radius: var(--r-xl); background: var(--p-ink-900); color: var(--c-text-invert); box-shadow: var(--sh-ink); }
.ket-hop::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 100% 0%, rgb(242 132 181 / .28), transparent 60%); pointer-events: none; }
.ket-hop > * { position: relative; }
.ket-hop .td-vua { max-width: 18ch; }
.ket-hop .dan { color: var(--c-text-invert-2); }
.ket-hop .hang-nut { margin-top: 0; justify-content: flex-end; }
.ket-hop :focus-visible { outline-color: var(--p-pink-400); }
.ket-hop .folio { color: var(--c-text-accent-on-dark); margin-bottom: 18px; }
@media (max-width: 899px) { .ket-hop { grid-template-columns: 1fr; } .ket-hop .hang-nut { justify-content: flex-start; } }

/* ---------- 3. Hộp xem ảnh (tạo bằng trang-phu.js, dùng <dialog>) ---------- */
.xem-anh { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--c-text-invert); overflow: hidden; }
.xem-anh[open] { display: grid; place-items: center; }
.xem-anh::backdrop { background: rgb(18 12 15 / .9); }
.xa-hinh { margin: 0; display: grid; justify-items: center; gap: 12px; max-width: min(1200px, calc(100vw - 32px)); padding: 72px 16px 88px; }
.xa-hinh img { max-width: 100%; max-height: calc(100dvh - 190px); width: auto; height: auto; border-radius: var(--r-md); box-shadow: var(--sh-ink); background: var(--p-ink-700); }
.xa-hinh figcaption { font-size: .95rem; color: var(--c-text-invert-2); text-align: center; max-width: 60ch; }
.xa-hinh figcaption:empty { display: none; }
.xa-dong, .xa-truoc, .xa-sau { position: fixed; z-index: 2; background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .3); color: var(--c-text-invert); }
.xa-dong:hover, .xa-truoc:hover, .xa-sau:hover { background: var(--c-brand); color: var(--c-text-on-brand); }
.xa-dong { top: 16px; right: 16px; }
.xa-truoc, .xa-sau { top: 50%; translate: 0 -50%; }
.xa-truoc { left: 16px; } .xa-sau { right: 16px; }
.xa-dem { position: fixed; left: 50%; bottom: 24px; translate: -50% 0; font: 600 .9rem var(--f-hien); font-variant-numeric: tabular-nums; color: var(--c-text-invert-2); }
.xem-anh :focus-visible { outline-color: var(--p-pink-400); }
@media (max-width: 767px) { .xa-truoc, .xa-sau { top: auto; bottom: 12px; translate: none; } .xa-dem { bottom: 24px; } }
@media (prefers-reduced-motion: no-preference) { .xem-anh[open] .xa-hinh { animation: xa-vao var(--dur-base) var(--ease-out); } }
@keyframes xa-vao { from { opacity: 0; scale: .98; } }

/* =====================================================================================================
 * 4. HỒ SƠ CÔ ARI — "bài phỏng vấn dài"
 * ===================================================================================================== */
.hs-bia { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); align-items: end; }
.hs-chan-dung { grid-column: 1 / span 5; grid-row: 1; position: relative; aspect-ratio: 2 / 3; border-radius: var(--r-xl); overflow: hidden; background: var(--c-bg-sunk); box-shadow: var(--sh-3); }
.hs-chan-dung img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.hs-chan-dung figcaption { position: absolute; left: 14px; bottom: 14px; padding: 7px 12px; border-radius: 12px; background: rgb(29 21 25 / .84); color: var(--c-text-invert); font: 500 .875rem/1.35 var(--f-doc); }
.hs-bia-chu { grid-column: 6 / span 7; grid-row: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding-bottom: clamp(8px, 2vw, 32px); }
.hs-trong-so { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-left: auto; width: min(100%, 640px); border-top: 2px solid var(--c-text); }
.hs-trong-so a { display: grid; align-content: start; gap: 4px; min-height: 44px; padding: 14px 16px 6px 0; text-decoration: none; }
.hs-trong-so a + a { padding-left: 16px; border-left: 1px solid var(--c-line-strong); }
.hs-trong-so a > span { font: 800 2rem/1 var(--f-hien); font-stretch: 80%; font-variant-numeric: tabular-nums; color: var(--c-text-accent); }
.hs-trong-so b { font: 700 1.05rem/1.25 var(--f-hien); }
.hs-trong-so small { font-size: .875rem; line-height: 1.4; color: var(--c-text-2); }
.hs-trong-so a:hover b { color: var(--c-text-accent); }
.hs-ten { font: 800 clamp(4rem, 11.5vw, 11.5rem)/.86 var(--f-hien); font-stretch: 78%; letter-spacing: -.035em; margin-left: calc(-1 * clamp(40px, 7vw, 120px)); position: relative; z-index: 2; text-wrap: balance; }
.hs-ten span[data-noi]::after { content: "."; color: var(--c-text-accent); }
.hs-chuc { margin-top: 18px; font: 650 clamp(1.15rem, 1.6vw, 1.45rem)/1.3 var(--f-hien); color: var(--c-text-accent); }
.hs-sapo { margin-top: 18px; max-width: 52ch; font-size: var(--fs-lead); line-height: 1.6; color: var(--c-text); }

.hs-bai-luoi { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); align-items: start; }
.hs-bai-chu { grid-column: 2 / span 7; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.75; color: var(--p-ink-700); white-space: normal; }
.hs-bai-chu > p { white-space: pre-line; }
.hs-bai-chu > p + p { margin-top: 1.1em; }
.hs-bai-chu strong { color: var(--c-text); font-weight: 650; }
.hs-mo-dau::first-letter { float: left; margin: .08em .1em -.04em 0; font: 800 4.6em/.8 var(--f-hien); font-stretch: 80%; color: var(--c-text-accent); }
.hs-trich { margin: 1.4em 0; padding: .1em 0 .1em .9em; border-left: 3px solid var(--c-brand); }
.hs-trich p { font: 650 clamp(1.6rem, 3.1vw, 2.75rem)/1.14 var(--f-hien); font-stretch: 96%; letter-spacing: -.02em; color: var(--c-text); text-wrap: balance; }
.hs-le { grid-column: 10 / span 3; position: sticky; top: 100px; }
.hs-le-td { font: 650 .95rem var(--f-hien); color: var(--c-text-accent-sm); }
.hs-le .moc { list-style: none; margin-top: 14px; border-left: 2px solid var(--c-brand); padding-left: 18px; }
.hs-le .moc li { display: grid; gap: 2px; padding: 10px 0; }
.hs-le .moc b { font: 700 1.05rem var(--f-hien); font-variant-numeric: tabular-nums; }
.hs-le .moc span { color: var(--c-text-2); font-size: .95rem; line-height: 1.5; }
.hs-le .nut { margin-top: 18px; }

.hs-anh-muc .muc-dau { margin-bottom: clamp(28px, 4vw, 44px); }
.hs-luoi-anh { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 12px; }
.hs-luoi-anh .o-anh:nth-child(7n + 1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.hs-anh-them { margin-top: 20px; }

.hs-bv-dau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 48px; align-items: end; }
.hs-muc-luc { margin-top: clamp(32px, 5vw, 56px); padding: clamp(20px, 3vw, 32px); border-radius: var(--r-lg); background: var(--glass-thin-bg); border: 1px solid var(--glass-edge); box-shadow: var(--sh-glass); }
.hs-muc-luc-td { font: 650 1rem var(--f-hien); color: var(--c-text-accent-sm); margin-bottom: 8px; }
.hs-muc-luc ol { list-style: none; columns: 2; column-gap: 40px; }
.hs-muc-luc li { break-inside: avoid; }
.hs-muc-luc a { display: flex; gap: 14px; align-items: baseline; min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--c-line); text-decoration: none; font-weight: 500; line-height: 1.35; }
.hs-muc-luc a span { font: 650 .9rem var(--f-hien); font-variant-numeric: tabular-nums; color: var(--c-text-accent-sm); min-width: 2ch; }
.hs-muc-luc a:hover { color: var(--c-text-accent); }
.hs-ds-bai { margin-top: clamp(40px, 6vw, 72px); }
.hs-bv { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); padding-block: clamp(32px, 5vw, 56px); border-top: 1px solid var(--c-line-strong); scroll-margin-top: 96px; }
.hs-bv-so { grid-column: 1 / span 2; font: 800 clamp(3rem, 6vw, 5.5rem)/.85 var(--f-hien); font-stretch: 78%; font-variant-numeric: tabular-nums; color: var(--c-text-accent); letter-spacing: -.03em; }
.hs-bv-than { grid-column: 3 / span 8; }
.hs-bv h3 { font: 700 clamp(1.5rem, 2.6vw, 2.25rem)/1.12 var(--f-hien); font-stretch: 96%; letter-spacing: -.018em; text-wrap: balance; }
.hs-bv-ngay { margin-top: 8px; font: 600 .9rem var(--f-doc); color: var(--c-text-accent-sm); }
.hs-bv-chu { margin-top: 16px; font-size: clamp(1.02rem, .98rem + .2vw, 1.125rem); line-height: 1.75; color: var(--p-ink-700); max-width: 64ch; }
.hs-bv-anh { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-top: 22px; }

@media (max-width: 1023px) {
  .hs-chan-dung { grid-column: 1 / span 6; }
  .hs-bia-chu { grid-column: 7 / span 6; }
  .hs-ten { margin-left: calc(-1 * clamp(24px, 5vw, 64px)); }
  .hs-bai-chu { grid-column: 1 / span 8; }
  .hs-le { grid-column: 9 / span 4; }
  .hs-bv-so { grid-column: 1 / span 2; }
  .hs-bv-than { grid-column: 3 / -1; }
}
@media (max-width: 767px) {
  .hs-bia { grid-template-columns: 1fr; }
  .hs-chan-dung { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 5; max-height: 64svh; width: 100%; }
  .hs-bia-chu { grid-column: 1; grid-row: 2; margin-top: 22px; gap: 0; }
  .hs-trong-so { display: none; }
  .hs-ten { margin-left: 0; font-size: clamp(3.6rem, 19vw, 6rem); }
  .hs-bai-luoi { grid-template-columns: 1fr; }
  .hs-bai-chu, .hs-le { grid-column: 1; }
  .hs-le { position: static; margin-top: 40px; }
  .hs-luoi-anh { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hs-bv-dau { grid-template-columns: 1fr; }
  .hs-muc-luc ol { columns: 1; }
  .hs-bv { grid-template-columns: 1fr; }
  .hs-bv-so, .hs-bv-than { grid-column: 1; }
  .hs-bv-so { font-size: 3rem; margin-bottom: 10px; }
  .hs-bv-anh { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* =====================================================================================================
 * 5. ỨNG DỤNG — "lưới công cụ"
 * ===================================================================================================== */
.ud-luoi { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.ud-the { grid-column: span 5; }
.ud-the:nth-child(4n + 1), .ud-the:nth-child(4n + 4) { grid-column: span 7; }
.ud-the { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 22px 22px 22px; border-radius: var(--r-lg); background: var(--glass-thin-bg); border: 1px solid var(--glass-edge); box-shadow: var(--sh-glass);
  transition: translate var(--dur-base) var(--ease-flow), box-shadow var(--dur-base) var(--ease-flow); scroll-margin-top: 96px; }
.ud-the:hover { translate: 0 -4px; box-shadow: var(--sh-3); }
.ud-so { font: 800 clamp(2.6rem, 4vw, 3.6rem)/.9 var(--f-hien); font-stretch: 78%; font-variant-numeric: tabular-nums; color: var(--c-text-accent); letter-spacing: -.03em; }
.ud-the h2 { margin-top: 18px; font: 700 clamp(1.3rem, 1.8vw, 1.6rem)/1.15 var(--f-hien); letter-spacing: -.015em; }
.ud-ghi { margin-top: 10px; color: var(--c-text-2); max-width: 46ch; }
.ud-the .hang-nut { margin-top: auto; padding-top: 20px; }
.ud-lon { background: var(--p-ink-900); color: var(--c-text-invert); border-color: transparent; box-shadow: var(--sh-ink); }
.ud-lon .ud-ghi { color: var(--c-text-invert-2); }
.ud-lon .ud-so { color: var(--p-pink-400); font-size: clamp(3.4rem, 6vw, 5.5rem); }
.ud-lon h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.ud-lon .nut-den { background: var(--c-brand); color: var(--c-text-on-brand); }
.ud-lon .nut-kinh { background: rgb(255 255 255 / .06); border-color: rgb(255 255 255 / .3); color: var(--c-text-invert); }
.ud-lon :focus-visible { outline-color: var(--p-pink-400); }
.ud-the.dang-mo { grid-column: 1 / -1; translate: none; }
.ud-khung { margin-top: 18px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--c-line-strong); background: #fff; }
.ud-khung iframe { display: block; width: 100%; height: min(74vh, 660px); border: 0; background: #fff; }
.ud-cong-cu .ket-hop { align-items: center; }
@media (max-width: 1023px) { .ud-luoi { grid-template-columns: 1fr 1fr; } .ud-the, .ud-the:nth-child(4n + 1), .ud-the:nth-child(4n + 4) { grid-column: auto; } .ud-lon { grid-column: 1 / -1; } }
@media (max-width: 767px) {
  .ud-luoi { grid-template-columns: 1fr; }
  .ud-khung iframe { height: min(70vh, 540px); }
}

/* =====================================================================================================
 * 6. TRANG 404 — "Trang này chưa in"
 * ===================================================================================================== */
.loi-khung { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; padding-bottom: clamp(56px, 8vw, 112px); }
.loi-so { font: 800 clamp(7rem, 24vw, 22rem)/.8 var(--f-hien); font-stretch: 75%; letter-spacing: -.04em; color: var(--c-text); user-select: none; }
.loi-so span { display: inline-block; color: var(--c-brand); transform-origin: 50% 55%; }
@media (prefers-reduced-motion: no-preference) { .loi-so span { animation: tho-404 10s var(--ease-breath) infinite; } .dung-het .loi-so span { animation-play-state: paused; } }
@keyframes tho-404 { 0%, 100% { scale: .9; } 40% { scale: 1.06; } }
.loi-tho { margin-top: 14px; font: 650 1rem var(--f-hien); color: var(--c-text-accent-sm); }
.loi-chu .dan { max-width: 44ch; }
.loi-muc { margin-top: 36px; padding-top: 20px; border-top: 2px solid var(--c-text); }
.loi-muc-td { font: 650 .95rem var(--f-hien); color: var(--c-text-accent-sm); }
.loi-muc ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; margin-top: 6px; }
.loi-muc a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; border-bottom: 1px solid var(--c-line); text-decoration: none; font-weight: 600; }
.loi-muc a:hover { color: var(--c-text-accent); }
.loi-muc a .ic { width: 16px; height: 16px; color: var(--c-text-accent); }
@media (max-width: 899px) { .loi-khung { grid-template-columns: 1fr; } .loi-so { font-size: clamp(6rem, 42vw, 12rem); } }
@media (max-width: 420px) { .loi-muc ul { grid-template-columns: 1fr; } }

/* ---------- 7. Giảm chuyển động / trong suốt ---------- */
@media (prefers-reduced-motion: reduce) {
  .o-anh:hover img { transform: none; }
  .ud-the:hover { translate: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .hs-muc-luc, .ud-the:not(.ud-lon) { background: #fff; }
}

/* ---------- 8. Nút loa nổi (am-thanh.js) — QĐ-73, 27/09 làn hồi lại ----------
   am-thanh.js tự vẽ #sndFab (CSS chèn lúc chạy, bản nền tối cũ). Phối hồng mới y như khu Công cụ (tools.css mục "KHUÔN CHUNG
   TRONG KHU CÔNG CỤ"): nền trắng hồng, biểu tượng hồng đậm. Điện thoại: đứng TRÊN thanh đáy (.dock), bỏ làm mờ ở nút loa
   (tối đa 2 lớp mờ cùng lúc: thanh điều hướng + thanh đáy). Loa theo lựa chọn đã lưu (ari-sound), chưa chọn thì chờ cú chạm đầu — như khu Công cụ. */
body.trang-phu { --nen-nut-am: rgb(255 250 252 / .9); }
html body.trang-phu .sndfab { color: var(--c-text-accent); border-color: var(--c-line-strong); box-shadow: var(--sh-2); }
html body.trang-phu .sndfab.off { color: var(--c-text-3); border-color: rgb(29 21 25 / .16); }
html body.trang-phu .sndfab { min-width: 44px; min-height: 44px; }      /* 11/10: bản thu gọn (.nep) chỉ 41px, dưới mức chạm 44 */
html body.trang-phu .sndfab .tip { background: rgb(255 250 252 / .96); color: var(--c-text); border-color: var(--c-line); }
@media (max-width: 767px) {
  html body.trang-phu .sndfab { bottom: calc(80px + env(safe-area-inset-bottom)); -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgb(255 250 252 / .96); }
}

/* ---------- 9. Nút nổi "Trang chủ" (.homefab) — 27/09 vòng 2, so với web thật ----------
   Ứng dụng + Bản tin có nút này ở bản 542d567 (web thật), đợt đổi màu lỡ bỏ. Dựng bằng trang_phu.nut_trang_chu(). Nền hồng thương
   hiệu như nút "Trang chủ" ở trang tổng Công cụ (tools.css). Điện thoại: đứng TRÊN thanh đáy (.dock) như nút loa; nút loa tự sang
   góc phải khi trang có .homefab (am-thanh.js, lớp .phai). */
.homefab { position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; display: inline-flex;
  align-items: center; gap: 9px; padding: 13px 22px; min-height: 52px; border-radius: var(--r-pill); text-decoration: none;
  background: var(--c-brand); color: var(--c-text-on-brand); font: 600 .92rem/1.2 var(--f-doc);
  box-shadow: var(--sh-2); transition: background var(--dur-base) var(--ease-flow), transform var(--dur-base) var(--ease-flow); }
.homefab:hover { background: var(--c-brand-hover); transform: translateY(-3px); }
.homefab:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.homefab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 767px) {
  .homefab { bottom: calc(80px + env(safe-area-inset-bottom)); padding: 12px 18px; font-size: .86rem; }
}
@media (prefers-reduced-motion: reduce) { .homefab { transition: none; } .homefab:hover { transform: none; } }
/* Người kiểm 27/09: trang Hồ sơ cao ~22.000 px (16 bài dài). Điện thoại CPU chậm dựng bố cục CẢ trang trước lần vẽ đầu (~0,5 s ở CPU 4×),
   làn QĐ-65/67/78 thêm khối nên lần vẽ đầu chậm thêm ~0,1 s. Bài nằm ngoài màn chưa dựng cho tới khi sắp vào màn (auto: dựng một lần
   rồi nhớ chiều cao thật; tìm chữ, neo #bai-.., máy đọc màn hình vẫn thấy đủ). Chiều cao ước = trung vị phần nội dung đo thật (kiem/sua-kiem/cao-bai-hoso.py: 390 850, 767 769, 1440 532). */
.hs-bv { content-visibility: auto; contain-intrinsic-block-size: auto 540px; }
@media (max-width: 767px) { .hs-bv { contain-intrinsic-block-size: auto 820px; } }