* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; scroll-behavior: smooth; }

body {
  font-family: "Noto Sans Thai", sans-serif;
  background: linear-gradient(180deg,#f9fafb 0%,#eef7f1 100%);
  color: #1f2937;
}

/* Header */
.site-header {
  text-align: center;
  padding: 24px 16px;
  background: #fff;
  border-bottom: 4px solid #22c55e;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header h1 {
  font-size: clamp(1.3rem,2.5vw,1.8rem);
  color: #14532d;
  font-weight: 700;
}
.site-header p {
  color: #374151;
  margin-top: 6px;
  font-size: 0.95rem;
}


/* Layout */
.poster-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0;
  gap: 40px;
}

.poster {
  width: 100%;
  max-width: 1200px;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.poster.visible {
  opacity: 1;
  transform: translateY(0);
}
.poster:hover {
  transform: scale(1.01);
  transition: transform 0.3s ease;
}

.poster img {
  width: 90%;          /* ลดขนาดลงเล็กน้อยจากเต็มจอ */
  max-width: 1100px;   /* จำกัดความกว้างสูงสุดสำหรับจอใหญ่ */
  height: auto;
  display: block;
  margin: 0 auto;      /* จัดกึ่งกลาง */
  border-radius: 8px;  /* เพิ่มขอบมน (เลือกได้) */
}

/* Footer */
.site-footer {
  text-align: center;
  padding: 20px 0 30px;
  color: #6b7280;
  font-size: 0.9rem;
}

/* Back to top button */
#backToTop {
  position: fixed;
  bottom: 30px;
  right: 25px;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  background-color: #22c55e;
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  display: none;
  transition: background 0.2s ease;
}
#backToTop:hover {
  background-color: #16a34a;
}

/* Responsive */
@media (max-width:900px){
  .poster {max-width:95%;}
  .poster-container{gap:25px;}
  #backToTop{width:40px;height:40px;font-size:1.2rem;}
}
