/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme Custom by Chung Nguyễn
Author: UX Themes
Template: flatsome
Version: 1.0.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
:root {
    --2nd-color: #856e00;
    --3nd-color: #e7bd88;
    --background-color-1: linear-gradient(145deg, #1e2024, #23272b);
    --background-color-2:linear-gradient(to right,#07a2f2,#0045a2);
    --linear-gradient-1:linear-gradient(270deg,#0045A2 0%,#07A2F2 100%);
    --background-linear-gold: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
    --shadow-1: 0 7px 13px rgb(139 153 185 / 20%);
    --shadow-2: 0 5px 20px 0 rgb(23 44 82 / 10%);
    --radius-15 :15px;
    --radius-25 :25px;
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0px 1px 6px #66cdee;
}
#header .info-hotline {margin-left: 15px;padding: 6px;cursor: pointer;}
#header .info-hotline .img {background: url(./assets/icon/icon-hotline.png) no-repeat;background-size: 45px;width: 45px;height: 45px;margin-right: 10px;margin-bottom: 0;top: 3px;position: relative;display: inline}
#header .info-hotline .float-left {float: left !important}
#header .info-hotline .info a {color: #ffffff}
#header .info-hotline .info .sub {color: #fff;padding-bottom: 5px;font-size: 14px;line-height: 16px}
#header .info-hotline .info .title {color: var(--3nd-color);font-weight: bold;font-size: 22px;line-height: 22px}

.nav-dropdown>li>a{color: #000}

.section-title-container{margin-bottom: 0!important;}
.section-title-bold span {
    border: none;
    padding: 0;padding-right: 10px;
}
.dark .section-title-bold span{color: var(--3nd-color)}
.section-title b{position: inherit;opacity: 1;}
.section-title b:before{
    border-radius: 9999px;
    width: 10px;
    height: 10px;
    background-color: var(--2nd-color);
    content: '';
    transform: translate(0,50%) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
    --tw-translate-y: 50%;
    position: absolute;
    bottom: 50%;
    border: 0 solid var(--3nd-color);
}
.section-title b:first-child:before{right: 0}
.section-title b:last-child:before{left: 0}

.trendy-box-img.box-vertical {
    background: #ffff;
    margin-bottom: 15px;
    border-radius: 99px;
}
.trendy-box-img.box-vertical .box-image {
    border-radius: 99px;
}
.trendy-box-img.box-vertical .box-text{
    padding: 1em;
}
.flickity-prev-next-button {
    width: 100px;
    opacity: 0.3!important;
}

.flickity-page-dots .dot{width: 15px;height: 1px;border-radius: 5px;margin: 0 3px;}

.slider-nav-light .flickity-page-dots .dot.is-selected {background-color: #fff000!important;width: 35px}
.home-blog .post-title{color: #000}
.trendy-button {-webkit-transition: .3s all;-o-transition: .3s all;transition: .3s all;display: inline-block;position: relative;cursor: pointer;margin: 8px 13px;color: #000!important;border: 1px solid #d99c26!important;background: #fff!important}
.trendy-button::before {content: '';position: absolute;width: 100%;height: 100%;top: 5px;left: 5px;background: #d99c26;-webkit-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;z-index: -1}
.trendy-button span {padding: 7px 25px 7px 31px;font-size: 16px;font-weight: 400;letter-spacing: 4px}
.trendy-button.small span{padding: 5px 10px 5px 18px;font-size: 14px;letter-spacing: 2px}
.trendy-button:hover::before{-webkit-transform:translate(-5px,-5px);-ms-transform:translate(-5px,-5px);transform:translate(-5px,-5px)}

.trendy-button2 {
    position: relative;
    overflow: hidden;
    border: 2px solid var(--3nd-color);
    border-radius: 30px;
    color: #ffffff;
    padding: 12px 15px;
    line-height: 1.2;
    font-size: 14px;
    font-weight: 600;
    z-index: 2;background: transparent;
}
.trendy-button2:before {
    position: absolute;
    content: "";
    left: inherit;
    right: 0;
    top: 0;
    z-index: -1;
    height: 100%;
    width: 0;
    border-radius: 30px;
    background: var(--3nd-color);
    -webkit-transition: all 240ms ease-in-out;
    transition: all 240ms ease-in-out;
}
.trendy-button2:hover:before {
    width: 100%;
    right: inherit;
    left: 0;
}
.trendy-button2 i {
    margin-right: 8px;
}
input[type='email'], input[type='number'], input[type='url'], input[type='tel'], input[type='text'], textarea {font-weight: 400;border-radius: 5px;padding: 20px}

.portfolio-element-wrapper .col {
    padding: 0 10px 35px;
}
.portfolio-element-wrapper .col-inner {
    border-radius: 15px;
}
.portfolio-element-wrapper .box-image {
    border-radius: 15px!important;
}
.portfolio-box.box .box-text.show-on-hover {
    background: linear-gradient(0deg, #1a120d 0%, rgb(0 0 0 / 62%) 72%, rgb(0 0 0 / 0%) 100%);border-radius: 15px;
}
.portfolio-box.box .box-text h3.portfolio-box-title {
    font-size: 16px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;margin-top: 0;
    margin-bottom: 10px;
}
ul.box-field {
    list-style: none;
    margin-bottom: 0;
    margin-top: 5px;font-size: 13px;
}
ul.box-field li {
    display: flex;
    margin: 0;
    justify-content: space-between;
    border-bottom: 1px dotted #DEDEDE2D;padding-bottom: 3px;
}
ul.box-field li .field {
    float: left;
    color: var(--3nd-color);
    line-height: 24px;margin-bottom: 0;
}

ul.box-field li .field i {color: var(--3nd-color);margin-right: 10px}
ul.box-field li .giatri {
    float: right;
    margin-bottom: 0px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
ul.box-field li p.giatri.price {
    color: var(--3nd-color);
    font-size: 15px;
    font-weight: 600;
}
.absolute-footer {padding: 5px;background: #f4ae00}
.blog-archive{margin-top: 60px}
.blog-archive .post-item .col-inner .box-text {background: var(--3nd-color);text-align: left}
.blog-archive .post-item .col-inner .box-text h5.post-title {color: #000;font-size: 21px}
/* Box-support*/

.close {color: #b20000;text-align: center;border-radius: 50%;position: absolute;right: 5px;top: 5px;font-size: 20px;}
.support-top {align-items: center;box-shadow: 0 3px 6px 0 #2e36521a;background: #fff;border-bottom: 2px solid #f0f2f7;padding: 15px;border-top-left-radius: 5px;border-top-right-radius: 5px}
.support-top h5, .support-top h6 {color: #000}
.support {background: white;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;box-shadow: 0 3px 6px 0 #2e36521a;padding: 15px 0}
.support .icon-box {background: var(--2nd-color);padding: 10px 15px;margin-bottom: 15px;font-size: 0.9em}
.trendy-box-icon {
    position: relative;
}
.trendy-box-icon .icon-box-img {
    margin: 0 auto;
    top: -40px;background: #fff;
    border-radius: 99px;padding:10px;position: absolute;
    left: 40%;
}
.trendy-box-icon .icon-box-img img{
    filter: brightness(0) invert(0.3);
}
.trendy-box-icon .icon-box-text {
    background: #fff;
    padding: 50px 10px 15px 10px;
    border-radius: 15px;
    margin-top: 0;
}
h2.section-title.section-title-bold {
    margin-bottom: 0;
}
.icon-box .icon-box-text {padding-left: 10px!important}
.support h3 {margin-bottom: 0}
.support_button {padding-right: 15px;padding-left: 15px}
.support_button a.button {margin-bottom: 13px;letter-spacing: 0;height: 45px;line-height: 45px}
.support_button a.button.is-outline {border-width: 1px;border-radius: 5px;font-weight: 600}

.trendy-tab>ul {gap:5px;width: max-content!important;margin: 0 auto;margin-bottom: 40px}
.trendy-tab>ul>li {-webkit-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;border: 1px var(--3nd-color) solid;font-size: 16px;border-radius: 25px;padding: 0 15px;margin-bottom: 1px;margin-top: 1px;margin-left: 5px;}
.trendy-tab>ul>li:first-child {margin-left: 1px !important}
.trendy-tab>ul>li:last-child {margin-right: 1px !important}
.trendy-tab>ul>li.active,.trendy-tab>ul li:hover {background-color: var(--3nd-color);box-shadow: var(--shadow-2);}
.trendy-tab>ul>li.active>a, .trendy-tab>ul>li:hover>a{color:#fff}
.trendy-tab>ul>li>a{color: var(--2nd-color)}
.trendy-tab>.tab-panels>.entry-content {-webkit-transition: all 2s;-o-transition: all 2s;transition: all 2s}
#footer a#top-link {border: 3px solid #543b0c;min-width: 50px!important;line-height: 2.7em!important;right: 12px;border-radius: 15px!important;bottom: 15px;box-shadow: rgb(0 0 0 / 19%) 0px 10px 20px, rgb(0 0 0 / 23%) 0px 6px 6px}
#footer a#top-link i.icon-angle-up {font-size: 30px;color: #543b0c;top: -3.5px!important}
.dang-ky-email form p {display: flex}
.dang-ky-email form p input.wpcf7-validates-as-email {
    width: 225px;
    border-radius: 25px 0 0 25px;
    height: 26px;
}
.dang-ky-email form p input.wpcf7-submit {background: var(--2nd-color);width: 100px;border-radius: 0 25px 25px 0}
.form-register{width:100%;max-width:100%;padding:0}

.counter-field span.counter {
    font-size: 35px;    color: var(--2nd-color);
}
.counter-field span.plus {
    font-size: 28px;
    position: absolute;margin-left: 5px;
}
.counter-field .is-divider {
    background: var(--3nd-color);
    height: 2px;
    max-width: 100px;
    margin-top: -5px;
    margin-bottom: 10px;
}
.trendy-form {padding-bottom: 0!important}
.trendy-form p,.box-phone-home .icon-box-text p{margin-bottom: 0!important;}
.trendy-form .trendy-input {height: 45px}
.home-contact {padding: 20px 15px}
.page-vertical-nav p,.page-vertical-nav li,.page-vertical-nav td {
    color: #333;
}
.page-vertical-nav .nav>li>a{color: var(--3nd-color);background: #303030;padding: 10px}
.page-vertical-nav .nav>li.active>a{background: none}
.page-vertical-nav .nav>li.active>a,.page-vertical-nav h1,.page-vertical-nav h2,.page-vertical-nav h3,.page-vertical-nav h4{
    color: var(--2nd-color)
}
.trendy-sub{margin-top: 10px}
.trendy-sub p {
    display: flex;
    flex-wrap: wrap;
}
.trendy-sub span.wpcf7-form-control-wrap {
    width: 60%;
}
.trendy-sub span.wpcf7-form-control-wrap input {
    border-radius: 25px 0 0 25px;height: 50px;
}
.trendy-sub input.wpcf7-submit {
    margin-right: 0;
    border-radius: 0 25px 25px 0;height: 50px;margin-bottom: 0;
}
.trendy-sub .wpcf7-spinner {
    visibility: hidden;
    display: inline-block;
    background-color: #23282d;
    opacity: 0.75;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 100%;
    padding: 0;
    margin: 0 24px;
    position: absolute;
    top: 100%;
}
.page-title-inner {

    padding-top: 80px;padding-bottom: 85px!important;

}
.page-title-inner h1.entry-title {
    font-size: 30px;
}
@media (max-width:768px){
	.social-icon--facebook,.social-icon--zalo{display:none}
	.social-icon-mobile{display:flex;background-color:var(--2nd-color);height:50px;position:fixed;bottom:0;width:100%;z-index:1000}
    .trendy-box-home {
        height: 300px;
        overflow: scroll;
        flex-direction: column;
        padding-top: 100px;
        margin-top: -90px;
    }
    .trendy-box-home>.col {
        flex-basis: 350px;
        max-width: 350px;
        padding-bottom: 0;
    }
    .trendy-box-img.box-vertical {
        display: table;
        width: 100%;border-radius: 25px;
    }
    .trendy-box-img.box-vertical  .box-image {
        width: 145px!important;        display: table-cell;
        vertical-align: middle;    border-radius: 25px 0 0 25px;
    }
}

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


}