/* --- Root & Layout --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Kanit', sans-serif;
    background-color: #001233;
    color: white;
    background-image: radial-gradient(circle at 80% 20%, #0044cc 0%, #001233 60%);
    background-attachment: fixed;
}

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

.yellow {
    color: #ffcc00;
}

.section-title,
.section-title1,
.section-title2,
.section-title3,
.section-title4{
    color: #ffcc00;
    font-size: 22px;
    margin: 20px 0 15px;
    font-weight: 600;
}


/* --- Navbar (พร้อมเส้นกั้นที่คุณทิวต้องการ) --- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: 30px;
}

.logo-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-box {
    background: #0066ff;
    color: white;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    border-radius: 8px;
}

.brand {
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
}

.sub-brand {
    font-size: 16px;
    opacity: 0.8;
}

.nav-links a {
    color: white;
    text-decoration: none;
    margin-right: 20px;
    font-size: 18px;
    font-weight: 300;
}

.btn-tel {
    background: #0055ff;
    padding: 8px 20px;
    border-radius: 50px;
    color: white;
    text-decoration: none;
    font-size: 14px;
}

.btn-line {
    background: #00c300;
    padding: 8px 20px;
    border-radius: 50px;
    color: white;
    text-decoration: none;
    font-size: 14px;
}

/* --- Hero Section & เพิ่มเมนู Features (วงสีแดง) --- */
/*.hero { display: flex; align-items: center; padding: 40px 0; flex-wrap: wrap; }*/
/* บรรทัดที่ 28 ใน style.css */
.hero {
    display: flex;
    align-items: center;

    /* --- ไม้ตายบีบระยะบน-ล่าง --- */
    padding-top: 0 !important;
    /* บีบระยะบนให้ชิดสุด */
    padding-bottom: 0 !important;
    /* บีบระยะล่างให้ชิดสุด */
    margin-top: -130px !important;
    /* ดึงเนื้อหาทั้งหมดขึ้นไปทับช่องว่างด้านบน */
    margin-bottom: -110px !important;
    /* ดึงส่วนล่างให้กระชับขึ้น */

    min-height: auto !important;
    /* ป้องกันไม่ให้กล่องล็อคความสูงไว้สูงเกินไป */
    flex-wrap: wrap;
}

.hero-content {
    flex: 1;
    min-width: 320px;
}

.badge-green {
    background: #00c300;
    display: inline-block;
    padding: 5px 20px;
    border-radius: 50px;
    font-size: 13px;
    margin-bottom: 20px;
}

.title {
    font-size: 42px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 15px;
}

.description {
    opacity: 0.8;
    max-width: 480px;
    margin-bottom: 35px;
    font-weight: 300;
}

.hero-btns {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
}

.btn-blue-main,
.btn-line-main {
    padding: 14px 30px;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    border: none;
    cursor: pointer;
}

.btn-blue-main {
    background: #0066ff;
    color: white;
}

.btn-line-main {
    background: #00c300;
    color: white;
}

/* แถบเมนู 4 รายการ (วงสีแดง) */
/*.hero-features { display: flex; flex-wrap: wrap; gap: 20px; }
/* บรรทัดที่ 39 */
.hero-features {
    display: flex;
    flex-direction: row;
    /* บังคับให้เรียงเป็นแถวแนวนอน */
    flex-wrap: nowrap;
    /* ป้องกันไม่ให้ไอคอนตกบรรทัด */
    gap: 25px;
    /* ระยะห่างระหว่างไอคอนแต่ละตัว */
    margin-top: 20px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 300;
    opacity: 0.9;
}

.feature-item i {
    background: rgba(0, 102, 255, 0.2);
    color: #f4f6fa;
    width: 55px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 12px;
}

/*.hero-image { flex: 1; min-width: 750px; text-align: right; }*/
/* บรรทัดที่ 43 - ปรับกล่องหุ้มรูปภาพ */
.hero-image {
    flex: 1.5;
    /* ให้พื้นที่ฝั่งขวามากกว่าฝั่งซ้ายนิดหน่อย */
    min-width: 320px;
    text-align: right;

    /* --- หัวใจสำคัญ: ใช้ค่าติดลบเพื่อดึงกล่องรูปเข้าหาข้อความ --- */
    margin-left: -110px;
}

/* บรรทัดที่ 44 - ปรับรูปรถ */
.floating-car {
    width: 130% !important;
    /* ขยายให้ใหญ่สะใจแบบภาพตัวอย่างแรก */
    filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.6));
    /* --- ดึงรูปรถให้พุ่งเข้าหาข้อความฝั่งซ้ายมากขึ้น --- */
    transform: translateX(-80px) !important;
    position: relative;
    z-index: 1;
}


/* --- Grid & Cards --- */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 25px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

.grid-6 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 15px;
}

/* ตัวกล่องแม่ต้องมี position: relative เพื่อให้รูปอิงตามขอบกล่อง */
.promo-card {
    position: relative !important;
    overflow: hidden !important; /* ตัดส่วนเกินของรูปที่ล้นขอบมน */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px;
}
/* ตั้งค่าให้รูปริบบิ้นลอยไปแปะที่มุมกล่อง */
.promo-icon-tag {
    position: absolute;
    top: 0;
    right: 6px;
    width: 140px; /* ทิวปรับขนาดใหญ่-เล็กได้ตามใจชอบเลยค่ะ */
    z-index: 10;
    pointer-events: none; /* เพื่อให้ยังคลิกปุ่มข้างล่างรูปได้ */
    /* ท่าไม้ตาย: สั่งให้ขยับขึ้นบนอย่างเดียว */
    transform: translateY(-8px);
    pointer-events: none;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}

/* 2. จัดระเบียบเนื้อหาข้างในให้แบ่งซ้ายขวา */
.promo-content {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 20px;
}

/* 3. คุมขนาดรูปกล่องของขวัญ */
.promo-image-box {
    flex: 1;
    display: flex;
    justify-content: center;
}

.promo-image-box img {
    max-width: 150px;
    height: auto;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.5));
}

/* 4. จัดวางข้อความฝั่งขวา */
.promo-text-box {
    flex: 1.5;
    text-align: left;
}

/* 5. ปรับแต่งตัวเลข 10% และ HOT ให้ใหญ่เด่น */
.discount-group {
    display: flex;
    align-items: baseline;
    line-height: 1;
    margin: 5px 0;
}

.discount-num {
    font-size: 80px;
    font-weight: 800;
    color: #ffcc00;
}

.discount-percent {
    font-size: 40px;
    font-weight: 700;
    color: #ffcc00;
    margin-left: 5px;
}
/* จัดการกล่องให้แบ่งซ้าย-ขวา */
.promo-content {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
}
.promo-image-box { flex: 1; text-align: center; }
.promo-image-box img { width: 100%; max-width: 140px; filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3)); }
.promo-text-box { flex: 1.5; text-align: left; }
.promo-sub { font-size: 16px; margin: 0; }
.promo-highlight { font-size: 22px; color: #ffcc00; margin: 5px 0; }
/* จัดการตัวเลข 10% ให้ใหญ่สะใจ */
.discount-group { display: flex; align-items: baseline; line-height: 0.9; margin: 5px 0; }
.discount-num { font-size: 75px; font-weight: 800; color: #ffcc00; }
.discount-percent { font-size: 35px; font-weight: 700; color: #ffcc00; margin-left: 2px; }

.promo-detail { font-size: 13px; margin-top: 5px; }
.promo-note { font-size: 10px; opacity: 0.6; }

<!-- กรอบ-->

/* --- จัดการริบบิ้นให้เฉียงและเป็นสีแดง --- */
.ribbon {
    background: #ff0000 !important; /* บังคับแดงสด */
    color: white !important;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    padding: 5px 0;
    width: 140px;
    position: absolute;
    top: 15px;
    left: -40px; /* ดึงให้เยื้องซ้าย */
    transform: rotate(-35deg); /* หมุนเฉียง */
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.discount {
    font-size: 70px;
    font-weight: 700;
    color: #ffcc00;
    line-height: 1;
}

.list-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.list-item i {
    color: #0066ff;
    margin-right: 12px;
}

.car-card {
    /* 1. สีพื้นหลัง: ใช้สีขาวจางๆ (0.05) เพื่อให้ดูใสและเห็นพื้นหลังเงารถ */
    background: rgba(255, 255, 255, 0.05) !important; 
    /* 2. เส้นขอบ: ใช้สีขาวที่จางกว่าพื้นหลังเล็กน้อย เพื่อให้เห็นขอบคมชัดแบบในรูป */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    /* 3. ความมนของมุม: ปรับให้มนสวยกำลังดี */
    border-radius: 20px;
    /* 4. ระยะห่างด้านใน: เพื่อให้เนื้อหาไม่ชิดขอบเกินไป */
    padding: 30px;
    /* 5. จัดระเบียบเนื้อหาตรงกลาง */
    text-align: center;
    /* แถม: เพิ่มเอฟเฟกต์กระจกฝ้าให้ดูหรูขึ้น */
    backdrop-filter: blur(5px);
    /*background: rgba(231, 4, 4, 0.25);
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    border: 1px solid rgba(245, 6, 6, 0.05);*/
}
.car-card01 {
    /* 1. สีพื้นหลัง: ใช้สีขาวจางๆ (0.05) เพื่อให้ดูใสและเห็นพื้นหลังเงารถ */
    background: rgba(255, 255, 255, 0.05) !important; 
    /* 2. เส้นขอบ: ใช้สีขาวที่จางกว่าพื้นหลังเล็กน้อย เพื่อให้เห็นขอบคมชัดแบบในรูป */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    /* 3. ความมนของมุม: ปรับให้มนสวยกำลังดี */
    border-radius: 20px;
    /* 4. ระยะห่างด้านใน: เพื่อให้เนื้อหาไม่ชิดขอบเกินไป */
    padding: 30px;
    /* 5. จัดระเบียบเนื้อหาตรงกลาง */
    text-align: center;
    /* แถม: เพิ่มเอฟเฟกต์กระจกฝ้าให้ดูหรูขึ้น */
    backdrop-filter: blur(5px);
}

.car-img {
    width: 100%;
    margin: 20px 0 40px 0 !important;
    display: block;
}

.car-tags span {
    background: #003399;
    padding: 8px 18px; /* เพิ่มความอ้วนให้ปุ่มหน่อยจะสวยขึ้นค่ะ */
    border-radius: 50px;
    font-size: 14px; /* ปรับให้ใหญ่ขึ้นนิดนึงจะได้อ่านง่ายค่ะ */
    margin: 0 4px;
    display: inline-block !important;
}

.small-box {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 15px;
    padding: 20px 10px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.small-box i {
    font-size: 28px;
    color: #f5f6f8;
    margin-bottom: 12px;
    display: block;
}

.small-box h5 {
    font-size: 14px;
    margin-bottom: 5px;
}

.small-box p {
    font-size: 11px;
    opacity: 0.6;
}

/* --- Footer --- */
.footer-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #001a4d;
    border-top: 4px solid #0055ff;
    padding: 18px 0;
    z-index: 1000;
}

.foot-wrap {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 20px;
}

.btn-line-full {
    background: #00c300;
    color: white;
    border: none;
    padding: 12px 50px;
    border-radius: 50px;
    font-weight: 700;
    cursor: pointer;
    font-size: 16px;
}

  
/* --- Location Cards (ข้อ 2) --- */
.location-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 200px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.location-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7);
}

.location-info {
    position: absolute;
    bottom: 20px;
    left: 20px;
}

.location-info i {
    color: #0066ff;
    margin-bottom: 5px;
}

.location-info strong {
    display: block;
    font-size: 18px;
}

.location-info p {
    font-size: 12px;
    opacity: 0.8;
}
/* 1. ล็อกตัว Body ไม่ให้เลื่อนซ้ายขวาเด็ดขาด */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative;
}

/* ============================================================
   ชุดจบปัญหา: ล็อกหน้าจอ ไม่ล้น ภาพไม่หาย (สำหรับมือถือ)
   ============================================================ */

/* ล็อกทั้งเว็บไม่ให้เลื่อนซ้ายขวาเด็ดขาด */
html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* --- ส่วนขยายรีวิวให้เต็มจอ (วางเพิ่มใหม่) --- */
.section .grid-3 {
    max-width: 98% !important; 
    width: 98% !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15px !important;
}

.car-card01 {
    /* [cite: image_16.png] จาก padding: 0 !important; ให้แก้เป็นค่าข้างล่างนี้ค่ะ */
    padding: 15px 15px 25px 15px !important; /* [cite: image_16.png] เพิ่ม Padding รอบๆ เพื่อให้เห็นขอบสีน้ำเงิน */
    overflow: hidden !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important; /* ปรับมุมให้มนสวยงามขึ้น */
}

/* แก้ไขรูปภาพ ให้ขนาดลดลงและจัดกึ่งกลาง */
.car-card01 .car-img {
    width: 100% !important; /* ให้กว้างเต็มพื้นที่ *ที่เหลือ* จาก Padding */
    max-width: 90% !important; /* [cite: image_16.png] บังคับให้กว้างไม่เกิน 90% ของกล่อง เพื่อสร้างขอบขาวจางๆ */
    height: auto !important; /* [cite: image_16.png] ปรับความสูงตามสัดส่วนภาพจริง */
    object-fit: contain !important; /* [cite: image_16.png] แสดงภาพทั้งหมด ไม่ตัดส่วนใด */
    margin: 0 auto !important; /* จัดรูปให้อยู่กึ่งกลางกล่อง */
    border-radius: 10px !important; /* ใส่ความมนให้รูปภาพดูนุ่มนวล */
    display: block !important;
}






/* ============================================================
   ชุดรวมคำสั่ง Responsive: ซ่อนปุ่ม + ย่อฟอนต์ (วางชุดนี้ชุดเดียวพอครับ)
   ============================================================ */

@media (max-width: 992px) {
    /* 1. ซ่อนปุ่มใน Header และแถบเขียวที่คุณทิวไม่ต้องการ */
    .nav-contact, 
    .nav-links,
    .header-buttons,
    .top-bar,
    .promo-badge { 
        display: none !important; 
    }

    .hero, 
    .hero-content,
    main {
        padding-top: 0px !important; /* ปรับตัวเลขนี้ขึ้น-ลงได้ตามความเหมาะสมครับ */
        margin-top: 2px !important;
    }
    /* 2. ย่อขนาดฟอนต์หัวข้อหลักที่คุณทิววงไว้ให้พอดีจอ */
    .hero-content h1, 
    header.hero h1,
    .hero-text h1 {
        font-size: 24px !important; /* ขนาดพอดีสำหรับมือถือ ไม่เบียดรูป */
        line-height: 1.3 !important;
        white-space: normal !important; /* บังคับให้ตัดบรรทัดได้ ไม่ให้ดันจอจนล้น */
        margin-bottom: 10px !important;
    }

    /* 3. จัดการโลโก้ให้กลับมาอยู่ตรงกลางสวยๆ */
    .navbar {
        justify-content: center !important;
        padding: 10px 0 !important;
        height: auto !important;
        margin-bottom: 0 !important; 
        padding-bottom: 5px !important;
        position: relative !important; /* หรือใช้ fixed ถ้าต้องการให้แถบโลโก้ติดด้านบนตลอด */
        top: 0;
        width: 100%;
        z-index: 1000;
        background-color: #003399 !important; /* ใส่สีพื้นหลังป้องกันการโปร่งใสจนเห็นเนื้อหาซ้อน */
    }

    .logo-group {
        margin: 0 auto !important;
    }

     /*4. จัดระเบียบกล่องโปรโมชั่นไม่ให้หายและพอดีจอ */
    .promo-card {
        display: flex !important;
        width: 95% !important;
        margin: 15px auto !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }


       /* 1. จัดการตัวรูปภาพรถ */
    .hero-image img, 
    .car-image-container img {
        display: block !important;
        max-width: 100% !important; /* ลดขนาดลงนิดนึงเพื่อให้เห็นการขยับครับ */
        width: auto !important;
        height: auto !important;
        margin-top: -80px !important; /* บังคับจัดกลางทั้งซ้ายและขวา */
        position: relative !important;
        left: 50% !important; /* ไม้ตาย: ดันไปกึ่งกลางจอ */
        transform: translateX(-50%) !important; /* ไม้ตาย: ดึงกลับมาให้กึ่งกลางเป๊ะ */
    }

    /* 2. บังคับกล่องแม่ให้เปิดพื้นที่ตรงกลาง */
    .hero-image, 
    .car-image-container {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        overflow: visible !important; /* ป้องกันกล่องแม่ตัดรูปครับ */
    }
   /* 2. ดันทั้ง Section ลงมาเพื่อหลบรถ */
    section.section {
        margin-top: 70px !important; /* ดันก้อนโปรโมชั่นลงมา 80px เพื่อไม่ให้ทับรถ */
        margin-bottom: 0 !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    /* 3. คืนค่าหัวข้อให้ชิดซ้ายตามเดิม */
    .section-title {
        text-align: left !important; /* กลับมาฉีดซ้ายตามที่คุณทิวต้องการ */
        margin-top: 10px !important;
        margin-bottom: 5px !important;
        padding-left: 15px !important; /* เพิ่มช่องว่างจากขอบซ้ายนิดนึงให้อ่านง่ายครับ */
        display: block !important;
        width: 100% !important;
    }
    .grid-2 {
        display: block !important; 
        width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }
   /* 1. ลดช่องว่างด้านซ้ายของกล่องคอนเทนเนอร์ */
    body .promo-card .promo-content {
        padding-left: 5px !important; /* ลดจากเดิมเพื่อให้รูปขยับไปซ้ายได้อีก */
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 8px !important; /* กระชับระยะห่างระหว่างรูปกับข้อความนิดนึงครับ */
    }
   /* 1. ย่อขนาดป้าย HOT SALE ให้เล็กลงเพื่อไม่ให้บังตัวหนังสือ */
    body .promo-card .promo-icon-tag {
        width: 60px !important; /* ย่อจากของเดิมที่น่าจะใหญ่มาก */
        height: auto !important;
        position: absolute !important;
        top: 5px !important;
        right: 5px !important;
        z-index: 10 !important;
    }

   /* 2. ดันรูปของขวัญไปทางซ้ายอีกนิด */
    body .promo-card .promo-image-box {
        width: 70px !important;
        min-width: 70px !important;
        margin-left: 0 !important; /* มั่นใจว่าชิดซ้ายสุด */
        margin-right: 0 !important;
        flex-shrink: 0 !important;
    }

/* 3. ปรับระยะข้อความให้ตามรูปมาติดๆ */
    body .promo-card .promo-text-box {
        margin-left: 0 !important; /* ลดระยะห่างเพื่อให้ข้อความเกาะกลุ่มกับรูปสวยๆ */
        margin-top: 25px !important;
        padding-right: 40px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

   /* 4. ปรับขนาดฟอนต์ให้สมดุล (แก้ปัญหาตัวหนังสือใหญ่เกินจนล้น) */
    body .promo-card .promo-highlight {
        font-size: 15px !important; /* "จองล่วงหน้า" */
        margin: 0 !important;
        line-height: 1.2 !important;
        white-space: normal !important; /* ยอมให้บรรทัดยาวๆ ขึ้นบรรทัดใหม่ได้ */
    }

    body .promo-card .discount-num {
        font-size: 22px !important; /* "10%" หรือ "HOT" */
        font-weight: bold !important;
        margin: 2px 0 !important;
        line-height: 1 !important;
    }

   /* แถม: ปรับให้บรรทัด "เฉพาะการจอง..." เว้นระยะห่างด้านบนอีกนิดไม่ให้เบียดกัน */
    body .promo-card .promo-desc {
        font-size: 11px !important;
        line-height: 1.3 !important;
        white-space: normal !important;
        margin-top: 8px !important; /* เพิ่มช่องว่างเหนือคำบรรยายเล็กน้อย */
        color: rgba(255, 255, 255, 0.8) !important;
    }
    /* 1. ลดระยะห่างเหนือกล่องใบแรก (ชิดหัวข้อ 1.โปรโมชั่น) */
    body .promo-card {
        margin-top: 5px !important; /* ปรับลดจากค่าเดิมเพื่อให้ชิดหัวข้อด้านบน */
        margin-bottom: 10px !important; /* ลดระยะห่างระหว่างกล่องแต่ละใบให้ชิดกันขึ้น */
    }

    /* 2. ถ้ามี Container คลุมกล่องโปรโมชั่นทั้งหมด ให้ลดระยะห่างด้านบนด้วย */
    .promo-section, .promo-container {
        padding-top: 5px !important;
        margin-top: 5px !important;
    }
    /* 1. ลดระยะห่างด้านล่างของกล่องโปรโมชั่นใบสุดท้าย */
    body .promo-card:last-child {
        margin-bottom: 5px !important; /* ดึงเนื้อหาที่ตามมาให้ขึ้นมาติดกันมากขึ้น */
    }

    /* 2. จัดการหัวข้อ "2.สถานที่ให้บริการ" ให้ขยับขึ้นไป */
    /* (สมมติว่าใช้คลาส .section-title หรือ tag h2 h3 นะครับ) */
    body .section-title1, 
    body h3 {
        margin-top: -70px !important; /* ลดระยะห่างด้านบนของหัวข้อ */
        margin-bottom: 5px !important; /* ลดระยะห่างด้านล่างของหัวข้อ */
    }
    body .section-title2, 
    body h3 {
        margin-top: -50px !important; /* ลดระยะห่างด้านบนของหัวข้อ */
        margin-bottom: 5px !important; /* ลดระยะห่างด้านล่างของหัวข้อ */
    }
    body .section-title3, 
    body h3 {
        margin-top: -70px !important; /* ลดระยะห่างด้านบนของหัวข้อ */
        margin-bottom: 5px !important; /* ลดระยะห่างด้านล่างของหัวข้อ */
    }
    body .section-title4, 
    body h3 {
        margin-top: -70px !important; /* ลดระยะห่างด้านบนของหัวข้อ */
        margin-bottom: 5px !important; /* ลดระยะห่างด้านล่างของหัวข้อ */
    }

    /* 3. ถ้ามี Container คลุมส่วนโปรโมชั่น ให้ลด padding ด้านล่างด้วยครับ */
    .promo-section {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    /* ลดระยะห่างระหว่างกล่องสถานที่ (Service Cards) ให้ชิดกันขึ้น */
    body .service-card, 
    body .location-card,
    body [class*="card"] { /* คลุมทุกคลาสที่มีคำว่า card ในส่วนนี้ */
        margin-bottom: 4px !important; /* ปรับลดจากเดิม เพื่อให้กล่องบน-ล่างใกล้กัน */
        margin-top: 0 !important;
    }

    /* ถ้ากล่องถูกคลุมด้วย Container ให้ลดระยะห่างภายในก้อนนั้นด้วย */
    body .service-grid, 
    body .location-list {
        gap: 10px !important; /* กรณีใช้ Flex หรือ Grid จะช่วยบีบช่องไฟได้ดีที่สุดครับ */
    }
     /* ลดระยะห่างระหว่างกล่องสถานที่ (Service Cards) ให้ชิดกันขึ้น */
    body .service-card, 
    body .location-card,
    body [class*="card01"] { /* คลุมทุกคลาสที่มีคำว่า card ในส่วนนี้ */
        margin-bottom: -15px !important; /* ปรับลดจากเดิม เพื่อให้กล่องบน-ล่างใกล้กัน */
        margin-top: 0 !important;
    }
    /* ลดระยะห่างระหว่างกล่องฟีเจอร์/สิทธิประโยชน์ */
    body .benefit-card, 
    body .feature-card,
    body [class*="benefit"], 
    body [class*="feature"] {
        margin-bottom: 12px !important; /* ปรับลดจากค่าเดิมเพื่อให้กล่องชิดกันมากขึ้น */
        padding-top: 1px !important;   /* ปรับสมดุลพื้นที่ภายในกล่อง */
        padding-bottom: 20px !important;
    }

    /* ถ้ากล่องถูกคลุมด้วยก้อนรายการหลัก ให้บีบระยะห่างด้วย gap */
    body .benefit-grid, 
    body .feature-list {
        gap: 12px !important; /* จัดการระยะห่างให้เท่ากันทุกช่อง */
        margin-top: 10px !important;
    }
    /* 1. เจาะจงซ่อน span ตัวสุดท้ายใน foot-wrap (ที่มีคำว่า All Time) */
    .footer-bar .foot-wrap span:last-child {
        display: none !important;
    }

    /* 2. จัดระเบียบกล่องหุ้มให้ยืดหยุ่นในมือถือ */
    .footer-bar .foot-wrap {
        display: flex !important;
        flex-direction: column !important; /* ปรับให้เบอร์โทรกับปุ่มเรียงแถวตอนลึก */
        align-items: center !important;
        gap: 10px !important;
        padding: 10px !important;
    }

    /* 3. ขยายปุ่ม LINE ให้เต็มความกว้าง */
    .footer-bar .foot-wrap a {
        width: 100% !important;
        text-align: center !important;
    }

    .footer-bar .btn-line-full {
        width: 100% !important;
        display: block !important;
    }

    .section .grid-3 {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* เรียง 3 กล่อง */
        gap: 20px !important;
        max-width: 95% !important;
        width: 95% !important;
        margin: 0 auto !important;
    }
    .section .grid-3 {
        display: flex !important;
        flex-direction: column !important; /* เรียงเป็นแถวตอนลึก */
        gap: 15px !important;
        padding: 0 15px !important;
    }
    
    .car-card01, .car-card {
        width: 100% !important; /* ให้กล่องกว้างเต็มจอ */
        margin-bottom: 20px !important;
    }

    .car-card01 .car-img {
        max-width: 100% !important; /* รูปภาพในมือถือให้กว้างเต็มกล่อง */
        height: auto !important;
    }

/* 3. ส่วนกลาง (ใช้เหมือนกันทั้งสองจอ) */
.car-card01 {
    background: rgba(255, 255, 255, 0.05) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    padding: 15px !important;
}

}