/* Tư vấn viên 3D — khối đầu mô tả ngắn */
.kbh-sale{--k-deep:#0E1B4D;--k-mid:#1B3A8F;--k-orange:#FF7A1A;--k-yellow:#FFD23F;--k-ink:#16233A;
  position:relative;border-radius:16px;overflow:hidden;margin:4px 0 16px;color:#fff;isolation:isolate;
  background:radial-gradient(70% 90% at 26% 78%,#2C54C8 0%,var(--k-mid) 38%,var(--k-deep) 100%);box-shadow:0 10px 30px rgba(14,27,77,.28);
  font-family:"Be Vietnam Pro",system-ui,"Segoe UI",Arial,sans-serif}
.kbh-sale *{box-sizing:border-box}
.kbh-sale-rays{position:absolute;left:26%;top:72%;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;z-index:-1;
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.07) 0 7deg,transparent 7deg 18deg);animation:kbhSpin 60s linear infinite;
  -webkit-mask:radial-gradient(circle,#000 10%,transparent 62%);mask:radial-gradient(circle,#000 10%,transparent 62%)}
@keyframes kbhSpin{to{transform:rotate(360deg)}}
.kbh-sale-stage{position:relative;height:300px;cursor:pointer;touch-action:pan-y}
.kbh-sale-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.kbh-sale-conf{pointer-events:none}
.kbh-sale-top{position:absolute;left:14px;top:12px;display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;line-height:1;letter-spacing:.02em;text-transform:none;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:6px 10px 6px 8px;border-radius:999px;color:#fff}
.kbh-sale-top i{width:8px;height:8px;border-radius:50%;background:#3BE38A;animation:kbhPulse 1.8s infinite}
@keyframes kbhPulse{0%{box-shadow:0 0 0 0 rgba(59,227,138,.7)}70%{box-shadow:0 0 0 8px rgba(59,227,138,0)}100%{box-shadow:0 0 0 0 rgba(59,227,138,0)}}
.kbh-sale-bub{position:absolute;right:14px;top:48px;width:min(300px,55%);background:#fff;color:var(--k-ink);border-radius:16px 16px 16px 4px;padding:11px 14px 12px;
  box-shadow:0 10px 26px rgba(0,0,0,.28);transform-origin:0 100%;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.kbh-sale-bub.off{transform:scale(.6);opacity:0}
.kbh-sale-bub small{display:block;font-size:10.5px;font-weight:700;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:#E8650F;margin-bottom:6px}
.kbh-sale-bub p{margin:0;font-size:14.5px;font-weight:600;line-height:1.5;min-height:3em;color:var(--k-ink)}
.kbh-sale-bub.big p{font-family:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;font-size:21px;font-weight:800;line-height:1.2;color:#1B3A8F}
.kbh-sale-fx{position:absolute;font:800 22px/1 "Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;color:var(--k-yellow);-webkit-text-stroke:4px var(--k-deep);paint-order:stroke;
  pointer-events:none;animation:kbhFx 1.1s ease-out forwards;white-space:nowrap}
@keyframes kbhFx{0%{transform:translate(-50%,0) scale(.4) rotate(-8deg);opacity:0}20%{transform:translate(-50%,-14px) scale(1.2) rotate(-4deg);opacity:1}100%{transform:translate(-50%,-50px) scale(1) rotate(-4deg);opacity:0}}
.kbh-sale-bar{position:relative;display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 14px 13px;background:linear-gradient(rgba(6,12,38,.35),rgba(6,12,38,.55))}
.kbh-sale-bar::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:repeating-linear-gradient(-45deg,var(--k-yellow) 0 10px,#0E1B4D 10px 20px);opacity:.9}
.kbh-sale-chips{display:contents}
.kbh-sale-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;line-height:1;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.14);transition:all .35s cubic-bezier(.3,1.6,.5,1)}
.kbh-sale-chip svg{width:14px;height:14px}
.kbh-sale .kbh-sale-chip{appearance:none;-webkit-appearance:none;margin:0;min-height:0;cursor:pointer;font-family:inherit;text-transform:none;letter-spacing:0;box-shadow:none;text-shadow:none}
.kbh-sale .kbh-sale-chip:hover{background:rgba(255,255,255,.22);color:#fff}
.kbh-sale .kbh-sale-chip.on:hover{background:#FFE9D6;color:var(--k-ink)}
.kbh-sale .kbh-sale-chip:focus-visible{outline:2px solid var(--k-yellow);outline-offset:2px}
.kbh-sale-chip.on{background:#fff;color:var(--k-ink);border-color:#fff;transform:translateY(-2px)}
.kbh-sale-chip.on svg{color:#E8650F}
.kbh-sale .kbh-sale-btn,.kbh-sale .kbh-sale-replay{all:unset;cursor:pointer;box-sizing:border-box}
.kbh-sale .kbh-sale-btn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:800 15px/1 "Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.03em;
  text-transform:uppercase;padding:10px 14px;border-radius:9px;background:var(--k-orange);color:#fff;box-shadow:0 4px 0 #B84A06}
.kbh-sale .kbh-sale-btn:active{transform:translateY(2px);box-shadow:0 2px 0 #B84A06}
.kbh-sale .kbh-sale-btn.bounce{animation:kbhBounce 1s ease-in-out infinite}
@keyframes kbhBounce{50%{transform:translateY(-4px)}}
.kbh-sale .kbh-sale-replay{font-size:12px;font-weight:600;color:rgba(255,255,255,.75);padding:6px 4px}
.kbh-sale .kbh-sale-replay:hover{color:#fff}
.kbh-sale .kbh-sale-replay[hidden]{display:none}
.kbh-sale .kbh-sale-btn:focus-visible,.kbh-sale .kbh-sale-replay:focus-visible{outline:2px solid var(--k-yellow);outline-offset:2px}
.kbh-glow{box-shadow:0 0 0 5px rgba(255,122,26,.35)!important;border-radius:10px;transition:box-shadow .4s}
.kbh-sale.is-wide .kbh-sale-stage{height:280px}
.kbh-sale.is-wide .kbh-sale-bub{top:auto;bottom:70px}
.kbh-sale.is-wide .kbh-sale-bub p{font-size:16px}
.kbh-sale.is-wide .kbh-sale-bub.big p{font-size:26px}
@media (max-width:549px){.kbh-sale-stage{height:290px}.kbh-sale-bub{width:58%;right:10px}.kbh-sale-bub p{font-size:13px}.kbh-sale-bub.big p{font-size:18px}
  .kbh-sale-top{font-size:10px}.kbh-sale .kbh-sale-btn{margin-left:0;width:100%;justify-content:center}}
@media (prefers-reduced-motion:reduce){.kbh-sale-rays,.kbh-sale-top i,.kbh-sale .kbh-sale-btn.bounce{animation:none}}

/* ---- trình diễn theo cảnh ---- */
.kbh-sale [hidden]{display:none!important}
.kbh-sale-bub{max-height:calc(100% - 60px);overflow:auto;overscroll-behavior:contain}
.kbh-sale-faq{display:grid;gap:5px;margin-top:9px}
.kbh-sale .kbh-sale-q{all:unset;box-sizing:border-box;cursor:pointer;display:block;font-size:13px;font-weight:600;line-height:1.35;color:#1B3A8F;background:#EEF2FB;border-radius:8px;padding:7px 10px 7px 26px;position:relative}
.kbh-sale .kbh-sale-q::before{content:"?";position:absolute;left:8px;top:6px;width:13px;height:13px;border-radius:50%;background:#FF7A1A;color:#fff;font-size:9.5px;line-height:13px;text-align:center;font-weight:800}
.kbh-sale .kbh-sale-q:hover{background:#FFE9D6;color:#C2530C}
.kbh-sale-nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kbh-sale .kbh-sale-prev,.kbh-sale .kbh-sale-next,.kbh-sale .kbh-sale-pause{all:unset;box-sizing:border-box;cursor:pointer;width:30px;height:30px;border-radius:50%;display:inline-grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;font-size:11px;line-height:1}
.kbh-sale .kbh-sale-prev:hover,.kbh-sale .kbh-sale-next:hover,.kbh-sale .kbh-sale-pause:hover{background:rgba(255,255,255,.25)}
.kbh-sale-dots{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.kbh-sale .kbh-sale-dot{all:unset;cursor:pointer;width:8px;height:8px;border-radius:4px;background:rgba(255,255,255,.28);transition:width .3s,background .3s}
.kbh-sale .kbh-sale-dot.seen{background:rgba(255,255,255,.7)}
.kbh-sale .kbh-sale-dot.on{width:22px;background:var(--k-yellow)}
.kbh-sale .kbh-sale-tts,.kbh-sale .kbh-sale-more{all:unset;box-sizing:border-box;cursor:pointer;font-size:12.5px;font-weight:600;line-height:1;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22)}
.kbh-sale .kbh-sale-tts[aria-pressed="true"]{background:#fff;color:var(--k-ink)}
.kbh-sale .kbh-sale-more:hover,.kbh-sale .kbh-sale-tts:hover{border-color:#fff}
.kbh-sale .kbh-sale-q:focus-visible,.kbh-sale .kbh-sale-dot:focus-visible,.kbh-sale .kbh-sale-prev:focus-visible,.kbh-sale .kbh-sale-next:focus-visible,.kbh-sale .kbh-sale-pause:focus-visible,.kbh-sale .kbh-sale-tts:focus-visible,.kbh-sale .kbh-sale-more:focus-visible{outline:2px solid var(--k-yellow);outline-offset:2px}
.kbh-sale.is-wide .kbh-sale-stage{height:300px}
.kbh-sale.is-wide .kbh-sale-bub{top:48px;bottom:auto}
@media (max-width:549px){.kbh-sale-stage{height:360px}.kbh-sale-bub{width:60%}.kbh-sale-nav{width:100%;justify-content:center}.kbh-sale .kbh-sale-more{flex:1;text-align:center}}

/* điện thoại: bong bóng trải ngang phía trên, nhân vật đứng giữa bên dưới */
.kbh-sale.is-narrow .kbh-sale-stage{height:420px}
.kbh-sale.is-narrow .kbh-sale-bub{left:12px;right:12px;width:auto;top:44px;max-height:none;border-radius:16px}
.kbh-sale.is-narrow .kbh-sale-bub::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-8px;border:8px solid transparent;border-bottom:0;border-top-color:#fff}
.kbh-sale.is-narrow .kbh-sale-bub{overflow:visible}
.kbh-sale.is-narrow .kbh-sale-bub p{font-size:14px}
.kbh-sale.is-narrow .kbh-sale-bub .kbh-sale-faq{max-height:108px;overflow:auto;overscroll-behavior:contain}