:root{
  --sumi:#0d1018; --sumi2:#141a26; --night:#1a1533;
  --washi:#F3F0E7; --shu:#c0392b; --shuD:#8c2419;
  --dim:#8a8ea0; --dimL:#6B6558; --kin:#ffb84d; --biru:#1668d8; --biru-l:#0f9bf0; --crys:#6de3c8;
  --pix:"DotGothic16",monospace;
  --gothic:"Zen Kaku Gothic New",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--sumi);color:var(--washi);font-family:var(--gothic);line-height:1.9;overflow-x:hidden}
h1,h2,h3{font-family:var(--pix);font-weight:400;margin:0;line-height:1.5;letter-spacing:.02em}
p{margin:0}a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--kin);outline-offset:3px}

/* nút kiểu pixel: viền vuông + bóng cứng, bấm xuống là lún */
.pbtn{display:inline-block;font-family:var(--pix);font-size:15px;padding:11px 26px;
  background:var(--washi);color:#1a1a18;border:3px solid #1a1a18;
  box-shadow:4px 4px 0 #1a1a18;cursor:pointer;transition:transform .06s,box-shadow .06s;letter-spacing:.06em}
.pbtn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #1a1a18}
.pbtn:active{transform:translate(4px,4px);box-shadow:0 0 0 #1a1a18}
.pbtn-red{background:var(--shu);color:#fff;border-color:#4a1109;box-shadow:4px 4px 0 #4a1109}
.pbtn-red:hover{box-shadow:2px 2px 0 #4a1109}
.pbtn-red:active{box-shadow:0 0 0 #4a1109}
.pbtn-sm{font-size:12px;padding:7px 16px;box-shadow:3px 3px 0 #4a1109}

.gate{position:fixed;inset:0;z-index:200;background:var(--night);display:grid;place-items:center;transition:opacity .7s,visibility .7s}
.gate.off{opacity:0;visibility:hidden}
.gate-in{text-align:center}
.gate-seal{display:block;width:76px;height:76px;margin:0 auto;image-rendering:pixelated;filter:drop-shadow(5px 5px 0 rgba(0,0,0,.5))}
.gate-jp{font-family:var(--pix);font-size:15px;letter-spacing:.25em;color:var(--dim);margin:24px 0 30px}
.gate-note{margin-top:16px;font-family:var(--pix);font-size:11px;color:rgba(243,240,231,.35)}

.head{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:24px;padding:14px clamp(16px,4vw,44px);transition:background .4s}
.head.stuck{background:rgba(13,16,24,.9);border-bottom:2px solid rgba(243,240,231,.1)}
.logo{display:flex;align-items:center;gap:9px;margin-right:auto;font-family:var(--pix);font-size:15px}
.logo-seal{width:26px;height:26px;flex:none;display:block;image-rendering:pixelated;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.45))}
.foot .logo-seal{width:22px;height:22px}
.nav{display:flex;gap:24px;font-family:var(--pix);font-size:13px}
.nav a{color:var(--dim);transition:color .2s}
.nav a:hover{color:var(--biru-l)}
.snd{width:30px;height:30px;flex:none;background:none;border:2px solid rgba(243,240,231,.25);display:flex;align-items:flex-end;justify-content:center;gap:2px;padding:9px 0;cursor:pointer}
.snd i{width:2px;height:3px;background:var(--dim);display:block}
.snd[aria-pressed="true"] i{background:var(--kin);animation:eq .9s ease-in-out infinite}
.snd[aria-pressed="true"] i:nth-child(2){animation-delay:.15s}
.snd[aria-pressed="true"] i:nth-child(3){animation-delay:.3s}
.snd[aria-pressed="true"] i:nth-child(4){animation-delay:.45s}
@keyframes eq{0%,100%{height:3px}50%{height:11px}}

/* hero: canvas pixel phủ toàn màn, phóng to giữ khối vuông */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#141033}
#scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  image-rendering:pixelated;image-rendering:crisp-edges}
.hero-in{position:relative;z-index:3;width:100%;max-width:1100px;margin:0 auto;padding:0 clamp(16px,4vw,44px) clamp(70px,12vh,130px);text-align:center}
.hero-h{font-size:clamp(1.9rem,5.4vw,3.6rem);text-shadow:4px 4px 0 #0a0715,0 0 24px rgba(20,16,51,.9)}
.hero-p{max-width:30em;margin:22px auto 0;color:#cfc9dd;font-size:14.5px;text-shadow:2px 2px 0 #0a0715}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:32px}
.scroll-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;color:rgba(243,240,231,.5);font-size:14px;animation:bob 1.6s steps(3) infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

.marquee{background:var(--shu);color:#fff;padding:9px 0;overflow:hidden;white-space:nowrap;border-top:3px solid #4a1109;border-bottom:3px solid #4a1109}
.marquee-row{display:flex;width:max-content;animation:slide 30s linear infinite}
.marquee-row span{font-family:var(--pix);font-size:14px;padding-right:1em}
@keyframes slide{to{transform:translateX(-50%)}}

section{padding:clamp(66px,10vw,120px) clamp(16px,4vw,44px)}
.sec-num{font-family:var(--pix);font-size:13px;letter-spacing:.3em;color:var(--kin);margin-bottom:12px}

.about{background:var(--washi);color:#1a1a18}
.about h2,.about .sec-num,.about-lead,.acts{max-width:1100px;margin-left:auto;margin-right:auto}
.about h2{font-size:clamp(1.5rem,3.6vw,2.3rem)}
.about .sec-num{color:var(--shu);max-width:1100px}
.about-lead{margin-top:16px;max-width:32em;color:var(--dimL);font-size:14.5px}
.acts{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:50px}
.act{position:relative;background:#fff;border:3px solid #1a1a18;box-shadow:6px 6px 0 #1a1a18;padding:30px 24px}

.act h3{font-size:1.05rem;margin-bottom:12px}
.act p{color:var(--dimL);font-size:13.5px}

.members{background:var(--sumi2)}
.members h2,.members .sec-num,.mem-list{max-width:1100px;margin-left:auto;margin-right:auto}
.members h2{font-size:clamp(1.5rem,3.6vw,2.3rem)}
.mem-list{list-style:none;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));margin-top:44px}
.mem{background:var(--sumi);border:3px solid #0a0d14;box-shadow:5px 5px 0 #0a0d14;padding:26px 20px;transition:transform .12s}
.mem:hover{transform:translate(-2px,-2px)}





.mem b{display:block;font-family:var(--pix);font-size:1rem;font-weight:400}
.mem em{display:block;font-style:normal;font-size:12px;color:var(--dim);margin-top:2px}

.news{max-width:1100px;margin:0 auto}
.news h2{font-size:clamp(1.5rem,3.6vw,2.3rem)}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:28px 0 8px}
.tab{background:none;border:2px solid rgba(243,240,231,.22);color:var(--dim);padding:6px 16px;font-family:var(--pix);font-size:12.5px;cursor:pointer;transition:.2s}
.tab:hover{color:var(--kin);border-color:var(--kin)}
.tab.on{background:var(--washi);color:var(--sumi);border-color:var(--washi)}
.ni{display:grid;grid-template-columns:108px 1fr auto;gap:4px 16px;padding:26px 0;border-bottom:2px solid rgba(243,240,231,.11);align-items:baseline;transition:padding-left .2s,background .2s}
.ni:hover{padding-left:12px;background:rgba(255,184,77,.05)}
.ni time{grid-row:1/3;font-family:var(--pix);font-size:12.5px;color:var(--dim)}
.ni h3{grid-column:2;font-size:1.05rem}
.ni p{grid-column:2;font-size:13.5px;color:var(--dim)}
.ni-tag{grid-column:3;grid-row:1;font-family:var(--pix);font-size:11px;color:var(--kin)}
.ni[hidden]{display:none}

.join{position:relative;text-align:center;background:var(--night);overflow:hidden}
.join-k{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--pix);font-size:clamp(11rem,28vw,20rem);color:rgba(243,240,231,.05);line-height:1}
.join h2{position:relative;font-size:clamp(1.3rem,3.4vw,2.1rem)}
.join p{position:relative;color:rgba(243,240,231,.6);margin-top:16px;font-size:14px}
.join-btns{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}

.foot{display:flex;align-items:center;gap:12px;padding:26px clamp(16px,4vw,44px);border-top:2px solid rgba(243,240,231,.12);font-family:var(--pix);font-size:12.5px;color:var(--dim)}
.foot p{margin:0}.foot-d{margin-left:auto!important}

@media (max-width:760px){
  .nav{display:none}
  .ni{grid-template-columns:1fr}
  .ni time,.ni-tag,.ni h3,.ni p{grid-row:auto;grid-column:1}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---- lien ket mang xa hoi ---- */
.links{position:relative;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));max-width:840px;margin:40px auto 0;text-align:left}
.lk{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;
  background:var(--sumi);border:3px solid #05060b;box-shadow:5px 5px 0 #05060b;
  padding:18px 20px;transition:transform .12s,box-shadow .12s}
.lk:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #05060b}
.lk:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #05060b}
.lk b{grid-column:2;font-family:var(--pix);font-size:14px;font-weight:400;line-height:1.4}
.lk em{grid-column:2;font-style:normal;font-size:11.5px;color:var(--dim);line-height:1.5}
.lk-i{grid-row:1/3;width:38px;height:38px;display:block;border:2px solid #05060b;
  background-repeat:no-repeat;background-size:100% 100%;image-rendering:pixelated}
.lk-i[data-s="tg"]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='12' y='2' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='10' y='3' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='4' width='5' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='5' width='7' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='6' width='8' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='7' width='9' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='8' width='6' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='9' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='9' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='10' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='10' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='5' y='11' width='1' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='11' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E");background-color:#2AABEE}
.lk-i[data-s="tgc"]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='10' y='2' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='3' width='5' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='4' width='8' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='5' width='10' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='6' width='10' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='7' width='10' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='8' width='8' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='9' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='7' y='9' width='5' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='10' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='10' y='10' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='11' width='2' height='1' fill='%23ffffff'/%3E%3C/svg%3E");background-color:#1c7fb5}
.lk-i[data-s="x"]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='2' y='2' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='10' y='2' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='3' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='3' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='4' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='4' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='5' width='6' height='1' fill='%23ffffff'/%3E%3Crect x='5' y='6' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='5' y='7' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='8' width='6' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='9' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='9' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='10' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='10' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='11' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='10' y='11' width='2' height='1' fill='%23ffffff'/%3E%3C/svg%3E");background-color:#111}
.lk-i[data-s="l3"]{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='4' y='2' width='6' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='3' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='3' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='4' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='5' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='5' y='6' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='7' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='8' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='3' y='9' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='9' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='4' y='10' width='6' height='1' fill='%23ffffff'/%3E%3C/svg%3E");background-color:#7b61ff}

.foot-lk{display:flex;gap:16px;margin-left:auto;flex-wrap:wrap}
.foot-lk a{color:var(--dim);transition:color .2s}
.foot-lk a:hover{color:var(--biru-l)}
.foot .foot-d{margin-left:0!important;opacity:.6}
@media (max-width:620px){
  .foot{flex-wrap:wrap}
  .foot-lk{margin-left:0;width:100%;font-size:11.5px}
}

/* ---- the thanh vien ---- */
.mem{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.mem-av{width:64px;height:64px;display:block;margin-bottom:14px;
  image-rendering:pixelated;background:#0a0d14;border:3px solid #0a0d14;
  transition:transform .14s}
.mem:hover .mem-av{transform:translateY(-4px) scale(1.04)}
.mem b{font-family:var(--pix);font-size:1rem;font-weight:400;line-height:1.4}
.mem-at{display:block;font-family:var(--pix);font-size:11.5px;color:var(--biru-l);margin-top:1px}
.mem em{display:block;font-style:normal;font-size:11.5px;color:var(--dim);margin-top:7px;line-height:1.5}
.mem-list{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}

/* ---- icon mail ---- */
.lk-i[data-s="mail"]{background-color:#c0392b;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='2' y='2' width='10' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='3' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='10' y='3' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='4' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='9' y='4' width='3' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='5' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='8' y='5' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='6' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='5' y='6' width='4' height='1' fill='%23ffffff'/%3E%3Crect x='10' y='6' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='7' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='6' y='7' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='10' y='7' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='8' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='10' y='8' width='2' height='1' fill='%23ffffff'/%3E%3Crect x='2' y='9' width='10' height='1' fill='%23ffffff'/%3E%3C/svg%3E");}

/* ---- thanh gia coin ---- */
.ticker{background:#0a0d14;border-top:3px solid #05060b;border-bottom:3px solid #05060b;
  overflow:hidden;white-space:nowrap;padding:9px 0}
.ticker-track{display:flex;width:max-content;animation:tkslide 46s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.tk{display:inline-flex;align-items:center;gap:7px;padding:0 20px;
  font-family:var(--pix);font-size:13px;border-right:2px solid rgba(243,240,231,.09)}
.tk img{image-rendering:pixelated;display:block}
.tk b{font-weight:400;color:var(--washi)}
.tk u{text-decoration:none;color:var(--dim)}
.tk i{font-style:normal;color:var(--dim);font-size:12px}
.tk i.up,.orb-c.up{color:#3ddc84}
.tk i.dn,.orb-c.dn{color:#ff6b5e}
.ticker.offline{opacity:.45}
@keyframes tkslide{to{transform:translateX(-50%)}}

/* ---- qua cau coin lo lung ---- */
.orbs{position:absolute;inset:0;z-index:2;pointer-events:none}
.orb{position:absolute;transform:translate(-50%,-50%);animation:float 7s ease-in-out infinite;
  pointer-events:auto;text-align:center}
.orb img{width:100%;height:auto;display:block;image-rendering:pixelated;
  filter:drop-shadow(0 0 10px rgba(109,227,200,.25))}
.orb-c{display:block;margin-top:5px;font-family:var(--pix);font-size:11px;
  background:rgba(5,6,11,.75);padding:1px 5px;color:var(--dim)}
@keyframes float{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-64%)}}

/* ---- vach ngan pixel ---- */
.pxdiv{height:34px;background-repeat:repeat-x;background-size:auto 100%;background-position:bottom;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 10' shape-rendering='crispEdges'%3E%3Crect x='14' y='2' width='2' height='1' fill='%23141a26'/%3E%3Crect x='12' y='3' width='6' height='1' fill='%23141a26'/%3E%3Crect x='10' y='4' width='10' height='1' fill='%23141a26'/%3E%3Crect x='24' y='4' width='2' height='1' fill='%23141a26'/%3E%3Crect x='8' y='5' width='13' height='1' fill='%23141a26'/%3E%3Crect x='22' y='5' width='6' height='1' fill='%23141a26'/%3E%3Crect x='6' y='6' width='24' height='1' fill='%23141a26'/%3E%3Crect x='4' y='7' width='28' height='1' fill='%23141a26'/%3E%3Crect x='2' y='8' width='30' height='1' fill='%23141a26'/%3E%3Crect x='0' y='9' width='32' height='1' fill='%23141a26'/%3E%3C/svg%3E");margin-bottom:-2px}

@media (max-width:820px){
  .orb{display:none}
  .orb:nth-child(-n+3){display:block}
}
@media (prefers-reduced-motion:reduce){
  .ticker-track,.orb{animation:none!important}
}

/* ---- phan 活動 kieu pixel ---- */
.about{position:relative}
.about::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(26,26,24,.18) 1px,transparent 1px);
  background-size:8px 8px}
.about > *{position:relative}
.about h2{display:inline-block;padding-bottom:10px;
  background:linear-gradient(var(--shu),var(--shu)) left bottom/100% 4px no-repeat}

.acts{gap:26px}
.act{position:relative;padding:0;background:#fff;border:0;box-shadow:none;
  filter:drop-shadow(6px 6px 0 #1a1a18);
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),
                    calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.act::before{content:"";position:absolute;inset:0;pointer-events:none;
  border:3px solid #1a1a18;
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),
                    calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.act > *{position:relative}
.act-i{display:block;image-rendering:pixelated;margin:26px 0 16px 24px}
.act h3{font-size:1.05rem;margin:0 24px 12px}
.act p{color:var(--dimL);font-size:13.5px;margin:0 24px 20px}
.act-tag{display:inline-block;margin:0 0 24px 24px;font-family:var(--pix);font-size:11px;
  background:#1a1a18;color:#f3f0e7;padding:3px 12px}

/* thanh tieu de phan giua sang */
.about .sec-num{display:inline-block;background:var(--shu);color:#fff;
  padding:3px 12px;letter-spacing:.2em;margin-bottom:18px}

/* ---- ten coin tren qua cau + trong ticker ---- */
.orb-n{display:block;margin-top:6px;font-family:var(--pix);font-size:10px;
  color:rgba(243,240,231,.75);text-shadow:2px 2px 0 #05060b;letter-spacing:.05em}
.orb-c{margin-top:2px}
.tk s{text-decoration:none;color:var(--dim);font-size:11px;opacity:.75}
.tk{padding:0 16px}

/* ===== PIXEL cho cac phan con lai ===== */

/* --- メンバー --- */
.members{position:relative}
.members::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background-image:radial-gradient(rgba(243,240,231,.16) 1px,transparent 1px);
  background-size:10px 10px}
.members > *{position:relative}
.members h2,.news h2,.join h2{display:inline-block;padding-bottom:9px;
  background:linear-gradient(var(--kin),var(--kin)) left bottom/100% 4px no-repeat}
.members .sec-num,.news .sec-num{display:inline-block;background:var(--kin);color:#1a1a18;
  padding:3px 12px;letter-spacing:.2em;margin-bottom:16px}

.mem{background:var(--sumi);border:0;box-shadow:none;padding:0;
  filter:drop-shadow(5px 5px 0 #05060b);
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),
                    calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.mem::before{content:"";position:absolute;inset:0;pointer-events:none;border:3px solid #05060b;
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),
                    calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.mem{position:relative;transition:transform .14s}
.mem > *{position:relative}
.mem-av{margin:22px 0 0 20px;border:0;background:transparent}
.mem b{margin:12px 20px 0}
.mem-at{margin:1px 20px 0}
.mem em{margin:8px 20px 0}
.mem::after{content:"";display:block;height:20px}

/* --- ニュース --- */
.ni{position:relative;grid-template-columns:26px 104px 1fr auto;gap:4px 14px;
  border-bottom:0;margin-bottom:10px;padding:20px 16px;
  background:rgba(243,240,231,.035);
  clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),
                    calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)}
.ni:hover{padding-left:22px;background:rgba(255,184,77,.09)}
.ni-ic{grid-column:1;grid-row:1/3;image-rendering:pixelated;align-self:center}
.ni time{grid-column:2;grid-row:1/3;align-self:center}
.ni h3{grid-column:3}
.ni p{grid-column:3}
.ni-tag{grid-column:4;grid-row:1;background:#05060b;padding:2px 9px}

.tab{clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),
                       calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}

/* --- 参加 --- */
.join{padding-bottom:0}
.shrine{position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(120px,20vw,190px);
  image-rendering:pixelated;opacity:.9;pointer-events:none}
.join h2,.join p,.join .links{position:relative;z-index:2}
.links{margin-bottom:clamp(130px,21vw,205px)}
.lk{background:rgba(10,13,20,.9);border:0;box-shadow:none;position:relative;
  filter:drop-shadow(5px 5px 0 #05060b);
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),
                    calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.lk::after{content:"";position:absolute;inset:0;pointer-events:none;border:3px solid #05060b;
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),
                    calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}

/* --- dai co truoc footer --- */
.grass{height:22px;background-repeat:repeat-x;background-size:auto 100%;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 4' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='1' height='1' fill='%231d3a2a'/%3E%3Crect x='10' y='1' width='1' height='1' fill='%231d3a2a'/%3E%3Crect x='15' y='1' width='1' height='1' fill='%231d3a2a'/%3E%3Crect x='22' y='1' width='1' height='1' fill='%231d3a2a'/%3E%3Crect x='1' y='2' width='3' height='1' fill='%231d3a2a'/%3E%3Crect x='6' y='2' width='1' height='1' fill='%231d3a2a'/%3E%3Crect x='9' y='2' width='3' height='1' fill='%231d3a2a'/%3E%3Crect x='14' y='2' width='3' height='1' fill='%231d3a2a'/%3E%3Crect x='21' y='2' width='3' height='1' fill='%231d3a2a'/%3E%3Crect x='27' y='2' width='1' height='1' fill='%231d3a2a'/%3E%3Crect x='0' y='3' width='32' height='1' fill='%231d3a2a'/%3E%3C/svg%3E");
  background-position:bottom;margin-bottom:-1px}

@media (max-width:760px){
  .ni{grid-template-columns:26px 1fr}
  .ni time{grid-column:2;grid-row:auto}
  .ni h3,.ni p{grid-column:1/-1}
  .ni-tag{grid-column:1/-1;grid-row:auto;justify-self:start}
}

/* ===== 実績 — du an lo lung ===== */
.works{position:relative;background:var(--sumi);max-width:none;
  padding-left:clamp(16px,4vw,44px);padding-right:clamp(16px,4vw,44px)}
.works::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;
  background-image:radial-gradient(rgba(243,240,231,.14) 1px,transparent 1px);
  background-size:12px 12px}
.works > *{position:relative;max-width:1100px;margin-left:auto;margin-right:auto}
.works .sec-num{display:inline-block;background:var(--crys);color:#0a2a24;
  padding:3px 12px;letter-spacing:.2em;margin-bottom:16px}
.works h2{display:inline-block;font-size:clamp(1.5rem,3.6vw,2.3rem);padding-bottom:9px;
  background:linear-gradient(var(--crys),var(--crys)) left bottom/100% 4px no-repeat}
.works-lead{margin-top:18px;max-width:34em;color:var(--dim);font-size:14px}

.orbit{position:relative;height:clamp(340px,42vw,440px);margin-top:34px}
.pj{position:absolute;transform:translate(-50%,-50%);text-align:center;
  animation:pjfloat 8s ease-in-out infinite}
.pj img{width:100%;height:auto;display:block;image-rendering:pixelated;
  filter:drop-shadow(4px 4px 0 rgba(5,6,11,.8))}
.pj b{display:block;margin-top:9px;font-family:var(--pix);font-size:12px;font-weight:400;
  color:var(--washi);text-shadow:2px 2px 0 #05060b;white-space:nowrap}
.pj em{display:block;font-style:normal;font-size:10.5px;color:var(--dim);
  white-space:nowrap;margin-top:1px}
@keyframes pjfloat{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-60%)}}

.works-more{margin-top:34px;padding-top:28px;border-top:2px solid rgba(243,240,231,.12)}
.works-sub{font-family:var(--pix);font-size:12px;color:var(--dim);margin-bottom:16px}
.chips{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:12px}
.chips li{display:flex;align-items:center;gap:9px;background:var(--sumi2);
  padding:10px 18px;font-family:var(--pix);font-size:13px;position:relative;
  filter:drop-shadow(4px 4px 0 #05060b);
  clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),
                    calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)}
.chips img{image-rendering:pixelated;display:block}
.chip-n{background:var(--crys)!important;color:#0a2a24;gap:7px}
.chip-n b{font-weight:400;font-size:16px}
.chip-n span{font-size:11px;opacity:.8}

/* xep lai tren man hinh hep: bo lo lung, chuyen thanh luoi */
@media (max-width:820px){
  .orbit{height:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
    gap:26px 14px;margin-top:30px}
  .pj{position:static;transform:none;width:auto!important;animation:none;
    display:flex;flex-direction:column;align-items:center}
  .pj img{width:60px}
  .pj b{font-size:11px;white-space:normal}
  .pj em{white-space:normal}
}
@media (prefers-reduced-motion:reduce){ .pj{animation:none} }

/* ---- bang so lieu trong 実績 ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
  margin-bottom:38px}
.stat{background:var(--sumi2);padding:20px 22px;position:relative;
  filter:drop-shadow(5px 5px 0 #05060b);
  clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),
                    calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px)}
.stat b{display:block;font-family:var(--pix);font-size:30px;font-weight:400;
  color:var(--crys);line-height:1.2}
.stat b span{font-size:20px;color:var(--kin)}
.stat em{display:block;font-style:normal;font-size:11.5px;color:var(--dim);margin-top:4px}
.chip-more{background:transparent!important;color:var(--dim);
  border:2px dashed rgba(243,240,231,.25);filter:none!important;clip-path:none!important}
.works-note{margin-top:18px;font-size:11.5px;color:var(--dim);opacity:.75}

/* ---- tab X ---- */
.tab-x{border-color:rgba(243,240,231,.35)}
.tab-x.on{background:#fff;color:#0d1018;border-color:#fff}
.xfeed{display:grid;gap:10px}
.xp{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;padding:18px 18px;
  background:rgba(243,240,231,.035);transition:background .2s,padding-left .2s;
  clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),
                    calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px)}
.xp:hover{background:rgba(255,184,77,.08);padding-left:24px}
.xp-kind{font-family:var(--pix);font-size:11px;padding:2px 9px;background:#05060b;color:var(--dim)}
.xp-kind[data-k="repost"]{color:#3ddc84}
.xp-kind[data-k="quote"]{color:var(--crys)}
.xp-kind[data-k="reply"]{color:var(--kin)}
.xp-kind i{font-style:normal;opacity:.8}
.xp time{font-family:var(--pix);font-size:11px;color:var(--dim);justify-self:start}
.xp p{grid-column:1/-1;font-size:14px;color:var(--washi);white-space:pre-wrap;
  overflow-wrap:anywhere;margin-top:2px}
.xp-m{grid-column:1/-1;font-family:var(--pix);font-size:11px;color:var(--dim);margin-top:4px}
.xp-all{display:inline-block;margin-top:6px;font-family:var(--pix);font-size:12px;
  color:var(--kin);padding:8px 0}
.xp-all:hover{text-decoration:underline}

/* Sua loi: thuoc tinh hidden bi display:grid ghi de */
.xfeed[hidden],
.news-list[hidden]{display:none!important}

/* ---- trang chi tiet bai viet ---- */
.post-wrap{max-width:760px;margin:0 auto;padding:110px clamp(16px,4vw,44px) 90px}
.post-back{display:inline-block;font-family:var(--pix);font-size:12px;color:var(--dim);
  margin-bottom:30px;transition:color .2s}
.post-back:hover{color:var(--kin)}
.post-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.post-head img{image-rendering:pixelated}
.post-cat{font-family:var(--pix);font-size:11px;background:#05060b;color:var(--kin);padding:3px 10px}
.post-date{font-family:var(--pix);font-size:12px;color:var(--dim)}
.post-title{font-size:clamp(1.4rem,4vw,2.2rem);line-height:1.5;margin-bottom:28px;
  padding-bottom:14px;background:linear-gradient(var(--kin),var(--kin)) left bottom/100% 4px no-repeat;
  display:inline-block}
.post-body{font-size:15px;line-height:2.1;color:#d8d5cd;white-space:pre-wrap;
  overflow-wrap:anywhere}
.post-foot{margin-top:50px;padding-top:26px;border-top:2px solid rgba(243,240,231,.12)}
.post-msg{font-family:var(--pix);font-size:13px;color:var(--dim);padding:40px 0}

/* ---- muc X rieng ---- */
.xsec{max-width:1100px;margin:0 auto;background:var(--sumi2)}
.xsec[hidden]{display:none!important}
.xsec .sec-num{display:inline-block;background:#fff;color:#0d1018;padding:3px 14px;
  letter-spacing:.2em;margin-bottom:14px}
.xsec h2{display:inline-block;font-size:clamp(1.5rem,3.6vw,2.3rem);padding-bottom:9px;
  background:linear-gradient(#fff,#fff) left bottom/100% 4px no-repeat}
.xsec-lead{margin:18px 0 30px;font-size:13.5px;color:var(--dim)}
.xsec-lead a{font-family:var(--pix);font-size:13px;color:var(--biru-l);margin-left:8px}
.xsec-lead a:hover{text-decoration:underline}

/* ---- nut doi ngon ngu ---- */
.langbtn{flex:none;background:transparent;color:var(--dim);
  border:2px solid rgba(243,240,231,.25);padding:5px 12px;
  font-family:var(--gothic);font-weight:500;font-size:12px;letter-spacing:.04em;
  cursor:pointer;transition:.2s;white-space:nowrap;line-height:1.4}
.langbtn:hover{color:var(--washi);border-color:var(--washi)}
@media (max-width:520px){ .langbtn{font-size:11px;padding:4px 9px} }

/* header: cho phep xuong dong khi chat cho */
.head{flex-wrap:wrap;row-gap:8px}
.head .nav{flex-wrap:wrap}
@media (max-width:900px){
  .head{gap:14px}
  .langbtn{font-size:11px;padding:4px 10px}
}

/* ---- danh sach tin: cat bot noi dung, them anh thu nho ---- */
.ni p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;max-height:3.9em}
.ni h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ni-th{grid-column:4;grid-row:1/3;width:96px;height:64px;object-fit:cover;
  align-self:center;border:2px solid #05060b;image-rendering:auto}
.ni.has-img{grid-template-columns:26px 104px 1fr auto 96px}
.ni.has-img .ni-tag{grid-column:4}
.ni.has-img .ni-th{grid-column:5}

/* ---- anh trong bai ---- */
.post-img{display:block;width:100%;height:auto;margin:0 0 30px;
  border:3px solid #05060b}

@media (max-width:760px){
  .ni.has-img{grid-template-columns:26px 1fr}
  .ni-th{grid-column:1/-1!important;grid-row:auto!important;width:100%;height:150px;margin-top:10px}
}

/* nut loa an khi chua co file nhac — bo thuoc tinh hidden trong index.html de bat lai */
.snd[hidden]{display:none!important}