  <style>
    /* --- บังคับจัดโครงสร้างหลักของหน้าเว็บให้อยู่ตรงกลาง --- */
html, body {
    width: 100% !important;                      
    margin: 0 !important;
    padding: 0 !important;                         
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* จัดทุกอย่างในหน้าเว็บให้อยู่ตรงกลาง         */
    justify-content: flex-start !important;
    overflow-x: hidden; /* ป้องกันหน้าเว็บเลื่อนซ้าย-ขวาบนมือถือ */
}

/* --- คุมกรอบใหญ่ของสินค้า (product-grid) ให้บาลานซ์ --- */
.product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* แบ่ง 2 คอลัมน์เท่ากันเป๊ะ */
    gap: 8px !important; /* ระยะห่างระหว่างกล่อง */
    width: 100% !important;
    max-width: 100% !important; /* ให้ขยายเต็มหน้าจอ */
    margin: 0 auto !important; /* ดึงกล่อง Grid ให้อยู่ตรงกลางจอ */
    padding: 0 8px !important; /* เว้นขอบซ้ายและขวาให้เท่ากันอย่างละ 8px */
    box-sizing: border-box !important;
}

/* --- ตัวการ์ดสินค้าชิ้นที่ 2 (.map-card) --- */
.product-grid .map-card {
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    height: max-content !important; /* หดความสูงให้พอดีกับภาพแนวนอน */
    width: 100% !important;
    margin: 0 !important; /* ล้าง margin เก่าที่อาจจะดันกล่อง */
    box-sizing: border-box !important;
}

/* --- จัดรูปภาพให้เต็มและกึ่งกลาง --- */
.product-grid .map-image {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    line-height: 0 !important;
}

.product-grid .map-image img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* --- ส่วนข้อมูลและปุ่มกด --- */
.product-grid .map-info {
    padding: 8px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.product-grid .map-info h3 {
    margin: 0 0 4px 0 !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
}

.product-grid .map-info p {
    margin: 0 0 6px 0 !important;
    font-size: 11px !important;
    color: #666 !important;
}

.product-grid .map-footer,
.product-grid .map-footer form,
.product-grid .btn-buy {
    width: 100% !important;
    margin: 0 !important;
}
  /* นำชื่อ class wrapper ตัวใหม่ของคุณมาใส่แทนที่ .your-wrapper-class นะครับ */
.wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;    /* บังคับจัดกึ่งกลางแนวตั้ง */
    justify-content: center !important;  /* บังคับจัดกึ่งกลางแนวนอน */
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;             /* เคลียร์ float ซ้ายขวาที่อาจหลุดมาจากด้านบน */
    float: none !important;             /* ป้องกันตัวมันเองเอียงซ้ายขวา */
    margin: 0 auto !important;          /* ดันกล่องให้อยู่ตรงกลางหน้าจอคอมและมือถือ */
    box-sizing: border-box !important;
}

/* และคุมตัวกรอบสินค้าด้านในให้ขยายเต็มบาลานซ์ */
.product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* แบ่ง 2 คอลัมน์เท่ากันเป๊ะ */
    gap: 10px !important;
    width: 100% !important;
    padding: 0 10px !important; /* เว้นขอบซ้ายขวาบนมือถือให้เท่ากัน */
    box-sizing: border-box !important;
}      :root {
            --primary: #1e3a8a;
            --primary-light: #3b82f6;
            --text-dark: #1f2937;
            --text-light: #4b5563;
            --bg-light: #f8fafc;
        }

        body {
            margin: 0;
            font-family: 'Helvetica Neue', Arial, sans-serif;
            background: var(--bg-light);
            color: var(--text-dark);
            line-height: 1.6;
        }

        /* HERO SECTION */
        header {
            position: relative;
            height: 250px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: white;
            text-align: center;
            padding: 0 10px;
        }

        header h1 {
            font-size: 3rem;
            margin-bottom: 10px;
            font-weight: 600;
            letter-spacing: -0.05em;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);}
            
/* สำหรับหน้าจอมือถือ (ขนาดหน้าจอไม่เกิน 768px) */
/* สำหรับหน้าจอมือถือ (ขนาดหน้าจอไม่เกิน 768px) */
@media (max-width: 768px) {
    .product-row {
        gap: 10px; /* ลดระยะห่างบนมือถือเหลือ 10px เพื่อประหยัดพื้นที่ */
    }
}@media (max-width: 768px) {
  header, .hero-header {
    height:80px  !important; /* ปลดล็อกความสูงแบบตายตัว */
    min-height: 0 !important; /* ยกเลิก min-height เดิมเพื่อให้บีบเป็นแถบได้ */
    padding: 8px 8px !important; /* ลด Padding บน-ล่าง ให้เหลือเป็นแถบแคบๆ */
    
    /* ⚡️ จัดการภาพแบคกราวนด์ให้พอดีและนวลตา ⚡️ */
    background-size: cover !important; /* ให้ภาพคลุมพอดีแถบ */
    background-position: center !important;
    background-attachment: scroll !important; 
  }

  header h1, .hero-content h1 {
    font-size: 1.3rem !important; /* ลดขนาดตัวอักษรลงเพื่อให้เหมาะกับความเป็นแถบ */
    margin-top: 0px !important; 
    margin-bottom: 2px !important; /* ชิดกระชับ */
    display: inline-block; /* (Optional) หากต้องการให้แสดงผลเป็นบรรทัดเดียวกัน */
  }



  header p, .hero-content p {
    font-size: 1rem !important; /* ปรับขนาดข้อความอธิบายให้เล็กลง อ่านง่ายขึ้น */
    margin-bottom: 1px !important;
  }
}

        /* SEARCH BOX */
        .search-container {
            width: 100%;
            max-width: 550px;
            position: relative;
        }

        .search-container input {
            width: 100%;
            padding: 10px 25px;
            font-size: 1rem;
            border-radius: 50px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.95);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
            box-sizing: border-box;
            outline: none;
            transition: all 0.3s ease;
        }

        .search-container input:focus {
            background: #ffffff;
            box-shadow: 0 10px 20px rgba(59, 130, 246, 0.25);
        }

        /* MAIN CONTENT */
        .container {
            max-width: 1200px;
            margin:10px auto;
            padding: 0 20px;
        }

        .section-title {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 20px;
            font-weight: 700;
            color: var(--primary);
        }

        /* MAP GRID */
        .map-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 10px;
        }

        .map-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .map-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }

        .map-image {
            height: 220px;
            background: #e2e8f0;
            overflow: hidden;
        }

        .map-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

/* 1. ดันกล่องข้อความทั้งหมดให้ชิดรูปภาพด้านบนมากขึ้น */
.map-info {
    padding-top: 5px;   /* ปรับลด padding ด้านบน (เดิมอาจจะเยอะกว่านี้) */
    margin-top: 0px;    /* กำหนด margin ด้านบนให้เป็น 0 */
}

/* 2. ลดระยะห่างระหว่างหัวข้อ (h3) กับย่อความ (p) และลดระยะบรรทัด */
.map-info h3 {
    margin-top: 0;      /* เอา margin บนของ h3 ออกเพื่อความชิด */
    margin-bottom: 4px; /* ปรับระยะห่างระหว่าง h3 กับ p ด้านล่าง */
    line-height: 1.2;   /* ลดระยะห่างระหว่างบรรทัดของหัวข้อ */
}

.map-info p {
    margin-top: 0;      /* เอา margin บนของ p ออก */
    margin-bottom: 8px; /* ระยะห่างก่อนถึงปุ่มกด */
    line-height: 1.3;   /* ปรับระยะห่างระหว่างบรรทัดของข้อความอธิบาย */
}

        .map-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .price {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--primary-light);
        }

        .btn-buy {
            background: var(--primary);
            color: white;
            padding: 8px 18px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 500;
            font-size: 0.9rem;
            transition: background 0.2s ease;
        }

        .btn-buy:hover {
            background: var(--primary-light);
        }

        /* FOOTER */
        footer {
            background: #0f172a;
            color: #94a3b8;
            text-align: center;
            padding: 40px 20px;
            margin-top: 100px;
            font-size: 0.9rem;
        }
        .hero-header {
  /* กำหนดความสูงของ Header */
  min-height: 20vh; 
  
  /* ใส่ภาพพื้นหลัง พร้อมซ้อน Overlay ผสมสีดำจางๆ ช่วยให้ภาพดูนวลและอ่านตัวหนังสือชัดขึ้น */
  background: linear-gradient(
      135deg, 
      rgba(30, 41, 59, 0.8), /* สีเข้มด้านซ้าย-บน (ปรับเฉดสีตามธีมเว็บได้) */
      rgba(15, 23, 42, 0.6)  /* สีเข้มด้านขวา-ล่าง */
    ), 
    url('images/th3D-2.jpg') no-repeat center center;
  
  /* จัดการขนาดภาพให้เต็มพื้นที่และสมูท */
  background-size: cover;
  background-attachment: fixed; /* (Optional) เอฟเฟกต์ Parallax ให้ภาพเลื่อนช้าลงตอนสกรอลล์ เพิ่มความสมูท */
  
  /* จัดตำแหน่งคอนเทนต์ด้านในให้อยู่กึ่งกลาง */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  color: #ffffff;
}

/* เพิ่มแอนิเมชันตอนโหลดหน้าเว็บให้ตัวหนังสือลอยขึ้นมาแบบนุ่มๆ (Fade-in & Slide-up) */
.hero-content {
  animation: fadeInSmooth 1.2s ease-out forwards;
}

@keyframes fadeInSmooth {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* จัดเรียงแบบ 2 คอลัมน์ ซ้าย-ขวา ทั้งคอมและมือถือ */
.product-row {
    display: flex;
    gap: 20px; /* ระยะห่างระหว่างการ์ดซ้ายและขวา */
    width: 100%;
}

/* กำหนดให้การ์ดแต่ละใบแบ่งพื้นที่คนละ 50% เท่ากัน */
.product-row .map-card {
    flex: 1; 
    display: flex;
    flex-direction: column;
}
  
  /* คุมกรอบใหญ่ ให้แบ่งเป็น 2 คอลัมน์เท่ากันเสมอ */
/* --- โครงสร้างหลัก (Desktop & ทั่วไป) --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* บังคับ 2 คอลัมน์เสมอ */
    gap: 15px; /* ระยะห่างระหว่างการ์ด */
    width: 100%;
    max-width: 1200px; /* ขนาดกว้างสุดบนคอม */
    margin: 0 auto;
    padding: 0 10px; /* กันชนขอบจอเล็กน้อย */
    box-sizing: border-box;
}

.map-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.map-footer {
    display: flex;
    flex-direction: column; /* จัดราคาและปุ่มให้อยู่คนละบรรทัดแนวดิ่งเพื่อประหยัดพื้นที่ซ้ายขวา */
    gap: 8px;
    margin-top: auto;
}

/* สไตล์ปุ่มดูรายละเอียด */
.btn-buy {
    width: 100%;
    padding: 8px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}

/* สไตล์ราคา */
.price del { color: #888; font-size: 0.9em; }
.price .discount { color: #ff0000; font-weight: bold; }


/* --- ปรับแต่งพิเศษสำหรับหน้าจอมือถือ (Mobile Responsive) --- */
@media (max-width: 768px) {
/* คุมกรอบใหญ่ของสินค้า */
/* คุมกรอบใหญ่ของสินค้า */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* แบ่ง 2 คอลัมน์ซ้ายขวา */
    gap: 10px; /* ระยะห่างระหว่างกล่องสินค้า */
    align-items: start; /* ล็อกความสูงให้หดสั้นตามเนื้อหาแต่ละกล่อง */
    width: 100%;
    padding: 0 8px; /* เว้นระยะจากขอบหน้าจอมือถือเล็กน้อยให้สมดุล */
    box-sizing: border-box;
}

/* ตัวการ์ดแต่ละใบ */
.product-grid .map-card {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center; /* 💡 จัดเนื้อหาภายในการ์ดให้อยู่ตรงกลางทั้งหมด */
    text-align: center;  /* 💡 จัดตัวอักษรให้อยู่กึ่งกลาง */
    height: max-content;
    box-sizing: border-box;
}

/* ส่วนกล่องใส่รูปภาพ */
.product-grid .map-image {
    width: 100%;
    display: flex;
    justify-content: center; /* 💡 จัดวางรูปภาพให้อยู่ตรงกลางกล่อง */
    line-height: 0;
}

.product-grid .map-image img {
    width: 100%;       /* ขยายภาพให้เต็มความกว้างของการ์ด */
    max-width: 100%;
    height: auto;
    display: block;
}

/* ส่วนข้อมูลที่อยู่ใต้ภาพ (ปรับให้อยู่ตรงกลาง) */
.product-grid .map-info {
    padding: 10px 6px; 
    display: flex;
    flex-direction: column;
    align-items: center; /* 💡 บังคับให้ Form และ Element ข้างในอยู่ตรงกลาง */
    justify-content: center;
    gap: 4px;
    width: 100%;
    box-sizing: border-box;
}

/* ปรับฟอนต์หัวข้อและรายละเอียด */
.product-grid .map-info h3 {
    margin: 0;
    font-size: 13px;
    line-height: 1.3;
    word-break: break-word; /* ป้องกันตัวอักษรล้น */
}

.product-grid .map-info p {
    margin: 2px 0 6px 0;
    font-size: 11px;
    color: #666;
    word-break: break-word;
}

/* ฟุตเตอร์ปุ่มกด */
.product-grid .map-footer {
    width: 100%; /* ให้ความกว้างเต็มพื้นที่เพื่อกดง่าย */
    margin-top: 4px;
    display: flex;
    justify-content: center;
}

.product-grid .map-footer form {
    width: 100%; /* ดันฟอร์มให้เต็มสัดส่วน */
    margin: 0;
}

.product-grid .btn-buy {
    width: 100%;
    padding: 6px;
    font-size: 12px;
}
}
/* สไตล์ของการ์ดแต่ละใบ */
.map-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column; /* จัดเนื้อหาข้างในจากบนลงล่าง */
    justify-content: space-between;
}

.map-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* 1. ดันกล่องข้อความทั้งหมดให้ชิดรูปภาพด้านบนมากขึ้น */
.map-footer {
    margin-top: auto; /* ดันราคาและปุ่มให้อยู่ล่างสุดของการ์ดเสมอ */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
    /* ตัวควบคุมสไตล์แถบโฆษณา */
    .fixed-top-ad-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px; /* ปรับความสูงตามความเหมาะสม (ประมาณครึ่งหนึ่งของ Header มาตรฐาน) */
        background-color: #fff;
        box-shadow: 0 2px 10px rgba(0,0,0,0.15);
        z-index: 9999; /* ให้อยู่ชั้นบนสุดเสมอ */
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .fixed-top-ad-bar img {
        height: 100%;
        width: auto;
        max-width: 100%;
        object-fit: cover;
        display: block;
    }

    /* ขยับเนื้อหาของเว็บ (Body) ลงมา เพื่อไม่ให้โฆษณาบังตัวเว็บ */
    body {
        padding-top: 60px; /* ต้องเท่ากับความสูง (height) ของ fixed-top-ad-bar */
    }
</style>