/* จัดวางกล่องซ้าย-ขวา */
.slider-mega-container {
	position: relative;
    display: flex;
    width: 100%;
    height: 820px; /* คุมความสูงของสไลเดอร์ทั้งหมด */
    box-sizing: border-box;
}

/* ----------------------------------------- */
/* ดีไซน์ Thumbs (ฝั่งขวา) */
/* ----------------------------------------- */
/* จัดตำแหน่ง Container ของ Thumbs ให้มีพื้นที่สำหรับปุ่ม */
/* ปรับแต่งปุ่ม Navigation ทั้งหมดใน Thumbs */
.thumbs-box-container {
    position: absolute;
    right: 0;
    z-index: 9;
    padding: 40px 24px 40px 0;
	margin: 60px 0 0 0;
	max-height: 640px;
    width: 360px; /* ความกว้างของเมนูฝั่งซ้าย */
    height: 100%;
    flex-shrink: 0;
}
.my-thumbs-slider {
	position: relative;
	max-height: 560px;
    height: 100%;
}
.my-thumbs-slider .swiper-slide {
    display: flex;
    gap: 12px;
    padding: 12px 12px 12px 18px;
	height: 180px;
    background: #1a1a1a;
    border-radius: 8px;
    border: 1px solid #333;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.3s ease;
    background-size: cover;
    background-position: center;
	overflow: hidden;
}
.my-thumbs-slider .swiper-slide::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%; /* ให้ Gradient สูงขึ้นมาแค่ครึ่งเดียว */
    background: linear-gradient(0deg, #000 0%, transparent 100%);
    pointer-events: none; /* กันไม่ให้ทับการคลิกปุ่ม */
}
.my-thumbs-slider .thumb-info {
	position: relative; /* สำคัญมาก: เพื่อให้ z-index ทำงาน */
    z-index: 2;         /* กำหนดลำดับเลเยอร์ให้สูงขึ้น */
    display: flex;
    flex-direction: column;
    justify-content: end;
    flex: 1;
    min-width: 0; /* กันตัวอักษรล้น */
}

.my-thumbs-slider .thumb-cats {
    display: flex;
    gap: 4px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.thumb-title {
    color: #ccc;
    font-size: 14px;
    margin: 0;
    line-height: 1.3;
    font-weight: normal;
	font-family: Kanit;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.thumbs-box-container .swiper-button-next,
.thumbs-box-container .swiper-button-prev {
    left: 50% !important; /* จัดให้อยู่กึ่งกลางแนวนอน */
    width: 32px;
    height: 32px;
	background: #252525;
    border-radius: 32px;
    margin: 0;
	color: #fff;
	padding: 8px;
}

/* ปุ่มขึ้น (Prev) */
.thumbs-box-container .swiper-button-prev {
    top: 4px !important;
    bottom: auto !important;
}

/* ปุ่มลง (Next) */
.thumbs-box-container .swiper-button-next {
    top: auto !important;
    bottom: 4px !important;
    transform: translateX(-50%) rotate(90deg);
}

/* ปรับขนาดหัวลูกศรให้เล็กลงเพื่อให้เหมาะกับ Thumbs */
.thumbs-box-container .swiper-button-next::after,
.thumbs-box-container .swiper-button-prev::after {
    font-size: 16px !important;
    font-weight: medium;
}
.my-news-slider .swiper-mobile-button-next {
	right: auto !important;
    left: 4px !important;
    transform: rotate(180deg);
}
.my-news-slider .swiper-mobile-button-prev {
    right: 4px !important;
    left: auto !important;
}
.my-news-slider .swiper-mobile-button-next,
.my-news-slider .swiper-mobile-button-prev {
	position: absolute;
	display: none;
    align-items: center;
    justify-content: center;
    top: 45% !important; /* จัดให้อยู่กึ่งกลางแนวนอน */
    width: 40px;
    height: 40px;
	background: #252525;
    border-radius: 32px;
    margin: 0;
	color: #fff;
	padding: 8px;
	z-index: 2;
	cursor: pointer;
}

.my-news-slider .swiper-mobile-button-prev svg
.my-news-slider .swiper-mobile-button-next svg {
	width: 24px !important;
	height: 24px !important;
}
/* ----------------------------------------- */
/* สไตล์เมื่อสไลด์นั้นถูกเลือก (Active State) */
/* ----------------------------------------- */
.my-thumbs-slider .swiper-slide-thumb-active .thumb-title {
    color: #fff;
    font-weight: medium;
	font-family: Kanit;
}

/* ----------------------------------------- */
/* ดีไซน์สไลด์หลัก (ฝั่งซ้าย) */
/* ----------------------------------------- */
.my-news-slider {
    flex: 1;
    height: 100%;
	background: #000;
}
.my-news-slider .swiper-slide {
    position: relative;
    overflow: hidden;
}
/* .my-news-slider .swiper-slide::before {
    content: "";
    position: absolute;
    top: -18px;
    left: 0;
	z-index: 1;
    width: 100%;
    height: 10%;
    background: linear-gradient(0deg, transparent 0%, #000 100%);
    pointer-events: none;
} */
.my-news-slider .swiper-slide::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%; /* ให้ Gradient สูงขึ้นมาแค่ครึ่งเดียว */
    background: linear-gradient(0deg, #000 0%, transparent 100%);
    pointer-events: none; /* กันไม่ให้ทับการคลิกปุ่ม */
}
.my-news-slider .slide-image {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
}
.my-news-slider .slide-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    padding: 0 40px 104px 40px;
    z-index: 2;
    box-sizing: border-box;
	max-width: calc(100% - 360px);
}
.my-news-slider .slide-title {
    color: #fff;
    font-size: 32px;
    text-decoration: none;
	font-family: Kanit;
}
.my-news-slider > .swiper-wrapper {
    transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1) !important;
}

.my-news-slider .swiper-slide {
    transition: transform 1500ms cubic-bezier(0.77, 0, 0.175, 1), 
                opacity 1500ms cubic-bezier(0.77, 0, 0.175, 1);
    will-change: transform;
}

/* ----------------------------------------- */
/* สีป้ายกำกับของทั้งสองฝั่ง (ใช้ร่วมกัน) */
/* ----------------------------------------- */
.cat-list {
	display: flex;
	gap: 6px;
}
.thumb-cat-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 20px;
    color: #fff;
    font-weight: medium;
	font-family: Kanit;
}
.cat-badge {
	font-size: 16px;
	padding: 8px 16px;
	border-radius:  24px;
	color: #fff;
	font-weight: medium;
	font-family: Kanit;
}
.cat-badge, .thumb-cat-badge {
	display: inline-block;
    background-color: #c2c2c9;
    color: #393838;
}
.cat-distorted { color: #fff; background: #ff9800 !important; } /* สีส้ม */
.cat-fake { color: #fff; background: #eb0b0b !important; }  /* สีแดง */
.cat-true { color: #fff; background: #09a226 !important; }  /* สีเขียว */

.cat-line {
	width: 8px;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
}

@media (max-width: 1024px) {
    .thumbs-box-container {
        display: none !important;
    }
	.my-news-slider .swiper-mobile-button-next,
	.my-news-slider .swiper-mobile-button-prev {
		display: flex !important;
	}

    /* 2. ปรับโครงสร้าง Wrapper หลัก (ถ้าคุณใช้ Flex จัดเลย์เอาต์ซ้าย-ขวาไว้) */
    .slider-mega-container {
        display: block; /* เปลี่ยนจาก flex เป็น block เพื่อให้สไลด์หลักกว้างเต็มจอ */
		height: auto;
    }
	.my-news-slider .slide-overlay {
		width: 100%;
		max-width: 100%;
	}
    /* 3. ปรับความสูงสไลด์หลักให้ยืดหยุ่น */
    .my-news-slider {
        width: 100%;
        height: auto; /* ให้สูงตามเนื้อหา หรือตั้งเป็น 400px ตามความเหมาะสม */
        aspect-ratio: 16 / 9; /* ช่วยรักษาอัตราส่วนภาพให้สวยงามบนมือถือ */
		min-height: 240px;
    }

    /* 4. ปรับขนาดฟอนต์หรือ Padding ในสไลด์ (ถ้าจำเป็น) */
    .thumb-title {
        font-size: 1.2rem;
    }
}

@media (max-width: 767px) {
	.my-news-slider .slide-overlay {
		padding: 0 32px 32px 32px;
	}
	.my-news-slider .slide-title {
		font-size: 24px;
	}
}

@media (max-width: 566px) {
	.my-news-slider .slide-overlay {
		padding: 0 24px 24px 24px;
	}
	.my-news-slider .slide-title {
		font-size: 16px;
	}
	.my-news-slider .slide-title {
		line-height: 1;
		margin: 18px 0 0 0;
	}
	.cat-badge {
		font-size: 12px;
		padding: 4px 12px;
	}
}

.my-news-slider .slide-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: filter 0.4s ease;
}

/* เพิ่ม layer ดำทับ */
.my-news-slider .slide-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6); /* ความมืดเริ่มต้น */
    transition: background 0.4s ease;
}

/* ตอน hover ให้สว่างขึ้น */
.my-news-slider .swiper-slide:hover .slide-image::after {
    background: rgba(0,0,0,0.1);
}

/* optional: ขยายภาพนิดๆ */
.my-news-slider .swiper-slide .slide-image {
	transition: transform 0.4s ease-in-out;
}
.my-news-slider .swiper-slide:hover .slide-image {
    transform: scale(1.05);
    filter: brightness(1.25);
	transition: transform 0.4s ease-in-out;
}
.my-news-slider .slide-image {
    overflow: hidden;
}