:root{
  --bg:#071526;
  --card:#0b1b2a;
  --muted:#9fb4c9;
  --neon:#00d0ff;
  --accent:#7c4dff;
  --text:#e6f7ff;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#041024,#071526);color:var(--text);font-family:Poppins, "Kanit", system-ui, -apple-system}
.wrap{max-width:1200px;margin:18px auto;border-radius:12px;overflow:hidden;box-shadow:0 18px 60px rgba(2,6,23,0.6)}
.hdr{display:flex;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,0.03);background:linear-gradient(90deg,rgba(124,77,255,0.04),transparent)}
.logoBox{width:64px;height:64px;border-radius:12px;background:linear-gradient(180deg,rgba(0,208,255,0.06),rgba(124,77,255,0.04));display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,0.03)}
.logoBox img{max-width:100%;max-height:100%;display:block}
#logoPlaceholder{font-weight:800;color:var(--muted);font-size:11px}
.hdr-title{flex:1;min-width:0}
.project-title{font-family:Kanit;font-weight:800;font-size:18px;margin:0}
.project-sub{font-size:13px;color:var(--muted);margin-top:6px}
.hdr-actions{display:flex;gap:8px;align-items:center}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.06);padding:8px 12px;border-radius:10px;color:var(--text);cursor:pointer;font-weight:700}
.btn.primary{background:linear-gradient(90deg,var(--neon),var(--accent));color:#04131a;border:none;box-shadow:0 10px 30px rgba(124,77,255,0.12)}
.main{display:flex;min-height:560px}
.viewer{flex:1;position:relative;overflow:hidden}
.slides{display:flex;transition:transform .5s cubic-bezier(.2,.9,.3,1);width:100%;height:100%}
.slide{flex:0 0 100%;padding:34px 40px;display:flex;align-items:flex-start}
.slide.cover {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* ชิดด้านบน */
  align-items: center;         /* จัดให้อยู่กลางแนวนอน */
  min-height: 100vh;           /* สูงเต็มหน้าจอ */
  padding-top: 60px;           /* ระยะห่างจากขอบบน */
}
@media (max-width: 768px) {
  .slide.cover {
    padding-top: 40px; /* มือถืออาจต้องลดช่องว่าง */
  }

  .cover-th {
    font-size: 22px;
  }

  .cover-en {
    font-size: 14px;
  }
}

.cover-center{text-align:center}
.cover-th{font-family:Kanit;font-size:36px;margin:0;color:var(--text)}
.cover-en{font-size:16px;color:var(--muted);margin-top:8px}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);border-radius:12px;padding:20px;border:1px solid rgba(255,255,255,0.03);width:100%;box-shadow:0 8px 30px rgba(2,6,23,0.2)}
.h-th{font-family:Kanit;font-weight:800;font-size:20px;margin:0;color:var(--text)}
.h-en{font-weight:700;color:var(--muted);margin-top:6px;margin-bottom:12px}
.muted{color:var(--muted)}
.flow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.box{padding:10px 14px;border-radius:10px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.02);font-weight:700}
.box.primary{background:linear-gradient(90deg,rgba(0,208,255,0.05),rgba(124,77,255,0.04));border:1px solid rgba(0,208,255,0.12);color:var(--text)}
.arrow{font-weight:800;color:var(--neon);font-size:20px}
.tbl{width:100%;border-collapse:collapse}
.tbl td{padding:10px;border-bottom:1px solid rgba(255,255,255,0.02);color:var(--muted)}
.notes{width:360px;border-left:1px solid rgba(255,255,255,0.03);background:linear-gradient(180deg,rgba(6,12,18,0.9),rgba(8,18,30,0.96));padding:18px;overflow:auto}
.notes.hidden{display:none}
.footer{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-top:1px solid rgba(255,255,255,0.03)}
.controls{display:flex;gap:12px;align-items:center}
.pager{color:var(--muted);font-weight:700}
@media (max-width:980px){
  .notes{display:none}
  .main{flex-direction:column}
  .slide{padding:20px}
}
@media (max-width:640px){
  .project-title{font-size:16px}
  .cover-th{font-size:26px}
  .hdr-actions{gap:6px}
}
/* Mobile Layout (<= 768px) */
@media (max-width: 768px) {
  .hdr {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hdr-title {
    margin-top: 10px;
  }

  .hdr-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 10px;
  }

  .hdr-actions .btn {
    padding: 8px 4px;
    font-size: 12px;
  }

  .project-title {
    font-size: 18px;
    line-height: 1.3;
    white-space: normal;
  }

  .project-sub {
    font-size: 12px;
    white-space: normal;
  }

  .logoBox img, #logoPlaceholder {
    width: 60px;
    height: 60px;
  }
}