/* Navbar */

    .navbar .navbar-nav .nav-link:hover {
        background-color: #ffeb3b;
        /* color: #063570; */
        color: #000000;
        border-radius: 1%;
    }

    .navbar {
        padding: 5px;
        /* opacity: 0.9 !important; */
        top: 35px;
        /* กำหนด navbar Sticks หลังจาก topbar */
    }

    .navbar .navbar-nav .nav-link {
        padding: 1em;
        transition: all .5s;
    }

    .navbar .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover {
        background-color: #18e9aa;
        color: #000000;
        border-radius: 1%;
    }

    @media screen and (max-width:992px) {
        .navbar-brand {
            padding: .6em;
            padding-left: .4em;
        }

        .navbar {
            top: 0px;
            /* กำหนด navbar Sticks */
        }
    }

    @media all and (min-width: 992px) {
        .navbar .nav-item .dropdown-menu {
            display: none;
        }

        .navbar .nav-item:hover .dropdown-menu {
            display: block;
        }

        .navbar .nav-item .dropdown-menu {
            margin-top: 0;
        }
    }

    /* end Navbar */


    body {
        /* font-family: 'Kanit', sans-serif; */
        font-family: "Noto Sans Thai", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
        font-variation-settings:
            "width" 95.1;
    }

    p {
        font-family: 'Sarabun', sans-serif;
    }

    .owl-prev {
        position: absolute;
        top: 100px;
        left: -4px;
    }

    .owl-next {
        position: absolute;
        top: 100px;
        right: -4px;
    }

    .owl-prev span,
    .owl-next span {
        font-size: 2rem;
    }

    .card-title a {
        color: #150366;
        font-size: 1rem;
        font-weight: normal;
    }

    /* .card-title a:hover {
    color: #0b055f;
    font-size: 1rem;
    font-weight: 600; 
} */

    .card-title,
    .card-header {
        font-size: 1rem;
        font-weight: normal;
        /* font-weight: 600; */
    }

    .card-text {
        font-size: 0.9rem;
        font-family: 'Sarabun', sans-serif;
    }

    .text-decoration-none,
    a,
    a:hover {
        color: #073b4c;
    }

    a {
        color: #ef476f;
    }

    /* a img:hover {
    opacity: 0.5 !important;
    transition: 0.6s;
    background: #1abc9c;
} */


    figure {
        background: #E5F9FE;
    }

    figure a img {
        opacity: 1;
        -webkit-transition: .3s ease-in-out;
        transition: .3s ease-in-out;
    }

    figure:hover a img {
        opacity: 0.4;
    }

    /*ตั้งค่าสีพาสเทลเฉาพะ*/
    .bg-granny-apple {
        background-color: #D0F4DE;
    }

    .bg-mastard {
        background-color: #FCEE9E;
    }

    .bg-tropical-blue {
        background-color: #C0E4F6;
    }


    /* Small devices (landscape phones, 576px and up) */

    @media screen and (max-width: 576px) {
        .txt-h1 {
            font-size: 18px;
        }

        .txt-h2 {
            font-size: 15px;
        }

        img.imghead-logo {
            max-width: 100px;
            height: auto;
        }

        h3.txt-brand {
            font-size: 20px;
        }

        h4.txt-brand {
            font-size: 18px;
        }

        h6.txt-brand {
            font-size: 14px;
        }

        .txt-brand {
            margin-bottom: 5px;
        }
    }

    @media screen and (min-width: 577px) {
        .txt-h1 {
            font-size: 22px;
            /* 24 */
        }

        .txt-h2 {
            font-size: 19px;
        }

        img.imghead-logo {
            max-width: 120px;
            height: auto;
        }

        h3.txt-brand {
            font-size: 28px;
        }

        h4.txt-brand {
            font-size: 26px;
        }

        h6.txt-brand {
            font-size: 16px;
        }

        /* h3.txt-brand,
        h4.txt-brand {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        } */
    }

    /* counter-box */
    .counter-box {
        /* background: #316096; */
        background: #036796;
        border-radius: 5px;
        padding: 10px;
    }

    .counter-box p {
        margin-bottom: 3px;
    }

    /* end counter-box */
    .total-num-ip:hover {
        background-color: #0adbf7;
        /* เปลี่ยนสีพื้นหลัง */
        padding: 2px;
        /* เพิ่มการเว้นระยะ */
        border-radius: 20px;
        /* เพิ่มความโค้งให้กับขอบ */
    }

    /* TopBar */
    /* Sticky Topbar */
    .topbar {
        background-color: #ffffff;
        color: #220263;
        padding: 5px;
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 1000;
        height: 35px;
    }

    .topbar a {
        color: #220263;
        margin-left: 15px;
        text-decoration: none;
    }

    .topbar a:hover {
        background-color: #073b4c;
        color: #ffffff;
        border-radius: 10px;
    }

    .topbar .contact-info {
        font-size: 13px;
    }

    .topbar .social-icons {
        font-size: 14px;
    }

    @media all and (max-width: 992px) {
        .topbar {
            display: none;
            /* Hide the topbar on screens smaller than 992px */
        }
    }

    /*end TopBar */
    .word-wrap {
        overflow-wrap: break-word;
        /* ตัดคำเฉพาะเมื่อคำมีความยาวเกินไป */
    }

    .bg-gradient-c1 {
        background: linear-gradient(to right, #000066, #006666);
        /* เปลี่ยนสีพื้นหลัง */
    }

    .bg-gradient-c2 {
        background: linear-gradient(to right, #2ceea3, #33CCFF);
        /* เปลี่ยนสีพื้นหลัง */
    }

    .bg-gradient-c3 {
        background: linear-gradient(to right, #b5fadf, #abe9fd);
        /* เปลี่ยนสีพื้นหลัง */
    }