.container-products{
    margin: 20px;
    
}
.product-horizontal-card{
    width: 100%;
    height: auto;
    background-color: #ffffffb2;
    
    border-radius: 50px;
    display: flex;
    align-items: center;
}

.product-info-r{
    margin-left: 50px;
    
}

.product-info-r p{
    text-align: center;
    font-size: 34px;
    color: #ffffff;
    font-family: "Noto Sans Thai Looped", sans-serif;
    font-weight: 600;
    position: relative;
    right:-30% ;
    background-color: #003760;
    width: auto;
    min-width: 450px;
    border-radius: 50px;
}

.abc-img{
    width: 392px;
    height: 600px;
}

.abc-img img{
    width: 100%;
    height: auto;
}

#main-pd{
    position: relative;
    right: -50px;
    top: 50px;
}

.product-info-l{

    margin-left: 10%;
}

.detail-pd{
    width: 450px;
    height: auto;
    font-family: "Noto Sans Thai Looped", sans-serif;
}

.s-pro{
    width: 450px;
    height: 159.75px;
    margin-bottom: -70%;
    
}

.s-pro img{
    width: 100%;
    height: auto;
}

.GHS{
width: 70px;
height: 70px;
margin-top: 10px;
}

.GHS img{
    width: 100%;
    height: auto;
    border-radius: 100%;
}

.type-icons{
    width: 500px;
    height: auto;
    display: flex;
    flex-direction: column-reverse;
    align-items: self-end;
    position: relative;
    right: -30%;
    bottom: -150px;
    
}

.type-icons img{
    width: 70px;
    height: 70px;
    border-radius: 100%;
    box-shadow: 1px 1px 10px;
    color: #aeadad;
    margin: 10px;
    aspect-ratio: 1/1;
    object-fit: contain;
}

.tic01,
.tic02,
.tic03,
.tic04{
    transition: transform 0.3s ease;
}

.tic01:hover, .tic02:hover, .tic03:hover, .tic04:hover {
    transform: scale(1.2);
    position: relative; 
    z-index: 1;
}




.tb{
    width: 450px;
    height: auto;
}

.ts{
    width: 100%;
    height: auto;
     
}

table,th,td{
  font-family: "Noto Sans Thai Looped", sans-serif;
  border: 1px solid black;
  border-collapse: collapse; 
  
}


th{
    background-color: #E20518;
}

#t02{
    background-color: #ffffff;
    text-align: center;
}



.bt-pd{
    display:flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    bottom:-310px ;
    right: -10%;
}

.bt-pd a{
    text-decoration: none;
    font-family: "Noto Sans Thai Looped", sans-serif;
}

.bt-con{
    width: 100px;
    height: auto;
    background-color: #003760;
    border-radius: 20px;
    text-align: center;
    margin: 10px;
    
}

.bt-con a{
    color: #ffffff;
}

.bt-ex{
    width: 150px;
    height: auto;
    background-color: #E20518;
    border-radius: 20px;
    text-align: center;
}

.bt-ex a{
    color: #ffffff;
}


/* cssปรับแต่งพื้นหลัง*/
.background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #ffffff;
  overflow: hidden;
  z-index: -1;
}

.ball {
  position: absolute;
  width: 20vmin;
  height: 20vmin;
  border-radius: 50%;
  backface-visibility: hidden;
  animation: move linear infinite;
  z-index: -1;
}

.ball:nth-child(odd) {
    color: #003760;
}

.ball:nth-child(even) {
    color: #E20518;
}


.ball:nth-child(1) {
  top: 77%;
  left: 88%;
  animation-duration: 40s;
  animation-delay: -3s;
  transform-origin: 16vw -2vh;
  box-shadow: 40vmin 0 5.703076368487546vmin currentColor;
}
.ball:nth-child(2) {
  top: 42%;
  left: 2%;
  animation-duration: 53s;
  animation-delay: -29s;
  transform-origin: -19vw 21vh;
  box-shadow: -40vmin 0 5.17594621519026vmin currentColor;
}
.ball:nth-child(3) {
  top: 28%;
  left: 18%;
  animation-duration: 49s;
  animation-delay: -8s;
  transform-origin: -22vw 3vh;
  box-shadow: 40vmin 0 5.248179047256236vmin currentColor;
}
.ball:nth-child(4) {
  top: 50%;
  left: 79%;
  animation-duration: 26s;
  animation-delay: -21s;
  transform-origin: -17vw -6vh;
  box-shadow: 40vmin 0 5.279749632220298vmin currentColor;
}
.ball:nth-child(5) {
  top: 46%;
  left: 15%;
  animation-duration: 36s;
  animation-delay: -40s;
  transform-origin: 4vw 0vh;
  box-shadow: -40vmin 0 5.964309466052033vmin currentColor;
}
.ball:nth-child(6) {
  top: 77%;
  left: 16%;
  animation-duration: 31s;
  animation-delay: -10s;
  transform-origin: 18vw 4vh;
  box-shadow: 40vmin 0 5.178483653434181vmin currentColor;
}
.ball:nth-child(7) {
  top: 22%;
  left: 17%;
  animation-duration: 55s;
  animation-delay: -6s;
  transform-origin: 1vw -23vh;
  box-shadow: -40vmin 0 5.703026794398318vmin currentColor;
}
.ball:nth-child(8) {
  top: 41%;
  left: 47%;
  animation-duration: 43s;
  animation-delay: -28s;
  transform-origin: 25vw -3vh;
  box-shadow: 40vmin 0 5.196265905749415vmin currentColor;
}

main, .container-products, .main-footer {
    position: relative; /* สร้าง Layer ให้สูงกว่า background */
    z-index: 1;         /* <--- อยู่หน้า background */
}

/* =========================================
   คำสั่งแอนิเมชันให้ลูกบอลหมุน (ย้ายไปไว้ล่างสุดของไฟล์ CSS)
   ========================================= */
@keyframes move {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* responsive web */

/* -----------------------------------------
   สำหรับหน้าจอขนาดกลาง (Tablet / iPad)
   ความกว้างไม่เกิน 1024px
----------------------------------------- */
@media (max-width: 1024px) {
    /* ปรับให้การ์ดสินค้าแสดงผล 2 คอลัมน์ (จากเดิม 4) */
    .container-products .row {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* ลดขนาดโลโก้ในส่วนหัว */
    .logo-container .icon {
        width: 180px;
    }
}

/* -----------------------------------------
   สำหรับหน้าจอขนาดเล็ก (Mobile / โทรศัพท์มือถือ)
   ความกว้างไม่เกิน 768px
----------------------------------------- */
@media (max-width: 768px) {
    
    /* --- ส่วนหัว (Header) --- */
    .main-header {
        flex-direction: column; /* เรียงโลโก้กับเมนูจากบนลงล่าง */
        align-items: center;    /* จัดให้อยู่กึ่งกลาง */
        padding: 20px 5%;
    }
    
    .bar-head {
        height: 100%; /* ให้แถบรูปภาพยืดตามความสูงของเนื้อหาที่ถูกจับเรียงแนวตั้ง */
    }

    .main-nav {
        margin-top: 20px;
        width: 100%;
    }

    .main-nav ul {
        flex-wrap: wrap;         /* อนุญาตให้เมนูตัดขึ้นบรรทัดใหม่ถ้าพื้นที่ไม่พอ */
        justify-content: center; /* จัดเมนูให้อยู่กึ่งกลาง */
        gap: 15px;
    }

    .main-nav a {
        font-size: 18px; /* ลดขนาดตัวหนังสือเมนู */
    }

    /* --- ส่วนสินค้า (Products) --- */
    /* ปรับให้การ์ดสินค้าแสดงผล 1 คอลัมน์ (เรียงลงมาทีละอัน) */
    .container-products .row {
        grid-template-columns: 1fr;
    }

    .container-products .col {
        padding: 40px 20px; /* ลดระยะห่างด้านในกล่องไม่ให้เปลืองพื้นที่ */
    }
    
    /* ปรับระยะห่างของรูปวัวก้อนกลับเป็นปกติในหน้ามือถือ */
    .img-product3 {
        margin-top: 0;
    }

    /* --- ส่วนเกี่ยวกับบริษัท (About) --- */
    .main-about {
        margin: 30px 5%;
        padding: 20px;
    }
    
    .law-about p {
        font-size: 14px; /* ลดขนาดตัวอักษรลงนิดหน่อยให้อ่านง่ายบนมือถือ */
    }

    /* --- ส่วนฟุตเตอร์ (Footer) --- */
    .main-footer {
        flex-direction: column; /* เปลี่ยนจากซ้าย-ขวา เป็น บน-ล่าง */
        padding: 20px 1%;
        gap: 1px;
    }

    /* ยกเลิก margin-top มหาศาลที่ใช้จัดตำแหน่งในคอมพิวเตอร์ทิ้งไป */
    .contact-footer, 
    .logo-footer {
        margin-top: 0;
        width: 100%;
        justify-content: center;
        order: unset; /* ยกเลิกการบังคับสลับที่ */
    }

    /* จัดข้อมูลการติดต่อให้อยู่กึ่งกลาง */
    .footer-ct {
        align-items: center; 
        text-align: center;
        
    }

    /* จัดที่อยู่บริษัทให้อยู่กึ่งกลาง */
    .address-footer ul {
        align-items: center;
        text-align: center;
        padding-top: 80%;
    }
    
    /* ไอคอนอาหารใต้รูปสินค้า ปรับให้พอดีขึ้น */
    .app img {
        width: 60px !important;
        height: 60px !important;
        
    }

    .address-footer a{
        font-size: 10px;
        margin-top: 10%;
    }


    .footer-ct a{
        display: none;
    }

    .footer-ct img{
        display: none;
    }
}

@media (max-width: 420px){

    .product-name a{
        font-size: 35px;
    }

    .detail-pd{
        width: 310px;
        height: auto;
    }
    
    .type-icons{
        position: relative;
        right: -10px;
    }

    .type-icons img{
        width: 40px;
        height: 40px;
    }

    .detail-pd p{
        font-size: 14px;
    }
    
    .product-horizontal-card{
        width: 400px;
        height: auto;
        position: relative;
        right: 40px;
    }



    .sale-talk{
        position: relative;
        left: 50px;
    }

    .sale-talk img{
        width: auto;
        height: 300px;
    }

    .bt-pd{
        
        position: relative;
        top: -10px;
    }

   .main-footer{
        position: relative;
        top: -200px;
    }

    .logo-footer,
    .contact-footer{
        position: relative;
        top: -30px;
    }

}