/* การตั้งค่าพื้นฐาน */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Kanit', sans-serif; /* Font หลักสำหรับเนื้อหาทั่วไป */
    background-color: #0A0A14; /* สีพื้นหลังหลักของหน้า (Dark Blue/Purple) */
    color: #E6F1FF; /* สี Text หลัก (Off-white) */
    overflow-x: hidden; /* ป้องกัน Horizontal Scroll ที่ไม่ต้องการ */
}

/* --- เฟส 1: หน้าจอสั่งการหลัก (Hero Section) --- */
.hero {
    position: relative; /* เพื่อให้ .hero-content และ .hero-video-background อ้างอิงตำแหน่งได้ */
    height: 100vh; /* เต็มความสูงของ Viewport */
    display: flex;
    align-items: center; /* จัดเนื้อหาให้อยู่กึ่งกลางแนวตั้ง */
    justify-content: center; /* จัดเนื้อหาให้อยู่กึ่งกลางแนวนอน */
    text-align: center;
    overflow: hidden; /* ป้องกันเนื้อหาล้นออกนอก Section */
}

.hero-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* ให้อยู่หลังสุด */
    /* Placeholder สำหรับ Background - อาจเป็นสี, รูปภาพ หรือวิดีโอ */
    background-color: #05050A; /* สีพื้นหลังเข้มกว่า body เล็กน้อย ถ้าไม่มีวิดีโอ */
    /* ถ้ามีวิดีโอ:
    video#bgVideo {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    */
}

.hero-video-background .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(10, 10, 20, 0.8) 0%, rgba(10, 10, 20, 0.2) 60%, transparent 100%);
    /* Overlay แบบ Gradient เพื่อให้ Text ด้านล่างอ่านง่ายขึ้น */
}

.hero-content {
    position: relative; /* เพื่อให้ z-index ทำงานกับ .hero-video-background */
    z-index: 1;
    padding: 20px;
    max-width: 800px; /* จำกัดความกว้างของเนื้อหา */
}

.hero-headline {
    font-family: 'Kanit', sans-serif; /* Font สำหรับ Headline */
    font-size: 3.5rem; /* ขนาด Font ใหญ่ (ปรับตามความเหมาะสม) */
    font-weight: 700;
    color: #00FFFF; /* สี Electric Cyan */
    text-transform: uppercase;
    line-height: 1.2;
    margin-bottom: 20px;
    /* อาจเพิ่ม Text-shadow หรือ Glow effect */
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5),
                 0 0 20px rgba(0, 255, 255, 0.3);
}

.hero-subheadline {
    font-size: 1.25rem;
    font-weight: 300; /* น้ำหนักเบาลง */
    color: #E6F1FF; /* Off-white */
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 600px; /* ทำให้ subheadline ไม่กว้างจนเกินไป */
    margin-left: auto;
    margin-right: auto;
}

.cta-button {
    display: inline-block;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px; /* อาจปรับเป็นมุมตัด (Chamfered) ด้วย clip-path หรือ SVG */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.primary-cta {
    background-color: #00FFFF; /* Electric Cyan */
    color: #0A0A14; /* Dark Blue/Purple (สี Text บนปุ่ม) */
    padding: 15px 35px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 1px solid #00FFFF; /* Border สีเดียวกับพื้นหลัง */
    /* มุมตัดด้วย CSS (ตัวอย่างง่ายๆ) */
    clip-path: polygon(
        0% 8px, /* top left (offset for chamfer) */
        8px 0%, /* top left (offset for chamfer) */
        calc(100% - 8px) 0%, /* top right (offset for chamfer) */
        100% 8px, /* top right (offset for chamfer) */
        100% calc(100% - 8px), /* bottom right (offset for chamfer) */
        calc(100% - 8px) 100%, /* bottom right (offset for chamfer) */
        8px 100%, /* bottom left (offset for chamfer) */
        0% calc(100% - 8px) /* bottom left (offset for chamfer) */
    );
}

.primary-cta:hover {
    background-color: #8A2BE2; /* Quantum Purple */
    color: #E6F1FF;
    border-color: #8A2BE2;
    transform: translateY(-2px); /* ยกปุ่มขึ้นเล็กน้อย */
    box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4);
}

.secondary-cta {
    display: block; /* ให้ขึ้นบรรทัดใหม่ */
    margin-top: 25px;
    font-family: 'Share Tech Mono', monospace; /* Font สไตล์ Tech */
    color: #A0A0CC; /* Light Lavender/Grey */
    font-size: 1rem;
    text-decoration: none;
}

.secondary-cta:hover {
    color: #00FFFF; /* Electric Cyan */
    text-decoration: underline;
}

/* ตั้งค่า Font-face (ถ้าไม่ได้ใช้ Google Fonts และมีไฟล์ font เอง) */
/*
@font-face {
    font-family: 'Kanit';
    src: url('path/to/Kanit-bold.woff2') format('woff2'),
         url('path/to/Kanit-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Rajdhani';
    src: url('path/to/rajdhani-regular.woff2') format('woff2'),
         url('path/to/rajdhani-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
 ... (เพิ่ม font อื่นๆ และน้ำหนักต่างๆ)
*/

/* Media Queries สำหรับ Responsive Design เบื้องต้น */
@media (max-width: 768px) {
    .hero-headline {
        font-size: 2.5rem; /* ลดขนาด Headline บนจอเล็ก */
    }
    .hero-subheadline {
        font-size: 1rem; /* ลดขนาด Sub-headline */
    }
    .primary-cta {
        padding: 12px 25px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .hero-headline {
        font-size: 2rem;
    }
}
/* --- เฟส 2: คลังแสง / เมทริกซ์ขีดความสามารถ (Service Showcase) --- */
.services-showcase {
    padding: 80px 0; /* ระยะห่างบนล่างของ Section */
    background-color: #10101E; /* สีพื้นหลังเข้มกว่า Hero เล็กน้อย */
    border-top: 1px solid #8A2BE2; /* เส้นแบ่ง Quantum Purple */
}

.container { /* Utility class สำหรับจัดกึ่งกลางเนื้อหาและจำกัดความกว้าง */
    width: 90%;
    max-width: 1200px; /* ความกว้างสูงสุดของ Container */
    margin: 0 auto; /* จัดกึ่งกลาง */
    padding: 0 15px; /* ระยะห่างด้านข้างเล็กน้อย */
}

.section-headline {
    font-family: 'Kanit', sans-serif;
    font-size: 2.5rem;
    color: #E6F1FF; /* Off-white */
    text-align: center;
    margin-bottom: 60px;
    text-transform: uppercase;
    position: relative; /* สำหรับ Pseudo-element ตกแต่ง */
}

.section-headline::before { /* ตัวอักษร // ด้านหน้า */
    content: "// ";
    color: #00FFFF; /* Electric Cyan */
}

.section-headline::after { /* เส้นขีดใต้ */
    content: "";
    display: block;
    width: 100px; /* ความยาวของเส้น */
    height: 3px;
    background-color: #00FFFF; /* Electric Cyan */
    margin: 15px auto 0; /* จัดกึ่งกลางใต้ Headline */
}

.services-grid {
    display: grid;
    /* บน Desktop จะมี 3 คอลัมน์ */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive Grid */
    gap: 30px; /* ระยะห่างระหว่างการ์ด */
}

.service-card {
    background-color: #1A1A2E; /* สีพื้นหลังการ์ด (Darker than section bg) */
    border: 1px solid #8A2BE2; /* Quantum Purple border */
    border-radius: 8px; /* มุมมนเล็กน้อย */
    padding: 30px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px); /* ยกการ์ดขึ้นเมื่อ Hover */
    box-shadow: 0 10px 20px rgba(138, 43, 226, 0.3); /* เงา Quantum Purple */
}

.service-icon-area {
    margin-bottom: 20px;
    height: 80px; /* กำหนดความสูงให้ Icon Area */
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-icon {
    max-width: 80px; /* ขนาด Icon สูงสุด */
    max-height: 80px;
    /* ถ้าเป็น SVG, สามารถใช้ fill: #00FFFF; เพื่อกำหนดสี */
}

.service-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700; /* Bold */
    font-size: 1.5rem;
    color: #E6F1FF; /* Off-white */
    margin-bottom: 15px;
    text-transform: uppercase;
}

.service-description {
    font-size: 1rem;
    color: #BCCCDC; /* Light Grey */
    line-height: 1.6;
    margin-bottom: 25px;
    min-height: 80px; /* กำหนดความสูงขั้นต่ำเพื่อให้การ์ดดูสมดุล */
}

.service-link {
    font-family: 'Share Tech Mono', monospace;
    color: #00FFFF; /* Electric Cyan */
    text-decoration: none;
    font-size: 0.9rem;
    padding: 8px 15px;
    border: 1px solid transparent; /* เตรียมไว้สำหรับ Hover effect */
    border-radius: 4px;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.service-link:hover {
    color: #FFFFFF;
    border-color: #00FFFF; /* แสดง Border เมื่อ Hover */
    text-decoration: none; /* เอาขีดเส้นใต้ออกถ้าไม่ต้องการ */
}


/* การปรับปรุง Responsive สำหรับ Service Grid */
@media (max-width: 992px) {
    .services-grid {
        /* บน Tablet อาจจะแสดง 2 คอลัมน์ */
        /* grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); */
        /* หรือใช้ค่าเดิมก็ได้ แล้วมันจะปรับเป็น 2 คอลัมน์เองถ้าพื้นที่พอ */
    }
    .section-headline {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .services-grid {
        /* บนมือถือ แสดง 1 คอลัมน์ */
        grid-template-columns: 1fr;
    }
    .section-headline {
        font-size: 2rem;
    }
    .service-card {
        padding: 25px;
    }
    .service-title {
        font-size: 1.3rem;
    }
    .service-description {
        min-height: auto; /* ยกเลิก min-height บนมือถือ */
    }
}
/* --- เฟส 3: แก่นหลัก / ความได้เปรียบดุจดวงดาวของเรา (Why Choose Us) --- */
.why-choose-us {
    padding: 80px 0;
    background-color: #0A0A14; /* กลับไปใช้สีพื้นหลังหลักที่เข้มขึ้น */
    /* อาจเพิ่ม border-top หรือ background-image ที่ดู techy เบาๆ */
    border-top: 1px solid #1A1A2E; /* เส้นแบ่งบางๆ */
}

/* .section-headline ถูกใช้ร่วมกันกับส่วน Service Showcase */

.advantages-grid {
    display: grid;
    /* สำหรับ Desktop แสดง 2 คอลัมน์ */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px; /* ระยะห่างมากขึ้นเล็กน้อย */
}

.advantage-item {
    display: flex; /* จัด Icon และ Text ให้อยู่ในแถวเดียวกัน (สำหรับ Layout แบบ Icon ด้านซ้าย Text ด้านขวา) */
    /* หรือจะทำเป็น flex-direction: column; ถ้าอยากให้ Icon อยู่บน Text */
    flex-direction: column; /* เปลี่ยนเป็น Icon อยู่บน Text เพื่อให้เข้ากับดีไซน์ดั้งเดิม */
    align-items: center; /* จัดกึ่งกลางถ้าเป็น column */
    text-align: center; /* จัด Text ให้อยู่กึ่งกลาง */
    padding: 20px;
    /* background-color: rgba(26, 26, 46, 0.5); /* พื้นหลังโปร่งแสงเล็กน้อย */
    /* border: 1px solid #2A2A3E; */
    /* border-radius: 6px; */
    /* transition: background-color 0.3s ease; */
}

/* .advantage-item:hover { */
    /* background-color: rgba(42, 42, 62, 0.7); */
/* } */

.advantage-icon-wrapper {
    width: 70px; /* ขนาด Wrapper ของ Icon */
    height: 70px;
    background-color: rgba(0, 255, 255, 0.1); /* พื้นหลัง Icon โปร่งแสงสี Cyan */
    border: 1px solid #00FFFF; /* ขอบ Icon สี Cyan */
    border-radius: 50%; /* ทำให้เป็นวงกลม */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.advantage-item:hover .advantage-icon-wrapper {
    background-color: rgba(0, 255, 255, 0.2);
    transform: scale(1.1); /* ขยาย Icon Wrapper เล็กน้อยเมื่อ Hover ที่ Item */
}

.advantage-icon {
    width: 32px; /* ขนาดของ SVG Icon */
    height: 32px;
    color: #00FFFF; /* สีของ SVG Icon (Electric Cyan) */
    /* ถ้าใช้ fill="currentColor" ใน SVG, สีนี้จะถูกนำไปใช้ */
}

.advantage-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: #E6F1FF; /* Off-white */
    margin-bottom: 10px;
    text-transform: uppercase;
}

.advantage-description {
    font-size: 0.95rem;
    color: #BCCCDC; /* Light Grey */
    line-height: 1.7;
    max-width: 350px; /* จำกัดความกว้างของคำอธิบาย */
    margin-left: auto;
    margin-right: auto;
}

/* Responsive adjustments for advantages grid */
@media (max-width: 992px) {
    .advantages-grid {
        /* อาจจะยังคง 2 คอลัมน์ หรือปรับเป็น 1 คอลัมน์ถ้าเนื้อหาแน่นไป */
        /* grid-template-columns: 1fr; */
    }
    .advantage-title {
        font-size: 1.2rem;
    }
}

@media (max-width: 768px) {
    .advantages-grid {
        grid-template-columns: 1fr; /* 1 คอลัมน์บนมือถือ */
        gap: 30px;
    }
    .advantage-item {
        padding: 15px;
    }
     .advantage-title {
        font-size: 1.15rem;
    }
    .advantage-description {
        font-size: 0.9rem;
    }
}
/* --- เฟส 4: คลังภารกิจ / เส้นทางที่พิสูจน์แล้ว (Portfolio/Case Studies) --- */
.portfolio-section {
    padding: 80px 0;
    background-color: #10101E; /* สีพื้นหลังเดียวกับ Service Showcase */
    border-top: 1px solid #2A2A3E; /* เส้นแบ่งบางๆ เข้มกว่าเดิมเล็กน้อย */
}

/* .section-headline ถูกใช้ร่วมกัน */

.portfolio-grid {
    display: grid;
    /* สำหรับ Desktop แสดง 2-3 คอลัมน์ ขึ้นอยู่กับความกว้างที่ต้องการ */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
}

.portfolio-item {
    position: relative; /* สำหรับ .portfolio-overlay */
    overflow: hidden; /* ป้องกัน overlay ล้นออกนอก item */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-item:hover {
    transform: scale(1.03); /* ขยาย item เล็กน้อย */
    box-shadow: 0 8px 25px rgba(0, 255, 255, 0.2); /* เงาสี Cyan */
}

.portfolio-thumbnail img {
    display: block;
    width: 100%;
    height: auto; /* หรือกำหนด height ที่แน่นอนแล้วใช้ object-fit: cover; */
    /* aspect-ratio: 16 / 9; /* กำหนดอัตราส่วนภาพถ้าต้องการให้เท่ากัน */
    /* object-fit: cover; */
    transition: transform 0.5s ease;
}

.portfolio-item:hover .portfolio-thumbnail img {
    transform: scale(1.1); /* Zoom รูปภาพเมื่อ Hover ที่ Item */
}

.portfolio-overlay {
    position: absolute;
    bottom: 0; /* เริ่มจากด้านล่าง */
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(10, 10, 20, 0.95) 0%, rgba(10, 10, 20, 0.7) 60%, transparent 100%);
    padding: 20px;
    box-sizing: border-box; /* ให้ padding ไม่เกินขนาดของ overlay */
    color: #E6F1FF;
    opacity: 0; /* ซ่อนไว้ตอนแรก */
    transform: translateY(20px); /* เลื่อนลงเล็กน้อย */
    transition: opacity 0.4s ease, transform 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* จัดเนื้อหาให้อยู่ด้านล่างของ overlay */
    min-height: 50%; /* ให้ overlay มีความสูงอย่างน้อยครึ่งหนึ่ง */
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1; /* แสดง overlay เมื่อ Hover */
    transform: translateY(0); /* เลื่อนขึ้นมาตำแหน่งปกติ */
}

.portfolio-title {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.4rem;
    color: #00FFFF; /* Electric Cyan */
    margin-bottom: 8px;
    line-height: 1.3;
}

.portfolio-tags {
    font-family: 'Share Tech Mono', monospace;
    font-size: 0.8rem;
    color: #BCCCDC; /* Light Grey */
    margin-bottom: 15px;
    line-height: 1.4;
}

.portfolio-link {
    font-family: 'Share Tech Mono', monospace;
    color: #00FFFF;
    text-decoration: none;
    font-size: 0.9rem;
    align-self: flex-start; /* จัดลิงก์ให้อยู่ด้านซ้าย */
    padding: 5px 0; /* เพิ่ม padding เล็กน้อย */
    border-bottom: 1px solid transparent; /* เตรียมไว้สำหรับ hover effect */
    transition: color 0.3s ease, border-color 0.3s ease;
}

.portfolio-link:hover {
    color: #FFFFFF;
    border-bottom-color: #00FFFF;
}

/* (Optional) ปุ่ม "ดูผลงานทั้งหมด" */
.view-all-portfolio {
    text-align: center;
    margin-top: 50px;
}

.secondary-cta-outline { /* สร้าง class ใหม่สำหรับปุ่มนี้ */
    background-color: transparent;
    color: #00FFFF; /* Electric Cyan */
    padding: 12px 30px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: 2px solid #00FFFF;
    /* ใช้ clip-path แบบเดียวกับ primary-cta ถ้าต้องการ */
    clip-path: polygon(
        0% 6px, 6px 0%, calc(100% - 6px) 0%, 100% 6px,
        100% calc(100% - 6px), calc(100% - 6px) 100%,
        6px 100%, 0% calc(100% - 6px)
    );
}

.secondary-cta-outline:hover {
    background-color: rgba(0, 255, 255, 0.1); /* Cyan โปร่งแสง */
    color: #FFFFFF;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
}

/* Responsive adjustments for portfolio grid */
@media (max-width: 992px) {
    .portfolio-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }
    .portfolio-title {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
    .portfolio-grid {
        grid-template-columns: 1fr; /* 1 คอลัมน์บนมือถือ */
        gap: 25px;
    }
     .portfolio-title {
        font-size: 1.2rem;
    }
    .portfolio-overlay {
        min-height: 40%; /* ปรับความสูง overlay บนมือถือ */
        padding: 15px;
    }
}
/* --- เฟส 5: สัญญาณจากพันธมิตร / เสียงสะท้อนจากกองยาน (Testimonials) --- */
.testimonials-section {
    padding: 80px 0;
    background-color: #0A0A14; /* กลับไปใช้สีพื้นหลังหลัก */
    border-top: 1px solid #1A1A2E; /* เส้นแบ่ง */
    position: relative; /* สำหรับปุ่ม Navigation */
}

/* .section-headline ถูกใช้ร่วมกัน */

.testimonial-slider-wrapper {
    position: relative; /* สำหรับปุ่ม Navigation ที่จะ absolute กับ wrapper นี้ */
    max-width: 800px; /* จำกัดความกว้างของ Slider */
    margin: 0 auto;
    overflow: hidden; /* ซ่อน Testimonial Items ที่ไม่ได้แสดง */
}

.testimonial-slider {
    display: flex; /* จัด Testimonial Items เรียงแนวนอน */
    transition: transform 0.5s ease-in-out; /* Animation ตอนเลื่อน */
    /* ความกว้างของ Slider จะถูกกำหนดโดย JavaScript ตามจำนวน Items */
}

.testimonial-item {
    min-width: 100%; /* แต่ละ Item กว้างเต็ม Wrapper */
    box-sizing: border-box;
    padding: 40px 20px; /* ระยะห่างภายใน Item */
    text-align: center;
    display: flex; /* ใช้ flex เพื่อจัด quote และ cite */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* background-color: rgba(26, 26, 46, 0.3); */ /* พื้นหลังโปร่งแสงเล็กน้อย (optional) */
    /* border-radius: 8px; */
    /* margin: 0 10px; */ /* ถ้าต้องการให้เห็น item ข้างๆ บางส่วน */
}

.testimonial-quote {
    font-family: 'Merriweather', serif; /* หรือ Font Serif อื่นๆ ที่อ่านง่าย */
    /* ถ้าไม่มี Merriweather, fallback to 'Rajdhani' or system serif */
    font-size: 1.5rem; /* ขนาดค่อนข้างใหญ่สำหรับ Quote */
    font-style: italic;
    color: #E6F1FF; /* Off-white */
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 700px; /* จำกัดความกว้างของ Quote */
    position: relative; /* สำหรับ Pseudo-elements (เครื่องหมายคำพูด) */
}

.testimonial-quote::before,
.testimonial-quote::after {
    font-family: 'Kanit', sans-serif; /* ใช้ Font ที่ดู Techy สำหรับเครื่องหมายคำพูด */
    color: #00FFFF; /* Electric Cyan */
    font-size: 3rem; /* ขนาดใหญ่สำหรับเครื่องหมายคำพูด */
    position: absolute;
    opacity: 0.5;
}

.testimonial-quote::before {
    content: "“"; /* หรือใช้ SVG Icon */
    top: -10px; /* ปรับตำแหน่ง */
    left: -20px; /* ปรับตำแหน่ง */
}

.testimonial-quote::after {
    content: "”"; /* หรือใช้ SVG Icon */
    bottom: -20px; /* ปรับตำแหน่ง */
    right: -10px; /* ปรับตำแหน่ง */
}

.testimonial-cite {
    font-family: 'Rajdhani', sans-serif;
    font-style: normal;
}

.testimonial-cite .cite-name {
    display: block;
    font-weight: 700;
    color: #00FFFF; /* Electric Cyan */
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.testimonial-cite .cite-title {
    display: block;
    font-size: 0.9rem;
    color: #BCCCDC; /* Light Grey */
}

/* ปุ่ม Navigation สำหรับ Slider */
.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 255, 255, 0.2); /* Cyan โปร่งแสง */
    color: #E6F1FF;
    border: 1px solid #00FFFF;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1; /* ช่วยจัดกึ่งกลางตัวอักษรในปุ่ม */
}

.slider-nav:hover {
    background-color: rgba(0, 255, 255, 0.5);
    color: #FFFFFF;
}

.slider-nav.prev {
    left: -20px; /* อาจจะต้องปรับตำแหน่งให้เหมาะสม */
}

.slider-nav.next {
    right: -20px; /* อาจจะต้องปรับตำแหน่งให้เหมาะสม */
}

/* Responsive adjustments for testimonials */
@media (max-width: 900px) { /* กว้างกว่า 800px ของ wrapper เล็กน้อยเพื่อให้ปุ่มไม่ชิดขอบจอ */
    .slider-nav.prev {
        left: 10px;
    }
    .slider-nav.next {
        right: 10px;
    }
    .testimonial-quote {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
    .testimonial-quote {
        font-size: 1.2rem;
        padding: 0 10px; /* ลด padding ถ้าเครื่องหมายคำพูดชิดขอบไป */
    }
    .testimonial-quote::before { left: -5px; font-size: 2.5rem; }
    .testimonial-quote::after { right: 0px; font-size: 2.5rem; }

    .cite-name { font-size: 1rem; }
    .cite-title { font-size: 0.85rem; }

    .slider-nav {
        width: 35px;
        height: 35px;
        font-size: 1.3rem;
    }
}
/* --- เฟส 6: สัญญาณติดต่อ / เริ่มต้นการเชื่อมต่อ (Form Section) --- */
.form-section {
    padding: 80px 0;
    background-color: #10101E; /* สีพื้นหลังเข้มขึ้นเล็กน้อย */
    border-top: 1px solid #2A2A3E;
    color: #BCCCDC; /* Light Grey สำหรับ Text ทั่วไปในส่วนนี้ */
}

.section-headline.special-headline { /* สไตล์พิเศษสำหรับ Headline ของ Form */
    color: #00FFFF; /* Electric Cyan */
}
.section-headline.special-headline::before { content: "// "; color: #E6F1FF; }
.section-headline.special-headline::after { background-color: #00FFFF; }


.form-intro-text {
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto 50px auto;
}

.email-link {
    color: #00FFFF; /* Electric Cyan */
    text-decoration: none;
    font-weight: 600;
}
.email-link:hover {
    text-decoration: underline;
}

.contact-form {
    max-width: 700px; /* ความกว้างสูงสุดของฟอร์ม */
    margin: 0 auto;
    background-color: #0A0A14; /* พื้นหลังฟอร์มเข้มกว่า Section */
    padding: 30px 40px;
    border-radius: 8px;
    border: 1px solid #2A2A3E; /* ขอบบางๆ */
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.form-group {
    margin-bottom: 25px;
}

.form-label {
    display: block;
    font-family: 'Share Tech Mono', monospace;
    color: #A0A0CC; /* Light Lavender/Grey */
    margin-bottom: 8px;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 12px 15px;
    background-color: #1E1E2A; /* พื้นหลัง Input */
    border: 1px solid #40405C; /* ขอบ Input */
    border-radius: 4px;
    color: #E6F1FF; /* สี Text ที่พิมพ์ */
    font-family: 'Inter', sans-serif; /* หรือ 'Rajdhani' */
    font-size: 1rem;
    box-sizing: border-box; /* ให้ padding ไม่เกินขนาด */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: #00FFFF; /* Electric Cyan border on focus */
    box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.2); /* Glow effect */
}

.form-textarea {
    resize: vertical; /* อนุญาตให้ปรับขนาดแนวตั้ง */
    min-height: 120px;
}

/* Custom Checkboxes */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.checkbox-label {
    display: block;
    position: relative;
    padding-left: 30px; /* ระยะห่างสำหรับ custom checkbox */
    cursor: pointer;
    font-size: 1rem;
    user-select: none; /* ป้องกันการเลือก Text */
    color: #BCCCDC;
}
.checkbox-label input[type="checkbox"] { /* ซ่อน checkbox เดิม */
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #1E1E2A;
    border: 1px solid #40405C;
    border-radius: 3px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.checkbox-label:hover input ~ .checkmark {
    border-color: #00FFFF;
}
.checkbox-label input:checked ~ .checkmark {
    background-color: #00FFFF; /* Electric Cyan */
    border-color: #00FFFF;
}
.checkmark:after { /* สร้างเครื่องหมายถูก */
    content: "";
    position: absolute;
    display: none; /* ซ่อนไว้ตอนแรก */
    left: 6px;
    top: 2px;
    width: 5px;
    height: 10px;
    border: solid #0A0A14; /* สีเครื่องหมายถูก (เข้มเพื่อให้ตัดกับพื้นหลัง Cyan) */
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.checkbox-label input:checked ~ .checkmark:after {
    display: block; /* แสดงเมื่อ check */
}


.form-submit-button {
    width: 100%; /* ปุ่มเต็มความกว้าง */
    background-color: #00FFFF;
    color: #0A0A14;
    padding: 15px 20px;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none; /* หรือ 1px solid #00FFFF */
    clip-path: polygon( /* มุมตัดแบบเดิม */
        0% 8px, 8px 0%, calc(100% - 8px) 0%, 100% 8px,
        100% calc(100% - 8px), calc(100% - 8px) 100%,
        8px 100%, 0% calc(100% - 8px)
    );
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}
.form-submit-button:hover {
    background-color: #8A2BE2; /* Quantum Purple */
    color: #E6F1FF;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(138, 43, 226, 0.4);
}

#form-status-message {
    margin-top: 20px;
    text-align: center;
    font-size: 0.9rem;
}
#form-status-message.success { color: #39FF14; /* Neon Green */ }
#form-status-message.error { color: #FF3131; /* Neon Red */ }


/* --- เฟส 7: ชั้นล่าง / ห้องลดความดัน (Footer) --- */
.site-footer {
    padding: 60px 0 40px;
    background-color: #05050A; /* สีเข้มที่สุด */
    color: #A0A0CC; /* Light Lavender/Grey สำหรับ Text ทั่วไปใน Footer */
    font-size: 0.9rem;
    line-height: 1.6;
    border-top: 1px solid #1A1A2E; /* เส้นแบ่งบางๆ */
}

.footer-container {
    display: flex;
    flex-wrap: wrap; /* ให้ column ตกลงมาบนจอเล็ก */
    justify-content: space-between;
    gap: 30px;
}

.footer-column {
    flex-basis: auto; /* ให้ยืดหยุ่นตามเนื้อหา */
    /* min-width: 200px; */ /* (Optional) กำหนดความกว้างขั้นต่ำ */
}

.footer-logo-area {
    flex-basis: 100%; /* ให้ส่วนโลโก้กว้างเต็มแถวแรกบนจอเล็ก */
    margin-bottom: 20px; /* ระยะห่างถ้า column อื่นตกลงมา */
    text-align: center; /* จัดกลางบนจอเล็ก */
}
@media (min-width: 768px) { /* บนจอใหญ่ */
    .footer-logo-area {
        flex-basis: 30%; /* ให้กว้างประมาณ 30% */
        text-align: left;
        margin-bottom: 0;
    }
    .footer-links-area, .footer-contact-area {
        flex-basis: 30%; /* ให้กว้างประมาณ 30% */
        text-align: left;
    }
}


.footer-logo-text {
    font-family: 'Kanit', sans-serif;
    font-size: 1.8rem;
    color: #E6F1FF; /* Off-white */
    margin: 0 0 10px 0;
}
/* .footer-logo { max-width: 150px; margin-bottom: 15px; } */

.copyright-text {
    font-size: 0.85rem;
}

.footer-heading {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #E6F1FF; /* Off-white */
    margin-bottom: 15px;
    text-transform: uppercase;
}

.footer-links,
.footer-contact-info {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li a,
.footer-contact-info li a {
    color: #A0A0CC;
    text-decoration: none;
    display: inline-block;
    padding: 5px 0;
    transition: color 0.3s ease, transform 0.2s ease;
}
.footer-links li a:hover,
.footer-contact-info li a:hover {
    color: #00FFFF; /* Electric Cyan */
    transform: translateX(3px);
}
.footer-contact-info li {
    margin-bottom: 8px;
}

.social-links {
    margin-top: 15px;
}
.social-links a {
    margin-right: 15px;
    display: inline-block; /* เพื่อให้ transform ทำงาน */
}
.social-links a svg {
    width: 22px;
    height: 22px;
    fill: #A0A0CC; /* สี Icon เริ่มต้น */
    transition: fill 0.3s ease, transform 0.2s ease;
}
.social-links a:hover svg {
    fill: #00FFFF; /* Electric Cyan */
    transform: scale(1.1);
}