.container-box {

	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

@media (max-width: 900px) {
	.container-box {
		grid-template-columns: 1fr;
	}
}

.carousel_container-co {
	 align-items: center;
	 background: #ffffff;
	 display: flex;
	 height: 300px;
     width: 100%;
	 justify-content: center;
	 
}
 @keyframes scroll {
	 0% {
		 transform: translateX(0);
	}
	 100% {
		 transform: translateX(calc(-250px * 7));
	}
}
 .slider-co {
	 background: white;
	 box-shadow: 0 10px 20px -5px rgba(0, 0, 0, .125);
	 height: 200px;
	 margin: auto;
	 overflow: hidden;
	 position: relative;
	 width: 700px;
	 ;
}
 .slider-co::before, .slider-co::after {
	 background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
	 content: "";
	 height: 200px;
	 position: absolute;
	 width: 200px;
	 z-index: 2;
}
 .slider-co::after {
	 right: 0;
	 top: 0;
	 transform: rotateZ(180deg);
}
 .slider-co::before {
	 left: 0;
	 top: 0;
}
 .slider-co .slide-track-co {
	 animation: scroll 40s linear infinite;
	 display: flex;
	 width: calc(250px * 14);
}
 .slider-co .slide-co {
	 height: 200px;
	 width: 250px;
}

.carousel_container-co {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

/* ==========================================================================
   .text-header — ข้อความปรัชญา/แนวทางบริหารของโรงเรียน
   ธีมชมพู-แสด (Pink & Orange Sunset) ให้เข้าชุดกับส่วนอื่นของหน้า
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@500;600;700&family=Sarabun:wght@300;400;500&display=swap');

.text-header {
	--th-pink: #ff2f7e;
	--th-orange: #ff7a30;
	--th-sunset: linear-gradient(135deg, var(--th-pink) 0%, #ff5f6d 45%, var(--th-orange) 100%);
	--th-ink: #401225;
	--th-ink-soft: #6b3a51;

	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 44px clamp(24px, 4vw, 52px);
	background: linear-gradient(180deg, #fff8f5 0%, #fff1e9 100%);
	border-radius: 24px;
	box-shadow: 0 16px 40px -22px rgba(216, 17, 89, 0.28);
}

/* เครื่องหมายคำพูดตกแต่งด้านหลัง เน้นว่าเป็นปรัชญาการบริหาร */
.text-header::before {
	content: "\201C";
	position: absolute;
	top: 4px;
	left: 20px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 96px;
	line-height: 1;
	background: var(--th-sunset);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	opacity: 0.16;
	pointer-events: none;
}

.text-header p {
	position: relative;
	margin: 0 0 14px;
	font-family: "Sarabun", "Mali", sans-serif;
}

.text-header p:last-child {
	margin-bottom: 0;
}

/* ชื่อโรงเรียน แสดงเป็นหัวข้อเด่น พร้อมขีดเส้นใต้ไล่สีสั้น ๆ */
.text-header p:first-child {
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 47, 126, 0.15);
}

.text-header span {
	display: inline-block;
	font-family: "Kanit", sans-serif;
	font-weight: 700;
	font-size: clamp(21px, 2.4vw, 27px);
	background: var(--th-sunset);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	letter-spacing: .01em;
}

/* ย่อหน้าเนื้อหา (ปรัชญาการบริหาร) */
.text-header p:not(:first-child) {
	font-size: 15.5px;
	font-weight: 400;
	line-height: 2;
	color: var(--th-ink-soft);
	text-align: left;
}

.text-header br {
	content: "";
	display: block;
	margin-top: 6px;
}

@media (max-width: 480px) {
	.text-header {
		padding: 32px 20px;
		border-radius: 18px;
	}
	.text-header::before {
		font-size: 72px;
	}
	.text-header p:not(:first-child) {
		font-size: 14.5px;
		line-height: 1.85;
	}
}

/* ==========================================================================
   .slider-co — อัปเกรดลูกเล่นแถบภาพเลื่อนอัตโนมัติ (co-producer)
   ธีมชมพู-แสด (Pink & Orange Sunset) สดใส มีชีวิตชีวา
   ========================================================================== */

/* แก้ปัญหา .carousel_container-co ถูกประกาศซ้ำเป็น grid (บั๊กเดิม)
   ให้กลับมาเป็น flex กึ่งกลางตามที่ตั้งใจไว้ */
.carousel_container-co {
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
	min-width: 0;
}

/* กรอบเรืองแสงชมพู-แสด เต้นเบาๆ รอบแถบภาพ + ปรับให้ยืดหยุ่นบนมือถือ */
.slider-co {
	width: 100% !important;
	max-width: 700px;
	border-radius: 20px;
	animation: sliderCoPulse 3.2s ease-in-out infinite;
}

@keyframes sliderCoPulse {
	0%, 100% {
		box-shadow:
			0 16px 36px -18px rgba(216, 17, 89, .38),
			0 0 20px -4px rgba(255, 47, 126, .35);
	}
	50% {
		box-shadow:
			0 20px 44px -16px rgba(216, 17, 89, .48),
			0 0 34px 2px rgba(255, 122, 48, .55);
	}
}

/* โทนสีม่านบัง (fade) หัวท้าย ปรับให้เข้ากับพื้นหลังโทนอบอุ่นของธีม
   + เปิดให้เมาส์ทะลุผ่านได้ ไม่บังการ hover ของรูปที่อยู่ขอบซ้าย/ขวา */
.slider-co::before, .slider-co::after {
	background: linear-gradient(to right, rgba(255, 248, 245, 1) 0%, rgba(255, 248, 245, 0) 100%);
	pointer-events: none;
}

/* กรอบรูปแต่ละใบ + เงา + ลูกเล่นตอนชี้เมาส์ */
.slider-co .slide-co {
	padding: 6px;
	box-sizing: border-box;
}

.slider-co .slide-co img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 6px 14px -6px rgba(64, 18, 37, .25);
	transition: transform .4s cubic-bezier(.22, 1, .36, 1),
	            box-shadow .4s ease,
	            filter .4s ease;
}

.slider-co .slide-co img:hover {
	transform: scale(1.1);
	box-shadow: 0 12px 28px -8px rgba(255, 47, 126, .55);
	filter: saturate(1.15) brightness(1.05);
	position: relative;
	z-index: 3;
}

/* หยุดเลื่อนชั่วคราวเมื่อผู้ใช้ชี้เมาส์ ให้ดูภาพได้ถนัดขึ้น */
.slider-co:hover .slide-track-co {
	animation-play-state: paused;
}

/* เคารพผู้ใช้ที่ปิดแอนิเมชัน */
@media (prefers-reduced-motion: reduce) {
	.slider-co,
	.slider-co .slide-track-co,
	.slider-co .slide-co img {
		animation: none;
		transition: none;
	}
}

@media (max-width: 480px) {
	.slider-co {
		border-radius: 16px;
	}
}