.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;               /* khoảng cách giữa các nút */
  margin: 36px 0 0;
  flex-wrap: wrap;        /* nếu màn hình nhỏ thì xuống hàng */
}

/* Nút trang */
.page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid #e5e7eb;  /* màu viền */
  border-radius: 999px;       /* bo tròn như pill */
  background: #fff;
  color: #111;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

/* Hover */
.page-btn:hover {
  border-color: #d19a61;  /* viền màu vàng gold */
  color: #d19a61;         /* chữ vàng gold */
}

/* Trang đang active */
.page-btn.is-active {
  background: #111;
  color: #fff;
  border-color: #111;
}

/* Nút bị disable */
.page-btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* Dấu ... */
.page-ellipsis {
  padding: 0 6px;
  color: #aaa;
}
@keyframes fadeInUpLong {
  0% {
    opacity: 0;
    transform: translateY(200px); /* Trượt xa hơn */
  }
  70% {
    opacity: 1;
    transform: translateY(-20px); /* Vượt lên nhẹ */
  }
  100% {
    opacity: 1;
    transform: translateY(0); /* Về vị trí chuẩn */
  }
}

.fadeInUpLong {
  animation: fadeInUpLong 2s ease-out forwards; /* Chạy chậm hơn */
}

 .uniform-size {
    width: 100%;  /* Chiều rộng bạn muốn */
    height: 50%; /* Chiều cao bạn muốn */
    object-fit: cover; /* Phép màu nằm ở đây! */
    
  }