/* ตั้งค่าสำหรับสไลด์โชว์หลัก */
.swiper-container {
    width: 80%; /* กำหนดขนาดความกว้างของสไลด์โชว์ */
    max-width: 800px;
    height: auto;
    margin: 20px auto; /* จัดให้สไลด์โชว์อยู่กึ่งกลาง */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); /* เพิ่มเงาให้กับคอนเทนเนอร์ */
    position: relative;
}

/* ตั้งค่าสำหรับภาพแต่ละสไลด์ */
.swiper-slide img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease-in-out; /* เพิ่มเอฟเฟกต์เมื่อโฮเวอร์ */
}

.swiper-slide:hover img {
    transform: scale(1.05); /* ขยายภาพเมื่อโฮเวอร์ */
}

/* ปุ่มลูกศร */
.swiper-button-next,
.swiper-button-prev {
    color: #555555; /* สีลูกศร */
	font-size: 7px; /* ขนาดของลูกศร */
    background-color: #ffffff; /* พื้นหลังสีขาว */
    border-radius: 50%; /* ทำให้ปุ่มเป็นวงกลม */
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* เพิ่มเงาให้ปุ่ม */
	
}

/* ตำแหน่งของปุ่ม */
.swiper-button-next {
    right: 10px;
}

.swiper-button-prev {
    left: 10px;
}

/* เปลี่ยนสีปุ่มเมื่อโฮเวอร์ */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: rgba(225, 225, 255, 0.9); /* พื้นหลังโปร่งแสง */
    color: #007aff; /* สีลูกศร */
	font-size: 7px; /* ขนาดลูกศรเมื่อโฮเวอร์ */
}


/* ตัวบ่งบอกตำแหน่งสไลด์ (Pagination) */
.swiper-pagination {
    bottom: 10px !important;
}

.swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.8); /* สีพื้นหลังของจุด */
    opacity: 1;
    width: 10px;
    height: 10px;
    margin: 0 5px !important;
    border-radius: 50%; /* ทำให้เป็นวงกลม */
    transition: background 0.3s;
}

/* เปลี่ยนสีจุดเมื่อถูกเลือก */
.swiper-pagination-bullet-active {
    background: #007aff; /* เปลี่ยนสีจุดที่ถูกเลือก */
}