/* --- 1. ตั้งค่าสี & พื้นฐาน --- */
/* ==========================================
   🌟 ตั้งค่าการเลื่อนหน้าจอ (ชดเชยความสูงของแถบเมนู)
========================================== */
/* --- 1. ตั้งค่าสี & พื้นฐาน --- */
:root {
    --blue-main: #2161A4;    /* 🌟 เปลี่ยนเป็นสีน้ำเงินเข้มตามรูปภาพ */
    --blue-light: #F4F8FB;   /* 🌟 สีฟ้าอ่อนมากๆ สำหรับกรอบขั้นตอน */
    --text-dark: #1A304D;
    --text-gray: #6B7280;
    --white: #FFFFFF;
}
.mobile-menu-btn {
    display: none; 
    background: none;
    border: none;
    font-size: 30px;
    color: #4A6CA5;
    cursor: pointer;
    
    /* 🌟 เพิ่ม 2 บรรทัดนี้ ป้องกันโดนกล่องอื่นทับ */
    position: relative !important; 
    z-index: 9999 !important; 
}
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Prompt', sans-serif; }
html { scroll-behavior: smooth; }
body { color: var(--text-dark); background-color: var(--white); overflow-x: hidden; }
body, html {
    margin: 0 !important;
    padding: 0 !important;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 🌟 สำคัญมาก: บังคับให้สูงเต็มจอเป็นอย่างน้อย */
    margin: 0 !important;
}
/* --- 2. คลาสเครื่องมือจัดหน้า --- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section { padding: 80px 0; }
.mt-20 { margin-top: 20px; }
.mt-40 { margin-top: 40px; }
.mb-40 { margin-bottom: 40px; }
.text-center { text-align: center; }
.text-white { color: var(--white) !important; margin-bottom: 15px;}
.bg-white { background-color: var(--white); }
.bg-light-blue { background-color: var(--blue-light); }
.img-fluid { width: 100%; height: auto; display: block; object-fit: cover;}
.relative { position: relative; }

.title-blue { color: var(--blue-main); font-size: 28px; font-weight: 700; margin-bottom: 20px; }
.subtitle { color: var(--text-gray); font-size: 15px; }

/*--------------------- ปุ่มสีน้ำเงินหลัก---------------------------*/
.btn-primary {
    background-color: var(--blue-main); color: var(--white);
    padding: 12px 30px; border-radius: 50px; text-decoration: none;
    font-weight: 500; font-size: 15px; display: inline-block; 
    border: none; cursor: pointer; transition: 0.3s;
}
.btn-primary:hover { background-color: #1a4d82; color: var(--white); transform: translateY(-2px); }

/* ---------------------Navbar (เมนู) --------------------- */
.navbar {
    background: var(--white); position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}
.nav-container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100% !important;
    
    /* 🌟 1. ล็อกความกว้างสูงสุด (ตัวเลขยิ่งน้อย โลโก้กับปุ่มยิ่งขยับเข้าหากัน) */
    max-width: 1440px !important; 
    
    /* 🌟 2. จัดให้กล่องอยู่กึ่งกลางหน้าจอเสมอ */
    margin: 0 auto !important;
    
    padding: 12px 20px;
}
.logo img { height: 55px; object-fit: contain; }
.nav-links { display: flex; gap: 35px; }
.nav-links a {
    text-decoration: none; color: var(--text-dark); font-weight: 500; font-size: 15px;
    padding-bottom: 5px; border-bottom: 3px solid transparent; transition: 0.2s;
}
.nav-links a:hover, .nav-links a.active {
    color: var(--blue-main); border-bottom: 3px solid var(--blue-main);
}

/* --------------------- Hero Banner --------------------- */
.hero { background-color: #DCEAF4; text-align: center; line-height: 0; }
.hero img { margin: 0 auto; max-width: 1920px; }

/* -----------------ส่วนเสริม: วิดีโอเต็มหน้าจอ (สำหรับไฟล์วิดีโอโดยตรง) ------------------ */
.video-section {
    width: 100%;
    position: relative;
    line-height: 0; 
    overflow: hidden; /* 🌟 คำสั่งสำคัญ: บังคับตัดส่วนที่ล้นขอบทิ้งให้หมด */
    background: transparent !important;
}
.full-width-video {
    width: 100% !important; 
    height: auto !important; 
    display: block !important;
    object-fit: cover !important;
    
    /* 🌟 คำสั่งพระเอก: สั่งซูมคลิปวิดีโอขึ้น 1.02 เท่า (ซูมขึ้น 2%) 
       เพื่อดันเส้นขอบดำ หรือแถบดำที่ฝังในคลิปให้ขยายล้นหลุดเฟรมออกไป */
    transform: scale(1.02) !important; 
    transform-origin: center center; /* ให้ซูมออกจากจุดกึ่งกลาง */
    
    /* ล้างค่าดั้งเดิมของบราวเซอร์อย่างเด็ดขาด */
    border: 0 !important;
    border-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

/* --------------------- ทำไมต้องลงทุน  --------------------- */
#about .container {
    max-width: 1440px !important; /* เพิ่มความกว้างสูงสุด (ลองปรับตัวเลข 1440px เพิ่ม/ลด ได้ตามต้องการ) */
    width: 95% !important; /* ป้องกันไม่ให้ชิดขอบจอเกินไปในจอขนาดเล็ก */
}
.grid-4 { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 80px; 
    width: 100%; /* บังคับให้ Grid กว้างเต็มพื้นที่ของกล่องแม่ */
    justify-items: stretch; /* บังคับให้การ์ดข้างในขยายเต็มช่อง Grid แต่ละช่อง */
}
.box-card {
    background: #E6EDF7; 
    border-radius: 20px; 
    padding: 40px;
    width: 100% !important; /* ใช้ !important เพื่อลบล้างโค้ดอื่นที่อาจจะล็อกความกว้างไว้ */
    max-width: none !important; /* ป้องกันไม่ให้โดนจำกัดความกว้างสูงสุด */
    box-sizing: border-box; 
    /* ปรับตรงนี้: ดึงเงาลงมาต่ำอีก และเพิ่มความเข้มสีดำเป็น 12% (0.12) */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.10); 
    
    border: 1px solid #E6EDF7;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
   
}
/* 2. ส่วนของเอฟเฟกต์ตอนนำเมาส์ไปชี้ (เพิ่มโค้ดชุดนี้เข้าไปใหม่) */
.box-card:hover {
    /* 🌟 ดันกล่องลอยขึ้นด้านบน 10px */
    transform: translateY(-10px); 
    
    /* 🌟 ขยายเงาให้กว้างและเข้มขึ้น เพื่อให้ดูเหมือนกล่องลอยสูงขึ้นจากพื้น */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); 
}
.icon-square {
    width: 120px; height: 120px; /* ปรับขนาดกรอบให้ใหญ่ขึ้นเพื่อรองรับรูปสำเร็จรูปของคุณ */
    /* ลบ background-color และ border-radius ออกแล้ว */
    margin: 0 auto 20px auto;
    display: flex; align-items: center; justify-content: center;
    
/* 🌟 3 บรรทัดนี้คือเวทมนตร์ลบกรอบครับ */
    background: transparent !important; /* บังคับให้พื้นหลังโปร่งใส */
    border: none !important;            /* ปิดเส้นขอบทุกชนิด */
    box-shadow: none !important;        /* ปิดเงาไม่ให้เป็นทรงกล่อง */
}
.icon-square img { 
    width: 100%; height: 100%; object-fit: contain; /* 🌟 สั่งให้รูปภาพของคุณขยายเต็มพื้นที่พอดี */
}

/* --------------------- สไลเดอร์ แพ็กเกจ  --------------------- */
.slider-container { 
    position: relative; 
    max-width: 850px; /* 🌟 ขยายกรอบให้กว้างขึ้น เพื่อให้รูปแสดงผลได้ใหญ่และชัดเจน */
    margin: 40px auto 0; 
    box-shadow: 0 25px 50px -12px rgba(0, 0 0, 0.20) !important;
}
.package-slider-wrap { 
    overflow: hidden; 
    border-radius: 10px; /* ลดความโค้งของมุมกล่องลง จะได้ไม่ไปตัดโดนมุมของรูปภาพ */
    
}
.package-slider { display: flex; transition: transform 0.4s ease-in-out; }
.slide { min-width: 100%; }
.slide img {
    border-radius: 20px; 
    width: 100%; 
    height: auto;
    display: block;
    transition: transform 0.4s ease, box-shadow 0.4s ease;   
}
/* เอฟเฟกต์ตอนเมาส์ชี้ */
.slide img:hover {
    transform: translateY(-8px) scale(1.01); /* ขยับขึ้นและขยายขนาดนิดนึง */
}
.arrow-btn {
    position: absolute; top: 45%; transform: translateY(-50%);
    background: var(--white); border: none; width: 45px; height: 45px;
    border-radius: 50%; box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    cursor: pointer; color: var(--blue-main); font-size: 20px; z-index: 10;
}
.arrow-btn.left { left: -25px; }
.arrow-btn.right { right: -25px; }
.slider-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #D1D5DB; cursor: pointer; transition: 0.3s; }
.dot.active { background: var(--blue-main); transform: scale(1.3); }
/* =========================================
   การตั้งค่ากล่อง Slider ของคุณ
========================================= */
.package-slider-wrap {
    overflow: hidden; /* ซ่อนส่วนที่ล้นออกไป */
    width: 100%;
}
.package-slider {
    display: flex;
    gap: 20px; /* ระยะห่างระหว่างรูป */
}
.slide {
    flex: 0 0 auto;
}

/* =========================================
   การตกแต่งจุดบอกสถานะ (Dots Indicator)
========================================= */
.slider-dots {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* ระยะห่างระหว่างจุด */
}

.dot {
    width: 12px;
    height: 12px;
    background-color: #d1d5db; /* สีเทาอ่อน (จุดที่ยังไม่ถูกเลือก) */
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* 🌟 สีและรูปร่างของจุดที่กำลังโชว์อยู่ (Active) */
.dot.active {
    background-color: #1A365D; /* สีน้ำเงินแบรนด์ของคุณ */
    width: 24px; /* ทำให้จุดยาวขึ้นเป็นแคปซูล */
    border-radius: 10px;
}
/* 🌟 1. ล็อกกล่องครอบรูป ไม่ให้กว้างทะลุจอเด็ดขาด */
.slide {
    flex: 0 0 auto;
    /* 💡 ถ้าคุณอยากให้แสดงผลทีละ 1 รูป (เต็มจอ) ให้ใช้ width: 100% */
    /* 💡 ถ้าอยากให้รูปเล็กกว่านี้ ให้กำหนดขนาด เช่น width: 350px; */
    width: 100% !important; 
    max-width: 100% !important; /* บังคับว่าห้ามกว้างเกินขอบจอ 100% */
}

/* 🌟 2. ล็อกรูปภาพให้อยู่แค่ภายในกล่องเท่านั้น */
.slide img {
    border-radius: 20px;
    width: 100% !important;
    max-width: 100% !important; /* กันเหนียวไม่ให้รูปขยายเกินกล่อง */
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto; /* จัดรูปให้อยู่กึ่งกลางกล่องเสมอ */
    border: 0px solid #ffffff; 
    background-color: #ffffff;
    transition: transform 0.4s ease, box-shadow 0.4s ease; 
}

/* --------------------- เครื่องซักผ้า  --------------------- */
/* 1. กรอบนอกสุด: ซ่อนส่วนที่ล้นออกไปนอกจอ */
.marquee-wrapper {
    width: 100%;
    overflow: hidden; 
    position: relative;
    padding: 20px 0; 
}

/* 2. รางเลื่อน: จับเครื่องซักผ้าเรียงแนวนอน และสั่งให้เลื่อน */
.marquee-track {
    display: flex;
    gap: 40px; /* ระยะห่างระหว่างเครื่อง */
    width: max-content; /* บังคับให้รางยาวตามเนื้อหาจริง */
    animation: scroll-left 15s linear infinite; /* 🌟 ความเร็ว 15 วินาที วนลูปเรื่อยๆ */
}

/* ลูกเล่นเสริม: เวลาเอาเมาส์ชี้ ให้หยุดเลื่อน */
.marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
}
/* 3. กล่องเครื่องซักผ้า */
.machine-item {
    text-align: center;
    width: 160px; /* ขนาดความกว้างเครื่อง */
    flex-shrink: 0; /* ห้ามบราวเซอร์บีบรูปให้เล็กลง */
    transition: transform 0.3s ease;
}

/* เวลาเอาเมาส์ชี้ให้รูปขยายขึ้นนิดนึง */
.machine-item:hover {
    transform: scale(1.05);
}

.machine-item img {
    width: 100%;
    height: 180px;
    object-fit: contain;
    margin-bottom: 15px;
}

.machine-item p {
    font-size: 15px;
    color: #4A6CA5; /* สีน้ำเงิน (ปรับเป็นสีเขียว #119E77 ได้ตามต้องการครับ) */
    font-weight: 700;
}

/* 4. คำสั่งแอนิเมชันเลื่อนซ้าย */
@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }
    100% {
        /* เลื่อนไป 50% ของความยาว (พอดีกับรอยต่อชุดที่ 1 และ 2) ลบด้วยครึ่งนึงของช่องว่าง (20px) */
        transform: translateX(calc(-50% - 20px));
    }
}
/* =========================================
   ส่วนเสริม: ทำขอบซ้าย-ขวาให้เป็นสีขาวฟุ้งๆ (Fade Edges)
   ========================================= */

/* สร้างเงาฟุ้งฝั่งซ้ายและขวา */
.marquee-wrapper::before,
.marquee-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 60px; /* ความกว้างของความฟุ้ง (ปรับลด-เพิ่มได้ตามชอบ เช่น 100px หรือ 200px) */
    height: 100%;
    z-index: 2; /* ให้อยู่เหนือเครื่องซักผ้า */
    pointer-events: none; /* เพื่อให้ยังเอาเมาส์ชี้เครื่องซักผ้าที่อยู่ใต้เงาได้ */
}

/* เงาฟุ้งฝั่งซ้าย (ไล่จากสีขาวไปโปร่งใส) */
.marquee-wrapper::before {
    left: 0;
    background: linear-gradient(to right, white 0%, transparent 100%);
}

/* เงาฟุ้งฝั่งขวา (ไล่จากโปร่งใสไปสีขาว) */
.marquee-wrapper::after {
    right: 0;
    background: linear-gradient(to right, transparent 0%, white 100%);
}
.machine-item {
    text-align: center;
    width: 160px; /* ล็อกความกว้างของแต่ละบล็อกเครื่อง */
    flex-shrink: 0;
} 

.machine-item img {
    width: 100%;
    height: 180px;
    object-fit: contain; /* บังคับให้รูปเครื่องซักผ้าแสดงเต็มตัว ไม่โดนตัดขอบ */
    margin-bottom: 12px;
}

.machine-item p {
    font-size: 14px;
    color: #4A6CA5; /* สีน้ำเงินหลักประจำแบรนด์ */
    font-weight: 600;
}

/* --------------------- ขั้นตอน 6 สเต็ป  --------------------- */
.steps-box {
    background-color: var(--blue-light); 
    border-radius: 40px;
    padding: 30px 20px;
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.10) !important;
    margin-bottom: 30px !important; 
width: calc(95% - 60px); 
    margin:  auto; 
}
.steps-row {
    display: flex;
    justify-content: center; 
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 40px;
}
.step-item { text-align: center; width: 120px; }
.step-circle {
    width: 120px; height: 120px; 
    border-radius: 50%; 
    background: var(--white);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
    margin: 0 auto 25px auto; 
    border: 3px solid #E2E8F0; 
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* 2. เมื่อเอาเมาส์ไปชี้ (Hover) */
.step-circle:hover {
    /* ขยายขนาดขึ้น 15% (1.15) และลอยขึ้นด้านบน 8px */
    transform: scale(1.05) translateY(-5px); 
    
    /* เงาฟุ้งและกว้างขึ้นเมื่อวงกลมลอย */
    box-shadow: 0 15px 25px rgba(0, 50, 120, 0.12);
}
/* --- 5. ปรับตำแหน่งลูกศรให้ตรงกับกึ่งกลางวงกลม --- */
.step-arrow { 
    color: var(--blue-main); 
    font-size: 24px; /* ขยายขนาดลูกศร */
    font-weight: bold;
    margin-top: 45px; /* 🌟 ดันลูกศรลงมาให้ขนานกับแกนกลางของวงกลมพอดี */
    margin-left: 10px;
    margin-right: 10px;
}
/* --- 6. ปรับขนาดและช่องไฟของตัวอักษร --- */
.step-item h4 { 
    font-size: 16px; /* 🌟 ขยายขนาดหัวข้อ */
    color: var(--blue-main); 
    margin-bottom: 8px; /* 🌟 ถ่างระยะห่างระหว่าง "ขั้นตอนที่..." กับ "รายละเอียด" */
    font-weight: 600;
}
.step-item p { 
    font-size: 14px; /* 🌟 ขยายขนาดรายละเอียด */
    color: var(--text-gray); 
    line-height: 1.5; /* เพิ่มระยะบรรทัดให้อ่านง่าย */
}
.step-circle img {
    width: 80px !important;  /* ลองดันเลขให้เยอะขึ้นไปเลยครับ เช่น 80px หรือ 90px */
    height: 80px !important;
    object-fit: contain !important;
}

/* --------------------- ภาพบรรยากาศ  --------------------- */
.gallery-card { 
    background: var(--white); 
    border-radius: 20px; 
    overflow: hidden; 
    border: none;
    
    /* 🌟 ปรับใหม่: ระยะ 10px, ความฟุ้งลดเหลือ 15px, บีบเงาเข้า -5px, ความเข้ม 25% (0.25) */
    box-shadow: 0 10px 15px -5px rgba(0, 0, 0, 0.25);
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-card img { 
    width: 100%; 
    height: 200px; 
    display: block; 
    object-fit: cover; 
}

/* เอฟเฟกต์เวลาเอาเมาส์ไปชี้ (Hover) */
.gallery-card:hover {
    transform: translateY(-10px); 
    
    /* 🌟 เงาตอนลอย: ระยะ 15px, ความฟุ้ง 20px, บีบเงาเข้า -5px, ความเข้ม 35% (0.35) */
    box-shadow: 0 15px 20px -5px rgba(0, 0, 0, 0.35); 
}
.g-info { padding: 15px; text-align: center; }
.g-info h4 { font-size: 16px; color: var(--text-dark); font-weight: 600;}
/* 1. ดันข้อความรอง (Subtitle) ให้ขยับขึ้นไปชิดหัวข้อหลักมากขึ้น */
#gallery .title-blue {
    margin-bottom: 0px !important; /* ลดช่องว่างใต้หัวข้อหลัก */
}
#gallery .subtitle {
    margin-top: 5px; /* ขยับข้อความรองให้ชิดขึ้น */
    margin-bottom: 50px !important; /* ดันกลุ่มรูปภาพให้ห่างจากข้อความลงมาอีกนิด */
}

/* 2. ปรับความห่างและขยายขนาดกล่อง */
#gallery .grid-4 {
    /* 🌟 ปรับความห่างระหว่างรูป (ตอนนี้ใส่ไว้ 40px ลองลดหรือเพิ่มดูได้ครับ) */
    gap: 40px; 
    
    /* 🌟 ปรับขนาดความกว้างของรูป (เปลี่ยนเลข 280px ให้เยอะขึ้นรูปจะกว้างขึ้นครับ) */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
}

/* 3. ปรับความสูงของรูปภาพให้เต็มตา */
#gallery .gallery-card img {
    /* 🌟 ปรับความสูงของรูป (จากของเดิม 200px ขยายเป็น 250px) */
    height: 250px;
    width: 100%;
    object-fit: cover; /* ล็อกสัดส่วนรูปไม่ให้บีบเบี้ยว */
    border-radius: 15px; /* เพิ่มความโค้งมนให้ขอบรูปนิดนึงเพื่อความสวยงาม */
}
/* =========================================
   ปรับส่วนภาพบรรยากาศร้านให้กางเกือบเต็มจอ
   ========================================= */

/* 1. สั่งปลดล็อกคลาส container เฉพาะในส่วนของภาพบรรยากาศ */
#gallery .container {
    max-width: 1600px !important; /* ขยายเพดานความกว้างจาก 1200px เป็น 1600px */
    width: 95% !important;        /* สั่งให้กางออก 95% ของความกว้างจอ จะเหลือขอบซ้ายขวานิดๆ กำลังสวยครับ */
}

/* 2. ปรับการกระจายตัวของรูปภาพให้ยืดเต็มพื้นที่ใหม่ */
#gallery .grid-4 {
    gap: 40px; /* ระยะห่างระหว่างรูปปรับให้กระชับขึ้นนิดนึงเพื่อให้รูปดูใหญ่ขึ้น */
    
    /* 🌟 เพิ่มขนาดขั้นต่ำของรูปจาก 280px เป็น 320px เพื่อให้รูปขยายใหญ่เต็มตาตามขนาดจอที่กว้างขึ้น */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); 
}

/* 3. ปรับความสูงของรูปให้สมส่วนกับความกว้างที่เพิ่มขึ้น */
#gallery .gallery-card img {
    height:200px; /* 🌟 ปรับเพิ่มความสูงเป็น 280px หรือ 300px เพื่อไม่ให้รูปดูแบนเกินไปเวลามันกางออกด้านข้าง */
    width: 100%;
    object-fit: cover;
}
/* =========================================
   ปรับระยะส่วนภาพบรรยากาศ (แก้ปัญหาตัวหนังสือชนขอบบน)
   ========================================= */

#gallery {
    /* 🌟 1. เอาค่าติดลบเยอะๆ ออก เปลี่ยนเป็นลบนิดเดียว หรือเป็น 0px เพื่อให้ตัวหนังสือถอยลงมา */
    margin-top: -80px; 
    
    /* 🌟 2. เติมบรรทัดนี้เข้าไป เพื่อเพิ่มช่องไฟให้ตัวหนังสือมีพื้นที่หายใจ ไม่ติดกล่องบน */
    padding-top: 40px !important; 
    
    position: relative; 
    z-index: 10; 
    margin-bottom: 0px !important;
}

#gallery .subtitle {
    margin-top: 5px;
    
    /* 🌟 3. ปรับลดตัวเลขตรงนี้ลงครับ (จากเดิม 50px เหลือสัก 20px หรือ 30px)
       เพื่อเป็นจัดการ "ดึงเฉพาะกล่องรูปภาพข้างล่าง" ให้ขยับขึ้นมาหาตัวหนังสือแทนครับ */
    margin-bottom: 25px !important; 
}

/* ------------------------ แบนเนอร์ CTA ----------------------- */
/* 1. จัดการองค์ประกอบแม่ของแบนเนอร์ */
#cta-section {
    background-color: #ffffff !important;
    padding: 0px 0; /* เว้นระยะบน-ล่างให้ดูไม่อึดอัด */
    padding-top: 10px !important;
    background-color: transparent; /* เคลียร์พื้นหลังสีขาวออกให้หมด */
    
    width: 100%;
    display: flex !important;
    justify-content: center !important;  
}

/* 2. จัดการกล่องแบนเนอร์ให้กว้างเต็มหน้าจอและไม่มีขอบ */
.cta-full-image-box {
    width: 95%; /* กว้างเต็มหน้าจอ */
    max-width: none; /* ไม่จำกัดความกว้างสูงสุด */
    margin: 0; /* ไม่มี margin */
    padding: 0 !important; /* 🌟 สำคัญมาก: บังคับลบ Padding ออกให้หมด */
    position: relative;
    background-color: transparent; /* เคลียร์พื้นหลังสีขาว */
    overflow: hidden; /* บังคับตัดขอบและส่วนที่ล้นออกไป */
    animation: smoothFloat 1s ease-in-out infinite;
    filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5)) !important;
}

/* 3. จัดการรูปภาพแบนเนอร์ให้ขยายเต็ม 100% ไม่มีช่องว่าง */
.cta-bg-img {
    width: 100%; /* ขยายเต็มกรอบ */
    height: auto; /* รักษาอัตราส่วน */
    display: block; /* 🌟 สำคัญมาก: ช่วยลบช่องว่างส่วนเกินด้านล่าง */
    object-fit: cover; /* บังคับภาพให้ถมเต็มพื้นที่กรอบ */
    border: none !important; /* 🌟 สำคัญมาก: บังคับลบเส้นขอบออกให้หมด */
    transform: scale(1.02);
}
/* 3. ตำแหน่งปุ่ม (แก้อาการปุ่มยักษ์) */
.cta-floating-buttons {
    position: absolute !important;;
    top: 50%;
    right: 8%;

    transform: translateY(-50%);
    
    /* 🌟 ล็อกความกว้างของปุ่มไว้ตรงนี้ (ปรับตัวเลขได้ตามต้องการครับ) */
    width: 250px; 
    z-index: 10;
}

/* 4. ตัวรูปปุ่ม LINE */
.btn-cta-white {
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.btn-cta-white img {
    width: 300px; /* ให้ปุ่มกางเต็มที่ 250px พอดี */
    height: auto;
    display: block;
    transition: transform 0.3s ease;
    max-width: none !important;
    filter: drop-shadow(0px 8px 15px rgba(0, 0, 0, 0.2));
    transition: all 0.3s ease !important;
}

.btn-cta-white:hover img {
    transform: scale(1.05) translateY(-3px) !important; /* เด้งนิดนึงตอนเอาเมาส์ชี้ */
    filter: drop-shadow(0px 15px 25px rgba(0, 0, 0, 0.25));
}

/* 5. อนิเมชันเด้งของกล่องใหญ่ */
@keyframes smoothFloat {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0px); }
}

/* ------------------------ฟุตเตอร์หลัก------------------------ */
.footer {
    position: relative !important;
    margin-top: 20px !important; 
    padding-top: 25px !important;
    background: #1D5C9A; 
    color: white; 
    padding: 50px; 
    padding-bottom: 50px !important;   
}
.footer-container { 
    display: flex; 
    width: 95%; 
    margin: 0 auto; 
    gap: 400px; /* ระยะห่างระหว่างฝั่งซ้ายกับขวา */
    padding: 5px; /* 🌟 เพิ่ม padding ซ้าย เพื่อให้ขยับออกจากขอบจอได้ตามต้องการ */
    align-items: flex-start !important;
    margin-bottom: 40px;
    padding-top: 20px !important;
}
.ft-left { flex: 1.5; }
.ft-right { flex: 1; display: flex; gap: 40px; margin-top: 70px !important;} /* แบ่งเมนูเป็น 2 คอลัมน์ย่อย */
.ft-right .ft-nav:first-child {
    margin-right: 40px !important; /* 🌟 ปรับเพิ่ม-ลดตัวเลขนี้เพื่อกำหนดความห่างได้เลยครับ (เช่น 40px, 80px) */
}
.ft-logo { width: 150px; margin-bottom: 10px; }
.ft-title { font-size: 28px; margin: 0 0 10px 0;margin-bottom: 15px ; }
.ft-desc { font-size: 16px; margin-bottom: 20px; opacity: 0.9;line-height: 1.8 ; }
.ft-contact { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 17px; }
.ft-contact img { width: 20px; }

.ft-head { font-size: 20px; margin-top: 0 !important; margin-bottom: 15px; opacity: 0.9;line-height: 1.8 ; }
.ft-nav a { display: block; color: white; text-decoration: none; font-size: 16px; margin-bottom: 8px; line-height: 2.2 ;  }
.ft-social img { 
    width: 35px; 
    margin-right: 10px; 
    transition: all 0.3s ease; /* สั่งให้การเคลื่อนไหวสมูท ไม่กระตุก */
    cursor: pointer;           /* เปลี่ยนลูกศรเมาส์เป็นรูปมือเวลานำไปชี้ */
    border-radius: 50%;        /* บังคับให้ขอบเงาที่จะเกิดขึ้นมีความกลมตามรูปไอคอน */
}
.ft-social img:hover {
    transform: translateY(-2px); /* ขยับไอคอนเด้งขึ้นด้านบน 5 พิกเซล (เด้งเบาๆ) */
    
    /* สร้างเงาสีดำจางๆ ด้านล่างไอคอน */
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2); 
}
.ft-social {
    display: flex;
    flex-direction: row; /* บังคับเรียงจากซ้ายไปขวา */
    gap: 0px; /* 🌟 ปรับระยะห่างระหว่างไอคอนตรงนี้ได้เลย */
    align-items: center;
    margin-top: 15px; /* เผื่อระยะห่างจากหัวข้อด้านบนนิดหน่อย */
}

/* กันเหนียว: เคลียร์ค่าลิงก์ด้านในไม่ให้เป็น Block */
.ft-social a {
    display: inline-block !important;
    line-height: 0 !important;
    margin: 0 !important;
}

/* ล็อกขนาดรูปภาพให้เท่ากัน */
.ft-social img {
    width: 40px !important; /* 🌟 ปรับขนาดไอคอนตรงนี้ */
    height: auto !important;
    display: block !important;
}

.ft-bottom {
width: 100% !important;    
position: absolute !important; 
bottom: 0 !important;
left: 0 !important;
text-align: center; 
margin-top: 40px; 
font-size: 15px; 
opacity: 0.8; 
margin-bottom: 0 !important;
padding-bottom: 20px !important;
background-color: rgba(0, 0, 0, 0.2);
padding: 6px 0 !important;
margin-top: 0 !important;
}
.ft-bottom p {
    margin: 0 !important;
    padding-bottom: 10px; /* เว้นระยะห่างด้านล่างให้อยู่ในกรอบสีน้ำเงินแทน */
}
.sky-bg-wrapper {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/*------------------ ส่วนเพิ่มเติม -----------------------*/
/* =========================================
   แก้ไขโครงสร้างใหม่ตามภาพ (หน้าแรก - Copy.jpg)
   ========================================= */

.pt-0 { padding-top: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }

/* --- 1. พื้นหลังท้องฟ้า (คลุม 2 Section) --- */
.sky-bg-wrapper {
    background-color: #EBF2F9; /* สีฟ้าอ่อนเผื่อรูปยังไม่โหลด */
    background-size: 100% auto !important;
    background-position: center top;
    background-repeat: no-repeat;
    width: 100%;
    /* 🌟 ล็อกขอบเขตกล่องแม่ ไม่ให้เป๋เวลาโดนลบ Margin ดึงขึ้นดึงลง */
    position: relative;
    overflow: hidden; /* ช่วยตัดกราฟิกที่แอบแลบหรือล้นออกไปทิ้งให้หมด */
    
    /* เพิ่มระยะห่างบน-ล่างภายในกล่องให้ดูโปร่งสวยงาม */
    padding-top: 60px !important;
    padding-bottom: 80px !important;
}
/* สั่งให้กล่องทำไมต้องลงทุนโปรงใส เพื่อให้เห็นพื้นหลังท้องฟ้า */
#about, #package {
    background: transparent !important;
    padding-top: 40px !important;
    
}
/* ซ่อนรูปมือถือเอาไว้ ไม่ให้โชว์ในจอคอม */
.cta-mobile {
    display: none !important; 
}

/* โชว์รูปคอมตามปกติ */
.cta-desktop {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}
/* =======================================================
   1. จัดการกล่องแบนเนอร์สีน้ำเงิน (สำหรับจอคอมพิวเตอร์ปกติ)
======================================================= */
.banner-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* ให้เนื้อหาและปุ่มอยู่ห่างกันซ้าย-ขวา */
    flex-wrap: wrap; /* 🌟 สำคัญมาก: สั่งว่าถ้าจอแคบจนเบียด ให้ดันของที่ล้นตกลงมาบรรทัดล่าง ห้ามทับกัน! */
    gap: 20px; /* ระยะห่างระหว่างข้อความกับปุ่มเวลาที่มันเบียดกัน */
}



/*-----------------------------------------------------------------------*/

/* ==========================================
   📱 แก้ไขแถบเมนูด้านบน สำหรับหน้าจอมือถือ (เล็กกว่า 768px)
========================================== */
@media (max-width: 768px) {
    
    /* 1. จับกล่องหลักมาเรียงซ้อนกันแนวตั้ง (โลโก้ -> เมนู -> ปุ่ม) */
    .nav-container {
        display: flex !important;
        flex-direction: column !important; /* สั่งให้เรียงจากบนลงล่าง */
        align-items: center !important;
        gap: 15px !important; /* ระยะห่างระหว่างชั้น */
        padding: 15px !important;
    }

    /* 2. จัดการกลุ่มลิงก์เมนูให้ปัดตกบรรทัด */
    .nav-links {
        display: flex !important;
        flex-wrap: wrap !important; /* 🌟 ตัวแปรสำคัญ: ถ้าที่กว้างไม่พอ ให้ปัดตกบรรทัดใหม่ */
        justify-content: center !important;
        gap: 10px 15px !important; /* ระยะห่าง บน-ล่าง ซ้าย-ขวา ของแต่ละลิงก์ */
    }

    /* ลดขนาดตัวหนังสือลิงก์ลงนิดนึงจะได้ประหยัดพื้นที่ */
    .nav-links a {
        font-size: 14px !important;
    }

    /* 3. ขยายปุ่มให้กว้างเต็มจอมือถือ เพื่อให้ลูกค้ากดง่าย */
    .btn-primary {
        width: 100% !important; /* กางเต็มพื้นที่ */
        text-align: center !important;
        margin-top: 5px !important;
        box-sizing: border-box; /* ป้องกันปุ่มล้นขอบจอ */
    }
    /* ==========================================
       📱 1. แก้ไขปุ่ม CTA (แบนเนอร์ + ปุ่ม LINE)
    ========================================== */

    .cta-full-image-box {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 40px !important;
    }
    
    .cta-bg-img {
        width: 100% !important;
        height: auto !important;
    }
    
   .cta-floating-buttons {
        position: static !important; /* ยกเลิกการลอยทุกชนิด ปล่อยตามธรรมชาติ */
        
        /* 🌟 เปลี่ยนจากค่าติดลบ เป็นค่าบวก เพื่อเว้นระยะห่างจากแบนเนอร์ลงมา */
        margin-top: 15px !important; 
        
        width: 100% !important;
        max-width: 450px !important;
        display: flex !important;
        justify-content: center !important;
        transform: none !important;
    }

    .btn-cta-white img {
        width: 100% !important;
        height: auto !important;
        transform: scale(1.3) !important; /*ขยายรูป*/
    }

    /* ==========================================
       📱 2. แก้ไข Footer (ส่วนล่างสุดของเว็บ)
    ========================================== */
    .footer-container {
        display: flex !important;
        flex-direction: column !important; /* จับฝั่งข้อมูลบริษัท กับ ฝั่งเมนู ซ้อนกัน */
        gap: 30px !important;
        padding: 30px 20px !important;
    }

    .ft-left, .ft-right {
        width: 100% !important; /* ให้แต่ละฝั่งกางเต็มจอมือถือ */
    }

    .ft-right {
        display: flex !important;
        flex-direction: column !important; /* จับ "เมนูหลัก" และ "ลิงก์ด่วน" ซ้อนกัน */
        gap: 30px !important;
    }

    .ft-nav {
        width: 100% !important;
        text-align: center !important; /* จัดตัวหนังสือเมนูให้อยู่กึ่งกลางจะได้กดง่าย */
    }
    
    /* จัดข้อมูลบริษัทฝั่งซ้ายให้อยู่กึ่งกลางด้วย */
    .ft-left {
        text-align: center !important;
    }
    .ft-left img.ft-logo {
        margin: 0 auto 15px auto !important; /* จัดโลโก้ฟูตเตอร์ให้อยู่ตรงกลาง */
    }
    /* ==========================================
       🌟 แก้ไขเงาปุ่ม LINE ที่ดูแปลกๆ และโดนตัดขอบ
    ========================================== */
    .btn-cta-white {
        background-color: transparent !important; /* ลบพื้นหลังสีขาวที่แอบซ่อนอยู่ออก */
        box-shadow: none !important; /* ลบเงาสี่เหลี่ยมแข็งๆ ออก */
        border: none !important;
        display: inline-block !important; /* ให้กล่องมีขนาดพอดีกับรูป */
    }

    /* เพิ่มพื้นที่ด้านล่างนิดหน่อย ป้องกันขอบรูปหรือเงาโดนตัด */
    .cta-full-image-box {
        padding-bottom: 20px !important; 
    }

    
    /* ==========================================
       📱 3. แก้ไขปัญหารูปแกลเลอรี (ภาพบรรยากาศร้าน) โดนตัดขาด
    ========================================== */
    .gallery-card {
        height: auto !important; /* ปลดล็อกความสูงของกล่องครอบรูป */
        width: 100% !important;
        display: block !important;
    }

    .gallery-card img {
        width: 100% !important;
        height: auto !important; /* 🌟 จุดสำคัญ: ให้ความสูงขยายตามสัดส่วนจริงของรูป */
        object-fit: contain !important; /* บังคับให้แสดงผลเต็มใบ ห้ามตัดขอบ */
        display: block !important;
        border-radius: 16px !important; /* เผื่ออยากให้มุมรูปโค้งๆ สวยๆ ครับ */
    }
    /* ==========================================
       📱 4. แก้ไขขั้นตอนการเปิดร้าน (จัดเรียงแนวตั้ง)
    ========================================== */
    /* 1. คลาสที่คลุมกล่องขั้นตอนทั้งหมด (เปลี่ยนชื่อให้ตรงกับของคุณ) */
    .step-container { 
        display: flex !important;
        flex-direction: column !important; /* บังคับเรียงจากบนลงล่าง */
        align-items: center !important;
        gap: 15px !important; 
    }

    /* 2. ปลดล็อกความสูงของกล่องแต่ละสเต็ป เพื่อไม่ให้ตัวหนังสือขาด */
    .step-item {
        height: auto !important;
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    /* 3. หมุนลูกศรให้ชี้ลงด้านล่างแทนชี้ไปทางขวา */
    .step-arrow {
        transform: rotate(90deg) !important; /* หมุนลูกศร 90 องศา */
        margin: 10px 0 !important;
    }
    /* ==========================================
       📱 5. แก้ไขปุ่ม "ติดต่อเรา" ล้นขอบจอ
    ========================================== */
    .btn-contact-large {
        width: 100% !important;       /* บังคับให้กางออกตามขนาดกล่องที่คลุมอยู่ */
        max-width: 100% !important;   /* ป้องกันไม่ให้กว้างทะลุจอเด็ดขาด */
        box-sizing: border-box !important; /* คำนวณขอบซ้ายขวาให้อยู่ใน 100% */
        padding: 15px 20px !important; /* ปรับขนาด padding ให้พอดีกับมือถือ */
        
        /* จัดไอคอนและตัวหนังสือให้อยู่กึ่งกลางสวยๆ */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 10px !important; /* ระยะห่างระหว่างไอคอน Chat กับตัวหนังสือ */
    }

    /* ปรับขนาดไอคอนแชทไม่ให้ใหญ่เกินไปในมือถือ */
    .btn-contact-large .btn-icon {
        width: 24px !important;
        height: auto !important;
    }
    /* ==========================================
       📱 6. ปรับจุดจอดลิงก์ข้ามหน้า (เฉพาะในมือถือ)
    ========================================== */
    #VDO, 
    #package, 
    #shop, 
    #gallery, 
    #con {
        /* ในมือถือเมนูมันหนาขึ้น เลยต้องเผื่อระยะให้เยอะขึ้นครับ */
        /* ลองเริ่มที่ 150px แล้วปรับเพิ่ม/ลดดู จนกว่าจะพอดีกับความสูงเมนูของคุณครับ */
        scroll-margin-top: 150px !important; 
    }

    /* ซ่อนแถบเมนูและปุ่มแฟรนไชส์ไว้ก่อนเป็นค่าเริ่มต้น */
    .nav-links, .btn-primary {
        display: none !important; /* หายวับไปเลย */
        width: 100% !important;
    }

    /* 🌟 เวทมนตร์อยู่ตรงนี้: เมื่อมีคลาส .show-menu (ถูกเติมด้วย JS) เมนูถึงจะโผล่มา */
    .nav-links.show-menu {
        display: flex !important;
        flex-direction: column !important; /* เรียงลิงก์ลงมาเป็นแนวตั้ง */
        gap: 15px !important;
        padding-top: 15px !important;
    }
    .btn-primary.show-menu {
        display: block !important;
    }
    /* ==========================================
       📱 จัดให้โลโก้อยู่ตรงกลาง และปุ่ม ☰ อยู่ซ้าย
    ========================================== */
    .nav-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important; /* 🌟 ดันโลโก้ไปอยู่กึ่งกลาง */
        align-items: center !important;
        flex-wrap: wrap !important;
        padding: 15px !important;
        position: relative !important; /* 🌟 สำคัญ: ตั้งเป็นเสาหลักให้ปุ่มเมนูอ้างอิงตำแหน่ง */
    }

    /* โชว์ปุ่ม ☰ ในมือถือ และจับลอยไปซ้ายสุด */
    .mobile-menu-btn {
        display: block !important; 
        position: absolute !important; /* 🌟 ดึงปุ่มให้ลอยออกมา จะได้ไม่แย่งที่โลโก้ */
        left: 15px !important; /* 🌟 ดูดติดขอบซ้าย (ถ้าอยากให้ชิดขอบอีก ให้เปลี่ยนเป็น 10px หรือ 5px) */
        top: 20px !important; /* 🌟 ระยะห่างจากขอบบน (ลองเพิ่ม/ลดตัวเลขนี้เพื่อให้ปุ่มตรงกับกึ่งกลางโลโก้พอดีครับ) */
        margin: 0 !important;
    }
    .box-card{
        display: flex !important;
        flex-direction: column !important; /* 🌟 คำสั่งไม้ตาย: บังคับเรียงลงมาด้านล่างต่อๆ กัน */
        align-items: center !important; /* จัดให้ทุกกล่องอยู่กึ่งกลางจอพอดี */
        gap: 20px !important; /* เว้นช่องว่างระหว่างกล่องแต่ละใบ (ปรับตัวเลขได้) */
    }

    /* 🌟 2. ใส่ชื่อคลาสของ "การ์ดแต่ละใบ" (กล่องพื้นหลังสีฟ้าอ่อน) */
    .box-card {
        width: 90% !important; /* สั่งให้กล่องกางออก 90% ของหน้าจอมือถือ */
        max-width: 350px !important; /* ป้องกันไม่ให้กล่องใหญ่เกินไป */
        margin: 0 auto !important; /* ดันกล่องให้อยู่ตรงกลางเป๊ะๆ */
    }
    /* ==========================================
       📱 จัดเรียงกล่อง "ทำไมต้องลงทุน..." เป็นแนวตั้ง
    ========================================== */
    
    /* 1. จัดการกล่องแม่ (.grid-4) ให้จับลูกๆ เรียงแถวตอนลึก */
    .grid-4 {
        display: flex !important;
        flex-direction: column !important; /* 🌟 บังคับเรียงจากบนลงล่าง */
        align-items: center !important; /* จัดให้ทุกกล่องอยู่กึ่งกลางจอพอดี */
        gap: 20px !important; /* ระยะห่างระหว่างกล่องแต่ละใบ */
    }

    /* 2. จัดการกล่องสีฟ้า (.box-card) ให้ขนาดพอดีกับจอมือถือ */
    .box-card {
        width: 100% !important; /* ให้กางเต็มพื้นที่ที่กำหนดไว้ */
        max-width: 350px !important; /* ล็อกขนาดไม่ให้กว้างเกินไปจนดูเทอะทะ */
        margin: 0 auto !important; /* ดันกล่องให้อยู่ตรงกลางเป๊ะๆ */
    }
    /* แก้ไขเฉพาะในบล็อก @media (max-width: 768px) นะครับ */

    .box-card {
        width: 90% !important; /* เผื่อขอบซ้ายขวานิดหน่อย ไม่ให้ชิดจอเกินไป */
        max-width: 280px !important; /* 🌟 ลดขนาดความกว้างสูงสุดลง (จากเดิม 350px ลองปรับลดเป็น 250px-280px ดูครับ) */
        margin: 0 auto !important; 
        padding: 20px 15px !important; /* 🌟 ลดพื้นที่ว่างด้านในกล่องลง กล่องจะได้ดูเพรียวขึ้น (บน-ล่าง 20px, ซ้าย-ขวา 15px) */
    }

    /* 💡 (ออปชันเสริม) เพื่อให้สมส่วนกับกล่องที่เล็กลง คุณสามารถย่อขนาดไอคอนและตัวหนังสือลงด้วยได้ครับ */
    .box-card .icon-square img {
        max-width: 100px !important; /* ย่อขนาดไอคอนรูปภาพ (ปรับตัวเลขได้) */
        margin-bottom: 15px !important;
    }
    
    .box-card h4 {
        font-size: 18px !important; /* ย่อขนาดหัวข้อ */
    }

    .box-card p {
        font-size: 14px !important; /* ย่อขนาดรายละเอียด */
        margin-bottom: 0 !important;
    }
    /* 1. จัดการระยะห่างด้านล่างของรูปไอคอน */
.box-card .icon-square {
    margin-bottom: 0px !important; /* 🌟 ลองปรับตัวเลขนี้ดูครับ (เช่น 10px จะชิดขึ้น, 25px จะห่างออก) */
}

/* 2. จัดการระยะห่างของหัวข้อ (รู้รายรับแบบ Real-time) */
.box-card h4 {
    margin-top: 0 !important; /* ลบขอบบนของตัวหนังสือทิ้ง เพื่อไม่ให้มันไปดันรูป */
    margin-bottom: -10px !important; /* 🌟 ระยะห่างระหว่าง "หัวข้อ" กับ "รายละเอียดด้านล่าง" */
}

/* 3. จัดการระยะห่างของข้อความรายละเอียด (ตรวจสอบยอดขาย...) */
.box-card p {
    margin-top: 0 !important;
}
/* ==========================================
       📱 จัดระเบียบสไลเดอร์แพ็กเกจให้อยู่กึ่งกลางเป๊ะ
    ========================================== */

    /* 1. กล่องใหญ่สุดที่คุมสไลเดอร์และปุ่มลูกศร */
    .slider-container {
        display: flex !important;
        justify-content: center !important; /* จัดให้ทุกอย่างอยู่กึ่งกลางร่วมกัน */
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        position: relative !important;
    }

    /* 2. กล่องหน้าต่างสไลด์ (ที่สั่งซ่อนส่วนที่ล้นจอ) */
    .package-slider-wrap {
        width: 85% !important; /* 🌟 เผื่อพื้นที่ซ้าย-ขวาไว้ให้ปุ่มลูกศรได้แสดงผลสวยๆ ไม่ทับรูป */
        max-width: 100% !important;
        margin: 0 auto !important; /* จัดตัวเองให้อยู่กึ่งกลาง */
        overflow: hidden !important;
    }

    /* 3. รางสไลด์แนวขนาน */
    .package-slider {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 🌟 คำสั่งไม้ตายแก้เอียงซ้าย: ป้องกันไม่ให้แผ่นสไลด์โดนบีบ */
    .slide {
        width: 100% !important;
        flex-shrink: 0 !important; /* 🌟 ตัวนี้สำคัญมาก: ห้ามบีบขนาดเด็ดขาด! */
        display: flex !important;
        justify-content: center !important;
    }

    .slide img {
        margin: 0 auto !important; /* บังคับรูปให้อยู่ตรงกลางแผ่น */
        display: block !important;
    }
    /* 6. ปรับแต่งปุ่มลูกศร (ถ้าปุ่มทับรูปภาพเกินไป) */
    .arrow-btn {
        z-index: 10 !important; /* ดันปุ่มให้ลอยอยู่เหนือรูปเสมอ */
        cursor: pointer;
    }
    /* ==========================================
       📱 จัดระเบียบสไลเดอร์แพ็กเกจ (ฉบับสมบูรณ์)
    ========================================== */

    /* 1. ดันรูปลงมา และจัดกล่องให้อยู่ตรงกลาง */
    .slider-container {
        display: flex !important;
        justify-content: center !important; 
        align-items: center !important;
        width: 100% !important;
        position: relative !important;
        margin-top: 20px !important; /* 🌟 ดันรูปลงมาให้ห่างจากข้อความด้านบน 30px (เพิ่ม/ลดได้) */
        padding: 0 10px !important; /* กันไม่ให้ปุ่มลูกศรชิดขอบจอมือถือเกินไป */
        box-sizing: border-box !important;
    }

    /* 2. จัดการกล่องรูปให้มีพื้นที่ให้ปุ่มลูกศร */
    .package-slider-wrap {
        width: 80% !important; /* 🌟 ลดความกว้างลงเหลือ 80% เพื่อเว้นที่ซ้าย-ขวาให้ปุ่มลูกศร รูปจะอยู่ตรงกลางเป๊ะ */
        margin: 0 auto !important; 
        overflow: hidden !important;
    }

    /* 3. ย่อขนาดปุ่มลูกศรให้เล็กลง และจัดให้อยู่กึ่งกลาง */
    .arrow-btn {
        width: 35px !important; /* 🌟 ลดความกว้างปุ่ม */
        height: 35px !important; /* 🌟 ลดความสูงปุ่ม */
        font-size: 16px !important; /* 🌟 ลดขนาดไอคอนลูกศร */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        z-index: 10 !important;
        border-radius: 50% !important; /* บังคับให้ปุ่มกลมสวยงาม */
        position: absolute !important; /* สั่งให้ปุ่มลอยอิสระ */
        top: 50% !important;
        transform: translateY(-50%) !important; /* ให้อยู่กึ่งกลางแนวตั้งเสมอ */
    }

    /* 4. ล็อกตำแหน่งปุ่มซ้าย-ขวา ให้ห่างจากขอบเท่าๆ กัน */
    .arrow-btn.left {
        left: 5px !important; /* ให้ปุ่มซ้ายห่างจากขอบจอ 5px */
    }
    
    .arrow-btn.right {
        right: 5px !important; /* ให้ปุ่มขวาห่างจากขอบจอ 5px */
    }

    /* 5. ตัวรูปภาพแพ็กเกจในสไลด์ */
    .slide img {
        display: block !important;
        width: 100% !important; 
        max-width: 100% !important; /* ให้รูปกางเต็ม 80% ของหน้าต่างสไลด์พอดี */
        height: auto !important;
        margin: 0 auto !important; 
    }
    /* จัดกล่องครอบจุดไข่ปลาให้อยู่กึ่งกลาง และเว้นระยะห่างจากรูปนิดหน่อย */
    .slider-dots {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 8px !important; /* ระยะห่างระหว่างจุดแต่ละจุด */
        margin-top: 15px !important; /* ระยะห่างจากรูปแพ็กเกจด้านบน */
        width: 100% !important;
    }

    /* ย่อขนาดจุดแต่ละจุดให้เล็กลง */
    .dot {
        width: 8px !important; /* 🌟 ลดขนาดความกว้าง (จากเดิมอาจจะ 12-15px) */
        height: 8px !important; /* 🌟 ลดขนาดความสูงให้เท่าความกว้าง จะได้กลมเป๊ะ */
        margin: 0 !important; /* ลบ margin เดิมทิ้ง เพราะเราใช้ gap จัดการแล้ว */
        border-radius: 50% !important; /* บังคับให้เป็นวงกลม */
        display: inline-block !important;
    }
   /* ==========================================
       📱 พื้นหลังไล่สี: บนสีขาว -> ล่างสีฟ้า
    ========================================== */
    
    /* 1. สั่งให้กล่อง Section ด้านในโปร่งใส ปิดรูป ปิดสีเดิมทิ้งให้หมด */
    #about, 
    #package {
        background-image: none !important;
        background-color: transparent !important;
        background: transparent !important;
    }

    /* 2. ใส่สีไล่ระดับที่กล่องแม่สุด (.sky-bg-wrapper) แค่ที่เดียว */
    .sky-bg-wrapper {
        background-image: none !important; 
        /* 🌟 ทิศทาง to bottom คือ เริ่มจากบน(ขาว) ลงไปล่าง(ฟ้า) */
        background: linear-gradient(to bottom, #ffffff 0%, #cee4fb 100%) !important; 
    }
    /* 1. ปรับกล่องแบนเนอร์น้ำเงินให้เป็นแนวตั้ง */
    .blue-banner {
        display: flex !important;
        flex-direction: column !important; /* เรียงหมี/ข้อความ/ปุ่ม ลงมาเป็นแถว */
        align-items: center !important;
        text-align: center !important;
        padding: 20px 10px !important;
        gap: 15px !important; /* ระยะห่างระหว่างหมี, ข้อความ, และปุ่ม */
    }

    /* 2. บีบขนาดปุ่มไลน์ให้พอดีกับกล่องบนมือถือ */
    .btn-cta-white {
        width: 80% !important; /* ให้ปุ่มกว้าง 80% ของกล่องแบนเนอร์ */
        max-width: 250px !important;
        margin: 0 auto !important;
        display: block !important;
    }
    
    .btn-cta-white img {
        width: 100% !important;
        height: auto !important;
    }
    /* ซ่อนรูปของจอคอมทิ้งไป */
    .cta-desktop {
        display: none !important; 
    }

    /* เรียกรูปของมือถือให้แสดงขึ้นมาแทน */
    .cta-mobile {
        display: block !important; 
        width: 100% !important; 
        height: auto !important;
        margin: 0 auto !important;
    }
    /* ==========================================
       📱 1. ดันกล่อง CTA ทั้งหมดขยับขึ้นไปด้านบน
    ========================================== */
/* 1. แก้ไขกล่องครอบแบนเนอร์ ไม่ให้ตัดรูปทิ้ง */
   .cta-full-image-box {
        /* 1. ดึงกล่องขึ้นไปด้านบน (ปรับตัวเลข -30px เป็น -40px หรือ -50px ได้ตามต้องการ) */
        margin-top: -60px !important; 
        
        /* 🌟 2. คำสั่งหัวใจสำคัญ: เสกให้กล่องนี้ลอยอยู่ชั้นบนสุด จะได้ไม่มุดใต้กล่องอื่น */
        position: relative !important;
        z-index: 99 !important; 
        
        /* 3. จัดระเบียบเนื้อหาข้างในตามปกติ */
        padding-top: 0 !important; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5)) !important;
    }
    /* ==========================================
       📱 2. ย่อขนาดปุ่ม LINE ให้เล็กลง
    ========================================== */
    /* ==========================================
       📱 จัดการปุ่ม LINE สำหรับมือถือโดยเฉพาะ
    ========================================== */
.btn-cta-white {
        /* 🌟 ล้างบางทุกอย่างที่อาจทำให้เกิดขอบ */
        background: transparent !important; 
        background-color: transparent !important;
        border: none !important;
        outline: none !important; 
        box-shadow: none !important; /* 🌟 ปิดเงาไปเลยเพื่อทดสอบว่าขอบขาวมาจากเงาไหม */
        padding: 0 !important; 
        
        width: 70% !important;
        max-width: 160px !important; 
        margin: 2px auto 20px auto !important; 
        display: block !important;
        position: relative !important;
        z-index: 100 !important; 
    }

  /* 🌟 เผื่อขอบขาวติดมาจากแท็กรูปภาพโดยตรง */
    .btn-cta-white img {
        background: transparent !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.02)) !important;
    }
    .cta-mobile {
   /* 🌟 1. หดความกว้างซ้าย-ขวาลง */
        width: 95% !important; /* ลดจาก 100% เหลือ 90% (ถ้ายาวไปอีก ลองปรับเป็น 85% หรือ 80% ครับ) */
        max-width: 400px !important; /* ล็อกขนาดไว้ไม่ให้ใหญ่เกินไป */
        
        /* 🌟 2. จัดให้อยู่กึ่งกลางหน้าจอเป๊ะๆ */
        margin: 0 auto !important; 
        
        display: block !important; 
        height: auto !important;
        object-fit: contain !important; 
    }
    /* ==========================================
       📱 วิธีดันแบนเนอร์ขึ้นด้านบนแบบปลอดภัย (ภาพไม่ขาด)
    ========================================== */

    /* 1. ลดความห่างด้านล่างของเซกชันแพ็กเกจการลงทุน (#package) */
    #package {
        padding-bottom: 0px !important; /* 🌟 ลดพื้นที่ว่างด้านล่างลง (ปรับลดเหลือ 0 หรือ 5px ได้ตามความชิดที่ต้องการ) */
    }

    /* 2. ลดความห่างด้านล่างของจุดไข่ปลา (ส่วนท้ายสุดของสไลเดอร์) */
    .slider-dots {
        margin-bottom: -10 !important; /* 🌟 บังคับไม่ให้จุดไข่ปลาดันแบนเนอร์ลงมา */
    }
/* ==========================================
       📱 จัดการช่องว่างระหว่าง CTA กับ Footer
    ========================================== */

    /* 1. เคลียร์พื้นที่ด้านล่างของกล่องแบนเนอร์ CTA */
    .cta-full-image-box {
        margin-bottom: 0 !important;
        padding-bottom: 20px !important; /* 🌟 เว้นระยะนิดนึงให้ปุ่มไม่ชนฟุตเตอร์ */
    }

    /* 2. ดึงฟุตเตอร์ขึ้นมา (เปลี่ยนชื่อคลาส .footer ให้ตรงกับโค้ดของคุณ) */
    footer, .footer { 
        margin-top: -20px !important; /* 🌟 สำคัญมาก: ใช้ค่าติดลบเพื่อดึงฟุตเตอร์สวนขึ้นมา (ถ้ายังห่างอยู่ ให้เพิ่มเป็น -80px หรือ -100px) */
        padding-top: 20px !important; /* 🌟 ปรับระยะขอบสีน้ำเงินด้านในฟุตเตอร์ ไม่ให้ตัวหนังสือชิดขอบบนเกินไป */
    }
 .footer {
        padding: 15px 20px 20px 0px !important;
    }
    
    /* จัดกล่องหลักให้เรียงเนื้อหาจากบนลงล่าง และชิดซ้ายทั้งหมด */
    .footer-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        
    }

    .ft-left, .ft-right, .ft-nav {
        width: 100% !important;
        text-align: left !important;
    }



    .ft-title {
        font-size: 22px !important;
        margin: 0 0 10px 0 !important;
        text-align: left !important;
    }
    
    .ft-desc {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin: 0 0 20px 0 !important;
        text-align: left !important;
    }
    
    /* ซ่อน <br> ในมือถือ เพื่อไม่ให้ข้อความตัดบรรทัดแปลกๆ */
    .ft-desc br {
        display: none !important;
    }

    /* --- ส่วนที่ 2: ข้อมูลติดต่อ (ไอคอน + ข้อความตรงเป๊ะ) --- */
    .ft-contact {
        display: flex !important;
        align-items: center !important; /* จัดไอคอนและข้อความให้อยู่กึ่งกลางระนาบเดียวกัน */
        justify-content: flex-start !important;
        gap: 12px !important; /* 🌟 ระยะห่างระหว่างไอคอนกับตัวหนังสือ */
        font-size: 14px !important;
        margin-bottom: 12px !important;
        text-align: left !important;
    }

    .ft-contact img {
        width: 20px !important; /* ล็อกขนาดไอคอนให้เท่ากันทุกตัว */
        height: auto !important;
        margin: 0 !important;
        flex-shrink: 0 !important; /* ป้องกันไม่ให้ไอคอนโดนบีบแบน */
    }

    /* --- ส่วนที่ 3: เมนู และ โซเชียล --- */
    .ft-nav {
        margin-top: 25px !important; /* ระยะห่างระหว่างกลุ่มเมนู */
        display: flex !important;
        flex-direction: column !important; /* ให้เมนูเรียงบรรทัดลงมา */
    }
    
    .ft-head {
        font-size: 18px !important;
        margin: 0 0 15px 0 !important;
        text-align: left !important;
    }

    .ft-nav a {
        display: inline-block !important;
        font-size: 14px !important;
        margin-bottom: 12px !important;
        text-align: left !important;
        text-decoration: none !important;
    }

    .ft-social {
        display: flex !important;
        justify-content: flex-start !important;
        gap: 15px !important; /* ระยะห่างระหว่างไอคอน Facebook กับ Line */
        margin-top: 10px !important;
    }
    
    .ft-social img {
        width: 35px !important; /* ปรับขนาดไอคอนโซเชียล */
        height: auto !important;
    }

    /* --- ส่วนที่ 4: ลิขสิทธิ์ (อยู่ตรงกลาง) --- */
    .ft-bottom {
        width: 100% !important;
        margin-top: 30px !important;
        padding-top: 15px !important;
        text-align: center !important;
        border-top: 1px solid rgba(255, 255, 255, 0.2); /* เพิ่มเส้นคั่นบางๆ ให้ดูเป็นระเบียบ */
    }

    .ft-bottom p {
        font-size: 12px !important;
        text-align: center !important; /* 🌟 บังคับตรงกลางเท่านั้น */
        margin: 0 !important;
    }
    /* --- ส่วนที่ 3: เมนู และ โซเชียล --- */
    
    .ft-nav {
        /* 🌟 ลดระยะห่างด้านบนสุด (ที่ห่างจากบรรทัด "ที่อยู่") */
        margin-top: 15px !important; 
        
        display: flex !important;
        flex-direction: column !important; 
    }
    
    .ft-head {
        font-size: 18px !important;
        /* 🌟 ลดระยะห่างใต้คำว่า "เมนูหลัก" และ "ลิงก์ด่วน" */
        margin: 0 0 10px 0 !important; 
        
        text-align: left !important;
    }

    .ft-nav a {
        display: inline-block !important;
        font-size: 14px !important;
        /* 🌟 ลดระยะห่างระหว่างบรรทัดลิงก์แต่ละอัน (หน้าแรก, แพ็กเกจ ฯลฯ) */
        margin-bottom: 8px !important; 
        
        text-align: left !important;
        text-decoration: none !important;
    }
    /* ==========================================
       📱 1. ระยะห่างก่อนคำว่า "เมนูหลัก" 
       (ระยะห่างระหว่าง ที่อยู่ กับ เมนูหลัก)
    ========================================== */
    .ft-right .ft-nav:nth-child(1) {
        margin-top: -70px !important; /* 🌟 ปรับตัวเลขตรงนี้ (ค่ายิ่งน้อย ยิ่งชิดด้านบน) */
    }

    /* ==========================================
       📱 2. ระยะห่างก่อนคำว่า "ลิงก์ด่วน"
       (ระยะห่างระหว่าง ติดต่อเรา กับ ลิงก์ด่วน)
    ========================================== */
    .ft-right .ft-nav:nth-child(2) {
        margin-top: 0px !important; /* 🌟 ปรับตัวเลขตรงนี้ (อยากให้ห่างแค่ไหนแก้เลขนี้เลย) */
    }

    /* ==========================================
       📱 3. ระยะห่างระหว่างไอคอน FB กับ LINE
    ========================================== */
    .ft-social {
        display: flex !important;
        justify-content: flex-start !important;
        
        /* 🌟 ปรับความห่างระหว่างไอคอนซ้าย-ขวา ตรงนี้ครับ */
        gap: 0px !important; /* ถ้าอยากให้ชิดกันอีก ลองลดเหลือ 8px หรือ 10px */
        
        margin-top: 10px !important; /* ระยะห่างจากหัวข้อ ติดตามเราได้ที่ */
    }
   /* --- ส่วนที่ 1: โลโก้ --- */
  /* 1. บังคับตัวกล่องฝั่งซ้าย (.ft-left) ให้เทไปทางซ้ายทั้งหมด */
    .footer .footer-container .ft-left {
        text-align: left !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important; /* บังคับลูกๆ ในกล่องนี้ชิดซ้าย */
    }

    /* 2. บังคับตัวโลโก้พี่หมีให้วิ่งมาชิดซ้ายสุดแบบเด็ดขาด */
    .footer .footer-container .ft-left .ft-logo {
        width: 140px !important;
        height: auto !important;
        display: block !important;
        align-self: flex-start !important; /* ปลดล็อกตัวเองในระบบ Flex */
        margin-left: 0 !important; /* ชิดซ้ายสุด */
        margin-right: auto !important;
        margin-top: 0 !important;
        margin-bottom: 15px !important;
    }
    /* ==========================================
       📱 จัดการช่องว่างก่อนคำว่า "ติดตามเราได้ที่"
    ========================================== */
    .ft-nav h4:nth-of-type(2) {
        /* 🌟 โค้ดนี้จะไปเขียนทับ style="margin-top:20px;" ใน HTML ครับ */
        /* ถ้าอยากให้ชิดกว่านี้ ลองปรับลดลงเหลือ 10px หรือ 5px ได้เลยครับ */
        margin-top: 20px !important; 
        
        margin-bottom: 10px !important; /* จัดระยะห่างด้านล่างก่อนถึงไอคอนเฟสบุ๊กด้วย */
    }
    /* แทนที่ .arrow-icon ด้วยชื่อคลาสลูกศรของคุณ */
    .step-item {
        margin-top: -10px !important;    /* 🌟 ลดช่องว่างด้านบนลูกศร (ช่องว่างหลังข้อความ) */
        margin-bottom: -10px !important; /* 🌟 ลดช่องว่างด้านล่างลูกศร (ช่องว่างก่อนถึงรูปถัดไป) */
        padding: 0 !important;
    }
  
}
/* =========================================================
   📱 สำหรับหน้าจอขนาดกลาง (แท็บเล็ต / จอคอมเล็ก) ต่ำกว่า 992px
========================================================= */
@media (max-width: 992px) {
    
    /* 1. แก้แถบเมนูด้านบน (Navbar) ไม่ให้บีบกัน */
    .nav-container {
        flex-wrap: wrap; /* ยอมให้ปุ่มตกลงมาบรรทัดใหม่ได้ถ้าที่จำกัด */
        justify-content: center;
        gap: 10px;
        padding: 10px 0;
    }
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* 2. แก้กล่องแถบแบนเนอร์ LINE สีน้ำเงิน (ให้เรียงบน-ล่าง แทนซ้าย-ขวา) */
    /* 🌟 เปลี่ยน .line-banner ให้ตรงกับชื่อคลาสแบนเนอร์ของคุณ */
    .line-banner { 
        flex-direction: column; 
        text-align: center;
        padding: 20px;
    }
    
    /* 3. ทำให้รูปภาพทุกรูปยืดหยุ่น ไม่ล้นกรอบ */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* =========================================================
   📱 สำหรับหน้าจอขนาดเล็ก (มือถือแนวนอนและแนวตั้ง) ต่ำกว่า 768px
========================================================= */
@media (max-width: 768px) {
    
    /* ซ่อนเมนูข้อความ แล้วให้เหลือแค่โลโก้กับปุ่ม (วิธีชั่วคราวก่อนทำระบบปุ่มแฮมเบอร์เกอร์ ☰) */
    .nav-links {
        display: none; 
    }
    
    /* จัดกล่องสินค้าให้เรียงคอลัมน์เดียว (ถ้าเดิมใช้ Grid หรือ Flex) */
    /* 🌟 เปลี่ยน .product-grid ให้ตรงกับชื่อคลาสกล่องสินค้าของคุณ */
    .product-grid, .new-contact-grid {
        grid-template-columns: 1fr; /* ให้แสดงแค่ 1 คอลัมน์เต็มจอ */
        display: flex;
        flex-direction: column;
    }
}