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


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

@media (max-width: 768px) {
    /* ปรับ Container ให้ห่างขอบน้อยลงบนมือถือ */
    .container-products {
        padding: 5px 3%;
        
    }

    /* เปลี่ยนการเรียงการ์ดจาก แนวนอน -> แนวตั้ง */
    .product-horizontal-card {
        flex-direction: column; 
        max-width: 100%;
        background:none;
    }

    /* ปรับรูปให้กว้างเต็มจอและสูงคงที่ */
    .abc-img {
        flex: 0 0 auto; 
        width: 100%;
        height: 250px;
    }

    /* ปรับ Padding ของเนื้อหาให้พอดี */
    .product-info-right {
        padding: 1px;
    }

    /* ปรับขนาดตัวอักษรชื่อสินค้า */
    .product-name a {
        font-size: 15px;
        align-items: center;
        text-align: center;
    }

    /* ปรับ Quality Test ให้เรียง 2 คอลัมน์เพื่อให้ไม่อัดแน่นเกินไป */
    .quality-test {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}