/*--------------------------------------------------------------
12.0 Navigation
--------------------------------------------------------------*/
/* MEGA MENU */

.navigation-top {
  position: relative;
  background: #fff;
  border-bottom: 1px solid #eee;
  border-top: 1px solid #eee; */
  font-size: 15px;
  font-size: 0.975rem;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 503;
   box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); 
}
.navigation-top .wrap {
  padding-top: 0.75em;
  padding-bottom: 0.75em;
}

/* link cấp 1 */
.navigation-top .menu > li > a {
  color: #222;
  position: relative;
}
.navigation-top .menu li a:hover {
  color: #c8a48b;
}
.navigation-top .menu > li > a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #c8a48b;
  transition: width 0.3s ease;
}
.navigation-top .menu > li > a:hover::after {
  width: 100%;
}

/* Main navigation */
.main-navigation {
  clear: both;
  display: block;
}
.main-navigation .icon {
  display: none !important;
}
.main-navigation ul {
  background: #fff;
  list-style: none;
  margin: 0;
  padding: 0 1.5em;
  text-align: left;
}
.main-navigation ul.menu > li {
  display: inline-block;
}
.main-navigation li:not(:last-child) {
  margin-right: 32px;
}

.main-navigation > div > ul {
  margin-bottom: 0;
  padding: 0;
}

/* Reset */
ul.sub-menu,
ul.sub-menu > li {
  margin: 0;
  padding: 0;
}

/* CẤP 1: Mega menu full màn hình – ẩn mặc định */
.main-navigation .menu ul.sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 1.25em 2em;
  /*box-shadow: 0 4px 12px rgba(0,0,0,.1);*/
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease-in-out, visibility .25s ease-in-out;
  z-index: 9999;
   pointer-events: none; /* chặn hover trống */
}

.main-navigation ul ul.sub-menu::before {
  content: "";
  position: absolute;
  top: -20px; /* nằm phía trên submenu */
  left: 0;
  width: 100%;
  height: 20px; /* làm cầu nối */
  background: transparent;
}

/* Hiện submenu khi hover vào LI có submenu */
.main-navigation .menu li:hover > .sub-menu,
.main-navigation .menu li:focus-within > .sub-menu,
.main-navigation .menu li .sub-menu.toggled-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
/* Overlay gắn vào body */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease;
  z-index: 1000; /* nằm dưới header */
}

body.overlay-active::before {
  opacity: 1;
  visibility: visible;
}
.site-header {
  z-index: 1100; /* cao hơn overlay */
}


/* Chia cột trong mega menu (các cột: Living Room, Home Office, …) */
.main-navigation .menu > li > .sub-menu > li.menu-item-has-children {
  flex: 1 1 180px; /* mỗi cột tối thiểu 180px, tự giãn */
}
.main-navigation .menu > li > .sub-menu > li > a {
  display: inline-block;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: 15px;
  color:#222;
}

/* CẤP 2+ (bên trong từng cột): reset về list thường, KHÔNG full màn, KHÔNG absolute */
.main-navigation .menu > li > .sub-menu .sub-menu {
  position: static;
  display: block ;
  padding: 0 ;
  margin: 0 ;
  background: none ;
  width: auto ;
  box-shadow: none ;
  opacity: 1 ;
  visibility: visible ;
  transform: none ;
}

/* Link con trong cột */
.main-navigation .menu > li > .sub-menu .sub-menu > li > a {
  display: block;
  padding: 4px 0;
  font-size: 14px;
  color: #333;
  transition: color .2s;
}
.main-navigation .menu li ul.sub-menu a:hover{
  color: #c8a48b; 
}
.main-navigation .menu > li > ul.sub-menu a:hover{
  text-decoration: underline;
}

/* Chỉ animate các li của submenu cấp 1 */
.main-navigation .menu > li > .sub-menu > li {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .25s ease, transform .25s ease;
}

/* Khi mở mega menu -> animate từng li cấp 1 */
.main-navigation .menu > li:hover > .sub-menu > li,
.main-navigation .menu > li:focus-within > .sub-menu > li,
.main-navigation .menu > li > .sub-menu.toggled-on > li {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delay (so le) */
.main-navigation .menu > li > .sub-menu > li:nth-child(1) { transition-delay: 0.05s; }
.main-navigation .menu > li > .sub-menu > li:nth-child(2) { transition-delay: 0.15s; }
.main-navigation .menu > li > .sub-menu > li:nth-child(3) { transition-delay: 0.25s; }
.main-navigation .menu > li > .sub-menu > li:nth-child(4) { transition-delay: 0.35s; }
.main-navigation .menu > li > .sub-menu > li:nth-child(5) { transition-delay: 0.45s; }


/*Menu mobile*/
/* Menu Toggle - mobile button */
/* Ẩn toggle trên desktop */
.menu-toggle{display:none}

/* ========== MOBILE (≤ 767px) ========== */
@media screen and (max-width: 767px){
	.main-navigation{
    background: #fff; 
    border-bottom: 1px solid #eee; 
    border-top: 1px solid #eee;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
	}
	.navigation-top {
		position: absolute;
		background: unset;
		border-bottom: none;
		border-top: none;
		width: 22%;
		bottom: -5px;
		box-shadow: none;
	}
  /* Hiển thị nút hamburger */
  .menu-toggle{
    position:relative;
    font-size:18px;
    cursor:pointer;
    z-index:1300; 
     display: flex;
    justify-content: flex-start; /* icon nằm bên trái */
    align-items: center;
    width: 100%;                 /* full ngang */
	  padding-top: 10px;
	  padding-bottom: 10px;
	  padding-left: 19px;
  }
/* Icon X */
/* Menu toggle default (hamburger) */
.menu-toggle .fa-bars {
  display: inline-block;
	font-size:1.3em;
}
.menu-toggle .fa-times {
  display: none;
    border-bottom: 2px solid #222; /* bạn đổi màu theo theme */
  padding-bottom: 4px; 
}


/* Khi mở menu thì đổi icon */
.toggled-on .menu-toggle .fa-bars {
  display: none;
}
.toggled-on .menu-toggle .fa-times {
  display: inline-block;
      margin-left: 1.457em;
}
.toggled-on .menu-toggle {
    border-bottom: 1px solid #eee; /* border kéo hết màn hình */
}

  .main-navigation.toggled-on {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  background: #fff;
  z-index: 1200; /* cao hơn overlay */
}
.main-navigation.toggled-on .menu-toggle{
          background: #c8a48b;
}

  /* Overlay mờ (không đụng HTML) */
  .main-navigation::before{
    content:"";
    position:fixed; inset:0;
    background:rgba(0,0,0,.4);
    opacity:0; visibility:hidden;
    transition:opacity .25s ease, visibility .25s ease;
    z-index:1090;
  }
  .main-navigation.toggled-on::before{
    opacity:1; visibility:visible;
  }

  /* PANEL off-canvas: dùng đúng .menu-main-menu-container */
  .main-navigation .menu-main-menu-container{
    position:absolute;
    top:100%; 
    left:0;
    height: 100vh;       /* cao bằng chiều cao màn hình */
    overflow-y: auto;        /* cuộn khi dài quá */  
    background:#fff;
    transform:translateX(-100%);
    transition:transform .65s cubic-bezier(.22,1,.36,1);
    z-index:1120; 
    
  }
  .main-navigation.toggled-on .menu-main-menu-container{
    transform:translateX(0);
  }

   /* Reset */
  .main-navigation.toggled-on .menu > li {
    opacity: 1;
    transform: translateX(0);
      display:block !important;   /* ghi đè inline-block ở desktop */
    border-bottom:1px solid #eee;
      position: relative;
    margin-right:0!important;
    transition: opacity .35s ease, transform .35s ease;
  }
    /* Delay dần dần từng item (tối đa 10 cái, thêm tùy nhu cầu) */
  .main-navigation.toggled-on .menu > li:nth-child(1) { transition-delay: .05s; }
  .main-navigation.toggled-on .menu > li:nth-child(2) { transition-delay: .10s; }
  .main-navigation.toggled-on .menu > li:nth-child(3) { transition-delay: .15s; }
  .main-navigation.toggled-on .menu > li:nth-child(4) { transition-delay: .20s; }
  .main-navigation.toggled-on .menu > li:nth-child(5) { transition-delay: .25s; }
  .main-navigation.toggled-on .menu > li:nth-child(6) { transition-delay: .30s; }
  .main-navigation.toggled-on .menu > li:nth-child(7) { transition-delay: .35s; }
  .main-navigation.toggled-on .menu > li:nth-child(8) { transition-delay: .40s; }
  .main-navigation.toggled-on .menu > li:nth-child(9) { transition-delay: .45s; }
  .main-navigation.toggled-on .menu > li:nth-child(10){ transition-delay: .50s; }

  .main-navigation .menu>li>a{
    display:block;
     padding-top: 12px;
     padding-bottom: 12px;
      font-size: 16px;
      font-weight: 600;
    text-decoration:none;
    padding-left: 1.475em;
  }
.main-navigation li.menu-item-has-children > a {
  position:relative;
}
.main-navigation .menu > li > .sub-menu > li > a{
  display:block;
  font-weight:normal;
}
/* Icon + mặc định, bám vào A nên không bị tụt khi li cao lên */
  .main-navigation li.menu-item-has-children > a::before {
    content: "\f067"; /* plus */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 12px;           
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    font-size: 14px;
    pointer-events: none;  
      transition: transform 0.3s ease;

  }

  /* Khi mở: đổi sang dấu – */
.main-navigation li.menu-item-has-children.submenu-open > a::before,
.sub-menu.toggled-on li.menu-item-has-children.submenu-open > a::before{
    content: "\f068"; /* minus */
    transform: translateY(-50%) rotate(180deg);
  }

/* Submenu accordion */
.main-navigation .menu > li > .sub-menu {
    position: static;        
    width: 100vw;           
    max-width: 100vw;   
    padding: 0;
    margin:0;
    background: #f9f9f9;
    display: block;         
    gap: 0;
  }
  ul.sub-menu > li{
    padding-left: 10px;
  }
  .main-navigation .menu > li > .sub-menu > li {
    width: 100%;             /* mỗi item chiếm full ngang */
    display: block;
    padding-left: 2.5em;
  }

.main-navigation ul.menu ul.sub-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.35s ease;
}
.main-navigation ul.menu ul.sub-menu.toggled-on {
  /*max-height: max-content;  */
  overflow: visible;  
}