/* Banner nhỏ trong hero làm bằng code (23–24/10/2026, chủ yêu cầu): Trợ lý Tìm Nha Khoa + Tải app tặng 100K. Tiền tố pb-. Nạp sau p-ds.css.
   KÍCH THƯỚC TÍNH TỪ HÀNG 5 VÒNG LOGO (không hardcode): ba biến dưới đây là NGUỒN DUY NHẤT cho cả vòng logo (.ds-ring, .ds-rings) lẫn banner.
     Rộng banner  = 3 vòng + 2 khoảng cách = 3 × --ds-ring-d + 2 × --ds-ring-gap   (59×3 + 4×2 = 185px)
     Cao banner   = 1 vòng                 = --ds-ring-d                            (59px)
     Đáy banner   = đáy hàng logo          = --ds-ring-bottom                       (11px từ đáy hero)
   Đổi cỡ vòng logo (--ds-ring-d) thì banner đi theo. Từ 768px trở lên; dưới 768px banner ẩn (hero đã có tab Trợ lý), vòng logo dùng 52px.
   Phẳng, bo --ds-rd-md, không bóng. Linh vật / vé 100K nhô ra ngoài viền (overflow visible) nên các ô xếp chồng và đổi bằng mờ dần. */
.ds-hero { --ds-ring-d: 59px; --ds-ring-gap: 4px; --ds-ring-bottom: 11px; }
@media (max-width: 767px) { .ds-hero { --ds-ring-d: 52px; } }
.ds-ring { width: var(--ds-ring-d); height: var(--ds-ring-d); }
.ds-rings { gap: var(--ds-ring-gap); }
@media (min-width: 768px) { .ds-rings { bottom: var(--ds-ring-bottom); } }
.pb-promo { width: calc(3 * var(--ds-ring-d) + 2 * var(--ds-ring-gap)); bottom: var(--ds-ring-bottom); }
.pb-promo .ds-promo-vp { overflow: visible; aspect-ratio: auto; height: var(--ds-ring-d); }
.pb-promo .ds-promo-track { display: grid; transform: none !important; transition: none; height: 100%; }
.pb-promo .ds-promo-track > * { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.pb-promo .ds-promo-track > .is-on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.pb-img { display: block; height: 100%; border-radius: var(--ds-rd-md); overflow: hidden; }
.pb-img img { object-fit: cover; }
.pb-s { position: relative; display: block; height: 100%; padding: 2px 4px 2px 58px; border: 1px solid var(--ds-blue-200); border-radius: var(--ds-rd-md); }
.pb-s--tl { background: linear-gradient(115deg, #dff4fb 0%, #e6eefb 52%, #ede8fc 100%); }
.pb-s--app { background: linear-gradient(115deg, #fff3e0 0%, #fff8ec 60%, #fdefe2 100%); border-color: #f6d3a8; padding-left: 50px; }
.pb-promo .pb-mascot { position: absolute; left: -16px; bottom: 0; width: 72px; height: 74px; object-fit: contain; transform-origin: 50% 100%; animation: pb-bob 3.2s ease-in-out infinite; pointer-events: none; }
.pb-tk { position: absolute; left: -12px; bottom: 8px; width: 60px; height: 45px; transform: rotate(-6deg); pointer-events: none; }
@keyframes pb-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-2deg); } }
.pb-tx { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; min-width: 0; }
.pb-t { display: block; max-width: 100%; font-size: var(--ds-fs-12); font-weight: var(--ds-fw-800); line-height: 14px; color: var(--ds-blue-600); letter-spacing: -.03em; white-space: nowrap; }
.pb-s--app .pb-t { color: var(--ds-orange-700); font-size: var(--ds-fs-11); line-height: 13px; font-weight: var(--ds-fw-700); letter-spacing: -.02em; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pb-t em { font-style: normal; font-weight: var(--ds-fw-800); }
.pb-say { display: block; max-width: 100%; height: 13px; font-size: var(--ds-fs-11); line-height: 13px; color: var(--ds-ink-500); white-space: nowrap; overflow: hidden; }
.pb-say [data-pb-say]::after { content: ''; display: inline-block; width: 1px; height: 10px; margin-left: 1px; vertical-align: -1px; background: var(--ds-blue-500); animation: pb-caret 1s steps(1) infinite; }
@keyframes pb-caret { 50% { opacity: 0; } }
.pb-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pb-promo .pb-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 0; border-radius: var(--ds-rd-sm); background: var(--ds-blue-600); color: #fff; font-size: var(--ds-fs-11); font-weight: var(--ds-fw-600); white-space: nowrap; }
.pb-promo .pb-btn i { display: none; }
.pb-promo .pb-btn:hover { background: var(--ds-blue-700); }
.pb-promo .pb-btn:focus-visible, .pb-ar:focus-visible { outline: 2px solid var(--ds-blue-700); outline-offset: 1px; }
.pb-promo .pb-s--app .pb-btn { background: var(--ds-orange-500); color: #1d1204; }
.pb-promo .pb-s--app .pb-btn:hover { background: #dd6f10; }
.pb-mau { position: absolute; top: -9px; right: 8px; z-index: 2; height: 15px; padding: 0 5px; display: inline-flex; align-items: center; border-radius: 3px; background: #fff; border: 1px solid #f6d3a8; color: var(--ds-orange-700); font-size: var(--ds-fs-11); font-weight: var(--ds-fw-600); font-style: normal; line-height: 1; }
/* điều khiển NẰM TRONG banner, góc phải dưới, cùng hàng với nút: mũi tên 18×24 (vùng bấm nới tới 28px bằng ::after) + chấm trang */
.pb-ctl { position: absolute; right: 3px; bottom: 3px; height: 24px; display: flex; align-items: center; z-index: 3; }
.pb-ar { position: relative; width: 18px; height: 24px; padding: 0; border: 0; background: none; display: grid; place-items: center; color: var(--ds-ink-500); font-size: 11px; cursor: pointer; border-radius: var(--ds-rd-xs); }
.pb-ar::after { content: ''; position: absolute; inset: -2px -1px; }
.pb-ar:hover { background: rgba(255,255,255,.7); color: var(--ds-blue-600); }
.pb-promo .ds-promo-dots { position: static; right: auto; bottom: auto; transform: none; gap: 0; }
.pb-promo .ds-promo-dots button { min-width: 10px; height: 24px; }
.pb-promo .ds-promo-dots button::before { background: rgba(60,70,95,.35); }
.pb-promo .ds-promo-dots button[aria-current="true"]::before { background: var(--ds-blue-600); width: 12px; }
.pb-m100 { display: none; }
@media (prefers-reduced-motion: reduce) { .pb-promo .pb-mascot, .pb-say [data-pb-say]::after { animation: none; } .pb-promo .ds-promo-track > * { transition: none; } }
@media (max-width: 767px) {
  /* di động: bỏ banner trợ lý (hero đã có tab Trợ lý); ưu đãi 100K chỉ còn một thanh gọn 44px dưới hero */
  .pb-m100 { display: flex; align-items: center; gap: 8px; height: 44px; margin: 8px 16px 0; padding: 0 8px; border: 1px solid #f6d3a8; border-radius: var(--ds-rd-md); background: linear-gradient(115deg, #fff3e0, #fff8ec); color: var(--ds-ink-900); }
  .pb-m100 .pb-tk { position: static; transform: none; width: 46px; height: 35px; flex: none; }
  .pb-m100 .t { min-width: 0; flex: 1; display: flex; flex-direction: column; }
  .pb-m100 .t b { font-size: var(--ds-fs-12); font-weight: var(--ds-fw-700); line-height: 15px; color: var(--ds-orange-700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pb-m100 .t small .pb-mau { position: static; margin-right: 4px; height: 14px; }
  .pb-m100 .t small { font-size: var(--ds-fs-11); line-height: 14px; color: var(--ds-ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pb-m100 .go { flex: none; height: 28px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: var(--ds-rd-sm); background: var(--ds-orange-500); color: #1d1204; font-size: var(--ds-fs-12); font-weight: var(--ds-fw-600); }
}