/*
 * Trang giọng "layout v2" — CSS dựng từ mockup đã duyệt (velprompt.html bản
 * "UI này mới đúng", 28/10). Trang chỉ dùng stylesheet này (không nạp site.css /
 * fonts.css / homepage/index.css), nên mọi class ở đây là nguồn duy nhất.
 *
 * CHỈ những trang nằm trong frontend/data/voices/layout-v2.json mới nhận layout
 * này; 1.297 trang giọng còn lại vẫn dùng site.css + widget.js.
 */
/* ── Font tự host (không gọi fonts.googleapis.com) ──────────────────────────
   Inter variable 400–800 + bản vietnamese (Đ/đ, ă, ơ… nằm trong subset này) đủ
   cho một trang tiếng Việt; JetBrains Mono chỉ dùng cho nhãn [tag] nên giữ 1 weight.
   fonts.css của site (Inter tĩnh) KHÔNG nạp ở trang này — trang chỉ dùng
   voice-v2.css, nên không có hai bộ @font-face Inter tranh nhau. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/static/fonts/inter-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(/static/fonts/inter-var-vietnamese.woff2) format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/static/fonts/jbmono-500-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root{
  --bg:#ffffff; --paper:#f7f7f7; --panel:#f5f5f7; --ink:#111113; --ink-2:#515154; --ink-3:#6e6e73; --line:#e8e8ea; --bar:#dedede;

  /* SaydiVoice — coral là "tín hiệu", không phải trang trí:
     logo · chữ serif nhấn · con trỏ · âm thanh đang phát · nút Tạo giọng. Nút mặc định là đen.
     Không gradient màu. Phân lớp bằng nền xám nhạt, đường kẻ mảnh và bóng mềm. */
  --coral:#fe655d; --coral-2:#fc3e57; --coral-tint:#fff2f0; --coral-ink:#c2392f;
  /* Nền có chữ/icon trắng phải đạt AA (≥4.5:1) — coral gốc chỉ 2.9:1 */
  --coral-cta:#d93d35; --coral-cta-2:#c2392f;

  /* Kiểu chữ SaaS châu Âu: một họ Inter (optical size → tự thành Inter Display ở cỡ lớn) + JetBrains Mono */
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --display:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --w-head:560;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 18px 48px -18px rgba(0,0,0,.18);
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);font-optical-sizing:auto;font-feature-settings:"cv05","cv08","ss03";background:var(--bg);color:var(--ink);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
img,video{display:block;max-width:100%}
::selection{background:var(--coral-tint)}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:8px}
.wrap{max-width:1280px;margin:0 auto;padding:0 16px}
@media (min-width:640px){.wrap{padding:0 24px}}
@media (min-width:1024px){.wrap{padding:0 32px}}

/* Type */
.eyebrow{font-size:12px;font-weight:550;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.h2{font-family:var(--display);font-weight:var(--w-head);font-size:clamp(34px,5vw,60px);line-height:1.05;letter-spacing:-.034em}
/* Chữ nhấn trong tiêu đề — cùng font, độ đậm, đường chân chữ với phần còn lại; chỉ đổi màu.
   (Giữ tên lớp .serif cho tương thích.) #f5574e ≈ coral nhưng đạt 3:1 cho chữ lớn trên nền sáng */
.serif{font:inherit;letter-spacing:inherit;color:#f5574e}
.center{text-align:center}
.sec{padding:96px 0}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 22px;border-radius:999px;font-size:14.5px;font-weight:500;white-space:nowrap;transition:transform .25s var(--ease),background .2s,box-shadow .2s}
.btn:active{transform:scale(.97)}
.btn svg{width:12px;height:12px}
kbd{font-family:var(--mono);font-size:10.5px;padding:2px 5px;border-radius:4px;background:rgba(255,255,255,.22)}
.link{display:inline-flex;gap:6px;align-items:center;font-size:15px;color:var(--coral-ink);font-weight:500}
.link::after{content:"›";font-size:1.25em;line-height:1;transition:transform .25s var(--ease)}
.link:hover::after{transform:translateX(3px)}

/* ── Nav ─────────────────────────────── */
/* Banner quảng cáo xoay vòng — nguyên văn CSS inline của trang chủ voice.saydi.ai */
.sticky-top{position:sticky;top:0;z-index:100}
/* Nút ✕ tắt banner — thu gọn bằng grid-rows (không giật), nhớ 7 ngày */
.tb-wrap{position:relative;display:grid;grid-template-rows:1fr;transition:grid-template-rows .3s ease}
.tb-wrap>.top-banner-rotator{min-height:0;overflow:hidden}
.tb-wrap.off{grid-template-rows:0fr}
.tb-wrap[hidden]{display:none}
/* Như nút dismiss banner của Fish: 32×32 tròn, nền trong suốt (tertiary), chữ đảo màu trắng, lucide x 16px */
.tb-close{position:absolute;top:50%;right:12px;z-index:30;transform:translateY(-50%);display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid transparent;border-radius:999px;overflow:clip;color:#fff;background:transparent;transition:background-color .1s,opacity .2s}
.tb-close:hover{background:rgba(255,255,255,.16)}
.tb-close:active{background:rgba(255,255,255,.24)}
.tb-close:focus-visible{outline:none;background:rgba(255,255,255,.16);box-shadow:0 0 0 2px rgba(0,0,0,.25),0 0 0 4px #fff}
.tb-close svg{width:16px;height:16px}
.tb-wrap.off .tb-close{opacity:0;pointer-events:none}
@media (max-width:760px){.tb-close{right:4px}.top-banner{padding-right:40px}}
.top-banner{position:relative;z-index:20;display:flex;align-items:center;justify-content:center;min-height:52px;padding:6px 16px;color:#fff;overflow:hidden}
.top-banner--api{background:linear-gradient(90deg,#f97316 0%,#fb923c 50%,#f97316 100%)}
.top-banner--notex{background-color:#2c4a7a;background-image:linear-gradient(90deg,rgba(7,18,52,.3) 0%,rgba(8,24,64,.62) 30%,rgba(8,24,64,.62) 70%,rgba(0,110,170,.26) 100%),url("/static/homepage/promo-banner-bg.webp?v=199cf32b62a4");background-position:center,center 60%;background-repeat:no-repeat,no-repeat;background-size:cover,cover}
.top-banner--saydi{background-color:#5a2416;background-image:linear-gradient(90deg,rgba(46,16,8,.38) 0%,rgba(70,26,16,.66) 26%,rgba(70,26,16,.66) 74%,rgba(150,80,44,.36) 100%),url("/static/homepage/promo-banner-bg.webp?v=199cf32b62a4");background-position:center,center 50%;background-repeat:no-repeat,no-repeat;background-size:cover,cover}
.top-banner__inner{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:1240px;min-height:40px;padding:0 120px;text-align:center}
.top-banner__boombox,.top-banner__covers{position:absolute;top:50%;height:44px;width:auto;transform:translateY(-50%);pointer-events:none;user-select:none}
.top-banner__boombox{left:0}
.top-banner__covers{right:0}
.top-banner__content{display:flex;align-items:center;justify-content:center;gap:18px;min-width:0}
.top-banner__title{margin:0;font-size:16px;line-height:1.2;font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.top-banner__title strong{margin-left:0;font-weight:800;color:#fde047}
.top-banner__logo{width:26px;height:26px;flex:none;border-radius:8px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.top-banner--notex .top-banner__title strong{color:#b8dbff}
.top-banner--saydi .top-banner__title strong{color:#ffc49b}
.top-banner__subtitle{color:rgba(255,255,255,.95);font-size:14px;line-height:1.35}
.top-banner__cta{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;border-radius:999px;background:var(--ink);color:#fff;font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);transition:background .18s ease}
.top-banner__cta:hover{background:#000}
.top-banner__cta-arrow{display:inline-block;margin-left:4px;transition:transform .18s ease}
.top-banner__cta:hover .top-banner__cta-arrow{transform:translateX(3px)}
.top-banner-rotator{display:grid}
.top-banner-rotator>.top-banner{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s}
.top-banner-rotator>.top-banner.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .45s ease,visibility 0s}
@media (prefers-reduced-motion:reduce){.top-banner-rotator>.top-banner{transform:none;transition:none}}
@media (max-width:1100px){.top-banner__inner{padding:0 92px}.top-banner__boombox,.top-banner__covers{height:38px}}
@media (max-width:760px){.top-banner{padding:4px 10px}.top-banner__inner{position:static;min-height:44px;padding:0}.top-banner__covers{right:0;top:0;width:100%;height:100%;transform:none;object-fit:contain;object-position:right center;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 52%);mask-image:linear-gradient(90deg,transparent 0%,#000 52%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.top-banner--api .top-banner__inner::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(249,115,22,.62) 0%,rgba(249,115,22,.93) 22%,rgba(249,115,22,.93) 62%,rgba(251,146,60,.18) 100%)}.top-banner__boombox{left:0;top:50%;height:36px;width:auto;z-index:2;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 68%,transparent 100%);mask-image:linear-gradient(90deg,#000 0%,#000 68%,transparent 100%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.top-banner__content{position:relative;z-index:2;flex-wrap:wrap;gap:6px 12px}.top-banner__subtitle{font-size:13px}}
@media (max-width:760px){.top-banner--api .top-banner__subtitle{display:none}}
@media (max-width:520px){.top-banner__boombox{display:none}.top-banner__subtitle{display:none}.top-banner__title{font-size:14px}.top-banner__cta{padding:7px 12px;font-size:12px}}
@media (max-width:380px){.top-banner__title{font-size:13px}.top-banner__cta{padding:6px 10px;font-size:11px}}
/* Header — theo landing-header chính thức của SaydiVoice (voice.saydi.ai: homepage/index.css + auth.css) */
.nav{--grad:linear-gradient(135deg,#ff9e99,#fe655d 55%,#fc3e57);position:relative;z-index:100;display:flex;justify-content:center;width:100%;height:64px;background:var(--paper);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s,box-shadow .2s}
.nav.scrolled{background:rgba(247,247,247,.85);box-shadow:0 1px 0 var(--line)}
.header-content{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:1440px;height:100%;min-width:0;padding:0 12px}
@media (min-width:1025px){.header-content{padding:0 24px}}
.header-left{display:flex;align-items:center;gap:8px;min-width:0}
.mobile-menu-toggle{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:#171717;transition:background .2s,color .2s}
.mobile-menu-toggle:hover{background:rgba(0,0,0,.06);color:#000}.mobile-menu-toggle:active{background:rgba(0,0,0,.1)}
.mobile-menu-toggle svg,.mobile-menu-close svg,.lang-switch-btn>svg{width:20px;height:20px;stroke-width:1.5}
.site-brand{display:inline-flex;align-items:center;flex:none}
.site-brand .brand-logo{display:block;height:20px;width:auto;filter:drop-shadow(0 3px 10px rgba(254,101,93,.3));transition:transform .18s,filter .18s}
.site-brand:hover .brand-logo{filter:drop-shadow(0 6px 16px rgba(254,101,93,.48));transform:translateY(-1px)}
.producthunt-badge{display:inline-flex;align-items:center;margin-left:4px;opacity:.85;transition:opacity .2s}
.producthunt-badge:hover{opacity:1}.producthunt-badge svg{height:40px;width:auto}
.header-center{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;padding:0 24px}
.nav-menu{display:flex;align-items:center;justify-content:center;gap:2px}
.nav-item-wrap{position:relative;display:inline-flex}
.nav-item{display:inline-flex;align-items:center;gap:4px;height:36px;padding:0 16px;border-radius:999px;font-size:15px;font-weight:500;line-height:18px;color:#000;white-space:nowrap;cursor:pointer;transition:background .15s ease}
.nav-item:hover,.nav-item-wrap:hover .nav-item,.nav-item-wrap:focus-within .nav-item{background:#f3f4f6}
.nav-item svg{width:12px;height:12px;transition:transform .2s}
.nav-dropdown:hover .nav-item svg,.nav-dropdown:focus-within .nav-item svg{transform:rotate(180deg)}
.nav-dropdown-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);z-index:1000;min-width:max-content;padding:8px 0;background:#fff;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,.15)}
.nav-dropdown-menu::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}
.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown:focus-within .nav-dropdown-menu{display:block}
.nav-dropdown-item{display:block;padding:10px 16px;font-size:14px;color:#333;white-space:nowrap}
.nav-dropdown-item:hover,.nav-dropdown-item:focus-visible{background:#f5f5f5}
@media (max-width:1239.5px){.nav-item{font-size:14px;padding:0 12px}}
.logo-wrapper{display:none;align-items:center}
.logo-wrapper img{display:block;height:18px;width:auto}
.header-actions{display:flex;align-items:center;gap:8px;min-width:0}
.lang-dropdown-wrapper{position:relative}
.lang-switch-btn{display:flex;align-items:center;gap:6px;height:30px;padding:4px 10px;border-radius:20px;font-size:14px;font-weight:500;color:#171717;transition:background .2s}
.lang-switch-btn:hover,.lang-switch-btn[aria-expanded=true]{background:#f3f4f6}
.lang-switch-btn .cv{width:12px;height:12px}
.lang-dropdown-panel{position:absolute;right:0;top:100%;z-index:100;display:none;min-width:180px;max-height:320px;overflow-y:auto;margin-top:8px;padding:8px;background:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.12)}
.lang-dropdown-panel.on{display:block}
.lang-dropdown-panel a{display:block;padding:8px 12px;border-radius:8px;font-size:14px;color:#36353a}
.lang-dropdown-panel a+a{margin-top:3px}
.lang-dropdown-panel a:not(.lang-active):hover{background:#f5f5f7}
.lang-dropdown-panel a.lang-active{background:#fff2f0;color:#fe655d;font-weight:600}
.fp-auth-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;height:38px;padding:0 14px;border-radius:999px;border:1px solid #e4e4e7;background:#fff;color:#18181b;font-size:14px;font-weight:600;white-space:nowrap}
.fp-auth-btn:hover{background:#f5f5f7}
.fp-auth-btn svg{width:16px;height:16px;flex:none;color:#52525b}
.open-studio-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;height:36px;padding:0 20px;border-radius:20px;background:var(--grad);color:#fff;font-size:14px;font-weight:600;white-space:nowrap;box-shadow:0 4px 14px hsla(3,99%,68%,.3);transition:opacity .2s,transform .15s,box-shadow .2s}
.open-studio-btn:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 20px hsla(3,99%,68%,.45)}
/* Drawer mobile */
.mobile-menu-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .3s}
.mobile-menu-drawer{position:fixed;top:0;left:0;z-index:201;width:min(100%,360px);height:100dvh;overflow-y:auto;padding:24px 0;background:#fff;transform:translateX(-100%);transition:transform .3s ease;visibility:hidden}
body.menu-open .mobile-menu-overlay{opacity:1;pointer-events:auto}
body.menu-open .mobile-menu-drawer{transform:none;visibility:visible}
.mobile-menu-header{display:flex;align-items:center;justify-content:space-between;padding:0 20px 20px;border-bottom:1px solid #f0f0f0}
.mobile-brand-link{font-size:18px;font-weight:800;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#fe655d}
.mobile-menu-close{display:inline-flex;align-items:center;justify-content:center;padding:4px;border-radius:8px;color:#36353a;transition:background .2s,color .2s}
.mobile-menu-close:hover{background:rgba(0,0,0,.06);color:#000}
.mobile-menu-nav{display:flex;flex-direction:column;padding:16px 0}
.mobile-menu-nav a,.mobile-nav-dropdown-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 20px;font-size:15px;font-weight:600;color:#36353a;text-align:left;transition:background .15s}
.mobile-menu-nav a:hover,.mobile-nav-dropdown-header:hover{background:#f5f5f5}
.mobile-nav-dropdown-header svg{width:12px;height:12px;transition:transform .2s}
.mobile-nav-dropdown.open .mobile-nav-dropdown-header svg{transform:rotate(180deg)}
.mobile-nav-dropdown-content{display:none;padding-left:16px}
.mobile-nav-dropdown.open .mobile-nav-dropdown-content{display:block}
.mobile-nav-dropdown-content a{font-weight:500}
.mobile-menu-cta{padding:0 20px}
.mobile-nav-studio{display:block;padding:12px;border-radius:20px;background:var(--grad);color:#fff;font-size:15px;font-weight:600;text-align:center}
/* Breakpoints như bản chính thức: ≤1240 ẩn badge PH; ≤1024 gom menu vào drawer; ≤767 logo vào giữa */
@media (max-width:1240px){.producthunt-badge{display:none}}
@media (max-width:1024px){.nav-menu{display:none}.mobile-menu-toggle{display:flex}.lang-switch-btn{padding:4px 8px}}
@media (max-width:767.5px){.header-left .site-brand{display:none}.logo-wrapper{display:flex}.header-center{position:absolute;left:50%;transform:translateX(-50%);padding:0}.header-actions{gap:4px}.fp-auth-label{display:none}.fp-auth-btn{width:38px;padding:0}.open-studio-btn{display:none}.lang-switch-btn{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%}.lang-switch-btn span,.lang-switch-btn .cv{display:none}}
/* Brand — tỉ lệ theo site.css chính thức của SaydiVoice: badge ≈ 1,8 × cỡ chữ, mark chiếm ~74% badge,
   khoảng cách ≈ .48 × cỡ chữ, chữ 800 · -.03em · gradient #ff9e99 → #fe655d → #fc3e57 */
.logo{--fs:18px;display:inline-flex;align-items:center;gap:calc(var(--fs) * .48);font-family:var(--sans);font-size:var(--fs);line-height:1;font-weight:800;letter-spacing:-.03em;font-optical-sizing:none}
.b-badge{flex:none;display:grid;place-items:center;width:calc(var(--fs) * 1.8);height:calc(var(--fs) * 1.8);padding:calc(var(--fs) * .24);border-radius:calc(var(--fs) * .52);
  background:linear-gradient(160deg,#fff,#fff4f3);border:1px solid rgba(254,101,93,.16);box-shadow:0 2px 9px rgba(254,101,93,.20);transition:transform .18s,box-shadow .18s}
.b-badge svg{display:block;width:100%;height:100%;transition:transform .18s}
.logo:hover .b-badge{transform:translateY(-1px);box-shadow:0 6px 16px rgba(254,101,93,.32)}
.logo:hover .b-badge svg{transform:rotate(-4deg)}
.b-name{padding-bottom:.06em;background:linear-gradient(135deg,#ff9e99,#fe655d 55%,#fc3e57);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#fe655d}
/* Logo "thở" theo âm thanh — coral là tín hiệu: chỉ chuyển động khi có tiếng đang phát */
.nav.live .brand-logo .sv-mark path{animation:lg .9s ease-in-out infinite}
.nav.live .brand-logo .sv-mark path:nth-child(4){animation-delay:.1s}.nav.live .brand-logo .sv-mark path:nth-child(n+5){animation-delay:.2s}.nav.live .brand-logo .sv-mark path:nth-child(8){animation-delay:.3s}.nav.live .brand-logo .sv-mark path:nth-child(n+9){animation-delay:.4s}
@keyframes lg{50%{opacity:.35}}

/* ── Hero (MiniMax) ──────────────────── */
.hero{position:relative;background:var(--paper);padding:14px 0 56px;text-align:center;overflow:hidden}
/* Màn đầu = chỉ tiêu đề + composer, lấp đầy phần màn hình dưới banner/header (--stick-h đo bằng JS).
   Ô nhập co giãn theo chiều cao; chặn trên/dưới để luôn cân đối. Mobile giữ luồng cuộn tự nhiên. */
:root{--stick-h:116px}
@media (min-width:641px){
  .hero{padding-top:0}
  .hero>.stage{display:flex;flex-direction:column;justify-content:center;justify-content:safe center;height:calc(100svh - var(--stick-h));min-height:470px;padding-top:clamp(14px,3.2vh,44px);padding-bottom:clamp(18px,3.6vh,48px)}
  .stage .gen{flex:1 1 auto;display:flex;flex-direction:column;width:100%;max-width:1120px;max-height:760px;min-height:0;margin:clamp(14px,2.6vh,30px) auto 0}
  .stage .bezel,.stage .cmp,.stage .field,.stage .ta{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  .stage .field>.vbar{flex:none}
  .stage .ta-in{flex:1 1 auto;min-height:92px}
  .stage .gen textarea{height:100%}
  .stage .hl{height:auto}
}
/* Laptop thấp (≤ 820px chiều cao): gọn tiêu đề + header composer để nút ▶ vẫn trong màn đầu */
@media (min-width:641px) and (max-height:820px){
  .stage h1{font-size:clamp(34px,3.6vw,46px)}
  .stage .lede{margin-top:8px;font-size:16px;line-height:1.5}
  .stage .cmp-head{padding:14px 20px;gap:16px}
  .stage .vh-avb,.stage .vh-av{width:52px;height:52px}
  .stage .vh-pb{width:22px;height:22px}
  .stage .vh-name{font-size:20px;line-height:26px}
  .stage .vh-main{gap:6px}
  .stage .samples{padding-top:10px}
}
@media (min-width:641px) and (max-height:660px){
  .stage .bezel-foot{min-height:38px;padding:6px 16px 12px}
  .hero>.stage{padding-top:10px;padding-bottom:12px}
}
.hero>*{position:relative}
.hero .wrap>*{animation:rise 1s var(--ease) both}
.hero .wrap>*:nth-child(2){animation-delay:.08s}.hero .wrap>*:nth-child(3){animation-delay:.16s}.hero .wrap>*:nth-child(4){animation-delay:.24s}.hero .wrap>*:nth-child(5){animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
.hero h1{font-family:var(--display);font-weight:var(--w-head);font-size:clamp(36px,4.6vw,60px);line-height:1.05;letter-spacing:-.038em}
.hero h1 .serif{white-space:nowrap}
.lede{margin-top:12px;font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:var(--ink-2);letter-spacing:-.01em}
.lede strong{font-weight:600;color:var(--ink)}
@media (max-width:700px){.lede .br-d{display:none}}
@keyframes pulse{50%{opacity:.3}}
.eqi{gap:2px;align-items:center;height:12px}
.eqi i{width:2px;border-radius:1px;background:currentColor;animation:eq .9s ease-in-out infinite}
.eqi i:nth-child(2){animation-delay:.15s}.eqi i:nth-child(3){animation-delay:.3s}
@keyframes eq{0%,100%{height:30%}50%{height:100%}}

/* ── Khám phá giọng — theo "Discover More" của Fish Audio (Tailwind → CSS) ── */
.dsc{background:var(--paper);padding:64px 0}
@media (min-width:768px){.dsc{padding:96px 0}}
.dv-in{max-width:1280px;margin:0 auto;padding:0 16px}
@media (min-width:640px){.dv-in{padding:0 24px}}
@media (min-width:1024px){.dv-in{padding:0 32px}}
.dv-in>h2{margin-bottom:48px;font-size:24px;line-height:32px;font-weight:400;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
@media (min-width:768px){.dv-in>h2{font-size:36px;line-height:40px}}
.dv-groups{display:flex;flex-direction:column;gap:40px}
.dv-group{display:flex;flex-direction:column;gap:12px}
.dv-gh{display:flex;align-items:center;justify-content:space-between;padding:0 8px}
.dv-gh h3{font-size:18px;line-height:28px;font-weight:500;color:var(--ink)}
.dv-gh a{font-size:14px;line-height:20px;color:var(--ink-2);transition:color .15s}
.dv-gh a:hover{color:var(--ink)}
.dv-grid{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;grid-template-rows:repeat(2,auto);gap:4px 16px;margin:0 -16px;padding:0 16px 8px;overflow-x:auto;scrollbar-width:none}
.dv-grid::-webkit-scrollbar{display:none}
@media (min-width:640px){.dv-grid{grid-auto-flow:row;grid-auto-columns:auto;grid-template-rows:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin:0;padding:0;overflow:visible}}
@media (min-width:768px){.dv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dv-item{display:flex;align-items:center;gap:12px;width:256px;min-width:0;padding:8px;border-radius:12px;transition:background .15s}
@media (min-width:640px){.dv-item{width:auto}}
.dv-item:hover{background:rgba(17,17,19,.045)}
.dv-av{flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#e5e5ea}
.dv-av img{display:block;width:100%;height:100%;object-fit:cover}
.dv-tx{display:flex;min-width:0;flex:1;flex-direction:column;gap:2px}
.dv-n{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:14px;line-height:20px;font-weight:500;color:var(--ink);transition:color .15s}
.dv-item:hover .dv-n{color:var(--coral-ink)}
.dv-s{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;line-height:16px;color:var(--ink-2)}
.dv-tags{display:flex;min-width:0;align-items:center;gap:4px}
.vf{flex:none;width:12px;height:12px;border-radius:2px}
.dv-tags i{flex:none;padding:0 6px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.6);font-size:10px;line-height:15px;font-style:normal;color:var(--ink-2)}

/* ── Composer (MiniMax / ElevenLabs prompt box) ── */
.gen{max-width:1040px;margin:22px auto 0;text-align:left}
/* Bezel: khung mỏng ôm composer + dải chân (học từ Fish Audio "Powered by…") */
/* Bezel — y hệt Fish: canvas Iridescence (opacity .3) bo 28px; thẻ trắng thụt 4px, cách đáy 44px, bo 24px */
.bezel{position:relative;isolation:isolate;border-radius:28px;padding:4px 4px 0}
.bz-fx{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:28px;opacity:.55;background:#fff}
.bz-fx canvas{display:block;width:100%;height:100%}
.bz-fx.nogl{background:linear-gradient(135deg,#fe655d,#fff 45%,#ffb36b)}
.bezel-foot{display:flex;align-items:flex-end;justify-content:center;min-height:44px;padding:8px 16px 16px;text-align:center;font-size:12px;line-height:16px;font-weight:600;color:#000;white-space:nowrap}
.bezel-foot .s{display:none}
@media (min-width:768px){.bezel-foot{font-size:14px;line-height:20px}}
@media (max-width:640px){.bezel-foot .l{display:none}.bezel-foot .s{display:inline}}
/* Phân cấp bằng sắc nền thay cho đường kẻ (như Fish): header + thanh dưới = bề mặt phụ --surf,
   vùng nhập = trắng — sáng nhất, là nơi duy nhất mắt cần dừng. Không viền bao, chỉ bóng rất nhẹ tách khỏi bezel. */
.cmp{--surf:#f6f6f7;position:relative;background:#fff;border-radius:24px;box-shadow:0 1px 2px rgba(17,17,19,.04),0 8px 24px -12px rgba(17,17,19,.10)}

/* Mirror highlight: textarea trong suốt nằm trên một lớp div tô màu thẻ biểu cảm.
   Hai lớp phải trùng tuyệt đối về font, padding, cách xuống dòng và không có scrollbar. */
.ta-in{position:relative}
.gen textarea,.hl{display:block;width:100%;height:160px;margin:0;border:0;font-family:var(--sans);font-size:18px;line-height:1.7;letter-spacing:-.01em;padding:12px 60px 14px 26px;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;overflow-y:auto;scrollbar-width:none}
.gen textarea::-webkit-scrollbar,.hl::-webkit-scrollbar{display:none}
.hl{position:absolute;inset:0;overflow:hidden;color:var(--ink);pointer-events:none}
.hl mark{background:var(--coral-tint);color:var(--coral-ink);border-radius:5px;box-shadow:0 0 0 2px var(--coral-tint)}
.gen textarea{position:relative;resize:none;outline:0;background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--coral)}
.gen textarea::selection{background:rgba(254,101,93,.22)}
.gen textarea:focus-visible{outline:none}
.gen textarea::placeholder{color:var(--ink-3);-webkit-text-fill-color:var(--ink-3)}
.x-clear{position:absolute;top:10px;right:18px;z-index:1;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--ink-3);opacity:0;pointer-events:none;transition:opacity .2s,background .2s,color .2s}
.x-clear svg{width:10px;height:10px}
.x-clear.on{opacity:1;pointer-events:auto}
.x-clear:hover{background:var(--panel);color:var(--ink)}
.cmp-bar{position:relative;display:flex;align-items:center;gap:6px;padding:12px 12px 12px 14px;background:var(--surf);border-radius:0 0 24px 24px}
/* tiến trình 2px trên viền thanh dưới: chạy vô định khi đang tạo, theo vị trí phát khi nghe */
.prog-track{position:absolute;left:0;right:0;top:-1px;height:2px;overflow:hidden;pointer-events:none}
/* vùng bấm 14px quanh thanh 2px để tua khi đã có kết quả */
.seek{position:absolute;left:0;right:0;top:-8px;height:14px;cursor:pointer;display:none;z-index:1}
.seek.on{display:block}
.seek:hover+.prog-track,.seek:focus-visible+.prog-track{height:4px;top:-2px}
.prog{height:100%;width:0;background:var(--coral);border-radius:2px}
.prog.busy{width:30%;animation:indet 1.1s var(--ease) infinite}
@keyframes indet{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
.pw{position:relative}
.pill{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:999px;background:var(--panel);font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;transition:background .2s}
.pill:hover,.pill[aria-expanded=true]{background:#e9e9ee}

.pill img{width:28px;height:28px;border-radius:50%;object-fit:cover}
.pill .cv{width:9px;height:9px;color:var(--ink-3);transition:transform .25s var(--ease)}
.pill[aria-expanded=true] .cv{transform:rotate(180deg)}
.pill.ghost{background:transparent;color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)}
.pill.ghost:hover,.pill.ghost[aria-expanded=true]{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px #c7c7cc}
.cmp-bar .sp{flex:1}
/* Cụm hành động trái — y hệt Fish: Add to Collection · Share · Like · Dislike · Bookmark (ẩn trên mobile) */
.g-acts{display:none;gap:8px;margin-left:2px}
/* Mockup bật cụm icon phụ (bộ sưu tập/chia sẻ/thích/lưu) từ 768px, nhưng đo
   thật thì thanh đáy cần ~840px mới vừa: ở 768–839px nút Tạo giọng bị đẩy ra
   ngoài thẻ và bị cắt (mockup gốc cũng vậy — xem docs/trang-giong-layout-v2.md).
   Đẩy mốc lên 860px: dưới mốc đó ẩn cụm icon phụ, mọi thứ còn lại giữ nguyên. */
@media (min-width:860px){.g-acts{display:flex}}
.fbtn-sm{height:36px;padding:0 14px}
.fbtn-raise{background:linear-gradient(#fff,#fafafb);box-shadow:0 1px 1px rgba(14,14,17,.04),0 2px 4px rgba(14,14,17,.04)}
.fbtn-sm.ic{gap:4px}
.fbtn[aria-pressed=true]{background:#f5f5f7}
#likeBtn[aria-pressed=true]{color:var(--coral-ink)}
#likeBtn[aria-pressed=true] svg,#dislikeBtn[aria-pressed=true] svg,#saveBtn[aria-pressed=true] svg{fill:currentColor}
.coll-menu{width:260px}
.coll-menu .cm-h{padding:8px 10px 6px;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--ink-3)}
.coll-menu .cm-empty{padding:4px 10px 10px;font-size:13px;color:var(--ink-3)}
.coll-menu button{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;padding:9px 10px;border-radius:10px;font-size:14px;text-align:left}
.coll-menu button:hover{background:var(--panel)}
.coll-menu svg{width:16px;height:16px;color:var(--ink-2)}
.tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:5px 9px;border-radius:8px;background:var(--ink);color:#fff;font-size:12px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s}
.tip.on{opacity:1}
/* Cụm cuối thanh dưới — y hệt Fish: vạch chia · 210/500 · nút play tròn 40px phát sáng (đổi tím → coral) */
.g-end{display:flex;align-items:center;gap:8px}
.g-div{width:1px;height:24px;margin:0 4px;background:var(--line)}
@media (min-width:768px){.g-div{margin:0 20px}}
.g-count{font-size:14px;line-height:20px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.g-count .g-max{color:var(--ink)}
.g-count.warn #count{color:var(--coral-ink)}
.g-glow{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex:none;border-radius:50%;overflow:hidden;cursor:pointer;color:var(--ink);transition:transform .2s var(--ease),opacity .2s,box-shadow .3s}
.g-glow::before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,#fe655d,#ffd2ce,#fff,#ffb3ae,#fe655d);animation:glow 3.2s linear infinite}
.g-glow .gl-in{position:absolute;inset:2px;border-radius:50%;background:radial-gradient(circle at 32% 28%,#fff 0%,#fff1ef 55%,#ffd9d5 100%);display:flex;align-items:center;justify-content:center}
.g-glow{box-shadow:0 0 0 1px rgba(254,101,93,.18),0 4px 16px -2px rgba(254,101,93,.45)}
.g-glow:hover{box-shadow:0 0 0 1px rgba(254,101,93,.3),0 6px 22px -2px rgba(254,101,93,.6)}
.g-glow:active{transform:scale(.94)}
.g-glow:disabled{opacity:.4;cursor:default}
.g-glow:disabled::before{animation:none}
.g-glow .gi,.g-glow .gpz{width:20px;height:20px}
.g-glow .gpz{display:none}
.g-glow.playing .gi{display:none}.g-glow.playing .gpz{display:block}
.g-glow .spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(17,17,19,.2);border-top-color:var(--ink);animation:spin .8s linear infinite;display:none}
.g-glow.busy .spin{display:block}.g-glow.busy .gi{display:none}
@keyframes glow{to{transform:rotate(360deg)}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes spin{to{transform:rotate(360deg)}}

/* voice identity header (tham khảo Fish Audio: người dùng biết ngay mình đang nghe giọng nào) */
#studio{scroll-margin-top:132px}
/* Header giọng — bố cục + hàng nút y hệt Fish Audio: avatar 72 · gap 24 · padding 24 · Use Voice / Clone / ⋯ */
.cmp-head{display:flex;align-items:center;gap:24px;padding:24px;background:var(--surf);border-radius:24px 24px 0 0}
.vh-avb{position:relative;flex:none;width:72px;height:72px;border-radius:50%}
.vh-av{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block;background:#e5e5ea}
.vh-pb{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;box-shadow:0 0 0 3px #fff;transition:background .2s,transform .2s var(--ease)}
.vh-pb svg{width:9px;height:9px;margin-left:1px}
.vh-pb .eqi{display:none}
.vh-avb:hover .vh-pb{transform:scale(1.08)}
.vh-avb.is-playing .vh-pb,.vh-avb.is-loading .vh-pb{background:var(--coral-cta)}
.vh-avb.is-playing .pp{display:none}.vh-avb.is-playing .eqi{display:flex}
.vh-main{display:flex;min-width:0;flex:1;flex-direction:column;gap:8px}
.vh-top{display:flex;min-width:0;align-items:flex-start;justify-content:space-between;gap:16px}
.vh-tx{display:flex;min-width:0;max-width:100%;flex:1;flex-direction:column;gap:4px}
.vh-name{font-family:var(--sans);font-size:24px;font-weight:var(--w-head);line-height:32px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vh-desc{font-size:14px;line-height:20px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vh-tags{display:flex;flex-wrap:wrap;gap:8px}
.vh-act{display:flex;flex-shrink:0;flex-wrap:wrap;gap:8px}
.fbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;border:1px solid transparent;font-size:14px;line-height:20px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:clip;transition:background-color .1s,border-color .1s}
.fbtn svg{width:16px;height:16px;flex:none}
.fbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fbtn-2{background:#e9e9ec}
.fbtn-2:hover{background:#e1e1e6}.fbtn-2:active{background:#d6d6dc}
.fbtn-3{background:#fff;border-color:#e0e0e4}
.fbtn-3:hover{background:#f5f5f7}.fbtn-3:active{background:#ebebee}
.fbtn-ic{width:40px;padding:0}
.fbtn-3[aria-expanded=true]{background:#f5f5f7}
.pop.more-menu{top:calc(100% + 8px);bottom:auto;left:auto;right:0;transform-origin:top right;width:max-content;min-width:240px}
.more-menu a,.more-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:10px;font-size:14px;text-align:left;color:var(--ink);white-space:nowrap}
.more-menu a:hover,.more-menu button:hover{background:var(--panel)}
.more-menu svg{width:16px;height:16px;flex:none;color:var(--ink-2)}
.more-menu code{margin-left:auto;padding-left:16px;font-family:var(--mono);font-size:11px;color:var(--ink-3)}
.more-menu .ok{color:#1d7a46}
@media (min-width:768px){.md-only{display:inline-flex}}
@media (max-width:767px){.md-only{display:none}.vh-top{flex-direction:column;gap:8px}.vh-act{width:100%}.vh-act .fbtn-2{flex:1}}
.vh-tags span{height:22px;padding:0 9px;border-radius:999px;background:#fff;font-size:12px;font-weight:500;line-height:22px;color:var(--ink-2);box-shadow:0 1px 1px rgba(17,17,19,.04)}
.ta{position:relative}
/* Vùng nhập — như Fish: con trỏ chữ trên cả vùng, bấm chỗ trống là vào ô nhập; đang gõ thì hiện viền đậm.
   Viền coral (#f5574e, ≥3:1) trùng màu con trỏ thay cho xanh của Fish. Chồng lên vạch kẻ trên/dưới (-1px). */
.field{position:relative;margin:-1px 0;cursor:text;border-radius:2px;box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .15s ease}
.field.typing{box-shadow:inset 0 0 0 1.5px #f5574e}
.field :is(button,a,[role=menu],[role=dialog]){cursor:pointer}
.field .vbar{padding-bottom:10px}
/* quick voice chips */
.vbar{display:flex;align-items:flex-start;gap:6px;padding:4px 12px 0 14px}
.vbar #voiceBtn{height:40px;border-radius:10px}
/* Chip chọn giọng = hình chữ nhật bo góc (thứ để chọn), khác viên thuốc (nút hành động) — học từ Fish */
.vchips{position:relative;flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;padding:0 32px 6px 0;scrollbar-width:thin;scrollbar-color:transparent transparent;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);transition:scrollbar-color .2s}
.vchips.at-end{-webkit-mask-image:none;mask-image:none}
.vchips:hover{scrollbar-color:#d1d1d6 transparent}
.pw-r .vpick{left:auto;right:0;transform-origin:bottom right}
#voiceBtn svg.gr{width:14px;height:14px;color:var(--ink-2)}
.vchips::-webkit-scrollbar{height:4px}
.vchips::-webkit-scrollbar-thumb{border-radius:4px;background:transparent}
.vchips:hover::-webkit-scrollbar-thumb{background:#d1d1d6}
@media (hover:none){.vchips{scrollbar-width:none;padding-bottom:0}.vchips::-webkit-scrollbar{display:none}}
.vchip{flex:none;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 13px 0 9px;border-radius:10px;background:var(--panel);font-size:14px;font-weight:500;color:var(--ink-2);white-space:nowrap;transition:box-shadow .2s,color .2s,background .2s}
.vchip img{width:22px;height:22px;border-radius:6px;object-fit:cover;background:#e5e5ea}
.vchip:hover{color:var(--ink);background:#ebebf0}
.vchip[aria-pressed=true]{color:var(--ink);background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
@media (max-width:640px){.cmp-head{padding:16px;gap:14px;align-items:flex-start}.vh-avb,.vh-av{width:52px;height:52px}.vh-pb{width:24px;height:24px}.vh-name{font-size:20px;line-height:28px}.vh-desc{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}#voiceBtn .lb,#voiceBtn .cv{display:none}#voiceBtn{width:38px;padding:0;justify-content:center}.gen textarea,.hl{height:210px;padding-left:18px;padding-right:44px;font-size:16.5px}.samples{padding-left:18px}}

/* popovers */
.pop{position:absolute;left:0;bottom:calc(100% + 10px);z-index:40;background:#fff;border-radius:20px;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 24px 60px -16px rgba(0,0,0,.3);opacity:0;transform:translateY(8px) scale(.98);transform-origin:bottom left;pointer-events:none;transition:opacity .2s,transform .3s var(--ease)}
.pop.on{opacity:1;transform:none;pointer-events:auto}
.vpick{width:390px;padding:8px}
.vp-search{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:12px;background:var(--panel);color:var(--ink-3)}
.vp-search svg{width:14px;height:14px;flex:none}
.vp-search input{flex:1;border:0;outline:0;background:transparent;font:inherit;font-size:14px;color:var(--ink)}
.vp-cats{display:flex;gap:4px;overflow-x:auto;padding:8px 2px 6px;scrollbar-width:none}
.vp-cats::-webkit-scrollbar{display:none}
.cat{flex:none;height:28px;padding:0 11px;border-radius:999px;font-size:13px;color:var(--ink-2);transition:background .2s,color .2s}
.cat:hover{color:var(--ink);background:var(--panel)}
.cat[aria-pressed=true]{background:var(--ink);color:#fff}
.vp-list{max-height:312px;overflow-y:auto;scrollbar-width:thin;margin-top:2px}
.vrow{display:flex;align-items:center;gap:12px;width:100%;height:54px;padding:0 8px;border-radius:13px;cursor:pointer;transition:background .15s}
.vrow:hover{background:var(--panel)}
.vrow .av{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;background:#e5e5ea}
.vrow .tx{min-width:0;flex:1}
.vrow .tx b{display:block;font-size:14px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vrow .tx small{font-size:12px;color:var(--ink-3)}
.vrow .pv{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);transition:background .2s,color .2s,box-shadow .2s}
.vrow .pv:hover{background:#fff}
.vrow .pv svg{width:9px;height:9px;margin-left:1px}
.vrow .pv .eqi{display:none}
.vrow.is-playing .pv,.vrow.is-loading .pv{background:var(--coral-cta);color:#fff;box-shadow:none}
.vrow.is-playing .pv .pp{display:none}.vrow.is-playing .pv .eqi{display:flex}
.vrow .ck{width:16px;height:16px;flex:none;color:var(--coral);visibility:hidden}
.vrow.sel .ck{visibility:visible}
.vp-empty{padding:24px;text-align:center;font-size:13px;color:var(--ink-3)}
.vp-foot{display:block;margin-top:4px;padding:10px 10px 4px;border-top:1px solid #f0f0f2;font-size:13px;color:var(--ink-3)}
.vp-foot:hover{color:var(--ink)}
.g-menu{width:240px;padding:6px}
.g-menu button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:9px 10px;border-radius:10px;font-size:14px;text-align:left}
.g-menu button:hover{background:var(--panel)}
.g-menu code{font-family:var(--mono);font-size:11px;color:var(--ink-3)}

/* result player */
/* Nút tải luôn chiếm chỗ — chỉ đổi trạng thái, không ẩn/hiện, để nút glow không bị xê dịch */
.g-dl{transition:opacity .2s,background-color .1s}
.g-dl[aria-disabled=true]{opacity:.35;pointer-events:none}

/* suggestions */
/* tab mẫu nằm trong ô nhập (Fish: "Default Sample") */
.samples{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:14px 60px 0 22px}
.samples::-webkit-scrollbar{display:none}
.stab{flex:none;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:9px;font-size:13px;font-weight:500;color:var(--ink-3);transition:background .2s,color .2s}
.stab svg{width:8px;height:8px}
.stab:hover{color:var(--ink)}
.stab[aria-pressed=true]{background:var(--panel);color:var(--ink)}
@media (max-width:640px){
  .g-count{font-size:13px}
  .vh-tags span:nth-child(n+4){display:none}
  .vpick{width:calc(100vw - 48px)}
}

/* ── Dub ─────────────────────────────── */
.dub{background:#fff}
/* Lồng tiếng — bố cục 2 cột kiểu SaaS: nội dung trái, video phải; điều khiển đè lên video như player chuyên nghiệp.
   Tiêu đề cùng hệ với section "Cách làm" (36px, nét thường). Hai video chạy song song → đổi EN/VI tức thì. */
.dub-grid{display:grid;gap:48px;align-items:center;max-width:1280px;margin:0 auto;padding:0 16px}
@media (min-width:640px){.dub-grid{padding:0 24px}}
@media (min-width:960px){.dub-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;padding:0 32px}}
.dub-kicker{margin-bottom:12px;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--coral-ink)}
.dub-h{margin-bottom:16px;font-size:24px;line-height:32px;font-weight:400;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
@media (min-width:768px){.dub-h{font-size:36px;line-height:44px}}
.dub-p{text-wrap:pretty;margin-bottom:24px;font-size:16px;line-height:1.65;color:var(--ink-2)}
.dub-p b{font-weight:600;color:var(--ink)}
.dub-ul{margin-bottom:32px;gap:12px}
.dub-stage{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#0b0b0c;cursor:pointer;box-shadow:0 1px 2px rgba(17,17,19,.06),0 30px 70px -30px rgba(17,17,19,.45)}
.dv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .12s linear}
.dv.on{opacity:1}
/* nút chuyển bản — segmented control kiểu iOS/macOS: nền kính tối, thanh trượt mờ chạy theo lựa chọn, chữ thuần */
.seg{position:relative;display:flex;padding:2px;border-radius:9px;isolation:isolate}
.seg-ov{position:absolute;top:14px;right:14px;z-index:3;background:rgba(20,20,22,.58);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14),0 6px 18px -6px rgba(0,0,0,.5)}
.seg-thumb{position:absolute;top:2px;bottom:2px;left:0;z-index:-1;border-radius:7px;background:rgba(255,255,255,.2);box-shadow:inset 0 .5px 0 rgba(255,255,255,.28),0 1px 2px rgba(0,0,0,.25);transition:transform .32s cubic-bezier(.2,.8,.2,1),width .32s cubic-bezier(.2,.8,.2,1)}
.seg button{position:relative;height:28px;padding:0 13px;border-radius:7px;font-size:13px;font-weight:500;letter-spacing:-.005em;line-height:28px;color:rgba(255,255,255,.66);white-space:nowrap;transition:color .2s}
.seg button:not([aria-checked=true]):hover{color:rgba(255,255,255,.92)}
.seg button[aria-checked=true]{color:#fff}
.seg button:focus-visible{outline:1.5px solid rgba(255,255,255,.75);outline-offset:0}
.vplay{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;color:var(--ink);box-shadow:0 10px 30px -8px rgba(0,0,0,.45);transition:transform .3s var(--ease),opacity .3s}
.vplay svg{width:26px;height:26px;margin-left:3px}
.vplay:hover{transform:translate(-50%,-50%) scale(1.06)}
.dub-stage.playing .vplay{opacity:0;pointer-events:none}
/* thanh dưới đè lên video, trên lớp phủ tối; tự ẩn khi đang phát và người dùng không tương tác */
.dub-ctrl{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:12px;padding:28px 16px 12px;background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0));color:#fff;transition:opacity .3s}
.dub-stage.playing.idle .dub-ctrl{opacity:0}
.dub-stage.playing.idle{cursor:none}
.dub-pp{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#fff;transition:background .15s}
.dub-pp:hover{background:rgba(255,255,255,.14)}
.dub-pp svg{width:18px;height:18px}.dub-pp .i-play{margin-left:2px}
.dub-pp .i-pause,.dub-pp.on .i-play{display:none}.dub-pp.on .i-pause{display:block}
.dub-scrub{position:relative;flex:1;min-width:60px;height:20px;cursor:pointer}
.dub-scrub::before,.dub-scrub i{content:"";position:absolute;left:0;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;transition:height .15s,margin .15s}
.dub-scrub::before{right:0;background:rgba(255,255,255,.3)}
.dub-scrub i{width:0;background:#fff}
.dub-scrub:hover::before,.dub-scrub:hover i{height:5px;margin-top:-2.5px}
.dub-scrub i::after{content:"";position:absolute;right:-6px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4);opacity:0;transition:opacity .15s}
.dub-scrub:hover i::after,.dub-scrub:focus-visible i::after{opacity:1}
.dub-time{flex:none;font-size:13px;font-weight:500;color:rgba(255,255,255,.92);font-variant-numeric:tabular-nums}
@media (max-width:600px){.dub-stage{border-radius:16px}.seg-ov{top:10px;right:10px}.seg button{height:26px;line-height:26px;font-size:12px;padding:0 10px}.dub-ctrl{padding:22px 10px 8px;gap:8px}.vplay{width:56px;height:56px}.vplay svg{width:22px;height:22px}}

/* ── Cách làm — giao diện theo "How to Use" của Fish Audio (Tailwind → CSS) ── */
.how{padding:64px 0}
@media (min-width:768px){.how{padding:96px 0}}
.how-in{max-width:1280px;margin:0 auto;padding:0 16px}
@media (min-width:640px){.how-in{padding:0 24px}}
@media (min-width:1024px){.how-in{padding:0 32px}}
.how-head{margin-bottom:48px;text-align:center}
.how-head h2{text-wrap:balance;margin-bottom:16px;font-size:24px;line-height:32px;font-weight:400;letter-spacing:-.01em;color:var(--ink)}
.how-head p{font-size:18px;line-height:28px;color:var(--ink-2)}
@media (min-width:768px){.how-head h2{font-size:36px;line-height:40px}}
.how-grid{display:grid;gap:32px}
@media (min-width:768px){.how-grid{grid-template-columns:repeat(3,1fr)}}
.how-card{border-radius:16px;background:var(--panel);padding:24px}
.how-t{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.how-t span{font-size:36px;line-height:40px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.how-t h3{font-size:20px;line-height:28px;font-weight:600;color:var(--ink)}
.how-p{margin-bottom:16px;font-size:16px;line-height:1.625;color:var(--ink-2)}
.how-ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:8px}
.how-ul li{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:20px;color:var(--ink-2)}
.how-ck{width:16px;height:16px;flex:none;margin-top:2px;color:#16a34a}
.how-a{font-size:14px;line-height:20px;font-weight:500;color:var(--coral-ink)}
.how-a:hover{color:#a52f26}
.how-note{margin-bottom:12px;font-size:14px;line-height:20px;color:var(--ink-3)}
.how-cta{position:relative;margin-top:64px;overflow:hidden;border-radius:24px;background:linear-gradient(to bottom right,#f3f4f6,var(--line));padding:64px 32px;text-align:center}
@media (min-width:768px){.how-cta{padding:64px 48px}}
.how-blobs{position:absolute;inset:0;opacity:.1}
.how-blobs i{position:absolute;width:384px;height:384px;border-radius:50%;filter:blur(64px)}
.how-blobs i:first-child{left:0;top:0;transform:translate(-50%,-50%);background:#fe655d}
.how-blobs i:last-child{right:0;bottom:0;transform:translate(50%,50%);background:#ff8a3d}
.how-cta-in{position:relative;z-index:10}
.how-cta h3{margin-bottom:16px;font-size:24px;line-height:32px;font-weight:400;color:var(--ink)}
@media (min-width:768px){.how-cta h3{font-size:30px;line-height:36px}}
.how-cta-in>p{margin-bottom:32px;font-size:16px;line-height:24px;color:var(--ink-2)}
.how-btns{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
@media (min-width:640px){.how-btns{flex-direction:row}}
.how-b1,.how-b2{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:16px 32px;font-size:15px;line-height:20px;font-weight:600;transition:all .15s}
.how-b1{background:var(--ink);color:#fff}
.how-b1:hover{transform:scale(1.05);background:#2c2c2e}
.how-b2{border:2px solid rgba(17,17,19,.3);color:var(--ink);background:transparent}
.how-b2:hover{border-color:rgba(17,17,19,.5);background:rgba(17,17,19,.1)}
.how-checks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;margin-top:32px;font-size:14px;line-height:20px;color:var(--ink-2)}
@media (min-width:768px){.how-checks{gap:24px}}
.how-checks span{display:flex;align-items:center;gap:6px}
.how-checks .how-ck{margin:0;color:#22c55e}

/* ── Ai đang dùng — băng thẻ chạy vòng lặp (theo creator-stories): ảnh 4:5, lớp tối trên/dưới, vai trò trên, cách dùng dưới.
   Tự trôi chậm, dừng khi rê chuột / focus / chạm / tab ẩn / ra khỏi màn hình; tắt hẳn nếu giảm chuyển động. ── */
.people{display:flex;gap:16px;overflow-x:auto;padding:4px max(32px,calc((100vw - 1216px)/2)) 8px;scrollbar-width:none;outline:none}
.people::-webkit-scrollbar{display:none}
.people:focus-visible{box-shadow:inset 0 0 0 2px var(--coral)}
.person{position:relative;flex:0 0 min(300px,74vw);aspect-ratio:4/5;margin:0;border-radius:20px;overflow:hidden;color:#fff;background:#1c1c1e}
.person img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.person:hover img{transform:scale(1.04)}
.person .shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 50%,rgba(0,0,0,.75) 100%)}
.person .top,.person .bot{position:absolute;left:20px;right:20px;z-index:1}
.person .top{top:20px}
.person .top h3{font-size:20px;line-height:26px;font-weight:600;letter-spacing:-.01em}
.person .top p{margin-top:2px;font-size:13px;opacity:.85}
.person .bot{bottom:20px;font-size:15px;line-height:1.5;font-weight:500;text-wrap:pretty}
.ctrl{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.ctrl button{width:40px;height:40px;border-radius:50%;background:var(--panel);display:grid;place-items:center;transition:background .2s}
.ctrl button:hover{background:#e8e8ed}

/* ── FAQ — theo FAQ của Fish Audio (Tailwind → CSS) ── */
.fq{padding:64px 0}
@media (min-width:768px){.fq{padding:96px 0}}
.fq-head{max-width:1280px;margin:0 auto;padding:0 16px}
.fq-head h2{margin-bottom:48px;text-align:center;font-size:24px;line-height:32px;font-weight:400;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
@media (min-width:768px){.fq-head h2{font-size:36px;line-height:40px}}
.fq-list{max-width:768px;margin:0 auto;padding:0 16px}
@media (min-width:640px){.fq-head,.fq-list{padding:0 24px}}
@media (min-width:1024px){.fq-head,.fq-list{padding:0 32px}}
.fq-item{border-bottom:1px solid var(--line)}
.fq-q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:16px;padding:24px 0;text-align:left;font-size:18px;line-height:28px;font-weight:500;color:var(--ink);transition:color .15s}
.fq-q:hover{color:var(--ink-2)}
.fq-q svg{flex:none;width:20px;height:20px;color:var(--ink-3);transition:transform .2s}
.fq-q[aria-expanded=true] svg{transform:rotate(180deg)}
.fq-q:focus-visible{outline:2px solid var(--coral);outline-offset:4px;border-radius:6px}
/* mở/đóng mượt bằng grid-rows 0fr → 1fr (thay max-height cố định của Fish) */
.fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.fq-a>div{overflow:hidden}
.fq-a p{padding-bottom:24px;font-size:16px;line-height:1.65;color:var(--ink-2)}
.fq-item.open .fq-a{grid-template-rows:1fr}
/* ── Footer ──────────────────────────── */
footer{background:var(--paper);padding:72px 0 32px;font-size:13px;color:var(--ink-2);overflow:hidden}
.fcols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:28px}
.fcols h4{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:12px}
.fcols a{display:block;margin-bottom:9px}
.fcols a:hover{color:var(--ink)}
.fcols a.logo{display:inline-flex;margin-bottom:14px}
.fbot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line);color:var(--ink-3)}
@media (max-width:860px){.fcols{grid-template-columns:1fr 1fr}}

/* Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}*,*::before,*::after{animation:none!important}}
@media (max-width:700px){.sec{padding:64px 0}.hero{padding-top:64px}}

/* ── Logo SaydiVoice: animation khối màu (nguyên bản trang chủ) ── */
.n-block, .letter { transform-box: fill-box; transform-origin: center; }
.n-block.enter, .n-block.visible {
animation: sv-block-in .38s cubic-bezier(.34, 1.56, .64, 1) both;
animation-delay: var(--enter-d, 0ms);
}
.letter.enter, .letter.visible {
animation: sv-letter-in .48s cubic-bezier(.22, 1, .36, 1) both;
animation-delay: var(--enter-d, 0ms);
}
@keyframes sv-block-in {
from { opacity: 0; transform: scale(0); }
to   { opacity: 1; transform: scale(1); }
}
@keyframes sv-letter-in {
from { opacity: 0; transform: translateY(12px); }
to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.n-block, .letter { animation: none; opacity: 1; }
}

/* ── Nối vào API thật (không có trong mockup) ───────────────────────────────
   Dòng báo lỗi/đang xử lý dưới khung soạn thảo, và trạng thái của nút tải khi
   chưa có kết quả hoặc khi file đã sẵn sàng nhưng còn cổng đăng nhập. */
.g-note{margin:10px 2px 0;font-size:13px;line-height:1.5;color:var(--coral-ink);min-height:0}
.g-note:empty{display:none}
.g-dl[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.g-dl.is-gated{box-shadow:inset 0 0 0 1px var(--coral-tint)}
.mark-hl,.hl mark{background:var(--coral-tint);color:var(--coral-ink);border-radius:3px;padding:0 1px}

/* Dòng liên kết facet dưới khối "Khám phá thêm" — giữ đường dẫn nội bộ tới
   trang ngôn ngữ / facet giới tính / gallery use case mà layout cũ có. */
.dv-more:empty{display:none}
.dv-more{max-width:1200px;margin:26px auto 0;padding:0 24px;font-size:14px;line-height:1.7;color:var(--ink-2)}
.dv-more a{color:var(--coral-ink);font-weight:500}
.dv-more a:hover{text-decoration:underline;text-underline-offset:2px}
@media (max-width:640px){.dv-more{padding:0 16px;font-size:13px}}

/* ── Thông báo sau khi tải (khôi phục từ widget cũ) — restyle theo hệ v2 ──────
   Cùng ngôn ngữ với composer: nền trắng, viền --line, bo 22px, bóng mềm; icon
   trong ô coral-tint; tên file dạng chip mono (đúng chỗ thiết kế dùng mono);
   nút chính là pill gradient coral, nút phụ là pill --panel; hairline coral trên
   mép thay cho dải nền hồng của bản cũ. */
.dl-notice{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:2147483000;
  width:min(392px,calc(100vw - 40px));display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;
  padding:16px 44px 16px 16px;border-radius:22px;background:#fff;border:1px solid var(--line);color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 24px 60px -22px rgba(0,0,0,.25);
  opacity:0;transform:translateY(14px) scale(.985);transform-origin:bottom right;pointer-events:none;
  transition:opacity .3s var(--ease),transform .4s var(--ease)}
.dl-notice::before{content:"";position:absolute;top:0;left:14px;right:14px;height:1px;border-radius:1px;
  background:linear-gradient(90deg,transparent,rgba(254,101,93,.55),transparent)}
.dl-notice.show{opacity:1;transform:none;pointer-events:auto}
.dl-notice[hidden]{display:none}
.dl-notice-ico{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--coral-tint);color:var(--coral-ink);box-shadow:inset 0 0 0 1px rgba(254,101,93,.16)}
.dl-notice-body{min-width:0}
.dl-notice-title{display:block;font-size:14.5px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.dl-notice-file{display:block;max-width:100%;margin-top:6px;padding:3px 8px;border-radius:8px;
  background:var(--panel);font-family:var(--mono);font-size:11.5px;line-height:1.5;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:fit-content}
.dl-notice-hint{display:flex;align-items:flex-start;gap:7px;margin-top:9px;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.dl-notice-folder{flex:none;margin-top:1px;color:var(--coral);opacity:.9}
.dl-notice-actions{display:flex;gap:8px;margin-top:12px}
.dl-notice-btn{flex:1 1 auto;height:36px;padding:0 14px;border:0;border-radius:999px;font:inherit;font-size:13px;font-weight:600;
  background:var(--panel);color:var(--ink);cursor:pointer;transition:background .2s,transform .2s var(--ease),filter .2s}
.dl-notice-btn:hover{background:#e9e9ee}
.dl-notice-btn:active{transform:scale(.985)}
.dl-notice-btn:first-child{background:var(--coral);color:#fff;box-shadow:0 6px 16px -8px rgba(252,62,87,.55)}
.dl-notice-btn:first-child:hover{background:var(--coral-2)}
.dl-notice-next{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.dl-notice-next b{display:block;font-size:13px;line-height:1.35;font-weight:600;color:var(--ink)}
.dl-notice-next p{margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.dl-notice-cta{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;font-weight:600;
  color:var(--coral-ink);text-decoration:none}
.dl-notice-cta:hover{text-decoration:underline;text-underline-offset:3px}
.dl-notice-close{position:absolute;top:10px;right:10px;width:28px;height:28px;border:0;border-radius:50%;
  background:transparent;color:var(--ink-3);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s}
.dl-notice-close:hover{background:var(--panel);color:var(--ink)}
.dl-notice-close:focus-visible,.dl-notice-cta:focus-visible,.dl-notice-btn:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
@media (max-width:640px){
  .dl-notice{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;
    border-radius:20px;padding:14px 44px 14px 14px}
  .dl-notice-btn{height:42px;font-size:14px}
  .dl-notice-close{width:34px;height:34px;top:8px;right:8px}
}

/* ── Bubble chat của site vs nút Generate trên mobile ────────────────────────
   .ov-chat-bubble là phần tử fixed góc phải dưới của toàn site (style do
   crispBlock() trong scripts/generate.mjs chèn). Ở layout v2, thanh soạn nằm
   sát đáy màn hình trên điện thoại nên bubble phủ đúng nút ▶ (đo trên prod
   28/10: chồng 36×40 px, elementFromPoint() trả về IMG của bubble ⇒ bấm ▶ lại
   mở chat). assets/voice-v2.js thêm body.cmp-chat-hidden đúng lúc vùng hai bên
   giao nhau; các vị trí khác bubble vẫn hiện như cũ. */
@media (max-width:820px){
  body.cmp-chat-hidden #ovChatBubble{opacity:0;pointer-events:none;
    transform:translateY(10px) scale(.92)}
}