/* --- ส่วนจัดวางโครงสร้างหลัก --- */
/* --- ส่วนจัดวางโครงสร้างหลัก --- */
.content-wrapper {
    position: relative;         /* ✅ เป็นกรอบอ้างอิงให้แผนที่อยู่ข้างใน */
    display: flex;
    
    /* 1. เปลี่ยนการเรียงตัวและตำแหน่ง */
    flex-direction: column;     /* ✅ เปลี่ยนให้เรียงเป็นแนวตั้ง (บนลงล่าง) */
    justify-content: center;    /* ✅ จัดกลุ่มเนื้อหาให้อยู่กึ่งกลางแนวตั้ง */
    align-items: flex-start;    /* ✅ ดันเนื้อหาทั้งหมดให้ชิดซ้าย */
    gap: 25px;                  /* ✅ ระยะห่างระหว่างกล่องรูปบริษัท กับ กล่องข้อมูลติดต่อ */
    
    width: 100%;
    max-width: 1440px;          
    
    /* 2. ปรับความสูงเผื่อเนื้อหาซ้อนกัน */
    min-height: 650px;          /* ✅ ใช้ min-height แทน height เพื่อป้องกันเนื้อหาล้นกรอบเมื่อเรียงบนล่าง */
    
    margin: 50px auto;          /* จัดให้อยู่กึ่งกลางหน้าจอ */
    padding: 40px;              /* ✅ เพิ่ม padding รอบด้านไม่ให้เนื้อหาติดขอบเกินไป */
    
    box-sizing: border-box;
    border-radius: 20px;
    overflow: hidden;           /* ตัดแผนที่ส่วนที่เกินขอบโค้งออก */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* =========================================
   แผนที่ (ตั้งให้เป็นพื้นหลังของ content-wrapper)
========================================= */
#map { 
    position: absolute;         /* ✅ ลอยอยู่ด้านหลัง */
    top: 0;
    left: 0;
    width: 100%;                /* ขึงให้เต็มกรอบ */
    height: 100%; 
    z-index: 1;                 /* ให้อยู่ชั้นล่างสุด */
}

/* =========================================
   ฝั่งซ้าย (Contact)
========================================= */
.contact-container {
    position: relative;
    z-index: 20;                /* ✅ ลอยอยู่เหนือแผนที่ */
    
    display: flex;
    align-items: center;
}

.cc-main {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;    
}

/* =========================================
   ส่วนควบคุมการซ่อน/แสดงข้อความ
========================================= */
.cc-facebook, .cc-line, .cc-mail, .cc-phone {
    position: relative;
    cursor: pointer;
}

.cc-facebook span, 
.cc-line span, 
.cc-mail span, 
.cc-phone span {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 5px 10px;
    border-radius: 50px;
    transition: all 0.5s ease;
    background: #ffffff;        /* ใส่พื้นหลังสีขาวให้เห็นชัดบนแผนที่ */
    gap: 15px;                  /* ระยะห่างระหว่างไอคอนกับตัวหนังสือ */
}

.cc-main img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
    z-index: 2;
    display: block;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


.cc-main a {
    color: #000000;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    font-family: "Noto Sans Thai Looped", sans-serif;
    
   
}


/* =========================================
   ฝั่งขวา (รูปภาพบริษัทและปุ่ม)
========================================= */
.map-section {
    position: relative;
    z-index: 20;                /* ✅ ลอยอยู่เหนือแผนที่ */
}

.path-map {
    background: rgba(255, 255, 255, 0.95);
    padding: 15px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.map-wrapper {
    display: flex;
    flex-direction: column; 
    align-items: center; 
    justify-content: center;
    width: 400px; 
}

.map-img {
    width: 100%;
    height: 270px; 
    border-radius: 15px;    
    overflow: hidden;       
    border: 3px solid #ffffff; 
    box-shadow: 0 5px 10px rgba(0,0,0,0.1); 
    margin-bottom: 15px;    
}

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

.button-map{
    background-color: #003760;
    border-radius: 10px;
    padding: 10px;
}

.button-map a{
    color: #ffffff;
    text-decoration: none;
    font-family: "Noto Sans Thai Looped", sans-serif;
}

/* =========================================
   Responsive Design (เฉพาะส่วน Contact & Map)
========================================= */

/* --- สำหรับหน้าจอขนาดกลาง (Tablet / iPad) กว้างไม่เกิน 1024px --- */
@media (max-width: 1024px) {
    .content-wrapper {
        width: 90%;      /* บีบกรอบเข้ามาไม่ให้ชิดขอบจอเกินไป */
        padding: 30px;
    }
}

/* --- สำหรับหน้าจอขนาดเล็ก (Mobile / โทรศัพท์มือถือ) กว้างไม่เกิน 768px --- */
@media (max-width: 768px) {
    
    /* 1. ปรับกรอบเนื้อหาหลัก */
    .content-wrapper {
        margin: 30px 5%;
        padding: 20px;
        align-items: center; /* ดันเนื้อหาทั้งหมดมาอยู่กึ่งกลาง */
        min-height: auto;    /* ยกเลิก min-height: 650px ปล่อยให้ยืดตามเนื้อหาจริง */
    }

    /* 2. ปรับฝั่งซ้าย (ข้อมูลติดต่อ) */
    .contact-container {
        width: 100%; 
        justify-content: center; /* จัดกลุ่มให้อยู่ตรงกลาง */
    }

    .cc-main {
        width: 100%;
        align-items: center; /* จัดปุ่มติดต่อต่างๆ ให้อยู่กึ่งกลางหน้าจอ */
    }

    .cc-main a {
        font-size: 12px; /* ลดขนาดตัวหนังสือลงไม่ให้ล้นจอ */
    }

    /* ขยายพื้นที่กดของปุ่มติดต่อให้จิ้มง่ายขึ้น */
    .cc-facebook span, 
    .cc-line span, 
    .cc-mail span, 
    .cc-phone span {
        gap: 10px;
        padding: 8px 15px; 
        justify-content: center; 
        width: 100%;
        box-sizing: border-box;
    }

    /* 3. ปรับฝั่งขวา (รูปบริษัทและปุ่มแผนที่) */
    .path-map {
        width: 100%;
        box-sizing: border-box; 
    }

    /* สำคัญ: ปลดล็อค width: 400px เดิม เพื่อไม่ให้จอล้น */
    .map-wrapper {
        width: 100%; 
        max-width: 350px; /* บังคับให้กว้างสุดแค่ 350px (พอดีมือถือ) */
    }

    .map-img {
        height: auto;      
        aspect-ratio: 4/3; /* ใช้สัดส่วนแทนความสูงแบบฟิกซ์ ป้องกันรูปเบี้ยว */
    }

    #map{
        display: none;
    }

    /* =========================================
   ปรับให้ cc-mail แสดงอีเมลแยก 2 บรรทัด
========================================= */
    .cc-mail span {
        display: grid !important;        /* ใช้ Grid ทับคำสั่ง Flex เดิม */
        grid-template-columns: 30px 1fr; /* แบ่ง 2 คอลัมน์: ให้ไอคอนกว้าง 30px ที่เหลือเป็นพื้นที่ของอีเมล */
        align-items: center;
        row-gap: 5px;                    /* ระยะห่างระหว่างบรรทัดบน-ล่าง */
        column-gap: 15px;                /* ระยะห่างระหว่างไอคอนกับข้อความ */
    }

    .cc-mail span img {
        grid-row: span 2; /* สั่งให้รูปไอคอนควบพื้นที่ 2 บรรทัด */
    }

    .cc-mail span a {
        display: block;
        line-height: 1.2;
        word-break: break-word; /* ป้องกันไม่ให้อีเมลยาวจนทะลุจอในมือถือ */
    }

        /* =========================================
    ปรับให้ phone แสดเบอร์แยก 2 บรรทัด
    ========================================= */
    .cc-phone span {
        display: grid !important;        /* ใช้ Grid ทับคำสั่ง Flex เดิม */
        grid-template-columns: 30px 1fr; /* แบ่ง 2 คอลัมน์: ให้ไอคอนกว้าง 30px ที่เหลือเป็นพื้นที่ของอีเมล */
        align-items: center;
        row-gap: 5px;                    /* ระยะห่างระหว่างบรรทัดบน-ล่าง */
        column-gap: 15px;                /* ระยะห่างระหว่างไอคอนกับข้อความ */
    }

    .cc-phone span img {
        grid-row: span 2; /* สั่งให้รูปไอคอนควบพื้นที่ 2 บรรทัด */
    }

    .cc-phone span a {
        display: block;
        line-height: 1.2;
        word-break: break-word; /* ป้องกันไม่ให้อีเมลยาวจนทะลุจอในมือถือ */
    }

}

@media (max-width: 450px){
    .sp1 img{
        width: 350px;
        height: auto;
        position: relative;
        right: 20px;
    }

    .main-footer{
        position: relative;
    }

    .logo-footer,
    .contact-footer{
        position: relative;
        top: 0px;
    }

}