/* ==========================================================================
   present.css — โหมดนำเสนอเต็มจอ ทีละสไลด์

   วิธีคิด: สไลด์ถูกตรึงขนาดไว้ที่ 1120 x 630 px ซึ่งเป็นขนาดที่เลย์เอาต์
   ทุกหน้าถูกตรวจมาแล้วว่าไม่ล้นกรอบ แล้วค่อยย่อขยายทั้งแผ่นด้วย
   transform: scale() ให้พอดีจอ วิธีนี้ทำให้หน้าตาบนโปรเจกเตอร์
   เหมือนที่เห็นตอนแก้งานเป๊ะ ไม่มีข้อความไหลหรือกราฟล้นกรอบ
   ========================================================================== */

/* ---- ปุ่มเข้าโหมดนำเสนอ ---- */
.present-btn{
  position:fixed;right:20px;bottom:20px;z-index:40;
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--font);font-size:13.5px;font-weight:600;
  color:var(--white);background:var(--indigo);
  border:none;border-radius:99px;padding:12px 20px;cursor:pointer;
  box-shadow:0 4px 14px -4px rgba(43,2,244,.55);
}
.present-btn:hover{background:var(--indigo-dark)}
.present-btn kbd{
  font-family:var(--mono);font-size:11px;font-weight:500;
  background:rgba(255,255,255,.18);border-radius:4px;padding:2px 6px;
}

/* ---- โหมดนำเสนอ ---- */
body.present{overflow:hidden;background:var(--ink);--vw:11.2px}
body.present .present-btn{display:none}
body.present .deck{position:fixed;inset:0;display:block;padding:0;gap:0}
body.present .slide{display:none}

body.present .slide.is-live{
  display:flex;
  position:absolute;top:50%;left:50%;
  width:1120px;height:630px;max-width:none;
  aspect-ratio:auto;padding:var(--slide-pad);border-radius:0;
  transform:translate(-50%,-50%) scale(var(--present-scale,1));
  box-shadow:none;animation:none;
}
@media (prefers-reduced-motion:no-preference){
  body.present .slide.is-live{animation:present-fade .22s ease-out both}
  @keyframes present-fade{from{opacity:0}to{opacity:1}}
}

/* คืนค่าเลย์เอาต์สองคอลัมน์ที่จอแคบพับไว้ เพราะในโหมดนี้
   ความกว้างของสไลด์คงที่ 1120px เสมอ ไม่ขึ้นกับขนาดหน้าต่าง */
body.present .two{grid-template-columns:1fr 1fr;gap:34px}
body.present .two.wide-left{grid-template-columns:1.15fr .85fr}
body.present .two.wide-right{grid-template-columns:.85fr 1.15fr}
body.present .cards.c2{grid-template-columns:1fr 1fr}
body.present .cards.c3{grid-template-columns:repeat(3,1fr)}
body.present .title-main,
body.present .close-main{grid-template-columns:minmax(0,1fr) auto}
body.present .ch-main{grid-template-columns:minmax(0,1fr) auto}
body.present .title-logo,
body.present .close-mark,
body.present .ch-num{display:block}

/* ---- เลขหน้าบนพื้นหลังนอกกรอบสไลด์ ---- */
.present-count{
  display:none;position:fixed;right:22px;bottom:16px;z-index:41;
  font-family:var(--mono);font-size:13px;letter-spacing:.08em;
  color:#6C6F8C;pointer-events:none;
}
body.present .present-count{display:block}

/* ---- แผงคีย์ลัด แสดงสั้น ๆ ตอนเข้าโหมด ---- */
.present-hint{
  display:none;position:fixed;left:50%;bottom:22px;z-index:41;
  transform:translateX(-50%);
  font-family:var(--font);font-size:13px;color:#8A8DA6;
  background:rgba(255,255,255,.07);border-radius:99px;padding:9px 18px;
  pointer-events:none;
}
body.present .present-hint{display:block;animation:present-hint 3.4s ease-out both}
@keyframes present-hint{0%,70%{opacity:1}100%{opacity:0}}

@media print{
  .present-btn,.present-count,.present-hint{display:none!important}
}