@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');
:root{--ink:#173e35;--green:#125747;--lime:#d8ee91;--paper:#f8f8f2;--muted:#66766c;--line:#e0e6dc}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Sans Thai',system-ui,sans-serif;font-size:16px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit}header{max-width:1140px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:25px 28px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:11px;align-items:center;text-decoration:none;font-size:21px}.brand-icon{background:var(--green);color:var(--lime);padding:10px 8px;border-radius:12px;font-size:17px;font-weight:800;transform:rotate(-5deg)}.brand small{display:block;font-size:10px;letter-spacing:.5px;color:var(--muted)}.nav-link{font-size:13px;text-decoration:none}main{max-width:1080px;margin:0 auto;padding:36px 26px 56px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase}.hero{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center;padding:22px 0 38px}.pill{display:inline-block;border:1px solid #cbd8c5;border-radius:30px;padding:6px 13px;font-size:12px;background:#f1f4e7}.dot{color:#48843c}h1{font-size:clamp(36px,5.5vw,64px);line-height:1.25;letter-spacing:-1.8px;margin:20px 0}h1 em{font-style:normal;color:#6c8a38}p{line-height:1.8;color:var(--muted)}.lead{max-width:450px}.hero-art{min-height:310px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,#e2ebce 0,transparent 68%);position:relative}.book-cover{width:210px;height:280px;background:var(--green);border-radius:4px 12px 12px 4px;box-shadow:14px 18px 0 #dce1d0,22px 28px 35px #233d2125;transform:rotate(-9deg);color:#fff;padding:24px;border-left:9px solid #0b4035;position:relative;overflow:hidden}.book-cover:after{content:'+';position:absolute;right:-8px;bottom:-53px;font-size:220px;line-height:1;color:#d8ee91;transform:rotate(10deg);font-weight:400}.book-cover small{font-size:10px;letter-spacing:1px;color:var(--lime)}.book-cover h2{font-size:30px;line-height:1.35;margin:20px 0 10px}.book-cover p{color:#e1e8d5;font-size:12px;line-height:1.8}.float-tag{position:absolute;right:6%;bottom:24px;background:#fff;padding:10px 16px;border-radius:12px;box-shadow:0 4px 24px #173e3510;font-size:12px;transform:rotate(4deg)}.stats{display:flex;gap:26px;margin-top:22px}.stats b{display:block;font-size:24px}.stats span{font-size:11px;color:var(--muted)}.section-title{display:flex;justify-content:space-between;align-items:end;margin:14px 0 20px}.section-title h2{font-size:25px;margin:0}.section-title span{font-size:12px;color:var(--muted)}.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}.tab{border:1px solid var(--line);border-radius:24px;padding:8px 19px;background:transparent;color:var(--ink);font-size:13px}.tab.active{background:var(--green);color:#fff;border-color:var(--green)}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{border:1px solid var(--line);border-radius:18px;background:#fff;padding:22px;display:flex;flex-direction:column}.card-icon{width:46px;height:46px;border-radius:13px;background:#edf3d8;display:grid;place-items:center;font-weight:700;font-size:23px}.card[data-subject=science] .card-icon{background:#e4edf8;color:#45688f}.card[data-subject=english] .card-icon{background:#f9e9d9;color:#9f6b36}.card h3{font-size:20px;margin:20px 0 4px}.card p{font-size:13px;margin:8px 0 20px;flex:1}.meta{display:flex;gap:8px;font-size:11px;color:var(--muted);margin:6px 0}.card .primary{width:100%;margin-top:16px}.primary,.secondary,.orange{border:0;border-radius:10px;padding:12px 20px;min-height:46px;font-weight:600;text-decoration:none;text-align:center;display:inline-block}.primary{background:var(--green);color:#fff}.secondary{background:#eaf0e4;color:var(--ink)}.orange{background:#ed602d;color:white}.primary:hover{background:#0b4236}button:disabled{opacity:.45;cursor:default}.notice{font-size:12px;line-height:1.8;color:var(--muted)}.book-banner{margin-top:32px;border-radius:18px;background:#e9eedc;border:1px solid #dde4ce;padding:28px;display:flex;justify-content:space-between;gap:24px;align-items:center}.book-banner h2{margin:6px 0;font-size:24px}.book-banner p{font-size:13px;max-width:550px;margin:7px 0}.coming{background:#f6e5da;color:#9d522e;border-radius:8px;padding:12px 19px;white-space:nowrap;font-size:13px}.back{background:none;border:0;color:var(--muted);padding:5px 0}.quiz-shell{max-width:740px;margin:auto}.quiz-head{display:flex;justify-content:space-between;align-items:center;margin:18px 0}.quiz-head h2{margin:0;font-size:22px}.progress{height:5px;background:#e2e7db;border-radius:8px;overflow:hidden;margin-bottom:26px}.progress span{display:block;height:100%;background:#8ba552}.question{background:#fff;border:1px solid var(--line);border-radius:18px;padding:30px}.question h1{font-size:25px;line-height:1.65;letter-spacing:0;margin:15px 0 25px}.option{display:flex;gap:14px;align-items:center;border:1px solid var(--line);padding:14px 16px;border-radius:12px;margin:10px 0;cursor:pointer;line-height:1.65}.option:has(input:checked){border-color:var(--green);background:#eff5e4;box-shadow:0 0 0 1px var(--green)}.option input{accent-color:var(--green);width:18px;height:18px;flex:none}.actions{display:flex;justify-content:space-between;gap:12px;margin-top:22px}.question-dots{display:flex;gap:7px;flex-wrap:wrap;margin:22px 0}.qdot{border:1px solid var(--line);background:white;border-radius:8px;min-width:38px;height:38px;color:var(--muted)}.qdot.answered{background:#e4edcf;color:var(--green)}.qdot.current{border:2px solid var(--green)}.result{text-align:center;background:var(--green);color:#fff;padding:36px 24px;border-radius:20px;margin:18px 0}.result p{color:#dce6d3}.score{font-size:76px;font-weight:700;line-height:1.3;color:var(--lime)}.score small{font-size:25px;color:#cad9c5}.review{padding:22px;background:#fff;border:1px solid var(--line);border-radius:14px;margin:12px 0}.review h3{font-size:17px;line-height:1.7;margin:8px 0}.review p{font-size:14px;margin:7px 0}.label{font-size:12px;font-weight:700}.ok{color:#1a7752}.wrong{color:#b54e37}.summary{display:flex;gap:20px;justify-content:center;font-size:13px}.book-page{max-width:770px;margin:auto}.book-page .hero{grid-template-columns:1fr 1fr}.book-page ul{line-height:2.1;color:var(--muted)}footer{text-align:center;font-size:11px;color:#7d887d;padding:25px;border-top:1px solid var(--line);line-height:1.9}dialog{border:1px solid var(--line);border-radius:18px;padding:26px;max-width:420px;width:calc(100% - 36px);color:var(--ink)}dialog::backdrop{background:#173e3570}dialog h2{font-size:22px}button:focus-visible,a:focus-visible{outline:3px solid #8caa36;outline-offset:4px}@media(max-width:700px){header{padding:17px 20px}.brand{font-size:18px}.nav-link{font-size:11px}main{padding:22px 20px 36px}.hero{grid-template-columns:1fr;gap:0;padding-top:0}.hero-art{display:none}.hero h1{font-size:45px}.lead{font-size:14px}.stats{margin:18px 0 0}.section-title h2{font-size:22px}.cards{grid-template-columns:1fr}.card{padding:20px}.card h3{margin-top:14px}.book-banner{display:block;padding:23px}.coming{display:inline-block;margin-top:15px}.question{padding:22px 18px}.question h1{font-size:21px}.quiz-head h2{font-size:18px}.book-page .hero{grid-template-columns:1fr}.book-page .hero-art{display:flex;min-height:330px}.book-page h1{font-size:38px}.section-title span{max-width:100px;text-align:right}.option{font-size:15px}.actions button{padding:12px 14px}.result{padding:26px 18px}}

.share-panel{background:#edf3e7;border:1px solid var(--line);border-radius:18px;padding:24px;margin:20px 0}.share-panel h2{font-size:22px;margin-top:0}.share-panel textarea{display:block;width:100%;box-sizing:border-box;border:1px solid #c8d5c5;border-radius:12px;padding:16px;font:inherit;line-height:1.7;background:#fff;color:var(--ink);resize:vertical}.share-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.share-panel [role=status]{color:#125747;font-size:14px;min-height:1.5em}@media(max-width:700px){.share-panel{padding:18px}.share-actions button{flex:1 1 42%}}

.certificate-preview{text-align:center;margin:22px 0}.certificate-preview img{display:block;width:100%;max-width:430px;height:auto;margin:auto;border-radius:8px;box-shadow:0 12px 32px #173e3525}

.invite-card{max-width:660px;margin:30px auto;text-align:center;padding:38px 24px;background:#faf7eb;border:2px solid #ba9248;border-radius:24px}.invite-card h1{font-size:54px;color:#125747;margin:26px 0 12px}.invite-card h2{font-size:28px}.invite-card p{line-height:1.8}.invite-score{padding:18px;margin:24px auto;background:#edf3e7;border-radius:16px}.invite-score b{display:block;font-size:54px;color:#125747}.invite-score small{color:#68786b}

.library-hero{padding:32px 0 22px}.library-hero h1{font-size:clamp(38px,5vw,62px);line-height:1.22;letter-spacing:-1px;margin:24px 0}.library-hero em{color:#125747;font-style:normal}.library-hero p{color:#617167;line-height:1.8}.volume-shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding:25px 0 36px;border-bottom:7px solid #d8cfb7}.volume-card{min-width:0}.volume-card p{font-size:14px;line-height:1.8;min-height:54px;color:#65736a}.volume-card>.primary{width:100%}.volume-cover{position:relative;display:flex;flex-direction:column;text-align:left;width:100%;aspect-ratio:0.7;border:0;border-radius:4px 14px 14px 4px;padding:25px 24px 24px 32px;color:#fff;background:linear-gradient(110deg,#164b3d,#24705a);box-shadow:inset 9px 0 0 #0003,inset 12px 0 0 #ffffff15,8px 13px 0 #e2dccc,12px 22px 28px #173e3520;overflow:hidden;transition:transform .2s}.volume-cover:hover{transform:translateY(-7px)}.blue .volume-cover{background:linear-gradient(110deg,#183e68,#367498)}.purple .volume-cover{background:linear-gradient(110deg,#453453,#776086)}.volume-imprint{font-size:9px;letter-spacing:1px;opacity:.8}.volume-tag{font-size:10px;letter-spacing:2px;color:#efdca1;margin-top:40px}.volume-cover strong{font-size:clamp(25px,3vw,41px);line-height:1.3;margin:14px 0 20px}.volume-rule{height:2px;width:55px;background:#d6b66a}.volume-subjects{font-size:11px;line-height:1.8;margin-top:16px}.volume-number{font-size:90px;line-height:1;font-weight:bold;color:#ffffff20;margin-top:auto}.volume-bottom{font-size:11px;color:#f0dfb0;margin-top:18px}.selected .volume-cover{outline:3px solid #be9a51;outline-offset:5px}.library-hint{text-align:center;padding:30px;color:#627363}#volume-contents{scroll-margin-top:20px;padding-top:24px}@media(max-width:700px){.volume-shelf{grid-template-columns:1fr;gap:36px}.volume-card{max-width:340px;width:100%;margin:auto}.volume-cover strong{font-size:39px}.volume-cover{padding:28px 30px 26px 38px}.volume-tag{margin-top:38px}.volume-card p{min-height:0}.library-hero{padding-top:8px}}