:root {
  --mauchinh: #29AADF;
  --mauphu: #29C0C8;
  --mau1: #EBB714;
  
  --tile: calc(100vw/2300);
}


@font-face {
  font-family: 'iCiel Gotham';
  src: url('fonts/iCielGotham-Thin.eot');
  src: url('fonts/iCielGotham-Thin.eot?#iefix') format('embedded-opentype'),
      url('fonts/iCielGotham-Thin.woff2') format('woff2'),
      url('fonts/iCielGotham-Thin.woff') format('woff'),
      url('fonts/iCielGotham-Thin.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'iCiel Gotham';
  src: url('fonts/iCielGotham-Ultra.eot');
  src: url('fonts/iCielGotham-Ultra.eot?#iefix') format('embedded-opentype'),
      url('fonts/iCielGotham-Ultra.woff2') format('woff2'),
      url('fonts/iCielGotham-Ultra.woff') format('woff'),
      url('fonts/iCielGotham-Ultra.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'iCiel Gotham';
  src: url('fonts/iCielGotham-Medium.eot');
  src: url('fonts/iCielGotham-Medium.eot?#iefix') format('embedded-opentype'),
      url('fonts/iCielGotham-Medium.woff2') format('woff2'),
      url('fonts/iCielGotham-Medium.woff') format('woff'),
      url('fonts/iCielGotham-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
body{
  font-family: 'iCiel Gotham';
  font-weight: 500;
}

.main {
  position: relative;
}

.nav {
	
  justify-content: space-around;
    padding: 8px;
    transition: all 1s ease;
    position: relative;
    z-index: 9999;
    background-color: #fff;
}

.nav li {
  justify-content: center;
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.nav li:not(:last-child) {
  border-right: 3px solid var(--mau1);
}

.nav a {
  color: #006E43;
    padding: 3px;
    /*background: linear-gradient(to right, var(--mauchinh) 0%, var(--mauphu) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;*/
    font-family: 'iCiel Gotham';
    font-size: calc(28 * var(--tile));;
    font-weight: 500;
    text-align: center;
    line-height: 1.2;
}
.sticky{
	position: fixed;
    top: 0;
    width: 100%;
    z-index: 999999;
    background-color: #fff;
	transition: all 1s ease;
}
.header{
  padding: 10px 40px;
    background: linear-gradient(to right, var(--mauchinh) 0%, var(--mauphu) 100%);
    height: unset !important;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
}
.header .left{
  display: inline-block;
  width: 74%;
  vertical-align: top;
}
.header .right{
  display: inline-block;
  width: 25%;
  vertical-align: top;
  padding: 10px 10px;
}
.header .left img{
  
}
.header .right img{
  
}

.header .text{
  font-family: 'iCiel Gotham';
    font-size: calc(19* var(--tile));;
    font-weight: 500;
    color: #fff;
    line-height: 1.3;
	position: unset !important;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: 0 auto;
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}

.form-signin .form-control:focus {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

body {
  position: relative;
  font-size: calc(24 * var(--tile));
}
/*
.light {
  background-image: url("../images/light.png");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 4s linear infinite;

}
*/
@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

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

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes maybay {
  from {
      left: 120%;
  }
  to {
      left: -25%;
  }
}

@keyframes moveleftright {
  0% {
    transform: translatex(0);
  }
  50% {
    transform: translatex(-40px);
  }
}

@keyframes moveupdown{
  50% { transform: translateY(-15px); }
}
@keyframes moveupdown2{
  50% { transform: translateY(-15px) scaleX(-1); }
}
@keyframes moveupdown3{
  50% { transform: translateY(-15px) rotate(20deg) ; -webkit-transform: translateY(-15px) rotate(20deg) ; -moz-transform: translateY(-15px) rotate(20deg) ; -ms-transform: translateY(-15px) rotate(20deg) ; -o-transform: translateY(-15px) rotate(20deg) ; }
}

@keyframes blend {
  100% {
   opacity: 0.4;
}
}

@-webkit-keyframes fadeInUpCenter {
  0% {
    transform: translate(-50%,calc(15 * var(--tile)));
    -webkit-transform: translate(-50%,calc(15 * var(--tile)));
    -moz-transform: translate(-50%,calc(15 * var(--tile)));
    -ms-transform: translate(-50%,calc(15 * var(--tile)));
    -o-transform: translate(-50%,calc(15 * var(--tile)));
}

  100% {
    transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -ms-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
}
}

@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}



.img-full{
  width: 100%;
  height: auto;
}
.img-full-2{
  width: auto;
  height: 100%;
}
.section{
  position: relative;
  margin: auto;
}


.section1 .title{
  width: calc(700 * var(--tile));
    position: absolute;
    top: calc(20 * var(--tile));
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -webkit-animation: fadeInUpCenter 2s 0s both alternate infinite;
    animation: fadeInUpCenter 2s 0s both alternate infinite;
}

.section1 .logo_nutifood {
	display: none;
   width: calc(120 * var(--tile));
    position: absolute;
    top: calc(480 * var(--tile));
    left: calc(550 * var(--tile));

}

.section1 .logo_nnris {
	display: none;
  width: calc(120 * var(--tile));
    position: absolute;
    top: calc(480 * var(--tile));
    left: calc(1240 * var(--tile));

}

.section1-bg .mevang,.section1 .mevang{
  position: absolute;
    width: calc(1205 * var(--tile));
    left: calc(-580 * var(--tile));
    top: calc(-250 * var( --tile));
}

.section1-bg .bevang,.section1 .bevang{
  position: absolute;
    width: calc(600 * var(--tile));
    right: calc(-120 * var(--tile));
    top: calc(100 * var( --tile));

}

.section1 .tv{
    width: calc(770 * var(--tile));
    position: absolute;
    top: calc(130 * var(--tile));
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    cursor: pointer;
}
.section1 .video-control{
  width: calc(180 * var(--tile));
    position: absolute;
    top: calc(300 * var(--tile));
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    cursor: pointer;
}

.section1 .video-box{

 width: calc(450 * var(--tile));
    height: calc(440 * var(--tile));
    position: absolute;
    top: calc(260 * var(--tile));
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.section1 video{
	object-fit: inherit;
}

.section1 .text{
  width: calc(970 * var(--tile));
    position: absolute;
    top: calc(540 * var(--tile));
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}
.section1 .video-list{
 width: calc(770 * var(--tile));
    position: absolute;
    top: calc(630 * var(--tile));
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    display: flex;

}
.section1 .video-item{
  flex: 1 1 auto;
  position: relative;
  background-color: #fff;
  margin: 10px;
  border-radius: calc(20 * var(--tile));
  overflow: hidden;
  cursor: pointer;
}.section1 .video-item:hover{

}
.section1 .video-item .thumb{
  position: relative;
}
.section1 .video-item .thumb a{
  position: absolute;
    bottom: calc(-35 * var(--tile));
    height: calc(75 * var(--tile));
    width: calc(75 * var(--tile));
    right: calc(10 * var(--tile));
}
.section1 .video-item .info{
  padding-top: calc(20 * var(--tile));
    padding-left: calc(10 * var(--tile));
    padding-right: calc(10 * var(--tile));
    padding-bottom: calc(10 * var(--tile));
}
.section1 .video-item .info .video-title{
  font-size: calc(13 * var(--tile));
}
.section1 .video-item .info .video-des{
  font-size: calc(13 * var(--tile));
    color: var(--mauchinh);
}

.section1-bg .earth1,.section1 .earth1{
    position: absolute;
    top: calc(400 * var(--tile));
    left: calc(-80 * var(--tile));
    width: calc(200 * var( --tile));
    animation:moveupdown 3s  0s both alternate infinite;
    -webkit-animation:moveupdown 3s  0s both alternate infinite;
}
.section1-bg .earth2,.section1 .earth2{
    position: absolute;
    top: calc(400 * var(--tile));
    right: calc(-80 * var(--tile));
    width: calc(200 * var( --tile));
    animation:moveupdown 7s  0s both alternate infinite;
    -webkit-animation:moveupdown 7s  0s both alternate infinite;
}
.section1-bg .earth3,.section1 .earth3{
    position: absolute;
    bottom: calc(-50 * var(--tile));
    left: calc(200 * var( --tile));
    width: calc(350 * var( --tile));
    transform: rotate(-45deg);
    animation:moveupdown 6s  0s both alternate infinite;
    -webkit-animation:moveupdown 6s  0s both alternate infinite;
}
.section1-bg .star1,.section1 .star1{
  position: absolute;
    top: calc(100 * var(--tile));
    left: calc(120 * var(--tile));
    width: calc(50 * var( --tile));
    transform: scaleX(-1) rotate(45deg);
}
.section1-bg .star2,.section1 .star2{
    position: absolute;
    top: calc(300 * var(--tile));
    right: calc(180 * var(--tile));
    width: calc(70 * var( --tile));
    transform: rotate(-45deg);
    animation: spin 7s linear infinite;
    -webkit-animation: spin 7s linear infinite;
}
.section1-bg .star3,.section1 .star3{
    position: absolute;
    top: calc(450 * var(--tile));
    left: calc(190 * var(--tile));
    width: calc(50 * var( --tile));
    
}
.section1-bg .star4,.section1 .star4{
    position: absolute;
    top: calc(600 * var(--tile));
    right: calc(150 * var(--tile));
    width: calc(70 * var( --tile));
    animation:blend 3s  0s both alternate infinite;
    -webkit-animation:blend 3s  0s both alternate infinite;
}

.section1-bg .may1,.section1 .may1{
    position: absolute;
    top: calc(200 * var(--tile));
    /*left: calc(-80 * var(--tile));*/
    right: -201px; 
    width: calc(300 * var( --tile));
    animation:maybay 35s  0s infinite;
    -webkit-animation:maybay 35s  0s infinite;
}

.section1-bg .may2,.section1 .may2{
    position: absolute;
    top: calc(480 * var(--tile));
    /*right: calc(300 * var(--tile));
    */right: -371px;
    width: calc(370 * var( --tile));
    animation:maybay 30s  5s infinite;
    -webkit-animation:maybay 30s  5s infinite;
}

.section1-bg .may3,.section1 .may3{
  position: absolute;
  bottom: calc(450 * var(--tile));
  /*left: calc(350 * var(--tile));
  */
  right: -201px;
  width: calc(200 * var( --tile));
  animation:maybay 28s  10s infinite;
  -webkit-animation:maybay 28s  10s infinite;
}


.section2 .light{
  position: absolute;
    top: calc(-1000 * var(--tile));
    left: calc(-2450 * var(--tile));
    width: calc(6000 * var( --tile));
    transform: rotate(-45deg);
    animation: spin 7s linear infinite;
    opacity: 0.04;
    -webkit-animation: spin 40s linear infinite;
}
.section2 .text{
  width: calc(870 * var(--tile));
    position: absolute;
    top: calc(200 * var(--tile));
    left: 50%;
}
.section2 .btn1{
  width: calc(520 * var(--tile));
    position: absolute;
    top: calc(595 * var(--tile));
    left: 50%;
    cursor: pointer;
}
.section2 .btn2{
  width: calc(320 * var(--tile));
    position: absolute;
    bottom: calc(98 * var(--tile));
    right: calc(100 * var(--tile));
    cursor: pointer;
}
.section2 .earth{
  width: calc(1300 * var(--tile));
  position: absolute;
  top: calc(400 * var(--tile));
  left: calc(-190 * var(--tile));
  animation:moveupdown 7s  0s both alternate infinite;
  -webkit-animation:moveupdown 7s  0s both alternate infinite;
}
.section2 .may1{
  position: absolute;
  top: calc(80 * var(--tile));
  left: calc(180 * var(--tile));
  width: calc(500 * var( --tile));
  opacity: 0.8;
  animation:moveleftright 3s  0s both alternate infinite;
  -webkit-animation:moveleftright 3s  0s both alternate infinite;
}
.section2 .may2{
    position: absolute;
    top: calc(880 * var(--tile));
    left: calc(480 * var(--tile));
    width: calc(300 * var( --tile));
    opacity: 0.95;
    animation:moveleftright 5s  0s both alternate infinite;
    -webkit-animation:moveleftright 5s  0s both alternate infinite;
}
.section2 .may3{
    position: absolute;
    top: calc(800 * var(--tile));
    left: calc(580 * var(--tile));
    width: calc(400 * var( --tile));
    opacity: 0.95;
    animation:moveleftright 5s  1s both alternate infinite;
    -webkit-animation:moveleftright 5s  1s both alternate infinite;
}

.section2 .aodaido{
    position: absolute;
    top: calc(150 * var(--tile));
    left: calc(190 * var(--tile));
    width: calc(800 * var( --tile));
}
.section2 .aodaivang{
  position: absolute;
    top: calc(280 * var(--tile));
    left: calc(0 * var(--tile));
    width: calc(800 * var( --tile));

}

.section3 .title, .section4 .title{
  width: 100%;
    position: absolute;
    top: calc(15 * var(--tile));
    height: calc(220 * var(--tile));
    text-align: center;

}
.section3 .sub-title, .section4 .sub-title{
  font-size: calc(40 * var(--tile));
    font-weight: 500;
    padding: calc(50 * var(--tile));
    position: absolute;
    top: calc(175 * var(--tile));
    width: 100%;
    color: #0074BA;
    text-align: center;
}

.section3 .earth1, .section4 .earth1{
  position: absolute;
    top: calc(1300 * var(--tile));
    left: calc(-80 * var(--tile));
    width: calc(300 * var( --tile));
    animation: moveupdown2 3s 0s both alternate infinite;
    -webkit-animation: moveupdown2 3s 0s both alternate infinite;
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
}
.section3 .earth2{
  position: absolute;
  top: calc(400 * var(--tile));
  right: calc(-80 * var(--tile));
  width: calc(300 * var( --tile));
  animation:moveupdown3 7s  0s both alternate infinite;
  -webkit-animation:moveupdown3 7s  0s both alternate infinite;
  transform: rotate(20deg);
}
.section3 .earth3{
  position: absolute;
  bottom: calc(-20 * var(--tile));
  left: calc(700 * var( --tile));
  width: calc(250 * var( --tile));
  animation:moveupdown 5s  0s both alternate infinite;
  -webkit-animation:moveupdown 5s  0s both alternate infinite;
}

.section3 .earth4{
  position: absolute;
  top: calc(700 * var(--tile));
  left: calc(400 * var( --tile));
  width: calc(250 * var( --tile));
  animation:moveupdown 7s  0s both alternate infinite;
  -webkit-animation:moveupdown 7s  0s both alternate infinite;
}

.section3 .may, .section4 .may{
    position: absolute;
    top: calc(400 * var(--tile));
    width: calc(800 * var( --tile));
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    animation:fadeInUpCenter 5s  0s both alternate infinite;
    -webkit-animation:fadeInUpCenter 5s  0s both alternate infinite;
}

.section3 .titlemuangay, .section4 .titlemuangay{
    position: absolute;
    top: calc(580 * var(--tile));
    width: calc(400 * var( --tile));
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    animation:fadeInUpCenter 5s  0.5s both alternate infinite;
    -webkit-animation:fadeInUpCenter 5s  0.5s both alternate infinite;
}

.section3 .lon1, .section4 .lon1{
  position: absolute;
    top: calc(350 * var(--tile));
    left: calc(655 * var( --tile));
    width: calc(140 * var( --tile));
  
}
.section3 .lon2, .section4 .lon2{
  position: absolute;
    top: calc(326 * var(--tile));
    left: calc(785 * var( --tile));
    width: calc(155 * var( --tile));
  
}
.section3 .lon3, .section4 .lon3{
  position: absolute;
  top: calc(330 * var(--tile));
  left: calc(920 * var( --tile));
  width: calc(170 * var( --tile));
  
}
.section3 .lon4, .section4 .lon4{
  position: absolute;
    top: calc(360 * var(--tile));
    left: calc(1075 * var( --tile));
    width: calc(140 * var( --tile));
}

.section3 .km1, .section4 .km1{
  position: absolute;
    top: calc(590 * var(--tile));
    left: calc(130 * var( --tile));
    width: calc(700* var( --tile));
    cursor: pointer;
}

.section3 .km2, .section4 .km2{
  position: absolute;
    top: calc(765 * var(--tile));
    left: calc(930 * var( --tile));
    width: calc(800* var( --tile));
    cursor: pointer;
}



.section3 .btn_km1, .section4 .btn_km1 {
    position: absolute;
    top: calc(850 * var(--tile));
    left: calc(1380 * var( --tile));
    width: calc(350* var( --tile));
    cursor: pointer;
}

.section3 .btn_km2, .section4 .btn_km2{
position: absolute;
    top: calc(1050 * var(--tile));
    left: calc(1330 * var( --tile));
    width: calc(350* var( --tile));
    cursor: pointer;
}

.section3 .may1, .section4 .may1{
   position: absolute;
    top: calc(1500 * var(--tile));
    left: calc(-170 * var(--tile));
    width: calc(350 * var( --tile));
}
.section3 .may2, .section4 .may2{

    position: absolute;
    top: calc(400 * var(--tile));
    left: calc(1150 * var(--tile));
    width: calc(250 * var( --tile));
    animation:fadeInUp 5s  0s both alternate infinite;
}

.section3 .star1, .section4 .star1{
  position: absolute;
    top: calc(220 * var(--tile));
    right: calc(220 * var(--tile));
    width: calc(50 * var( --tile));
    transform: rotate(45deg);
}
.section3 .star2, .section4 .star2{
  position: absolute;
  top: calc(700 * var(--tile));
  right: calc(350 * var(--tile));
  width: calc(70 * var( --tile));
  transform: rotate(-45deg);
  animation: spin 7s linear infinite;
  -webkit-animation: spin 20s linear infinite;
}
.section3 .star3, .section4 .star3{
   position: absolute;
    top: calc(300 * var(--tile));
    left: calc(190 * var(--tile));
    width: calc(50 * var( --tile));
    
}
.section3 .star4{
  position: absolute;
    bottom: calc(50 * var(--tile));
    right: calc(50 * var(--tile));
    width: calc(90 * var( --tile));
}


.section4 .bg img{
	margin-top: -5px;
}

.section1-bg .text-footer{
  position: absolute;
    bottom: calc(110 * var(--tile));
    left: 0;
    color: #fff;
    width: 100%;
    text-align: center;
}

.section1-bg .bg-bottom1{
    position: absolute;
    bottom: calc(-40* var(--tile));
    left: calc(0 * var(--tile));
    width: calc(2300 * var( --tile));

}

.section1-bg .bg-bottom2{
   position: absolute;
    bottom: calc(0 * var(--tile));
    left: calc(0 * var(--tile));
    width: calc(2300 * var( --tile));
}

.section4-bg .bg-bottom1{
  position: absolute;
  bottom: calc(0 * var(--tile));
  left: calc(0 * var(--tile));
  width: calc(2300 * var( --tile));
}

.section4-bg .bg-bottom2{
  position: absolute;
  bottom: calc(0 * var(--tile));
  left: calc(0 * var(--tile));
  width: calc(2300 * var( --tile));
}

.section4 .bg-bottom1, .section1 .bg-bottom1{
  position: absolute;
  bottom: calc(0 * var(--tile));
  left: calc(0 * var(--tile));
  width: calc(1920 * var( --tile));
}
.section4 .bg-bottom2, .section1 .bg-bottom2{
  position: absolute;
  bottom: calc(0 * var(--tile));
  left: calc(0 * var(--tile));
  width: calc(1920 * var( --tile));
}
.section4 .earth3,.section3 .earth3{
  position: absolute;
  bottom: calc(200 * var(--tile));
  left: calc(1000 * var( --tile));
  width: calc(170 * var( --tile));
  animation: moveupdown 5s 0s both alternate infinite;
  -webkit-animation: moveupdown 5s 0s both alternate infinite;
    
}
.section4 .star4,.section3 .star4 {
  position: absolute;
  bottom: calc(550 * var(--tile));
  right: calc(20 * var(--tile));
  width: calc(100 * var( --tile));
}
.section4 .text-center-box,.section3 .text-center-box{
  position: absolute;
    top: calc(20 * var(--tile));
    width: 100%;
}

.section4 .bgText,.section3 .bgText{
  width: calc(1600 * var( --tile));
    background-color: #fff;
    padding: 20px;
    border-radius: 20px;
    margin: auto;
}

.section4 .text-center-box .text-center,.section3 .text-center-box .text-center{
  text-align: center;
    font-size: calc(40 * var(--tile));
    color: #0074BA;
    line-height: 1.3;
}
.section4 .earth4,.section3 .earth4{
  position: absolute;
  top: calc(1250 * var(--tile));
  left: calc(600 * var( --tile));
  width: calc(200 * var( --tile));
  animation: moveupdown 7s 0s both alternate infinite;
  -webkit-animation: moveupdown 7s 0s both alternate infinite;
}

.section4 .earth2,.section3 .earth2 {
  position: absolute;
  top: calc(1200 * var(--tile));
  right: calc(-80 * var(--tile));
  width: calc(300 * var( --tile));
  animation: moveupdown3 7s 0s both alternate infinite;
  -webkit-animation: moveupdown3 7s 0s both alternate infinite;
  transform: rotate(20deg);
}
.section4 .cuahang,.section3 .cuahang{
  position: absolute;
    bottom: calc(0 * var(--tile));
    left: calc(250 * var( --tile));
    width: calc(600 * var( --tile));
 }
.section4 .may3,.section3 .may3{
    position: absolute;
    bottom: calc(680 * var(--tile));
    left: calc(20 * var(--tile));
    width: calc(500 * var( --tile));
    animation:moveleftright 5s  0s infinite;
    -webkit-animation:moveleftright 5s  0s infinite;
}

.section4 .pin,.section3 .pin{
  position: absolute;
    top: calc(280 * var(--tile));
    left: calc(200 * var( --tile));
    width: calc(250 * var( --tile));
 }
 .section4 .dot,.section3 .dot{
	position: absolute;
    top: calc(410 * var(--tile));
    left: calc(300 * var( --tile));
    width: calc(1300 * var( --tile));
 }
.section4 .qua1,.section3 .qua1{
position: absolute;
    top: calc(210 * var(--tile));
    left: calc(400 * var( --tile));
    width: calc(400 * var( --tile));
}
.section4 .qua2,.section3 .qua2{
 position: absolute;
    top: calc(300 * var(--tile));
    left: calc(780 * var( --tile));
    width: calc(350 * var( --tile));
}

.section4 .qua3,.section3 .qua3{
 position: absolute;
    top: calc(400 * var(--tile));
    left: calc(1200 * var( --tile));
    width: calc(700 * var( --tile));
}

.section4 .qua4,.section3 .qua4{
 position: absolute;
    top: calc(620 * var(--tile));
    left: calc(730 * var( --tile));
    width: calc(500 * var( --tile));
}

.section4 .qua5,.section3 .qua5{
position: absolute;
    top: calc(700 * var(--tile));
    left: calc(500 * var( --tile));
    width: calc(400 * var( --tile));
}

.section4 .qua6,.section3 .qua6{
 position: absolute;
    top: calc(650 * var(--tile));
    left: calc(200 * var( --tile));
    width: calc(350 * var( --tile));
}
.formBox{
  position: absolute;
    top: calc(280 * var(--tile));
    width: calc(800 * var( --tile));
    left: 50%;
    background-color: #DCE8F7;
    padding: calc(70 * var(--tile));
    border-radius: calc(35 * var(--tile));
    box-shadow: 6px 6px 12px #7c7c7c;
}
.formBox .formTitle{
  text-align: center;
    font-size: calc(35 * var(--tile));
    color: #0074BA;
    line-height: 1.3;
    margin-bottom: calc(30 * var(--tile));
}
.formBox .inputText{
  
}
.formBox .inputText .input-custom{
  border: 0;
    font-size: calc(35 * var(--tile));
    color: #0074BA;
    padding: calc(25 * var(--tile)) calc(30 * var(--tile));
    width: 100%;
    margin-bottom: calc(40 * var(--tile));
    border-radius: calc(35 * var(--tile));
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff url(../../images/pc/section4/arrow.png) no-repeat calc(600*var(--tile)) center;
    outline: none;
  }
.formBox .inputBtn{
  text-align: center;
}
.formBox .inputBtn .btn-custom{
  border: 2px solid #0074BA;
    color: #0074BA;
    padding: calc(20 * var(--tile)) calc(125 * var(--tile));
    border-radius: calc(35 * var(--tile));
    background-color: transparent;
    font-size: calc(35 * var(--tile));
    line-height: 1;
    outline: none;
}

.formBox .inputBtn .btn-custom:hover{
  border: 2px solid #0074BA;
    color: #fff;
    background-color: #0074BA;

}


.section4 .text-footer, .section1 .text-footer{
  position: absolute;
  bottom: calc(45 * var(--tile));
  left: 0;
  color: #fff;
  width: 100%;
  text-align: center;
}

.location-box{
    position: absolute;
    top: calc(1580 * var(--tile));
    width: calc(720 * var( --tile));
    left: calc(145 * var( --tile));
    background-color: #fff;
    padding: calc(20 * var(--tile));
    border-radius: calc(35 * var(--tile));
    height: calc(800 * var( --tile));
    overflow: hidden;
    opacity: 0;
    transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    top: calc(1880 * var(--tile));
}
.show-list{
  top: calc(280 * var(--tile));
  opacity: 1;
  transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
}

.location-list{
  overflow-y: auto;
  height: calc(950 * var( --tile));
  width: 100%;
  height: 100%;
  padding-bottom: 100px;
}

.location-box .location-item{
 
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  padding: calc(10 * var(--tile));
  margin-bottom: calc(15 * var(--tile));
  cursor: pointer;
}
.location-box .location-item:hover{
  background-color: #E0EEF6;
}
.location-box .location-item.active{
  background-color: #E0EEF6;
}

.location-box .location-item .stt{
  display: inline-block;
    width: calc(70 * var(--tile));
    vertical-align: top;
    padding-right: calc(19 * var(--tile));
}
.location-box .location-item .stt .number{
  width: calc(50 * var(--tile));
    height: calc(50 * var(--tile));
    background-color: #2D62AD;
    color: #fff;
    line-height: 1;
    font-weight: 700;
    text-align: center;
    border-radius: 50%;
    padding: calc(15 * var(--tile)) 0;
}

.location-box .location-item .info{
  display: inline-block;
    width: calc(550 * var(--tile));
    vertical-align: top;
    padding-top: calc(15 * var(--tile));
}
.location-box .location-item .info .name{
  line-height: 1;
  font-weight: 700;
  color: #2D62AD;
  font-size: calc(26 * var(--tile));
}
.location-box .location-item .info .address{
  line-height: 1.3;
  font-weight: 400;
  color: #2D62AD;
  padding-top: calc(10 * var(--tile));
}
.location-list::-webkit-scrollbar{
  width: 12px;
  border-radius: 10px;
  background-color: #dce8f7;
}
.location-list::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #CEDBEC;
}

.location-list::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #dce8f7;
}
#ngoinhadinhduong{
	position: absolute;
    top: calc(1250 * var(--tile));
	left: 0;
}

.section5 .btn1{
 width: calc(370 * var(--tile));
    position: absolute;
    bottom: calc(155 * var(--tile));
    left: 50%;
    cursor: pointer;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.section5 .note{
  
    position: absolute;
    bottom: calc(100 * var(--tile));
    right: calc(20 * var(--tile));
    font-size: calc(28 * var(--tile));
    color: #0074ba;
}

.section5 .earth2{
    position: absolute;
    top: calc(300 * var(--tile));
    left: calc(-80 * var(--tile));
    width: calc(200 * var( --tile));
    animation:moveupdown 7s  0s both alternate infinite;
    -webkit-animation:moveupdown 7s  0s both alternate infinite;
}
.section5 .earth3{
    position: absolute;
    top: calc(700 * var(--tile));
    right: calc(-150 * var( --tile));
    width: calc(350 * var( --tile));
    transform: rotate(-45deg);
    animation: moveupdown 6s 0s both alternate infinite;
    -webkit-animation: moveupdown 6s 0s both alternate infinite;
}
.section5 .star1{
  position: absolute;
    top: calc(50 * var(--tile));
    right: calc(220 * var(--tile));
    width: calc(50 * var( --tile));
    transform: scaleX(1) rotate(35deg);
}
.section5 .star2{
   position: absolute;
    bottom: calc(100 * var(--tile));
    left: calc(100 * var(--tile));
    width: calc(70 * var( --tile));
    transform: rotate(-45deg);
    animation: spin 7s linear infinite;
    -webkit-animation: spin 7s linear infinite;
}
.section5 .star3{
    position: absolute;
    top: calc(50 * var(--tile));
    left: calc(100 * var(--tile));
    width: calc(50 * var( --tile));
}
.section5 .star4{
    position: absolute;
    top: calc(500 * var(--tile));
    right: calc(150 * var(--tile));
    width: calc(70 * var( --tile));
    animation:blend 3s  0s both alternate infinite;
    -webkit-animation:blend 3s  0s both alternate infinite;
}

.section5 .may1{
    position: absolute;
    top: calc(100 * var(--tile));
    /*left: calc(-80 * var(--tile));*/
    right: -201px; 
    width: calc(300 * var( --tile));
    animation:maybay 35s  0s infinite;
    -webkit-animation:maybay 35s  0s infinite;
}

.section5 .may2{
   position: absolute;
    top: calc(800 * var(--tile));
    left: calc(-80 * var(--tile));
    width: calc(250 * var( --tile));
}

.section5 .may3{
  position: absolute;
    top: calc(850 * var(--tile));
    right: calc(-150 * var(--tile));
    width: calc(350 * var( --tile));
}
.section5 .title{
  width: 100%;
    position: absolute;
    top: calc(0 * var(--tile));
    height: calc(150* var(--tile));
    text-align: center;
	
}


.section5 .km1{
  position: absolute;
    top: calc(200  * var(--tile));
    left: calc(240* var(--tile));
    width: calc(340 * var( --tile));

}
.section5 .km2{
  position: absolute;
    top: calc(200  * var(--tile));
    left: calc(750* var(--tile));
    width: calc(350 * var( --tile));
}
.section5 .km3{
  position: absolute;
    top: calc(200  * var(--tile));
    left: calc(1220* var(--tile));
    width: calc(460 * var( --tile));
}


.section5 .km1-1{
  position: absolute;
    top: calc(450 * var(--tile));
    left: calc(100* var(--tile));
    width: calc(640 * var( --tile));

}
.section5 .km2-1{
  position: absolute;
    top: calc(450 * var(--tile));
    left: calc(710* var(--tile));
    width: calc(400 * var( --tile));
}
.section5 .km3-1{
  position: absolute;
    top: calc(550 * var(--tile));
    left: calc(1220* var(--tile));
    width: calc(460 * var( --tile));
}






.section2{
	width: calc(1920 * var(--tile));
    height: calc(1080 * var(--tile));
	top: 50%;
    transform: translateY(-50%);
}
.section5{
	width: calc(1920 * var(--tile));
    height: calc(1080 * var(--tile));
	top: 50%;
    transform: translateY(-50%);
}
.section3{
	width: calc(1920 * var(--tile));
    height: calc(1080 * var(--tile));
	top: 50%;
    transform: translateY(-50%);
}
.section4{
	width: calc(1920 * var(--tile));
    height: calc(1080 * var(--tile));
	top: 50%;
    transform: translateY(-50%);
}
.section1{
	width: calc(1920 * var(--tile));
    height: calc(1080 * var(--tile));
	top: 50%;
    transform: translateY(-50%);
}
.section2-bg{
	background-image: url('../../images/pc/section2/bg2.png');
	background-repeat: no-repeat;
	background-size: cover;
}
.section5-bg{
	background-image: url('../../images/pc/section5/bg1.png');
	background-repeat: no-repeat;
	background-size: cover;
}
.section3-bg{
	background-image: url('../../images/pc/section5/bg1.png');
	background-repeat: no-repeat;
	background-size: cover;
}
.section4-bg{
	background-image: url('../../images/pc/section5/bg1.png');
	background-repeat: no-repeat;
	background-size: cover;
}

.section1-bg{
	background-image: url('../../images/pc/section1/bg1.png');
	background-repeat: no-repeat;
	background-size: cover;
}

.nav-link{
	/*background-image: 
    linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet, red); 
  -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;  
  animation: rainbow-animation 1500s linear infinite;*/
  animation: color-change 4s infinite;
}

@keyframes color-change {
  0% { color: #006E43; }
  25% { color: #00AEEF; }
  50% { color: #EFB600; }
  75% { color: #0058AF; }
  100% { color: #006E43; }
}


@keyframes rainbow-animation {
    to {
        background-position: 4500vh;
    }
}
.mainview {
    overflow: hidden;
}