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

/*************** ADD CUSTOM CSS HERE.   ***************/
.col, .columns, .gallery-item{padding-bottom: 20px}
strong, b{font-family: "Baloo 2", sans-serif; font-weight: bold}
img.alignnone{margin: 0}
img.size-full.alignnone{margin-bottom: 15px}
.wpcf7-spinner{position: absolute}
.wpcf7-submit{margin-right: 0}
main, .hwp-gadient{background: #E8EFF9;background: linear-gradient(180deg, #E8EFF9 0%, rgba(0, 0, 0, 0) 80%);}
.poly-dd-menu{overflow: hidden}
.widget .is-divider{display: none}
.flickity-page-dots{position: static; margin-top: 15px}
.nav>li>a{letter-spacing: 0}
.header-block{width: auto}
a.button{height: 42px !important; line-height: 42px !important; font-size: 15px !important; font-family: "Baloo 2", sans-serif; font-weight: 500; padding: 0 30px}
.social-icons a.button{height: 35px !important;line-height: 38px !important}
a.button.open-video{line-height: 40px !important}
.header-block a.button{padding-left: 30px; padding-right: 30px; margin-right: 0}
blockquote{font-size: 15px; font-style: normal;}

#main-menu.mobile-sidebar .nav>li>a{font-size: .95rem; color: #202d4c}



/*Page*/
.video-button-wrapper{display: inline-block;}
.home-slide .flickity-page-dots{position: absolute;}
.video-button-wrapper a{color: #fff}
.video-button-wrapper span{font-size: 15px; text-transform: uppercase; color: #fff;  position: absolute; top: 10px; width: 120px}

/*.hwp-tc-list h3{min-height: 50px}*/
.tc-number{position: absolute; font-size: 44px; font-family: "Baloo 2", sans-serif; font-weight: bold; color: #fff; opacity: 0.15; top: 7px; right: 20px; z-index: 1}
.qt-dv-td .tc-number{left: 20px; color: #1A58A8}
.hwp-bg-form-kh .hwp-form-lh p{margin-bottom: 15px}
.hwp-bg-form-kh .hwp-form-lh .wpcf7-submit{background: #fff; color: #1A58A8; font-weight: 500; font-size: 0.95rem}
.hwp-luachon{margin-top: -155px; margin-right: -100px !important; margin-bottom: -95px}
.bg-form-lich > .col-inner{background: url(./images/frame-cloud.png) no-repeat bottom left; box-shadow: 0  0 24px #242f2e1f}

.accordion:before{content: ''; height: 100%; border-left: 1px dashed #dedede; position: absolute;top: 10px; left: 40px;}
.accordion-title{padding-left:75px; color: #202D4C; font-family: "Baloo 2", sans-serif; font-weight: bold; border-top-width: 0}
.accordion-title.active{color: #1A58A8; background-color: transparent;}
.accordion-title button{position: absolute; top: 18px; left: 0;min-height: 0;line-height: 1rem;margin: 0; padding:0; width: 46px; font-size: 34px; text-align: left}
.accordion-title button:before{content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: #202D4C; position: absolute; right: 0; top: 50%;transform: translateY(-50%);}
.accordion-title.active button:before{background-color: #1A58A8}
.accordion-title .hwp-accord-title{font-size: 21px; line-height: 1.3em}
.accordion-inner{padding:0 0 0 77px }

.hwp-tabs .tab-panels .panel > .row > .col > .col-inner{box-shadow: 0 0 24px rgba(0,0,0,.1); background: url('./images/bg-tc.png') no-repeat bottom left;}
.hwp-tabs .nav{background-color: #fff; box-shadow: 0 0 24px rgba(0,0,0, .15);padding:6px 8px; border-radius: 16px; display: inline-block; margin: 0 auto; width: auto}
.hwp-tabs .nav.nav-outline>li.active>a{border-width: 0; background-color: #1A58A8; color: #fff !important; border-radius: 8px}
.hwp-tabs .nav.nav-outline>li:hover>a{color: #fb1b2a}
.hwp-tabs .tab-panels{padding-top: 30px}

.hwp-post-vertical .box-vertical .box-text {padding: 0 0 0 15px}
.post-item .post-title a{display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;}
.hwp-post-vertical .box-vertical .box-image img{border-radius: 12px}

.qt-dv-border > .col > .col-inner{border: 1px solid #ffffff2e}
.hwp-bg-txt{background: url('./images/bg-text.png') no-repeat; background-position: top left 40px}
.hwp-founder-bg .col-inner{background: url('./images/bg-text.png') no-repeat; background-position: 10px 25px}

/*Contact*/
.hwp-bg-page .section-bg img{height: auto}
.hwp-form-lh .wpcf7-form-control{height: 42px; border-radius: 8px; border-color: #E1E1E1; margin-top: 5px; margin-bottom: 0}
.hwp-form-lh .wpcf7-form-control::placeholder{color: #C4C4C4; font-weight: 500}

/*POST*/
.box-push .box-text{background-color: #fff}
.hwp-nav-cat{margin: 0; padding: 0}
.hwp-nav-cat li{list-style: none; display: inline-block; margin: 5px}
.hwp-nav-cat li a{ background: #fff; border-radius: 8px;line-height: 2.5em; padding: 10px .75em; border: 1px solid #e1e1e1}
.hwp-nav-cat li.current-menu-item a{background-color: #1A58A8; color: #fff; border-color: #1A58A8}

.post-item .image-cover{border-radius: 16px; overflow: hidden}

.hwp-top-box-slide{font-size: 13px}
.hwp-top-box-slide .box-text{padding-bottom: 0}
.hwp-top-box-slide ul{margin: 0; padding: 0}
.hwp-top-box-slide ul li{display: inline-block; padding: 0 12px; position: relative; margin-left: 0}
.hwp-top-box-slide ul li:first-child{padding-left: 0}
.hwp-top-box-slide ul li:before{content: ''; height: 12px; width: 1px; background: #ccc; position: absolute; top: 50%;left: 0; transform: translateY(-50%);}
.hwp-top-box-slide ul li:first-child:before{width: 0}
.hwp-top-box-slide ul li a{color:var(--fs-color-primary); margin-left: 5px}
.hwp-top-box{font-size: 0.9rem; display: flex;flex-flow: row wrap;width: 100%;}
.hwp-top-box .hwp-top-left{flex-basis: 58.3333%;max-width: 58.3333%;}
.hwp-top-box .hwp-top-right{flex-basis: 41.6666%;max-width: 41.6666%;} 
.hwp-top-box a{padding: 6px 10px; background-color: #F0F2F5; border-radius: 6px; color: #0156B0; margin-top: -2px !important}
.hwp-top-box a:hover{color:  var(--fs-color-primary);}

.ux-relay__load-more-button{margin-top: 15px ;border-radius: 8px; text-transform: uppercase !important; font-weight: 400; font-size: 0.9em}


.hwp-featured-post .post-item .box .post-title {font-size: 2.1rem; }
.hwp-featured-post .post-title a{line-height: 1.3em}
.post-item .box-push .from_the_blog_excerpt, .hwp-featured-post .from_the_blog_excerpt{display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;}
.hwp-featured-post .post-item .col-inner{padding: 24px; border-radius: 16px; background-color: #fff}
.hwp-featured-post .post-item .image-cover{border-radius: 8px}
.hwp-featured-post .flickity-prev-next-button .arrow, .hwp-featured-post .flickity-prev-next-button svg{fill: #fff; color: #fff}
.hwp-featured-post.slider-nav-circle .flickity-prev-next-button:hover .arrow, .hwp-featured-post.slider-nav-circle .flickity-prev-next-button:hover svg{fill: #202D4C !important; background-color: #fff; border-color: #fff}
.hwp-featured-post .flickity-prev-next-button{bottom: 50%}
.hwp-featured-post.row-slider .flickity-page-dots .dot{background-color: #fff; opacity: 0.35}


.hwp-post-tags{margin-top: 15px}
.hwp-post-tags a{display: inline-block; padding: 6px 10px; background-color: #F0F2F5; border-radius: 6px; margin-right: 10px; font-size: 13px}
.hwp-post-tags a img{margin-right: 3px}
.post-item .box-push .box-text{max-width: 100%; border-radius: 16px; margin-top: -20px; box-shadow: 0 0 24px rgba(0, 0, 0, 0.08);}
.post-item .box-push .post-title{font-size: 21px}
.post-item .box-vertical .post-title{font-size: 18px}
.hwp-post-vertical-date {font-size: 0.9em}
.hwp-post-vertical-date img{position: relative; top: -2px; margin-right: 2px}

.hwp-tabs-post .tab-panels{margin-top: 20px}
.hwp-tabs-post .tab{margin: 0 5px}
.hwp-tabs-post .tab a{background: #fff; border-radius: 8px}
.hwp-tabs-post .tab.active a{background-color: #1A58A8 !important}


.hwp-breadcrumb, .hwp-breadcrumb a {color: #fff}
.hwp-breadcrumb{margin: 10px 0 30px}
.archive-page-header{padding-top: 30px}
.single-post #main{background: url('./images/bg-single.jpg') no-repeat top center; background-size: 100% 300px}
.single-post article{background: #fff; padding: 30px; border-radius: 16px; box-shadow: 0 0 24px #0A03550F}
.single-post article h1.entry-title, .archive-page-header .page-title{font-size: 40px; line-height: 1.1}
.single-post article .entry-content{padding-bottom: 0}
.single-post article .hwp-top-box-slide{font-size: 15px}

.hwp-tags-list{border-top: 1px solid #191b1f17; padding-top: 20px}
.hwp-relate-title{font-family: "Baloo 2", sans-serif;font-size: 44px; font-weight: 700; color: #202d4c; margin-bottom: 20px}

.widget-area aside{padding: 20px; border-radius: 16px; background-color: #fff; box-shadow: 0 0 24px #0A03550F}
span.widget-title{font-family: "Baloo 2", sans-serif;font-size: 20px; color: #202d4c;}
.widget .widget-title{display: block; margin-bottom: 20px}
#multiple_selection_widget-2.widget .widget-title{border-bottom: 1px solid #E1E1E1; padding-bottom: 15px; position:relative}
#multiple_selection_widget-2.widget .widget-title:before{content: ''; width: 50px; height: 1px; left: 0; bottom: -1px;position: absolute; background-color: #FB1B2A; z-index: 1}
.hwp-recent-box{margin-top: 20px !important}
.hwp-recent-box li{padding: 10px 0}
.hwp-recent-box li:first-child{padding-top: 0}
.hwp-recent-post{width: 100%; display: table}
.hwp-recent-post>div{display: table-cell; vertical-align: middle;}
.hwp-recent-post .box-image{width: 95px;}
.hwp-recent-post .box-image .overlay-icon{width: 30px; height: 30px; line-height: 30px}
.hwp-recent-post:hover .box-image .overlay-icon{transform: scale(1.1);}
.hwp-recent-post .box-image .image-cover{border-radius: 10px}
.box-text-link{padding-left: 15px; line-height: 1.1}
.box-text-link a{font-size: 15px; font-family: "Baloo 2", sans-serif; font-weight: bold;     
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;}
.hwp-wi-date{font-size: 13px; margin-top: 10px}
.hwp-wi-date img{width: 13px; position: relative; top: -1px}

/*Footer*/
.hwp-ft, .footer-wrapper .absolute-footer, .hwp-bg-form-kh .col-inner{background: #0153AC; background: linear-gradient(90deg,rgba(1, 83, 172, 1) 0%, rgba(32, 45, 76, 1) 75%);}
.hwp-menu ul{margin: 0; padding: 0}
.hwp-menu ul li{list-style: none; margin-left: 0}
.hwp-ft-social a{background-color: #fff; width: 35px; height: 35px; line-height: 37px; color:  var(--fs-color-primary); border-radius: 8px; display: inline-block; text-align: center; margin-bottom: 0}
.hwp-ft-social a:hover, .hwp-menu ul li a:hover{color:  var(--fs-color-primary);}
.hwp-ft-social a:first-child{margin-left: 0}

.hwp-dot{opacity: 15%;border: 2px solid transparent; /* Transparent solid border to hold the image */
    border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="2" viewBox="0 0 10 2"><rect x="0" y="0" width="6" height="1" fill="white"/><rect x="6" y="0" width="5" height="2" fill="transparent"/></svg>') 1 round;}
.hwp-dot2{opacity: 15%;border: 2px solid #000; /* Transparent solid border to hold the image */
    border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="2" viewBox="0 0 10 2"><rect x="0" y="0" width="6" height="1" fill="black"/><rect x="6" y="0" width="5" height="2" fill="transparent"/></svg>') 1 round;}

@media only screen and (min-width: 850px){
    .hwp-row5 .col{flex-basis: 20%;max-width: 20%;}
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
    .hwp-nav-cat{display: flex; flex-wrap: nowrap; overflow-x: auto;}
    .hwp-nav-cat li{flex: 0 0 auto; white-space: nowrap;    }
    .hwp-nav-cat::-webkit-scrollbar {height: 0;}

    .hwp-featured-post .post-item .col-inner{padding: 15px}
    .hwp-featured-post .post-item .box-text{padding: 20px 0 0 0}
    .hwp-featured-post .post-item .box .post-title{font-size: 1.7em}
    .hwp-top-box-slide ul li:last-child{padding-left: 0; width: 100%}
    .hwp-top-box-slide ul li:last-child:before{display: none}
    .hwp-tabs-post .tab{margin: 5px}

    .hwp-tabs .nav,  .hwp-tabs .nav>li>a{display: block; text-align: center}
    .hwp-tabs .nav>li{width: 100%}

    .archive-page-header{padding-top: 30px}
    .hwp-relate-title{font-size: 30px}
    .single-post article h1.entry-title, .archive-page-header .page-title{font-size: 35px}
    .single-post article{padding-left: 15px; padding-right: 15px}
}

@media only screen and (max-width: 549px){
    h2 br{display: contents;}
    .hwp-ft-icon-list {display: table;}
    .hwp-ft-icon-list .icon-box-text{margin-top: 15px}
    .hwp-icon-text .icon-box-img{width: 40px !important}
    .mobile-nav .nav-icon {margin-left: 20px}

    .mb-box-icon.text-right{text-align: left;}
    .mb-box-icon.icon-box-right .icon-box-text{order: 1}
    .mb-box-icon.icon-box-right .icon-box-img+.icon-box-text{padding-left: 1em; padding-right: 0}

    .accordion-title .hwp-accord-title{font-size: 18px}

    .hwp-post-vertical .box-vertical{display: table;width: 100%;}
    .hwp-post-vertical .box-vertical .box-image{width: 30% !important; }
    .hwp-post-vertical .box-vertical .box-image, .hwp-post-vertical .box-vertical .box-text {
        direction: ltr;
        display: table-cell;
        vertical-align: middle;
    }
    .hwp-featured-post .flickity-page-dots{
        margin-top: 0;
        position: absolute;
    }
      
    .video-button-wrapper span{display: none}
}

#ftwp-container.ftwp-fixed-to-post{z-index: 99999}
.ftwp-in-post#ftwp-container-outer.ftwp-float-none #ftwp-contents{padding-bottom: 10px}
.spinner {
  border: 4px solid #f3f3f3; 
  border-top: 4px solid #3498db; 
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}