/* กำหนดค่าเริ่มต้นและใช้ฟอนต์ที่อ่านง่าย */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #ffffff; /* พื้นหลังสีขาวบริสุทธิ์ */
    color: #333; /* สีข้อความหลัก */
}

/* ตัวแปรสี (เพื่อความง่ายในการแก้ไข) */
:root {
    --primary-red: #cc0000; /* สีแดงหลักตามโลโก้ */
    --light-gray: #f0f0f0; /* สีเทาอ่อนสำหรับเส้นคั่น/พื้นหลังบางส่วน */
    --text-dark: #333;
}

.container {
    max-width: 1400px; /* ขยายความกว้างเพื่อความหรูหรา */
    margin: 0 auto;
    padding: 20px 40px; /* เพิ่ม padding ด้านข้าง */
}

/* === 1. ส่วนหัวและโลโก้ === */
.logo-section {
    padding: 20px 0;
    /* ไม่มีเส้นขีดด้านล่างเพื่อให้ดูสบายตาขึ้น */
    margin-bottom: 50px; 
}

.logo img {
    /* ปรับขนาดโลโก้ให้เหมาะสม */
    max-height: 127px; 
    width: auto;
    display: block; /* แก้ไขปัญหาพื้นที่ว่างใต้รูปภาพ */
}

/* === 2. ส่วนเนื้อหาหลัก (Layout 2 คอลัมน์) === */
.content-section {
    display: flex;
    align-items: center; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
    gap: 80px; /* ระยะห่างระหว่างคอลัมน์ */
    padding: 40px 0;
}

/* ข้อมูลบริษัท */
.company-info {
    flex: 1;
    padding-left: 0; /* ลบ padding-left ที่ไม่จำเป็น */
}

.company-info h2 {
    font-size: 2.5em; /* ปรับขนาด H2 */
    font-weight: 600;
    color: var(--primary-red);
    margin-bottom: 5px;
    line-height: 1.2;
}

.thai-name {
    font-size: 1.4em; /* ปรับขนาดชื่อภาษาไทย */
    font-weight: 400;
    color: #666;
    margin-bottom: 30px;
}

hr {
    border: none;
    height: 3px;
    background-color: var(--primary-red);
    width: 120px; /* ทำให้เส้นขีดเด่นขึ้นเล็กน้อย */
    margin: 20px 0 30px 0;
    text-align: left;
    /* ใช้ transform เพื่อให้แน่ใจว่ามันชิดซ้าย */
    transform-origin: 0 0; 
}

/* รายละเอียดการติดต่อ */
.contact-details h3 {
    color: var(--primary-red);
    font-size: 1.6em; /* ปรับขนาด H3 */
    margin-bottom: 20px;
    font-weight: 700;
}

.contact-details p {
    font-size: 1.1em;
    line-height: 2; /* เพิ่มบรรทัดเพื่อความสบายตา */
    margin: 10px 0;
}

.contact-details i {
    color: var(--primary-red);
    margin-right: 15px;
    width: 20px; 
    text-align: center;
}

/* ส่วนรูปภาพ */
.image-box {
    flex: 1;
    display: flex;
    justify-content: center;
}

.image-box img {
    max-width: 100%;
    height: auto;
    /* จำลองการตัดรูปให้ดูมีสไตล์ตามภาพที่คุณอัปโหลด */
    /* รูปแบบการตัดนี้จะทำให้ดูโค้งมนที่มุม */
    clip-path: polygon(10% 0%, 100% 0%, 100% 90%, 90% 100%, 0% 100%, 0% 10%); 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 5px solid #fff; /* เพิ่มขอบสีขาวให้รูปภาพดูเด่นขึ้น */
}

/* === 3. ส่วนท้าย === */
footer {
    text-align: center;
    padding: 20px;
    margin-top: 50px;
    border-top: 1px solid var(--light-gray);
    font-size: 0.9em;
    color: #999;
}

/* === Responsive (สำหรับการแสดงผลบนมือถือ) === */
@media (max-width: 900px) {
    .content-section {
        flex-direction: column; /* เปลี่ยนเป็นเรียงซ้อนกันบนมือถือ */
        gap: 40px;
    }
    
    .company-info {
        order: 2; /* ให้ข้อมูลมาทีหลังรูปภาพ */
    }
    
    .image-box {
        order: 1; /* ให้รูปภาพขึ้นไปอยู่ข้างบน */
    }
    
    .company-info h2 {
        font-size: 2em;
    }
    
    .thai-name {
        font-size: 1.1em;
    }
}