/* ==================================== */
		/* 1. Base Structure for the Slider     */
		/* ==================================== */

		/* ทำให้ Slider Wrapper มีความกว้างเต็ม col-8 และเป็น Container สำหรับปุ่ม */
		.slider-right {
			position: relative;
			padding: 20px 0;
			/* เว้นพื้นที่ด้านบน/ล่าง */
			overflow: hidden;
			/* ซ่อนส่วนที่ไม่ต้องการให้เห็น */
		}

		/* Container ที่เลื่อนได้จริง (เหมือน .card-list ในตัวอย่างก่อนหน้า) */
		.card-slide-list {
			display: flex;
			overflow-x: scroll;
			scroll-behavior: smooth;
			gap: 10px;
			scrollbar-width: none;
		}

		.card-slide-list::-webkit-scrollbar {
			display: none;
		}

		.card-slide-item {
			min-width: 45%;
		}

		/* สไตล์กล่องห่อหุ้มรูปภาพ/เนื้อหา */
		.box-packages_wrapping {
			width: 100%;
			height: 400px;
			/* กำหนดความสูงตามที่ต้องการ */
			/* ... สไตล์อื่นๆ เช่น border, box-shadow ... */
		}


		/* ==================================== */
		/* 3. Arrow Controls (นำมาจากโค้ดเดิม) */
		/* ==================================== */
		.slider-arrow {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			z-index: 10;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			font-size: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFD700;
			cursor: pointer;
			background: rgba(0, 0, 0, 0.3);
			/* เพิ่มพื้นหลังโปร่งเล็กน้อย */
			transition: background 0.3s ease;
		}

		.slider-arrow:hover {
			background: rgba(0, 0, 0, 0.6);
		}

		.arrow-left {
			left: -15px;
			/* หรือปรับเป็น left: 0; transform: translateX(-50%); */
		}

		.arrow-right {
			right: -15px;
			/* หรือปรับเป็น right: 0; transform: translateX(50%); */
		}



		.card-slide-list {
			display: flex;
			overflow-x: scroll;
			scroll-behavior: smooth;
			gap: 20px;
			scrollbar-width: none;
			/* Firefox */
		}

		.card-slide-list::-webkit-scrollbar {
			display: none;
			/* Chrome, Safari */
		}

		.card-slide-list.dragging {
			cursor: grabbing;
			scroll-behavior: auto;
		}

		.search-home {
			flex: 1;
			padding: 10px 15px;
			border: 1px solid transparent;
			border-radius: 4px 0 0 4px;
			outline: none;
			box-shadow: 3px -1px 9px 0px rgb(255 255 255);
			background: #ffffff00;
		}

		.search-icon {
			background-color: #FFD700;
			/* สีเหลือง */
			border: 1px solid #FFD700;
			border-radius: 0 4px 4px 0;
			padding: 10px 15px;
			cursor: pointer;
			box-shadow: 1px -1px 7px 0px rgb(255 255 255);
		}

		.bg-banner {

			/* 1. ลองเพิ่มความสูงขั้นต่ำของส่วนนี้ เพื่อให้รูป Background ที่สูงๆ ไม่ถูกตัด */
			min-height: 800px;
			/* เพิ่มความสูงขั้นต่ำเป็น 800px (สามารถปรับได้ตามต้องการ) */

			background-color: #000000;
			/* โค้ดส่วนอื่นๆ ที่เกี่ยวกับ image, repeat, size ยังเหมือนเดิม */
			background-image:
				url('<?php echo base_url("assets/images/resource/tdcgg/bg/bgn1.png"); ?>'),
				url('<?php echo base_url("assets/images/resource/tdcgg/bg/bg9.png"); ?>'),
				url('<?php echo base_url("assets/images/resource/tdcgg/bg/bg10.png"); ?>');

			/* 2. แก้ background-position เพื่อดึงรูปขวาเข้ามาในจอ 100px */
			background-position:
				center center,
				/* รูปกลาง */
				left center,
				/* รูปซ้าย: ชิดซ้าย */
				right -300px;
			/* รูปขวา: ดันเข้ามา 100px จากขอบจอ */

			/* 3. ลองเพิ่มขนาดรูปภาพด้านข้างทั้งสองเล็กน้อย */
			background-size:
				auto,
				500px auto,
				/* เพิ่มจาก 600px */
				300px auto;
			/* เพิ่มจาก 600px */

		}


		.loyout_trending {
			width: 100%;
			border-radius: 30px;
			background: linear-gradient(180deg, #827C0A 0%, #000000 100%);
			box-shadow: inset 1px 1px 3px rgba(255, 251, 178, 0.5);

		}

		.education_block_grid {
			width: 100%;
			/* background: rgb(47 47 47 / 67%); */
			/* พื้นหลังโปร่งใสเล็กน้อย */
			border: 1px solid #e8ebf11f;
			border-radius: 0.4rem;
			overflow: hidden;
			margin-bottom: 30px;
			position: relative;
			transition: all ease 0.4s;
			border: 1px solid #e8ebf100;

			/* width: 272.3px; */
			height: 334.91px;
			border-radius: 13.75px;

			background: linear-gradient(180deg, #ffffff00 0%, #a3a2a22e 50%);
			box-shadow: inset 1.62px -1.62px 0.81px 0 rgba(255, 255, 255, 0.5), inset -0.81px 0.81px 0.81px 0 rgba(255, 255, 255, 0.35);
		}

		.singles_items::-webkit-scrollbar {
			display: none;
			/* Chrome, Safari, Opera */
		}

		.education_block_grid {
			height: 100%;
			display: flex;
			flex-direction: column;
		}

		.education-body {
			flex-grow: 1;
			/* ดัน body ให้ยืดเต็มที่ */
		}

		.singles_items {
			height: 100%;
		}


		.limit-1-lines {
			display: -webkit-box;
			-webkit-line-clamp: 1;
			/* จำกัด 1 บรรทัด */
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}


		.limit-2-lines {
			display: -webkit-box;
			-webkit-line-clamp: 2;
			/* จำกัด 2 บรรทัด */
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}


		.limit-3-lines {
			display: -webkit-box;
			-webkit-line-clamp: 3;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}


					/* ============================
   			Default (Desktop)
			============================ */
			.logo-tdcgg {
				width: 30%;
				position: absolute;
				top: 80px;
				right: 20%;
			}

			.logo-depa {
				width: 100px;
				position: absolute;
				top: 70px;
				right: 33%;
			}


			/* ============================
   			Large Tablets (max-width: 1200px)
			============================ */
			@media (max-width: 1200px) {
				.logo-tdcgg {
					width: 35%;
					right: 15%;
				}

				.logo-depa {
					width: 90px;
					right: 30%;
				}
			}


			/* ============================
   			Tablets (max-width: 992px)
			============================ */
			@media (max-width: 992px) {
				.logo-tdcgg {
					width: 40%;
					top: 70px;
					right: 10%;
				}

				.logo-depa {
					width: 80px;
					top: 60px;
					right: 25%;
				}
			}


			/* ============================
   			Mobile Landscape (max-width: 768px)
			============================ */
			@media (max-width: 768px) {
				.logo-tdcgg {
					width: 60%;
					top: 60px;
					right: 5%;
				}

				.logo-depa {
					width: 70px;
					top: 50px;
					right: 30%;
				}
			}


			/* ============================
   			Mobile Portrait (max-width: 576px)
			============================ */
			@media (max-width: 576px) {
				.logo-tdcgg {
					width: 60%;
					top: 50px;
					right: 50%;
					transform: translateX(50%);
					/* ให้อยู่กลาง */
				}

				.logo-depa {
					width: 60px;
					top: 20px;
					right: 50%;
					transform: translateX(50%);
					/* ขยับให้ชิดกลางด้วย */
				}
			}

			/* ===============================
   			HERO BANNER
			================================ */
			.hero_banner {
				min-height: 650px;
				background-size: cover !important;
				background-position: center !important;
				position: relative;
				padding-top: 40px;
			}

	
			/* ===============================
   			SEARCH BOX
			================================ */
			.search-home {
				width: 100%;
				/* border: 2px solid #FFD700; */
				background: transparent;
				height: 55px;
				border-radius: 6px 0 0 6px;
			}

			.search-icon {
				width: 70px;
				background: #FFD700;
				border: none;
				border-radius: 0 6px 6px 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}



			/* ============================
   			Default (Desktop)
			============================ */
			.course-footer {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				display: flex;
				justify-content: center;
			}

			.course-footer .foot_lecture {
				background: rgb(154 154 154 / 20%);
				backdrop-filter: blur(6px);
				border-radius: 40px;
				padding: 10px 22px;
				margin: 0 8px;
				color: white;
				display: flex;
				align-items: center;
				border: 2px solid #fff3;
				font-size: 18px;
			}

			.course-footer .foot_lecture i {
				margin-right: 8px;
				font-size: 18px;
			}


			/* ================================
   			Large Screen (1200px up)
			================================ */
			@media (min-width: 1200px) {
				.course-footer .foot_lecture {
					font-size: 20px;
					padding: 12px 26px;
				}
			}


			/* ================================
   			Tablet (768px – 991px)
			================================ */
			@media (max-width: 991px) {
				.course-footer {
					bottom: 16px;
				}

				.course-footer .foot_lecture {
					font-size: 16px;
					padding: 8px 18px;
					margin: 0 6px;
				}

				.course-footer .foot_lecture i {
					font-size: 16px;
				}
			}


			/* ================================
   			Mobile (576px – 767px)
			================================ */
			@media (max-width: 767px) {
				.course-footer .foot_lecture {
					font-size: 14px;
					padding: 7px 16px;
					border-radius: 30px;
					margin: 0 5px;
				}

				.course-footer .foot_lecture i {
					font-size: 14px;
				}
			}


			/* ================================
   			Extra Small Mobile (< 576px)
			================================ */
			@media (max-width: 575px) {
				.course-footer {
					bottom: 12px;
				}

				.course-footer .foot_lecture {
					font-size: 13px;
					padding: 0px 14px;
					margin: 0 4px;
					border-radius: 26px;
				}

				.course-footer .foot_lecture i {
					font-size: 12px;
				}
			}



			.bg-card {
				background: linear-gradient(180deg, #ffffff33 0%, #a3a2a257 50%);
				box-shadow: inset 1.62px -1.62px 0.81px 0 rgba(255, 255, 255, 0.5), inset -0.81px 0.81px 0.81px 0 rgba(255, 255, 255, 0.35);
			}