/* Table Of Content */
/*
1. Section Settings
2. Section Carousel
3. Section Blog
4. Section Footer
5. Section Navbar
6. Section page-title
7. Section timeline
8. ยอดคนไข้
9. Section fullCalendar
10. Section pagination
*/

/* google fonts */
@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

/* 1. Section Settings */
    html,
    body {
        /* height: 100%; */
        font-family: 'Sarabun', sans-serif;      /* google fonts */
        scroll-behavior: smooth;
    }

    .bg-alpha {
        background: rgba(21, 34, 56, 0.5)
    }

    .border-short-bottom {              /* ขีดเส้นใต้ */
        position: relative;
        padding: 20px 0;
        margin-bottom: 25px;
    }

    .border-short-bottom::after {       /* ขีดเส้นใต้ */
        position: absolute;
        content: "";
        width: 100px;
        height: 2px;
        bottom: 0;
        left: 50%;
        margin-left: -50px;
        background: #595959;
    }

    .totop {                            /* Back To Top */
        position: fixed;
        bottom: 10px;
        right: 10px;
        background: rgba(29, 58, 90, 0.5);
        padding: 10px;
        color: #fff;
        border-radius: 10px;
        opacity: 0;
        pointer-events: none;
        transition: all .4s;
    }

    .totop.active {                     /* Back To Top Active*/
        bottom: 20px;
        pointer-events: auto;
        opacity: 1;
        backdrop-filter: blur(10px);
    }

    #blog-sidebar-a {
        text-decoration: none;
    }  

    .textblue {
        color: #1d3a5a;
    }

    .bgblue {
        color: #fff;
        background: #1d3a5a;
        transition: 0.3s;
    }

    .bgblue:hover {
        color: #1d3a5a;
        background: #fff;
        border-style: solid;
        border-color: #1d3a5a;
    }

    .bg-blue {
        color: #fff;
        background: #1d3a5a;
    }



/* 2. Section Carousel */
/* .carousel,
.carousel-inner,
.carousel-item,
.carousel-inner .active {
    height: 100%;
}

.carousel-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.carousel-caption {
    top: 40%;
} */

.backscreen {
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
}

/* 3. Section Blog */
.warpper-card-img {
    position: relative;
    overflow: hidden;
}

.warpper-card-img::after {
    content: '';
    padding-top: 56.25%;
    display: block;
    height: 0;
}

.warpper-card-img img {
    position: absolute;
    top: 0;
    transition: 1s;
}

.warpper-card-img img:hover {
    transform: scale(1.2)
}

/* ปุ่ม Tag หน้า Blog */
.btn-group-custom button{                       
    margin-bottom: 0.5rem;
    width: 160px;
}

.btn-group-custom a:hover{                  /* a:hover การเอาเมาส์ไปวางที่ tag a */               
    text-decoration: none;                  /* text-decoration ขีดเส้นใต้ */
}

.btn-group-custom2 button{                       
    margin-bottom: 0.5rem;
    width: 100px;
}

.btn-group-custom2 a:hover{                              
    text-decoration: none;                  
}

.btn-group-custom3 a:hover{                              
    text-decoration: none;                  
}

.btn-group-custom3 button{                       
    margin-bottom: 0.5rem;
    width: 190px;
}

.btn-group-custom4 a:hover{                              
    text-decoration: none;                  
}

.btn-group-custom4 button{     
    width: 370px;
}

.btn-group-custom5 a:hover{                              
    text-decoration: none;                  
}

.btn-group-custom5 button{     
    width: 388px;
}

/* คลุมดำหน้า about ประวัติความเป็นมา */
.blog-image{                                    
    padding: 130px 0px 60px;
    text-align: center;
    color: #fff;    
    background-color: rgba(0, 0, 0, 0.5);
}

/* คลุมดำหน้า about ประวัติความเป็นมา */
.blog-image2{                                    
    padding: 30px 0px 30px;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}

/* เบลอหน้า detail */
.blog-image3{                                    
    padding: 130px 0px 60px;
    text-align: center;
    color: #fff;
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, 0.5);
}

.blog-image4{                                    
    padding: 30px 0px 50px;
    text-align: center;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
}

/* หน้า detail เพิ่มเงา */
.blog-content{                                  
    padding: 50px 100px;
    box-shadow: 0px 0px 10px #a5a5a5;
}

/* ปรับระยะห่างเมื่อย่อหน้าในหน้า detail */
@media (max-width: 991px ){
    .blog-content{
        padding: 40px 50px;
    }
}

@media (max-width: 768px ){
    .blog-content{
        padding: 20px 30px;
    }
}

.owl-carousel .card-body {
    height: 100px;
    overflow: hidden;
}

.owl-carousel .card-owl {
    height: 110px;
    overflow: hidden;
}

/* 4. Section Footer */
.semi-footer{
    background-color: #1d3a5a;
    color: #fff;
}

.semi-footer a{
    color: #fff;
    text-decoration: none;
}

.semi-footer h4{
    color: #fff;
    /* border-bottom: 1px solid; */
    padding: 10px 0;    
}

.footer{
    background: #000;
    color: #fff;
    font-size: 0.9rem;
    height: 90px;
    line-height: 90px;  /* สำหรับข้อความแถวเดียว */
    text-align: center;
}

/* 5. Section Navbar */
#navbar {
    padding: 10px;    
    background: rgba(29, 58, 90, 0.949);
}

.navbar {
    background: rgb(29, 58, 90);
    transition: all 0.5s;
}

.navbar-2 {
    background: rgb(0, 0, 0, 0.5);
    transition: all 0.5s;
}

.navbar-scrolled {
    backdrop-filter: blur(3px);
    background: rgba(29, 58, 90, 0.9)
}

/* Bootstrap 4 Responsive Dropdown Submenu https://codepen.io/surjithctly/pen/PJqKzQ */
.dropdown-submenu {
    position: relative;
}
  
.dropdown-submenu a::after {
    transform: rotate(-90deg);
    position: absolute;
    right: 6px;
    top: .8em;
}
  
.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;
}

/* 6. Section page-title */
.page-title{
    position: relative;
    display: block;
    padding-top: 200px;
    padding-bottom: 100px;
    color: #fff;
}

/* 7. Section timeline */
.timeline {
    list-style: none;
    position: relative;
    padding: 20px 0;
}

.timeline>li {
    position: relative;
    margin-bottom: 40px;
}

.timeline::before {
    position: absolute;
    content: " ";
    width: 2px;
    background: #e6e6e6;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -1px;
}

li>.timeline-badge {
    position: absolute;
    width: 18px;
    height: 18px;
    border: 3px solid #84ba3f;
    left: 50%;
    margin-left: -9px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 5px #fff;
    top: 15px;
}

li>.timeline-badge::before {
    content: "";
    position: absolute;
    top: 5px;
    right: 20px;
    width: 25px;
    height: 2px;
    background: #e6e6e6;
}

li.inverted>.timeline-badge::before {
    right: -32px;
}

li>.timeline-badge p {
    width: 200px;
    margin-top: -9px;
    margin-left: 25px;
    font-size: 17px;
    font-weight: bold;
}

li.inverted>.timeline-badge p {
    float: right;
    text-align: right;
    margin-right: 25px;
}

li>.timeline-card {
    position: relative;
    width: 46%;
    float: left;
    text-align: right;
    padding: 0 10px;
}

li.inverted>.timeline-card {
    float: right;
    text-align: left;
}

.timeline>li::after {
    content: "";
    clear: both;
    display: block;
}

.timeline-arrow {
    width: 100%;
    text-align: center;
    bottom: -70px;
    color: #e6e6e6;
}

@media (max-width: 768px) {
    .timeline::before,
    .timeline-badge {
        left: 40px !important;
    }
    .timeline-badge::before {
        right: -32px !important;
    }
    .timeline-badge p,
    li.inverted>.timeline-badge p {
        margin-left: 50px !important;
        text-align: left;
        float: left;
    }
    li>.timeline-card {
        width: 100%;
        text-align: left;
        padding: 37px 0 0 85px;
    }
    .timeline-arrow {
        text-align: left;
        left: 0;
    }
    .timeline-arrow {
        padding-left: 32px;
    }
}

/* 8. ยอดคนไข้ */
  .card-icon-large {
    font-size: 65px;
    right: 5px;
    bottom: 5px;
}
.card-icon-large2 {
    font-size: 30px;
    right: 60px;
    top: -4px;
}
.card-icon-large3 {
    font-size: 40px;
    right: 80px;
    bottom: 0px;
}
.card-icon {
    text-align: center;
    line-height: 50px;
    margin-left: 15px;
    color: #000;
    position: absolute;
    opacity: 0.1;
}

/* 9. Section fullCalendar */
/* https://github.com/fullcalendar/fullcalendar/issues/4638 */
@media(max-width: 992px) {
    .fc-toolbar.fc-header-toolbar {
      display: flex;
      flex-direction: column;
    }
    .fc-toolbar.fc-header-toolbar .fc-left {
      order: 3;
    }
    .fc-toolbar.fc-header-toolbar .fc-center {
      order: 1;
    }
    .fc-toolbar.fc-header-toolbar .fc-right {
      order: 2;
    }
  }


/* 10. Section pagination */
/* สไตล์สำหรับหน้าจอขนาดเล็ก (เช่น สมาร์ทโฟน) */
@media (max-width: 768px) {
    .pagination-desktop {
        display: none;
    }
    .pagination-mobile {
        display: block;
    }
}
/* สไตล์สำหรับหน้าจอขนาดใหญ่ (เช่น คอมพิวเตอร์) */
@media (min-width: 768px) {
    .pagination-mobile {
        display: none;
    }
    .pagination-desktop {
        display: block;
    }
}