/* CATSKY FM — giao diện mới trình nghe nhạc chung (16/10/2026). Nạp SAU style.css. */
.mx{--mx-a:#6ff0cf;--mx-b:#9a86ff;--mx-c:#ff8db0;--mx-tx:#f5f3ff;--mx-mu:rgba(235,232,255,.62);--mx-ln:rgba(255,255,255,.09);--mx-card:rgba(255,255,255,.055);--mx-hov:rgba(255,255,255,.1);
  position:fixed;inset:0;z-index:72;display:grid;place-items:center;padding:20px;background:rgba(4,3,10,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--mx-tx)}
.mx.on .mx-in{animation:mxin .55s var(--spring)}@keyframes mxin{from{opacity:0;transform:translateY(24px) scale(.96)}}
.mx-in{position:relative;isolation:isolate;width:min(1320px,100%);height:min(820px,100%);border-radius:28px;overflow:hidden;background:#0a0912;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 120px -30px rgba(0,0,0,.9)}
.mx-amb{position:absolute;inset:0;z-index:-2;overflow:hidden}
.mx-amb i{position:absolute;inset:-25%;background:center/cover no-repeat;filter:blur(70px) saturate(1.7) brightness(.9);opacity:0;transition:opacity 1.2s ease;animation:mxdrift 40s ease-in-out infinite alternate}
.mx-amb i.on{opacity:.62}@keyframes mxdrift{to{transform:scale(1.15) rotate(6deg) translate(3%,-2%)}}
.mx-amb::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 30% 20%,rgba(10,9,18,.15),rgba(10,9,18,.82) 70%),linear-gradient(180deg,rgba(10,9,18,.2),rgba(10,9,18,.75))}
.mx-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.mx-cc{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0}
.mx .sp{flex:1}
.mx button{color:inherit;font:inherit}

/* thanh trên cùng */
.mx-top{display:flex;align-items:center;gap:14px;padding:14px 18px 10px;flex:none}
.mx-brand{display:flex;align-items:center;gap:10px;min-width:0}
.mx-brand b{display:block;font-family:"Press Start 2P",ui-monospace,monospace;font-size:12px;letter-spacing:1px;background:linear-gradient(90deg,var(--mx-a),var(--mx-b) 60%,var(--mx-c));-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.mx-brand small{display:block;margin-top:5px;font-size:11px;color:var(--mx-mu);white-space:nowrap}
.mx-vinyl{position:relative;width:38px;height:38px;flex:none;border-radius:50%;background:repeating-radial-gradient(circle,#15131f 0 2px,#24212f 2px 3px);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 6px 18px -6px rgba(111,240,207,.6);animation:mxspin 6s linear infinite}
.mx-vinyl i{position:absolute;inset:32%;border-radius:50%;background:conic-gradient(var(--mx-a),var(--mx-b),var(--mx-c),var(--mx-a))}.mx-vinyl i::after{content:"";position:absolute;inset:38%;border-radius:50%;background:#0a0912}
.mx-vinyl.big{width:110px;height:110px;margin-bottom:6px}@keyframes mxspin{to{transform:rotate(360deg)}}
.mx-search{flex:0 1 560px;display:flex;align-items:center;height:42px;margin-left:12px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:box-shadow .2s,background .2s}
.mx-search:focus-within{background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1.5px var(--mx-a),0 0 0 4px rgba(111,240,207,.12)}
.mx-search>span{display:grid;place-items:center;width:38px;opacity:.55}.mx-search>span .ic{width:17px;height:17px}
.mx-search input{flex:1;min-width:0;height:100%;background:none!important;border:0;outline:0;box-shadow:none!important;padding:0!important;color:var(--mx-tx);font-size:14px}
.mx-search input::placeholder{color:rgba(235,232,255,.45)}
.mx-search button{height:100%;width:56px;border-radius:0 999px 999px 0;display:grid;place-items:center;background:rgba(255,255,255,.08);border-left:1px solid rgba(255,255,255,.1)}.mx-search button:hover{background:rgba(255,255,255,.16)}.mx-search button .ic{width:18px;height:18px}
.mx-who{display:flex;align-items:center;cursor:default}.mx-who .face{margin-left:-7px;box-shadow:0 0 0 2px #14121d}.mx-who small{margin-left:8px;font-size:12px;color:var(--mx-mu);white-space:nowrap}
.mx-ib{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.07);transition:background .15s,transform .2s var(--spring)}.mx-ib:hover{background:rgba(255,255,255,.17)}.mx-ib:active{transform:scale(.92)}.mx-ib .ic{width:18px;height:18px}
.mx-ib.sm{width:30px;height:30px}.mx-ib.sm .ic{width:15px;height:15px}

/* dải phòng (chuyển nhanh) */
.mx-rooms{display:flex;gap:8px;padding:2px 18px 12px;overflow-x:auto;flex:none;scrollbar-width:none}.mx-rooms::-webkit-scrollbar{display:none}
.mx-rc{position:relative;isolation:isolate;overflow:hidden;flex:none;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 10px;border-radius:12px;font-size:13px;font-weight:650;white-space:nowrap;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:background .2s,transform .2s var(--spring)}
.mx-rc:hover{background:rgba(255,255,255,.14)}.mx-rc:active{transform:scale(.96)}
.mx-rc .dot{width:16px;height:16px;border-radius:5px;flex:none;display:grid;place-items:center;background:var(--bg) center/cover;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.mx-rc .dot .eq{height:9px}.mx-rc .dot .eq i{background:#fff;width:2px}
.mx-rc small{font-size:11px;padding:1px 6px;border-radius:99px;background:rgba(255,255,255,.12);color:var(--mx-mu)}
.mx-rc.on{background:var(--mx-tx);color:#0d0b16;box-shadow:0 6px 20px -8px rgba(255,255,255,.5)}.mx-rc.on small{background:rgba(0,0,0,.1);color:#0d0b16}
.mx-rc.add{background:none;box-shadow:inset 0 0 0 1px dashed rgba(255,255,255,.2);border:1px dashed rgba(255,255,255,.25);color:var(--mx-mu)}.mx-rc.add .ic{width:14px;height:14px}

/* thân: cột chính + cột Tiếp theo */
.mx-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:22px;padding:0 18px 0 22px}
.mx-main{min-height:0;overflow-y:auto;padding:0 6px 24px 0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.mx-stage{position:relative}
.mx-stage::before{content:"";position:absolute;inset:4% 3% -3%;border-radius:30px;background:radial-gradient(closest-side,rgba(111,240,207,.18),transparent);filter:blur(30px);z-index:-1}
.mx-slot{aspect-ratio:16/9;max-height:calc(100vh - 360px);min-height:180px;width:100%;margin:0 auto;border-radius:22px;background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);display:grid;place-items:center}
.mx-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:20px;color:var(--mx-mu)}.mx-empty b{font-size:18px;color:var(--mx-tx)}
.mx-now{padding:16px 2px 4px}
.mx-now h1{margin:0;font-size:21px;line-height:1.3;font-weight:800;letter-spacing:-.02em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mx-meta{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:var(--mx-mu);min-height:30px}.mx-meta b{color:var(--mx-tx);font-weight:650}
.mx-badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:99px;font-size:12px;font-weight:700;color:#0d0b16;background:linear-gradient(90deg,var(--mx-a),var(--mx-b))}.mx-badge .ic{width:13px;height:13px}
.mx-room-n{font-size:12px;font-weight:700;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.07)}
.mx-pill{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:99px;font-size:12.5px;font-weight:650;white-space:nowrap;background:rgba(255,255,255,.08);transition:background .15s}.mx-pill:hover{background:rgba(255,255,255,.16)}.mx-pill .ic{width:14px;height:14px}
.mx-pill.dz:hover{background:rgba(255,69,58,.45)}.mx-pill.pri{background:linear-gradient(90deg,var(--mx-a),var(--mx-b));color:#0d0b16}.mx-pill.pri:hover{filter:brightness(1.08)}

/* dock điều khiển */
.mx-dock{margin-top:12px;padding:12px 16px 10px;border-radius:22px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.mx-prog{display:flex;align-items:center;gap:12px;font-size:11.5px;font-variant-numeric:tabular-nums;color:var(--mx-mu)}
.mx-bar{position:relative;flex:1;height:5px;border-radius:5px;background:rgba(255,255,255,.14);cursor:pointer;transition:height .15s}.mx-bar:hover{height:8px}
.mx-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:linear-gradient(90deg,var(--mx-a),var(--mx-b),var(--mx-c));box-shadow:0 0 14px rgba(111,240,207,.5)}
.mx-bar b{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(111,240,207,.25);opacity:0;transition:opacity .15s}.mx-bar:hover b{opacity:1}
.mx-ctl{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;position:relative}
.mx-c{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;transition:background .15s,transform .2s var(--spring),color .15s}.mx-c:hover{background:rgba(255,255,255,.1)}.mx-c:active{transform:scale(.9)}
.mx-c .ic{width:21px;height:21px}.mx-c[data-on]{color:var(--mx-a)}.mx-c[data-on]::after{content:"";position:absolute;bottom:4px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--mx-a)}
.mx-c em{position:absolute;right:7px;top:7px;font-style:normal;font-size:9px;font-weight:900}
.mx-c.big{width:60px;height:60px;margin:0 6px;color:#0d0b16;background:linear-gradient(135deg,#fff,#dcfff6);box-shadow:0 10px 30px -8px rgba(111,240,207,.65)}.mx-c.big:hover{background:#fff;transform:scale(1.06)}.mx-c.big .ic{width:26px;height:26px}
.mx-c.sm{width:34px;height:34px}.mx-c.sm .ic{width:18px;height:18px}
.mx-vol{position:absolute;right:0;display:flex;align-items:center;gap:2px}
.mx-vol input[type=range]{-webkit-appearance:none;appearance:none;width:96px;height:4px!important;padding:0!important;border-radius:4px!important;box-shadow:none!important;background:linear-gradient(90deg,var(--mx-tx) var(--v),rgba(255,255,255,.18) var(--v))!important;outline:0;cursor:pointer}
.mx-vol input::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.mx-vol input::-moz-range-thumb{width:13px;height:13px;border:0;border-radius:50%;background:#fff}

/* hàng chờ */
.mx-qs{margin-top:18px}
.mx-tabs{display:flex;gap:6px;margin-bottom:8px}
.mx-tabs button{height:32px;padding:0 14px;border-radius:10px;font-size:13px;font-weight:650;background:rgba(255,255,255,.06);color:var(--mx-mu)}.mx-tabs button:hover{background:rgba(255,255,255,.12)}
.mx-tabs button.on{background:var(--mx-tx);color:#0d0b16}.mx-tabs i{font-style:normal;margin-left:4px;opacity:.65}
.mx-ql{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:4px 10px}
.mxq{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:14px;transition:background .15s}.mxq:hover{background:var(--mx-hov)}
.mxq-n{width:16px;text-align:center;font-size:12px;font-weight:700;color:var(--mx-mu);flex:none}
.mxq img{width:72px;height:40px;border-radius:9px;object-fit:cover;flex:none;background:#000}
.mxq-t{flex:1;min-width:0}.mxq-t b{display:block;font-size:13px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mxq-t small{font-size:11.5px;color:var(--mx-mu)}
.mxq-a{display:flex;gap:2px;opacity:0;transition:opacity .15s}.mxq:hover .mxq-a{opacity:1}
.mxq-a button,.mxr-a button{width:28px;height:28px;border-radius:9px;display:grid;place-items:center}.mxq-a button:hover,.mxr-a button:hover{background:rgba(255,255,255,.18)}.mxq-a .ic,.mxr-a .ic{width:15px;height:15px}
.mx-emp{grid-column:1/-1;padding:26px 12px;text-align:center;font-size:13px;line-height:1.6;color:var(--mx-mu)}.mx-emp b{color:var(--mx-a)}

/* cột Tiếp theo (đề xuất) */
.mx-side{min-height:0;display:flex;flex-direction:column;padding-bottom:16px}
.mx-sh{display:flex;align-items:center;gap:10px;padding:2px 2px 10px}.mx-sh b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em}.mx-sh small{display:block;font-size:12px;color:var(--mx-mu);margin-top:2px}
.mx-sw{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;cursor:pointer;user-select:none}
.mx-sw input{position:absolute;opacity:0;width:0;height:0}
.mx-sw i{position:relative;width:38px;height:22px;border-radius:99px;background:rgba(255,255,255,.18);transition:background .2s}
.mx-sw i::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4);transition:transform .25s var(--spring)}
.mx-sw input:checked+i{background:linear-gradient(90deg,var(--mx-a),var(--mx-b))}.mx-sw input:checked+i::after{transform:translateX(16px)}
.mx-up{position:relative;display:flex;gap:12px;padding:10px;border-radius:18px;cursor:pointer;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background .15s;flex:none}
.mx-up:hover{background:rgba(255,255,255,.12)}
.mx-up.auto{background:linear-gradient(rgba(20,18,30,.85),rgba(20,18,30,.85)) padding-box,linear-gradient(120deg,var(--mx-a),var(--mx-b),var(--mx-c)) border-box;border:1.5px solid transparent;box-shadow:0 10px 30px -14px rgba(111,240,207,.5)}
.mx-up .mxr-th{width:150px}.mx-up em{display:flex;align-items:center;gap:5px;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--mx-a);margin-bottom:4px}.mx-up em .ic{width:12px;height:12px}
.mx-up em span{text-transform:none;letter-spacing:0;color:var(--mx-mu);font-weight:600}
.mx-up.none{display:block;cursor:default;font-size:12.5px;color:var(--mx-mu);text-align:center;padding:14px}
.mx-lh{display:flex;align-items:baseline;gap:8px;padding:16px 2px 8px;flex:none}.mx-lh b{font-size:14px}.mx-lh small{font-size:11.5px;color:var(--mx-mu)}
.mx-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin-right:-8px;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.mxr{position:relative;display:flex;gap:10px;padding:6px;border-radius:14px;cursor:pointer;transition:background .15s;flex:none}.mxr:hover{background:var(--mx-hov)}
.mxr-th{position:relative;width:168px;aspect-ratio:16/9;flex:none;border-radius:11px;overflow:hidden;background:rgba(0,0,0,.4)}
.mxr-th img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s var(--ease)}.mxr:hover .mxr-th img,.mx-up:hover .mxr-th img{transform:scale(1.06)}
.mxr-th>i{position:absolute;right:5px;bottom:5px;padding:1px 5px;border-radius:5px;font-style:normal;font-size:11px;font-weight:700;background:rgba(0,0,0,.78);font-variant-numeric:tabular-nums}
.mxr-pl{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,6,16,.45);opacity:0;transition:opacity .2s}.mxr-pl .ic{width:30px;height:30px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.mxr:hover .mxr-pl,.mx-up:hover .mxr-pl{opacity:1}
.mxr-t{flex:1;min-width:0;padding-top:1px}.mxr-t b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13.5px;font-weight:650;line-height:1.35;margin-bottom:3px}
.mxr-t small{display:block;font-size:12px;color:var(--mx-mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
.mxr-a{position:absolute;right:6px;bottom:6px;display:flex;gap:2px;padding:2px;border-radius:11px;background:rgba(20,18,30,.92);box-shadow:0 4px 14px rgba(0,0,0,.4);opacity:0;transform:translateY(4px);transition:opacity .15s,transform .2s var(--ease)}
.mxr:hover .mxr-a{opacity:1;transform:none}
.mxr.sk{pointer-events:none}.mxr.sk .mxr-th,.mxr.sk b,.mxr.sk small{background:linear-gradient(90deg,rgba(255,255,255,.06) 30%,rgba(255,255,255,.14) 50%,rgba(255,255,255,.06) 70%) 0 0/300% 100%;animation:mxsk 1.4s linear infinite;border-radius:7px}
.mxr.sk b{height:14px;width:90%;margin:4px 0 8px}.mxr.sk small{height:11px;width:55%}@keyframes mxsk{to{background-position:-300% 0}}
.mx-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:0 8px 12px}.mx-chips button{padding:7px 12px;border-radius:10px;font-size:12.5px;font-weight:600;background:rgba(255,255,255,.08);transition:background .15s}.mx-chips button:hover{background:rgba(255,255,255,.18)}

/* phòng (sảnh) */
.mx-hall{flex:1;min-height:0;overflow:auto;padding:10px 26px 26px}
.mx-hall h2{margin:8px 0 4px;font-size:28px;font-weight:850;letter-spacing:-.03em}.mx-hall p{margin:0 0 18px;font-size:13.5px;color:var(--mx-mu)}
.mx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.mx-card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;padding:14px;border-radius:22px;text-align:left;min-height:130px;transition:transform .3s var(--spring),box-shadow .3s;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 18px 40px -22px rgba(0,0,0,.9)}
.mx-card::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--bg) center/cover;transition:transform .6s var(--ease)}.mx-card::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,rgba(10,9,18,.82),rgba(10,9,18,.35))}
.mx-card:hover{transform:translateY(-4px)}.mx-card:hover::before{transform:scale(1.08)}
.mx-card.on{box-shadow:inset 0 0 0 2px var(--mx-a),0 0 34px -8px rgba(111,240,207,.6)}
.mx-card-art{position:relative;width:104px;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:rgba(0,0,0,.4);display:grid;place-items:center;grid-row:span 2}.mx-card-art img{width:100%;height:100%;object-fit:cover}.mx-card-art>span>.ic{width:28px;height:28px;opacity:.7}
.mx-card-art .eq{position:absolute;left:6px;bottom:6px;padding:3px 4px;border-radius:5px;background:rgba(0,0,0,.55);height:14px}
.mx-card-t b{display:block;font-size:17px;font-weight:800}.mx-card-t small{display:block;font-size:12px;color:var(--mx-mu)}.mx-card-t em{display:block;font-style:normal;font-size:12px;margin-top:5px;color:var(--mx-a);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.mx-card-w{display:flex;align-items:center;align-self:end}.mx-card-w .face{margin-right:-6px;box-shadow:0 0 0 2px #14121d}.mx-card-w small{margin-left:12px;font-size:11.5px;color:var(--mx-mu)}
.mx-card-ed{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(0,0,0,.4)}.mx-card-ed:hover{background:rgba(0,0,0,.7)}.mx-card-ed .ic{width:15px;height:15px}
.mx-card.add{background:rgba(255,255,255,.04);border:1.5px dashed rgba(255,255,255,.22);box-shadow:none;align-items:center}.mx-card.add::before,.mx-card.add::after{display:none}
.mx-plus{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1)}.mx-plus .ic{width:24px;height:24px}
.mx-form .mx-pill{height:36px}

/* thông báo trong cửa sổ */
.mx-note{position:absolute;left:50%;bottom:22px;z-index:4;max-width:min(520px,90%);padding:10px 18px;border-radius:99px;font-size:13px;font-weight:600;background:rgba(245,243,255,.95);color:#0d0b16;box-shadow:0 14px 34px -10px rgba(0,0,0,.7);transform:translate(-50%,20px);opacity:0;pointer-events:none}
.mx-note.on{animation:mxnote 3.4s var(--ease)}@keyframes mxnote{0%{opacity:0;transform:translate(-50%,20px)}10%,82%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0)}}

/* khung video trên cùng: thẻ đếm ngược "Tiếp theo trong …" */
.mu-vid.big{border-radius:22px;box-shadow:0 30px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.08)}
.mx-upn{position:absolute;right:14px;bottom:14px;z-index:3;display:flex;align-items:center;gap:10px;max-width:min(380px,calc(100% - 28px));padding:8px 8px 8px 8px;border-radius:16px;color:#fff;background:rgba(12,10,20,.82);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 12px 30px -10px rgba(0,0,0,.8),inset 0 0 0 1px rgba(255,255,255,.12);animation:mxupn .45s var(--spring)}
.mx-upn[hidden]{display:none}.mu-vid:not(.big) .mx-upn{display:none}@keyframes mxupn{from{opacity:0;transform:translateY(12px) scale(.96)}}
.mx-upn img{width:88px;height:50px;border-radius:9px;object-fit:cover;flex:none}
.mx-upn>span{min-width:0;flex:1}.mx-upn small{display:block;font-size:11.5px;color:rgba(255,255,255,.7)}.mx-upn small b{color:#6ff0cf;font-size:13px}
.mx-upn>span>b{display:block;font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx-upn button{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.12)}.mx-upn button:hover{background:rgba(255,255,255,.25)}.mx-upn button .ic{width:16px;height:16px}

/* trình phát nhỏ: đĩa tròn có vòng tiến độ */
.mxm{position:fixed;left:16px;bottom:16px;z-index:78;display:flex;align-items:center;gap:6px;width:min(400px,calc(100vw - 110px));padding:7px 8px 7px 7px;border-radius:999px;color:#f5f3ff;
  background:linear-gradient(rgba(16,14,26,.86),rgba(16,14,26,.86)) padding-box,linear-gradient(120deg,rgba(111,240,207,.6),rgba(154,134,255,.6),rgba(255,141,176,.6)) border-box;border:1px solid transparent;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 16px 40px -14px rgba(0,0,0,.8);animation:winin2 .4s var(--spring)}
body.touch .mxm{left:12px;bottom:auto;top:58px;width:min(340px,calc(100vw - 24px))}
.mxm-disc{--p:0;position:relative;width:56px;height:56px;flex:none;border-radius:50%;cursor:pointer;padding:3px;background:conic-gradient(#6ff0cf calc(var(--p)*1%),#9a86ff calc(var(--p)*1%),rgba(255,255,255,.12) 0)}
.mxm-disc::after{content:"";position:absolute;inset:3px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(16,14,26,.9);pointer-events:none}
.mxm-v{width:100%;height:100%;border-radius:50%;overflow:hidden;background:#000;display:grid;place-items:center}.mxm-v .ic{width:20px;height:20px;color:rgba(255,255,255,.6)}
.mxm-t{flex:1;min-width:0;cursor:pointer;padding-left:6px}
.mxm-t small{display:flex;align-items:center;gap:6px;font-size:11px;color:rgba(235,232,255,.6);white-space:nowrap;overflow:hidden}
.mxm-t>b{display:block;font-size:13.5px;font-weight:650;white-space:nowrap;overflow:hidden;margin:1px 0}.mxm-t>b span{display:inline-block}
.mxm-t>b.mq span{animation:mxmq 14s linear infinite;padding-right:16px}.mxm-t>b.mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6px,#000 calc(100% - 14px),transparent);mask-image:linear-gradient(90deg,transparent,#000 6px,#000 calc(100% - 14px),transparent)}
@keyframes mxmq{0%,15%{transform:translateX(0)}85%,100%{transform:translateX(var(--w))}}
.mxm-t em{display:flex;align-items:center;gap:4px;font-style:normal;font-size:11px;color:#6ff0cf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mxm-t em .ic{width:11px;height:11px;flex:none}
.mxm-b{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:none;color:#f5f3ff;transition:background .15s,transform .2s var(--spring)}.mxm-b:hover{background:rgba(255,255,255,.14)}.mxm-b:active{transform:scale(.9)}
.mxm-b .ic{width:18px;height:18px}.mxm-b.main{background:#f5f3ff;color:#0d0b16}.mxm-b.main:hover{background:#fff}.mxm-b.x{width:26px;height:26px;opacity:.6}.mxm-b.x .ic{width:13px;height:13px}
.mxm.play .eq i{animation:eqb .9s ease-in-out infinite}.mxm .eq i{background:#6ff0cf}
.mxm .mu-note{bottom:calc(100% + 10px);border-radius:16px}
.mu-vid.disc{border-radius:50%!important;transition:none}.mu-vid.disc iframe{width:178%!important;margin-left:-39%}

/* màn hẹp / điện thoại */
@media (max-width:980px){.mx-body{grid-template-columns:minmax(0,1fr) 330px}.mxr-th{width:136px}.mx-brand span:last-child{display:none}}
@media (max-width:760px){
  .mx{padding:0}.mx-in{width:100%;height:100%;border-radius:0}
  .mx-top{flex-wrap:wrap;gap:10px;padding:10px 12px}.mx-search{order:5;flex:1 1 100%;margin:0}.mx-who small{display:none}
  .mx-rooms{padding:0 12px 10px}
  .mx-body{display:block;overflow-y:auto;padding:0 12px 20px}.mx-main{overflow:visible;padding:0}.mx-side{padding-top:18px}.mx-list{overflow:visible;margin:0;padding:0}
  .mx-meta{flex-wrap:wrap;row-gap:8px}.mx-room-n{display:none}.mx-badge{white-space:nowrap}.mx-now h1{font-size:18px}
  .mx-vol{position:static;margin-left:auto}.mx-vol input{width:64px}.mx-ctl{justify-content:flex-start;gap:2px}.mx-c.big{width:52px;height:52px}.mx-ql{grid-template-columns:1fr}
  .mx-hall{padding:8px 12px 20px}.mx-grid{grid-template-columns:1fr}
}
.mx-search{flex-direction:row;gap:0}.mx-search input{height:100%!important;border-radius:0!important}
.mx label.mx-sw{flex-direction:row}
#muWin:not([hidden])~#muMini{display:none}