/* ===== SKILL Glassmorphism Blue — Thick Real Glass =====
   อิงสเปกคุณรัตน์ · เงากระจกหนา + ลำแสงเฉียง + glow
   ⚡ GPU-aware: blur หนักเฉพาะพาเนลใหญ่ · การ์ดเล็ก/240 lesson = gloss+ลำแสง (ไม่ blur)
   fixed bg ใช้ ::before layer แทน attachment:fixed · ไม่แตะ logic
   ====================================================== */
:root{
  --glass-bg:rgba(255,255,255,0.09);
  --glass-bg-hover:rgba(255,255,255,0.14);
  --glass-border:rgba(190,225,255,0.48);
  --glass-shadow:rgba(0,12,38,0.5);
  --glass-blue-glow:rgba(65,198,255,0.52);
  --glass-radius:22px;
  --bounce:cubic-bezier(.34,1.56,.64,1);
  --glass-fill:linear-gradient(145deg,rgba(135,196,255,.17) 0%,rgba(18,46,91,.28) 38%,rgba(8,27,61,.34) 72%,rgba(255,145,127,.10) 100%);
  --glass-fill-hover:linear-gradient(145deg,rgba(163,215,255,.22) 0%,rgba(28,65,118,.34) 42%,rgba(12,35,76,.38) 75%,rgba(255,161,138,.14) 100%);
  --glass-shadow-set:0 24px 65px var(--glass-shadow),-8px -8px 32px rgba(59,194,255,.14),
                     8px 12px 34px rgba(255,124,104,.10),inset 0 2px 1px rgba(255,255,255,.72),
                     inset 2px 0 1px rgba(111,210,255,.34),inset -1px -2px 1px rgba(255,174,151,.22),
                     inset 0 0 0 1px rgba(255,255,255,.10);
}

/* ---------- พื้นหลังฟ้า (มีสีให้ blur เห็น) · fixed layer กัน GPU ค้าง ---------- */
body{min-height:100vh;color:#fff;
  background:linear-gradient(135deg,#07162f 0%,#0b2a57 45%,#123f7c 100%)}
/* พื้นหลังภาพ (fixed layer · ไม่ใช้ attachment:fixed) + ฟิล์มฟ้าเข้มให้ตัวอักษร/กระจกอ่านชัด
   เปลี่ยนตามหน้า: hub=London · แต่ละทักษะใช้ภาพ journey เก่า (ดึงมาใช้ร่วมกัน) */
:root{--bg-overlay:linear-gradient(135deg,rgba(4,17,39,.52),rgba(7,35,76,.38) 45%,rgba(12,55,108,.28))}
body::before{content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;transition:background-image .5s ease;background:
  var(--bg-overlay),url('../img/ielts_bg.jpg') center center/cover no-repeat,
  linear-gradient(135deg,#07162f,#0b2a57,#123f7c)}
body::after{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  radial-gradient(42% 38% at 12% 5%,rgba(63,204,255,.22),transparent 72%),
  radial-gradient(38% 34% at 92% 88%,rgba(255,130,101,.18),transparent 72%)}
/* ภาพต่อหน้าทักษะ (JS เติม class sk-* ที่ body) */
body.sk-reading::before  {background:var(--bg-overlay),url('../img/bg_reading.jpg') center/cover no-repeat,#0b2a57}
body.sk-listening::before{background:var(--bg-overlay),url('../img/bg_listening.jpg') center/cover no-repeat,#0b2a57}
body.sk-writing::before  {background:var(--bg-overlay),url('../img/bg_writing.jpg') center/cover no-repeat,#0b2a57}
body.sk-speaking::before {background:var(--bg-overlay),url('../img/bg_speaking.jpg') center/cover no-repeat,#0b2a57}
body.page-vocab::before  {background:var(--bg-overlay),url('../img/bg_vocab.jpg') center/cover no-repeat,#0b2a57}

/* ============================================================
   .glass-panel — กระจกหนา (reusable · ใช้ได้ทุกหน้า)
   ============================================================ */
.glass-panel,.glass-thick{position:relative;overflow:hidden;border-radius:var(--glass-radius);
  background:var(--glass-fill);border:1px solid var(--glass-border);
  backdrop-filter:blur(22px) saturate(170%) contrast(115%);
  -webkit-backdrop-filter:blur(22px) saturate(170%) contrast(115%);
  box-shadow:var(--glass-shadow-set);isolation:isolate;
  transition:transform .35s var(--bounce),background .3s ease,box-shadow .3s ease,border-color .3s ease}
.glass-panel::before,.glass-thick::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(120deg,rgba(255,255,255,0.45) 0%,rgba(255,255,255,0.18) 18%,transparent 38%);
  opacity:.55;pointer-events:none}
.glass-panel::after,.glass-thick::after{content:"";position:absolute;top:-40%;left:-70%;width:70%;height:180%;z-index:-1;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,0.36) 45%,transparent 70%);
  transform:rotate(18deg);opacity:.28;pointer-events:none}
.glass-panel:hover,.glass-thick:hover{background:var(--glass-fill-hover);
  border-color:rgba(255,255,255,0.48);transform:translateY(-3px);
  box-shadow:0 24px 70px rgba(0,20,60,0.55),0 0 36px var(--glass-blue-glow),
    inset 0 1px 2px rgba(255,255,255,0.70),inset 0 -1px 1px rgba(255,255,255,0.18)}

/* ตารางกระจก (สำหรับหน้าอื่นที่มีตาราง) */
.glass-table{width:100%;border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:22px;
  background:rgba(255,255,255,0.10);backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,0.28);box-shadow:0 18px 55px rgba(0,20,60,0.38),inset 0 1px 1px rgba(255,255,255,0.45)}
.glass-table th{background:rgba(255,255,255,0.18);color:#fff;font-weight:700;text-align:left;padding:16px;border-bottom:1px solid rgba(255,255,255,0.22)}
.glass-table td{padding:16px;color:rgba(255,255,255,0.88);border-bottom:1px solid rgba(255,255,255,0.12)}
.glass-table tr:hover td{background:rgba(255,255,255,0.12)}

/* ปุ่มกระจก */
.glass-button{border:1px solid rgba(255,255,255,0.36);border-radius:16px;padding:12px 22px;color:#fff;font-weight:700;
  background:linear-gradient(135deg,rgba(59,130,246,0.85),rgba(14,165,233,0.55));
  box-shadow:0 12px 30px rgba(37,99,235,0.35),inset 0 1px 1px rgba(255,255,255,0.55);cursor:pointer;
  transition:transform .3s var(--bounce),box-shadow .3s ease}
.glass-button:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(37,99,235,0.50),0 0 26px rgba(56,189,248,0.42),inset 0 1px 1px rgba(255,255,255,0.70)}

.glass-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.glass-grid{grid-template-columns:1fr}}

/* ===== แยกหน้าทักษะ: ซ่อนบันไดบน hub · back bar ===== */
.skillsec{display:none}              /* default ซ่อน · JS แสดงเฉพาะหน้าที่เลือก */
#backbar{display:none;align-items:center;gap:.5rem;width:max-content;margin-bottom:1rem;
  text-decoration:none;color:#fff;font-family:'Kanit',sans-serif;font-weight:700;font-size:.9rem;
  background:linear-gradient(135deg,rgba(59,130,246,.85),rgba(14,165,233,.55));
  border:1px solid rgba(255,255,255,0.36);border-radius:14px;padding:.55rem 1.2rem;
  box-shadow:0 10px 26px rgba(37,99,235,.35),inset 0 1px 1px rgba(255,255,255,.55);
  transition:transform .3s var(--bounce),box-shadow .3s ease}
#backbar:hover{transform:translateX(-3px);box-shadow:0 14px 32px rgba(37,99,235,.5),inset 0 1px 1px rgba(255,255,255,.7)}

/* ===== สถานะบันไดล็อก ===== */
.tag.t-lock{background:rgba(148,163,184,.28);color:#cbd5e1}
.tag.t-exam{background:linear-gradient(135deg,rgba(251,191,36,.35),rgba(245,158,11,.25));color:#fde68a;border:1px solid rgba(251,191,36,.45)}
/* บทที่ล็อก = จาง เทาๆ กดไม่ได้ */
.lv.locked{opacity:.62;filter:grayscale(.45);cursor:not-allowed;position:relative}
.lv.locked::after{content:"🔒";position:absolute;top:10px;right:12px;font-size:1.25rem;z-index:2;opacity:.9;
  background:none;width:auto;height:auto;transform:none;left:auto}
.lv.locked .badge{filter:grayscale(.4)}
.lockmsg{margin-top:.4rem;font-size:.7rem;color:#94a3b8;font-weight:600}
/* บทที่ผ่านแล้ว = ขอบเขียวเรืองแสง */
.lv.done{border-color:rgba(52,211,153,.6)!important;box-shadow:0 8px 26px rgba(0,20,60,.3),0 0 18px rgba(52,211,153,.25),inset 0 1px 1px rgba(255,255,255,.45)!important}
.examnote{margin-top:.35rem;font-size:.68rem;color:#fcd34d;font-weight:700}
.undobtn{margin-top:.35rem;margin-left:.4rem;background:rgba(255,255,255,.1);border:1px solid var(--glass-border);
  color:#cbd5e1;border-radius:8px;padding:.2rem .5rem;font-size:.62rem;font-family:Kanit;cursor:pointer}
.donebtn{margin-top:.4rem;background:linear-gradient(135deg,rgba(52,211,153,.3),rgba(16,185,129,.2))!important;
  border:1px solid rgba(52,211,153,.45)!important;color:#a7f3d0!important;border-radius:9px;padding:.3rem .7rem;
  font-size:.7rem;font-family:Kanit;font-weight:700;cursor:pointer;transition:transform .25s var(--bounce)}
.donebtn:hover{transform:translateY(-1px) scale(1.03)}

/* ===== Accordion กระจกซ้อนเรียงข้าง (โชว์แถบสี · hover บานเต็ม) ===== */
.lvl-group{margin-bottom:1.7rem}
.lvl-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}
.lvl-chip{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;color:#fff;
  font-family:'Kanit',sans-serif;font-weight:800;font-size:.9rem;box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 6px 16px rgba(0,20,60,.3)}
.lvl-name{font-family:'Kanit',sans-serif;font-weight:800;font-size:1.02rem;color:#fff}
.lvl-hint{margin-left:auto;font-size:.72rem;color:rgba(255,255,255,.65)}

.glassrow{display:flex;gap:0;align-items:stretch;overflow-x:auto;overflow-y:hidden;padding:8px 4px 16px 0}
.glassrow::-webkit-scrollbar{height:8px}
.glassrow::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:8px}
/* การ์ด = แผ่นกระจก ยุบเหลือแถบสี · ซ้อนทับกัน */
.glassrow .lv{flex:0 0 74px;width:74px;min-width:74px;height:158px;overflow:hidden;border-radius:18px;
  margin-left:-20px;align-items:stretch;
  transition:flex-basis .45s var(--bounce),width .45s var(--bounce),min-width .45s var(--bounce),
             margin-left .35s var(--bounce),transform .35s var(--bounce),box-shadow .3s ease}
.glassrow .lv:first-child{margin-left:0}
.glassrow .lv .badge{flex:0 0 58px;width:58px;height:auto;border-radius:16px}
.glassrow .lv .body{opacity:0;min-width:286px;padding-left:.5rem;transition:opacity .3s ease .12s}
/* hover/focus → บานเต็มบาน โชว์ข้อมูล + ยกขึ้นมาหน้า */
.glassrow .lv:hover,.glassrow .lv:focus-within{flex-basis:368px;width:368px;min-width:368px;margin-left:0;
  z-index:10;transform:translateY(-5px);
  box-shadow:0 26px 70px rgba(0,20,60,.6),0 0 40px var(--glass-blue-glow),inset 0 1px 2px rgba(255,255,255,.7)}
.glassrow .lv:hover .body,.glassrow .lv:focus-within .body{opacity:1}
.glassrow .lv:hover+.lv,.glassrow .lv:focus-within+.lv{margin-left:0}
/* แถบสีตอนยุบ มีไฮไลต์ขอบให้ดูเป็นกระจกซ้อน */
.glassrow .lv::after{content:"";position:absolute;top:0;right:0;width:1px;height:100%;background:rgba(255,255,255,.22)}
.glassrow .lv.locked::after{content:"🔒";top:8px;left:50%;right:auto;transform:translateX(-50%);width:auto;height:auto;font-size:1.25rem;background:none}

/* มือถือ/จอเล็ก: ปิด accordion → แสดงเต็มทุกใบ (เรียงลง) */
@media(max-width:760px){
  .glassrow{flex-wrap:wrap;overflow:visible;gap:.7rem}
  .glassrow .lv{flex:1 1 100%;width:auto;min-width:0;height:auto;margin-left:0;border-radius:16px}
  .glassrow .lv .body{opacity:1;min-width:0}
  .glassrow .lv::after{display:none}
  .lvl-hint{display:none}
}

/* ============================================================
   APPLY → คลาสจริงในหน้า ielts.html (override inline)
   ============================================================ */

/* ---- พาเนลใหญ่ (มีไม่กี่ชิ้น) = กระจกหนา blur จริง + ลำแสง ---- */
.hero .left,.pcard,.card.panel,.panel,.vipp,.how{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--glass-fill)!important;border:1px solid var(--glass-border)!important;border-radius:var(--glass-radius)!important;
  backdrop-filter:blur(14px) saturate(180%) contrast(108%);-webkit-backdrop-filter:blur(14px) saturate(180%) contrast(108%);
  box-shadow:var(--glass-shadow-set)!important;
  transition:transform .35s var(--bounce),box-shadow .3s ease,border-color .3s ease,background .3s ease!important}
.hero .left{background:
  radial-gradient(85% 120% at 2% 0,rgba(105,207,255,.27),transparent 55%),
  radial-gradient(75% 95% at 100% 100%,rgba(255,137,112,.17),transparent 58%),
  linear-gradient(145deg,rgba(104,173,255,.17),rgba(8,35,78,.22) 52%,rgba(6,24,54,.30))!important}

/* ---- การ์ดเล็ก + lesson card 240 = กระจก gloss+ลำแสง (ไม่ blur → ลื่น) ---- */
.scard,.reco,.statrow .s,.lv{
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--glass-fill)!important;border:1px solid var(--glass-border)!important;
  box-shadow:var(--glass-shadow-set)!important;
  transition:transform .35s var(--bounce),box-shadow .3s ease,border-color .3s ease,background .3s ease!important}
.scard{border-radius:var(--glass-radius)!important}
.reco{border-radius:18px!important}
.lv{border-radius:16px!important;box-shadow:0 10px 30px rgba(0,20,60,.34),inset 0 1px 1px rgba(255,255,255,.5),inset 0 -1px 1px rgba(255,255,255,.1)!important}

/* gloss ด้านบน + ลำแสงเฉียง (ทุกการ์ด) */
.hero .left::before,.pcard::before,.panel::before,.vipp::before,.how::before,
.scard::before,.reco::before,.statrow .s::before,.lv::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(120deg,rgba(255,255,255,.68) 0,rgba(167,226,255,.24) 12%,transparent 32%),
    linear-gradient(180deg,rgba(255,255,255,.18),transparent 24%,transparent 78%,rgba(255,168,145,.12));
  opacity:.82}
.hero .left::after,.pcard::after,.panel::after,.vipp::after,.how::after,
.scard::after,.reco::after,.lv::after{
  content:"";position:absolute;top:-40%;left:-75%;width:75%;height:185%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(196,234,255,.48) 45%,transparent 72%);
  transform:rotate(18deg);opacity:.34}

/* ---- HOVER เด้งทุกการ์ดสม่ำเสมอ + glow ฟ้า ---- */
.scard:hover,.reco:hover,.lv.live:hover,.hero .left:hover,.panel:hover,.pcard:hover,.vipp:hover,.statrow .s:hover{
  background:var(--glass-fill-hover)!important;
  border-color:rgba(255,255,255,0.48)!important;transform:translateY(-5px)!important;
  box-shadow:0 24px 70px rgba(0,20,60,0.55),0 0 36px var(--glass-blue-glow),
    inset 0 1px 2px rgba(255,255,255,0.70),inset 0 -1px 1px rgba(255,255,255,0.18)!important}

/* ---- sidebar / search = กระจกหนา blur (ไม่ใส่ ::after กัน overflow ตัด scroll) ---- */
.sidebar{background:linear-gradient(180deg,rgba(6,28,66,.40),rgba(5,22,52,.56))!important;
  border-right:1px solid rgba(151,218,255,.30)!important;
  box-shadow:inset -1px 0 rgba(255,255,255,.12),12px 0 38px rgba(0,15,45,.24);
  backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%)}
.topbar .search,.search{background:var(--glass-fill)!important;border:1px solid var(--glass-border)!important;border-radius:999px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.48),0 10px 28px rgba(0,18,52,.22);
  backdrop-filter:blur(12px) saturate(175%);-webkit-backdrop-filter:blur(12px) saturate(175%)}

/* ---- ปุ่มหลัก = glass-button ---- */
.hero .cta,.vipbtn,.sb-vip a,#gate button{
  background:linear-gradient(135deg,rgba(59,130,246,0.9),rgba(14,165,233,0.6))!important;
  border:1px solid rgba(255,255,255,0.36)!important;
  box-shadow:0 12px 30px rgba(37,99,235,0.4),inset 0 1px 1px rgba(255,255,255,0.55)!important;
  transition:transform .3s var(--bounce),box-shadow .3s ease!important}
.hero .cta:hover,.vipbtn:hover,.sb-vip a:hover{transform:translateY(-2px) scale(1.02)!important;
  box-shadow:0 18px 42px rgba(37,99,235,0.55),0 0 28px rgba(56,189,248,0.45),inset 0 1px 1px rgba(255,255,255,0.7)!important}

/* roadmap dot = กระจกกลมเงา */
.station .dot{background:radial-gradient(120% 120% at 30% 25%,rgba(255,255,255,.4),rgba(255,255,255,.08) 60%)!important;
  border:1px solid rgba(255,255,255,0.34)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,0.6),0 6px 16px rgba(0,20,60,.3)!important}
.station.done .dot{background:linear-gradient(135deg,#3b82f6,#60a5fa)!important;border-color:rgba(255,255,255,.55)!important}

/* chip = กระจกบาง */
.chip{background:rgba(255,255,255,0.12)!important;border:1px solid var(--glass-border)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4)!important}

/* gate */
#gate{background:linear-gradient(135deg,rgba(7,22,47,.94),rgba(18,63,124,.92))!important}
#gate input{background:rgba(255,255,255,0.12)!important;border:1px solid var(--glass-border)!important}
.scard .more,.go{filter:brightness(1.25)}

/* ============================================================
   RESPONSIVE + PERFORMANCE FALLBACK
   ============================================================ */
@media(max-width:760px){
  .hero .left,.pcard,.panel,.vipp,.how,.sidebar,.search{backdrop-filter:blur(10px) saturate(150%);-webkit-backdrop-filter:blur(10px) saturate(150%)}
}
@media(prefers-reduced-motion:reduce){
  .glass-panel,.scard,.reco,.lv,.glass-button,.hero .cta,.panel,.pcard,.vipp{transition:none!important}
  .scard:hover,.reco:hover,.lv.live:hover,.panel:hover,.pcard:hover,.vipp:hover{transform:none!important}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .sidebar{background:rgba(12,22,46,.96)!important}
  .hero .left,.pcard,.panel,.vipp,.how,.glass-panel,.glass-table{background:rgba(35,55,105,.9)!important}
}

/* ===== generic .glass (หน้า vocab ฯลฯ) = กระจกฟ้า + gloss + ลำแสง ===== */
.glass{position:relative;overflow:hidden;isolation:isolate;
  background:var(--glass-fill)!important;border:1px solid var(--glass-border)!important;
  box-shadow:var(--glass-shadow-set)!important}
.glass::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.2) 16%,transparent 40%);opacity:.85}
.glass::after{content:"";position:absolute;top:-40%;left:-75%;width:75%;height:185%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.5) 45%,transparent 72%);transform:rotate(18deg);opacity:.4}
/* ซ่อน overlay ตกแต่งเก่า (เช่น #drift ม่วงในหน้า vocab) */
#drift,#veil{display:none!important}
/* retint accent ม่วง→ฟ้า (แท็บ vocab) */
.tab.on{background:linear-gradient(135deg,rgba(59,130,246,.5),rgba(96,165,250,.35))!important;
  box-shadow:0 2px 12px rgba(59,130,246,.4)!important}

/* ===== หน้า vocab: กระจก + เด้ง ทุก element (scoped page-vocab) ===== */
/* การ์ด/กล่อง = เด้ง + เรืองฟ้า */
body.page-vocab .word,body.page-vocab .setword,body.page-vocab .stat-card,
body.page-vocab .empty,body.page-vocab .box-bars,body.page-vocab .add-card{
  transition:transform .32s var(--bounce),box-shadow .3s ease,background .25s ease!important}
body.page-vocab .word:hover,body.page-vocab .setword:hover,body.page-vocab .stat-card:hover{
  transform:translateY(-5px) scale(1.015)!important;
  box-shadow:0 18px 44px rgba(0,20,60,.5),0 0 26px var(--glass-blue-glow),inset 0 1.5px 0 rgba(255,255,255,.7)!important}
/* tabs = กระจก + เด้ง */
body.page-vocab .tab{background:var(--glass-bg)!important;border:1px solid var(--glass-border)!important;
  color:#fff!important;border-radius:12px;transition:transform .3s var(--bounce),background .25s,box-shadow .25s!important}
body.page-vocab .tab:hover{transform:translateY(-2px) scale(1.03)!important;background:var(--glass-bg-hover)!important}
body.page-vocab .tab.on{background:linear-gradient(135deg,#3b82f6,#60a5fa)!important;border-color:rgba(255,255,255,.5)!important;
  box-shadow:0 8px 22px rgba(59,130,246,.45),inset 0 1px 1px rgba(255,255,255,.5)!important}
/* ปุ่ม/ลูกศร = sheen กระจก + เด้ง */
body.page-vocab .btn,body.page-vocab .add-all,body.page-vocab .addbtn,body.page-vocab .emptybtn,
body.page-vocab .mode-btn,body.page-vocab .setnav-btn,body.page-vocab .sayb,body.page-vocab .tcar-arrow,
body.page-vocab .fc-reveal-btn,body.page-vocab .delb{
  transition:transform .28s var(--bounce),box-shadow .3s ease,background .25s!important}
body.page-vocab .btn:hover,body.page-vocab .add-all:hover,body.page-vocab .addbtn.add:hover,
body.page-vocab .emptybtn:hover,body.page-vocab .mode-btn:hover,body.page-vocab .setnav-btn:hover,
body.page-vocab .sayb:hover,body.page-vocab .tcar-arrow:hover,body.page-vocab .fc-reveal-btn:hover{
  transform:translateY(-2px) scale(1.06)!important}
body.page-vocab .sayb{background:rgba(255,255,255,.12)!important;border:1px solid var(--glass-border)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4)!important}
body.page-vocab .addbtn.add{background:linear-gradient(135deg,rgba(52,211,153,.42),rgba(16,185,129,.3))!important;
  border:1px solid rgba(52,211,153,.5)!important;color:#a7f3d0!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.4)!important}
body.page-vocab .add-all{background:linear-gradient(135deg,rgba(59,130,246,.55),rgba(96,165,250,.35))!important;
  border:1px solid rgba(255,255,255,.3)!important;color:#fff!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.4)!important}
/* topic chip เด้งแรงขึ้น */
body.page-vocab .topic-chip:hover{transform:scale(1.12) translateY(-3px)!important}

/* ===== Topic carousel (ใช้ร่วม vocab + ielts_vocab) ===== */
.topic-carousel{display:flex;align-items:center;gap:.5rem;margin:.6rem 0 1rem}
.tcar-arrow{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.10);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;font-family:Kanit;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4),0 6px 16px rgba(0,20,60,.3);transition:transform .2s var(--bounce),background .2s}
.tcar-arrow:hover{background:rgba(255,255,255,.18);transform:scale(1.08)}
.topic-band{flex:1;display:flex;gap:.6rem;overflow-x:auto;scroll-snap-type:x proximity;padding:.5rem .2rem;
  -ms-overflow-style:none;scrollbar-width:none;flex-wrap:nowrap;justify-content:flex-start}
.topic-band::-webkit-scrollbar{display:none}
.topic-chip{scroll-snap-align:center;flex:0 0 auto;min-width:108px;display:flex;flex-direction:column;align-items:center;
  gap:.22rem;padding:.7rem .9rem;border-radius:18px;cursor:pointer;color:#fff;font-family:Kanit;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);opacity:.62;transform:scale(.92);
  transition:transform .3s var(--bounce),opacity .25s,background .25s,box-shadow .25s;box-shadow:inset 0 1px 1px rgba(255,255,255,.25)}
.topic-chip:hover{opacity:.92;transform:scale(1.05)}
.topic-chip.active{opacity:1;transform:scale(1.1);background:linear-gradient(135deg,#3b82f6,#60a5fa);
  border-color:#fff;box-shadow:0 10px 28px rgba(59,130,246,.5),inset 0 1px 1px rgba(255,255,255,.5)}
.topic-chip .tc-emoji{font-size:1.8rem;line-height:1}
.topic-chip .tc-label{font-size:.8rem;font-weight:800;white-space:nowrap}
.topic-chip .tc-count{font-size:.64rem;opacity:.85;font-weight:600}

/* ===== ielts_vocab page-vocab extras ===== */
body.page-vocab #bgwrap{display:none!important}
body.page-vocab .card,body.page-vocab .stat{transition:transform .32s var(--bounce),box-shadow .3s ease,background .25s!important}
body.page-vocab .card:hover,body.page-vocab .stat:hover{transform:translateY(-5px) scale(1.015)!important;
  box-shadow:0 18px 44px rgba(0,20,60,.5),0 0 26px var(--glass-blue-glow),inset 0 1.5px 0 rgba(255,255,255,.7)!important}
body.page-vocab .stat{background:var(--glass-fill)!important;border:1px solid var(--glass-border)!important}
body.page-vocab .spk,body.page-vocab .addall{transition:transform .28s var(--bounce),box-shadow .3s,background .25s!important}
body.page-vocab .spk:hover,body.page-vocab .addall:hover{transform:translateY(-2px) scale(1.07)!important}
body.page-vocab .spk{background:rgba(255,255,255,.14)!important;border:1px solid var(--glass-border)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.4)!important}
body.page-vocab .addall{background:linear-gradient(135deg,rgba(52,211,153,.5),rgba(16,185,129,.32))!important;
  border:1px solid rgba(52,211,153,.55)!important;color:#fff!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.4)!important}
body.page-vocab .addbtn:hover{transform:translateY(-2px) scale(1.04)!important}

/* ===== หน้า Speaking Practice ===== */
body.page-speak::before{background:var(--bg-overlay),url('../img/bg_speaking.jpg') center/cover no-repeat,#0b2a57}
body.page-speak #bgwrap{display:none!important}

/* ===== หน้า Writing Practice ===== */
body.page-write::before{background:var(--bg-overlay),url('../img/bg_writing.jpg') center/cover no-repeat,#0b2a57}
body.page-write #bgwrap{display:none!important}

/* ===== หน้า Reading Practice ===== */
body.page-read::before{background:var(--bg-overlay),url('../img/bg_reading.jpg') center/cover no-repeat,#0b2a57}
body.page-read #bgwrap{display:none!important}

/* ===== หน้า Listening Practice ===== */
body.page-listen::before{background:var(--bg-overlay),url('../img/bg_listening.jpg') center/cover no-repeat,#0b2a57}
body.page-listen #bgwrap{display:none!important}

/* ===== หน้า Full Mock Test ===== */
body.page-mock::before{background:var(--bg-overlay),url('../img/ielts_bg.jpg') center/cover no-repeat,#0b2a57}
body.page-mock #bgwrap{display:none!important}

/* ===== หน้า Study Plan ===== */
body.page-plan::before{background:var(--bg-overlay),url('../img/ielts_bg.jpg') center/cover no-repeat,#0b2a57}
body.page-plan #bgwrap{display:none!important}