/*=========================================
 ----- THANH DANH MỤC MÀU VÀNG ----- 
=========================================*/
/* thanh màu vàng */
.category-bar {
  background-color: #F1DAB2;
  padding: 25px 0;
  border-bottom: 1px solid #ddd;
}

/* căn giữa và chia cột */
.category {
  width: 95%;
  max-width: 1400px;
  margin: 0 auto;
  /* dùng Flexbox để đẩy 2 mục ra 2 bên */
  display: flex;
  justify-content: space-between;
  /* đẩy search sang trái và list sang phải */
  align-items: center;
}

/* chỗ chứa 5 mục*/
.list {
  display: flex;
  flex-grow: 1;
  /* .list chiếm hết không gian trống */
  justify-content: center;
  gap: 100px;
}

/* mấy cái mục <div> */
.list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #000000;
  cursor: pointer;
}

/* mấy cái icon ảnh */
.list a .category-icon {
  width: 35px;
  height: 35px;
  object-fit: contain;
}

/* chữ của mấy cái mục */
.list a p {
  margin: 0;
  font-family: 'Times New Roman', Times, serif;
  font-size: 18px;
  font-weight: 500;
  margin-top: 8px;
}

/*=========================================
----- KHI MỤC ĐƯỢC CHỌN (ACTIVE) - ĐỘ ƯU TIÊN CAO ----- 
=========================================*/
/* Icon phóng to khi active */
.list a.category-active .category-icon {
  /* Đảm bảo hiệu ứng phóng to */
  transform: scale(1.5) !important;
  /* Đảm bảo transition luôn hoạt động */
  transition: transform 0.3s ease-out !important;
}

/* Chữ chuyển màu và di chuyển xuống khi active */
.list a.category-active p {
  transform: translateY(5px) !important;
  color: #a0522d !important;
  /* Đảm bảo transition luôn hoạt động */
  transition: transform 0.3s ease-out, color 0.3s ease-out !important;
}

/* Hiện gạch chân khi active */
.list a.category-active p::after {
  width: 100% !important;
}

/* Đảm bảo trạng thái active luôn thắng trạng thái hover, không bị nhấp nháy */
.list a.category-active:hover .category-icon {
  transform: scale(1.5) !important;
}

.list a.category-active:hover p {
  transform: translateY(5px) !important;
  color: #a0522d !important;
}

/*=========================================
 ----- KHI HOVER MẤY CÁI MỤC ----- 
=========================================*/

/* hiệu ứng chuyển động */
.list a {
  /* Cho phép thẻ <div> là điểm neo cho các vị trí (position) con */
  position: relative;
  /* Làm mượt mọi thay đổi vị trí/kích thước */
}

.list a .category-icon {
  /* Làm mượt hiệu ứng phóng to của icon */
  transition: transform 0.3s ease-out;
}

.list a p {
  /* Làm mượt hiệu ứng di chuyển của chữ và đổi màu chữ */
  transition: transform 0.3s ease-out, color 0.3s ease-out;
  /* Cần position: relative để gạch chân (::after) căn theo chữ */
  position: relative;
  /* Tạo khoảng trống 5px giữa chữ và gạch chân */
  padding-bottom: 5px;
}

/* tạo gạch chân ẩn */
.list a p::after {
  content: '';
  /* Bắt buộc để pseudo-element hiển thị */
  position: absolute;
  left: 50%;
  /* Đặt gạch chân ở giữa theo chiều ngang */
  bottom: 0;
  /* Nằm sát chân chữ */
  /* Trạng thái ban đầu: ẩn */
  width: 0;
  /* Chiều rộng bằng 0 */
  height: 2px;
  /* Độ dày gạch chân */
  background-color: #5d4037;
  /* Màu nâu sẫm */
  transform: translateX(-50%);
  /* Dịch chuyển ngược lại để căn giữa hoàn hảo */
  /* Làm mượt hiệu ứng dãn ra/thu nhỏ của gạch chân */
  transition: width 0.3s ease-out;
}

/* thay đổi khi hover */
.list a:hover .category-icon {
  transform: scale(1.5);
}

.list a:hover p {
  transform: translateY(5px);
  color: #a0522d;
}

.list a:hover p::after {
  width: 100%;
}

@media (max-width: 768px) {
  /* XỬ LÝ THANH CATEGORY */
  /* Thanh search ra giữa */
  .category {
    flex-direction: column;
    gap: 30px;
    /* Khoảng cách giữa Search và List */
    margin-top: 50px;
  }

    /* XỬ LÝ 5 MỤC */
  .list {
    flex-wrap: wrap;
    /* Cho 5 mục tự xuống dòng nếu chật */
    gap: 30px;
    /* Giảm khoảng cách */
    width: 100%;
    /* Cho nó chiếm 100% */
  }

  .list a .category-icon {
    width: 30px;
    /* Thu nhỏ icon 1 chút */
    height: 30px;
  }
}