body {
		  min-height: 100vh;
		  margin: 0;
		  background: linear-gradient(to right, #23c7f7 0%, #ffffff 50%, #78d9fe 100%);
		  font: 16px/22px "Prompt", sans-serif;
		  colr: black;		  
		}	

		a:hover, a:active, a:focus {
		  text-decoration: none;
		  outline: none;
		}
		
		.container-custom {
		  width: 95%;         /* Mobile เป็นค่าเริ่มต้น */
		  max-width: 100%;
		  margin: 0 auto;
		  padding: 2rem 1rem;
		}

		/* Tablet: ≥ 768px */
		@media (min-width: 768px) {
		  .container-custom {
			width: 90%;
		  }
		}

		/* Desktop: ≥ 1200px */
		@media (min-width: 1200px) {
		  .container-custom {
			width: 85%;
		  }
		}

		/*------------------------------------------------------------- megamenu ------------------------------------------*/
		.dropdown-menu a {
		  text-decoration: none;
		  color: #000000;
		}
		.dropdown-menu a .d-flex {
		  transition: all 0.8s;
		}
		.dropdown-menu .d-flex:hover {
		  background-color:  ##dff6ff; 			/* var(--bs-warning-bg-subtle); */
		}

		@media only screen and (min-width: 992px) {
		  .navbar .dropdown {
			position: static; /* ป้องกันไม่ให้ relative บังคับตำแหน่ง */
		  }

		  .dropdown-menu {
			position: absolute;
			left: 20px; /* จากขอบซ้ายจอ 20px */
			top: 70%;
			margin-top: 0.5rem;
			width: 90vw;
		  }

		  .dropdown:hover .dropdown-menu {
			display: flex;
		  }
		  .dropdown-menu.show {
			display: flex;
		  }
		}

		/*------------------------------------------------------------ set font , icon size ---------------------------------------*/
		.menu-item i {
		  font-size: clamp(14px, 2vw, 24px);
		  line-height: 1;
		}

		.menu-item span {
		  font-size: clamp(12px, 0.8vw, 20px);
		  line-height: 1.2;
		}

		/*------------------------------------------------------------ dropdown on mobile ---------------------------------------*/
		@media (max-width: 991.90px) {
		  .dropdown-menu {
			display: none;
			position: static; /* ป้องกัน dropdown ลอยผิดตำแหน่ง */
			width: 100%;
		  }

		  .dropdown-menu.show {
			display: block;
		  }
		}		
        /*---------------------------------------------------------------------- กรอบ submenu --------------------------------------*/		
        .submenu-box {
            border: 1px solid #ff0000; /* เส้นสีแดง */
            background-color: #e6f3ff; /* พื้นหลังสีฟ้าอ่อน */
            border-radius: 10px; /* ขอบมน */
         /*   padding: 1px;  ระยะห่างภายใน */
        /*     margin-right: 1px;  ระยะห่างด้านล่าง */
            box-sizing: border-box; /* ป้องกันการล้นของขนาด */
        }
		
        /*---------------------------------------------------------------------- CSS สำหรับกรอบข้อความ ------------------------------*/
        .text-box {
            border: 1px solid #ff0000; /* เส้นสีแดง */
            background-color: #e6f3ff; /* พื้นหลังสีฟ้าอ่อน */
            border-radius: 10px; /* ขอบมน */
            padding: 10px; /* ระยะห่างภายใน */
            margin-bottom: 10px; /* ระยะห่างด้านล่าง */
            box-sizing: border-box; /* ป้องกันการล้นของขนาด */
			font-weight: 500;
			color: black;
        }

        .pic-border {
            border: 10px solid transparent; /* ความหนาของขอบ */
            border-image-source: url('../images/v662.png'); /* ปรับ path ให้ถูกต้อง */
            border-image-slice: 70; /* ปรับตามลักษณะของ v662.png (200x200px) */
            border-image-repeat: round; /* ทำซ้ำลวดลายให้พอดี */
            border-image-width: 35px; /* ความกว้างของขอบ */
            background-color: #ffffff; /* พื้นหลังสีขาว */
            border-radius: 10px; /* ขอบมน */
            padding: 15px; /* ระยะห่างภายใน */
            margin-bottom: 15px; /* ระยะห่างด้านล่าง */
            box-sizing: border-box;
            width: 100%; /* เต็มความกว้างของ col-md-4 */
        }

        .pic-head {
            display: block; /* ป้องกันช่องว่างด้านล่าง */
			margin-bottom: 15px ;
        } 

        .pic-border p {
            text-align: center; /* จัดข้อความกึ่งกลาง */
            margin: 10px 0 0 0; /* ระยะห่างจากรูปภาพ */
        }
		
		/*----------------------------------------------------------------------------------------- กรอบบุคลากร -------------------------------*/
        .person-border {
			display: inline-block; /* ทำให้อยู่พอดีกับรูป  ใช้ padding , margin , border ใน css ควบคุมได้  */
            border: 10px solid transparent; /* ความหนาของขอบ */
            border-image-source: url('../images/kt-1.png'); /* ปรับ path ให้ถูกต้อง */
            border-image-slice: 15%; /* ปรับตามลักษณะของ person-border.png */
            border-image-repeat: round; /* ทำซ้ำลวดลายให้พอดี */
            border-image-width: 35px; /* ความกว้างของขอบ */
            background-color: #ffffff; /* พื้นหลังสีขาว */
            border-radius: 10px; /* ขอบมน */
            padding: 15px; /* ระยะห่างภายใน */
            margin-bottom: 15px; /* ระยะห่างด้านล่าง */
            box-sizing: border-box;
            /* width: 100%;  เต็มความกว้างของ col-md-4 */
        }

        .person-head {
            display: block; /* ป้องกันช่องว่างด้านล่าง */
			margin-bottom: 15px ;
        } 

        .person-border p {
            text-align: center; /* จัดข้อความกึ่งกลาง */
            margin: 10px 0 0 0; /* ระยะห่างจากรูปภาพ */
        }		
		
		/*----------------------------------------------------------------------------------------- กรอบรูปนายก ปลัด หน้าแรก ---------------------------------------*/
		.bg-frame {
		  position: relative;
		  min-height: 400px;
		}

		.bg-frame::before {
		  content: "";
		  position: absolute;
		  top: 10px;
		  left: 10px;
		  right: 10px;
		  bottom: 10px;
		  background-image: url('../images/border-nayok.png');
		  background-size: cover;
		  background-position: center;
		  background-repeat: no-repeat;
		  z-index: -1;
		  border-radius: 12px;
		}
		
        .nayok-border {
            border: 3px solid #ff3c00; /* เส้นสีแดง */
            background-color: #e6f3ff; /* พื้นหลังสีฟ้าอ่อน */
            border-radius: 10px; /* ขอบมน */
            padding: 20px; /* ระยะห่างภายใน */
            margin-bottom: 5px; /* ระยะห่างด้านล่าง */
            box-sizing: border-box; /* ป้องกันการล้นของขนาด */
        }

		.responsive-bg {
		  background-size: cover;
		  background-position: center;
		  background-repeat: no-repeat;
		}
			
		.setpicnayok {
			margin-top: 35px;
			margin-left: 20px;
            margin-right: 20px;
			padding: 15px;
		}
		.setpicpalad {
			margin-top: 35px;
            margin-left: 20px;
			margin-right: 20px;
			padding: 15px;
		}
		.settextnayok {
		    margin-top: 7px;
		    margin-right: 25px;
		}
		.settextpalad {
			margin-top: 7px;
            margin-right: 25px;	
		} 
			.setpiceit {
			margin-top: 35px;
			margin-right: 20px;
			padding: 15px;
		}
			.setpiciit {
			margin-top: 35px;
			margin-right: 20px;
			padding: 15px;
		}
			.setpicfondue {
			margin-top: 35px;
			margin-right: 20px;
			padding: 15px;
		}
			.setpicnogift_th {
			margin-top: 35px;
			margin-right: 20px;
			padding: 15px;
		}
			.setpicnogift_en{
			margin-top: 35px;
			margin-right: 20px;
			padding: 15px;
		}
		/*------------------------------------------------------------------------------------------ แถบ info ------------*/
		 .info-banner-1color {
		  display: flex;
		  align-items: center;
		  justify-content: start;
		  height: 60px;
		  width: 100%;
		  padding-left: 30px;
		  font-size: 1.5rem;
		  font-weight: 600;
		  color: #ffffff;
		  background: linear-gradient(90deg, #37b5fe 100% , #86cdfd 0%);
		  border-radius: 12px;
		  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
		  margin: 10px 0;
		  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
		  /* ถ้าจะใช้เป็นรูป 
		  background: url('../images/bg_i_topmenu_green1.png') no-repeat center center;
		  background-size: cover;	*/		  
		}
		
		.info-banner {
		  margin-top: 8px;
		  margin-bottom: 5px;
		  width: 100%;
		  background-color: #289ef5;
		  border: 3px solid #ffffff;
		  border-radius: 10px;
		  color: #000;
		  font-size: 24px;
		  text-align: center;
		  padding: 13px 10px 10px 25px;
		  box-shadow: 0px 3px 15px -2px rgba(0,0,0,0.75);	
		}

		/*----------------------------------------------------------------------------------------- สไลด์ -------------------------*/
        .carousel-item img {
            width: 100%; /* Make images responsive */
            height: auto;
        }

		.carousel-indicators [data-bs-target] {
			box-sizing: content-box;
			flex: 0 1 auto;
			width: 5px;
			height: 5px;
			padding: 0;
			margin-right: 3px;
			margin-left: 3px;
			text-indent: -999px;
			cursor: pointer;
			background-color: #fff;
			background-clip: padding-box;
			border: 0;
			border-top: 10px solid transparent;
			border-bottom: 10px solid transparent;
			opacity: .5;
			transition: opacity .6s ease;
		}		
		
		/*-------------------------------------------------------------------------- สไลด์ กิจกรรม ---------------------------------------*/
		#activityCarousel .carousel-item img {
			width: 100%;
			height: auto;
			object-fit: cover;
			max-height: none;
		}
		#activityCarousel .card-body {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
		}
		
         /*----------------------------------------------------------------------------------------- สไตล์สำหรับรูปภาพใน Carousel */
        #activityCarousel .carousel-item img { /* ใช้ ID เฉพาะเจาะจงมากขึ้น */
            width: 100%;
            height: auto;
            object-fit: cover;
            max-height: none;
        }
        /* สไตล์สำหรับข้อความ */
		#activityCarousel .card-body {
			display: flex;
			flex-direction: column;
			flex-grow: 1;
		}
        #activityCarousel .card-body p {
            margin-bottom: 0.5rem;
        }
        /* สไตล์สำหรับ Indicators (จุดด้านล่าง) */
        #activityCarousel .carousel-indicators button { /* ใช้ ID เฉพาะเจาะจงมากขึ้น */
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.5); /* สีจุดปกติ */
            margin: 0 5px; /* ระยะห่างระหว่างจุด */
        }
        #activityCarousel .carousel-indicators button.active { /* ใช้ ID เฉพาะเจาะจงมากขึ้น */
            background-color: #000; /* สีจุดที่ active */
        }	
		
		/*-----------------------------------------------------------------------------------------  ข้อความเลื่อน  */
		#textslide {
		  height: 60px;

		  overflow: hidden;
		  position: relative;
		  background-color: #ffffff;
		  display: flex;
		 /* align-items: center; */
		  
            border: 1px solid #ff0000; /* เส้นสีแดง */
            border-radius: 10px; /* ขอบมน */
            padding: 15px; /* ระยะห่างภายใน */
            margin-bottom: 10px; /* ระยะห่างด้านล่าง */
            box-sizing: border-box; /* ป้องกันการล้นของขนาด */
			
		}

		.scroll-text {
		  white-space: nowrap;
		  display: inline-block;
		  animation: scroll-left 30s linear infinite;
		  font-size: 1.2rem;
		}

		@keyframes scroll-left {
		  0% {
			transform: translateX(40%);
		  }
		  100% {
			transform: translateX(-100%);
		  }
		}
		
		/*----------------------------------------------------------------------------------------- banner */
		/* เอฟเฟกต์แสงส่อง (Light Glow)  */
		.glow-banner {
		  display: inline-block;
		  border-radius: 20px; /* ปรับตามความโค้งที่ต้องการ */
		  overflow: hidden;
		  transition: box-shadow 0.3s ease;
		}
		.glow-banner img {
		  border-radius: 20px; /* ต้องเท่ากับ container */
		  display: block;
		  width: 100%;
		  height: auto;
		}
		.glow-banner:hover {
		  box-shadow: 0 0 5px rgba(255, 255, 255, 0.6);
		}	

		.image-banner {
		  position: relative;
		  overflow: hidden;
		  transition: all 0.3s ease;
		}

		.image-banner img {
		  width: 100%;
		  height: auto;
		  transition: transform 0.5s ease;
		}

		.image-banner:hover img {
		  transform: scale(1.05);
		}
		
		/*----------------------------------------------------------------------------------- เอฟเเฟ็คปุ่ม pill ------------------*/
		/* ปุ่มปกติ */
		.nav-link {
		  background-color: transparent;
		  border: 2px solid transparent;
		  transition: all 0.3s ease;
		  padding: 0.15rem;
		  border-radius: 0.5rem;  
		  font-weight: 400;
		  color: black;
		}

		/* Hover effect */
		.nav-link:hover {
		  background-color: rgba(0, 123, 255, 0.1); /* สีฟ้าอ่อนแบบโปร่ง */
		  border-color: #0d6efd; /* สีฟ้า Bootstrap */
		  box-shadow: 0 0 10px rgba(13, 110, 253, 0.3); /* เงาเบา ๆ */
		}

		/* Active tab (เมื่อถูกเลือก) */
		.nav-link.active {
		  background-color: #0d6efd; /* สีฟ้าเข้ม */
		  border-color: #0d6efd;
		  box-shadow: 0 0 10px rgba(13, 110, 253, 0.5);
		}	

		/*--------------------------------------------------------------------------------------  กรอบเว็บบอร์ด --------------------*/
		#board-boder {
		  margin-bottom: 5px;
		  background-color: #ffffff;
		  border: 4px solid #ffffff;
		  border-radius: 10px;
		  box-shadow: 0px 3px 15px -2px rgba(0,0,0,0.75);
		}
  
		/*------------------------------------------------------------------------------- ท้ายเว็บ ----------------------------*/
		.footer {
		  background-image: url('../images/end1.png');
		  background-size: cover;
		  background-position: center;
		/*  height: 550px; /* ความสูงเริ่มต้น */
		/*  background-color: rgba(0, 0, 0, 0.5);*/
		  margin-top: 10px;
		  padding: 60px 0; 
		  color: #1f3c88;
		}

		/* สำหรับ desktop */
		@media (min-width: 1200px) {
		  .footer {
			height: 320px; /* ความสูงสำหรับ desktop */
		  }
		  .footer h1 {
			font-size: 36px;
		  }
		  .footer h2 {
		   color: #ffff;
			font-size: 22px;
		  }   
		  .footer h3 {
			font-size: 18px;
		  } 
		}

		/* สำหรับ tablet */
		@media (min-width: 768px) and (max-width: 1199px) {
		  .footer {
			height: 250px; /* ความสูงสำหรับ tablet */
		  }
		   .footer h1 {
			font-size: 26px;
		  }
		   .footer h2 {
			color: #ffff;
			font-size: 18px;
		  }  
		  .footer h3 {
			font-size: 12px;
		  }   
		}

		/* สำหรับ mobile */
		@media (max-width: 767px) {
		  .footer {
			height: 200px; /* ความสูงสำหรับ mobile */
		  }
		  .footer h1 {
			font-size: 16px;
		  }
		  .footer h2 {
			color: #ffff;
			font-size: 12px;
		  }   
		   .footer h3 {
			font-size: 8px;
		  }   
		}

		.footer a {
		  transition: opacity 0.2s ease-in-out;
		}

		.footer a:hover {
		  opacity: 0.8;
		}

		.text-end {
			text-align: left !important;
			margin-left: 10px;
		}