/* ===== YG-THAIQ · กิจกรรม CBT (scroll-down section ใต้ hero เทศกาล) ===== */
.cbt{position:relative;z-index:1;background:#0a0714 center/cover no-repeat;padding:70px 16px 90px;color:#eef0f7;
  font-family:'Bai Jamjuree','Sarabun',sans-serif;overflow:hidden}
.cbt::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,#0a0714 0%,rgba(10,7,20,.72) 16%,rgba(14,9,26,.6) 50%,rgba(10,7,20,.82) 100%)}
.cbt-inner{position:relative;z-index:1;max-width:1180px;margin:0 auto}

/* ---- scroll hint ปุ่มเลื่อนลงใน hero ---- */
.cbt-jump{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:8;
  display:inline-flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  color:#ffe6b0;font:600 12px 'Chakra Petch',sans-serif;letter-spacing:1px;text-decoration:none;
  background:rgba(20,12,30,.5);border:1px solid rgba(243,192,97,.5);border-radius:40px;padding:8px 18px;
  backdrop-filter:blur(3px);animation:cbtbob 2s ease-in-out infinite}
.cbt-jump:hover{border-color:#ffe3a0;color:#fff}
.cbt-jump .ar{font-size:14px;line-height:1}
@keyframes cbtbob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}

/* ---- header ---- */
.cbt-head{position:relative;text-align:center;margin-bottom:46px}
.cbt-head .ban{position:relative;display:inline-block;max-width:760px;width:94%}
.cbt-head .ban img{width:100%;height:auto;display:block;filter:drop-shadow(0 10px 30px rgba(0,0,0,.6))}
.cbt-head .ban .txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.cbt-head .k{font:700 clamp(11px,1.5vw,13px) 'Cinzel',serif;letter-spacing:5px;color:#ffe8b0;text-transform:uppercase}
.cbt-head h2{font:800 clamp(1.5rem,4.4vw,2.6rem) 'Chakra Petch',sans-serif;line-height:1;
  background:linear-gradient(180deg,#fff,#ffe8b0 45%,#f3c061 75%,#b07d1e);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 10px rgba(0,0,0,.6))}
.cbt-cd{margin-top:16px;display:inline-flex;gap:8px;align-items:stretch}
.cbt-cd .c{min-width:60px;padding:8px 6px 6px;border-radius:10px;background:rgba(18,10,28,.6);
  border:1px solid rgba(243,192,97,.4);text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.cbt-cd .n{font:700 clamp(1.3rem,3vw,1.9rem) 'Chakra Petch',sans-serif;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.cbt-cd .u{font:700 8px 'Cinzel',serif;letter-spacing:1px;color:#f3c061;text-transform:uppercase;margin-top:4px}
.cbt-period{margin-top:12px;font:600 clamp(12px,1.5vw,14px) 'Chakra Petch',sans-serif;color:#ffe6b0;text-shadow:0 2px 8px #000}
.cbt-status{margin-top:6px;font-size:12px;color:#c9bda5}
.cbt-status .live{color:#8fe3a0}.cbt-status .end{color:#ff9a7a}

/* ---- event block ---- */
.cbt-ev{margin:0 0 56px;position:relative}
.cbt-ev-h{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.cbt-ev-no{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  font:800 20px 'Chakra Petch',sans-serif;color:#2a1c05;background:linear-gradient(135deg,#ffe8b0,#f3c061 60%,#b07d1e);
  box-shadow:0 6px 18px rgba(243,192,97,.35)}
.cbt-ev-h .t{font:800 clamp(1.15rem,2.6vw,1.6rem) 'Chakra Petch',sans-serif;color:#ffe6b0;text-shadow:0 2px 10px #000}
.cbt-ev-h .t small{display:block;font:400 12px 'Bai Jamjuree',sans-serif;color:#b9ad98;letter-spacing:.3px;margin-top:2px}

/* NPC strip */
.cbt-npc{display:flex;align-items:center;gap:14px;background:linear-gradient(100deg,rgba(243,192,97,.1),rgba(243,192,97,.02));
  border:1px solid rgba(243,192,97,.25);border-radius:16px;padding:10px 18px 10px 10px;margin-bottom:22px}
.cbt-npc img{height:92px;width:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}
.cbt-npc .say b{color:#ffe6b0;font:700 15px 'Chakra Petch',sans-serif}
.cbt-npc .say p{margin-top:3px;font-size:13px;color:#cfc6d6;line-height:1.5}

/* ---- 3 การ์ดตีบวก ---- */
.cbt-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cbt-card{background:linear-gradient(180deg,rgba(26,16,40,.72),rgba(14,9,22,.78));border:1px solid rgba(243,192,97,.3);
  border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.cbt-card .altar{position:relative;padding:14px 10px 6px;text-align:center}
.cbt-card .altar .base{width:min(220px,68%);height:auto;filter:drop-shadow(0 8px 20px rgba(0,0,0,.5))}
.cbt-card .altar .item{position:absolute;left:50%;top:28%;transform:translate(-50%,-50%);
  width:62px;height:62px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(255,200,90,.85)) drop-shadow(0 2px 4px #000);
  image-rendering:auto}
.cbt-card .nm{font:800 clamp(1rem,1.5vw,1.18rem) 'Chakra Petch',sans-serif;color:#fff;text-align:center;padding:2px 10px 0}
.cbt-card .goal{text-align:center;margin:8px 10px 4px}
.cbt-card .goal .plus{font:800 1.5rem 'Chakra Petch',sans-serif;color:#ffd36a;text-shadow:0 0 14px rgba(255,180,60,.5)}
.cbt-card .goal .ok{font-size:13px;color:#8fe3a0;font-weight:700}
.cbt-card .limit{display:inline-block;margin:2px auto 0;font:700 11px 'Chakra Petch',sans-serif;letter-spacing:.3px;
  padding:3px 12px;border-radius:40px}
.cbt-card .limit.all{color:#8fe3a0;background:rgba(80,200,120,.12);border:1px solid rgba(120,220,150,.4)}
.cbt-card .limit.top{color:#ffd36a;background:rgba(243,192,97,.12);border:1px solid rgba(243,192,97,.45)}
.cbt-card .reward{display:flex;align-items:center;gap:9px;justify-content:center;margin:10px 10px 0;padding-top:10px;
  border-top:1px dashed rgba(243,192,97,.25)}
.cbt-card .reward img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(255,200,90,.6))}
.cbt-card .reward .rw b{color:#ffe6b0;font:700 13px 'Chakra Petch',sans-serif}
.cbt-card .reward .rw small{display:block;font-size:10.5px;color:#b9ad98;margin-top:1px}
.cbt-card .cnt{text-align:center;font-size:11px;color:#9b90a8;margin:8px 0 2px}
.cbt-card .cnt b{color:#ffd36a}

/* leaderboard list (ใช้ทั้งการ์ดและความดี) */
.cbt-board{margin-top:6px;padding:6px 8px 8px;max-height:280px;overflow-y:auto;border-top:1px solid rgba(255,255,255,.06)}
.cbt-board::-webkit-scrollbar{width:6px}.cbt-board::-webkit-scrollbar-thumb{background:rgba(243,192,97,.35);border-radius:3px}
.cbt-row{display:flex;align-items:center;gap:9px;padding:6px 6px;border-radius:10px}
.cbt-row+.cbt-row{margin-top:3px}
.cbt-row:nth-child(odd){background:rgba(255,255,255,.025)}
.cbt-row .rk{flex:none;width:26px;text-align:center;font:800 14px 'Chakra Petch',sans-serif;color:#7c8598;font-variant-numeric:tabular-nums}
.cbt-row.r1 .rk{color:#ffd76a}.cbt-row.r2 .rk{color:#d6dbe6}.cbt-row.r3 .rk{color:#f0a860}
.cbt-row .av{flex:none;width:34px;height:34px;border-radius:9px;overflow:hidden;background:#1a1226;border:1px solid rgba(243,192,97,.3);position:relative}
.cbt-row .av img{width:100%;height:100%;object-fit:cover}
.cbt-row .av .fac{position:absolute;right:-2px;bottom:-2px;width:9px;height:9px;border-radius:50%;border:1px solid #0a0714}
.cbt-row .av .fac.f1{background:#5aa9ff}.cbt-row .av .fac.f2{background:#ff6a6a}.cbt-row .av .fac.f0{background:#9aa1ad}
.cbt-row .id{flex:1;min-width:0}
.cbt-row .id .nm{font:700 13px 'Chakra Petch',sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbt-row .id .mt{font-size:10.5px;color:#a79cb4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cbt-row .rt{flex:none;text-align:right;font-size:10.5px;color:#cbb98f;line-height:1.3}
.cbt-row .rt .on{color:#8fe3a0}.cbt-row .rt .off{color:#7c7486}
.cbt-row .lv{color:#ffd36a;font-weight:700}
.cbt-empty{text-align:center;color:#8a7f97;font-size:12.5px;padding:22px 10px}
.cbt-wait{text-align:center;color:#ffd36a;font-size:12.5px;padding:22px 10px}

/* ---- กิจกรรมความดี ---- */
.cbt-virtue-wrap{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
.cbt-virtue-side{background:linear-gradient(180deg,rgba(26,16,40,.7),rgba(14,9,22,.75));border:1px solid rgba(243,192,97,.25);
  border-radius:18px;padding:16px;text-align:center}
.cbt-virtue-side .fire{width:84%;height:auto;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5))}
.cbt-virtue-side .tiers{margin-top:14px;text-align:left;display:flex;flex-direction:column;gap:8px}
.cbt-virtue-side .tier{display:flex;align-items:center;gap:10px;background:rgba(243,192,97,.07);border:1px solid rgba(243,192,97,.22);
  border-radius:12px;padding:8px 12px}
.cbt-virtue-side .tier img{width:34px;height:34px;object-fit:contain}
.cbt-virtue-side .tier b{color:#ffe6b0;font:700 13px 'Chakra Petch',sans-serif;display:block}
.cbt-virtue-side .tier small{font-size:11px;color:#b9ad98}
.cbt-virtue-board{background:linear-gradient(180deg,rgba(26,16,40,.6),rgba(14,9,22,.7));border:1px solid rgba(243,192,97,.25);
  border-radius:18px;padding:8px 10px}
.cbt-virtue-board .cbt-board{max-height:560px}
.cbt-tierhead{font:800 12px 'Chakra Petch',sans-serif;letter-spacing:1px;color:#ffd36a;text-transform:uppercase;
  padding:12px 8px 6px;position:sticky;top:0;background:linear-gradient(180deg,#140e24,rgba(20,14,36,.4));backdrop-filter:blur(2px)}
.cbt-row .wx{flex:none;font:800 14px 'Chakra Petch',sans-serif;color:#ffd36a;text-align:right}
.cbt-row .wx small{display:block;font:400 9px 'Bai Jamjuree';color:#9b90a8}

@media(max-width:860px){
  .cbt-cards{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .cbt-virtue-wrap{grid-template-columns:1fr}
  .cbt-virtue-side{max-width:460px;margin:0 auto}
}

/* ============ ดีไซน์แน่นแบบ SS1 (banner + pills + โพเดียม Top3 + ลิสต์) ============ */
.cbt-cnt{text-align:center;font-size:12px;color:#cbb98f;margin:2px 0 12px}
.cbt-cnt b{color:#ffd36a;font-weight:800}
.cbt-tierhead{font:800 12px 'Chakra Petch',sans-serif;letter-spacing:.5px;color:#ffd36a;
  padding:12px 6px 6px;margin-top:4px;border-top:1px dashed rgba(243,192,97,.3)}

/* hero banner */
.fe-hero{display:flex;gap:18px;align-items:center;margin-bottom:16px;padding:16px 18px;border-radius:18px;
  background:linear-gradient(120deg,rgba(40,24,66,.72),rgba(16,10,28,.8));border:1px solid rgba(243,192,97,.3);
  box-shadow:0 14px 40px rgba(0,0,0,.4)}
.fe-hero-img{flex:none;width:clamp(120px,15vw,168px);aspect-ratio:1;position:relative;display:grid;place-items:center}
.fe-hero-img img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 22px rgba(0,0,0,.5));position:relative;z-index:1}
.fe-hero-ray{position:absolute;inset:-10%;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(255,200,90,.3),transparent 62%);animation:feRay 5s ease-in-out infinite}
@keyframes feRay{0%,100%{opacity:.6;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
.fe-hero-txt{flex:1;min-width:0}
.fe-hero-title{font:800 clamp(1.1rem,2.4vw,1.5rem) 'Chakra Petch',sans-serif;color:#ffe6b0;text-shadow:0 2px 10px #000}
.fe-hero-sub{margin-top:5px;font-size:13px;color:#d6cbe0;line-height:1.55}
.fe-hero-sub b{color:#ffe6b0}
.fe-cond{margin-top:7px;font-size:12px;color:#cbd5e1}.fe-cond b{color:#fbbf24}
.fe-on{font-size:10px;font-weight:800;color:#6fe39a}
.lf-lv{font-size:10px;color:#a79cb4;margin-left:5px}

/* tiers */
.ue-tiers{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.ue-tier{padding:8px 11px;border-radius:10px;background:rgba(255,255,255,.04);border-left:3px solid #64748b}
.ue-tier.ta{border-left-color:#fbbf24}.ue-tier.tb{border-left-color:#f87171}.ue-tier.tc{border-left-color:#a855f7}
.ue-tier-h{font-size:12.5px;font-weight:800;color:#fde68a}
.ue-tier.tb .ue-tier-h{color:#fca5a5}.ue-tier.tc .ue-tier-h{color:#d8b4fe}
.ue-tier-h span{font-size:10.5px;font-weight:700;color:#0b0f1a;background:#fbbf24;padding:1px 8px;border-radius:20px;margin-left:5px}
.ue-tier.tb .ue-tier-h span{background:#f87171}.ue-tier-rw{font-size:11.5px;color:#cbd5e1;margin-top:3px;line-height:1.4}
.ue-empty{text-align:center;color:#8a7f97;font-size:13px;padding:26px 14px}

/* pills */
.ue-pills{display:flex;gap:7px;margin:2px 0 16px;flex-wrap:wrap}
.ue-pill{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;
  font-family:'Chakra Petch',sans-serif;cursor:pointer;font-size:12.5px;font-weight:700;color:#b9ad98;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);padding:10px 8px;border-radius:12px;transition:.18s}
.ue-pill b{flex-shrink:0;min-width:18px;text-align:center;font-size:11px;font-weight:900;color:#0b0f1a;background:#64748b;border-radius:20px;padding:1px 6px}
.ue-pill.on.ca{color:#0b0f1a;background:linear-gradient(135deg,#fde047,#f59e0b);border-color:transparent;box-shadow:0 0 16px rgba(251,191,36,.45)}
.ue-pill.on.cb{color:#fff;background:linear-gradient(135deg,#f87171,#dc2626);border-color:transparent;box-shadow:0 0 16px rgba(239,68,68,.45)}
.ue-pill.on.cc{color:#fff;background:linear-gradient(135deg,#c084fc,#7c3aed);border-color:transparent;box-shadow:0 0 16px rgba(168,85,247,.45)}
.ue-pill.on b{background:rgba(0,0,0,.28);color:#fff}

/* โพเดียม Top3 */
.ue-podw{display:flex;align-items:flex-end;justify-content:center;gap:10px;margin:4px 0 18px;position:relative}
.ue-pod{flex:1;max-width:33%;min-width:0;text-align:center;padding:12px 6px 10px;border-radius:14px;z-index:1;overflow:visible;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);position:relative;
  animation:uePop .5s cubic-bezier(.2,.85,.3,1) both;animation-delay:calc(var(--o,0)*110ms)}
.ue-pod.p1{padding-top:16px;border-color:rgba(251,191,36,.5);background:linear-gradient(180deg,rgba(251,191,36,.12),rgba(0,0,0,.15));box-shadow:0 0 22px rgba(251,191,36,.22)}
.ue-pod.p2{border-color:rgba(203,213,225,.35)}.ue-pod.p3{border-color:rgba(217,119,52,.4)}
.ue-pod-medal{font-size:22px;line-height:1;position:relative;z-index:1}
.ue-pod.p1 .ue-pod-medal{font-size:28px;filter:drop-shadow(0 0 8px rgba(251,191,36,.7));animation:ueBob 2.4s ease-in-out infinite}
.ue-pod-av{width:52px;height:52px;margin:5px auto 4px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.2);
  background:#1a1226;display:flex;align-items:center;justify-content:center;font-size:24px;position:relative;z-index:1}
.ue-pod.p1 .ue-pod-av{width:68px;height:68px;border-color:#fde047;box-shadow:0 0 18px rgba(251,191,36,.55);animation:ueAvaPulse 2.6s ease-in-out infinite}
.ue-pod-av img{width:100%;height:100%;object-fit:cover}
.ue-pod-av.fac1{border-color:#3b82f6}.ue-pod-av.fac2{border-color:#ef4444}
.ue-pod-nm{font-size:12.5px;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;position:relative;z-index:1}
.ue-pod-lv{font-size:10.5px;color:#a79cb4;margin-top:1px;position:relative;z-index:1}
.ue-pod-val{margin-top:6px;font-size:19px;font-weight:900;color:#f87171;line-height:1;position:relative;z-index:1}
.ue-pod-val.ok{color:#6fe39a}.ue-pod.p1 .ue-pod-val{font-size:23px;animation:ueValGlow 2s ease-in-out infinite}
.ue-pod-val small{font-size:9.5px;color:#9b90a8;font-weight:700;margin-left:2px}
.ue-pod-sub{font-size:10px;color:#a79cb4;margin-top:4px;font-weight:600;line-height:1.4;position:relative;z-index:1}
.ue-pod-glow{display:none}
.ue-pod.p1 .ue-pod-glow{display:block;position:absolute;top:38px;left:50%;width:96px;height:96px;transform:translateX(-50%);
  border-radius:50%;z-index:0;pointer-events:none;filter:blur(1px);opacity:.95;
  background:conic-gradient(from 0deg,#fde047,#f59e0b,#dc2626,#a855f7,#38bdf8,#fde047);
  -webkit-mask:radial-gradient(circle,transparent 30px,#000 33px,#000 45px,transparent 48px);
  mask:radial-gradient(circle,transparent 30px,#000 33px,#000 45px,transparent 48px);animation:ueGlowSpin 4.5s linear infinite}

/* ลิสต์อันดับ 4+ */
.ue-clist{display:flex;flex-direction:column;gap:5px}
.ue-crow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;
  background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.05);animation:ueSlide .42s ease both;animation-delay:calc(var(--i,0)*35ms)}
.ue-crow:hover{border-color:rgba(251,191,36,.35);background:rgba(251,191,36,.05);transition:.2s}
.ue-crk{width:30px;text-align:center;font-size:12px;font-weight:800;color:#7c8598;flex-shrink:0}
.ue-cav{width:34px;height:34px;border-radius:50%;overflow:hidden;border:1.5px solid rgba(255,255,255,.15);
  background:#1a1226;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.ue-cav img{width:100%;height:100%;object-fit:cover}.ue-cav.fac1{border-color:#3b82f6}.ue-cav.fac2{border-color:#ef4444}
.ue-cmid{flex:1;min-width:0}.ue-cnm{font-size:12.5px;font-weight:700;color:#fff}
.ue-cnm .fe-on{margin-left:4px}.ue-csub{font-size:10.5px;color:#a79cb4;margin-top:2px;line-height:1.4}
.ue-cval{text-align:right;flex-shrink:0;font-size:16px;font-weight:900;color:#f87171}.ue-cval.ok{color:#6fe39a}
.ue-cval small{font-size:9px;color:#9b90a8;font-weight:600;margin-left:3px}

/* sparks + anim */
.ue-sparks{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.ue-spark{position:absolute;bottom:-8px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,#fff8dc 0%,#fde047 40%,#f97316 100%);box-shadow:0 0 6px #f59e0b;
  animation-name:emberRise;animation-timing-function:linear;animation-iteration-count:infinite}
@keyframes emberRise{0%{transform:translateY(0) scale(1);opacity:0}12%{opacity:1}78%{opacity:.9}100%{transform:translateY(-150px) scale(.25);opacity:0}}
@keyframes uePop{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
@keyframes ueSlide{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes ueGlowSpin{from{transform:translateX(-50%) rotate(0)}to{transform:translateX(-50%) rotate(360deg)}}
@keyframes ueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes ueValGlow{0%,100%{text-shadow:0 0 8px rgba(251,191,36,.35)}50%{text-shadow:0 0 20px rgba(251,191,36,.9)}}
@keyframes ueAvaPulse{0%,100%{box-shadow:0 0 16px rgba(251,191,36,.5)}50%{box-shadow:0 0 30px rgba(251,191,36,.9)}}
@media(max-width:640px){
  .fe-hero{flex-direction:column;text-align:center}.fe-hero-img{width:130px}
  .ue-pod-av{width:44px;height:44px}.ue-pod.p1 .ue-pod-av{width:56px;height:56px}
  .ue-pod-val{font-size:16px}.ue-pod.p1 .ue-pod-val{font-size:20px}
}