/* Reset */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@400;700&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Sarabun", sans-serif; background: #f5faff; color: #333; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }

/* Header */
header { display: flex; align-items: center; background: #02A33F; color: white; padding: 15px; flex-wrap: wrap; border-radius: 8px 8px 0 0; box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); }
header .logo img {height: 70px;margin-right: 15px;transition: transform 4s ease;  }
header .logo img:hover {transform: rotateY(360deg); }
header .title h1 { font-size: 32px; }
header .title h2 { font-size: 24px; font-weight: normal; }
.hamburger { display: none; font-size: 26px; cursor: pointer; margin-left: auto; }
header, nav#navbar {  box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.4); }

/* Navbar */
nav { background: #028a36; border-radius: 0 0 8px 8px; }
nav ul { display: flex; list-style: none; padding: 10px; flex-wrap: wrap; justify-content: center; }
nav ul li { margin: 0 15px; position: relative; }
nav ul li a { color: white; text-decoration: none; font-weight: bold; padding: 8px; display: block; transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;}
nav ul li a:hover {
  text-decoration: underline;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  /* เพิ่ม Box Shadow เพื่อสร้างเงาและมิติ */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
  /* ใช้ Transform เพื่อยกองค์ประกอบขึ้นเล็กน้อย */
  transform: translateY(-5px);
}

/* Dropdown Menu */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #02A33F;
  min-width: 200px;
  border-radius: 0 0 8px 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  z-index: 9999;
}
.dropdown-content li a {
  padding: 10px 15px;
  font-weight: normal;
  white-space: nowrap;
}
.dropdown-content li a:hover {
  background: #028a36;
  color: #fff;
}
.dropdown:hover .dropdown-content {
  display: block;
}

/* Responsive Dropdown for Mobile */
@media (max-width: 768px) {
  .dropdown-content {
    position: static;
    background: #028a36;
    width: 100%;
    box-shadow: none;
  }
  .dropdown-content li a {
    padding-left: 30px;
    border-top: 1px solid rgba(255,255,255,0.2);
  }
}

/* Main Layout */
main { display: flex; padding: 20px 0; gap: 20px; }
.sidebar { width: 250px; background: #e3f2fd; padding: 15px; border-radius: 8px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4); }
.sidebar img.executive-img { width: 70%; display: block; margin: 0 auto 10px; border-radius: 10px; box-shadow: 3px 5px 2px rgba(0, 0, 0, 0.4);}
.sidebar h3 { font-size: 14px; text-align: center; margin-bottom: 15px; }
.menu-toggle { display: none; background: #02A33F; color: white; padding: 8px; border-radius: 5px; cursor: pointer; margin-bottom: 10px; text-align: center; }
.menu-box { margin-bottom: 15px; }
.menu-box h4 { background: #02A33F; color: white; padding: 5px; border-radius: 5px; margin-bottom: 8px; font-size: 16px; }
.menu-box ul { list-style: none; }
.menu-box ul li { margin-bottom: 5px; }
.menu-box ul li a {
  text-decoration: none;
  color: #0077b6;
  font-weight: bold;
  display: block;
  padding: 5px;
  border-radius: 5px;
  /* เพิ่ม transition เพื่อให้การเปลี่ยนแปลงราบรื่น */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.menu-box ul li a:hover {
  background: #d1f0e0;
  /* เพิ่ม box-shadow เพื่อสร้างเงาและความลึก */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  /* ยกองค์ประกอบขึ้นเล็กน้อย */
  transform: translateY(-3px);
}
.menu-box.show { display: block; }

/* Sidebar ข่าวกิจกรรม */
#activity-menu h4 {
  background: #02A33F;   /* เขียวเหมือนเมนูอื่น */
  color: white;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 8px;
  font-size: 16px;
}

#activity-menu ul li a {
  text-decoration: none;
  color: #0077b6;
  font-weight: bold;
  display: block;
  padding: 5px;
  border-radius: 5px;
  /* เพิ่ม transition เพื่อให้การเปลี่ยนแปลงราบรื่น */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

#activity-menu ul li a:hover {
  background: #d1f0e0;
  /* เพิ่ม box-shadow เพื่อสร้างเงาและความลึก */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  /* ยกองค์ประกอบขึ้นเล็กน้อย */
  transform: translateY(-3px);
}

/* Content */
.content { flex: 1; }
.section { display: none; }
.section.active { display: block; }
.news-box { background: white; padding: 15px; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); }
.news-box h2 { background: #02A33F; color: white; padding: 8px; border-radius: 5px; margin-bottom: 10px; font-size: 18px; }
.news-box p { margin-bottom: 10px; }

/* Tabs */
.tabs { margin-bottom: 10px; }
.tab-btn { background: #ddd; border: none; padding: 8px 12px; margin-right: 5px; cursor: pointer; border-radius: 5px; }
.tab-btn.active { background: #02A33F; color: white; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.gallery img {
  width: 100%;
  aspect-ratio: 16 / 9;   /* หรือใช้ 4/3 ก็ได้ */
  object-fit: cover;      /* ครอบรูปให้อยู่ในกรอบ */
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  filter: saturate(70%);
}

.gallery img:hover {
  transform: scale(1.15);
  filter: saturate(170%);
  box-shadow: 5px 8px 3px rgba(0, 0, 0, 0.5);
}

/* Lightbox */
.lightbox { display: none; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 1000; }
.lightbox img { max-width: 90%; max-height: 80%; border-radius: 10px; }
.lightbox .close { position: absolute; top: 20px; right: 30px; font-size: 40px; color: white; cursor: pointer; }

/* Footer */
footer { text-align: center; padding: 15px; background: #02A33F; color: white; margin-top: 20px; border-radius: 8px; box-shadow: 3px 5px 5px rgba(0, 0, 0, 0.3); }

/* Responsive */
@media (max-width: 768px) {
  header { justify-content: center; text-align: center; }
  .hamburger { display: block; }
  nav ul { display: none; flex-direction: column; align-items: center; }
  nav.show ul { display: flex; }
  main { flex-direction: column; }
  .sidebar { width: 100%; order: 2; }
  .content { order: 1; }
  .menu-toggle { display: block; }
  .menu-box { display: none; }
}

/* Executive Profile (Mobile Only) */
.executive-mobile {
  display: none;
  text-align: center;
  padding: 10px;
  background: #e3f2fd;
}
.executive-mobile img { width: 120px; border-radius: 10px; box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.4);}
.executive-mobile h3 { font-size: 14px; margin-top: 8px; }
@media (max-width: 768px) {
  .executive-mobile { display: block; }
  .sidebar img.executive-img,
  .sidebar h3 { display: none; }
}

/* e-service-grid ปกติ: 3 คอลัมน์ */
.e-service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ปกติ: 3 คอลัมน์ */
  gap: 10px;
}

.e-service-grid img {
  width: 100%;
  border-radius: 6px;
  transition: 0.3s;
}

.e-service-grid img:hover {
  transform: scale(1.05);
}

/* Responsive: มือถือแสดง 2 ภาพต่อแถว */
@media (max-width: 768px) {
  .e-service-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* กล่องกิจกรรมในแต่ละวัน */
.event-box {
  border-left: 8px solid #02A33F;   /* แถบสีเขียวด้านซ้าย */
  background: #f0fff0;              /* พื้นหลังเขียวอ่อน */
  padding: 15px;
  margin: 15px 0;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.event-box + .event-box {
  margin-top: 20px;
}

.event-box p {
  margin-bottom: 10px;
}


/* โหมดขาวดำ (สำหรับช่วงไว้ทุกข์) */
html {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}