/* =====================================================================
   หน้าจอฝั่งเซลล์
   ออกแบบให้ใช้งานได้ดีทั้งบนมือถือต่อหน้าลูกค้า และบนจอคอมตอนเตรียมงาน
   ===================================================================== */
:root{
  --ink:#0A0C0F; --bar:#14171C; --bar2:#1B1F26; --line:#282D35;
  --text:#E8EAEE; --muted:#8B929B; --brand:#FFCE00; --brand-ink:#141414;
  --ok:#4FC98A; --r:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%}
body{height:100%;margin:0;overflow:hidden;position:fixed;inset:0}
body{background:var(--ink);color:var(--text);font-size:14.5px;
  font-family:'IBM Plex Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
  overscroll-behavior:none;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.app{display:flex;flex-direction:column;height:100%;min-height:0}

/* ---------------- แถบบน ---------------- */
.bar{display:flex;align-items:center;gap:12px;padding:11px 16px;background:var(--bar);
  border-bottom:1px solid var(--line);flex:none;min-height:58px}
.bar .who{flex:1;min-width:0}
.bar .who b{display:block;font-size:15px;font-weight:600;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .who small{color:var(--muted);font-size:11.5px}
.ico{width:40px;height:40px;flex:none;border:1px solid var(--line);border-radius:11px;
  background:var(--bar2);cursor:pointer;font-size:17px;line-height:1;
  display:grid;place-items:center;transition:border-color .12s,background .12s}
.ico:hover{border-color:#454C57;background:#232830}
.ico[aria-pressed=true]{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
@media(max-width:820px){#bMode{display:none}}
.ico:active{transform:scale(.95)}

/* ---------------- รายการเล่ม ---------------- */
.books{padding:18px;display:grid;gap:16px;overflow-y:auto;-webkit-overflow-scrolling:touch;align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  max-width:1180px;width:100%;margin:0 auto}
.bk{background:var(--bar);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:block;transition:border-color .14s,transform .14s}
.bk:hover{border-color:#4A525F;transform:translateY(-2px)}
.bk .cv{background:#0D1014;display:grid;place-items:center;position:relative;
  aspect-ratio:var(--ar,2/3)}
.bk .cv img{width:100%;height:100%;object-fit:cover;display:block}
.bk .cv span{color:#565D66;font-size:12px}
.bk .n{position:absolute;left:9px;top:9px;background:rgba(0,0,0,.62);backdrop-filter:blur(6px);
  border-radius:20px;padding:3px 10px;font-size:11px;font-weight:600}
.bk .m{padding:12px 13px 14px}
.bk .m b{display:block;font-size:14px;font-weight:600;line-height:1.4;margin-bottom:3px}
.bk .m small{color:var(--muted);font-size:11.5px}

/* ---------------- แถบหมวด ---------------- */
/* แถบหมวด ต้องเด่นพอให้คนเข้ามาครั้งแรกรู้ว่ากดได้
   เดิมสีจางเกินจนดูเหมือนข้อความประกอบ ไม่เหมือนปุ่ม */
.chips{display:flex;align-items:center;gap:6px;padding:8px 14px;overflow-x:auto;
  background:var(--bar);border-bottom:1px solid var(--line);flex:none;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chips:empty{display:none}

/* ป้ายนำหน้าแถบ บอกตรงๆ ว่านี่คือหมวด ไม่ต้องให้เดา */
.chips::before{content:'หมวด';flex:none;font-size:10.5px;color:var(--muted);
  letter-spacing:.05em;margin-right:1px;font-weight:600}

/* ย่อลงเพื่อให้ 20 หมวดขึ้นครบในจอเดียว
   ของเดิมกว้างรวม 2220px ล้นจอ 1920 ไปสามร้อยกว่า
   ย่อแล้วเหลือราว 1800px ขึ้นครบพอดี */
.chip{flex:none;border:1px solid #3C434E;background:var(--bar2);border-radius:16px;
  padding:6px 12px;font-size:11.5px;font-weight:500;cursor:pointer;white-space:nowrap;
  color:var(--text);transition:all .12s;line-height:1.4}
.chip:hover{border-color:var(--brand);color:var(--brand)}
.chip[aria-pressed=true]{background:var(--brand);color:var(--brand-ink);
  border-color:var(--brand);font-weight:600}

/* ---------------- ตัวอ่านหน้า ---------------- */
.view{flex:1;position:relative;min-height:0;overflow:hidden;display:grid;place-items:center;
  padding:26px 78px 34px;background:radial-gradient(ellipse at 50% 0%,#151A23 0%,var(--ink) 74%);
  touch-action:pan-y}
@media(max-width:760px){.view{padding:12px 12px 22px}}

/* กระดาษ — ขนาดจริงคำนวณด้วย JS แล้วกำหนดเป็นพิกเซล
   ไม่พึ่ง max-height ที่ต้องส่งต่อความสูงผ่านหลายชั้น */
.spread{display:flex;gap:0;align-items:center;justify-content:center}
.pg{margin:0;position:relative;line-height:0}
.pg img{display:block;background:#fff;opacity:0;transition:opacity .16s}
.pg img.on{opacity:1}

/* หน้าเดี่ยว */
.spread:not(.two) .pg img{border-radius:6px;box-shadow:0 14px 50px rgba(0,0,0,.7)}

/* หน้าคู่ — ขอบในตรง ขอบนอกมน มีเงาสันหนังสือตรงกลาง */
.spread.two .pg:first-child img{border-radius:6px 1px 1px 6px}
.spread.two .pg:last-child  img{border-radius:1px 6px 6px 1px}
.spread.two{box-shadow:0 14px 50px rgba(0,0,0,.7);border-radius:6px}
.spread.two::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:26px;
  transform:translateX(-50%);pointer-events:none;z-index:2;
  background:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.16) 42%,
    rgba(0,0,0,.22) 50%,rgba(0,0,0,.16) 58%,rgba(0,0,0,0) 100%)}
.spread{position:relative}

.pgn{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:10.5px;
  color:#5A626C;letter-spacing:.06em;line-height:1}
@media(max-height:640px){.pgn{display:none}}

.view .none{color:var(--muted);text-align:center;line-height:1.9;font-size:13.5px;
  padding:44px 26px;border:1px dashed #333942;border-radius:var(--r);max-width:340px}
.view .none b{display:block;color:var(--text);font-size:15px;margin-bottom:6px}

/* ปุ่มเลื่อนหน้าลอยบนพื้นหลัง — โผล่เฉพาะจอที่มีเมาส์ */
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;
  border-radius:50%;border:1px solid var(--line);background:rgba(20,23,28,.86);
  backdrop-filter:blur(8px);cursor:pointer;font-size:20px;line-height:1;
  display:none;place-items:center;color:var(--muted);z-index:2}
.arrow:hover{color:var(--text);border-color:#4A525F}
.arrow:disabled{opacity:.22;cursor:default}
.arrow.l{left:14px}.arrow.r{right:14px}
@media (hover:hover) and (pointer:fine){.arrow{display:grid}}

/* พื้นที่แตะซ้ายขวาสำหรับมือถือ */
.zone{position:absolute;top:0;bottom:0;width:26%;cursor:pointer;background:transparent;border:0;z-index:1}
.zone.l{left:0}.zone.r{right:0}
@media (hover:hover) and (pointer:fine){.zone{display:none}}

/* ---------------- แถบล่าง ---------------- */
.foot{display:flex;align-items:center;gap:14px;padding:10px 16px;background:var(--bar);
  border-top:1px solid var(--line);flex:none;min-height:54px}
.foot .pos{font-size:12.5px;color:var(--muted);white-space:nowrap}
.foot .pos b{color:var(--text);font-weight:600}
.dots{flex:1;display:flex;gap:5px;justify-content:center;align-items:center;overflow:hidden}
.dot{width:6px;height:6px;border-radius:50%;background:#333942;flex:none;cursor:pointer;
  transition:all .15s}
.dot:hover{background:#4A525F}
.dot.on{background:var(--brand);width:20px;border-radius:3px}
.nav{border:1px solid var(--line);background:var(--bar2);border-radius:10px;
  padding:9px 16px;cursor:pointer;font-size:13px;white-space:nowrap}
.nav:hover{border-color:#454C57}
.nav:disabled{opacity:.3;cursor:default}
@media(max-width:520px){.foot .nav{padding:9px 12px}.foot{gap:9px}}

/* ---------------- แผงเลื่อน ---------------- */
.sheet{position:fixed;inset:0;background:var(--ink);z-index:40;display:none;flex-direction:column}
.sheet.on{display:flex}
.sheet .body{flex:1;overflow-y:auto;padding:16px;max-width:900px;width:100%;margin:0 auto}
.sbar{display:flex;gap:9px;padding:12px 16px;background:var(--bar);border-bottom:1px solid var(--line)}
.sbar input{flex:1;background:var(--bar2);border:1px solid var(--line);border-radius:11px;
  padding:12px 14px;font-size:15px}
.sbar input:focus{border-color:#454C57}
.filters{display:flex;gap:8px;padding:0 16px 12px;background:var(--bar);overflow-x:auto;
  border-bottom:1px solid var(--line);scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}

.res{border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;margin-bottom:10px;
  cursor:pointer;background:var(--bar);transition:border-color .12s}
.res:hover{border-color:#4A525F}
.res b{display:block;font-size:14.5px;font-weight:600;margin-bottom:4px;line-height:1.4}
.res small{color:var(--muted);font-size:12.5px;line-height:1.6;display:block}
.res .pin{color:var(--brand);font-size:11.5px;font-weight:600;margin-top:7px;display:block}
.res .rd{display:inline-block;background:#12321F;color:var(--ok);border-radius:20px;
  padding:2px 9px;font-size:10.5px;margin-left:7px;vertical-align:middle;font-weight:600}
.empty{color:var(--muted);text-align:center;padding:52px 22px;line-height:1.9;font-size:14px}
.empty small{font-size:12.5px;opacity:.8}

.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px;align-items:start}
.pcell{border:1px solid var(--line);border-radius:11px;overflow:hidden;background:var(--bar);
  cursor:pointer;position:relative;transition:border-color .12s}
.pcell:hover{border-color:#4A525F}
.pcell[aria-current=true]{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.pcell .t{background:#0D1014;display:grid;place-items:center;aspect-ratio:var(--ar,2/3)}
.pcell .t img{width:100%;height:100%;object-fit:cover;display:block}
.pcell .t span{color:#565D66;font-size:10.5px}
.pcell b{position:absolute;top:6px;left:7px;background:rgba(0,0,0,.66);backdrop-filter:blur(6px);
  border-radius:20px;padding:2px 8px;font-size:10.5px;font-weight:600}
.pcell .lb{display:block;padding:8px 9px;font-size:11px;line-height:1.35;height:40px;overflow:hidden}

/* ---------------- แถบติดต่อฝั่งลูกค้า ---------------- */
.contactbar{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--bar);
  border-top:1px solid var(--line);flex:none;flex-wrap:wrap}
.cb-who{flex:1;min-width:130px}
.cb-who b{display:block;font-size:14px;font-weight:600}
.cb-who small{color:var(--muted);font-size:11.5px}
.cb-btn{border:1px solid var(--line);background:var(--bar2);border-radius:10px;
  padding:9px 15px;font-size:13px;white-space:nowrap;font-weight:500}
.cb-btn:hover{border-color:#4A525F}
.cb-btn.line{background:#06C755;border-color:#06C755;color:#fff}
@media(max-width:520px){.contactbar{padding:9px 12px;gap:8px}.cb-btn{padding:8px 12px;font-size:12.5px}}

/* ---------------- โหมดเลือกหน้าทำเล่มให้ลูกค้า ---------------- */
.pcell .tick{position:absolute;top:6px;right:7px;width:22px;height:22px;border-radius:50%;
  border:2px solid rgba(255,255,255,.5);background:rgba(0,0,0,.45);display:none;
  align-items:center;justify-content:center;font-size:12px;font-weight:700}
.pgrid.pick .pcell .tick{display:flex}
.pcell.sel{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.pcell.sel .tick{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.gridbar{display:flex;gap:9px;padding:12px 16px;background:var(--bar);border-top:1px solid var(--line)}
.gridbar button{flex:1;border:1px solid var(--line);background:var(--bar2);border-radius:11px;
  padding:12px;cursor:pointer;font-size:13.5px}
.gridbar button.go{background:var(--brand);color:var(--brand-ink);border-color:var(--brand);font-weight:600}
.gridbar button:disabled{opacity:.38;cursor:default}

.dlg{position:fixed;inset:0;background:rgba(0,0,0,.76);z-index:60;display:none;
  align-items:center;justify-content:center;padding:20px}
.dlg.on{display:flex}
.dlg-in{background:var(--bar);border:1px solid var(--line);border-radius:16px;
  width:min(460px,100%);padding:22px}
.dlg-in h3{margin:0 0 6px;font-size:17px}
.dlg-in p{color:var(--muted);font-size:12.5px;margin:0 0 16px;line-height:1.6}
.dlg-in label{display:block;font-size:12px;color:var(--muted);margin-bottom:12px}
.dlg-in input{display:block;width:100%;margin-top:5px;background:var(--bar2);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;font-size:14.5px}
.dlg-row{display:flex;gap:9px;margin-top:6px}
.dlg-row button{flex:1;border:1px solid var(--line);background:var(--bar2);border-radius:11px;
  padding:12px;cursor:pointer}
.dlg-row button.go{background:var(--brand);color:var(--brand-ink);border-color:var(--brand);font-weight:600}
.linkout{background:var(--bar2);border:1px solid var(--line);border-radius:10px;padding:12px;
  font-size:12.5px;word-break:break-all;color:var(--brand);font-family:ui-monospace,monospace;
  margin-bottom:14px;line-height:1.5}

/* ---------------- ธีมสว่าง ---------------- */
html[data-theme="light"]{
  --ink:#EEF0F4; --bar:#FFFFFF; --bar2:#F5F7F9; --line:#DFE4EA;
  --text:#171A1F; --muted:#68707C; --brand:#FFC800; --brand-ink:#1A1600;
}
html[data-theme="light"] body{background:var(--ink);color:var(--text)}
html[data-theme="light"] .bar{box-shadow:0 1px 3px rgba(16,24,40,.06)}
html[data-theme="light"] .view{background:radial-gradient(ellipse at 50% 0%,#FFFFFF 0%,#E4E8ED 78%)}
html[data-theme="light"] .pg img,
html[data-theme="light"] .spread.two{box-shadow:0 10px 34px rgba(16,24,40,.22)}
html[data-theme="light"] .arrow{background:rgba(255,255,255,.9)}
html[data-theme="light"] .bk .cv,
html[data-theme="light"] .pcell .t{background:#E9ECF0}
html[data-theme="light"] .dot{background:#C6CCD4}
html[data-theme="light"] .pgn{color:#98A0AA}
html[data-theme="light"] .cb-btn.line{color:#fff}

.cb-quiet{font-size:11.5px;color:var(--muted);padding:8px 6px;opacity:.55}
.cb-quiet:hover{opacity:1}

/* หัวข้อและคำอธิบายบนแถบด้านบนของหน้าสาธารณะ */
.bar .who.big b{font-size:20px;line-height:1.25;letter-spacing:-.01em}
@media(max-width:640px){.bar .who.big b{font-size:17px}}
.who.big .who-desc{margin-top:3px}

.who-desc{margin:2px 0 3px;font-size:12.5px;line-height:1.45;color:var(--muted);
  font-weight:400;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
@media(max-width:640px){.who-desc{-webkit-line-clamp:1;font-size:12px}}
.bar:has(.who-desc){min-height:auto;padding-top:9px;padding-bottom:9px}

/* ---------------- เมนูขนาดกระดาษฝั่งเซลล์ ---------------- */
.snav{display:flex;gap:8px;padding:12px 16px;background:var(--bar);
  border-bottom:1px solid var(--line);flex:none;overflow-x:auto;scrollbar-width:none}
.snav::-webkit-scrollbar{display:none}
.snav a{flex:1;min-width:104px;border:1px solid var(--line);background:var(--bar2);
  border-radius:11px;padding:10px 14px;text-align:center;line-height:1.25}
.snav a b{display:block;font-size:14px;font-weight:600;color:var(--text)}
.snav a small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.snav a:hover{border-color:#454C57}
.snav a[aria-current=page]{background:var(--brand);border-color:var(--brand)}
.snav a[aria-current=page] b,.snav a[aria-current=page] small{color:var(--brand-ink)}
.snav a[aria-current=page] small{opacity:.72}

/* ---------------- ตารางสื่อโปรโมท ---------------- */
.promogrid{padding:16px;display:grid;gap:16px;overflow-y:auto;align-items:start;
  max-width:1180px;width:100%;margin:0 auto}
.promogrid.square{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.promogrid.story{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.pm{margin:0;background:var(--bar);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:border-color .14s,transform .14s}
.pm:hover{border-color:var(--brand);transform:translateY(-2px)}
.pm-img{display:block;position:relative;background:#0D1014}
.pm-img img{width:100%;height:100%;object-fit:cover;display:block}
.pm-dl{position:absolute;inset:auto 0 0 0;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,0));
  color:#fff;font-size:12px;font-weight:600;padding:22px 10px 10px;text-align:center;
  opacity:0;transition:opacity .14s}
.pm:hover .pm-dl{opacity:1}
@media (hover:none){.pm-dl{opacity:1}}
.pm figcaption{padding:10px 12px 12px}
.pm figcaption b{display:block;font-size:12.5px;font-weight:600;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pm figcaption small{display:block;font-size:11px;color:var(--muted);margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chips a.chip{text-decoration:none}
a.res{display:block;text-decoration:none}

/* ---------------- แถบติดต่อ ปรับใหม่ ---------------- */
.contactbar{display:flex;align-items:center;gap:14px;padding:11px 16px;background:var(--bar);
  border-top:1px solid var(--line);flex:none}
.cb-who{flex:1;min-width:0}
.cb-who b{display:block;font-size:14px;font-weight:600;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-who small{display:block;color:var(--muted);font-size:11.5px;line-height:1.4;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-acts{display:flex;gap:8px;flex:none;align-items:center}
.cb-btn .ico2{display:none}
.cb-btn.quote{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:600}
.cb-btn.quote:hover{filter:brightness(1.06)}

/* บนมือถือ ข้อความติดต่อยาวจะกินพื้นที่กระดาษไปเยอะ
   จึงซ่อนข้อความทั้งหมด เหลือแต่ปุ่มเรียงเต็มความกว้าง
   ปุ่มขอใบเสนอราคาได้พื้นที่มากกว่าเพื่อน เพราะเป็นสิ่งที่อยากให้กดที่สุด */
@media(max-width:720px){
  .contactbar{padding:8px 10px;gap:0}
  .cb-who{display:none}
  .cb-acts{flex:1;gap:6px}
  .cb-btn{flex:1;text-align:center;padding:11px 6px;font-size:12.5px;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cb-btn.quote{flex:1.8}
  .cb-btn .lbl{display:none}
  .cb-btn .ico2{display:inline}
}

/* ---------------- ปุ่มตัวหนังสือบนแถบบน ----------------
   เปลี่ยนจากไอคอนเป็นคำ เพราะผู้ใช้ไม่รู้ว่าไอคอนกดได้ */
.tbtn{height:40px;flex:none;border:1px solid var(--line);border-radius:11px;
  background:var(--bar2);cursor:pointer;font:inherit;font-size:13px;color:var(--text);
  padding:0 16px;white-space:nowrap;line-height:1}
.tbtn:hover:not(:disabled){border-color:#454C57;background:var(--bar3,var(--bar2))}
.tbtn:disabled{opacity:.4;cursor:default}
@media(max-width:760px){.tbtn{padding:0 11px;font-size:12px}}

/* ---------------- โหมดเรียงสามหน้า ----------------
   หน้ากลางคือหน้าที่กำลังอ่าน สองข้างเป็นหน้าก่อนและหน้าถัดไป
   ให้เห็นว่ายังมีหน้าอื่นอยู่ และกดที่หน้าข้างเพื่อเลื่อนได้ */
.spread.peek{gap:20px;box-shadow:none;border-radius:0}
.spread.peek::after{display:none}
.spread.peek .pg{transition:opacity .18s}
.spread.peek .pg img{border-radius:6px}

.spread.peek .pg.active img{box-shadow:0 14px 50px rgba(0,0,0,.7)}
.spread.peek .pg.side{opacity:.34;cursor:pointer}
.spread.peek .pg.side img{box-shadow:0 8px 26px rgba(0,0,0,.5)}
.spread.peek .pg.side:hover{opacity:.72}
.spread.peek .pg.ghost{opacity:0;pointer-events:none}
.spread.peek .pg.side .pgn{opacity:.7}

/* ---------------- ดูหน้าใหญ่ ----------------
   ภาพหน้าที่ระบบสร้างไว้มีความละเอียดสองเท่าของขนาดกระดาษ
   จึงขยายดูได้จริงโดยไม่แตก ไม่ต้องโหลดไฟล์อื่นเพิ่ม */
.zoomer{position:fixed;inset:0;height:100dvh;z-index:250;background:rgba(6,8,11,.96);
  display:flex;flex-direction:column}
.zoomer[hidden]{display:none}

.zm-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;flex:none;
  background:var(--bar);border-bottom:1px solid var(--line)}
.zm-t{font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zm-bar .spacer{flex:1}
.zm-btn{height:36px;border:1px solid var(--line);border-radius:9px;background:var(--bar2);
  color:var(--text);font:inherit;font-size:12.5px;padding:0 15px;cursor:pointer;flex:none}
.zm-btn:hover{border-color:#454C57}

/* จำกัดขนาดด้วยหน่วยที่อ้างอิงขนาดจอโดยตรง ไม่ใช้เปอร์เซ็นต์ของกล่องแม่
   เพราะเปอร์เซ็นต์ต้องรอให้กล่องแม่รู้ความสูงก่อน ถ้ายังไม่รู้ ทั้งบรรทัดจะใช้ไม่ได้
   แล้วภาพจะกลายเป็นขนาดจริงจนล้นออกนอกจอ เห็นไม่ครบทั้งภาพ

   หักแถบบน 56 และแถบคำอธิบายล่าง 40 ออกจากความสูงจอ
   บวกช่องไฟอีกเล็กน้อย รวมเป็น 118

   นี่คือความผิดพลาดแบบเดียวกับที่แก้ไปแล้วในแพตช์ v70 ตอนคลังรูป */
.zm-stage{flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;
  justify-content:center;padding:14px}
.zm-stage img{max-width:calc(100vw - 34px);max-height:calc(100dvh - 118px);
  width:auto;height:auto;object-fit:contain;display:block;
  border-radius:5px;background:#fff;cursor:zoom-in;box-shadow:0 14px 50px rgba(0,0,0,.6)}

/* ขยายเต็มความละเอียด เลื่อนดูได้ */
.zm-stage.big{overflow:auto;place-items:start center;cursor:grab;padding:0;
  overscroll-behavior:contain}
/* ขยายเท่าความละเอียดจริงของไฟล์ ไม่ใช่เท่าจอ
   ภาพหน้าถูกสร้างที่ 2000x3000 การขยายเกินกว่านั้นจะเบลอโดยไม่ได้รายละเอียดเพิ่ม */
.zm-stage.big img{max-width:none;max-height:none;width:auto;height:auto;
  border-radius:0;cursor:grab;box-shadow:none}
.zm-stage.big:active{cursor:grabbing}

.zm-hint{flex:none;text-align:center;font-size:11.5px;color:var(--muted);
  padding:8px 14px 12px}

@media(max-width:700px){
  .zm-btn{padding:0 12px}
}

/* หมวดที่กำลังดูอยู่ ให้เด่นกว่าเดิมด้วยเงาเรือง จะได้เห็นทันทีว่าอยู่หมวดไหน */
.chip[aria-pressed=true]{box-shadow:0 0 0 3px rgba(255,206,0,.18);font-weight:600}
html[data-theme="light"] .chip{border-color:#D6D9DE;color:#2A2A2A;background:#fff}
html[data-theme="light"] .chip:hover{border-color:#C79A00;color:#8A6D00}
html[data-theme="light"] .chips::before{color:#7A7F87}

/* ---------------- แถบหมวดแบบมีพื้นสี ----------------
   พื้นสีอ่อนทำให้แยกออกทันทีว่าเป็นส่วนที่กดได้ ไม่ใช่ข้อความประกอบ
   ปุ่มข้างในจึงต้องเป็นโทนสว่างเสมอ ไม่ว่าผู้ใช้จะเปิดโหมดมืดหรือสว่าง */
.chips.tinted{border-bottom:1px solid rgba(0,0,0,.10)}
.chips.tinted::before{color:rgba(0,0,0,.5)}
.chips.tinted .chip{background:rgba(255,255,255,.82);border-color:rgba(0,0,0,.14);
  color:#2A2A2A}
.chips.tinted .chip:hover{background:#fff;border-color:rgba(0,0,0,.34);color:#111}
.chips.tinted .chip[aria-pressed=true]{background:#1E1E1E;color:#FFD84D;
  border-color:#1E1E1E;box-shadow:none}

/* มือถือเลื่อนอยู่แล้ว ไม่ต้องบีบให้ครบจอ ให้กดง่ายสำคัญกว่า */
@media(max-width:700px){
  .chip{font-size:12.5px;padding:7px 14px}
  .chips{gap:7px;padding:9px 12px}
}

/* =====================================================================
   มุมมองสารบัญข้าง  /browse
   หมวดอยู่ซ้าย ภาพหน้าอยู่ขวา เห็นทุกหน้าในหมวดพร้อมกัน
   เหมาะกับตอนที่ยังไม่รู้ว่าอยากดูอะไร และเหมาะกับหมวดเยอะๆ
   ===================================================================== */
body.browsepage{margin:0;background:var(--bg);color:var(--text)}
.bw{display:flex;flex-direction:column;height:100dvh}
.bw-body{flex:1;min-height:0;display:flex}

/* ---- สารบัญหมวด ---- */
.bw-side{flex:none;width:250px;overflow-y:auto;border-right:1px solid var(--line);
  background:var(--bar);padding:10px 0;scrollbar-width:thin}
.bw-cat{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;
  text-align:left;font:inherit;font-size:13px;color:var(--text);cursor:pointer;
  padding:11px 16px;line-height:1.35;border-left:3px solid transparent}
.bw-cat:hover{background:rgba(0,0,0,.05)}
.bw-cat .n{flex:none;font-size:10.5px;color:var(--muted);font-weight:600;min-width:18px}
.bw-cat .t{flex:1;min-width:0}
.bw-cat .c{flex:none;font-size:10.5px;color:var(--muted);
  background:rgba(0,0,0,.07);border-radius:20px;padding:2px 8px}
.bw-cat.on{background:var(--brand);color:var(--brand-ink);font-weight:600;
  border-left-color:#1E1E1E}
.bw-cat.on .n,.bw-cat.on .c{color:var(--brand-ink);opacity:.75}

/* ---- ภาพหน้าในหมวด ---- */
.bw-main{flex:1;min-width:0;overflow-y:auto;padding:22px 24px 40px}
.bw-sec{display:none}
.bw-sec.on{display:block}
.bw-h{margin:0;font-size:24px;font-weight:700}
.bw-sub{margin:4px 0 18px;font-size:12.5px;color:var(--muted)}

/* ช่องกว้างขึ้นจาก 230 เป็น 300 เพราะรูปถูกย่อจากกระดาษ 1000 เหลือเท่าความกว้างช่อง
   230 ทำให้ตัวหนังสือในรูปเหลือ 4-5 พิกเซล ซึ่งอ่านไม่ออกเลย */
.bw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.bw-cell{margin:0;cursor:zoom-in}
.bw-cell img{width:100%;height:auto;display:block;border-radius:8px;background:#fff;
  border:1px solid var(--line);transition:transform .12s,box-shadow .12s}
.bw-cell:hover img{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.22)}
.bw-cell figcaption{margin-top:8px;font-size:12px;color:var(--muted);line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical}

.bw-foot{flex:none;padding:12px 20px;border-top:1px solid var(--line);
  background:var(--bar);font-size:12px;color:var(--muted);line-height:1.6}

/* ---- จอแคบ สารบัญกลายเป็นแผ่นเลื่อนออกมา ---- */
@media(max-width:860px){
  .bw-side{position:fixed;left:0;top:0;bottom:0;z-index:120;width:82%;max-width:300px;
    transform:translateX(-100%);transition:transform .18s;box-shadow:0 0 40px rgba(0,0,0,.4)}
  body.navopen .bw-side{transform:none}
  body.navopen::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:110}
  .bw-main{padding:16px 14px 32px}
  .bw-grid{grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:14px}
  .bw-h{font-size:19px}
}
@media(min-width:861px){ #bNav{display:none} }

@media(max-width:700px){
  .zm-stage{padding:10px}
  .zm-stage img{max-width:calc(100vw - 22px);max-height:calc(100dvh - 132px)}
}

/* ---------------- มุมมองสารบัญข้าง บนจอแคบ ----------------
   ของเดิมซ่อนสารบัญไว้หลังปุ่ม คนเปิดมาจึงไม่รู้ว่ามีหมวดอื่น
   เปลี่ยนเป็นแถบหมวดแนวนอนที่เห็นตลอด กดทีเดียวเปลี่ยนหมวดได้เลย
   ไม่ต้องเปิดแผ่นเลื่อนก่อนแล้วค่อยเลือก */
@media(max-width:860px){
  /* แถบหัวตัดเป็นสองบรรทัด ชื่อบรรทัดบน ปุ่มบรรทัดล่าง
     ของเดิมเรียงแถวเดียวแล้วปุ่มไปทับข้อความ */
  .browsepage .bar{flex-wrap:wrap;gap:8px 10px;padding:10px 14px;min-height:auto}
  .browsepage .bar .who{flex:1 1 100%;min-width:0}
  .browsepage .bar .who b{font-size:14.5px}
  .browsepage .who-desc{-webkit-line-clamp:2;font-size:11.5px;margin:3px 0 0}
  .browsepage .bar .ico,
  .browsepage .bar .tbtn{height:34px;font-size:12px;padding:0 13px}

  /* สารบัญกลายเป็นแถบหมวดแนวนอน อยู่ใต้แถบหัว เห็นตลอดเวลา */
  .browsepage .bw-side{position:static;transform:none;width:auto;max-width:none;
    box-shadow:none;display:flex;gap:7px;overflow-x:auto;overflow-y:hidden;
    padding:9px 12px;border-right:0;border-bottom:1px solid var(--line);
    scrollbar-width:none}
  .browsepage .bw-side::-webkit-scrollbar{display:none}
  .browsepage .bw-body{flex-direction:column}

  .browsepage .bw-cat{width:auto;flex:none;border-left:0;border-radius:16px;
    border:1px solid rgba(0,0,0,.16);background:rgba(255,255,255,.78);
    padding:7px 13px;gap:6px;font-size:12px;white-space:nowrap;color:#2A2A2A}
  .browsepage .bw-cat .n{display:none}
  .browsepage .bw-cat .c{background:rgba(0,0,0,.09);padding:1px 6px;font-size:10px}
  .browsepage .bw-cat.on{background:#1E1E1E;color:#FFD84D;border-color:#1E1E1E}
  .browsepage .bw-cat.on .c{background:rgba(255,255,255,.18);color:#FFD84D;opacity:1}

  /* ไม่ต้องมีฉากดำคลุมอีก เพราะไม่มีแผ่นเลื่อนแล้ว */
  body.navopen::after{display:none}
}

/* ---------------- สารบัญที่มีพื้นสี ----------------
   พื้นของสารบัญเป็นสีอ่อนตายตัวตามที่ตั้งไว้ในค่าตั้งต้น
   แต่สีตัวหนังสือเดิมผูกกับโหมดสว่างมืด พอเปิดโหมดมืดจึงเป็นตัวอ่อนบนพื้นอ่อน

   บังคับให้ตัวหนังสือเป็นสีเข้มเสมอเมื่อมีพื้นสี ไม่ว่าผู้ใช้จะใช้โหมดไหน
   เป็นหลักเดียวกับแถบหมวดที่แก้ไปแล้ว */
.bw-side.tinted .bw-cat{color:#2A2A2A}
.bw-side.tinted .bw-cat .n{color:rgba(0,0,0,.45)}
.bw-side.tinted .bw-cat .c{color:rgba(0,0,0,.55);background:rgba(0,0,0,.08)}
.bw-side.tinted .bw-cat:hover{background:rgba(0,0,0,.07);color:#000}

/* หมวดที่กำลังดู ใช้พื้นเข้มตัดกับพื้นอ่อน เห็นชัดที่สุด */
.bw-side.tinted .bw-cat.on{background:#1E1E1E;color:#FFD84D;border-left-color:#FFB800}
.bw-side.tinted .bw-cat.on .n{color:#FFD84D;opacity:.7}
.bw-side.tinted .bw-cat.on .c{color:#FFD84D;background:rgba(255,255,255,.16);opacity:1}

/* ปุ่มกลับเว็บหลัก แยกด้วยสีให้รู้ว่าออกจากระบบนี้ */
.tbtn.home{border-color:#454C57}
.tbtn.home::after{content:' ↗';opacity:.6;font-size:11px}