html{
    height: 100%;
}

body{
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: "Prompt" , serif !important;

}

.container {

    text-align: center;
}

.text1 {
    color: #ECBF1B; /* เปลี่ยนสีของข้อความใน h1 */
}

.text2 {
    color: #333333; /* เปลี่ยนสีของข้อความใน p */
    font-size: 20px;
}

.container-img img {

    border-radius: 10px; /* มุมโค้งของรูปภาพ */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* เพิ่มเงา */
    transition: transform 0.3s, box-shadow 0.3s; /* เพิ่มเอฟเฟกต์การเปลี่ยนแปลง */
}
.container-img img:hover {
    transform: scale(1.05); /* ขยายรูปเล็กน้อยเมื่อเอาเมาส์วาง */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* เพิ่มเงาเมื่อเอาเมาส์วาง */
}
.container-img {
    display: flex; /* จัดเรียงรูปภาพในแนวนอน */
    gap: 20px; /* ระยะห่างระหว่างรูปภาพแต่ละรูป */
    border-radius: 50px; /* มุมโค้งของรูปภาพ */
}
.container-img a {
    text-decoration: none; /* เอาเส้นขีดใต้ลิงก์ออก */
    /* เพิ่มเติมได้ถ้าต้องการ */
}
.container-img {
    display: flex; /* จัดเรียงรูปภาพในแนวนอน */
    gap: 60px; /* ระยะห่างระหว่างรูปภาพแต่ละรูป */
    justify-content: center; /* จัดให้อยู่กลางในแนวนอน */
}

.text-product {
    color: #000000; /* เปลี่ยนสีของข้อความ h2 ตามต้องการ */
    font-size: 1.5em; /* ขนาดตัวอักษร */
    text-align: center; /* จัดข้อความให้อยู่กลาง */
    margin-top: 10px; /* ระยะห่างด้านบน */
}
.disabled-link {
    pointer-events: none;
    cursor: not-allowed;
}

.text-dangerous{
    font-size: 16px;
    color: red;
}

@media (max-width: 768px) {
    .container-img {
        flex-direction: column; /* เรียงรูปภาพในแนวตั้ง */
        align-items: center; /* จัดให้อยู่กลาง */
        gap: 20px; /* ลดระยะห่างสำหรับมือถือ */
    }

    .container-img img {
        width: 90vw; /* ปรับขนาดรูปภาพให้กว้าง 90% ของหน้าจอ */
    }
}