/* Phần đầu trang: chữ trải ngang, chat nhảy từng dòng phía trên, hai nhân vật nói chuyện phía dưới. Nạp sau brand.css. */
.lp-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(28px,4vw,64px);align-items:center;padding-block:48px 72px;background:transparent}
.lp-hero-copy{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.lp-hero-copy h1{margin:0 0 22px;max-width:none}
.lp-hero-copy .lp-lede{max-width:540px;margin:0 0 28px}
.lp-hero-copy .lp-cta-row{margin:0 0 26px}
.lp-hero-copy .check-row{flex-direction:column;gap:8px;margin:0}

.duo{margin:0;width:100%;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:6px;background:none;border:0;padding:0}
.duo-chat{height:176px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;overflow:hidden;padding:2px 4px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28%);mask-image:linear-gradient(to bottom,transparent 0,#000 28%)}
.bub{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s cubic-bezier(.4,0,.2,1),margin .5s ease,opacity .5s ease,filter .5s ease,transform .5s ease;flex-shrink:0}
.bub>div{min-height:0;overflow:hidden;display:flex}
.bub.cust>div{justify-content:flex-end}
.bub.fading{opacity:0;filter:blur(5px);transform:translateY(-14px) scale(.97)}
.bub.leaving{grid-template-rows:0fr;margin-bottom:-8px}
.bub.enter{animation:bub-pop .5s cubic-bezier(.2,1.5,.4,1) both}
@keyframes bub-pop{0%{opacity:0;transform:translateY(18px) scale(.82)}100%{opacity:1;transform:none}}
.bub p{margin:0;max-width:100%;padding:9px 15px;border-radius:18px;font-size:.92rem;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:8px}
.bub.cust p{background:var(--peach);border:1px solid var(--line);border-bottom-right-radius:5px;color:var(--ink)}
.bub.qs p{background:var(--paper);border:1px solid var(--gold,#f5b625);border-bottom-left-radius:5px;color:var(--ink)}
.bub .tag{flex-shrink:0;font-size:.7rem;font-weight:800;padding:2px 9px;border-radius:99px;background:#fff1c9;color:#7a4b00;margin:0}
.bub .typing{display:inline-flex;gap:5px;padding:4px 2px}
.bub .typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:typing 1s ease-in-out infinite}
.bub .typing i:nth-child(2){animation-delay:.15s}.bub .typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}

.duo-stage{position:relative;width:100%;aspect-ratio:1295/1215;--px:calc(100% / 1295)}
.duo-stage::before{content:"";position:absolute;left:8%;right:4%;bottom:2%;height:12%;border-radius:50%;background:radial-gradient(closest-side,#35180a2e,transparent);filter:blur(6px)}
.duo-canvas,.duo-fallback{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none;pointer-events:none}
.duo-stage .duo-canvas{visibility:hidden}
.duo-stage.gl-ok .duo-canvas{visibility:visible}
.duo-fallback{object-fit:contain}
.duo-fallback[hidden]{display:none}

.duo-cap{text-align:center;font-size:.76rem;color:var(--muted);margin:0}

@media(max-width:900px){
  .lp-hero{grid-template-columns:1fr;gap:36px;padding-block:32px 48px}
  .duo{width:min(640px,100%);margin-inline:auto}
}
@media(max-width:560px){
  .lp-hero{padding-block:28px 40px}
  .duo-chat{height:190px}
  .bub p{font-size:.84rem;padding:8px 13px;white-space:normal;line-height:1.35}
  .bub .tag{font-size:.64rem;padding:2px 7px}
}
@media(prefers-reduced-motion:reduce){
  .bub .typing i{animation:none!important}
  .bub{transition:none}.bub.enter{animation:none}
}