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

/* จัดการกล่องเนื้อหาหลัก */
.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;
}

/* หัวข้อ (AS PSK DAIRY Products) */
.top-about p {
    font-size: 36px;
    font-weight: 700;
    color: #004080;            /* ใช้สีน้ำเงินเดียวกับ Header */
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 3px solid #000000; /* เส้นใต้สีทองเพิ่มความหรูหรา */
    display: inline-block;
    width: 100%;
}

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

.qc{
    position: relative;
    left: 85%;

}

.qc-img img{
    width: 150px;
    height: 150px;
    
}

.sp1{
   
    position: relative;
    left: 0%;
    
}

.sp1 img{
    width: 1000px;
    height: 100%;
    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: -90%;
    top: -50px;
}

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

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

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

    .qc img{
        position: relative;
        right: 55%;
    }

    .sp1 img{
        width: 370px;
        height: auto;
        position: relative;
        right: 10px;

    }

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

    /* --- ส่วนฟุตเตอร์ (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;
    }

}