/* Container Parent */
.menu-parent-item {
  padding: 15px 40px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #222530;
  color: #ffffff;
  background-color: transparent;
  transition: background-color 0.3s ease;
}
#material-filter-form {
    background: #141619;
    padding: 20px;
    border-radius: 10px;
}
#material-filter-form h4 {
    font-size: 20px;
    font-weight: 700;
}
.material-main {
    padding: 0 20px;
}
/* Nền trắng và đổi màu icon khi Hover / Active */
.menu-parent-item:hover,
.menu-parent-item.active {
  background-color: #ffffff !important;
  color: #000000 !important;
}

.menu-parent-item:hover .menu-arrow,
.menu-parent-item.active .menu-arrow {
  color: #000000;
}

/* Wrapper Text: Bắt buộc height & overflow hidden để 1 thời điểm chỉ hiện 1 text */
.menu-parent-item .menu-title {
  position: relative;
  display: block;
  overflow: hidden;
  font-size: 18px;
  font-weight: 600;
  height: 1.2em; /* Giới hạn chiều cao vừa đúng 1 dòng text */
  line-height: 1.2em;
}

/* Text gốc (Trắng) */
.menu-parent-item .menu-title-inner {
  display: block;
  color: #ffffff;
  transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Text phụ (Đen) nằm ngay dưới */
.menu-parent-item .menu-title::after {
  content: attr(data-title);
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  color: #000000;
  white-space: nowrap;
  transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Khi Hover / Active: Đẩy text trắng lên trên, kéo text đen ở dưới lên thay thế */
.menu-parent-item:hover .menu-title-inner,
.menu-parent-item.active .menu-title-inner {
  transform: translateY(-100%);
}

.menu-parent-item:hover .menu-title::after,
.menu-parent-item.active .menu-title::after {
  transform: translateY(-100%);
}
.menu-arrow:before {
    content: '';
    position: absolute;
    transform: rotate(135deg);
    width: .5rem;
    height: .5rem;
    border-top: .15rem solid currentColor;
    border-left: .15rem solid currentColor;
    transition: all .3s ease-in-out;
}

/* Trạng thái đóng */
.filter-group.is-closed .filter-options {
  display: none;
}

/* Xoay mũi tên khi đóng */
.filter-group.is-closed .filter-arrow {
  transform: rotate(-90deg);
}

/* Hover đổi màu tiêu đề */
.filter-title:hover {
  color: #fff !important;
}