
:root{
  --G:#B6FF00;
  --B:#050505;
  --B2:#0D0D0D;
  --B3:#141414;
  --B4:#1C1C1C;
  --B5:#2A2A2A;
}
[data-theme="dark"]{
  --g-ink:var(--G);
  --bg:var(--B);--bg2:var(--B2);--bg3:var(--B3);--bg4:var(--B4);
  --text:#FFFFFF;--text2:#E0E0E0;--text3:#A0A0A0;--text4:#606060;
  --border:rgba(182,255,0,.12);--border2:rgba(182,255,0,.25);
  --card-bg:var(--B2);--card-border:rgba(182,255,0,.1);
  --prose-bg:var(--B3);
  --sum-bg:var(--B3);
  --wrong-bg:rgba(255,60,60,.1);--wrong-text:#FF8080;--wrong-border:rgba(255,60,60,.2);
  --right-bg:rgba(182,255,0,.08);--right-text:#B6FF00;--right-border:rgba(182,255,0,.2);
  --tag-bg:rgba(182,255,0,.06);--tag-border:rgba(182,255,0,.15);--tag-text:#A0B060;
  --callout-bg:rgba(182,255,0,.06);--callout-border:rgba(182,255,0,.18);
  --nav-bg:rgba(5,5,5,.96);
  --rule-green-bg:rgba(182,255,0,.1);--rule-green-text:#B6FF00;
  --rule-amber-bg:rgba(255,190,0,.1);--rule-amber-text:#FFD060;
  --rule-red-bg:rgba(255,60,60,.1);--rule-red-text:#FF8080;
  --rule-blue-bg:rgba(100,160,255,.1);--rule-blue-text:#90C0FF;
  --pp-bg:var(--B3);
  --lock-bg:var(--B2);
  --unlock-bg:var(--B2);
  --step-dot-text:#050505;
}
[data-theme="light"]{
  --g-ink:#050505;
  --bg:#f3f4e5;--bg2:#f8f9f2;--bg3:#eceee0;--bg4:#e5e7d9;
  --text:#050505;--text2:#1A1A1A;--text3:#050505;--text4:#050505;
  --border:rgba(5,5,5,.12);--border2:rgba(5,5,5,.25);
  --card-bg:#FFFFFF;--card-border:rgba(5,5,5,.1);
  --prose-bg:#F8FAF0;
  --sum-bg:#EEF2DC;
  --wrong-bg:#FFE8E8;--wrong-text:#C03030;--wrong-border:rgba(192,48,48,.2);
  --right-bg:rgba(100,140,0,.08);--right-text:#507000;--right-border:rgba(100,140,0,.25);
  --tag-bg:rgba(100,140,0,.08);--tag-border:rgba(100,140,0,.2);--tag-text:#607000;
  --callout-bg:rgba(100,140,0,.07);--callout-border:rgba(100,140,0,.2);
  --nav-bg:rgba(244,247,232,.96);
  --rule-green-bg:rgba(80,112,0,.1);--rule-green-text:#507000;
  --rule-amber-bg:rgba(180,120,0,.1);--rule-amber-text:#8A6000;
  --rule-red-bg:rgba(192,48,48,.1);--rule-red-text:#C03030;
  --rule-blue-bg:rgba(30,80,160,.1);--rule-blue-text:#2050A0;
  --pp-bg:#EEF2DC;
  --lock-bg:#FFFFFF;
  --unlock-bg:#FFFFFF;
  --step-dot-text:#FFFFFF;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Sarabun',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);line-height:1.7;font-size:16px;overflow-x:hidden;transition:background .2s,color .2s}

/* NAV */
.nav{position:sticky;top:0;z-index:200;background:var(--nav-bg);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 0.7rem;height:52px;gap:6px}
.nav-logo{font-size:12px;font-weight:800;letter-spacing:1px;color:var(--text);white-space:nowrap;text-transform:uppercase;flex-shrink:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.nav-logo span{color:var(--G)}
.nav-right{display:flex;align-items:center;gap:8px}
.theme-btn{display:flex;align-items:center;gap:5px;cursor:pointer;background:var(--bg3);border:1px solid var(--border);border-radius:100px;padding:5px 9px;font-family:inherit;color:var(--text3);font-size:10.5px;font-weight:600;flex-shrink:0}
.nav-cta{padding:7px 11px;background:var(--G);color:var(--B);border:none;border-radius:6px;font-size:11px;font-weight:800;cursor:pointer;font-family:inherit;white-space:nowrap;flex-shrink:0;letter-spacing:.3px}

/* HERO */
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--G);z-index:300;transition:width .12s linear;box-shadow:0 0 8px rgba(182,255,0,.5)}
/* Hamburger + TOC drawer */
.nav-left{display:flex;align-items:center;gap:8px;min-width:0;flex-shrink:1}
.nav-burger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:34px;height:34px;padding:8px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;cursor:pointer;flex-shrink:0}
.nav-burger span{display:block;height:2px;width:100%;background:var(--text);border-radius:2px}
.toc-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .2s}
.toc-overlay.open{opacity:1;visibility:visible}
.toc-panel{position:absolute;top:0;left:0;height:100%;width:min(330px,85vw);background:var(--bg2);border-right:1px solid var(--border2);transform:translateX(-100%);transition:transform .25s;display:flex;flex-direction:column}
.toc-overlay.open .toc-panel{transform:translateX(0)}
.toc-head{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-bottom:1px solid var(--border)}
.toc-head h3{font-size:14px;font-weight:800;color:var(--text);letter-spacing:1px;text-transform:uppercase}
.toc-close{background:none;border:none;color:var(--text3);font-size:20px;cursor:pointer;line-height:1;padding:2px 6px;font-family:inherit}
.toc-list{overflow-y:auto;padding:6px 0;flex:1}
.toc-item{display:flex;gap:10px;align-items:center;padding:11px 16px;cursor:pointer;border-bottom:1px solid var(--border);transition:background .12s}
.toc-item:hover{background:var(--bg3)}
.toc-num{font-size:11px;font-weight:800;color:var(--text);min-width:46px;flex-shrink:0;white-space:nowrap}
.toc-title{font-size:13.5px;color:var(--text);line-height:1.35}
.toc-lock{margin-left:auto;font-size:11px;opacity:.55;flex-shrink:0}
.toc-brand{font-size:13px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin:0}
.toc-brand .tm-white{color:var(--text)}
.toc-brand .tm-green{color:var(--G)}
.toc-part{padding:15px 16px 6px;font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--G);border-bottom:1px solid var(--border)}
[data-theme="light"] .toc-brand .tm-green{color:#050505}
[data-theme="light"] .toc-part{color:#050505}
[data-theme="light"] .toc-num{color:#050505}
/* Floating resume button */
.resume-btn{position:fixed;bottom:16px;right:16px;z-index:400;display:none;align-items:center;gap:6px;background:var(--G);color:var(--B);border:none;border-radius:100px;padding:9px 10px 9px 14px;font-family:inherit;font-size:12.5px;font-weight:800;cursor:pointer;box-shadow:0 6px 22px rgba(0,0,0,.4)}
.resume-btn.show{display:flex}
.resume-x{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.2);font-size:11px;font-weight:700}
.hero{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;padding:2rem 1.25rem 2.5rem;text-align:center;position:relative}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(182,255,0,.07) 0%,transparent 70%);pointer-events:none}
.hero-eye{font-size:10px;font-weight:700;letter-spacing:3px;color:var(--G);margin-bottom:1.2rem;text-transform:uppercase;opacity:.7}
.hero-h1{font-size:clamp(2.8rem,12vw,5.5rem);font-weight:900;line-height:.95;letter-spacing:-2px;margin-bottom:1rem;color:var(--text)}
.hero-h1 em{font-style:normal;color:var(--G)}
.hero-sub{font-size:clamp(.875rem,3vw,1rem);color:var(--text3);max-width:400px;margin:0 auto 2rem;line-height:1.7}
.hero-year{font-size:clamp(1.6rem,6vw,2.4rem);font-weight:800;letter-spacing:1px;margin:0 auto 1.4rem;line-height:1}
.hero-year .hy-meta{color:var(--G)}
.hero-year .hy-year{color:#FFFFFF}
.hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:320px;margin-bottom:2rem}
.stat{background:var(--bg3);border-radius:10px;padding:12px 6px;text-align:center;border:1px solid var(--border)}
.stat-n{font-size:1.75rem;font-weight:900;color:var(--G)}
.stat-l{font-size:11px;color:var(--text4);margin-top:2px}
.hero-cta{padding:14px 0;background:var(--G);color:var(--B);border:none;border-radius:10px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;margin-bottom:.75rem;display:block;width:100%;max-width:320px;letter-spacing:.5px}
.hero-cta:hover{opacity:.9}
.hero-cta2{padding:12px 0;background:transparent;color:var(--text3);border:1px solid var(--border2);border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;display:block;width:100%;max-width:320px}

/* SHARED WRAPPER */
.wrap{max-width:680px;margin:0 auto;padding:0 1.1rem}

/* INTRO — shown full, no toggle */
/* ป้องกัน Copy ทั้งเว็บ */
body, body *{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
.intro-wrap{max-width:680px;margin:0 auto;padding:2rem 1.1rem 0}
.intro-block{margin-bottom:2.5rem}
.intro-eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--G);text-transform:uppercase;margin-bottom:.5rem;opacity:.8}
.intro-heading{font-size:1.35rem;font-weight:800;color:var(--text);margin-bottom:1.25rem;letter-spacing:-.3px}
.intro-body p{font-size:17px;color:var(--text);line-height:1.95;margin-bottom:1.1rem}
.intro-body p:last-child{margin-bottom:0}
.intro-body strong{color:var(--text);font-weight:700}
.intro-divider{border:none;border-top:1px solid var(--border);margin:2rem 0}

/* not-for box */
.not-for{background:var(--bg3);border-radius:10px;padding:16px;margin-top:1rem;border:1px solid var(--border)}
.not-for-title{font-size:19px;font-weight:800;color:var(--text);letter-spacing:.2px;margin-bottom:14px}
.not-for ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.not-for li{font-size:15px;color:var(--text);position:relative;padding-left:24px;line-height:1.6}
.not-for li::before{content:'✗';color:var(--wrong-text);font-weight:700;position:absolute;left:0;top:0}
.fitbox{background:var(--bg3);border-radius:10px;padding:16px;margin-top:1rem;border:1px solid var(--border)}
.fitbox-title{font-size:19px;font-weight:800;color:var(--text);letter-spacing:.2px;margin-bottom:14px}
.fit-label{font-size:15px;font-weight:800;letter-spacing:.3px;margin:14px 0 8px}
.fit-label.yes{color:var(--G)}
.fit-label.no{color:var(--wrong-text)}
.fitbox ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.fitbox li{font-size:15px;color:var(--text);position:relative;padding-left:24px;line-height:1.6}
.fitbox ul.yes li::before{content:'✓';color:var(--G);font-weight:800;position:absolute;left:0;top:0}
.fitbox ul.no li::before{content:'✗';color:var(--wrong-text);font-weight:700;position:absolute;left:0;top:0}

/* story */
.story-time{font-size:3rem;font-weight:900;color:var(--G);letter-spacing:-2px;margin-bottom:.75rem;font-variant-numeric:tabular-nums;line-height:1}
.story-rule{border:none;border-top:1px solid var(--border);margin:1.25rem 0}
.story-emphasis{border-left:3px solid var(--G);padding:4px 0 4px 16px;margin:1.5rem 0}
.story-emphasis p{color:var(--text);font-weight:700;font-size:16px !important}

/* PART HEADER */
.chapters{max-width:680px;margin:0 auto;padding:0 1.1rem 4rem}
.part-hd{border-radius:10px;padding:13px 16px;margin:2.25rem 0 .75rem;border:1px solid}
.part-ey{font-size:11px;font-weight:700;letter-spacing:1.5px;margin-bottom:3px;text-transform:uppercase}
.part-nm{font-size:16px;font-weight:800;color:#FFFFFF}

/* FREE CHAPTER */
.ch-free{border:1px solid var(--card-border);border-radius:14px;background:var(--card-bg);overflow:hidden;margin-bottom:1rem}
.ch-hd{padding:16px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ch-badge{display:inline-block;background:rgba(182,255,0,.12);color:var(--G);font-size:10px;font-weight:700;padding:3px 9px;border-radius:4px;letter-spacing:.5px;margin-bottom:8px}
.ch-num-label{font-size:12px;font-weight:700;color:var(--text);margin-bottom:4px;letter-spacing:.5px;text-transform:uppercase}
.ch-title{font-size:17px;font-weight:800;color:var(--text);margin-bottom:4px;line-height:1.3}
.ch-sub{font-size:15px;color:var(--text)}
.ch-toggle-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.ch-arrow{font-size:12px;color:var(--G);transition:transform .2s}
.ch-free.open .ch-arrow{transform:rotate(180deg)}
.ch-summary{display:none;border-top:1px solid var(--border);padding:14px 16px}
.ch-free.open .ch-summary{display:block}
/* Unlocked chapters — ซ่อนก่อน unlock */
.ch-unlocked{display:none !important}
.ch-unlocked .show-full-btn{display:none}
/* ใน unlocked chapters — ch-full แสดงตลอดเมื่อ chapter open (ไม่ต้องกดปุ่มแยก) */
.ch-unlocked .ch-free.open .ch-full{display:block !important}
/* หลัง unlock */
body[data-unlocked="true"] .ch-unlocked{display:block !important}
body[data-unlocked="true"] .ch-locked{display:none !important}
.paid-only{display:none !important}
body[data-unlocked="true"] .paid-only{display:block !important}
.sum-label{font-size:11px;font-weight:700;letter-spacing:1px;color:var(--text2);text-transform:uppercase;margin-bottom:10px}

/* VS grid */
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px}
.vs-box{border-radius:8px;padding:9px 10px;font-size:14px;line-height:1.55;border:1px solid}
.vs-box.wrong{background:var(--wrong-bg);color:var(--wrong-text);border-color:var(--wrong-border)}
.vs-box.right{background:var(--right-bg);color:var(--right-text);border-color:var(--right-border)}
.vs-lbl{font-size:9px;font-weight:700;margin-bottom:3px;opacity:.7}
.step-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.step-row{display:flex;gap:9px;align-items:flex-start}
.step-dot{width:26px;height:26px;border-radius:50%;background:var(--G);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--step-dot-text);flex-shrink:0;margin-top:1px}
.step-n{font-size:13px;font-weight:700;color:var(--text)}
.step-d{font-size:15px;color:var(--text);margin-top:1px;line-height:1.6}
.rule-list{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.rule-row{display:flex;align-items:flex-start;gap:8px}
.rule-tag{font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;flex-shrink:0;margin-top:2px;white-space:nowrap}
.rule-txt{font-size:15px;color:var(--text);line-height:1.6}
.tag-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.tag{background:var(--tag-bg);border:1px solid var(--tag-border);border-radius:100px;padding:4px 10px;font-size:13px;color:var(--text2)}
.callout{border-radius:8px;padding:10px 12px;font-size:15px;line-height:1.65;margin-bottom:10px;background:var(--callout-bg);border:1px solid var(--callout-border);color:var(--right-text)}

/* show full btn */
.show-full-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;background:#B6FF00;color:#050505;border:none;border-radius:10px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;margin-top:12px;transition:opacity .15s;letter-spacing:.3px}
.show-full-btn:hover{opacity:.88}
.show-full-btn:active{transform:scale(.98)}
.show-full-btn .arr{font-size:12px;transition:transform .2s}
.show-full-btn.expanded .arr{transform:rotate(180deg)}
.show-full-btn.expanded{background:#050505;color:#B6FF00;border:1.5px solid #B6FF00}

/* FULL PROSE */
.ch-full{display:none;border-top:1px solid var(--border);padding:16px;background:var(--prose-bg)}
.ch-full.show{display:block}
.ch-free.open .ch-full{display:block}
.ch-recap{margin-top:1.8rem;padding-top:1.3rem;border-top:1px dashed var(--border2)}
.table-wrap{overflow-x:auto;margin:1.1rem 0;-webkit-overflow-scrolling:touch}
.data-table{border-collapse:collapse;width:100%;font-size:14px;line-height:1.5}
.data-table th,.data-table td{border:1px solid var(--border2);padding:9px 12px;text-align:left;white-space:nowrap}
.data-table th{background:rgba(182,255,0,.12);color:var(--text);font-weight:700;letter-spacing:.2px}
.data-table td{color:var(--text2)}
.data-table tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.key-list{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.key-list li{position:relative;padding-left:22px;font-size:14px;line-height:1.6;color:var(--text)}
.key-list li::before{content:"\25B8";position:absolute;left:4px;color:var(--G);font-weight:700}
.ch-full h3{font-size:17px;font-weight:700;color:#B6FF00;margin:1.4rem 0 .6rem;padding-left:12px;border-left:3px solid #B6FF00;line-height:1.4}
[data-theme="light"] .ch-full h3{color:#4a6600;border-left-color:#4a6600}
.ch-full p{font-size:17px;color:var(--text);line-height:1.9;margin-bottom:.6rem}
.ch-full p.arr{color:var(--G);opacity:.8;padding-left:6px}
.ch-full ul{margin:.4rem 0 .8rem 1.2rem}
.ch-full li{font-size:17px;color:var(--text);line-height:1.8;margin-bottom:.3rem}
.ch-full strong{color:var(--text);font-weight:700}

/* LOCKED */
.ch-locked{border:1px solid rgba(182,255,0,.15);border-radius:12px;background:#111110;margin-bottom:.5rem;display:flex;align-items:center;gap:10px;padding:13px 14px;opacity:1}
@media(hover:hover){
.ch-locked{position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .25s ease;transform-style:preserve-3d;will-change:transform}
.ch-locked::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgba(182,255,0,.22),transparent 60%);opacity:0;transition:opacity .25s;pointer-events:none;z-index:0}
.ch-locked:hover::before{opacity:1}
.ch-locked:hover{box-shadow:0 14px 34px rgba(0,0,0,.45),0 0 0 1px rgba(182,255,0,.3)}
.ch-locked .lk-left,.ch-locked .lk-icon{position:relative;z-index:1}
}
@media(hover:hover){
.ch-free:not(.open){position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .25s ease;transform-style:preserve-3d;will-change:transform}
.ch-free:not(.open)::before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(200px circle at var(--mx,50%) var(--my,50%),rgba(182,255,0,.18),transparent 60%);opacity:0;transition:opacity .25s;pointer-events:none;z-index:0}
.ch-free:not(.open):hover::before{opacity:1}
.ch-free:not(.open):hover{box-shadow:0 14px 34px rgba(0,0,0,.4),0 0 0 1px rgba(182,255,0,.25)}
.ch-free:not(.open) .ch-hd{position:relative;z-index:1}
}
[data-unlocked="true"] .ch-locked{opacity:1}
[data-unlocked="true"] .ch-locked .lk-icon{color:var(--G)}
.lk-left{flex:1;min-width:0}
.lk-num{font-size:12px;font-weight:700;color:var(--G);letter-spacing:.5px;margin-bottom:2px}
.lk-part{font-size:13px;color:#E0E0E0;margin-bottom:2px}
.lk-title{font-size:16px;font-weight:700;color:#FFFFFF;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk-sub{font-size:14px;color:#E0E0E0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.lk-icon{font-size:15px;flex-shrink:0;color:var(--text4)}

/* UNLOCK */
.unlock-section{background:var(--unlock-bg);border:1px solid var(--border);border-radius:16px;padding:22px;margin:.4rem 0 2rem}
.unlock-title{font-size:18px;font-weight:800;color:#FFFFFF;margin-bottom:6px}
.unlock-sub{font-size:15px;color:#FFFFFF;margin-bottom:18px;line-height:1.6}
.pp-box{background:var(--pp-bg);border-radius:12px;padding:20px;text-align:center;margin-bottom:14px;border:1px solid var(--border)}
.pp-qr{width:160px;height:160px;background:white;border-radius:10px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center}
.pp-num{font-size:22px;font-weight:900;letter-spacing:2px;color:var(--text);margin-bottom:4px}
.pp-name{font-size:14px;color:#FFFFFF;margin-bottom:12px}
.pp-amount{display:inline-block;background:rgba(182,255,0,.12);color:var(--G);padding:6px 20px;border-radius:6px;font-size:22px;font-weight:900;letter-spacing:1px}
.div-or{display:flex;align-items:center;gap:12px;margin:14px 0;color:#FFFFFF;font-size:14px}
.div-or::before,.div-or::after{content:'';flex:1;border-top:1px solid var(--border)}
.code-lbl{font-size:14px;font-weight:700;color:#FFFFFF;letter-spacing:.5px;margin-bottom:8px;text-transform:uppercase}
.code-row{display:flex;gap:8px}
.code-input{flex:1;padding:12px 14px;background:#1A1A18;border:1.5px solid rgba(182,255,0,.3);border-radius:10px;color:#FFFFFF;font-size:17px;font-family:inherit;letter-spacing:2px;text-transform:uppercase;outline:none;text-align:center;min-width:0}
.code-input:focus{border-color:var(--G)}
.code-input::placeholder{letter-spacing:0;font-size:15px;color:#888888}
.btn-unlock{padding:12px 16px;background:var(--G);color:var(--B);border:none;border-radius:10px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;flex-shrink:0}
.code-msg{font-size:13px;margin-top:10px;padding:10px 12px;border-radius:8px;display:none;text-align:center}
.code-msg.ok{display:block;background:var(--right-bg);color:var(--right-text)}
.code-msg.err{display:block;background:var(--wrong-bg);color:var(--wrong-text)}
.unlock-banner{display:none;background:var(--right-bg);border:1px solid var(--right-border);border-radius:10px;padding:12px 16px;margin-bottom:1rem;font-size:14px;color:var(--right-text);text-align:center}
.unlock-banner.show{display:block}

/* PRICING */
.pricing-wrap{border-top:1px solid var(--border);padding:3rem 1.25rem;text-align:center}
.pricing-h{font-size:1.6rem;font-weight:900;margin-bottom:.5rem;color:var(--text)}
.pricing-sub{font-size:14px;color:var(--text3);margin-bottom:1.5rem}
.price-card{background:var(--card-bg);border:2px solid var(--G);border-radius:16px;padding:22px;max-width:380px;margin:0 auto;text-align:left}
.price-badge{display:inline-block;background:var(--G);color:var(--B);font-size:10px;font-weight:800;padding:3px 10px;border-radius:4px;letter-spacing:1px;margin-bottom:12px}
.price-amt{font-size:3.5rem;font-weight:900;line-height:1;color:var(--text)}
.price-amt sup{font-size:1.2rem;vertical-align:super}
.price-period{font-size:13px;color:var(--text4);margin:.25rem 0 1.25rem}
.price-features{list-style:none;margin-bottom:1.5rem}
.price-features li{font-size:14px;color:var(--text3);padding:6px 0;display:flex;align-items:flex-start;gap:8px;border-bottom:1px solid var(--border)}
.price-features li:last-child{border:none}
.price-features li::before{content:'✓';color:var(--G);font-weight:800;flex-shrink:0;margin-top:2px}
.btn-buy{width:100%;padding:14px;background:var(--G);color:var(--B);border:none;border-radius:10px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;letter-spacing:.5px}
.btn-buy:hover{opacity:.9}

/* STRIPE */
.stripe-box{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:16px}
.stripe-price-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.stripe-product{font-size:14px;font-weight:700;color:var(--text);margin-bottom:3px}
.stripe-desc{font-size:14px;color:#FFFFFF}
.stripe-amt{font-size:22px;font-weight:900;color:var(--G);white-space:nowrap}
#stripe-card-element{background:var(--bg);border:1.5px solid var(--border);border-radius:10px;padding:14px;margin-bottom:12px;min-height:44px}
.stripe-error{color:#FF8080;font-size:13px;min-height:18px;margin-bottom:8px}
.stripe-pay-btn{width:100%;padding:14px;background:var(--G);color:var(--B);border:none;border-radius:10px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;letter-spacing:.5px}
.stripe-pay-btn:disabled{opacity:.5;cursor:not-allowed}
a.stripe-pay-btn{display:block;text-align:center;text-decoration:none;box-sizing:border-box}
.free-box{background:var(--bg3);border:1px solid var(--G);border-radius:12px;padding:20px}
.free-old{color:#888;text-decoration:line-through;font-size:15px;font-weight:600;margin-right:8px}
.price-old{display:block;font-size:1.3rem;color:var(--text4);text-decoration:line-through;font-weight:700;margin-bottom:4px}
.stripe-secure{font-size:13px;color:#B0B0B0;text-align:center;margin-top:10px}
.code-success{background:rgba(182,255,0,.07);border:1.5px solid var(--G);border-radius:14px;padding:24px;text-align:center;margin-bottom:16px}
.success-icon{font-size:36px;margin-bottom:8px}
.success-title{font-size:18px;font-weight:800;color:var(--text);margin-bottom:4px}
.success-sub{font-size:13px;color:var(--text4);margin-bottom:14px}
.success-code{font-size:28px;font-weight:900;color:var(--G);letter-spacing:4px;background:rgba(182,255,0,.1);border:1.5px solid rgba(182,255,0,.3);border-radius:10px;padding:12px 20px;margin-bottom:12px}
.success-note{font-size:12px;color:var(--text4);margin-bottom:14px}
.copy-btn{padding:9px 24px;background:var(--G);color:var(--B);border:none;border-radius:8px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit}
[data-theme="light"] .stat{background:#111110 !important;border-color:rgba(255,255,255,.1) !important}
[data-theme="light"] .stat .stat-l{color:#FFFFFF !important}
/* Light mode — เปลี่ยนสีเขียวทุกจุดเป็นสีดำ ยกเว้นพื้นหลังดำ */
[data-theme="light"] *:not(.ch-locked):not(.ch-locked *):not(.bonus-hd):not(.bonus-hd *):not(.unlock-section):not(.unlock-section *):not(.stripe-box):not(.stripe-box *):not(.price-card):not(.price-card *):not(.stat):not(.stat *){
  color: inherit;
}
[data-theme="light"] .nav-logo span,
[data-theme="light"] .intro-eyebrow,
[data-theme="light"] .story-time,
[data-theme="light"] .ch-eyebrow,
[data-theme="light"] .part-ey,
[data-theme="light"] .part-nm,
[data-theme="light"] .reviews-eyebrow,
[data-theme="light"] .ch-badge,
[data-theme="light"] .ch-num-label,
[data-theme="light"] .ch-title em,
[data-theme="light"] .hero-eyebrow,
[data-theme="light"] .hero-h1 em,
[data-theme="light"] .tag,
[data-theme="light"] .sum-label,
[data-theme="light"] .step-n,
[data-theme="light"] .step-hd,
[data-theme="light"] .review-stars,
[data-theme="light"] .roas-after,
[data-theme="light"] .show-full-btn,
[data-theme="light"] .story-emphasis,
[data-theme="light"] .story-emphasis *,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] .ch-full h3,
[data-theme="light"] .ch-full p.arr,
[data-theme="light"] .ch-full li,
[data-theme="light"] .callout,
[data-theme="light"] footer span,
[data-theme="light"] .pp-steps .step-n{color:#050505 !important}
[data-theme="light"] .ch-full h3{border-left-color:#050505 !important}
[data-theme="light"] .show-full-btn{background:#050505 !important;color:#B6FF00 !important}
[data-theme="light"] .show-full-btn.expanded{background:transparent !important;color:#050505 !important;border-color:#050505 !important}
[data-theme="light"] .review-avatar{color:#B6FF00 !important}
[data-theme="light"] .price-amt{color:#FFFFFF !important}
[data-theme="light"] .price-period{color:#FFFFFF !important}
[data-theme="light"] .pricing-h{color:#050505 !important}
[data-theme="light"] .pricing-sub{color:#050505 !important}
/* Force dark bg on bonus/locked/payment regardless of mode */
.ch-locked{background:#111110 !important;border-color:rgba(255,255,255,.1) !important}
.ch-locked.bonus{background:#0d1a0d !important;border-color:rgba(182,255,0,.2) !important}
.bonus-hd{background:#0d1a0d !important;border-color:rgba(182,255,0,.35) !important}
.unlock-section{background:#111110 !important;border-color:rgba(255,255,255,.1) !important}
.stripe-box{background:#111110 !important;border-color:rgba(182,255,0,.2) !important}
.price-card{background:#111110 !important}
.method-badge{background:rgba(182,255,0,.15) !important;color:#B6FF00 !important}
[data-theme="light"] .lk-title,[data-theme="light"] .lk-sub,[data-theme="light"] .lk-part,[data-theme="light"] .lk-num,[data-theme="light"] .bonus-ey,[data-theme="light"] .bonus-nm,[data-theme="light"] .bonus-desc{color:#FFFFFF !important}
[data-theme="light"] .stripe-product,[data-theme="light"] .stripe-desc,[data-theme="light"] .stripe-amt,[data-theme="light"] .stripe-secure,[data-theme="light"] .method-badge,[data-theme="light"] .unlock-title,[data-theme="light"] .unlock-sub,[data-theme="light"] .code-lbl,[data-theme="light"] .div-or{color:#FFFFFF !important}
[data-theme="light"] .price-features li{color:#FFFFFF !important}
.bonus-hd{border-radius:10px;padding:13px 16px;margin:1.5rem 0 .75rem;border:1px solid rgba(182,255,0,.35);background:rgba(182,255,0,.06)}
.bonus-ey{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--G);opacity:.9;margin-bottom:3px;text-transform:uppercase}
.bonus-nm{font-size:16px;font-weight:800;color:var(--G)}
.bonus-desc{font-size:14px;color:var(--text);margin-top:3px}
.ch-locked.bonus{border-color:rgba(182,255,0,.2);background:rgba(182,255,0,.03)}
.ch-locked.bonus .lk-num{color:var(--G)}
.ch-locked.bonus .lk-icon{color:var(--G);opacity:.5}
.stripe-methods{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.method-badge{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:5px 10px;font-size:12px;color:var(--text3)}
/* REVIEWS */
@keyframes floatBook{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.float-book{animation:floatBook 4.5s ease-in-out infinite;will-change:transform}
@media(prefers-reduced-motion:reduce){.float-book{animation:none}}
/* PITCH / SALES SECTION */
.pitch{max-width:660px;margin:0 auto;padding:.5rem 1.25rem 0}
.pitch-block{padding:2.6rem 0;border-bottom:1px solid var(--border)}
.pitch-eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--g-ink);text-transform:uppercase;margin-bottom:.8rem}
.pitch-h{font-size:clamp(1.1rem,3.3vw,1.25rem);font-weight:800;line-height:1.4;letter-spacing:-.2px;color:var(--text);margin-bottom:1rem}
.pitch-h em{font-style:normal;color:var(--G)}
.pitch-p{font-size:16px;line-height:1.8;color:var(--text2);margin-bottom:1rem}
.pitch-p strong{color:var(--text);font-weight:700}
.pitch-list{list-style:none;margin:1rem 0 1.2rem;padding:0;display:flex;flex-direction:column;gap:11px}
.cmp-lead{font-size:15px;line-height:1.7;color:var(--text2);margin-bottom:1.3rem}
.cmp-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:700px){.cmp-grid{grid-template-columns:1fr 1fr}}
.cmp-card{border-radius:16px;padding:20px 18px;position:relative}
.cmp-card.pain{background:rgba(255,60,60,.05);border:1px solid rgba(255,60,60,.22)}
.cmp-card.gain{background:rgba(182,255,0,.05);border:1px solid var(--border2)}
.cmp-head{font-size:15px;font-weight:800;color:var(--text);margin-bottom:14px;padding-bottom:11px;border-bottom:1px solid var(--border)}
.cmp-badge{position:absolute;top:0;right:0;background:var(--G);color:#050505;font-size:10px;font-weight:800;letter-spacing:.5px;padding:4px 10px;border-radius:0 16px 0 12px}
.cmp-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin:0;padding:0}
.cmp-list li{position:relative;padding-left:26px;font-size:15px;line-height:1.55;color:var(--text)}
.cmp-card.pain .cmp-list li::before{content:"\2715";position:absolute;left:0;top:0;color:#FF6B6B;font-weight:800}
.cmp-card.gain .cmp-list li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--G);font-weight:800}
.pitch-list li{position:relative;padding-left:30px;font-size:17px;line-height:1.7;color:var(--text)}
.pitch-list.bad li::before{content:"\2715";position:absolute;left:2px;top:0;color:#FF6B6B;font-weight:800}
.pitch-list.good li::before{content:"\2713";position:absolute;left:2px;top:0;color:var(--G);font-weight:800}
.pitch-list.big li{font-size:17px;line-height:1.7;padding-left:34px}
.pitch-list.big li::before{font-size:17px}
.pitch-punch{font-size:clamp(1rem,2.8vw,1.1rem);font-weight:800;line-height:1.55;color:var(--text);margin-top:1.3rem}
.pitch-punch em{font-style:normal;color:var(--G)}
.pitch-cta-row{display:flex;flex-direction:column;gap:10px;margin:1.4rem auto 0;max-width:360px}
.cta-solid{padding:15px;background:var(--G);color:#050505;border:none;border-radius:12px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;letter-spacing:.3px;text-align:center;width:100%;display:block}
.cta-solid.big{padding:18px;font-size:17px}
.cta-solid:hover{opacity:.9}
/* Green CTA hover: lift + shine sweep (desktop only) */
.cta-solid,.hero-cta,.nav-cta,.stripe-pay-btn{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,opacity .15s ease}
@media(hover:hover){
.cta-solid:hover,.hero-cta:hover,.nav-cta:hover,.stripe-pay-btn:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(182,255,0,.4)}
.cta-solid::after,.hero-cta::after,.nav-cta::after,.stripe-pay-btn::after{content:"";position:absolute;top:0;left:-75%;width:55%;height:100%;background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.7) 50%,transparent 100%);transform:skewX(-20deg);pointer-events:none}
.cta-solid:hover::after,.hero-cta:hover::after,.nav-cta:hover::after,.stripe-pay-btn:hover::after{animation:ctaShine .8s ease}
}
@keyframes ctaShine{0%{left:-75%}100%{left:130%}}
.cta-ghost{padding:14px;background:transparent;color:var(--text2);border:1px solid var(--border2);border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;text-align:center;width:100%;display:block}
.cta-note{font-size:12.5px;color:var(--text3);text-align:center;margin-top:.7rem}
.vs-compare{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:stretch;margin:1.4rem 0}
.vs-cell{border-radius:12px;padding:16px 12px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.vs-cell.lose{background:rgba(255,60,60,.06);border:1px solid rgba(255,60,60,.25)}
.vs-cell.win{background:rgba(182,255,0,.06);border:1px solid var(--border2)}
.vs-cell .vc-amt{font-size:clamp(1.2rem,5vw,1.7rem);font-weight:900;margin:2px 0}
.vs-cell.lose .vc-amt{color:#FF6B6B}
.vs-cell.win .vc-amt{color:var(--G)}
.vs-cell .vc-cap{font-size:12.5px;color:var(--text3);line-height:1.5}
.vs-mid{display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--text3);font-size:13px}
.fw-wrap{background:var(--bg2);border:1px solid var(--border2);border-radius:16px;padding:22px 18px;margin:1.5rem 0}
.fw-title{text-align:center;font-size:1.15rem;font-weight:900;color:var(--text);margin-bottom:2px}
.fw-sub{text-align:center;font-size:11px;color:var(--G);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:20px}
.fw-step{display:flex;gap:12px;align-items:flex-start;position:relative;padding-bottom:18px}
.fw-step:last-child{padding-bottom:0}
.fw-step:not(:last-child)::after{content:"";position:absolute;left:15px;top:34px;bottom:2px;width:2px;background:linear-gradient(var(--G),rgba(182,255,0,.25))}
.fw-num{width:32px;height:32px;border-radius:50%;background:var(--G);color:#050505;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0;z-index:1}
.fw-txt{padding-top:4px}
.fw-txt b{display:block;font-size:15px;color:var(--text);font-weight:800;margin-bottom:2px}
.fw-txt span{font-size:13.5px;color:var(--text3);line-height:1.5}
.fw-loop{margin-top:16px;text-align:center;font-size:13px;color:var(--G);font-weight:700;border-top:1px dashed var(--border2);padding-top:14px}
.chap-next{margin-top:1.6rem;padding:14px 16px;border-left:3px solid var(--G);background:rgba(182,255,0,.05);border-radius:0 10px 10px 0}
.chap-next .cn-label{font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--G);margin-bottom:5px}
.chap-next .cn-txt{font-size:14px;line-height:1.65;color:var(--text2)}
.chap-next .cn-txt b{color:var(--text);font-weight:700}
.cliff{display:none;margin-top:1.8rem;padding:20px 18px;background:linear-gradient(180deg,var(--bg2),rgba(182,255,0,.05));border:1px solid var(--border2);border-radius:14px;text-align:center}
.ch-free.open .cliff{display:block}
.cliff-txt{font-size:15px;line-height:1.75;color:var(--text);margin-bottom:16px}
.cliff-txt strong{color:var(--G);font-weight:800}
.cliff .cta-ghost{max-width:340px;margin:0 auto}
.cliff .cta-solid{max-width:340px;margin:10px auto 0}
.reviews-wrap{border-top:1px solid var(--border);padding:3rem 1.25rem}
.reviews-inner{max-width:680px;margin:0 auto}
.reviews-eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--G);text-transform:uppercase;margin-bottom:.5rem;opacity:.8}
.reviews-heading{font-size:1.5rem;font-weight:900;color:var(--text);margin-bottom:1.5rem;letter-spacing:-.5px}
.review-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:14px;padding:18px;margin-bottom:12px}
.review-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.review-avatar{width:42px;height:42px;border-radius:50%;background:#0d1f0d;color:#B6FF00;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;flex-shrink:0}
.review-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px}
.review-meta{font-size:11px;color:var(--text4)}
.review-stars{margin-left:auto;color:#B6FF00;font-size:13px;flex-shrink:0}
.review-roas{display:flex;align-items:center;gap:8px;background:var(--bg3);border-radius:8px;padding:8px 12px;margin-bottom:12px;font-size:13px;font-weight:700}
.roas-before{color:var(--wrong-text)}
.roas-arrow{color:var(--text4)}
.roas-after{color:var(--G)}
.review-text{font-size:14px;color:var(--text2);line-height:1.75}
footer{padding:2rem 1.25rem;border-top:1px solid var(--border);text-align:center;font-size:12px;color:var(--text4)}
footer span{color:var(--G)}
[data-theme="dark"] body{background:radial-gradient(130% 95% at 50% 15%,#1A331E 0%,#0E1A0F 38%,#070C07 68%,#030403 100%);background-attachment:fixed;background-color:#030403}
[data-theme="dark"] .hero{background:#000000}
@keyframes admBlink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}
.typing-dots span{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--G);margin:0 2px;animation:admBlink 1.4s infinite both}
.typing-dots span:nth-child(2){animation-delay:.2s}
.typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes admPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.6)}}
.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#19E04B;margin-right:7px;animation:admPulse 1.3s infinite;box-shadow:0 0 8px #19E04B}
@media(max-width:430px){.nav{padding:0 .55rem;gap:5px}.nav-logo{font-size:10px;letter-spacing:.3px}.nav-cta{padding:6px 9px;font-size:10px}.theme-btn{padding:4px 8px;font-size:9.5px;gap:3px}}
