/* =====================================================================
   ZZAX AI Guide — Reader theme (ชั้นดีไซน์ทับ Tailwind build)
   ออกแบบด้วยแนวทาง ui-ux-pro-max: "Vibrant & Block-based" + ระบบจูงใจแบบเกม
   - Tailwind v4 อยู่ใน @layer ทั้งหมด → CSS ไฟล์นี้ (ไม่มี layer) ชนะเสมอ
   - ไม่ต้องแก้ class ในเนื้อหา 37 บท · ถอดออกได้ด้วยการลบ <link> ไฟล์นี้
   สีมีความหมาย: ม่วง = แบรนด์/ทางหลัก · อำพัน = VIP/สรุป · เขียว = ทำได้/ผ่าน · แดง = ห้าม
   สีประจำระยะ (--stage): 1 ม่วง · 2 น้ำเงิน · 3 ฟ้าอมเขียว · 4 เขียว · 5 ส้ม · 6 ชมพู
   ===================================================================== */

:root{
  --zx-primary:#7B2FFD; --zx-primary-2:#A855F7; --zx-primary-deep:#4C1D95;
  --zx-cyan:#06B6D4; --zx-amber:#F59E0B; --zx-orange:#F97316;
  --zx-green:#10B981; --zx-red:#EF4444;
  --zx-ink:#0F172A; --zx-ink-2:#334155; --zx-muted:#64748B; --zx-line:#E7E3F5;
  --zx-canvas:#F5F3FF; --zx-card:#FFFFFF;
  --zx-radius:22px; --zx-radius-sm:14px;
  --zx-shadow:0 1px 2px rgba(76,29,149,.06),0 12px 32px -12px rgba(76,29,149,.18);
  --zx-shadow-lg:0 2px 4px rgba(76,29,149,.06),0 24px 60px -20px rgba(76,29,149,.32);
  --zx-font:'IBM Plex Sans Thai','Noto Sans Thai',system-ui,sans-serif;
  --zx-display:'Chakra Petch','IBM Plex Sans Thai',system-ui,sans-serif;
  --zx-mono:'IBM Plex Mono',Consolas,Menlo,ui-monospace,monospace;
  --stage:#7B2FFD; --stage-2:#A855F7;
}
[data-stage="1"]{--stage:#7B2FFD;--stage-2:#A855F7}
[data-stage="2"]{--stage:#2563EB;--stage-2:#38BDF8}
[data-stage="3"]{--stage:#0891B2;--stage-2:#22D3EE}
[data-stage="4"]{--stage:#059669;--stage-2:#34D399}
[data-stage="5"]{--stage:#EA580C;--stage-2:#FBBF24}
[data-stage="6"]{--stage:#DB2777;--stage-2:#F472B6}

/* ---------- พื้นฐาน ---------- */
html{scroll-behavior:smooth}
body{font-family:var(--zx-font);color:var(--zx-ink);background:var(--zx-canvas);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 500px at 12% -10%,rgba(123,47,253,.14),transparent 60%),
    radial-gradient(700px 480px at 100% 0%,rgba(6,182,212,.12),transparent 60%),
    radial-gradient(800px 600px at 60% 110%,rgba(245,158,11,.10),transparent 60%),
    var(--zx-canvas)}
::selection{background:rgba(123,47,253,.18)}
::-webkit-scrollbar-thumb{background:#C4B5FD!important;border-radius:8px!important}
::-webkit-scrollbar-track{background:transparent!important}
:focus-visible{outline:3px solid rgba(123,47,253,.45);outline-offset:2px;border-radius:8px}
button,[onclick]{cursor:pointer}

/* ---------- แถบบน ---------- */
header.zx-header{height:64px;background:rgba(255,255,255,.78)!important;
  backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);
  border-bottom:1px solid rgba(123,47,253,.12)!important;box-shadow:0 6px 24px -18px rgba(76,29,149,.5)}
.zx-logo{display:flex;align-items:center;gap:10px;font-family:var(--zx-display);font-weight:700;font-size:1.15rem;color:var(--zx-ink)!important}
.zx-logo-mark{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;color:#fff;flex:none;
  background:linear-gradient(135deg,var(--zx-primary),var(--zx-cyan));box-shadow:0 8px 20px -8px rgba(123,47,253,.7)}
.zx-logo-mark svg{width:20px;height:20px}
.zx-logo-text b{background:linear-gradient(90deg,var(--zx-primary),#C026D3);-webkit-background-clip:text;background-clip:text;color:transparent}
.zx-burger{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--zx-ink-2);font-size:0!important}
.zx-burger:hover{background:rgba(123,47,253,.08)}
.zx-burger svg{width:22px;height:22px}
.zx-search{position:relative}
.zx-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:#8B7FB8;pointer-events:none}
#searchBox{padding-left:42px!important;height:42px;border-radius:999px!important;background:#F3F0FF!important;
  border:1px solid transparent!important;font-family:var(--zx-font);transition:border-color .2s,background .2s,box-shadow .2s}
#searchBox:focus{background:#fff!important;border-color:rgba(123,47,253,.45)!important;box-shadow:0 0 0 4px rgba(123,47,253,.12)!important}
.zx-progress-chip{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:999px;background:#fff;
  border:1px solid var(--zx-line);font-size:.8rem;color:var(--zx-ink-2);white-space:nowrap}
.zx-ring{--p:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--zx-primary) calc(var(--p)*1%),#EDE9FE 0)}
.zx-ring::after{content:"";width:22px;height:22px;border-radius:50%;background:#fff}
.zx-progress-chip b{font-family:var(--zx-display);color:var(--zx-primary)}
.zx-vip-btn{background:linear-gradient(135deg,#FBBF24,var(--zx-orange))!important;color:#fff!important;border:0;
  padding:10px 18px!important;font-weight:600!important;box-shadow:0 10px 24px -10px rgba(249,115,22,.8);
  transition:transform .2s,box-shadow .2s!important}
.zx-vip-btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(249,115,22,.9)}
#userTier{font-weight:500}

/* แถบความคืบหน้าการอ่านบทปัจจุบัน */
#zx-readbar{position:fixed;top:64px;left:0;height:3px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--stage),var(--stage-2),var(--zx-amber));transition:width .1s linear}

/* ---------- สารบัญซ้าย ---------- */
#reading-page{padding-top:64px!important}
#sidebar{top:64px!important;width:300px!important;background:rgba(255,255,255,.72)!important;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-right:1px solid rgba(123,47,253,.1)!important;padding:18px 14px 40px!important}
#sidebar > .space-y-4 > :not([hidden]) ~ :not([hidden]){margin-top:10px!important}
.zx-side-head{padding:14px 14px 16px;margin-bottom:14px;border-radius:18px;color:#fff;
  background:linear-gradient(135deg,var(--zx-primary),#C026D3 60%,var(--zx-orange));box-shadow:var(--zx-shadow)}
.zx-side-head small{display:block;opacity:.85;font-size:.75rem}
.zx-side-head strong{font-family:var(--zx-display);font-size:1.35rem;line-height:1.2}
.zx-side-head .zx-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.3);margin-top:10px;overflow:hidden}
.zx-side-head .zx-bar i{display:block;height:100%;width:0;background:#fff;border-radius:99px;transition:width .5s}
.stage-item{border-radius:16px;padding:4px;transition:background .2s}
.stage-item.zx-open{background:linear-gradient(180deg,color-mix(in srgb,var(--stage) 7%,transparent),transparent 70%)}
.stage-title{gap:10px;padding:8px 8px!important;border-radius:12px;font-family:var(--zx-font);font-weight:600!important;
  font-size:.92rem;color:var(--zx-ink)!important;align-items:center!important;transition:background .2s}
.stage-title:hover{background:rgba(255,255,255,.9)}
.zx-stage-num{flex:none;width:30px;height:30px;border-radius:10px;display:grid;place-items:center;color:#fff;
  font-family:var(--zx-display);font-weight:700;font-size:.95rem;
  background:linear-gradient(135deg,var(--stage),var(--stage-2));box-shadow:0 6px 14px -6px var(--stage)}
.zx-stage-meta{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.35}
.zx-stage-meta .zx-mini{height:4px;border-radius:99px;background:#EDE9FE;margin-top:6px;overflow:hidden}
.zx-stage-meta .zx-mini i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--stage),var(--stage-2));transition:width .5s}
.stage-title > span:last-child{font-size:0!important;width:20px;height:20px;flex:none;display:grid;place-items:center;
  color:#A39BC4;transition:transform .25s}
.stage-title > span:last-child::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.stage-item:not(.zx-open) .stage-title > span:last-child{transform:rotate(-90deg)}
.stage-title .text-green-600{color:#fff!important;background:var(--zx-green);padding:1px 8px;border-radius:99px;font-size:.66rem!important;font-weight:600!important}
.stage-title .text-vip{color:#fff!important;background:linear-gradient(135deg,#FBBF24,var(--zx-orange));padding:1px 8px;border-radius:99px;font-size:.66rem!important;font-weight:600!important}
.module-list{padding-left:6px!important}
.module-title{font-size:.8rem!important;font-weight:600;color:var(--zx-muted)!important;padding:6px 8px!important;letter-spacing:.01em;
  display:flex!important;align-items:center;gap:6px}
.module-title .zx-dot{display:none}
.chapter-list{padding-left:4px!important}
.chapter-item{position:relative;display:flex;align-items:flex-start;gap:8px;padding:8px 10px!important;border-radius:11px!important;
  color:var(--zx-ink-2)!important;font-size:.86rem!important;line-height:1.45;transition:background .15s,color .15s}
.chapter-item:hover{background:#fff!important;color:var(--zx-ink)!important;box-shadow:0 2px 10px -6px rgba(76,29,149,.35)}
.chapter-item.active{background:linear-gradient(135deg,var(--stage),var(--stage-2))!important;color:#fff!important;
  box-shadow:0 10px 22px -12px var(--stage)}
.chapter-item .zx-state{flex:none;width:18px;height:18px;margin-top:1px;border-radius:50%;border:2px solid #D8D2EE;display:grid;place-items:center;background:#fff}
.chapter-item.zx-done .zx-state{background:var(--zx-green);border-color:var(--zx-green)}
.chapter-item.zx-done .zx-state::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.chapter-item.active .zx-state{border-color:rgba(255,255,255,.8);background:transparent}
.chapter-item.active.zx-done .zx-state{background:#fff;border-color:#fff}
.chapter-item.active.zx-done .zx-state::after{border-color:var(--stage)}
.chapter-item .lock-icon,.chapter-item [class*="text-vip"]{margin-left:auto}

/* ---------- พื้นที่อ่าน ---------- */
main.zx-main{margin-left:300px;max-width:none!important;padding:36px 40px 80px!important;flex:1}
@media(max-width:1023px){main.zx-main{margin-left:0;padding:22px 14px 64px!important}}
.chapter-content.active{animation:zxIn .35s ease both}
@keyframes zxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.zx-shell{max-width:880px;margin:0 auto}

/* การ์ดหัวบท */
.zx-hero{position:relative;overflow:hidden;border-radius:28px;padding:30px 34px 28px;margin-bottom:22px;color:#fff;
  background:
    radial-gradient(420px 220px at 95% -10%,rgba(255,255,255,.35),transparent 60%),
    linear-gradient(135deg,var(--stage) 0%,var(--stage-2) 100%);
  box-shadow:0 30px 60px -30px var(--stage)}
.zx-hero::after{content:"";position:absolute;right:-60px;bottom:-80px;width:260px;height:260px;border-radius:50%;
  border:40px solid rgba(255,255,255,.12)}
.zx-hero > *{position:relative;z-index:1}
.zx-hero .breadcrumb{color:rgba(255,255,255,.85)!important;font-size:.8rem!important;margin-bottom:14px!important;display:flex;flex-wrap:wrap;gap:6px}
.zx-crumb{background:rgba(255,255,255,.18);padding:3px 10px;border-radius:99px;backdrop-filter:blur(4px)}
.zx-hero h1{font-family:var(--zx-display)!important;font-size:clamp(1.6rem,3.2vw,2.35rem)!important;line-height:1.25!important;
  color:#fff!important;margin-bottom:16px!important;letter-spacing:-.005em;text-wrap:balance}
.zx-hero h1 .text-vip{color:#FEF3C7!important;font-size:.85rem!important;background:rgba(0,0,0,.18);padding:3px 10px;border-radius:99px;vertical-align:middle}
.zx-hero .flex.flex-wrap{margin:0!important;gap:8px!important;color:#fff!important}
.zx-hero .flex.flex-wrap > span{background:rgba(255,255,255,.2);padding:5px 12px;border-radius:99px;font-size:.8rem;font-weight:500;color:#fff!important}
.zx-hero .flex.flex-wrap > span.text-vip{background:linear-gradient(135deg,#FBBF24,var(--zx-orange))}
.zx-hero .flex.flex-wrap > span.text-green-600{background:var(--zx-green)}
.zx-hero-num{position:absolute!important;right:26px;top:14px;font-family:var(--zx-display);font-weight:700;font-size:5.5rem;line-height:1;
  color:rgba(255,255,255,.16);letter-spacing:-.04em;pointer-events:none}

/* การ์ดเนื้อหา */
.zx-body{background:var(--zx-card);border-radius:28px;padding:40px 46px 44px;box-shadow:var(--zx-shadow);border:1px solid rgba(123,47,253,.07)}
@media(max-width:640px){.zx-body{padding:24px 18px 28px;border-radius:22px}.zx-hero{padding:24px 20px;border-radius:22px}.zx-hero-num{font-size:3.6rem}}

/* ตัวอักษรในบท */
.chapter-content{font-size:1.04rem}
.chapter-content p.text-gray-700,.chapter-content ul.text-gray-700{color:var(--zx-ink-2)!important;line-height:1.95!important;font-size:1.04rem}
.chapter-content h2{position:relative;font-family:var(--zx-display)!important;font-size:1.55rem!important;line-height:1.35!important;
  color:var(--zx-ink)!important;margin:2.6rem 0 1.1rem!important;padding:0 0 0 18px}
.chapter-content h2::before{content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:6px;border-radius:6px;
  background:linear-gradient(180deg,var(--stage),var(--stage-2))}
.chapter-content h3.text-lg{font-family:var(--zx-display)!important;font-size:1.2rem!important;color:var(--stage)!important;filter:saturate(1.1)}
.chapter-content ul.text-gray-700 li,.chapter-content ul.text-gray-700 > li{padding-left:2px}
.chapter-content b,.chapter-content strong{color:var(--zx-ink);font-weight:600}
.chapter-content a{color:var(--zx-primary);text-decoration:underline;text-decoration-color:rgba(123,47,253,.35);text-underline-offset:3px}
.chapter-content code:not(pre code){font-family:var(--zx-mono);font-size:.88em;background:#F3F0FF;color:#5B21B6;padding:1px 6px;border-radius:6px}

/* ⚡ สรุปใน 30 วินาที */
.chapter-content .bg-amber-50.border-amber-200{position:relative;border:0!important;border-radius:20px!important;
  padding:20px 24px!important;font-size:.98rem!important;line-height:1.85;color:#7C2D12!important;
  background:linear-gradient(135deg,#FFF7E6,#FFEDD5)!important;box-shadow:inset 0 0 0 1px rgba(249,115,22,.22),0 14px 30px -22px rgba(249,115,22,.7)}

.chapter-content .bg-amber-50.border-amber-200 b{color:#9A3412}

/* 🎯 วัตถุประสงค์ */
.chapter-content .bg-blue-50.border-l-4{position:relative;border:0!important;border-radius:20px!important;padding:22px 24px!important;
  background:linear-gradient(135deg,color-mix(in srgb,var(--stage) 9%,#fff),color-mix(in srgb,var(--stage-2) 6%,#fff))!important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--stage) 22%,transparent)}
.chapter-content .bg-blue-50.border-l-4 h3{font-family:var(--zx-display);font-size:1.08rem!important;color:var(--stage)!important;margin-bottom:10px!important}
.chapter-content .bg-blue-50.border-l-4 ul{display:grid;gap:8px}
.chapter-content .bg-blue-50.border-l-4 li{background:rgba(255,255,255,.75);padding:9px 12px;border-radius:12px;font-size:.92rem;line-height:1.6}

/* การ์ดระดับ/นิยาม (ขอบซ้ายม่วง) */
.chapter-content .border-l-4.border-primary:not(.bg-blue-50){border-left:0!important;border-radius:16px!important;padding:16px 18px 16px 22px!important;
  position:relative;background:color-mix(in srgb,var(--stage) 6%,#fff)!important}
.chapter-content .border-l-4.border-primary:not(.bg-blue-50)::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:5px;border-radius:0 6px 6px 0;background:var(--stage)}
.chapter-content .border-l-4.border-primary .text-primary{color:var(--stage)!important;font-weight:600}

/* ❌ / ✅ */
.chapter-content .bg-red-50.rounded-lg,.chapter-content .bg-green-50.rounded-lg{border-radius:18px!important;padding:16px 18px!important;
  border:1px solid transparent;position:relative;overflow:hidden;line-height:1.75}
.chapter-content .bg-red-50.rounded-lg{background:linear-gradient(180deg,#FFF1F2,#fff)!important;border-color:#FECDD3}
.chapter-content .bg-green-50.rounded-lg{background:linear-gradient(180deg,#ECFDF5,#fff)!important;border-color:#A7F3D0}
.chapter-content .bg-red-50.rounded-lg::before,.chapter-content .bg-green-50.rounded-lg::before{content:"";position:absolute;left:0;right:0;top:0;height:4px}
.chapter-content .bg-red-50.rounded-lg::before{background:linear-gradient(90deg,#F43F5E,#FB7185)}
.chapter-content .bg-green-50.rounded-lg::before{background:linear-gradient(90deg,#10B981,#34D399)}
.chapter-content .text-red-600.font-medium,.chapter-content .text-green-600.font-medium{font-weight:700!important;font-size:.85rem;letter-spacing:.01em}

/* หลุมพราง / การ์ดขอบเทา */
.chapter-content .border.border-gray-200.rounded-lg.p-4{border:1px solid var(--zx-line)!important;border-radius:18px!important;padding:16px 18px 16px 20px!important;
  background:#fff;position:relative;transition:box-shadow .2s,border-color .2s}
.chapter-content .border.border-gray-200.rounded-lg.p-4:hover{border-color:color-mix(in srgb,var(--stage) 35%,#fff)!important;box-shadow:0 12px 26px -18px var(--stage)}
.chapter-content .border.border-gray-200.rounded-lg.p-4 h4{font-weight:600!important;color:var(--zx-ink)!important}

/* 💡 บทถัดไป / กล่องจบ (พื้นเทา) */
.chapter-content .bg-gray-100.rounded-lg{border-radius:22px!important;padding:22px 24px!important;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--zx-primary-deep),var(--zx-primary) 55%,#C026D3)!important;box-shadow:var(--zx-shadow-lg)}
.chapter-content .bg-gray-100.rounded-lg *{color:#fff!important}
.chapter-content .bg-gray-100.rounded-lg .font-medium{font-family:var(--zx-display);font-size:1.05rem}
.chapter-content .bg-gray-100.rounded-lg p{opacity:.92}

/* โค้ด */
.chapter-content .code-block{background:#130A28!important;border-radius:18px!important;padding:44px 18px 18px!important;
  box-shadow:0 18px 40px -22px rgba(19,10,40,.9),inset 0 0 0 1px rgba(168,85,247,.25)}
.chapter-content .code-block::before{content:"";position:absolute;left:18px;top:17px;width:11px;height:11px;border-radius:50%;
  background:#FB7185;box-shadow:18px 0 0 #FBBF24,36px 0 0 #34D399}
.code-block code{font-family:var(--zx-mono)!important;font-size:13.5px!important;color:#E9E4FF!important}
.copy-btn{top:11px!important;right:12px!important;background:rgba(168,85,247,.22)!important;border:1px solid rgba(168,85,247,.4);
  border-radius:99px!important;padding:4px 12px!important;font-family:var(--zx-font);transition:background .2s}
.copy-btn:hover{background:rgba(168,85,247,.45)!important}

/* ตาราง */
.chapter-content table{border-collapse:separate!important;border-spacing:0;width:100%;border-radius:16px;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--zx-line);font-size:.93rem}
.chapter-content thead,.chapter-content thead.bg-gray-100{background:linear-gradient(135deg,color-mix(in srgb,var(--stage) 14%,#fff),color-mix(in srgb,var(--stage-2) 10%,#fff))!important}
.chapter-content th{color:var(--zx-ink)!important;font-weight:600!important}
.chapter-content tbody tr:nth-child(even){background:#FAF8FF}
.chapter-content tbody tr{transition:background .15s}
.chapter-content tbody tr:hover{background:color-mix(in srgb,var(--stage) 6%,#fff)}
.chapter-content td,.chapter-content th{border-bottom:1px solid #F0ECFA}
.chapter-content .overflow-x-auto{border-radius:16px}

/* แบบทดสอบ / details */
.chapter-content details{border-radius:16px;border:1px solid var(--zx-line);background:#fff;padding:0;margin:10px 0;overflow:hidden;transition:box-shadow .2s}
.chapter-content details[open]{box-shadow:0 14px 30px -22px var(--stage)}
.chapter-content details > summary{list-style:none;cursor:pointer;padding:14px 48px 14px 18px;font-weight:600;position:relative;color:var(--zx-ink)}
.chapter-content details > summary::-webkit-details-marker{display:none}
.chapter-content details > summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:9px;
  display:grid;place-items:center;background:color-mix(in srgb,var(--stage) 12%,#fff);color:var(--stage);font-weight:700;transition:transform .2s}
.chapter-content details[open] > summary::after{content:"−"}
.chapter-content details > :not(summary){padding:0 18px 16px}

/* ภาพประกอบ */
.fig{border:0!important;border-radius:22px!important;padding:18px 16px 12px!important;background:#fff!important;
  box-shadow:0 1px 2px rgba(76,29,149,.05),0 20px 44px -26px rgba(76,29,149,.45),inset 0 0 0 1px #EEE9FB}
.fig figcaption{color:var(--zx-muted)!important;font-size:.84rem!important;border-top:1px dashed #E4DEF7!important}

/* ล็อก VIP */
.vip-mask > div{border:0!important;border-radius:26px!important;padding:30px 34px!important;
  background:rgba(255,255,255,.9)!important;box-shadow:0 30px 70px -28px rgba(76,29,149,.55),inset 0 0 0 1px rgba(245,158,11,.35)!important}
.vip-mask .text-3xl{width:58px;height:58px;margin:0 auto 12px!important;border-radius:18px;display:grid;place-items:center;font-size:0!important;
  background:linear-gradient(135deg,#FBBF24,var(--zx-orange)) center/28px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"),linear-gradient(135deg,#FBBF24,#F97316);
  box-shadow:0 12px 24px -10px rgba(249,115,22,.9)}
.vip-mask h3{font-family:var(--zx-display);font-size:1.3rem!important}
.vip-mask button{background:linear-gradient(135deg,#FBBF24,var(--zx-orange))!important;padding:11px 26px!important;box-shadow:0 12px 26px -12px rgba(249,115,22,.9)}
.vip-blur{-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent)}
body.vip .vip-blur{-webkit-mask-image:none}

/* การ์ดนำทางบทก่อน/ถัดไป */
.zx-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px}
.zx-nav button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:18px 20px;border-radius:20px;
  background:#fff;border:1px solid var(--zx-line);box-shadow:var(--zx-shadow);transition:transform .2s,box-shadow .2s,border-color .2s;min-height:88px;font-family:var(--zx-font)}
.zx-nav button:hover{transform:translateY(-2px);box-shadow:var(--zx-shadow-lg);border-color:rgba(123,47,253,.3)}
.zx-nav button small{font-size:.75rem;color:var(--zx-muted);font-weight:600;letter-spacing:.04em}
.zx-nav button span{font-weight:600;color:var(--zx-ink);line-height:1.45}
.zx-nav .zx-next{text-align:right;align-items:flex-end;color:#fff;border:0;
  background:linear-gradient(135deg,var(--stage),var(--stage-2));box-shadow:0 18px 36px -18px var(--stage)}
.zx-nav .zx-next small,.zx-nav .zx-next span{color:#fff}
.zx-nav .zx-next.zx-pulse{animation:zxPulse 1.6s ease-in-out 2}
@keyframes zxPulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--stage) 25%,transparent),0 18px 36px -18px var(--stage)}}
.zx-nav button[disabled]{opacity:.4;pointer-events:none}
@media(max-width:560px){.zx-nav{grid-template-columns:1fr}.zx-nav .zx-next{order:-1}}

/* การ์ดจบบท */
.zx-finish{display:flex;align-items:center;gap:14px;margin-top:22px;padding:16px 18px;border-radius:18px;background:#fff;border:1px dashed color-mix(in srgb,var(--stage) 40%,#fff)}
.zx-finish button{margin-left:auto;padding:10px 18px;border-radius:99px;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--zx-green),#34D399);
  box-shadow:0 10px 22px -12px rgba(16,185,129,.9);white-space:nowrap}
.zx-finish.zx-is-done button{background:#fff;color:var(--zx-green);box-shadow:inset 0 0 0 2px var(--zx-green)}
.zx-finish p{margin:0;font-size:.92rem;color:var(--zx-ink-2);line-height:1.5}

/* toast + ปุ่มกลับขึ้นบน + ม่านมือถือ */
#zx-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,30px);opacity:0;z-index:80;display:flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:99px;background:#130A28;color:#fff;font-weight:500;box-shadow:0 20px 40px -16px rgba(19,10,40,.7);transition:.3s;pointer-events:none}
#zx-toast.show{transform:translate(-50%,0);opacity:1}
#zx-toast i{width:22px;height:22px;border-radius:50%;background:var(--zx-green);display:grid;place-items:center}
#zx-toast i::after{content:"";width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
#zx-top{position:fixed;right:22px;bottom:24px;width:48px;height:48px;border-radius:16px;z-index:70;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--zx-primary),var(--zx-cyan));box-shadow:0 14px 30px -12px rgba(123,47,253,.8);opacity:0;transform:translateY(12px);transition:.25s;pointer-events:none}
#zx-top.show{opacity:1;transform:none;pointer-events:auto}
#zx-top svg{width:22px;height:22px}
#zx-scrim{position:fixed;inset:64px 0 0 0;background:rgba(19,10,40,.35);backdrop-filter:blur(2px);z-index:39;opacity:0;pointer-events:none;transition:opacity .25s}
@media(max-width:1023px){#sidebar{width:min(320px,86vw)!important;box-shadow:20px 0 50px -20px rgba(19,10,40,.5)}
  #sidebar.open ~ #zx-scrim,body.zx-drawer #zx-scrim{opacity:1;pointer-events:auto}}

/* ---------- หน้า VIP ---------- */
#vip-page{padding-top:64px!important}
#vip-page h1{font-family:var(--zx-display);font-size:clamp(2rem,4.6vw,3.1rem)!important;line-height:1.2!important;text-wrap:balance}
#vip-page h1 .text-primary{background:linear-gradient(90deg,var(--zx-primary),#C026D3,var(--zx-orange));-webkit-background-clip:text;background-clip:text;color:transparent!important}
#vip-page h2{font-family:var(--zx-display)}
#vip-page .grid > .bg-white.rounded-2xl{border-radius:26px!important;border-color:var(--zx-line)!important;box-shadow:var(--zx-shadow);transition:transform .25s,box-shadow .25s}
#vip-page .grid > .bg-white.rounded-2xl:hover{transform:translateY(-4px);box-shadow:var(--zx-shadow-lg)}
#vip-page .grid > .border-2.border-primary{border:0!important;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,var(--zx-primary),#C026D3,var(--zx-orange)) border-box!important;
  border:2px solid transparent!important;box-shadow:0 30px 60px -28px rgba(123,47,253,.7)!important}
#vip-page .text-4xl.font-bold{font-family:var(--zx-display)}
#vip-page .bg-primary.text-white{background:linear-gradient(135deg,var(--zx-primary),#C026D3)!important}
#vip-page .w-12.h-12.rounded-xl{width:56px!important;height:56px!important;border-radius:18px!important;font-size:0!important;background-size:26px!important;background-position:center!important;background-repeat:no-repeat!important;box-shadow:0 12px 24px -12px rgba(76,29,149,.6)}
#vip-page .zx-ic-book{background-color:transparent!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5V5a2 2 0 0 1 2-2h14v16H6.5A2.5 2.5 0 0 0 4 21.5z'/%3E%3Cpath d='M8 7h8M8 11h6'/%3E%3C/svg%3E"),linear-gradient(135deg,#7B2FFD,#A855F7)!important}
#vip-page .zx-ic-code{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 18 6-6-6-6M8 6l-6 6 6 6'/%3E%3C/svg%3E"),linear-gradient(135deg,#059669,#34D399)!important}
#vip-page .zx-ic-refresh{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-3-6.7L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E"),linear-gradient(135deg,#F59E0B,#F97316)!important}
#vip-page .zx-ic-chat{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"),linear-gradient(135deg,#2563EB,#38BDF8)!important}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{#sidebar,header,#zx-top,.zx-nav,.zx-finish,#zx-readbar{display:none!important}main.zx-main{margin:0!important}.zx-hero{color:#000;background:none!important;box-shadow:none}}
.chapter-content,.zx-nav,.zx-finish{max-width:880px;margin-left:auto;margin-right:auto}

/* แก้หลังตรวจด้วยตา */
@media(min-width:1024px){.zx-burger{display:none!important}}
main.zx-main{min-width:0}
.zx-body,.zx-hero{min-width:0;overflow-wrap:break-word}
.chapter-content .code-block pre{max-width:100%}
.chapter-content .overflow-x-auto{max-width:100%}
@media(max-width:640px){.zx-hero .breadcrumb .zx-crumb:not(:last-child){display:none}.zx-vip-btn{padding:9px 14px!important}}
.zx-progress-chip{display:none}
@media(min-width:1024px){.zx-progress-chip{display:flex}}
.vip-mask .text-3xl{background-size:28px 28px,100% 100%!important}
#vip-page .w-12.h-12.rounded-xl{background-size:26px 26px,100% 100%!important}
@media(max-width:420px){.zx-logo-text{display:none}}