body {
	font-family: 'Poppins', sans-serif;
    background-color: #fdf5f3;
}
.card {
    border: none;
    background-color: #fff3ed;
    margin-bottom: 10px;
    border-radius: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#scrollArrow {
    position: fixed;
    bottom: 80px; /* Đẩy lên trên fixed-bottom navbar */
    right: 20px;
    z-index: 1050; /* Đảm bảo ở trên cùng */
    background-color: #f8f9fa;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

#scrollArrow:hover {
    background-color: #007bff;
    color: #fff;
}

.scroll-buttons {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 1000;
}

.scroll-buttons button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.scroll-buttons button i {
    font-size: 20px;
    color: white;
}

.card img {
    object-fit: cover;
    width: 100%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
.card-title {
    color: #333;
    font-weight: bold;
}
.card-text {
    color: #666;
}
.price {
    color: #ff7f50;
    font-size: 1.2rem;
    font-weight: bold;
}
.rating {
    color: #ffa41b;
}
.add-to-cart-btn {
    background-color: #ff7f50;
    color: #fff;
    border-radius: 25px;
    font-weight: bold;
    transition: background-color 0.3s;
}
.add-to-cart-btn:hover {
    background-color: #ff6347;
}
#searchInput, #sortSelect, #priceOrderSelect {
    padding: 8px 12px; /* Khoảng cách giữa nội dung và viền */
    outline: none; /* Loại bỏ viền mặc định khi focus */
    transition: all 0.3s ease; /* Thêm hiệu ứng mượt mà khi hover hoặc focus */
}
#minPrice, #maxPrice{
	border-radius: 15px;
}

#searchInput:focus {
    border-color: #f6a4d2; /* Màu viền khi focus */
    box-shadow: 0 0 8px rgba(246, 164, 210, 0.6); /* Hiệu ứng đổ bóng khi focus */
}

#searchInput:hover {
    border-color: #f6a4d2; /* Đổi màu viền khi hover */
    box-shadow: 0 0 6px rgba(246, 164, 210, 0.4); /* Thêm hiệu ứng đổ bóng nhẹ khi hover */
}
.d-none {
    display: none;
}

/* Đảm bảo luôn hiển thị 3 cột trên mọi màn hình */
   .three-col-mobile .col-md-4 {
       flex: 0 0 33.333%; /* Chiếm 1/3 chiều rộng */
       max-width: 33.333%;
   }
   .three-col-mobile .col-md-4 {
            flex: 0 0 33.333%;
            max-width: 33.333%;
   	   font-size: 9px;
        }

	  
      .category-navigation.show {
          transform: translateX(0);
      }

      .category-header {
          padding: 1rem;
          text-align: right;
      }

      .btn-close {
          font-size: 1.5rem;
          background: none;
          border: none;
          cursor: pointer;
      }

      .category-content {
          padding: 1rem;
      }

	  @media (max-width: 768px) {
	      .category-navigation {
	          display: block;
	      }
		  .category-navigation {
		      position: fixed;
		      top: 0;
		      left: 0;
		      width: 200px;
		      height: 100%;
		      background-color: #f8f9fa;
		      box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
		      transform: translateX(-100%);
		      transition: transform 0.3s ease-in-out;
		      z-index: 1050;
		      overflow-y: auto;
		  }

		  .category-title {
			  font-weight: bold;
		      font-size: 1.5rem; /* Kích thước chữ lớn cho "Danh mục" */
		      color: #333;
		  }
		  .category-navigation.show {
		      transform: translateX(0);
		  }

		  .category-header {
		      padding: 1rem;
		      text-align: right;
		      border-bottom: 1px solid #ddd;
		  }

		  .category-content {
		      display: flex;
		      flex-direction: column; /* Hiển thị danh mục theo chiều dọc */
		      gap: 10px; /* Khoảng cách giữa các nút */
		      padding: 1rem;
		  }

		  .category-btn {
		      width: 100%; /* Nút chiếm toàn bộ chiều ngang */
		      text-align: left; /* Canh trái nội dung nút */
		      background-color: #ffffff;
		      border: 1px solid #ddd;
		      border-radius: 5px;
		      padding: 10px;
		      color: #333;
		      font-size: 16px;
		      font-weight: bold;
		      transition: all 0.3s ease;
		  }

		  .category-btn:hover {
		      background-color: #f6a4d2; /* Màu nền khi hover */
		      color: #fff; /* Màu chữ khi hover */
		  }

	  }