/* HDS Voice Swap — hệ thiết kế. Mọi màu đi qua biến theo vai; tối là mặc định, sáng là bộ giá trị thứ hai; hai mật độ trên cùng bộ biến. */
:root {
  color-scheme: dark;
  --bg: #090a0f; --surface: #12141c; --raised: #1a1d27; --hover: #222634; --line: #232735; --line-2: #343a4c;
  --text: #f1f3f9; --muted: #9ca5ba; --faint: #808aa2;
  --accent: #7c3aed; --accent-hover: #6d28d9; --on-accent: #fff; --accent-text: #a78bfa; --accent-soft: rgba(124, 58, 237, .18);
  --ok: #34d399; --ok-soft: rgba(16, 185, 129, .14); --warn: #fbbf24; --warn-soft: rgba(245, 158, 11, .14); --bad: #f87171; --bad-soft: rgba(239, 68, 68, .14); --info: #60a5fa; --info-soft: rgba(59, 130, 246, .14);
  --r-s: 6px; --r-m: 8px; --r-l: 12px; --row: 64px; --pad: 24px; --fs: 14px;
  --font: "Be Vietnam Pro", "Noto Sans Thai", "Noto Sans Devanagari", "Noto Sans Bengali", "Noto Sans SC", "Noto Sans TC", "Noto Sans JP", "Noto Sans KR", "Noto Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --shadow: 0 16px 48px rgba(0, 0, 0, .55); --ease: cubic-bezier(.2, .8, .2, 1);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f8fa; --surface: #fff; --raised: #f1f2f5; --hover: #e8eaef; --line: #e3e5ea; --line-2: #cfd3db;
  --text: #09090b; --muted: #52525b; --faint: #6b6b76;
  --accent-text: #6d28d9; --accent-soft: rgba(124, 58, 237, .10);
  --ok: #047857; --ok-soft: rgba(16, 185, 129, .12); --warn: #b45309; --warn-soft: rgba(245, 158, 11, .16); --bad: #b91c1c; --bad-soft: rgba(239, 68, 68, .10); --info: #1d4ed8; --info-soft: rgba(59, 130, 246, .10);
  --shadow: 0 16px 48px rgba(9, 9, 11, .14);
}
:root[data-accent="cyan"] { --accent: #0891b2; --accent-hover: #0e7490; --accent-text: #22d3ee; --accent-soft: rgba(6, 182, 212, .16); }
:root[data-accent="cyan"][data-theme="light"] { --accent-text: #0e7490; --accent-soft: rgba(6, 182, 212, .12); }
[data-density="compact"] { --row: 40px; --pad: 16px; --fs: 13px; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--fs)/1.5 var(--font); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 24px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 600; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-size: .92em; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.grow { flex: 1 1 auto; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: var(--r-s); }
svg { flex: none; }
/* ------------------------------------------------------------ khung */
.shell { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100dvh; }
.side { position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: 2px; padding: 16px 12px; border-inline-end: 1px solid var(--line); background: var(--surface); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; margin-bottom: 14px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.brand .logo { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--accent); color: var(--on-accent); }
.side .cta { margin-bottom: 14px; background: var(--raised); border-color: var(--line-2); color: var(--text); }
.side .cta:hover { border-color: var(--accent-text); }
.side .cta svg { color: var(--accent-text); }
.side .cta.on { border-color: var(--accent-text); }
.nav { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 10px; border-radius: var(--r-s); color: var(--muted); font-weight: 500; white-space: nowrap; transition: background .12s, color .12s; }
.nav:hover { background: var(--hover); color: var(--text); }
.nav.on { background: var(--raised); color: var(--text); }
.nav.on svg { color: var(--accent-text); }
.main { min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 6; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 8px var(--pad); border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); }
.top .title { font-size: 16px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top .back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 14px; white-space: nowrap; }
.top .back:hover { color: var(--text); }
.top .tools { display: flex; gap: 4px; margin-inline-start: auto; }
#topL { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; }
#view { flex: 1 1 auto; padding: var(--pad); outline: none; min-width: 0; }
.page { max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.col { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.lead { color: var(--muted); margin-top: 6px; }
/* ------------------------------------------------------------ nút, nhãn, thẻ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: var(--r-s);
  background: transparent; color: var(--text); font-weight: 500; font-size: 14px; white-space: nowrap; cursor: pointer; transition: background .12s, border-color .12s, opacity .12s; }
.btn:hover { background: var(--raised); }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.pri:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.ghost { border-color: transparent; color: var(--muted); }
.btn.ghost:hover { color: var(--text); }
.btn.danger { color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); border-color: var(--bad); }
.btn.sm { height: 28px; padding: 0 10px; font-size: 13px; }
.btn.lg { height: 44px; padding: 0 20px; font-size: 15px; font-weight: 600; }
.btn.icon { flex: none; width: 36px; padding: 0; }      /* nút biểu tượng không bị chữ dài bên cạnh bóp méo (15/10) */
.btn.sm.icon { width: 28px; }
.btn.wide { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--raised); border-color: var(--line-2); color: var(--faint); cursor: not-allowed; pointer-events: none; }
kbd { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; font: 500 11px var(--mono); color: var(--muted); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 20px; }
.card > h2 { margin-bottom: 12px; }
.badge { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; background: var(--raised); color: var(--muted); }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.bad { background: var(--bad-soft); color: var(--bad); }
.badge.run { background: var(--info-soft); color: var(--info); }
.badge.run::before { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.bar { height: 6px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .4s var(--ease); }
.note { padding: 10px 14px; border-radius: var(--r-s); font-size: 14px; background: var(--raised); color: var(--muted); }
.note.warn { background: var(--warn-soft); color: var(--warn); }
.note.bad { background: var(--bad-soft); color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 35%, transparent); }
.err { color: var(--bad); font-size: 13.5px; }
.err:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 13.5px; font-weight: 500; cursor: pointer; }
.chip:hover { color: var(--text); border-color: var(--line-2); }
.chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.chip b { font: 500 12px var(--mono); opacity: .75; }
.empty { display: grid; justify-items: center; gap: 8px; padding: 56px 20px; text-align: center; color: var(--muted); }
.empty b { color: var(--text); font-size: 16px; }
.empty .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--raised); color: var(--muted); margin-bottom: 4px; }
.skel { border-radius: var(--r-s); background: linear-gradient(90deg, var(--raised) 25%, var(--line) 37%, var(--raised) 63%); background-size: 400% 100%; animation: skel 1.4s ease infinite; }
@keyframes skel { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
/* ------------------------------------------------------------ Dự án */
.rows { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.group { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px; background: var(--raised); border-top: 1px solid var(--line); font-size: 13.5px; }
.group:first-child { border-top: 0; }
.row { display: grid; grid-template-columns: auto minmax(0, 1fr) 240px auto; align-items: center; gap: 16px; min-height: var(--row); padding: 10px 16px; border-top: 1px solid var(--line); transition: background .12s; }
.row:first-child { border-top: 0; }
.row:hover { background: var(--raised); }
.row .name { display: block; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .meta { display: flex; flex-wrap: wrap; gap: 0 10px; color: var(--muted); font-size: 13px; }
.row .meta span + span::before { content: "·"; margin-inline-end: 10px; color: var(--line-2); }
.row .acts { display: flex; gap: 6px; justify-content: flex-end; }
.more { display: flex; justify-content: center; padding: 12px; border-top: 1px solid var(--line); }
/* ------------------------------------------------------------ Đổi nhanh */
.drop { display: grid; justify-items: center; gap: 6px; padding: 36px 20px; border: 1px solid var(--line-2); border-radius: var(--r-l); background: var(--surface); text-align: center; transition: border-color .15s, background .15s; }
.drop.over { border-color: var(--accent-text); background: var(--accent-soft); }
.drop .ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--raised); color: var(--accent-text); margin-bottom: 6px; }
.drop b { font-size: 16px; }
.drop .btn { margin-top: 10px; }
.files { display: flex; flex-direction: column; gap: 6px; }
.file { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 12px; min-height: 44px; padding-block: 4px; padding-inline: 14px 6px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); }
.file .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.file.bad { border-color: var(--bad); }
.step { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.step .n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--raised); color: var(--muted); font: 600 12px var(--mono); }
.voices { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.voice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 60px; padding-block: 8px; padding-inline: 12px 10px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); text-align: start; cursor: pointer; transition: border-color .12s, background .12s; }
.voice:hover { border-color: var(--line-2); }
.voice[aria-pressed="true"] { border-color: var(--accent-text); background: var(--accent-soft); }
.voice .ava { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--raised); color: var(--text); font-weight: 600; }
.voice[aria-pressed="true"] .ava { background: var(--accent); color: var(--on-accent); }
.voice b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.voice small { color: var(--muted); font-size: 12.5px; }
.voice.add { border-style: dashed; color: var(--muted); }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tier { display: grid; align-content: start; gap: 4px; min-height: 76px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); text-align: start; cursor: pointer; transition: background .12s, border-color .12s; }
.tier:hover { border-color: var(--line-2); }
.tier b { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.tier small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.tier[aria-checked="true"] { background: var(--accent-soft); border-color: var(--accent-text); }
.tier .dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-2); }
.tier[aria-checked="true"] .dot { border: 4.5px solid var(--accent-text); }
.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }      /* flex: none — câu dài bóp ô còn 13 px (soát 16/10) */
.actbar { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 12px 16px; margin-top: 4px; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-l) var(--r-l) 0 0;
  background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(12px); }
.actbar .say { flex: 1 1 auto; min-width: 0; }
.actbar .say b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actbar .say span { color: var(--muted); font-size: 13.5px; }
.foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.foot > .btn:is(.pri, .soft, .danger):last-child { margin-inline-start: auto; }        /* nút cuối của hàng tác vụ luôn sát phải, kể cả khi ô lỗi (.err.grow) đang rỗng và bị ẩn */
.play { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--text); color: var(--bg); cursor: pointer; }
.seek { position: relative; flex: 1 1 120px; height: 24px; cursor: pointer; }
.seek .fill { position: absolute; left: 0; top: 9px; height: 6px; border-radius: 999px; }
.seek .fill { background: var(--accent-text); pointer-events: none; }
.seg { display: inline-flex; padding: 3px; border-radius: 8px; background: var(--raised); }
.seg button { height: 28px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.flag { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 12px; border: 1px solid var(--line); border-inline-start: 3px solid var(--warn); border-radius: var(--r-s); background: var(--surface); }
.flag.block { border-inline-start-color: var(--bad); }
.flag .why { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 2px; }
.flag .t { height: 26px; padding: 0 8px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: transparent; cursor: pointer; }
.flag .txt { min-width: 0; }
.flag .acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ver { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; padding: 4px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.ver:first-child { border-top: 0; }
/* ------------------------------------------------------------ Studio */
.studio { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 0; height: calc(100dvh - 57px); margin: calc(var(--pad) * -1); }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; white-space: nowrap; color: var(--muted); }
.tag::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tag.ok { color: var(--ok); } .tag.warn { color: var(--warn); } .tag.bad { color: var(--bad); } .tag.run { color: var(--info); }
.tag.run::before { animation: pulse 1.2s ease-in-out infinite; }
.box { border: 1px solid var(--line); border-radius: var(--r-s); }
.box > .hd { padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); text-transform: none; }
details.box > summary { padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; list-style: none; }
details.box > summary::after { content: "+"; float: right; }
details.box[open] > summary::after { content: "−"; }
details.box dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; padding: 4px 12px 12px; font-size: 13px; }
details.box dd { margin: 0; font-family: var(--mono); }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: center; }
/* ------------------------------------------------------------ Mẫu giọng, Vận hành */
.vgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.vcard { display: flex; flex-direction: column; gap: 10px; }
.vcard .hd { display: flex; align-items: center; gap: 12px; }
.vcard .ava { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.vcard p { color: var(--muted); font-size: 13.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kpi { display: grid; gap: 2px; color: var(--muted); font-size: 13px; }
.kpi b { color: var(--text); font: 600 24px/1.2 var(--mono); }
.tbl { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 8px 12px; text-align: start; border-top: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; white-space: nowrap; border-top: 0; }
td.data { font-family: var(--mono); font-size: 12px; color: var(--muted); word-break: break-word; min-width: 280px; }
/* ------------------------------------------------------------ hộp thoại, dòng báo, biểu mẫu */
dialog { width: min(480px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-l); background: var(--surface); color: var(--text); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(0, 0, 0, .55); backdrop-filter: blur(2px); }
.dlg-h { display: flex; align-items: center; gap: 10px; padding-block: 14px; padding-inline: 20px 16px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 16px; }
.dlg-b { display: flex; flex-direction: column; gap: 12px; padding: 20px; color: var(--muted); }
.dlg-b b { color: var(--text); }
.dlg-f { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--line); }
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--text); }
.form .hint { color: var(--muted); font-weight: 400; font-size: 12.5px; }
input[type="text"], textarea, select { width: 100%; min-height: 36px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--bg); }
textarea { min-height: 84px; resize: vertical; }
input[type="file"] { font-size: 13.5px; color: var(--muted); }
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; transform: translateX(-50%); max-width: min(520px, calc(100vw - 32px)); padding: 10px 16px; border: 1px solid var(--line-2); border-radius: var(--r-m); background: var(--raised); box-shadow: var(--shadow); font-size: 14px; }
.demo { padding: 8px var(--pad); background: var(--warn-soft); color: var(--warn); font-size: 13.5px; text-align: center; }
/* ------------------------------------------------------------ thích nghi màn hình */
@media (max-width: 1279px) {
  .shell { grid-template-columns: 64px minmax(0, 1fr); }
  .side { padding: 16px 10px; align-items: center; }
  .side .lbl, .brand b { display: none; }
  .brand { padding: 0; justify-content: center; }
  .nav { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .side .cta { width: 44px; height: 44px; padding: 0; }
  .studio { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 1023px) {
  .studio { display: block; height: auto; margin: calc(var(--pad) * -1); }
}
@media (max-width: 767px) {
  :root { --pad: 16px; }
  .shell { display: block; }
  .side { position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 20; height: 60px; flex-direction: row; justify-content: space-around; align-items: center; gap: 0; padding: 0 8px env(safe-area-inset-bottom);
    border-inline-end: 0; border-top: 1px solid var(--line); background: var(--bg); }
  .brand, .side .grow { display: none; }
  .side .lbl { display: block; font-size: 11px; font-weight: 500; }
  .nav, .side .cta { flex: 1 1 0; width: auto; height: 52px; flex-direction: column; gap: 2px; margin: 0; min-width: 0; padding-inline: 2px; border: 0; background: transparent; color: var(--muted); }        /* 360px: năm mục ~68px — bỏ lề trong để "Mẫu giọng", "Thuật ngữ" không bị cắt */
  .side .cta svg { color: inherit; }
  .nav.on, .side .cta.on { background: transparent; color: var(--accent-text); }
  #view { padding-bottom: 84px; }
  .row { grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; padding: 12px 16px; }
  .row .acts { grid-column: 1 / -1; }
  .row .acts { justify-content: flex-start; }
  .row .acts .btn { flex: 1 1 auto; }
  .row .meta { flex-wrap: nowrap; overflow: hidden; white-space: nowrap; }
  .row .meta .opt { display: none; }
  kbd { display: none; }
  .top .tools #accentBtn, .top .hide-s { display: none; }
  .col { padding-bottom: 8px; }
  .tiers { grid-template-columns: 1fr; }
  .tier { min-height: 0; }
  .actbar { bottom: 60px; flex-wrap: wrap; }
  .actbar .btn { flex: 1 1 100%; }
  [data-density="compact"] { --row: 48px; }
  .btn { min-height: 44px; }
  .btn.sm { min-height: 40px; }
  .chip { height: 40px; }
  .seg button { height: 36px; }
  .flag .t { height: 36px; }
  .toast { bottom: 76px; }
  .top .title { font-size: 15px; }
  .lang-btn .lc { display: none; }        /* điện thoại: chỉ để quả địa cầu — chừa chỗ cho tên trang (Quản trị bị cắt "Người dù…") */
  h1 { font-size: 21px; }
}
/* ============================================================ BẢN 2 (14/10): theo NGON-NGU-THIET-KE.md
   thanh trên có ngôn ngữ / credit / tài khoản; đăng nhập; bảng dữ liệu; ngăn trượt; trang quản trị; thêm giọng; nạp credit; viết phải sang trái */
.top .tools { align-items: center; gap: 6px; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; white-space: nowrap; cursor: pointer; }
.pill:hover { border-color: var(--line-2); }
.pill .mono { font-weight: 600; }
.pill small { color: var(--muted); font-size: 12px; }
.ava-btn { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line-2); border-radius: 50%; background: var(--raised); font-weight: 600; font-size: 13px; cursor: pointer; }
.menu { position: fixed; z-index: 40; min-width: 240px; max-width: calc(100vw - 16px); max-height: min(70dvh, 520px); overflow-y: auto; padding: 6px; border: 1px solid var(--line-2); border-radius: var(--r-l); background: var(--raised); box-shadow: 0 4px 16px -2px rgba(0, 0, 0, .5); }
.menu .who { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu .who b { display: block; overflow: hidden; text-overflow: ellipsis; }
.menu .who small { color: var(--muted); }
.menu a, .menu button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: var(--r-s); background: transparent; text-align: start; font-size: 14px; cursor: pointer; white-space: nowrap; }
.menu a:hover, .menu button:hover, .menu [aria-current="true"] { background: var(--hover); }
.menu [aria-current="true"] { color: var(--accent-text); font-weight: 600; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
@media (hover: none) { .menu a:hover, .menu button:hover { background: transparent; } }      /* màn cảm ứng: chỗ vừa chạm giữ :hover → hai mục cùng sáng (soát 16/10) */
.banner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 8px var(--pad); font-size: 13px; text-align: center; background: var(--info-soft); color: var(--info); }
.banner.warn { background: var(--warn-soft); color: var(--warn); }
.banner.bad { background: var(--bad-soft); color: var(--bad); }
.banner .btn { height: 28px; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs button { position: relative; height: 40px; padding: 0 12px; border: 0; background: transparent; color: var(--muted); font-weight: 500; white-space: nowrap; cursor: pointer; }
.tabs button:hover { color: var(--text); }
.tabs button[aria-selected="true"] { color: var(--text); }
.tabs button[aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent-text); }
#vtabs .ts { display: none; }
.tabs button b { margin-inline-start: 6px; padding: 1px 6px; border-radius: 999px; background: var(--raised); font: 500 11px var(--mono); color: var(--muted); }
.tabs button b.hot { background: var(--warn-soft); color: var(--warn); }
input[type="password"], input[type="number"], input[type="search"], input[type="email"] { width: 100%; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--bg); }
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus, select:focus, textarea:focus { outline: 2px solid var(--accent-text); outline-offset: -1px; }      /* soát 16/10: ô tích bấm chuột / chạm hiện khung đen — ô tích chỉ viền khi đi bằng phím (:focus-visible) */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.toolbar input[type="search"], .toolbar select { width: auto; min-width: 0; flex: 0 1 220px; min-height: 32px; height: 32px; padding: 0 10px; font-size: 13px; }
.toolbar .btn { height: 32px; }
h1.pt { font-size: 20px; line-height: 28px; }
.phead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.phead p { flex: 1 1 100%; color: var(--muted); font-size: 13px; }
/* đăng nhập */
.login { min-height: 100dvh; display: grid; place-items: center; padding: 24px 16px; }
.login .box { width: min(400px, 100%); display: flex; flex-direction: column; gap: 16px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); }
.login .brand { margin: 0; padding: 0; }
.login .brand, .login .brand b { display: flex; } .login .brand { justify-content: flex-start; }        /* khổ điện thoại ẩn .brand của thanh bên — trang đăng nhập vẫn cần thương hiệu */
.login h1 { font-size: 20px; }
.login .or { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12px; }
.login .or::before, .login .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.login .foot2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.gbtn { gap: 10px; height: 44px; background: #fff; color: #1f1f1f; border-color: #dadce0; font-weight: 600; }
.gbtn:hover { background: #f5f5f5; }
/* bảng dữ liệu */
.grid { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.grid .tbl { overflow-x: auto; }
.grid table { font-size: 13px; }
.grid th { position: sticky; top: 0; height: 36px; padding: 0 12px; background: var(--raised); color: var(--muted); font-size: 12px; font-weight: 500; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid td { height: 44px; padding: 6px 12px; vertical-align: middle; border-top: 1px solid var(--line); }
.grid tbody tr { transition: background .1s; }
.grid tbody tr:hover { background: var(--raised); }
.grid tr[data-open] { cursor: pointer; }
.grid tr[data-open]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.grid td.num, .grid th.num { text-align: end; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid td.acts { text-align: end; white-space: nowrap; }
.grid td.acts .btn { height: 28px; padding: 0 8px; font-size: 12px; margin-inline-start: 4px; }
.grid td .sub { display: block; color: var(--muted); font-size: 12px; }
.grid td.clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid td.wrap { min-width: 200px; white-space: normal; color: var(--muted); }
.grid .foot3 { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.id { font-family: var(--mono); font-size: 12px; color: var(--muted); cursor: copy; }
.plus { color: var(--ok); } .minus { color: var(--bad); }
.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpi { padding: 14px 16px; gap: 4px; font-size: 12px; }
.kpi b { font: 600 28px/36px var(--mono); letter-spacing: -.02em; }
.kpi .trend { font: 500 12px var(--mono); }
.kpi .trend.up { color: var(--ok); } .kpi .trend.down { color: var(--bad); }
.alerts { display: grid; gap: 8px; }
.alert { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); font-size: 13px; }      /* bỏ viền trái 3 px: ghép góc bo thành mép cong "móc câu" (soát 16/10) — mức độ nhận bằng nền + chấm ! */
.alert.warn { border-color: color-mix(in srgb, var(--warn) 35%, var(--line)); } .alert.bad { border-color: color-mix(in srgb, var(--bad) 35%, var(--line)); }
.chart { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: end; gap: 6px; height: 140px; padding-top: 8px; }
.chart .c { display: grid; grid-template-rows: 1fr auto; gap: 6px; height: 100%; min-width: 0; text-align: center; font: 500 10px var(--mono); color: var(--faint); }
.chart .c i { align-self: end; display: block; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--accent-text); opacity: .85; }
.chart .c:hover i { opacity: 1; }
.two-col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.gem-br { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; }      /* Quản trị → Máy xử lý: từng cầu Gemini (16/10) */
.gem-br small { flex-basis: 100%; }
.flcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; margin-top: 16px; }      /* Quản trị → Máy xử lý: thẻ Salad / tự thuê / xếp hàng / nhật ký (16/10) */
.fields label, .field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 500; }
.fields label.check, .form label.check { flex-direction: row; align-items: center; font-weight: 400; }      /* ô tích trong khung trường: cùng hàng với chữ (15/10: .fields label dựng dọc) */
.fields small, .field small { color: var(--muted); font-weight: 400; font-size: 12px; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.switch:first-of-type { border-top: 0; }
.switch input { appearance: none; width: 36px; height: 20px; border-radius: 999px; background: var(--line-2); position: relative; cursor: pointer; flex: none; transition: background .15s; }
.switch input::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s var(--ease); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { transform: translateX(16px); }
[dir="rtl"] .switch input:checked::after { transform: translateX(-16px); }
.matrix th.role { writing-mode: vertical-rl; transform: rotate(180deg); height: 120px; padding: 8px 4px; text-align: start; }
.matrix td.c { text-align: center; width: 44px; }
.matrix td.c input { width: 16px; height: 16px; accent-color: var(--accent); }
.matrix tr.grp td { background: var(--raised); color: var(--muted); font-size: 12px; font-weight: 600; height: 30px; }
.diff { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.diff pre { margin: 0; padding: 10px; border-radius: var(--r-s); background: var(--bg); border: 1px solid var(--line); font: 12px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow: auto; }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; font-size: 13px; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* ngăn trượt phải */
.drawer-bg { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .5); }
.drawer { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 31; width: min(640px, 100vw); display: flex; flex-direction: column; background: var(--surface); border-inline-start: 1px solid var(--line-2); box-shadow: 0 24px 48px -12px rgba(0, 0, 0, .8); }
.drawer .dlg-b { flex: 1 1 auto; overflow-y: auto; color: var(--text); gap: 16px; }
.drawer h3 { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 8px; }
/* khung quản trị */
.nav-more { display: none; }
.side .grp { margin: 14px 10px 4px; font-size: 11px; font-weight: 500; color: var(--faint); white-space: nowrap; }
.side .nav b.n { margin-inline-start: auto; padding: 1px 6px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font: 500 11px var(--mono); }
#navs { display: contents; }
@media (min-width: 768px) { .adm .nav { height: 34px; font-size: 13px; } }
.wiz .seg { align-self: flex-start; }
.kill { display: flex; gap: 6px; }
.kill .btn { height: 28px; padding: 0 10px; font-size: 12px; color: var(--muted); }
.kill .btn[aria-pressed="true"] { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); animation: pulse 1.6s ease-in-out infinite; }
/* thêm giọng */
.wiz { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.wiz .card { display: flex; flex-direction: column; gap: 14px; }
.wiz .card.off { opacity: .5; pointer-events: none; }
.tips { display: grid; gap: 4px; margin: 0; padding-block: 0; padding-inline: 18px 0; color: var(--muted); font-size: 13px; }
.srcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.design .dg { display: grid; gap: 6px; margin-bottom: 12px; }
.design .dg > .muted { font-size: 13px; }
.srcs .btn { height: 64px; flex-direction: column; gap: 4px; border-radius: var(--r-l); }      /* 16/10: ô bo góc như ba ô nguồn ở Mẫu giọng (điện thoại), không viên thuốc */
.srcs .btn[aria-pressed="true"], .srcs .btn[aria-pressed="true"]:disabled { border-color: var(--accent-text); background: var(--accent-soft); color: var(--text); }      /* đang chọn rõ cả lúc khoá vì đang tải (trước: kiểu khoá đè, chữ tối trên nền tối) */
.wave.wload { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 13px; }
.wave { position: relative; height: 96px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--bg); overflow: hidden; touch-action: none; direction: ltr; }
.wave canvas { display: block; width: 100%; height: 100%; }
.wave .sel { position: absolute; top: 0; bottom: 0; background: var(--accent-soft); border-inline: 2px solid var(--accent-text); cursor: grab; }
.wave .h { position: absolute; top: 0; bottom: 0; width: 22px; cursor: ew-resize; }
.wave .h.a { left: -12px; } .wave .h.b { right: -12px; }
.wave .h::after { content: ""; position: absolute; top: 50%; left: 8px; width: 6px; height: 28px; margin-top: -14px; border-radius: 3px; background: var(--accent-text); }
.wave .pos { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text); pointer-events: none; }
.wavebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; direction: ltr; }
.rec { display: grid; justify-items: center; gap: 12px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--bg); text-align: center; }
.rec .read { max-width: 56ch; font-size: 16px; line-height: 1.6; color: var(--text); }
.rec .big { font: 600 32px/40px var(--mono); }
.vu { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; width: min(360px, 100%); height: 10px; direction: ltr; }
.vu i { border-radius: 2px; background: var(--raised); }
.vu i.on { background: var(--ok); } .vu i.on.hi { background: var(--warn); } .vu i.on.peak { background: var(--bad); }
.checks { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-s); }
.checks > div { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 40px; padding: 6px 12px; border-top: 1px solid var(--line); font-size: 13px; }
.checks > div:first-child { border-top: 0; }
.checks .dot2 { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); justify-self: center; }
.checks .warn .dot2 { background: var(--warn); } .checks .bad .dot2 { background: var(--bad); }
.checks small { display: block; color: var(--muted); }
.checks .bad small { color: var(--bad); } .checks .warn small { color: var(--warn); }
.vcard .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.chip2 { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-s); background: var(--raised); color: var(--muted); font-size: 11px; font-weight: 500; white-space: nowrap; }
.chip2.acc { background: var(--accent-soft); color: var(--accent-text); } .chip2.warn { background: var(--warn-soft); color: var(--warn); }
.vcard .ft { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; }
.vcard .stat2 { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
/* credit và nạp */
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.pack { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); text-align: start; cursor: pointer; }
.pack:hover { border-color: var(--line-2); }
.pack[aria-pressed="true"] { border-color: var(--accent-text); background: var(--accent-soft); }
.pack b { font: 600 24px/32px var(--mono); }
.pack small { color: var(--muted); font-size: 12px; }
.payqr { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.qr { display: grid; place-items: center; width: 240px; height: 240px; padding: 12px; border-radius: var(--r-m); background: #fff; color: #111; }
.qr svg { width: 100%; height: 100%; }
.cost { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 13px; color: var(--muted); }
.cost b { font: 600 14px var(--mono); color: var(--text); }
.cost.bad b { color: var(--bad); }
@media (max-width: 1279px) {
  .side .grp { display: none; }
  .side .nav b.n { position: absolute; margin-block: -22px 0; margin-inline: 22px 0; }
  .kill .btn span { display: none; }
}
@media (max-width: 1279px) { .grid .h-m { display: none; } }
@media (max-width: 1023px) {
  .two-col, .payqr { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .pill small, .pill .lbl { display: none; }
  .pill { padding: 0 10px; }
  .grid .h-s { display: none; }
  .grid td { height: 52px; }
  .grid td.acts .btn { height: 36px; min-height: 36px; }
  .srcs { grid-template-columns: 1fr; }
  .srcs .btn { height: 52px; flex-direction: row; }
  .drawer { width: 100vw; }
  .diff { grid-template-columns: 1fr; }
  .adm .side > .nav, .adm .side .nav.x { display: none; }      /* 4 mục đầu + Thêm (soát 16/10) — Về ứng dụng ở trong Thêm */
  .adm .side .nav-more { display: flex; }
  .adm .nav .lbl { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top .kill .sw { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
  .toolbar input[type="search"] { flex: 1 1 100%; }
  .ava-btn { width: 40px; height: 40px; }
  .kpi b { font-size: 22px; line-height: 30px; }
  .qr { margin: 0 auto; }
  .login .box { padding: 20px; }
  .menu { inset-inline: 8px !important; top: auto !important; bottom: 68px; }
}
/* viết phải sang trái: khung lật theo dir; trình phát, dạng sóng, số giữ trái sang phải */
[dir="rtl"] .seek, [dir="rtl"] .mono, [dir="rtl"] .chart { direction: ltr; }
/* ngày giờ tiếng Ả Rập nằm trong ô chữ đơn cách: để trình duyệt tự xét chiều theo nội dung, nếu không ngày bị xếp ngược (lượt j25) */
[dir="rtl"] .mono { unicode-bidi: plaintext; }
[dir="rtl"] .vthumb .mono { direction: rtl; }      /* nhãn nổi trên ảnh: inset-inline-end tính theo chiều của chính nó — giữ rtl để "VI" / thời lượng sang mép trái, không chồng nhãn trạng thái (15/10) */
[dir="rtl"] .back svg { transform: scaleX(-1); }
/* ---- sau lượt soát 1 */
.btn.soft { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); font-weight: 600; }
.btn.soft:hover { background: color-mix(in srgb, var(--accent) 28%, transparent); }
.btn[aria-disabled="true"].icon, .btn.icon:disabled { background: transparent; border-color: var(--line); color: var(--line-2); }
.grid th.num { font-family: var(--font); }
.id { color: var(--muted); }
.alert.warn { background: var(--warn-soft); } .alert.bad { background: var(--bad-soft); }
.vcard .tags:empty { display: none; }        /* không có nhãn: không để một hàng trống giữa tên và lời mẫu */
.vcard.add { align-items: center; justify-content: center; min-height: 170px; border-style: dashed; color: var(--muted); text-align: center; cursor: pointer; }
.vcard.add:hover { border-color: var(--accent-text); color: var(--text); }
.vcard.add .ava { background: var(--raised); color: var(--muted); }
.pack b { display: flex; align-items: center; gap: 10px; }
.pack .dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line-2); flex: none; }
.pack[aria-pressed="true"] .dot { border: 4.5px solid var(--accent-text); }
.kpi b.txt { font: 600 clamp(16px, 4.6vw, 20px)/36px var(--font); letter-spacing: 0; white-space: nowrap; }        /* ngày ngắn (dd/mm/yy) phải đọc trọn, không cắt "16/10/…" ở khổ 320 */
.flag { grid-template-columns: minmax(0, 1fr); }
.flag .acts { grid-column: 1; }
.flag .why .t { height: 24px; }
.sw { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding-block: 0; padding-inline: 8px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 12px; font-weight: 500; white-space: nowrap; cursor: pointer; }
.sw::before { content: ""; width: 22px; height: 12px; border-radius: 999px; background: var(--ok); box-shadow: inset 10px 0 0 0 var(--ok), inset 0 0 0 2px var(--ok); background-image: radial-gradient(circle at 16px 6px, #fff 4px, transparent 4.5px); }
.sw[aria-pressed="true"] { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }
.sw[aria-pressed="true"]::before { background-color: var(--bad); background-image: radial-gradient(circle at 6px 6px, #fff 4px, transparent 4.5px); box-shadow: none; }
.sw:hover { border-color: var(--line-2); color: var(--text); }
.wiz { max-width: 960px; }
.wiz .card.off { opacity: .62; }
.chart .c span { display: block; }
@media (max-width: 767px) {
  .top .back span { display: none; }
  .top .back { padding: 8px 4px; }
  .row { grid-template-columns: auto minmax(0, 1fr) auto; cursor: pointer; }
  .row .acts { grid-column: 3; grid-row: 1; }
  .row .acts .btn { flex: 0 0 auto; }
  .row .acts .btn.open { display: none; }
  .chart .c:nth-child(even) span { visibility: hidden; }
  .toolbar select { flex: 1 1 130px; }
  .toolbar .btn { flex: 1 1 auto; }
  .wave { height: 80px; }
  .flag .why .t { height: 36px; }
  .sw { height: 40px; }
  .group { flex-wrap: wrap; }
  .group .btn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}
/* ---- sau lượt soát 2 */
.kpi b, .pack b, .pill .mono { font-family: var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.toolbar input[type="search"] { flex: 0 1 320px; }
@media (max-width: 767px) { .toolbar input[type="search"] { flex: 1 1 100%; } }        /* luật trên đè luật điện thoại ở dòng trước — ô tìm Quản trị không giãn hết hàng */
.drawer .grid .empty { padding: 14px 16px; } .drawer .grid .empty b { font-size: 14px; font-weight: 500; color: var(--muted); }        /* ngăn chi tiết: ô trống gọn, không phải khối chữ đậm to */
.alert { padding: 8px 12px; }
.alert::before { content: "!"; display: grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--info-soft); color: var(--info); font: 600 12px var(--mono); }
.alert.warn::before { background: var(--warn); color: #1a1205; } .alert.bad::before { background: var(--bad); color: #1f0707; }
.grid .empty { padding: 48px 16px; }
h2.sec { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; font-size: 14px; color: var(--muted); font-weight: 600; }
.new { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; max-width: 1080px; margin: 0 auto; align-items: start; }
.new .col { margin: 0; max-width: none; }
.new-side { position: sticky; top: 76px; }
.new-side .actbar { position: static; flex-direction: column; align-items: stretch; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); backdrop-filter: none; }
.new-side .actbar .say b { white-space: normal; font-size: 16px; }
.new-side .actbar .cost { margin-top: 8px; }
.wiz .card.off { opacity: 1; }
.wiz .card.off > :not(.step) { display: none; }
.wiz .card.off .step { margin: 0; color: var(--muted); }
.wiz .card.off .step::after { content: attr(data-wait); margin-inline-start: auto; font-size: 12px; font-weight: 400; color: var(--faint); }
@media (max-width: 1023px) {
  .new { display: block; }
  .new-side { position: sticky; top: auto; bottom: 0; z-index: 4; margin-top: 16px; }
  .new-side .actbar { flex-direction: row; align-items: center; padding: 12px 16px; border-bottom: 0; border-radius: var(--r-l) var(--r-l) 0 0; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(12px); }
  .new-side .actbar .say b { font-size: 14px; white-space: nowrap; }
}
@media (max-width: 767px) {
  .new-side { bottom: 60px; }
  .new-side .actbar { flex-wrap: wrap; }
  .top .hide-s { display: none; }
}
@media (max-width: 1023px) {        /* 15/10: khổ máy tính bảng (820) bảng bị bóp — cột ngày bẻ 5 dòng, cột thao tác bị cắt — nên cũng thành thẻ như điện thoại */
  /* bảng thành thẻ: mỗi dòng một khối, mỗi ô có nhãn cột đứng trên */
  .grid thead { display: none; }
  .grid table, .grid tbody { display: block; }
  .grid tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; padding: 12px; border-top: 1px solid var(--line); }
  .grid tbody tr:first-child { border-top: 0; }
  .grid td, .grid td.num { display: block; height: auto; padding: 0; border: 0; text-align: start; min-width: 0; }
  .grid td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 2px; font: 500 11px/14px var(--font); color: var(--faint); }
  .grid td:first-child, .grid td.acts, .grid td.wrap, .grid td[colspan] { grid-column: 1 / -1; }
  .grid td.acts { display: flex; flex-wrap: wrap; gap: 8px; }
  .grid td.acts .btn { margin: 0; flex: 1 1 auto; }
  .grid td.acts:empty, .grid td:empty { display: none; }
  .grid .h-s, .grid .h-m { display: block; }
  .grid td.clip { max-width: none; white-space: normal; }
  .matrix tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .matrix td.c { width: auto; text-align: start; }
}
@media (min-width: 768px) and (max-width: 1023px) { .grid tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid .empty { padding: 72px 16px; }
::placeholder { color: var(--faint); opacity: 1; }
@media (max-width: 767px) {
  .flag .acts .btn { flex: 1 1 calc(50% - 6px); }
  .flag .acts .btn.ghost, .toolbar .btn.ghost { border-color: var(--line); }
  .grid td[data-l]::before { color: var(--muted); }
  .fields.nrow { grid-template-columns: 1fr !important; }
  .grid .empty { padding: 40px 16px; }
}
/* ---- sau các lượt Gemini tự tay dùng */
.spin { display: inline-block; width: 12px; height: 12px; margin-inline-end: 6px; border: 2px solid var(--line-2); border-top-color: var(--accent-text); border-radius: 50%; vertical-align: -1px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.row { grid-template-columns: auto minmax(0, 1fr) minmax(240px, auto) auto; }
.new-side .actbar .check { font-size: 13px; color: var(--muted); }
.actbar .say b { white-space: normal; }
.flag .txt, .row .name, .grid td.wrap, .grid td.clip, .vcard p, .file .name { unicode-bidi: plaintext; }
@media (max-width: 1023px) {
  .new-side .actbar { flex-wrap: wrap; }
  .new-side .actbar .check { flex: 1 1 100%; order: -1; }
}
@media (max-width: 767px) {
  html { scroll-padding-bottom: 84px; }
  .side .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; }
  .nav, .side .cta { min-width: 0; }
  .row { grid-template-columns: auto minmax(0, 1fr) auto; }
}
/* ---- sau lượt soát 11–16 */
.vname { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.3; }
dialog { max-height: calc(100dvh - 32px); }
dialog[open] { display: flex; flex-direction: column; animation: dlg-in .2s cubic-bezier(.22, 1, .36, 1); }
dialog[open]::backdrop { animation: fade-in .2s ease-out; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes fade-in { from { opacity: 0; } }
dialog .dlg-b { overflow-y: auto; min-height: 0; }
dialog .dlg-h, dialog .dlg-f { flex: none; }
.srcs.has { display: none; }
.tabs { padding-inline-end: 12px; }
@media (max-width: 767px) {
  .drawer .dlg-f .btn, dialog .dlg-f .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
/* tên giọng do người dùng đặt (thường là chữ trái-sang-phải) trong giao diện phải-sang-trái: cắt ở CUỐI tên, không cắt mất chữ đầu (lượt j25) */
.voice b { unicode-bidi: plaintext; }
[dir="rtl"] .voice b { text-align: right; }
/* ô chữ đơn cách dạng khối (số tài khoản, ngày giờ, tên tệp) trong giao diện phải-sang-trái: vẫn nằm sát mép phải như các ô chữ khác */
[dir="rtl"] dd.mono, [dir="rtl"] td.mono:not(.num) { text-align: right; }
/* nhãn cảnh báo dài (bản dịch có khi gấp đôi tiếng Việt): cho xuống dòng thay vì tràn khỏi thẻ trên màn hẹp */
.chip2.wrap { white-space: normal; height: auto; min-height: 22px; padding: 2px 8px; }
.diff small { display: block; margin-bottom: 4px; font-size: 12px; }
/* tên giọng dài ở thẻ chọn giọng: xuống tối đa hai dòng thay vì cắt còn "(nghiệm…" (lượt j32) */
.voice b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.3; overflow-wrap: anywhere; }
/* điện thoại, quản trị: thanh mục cuộn ngang có hai mép mờ để thấy còn mục ở phía trước / phía sau */
@media (max-width: 767px) {
  .adm .side { -webkit-mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(to right, transparent, #000 18px, #000 calc(100% - 18px), transparent); }
}
/* điện thoại, Thêm giọng: lời "Mở sau khi…" của bước chưa mở nằm DƯỚI tiêu đề bước, không chen ngang làm tiêu đề gãy dòng */
@media (max-width: 767px) {
  .wiz .card.off .step { flex-wrap: wrap; }
  .wiz .card.off .step h2 { flex: 1 1 0; min-width: 0; }
  .wiz .card.off .step::after { flex: 1 1 100%; margin-inline-start: 32px; }
}
/* điện thoại hẹp, trình phát ở Thành phẩm / Cần duyệt: cụm Giọng mới / Tiếng gốc không đủ chỗ cùng hàng với nút phát, cho nó một hàng trọn chiều ngang, hai nửa bằng nhau, dễ chạm */
/* ====================================================================================================================
   BẢN 3 · "LÊN SÓNG" (duyệt 14/10/2026, canvas https://claude.ai/artifact/Rmv9njnuKcCR29fehztTiS, kết luận docs/studio/ban-giao-dien-3/KET-LUAN.md)
   Sáng trước, trung tính ấm. Nút chính màu MỰC. Một màu tín hiệu cam (--live) CHỈ cho thứ đang sống: đang xử lý, đang phát, đầu đọc, cờ "nên xem".
   Khối này đặt cuối tệp để đè lên bộ giá trị cũ; các luật bố cục ở trên giữ nguyên.
   ==================================================================================================================== */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF; --surface: #F6F5F1; --raised: #ECEAE4; --hover: #E4E2DB; --line: #E6E4DD; --line-2: #D9D6CC;      /* 15/10 (chủ sản phẩm): đảo nền ↔ thẻ — nền trắng, thẻ giấy ấm; ô chọn / chip / rê chuột đậm một nấc để tách khỏi thẻ */
  --text: #141412; --muted: #56554F; --faint: #6B6A64;
  --accent: #141412; --accent-hover: #2B2A26; --on-accent: #FFFFFF; --accent-text: #141412; --accent-soft: rgba(20, 20, 18, .06);
  --live: #FF5A1F; --live-soft: #FFE9DF; --live-ink: #9A3208; --stage: #0B0B0A; --on-stage: #F3F2EE;
  --ok: #17794A; --ok-soft: #DDF2E6; --warn: #9A3208; --warn-soft: #FFE9DF; --bad: #A3183D; --bad-soft: #FBDDE5; --info: #2B2A26; --info-soft: #ECEBE6;
  --r-s: 10px; --r-m: 12px; --r-l: 16px; --row: 64px; --pad: 28px; --fs: 15px;
  --font: "Onest", system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif; --display: "Bricolage Grotesque", "Onest", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --shadow: 0 18px 48px rgba(20, 20, 18, .16), 0 0 0 1px var(--line);
}
:root[data-theme="dark"] {
  color-scheme: dark;      /* 15/10: ô chọn / thanh cuộn của trình duyệt theo giao diện tối (trước nền trắng chữ trắng ở Sắp xếp) */
  color-scheme: dark;
  --bg: #0F0F0E; --surface: #1A1A18; --raised: #23231F; --hover: #2A2A27; --line: #2A2A27; --line-2: #3A3935;
  --text: #F3F2EE; --muted: #B9B7AE; --faint: #9A988F;
  --accent: #F3F2EE; --accent-hover: #FFFFFF; --on-accent: #141412; --accent-text: #F3F2EE; --accent-soft: rgba(243, 242, 238, .08);
  --live: #FF5A1F; --live-soft: #3A2016; --live-ink: #FFB199; --stage: #0B0B0A; --on-stage: #F3F2EE;
  --ok: #7FD6A2; --ok-soft: #183223; --warn: #FFB199; --warn-soft: #3A2016; --bad: #FF8FA8; --bad-soft: #3D1622; --info: #D9D6CC; --info-soft: #2A2A27;
  --shadow: 0 18px 48px rgba(0, 0, 0, .6), 0 0 0 1px var(--line-2);
}
[data-density="compact"] { --row: 44px; --pad: 18px; --fs: 14px; }
body.in-studio { background: var(--bg); color: var(--text); }
h1 { font-family: var(--display); font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: -.03em; }
h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):focus, select:focus, textarea:focus { outline: 2px solid var(--text); outline-offset: -1px; }
kbd { min-width: 22px; height: 20px; padding: 0 6px; border: 0; border-radius: 5px; background: var(--raised); color: var(--muted); font: 500 11px var(--mono); }
/* nút: dạng viên thuốc; nút chính màu mực */
.btn { height: 40px; padding: 0 16px; border-radius: 999px; border-color: var(--line-2); }
.btn:hover { background: var(--raised); }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.pri:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.soft { background: var(--raised); border-color: transparent; color: var(--text); }
.btn.soft:hover { background: var(--hover); }
.btn.sm { height: 32px; padding: 0 12px; }
.btn.lg { height: 48px; padding: 0 24px; }
.btn.icon { width: 40px; }
.btn.sm.icon { width: 32px; }
.btn kbd { background: color-mix(in srgb, currentColor 14%, transparent); color: inherit; }
/* thẻ: không viền, nổi nhờ mặt trắng trên nền ngà */
.card { border: 0; border-radius: var(--r-l); padding: 22px 24px; }
.badge { height: 24px; border-radius: 6px; font-weight: 600; }
.badge.run { background: var(--live); color: #141412; }
.badge.warn { background: var(--live-soft); color: var(--live-ink); }
.badge.warn::before { background: var(--live); }
.chip { height: 36px; padding: 0 14px; border-color: transparent; background: var(--surface); color: var(--text); }
.chip:hover { border-color: var(--line-2); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.bar i, .seek .fill { background: var(--live); }
.spin { border-top-color: var(--live); }
.note { border-radius: var(--r-s); }
.note.warn { background: var(--live-soft); color: var(--live-ink); }
/* khung ứng dụng: thanh bên cùng màu nền, mục đang mở là mặt trắng */
.shell { grid-template-columns: 248px minmax(0, 1fr); }
@media (max-width: 1279px) { .shell { grid-template-columns: 64px minmax(0, 1fr); } }        /* 15/10: luật 248px ở trên đè luật thu thanh bên (đặt sớm hơn trong tệp) — khổ 768–1279 thanh bên chỉ còn biểu tượng mà vẫn chiếm 248px, nội dung bị bóp */
@media (max-width: 1023px) { .ptools { flex-wrap: wrap; } }        /* hàng lọc không bị bóp còn 118px rồi dựng đứng từng nút: các nút khác xuống dòng */
.side { gap: 2px; padding: 20px 14px; border-inline-end: 0; background: var(--bg); }
.brand { height: 40px; margin-bottom: 16px; font-family: var(--display); font-size: 18px; font-weight: 700; }
.brand .logo { width: 30px; height: 30px; border-radius: 9px; background: #141412; color: #F6F5F1; }
:root[data-theme="dark"] .brand .logo { background: #F3F2EE; color: #141412; }
.side .cta { height: 46px; margin-bottom: 16px; border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.side .cta:hover { background: var(--accent-hover); }
.side .cta svg { color: inherit; }
.nav { height: 44px; padding: 0 12px; border-radius: 10px; color: var(--muted); }
.nav:hover { background: var(--hover); }
.nav.on { background: var(--surface); color: var(--text); }
.nav.on svg { color: var(--text); }
.top { min-height: 64px; border-bottom: 0; background: color-mix(in srgb, var(--bg) 90%, transparent); }
.top .title { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.menu, dialog { border-radius: var(--r-l); }
.tabs button[aria-selected="true"]::after { background: var(--text); }
.chart .c i { background: var(--text); }
/* ====================================================================================================================
   BẢN 3 · KHUNG VÀ STUDIO (14/10/2026). Viên credit là MỘT chỗ duy nhất; khối tài khoản ở chân thanh bên; Studio là một CHẾ ĐỘ riêng (body.in-studio):
   nền tối cả khi ứng dụng đang sáng, thanh bên ẩn, có thanh trên riêng và thanh chức năng ở đáy.
   ==================================================================================================================== */
button.pill { font: inherit; font-size: 13px; }
.pill { height: 36px; border-color: transparent; background: var(--surface); }
.pill:hover { border-color: var(--line-2); }
.pill svg { color: var(--muted); }
.cred-pop { display: grid; gap: 2px; padding: 10px 10px 12px; }
.cred-pop small, .cred-pop span { color: var(--muted); font-size: 13px; white-space: normal; }
.cred-pop span:empty { display: none; }
.cred-pop b { font: 700 32px/1.1 var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.menu a.btn { justify-content: center; margin: 2px 0 4px; }
.menu a.btn.pri, .menu a.btn.pri:hover { background: var(--accent); color: var(--on-accent); }
.menu { max-width: min(320px, calc(100vw - 16px)); background: var(--surface); }
.side .acct { height: 56px; gap: 10px; margin-top: 6px; color: var(--text); }
.acct .ava, .acc-id .ava { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--text); color: var(--bg); font-weight: 600; font-size: 14px; }
.acct .lbl.wide { display: grid; min-width: 0; line-height: 1.25; }
.acct .lbl.wide b, .acct .lbl.wide small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct .lbl.wide b { font-weight: 600; font-size: 14px; }
.acct .lbl.wide small { color: var(--muted); font-size: 12px; }
.acct .lbl.narrow { display: none; }
@media (max-width: 1279px) { .side .acct { justify-content: center; padding: 0; } .acct .lbl.wide { display: none; } }
@media (max-width: 767px) {
  .side { height: 60px; padding: 0 8px env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: var(--surface); }
  .side .cta, .side .acct { height: 52px; margin: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 500; }
  .side .cta:hover { background: transparent; }
  .nav.on, .side .cta.on { background: transparent; color: var(--text); }
  .side .nav[data-nav="projects"] { order: -1; }
  .side .acct { order: 9; padding: 0; }
  .acct .lbl.narrow { display: block; }
  .acct .ava { width: 22px; height: 22px; font-size: 11px; background: var(--muted); }
  .acct.on .ava { background: var(--text); }
  #navAdmin { display: none; }
}
/* trang Tài khoản */
.acc-id { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.acc-id .ava { width: 52px; height: 52px; font: 700 22px var(--display); }
.acc-id div { display: grid; min-width: 0; }
.acc-id b { font: 700 20px/1.2 var(--display); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; }
.acc .phead { margin-bottom: 14px; }
.acc .kv { font-size: 14px; gap: 10px 24px; }
.acc-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.acc-row:first-of-type { border-top: 0; padding-top: 0; }
.acc .switch small { font-weight: 400; }
/* ---------------------------------------------------------------- Studio */
body.in-studio { overflow: hidden; }
body.in-studio .shell { display: block; }
body.in-studio .side, body.in-studio .main > .top { display: none; }
body.in-studio .main { height: 100dvh; }
body.in-studio #view { flex: 1 1 0; min-height: 0; padding: 0; }
.s3 { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; background: var(--bg); color: var(--text); }
.s3 .grow { flex: 1 1 0; }
.s3 .btn { border-color: var(--line-2); white-space: nowrap; }
.s3 .btn[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.s3 .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.s3-top { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.s3-brand { font: 700 16px var(--display); letter-spacing: -.01em; }
.s3-sep { color: var(--faint); }
.s3-title { min-width: 96px; flex: 0 1 auto; font: 600 15px var(--font); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s3-top .muted { flex: 0 99 auto; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.s3-acts { display: flex; gap: 8px; }
.s3-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 30vw); min-height: 0; }
.s3-body > .empty { grid-column: 1 / -1; align-self: center; }
.s3-left { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 12px; padding: 16px; min-width: 0; min-height: 0; }
.s3-stage { position: relative; display: grid; place-items: center; min-height: 0; border-radius: var(--r-l); background: var(--stage); overflow: hidden; color: var(--on-stage); }        /* mọi chữ đè lên video ăn chữ sáng (15/10: "Máy đang làm đoạn 1" đen trên đen ở giao diện sáng) */
.s3-stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; cursor: pointer; }      /* tuyệt đối: video dọc (9:16) không tự cao theo tỷ lệ rồi bị cắt */
.s3-audio { position: absolute; color: #9A988F; }        /* chữ xám trên nền video tối: --muted của giao diện sáng chỉ ~3:1 */
.s3-ab { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); background: rgba(20, 20, 18, .78); backdrop-filter: blur(8px); border-radius: 999px; }
.s3-ab button { display: inline-flex; align-items: center; gap: 8px; height: 34px; border-radius: 999px; color: var(--muted); }
.s3-ab button[aria-pressed="true"] { background: var(--text); color: var(--bg); box-shadow: none; }
.s3-ab button:disabled { opacity: .4; cursor: not-allowed; }
.s3-live { position: absolute; top: 12px; inset-inline-start: 12px; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; background: rgba(20, 20, 18, .78); font-size: 13px; }
.s3-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: s3-pulse 1.2s ease-in-out infinite; }
@keyframes s3-pulse { 50% { opacity: .35; } }
.s3-tl { display: grid; gap: 10px; padding: 12px 14px; border-radius: var(--r-l); background: var(--surface); min-width: 0; }
.s3-mini { display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--faint); }
.s3-mini:empty { display: none; }
.s3-mini .m { position: relative; flex: 1; height: 22px; min-width: 0; cursor: pointer; }
/* kiểu thanh chương của YouTube: vạch mảnh, khe 2 px giữa các đoạn; phần chưa phát nhạt, đã phát đậm; rê chuột thì vạch dày lên */
.s3-mini button:not(.btn) { position: absolute; top: 0; bottom: 0; min-width: 2px; padding: 0; border: 0; background: none; cursor: pointer; --k: var(--text); }
.s3-mini button:not(.btn)::before, .s3-mini button em { content: ""; position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 1px; background: var(--k); transition: height .12s, margin .12s; }
.s3-mini button:not(.btn)::before { right: 0; opacity: .28; }
.s3-mini button em { width: 0; }
.s3-mini .m:hover button::before, .s3-mini .m:hover button em { height: 6px; margin-top: -3px; }
.s3-mini .m button:hover::before, .s3-mini .m button:hover em { height: 8px; margin-top: -4px; }
.s3-mini button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 2px; }
.s3-mini button.k-flag, .s3-mini button.k-live { --k: var(--live); }
.s3-mini button.k-block { --k: var(--bad); }
.s3-mini button.k-wait { --k: var(--faint); }
.s3-mini button.k-orig { --k: var(--faint); }
/* 16/10 (ảnh chủ sản phẩm "thanh time trùng màu"): đo ΔE trên nền sáng + tối — chưa phát 28% làm "giọng gốc · chưa phát" trùng "đang chờ · đã phát" (ΔE 1,8)
   và "đang chờ · chưa phát" lẫn vào nền (ΔE 3,2). Luật: chưa phát 40%, giọng gốc 25%; đang chờ là vạch ĐỨT NÉT, không tô phần đã phát (chưa có gì để nghe). Cổng SD2 */
.s3-mini button:not(.btn)::before { opacity: .4; }
.s3-mini button.k-orig::before { opacity: .25; }
.s3-mini button.k-wait::before { opacity: 1; background: repeating-linear-gradient(90deg, var(--k) 0 4px, transparent 4px 7px); }
.s3-mini button.k-wait em { display: none; }
.s3-mini .vp { position: absolute; top: 1px; bottom: 1px; border: 1.5px solid var(--text); border-radius: 5px; pointer-events: none; opacity: .5; }
.s3-mini .kn { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 2px var(--bg); transform: scale(0); transition: transform .12s; pointer-events: none; }
.s3-mini .m:hover .kn, .s3-mini .kn.on { transform: scale(1); }
.s3-mini .tip { position: absolute; bottom: calc(100% + 4px); transform: translateX(-50%); padding: 4px 8px; border-radius: 6px; background: var(--text); color: var(--bg); font: 600 11px var(--mono); letter-spacing: 0; text-transform: none; white-space: nowrap; pointer-events: none; z-index: 2; }
.s3-mini .btn { text-transform: none; letter-spacing: 0; color: var(--text); }
/* dải liền theo trục thời gian: canvas đứng yên bằng khung nhìn, #s3Span tạo bề rộng để cuộn */
.s3-scroll { position: relative; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; overscroll-behavior-x: contain; }
.s3-scroll canvas { position: sticky; left: 0; display: block; width: 100%; height: 104px; cursor: pointer; touch-action: pan-x; }
#s3Span { height: 1px; }
.s3-tl > .s3-ph:not([hidden]) ~ .s3-legend { display: none; }
.s3-tl > .s3-ph[hidden], .s3-scroll[hidden] { display: none; }
.s3-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--muted); }
.s3-legend span { display: inline-flex; align-items: center; gap: 6px; }
.s3-legend i { width: 10px; height: 10px; border-radius: 3px; }
.s3-ph { padding: 14px 4px; color: var(--muted); font-size: 14px; list-style: none; }
.s3-sk { display: grid; gap: 8px; padding: 14px 16px; border-radius: 12px; background: var(--surface); list-style: none; }
.s3-sk i { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--raised) 0%, var(--line-2) 50%, var(--raised) 100%); background-size: 300% 100%; animation: skel 1.6s ease-in-out infinite; }
.s3-sk i:nth-child(2) { width: 86%; animation-delay: .12s; } .s3-sk i:nth-child(3) { width: 58%; animation-delay: .24s; }
.s3-steps { display: grid; gap: 2px; padding: 6px 4px 4px; list-style: none; }
.s3-steps > div { display: flex; align-items: center; gap: 10px; min-height: 30px; color: var(--faint); font-size: 14px; }
.s3-steps i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); flex: none; }
.s3-steps .done { color: var(--muted); }
.s3-steps .done i { background: var(--text); color: var(--bg); box-shadow: none; }
.s3-steps .done i svg { width: 12px; height: 12px; }
.s3-steps .now { color: var(--text); font-weight: 600; }
.s3-steps .now i { box-shadow: inset 0 0 0 2px var(--live); }
.s3-steps .now i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: s3-pulse 1.2s ease-in-out infinite; }
.s3-panel { display: flex; flex-direction: column; gap: 12px; padding-block: 16px 0; padding-inline: 0 16px; min-width: 0; min-height: 0; }
.s3-h { font: 700 22px/1.2 var(--display); letter-spacing: -.02em; margin-bottom: 4px; }
.s3-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.s3-panel .note { margin-top: 10px; }
#s3Tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#s3Tools:empty { display: none; }
.s3-find { flex: 1 1 180px; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 999px; background: var(--surface); color: var(--muted); }
.s3-find input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font: inherit; outline: none; }
.s3-find:focus-within { outline: 2px solid var(--text); }
.s3 .chip { background: var(--surface); }
.s3 .chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.s3-list { flex: 1 1 0; min-height: 0; overflow-y: auto; display: grid; align-content: start; gap: 6px; margin: 0; padding: 0 0 16px; list-style: none; scrollbar-width: thin; }
.s3-li { border-radius: 12px; background: var(--surface); }
.s3-li.open { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-2); }
.s3-rowb { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 10px; width: 100%; padding: 12px 14px; border: 0; border-radius: 12px; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.s3-rowb .n { color: var(--faint); font-size: 12px; line-height: 22px; }
.s3-rowb .tx { line-height: 1.5; overflow-wrap: anywhere; }
.s3-li.playing .n { color: var(--live); font-weight: 600; }
.s3-open { display: grid; gap: 10px; padding: 0 14px 14px; }
.s3-para { margin: 0; line-height: 1.7; overflow-wrap: anywhere; }
.s3-para button { display: inline; padding: 1px 1px; border: 0; border-radius: 4px; background: none; color: var(--text); font: inherit; cursor: pointer; }
.s3-para button:hover, .s3-para button:focus-visible { background: var(--hover); }
.s3-rowb .tx.one { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: var(--muted); }
.s3-open .hint, .s3-met { font-size: 12.5px; color: var(--muted); }
.s3-takes { display: flex; flex-wrap: wrap; gap: 6px; }
.s3-dec { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.s3-dec.in-row { display: none; }
.s3-dock { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; min-height: 68px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
/* trục thời gian và cụm phát là tuyệt đối: không lật ở giao diện phải-sang-trái; lời của câu theo chiều của chính ngôn ngữ trong video */
.s3-tr, .s3-mini, .s3-scroll, .strip { direction: ltr; }
.s3-title, .pcard .name { unicode-bidi: plaintext; }
.s3-rowb .tx { text-align: start; }
.s3-tr { display: flex; align-items: center; gap: 6px; }
.s3-tr #play { height: 44px; padding: 0 18px; }
.s3-tr #clock { margin-inline-start: 8px; font-size: 13px; white-space: nowrap; }
.s3-now { display: grid; min-width: 0; line-height: 1.35; }
.s3-now b, .s3-now span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s3-now span { color: var(--muted); font-size: 13px; }
@media (min-width: 768px) and (max-width: 1023px) { .s3-dock .s3-now { display: none; } }        /* máy tính bảng: nút phát + nút quyết định chiếm hết thanh, dòng trạng thái bị ép còn "Đ…" — trạng thái đoạn đã có ở danh sách (15/10) */
.s3-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 28px; }
.s3-sheet h3 { margin: 10px 0 4px; font-size: 12px; font-weight: 600; color: var(--faint); }
.s3-sheet .r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.s3-sheet .r .muted { grid-column: 1; grid-row: 2; font-size: 12px; }
.s3-sheet .r > :last-child { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
dialog:has(.s3-sheet) { width: min(860px, calc(100vw - 32px)); }
.s3 .only-s { display: none; }
@media (max-width: 1279px) { .s3 .hide-m, .s3 .hide-s { display: none; } .s3-body { grid-template-columns: minmax(0, 1fr) minmax(320px, 36vw); } }
@media (max-width: 1023px) {
  .s3-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
  .s3-left { grid-template-rows: auto auto; padding: 12px 12px 0; gap: 8px; }
  .s3-stage { height: min(34dvh, 56vw); }
  .s3-legend { display: none; }
  .s3-scroll canvas { height: 76px; }
  .s3-tl { padding: 8px 12px; }
  .s3-panel { padding: 12px 12px 0; }
  .s3-sheet { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .s3 kbd, .s3 .hide-s, .s3-brand, .s3-sep, #s3Exit span, .s3-acts .btn span, #s3State { display: none; }
  .s3-top { gap: 8px; min-height: 52px; padding: 6px 10px; }
  .s3 .only-s { display: flex; }
  .s3-acts #aDl, .s3-acts #aAll, .s3-acts #aCancel { display: none; }
  .s3-top .btn { height: 36px; padding: 0 10px; }
  .s3-h { font-size: 18px; }
  .s3-dock { grid-template-columns: minmax(0, 1fr); gap: 0; min-height: 60px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .s3-dock .s3-now, .s3-dock > .s3-dec { display: none; }
  .s3-tr { justify-content: center; gap: 8px; }
  .s3-tr .btn { width: 48px; flex: 0 1 48px; min-width: 40px; height: 44px; padding: 0; }
  .s3-tr #play { width: 72px; flex: 0 1 72px; min-width: 56px; }
  .s3-tr #dRate { width: auto; flex: 0 0 auto; min-width: 48px; padding: 0 8px; font-size: 13px; }      /* 16/10 (ảnh chủ sản phẩm): "1,25×" tràn khỏi nút rộng cố định 48 px — nút co theo chữ, cổng NS1 đo 320–414 px */
  .s3-tr #clock .tot { display: none; }
  .s3-dec.in-row { display: flex; justify-content: stretch; }
  .s3-dec.in-row .btn { flex: 1 1 auto; }
  .s3-mini > span:first-child { display: none; }
  .s3-ab button { height: 40px; }
  .s3-mini .m { height: 36px; }
  .s3-mini .vp { top: 10px; bottom: 10px; }
  .s3-mini .btn { display: none; }
  .s3-title { min-width: 0; }
}
/* ---------------------------------------------------------------- Dự án: lưới thẻ video (màn hẹp: thẻ nằm ngang để một màn vẫn thấy nhiều video) */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 16px; }
.cards > .group, .cards > .empty, .cards > .more { grid-column: 1 / -1; }
.cards > .group { min-height: 40px; padding: 8px 2px 0; border: 0; background: transparent; font-size: 14px; }
.cards > .more { border: 0; }
.ptools { display: flex; align-items: center; gap: 12px; }
.ptools > .chips { flex: 1 1 auto; min-width: 0; }
.ptools .seg button { display: inline-flex; align-items: center; padding: 0 8px; }
.cards > .pager { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 8px; }
.pager .btn[aria-current="page"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.pcard { display: grid; grid-template-rows: auto 1fr; min-width: 0; border-radius: var(--r-l); background: var(--surface); overflow: hidden; cursor: pointer; transition: transform .15s var(--ease), box-shadow .15s; }
.pcard:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(20, 20, 18, .10); }
.vthumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: var(--stage); color: #9A988F; }
.vthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vthumb .dur { position: absolute; bottom: 8px; inset-inline-end: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(11, 11, 10, .78); color: #F3F2EE; font-size: 12px; }
.vbody { display: grid; align-content: start; gap: 8px; padding: 14px 16px 16px; min-width: 0; }
.vtop { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 24px; font-size: 13px; }
.vtop .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vhead { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pcard .name { flex: 1 1 0; min-width: 0; font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard .meta { display: flex; gap: 0 10px; min-width: 0; color: var(--muted); font-size: 13px; white-space: nowrap; }
.pcard .meta span { flex: none; }
.pcard .meta span:nth-child(2) { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pcard .meta span:empty { display: none; }
.pcard .meta span + span::before { content: "·"; margin-inline-end: 10px; color: var(--line-2); }
.strip { display: flex; gap: 2px; height: 6px; margin-top: 2px; }
.strip i { flex: 1 1 0; min-width: 3px; border-radius: 2px; background: var(--line-2); }
.strip i.ok { background: var(--text); }
.strip i.f { background: var(--live); }
@media (max-width: 767px) {
  .cards { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pcard { grid-template-columns: 124px minmax(0, 1fr); grid-template-rows: auto; }
  .pcard:hover { transform: none; box-shadow: none; }
  .vthumb { aspect-ratio: auto; min-height: 100%; }
  .vbody { gap: 6px; padding: 10px 12px 12px; }
  .pcard .name { font-size: 15px; }
  .pcard .meta .opt, .pcard .meta span::before { display: none; }
  .side .acct { gap: 2px; }
  .acct .ava { width: 18px; height: 18px; font-size: 10px; }
}
.switch input:checked::after { background: var(--on-accent); }
.kpi small { display: block; margin-top: 6px; color: var(--muted); font-size: 12.5px; }

/* kiểm thử 14/10: đang tải lên thì khoá phần chọn; điện thoại: khối Đổi giọng nằm cuối trang, không nổi che tệp / giọng */
.new.busy .col > * { pointer-events: none; opacity: .6; }      /* đang tải lên: cột trái khoá; nút Huỷ tải lên nằm ở cột phải (15/10) */
@media (max-width: 767px) { .new-side { position: static; } .new-side .actbar .say b { white-space: normal; } }
@media (min-width: 1280px) { .menu .only-s { display: none; } }      /* thanh trên Studio đã có nút Phím tắt: menu ⋯ không lặp lại */
.cred-pop b { overflow-wrap: anywhere; font-size: clamp(22px, 8vw, 32px); }      /* số credit rất lớn không tràn ô (chủ sản phẩm chụp 14/10) */
@media (max-width: 1023px) {      /* kiểm thử 100 máy 14/10: điện thoại 375×667 thì danh sách câu chỉ còn 16 px, thanh phát che hết — màn hẹp cuộn cả vùng giữa thành một khối */
  .s3-body { display: block; overflow-y: auto; overscroll-behavior: contain; }      /* khối thường, không lưới: lưới tính cột video cao 12 px làm video / sóng âm đè lên danh sách (lần 2, 18:55) */
  .s3-left { min-height: auto; }
  .s3-panel, .s3-list { min-height: auto; }
  .s3-list { flex: none; overflow: visible; }
}
/* viên tải lên nổi: đang tải lên mà rời trang Video mới (kiểm thử 100 máy 14/10) */
.up-pill { position: fixed; z-index: 30; inset-inline-end: 16px; bottom: 16px; display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 32px); padding: 10px 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--raised); color: var(--text); font-size: 13.5px; text-decoration: none; box-shadow: var(--shadow); overflow: hidden; }
.up-pill i { position: absolute; inset: auto 0 0 0; height: 3px; background: var(--accent); }
@media (max-width: 767px) { .up-pill { bottom: 76px; inset-inline: 16px; } }
/* kiểm thử 100 máy lần 2 (14/10 18:55): vùng chạm điện thoại, tên tệp, viên tải lên không che nội dung */
@media (pointer: coarse) {
  .check { padding: 6px 0; }
  .check input { width: 24px; height: 24px; margin: 0; }
  .chip { min-height: 40px; }
}
@media (max-width: 767px) {
  .file .name { white-space: normal; overflow-wrap: anywhere; }
  body:has(#upPill) .main, body:has(#upPill) .view { padding-bottom: 72px; }
}

/* ====================================================================================================================
   BẢN ĐIỆN THOẠI (duyệt 14/10/2026, canvas https://claude.ai/artifact/52WH9nnbvDq418Pm1Jeo9H, phân tích docs/studio/kiem-thu-100/PHAN-TICH-LOI.md)
   ==================================================================================================================== */
.up-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; margin-bottom: 14px; padding: 12px 14px; border-radius: var(--r-l); background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--text); text-decoration: none; }
.up-strip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.up-strip i { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.up-strip i em { display: block; height: 100%; border-radius: inherit; background: var(--live); }
.up-strip small { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.side .lbl { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }      /* nhãn thanh đáy không bao giờ xuống dòng (42 người báo chữ N đè "Tài khoản") */
@media (max-width: 767px) {
  .nav, .side .cta { min-width: 0; }
  .ptools .seg { display: none; }
  .ptools .chips { flex-wrap: wrap; gap: 6px; }
  .ptools .chip { height: 40px; padding: 0 12px; }
  .pcard { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 10px; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); }
  .pcard .vthumb { aspect-ratio: 9 / 13; min-height: 0; align-self: start; border-radius: 10px; overflow: hidden; }
  .pcard .vthumb .dur { bottom: 5px; inset-inline-end: 5px; padding: 1px 5px; font-size: 11px; }
  .pcard .vbody { padding: 0; gap: 6px; }
  .pcard .vhead { order: 1; align-items: flex-start; }
  .pcard .meta { order: 2; flex-wrap: wrap; white-space: normal; }
  .pcard .meta .opt { display: inline; }
  .pcard .meta span:nth-child(3) { display: none; }
  .pcard .vtop { order: 3; flex-wrap: wrap; }
  .pcard .vtop .muted { white-space: normal; overflow: visible; }
  .pcard .strip { order: 4; }
  .pcard .name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; overflow-wrap: anywhere; }
  .pcard .badge { white-space: nowrap; }
}
#upStrip:empty { display: none; }
@media (max-width: 767px) {
  #view { padding-top: 8px; }
  .pcard .meta span + span::before { display: inline; content: "·"; margin-inline-end: 8px; color: var(--line-2); }
  .pcard .meta { gap: 0 8px; }
}
.tier-note { display: none; margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.step .step-add { margin-inline-start: auto; }
@media (max-width: 767px) {
  body.on-new .side { display: none; }
  body.on-new #view { padding-bottom: 120px; }
  .new .col > div:has(> h1) { display: none; }
  .new .col { gap: 20px; }
  .step { margin-bottom: 10px; }
  .step h2 { font-size: 16px; font-weight: 600; }        /* cùng kiểu chữ với khổ máy tính (viết hoa chữ đầu câu), chỉ nhỏ lại */
  .file { grid-template-columns: auto auto minmax(0, 1fr) 44px; row-gap: 2px; column-gap: 8px; min-height: 64px; padding-block: 10px; padding-inline: 14px 6px; border-radius: 16px; }
  .file > :nth-child(1) { grid-column: 1 / 4; grid-row: 1; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
  .file > :nth-child(2) { grid-column: 1; grid-row: 2; font-size: 13px; }
  .file > :nth-child(3) { grid-column: 2; grid-row: 2; font-size: 13px; }
  .file > :nth-child(4) { grid-column: 4; grid-row: 1 / 3; width: 44px; height: 44px; }
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: var(--raised); }
  .tier { min-height: 52px; padding: 6px 4px; border: 0; background: transparent; text-align: center; align-content: center; justify-items: center; }
  .tier[aria-checked="true"] { background: var(--surface); box-shadow: 0 1px 3px rgba(20, 20, 18, .12); }
  .tier b { flex-direction: column; gap: 0; line-height: 1.2; }
  .tier b .dot, .tier b .grow, .tier small { display: none; }
  .tier b .mono { font-size: 12px; font-weight: 400; }
  .tier-note { display: block; }
  .new .col > .check { padding: 12px; border-radius: 14px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
  .new-side { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; margin: 0; }
  .new-side .actbar { position: relative; bottom: auto; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 12px; margin: 0; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--surface); }
  .new-side .actbar .say { flex: 1 1 auto; min-width: 0; }
  #goTitle { display: none; }
  .actbar.why #goTitle { display: block; font-size: 13px; font-weight: 500; white-space: normal; }
  #goSub { display: block; font-size: 12.5px; line-height: 1.35; }
  .new-side .actbar .cost { margin: 0 0 2px; }
  .new-side .actbar .cost span, .new-side .actbar .cost .btn { display: none; }
  .new-side .actbar .cost b { font: 600 18px var(--mono); }
  .new-side .actbar .btn.lg { flex: none; width: auto; height: 52px; padding: 0 22px; }
  #upBar { position: absolute; top: 0; left: 0; right: 0; margin: 0 !important; height: 3px; border-radius: 0; }
}
.vadd { display: none; }
@media (max-width: 767px) {
  .vadd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
  .vadd a { min-height: 88px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 8px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600; text-align: center; line-height: 1.25; }
  .vadd a.pri { background: var(--accent); color: var(--on-accent); box-shadow: none; }
  .vadd svg { width: 22px; height: 22px; }
}
.s3-stepbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-bottom: 10px; }
.s3-stepbar i { height: 4px; border-radius: 999px; background: var(--line-2); }
.s3-stepbar i.done { background: var(--text); }
.s3-stepbar i.now { background: var(--live); }
.s3-rowb { grid-template-areas: "n tx b" ". tm tm" ". why why"; }
.s3-rowb .n { grid-area: n; } .s3-rowb .tx { grid-area: tx; } .s3-rowb .badge { grid-area: b; }
.s3-rowb .tm { grid-area: tm; font-size: 12px; color: var(--faint); }
.s3-rowb .why { grid-area: why; font-size: 13px; line-height: 1.4; }
.s3-rowb .why.bad { color: var(--bad); } .s3-rowb .why.warn { color: var(--live-ink); }
.s3-li:not(.open) .s3-rowb .tx { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }      /* đoạn dài 1 phút: thu 3 dòng */
.s3-para span[data-word] { cursor: pointer; border-radius: 4px; }
.s3-para span[data-word]:hover { background: var(--hover); }
.sheet-h { display: none; }
.s3-why { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 767px) {
  .s3-left > .s3-ab { position: static; transform: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 4px; border-radius: 14px; background: var(--surface); }
  .s3-left > .s3-ab button { height: 40px; justify-content: center; }
  #s3Sum { padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
  .s3-li.open { background: var(--surface); box-shadow: none; }
  .s3-li.open .s3-open { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 82dvh; overflow-y: auto; padding: 8px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: var(--surface); box-shadow: 0 0 0 100vmax rgba(11, 11, 10, .55); overscroll-behavior: contain; }
  .s3-li.open .s3-open::before { content: ""; justify-self: center; width: 40px; height: 5px; border-radius: 999px; background: var(--line-2); }
  .sheet-h { display: flex; align-items: center; gap: 8px; position: sticky; top: -8px; padding: 6px 0; background: var(--surface); }
  .sheet-h b { font-family: var(--display); font-size: 20px; }
  .sheet-h .badge { margin-inline-start: auto; }
  .sheet-h .btn { width: 44px; height: 44px; }
  .s3-li.open .s3-para { max-height: 34dvh; overflow-y: auto; padding: 12px; border-radius: 14px; background: var(--bg); line-height: 1.6; }
  .s3-open .s3-dec .btn, .s3-open .s3-takes .btn { min-height: 44px; }
  .menu { left: 0 !important; right: 0 !important; inset-inline: 0 !important; top: auto !important; bottom: 0; max-width: none; max-height: 80dvh; padding: 8px 12px calc(20px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; box-shadow: 0 0 0 100vmax rgba(11, 11, 10, .5); }
  .menu > a, .menu > button { min-height: 52px; }
}
/* nút ngôn ngữ: mọi cỡ màn, kèm mã ngôn ngữ đang dùng (kiểm thử: 10 người không tìm thấy trên điện thoại) */
.lang-btn { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 8px; }
.lang-btn .lc { font-size: 12px; font-weight: 600; }

/* ====================================================================================================================
   MẶT TIỀN CHƯA ĐĂNG NHẬP (14/10): /{ngôn ngữ}/ · cách hoạt động · bảng giá · quyền dùng giọng
   ==================================================================================================================== */
.pub { min-height: 100dvh; background: var(--bg); color: var(--text); }
.pub-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 16px; max-width: 1160px; margin: 0 auto; padding: 12px 24px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); }
.pub-top .brand { margin: 0; color: var(--text); text-decoration: none; }
.pub-nav { display: flex; gap: 4px; }
.pub-nav a { padding: 8px 12px; border-radius: 10px; color: var(--muted); text-decoration: none; font-weight: 500; }
.pub-nav a:hover { background: var(--hover); color: var(--text); }
.pub-main { max-width: 1160px; margin: 0 auto; padding: 24px 24px 64px; }
.pub-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 32px 0 56px; }
.pub-hero h1 { margin: 8px 0 16px; font-size: clamp(32px, 5vw, 56px); line-height: 1.05; }
.pub-hero .lead { font-size: 18px; color: var(--muted); }
.eyebrow { margin: 0; color: var(--live-ink); font-weight: 600; font-size: 14px; letter-spacing: .02em; }
.pub-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 12px; }
.small { font-size: 13px; }
.pub-demo { margin: 0; display: grid; gap: 10px; }
.pub-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--stage); }
.pub-stage video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
.pub-play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border: 0; border-radius: 50%; background: rgba(243, 242, 238, .92); color: #141412; display: grid; place-items: center; cursor: pointer; }
.pub-play svg { width: 26px; height: 26px; }
.pub-ab { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pub-ab button { height: 44px; justify-content: center; }
.pub-demo figcaption { color: var(--muted); font-size: 13px; }
.pub-sec { padding: 48px 0; border-top: 1px solid var(--line); scroll-margin-top: 72px; }
.pub-sec h2 { margin: 0 0 20px; font-family: var(--display); font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.02em; }
.pub-sec h3 { margin: 28px 0 12px; font-size: 18px; }
.pub-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.pub-steps li, .pub-why, .pub-tiers li, .pub-packs li { padding: 20px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.pub-steps .n { display: grid; place-items: center; width: 32px; height: 32px; margin-bottom: 12px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.pub-steps b { display: block; font-size: 17px; margin-bottom: 6px; }
.pub-steps p, .pub-why p { margin: 0; color: var(--muted); line-height: 1.55; }
.pub-why { margin-top: 16px; }
.pub-why h3 { margin: 0 0 8px; }
.pub-tiers, .pub-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.pub-tiers li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
.pub-tiers small, .pub-packs small { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.pub-packs li { display: grid; gap: 4px; }
.pub-packs b { font-size: 20px; }
.pub-list { display: grid; gap: 10px; margin: 0; padding-inline-start: 20px; color: var(--muted); line-height: 1.55; }
.pub-foot { max-width: 1160px; margin: 0 auto; padding: 24px; border-top: 1px solid var(--line); }
.pub-guides ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 8px 24px; margin: 0; padding: 0; list-style: none; }      /* trang chủ → Hướng dẫn (16/10) */
.pub-guides a { display: block; padding: 10px 0; color: var(--text); text-underline-offset: 3px; }
.pub-langs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 12px; }
.pub-langs a { color: var(--muted); text-decoration: none; font-size: 14px; }
.pub-langs a[aria-current="true"] { color: var(--text); font-weight: 600; }
@media (max-width: 860px) {
  .pub-nav { display: none; }
  .pub-top { padding: 10px 16px; gap: 8px; }
  .pub-top .brand b { font-size: 16px; }
  .pub-main { padding: 8px 16px 48px; }
  .pub-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 16px 0 32px; }
  .pub-hero .lead { font-size: 16px; }
  .pub-cta .btn { flex: 1 1 100%; justify-content: center; }
  .pub-steps, .pub-tiers, .pub-packs { grid-template-columns: minmax(0, 1fr); }
  .pub-sec { padding: 36px 0; }
  .pub-foot { padding: 20px 16px 32px; }
}
.pub-top .brand { display: flex !important; }
.pub-tiers + p, .pub-packs + p { margin-top: 14px; }
.vtop { flex-wrap: wrap; } .vtop .muted { white-space: normal; overflow: visible; }      /* dòng chi tiết trạng thái dài (đoạn bị chặn…) xuống dòng thay vì cắt */
/* ---- nền có điểm nhấn (14/10 tối, góp ý "nền quá phẳng"): ánh cam rất nhẹ ở góc trên + lưới chấm mờ dần, thẻ nổi bằng bóng mềm. Chỉ trang trí, không đổi bố cục */
:root { --glow: rgba(255, 90, 31, .10); --glow-2: rgba(255, 90, 31, .04); --dot: rgba(20, 20, 18, .07); --lift: 0 1px 2px rgba(20, 20, 18, .04), 0 10px 28px -14px rgba(20, 20, 18, .16); }
:root[data-theme="dark"] { --glow: rgba(255, 90, 31, .09); --glow-2: rgba(243, 242, 238, .03); --dot: rgba(243, 242, 238, .06); --lift: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -14px rgba(0, 0, 0, .7); }
body { background: radial-gradient(1100px 520px at 88% -12%, var(--glow), transparent 62%), radial-gradient(900px 520px at -8% 112%, var(--glow-2), transparent 60%), var(--bg); background-attachment: fixed; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 80% 0%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 80% 0%, #000, transparent 75%); }
.side, .s3, .pub { background: transparent; }
.card, .drop, .voice:not(.add), .tier, .new-side .actbar, #s3Sum { box-shadow: var(--lift); }
@media (max-width: 767px) { .side { background: var(--bg); } .tiers .tier:not([aria-checked="true"]), .new-side .actbar { box-shadow: none; } }
@media print { body { background: #fff; } body::before { display: none; } }
/* Studio: không còn nhãn phím trên nút (góp ý 14/10); phím vẫn chạy, xem ở bảng Phím tắt và chú thích khi rê chuột */
.s3 :not(#s3Keys) > kbd { display: none; }
/* Video mới: kịch bản gốc (không bắt buộc) — gập sẵn, mở ra là ô dán lời */
.script-box { margin-top: 14px; }
.script-box summary { cursor: pointer; font-size: 13px; font-weight: 500; min-height: 32px; display: flex; align-items: center; gap: 4px; }
.script-box textarea { width: 100%; margin: 8px 0 6px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--surface); font: inherit; line-height: 1.5; resize: vertical; }
.script-box small { color: var(--muted); font-size: 12px; }
/* ---- Studio: lời chia câu ngắn dưới từng đoạn (canvas bảng 9–11, góp ý 14/10 tối). Máy vẫn đọc cả đoạn một mạch; câu là đơn vị để nghe, soát và sửa */
.s3-li.grp .s3-rowb { grid-template-areas: "n tx b" ". why why"; padding-block: 8px; }
.s3-li.grp .tx.gh { font-size: 12px; color: var(--faint); letter-spacing: .02em; }
.s3-sents { list-style: none; margin: 0; padding: 0 4px 8px; display: grid; gap: 2px; }
.s3-sents.in-sheet { display: none; }
.s3-s { position: relative; border-radius: 10px; }
.s3-sb { display: grid; grid-template-columns: 46px minmax(0, 1fr) 20px; gap: 8px; align-items: start; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); text-align: start; font: inherit; font-size: 14.5px; line-height: 1.45; cursor: pointer; }
.s3-sb:hover { background: var(--hover); }
.s3-sb .t { padding-top: 2px; font-size: 12px; color: var(--faint); }
.s3-sb .pi { padding-top: 2px; color: var(--muted); opacity: 0; }
.s3-sb .pi svg { width: 14px; height: 14px; }
.s3-sb:hover .pi, .s3-sb:focus-visible .pi, .s3-s.playing .pi { opacity: 1; }
.s3-s.playing .s3-sb { background: var(--hover); box-shadow: inset 3px 0 0 var(--live); }
.s3-s.playing .t { color: var(--live); }
.s3-s.f-block, .s3-s.f-review { margin: 4px 0; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--bad); }
.s3-s.f-review { box-shadow: inset 0 0 0 1.5px var(--live); }
.s3-sb mark { padding: 0 3px; border-radius: 4px; background: var(--bad-soft); color: var(--bad); }
.s3-s.f-review .s3-sb mark { background: var(--live-soft); color: var(--live-ink); }
.s3-sx { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 0 10px; padding-inline: 64px 10px; font-size: 13px; color: var(--muted); }
.s3-sx > span { flex: 1 1 160px; min-width: 0; }
.s3-sr { position: absolute; top: 5px; inset-inline-end: 32px; opacity: 0; }
.s3-s:hover .s3-sr, .s3-sr:focus-visible { opacity: 1; }
/* câu đang được sửa lại: cả dòng nhấp nháy nhẹ màu tín hiệu */
.s3-s.fixing { animation: s3fix 1.4s ease-in-out infinite; }
@keyframes s3fix { 0%, 100% { background: transparent; } 50% { background: var(--live-soft); } }
.s3-fx { display: block; padding-block: 0 8px; padding-inline: 64px 10px; font-size: 12.5px; color: var(--live-ink); }
.s3-fx::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-end: 6px; border-radius: 50%; background: var(--live); }
@media (prefers-reduced-motion: reduce) { .s3-s.fixing { animation: none; background: var(--live-soft); } }
.s3-follow { display: inline-flex; align-items: center; gap: 6px; margin-inline-start: auto; font-size: 13px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.s3-follow input { accent-color: var(--live); }
.s3-vol { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.s3-vol input { width: 88px; accent-color: var(--text); }
@media (max-width: 767px) {
  .s3-li.open .s3-sents.in-sheet { display: grid; max-height: 40dvh; overflow-y: auto; }
  .s3-sb .pi, .s3-sr { opacity: 1; }
  .s3-sb { padding: 10px 8px; }
}
/* Video mới: quay bằng camera */
.drop-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.drop-acts .btn svg { margin-inline-end: 6px; }
.cam { display: grid; gap: 10px; }
.cam video { width: 100%; max-height: 52dvh; border-radius: var(--r-m); background: #0B0B0A; }
.cam-bar { display: flex; align-items: center; gap: 12px; }
.cam-bar .mono { font-size: 15px; color: var(--text); }
.cam .hint { margin: 0; font-size: 12.5px; color: var(--muted); }
.s3-li.grp .s3-rowb .n { display: none; }
.script-box summary { list-style: none; }
.script-box summary::-webkit-details-marker { display: none; }
.script-box summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-inline-end: 4px; border-radius: 6px; background: var(--raised); font-weight: 600; }
.script-box[open] summary::before { content: "−"; }
/* ==== Dự án theo bản mẫu của chủ sản phẩm (14/10 tối): đầu trang + số liệu, Cần bạn xử lý, lọc liền khối, sắp xếp, thẻ có nhãn trên ảnh. Credit giữ nguyên ==== */
.side-h { margin: 6px 12px 6px; font-size: 11px; font-weight: 600; color: var(--faint); }
.nav .cnt { margin-inline-start: auto; font-size: 12px; font-weight: 500; color: var(--faint); }
.nav .cnt:empty { display: none; }
.psearch { display: flex; align-items: center; gap: 8px; width: min(480px, 100%); height: 40px; padding-block: 0; padding-inline: 14px 8px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--muted); }
.psearch input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none; font-size: 14px; color: var(--text); }
.psearch:focus-within { box-shadow: 0 0 0 2px var(--text); }
.psearch kbd { flex: none; }
@media (pointer: coarse) { .psearch kbd { display: none; } }        /* máy cảm ứng (kể cả điện thoại xoay ngang) không có Ctrl K */
.bell { position: relative; }
.bell.unread::after { content: ""; position: absolute; top: 9px; inset-inline-end: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 2px var(--bg); }
.menu a.noti { display: flex; align-items: flex-start; gap: 10px; min-height: 52px; padding: 8px 12px; white-space: normal; }
.menu a.noti i { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--line-2); }
.menu a.noti i.ok { background: var(--ok); } .menu a.noti i.warn { background: var(--live); } .menu a.noti i.bad { background: var(--bad); }
.menu a.noti span { display: grid; min-width: 0; } .menu a.noti b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.menu a.noti small { color: var(--muted); font-size: 12.5px; }
.phead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.phead h1 { font-size: 44px; letter-spacing: -.035em; }
.phead p { margin-top: 6px; }
.phead .kpis { display: flex; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--lift), 0 0 0 1px var(--line); }
.phead .kpis:empty { display: none; }
.phead .kpis > div { display: grid; gap: 2px; padding: 12px 20px; min-width: 120px; }
.phead .kpis > div + div { border-inline-start: 1px solid var(--line); }
.phead .kpis small { font-size: 12.5px; color: var(--muted); }
.phead .kpis b { font: 600 26px var(--display); letter-spacing: -.02em; }
.phead .kpis b span { margin-inline-start: 3px; font: 400 13px var(--font); color: var(--muted); }
.todo { display: grid; gap: 10px; }
.todo-h { display: flex; align-items: baseline; gap: 10px; } .todo-h b { font-size: 16px; } .todo-h span { font-size: 13px; }
.todo-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.todo-c { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--lift), 0 0 0 1px var(--line); color: inherit; text-decoration: none; transition: box-shadow .15s; }
.todo-c:hover { box-shadow: 0 10px 28px rgba(20, 20, 18, .10), 0 0 0 1px var(--line-2); }
.todo-c .tt { position: relative; width: 56px; height: 40px; border-radius: 8px; background: var(--stage); overflow: hidden; }
.todo-c .tt img { width: 100%; height: 100%; object-fit: cover; }
.todo-c .tx { display: grid; gap: 2px; min-width: 0; }
.todo-c .tx .badge { justify-self: start; height: 20px; font-size: 12px; }
.todo-c .tx b, .todo-c .tx small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-c .tx small { font-size: 12.5px; color: var(--muted); }
.segtabs { display: inline-flex; flex: 0 1 auto !important; gap: 2px; padding: 4px; border-radius: 14px; background: var(--raised); overflow-x: auto; scrollbar-width: none; }
.segtabs .chip { height: 34px; background: transparent; border-color: transparent; color: var(--muted); white-space: nowrap; }
.segtabs .chip b { color: var(--faint); font-weight: 500; }
.segtabs .chip[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(20, 20, 18, .12); }
.psort { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding-block: 0; padding-inline: 14px 6px; border-radius: 999px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); font-size: 13px; color: var(--muted); white-space: nowrap; }
.psort select { width: auto; min-height: 0; height: 32px; padding: 0 6px; border: 0; background: none; font-weight: 600; color: var(--text); }
.vthumb .vpill { position: absolute; top: 10px; inset-inline-start: 10px; }
.vthumb .vpill .badge { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(11, 11, 10, .2); }
.vthumb .vpill .badge.run { background: var(--live); color: #141412; }
.vthumb .vlang { position: absolute; top: 10px; inset-inline-end: 10px; padding: 2px 7px; border-radius: 6px; background: rgba(11, 11, 10, .78); color: #F3F2EE; font-size: 11.5px; letter-spacing: .04em; }
.vstat { font-size: 13px; color: var(--muted); }
.vstat.warn { color: var(--live-ink); } .vstat.bad { color: var(--bad); } .vstat.ok { color: var(--ok); }
@media (min-width: 768px) { .pcard .vtop { display: none; } }
@media (max-width: 767px) {
  .vthumb .vpill, .vthumb .vlang, .vstat, .side-h, .nav .cnt, .psearch kbd { display: none; }
  .phead h1 { font-size: 32px; }
  .phead .kpis { width: 100%; } .phead .kpis > div { flex: 1 1 0; min-width: 0; padding: 10px 12px; } .phead .kpis b { font-size: 20px; }
  .todo-row { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .todo-c { scroll-snap-align: start; }
  .ptools { flex-wrap: wrap; } .psort { order: 3; }
}
@media (max-width: 1100px) and (min-width: 768px) { .side-h { display: none; } }
/* Bảng thuật ngữ */
.terms { display: grid; gap: 8px; }
.terms-h, .terms-r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) 32px; gap: 8px; align-items: center; }
.terms-h { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.terms-r input { min-height: 40px; }
.terms-f { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.nav .t-narrow { display: none; }
@media (max-width: 767px) {
  .nav .t-wide { display: none; } .nav .t-narrow { display: inline; }
  .segtabs { flex-wrap: nowrap; max-width: 100%; }
  .todo-c { grid-template-columns: 48px minmax(0, 1fr); }
  .todo-c .tt { width: 48px; height: 48px; }
  .todo-c > .btn { display: none; }
}
@media (max-width: 767px) { .ptools .segtabs { display: flex; flex-wrap: nowrap !important; width: 100%; overflow-x: auto; } .ptools .segtabs .chip { flex: none; } }
/* nút Tiếng gốc / Giọng mới đè trên video: luôn màu của nền tối (video nằm dưới), ở cả hai giao diện */
.s3-stage .s3-ab button { color: #B9B7AE; }
.s3-stage .s3-ab button[aria-pressed="true"] { background: #F3F2EE; color: #141412; }
.s3-stage .s3-ab kbd { background: rgba(243, 242, 238, .14); color: inherit; }
/* Quản trị → Trang giới thiệu */
.land-files { display: grid; gap: 8px; margin-top: 12px; }
.land-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px; border-radius: var(--r-m); background: var(--raised); }
.land-row .pv { width: 96px; height: 54px; border-radius: 8px; background: var(--stage); overflow: hidden; }
.land-row .pv video, .land-row .pv img { width: 100%; height: 100%; object-fit: cover; display: block; }
.land-row .tx { display: grid; min-width: 0; } .land-row .tx small { color: var(--muted); font-size: 12.5px; }
.land-row.busy { opacity: .5; pointer-events: none; }
@media (max-width: 767px) { .land-row { grid-template-columns: 64px minmax(0, 1fr); } .land-row .pv { width: 64px; height: 36px; } .land-row > .btn, .land-row > label.btn { grid-column: 2; justify-self: start; } }        /* điện thoại: nút xuống dưới tên — trước tên tệp bị bẻ từng chữ ("Tiếng / gốc") */
/* màn rất rộng: thanh trên canh cùng cột với nội dung trang (.page rộng tối đa 1120 px, căn giữa). Ảnh Quản trị 2000 px 14/10: tiêu đề sát trái, nội dung ở giữa */
@media (min-width: 768px) { .top { padding-inline: max(var(--pad), calc((100% - 1120px) / 2)); } }
/* Quản trị → Nhà API / Model dịch vụ nền */
.fams { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.fam { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--raised); font-size: 12px; white-space: nowrap; }
.fam b { font-weight: 600; color: var(--muted); }
.fam.f-google { box-shadow: inset 3px 0 0 #4285F4; } .fam.f-openai { box-shadow: inset 3px 0 0 #10A37F; } .fam.f-anthropic { box-shadow: inset 3px 0 0 #D97757; }
.fam.f-xai, .fam.f-meta { box-shadow: inset 3px 0 0 #6B7280; } .fam.f-deepseek { box-shadow: inset 3px 0 0 #4D6BFE; } .fam.f-qwen { box-shadow: inset 3px 0 0 #7C3AED; } .fam.f-mistral { box-shadow: inset 3px 0 0 #FA520F; }
.mlist { display: grid; gap: 8px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.mlist-h { display: flex; align-items: baseline; gap: 10px; }
.mrows { list-style: none; margin: 0; padding: 0; max-height: 46dvh; overflow-y: auto; border-radius: var(--r-m); box-shadow: 0 0 0 1px var(--line); }
.mrows li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px; padding: 6px 10px; border-top: 1px solid var(--line); font-size: 13px; }
.mrows li:first-child { border-top: 0; } .mrows li .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrows li.more, .mrows li.muted { display: block; text-align: center; }
.aitask { display: grid; gap: 12px; margin-bottom: 12px; }
.aifields { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, .8fr); }
.aifields input[type="search"] { margin-bottom: 4px; min-height: 32px; }
@media (max-width: 767px) { .aifields { grid-template-columns: minmax(0, 1fr); } .mrows li { grid-template-columns: minmax(0, 1fr) auto; } .mrows li .fam { display: none; } }
.card .sub3 { margin: 18px 0 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
/* thẻ credit gọn: số lớn + ba dòng ngắn (gói, hạn dùng, đang giữ) */
.cred-pop { min-width: 220px; }
.cred-pop dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; }
.cred-pop dt { color: var(--muted); } .cred-pop dd { margin: 0; text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.cred-num { display: inline-block; min-width: 3.5ch; text-align: end; }
input[type="url"] { width: 100%; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--r-s); background: var(--bg); color: var(--text); }
@media (max-width: 767px) { .toolbar .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; } .toolbar .chips .chip { flex: none; } }
.tabs a.tab { position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 12px; color: var(--muted); font-weight: 500; white-space: nowrap; text-decoration: none; }
.tabs a.tab:hover { color: var(--text); }
.tabs a.tab[aria-current="page"] { color: var(--text); }
.tabs a.tab[aria-current="page"]::after { content: ""; position: absolute; inset-inline: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent-text); }
/* thanh Toàn video thẳng hàng với dải sóng âm (14/10 khuya: hai vạch chạy lệch nhau): nhãn, giờ, nút phóng to lên hàng trên, thanh trải đủ chiều ngang */
.s3-mini { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 6px 10px; }
.s3-mini .m { grid-column: 1 / -1; grid-row: 2; }
.s3-mini > span.mono:not(:first-child) { justify-self: end; }
/* Dự án: xoá trên thẻ, chế độ Chọn để xoá hàng loạt */
.pcard { position: relative; }
.pcard .pick { position: absolute; z-index: 2; top: 8px; inset-inline-start: 8px; display: none; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--surface); box-shadow: 0 1px 4px rgba(11, 11, 10, .25); cursor: pointer; }
.pcard .pick input { width: 18px; height: 18px; accent-color: var(--live); cursor: pointer; }
body.picking .pcard .pick { display: grid; }
body.picking .vthumb .vpill { inset-inline-start: 48px; }
.pcard.picked { box-shadow: 0 0 0 2px var(--live); }
.del-ico { color: var(--faint); }
.del-ico:hover { color: var(--bad); }
@media (hover: hover) and (min-width: 768px) { .pcard .del-ico { opacity: 0; } .pcard:hover .del-ico, .pcard .del-ico:focus-visible { opacity: 1; } }
.pick-bar { position: fixed; z-index: 30; left: 50%; bottom: 20px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; width: min(640px, calc(100% - 32px)); padding-block: 10px; padding-inline: 18px 12px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
@media (max-width: 767px) { .pick-bar { bottom: calc(72px + env(safe-area-inset-bottom)); flex-wrap: wrap; row-gap: 8px; } .pick-bar > b { flex: 1 0 100%; white-space: nowrap; } }        /* điện thoại: "Đã chọn 7 video" một dòng riêng, nút xuống hàng dưới (trước bị bẻ 4 dòng) */
#pickBtn[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.menu button.danger { color: var(--bad); }
/* Tạo giọng bằng tuỳ chọn: ô chọn thả xuống (15/10, thay chip chữ trơn) */
.design { display: grid; gap: 4px; }
.design .d-sum { margin: 0 0 8px; color: var(--muted); font-size: 14px; }        /* chữ gợi ý, không đóng khung (khung xám trông như ô nhập bị khoá) */
.design .d-sum b { color: var(--text); font-weight: 600; }
.design .d-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }        /* 5 đặc điểm + ngôn ngữ = 3 + 3, không lẻ hàng */
.design select { width: 100%; min-height: 44px; }
.design select.set { border-color: var(--text); font-weight: 600; }
@media (max-width: 767px) { .design .d-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi b { overflow-wrap: anywhere; } .kpi small { white-space: normal; overflow-wrap: anywhere; }
/* điện thoại, thanh trên của ứng dụng (15/10, chủ sản phẩm: nút quay lại và tiêu đề bị ép còn "T…", cần rộng thêm ≥30%):
   ngôn ngữ và sáng / tối không nằm ở thanh trên nữa (đã có trong Tài khoản), các nút sát nhau hơn, nút quay lại vùng bấm 44 px */
@media (max-width: 767px) {
  body:not(.adm) .top .tools .lang-btn, body:not(.adm) .top .tools [data-theme-btn] { display: none; }
  .top { gap: 6px; padding-inline: 12px; }
  .top .tools { gap: 2px; }
  #topL { gap: 4px; }
  .top .back { min-width: 44px; min-height: 44px; justify-content: center; padding: 0; }
  .top .back svg { width: 22px; height: 22px; }
  .top .title { font-size: 17px; }
}
/* Video mới trên điện thoại: một nút chọn / quay (15/10) */
.drop-acts .btn.wide { min-width: 260px; max-width: 100%; }
/* Thêm giọng — chọn đoạn mẫu (15/10, chủ sản phẩm: căn lề thẳng lối): nút có viền nên mép trái thẳng hàng với dải sóng; cách dải sóng 12 px;
   thời lượng chữ thường số đều (không mono), trên điện thoại lên dòng riêng ngay dưới dải sóng */
.wavebar { margin-top: 12px; }
#selSay { font-family: inherit; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--muted); }
@media (max-width: 767px) { .wavebar #selSay { order: -1; flex-basis: 100%; } .wavebar > .grow, .wavebar + .foot > .grow { display: none; }
  .wavebar > .btn, .wavebar + .foot > .btn { flex: 1 1 0; min-width: max-content; } }        /* điện thoại: hai nút chia đều một hàng thay vì xếp lệch trái mỗi nút một cỡ */
.wavebar + .foot { margin-top: 8px !important; gap: 8px; flex-wrap: wrap; }
/* Bảng thuật ngữ: dòng lỗi khi lưu (15/10) */
.terms-r [aria-invalid="true"] { border-color: var(--bad); }
.terms-err { grid-column: 1 / -1; margin-top: -2px; color: var(--bad); font-size: 12.5px; }
/* câu có nút Tạo lại câu (15/10, kiểm thử 30 máy: nút nổi đè cuối chữ): chừa chỗ bên phải, thứ tự [giờ][chữ][▶][↻] */
.s3-s.has-r .s3-sb { padding-inline-end: 44px; }
.s3-s.has-r .s3-sr { inset-inline-end: 6px; }
/* Thêm giọng — bảng tiêu chí (15/10, kiểm thử 30 máy: cột số đo chiếm chỗ, tên tiêu chí rớt từng chữ trên điện thoại) */
.checks > div > .mono { white-space: nowrap; text-align: end; }        /* giá trị ngắn ("Đỉnh -18,1 dB"): một dòng; max-width % trong cột auto làm vỡ ba dòng */
@media (max-width: 767px) { .checks > div { grid-template-columns: 20px minmax(0, 1fr); } .checks > div > .mono { grid-column: 2; white-space: normal; text-align: start; } }
/* Studio: tốc độ + âm lượng hiện ở mọi khổ (15/10, kiểm thử: 13 lần báo thiếu trên điện thoại; trước ẩn tới 1279 px). Điện thoại: loa là nút tắt / bật tiếng */
.s3-vol.off svg { opacity: .4; }
@media (max-width: 767px) { .s3-vol input { display: none; } .s3-vol { min-width: 40px; height: 40px; justify-content: center; cursor: pointer; } }
/* Studio — Giọng mới chưa mở: nói lý do ở MỌI khổ (15/10, kiểm thử: 56 người báo "bị khoá mờ, không biết vì sao"; trước chỉ điện thoại có), hai nút cách nhau */
.s3-ab { display: inline-flex; gap: 4px; padding: 4px; }
.s3-ab button[data-ab="new"]:disabled { opacity: .75; }
.s3-ab button[data-ab="new"]:disabled::after { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; }        /* 15/10 chủ sản phẩm: bỏ chữ "· mở khi ghép xong" (dài, gây tràn) — ổ khoá + chú thích khi rê chuột */
.menu .menu-x { margin-top: 4px; border-top: 1px solid var(--line); color: var(--muted); justify-content: center; }
/* nút nguồn bị khoá: dòng lý do (15/10) + nút khoá trông khoá thật (kiểm thử: nút Tạo giọng / Lưu khoá vẫn đen đậm như bấm được) */
.srcs .btn .why { font-size: 11.5px; font-weight: 400; color: var(--faint); }
.btn.pri:disabled, .btn.pri[aria-disabled="true"], .btn.danger:disabled { background: var(--raised); border-color: var(--line-2); color: var(--faint); box-shadow: none; cursor: not-allowed; }
/* Tạo giọng: đoạn mẫu nhiều dòng, trải hết bề ngang (15/10) */
.design .d-text { grid-column: 1 / -1; }
.design .d-text textarea { min-height: 112px; resize: vertical; line-height: 1.55; }
.design .d-tx { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .design .d-tx small { flex: 1; }
/* bộ đếm hàng chờ (15/10) */
.qpos { display: flex; align-items: baseline; gap: 10px; margin-top: 10px; }
.qpos .qn { font-size: 40px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
.qpos .qn::before { content: "#"; font-size: 24px; color: var(--muted); margin-inline-end: 2px; }
.qpos span { color: var(--muted); font-size: 13px; }
/* bảng tóm tắt Studio gọn trên điện thoại (15/10, chủ sản phẩm: bảng thông báo / bảng chờ nhiều chữ, tốn chỗ) */
@media (max-width: 767px) { .qpos { margin-top: 6px; } .qpos .qn { font-size: 30px; } .qpos .qn::before { font-size: 18px; } #s3Sum .s3-h { font-size: 16px; margin-bottom: 2px; } }
.qpos .btn { margin-inline-start: auto; }
@media (max-width: 767px) { #s3TlPh { display: none; } .s3-list .s3-sk { display: none; } }
.s3-tl:has(> #s3Scroll[hidden]) { display: none; }        /* chưa có dải khớp: bỏ cả khung ở mọi khổ — câu nhắc chờ đã có ở cột lời bên phải, không nói hai nơi */        /* chưa có dải khớp: bỏ cả khung, không để một dải trắng rỗng */
/* bảng chờ một hàng (15/10): # vị trí · tiêu đề + dòng phụ · Huỷ */
.qrow { display: flex; align-items: center; gap: 14px; }
.qrow .qn { flex: none; min-width: 52px; font-size: 32px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.qrow .qn::before { content: "#"; font-size: 18px; color: var(--muted); margin-inline-end: 1px; }
.qrow .qt { flex: 1; min-width: 0; } .qrow .s3-h { margin: 0; } .qrow .muted { font-size: 13px; }
.qrow .btn { flex: none; }

.lim-list { margin: 10px 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lim-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: 10px; background: var(--raised); }
.lim-list b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.lim-list span { flex: none; color: var(--bad); }
.phead > .chip2 { margin-inline-start: auto; }        /* "Bản N" + người sửa dồn về phải, không trôi giữa hàng tiêu đề */
.tabs.tab-more { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent); }
[dir="rtl"] .tabs.tab-more { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 48px), transparent); }
/* ---- đang tải lên ở Video mới (15/10, chủ sản phẩm): tiến độ nằm trong cột phải, DƯỚI nút (nút Đổi giọng → Huỷ tải lên đứng yên đúng chỗ) */
.upbox { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.upbox .h { display: flex; align-items: baseline; justify-content: space-between; font-weight: 600; }
.upbox .h .mono { font-size: 22px; letter-spacing: -.02em; }
.upbox i { height: 8px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.upbox i em { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--live); transition: width .3s; }
.upbox small { font-size: 13px; line-height: 1.45; }
@media (max-width: 767px) { .upbox { display: none !important; } .new-side .actbar #go { min-width: 132px; } }      /* nút đủ rộng cho cả "Đổi giọng" lẫn "Huỷ tải lên": đổi chữ không xô vị trí */
/* 15/10 đảo nền ↔ thẻ: chip đang chọn trong khung nút nhóm / dải lọc (nền --raised) là màu NỀN trắng — màu thẻ mới chỉ chênh một nấc, khó thấy đang chọn */
:root:not([data-theme="dark"]) .seg button[aria-pressed="true"], :root:not([data-theme="dark"]) .segtabs .chip[aria-pressed="true"] { background: var(--bg); color: var(--text); }      /* 15/10: thiếu màu chữ → nút Giọng mới (.s3-ab cũng là .seg) trắng trên trắng ở điện thoại */

/* ---- nhiều người nói, giai đoạn 1 (15/10): khối Người nói trong cột phải Studio + nhãn người nói trên từng câu */
.s3-people { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-l); background: var(--surface); box-shadow: var(--lift); }
.s3-pph { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.s3-pph b { white-space: nowrap; }
.s3-pph .muted { order: 3; flex-basis: 100%; font-size: 12.5px; }      /* 15/10 (chủ sản phẩm khoanh): câu hướng dẫn xuống dòng riêng — hàng đầu chỉ tiêu đề + nút */
.s3-pph .btn { margin-inline-start: auto; }
.s3-pl { display: grid; gap: 6px; }
.s3-pp { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; border-radius: 12px; }
.s3-pp.on { background: var(--raised); box-shadow: 0 0 0 1px var(--line-2); }
.s3-pb { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px; border: 0; border-radius: 12px; background: transparent; color: inherit; text-align: start; cursor: pointer; font: inherit; }
.s3-pb:hover { background: var(--hover); }
.s3-pb img, .s3-pb .av { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.s3-pb .nm { display: grid; gap: 1px; min-width: 0; }
.s3-pb .nm b { font-size: 14px; }
.s3-pb .d { font-size: 12.5px; color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.s3-pb .m { font-size: 11.5px; color: var(--faint); }
span.who { display: inline-block; margin-inline-start: 6px; padding: 0 7px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 18px; vertical-align: 1px; white-space: nowrap;
  background: color-mix(in srgb, var(--pc) 16%, var(--surface)); color: color-mix(in srgb, var(--pc) 75%, var(--text)); }
span.who.unsure { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--live) 70%, transparent); }
.av.pc0, .av.pc1, .av.pc2, .av.pc3 { background: color-mix(in srgb, var(--pc) 18%, var(--surface)); color: color-mix(in srgb, var(--pc) 80%, var(--text)); }
.pc0 { --pc: #6B3FB0; } .pc1 { --pc: #B4532A; } .pc2 { --pc: #2F5BB7; } .pc3 { --pc: #2E7D4F; }
@media (max-width: 767px) {
  .s3-people { padding: 10px 12px; }
  .s3-pl { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
  .s3-pp { grid-template-columns: auto; flex: none; justify-items: center; }
  .s3-pp > .btn { display: none; }
  .s3-pb { grid-template-columns: auto; justify-items: center; gap: 4px; padding: 4px; }
  .s3-pb .d, .s3-pb .m { display: none; }
  .s3-pb .nm b { font-size: 11.5px; font-weight: 600; }
}

/* ---- nhiều người nói, giai đoạn 2 (15/10): chế độ người nói ở Video mới, "Đọc bằng" từng người + chờ gán giọng trong Studio */
.step .sp-mode { margin-inline-start: auto; }
.sp-more { display: grid; gap: 10px; margin-top: 12px; }
.sp-more .hint { margin: 0; font-size: 13px; color: var(--muted); }
.voice[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.s3-pp > .s3-pv { grid-column: 1 / -1; }
.s3-pv { display: flex; align-items: center; gap: 6px; min-width: 0; margin-inline-start: 60px; padding: 4px 10px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg); color: inherit; font: inherit; font-size: 13px; text-align: start; cursor: pointer; justify-self: start; max-width: calc(100% - 60px); }
.s3-pv b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s3-pv .muted { white-space: nowrap; }
.s3-pv svg { flex: none; }
.s3-pv:disabled { border-color: transparent; background: transparent; cursor: default; }
.s3-pv:not(:disabled):hover { background: var(--hover); }
.s3-pu { margin: 0; font-size: 12.5px; }
.s3-people.wait { box-shadow: var(--lift), inset 0 0 0 1.5px color-mix(in srgb, var(--live) 55%, transparent); }
.s3-swho { gap: 4px; }
@media (max-width: 767px) {
  .step .sp-mode { margin-inline-start: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .step:has(.sp-mode) { flex-wrap: wrap; }
  .s3-pv { margin-inline-start: 0; max-width: 132px; padding: 2px 6px; font-size: 11px; justify-self: center; }
  .s3-pv .muted, .s3-pv svg { display: none; }
}

/* 15/10 (chủ sản phẩm: "bảng người nói trên PC gọn như mobile"): mọi khổ dùng dải người — ảnh / số, tên, giọng đang dùng ngay dưới tên;
   mô tả + thời gian nói + số câu ở chú thích khi rê chuột; nút nghe mẫu nhỏ ở góc ảnh (điện thoại vẫn ẩn) */
.s3-pl { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; }
.s3-pp { grid-template-columns: auto; flex: none; justify-items: center; gap: 4px; position: relative; }
.s3-pb { grid-template-columns: auto; justify-items: center; gap: 4px; padding: 4px; }
.s3-pb .d, .s3-pb .m { display: none; }
.s3-pb .nm b { font-size: 12.5px; font-weight: 600; }
.s3-pp > .btn.icon { position: absolute; top: -2px; inset-inline-start: calc(50% + 10px); width: 24px; height: 24px; min-width: 0; min-height: 0; padding: 0; }
.s3-pp > .btn.icon svg { width: 12px; height: 12px; }
.s3-pv { margin-inline-start: 0; max-width: 150px; padding: 2px 8px; font-size: 12px; justify-self: center; }
.s3-pv .muted { display: none; }
@media (max-width: 767px) { .s3-pp > .btn.icon { display: none; } .s3-pv { max-width: 132px; font-size: 11px; } .s3-pv svg { display: none; } }
/* 16/10 (14 người tràn ngang, không cuộn được): ô người đọc giọng mới xuống hàng theo lưới; người giữ tiếng gốc thành chip gọn */
.s3-pl { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 12px 6px; overflow: visible; }
.s3-pl .s3-pp { min-width: 0; }
.s3-pl .s3-pv { max-width: 100%; }
.s3-pk { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.s3-pcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 6px; }      /* cột đều: tên trái, thời gian phải, ▾ thẳng hàng */
.s3-pc { display: flex; align-items: center; min-width: 0; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg); }
.s3-pc.on { background: var(--raised); border-color: var(--text); }
.s3-pc .s3-pb { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 3px 4px 3px 3px; border-radius: 999px; font-size: 12.5px; }
.s3-pc .s3-pb img, .s3-pc .s3-pb .av { width: 24px; height: 24px; border-radius: 50%; font-size: 11px; }
.s3-pc .s3-pb b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s3-pc .s3-pb .mono { margin-inline-start: auto; font-size: 11.5px; color: var(--faint); font-variant-numeric: tabular-nums; }
.s3-pcv { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-inline-start: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.s3-pcv:hover { background: var(--hover); color: var(--text); }
@media (max-width: 767px) { .s3-pl { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 4px; } }

/* Thêm giọng trong tấm trượt ở Video mới (15/10): rộng hơn tấm Quản trị cho dạng sóng + nút nguồn */
.drawer.wide { width: min(760px, 100vw); }
.drawer .wiz { padding: 0; max-width: none; }

/* 16/10 (chủ sản phẩm): đang xử lý phải thấy ngay — dòng tóm tắt có chấm nhấp nháy + viền thở; đoạn máy đang làm tô nền tín hiệu nhấp nháy cả ô */
#s3Sum.busy { padding: 12px 14px; border-radius: 16px; animation: s3sum 1.6s ease-in-out infinite; }
#s3Sum.busy .s3-h::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-inline-end: 8px; border-radius: 50%; background: var(--live); vertical-align: 3px; animation: s3-pulse 1.2s ease-in-out infinite; }
@keyframes s3sum { 0%, 100% { background: var(--surface); } 50% { background: var(--live-soft); } }
.s3-li.live { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--live) 50%, transparent); animation: s3live 1.6s ease-in-out infinite; }
@keyframes s3live { 0%, 100% { background: var(--surface); } 50% { background: var(--live-soft); } }
@media (prefers-reduced-motion: reduce) { .s3-li.live { background: var(--live-soft); } #s3Sum.busy { background: var(--live-soft); } }
/* ô người đọc giọng mới hẹp: tên giọng xuống tối đa 2 dòng thay vì cắt "Giọng c…" */
.s3-pl .s3-pv { justify-content: center; justify-self: stretch; min-height: 38px; text-align: center; }      /* nút giọng dưới ảnh cùng rộng, cùng cao (1 hay 2 dòng chữ) */
.s3-pl .s3-pv b { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25; }
.s3-pl .s3-pv svg { display: none; }

/* 16/10 Kho giọng (tab trong Mẫu giọng): thanh lọc + hàng chip kiểu đọc + thẻ giọng */
.lib { display: grid; gap: 12px; }
.lbar { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; }
.lbar input[type=search] { flex: 1 1 240px; min-width: 0; }
.lbar label { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.lchips { display: flex; flex-wrap: wrap; gap: 6px; }
.lchips .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.lchips .chip small { font-weight: 500; color: var(--faint); }
.lchips .chip.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.lchips .chip.on small { color: inherit; opacity: .7; }
.lcard .lsub { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lcard .ava.g-m { background: color-mix(in srgb, #2F5BB7 16%, var(--surface)); color: color-mix(in srgb, #2F5BB7 80%, var(--text)); }
.lcard .ava.g-f { background: color-mix(in srgb, #B4532A 16%, var(--surface)); color: color-mix(in srgb, #B4532A 80%, var(--text)); }
.lcard .chip2.sty { background: var(--live-soft); color: var(--live-ink); }
@media (max-width: 767px) { .lchips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); } .lbar label { flex: 1 1 40%; } }
/* 16/10 (chủ sản phẩm: "voice đã đưa lên web nằm đâu"): điện thoại — tab Kho giọng bị đẩy ra ngoài mép phải (x = 364 px ở khổ 360–390), phải vuốt mới thấy.
   Ba tab Mẫu giọng chia đều một hàng, chữ xuống dòng khi chật */
@media (max-width: 767px) {
  #vtabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding-inline-end: 0; overflow: visible; }
  #vtabs button { height: auto; min-height: 44px; padding: 6px 4px; line-height: 1.25; font-size: 13.5px; }
  #vtabs .tl { display: none; } #vtabs .ts { display: inline; }      /* soát 16/10: nhãn dài xuống dòng làm số đếm chỗ dưới chỗ cạnh — điện thoại dùng nhãn ngắn một dòng */
  #vtabs button b { margin-inline-start: 4px; }
}

/* 16/10: thẻ giọng vừa lưu nháy viền tại chỗ (thay toast) */
.vcard.flash { animation: cflash 1.2s ease-in-out 2; }
@keyframes cflash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 3px var(--live); } }      /* chỉ viền: giữ nền thẻ */      /* thẻ giọng vừa lưu (thay toast, soát 16/10) */
@media (prefers-reduced-motion: reduce) { .vcard.flash { animation: none; box-shadow: 0 0 0 3px var(--live); } }

/* 16/10: tấm trượt "Chọn trong Kho giọng" ở Video mới — chọn nhiều giọng */
.drawer .lpick { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-content: start; }
.lcard.on { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.lpk { min-width: 76px; justify-content: center; }
.lpk.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.lpk svg { width: 15px; height: 15px; }
.lpn { font-size: 13px; color: var(--muted); }
.lptabs { margin-top: -4px; }
.lpn { display: grid; gap: 2px; min-width: 0; }
.lpn #lpN { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lpc { font-size: 12.5px; color: var(--muted); }
/* 16/10: Tiếng khác trong video (Studio) */
.s3-lgs { display: grid; gap: 6px; }
.s3-lg { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.s3-lg .tx { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.s3-lg .vn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s3-lg .btn { flex: none; }
/* 16/10 (soát giao diện): thanh lọc trạng thái trên điện thoại vuốt ngang — mép phải mờ dần báo còn mục */
@media (max-width: 767px) { .ptools .segtabs { -webkit-mask-image: linear-gradient(90deg, #000 72%, transparent); mask-image: linear-gradient(90deg, #000 72%, transparent); } }
/* 16/10 (soát giao diện): bỏ chữ in hoa toàn bộ ở nhãn nhóm (.side-h, .s3-mini, .s3-sheet h3, .card .sub3) — lệ chỉ viết hoa chữ đầu câu */
.lcard .lft { display: flex; align-items: center; gap: 8px; }
.lcard .lft .tags { flex: 1 1 auto; min-width: 0; }
.lcard .lft .btn { flex: none; }
/* 16/10 (chuẩn HDS 4A.3): nút chính của hộp phá huỷ tô đỏ, không chỉ viền */
.dlg-f .btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.dlg-f .btn.danger:hover { background: color-mix(in srgb, var(--bad) 86%, #000); border-color: var(--bad); color: #fff; }
/* 16/10 (soát hành trình): màn cảm ứng — chạm qua một mục điều hướng không làm nó sáng dính (hover dính sau khi chạm) */
@media (hover: none) { .nav:not(.on):hover { background: transparent; } }
.pickv { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--bg); }
.pickv label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }

/* ---------------------------------------------------------------- 16/10 Studio lúc video đã xong (chủ sản phẩm duyệt canvas, 11 điểm) */
/* 5–6: Tải video tách đôi */
.split { display: inline-flex; }
.split > .btn:first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
.split > .btn + .btn { margin-inline-start: -1px; border-start-start-radius: 0; border-end-start-radius: 0; padding-inline: 10px; }
.split.pri > .btn + .btn { border-inline-start-color: color-mix(in srgb, var(--on-accent, #fff) 30%, transparent); }
/* 3: nút quyết định nằm trong đoạn đang mở (mọi khổ); thanh dưới chỉ còn phần phát */
.s3-dock .s3-now, .s3-dock > .s3-dec { display: none; }
.s3-dec.in-row { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.s3-dec.in-row:empty { display: none; }
.s3-dec.in-row .btn.pri { margin-inline-start: auto; }
/* 11: chạm đúp ±5 giây */
.s3-skip { position: absolute; top: 50%; z-index: 3; padding: 8px 12px; border-radius: 999px; background: rgba(11, 11, 10, .62); color: #F3F2EE; font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transform: translateY(-50%); }
.s3-skip.l { left: 16%; } .s3-skip.r { right: 16%; }
.s3-skip.go { animation: s3skip .7s ease-out; }
@keyframes s3skip { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
.s3-mini .m { touch-action: none; }      /* kéo trên thanh = tua, không cuộn trang */
@media (max-width: 767px) {
  /* 10: video + công tắc + thanh tua dính đầu khi cuộn (tối đa ~30% màn); dải sóng chi tiết ẩn — thanh tua thay */
  .s3-left { position: sticky; top: 0; z-index: 6; background: var(--bg); padding-bottom: 6px; box-shadow: 0 8px 10px -10px rgba(11, 11, 10, .35); }
  .s3-stage { height: min(30dvh, 56vw); }
  .s3-tl { padding: 0 2px; background: transparent; }
  .s3-tl > .s3-scroll, .s3-tl > .s3-ph, .s3-tl > .s3-legend { display: none !important; }
  .s3-mini .m { height: 44px; }
  .s3-mini button:not(.btn)::before, .s3-mini button em { height: 6px; margin-top: -3px; }
  .s3-mini .tip { bottom: 40px; }
  /* tấm của đoạn mở NGAY DƯỚI video, không phủ tối lên video (nghe đoạn nào cũng thấy miệng) */
  .s3-li.open .s3-open { top: var(--s3vid, 40dvh); max-height: none; box-shadow: 0 -10px 24px rgba(11, 11, 10, .18); }
  /* 9: tên video có chỗ — nút sáng / tối vào ⋯, số credit ẩn ở Studio; ↻ từng câu chỉ trong tấm của đoạn */
  .s3-top [data-theme-btn], #s3Cred { display: none; }
  .s3-sents:not(.in-sheet) .s3-sr { display: none; }
  .s3-title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; line-height: 1.25; }
}
@media (min-width: 768px) {
  .s3-li.grp .s3-open .s3-dec.in-row { display: none; }      /* đoạn nhiều câu: hàng quyết định ở cuối thẻ (.after) */
  .s3-dec.after { margin: 0 14px 14px; }
  .s3-dec.in-row .btn { height: 34px; padding: 0 12px; font-size: 13.5px; }
}
@media (max-width: 767px) {
  .s3-dec.after { display: none; }
  .s3-acts .split { display: none; }      /* Tải video ở thẻ kết quả; nửa ▾ không lọt lên thanh trên */
  .s3-mini { grid-template-columns: minmax(0, 1fr) auto; }
  .s3-mini .m { grid-column: 1; grid-row: 1; }
  .s3-mini > span.mono:not(:first-child) { grid-column: 2; grid-row: 1; }
  .s3-mini .kn, .s3-mini .kn[hidden] { display: block; width: 18px; height: 18px; margin: -9px 0 0 -9px; transform: scale(1); }      /* nút kéo luôn hiện */
}
/* bảng 4 (duyệt 16/10): lọc + tìm một hàng; Xem N đoạn + Tải một hàng trên điện thoại */
.s3-tools { display: flex; align-items: center; gap: 8px; min-width: 0; }
.s3-tools .chips { flex: 1 1 auto; min-width: 0; }
.s3-tools .s3-follow { margin-inline-start: 0; }
.s3-tools:not(.find) .s3-find, .s3-tools:not(.find) #s3QX { display: none; }
.s3-tools.find .chips, .s3-tools.find #s3QOpen, .s3-tools.find .s3-follow { display: none; }
.s3-tools .s3-find { flex: 1 1 auto; }
#s3QOpen.on { background: var(--text); border-color: var(--text); color: var(--bg); }
#s3QN { flex: none; font-size: 12.5px; }
.s3-go { flex-wrap: nowrap; }
@media (max-width: 767px) {
  .s3-go .btn.pri { flex: 1 1 auto; min-width: 0; }
  .s3-go .only-s { flex: none; }
  .s3-tools #s3QOpen { width: 44px; height: 44px; }
}
/* soát Quản trị 16/10: ô nhập số không hiện mũi tên tăng / giảm của trình duyệt (khác kiểu các ô khác) */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#dlgErr:empty { display: none; }
/* soát Studio mới 16/10: chú thích dải sóng ô vuông bị tưởng là ô tích bật / tắt → chấm tròn; hàng quyết định dính đáy khi đoạn dài (40–90 giây) */
.s3-legend i { width: 8px; height: 8px; border-radius: 50%; }
@media (min-width: 768px) { .s3-dec.after { position: sticky; bottom: 0; z-index: 2; margin: 0; padding: 10px 14px 14px; background: inherit; border-radius: 0 0 var(--r-m, 12px) var(--r-m, 12px); } }

.saved { align-self: center; margin-inline-end: 8px; font-size: 13px; font-weight: 500; color: var(--ok); }      /* Đã lưu ✓ tại chỗ cạnh nút Lưu */

/* chủ sản phẩm 16/10: nút Tải video ở thẻ kết quả điện thoại luôn sát lề phải (nút chính / tải nằm phải, như hàng tác vụ U1) */
@media (max-width: 767px) { #s3Sum .s3-row.only-s { justify-content: flex-end; } }

/* 16/10 (ảnh chủ sản phẩm "So sánh sáng / tối"): đầu cột phải Studio — sáng theo mẫu 1a, tối theo mẫu 1c. Chỉ đổi thẻ báo, hàng Người nói, hàng lọc; bố cục màn giữ nguyên */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#s3Sum.al { padding: 0; background: none; box-shadow: none; animation: none; }
.s3-al { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n t b" "n s b"; align-items: center; gap: 2px 16px; padding: 18px 20px; border-radius: 18px; background: #FFF3EC; box-shadow: inset 0 0 0 1px #F8D9C8; }
.s3-an { grid-area: n; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--live); color: #fff; font-size: 26px; font-weight: 700; line-height: 1; }
.s3-al .s3-h { grid-area: t; margin: 0; font-size: 19px; }
.s3-al > .muted { grid-area: s; font-size: 13.5px; }
.s3-alb { grid-area: b; display: flex; align-items: center; gap: 8px; }
.s3-alb [data-a=goflag] { gap: 6px; }
:root[data-theme="dark"] .s3-al { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "n t b" "s s b"; align-items: baseline; column-gap: 12px; background: #2B1D16; box-shadow: inset 0 0 0 1px #4A2A1C; }
:root[data-theme="dark"] .s3-an { width: auto; height: auto; background: none; color: var(--live); font-size: 36px; border-radius: 0; }
:root[data-theme="dark"] .s3-alb { align-self: center; }
:root[data-theme="dark"] .s3-alb [data-a=goflag] { background: var(--live); border-color: var(--live); color: #141412; font-weight: 600; }
.s3-people.shut { padding: 10px 14px 10px 12px; }
.s3-people.shut .s3-pph { flex-wrap: nowrap; }
.s3-stack { display: inline-flex; flex: none; }
.s3-stack > * { width: 30px; height: 30px; margin-inline-start: -8px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface); object-fit: cover; font-size: 11px; }
.s3-stack > :first-child { margin-inline-start: 0; }
.s3-stack .more { display: grid; place-items: center; background: var(--raised); color: var(--muted); font-weight: 600; }
.s3-stack .av { display: grid; place-items: center; padding: 0; line-height: 1; font-weight: 600; }
#s3Sum.al { container-type: inline-size; }      /* cột phải hẹp (≤ 480 px): nút xuống hàng riêng, tiêu đề không bị bẻ đôi; màn rộng giữ một hàng như mẫu */
@container (max-width: 480px) {
  .s3-al { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n t" "n s" "b b"; }
  :root[data-theme="dark"] .s3-al { grid-template-areas: "n t" "s s" "b b"; }
  .s3-alb { margin-top: 12px; }
}
.s3-pmix { margin-inline-start: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; color: var(--muted); white-space: nowrap; }
.s3-people.shut .s3-pph > b, .s3-people.shut .s3-pph > .btn { flex: none; }
.s3-pmix + .btn { margin-inline-start: 0; }
:root:not([data-theme="dark"]) #s3F { padding: 4px; gap: 2px; border-radius: 999px; background: var(--raised); flex-wrap: nowrap; }
:root:not([data-theme="dark"]) #s3F .chip { border-color: transparent; background: transparent; color: var(--muted); }
:root:not([data-theme="dark"]) #s3F .chip[aria-pressed="true"] { background: var(--bg); color: var(--text); box-shadow: 0 1px 3px rgba(20, 20, 18, .12); }
:root:not([data-theme="dark"]) #s3F .chip b.hot { padding: 0 6px; border-radius: 999px; background: var(--live); color: #fff; }
:root[data-theme="dark"] #s3F .chip:not([aria-pressed="true"]) { border-color: transparent; background: transparent; }
:root[data-theme="dark"] #s3F .chip b.hot { color: var(--live); }
@media (max-width: 767px) {
  .s3-al { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n t" "n s" "b b"; padding: 14px; gap: 2px 12px; }
  :root[data-theme="dark"] .s3-al { grid-template-areas: "n t" "s s" "b b"; }
  .s3-al .s3-h { font-size: 16px; }
  .s3-an { width: 44px; height: 44px; font-size: 22px; }
  .s3-alb { margin-top: 10px; }
  .s3-alb > * { flex: 1 1 0; }
  .s3-alb > .only-s .split { width: 100%; }
  .s3-pmix { display: none; }
}

.brand-sub { margin-inline-start: 6px; font-weight: 500; color: var(--muted); }      /* 16/10 (chủ sản phẩm): logo "DubSI" + "Voice Swap" — tên mới theo tên miền dubsi.io */