/* กำหนดขนาดและสไตล์ของ Slideshow */
    .slideshow-container { 
        position: relative; 
        width: 100%; /* ปรับขนาดให้ย่อทั้งหมดตามหน้าจอ */
        max-width: 1280px; 
        margin: auto; 
        overflow: hidden; 
        border-radius: px; 
        margin-top: 20px;
    }
    
    /* กำหนดขนาดของภาพสไลด์ */
    .slides { 
        display: none; 
        width: 100%; /* ปรับให้ย่อทั้งหมดตามหน้าจอ */
        height: auto; 
        border-radius: 10px; 
    }
    
    /* เอฟเฟกต์เฟดเมื่อเปลี่ยนสไลด์ */
    .active { 
        display: block; 
        animation: fade 1s ease-in-out; 
        margin: auto; /* จัดกึ่งกลาง */
    }
    @keyframes fade { 
        from { opacity: 0.4; } 
        to { opacity: 1; } 
    }
    
    /* สไตล์ของเส้นนำทาง (Lines) */
    .dots-container {
        text-align: center;
        position: absolute;
        bottom: 10px; /* ปรับตำแหน่งให้อยู่ภายใน slideshow เสมอ */
        left: 50%;
        transform: translateX(-50%);
        width: auto;
    }
    .line {
        cursor: pointer;
        height: 4px;
        width: 30px;
        margin: 5px;
        background-color: #bbb;
        display: inline-block;
        transition: background-color 0.3s;
    }
    .line.active {
        background-color: #fa5c00;
    }
    
    /* สำหรับหน้าจอขนาดเล็ก */
    @media (max-width: 600px) {
        .line {
            width: 20px;
            margin: 3px;
        }
    }
    
    /* สำหรับหน้าจอขนาดใหญ่ */
    @media (min-width: 1200px) {
        .line {
            width: 40px;
            margin: 6px;
        }
    }