@charset "utf-8";
/* CSS Document */
/* ==========================================
   1. Slider Container & ปุ่มกด ซ้าย-ขวา
   ========================================== */
.package-slider-wrapper {
	position: relative;
	width: 100%;
}

/* สไตล์ปุ่มกดเลื่อน ซ้าย-ขวา */
.slider-btn {
	position: absolute;
	top: 60%;
	transform: translateY(-50%);
	width: 45px;
	height: 45px;
	background-color: rgba(0, 0, 0, 0.8);
	color: #ffffff;
	border: 2px solid #555555;
	border-radius: 50%;
	font-size: 1.5rem;
	font-weight: bold;
	cursor: pointer;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1; /* ป้องกันบรรทัดลอยสูง/ต่ำ */
	padding: 0; /* ล้าง Padding เผื่อมีสไตล์อื่นแทรก */
	transition: all 0.3s ease;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.slider-btn:hover {
	background-color: #ff9900;
	border-color: #ff9900;
	color: #000000;
	transform: translateY(-50%) scale(1.1); /* ใช้ scale ใน transform แทน property scale */
}

.btn-prev {
	left: 10px;
}

.btn-next {
	right: 10px;
}

/* ==========================================
   2. Container หลักแสดงผลแนวนอน & Scroll
   ========================================== */
.box-price-center-01 {
	background-image: url(../images/bg-promotion-02-01.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 60%;
	width: 100%;
	height: auto;
	padding: 40px 20px;
	box-sizing: border-box;

	/* Flexbox สำหรับจัดเรียงแนวนอน */
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	gap: 20px;

	-webkit-overflow-scrolling: touch;

	/* ป้องกันการคลุมดำข้อความขณะคลิกลากเมาส์ */
	cursor: grab;
	user-select: none;
}

.box-price-center-01.active {
	cursor: grabbing;
}

/* Custom Scrollbar */
.box-price-center-01::-webkit-scrollbar {
	height: 6px;
}
.box-price-center-01::-webkit-scrollbar-track {
	background: #1a1a1a;
	border-radius: 4px;
}
.box-price-center-01::-webkit-scrollbar-thumb {
	background: #555555;
	border-radius: 4px;
}
.box-price-center-01::-webkit-scrollbar-thumb:hover {
	background: #888888;
}

.box-price-center-02 {
	background-image: url(../images/bg-promotion-03.png);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: 100%;
	width: 100%;
	height: auto;
	padding-bottom: 25%;
	float: left;
	padding-top: 5%;
}

/* ==========================================
   3. การ์ดแพคเกจ (Package Cards)
   ========================================== */
.box-price-list-01 {
	flex: 0 0 320px; /* ความกว้างคงที่บนจอคอมพิวเตอร์ */
	display: flex;
	flex-direction: column;
	height: auto;
	margin: 0;
	background-color: #262626;
	border-radius: 10px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* ส่วน Badge ยอดนิยม และ ดาว */
.price-hot-01 {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	height: 5ex;
	width: 100%;
}
.price-star {
	text-align: right;
	width: 60%;
}
.price-star img {
	height: auto;
	width: 10%;
}
.price-hot-text {
	font-family: serithairegular, sans-serif;
	font-size: 0.95rem;
	color: #ffffff;
	width: 35%;
	background-color: #ff9900;
	text-align: center;
	padding: 4px 0;
	border-radius: 10px 10px 0px 0px;
	margin-right: 3%;
	background: linear-gradient(233deg, #f4c202, #fff200, #ed1c24, #f4c202, #fff200, #f4c202);
	background-size: 300% 300%;
	animation: gradient-animation 4s ease infinite;
	text-shadow: 0 0 3px #ff0000;
}

@keyframes gradient-animation {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* ==========================================
   4. หัวข้อแพคเกจ (Titles)
   ========================================== */
.price-title-01,
.price-title-02,
.price-title-03,
.price-title-04 {
	width: 100%;
	text-align: center;
	font-family: serithairegular, sans-serif;
	font-size: 1.8rem;
	padding: 12px 0;
	border-radius: 10px 10px 0px 0px;
	box-sizing: border-box;
}

.price-title-01 {
	color: #191919;
	background-color: #cccccc;
}
.price-title-02 {
	color: #e7e8e9;
	background-image: linear-gradient(to right, red, yellow);
}
.price-title-03 {
	color: #e7e8e9;
	background-image: linear-gradient(to right, #707070, #333333, #707070, #333333, #707070, #333333, #707070);
}
.price-title-04 {
	color: #e7e8e9;
	background-color: #666666;
}

/* ==========================================
   5. เนื้อหาภายในและการเปรียบเทียบ (Content Rows)
   ========================================== */
.price-bg {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	width: 100%;
	background-color: #262626;
	padding: 15px 0;
	box-sizing: border-box;
	border-radius: 0 0 10px 10px;
}

.price-text {
	font-family: serithairegular, sans-serif;
	font-size: 1rem;
	color: #e7e8e9;
	text-align: center;
	width: 100%;
	min-height: 52px; /* ล็อกความสูงขั้นต่ำเพื่อให้บรรทัดเปรียบเทียบตรงกันทุกการ์ด */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	margin-bottom: 8px;
	border-bottom: 1px dashed #555555;
	line-height: 1.3;
	box-sizing: border-box;
	word-break: break-word;
}

.price-text img {
	width: 20px !important;       /* บังคับขนาดไอคอนไม่ให้ขยายตาม HTML attr */
	height: 20px !important;
	min-width: 20px;              /* ป้องกันรูปโดนบีบจนเบี้ยว */
	min-height: 20px;
	margin-right: 8px;
	flex-shrink: 0;               /* ป้องกัน Flexbox บีบรูปภาพ */
	vertical-align: middle;
	display: inline-block;
}

.price-text-2 {
	font-family: serithairegular, sans-serif;
	font-size: 1rem;
	color: #e7e8e9;
	text-align: center;
	width: 100%;
	min-height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	margin-bottom: 8px;
	border-bottom: 1px dashed #555555;
	line-height: 1.4;
	box-sizing: border-box;
	word-break: break-word;
}

/* การ์ดข้อความหมายเหตุท้ายสุด */
.price-text-tel {
	flex: 0 0 280px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #e7e8e9;
	padding: 20px;
	background: rgba(255, 255, 255, 0.05);
	border-radius: 10px;
	font-family: serithairegular, sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

/* ==========================================
   6. RESPONSIVE DESIGN (แท็บเล็ต และ มือถือ)
   ========================================== */

/* ==========================================
   FIX: ปรับตำแหน่งปุ่มลูกศรให้อยู่ตรงกลางบนหน้าจอเล็ก
   ========================================== */

/* แท็บเล็ต (ความกว้างไม่เกิน 1024px) */
@media (max-width: 1024px) {
	.package-slider-wrapper {
		position: relative;
	}

	.slider-btn {
		/* ปรับตำแหน่งให้อ้างอิงกลางการ์ดมากขึ้น โดยหักลบ padding บนของคอนเทนเนอร์ */
		top: calc(50% - 10px);
		width: 40px;
		height: 40px;
		font-size: 1.2rem;
	}

	.btn-prev {
		left: 5px;
	}

	.btn-next {
		right: 5px;
	}

	.box-price-center-01 {
		background-size: 90%;
		padding: 30px 15px;
		gap: 15px;
	}

	.box-price-list-01 {
		flex: 0 0 290px;
	}
}

/* มือถือ (ความกว้างไม่เกิน 768px) */
@media (max-width: 768px) {
	.slider-btn {
		/* ล็อคความสูงแนวตั้งให้อยู่กึ่งกลางส่วนหัวของการ์ดพอดี */
		top: 45%;
		width: 36px;
		height: 36px;
		font-size: 1rem;
		/* เพิ่ม z-index ป้องกันการ์ดบังปุ่ม */
		z-index: 20;
	}

	.btn-prev {
		left: 2px;
	}

	.btn-next {
		right: 2px;
	}

	.box-price-center-01 {
		background-size: 100%;
		padding: 20px 10px;
		gap: 12px;
	}

	.box-price-list-01 {
		flex: 0 0 270px;
	}

	.price-title-01,
	.price-title-02,
	.price-title-03,
	.price-title-04 {
		font-size: 1.4rem;
		padding: 10px 0;
	}

	.price-text,
	.price-text-2 {
		font-size: 0.9rem;
		min-height: 48px;
		padding: 6px 8px;
	}
}