/*
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.   ***************/
@font-face {
	font-family: 'SF Pro Display';
	font-style: normal;
	font-weight: 100;
	font-display: auto;
	src: url('fonts/SFProDisplay-Ultralight.woff2') format('woff2'),
		url('fonts/SFProDisplay-Ultralight.woff') format('woff'),
		url('fonts/SF-Pro-Display-Ultralight.ttf') format('truetype');
}
@font-face {
	font-family: 'SF Pro Display';
	font-style: normal;
	font-weight: 200;
	font-display: auto;
	src: url('fonts/SFProDisplay-Thin.woff') format('woff'),
		url('fonts/SF-Pro-Display-Thin.ttf') format('truetype');
}
@font-face {
	font-family: 'SF Pro Display';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('fonts/SFProDisplay-Light-3.woff2') format('woff2'),
		url('fonts/SFProDisplay-Light.woff') format('woff'),
		url('fonts/SF-Pro-Display-Light.ttf') format('truetype');
}
@font-face {
	font-family: 'SF Pro Display';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('fonts/SFProDisplay-Regular-2.woff2') format('woff2'),
		url('fonts/SFProDisplay-Regular.woff') format('woff'),
		url('fonts/SF-Pro-Display-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'SF Pro Display';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('fonts/SFProDisplay-Medium-2.woff2') format('woff2'),
		url('fonts/SFProDisplay-Medium.woff') format('woff'),
		url('fonts/SF-Pro-Display-Medium.ttf') format('truetype');
}
@font-face {
	font-family: 'SF Pro Display';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('fonts/SFProDisplay-Semibold-2.woff2') format('woff2'),
		url('fonts/SFProDisplay-Semibold.woff') format('woff'),
		url('fonts/SF-Pro-Display-Semibold.ttf') format('truetype');
}
@font-face {
	font-family: 'SF Pro Display';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('fonts/SFProDisplay-Bold-2.woff2') format('woff2'),
		url('fonts/SFProDisplay-Bold.woff') format('woff'),
		url('fonts/SF-Pro-Display-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'SF Pro Display';
	font-style: normal;
	font-weight: 800;
	font-display: auto;
	src: url('fonts/SFProDisplay-Heavy-2.woff2') format('woff2'),
		url('fonts/SFProDisplay-Heavy.woff') format('woff'),
		url('fonts/SF-Pro-Display-Heavy.ttf') format('truetype');
}
@font-face {
	font-family: 'SF Pro Display';
	font-style: normal;
	font-weight: 900;
	font-display: auto;
	src: url('fonts/SFProDisplay-Black-2.woff2') format('woff2'),
		url('fonts/SFProDisplay-Black.woff') format('woff'),
		url('fonts/SF-Pro-Display-Black.ttf') format('truetype');
}
@font-face {
  font-family: "Flaticon";
  src: url("fonts/flaticon_solarva.eot");
  src: url("fonts/flaticon_solarva.eot?#iefix") format("embedded-opentype"),
       url("fonts/flaticon_solarva.woff2") format("woff2"),
       url("fonts/flaticon_solarva.woff") format("woff"),
       url("fonts/flaticon_solarva.ttf") format("truetype"),
       url("fonts/flaticon_solarva.svg#flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Flaticon";
    src: url("../fonts/flaticon_solarva.svg#Flaticon") format("svg");
  }
}
@font-face {
  font-family: "Caseicon";
  src: url("fonts/caseicon.eot");
  src: url("fonts/caseicon.eot?#iefix") format("embedded-opentype"),
       url("fonts/caseicon.woff2") format("woff2"),
       url("fonts/caseicon.woff") format("woff"),
       url("fonts/caseicon.ttf") format("truetype"),
       url("fonts/caseicon.svg#caseicon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Caseicon";
    src: url("fonts/caseicon.svg#Caseicon") format("svg");
  }
}
.pxl-icon-active i.flaticon {
    display: inline-flex;
}

[class^="flaticon-"], [class*=" flaticon-"] {
    display: inline-flex;
}
[class^="caseicon-"]:before, [class*=" caseicon-"]:before, [class^="caseicon-"]:after, [class*=" caseicon-"]:after {
    font-family: Caseicon;
    font-style: normal;
    font-weight: 400;
}
[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {   
  font-family: Flaticon;
  font-size: inherit;
  font-style: normal;
  font-weight: normal;
}

.caseicon-linkedin:before {
    content: "\f135";
}
.caseicon-instagram:before {
    content: "\f129";
}
.caseicon-twitter:before {
    content: "\f14b";
}
.caseicon-facebook:before {
    content: "\f124";
}
.pxl-item--socials i {
    transform: rotate(-90deg);
}
.flaticon-envelope:before {
    content: "\f101";
}
.flaticon-pin:before {
    content: "\f102";
}
.flaticon-arrow-left:before {
    content: "\f103";
}
.flaticon-arrow-right:before {
    content: "\f104";
}
.flaticon-bullet-tick:before {
    content: "\f105";
}
.flaticon-clock:before {
    content: "\f106";
}
.flaticon-customer-service:before {
    content: "\f107";
}
.flaticon-facebook:before {
    content: "\f108";
}
.flaticon-feature1:before {
    content: "\f109";
}
.flaticon-feature2:before {
    content: "\f10a";
}
.flaticon-feature3:before {
    content: "\f10b";
}
.flaticon-feature4:before {
    content: "\f10c";
}
.flaticon-mail:before {
    content: "\f10d";
}
.flaticon-instagram:before {
    content: "\f10e";
}
.flaticon-pinterest:before {
    content: "\f10f";
}
.flaticon-service1:before {
    content: "\f110";
}
.flaticon-service3:before {
    content: "\f111";
}
.flaticon-skype:before {
    content: "\f112";
}
.flaticon-star:before {
    content: "\f113";
}
.flaticon-service2:before {
    content: "\f114";
}
.flaticon-twitter:before {
    content: "\f115";
}
.flaticon-youtube:before {
    content: "\f116";
}
.flaticon-location:before {
    content: "\f117";
}
.flaticon-service5:before {
    content: "\f118";
}
.flaticon-service6:before {
    content: "\f119";
}
.flaticon-service4:before {
    content: "\f11a";
}
.flaticon-envelope-open:before {
    content: "\f11b";
}
.flaticon-person:before {
    content: "\f11c";
}
.flaticon-telephone:before {
    content: "\f11d";
}
.flaticon-arrow-up-right:before {
    content: "\f11e";
}
.flaticon-call:before {
    content: "\f11f";
}
.flaticon-mail-1:before {
    content: "\f120";
}
.flaticon-facebook-bg:before {
    content: "\f121";
}
.flaticon-paper-plane:before {
    content: "\f122";
}
.flaticon-xbox:before {
    content: "\f123";
}
.flaticon-plus:before {
    content: "\f124";
}
.flaticon-send:before {
    content: "\f125";
}
.flaticon-address:before {
    content: "\f126";
}
.flaticon-contact:before {
    content: "\f127";
}
.flaticon-right-arrow:before {
    content: "\f128";
}
.flaticon-arrow-down-sign-to-navigate:before {
    content: "\f129";
}
.flaticon-cart:before {
    content: "\f12a";
}
.flaticon-phone:before {
    content: "\f12b";
}
.flaticon-loupe:before {
    content: "\f12c";
}
.flaticon-loupe-1:before {
    content: "\f12d";
}
.flaticon-like:before {
    content: "\f12e";
}
.flaticon-bar-chart:before {
    content: "\f12f";
}
.flaticon-pin-1:before {
    content: "\f130";
}
.flaticon-mail-2:before {
    content: "\f131";
}
:root {
    --primary-color: #86bb46;
    --gradient-first-color: #ffa800;
    --secondary-color: #00628a;
    --third-color: #00c5fe;
    --dark-color: #000;
    --body-bg-color: #fff;
    --primary-color-rgb: 134, 187, 70;
    --gradient-first-color-rgb: 255, 168, 0;
    --secondary-color-rgb: 0, 98, 138;
    --third-color-rgb: 0, 197, 254;
    --dark-color-rgb: 0, 0, 0;
    --body-bg-color-rgb: 255, 255, 255;
    --link-color: #072032;
    --link-color-hover: #4AAB3D;
    --link-color-active: #4AAB3D;
    --gradient-color-from: #FFCD28;
    --gradient-color-to: #27B671;
    --gradient-color-from2: #8c92f6;
    --gradient-color-to2: #f9d78f;
}
.pxl-cursor {
  visibility: hidden;
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  -khtml-transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  -ms-transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
  pointer-events: none;
  top: 0;
  left: 0;
}
.pxl-cursor .pxl-cursor-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -khtml-transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -ms-transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.pxl-cursor .pxl-cursor--follower {
  position: absolute;
  background-color: transparent;
  border: 1px solid var(--primary-color);
  opacity: 1;
  border-radius: 100%;
  width: 30px;
  height: 30px;
  -webkit-transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
  -khtml-transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
  -ms-transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), background-color 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.pxl-cursor .pxl-cursor--follower:before {
  content: '';
  width: 6px;
  height: 6px;
  background-color: var(--secondary-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 6px;
}
.pxl-cursor .pxl-cursor--label {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 15px;
  transform: scale(0);
  will-change: transform, opacity;
  -webkit-transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -khtml-transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -ms-transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.pxl-cursor .pxl-cursor--drap {
  line-height: 87px;
  text-align: center;
  width: 87px;
  height: 87px;
  background-color: var(--secondary-color);
  font-size: 0px;
  -webkit-border-radius: 87px;
  -khtml-border-radius: 87px;
  -moz-border-radius: 87px;
  -ms-border-radius: 87px;
  -o-border-radius: 87px;
  border-radius: 87px;
  -webkit-transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -khtml-transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -ms-transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  transform: scale(0);
  will-change: transform, opacity;
  color: #fff;
}
.pxl-cursor .pxl-cursor--drap:before, .pxl-cursor .pxl-cursor--drap:after {
  content: "\f10b";
  font-family: "Caseicon";
  font-size: 10px;
  display: inline-flex;
}
.pxl-cursor .pxl-cursor--drap:before {
  -webkit-transform: scaleX(-1);
  -khtml-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}
.pxl-cursor .pxl-cursor--drap:after {
  margin-left: 10px;
}
.pxl-cursor .pxl-cursor--icon {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  transform: scale(0);
  will-change: transform, opacity;
  -webkit-transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -khtml-transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -moz-transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -ms-transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
  -o-transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: transform 500ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.pxl-cursor.is-enabled {
  visibility: visible;
}
.pxl-cursor.is-hidden .pxl-cursor-wrapper {
  transform: scale(0) !important;
}
.pxl-cursor.is-mouse-down .pxl-cursor-wrapper {
  transform: scale(0.8);
}
.pxl-cursor.is-active .pxl-cursor--follower {
  background-color: rgba(var(--primary-color-rgb),0.25);
  -webkit-transform: scale(3);
  -khtml-transform: scale(3);
  -moz-transform: scale(3);
  -ms-transform: scale(3);
  -o-transform: scale(3);
  transform: scale(3);
  border: none;
}
.pxl-cursor.is-active .pxl-cursor--follower:before {
  display: none;
}
.pxl-cursor.is-active.has-label .pxl-cursor--follower {
  background-color: var(--secondary-color);
  opacity: 1;
}
.pxl-cursor.is-active.has-drap .pxl-cursor--drap {
  transform: scale(1);
}
.pxl-cursor.is-active.has-label .pxl-cursor--label {
  transform: scale(1);
}
.pxl-cursor.is-active.has-icon .pxl-cursor--follower, .pxl-cursor.is-active.has-icon-left .pxl-cursor--follower, .pxl-cursor.is-active.has-icon-right .pxl-cursor--follower {
  background-color: black;
  opacity: 0.8;
}
.pxl-cursor.is-active.has-icon .pxl-cursor--icon {
  transform: scale(1);
}
.pxl-cursor.is-active.has-icon .pxl-cursor--icon:before {
  content: "\f10e";
  font-family: "Caseicon";
  font-size: 24px;
  color: #fff;
}
.pxl-cursor.is-active.has-icon-right .pxl-cursor--icon {
  transform: scale(1);
}
.pxl-cursor.is-active.has-icon-right .pxl-cursor--icon:before {
  content: "\f142";
  font-family: "Caseicon";
  font-size: 22px;
  color: #fff;
}
.pxl-cursor.is-active.has-icon-left .pxl-cursor--icon {
  transform: scale(1);
}
.pxl-cursor.is-active.has-icon-left .pxl-cursor--icon:before {
  content: "\f142";
  font-family: "Caseicon";
  font-size: 22px;
  color: #fff;
  transform: scaleX(-1);
}
.pxl-cursor.is-active.has-remove {
  opacity: 0;
}
.pxl-cursor.is-active-section .pxl-cursor--follower {
  opacity: 0;
  -webkit-transform: scale(0);
  -khtml-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.pxl-cursor.drap-style1 .pxl-cursor--drap {
  background-color: #fff;
  height: 135px;
  width: 135px;
  line-height: 135px;
  color: #000;
}
.pxl-cursor.drap-style1 .pxl-cursor--drap:before, .pxl-cursor.drap-style1 .pxl-cursor--drap:after {
  font-size: 12px;
}

.traivao-col > .col-inner,
.phaivao-col > .col-inner,
.duoilen-col > .col-inner,
.phongto-col > .col-inner,.traivao,.duoilen,.phaivao,.phongto {
    opacity: 0;
    transition:
        transform var(--nl-duration,1s) cubic-bezier(.22,1,.36,1),
        opacity var(--nl-duration,1s) ease;
    transition-delay: var(--nl-delay,0s);
    will-change: transform, opacity;
}

.traivao-col > .col-inner,.traivao {
    transform: translateX(-80px);
}

.phaivao-col > .col-inner,.phaivao {
    transform: translateX(80px);
}

.duoilen-col > .col-inner,.duoilen {
    transform: translateY(80px);
}

.phongto-col > .col-inner,.phongto {
    transform: scale(0);
}

.traivao-col.nl-animated > .col-inner,
.phaivao-col.nl-animated > .col-inner,
.duoilen-col.nl-animated > .col-inner,.traivao.nl-animated,.phaivao.nl-animated,.duoilen.nl-animated {
    opacity: 1;
    transform: translate3d(0,0,0);
}

.phongto-col.nl-animated > .col-inner,.phongto.nl-animated {
    opacity: 1;
    transform: scale(1);
}
.progress-section{
    max-width:420px;
}

.progress-item{
    margin-bottom:35px;
}

.progress-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
    font-weight:700;
    color:#005b87;
}

.progress-head strong{
    color:#000;
}

.progress-bar{
    width:100%;
    height:6px;
    background:#dbe3ea;
    border-radius:999px;
    overflow:hidden;
}

.progress-fill{
    display:block;
    width:0;
    height:100%;
    background:#005b87;
    border-radius:999px;
    transition:width 1.8s cubic-bezier(.22,.61,.36,1);
}
.custom-zalo-buttons {
            display: flex;
            flex-direction: row;
            gap: 16px;
            margin-top: 18px;
            flex-wrap: wrap;
        }
        .custom-zalo-buttons a {
            width: 100%;
            font-family: "Montserrat", sans-serif;
            color: #fff;
            line-height: 47px;
            text-align: center;
            text-decoration: none;
            border-radius: 100px;
			max-width: 200px;
			font-weight: 500;
            background-image: linear-gradient(to right, #f69321 0%, #ffa843 100%);
            transition: background-image 0.4s ease;
            flex: 1 1 100%;
        }
        .custom-zalo-buttons a:hover {
            background-image: linear-gradient(to right, #0e7dba 0%, #2c9ddc 100%);
        }
        @media (min-width: 768px) {
            .custom-zalo-buttons a {
                width: auto;
                flex: 1 1 auto;
            }
        }