@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;600&display=swap');

/* =========================================
   1. รีเซ็ตค่าพื้นฐาน
========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Kanit', sans-serif;
}

body {
    background-color: #f8fcfd;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden; /* ป้องกันไม่ให้เว็บเลื่อนซ้าย-ขวาได้ */
}
/* =========================================
   2. ส่วนหัว (Header & Menu) - ล็อคติดขอบบน
========================================= */
header {
    background-color: #0056b3;
    padding: 15px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    width: 100%;
    /* คำสั่งทำให้เมนูล็อคติดขอบบนตอนเลื่อนจอ */
    position: sticky; 
    top: 0;
    z-index: 1000; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* เพิ่มเงาให้ดูสวยขึ้นตอนเลื่อนทับเนื้อหา */
}
header .logo {
    display: flex;
    align-items: center; /* จัดให้รูปกับข้อความอยู่กึ่งกลางบรรทัดเดียวกัน */
    gap: 12px; /* ระยะห่างระหว่างรูปโลโก้กับตัวหนังสือ */
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    text-decoration: none; /* ลบเส้นใต้ออกเนื่องจากเราเปลี่ยนเป็นแท็กลิงก์ <a> */
}

/* กำหนดขนาดรูปโลโก้ไม่ให้ใหญ่ทะลุ Header */
header .logo img {
    height: 40px; /* สามารถเพิ่ม/ลดตัวเลขนี้ได้ ถ้ารูปโลโก้เล็กหรือใหญ่ไป */
    width: auto;
    object-fit: contain;
}

/* รองรับมือถือ: ถ้ารูปโลโก้ยาวไป อาจจะซ่อนตัวหนังสือ หรือลดขนาดลงได้ */
@media (max-width: 768px) {
    header .logo {
        font-size: 1.2rem; /* ลดขนาดตัวหนังสือในมือถือ */
        gap: 8px;
    }
    header .logo img {
        height: 30px; /* ลดขนาดโลโก้ในมือถือ */
    }
}

nav ul {
    list-style: none;
    display: flex;
    gap: 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
}

nav ul li a:hover {
    color: #00a8ff;
}

/* ซ่อนปุ่ม 3 ขีดไว้ในโหมดคอมพิวเตอร์ */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.menu-toggle .bar {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 4px 0;
    transition: all 0.3s ease;
}

/* (ปล่อยโค้ดส่วนที่ 3 ถึง 7 ไว้เหมือนเดิม) */
/* =========================================
   3. เลย์เอาต์หลัก (Main)
========================================= */
main {
    flex: 1;
    width: 100%;
    padding: 0; /* เอาขอบออกเพื่อให้แบนเนอร์ชิดขอบจอ */
}

/* จำกัดความกว้างของเนื้อหาด้านล่างให้อ่านง่าย ไม่ออกไปชิดขอบจอเกินไป */
section, .content-box, .grid-2, .grid-3 {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
}
/* --- ส่วน Hero Banner ที่ปรับปรุงใหม่เพื่อให้เต็มหน้าจอและเนื้อหาครบ --- */
.hero {
    position: relative;
    width: 100%;
    /* กำหนดความสูงของแบนเนอร์ (ความสูงขั้นต่ำ) - สามารถปรับตัวเลขนี้ได้ตามต้องการ */
    min-height: 500px; 
    
    /* สั่งให้รูปพื้นหลังขยายเต็มพื้นที่ 100% เสมอ */
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    
    /* จัดระยะห่างภายในให้สวยงาม */
    padding: 60px 20px;
    display: flex;
    align-items: center; /* จัดเนื้อหาให้อยู่กึ่งกลางในแนวตั้ง */
    justify-content: center; /* จัดเนื้อหาให้อยู่กึ่งกลางในแนวนอน */
    color: white;
    border-radius: 10px;
    margin-bottom: 30px;
    overflow: hidden; /* ป้องกันเนื้อหาล้น */
}

/* เลเยอร์สีฟ้ากึ่งโปร่งแสงบังทับรูปภาพพื้นหลัง (Overlay) */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* สีฟ้า I-TEM-HOME กึ่งโปร่งแสง (ปรับตัวเลข 0.65 เพื่อความโปร่ง) */
    background: rgba(0, 86, 179, 0.65); 
    z-index: 1; /* ให้อยู่ระหว่างรูปภาพพื้นหลังและเนื้อหา */
}

/* กล่องเนื้อหาที่ลอยอยู่ด้านบนสุด */
.hero-content {
    position: relative;
    z-index: 2; /* ให้อยู่ด้านบนสุดเสมอ */
    text-align: center; /* จัดตัวหนังสือให้อยู่กึ่งกลาง */
    max-width: 800px; /* จำกัดความกว้างไม่ให้ยืดเกินไปบนจอคอม */
}

/* ข้อความบอกชื่อหน้า (ตัวหนังสือใหญ่ตรงกลาง) */
.hero-content h1 {
    font-size: 4rem; /* ขนาดตัวหนังสือชื่อหน้า - สามารถเพิ่ม/ลดได้ */
    font-weight: 600;
    margin-bottom: 15px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5); /* เพิ่มเงาให้ตัวหนังสืออ่านง่ายขึ้น */
}

/* ข้อความสโลแกนรอง */
.hero-content p {
    font-size: 1.5rem;
    color: #e0f2fe;
    text-shadow: 0 1px 5px rgba(0,0,0,0.5);
    margin-bottom: 25px;
}

/* ปุ่ม Call-to-Action ภายใน Hero Content */
.hero-content .btn {
    margin-top: 0; /* ลบ margin top ตัวเดิมที่ใส่ไว้ใน .btn */
}

/* รองรับมือถือ: ปรับขนาดตัวหนังสือในจอเล็ก */
@media (max-width: 768px) {
    .hero {
        min-height: 350px; /* ลดความสูงของแบนเนอร์ในมือถือ */
    }
    .hero-content h1 {
        font-size: 2.5rem; /* ลดขนาดตัวหนังสือชื่อหน้าในมือถือ */
    }
    .hero-content p {
        font-size: 1.1rem;
    }
}
/* =========================================
   5. การจัดเลย์เอาต์ย่อย (Grid & Cards)
========================================= */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }

.card { 
    background: white; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
    text-align: center; 
    border-top: 4px solid #0056b3; 
}
.card img { max-width: 100%; border-radius: 5px; margin-bottom: 15px; }
.card h3 { color: #0056b3; margin-bottom: 10px; }

.content-box {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}
.section-title {
    color: #0056b3;
    margin-bottom: 20px;
    border-bottom: 2px solid #00a8ff;
    display: inline-block;
    padding-bottom: 5px;
}

/* =========================================
   6. ฟอร์มและปุ่มต่างๆ
========================================= */
.btn { display: inline-block; background-color: #ffffff; color: #0056b3; padding: 10px 25px; text-decoration: none; border-radius: 5px; font-weight: 600; margin-top: 20px; }
.btn-submit { background: #0056b3; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 1rem; }
.btn-submit:hover { background: #00a8ff; }

.timeline { border-left: 4px solid #00a8ff; padding-left: 20px; margin: 20px 0; }
.timeline-item { margin-bottom: 20px; position: relative; }
.timeline-item::before { content: ''; position: absolute; left: -28px; top: 0; width: 12px; height: 12px; background: #0056b3; border-radius: 50%; }

/* =========================================
   7. Footer
========================================= */
footer {
    background-color: #003d82;
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: auto;
}
/* =========================================
   8. โหมดมือถือ (Mobile Responsive) - เมนู 3 ขีด
========================================= */
@media (max-width: 768px) {
    header { 
        padding: 15px 20px; /* ลดระยะขอบซ้ายขวาในมือถือ */
    }
    
    /* แสดงปุ่ม 3 ขีด */
    .menu-toggle {
        display: flex;
    }

    /* จัดการกรอบเมนู (กางลงมาด้านล่าง) */
    nav {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #003d82; /* สีพื้นหลังตอนกางเมนู */
        box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    }

    /* ซ่อนรายการเมนูไว้ก่อน */
    nav ul { 
        display: none; 
        flex-direction: column; 
        width: 100%; 
        margin-top: 0; 
        gap: 0;
    }

    /* โชว์เมนูเมื่อกดปุ่ม (ถูกสั่งงานโดย Javascript) */
    nav ul.active {
        display: flex;
    }

    /* ตกแต่งปุ่มเมนูตอนกางออก */
    nav ul li {
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.1); /* เส้นคั่นเมนู */
    }

    nav ul li a {
        display: block;
        padding: 15px;
        font-size: 1rem;
    }

    /* เอฟเฟกต์เปลี่ยน 3 ขีดเป็นตัวกากบาท (X) เวลากด */
    .menu-toggle.is-active .bar:nth-child(1) { transform: translateY(11px) rotate(45deg); }
    .menu-toggle.is-active .bar:nth-child(2) { opacity: 0; }
    .menu-toggle.is-active .bar:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }
    
    /* การแสดงผลเนื้อหาอื่นๆ ในมือถือ (คงไว้เหมือนเดิม) */
    .hero { min-height: 250px; margin-bottom: 20px; }
    .hero h1 { font-size: 2.5rem; }
    .hero p { font-size: 1.1rem; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; gap: 15px; }
    .content-box { padding: 15px; }
}
/* =========================================
   9. Floating Contact Buttons (ปุ่มลอยติดต่อ)
========================================= */
.floating-contact {
    position: fixed;
    bottom: 20px; /* ระยะห่างจากขอบล่าง */
    right: 20px;  /* ระยะห่างจากขอบขวา */
    display: flex;
    flex-direction: column; /* เรียงปุ่มจากบนลงล่าง */
    gap: 15px; /* ระยะห่างระหว่างปุ่ม */
    z-index: 9999; /* ให้อยู่บนสุดเสมอ ไม่โดนรูปอื่นบัง */
}

.float-btn {
    width: 55px;
    height: 55px;
    border-radius: 50%; /* ทำให้ปุ่มเป็นวงกลม */
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 28px; /* ขนาดไอคอน */
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* ใส่เงาให้ดูมีมิติ */
    transition: all 0.3s ease; /* เอฟเฟกต์ตอนเอาเมาส์ชี้ */
}

/* สีพื้นหลังของแต่ละปุ่ม ตามแบรนด์ */
.btn-fb { background-color: #1877F2; }
.btn-line { background-color: #00B900; }
.btn-tel { background-color: #ff3b30; } /* ใช้สีแดงหรือเขียวก็ได้ให้เด่นๆ */

/* เอฟเฟกต์เวลาเอาเมาส์ชี้ (ขยายใหญ่ขึ้นนิดนึง) */
.float-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 14px rgba(0,0,0,0.4);
    color: white;
}

/* ทำให้ปุ่มมีแอนิเมชันเด้งเบาๆ เพื่อเรียกร้องความสนใจ */
.float-btn {
    animation: bounce 2s infinite;
}
.btn-line { animation-delay: 0.2s; }
.btn-tel { animation-delay: 0.4s; }

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-8px); }
    60% { transform: translateY(-4px); }
}

/* ปรับขนาดให้เล็กลงนิดหน่อยเมื่อดูบนมือถือ */
@media (max-width: 768px) {
    .floating-contact {
        bottom: 15px;
        right: 15px;
        gap: 10px;
    }
    .float-btn {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}
.cookie-banner {
    position: fixed; bottom: 20px; left: 20px; right: 20px;
    background: #fff; padding: 20px; border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: none; z-index: 9999; border-left: 5px solid #00a8ff;
}
.cookie-banner button {
    background: #003d82; color: #fff; border: none;
    padding: 10px 20px; border-radius: 5px; cursor: pointer;
}