:root{
    --thm-main: #ffa811;
    --thm-hover:#a37f54;
    --thm-bg:   #ffeccc;
    --thm-invert:#005248;
    --thm-text: #402e32;

    --thm-white:#FFFFFF;
    --thm-light:#f5f5f5;
    --thm-gray: #909ca0;
}

/*
////////////////////////////////////////////////////
*/


html{
    font-family: 'Roboto', "Noto Sans Thai", sans-serif;
    font-size: 16px;
    font-weight: 400;
}
body{
    color: var(--thm-main-text); 
	background-color: var(--thm-latte);
}

body.loading{
    overflow: hidden;
}
body.loading #loading{
    display: flex;
    align-items: center;
    justify-content: center;
}

a {
    color: var(--theme-highlight);
    -webkit-transition: 0.3s ease;
    transition: 0.3s ease;
    text-decoration: none;
}


.text-main{
    color: var(--thm-main);
}
.text-default{
    color: var(--thm-text);
}


.main-btn{
    display: inline-block;
    font-size: 1rem;
    font-weight: 500;
    padding: 8px 24px;
    color: var(--thm-white);
    background-color: var(--thm-main);
    border:none;
    border-radius: 20px;
}
.main-btn:hover{
    color: var(--thm-white);
    background-color: var(--thm-text);

}



[class*='ratio-'] {
    object-fit: cover;
}
.ratio-1-1{
    aspect-ratio: 1/1;
}
.ratio-16-9{
    aspect-ratio: 16/9;
}
.ratio-16-10{
    aspect-ratio: 16/10;
}
.ratio-4-3{
    aspect-ratio: 4/3;
}
.ratio-3-2{
    aspect-ratio: 3/2;
}

.ratio-9-16{
    aspect-ratio: 9/16;
}
.ratio-10-16{
    aspect-ratio: 10/16;
}
.ratio-3-4{
    aspect-ratio: 3/4;
}
.ratio-2-3{
    aspect-ratio: 2/3;
}


.gap-10{
    gap: 10px;
}
.gap-15{
    gap: 15px;
}



/*
////////////////////////////////////////////////////
*/

.MSymbols::before{
    font-family: 'Material Symbols Outlined';
}
.MSymbols.bold::before{
    font-family: 'Material Symbols Outlined';
    font-variation-settings:'FILL' 1,'wght' 900,'GRAD' 200,'opsz' 48;
}


/*
////////////////////////////////////////////////////
*/

.isQueryContainer{
    container-type: inline-size;
    height: 100%;
}


/*
////////////////////////////////////////////////////
*/

.isEllipsis{
	/*-webkit-line-clamp: 2;*/
	-webkit-box-orient: vertical;
    text-overflow: ellipsis;
    display: -webkit-box;
    overflow: hidden;
}

/*
////////////////////////////////////////////////////
*/

.invisibleScroll{
	-ms-overflow-style: none;
    scrollbar-width: none;
}
.invisibleScroll::-webkit-scrollbar {
  	display: none;
}

/*
////////////////////////////////////////////////////
*/

.paging-list{
    display: flex;
    margin-left: -5px;
    margin-right: 10px;
}
.paging-list > li{
    padding-left: 5px;
}
.paging-list > li > a{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    color: #183446;
    background-color: #FFF;
    box-shadow: rgba(45, 55, 72, 0.1) 0px 2px 4px -1px;
}
.paging-list > li > a:hover{
    background-color: gold;
}
.paging-list > li > a.active{
    color: #FFF;
    background-color: #0295cb;
}


/*
////////////////////////////////////////////////////
*/


.footer-info{
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #fff8ec;
}
.footer-logo{
    width: 80px;
}
.footer-info-address{
    line-height: 1.2;
}
.footer-info-social{

}

.footer-info .footer-header{
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer-contact{
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.footer-contact .contact-list{
    font-size: 14px;
    word-break: break-word;
}


.footer-credit{
    font-size: 13px;
    color: var(--thm-white);
    background-color: var(--thm-invert); 
    padding: 1rem; 
    text-align: center;
}
.footer-menu > li > a{
    font-size: 13px;
    color: var(--thm-white);

}
.footer-menu > li > a:hover{
    color: var(--thm-main);
}

@media (max-width: 767.98px){
    .footer-detail{
        text-align: center;
    }
    .footer-info-social{
        justify-content: center;
        margin-bottom: 1.5rem;
    }
    .footer-contact{
        display: block;
    }
}


.mini-gallery-blog{
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    height: 100%;
}
.mini-gallery-blog .gallery-list{
    max-width: 200px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}
.mini-gallery-blog .gallery-list > *{
    width: calc((100% * 1 / 3.001) - 5px);
}



/*
////////////////////////////////////////////////////
*/

#menu-bar{
    background-color: #f8f8f8;
    z-index: 5;
}
#menu-bar .uk-navbar-container{
    height: 80px;
    align-items: center;
}
#menu-bar .logo img{
    height: 68px;
}

#menu-bar .menu-navbar{
    align-items: center;
}
#menu-bar .menu-navbar > li > a{
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--thm-text);
}
#menu-bar .menu-navbar > li > a:hover{
    color: var(--thm-hover);
}

#menu-bar .menu-navbar > li > a.btnBooking{
    padding: 0.2rem 1rem;
    font-size: 13px;
    color: var(--thm-main);
    /* background-color: var(--thm-main); */
    border: 3px solid var(--thm-main);
    border-radius: 15px;
}
#menu-bar .menu-navbar > li > a.btnBooking:hover{
    color: var(--thm-white);
    background-color: var(--thm-main);
}

a.language-btn{
    font-size: 12px;
    font-weight: 600;
}
a.language-btn::after{
    content: '\e5cf';
    font-family: 'Material Symbols Outlined';    
}


#menu-bar .menu-navbar .uk-navbar-dropdown{
    padding: 10px 0px;
    border-top: 4px solid var(--thm-hover);
    background-color: var(--thm-white);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
    border-radius: 0 0 5px 5px;
    overflow: hidden;
}
#menu-bar .menu-navbar .uk-navbar-dropdown a{
    padding: 0.5rem 1rem;
    color: var(--thm-text);
    text-transform: uppercase;
    font-weight: 500;
}
#menu-bar .menu-navbar .uk-navbar-dropdown a:hover{
    color: var(--thm-white);
    background-color: var(--thm-main);
}

#menu-bar .menu-navbar .language-dropdown{
    width: 120px;
}
#menu-bar .menu-navbar .language-dropdown li.uk-active > a::before{
    content: '\e876';
    font-family: 'Material Symbols Outlined'; 
    font-size: 1.1rem;
}



#mobile-menu-btn::before{
    content: '\e5d2';
    font-family: 'Material Symbols Outlined'; 
    font-size: 1.5rem;
}


@media (max-width: 767.98px){
    #menu-bar .uk-navbar-container{
        height: 60px;
    }
    #menu-bar .logo img{
        height: 48px;
    }
}


/*
////////////////////////////////////////////////////
*/

#mobile-offcanvas > .uk-offcanvas-bar{
    color: var(--thm-white);
    background-color: var(--thm-text);
}
#mobile-offcanvas > .uk-offcanvas-bar a{
    color: var(--thm-white);
}
#mobile-offcanvas > .uk-offcanvas-bar .menu-navbar{
    margin-top: 2rem;
}
#mobile-offcanvas > .uk-offcanvas-bar .menu-navbar > li > * > .uk-list{
    padding: 10px 0;
    padding-left: 1rem;
}
#mobile-offcanvas > .uk-offcanvas-bar .menu-navbar > li > * > .uk-list > li{
    margin: 0;
}
#mobile-offcanvas > .uk-offcanvas-bar .menu-navbar > li > * > .uk-list > li > a{
    font-size: 14px;
    text-transform: uppercase;
}

#mobile-offcanvas > .uk-offcanvas-bar a:hover{
    color: var(--thm-main);
}


/*
////////////////////////////////////////////////////
*/

.goto-btn{
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--thm-white);
    background-color: var(--thm-main);
    padding: 5px 1rem;
    border-radius: 15px;
    border: none;
}
.goto-btn::after{
    content: '\e941';
    font-family: 'Material Symbols Outlined';
    font-size: 1.2rem;
    line-height: 1;
    margin-left: 5px;
}
.goto-btn:hover{
    color: var(--thm-white);
    background-color: var(--thm-text);
}


/*
////////////////////////////////////////////////////
*/


[uk-lightbox] a{
    position: relative;
    display: block;
    overflow: hidden;
}
[uk-lightbox] a > img{
    transition: all ease-in 0.3s;
}
[uk-lightbox] a:hover > img{
    transform: scale(1.1);
}
[uk-lightbox] a:hover::before{
    content: '\e8ff';
    font-family: 'Material Symbols Outlined';
    font-size: 2rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--thm-white);
    background-color: rgba(0,0,0,0.5);
    backdrop-filter: blur(1px);
    z-index: 2;
}


/*
////////////////////////////////////////////////////
*/


.page-breadcrumb{
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}
.page-breadcrumb .filter-drop{
    backdrop-filter: blur(3px);
    background-color: rgba(0, 0, 0, 0.3);
}
.page-header{
    padding: 170px 0 58px;
    position: relative;
    text-align: center;
    z-index: 2;
}
.page-header > h2{
    position: relative;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--thm-white);
    padding-bottom: 40px;
    margin-bottom: 40px;
    text-transform: uppercase;
}
.page-header > h2::before{
    content: '';
    background: rgba(0, 0, 0, 0) url("../images/header-breadcrumb.png") no-repeat scroll 0 0;
    bottom: -30%;
    height: 50%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    width: 140px;
}

/*
////////////////////////////////////////////////////
*/


#our-partner{
    padding-top: 2rem;
    padding-bottom: 2rem;
}
#our-partner .title{
    font-size: 20px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;
    color: #ffa811;
}
#our-partner .partner-list{
    justify-content: center;
    gap: 20px;
    margin-top: 1.5rem;
}
#our-partner .partner-list img{
    width: 40px;
}

@media (max-width: 575.98px){
    #our-partner .partner-list{
        gap: inherit;
    }
    #our-partner .partner-list > li{

    }
    #our-partner .partner-list img{
        width: 30px;
    }
}



/*
////////////////////////////////////////////////////
*/


#loading{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--thm-light);
    display: none;
    z-index: 1097;
}
#loading > i{
    font-size: 3rem;
    color: var(--thm-main);
}