@charset "utf-8";
@media screen and (min-width: 671px) and (max-width: 900px){
.header {
	float: left;
	height: auto;
	width: 100%;
}
.box-header-top {
	float: left;
	height: auto;
	width: 100%;
	background: #FFFFFF;
background: linear-gradient(280deg,rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}


 .box-mq {
    width: 80%;
    overflow: hidden;
    background-color: #363636;
    border-bottom-right-radius: 30px;
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 1rem;
    color: #FFF;
    float: left;
    padding: 10px 0;
    margin-right: 45%;
    position: relative;
    display: flex; /* ช่วยจัดระเบียบภายใน */
}

.marquee-content {
    display: flex;
    width: max-content; /* สำคัญมาก: ให้กว้างตามเนื้อหาจริงที่ต่อกัน */
    animation: scroll-left 15s linear infinite; /* ปรับวินาทีเพื่อความเร็ว */
}

.marquee-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding-right: 15px; /* ระยะห่างระหว่างชุด */
}

.sep {
    color: #f7941d; /* แถม: ใส่สีส้มให้ตัวคั่นดูพรีเมียมขึ้น */
    margin: 0 15px;
}

/* อนิเมชั่นที่ทำให้ต่อกันสนิท */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        /* วิ่งไปแค่ครึ่งเดียวของความยาวรวม (ชุดที่ 1 วิ่งผ่านไป ชุดที่ 2 มาแทนที่พอดีเป๊ะ) */
        transform: translateX(-50%);
    }
}
.logo {
	float: left;
	height: auto;
	width: 30%;
	margin-top: 1%;
	margin-left: 5%;
}
.logo img {
	height: auto;
	width: 100%;
}
.box-header-menu {
	float: left;
	height: auto;
	width: 100%;
	background-image: url(../images/bg-home.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 8%;
	padding-top: 0.5%;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #F7941D;
	margin-top: 0.5%;
}
.tel-top {
	background-image: url(../images/icon-tel-top.png);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 20px; /* แนะนำให้ใส่เป็น px เพื่อความนิ่งของไอคอน */
	float: left;
	width: 20%;
	padding-top: 1.5%;
	padding-bottom: 1.5%;
	padding-left: 30px; /* เว้นที่ให้ไอคอน */
	font-family: serithairegular;
	font-size: 1rem;
	color: #666;
	text-decoration: none;
	display: block; /* ทำให้เป็นบล็อกเพื่อคุมพื้นที่ได้แม่นยำ */
	/* สั่งให้การขยับนุ่มนวล */
	transition: transform 0.3s ease, color 0.3s ease;
	cursor: pointer;
	/* ป้องกันตัวอักษรขยับแล้วเบลอ */
	backface-visibility: hidden;
	margin-left: 5%;


}

/* --- เมื่อเมาส์วาง (Hover) --- */
.tel-top:hover {
    /* ขยับขึ้นด้านบน 3px โดยไม่ดันพื้นที่รอบข้าง */
    transform: translateY(-3px); 
    
    color: #333; /* เปลี่ยนสีเข้มขึ้นเล็กน้อย */
}

/* ลบขีดเส้นใต้ลิงก์ออกให้หมด */
.tel-top a {
    color: inherit;
    text-decoration: none;
}

.menu {
	float: left;
	height: auto;
	width: 75%;
	background-color: #f7941d;
	padding-top: 3%;
	padding-bottom: 2%;
	border-top-left-radius: 30px;
	padding-left: 5%;
	position: sticky; /* แนะนำ: ใส่เพื่อให้เมนูเลื่อนตามลงมา */
	top: 0;
	z-index: 1000;
	display: none;
}
.menu-m {
	position: relative;
	z-index: 999999999;
	float: right;
	width: 45%;
	background-color: #F7941D;
	border-top-left-radius: 30px;
	padding-top: 2px;
	padding-right: 10px;
}
.menu ul {
    margin: 0;
    padding: 0;
}

.menu ul li {
    font-family: serithairegular, sans-serif;
    font-size: 1.1rem;
    color: #FFF;
    float: left;
    width: auto;
    margin-right: 3%;
    margin-left: 3%;
    list-style-type: none;
    transition: transform 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.menu ul li a {
    color: #FFF;
    text-decoration: none;
    display: block; /* เพิ่มเพื่อให้คลิกง่ายขึ้น */
}

.menu ul li:hover {
    transform: translateY(-5px); 
    border-bottom-color: #333; 
}

.menu ul li:hover a {
    color: #333333; 
}

/* ล้างค่า float */
.menu::after {
    content: "";
    display: table;
    clear: both;
}
.banner {
	display: inline-block;
}
.banner-m {
	float: left;
	height: auto;
	width: 100%;
	display: none;
}
.content-overlay {
	position: absolute;
	z-index: 9999;
	left: 50px;
	top: 100px;
}
/* 1. กำหนดการเคลื่อนที่จากซ้ายมาขวา */
@keyframes slideInLeftToRight {
  0% {
    opacity: 0;
    transform: translateX(-100px); /* เริ่มจากทางซ้าย 100px */
  }
  100% {
    opacity: 1;
    transform: translateX(0); /* กลับมาตำแหน่งปกติ */
  }
}

/* 2. ซ่อนองค์ประกอบไว้ก่อน (Pre-state) */
.splide__slide .text-a,
.splide__slide .text-b,
.splide__slide .btn-yellow {
  opacity: 0;
}

/* 3. สั่งทำงานเมื่อสไลด์นั้น Active (.is-active คือคลาสมาตรฐานของ Splide) */

/* ข้อความที่ 1: AAAAA */
.splide__slide.is-active .text-a {
	animation: slideInLeftToRight 0.7s ease-out forwards;
	animation-delay: 0.3s; /* มาก่อนเพื่อน */
	font-family: serithairegular;
	font-size: 3rem;
	color: #FFF;
}

/* ข้อความที่ 2: BBBBB */
.splide__slide.is-active .text-b {
	animation: slideInLeftToRight 0.7s ease-out forwards;
	animation-delay: 0.8s; /* ตามมาอันดับสอง */
	font-family: serithairegular;
	font-size: 2rem;
	color: #FFF;
	margin-bottom: 20px;
}
.text-b{
	margin-top: 8px;
}
.header .banner #slide1 .splide__track .splide__list .splide__slide img {
	height: auto;
	width: 100%;
}
.header .banner-m #slide2 .splide__track .splide__list .splide__slide img {
	height: auto;
	width: 100%;
}
.box-slogan {
	float: left;
	height: auto;
	width: 80%;
	background-color: #363636;
	border-radius: 25px;
	margin-top: -60px;
	z-index: 9999;
	position: relative;
	margin-left: 5%;
	padding-top: 2%;
	padding-bottom: 2%;
	padding-right: 5%;
	padding-left: 5%;
}
.box-slogan-list {
	float: left;
	height: auto;
	width: 22%;
	padding-top: 2%;
	padding-bottom: 2%;
	margin: 1%;
}
.icon-slogan {
	text-align: center;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
}
.icon-slogan img {
	height: auto;
	width: 15%;
}

/* 1. กำหนด Keyframes สำหรับอนิเมชั่นเขย่า (Shake) - ปรับระดับปานกลาง */
@keyframes shake-icon-medium {
  0% { transform: translate(2px, 2px) rotate(0deg); }
  10% { transform: translate(-2px, -3px) rotate(-1deg); }
  20% { transform: translate(-4px, 0px) rotate(1deg); }
  30% { transform: translate(4px, 3px) rotate(0deg); }
  40% { transform: translate(2px, -2px) rotate(1deg); }
  50% { transform: translate(-2px, 3px) rotate(-1deg); }
  60% { transform: translate(-4px, 2px) rotate(0deg); }
  70% { transform: translate(4px, 2px) rotate(-1deg); }
  80% { transform: translate(-2px, -2px) rotate(1deg); }
  90% { transform: translate(2px, 3px) rotate(0deg); }
  100% { transform: translate(2px, -3px) rotate(-1deg); }
}

/* 2. โค้ดเดิมของคุณ */
.icon-slogan-01 {
	text-align: center;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%; 
	
}

.icon-slogan-01 img {
	height: auto;
	width: 3rem;
	animation: shake-icon-medium 2s 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); }
}

.icon-slogan-02 {
    text-align: center;
    float: left;
    height: auto;
    width: 100%;
    margin-top: 2%;
    /* ลบ animation ออกจากตัวแม่ */
}

.icon-slogan-02 img {
    height: auto;
    width: 3rem;
    display: inline-block; /* มั่นใจว่ารองรับ transform */
    
    /* 2. ย้ายมาใส่ที่ตัว img โดยตรง */
    animation: heartbeat 1.5s ease-in-out infinite;
}

/* 1. กำหนด Keyframes สำหรับการแกว่ง */
@keyframes swing-icon {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }   /* แกว่งไปขวา 5 องศา */
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-5deg); }  /* แกว่งไปซ้าย 5 องศา */
  100% { transform: rotate(0deg); }
}

.icon-slogan-03 {
	text-align: center;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
}

.icon-slogan-03 img {
	height: auto;
	width: 3rem;
	display: inline-block;

	/* --- จุดสำคัญคือบรรทัดนี้ --- */
	transform-origin: top center; /* ยึดจุดหมุนไว้ที่ "กึ่งกลางด้านบน" */
	
	/* เรียกใช้แอนิเมชั่น */
	animation: swing-icon 2s ease-in-out infinite;
}
@keyframes pulse-icon {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); } /* ขยายใหญ่ขึ้น 15% */
  100% { transform: scale(1); }
}

.icon-slogan-04 {
	text-align: center;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
}

.icon-slogan-04 img {
	height: auto;
	width: 3rem;
	display: inline-block;

	/* --- เรียกใช้แอนิเมชั่น --- */
	/* 1.5s คือระยะเวลา 1 รอบแอนิเมชั่น (ปรับความเร็วได้) */
	/* ease-in-out ช่วยให้ตอนเริ่มและจบการขยาย-ย่อนุ่มนวล */
	/* infinite คือเล่นซ้ำตลอดเวลา */
	animation: pulse-icon 1.5s ease-in-out infinite;
}
.num-slogan {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 5%;
	margin-bottom: 5%;
	color: #F7941D;
}
.text-slogan {
	font-family: serithairegular;
	font-size: 1rem;
	color: #FFF;
	text-align: center;
	float: left;
	height: auto;
	width: 100%;
	margin-bottom: 2%;
	display: block;
}
}

.11111111111111111111111111111111111111111111111111111111111111{}

@media screen and (min-width: 901px) and (max-width: 1023px){
.header {
	float: left;
	height: auto;
	width: 100%;
}
.box-header-top {
	float: left;
	height: auto;
	width: 100%;
	background: #FFFFFF;
background: linear-gradient(280deg,rgba(255, 255, 255, 1) 0%, rgba(240, 240, 240, 1) 100%);
}


  .box-mq {
    width: 50%;
    overflow: hidden;
    background-color: #363636;
    border-bottom-right-radius: 30px;
    font-family: "Noto Sans Thai", sans-serif;
    font-size: 1rem;
    color: #FFF;
    float: left;
    padding: 10px 0;
    margin-right: 45%;
    position: relative;
    display: flex; /* ช่วยจัดระเบียบภายใน */
}

.marquee-content {
    display: flex;
    width: max-content; /* สำคัญมาก: ให้กว้างตามเนื้อหาจริงที่ต่อกัน */
    animation: scroll-left 15s linear infinite; /* ปรับวินาทีเพื่อความเร็ว */
}

.marquee-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
    padding-right: 15px; /* ระยะห่างระหว่างชุด */
}

.sep {
    color: #f7941d; /* แถม: ใส่สีส้มให้ตัวคั่นดูพรีเมียมขึ้น */
    margin: 0 15px;
}

/* อนิเมชั่นที่ทำให้ต่อกันสนิท */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        /* วิ่งไปแค่ครึ่งเดียวของความยาวรวม (ชุดที่ 1 วิ่งผ่านไป ชุดที่ 2 มาแทนที่พอดีเป๊ะ) */
        transform: translateX(-50%);
    }
}
.logo {
	float: left;
	height: auto;
	width: 15%;
	margin-top: 1%;
	margin-left: 2%;
	
}
.logo img {
	height: auto;
	width: 100%;
}
.box-header-menu {
	float: right;
	height: auto;
	width: 82%;
	background-image: url(#);
	background-size: 12%;
}
.tel-top {
    background-image: url(../images/icon-tel-top.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px; /* แนะนำให้ใส่เป็น px เพื่อความนิ่งของไอคอน */
    
    float: right;
    width: 20%;
    padding-top: 1.5%;
    padding-bottom: 1.5%;
    padding-left: 30px; /* เว้นที่ให้ไอคอน */
    
    font-family: serithairegular;
    font-size: 1rem;
    color: #666;
    text-decoration: none;
    display: block; /* ทำให้เป็นบล็อกเพื่อคุมพื้นที่ได้แม่นยำ */
    
    /* สั่งให้การขยับนุ่มนวล */
    transition: transform 0.3s ease, color 0.3s ease;
    cursor: pointer;
    
    /* ป้องกันตัวอักษรขยับแล้วเบลอ */
    backface-visibility: hidden;
}

/* --- เมื่อเมาส์วาง (Hover) --- */
.tel-top:hover {
    /* ขยับขึ้นด้านบน 3px โดยไม่ดันพื้นที่รอบข้าง */
    transform: translateY(-3px); 
    
    color: #333; /* เปลี่ยนสีเข้มขึ้นเล็กน้อย */
}

/* ลบขีดเส้นใต้ลิงก์ออกให้หมด */
.tel-top a {
    color: inherit;
    text-decoration: none;
}

.menu {
	float: right;
	height: auto;
	width: 80%;
	background-color: #f7941d;
	padding-top: 3%;
	padding-bottom: 2%;
	border-top-left-radius: 30px;
	padding-left: 5%;
	position: sticky; /* แนะนำ: ใส่เพื่อให้เมนูเลื่อนตามลงมา */
	top: 0;
	z-index: 1000;
}
.menu-m {
	display: none;

}
.menu ul {
    margin: 0;
    padding: 0;
}

.menu ul li {
	font-family: serithairegular, sans-serif;
	font-size: 1.1rem;
	color: #FFF;
	float: left;
	width: auto;
	margin-right: 2%;
	margin-left: 2%;
	list-style-type: none;
	transition: transform 0.3s ease, color 0.3s ease, border-color 0.3s ease;
	cursor: pointer;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
}

.menu ul li a {
    color: #FFF;
    text-decoration: none;
    display: block; /* เพิ่มเพื่อให้คลิกง่ายขึ้น */
}

.menu ul li:hover {
    transform: translateY(-5px); 
    border-bottom-color: #333; 
}

.menu ul li:hover a {
    color: #333333; 
}

/* ล้างค่า float */
.menu::after {
    content: "";
    display: table;
    clear: both;
}
.banner {
	float: left;
	height: auto;
	width: 100%;
}
.banner-m {
	display: none;
}
.content-overlay {
	position: absolute;
	z-index: 9999;
	left: 50px;
	top: 100px;
}
/* 1. กำหนดการเคลื่อนที่จากซ้ายมาขวา */
@keyframes slideInLeftToRight {
  0% {
    opacity: 0;
    transform: translateX(-100px); /* เริ่มจากทางซ้าย 100px */
  }
  100% {
    opacity: 1;
    transform: translateX(0); /* กลับมาตำแหน่งปกติ */
  }
}

/* 2. ซ่อนองค์ประกอบไว้ก่อน (Pre-state) */
.splide__slide .text-a,
.splide__slide .text-b,
.splide__slide .btn-yellow {
  opacity: 0;
}

/* 3. สั่งทำงานเมื่อสไลด์นั้น Active (.is-active คือคลาสมาตรฐานของ Splide) */

/* ข้อความที่ 1: AAAAA */
.splide__slide.is-active .text-a {
	animation: slideInLeftToRight 0.7s ease-out forwards;
	animation-delay: 0.3s; /* มาก่อนเพื่อน */
	font-family: serithairegular;
	font-size: 3rem;
	color: #FFF;
}

/* ข้อความที่ 2: BBBBB */
.splide__slide.is-active .text-b {
	animation: slideInLeftToRight 0.7s ease-out forwards;
	animation-delay: 0.8s; /* ตามมาอันดับสอง */
	font-family: serithairegular;
	font-size: 2rem;
	color: #FFF;
	margin-bottom: 20px;
}
.text-b{
	margin-top: 8px;
}
.header .banner #slide1 .splide__track .splide__list .splide__slide img {
	height: auto;
	width: 100%;
}
.box-slogan {
	float: left;
	height: auto;
	width: 80%;
	background-color: #363636;
	border-radius: 25px;
	margin-top: -90px;
	z-index: 9999;
	position: relative;
	margin-left: 10%;
}
.box-slogan-list {
	float: left;
	height: auto;
	width: 23%;
	margin-right: 1%;
	margin-left: 1%;
	padding-top: 2%;
	padding-bottom: 2%;
}
.icon-slogan {
	text-align: center;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
}
.icon-slogan img {
	height: auto;
	width: 15%;
}

/* 1. กำหนด Keyframes สำหรับอนิเมชั่นเขย่า (Shake) - ปรับระดับปานกลาง */
@keyframes shake-icon-medium {
  0% { transform: translate(2px, 2px) rotate(0deg); }
  10% { transform: translate(-2px, -3px) rotate(-1deg); }
  20% { transform: translate(-4px, 0px) rotate(1deg); }
  30% { transform: translate(4px, 3px) rotate(0deg); }
  40% { transform: translate(2px, -2px) rotate(1deg); }
  50% { transform: translate(-2px, 3px) rotate(-1deg); }
  60% { transform: translate(-4px, 2px) rotate(0deg); }
  70% { transform: translate(4px, 2px) rotate(-1deg); }
  80% { transform: translate(-2px, -2px) rotate(1deg); }
  90% { transform: translate(2px, 3px) rotate(0deg); }
  100% { transform: translate(2px, -3px) rotate(-1deg); }
}

/* 2. โค้ดเดิมของคุณ */
.icon-slogan-01 {
	text-align: center;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%; 
	
}

.icon-slogan-01 img {
	height: auto;
	width: 3rem;
	animation: shake-icon-medium 2s 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); }
}

.icon-slogan-02 {
    text-align: center;
    float: left;
    height: auto;
    width: 100%;
    margin-top: 2%;
    /* ลบ animation ออกจากตัวแม่ */
}

.icon-slogan-02 img {
    height: auto;
    width: 3rem;
    display: inline-block; /* มั่นใจว่ารองรับ transform */
    
    /* 2. ย้ายมาใส่ที่ตัว img โดยตรง */
    animation: heartbeat 1.5s ease-in-out infinite;
}

/* 1. กำหนด Keyframes สำหรับการแกว่ง */
@keyframes swing-icon {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }   /* แกว่งไปขวา 5 องศา */
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-5deg); }  /* แกว่งไปซ้าย 5 องศา */
  100% { transform: rotate(0deg); }
}

.icon-slogan-03 {
	text-align: center;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
}

.icon-slogan-03 img {
	height: auto;
	width: 3rem;
	display: inline-block;

	/* --- จุดสำคัญคือบรรทัดนี้ --- */
	transform-origin: top center; /* ยึดจุดหมุนไว้ที่ "กึ่งกลางด้านบน" */
	
	/* เรียกใช้แอนิเมชั่น */
	animation: swing-icon 2s ease-in-out infinite;
}
@keyframes pulse-icon {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); } /* ขยายใหญ่ขึ้น 15% */
  100% { transform: scale(1); }
}

.icon-slogan-04 {
	text-align: center;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 2%;
}

.icon-slogan-04 img {
	height: auto;
	width: 3rem;
	display: inline-block;

	/* --- เรียกใช้แอนิเมชั่น --- */
	/* 1.5s คือระยะเวลา 1 รอบแอนิเมชั่น (ปรับความเร็วได้) */
	/* ease-in-out ช่วยให้ตอนเริ่มและจบการขยาย-ย่อนุ่มนวล */
	/* infinite คือเล่นซ้ำตลอดเวลา */
	animation: pulse-icon 1.5s ease-in-out infinite;
}
.num-slogan {
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 2.5rem;
	font-weight: bold;
	text-align: center;
	float: left;
	height: auto;
	width: 100%;
	margin-top: 5%;
	margin-bottom: 5%;
	color: #F7941D;
}
.text-slogan {
	font-family: serithairegular;
	font-size: 1rem;
	color: #FFF;
	text-align: center;
	float: left;
	height: auto;
	width: 100%;
	margin-bottom: 2%;
	display: block;
}
}