:root{--bg:#f6f6f8;--card:#fff;--ink:#1d1d22;--muted:#6b6b76;--line:#e3e3ea;--pink:#ff4f9a;--pink2:#ffe3f0;--yellow:#ffe14a;--ok:#1a9c5b;--err:#d23b3b;--r:12px}
*{box-sizing:border-box}
body{margin:0;font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--bg);color:var(--ink)}
a{color:inherit}
.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#16161c;color:#fff}
.brand{font-weight:700;text-decoration:none;font-size:17px}
.who{font-size:13px;opacity:.85;display:flex;gap:10px;align-items:center}
.who button{background:#33333d;color:#fff;border:0;border-radius:8px;padding:5px 10px;cursor:pointer}
main{max-width:1100px;margin:0 auto;padding:16px}
.center{text-align:center;padding:60px 10px}
.muted{color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px}
h1{font-size:22px;margin:4px 0 14px}
h2{font-size:17px;margin:0 0 10px}
label{display:block;font-weight:600;font-size:13px;margin:10px 0 4px}
input[type=text],input[type=email],textarea,select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff}
textarea{resize:vertical;min-height:44px}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:8px 13px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;color:var(--ink)}
.btn:hover{border-color:#bbb}
.btn.primary{background:var(--pink);border-color:var(--pink);color:#fff}
.btn.small{padding:4px 9px;font-size:13px;font-weight:500}
.btn:disabled{opacity:.5;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grow{flex:1}
.list .item{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.list .item:hover{background:#fafafc}
.pill{display:inline-block;font-size:12px;padding:2px 8px;border-radius:20px;background:#eee;white-space:nowrap}
.pill.done{background:#dff5e9;color:var(--ok)}.pill.rendering{background:var(--pink2);color:#b0105b}.pill.error{background:#fde3e3;color:var(--err)}
.uploads{display:flex;gap:8px;flex-wrap:wrap}
.thumb{position:relative;width:84px;height:150px;border-radius:9px;overflow:hidden;background:#222;border:2px solid transparent;cursor:pointer}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover}
.thumb .x{position:absolute;top:3px;right:3px;background:#000a;color:#fff;border:0;border-radius:6px;font-size:12px;cursor:pointer}
.thumb .tag{position:absolute;left:3px;bottom:3px;background:#000a;color:#fff;font-size:11px;border-radius:5px;padding:0 4px}
.drop{border:2px dashed #cfcfd8;border-radius:var(--r);padding:16px;text-align:center;color:var(--muted);cursor:pointer}
.drop.over{border-color:var(--pink);background:var(--pink2)}
.scene{display:grid;grid-template-columns:70px 1.3fr 1fr 1fr;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.scene .num{font-weight:700;color:var(--pink);font-size:18px}
.scene .col label{margin-top:0}
.scene .tools{grid-column:2/-1;display:flex;gap:6px;flex-wrap:wrap}
.chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;background:#f0f0f5;border-radius:7px;padding:2px 4px 2px 2px}
.chip img,.chip video{width:24px;height:42px;object-fit:cover;border-radius:4px}
.chip button{border:0;background:none;cursor:pointer;color:var(--muted)}
.hint{font-size:12px;color:var(--muted);margin-top:4px}
.preview{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.preview video{width:300px;max-width:100%;border-radius:12px;background:#000}
.bar{height:8px;background:#eee;border-radius:5px;overflow:hidden;margin:8px 0}
.bar>div{height:100%;background:var(--pink);transition:width .4s}
.err{color:var(--err)}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#16161c;color:#fff;padding:10px 16px;border-radius:10px;opacity:0;transition:.25s;pointer-events:none;max-width:90vw;z-index:20}
#toast.show{opacity:1}
#toast.bad{background:var(--err)}
.sticky-actions{position:sticky;bottom:0;background:var(--bg);padding:10px 0;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;z-index:4}
table.users{width:100%;border-collapse:collapse}
table.users td{padding:6px 4px;border-bottom:1px solid var(--line)}
@media (max-width:760px){
  main{padding:10px}
  .scene{grid-template-columns:28px 1fr}
  .scene .col{grid-column:2}
  .scene .tools{grid-column:1/-1}
  .preview video{width:100%}
}

/* ---------- trình sửa 2 cột + khung xem trước ---------- */
main:has(.studio){max-width:1440px}
.studio{display:grid;grid-template-columns:340px minmax(0,1fr);gap:18px;align-items:start}
.pvcol{position:sticky;top:64px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.pvhead{display:flex;gap:6px;margin-bottom:10px}
.pvhead .tab{flex:1;border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.pvhead .tab.on{background:#16161c;color:#fff;border-color:#16161c}
.phone{position:relative;width:100%;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 0 0 6px #16161c,0 10px 30px #0003}
.phone.final{height:auto!important}
.stage{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;background:#000}
.phone.final .stage{position:static;transform:none!important;width:100%!important;height:auto!important}
.stage video.final{width:100%;display:block}
.stage .bgwrap,.stage .ovwrap{position:absolute;inset:0}
.stage .bg{width:100%;height:100%;object-fit:cover;display:block}
.stage .pvnone{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#ffffffaa;font-size:52px;line-height:1.4;background:repeating-linear-gradient(45deg,#24242c 0 40px,#1d1d24 40px 80px)}
.stage .txt{position:absolute;left:0;right:0;transform:translateY(-50%);display:flex;justify-content:center}
.stage .blk{text-align:center;line-height:1.32;text-wrap:balance}
.stage .blk .ln:last-child{margin-bottom:0!important}
.stage .hook{position:absolute;left:0;right:0;bottom:0}
.stage .badges{display:flex;line-height:1.45}
.pverr{color:#fff;padding:40px;font-size:40px}
.pvbar{height:4px;background:#eee;border-radius:3px;margin:10px 0 6px;overflow:hidden}
.pvbar>div{height:100%;width:0;background:var(--pink);transition:width .1s linear}
.pvctl{display:flex;gap:6px;align-items:center;margin-top:6px;font-size:13px}
.pvctl .grow{text-align:center}
.edcol .scene{grid-template-columns:44px minmax(0,1fr) minmax(0,1fr);border-radius:10px;padding:12px 8px;cursor:pointer}
.edcol .scene .clipcol{grid-column:2/-1}
.edcol .scene.active{background:#fff4f9;box-shadow:inset 3px 0 0 var(--pink)}
@media (max-width:900px){
  .studio{grid-template-columns:1fr}
  .pvcol{position:static;max-width:360px;margin:0 auto;width:100%}
}

/* ---------- trang đăng nhập ---------- */
body.login{min-height:100vh;background:radial-gradient(1200px 600px at 10% -10%,#ff4f9a55,transparent 60%),radial-gradient(900px 500px at 110% 110%,#7a5cff44,transparent 60%),#16161c}
body.login .top{background:transparent}
body.login main{display:grid;place-items:center;min-height:calc(100vh - 60px)}
.login-card{width:min(420px,100%);background:#fff;border-radius:20px;padding:34px 28px;text-align:center;box-shadow:0 20px 60px #0006}
.login-logo{width:64px;height:64px;margin:0 auto 10px;border-radius:18px;display:grid;place-items:center;font-size:32px;background:linear-gradient(135deg,#ff4f9a,#ff8a5c)}
.login-card h1{font-size:26px;margin:4px 0}
.login-feat{list-style:none;padding:0;margin:18px 0 22px;text-align:left;display:grid;gap:8px}
.login-feat li{background:#f6f6f8;border-radius:10px;padding:9px 12px;font-size:14px}

.stage .pvgraphic{position:absolute;inset:0}
.edcol .scene.over{outline:2px dashed var(--pink);background:var(--pink2)}