body { font-family: 'Sarabun', sans-serif !important; background-color: #d9000d !important; color: white !important; }
        .header { background-color: white !important; padding: 10px 0 !important; }
        .footer { background-color: white !important; color: black !important; padding: 10px 0 !important; text-align: center !important; }
        .navbar-toggler-icon { background-color: #d9000d !important; display: block !important; width: 30px !important; height: 3px !important; margin: 5px 0 !important; }
        .navbar-toggler-icon::before, .navbar-toggler-icon::after {
            content: "";
            display: block;
            background-color: #d9000d;
            width: 30px;
            height: 3px;
            margin-top: 5px;
        }
        .navbar-collapse {
            position: absolute !important;
            top: 70px !important;
            background: #fff !important;
            width: 100% !important;
            left: 0 !important;
            height: calc(100% - 70px) !important;
            z-index: 998 !important;
        }
        @media (min-width: 990px) {
            .navbar-toggler { display: none; }
            #navbarNav { display: flex !important; flex-direction: row !important; justify-content: center !important; }
            .navbar-collapse {
                position: unset !important;
                top: unset !important;
                background: transparent !important;
                width: unset !important;
                left: unset !important;
                height: unset !important;
                z-index: unset !important;
            }
        }
        .fa-solid.fa-bars,
        .fa-solid.fa-xmark {
            color: #d9000d;
        }
        
        @media (min-width: 992px) {
            .flex-lg-row {
                justify-content: end !important;
            }
        }
                
        .navbar-collapse {
            flex-basis: unset;
            flex-grow: unset;
            align-items: unset;
        }
                
                h1, h2, h3, h4, h5, h6, p {
                    margin: 0;
                    margin-bottom: 1em;
                }
                
                .boxes {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    gap: 10px;
                }
        
                .box{
                    width: calc(33.333333% - 20px);
                    padding: 20px;
                    border: 1px solid #000;
                    border-radius: 10px;
                    color: #000;
                    background: #fff;
                }
                .box img{
                    width: 100%;
                    border-radius: 10px;
                }
                    
                .categories {
                    display: flex;
                    flex-wrap: wrap;
                    gap: 0 10px;
                }
                
                .categories p {
                    background: #dddddd;
                    padding: 4px 8px;
                    border-radius: 50px;
                }
                
                
.box h2 {
    margin-top: 15px;
    font-weight: 900;
    font-size: 16px;
}
                
                @media (max-width: 768px) {
                    .categories p {
                        font-size: 10px!important;
                    }
        
                    h1, h2, h3, h4, h5, h6, p {
                        margin: 0;
                        margin-bottom: .5em!important;
                    }
        
                    .box > p {
                        font-size: 12px!important;
                    }
                }
                @media (max-width: 600px) {
                    .box {
                        width: 100%!important;
                    }
        
                    .categories p {
                        font-size: 10px!important;
                    }
        
                    h1, h2, h3, h4, h5, h6, p {
                        margin: 0;
                        margin-bottom: .5em!important;
                    }
        
                    .box > p {
                        font-size: 12px!important;
                    }
                }
                @media (max-width: 900px) {
                    .box {
                        width: calc(50% - 10px);
                    }
                    .categories p {
                        font-size: 10px!important;
                    }
        
                    h1, h2, h3, h4, h5, h6, p {
                        margin: 0;
                        margin-bottom: .5em!important;
                    }
        
                    .box > p {
                        font-size: 12px!important;
                    }
                }
                @media (max-width: 1200px) {
        
                    .categories p {
                        font-size: 14px;
                    }
        
                    h1, h2, h3, h4, h5, h6, p {
                        margin: 0;
                        margin-bottom: .5em;
                    }
        
                    .box > p {
                        font-size: 16px;
                    }
                }
        
.load-more-container {
    text-align: center;
    margin-top: 20px;
}

.load-more {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    border-radius: 5px;
}

.load-more:hover {
    background-color: #0056b3;
}