/* --- GLOBAL STYLES & RESET --- */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- BUTTON STYLES --- */
.btn {
    padding: 10px 25px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    font-weight: bold;
    display: inline-block;
}

.btn-outline {
    border: 2px solid white;
    color: white;
}

.btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.btn-view-all {
    background-color: #2a3c50; /* สีน้ำเงินเข้ม */
    color: white;
    padding: 8px 15px;
}

.btn-view-all:hover {
    background-color: #1e2b38;
}

.btn-primary-cta {
    background-color: #f9c200; /* 📌 ใช้สีเหลือง/ทองเป็นพื้นหลัง */
    color: #2a3c50; /* 📌 เปลี่ยนสีฟอนต์เป็นสีน้ำเงินเข้ม */
    border: 2px solid #f9c200; /* ให้ขอบเป็นสีเดียวกัน */
}

.btn-primary-cta:hover {
    /* เอฟเฟกต์เมื่อโฮเวอร์ */
    background-color: #e6b300; 
    border-color: #e6b300;
}

/* ปรับปรุงปุ่มรอง (Contact Us) เล็กน้อย */
.btn-outline {
    border: 2px solid white;
    color: white;
}

/* --- 1. HEADER & NAVIGATION BAR --- */
.main-header {
    background-color: #ffffff; /* พื้นหลังสีขาวสำหรับ Navbar */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky; /* ทำให้ Navbar อยู่ด้านบนเสมอ */
    top: 0;
    z-index: 1000;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px; /* 📌 เพิ่ม padding แนวตั้งจาก 10px เป็น 15px */
}

.logo {
    display: flex;
    align-items: center; /* 📌 ทำให้โลโก้และข้อความอยู่แนวเดียวกันในแนวดิ่ง */
    color: #2a3c50;
    font-size: 14px; /* <--- อาจจะเพิ่มขนาดฟอนต์ให้ใหญ่ขึ้นเพื่อให้อ่านง่าย */
    flex-direction: row; /* <--- เปลี่ยนเป็น row เพื่อให้เรียงกันไปทางขวา */
    gap: 10px; /* <--- เพิ่มระยะห่างระหว่างโลโก้กับข้อความ */
}

.logo img {
    height: 70px;
    /* margin-bottom: 2px; <--- ลบบรรทัดนี้ออก ไม่จำเป็นแล้ว */
}

/* เพิ่มคลาสสำหรับชื่อบริษัทเพื่อปรับแต่ง */
.company-name {
    font-size: 15px; /* 📌 ปรับขนาดฟอนต์ให้ใหญ่ขึ้น */
    font-weight: bold; /* 📌 อาจจะเพิ่มความหนาของฟอนต์ */
    /* ถ้าต้องการให้มี margin-left ก็สามารถเพิ่มได้ */
    /* margin-left: 10px; */
    margin-top: 25px;
}

.main-nav ul {
    display: flex;
    gap: 40px; /* 📌 เพิ่มระยะห่างระหว่างเมนูจาก 30px เป็น 40px */
    font-size: 18px; /* 📌 เพิ่มขนาดฟอนต์จาก 16px เป็น 18px */
    font-weight: 600; /* 📌 เพิ่มความหนาของฟอนต์เล็กน้อย */
}

.main-nav a {
    color: #333;
    padding: 5px 0;
    border-bottom: 3px solid transparent;
}

.main-nav a.active {
    /* 📌 ใช้สีน้ำเงินเข้มที่เข้ากับ Hero Section และปรับขีดเส้นใต้ให้หนาขึ้น */
    color: #053150; 
    border-bottom: 3px solid #f9c200; /* 📌 เปลี่ยนสีขีดเส้นใต้เป็นสีเหลืองเพื่อดึงดูดสายตา */
    font-weight: 700; /* 📌 ทำให้ข้อความหนาขึ้น */
}

.main-nav a:hover {
    color: #2a3c50; 
    border-bottom: 3px solid #f9c200; 
}


/* --- 2. HERO SECTION --- */
.hero-section {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('images/hero-bg.png');
    background-size: cover;
    background-position: center;
    height: 600px;
    display: flex;
    align-items: center; /* <--- เปลี่ยนจาก flex-start เป็น center เพื่อให้กล่องอยู่ตรงกลางแนวตั้ง */
    justify-content: center;
    /* padding-top: 100px; <--- ลบหรือคอมเมนต์บรรทัดนี้ออก เพราะ align-items: center จะจัดการให้แล้ว */
}

.hero-content {
    text-align: center;
    max-width: 900px; /* <--- ลองเพิ่มความกว้างอีกเป็น 1100px */
    width: 80%; /* <--- เพิ่ม width: 90% เพื่อให้กว้างขึ้นตามพื้นที่ที่มี */
}

.overlay-box {
    background-color: #053150;
    color: white;
    padding: 40px 40px; /* <--- ปรับ padding: 50px (บน-ล่าง) 80px (ซ้าย-ขวา) */
    border-radius: 20px; /* <--- เพิ่มความโค้งมนของขอบเป็น 20px ให้เหมือน Figma มากขึ้น */
    font-family: 'Montserrat', sans-serif;
}

.hero-content h2 {
    /* 📌 เพิ่มขนาดเล็กน้อยและใช้สีที่สว่างกว่า */
    font-size: 20px; 
    color: #f9c200; /* 📌 ใช้สีเหลือง/ทอง เพื่อเพิ่มความคอนทราสต์และดึงดูดสายตา */
    font-weight: 700;
    letter-spacing: 2px; /* 📌 เพิ่มระยะห่างระหว่างตัวอักษรเพื่อให้ดูเป็นโลโก้/สโลแกน */
    margin-bottom: 5px;
}

.hero-content h1 {
    font-size: 48px;
    margin-top: 0;
    margin-bottom: 20px;
    font-weight: 900;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
}

.hero-content p {
    font-size: 20px;
    margin-bottom: 30px;
    padding-left: 40px;
    padding-right: 40px; 
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}


/* --- 3. ABOUT SECTION --- */
.about-section {
    padding: 80px 0;
}

.about-flex {
    display: flex;
    gap: 60px;
    align-items: center;
}

.about-text-content {
    flex: 1;
}

.about-text-content p:first-of-type {
    font-size: 18px; /* ทำให้ใหญ่กว่าย่อหน้าอื่นเล็กน้อย */
    font-weight: 500; /* ทำให้หนาขึ้นเล็กน้อย */
    color: #555555; /* ใช้สีน้ำเงินเข้มเพื่อเน้น */
    margin-bottom: 20px;
}

.about-image {
    flex: 1;
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 12px; /* 📌 ทำให้ขอบโค้งมนมากขึ้น เพื่อความทันสมัย */
    
    /* 📌 ปรับเงาให้ชัดเจนและสวยงามยิ่งขึ้น */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); 
    
    /* 📌 แนะนำ: หากต้องการให้ดูนุ่มนวลขึ้น */
    filter: brightness(0.98); /* ทำให้รูปภาพดูสว่างขึ้น 2% เพื่อความนุ่มนวล */
}

.section-title {
    color: #053150;
    font-weight: bold;
    display: block;
    margin-bottom: 5px;
    font-size: 42px;
    border-bottom: 4px solid #f9c200; /* ขีดเส้นสีเหลืองด้านล่าง */
    padding-bottom: 5px;
    width: fit-content;
}

.about-text-content h2 {
    font-size: 36px;
    color: #053150;
    margin-top: 10px;
    margin-bottom: 20px;
}

.about-text-content p {
    /* 📌 ปรับสีฟอนต์: ใช้สีเทาอ่อนลง */
    color: #555555; 
    
    /* 📌 ปรับขนาดฟอนต์: ลองเพิ่มขนาดเป็น 16px หรือ 18px */
    font-size: 18px; 
    line-height: 1.6; /* ปรับระยะห่างระหว่างบรรทัดให้อ่านง่าย */
    margin-bottom: 15px;
    padding-right: 10px;
}

/* --- 4. PRODUCTS PREVIEW SECTION --- */
.products-preview-section {
    padding: 50px 0 80px 0;
    background-color: #f7f7f7;
}

.products-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.products-header .section-title {
    /* ปรับ section-title ในส่วน Products */
    border-bottom: 4px solid #f9c200; /* ใช้สีน้ำเงิน */
    color: #053150; /* สีน้ำเงินเข้ม */
    font-size: 42px;
    font-family: 'Montserrat', sans-serif;
}

.product-cards-container {
    display: flex;
    gap: 30px;
}

.product-card {
    flex: 1;
    background-color: white;
    padding: 20px;
    border-radius: 15px;
    
    /* 📌 ปรับเงาให้ดูมีมิติขึ้น */
    /* ค่า: (offset-x) (offset-y) (blur-radius) (spread-radius) (color) */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); 
    
    transition: transform 0.3s, box-shadow 0.3s; /* <--- แนะนำ: เพิ่ม transition เพื่อให้ดูมีชีวิตชีวา */
}

/* 📌 แนะนำ: เพิ่มเอฟเฟกต์เมื่อวางเมาส์เหนือกล่อง (Hover effect) */
.product-card:hover {
    transform: translateY(-5px); /* ทำให้กล่องลอยขึ้นเล็กน้อย */
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); /* ทำให้เงาเข้มขึ้น */
}

.product-image-wrap {
    overflow: hidden;
    height: 180px; /* กำหนดความสูงเพื่อให้รูปภาพเท่ากัน */
    margin-bottom: 15px;
    border-radius: 5px;
    position: relative;
    border-top: 5px solid; /* สำหรับเส้นขีดสีด้านบน */
}

/* สีเส้นขีดสินค้า */
.yellow-border { border-top-color: #f9c200; }
.red-border { border-top-color: #dc3545; }
.green-border { border-top-color: #28a745; }


.product-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ทำให้รูปภาพครอบคลุมพื้นที่โดยไม่ยืด */
}

.product-card h3 {
    color: #053150;
    font-size: 21px;
    margin-top: 0;
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
}

.product-card ul {
    list-style-type: disc; /* ใช้จุดสำหรับลิสต์ */
    margin-left: 20px;
}

.product-card li {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 5px;
    color: #555555;
    font-family: 'inter', sans-serif;
}

/* --- 5. WHY CHOOSE SECTION --- */
.why-choose-section {
    padding: 100px 0 100px 0;
    background-color: #ffffff; /* พื้นหลังสีขาว */
    font-family: 'Montserrat', sans-serif;
}

.section-title-lg {
    font-family: 'Montserrat', sans-serif;
    font-size: 42px;
    color: #2a3c50; /* สีน้ำเงินเข้ม */
    margin-bottom: 20px;
    width: fit-content;
    border-bottom: 5px solid #f9c200; /* ขีดเส้นสีเหลืองด้านล่าง */
    padding-bottom: 10px;
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* แบ่งเป็น 2 คอลัมน์ */
    gap: 40px 100px; /* ระยะห่างแนวตั้ง 40px, แนวนอน 100px */
    padding-top: 40px;
}

.feature-item {
    display: flex;
    flex-direction: column;
    
}

.icon-title {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.feature-icon {
    font-size: 30px; /* ปรับขนาดไอคอน Unicode */
    color: #2a3c50;
    margin-right: 15px;
    width: 40px; /* กำหนดความกว้างให้ไอคอน */
    text-align: center;
    
}

.feature-item h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    color: #2a3c50;
    margin: 0;
}

.feature-item p {
    font-size: 16px;
    color: #555;
    line-height: 1.7;
    /* จัดการให้ข้อความอยู่เยื้องขวาของไอคอน */
    padding-left: 55px; /* (ความกว้างไอคอน 40px + margin-right 15px) */
    margin-top: -10px; /* ดึงข้อความขึ้นไปเล็กน้อยให้ชิดกับหัวข้อ */
}


/* --- 6. FOOTER --- */
.main-footer {
    background-color: #2a4746; /* สีเขียวเข้ม/เทาเข้ม */
    color: white;
    padding: 40px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr; /* แบ่งคอลัมน์ Contact และ Mission */
    gap: 50px;
    padding-top: 30px;
    padding-bottom: 30px;
    align-items: center;
    
    /* ขีดเส้นสีเหลืองด้านบนและด้านล่างตามดีไซน์ */
    border-top: 3px solid #f9c200; 
    border-bottom: 3px solid #f9c200; 
}

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-item {
    display: flex;
    align-items: center;
    font-size: 16px;
    opacity: 0.8; /* ทำให้ข้อความติดต่อดูนุ่มนวลลง */
    font-family: 'Montserrat', sans-serif;
}

.contact-icon {
    font-size: 20px; /* ขนาดไอคอน */
    color: white;
    margin-right: 15px;
    width: 25px;
    text-align: center;
}

.footer-mission {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    font-family: 'Montserrat', sans-serif;
}

.mission-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 10px;
}

.mission-text {
    font-size: 18px;
    line-height: 1.5;
    opacity: 0.9;
}


/* --- PAGE-SPECIFIC STYLES: ABOUT US --- */

/* 1. BANNER SECTION */
.page-banner {
    background-image: linear-gradient(to right, #2a4746 35%, rgba(42, 71, 70, 0.7) 50%, transparent 45%), 
                      /* 📌 แก้ไขจาก 75% เป็น 85% */
                      linear-gradient(to right, transparent 85%, #f9c200 85%), 
                      url('images/about-banner-bg.png'); 
                      
    background-size: cover, cover, 110%; /* ใช้ค่าขนาดที่คุณพอใจ */
    background-position: left center, 
                         right top, /* 📌 ตำแหน่งของแถบสีเหลือง (ยังคงเดิม) */
                         center center;

    background-repeat: no-repeat; 
    height: 300px; 
    display: flex;
    align-items: center;
    position: relative;
}

/* 📌 ลบโค้ด `.page-banner::after` ออกไปได้เลย ไม่จำเป็นแล้ว */

/* 📌 เพิ่มบล็อกสีเหลืองด้วย Pseudo-element (จากคำแนะนำก่อนหน้า) */
.page-banner::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 20%; /* 📌 ปรับความกว้างให้ครอบคลุมส่วนที่เป็นสีเหลืองในดีไซน์ Figma */
    height: 100%;
    background-color: #f9c200; 
    z-index: 1; 
}

.banner-content {
    display: flex;
    /* align-items: center; <--- ต้องแน่ใจว่าบรรทัดนี้ยังอยู่ */
    align-items: center; 
    height: 100%;
    z-index: 2;
    position: relative; 
}

.banner-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: white;
    width: 33%; /* จำกัดความกว้างให้ตรงกับบล็อกสีเขียว */
    padding-right: 20px;
    line-height: 1.4;
}

/* 2. ABOUT COMPANY & VISION SECTION */
.about-content-section {
    padding: 80px 20px;
}

/* สไตล์หัวข้อใหม่ (คล้าย section-title เดิมแต่มีการปรับแต่ง) */
.section-title-alt {
    font-family: 'Montserrat', sans-serif;
    font-size: 36px;
    color: #2a3c50;
    margin-bottom: 5px;
    width: fit-content;
    padding-bottom: 10px;
    border-bottom: 4px solid #f9c200; /* ขีดเส้นสีเหลือง */
}

.section-divider {
    margin-bottom: 20px;
}

/* สไตล์ Vision Title ที่ชิดขวา */

.vision-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px; /* ระยะห่าง 20px (เท่ากับ About) */
}

.vision-title-right {
    font-family: 'Montserrat', sans-serif;
    font-size: 36px;
    color: #2a3c50;
    margin-bottom: 5px;
    width: fit-content;
    padding-bottom: 10px;
    
    /* 📌 แนะนำ: เปลี่ยนเป็นสีน้ำเงินเพื่อให้ต่างจาก About (ถ้าชอบเหลืองก็ใช้ #f9c200 ได้ค่ะ) */
    border-bottom: 4px solid #007bff; 
}

.company-details {
    /* 📌 เพิ่ม: จำกัดความกว้างให้อ่านง่าย ไม่ยาวเต็มจอเกินไป */
    max-width: 900px; 
    margin-top: 10px;
}

.company-details p {
    font-size: 18px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 20px;
}

.company-details strong {
    font-weight: 700;
    color: #2a3c50;
}

/* เส้นคั่นกลาง */
.content-separator {
    border: none;
    border-top: 1px solid #ccc;
    margin: 60px 0;
}

/* VISION SECTION LAYOUT */
.vision-section {
    padding-top: 0px;
}

.vision-texts {
    display: flex;
    flex-direction: column;
    
    /* 📌 แก้ไข: เพิ่มระยะห่างจาก 5px เป็น 20px ให้เท่ากับส่วน About */
    gap: 20px; 
    
    padding-top: 0; 
    text-align: right; 
    align-items: flex-end;
    
    /* 📌 เพิ่ม: จำกัดความกว้างและดันไปขวาสุด */
    max-width: 900px; 
    margin-left: auto; /* ดันกล่องทั้งหมดไปทางขวา */
}

.vision-texts p, 
.vision-cta, 
.vision-quote {
    font-size: 18px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 0; /* ให้ gap ของ flex จัดการระยะห่างแทน */
    
    /* 📌 แก้ไข 3: ลบ max-width และ margin-left: auto แบบแยกส่วนออก 
       เพื่อให้ข้อความเรียงตัวแนวเดียวกับหัวข้อเป๊ะๆ ไม่ขยักไปมา */
    width: 100%; 
}

.vision-cta strong {
    font-weight: 700;
    color: #2a3c50; /* เน้นด้วยสีน้ำเงิน */
}

.vision-cta {
    font-size: 22px; 
    font-weight: 500;
    color: #2a3c50; /* 📌 ปรับเป็นสีน้ำเงินเข้มให้อ่านง่ายขึ้น */
    line-height: 1.6;
    
    /* 📌 เพิ่มระยะห่างด้านล่างอีกนิด เพื่อแยกความสำคัญออกจากเนื้อหาทั่วไป */
    margin-bottom: 10px; 
}

.vision-cta strong {
    font-weight: 700;
    color: #2a3c50;
}

.vision-quote {
    font-size: 18px;
    color: #555;
}

.final-separator {
    margin-top: 80px;
}

/* --- 3. MISSION SECTION STYLES --- */
.mission-list {
    display: flex;
    flex-direction: column;
    /* 📌 ปรับแก้ 1: เพิ่มระยะห่างระหว่างข้อจาก 30px เป็น 50px เพื่อให้เนื้อหาไม่ดูแน่นเกินไป */
    gap: 50px; 
    margin-top: 40px; /* เพิ่มระยะห่างด้านบนอีกนิด */
    max-width: 900px;
}

.mission-item {
    display: flex;
    /* 📌 ปรับแก้ 2: เพิ่มระยะห่างระหว่างตัวเลขกับข้อความจาก 25px เป็น 35px */
    gap: 35px; 
    align-items: flex-start;
}

.mission-number {
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #2a3c50;
    min-width: 50px;
    
    /* 📌 ปรับแก้ 3: ปรับ line-height เป็น 1 เพื่อให้ขอบบนของตัวเลข ตรงกับขอบบนของหัวข้อพอดี */
    line-height: 1; 
    
    /* (ทางเลือก) อาจจะดันลงมาอีก 3px ถ้าฟอนต์นี้หัวมันสูง */
    margin-top: 3px; 
}

.mission-text h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #2a3c50;
    /* 📌 ปรับแก้ 4: เพิ่มระยะห่างใต้หัวข้อเล็กน้อยเป็น 15px */
    margin: 0 0 15px 0; 
}

.mission-text p {
    font-size: 18px; /* ขนาดเดียวกับเนื้อหา About */
    line-height: 1.7;
    color: #444;
    margin: 0;
}

/* --- 4. WHAT WE DO SECTION STYLES --- */
/* ใช้ class .vision-texts เดิมเป็น Container หลักเพื่อชิดขวา */

.what-we-do-item {
    display: flex;
    flex-direction: column;
    
    /* 📌 ปรับแก้ 1: เพิ่มระยะห่างระหว่างกลุ่มจาก 10px เป็น 40px หรือ 50px 
       (เพื่อให้เท่ากับ gap ของ Mission Section ที่เราเพิ่งแก้) */
    margin-bottom: 30px;
    margin-top: 20px; 
}

.what-we-do-item h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #2a3c50;
    
    /* 📌 ปรับแก้ 2: เพิ่มระยะห่างระหว่างหัวข้อกับเนื้อหาเล็กน้อย (ประมาณ 10-15px) */
    margin: 0 0 15px 0; 
}

.what-we-do-item p {
    font-size: 18px;
    line-height: 1.7;
    color: #444;
    margin: 0;
    
    /* 📌 (เสริม) ถ้าอยากให้ข้อความไม่ยาวเกินไปจนอ่านยาก ให้จำกัดความกว้างตรงนี้ด้วย */
    max-width: 850px;
    margin-left: auto;
}



/* --- PAGE-SPECIFIC STYLES: PRODUCTS --- */

/* 1. PRODUCTS BANNER */
.products-banner {
    display: flex;
    height: 350px; /* ความสูงของ Banner */
    width: 100%;
}

.banner-text-box {
    flex: 1;
    background-color: #f9c200;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 📌 เพิ่ม Padding ให้ข้อความหายใจ */
    padding: 0 80px; 
}

.banner-text-box h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 650; /* หนาพิเศษ */
    font-size: 36px; /* หรือลดเหลือ 32px ถ้าข้อความยาว */
    color: #2a3c50;
    line-height: 1.3;
    text-transform: uppercase;
    /* 📌 เพิ่มเงาข้อความจางๆ ให้ดูมีมิติ */
    text-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}

.banner-image-box {
    flex: 1.5; /* กินพื้นที่กว้างกว่าส่วนข้อความ (60%) */
    background-image: url('images/products-banner.png'); /* 📌 อย่าลืมใส่รูป */
    background-size: cover;
    background-position: center;
}

/* 2. PRODUCTS GRID LAYOUT */
.products-content {
    padding: 60px 20px 100px 20px;
}

.products-grid {
    display: grid;
    /* แบ่งเป็น 3 คอลัมน์เท่าๆ กัน */
    grid-template-columns: repeat(3, 1fr); 
    gap: 40px; /* ระยะห่างระหว่างการ์ด */
    margin-top: 40px;
    margin-bottom: 60px;
}

/* สไตล์ของการ์ดสินค้า */
.product-item-card {
    background-color: white;
    border-radius: 20px;
    padding: 15px;
    text-align: center;
    
    /* 📌 แก้ไข: เพิ่มความเข้มของเงา (จาก 0.1 เป็น 0.15 หรือ 0.2) */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15); 
    
    /* 📌 แนะนำเพิ่ม: เส้นขอบจางๆ ช่วยให้มองเห็นขอบกล่องง่ายขึ้น */
    border: 1px solid rgba(0, 0, 0, 0.05); 
    
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.product-item-card:hover {
    transform: translateY(-10px); /* ลอยขึ้นเมื่อเอาเมาส์ชี้ */
}

.card-image {
    width: 100%;
    height: 220px; /* กำหนดความสูงรูปให้เท่ากันทุกใบ */
    border-radius: 15px; /* มุมโค้งของรูปภาพ */
    overflow: hidden;
    margin-bottom: 15px;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ให้รูปเต็มพื้นที่โดยไม่เสียสัดส่วน */
}

.product-item-card h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 24px; /* เพิ่มขนาดอีกนิด */
    color: #2a3c50;
    font-weight: 650; /* หนาพิเศษ */
    margin-bottom: 20px;
    
    /* 📌 ปรับบรรทัดให้ชิดกันขึ้น */
    line-height: 1.2; 
}

/* ปุ่ม Learn More */
.btn-learn-more {
    background-color: #0f2a3f;
    color: white;
    padding: 12px 30px; /* เพิ่มความสูงปุ่มนิดนึง */
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600; /* ตัวหนาขึ้น */
    text-transform: uppercase; /* ตัวพิมพ์ใหญ่ทั้งหมดดูทันสมัย */
    letter-spacing: 1px; /* ระยะห่างตัวอักษร */
    text-decoration: none;
    transition: all 0.3s ease; /* เอฟเฟกต์นุ่มนวล */
    
    /* เพิ่มเงาให้ปุ่ม */
    box-shadow: 0 4px 15px rgba(15, 42, 63, 0.2);
}

.btn-learn-more:hover {
    background-color: #f9c200; /* 📌 เปลี่ยนเป็นสีเหลืองเมื่อชี้! */
    color: #2a3c50; /* เปลี่ยนตัวหนังสือเป็นสีเข้ม */
    transform: translateY(-2px); /* ปุ่มลอยขึ้นนิดนึง */
    box-shadow: 0 6px 20px rgba(249, 194, 0, 0.4); /* เงาสีเหลืองฟุ้งๆ */
}

/* 3. SPECIAL PRODUCT CARD (SWARM) */
.special-product-card {
    /* ...ค่าความกว้างและ margin เดิม... */
    max-width: 750px;
    margin: 60px auto 0;
    
    background-color: white;
    border-radius: 20px;
    padding: 30px;
    
    /* 📌 แก้ไข: ใช้เงาแบบเดียวกันให้เข้มขึ้น */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    
    /* 📌 มี border เดิมอยู่แล้ว (สีเหลืองจางๆ) ถ้ามองยากเปลี่ยนเป็นสีเทาจางๆ ได้ */
    /* border: 1px solid rgba(249, 194, 0, 0.3); <--- อันเดิม */
    border: 1px solid rgba(0, 0, 0, 0.08); /* <--- ลองเปลี่ยนเป็นสีเทาถ้าต้องการความชัด */
    
    display: flex;
    align-items: center;
    gap: 30px;
}

.special-image {
    /* 📌 4. ขยายรูปขึ้นอีกนิด (จาก 250px เป็น 280px) ให้ดูเต็มกล่องที่เล็กลง */
    width: 280px; 
    height: 280px; /* ปรับความสูงให้เป็นสี่เหลี่ยมจัตุรัส หรือตามสัดส่วนรูป */
    
    border-radius: 15px;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.special-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.special-content {
    flex-grow: 1;
    text-align: center;
}

.special-content h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    color: #2a4746;
    font-weight: 700;
    margin-bottom: 20px;
}


/* --- PAGE-SPECIFIC: SINGLE PRODUCT DETAIL --- */

.product-detail-section {
    padding: 60px 20px 100px 20px;
}

/* 1. HERO SECTION */
.product-hero {
    display: flex;
    gap: 60px;
    align-items: center; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
    margin-bottom: 60px;
}

/* --- Image Decoration Styling (ส่วนตกแต่งรูปภาพ) --- */
.product-visual-wrapper {
    position: relative;
    flex: 1;
    /* 📌 ลบ Padding ออก เพื่อให้รูปขยายเต็มกล่อง */
    padding: 0; 
    background-color: transparent; /* ไม่ต้องมีพื้นหลังขาว */
    border-radius: 20px;
    /* เงาที่นุ่มขึ้น */
    box-shadow: 0 20px 50px rgba(0,0,0,0.15); 
    overflow: hidden; /* เพื่อตัดขอบรูปให้โค้งตาม */
}

/* แถบสีเหลืองด้านบน */
.visual-decoration-top {
    position: absolute;
    top: 0;
    left: 0px; /* ขยับจากซ้ายมาหน่อย */
    width: 200px;
    height: 10px;
    background-color: #f9c200;
    z-index: 2;
}

/* แถบสีเขียวด้านขวา พร้อมตัวหนังสือแนวตั้ง */
.visual-decoration-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px; /* ความกว้างแถบเขียว */
    height: 100%;
    background-color: #2a4746;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    
    /* ทำให้ตัวหนังสือเป็นแนวตั้ง */
    writing-mode: vertical-rl; 
    transform: rotate(180deg); /* หมุนให้หัวตัวอักษรหันถูกทาง */
}

.main-product-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
}

/* --- Text Info Styling --- */
.product-info {
    flex: 1.2;
}

.product-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 36px;
    color: #2a3c50;
    font-weight: 700;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 4px solid #f9c200;
    display: inline-block;
}

.product-series {
    font-size: 20px;
    color: #666;
    margin-bottom: 10px;
    font-weight: 500;
}

.product-series span {
    color: #2a4746; /* สีเขียวเข้ม */
    font-weight: 700;
}

.product-tagline {
    font-size: 18px;
    font-style: italic;
    color: #444;
    margin-bottom: 20px;
}

.product-description {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 30px;
}

.product-highlight-box {
    background-color: #f8f9fa;
    border-left: 5px solid #dc3545; /* สีแดงสื่อถึง Emergency/Fire */
    padding: 15px 20px;
    margin-bottom: 25px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #2a3c50;
    font-style: italic;
    border-radius: 0 10px 10px 0; /* โค้งเฉพาะด้านขวา */
}

.btn-contact-product {
    display: inline-block;
    background-color: #2a3c50;
    color: white;
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}
.btn-contact-product:hover {
    background-color: #f9c200;
    color: #2a3c50;
}


/* 2. STATS SECTION */
.product-stats-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 70px;
    margin-bottom: 60px;
    
    /* 📌 เพิ่มพื้นหลังและ Padding */
    background-color: #f8f9fa; /* สีเทาอ่อนมาก */
    padding: 40px;
    border-radius: 15px;
    border: 1px solid #eee; /* เส้นขอบจางๆ */
}

.stat-item {
    text-align: center;
}

.stat-model {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #2a3c50;
    margin-bottom: 5px;
}

.stat-value {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: 48px; /* ตัวเลขใหญ่ๆ */
    font-weight: 800;
    color: #2a3c50;
    line-height: 1;
}

.stat-label {
    display: block;
    font-size: 14px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.stat-divider {
    width: 2px;
    height: 80px;
    background-color: #ccc; /* เส้นคั่นบางๆ */
}


/* 3. FEATURES CARDS */
.product-features-grid {
    display: flex;
    gap: 40px;
    align-items: stretch; /* 📌 สำคัญ: ให้การ์ดสูงเท่ากัน */
}

.feature-card {
    flex: 1;
    background-color: white;
    border-radius: 15px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    
    /* 📌 เพิ่มลูกเล่น: เส้นสีด้านบน */
    border-top: 5px solid #f9c200; /* สีเหลืองแบรนด์ */
    transition: transform 0.3s;
}

.feature-card h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #2a3c50;
    margin-bottom: 20px;
    text-align: center;
}

.feature-card ul {
    list-style: none;
    padding: 0;
}

.feature-card li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 16px;
    line-height: 1.6;
    color: #555;
}

/* สร้างจุด Bullet point เองให้สวยงาม */
.feature-card li::before {
    content: "•";
    color: #2a3c50;
    font-size: 24px;
    position: absolute;
    left: 0;
    top: -5px;
}

.feature-card strong {
    color: #2a3c50;
    font-weight: 700;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}


/* --- PAGE-SPECIFIC: CONTACT US --- */

/* ปรับ Banner ของหน้า Contact เล็กน้อย */
.contact-page-banner {
    /* ใช้รูปเดียวกับ About หรือเปลี่ยนรูปใหม่ก็ได้ */
    background-image: linear-gradient(to right, #2a4746 50%, rgba(42, 71, 70, 0.6) 70%, transparent), 
                      url('images/about-banner-bg.png'); 
    background-size: cover;
    background-position: center;
}

.contact-section {
    padding: 80px 20px;
}

.contact-container {
    display: flex;
    gap: 60px;
    align-items: flex-start; /* ให้เริ่มจากด้านบน */
}

/* --- Contact Info (Left) --- */
.contact-info-box {
    flex: 1;
}

.contact-desc {
    font-size: 18px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 40px;
}

.info-items {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.c-item {
    display: flex;
    align-items: center;
    gap: 20px;
}

.icon-box {
    width: 60px;
    height: 60px;
    background-color: #f9c200; /* สีเหลืองแบรนด์ */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #2a3c50;
    box-shadow: 0 5px 15px rgba(249, 194, 0, 0.3);
}

.c-text h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: #2a3c50;
    margin: 0 0 5px 0;
}

.c-text p {
    font-size: 16px;
    color: #555;
    margin: 0;
}

/* --- Contact Form (Right) --- */
.contact-form-box {
    flex: 1.2; /* ให้ฟอร์มกว้างกว่านิดหน่อย */
    background-color: white;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08); /* เงานุ่มๆ */
    border: 1px solid #eee;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    color: #2a3c50;
    margin-bottom: 8px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    font-family: Arial, sans-serif;
    transition: 0.3s;
    box-sizing: border-box; /* สำคัญ: ไม่ให้ padding ดันกล่องขยาย */
}

/* เมื่อคลิกพิมพ์ ให้ขอบเปลี่ยนเป็นสีธีม */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #2a4746;
    outline: none;
    box-shadow: 0 0 5px rgba(42, 71, 70, 0.2);
}

.btn-submit {
    background-color: #2a3c50; /* สีน้ำเงินเข้ม */
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: 0.3s;
}

.btn-submit:hover {
    background-color: #f9c200; /* เปลี่ยนเป็นสีเหลืองเมื่อชี้ */
    color: #2a3c50;
}

/* --- Map Section --- */
.map-section {
    margin-top: 0;
    line-height: 0; /* แก้บั๊กขอบขาวใต้ iframe */
}

@media screen and (max-width: 768px) {

    /* --- 1. GLOBAL LAYOUT --- */
    .container {
        width: 100%;
        padding: 0 20px; /* ลดขอบข้างให้เหลือพื้นที่เนื้อหามากขึ้น */
        box-sizing: border-box;
    }
    
    h1 { font-size: 28px !important; }
    h2 { font-size: 24px !important; }
    p { font-size: 16px !important; }

    /* --- 2. NAVBAR --- */
    .navbar-container {
        flex-direction: column; /* เรียงโลโก้กับเมนูลงมาแนวตั้ง */
        gap: 15px;
        padding: 15px;
    }
    
    .main-nav ul {
        flex-wrap: wrap;
        justify-content: center; /* จัดเมนูให้อยู่ตรงกลาง */
        gap: 15px;
        font-size: 14px;
    }

    /* --- 3. HOME HERO SECTION --- */
    .hero-section {
        height: auto; /* ยกเลิกความสูงตายตัว */
        padding: 60px 0; /* เพิ่มระยะบนล่าง */
        background-position: center;
    }
    
    .overlay-box {
        width: 90%; /* ให้กล่องข้อความกว้างเกือบเต็มจอ */
        padding: 30px 20px;
        margin: 0 auto; /* จัดกึ่งกลาง */
    }
    
    .hero-content h1 { font-size: 32px; }

    /* --- 4. SECTIONS WITH FLEXBOX (About, Products, Contact) --- */
    /* สั่งให้ทุกอย่างที่เคยเรียงซ้าย-ขวา เปลี่ยนมาเรียงบน-ล่าง */
    .about-flex, 
    .product-hero, 
    .product-stats-row, 
    .contact-container,
    .products-banner {
        flex-direction: column;
        height: auto; /* ยกเลิกความสูง fix */
    }

    /* --- 5. PRODUCT LISTING (GRID) --- */
    /* เปลี่ยนตาราง 3 ช่อง ให้เหลือ 1 ช่องเรียงลงมา */
    .products-grid, 
    .product-cards-container, 
    .product-features-grid, 
    .features-grid,
    .vision-texts {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .product-item-card {
        width: 100%; /* การ์ดกว้างเต็มจอ */
        box-sizing: border-box;
    }

    /* --- 6. PRODUCT DETAIL PAGE --- */
    .product-visual-wrapper {
        width: 100%;
        padding: 0;
        margin-bottom: 30px;
    }
    
    /* ซ่อนแถบตกแต่งบางอันในมือถือเพื่อไม่ให้เกะกะ */
    .visual-decoration-right { display: none; }
    
    .product-info {
        padding: 0 10px;
    }

    .stat-divider {
        display: none; /* ซ่อนเส้นคั่นแนวตั้ง */
    }
    
    .product-stats-row {
        gap: 40px; /* ลดระยะห่าง */
        padding: 20px;
    }

    /* --- 7. BANNERS & HEADERS --- */
    .page-banner {
        height: 200px; /* ลดความสูงแบนเนอร์ */
        background-position: center !important; /* จัดรูปกลาง */
    }
    
    .banner-text {
        width: 90%; /* ขยายข้อความให้กว้างขึ้น */
        font-size: 20px;
        text-align: center; /* จัดกลาง */
    }
    
    .banner-text-box, .banner-image-box {
        width: 100%; /* สำหรับหน้า Products Banner */
        padding: 30px 20px;
    }

    /* --- 8. SPECIAL PRODUCT & CONTACT --- */
    .special-product-card {
        flex-direction: column;
        padding: 30px 20px;
    }
    
    .special-image {
        width: 100%;
        height: auto;
    }

    .contact-form-box, .contact-info-box {
        width: 100%;
        box-sizing: border-box;
    }
    
    .vision-texts {
        text-align: left; /* ในมือถือจัดซ้ายอ่านง่ายกว่า */
        align-items: flex-start;
    }
    
    .vision-header {
        justify-content: flex-start;
    }

    /* --- 9. FOOTER FIX (เพิ่มต่อท้ายใน Media Query) --- */
    .footer-grid {
        /* เปลี่ยนจาก 2 คอลัมน์ เป็น 1 คอลัมน์เต็ม */
        grid-template-columns: 1fr; 
        gap: 40px; /* ระยะห่างระหว่างข้อมูลติดต่อกับข้อความพันธกิจ */
        text-align: center; /* จัดตัวหนังสือให้อยู่กึ่งกลาง */
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .footer-contact {
        align-items: center; /* จัดไอคอนและข้อความให้อยู่กึ่งกลาง */
    }
    
    .contact-item {
        justify-content: center; /* จัดเนื้อหาในแต่ละบรรทัดให้อยู่กลาง */
        width: 100%;
    }
    
    .footer-mission {
        padding: 0 10px; /* เพิ่มระยะขอบซ้ายขวานิดหน่อยไม่ให้ตัวหนังสือติดขอบจอเกินไป */
    }
    
    .mission-title {
        font-size: 20px; /* ลดขนาดหัวข้อลงเล็กน้อย */
    }
    
    .mission-text {
        font-size: 16px; /* ลดขนาดเนื้อหาลงเล็กน้อย */
    }

    /* --- 10. ABOUT PAGE BANNER FIX (วางใน Media Query ต่อจาก Footer) --- */
    
    /* ปรับระยะห่างของคอนเทนเนอร์หลักในแบนเนอร์ */
    .about-flex {
        /* เพิ่มระยะห่างระหว่างกล่อง Mission กับ Vision เมื่อเรียงแนวตั้ง */
        gap: 30px; 
        /* เพิ่มระยะขอบบนล่างและซ้ายขวาของแบนเนอร์ทั้งหมด */
        padding: 40px 20px !important; 
        /* ยกเลิกความสูงตายตัว เพื่อให้ขยายตามเนื้อหา */
        height: auto !important;
        /* จัดให้กล่องอยู่กึ่งกลางจอ */
        align-items: center;
    }

    /* ปรับแต่งตัวกล่องสีขาวแต่ละกล่อง */
    .about-box {
        /* กำหนดความกว้างให้เกือบเต็มจอ แต่มีขอบเหลือบ้าง */
        width: 90% !important; 
        /* เพิ่มพื้นที่ว่างภายในกล่องไม่ให้ตัวหนังสือเบียดขอบ */
        padding: 40px 30px !important; 
        /* ยกเลิกความสูงตายตัว */
        height: auto !important; 
        /* จัดตัวหนังสือทั้งหมดในกล่องให้อยู่กึ่งกลาง */
        text-align: center;
        /* เพิ่มเงาเล็กน้อยให้ดูมีมิติขึ้นในมือถือ (Optional) */
        box-shadow: 0 5px 15px rgba(0,0,0,0.1); 
    }

    /* ปรับหัวข้อ MISSION/VISION ในมือถือ */
    .about-box h2 {
        font-size: 24px !important; /* ลดขนาดฟอนต์ลงนิดหน่อย */
        margin-bottom: 20px; /* เพิ่มระยะห่างใต้หัวข้อ */
        margin-top: 0; /* ลบระยะขอบบนที่อาจติดมา */
    }
    
    /* ปรับเนื้อหา text ในกล่อง */
    .about-box p {
        font-size: 16px !important;
        line-height: 1.6;
    }

    /* --- 11. ABOUT PAGE BANNER FIX (Unified Style: Transparent Box) --- */
    
    .page-banner {
        /* 1. ตั้งค่ารูปพื้นหลังให้เต็มพื้นที่ */
        display: flex !important;
        justify-content: center;
        align-items: center;
        
        width: 100% !important;
        min-height: 350px; /* ความสูง */
        padding: 40px 20px !important;
        box-sizing: border-box;

        /* --- พื้นหลังรูปโดรน (ไม่มี Gradient สีเขียวบังแล้ว) --- */
        background-image: url('images/about-banner-bg-phone.png') !important;
        background-size: cover !important;
        background-position: center center !important;
        
        /* ลบพื้นหลังสีเขียวทึบออก */
        background-color: transparent !important;
    }
    
    /* ซ่อนแถบตกแต่งอื่นๆ */
    .page-banner::after { display: none !important; }

    /* 2. สร้างกล่องข้อความโปร่งแสง (เหมือนหน้า Products) */
    .banner-content {
        width: 90% !important;
        max-width: 450px !important;
        margin: 0 auto !important;
        
        /* พื้นหลังสีเขียวเข้มโปร่งแสง (ตามธีมหน้า About) */
        background-color: rgba(42, 71, 70, 0.85) !important; 
        backdrop-filter: blur(4px);
        
        padding: 30px 20px !important;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        border: 1px solid rgba(255, 255, 255, 0.15);
        
        /* จัดกึ่งกลาง */
        display: flex !important;
        justify-content: center;
        align-items: center;
    }

    /* 3. ปรับข้อความให้สวยงาม */
    .banner-text {
        width: 100% !important;
        font-size: 22px !important; /* ลดขนาดลงนิดนึงให้พอดีกล่อง */
        line-height: 1.5;
        text-align: center;
        color: #ffffff !important;
        text-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* --- 12. PRODUCTS PAGE BANNER FIX (FINAL VERSION) --- */
    
    /* 1. ปรับคอนเทนเนอร์หลัก ให้เป็นพื้นหลังรูปโดรน */
    .products-banner {
        display: flex !important;
        justify-content: center; /* จัดกึ่งกลางแนวนอน */
        align-items: center; /* จัดกึ่งกลางแนวตั้ง */
        flex-direction: column !important;
        
        width: 100% !important;
        height: 200px !important; /* กำหนดความสูงให้พอเหมาะ */
        padding: 20px !important;
        box-sizing: border-box; /* ป้องกัน padding ดันจนล้นจอ */

        /* --- ใส่รูปภาพพื้นหลังตรงนี้ --- */
        /* ⚠️ เช็คชื่อไฟล์ให้ตรงกับในโฟลเดอร์ images ของคุณนะครับ (เช่น .jpg หรือ .png) */
        background-image: url('images/products-banner.png') !important; 
        background-size: cover !important;
        background-position: center center !important;
    }

    /* 2. ซ่อนกล่องรูปภาพเดิมทิ้งไป (เพราะเราเอารูปไปทำพื้นหลังแล้ว) */
    .banner-image-box {
        display: none !important;
    }

    /* 3. ปรับกล่องข้อความให้เป็น "สีเหลืองโปร่งแสง" */
    .banner-text-box {
        width: 90% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
        flex: unset !important;
        
        /* --- แก้ไขบรรทัดนี้ครับ --- */
        /* เปลี่ยนจากสีทึบ #f9c200 เป็นแบบ RGBA */
        /* ตัวเลขสุดท้าย (0.75) คือความทึบแสง 75% (ยิ่งน้อยยิ่งจาง) */
        background-color: rgba(249, 194, 0, 0.55) !important; 
        
        /* (แถม) เพิ่มเอฟเฟกต์เบลอฉากหลังเล็กน้อย จะทำให้ดูเนียนตาขึ้น */
        backdrop-filter: blur(2px); 

        padding: 30px 20px !important;
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        border: none;
    }

    /* ปรับสีข้อความให้เป็นสีขาว เพื่อให้อ่านง่ายบนพื้นหลังเข้ม */
    .banner-text-box h1 {
        color: #ffffff !important;
        font-size: 24px !important; /* ลดขนาดฟอนต์ให้พอดีมือถือ */
        line-height: 1.4;
        margin-bottom: 0;
        text-shadow: none !important;
    }
}