/* =====================================================================
   BeeHouse UI v4.1 — จัดวางใหม่บนธีมสดใสเดิม
   - สี ฟอนต์ ปุ่ม และพื้นหลัง (ออโรร่า + ฉากพิกเซล) ใช้ของ styles.css เดิมทั้งหมด
   - ไฟล์นี้เพิ่มแค่ "โครงหน้า" ใหม่ + ส่วนใหม่ (MV, ทีมงาน, ร้านค้า, สปอนเซอร์)
   - ใช้ตัวแปรสีเดิม (--pink, --ink, --glass-*) ธีม Halloween จึงสลับสีให้เอง
===================================================================== */

:root{
  --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:40px;
  --section-gap:clamp(40px,5vw,64px);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --tape:var(--yellow);
  --flame-1:#fff2b0; --flame-2:#ffb22e; --flame-3:#ff5a1f;
  /* ค่า RGB ไว้ทำสีโปร่ง — ไม่ใช้ color-mix() เพราะมือถือรุ่นเก่า (iOS < 16.2) ไม่รองรับ */
  --cream-rgb:255,253,247;
  --paper-rgb:255,250,240;
  --pink-rgb:255,143,171;
}
html.halloween{ --tape:#a271ff; --cream-rgb:11,7,16; --paper-rgb:19,13,28; --pink-rgb:255,122,24; }
[hidden]{ display:none !important; }
html{ scroll-padding-top:100px; }

/* ---------- 1. Sticker: ป้ายหัวข้อแบบสติกเกอร์ + เทป ---------- */
.sticker{
  --st-ink:var(--pink-deep);
  --st-rgb:244,98,140;
  position:relative;
  display:inline-flex; align-items:center;
  padding:.04em .42em .1em;
  border-radius:.32em;
  background:#fff;
  color:var(--st-ink);
  font-family:'Prompt',sans-serif; font-weight:800;
  line-height:1.2; white-space:nowrap;
  box-shadow:0 .08em 0 rgba(var(--st-rgb),0.3), 0 .45em 1.1em rgba(74,59,63,.14);
  transform:rotate(-1.5deg);
  transition:transform .35s var(--ease-pop);
  -webkit-user-select:none; user-select:none;
}
.sticker .tape{
  position:absolute; top:-.22em; right:-.6em;
  width:1.8em; height:.5em; border-radius:2px;
  background:repeating-linear-gradient(135deg, rgba(255,255,255,.45) 0 .12em, transparent .12em .26em), var(--tape);
  opacity:.9; transform:rotate(32deg);
  box-shadow:0 2px 4px rgba(74,59,63,.12);
  pointer-events:none;
}
.sticker:hover{ transform:rotate(-.5deg) scale(1.02); }
.sticker.is-boop{ animation:stickerBoop .5s var(--ease-pop); }
@keyframes stickerBoop{
  0%{ transform:rotate(-1.5deg) scale(1); } 40%{ transform:rotate(1deg) scale(1.05); }
  100%{ transform:rotate(-1.5deg) scale(1); }
}
.sticker-pink{ --st-ink:#9b5de5; --st-rgb:155,93,229; }
.sticker-amber{ --st-ink:#e28a00; --st-rgb:226,138,0; }
.sticker-sky{ --st-ink:#2d93d6; --st-rgb:45,147,214; }
.sticker-tilt{ transform:rotate(-4deg); }
html.halloween .sticker{ background:#fff4e6; }

/* ---------- 2. ปุ่ม: เพิ่มจังหวะกด + ripple ให้ปุ่มเดิม ---------- */
.btn{ position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; }
.btn svg{ width:15px; height:15px; flex:0 0 auto; }
.btn:active{ transform:translateY(1px) scale(.98); transition-duration:.08s; }
.btn-lg{ padding:14px 26px; font-size:15px; }
.btn-fire{
  background:linear-gradient(135deg,#ffc04a,#ff6a1f); color:#fff;
  box-shadow:0 8px 22px rgba(255,106,31,.4);
}
.btn-fire:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(255,106,31,.5); }
.btn-link{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; padding:6px 2px; cursor:pointer;
  color:var(--pink-deep); font-weight:600; font-size:14px;
  text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:4px;
  text-decoration-color:rgba(var(--pink-rgb),0.4);
}
.btn-link:hover{ text-decoration-color:currentColor; }
.rpl{
  position:absolute; border-radius:50%; pointer-events:none;
  width:12px; height:12px; margin:-6px 0 0 -6px;
  background:rgba(255,255,255,.6);
  transform:scale(0); opacity:.75;
  animation:rpl .55s cubic-bezier(.22,1,.36,1) forwards;
}
.btn-ghost .rpl{ background:rgba(var(--pink-rgb),0.45); }
@keyframes rpl{ to{ transform:scale(var(--rs,22)); opacity:0; } }

/* ---------- 3. Header: เมนูยาวขึ้น ---------- */
.nav-main{ display:flex; align-items:center; }
.brand{ cursor:pointer; }
.nav-links a.nav-link{ padding:9px 13px; }
.nav-links li:nth-child(5){ animation-delay:.56s; }
.nav-links li:nth-child(6){ animation-delay:.63s; }
#authArea .btn{ white-space:nowrap; }
.mm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:4px; }


/* ---------- 4. จังหวะหน้า: ทุกส่วนเป็นแคปซูลแก้วแบบเดิม ---------- */
.page{ margin-bottom:var(--section-gap); }
.page:last-of-type{ margin-bottom:0; }
#works, #mv, #team, #shop, #news{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  padding:clamp(28px,4.5vw,52px) clamp(18px,4vw,48px);
  background:var(--glass-bg-strong);
  -webkit-backdrop-filter:blur(30px) saturate(180%); backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--glass-border);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, var(--shadow-pop);
}
#works::before, #mv::before, #team::before, #shop::before, #news::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; pointer-events:none;
  background:
    radial-gradient(480px 260px at 8% -10%, rgba(255,209,92,.22), transparent 60%),
    radial-gradient(420px 260px at 105% 10%, rgba(121,201,255,.2), transparent 55%);
}
html.halloween #works::before, html.halloween #mv::before, html.halloween #team::before,
html.halloween #shop::before, html.halloween #news::before{ opacity:.35; }

.sec-head{ margin:0 0 30px; }
.sec-head > p, .sec-head > div > p{ color:var(--ink-soft); font-size:15px; line-height:1.7; max-width:60ch; margin:10px 0 0; }
.sec-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.sec-title{
  display:flex; flex-wrap:wrap; align-items:center; gap:.3em .4em;
  font-size:clamp(26px,3.4vw,38px); margin:0;
}
.sec-title .sticker{ font-size:.8em; margin-right:.35em; }

/* ---------- 5. Hero: ภาพเด่นเต็มกรอบ ---------- */
.kv{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r-xl);
  min-height:clamp(540px, 74vh, 720px);
  display:flex; flex-direction:column;
  background:var(--paper);
  border:1px solid var(--glass-border);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, var(--shadow-pop);
  animation:kvIn .9s var(--ease) .2s both;
}
/* ใช้ both + from{} : ถ้าแอนิเมชันถูกปิด (โหมดประหยัด) กรอบจะยังโชว์ปกติ */
@keyframes kvIn{ from{ opacity:0; transform:translateY(16px) scale(.985); } }
.kv-media{ position:absolute; inset:0; z-index:-2; }
.kv-media img{
  width:100%; height:100%; object-fit:cover; object-position:62% 40%;
  transform:scale(1.05); animation:kvDrift 28s ease-in-out infinite alternate;
}
@keyframes kvDrift{ to{ transform:scale(1.11) translate(-1.5%,-1%); } }
.kv-shade{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg,
      rgba(var(--cream-rgb),0.97) 0%,
      rgba(var(--cream-rgb),0.88) 36%,
      rgba(var(--cream-rgb),0.3) 64%,
      rgba(var(--cream-rgb),0) 100%),
    linear-gradient(0deg, rgba(var(--cream-rgb),0.9) 0%, transparent 34%);
}
.kv-body{
  flex:1;
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  align-items:end; gap:28px;
  padding:clamp(28px,5vw,60px) clamp(22px,5vw,60px) 22px;
}
.hero-copy{ max-width:620px; align-self:center; }
.hero-copy .eyebrow{ margin-bottom:18px; }
.hl{
  font-size:clamp(36px,5.4vw,66px); line-height:1.16;
  margin:0 0 20px;
  display:flex; flex-direction:column; gap:.06em;
}
.hl-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.1em .26em; }
.hl-plain{ color:var(--ink); }
.hl .sticker{ font-size:.82em; margin:.08em .3em .08em 0; }
.hl-grad{
  background:linear-gradient(120deg, var(--pink-deep), var(--pink) 45%, var(--yellow));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-bottom:.06em;
}
.hero-lede{ font-size:16.5px; line-height:1.75; color:var(--ink-soft); max-width:46ch; margin:0 0 28px; }
.hero-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.kv-stats{
  display:flex; gap:clamp(18px,4vw,44px); flex-wrap:wrap;
  margin:0 clamp(22px,5vw,60px) clamp(20px,3vw,28px);
  padding-top:16px; border-top:1px solid var(--line);
}
.kv-stats > div{ display:flex; align-items:baseline; gap:8px; }
.kv-stats b{ font-family:'Prompt'; font-size:26px; color:var(--ink); line-height:1; }
.kv-stats span{ font-size:13px; color:var(--ink-soft); }

/* ---------- 6. ไฟ (WebGL จาก fire.js) ---------- */
.fire-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none; }
.fire-fallback{
  background:radial-gradient(ellipse 60% 90% at 50% 100%, rgba(255,214,90,.95), rgba(255,120,30,.75) 35%, rgba(200,40,10,.35) 60%, transparent 75%);
  filter:blur(6px);
}

.status-fire{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  padding:3px 11px 3px 9px; border-radius:999px;
  font-family:'Prompt'; font-size:12.5px; font-weight:700; color:#3a1100;
  background:linear-gradient(180deg,#ffd45a,#ff7a24);
  box-shadow:0 0 0 1px rgba(255,210,140,.5) inset, 0 0 18px rgba(255,110,30,.55);
}
.status-fire.big{ font-size:14px; padding:5px 14px 5px 11px; }
.flame-dot{
  width:10px; height:13px;
  background:radial-gradient(ellipse at 50% 80%, #fff6c8 0 22%, #ff9d1c 45%, #e8380b 75%);
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  transform-origin:50% 100%;
  animation:flameDot .9s ease-in-out infinite alternate;
  box-shadow:0 0 8px rgba(255,90,20,.9);
}
@keyframes flameDot{
  0%{ transform:scale(1,1) rotate(-4deg); } 50%{ transform:scale(.88,1.15) rotate(3deg); } 100%{ transform:scale(1.05,.92) rotate(-2deg); }
}

/* การ์ด Now Playing (มุมขวาล่างของภาพเด่น) */
.now-playing{
  justify-self:end; align-self:end;
  position:relative; isolation:isolate;
  display:flex; align-items:center; gap:14px;
  width:min(100%,370px);
  padding:14px 16px 14px 14px; margin-top:70px;
  border-radius:var(--r-md);
  background:linear-gradient(160deg,#3a170b,#1d0b06);
  border:1px solid rgba(255,150,70,.55);
  box-shadow:0 18px 40px rgba(120,40,10,.35), 0 0 40px rgba(255,100,30,.3);
  color:#fff3e8;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.now-playing:hover{ transform:translateY(-3px); box-shadow:0 24px 50px rgba(120,40,10,.4), 0 0 60px rgba(255,100,30,.42); }
.now-playing .fire-edge{
  position:absolute; left:-4%; right:-4%; bottom:calc(100% - 22px); height:110px;
  z-index:-1; pointer-events:none;
}
.np-thumb{
  flex:0 0 auto; width:60px; height:60px; border-radius:14px;
  background:radial-gradient(circle at 50% 70%, rgba(255,120,40,.45), rgba(40,14,6,.9));
  display:grid; place-items:center; overflow:hidden;
}
.np-thumb img{ width:86%; height:86%; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(255,120,40,.6)); }
.np-text{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.np-text b{ font-family:'Prompt'; font-size:21px; line-height:1.2; color:#fff; }
.np-sub{ font-size:12.5px; color:#f2c9ad; }
.np-go{ width:20px; height:20px; color:#ffb056; flex:0 0 auto; transition:transform .25s var(--ease); }
.now-playing:hover .np-go{ transform:translateX(4px); }

/* ---------- 7. MingYue: การ์ดไฟลุก ---------- */
.my-card{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r-xl);
  background:#1b0c07;
  border:1px solid rgba(255,140,60,.4);
  box-shadow:0 30px 80px rgba(150,50,10,.28), 0 0 0 1px rgba(255,120,40,.12);
  padding:clamp(26px,4.5vw,54px) clamp(22px,4.5vw,54px) clamp(80px,9vw,120px);
  color:#f6e7dc;
}
.my-bg{ position:absolute; inset:0; z-index:-3; }
.my-bg img{ width:100%; height:100%; object-fit:cover; opacity:.38; }
.my-card::before{
  content:""; position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(22,9,5,.95) 0%, rgba(22,9,5,.78) 45%, rgba(22,9,5,.4) 100%),
    radial-gradient(120% 55% at 50% 118%, rgba(255,90,20,.5), transparent 62%);
}
.fire-floor{ position:absolute; left:0; right:0; bottom:0; height:clamp(170px,22vw,260px); z-index:-1; pointer-events:none; }
.embers{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.embers i{
  position:absolute; bottom:40px; width:3px; height:3px; border-radius:50%;
  background:#ffe9a8; box-shadow:0 0 6px #ffb22e, 0 0 12px #ff5a1f;
  animation:ember 6s linear infinite; opacity:0;
}
.embers i:nth-child(1){ left:7%; } .embers i:nth-child(2){ left:16%; animation-delay:1.2s; animation-duration:7s; }
.embers i:nth-child(3){ left:27%; animation-delay:2.6s; } .embers i:nth-child(4){ left:38%; animation-delay:.6s; animation-duration:8s; }
.embers i:nth-child(5){ left:49%; animation-delay:3.4s; } .embers i:nth-child(6){ left:60%; animation-delay:1.8s; animation-duration:6.5s; }
.embers i:nth-child(7){ left:70%; animation-delay:4.2s; } .embers i:nth-child(8){ left:80%; animation-delay:.3s; animation-duration:7.5s; }
.embers i:nth-child(9){ left:89%; animation-delay:2.2s; } .embers i:nth-child(10){ left:95%; animation-delay:3.8s; }
@keyframes ember{
  0%{ transform:translate(0,0); opacity:0; } 8%{ opacity:1; }
  50%{ transform:translate(14px,-260px); opacity:.85; }
  100%{ transform:translate(-8px,-520px); opacity:0; }
}
.my-body{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(24px,4vw,52px); align-items:center; }
.my-logo{ width:min(290px,70%); height:auto; margin-bottom:16px; filter:drop-shadow(0 6px 24px rgba(255,120,40,.45)); }
.my-status{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.my-tag{ font-size:14px; color:#f0c8ab; }
.my-desc{
  color:#efe0d5; font-size:15.5px; line-height:1.8; max-width:52ch; margin:0 0 24px; white-space:pre-line;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.my-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.my-actions .btn-ghost{ background:rgba(255,255,255,.1); color:#fff3e8; border-color:rgba(255,200,160,.3); }
.my-actions .btn-ghost:hover{ background:rgba(255,255,255,.18); }
.my-actions .btn-link{ color:#ffc187; }

.my-gallery{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(60px,1fr); gap:10px; aspect-ratio:16/11; }
.my-gallery button{
  position:relative; padding:0; border:0; cursor:pointer;
  border-radius:16px; overflow:hidden; background:#2a1610;
  box-shadow:0 0 0 1px rgba(255,170,100,.2), 0 12px 26px rgba(0,0,0,.4);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.my-gallery button img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.my-gallery button:hover{ transform:translateY(-3px) rotate(-.6deg); box-shadow:0 0 0 1px rgba(255,190,120,.55), 0 18px 34px rgba(0,0,0,.45); }
.my-gallery button:hover img{ transform:scale(1.06); }
.my-gallery button:nth-child(1){ grid-column:1 / span 4; grid-row:1 / span 2; }
.my-gallery button:nth-child(2){ grid-column:5 / span 2; grid-row:1; }
.my-gallery button:nth-child(3){ grid-column:5 / span 2; grid-row:2; }
.my-gallery button:nth-child(4){ grid-column:1 / span 2; grid-row:3; }
.my-gallery button:nth-child(5){ grid-column:3 / span 2; grid-row:3; }
.my-gallery button:nth-child(6){ grid-column:5 / span 2; grid-row:3; }
.my-gallery button:nth-child(n+7){ display:none; }
.my-gallery.is-empty{ display:none; }
#mingyue .apply-peek{ margin-top:28px; }

/* ---------- 8. ผลงาน ---------- */
.works-shell{ position:relative; }

/* ---------- 9. MV ---------- */
.mv-stage{ position:relative; isolation:isolate; }
.mv-ambient{ position:absolute; inset:8% 6% 12%; z-index:-1; filter:blur(50px) saturate(1.4); opacity:.45; pointer-events:none; }
.mv-ambient img{ width:100%; height:100%; object-fit:cover; border-radius:40px; }
.mv-frame{
  position:relative; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--r-lg); background:#111;
  box-shadow:0 30px 70px rgba(74,59,63,.3), 0 0 0 6px rgba(255,255,255,.6);
}
html.halloween .mv-frame{ box-shadow:0 30px 70px rgba(0,0,0,.5), 0 0 0 6px rgba(255,255,255,.06); }
.mv-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.mv-poster{ position:absolute; inset:0; width:100%; padding:0; border:0; cursor:pointer; background:#111; display:block; }
.mv-poster > img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .4s ease; }
.mv-poster::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,12,30,.78), transparent 48%); }
.mv-poster:hover > img{ transform:scale(1.03); filter:brightness(1.06); }
.mv-play{
  position:absolute; left:50%; top:50%; z-index:2;
  width:clamp(68px,8.5vw,96px); aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(-4deg);
  border-radius:30%;
  background:#fff; color:var(--pink-deep);
  display:grid; place-items:center;
  box-shadow:0 0 0 10px rgba(255,255,255,.28), 0 18px 40px rgba(0,0,0,.35);
  transition:transform .35s var(--ease-pop);
}
.mv-play svg{ width:42%; height:42%; margin-left:8%; }
.mv-poster:hover .mv-play{ transform:translate(-50%,-50%) rotate(3deg) scale(1.08); }
.mv-meta{
  position:absolute; left:clamp(16px,3vw,30px); right:clamp(16px,3vw,30px); bottom:clamp(14px,2.5vw,26px); z-index:2;
  display:flex; align-items:center; gap:14px; text-align:left; color:#fff;
}
.mv-titles{ display:flex; flex-direction:column; flex:1; min-width:0; }
.mv-titles b{ font-family:'Prompt'; font-size:clamp(20px,2.8vw,32px); line-height:1.2; }
.mv-titles span{ font-size:13.5px; color:rgba(255,255,255,.8); }
.mv-dur{ font-size:12.5px; font-weight:600; padding:4px 10px; border-radius:8px; background:rgba(0,0,0,.5); }
.mv-eq{ display:flex; align-items:flex-end; gap:3px; height:24px; }
.mv-eq i{ width:5px; border-radius:2px; background:var(--pink); transform-origin:50% 100%; animation:eq 1s ease-in-out infinite alternate; }
.mv-eq i:nth-child(1){ height:40%; } .mv-eq i:nth-child(2){ height:90%; animation-delay:-.3s; }
.mv-eq i:nth-child(3){ height:60%; animation-delay:-.6s; } .mv-eq i:nth-child(4){ height:80%; animation-delay:-.15s; }
@keyframes eq{ 0%{ transform:scaleY(.35); } 100%{ transform:scaleY(1); } }
.mv-foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:16px; color:var(--ink-soft); font-size:13.5px; }

/* ---------- 10. ทีมงาน ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,20px); }
.team-skel{ aspect-ratio:3/4; border-radius:var(--r-lg); background:linear-gradient(110deg, rgba(255,255,255,.4) 30%, rgba(255,255,255,.8) 50%, rgba(255,255,255,.4) 70%) 0 0/300% 100%; animation:skel 1.4s linear infinite; }
@keyframes skel{ to{ background-position:-150% 0; } }
.tm{
  --acc:#5fd3a8; --acc-ink:#1f9a72; --acc-rgb:95,211,168;
  --rx:0deg; --ry:0deg; --mx:50%; --my:30%;
  position:relative; isolation:isolate; overflow:hidden;
  aspect-ratio:3/4; border-radius:var(--r-lg);
  background:var(--paper);
  border:1px solid var(--glass-border);
  box-shadow:0 14px 34px rgba(74,59,63,.14);
  cursor:pointer; text-align:left; padding:0; color:var(--ink); font:inherit;
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tm.is-tilting{ transition:transform .08s linear, box-shadow .4s var(--ease); }
.tm:hover{ box-shadow:0 22px 48px rgba(74,59,63,.2), 0 0 0 3px rgba(var(--acc-rgb),0.55); }
.tm[data-acc="mint"]{ --acc:#5fd3a8; --acc-ink:#1f9a72; --acc-rgb:95,211,168; }
.tm[data-acc="amber"], .tmm[data-acc="amber"]{ --acc:#ffc94d; --acc-ink:#c47f00; --acc-rgb:255,201,77; }
.tm[data-acc="sky"], .tmm[data-acc="sky"]{ --acc:#79c9ff; --acc-ink:#2d8fd0; --acc-rgb:121,201,255; }
.tm[data-acc="pink"], .tmm[data-acc="pink"]{ --acc:#ff8fab; --acc-ink:#e04a7a; --acc-rgb:255,143,171; }
.tm[data-acc="violet"], .tmm[data-acc="violet"]{ --acc:#c9a6ff; --acc-ink:#8b5ad8; --acc-rgb:201,166,255; }
.tm[data-acc="red"], .tmm[data-acc="red"]{ --acc:#ff8a80; --acc-ink:#d84436; --acc-rgb:255,138,128; }
.tm-art{ position:absolute; inset:0; z-index:-2; }
.tm-art img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.tm:hover .tm-art img{ transform:scale(1.05); }
.tm-mono{
  width:100%; height:100%;
  display:flex; align-items:flex-start; justify-content:center; padding-top:13%;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.55) 0 2px, transparent 3px) 0 0/26px 26px,
    linear-gradient(160deg, rgba(var(--acc-rgb),.75), rgba(var(--acc-rgb),.28) 70%), #fff;
}
.tm-mono span{
  font-family:'Prompt'; font-weight:800;
  font-size:clamp(80px,8.5vw,120px); line-height:1;
  color:#fff;
  text-shadow:0 6px 0 var(--acc-ink), 0 16px 30px rgba(var(--acc-rgb),0.45);
  transform:rotate(-6deg);
}
.tm::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(240px 200px at var(--mx) var(--my), rgba(255,255,255,.35), transparent 60%),
    linear-gradient(0deg, rgba(var(--paper-rgb),1) 0%, rgba(var(--paper-rgb),.88) 30%, rgba(var(--paper-rgb),0) 60%);
}
.tm-info{ position:absolute; left:16px; right:16px; bottom:16px; display:flex; flex-direction:column; gap:7px; }
.tm .tm-name{ --st-ink:var(--acc-ink); font-size:clamp(19px,1.9vw,23px); align-self:flex-start; max-width:calc(100% - 20px); overflow:visible; }
.tm-pos{
  align-self:flex-start; font-size:12.5px; font-weight:600; color:var(--acc-ink);
  padding:2px 10px; border-radius:999px;
  background:rgba(var(--acc-rgb),0.22);
}
.tm-bio{ font-size:13px; color:var(--ink-soft); line-height:1.55; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tm-soc{ display:flex; gap:6px; }
.tm-soc a, .tm-soc span{
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; color:var(--ink); border:1px solid var(--line);
  transition:background .2s ease, color .2s ease, transform .2s var(--ease);
}
.tm-soc a:hover{ background:var(--acc); color:#fff; transform:translateY(-2px); }
.tm-soc svg{ width:14px; height:14px; }
html.halloween .tm-soc a, html.halloween .tm-soc span{ background:rgba(255,255,255,.08); }
.tm-admin{ position:absolute; top:10px; right:10px; z-index:3; display:flex; gap:4px; opacity:0; transition:opacity .2s ease; }
.tm:hover .tm-admin, .tm:focus-within .tm-admin, .is-touch .tm-admin, .prd:hover .tm-admin{ opacity:1; }
.mini-btn{
  width:30px; height:30px; border-radius:50%; border:1px solid var(--line); padding:0; cursor:pointer;
  background:rgba(255,255,255,.92); color:var(--ink);
  display:grid; place-items:center; box-shadow:0 4px 10px rgba(74,59,63,.15);
}
.mini-btn:hover{ background:var(--pink); color:#fff; }
.mini-btn svg{ width:13px; height:13px; }

/* หน้าต่างโปรไฟล์สมาชิก */
.team-modal{ max-width:720px !important; padding:0 !important; overflow:hidden !important; }
.tmm{ --acc:#5fd3a8; --acc-ink:#1f9a72; --acc-rgb:95,211,168; display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); min-height:400px; }
.tmm-art{ position:relative; min-height:280px; }
.tmm-art img, .tmm-art .tm-mono{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tmm-art .tm-mono{ align-items:center; padding-top:0; }
.tmm-body{ padding:34px 28px 28px; display:flex; flex-direction:column; gap:12px; }
.tmm-body .sticker{ --st-ink:var(--acc-ink); font-size:28px; align-self:flex-start; }
.tmm-body .tm-pos{ --acc-ink:inherit; }
.tmm-body p{ color:var(--ink-soft); line-height:1.75; white-space:pre-line; margin:0; }
.tmm-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:10px; }
.tmm-links a{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  background:#fff; border:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--ink);
}
.tmm-links a:hover{ background:var(--acc); color:#fff; border-color:transparent; }
.tmm-links svg{ width:15px; height:15px; }
html.halloween .tmm-links a{ background:rgba(255,255,255,.06); }

/* ---------- 11. ร้านค้า ---------- */
.shop-admin{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.switch-row{ display:inline-flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-soft); cursor:pointer; }
.ui-switch{
  width:44px; height:26px; border-radius:999px; border:0; padding:0; position:relative; cursor:pointer;
  background:rgba(74,59,63,.18); transition:background .2s ease; flex:0 0 auto;
}
.ui-switch::after{
  content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:#fff; box-shadow:0 2px 4px rgba(0,0,0,.2); transition:transform .25s var(--ease-pop);
}
.ui-switch[aria-checked="true"]{ background:linear-gradient(135deg,var(--pink),var(--pink-deep)); }
.ui-switch[aria-checked="true"]::after{ transform:translateX(18px); }
.shop-staff-note{
  margin:-10px 0 18px; padding:10px 14px; border-radius:14px; font-size:13.5px;
  background:var(--yellow-soft); color:var(--ink); border:1px dashed var(--yellow);
}
.shop-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,2vw,20px); }
.prd{
  position:relative; display:flex; flex-direction:column; overflow:hidden;
  border-radius:var(--r-lg); background:var(--paper);
  border:1px solid var(--glass-border); box-shadow:0 12px 28px rgba(74,59,63,.12);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.prd:hover{ transform:translateY(-4px); box-shadow:0 20px 40px rgba(74,59,63,.18); }
.prd.is-draft{ opacity:.6; }
.prd-media{ aspect-ratio:1; display:grid; place-items:center; overflow:hidden; background:linear-gradient(135deg,var(--yellow-soft),var(--pink-soft)); }
.prd-media img{ width:100%; height:100%; object-fit:cover; }
.prd-media .prd-ph{ width:38%; color:var(--pink-deep); opacity:.4; }
.prd-badge{
  position:absolute; top:12px; left:12px; font-size:12px; font-weight:700;
  padding:3px 10px; border-radius:999px; color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));
  box-shadow:0 4px 10px rgba(244,98,140,.35);
}
.prd-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.prd-body h3{ font-size:17px; margin:0; }
.prd-body p{ font-size:13px; color:var(--ink-soft); line-height:1.55; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.prd-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:8px; }
.prd-price{ font-family:'Prompt'; font-weight:700; font-size:19px; color:var(--pink-deep); }

.shop-soon{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r-lg); min-height:360px;
  border:2px dashed rgba(var(--pink-rgb),0.45);
  display:grid; place-items:center;
}
.shop-ghosts{ position:absolute; inset:26px; z-index:-1; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; filter:blur(6px); opacity:.65; }
.ghost-card{ border-radius:20px; background:rgba(255,255,255,.7); padding:12px; display:flex; flex-direction:column; gap:10px; }
html.halloween .ghost-card{ background:rgba(255,255,255,.06); }
.ghost-card i{ flex:1; border-radius:14px; background:linear-gradient(135deg,var(--pink-soft),var(--blue-soft)); }
.ghost-card:nth-child(2) i{ background:linear-gradient(135deg,var(--yellow-soft),var(--pink-soft)); }
.ghost-card:nth-child(3) i{ background:linear-gradient(135deg,var(--lavender-soft),var(--blue-soft)); }
.ghost-card:nth-child(4) i{ background:linear-gradient(135deg,var(--blue-soft),var(--yellow-soft)); }
.ghost-card b{ height:14px; width:70%; border-radius:6px; background:rgba(74,59,63,.14); }
.ghost-card s{ height:12px; width:40%; border-radius:6px; background:rgba(var(--pink-rgb),0.5); }
.shop-soon-center{ text-align:center; padding:40px 24px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.shop-soon-center .sticker{ font-size:clamp(32px,4.6vw,52px); }
.shop-soon-center p{ color:var(--ink); max-width:48ch; margin:0; line-height:1.7; }

/* ---------- 12. ข่าวสาร ---------- */
.news-shell{ display:grid; gap:14px; }
.featured-news{ margin-bottom:0; }
.featured-news .date.has-img{ width:min(280px,34%); height:auto; aspect-ratio:16/10; flex:0 0 auto; }
.featured-news > div:last-child{ min-width:0; }
.news-list{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.news-item .content p{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- 13. ผู้สนับสนุน ---------- */
.spn-shell{
  border-radius:32px; padding:24px clamp(20px,3vw,34px);
  background:var(--glass-bg);
  -webkit-backdrop-filter:blur(22px) saturate(160%); backdrop-filter:blur(22px) saturate(160%);
  border:1px solid var(--glass-border); box-shadow:0 1px 0 rgba(255,255,255,.6) inset, var(--shadow-soft);
  display:grid; grid-template-columns:auto 1fr; gap:26px; align-items:center;
}
.spn-head h2{ font-size:20px; margin:0; }
.spn-head p{ color:var(--ink-soft); font-size:13.5px; margin:2px 0 8px; }
.spn-row{ position:relative; display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:flex-end; }
.spn-logo{
  position:relative; height:54px; min-width:110px; flex:1 1 110px; max-width:170px;
  border-radius:16px; display:grid; place-items:center; padding:8px 14px;
  background:rgba(255,255,255,.6); border:1px solid var(--line);
}
html.halloween .spn-logo{ background:rgba(255,255,255,.05); }
.spn-logo img{ max-height:38px; max-width:100%; object-fit:contain; filter:grayscale(1); opacity:.75; transition:filter .3s ease, opacity .3s ease; }
a.spn-logo:hover img{ filter:none; opacity:1; }
.spn-row.is-teaser .spn-logo{ filter:blur(4px); opacity:.75; }
.spn-row.is-teaser .spn-logo::before{ content:""; width:60%; height:15px; border-radius:6px; background:linear-gradient(90deg,var(--pink-soft),var(--blue-soft)); }
.spn-row.is-teaser .spn-logo:nth-child(2n)::before{ width:44%; height:22px; border-radius:50%; background:linear-gradient(90deg,var(--yellow-soft),var(--lavender-soft)); }
.spn-row.is-teaser::after{
  content:"เร็วๆ นี้";
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) rotate(-3deg);
  font-family:'Prompt'; font-weight:800; font-size:19px;
  padding:3px 16px; border-radius:10px;
  background:#fff; color:var(--pink-deep);
  box-shadow:0 3px 0 rgba(244,98,140,.3), 0 10px 24px rgba(74,59,63,.15);
}
.spn-logo .mini-btn{ position:absolute; top:-8px; right:-8px; width:24px; height:24px; opacity:0; }
.spn-logo:hover .mini-btn{ opacity:1; }

/* ---------- 14. ท้ายเว็บ ---------- */
.footer-nav{ display:flex; flex-wrap:wrap; gap:4px 18px; }
.footer-nav a{ color:var(--ink-soft); font-size:14px; font-weight:500; }
.footer-nav a:hover{ color:var(--pink-deep); }
.footer-top{ align-items:center; }

/* ---------- 15. ฟอร์มแก้ไข ทีม/สินค้า/สปอนเซอร์ ---------- */
.ui-edit-grid{ display:grid; grid-template-columns:190px minmax(0,1fr); gap:20px; }
.ui-drop{ aspect-ratio:3/4; display:flex !important; align-items:center; justify-content:center; text-align:center; padding:12px; position:relative; overflow:hidden; cursor:pointer; }
.ui-drop.is-square{ aspect-ratio:1; }
.ui-drop.is-wide{ aspect-ratio:16/9; }
.ui-drop .file-preview{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; margin:0; border-radius:0; }
.ui-drop input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.ui-edit-fields .field{ margin-bottom:12px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.acc-pick{ display:flex; gap:8px; flex-wrap:wrap; }
.acc-pick button{ width:30px; height:30px; border-radius:50%; border:3px solid #fff; padding:0; cursor:pointer; box-shadow:0 0 0 1px var(--line), 0 3px 8px rgba(74,59,63,.15); }
.acc-pick button[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--ink), 0 3px 8px rgba(74,59,63,.15); transform:translateY(-2px); }
.ui-edit-actions{ display:flex; align-items:center; gap:10px; margin-top:16px; flex-wrap:wrap; }
.ui-edit-actions .grow{ flex:1; }
.btn-danger{ color:#d93a3a !important; }
.ui-edit .form-msg:empty{ display:none; }
.ui-edit .modal-close{ z-index:5; }

/* ---------- 16. ลูกเล่นตอนคลิก: บล็อกพิกเซลกระจาย ---------- */
.fx-layer{ position:fixed; inset:0; z-index:9998; pointer-events:none; overflow:hidden; }
.fx-px{
  position:absolute; left:0; top:0;
  width:var(--s,8px); height:var(--s,8px);
  background:var(--c,#ff8fab);
  box-shadow:inset -1px -1px 0 rgba(0,0,0,.14);
  will-change:transform, opacity;
}
.fx-ring{
  position:absolute; left:0; top:0; width:8px; height:8px; margin:-4px 0 0 -4px;
  border:1.5px solid var(--c,#ff8fab); border-radius:3px;
  animation:fxRing .36s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes fxRing{ from{ transform:scale(1) rotate(0); opacity:.8; } to{ transform:scale(3) rotate(45deg); opacity:0; } }
.prd:active, .featured-news:active, .news-item:active, .now-playing:active, .my-gallery button:active{ transform:scale(.99); transition-duration:.08s; }

/* ---------- 17. Responsive ---------- */
@media (max-width:1100px){
  .team-grid, .shop-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px){
  .kv-body{ grid-template-columns:1fr; align-items:start; }
  .now-playing{ justify-self:start; }
  .my-body{ grid-template-columns:1fr; }
  .news-list{ grid-template-columns:1fr; }
  .spn-shell{ grid-template-columns:1fr; }
  .spn-row{ justify-content:flex-start; }
  .tmm{ grid-template-columns:1fr; }
}
@media (max-width:720px){
  .kv{ min-height:auto; border-radius:28px; }
  .kv-media img{ object-position:70% 30%; }
  .kv-shade{ background:linear-gradient(0deg, rgba(var(--cream-rgb),0.97) 0%, rgba(var(--cream-rgb),0.86) 58%, rgba(var(--cream-rgb),0.25) 100%); }
  .kv-body{ padding:120px 20px 20px; }
  .hl{ font-size:clamp(32px,9.5vw,44px); }
  .hero-actions .btn{ flex:1 1 auto; }
  .now-playing{ width:100%; }
  .kv-stats{ margin:0 20px 20px; gap:14px 22px; }
  .kv-stats > div{ flex-direction:column; gap:2px; }
  #works, #mv, #team, #shop, #news{ border-radius:28px; padding:30px 18px; }
  .team-grid, .shop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .tm-info{ left:12px; right:12px; bottom:12px; gap:6px; }
  .tm-bio{ display:none; }
  .shop-ghosts{ grid-template-columns:repeat(2,1fr); inset:14px; }
  .my-card{ border-radius:28px; padding:24px 18px 90px; }
  .my-gallery{ aspect-ratio:auto; grid-template-columns:repeat(3,1fr); grid-auto-rows:80px; }
  .my-gallery button:nth-child(1){ grid-column:1 / span 3; grid-row:auto; height:180px; }
  .my-gallery button:nth-child(n+2){ grid-column:auto; grid-row:auto; }
  .my-gallery button:nth-child(n+5){ display:none; }
  .featured-news{ flex-direction:column; align-items:flex-start; }
  .featured-news .date.has-img{ width:100%; aspect-ratio:16/9; }
  .ui-edit-grid{ grid-template-columns:1fr; }
  .ui-drop{ max-width:190px; }
  .mv-meta .mv-eq{ display:none; }
  .mv-titles span{ font-size:12px; }
  .footer-top{ align-items:flex-start; }
}
@media (max-width:400px){
  .shop-grid{ grid-template-columns:1fr; }
  .tm-pos{ font-size:11.5px; }
}

/* ---------- 18. ประหยัดเครื่อง + ปิดแอนิเมชัน ---------- */
html.perf-mode .kv-media img, html.perf-mode .embers i, html.perf-mode .mv-eq i{ animation:none !important; }
html.perf-mode .mv-ambient{ display:none; }
html.tab-hidden .kv-media img, html.tab-hidden .embers i, html.tab-hidden .flame-dot, html.tab-hidden .mv-eq i{ animation-play-state:paused !important; }
@media (prefers-reduced-motion: reduce){
  .kv{ animation:none; }
  .kv-media img, .embers i, .flame-dot, .mv-eq i, .team-skel{ animation:none !important; }
  .tm{ transform:none !important; }
  .fx-layer{ display:none; }
}

/* Halloween: การ์ดทีมโทนมืด */
html.halloween .tm-mono{
  background:
    radial-gradient(circle at 20% 15%, rgba(255,255,255,.12) 0 2px, transparent 3px) 0 0/26px 26px,
    linear-gradient(160deg, rgba(var(--acc-rgb),.5), rgba(26,17,36,0) 80%), #1a1124;
}
html.halloween .tm-pos{ color:var(--acc); background:rgba(var(--acc-rgb),0.16); }


/* =====================================================================
   19. มือถือ / จอสัมผัส — ลดงานกราฟิกที่ทำให้กระตุก (V 4.2)
   หน้าตาเหมือนเดิม แต่ตัดงานที่มือถือต้องคำนวณใหม่ทุกเฟรมตอนเลื่อน:
   - backdrop-filter (เบลอฉากหลัง) บนกรอบใหญ่ → ใช้พื้นทึบโปร่งแทน
   - ออโรร่าเบลอ 60px ที่ขยับตลอด → นิ่ง (สียังอยู่ครบ)
   - ภาพเด่นที่ซูมช้าๆ, ประกายไฟ, การ์ดเอียง → ปิด
===================================================================== */
@media (max-width:900px), (hover:none){
  .aurora-layer, .aurora-shimmer{ animation:none !important; }
  .aurora-layer{ will-change:auto; }
  #works, #mv, #team, #shop, #news,
  .spn-shell, .glass, .glass-strong:not(.nav-shell):not(.modal):not(.mobile-menu),
  .news-item, .featured-news{
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  }
  #works, #mv, #team, #shop, #news{ background:rgba(255,253,247,.9); }
  .spn-shell{ background:rgba(255,253,247,.82); }
  html.halloween #works, html.halloween #mv, html.halloween #team,
  html.halloween #shop, html.halloween #news{ background:rgba(20,13,30,.92); }
  html.halloween .spn-shell{ background:rgba(20,13,30,.86); }
  .kv-media img{ animation:none; transform:none; }
  .tm{ transform:none !important; transition:box-shadow .3s ease; }
  .embers i:nth-child(n+6){ display:none; }
  .mv-ambient{ display:none; }
  .works-particles{ display:none; }
}
/* แกลเลอรี MingYue: จองพื้นที่ไว้ก่อนรูปมา กันหน้ากระโดด */
@media (max-width:720px){
  .my-gallery:empty{ min-height:356px; }
}

/* ---------- 20. ทีมงานทั้งหมด (ปุ่ม + หน้าต่างรายชื่อ) ---------- */
.team-more{ display:flex; justify-content:center; margin-top:22px; }
.team-count{
  display:inline-flex; align-items:center; padding:1px 9px; margin-left:4px; border-radius:999px;
  font-size:12px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));
}
.team-dir{
  max-width:980px !important; width:100%;
  height:min(86vh, 820px); max-height:none !important;
  display:flex; flex-direction:column; padding:0 !important; overflow:hidden !important;
}
.td-head{ padding:26px 26px 14px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:12px; }
.td-head h3{ display:flex; align-items:center; gap:6px; margin:0; padding-right:44px; }
.td-search{
  display:flex; align-items:center; gap:10px;
  padding:0 14px; height:44px; border-radius:999px;
  background:rgba(255,255,255,.75); border:1.5px solid var(--line);
}
html.halloween .td-search{ background:rgba(255,255,255,.06); }
.td-search:focus-within{ border-color:var(--pink); box-shadow:0 0 0 4px rgba(var(--pink-rgb),.15); }
.td-search svg{ width:18px; height:18px; color:var(--ink-soft); flex:0 0 auto; }
.td-search input{ flex:1; min-width:0; border:0; outline:0; background:none; font:inherit; font-size:15px; color:var(--ink); }
.td-chips{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.td-chips::-webkit-scrollbar{ display:none; }
.td-chips button{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:999px; border:1px solid var(--line);
  background:rgba(255,255,255,.6); color:var(--ink-soft);
  font-family:'Prompt'; font-weight:600; font-size:13px; cursor:pointer; white-space:nowrap;
}
html.halloween .td-chips button{ background:rgba(255,255,255,.05); }
.td-chips button span{ font-size:11.5px; opacity:.7; }
.td-chips button[aria-selected="true"]{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));
  box-shadow:0 6px 16px rgba(244,98,140,.3);
}
.td-list{
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:16px 26px 26px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(210px,1fr)); gap:10px; align-content:start;
}
.td-item{
  --acc:#5fd3a8; --acc-ink:#1f9a72;
  display:flex; align-items:center; gap:12px; text-align:left;
  padding:10px 12px; border-radius:18px; cursor:pointer;
  background:rgba(255,255,255,.7); border:1px solid var(--line); color:var(--ink); font:inherit;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  content-visibility:auto; contain-intrinsic-size:auto 72px;
}
html.halloween .td-item{ background:rgba(255,255,255,.05); }
.td-item:hover{ transform:translateY(-2px); border-color:var(--acc); box-shadow:0 10px 22px rgba(74,59,63,.12); }
.td-item[data-acc="amber"]{ --acc:#ffc94d; --acc-ink:#c47f00; }
.td-item[data-acc="sky"]{ --acc:#79c9ff; --acc-ink:#2d8fd0; }
.td-item[data-acc="pink"]{ --acc:#ff8fab; --acc-ink:#e04a7a; }
.td-item[data-acc="violet"]{ --acc:#c9a6ff; --acc-ink:#8b5ad8; }
.td-item[data-acc="red"]{ --acc:#ff8a80; --acc-ink:#d84436; }
.td-av{
  flex:0 0 auto; width:50px; height:50px; border-radius:16px; overflow:hidden;
  display:grid; place-items:center; background:var(--acc);
  box-shadow:0 3px 0 var(--acc-ink);
}
.td-av img{ width:100%; height:100%; object-fit:cover; }
.td-av span{ font-family:'Prompt'; font-weight:800; font-size:20px; color:#fff; }
.td-txt{ display:flex; flex-direction:column; min-width:0; }
.td-txt b{ font-family:'Prompt'; font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.td-txt span{ font-size:12.5px; color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.td-empty{ grid-column:1 / -1; text-align:center; padding:40px 0; }
@media (max-width:720px){
  .team-dir{ height:88vh; }
  .td-head{ padding:22px 16px 12px; }
  .td-list{ padding:12px 16px 20px; grid-template-columns:1fr 1fr; gap:8px; }
  .td-item{ flex-direction:column; align-items:flex-start; gap:8px; padding:10px; }
  .td-av{ width:44px; height:44px; border-radius:14px; }
  .td-search input{ font-size:16px; }   /* กัน iOS ซูมเข้าตอนแตะช่องค้นหา */
}

/* ภาพเด่น/พื้นหลัง MingYue เฟดเข้าเมื่อโหลดเสร็จ (ไม่กระพริบ ไม่โชว์ไอคอนภาพแตก) */
#heroKVImg, #myBg{ opacity:0; transition:opacity .6s ease; }
#heroKVImg.is-in{ opacity:1; }
#myBg.is-in{ opacity:.38; }
#heroKVImg:not([src]), #myBg:not([src]){ visibility:hidden; }
.kv-media{ background:linear-gradient(135deg,var(--pink-soft),var(--blue-soft)); }
.fire-canvas{ animation:fireIn 1s ease both; }
@keyframes fireIn{ from{ opacity:0; } }

/* =====================================================================
   21. หัวเว็บ V4.3 — จัดใหม่ไม่ให้ล้น
   - โลโก้ = ปุ่มกลับหน้าแรก (ซ่อนลิงก์ "หน้าหลัก" บนคอม)
   - ข่าววงใน เป็นลิงก์ธรรมดาในแถวเมนู
   - แคนดี้ + Key รวมอยู่ในปุ่ม Event ปุ่มเดียว
   - ชิปโปรไฟล์เหลือรูป + ไอคอนยศ (จอกว้างมากค่อยโชว์ชื่อ)
===================================================================== */
.nav-shell{ gap:10px; }
.nav-main{ flex:1 1 auto; min-width:0; justify-content:center; }
.nav-links{ flex-wrap:nowrap; }
.nav-links .nav-home-li{ display:none; }
.nav-links a.nav-link{ padding:8px 12px; }
.nav-links a.nav-ext{ display:inline-flex; align-items:center; gap:4px; }
.nav-links a.nav-ext svg{ width:10px; height:10px; opacity:.6; }
.nav-actions{ flex:0 0 auto; }
.site-header .nav-galaxy{ flex:0 0 auto; }

/* ปุ่ม Event: ไอคอน + คำว่า Event + ตัวเลขในแคปซูลเล็ก */
.evt-btn{ gap:6px !important; padding:6px 8px 6px 10px !important; }
.evt-btn-label{ margin-right:2px; }
.evt-btn-stat{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px 2px 5px; border-radius:999px;
  background:rgba(0,0,0,.32); border:1px solid rgba(255,200,140,.35);
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; color:#ffe1b0;
}
.evt-btn-stat img{ width:14px; height:auto; }
.evt-btn-stat svg{ width:13px; height:13px; color:#ffd36b; }
.evt-btn-stat b.bump{ animation:none; }

/* ชิปโปรไฟล์: รูป + ไอคอนยศ */
.profile-chip .chip-name{ display:none; }
.profile-chip .rank > span{ display:none; }
.profile-chip .rank{ padding:3px 5px; }
@media (min-width:1600px){
  .profile-chip .chip-name{ display:inline; }
  .profile-chip .rank > span{ display:inline; }
  .profile-chip .rank{ padding:revert; }
}

/* พับเป็นเมนูมือถือ: ธีมปกติ ≤1080px, Halloween ≤1240px (ปุ่ม Event กินที่) */
@media (max-width:1080px){
  .nav-main, .site-header .nav-galaxy{ display:none !important; }
  .nav-actions #authArea{ display:none; }
  .nav-toggle{ display:flex; }
}
@media (max-width:1240px){
  html.halloween .nav-main, html.halloween .site-header .nav-galaxy.evt-only{ display:none !important; }
  html.halloween .nav-actions #authArea{ display:none; }
  html.halloween .nav-toggle{ display:flex; }
}
/* การแจ้งเตือนไม่ทับหัวเว็บ */
.toast-container{ top:86px; }

/* =====================================================================
   22. ลดภาระเครื่อง V4.3 (คอม + มือถือ) — หน้าตาเท่าเดิม
===================================================================== */
/* ออโรร่า: เดิมเบลอ 60px + โหมดผสมสีทั้งจอ ทุกเฟรม (หนักที่สุดในเว็บ)
   → ใช้ไล่สีวงกลมที่นุ่มอยู่แล้ว + ผสมสีแบบปกติ ขยับด้วย transform อย่างเดียว */
.aurora-layer{ filter:none !important; mix-blend-mode:normal !important; opacity:.5; will-change:transform; inset:0 !important; }
/* ขอบชั้นเป็นสีโปร่งอยู่แล้ว ไม่ต้องขยายเกินจอ 150% (พื้นที่วาดลดลงเกินครึ่ง) */
.aurora-1{ background:radial-gradient(circle at 30% 30%, rgba(255,143,171,.45), rgba(255,143,171,0) 46%),
                       radial-gradient(circle at 70% 65%, rgba(121,201,255,.36), rgba(121,201,255,0) 44%); }
.aurora-2{ background:radial-gradient(circle at 65% 25%, rgba(255,209,92,.4), rgba(255,209,92,0) 44%),
                       radial-gradient(circle at 25% 75%, rgba(201,166,255,.34), rgba(201,166,255,0) 46%); }
.aurora-3{ background:radial-gradient(circle at 50% 50%, rgba(255,215,164,.28), rgba(255,215,164,0) 58%); }
html.halloween .aurora-layer{ opacity:.32 !important; }
/* แถบประกาย: เดิมเลื่อน background-position = วาดใหม่ทั้งจอทุกเฟรม → เลื่อนทั้งชั้นด้วย transform */
.aurora-shimmer{
  /* ขยายแค่ซ้าย 110px พอให้เลื่อนครบ 1 รอบลายแล้ววนต่อเนียน (ลายซ้ำทุก 99.3px ตามแนวนอน) */
  inset:0 0 0 -110px !important; mix-blend-mode:normal !important; opacity:.14;
  animation:shimmerMove 3.3s linear infinite !important; will-change:transform;
}
@keyframes shimmerMove{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(99.3px,0,0); } }
/* ผึ้งลอยขึ้นลง: เดิมขยับ margin (คำนวณ layout ทุกเฟรม) → ขยับลูกด้วย transform แทน */
.pcs-chicken-wrap{ animation:none !important; will-change:transform; }
.pcs-chicken-wrap .pcs-chicken{ animation:pcsBeeFlap .22s ease-in-out infinite, beeBob 1.6s ease-in-out infinite; }
@keyframes beeBob{ 0%,100%{ translate:0 0; } 50%{ translate:0 -6px; } }
/* ปุ่ม/ไฟที่เคยแอนิเมต box-shadow หรือ filter (วาดใหม่ทุกเฟรม) → ทำให้นิ่ง */
.nav-galaxy a{ animation:none !important; }
@keyframes hwCandle{ 0%,100%{ opacity:1; } 18%{ opacity:.72; } 34%{ opacity:1; } 52%{ opacity:.6; } 70%{ opacity:.95; } }
.apply-logo{ animation:none !important; }

/* กรอบใหญ่ไม่เบลอฉากหลังแล้ว (เบลอใหญ่ทั้งหน้าทำให้เลื่อนหน่วง) ใช้พื้นทึบขึ้นนิดแทน */
#works, #mv, #team, #shop, #news{
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
  background:rgba(255,253,250,.82);
}
html.halloween #works, html.halloween #mv, html.halloween #team,
html.halloween #shop, html.halloween #news{ background:rgba(20,13,30,.9); }
.spn-shell{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(255,253,250,.78); }
html.halloween .spn-shell{ background:rgba(20,13,30,.86); }
.news-item.glass, .featured-news{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
.footer-shell{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(255,253,250,.82) !important; }
html.halloween .footer-shell{ background:rgba(20,13,30,.9) !important; }

/* ส่วนที่อยู่นอกจอไม่ต้องวาด (เบราว์เซอร์ข้ามไปจนกว่าจะเลื่อนถึง) */
/* (V4.7) เลิกใช้ content-visibility กับส่วนใหญ่ — ขนาดที่เดาไว้ไม่ตรง ทำให้หน้ากระโดด/กระพริบตอนเลื่อนบนมือถือ */

/* โหมดประหยัด: ปิดไฟ WebGL ใช้แสงเรืองแทน + ตัดเงาใหญ่ */
html.perf-mode .fire-canvas{ display:none !important; }
html.perf-mode [data-fire]{
  background:radial-gradient(ellipse 60% 90% at 50% 100%, rgba(255,214,90,.9), rgba(255,120,30,.6) 38%, rgba(200,40,10,0) 72%);
}
html.perf-mode .kv, html.perf-mode .tm, html.perf-mode .prd, html.perf-mode .mv-frame,
html.perf-mode .my-card, html.perf-mode .now-playing, html.perf-mode .my-gallery button{ box-shadow:none !important; }
html.perf-mode .embers, html.perf-mode .mv-ambient, html.perf-mode .fx-layer{ display:none !important; }
html.perf-mode .kv-media img{ transform:none; }

/* ---------- 23. ดึงรูปจาก YouTube (ฟอร์มทีมงาน) ---------- */
.team-admin{ display:flex; gap:8px; flex-wrap:wrap; }
.field-yt{ grid-column:1 / -1; }
.yt-row{ display:flex; gap:8px; }
.yt-row input{ flex:1; min-width:0; }
.yt-row .btn{ flex:0 0 auto; white-space:nowrap; }
.yt-hint{ font-size:12px; color:var(--ink-soft); margin:6px 0 0; line-height:1.5; }
.yt-hint.is-ok{ color:#1f9a72; }
.yt-hint.is-bad{ color:#d93a3a; }

/* =====================================================================
   24. V4.5
===================================================================== */
/* ---- หน้าต่างโปรไฟล์ทีมงาน: พื้นหลังทึบ (เดิมโปร่งจนเห็นการ์ดด้านหลัง) ---- */
.team-modal{
  background:var(--paper) !important;
  border:1px solid var(--glass-border) !important;
  box-shadow:0 40px 90px rgba(74,59,63,.28) !important;
}
html.halloween .team-modal{ background:#16101f !important; box-shadow:0 40px 90px rgba(0,0,0,.6) !important; }
.team-modal .modal-close{ background:rgba(255,255,255,.85); }
html.halloween .team-modal .modal-close{ background:rgba(255,255,255,.12); color:var(--ink); }

/* ---- ทีมงาน: กาง/พับการ์ดทั้งหมด ---- */
.team-grid .tm.is-extra{ display:none; }
.team-grid.is-open .tm.is-extra{
  display:block;
  animation:tmIn .45s cubic-bezier(.22,1,.36,1) both;
  animation-delay:calc(var(--i, 0) * 35ms);
}
@keyframes tmIn{ from{ opacity:0; transform:translateY(14px); } }
.team-more{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:24px; }
.team-toggle{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px 12px 24px; border-radius:999px; cursor:pointer;
  font-family:'Prompt'; font-weight:600; font-size:15px; color:var(--ink);
  background:#fff; border:1.5px solid var(--line);
  box-shadow:0 8px 22px rgba(74,59,63,.1);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
html.halloween .team-toggle{ background:rgba(255,255,255,.06); }
.team-toggle:hover{ transform:translateY(-2px); border-color:var(--pink); box-shadow:0 12px 26px rgba(244,98,140,.18); }
.team-toggle .team-count{ margin-left:0; }
.tt-chev{ width:18px; height:18px; color:var(--pink-deep); transition:transform .3s cubic-bezier(.22,1,.36,1); }
.team-toggle.is-open .tt-chev{ transform:rotate(180deg); }
.team-more .btn-link{ font-size:13px; }
/* การ์ดจำนวนมาก: ไม่ต้องวาดใบที่อยู่นอกจอ */

@media (prefers-reduced-motion: reduce){ .team-grid.is-open .tm.is-extra{ animation:none; } }

/* ---- พาร์ทเนอร์: แคปซูลเหมือนส่วนอื่น + โลโก้ใหญ่ ---- */
.page-partners{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  padding:clamp(28px,4.5vw,52px) clamp(18px,4vw,48px);
  background:rgba(255,253,250,.82);
  border:1px solid var(--glass-border);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, var(--shadow-pop);
}
html.halloween .page-partners{ background:rgba(20,13,30,.9); }
.page-partners .sec-head{ margin-bottom:26px; }
.page-partners .spn-row{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 300px));
  justify-content:center; gap:18px;
}
.page-partners .spn-row.is-solo{ grid-template-columns:minmax(0, 440px); }
.page-partners .spn-logo{
  position:relative; display:flex; flex-direction:column; align-items:stretch;
  height:auto; min-width:0; max-width:none; padding:0; overflow:hidden;
  border-radius:24px; background:#fff; border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(74,59,63,.12);
  transition:transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease;
  color:var(--ink);
}
html.halloween .page-partners .spn-logo{ background:#fff8ef; color:#2a1d24; }
a.spn-logo:hover{ transform:translateY(-4px); box-shadow:0 22px 44px rgba(74,59,63,.18); }
.spn-img{
  display:grid; place-items:center;
  aspect-ratio:16/9; padding:22px 28px;
  background:linear-gradient(160deg, #ffffff, #fff6f0);
}
.spn-row.is-solo .spn-img{ padding:28px 40px; }
.page-partners .spn-logo img{
  width:100%; height:100%; max-height:none; object-fit:contain;
  filter:none; opacity:1;
}
.spn-img b{ font-family:'Prompt'; font-size:22px; }
.spn-name{
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:12px 16px; border-top:1px solid var(--line);
  font-family:'Prompt'; font-weight:600; font-size:15px;
}
.spn-name svg{ width:11px; height:11px; opacity:.55; }
/* ยังไม่มีพาร์ทเนอร์: การ์ดเบลอ + ป้ายเร็วๆ นี้ */
.page-partners .spn-row.is-teaser .spn-logo{ height:200px; filter:blur(5px); opacity:.7; display:grid; place-items:center; }
.page-partners .spn-row.is-teaser .spn-logo::before{ width:50%; height:26px; }
.page-partners .spn-logo .mini-btn{ top:10px; right:10px; width:30px; height:30px; }
@media (max-width:720px){
  .page-partners{ border-radius:28px; padding:30px 18px; }
  .page-partners .spn-row{ grid-template-columns:1fr 1fr; gap:12px; }
  .page-partners .spn-row.is-solo{ grid-template-columns:1fr; }
  .spn-img{ padding:14px 16px; }
  .spn-name{ font-size:13px; padding:9px 10px; }
}

/* ---- ภาพเด่นบนมือถือ: โชว์ภาพเต็มด้านบน ไม่ครอปจนโลโก้หาย ---- */
@media (max-width:720px){
  .kv-media{ position:relative; inset:auto; z-index:0; aspect-ratio:1920/1009; overflow:hidden; }
  .kv-media img{ object-position:50% 50%; }
  .kv-media::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:38%;
    background:linear-gradient(0deg, var(--cream), rgba(var(--cream-rgb),0));
  }
  .kv-shade{ display:none; }
  .kv-body{ padding:6px 20px 20px; }
}

/* ---- คลิป MingYue ด้านหลัง (คอม) ---- */
.bg-clip{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; pointer-events:none;
  transition:opacity .9s ease;
}
html.clip-on .bg-clip{ opacity:.38; }
html.halloween.clip-on .bg-clip{ opacity:.5; }
@media (max-width:1023px), (hover:none){ .bg-clip{ display:none; } }
html.perf-mode .bg-clip{ display:none; }

/* ปุ่มเพลงประกอบ มุมขวาบนของกรอบ MingYue */
.my-sound{
  position:absolute; top:18px; right:18px; z-index:5;
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 14px 7px 11px; border-radius:999px; cursor:pointer;
  background:rgba(0,0,0,.42); color:#ffe6d0;
  border:1px solid rgba(255,190,130,.35);
  font-family:'Prompt'; font-weight:600; font-size:12.5px;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .2s ease;
}
.my-sound:hover{ background:rgba(0,0,0,.6); }
.ms-eq{ display:flex; align-items:flex-end; gap:2px; height:12px; }
.ms-eq i{ width:3px; height:4px; border-radius:1px; background:#ffb056; transform-origin:50% 100%; }
.my-sound.is-playing .ms-eq i{ height:12px; animation:eq .9s ease-in-out infinite alternate; }
.my-sound.is-playing .ms-eq i:nth-child(2){ animation-delay:-.3s; }
.my-sound.is-playing .ms-eq i:nth-child(3){ animation-delay:-.6s; }
.my-sound[aria-pressed="false"] .ms-eq i{ background:rgba(255,230,208,.45); }
@media (max-width:1023px), (hover:none){ .my-sound{ display:none !important; } }

/* =====================================================================
   25. พาร์ทเนอร์ V4.6 — การ์ดมีมิติ (เอียงตามเมาส์ + แสงสะท้อน + ขอบเรือง)
   ≥4 รายเลื่อนวนเป็นแถบ (หยุดเมื่อชี้)
===================================================================== */
.page-partners{
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(121,201,255,.18), transparent 60%),
    radial-gradient(600px 320px at 90% 100%, rgba(255,143,171,.16), transparent 60%),
    rgba(255,253,250,.86);
}
html.halloween .page-partners{
  background:
    radial-gradient(600px 300px at 15% 0%, rgba(162,113,255,.18), transparent 60%),
    radial-gradient(600px 320px at 90% 100%, rgba(255,122,24,.14), transparent 60%),
    rgba(20,13,30,.92);
}
.page-partners .spn-row{ perspective:1100px; padding:10px 0 6px; }
.page-partners .spn-row.is-solo{ grid-template-columns:minmax(0,520px); }
.page-partners .spn-row.is-duo{ grid-template-columns:repeat(2, minmax(0,420px)); }

.page-partners .spn-logo{
  --rx:0deg; --ry:0deg; --mx:50%; --my:40%;
  isolation:isolate;
  border-radius:28px;
  border:0;
  background:#fff;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 22px 50px -12px rgba(74,59,63,.28),
    0 0 0 1px rgba(74,59,63,.06);
}
.page-partners .spn-logo.is-tilting{ transition:transform .08s linear, box-shadow .4s ease; }
.page-partners a.spn-logo:hover{
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 34px 70px -14px rgba(244,98,140,.35), 0 0 0 1px rgba(244,98,140,.18);
}
/* ขอบไล่สีหมุนช้าๆ (หมุนชั้นด้วย transform อย่างเดียว เบาเครื่อง) */
.spn-glow{
  position:absolute; inset:-2px; z-index:-1; border-radius:inherit; overflow:hidden; pointer-events:none;
}
.spn-glow::before{
  content:""; position:absolute; left:50%; top:50%; width:180%; aspect-ratio:1;
  translate:-50% -50%;
  background:conic-gradient(from 0deg, #ff8fab, #ffd15c, #79c9ff, #c9a6ff, #ff8fab);
  animation:spnSpin 8s linear infinite;
}
.spn-glow::after{ content:""; position:absolute; inset:2px; border-radius:26px; background:#fff; }
html.halloween .spn-glow::before{ background:conic-gradient(from 0deg, #ff7a18, #ffd36b, #a271ff, #ff4d8d, #ff7a18); }
@keyframes spnSpin{ to{ rotate:360deg; } }
/* แสงสะท้อนตามเมาส์ */
.spn-shine{
  position:absolute; inset:0; z-index:3; border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px 260px at var(--mx) var(--my), rgba(255,255,255,.55), rgba(255,255,255,0) 60%);
  opacity:0; transition:opacity .3s ease;
  mix-blend-mode:soft-light;
}
.spn-logo.is-tilting .spn-shine{ opacity:1; }
/* โลโก้ลอยเหนือการ์ด (ชั้นลึกต่างกัน = มีมิติ) */
.page-partners .spn-img{
  position:relative; border-radius:26px 26px 0 0;
  background:
    radial-gradient(circle at 50% 55%, rgba(121,201,255,.16), rgba(121,201,255,0) 62%),
    radial-gradient(rgba(74,59,63,.07) 1px, transparent 1.4px) 0 0/16px 16px,
    linear-gradient(170deg, #ffffff, #fff4ee);
  transform:translateZ(30px);
}
.page-partners .spn-logo img{
  filter:drop-shadow(0 14px 18px rgba(30,20,40,.22));
  transition:transform .5s cubic-bezier(.22,1,.36,1);
}
.page-partners a.spn-logo:hover img{ transform:scale(1.04) translateY(-3px); }
.page-partners .spn-name{
  position:relative; background:#fff; border-radius:0 0 26px 26px;
  font-size:16px; transform:translateZ(14px);
}
.page-partners .spn-row.is-solo .spn-name{ font-size:18px; padding:14px 18px; }
html.halloween .spn-glow::after, html.halloween .page-partners .spn-name{ background:#fff8ef; }

/* ---- แถบเลื่อนวน (4 รายขึ้นไป) ---- */
.page-partners .spn-row.is-marquee{
  display:block; overflow:hidden; perspective:none;
  -webkit-mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.spn-track{
  display:flex; gap:18px; width:max-content; padding:8px 0 14px;
  animation:spnMarquee calc(var(--n, 4) * 5s) linear infinite;
}
.spn-row.is-marquee:hover .spn-track{ animation-play-state:paused; }
.spn-row.is-marquee .spn-logo{ width:280px; flex:0 0 auto; }
@keyframes spnMarquee{ to{ transform:translateX(calc(-50% - 9px)); } }

/* มือถือ: เลื่อนด้วยนิ้ว (2-3 ราย) */
@media (max-width:720px){
  .page-partners .spn-row.is-duo{ grid-template-columns:1fr 1fr; }
  .page-partners .spn-row.is-solo .spn-name{ font-size:15px; }
  .spn-row.is-marquee .spn-logo{ width:200px; }
  .page-partners .spn-img, .page-partners .spn-name{ transform:none; }
}
html.perf-mode .spn-glow::before, html.perf-mode .spn-track{ animation:none !important; }
html.perf-mode .spn-row.is-marquee{ overflow-x:auto; }
html.tab-hidden .spn-glow::before, html.tab-hidden .spn-track{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){
  .spn-glow::before, .spn-track{ animation:none; }
  .spn-row.is-marquee{ overflow-x:auto; }
  .page-partners .spn-logo{ transform:none !important; }
}

/* V4.6.1 — การ์ด/โลโก้พาร์ทเนอร์ขนาดพอดี */
.page-partners .spn-row{ grid-template-columns:repeat(auto-fit, minmax(200px, 250px)); gap:16px; }
.page-partners .spn-row.is-solo{ grid-template-columns:minmax(0, 320px); }
.page-partners .spn-row.is-duo{ grid-template-columns:repeat(2, minmax(0, 280px)); }
.page-partners .spn-img, .page-partners .spn-row.is-solo .spn-img{ aspect-ratio:16/9; padding:22px 34px; }
.page-partners .spn-logo img{ width:auto; height:auto; max-width:78%; max-height:84px; }
.page-partners .spn-row.is-solo .spn-logo img{ max-height:96px; }
.page-partners .spn-name, .page-partners .spn-row.is-solo .spn-name{ font-size:15px; padding:11px 14px; }
.spn-row.is-marquee .spn-logo{ width:230px; }
@media (max-width:720px){
  .page-partners .spn-row.is-solo{ grid-template-columns:minmax(0, 260px); }
  .page-partners .spn-logo img{ max-height:64px; }
  .spn-row.is-marquee .spn-logo{ width:180px; }
}


/* =====================================================================
   26. V4.7 — แก้มือถือกระพริบ/หน่วงตอนเลื่อนลงล่าง
===================================================================== */
/* ทุกจอ: ส่วนใหญ่ต้องวาดตามขนาดจริง (ไม่ซ่อน/โผล่ระหว่างเลื่อน) */
#works, #news, #mv, #shop, #team, #sponsors, footer, .footer-shell, .team-grid .tm{
  content-visibility:visible !important;
  contain-intrinsic-size:none !important;
}
/* แสงสะท้อนพาร์ทเนอร์: เลิกใช้ blend mode (Safari กระพริบ) */
.spn-shine{ mix-blend-mode:normal; background:radial-gradient(380px 240px at var(--mx) var(--my), rgba(255,255,255,.35), rgba(255,255,255,0) 60%); }

@media (max-width:900px), (hover:none){
  /* พื้นหลังนิ่งสนิท: ไม่มีชั้นไหนขยับ ไม่จองหน่วยความจำการ์ดจอ */
  .aurora-layer, .aurora-shimmer{ animation:none !important; will-change:auto !important; }
  .aurora-shimmer{ display:none !important; }
  /* ตัดการวาดแบบ 3 มิติทั้งหมด (สาเหตุกระพริบบน iPhone) */
  .page-partners .spn-row{ perspective:none !important; }
  .page-partners .spn-logo{ transform:none !important; transform-style:flat !important; transition:box-shadow .3s ease !important; }
  .page-partners .spn-img, .page-partners .spn-name{ transform:none !important; }
  .spn-glow::before{ animation:none !important; }
  .spn-shine{ display:none !important; }
  .tm{ transform:none !important; }
  .carousel-card{ backface-visibility:hidden; }
  /* ผึ้ง/ใบไม้ในฉากพิกเซล: ขยับเฉพาะ transform */
  .pcs-leaf{ will-change:auto; }
}
@media (max-width:900px), (hover:none){
  /* หัวเว็บลอยบนมือถือ: เลิกเบลอฉากหลัง (ต้องเบลอใหม่ทุกครั้งที่เลื่อน) ใช้พื้นทึบแทน */
  .nav-shell{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(255,253,247,.96) !important; }
  html.halloween .nav-shell{ background:rgba(20,13,30,.96) !important; }
  .mobile-menu{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(255,253,247,.98) !important; }
  html.halloween .mobile-menu{ background:rgba(18,11,28,.98) !important; }
}

/* V4.7.1 — มือถือ: เนื้อหาโชว์ทันที ไม่มีแอนิเมชันโผล่ตอนเลื่อน, สไลด์ภาพไม่ซูมช้า */
@media (max-width:900px), (hover:none){
  .reveal, .stagger > *{ opacity:1 !important; transform:none !important; }
  .dg-slide img{ transition:none !important; transform:none !important; }
}

/* V4.7.2 — มือถือ: หน้าต่าง (โมดอล) ไม่ใช้เบลอฉากหลัง
   เบลอ + หน้าต่างยาวที่เลื่อนได้ ทำให้ Chrome Android วาดไม่ครบ เห็นเป็นสี่เหลี่ยมโปร่ง/ภาพค้าง */
@media (max-width:900px), (hover:none){
  .overlay{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; background:rgba(28,18,32,.62); }
  html.halloween .overlay{ background:rgba(6,3,12,.78); }
  .modal.glass-strong:not(.evt-modal):not(.secret-modal),
  .modal.team-modal{
    -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    background:#fffaf3 !important;
  }
  html.halloween .modal.glass-strong:not(.evt-modal):not(.secret-modal),
  html.halloween .modal.team-modal{ background:#17101f !important; }
  .evt-modal, .secret-modal{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .modal{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
}