/* --- การจัดรูปแบบพื้นฐาน --- */
body {
    font-family: 'Mitr', sans-serif; 
    background-color: #fff;
    color: #000;
}

/* ลบ Padding ด้านข้างของ Main Content เพื่อให้วิดีโอชิดขอบ */
.main-content {
    padding-left: 0;
    padding-right: 0;
}


/* --- ส่วนหัว/แถบนำทาง --- */
.navbar {
    position: fixed; /* 1. ทำให้ Navbar ลอยตัวอยู่เหนือองค์ประกอบอื่น */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1050; /* 2. ค่าความสูงเพื่อให้ Navbar อยู่เหนือวิดีโอ */
    
    /* 3. ค่าเริ่มต้น: พื้นหลังเกือบโปร่งใส */
    background-color: rgba(255, 255, 255, 0.05); /* พื้นหลังสีขาว 5% ทึบ */
    
    /* 4. Transition: ทำให้การเปลี่ยนแปลงเป็นไปอย่างนุ่มนวล (0.5 วินาที) */
    transition: background-color 0.5s ease, border-color 0.5s ease, transform 0.5s ease, opacity 0.5s ease;
    
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* ขอบล่างจางๆ */
    padding: 20px 0; /* ใช้ Padding เดิมที่คุณต้องการ */
    --bs-navbar-padding-x: 0;
}

/* --- โค้ดสำหรับซ่อน Navbar เมื่อ Scroll ลง (ควบคุมโดย JavaScript) --- */
.navbar-hidden {
    /* 1. เลื่อน Navbar ขึ้นไปด้านบนความสูงของมันเอง */
    transform: translateY(-100%); 
    /* 2. ทำให้จางหายไป */
    opacity: 0;
    /* 3. ป้องกันไม่ให้เมาส์คลิกโดนช่องว่างด้านบน */
    pointer-events: none; 
}


/* 5. Hover State: เมื่อเมาส์ชี้ Navbar */
.navbar:hover {
    background-color: rgba(255, 255, 255, 0.95); /* พื้นหลังขาว 95% ทึบ (มองเห็นชัดเจน) */
    border-bottom: 1px solid #ffffff; /* ขอบล่างเข้มขึ้น */
}

.navbar > .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
}

/* 6. ปรับสีตัวอักษรเริ่มต้นให้จางลง (เพื่อให้เข้ากับพื้นหลังโปร่งใส) */
.navbar-brand,
.nav-link,
.lang-switcher,
.logo-img,
.company-name {
    /* ตัวอักษรและโลโก้สีดำ 50% ทึบ */
    font-family: 'Sarabun', sans-serif; /* ใช้ฟอนต์หลัก */
    font-size: 17px; /* ขนาดใหญ่ขึ้น */
    line-height: 1.4;
    color: rgba(0, 0, 0, 0.5) !important; 
    transition: color 0.5s ease, opacity 0.5s ease;
    opacity: 0.5; /* ทำให้โลโก้จางลงด้วย */
}

/* 7. เมื่อ Hover บน Navbar: ทำให้ตัวอักษรและโลโก้ชัดเจน */
.navbar:hover .navbar-brand,
.navbar:hover .nav-link,
.navbar:hover .lang-switcher,
.navbar:hover .logo-img,
.navbar:hover .company-name {
    color: #000000 !important; /* ตัวอักษรสีดำ 100% ทึบ */
    opacity: 1; /* โลโก้ชัดเจน 100% */
}

/* --- โค้ดสำหรับรูปภาพโลโก้ --- */
.logo-img {
    width: 60px; /* กำหนดขนาดความกว้าง */
    height: 60px; /* กำหนดขนาดความสูง */
    border: 1px solid #000;
    border-radius: 50%; /* ทำให้เป็นวงกลม */
    object-fit: cover; /* ทำให้รูปภาพเต็มวงกลม */
}

.company-name {
    font-size: 15px; 
    font-weight: bold;
    font-family: 'Sarabun', sans-serif; /* ใช้ฟอนต์หลัก */
    font-size: 25px; /* ขนาดใหญ่ขึ้น */
    font-weight: 700; /* ตัวหนา */
    line-height: 1.4;
}

/* ซ่อนปุ่ม Hamburger บนหน้าจอปกติ */
.navbar-toggler {
    display: none; 
}
@media (max-width: 992px) { 
    .navbar-toggler {
        display: block;
        border: 1px solid #000;
        padding: 5px 10px;
    }
}

.nav-link {
    color: #000 !important; 
    padding: 0 15px;
}

.lang-switcher {
    margin-left: 15px; /* จัดระยะห่างจากเมนู */
}

/* 1. สไตล์ของปุ่ม Dropdown หลัก (TH) */
.lang-switcher .btn.dropdown-toggle {
    /* รีเซ็ตค่า Bootstrap */
    background-color: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    
    /* สีเริ่มต้น (เมื่อ Navbar โปร่งใส) */
    color: rgba(0, 0, 0, 0.5); 
}

/* 2. เมื่อ Hover ที่ปุ่ม (เมื่อ Navbar โปร่งใส) */
.lang-switcher .btn.dropdown-toggle:hover {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-color: rgba(0, 0, 0, 0.2) !important; 
    color: #000 !important;
}

/* 3. เมื่อ Navbar ถูก Hover: ทำให้ปุ่มชัดเจนขึ้น */
.navbar:hover .lang-switcher .btn.dropdown-toggle {
    color: #000 !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
}
.navbar:hover .lang-switcher .btn.dropdown-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border-color: rgba(0, 0, 0, 0.5) !important;
}


/* 4. สไตล์ของเมนู Dropdown ที่เปิดออกมา */
.lang-switcher .dropdown-menu {
    border-radius: 4px;
    padding: 5px 0;
    border: 1px solid rgba(0, 0, 0, 0.15);
    min-width: 120px;
    margin-top: 5px; /* ให้มีช่องว่างเล็กน้อยจากปุ่ม */
    
    /* สไตล์สีตัวอักษรของเมนูตัวเลือก */
    color: #000;
}

.lang-switcher .dropdown-item {
    font-size: 14px;
    padding: 8px 15px;
}

/* ทำให้ภาษาที่เลือกอยู่ปัจจุบัน (active) มีความโดดเด่น */
.lang-switcher .dropdown-item.active {
    background-color: #384218; /* ใช้สีเข้มของ Footer */
}

/* เปลี่ยนสี Hover ใน Dropdown Menu */
.lang-switcher .dropdown-item:hover {
    background-color: #c6d63c; /* ใช้สีไฮไลท์อ่อน */
    color: #384218;
}


/* --- ส่วนวีดิโอ (Background Video) --- */

/* NEW: กำหนดขนาดสูงสุดของ Section และจัดให้อยู่ตรงกลาง เพื่อให้วิดีโอมีขอบด้านข้าง */
.video-player-section {
    max-width: 1200px; /* จำกัดความกว้างสูงสุดของวิดีโอ */
    margin: 0 auto; /* จัดให้อยู่ตรงกลางหน้าจอ */
    padding: 0 20px; /* เพิ่ม Padding เล็กน้อยสำหรับหน้าจอขนาดเล็ก */
    
    /* 💥 NEW: เพิ่มระยะห่างด้านบน (ขยับออกจาก Navbar) */
    margin-top: 150px; /* เพิ่มช่องว่างด้านบน 150px เพื่อให้วิดีโออยู่ต่ำกว่า Navbar */
}

.video-container {
    width: 100%;
    /* แก้ไขตรงนี้: ปรับความสูงจาก 100vh เป็น 80vh เพื่อลดความสูงของวิดีโอ */
    height: 80vh; 
    margin: 0 auto; 
    overflow: hidden;
    margin-bottom: 100px;
    
    /* NEW: เพิ่มมุมมนและเงาเล็กน้อย */
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}


/* --- ส่วนคำอธิบายบริษัท / สโลแกน (Branding Statement) --- */

.branding-statement {
    /* กำหนดระยะห่างด้านบนและล่างให้ชัดเจน */
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.branding-slogan {
    font-family: 'Sarabun', sans-serif; /* ใช้ฟอนต์หลัก */
    font-size: 32px; /* ขนาดใหญ่ขึ้น */
    font-weight: 700; /* ตัวหนา */
    line-height: 1.4;
    color: #384218; /* สีเข้มสำหรับหัวข้อ (ให้เข้ากับ Footer) */
    max-width: 900px; /* จำกัดความกว้างไม่ให้ยืดเกินไป */
    margin: 0 auto; /* จัดให้อยู่ตรงกลาง */
}

.branding-slogans {
    font-family: 'Sarabun', sans-serif; /* ใช้ฟอนต์หลัก */
    font-size: 32px; /* ขนาดใหญ่ขึ้น */
    font-weight: 600; /* ตัวหนา */
    line-height: 1.4;
    color: #384218; /* สีเข้มสำหรับหัวข้อ (ให้เข้ากับ Footer) */
    max-width: 900px; /* จำกัดความกว้างไม่ให้ยืดเกินไป */
    margin: 0 auto; /* จัดให้อยู่ตรงกลาง */
}

.branding-description {
    font-family: 'Sarabun', sans-serif; 
    font-size: 16px; 
    font-weight: 400; /* ตัวปกติ */
    line-height: 1.8;
    color: #555; /* สีเทาเข้ม */
    max-width: 800px; /* จำกัดความกว้างของคำอธิบาย */
}

/* หากต้องการไฮไลท์บางคำ (ตามภาพตัวอย่าง) */
.branding-slogan strong,
.branding-slogan em {
    color: #c6d63c; /* ใช้สีเขียวอ่อนจาก Footer เป็นสีไฮไลท์ */
}


/* --- NEW: ส่วนแนะนำผู้บริหาร (Vision/Mission/Intro Banner) --- */
.vision-mission-section {
    /* ใช้ Bootstrap Container/Fluid เพื่อควบคุมความกว้างได้ดีกว่า */
    padding: 0;
    margin-top: 50px; /* เพิ่มระยะห่างด้านบนจากส่วนวิดีโอ */
    margin-bottom: 50px;
}

.vision-banner-row {
    background-color: #f7f7f7; /* สีพื้นหลังสว่างๆ */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.vision-image-col {
    padding: 0;
    /* 1. จัดตำแหน่งและขยับออกมาจากขอบซ้าย/ล่าง */
    display: flex;
    justify-content: flex-start; /* จัดให้อยู่ชิดซ้าย */
    /* 💥 แก้ไข: ตั้งค่าเป็น stretch เพื่อให้คอลัมน์รูปภาพยืดเต็มความสูงของคอลัมน์ข้อความ */
    align-items: stretch; /* ทำให้คอลัมน์ยืดเต็มความสูง */
    /* กำหนด padding เป็น 0 เพื่อให้ภาพชิดกล่องข้อความทันที */
    padding-left: 0; 
    padding-bottom: 0; 
}

.vision-image {
    /* 2. **ขยายภาพให้เต็มพื้นที่ของ vision-image-col** */
    width: 100%; /* ใช้ความกว้างเต็มที่ */
    height: 100%; /* ใช้ความสูงเต็มที่ */
    /* 💥 แก้ไข: ใช้ cover เพื่อให้ภาพครอบคลุมเต็มพื้นที่ (อาจถูกตัด) */
    object-fit: cover; 
    
    /* ลบ max-width: 80%; และ max-height: 400px; */
    /* max-width: 80%; */ /* ลบออกเพื่อให้ภาพเต็ม width: 100% */
    /* max-height: 400px; */ /* ลบออกเพื่อให้ภาพเต็ม height: 100% */
    
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    /* ลบ max-height ออกเพื่อให้สามารถยืดได้ตามความสูงของ vision-text-col */
}

.vision-text-col {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #384218; /* ใช้สีเข้มเพื่อให้ดูตัดกัน */
    padding: 50px;
}

.vision-text-content {
    color: #fff;
    max-width: 500px;
    text-align: left; /* จัดชิดซ้ายสำหรับส่วนข้อความ */
}

.vision-title {
    color: #fff !important;
    font-size: 2.2rem !important;
}

.vision-pre-title {
    color: #c6d63c !important; /* สีเขียวอ่อนไฮไลท์ */
    font-size: 1rem;
}

.vision-description {
    color: #f4f4f4 !important;
    font-size: 1.5rem !important;
}

/* ปรับสำหรับหน้าจอขนาดเล็ก (มือถือ) */
@media (max-width: 991.98px) {
    .vision-image-col {
        padding-left: 20px;
        padding-right: 20px;
        padding-bottom: 20px;
        justify-content: center; /* จัดให้อยู่ตรงกลางบนมือถือ */
        align-items: flex-end; /* กลับไปจัดชิดล่าง */
    }

    .vision-image {
        max-width: 100%; /* ใช้เต็มความกว้างบนมือถือ */
        max-height: 300px;
        width: 100%; /* ให้คงไว้ 100% */
        height: auto; /* ปรับให้ความสูงยืดหดได้ตามสัดส่วน */
    }

    .vision-text-col {
        padding: 30px;
        text-align: center;
    }
    
    .vision-text-content {
        text-align: center;
    }
}
/* --- สิ้นสุด ส่วนแนะนำผู้บริหาร --- */



/* --- ส่วนกล่องข่าวสาร (แสดงรูปภาพ) --- */
.news-image-box {
    position: relative;
    height: 200px; 
    overflow: hidden; 
    
    /* 1. แทนที่ border: 1px solid #000; ด้วย box-shadow เพื่อให้ดูนูน */
    border: none; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* เงาจางๆ ด้านล่าง */
    border-radius: 10px; /* อัปเดตมุมมนเป็น 10px */
    
    margin-bottom: 20px; /* เพิ่มระยะห่างด้านล่างเล็กน้อยให้ดูดีขึ้น */
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* เพิ่ม transition ให้เงา */
    cursor: pointer; /* เพิ่ม cursor: pointer เพื่อบ่งบอกว่าคลิกได้ */
}

.news-img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.3s ease; 
}

/* 3. Hover State: เมื่อเมาส์ชี้ ให้ Shadow เข้มขึ้นและยกตัวขึ้นเล็กน้อย */
.news-image-box:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* เงาเข้มขึ้นและกว้างขึ้น */
    transform: translateY(-3px); /* ยกตัวกล่องขึ้น 3px */
}

.news-image-box:hover .news-img {
    transform: scale(1.05);
}

/* --- โค้ดสำหรับ Modal News Pop-up (เพิ่มจากคำขอก่อนหน้า) --- */
.modal-content {
    /* เพิ่มมุมมนให้กับ Modal */
    border-radius: 10px; 
    overflow: hidden; /* ซ่อนส่วนที่ล้นออกมา */
}

.modal-header {
    /* ใช้สี Footer เพื่อให้เข้ากัน */
    background-color: #384218; 
    color: #fff;
    border-bottom: none;
}

.modal-header .btn-close {
    /* ทำให้ปุ่มปิดเป็นสีขาว */
    filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-body {
    padding: 0 !important;
}

#modalImage {
    /* รับรองว่ารูปภาพจะอยู่ด้านบนสุดของ body */
    object-fit: cover;
    max-height: 400px; 
}

.modal-title-custom {
    font-family: 'Sarabun', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: #384218;
    margin-bottom: 10px;
}

.modal-description-custom {
    font-family: 'Sarabun', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #555;
}
/* --- สิ้นสุด โค้ดสำหรับ Modal News Pop-up --- */


/* --- ส่วนข้อมูลติดต่อ (Footer: NEW STYLE) */

/* กำหนดพื้นหลังหลักและสีตัวอักษรของ Footer */
.main-footer-dark {
    background-color: #384218; /* สีเขียวเข้มจากตัวอย่าง */
    color: #fff; /* ตัวอักษรสีขาว */
    position: relative; /* สำคัญสำหรับ Scroll to Top Button */
}

.footer-title {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #DDEE99; /* สีที่สว่างขึ้นสำหรับหัวข้อ */
}

.contact-text {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* ลิสต์เมนู */
.footer-list {
    list-style: none;
    padding-left: 0;
}

.footer-list li {
    margin-bottom: 8px;
}

.footer-list li a {
    color: #bfabab; /* สีอ่อนลง */
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s;
}

.footer-list li a:hover {
    color: #fff; /* เปลี่ยนเป็นสีขาวเมื่อ Hover */
}

/* Social Media Icons */
.social-icon-footer {
    color: #fff;
    font-size: 20px;
    margin-right: 15px;
    transition: color 0.3s;
}

.social-icon-footer:hover {
    color: #DDEE99; /* เปลี่ยนเป็นสีไฮไลท์เมื่อ Hover */
}

.footer-divider {
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* เส้นแบ่งจางๆ */
}

.copyright-text {
    font-size: 15px;
    color: #ccc;
    margin-bottom: 0;
    padding-bottom: 10px; /* เพิ่ม padding ล่างสุด */
}

/* --- Scroll to Top Button (ปุ่มลูกศรขึ้น) --- */
.scroll-to-top-btn {
    position: absolute;
    bottom: 20px; /* ปรับตำแหน่งจากด้านล่าง */
    right: 20px; /* ปรับตำแหน่งจากด้านขวา */
    width: 40px;
    height: 40px;
    background-color: #555; /* สีพื้นหลังปุ่ม */
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    transition: background-color 0.3s;
    
    /* เพิ่ม transition สำหรับการแสดง/ซ่อนด้วย JavaScript */
    opacity: 0; 
    pointer-events: none;
    transition: background-color 0.3s, opacity 0.3s, pointer-events 0.3s;
}

.scroll-to-top-btn.show {
    opacity: 1; /* แสดงเมื่อมีคลาส show จาก JS */
    pointer-events: auto;
}

.scroll-to-top-btn:hover {
    background-color: #DDEE99; /* เปลี่ยนสีเมื่อ Hover */
    color: #384218;
}

.btn-contact-us:hover {
    background-color: #333; 
    color: #fff;
}

/* --- Horizontal Draggable Gallery Section --- */

.horizontal-gallery-section {
    padding-top: 50px;
    padding-bottom: 80px;
    background-color: #f8f8f8; 
}

.gallery-wrapper {
    position: relative;
    max-width: 1600px; /* **[ปรับขนาด: ใหญ่ขึ้น]** ขยายให้กว้างเกือบเต็มขอบ */
    margin: 0 auto;
    padding: 20px 0; 
}

.gallery-container {
    display: flex;
    overflow-x: scroll; 
    scroll-snap-type: x mandatory; 
    -webkit-overflow-scrolling: touch; 
    scroll-behavior: smooth; 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
    padding-bottom: 20px; 
}

/* ซ่อน scrollbar สำหรับ Webkit (Chrome, Safari) */
.gallery-container::-webkit-scrollbar {
    display: none;
}

.gallery-card {
    flex: 0 0 auto; 
    width: 350px; /* **[ปรับขนาด: ใหญ่ขึ้น]** กำหนดความกว้างของแต่ละ Card */
    height: 350px; /* **[ปรับขนาด: ใหญ่ขึ้น]** กำหนดความสูงของแต่ละ Card */
    margin-right: 30px; /* **[ปรับระยะห่าง: เพิ่มขึ้น]** ระยะห่างระหว่าง Card */
    background-color: #fff;
    border-radius: 15px; 
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); 
    scroll-snap-align: center; 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: grab; 
}

.gallery-card:active {
    cursor: grabbing; 
}

.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
}

/* Gallery Controls (ลูกศรเท่านั้น) */
.gallery-controls {
    display: flex;
    justify-content: flex-end; 
    align-items: center;
    margin-top: 30px; 
    padding: 0 20px; 
}

.gallery-arrows {
    display: flex;
    gap: 15px; 
}

.full-width-arrows {
    width: 100%;
    justify-content: space-between;
}


.arrow-btn {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    width: 60px; /* **[ปรับขนาด: ใหญ่ขึ้น]** */
    height: 60px; /* **[ปรับขนาด: ใหญ่ขึ้น]** */
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
    font-size: 26px; /* **[ปรับขนาด: ใหญ่ขึ้น]** */
    color: #384218; 
}

.arrow-btn:hover {
    background-color: #DDEE99; 
    border-color: #384218;
    color: #384218;
}

.arrow-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #f0f0f0;
    color: #999;
    border-color: #ddd;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    .gallery-wrapper {
        max-width: 1200px; 
    }
    .gallery-card {
        width: 300px; 
        height: 300px;
        margin-right: 25px;
    }
}

@media (max-width: 992px) {
    .gallery-card {
        width: 250px; 
        height: 250px;
        margin-right: 20px;
    }
}

@media (max-width: 768px) {
    .gallery-card {
        width: 220px; 
        height: 220px;
        margin-right: 15px;
    }
    .gallery-controls {
        justify-content: center; 
        margin-top: 20px;
    }
    .full-width-arrows {
        width: auto;
        justify-content: center; 
    }
    .arrow-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}
/* --- โค้ดสำหรับ Product Overview Modal ใหม่ (สำหรับเมนู Navbar) --- */

/* 1. สไตล์ตัว Modal เอง: มุมมนและเงา (ตามที่คุณกำหนดใน HTML Inline) */
/* เนื่องจากคุณใส่สไตล์เหล่านี้ใน HTML Inline แล้ว (style="...") 
   ผมจึงเพิ่มคลาส .modal-content-product-overview ใน CSS เพื่อให้โค้ดสะอาดขึ้น 
   และย้ายสไตล์เหล่านั้นเข้ามา (แต่คุณต้องเปลี่ยนโค้ด HTML เล็กน้อย) */
/* หากคุณต้องการเก็บ style="..." ใน HTML ไว้ ก็ไม่จำเป็นต้องใช้โค้ดนี้ */
.modal-content-product-overview {
 border-radius: 20px !important; /* มุมมนที่ใหญ่ขึ้น */
 overflow: hidden; 
 box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important; /* เงาเข้ม */
}

/* 2. สไตล์หัวข้อ "ภาพรวมผลิตภัณฑ์" */
.modal-body h4 {
  color: #384218; /* ใช้สีเข้มของ Footer */
  font-family: 'Sarabun', sans-serif;
  font-weight: 700;
}

/* 3. สไตล์การ์ดผลิตภัณฑ์ภายใน Modal */
.product-card {
 display: block;
 text-decoration: none;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 border: none !important; /* ลบเส้นขอบถ้ามี */
 border-radius: 10px; /* มุมมนของการ์ด */
 overflow: hidden;
}

.product-card:hover {
transform: translateY(-5px); /* ยกตัวขึ้นเล็กน้อยเมื่อ Hover */
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15); /* เพิ่มเงาเมื่อ Hover */
}

.product-card img {
/* สไตล์สำหรับรูปภาพใน Card */
width: 100%;
height: 150px; /* กำหนดความสูงตามที่คุณใส่ใน HTML Inline */
object-fit: cover;
border-radius: 10px;
}

.product-card-title {
/* สไตล์ชื่อผลิตภัณฑ์ที่อยู่ใต้รูปภาพ */
color: #384218 !important; /* สีชื่อผลิตภัณฑ์ */
font-weight: 600 !important;
margin-top: 10px;
font-size: 16px;
}

/* * ***** ส่วนที่เพิ่มเข้ามาเพื่อให้มีพื้นที่สีขาวรอบเนื้อหามากขึ้น *****
 */
#productOverviewModal .modal-body {
padding:50px !important; 
}
/* * ***************************************************************
 */


/* --- การกำหนดความกว้าง Modal แบบกำหนดเอง (เพื่อให้ใหญ่กว่า modal-xl) --- */
.custom-product-width {
/* คุณสามารถเปลี่ยนค่า 95% เป็นขนาดที่คุณต้องการได้ */
 
/* ตัวเลือกที่ 1: กำหนดเป็นเปอร์เซ็นต์ของหน้าจอ */
max-width: 100% !important; 
 
/* ตัวเลือกที่ 2: หรือกำหนดเป็นพิกเซลความกว้างคงที่ เช่น 1400px */
/* max-width: 1400px !important; */
}

/* --- การจัดตำแหน่ง Modal ให้ชิดด้านบน (Top-Aligned Modal) --- */
/* เราต้องบังคับการจัดวางโดยใช้ !important และรีเซ็ตค่าเริ่มต้นของ Bootstrap */

.modal-top-aligned {
/* 1. บังคับการจัดเรียง Flexbox ให้ชิดด้านบนสุด */
align-items: flex-start !important; 
 
/* 2. ล้างค่า Margin/Padding บน-ล่าง ที่ Bootstrap อาจกำหนดไว้ */
 margin: 0 auto !important;
 padding: 0 !important;

 /* 3. กำหนดความสูงเต็มหน้าจอ (เพื่อให้มีพื้นที่ให้ Modal ยกขึ้นไปด้านบน) */
height: 100vh !important; 
 
 /* 4. กำหนดระยะห่างจากขอบด้านบน: 100px คือระยะห่างใต้ Navbar */
padding-top: 120px !important;
}

/* เพื่อให้ Modal Dialog มีพื้นที่กว้างขึ้นตาม custom-product-width */
.custom-product-width {
max-width: 95% !important; /* ใช้ 95% เพื่อให้เหลือขอบซ้ายขวา */
}

/* เพิ่มการกำหนดความสูงของรูปภาพใน CSS เพื่อความสะอาด */
.product-card img {
width: 100%;
 /* ปรับความสูงให้เหมาะสมกับ 4 รูปต่อแถว */
 height: 120px; 
 object-fit: cover;
 border-radius: 10px;
}
/* --- สไตล์สำหรับเส้นแบ่งใน Footer (Footer Divider) --- */

.footer-divider {
    /* *** สำคัญ: ลบ Border ที่ Bootstrap อาจกำหนดไว้ *** */
    border: none;
    
    /* 1. กำหนดความสูง/ความหนาของเส้น */
    height: 2px; /* หรือตามที่คุณต้องการ (เช่น 3px) */
    
    /* 2. กำหนดสีของเส้น (ตัวอย่าง: ใช้สีเข้มของแบรนด์) */
    background-color: #eeb6b6; 
    
    /* 3. กำหนดความทึบ (Opacity) ให้เต็ม 100% (เพื่อป้องกัน Bootstrap ทำให้เส้นจาง) */
    opacity: 1; 
}


/* --- เมนูและเส้นใต้เวลา Hover (เพิ่มใหม่ตามคำขอ) --- */
.nav-link {
    font-family: 'Sarabun', sans-serif; 
    font-weight: 400;
    font-size: 1.1rem;
    color: #444 !important;
    padding: 8px 15px !important;
    position: relative; /* จำเป็นสำหรับตำแหน่งเส้นใต้ */
    text-decoration: none;
    transition: color 0.3s ease;
}

/* สร้างเส้นใต้เตรียมไว้ */
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 2px; /* ระยะห่างจากตัวอักษร (ปรับค่านี้ได้ เช่น 0px หรือ 5px) */
    left: 50%;
    background-color: #384218; /* สีเขียวของแบรนด์ */
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover {
    color: #384218 !important;
}

/* เมื่อเอาเมาส์ไปชี้ ให้เส้นขยายออกมา */
.nav-link:hover::after {
    width: 80%; /* ความยาวเส้นใต้เป็น 80% ของความกว้างเมนู */
}



/* --- การจัดรูปแบบพื้นฐาน --- */
body {
    font-family: 'Mitr', sans-serif; 
    background-color: #fff;
    color: #000;
}

/* --- ส่วนหัว/แถบนำทาง (เพิ่มเส้นใต้เมนู) --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1050;
    background-color: rgba(255, 255, 255, 0.05);
    transition: all 0.5s ease;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-link {
    font-family: 'Sarabun', sans-serif; 
    color: #444 !important;
    padding: 8px 15px !important;
    position: relative; /* สำหรับตำแหน่งเส้นใต้ */
    text-decoration: none;
    transition: color 0.3s ease;
}

/* สร้างเส้นใต้อัตโนมัติเวลา Hover */
.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 2px; /* ระยะห่างจากตัวอักษร */
    left: 50%;
    background-color: #384218;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link:hover { color: #384218 !important; }
.nav-link:hover::after { width: 80%; }

/* --- ส่วน Gallery สินค้า (ปรับให้ตรงกรอบและมี 3 รูป) --- */
.product-gallery-container {
    padding: 40px 0;
    overflow: hidden; /* ปิด Scroll เพราะมีแค่ 3 รูปพอดีหน้าจอ */
}

.product-card {
    border: none !important;
    transition: transform 0.3s ease;
    background: transparent;
}

.product-card img {
    width: 100%;
    height: 280px; /* ปรับความสูงให้รูปดูสมดุลกับความกว้างที่เพิ่มขึ้น */
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.product-card:hover {
    transform: translateY(-5px);
}

/* เอาสไตล์ปุ่มลูกศรเดิมออก */
.gallery-nav-btn { display: none; }


/* * --- ส่วนภาพพื้นหลังด้านบน (About Banner) --- */
.about-banner {
    width: 100%;
    height: 450px; /* ปรับความสูงของภาพตามต้องการ */
    /* เปลี่ยน '/Pic/your-bg.png' เป็นที่อยู่ภาพในเครื่องของคุณ */
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('/Pic/kua.jpg'); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* ทำเอฟเฟกต์ Parallax เลื่อนตามหน้าจอ */
    margin-top: 0; /* เพราะ Navbar เป็นแบบ Fixed */
    display: flex;
    align-items: center;
}



/* =======================================================
   UNIVERSAL RESPONSIVE SYSTEM (S, M, L, Tablet)
   ======================================================= */

/* --- [1] NAVBAR: จัดระเบียบส่วนหัวให้ "หายใจออก" --- */
@media screen and (max-width: 991px) {
    /* บังคับ Navbar ให้เว้นระยะห่างอัตโนมัติ ไม่ทับกันแน่นอน */
    .container-fluid {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: nowrap !important; /* ห้ามของซ้อนกัน */
        padding: 8px 15px !important;
    }

    /* ชื่อบริษัท: จะหดตัวอัตโนมัติตามพื้นที่ที่เหลือ */
    .company-name {
        flex: 1 !important; /* ยืดหดเองตามพื้นที่ว่าง */
        font-size: clamp(10px, 3vw, 14px) !important;
        font-weight: 700 !important;
        margin: 0 10px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 150px; /* กันไม่ให้ยาวไปเบียดปุ่ม */
    }

    /* ซ่อนสิ่งที่ทำให้จอล้น (QR Code และโลโก้จิ๋วๆ ที่เยอะเกิน) */
    .brand-logos, .qrcode, .qr-code-section {
        display: none !important;
    }

    /* วิดีโอ: ปรับสัดส่วนให้พอดี ไม่แบนไม่เบี้ยว */
    .video-container, .carousel-item {
        height: auto !important;
        aspect-ratio: 16 / 9 !important; /* บังคับสัดส่วนวิดีโอมาตรฐาน */
        min-height: 150px;
    }
    video { object-fit: cover !important; width: 100%; height: 100%; }
}

/* --- [2] PRODUCT CARDS: จัดระเบียบรูปสินค้า (แก้ทองม้วนล้น) --- */
@media screen and (max-width: 767px) {
    /* บังคับให้รูปสินค้าทุกใบ "สูงเท่ากัน" ไม่ว่าต้นฉบับจะยาวแค่ไหน */
    .product-card img, .card img {
        height: clamp(90px, 25vw, 130px) !important; /* ยืดหยุ่นตามจอ แต่ไม่เกินช่วงนี้ */
        width: 100% !important;
        object-fit: cover !important; /* ตัดส่วนเกินทิ้งเพื่อให้รูปดูเป๊ะ */
        border-radius: 10px !important;
    }

    /* ปรับจูนช่องไฟใน Card ให้ดูโปร่งขึ้น */
    .product-card .card-body {
        padding: 8px !important;
    }
}

/* --- [3] SPECIFIC TUNING (S & M) --- */
/* สำหรับมือถือขนาดเล็กเป็นพิเศษ */
@media screen and (max-width: 390px) {
    .company-name { max-width: 90px !important; font-size: 10px !important; }
    .btn-lang-toggle { font-size: 9px !important; padding: 2px 6px !important; }
}

/* สำหรับแท็บเล็ต (Tablet) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .product-card img { height: 220px !important; }
    .row-cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
}

 



/* --- แก้ไขเฉพาะ Dropdown สำหรับ Mobile & Tablet (ไม่ยุ่งกับ Desktop) --- */
@media screen and (max-width: 991px) {
    
    /* [จุดที่เพิ่ม] จัดตำแหน่ง Logo และชื่อบริษัทให้ขยับมาชิดซ้ายแบบมีระยะห่างพอดี */
    .navbar-brand, 
    .brand-container,
    .d-flex.align-items-center.flex-shrink-1 {
        display: flex !important;
        align-items: center !important;
        margin-left: 15px !important; /* ขยับออกมาจากขอบซ้าย 15px ให้ดูสมดุล */
        margin-right: auto !important; /* ผลักกลุ่มปุ่มขวาไปให้สุดทาง */
    }

    .logo-img {
        height: 32px !important; /* ปรับขนาดโลโก้ให้พอดีกับแถบ */
        width: auto !important;
    }

    .company-name {
        font-size: 13px !important;   /* ขยายตัวอักษรให้ชัดขึ้นสำหรับ Tablet */
        margin-left: 10px !important;
        max-width: 250px !important;  /* ขยายพื้นที่ให้ชื่อบริษัทแสดงได้ครบ */
        white-space: nowrap !important;
        color: #333 !important;
    }

    /* 1. ตั้งค่าเมนูให้ "ทิ้งตัวลงมา" ต่อจากแถบ Navbar (คงเดิม) */
    .navbar-collapse {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: rgba(255, 255, 255, 0.96) !important;
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
        border-top: 1px solid #eee;
        z-index: 1000 !important;
    }

    /* 2. จัดระเบียบตัวอักษรในเมนู (คงเดิม) */
    .navbar-nav {
        padding: 10px 0 !important;
        margin: 0 !important;
    }

    .navbar-nav .nav-link {
        white-space: nowrap !important;
        font-size: 15px !important;
        padding: 12px 20px !important;
        text-align: left !important;
        border-bottom: 1px solid rgba(0,0,0,0.03);
        color: #333 !important;
    }

    /* 3. จัดการปุ่มฝั่งขวาให้ชิดกัน (คงเดิม) */
    .navbar-header-right, 
    .nav-controls-right,
    .d-flex.align-items-center:last-child {
        display: flex !important;
        gap: 5px !important;
        margin-left: auto !important;
    }
}


/* --- แก้ไข Footer สำหรับ Mobile & Tablet (ต่ำกว่า 991px) --- */
@media screen and (max-width: 991px) {
    
    /* 1. บังคับให้ทุกอย่างใน Footer จัดวางตรงกลาง */
    .main-footer-dark {
        text-align: center !important;
        padding-bottom: 60px !important; /* เผื่อพื้นที่ให้ปุ่ม Scroll to Top */
    }

    /* 2. จัดการเรื่อง Column ให้เรียงเป็นแนวตั้งตรงกลาง */
    .main-footer-dark .row {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .main-footer-dark [class^="col-"] {
        width: 100% !important;
        margin-bottom: 30px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 3. จัดการรายการลิสต์ (Product & Info) ให้ไม่มีจุดและอยู่ตรงกลาง */
    .footer-list {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
    }

    .footer-list li {
        margin-bottom: 10px !important;
    }

    .footer-list li a {
        display: inline-block !important; /* เพื่อให้ text-align: center ทำงาน */
    }

    /* 4. จัดการ Social Icons และ Copyright ให้เข้าที่ */
    .footer-social-links {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .footer-social-links .social-icon-footer {
        display: inline-flex !important;
        margin: 0 5px !important;
    }

    .copyright-text {
        text-align: center !important;
        margin-top: 20px !important;
    }

    /* 5. ปุ่ม Scroll to Top สำหรับมือถือ (ให้ลอยเด่นขึ้น) */
    .scroll-to-top-btn {
        right: 20px !important;
        bottom: 20px !important;
    }
}



/* --- เจาะจงหน้าจอมือถือขนาดเล็ก (Mobile S) --- */
@media screen and (max-width: 375px) {
    
    /* 1. จัดระเบียบกลุ่มปุ่มขวาให้เล็กลงและชิดกันมากขึ้น */
    .navbar-header-right, 
    .nav-controls-right, 
    .d-flex.align-items-center {
        gap: 4px !important; /* ลดช่องว่างระหว่างปุ่ม */
    }

    /* 2. ย่อขนาดปุ่ม TH ให้กะทัดรัด */
    .btn-lang-toggle {
        height: 28px !important;    /* ลดความสูง */
        padding: 0 5px !important;  /* ลดความกว้าง */
        font-size: 10px !important; /* ลดขนาดตัวอักษร TH */
        min-width: 45px !important; /* จำกัดขนาดขั้นต่ำ */
    }

    /* 3. ย่อขนาดปุ่มเมนู (Hamburger) ให้เท่ากับปุ่ม TH */
    .navbar-toggler {
        height: 28px !important;
        width: 35px !important;
        padding: 0 !important;
        font-size: 14px !important;
    }

    

    .logo-img {
        height: 25px !important; /* ย่อโลโก้ลงนิดนึง */
    }
}