html {
    scrollbar-gutter: stable !important;
}
.wrapper{
	max-width:100%!important;
	padding:0 25px!important;
	gap:0!important;
}
.elementor .e-div-block-base{
	padding:0;
}
*, *:before, *:after {
    box-sizing: border-box !important;
}/* --- 1. DISPLAY & FLEXBOX --- */
.d-block { display: block !important; }
.d-none  { display: none !important; }
.d-flex  { display: flex !important; }
.wrap  { flex-wrap: wrap !important; }
.column { flex-direction: column; }
/* JUSTIFY Flex */
.justify-between { justify-content: space-between !important; }
.justify-center  { justify-content: center !important; }
.align-center  { align-items: center !important; }
.stretch{align-items: stretch;}
/* Grid layout */
.grid {
  display: grid!important;
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.span-1 { grid-column: span 1; }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-full { grid-column: 1 / -1; } 
.order-1{order: 1;}
.order-2{order: 2;}
.order-3{order: 3;}
.grid-between{ display:grid; grid-template-columns:1fr; row-gap:24px!important; }

/* Gap */
.gap-10 { column-gap: 10px !important; }
.gap-20 { column-gap: 20px !important; }
.gap-30 { column-gap: 30px !important; }
.gap-40 { column-gap: 40px !important; }
.gap-50 { column-gap: 50px !important; }
.gap-60 { column-gap: 60px !important; }
.row-gap-10{ row-gap: 10px !important;}
.row-gap-20{ row-gap: 20px !important;}
.row-gap-30{ row-gap: 30px !important;}
.row-gap-40{ row-gap: 40px !important;}
.row-gap-50{ row-gap: 50px !important;}
.row-gap-70{ row-gap: 70px !important;}

/* --- 2. SIZE --- */
.w-25  { width: 25% !important; }
.w-33  { width: 33.333% !important; }
.w-50  { width: 50% !important; }
.w-70  { width: 70% !important; }
.w-100 { width: 100% !important; }

/* --- 3. POSITION --- */
.relative { position: relative !important; }
.absolute { position: absolute !important; }

/* --- 4. TEXT ALIGN --- */
.text-center { text-align: center !important; }
.text-right  { text-align: right !important; }
.text-left   { text-align: left !important; }

/* --- 5. PADDING & MARGIN --- */
.p-0  { padding: 0 !important; }
.p-10 { padding: 10px !important; }
.p-20 { padding: 20px !important; }
.p-30 { padding: 30px !important; }
.p-50 { padding: 50px !important; }	
.px-25 {padding: 0 25px !important;}
	
.pt-0  { padding-top: 0 !important; }
.pt-10 { padding-top: 10px !important; }
.pt-20 { padding-top: 20px !important; }
.pt-30 { padding-top: 30px !important; }
.pt-40 { padding-top: 40px !important; }
.pt-50 { padding-top: 50px !important; }
.pt-80  { padding-top: 80px !important; }
	
.pb-0  { padding-bottom: 0 !important; }
.pb-10 { padding-bottom: 10px !important; }
.pb-20 { padding-bottom: 20px !important; }
.pb-30 { padding-bottom: 30px !important; }
.pb-50 { padding-bottom: 50px !important; }
.pb-80  { padding-bottom: 80px !important; }
	
.mt-10 { margin-top: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-50 { margin-top: 50px !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.ml-auto{margin-left:auto!important;}
.mr-auto{margin-right:auto!important;}
/* --- 6. RESPONSIVE --- */

/* TABLET (from 768px) */
@media only screen and (min-width: 768px) {
	.wrapper{width:86%;max-width:86%!important;padding-left: 0!important;padding-right: 0!important;}
    .t-d-flex { display: flex !important; }
    .t-w-50   { width: 50% !important; }
    .t-w-33   { width: 33.333% !important; }
    .flex-row{ flex-direction:row; }
    .flex-1{ flex:1; }
    .t-text-left { text-align: left !important; }
	  .t-pt-0  { padding-top: 0 !important; }
    .t-pt-80  { padding-top: 80px !important; }
    .t-p-40 { padding: 40px !important; }	
	  .t-d-block { display: block !important; }
	  .t-d-none  { display: none !important; }
	  .t-d-flex  { display: flex !important; }
	  .t-wrap  { flex-wrap: wrap !important; }
    .t-gap-70 { column-gap: 70px !important; }
	  .t-row { flex-direction: row; }
    .t-justify-between { justify-content: space-between !important; }
    .t-justify-center  { justify-content: center !important; }
    .t-align-center  { align-items: center !important; }

    .md-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .md-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .md-span-1 { grid-column: span 1; }
    .md-span-2 { grid-column: span 2; }
    .md-span-3 { grid-column: span 3; }
    .md-span-4 { grid-column: span 4; }
    .col-start-1 { grid-column-start: 1; }
    .col-start-2 { grid-column-start: 2; }
    .col-start-3 { grid-column-start: 3; }
    .col-start-4 { grid-column-start: 4; }
    .col-start-5 { grid-column-start: 5; }
    .col-start-6 { grid-column-start: 6; }
    .col-start-7 { grid-column-start: 7; }
    .col-start-8 { grid-column-start: 8; }
    .col-start-9 { grid-column-start: 9; }
    .col-start-10 { grid-column-start: 10; }
    .col-start-11 { grid-column-start: 11; }
    .col-end-3 { grid-column-end: 3; }
    .col-end-4 { grid-column-end: 4; }
    .col-end-5 { grid-column-end: 5; }
    .col-end-6 { grid-column-end: 6; }
    .col-end-7 { grid-column-end: 7; }
    .col-end-8 { grid-column-end: 8; }
    .col-end-9 { grid-column-end: 9; }
    .col-end-10 { grid-column-end: 10; }
    .col-end-11 { grid-column-end: 11; }
    .col-end-12 { grid-column-end: 12; }
    .col-end-13 { grid-column-end: 13; }
    .md-order-1{order: 1;}
    .md-order-2{order: 2;}
    .md-order-3{order: 3;}
	
    /*Divider run*/
    .has-divider .e-con-inner > .e-child::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 1px;
      height: 100%;
      background: rgba(255,255,255,0.3);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform 0.8s ease-in-out;
    }
    .has-divider.is-visible .e-con-inner > .e-child:not(:last-child)::after {
      transform: scaleY(1);
    }
    .grid-between{ grid-template-columns: max-content max-content; justify-content:space-between; align-items:start; }
}

/* DESKTOP (from 1024px) */
@media only screen and (min-width: 1024px) {
	.wrapper{max-width:800px!important;}
  .d-w-25   { width: 25% !important; }
	.d-w-50   { width: 50% !important; }
	.d-pt-0 { padding-top: 0 !important; }
	.d-pt-100 { padding-top: 100px !important; }
  .d-pt-120 { padding-top: 120px !important; }
  .d-pt-150 { padding-top: 150px !important; }
  .d-mt-200 {margin-top:200px;}
	.d-pb-0 { padding-top: 0 !important; }
  .d-pb-120 { padding-bottom: 120px !important; }
  .d-pb-150 { padding-bottom: 150px !important; }
	.d-pr-40{padding:0 40px!important;}
}
@media only screen and (min-width: 1200px) {
	.wrapper{
		max-width:1100px!important;
	}
  .d-gap-150{column-gap:150px!important; }
  .lg-grid-3{ grid-template-columns: repeat(3,minmax(0,1fr)); }
  .d-w-33{ width: 33.33% !important; }
}
@media only screen and (min-width: 1440px) {
	.wrapper{
		max-width:1300px!important
	}
}
body{
    position: relative !important;
    overflow: visible;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
/* Auto hide header */
.header-auto-hide {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  transition: transform 0.35s ease, opacity 0.35s ease;
  will-change: transform;
}
/* Khi bị ẩn */
.header-auto-hide.is-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
/*header khi scroll đổi màu*/
.header-scrolled{
	background: rgba(0, 0, 0, .2);
    -webkit-backdrop-filter: blur(40px);
    backdrop-filter: blur(40px);
	margin-top:0!important;
}
.line-horizontal {
  position: relative;
}
.line-horizontal::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,0.3);
  transform: scaleX(0);
  transform-origin: center; 
  transition: transform 2s ease-in-out;
}
/* Khi scroll vào view */
.line-horizontal.is-visible::after {
  transform: scaleX(1);
}
/*line -----------------------------------------------link*/
.link-bottom-line a{
  position: relative;
  text-decoration: none;
  display: inline-flex;
	padding:10px 0;
}
/*reset elementor menu hover*/
.elementor-item:not(:hover):not(:focus):not(.elementor-item-active):not(.highlighted):after, .elementor-item:not(:hover):not(:focus):not(.elementor-item-active):not(.highlighted):before{opacity: unset;}
.e--pointer-double-line .elementor-item:after, .e--pointer-double-line .elementor-item:before, .e--pointer-overline .elementor-item:after, .e--pointer-overline .elementor-item:before, .e--pointer-underline .elementor-item:after, .e--pointer-underline .elementor-item:before{height:2px;background-color: #b58c67;}
.link-bottom-line a::after {display: none;}
.link-bottom-line a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: var(--e-global-color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.link-bottom-line a:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}
/* Khi hover kết thúc, scale co lại từ trái sang phải */
.link-bottom-line a:not(:hover)::before {
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s ease;
}

.elementor-menu-toggle{
  display: none;
}
#top-header{
  z-index: 999;
}
/* Menu Container */
#mobile-menu-container {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  background: #102b2a;
  color: #fff;
  z-index: 990;
  transform: translateX(100%); 
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
  visibility: hidden;
}
#mobile-menu-container nav ul li{
 margin-bottom:10px;
}
#mobile-menu-container.is-active {
  visibility: visible;
  transform: translateX(0); 
}
/* Khung chứa button hamburger */
#custom-hamburger-wrapper {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
	padding:14px 0;
}
.menu-line, .menu-cross {
  position: absolute;
  height: 1px;
  background-color: #F3ECB5;
  transition: all 0.4s ease-in-out;
}
/* Hai thanh ngang ban đầu */
#line-1 {
  width: 70px;
  top: 8px;
}
#line-2 {
  width: 40px;
  bottom: 8px;
}
/* Hai thanh tạo dấu X ban đầu ẩn */
.menu-cross {
  width: 40px; /* Độ dài cạnh dấu X */
  top: 50%;
  left: 14%;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(0deg);
}
/* --- TRẠNG THÁI KHI CLICK (Active) --- */
/* Ẩn thanh ngang */
.active #line-1, 
.active #line-2 {
  opacity: 0;
  width: 0;
}
/* Hiện và xoay dấu X */
.active #cross-1 {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(405deg); /* 360 + 45 độ */
}

.active #cross-2 {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(315deg); /* 360 - 45 độ */
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#custom-nav-container{
  position:absolute;
	top:15%;
  text-align:center;
  width:100%;
  padding:0 30px;
}
#custom-nav-container a{
	font-family: 'Cormorant', serif !important;
  font-size:50px;
	text-transform:uppercase;
  display: block;
  width: 100%;
  padding:40px 0;
  border-bottom: 1px solid #ffffff20;
}
#custom-nav-container li:last-child a{border-bottom:none;}
#Heroinner{
    position:relative;
    padding:0;
    min-height:94vh;
}
#Hero_slogan{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    z-index: 3;
    text-align: center;
    max-width: 700px;
    color:#fff;
}
.hero-preload {
	display: block;
	height:100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index:-1;
	}
	.hero-preload img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#Hero_address{
    position: absolute;
    bottom:4%;
    left:30px;
    color:#fff;
    max-width:50%;
    z-index: 2;
}
#Hero_address::before{
    content:"/ FIND US";
    position:absolute;
    top:-30px;
    left:0;
    opacity:.8;
    font-size:.9em;
    letter-spacing: .12em;
    pointer-events: none;
    z-index: 2;
}
#Hero_video{
    position: relative;
    width: 100%;
    height: 94vh;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}
#Heroinner::after{
    content:'';
    position:absolute;
    top:0;left:0;
    width:100%;
    height:100%;
    background: rgba(0, 0, 0, 0.5);
    z-index:1;
}