/* ================= THEMES =================
   Blue Neighborhood (default) · Mystic Theme (mystic) · Black & White (bw) · Yellow Theme (yellow)
   Tên theme lấy theo thư mục assets/Themes. (Trước đây: "Light Mode" = Blue Neighborhood, "Dark Mode" = Mystic Theme.) */
/* Ẩn phần tử riêng của từng theme khi theme đó không được chọn */
html:not([data-theme="mystic"]) :is(.mbg,.sp-m){display:none}
html:not([data-theme="bw"]) :is(.bg-bw,.sp-bw){display:none}
html:not([data-theme="yellow"]) :is(.bg-yl,.sp-yl){display:none}
/* Ẩn phần tử của Blue Neighborhood khi dùng theme khác */
html:is([data-theme="mystic"],[data-theme="bw"],[data-theme="yellow"]) :is(.bg-def,.sp-def){display:none}

html[data-theme="mystic"]{--fill:#190438;--bg:#190438}

/* ---------- Trang chủ: nền động daylight/nightlight ---------- */
.mbg{position:relative;overflow:hidden;transform-origin:50% 100%;transition:filter 1.2s ease,transform 1.2s ease}
.mbg-in{position:relative}
.mbg .mb,.mbg .mb img{display:block;width:100%;height:auto}
.mbg .mb{position:relative;z-index:1}
.mbg .mb+.mb{position:absolute;inset:0}
.mbg .mb.top{z-index:2}
.mbg .mb img{user-select:none;-webkit-user-drag:none}
/* Chuyển ảnh: các lát ngang của ảnh mới "nhảy" ra (glitch nhẹ) + lệch kênh màu */
.mbg .mb.gin{animation:mslice .55s steps(1,end) both}
.mbg .mb.fin{animation:mfade .7s ease both}
.mbg.glitch .mbg-in{animation:mglitch .55s steps(1,end)}
@keyframes mslice{
 0%{clip-path:inset(0 0 100% 0)}
 14%{clip-path:inset(34% 0 52% 0)}
 28%{clip-path:inset(8% 0 78% 0)}
 42%{clip-path:inset(58% 0 22% 0)}
 56%{clip-path:inset(18% 0 40% 0)}
 70%{clip-path:inset(0 0 12% 0)}
 84%,100%{clip-path:inset(0 0 0 0)}
}
@keyframes mfade{from{opacity:0}to{opacity:1}}
@keyframes mglitch{
 0%{transform:none;filter:none}
 12%{transform:translate(-5px,1px) skewX(-1.2deg);filter:drop-shadow(5px 0 0 rgba(255,0,90,.5)) drop-shadow(-5px 0 0 rgba(0,225,255,.5)) brightness(1.2) contrast(1.12)}
 26%{transform:translate(6px,-1px) skewX(.8deg);filter:drop-shadow(-6px 0 0 rgba(255,0,90,.45)) drop-shadow(6px 0 0 rgba(0,225,255,.45)) hue-rotate(22deg) saturate(1.4)}
 40%{transform:translate(-3px,0);filter:drop-shadow(3px 0 0 rgba(255,0,90,.4)) drop-shadow(-3px 0 0 rgba(0,225,255,.4)) brightness(.88)}
 56%{transform:translate(2px,1px) skewX(-.5deg);filter:drop-shadow(-2px 0 0 rgba(255,0,90,.3)) drop-shadow(2px 0 0 rgba(0,225,255,.3))}
 74%{transform:translate(-1px,0);filter:drop-shadow(1px 0 0 rgba(255,0,90,.22)) drop-shadow(-1px 0 0 rgba(0,225,255,.22))}
 100%{transform:none;filter:none}
}
@media (prefers-reduced-motion:reduce){.mbg.glitch .mbg-in{animation:none}}

/* Fade 2 bên (PC) vào màu nền #190438 */
@media (min-aspect-ratio:16/9){
 .mbg{-webkit-mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.12) 3%,rgba(0,0,0,.4) 6%,rgba(0,0,0,.78) 9.5%,#000 13%,#000 87%,rgba(0,0,0,.78) 90.5%,rgba(0,0,0,.4) 94%,rgba(0,0,0,.12) 97%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,rgba(0,0,0,.12) 3%,rgba(0,0,0,.4) 6%,rgba(0,0,0,.78) 9.5%,#000 13%,#000 87%,rgba(0,0,0,.78) 90.5%,rgba(0,0,0,.4) 94%,rgba(0,0,0,.12) 97%,transparent 100%)}
}
@media (min-aspect-ratio:1/1) and (max-aspect-ratio:16/9){
 .mbg{-webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.4) 5%,rgba(0,0,0,.8) 10%,#000 16%);mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.4) 5%,rgba(0,0,0,.8) 10%,#000 16%)}
}
/* Mobile: fade xuống dưới vào #190438 (và nhẹ ở mép trên) */
@media (orientation:portrait){
 .mbg{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 72%,rgba(0,0,0,.6) 86%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 72%,rgba(0,0,0,.6) 86%,transparent 100%)}
 html[data-theme="mystic"] .stage{background:#190438}
}
/* Logo Mystic (PC): vị trí mới theo thiết kế */
@media (orientation:landscape){
 html[data-theme="mystic"] .logo-pos{left:9.6%;top:42.9%;width:25.8%}
}
/* Rê chuột vào logo: nền Mystic cũng blur như Blue Neighborhood */
@media (hover:hover) and (orientation:landscape){
 body.logo-hover .mbg{filter:blur(10px);transform:scale(1.05)}
}
/* Splash Mystic */
html[data-theme="mystic"] .splash{background:#190438}

/* ---------- Màu chung của Mystic (home + trang con) ---------- */
html[data-theme="mystic"] .dd{background:rgba(25,4,56,.93);box-shadow:0 1cqw 3cqw rgba(6,0,18,.55)}
html[data-theme="mystic"] .bio-pos{text-shadow:0 1px 8px rgba(10,0,26,.7)}
html[data-theme="mystic"] .totop{background:rgba(25,4,56,.7)}
@media (hover:hover){html[data-theme="mystic"] .totop:hover{background:rgba(40,8,86,.92)}}
html[data-theme="mystic"] .lang-fixed,html[data-theme="mystic"] .theme-fixed{filter:drop-shadow(0 1px 6px rgba(6,0,18,.55))}
/* Trang con */
html[data-theme="mystic"] body:has(header){background:linear-gradient(180deg,#0d0222 0,var(--bg) 520px) no-repeat,var(--bg)}
html[data-theme="mystic"] header::before{background:rgba(22,4,52,.7)}
html[data-theme="mystic"] .m-bg{background:rgba(10,2,26,.72)}
html[data-theme="mystic"] .cov{background:#26104a}
html[data-theme="mystic"] header .dd{background:rgba(25,4,56,.95)}
/* Header (PC, trang con): nút đổi theme sát cạnh nút đổi ngôn ngữ */
header nav>ul>.theme-li{margin-right:-16px}

/* ================= HIỆU ỨNG CHUNG (mọi theme) ================= */
/* Logo (splash, trang chủ, header mọi trang): gradient cầu vồng chạy 1 lượt khi rê chuột */
.logo-pos a,.brand,.slogo-fx{position:relative}
.slogo-fx{display:block;line-height:0}
.logo-pos a::after,.brand::after,.slogo-fx::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
 background:linear-gradient(90deg,#ff5f6d,#ffa45b,#ffe45e,#7bed9f,#4cc9f0,#7b6cff,#e56bff,#ff5f6d);background-size:300% 100%;background-position:100% 0;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100% 100%;mask-size:100% 100%;
 -webkit-mask-image:url("../website%20logo%20(signature)/white%20+%20gradient%20heart/logo.webp");mask-image:url("../website%20logo%20(signature)/white%20+%20gradient%20heart/logo.webp")}
@media (orientation:portrait){
 .logo-pos a::after,.brand::after{-webkit-mask-image:url("../website%20logo%20(signature)/white%20+%20gradient%20heart/thieurino%20website%20mobile%20header%20logo.webp");mask-image:url("../website%20logo%20(signature)/white%20+%20gradient%20heart/thieurino%20website%20mobile%20header%20logo.webp")}
}
/* nhấp nháy: gradient cầu vồng chạy động, chớp sáng/tối vài nhịp rồi trả về logo gốc */
@keyframes rbLogo{0%{opacity:0;background-position:100% 0}9%{opacity:1}20%{opacity:.2}31%{opacity:1}43%{opacity:.3}55%{opacity:1}86%{opacity:1}100%{opacity:0;background-position:0 0}}
@media (hover:hover){
 /* Trang chủ: logo chỉ zoom (logo-hover), không đổi màu cầu vồng; trang con + splash vẫn nháy màu */
 .brand:hover::after,.slogo-fx:hover::after{animation:rbLogo 1.6s ease-in-out 1 both}
}
.brand:focus-visible::after{animation:rbLogo 1.6s ease-in-out 1 both}
/* Trang con: tự nháy mỗi 30 giây (fx.js gắn .rb-auto) */
.brand.rb-auto::after{animation:rbLogo 1.6s ease-in-out 1 both}
@media (prefers-reduced-motion:reduce){.logo-pos a::after,.brand::after,.slogo-fx::after{animation:none!important}}

/* Nút menu: bấm → nhấp nháy màu cầu vồng động rồi mới chuyển trang (JS gắn class .rb-go) */
html body nav a.rb-go,html body .dd a.rb-go{
 color:transparent!important;-webkit-text-fill-color:transparent;
 background-image:linear-gradient(90deg,#ff5f6d,#ffa45b,#ffe45e,#7bed9f,#4cc9f0,#7b6cff,#e56bff,#ff5f6d);
 background-size:200% 100%;-webkit-background-clip:text;background-clip:text;border-bottom-color:transparent;
 animation:mfxFlow .45s linear infinite,rbBlink .65s steps(1,end) both;
}
@keyframes rbBlink{0%{opacity:1}16%{opacity:.2}33%{opacity:1}50%{opacity:.2}66%{opacity:1}82%{opacity:.2}100%{opacity:1}}

/* Mystic Theme: dòng phụ bản quyền mascot ở footer (Ricky Nguyễn). Black & White: cùng dòng nhưng tên là Đỉnh Hồ. Blue Neighborhood / Yellow Theme: không có dòng này */
.mascot{display:none}
html[data-theme="mystic"] .mascot:not(.mascot-bw){display:block;margin-top:.4em;font-size:.92em;white-space:nowrap}
html[data-theme="bw"] .mascot-bw{display:block;margin-top:.4em;font-size:.92em;white-space:nowrap}
.mascot b{font-weight:700}

/* ================= CHUYỂN TRANG MƯỢT (1–2s) ================= */
/* pt-boot: ẩn body trước paint (theme.js) */
html.pt-boot body{opacity:0}

/* ----- THOÁT TRANG CHỦ: chỉ fading ----- */
html.pt-leave-home body{
  opacity:0;
  transition:opacity .85s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}

/* ----- THOÁT TRANG CON: header lên, nội dung xuống ----- */
html.pt-leave-child header{
  animation:ptHeadUp .8s cubic-bezier(.4,0,.2,1) forwards;
  pointer-events:none;
}
html.pt-leave-child .wrap > section,
html.pt-leave-child .wrap > .ph,
html.pt-leave-child .wrap > footer,
html.pt-leave-child footer,
html.pt-leave-child #dw,
html.pt-leave-child .dw{
  animation:ptItemDown .75s cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:calc(var(--pt, 0) * 75ms + 100ms);
  pointer-events:none;
}
html.pt-leave-child body{pointer-events:none}

@keyframes ptHeadUp{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(-32px)}
}
@keyframes ptItemDown{
  from{opacity:1;transform:translateY(0)}
  to{opacity:0;transform:translateY(40px)}
}

/* ----- VÀO TRANG CHỦ (không splash): fade-in ----- */
html.pt-enter-home body{
  animation:ptFadeIn .7s cubic-bezier(.16,.8,.24,1) both;
}
@keyframes ptFadeIn{
  from{opacity:0}
  to{opacity:1}
}

/* ----- VÀO TRANG CON: header trượt xuống, nội dung trượt lên ----- */
html.pt-enter-child header{
  animation:ptHeadDown .75s cubic-bezier(.16,.8,.24,1) both;
}
html.pt-enter-child .wrap > section,
html.pt-enter-child .wrap > .ph,
html.pt-enter-child .wrap > footer,
html.pt-enter-child footer,
html.pt-enter-child #dw,
html.pt-enter-child .dw{
  animation:ptItemUp .7s cubic-bezier(.16,.8,.24,1) both;
  animation-delay:calc(var(--pt, 0) * 65ms + 80ms);
}
@keyframes ptHeadDown{
  from{opacity:0;transform:translateY(-32px)}
  to{opacity:1;transform:none}
}
@keyframes ptItemUp{
  from{opacity:0;transform:translateY(40px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  html.pt-boot body{opacity:1}
  html.pt-leave-home body,
  html.pt-leave-child header,
  html.pt-leave-child .wrap > section,html.pt-leave-child .wrap > .ph,
  html.pt-leave-child .wrap > footer,html.pt-leave-child footer,
  html.pt-leave-child #dw,html.pt-leave-child .dw,
  html.pt-enter-home body,html.pt-enter-child header,
  html.pt-enter-child .wrap > section,html.pt-enter-child .wrap > .ph,
  html.pt-enter-child .wrap > footer,html.pt-enter-child footer,
  html.pt-enter-child #dw,html.pt-enter-child .dw{
    animation:none!important;transition:none!important;opacity:1;transform:none
  }
}

/* Ẩn nút cố định khi đang thoát trang */
html.pt-leave-home .fx-toggle,
html.pt-leave-home .totop,
html.pt-leave-home .lang-fixed,
html.pt-leave-home .theme-fixed,
html.pt-leave-home .mswitch,
html.pt-leave-home .bgm-m,
html.pt-leave-home .bgm-wrap,
html.pt-leave-child .fx-toggle,
html.pt-leave-child .totop,
html.pt-leave-child .lang-fixed,
html.pt-leave-child .theme-fixed,
html.pt-leave-child .mswitch,
html.pt-leave-child .bgm-m,
html.pt-leave-child .bgm-wrap{
  opacity:0!important;pointer-events:none;transition:opacity .35s ease;
}


/* ================= THEMES "INK": BLACK & WHITE + YELLOW THEME =================
   Hai theme nền sáng (trắng / vàng) — mọi chữ, chữ menu, nút chức năng, logo, footer đổi âm bản từ trắng sang đen.
   html[data-tone="ink"] được theme.js gắn khi chọn Black & White hoặc Yellow Theme.
   Hiệu ứng gradient cầu vồng động trên chữ (menu-fx.css) vẫn áp dụng như các theme khác: chữ đen → rê chuột/nhấp thì chạy cầu vồng → về đen (--ink). */
html[data-theme="bw"]{--fill:#fff;--bg:#fff;--glass:rgba(255,255,255,.78);--ddbg:rgba(255,255,255,.96);--hbg:rgba(255,255,255,.82);--mbg:rgba(255,255,255,.86)}
html[data-theme="yellow"]{--fill:#ff0;--bg:#ff0;--glass:rgba(255,255,0,.78);--ddbg:rgba(255,255,40,.97);--hbg:rgba(255,255,0,.82);--mbg:rgba(255,255,0,.88)}
html[data-tone="ink"]{--ink:#000;--sub:rgba(0,0,0,.68);--y:#000;--c:#000;--line:rgba(0,0,0,.28);--soft:rgba(0,0,0,.07);color-scheme:light}
html[data-tone="ink"],html[data-tone="ink"] body{color:#000}

/* ----- Logo: đen hoàn toàn (giữ nguyên kích thước) ----- */
html[data-tone="ink"] .logo-pos img,html[data-tone="ink"] .slogo,html[data-tone="ink"] .brand img{filter:brightness(0)}
html[data-tone="ink"] .brand:hover img{filter:brightness(0)}
html[data-tone="ink"] body.logo-hover .logo-pos a{filter:none}

/* ----- Trang chủ: bố cục theo ảnh demo (PC) — chỉ đổi vị trí, không đổi kích thước logo ----- */
@media (orientation:landscape){
 html[data-theme="bw"] .logo-pos{left:2.85%;top:61.1%}
 html[data-theme="yellow"] .logo-pos{left:4.4%;top:66.6%}
 html[data-tone="ink"] .cluster{right:6.7cqw;width:36.6cqw}
 /* cụm menu/bio rộng hơn ~7% so với các theme khác (theo demo) → chữ menu + bio phóng theo cùng tỉ lệ.
    Giới hạn trong .cluster (trang chủ) để không đè lên font-size của header trang con (gây vỡ bố cục, menu rớt dòng). */
 html[data-tone="ink"] .cluster nav>ul>li>a{font-size:2.62cqw}
 html[data-tone="ink"] .bio-pos{font-size:clamp(10px,1.28cqw,21px)}
}
@media (orientation:portrait){
 html[data-tone="ink"] .stage{background:var(--fill)}
}
html[data-tone="ink"] nav>ul>li.sep{background:#000}
/* Trang con, bản mobile: đường kẻ phân cách trong menu header (.hdiv) đổi từ trắng sang đen */
html[data-tone="ink"] .hdiv::before{background:rgba(0,0,0,.55)}
html[data-tone="ink"] nav a,html[data-tone="ink"] .dd a{color:#000}
html[data-tone="ink"] nav a:focus-visible,html[data-tone="ink"] .has-sub.open>a,html[data-tone="ink"] .dd .has-sub.open>a{color:#000}
html[data-tone="ink"] .bio-pos{color:#000;text-shadow:none}
html[data-tone="ink"] .bio-pos::before,html[data-tone="ink"] .bgm-wrap::after,html[data-tone="ink"] .credit::before{background:#000}
html[data-tone="ink"] .bio-pos::before{height:max(1px,.08cqw)}
html[data-tone="ink"] .bgm-wrap .bgm{filter:none}
html[data-tone="ink"] .credit{color:#000}
html[data-tone="ink"] .dd{background:var(--ddbg);box-shadow:0 1cqw 3cqw rgba(0,0,0,.18)}
html[data-tone="ink"] header .dd{background:var(--ddbg);box-shadow:0 10px 28px rgba(0,0,0,.2)}
@media (orientation:portrait){
 html[data-tone="ink"] .dd .dd a{color:rgba(0,0,0,.82)}
}

/* ----- Splash ----- */
html[data-tone="ink"] .splash{background:var(--fill)}
html[data-tone="ink"] .sload .pct,html[data-tone="ink"] .sload .smsg,html[data-tone="ink"] .sgreet{color:#000;text-shadow:none}
html[data-tone="ink"] .sload .bar{background:rgba(0,0,0,.16)}

/* ----- Nút chức năng (đổi theme, ngôn ngữ, switch, nhạc): âm bản trắng → đen ----- */
html[data-tone="ink"] .lang-btn img,html[data-tone="ink"] .lang-btn:hover img,
html[data-tone="ink"] .mswitch img,
html[data-tone="ink"] .bgm-pp img,
html[data-tone="ink"] .note-fx .main,html[data-tone="ink"] .note-fx .ghost{filter:brightness(0)}
html[data-tone="ink"] .lang-fixed,html[data-tone="ink"] .theme-fixed,html[data-tone="ink"] .mswitch,html[data-tone="ink"] .bgm-m{filter:none}
html[data-tone="ink"] .bgm-bar .trk{background:rgba(0,0,0,.22)}
html[data-tone="ink"] .bgm-seek::-webkit-slider-thumb{background:#000;box-shadow:0 1px 4px rgba(0,0,0,.35)}
html[data-tone="ink"] .bgm-seek::-moz-range-thumb{background:#000;box-shadow:0 1px 4px rgba(0,0,0,.35)}
html[data-tone="ink"] .totop,html[data-tone="ink"] .fx-toggle{background:var(--glass);color:#000;box-shadow:0 1px 6px rgba(0,0,0,.22)}
@media (hover:hover){
 html[data-tone="ink"] .totop:hover,html[data-tone="ink"] .fx-toggle:hover{color:#000;background:var(--glass)}
}
html[data-tone="ink"] .fx-toggle.off::after{background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.6)}
html[data-tone="ink"] .heart-fx .ghost{fill:#000}

/* ----- Trang con ----- */
html[data-tone="ink"] body:has(header){background:var(--bg)}
html[data-tone="ink"] header{border-bottom-color:var(--line)}
html[data-tone="ink"] header::before{background:var(--hbg)}
html[data-tone="ink"] .dw{border-bottom-color:var(--line)}
html[data-tone="ink"] .dw-t:hover{color:#000}
html[data-tone="ink"] .dw-t:focus-visible{outline-color:#000}
html[data-tone="ink"] .sec-h,html[data-tone="ink"] section#merchandise .sec-h{border-bottom-color:var(--line)}
html[data-tone="ink"] #podcasts-links .sec-h{border-bottom:0}
html[data-tone="ink"] #podcasts-links .sec-h::after{background:var(--line)}
html[data-tone="ink"] .sec-h .en{color:rgba(0,0,0,.6)}
html[data-tone="ink"] .sec-h .n,html[data-tone="ink"] .ts,html[data-tone="ink"] .m-sub,html[data-tone="ink"] .lead{color:rgba(0,0,0,.62)}
html[data-tone="ink"] .bio,html[data-tone="ink"] .donate-text{color:rgba(0,0,0,.92)}
html[data-tone="ink"] .m-desc,html[data-tone="ink"] .modal.dual .m-one .m-desc{color:rgba(0,0,0,.78)}
html[data-tone="ink"] #m-cap::before{background:rgba(0,0,0,.35)}
html[data-tone="ink"] footer{color:#000}
html[data-tone="ink"] footer::before{background:rgba(0,0,0,.55)}
html[data-tone="ink"] .duo,html[data-tone="ink"] .box,html[data-tone="ink"] section#about,html[data-tone="ink"] .shows{border-color:var(--line);background:var(--soft)}
html[data-tone="ink"] .duo .half+.half,html[data-tone="ink"] .pcast+.pcast{border-color:var(--line)}
@media (max-width:860px){
 html[data-tone="ink"] .duo .half+.half,html[data-tone="ink"] .pcast+.pcast{border-color:var(--line)}
}
html[data-tone="ink"] .arr,html[data-tone="ink"] .lk,html[data-tone="ink"] .donate-btns .lk,html[data-tone="ink"] .m-x{background:rgba(0,0,0,.08)}
@media (hover:hover){
 html[data-tone="ink"] .arr:hover,html[data-tone="ink"] .lk:hover,html[data-tone="ink"] .donate-btns .lk:hover,html[data-tone="ink"] .m-x:hover{background:rgba(0,0,0,.16);box-shadow:none}
 html[data-tone="ink"] .btn:not(.off):hover,html[data-tone="ink"] .gr-btn:hover{box-shadow:0 6px 14px rgba(0,0,0,.28)}
}
html[data-tone="ink"] .cov,html[data-tone="ink"] .vwrap,html[data-tone="ink"] .vthumb{background:rgba(0,0,0,.1)}
html[data-tone="ink"] .cov,html[data-tone="ink"] .vthumb,html[data-tone="ink"] .pcast .art,html[data-tone="ink"] .donate-qr,html[data-tone="ink"] .qr-btn .donate-qr,html[data-tone="ink"] .promo{box-shadow:0 8px 22px rgba(0,0,0,.26)}
/* Nút store (ảnh nền trắng): viền đen cho rõ trên nền trắng/vàng */
html[data-tone="ink"] .btn,html[data-tone="ink"] .gr-btn{border:1.5px solid #000}
html[data-tone="ink"] .btn:focus-visible,html[data-tone="ink"] .gr-btn:focus-visible{outline-color:#000}
html[data-tone="ink"] .m-bg{background:var(--mbg)}
html[data-tone="ink"] .feat-nav{color:#000}
html[data-tone="ink"] .feat-dots .dot{background:rgba(0,0,0,.3)}
html[data-tone="ink"] .feat-dots .dot.active{background:#000}
html[data-tone="ink"] .soon-track span{color:rgba(0,0,0,.9)}
html[data-tone="ink"] .sec-h .sub-h,html[data-tone="ink"] .ph .sub{color:var(--sub)}
/* Splash của nhóm ink: ảnh nền blur làm mờ nhạt để chữ đen (thanh loading, lời chào) luôn đọc rõ, kể cả vùng áo đen của Black & White */
html[data-tone="ink"] .splash picture{opacity:.3}

/* Black & White: rê chuột vào logo (trang chủ, PC) → âm bản (invert + difference) để logo luôn rõ trên cả vùng sáng lẫn tối của nền */
@media (hover:hover) and (orientation:landscape){
 /* z-index:auto để logo không tạo ngữ cảnh xếp lớp riêng (nếu không, mix-blend-mode không có nền bên dưới để pha) */
 html[data-tone="ink"] .logo-pos{z-index:auto}
 html[data-tone="ink"] body.logo-hover .logo-pos a{filter:invert(1);mix-blend-mode:difference}
 html[data-tone="ink"] .logo-pos a:hover::after{animation:none;opacity:0}
 /* Black & White: rê chuột vào logo → logo đổi sang màu đỏ (thay cho âm bản) */
 html[data-theme="bw"] body.logo-hover .logo-pos a{filter:drop-shadow(0 3px 10px rgba(0,0,0,.25));mix-blend-mode:normal}
 html[data-theme="bw"] body.logo-hover .logo-pos a::after{animation:none;opacity:1;background:#e5121f;background-size:100% 100%;transition:opacity .25s}
 html[data-theme="bw"] .logo-pos a img{transition:opacity .25s}
 html[data-theme="bw"] body.logo-hover .logo-pos a img{opacity:0}
}
/* Black & White — logo header ở trang con: rê chuột → đỏ */
@media (hover:hover){
 html[data-theme="bw"] .brand:hover::after{animation:none;opacity:1;background:#e5121f;background-size:100% 100%}
 html[data-theme="bw"] .brand:hover img{opacity:0}
 html[data-theme="bw"] .brand img{transition:opacity .25s,filter .3s,height .35s ease,width .35s ease}
}

/* Mystic mobile: cụm menu + bio + footer đẩy lên — menu bắt đầu ngay bên dưới cổ áo nhân vật trong ảnh nền
   (cổ áo ≈ 44% chiều cao ảnh nền 1440×2560 ≈ 78cqw; menu thấp hơn cổ áo ≈ 8cqw). Dịch menu và bio cùng một đoạn để bio vẫn nối liền ngay dưới menu. */
@media (orientation:portrait){
 html[data-theme="mystic"] .nav-pos{top:86cqw}
 html[data-theme="mystic"] .bio-pos{margin-top:-26.6cqw;text-shadow:0 1px 8px rgba(10,0,26,.85),0 0 3px rgba(10,0,26,.6)}
}

/* Mystic: viền sáng mảnh quanh mọi bìa (sách, podcast…) để bìa tối không hòa vào nền tím */
html[data-theme="mystic"] .cov{box-shadow:0 0 0 1px rgba(255,255,255,.32),0 8px 22px rgba(4,30,56,.38)}
html[data-theme="mystic"] .cov:focus-visible,html[data-theme="mystic"] .cov.glow{box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 18px 2px rgba(var(--g),.65),0 0 36px 6px rgba(var(--g),.32)}
@media (hover:hover){html[data-theme="mystic"] .cov:hover{box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 18px 2px rgba(var(--g),.65),0 0 36px 6px rgba(var(--g),.32)}}
html[data-theme="mystic"] #m-img{outline:1px solid rgba(255,255,255,.32);outline-offset:0}