/* CI Book ci.chanwanich.app: สี ตัวอักษร และโลโก้ตามคู่มือในเล่มเอง (Chanwanich Green #1F5D33, Gold #8C6E2F, Noto Sans และ Noto Sans Thai) */
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/noto-sans-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Noto Sans Thai";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/noto-sans-thai-thai-wght-normal.woff2") format("woff2");unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
:root{
  --bg:#0a2014;--bg-2:#0f3b20;--green:#1f5d33;--green-2:#2c6b44;--green-3:#4a8f5f;
  --gold:#8c6e2f;--gold-2:#b08a17;--gold-3:#e8ce86;
  --ink:#f4f1e8;--ink-2:rgba(244,241,232,.76);--ink-3:rgba(244,241,232,.54);
  --line:rgba(232,206,134,.18);--line-2:rgba(244,241,232,.09);
  --panel:#0c2618;--paper:#f6f5f1;
  --bar-h:4.6rem;--dock-h:5.6rem;
  --ease:cubic-bezier(.22,.8,.24,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;font-size:clamp(15px,calc(.5vw + 8px),26px);background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;font-family:"Noto Sans","Noto Sans Thai",system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.5;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.num{font-variant-numeric:tabular-nums}
button{font:inherit;color:inherit}
svg{display:block}
[hidden]{display:none!important}

/* พื้นหลัง: เขียวลึกของแบรนด์ ผ้าไหมจากปก (เบลอไว้ในไฟล์แล้ว) แสงทองจางๆ หลังเล่ม และเกรนกระดาษ ทั้งหมดนิ่ง ไม่กินเครื่อง */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(90% 70% at 74% 6%,#15502e 0%,rgba(21,80,46,0) 62%),radial-gradient(70% 60% at 8% 100%,rgba(140,110,47,.16) 0%,rgba(140,110,47,0) 60%),linear-gradient(180deg,#0f3b20 0%,#0b2617 55%,#07170f 100%)}
.ambient__silk{position:absolute;right:-4%;top:-10%;width:64%;height:124%;background:url("bg-silk.webp") center/cover no-repeat;opacity:.5;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 42%);mask-image:linear-gradient(90deg,transparent 0%,#000 42%)}
.ambient__glow{position:absolute;left:50%;top:50%;width:min(110vh,96vw);height:min(80vh,70vw);translate:-50% -46%;background:radial-gradient(closest-side,rgba(232,206,134,.11),rgba(232,206,134,0))}
.ambient__grain{position:absolute;inset:0;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* แถบบน */
.bar{position:relative;z-index:6;flex:none;display:flex;align-items:center;gap:1.2rem;height:var(--bar-h);padding:0 clamp(16px,2.4vw,56px);padding-top:env(safe-area-inset-top)}
.bar__brand{display:flex;align-items:center;gap:.95rem;min-width:0;color:inherit;text-decoration:none;border-radius:.6rem}
.bar__brand img{display:block;height:1.5rem;width:auto}
.bar__sep{flex:none;width:1px;height:1.5rem;background:var(--line)}
.bar__title{font-size:.92rem;white-space:nowrap;color:var(--ink-2)}
.bar__title b{font-weight:600;color:var(--ink)}
.bar__title em{font-style:normal;font-weight:500;color:var(--gold-3)}
.bar__where{flex:1;min-width:0;display:flex;justify-content:center;align-items:baseline;gap:.65rem;margin:0;font-size:.88rem;white-space:nowrap;overflow:hidden;color:var(--ink-3);transition:opacity .25s}
.bar__where.is-swap{opacity:0}
.where__no{font-weight:700;color:var(--gold-3)}
.where__ch{font-weight:500;color:var(--ink-2)}
.where__sec{overflow:hidden;text-overflow:ellipsis}
.where__sec:not(:empty)::before{content:"/";margin-right:.65rem;color:rgba(232,206,134,.4)}
.bar__tools{flex:none;display:flex;align-items:center;gap:.3rem}
.tool{display:inline-flex;align-items:center;justify-content:center;gap:.42rem;height:2.7rem;min-width:2.7rem;padding:0 .7rem;border:1px solid transparent;border-radius:999px;background:transparent;color:var(--ink-2);font-size:.82rem;font-weight:600;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.tool svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tool:hover{background:rgba(244,241,232,.07);color:var(--ink)}
.tool:focus-visible,.side:focus-visible,.dock__btn:focus-visible,.rail:focus-visible,.th:focus-visible,.ch:focus-visible,.bar__brand:focus-visible{outline:2px solid var(--gold-3);outline-offset:2px}
.tool--pdf{margin-left:.35rem;padding:0 1rem 0 .8rem;border-color:var(--line);color:var(--gold-3)}
.tool--pdf:hover{border-color:rgba(232,206,134,.45);background:rgba(232,206,134,.08);color:var(--gold-3)}

/* เวที: เล่มอยู่กลาง ปุ่มพลิกสองข้าง */
.stage{position:relative;z-index:2;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.book-host{position:relative;opacity:0;scale:.9;translate:var(--cx,0px) 7vh;transition:opacity .8s var(--ease),scale 1.4s var(--ease),translate 1.2s var(--ease)}
.is-booked .book-host{opacity:1;scale:1;translate:var(--cx,0px) 0}
.book-host{pointer-events:none}
.is-booked .book-host{pointer-events:auto}
.is-open .book-host{transition:opacity .6s var(--ease),scale .6s var(--ease),translate .95s var(--ease)}
.book{position:relative;z-index:1}
.book-shadow{position:absolute;z-index:0;left:50%;bottom:-4.5%;width:98%;height:10%;translate:-50% 0;background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.6),rgba(0,0,0,0) 100%);pointer-events:none;transition:left .95s var(--ease),width .95s var(--ease)}
.is-front .book-shadow{left:75%;width:50%}
.is-back .book-shadow{left:25%;width:50%}
.is-portrait .book-shadow{left:50%;width:96%}
.pg{background:var(--paper);overflow:hidden}
.pg img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.is-booked .book-host.is-jump{opacity:0;transition:opacity .16s}
.zoom__view img{will-change:transform}
.pg img.is-in{opacity:1}
.pg::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
.is-spread .pg--l::after{background:linear-gradient(270deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.06) 2.5%,rgba(0,0,0,0) 9%)}
.is-spread .pg--r::after{background:linear-gradient(90deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,.05) 2.5%,rgba(0,0,0,0) 9%)}
.is-spread .pg--hard::after{background:none}
.pg__no{position:absolute;inset:0;display:grid;place-items:center;font-size:1.3rem;font-weight:600;color:rgba(15,59,32,.18)}
.pg--blank{background:#f2f0ea}
.pg--blank .pg__mark{position:absolute;left:50%;top:50%;width:18%;height:auto;translate:-50% -50%;opacity:.16}
.side{position:absolute;top:50%;z-index:4;width:3.5rem;height:3.5rem;translate:0 -50%;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:rgba(8,26,16,.55);color:var(--ink);cursor:pointer;transition:background-color .2s,border-color .2s,opacity .35s,translate .25s var(--ease)}
.side svg{width:1.45rem;height:1.45rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.side--prev{left:clamp(14px,2.2vw,52px)}
.side--next{right:clamp(14px,2.2vw,52px)}
.side:hover{background:rgba(31,93,51,.6);border-color:rgba(232,206,134,.42)}
.side--prev:hover{translate:-2px -50%}
.side--next:hover{translate:2px -50%}
.side[disabled]{opacity:0;pointer-events:none}
.hint{position:absolute;left:50%;bottom:.35rem;z-index:3;margin:0;translate:-50% 0;font-size:.78rem;color:var(--ink-3);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .8s}
.is-booked .hint{opacity:1;transition-delay:2.4s}
.is-booked .hint.is-gone{opacity:0;transition-delay:0s}
.hint--touch{display:none}
@media (hover:none){.hint--fine{display:none}.hint--touch{display:inline}}
.noscript{position:relative;z-index:3;color:var(--ink-2)}
.noscript a{color:var(--gold-3)}

/* แถบล่าง: เส้นบทของเล่ม ชี้แล้วเห็นภาพหน้านั้น กดหรือลากเพื่อไป */
.dock{position:relative;z-index:6;flex:none;display:flex;align-items:center;justify-content:center;gap:1.2rem;height:var(--dock-h);padding:0 clamp(16px,2.4vw,56px);padding-bottom:env(safe-area-inset-bottom)}
.dock__btn{display:none;flex:none;width:2.8rem;height:2.8rem;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:50%;background:rgba(8,26,16,.55);cursor:pointer}
.dock__btn svg{width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dock__btn[disabled]{opacity:.35;pointer-events:none}
.dock__count{flex:none;min-width:6.2rem;margin:0;text-align:right;font-size:.86rem;font-weight:500;color:var(--ink-2)}
.dock__count b{font-weight:700;color:var(--ink)}
.rail{position:relative;flex:none;width:min(64rem,68vw);height:3rem;cursor:pointer;touch-action:none;border-radius:.5rem}
.rail__track{position:absolute;left:0;right:0;top:62%;height:.3rem;translate:0 -50%;display:flex;gap:4px}
.rail__seg{position:relative;height:100%;border-radius:99px;background:rgba(244,241,232,.13)}
.rail__seg > i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--gold),var(--gold-3));transform-origin:0 50%;scale:var(--f,0) 1;transition:scale .55s var(--ease)}
.rail__seg > span{position:absolute;left:0;bottom:calc(100% + .5rem);font-size:.68rem;font-weight:700;color:var(--ink-3);white-space:nowrap;transition:color .3s}
.rail__seg > span em{font-style:normal;font-weight:500;margin-left:.4rem;opacity:0;transition:opacity .3s}
.rail__seg.is-on > span{color:var(--gold-3)}
.rail__seg.is-on > span em{opacity:1;color:var(--ink-2)}
.rail__knob{position:absolute;top:62%;left:0;z-index:2;width:.95rem;height:.95rem;border-radius:50%;background:var(--gold-3);box-shadow:0 0 0 .32rem rgba(232,206,134,.16),0 2px 6px rgba(0,0,0,.4);translate:-50% -50%;transition:left .55s var(--ease)}
.rail.is-drag .rail__knob{transition:none}
.rail__peek{position:absolute;left:0;bottom:calc(100% + .7rem);z-index:5;width:8.8rem;padding:.45rem .45rem .55rem;border:1px solid var(--line);border-radius:.75rem;background:var(--panel);box-shadow:0 20px 44px -18px rgba(0,0,0,.8);translate:-50% 6px;opacity:0;pointer-events:none;transition:opacity .16s,translate .16s}
.rail.is-peek .rail__peek{opacity:1;translate:-50% 0}
.rail__peek img{display:block;width:100%;aspect-ratio:612/859;border-radius:.3rem;background:#e9e7e0}
.rail__peek span{display:block;margin-top:.45rem;font-size:.66rem;font-weight:700;color:var(--gold-3)}
.rail__peek b{display:block;font-size:.74rem;font-weight:500;line-height:1.35;color:var(--ink)}

/* สารบัญและค้นหา */
.sheet{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;background:rgba(6,21,13,.975);opacity:0;transition:opacity .28s var(--ease)}
.sheet.is-open{opacity:1}
.sheet__head{flex:none;display:flex;align-items:center;gap:1.2rem;height:var(--bar-h);padding:0 clamp(16px,2.4vw,56px);padding-top:env(safe-area-inset-top);border-bottom:1px solid var(--line-2)}
.sheet__head h2{flex:none;margin:0;font-size:1.12rem;font-weight:600}
.find{flex:1;max-width:36rem;display:flex;align-items:center;gap:.6rem;height:2.8rem;margin:0 auto;padding:0 1.05rem;border:1px solid var(--line-2);border-radius:999px;background:rgba(244,241,232,.05);transition:border-color .2s}
.find:focus-within{border-color:rgba(232,206,134,.5)}
.find svg{flex:none;width:1.15rem;height:1.15rem;fill:none;stroke:var(--ink-3);stroke-width:1.7;stroke-linecap:round}
.find input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:.92rem;outline:none}
.find input::placeholder{color:var(--ink-3)}
.find input::-webkit-search-cancel-button{filter:invert(1) opacity(.5)}
.sheet__body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(16rem,23rem) 1fr}
.chs{margin:0;padding:1.3rem clamp(12px,1.6vw,36px) 2rem;list-style:none;overflow:auto;border-right:1px solid var(--line-2)}
.ch{all:unset;box-sizing:border-box;display:grid;grid-template-columns:2.4rem 1fr;gap:0 .2rem;width:100%;padding:.85rem .9rem;border-radius:.85rem;cursor:pointer;transition:background-color .2s}
.ch:hover,.ch.is-on{background:rgba(244,241,232,.055)}
.ch__no{grid-row:span 3;padding-top:.1rem;font-size:.78rem;font-weight:700;color:var(--gold-3)}
.ch__name{font-size:.98rem;font-weight:600;line-height:1.35}
.ch__desc{margin-top:.25rem;font-size:.76rem;line-height:1.6;color:var(--ink-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ch__pp{margin-top:.3rem;font-size:.7rem;color:var(--ink-3)}
.ch__hits{margin-left:.5rem;color:var(--gold-3)}
.pages{overflow:auto;padding:1.4rem clamp(16px,2.6vw,60px) 3.5rem;scroll-padding-top:1rem}
.grp{margin:0 0 2.4rem}
.grp h3{display:flex;align-items:baseline;gap:.7rem;margin:0 0 1.05rem;font-size:.96rem;font-weight:600}
.grp h3 span{font-size:.8rem;font-weight:700;color:var(--gold-3)}
.grp h3 small{font-size:.74rem;font-weight:400;color:var(--ink-3)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(8.6rem,1fr));gap:1.5rem 1.15rem}
.th{all:unset;box-sizing:border-box;display:block;cursor:pointer;border-radius:.45rem}
.th img{display:block;width:100%;height:auto;aspect-ratio:612/859;border-radius:.35rem;background:#e9e7e0;box-shadow:0 12px 26px -16px rgba(0,0,0,.85);transition:translate .25s var(--ease),box-shadow .25s}
.th:hover img{translate:0 -3px;box-shadow:0 20px 34px -18px rgba(0,0,0,.95)}
.th.is-cur img{outline:2px solid var(--gold-3);outline-offset:3px}
.th span{display:block;margin-top:.6rem;font-size:.68rem;font-weight:700;color:var(--gold-3)}
.th b{display:block;margin-top:.1rem;font-size:.8rem;font-weight:500;line-height:1.4;color:var(--ink-2)}
.hits{display:grid;gap:.6rem;max-width:58rem}
.hit{all:unset;box-sizing:border-box;display:grid;grid-template-columns:4.6rem 1fr;gap:1.1rem;align-items:start;padding:.75rem;border-radius:.85rem;cursor:pointer;transition:background-color .2s}
.hit:hover,.hit:focus-visible{background:rgba(244,241,232,.055);outline:none}
.hit img{display:block;width:100%;aspect-ratio:612/859;border-radius:.3rem;background:#e9e7e0}
.hit span{display:block;font-size:.7rem;font-weight:700;color:var(--gold-3)}
.hit b{display:block;margin:.1rem 0 .3rem;font-size:.92rem;font-weight:600}
.hit p{margin:0;font-size:.8rem;line-height:1.65;color:var(--ink-3)}
.hit mark{padding:0 .12em;border-radius:.2rem;background:rgba(232,206,134,.26);color:var(--ink)}
.empty{margin:2rem 0;font-size:.9rem;color:var(--ink-3)}

/* ขยายหน้า */
.zoom{position:fixed;inset:0;z-index:30;background:rgba(5,15,10,.975);opacity:0;transition:opacity .25s}
.zoom.is-open{opacity:1}
.zoom__view{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab}
.zoom__view.is-drag{cursor:grabbing}
.zoom__view img{position:absolute;left:0;top:0;transform-origin:0 0;max-width:none;user-select:none;-webkit-user-select:none;box-shadow:0 30px 80px -30px rgba(0,0,0,.9);background:var(--paper)}
.zoom__bar{position:absolute;left:50%;bottom:calc(1.1rem + env(safe-area-inset-bottom));display:flex;align-items:center;gap:.25rem;padding:.35rem;translate:-50% 0;border:1px solid var(--line);border-radius:999px;background:var(--panel);box-shadow:0 18px 40px -18px rgba(0,0,0,.8)}
.zoom__bar p{min-width:5rem;margin:0 .5rem;text-align:center;font-size:.8rem;color:var(--ink-2)}
.zoom__gap{width:1px;height:1.5rem;margin:0 .35rem;background:var(--line)}

/* แถบบนและล่างเข้ามาหลังเล่ม */
.bar,.dock{opacity:0;transition:opacity .8s var(--ease) .45s,translate .8s var(--ease) .45s}
.bar{translate:0 -8px}
.dock{translate:0 8px}
.is-booked .bar,.is-booked .dock{opacity:1;translate:0 0}
.side{opacity:0}
.is-booked .side{opacity:1;transition-delay:.9s}
.is-booked .side[disabled]{opacity:0}
/* เต็มจอแล้วไม่ขยับเมาส์ ซ่อนเครื่องมือให้เห็นแต่เล่ม (จอประชุม) */
.is-idle .bar,.is-idle .dock,.is-idle .side,.is-idle .hint{opacity:0!important;transition:opacity .6s!important}
.is-idle,.is-idle *{cursor:none!important}

/* จอแคบหรือจอตั้ง: หน้าเดียว ปุ่มพลิกย้ายลงแถบล่าง */
@media (max-width:860px),(orientation:portrait) and (max-width:1180px){
  :root{--bar-h:4rem;--dock-h:4.9rem}
  .bar__where{display:none}
  .bar{justify-content:space-between}
  .side{display:none}
  .dock{gap:.8rem}
  .dock__btn{display:inline-flex}
  .dock__count{min-width:0;order:2;font-size:.8rem}
  .rail{order:1;flex:1;width:auto;height:2.6rem}
  .rail__seg > span{display:none}
  #dockNext{order:3}
  #dockPrev{order:0}
  .sheet__body{grid-template-columns:1fr}
  .chs{display:none}
  .find{margin:0}
}
@media (max-width:560px){
  .bar{gap:.6rem}
  .bar__brand{gap:.65rem}
  .bar__brand img{height:1.2rem}
  .bar__sep{height:1.2rem}
  .bar__title{font-size:.78rem}
  .bar__title b{font-weight:600}
  .tool{height:2.5rem;min-width:2.5rem;padding:0 .5rem}
  .tool--hide-s{display:none}
  .tool--pdf{margin-left:0;padding:0 .6rem}
  .tool--pdf span{display:none}
  .sheet__head h2{display:none}
  .thumbs{grid-template-columns:repeat(auto-fill,minmax(6.6rem,1fr));gap:1.1rem .8rem}
}
@media (max-width:380px){.bar__title b{display:none}}
@media (prefers-reduced-motion:reduce){
  .book-host,.bar,.dock,.side,.hint,.sheet,.zoom,.rail__knob,.rail__seg > i,.book-shadow{transition:none!important}
}

/* ฉากเปิด: ตรา ชื่อเล่ม ปี ขึ้นก่อน แล้วเล่มลอยขึ้นแทนที่ (ข้ามได้ด้วยคลิกหรือกดปุ่มใดก็ได้) */
.intro{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;transition:opacity .7s var(--ease),translate 1.1s var(--ease),scale 1.1s var(--ease)}
.intro p{margin:0}
.intro__logo{display:block;height:clamp(1.6rem,2.6vw,2.6rem);width:auto;opacity:0;translate:0 12px}
.intro__eye{margin-top:clamp(1.4rem,3.2vh,2.4rem)!important;font-size:.78rem;font-weight:600;letter-spacing:.5em;padding-left:.5em;color:var(--gold-3);opacity:0}
.intro__title{margin-top:.5rem!important;font-size:clamp(2.8rem,7vw,7.4rem);font-weight:600;line-height:1.04;letter-spacing:-.012em}
.intro__title span{display:inline-block;opacity:0;translate:0 .35em;filter:blur(10px)}
.intro__title span:last-child{color:var(--gold-3)}
.intro__year{display:flex;align-items:center;gap:1.1rem;margin-top:1.1rem!important;font-size:1.05rem;font-weight:500;letter-spacing:.2em;color:var(--ink-2);opacity:0}
.intro__year i{display:block;width:clamp(3rem,8vw,7rem);height:1px;background:linear-gradient(90deg,rgba(232,206,134,0),var(--gold-3));scale:0 1;transform-origin:100% 50%}
.intro__year i:last-child{background:linear-gradient(90deg,var(--gold-3),rgba(232,206,134,0));transform-origin:0 50%}
.is-ready .intro__logo{animation:ciUp .9s var(--ease) .05s forwards}
.is-ready .intro__eye{animation:ciFade .9s var(--ease) .3s forwards}
.is-ready .intro__title span{animation:ciWord 1s var(--ease) .38s forwards}
.is-ready .intro__title span:last-child{animation-delay:.52s}
.is-ready .intro__year{animation:ciFade .8s var(--ease) .78s forwards}
.is-ready .intro__year i{animation:ciLine 1s var(--ease) .82s forwards}
.is-booked .intro{opacity:0;translate:0 -9vh;scale:.94}
.is-skip .intro{display:none}
@keyframes ciUp{to{opacity:1;translate:0 0}}
@keyframes ciFade{to{opacity:1}}
@keyframes ciWord{to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes ciLine{to{scale:1 1}}
/* แสงผ้าไหมเคลื่อนช้ามาก ใช้ transform กับ opacity อย่างเดียว การ์ดจอทำ ไม่วาดใหม่ */
.ambient__silk{animation:ciSilk 30s ease-in-out infinite alternate}
.ambient__glow{animation:ciGlow 12s ease-in-out infinite alternate}
@keyframes ciSilk{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-4%,3%,0) scale(1.1)}}
@keyframes ciGlow{from{opacity:.7}to{opacity:1}}
/* ขอบกระดาษซ้อนสองข้างเล่ม หนาตามหน้าที่อ่านไปแล้วกับหน้าที่เหลือ */
.is-spread .book::before,.is-spread .book::after{content:"";position:absolute;top:.5%;bottom:.5%;z-index:0;width:calc(var(--s,0) * .62rem);opacity:calc(var(--s,0) * 40);background:repeating-linear-gradient(90deg,#f5f3ed 0 1px,#cbc6b8 1px 2px);box-shadow:0 0 0 1px rgba(0,0,0,.06);transition:width .6s var(--ease)}
.is-spread .book::before{--s:var(--sl,0);right:100%;border-radius:3px 0 0 3px}
.is-spread .book::after{--s:var(--sr,0);left:100%;border-radius:0 3px 3px 0}
/* บรรทัดสารบัญในเล่มกดไปหน้านั้นได้ */
.hot{position:absolute;z-index:3;margin:0;padding:0;border:0;border-radius:3px;background:transparent;cursor:pointer;transition:background-color .15s,box-shadow .15s}
.hot:hover,.hot:focus-visible{outline:none;background:rgba(31,93,51,.07);box-shadow:inset 0 0 0 1px rgba(31,93,51,.28)}
@media (prefers-reduced-motion:reduce){.intro{display:none}.ambient__silk,.ambient__glow{animation:none}}

/* โหมดเต็มจอ: เล่มขยายเต็มจอจริง */
/* Home 04/11/2569 "โหมดขยายให้ซ่อนทุกอย่าง เห็นแต่หนังสือ": เต็มจอแล้วไม่มีแถบ ไม่มีปุ่ม พลิกด้วยล้อเมาส์ แป้นพิมพ์ คลิก หรือลากมุม ออกด้วย Esc */
.is-full .bar,.is-full .dock,.is-full .side,.is-full .hint{display:none!important}

/* ปุ่มมีคำกำกับ (Home 04/11/2569 สับสนแว่นขยายค้นหากับขยาย) จอแคบเหลือแต่ไอคอน */
.tool--txt span{white-space:nowrap}
@media (max-width:1180px){.tool--txt span{display:none}}

/* ฝั่งว่างข้างปกตอนปิดเล่ม: ชื่อเล่มและปุ่มเปิดอ่าน (ปกหน้า) จบเล่มและปุ่มกลับ (ปกหลัง) เล่มไม่ต้องเลื่อน */
.cover-info{position:absolute;top:0;bottom:0;z-index:2;width:50%;display:flex;flex-direction:column;justify-content:center;gap:.2rem;padding:0 7%;visibility:hidden;opacity:0;transition:opacity .45s var(--ease),translate .6s var(--ease),visibility 0s .45s}
.cover-info p{margin:0}
.cover-info--front{left:0;align-items:flex-end;text-align:right;translate:-14px 0}
.cover-info--back{right:0;align-items:flex-start;text-align:left;translate:14px 0}
.is-front .cover-info--front,.is-back .cover-info--back{visibility:visible;opacity:1;translate:0 0;transition:opacity .6s var(--ease) .15s,translate .8s var(--ease) .15s,visibility 0s}
.is-portrait .cover-info{display:none}
.ci__eye{font-size:.72rem;font-weight:600;letter-spacing:.42em;margin-right:-.42em!important;color:var(--gold-3)}
.cover-info--back .ci__eye{letter-spacing:0;margin-right:0!important;font-size:.85rem}
.ci__title{margin-top:.55rem!important;font-size:clamp(1.9rem,4.6vh,3.6rem);font-weight:600;line-height:1.1;letter-spacing:-.01em}
.ci__title em{font-style:normal;color:var(--gold-3)}
.ci__desc{max-width:22rem;margin-top:.9rem!important;font-size:.88rem;line-height:1.7;color:var(--ink-2)}
.ci__meta{margin-top:.6rem!important;font-size:.78rem;color:var(--ink-3)}
.ci__ctas{display:flex;gap:.6rem;margin-top:1.5rem}
.ci__btn{display:inline-flex;align-items:center;height:2.8rem;padding:0 1.25rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:.86rem;font-weight:600;text-decoration:none;cursor:pointer;transition:background-color .2s,border-color .2s}
.ci__btn:hover{background:rgba(244,241,232,.07);border-color:rgba(232,206,134,.4)}
.ci__btn--pri{border-color:transparent;background:var(--gold-3);color:#0b2416}
.ci__btn--pri:hover{background:#f1dba0;border-color:transparent}
.ci__btn:focus-visible{outline:2px solid var(--gold-3);outline-offset:2px}

/* มือถือ: หน้าไม่เด้งไม่เลื่อน แถบที่อยู่ไม่ยืดหด เล่มจึงไม่ขยับ (Home 04/11/2569 "โดยเฉพาะในโทรศัพท์") ปัดซ้ายขวาเป็นของตัวพลิก ปัดขึ้นลงไม่ทำอะไร */
html,body{overscroll-behavior:none}
body{position:fixed;inset:0;width:100%}
.stage,.stf__parent{touch-action:none!important}
.sheet .pages,.sheet .chs{touch-action:pan-y;overscroll-behavior:contain}

/* ขอบกระดาษซ้อนเอาออก (Home DM 04/11/2569 11:49 "บัคเส้นขีดขาวๆ" ใกล้จบเล่มเหลือเส้นเดียวโผล่ตอนพลิก) */
.is-spread .book::before,.is-spread .book::after{display:none}

/* มือถือย้อนหน้า: หน้าพลิกกลับเข้ามาจากสันซ้ายทันที ไม่รอ */
.is-back-turn .book{animation:ciBack .46s var(--ease)}
@keyframes ciBack{from{transform:perspective(1400px) rotateY(-22deg) translateX(-8%);transform-origin:0 50%;opacity:.25}to{transform:perspective(1400px) rotateY(0) translateX(0);transform-origin:0 50%;opacity:1}}
@media (prefers-reduced-motion:reduce){.is-back-turn .book{animation:none}}