.music-control {
            position: fixed;
            top: calc(50% + 80px);
            right: 8px;
            z-index: 116;
            display: flex;
            align-items: center;
        }

        .music-toggle {
            position: relative;
            z-index: 2;
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
            flex: 0 0 34px;
            padding: 0;
            border: 1px solid rgba(126, 235, 255, 0.72);
            border-radius: 50%;
            color: #dff8ff;
            background: rgba(2, 29, 39, 0.92);
            box-shadow:
                0 0 0 4px rgba(2, 20, 29, 0.50),
                0 0 16px rgba(69, 221, 243, 0.28);
            font-size: 15px;
            line-height: 1;
            cursor: pointer;
            transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
        }

        .music-toggle:hover,
        .music-control:focus-within .music-toggle {
            background: rgba(22, 117, 139, 0.96);
            box-shadow:
                0 0 0 4px rgba(28, 188, 214, 0.18),
                0 0 20px rgba(69, 221, 243, 0.72);
            transform: scale(1.08);
        }

        .music-toggle.is-playing {
            color: #07141b;
            background: #45ddf3;
        }

        .music-toggle-icon {
            display: block;
            transform: translateX(1px);
        }

        /* Hover vào nút nhạc để xem playlist; có thể nhấp trực tiếp để chọn bài. */
        .music-playlist {
            position: absolute;
            top: 50%;
            right: calc(100% + 12px);
            width: 250px;
            padding: 10px 11px;
            border: 1px solid rgba(126, 235, 255, 0.34);
            border-radius: 12px;
            color: #dff8ff;
            background: rgba(2, 19, 28, 0.95);
            box-shadow: 0 14px 34px rgba(0, 0, 0, 0.40), 0 0 18px rgba(69, 221, 243, 0.16);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transform: translate(8px, -50%) scale(0.98);
            transform-origin: right center;
            transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
        }

        /* Cầu hover giữa nút tròn và playlist để rê chuột sang bảng không bị mất. */
        .music-playlist::after {
            content: '';
            position: absolute;
            top: 0;
            right: -14px;
            width: 14px;
            height: 100%;
            background: transparent;
        }

        .music-control:hover .music-playlist,
        .music-control:focus-within .music-playlist {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translate(0, -50%) scale(1);
        }

        .music-playlist-title {
            margin: 0 0 7px;
            color: #9cf3ff;
            font-size: 11px;
            font-weight: 900;
            letter-spacing: 0.12em;
            text-transform: uppercase;
        }

        .music-playlist-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: grid;
            gap: 4px;
        }

        .music-playlist-item {
            --progress: 0%;
            position: relative;
            isolation: isolate;
            overflow: hidden;
            display: grid;
            grid-template-columns: 16px minmax(0, 1fr) auto;
            align-items: center;
            gap: 7px;
            min-height: 32px;
            padding: 6px 8px;
            border-radius: 7px;
            color: #aacbd3;
            font-size: 12px;
            line-height: 1.25;
            cursor: pointer;
            user-select: none;
            outline: none;
            transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
        }

        /* Thanh tiến trình nằm ẩn bên trong nền của bài đang chọn. */
        .music-playlist-item::after {
            content: '';
            position: absolute;
            inset: 0 auto 0 0;
            z-index: -2;
            width: var(--progress);
            border-radius: inherit;
            background:
                linear-gradient(
                    90deg,
                    rgba(69, 221, 243, 0.07),
                    rgba(69, 221, 243, 0.20) 62%,
                    rgba(142, 244, 255, 0.32)
                );
            box-shadow:
                inset -10px 0 18px rgba(110, 238, 255, 0.08),
                0 0 14px rgba(69, 221, 243, 0.08);
            opacity: 0;
            transition: width 0.12s linear, opacity 0.18s ease;
        }

        .music-playlist-item:hover,
        .music-playlist-item:focus-visible {
            color: #ffffff;
            background: rgba(69, 221, 243, 0.10);
            transform: translateX(2px);
        }

        .music-track-icon {
            position: relative;
            z-index: 2;
            width: 14px;
            color: #5ecfe6;
            text-align: center;
            font-size: 12px;
        }

        .music-track-name,
        .music-track-time {
            position: relative;
            z-index: 2;
        }

        .music-track-name {
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .music-track-time {
            min-width: 64px;
            color: #739aa4;
            font-size: 10px;
            font-variant-numeric: tabular-nums;
            text-align: right;
            white-space: nowrap;
        }

        .music-playlist-item.is-current {
            color: #ffffff;
            background: rgba(69, 221, 243, 0.10);
            box-shadow:
                inset 0 0 0 1px rgba(126, 235, 255, 0.18),
                0 0 12px rgba(69, 221, 243, 0.06);
            cursor: ew-resize;
            touch-action: none;
        }

        .music-playlist-item.is-current.is-seeking {
            box-shadow:
                inset 0 0 0 1px rgba(156, 243, 255, 0.62),
                0 0 18px rgba(69, 221, 243, 0.22);
        }

        .music-playlist-item.is-current::after {
            opacity: 1;
        }

        .music-playlist-item.is-current .music-track-icon {
            color: #9cf3ff;
            font-size: 9px;
        }

        .music-playlist-item.is-current .music-track-time {
            color: #bdeff7;
        }

        /* Hạt sáng chạy ở đầu thanh tiến trình của bài hiện tại. */
        .music-progress-dot {
            position: absolute;
            top: 50%;
            left: var(--progress);
            z-index: 3;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #baf8ff;
            box-shadow:
                0 0 5px rgba(186, 248, 255, 1),
                0 0 12px rgba(69, 221, 243, 0.95),
                0 0 20px rgba(69, 221, 243, 0.55);
            opacity: 0;
            pointer-events: none;
            transform: translate(-50%, -50%);
            transition: left 0.12s linear, opacity 0.18s ease;
        }

        .music-playlist-item.is-current .music-progress-dot {
            opacity: 1;
        }

        .music-playlist-item.is-current:not(.is-playing) .music-progress-dot {
            box-shadow:
                0 0 4px rgba(186, 248, 255, 0.85),
                0 0 9px rgba(69, 221, 243, 0.55);
        }

        .music-volume-control {
            display: grid;
            grid-template-columns: 18px minmax(0, 1fr) 36px;
            align-items: center;
            gap: 7px;
            margin-top: 9px;
            padding-top: 9px;
            border-top: 1px solid rgba(126, 235, 255, 0.13);
        }

        .music-volume-icon {
            color: #76dff1;
            font-size: 12px;
            text-align: center;
            user-select: none;
        }

        .music-volume-slider {
            width: 100%;
            height: 16px;
            margin: 0;
            padding: 0;
            appearance: none;
            -webkit-appearance: none;
            background: transparent;
            cursor: pointer;
        }

        .music-volume-slider::-webkit-slider-runnable-track {
            height: 4px;
            border-radius: 999px;
            background: linear-gradient(90deg, #45ddf3 0 var(--volume, 80%), rgba(126, 235, 255, 0.15) var(--volume, 80%) 100%);
            box-shadow: inset 0 0 0 1px rgba(126, 235, 255, 0.10);
        }

        .music-volume-slider::-webkit-slider-thumb {
            width: 12px;
            height: 12px;
            margin-top: -4px;
            border: 0;
            border-radius: 50%;
            appearance: none;
            -webkit-appearance: none;
            background: #baf8ff;
            box-shadow: 0 0 8px rgba(69, 221, 243, 0.9);
        }

        .music-volume-slider::-moz-range-track {
            height: 4px;
            border: 0;
            border-radius: 999px;
            background: rgba(126, 235, 255, 0.15);
        }

        .music-volume-slider::-moz-range-progress {
            height: 4px;
            border-radius: 999px;
            background: #45ddf3;
        }

        .music-volume-slider::-moz-range-thumb {
            width: 12px;
            height: 12px;
            border: 0;
            border-radius: 50%;
            background: #baf8ff;
            box-shadow: 0 0 8px rgba(69, 221, 243, 0.9);
        }

        .music-volume-value {
            color: #9bc8d1;
            font-size: 10px;
            font-variant-numeric: tabular-nums;
            text-align: right;
            white-space: nowrap;
        }

        .music-playlist-note {
            margin-top: 7px;
            padding-top: 7px;
            border-top: 1px solid rgba(126, 235, 255, 0.13);
            color: #739aa4;
            font-size: 10px;
            line-height: 1.35;
        }
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#050811;color:#e5e7eb;font-family:Arial,sans-serif}
*{box-sizing:border-box}#pwf-site-frame{display:block;border:0;width:100%;height:100%;height:100dvh}
[hidden]{display:none!important}#pwf-shell-loading,#pwf-shell-error{position:fixed;top:8px;left:50%;transform:translateX(-50%);z-index:200;background:#111827;color:#fcd34d;border:1px solid #a16207;border-radius:12px;padding:8px 14px;font-size:12px}
#pwf-shell-error button{background:#6b4715;color:white;border:0;border-radius:6px;padding:6px;cursor:pointer}
body[data-music-page="panel"] .music-control{top:auto;bottom:18px;right:16px}
body[data-music-page="panel"] .music-playlist{top:auto;bottom:calc(100% + 12px);right:0;transform:translateY(8px) scale(.98);transform-origin:right bottom}
body[data-music-page="panel"] .music-control:hover .music-playlist,body[data-music-page="panel"] .music-control:focus-within .music-playlist{transform:translateY(0) scale(1)}
@media(max-width:1023px){
 .music-control,body[data-music-page="panel"] .music-control{top:auto;right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 76px)}
 .music-playlist{top:auto;bottom:calc(100% + 12px);right:0;transform:translateY(8px) scale(.98);transform-origin:right bottom;max-width:calc(100vw - 28px)}
 .music-control:hover .music-playlist,.music-control:focus-within .music-playlist{transform:translateY(0) scale(1)}
}

/* Keep the shared player separate from the homepage's center-right navigation dock. */
body .music-control{top:auto;right:16px;bottom:18px}
body .music-playlist{top:auto;bottom:calc(100% + 12px);right:0;transform:translateY(8px) scale(.98);transform-origin:right bottom}
body .music-control:hover .music-playlist,body .music-control:focus-within .music-playlist{transform:translateY(0) scale(1)}
@media(max-width:1023px){body .music-control{bottom:calc(env(safe-area-inset-bottom,0px) + 76px)}}