/* === WRAPPER CHUNG MENU NGANG === */
.wpmm-horizontal-menu-wrapper {
  width: 100%;
  position: relative;
  z-index: 999;
}

/* === MENU NGANG CẤP 1 === */
.wpmm-horizontal-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wpmm-horizontal-menu > li {
  position: relative;
  margin: 0;
}

/* === LINK MENU CHÍNH === */
.wpmm-horizontal-menu .wpmm-item-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wpmm-horizontal-menu .wpmm-link {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: #000;
  text-decoration: none;
  transition: background 0.3s ease;
}

.wpmm-horizontal-menu .wpmm-link:hover {
  background-color: #f0f0f0;
  color: #000;
}

.wpmm-horizontal-menu .wpmm-thumb {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  display: inline-block;
}

.wpmm-horizontal-menu .wpmm-toggle-icon {
  margin-left: auto;
  font-size: 12px;
  transition: transform 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
.wpmm-horizontal-menu li.menu-item-has-children:hover .wpmm-toggle-icon {
  transform: rotate(180deg);
}
}
/* === SUBMENU DROPDOWN === */
.wpmm-horizontal-menu .wpmm-submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border-radius: 0 0 8px 8px;
  padding: 10px 10px 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: none;
  grid-gap: 10px;
  grid-template-columns: repeat(1, 1fr);
  min-width: 220px;
}

.wpmm-horizontal-menu > li:last-child > ul.wpmm-submenu {
  left: auto;
  right: 0;
}

/* Mặc định ẩn submenu */
.wpmm-submenu {
  display: none;
}

/* Hiển thị khi có class mở */
.wpmm-horizontal-menu li.has-submenu-open > .wpmm-submenu,
.wpmm-vertical-menu li.has-submenu-open > .wpmm-submenu {
  display: grid;
}

/* Trường hợp desktop hover (chỉ dùng cho wpmm-hover-mode) */
.wpmm-hover-mode .wpmm-horizontal-menu li.menu-item-has-children:hover > .wpmm-submenu {
  display: grid;
}

/* CHIA CỘT LINH HOẠT */
.wpmm-horizontal-menu .wpmm-submenu.mega-2-cols {
  grid-template-columns: repeat(2, 1fr);
  min-width: 440px;
}
.wpmm-horizontal-menu .wpmm-submenu.mega-3-cols {
  grid-template-columns: repeat(3, 1fr);
  min-width: 660px;
}
.wpmm-horizontal-menu .wpmm-submenu.mega-4-cols {
  grid-template-columns: repeat(4, 1fr);
  min-width: 820px;
}

/* ITEM CON TRONG SUBMENU */
.wpmm-horizontal-menu .wpmm-submenu li {
  list-style: none;
}

.wpmm-horizontal-menu .wpmm-submenu .wpmm-item-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  transition: background 0.2s;
}

.wpmm-horizontal-menu .wpmm-submenu .wpmm-link {
  display: flex !important;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-size: 14px;
  color: #000;
  text-decoration: none;
  padding: 6px 8px;
  transition: background 0.3s ease;
}

.wpmm-horizontal-menu .wpmm-submenu .wpmm-link:hover {
  background-color: #f5f5f5;
  color: #0073aa;
  border-radius: 8px;
}

.wpmm-horizontal-menu .wpmm-submenu .wpmm-toggle-icon {
  display: none;
}

/* === SUBMENU CẤP 3 & TÙY CHỈNH === */
.wpmm-horizontal-menu li.menu-item-has-children ul li.menu-item-has-children ul.wpmm-submenu {
  display: grid !important;
  position: relative;
  top: 0;
  left: 0;
  background: none;
  box-shadow: none;
  padding: 0;
  margin: 0 0 10px;
}

.wpmm-horizontal-menu li.menu-item-has-children ul li.menu-item-has-children a {
  font-weight: 700;
}

.wpmm-horizontal-menu li.menu-item-has-children ul li.menu-item-has-children ul.wpmm-submenu li a {
  font-weight: 400;
  margin: 0;
  padding: 6px 8px;
}

.wpmm-horizontal-menu li.menu-item-has-children ul li.menu-item-has-children ul.wpmm-submenu li .wpmm-item-wrapper {
  margin: 0;
  padding: 5px;
}

/* === NÚT ĐÓNG MENU MOBILE === */
button.wpmm-close-btn {
  display: none;
}


/* ================= MENU DỌC ================= */
/* === WRAPPER === */
.wpmm-vertical-menu-wrapper {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 500px;
}

/* === MENU DỌC === */
.wpmm-vertical-menu {
  width: 100%;
  max-width: 500px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.wpmm-vertical-menu > li {
  position: relative;
  border-bottom: 1px solid #eee;
}

.wpmm-vertical-menu > li:last-child {
  border-bottom: none;
}

.wpmm-vertical-menu > li.menu-item-has-children {
  position: static;
}

/* === LINK CHÍNH === */
.wpmm-vertical-menu .wpmm-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
  color: inherit;
}

.wpmm-vertical-menu .wpmm-link:hover {
  background: #f0f0f0;
}

.wpmm-vertical-menu .wpmm-thumb {
  width: 20px;
  height: 20px;
  object-fit: cover;
  margin-right: 6px;
  padding-top: 3px;
  transition: transform 0.3s ease;
}

.wpmm-vertical-menu .wpmm-link:hover img {
  transform: scale(1.1);
}

.wpmm-vertical-menu .wpmm-toggle-icon {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
  float: right;
}

.wpmm-vertical-menu li.menu-item-has-children:hover .wpmm-toggle-icon {
  transform: rotate(-90deg);
}

/* === SUBMENU === */
.wpmm-vertical-menu .wpmm-submenu {
  position: absolute;
  top: 0;
  left: 100%;
  display: none;
  background: #fff !important;
  padding: 10px;
  border: 1px solid #ddd;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  min-height: 100%;
  align-content: flex-start;
  z-index: 10;
  box-sizing: border-box;
}

.wpmm-vertical-menu > li.menu-item-has-children:hover > .wpmm-submenu {
  display: grid;
}

/* === CỘT SUBMENU === */
.wpmm-vertical-menu .mega-1-cols { grid-template-columns: repeat(1, 1fr); min-width: 250px; }
.wpmm-vertical-menu .mega-2-cols { grid-template-columns: repeat(2, 1fr); min-width: 500px; }
.wpmm-vertical-menu .mega-3-cols { grid-template-columns: repeat(3, 1fr); min-width: 750px; }
.wpmm-vertical-menu .mega-4-cols { grid-template-columns: repeat(4, 1fr); min-width: 860px; }

/* === ITEM CON TRONG SUBMENU === */
.wpmm-vertical-menu .wpmm-submenu li {
  list-style: none;
}

.wpmm-vertical-menu .wpmm-submenu .wpmm-link {
  display: block;
  padding: 8px 12px;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.3s ease;
}

.wpmm-vertical-menu .wpmm-submenu .wpmm-link:hover {
  background: #f5f5f5;
}

/* === SUBMENU CẤP 3 TRONG MENU CON === */
.wpmm-vertical-menu li.menu-item-has-children:hover .wpmm-submenu {
  display: grid !important;
  position: absolute;
  padding: 0;
  margin: 0;
  border: none;
  box-shadow: none;
  background: none;
}

.wpmm-vertical-menu li.menu-item-has-children ul li.menu-item-has-children ul.wpmm-submenu {
  display: grid !important;
  position: relative;
  top: 0;
  left: 0; 
  margin-bottom: 10px; box-shadow:none !important
}

.wpmm-vertical-menu li.menu-item-has-children ul li.menu-item-has-children a {
  font-weight: 700;
}

.wpmm-vertical-menu li.menu-item-has-children ul li.menu-item-has-children ul.wpmm-submenu li a {
  font-weight: 400;
  margin: 0;
  padding: 0;
  padding-left: 15px;
}

.wpmm-vertical-menu li.menu-item-has-children ul li.menu-item-has-children ul.wpmm-submenu li .wpmm-item-wrapper {
  margin: 0;
  padding: 5px;
}

/* ================= RESPONSIVE ================= */

#wpmm-toggle-horizontal, #wpmm-toggle-vertical {
  display: none;
}

/* === MENU NGANG & MENU DỌC RESPONSIVE === */

@media (max-width: 768px) {

  body.home .nav_menuheader__menu { display: block !important; }

  #wpmm-horizontal-wrapper,
  #wpmm-vertical-wrapper {
    position: fixed !important;
    top: 0;
    left: -100%;
    width: 80.68%;
    height: 100vh;
    background: #fff;
    z-index: 999999;
    overflow-y: auto;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
  }

  #wpmm-horizontal-wrapper.wpmm-mobile-show,
  #wpmm-vertical-wrapper.wpmm-mobile-show {
    left: 0;
  }

  #wpmm-backdrop {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: none;
  }

  #wpmm-backdrop.show {
    display: block;
  }

  #wpmm-toggle-horizontal,
  #wpmm-toggle-vertical {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: #fff;
    border: none;
    cursor: pointer;
    color: #666;
    transition: background 0.3s;
  }

  #wpmm-toggle-horizontal:hover,
  #wpmm-toggle-vertical:hover {
    background: #f0f0f0;
  }

  #wpmm-toggle-horizontal i,
  #wpmm-toggle-vertical i {
    margin-right: 0; 
    font-size: 32px;
  }

  /* MENU CHUNG */
  .wpmm-horizontal-menu,
  .wpmm-vertical-menu {
    list-style: none;
    margin: 0;
    padding: 10px 0;
  }

  .wpmm-horizontal-menu > li,
  .wpmm-vertical-menu > li {
    width: 100%;
    border-bottom: 1px solid #eee;
  }

  .wpmm-horizontal-menu > li:last-child,
  .wpmm-vertical-menu > li:last-child {
    border-bottom: none;
  }

  .wpmm-item-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
  }

  .wpmm-link {
    flex: 1;
    font-size: 16px;
    color: #333;
    text-decoration: none;
  }

  .wpmm-toggle-submenu {
    background: none;
    border: none;
    padding: 0 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .wpmm-toggle-icon {
    font-size: 14px;
    color: #888;
    transition: transform 0.3s ease;
  }


  .wpmm-horizontal-menu .wpmm-submenu,
  .wpmm-vertical-menu .wpmm-submenu {
    position: static;
    display: none;
    background: #fafafa;
    padding: 0 0 0 10px;
    margin: 0;
    flex-direction: column;
    gap: 8px 10px;
    grid-template-columns: 1fr !important;
    overflow: hidden;
 max-width: 80vh;
    overflow-y: auto; border:none !important
  }

.wpmm-horizontal-menu .menu-item-has-children.has-submenu-open > .wpmm-submenu,
.wpmm-vertical-menu .menu-item-has-children.has-submenu-open > .wpmm-submenu {
  display: flex;   overflow-y: auto;
    overflow-x: hidden;
}
	
  .wpmm-submenu li {
    list-style: none;
  }

  .wpmm-submenu .wpmm-link {
    display: block;
    padding: 10px 16px;
    font-size: 15px;
    color: #333;
    text-decoration: none;
  }
.wpmm-vertical-menu li.menu-item-has-children:hover .wpmm-submenu { position:static;}
  .wpmm-submenu .wpmm-link:hover {
    background-color: #f0f0f0;
  }

  #wpmm-horizontal-wrapper button.wpmm-close-btn,
  button#wpmm-close-vertical {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    font-size: 32px !important;
    color: #000;
    cursor: pointer;
    z-index: 1001;
  }

  .wpmm-horizontal-menu .wpmm-thumb,
  .wpmm-vertical-menu .wpmm-thumb {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    object-fit: contain;
  }
	
.wpmm-submenu.mega-1-cols,
  .wpmm-submenu.mega-2-cols,
  .wpmm-submenu.mega-3-cols,
  .wpmm-submenu.mega-4-cols {
    flex-direction: column;
    grid-template-columns: 1fr !important; /* Ghi đè grid */
    min-width: 100% !important;           /* Tránh tràn */
    max-width: 100%;
  }

  /* Đảm bảo nội dung con không tràn màn hình */
  .wpmm-submenu.mega-1-cols > li,
  .wpmm-submenu.mega-2-cols > li,
  .wpmm-submenu.mega-3-cols > li,
  .wpmm-submenu.mega-4-cols > li {
    width: 100%;
  }



  /* Khi có class mở submenu thì hiển thị */
  .wpmm-horizontal-menu li.has-submenu-open > .wpmm-submenu,
  .wpmm-vertical-menu li.has-submenu-open > .wpmm-submenu {
    display: flex;
    flex-direction: column;
  }
 /* Tắt hoàn toàn :hover hiển thị submenu */
  .wpmm-horizontal-menu li.wpmm-mobile-show > .wpmm-submenu,
  .wpmm-vertical-menu li.wpmm-mobile-show > .wpmm-submenu {
    display: none;
  }
/* Mặc định: không xoay */
.wpmm-toggle-icon {
  transition: transform 0.3s ease;
  transform: rotate(0deg);
}

/* Khi mở submenu: xoay 180 độ */
.menu-item-has-children.has-submenu-open > .wpmm-item-wrapper .wpmm-toggle-icon {
  transform: rotate(180deg);
}