/* Mobile Fix Simple - แก้ไขปัญหาตรงจุด */

/* 1. ลบเส้นสีบนโลโก้และชื่อเว็บ */
.navbar {
    border-top: none !important;
}

.navbar-brand {
    border: none !important;
}

.navbar-brand::before,
.navbar-brand::after {
    display: none !important;
}

.navbar::before,
.navbar::after {
    display: none !important;
}

.navbar-collapse {
    border-top: none !important;
}

/* 2. แก้ไขเมนูมือถือให้ทำงานได้ */
@media (max-width: 991.98px) {
    /* แก้ไขช่องว่างใน navbar */
    .navbar {
        padding: 0.5rem 0 !important;
        min-height: 50px !important;
    }
    
    .navbar .container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 42px !important;
    }
    
    .navbar-brand {
        margin-right: 0 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        height: 42px !important;
        line-height: 1.1 !important;
        padding: 0.125rem 0 !important;
        font-size: 1.75rem !important;
    }
    
    .navbar-brand .logo-clover {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 40px !important;
        width: 40px !important;
    }
    
    .navbar-brand .logo-clover i {
        font-size: 1.75rem !important;
    }
    
    /* ปุ่มเมนู */
    .navbar-toggler {
        border: 1px solid #ccc;
        padding: 0.375rem;
        background: white;
        margin-left: auto !important;
        flex-shrink: 0 !important;
        height: 36px !important;
        width: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .navbar-toggler-icon {
        width: 18px !important;
        height: 18px !important;
    }
    
    .navbar-toggler:focus {
        box-shadow: none !important;
        outline: none !important;
    }
    
    /* เมนูที่เปิดออกมา */
    .navbar-collapse {
        background: white;
        border: 1px solid #ddd;
        border-radius: 0.5rem;
        margin-top: 0.5rem;
        padding: 1rem;
    }
    
    /* รายการเมนู */
    .nav-link {
        padding: 0.75rem 1rem;
        color: #333 !important;
        border-radius: 0.25rem;
        margin-bottom: 0.25rem;
    }
    
    .nav-link:hover {
        background-color: #f8f9fa;
        color: #007bff !important;
    }
    
    /* เมนูหมวดหมู่ */
    .dropdown-menu {
        position: static !important;
        width: 100%;
        background: #f8f9fa;
        border: 1px solid #ddd;
        border-radius: 0.25rem;
        margin-top: 0.5rem;
        padding: 0.5rem 0;
        box-shadow: none;
    }
    
    .dropdown-item {
        padding: 0.5rem 1rem;
        color: #333;
    }
    
    .dropdown-item:hover {
        background-color: #e9ecef;
        color: #007bff;
    }
    
    /* ลบแถบสีค้าง */
    .dropdown-toggle:focus,
    .dropdown-toggle:active,
    .dropdown-toggle.show {
        background-color: transparent !important;
        color: #333 !important;
        box-shadow: none !important;
        outline: none !important;
    }
    
    /* ปุ่มติดต่อ */
    .navbar .d-flex {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #ddd;
        justify-content: center;
    }
}

/* 3. แก้ไขการแสดงผลให้พอดีจอ - ป้องกันเลื่อนออกนอกจอ */
@media (max-width: 991.98px) {
    /* ป้องกันการเลื่อนซ้าย-ขวา */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* แก้ไข container ให้พอดีจอ */
    .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* แก้ไข row ที่อาจทำให้เลื่อนออกจอ */
    .row {
        margin-left: -15px !important;
        margin-right: -15px !important;
        width: calc(100% + 30px) !important;
        max-width: calc(100% + 30px) !important;
    }
    
    /* แก้ไข columns */
    [class*="col-"] {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
    }
    
    /* แก้ไข hero section */
    .hero-section {
        padding: 2rem 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    .hero-section .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .hero-section h1 {
        font-size: 1.75rem !important;
        text-align: center !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    .hero-section .hero-subtitle,
    .hero-section .lead {
        font-size: 1rem !important;
        text-align: center !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* แก้ไขปุ่มใน hero */
    .hero-section .d-flex {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
    
    .hero-section .btn {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0.25rem 0 !important;
        font-size: 0.9rem !important;
        padding: 0.75rem 1rem !important;
    }
    
    /* แก้ไข sections ทั้งหมด */
    section {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        padding: 2rem 0 !important;
    }
    
    /* แก้ไข cards */
    .number-card,
    .number-card-glass,
    .category-card {
        margin-bottom: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* แก้ไขขนาดตัวอักษรให้เหมาะสม */
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    h4 { font-size: 1.1rem !important; }
    h5 { font-size: 1rem !important; }
    
    p {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
    
    /* แก้ไขปุ่มทั้งหมด */
    .btn {
        font-size: 0.875rem !important;
        padding: 0.5rem 1rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    .btn-sm {
        font-size: 0.75rem !important;
        padding: 0.375rem 0.75rem !important;
    }
    
    .btn-lg {
        font-size: 1rem !important;
        padding: 0.75rem 1.5rem !important;
    }
}

/* แก้ไขสำหรับหน้าจอเล็กมาก */
@media (max-width: 576px) {
    .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .row {
        margin-left: -10px !important;
        margin-right: -10px !important;
        width: calc(100% + 20px) !important;
    }
    
    [class*="col-"] {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    .hero-section h1 {
        font-size: 1.5rem !important;
    }
    
    .hero-section .btn {
        max-width: 250px !important;
        font-size: 0.85rem !important;
    }
}