/* General Settings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Kanit', sans-serif;
    background-color: #ffffff; /* พื้นหลังสีขาวหลัก */
    color: #333;
    line-height: 1.6;
    scroll-behavior: smooth;
}

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

/* Navigation */
header {
    background: #ffffff;
    height: 80px;
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
/* บังคับให้ส่วนหัวกว้างเต็มที่และแยกออกจากกัน */
.header-container {
    display: flex !important;
    justify-content: space-between !important; /* สั่งแยกซ้ายขวาสุดแรง */
    align-items: center !important;
    width: 100% !important;
    max-width: 1200px; /* หรือตามความกว้างหน้าจอของคุณทิว */
    margin: 0 auto;
    text-align: left !important; /* ยกเลิกการจัดกลางจากตัวแม่ */
}
.header-left {
    display: flex !important;
    align-items: center !important;
}
.header-logo {
    height: 60px;
    width: auto;
    margin-right: 15px;
    display: block;
    transition: all 0.3s ease;
}
/* ปรับแต่งปุ่มโทรให้ดูดี */
.nav-phone {
    white-space: nowrap; /* ป้องกันเบอร์โทรตกบรรทัด */
    display: inline-block;
}
/* ถ้ายังไม่ยอมแยก ให้เพิ่มตัวนี้ครับ */
.nav-contact {
    margin-left: auto !important; 
}
.logo {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 1px;
}

.logo span {
    color: #c0392b; /* สีแดงเล็กน้อยให้ดูเป็นจุดเด่น */
}

.nav-phone {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    border: 1px solid #333;
    padding: 8px 15px;
    border-radius: 5px;
    transition: 0.3s;
}

.nav-phone:hover {
    background: #333;
    color: #fff;
}

/* Hero Section */
.hero {
    background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), 
                url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c?auto=format&fit=crop&w=1200&q=80');
    background-size: cover;
    background-position: center;
    padding: 150px 0;
    text-align: center;
}


.hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    font-weight: 600;
}

.promo-tag {
    display: inline-block;
    background: #c0392b;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    margin-bottom: 30px;
}

.btn-main {
    display: inline-block;
    background: #2c3e50;
    color: #fff;
    padding: 15px 35px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1rem;
}

/* Features */
section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 10px;
    margin-top: 12px;
}
.section-title h2 {
    /* --- แก้ตรงนี้ --- */
    margin-bottom: 10px; /* ลดระยะห่างระหว่างตัวหนังสือ h2 กับเส้นขีดแดง */
}

.line {
    width: 60px;
    height: 3px;
    background: #c0392b;
    margin: 15px auto;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/*.feature-card {
    text-align: center;
    padding: 40px;
    background: #fff;
    border: 1px solid #f0f0f0;
    transition: 0.3s;
}*/
/* --- 1. สไตล์มาตรฐาน สำหรับการ์ดทุกใบ (รวมถึงส่วนบน) --- */
.feature-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    padding: 30px; /* คืนค่าช่องว่างให้ส่วนบน "ลักษณะบ้าน" */
    text-align: center;
    transition: transform 0.3s ease;
    overflow: hidden; /* ป้องกันเนื้อหาล้น */
}
.feature-card.card-with-image {
   padding: 0 !important;      /* เอา Padding รอบนอกออกเพื่อให้รูปชนขอบ */
    text-align: left !important; /* จัดข้อความชิดซ้ายตามที่มะลิแนะนำครับ */
    display: flex;
    flex-direction: column;
}
.feature-card.card-with-image .icon {
    width: 100% !important;
    height: 220px;         /* ปรับความสูงรูปตามต้องการครับ */
    margin: 0 0 15px 0 !important;
    border-radius: 0;
}
.feature-card.card-with-image .icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;     /* สำคัญมาก: ทำให้รูปเต็มกรอบโดยไม่บิดเบี้ยว */
}    
/* เพิ่มช่องว่างให้ตัวหนังสือเฉพาะในการ์ดที่มีรูป */
.feature-card.card-with-image h3{
    padding: 0 20px;            /* เว้นระยะจากขอบซ้าย-ขวา 20px */
    margin-bottom: 8px;         /* ระยะห่างระหว่างหัวข้อกับคำอธิบาย */
    font-size: 1.25rem;
    color: #333;
}
.feature-card.card-with-image p {
    padding: 0 20px 20px 20px;  /* เว้นระยะซ้าย-ขวา และด้านล่างก่อนจบการ์ด */
    color: #666;
    line-height: 1.6;           /* เพิ่มระยะห่างระหว่างบรรทัดให้อ่านง่ายขึ้น */
}
<!--หมดเขต-->

.feature-card:hover {
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.feature-card .icon {
    font-size: 3rem;
    margin-bottom: 15px;
}
/* ============================================================ */
/* โค้ดสำหรับส่วนล่าง (ที่อยากใส่รูปภาพ) - เจาะจงด้วย ID #feature-images */
/* ============================================================ */

/* 1. เจาะจงที่ ID #feature-images เพื่อไม่ให้กระทบส่วนบน */
/* 2. เจาะจงที่ Class feature-img-card ที่เราใส่เพิ่ม */
.feature-img-card {
    overflow: hidden; /* เผื่อรูปใหญ่เกิน */
    border-radius: 8px; /* ใส่ความโค้งมนให้การ์ดรูปภาพ */
    text-align: center;
}

/* 3. จัดสไตล์รูปภาพในการ์ดด้านล่างให้เต็มการ์ดเหมือนแบบแรก */
.feature-img-card .icon {
    
    width: 100%;            /* ให้กรอบรูปขยายเต็มความกว้างของการ์ด */
    height: 180px;          /* กำหนดความสูงของการ์ดรูปภาพ */
    margin: 0 auto 15px;    /* จัดให้อยู่ตรงกลาง และเว้นระยะด้านล่าง */
    display: flex;          /* จัดรูปภาพข้างในให้อยู่กลางกรอบ */
    align-items: center;
    justify-content: center;
    overflow: hidden;       /* ถ้ารูปใหญ่เกินกรอบ ให้ตัดส่วนที่เกินออก */  
}

/* 4. ควบคุมรูปภาพข้างในไม่ให้เบี้ยว */
.feature-img-card .icon img {
    width: 100%;            /* ให้รูปภาพขยายเต็มความกว้างของกรอบ */
    height: 100%;           /* ให้รูปภาพขยายเต็มความสูงของกรอบ */
    object-fit: cover;      /* **สำคัญมาก** เพื่อให้รูปภาพสเกลพอดีกรอบโดยไม่เบี้ยว */
    object-position: center; /* จัดจุดโฟกัสภาพให้อยู่ตรงกลาง */
}

/* 5. (ไม่บังคับ) ปรับขนาด font และระยะห่างของ h3 และ p ในส่วนรูปภาพ */
.feature-img-card h3 {
    margin-top: 10px;
    font-size: 1.2rem;
}

.feature-img-card p {
    font-size: 0.9rem;
    padding: 0 10px 10px; /* เว้นระยะด้านข้างและด้านล่างเล็กน้อย */
}

/* ========================================================= */
/* CSS สำหรับการ์ดที่ต้องการแสดงรูปภาพ (สี่เหลี่ยมแนวนอนเต็มการ์ด) */
/* ========================================================= */
/* 1. จัดการกรอบรูป (.icon) ให้เป็นสี่เหลี่ยมผืนผ้าแนวนอน */
.card-with-image .icon {
    width: 100%;            /* ขยายเต็มความกว้างของการ์ด */
    height: 180px;          /* กำหนดความสูง固定 (ปรับได้ตามชอบ) */
    /* ลบสไตล์วงกลมและกรอบเล็ก ๆ ของเดิมออก */
    border-radius: 0; 
    border: none;
    box-shadow: none;
    padding: 0;
    /* จัดการ Overlow และ Flex เหมือนเดิมเพื่อให้รูปอยู่กลาง */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2. จัดการตัวรูปภาพ (img) ข้างในไม่ให้เบี้ยว */
.card-with-image .icon img {
    width: 100%;            /* ให้รูปภาพขยายเต็มความกว้างของกรอบ */
    height: 100%;           /* ให้รูปภาพขยายเต็มความสูงของกรอบ */
    object-fit: cover;      /* **สำคัญมาก** เพื่อให้รูปภาพสเกลพอดีกรอบโดยไม่เบี้ยว */
    object-position: center; /* จัดจุดโฟกัสภาพให้อยู่ตรงกลาง */
}

/* 3. (ไม่บังคับ) ปรับระยะห่างของการ์ดเล็กน้อย */
.card-with-image {
    padding-top: 0; /* ถ้ารูปชนขอบบนแล้ว ให้เอา Padding บนออก */
    overflow: hidden; /* เพื่อให้มุมโค้งของการ์ดตัดขอบรูปภาพด้วย */
    border-radius: 8px; /* ใส่ความโค้งมนให้การ์ด (ถ้าต้องการ) */
}

/* Promotion */
.promotion {
    background: #f9f9f9;
}
.promo-box {
    background: #fff;
    padding: 50px;
    border: 2px dashed #c0392b;
    border-radius: 10px;
    text-align:left;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.promo-box ul {
    list-style: none;
    margin: 20px 0;
    font-size: 1.2rem;
    padding-left: 0;
    text-align: left;
    width: fit-content;
}
.promo-box li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.promo-box li span,
.promo-box li img {
    margin-right: 10px;
}
.expiry {
    color: #888;
    font-size: 0.9rem;
}
/* Reviews */
.review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.review-item {
    padding: 30px;
    border-left: 4px solid #c0392b;
    background: #fff;
}
.customer-name {
    display: block;
    margin-top: 15px;
    font-weight: 600;
    color: #666;
}
/* Floating Buttons */
.floating-contact {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 2000;
}
.float-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    border-radius: 50px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    transition: 0.3s;
}
.float-btn.line { background: #06C755; }
.float-btn.call { background: #2c3e50; }
.float-btn:hover { transform: translateY(-5px); }
/* Footer */
/*footer {
    text-align: center;
    padding: 40px 0;
    border-top: 1px solid #eee;
    color: #888;
}*/



.footer {
    background-color: #f8f9fa; /* สีพื้นหลังอ่อนๆ หรือเปลี่ยนตามชอบค่ะ */
    padding: 40px 0 20px;
    text-align: center;
    border-top: 1px solid #ddd;
}

.footer-contact h4 {
    margin-bottom: 15px;
    color: #333;
}

.footer-social {
    display: flex;
    justify-content: center;
    gap: -10px; /* ระยะห่างระหว่างไอคอน */
    margin: 5px 0;
}

/* คุมขนาดไอคอนใน Footer ให้กะทัดรัด */
.footer-icon {
    width: 35px;
    height: 35px;
    transition: 0.3s;
}

.footer-icon:hover {
    transform: scale(1.1); /* ขยายเล็กน้อยเวลาเอาเม้าส์ไปชี้ */
}

.footer-bottom {
    margin-top: 30px;
    font-size: 14px;
    color: #888;
}
/* คุมขนาดกล่องไอคอนให้เท่ากันเป๊ะ */
.footer-social-item {
    display: flex;
    align-items: center;
    justify-content: center;
    /* --- มะลิขยายเพิ่มเป็น 60px เพื่อให้ดูเด่นตามรูปตัวอย่างที่ส่งมาค่ะ --- */
    width: 60px;         
    height: 60px;
    margin: 0 !important;      /* เพิ่มระยะห่างระหว่างไอคอนเล็กน้อย */
    overflow: hidden;
    border-radius: 12px; /* ปรับความโค้งมนให้รับกับขนาดที่ใหญ่ขึ้น */
    transition: transform 0.3s ease; /* เพิ่มลูกเล่นเวลาเอาเมาส์ไปชี้ */
}

/* บังคับรูปภาพข้างในให้ขยายเต็มกล่องที่กำหนดไว้ */
.footer-social-item img {
    width: 100% !important;
    height: 100% !important;
    /* ใช้ cover เพื่อให้ไอคอนขยายเต็มพื้นที่และเท่ากันเป๊ะทั้งคู่ค่ะ */
    object-fit: cover !important; 
    display: block;
}

/* จัดระเบียบข้อความ "ติดต่อเรา" และเบอร์โทรให้สวยงาม */
.footer-contact p {
    margin-bottom: 15px;
}
.footer-social-item:hover {
    transform: scale(1.1); /* ขยายขึ้นอีกนิดเวลา hover ให้ดูมีมิติค่ะ */
}



/*  สิ้นสุดตั้งพื้น     */


/* เพิ่มขายภาพเวลากด */
/* หน้าจอ Overlay สีดำ */
.lightbox-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    align-items: center;
    justify-content: center;
}

.lightbox-content {
    position: relative;
    max-width: 80%;
    max-height: 80%;
}

.lightbox-content img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    object-fit: contain;
}

/* ปุ่มเลื่อนซ้าย-ขวา */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 30px;
    user-select: none;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
    text-decoration: none;
}
.next { right: -60px; }
.prev { left: -60px; }
.close {
    position: absolute;
    top: -40px; right: 0;
    color: white; font-size: 30px; cursor: pointer;
}
.hero-buttons {
    display: flex;
    flex-direction: row; /* เรียงแนวนอนในจอใหญ่ */
    justify-content: center;
    gap: 15px;           /* ระยะห่างระหว่างปุ่ม */
    margin-top: 20px;
    flex-wrap: wrap;     /* **สำคัญ:** ถ้าจอแคบให้ปุ่มตกลงมาข้างล่างแทนการทับกัน */
}

/* ตั้งค่าตัวปุ่ม */
.hero-buttons .btn {
    padding: 12px 24px;   /* เพิ่ม padding ซ้าย-ขวา */
    text-align: center;
    border-radius: 8px;
    display: inline-block;
    text-decoration: none;
    transition: 0.3s;
    /* --- จุดสำคัญ: ทำให้เท่ากัน --- */
    min-width: 200px;     /* **สำคัญ:** บังคับให้ทุกปุ่มกว้างอย่างน้อย 200px (คุณทิวลองปรับตัวเลขนี้ดูนะครับ) */
}

/*สิ้นสุดตั้งค่า*/
/* Setting Facebook */
/* คุมขนาดรูปภาพไอคอน Facebook */
.fb-icon {
    width: 40px;        /* ปรับความกว้างให้เหลือ 40 พิกเซล หรือตามชอบครับ */
    height: 40px;       /* ปรับความสูงให้เท่ากันเพื่อให้เป็นจัตุรัส */
    object-fit: contain; /* ช่วยให้รูปไม่เบี้ยวเวลาโดนบีบขนาด */
    display: block;
    margin: 0 auto;     /* จัดให้อยู่กลางปุ่ม */
}

/* ถ้าคุณทิวอยากให้ปุ่มลอยตัวสวยๆ เหมือนปุ่มโทร */
.fb-link {
    background-color: #1877F2; /* สีน้ำเงิน Facebook */
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    margin-bottom: 10px; /* เว้นระยะห่างจากปุ่มโทรนัดชมบ้านด้านล่าง */
}
.floating-icon.facebook {
    background-color: #1877F2; /* สีน้ำเงิน Facebook */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;  /* ปรับขนาดตามความเหมาะสม */
    height: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .hero h1 { font-size: 2rem; }
    .review-grid { grid-template-columns: 1fr; }
    .nav-phone { display: none; }
    .floating-contact { bottom: 20px; right: 20px; }

.hero-buttons {
        display: flex !important;
        flex-direction: column !important; 
        align-items: center !important;    
        gap: 8px !important;              /* ระยะห่างระหว่างปุ่มบน-ล่าง */
        width: 100%;
    }
.hero-buttons .btn {
        /* --- จุดตายที่ทำให้เท่ากันเป๊ะ --- */
        width: 280px !important;           /* บังคับความกว้าง 280px เท่ากันทั้งสองปุ่ม */
        display: block !important;         /* บังคับให้เป็นบล็อกเพื่อยอมรับค่า width */
        
        padding: 15px 0 !important;        /* เน้นความหนา บน-ล่าง */
        text-align: center !important;     /* จัดตัวหนังสือให้อยู่ตรงกลางปุ่ม */
        box-sizing: border-box !important; /* ป้องกันปุ่มบวมเกินขนาดที่ตั้งไว้ */
        margin: 0 !important;
    }
}