:root { --bg:#FAF8F5; --ink:#18181B; --muted:#57534E; --line:#E9E3DC; --accent:#EA580C; --primary:#C2410C; --primary-h:#9A3412; --accent2:#C2410C; --soft:#FFF1E6; --card:#fff; --err:#DC2626; --ok:#15803D; --r:16px; --ease:cubic-bezier(.2,.7,.2,1); }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:'Be Vietnam Pro', system-ui, sans-serif; font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; }
a { color:var(--accent); }
.hidden { display:none !important; }
.wrap { max-width:1180px; margin:0 auto; padding:0 20px 60px; }
.top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { font-weight:800; font-size:24px; letter-spacing:-.02em; color:var(--ink); text-decoration:none; }
.brand span { color:var(--accent); }
.topr { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.hero h1 { font-size:36px; letter-spacing:-.03em; margin:22px 0 6px; }
.hero p { color:var(--muted); margin:0 0 18px; max-width:760px; line-height:1.6; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid var(--line); background:#fff; color:var(--ink); border-radius:999px; padding:10px 18px; font:600 14px inherit; font-family:inherit; cursor:pointer; text-decoration:none; min-height:40px; }
.btn.grad { background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#fff; border:0; }
.btn.big { padding:13px 26px; font-size:16px; }
.btn.sm { padding:6px 12px; min-height:32px; font-size:13px; }
.btn.ghost:hover { border-color:var(--accent); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.pill { display:inline-block; padding:7px 14px; border-radius:999px; background:var(--soft); color:#9A3412; font-weight:700; font-size:14px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:22px; margin-bottom:18px; box-shadow:0 1px 2px rgba(40,20,10,.05),0 8px 24px -12px rgba(40,20,10,.14); }
.card h2 { margin:0 0 10px; font-size:19px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.num { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#fff; font-size:13px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.grid2.tight { gap:22px; }
@media (max-width:900px) { .grid2 { grid-template-columns:1fr; } .hero h1 { font-size:28px; } }
.tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.tabs button { border:1px solid var(--line); background:#fff; border-radius:999px; padding:10px 18px; font:600 14px inherit; font-family:inherit; cursor:pointer; color:var(--muted); }
.tabs button.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.lbl { display:block; font-weight:700; font-size:13.5px; margin:14px 0 6px; }
.hint { color:var(--muted); font-size:12.5px; font-weight:400; line-height:1.5; }
.err { color:var(--err); font-size:13.5px; margin:8px 0 0; min-height:1px; }
textarea, input[type=text], input:not([type]), select { width:100%; border:1px solid var(--line); border-radius:12px; padding:10px 12px; font:inherit; font-size:14px; background:#fff; color:var(--ink); }
textarea { resize:vertical; line-height:1.55; }
select { width:auto; min-width:200px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.chk { display:inline-flex; gap:6px; align-items:center; font-size:14px; cursor:pointer; }
.seg { display:inline-flex; flex-wrap:wrap; gap:4px; background:#FFF3EA; border:1px solid var(--line); border-radius:999px; padding:4px; }
.seg button { border:0; background:transparent; border-radius:999px; padding:7px 13px; font:600 13.5px inherit; font-family:inherit; color:var(--muted); cursor:pointer; }
.seg button.on { background:linear-gradient(90deg,var(--accent),var(--accent2)); color:#fff; }
.drop { display:flex; flex-direction:column; align-items:center; gap:4px; border:1.5px dashed #E8D6C8; border-radius:16px; padding:22px; text-align:center; cursor:pointer; background:#FFFCF9; }
.drop.over { border-color:var(--accent); background:var(--soft); }
.drop input { display:none; }
.thumbs { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin-top:10px; }
.th { position:relative; border-radius:10px; overflow:hidden; background:#F4ECE6; aspect-ratio:3/4; }
.th img { width:100%; height:100%; object-fit:cover; display:block; }
.th .x { position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#fff; cursor:pointer; line-height:1; }
.th .cap { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(transparent,rgba(0,0,0,.7)); color:#fff; font-size:11px; padding:10px 6px 4px; }
.th .up { position:absolute; inset:0; display:grid; place-items:center; background:rgba(255,250,246,.85); font-size:12px; font-weight:700; }
.th .up i { position:absolute; left:0; bottom:0; height:4px; background:var(--accent); }
.actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:18px; }
.scenes { display:flex; flex-direction:column; gap:8px; max-height:560px; overflow:auto; padding-right:4px; }
.sc { display:grid; grid-template-columns:28px 64px 1fr auto; gap:10px; align-items:center; border:1px solid var(--line); border-radius:14px; padding:8px; }
.sc .n { font-weight:800; color:var(--accent); text-align:center; }
.sc img { width:64px; height:86px; object-fit:cover; border-radius:8px; background:#F4ECE6; }
.sc .info { display:flex; flex-direction:column; gap:5px; min-width:0; }
.sc .info input { padding:7px 10px; }
.sc .ctl { display:flex; flex-direction:column; gap:4px; }
.sc .ctl button { border:1px solid var(--line); background:#fff; border-radius:8px; width:30px; height:26px; cursor:pointer; }
.post { position:relative; }
.post button { position:absolute; right:8px; bottom:10px; }
.bar { height:12px; background:#F4ECE6; border-radius:999px; overflow:hidden; margin:10px 0; }
.bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent),var(--accent2)); transition:width .6s; }
.result { display:grid; grid-template-columns:minmax(220px,340px) 1fr; gap:22px; align-items:start; }
.result video { width:100%; border-radius:16px; background:#000; aspect-ratio:9/16; }
.resinfo { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.resinfo .post { width:100%; }
@media (max-width:700px) { .result { grid-template-columns:1fr; } }
.hgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:14px; }
.hi { background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; cursor:pointer; }
.hi .im { aspect-ratio:9/16; background:#F4ECE6 center/cover; position:relative; }
.hi .st { position:absolute; left:8px; top:8px; font-size:11.5px; font-weight:700; padding:4px 9px; border-radius:999px; background:#fff; }
.hi .st.done { background:#DCFCE7; color:#166534; } .hi .st.error { background:#FEE2E2; color:#991B1B; } .hi .st.rendering, .hi .st.queued, .hi .st.planning { background:var(--soft); color:#9A3412; }
.hi .b { padding:10px 12px; display:flex; flex-direction:column; gap:3px; }
.hi .b b { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hi .del { align-self:flex-start; border:0; background:none; color:var(--muted); font-size:12px; cursor:pointer; padding:0; }
.empty { color:var(--muted); padding:30px; text-align:center; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--ink); color:#fff; padding:11px 18px; border-radius:12px; font-size:14px; z-index:9; max-width:90vw; }
#gate { text-align:center; padding:40px; }
/* ---------- Dạng video ---------- */
.newb { font-size:10px; font-weight:800; background:var(--accent2); color:#fff; border-radius:6px; padding:2px 6px; margin-left:4px; vertical-align:2px; }
.chips { display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 14px; }
.chips button { border:1px solid var(--line); background:#fff; border-radius:999px; padding:7px 14px; font:600 13.5px inherit; font-family:inherit; color:var(--muted); cursor:pointer; }
.chips button.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.tgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.tcard { display:flex; flex-direction:column; gap:6px; text-align:left; border:1px solid var(--line); background:#fff; border-radius:16px; padding:10px 10px 12px; cursor:pointer; font-family:inherit; color:var(--ink); transition:transform .15s, box-shadow .15s, border-color .15s; }
.tcard:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:0 10px 24px -14px rgba(234,88,12,.5); }
.tcard b { font-size:15px; }
.tcard .hint { font-size:12.5px; }
.tcard.off { opacity:.55; }
.tprev { position:relative; display:grid; place-items:center; aspect-ratio:4/3; border-radius:12px; background:linear-gradient(135deg,#FFE4D2,#FBD3E0 60%,#E9DDFB); overflow:hidden; }
.tic { font-size:46px; animation:tbob 2.6s ease-in-out infinite; }
.tcard:hover .tic { animation-duration:.9s; }
@keyframes tbob { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-6px) rotate(-4deg); } }
.tcut { position:absolute; left:8px; bottom:8px; font-size:11px; font-weight:700; background:rgba(255,255,255,.85); padding:3px 8px; border-radius:999px; color:#9A3412; }
.tmeta { font-size:12px; font-weight:600; color:#9A3412; margin-top:auto; }
.fhead { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:14px 18px; }
.fh { display:flex; align-items:center; gap:12px; }
.fh .hint { margin:2px 0 0; }
.ficon { font-size:34px; width:56px; height:56px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(135deg,#FFE4D2,#FBD3E0); }
.hand { display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--soft); border-radius:12px; padding:10px 12px; margin-bottom:10px; font-size:14px; font-weight:600; }
.th .mv { position:absolute; left:4px; top:4px; display:flex; gap:3px; }
.th .mv button { width:22px; height:22px; border-radius:6px; border:0; background:rgba(0,0,0,.6); color:#fff; cursor:pointer; font-size:12px; }
.dances { display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:8px; }
.dance { border:2px solid var(--line); background:#fff; border-radius:12px; overflow:hidden; padding:0; cursor:pointer; font-family:inherit; text-align:left; }
.dance video { width:100%; aspect-ratio:9/16; object-fit:cover; display:block; background:#000; }
.dance span { display:block; font-size:12px; font-weight:600; padding:5px 7px; }
.dance.on { border-color:var(--accent); box-shadow:0 0 0 3px var(--soft); }
.steps { list-style:none; padding:0; margin:6px 0 14px; display:flex; flex-wrap:wrap; gap:8px; }
.steps li { display:flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px; background:#F6EFE9; color:var(--muted); font-weight:600; font-size:13.5px; }
.steps li i { font-style:normal; }
.steps li.run { background:var(--soft); color:#9A3412; }
.steps li.run i { animation:spin 1.2s linear infinite; display:inline-block; }
.steps li.done { background:#DCFCE7; color:#166534; }
.steps li.warn { background:#FEF3C7; color:#92400E; }
.steps li.fail { background:#FEE2E2; color:#991B1B; }
@keyframes spin { to { transform:rotate(360deg); } }
.clips { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; }
.clip { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; }
.clip video, .clip .cph { width:100%; aspect-ratio:9/16; object-fit:cover; display:block; background:#111; }
.clip .cph { display:grid; place-items:center; text-align:center; padding:10px; font-size:12px; color:#fff; background:linear-gradient(135deg,#3b2f4a,#1c1730); }
.clip.fail .cph { background:#7f1d1d; }
.clip.running .cph { animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.65; } }
.clip .cb { display:flex; align-items:center; justify-content:space-between; gap:4px; padding:6px 8px; font-size:12.5px; font-weight:700; }
.clip .cb .btn { padding:3px 9px; min-height:26px; font-size:12px; }
@media (max-width:600px) { .tgrid { grid-template-columns:1fr 1fr; } .tcard .hint { display:none; } .clips { grid-template-columns:1fr 1fr 1fr; } }
/* ---------- Video bán hàng (9 thành phần) ---------- */
.card h2.mt { margin-top:22px; }
.fgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; margin-bottom:6px; }
.fcard { display:flex; flex-direction:column; gap:6px; text-align:left; border:1.5px solid var(--line); background:linear-gradient(160deg,#fff,#FFF5EE); border-radius:16px; padding:14px; cursor:pointer; font-family:inherit; color:var(--ink); transition:transform .15s, box-shadow .15s, border-color .15s; }
.fcard:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:0 10px 24px -14px rgba(234,88,12,.5); }
.fcard .tic { font-size:34px; animation:none; }
.fcard b { font-size:17px; }
.fcard .ftag { align-self:flex-start; font-size:11.5px; font-weight:700; color:#9A3412; background:var(--soft); border-radius:999px; padding:3px 9px; }
.fcard.off { opacity:.6; }
.seen { color:#166534 !important; }
.drop.sm { padding:14px; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.comp { border-top:1px solid var(--line); padding:14px 0 6px; }
.comp .ch { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.comp .ch b { font-size:15px; }
.comp .ch .btn { margin-left:auto; }
.opts { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; align-items:center; }
.opt { border:1px solid var(--line); background:#fff; border-radius:12px; padding:8px 12px; font:500 13.5px inherit; font-family:inherit; cursor:pointer; color:var(--ink); text-align:left; max-width:340px; }
.opt.on { border-color:var(--accent); background:var(--soft); color:#9A3412; font-weight:700; box-shadow:0 0 0 2px rgba(234,88,12,.15); }
.comp .own { margin-top:2px; }
.mini-up { display:inline-flex; align-items:center; gap:4px; border:1px dashed #E3C9B6; border-radius:999px; padding:5px 11px; font-size:12.5px; font-weight:600; color:#9A3412; cursor:pointer; background:#FFFCF9; }
.mini-up input { display:none; }
.thumbs.sm { grid-template-columns:repeat(auto-fill,minmax(80px,96px)); margin:0 0 8px; }
.th.sel { outline:3px solid var(--accent); }
.th .use { position:absolute; left:4px; right:4px; bottom:4px; border:0; border-radius:8px; background:rgba(255,255,255,.92); font:700 11px inherit; font-family:inherit; padding:4px; cursor:pointer; color:#9A3412; }
.comp .row { margin:6px 0; }
.comp .k { font-weight:700; font-size:13px; min-width:44px; }
.sline { display:grid; grid-template-columns:24px 1fr 28px; gap:8px; align-items:start; border:1px solid var(--line); border-radius:12px; padding:8px; margin-bottom:6px; }
.sline .n { font-weight:800; color:var(--accent); text-align:center; padding-top:8px; }
.sline .sl { display:flex; flex-direction:column; gap:5px; }
.sline input { font-size:12.5px; padding:6px 9px; color:var(--muted); }
.x2 { border:1px solid var(--line); background:#fff; border-radius:8px; height:28px; cursor:pointer; }
.board { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:12px; }
.scene { border:1px solid var(--line); border-radius:14px; overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.scene .media img, .scene .media video, .scene .ph { width:100%; aspect-ratio:9/16; object-fit:cover; display:block; background:#111; }
.scene .ph { display:grid; place-items:center; text-align:center; padding:10px; color:#fff; font-size:12px; background:linear-gradient(135deg,#3b2f4a,#1c1730); }
.scene .ph.fail { background:#7f1d1d; } .scene .ph.running { animation:pulse 1.6s ease-in-out infinite; }
.scene .sb { padding:8px 10px; display:flex; flex-direction:column; gap:4px; }
.scene .sb p { margin:0; font-size:12.5px; line-height:1.45; color:var(--muted); }
.scene .sb .row { gap:6px; }
@media (max-width:600px) { .row2 { grid-template-columns:1fr; } .board { grid-template-columns:1fr 1fr; } .fgrid { grid-template-columns:1fr 1fr; } }
.refbox { border:1px solid #F5D0B5; background:#FFF8F2; border-radius:14px; padding:10px 12px; margin-bottom:10px; }
.refh { display:flex; gap:12px; align-items:flex-start; }
.refh img { width:64px; height:114px; object-fit:cover; border-radius:8px; background:#111; flex:none; }
.refh .row { margin-top:6px; gap:10px; }
.refshots { margin:8px 0 4px; padding-left:20px; font-size:12.5px; line-height:1.6; color:var(--ink); }
.refshots i { color:var(--muted); font-style:normal; }
.opt.ref { border-style:dashed; }
.refmain { margin-bottom:12px; }
.refmain .refh { margin-top:8px; }
.keep { border:1px solid #F5D0B5; background:#FFF8F2; border-radius:14px; padding:12px 14px; margin-bottom:6px; }
.keep .krow { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:6px 0; }
.keep .k { min-width:110px; font-weight:700; font-size:13.5px; }
.sline .tm { font-size:11.5px; font-weight:700; color:#9A3412; }
.sline .orig { font-size:12px; color:var(--muted); }
.scene .media { position:relative; }
.scene .rfm { position:absolute; left:6px; top:6px; width:38%; border:2px solid #fff; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,.35); }

.scene.warn { border-color:#f59e0b; box-shadow:0 0 0 2px #fde68a; }
.scene .qcw { font-size:11.5px; line-height:1.4; color:#92400e; background:#fffbeb; border-radius:6px; padding:4px 6px; }
.scene .qcw.ok { color:#166534; background:#f0fdf4; }
.scene .qcok { font-size:11px; color:#15803d; }

.scene .dlr a.btn { text-decoration:none; }

.mlib .k { font-size:12.5px; font-weight:600; margin:8px 0 4px; }
.mlist { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.mcard { flex:0 0 86px; border:1.5px solid var(--line); border-radius:10px; background:#fff; padding:3px; cursor:pointer; display:flex; flex-direction:column; gap:3px; font:inherit; }
.mcard img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:7px; display:block; background:#eee; }
.mcard span { font-size:11px; line-height:1.25; color:var(--muted); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.mcard.on { border-color:#e8590c; box-shadow:0 0 0 2px #ffd8a8; } .mcard.on span { color:#c2410c; font-weight:600; }
.mprev .mp { display:flex; gap:12px; align-items:flex-start; margin-top:10px; flex-wrap:wrap; }
.mprev .mp img { width:150px; aspect-ratio:9/16; object-fit:cover; border-radius:12px; cursor:zoom-in; box-shadow:0 2px 10px rgba(0,0,0,.12); }
.mprev .mp.busy .ph { width:150px; aspect-ratio:9/16; border-radius:12px; display:grid; place-items:center; text-align:center; color:#fff; font-size:12px; background:linear-gradient(135deg,#3b2f4a,#1c1730); animation:pulse 1.6s ease-in-out infinite; }
.mprev .mpi { flex:1; min-width:200px; } .mprev .mpi p { margin:4px 0 8px; } .mprev .row { gap:8px; flex-wrap:wrap; align-items:center; }
.scene .redo { display:flex; flex-direction:column; gap:6px; margin-top:6px; padding:8px; border:1px dashed #fdba74; border-radius:10px; background:#fff7ed; }
.scene .redo b { font-size:12px; } .scene .redo textarea { width:100%; font:inherit; font-size:12px; border:1px solid var(--line); border-radius:8px; padding:6px; resize:vertical; box-sizing:border-box; }
.scene .redo .hint { font-size:11px; margin:0; } .scene .note { font-size:11.5px; color:#9a3412; margin:0; }
.btn.sm.on { background:#fff1e6; border-color:#fb923c; }

.scene .media img[data-lb], .scene .media video[data-lb] { cursor:zoom-in; }
.lb { position:fixed; inset:0; z-index:1000; background:rgba(12,10,20,.97); display:none; align-items:center; justify-content:center; flex-direction:column; padding:12px 56px 76px; box-sizing:border-box; }
.lb.on { display:flex; }
.lb .lbm { width:100%; height:100%; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lb .lbm img, .lb .lbm video { max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; cursor:zoom-in; user-select:none; -webkit-user-drag:none; }
.lb .lbm video { cursor:default; }
.lb .lbm.z { overflow:auto; display:block; cursor:grab; }
.lb .lbm.z img { max-width:none; max-height:none; width:auto; height:auto; cursor:zoom-out; border-radius:0; }
.lb .lbc { position:absolute; top:10px; right:14px; width:42px; height:42px; border-radius:50%; border:0; background:rgba(255,255,255,.14); color:#fff; font-size:28px; line-height:1; cursor:pointer; }
.lb .lbp, .lb .lbn { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:64px; border:0; border-radius:12px; background:rgba(255,255,255,.12); color:#fff; font-size:36px; cursor:pointer; }
.lb .lbp { left:6px; } .lb .lbn { right:6px; }
.lb .lbt { position:absolute; left:0; right:0; bottom:0; padding:10px 16px 14px; display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; color:#f3f0ff; font-size:13.5px; background:linear-gradient(transparent, rgba(0,0,0,.55)); }
.lb .lbt > span:first-child { max-width:640px; }
.lb .lbt .hint { color:#c4b5fd; font-size:12px; }
.lb .lbt .btn.ghost { background:rgba(255,255,255,.1); color:#fff; border-color:rgba(255,255,255,.3); text-decoration:none; }
.lb .lbt .seg { display:inline-flex; background:rgba(255,255,255,.12); border-radius:999px; padding:3px; }
.lb .lbt .seg button { border:0; background:none; color:#fff; padding:5px 12px; border-radius:999px; cursor:pointer; font:inherit; font-size:12.5px; }
.lb .lbt .seg button.on { background:#f97316; }
@media (max-width:640px) { .lb { padding:8px 8px 96px; } .lb .lbp, .lb .lbn { top:auto; bottom:52px; transform:none; height:44px; } }
.mprev .qcw { font-size:12px; color:#92400e; background:#fffbeb; border-radius:6px; padding:5px 8px; margin:6px 0; }
.mprev .qcok { font-size:12px; color:#15803d; margin:6px 0; }
.scene .aib { align-self:flex-start; font-size:11.5px; padding:3px 9px; }
.scene .aib.on { background:#fff1e6; border-color:#fb923c; color:#c2410c; }

/* ---- Video Trend ---- */
#trendSec .lbl { display:block; margin-top:14px; }
#trendSec .row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px; }
#trendSec .row input:not([type=checkbox]) { flex:1; min-width:0; }
#trendSec input.num { flex:0 0 80px !important; width:80px; }
#trendSec .seg { margin-top:6px; }
#trendSec .chk { display:flex; gap:6px; align-items:center; margin-top:10px; }
.tsrc { display:grid; grid-template-columns:minmax(160px,240px) 1fr; gap:16px; margin-top:12px; align-items:start; }
.tsrc video { width:100%; border-radius:14px; background:#000; max-height:420px; }
@media (max-width:600px) { .tsrc { grid-template-columns:1fr; } }
.th.star { box-shadow:0 0 0 3px #f97316; }
.th[data-tg] { cursor:pointer; }
.tpair { display:grid; grid-template-columns:repeat(2,minmax(0,220px)); gap:12px; }
.tpair figure { margin:0; } .tpair img { width:100%; border-radius:12px; display:block; background:#eee; }
.tpair figcaption { font-size:12px; color:var(--muted); margin-top:4px; }
.tiers { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tiers button { text-align:left; border:1.5px solid var(--line); border-radius:16px; background:#fff; padding:14px; cursor:pointer; font:inherit; display:flex; flex-direction:column; gap:6px; }
.tiers button span { font-size:13px; color:var(--muted); line-height:1.45; }
.tiers button em { font-style:normal; font-weight:700; color:#c2410c; }
.tiers button.on { border-color:#e8590c; box-shadow:0 0 0 3px #ffd8a8; background:#FFF8F2; }
@media (max-width:600px) { .tiers { grid-template-columns:1fr; } }
.warnt { color:#b45309; }
#trendSec.busy .drop { opacity:.6; pointer-events:none; }

/* ======================= Giao diện 2026 (ui-ux-pro-max: Soft UI · cam FinGMV) ======================= */
/* Bố cục: menu "Mục" bên trái + nội dung */
.vlayout { display:grid; grid-template-columns:248px minmax(0,1fr); gap:24px; align-items:start; margin-top:20px; }
.vmain { min-width:0; }
.vmenu.tabs { display:flex; flex-direction:column; gap:2px; margin:0; padding:10px; background:#18181B; border-radius:var(--r); position:sticky; top:16px; flex-wrap:nowrap; box-shadow:0 8px 24px -12px rgba(24,24,27,.45); }
.vmenu .vmh { color:#A1A1AA; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:8px 12px 10px; }
.vmenu.tabs button { display:flex; align-items:center; gap:10px; width:100%; min-height:48px; border:0; border-radius:10px; background:transparent; color:#E4E4E7; text-align:left; padding:10px 12px; font:500 14.5px/1.3 inherit; font-family:inherit; cursor:pointer; position:relative; transition:background .18s var(--ease), color .18s var(--ease); }
.vmenu.tabs button svg { width:20px; height:20px; flex:0 0 20px; color:#A1A1AA; transition:color .18s var(--ease); }
.vmenu.tabs button i { font-style:normal; font-weight:600; color:#A1A1AA; margin-right:-4px; }
.vmenu.tabs button:hover { background:#27272A; color:#fff; }
.vmenu.tabs button.on { background:#2A2321; color:#fff; }
.vmenu.tabs button.on::before { content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:0 3px 3px 0; background:var(--accent); }
.vmenu.tabs button.on svg, .vmenu.tabs button.on i { color:#FDBA74; }
.vmenu.tabs button.vlib { margin-top:6px; border-top:1px solid #27272A; border-radius:0 0 10px 10px; padding-top:14px; color:#D4D4D8; font-size:13.5px; }
@media (max-width:820px) {
  .vlayout { grid-template-columns:1fr; gap:14px; }
  .vmenu.tabs { position:static; flex-direction:row; flex-wrap:wrap; padding:6px; gap:4px; }
  .vmenu .vmh { display:none; }
  .vmenu.tabs button { flex:1 1 calc(50% - 4px); min-height:44px; font-size:13.5px; padding:8px 10px; }
  .vmenu.tabs button.vlib { margin-top:0; border-top:0; border-radius:10px; padding-top:8px; flex-basis:100%; justify-content:center; }
}
/* Thanh trên */
.top { padding:16px 0; }
.brand { font-weight:700; }
/* Thẻ & tiêu đề */
.card { border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:0 1px 2px rgba(24,24,27,.04), 0 6px 20px -12px rgba(24,24,27,.10); }
.card h2 { font-size:18px; font-weight:700; letter-spacing:-.01em; gap:10px; }
.num { width:28px; height:28px; background:var(--soft); color:var(--primary); font-weight:700; font-size:13px; }
/* Nút: màu đặc, chữ trắng đạt tương phản ≥ 4.5:1 */
.btn { border-radius:12px; font-weight:600; min-height:44px; padding:10px 18px; transition:background .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), transform .12s var(--ease); }
.btn.grad { background:var(--primary); color:#fff; box-shadow:0 1px 2px rgba(154,52,18,.25); }
.btn.grad:hover:not(:disabled) { background:var(--primary-h); }
.btn:active:not(:disabled) { transform:translateY(1px); }
.btn.ghost { background:#fff; border-color:var(--line); }
.btn.ghost:hover:not(:disabled) { border-color:#D6CCC2; background:#FCFAF8; }
.btn.sm { min-height:36px; border-radius:10px; }
.btn.big { min-height:52px; padding:14px 28px; }
.btn:disabled { opacity:.45; }
.pill { background:var(--soft); color:var(--primary-h); font-weight:600; }
/* Ô nhập */
textarea, input[type=text], input:not([type]), select { border-color:var(--line); border-radius:12px; min-height:44px; transition:border-color .18s var(--ease), box-shadow .18s var(--ease); }
textarea:hover, input:not([type=checkbox]):not([type=file]):hover, select:hover { border-color:#D6CCC2; }
textarea:focus, input:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(234,88,12,.18); }
.lbl { font-weight:600; font-size:13.5px; color:var(--ink); }
.hint { color:var(--muted); }
input[type=checkbox] { width:18px; height:18px; accent-color:var(--primary); cursor:pointer; }
/* Nút chọn (segmented) */
.seg { background:#F3EEE8; border-color:transparent; border-radius:12px; padding:4px; gap:2px; }
.seg button { border-radius:9px; min-height:36px; padding:7px 14px; font-weight:500; color:var(--muted); transition:background .18s var(--ease), color .18s var(--ease); }
.seg button:hover { color:var(--ink); }
.seg button.on { background:#fff; color:var(--ink); font-weight:600; box-shadow:0 1px 3px rgba(24,24,27,.12); }
/* Ô kéo thả */
.drop { border:1.5px dashed #DCD2C7; border-radius:14px; background:#FCFAF8; transition:border-color .18s var(--ease), background .18s var(--ease); }
.drop:hover, .drop.over { border-color:var(--accent); background:var(--soft); }
.drop b { font-weight:600; }
/* Thẻ chọn dạng video */
.fcard { background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; transition:border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease); }
.fcard:hover { transform:translateY(-2px); border-color:#F5B58A; box-shadow:0 10px 24px -16px rgba(194,65,12,.45); }
.fcard .fic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:var(--soft); color:var(--primary); }
.fcard .fic svg { width:22px; height:22px; }
.fcard b { font-size:16.5px; font-weight:700; }
.fcard .ftag { color:var(--primary-h); background:var(--soft); font-weight:600; }
.tcard:hover { border-color:#F5B58A; }
.tic { animation:none; }
/* Tiến độ & trạng thái */
.bar { height:8px; background:#EFE9E2; }
.bar i { background:var(--accent); }
.steps li { border-radius:10px; font-weight:500; }
/* Video Trend: thẻ Cơ Bản / Nâng Cao */
.tiers button { border-radius:14px; border:1px solid var(--line); padding:16px; transition:border-color .18s var(--ease), box-shadow .18s var(--ease); }
.tiers button:hover { border-color:#F5B58A; }
.tiers button.on { border-color:var(--accent); box-shadow:0 0 0 3px rgba(234,88,12,.16); background:#FFFAF6; }
.tiers button b { font-size:16px; }
.tiers button em { color:var(--primary); }
.mcard.on { border-color:var(--accent); box-shadow:0 0 0 3px rgba(234,88,12,.18); }
.th.star { box-shadow:0 0 0 3px var(--accent); }
/* Video đã làm */
.hi { border-radius:14px; transition:box-shadow .18s var(--ease), transform .18s var(--ease); }
.hi:hover { transform:translateY(-2px); box-shadow:0 10px 24px -16px rgba(24,24,27,.35); }
/* Bàn phím: vòng focus rõ ràng */
:where(button, a, input, select, textarea, [tabindex]):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.vmenu.tabs button:focus-visible { outline-color:#FDBA74; outline-offset:-2px; }
/* Giảm chuyển động khi hệ điều hành yêu cầu */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.ficon { width:52px; height:52px; border-radius:14px; background:var(--soft); color:var(--primary); font-size:0; }
.ficon svg { width:26px; height:26px; }
.tiers.one { grid-template-columns:1fr; }
.tiers.one button { cursor:default; }
/* Video Trend — AI phân tích */
.aisum { display:grid; gap:8px; margin-bottom:12px; }
.aisum p { margin:0; line-height:1.55; }
.aisum .tag { display:inline-block; font-size:12px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--soft); color:var(--primary-h); margin:2px 4px 2px 0; }
.aisum .warn { color:#92400E; }
.scstrip { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.scc { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#fff; font-size:12.5px; }
.scc img { width:100%; aspect-ratio:9/16; object-fit:cover; display:block; background:#EFE9E2; }
.scc .b { padding:8px 9px; display:grid; gap:4px; line-height:1.4; }
.scc .t { font-weight:700; }
.slot { border-top:1px solid var(--line); padding:14px 0 4px; margin-top:12px; }
.slot .sh { display:flex; flex-wrap:wrap; gap:6px 10px; align-items:baseline; }
.slot .sh b { font-size:14.5px; }
.slot .row { margin-top:8px; }
.lookgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; }
.lk { border:1px solid var(--line); border-radius:14px; padding:12px; background:#fff; display:grid; gap:8px; }
.lk .pair { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lk .pair img, .lk .ph2 { width:100%; aspect-ratio:9/16; object-fit:cover; border-radius:10px; background:#EFE9E2; display:block; }
.lk .ph2 { display:grid; place-items:center; text-align:center; font-size:12px; color:var(--muted); padding:8px; }
.lk .ph2.run { background:linear-gradient(135deg,#3b2f4a,#1c1730); color:#fff; animation:pulse 1.6s ease-in-out infinite; }
.lk .row input { flex:1; min-width:0; }