/* รีเซ็ต */
@import url('https://fonts.googleapis.com/css2?family=K2D:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');
body {
  margin: 0;
  padding: 0;
  font-family: "K2D", sans-serif;
  background:#FFE1FF;
   //background: linear-gradient(to bottom, #EE82EE, #104E8B);
   min-height: 100vh; /* บังคับให้กินเต็มจอ */
}

/* ✅ Navbar Overlay */
header {
  position: relative;   /* ให้ header อยู่ตาม flow ปกติ ไม่ลอย */
  background-color: #2c3e50; /* สีพื้นหลังทึบ (ปรับได้) */
  width: 100%;

}


header .container {
  max-width: 1500px;
  margin: auto;
  padding: 10px 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header .logo {
  color: white;
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
}

/* เมนูหลัก */
header nav ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;

}

header nav ul li {
  position: relative; /* สำคัญ เพื่อให้ submenu อิงตำแหน่งพ่อ */
  margin-left: 20px;
}

header nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  padding: 10px 15px;
  display: block;
font-size: 14px;
}

/* ซับเมนู */
header nav ul li .submenu {
  display: none;
  position: absolute;
  top: 100%;   /* อยู่ใต้เมนูหลัก */
  left: 0;
  background: #34495e;
  min-width: 200px;
  padding: 0;
  list-style: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

header nav ul li .submenu li a {
  padding: 10px 15px;
  color: #fff;
  font-weight: normal;
}

header nav ul li .submenu li a:hover {
  background: #2c3e50;
}

/* แสดงเมื่อ hover */
header nav ul li:hover > .submenu {
  display: block;
}

/* ✅ Hero Banner */
.hero-banner {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-banner img {
  width: 100%;
  height: 400px; /* ความสูงแบนเนอร์ (ปรับได้) */
  object-fit: cover;
  display: block;
}

.hero-banner .banner-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  background: rgba(0,0,0,0.6);
  padding: 20px 40px;
  border-radius: 10px;
}

.hero-banner h1 {
  font-size: 36px;
  margin-bottom: 10px;
}

.hero-banner p {
  font-size: 18px;
}
/* ✅ Layout 2 คอลัมน์ (เนื้อหาหลัก + ผู้บริหาร) */
.page-layout {
  display: grid;
  grid-template-columns: 2fr 1fr; /* ซ้าย = เนื้อหา, ขวา = sidebar */
  gap: 20px;
  max-width: 1400px;
  margin: auto;
  padding: 40px 20px;
}

/* ✅ คอลัมน์ซ้าย รวมกล่องหลายกล่อง */
.main-column {
  display: flex;
  flex-direction: column;
  gap: 2px; /* เว้นช่องว่างระหว่างกล่อง */
}

.main-content {
  background: #fff;
  width: 95%;         /* ค่าเดิม เต็ม sidebar */
  max-width: 1500px;    /* หรือใส่ค่าที่คุณต้องการ เช่น 200px */
  margin: 0 auto 20px; /* จัดให้อยู่กลาง sidebar และเว้นด้านล่าง */
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
/* ✅ Sidebar */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px; /* ระยะห่างระหว่างแต่ละกล่อง */
}

/* กล่องผู้บริหาร */
.admin-box {
  display: flex;
  flex-direction: column;
  align-items: center;  /* ✨ จัดกลางในแนวนอน */
  justify-content: center;
  width: 70%;
  margin: 0 auto 20px;
  padding: 15px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,139,0.5);
}

.admin-photo {
  width: 95%;
  height: auto;
  max-width: 240px;
  object-fit: cover;
  margin-bottom: 10px;
  //border: 1px solid #2c3e50;
  border-radius: 5px;  /* ✅ ไม่ใช่วงกลม แต่มีมุมโค้งเล็กน้อย */
}

.admin-box h3 {
  margin: 10px 0 5px;
  font-size: 18px;
  color: #2c3e50;
}

.admin-box p {
  margin: 5px 0;
  font-size: 14px;
  color: #555;
}


.news-section {
  margin-top: 40px;
}

.news-section h2 {
  margin-bottom: 20px;
  color: #2c3e50;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 คอลัมน์ */
  gap: 20px;
}

.news-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  padding: 15px;
}

.news-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 10px;
}

.news-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

.news-card p {
  font-size: 14px;
  color: #555;
  margin-bottom: 10px;
}

.news-card a {
  color: #007BFF;
  font-size: 14px;
  text-decoration: none;
}

.news-card a:hover {
  text-decoration: underline;
}

.more-news {
  text-align: right;
  margin-top: 15px;
}

.more-news a {
  font-weight: bold;
  color: #2c3e50;
  text-decoration: none;
}
.more-news a:hover {
  text-decoration: underline;
}

.news-list {
  max-width: 900px;
  margin: auto;
  padding: 20px;
}

.news-item {
  display: flex;
  gap: 10px;
  background: #fff;
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.news-item img {
  width: 180px;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
}

.news-text h3 {
  margin-bottom: 8px;
  color: #2c3e50;
}


/* ✅ Footer */
footer {
  text-align: center;
  padding: 20px;
  background: #2c3e50;
  color: white;
  margin-top: 30px;
}

.embed-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* อัตราส่วน 16:9 ถ้าอยากได้สูงกว่านี้ปรับเป็น 70% */
  height: 0;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.carousel-item img {
  height: 360px;       /* ปรับความสูงตามต้องการ */
  object-fit: cover;   /* ครอบภาพไม่ให้ยืดเบี้ยว */
    object-position: bottom; /* ✅ ยึดรูปชิดด้านล่าง */
}

.logo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 คอลัมน์ */
  gap: 20px;
  text-align: center;
  margin-top: 20px;
}

.logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-item img {
  width: 100%;
  max-width: 200px;
  height: auto;
  border-radius: 4px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.logo-item img:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.logo-item p {
  margin-top: 8px;
  font-size: 14px;
  color: #333;
}
.pic-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 คอลัมน์ */
  gap: 20px;
  text-align: center;
  margin-top: 20px;
}

.pic-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pic-item img {
  width: 100%;
  max-width: 1000px;
  height: auto;
  border-radius: 4px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.pic-item img:hover {
  transform: scale(1.02);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.announce-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.announce-list li {
  padding: 6px 0;
  border-bottom: 1px solid #ddd;
  font-size: 15px;
}

.announce-list li:last-child {
  border-bottom: none;
}

.announce-list a {
  text-decoration: none;
  color: #2c3e50;
}

.announce-list a:hover {
  color: #e67e22;
  text-decoration: underline;
}

.icon {
  margin-right: 6px;
  color: #e67e22;
}

/* ปุ่มแท็บ */
.tabs {
  margin-bottom: 15px;
}

.tab-link {
  background: #ddd;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  margin-right: 5px;
  border-radius: 5px 5px 0 0;
  font-weight: bold;
}

.tab-link.active {
  background: #2c3e50;
  color: #fff;
}

/* เนื้อหาแท็บ */
.tab-content {
  display: none;
  background: #fff;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 0 5px 5px 5px;
}

.tab-content.active {
  display: block;
}

/* รายการข่าว */
.announce-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.announce-list li {
  padding: 6px 0;
  border-bottom: 1px solid #eee;
  font-size: 15px;
}

.announce-list li:last-child {
  border-bottom: none;
}

.announce-list a {
  text-decoration: none;
  color: #2c3e50;
}

.announce-list a:hover {
  color: #e67e22;
  text-decoration: underline;
}

.icon {
  margin-right: 6px;
}
/* ✅ เมนูหลัก */
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  background: #2c3e50;
min-width: 180px;
}

nav ul li {
  position: relative;
}

nav ul li a {
  display: block;
  padding: 12px 18px;
  color: white;
  text-decoration: none;
  font-weight: bold;
}

nav ul li a:hover {
  background: #34495e;
}

/* ✅ เมนูย่อย (ซ่อนค่าเริ่มต้น) */
.submenu {
  display: none;
  position: absolute;
  top: 100%;   /* ให้ออกมาตรงด้านล่างของเมนูหลัก */
  left: 0;
  background: white;
  min-width: 180px;
  border: 1px solid #ccc;
  z-index: 1000;
}

.submenu li a {
  padding: 10px 15px;
  color: #333;
  font-weight: normal;
}

.submenu li a:hover {
  background: #f1f1f1;
  color: #000;
}

/* ✅ แสดง submenu เมื่อ hover */
nav ul li:hover > .submenu {
  display: block;
}

/* ✅ เมนูซ้อนอีกชั้น */
.submenu li {
  position: relative;
}

.submenu li .submenu {
  top: 0;       /* ให้ออกมาข้างๆ */
  left: 100%;   /* ชิดด้านขวาของเมนูแม่ */
  margin-left: 1px;
}

/* ✅ ป้องกันทับกัน */
.submenu, .submenu li .submenu {
  white-space: nowrap;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: auto;
  padding: 20px;
}

.video-card {
  background: #fff;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.video-card iframe {
  width: 100%;
  height: 360px;
  border: none;
  border-radius: 8px;
}

.video-card h4 {
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}

.video-card p {
  margin: 4px 0 0;
  font-size: 14px;
  color: #666;
}


    h2 {
      //font-size: 4vw;
      //text-align: center;
      margin-bottom: 20px;
      text-shadow: 1px 1px 2px blue;
    }
    h3 {
      //font-size: 4vw;
      //text-align: center;
      margin-bottom: 15px;
      text-shadow: 1px 1px 1px blue;
    }
    p {
      //font-size: 4vw;
      text-align: center;
      margin-bottom: 12px;
      text-shadow: 1px 1px 2px pink;
    }
    h5 {
      font-size: 1vw;
      text-align: center;
      margin-bottom: 14px;
      text-shadow: 1px 1px 1px blue;
    }



    .news-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

/* --- เอฟเฟกต์เมื่อนำเมาส์ไปวางบนการ์ด --- */
.card:hover {
  transform: translateY(-8px); /* ทำให้การ์ดยกลอยขึ้นเล็กน้อย */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); /* เพิ่มเงาให้ดูมีมิติ */
}

/* --- สไตล์รูปภาพ --- */
.card-img-top {
  width: 100%;
  aspect-ratio: 3 / 4; /* ทำให้รูปเป็นสี่เหลี่ยมจัตุรัสเสมอ */
  object-fit: cover; /* ทำให้รูปเต็มกรอบโดยไม่เสียสัดส่วน */
  transition: transform 0.3s ease; /* เพิ่มอนิเมชันตอน hover */
}

/* --- เอฟเฟกต์เมื่อนำเมาส์ไปวาง (ซูมรูปเล็กน้อย) --- */
.card:hover .card-img-top {
  transform: scale(1.05);
}

/* --- ส่วนเนื้อหาของการ์ด --- */
.card-body {
  padding: 1.25rem;
}

/* --- ชื่อ (ตำแหน่งหลัก) --- */
.card-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.25rem;
}

/* --- ตำแหน่ง/บทบาท (Role/Position) --- */
.card-text {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.25rem;
}

/* --- ชื่อกลุ่ม (ทำให้ดูจางและเล็กกว่า) --- */
.card-text.text-muted {
  font-size: 0.8rem;
  font-style: italic;
  color: #888;
  margin-top: 0.75rem; /* เพิ่มระยะห่างจากด้านบนเล็กน้อย */
}

/* --- ข้อความ "ไม่พบข้อมูล" --- */
.text-danger {
    font-size: 1.2rem;
    font-weight: 500;
    padding: 3rem 0; /* เพิ่มพื้นที่ว่างให้ข้อความดูเด่นขึ้น */
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* บังคับการ์ดให้อยู่ตรงกลาง */
  gap: 20px;
  margin-bottom: 40px;
}

.card {
  width: 260px; /* ขนาดการ์ดคงที่ */
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  background: #fff;
  display: flex;
  flex-direction: column;
}


/* --- สไตล์โดยรวมของการ์ดจำนวนนักเรียน --- */
/* --- การ์ดสถิตินักเรียน --- */
.cardstu {
  width: 100%;              /* เต็มจอ */
  border: 1px solid #e0e0e0;
  border-radius: 15px;
  background: #fff;
  overflow: hidden;
}

.cardstu-header {
  font-weight: bold;
  font-size: 1.2rem;
  padding: 10px 15px;
}

.cardstu-body {
  padding: 15px;
}

/* Container จัด 3 คอลัมน์ชิดกลาง */
.custom-grid {
  display: grid;
  grid-template-columns: auto auto auto auto; /* 3 คอลัมน์ขนาดตามเนื้อหา */
  gap: 10px;
  padding: 20px;
  justify-content: center; /* จัด grid ให้มาอยู่กลางจอ */

}

/* คอลัมน์ */
.column {
  display: flex;
  flex-direction: column;
  gap: 10px;

}

/* คอลัมน์ 1 */
.column-1 img {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 1200px;
  cursor: pointer;
  transition: transform 0.2s;
  border-radius: 8px 8px 8px 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* คอลัมน์ 2-3 */
.column-2 img, .column-3 img, .column-4 img, .column-5 img {
  width: 100%;
  height: auto;
  object-fit: contain;
  max-height: 172px;
  cursor: pointer;
  transition: transform 0.2s;
  border-radius: 8px 8px 8px 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

.column-1 img:hover{
  transform: scale(1.02);
}
.column-2 img:hover, .column-3 img:hover , .column-4 img:hover, .column-5 img:hover  {
  transform: scale(1.05);
}

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