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

/*************** ADD CUSTOM CSS HERE.   ***************/
.z9{z-index: 999;}
.z1{z-index: 1;}
.rad{border-radius: 7px; overflow: hidden}
.rad10{border-radius: 10px !important;}
.rad15{border-radius: 15px !important;}
.rad20{border-radius: 20px !important;}
.rad25{border-radius: 25px !important;}
.rad30{border-radius: 30px !important;}
.wpcf7-spinner{display: none}
form{margin-bottom: 0}
.form_footer input{border-radius: 5px}
.form_footer textarea{min-height: 80px !important; border-radius: 5px}
.form_footer .wpcf7-submit{background:linear-gradient(172deg, #00FA5A -45.79%, #16A64A 75.69%); margin: 0; min-width: 120px; border-radius: 100px}
#logo img{max-height: 80px; margin-top: -1em}
.block-hotline{background-color: var(--fs-color-success); padding-left: 30px; border-radius: 50px 0 0; padding: 8px 30px 0}
.header-main .header-nav-main > li > a{padding: 0 5px; color: #111; text-transform: uppercase}
.header-main .nav > li{display: flex; align-items: center; justify-content: center;}
.header-main .nav-left > li:before{content:""; width: 0; transition: width 300ms; background-color: var(--fs-color-primary); position: absolute; z-index: -1; opacity: 0}
.header-main .nav-left > li:hover:before{height: 60px;  width: 110%;transform: skew(-15deg);  border-radius: 10px; opacity: 1 }
.header-main .nav > li.active >a{color: var(--fs-color-primary)}
.header-main .nav > li:hover > a{color: #fff}
.header-top .flex-right{width: 100%; min-width: 500px}
.header-top .header-search-form .searchform .ux-search-submit{background-color: var(--fs-color-success); border-radius: 100px !important; padding: 0 14px}
.header-top .header-search-form .searchform input{box-shadow: none; border: none; background: transparent; min-width: 230px}
.header-top .header-search-form .searchform{background-color: #F2F2F2; border-radius: 100px; min-height: 30px}
.top-bar-nav > li > a{font-size: 1em}
.footer-secondary{padding: 0}
.primary, input[type=submit], input[type=submit].button{background: linear-gradient(80deg, #16489A 18.3%, #0053DB 104.87%);}
.home_partner .post-item > .col-inner{background-color: #f5f5f5; padding: 15px; border-radius: 15px; border: 1px solid transparent}
.home_partner .post-item:hover > .col-inner{border-color: var(--fs-color-primary)}
.hg_animate {animation: esco infinite 4.2s ease-in-out;}
.esco_box .col {position: absolute !important;width:160px !important;height: 160px !important;background-color: #fff;box-shadow: 0 1px 11.8px rgba(0, 0, 0, 0.11);border-radius: 500px;padding: 7px; }
.esco_box .col .col-inner{padding: 10px; width: 100%; height: 100%;border: 1px solid transparent;border-radius: 100px;background:linear-gradient(white, white) padding-box, linear-gradient(-45deg, #16489A, #C1CEE4, #FFFFFF, #71A6FF, #21519F) border-box; display: flex; align-items: center; line-height: 1.2; justify-content: center}
.esco_box .esco_top{top: -10%; left: 30%}
.esco_box .esco_left{top: 30%; left: -10%}
.esco_box .esco_right{bottom: 10%; right: 5%;}
.esco_box .esco_bottom{bottom: -5%; left: 20%}
.esco_box .esco_right_top{top: 0; right: 0}
.esco_box .col p{font-size: .9em;}.esco_box .col h4{font-size: .95em; margin-bottom: 0}.esco_box .col .icon-box-img{margin-bottom: 0}
.bg_grad{border-radius:35px; background: linear-gradient(114deg, rgba(58, 132, 255, 0.00) 17.27%, rgba(15, 47, 99, 0.72) 66%);}
.slider-nav-dots-simple .flickity-page-dots .dot {background-color: var(--fs-color-primary); border-color: var(--fs-color-primary);}
.count_icon h3{margin-bottom: 0}
.count_icon .icon-box{width: 20%; border-radius: 15px; background-color: #fff; box-shadow: 0 0 5px 2px #ccc; padding: 15px}
.count_icon .icon-box .icon-box-img{margin-bottom: 0}
.count_icon p{text-align: center}
.ht-zalo-icon, .icon-zalo.ht-zalo-icon, .social-icons a.zalo .icon-zalo{    margin: 0 !important;}
 h3.section-title {margin-bottom: 0; border-bottom: none; background-color: #f7f7f7}
 h3.section-title span{background-color: var(--fs-color-primary); color: #fff; padding: 15px 50px 10px 20px; line-height: 1; margin-bottom: 0;}
.sp_title h3 span{border-radius: 0 100px 0 0;}
.sb_title_center h3 span{border-radius: 10px 100px;}
.sb_title_center h3{justify-content: center;}
.sb_title_center h3 b, .ft-chatbox-skin5 a span, .ft-chaton > .ft-chaton-scroll > a > span{display: none}
.ft-chatbox{right: 0 !important;}
.ft-chatbox-skin5 > a.ft-cco,  .ft-chaton > .ft-chaton-scroll > a.ft-cco{background-color: var(--fs-color-primary);margin-bottom: 10px;border-radius: 100px;width: 40px;height: 40px;padding: 0;display: flex;align-content: center;justify-content: center;align-items: center;transition: 300ms}
.ft-chatbox-skin5 > a.ft-cco:nth-child(2), .ft-chaton > .ft-chaton-scroll > a.ft-cco:nth-child(2){background-color: #3a589d!important}
.ft-chatbox-skin5 > a.ft-cco:nth-child(3), .ft-chaton > .ft-chaton-scroll > a.ft-cco:nth-child(3){background-color: #c33223!important}
.ft-chatbox-skin5 > a.ft-cco:nth-child(4), .ft-chaton > .ft-chaton-scroll > a.ft-cco:nth-child(4){background-color: #010101!important}
.ft-chatbox-skin5 > a.ft-cco:nth-child(5), .ft-chaton > .ft-chaton-scroll > a.ft-cco:nth-child(5){background-color: #0068FF!important}
.ft-chatbox-skin5 > a:hover, , .ft-chaton > .ft-chaton-scroll > a:hover{transform: scale(1.3)}
.ft-chatbox-skin5 > a.ft-cco > i, .ft-chaton > .ft-chaton-scroll > a.ft-cco > i{line-height: 1}
.ft-chatbox-skin5 > a.ft-cco > i > svg{padding: 0 !important; width: 20px !important;}
.ft-chaton > .ft-chaton-scroll > a.ft-cco > i > svg{background: transparent !important; margin: 0; width: 45px !important}
.ft-chaton{min-width: unset; padding-bottom: 0}
.ft-chaton-scroll{display: flex;flex-direction: column;align-items: center;align-content: center; padding: 0}
.ft-chatbox-skin5{width: auto !important;right: 0 !important;padding: 8px 8px 0px; background: var(--fs-color-primary)}
.ft-chaton > .ft-chaton-scroll > a.ft-cco:hover{animation: pulse infinite 300ms ; }
.sgpb-popup-dialog-main-div-wrapper > .sgpb-popup-dialog-main-div-theme-wrapper-2 .wpcf7 {transform: translateY(-5px)}
.wpcf7 .form_popup input{margin-bottom: 0; border: 1px solid var(--fs-color-primary); box-shadow: none; font-size: .85em; border-radius: 8px; text-align: center; height: 30px !important;}
.wpcf7 .form_popup input[type=submit].submit_btn{background: #3b9edd !important;border: 1px solid #fff;line-height: 1;margin-top: .3em;min-height: unset;}
.home_blog .box-vertical.row-reverse > .box-image{width: 100%}
.home_blog .box-vertical.row-reverse{align-items: center; background-color: #fff; border-radius: 8px}
@media only screen and (max-width: 64em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
	#logo img{margin-top: 0}
    .esco_box {display: flex;max-width: 100%;justify-content: center; transform: translateY(-20%); align-items: center;margin: auto;}
    .esco_box .col{position: relative !important;top: unset !important;bottom: unset !important;left: unset !important;right: unset !important;max-width: 120px;max-height: 120px;margin: 5px;}
	.count_icon{overflow-x:scroll;flex-direction: row;}
	.count_icon > .icon-box{min-width: 36%;display: flex;flex-direction: column;align-items: center;margin-top: 0 !important;margin-right: 1em !important;}
    .count_icon > .icon-box > .icon-box-img{height: 40px;max-width: 40px;}
    .count_icon > .icon-box > .icon-box-text{text-align: center;padding-left: 0;}
    .home_sp.stack {flex-wrap: wrap;justify-content: center;}
    .home_sp > .row{width: 50%;--stack-gap: 0 !important;}
	.home_partner .post-item > .col-inner > .box-blog-post > .box-text > .blog-post-inner > * {text-align: center !important}
	.home_partner .post-item > .col-inner > .box-blog-post > .box-image{width: 40% !important;}
	.home_blog .box-vertical.row-reverse > .box-text p.from_the_blog_excerpt{display: none}
	.home_blog .box-vertical.row-reverse > .box-text{padding: 10px 10px 10px 10px !important}
	.wpcf7 .form_popup input{height: 25px !important}
}
@keyframes esco {
    50% {
        transform: scale(1.05)
    }
}
@keyframes pulse {
    50% {
      transform: rotate(55deg);
    }
  }