/* ==========================================================================
   📱 EXCLUSIVE MOBILE STYLES (ทำงานเฉพาะหน้าจอโทรศัพท์กว้างไม่เกิน 768px)
   ========================================================================== */
@media screen and (max-width: 768px) {

    /* 🎯 จัดการระยะบาร์ด้านบนให้สวยงาม กระชับพอดีจอ */
    .navbar {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 15px !important; 
        position: relative;
    }

    /* 🎯 คุมความกว้างไม่ให้ชื่อบริษัทวิ่งไปเบียดปุ่มสามขีดฝั่งขวา */
    .navbar .logo {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important; 
        max-width: 75% !important; 
    }

    /* 🎯 ปรับรูปวงกลมโลโก้ให้กะทัดรัดขึ้น */
    .navbar .logo img {
        width: 36px !important;  
        height: 36px !important;
        object-fit: contain;
    }

    /* 🎯 ปรับตัวหนังสือชื่อบริษัทให้เล็กลงคมชัด */
    .navbar .logo span {
        font-size: 13px !important;      
        font-weight: 500 !important;     
        line-height: 1.2 !important;     
        white-space: normal !important;  
        color: #cca43b !important;       
    }

    /* บังคับซ่อนเมนูคอมพิวเตอร์ทิ้งทันทีบนมือถือ */
    .menu.menu-computer {
        display: none !important;
    }

    /* แสดงปุ่มสามขีดสีทองไว้ที่มุมขวาบน */
    .menu-toggle-mobile {
        display: block !important; 
        background: none;
        border: none;
        color: #cca43b;
        font-size: 24px;
        cursor: pointer;
        margin-left: auto !important; 
        padding: 5px !important;
    }

    /* 🌀 สั่งรูดม่านนุ่มนวล (Smooth Slide Down) */
    .menu-mobile {
        display: flex !important; 
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #0c0c0c; 
        list-style: none;
        margin: 0;
        box-shadow: 0 8px 16px rgba(0,0,0,0.5);
        z-index: 9999 !important; /* ดันเมนูให้อยู่เหนือกราฟิกอื่นๆ */
        
        /* เทคนิคใช้ max-height ทำแอนิเมชันเปิด-ปิดแบบลื่นๆ */
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        padding: 0;
        transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                    opacity 0.3s ease, 
                    padding 0.4s ease,
                    visibility 0.4s;
    }

    /* 🔽 แก้บัคเมนูหลักเปิดแล้วล่องหน: เมื่อมีคลาส .show-mobile บังคับให้กางเต็มความสูงจริง */
    .menu-mobile.show-mobile {
        max-height: 2000px !important; /* เพิ่มความสูงเผื่อให้รองรับทุกลิสต์เมนูย่อย */
        opacity: 1 !important;        
        visibility: visible !important;
        padding: 10px 0 !important;
        overflow: visible !important; /* ปลดล็อกให้เห็นดรอปดาวน์ภายใน */
    }

    /* เพิ่มลูกเล่นให้รายการเมนูค่อยๆ ลอยเฟดขึ้นมา */
    .menu-mobile li {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .menu-mobile.show-mobile li {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* จัดคิวตบเท้าก้าวเข้ามาทีละเมนู */
    .menu-mobile.show-mobile li:nth-child(1) { transition-delay: 0.04s; }
    .menu-mobile.show-mobile li:nth-child(2) { transition-delay: 0.08s; }
    .menu-mobile.show-mobile li:nth-child(3) { transition-delay: 0.12s; }
    .menu-mobile.show-mobile li:nth-child(4) { transition-delay: 0.16s; }
    .menu-mobile.show-mobile li:nth-child(5) { transition-delay: 0.20s; }
    .menu-mobile.show-mobile li:nth-child(6) { transition-delay: 0.24s; }
    .menu-mobile.show-mobile li:nth-child(7) { transition-delay: 0.28s; }

    /* ปรับขนาดตัวหนังสือลิสต์เมนู */
    .menu-mobile li a {
        display: block;
        padding: 15px 25px;
        color: #ffffff;
        text-decoration: none;
        font-size: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    }

    /* 🔽 ซ่อนเมนูดรอบดาวน์ย่อยภายใน */
    .menu-mobile .mob-dropdown-menu {
        display: block !important; 
        max-height: 0;             
        overflow: hidden;
        background-color: #141414;
        list-style: none;
        padding-left: 0;
        opacity: 0;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, padding 0.35s ease;
    }

    /* 🔽 แก้บัคดร็อปดาวน์ย่อยเปิดแล้วล่องหน (เมื่อมีคลาส .open-drop ผ่าน JavaScript) */
    .menu-mobile .mob-dropdown.open-drop .mob-dropdown-menu {
        max-height: 500px !important; 
        opacity: 1 !important;        
        padding-left: 20px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    /* หมุนไอคอนลูกศรชี้ลงอย่างนุ่มนวล */
    .menu-mobile .mob-dropdown a i {
        float: right;
        margin-top: 5px;
        transition: transform 0.3s ease;
    }
    
    .menu-mobile .mob-dropdown.open-drop a i {
        transform: rotate(180deg) !important;
        color: #cca43b !important;
    }

    /* ==========================================================================
       🎯 เพิ่มเติม: จัดระเบียบโครงสร้างทุกหน้าเว็บให้พอดีสวยงามบนจอมือถือ
       ========================================================================== */
    html, body {
        width: 100%;
        overflow-x: hidden !important; 
    }

    .hero, .hero-service {
        padding: 90px 20px 40px !important;
        min-height: auto !important;
        height: auto !important;
    }

    .hero-text h1 {
        font-size: 26px !important;
        line-height: 1.4 !important;
        word-break: break-word;
    }

    .hero-text p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        padding: 0 5px !important;
    }

    .services-grid, .services-index, .services-container-box {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .service-card, .services-grid a.service-card {
        width: 100% !important;
        padding: 25px 20px !important;
    }

    .about-grid, .about-features, .kp-cnt-premium-box {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .stats-premium-card {
        margin: 20px 10px !important;
        padding: 20px 15px !important;
    }

    .map-large-container, .contact-map-wrapper {
        padding: 0 5px !important;
        height: 250px !important;
    }

    .map-image-wrapper img {
        width: 100% !important;
        height: auto !important;
    }

    .kp-chat {
        right: 15px !important;
        bottom: 15px !important;
    }

    .kp-chat-btn {
        width: 50px !important;
        height: 50px !important;
        font-size: 18px !important;
    }

    .kp-chat-box {
        width: calc(100vw - 30px) !important;
        right: 15px !important;
        bottom: 75px !important;
    }

    /* ==========================================================================
       🎯 จัดระเบียบคลาสเฉพาะหน้าทำบัญชีร้านทอง (gold-accounting.php)
       ========================================================================== */
    .nd-container {
        padding: 30px 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .nd-title {
        font-size: 24px !important;    
        text-align: center !important;
        line-height: 1.3 !important;
        margin-bottom: 15px !important;
    }

    .nd-lead-text {
        font-size: 14px !important;
        line-height: 1.6 !important;
        text-align: justify !important;
        margin-bottom: 25px !important;
    }

    .nd-grid-services {
        display: flex !important;
        flex-direction: column !important; 
        gap: 20px !important;
        margin-top: 25px !important;
        width: 100% !important;
    }

    .nd-service-card {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important; 
        min-height: 0 !important;
        max-height: none !important;
        padding: 30px 20px !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .nd-card-title {
        font-size: 18px !important;
        margin: 15px 0 10px 0 !important;
        line-height: 1.4 !important;
        color: #ffffff !important;
        height: auto !important; 
    }

    .nd-card-desc {
        font-size: 14px !important;
        line-height: 1.6 !important;
        color: #cccccc !important;
        margin: 0 !important;
        height: auto !important; 
    }

    .nd-content-section {
        margin-top: 35px !important;
        padding: 0 10px !important;
    }

    .nd-section-subtitle {
        font-size: 20px !important;
        margin-bottom: 15px !important;
    }

    .nd-features-list li {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 12px !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }
} /* <--- 🌟 ปิดปีกกาของ @media ตรงนี้เพื่อคลุมคำสั่งบนมือถือทั้งหมด */
/* ==========================================================================
   🎯 จัดระเบียบโครงสร้างหน้าเกี่ยวกับเรา (about.php) สำหรับจอมือถือ
   ========================================================================== */
@media screen and (max-width: 768px) {

    /* สั่งให้กล่องรวม (Grid) เรียงตัวเป็นแนวตั้ง และสลับเอารูปภาพขึ้นก่อน */
    .about-page-grid {
        display: flex !important;
        flex-direction: column-reverse !important; /* ดึงบล็อก slider-container ขึ้นไปอยู่ด้านบน */
        gap: 25px !important;
        width: 100% !important;
    }

    /* จัดความกว้างกล่องสไลด์รูปภาพให้พอดีจอมือถือ */
    .slider-container#aboutnew {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* จัดแต่งรูปภาพสไลด์ให้แสดงผลสวยงามเต็มกรอบ */
    .slider-wrapper img.slider-image {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px !important; /* เพิ่มความโค้งมนเล็กน้อยให้เข้ากับดีไซน์มือถือ */
    }

    /* จัดส่วนบล็อกข้อความให้อยู่ด้านล่างรูปภาพและจัดกึ่งกลาง */
    .about-page-text {
        width: 100% !important;
        text-align: center !important; /* จัดข้อความให้อยู่ตรงกลาง */
        padding: 0 5px !important;
    }

    /* จัดระยะห่างและขนาดหัวข้อ */
    .about-page-text h2 {
        font-size: 22px !important;
        margin-bottom: 15px !important;
    }

    /* ปรับย่อหน้าเนื้อหา (Paragraph) บนมือถือให้ชิดซ้าย-ขวาพอดี ไม่เยื้องเว้นวรรคเยอะเกินไป */
    .about-page-text p {
        text-align: justify !important;
        text-justify: inter-word !important;
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin-bottom: 12px !important;
    }

    /* ปรับแต่งกล่อง Feature ด้านล่างให้อ่านง่ายขึ้น */
    .about-page-features {
        grid-template-columns: 1fr !important; /* เรียงกล่องคุณสมบัติเป็น 1 คอลัมน์แนวดิ่ง */
        gap: 12px !important;
        margin-top: 20px !important;
    }

    .feature-box {
        text-align: left !important; /* ให้หัวข้อคุณสมบัติชิดซ้ายเพื่อความอ่านง่าย */
        padding: 15px !important;
    }

    @media screen and (max-width: 768px) {

    /* 🎯 1. ตัวกล่องนอกสุด: ปลดล็อก overflow เป็น visible เพื่อให้ไข่ปลาลอยออกมาได้ */
    .slider-container#aboutnew {
        position: relative !important;
        width: 92% !important;
        max-width: 420px !important;
        aspect-ratio: 4 / 3 !important;
        margin: 0 auto !important;
        border-radius: 12px !important;
        /* 🌟 แก้จุดนี้: เปลี่ยนจาก hidden เป็น visible เพื่อไม่ให้ตัดไข่ปลาขาด */
        overflow: visible !important; 
        background-color: #000000 !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.6);
    }

    /* 🎯 2. ตัวคุมด้านใน: ทำหน้าที่ตัดขอบมนและคุมรูปภาพแทนกล่องนอก */
    .slider-wrapper {
        width: 100% !important;
        height: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        /* 🌟 เพิ่ม 2 บรรทัดนี้: ย้ายหน้าที่ล็อกขอบมนและตัดขอบรูปภาพมาไว้ตรงนี้แทน */
        border-radius: 12px !important;
        overflow: hidden !important; 
    }

    /* 🎯 3. ตัวรูปภาพย่อเข้าสเกล ถมดำ ไม่ซูม (คงเดิม) */
    .slider-wrapper img.slider-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        background-color: #000000 !important;
    }

    /* 🎯 4. ปุ่มลูกศร ซ้าย-ขวา (คงเดิม) */
    .slider-btn {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        width: 36px !important;
        height: 36px !important;
        border-radius: 50% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        color: #ffffff !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .slider-btn.prev-btn { left: 10px !important; }
    .slider-btn.next-btn { right: 10px !important; }

    /* 🎯 5. จัดจุดไข่ปลา (Dots) ให้ดันตัวเองขึ้นมาจากขอบล่างอีกนิด และโชว์เต็มเม็ด */
    .slider-dots {
        position: absolute !important;
        bottom: -25px !important; /* 🌟 แก้จุดนี้: ดันให้ลงมาอยู่ใต้กล่องรูปภาพบนพื้นหลังดำหลัก จะได้เห็นชัดๆ ไม่บังเนื้อหารูป */
        left: 50% !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        gap: 6px !important;
        z-index: 99 !important;   /* ดันให้อยู่ชั้นบนสุด */
        background: transparent !important;
    }
}
/* 🎯 ปรับแต่งจุดไข่ปลาไม่ให้ยาวล้นขอบรูปบนมือถือ */
.slider-dots {
    position: absolute !important;
    bottom: 15px !important;       /* ลอยอยู่เหนือน้ำขอบล่างของกล่องรูปภาพ */
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* 🌟 3 บรรทัดนี้คือคีย์เวิร์ดสำคัญที่แก้ปัญหา */
    flex-wrap: wrap !important;    /* ถ้ารูปเยอะจนจุดล้น ให้ขึ้นบรรทัดใหม่ได้ออโต้ */
    width: 85% !important;         /* จำกัดความกว้างไม่ให้กางเกิน 85% ของตัวกล่องรูป */
    gap: 5px !important;           /* ลดระยะห่างระหว่างจุดลงเล็กน้อย */
    
    margin: 0 auto !important;
    padding: 0 !important;
    z-index: 15 !important;
}

/* 🎯 ย่อขนาดตัวจุดไข่ปลา (กลมๆ/เหลี่ยมๆ) ให้เล็กลงเพื่อรองรับจำนวนรูปที่เยอะ */
.slider-dots span, 
.slider-dots .dot { 
    width: 6px !important;         /* ปรับความกว้างของจุดสีเทาให้เล็กลงเหลือ 6px */
    height: 6px !important;        /* ปรับความสูงให้เหลือ 6px */
    border-radius: 50% !important;
    background-color: rgba(255, 255, 255, 0.4) !important; /* สีเทาจางๆ */
    transition: all 0.3s ease;
}

/* 🎯 จัดการจุดที่กำลังแสดงผลอยู่ (Active Dot) ให้สวยงาม */
.slider-dots span.active,
.slider-dots .dot.active {
    width: 15px !important;        /* ยืดออกเป็นทรงแคปซูลเวลากดเลือก */
    height: 6px !important;
    border-radius: 4px !important;
    background-color: #cca43b !important; /* สีทอง */
}
/* ❌ สั่งซ่อนแบนเนอร์เวอร์ชันคอมพิวเตอร์เมื่ออยู่บนหน้าจอมือถือ */
.hero-about.hero-desktop {
    display: none !important;
}

/* 🎯 สั่งแสดงและจัดแต่งแบนเนอร์เวอร์ชันมือถือได้อย่างอิสระ */
.hero-about-mobile {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 65px !important; /* ดันหลบใต้ท้อง Navbar มือถือ */
    background-color: #0c0c0c !important; /* พื้นหลังสีดำ */
    padding: 30px 20px !important;
    box-sizing: border-box !important;
}
.hero-service-mobile {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 65px !important; /* ดันหลบใต้ท้อง Navbar มือถือ */
    background-color: #0c0c0c !important; /* พื้นหลังสีดำ */
    padding: 30px 20px !important;
    box-sizing: border-box !important;
}

.hero-text-mobile h1 {
    font-size: 24px !important;
    color: #ffffff !important;
    text-align: center !important;
}
.hero-text-mobile h1 span {
    color: #cca43b !important; /* ตัวหนังสือสีทอง */
}

.hero-text-mobile p {
    color: #d6d6d6;
    font-size: 15px;
    line-height: 1.9;
    text-align: center !important;
    margin-bottom: 15px;
}
/* ❌ สั่งซ่อนแบนเนอร์เวอร์ชันคอมพิวเตอร์เมื่อเปิดบนมือถือ */
.hero-about.hero-desktop {
    display: none !important;
}

/* 🎯 สั่งแสดงแบนเนอร์มือถือ และเปลี่ยนไปใช้รูปภาพเวอร์ชันมือถือ */
.hero-about-mobile {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 65px !important; /* ดันหลบใต้ท้อง Navbar มือถือ */
    
    /* 📱 เปลี่ยน URL ตรงนี้ให้เรียกใช้รูปภาพสำหรับเวอร์ชันมือถือโดยเฉพาะ */
    background-image: url('img/mobilebanner/2.png') !important; 
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    
    /* กำหนดความสูงตามสัดส่วนภาพ เช่น ถ้าภาพเป็นสี่เหลี่ยมผืนผ้าแนวนอนสวยๆ ใช้ 16 / 9 */
    aspect-ratio: 16 / 9 !important; 
    padding: 20px !important;
    box-sizing: border-box !important;
}

.hero-service {
    display: none !important;
}

.hero-service-mobile {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 65px !important; /* ดันหลบใต้ท้อง Navbar มือถือ */
    
    /* 📱 เปลี่ยน URL ตรงนี้ให้เรียกใช้รูปภาพสำหรับเวอร์ชันมือถือโดยเฉพาะ */
    background-image: url('img/mobilebanner/1.png') !important; 
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    
    /* กำหนดความสูงตามสัดส่วนภาพ เช่น ถ้าภาพเป็นสี่เหลี่ยมผืนผ้าแนวนอนสวยๆ ใช้ 16 / 9 */
    aspect-ratio: 16 / 9 !important; 
    padding: 20px !important;
    box-sizing: border-box !important;
}

.hero-contact {
    display: none !important;
}

.hero-contact-mobile {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 65px !important; /* ดันหลบใต้ท้อง Navbar มือถือ */
    
    /* 📱 เปลี่ยน URL ตรงนี้ให้เรียกใช้รูปภาพสำหรับเวอร์ชันมือถือโดยเฉพาะ */
    background-image: url('img/mobilebanner/3.png') !important; 
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    
    /* กำหนดความสูงตามสัดส่วนภาพ เช่น ถ้าภาพเป็นสี่เหลี่ยมผืนผ้าแนวนอนสวยๆ ใช้ 16 / 9 */
    aspect-ratio: 16 / 9 !important; 
    padding: 20px !important;
    box-sizing: border-box !important;
}

.hero {
    display: none !important;
}

.hero-index-mobile {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 65px !important; /* ดันหลบใต้ท้อง Navbar มือถือ */
    
    /* 📱 เปลี่ยน URL ตรงนี้ให้เรียกใช้รูปภาพสำหรับเวอร์ชันมือถือโดยเฉพาะ */
    background: 
        /* linear-gradient(rgba(19, 19, 19, 0.6), rgba(19, 19, 19, 0.6)),  */
        url('img/newhero/hero23.jpg') no-repeat !important ; 
    background-size: cover;
    background-repeat: no-repeat !important;
    background-position: 50% -10%;
    background-size: cover !important;
    
    /* กำหนดความสูงตามสัดส่วนภาพ เช่น ถ้าภาพเป็นสี่เหลี่ยมผืนผ้าแนวนอนสวยๆ ใช้ 16 / 9 */
    aspect-ratio: 16 / 9 !important; 
    padding: 20px !important;
    box-sizing: border-box !important;
}

.hero-news-mobile {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 65px !important; /* ดันหลบใต้ท้อง Navbar มือถือ */
    
    /* 📱 เปลี่ยน URL ตรงนี้ให้เรียกใช้รูปภาพสำหรับเวอร์ชันมือถือโดยเฉพาะ */
    background-image: url('img/mobilebanner/4.jpg') !important; 
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    
    /* กำหนดความสูงตามสัดส่วนภาพ เช่น ถ้าภาพเป็นสี่เหลี่ยมผืนผ้าแนวนอนสวยๆ ใช้ 16 / 9 */
    aspect-ratio: 16 / 9 !important; 
    padding: 20px !important;
    box-sizing: border-box !important;
}

.hero-news {
    display: none !important;
}

    .about-text h2 {
        font-size: 23px !important;
        margin-bottom: 15px !important;
    }
}