/* ===== v10: giảm lag + sửa trình phát nhỏ + chế độ nhẹ ===== */

/* Trình phát nhỏ: nền đặc (không làm mờ phía sau — đỡ tốn GPU khi cuộn), tên bài cắt "…" gọn gàng */
.mm{background:rgba(14,18,36,.94);backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-theme=light] .mm{background:rgba(16,22,48,.95)}
.mm-txt{display:grid;gap:1px;min-width:0;max-width:190px}
.mm-title{display:block;font-size:.86rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mm-art{line-height:1.2}
@media(max-width:520px){.mm-txt{max-width:120px}}
/* Chừa chỗ để thanh phát không che chân trang */
body.has-mm footer{padding-bottom:calc(36px + 92px + env(safe-area-inset-bottom))}
body.has-mm .zalo{bottom:calc(16px + env(safe-area-inset-bottom))}
@media(max-width:520px){body.has-mm .zalo{bottom:calc(84px + env(safe-area-inset-bottom))}}

/* Góc âm nhạc: bỏ khối màu trôi liên tục; chỉ thẻ đang chọn mới làm mờ nền (các thẻ bên cạnh dùng nền trong) */
.ms.anim .ms-amb .b1,.ms.anim .ms-amb .b2{animation:none}
.ms-card{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(160deg,rgba(255,255,255,.2),rgba(255,255,255,.07));will-change:transform}
.ms-card.on{backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.ms-amb .ms-img{filter:blur(40px) saturate(1.4)}

/* Tên shop dạng chữ thường (chế độ nhẹ) */
.hero-tech-plain{margin:0;font-weight:700;font-size:clamp(3rem,11vw,8.5rem);line-height:.95;letter-spacing:-.05em;color:var(--text)}
.pc-img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px}

/* ===== Chế độ nhẹ: tắt hiệu ứng tốn tài nguyên ===== */
.lite body::before{animation:none!important}
.lite .ms-card.on,.lite .icon-btn,.lite .chip-float,.lite .zalo{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.lite .ms-card{filter:none!important}
.lite .ms-amb .ms-img{display:none}
.lite .mm.playing .mm-cov .mc,.lite .np-wrap.playing .np-bars i,.lite .np-wrap.playing .np-cover,.lite .chip-float,.lite .tswitch .st,.lite .scroll-hint i{animation:none!important}
.lite .hero-sky.no-fx{background:radial-gradient(80% 70% at 70% 20%,rgba(56,189,248,.28),transparent 70%),radial-gradient(70% 60% at 20% 80%,rgba(30,63,216,.35),transparent 70%)}
:root.lite[data-theme=light] .hero-sky.no-fx{background:radial-gradient(80% 70% at 70% 20%,rgba(56,189,248,.18),transparent 70%),radial-gradient(70% 60% at 20% 80%,rgba(51,89,240,.16),transparent 70%)}

/* ===== Admin v10: Nội dung & Tích hợp ===== */
.ed-list{display:grid;gap:12px}
.ed-item{border:1px solid var(--border);border-radius:16px;padding:14px;background:var(--surface);display:grid;gap:10px}
.ed-item .ed-bar{display:flex;gap:6px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ed-item .ed-bar b{font-size:.9rem}
.ed-item textarea{min-height:110px}
.ed-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.ig-code{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ig-code code{padding:8px 12px;border-radius:10px;background:var(--surface2);border:1px solid var(--border);word-break:break-all;font-size:.85rem}
.ig-steps{margin:0;padding-left:20px;display:grid;gap:6px;color:var(--muted)}
.ig-steps b{color:var(--text)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;font-size:.74rem;font-weight:700;border:1px solid var(--border)}
.pill.ok{background:rgba(34,197,94,.14);color:#22c55e;border-color:rgba(34,197,94,.35)}
.pill.warn{background:rgba(245,158,11,.14);color:#f59e0b;border-color:rgba(245,158,11,.35)}
.pill.err{background:rgba(239,68,68,.14);color:#ef4444;border-color:rgba(239,68,68,.35)}