/* =========================================
   การตั้งค่าพื้นฐาน
   ========================================= */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Athiti', sans-serif;
}

body {
    background-color: #030a16; /* Base color fallback */
    color: #ffffff;
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
    overflow-x: hidden; /* ป้องกันแถบเลื่อนแนวนอน */
}

/* =========================================
   แก้ไข Header: "Liquid Glass" Effect
   ========================================= */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    position: fixed; /* ใช้ fixed เพื่อให้ blended กับรูปภาพตลอดเวลา */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); /* เส้นขอบบางๆ */
}

/* คลาสสำหรับเอฟเฟกต์ liquid glass */
.glass-effect {
    background-color: rgba(3, 10, 22, 0.1); /* สีน้ำเงินเข้มโปร่งแสงมาก */
    backdrop-filter: blur(10px); /* เอฟเฟกต์เบลอ */
    -webkit-backdrop-filter: blur(10px); /* สำหรับ Safari */
}

.header-logo {
    max-height: 50px;
    width: auto;
}

.nav-links a {
    color: #cccccc;
    text-decoration: none;
    margin: 0 15px;
    font-size: 22px;
    transition: color 0.3s ease;
}

.nav-links a:hover, .nav-links a.active {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.header-link {
    color: #cccccc;
}

.header-signin {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid #ffffff;
    padding: 8px 18px;
    border-radius: 4px;
    cursor: pointer;
}

.header-signin:hover {
    background-color: #ffffff;
    color: #030a16;
}

/* รูปแบบของเส้น 3 ขีด */
.menu-toggle .bar {
    width: 30px;
    height: 2px;
    background-color: #ffffff;
    transition: all 0.3s ease-in-out;
}

/* =========================================
   แก้ไข Hero Section: รูปพื้นหลังแผ่เต็มหน้าจอ (Group-IB Style)
   ========================================= */
   .hero-section {
    flex-grow: 1;
    background-color: #000000; 
    /* เอา position: relative ออก เพื่อแก้บัคการทับซ้อน */
}

.hero-full-background {
    background-size: cover; 
    background-position: center right; 
    background-repeat: no-repeat;
    background-attachment: fixed; 
}

/* Overlay Gradient - แก้บัคโดยให้กล่องสูง 100vh แทนการใช้ absolute */
.hero-overlay-gradient {
    min-height: 100vh; 
    width: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0) 70%);
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 120px 50px 60px 50px; /* เว้นระยะด้านบน 120px เพื่อหลบ Header เสมอ */
}

.hero-container {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto; /* จัดให้อยู่กึ่งกลางหน้าจอ */
}

.hero-text {
    flex: 1;
    max-width: 600px; 
    text-align: left;
}

.hero-text .subtitle {
    display: block;
    font-size: 72px; /* เพิ่มจากเดิม 16px เป็น 30px (ปรับตัวเลขได้ตามต้องการ) */
    font-weight: 500;
    margin-bottom: 20px;
    color: #cccccc;
    letter-spacing: 1px;
}

.hero-text h1 {
    font-size: 64px; 
    font-weight: 600;
    line-height: 1.1;
    margin-bottom: 30px;
    color: #ffffff;
}

.hero-text p {
    font-size: 22px;
    font-weight: 300;
    line-height: 1.6;
    margin-bottom: 40px;
    color: #b3b3b3;
}

.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: flex-start;
}

.btn { padding: 12px 28px; border-radius: 6px; font-size: 20px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.3s ease; }
.btn-primary { background-color: #0b45d1; color: #ffffff; border: 2px solid #0b45d1; }
.btn-primary:hover { background-color: #1754eb; border-color: #1754eb; box-shadow: 0 0 20px rgba(11, 69, 209, 0.5); transform: translateY(-3px); }
.btn-outline { background-color: transparent; color: #ffffff; border: 2px solid #ffffff; }
.btn-outline:hover { background-color: #ffffff; color: #030a16; transform: translateY(-3px); }

/* =========================================
   แก้ไข Footer (Cyber Group) - เหมือนเดิม
   ========================================= */
.site-footer {
    background-color: #000000;
}

.footer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto;
    gap: 80px; 
}

.footer-logo {
    max-width: 300px;
    height: auto;
}

.footer-contact-box {
    text-align: left;
    max-width: 600px;
}

.footer-contact-box h3 {
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 10px;
}

.footer-contact-box .thai-heading {
    margin-top: 25px; 
}

.footer-contact-box p {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.6;
    color: #e0e0e0;
}

.footer-bottom {
    background-color: #011024; 
    text-align: center;
    padding: 15px 0;
    font-size: 14px;
    font-weight: 300;
    color: #cccccc;
}

/* =========================================
   สไตล์สำหรับหน้าเพจอื่นๆ (เช่น Services, Company)
   ========================================= */
   .page-content {
    flex-grow: 1;
    padding-top: 120px; /* เว้นระยะจาก Header */
    padding-bottom: 80px;
    background-color: #000000; /* พื้นหลังสีดำ */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.page-header {
    text-align: center;
    max-width: 800px;
    margin-bottom: 60px;
    padding: 0 20px;
}

.page-header h1 {
    font-size: 56px;
    color: #ffffff;
    margin-bottom: 20px;
}

.page-header p {
    font-size: 20px;
    color: #b3b3b3;
    line-height: 1.6;
}

/* --- ระบบ Grid สำหรับ Service Cards --- */
.services-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* แบ่งเป็น 3 คอลัมน์บนจอคอม */
    gap: 30px;
    max-width: 1400px;
    width: 100%;
    padding: 0 50px;
}

.service-card {
    background-color: #050a14; /* สีกรมท่าเข้มมากๆ */
    border: 1px solid #1a2a40;
    border-radius: 12px;
    padding: 40px 30px;
    transition: all 0.3s ease;
    text-align: left;
}

.service-card:hover {
    transform: translateY(-10px); /* ลอยขึ้นตอนเอาเมาส์ชี้ */
    border-color: #0b45d1;
    box-shadow: 0 10px 30px rgba(11, 69, 209, 0.2); /* เรืองแสงสีน้ำเงิน */
}

.service-icon {
    font-size: 40px;
    margin-bottom: 20px;
}

.service-card h3 {
    font-size: 24px;
    color: #ffffff;
    margin-bottom: 15px;
}

.service-card p {
    font-size: 16px;
    color: #cccccc;
    line-height: 1.6;
}

/* =========================================
   สไตล์สำหรับหน้า Company (แบบมีพื้นหลัง Cyble Style)
   ========================================= */
   .company-bg-section {
    width: 100%;
    min-height: 100vh; /* ให้ความสูงเต็มจออย่างน้อย 1 หน้าจอ */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* ทำให้รูปภาพล็อคอยู่กับที่เวลาเลื่อนเมาส์ลง (Parallax Effect) */
    position: relative;
    background-color: #000000; /* สีพื้นหลังสำรองระหว่างรอรูปโหลด */
}

.company-overlay {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: rgba(0, 0, 0, 0.75); /* ความมืดของแผ่นฟิล์ม (0.75 คือมืด 75%) */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 140px 20px 80px 20px; /* เว้นระยะด้านบน 140px หลบแถบเมนู */
}

.about-container {
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    text-align: center; /* จัดข้อความให้อยู่กึ่งกลางตามภาพ */
}

.about-text-section {
    margin-bottom: 20px;
}

.about-text-section h2 {
    font-size: 56px;
    color: #ffffff;
    margin-bottom: 30px;
    font-weight: 600;
    letter-spacing: 1px;
}

.about-text-section p {
    font-size: 20px;
    color: #cccccc; /* สีเทาอ่อนให้อ่านสบายตาบนพื้นดำ */
    line-height: 1.8;
    margin-bottom: 25px;
    text-align: center;
}

/* เส้นคั่นระหว่างภาษา (Gradient Fade) */
.language-divider {
    border: 0;
    height: 1px;
    /* ไล่สีจาก โปร่งใส -> ขาวขุ่นๆ -> โปร่งใส */
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.4), rgba(255,255,255,0));
    margin: 60px auto; /* ระยะห่างบนล่าง 60px */
    width: 70%; /* ความยาวของเส้น */
}

.neon-blue-text {
    /* สีแกนกลางของตัวหนังสือ (ปรับให้เป็นสีขาวอมฟ้าที่หม่นลงนิดนึง) */
    color: #cce0ff !important; 
    
    /* สร้างรัศมีเรืองแสงไล่ระดับ (น้ำเงินกลาง -> น้ำเงินเข้ม) */
    text-shadow: 
        0 0 10px rgba(0, 85, 255, 0.8),   /* น้ำเงินสว่างชั้นใน */
        0 0 20px rgba(0, 51, 204, 0.7),   /* น้ำเงินเข้มชั้นกลาง */
        0 0 40px rgba(0, 26, 153, 0.6) !important; /* น้ำเงินเข้มมากลึกๆ ชั้นนอก */
        
    text-transform: uppercase; 
    font-weight: 600;
}

/* =========================================
   สไตล์สำหรับหน้า Contacts
   ========================================= */
   .contact-container {
    display: flex;
    gap: 40px;
    max-width: 1200px;
    width: 100%;
    padding: 0 50px;
    margin: 0 auto;
}

/* กล่องข้อมูลที่อยู่ (ซ้าย) */
.contact-info {
    flex: 1;
    background-color: #050a14;
    border: 1px solid #1a2a40;
    border-radius: 12px;
    padding: 50px 40px;
    text-align: left;
}

.contact-info h3 {
    font-size: 32px;
    color: #ffffff;
    margin-bottom: 30px;
    border-bottom: 2px solid #0b45d1;
    display: inline-block;
    padding-bottom: 10px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.info-item .icon {
    font-size: 24px;
    margin-top: 2px;
}

.info-item p {
    font-size: 18px;
    color: #cccccc;
    line-height: 1.6;
    margin: 0;
}

/* กล่องแผนที่ (ขวา) */
.contact-map-box {
    flex: 1.2;
    background-color: #050a14;
    border: 1px solid #1a2a40;
    border-radius: 12px;
    padding: 50px 40px;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.contact-map-box h3 {
    font-size: 32px;
    color: #ffffff;
    margin-bottom: 30px;
}

/* โครงสร้างสำหรับการแสดงแผนที่ให้พอดีกล่อง */
.map-wrapper {
    width: 100%;
    height: 350px; /* ⬅️ แก้จาก min-height เป็น height กำหนดตายตัว */
    border-radius: 8px;
    overflow: hidden; 
    border: 1px solid #1a2a40;
}

.map-wrapper iframe {
    width: 100%;
    height: 100%; /* ตอนนี้มันจะรู้แล้วว่าต้องสูง 100% ของ 350px */
    display: block;
    border: none;
    /* เปลี่ยนสีแผนที่ให้เป็นโทนมืดเข้ากับเว็บ (Dark Mode Filter) */
    filter: invert(90%) hue-rotate(180deg) brightness(95%) contrast(85%); 
}
/* =========================================
   สไตล์สำหรับลิงก์ โทรศัพท์ & อีเมล (Action Links)
   ========================================= */
   .action-link {
    color: #cccccc; /* สีตัวหนังสือให้กลืนกับของเดิม */
    text-decoration: none; /* เอาเส้นใต้ออก */
    transition: color 0.3s ease; /* แอนิเมชันตอนเอาเมาส์ชี้ */
}

.action-link:hover {
    color: #0b45d1; /* ตอนเอาเมาส์ชี้ให้เปลี่ยนเป็นสีน้ำเงินของแบรนด์ */
    text-decoration: underline; /* ให้มีเส้นใต้ขึ้นมานิดนึงเพื่อให้รู้ว่ากดได้ */
}

/* =========================================
   Responsive Design (ปรับปรุงเลย์เอาต์ iPad/มือถือ)
   ========================================= */

/* สำหรับ iPad/Tablet (แนวตั้งและแนวนอนบางขนาด) */
@media screen and (max-width: 1024px) {
    /* ปรับ Header บน iPad */
    .navbar {
        padding: 15px 20px;
    }
    
    .nav-links a {
        margin: 0 8px;
        font-size: 14px;
    }

    .header-actions {
        display: none; /* ซ่อนปุ่ม Talk to Sales เพื่อประหยัดพื้นที่ */
    }

    /* === หัวใจสำคัญ: ปรับ Hero บน iPad ให้เหมือนตัวอย่าง === */
    .hero-overlay {
        padding: 60px 30px; /* ลดระยะ padding */
    }

    .hero-container {
        /* ไม่ต้องใช้ `flex-direction: column-reverse` อีกแล้ว เพราะเราเอา hero-image ออกไปแล้ว */
        justify-content: flex-start; /* จัดเนื้อหาข้อความทั้งหมดชิดซ้าย (สำคัญมาก) */
        padding-top: 50px; /* เว้นระยะจาก Header */
    }

    .hero-text {
        max-width: 100%; /* ให้ข้อความแผ่เต็มความกว้าง */
        text-align: left; /* จัดข้อความชิดซ้าย (สำคัญมาก) */
    }
    
    .hero-text h1 {
        font-size: 40px; /* ลดขนาดหัวข้อ */
        text-align: left; /* จัดข้อความชิดซ้าย (สำคัญมาก) */
    }
    
    .hero-text p {
        text-align: left; /* จัดข้อความชิดซ้าย (สำคัญมาก) */
    }
    
    .hero-buttons {
        justify-content: flex-start; /* จัดปุ่มชิดซ้าย (สำคัญมาก) */
        flex-direction: row; /* ปุ่มเรียงต่อกันเหมือนเดิม */
    }

    .btn {
        padding: 10px 20px; /* ลดขนาดปุ่ม */
        font-size: 14px;
    }

    .services-container {
        grid-template-columns: repeat(2, 1fr); /* ไอแพดให้แสดง 2 คอลัมน์ */
    }
}
/* =========================================
   Effect ตัวหนังสือสีทองเรืองแสง (Laser Glow)
   ========================================= */
   .gold-glow-text {
    /* สีแกนกลางของตัวหนังสือ (เหลืองอ่อนสว่างเกือบขาว) */
    color: #fff3c4 !important; 
    
    /* สร้างรัศมีเรืองแสงไล่ระดับ (ทอง -> ส้ม) */
    text-shadow: 
        0 0 10px rgba(255, 170, 0, 0.8),
        0 0 20px rgba(255, 136, 0, 0.6),
        0 0 40px rgba(255, 136, 0, 0.4) !important;
        
    text-transform: uppercase; /* บังคับให้เป็นตัวพิมพ์ใหญ่ทั้งหมดเหมือนในภาพ */
    font-weight: 600;
}

/* =========================================
   สไตล์สำหรับปุ่มติดต่อ (Contact Action Buttons)
   ========================================= */
   .contact-action-buttons {
    display: flex;
    flex-direction: column; /* ให้ปุ่มเรียงซ้อนกันบน-ล่าง */
    gap: 15px; /* ระยะห่างระหว่างปุ่ม */
    margin-top: 40px; 
    padding-top: 30px;
    border-top: 1px solid #1a2a40; /* สร้างเส้นคั่นบางๆ แยกปุ่มออกจากที่อยู่ */
}

.contact-btn {
    display: flex;
    align-items: center;
    justify-content: center; /* จัดให้ข้อความและไอคอนอยู่กึ่งกลางปุ่ม */
    width: 100%; /* บังคับให้ปุ่มกว้างเต็มกล่อง */
    padding: 16px 20px;
    font-size: 18px;
    border-radius: 8px; /* มุมปุ่มเป็นสี่เหลี่ยมมนๆ */
}

.contact-btn .btn-icon {
    font-size: 22px; /* ขนาดไอคอนในปุ่ม */
    margin-right: 10px; /* เว้นระยะห่างไอคอนกับข้อความ */
}

/* สำหรับมือถือ */
/* =========================================
   Responsive Design (ปรับปรุงเลย์เอาต์ iPad/มือถือ & แก้บัค)
   ========================================= */

/* สำหรับ iPad และแท็บเล็ต */
@media screen and (max-width: 1024px) {
    .hero-overlay-gradient {
        padding: 120px 30px 50px 30px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 1) 100%);
        align-items: flex-end; 
    }
    
    .hero-text h1 {
        font-size: 48px;
    }
}

/* สำหรับมือถือ (หน้าจอเล็กกว่า 768px) */
@media screen and (max-width: 768px) {
    /* ปรับ Header มือถือให้โชว์เมนูเลย และคงความ Liquid Glass */
    .navbar {
        position: fixed;
        width: 100%;
        flex-direction: column; /* ให้โลโก้อยู่บน เมนูอยู่ล่าง */
        justify-content: center;
        align-items: center;
        padding: 15px 10px;
        background-color: rgba(3, 10, 22, 0.3) !important; /* โปร่งแสง Liquid Glass */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        gap: 15px;
    }

    /* จัดเรียงเมนูเป็นแนวนอนเหมือนจอคอม */
    .nav-links {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap; /* ถ้าจอมือถือเล็กมากให้ปัดบรรทัดได้ */
        justify-content: center;
        gap: 15px;
    }

    .nav-links a {
        margin: 0;
        font-size: 14px;
    }

    /* ปรับ Hero Section ให้ดันเนื้อหาหลบ Header */
    .hero-overlay-gradient {
        padding: 160px 30px 40px 30px; 
        align-items: flex-end; /* ดันข้อความลงล่างนิดนึง */
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 1) 100%);
    }

    /* === บังคับให้ข้อความชิดซ้ายทั้งหมด === */
    .hero-container {
        justify-content: flex-start;
    }

    .hero-text { text-align: left; max-width: 100%; }
    .hero-text .subtitle { text-align: left; }
    .hero-text h1 { font-size: 38px; text-align: left; }
    .hero-text p { text-align: left; font-size: 16px; }
    
    /* จัดปุ่มให้ชิดซ้ายเรียงต่อกัน */
    .hero-buttons {
        flex-direction: row;
        flex-wrap: wrap; /* ถ้าปุ่มยาวให้ตกลงมาอีกบรรทัด */
        justify-content: flex-start;
        gap: 15px;
    }
    
    .btn { 
        width: auto; /* ให้ปุ่มขนาดพอดีกับข้อความข้างใน ไม่ยืดเต็มจอ */
        text-align: center; 
        font-size: 14px; /* ลดขนาดอักษรในปุ่มนิดนึงเพื่อประหยัดพื้นที่ */
        padding: 10px 20px;
    }

    /* โลโก้ Footer ขนาดเล็กพอดีมือถือ */
    .footer-container { gap: 30px; }
    .footer-logo { max-width: 150px; }
    .services-container {
        grid-template-columns: 1fr; /* มือถือให้แสดง 1 คอลัมน์ (เรียงลงมา) */
        padding: 20px;
    }
    .page-header h1 {
        font-size: 40px;
    }
    /* สำหรับหน้า Company บนมือถือ */
    .about-container { padding: 0 20px; }
    .about-text h2 { font-size: 36px; text-align: left; }
    .about-text p { font-size: 18px; text-align: left; }
    
    .mv-container {
        flex-direction: column; /* เปลี่ยนการ์ดให้เรียงบน-ล่าง */
        padding: 0 20px;
        gap: 20px;
    }
    .mv-card { padding: 30px 20px; }
    /* สำหรับหน้า Company บนมือถือ */
    .company-overlay {
        padding: 160px 20px 60px 20px;
    }
    
    .about-text-section h2 { 
        font-size: 38px; 
        text-align: center; /* หัวข้อยังคงอยู่กึ่งกลาง */
    }
    
    .about-text-section p { 
        font-size: 16px; 
        text-align: left; /* เนื้อหาย่อหน้าให้ชิดซ้ายเพื่อให้อ่านง่ายบนจอมือถือแคบๆ */
    }
    
    .language-divider {
        width: 90%;
        margin: 40px auto;
    }
    /* สำหรับหน้า Contacts บนมือถือ */
    .contact-container {
        flex-direction: column;
        padding: 0 20px;
        gap: 20px;
    }
    .contact-info, .contact-map-box {
        padding: 40px 20px;
    }
    .contact-info h3, .contact-map-box h3 {
        font-size: 28px;
    }
    .map-wrapper {
        height: 300px; /* ⬅️ แก้จาก min-height เป็น height ด้วยเช่นกัน */
    }
    /* === ซ่อนโลโก้ Footer บนหน้าจอมือถือ === */
    .footer-logo-box {
        display: none;
    }
    /* =======================================
       ส่วนแก้ไขบัคบนมือถือ (iPhone 15 ฯลฯ)
       ======================================= */
       
    /* ข้อ 1: บังคับชื่อ CYBER GROUP หน้าแรกให้อยู่บรรทัดเดียว */
    .hero-text .subtitle, 
    .neon-blue-text, 
    .gold-glow-text {
        font-size: 32px !important; /* ปรับขนาดให้เล็กลง */
        white-space: nowrap; /* บังคับห้ามตัดขึ้นบรรทัดใหม่ */
    }

    /* ข้อ 2: ปรับขนาดชื่อบริษัทภาษาไทยในหน้า Company ไม่ให้ตกบรรทัด */
    .about-text-section h2 {
        font-size: 28px !important; /* ลดขนาดหัวข้อลงนิดนึง */
    }

    /* ข้อ 3: เพิ่มระยะห่างหัวข้อ Contact Us ไม่ให้ติด Header ดันเนื้อหาลงมา */
    .page-content {
        padding-top: 140px !important; 
    }
}