.live-badge {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; margin-left: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px; color: #fff; background: #d4382c; border-radius: 4px; padding: 2px 8px;
}
.live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.2s steps(1) infinite; }
.topbar .cta { font-size: 15px; padding: 9px 18px; }
.intro { background: linear-gradient(90deg, #f5a62320, transparent 70%), var(--panel); }

.mini-products { display: flex; flex-direction: column; gap: 8px; max-height: 340px; overflow-y: auto; }
.mini { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--panel-2); text-decoration: none; color: inherit; }
.mini:hover { border-color: var(--accent); }
.mini .emoji { font-size: 26px; width: 40px; text-align: center; flex: 0 0 40px; }
.mini .emoji img { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; display: block; }
.mini .info { flex: 1; min-width: 0; }
.mini .name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .price { color: var(--accent); font-weight: 700; font-size: 13px; }
.mini .buy { font-size: 12px; color: var(--accent); white-space: nowrap; }

.sticky-cta { display: none; }

@media (max-width: 900px) {
  .topbar .cta { display: none; }
  .sticky-cta {
    display: flex; justify-content: center; position: fixed; left: 16px; right: 16px; bottom: 14px; z-index: 40;
    font-size: 16px; padding: 12px; box-shadow: 0 8px 24px #000a;
  }
  .wrap { padding-bottom: 80px; }
  .toasts { bottom: 76px; }
}

/* ---------- người đang xem ---------- */
.viewers {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 12px;
  border-radius: 999px; border: 1px solid #f5a62366;
  background: linear-gradient(90deg, #f5a62326, #d4382c1f), var(--panel);
  box-shadow: 0 0 0 0 #f5a62355; animation: halo 2.6s ease-out infinite;
}
.v-eye { font-size: 22px; animation: peek 4s ease-in-out infinite; }
.avatars { display: flex; }
.avatars span {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 16px;
  background: #1d2533; border: 2px solid var(--panel); margin-left: -9px; animation: popin .35s ease-out;
}
.avatars span:first-child { margin-left: 0; }
.avatars .more { font-size: 11px; font-weight: 700; color: var(--accent); }
.v-main { line-height: 1.25; }
.v-now { font-size: 26px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; display: inline-block; }
.v-now.bump { animation: bump .5s ease-out; }
.v-label { font-weight: 600; }
.v-sub { font-size: 11.5px; color: var(--muted); }
.v-join {
  position: absolute; right: 14px; top: -6px; font-size: 12px; font-weight: 700; color: var(--green);
  opacity: 0; pointer-events: none;
}
.v-join.show { animation: rise 1.8s ease-out; }

/* ---------- thả tim ---------- */
.live-stage { position: relative; }
.hearts-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.float-heart { position: absolute; bottom: 30px; font-size: 26px; animation: heart-up 2.6s ease-out forwards; }
.heart-btn {
  position: absolute; right: 18px; bottom: 34px; z-index: 4; display: flex; align-items: center; gap: 6px;
  border: 1px solid #ff6b8a88; background: #2a1520e6; color: #ffd1dc; font-weight: 700; font-size: 18px;
  border-radius: 999px; padding: 6px 14px; cursor: pointer; transition: transform .1s;
}
.heart-btn span { font-size: 13px; font-variant-numeric: tabular-nums; }
.heart-btn:hover { border-color: #ff6b8a; }
.heart-btn:active { transform: scale(.9); }

/* ---------- Rắn Bán Rong nói ---------- */
.t-chat { color: #f7a8cf; }
.terminal .line.chat .msg { color: #f3dbe8; }
.doing { color: var(--accent); }
.bubble.pop { animation: popin .35s ease-out; }
.bubble { max-width: 240px; }

@keyframes halo { 0% { box-shadow: 0 0 0 0 #f5a62355; } 70%, 100% { box-shadow: 0 0 0 12px #f5a62300; } }
@keyframes peek { 0%, 85%, 100% { transform: none; } 90% { transform: translateX(-3px) rotate(-8deg); } 95% { transform: translateX(3px) rotate(8deg); } }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.45); color: #fff; } 100% { transform: scale(1); } }
@keyframes popin { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rise { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-22px); } }
@keyframes heart-up {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  15% { opacity: 1; transform: translate(var(--dx1), -40px) scale(1); }
  100% { transform: translate(var(--dx2), -260px) scale(1.2); opacity: 0; }
}

@media (max-width: 900px) {
  .topbar { flex-direction: column; align-items: stretch; }
  .viewers { justify-content: center; }
  .heart-btn { bottom: 16px; right: 12px; }
}

.avatars span { background: hsl(calc(var(--c, 0) * 67 + 20) 45% 28%); }
.avatars .me { background: var(--accent); color: #1a1205; font-size: 10px; font-weight: 800; }
.live-stage .bubble {
  font-size: 13.5px; color: var(--text); background: #1d2533; border-color: #f5a62366;
  padding: 10px 14px; box-shadow: 0 6px 18px #0006;
}
.live-stage .bubble::before, .live-stage .bubble::after { background: #1d2533; border-color: #f5a62366; }

/* ---------- đám đông khách bình luận (góc dưới trái) ---------- */
body.has-crowd .wrap { padding-bottom: 190px; }
.crowd-root { position: fixed; left: 14px; bottom: 0; z-index: 25; width: 300px; pointer-events: none; }
.crowd-root.empty { display: none; }
.crowd { display: flex; align-items: flex-end; gap: 4px; height: 104px; pointer-events: auto; }
.crowd-floor {
  display: flex; align-items: center; gap: 6px; height: 24px; margin: 0 -6px; padding: 0 10px;
  font-size: 11px; color: var(--muted); border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #1d2533, #151b26); border: 1px solid var(--border); border-bottom: 0;
  pointer-events: auto;
}
.crowd-floor b { color: var(--accent); }
.person { width: 54px; flex: 0 0 54px; position: relative; }
.person svg { width: 100%; display: block; overflow: visible; transform-origin: 50% 100%; animation: idle 2.6s ease-in-out infinite var(--d, 0s); }
.person .talk { opacity: 0; }
.person.speaking svg { animation: talk .45s ease-in-out infinite; }
.person.speaking .talk { opacity: 1; animation: mouth .3s steps(1) infinite; }
.person.speaking .smile { opacity: 0; }
.person.speaking::after { /* đèn sân khấu dưới chân người đang nói */
  content: ''; position: absolute; left: 4px; right: 4px; bottom: -2px; height: 8px; border-radius: 50%;
  background: radial-gradient(#f5a62366, transparent 70%);
}
.person.enter { animation: walk-in 1.6s ease-out both; }
.person.leave { animation: walk-out 1.2s ease-in forwards; }
.person .leg, .person .arm { transform-box: fill-box; transform-origin: 50% 0; }
.person.walking .leg.l, .person.walking .arm.r { animation: swing-a .4s ease-in-out infinite alternate; }
.person.walking .leg.r, .person.walking .arm.l { animation: swing-b .4s ease-in-out infinite alternate; }

.crowd-bubble {
  position: absolute; bottom: 136px; width: max-content; max-width: min(300px, calc(100vw - 40px));
  background: #fff7e6; color: #2b2118; border-radius: 14px; padding: 9px 13px; font-size: 13.5px; line-height: 1.45;
  box-shadow: 0 10px 24px #000a; opacity: 0; transform: translateY(8px) scale(.96); transform-origin: var(--ax, 30px) 100%;
  transition: opacity .25s, transform .25s; word-break: break-word;
}
.crowd-bubble.show { opacity: 1; transform: none; }
.crowd-bubble small { display: block; margin-top: 4px; font-size: 11px; color: #7a6a55; }
.crowd-bubble::after {
  content: ''; position: absolute; top: 100%; left: calc(var(--ax, 30px) - 8px);
  border: 8px solid transparent; border-top-color: #fff7e6;
}

@keyframes idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes talk { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-4px) rotate(-2deg); } 70% { transform: translateY(-1px) rotate(2deg); } }
@keyframes mouth { 50% { transform: scaleY(.4); transform-box: fill-box; transform-origin: center; } }
@keyframes walk-in { from { transform: translateX(-260px); } to { transform: none; } }
@keyframes walk-out { to { transform: translateX(-90px); opacity: 0; } }
@keyframes swing-a { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes swing-b { from { transform: rotate(16deg); } to { transform: rotate(-16deg); } }

@media (max-width: 900px) {
  .crowd-root { bottom: 66px; transform: scale(.78); transform-origin: 0 100%; }
  body.has-crowd .wrap { padding-bottom: 230px; }
}

/* ---------- KPI hôm nay ---------- */
.kpi { margin-top: 10px; }
.kpi-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.kpi-head b { color: var(--text); font-variant-numeric: tabular-nums; }
.kpi-bar { height: 10px; margin: 6px 0 5px; border-radius: 99px; background: #1d2533; overflow: hidden; border: 1px solid var(--border); }
.kpi-bar i {
  display: block; height: 100%; width: 0; border-radius: 99px; transition: width .8s cubic-bezier(.3, 1.3, .5, 1);
  background: repeating-linear-gradient(45deg, #f5a623 0 10px, #f7b84b 10px 20px); background-size: 28px 28px; animation: kpi-move 1s linear infinite;
}
.kpi.reached .kpi-bar i { background: repeating-linear-gradient(45deg, #3fb950 0 10px, #56d36a 10px 20px); }
.kpi-note { font-size: 12px; color: #f0c674; }
.kpi.reached .kpi-note { color: var(--green); }
@keyframes kpi-move { to { background-position: 28px 0; } }