/* Hiệu ứng theo mùa / ngày lễ: icon bay mờ dần theo nhiều phía (trang chủ: toàn màn hình + splash; trang con: trong thanh header) */
.hw-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1;contain:layout paint}
.hw-layer.hw-home{position:fixed;z-index:6}
.hw-layer.hw-trail{position:fixed;z-index:9990}
.hw-layer.hw-splash{position:absolute;inset:0;z-index:5;overflow:hidden;pointer-events:none}
.hw-i{position:absolute;left:0;top:0;line-height:1;opacity:0;will-change:transform,opacity;user-select:none;-webkit-user-select:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
@media (prefers-reduced-motion:reduce){.hw-layer{display:none}}
.hw-vn{background-size:100% 100%;background-repeat:no-repeat;border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.35)}

/* Nút ✨ bật / tắt hiệu ứng ngày lễ — nằm TRÊN CÙNG cụm nút điều khiển góc dưới trái (cùng cỡ --ctl với cụm).
   Vị trí theo ô (slot) của cụm: PC thu gọn = ô 1, xổ = ô 3; mobile (có nút nhạc) thu gọn = ô 2, xổ = ô 4.
   Thu gọn chỉ còn icon; mở đủ nhãn 5 giây khi tải trang và khi rê chuột / focus. */
html body .fx-toggle{--fxp:calc((var(--ctl,30px) - 14px)/2);position:fixed;z-index:47;left:var(--ml,calc(14px + env(safe-area-inset-left,0px)));right:auto;top:auto;bottom:calc(var(--mb,14px) + var(--ms,40px));height:var(--ctl,30px);min-width:var(--ctl,30px);box-sizing:border-box;padding:0 var(--fxp);gap:0;border:0;border-radius:999px;background:rgba(6,40,74,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--f-head,sans-serif);font-size:10px;line-height:1;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:bottom .4s cubic-bezier(.2,.8,.2,1),left .35s cubic-bezier(.2,.8,.2,1),color .2s,background .2s,padding .45s ease,gap .45s ease,opacity .5s ease}
html body.mopen .fx-toggle{bottom:calc(var(--mb,14px) + 3 * var(--ms,40px))}
html body.mright .fx-toggle{left:auto;right:calc(100vw - var(--ml) - var(--ctl,30px))}
html body.mdrag .fx-toggle{transition:none!important}
html[data-theme="mystic"] .fx-toggle{background:rgba(25,4,56,.7)}
.fx-toggle:focus-visible{outline:2px solid #0ff;outline-offset:3px}
.fx-toggle.off:not(.full):not(:hover)::after{content:"";position:absolute;left:50%;top:50%;width:13px;margin-left:-6.5px;height:2px;border-radius:2px;background:#fff;box-shadow:0 0 0 1px rgba(3,24,48,.55);transform:rotate(-45deg)}
.fx-toggle .fxi{display:inline-block;flex:none;width:14px;font-size:12px;line-height:1;text-align:center;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.fx-toggle .fxl{display:inline-block;line-height:2.1;max-width:0;opacity:0;overflow:hidden;transition:max-width .5s ease,opacity .35s ease}
html body .fx-toggle.full,html body .fx-toggle:focus-visible{padding:0 13px 0 var(--fxp);gap:6px}
.fx-toggle.full .fxl,.fx-toggle:focus-visible .fxl{max-width:260px;opacity:1}
@media (hover:hover){html body .fx-toggle:hover{color:#0ff;background:rgba(6,40,74,.85);padding:0 13px 0 var(--fxp);gap:6px}html[data-theme="mystic"] .fx-toggle:hover{background:rgba(40,8,86,.92)}.fx-toggle:hover .fxl{max-width:260px;opacity:1}}
/* Mobile: nút nhạc chiếm ô 1 khi thu gọn → nút ✨ lên ô 2 */
@media (orientation:portrait),(max-width:768px){html body .fx-toggle{bottom:calc(var(--mb,14px) + 2 * var(--ms,40px));touch-action:none;-webkit-user-select:none;user-select:none}html body.mopen .fx-toggle{bottom:calc(var(--mb,14px) + 4 * var(--ms,40px))}}
@media (orientation:portrait),(max-width:768px){html body .fx-toggle{--fxp:calc((var(--ctl,45px) - 21px)/2);font-size:15px}.fx-toggle .fxi{width:21px;font-size:18px}.fx-toggle.off:not(.full):not(:hover)::after{width:20px;margin-left:-10px}html body .fx-toggle.full,html body .fx-toggle:focus-visible{padding:0 20px 0 var(--fxp);gap:9px}}
@media (prefers-reduced-motion:reduce){html body .fx-toggle{transition:none!important}}