/* ug-replay engine CSS. Tách từ ug-replay-demo (Avada SEO custom redirect). Không sửa theo từng trang: CSS riêng của app để trong file trang. */
:root { --ease: cubic-bezier(.45,0,.2,1); --pop: cubic-bezier(.34,1.3,.5,1); }
* { box-sizing: border-box; }
/* ---------- Replay shell (generic) ---------- */
.rp { margin: 0; }
.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); }
.rp-stage:not(.is-fit) .app { visibility: hidden; }
.rp-host { position: absolute; inset: 0; }
.rp-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 10; background: rgba(0,0,0,.06); }
.rp-prog i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #2c6ecb, #8a3ffc); }
@keyframes rp-bar { to { width: 100%; } }
.rp-play { position: absolute; inset: 0; z-index: 11; display: grid; place-items: center; border: 0; background: rgba(0,0,0,.18); cursor: pointer; }
.rp-play[hidden] { display: none; }
.rp-play span { padding: 10px 18px; border-radius: 999px; background: #1a1a1a; color: #fff; font-weight: 600; }
.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; }

/* ---------- Fake app, fixed 1040x650, scaled to fit ---------- */
.app { position: absolute; left: 0; top: 0; width: 1040px; height: 650px; overflow: hidden; transform-origin: 0 0; font-family: -apple-system, "system-ui", "San Francisco", "Segoe UI", "Helvetica Neue", sans-serif; }
.app.instant, .app.instant * { transition: none !important; }
.app.fade .world { opacity: 0; }
.world { position: absolute; inset: 0; background: rgb(244,246,248); transform-origin: 520px 325px; transition: transform .7s var(--ease), opacity .35s ease; }
.app.zoom .world { transform: scale(1.3); }
.page { position: absolute; left: 0; right: 0; top: 0; padding: 18px 32px 40px; transition: transform .9s var(--ease); }
.app.scrolled .page { transform: translateY(-420px); }

/* pointer */
.ptr { position: absolute; z-index: 50; left: 700px; top: 420px; width: 24px; height: 24px; margin: -3px 0 0 -5px; pointer-events: none; transition-property: left, top; transition-timing-function: var(--ease); }
.ptr svg { width: 100%; height: 100%; fill: #111; stroke: #fff; stroke-width: 1.6; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); transition: transform .15s ease; }
.ptr:after { content: ""; position: absolute; left: 5px; top: 3px; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 2px solid rgba(0,91,211,.8); border-radius: 50%; opacity: 0; }
.ptr.is-click:after { animation: ring .45s ease-out; }
.ptr.is-click svg { animation: press .25s ease; }
@keyframes ring { 0% { opacity: .95; transform: scale(.3); } to { opacity: 0; transform: scale(1.2); } }
@keyframes press { 50% { transform: scale(.85); } }

/* ---------- Outro: logo Avada, concept 01 · Spotlight ignite (keyframes chép nguyên từ mẫu) ---------- */
.rp-outro { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; background: #F4F6FC; opacity: 0; pointer-events: none; transition: opacity .65s ease; }
.app.outro .rp-outro { opacity: 1; }
.app.outro .ptr { opacity: 0; transition: opacity .3s ease; }
.rp-outro .logo { width: 460px; height: auto; display: block; }
.rp-outro .logo .shard-a, .rp-outro .logo .shard-b, .rp-outro .logo .shard-c, .rp-outro .logo .letter, .rp-outro .logo .sweep { transform-box: fill-box; transform-origin: center; }
.rp-outro .logo .shard-a, .rp-outro .logo .shard-b, .rp-outro .logo .shard-c, .rp-outro .logo .letter { opacity: 0; }
.rp-outro .logo .sweep { opacity: 0; transform: translateX(-120%); }
.rp-outro .logo .trail { opacity: 0; }
/* --ot = thời gian đã trôi trong outro (đặt khi tua vào giữa), để logo hiện đúng khung tại mốc đó */
.app.outro-play .rp-outro .shard-a { animation: c1a .80s calc(0s - var(--ot, 0s)) cubic-bezier(.34,1.56,.64,1) both; }
.app.outro-play .rp-outro .shard-b { animation: c1b .80s calc(.05s - var(--ot, 0s)) cubic-bezier(.34,1.56,.64,1) both; }
.app.outro-play .rp-outro .shard-c { animation: c1c .80s calc(.10s - var(--ot, 0s)) cubic-bezier(.34,1.56,.64,1) both; }
.app.outro-play .rp-outro .sweep { animation: sweep .30s calc(.80s - var(--ot, 0s)) ease-out both; }
.app.outro-play .rp-outro .letter { animation: c1letter .60s cubic-bezier(.22,.8,.3,1) both; }
.app.outro-play .rp-outro .l-a1 { animation-delay: calc(1s - var(--ot, 0s)); }
.app.outro-play .rp-outro .l-v { animation-delay: calc(1.06s - var(--ot, 0s)); }
.app.outro-play .rp-outro .l-a2 { animation-delay: calc(1.12s - var(--ot, 0s)); }
.app.outro-play .rp-outro .l-d { animation-delay: calc(1.18s - var(--ot, 0s)); }
.app.outro-play .rp-outro .l-a3 { animation-delay: calc(1.24s - var(--ot, 0s)); }
@keyframes c1a { 0%{opacity:0;transform:translate(-70px,50px) rotate(-10deg)} 74%{opacity:1;transform:translate(5px,-3px) rotate(1deg)} 100%{opacity:1;transform:none} }
@keyframes c1b { 0%{opacity:0;transform:translate(55px,56px) rotate(12deg)} 74%{opacity:1;transform:translate(-5px,3px) rotate(-1deg)} 100%{opacity:1;transform:none} }
@keyframes c1c { 0%{opacity:0;transform:translate(35px,-52px) rotate(9deg)} 74%{opacity:1;transform:translate(-3px,4px) rotate(-1deg)} 100%{opacity:1;transform:none} }
@keyframes sweep { 0%{opacity:0;transform:translateX(-100%)} 15%{opacity:1} 100%{opacity:0;transform:translateX(100%)} }
@keyframes c1letter { 0%{opacity:0;transform:translateX(-32px);clip-path:inset(0 100% 0 0)} 100%{opacity:1;transform:none;clip-path:inset(0)} }


/* ---------- Thanh tua = vạch tiến trình ở đáy khung ---------- */
.rp-prog { height: 14px; background: transparent; cursor: pointer; touch-action: none; outline: none; }
.rp-prog::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,.08); transition: height .12s ease; }
.rp-prog i { position: absolute; left: 0; bottom: 0; height: 3px; transition: height .12s ease; }
.rp-prog:hover::before, .rp-prog:hover i, .rp-prog:focus-visible::before, .rp-prog:focus-visible i { height: 6px; }
.rp-knob { position: absolute; bottom: -3px; left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.3); opacity: 0; transition: opacity .12s ease; }
.rp-prog:hover .rp-knob, .rp-prog:focus-visible .rp-knob { opacity: 1; }

/* ---------- Pause ---------- */
.rp-stage { cursor: pointer; }
.app.paused, .app.paused * { animation-play-state: paused !important; }
.rp-paused { position: absolute; inset: 0; z-index: 12; display: grid; place-items: center; background: rgba(0,0,0,.12); pointer-events: none; }
.rp-paused[hidden] { display: none; }
.rp-paused span { padding: 10px 18px; border-radius: 999px; background: rgba(26,26,26,.88); color: #fff; font: 600 14px/1 -apple-system, "Inter", sans-serif; }
@media (prefers-reduced-motion: reduce) { .rp-outro .logo * { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; } .rp-outro .logo .sweep { display: none; } }

/* ---------- Nhúng trong docs (iframe) ----------
   Docs có dark mode, iframe thì không biết theme của trang cha: cho cả khối replay một nền sáng riêng
   để caption luôn đọc được, và tắt cuộn để không lộ thanh cuộn trắng. */
html, body { overflow: hidden; }
body { background: #fff !important; color: #1f2124; padding: 12px 12px 14px !important; }