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

/* 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-01{
    color: #FFD700;
}

#menu-00,
#menu-02,
#menu-03,
#menu-04{
    transition: color 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#menu-00:hover,
#menu-02:hover,
#menu-03:hover,
#menu-04:hover{
    color: #FFD700;
}


/* จัดการ Layout สินค้า */
/* จัดพื้นที่หลัก */
.container-products {
    padding: 100px 2%;        /* ลด padding ข้างลงเพื่อให้มีพื้นที่วาง 4 ใบ */
    max-width: 100%;       /* คุมความกว้างสูงสุด */
    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: 80px 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: 400px;        /* ลดขนาดรูปภาพลงเพื่อให้พอดีกับ 4 คอลัมน์ */
    height: auto;
    aspect-ratio: 1/1;
    object-fit: contain;
    margin-bottom: 15px;
}

/* hover img product */
/* 1. ตั้งค่าการเคลื่อนไหวให้รูปภาพ (Transition) */
/* ใส่ไว้ที่ตัวรูป เพื่อให้เวลาเมาส์ออก มันจะค่อยๆ หดกลับ ไม่ดีดกลับทันที */
.img-product1,
.img-product2,
.img-product3,
.img-product4 {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ใช้เวลา 0.5 วิ และใส่ transition แบบนุ่มนวล */
    /* ถ้าต้องการให้มีผลกับสินค้าทุกตัว ให้เปลี่ยน .img-product1 เป็น .container-products .col img แทน */
}

/* 2. สั่งให้ขยายเมื่อเอาเมาส์ชี้ที่ "กล่องการ์ด (.col)" */
/* เราชี้ที่กล่องแม่ (.col:hover) แต่สั่งให้ลูก (.img-product1) ขยาย */
.col:hover .img-product1, 
.col:hover .img-product2, 
.col:hover .img-product3, 
.col:hover .img-product4 {
    transform: scale(1.15); /* ขยายใหญ่ขึ้น 15% (ลองปรับเลขดูได้ เช่น 1.2 = 20%) */
}
/*ตำแหน่งรูปวัวก้อน */
.img-product3{
    margin-top: 40  px;
}

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



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

.col li {
    list-style: none;
}

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

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

/* เกียวกับบริษัท */
.main-about {
    max-width: 1000px;         /* กำหนดความกว้างไม่ให้แผ่เต็มจอเกินไป */
    margin: 50px auto;         /* จัดกึ่งกลางหน้าจอ */
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.95); /* พื้นหลังขาวนวลๆ */
    border-radius: 15px;       /* ทำมุมโค้ง */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    font-family: "Noto Sans Thai Looped", sans-serif;
}


/* ส่วนเนื้อหาข้อความ */
.law-about p {
    font-size: 18px;
    line-height: 1.8;          /* เว้นบรรทัดให้อ่านง่ายขึ้นมาก */
    color: #333;
    white-space: pre-line;     /* ทำให้ขึ้นบรรทัดใหม่ตามที่พิมพ์ใน HTML */
    text-align: justify;       /* จัดขอบตัวอักษรให้เท่ากันซ้ายขวา */
}

.sp1{   
    position: relative;
    left: 10%;

}

.sp1 img{
    width: 1200px;
    height: auto;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);

}

.bt-oem{
    width: 70px;
    height: 30px;
    background-color: #80B4E3;
    border-radius: 20px;
    text-align: center;
    margin-top: 2px;
    position: relative;
    right: -73%;
    top: -50px;
}

.bt-oem a{
    text-decoration: none;
    color: #000;
    font-family: "Noto Sans Thai Looped", sans-serif;
    text-align: center;
    position: relative;
    
}

.tip-cheese{
    width: 1200px;
    height: auto;
    font-family: "Noto Sans Thai Looped", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    text-align: center;
}

.h-tip{
    width: 900px;
    height: 50px;
    background-color: #003760;
    border-radius: 50px;
    text-align: center;
    
}

.h-tip p{
    font-size: 28px;
    font-weight: 400;
    color: #ffffff;
}

.l-tip{
 width: 1000px;
}

.l-tip p{
    font-family: 24px;
}



.main-tip{
    display: flex;
    justify-content: space-around;
    text-align: center;
    gap: 150px;
}

.m-tip{
    width: 350px;
    height: auto;
    background-color: #ffffff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    
}

.m-cont img{
    width: 300px;
    height: auto;
}

.mt01,.mt02{
    font-size: 14px;
    font-weight: 600;
    
}

.mt01{
    margin-top: 40px;
    margin-bottom: 0%;
}

.mt03{
    font-size: 12px;
    width: 300px;
    height:70px;
    text-align: left;
}

.m-cont{
    width: 300px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    
}
.m-cont p{
    margin-top: 20px;
    font-size: 12px;
}

.mt04{
    margin-bottom: -10px;
}

/* Video */
/* =========================================
   ส่วนแสดงวิดีโอ (เต็มขอบจอ)
   ========================================= */

.video-section {
    width: 100vw;               /* บังคับกว้าง 100% ของหน้าจอ */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;        /* เทคนิคดันให้ทะลุกรอบ padding เดิมออกไปชนขอบจอ */
    
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;           /* ตัดส่วนเกินทิ้ง */
    margin-top: 50px;           /* ระยะห่างจากด้านบน */
    margin-bottom: 50px;        /* ระยะห่างจากด้านล่าง */
    background-color: #000;     /* ใส่พื้นหลังสีดำเผื่อวิดีโอโหลดช้า */
}

/* ตั้งค่าวิดีโอให้เต็มพื้นที่ */
.video-section video {
    width: 100%;                /* กว้างเต็มพื้นที่ 100vw */
    height: auto;               /* ความสูงยืดตามสัดส่วนวิดีโออัตโนมัติ ไม่ให้ภาพเบี้ยว */
    
    /* ป้องกันคนดูเอาเมาส์ไปคลิกแล้ววิดีโอหยุด (ให้มันเล่นเป็น Background แบบเนียนๆ) */
    pointer-events: none;       
    outline: none;
}

/* =========================================
   (แถม) เผื่อบางเบราว์เซอร์ยังดื้อโชว์ปุ่มอยู่ ให้ใช้ CSS บังคับซ่อนซ้ำอีกชั้น
   ========================================= */
.video-section video::-webkit-media-controls {
    display: none !important;
}

/* 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{
    position: relative;
    top: 50px;
}

.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;
}

.c{
    position: relative;
    right: 50px;
}


/* 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;
    }

    .sp1 img{
        width: 600px;
        height: auto;
    }
}

/* -----------------------------------------
   สำหรับหน้าจอขนาดเล็ก (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; /* ลดขนาดตัวอักษรลงนิดหน่อยให้อ่านง่ายบนมือถือ */
    }

    .sp1{
        position: relative;
        left: 50px;
    }

    .sp1 img{
        width: 370px;
        height: auto;
        
        

    }

    .bt-oem{
        width: 70px;
        height: 30px;
        position: relative;
        right: -30%;
        top: 5px;
    }


     .tip-cheese{
        width: 400px;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 auto;
        text-align: center;
        margin-top: 10px;
    }

    .h-tip{
        width: 350px;
    }

    .h-tip p{
        font-size: 16px;
    }

    .l-tip{
        width: 300px;
        margin-top: 5px;
        
    }
    .l-tip p{
        font-size: 12px;
        
    }

    .main-tip{
        display: contents;
        
    }

    .m-tip{
        margin-top: 10px;
    }


    /* --- ส่วนฟุตเตอร์ (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){
    .sp1 img{
        width: 350px;
        height: auto;
        position: relative;
        right: 20px;
    }

    .main-footer{
        position: relative;
    }

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

}