/*
 * Theme Name: vjwebsite_2023
 * Theme URI: https://vietjet.net
 * Version: 2.0
 * Author: Duc Pham
 * Tags: ve may bay gia re, ve may bay khuyen mai
 * Textdomain: https://vietjet.net
 */
:root {
  --main-color: #438bf1; 
  --main-button-color: linear-gradient(26.73deg, #F9A51A 13.7%, #FBB612 29.8%, #FFDD00 66.81%);
  --title-bg-color: linear-gradient(to right, #fcb045, #C779D0, #4BC0C8);
  --black-color: #000;
  --white-color: #fff;
  --green-color: #00917c;
  --blue-color: #1e78fd;
  --red-color: #FF1E00;
  --orange-color: #f3a46b;
  --yellow-color: #ffd205;
  --purple-color: #ba71da;
  --saphire-color: #0F52BA;
  --succsess-color: #28a745;
  --disabled-color: #e9ecef;
  --text-color: #213343;
  --border-color: #dadce0;
  --title-color: #1a202c;
  --subheading-color: #4a5568;
  --bgsection-color: #fff;
  --bgdecs-color: #f3f7fe;
  --bgheading-color: #222;
  --bgsection-footer: #f7fafc;
  --border-radius: 5px;
  --box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

/* ========== RESET ========== */
*,h1,h2,h3,h4,h5,h6,p{margin:0}*,ol,ul{padding:0}ol,ul{list-style:none;margin-bottom:0}a{text-decoration:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}@font-face{font-family:Mt;src:url(fonts/Mt/Mt-Regular.otf);font-display:swap}@font-face{font-family:Mt-SemiBold;src:url(fonts/Mt/Mt-SemiBold.otf);font-display:swap}@font-face{font-family:Mt-Bold;src:url(fonts/Mt/Mt-Bold.otf);font-display:swap}*{box-sizing:inherit}html{font-size:62.5%;line-height:1.6rem;box-sizing:border-box;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}body{font-family:Mt,-apple-system,BlinkMacSystemFont,sans-serif!important;overflow-x:hidden}

.position-relative {position: relative !important}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar,
.popup__wrap::-webkit-scrollbar {
  width: 1rem;
  background-color: hsl(190, 12%, 90%);
}
::-webkit-scrollbar-thumb, select::-webkit-scrollbar-thumb, .popup__wrap::-webkit-scrollbar-thumb {background-color: hsl(190, 12%, 75%);}
::-webkit-scrollbar-thumb:hover, select::-webkit-scrollbar-thumb:hover, .popup__wrap::-webkit-scrollbar-thumb:hover {background-color: hsl(190, 8%, 60%);}
select::-webkit-scrollbar {
  width: 0.7rem;
  background-color: hsl(190, 12%, 90%);
}

/* ========== AMINATION ========== */
@keyframes line-animation{0%{width:0;opacity:1}99%{width:100%;opacity:1}100%{width:100%;opacity:0}}@keyframes open-animation{0%{height:0;top:50%}100%{height:100vh;top:0}}@keyframes fade{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes growth{from{transform:scale(var(--growth-from))}to{transform:scale(var(--growth-to))}}.rotate-90{transform:rotate(90deg)}.menu-swiper-mobile{display:none}

/* ========== BUTTON STYLE ========== */
.btn {
  min-width: 124px;
  text-decoration: none;
  border: none;
  border-radius: 0.375rem;
  font-size: 1.5rem;
  padding: 12px 8px;
  outline: none;
  cursor: pointer;
  color: var(--text-color);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  line-height: 1.6rem;
}
.text-white {color: var(--white-color);}

/* ========== SUPPORT ONLINE ========== */
.btn-support {
  position: fixed;
  cursor: pointer;
  z-index: 990;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  transition: visibility .5s;
  right: 15px;
  bottom: 40px;
  background-color: transparent;
  width: 60px;
  height: 60px
}
.btn-support.btn-tele-support {
  left: 15px;
  right: unset;
}
.btn-zalo-circle {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 60px;
  height: 60px;
  border-radius: 100%;
  border: 2px solid #2962ff;
  -webkit-animation: btn-zalo-circle-animation 1.2s ease-in-out infinite;
  animation: btn-zalo-circle-animation 1.2s ease-in-out infinite;
  transition: all .5s;
  transform-origin: 50% 50%;
  opacity: .5
}
.btn-zalo-circle-fill {
  width: 50px;
  height: 50px;
  top: 5px;
  left: 5px;
  position: absolute;
  border-radius: 100%;
  border: 2px solid transparent;
  opacity: .1;
  -webkit-animation: btn-zalo-circle-fill-animation 2.3s ease-in-out infinite;
  animation: btn-zalo-circle-fill-animation 2.3s ease-in-out infinite;
  transition: all .5s;
  transform-origin: 50% 50%;
  background-color: #61c5ff;
  opacity: .75 !important
}
.btn-img-circle {
  width: 30px;
  height: 30px;
  top: 15px;
  left: 15px;
  background-size: 25px;
  position: absolute;
  background-repeat: no-repeat;
  background-position: 50%;
  border-radius: 100%;
  border: 2px solid transparent;
  opacity: 1;
  -webkit-animation: btn-zalo-img-circle-animation 1s ease-in-out infinite;
  animation: btn-zalo-img-circle-animation 1s ease-in-out infinite;
  transform-origin: 50% 50%;
}
.btn-img-circle.zalo-img-circle {
  background-color: #2962ff;
  background-size: 20px;
}
.btn-img-circle.telegram-img-circle {background-color: #41b3e0;}
@-webkit-keyframes btn-zalo-circle-animation{0%{transform:rotate(0) scale(.5) skew(1deg);opacity:.1}30%{transform:rotate(0) scale(.7) skew(1deg);opacity:.5}to{transform:rotate(0) scale(1) skew(1deg);opacity:.1}}@keyframes btn-zalo-circle-animation{0%{transform:rotate(0) scale(.5) skew(1deg);opacity:.1}30%{transform:rotate(0) scale(.7) skew(1deg);opacity:.5}to{transform:rotate(0) scale(1) skew(1deg);opacity:.1}}@-webkit-keyframes btn-zalo-img-circle-animation{0%,50%,to{-webkit-transform:rotate(0) scale(1) skew(1deg)}10%,30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}20%,40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}}@keyframes btn-zalo-img-circle-animation{0%,50%,to{-webkit-transform:rotate(0) scale(1) skew(1deg)}10%,30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}20%,40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}}@-webkit-keyframes btn-zalo-circle-fill-animation{0%,to{transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{transform:rotate(0) scale(1) skew(1deg);opacity:.2}}@keyframes btn-zalo-circle-fill-animation{0%,to{transform:rotate(0) scale(.7) skew(1deg);opacity:.2}50%{transform:rotate(0) scale(1) skew(1deg);opacity:.2}}
.zalo-chat-widget {
  bottom: 30px !important;
  right: 15px !important;
}

.hidden {display: none;}
.align-items-center {align-items: center !important;}
.hide {display: none !important;}
.show {display: flex !important;}

.form-control:disabled {
  background-color: transparent;
  cursor: default !important;
}
.form-group { cursor: pointer;}

/* ========== HEADER ========== */
.header {
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: 0.5s ease;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 10px 0px, rgba(0, 0, 0, 0.01) 0px 2px 4px -1px;
}
.header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header__logo {
  display: flex;
  align-items: center;
  padding: 0 15px;
  padding-top: 15px;
  padding-bottom: 15px;
}
.header__logo img {width: 200px;}
.header__logo--link {
  cursor: pointer;
  display: flex;
  color: #de3035;
  font-size: 18px;
  font-weight: 600;
}
.header__logo--link h1.h1-title {
  font-weight: 600;
  font-size: 2.0rem;
}
.header__logo--link span.span-title {
  font-weight: 600;
  font-size: 2.0rem;
}
.header__logo--link:hover {
  color: #de3035;
}
.header-nav {
  display: flex;
  align-items: center;
  padding: 0 15px;
  list-style: none;
  flex: 1;
}
.nav__item {
  position: relative;
  padding: 15px 0px;
  cursor: pointer;
  margin: 0 15px;
}
.nav__item:hover::before {width: 100%;}
.nav__item--link {
  display: block;
  color: var(--black-color);
  font-size: 15px;
  line-height: 18px;
  text-decoration: none;
  letter-spacing: 1px;
  font-weight: 600;
}
.boxes {min-width: 10%;}
.boxes a {display: none;}
.header-phone {
  color: var(--white-color);
  display: flex;
  font-size: 17px;
  margin: 0;
  justify-content: center;
  align-items: center;
}
.header-phone:hover {color: var(--black-color);}
.phone-number {font-weight: 600; font-size: 18px;}

/* ========== SEARCH ========== */
.search__section {
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.form-control {
  padding: 10px;
  font-size: 14px;
  color: var(--text-color);
  appearance: auto;
  border-radius: 10px;
}

.search-form__content__right {
	display: flex;
	flex-direction: column;
	justify-content: flex-end
}
.search-form__content__cheapest {
	padding: 0 0 15px;
	height: auto;
}
.search-form__content__cheapest {
	padding: 12px;
	text-align: center;
	font-size: 14px;
	color: var(--text-color);
	display: flex;
	justify-content: center;
	align-items: center;
}
.search-form__content__cheapest label {margin-right: 5px;}
.input-switch .switch-label {
	position: relative;
	display: inline-block;
	width: 39px;
	height: 24px;
	margin-bottom: 0;
}
.input-switch .switch-label input {
	opacity: 0;
	width: 0;
	height: 0;
}
.input-switch .slider.round {
	border-radius: 34px;
}
.input-switch .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #c5c5c5;
	-webkit-transition: .4s;
	transition: .4s;
}
.input-switch .slider.round:before {border-radius: 50%;}
.input-switch .slider:before {
	position: absolute;
	content: "";
	height: 22px;
	width: 22px;
	left: 1px;
	bottom: 1px;
	background-color: #fff;
	-webkit-transition: .4s;
	transition: .4s;
}
.input-switch input:checked+.slider {background-color: #fa8401}
.input-switch input:focus+.slider {box-shadow: 0 0 1px #fa8401}
.input-switch input:checked+.slider:before {
	-webkit-transform: translateX(15px);
	-ms-transform: translateX(15px);
	transform: translateX(15px);
	background-color: #fff
}
.input-switch .slider.round {
	border-radius: 34px
}
.input-switch .slider.round:before {border-radius: 50%}

/* ========== LIST DEP & DES ========== */
#select-dep, #select-des {display: none;}
.grid {list-style: none;}
.gc {
  box-sizing: border-box;
  display: inline-block;
  margin-right: -0.25em;
  min-height: 1px;
  vertical-align: top;
}
.gc--1-of-4 {width: 25%;}
.gc--3-of-4 {width: 75%;}
.list__dep--wrap, .list__des--wrap {
  position: absolute;
  top: 75%;
  min-width: 80%;
  padding: 15px;
  border-radius: 8px;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  z-index: 10;
}
#listDes .list__des--wrap {left: 15%;}
.list__dep--wrap .menu div,.list__des--wrap .menu div {
  padding: 12px 20px 12px 40px;
  margin-bottom: 10px;
  color: var(--title-color);
  background: var(--white-color);
  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em,rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  font-weight: 700;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
  text-transform: uppercase;
  font-size: 14px;
}
.menu div:last-child {margin-bottom: 0px;}
.list__dep--wrap .menu div:hover, .list__des--wrap .menu div:hover {box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px,rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;}
.list__dep--wrap .menu div span.light,.list__des--wrap .menu div span.light {
  height: 10px;
  width: 10px;
  position: absolute;
  top: 17px;
  left: 15px;
  background-color: var(--text-color);
  border-radius: 100%;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.list__dep--wrap .menu div.active span.light, .list__des--wrap .menu div.active span.light {
  background-color: var(--saphire-color);
  left: 0;
  height: 100%;
  width: 3px;
  top: 0;
  border-radius: 0;
}
.list__dep--wrap .menu div.active, .list__des--wrap .menu div.active {
  color: var(--saphire-color);
  padding: 12px 20px;
}
ul.list-area {
  position: relative;
  height: 0px;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
ul.list-area li {
  opacity: 0;
  list-style: none;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
  transform: translateX(50px);
  position: absolute;
}
ul.list-area li.active {
  transition-delay: 0.3s;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
}
.list-area__item {
  display: flex;
  padding: 15px 10px 10px 30px;
}
.list-destination {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}
.destination-item {
  cursor: pointer;
  color: var(--black-color);
  background-color: #EDF2F7;
  border-radius: 8px;
  padding: 6px 8px;
  width: fit-content;
}
.destination-item:hover {color: var(--saphire-color);}
.destination-title {
  font-size: 14px;
  text-transform: capitalize;
}
input#search_dep,input#search_des {
  width: 100%;
  padding: 8px 13px;
  font-size: 14px;
  margin: 0 10px;
  outline: none;
  border: 1px solid var(--border-color);
  border-radius: 0.375rem;
}

.result_des--wrap, .result_dep--wrap {
  position: absolute;
  top: 60px;
  z-index: 101;
  background: var(--white-color);
  left: 26%;
  width: 70%;
  margin: 0 20px;
  max-height: 270px !important;
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
  padding: 10px;
  border-radius: 8px;
  display: none;
}
.result_des--wrap.active,.result_dep--wrap.active {
  display: block;
}
ul#result_dep, ul#result_des {
  color: var(--title-color);
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: flex-start;
  height: auto !important;
}
ul#result_dep li, ul#result_des li {
  padding: 10px 8px;
  font-size: 12px;
  color: var(--text-color);
  cursor: pointer;
  width: fit-content;
  margin-bottom: 4px;
}
ul#result_dep li:last-child, ul#result_des li:last-child {margin-bottom: 0px;}
ul#result_dep li:hover, ul#result_des li:hover {
  background: #EDF2F7;
  border-radius: 8px;
}
ul#result_dep .value-dep-location .value-dep, ul#result_des .value-des-location .value-des {
  font-size: 14px;
  font-family: Mt;
  color: var(--title-color);
  line-height: 25px;
  font-weight: 600;
}
ul#result_dep .value-dep-location .value-dep-country, ul#result_des .value-des-location .value-des-country {
  font-size: 13px;
  font-family: Mt;
  color: rgba(0, 0, 0, 0.7);
  line-height: 14px;
}

/* ========== PASSENGER ========== */
.group-passenger {
  position: relative;
  height: 100%;
}
.dropdown-box-inner {
  position: absolute;
  left: 0;
  background: #fff;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  width: 200%;
  left: 0;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  z-index: 10;
}
.row-adult, .row-child, .row-infant {
  align-items: center;
  padding: 0 0 8px;
}
.row-child {padding: 8px 0;}
.row-infant {
  border-bottom: none;
  padding: 8px 0 0;
}
.row-confirm {display: none;}
.title-people {
  color: #000;
  font-size: 14px;
  font-weight: 400;
  text-transform: capitalize;
}
.btn-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn-value, input.input-value {
  color: #000;
  font-weight: 600;
  width: 24px;
  display: flex;
  font-size: 16px;
  line-height: 19px;
  justify-content: center;
  outline: none;
  border: none;
  text-align: center;
}

/* Begin search */
.section__search--wrap {width: 100%;}
.booking-form {
  position: relative;
  background: var(--white-color);
  border-radius: 8px;
  box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
.booking-form .form-btn {padding: 15px 5px;}
.booking-form .submit-btn {
  display: block;
  border: none;
  border-radius: 24px;
  box-shadow: 0 1px 3px 0 rgb(60 64 67 / 30%), 0 4px 8px 3px rgb(60 64 67 / 15%);
  background: var(--main-button-color);
  color: #333333;
  text-transform: capitalize;
  margin: 0 auto;
}
.booking-form .submit-btn:hover {
  box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
  background-color: #d5d5d5;
}
.booking-form .submit-btn:active {
  box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
  background-color: #d5d5d5;
  color: #fdfeff;
  transition: border 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
  --mdc-ripple-fg-size: 75px;
  --mdc-ripple-fg-scale: 1.89628;
  --mdc-ripple-fg-translate-start: 12.7455px, -6.75775px;
  --mdc-ripple-fg-translate-end: 25.5125px, -17.5px;
}
.booking-form .submit-btn .icon-search {margin-right: 5px;}
.booking-form .submit-btn .icon-search svg {
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: 3px;
}
.booking-form .form-search-label {
  color: var(--saphire-color);
  display: block;
  font-weight: 600;
  height: 25px;
  line-height: 25px;
  font-size: 14px;
}
.booking-form .form-group {
  position: relative;
  padding: 15px;
  margin-bottom: 0px;
}
.booking-form .form-control, .count-passenger {
  background-color: transparent;
  border-radius: 0px;
  border: none;
  height: 30px;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 14px;
  color: var(--text-color);
  font-weight: 400;
  padding: 0;
  cursor: pointer;
}
.booking-form .form-control::-webkit-input-placeholder {color: #818390;}
.booking-form .form-control:-ms-input-placeholder {color: #818390;}
.booking-form .form-control::placeholder {color: #818390;}
.booking-form input[type="date"].form-control:invalid {color: #818390;}
#input_from, #input_to {cursor: pointer;}
.booking-form div.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.booking-form div.form-control+.select-arrow {
  position: absolute;
  right: 0px;
  bottom: -25px;
  width: 32px;
  line-height: 32px;
  height: 32px;
  text-align: center;
  pointer-events: none;
  color: var(--black-color);
  font-size: 14px;
}
.booking-form div.form-control+.select-arrow:after {
  content: "\279C";
  display: block;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.switch-show-hide {display: none;}
input.input-departure, input.input-return {text-transform: capitalize;}

/* ========== LOADING WAITING ========== */
.preloader{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1100;background:rgba(0,0,0,.25);display:none}.preloader .loader{display:flex;align-items:center;position:relative;top:50%;left:50%;transform:translate(0,-50%)}.preloader .loader .bar{display:inline-block;width:3px;height:30px;background-color:#fff;border-radius:10px;animation:1s linear infinite scale-up4}.preloader .loader .bar:nth-child(2){height:45px;margin:0 5px;animation-delay:.25s}.preloader .loader .bar:nth-child(3){animation-delay:.5s}@keyframes scale-up4{20%{background-color:var(--white-color);transform:scaleY(1.5)}40%{transform:scaleY(1)}}

/* BODY */
.body-overflow-y-hidden {overflow-y: hidden;}
img.lazyload.loaded {opacity: 1}