/* Hiệu ứng riêng cho bottom-nav — đổi cảm giác tương tác chỉ cần sửa file này */

.bottom-nav {
  transition: padding 0.25s ease;
}

.bottom-nav__toggle {
  transition: background 0.2s ease, transform 0.2s ease;
}

.bottom-nav__toggle:hover {
  background: #f3f4f6;
  transform: scale(1.1);
}

.bottom-nav__items {
  transition: max-width 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
}

.bottom-nav__item {
  transition: background 0.2s ease;
}

.bottom-nav__item:hover {
  background: #f3f4f6;
}

.bottom-nav__icon {
  transition: transform 0.2s ease;
}

/* Phóng to icon khi rê chuột vào */
.bottom-nav__item:hover .bottom-nav__icon {
  transform: scale(1.35);
}

/* Kích thước "nghỉ" khi icon là trang đang mở — hiệu ứng phóng to chỉ chạy 1 lần qua .is-pressed */
.bottom-nav__item--active .bottom-nav__icon {
  transform: scale(1.15);
}

/* Hiệu ứng bấm là phóng to ngay lập tức, kể cả khi bấm lại icon đang chọn */
.bottom-nav__icon.is-pressed {
  animation: bottomNavPop 0.35s ease;
}

@keyframes bottomNavPop {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(1.45);
  }
  70% {
    transform: scale(0.92);
  }
  100% {
    transform: scale(1.15);
  }
}