/* ═══════════════════════════════════════════════════════════════════════ HMONG X — HIỆU ỨNG (Aib 15/09/2026: "thay đổi các hiệu ứng đẹp hơn nữa, gọi chuyên gia") Chốt bởi 3 chuyên gia: chuyển động (thông số/easing) · mỹ thuật Mông (hoạ tiết từ logo: xoáy vuông taw ntxhw · núi roob · hạt dưa noob dib · sao hnub qub) · kỹ sư CSS (chỉ transform/ opacity, contain:paint, reduced-motion, WKWebView). Dùng CHUNG cho app (index.html) và demo. ───────────────────────────────────────────────────────────────────── 2 NÚM ĐIỀU KHIỂN trên (đọc từ localStorage, xem hieu-ung.js): data-fx = day (đầy đủ) | nhe | tat | auto (theo máy) data-fx-style = hnubqub (Sao Đêm, nhẹ nhàng) | pajntaub (Thêu Rực, sống động) | nyiaj (Bạc Sáng, sang trọng) LUẬT: chỉ animate transform/opacity (+filter trên ảnh nhỏ), không animate layout, không will-change thường trực, tối đa 1 vòng lặp + 1 vào/ra cùng lúc, mọi thứ tắt được bằng data-fx="tat". ═══════════════════════════════════════════════════════════════════════ */ /* ── 0. TOKEN ─────────────────────────────────────────────────────────── */ :root{ --fx-dur:.24s; --fx-fast:.14s; --fx-slow:.40s; --fx-ease:cubic-bezier(.22,1,.36,1); /* ra nhanh, đậu êm */ --fx-spring:cubic-bezier(.34,1.56,.64,1); /* nảy nhẹ — chỉ nút/tile/badge */ --fx-inout:cubic-bezier(.65,0,.35,1); --fx-glow:1; --fx-blur:12px; --fx-lift:2px; --fx-stitch:0; /* stitch=1 → viền chỉ khâu khi trao sản phẩm */ --glow-gold:rgba(201,118,31,.18); --glow-red:rgba(180,50,44,.14); --glow-sky:rgba(35,74,110,.16); --stitch:#B4322C; --stitch2:#C9761F; --ring:rgba(201,118,31,.55); --shimmer:linear-gradient(110deg,transparent 30%,rgba(30,58,138,.10) 42%,rgba(180,50,44,.16) 50%,rgba(227,167,63,.22) 56%,transparent 70%); } body[data-mode="dark"]{ --glow-gold:rgba(227,167,63,.34); --glow-red:rgba(255,122,107,.26); --glow-sky:rgba(127,168,214,.28); --stitch:#E3A73F; --stitch2:#FF7A6B; --ring:rgba(227,167,63,.55); --shimmer:linear-gradient(110deg,transparent 30%,rgba(127,168,214,.16) 42%,rgba(255,122,107,.22) 50%,rgba(235,194,118,.34) 56%,transparent 70%); } /* mức hiệu ứng */ html[data-fx="nhe"]{ --fx-dur:.16s; --fx-slow:.24s; --fx-glow:.4; --fx-blur:0px; --fx-lift:1px; --fx-stitch:0 } html[data-fx="tat"]{ --fx-dur:0s; --fx-fast:0s; --fx-slow:0s; --fx-glow:0; --fx-blur:0px; --fx-lift:0px; --fx-stitch:0 } @media (prefers-reduced-motion:reduce){ html[data-fx="auto"]{ --fx-dur:0s; --fx-fast:0s; --fx-slow:0s; --fx-glow:0; --fx-blur:0px; --fx-lift:0px; --fx-stitch:0 } } /* 3 phong cách */ html[data-fx-style="hnubqub"]{ --fx-dur:.22s; --fx-slow:.36s; --fx-blur:8px; --fx-lift:1px; --fx-stitch:0 } html[data-fx-style="pajntaub"]{ --fx-dur:.26s; --fx-slow:.42s; --fx-blur:14px; --fx-lift:3px; --fx-stitch:1; --fx-ease:cubic-bezier(.34,1.56,.64,1) } html[data-fx-style="nyiaj"]{ --fx-dur:.36s; --fx-slow:.56s; --fx-blur:18px; --fx-lift:2px; --fx-stitch:0; --fx-ease:cubic-bezier(.65,0,.35,1); --stitch:#C9D3E0; --stitch2:#7FA8D6; --ring:rgba(201,211,224,.6); --glow-gold:var(--glow-sky); --shimmer:linear-gradient(110deg,transparent 30%,rgba(127,168,214,.14) 42%,rgba(201,211,224,.28) 50%,rgba(30,58,138,.18) 56%,transparent 70%) } html[data-fx-style="nyiaj"] body[data-mode="dark"]{ --stitch:#E4EAF2; --stitch2:#9CC0E8; --glow-gold:rgba(201,211,224,.30) } /* ── 1. KEYFRAMES (dùng chung) ────────────────────────────────────────── */ @keyframes hxIn{ from{opacity:0;transform:translate3d(0,8px,0) scale(.985)} to{opacity:1;transform:none} } @keyframes hxBotIn{ from{opacity:0;transform:translate3d(0,6px,0)} to{opacity:1;transform:none} } @keyframes hxPopIn{ 0%{opacity:0;transform:translateX(-6px)} 100%{opacity:1;transform:none} } @keyframes hxPop{ 0%{transform:scale(.6)} 70%{transform:scale(1.08)} 100%{transform:none} } @keyframes hxCaret{ 0%,49%{opacity:1} 50%,100%{opacity:0} } @keyframes hxImgIn{ from{opacity:0;filter:blur(var(--fx-blur));transform:scale(1.04)} to{opacity:1;filter:blur(0);transform:none} } @keyframes hxReady{ 0%{box-shadow:0 0 0 0 var(--ring)} 100%{box-shadow:0 0 0 14px rgba(0,0,0,0)} } @keyframes hxArm{ from{transform:scale(1.05)} to{transform:none} } @keyframes hxShimmer{ from{background-position:-200% 0} to{background-position:200% 0} } @keyframes hxBreath{ 0%,100%{transform:translateX(-50%) scale(1);filter:drop-shadow(0 0 6px var(--glow-gold))} 50%{transform:translateX(-50%) scale(1.025);filter:drop-shadow(0 0 18px var(--glow-gold))} } @keyframes hxTwinkle{ 0%,100%{opacity:0;transform:scale(.6) rotate(0)} 50%{opacity:1;transform:scale(1) rotate(45deg)} } @keyframes hxDraw{ to{stroke-dashoffset:0} } @keyframes hxTurn{ to{transform:rotate(360deg)} } @keyframes hxPulse{ 0%,100%{opacity:.35;transform:scale(.85)} 50%{opacity:1;transform:scale(1)} } @keyframes hxSew{ to{--hxp:100%} } @property --hxp{ syntax:''; inherits:false; initial-value:0% } /* ── 2. BONG BÓNG VÀO · CHỮ CHẢY · BA CHẤM ───────────────────────────── */ .stream > .msg.me{ animation:hxIn var(--fx-dur) var(--fx-ease) 1 both } .stream > .msg.bot{ animation:hxBotIn var(--fx-dur) var(--fx-ease) 1 both } .stream > .msg:nth-last-child(n+6){ animation:none } /* nạp lịch sử dài: chỉ 5 bóng cuối chạy */ .msg.hx-streaming > span:first-of-type::after{ content:''; display:inline-block; width:2px; height:1em; margin-left:2px; vertical-align:-.15em; background:var(--stitch); animation:hxCaret .9s steps(2,start) infinite } .typing i{ animation-duration:1.2s !important; animation-timing-function:ease-in-out !important } /* ── 3. NHÃN CÔNG CỤ · THẺ DỊCH ──────────────────────────────────────── */ .gop-badge{ animation:hxPopIn calc(var(--fx-dur)*1.2) var(--fx-ease) 1 both } .gop-badge::before{ content:''; display:inline-block; width:6px; height:6px; border-radius:2px; background:var(--stitch); transform:rotate(45deg); animation:hxPop calc(var(--fx-dur)*1.4) var(--fx-spring) 60ms 1 both; opacity:calc(.6 + .4*var(--fx-glow)) } .gop-badge2{ animation:hxPopIn var(--fx-dur) var(--fx-ease) 1 both } /* ── 4. ẢNH AI HIỆN DẦN (blur-up) — hieu-ung.js gắn .hx-ok khi ảnh tải xong ─ */ html.hx-js .msg img:not(.hx-ok){ opacity:0 } html.hx-js .msg img.hx-ok{ animation:hxImgIn var(--fx-slow) var(--fx-ease) 1 both } html[data-fx="tat"] .msg img, html[data-fx="nhe"] .msg img{ animation:none !important; opacity:1 !important } .hxgen{ contain:paint } html.hx-hidden .hxgen::before, html.hx-hidden .hxgen::after, html.hx-hidden .gring, html.hx-hidden .hxspin::before{ animation-play-state:paused } /* ── 5. THẺ NHẠC / TRUYỆN / KẾT QUẢ — "mở tấm thêu" khi AI trao sản phẩm ── */ .msg .songcard, .msg .gop-story, .msg .gop-snap{ animation:hxBotIn var(--fx-slow) var(--fx-ease) 1 both, hxReady 1.2s var(--fx-ease) .3s 1 } /* viền chỉ khâu tự thêu quanh khung (pajntaub) — Safari cũ không có @property → viền hiện luôn, vẫn đẹp */ html[data-fx-style="pajntaub"] .msg .songcard, html[data-fx-style="pajntaub"] .msg .gop-story, html[data-fx-style="pajntaub"] .msg img.hx-ok{ position:relative } html[data-fx-style="pajntaub"] .msg .songcard::before, html[data-fx-style="pajntaub"] .msg .gop-story::before{ content:''; position:absolute; inset:-3px; border-radius:inherit; border:2px dashed var(--stitch); pointer-events:none; opacity:.85; -webkit-mask:conic-gradient(from -90deg,#000 var(--hxp),transparent 0); mask:conic-gradient(from -90deg,#000 var(--hxp),transparent 0); animation:hxSew 1.1s cubic-bezier(.4,0,.2,1) 1 forwards } html[data-fx-style="pajntaub"] .msg .songcard::after{ content:'✦'; position:absolute; top:6px; right:10px; color:var(--stitch); font-size:14px; animation:hxTwinkle 1.2s 1.2s ease-in-out 1 both } /* thẻ đang làm việc lâu (statusCard = .songcard có .sttext): thanh shimmer 3 màu thêu + hoa văn chạy */ .msg .songcard:has(> .sttext){ position:relative; overflow:hidden } .msg .songcard:has(> .sttext)::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--shimmer); background-size:250% 100%; animation:hxShimmer 2.6s ease-in-out infinite; opacity:calc(.5 + .5*var(--fx-glow)) } html[data-fx="tat"] .msg .songcard:has(> .sttext)::after{ animation:none } /* ── 6. NÚT · Ô GỬI · Ô CHÀO · Ô NHẬP ────────────────────────────────── */ .send, .cbtn, .gop-opt, .cplus, .dl, .mact, .gop-tile{ transition:transform var(--fx-fast) var(--fx-ease), background .15s, color .15s, border-color .15s, opacity .15s } @media (hover:hover){ .send:not(:disabled):hover, .cbtn:hover, .dl:hover{ transform:translateY(calc(-1 * var(--fx-lift) / 2)) } .gop-tile:hover{ transform:translateY(calc(-1 * var(--fx-lift) - 1px)); box-shadow:0 8px 22px var(--glow-red) } .gop-tile:hover .gi{ transform:scale(1.14) rotate(-4deg) } } .send:not(:disabled):active, .cbtn:active, .gop-tile:active, .dl:active{ transform:scale(.96); transition-duration:80ms } .send:not(:disabled){ animation:hxArm var(--fx-dur) var(--fx-spring) 1 } .send:disabled{ opacity:.7 } .gop-tile{ position:relative; box-shadow:none } .gop-tile .gi{ transition:transform calc(var(--fx-dur)*1.2) var(--fx-spring) } html[data-fx-style="pajntaub"] .gop-tile::after{ content:''; position:absolute; inset:-2px; border-radius:inherit; border:1.5px dashed var(--stitch); opacity:0; pointer-events:none; transition:opacity .3s } @media (hover:hover){ html[data-fx-style="pajntaub"] .gop-tile:hover::after{ opacity:.9; -webkit-mask:conic-gradient(from -90deg,#000 var(--hxp),transparent 0); mask:conic-gradient(from -90deg,#000 var(--hxp),transparent 0); animation:hxSew 1.1s 1 forwards } } .composer{ transition:box-shadow var(--fx-dur) var(--fx-ease), border-color .15s } .composer:focus-within{ box-shadow:0 0 0 3px var(--glow-red), 0 0 calc(26px * var(--fx-glow)) var(--glow-gold) } html[data-fx-style="nyiaj"] .composer:focus-within{ box-shadow:0 0 0 2px var(--glow-sky), 0 0 calc(30px * var(--fx-glow)) var(--glow-sky) } /* ── 7. MÀN CHÀO: biểu tượng THỞ 6 s · sao 8 cánh nháy lệch pha (không bao giờ sáng cùng lúc) ── */ .wlogo{ animation:hxBreath 6s ease-in-out infinite; will-change:auto } .spark{ animation:hxTwinkle 4.2s ease-in-out infinite !important; opacity:0 } .spark:nth-child(2){ animation-delay:0s !important } .spark:nth-child(3){ animation-delay:1.4s !important } .spark:nth-child(4){ animation-delay:2.8s !important } .spark:nth-child(5){ animation-delay:.7s !important } .spark:nth-child(6){ animation-delay:2.1s !important } .gop-tiles .gop-tile{ animation:hxIn var(--fx-slow) var(--fx-ease) 1 both } .gop-tiles .gop-tile:nth-child(2){ animation-delay:60ms } .gop-tiles .gop-tile:nth-child(3){ animation-delay:120ms } .gop-tiles .gop-tile:nth-child(4){ animation-delay:180ms } .gop-tiles .gop-tile:nth-child(5){ animation-delay:240ms } .gop-tiles .gop-tile:nth-child(6){ animation-delay:300ms } /* ── 8. HOẠ TIẾT MÔNG ĐỘNG (SVG inline, currentColor) ───────────────── */ .hx-spiral{ animation:hxTurn 12s linear infinite; transform-origin:50% 50% } .hx-spiral path{ stroke-dasharray:1; stroke-dashoffset:1; animation:hxDraw 1.4s ease-out 1 forwards } .hx-zig path{ stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--p,0)); transition:stroke-dashoffset .9s var(--fx-ease) } .hx-seed path{ transform-box:fill-box; transform-origin:center; animation:hxPulse 1.8s ease-in-out infinite } .hx-seed path:nth-child(2){ animation-delay:.3s } .hx-seed path:nth-child(3){ animation-delay:.6s } .hx-seed path:nth-child(4){ animation-delay:.9s } .hx-star{ animation:hxTwinkle 3.6s ease-in-out infinite; transform-origin:center } html[data-fx-style="nyiaj"] .hxspin::before{ animation-duration:1.6s } /* bạc: quay chậm, sang */ /* ── 9. TẮT / GIẢM ───────────────────────────────────────────────────── */ html[data-fx="tat"] .stream > .msg, html[data-fx="tat"] .gop-badge, html[data-fx="tat"] .gop-badge::before, html[data-fx="tat"] .msg .songcard, html[data-fx="tat"] .msg .gop-story, html[data-fx="tat"] .send, html[data-fx="tat"] .wlogo, html[data-fx="tat"] .spark, html[data-fx="tat"] .gop-tiles .gop-tile, html[data-fx="tat"] .msg .songcard::before, html[data-fx="tat"] .msg .songcard::after, html[data-fx="tat"] .gop-tile::after{ animation:none !important; opacity:1; transform:none; filter:none } html[data-fx="tat"] .msg.hx-streaming > span:first-of-type::after{ animation:none; opacity:.7 } html[data-fx="tat"] .spark{ opacity:.7 } html[data-fx="tat"] .gop-tile, html[data-fx="tat"] .send, html[data-fx="tat"] .cbtn, html[data-fx="tat"] .composer{ transition:none } @media (prefers-reduced-motion:reduce){ html[data-fx="auto"] .stream > .msg, html[data-fx="auto"] .gop-badge, html[data-fx="auto"] .msg .songcard, html[data-fx="auto"] .send, html[data-fx="auto"] .wlogo, html[data-fx="auto"] .spark, html[data-fx="auto"] .gop-tiles .gop-tile{ animation:none !important; opacity:1; transform:none; filter:none } html[data-fx="auto"] .spark{ opacity:.7 } } @media (max-width:640px){ :root{ --fx-blur:8px } .msg .songcard:has(> .sttext)::after{ opacity:.6 } } /* ── 10. XEM DUAB — trình xem ảnh toàn màn hình (xem-duab.js) ───────── */ .hx-lb{position:fixed;inset:0;z-index:1000;background:rgba(6,10,20,.92);display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .24s var(--fx-ease);-webkit-backdrop-filter:none;backdrop-filter:none} .hx-lb.on{opacity:1;pointer-events:auto} .hx-lb-bar{display:flex;align-items:center;gap:8px;padding:max(10px,env(safe-area-inset-top)) 12px 10px;color:#fff} .hx-lb-t{font-weight:800;font-size:14px;opacity:.85}.hx-lb-sp{flex:1} .hx-lb-b{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;border-radius:999px;padding:8px 13px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;min-height:40px;transition:transform var(--fx-fast) var(--fx-ease),background .15s} .hx-lb-b:hover{background:rgba(255,255,255,.16)}.hx-lb-b:active{transform:scale(.95)} .hx-lb-x{width:40px;padding:0;font-size:18px} .hx-lb-stage{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;padding:6px} .hx-lb-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;transform-origin:center;transition:transform .18s var(--fx-ease);cursor:zoom-in;user-select:none;-webkit-user-select:none;box-shadow:0 20px 60px rgba(0,0,0,.5)} .hx-lb.on .hx-lb-stage img{animation:hxImgIn var(--fx-slow) var(--fx-ease) 1 both} .hx-lb-stage img.zoomed{cursor:grab;transition:none} .hx-lb-hint{text-align:center;color:rgba(255,255,255,.55);font-size:12px;padding:8px 12px max(10px,env(safe-area-inset-bottom))} body.hx-lb-open{overflow:hidden} html[data-fx="tat"] .hx-lb{transition:none}html[data-fx="tat"] .hx-lb.on .hx-lb-stage img{animation:none} /* ── 11. KHUNG TẠO ẢNH v2 (Aib 15/09: "hiệu ứng tạo ảnh không đẹp") — aurora + vòng tiến độ + bước ── */ .hxgen{ background:#0b1020 !important; border:1px solid rgba(255,255,255,.08) !important; width:min(360px,78vw) !important; box-shadow:0 18px 50px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04) !important } .hxgen::before{ opacity:.07 !important; animation-duration:22s !important; stroke:#fff } /* hoa văn Mông mờ, trôi chậm */ .hxgen::after{ display:none !important } /* bỏ vệt sáng trắng gắt */ .hxgen .gau{ position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none } .hxgen .gau i{ position:absolute; width:72%; height:72%; border-radius:50%; filter:blur(38px); opacity:.85; mix-blend-mode:screen; will-change:transform } .hxgen .gau i:nth-child(1){ left:-16%; top:-12%; background:#3b4ee8; animation:hxAur1 9s ease-in-out infinite } .hxgen .gau i:nth-child(2){ right:-22%; top:8%; background:#c0392b; animation:hxAur2 11s ease-in-out infinite } .hxgen .gau i:nth-child(3){ left:8%; bottom:-28%; background:#e3a73f; animation:hxAur3 13s ease-in-out infinite } @keyframes hxAur1{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(28%,22%) scale(1.15)} } @keyframes hxAur2{ 0%,100%{transform:translate(0,0) scale(1.05)} 50%{transform:translate(-30%,30%) scale(.9)} } @keyframes hxAur3{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(22%,-34%) scale(1.2)} } .hxgen .gmid{ gap:10px !important } .hxgen .gring{ width:68px !important; height:68px !important; background:none !important; animation:none !important; position:relative; border-radius:50% } .hxgen .gring svg{ width:68px; height:68px; transform:rotate(-90deg); display:block } .hxgen .gring circle{ fill:none; stroke-width:4 } .hxgen .gring .bg{ stroke:rgba(255,255,255,.16) } .hxgen .gring .fg{ stroke:url(#hxg-grad); stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:calc(1 - var(--p,0)); transition:stroke-dashoffset .9s var(--fx-ease) } .hxgen .gring .ic{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:24px; animation:hxPulse 2.4s ease-in-out infinite } .hxgen .gtxt{ background:rgba(0,0,0,.38) !important; color:#fff !important; font-weight:700; transition:opacity .3s; max-width:90%; text-align:center } .hxgen .gtxt.swap{ opacity:0 } .hxgen .gpct{ color:rgba(255,255,255,.72); font-size:12.5px; font-variant-numeric:tabular-nums; z-index:2; letter-spacing:.04em } html[data-fx="tat"] .hxgen .gau i, html[data-fx="tat"] .hxgen .gring .ic{ animation:none } html[data-fx="nhe"] .hxgen .gau i{ animation-duration:20s } @media (max-width:640px){ .hxgen .gau i{ filter:blur(28px) } } /* ── 12. ICON MÔNG cho công cụ (15/09: thay emoji bằng bộ icon paj ntaub 3D) ── */ .gop-tile img.gi{ width:52px; height:52px; object-fit:contain; filter:drop-shadow(0 4px 10px rgba(0,0,0,.25)) } .gop-badge img.gop-bic, .gop-chip img.gop-bic{ width:18px; height:18px; object-fit:contain; vertical-align:-4px; margin-right:2px } .cplus-menu img.gop-mic{ width:22px; height:22px; object-fit:contain; display:block } /* ── 13. THANH HÀNH ĐỘNG NHƯ CHATGPT + gợi ý bước tiếp + ✏️ sửa tin ── */ .gop-next{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px } .gop-chip2{ border:1px solid var(--line); background:transparent; color:var(--ink); border-radius:999px; padding:6px 11px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; opacity:.85; transition:transform var(--fx-fast) var(--fx-ease), border-color .15s, background .15s } .gop-chip2:hover{ border-color:var(--navy2); opacity:1; transform:translateY(-1px) } .gop-chip2:active{ transform:scale(.96) } .msg.me{ position:relative; padding-right:34px !important } .gop-edit{ position:absolute; right:6px; top:6px; border:0; background:transparent; font-size:13px; opacity:.35; cursor:pointer; padding:4px; border-radius:8px; transition:opacity .15s, background .15s } .msg.me:hover .gop-edit, .gop-edit:focus{ opacity:.9; background:rgba(0,0,0,.08) } @media (hover:none){ .gop-edit{ opacity:.5 } } .gop-acts2 .mact{ font-size:15px } /* ── 14. ⏹ dừng ── */ .gop-stop{ display:flex; align-items:center; justify-content:center; width:44px; height:42px; border:1px solid var(--line); background:var(--card); color:var(--ink); border-radius:12px; font-size:16px; cursor:pointer; animation:hxPop .3s var(--fx-spring) 1 both } .gop-stop:hover{ border-color:var(--purple) } /* ── 15. MỘT NÚT (mot-nut.js): ẩn mic + sóng âm cũ, nút Xa đổi hình theo ô ── */ #mic-chat, #voice-chat{ display:none !important } .send.hx-one{ min-width:64px; justify-content:center; gap:6px; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:none } /* 15/09 tối: touch-action:none + không bung menu → iPhone giữ được */ .send.hx-one-mic{ background:var(--card); color:var(--ink); border:1px solid var(--line); padding:8px 14px } .send.hx-one-mic .micimg{ width:22px; height:22px; display:block } .send.hx-one-mic .hx-one-lbl{ font-size:13px; font-weight:700 } .send.hx-one-rec{ background:var(--purple); color:#fff } .send.hx-one-hold{ transform:scale(1.08); box-shadow:0 0 0 6px var(--glow-red) } /* ── 16. MENU 🎙️ 27 giọng: nhóm + cuộn ── */ #suabmenu{ max-height:min(70vh,520px); overflow-y:auto } #suabmenu .suab-nhom{ font-size:11px; font-weight:800; letter-spacing:.05em; opacity:.6; padding:8px 12px 3px; text-transform:uppercase }