/* Vỏ replay dùng chung cho iframe và poster trên trang docs (components/blocks/Replay.tsx của docs.avada.io):
 * khung app (chỉ hình dạng) + thanh chú thích. Không có rule cho html/body/* nên nạp được vào trang khác.
 * Thanh gọn theo bề ngang khung (@container), không theo màn hình, để poster trên docs và iframe xuống dòng y hệt nhau. */
.rp { container: rp / inline-size; }
.rp-stage { position: relative; width: 100%; aspect-ratio: 1040 / 650; overflow: hidden; border-radius: 14px; background: rgb(244,246,248); box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 22px 44px -24px rgba(20,24,40,.45); }

/* ---------- Thanh chú thích ---------- */
.rp-bar { margin-top: 12px; }
.rp-now { margin: 0 0 10px; font-size: 14px; } .rp-now-k { font-weight: 600; margin-right: 8px; } .rp-now-t { color: #5c5f62; }
.rp-row { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.rp-pills { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.rp-pills button, .rp-ctrls button { font: inherit; font-size: 13px; border: 1px solid #dcdcdc; background: #fff; border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: background .15s, border-color .15s; }
.rp-pills button.is-on { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.rp-ctrls { display: flex; gap: 6px; }
.rp { --rp-line: #e3e5e8; --rp-surface: #ffffff; --rp-fg: #18181b; --rp-muted: #5d6167; --rp-chip: #f1f3f5; --rp-accent: #005bd3; --rp-accent-soft: rgba(0, 91, 211, .08); --rp-on-accent: #ffffff; }
html.dark .rp { --rp-line: #2e3033; --rp-surface: #111214; --rp-fg: #e4e4e7; --rp-muted: #a1a1aa; --rp-chip: #1d1f22; --rp-accent: #7fb2ff; --rp-accent-soft: rgba(127, 178, 255, .12); --rp-on-accent: #0b1424; }
html.dark .rp-stage { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 22px 44px -24px rgba(0,0,0,.8); }
.rp-bar { font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif; color: var(--rp-fg); text-align: left; }
.rp-bar { margin-top: 12px; position: relative; z-index: 1; }  /* .rp-stage là position: relative nên bóng của nó vẽ đè lên chú thích nếu không nâng lớp */
.rp-head { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 10px; }
.rp-now { flex: 1; min-width: 0; margin: 0; display: grid; }
/* Dòng chú thích đang hiện + các bản ẩn (.rp-ghost) của mọi chú thích, chồng cùng 1 ô: ô cao bằng chú thích dài nhất (replay.js) */
.rp-now-l { grid-area: 1 / 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding-top: 4px; }
.rp-ghost { visibility: hidden; }
.rp-now-k { margin: 0; color: var(--rp-muted); font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; text-transform: uppercase; flex: none; }
.rp-now-t { color: var(--rp-fg); font-size: 15px; font-weight: 600; }
.rp-ctrls { display: flex; flex: none; gap: 6px; }
.rp-ctrls button { display: inline-grid; place-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--rp-line); border-radius: 999px; background: var(--rp-surface); color: var(--rp-fg); font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; }
/* .rp-b: nhãn nút; nhãn ẩn (.rp-ghost) chồng cùng ô để giữ bề ngang */
.rp-b { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; }
.rp-ctrls button:hover { border-color: var(--rp-muted); }
.rp-pills { display: flex; flex-wrap: wrap; gap: 6px 8px; counter-reset: rp-p; }
.rp-pills button { counter-increment: rp-p; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 5px; border: 1px solid var(--rp-line); border-radius: 999px; background: var(--rp-surface); color: var(--rp-muted); font-family: inherit; font-size: 13.5px; line-height: 1.35; white-space: nowrap; cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.rp-pills button::before { content: counter(rp-p); display: grid; place-items: center; flex: none; width: 21px; height: 21px; border-radius: 50%; background: var(--rp-chip); color: var(--rp-muted); font: 600 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
.rp-pills button:hover { border-color: var(--rp-muted); color: var(--rp-fg); }
.rp-pills button.is-on { border-color: var(--rp-accent); background: var(--rp-accent-soft); color: var(--rp-fg); }
.rp-pills button.is-on::before { background: var(--rp-accent); color: var(--rp-on-accent); }
.rp-ctrls button:focus-visible, .rp-pills button:focus-visible { outline: 2px solid var(--rp-accent); outline-offset: 2px; }
/* Khung hẹp (< 520px, tức điện thoại): giữ thanh bước gọn như desktop thay vì xuống 5-6 dòng.
   Hàng trên: chú thích + Pause/Replay; hàng dưới: nút bước; nút bước chưa tới chỉ còn vòng số, bước đang chạy hiện đủ chữ; Pause/Replay chỉ còn ký hiệu. */
@container rp (max-width: 520px) {
  .rp-bar { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "now ctrls" "pills pills"; gap: 8px 8px; align-items: center; }
  .rp-head { display: contents; }
  .rp-now { grid-area: now; }
  .rp-now-t { font-size: 14px; }
  .rp-pills { grid-area: pills; min-width: 0; gap: 4px; flex-wrap: nowrap; }  /* 1 hàng; tên bước dài thì cắt "…" (chú thích phía trên đã ghi đủ) */
  .rp-pills li { flex: none; }
  .rp-pills li:has(.is-on) { flex: 0 1 auto; min-width: 0; }
  .rp-pills button:not(.is-on) { font-size: 0; gap: 0; padding: 2px; }
  .rp-pills button.is-on { gap: 6px; padding: 2px 10px 2px 2px; font-size: 13px; max-width: 100%; }
  .rp-pills .is-on .rp-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .rp-ctrls { grid-area: ctrls; align-self: start; }
  .rp-ctrls button { width: 30px; padding: 0; justify-content: center; }
  .rp-ctrls .rp-t { display: none; }
}