@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
/* CSS Document */
html{font-size:16px;scroll-behavior: smooth;}
section{float:left; width:100%; position:relative;}
.fix-page{float:left; width:100%; overflow:hidden}
.page-fix-header{float:left; width:100%; height:100vh; position:relative; overflow:hidden}
.navbar{padding:0}
.navbar-brand .logo{max-width:100%; width:130px; margin-left:15px }
.navbar-brand{background-color:#464646; width:20%; display:flex; justify-content:center;align-items: center;padding:10px 0}
.lang{margin-right: 15px; background: white; color: black; line-height: 1;}.lang:hover{background:#ffed00; color:black; text-decoration:none}
.lang .btn{font-size:.9rem}
.dropdown-item:focus, .dropdown-item:hover{background-color:#ffed00}
.collapse.navbar-collapse{justify-content:center; padding-right:20%}
.navbar .nav-item{padding:0 25px}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link{color:#ffed00}
.navbar{font-family: 'Alata', sans-serif;}
.content-fix-header{position:absolute; z-index:2; bottom:30px; left:0; width:100%; height:100vh; padding:0 55px; color:white;display: flex;justify-content:center;align-items: flex-end;}
.soc-dua{position:relative;width: 4px;height: 70px;background:#ffed00; margin-left:12px}
.soc-dua:before{content:"";position:absolute; z-index:1;top:0; left:-32px;width: 10px;height:100%;background:#ffed00;}
.soc-dua:after{content:"";position:absolute; z-index:1;top:0; left:-14px;width: 7px;height:100%;background:#ffed00;}
.bg-black-80{background:rgba(0,0,0,.8)}
.arrow-roll-down{position:absolute; z-index:9; bottom:15px; right:40px}
/* banner */
.caption-header{width:40%}
.caption-header h1{font-family: 'Alata', sans-serif;color:#ffed00; font-size:2rem}
.caption-header hr{float:flex; width:30%; margin:5px 0}
.caption-header p{font-size:1.1rem; margin-bottom:25%}
.box-header{float:left; width:100%; overflow:hidden}
.title h2{font-size: 1.2rem;padding: 10px 0;color: white;text-transform: uppercase; position:relative;width:fit-content}
.box-header .caption{padding:5px 0; text-align:justify}
.box-header .title:before{content:"";position:absolute;z-index:1;background:#ffed00; height:1px; width:100%; bottom:0; left:0}
.box-header h2:after{content:"";position:absolute;z-index:1;background:#ffed00; height:6px; width:100%; bottom:0; left:0}
.box-header .title{position:relative}

.container-fluid{padding:0}.title{font-family: 'Alata', sans-serif;}
.industry{background-repeat:no-repeat; background-position:top center; background-size:100%; background-color:white; padding-top:150px}
.content-fix{float:left;width:100%;padding:0 55px;}
.tieude-industry{width:60%;margin: 0 20% 50px 20%; float:left; color:white}
.tieude-industry h3{color:white; }.tieude-industry hr{border-top:1px solid #ffed00; width:15%}.tieude-solution hr{margin-bottom:5px; margin-top:5px;}
.time-line,.industry-list{float:left; width:100%}
.time-line li{list-style-type:none;display: flex;align-items: center;justify-content: center;position:relative}
.time-line li:before{content:"";position:absolute;z-index:1; top:15px; right:-15px;width:40px; height:40px; background:url("../images/arrow-left-white.png") no-repeat; background-size:cover}.time-line li:last-child:before{display:none}
.time-line .box-time{background-color: #ffed00; color:black; padding:10px 30px; line-height:1}.time-line .box-time span{font-size:2rem;font-family: 'Alata', sans-serif;}
.industry-list{margin:30px 0 15px 0}
.box-img-industry{margin:15px 0}
.img-grayscale{filter: grayscale(100%);}
.img-zoom{overflow:hidden;float:left; width:100%; position:relative}
.img-zoom img{transition: -webkit-all .2s ease;transition: all .2s ease;transition: all .2s ease,-webkit-all .2s ease;transform: scale(1); max-width:100%}
.img-zoom:hover img{transform: scale(1.1)}
.box-img-industry .caption{float:left; width:100%; background-color:rgba(0,0,0,.9);color:white;font-family: 'Alata', sans-serif;padding:4px 10px; position:relative; z-index:2; text-align:center;font-size:1.1rem;position:absolute;z-index:1; bottom:0;}
#videoBG {position:fixed;z-index: -1;
/*not work if the screen ratio is below 16/9*/
width:100%;height: auto;}
@media (min-aspect-ratio: 16/9) {#videoBG {width:100%;height: auto;}}
@media (max-aspect-ratio: 16/9) {#videoBG { width:auto;height: 100%;}}
@media (max-width: 767px) {#videoBG {position:unset}
.page-fix-header{background: url('../video/about.jpg');background-size: cover;}}
.networking{background-color: #fff;background-repeat: no-repeat;background-size: 100%;background-position: bottom; background-color:#fff}
.counter-box{color:white; overflow:hidden}
.counter-box .title{background-color:#ffed00; color:black; padding:10px 0 5px; line-height:1; width:100%;}
.counter-box{border-radius:10px; background-color:rgba(0,0,0,.8);float:left; width:100%;}
.counter-box p{padding:5px 15px}
.number-counter{font-size:1.8rem;padding:40px 15px!important; margin:0 !important }
.title-networking{background: white;float: left;width: 100%;padding: 100px 25% 30px;}
.net-row{padding:4% 0}
.logo-dt{background-color:white; padding:30px; height:100vh}.logo-dt .col-6{ margin:0.5% 0}.logo-dt .content-fix{display: flex;justify-content: center;align-items: center;height: 100vh;}
footer{float:left; width:100%;background-color:#5f6062}
.border-contact{}
.pic-footer{overflow:hidden}.title-footer{font-family: 'Alata', sans-serif}
.border-contact{border-radius:10px; border:2px solid white; padding:10px 15px; position:relative}
.border-contact .icon-f{position: absolute; z-index:1; top:-25px; left:30px; background-color:#ffed00; padding:0 10px}
.border-contact .item img{width:100%}.border-contact .item{float:left; margin:0 10px 0 0; width:30px}
.contact{padding:90px; float:left; width:100%; background-size:cover}
.vh100-contact{height: calc(100vh - 40px);display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: center;background-position:right}
.contact h5{color:black; background:yellow; padding:10px; float:left}
.hotline{font-size:1.6rem}
.contact h5{font-size:2rem}.contact h6{font-size:1.2rem}
.bg-transparent-w{background:rgba(255,255,255,.5); padding:15px; width:100%; float:left}
.text-contact{float:left; width:100%; display:flex;justify-content:flex-end}
.title-footer{display: flex;justify-content: center;align-items: center;}
.text-title-top{position:relative; z-index:1; margin-top:-47px}
.box-header .caption{color:white}
.text-title-top h1{font-size:1.6rem}.text-title-top hr{border-top:2px solid #ffed00 }
.col-30{width:35%}.right-content-xeo{padding-top:15px;}.right-content-xeo.full-overflow-unset{margin-left:-30px}
.xeo-title{clip-path: polygon(0 0, 70% 0, 100% 100%, 0% 100%); height:100vh; float:left; width:100%}
.title-xeo-left{float:left; width:100%;padding-top:80px; background-position:center; background-repeat:no-repeat; background-size:100%}
.title-xeo-left h2{ color:#ffed00;font-family: 'Alata', sans-serif; font-size:1.6rem;text-align:center; width:100%; padding:0}
.tieude-solution{width: 60%;margin: 70px 20% 10px 20%;float: left;}
.title-xeo-left h3{color:white; border:2px solid #ffed00;font-size:1rem; padding:15px 70px; text-align:justify;font-weight: 400; margin:0}
.xeo-content{height:100vh}
.items-xeo{float:left; width:100%; position:relative;margin-bottom:15px}.items-xeo img{max-width:100%; filter:grayscale(100%)}
.caption-xeo{position:absolute; z-index:1;bottom:0; left:0; background-color:black; color:white;padding:5px;width: 100%;text-align: center;}
.row-xeo {float:left; width:100%; padding:0}
.row-xeo li{list-style-type:none;width:100% }
.full-overflow-unset .owl-stage-outer:after{z-index:2; right:-70px;}
.xeo-content .owl-nav{position:absolute;z-index:5; top:calc(50% - 40px); right:-30px}
.owl-prev span,.owl-next span{color:transparent;width:40px; height:40px; float:left; background-size:100%}
.owl-prev span{background:url(../images/arrow-left-black.png) !important}.owl-next span{background:url(../images/arrow-right-black.png)!important}
.box-xeo-drop-w{filter: drop-shadow(-1px 6px 3px rgba(50, 50, 0, 0.5));}
.caption-xeo-1{position:absolute; z-index:1;top:15px; left:15px; width:calc(100% - 30px); background-color:rgba(0,0,0,.7);padding:15px;color:white;font-size:.9rem; line-height:1.1}.caption-xeo-1 span{font-weight:500}
.dropshadow-box{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.1); padding: 15px; margin-bottom:unset}
.caption-xeo-2{position:absolute; z-index:1;top:10px; left:10px; width:calc(100% - 20px); height:calc(100% - 20px); color:white; font-size:.9rem; line-height:1.1; padding:10px; background-color:rgba(0,0,0,.7)}
.caption-pro-list{ background:url(../images/bg-yellow-xeo-1.jpg); background-size:cover; font-family:'Alata', sans-serif;display:flex;justify-content: center;flex-direction: column;align-items: center; text-align:center; font-size:1.2rem}
.box-caption-pro-list{position:relative; float:left; width:100%;}.box-caption-pro-list .caption-xeo-2{transition: opacity .5s;}.box-caption-pro-list:hover .caption-xeo-2{opacity: 0;transition: opacity 1s;}
.xeo-vang{clip-path:polygon(0% 0%,40% 0%, 72% 100%,28% 100%); height:100vh; float:left; width:250px; background:#ffed00;color:black;font-family: 'Alata', sans-serif; font-size:1.6rem; padding:30px; text-transform:uppercase;}
.top-5{margin-top:8%}.top-10{margin-top:10%}.top-12{margin-top:12%}
.table-right-xeo li{list-style-type:none}.table-right-xeo{padding:0;margin-left:0%}
.table-right-xeo li:nth-child(2) { margin-left:40px}.table-right-xeo li:nth-child(3) { margin-left:80px}
.xeoxeo{-webkit-transform: skew(12deg);transform: skew(12deg); height:100vh; float:left; background:url(../images/bg-yellow-xeo-1.jpg) bottom no-repeat #ffed00 ;color:black;font-family: 'Alata', sans-serif; font-size:1.6rem; padding:100px 30px; text-transform:uppercase;}
.z-index-2{z-index:2}
.full-overflow-unset .owl-stage-outer{overflow:unset}
.icon-items-tools{height:100vh; background:#ffed00;}
.list-icon-tools{background-size:cover; background-position:center; height:100vh; width:90%; margin-left:5%;padding:100px 30px 0 30px}
.col-20{float:left; width:20%; padding:15px}
.list-icon-tools h3{;font-family: 'Alata', sans-serif; font-size:1.2rem; text-transform:uppercase;color:#ffed00;margin-bottom:10px; text-align:center}
.items-itools{display: flex;flex-direction: column;justify-content: center;align-items: center; margin-bottom:20px; text-align:center; line-height:1.1}.items-itools span{color:white}.items-itools img{max-height:50px; max-width:120px; margin-bottom:5px}
.video-container{height:calc(40vh - 70px); position:relative; margin-top:70px}
.video-container video {width: 100%;height: 100%;position: absolute;object-fit: cover;z-index: 0;}
.doingu{height:60vh; position:relative}.doingu-3col{position:absolute; z-index:1;bottom:30px; left:0; padding:0 70px}
.col-about-3{position: relative;width: 100%;padding-right: 15px;padding-left: 15px;-ms-flex-preferred-size: 0;flex-basis: 0;-ms-flex-positive: 1;flex-grow: 1;max-width: 100%;}
.time-line ul{padding:0}
.list-style-style-none{margin:0; padding:0}.list-style-style-none li{list-style-type:none}
.mobi{display:none !important}
.logo-dt img{max-width:100%}
.box-contact{color:white; display:flex;flex-direction: column;flex-wrap: nowrap;justify-content: center;align-items: flex-start;padding:0 100px}
.share-items{width:100%; margin:0; padding:15px 0; float:left}.share-items a{border-radius:4px;max-width:40px; max-height:40px;background-color:yellow; float:left; padding:5px; display:flex;}.share-items .row{margin:0}
.share-items a img{width: 100%;filter: invert(1)}.share-items a:hover img{width: 100%;filter: invert(0)}.share-items .col-2{padding-left:0; padding-right:10px}
.share-items a:hover{background-color:black}
.add-list li{list-style-type:none}.add-list{padding:0; margin:0}
.name-cty{font-weight:bold; text-transform:uppercase}

/*fix mobi*/
@media (min-width: 375px) and (max-width:778px){
.navbar-brand{width:40%;}.navbar-brand .logo{margin-right:0; width:100px}.soc-dua{height:60px;margin-left: 0;position: absolute;z-index: 1;left: 50%;top: 0;}.navbar-toggler{position: absolute;z-index: 1;right:0;top: 10px;}.lang{position: absolute;z-index: 1;right:40px;top: 17px;}.page-fix-header{height:unset}.content-fix{padding:15px;top: 15%;bottom:unset; top:15%}.caption-header{width:100%}.content-fix-header{padding:15px}.col-about-3{flex-basis: unset;}.industry{background-size: 200%;padding-top:15px}.tieude-industry{width:100%; margin:0}.time-line li{margin-top:50px}.time-line li:before{bottom: -45px;top:unset;right:calc(50% - 20px);background:url(../images/arrow-down-yellow.png) no-repeat center}.time-line .box-time{min-width:80%}.title-networking{padding:30px}.counter-box{margin-bottom:15px}.logo-dt,.logo-dt .content-fix{height:unset; padding:0}.owl-nav{display:flex;justify-content: center;align-items: center; margin-top:15px}.owl-carousel .owl-item img{max-width:100%; width:unset}.pic-footer img{max-width:100%}.contact{padding:30px 15px}.networking{background-image:unset !important;background-color:#f2f2f2}.doingu{height:unset; background-size:cover;}.video-container{height:70px;margin-top:58px}.text-title-top{margin-top:0; padding:30px}.doingu-3col{position:unset;padding:0 15px}.col-30{width:100%}
.xeo-content{height:unset}.xeo-title{height: 340px; background-size:cover}.title-xeo-left h3{margin-left:50px;padding:15px}.title-xeo-left{padding:30px 30px 30px 0;background-size:cover;}.xeo-content.default:after, .full-overflow-unset .owl-stage-outer:after{display:none}.owl-item{margin-right:0 !important}.right-content-xeo,.right-content-xeo.full-overflow-unset{margin-left:0}.row-xeo li:nth-child(2) { margin-left:0px}.row-xeo li:nth-child(3) { margin-left:0px}.table-right-xeo li:nth-child(2) { margin-left:0px}.table-right-xeo li:nth-child(3) { margin-left:0px}.row-xeo{padding:0 15px}.items-xeo{width:100%}.xeo-content .owl-nav{position:unset}.xeoxeo{background: url(../images/bg-yellow-xeo-1.jpg) 10% 67% no-repeat #ffed00;height:unset;padding:15px 30px; -webkit-transform: skew(0deg); transform: skew(0deg); line-height:1.2}.full-overflow-unset .owl-stage-outer{overflow:hidden}.caption-xeo-1{width:80%; padding:10px 10%}.full-overflow-unset .row{margin-right:0;margin-left:0; padding:0 15px}
.icon-items-tools{height:unset;}.col-20{width:100%; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.5)}.list-icon-tools{background-size:cover; background-repeat:no-repeat; width:100%; height:unset; margin-left:0; float:left; padding:15px}.items-itools{float:left; width:50%; text-align:center}.list-icon-tools h3{min-height:unset}.list-icon-tools .col-20:last-child:{bolder:none}.title-xeo-left h2{font-size:1.4rem; text-align:center; margin-bottom:10px;align-items: center; padding:0 15px}.xeoxeo{font-size:1.2rem}.items-itools span{font-size:.8rem}
.destop,.arrow-roll-down{display:none !important}
.mobi{display:block !important}
.bg-black-80{background-color:black}
.tieude-solution{padding:30px; width:100%; margin:0}
.caption-pro-list{min-height:160px; background-size:100%}
.owl-carousel.owl-theme.owl-two{padding:0}.owl-carousel.owl-theme.owl-two li{list-style-type:none}
.box-contact{padding:30px 60px}.bg-transparent-w{text-align:left !important}.text-contact{display:unset}
}
@media (min-width: 768px) and (max-width: 991.99px){}
@media (min-width: 992px) and (max-width: 1023.99px){.number-counter{font-size:1.4rem}.col-30{width:35%}.text-title-top h1 {font-size:1.4rem}.video-container{height: calc(34vh - 70px);}.doingu{height:66vh; background-size:cover}.list-icon-tools h3{font-size:1.1rem}.items-itools img{width:40px; height:unset}.title-xeo-left h2 {font-size:1.1rem}.video-container {height: calc(35vh - 70px);}.doingu{height:65vh}.box-contact{padding:30px 60px}.share-items li a{width:25px; height:25px}
}
/*fix destop*/
@media (min-width: 1024px)and(max-width:1365.98px){.list-icon-tools h3{font-size:1.2rem}.video-container {height: calc(40vh - 70px);}.doingu{height:60vh}}
@media (min-width: 1366px)and(max-width:1799.98px){.video-container {height: calc(40vh - 70px);}.doingu{height:60vh}}
@media (min-width:1600px){}