@charset "utf-8";



@font-face {
    font-family: "ExemplarPro";
    font-weight: 300;
    font-style: normal;
    src: url("../fonts/ExemplarPro-Light.otf");
}
@font-face {
    font-family: "ExemplarPro";
    font-weight: 300;
    font-style: italic;
    src: url("../fonts/ExemplarPro-LightItalic.otf");
}
@font-face {
    font-family: "ExemplarPro";
    font-weight: 400;
    font-style: normal;
    src: url("../fonts/ExemplarPro-Regular.otf");
}

@font-face {
    font-family: "ExemplarPro";
    font-weight: 700;
    font-style: normal;
    src: url("../fonts/ExemplarPro-Bold.otf");
}


:root {
  --d-transition: all 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  --d-gradient: linear-gradient(90deg, rgba(227,85,12,1) 0%, rgba(253,135,17,1) 100%);
}



body { font-family: 'Roboto', sans-serif;  margin: 0px; padding: 0px; font-size: 16px; line-height: 1.4; overflow-x: hidden; font-weight: 400; color: #000;  }
/*----------------------
1.1. Typography
------------------------------*/
h1, h2, h3, h4, h5, h6 { font-family: 'ExemplarPro', sans-serif; color: #333; margin: 0 auto 20px; font-weight: 700; line-height: 1.4; }
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 24px; margin-bottom: 15px;}
h4 { font-size: 18px; margin-bottom: 5px; }
h5 { font-size: 16px; margin-bottom: 15px; }
h6 { font-size: 14px; margin-bottom: 10px; }
p { /*font-size: 15px;
margin-bottom: 20px;*/ }
b, strong{font-weight: 700;}
a {  transition: var(--d-transition); text-decoration: none; color: #333; }
a:hover, a:focus { text-decoration: none; outline: none; color: #E87929; }
ul, ol { margin: 0 auto 20px; }
ul li, ol li { margin: 0 auto 10px; }
blockquote { background: #f5f5f5; }
.white-text,
.white-text h1,
.white-text h2,
.white-text h3,
.white-text h4,
.white-text h5,
.white-text h6,
.white-text p,
.white-text.section-header p { color: #fff; }
.uppercase { text-trans: uppercase; }
.underline { text-decoration: underline; }
.divider { border-bottom: 1px solid #dcd9d9; clear: both; margin: 40px auto; }
img { max-width: 100%; width: auto; height: auto; }
.gutter-10 { margin-left: -10px; margin-right: -10px; }
.gutter-10 > [class*='col-'] { padding-right: 10px; padding-left: 10px; }
.gutter-5 { margin-left: -5px; margin-right: -5px; }
.gutter-5 > [class*='col-'] { padding-right: 5px; padding-left: 5px; }
.gutter-2 { margin-left: -2px; margin-right: -2px; }
.gutter-2 > [class*='col-'] { padding-right: 2px; padding-left: 2px; }
.gutter-0 { margin-left: 0px; margin-right: 0px; }
.gutter-0 > [class*='col-'] { padding-right: 0px; padding-left: 0px; }
.relative{position: relative;}
.absolute{position: absolute;}

.h-font{font-family: 'ExemplarPro';}
svg:focus{    outline: none;}

@media (max-width:1599px) {
    body{font-size: 14px;}
    h1 { font-size: 36px; }
    h2 { font-size: 27px; }
    h3 { font-size: 20px; margin-bottom: 10px;}
    h4 { font-size: 16px; margin-bottom: 10px; }
    h5 { font-size: 14px; margin-bottom: 5px; }
    h6 { font-size: 12px; margin-bottom: 5px; }
}
@media (max-width:1399px) {
     h1 { font-size: 32px; }
    h2 { font-size: 24px; }
    h3 { font-size: 18px; margin-bottom: 10px;}
    h4 { font-size: 15px; margin-bottom: 5px; }
    h5 { font-size: 14px; margin-bottom: 5px; }
    h6 { font-size: 12px; margin-bottom: 5px; }
}

@media (max-width:767px) {
    body{font-size: 12px;}
    h1 { font-size: 32px; }
    h2 { font-size: 24px; }
    h3 { font-size: 16px; margin-bottom: 5px;}
    h4 { font-size: 14px; margin-bottom: 5px; }
    h5 { font-size: 12px; margin-bottom: 5px; }
    h6 { font-size: 10px; margin-bottom: 5px; }
}



/* =WordPress Core
-------------------------------------------------------------- */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter,
div.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }
.aligncenter { display: block; margin: 5px auto 5px auto; }
a img.alignright { float: right; margin: 5px 0 20px 20px; }
a img.alignnone { margin: 5px 20px 20px 0; }
a img.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { background: #fff; border: 1px solid #f0f0f0; max-width: 96%; /* Image does not overflow the content area */ padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignnone { margin: 5px 20px 20px 0; }
.wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px; }
/*End core*/
.editor-content img { max-width: 100%; height: auto; }
.editor-content img.media-object { max-width: none; }
.editor-content h4 { font-size: 16px; }
.editor-content h3 { font-size: 18px; }
.editor-content h2 { font-size: 20px; }
.editor-content h2, .editor-content h3, .editor-content h4 { font-weight: 700; color: #602314; }
/*-----------------
1.2. Button
-------------------------*/
.btn { border-radius: 10px; background: #E87929; border: medium none; color: #fff; font-size: 16px; height: auto; margin: auto; padding: 10px 30px; 
    transition: var(--d-transition); transition-duration: 0.3s;
    text-transform: uppercase; font-weight: 700;
}
.btn .fa { font-size: 22px; margin-left: 5px; vertical-align: middle; }
.btn.btn-lg { font-size: 24px; line-height: 30px; padding: 22px 50px; }
.btn.btn-sm { font-size: 14px; padding: 8px 25px; }
.btn:hover, .btn:focus { color: #ffffff; outline: none; background: #000000; }
.btn-link { font-weight: 800; font-size: 17px; color: #602314; }
.btn.outline-btn { background: none; color: #3673a2; border: #602314 solid 1px; padding: 5px 25px 5px 10px; font-weight: 400; position: relative;}
.btn.outline-btn:after{position: absolute; right: 6px; top: 12px; content: "\f103"; font: normal normal normal 14px/1 FontAwesome;}
.btn.outline-btn:hover { background: #602314; color: #fff; }
.btn-transparent { background: transparent; border: solid 1px #602314; color: #602314; font-size: 14px; }
.btn-transparent:hover { background: #000000; border: solid 1px #000000; }
@media (max-width:1599px) {
    .btn{font-size: 14px;padding: 6px 20px;}
}
/*-------------------------
1.3. dark-overlay
---------------------------------*/
.div_zindex { position: relative; z-index: 1; }
.zindex-9{z-index: 1061;}
.zindex-10{z-index: 1063;}
.div_zindex > * { position: relative; z-index: 1; }
.dark-overlay { background: rgba(0, 0, 0, 0.85) none repeat scroll 0 0; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }
.color-overlay { background: rgba(205, 56, 96, 0.9) none repeat scroll 0 0; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; }

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before, .bs-tooltip-bottom .tooltip-arrow::before{border-bottom-color: #fff;}

.tooltip .tooltip-inner{background: #fff; color: #E87929;}

/*-------------------------------------
1.4. Space margins and padding
------------------------------------------------*/
.padding_none { padding: 0px; }
.padding_top_20 { padding-top: 20px; }
.padding_50px { padding: 50px 0; }
.padding_4x4_30 { padding: 30px; }
.padding_4x4_40 { padding: 40px; }
.padding_right { padding-right: 60px; }
.padding_left { padding-left: 60px; }
.space-20 { width: 100%; height: 20px; clear: both; }
.space-30 { width: 100%; height: 30px; clear: both; }
.space-40 { width: 100%; height: 40px; clear: both; }
.space-60 { width: 100%; height: 60px; clear: both; }
.space-80 { height: 80px; width: 100%; }
.margin-btm-20 { margin-bottom: 20px; clear: both; }
.margin-top-20 { margin-top: 20px; clear: both; }
.margin-top-40 { margin-top: 40px; clear: both; }
.margin-btm-40 { margin-bottom: 40px; clear: both; }
.margin-top-60 { margin-top: 60px; clear: both; }
.margin-btm-60 { margin-bottom: 60px; clear: both; }
.margin-none { margin: 0px; }
.margin-top-15 { margin-top: 15px; }
.d-inline-block { display: inline-block; }
.section-cover,.cover{background-size: cover; background-position: center center; background-repeat: no-repeat;}
/*-----------------
1.5. Form
---------------------------*/
.form-group { margin-bottom: 15px; position: relative; }
.form-group.has-error .help-block{color: #ffb291; font-size: 13px; text-align: center;    display: block;}
.form-label { color: #111111; font-size: 14px; font-weight: 400; margin: 0 auto 8px; }

.form-control { background: #fff none repeat scroll 0 0; border: 0 none; border-radius: 0px; border: #CCCCCC solid 1px; box-shadow: none; color: #CCCCCC; font-size: 16px; height: 50px; line-height: 30px; padding: 0 15px; }
select.form-control{border-radius: 0px; background: #0f5d69; color: #fff;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position-x: 100%;
  background-position-y: 10px;
  padding-right: 2rem;
   font-family: 'Belleza', sans-serif;
    font-size: 20px;
}
select.form-control:focus{ background: #0f5d69; color: #fff;}
textarea.form-control { padding: 15px 20px; }
.form-control:hover { box-shadow: none; outline: none; }
.form-control:focus { box-shadow: none; border-color: #0f5d69; outline: none; }
.select { position: relative; }
.select select { appearance: none; -moz-appearance: none; -o-appearance: none; -webkit-appearance: none; -ms-appearance: none; }
.select::after { color: #878787; content: ""; cursor: pointer; font-family: fontawesome; font-size: 15px; padding: 12px 0; pointer-events: none; position: absolute; right: 15px; top: 0; }
.form-control option { padding: 10px; }
.control-label { color: #555; font-size: 15px; font-weight: 700; }
.radio label, .checkbox label { cursor: pointer; font-size: 14px; font-weight: 400; padding-left: 26px; position: relative; }
.radio input[type=radio],
.checkbox input[type=checkbox] { display: none; }
.radio label:before { background-color: transparent; border-style: solid; border-width: 1px; border-radius: 50%; content: ""; display: inline-block; height: 15px; left: 0; top: 4px; position: absolute; width: 15px; }
.checkbox label::before { background-color: rgba(0, 0, 0, 0); border: 1px solid #111111; content: ""; display: inline-block; height: 16px; left: 0; position: absolute; top: 4px; width: 16px; }
.radio input[type=radio]:checked + label:before { content: "\2022"; font-size: 15px; text-align: center; line-height: 11px; }
.checkbox input[type=checkbox]:checked + label:before { content: "\2713"; font-size: 12px; text-align: center; line-height: 14px; }
.black_input .form-control { background: #222; border-radius: 3px; color: #fff; border: #222 solid 1px; font-size: 17px; }
.checkbox, .radio { padding-top: 5px; }
/*-----------------
1.6. Table
---------------------------*/
table { margin: 0 0 30px; width: 100%; }
table th, table td { border: 1px solid #cccccc; padding: 15px; padding: 18px; }
table th img, table td img { max-width: 100%; }
table thead { background: #eee; }
table thead th, table thead td { text-transform: uppercase; font-weight: 900; color: #111; }
/*-----------------
1.7. Accordion
---------------------------*/
.panel-group .panel { background: #fff; border: 0 none; border-radius: 0; box-shadow: none; margin-bottom: 25px; }
.panel-title { color: #fff; font-size: 24px; margin-bottom: 0; margin-top: 0; }
.panel-title a { display: block; padding: 10px 25px; position: relative; background: #cca759; font-size: 18px;}
.panel-title a.collapsed {  }
.panel-title a .question { width: 85px; height: 100%; content: ""; color: #fff; font-size: 39px; line-height: 1; text-align: center; position: absolute; top: 0px; left: 0px; background: #602314; }
.panel-title a.collapsed .question { background: #252930; transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; }
.panel-title a .question span { position: absolute; top: 45%; left: 0px; right: 0px; transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-transform: translateY(-50%); }
.panel-default > .panel-heading { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: 0px; border-radius: 0; box-shadow: none; color: #333333; padding: 0; }
.panel-heading:hover .panel-title a .question { background: #602314; }
.panel-heading:hover .panel-title a { border-color: #602314; }
.panel-body { border: 0px solid rgba(255, 255, 255, 0.2); margin-top: -1px; padding: 15px 0px; }
.panel-body p { font-size: 17px; line-height: 30px; font-weight: 400; }
/*-----------------------------------------------------------
1.8. Section-background-color & sectino-heading
-------------------------------------------------------------------*/
section { position: relative; }
.section-title{font-size: 24px;}
.secondary-bg { background: #f3e5d0; color: #8d632b; }
.primary-bg { background: #8d632b; color: #fff; }
.gray_bg { background: #f5f5f5; }
.gray_bg_2 { background: #e6e6e6; }
.section-padding { padding: 45px 0; }
.section-header { margin: 0 auto; max-width: 950px; padding-bottom: 30px; }
.section-header h2 { margin: 0 auto; font-size: 32px; font-weight: 400; }
.section-header p { color: #777; font-size: 17px; margin: 22px auto 0; }
h1.page-title { font-size: 20px; }
.primary-bg .section-title{color: #fff;}
.gray_bg .section-title{color: #602314;}



/*--------------------
1.9. Tabs 
------------------------------*/
.nav.nav-tabs { border: medium none; }
.nav-tabs > li a { padding: 0px 0px 12px; border-radius: 0; color: #caa557; font-size: 18px; font-weight: 400; margin-right: 5px; text-align: center; 
  border:0px; border-bottom: solid 2px #faf6ee;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover,
.nav-tabs > li a:hover,
.nav-tabs > li a:focus { color: #602314; border:0px; border-bottom: solid 2px #602314; background: transparent;}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover{font-weight: 700; border-bottom: solid 4px #602314;}
.nav-tabs > li { margin-bottom: 0; margin-right: 50px;}
.tab-content {margin-top: 25px; padding: 50px 0px 30px;}

.nicescroll-rails{width: 2px !important; background: #dbc18c;}
.nicescroll-rails .nicescroll-cursors{right: -8px;}

.zoom-in{display: block;}
.zoom-in img{-webkit-transform: scale(1); transform: scale(1);-webkit-transition: .5s ease-in-out; transition: .5s ease-in-out;}
.zoom-in:hover img{-webkit-transform: scale(1.1); transform: scale(1.1);}

/*
.scroll-downs .mousey {
  width: 10px;
  padding: 5px 6px;
  height: 29px;
  border: 3px solid #fff;
  border-radius: 25px;
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
}
.scroll-downs .scroller {
  border: 2px solid #fff;margin-left: 2.5px;
  width: 3px;
  height: 8px;
  border-radius: 40%;
  -webkit-animation-name: scroll;
          animation-name: scroll;
  -webkit-animation-duration: 2.2s;
          animation-duration: 2.2s;
  -webkit-animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
          animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}
.scroll-downs .icon-down {
  text-align: center;
  -webkit-animation-name: scroll;
          animation-name: scroll;
  -webkit-animation-duration: 2.2s;
          animation-duration: 2.2s;
  -webkit-animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
          animation-timing-function: cubic-bezier(0.15, 0.41, 0.69, 0.94);
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  width: 100%;
}*/
.scroll-downs{text-align: center;}
.scroll-downs .mouse {
  
}
.scroll-downs object{max-width: 28px;}

.scroll-downs label{ font-family: 'ExemplarPro';font-weight: 400; font-size: 16px; color: #fff;display: block;}

/*--------------------------------------------
1.10. parallex-background
---------------------------------------------------*/
.parallex-bg { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; }
/*------------------------
1.11. Modal
--------------------------------*/
.modal-content{background: #fff; border-radius: 10px; }
.modal-backdrop{background-color: #3B3C43;}
.modal-backdrop.show{opacity: 0.7;}
.modal-header{background: transparent; color: #3B3C43; 
    padding: 45px 20px 12px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    position: relative;
    border: 0;
}
.modal-header h5{color: rgba(59, 60, 67, 0.7); font-size: 25px; font-weight: 700; text-transform: none;}
.modal-header .btn-close{color: #3B3C43; opacity: 1; position: absolute; right: 20px; top: 15px; padding: 0; 
  background: transparent;
    margin: 0px;
    border: 0;
    width: 20px; height: 20px;
}
.modal-header .btn-close:before{
  content: ''; position: absolute; color: #fff; left: 0; top: 0; width: 100%; height: 100%;
  background: url('../images/icon-close.svg') no-repeat center center; background-size: contain;
}
.modal-header .btn-close:hover{border: 0;}
.modal-content{}
.modal-body{ padding: 20px 50px 40px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px; 
  font-size: 16px; 
  color: #3B3C43;
}
.modal-content .form{}
.modal-content .form p{font-size: 16px; text-align: center; }
.modal-content .form-control{background: transparent; border: 0px; border-bottom: solid 1px #CCCCCC; border-radius: 0px; text-align: center;
  color: #000; text-transform: none;
}
.modal-content .form-control::placeholder {color: #CCCCCC;  opacity: 1;}
.modal-content .form-control:-ms-input-placeholder {color: #CCCCCC;}
.modal-content .form-control::-ms-input-placeholder {color: #CCCCCC;}
.modal-content select.form-control{    text-align-last: center;}
.modal-content select.form-control option{color: #000;}
.modal-content .btn{text-transform: uppercase; min-width: 200px; padding: 10px 20px;}
.modal-content .form  .form-check{display: inline-block;}
.modal-content .form .form-check-input{margin-top: 0.1em;}
.modal-content .form .hotline{color: #D99F40; font-size: 18px;}
.modal-content .form .form-group-text small{font-size: 12px; }


.bootbox .brochure{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.bootbox .brochure img{width: 35%; margin-bottom: 30px;}

.fancy-modal .fancybox-bg{background-color: transparent;}
.fancy-modal.fancybox-is-open .fancybox-bg{opacity: 0.85;}

@media (max-width:1599px) {
    
}
@media (max-width:767px) {
    .modal-body{padding: 7px 7px 20px;}
    .modal-content .btn{min-width: 170px;}
    .modal-content .form .form-group-text small{font-size: 10px;}
    .bootbox .brochure{padding: 0px 15px;}
}


/*================
2. Header
===========================*/
body,html{ height: 100%;}
body{    overflow: hidden;  position: fixed;   width: 100%; }

#element_help{height: 480px; max-height: 80vh;width: 30vw;}
#element_help img{max-height: 100%;}
#element_help object{pointer-events: none;}
#element_help.popup-content{border-radius: 0; border: 0px; padding: 0px; background: transparent;}
#element_help.popup-content .fancybox-close-small{right: 2px; top: 2px; width: 30px; height: 30px;background: transparent;}
#element_help.popup-content .fancybox-close-small:after{top: 0px; right: 0px;background: #E87929; font-weight: 700; color: #fff; border-radius: 0px; }
#element_help.popup-content .fancybox-close-small:hover:after{background: #000; }
#element_help .scroll-downs{margin-bottom: 25px;}
@media (min-width:768px) {
  #element_help .scroll-downs object{
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-name: mousemove;
  }
}

@media (max-width:767px) {
   
}


.modal-fit{
  position: fixed;
    top: 0;
    left: 0;
    z-index: 1030;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
}



/*Loading Overlay*/
.loading-overlay{
    position: fixed;   width: 100%;   height: calc(var(--vh, 1vh) * 100);  left: 0;   top: 0;   overflow: hidden;   z-index: 9;
    background: #fff;
   

}
.loading-overlay .bg{position: absolute; left: 0px;top: 0px; width: 100%; height: 100%; z-index: 2;
   background: url('../images/hinh-nen.jpg') no-repeat center center; background-size:cover;
}

.loading-overlay .content{left: 50%; top: 6%; position: absolute; color: #343741; text-transform: uppercase; 
  z-index:2 ; text-align: center;
  transform: translateX(-50%);
  font-size: 32px;
  width: 100%;
}
.loading-overlay .content .logo{width: 12.34375vw;     min-width: 160px; margin-bottom: 5vh;display: inline-block;}
.loading-overlay .content strong{display: block; font-weight: 700; font-size: 73px; margin-bottom: 20px;
      line-height: 1.2em;
    margin-top: 5px;
}
.loading-overlay .copyright{position: absolute;     z-index: 2; bottom: 0px; left: 0px; text-align: center; padding: 15px; width: 100%;
  color: #fff; 
}

body:not(.ready){overflow: hidden !important; pointer-events: none;}
body.ready .loading-overlay{ transform: translateY(0);  transition:  var(--d-transition);  opacity: 1; cursor: pointer;}
body.done .loading-overlay{
  transition:  var(--d-transition);
  pointer-events: none;  transform: translateY(-100%); 
  transition-duration: 1s;  opacity: 0;
}
body.done .loading-overlay:before,
body.done .loading-overlay:after{height: 0px;}


body.done .loading-overlay svg,
body.done .loading-overlay .svg,
body.done .loading-overlay .bg,
body.done .loading-overlay .content{/*opacity: 0;*/}

.loading-overlay .stroke-line {
    fill-opacity: 0;
    fill: #B1812C;
    stroke: #ffffff;
    stroke-miterlimit: 30;
    stroke-width: 20;
}

.loading-overlay.show .stroke-line,
.loading-overlay.show .stroke-line-2 {fill-opacity: 1;}

.loading-overlay .scroll-downs{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    bottom: 20px;
    /*width: 28px;*/
    z-index: 3;
}

.text-note{position: fixed; bottom: 15px; right: 45px; font-weight: 300;  color: #fff;
    font-family: 'ExemplarPro'; white-space: nowrap;
}
.text-note-wrapper{ z-index: 9;position: absolute;}


body.done .text-note-wrapper{z-index: 8;}
.tour-nav{ position: absolute; bottom: 36px; min-height: 48px; display: flex;    width: 100%; z-index: 9; justify-content: center;
    transform: translateY(100%);
    transition: var(--d-transition);
    visibility: hidden;
}
body.done .tour-nav{visibility: visible;}
.tour-nav .btn-toggler{width: 40px; height: 16px; background:  url('../images/arrow-down.svg') no-repeat center center; background-size: contain; position: absolute; left: 50%;
    margin-left: -20px; bottom: calc(100% - 23px) ; 
    transition: var(--d-transition); z-index: 2; cursor: pointer;
    transform: rotate(180deg);
}
.tour-nav .btn-toggler:hover{}
.tour-nav .swiper-nav-wrapper{flex: 0 0 62vw; width: 62vw; padding: 0px 0px; 
        visibility: hidden;
        opacity: 0;
        transition: var(--d-transition);
        position: relative;
}
.tour-nav .swiper-slide-wrapper{
    padding-left: 30px; padding-right: 30px; position: relative;
}
.tour-nav a{color: #fff; text-transform: uppercase;}
.tour-nav .swiper,
.tour-nav .swiper-thamquan{height: 100%; }
.tour-nav .swiper{}
.tour-nav .swiper-nav-wrapper{}
.tour-nav .swiper-nav-wrapper .swiper .swiper-slide{
    display: inline-block;
    width: auto;  
}


.tour-nav .swiper .item{padding: 0px 13px;}
.tour-nav h4{font-size: 16px; font-weight: 400; margin: 0px; color: #fff; text-align: center;
   white-space: nowrap;
   background: rgba(97, 93, 93, 0.9);
  border-radius: 20px; padding: 5px 25px 3px;
}

.tour-nav .swiper-slide-active h4{background: rgba(232, 121, 41, 0.9);;}

.tour-nav.show{ transform: translateY(0);}
.tour-nav.show .swiper-nav-wrapper{ visibility: visible; opacity: 1;}
.tour-nav.show .btn-toggler{transform: rotate(0deg); bottom: calc(-23px) ; }

.tour-nav .text-note-wrapper{display: none;}
.tour-nav .swiper-horizontal>.swiper-scrollbar{background: rgba(0, 0, 0, 0.4); border-radius: 3px;}
.tour-nav .swiper-scrollbar-drag{background: rgba(204, 204, 204, 0.6); border-radius: 3px;}



.tour-floorplan{
    position: fixed;
    bottom: 36px;
    left: 45px;
    visibility: hidden;
    opacity: 0;
    color: #000;
    z-index: 9;
    display: flex;
    flex-direction: column;
}


.tour-floorplan.show{
    opacity: 1;
    visibility: visible;
}
.tour-floorplan .content{display: none;}
.tour-floorplan.active .content{display: block;}

.btn-tour-floorplan {
  display: flex;
  width: 45px;
  height: 45px;
  background: #fff url(../images/icon-map.svg) no-repeat center center;
  background-size: 70%;
  position: absolute;
  z-index: 2;
  border-radius: 0;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  left: -45px; bottom: 0px;
  cursor: pointer;
}
.tour-floorplan.active .btn-tour-floorplan{background-color: #E87929;
  background-image: url(../images/icon-x.svg);
}

.tour-floorplan .floorplan-wrapper{height: 100%; }
.tour-floorplan .floorplan-wrapper .inner{}
.tour-floorplan .floorplan-wrapper .inner img{width: auto; max-height: 100% ;}
.tour-floorplan .floorplan-wrapper{position: relative; display: none;}
.tour-floorplan .floorplan-wrapper .inner{     display: inline-flex; max-height: 100%;}
.tour-floorplan .floorplan-wrapper.active{display: flex;    justify-content: center;    align-items: flex-start;}
.tour-floorplan .floorplan-wrapper .makers{position: absolute; top: 0; left: 0px; width: 100%; height: 100%;}
.tour-floorplan .floorplan-wrapper .makers .item{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #343741;
    border: solid 1px rgba(204, 204, 204, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    margin-top: -4.5px;
    margin-left: -4.5px;
    cursor: pointer;
    z-index: 2;
    transition-duration: 0s;
}
.tour-floorplan .floorplan-wrapper .makers .item.active{opacity: 1; z-index: 1;}
.tour-floorplan .floorplan-wrapper .makers .item.active:after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 60px;
    height: 60px;
    background: url("../images/icon-rada.svg") no-repeat center center; background-size: contain;
    border: 0;
    border-radius: 0;
}
.tour-floorplan.expanded .floorplan-wrapper .makers .item{ width: 30px;height: 30px; margin-top: -15px;margin-left: -15px;}
.tour-floorplan.expanded .floorplan-wrapper .makers .item.active:after{width: 100px;height: 100px;}

.slogan{width: 20.3125vw;
  position: fixed; left: 40px; top: 54px;
  z-index: 2;
  min-width: 105px;
}

.tour-info{
    position: fixed;
    top: 130px;
    right: 0px;
    visibility: hidden;
    opacity: 0;
    color: #000;
    z-index: 9;
    display: flex;
    flex-direction: column;
    font-family: "ExemplarPro";
}


.tour-info.show{
    opacity: 1;
    visibility: visible;
}
.tour-info .content{display: none;
  background: rgba(255,255,255,0.8);
  padding: 15px 45px 45px 15px;
  width: 340px;
   border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  
}
.tour-info .content p{margin-bottom: 5px;}
.tour-info .content  .item{display: none;}
.tour-info .content  .item.active{display: block;}
.tour-info .content .subtitle{font-weight: 300;}
.tour-info .content h3{text-transform: uppercase; border-bottom: solid 1px #343741;}
.tour-info.active .content{display: block;}
.tour-info.active .content .description{max-height: 60vh;     overflow: auto;}

.tour-info.active .content .description::-webkit-scrollbar {
    width: 6px;
    background-color: #ffffff;
} 
.tour-info.active .content .description::-webkit-scrollbar-thumb {
    background-color: #E87929;
    border-radius: 3px;
}
/*FOR IE*/
.tour-info.active .content .description { 
    scrollbar-base-color: #E87929; 
    scrollbar-face-color: #E87929;
    scrollbar-3dlight-color: #E87929; 
    scrollbar-highlight-color: #E87929;
    scrollbar-track-color: #ffffff; 
    scrollbar-arrow-color: #E87929;
    scrollbar-shadow-color: #E87929;
    scrollbar-dark-shadow-color: #E87929;
}
/*FOR FF*/
.tour-info.active .content .description{
     scrollbar-color: #E87929 #ffffff;
    scrollbar-width: 6px;
}

.tour-info.active .content .description strong{color: #E87929;}

.btn-tour-info {
  display: flex;
  width: 45px;
  height: 45px;
  background: #fff url(../images/icon-document.svg) no-repeat center center;
  background-size: 70%;
  position: absolute;
  z-index: 2;
  border-radius: 0;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  right: 0px; top: 0px;
  cursor: pointer;
}
.tour-info.active .btn-tour-info{background-color: #E87929;
  background-image: url(../images/icon-x.svg);
}


@media (max-width:1699px) {
    .tour-floorplan .floorplan-wrapper .inner{max-width: 960px;}
}


#page_container{position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; overflow: hidden;
    transform: translateY(-100%);visibility: hidden;
    transition: var(--d-transition);
}

#page_container.show{transform: translateY(0); visibility: visible; z-index: 5; background: #fff;
   
}



.footer-control {
  position: fixed;
  right: 0px;
  top: 20px;
  display: flex;
}
.footer-control .btn-toggle{display: flex; width: 45px; height: 45px; background: #fff url('../images/icon-info.svg') no-repeat center center; background-size: 70%;
    position: relative;
    z-index: 2;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.footer-control .btn-toggle:hover,
.footer-control.active .btn-toggle{
  background-color: #615D5D;;
  background-image: url('../images/icon-info-white.svg');
  border-radius: 0;
}
.footer-control .inner{transform: translateX(120%);  transition: var(--d-transition); transition-duration: 0.2s;
   background:  rgba(97, 93, 93, 0.6);
}
.footer-control.active .inner{transform: translateX(0);}
.footer-control .inner a {
  position: relative;
  float: left;
  width: 45px;
  height: 45px;
  margin: 0px 5px;
 
  transition: var(--d-transition); transition-duration: 0.2s;
  color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-control a.music svg.muted .volume{display: none;}
.footer-control a.music svg:not(.muted) .volume-muted{display: none;}

.footer-control .inner a:hover {
   color: #E87929;
}



@media (min-width:1200px) {
    .container-fluid{padding-left: 75px; padding-right: 75px;}
}

header{
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 10;    
}
header .navbar-toggler{ background: transparent; padding: 0px; border-radius: 0; border: 0;
    position: absolute; right: 50px; top: 18.5px; z-index: 2;
}
header .navbar-toggler.collapsed svg.open{display: none;}
header .navbar-toggler {}
header .navbar-toggler .st1{
    transform-origin: center;
    transition: var(--d-transition);
}
header .navbar-toggler:hover .st1{transform: rotate(360deg);}
header .navbar-toggler:focus{box-shadow: none; }
header .navbar-toggler:not(.collapsed) svg.normal{display: none;}
header .navbar-toggler:not(.collapsed) svg path{ fill: #E87929 !important; }
header .navbar-toggler-content{background-color: #fff;    padding: 25px 50px;}
header .items{display: flex;    align-items: center; position: relative; z-index: 2;}
header .items .item{margin-right: 35px;}
header .items .item.email{margin-right: 20px;}
header .items .item.hotline:before{content: "|"; padding-right: 20px;}
header .items .item.social a{margin-right: 25px;}
header .items .item.social a:last-child{margin-right: 0px;}
header .items .item.social a:hover path{fill: #E87929 !important;}



@media (max-width:1599px) {
    header .navbar-toggler-content{padding: 15px 20px;}
    header .navbar-toggler{right: 20px;}
    header .header-control{right: 80px; top: 13px;}
    header .header-control a{ margin-left: 25px;   font-size: 18px; height: 37px;}
    
    header .navbar-toggler{top: 13px;}
    header .navbar-toggler svg{height: 37px; width: auto;}

    .loading-overlay .content{font-size: 27px;}
    .loading-overlay .content strong{font-size: 56px;;}
    .loading-overlay .content .icon img{width: 60px; height: auto;}
}
@media (max-width:1299px) {
    header .items .item{margin-right: 25px;}
    header .items .item.social a:not(:last-child){margin-right: 15px;}
    header .items .item.email{margin-right: 10px;}
    header .items .item.hotline:before{padding-right: 10px;}
}
@media (max-width:1199px) {
    header{font-size: 12px;}
    header .items .item strong{display: block;}
    header .items .item.hotline:before{display: none;}
    .slogan{top: 20px;}
}
@media (max-width:991px) {
    header .navbar-toggler-content{height: calc(var(--vh, 1vh) * 100); padding-top: 20vh;}
    header .header-control{    transform: translateY(0px);}
    header .navbar-toggler-content{  }
    header .navbar-toggler-content:before{content: ''; position: absolute; z-index: 1; width: 100vw; height: 100vw; right: -40vw; bottom: -40vw;
        background: url('../images/nav-bg-mobile.svg') no-repeat center center; background-size: contain;
        opacity: 0.2;
    }
    header .items{flex-direction: column;}
    header .items .item{font-size: 16px; margin-right: 0px; margin: 12px 0px; text-align: center;     display: block;}
    header .items .item strong{display: inline;}
    .loading-overlay .content{font-size: 24px;}
    .loading-overlay .content strong{font-size: 48px; }
    .loading-overlay .content .icon img{height: 48px;}
    #element_help{width: 60vw;}

    .tour-floorplan{ }
    .tour-floorplan .btn-tour-floorplan{
      position: fixed; top: 130px; right: 0px; left: auto;
      border-radius: 0;
          border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
    }
    .tour-floorplan.active .floorplan-wrapper{position: fixed; right: 45px; top: 75px; left: auto;}
    .tour-floorplan .heading .btn-resize,
    .tour-floorplan .heading .btn-close{display: none;}

    .tour-floorplan .heading h3.title{font-size: 24px; padding-top: 15%;}
    

    .tour-info{top: 185px;}
}
@media (max-width:767px) {
    #element_help{width: 82vw;     max-height: 64vh;}
    #element_help .scroll-downs{margin-bottom: 9px;}
    .loading-overlay .content{    font-size: 20px; }
    .loading-overlay .content strong{font-size: 35px; margin-bottom: 10px;}
    .loading-overlay .content strong span{display: block;}
    .loading-overlay .scroll-downs{bottom: 28px;}
    .text-note{bottom: 4px; right: 50%; transform: translateX(50%); transition: var(--d-transition);}
    
    body:not(.done) .text-note,
    body.done .text-note{bottom: 4px;}
    .slogan{top: 20px; left: 20px;}
    

    .tour-nav{bottom: 48px;}
    .tour-nav .swiper .item{padding: 0px 5px;}
    .tour-nav h4{font-size: 14px;  padding: 5px 15px 3px;}
    .tour-nav .swiper-nav-wrapper{width: 100%; flex: 1; border-top-right-radius: 0; border-top-left-radius: 0; padding: 0px 5px 0px;   }
    .tour-nav .swiper-slide-wrapper{padding-left: 15px; padding-right: 15px;}
    .tour-nav .btn-toggler{}
    .tour-nav.show .btn-toggler{}
    .tour-nav .swiper-nav-wrapper .swiper-button-prev svg, .tour-nav .swiper-nav-wrapper .swiper-button-next svg{width: 12.5px;}

    

    /*
    body.done .text-note.nav-show{bottom: 8px;}
    body.done .text-note-wrapper{display: none;}
    body.done .tour-nav .text-note-wrapper{display: block;}
    body.done .tour-nav .text-note-wrapper .text-note{bottom: auto; top: -45px;}
    */
    
}



@keyframes scroll {
  0% {
    opacity: 0;
  }
  10% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateY(15px);
            transform: translateY(15px);
    opacity: 0;
  }
}

.flashit{
  color:#f2f;
  -webkit-animation: flash linear 2s infinite;
  animation: flash linear 2s infinite;
}
@keyframes flash {
  0% { opacity: 1; } 
  50% { opacity: .1; } 
  100% { opacity: 1; }
}

@keyframes mousemove {
    21% {
        transform: translate(0px, 2px);
    }
    56% {
        transform: translate(10px, 1px);
    }
    98% {
        transform: translate(0px, 0);
    }
}

@keyframes mouseinner {
    8% {
        transform: translate(0px, 0);
    }
    38% {
        transform: translate(1px, 4px);
    }
    62% {
        transform: translate(1px, 4px);
    }
    90% {
        transform: translate(0px, 0);
    }
}
@keyframes mouserotate {
    8% {
        transform: translate(0px, 16px) rotate(0deg) translate(0px, -16px);
    }
    27% {
        transform: translate(0px, 16px) rotate(-6deg) translate(0px, -16px);
    }
    57% {
        transform: translate(0px, 16px) rotate(9.5deg) translate(0px, -16px);
    }
}

body.fullscreen .tour-nav,
body.fullscreen .tour-floorplan,
body.fullscreen .tour-info,
body.fullscreen .slogan,
body.fullscreen .btn-utility-link{display: none !important;}
body.fullscreen .footer-control .inner a.fullscreen{color: #E87929;}
.btn-utility-link{
    position: fixed;
    right: 0px;
    top: 75px;
    display: flex;
    width: 45px;
    height: 45px;
    background: #fff url(../images/icon-view.svg) no-repeat center center;
    background-size: 70%;
    z-index: 9;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    
    cursor: pointer;
}
.btn-utility-link.active{
  background-image: url(../images/icon-view-active.svg);
}
.show-utility-link .btn-utility-link{display: block;}
body.hide-utility-item .utilities-node,
body.hide-utility-item .slogan{display: none;}