html{
    scroll-behavior: smooth;
    
}
/* 1. รีเซ็ตขอบขาวของหน้าเว็บ (สำคัญมาก!) */
body {
    margin: 0;              /* ลบขอบขาวรอบๆ บอดี้ออก */
    padding: 0;
    overflow-x: hidden;     /* ป้องกันสกรอลบาร์แนวนอนเกิน */
}

 li{
    list-style: none;
    text-decoration: none;
}

/* 2. ส่วนหัวหลัก (กล่องแม่) */
.main-header {
    position: relative;     /* เป็นจุดอ้างอิง */
    width: 100%;            /* กว้างเต็มจอ */
    min-height: 100px;      /* (ปรับแก้ได้) กำหนดความสูงขั้นต่ำเพื่อให้มีพื้นที่โชว์บาร์ */
    padding: 20px 5%;       /* ดันโลโก้กับเมนูเข้ามา ไม่ให้ติดขอบจอเกินไป */
    box-sizing: border-box; /* รวม padding ในความกว้าง */
    
    /* จัดเลย์เอาต์ */
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* ให้เริ่มจากด้านบน */
}

/* 3. แถบรูปภาพด้านบน (Bar Head) */
.bar-head {
    position: absolute;     /* ลอยตัวออกจาก Flow ปกติ */
    top: 0;                 /* ชิดขอบบนสุด */
    left: 0;                /* ชิดขอบซ้ายสุด */
    width: 100%;            /* กว้าง 100% ของหน้าจอ */
    height: 149px;          /* (ปรับแก้ได้) ความสูงของแถบรูปภาพ */
    z-index: 1;             /* อยู่ชั้นล่างสุด */
    overflow: hidden;       /* ตัดส่วนเกินทิ้ง */
}

/* 4. จัดการรูปภาพใน Bar Head */
.bar-head img {
    width: 100%;            /* ยืดเต็มความกว้าง */
    height: 100%;           /* ยืดเต็มความสูงที่กำหนดไว้ */
    object-fit: cover;      /* สำคัญ! ให้รูปเต็มพื้นที่โดยไม่เบี้ยว (ตัดส่วนเกินออก) */
    display: block;         /* ลบช่องว่างใต้ภาพ */
}

/* 5. โลโก้ (ให้ลอยทับ) */
.logo-container {
    position: relative;     /* เพื่อใช้ z-index */
    z-index: 10;            /* อยู่ชั้นบนทับรูป */
    margin-top: 5px;       /* ขยับลงมาจากขอบบนนิดหน่อย */
}

.logo-container .icon {
    width: 185px;            /* ขนาดโลโก้ */
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); /* เงาเพื่อให้เห็นชัดบนพื้นหลัง */
}

/* 6. เมนู (ให้ลอยทับ) */
.main-nav {
    position: relative;     /* เพื่อใช้ z-index */
    z-index: 10;            /* อยู่ชั้นบนทับรูป */
    margin-top: 30px;       /* จัดตำแหน่งให้ตรงกับโลโก้ */
}

.main-nav ul {
    display: flex;
    gap: 21px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.main-nav a {
    color: white;           /* สีตัวอักษร (ปรับตามสีรูปบาร์ของคุณ) */
    font-size: 18.9px;
    font-weight: 600;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5); /* เงาตัวหนังสือสำคัญมาก! ให้อ่านออก */
    text-decoration: none;
    font-family: "Noto Sans Thai Looped", sans-serif;
}

#menu-02{
    color: #FFD700;
}


/* จัดการ Layout สินค้า */
/* จัดพื้นที่หลัก */
.container-products {
    padding: 60px 2%;        /* ลด padding ข้างลงเพื่อให้มีพื้นที่วาง 4 ใบ */
    max-width: 1400px;       /* คุมความกว้างสูงสุด */
    margin: 0 auto;
}

/* สั่งให้ Row เรียงเป็น 4 คอลัมน์ */
.container-products .row {
    display: grid;
    /* แบ่งเป็น 4 คอลัมน์ที่ขนาดเท่ากัน (1fr) */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;               /* ระยะห่างระหว่างกล่องแต่ละใบ */
    justify-content: center;
    align-items: stretch;    /* ให้ทุกใบมีความสูงเท่ากันโดยอัตโนมัติ */
}

/* ปรับแต่งขนาดการ์ดสินค้า (Col) ให้พอดีกับการวาง 4 ใบ */
.container-products .col {
    background: #ffffff;
    border-radius: 30px;
    padding: 40px 20px;      /* ลด padding ด้านในลงเพื่อให้ข้อความไม่บีบตัว */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: transform 0.3s ease;
    min-width: 0;            /* ป้องกันกล่องดันกันจนหลุดจอ */
}

/* ปรับขนาดรูปภาพให้สมดุลกับการวาง 4 ใบ */
.container-products .col img {
    width: 100%;
    max-width: 200px;        /* ลดขนาดรูปภาพลงเพื่อให้พอดีกับ 4 คอลัมน์ */
    height: auto;
    aspect-ratio: 1/1;
    object-fit: contain;
    margin-bottom: 15px;
    
}

.img-product1,
.img-product2,
.img-product3,
.img-product4 {
    /* เพิ่ม transition เพื่อให้เวลาขยายมันค่อยๆ ใหญ่ขึ้นแบบนุ่มนวล ไม่กระตุก */
    /* ใช้เวลา 0.3 วินาที รูปแบบ ease-in-out (เริ่มช้า-กลางเร็ว-จบช้า) */
    transition: transform 0.3s ease-in-out;
    
    /* (แถม) ช่วยให้ภาพคมชัดขึ้นเวลาขยายในบางเบราว์เซอร์ */
    backface-visibility: hidden; 
    -webkit-font-smoothing: subpixel-antialiased;
}

/* เมื่อชี้ที่รูปใดรูปหนึ่งในกลุ่มนี้ */
.img-product1:hover,
.img-product2:hover,
.img-product3:hover,
.img-product4:hover {
    /* สั่งขยาย 1.1 เท่า (คือใหญ่ขึ้น 10%) */
    /* ถ้าอยากได้ใหญ่กว่านี้ ให้แก้เลข เช่น 1.15 หรือ 1.2 */
    transform: scale(1.1);
    
    /* เปลี่ยนเมาส์เป็นรูปมือ ให้รู้ว่ามันมีปฏิสัมพันธ์ได้ */
    cursor: pointer;
    
    /* (ทางเลือก) ถ้าอยากให้มีเงาลอยขึ้นมาด้วย ให้เปิดคอมเมนต์บรรทัดล่างนี้ */
    /* filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2)); */
}



/* ปรับขนาดฟอนต์ให้เล็กลงเพื่อให้พอดีกับพื้นที่ที่แคบลง */
.container-products li {
    font-size: 20px;         /* ปรับลดขนาดชื่อสินค้า */
    font-weight: 800;
    text-align: center;
    font-family: "Noto Sans Thai Looped", sans-serif;
    border-radius: none;
    text-decoration: none;
}
.container-products a {
    text-decoration: none;
    color: #003760;
  
}



.container-products p {
    font-size: 12px;         /* ปรับลดขนาดคำบรรยาย */
    line-height: 1.4;
    margin-bottom: 60px;     /* เว้นที่ว่างให้ไอคอนด้านล่าง */
    font-family: "Noto Sans Thai Looped", sans-serif;
}

/* ปรับขนาดไอคอนประเภทอาหาร (App) */
.app {
    position: absolute;
    bottom: 5px;
    display: flex;
    gap: 8px;
}



.app img {
    width: 62.5px !important;  /* ไอคอนขนาดเล็กลง */
    height: 62.5px !important;
    padding: 5px;
    border-radius: 50%;
    box-shadow: 1px 1px 10px;
    color: #aeadad;
    
}


/* footer css */
.main-footer {
    /* 1. ใส่รูปพื้นหลัง */
    background-image: url('../images/footer-bar.png'); 
    
    /* 2. ✅ หัวใจสำคัญ: สั่งให้คลุมพื้นที่โดยไม่เสียทรง (ยอมโดนตัดขอบบ้าง) */
    background-size: cover; 
    
    /* 3. ✅ จัดตำแหน่ง: ให้จุดกึ่งกลางของรูปอยู่กลาง Footer เสมอ */
    /* ลองเปลี่ยนเป็น 'center top' หรือ 'center bottom' ถ้าอยากเน้นส่วนบน/ล่างของรูป */
    background-position: center center;
    
    background-repeat: no-repeat;
    
    /* 4. ตั้งค่ากล่อง Footer ให้ชิดขอบจอ */
    width: 100%;                /* กว้างเต็มพื้นที่ */
    box-sizing: border-box;     /* สำคัญ! รวม padding ไม่ให้ดันจนล้นจอ */
    margin: 0;
    margin-top: 40px;
    
    /* 5. การจัดเรียงเนื้อหาข้างใน (คงค่าเดิม) */
    padding: 35px 5%;           /* เพิ่ม padding บนล่างหน่อย เพื่อให้เห็นพื้นหลังมากขึ้น */
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 10;
}

/* ================= ฝั่งซ้าย (เปลี่ยนเป็น ข้อมูลการติดต่อ) ================= */
.contact-footer {
    order: 1;                       /* 👈 สั่งให้อยู่ลำดับแรก (ด้านซ้าย) */
    flex: 1;
    display: flex;
    justify-content: flex-start;    /* จัดให้อยู่ชิดขอบซ้าย */
    margin-top: 13%;
}

.footer-ct {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;        /* จัดให้ไอคอนและข้อความชิดซ้ายเรียงกันสวยงาม */
}

.contact-facebook, .contact-line, .contact-phone, .contact-mail {
    display: flex;
    align-items: center; 
    gap: 10px;
}

.footer-ct img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.footer-ct li {
    list-style: none;
}

.footer-ct a {
    color: #000000;
    text-decoration: none;
    font-size: 15px;
    
    font-family: "Noto Sans Thai Looped", sans-serif;
}

/* ================= ฝั่งขวา (เปลี่ยนเป็น ที่อยู่บริษัท) ================= */
.logo-footer {
    order: 2;                       /* 👈 สั่งให้อยู่ลำดับสอง (ด้านขวา) */
    display: flex;
    justify-content: flex-end;      /* จัดให้อยู่ชิดขอบขวา */
    flex: 1;
    margin-top: 120px;
}

.address-footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;          /* 👈 ดันข้อความให้ชิดขอบขวา */
    text-align: right;              /* ให้ตัวหนังสือเรียงชิดขวา */
    
}

.address-footer a {
    color: #000000; 
    text-decoration: none;
    font-size: 14px;
   
    font-family: "Noto Sans Thai Looped", sans-serif;
}


/* 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: 450px){
    

    .main-footer{
        position: relative;
    }

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

 }