@charset "utf-8";

@font-face {
    font-family: "BeVietnamPro";
    src: url("../fonts/BeVietnamPro-Light.ttf");
    font-style: normal;
    font-weight: 300;
}
@font-face {
    font-family: "BeVietnamPro";
    src: url("../fonts/BeVietnamPro-Regular.ttf");
    font-style: normal;
    font-weight: 400;
}
@font-face {
    font-family: "BeVietnamPro";
    src: url("../fonts/BeVietnamPro-SemiBold.ttf");
    font-style: normal;
    font-weight: 500;
}
@font-face {
    font-family: "BeVietnamPro";
    src: url("../fonts/BeVietnamPro-Bold.ttf");
    font-style: normal;
    font-weight: 700;
}
@font-face {
    font-family: "SVN-Yipes";
    src: url("../fonts/SVN-Yipes.otf");
    font-style: normal;
    font-weight: 400;
}



:root {
  --iconsize: 40px;
  --iconsizemd: 48px;
  --iconsizexxl: 70px;
    --d-padding: 70px;
    --navsize: 3.875rem;
  --d-transition: all 0.5s cubic-bezier(0.65, 0, 0.35, 1);
  --d-gradient: linear-gradient(90deg, #008555 0%, #009C70 56%, #00A46B 86%, #00784F 100%);

  --text-g:  linear-gradient(90deg, #008555 0%, #009C70 56%, #00A46B 86%, #00784F 100%);
  --fz-13: 0.6770833333333333vw;
  --fz-14: 0.7291666666666667vw;
  --fz-16: 0.8333333333333333vw;
  --fz-18: 0.9375vw;
  --fz-24: 1.25vw;
  --fz-52: 2.708333333333333vw;
  --fz-40: 2.083333333333333vw;
  --fz-36: 1.875vw;
  --fz-32: 1.666666666666667vw;
  --fz-28: 1.458333333333333vw;
  --iz-1: 3.125vw;
  --iz-2: 3.75vw;
}
@media (max-width:1600px) {
    :root {
        --iconsize: 40px;
        --iconsizemd: 40px;
        --d-padding: 30px;


    }
}
@media (max-width:1299px) {
    :root {
        --d-padding: 20px;
        --fz-52: 32px;
        --fz-40: 24px;
        --fz-36: 20px;
        --fz-32: 18px;
        --fz-28: 16px;
        --fz-24: 16px;

        --fz-18:13px;
        --fz-16:13px;
        --fz-14: 12px;
        --fz-13: 11px;

        --iz-1: 36px;
        --iz-2: 46px;
        --navsize: 46px;
    }
}

@media (max-width:991px) {
    :root {
      --d-padding: 15px;
    }
}
@media (max-width:767px) {
    :root {

      --fz-14: 12px;
      --fz-16:13px;
      --fz-18:13px;
      --fz-52: 24px;
      --fz-36: 18px;
      --fz-32: 16px;
      --navsize: 40px;
    }
}

html::-webkit-scrollbar {
    width: 8px;
    background-color: #00744D;
} 
html::-webkit-scrollbar-thumb {
    background-color: #005BAA ;
    border-radius: 4px;
}
/*FOR IE*/
html { 
    scrollbar-base-color: #005BAA ;
    scrollbar-face-color: #005BAA ;
    scrollbar-3dlight-color: #005BAA ;
    scrollbar-highlight-color: #005BAA ;
    scrollbar-track-color: #00744D;
    scrollbar-arrow-color: #005BAA ;
    scrollbar-shadow-color: #005BAA ;
    scrollbar-dark-shadow-color: #005BAA ;
}
/*FOR FF*/
html{
     scrollbar-color: #005BAA  #00744D;
    scrollbar-width: 8px;
    font-size: var(--fz-16);
}



body { font-family: 'BeVietnamPro', sans-serif;  margin: 0px; padding: 0px; font-size: var(--fz-16); line-height: 1.4; overflow-x: hidden; font-weight: 400; color: #00744D; background: #fff; }
/*----------------------
1.1. Typography
------------------------------*/
h1, h2, h3, h4, h5, h6 { font-family: 'BeVietnamPro', sans-serif; color: #333; margin: 0 auto 1rem; font-weight: 700; line-height: 1.4; }
h1 { font-size: var(--fz-18); }
h2 { font-size: var(--fz-18);  }
h3 { font-size: var(--fz-18); }
h4 { font-size: var(--fz-18);}
h5 { font-size: var(--fz-16); margin-bottom: 0.75rem; }
h6 { font-size: var(--fz-16); margin-bottom: 0.75rem; }
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;  }
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;}

.font-1,
.font-2{
    font-family: 'BeVietnamPro', sans-serif;
}
.font-3{
    font-family: 'SVN-Yipes', sans-serif;
}


/* =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; }
.text-g{
    background: var(--d-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/*-----------------
1.2. Button
-------------------------*/
.btn { border-radius: 5px; background: #00744D; border: medium none; color: #fff; font-size: 16px; height: auto; margin: auto; padding: 5px 30px; transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; -webkit-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; }
.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: #00744D; box-shadow: none; }
.btn-link { font-weight: 800; font-size: 17px; color: #00744D; }
.btn.btn-outline {
    --color:#00744D;
    background: none; color: var(--color); border: var(--color) solid 1px; padding: 5px 25px 5px 25px; font-weight: 400; position: relative;
    border-radius: 2rem;
}
.btn.btn-outline:hover { background: var(--color); color: #fff; }
.btn-transparent { background: transparent; border: solid 1px #00744D; color: #00744D; font-size: 14px; }
.btn-transparent:hover { background: #00744D; border: solid 1px #00744D; }
.btn.btn-default{
     color: #fff; font-size: var(--fz-18);
    padding: 0.5rem 1.75rem 0.5rem;
    text-transform: uppercase;
    font-weight: 500;
    border:solid 1px transparent;
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid #FFFFFF;
    backdrop-filter: blur(10px);

}
.btn.btn-default:hover,
.btn.btn-default.active{

    background: var(--d-gradient);
}
.btn-primary{/*background: #005BAA;*/ border-color: #fff;}
.btn-primary:hover{
    background: #DBC2A4;
}
.btn-gradient{background: var(--d-gradient); padding: 2px; }
a[data-action="pano"]{cursor: pointer;}


/*-------------------------
1.3. dark-overlay
---------------------------------*/
.div_zindex { position: relative; z-index: 1; }
.zindex-9{z-index: 9;}
.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^=top] .tooltip-arrow::before, .bs-tooltip-top .tooltip-arrow::before{border-top-color: #fff;}
.bs-tooltip-start .tooltip-arrow::before{border-left-color: #fff;}
.tooltip .tooltip-inner{background: #fff; color: #00744D;}

/*-------------------------------------
1.4. Space margins and padding
------------------------------------------------*/

.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: #00744D; 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: 6px; border: #ccc solid 1px; box-shadow: none; color: #888888; font-size: 14px; 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: #00744D; }
.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: #00744D; }
.panel-heading:hover .panel-title a { border-color: #00744D; }
.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: var(--fz-40); color: #00744D; text-transform: uppercase; font-weight: 700; margin: 0 auto var(--fz-32);}
.section-title.lg{font-size: var(--fz-32);}
.section-title.sm{font-size: var(--fz-18);}
.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: #00744D;}



/*--------------------
1.9. Tabs 
------------------------------*/
.nav.nav-tabs { border: medium none; }
.nav-tabs > li a { padding: 0px 0px 12px; border-radius: 0; color: #caa557; font-size: var(--fz-18); 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: #00744D; border:0px;  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 #00744D;}
.nav-tabs > li { margin-bottom: 0; margin-right: 50px;}
.tab-content {margin-top: 0px; padding: 25px 0px 25px;}

.nicescroll-rails{width: 2px !important; background: #386045;}
.nicescroll-rails.custom-rail .nicescroll-cursors{transform: translatex(1px);}
.nicescroll-rails.nicescroll-rails-hr{
    transform: translateX(0) translateY(30px);
}
.nicescroll-rails.progress-rail{display: none ; visibility: hidden;}

.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);}

.item-rounded .item-thumb.animation{border-radius: 0.6666em;;}
.item-thumb.animation{ overflow: hidden;position: relative;display: block;}
.item-thumb.animation:after {
    -webkit-transition: 0.3s;
    transition: 0.3s;
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}
.item-thumb.animation img {
    transition: transform 3s cubic-bezier(0, 0.6, 0.45, 1);
}
.item-thumb.animation:hover img,
.item:hover .item-thumb.animation img {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.item:hover .item-thumb.animation:after {
    /*-webkit-box-shadow: inset 0px 0px 0px 5px rgba(235,224,207, 0.5) ;
    box-shadow: inset 0px 0px 0px 5px rgba(235,224,207, 0.5) ;*/
}
.item-thumb.fit-ratio{position: relative; width: 100%; height: 0; padding-top: calc(100% * 282 / 282);}
.item-thumb.fit-ratio img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}

.item-thumb .icon{
    position: absolute; width: var(--iz-2); height: var(--iz-2);
    left: 50%; top: 50%; transform: translate(-50%,-50%);
    border-radius: 50%; border: solid 1px #fff;
}
.item-thumb .icon:before{
    position: absolute;
    left: 4px;
    right: 4px;
    top: 4px;
    bottom: 4px;
    border-radius: 50%;
    font-family: "Font Awesome 5 Pro";
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(255,255,255,0.2);

}
.item-video .item-thumb .icon:before{content: '\f04b';}
.item-document .item-thumb .icon:before{content: '\f06e';}
.item-document{position: relative;}
.item-document .item-content{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    min-height: 54%;
    padding: var(--fz-52) var(--fz-32) var(--fz-18);

    display: flex;
    align-items: flex-end;
    pointer-events: none;
}
.item-document .item-content .title{font-weight: 700; color: #fff; margin: 0}
.item-document .item-content .icon-download{
    pointer-events: auto;
    display: inline-flex;
    margin-left: auto; width: var(--fz-36); height: var(--fz-36);
    background: url('../images/icon-download.svg') no-repeat center center;
    background-size: contain;
}

.item-product{
    margin-bottom: 1rem;
    color: #fff;
}
.item-product .item-title{
    font-size: var(--fz-28);
    color: #DBC2A4;
    font-weight: 400;

}
.item-product .item-thumb{
    width: 100%;
    padding-top: calc(100% * 389 / 727);
    margin-bottom: 0.75rem;
}
.item-product .item-thumb span.overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background:rgba(0, 116, 77, 0.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.75rem;
    color: #fff;
    font-weight: 500;
    pointer-events: none;
    opacity: 0;
    transform: scale(1.4);
    transition: var(--d-transition);
}
.item-product .item-thumb span.overlay:before{
    content: '';
    width: 3.645833333333333vw;
    min-width: 54px;
    aspect-ratio: 1;
    background: url('../images/icon-run.svg') no-repeat center center;
    background-size: contain;
}
.item-product:hover .item-thumb span.overlay{
    opacity: 1;
    transform: scale(1);
}

.item-product .item-attrs{
    color: #fff;
    font-size: var(--fz-16);
    text-align: right;
}
.item-product .item-attrs .attr span{
    font-size: var(--fz-36);
    color: #DBC2A4;
}


/*--------------------------------------------
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: 0; }
.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: #00744D; 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: rgba(2, 33, 28, 1);


}
.fancy-modal.fancybox-is-open .fancybox-bg{opacity: 0.6;}
.gallery-album.fancybox-container .fancybox-caption-wrap .fancybox-caption{
    text-align: center;
    font-weight: 700;
    font-size: var(--fz-18);
    text-transform: uppercase;
    border-top: 0;

}
.gallery-album.fancybox-container .fancybox-caption-wrap{
    background: linear-gradient(180deg, rgba(0, 91, 170, 0) 0%, rgba(0, 91, 170, 1) 100%);
    padding-bottom: 30px;
    padding-top: 90px;
}

@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: 90vh;}
#element_help img{max-height: 100%;}
#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: rgba(255,255,255,0.7); font-weight: 700; color: #fff; border-radius: 0px; }
#element_help.popup-content .fancybox-close-small:hover:after{background: #000; }

@media (max-width:767px) {
    #element_help{height: auto;}
}


.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;
}

.header-logo{
    width: 5.208333333333333vw;
    aspect-ratio: 1;
    min-width: 60px;
    position: fixed;
    top: 1.2rem;
    left: 2.760416666666667vw;
    z-index: 10;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.header-logo img{
    width: 60%;
    height: auto;
}
.btn-sticky--website,
.sticky--right .btn{
    position: fixed;
    top: var(--fz-52);
    right: 0;
    border-radius: 0.5rem 0px 0px 0.5rem;
    background: var(--d-gradient);
    padding: 2px;
    height: var(--iconsizemd);
    width: var(--iconsizemd);
    z-index: 10;
}
.sticky--right{
    position: fixed;
    top:20%;
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
}
.sticky--right .btn{
    position: relative;
    top: auto;
    right: auto;
}
.btn-sticky--website i,
.sticky--right .btn i{
    position: absolute;
    left: 2px;
    top: 2px;
    right: 2px;
    bottom: 2px;
    border-radius: 0.5rem 0px 0px 0.5rem;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fz-28);
}
.btn-sticky--website:hover,
.sticky--right .btn:hover{ background:rgba(0, 91, 170, 1) }
@media (max-width:1024px) {

}



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

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


.loading-overlay .logo,
.loading-overlay .slogan{
    position: absolute;
    z-index: 2;
    left: 50%; top: 50%; transform: translate(-50%,-50%);
    transition: var(--d-transition);
    transition-duration: 1s;
}
.loading-overlay .logo img,
.loading-overlay .slogan img{width: 100%; height: auto;}
.loading-overlay .logo{
    min-width: 200px; width: 16.25vw; height: auto;
    opacity: 0;
}
.loading-overlay .slogan{
    width: 52.6vw;
    min-width: 260px;
    opacity: 0;
    transform: scale(1)  translate(-50%,-50%);
}




body:not(.ready){overflow: hidden !important;}
body.ready .loading-overlay{ transform: translateY(0);  transition:  var(--d-transition);  opacity: 1;}
body.ready .loading-overlay .logo{
    opacity: 1;
}
body.ready .loading-overlay.step-1 .logo{
    opacity: 0;
}
body.ready .loading-overlay.step-1 .slogan{
    opacity: 1;
    transform: scale(1) translate(-50%,-50%);
}
body.ready .loading-overlay svg, body.ready .loading-overlay .svg{}
body.done .loading-overlay{
  transition:  var(--d-transition);
  pointer-events: none;  transform: translateY(-100%); 
  transition-duration: 1s;
}

/*body.done .loading-overlay.step-1 .slogan{
    opacity: 0; filter: blur(1.5rem); transform: translate(-50%,-50%) scale(2);
}*/



.tour-nav{ position: absolute; bottom: var(--navsize); min-height: 42px; display: flex; width: 100%; justify-content: center;
    transform: translateY(100%);
    transition: var(--d-transition);
    visibility: hidden;
}
body.done .tour-nav{visibility: visible;}
.tour-nav .btn-toggler{width: 80px; height: 40px; background:  url('../images/bg-tour-nav.svg') no-repeat center center; background-size: contain; position: absolute; left: 50%;
    margin-left: -40px; top: -40px ;
    transition: var(--d-transition); z-index: 2; cursor: pointer;
}
.tour-nav .btn-toggler:before{
    content: '';
    position: absolute;
    width: 50%;
    height: 0;
    padding-top: 50%;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(180deg);
    transition: var(--d-transition);
    background:  url('../images/arrow-down.svg') no-repeat center center; background-size: contain;
}

.tour-nav .swiper-nav-wrapper{
        flex: 0 0 74vw; width: 74vw;
         padding: 0 0.5rem 0.5rem ;
        visibility: hidden;
        opacity: 0;
        transition: var(--d-transition);
        position: relative;
        border-radius: 0;
}
.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,
.tour-nav .swiper-thamquan{height: 100%; }
.tour-nav .swiper{}
.tour-nav .swiper-nav-wrapper{}
.tour-nav .swiper-nav-wrapper .swiper .swiper-slide{
    background: #fff;
}
.tour-nav .swiper-nav-wrapper .swiper-button-prev,
.tour-nav .swiper-nav-wrapper .swiper-button-next{color: #fff;  transition: var(--d-transition); }
.tour-nav .swiper-nav-wrapper .swiper-button-prev:after,
.tour-nav .swiper-nav-wrapper .swiper-button-next:after{font-size: 32px; }
.tour-nav .swiper-nav-wrapper .swiper-button-prev:hover,
.tour-nav .swiper-nav-wrapper .swiper-button-next:hover{opacity: 0.5;}
.tour-nav .swiper-nav-wrapper .swiper-button-prev{left: 0px;}
.tour-nav .swiper-nav-wrapper .swiper-button-next{right: 0px;}
.tour-nav .swiper-nav-wrapper .swiper-button-prev:hover{transform: translateX(-5px);}
.tour-nav .swiper-nav-wrapper .swiper-button-next:hover{transform: translateX(5px);}
.tour-nav .swiper .item{padding: 0px;}
.tour-nav h4{font-size: var(--fz-18); font-weight: 400; margin: 0px 0px 0px; color: #fff;
     text-align: center;
     text-transform: none;
    padding: 0.5rem;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
     background: #00744D;
}
.tour-nav .thumbnail{ overflow: hidden;
  width: 100%;  position: relative;
  margin: auto;

}
.tour-nav .thumbnail .img{
  left: 0px; top: 0px; width: 100%;height: 0px; padding-top: calc(100% * 139 / 239);
  transition: all 1.6s ease;
}

.tour-nav .swiper:not(.with-filter) .swiper-slide-active{padding: 3px;}
.tour-nav .swiper-slide-active h4{}

.tour-nav.show{ transform: translateY(0); z-index: 9}
.tour-nav.show .swiper-nav-wrapper{ visibility: visible; opacity: 1;}
.tour-nav.show .btn-toggler:before{transform: translateX(-50%) translateY(-50%) rotate(0deg); }

.tour-nav .text-note-wrapper{display: none;}

.tour-nav .swiper-filter{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.tour-nav .swiper-filter a{
    padding: 2px;
    margin: 0px 0.5rem;
}
.tour-nav .swiper-filter a span{display: block; background: #00744D; color: #fff;
    padding: 4px 20px;
    border-radius: 5px;
}
.tour-nav .swiper-filter a.active span{
    color: #00744D;
    background: transparent;
}
.tour-nav .swiper-tab{
     display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.tour-nav .swiper-tab .inner{
    background: rgba(255,255,255,0.75);
    border-radius: 40px;
    padding: 5px;
    display: flex;
}
.tour-nav .swiper-tab .inner a{color: #00744D; font-weight: 700; text-transform: uppercase; padding: 10px 40px; border-radius: 40px;}
.tour-nav .swiper-tab .inner a.active{
    color: #fff;
    background: #00744D;
}
.tour-nav .swiper-tab .inner a:hover{

}


@media (max-width:1599px) {
    .tour-nav h4{font-size: var(--fz-14);}
}


@media (max-width:767px) {
    .tour-nav .btn-toggler{
        width: 60px;
        height: 30px;
        margin-left: -30px;
        top: -30px;
    }
    .tour-nav .swiper-nav-wrapper{
        flex: 0 0 100%;
        width: 100%;
    }
    .tour-sanpham .footer-control{
        /*display: none;*/
    }


}


@media (max-width: 1024px) {
  .desktop-only {
    display: none !important; } }

@media (min-width: 1025px) {
  .mobile-only {
    display: none !important; }
}




.footer-control {
  position: fixed;
  right: var(--d-padding);
  top: calc(0.75 *  var(--d-padding));
  display: flex;
  flex-direction: row;
  z-index: 12;
}

.footer-control a {
  position: relative;
  width: 2rem;
  height: 2rem;
  margin-left: 0.75rem;
  color: #fff;
  transition: all 300ms linear;
  font-size: 1.1rem;
  text-align: center;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.4);
    border: 1px solid #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;


}
.footer-control a:last-child{}
.footer-control a:hover {
  background: #00784F;
    border: 1px solid #DBC2A4;
}



.footer-control a.sound i::before {

}
.footer-control a.sound.active i::before {
  content: "\f11f";
}
.footer-control a.autotour i::before {

}
.footer-control a.autotour.active i::before {
  content: "\f04c";
}
body.dark .footer-control a:not(:hover){
    color: #00744D;
    border-color: #00744D;
}

.navbar-wrapper.min .footer-control .btn-toggle{}


.page-library,
.page-products{
    padding-top: var(--fz-52);
}
.page-library .item{margin-bottom: 1.5rem; display: block;}
.page-library .item .item-thumb{padding-top: calc(100% * 290 / 486);}
.page-library .item .item-title{color: #fff}


@media(max-width: 1199px){
    .page-library,
    .page-products{
        padding: 45px 0;
    }
}
.page-products{
    background: url('../images/bg/bg-nhamau.png') no-repeat center center;
    background-size: cover;
    min-height: 100dvh;
    padding-bottom: var(--navsize);
}

.grid-sizer,
.grid-item {
  width: 33.333%;
}

.grid-item {
  float: left;
  padding: 0.4rem;
  display: block;
}
.grid-filter{margin-top: -2em;}
@media(min-width:1200px){
    .grid-filter .form-control{width: 300px; max-width: 100%;}
}


.grid-item img {
  display: block;
  max-width: 100%;
}
#library_album .grid-item .item-title{margin: 0; position: absolute; bottom: 0.4rem; left: 0.4rem;
    padding: 1rem;
    min-height: 50%;
    width: calc(100% - 0.8rem);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    color: #fff;
    text-align: center;
    pointer-events: none;
    text-transform: none;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
}
@media(max-width: 1199px){
    .grid-sizer,
    .grid-item {
      width: 50%;
    }
}
@media(max-width: 767px){
    .grid-item{
        padding: 0.2rem;
    }
    #library_album .grid-item .item-title{
        bottom: 0.2rem; left: 0.2rem;
        width: calc(100% - 0.4rem);
        font-size: 11px;
        padding: 0.5rem 0.5rem;
    }
}


#projectInfoModal .modal-content{
    border: 0;
}
#projectInfoModal .modal-body{
    padding: 0;
    background: transparent;
}
#projectInfoModal .modal-header .btn-close{
    top: 0;
    right: 0;
    width: var(--iz-1);
    height: var(--iz-1);
    transform: translate(50%, -50%);
    background: #DBC2A4;
    border-radius: 50%;
}
#projectInfoModal .modal-header .btn-close:before{
    width: 50%;
    height: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
#projectInfoModal .modal-header .btn-close:hover{
    background: var(--d-gradient);
}
#projectInfoModal .modal-dialog{    max-width: 1024px;}

#projectInfoModal .modal-header{position: absolute; right: 0px; top: 0px;z-index: 2;}


#utilitiesModal .modal-dialog{width: 1650px; max-width: 86vw ;    margin: auto; }
#utilitiesModal .modal-header{position: absolute; right: 15px; top: 15px;z-index: 2;}
#utilitiesModal .modal-dialog .modal-body{ padding: 0;   align-items: center; position: relative;
    
}
#utilitiesModal .modal-dialog .modal-body .col-content{position: relative; 
    width: 100%; height: auto; color: #fff; padding: 70px 5% 30px;
    margin-top: -60px;
}

#utilitiesModal .modal-dialog .modal-body .col-content:before{content: ''; width: 100%; height: 70%;
    position: absolute; left: 0px; bottom: 0px; background: #1D6D94;
}
#utilitiesModal .modal-dialog .modal-body .col-content:after{
    content: ''; width: 100%; height: 100%;
    position: absolute; left: 0px; bottom: 0px; 
    background: url('../images/bg-menu-2.svg') no-repeat center top;
    background-size: 100% auto;
}
#utilitiesModal.internal .modal-dialog .modal-body .col-content:before{background: #2F8E7E;}
#utilitiesModal.internal .modal-dialog .modal-body .col-content:after{
    background-image: url('../images/bg-menu-3.svg') ;
}
#utilitiesModal .modal-dialog .modal-body .col-content .section-title{font-size: 36px; color: #00744D; margin: 0px 0px 5px;}
#utilitiesModal .modal-dialog .modal-body .col-content .description{font-weight: 700;}
#utilitiesModal .modal-dialog .modal-body .col-content .content p:last-child{margin: 0;}

#utilitiesModal.internal .modal-dialog .modal-body .col-content .section-title{color: #001A72;}

@media screen and (max-width: 1600px){
    #utilitiesModal .modal-dialog .modal-body .col-content .section-title{font-size: 32px;}
}



/*sticky_widget*/
#sticky_widget {position: fixed; right: -100%; top: 50% ; transform: translateY(-50%); z-index: 9;transition: var(--d-transition);}
#sticky_widget.show{right: 0;}
#sticky_widget .title{width: 40px; min-height: 190px; background: #00744D;
  position: absolute; right: 0px; top: 50%; transform: translateY(-50%);
  transition: var(--d-transition);
  cursor: pointer;
  border-radius: 0.75rem 0px 0px 0.75rem;
  text-transform: uppercase;
}
#sticky_widget .title:before{content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 30px; height: 30px;
   background: url('../images/logo-icon.svg') no-repeat center center;
   background-size: contain;

}
#sticky_widget .title span{
  position: absolute;    top: 0;  left: 100%;
  background: none;    transform-origin: 0 0; transform: rotate(90deg);
  color: #fff;
  white-space: nowrap; top: 50px;
  height: 40px;    line-height: 40px;
}
#sticky_widget .title:hover{
    background-color: #00744D;
}

#sticky_widget .items{
  right: 40px; top: 50%; position: absolute;
  transform: translateY(-50%);

  display: flex;
    overflow-x: auto;
   direction: rtl;
   cursor: grab;

    -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;

  width: 0px;
  /*width: calc(100vw - 52px);*/
  transition: var(--d-transition);


}
#sticky_widget .items.show{width: calc(100vw - 52px); }
#sticky_widget .items::-webkit-scrollbar {
    display: none;
}

#sticky_widget .items .inner{height: 100%;
  display: flex;
}
#sticky_widget .items .item{width: calc(100vw / 6 + 35px);  height:100%;
  flex-shrink: 0;
  background: #00744D;
  display: flex; flex-direction: column; overflow: hidden;
  margin-right: 5px;
}

#sticky_widget .items .item .thumb{width: 100%; flex-grow: 1;  position: relative;
    height: 0px; padding-top: calc(100% * 230 / 350);
}
#sticky_widget .items .item .thumb .img{position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;
  transition: var(--d-transition);
}
#sticky_widget .items .item .info{padding: 8px 15px 8px;
  transition: var(--d-transition);
  background: #00744D;
}

#sticky_widget .items .item h2{text-align:left; font-size: var(--fz-18); font-weight: 400; margin: 0px;     text-transform: uppercase;
    color: #fff;
}
#sticky_widget .items .item.active .info,
#sticky_widget .items .item:hover .info{background: #00744D}

.widget-overlay{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 7;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    display: none;
    opacity: 0;
    transition:var(--d-transition);
}
.widget-overlay.show{  display: block;  opacity: 0.7;}


body.done .text-note-wrapper{z-index: 8;}




#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 .loading{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
}

#page_container.show{transform: translateY(0); visibility: visible; z-index: 8; 
    background: #F4F9F5;
    overflow: auto;
}


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



* {
  scrollbar-width: thin;
  scrollbar-color: #00744D #005BAA; }

*::-webkit-scrollbar {
  border-radius: 3px;
  height: 6px;
  width: 6px; }

*::-webkit-scrollbar-track {
  background: #00744D; }

*::-webkit-scrollbar-thumb {
  background-color: #005BAA;
  border: none; 
}


/*Mobile Responsive*/



.btn-toggle-menu .navbar-toggler{
     position: fixed;
     left: 0px; top: 20px;
      width: 35px;
    height: 35px;
     background: #00744D;
    border-radius: 0px 5px 5px 0px;
     cursor: pointer;
     transition: 0.3s ease all;
     box-shadow: none;
     z-index: 1063;
}
.btn-toggle-menu .navbar-toggler-icon {
    background: transparent;
    width: calc(100% - 20px) ;
    height: calc(100% - 20px) ;
    position: absolute;
    top: 10px;
    left: 10px;


    /* margin-bottom: 5px; */




}
.btn-toggle-menu .navbar-toggler-icon > span {

    display: block;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background-color: #fff;
    position: absolute;
    transition: 0.3s ease all;
}

.btn-toggle-menu .navbar-toggler-icon > span:nth-of-type(1) {

    top: 0;
    left: 0%;
}
.btn-toggle-menu .navbar-toggler-icon > span:nth-of-type(2) {

    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.btn-toggle-menu .navbar-toggler-icon > span:nth-of-type(3) {
    width: 100%;
    top: 100%;
    left: 0;
    transform: translateY(-100%);
}
.btn-toggle-menu .navbar-toggler-icon:hover > span {
    width: 100%;
    transition: 0.3s ease all;
}

body.menu-open .links{display: none;}
body.menu-open .header-right .header-right .dropdown-language > a{}
body.menu-open .btn-toggle-menu .navbar-toggler{color: #fff; background: transparent;}
body.menu-open .btn-toggle-menu .navbar-toggler:hover{
    color: #B39662;
}
body.menu-open .btn-toggle-menu .navbar-toggler-icon {
    margin: 0;

    transform: rotate(180deg);
    transition: 0.3s ease all;
    opacity: 1;
}
body.menu-open .btn-toggle-menu .navbar-toggler-icon > span {
    width: 100%;
    height: 2px;
    background-color: #fff;
    transition: 0.3s ease all;
}
body.menu-open .btn-toggle-menu .navbar-toggler-icon > span:nth-child(1) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
body.menu-open .btn-toggle-menu .navbar-toggler-icon > span:nth-child(2) {
    opacity: 0;
}
body.menu-open .btn-toggle-menu .navbar-toggler-icon > span:nth-child(3) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}


@media (max-width: 1199px){


    .navbar.fixed-top{z-index: 1;}
    body.show-nav .navbar.fixed-top{z-index: 10;}
    .navbar{
        padding: 0px;
    }
    .navbar .nav-wrapper {display: none;
    }


    #page_container{bottom: 0;}
    #page_container.show{z-index: 8; overflow-y: auto;}


}
@media (max-width: 991px){
    #projectInfoModal .modal-dialog .modal-body .col-content .section-title{    font-size: 27px;}
    #projectInfoModal .modal-dialog .modal-body .col-content{    padding: 20px 40px;}
    #projectInfoModal .modal-dialog .modal-body .col-content .description{    margin-bottom: 15px;padding-bottom: 15px;}
    #projectInfoModal .modal-dialog .modal-body{}

    #utilitiesModal .modal-dialog .modal-body{background: transparent; padding-bottom: 0;}
    #utilitiesModal .modal-dialog .modal-body .col-content{position: relative; margin-top: -30px;    max-height: none;
        padding: 45px 15px 30px;
    }
    #utilitiesModal .modal-dialog .modal-body .col-content{}
    #utilitiesModal .modal-dialog .modal-body .col-content .section-title{font-size: 27px;}
    #utilitiesModal .modal-dialog .modal-body .col-content .description{margin-bottom: 10px;}
    .navbar-wrapper.min .navbar .navbar-right{right: 15px; }

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

    .btn-toggle-menu.navbar-toggler{
        top: 12.5px;
    }

    .nav-wrapper{ padding-top: 60px;  }
     #page_container{}



    #projectInfoModal .modal-dialog .modal-body{    flex-direction: column;}
    #projectInfoModal .modal-dialog .modal-body .col-thumb{width: 100%; flex: 1;}
    #projectInfoModal .modal-dialog .modal-body .col-content{    padding: 10px 20px;}

    #utilitiesModal .modal-dialog{max-width: 96vw;}
    #utilitiesModal .modal-dialog .modal-body .col-content:before{height:  calc(100% - 100vw * 211 / 1649 / 2);
    }
    #utilitiesModal .modal-dialog .modal-body .col-content{padding: 30px 15px 15px;}
    #utilitiesModal .modal-dialog .modal-body .col-content .section-title{font-size:1.5rem; ;
    }
     
}


#page_container .nav-tabs-default{justify-content: center; background: transparent; height: auto; backdrop-filter: none;}
#page_container .nav-tabs-default li{margin: 0 6px; flex: none;}
#page_container .nav-tabs-default li a{
    border: 1px solid #fff; border-radius: 2rem;
    color: #fff; text-transform: uppercase; cursor: pointer;
    padding: 0;
    overflow: hidden;
    padding: 0.5rem 2rem;
}
#page_container .nav-tabs-default li a span{
    display: block;
}
#page_container .nav-tabs-default li a.active{
    background: #00744D; color: #fff;
    border-color: transparent;
}
#page_container .nav-tabs-default li a.active span{

}

body.dark .page-nav .btn-default:not(:hover),
body.dark #page_container .nav-tabs-default li a{
    border-color: #00744D;
    color: #00744D;
}
body.dark #page_container .nav-tabs-default li a.active span,
body.dark .page-nav .btn-default.active{
    color: #fff;
}


@media screen and (max-width: 767px){
    #page_container .nav-tabs-default li a{
        padding: 0.25rem 1.25rem;
    }

}


.navbar-wrapper .navbar-left{
    position: absolute; left: var(--fz-32); bottom: var(--fz-32);
}
.navbar-wrapper .navbar-right{position: absolute; right: var(--fz-32); bottom: var(--fz-32);}

.nav .menu-contact{
    padding: 1rem 0px;
    display: flex;
}
.nav .menu-contact .btn{margin: 0px;}
.nav .menu-contact .social{display: flex; padding: 8px 0px; justify-content: center; align-items: center;
    margin-left: 15px;
}
.nav .menu-contact .social a{color: #fff; margin: 0px 6px;}

.nav .menu-bottom .title{font-size: var(--fz-18); font-weight: 400; color: #fff;
    text-transform: uppercase;
}



/*NAV*/
.nav-wrapper{
    position: fixed;
    bottom: 0.8rem;
    left: 0px;
    width: 100%;
    /* height: 60px; */
    z-index: 10;
    display: flex;
    justify-content: center;
}

.nav {
    height: var(--navsize);
    display: flex;
    z-index: 2;
    position: relative;
    justify-content: center;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 1);
    backdrop-filter: blur(20px);
    border-radius: 2rem;
    padding: 0 0.5rem;

}
.nav li{position: relative;  margin: 0px 1rem; padding: 0.5rem 0}
.nav__link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    min-width: 50px;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;

    font-size: var(--fz-18);
    color: #fff;
    text-decoration: none;
    transition: background-color 0.1s ease-in-out;
    position: relative;
    padding: 0.5rem 1.2rem;
    border-radius: 1.5rem;

    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    background: transparent;
}


.nav__link:hover,
.nav__link.active {
    background: var(--d-gradient);
    color: #fff;
}


.nav .submenu{
    position: absolute; left: 0px; width: 100%; bottom: 100%;
    background: rgba(0, 120, 79, 0.4);
    border: 1px solid #FFFFFF;
    border-bottom: 0;
    backdrop-filter: blur(10px);
    padding: 0px 12px;
    visibility: hidden;
    transform: translate(0, -10px);
    transition: var(--d-transition);
    pointer-events: none;
    opacity: 0;
    border-radius: 0px;
    margin-bottom: 1px;
    list-style: none;
    min-width: 8.25vw;

}
.nav .submenu:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 6px;
    left: 0;
    bottom: -6px;
}
.nav .submenu li{margin: 0}

.nav > li > ul.show {
    transform: translate(0, 0px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.nav .submenu a{padding: 0.5rem 0;
    display: block;font-weight: 400;
    font-family: 'BeVietnamPro', sans-serif;
    border-bottom: solid 1px #fff;
    font-size: var(--fz-16);
    color: #fff;
}
.nav .submenu li:last-child a{border: 0px;}
.nav .submenu a:hover{ font-weight: 600}


.nav__icon {
    font-size: 27px; height: 36px; display: flex; align-items: center;
}
.nav__icon.filmore-icon-khac{font-size: 24px;}



body.dark .nav{
    border-color: #00744D;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
}
body.dark .nav__link:not(:hover):not(.active){
    color: #00744D;
}


@media(hover: hover) and (pointer: fine) {

}

@media (max-width:1599px) {
    .nav__icon{    font-size: 20px;     height: 30px;}
    .footer-control{}
}




@media (max-width:991px) {
    .nav__link{min-width: 40px;}

    .nav .nav__link:has(+ .submenu):after{display: none;}
    .nav .submenu{min-width: 200px; width: auto;}
    .submenu .btn-toggle-submenu{left: 10px;    bottom: 5px;}
    .footer-control{ width: auto;
        right: 5rem;
        width: auto;
        top: 1.6rem;
    }
    .footer-control a{

    }
}
@media (max-width:767px) {
    .nav__link {
        padding: 0 0.75rem;
        font-size: 13px;
    }

}



@keyframes fadeInLeftMedium {
    0% {
        opacity: 0;
        transform: translateX(-60px);
    }
    50%{
       opacity: 0.3;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
.fadeInLeftMedium{
    opacity: 0;
    -webkit-transform: translateX(-60px);
    transform: translateX(-60px);
}
.fadeInLeftMedium.go {
    -webkit-animation-name: fadeInLeftMedium;
    animation-name: fadeInLeftMedium;
}

@keyframes nav-overview-item {
  0% {
    transform: translateX(-60px);
    opacity: 0; }
  100% {
    transform: translateX(0px);
    opacity: 1; } }

@keyframes nav-overview-item2 {
  0% {
     transform: translateX(0px);
    opacity: 1; }
  100% {
     transform: translateX(-60px);
    opacity: 0; } }

@keyframes nav-overview {
  0% {
    left: -50%; }
  100% {
    left: 0%; } }

@keyframes nav-overview2 {
  0% {
    left: 0%; }
  100% {
    left: -50%; } }

@keyframes nav-container-background {
  0% {
    transform: scale(1.1); }
  100% {
    transform: scale(1); } }

@keyframes nav-list-item {
  0% {
    margin-left: -25px;
    opacity: 0; }
  100% {
    margin-left: 0px;
    opacity: 1; }
}


.mask {
    position: fixed;left: 0; top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 99999;
    transition: var(--d-transition);
    transition-duration: 1s;
    transition-delay: 0.5s;
}

.mask::before{content: '';}
.mask::before {
    height: 100vh;
    position: relative;
    display: block;
    width: 100%;
}

.mask.up{opacity: 0; }
.wave-svg {
    margin: -10px 0 0;
    transform-origin: 50% 0;
}
.mask::before {
    background: #00744d url('../images/bg/intro.jpg') no-repeat center center;
    background-size: cover;
}

.mask .mask-bg{position: absolute; left: 0; top: 0; width: 100%;    height: 100vh;

    background-size: cover;
    transition: var(--d-transition);
    z-index: 4;

}
.mask .mask-bg .logo,
.mask .mask-bg .slogan{
    position: absolute;
    left: 50%; top: 50%; transform: translate(-50%,-50%);
    transition: var(--d-transition);
    transition-duration: 1.5s;
}
.mask .mask-bg .logo img,
.mask .mask-bg .slogan img{width: 100%; height: auto;}
.mask .mask-bg .logo{min-width: 200px; width: 16.25vw; }
.mask .mask-bg .slogan{
    width: 52.6vw;
    min-width: 260px;
}
.mask.up .mask-bg svg{opacity: 0; filter: blur(1.5rem); transform: translate(-50%,-50%) scale(2); }

body:not(.ready){background: #00744D}
body:not(.ready) .navbar-wrapper,
body:not(.ready) .header-right,
body:not(.ready) .btn-toggle-menu.navbar-toggler,
body:not(.ready) .header-logo
{
    opacity: 0;
}

body.ready .mask {
    pointer-events: none;
    z-index: -99999;
}
#logo_vivus path{fill-opacity: 0; stroke: #fff; stroke-width: 0.3px; }
/*#logo_vivus.done path{fill-opacity: 1; stroke-width: 0;}*/



.page-map{
    margin-top: 0;
    height:  100dvh;
}
.page-map .item-map-wrapper{overflow: hidden; background: #F4F9F5}
.page-traffic .item-map-wrapper{}
.page-map .item-map video{
    width: 100%; height:100%; object-fit:cover;
}

.page-map .item-image{height: 100%;}
.page-map .item-image object.absolute{position: absolute; left: 0px; top: 0px; pointer-events: none;}
.page-map .item-image img,
.page-map .item-image object.absolute{height: 100%; width: auto;     max-width: none;}
.page-map .item-content.absolute{right: 160px; top: 0px; color: #fff; max-width: 40vw;
    padding: 8vh 0px 5vh;
    display: flex; flex-direction: column;
    height: 100%;
}

.page-map .svg-wrapper video{width: 100%; height:100%; object-fit:cover;

}

.section-location .location-panzoom{position: relative;}
.section-location .location-panzoom img{max-width: none; position: relative;}
.section-location{
    opacity: 0;
    transition: var(--d-transition);
    height: 100dvh !important;
}
.section-location.show{
    opacity: 1;
}
.section-location .location-panzoom .map-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.section-location .location-panzoom .map-layer .logo{
    width: 180px;
    position: absolute;
    left: 34%;
    top: 27%;
    /*animation-name: logoMap;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;*/
    animation: logoMap2 2s ease-in-out infinite;
    transform-origin: center bottom;
}
.section-location .location-panzoom .map-layer .logo:before{
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    animation: logoPin 2s ease-out infinite;
    background: #fff;
    width: 60px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #fff;
    background: rgba(0,116,77,0.15);
    margin-left: -30px;
    pointer-events: none;
}

.section-location .location-panzoom .pulser{
    overflow: hidden;
    display: none;
}

.pulse {
    position: absolute;
    top: 44.5%;
    left: 47.5%;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    border: 4px dashed #008555;
}

.pulse1 {
    animation: pulse1 4s linear infinite;
}

.pulse2 {
    animation: pulse2 4s linear infinite;
}

.pulse3 {
    animation: pulse3 4s linear infinite;
}

.pulse4 {
    animation: pulse4 4s linear infinite;
}

@keyframes pulse1 {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    20% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    40% {
        transform: translate(-50%, -50%) scale(.2);
        opacity: .4;
    }

    60% {
        transform: translate(-50%, -50%) scale(.4);
        opacity: .6;
    }

    100% {
        transform: translate(-50%, -50%) scale(.6);
        opacity: 0;
    }
}

@keyframes pulse2 {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    25% {
        transform: translate(-50%, -50%) scale(.2);
        opacity: .7;
    }

    40% {
        transform: translate(-50%, -50%) scale(.4);
        opacity: .5;
    }

    65% {
        transform: translate(-50%, -50%) scale(.6);
        opacity: .3;
    }

    100% {
        transform: translate(-50%, -50%) scale(.8);
        opacity: 0;
    }
}

@keyframes pulse3 {
    0% {
        transform: translate(-50%, -50%) scale(.2);
        opacity: 0;
    }

    25% {
        transform: translate(-50%, -50%) scale(.4);
        opacity: .7;
    }

    50% {
        transform: translate(-50%, -50%) scale(.6);
        opacity: .5;
    }

    75% {
        transform: translate(-50%, -50%) scale(.8);
        opacity: .3;
    }

    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

@keyframes pulse4 {
    0% {
        transform: translate(-50%, -50%) scale(.1);
        opacity: 0;
    }

    30% {
        transform: translate(-50%, -50%) scale(.3);
        opacity: .6;
    }

    80% {
        transform: translate(-50%, -50%) scale(.6);
        opacity: .4;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0;
    }
}

@keyframes logoMap{
    0% {
        top: 22%;
    }
    50% {
        top: 21%;
    }
    to {
        top: 22%;
    }
}
@keyframes logoMap2{
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.25);
    }
    to {
        transform: scale(1);
    }
}
@keyframes logoPin{
    0% {
        transform: scale(0.5);
        opacity: 0.6;
    }
    70% {
        transform: scale(10.5);
        opacity: 0;
    }
    to {
        transform: scale(6.5);
        opacity: 0;
    }
}


@media screen and (min-width: 1200px){

}


@media screen and (min-width: 992px){
    .map svg {

    }
}


/*Mat Bang*/
.section-product-map{
    height: 100dvh;
    overflow: hidden;
    background: url('../images/bg/bg-mat-bang.jpg') no-repeat center right;
    background-size: cover;
}
.section-product-map .product-map-wrapper{position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
}
.section-product-map .product-map-wrapper .product-map-content{
    width: 36%;
    flex: 0 0 36%;
    min-width: 450px;
    height: 100%;
    display: flex;
    align-items: center;
    padding: var(--fz-40) calc(2 * var(--fz-40));
}
.section-product-map .panzoom-parent{
    flex-grow: 1;
    height: 100%;
}
.section-product-map .product-map-wrapper .product-map-content .inner{

}
.section-product-map .product-map-wrapper .product-map-content .heading{
    font-size: var(--fz-40);
    text-transform: uppercase;
    color: #fff;
}
.section-product-map .product-map-wrapper .product-map-content .heading small{
    font-size: var(--fz-18);
    display: block;
}
.section-product-map .product-map-wrapper .product-map-content .heading strong{
    display: block;
    padding-left: 0.5em;
    color: #DBC2A4;
    font-family: 'SVN-Yipes', sans-serif;
    font-size: 1.8em;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 0.3em;
}
.section-product-map .product-map-wrapper .product-map-content ul.legend{
    list-style: none;
    margin: 0;
    padding: 0;
}
.section-product-map .product-map-wrapper .product-map-content ul.legend li{
    display: flex;
    gap: 0.75rem;
    justify-content: flex-start;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    color: #fff;
        align-items: center;
}
.section-product-map .product-map-wrapper .product-map-content ul.legend li span{
    /*width: 4.2rem;
    height: 1.875rem;*/
    display: inline-flex;
    width: 0.65rem;
    flex: 0 0 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: #fff !important;
}


.section-product-map .product-map-wrapper .panzoom-parent{

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

}


.section-product-map .product-map{
    position: absolute;
    width:100%; height: 100%;
    opacity: 0;
    transition: var(--d-transition);
}
.section-product-map .product-map.show{
    opacity: 1;
}
.section-product-map .product-map .inner{
     background-repeat: no-repeat;
     background-size: 100% auto;
     width:100%; height: 100%;
}
.section-product-map .product-map .inner,
.section-product-map .product-map .items,
.section-product-map .product-map .svg-map{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.section-product-map .product-map .svg-map svg{
    width: 100%;
    height: auto;
}
.section-product-map .product-map .svg-map svg {}

.section-product-map .item{position: absolute; z-index: 2; pointer-events: none;}
.section-product-map .item a{position: relative;
    text-align: left;
    background: rgba(0, 120, 79, 1);
    font-size: var(--fz-16);
    font-weight: 400;
    padding: 5px 10px;
    color: #fff;
    transform: translateX(-50%) translateY(-100%);
}
.section-product-map .item.placement-bottom a{
    transform: translateX(-50%) translateY(60%);
}
.section-product-map .item a ul{margin: 0; list-style: none; padding: 0}
.section-product-map .item a ul li{margin: 2px 0px; position: relative; padding-left: 1.5em;}
.section-product-map .item a ul li:before{
    content: '';
    position: absolute;
    width: 0.4em;
    height: 0.4em;
    border-radius: 50%;
    background: #fff;
    left: calc((1.5em - 0.4em) / 2 );
    top: 0.6em;
}
.section-product-map .item:not(.show) a{ opacity: 0; pointer-events: none;}
.section-product-map .item .inner{

}

.section-product-map .svg-map .item-hover path,
.section-product-map .svg-map .item-hover rect{
    fill-opacity: 0;
    stroke: rgba(219, 194, 164, 1);
    stroke-miterlimit: 10;
    stroke-width: 2;
    stroke-dasharray: 5000;
    stroke-dashoffset: 5000;
    cursor: pointer;
    fill: rgba(0, 120, 79, 0.7);
}
.section-product-map .svg-map .item-hover.show path,
.section-product-map .svg-map .item-hover.show rect {
    animation-name: DrawStroke2;
    animation-duration: 2.5s;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-timing-function: linear;
    /*filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 1));*/
    fill-opacity: 1;
}

@media(max-width: 1199px){
    .section-product-map .svg-map .item-hover path,
    .section-product-map .svg-map .item-hover rect{
        fill-opacity: 0.35;
    }
}

body.show-product-detail .header-logo,
body.show-product-detail #header .navbar-brand,
body.show-product-detail #header .header-right,
body.show-product-detail .sticky--right,
body.show-product-detail .footer-control,
body.show-product-detail .page-nav {display: none;}

.product-detail .btn-close{
    position: absolute;
    right: var(--fz-28);
    top: var(--fz-28);
    color: #fff;
    padding: 0.5rem;
    padding: 0.75rem;
    background-color: #fff;
    border-radius: 0;
    z-index: 2;
    border-radius: 50%;
}
.section-product-map .product-detail{
    position: absolute;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100 );
    background: #04150A url('../images/bg/bg-product.png') no-repeat center center;
    background-size: cover;
    left: 0;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    transform: translateX(100%);
    pointer-events: none;
    visibility: hidden;
    transition: var(--d-transition);

}
.section-product-map .product-detail.show{
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.section-product-map .product-detail .product-info{
    flex:  0 0 360px;
    position: relative;
    padding: var(--fz-40) var(--fz-40) var(--fz-18);
    border-radius: 0;
    color: #fff;
     display: flex;
    flex-direction: column;
    font-size: var(--fz-18);
}
.section-product-map .product-detail .product-info .btn{
    margin: 1rem 0;
    font-size: var(--fz-24);
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.5rem 1.5rem;
    border-radius: 2.5rem;
}
.section-product-map .product-detail .product-info  .sidebar-note{
    margin-top: auto;
    font-size: var(--fz-14);
}
.section-product-map .product-detail .product-info h2{text-transform: uppercase; color: #fff; font-size: var(--fz-28);}
.section-product-map .product-detail .product-info h4{
    text-transform: uppercase; color: #fff; font-size: var(--fz-24);
    border-top: solid 1px #fff;
    border-bottom: solid 1px #fff;
    padding: 0.6rem 0;
}
.section-product-map .product-detail .product-info table{margin-bottom: 1rem;}
.section-product-map .product-detail .product-info table td{border: 0; padding: 6px 10px 6px 0px;
    text-transform: uppercase;
}
.section-product-map .product-detail .product-info table tr td:last-child{font-weight: 700}


.section-product-map .product-detail .product-image svg{
    position: absolute;
    width: 100%;
    height: 100%;
}
.section-product-map .product-detail .product-image svg .trigger-fancybox-manual{cursor: pointer;}
.section-product-map .product-detail .product-image svg .trigger-fancybox-manual:hover rect,
.section-product-map .product-detail .product-image svg .trigger-fancybox-manual:hover path{
    fill-opacity: 0.4;
    fill: #143980 ;
}

.section-product-map .product-detail .product-info .item-thumb{
    padding-top: calc(100% * 223 / 370);
    margin-bottom: 2rem;
}
.section-product-map .product-detail .product-info .editor-content{
    padding: 0;
}

.product-detail .nav-tabs-style-1{
    z-index: 2;
    justify-content: center;
    width: auto;
    height: auto;
    gap: 0.6rem;
    background: transparent;
}

.product-detail .nav .nav-item {
    margin: 0;

}

.product-detail .nav .nav-link {
    border-radius: 1.4rem;
    padding: 0.5rem 1.8rem 0.4rem;
    color: #fff;
    font-size: var(--fz-16);
    font-weight: 700;
    white-space: nowrap;
    border: solid 1px #FFFFFF;
    text-transform: uppercase;

}
.product-detail .nav .nav-link.active{
    background: #74D6B5;
    color: #fff;
}
.product-detail .product-image {
    padding:0 calc(1.5 * var(--d-padding))  var(--navsize);
    flex-grow: 1;
}
.product-detail .product-image .item-image{text-align: center;}
.product-detail .product-image .item-thumb{
    height: calc(100vh - var(--navsize) - 10rem );
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-detail .product-image .item-thumb img{max-height: 100%;}


.product-detail .btn-back{
    /*color: #3B3C43; opacity: 1; position: absolute; right: 0px; top: 10px; padding: 0;
    background: transparent;
    margin: 0px;
    border: 0;
    width: 40px; height: 40px;
    background: #0085FF;
    border-radius: 5px 0px 0px 5px;
    z-index: 2;*/
    cursor: pointer;
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    color: #fff;
    font-size: var(--fz-18);
}

@media(min-width: 1400px){
    .section-product-map .product-detail .product-info{
        flex: 0 0 27vw;
    }
}
@media(min-width: 1200px){
    .section-product-map .product-map-wrapper .product-map-content ul.legend{
        margin-top: 5rem;
    }
}
@media (max-width:1199px) {
    .section-product-map .product-map{
        transform-origin: center;
    }
    .section-product-map{

        display: flex;
        align-items: center;
        overflow: hidden;
    }

    .section-product-map .product-detail .product-info{flex: 0 0 300px;}
    /*.section-product-map .product-map-wrapper{height: auto !important; min-height: calc(100vw * var(--h,980)  /  var(--w,1920));position: relative;    }*/
    .section-product-info .section-bg{width: 100%; min-height: calc(100vw * 999 / 1920); position: relative;}
}
@media (max-width:991px) {

    .section-product-map .product-map-wrapper{
        flex-direction: column;
    }
    .section-product-map .product-map-wrapper .product-map-content{
        width: 100%;
        min-width: 300px;
        padding: 1.5rem 1.5rem calc(3rem + var(--navsize));
        align-items: flex-start;
        flex: auto;
        height: auto;
    }
    .section-product-map .product-map-wrapper .product-map-content ul.legend{
        display: flex;
        gap: 1.75rem;
        flex-wrap: wrap;
    }
    .section-product-map .product-map-wrapper .product-map-content ul.legend li{
        flex:  0 0 calc(50% - 0.875rem);
        margin: 0;
    }
    .section-product-map .product-map-wrapper .product-map-content ul.legend li span{

    }

    .section-product-map .product-detail{flex-direction: column; overflow: auto;}
    .product-detail .btn-close{

    }

    .section-product-map .product-detail .product-image{
        padding: 2rem 0.75rem;
        display: flex;
        flex-direction: column;
        width: 100%;

    }
    .product-detail .product-image .item-thumb{
        height: auto;
    }
    .product-detail .tab-content{order: 2; margin: 0; padding-top: 0}
    .product-detail .nav-tabs-style-1{
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow: auto;
        width: 100%;
        padding-bottom: 0.5rem;
        margin-bottom: 0.75rem;
    }
    .section-product-map .product-detail .product-image img{

    }
    .section-product-map .product-detail .product-info{
        width: 100%;
        padding-top: 5rem;
        border-radius: 0;
    }
    .section-product-map .product-detail .sidebar-content{
        width: 100%;
        max-width: 100%;
    }
    #page_container .nav-tabs-default li{}

}


@media (max-width:767px) {
    .section-product-map .product-detail .product-info h4{
        margin-bottom: 0.6rem;
    }
    .product-detail .nav .nav-link{
        padding: 0.4rem 1rem;
    }
    .section-product-map .product-map-wrapper .product-map-content ul.legend{
        gap: 0.5rem;
        font-size: 12px;
    }
}


@media (max-width:767px) {

}

@keyframes DrawStroke2 {
    0% {
        stroke-dashoffset: 5000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.btn-sticky{
    backdrop-filter: blur(10px);
    border-radius: 0.5rem 0px 0px 0.5rem;
    background: linear-gradient(270deg, #E7C986 0.35%, #F4E7CB 50.18%, #E7C986 100%);
    padding: 2px;
    height: var(--iconsizemd);
    width: var(--iconsizemd);
    z-index: 10;
    color: #00744D;
    pointer-events: auto;
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--iconsizemd) / 2);
}
.btn-sticky.right-bottom{
    left: auto;
    right: 0;
    bottom: calc(var(--navsize) + 2.2rem);
}
.btn-sticky.left-bottom{
    left: 0;
    right: auto;
    bottom: calc(var(--navsize) + 2.2rem);
    border-radius: 0 0.5rem 0.5rem 0;
}

.tour-utilitiesmap{
    /*position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    padding: 2rem 20vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(2, 33, 28, 0);
    pointer-events: none;
    display: flex;
    transition: var(--d-transition);*/
    position: fixed;
    width: 25vw;
    min-width: 260px;
    z-index: 23;
    right: 0;
    bottom: calc(var(--navsize) + 2.2rem);
}
.tour-utilitiesmap .btn-toggler{
    bottom: 0;
    transition-duration: 0s;
}
.tour-utilitiesmap.show .btn-toggler{
    right: 100%;
}
.tour-utilitiesmap.show .btn-toggler i:before {
    content: '\f101';
}
.tour-utilitiesmap.active{

}
.tour-utilitiesmap .utilities-image-wrapper{
    width: 100%;
    display: none;
}
.tour-utilitiesmap.show{
    background: rgba(2, 33, 28, 0.6);
    pointer-events: auto;
}
.tour-utilitiesmap.show .utilities-image-wrapper{
    display: block;
}
.tour-utilitiesmap .btn-close{

    height: var(--iconsizemd);
    width: var(--iconsizemd);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(calc(-100%),0);
    background: #F2F2F2;
    color: #A4A4A4;
    opacity: 1;
    font-size: calc(var(--iconsizemd) / 2);
    border-radius: 5px 0 0 5px;
    display: none;
}
.tour-utilitiesmap .btn-close:hover{
    background: var(--d-gradient);
}

.utilities-map{
    position: relative;
    z-index: 10;
    --makerSize:7px;
}

.utilities-map .makers{position: absolute; top: 0; left: 0px; width: 100%; height: 100%;}
.utilities-map .makers .item{
    width: var(--makerSize);
    height: var(--makerSize);
    position: absolute;
    top: 0;
    left: 0;
    margin-top: calc(-1/2 * var(--makerSize));
    margin-left: calc(-1/2 * var(--makerSize));
    cursor: pointer;
    z-index: 2;
}

.utilities-map .makers .item .point{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(255,255,255,1);
    border: solid 1px #00744D;
    transition-duration: 0s;
    opacity: 1;
}
.utilities-map .makers .item .title{
    position: absolute;
    left: 50%;
    bottom: calc(100% + 1rem);
    transform: translateX(-50%) translateY(-1rem);
    border-radius: 1.5rem;
    padding: 0.5rem 1rem;
    background: var(--d-gradient);
    pointer-events: none;
    opacity: 0;
    transition: var(--d-transition);
    color: #fff;
    min-width: 10rem;
    text-align: center;
}
.utilities-map .makers .item:hover{
    z-index: 3;
}
.utilities-map .makers .item:hover .title{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.utilities-map .makers .item:not(:active) .point
{
    box-shadow: 0px 10px 25px -3px rgba(0,0,0,0.5);
}
.utilities-map .makers .item[data-action='pano']{
    z-index: 3;
}
.utilities-map .makers .item[data-action='pano']:not(:active) .point{
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
    animation-name: makersItem;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;

}
.utilities-map .makers .item.active{

}
.utilities-map .makers .item.active .point{
    opacity: 1; z-index: 1;   background: transparent;
    transform: rotate(calc(var(--panoposition)* 1deg));

}
.utilities-map .makers .item.active .point:after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: calc(6 * var(--makerSize));
    height: calc(6 * var(--makerSize));
    background: url("../images/icon-rada.svg") no-repeat center center; background-size: contain;
    border: 0;
    border-radius: 0;
    pointer-events: none;
}



.utilities-map .svg-map{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.utilities-map .item-maker{
    cursor: pointer;
}
.utilities-map .item-maker circle{
    fill: #00744D;
}
.utilities-map .item-maker text{
    fill: #fff;
}
.utilities-map .item-maker.current {


}


.utilities-image-wrapper .map-tooltip {
      pointer-events: none;
      position: absolute;
      text-align: center;
      z-index: 5;
      height: auto;
      margin: 0 auto;
      color: #fff;
      transform: translate(-50%,-100%);
      display: none;
    align-items: center;
    background: #fff;
    border-radius: 1.5rem;
    padding: 0.5rem 1rem;
    background: var(--d-gradient);

}
.utilities-image-wrapper .map-tooltip h5{
    color: #fff;
    font-size: var(--fz-13);
    font-weight: 700;
    margin: 0;
    padding: 0;
}
.utilities-image-wrapper .map-tooltip.bottom{
    transform: translate(-50%,0);
}
.utilities-image-wrapper .map-tooltip.active {
  display: flex;
}
.subdivision-maker img{
    display: none;
     width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0.4rem;
    margin-bottom: 0.5rem;
}


.widget-tienich .utilities-list-wrapper{
    display: none;
}
.widget-tienich .utilities-list-wrapper .section-content{
    min-height: 150px;
    max-height: 48vh;
}
.widget-tienich.show{
    pointer-events: auto;
}
.widget-tienich.show .utilities-list-wrapper{
    display: block;
}
.widget-tienich.show .utilities-list-wrapper .section-content{

}

.tour-utilitieslist{
    position: fixed;
    width: 25vw;
    min-width: 260px;
    z-index: 23;
    left: 0;
    bottom: calc(var(--navsize) + 2.2rem);
}
.tour-utilitieslist .btn-toggler{
    position: absolute;
    left: 0;
    bottom: 0;
    pointer-events: auto;
    transition-duration: 0s;
}
.tour-utilitieslist.show .btn-toggler{
    left: 100%;

    margin-bottom: 1rem;
}
.tour-utilitieslist.show .btn-toggler i:before{
    content: '\f00d';
}
.tour-utilitieslist .utilities-list-wrapper{
    background: #fff;
    border-radius: 0 0.5rem 0.5rem 0px;
    padding: var(--fz-40);
}



.tour-utilitieslist .utilities-list-wrapper .section-title{
    line-height: 1;
    margin-left: calc(var(--fz-40) * -1);
    padding: 0.5rem 0 0 var(--fz-40);
    background: linear-gradient(90deg, #008555 0%, rgba(0, 164, 107, 0) 100%);
    backdrop-filter: blur(10px);
    text-transform: uppercase;
    font-size: var(--fz-52);
    font-weight: 500;
    color: #fff;
}
.tour-utilitieslist .utilities-list-wrapper ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.tour-utilitieslist .utilities-list-wrapper ul li{
    margin-bottom: 1rem;
}
.tour-utilitieslist .utilities-list-wrapper ul li a{
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.tour-utilitieslist .utilities-list-wrapper ul li a{
    font-weight: 500;
    color: #000;
    cursor: pointer;
}

.tour-utilitieslist .utilities-list-wrapper ul li span.number{
    width: 2rem;
    height: 2rem;
    flex: 0 0 2rem;
    border-radius: 50%;
    background: var(--d-gradient);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.tour-utilitieslist .utilities-list-wrapper ul li:hover a{
    color: #00744D;
}

/*
@media(max-width: 991px){
    .tour-utilitiesmap{
        padding: 2rem 5vw;
    }
    .tour-utilitiesmap .btn-close{
        transform: translate(0, -100%);
        right: 0;
        top: -5px;
    }
}
@media(max-width: 767px){
    .tour-utilitiesmap{
        padding: 2rem 0.75rem;
    }
}
*/


.overview-nav,
.page-nav{
    position: fixed;
    top: var(--fz-52);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
}
.overview-nav ul,
.page-nav ul{list-style: none; padding: 0; display: flex;}
.overview-nav li,
.page-nav ul li {margin: 0px 0.5rem;}
.overview-nav li a.btn,
.page-nav ul li a.btn{
    font-size: var(--fz-18);
    white-space: nowrap;
}
@media(max-width: 767px){
    .overview-nav li,
    .page-nav li{
        margin: 0px 0.2rem;
    }
    .overview-nav li a.btn,
    .page-nav li a.btn{
        font-size: 13px;
    }


}
@media(max-width: 479px){
    .utilities-nav > ul > li{
        margin: 0px 0.25rem;
    }
    .utilities-nav > ul > li > a.btn{
        font-size: 11px;
        padding: 0.5rem 0.75rem 0.5rem;
    }
}

/*
.subdivision-nav{
    position: fixed;
    top: var(--fz-52);
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;
}
.subdivision-nav > ul {
    margin: 0;
    list-style: none;
    padding: 0;
}
.subdivision-nav ul li{margin-bottom: 0; position: relative;}
.subdivision-nav > ul > li > a{
    background: rgba(0, 91, 170, 0.9);
    border-radius: 2rem;
    color: #fff;
    font-weight: 700;
    font-size: var(--fz-16);
    padding: 10px 40px 10px 15px;
    border: solid 2px #fff;
    text-transform: uppercase;
    position: relative;
    white-space: nowrap;
    display: block;
}
.subdivision-nav > ul > li > a:has(+ ul):after {
    content: "\f078";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-weight: 300;
}

.subdivision-nav ul li ul {
    position: absolute;
    left: 50%;
    right: 10px;
    top: 100%;
    background: #fff;
    padding: 10px 8px 10px;
    visibility: hidden;
    transform: translate(-50%, 10px);
    transition: var(--d-transition);
    pointer-events: none;
    opacity: 0;
    border-radius:0px 0px 4px 4px;
    list-style: none;
    min-width: 150px;
}

.subdivision-nav ul li ul li a {
    color: #2f2f2f;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    display: block;
    padding: 10px;
    border-radius: 4px;
}
.subdivision-nav ul li ul li:hover a{
    background: #00744D;
    color: #fff;
}
.subdivision-nav ul > li:hover > ul {
    transform: translate(-50%, 0px);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

*/



.tour-floorplan{
    position: fixed;
    top: 20%;
    left: 0;
    width: 303px;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    color: #000;
    z-index: 9;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.75);
    border-radius: 0px 0.5rem 0.5rem 0px;

    transform: translateX(-100%);
}

.tour-floorplan .content{flex-grow: 1; height: 75%;}

.tour-floorplan.show{
    opacity: 1;
    visibility: visible;
}


.tour-floorplan .btn-tour-floorplan{
    position: absolute;
    height: var(--iconsizemd);
    width: var(--iconsizemd);
    background: #00744D;
    right: calc(var(--iconsizemd) * -1);
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border-radius: 0px 0.5rem 0.5rem 0px;
    transition-duration: 0s;
    cursor: pointer;
}
.tour-floorplan .btn-tour-floorplan:hover{
    background: var(--d-gradient);
}
.tour-floorplan .btn-tour-floorplan:before{
    content: '\f054';
    position: absolute;
    font-family: "Font Awesome 5 Pro";
    font-size: 24px;
    color: #fff;
    font-weight: 300;
}
.tour-floorplan.active{
    transform: translateX(0);
}
.tour-floorplan.active .btn-tour-floorplan{
    right: 0;
    border-radius: 0px 0.5rem 0 0px;
}
.tour-floorplan.active .btn-tour-floorplan:before{
     content: '\f053';
}


.tour-floorplan .floorplan-wrapper{height: 100%;  justify-content: center;    align-items: flex-start;
    flex-direction: column;
}
.tour-floorplan .floorplan-wrapper.show{

}
.tour-floorplan .dropdown{
    position: relative;
    z-index: 2;
}
.tour-floorplan .floorplan-wrapper .heading{
    position: relative;
    width: 100%;
    padding-right: var(--iconsizemd);
    background: #E3E3E3;
    border-radius: 0px 0.5rem 0 0px;
}
.tour-floorplan .floorplan-wrapper .floorplan-title{
    font-size: var(--fz-14);
    color: #00744D;
    font-weight: 700;
    text-transform: uppercase;
    padding: 8px 15px;
    height: var(--iconsizemd);
    line-height: var(--iconsizemd);
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: calc(100% - var(--iconsizemd));

}

.tour-floorplan .page-title{
    padding: 10px;
    font-size: var(--fz-16);
    color: #00744D;
    font-weight: 700;
    text-transform: uppercase;

}

.tour-floorplan .floorplan-wrapper .floorplan-image{
    padding: 10px;
    position: relative;
    aspect-ratio: 1;
    width: 100%;
}
.tour-floorplan .floorplan-wrapper .inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.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;   }
.tour-floorplan .floorplan-wrapper .makers{position: absolute; top: 0; left: 0px; width: 100%; height: 100%;}
.tour-floorplan .floorplan-wrapper .makers .item{
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,1);
    border: solid 1px #00744D;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: -6px;
    margin-left: -6px;
    cursor: pointer;
    z-index: 2;
    transition-duration: 0s;
    opacity: 0.7;
}
.tour-floorplan .floorplan-wrapper .makers .item:not(:active){
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
    animation-name: makersItem;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-timing-function: linear;

}
.tour-floorplan .floorplan-wrapper .makers .item.active{opacity: 1; z-index: 1;   background: transparent;}
.tour-floorplan .floorplan-wrapper .makers .item.active:after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 90px;
    height: 90px;
    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;}

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

@keyframes makersItem {
    0% {
        background: #00744D;
    }
    50%{
       background: #fff;
       opacity: 1;
    }
    100% {
        background: #00744D;
    }
}




#header { background: transparent; position: fixed; top: 0; width: 100%; transition-duration: 0.3s;  z-index: 22;
    visibility: hidden;
    padding-top:  var(--fz-28);
    pointer-events: none;

}
#header.show{opacity: 1; visibility: visible;}
#header.sticky {}
.navbar-header { position: relative; z-index: 1; }
#header .navbar {padding-left: 0px; padding-right: 0px; align-items: flex-start; padding: 0; }
#header .navbar-brand { margin: 0px 0;
 transition-duration: 0.3s;
    height: auto; padding: 0px;
    pointer-events:auto;
    width: 5.885416666666667vw;
    min-width: 70px;
    display: flex;
    align-items: center;
    justify-content: center;

}

#header .navbar-brand svg,
#header .navbar-brand img{ width: 100%;height: auto;}
#header .navbar-brand object{pointer-events: none;}

body #header .navbar-brand .logo-color{display: none;}
body.dark #header .navbar-brand .logo{display: none;}
body.dark #header .navbar-brand .logo-color{
    display: block;
}
@media (min-width: 1201px){

}

#navigation { padding: 0px; position: relative; text-align: right;}


.header-bottom{}

.header-bottom .navbar{/*padding-top: 30px;*/}
#header{

}
#header .header-right .btn-icon{
    margin-right: 0.75rem;
}
#header .header-right .btn-icon .icon{
    width: 1.5625vw;
    min-width: 27px;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
#header .header-right .btn-icon .icon img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#header .header-right .btn-icon .icon .svg-hover{display: none;}
#header .header-right a.btn-icon.music-mute .icon .svg{display: none;}
#header .header-right a.btn-icon.music-mute .icon .svg-hover{display: block;}

#header .header-right {display: none; align-items: center;
    color: #fff;
    pointer-events: auto;
}
#header .header-right > a{ position: relative;
    text-transform: uppercase; font-weight: 500;
    font-size: var(--fz-14);
}

#header .header-right a.svg-ani{color: #fff;display: flex; align-items: center;
    padding: 0;
    margin-left: 2rem;
}
#header .header-right a.svg-ani span{white-space: nowrap;}
body.menu-open #header .header-right a.svg-ani{}
#header .header-right .svg{height: 22px; width: auto; }

#header:not(.is-alternate) { -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; }


.header-bottom .navbar-toggler{
    border: 0px;
     padding: 0;  position: relative;
     height: 2.6rem;
     background: #F2F2F2;
     padding: 3px;
     display: flex;
     align-items: center;
     border-radius: 0.25rem;
}


.header-bottom .navbar-toggler:focus{outline: none;box-shadow: none;}


#header .navbar-toggler-icon-wrapper {
    height: 100%;
    width: auto;
    aspect-ratio: 1;
    cursor: pointer;
    /* margin-bottom: 5px; */
    transition: 0.3s ease all;
    order: 2;
    position: relative;

}
#header .navbar-toggler-icon-wrapper .navbar-toggler-icon{
    height: 50%;
    background: transparent;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    transition: 0.3s ease all;
}
header .navbar-toggler-icon > span {
    display: block;
    width: 100%;
    height: 0.125rem;
    border-radius: 0.25rem;
    background-color: #A4A4A4;
    position: absolute;
    transition: 0.3s ease all;
}


header .navbar-toggler-icon > span:nth-of-type(1) {
    width: 100%;
    top: 0;
    left: 0%;
}
header .navbar-toggler-icon > span:nth-of-type(2) {
    width: 100%;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}
header .navbar-toggler-icon > span:nth-of-type(3) {
    width: 100%;
    top: 100%;
    left: 0;
    transform: translateY(-100%);
}
header .navbar-toggler:hover .navbar-toggler-icon > span {
    width: 100%;
    transition: 0.3s ease all;
}

body.menu-open #header .navbar-toggler .navbar-toggler-icon > span:nth-child(1) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
body.menu-open #header .navbar-toggler .navbar-toggler-icon > span:nth-child(2) {
    opacity: 0;
}
body.menu-open #header .navbar-toggler .navbar-toggler-icon > span:nth-child(3) {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}
.header-bottom .navbar-toggler:hover{
    background: #00744D;
}
.header-bottom .navbar-toggler:hover span{
    background-color: #fff;
}

@media(min-width:1200px){

}


/*Overlay Menu*/

.overlay-menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 21;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.overlay-menu:before{
    position: absolute;
    inset: 0;
    background: radial-gradient(56.53% 56.53% at 50% 50%, rgba(1, 31, 95, 0.00) 0%, #001645 100%);
}
.overlay-menu .bg{

}
.overlay-menu .main-menu-container {
    text-align: left;
    display: flex;
    padding: calc(2.6rem + 2 * var(--fz-28)) 0 calc(0.25 * var(--d-padding));
    margin: 0; margin-left: auto;
    list-style-type: none;
    flex-direction: column;
    position: relative;
    height: 100%;




}
.overlay-menu .main-menu-container .menu-wrapper{
    display: flex;
    flex-grow: 1;
    padding-top: 2.5rem;

}
.overlay-menu .main-menu-container .menu-footer{
    margin-top: auto;
    padding: 0px var(--fz-24);
    border-top: solid 1px #F2F2F2;
}
.overlay-menu .main-menu-container .menu-footer .menu-logo{
    text-align: right;
}
.overlay-menu .main-menu-container .menu-footer .menu-logo img{
    width: 6.979166666666667vw;
    min-width: 100px;
}
.overlay-menu .main-menu-container .menu-bottom{
    border-top: solid 1px #fff;
    padding: 0.75rem 0;
    margin-top: 1.25rem;
    display: flex;
    justify-content: space-between;
}
.overlay-menu .main-menu-container .social a{
    background: #F2F2F2;
    width: var(--iconsize);
    height: var(--iconsize);
    border-radius: 50%;
    color: #A4A4A4;
    font-size: calc(var(--iconsize) / 2);
    margin: 0 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.overlay-menu .main-menu-container .social a:hover{
    background: #00744D;
    color: #fff;
}

.overlay-menu .main-menu-container::-webkit-scrollbar {
    display: none;
}

.overlay-menu .menu > li > a {
    color: #000000;
    transition: all ease 0.4s;
    display: block;
    font-size: var(--fz-28);
    font-weight: 400;
    text-transform: uppercase;
    position: relative;
    padding: var(--fz-24) 0;
    border-top: solid 1px #F2F2F2;
    display: block;
    border-radius: 0;
}
.overlay-menu .menu > li:first-child > a{
    padding-top: calc(2 *  var(--fz-24)) ;
}

.overlay-menu .menu li:hover > a,
.overlay-menu .menu .current-menu-item > a{
    color: #00744D;
}
.overlay-menu .menu li:hover a:after{
    /*width: calc(100% );*/
}
/*.overlay-menu .menu .current_page_parent a{color: #011F5F; }*/

.overlay-menu {
    transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transition: all cubic-bezier(0.77, 0, 0.175, 1) 0.5s;
    padding-bottom: 0px;
}

.overlay-menu .copyright{position: absolute; bottom: 30px; left: 0px; width: 100%;color: #fff;
    opacity: 0; transition: var(--d-transition); text-align: center;
}
body.menu-open .overlay-menu {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
}
body.menu-open .overlay-menu .copyright {
    opacity: 1;
    transition-delay: 1s;
}

.overlay-menu .menu{
    list-style: none; padding: 0px;
    margin: 0;
    padding: 0 var(--fz-24);
    width: 100%;
}

.overlay-menu .menu > li {
    opacity: 0;
    transform: translate(0, 50px);
    -webkit-transform: translate3d(0, 50px, 0);
    transition-delay: 0.6s;
    padding:0 ;
    margin: 0;
    text-align: right;
}

body.menu-open .overlay-menu .menu li {
    transition: -webkit-transform cubic-bezier(0.165, 0.84, 0.44, 1) 1s, opacity cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
    transition: transform cubic-bezier(0.165, 0.84, 0.44, 1) 1s, opacity cubic-bezier(0.165, 0.84, 0.44, 1) 1s;
    opacity: 1;
    transform: translate(0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    position: relative;
}


.overlay-menu li .submenu{
    position: absolute;
    top: 0;
    left: calc(-1 * var(--fz-24) - 0.5rem);
    transform: translateX(-100%) scale(0);
    flex-direction: column;
    opacity: 1;
    transition: all 0.4s ease;
    padding: 0rem 1.5rem;
    padding-left: calc(1.3 * var(--fz-40) + 1rem);
    list-style: none;
    transition: var(--d-transition);
    background: #fff;
    border-radius: 0.25rem;
    padding: 0.5rem;
    pointer-events: none;
    opacity: 0;
    transition-duration: 0.3s;
    font-family: 'BeVietnamPro', sans-serif;
}
.overlay-menu .menu>li.showsub >ul {
    transform:translateX(-100%) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 400px;
    pointer-events: auto;
    overflow: auto;
}
.overlay-menu li .submenu li{
    margin-bottom: 0.25rem;
}
.overlay-menu li .submenu li:last-child{margin: 0}
.overlay-menu li .submenu li a{
    font-size: var(--fz-16);
    padding: 0.3rem 1.5rem;
    background: #F2F2F2;
    border-radius: 0.25rem;
    display: block;
    font-weight: 500;
    color: #A4A4A4;
    text-align: center;
}
.overlay-menu li .submenu li:hover a{
    background: #00744D;
    color: #fff;
}

.overlay-menu li .submenu li a:before{
    display: none;
}

.overlay-menu li .submenu-grid{
    width: 11.5vw;
    min-width: 175px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 0.3125rem 0.3125rem;
}
.overlay-menu li .submenu-grid li{
    flex: 0 0 50%;
    width: 50%;
    padding: 0.1125rem;
    margin: 0;

}
.overlay-menu li .submenu-grid li a{
    padding: 0;
    border: solid 1px rgba(164, 164, 164, 0.5);
    border-radius: 0;
    display: block;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.overlay-menu li .submenu-grid li a .item-thumb{
    padding-top: calc(100% * 60 / 95);
}
.overlay-menu li .submenu-grid li a .title{
    padding: 0.3rem;
    text-align: center;
    font-size: var(--fz-16);
     text-transform: none;
    font-weight: 400;
    flex-grow: 1;
}
.overlay-menu li .submenu-grid li:hover a .title{

}



body.menu-open #header .navbar-brand{opacity: 0;}



body.menu-open{overflow: hidden !important;}
body.menu-open .overlay-menu .menu > li:nth-of-type(1) {
    transition-delay: 0.2s;
}
body.menu-open .overlay-menu .menu > li:nth-of-type(2) {
    transition-delay: 0.3s;
}
body.menu-open .overlay-menu .menu >  li:nth-of-type(3) {
    transition-delay: 0.4s;
}
body.menu-open .overlay-menu .menu > li:nth-of-type(4) {
    transition-delay: 0.5s;
}
body.menu-open .overlay-menu .menu > li:nth-of-type(5) {
    transition-delay: 0.6s;
}
body.menu-open .overlay-menu .menu > li:nth-of-type(6) {
    transition-delay: 0.7s;
}
body.menu-open .overlay-menu .menu > li:nth-of-type(7) {
    transition-delay: 0.8s;
}
body.menu-open .overlay-menu .menu > li:nth-of-type(8) {
    transition-delay: 0.9s;
}
body.menu-open .overlay-menu .menu > li:nth-of-type(9) {
    transition-delay: 1s;
}
body.menu-open .overlay-menu .menu > li:nth-of-type(10) {
    transition-delay: 1.1s;
}
body.menu-open .overlay-menu .menu > li:nth-of-type(11) {
    transition-delay: 1.2s;
}

body.menu-open .overlay-menu .menu.menu-other > li {
     transition-delay: 0.2s;
}
@media (max-width:1699px) {


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


}

@media (max-width:1299px) {
    .nav li{
        margin: 0px 0.4rem;
    }
}
@media (max-width:991px) {

    .overlay-menu .menu{
        padding: 0px 1.5rem;
    }
    body.menu-open #header .navbar-brand{opacity: 1;}

    .nav-wrapper{
        bottom: 0rem;
    }
    .nav-wrapper .nav{display: none;}
    .nav-wrapper .tour-nav{bottom: 0}
    #header .header-right{
        display: flex;
    }

    .overview-nav, .page-nav{
        top: auto;
        bottom: 0.25rem;
    }

}
@media (max-width:767px) {
    .header-bottom .navbar-toggler > span{
        padding: 0px 1.2rem;
    }
    .overlay-menu .main-menu-container .social a{
        margin: 0 0.25rem;
    }
    .overlay-menu .main-menu-container .social{
        --iconsize: 30px;
    }
}