.bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    @media (min-width: 768px) {
        .bd-placeholder-img-lg {
            font-size: 3.5rem;
        }
    }

    .blog-header {
        line-height: 1;
        border-bottom: 1px solid #e5e5e5;
    }

    .blog-header-logo {
        font-family: 'Kanit', sans-serif;
        font-size: 2.25rem;
    }

    .blog-header-logo:hover {
        text-decoration: none;
    }

    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    div pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    font,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    figure,
    header,
    nav,
    section,
    article,
    aside,
    footer,
    figcaption {
        font-family: 'Kanit', sans-serif;
    }

    .display-4 {
        font-size: 2.5rem;
    }

    @media (min-width: 768px) {
        .display-4 {
            font-size: 3rem;
        }
    }

    .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
    }

    .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    .nav-scroller .nav-link {
        padding-top: .75rem;
        padding-bottom: .75rem;
        font-size: .875rem;
    }

    .card-img-right {
        height: 100%;
        border-radius: 0 3px 3px 0;
    }

    .flex-auto {
        flex: 0 0 auto;
    }

    .h-250 {
        height: 250px;
    }

    @media (min-width: 768px) {
        .h-md-250 {
            height: 250px;
        }
    }

    /* Pagination */
    .blog-pagination {
        margin-bottom: 4rem;
    }

    .blog-pagination>.btn {
        border-radius: 2rem;
    }

    /*
        * Blog posts
        */
    .blog-post {
        margin-bottom: 4rem;
    }

    .blog-post-title {
        margin-bottom: .25rem;
        font-size: 2.5rem;
    }

    .blog-post-meta {
        margin-bottom: 1.25rem;
        color: #727272;
    }

    /*
        * Footer
        */
    .blog-footer {
        padding: 2.5rem 0;
        color: #727272;
        text-align: center;
        background-color: #f9f9f9;
        border-top: .05rem solid #e5e5e5;
    }

    .blog-footer p:last-child {
        margin-bottom: 0;
    }

    /* styles.css */
    /* สไตล์ CSS สำหรับปุ่มก่อนหน้า */
    .blog__details__btns__item {
        background-color: #f1f1f1;
        padding: 20px;
        border-radius: 5px;
        text-align: center;
    }

    /* สไตล์ CSS สำหรับปุ่มถัดไป */
    .blog__details__btns__item--next {
        background-color: #f1f1f1;
        padding: 20px;
        border-radius: 5px;
        text-align: center;
    }

    /* สไตล์ CSS สำหรับลูกศร */
    .arrow_left,
    .arrow_right {
        font-size: 24px;
    }

    /* เพิ่มสไตล์สำหรับปุ่ม */
    .blog__details__btns__item {
        background-color: #3498db;
        /* สีพื้นหลัง */
        color: #fff;
        /* สีตัวอักษร */
        padding: 15px;
        text-align: center;
        text-decoration: none;
        display: block;
        border-radius: 5px;
        transition: background-color 0.3s ease;
    }

    .blog__details__btns__item:hover {
        background-color: #2980b9;
        /* สีพื้นหลังเมื่อโฮเวอร์ */
    }

    /* สไตล์สำหรับปุ่มถัดไป */
    .blog__details__btns__item--next {
        background-color: #2ecc71;
    }

    .blog__details__btns__item--next:hover {
        background-color: #27ae60;
    }

    /* สไตล์สำหรับแสดงลูกศร */
    .arrow_left,
    .arrow_right {
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        margin-top: 2px;
    }

    .arrow_left {
        border-width: 5px 8px 5px 0;
        border-color: transparent #fff transparent transparent;
        margin-right: 10px;
    }

    .arrow_right {
        border-width: 5px 0 5px 8px;
        border-color: transparent transparent transparent #fff;
        margin-left: 10px;
    }

    /* สำหรับ ul */
    .content ul li {
        list-style: disc;
        /* หรือ circle, square, none ตามต้องการ */
        margin-bottom: 10px;
        /* ปรับขนาดระยะห่างตามที่ต้องการ */
    }

    /* สำหรับ ol */
    .content ol li {
        list-style: decimal;
        /* หรือ lower-alpha, upper-roman, none ตามต้องการ */
        margin-bottom: 10px;
        /* ปรับขนาดระยะห่างตามที่ต้องการ */
    }