/* ---------------------------------------------------- */
/* 1. CSS Reset & Box Sizing */
/* ---------------------------------------------------- */
*{
    /* ใช้ Border-box เพื่อให้ padding และ border ไม่เพิ่มขนาดรวมของ element */
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ---------------------------------------------------- */
/* 2. CSS Variables (ตั้งค่าสีหลัก) */
/* ---------------------------------------------------- */
:root {
    /* สีหลักของ Navbar/พื้นหลัง */
    --primary-bg: #2d3345; /* สีน้ำเงินเข้ม/เทาเข้ม */
    --secondary-bg: #E9ECFF; /* สีเทาอ่อน (ใช้สำหรับ Navbar Body) */
    --text-color-light: #ffffff; /* สีข้อความสว่าง (ใช้กับพื้นหลังเข้ม) */
    --text-color-dark: #333333; /* สีข้อความเข้ม (ใช้กับพื้นหลังสว่าง) */
    --cta-color: #8c9eff; /* สีปุ่ม CTA (ม่วงอ่อน/น้ำเงิน) */
    --cta-hover: #6a7ae8;
}
/* ---------------------------------------------------- */
/* 3. Base Font & Typography (แก้ไขส่วนนี้) */
/* ---------------------------------------------------- */

body {
    /* ⬇️ เปลี่ยนเป็นฟอนต์ 'Inter' (หรือฟอนต์ที่คุณเลือก) ⬇️ */
    font-family: 'Inter', sans-serif; 
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color-dark); 
    background-color: var(--text-color-light);
}

header {
    /* 💥 1. KEY FIX: ทำให้ Navbar ลอยอยู่เหนือเนื้อหาและค้างอยู่กับที่ */
    position: fixed; 
    
    /* 2. กำหนดตำแหน่งให้ชิดขอบบนและซ้าย */
    top: 0;
    left: 0;
    
    /* 3. บังคับให้มีความกว้าง 100% ของหน้าจอเสมอ */
    width: 100%;
    
    /* 4. KEY FIX: กำหนด Z-Index ให้สูงมาก */
    /* สำคัญมาก! เพื่อให้ Navbar อยู่เหนือเนื้อหาอื่นๆ เวลา Scroll */
    z-index: 1000; 
    
    /* เพิ่มการตกแต่งอื่นๆ เช่น เงาและสีพื้นหลัง */
    background-color: white; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

ul {
    list-style: none; /* เอาเครื่องหมายจุดหน้า li ออก */
}
a {
   /* ลบขีดเส้นใต้ของลิงก์ */
    text-decoration: none; 
    color: var(--text-color-dark);
}
/* --- 2. HEADER CONTAINER (ใช้ Flexbox หลัก) --- */
.main-header {
    background-color: var( --secondary-bg); /* พื้นหลัง Navbar */
    padding: 15px 0; /* เว้นระยะห่างด้านบน/ล่าง */
}
.nav-container {
    display: flex;
    align-items:center; /* จัดกึ่งกลางแนวตั้ง */
    justify-content: space-between; /* กระจายระยะห่างระหว่างโลโก้กับเมนู */
    max-width: 1200px; /* จำกัดความกว้างสูงสุดของ Navbar */
    margin: 0 auto; /* จัดกึ่งกลางหน้าจอ */
    padding: 0 20px; /* เว้นขอบด้านข้าง */
}
.nav-wrapper {
    display: flex;
    align-items:center; /* จัดกึ่งกลางแนวตั้ง */
    justify-content: space-between; /* กระจายระยะห่างระหว่างโลโก้กับเมนู */
    gap: 30px; /* ระยะห่างระหว่าง ul และปุ่ม */
    position: relative;
}
.nav-links {
    /* ลบจุด bullet */
    list-style: none;
    /* จัดเรียงลิงก์ในแนวนอน */
    display: flex;
    gap: 25px; /* ระยะห่างระหว่างลิงก์ HOME และ ABOUT */
}
.nav-links a {
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    /* 💥 โค้ดที่เพิ่ม: เพื่อให้ transform ทำงานและนุ่มนวล */
    display: inline-block; 
    transition: transform 0.2s ease-out;
}
.nav-links a:hover {
    /* 💥 เด้งขึ้น (Lift Effect): ดันลิงก์ขึ้นไปด้านบน 2 พิกเซล */
    transform: translateY(-2px); 
    
    /* เปลี่ยนสีเล็กน้อยเพื่อให้เห็นการตอบสนอง */
    color: #9292ff; /* เปลี่ยนเป็นสีม่วงอ่อน */
}
/* --- 4. ปุ่ม (RESERVE YOUR SPOT) --- */
.nav-btn a.btn {
    background-color: #9292ff; /* สีม่วงตามภาพตัวอย่าง */
    color: white;
    padding: 10px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    text-transform: uppercase;
    /* 💥 เพิ่ม Transition: ทำให้การเปลี่ยนแปลงเป็นไปอย่างนุ่มนวล */
    transition: all 0.2s ease-out; 
    
    /* 💥 เพิ่มเงาเริ่มต้น (ให้ปุ่มดูมีมิติเล็กน้อย) */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* --- 2. เอฟเฟกต์เมื่อเมาส์ชี้ (Hover Effect) --- */

.nav-btn a.btn:hover {
    /* 1. เด้งขึ้น (Lift Effect): ดันปุ่มขึ้นไปด้านบน 3 พิกเซล */
    transform: translateY(-3px); 
    
    /* 2. เงายกตัว: เพิ่มขนาดเงาให้ใหญ่ขึ้นเพื่อจำลองการลอยตัว */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3); 
    
    /* 3. เปลี่ยนสีเล็กน้อย (ไม่บังคับ): เพื่อให้ดูมีการตอบสนอง */
    background-color: #a0a0ff; 
}

/* --- 3. เอฟเฟกต์เมื่อคลิก (Active Effect) --- */

.nav-btn a.btn:active {
    /* ดันปุ่มลงเล็กน้อยเมื่อผู้ใช้คลิกจริง */
    transform: translateY(1px); 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* --- 5. LOGO (รูปภาพ) --- */
.logo img {
    height: 30px; /* กำหนดความสูงของโลโก้ */
    vertical-align: middle;
}
/* --- A. การตั้งค่าเริ่มต้นสำหรับ Hamburger Icon --- */
/* ---------------------------------------------------- */
.ham-menu {
  display: inline-block;
  cursor: pointer;
  position: absolute;
  right: 1rem;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

/* Fade out the second bar */
.change .bar2 {opacity: 0;}

/* Rotate last bar */
.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}
/* ---------------------------------------------------- */
.menu-active{
    display: block !important;
}
@media (max-width: 768px) {
    .nav-wrapper {
        display: none;
        height: auto;
        flex-direction: column;
    }
   .nav-links{
    flex-direction: column;
    padding: 40px 20px  15px 20px;
    gap: 5px;
   }
   .nav-links li a{
    padding: 5px 0;
   }
   .nav-container {
    display: flex;
   /* 💥 แก้ไข: จัดเนื้อหาเมนูให้ชิดซ้าย (แนวขวาง) */
    align-items: flex-start;
    justify-content: flex-start; /* กระจายระยะห่างระหว่างโลโก้กับเมนู */
    flex-direction: column;
    }
    .nav-btn {
      padding: 0 20px 20px 15px;
    }
}
@media (min-width: 768px) {
    .ham-menu{
        display: none
    }
    
} 

/* 5. Hero Section - Main Heading */
/* ---------------------------------------------------- */

.hero-main-content {
    text-align: center;
    /* จำกัดความกว้างเนื้อหาให้อยู่ในขอบเขตที่เหมาะสม */
  
    width: 100%;
    margin: 0 auto; 
    
    /* เพิ่ม Padding ด้านบนและด้านล่าง เพื่อเว้นช่องว่าง */
    padding: 30px; 
    background-color: white;
    border-top: 2px solid var(--text-color-dark); /* 2px หนา, ชนิด solid, สีดำ */
    border-bottom: 2px solid var(--text-color-dark); /* 2px หนา, ชนิด solid, สีดำ */
}

.hero-main-content h1 {
    /* กำหนดขนาดฟอนต์เริ่มต้นสำหรับ Desktop */
    font-size: 6vw; 
    line-height: 0.9; /* ชิดบรรทัดให้ใกล้กัน */
    font-weight: 900;
    text-transform: uppercase;
    /* สีดำ/เข้มสำหรับ "TRAIN HARD." */
    color: var(--text-color-dark);
   
}

/* ใส่สีให้กับคำว่า BETTER */
.hero-main-content h1 span {
    /* ใช้สี CTA ที่กำหนดไว้ (ม่วงอ่อน/น้ำเงิน) */
    color: var(--cta-color); 
}

@media (max-width: 799px) { 
    .hero-main-content h1 {
        /* ✅ ยกเลิกการบังคับให้อยู่บรรทัดเดียว */
        white-space: normal; 
        
        /* ✅ สั่งให้ h1 กลับมาขยายเต็มความกว้างเพื่อจัดกึ่งกลาง */
        display: block; 
        
        font-size: 10vw; /* อาจต้องปรับขนาดฟอนต์ให้ใหญ่ขึ้นอีกนิดใน Mobile */
    }
    
    /* ✅ สั่งให้คำว่า BETTER ลงบรรทัดใหม่ */
    .hero-main-content h1 span {
        display: block; 
    }
}

/* -------------------------------------------..........................................................................................--------- */
/* main-container*/
/* ---------------------------------------------------- */
.main-container {
    /* ใช้ CSS Grid ในการจัดวาง */
    display: grid;
    /* จำกัดความกว้างเนื้อหาให้อยู่ในขอบเขตเดียวกับ Navbar/Hero Heading */
    width: 100%;
    margin: 0 auto;
    /* ✅ แก้ไข: กำหนด Layout เป็น 3 คอลัมน์ที่กว้างเท่ากันทั้งหมด */
    grid-template-columns: repeat(3, 1fr); 
    /* หรือใช้: grid-template-columns: 1fr 1fr 1fr; */
    /* Padding ซ้าย/ขวา เพื่อไม่ให้เนื้อหาชิดขอบจอ */
    
    padding: 0 ; 
}
.img1 {
    /* ขยายเต็มคอลัมน์ 1 และ 2 */
    grid-column: 1 / span 2; 
}
/* ✅ โค้ดสำหรับจัดรูปภาพให้เต็มพื้นที่ */
.img1 img {
    width: 100%; /* ขยายความกว้างเต็มองค์ประกอบแม่ (.img1) */
    height: 100%; /* ขยายความสูงเต็มองค์ประกอบแม่ (.img1) */
    display: block;
    /* ป้องกันรูปภาพบิดเบือนและมั่นใจว่าครอบคลุมพื้นที่ทั้งหมด */
    object-fit: cover;
}
/* 2. Card 1 (FOR THE COMMITTED) - คอลัมน์ที่ 3 */
.card1 {
    grid-column: 3;
    /* ✅ ใช้ Flexbox เพื่อจัดการการจัดวางภายใน Card */
    display: flex;
    flex-direction: column; /* จัดเรียงในแนวตั้ง */
    /* ❌ เนื่องจากไม่มีความสูงคงที่ (height: 100%) การใช้ space-between 
       อาจไม่เกิดผล หากไม่กำหนดความสูงของ card1 */
    /* ถ้าต้องการให้ h1 อยู่บนสุดและข้อความอยู่ล่างสุด:
       ต้องมั่นใจว่า .card1 ยืดเต็มความสูงของแถว Grid */
    /* ให้กำหนดความสูงเป็น 100% */
    height: 100%; 
    padding: 20px;
}
.card1 h1 {
    margin-top: 0;
    /* ✅ ใช้ margin-bottom: auto; เพื่อดันองค์ประกอบถัดไปลงไปด้านล่าง */
    margin-bottom: auto; 
    
    font-size: 2em;
    line-height: 1.1;
    font-weight: 900;
    text-transform: uppercase;
    /* ...โค้ดอื่นๆ... */
}
.card1 p {
    /* ✅ ลด margin-bottom ของ p ให้เหลือ 10px (หรือ 0px ถ้าต้องการให้ชิดมาก) */
    margin-bottom: 10px; 
    font-size: 0.95em;
    line-height: 1.5;
}

.card1 a {
    /* ทำให้ลิงก์แสดงผลแบบ inline-block เพื่อให้ควบคุม margin ได้ง่ายขึ้น */
    display: inline-block; 
    /* ✅ ลบ margin-top (ถ้ามี) */
    margin-top: 0;
    
    font-weight: bold;
    color: var(--cta-color); 
    text-decoration: none; 
    text-transform: uppercase;
    padding-bottom:20px ;
    /* ✅ เพิ่ม Transition ให้การเปลี่ยนสี/สไตล์ดูนุ่มนวลขึ้น */
    transition: color 0.2s ease-in-out;
}
/*  Hover Effect สำหรับลิงก์ใน Card 1 */
.card1 a:hover {
    /* ✅ 1. เพิ่มขีดเส้นใต้เมื่อ Hover (ตามภาพตัวอย่างมักจะไม่มีขีดเส้นใต้ในสถานะปกติ) */
    text-decoration: underline; 
    
    /* ✅ 2. อาจเปลี่ยนสีให้เข้มขึ้นเล็กน้อยเพื่อให้เกิดความแตกต่าง */
    color: var(--text-color-dark); /* เปลี่ยนเป็นสีดำ/เข้ม */
    
    /* 3. (ทางเลือก) เพิ่ม transition เพื่อให้การเปลี่ยนสี/สไตล์ราบรื่น */
    transition: color 0.2s ease-in-out;
}

/* 3. Card 2 (GUIDED BY EXPERTS) - คอลัมน์ที่ 1, แถวล่าง */
.card2 {
    grid-column: 1;
   /* ✅ ใช้ Flexbox เพื่อจัดการการจัดวางภายใน Card */
    display: flex;
    flex-direction: column; /* จัดเรียงในแนวตั้ง */
    /* ❌ เนื่องจากไม่มีความสูงคงที่ (height: 100%) การใช้ space-between 
       อาจไม่เกิดผล หากไม่กำหนดความสูงของ card2 */
    /* ถ้าต้องการให้ h1 อยู่บนสุดและข้อความอยู่ล่างสุด:
       ต้องมั่นใจว่า .card2 ยืดเต็มความสูงของแถว Grid */
    /* ให้กำหนดความสูงเป็น 100% */
    height: 100%; 
    padding: 20px;
}
.card2 h1 {
    margin-top: 0;
    /* ✅ ใช้ margin-bottom: auto; เพื่อดันองค์ประกอบถัดไปลงไปด้านล่าง */
    margin-bottom: auto; 
    
    font-size: 2em;
    line-height: 1.1;
    font-weight: 900;
    text-transform: uppercase;
    /* ...โค้ดอื่นๆ... */
}
.card2 p {
    /* ✅ ลด margin-bottom ของ p ให้เหลือ 10px (หรือ 0px ถ้าต้องการให้ชิดมาก) */
    margin-bottom: 10px; 
    font-size: 0.95em;
    line-height: 1.5;
}

/* 4. Card 3 (DYNAMIC OPEN GYM) - คอลัมน์ที่ 2, แถวล่าง */
.card3 {
    grid-column: 2;
    /* ✅ ใช้ Flexbox เพื่อจัดการการจัดวางภายใน Card */
    display: flex;
    flex-direction: column; /* จัดเรียงในแนวตั้ง */
    /* ❌ เนื่องจากไม่มีความสูงคงที่ (height: 100%) การใช้ space-between 
       อาจไม่เกิดผล หากไม่กำหนดความสูงของ card3 */
    /* ถ้าต้องการให้ h1 อยู่บนสุดและข้อความอยู่ล่างสุด:
       ต้องมั่นใจว่า .card3 ยืดเต็มความสูงของแถว Grid */
    /* ให้กำหนดความสูงเป็น 100% */
    height: 100%; 
    padding: 20px;
}
.card3 h1 {
    margin-top: 0;
    /* ✅ ใช้ margin-bottom: auto; เพื่อดันองค์ประกอบถัดไปลงไปด้านล่าง */
    margin-bottom: auto; 
    
    font-size: 2em;
    line-height: 1.1;
    font-weight: 900;
    text-transform: uppercase;
    /* ...โค้ดอื่นๆ... */
}
.card3 p {
    /* ✅ ลด margin-bottom ของ p ให้เหลือ 10px (หรือ 0px ถ้าต้องการให้ชิดมาก) */
    margin-bottom: 10px; 
    font-size: 0.95em;
    line-height: 1.5;
}


/* 5. รูปภาพ 2 (img2) - คอลัมน์ที่ 3, แถวล่าง */
.img2 {
    grid-column: 3;
}
.img2 img {
    width: 100%; /* ขยายความกว้างเต็มองค์ประกอบแม่ (.img2) */
    height: 100%; /* ขยายความสูงเต็มองค์ประกอบแม่ (.img2) */
    display: block;
    /* ป้องกันรูปภาพบิดเบือนและมั่นใจว่าครอบคลุมพื้นที่ทั้งหมด */
    object-fit: cover;
}

/*เพิ่มเส้นขอบให้กับ Grid Items ทั้งหมด */
.card1, 
.card2, 
.card3, 
.img1, 
.img2 {
    /* ✅ แก้ไข: ใช้ comma (,) เพื่อเลือกหลายคลาสพร้อมกัน */
    border: 1px solid var(--text-color-dark); /* ใช้สีดำ/เข้มตามที่เคยใช้ */
}
/* ---------------------------------------------------- */
/* Media Query - Mobile Grid Layout (<= 799px) */
@media (max-width: 799px) {
    .main-container {
        /* ✅ เปลี่ยนเป็น 1 คอลัมน์ */
        grid-template-columns: 1fr;  
    }
    /* ยกเลิกการกินพื้นที่หลายคอลัมน์ */
    .img1, .card1, .card2, .card3, .img2 {
        grid-column: 1 / span 1; 
    }
    /* ✅ กำหนดลำดับใหม่ด้วย 'order' */
    
    /* 1. img1: รูปภาพหลัก */
    .img1 {
        order: 1;
    }

    /* 2. card1: FOR THE COMMITTED */
    .card1 {
        order: 2;
        /* ยกเลิก height: 100% เพื่อให้ card ย่อ/ขยายตามเนื้อหาใน Mobile */
        height: auto; 
        padding: 20px; /* ลด padding ภายใน Card */
    }
    
    /* 3. img2: รูปภาพ 2 */
    .img2 {
        order: 3;
    }

    /* 4. card2: GUIDED BY EXPERTS */
    .card2 {
        order: 4;
        padding: 20px; /* ลบ padding ขวาที่เคยกำหนดใน Desktop */
    }

    /* 5. card3: DYNAMIC OPEN GYM */
    .card3 {
        order: 5;
        padding: 20px; /* ลบ padding ซ้ายที่เคยกำหนดใน Desktop */
    }
}
/* -------------------------------------------..........................................................................................--------- */
/* main-container-2*/
/* ---------------------------------------------------- */
.main-container-2 {
    /* ใช้ CSS Grid ในการจัดวาง */
    display: grid;
    /* ✅ แก้ไข: แบ่งเป็น 2 คอลัมน์: ข้อความซ้าย 1 ส่วน และ รูปภาพขวา 2 ส่วน */
    grid-template-columns: 1fr 2fr;
    /* จำกัดความกว้างเนื้อหาให้อยู่ในขอบเขตเดียวกับส่วนอื่นๆ */
    /* ใช้สีพื้นหลังอ่อนตามดีไซน์ */
    background-color: var(--background-light); /* หรือใช้ค่าสีที่คุณกำหนด */
    
    /* ลบช่องว่างระหว่าง Grid Items (ถ้าต้องการให้ติดกัน) */
    gap: 0; 
}

.img3 img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* ทำให้รูปภาพครอบคลุมพื้นที่ทั้งหมดโดยไม่บิดเบือน */
}
.warp-container {
    /* ใช้ Flexbox แนวตั้งเพื่อจัดเรียง Card ย่อย */
    display: flex;
    flex-direction: column;
    
    /* D. เพิ่มระยะห่างระหว่าง Cards */
    justify-content: space-between; 

     border: 1px solid var(--text-color-dark); /* ใช้สีดำ/เข้มตามที่เคยใช้ */
}
/* ---------------------------------------------------- */
/* 9. Typography and Item Styles */
/* ---------------------------------------------------- */

.card1-2 h1 {
    font-size: 3.5em; /* DISCOVER YOUR POTENTIAL */
    line-height: 1.1;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--text-color-dark);
}

.card2-2 h2, .card3-2 h2, .card4-2 h2 {
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
    color: var(--text-color-dark);
}

/* สไตล์ปุ่ม View Classes (ตามภาพตัวอย่าง) */
.card5-2 a {
    display: inline-block;
    padding: 10px 0;
    font-weight: bold;
    color: var(--cta-color); 
    text-decoration: none;
    text-transform: uppercase;
}
.card5-2 a:hover {
    /* ✅ 1. เพิ่มขีดเส้นใต้เมื่อ Hover (ตามภาพตัวอย่างมักจะไม่มีขีดเส้นใต้ในสถานะปกติ) */
    text-decoration:  none; 
    
    /* ✅ 2. อาจเปลี่ยนสีให้เข้มขึ้นเล็กน้อยเพื่อให้เกิดความแตกต่าง */
    color: var(--text-color-dark); /* เปลี่ยนเป็นสีดำ/เข้ม */
    
    /* 3. (ทางเลือก) เพิ่ม transition เพื่อให้การเปลี่ยนสี/สไตล์ราบรื่น */
    transition: color 0.2s ease-in-out;
}
.card1-2, 
.card2-2, 
.card3-2, 
.card4-2,
.card5-2,
.img3 {
    /* ✅ แก้ไข: ใช้ comma (,) เพื่อเลือกหลายคลาสพร้อมกัน */
    border-top: 1px solid var(--text-color-dark); /* ใช้สีดำ/เข้มตามที่เคยใช้ */
    
}
.card1-2, 
.card2-2, 
.card3-2, 
.card4-2,
.card5-2 {
    padding: 20px;
}
@media (max-width: 799px) {
    .main-container-2 {
       grid-template-columns: 1fr;
    }
    /* ✅ กำหนดลำดับใหม่ด้วย 'order' */
    .img3 {
        order: -1; /* ย้ายรูปภาพขึ้นไปด้านบน */
    }
}

/* -------------------------------------------..........................................................................................--------- */
/* <section class="cta-primal-tribe">*/
/* ---------------------------------------------------- */
/* ---------------------------------------------------- */
/* Call to Action (CTA) Section */
/* ---------------------------------------------------- */

.cta-primal-tribe {
    /* ใช้สีม่วงอ่อนเป็นพื้นหลังเต็มความกว้าง */
    background-color: var(--cta-color); 
    color:var( --text-color-dark);/* สีข้อความควรเป็นสีขาว/สว่าง */
    
    /* ใช้ Flexbox เพื่อจัดเนื้อหาให้อยู่กึ่งกลาง */
    display: flex;
    justify-content: center; /* จัดกึ่งกลางแนวนอน */
    align-items: center; /* จัดกึ่งกลางแนวตั้ง */
    
    /* กำหนดความสูง เพื่อให้มีพื้นที่รอบข้อความเยอะๆ */
    min-height: 400px; 
    
    text-align: center;
    padding: 60px 20px; /* Padding เผื่อสำหรับจอแคบ */
}

.cta-content-wrap {
    /* จำกัดความกว้างเนื้อหา */
   
    width: 100%;
}

/* ---------------------------------------------------- */
/* 11. Typography Styles */
/* ---------------------------------------------------- */

.cta-primal-tribe .subtitle {
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.cta-primal-tribe h2 {
    font-size: 3.5em; /* ข้อความหลัก */
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 30px;
    line-height: 1.2;
}

/* ---------------------------------------------------- */
/* 11. Button Styles */
/* ---------------------------------------------------- */

.cta-primal-tribe .btn-primary {
    display: inline-block;
    padding: 15px 30px;
    
    /* สไตล์ปุ่มกลับกัน: พื้นหลังขาว, ข้อความสีเข้ม */
    background-color: #FFFFFF; 
    color: var(--text-color-dark); /* ใช้สีดำ/เข้ม */
    
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.2s;
}

.cta-primal-tribe .btn-primary:hover {
    background-color: var(--background-light); /* สีเทาอ่อนๆ เมื่อ Hover */
}

@media (max-width: 799px) {
    .cta-primal-tribe {
        min-height: 300px;
    }
    
    .cta-primal-tribe h2 {
        font-size: 2.2em; /* ลดขนาดฟอนต์ให้เล็กลงใน Mobile */
    }
    
    .cta-primal-tribe .btn-primary {
        padding: 12px 25px;
    }
}

/* -------------------------------------------..........................................................................................--------- */
/* E.<footer>*/
/* ---------------------------------------------------- */
.footer-brand{
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    
}

.footer-info{
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;
}

.footer-brand{
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    
}

.footer-info{
    display: flex;
    justify-content: space-between;
    padding: 20px 40px;
}

@media (max-width: 799px) {
    footer {
        padding: 40px 15px;
        /* ✅ เปลี่ยนเป็น 1 คอลัมน์ (แก้ปัญหาการล้นจอ) */
        grid-template-columns: 1fr; 
        gap: 30px; /* ✅ เพิ่ม gap ระหว่าง Brand กับ Info */
    }
    
    /* เมื่อเป็น 1 คอลัมน์ องค์ประกอบจะถูกเรียงดังนี้: 
       1. .footer-brand
       2. .footer-info (ซึ่งเป็น Flex Container)
    */

    /* ✅ แก้ไข .footer-info เพื่อจัดเรียง Contact, Hours, Social ในแนวตั้ง */
    .footer-info {
       /* ✅ ต้องเปลี่ยนเป็นเรียงแนวตั้ง */
        flex-direction: column; 
        gap: 30px; /* ✅ สร้างระยะห่างระหว่าง Contact, Hours, Social */
        padding: 0;
       
    }
    .footer-brand{
         display: flex; /* ยืนยันว่าเป็น Flex Container */
        flex-direction: column; 
        gap: 10px; /* ใช้ 10px น่าจะเหมาะสมกว่า 30px สำหรับระยะห่างโลโก้/ชื่อ */
        padding: 0;
        
        /* ✅ แก้ไข 1: สั่งให้ Flex Items (โลโก้และชื่อ) ชิดซ้ายของ .footer-brand */
        align-items: flex-start; /* นี่คือตัวสั่งให้องค์ประกอบย่อยชิดซ้าย */
        
        /* ✅ แก้ไข 2: ลบ text-align: left; ออก (ใช้ align-items แทน) */
        /* text-align: left; */
    }
    /* แก้ไขการจัดวางภายใน .footer-info */
    .contact-col, .hours-col, .footer-social {
        /* ลบ flex-basis ออกเพื่อให้ยืดเต็ม 100% ใน Mobile */
        flex-basis: auto; 
        text-align: left; /* จัดชิดซ้ายทั้งหมด */
    }

    /* สร้างระยะห่างระหว่าง Contact และ Hours ในแนวตั้ง */
    .contact-col {
        margin-bottom: 20px; 
    }
}
/* ---------------------------------------------------- */
/* 1. CSS: กำหนดสถานะเริ่มต้นและ Transition */
/* ---------------------------------------------------- */
.scroll-reveal {
    /* ตั้งค่า Transition ให้ใช้เวลา 0.8 วินาทีในการเปลี่ยนสถานะ */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; 
    
    /* สถานะเริ่มต้น: ซ่อน Element (จางหาย) */
    opacity: 0; 
    
    /* สถานะเริ่มต้น: เลื่อนลงไป 50px (จะเลื่อนขึ้นเมื่อแสดงผล) */
    transform: translateY(50px); 
}

/* ---------------------------------------------------- */
/* 2. CSS: กำหนดสถานะสุดท้าย (เมื่อ JavaScript เพิ่ม Class .visible) */
/* ---------------------------------------------------- */
.scroll-reveal.visible {
    /* สถานะสุดท้าย: แสดง Element เต็มที่ */
    opacity: 1; 
    
    /* สถานะสุดท้าย: กลับไปตำแหน่งเดิม (0px) */
    transform: translateY(0); 
}

/* -------------------------------------------..........................................................................................--------- */
/* about-page*/
/* ---------------------------------------------------- */
.hero-about {
    text-align: start;
    /* จำกัดความกว้างเนื้อหาให้อยู่ในขอบเขตที่เหมาะสม */
  
    width: 100%;
    margin: 0 auto; 
    
    /* เพิ่ม Padding ด้านบนและด้านล่าง เพื่อเว้นช่องว่าง */
    padding: 30px; 
    background-color: white;
    border-top: 2px solid var(--text-color-dark); /* 2px หนา, ชนิด solid, สีดำ */
    border-bottom: 2px solid var(--text-color-dark); /* 2px หนา, ชนิด solid, สีดำ */
}

.hero-about h1 {
    /* กำหนดขนาดฟอนต์เริ่มต้นสำหรับ Desktop */
    font-size: 6vw; 
    line-height: 0.9; /* ชิดบรรทัดให้ใกล้กัน */
    font-weight: 900;
    text-transform: uppercase;
    /* สีดำ/เข้มสำหรับ "TRAIN HARD." */
    color: var(--text-color-dark);
   
}


@media (max-width: 799px) { 
    .hero-about h1 {
        /* ✅ ยกเลิกการบังคับให้อยู่บรรทัดเดียว */
        white-space: normal; 
        
        /* ✅ สั่งให้ h1 กลับมาขยายเต็มความกว้างเพื่อจัดกึ่งกลาง */
        display: block; 
        
        font-size: 10vw; /* อาจต้องปรับขนาดฟอนต์ให้ใหญ่ขึ้นอีกนิดใน Mobile */
    }
    
}
/* ---------------------------------------------------- */
/* CSS สำหรับรูปภาพใน Grid (สำคัญมากเพื่อปรับขนาด) */
/* ---------------------------------------------------- */
.about-grid img {
    /* 💥 KEY FIX 1: บังคับให้รูปภาพมีความกว้าง 100% ของ Container ที่มันอยู่ */
    width: 100%;
    /* 💥 KEY FIX 2: กำหนดความสูง 100% เพื่อให้ยืดเต็มความสูงของช่อง Grid */
    /* ถ้าช่อง Grid มีความสูงไม่พอดี รูปภาพจะถูกปรับให้พอดี */
    height: 100%;
    /* 💥 KEY FIX 3: ทำให้รูปภาพครอบคลุมพื้นที่โดยไม่ผิดสัดส่วน (ตัดส่วนที่เกินออกไป) */
    /* สำคัญมากเพื่อป้องกันภาพผิดสัดส่วนเมื่อยืด/หด */
    object-fit: cover;
    /* ป้องกันช่องว่างเล็กๆ ด้านล่างรูปภาพที่เกิดจาก default ของเบราว์เซอร์ */
    display: block; 
}
/*การกำหนดโครงสร้าง Grid สำหรับ about-grid */
.about-grid {
    display: grid;
    /*2คอลัมน์ ซ้ายกว้าง 2 fr ขวา 1 fr */
    grid-template-columns: 2fr 1fr;
    /*3 แถว แต่ละแถวสูงตามเนื้อหา (auto) */
    grid-template-rows: 1fr 1fr 1fr ;
}
/*จัดวางตำแหน่งแต่ละitemใน Grid */
.grid-item-1{
    grid-column: 1/2;/* คอลัมน์ที่ 1 */
    grid-row: 1/2;/* แถวที่ 1 */
    background-color: var( --cta-color);
}
.grid-item-2{
    grid-column: 2/2;/* คอลัมน์ที่ 2 */
    grid-row: 1/2;/* แถวที่ 1 */
}
.grid-item-3 {
    grid-column: 1 / 2; /* คอลัมน์ที่ 1 */
    grid-row: 2 / 3;    /* แถวที่ 2 */
}
.grid-item-4 {
    grid-column: 2 / 3; /* คอลัมน์ที่ 2 */
    grid-row: 2 / 3;    /* แถวที่ 2 */
}
.grid-item-5 {
    grid-column: 1 / 3; /* ข้าม 2 คอลัมน์ */
    grid-row: 3 / 4;    /* แถวที่ 4 */
    background-image: url(picture/A-Image-3.jpg);
    background-size: cover;
    /* 💥 FIX: เพิ่มความสูงขั้นต่ำเพื่อให้รูปภาพมีพื้นที่ให้ขยาย */
    min-height: 70vh; /* หรือค่าที่คุณต้องการ เช่น 40vh */
    /* *เสริม: ควรเพิ่ม background-position ด้วย * */
    background-position: center center; /* จัดให้รูปภาพอยู่ตรงกลาง */
    padding: 20px;

    /* 💥 1. KEY FIX: ใช้ Flexbox จัดเรียงเนื้อหา */
    display: flex;
    flex-direction: column;
    /* 💥 2. KEY FIX: ดันเนื้อหา (h2) ไปอยู่ด้านล่างสุดของ Container */
    justify-content: flex-end; 
    /* อย่าลืมกำหนดความสูงขั้นต่ำเพื่อให้เห็นพื้นที่ด้านล่าง */
    min-height: 350px; 
    padding: 40px; /* เพื่อให้มีช่องว่างรอบข้อความ */
}
/*จัดเรียงเนื้อหาใน  item-1anditem-4 */
.grid-item-1, .grid-item-4 {
    display: flex;
    flex-direction: column;/* จัดเรียงแนวตั้ง */
    padding: 20px;
    height: 100%; /* สำคัญ: ต้องให้ Container แม่ยืดเต็มความสูงที่มี */
} 
.grid-item-1 h2, .grid-item-4 h2 {
    margin-bottom: auto; /* ดันหัวข้อขึ้นด้านบน */
    
    /* คุณสมบัติอื่นๆ ที่คุณใช้แล้ว */
    text-transform: uppercase; 
    font-weight: 900; 
    font-size: 2.2em;
}

.grid-item-1 h3, .grid-item-4 p {
    margin-top: auto; /* ดันหัวข้อขึ้นด้านบน */
}
.grid-item-5 h2 {
    color: white;
    
    /* 💥 3. FIX: ยกเลิก Margin ที่ไม่จำเป็น */
    margin-top: 0;
    margin-bottom: 0;
    
    /* 💥 4. FIX: ทำให้บรรทัดชิดกันมากขึ้น */
    line-height: 1.1; 
    
    /* คุณสมบัติอื่นๆ ที่คุณใช้แล้ว */
    text-transform: uppercase; 
    font-weight: 900; 
    font-size: 2.2em;
}
/* ---------------------------------------------------- */
/* CSS สำหรับ Scroll Animation */
/* ---------------------------------------------------- */
.grid-item-2, .grid-item-3 {
    opacity: 0; /* เริ่มต้นซ่อน */
    transform: translateY(50px); /* เริ่มต้นเลื่อนลง */
    transition: opacity 1s ease-out, transform 1s ease-out; /* กำหนดความเร็วในการเปลี่ยนสถานะ */
}
/* 2. กำหนดสถานะเมื่อคลาส 'visible' ถูกเพิ่ม (แสดง) */
.grid-item-2.visible, .grid-item-3.visible {
    opacity: 1; 
    transform: translateY(0); /* เลื่อนกลับไปตำแหน่งเดิม */
}
/* ---------------------------------------------------- */
/* 📱 MEDIA QUERY (ต้องอยู่ท้ายสุด) */
/* ---------------------------------------------------- */
@media (max-width: 768px) {
    /* 1. เปลี่ยน Grid เป็น 1 คอลัมน์เต็ม */
    .about-grid {
        grid-template-columns: 1fr; 
    }
    /* 💥 FIX 1: ยกเลิก Grid Placement ทั้งหมด */
    .grid-item-1, .grid-item-2, .grid-item-3, .grid-item-4, .grid-item-5 {
        /* ล้างค่า Grid Placement ให้เป็นค่าเริ่มต้น (วางตามลำดับ HTML) */
        grid-column: auto;
        grid-row: auto;
    }
/* 2. กำหนดลำดับใหม่ (Order) */
    .grid-item-1 { order: 2; }
    .grid-item-2 { order: 1; }
    .grid-item-4 { order: 4; }
    .grid-item-3 { order: 3; }
    .grid-item-5 { order: 5; }
}
/* 3. FIX: รีเซ็ต Margin ที่ผลักเนื้อหา */
    .grid-item-1 h2, .grid-item-4 h2 {
        margin-bottom: 20px; 
    }
    
    /* 4. ปรับขนาดฟอนต์ */
    .grid-item-1 h2, .grid-item-4 h2 { font-size: 1.8em; }
    
/* -------------------------------------------..........................................................................................--------- */
   /* reserve-page*/ 
/* --- 1. การตั้งค่าพื้นฐาน (Body & Typography) --- */
body {
    /* ใช้สีพื้นหลังที่ใกล้เคียงกับภาพ */
    background-color: #f5f5ff; 
    color: #111;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}
/* --- 2. ส่วนหัว (BOOK A SESSION) --- */
.reserve-heading{
     /* จำกัดความกว้างเนื้อหาให้อยู่ในขอบเขตที่เหมาะสม */
  
    width: 100%;
    margin: 0 auto; 
    margin-top: 60px;
    /* เพิ่ม Padding ด้านบนและด้านล่าง เพื่อเว้นช่องว่าง */
    padding: 30px; 
    background-color: white;
    border-top: 2px solid var(--text-color-dark); /* 2px หนา, ชนิด solid, สีดำ */
    border-bottom: 2px solid var(--text-color-dark); /* 2px หนา, ชนิด solid, สีดำ */
}

.reserve-heading h1 {
    /* กำหนดขนาดฟอนต์เริ่มต้นสำหรับ Desktop */
    font-size: 6vw; 
    line-height: 0.9; /* ชิดบรรทัดให้ใกล้กัน */
    font-weight: 900;
    text-transform: uppercase;
    /* สีดำ/เข้มสำหรับ "TRAIN HARD." */
    color: var(--text-color-dark);
   
}

/* ใส่สีให้กับคำว่า BETTER */
.reserve-heading h1 span {
    /* ใช้สี CTA ที่กำหนดไว้ (ม่วงอ่อน/น้ำเงิน) */
    color: var(--cta-color); 
}

/* ---------------------------------------------------- */
/* 6. Media Query - Mobile (น้อยกว่า 800px) */
/* ---------------------------------------------------- */

@media (max-width: 799px) { 
    .reserve-heading h1 {
        /* ✅ ยกเลิกการบังคับให้อยู่บรรทัดเดียว */
        white-space: normal; 
        
        /* ✅ สั่งให้ h1 กลับมาขยายเต็มความกว้างเพื่อจัดกึ่งกลาง */
        display: block; 
        
        font-size: 10vw; /* อาจต้องปรับขนาดฟอนต์ให้ใหญ่ขึ้นอีกนิดใน Mobile */
    }

}
/* --- 3. Flexbox Container หลัก --- */
.reserve-content{
    /* ทำให้เป็น Flex Container */
    display: flex;
    /* จัดองค์ประกอบลูกเรียงกันในแนวนอน */
    flex-direction: row;
    /* จัดให้องค์ประกอบลูกมีพื้นที่เท่ากันและชิดขอบ */
    justify-content: space-between;
    /* จัดแนวตั้งให้อยู่กึ่งกลางหรือยืดเต็มความสูงของ container */
    align-items: stretch;
    padding: 30px 5%; /* เว้นขอบด้านข้าง */
    gap: 30px; /* ระยะห่างระหว่างคอลัมน์ */
    max-width: 1200px; /* จำกัดความกว้างสูงสุดของเนื้อหา */
    margin: 0 auto; /* จัดกึ่งกลางหน้าจอ */
}

/* --- 4. การจัดรูปแบบองค์ประกอบลูก (คลาส, เวลา, รายละเอียด) --- */

.strentgh,
.condition,
.community {
    /* ทำให้แต่ละคอลัมน์ใช้พื้นที่เท่าๆ กัน */
    flex: 1; 
    background-color: white; /* พื้นหลังสีขาวสำหรับแต่ละกล่อง */
    padding: 20px;
    border-radius: 5px;
    /* ตั้งค่าให้แต่ละกล่องเป็น Flex เพื่อจัดเรียงเนื้อหาภายใน (header, text, button) */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* ให้ปุ่มอยู่ด้านล่างเสมอ */
    min-height: 450px; /* กำหนดความสูงขั้นต่ำเพื่อความสวยงาม */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); /* เพิ่มเงาเล็กน้อย */
}
.strentgh h2,
.condition h2,
.community h2 {
    font-size: 1.8em;
    font-weight: 900;
    margin-top: 0;
    padding-bottom: 10px;
    /* 💥 โค้ดที่ทำให้ข้อความทั้งหมดเป็นตัวพิมพ์ใหญ่ */
    text-transform: uppercase;
    /* 💥 โค้ดที่เพิ่ม: เว้นระยะห่างใต้ h2 */
    margin-bottom: 5rem;
}
/* เส้นคั่นใต้เวลา */
.strentgh p:nth-of-type(1), 
.strentgh p:nth-of-type(2),
.condition p:nth-of-type(1),
.condition p:nth-of-type(2),
.community p:nth-of-type(1) {
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

/* ข้อความรายละเอียด */
.strentgh p:last-of-type,
.condition p:last-of-type,
.community p:last-of-type {
    margin-top: 15px;
    margin-bottom: 25px;
    font-size: 0.95em;
    line-height: 1.5;
}

/* --- 5. จัดรูปแบบปุ่ม (Button) --- */
.strentgh a,
.condition a,
.community a {
    /* สร้างปุ่มโดยใช้แท็ก a (สมมติ) */
    display: block;
    text-align: center;
    padding: 15px 0;
    background-color: #9292ff; /* สีพื้นหลังปุ่ม */
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    /* จัดปุ่มให้ติดด้านล่างของ flex container (สำคัญมาก) */
    margin-top: auto; 
    /* ถ้าเป็นแท็ก p หรือ div ต้องปรับให้เป็น block */
}

/* สไตล์พื้นฐานของการ์ดแต่ละใบ */
.reserve-content > div {
    /* กำหนดชื่อ Class หลักสำหรับการ์ดทั้งหมด (.strentgh, .condition, .community) */
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* เงาเริ่มต้น */
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* 💥 สำหรับเอฟเฟกต์เด้ง */
    /* 💥 เพิ่ม background-color ใน Transition */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/* 💥 เอฟเฟกต์เด้งเมื่อโฉบเมาส์ (LIFT / POP-UP EFFECT) */
.reserve-content > div:hover {
    /* ยกการ์ดขึ้นเล็กน้อย */
    transform: translateY(-20px); 
    
    /* ทำให้เงาเข้มขึ้นและขยายใหญ่ขึ้นเพื่อสร้างมิติ */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); 
    /* 💥 เปลี่ยนสีพื้นหลังเมื่อ Hover */
    background-color:var(--cta-color);
}

.reserve-content .btn:hover {
    background-color: darken(var(--primary-color, #333), 10%); /* ทำให้สีเข้มขึ้นเมื่อโฉบเมาส์ */
}

/* สไตล์สำหรับหัวข้อ */
.reserve-content h2 {
    color: var(--secondary-color, #333);
    margin-bottom: 15px;
    border-bottom: 2px solid var(--primary-color, #333);
    padding-bottom: 10px;
}

/* สไตล์สำหรับปุ่ม Reserve */
.reserve-content .btn {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: var(--primary-color, #333); /* ใช้สีหลักหรือสีดำเป็นค่าสำรอง */
    color: var( --cta-hover);
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
    transition: background-color 0.2s;
    /* 💥 เพิ่ม transition สำหรับ transform ด้วย */
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.reserve-content .btn:hover {
    background-color: #555555; /* ทำให้สีเข้มขึ้นเมื่อโฉบเมาส์ */
    
    /* 2. ทำให้ปุ่มเด้งขึ้นเล็กน้อย */
    transform: translateY(-2px); 
    
    /* 3. (ทางเลือก) อาจเพิ่มเงาเล็กน้อยเพื่อให้ดูมีมิติมากขึ้น */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* สไตล์สำหรับหัวข้อ */
.reserve-content h2 {
    color: var(--secondary-color, #333);
    margin-bottom: 15px;
    border-bottom: 2px solid var(--primary-color, #333);
    padding-bottom: 10px;
}
/* --- 6. Responsive (ปรับให้แสดงเป็นคอลัมน์เดียวบนมือถือ) --- */
@media (max-width: 768px) {
    .reserve-content {
        /* เปลี่ยนเป็นเรียงคอลัมน์ในแนวตั้ง */
        flex-direction: column; 
        padding: 20px;
    }
    .strentgh,
    .condition,
    .community {
        min-height: auto;
    }
}

/* การ Responsive (ปรับขนาดตัวอักษรบนหน้าจอมือถือ) */
@media (max-width: 768px) {
    .cta-content-wrap h2 {
        font-size: 8vw;
    }
}

/* 🚀 NEW: กฎเฉพาะสำหรับ Tablet แนวตั้ง และหน้าจอขนาดกลาง (769px ถึง 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .reserve-content {
        /* ลด Padding ด้านข้างจาก 5% ให้กระชับขึ้นเมื่อจอแคบลง */
        padding: 30px 3%; 
        gap: 20px; /* ลดระยะห่างระหว่างการ์ด */
    }
    
    .strentgh,
    .condition,
    .community {
        /* ลด Padding ภายในกล่องเล็กน้อยเพื่อให้เนื้อหาไม่คับแคบ */
        padding: 15px;
    }

    .strentgh h2,
    .condition h2,
    .community h2 {
        /* ปรับ Margin ใต้ h2 ให้กระชับขึ้น */
        margin-bottom: 2rem; 
        font-size: 1.5em; /* ลดขนาดหัวข้อ */
    }
}