/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}
:root {
	--eras-primary : #895655;
	--eras-second : #484848;
	--eras-third: #929292;
    --color-gradient : linear-gradient(90deg, #bbb2b2 20%, #f1f1e3 100%) 1;
    --color-gradient1 :   linear-gradient(90deg, #E42E00 10%, #F78F29 26%, #F3EB3C 42%, #138845 58%, #3062AE 74%, #4D2A77 90%) 1;
    --tour-price : rgb(163, 0, 0); 
}

html{
    scroll-behavior: smooth;
}

/* @font-face {  font-family: 'jet-light'; src: url('/fonts/Greycliff-CF-Light.otf') format('otf');  
    font-weight: 300; }
@font-face {  font-family: 'jet-regular'; src: url('/fonts/Greycliff-CF-Regular.otf') format('otf');  
    font-weight: 400; }
@font-face {  font-family: 'jet-medium'; src: url('/fonts/Greycliff-CF-Medium.otf') format('otf');  
    font-weight: 500; }
@font-face {  font-family: 'jet-bold'; src: url('/fonts/Greycliff-CF-Bold.otf') format('otf');  
    font-weight: 600; }

.jet-light {font-family: 'jet-light';}.jet-regular {font-regular: 'jet-regular';}
.jet-medium {font-family: 'jet-medium';}.jet-bold {font-bold: 'jet-bold';}

body, p, div , a{font-family: 'jet-regular',sans-serif;}
h1,h2,h3,h4,h5,h6 {font-family: 'jet-bold',sans-serif;} */

.img-radius, .img-radius img {border-radius: 10px;}

.bg-gradient {background: linear-gradient(90deg, #E42E00 10%, #F78F29 26%, #F3EB3C 42%, #138845 58%, #3062AE 74%, #4D2A77 90%);}
#top-bar .jet-info a{font-size: 15px; color: #929292; margin-right: 20px;}
#top-bar {border-bottom: 1px solid transparent; border-image: var(--color-gradient)}

.header-button a {background-color: var(--eras-primary)}
.header-button a i{ padding: 13px 15px; color: #fff}

.pswp__bg, .mfp-bg.mfp-ready { background-color: #1d1d1d!important; /*Background search flatsome */}


.section-different {border-bottom: 1px solid transparent; border-top: 1px solid transparent; border-image: var(--color-gradient)}
.section-different .col-inner i {transition: padding-left .3s cubic-bezier(0.445, 0.05, 0.55, 0.95) ;}
.section-different .col-inner  h3{color: var(--eras-primary)!important; }
.section-different .col-inner:hover i {padding-left: 10px;}


.section-footer p {font-size: 18px; margin-bottom: 5px;}
.section-footer p a {color: #fff; font-weight: 600;}
.section-footer p a:hover {color : var(--eras-primary)}

.title-image {
	position: absolute;
    transform: translate(0%, -50%);
    top: 50%;
    color: #fff;
    font-size: 60px;
    text-align: center;
}

.jet-breadcums{padding:0; background: #efefef}
.jet-breadcums .col {padding-bottom:0;padding-left: 15px}
.jet-breadcums .rank-math-breadcrumb {padding: 1rem 0 0; }

.all-tours {margin-top: 20px;}
.all-tours .col-inner, .all-tours .box {border-radius: 10px;}
.all-tours .box-image , .all-tours .box-image img {border-radius: 10px 10px 0 0 ;}
.all-tours .box-text {border-radius: 0 0 10px 10px; padding: 10px 20px   ;}
.all-tours .box-text h4:hover {color : var(--eras-primary)}

.all-tours .tour-price {color: var(--tour-price)}
.all-tours .box-text .box-text-inner {display: flex;align-items: top;justify-content: space-between; gap: 40px;}
.all-tours .box-text strong {display: block; text-align: center;}

.menu-tours .col {padding-bottom: 0;}
.menu-tours {background: #ebebeb;  position: sticky; top: 0px; margin-bottom: 10px; z-index: 9999;}
.menu-tours ul{display: flex; align-items: center; justify-content: space-around; padding: 15px 0 0 0;}
.menu-tours li {list-style: none; margin-bottom: 0;}
.menu-tours li a {color : #111; font-weight: 600;}
.menu-tours li a:hover, .menu-tours .menu-active {color : var(--eras-primary); text-decoration: underline ;}
.menu-tours .menu-active {text-decoration: underline ;}

.title-tour {font-size: 25px;}

.o-tour .fa {color: var(--eras-primary)}
.o-tour h4 {color: var(--eras-second)}
.o-tour {background: #fff; border-radius: 10px; margin-bottom: 10px; padding: 20px; box-shadow: 0 0 4px #929292; scroll-margin-top:80px;}
.slide-gallerys img {width: 100% ;}

.title-slider, .button-gallery  {display: flex; }
.button-gallery button {margin-bottom: 0;}

.chitiet-tour .col {padding-bottom: 0; }
.chitiet-tour .noidung-tour {padding: 10px; text-align: justify;}

.chitiet-tour .col.large-12{  position: relative;  padding-left: 55px;}

.chitiet-tour .col.large-12::before{ content: "";  position: absolute;  left: 18px;  top: 35px;  bottom: -25px;  width: 2px;    background: var(--eras-second);}

.chitiet-tour .col.large-12:last-child::before{  display: none;}


.chitiet-tour h4{    position: relative;    border-radius: 5px;    font-size: 20px;   background-color: var(--eras-second); color: #fff; padding: 10px 0px 10px 10px;}


.chitiet-tour h4::before{    content: "";    position: absolute;    left: -45px;    top: 50%;    transform: translateY(-50%);    width: 18px;    height: 18px;    border-radius: 50%;    background: var(--eras-primary);    border: 4px solid #fff;    box-shadow: 0 0 0 2px var(--eras-primary);    z-index: 2;}

.sidebar-tour .col-inner{box-shadow: 0 0 10px #ccc; border-radius: 10px; padding: 20px 20px; margin-bottom: 20px;}
.sidebar-tour .col-inner h4 {color: var(--eras-primary); margin-bottom: 0;}

.price-tour p {margin-bottom: 5px;}
.price-tour span {color: var(--eras-third); font-size: 15px;}
.price-tour span.gia {font-size: 30px; font-weight: 600; color: #000}

.sidebar-tour {position: sticky; top: 0px}
.sidebar-tour fieldset {margin-bottom: 0;}
.form-tour .col {padding-bottom: 0;}
.form-tour input, .form-tour select {border-radius: 10px; height: 45px;}
.form-tour textarea {border-radius: 10px;}

.form-lh .col {padding-bottom: 5px}

.form-lh input[type=text], .form-lh input[type=submit], .form-lh input[type=tel], .form-lh input[type=email] {
	height: 45px;border-radius: 10px;
}
.form-lh textarea { border-radius: 10px}

.section-purpose .col {padding-bottom: 0}
.section-purpose h3 {margin-bottom: 0}
.section-purpose .col-right {background: #5e5e5ee0; border-radius: 10px;}
.section-purpose .col-right .icon-box {align-items: center;}
.section-purpose .icon-box-img {border-radius: 99px}

.section-purpose .col-right .icon-box:nth-child(2) {border-bottom: 1px solid #fff; border-top: 1px solid #fff;  border-image: var(--color-gradient)}





/*CSS BUTTON CUSTOME SLIDE*/
.button-gallery .gallery-prev , .button-gallery .gallery-next {	margin-bottom: 10px; background-color: #fff; border-radius: 10px; height: 2rem; transform: rotate(45deg);   width: 2rem;    line-height: 1.5;    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);}
.button-gallery .gallery-prev i, .button-gallery .gallery-next i { transform: rotate(315deg); width: 2rem; height: 2rem; font-size: 18px; right: -5%; position:absolute;    top: 20%;}
.button-gallery button:hover {background: var(--eras-primary); color: #fff}


/*CSS LIGHTBOX IMAGE TOUR*/
.fb-gallery{

    display:grid;

    grid-template-columns:2fr 1fr 1fr;

    grid-template-rows:repeat(2,220px);

    gap:10px;

}

.fb-gallery .main{

    grid-row:1 / span 2;

    overflow:hidden;

    border-radius:14px;

}

.fb-gallery .thumb{

    overflow:hidden;

    position:relative;

    border-radius:14px;

}

.fb-gallery img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.35s;

    display:block;

}

.fb-gallery a{

    display:block;

    width:100%;

    height:100%;

}

.fb-gallery img:hover{

    transform:scale(1.06);

}

.fb-gallery .overlay{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.55);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:34px;

    font-weight:700;

    letter-spacing:1px;

}

.fb-gallery-hidden{

    display:none;

}

@media(max-width:849px){

.fb-gallery{

grid-template-columns:1fr 1fr;

grid-template-rows:260px 150px 150px;

}

.fb-gallery .main{

grid-column:1 / span 2;

grid-row:1;

}

}

@media(max-width:549px){

.fb-gallery{

gap:5px;

grid-template-rows:220px 100px 100px;

}

.fb-gallery .overlay{

font-size:24px;

}

}

/*CSS CUSTOME FLICKY*/
.flickity-prev-next-button,
.slider-show-nav .flickity-prev-next-button, 
.slider:hover .flickity-prev-next-button {
    opacity: 1;
}
.flickity-prev-next-button .arrow, .flickity-prev-next-button svg {
    fill: #fff!important;
}

.flickity-prev-next-button svg, 
.flickity-prev-next-button:hover .arrow, 
.flickity-prev-next-button:hover svg {
    background-color: var(--eras-primary);
    border-color: var(--eras-primary)!important;
    padding: 12px;
    fill: #fff!important;
    border-radius: 99px
}


.copyright-footer {	color: #fff;}

/* CSS BUTTON SLIDER CUSTOM*/
.mfp-arrow, .mfp-counter {color: #000}
.mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: pointer}

.jet-slider .flickity-prev-next-button {
    width: 50px;
}

.jet-slider .flickity-prev-next-button,
.jet-slider .slider-show-nav .flickity-prev-next-button, 
.jet-slider .slider:hover .flickity-prev-next-button {
    opacity: 1;
}

.jet-slider .flickity-prev-next-button svg, 
.jet-slider .slider-nav-circle .flickity-prev-next-button:hover .arrow, 
.jet-slider .slider-nav-circle .flickity-prev-next-button:hover svg {
    background-color: var(--jet-primary);
    border-color: var(--jet-primary)!important;
    padding: 16px;
    fill: #000!important;
    border-radius: 99px
}

.jet-slider .flickity-page-dots {
    bottom: 5%;
    background-color: #fff;
    padding : 10px 20px;
    border-radius: 99px;
    width: max-content;
    margin: 0 auto;
    box-shadow: 0 0 10px #dcdcdc;
}

.jet-slider .flickity-page-dots .dot {
    width: 8px;
    height: 8px;
	border-color: var(--jet-primary);
	background-color: var(--jet-primary);
	opacity: .8
}

.jet-slider .flickity-page-dots .dot.is-selected {
    width: 30px;
    border-radius: 99px;
	border-color: var(--jet-primary);
	background-color: var(--jet-primary)
}