@charset "utf-8";
@media screen and (min-width: 671px) and (max-width: 900px){
.header {
	float: left;
	height: auto;
	width: 100%;
}
.box-header-top {
display: flex;
    flex-wrap: wrap; /* รองรับการตกบรรทัดในมือถือ */
    width: 100%;
    align-items: stretch; /* บังคับให้ลูกทุกตัวสูงเท่ากับตัวที่สูงที่สุด */
}
.header-top-01 {
	background-color: #302783;
	float: left;
	height: auto;
	width: 40%;
	display: flex; /* เพื่อให้เนื้อหาข้างในจัดกลางแนวตั้งได้ */
	align-items: center;
}
.mq {
	background-image: url(../../images/frontend/icon-mq.png);
	background-repeat: no-repeat;
	background-position: 20px center;
	background-size: 18px;
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #FFF;
	float: none !important;
	height: auto;
	width: 100%;
	margin-left: 5%;
	/* ส่วนที่เพิ่มใหม่เพื่อจัดการการเลื่อน */
	overflow: hidden; /* ปิดส่วนที่เกินขอบ */
	white-space: nowrap; /* บังคับให้ข้อความบรรทัดเดียว */
	display: flex;
	align-items: center;
	margin-left: 0;
	padding: 10px 10px 10px 50px;
	margin-bottom: 0;
	display: flex;
	align-items: center;
}

.mq-scroll {
    display: inline-block;
    padding-left: 100%; /* เริ่มต้นจากขวาสุดของ Container */
    animation: marquee 15s linear infinite; /* ชื่อ animation | เวลา | ความเร็วคงที่ | วนลูป */
}

/* สร้างการเคลื่อนที่ */
@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0); /* เลื่อนไปทางซ้ายจนสุดตัวอักษร */
    }
}

.header-top-02 {
	background-color: #f7941d;
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: space-around; /* จัดวางวันเวลาและเบอร์โทรให้กระจายสวยงาม */
}
.date {
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #FFF;
	background-image: url(../../images/frontend/icon-time.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 16px;
	float: none !important;
	height: auto;
	width: auto;
	margin-left: 0;
    padding: 5px 10px 5px 25px;
	line-height: 110%;
	margin-bottom: 0;
	display: flex;
	align-items: center;	
}
.tel-top {
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #FFF;
	background-image: url(../../images/frontend/icon-tel-top.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 16px;
	float: none !important;
	height: auto;
	width: auto;
	margin-left: 0;
	line-height: 110%;
	margin-bottom: 0;
	display: flex;
	align-items: center;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 25px;
}
.tel-top a {
	color: #FFF;
	text-decoration: none;
}

.header-top-03 {
background-color: #8dc63f;
    width: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* จัดดรอปดาวน์ให้อยู่กลางแนวตั้ง */
}

/* Container หลัก ควบคุมความกว้าง */
.custom-select-wrapper {
	position: relative;
	user-select: none;
	width: 100%; /* ขนาดเริ่มต้นสำหรับคอมพิวเตอร์ */
}

.custom-select {
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: "Noto Sans Thai", sans-serif;
}

/* ส่วนหัวที่แสดงภาษาที่เลือก */
.custom-select__trigger {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 1.1rem;
	color: #ffffff;
	height: 100%; /* ให้ปุ่มเลือกภาษาดึงความสูงเท่ากับแถบสี */
	background-color: #8dc63f;
	border: 0px solid rgba(255, 255, 255, 0.4);
	cursor: pointer;
	transition: background 0.3s;
	padding-top: 0;
	padding-right: 15px;
	padding-bottom: 0;
	padding-left: 15px;
	line-height: 110%;
	
}

/* ไอคอนลูกศรขนาดใหญ่ */
.arrow {
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s;
}

/* เมื่อเปิด Dropdown ให้ลูกศรหมุนขึ้น */
.custom-select.open .arrow {
  transform: rotate(180deg);
}

/* ส่วนกล่องรายการตัวเลือก */
.custom-options {
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #8dc63f; /* สีเขียวเดิม */
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  margin-top: 5px;
  opacity: 0;
  visibility: hidden;
  z-index: 100;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}

/* แสดงรายการเมื่อมีการคลิก */
.custom-select.open .custom-options {
  opacity: 1;
  visibility: visible;
}

/* ตกแต่งแต่ละรายการภาษา */
.custom-option {
  display: block;
  padding: 12px 15px;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.custom-option:last-child {
  border-bottom: none;
}

.custom-option:hover {
  background-color: #7ab334; /* สีเขียวเข้มขึ้นเมื่อเอาเมาส์วาง */
}

.custom-option.selected {
  background-color: #7ab334;
  font-weight: bold;
}

/* --- Responsive สำหรับ Tablet และ Mobile --- */
@media (max-width: 768px) {
	.header-top-wrapper {
        flex-direction: column; /* มือถือให้เรียงต่อกันเป็นแถวตั้ง */
    }
    .header-top-01, .header-top-02, .header-top-03 {
        width: 100%;
    }
  .custom-select-wrapper {
    width: 110px; /* ลดขนาดลงเล็กน้อยในมือถือ */
  }
  .custom-select__trigger {
    height: 45px;
    padding: 0 12px;
    font-size: 1rem;
  }
  .arrow {
    width: 16px;
    height: 16px;
  }
}
.box-header-middle {
	float: left;
	height: auto;
	width: 100%;
	background: linear-gradient(to right,  #ffffff ,#f2f2f2);
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}
.logo {
	float: left;
	height: auto;
	width: 10%;
	margin-top: 1%;
	margin-left: 2%;
	margin-bottom: 1%;
}
.logo img {
	height: auto;
	width: 100%;
}
.menu {
	float: right;
	height: auto;
	width: 75%;
	margin-top: 2.3%;
	margin-right: 3%;
}
.menu-m {
	float: right;
	height: auto;
	width: 50%;
	margin-top: 2.3%;
	margin-right: 3%;
	display: none;
}

.banner {
	float: left;
	height: auto;
	width: 100%;
}
.header .banner #slide1 .splide__track .splide__list .splide__slide img {
	height: auto;
	width: 100%;
}

.banner-m {
	float: left;
	height: auto;
	width: 100%;
	display: none;
}
.box-slogan {
	float: left;
	height: auto;
	width: 80%;
	border-radius: 25px;
	margin-top: -90px;
	z-index: 9999;
	position: relative;
	margin-left: 10%;
}
.box-slogan-list-01 {
	float: left;
	height: auto;
	width: 30%;
	margin-right: 1.5%;
	margin-left: 1.5%;
	padding-top: 2%;
	padding-bottom: 2%;
	background-color: #FFF;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.icon-slogan {
    text-align: center;
    float: left;
    height: auto;
    width: 100%;
    margin-top: 2%;
}

.icon-slogan img {
    width: 80px; /* ปรับขนาดตามต้องการ */
    height: auto;
    
    /* เรียกใช้ Animation */
    animation: heartbeat 1.5s ease-in-out infinite;
}

/* สร้างจังหวะการเต้นของหัวใจ */
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.15); /* พองจังหวะที่ 1 */
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.15); /* พองจังหวะที่ 2 (เต้นตึ้กๆ) */
    }
    70% {
        transform: scale(1); /* หดกลับและพักช่วงสั้นๆ */
    }
}
.text-slogan {
	font-family: serithairegular;
	font-size: 1rem;
	color: #666;
	text-align: left;
	float: left;
	height: 3em;
	width: 70%;
	margin-bottom: 4%;
	display: block;
	padding-left: 10%;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #302783;
	margin-left: 10%;
	margin-top: 4%;
	line-height: 140%;
}
}

@media screen and (min-width: 901px) and (max-width: 1023px){
.header {
	float: left;
	height: auto;
	width: 100%;
}
.box-header-top {
display: flex;
    flex-wrap: wrap; /* รองรับการตกบรรทัดในมือถือ */
    width: 100%;
    align-items: stretch; /* บังคับให้ลูกทุกตัวสูงเท่ากับตัวที่สูงที่สุด */
}
.header-top-01 {
	background-color: #302783;
	float: left;
	height: auto;
	width: 40%;
	display: flex; /* เพื่อให้เนื้อหาข้างในจัดกลางแนวตั้งได้ */
	align-items: center;
}
.mq {
	background-image: url(../../images/frontend/icon-mq.png);
	background-repeat: no-repeat;
	background-position: 20px center;
	background-size: 18px;
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #FFF;
	float: none !important;
	height: auto;
	width: 100%;
	margin-left: 5%;
	/* ส่วนที่เพิ่มใหม่เพื่อจัดการการเลื่อน */
	overflow: hidden; /* ปิดส่วนที่เกินขอบ */
	white-space: nowrap; /* บังคับให้ข้อความบรรทัดเดียว */
	display: flex;
	align-items: center;
	margin-left: 0;
	padding: 10px 10px 10px 50px;
	margin-bottom: 0;
	display: flex;
	align-items: center;
}

.mq-scroll {
    display: inline-block;
    padding-left: 100%; /* เริ่มต้นจากขวาสุดของ Container */
    animation: marquee 15s linear infinite; /* ชื่อ animation | เวลา | ความเร็วคงที่ | วนลูป */
}

/* สร้างการเคลื่อนที่ */
@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0); /* เลื่อนไปทางซ้ายจนสุดตัวอักษร */
    }
}

.header-top-02 {
	background-color: #f7941d;
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: space-around; /* จัดวางวันเวลาและเบอร์โทรให้กระจายสวยงาม */
}
.date {
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #FFF;
	background-image: url(../../images/frontend/icon-time.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 16px;
	float: none !important;
	height: auto;
	width: auto;
	margin-left: 0;
    padding: 5px 10px 5px 25px;
	line-height: 110%;
	margin-bottom: 0;
	display: flex;
	align-items: center;	
}
.tel-top {
	font-family: "Noto Sans Thai";
	font-size: 1rem;
	color: #FFF;
	background-image: url(../../images/frontend/icon-tel-top.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 16px;
	float: none !important;
	height: auto;
	width: auto;
	margin-left: 0;
	line-height: 110%;
	margin-bottom: 0;
	display: flex;
	align-items: center;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 25px;
}
.tel-top a {
	color: #FFF;
	text-decoration: none;
}

.header-top-03 {
background-color: #8dc63f;
    width: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center; /* จัดดรอปดาวน์ให้อยู่กลางแนวตั้ง */
}

/* Container หลัก ควบคุมความกว้าง */
.custom-select-wrapper {
	position: relative;
	user-select: none;
	width: 100%; /* ขนาดเริ่มต้นสำหรับคอมพิวเตอร์ */
}

.custom-select {
  position: relative;
  display: flex;
  flex-direction: column;
  font-family: "Noto Sans Thai", sans-serif;
}

/* ส่วนหัวที่แสดงภาษาที่เลือก */
.custom-select__trigger {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 1.1rem;
	color: #ffffff;
	height: 100%; /* ให้ปุ่มเลือกภาษาดึงความสูงเท่ากับแถบสี */
	background-color: #8dc63f;
	border: 0px solid rgba(255, 255, 255, 0.4);
	cursor: pointer;
	transition: background 0.3s;
	padding-top: 0;
	padding-right: 15px;
	padding-bottom: 0;
	padding-left: 15px;
	line-height: 110%;
	
}

/* ไอคอนลูกศรขนาดใหญ่ */
.arrow {
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s;
}

/* เมื่อเปิด Dropdown ให้ลูกศรหมุนขึ้น */
.custom-select.open .arrow {
  transform: rotate(180deg);
}

/* ส่วนกล่องรายการตัวเลือก */
.custom-options {
  position: absolute;
  display: block;
  top: 100%;
  left: 0;
  right: 0;
  background-color: #8dc63f; /* สีเขียวเดิม */
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  margin-top: 5px;
  opacity: 0;
  visibility: hidden;
  z-index: 100;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}

/* แสดงรายการเมื่อมีการคลิก */
.custom-select.open .custom-options {
  opacity: 1;
  visibility: visible;
}

/* ตกแต่งแต่ละรายการภาษา */
.custom-option {
  display: block;
  padding: 12px 15px;
  color: #ffffff;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.custom-option:last-child {
  border-bottom: none;
}

.custom-option:hover {
  background-color: #7ab334; /* สีเขียวเข้มขึ้นเมื่อเอาเมาส์วาง */
}

.custom-option.selected {
  background-color: #7ab334;
  font-weight: bold;
}

/* --- Responsive สำหรับ Tablet และ Mobile --- */
@media (max-width: 768px) {
	.header-top-wrapper {
        flex-direction: column; /* มือถือให้เรียงต่อกันเป็นแถวตั้ง */
    }
    .header-top-01, .header-top-02, .header-top-03 {
        width: 100%;
    }
  .custom-select-wrapper {
    width: 110px; /* ลดขนาดลงเล็กน้อยในมือถือ */
  }
  .custom-select__trigger {
    height: 45px;
    padding: 0 12px;
    font-size: 1rem;
  }
  .arrow {
    width: 16px;
    height: 16px;
  }
}
.box-header-middle {
	float: left;
	height: auto;
	width: 100%;
	background: linear-gradient(to right,  #ffffff ,#f2f2f2);
	border-bottom-width: 5px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
}
.logo {
	float: left;
	height: auto;
	width: 10%;
	margin-top: 1%;
	margin-left: 2%;
	margin-bottom: 1%;
}
.logo img {
	height: auto;
	width: 100%;
}
.menu {
	float: right;
	height: auto;
	width: 60%;
	margin-top: 2.3%;
	margin-right: 3%;
}
.menu-m {
	float: right;
	height: auto;
	width: 50%;
	margin-top: 2.3%;
	margin-right: 3%;
	display: none;
}

.banner {
	float: left;
	height: auto;
	width: 100%;
}
.header .banner #slide1 .splide__track .splide__list .splide__slide img {
	height: auto;
	width: 100%;
}

.banner-m {
	float: left;
	height: auto;
	width: 100%;
	display: none;
}
.box-slogan {
	float: left;
	height: auto;
	width: 80%;
	border-radius: 25px;
	margin-top: -90px;
	z-index: 9999;
	position: relative;
	margin-left: 10%;
}
.box-slogan-list-01 {
	float: left;
	height: auto;
	width: 30%;
	margin-right: 1.5%;
	margin-left: 1.5%;
	padding-top: 2%;
	padding-bottom: 2%;
	background-color: #FFF;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.icon-slogan {
    text-align: center;
    float: left;
    height: auto;
    width: 100%;
    margin-top: 2%;
}

.icon-slogan img {
    width: 80px; /* ปรับขนาดตามต้องการ */
    height: auto;
    
    /* เรียกใช้ Animation */
    animation: heartbeat 1.5s ease-in-out infinite;
}

/* สร้างจังหวะการเต้นของหัวใจ */
@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    14% {
        transform: scale(1.15); /* พองจังหวะที่ 1 */
    }
    28% {
        transform: scale(1);
    }
    42% {
        transform: scale(1.15); /* พองจังหวะที่ 2 (เต้นตึ้กๆ) */
    }
    70% {
        transform: scale(1); /* หดกลับและพักช่วงสั้นๆ */
    }
}
.text-slogan {
	font-family: serithairegular;
	font-size: 1rem;
	color: #666;
	text-align: left;
	float: left;
	height: 3em;
	width: 70%;
	margin-bottom: 4%;
	display: block;
	padding-left: 10%;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #302783;
	margin-left: 10%;
	margin-top: 4%;
	line-height: 140%;
}
}