.product-small.box.has-hover .image-cover img {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Using contain as per your previous manual edit */
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}

/* Image 1: The "revealed" image (base layer) */
.product-small.box.has-hover .image-cover img:nth-child(1) {
  opacity: 0;
}

/* Image 2: The "default" image (top layer in HTML order) */
.product-small.box.has-hover .image-cover img:nth-child(2) {
  opacity: 1;
}

/* On hover: Cross-fade - fade out img2 to show img1 */
.product-small.box.has-hover:hover .image-cover img:nth-child(2) {
  opacity: 0;
}

.product-small.box.has-hover:hover .image-cover img:nth-child(1) {
  opacity: 1;
}

/* --- VERTICAL MENU STYLE --- */
.menu-danh-muc-san-pham-container {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 4px;
}

#menu-danh-muc-san-pham {
  padding: 0;
  margin: 0;
  list-style: none;
}

#menu-danh-muc-san-pham > li {
  border-bottom: 1px solid #f1f1f1;
  position: relative;
}

#menu-danh-muc-san-pham > li:last-child {
  border-bottom: none;
}

#menu-danh-muc-san-pham > li > a {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px !important;
  font-size: 15px;
  font-weight: 500;
  color: #333;
  text-transform: capitalize;
  transition: all 0.3s ease;
}

#menu-danh-muc-san-pham > li:hover > a {
  background-color: #f9f9f9;
  color: #b11f24; /* Primary red accent */
  padding-left: 25px !important; /* Subtle slide effect */
}

/* Category Icons/Arrows */
#menu-danh-muc-san-pham li a i {
  font-size: 12px;
  opacity: 0.5;
  transition: transform 0.3s ease;
}

#menu-danh-muc-san-pham li:hover > a i {
  transform: translateX(4px);
  opacity: 1;
}

/* --- DROPDOWN / SUB-MENU --- */
#menu-danh-muc-san-pham .sub-menu {
  display: block;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 260px; /* Slightly wider */
  width: max-content; /* Allow it to expand for mega menus */
  max-width: 800px;
  background: #fff;
  box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.1);
  border-left: 3px solid #b11f24;
  padding: 15px 0;
  z-index: 99;
  transform: translateX(15px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; /* Support potential column layout */
  flex-direction: column;
}

/* Ensure mega menus with columns look right */
#menu-danh-muc-san-pham .sub-menu:has(.nav-dropdown-col) {
  flex-direction: row;
  padding: 10px 20px;
  gap: 22px;
  flex-wrap: wrap;
}

#menu-danh-muc-san-pham .sub-menu:has(.nav-dropdown-col) li {
  width: calc(100% / 3 - 15px) !important;
}

#menu-danh-muc-san-pham .sub-menu:has(.nav-dropdown-col) li a {
  margin: 0;
}

#menu-danh-muc-san-pham li:hover > .sub-menu {
  visibility: visible;
  opacity: 1;
  transform: translateX(0);
}

/* Fix nested sub-menus (don't fly out inside columns) */
#menu-danh-muc-san-pham .sub-menu .sub-menu {
  position: static !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 5px 0 0 0 !important;
  width: auto !important;
  transform: none !important;
  display: block !important;
}

#menu-danh-muc-san-pham .sub-menu li a {
  padding: 8px 0 !important;
  font-size: 14px !important;
  color: #666 !important;
  display: block !important;
  transition: all 0.2s ease;
  white-space: nowrap;
  border: none !important;
}

/* Headers inside the menu (e.g., "Bàn họp - Hội nghị") */
#menu-danh-muc-san-pham .nav-dropdown-col {
  min-width: 200px;
}

#menu-danh-muc-san-pham .nav-dropdown-col > a {
  font-weight: 600 !important; /* Slightly more consistent with others */
  color: #333 !important;
  text-transform: capitalize !important; /* Match capitalize of others */
  font-size: 14px !important;
  border-bottom: 1px solid #eee !important;
  margin-bottom: 8px !important;
  padding: 0 0 8px 0 !important;
  pointer-events: none;
}

/* Style for nested sub-links to be consistent */
#menu-danh-muc-san-pham .sub-menu .sub-menu li a {
  padding: 6px 0 !important; /* Indent for consistency */
  font-size: 13.5px !important;
  color: #777 !important;
  white-space: normal !important; /* Allow wrapping if needed in columns */
  line-height: 1.4 !important;
}

#menu-danh-muc-san-pham .sub-menu .sub-menu li a::before {
  content: ""; /* Subtle dash for consistency */
  margin-right: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #ccc;
  display: inline-block;
}

#menu-danh-muc-san-pham .sub-menu li a:hover {
  color: #b11f24;
  background: #fff5f5;
  padding-left: 25px;
}

#menu-danh-muc-san-pham .nav-dropdown-col > a::after {
  display: none;
}

#menu-danh-muc-san-pham .sub-menu .sub-menu li {
  width: 100% !important;
}

.header-bottom-nav > li > a {
  line-height: normal !important;
}

.nav-dropdown-default .nav-column li > a {
  margin: 0 !important;
}

/* ============================================
   HORIZONTAL HEADER NAV - TOP LEVEL LINKS
   ============================================ */
.header-bottom-nav > li > a {
  font-weight: 700 !important;
  color: #1a1a1a !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  padding: 15px 0 !important;
  position: relative !important;
}

.header-bottom-nav > li:hover > a {
  color: #900603 !important;
}

/* Red animated line for all top links */
.header-bottom-nav > li > a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  width: 0 !important;
  height: 2px !important;
  background: #900603 !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateX(-50%) !important;
  border-radius: 2px !important;
}

.header-bottom-nav > li:hover > a::after {
  width: 100% !important;
}

/* Arrow icons */
.header-bottom-nav li a i {
  font-size: 10px !important;
  margin-left: 6px !important;
  opacity: 0.4 !important;
  transition: transform 0.3s ease !important;
}

.header-bottom-nav li:has(.style-main-menu):hover > a i {
  transform: rotate(180deg) !important;
  opacity: 0.8 !important;
}

/* ============================================
   COMMON DROPDOWN BOX (.style-main-menu)
   ============================================ */
/* Target the dropdown box inside a menu item with our custom class */
.style-main-menu > .nav-dropdown-default {
  background: #fff !important;
  border-radius: 0 0 15px 15px !important;
  padding: 25px !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15) !important;
  border-top: 2px solid #900603 !important;
  margin-top: 0 !important;
}

/* MEGA MENU LAYOUT (If it has columns) */
.style-main-menu > .nav-dropdown-default:has(.nav-column) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  min-width: 1100px !important;
  left: -15vw !important;
  /* transform: translateX(-50%) !important; */
  padding: 20px !important;
}

/* Columns inside Mega Menu */
.style-main-menu .nav-dropdown-col {
  padding: 0 15px !important;
  border-right: 1px solid #f2f2f2 !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.style-main-menu .nav-dropdown-col:last-child {
  border-right: none !important;
}

/* --- COLUMN HEADERS (GHẾ VĂN PHÒNG, BÀN LÀM VIỆC...) --- */
.style-main-menu ul li > a {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #000 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  padding: 0 0 12px 0 !important;
  margin-bottom: 15px !important;
  border-bottom: 1px solid #eee !important;
  display: block !important;
  position: relative !important;
}

/* Red accent for headers only */
.style-main-menu ul li > a::after {
  content: "" !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  width: 40px !important;
  height: 2px !important;
  background: #900603 !important;
}

/* --- SUB-LINKS (Phần trong vòng đỏ của bạn) --- */
.style-main-menu .nav-column li {
  margin: 0 !important;
  padding: 0 !important;
}

.style-main-menu .nav-column li a {
  padding: 8px 0 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #555 !important;
  text-transform: capitalize !important; /* Chữ thường trang nhã hơn */
  display: block !important;
  transition: all 0.3s ease !important;
  border: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  position: relative !important;
}

/* Hiệu ứng bullet khi hover vào link con */
.style-main-menu .nav-column li a::before {
  content: "\2022" !important;
  position: absolute !important;
  left: -12px !important;
  color: #900603 !important;
  opacity: 0 !important;
  transition: all 0.3s ease !important;
  font-size: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

.style-main-menu .nav-column li a:hover {
  color: #900603 !important;
  /* padding-left: 12px !important; */
  text-decoration: underline;
}

.style-main-menu .nav-column li a:hover::before {
  opacity: 1 !important;
  left: 0px !important;
}

/* Reset gạch chân cho link con */
.style-main-menu .nav-column li a::after {
  display: none !important;
}

/* REGULAR LIST (Non-mega menu dropdowns) */
.style-main-menu > .nav-dropdown-default:not(:has(.nav-column)) {
  min-width: 250px !important;
  padding: 10px 0 !important;
}

.style-main-menu > .nav-dropdown-default:not(:has(.nav-column)) li a {
  padding: 12px 25px !important;
  border-bottom: 1px solid #f9f9f9 !important;
  margin: 0 !important;
  white-space: nowrap;
}

.style-main-menu > .nav-dropdown-default:not(:has(.nav-column)) li a:hover {
  background: #fdf5f5 !important;
  color: #900603 !important;
  padding-left: 32px !important;
}

.style-main-menu li > a::after {
  content: "" !important;
  position: absolute !important;
  bottom: 10px !important;
  left: 25px !important;
  width: 50px !important;
  height: 2px !important;
  background: #900603 !important;
}

.style-main-menu li > a::before {
  content: "" !important;
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: #f2f2f2 !important;
}

.style-main-menu > a {
  border: none !important;
}

.style-main-menu li li > a::after,
.style-main-menu li li > a::before,
.style-main-menu:not(:has(ul ul)) li > a::after {
  display: none !important;
}

.style-main-menu > .nav-dropdown-default:not(:has(.nav-column)) > li {
  width: 100% !important;
}

.nav-dropdown-default:has(.html.widget_shopping_cart) {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
}

.header-bottom-nav > li:hover > a,
.header-bottom-nav > li.active > a {
  border: none !important;
}