.banner-left, .banner-right {
    position: fixed;
    top: 20%;
    width: 120px;
    height: 300px;
    background-color: #ffc107;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: black;
}
.banner-left {
    left: 10px;
}
.banner-right {
    right: 10px;
}
/* Hiệu ứng scale-up */
@keyframes scale-up {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.1);
    }
  }
  /* Hiệu ứng xuất hiện cho dropdown */
@keyframes dropdown-fade {
  0% {
    opacity: 0; /* Bắt đầu với độ mờ */
    transform: translateY(-10px); /* Dịch chuyển lên trên */
  }
  100% {
    opacity: 1; /* Hiển thị hoàn toàn */
    transform: translateY(0); /* Về vị trí ban đầu */
  }
}
/* Hiệu ứng nháy liên tục */
@keyframes blink {
  0%, 100% {
    opacity: 1; /* Hiển thị đầy đủ */
    background-color: transparent; /* Nền trong suốt */
  }
  50% {
    opacity: 0.5; /* Hiển thị đầy đủ */
  }
}
/* Hiệu ứng nhảy lên xuống */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0); /* Vị trí ban đầu */
  }
  50% {
    transform: translateY(-10px); /* Nhảy lên */
  }
}
@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
            transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
            transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
            transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
            transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
  
  .card-img-top:hover {
    animation: scale-up 0.3s forwards;
  }
  /* Hiệu ứng scale-up */
.card-img-top {
    transition: transform 0.3s ease-in-out; /* Thêm hiệu ứng chuyển đổi */
  }
  
  .card-img-top:hover {
    transform: scale(1.1); /* Phóng to hình ảnh khi hover */
  }
  .navbar-nav .nav-item .nav-link {
    font-family: inherit; /* Kế thừa font chữ từ .navbar */
    font-size: 20px; /* Kế thừa kích thước chữ từ .navbar */
    color: white; /* Màu chữ mặc định */
    -webkit-text-stroke: 0.2px blue; /* Viền chữ màu đen */
    font-weight: bold; /* Làm chữ in đậm */
    text-transform: uppercase; /* Chữ in hoa */
    padding: 10px 15px; /* Khoảng cách bên trong */
    text-decoration: none; /* Xóa gạch chân */
    transition: all 0.3s ease; /* Hiệu ứng chuyển đổi */
    display: flex; /* Sử dụng flexbox */
    justify-content: center; /* Căn giữa nội dung theo chiều ngang */
    align-items: center; /* Căn giữa nội dung theo chiều dọc */
    text-align: center; /* Căn giữa nội dung */
    border: 2px solid transparent; /* Đặt viền mặc định trong suốt */
    width: 150px; /* Đặt chiều rộng cố định cho các mục */
    height: 100px; /* Đặt chiều cao cố định cho các mục */
  }
  
  .navbar-nav .nav-item .nav-link:hover  {
    background-color: blue; /* Màu nền khi hover */
    color: yellow; /* Màu chữ khi hover */
    border-radius: 20px; /* Bo góc khi hover */
    border: 2px solid yellow; /* Đặt viền khi hover */
  }
  .navbar {
    font-family: 'Arial', sans-serif; /* Đặt font chữ mới */
    font-size: 16px; /* Kích thước chữ */
    font-weight: normal; /* Độ đậm của chữ */
    color: white; /* Màu chữ mặc định */
  }
  .navbar-nav {
    display: flex; /* Sử dụng flexbox cho navbar-nav */
    justify-content: center; /* Căn giữa theo chiều ngang */
    align-items: center; /* Căn giữa theo chiều dọc */
  }
  .navbar-nav .nav-item {
    margin: 0 10px; /* Khoảng cách giữa các mục */
  }
  .navbar-brand {
    font-family: 'Dancing Script', cursive; /* Font chữ riêng cho thương hiệu */
    font-size: 1.5rem; /* Kích thước chữ */
    font-weight: bold; /* Chữ đậm */
    color: blue; /* Màu chữ */
    text-decoration: none; /* Xóa gạch chân */
    margin-left: 10px;
}

.navbar-brand:hover {
    background-color: blue; /* Màu nền khi hover */
    color: yellow; /* Màu chữ khi hover */
    border-radius: 20px; /* Bo góc khi hover */
    border: 2px solid yellow; /* Tăng độ dày viền */
    padding-left: 10px; /* Tăng khoảng cách bên trong để viền rộng hơn */
    padding-right: 10px; /* Tăng khoảng cách bên trong để viền rộng hơn */
    
}
/* Đổi màu nền của dropdown */
.dropdown-menu {
  background-color: white !important; /* Màu nền mới */
  color: black !important; /* Màu chữ */
  border: none; /* Xóa viền */
  animation: dropdown-fade 0.3s ease-in-out; /* Áp dụng hiệu ứng */
  border-radius: 10px; /* Bo góc cho dropdown */
}
.dropdown-item {
  color: black !important; /* Màu chữ mặc định */
  text-decoration: none; /* Xóa gạch chân */
  padding: 10px 15px; /* Khoảng cách bên trong */
  transition: all 0.3s ease; /* Hiệu ứng chuyển đổi */
  display: flex !important; /* Sử dụng flexbox */
  justify-content: flex-start; /* Căn giữa nội dung về bên trái */
  align-items: center !important; /* Căn giữa nội dung theo chiều dọc */
  text-align: left ; /* Căn  nội dung */
  gap: 10px; /* Khoảng cách giữa icon và chữ */

}
/* Đổi màu nền khi hover vào các mục trong dropdown */
.dropdown-menu .dropdown-item:hover {
  color: red !important; /* Màu chữ khi hover */
  background-color: yellow !important; /* Màu nền khi hover */
    border-radius: 20px; /* Bo góc khi hover */
    border: 1px solid yellow; /* Đặt viền khi hover */
}
/*kich co dropdown*/
.dropdown-item img {
  width: 20px; /* Đặt kích thước icon */
  height: 20px; /* Đặt kích thước icon */
}
/* Tùy chỉnh list group */
.list-group-item {
  font-size: 16px; /* Kích thước chữ */
  font-weight: bold; /* Chữ đậm */
  color: white; /* Màu chữ */
  background-color: #007bff; /* Màu nền mặc định */
  border: none; /* Xóa viền */
  display: flex; /* Sử dụng flexbox */
  align-items: center; /* Căn giữa nội dung theo chiều dọc */
  gap: 10px; /* Khoảng cách giữa icon và chữ */
  transition: all 0.3s ease; /* Hiệu ứng chuyển đổi */
}

.list-group-item img {
  width: 30px; /* Kích thước icon */
  height: 30px; /* Kích thước icon */
  object-fit: cover; /* Đảm bảo icon không bị méo */
}

.list-group:hover {
  background-color: #0056b3; /* Màu nền khi hover */
  color: #fff; /* Màu chữ khi hover */
  transform: scale(1.05); /* Phóng to nhẹ khi hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hiệu ứng đổ bóng */
  
}
.list-group-item:hover {
  background-color: #0056b3; /* Màu nền khi hover */
  color: #fff; /* Màu chữ khi hover */
  transform: scale(1.05); /* Phóng to nhẹ khi hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hiệu ứng đổ bóng */
  border-radius: 20px; /* Bo góc khi hover */
  border: 3px solid red; /* Đặt viền khi hover */

}

.search-cart-container {
  display: flex;
  align-items: center;
  justify-content: flex-end; /* Đưa nội dung về bên phải */
  gap: 20px; /* Tạo khoảng cách giữa thanh tìm kiếm và giỏ hàng */
}

.cart-icon {
  font-family: inherit; /* Kế thừa font chữ từ .navbar */
  font-size: 20px; /* Kích thước chữ */
  color: white; /* Màu chữ mặc định */
  -webkit-text-stroke: 0.2px blue; /* Viền chữ màu xanh */
  font-weight: bold; /* Chữ in đậm */
  text-transform: uppercase; /* Chữ in hoa */
  text-decoration: none; /* Xóa gạch chân */
  padding: 10px 15px; /* Khoảng cách bên trong */
  transition: all 0.3s ease; /* Hiệu ứng chuyển đổi */
  display: flex; /* Sử dụng flexbox */
  justify-content: center; /* Căn giữa nội dung theo chiều ngang */
  align-items: center; /* Căn giữa nội dung theo chiều dọc */
  text-align: center; /* Căn giữa nội dung */
  border: 2px solid transparent; /* Đặt viền mặc định trong suốt */
  width: auto; /* Tự động điều chỉnh chiều rộng */
  height: auto; /* Tự động điều chỉnh chiều cao */
}

/* Hiệu ứng khi hover */
.cart-icon:hover {
  background-color: blue; /* Màu nền khi hover */
  color: yellow; /* Màu chữ khi hover */
  border-radius: 20px; /* Bo góc khi hover */
  border: 2px solid yellow; /* Đặt viền khi hover */
}
/* Căn chỉnh giỏ hàng */
.list-group-item.active {
  background-color: #004085; /* Màu nền cho mục đang active */
  color: #fff; /* Màu chữ cho mục đang active */
}
.list-group {
  background-color: red; /* Màu nền của toàn bộ menu */
  border-radius: 10px; /* Bo góc cho menu */
  padding: 10px; /* Khoảng cách bên trong */
}
/*dặt màu nền cho sile*/
.col-lg-9 {
  background-color: red; /* Màu nền mới */
  color: #000; /* Màu chữ */
  border-radius: 10px; /* Bo góc (nếu cần) */
  padding: 20px; /* Khoảng cách bên trong */
}
/* Đặt màu nền cho sản phẩm */
.full-width-center {
  display: block; /* Đảm bảo hình ảnh là khối */
  margin: 0 auto; /* Căn giữa hình ảnh */
  width: 100%; /* Phóng to hình ảnh hết chiều rộng trang */
  max-width: 100%; /* Đảm bảo không vượt quá chiều rộng trang */
  height: 160px; /* Giữ tỷ lệ khung hình */
}
/* nháy liên tục ảnh */
.blinking-img {
  animation: blink 3s infinite; /* Áp dụng hiệu ứng nháy liên tục */
  display: block; /* Đảm bảo hình ảnh là khối */
  margin: 0 auto; /* Căn giữa hình ảnh */
  background-color: red;
}
.cacsanpham {
  font-size: 50px; /* Cỡ chữ lớn */
  font-weight: bold; /* In đậm */
  text-align: center; /* Nằm giữa trang */
  margin: 20px 0; /* Cách các danh sách ra một đoạn */
  line-height: 1.8; /* Tăng khoảng cách giữa các dòng */
  color: white; /* Màu chữ */
  background-color: red  ; /* Màu nền */
  padding: 20px; /* Khoảng cách bên trong */
  border-radius: 10px; /* Bo góc cho tiêu đề */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hiệu ứng đổ bóng */
    margin-top: 20px; /* Tạo khoảng cách 10px phía trên */
  
}
.img-icon {
  width: 24px; /* Đặt chiều rộng cho icon */
  height: auto; /* Giữ tỷ lệ khung hình */
  animation: bounce 1s infinite; /* Áp dụng hiệu ứng nhảy liên tục */
  display: inline-block; /* Đảm bảo ảnh hiển thị đúng */
  margin-left: 10px; /* Khoảng cách giữa chữ và ảnh */
}

.img-lenxuong {
  animation: bounce 1s infinite; /* Áp dụng hiệu ứng nhảy liên tục */
  display: block; /* Đảm bảo ảnh là khối */
  margin: 0 auto; /* Căn giữa ảnh */
  transition: transform 0.3s ease-in-out; /* Hiệu ứng chuyển đổi mượt */
}
.row {
  display: flex; /* Sử dụng Flexbox để căn chỉnh các cột */
  flex-wrap: wrap; /* Đảm bảo các cột xuống dòng khi không đủ không gian */
  justify-content: space-between; /* Căn đều các cột trong hàng */
  align-items: stretch; /* Căn đều chiều cao các cột trong hàng */  
}
.card {
  display: flex;
  flex-direction: column; /* Sắp xếp nội dung theo chiều dọc */
  justify-content: space-between; /* Căn đều nội dung trong thẻ */
  height: auto; /* Đảm bảo chiều cao đồng nhất */
  width: 100%; /* Đảm bảo chiều rộng đồng nhất */
  margin-bottom: 50px; /* Khoảng cách giữa các hàng */
  border-radius: 10px; /* Bo góc cho thẻ */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Hiệu ứng đổ bóng */
}

.card-img-top {
  width: 200px ; /* Đảm bảo ảnh chiếm toàn bộ chiều rộng thẻ */
  height: 100%; /* Đặt chiều cao cố định cho ảnh */
  object-fit: cover; /* Đảm bảo ảnh không bị méo */
}

.card-body {
  flex-grow: 1; /* Đảm bảo nội dung chiếm không gian còn lại */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Căn đều nội dung trong thẻ */
}
.card-title {
  font-size: 1rem; /* Kích thước chữ */
  font-weight: bold; /* Chữ đậm */
  color: #333; /* Màu chữ */
  height: 70px; /* Chiều cao cố định cho tiêu đề */
  overflow: hidden; /* Ẩn nội dung tràn */
  text-overflow: ellipsis; /* Thêm dấu "..." nếu nội dung quá dài */
  display: -webkit-box; /* Sử dụng Flexbox để giới hạn dòng */
  -webkit-line-clamp: 2; /* Giới hạn hiển thị 2 dòng (Webkit) */
  -webkit-box-orient: vertical; /* Đặt hướng hiển thị theo chiều dọc (Webkit) */
  line-clamp: 2; /* Chuẩn hóa cho các trình duyệt hỗ trợ */
  box-orient: vertical; /* Chuẩn hóa cho các trình duyệt hỗ trợ */
}

.btn-xem-them {
  display: flex; /* Sử dụng Flexbox để căn chỉnh nội dung */
  justify-content: center; /* Căn giữa nội dung theo chiều ngang */
  align-items: center; /* Căn giữa nội dung theo chiều dọc */
  width: 100%; /* Chiếm toàn bộ chiều rộng màn hình */
  background-color: #007bff; /* Màu nền cho nút */
  color: yellow; /* Màu chữ */
  padding: 15px ; /* Khoảng cách trên và dưới */
  text-decoration: none; /* Xóa gạch chân */
  font-size: 20px; /* Tăng kích thước chữ */
  font-weight: bold; /* In đậm chữ */
}

.btn-xem-them img {
  margin-left: 10px; /* Khoảng cách giữa chữ và ảnh */
  width: 24px; /* Đặt chiều rộng ảnh */
  height: auto; /* Giữ tỷ lệ khung hình */
}
.btn-xem-them:hover {
  background-color: #0056b3; /* Màu nền khi hover */
  color: yellow; /* Màu chữ khi hover */
  border-radius: 20px; /* Bo góc khi hover */
  border: 2px solid yellow; /* Đặt viền khi hover */
}
.footer {
  background-color: red; /* Màu nền tối */
  color: #ffffff; /* Màu chữ */
}

.footer h5 {
  font-weight: bold;
  margin-bottom: 15px;
}

.footer .social-icons a {
  font-size: 20px;
  transition: color 0.3s ease;
}

.footer .social-icons a:hover {
  color: #007bff; /* Màu khi hover */
}

.footer hr {
  border-top: 1px solid #ffffff;
  opacity: 0.2;
}
.card-text {
  color: red !important; /* Màu chữ  */
  font-size: 1.2rem; /* Tăng kích thước chữ */
  font-weight: bold; /* Chữ đậm */
  transition: transform 0.3s ease, color 0.3s ease; /* Hiệu ứng khi hover */
}

.card-text:hover {
  color: orange; /* Đổi màu khi hover */
  transform: scale(1.1); /* Phóng to nhẹ khi hover */
}
.hot-sale {
  position: absolute; /* Đặt vị trí tuyệt đối */
  top: 10px; /* Cách mép trên 10px */
  right: 10px; /* Cách mép phải 10px */
  background-color: red; /* Màu nền đỏ */
  color: white; /* Màu chữ trắng */
  font-size: 12px; /* Kích thước chữ */
  font-weight: bold; /* Chữ đậm */
  padding: 5px 10px; /* Khoảng cách bên trong */
  border-radius: 5px; /* Bo góc nhãn */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Hiệu ứng đổ bóng */
  z-index: 10; /* Đảm bảo nhãn nằm trên cùng */
  text-transform: uppercase; /* Chữ in hoa */
  animation: bounce 1s infinite; /* Áp dụng hiệu ứng nhảy liên tục */
  display: inline-block; /* Đảm bảo ảnh hiển thị đúng */
}
.img-icon-sanpham {
  width: 50px; /* Đặt chiều rộng cho icon */
  height: auto; /* Giữ tỷ lệ khung hình */
  animation:  blink 1.5s infinite; /* Áp dụng hiệu ứng nhảy liên tục */
  display: inline-block; /* Đảm bảo ảnh hiển thị đúng */
  margin-left: 10px; /* Khoảng cách giữa chữ và ảnh */
}
.product-details-container {
  background-color: #ffffff; /* Màu nền trắng */
  padding: 50px; /* Khoảng cách bên trong */
  border-radius: 50px; /* Bo góc */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow */
  border: 1px solid #ddd; /* Viền nhẹ */
}
#scrollToTop {
  display: none; /* Ẩn nút mặc định */
  position: fixed;
  bottom: 20px; /* Cách đáy màn hình 20px */
  right: 20px; /* Cách phải màn hình 20px */
  z-index: 1000; /* Đảm bảo nút nằm trên các thành phần khác */
}

#scrollToTop span {
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: red;
  color: white;
  border-radius: 50%;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#scrollToTop span:hover {
  background-color: yellow;
  color: black;
}
/* Trang trí tiêu đề giỏ hàng */
h1 {
  font-size: 2.5rem;
  font-weight: bold;
  color: #007bff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

/* Bảng giỏ hàng */
.table {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.table th {
  background-color: #007bff;
  color: white;
  font-size: 1.2rem;
}

.table td {
  vertical-align: middle;
}

/* Hình ảnh sản phẩm trong giỏ hàng */
.cart-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Nút xóa sản phẩm */
.btn-danger {
  font-size: 0.9rem;
  padding: 5px 10px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.btn-danger:hover {
  background-color: #ff4d4d;
  border-color: #ff4d4d;
}

/* Tổng tiền và nút thanh toán */
.cart-summary h4 {
  font-size: 1.5rem;
  font-weight: bold;
}

.cart-summary .btn-success {
  font-size: 1.2rem;
  padding: 10px 20px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.cart-summary .btn-success:hover {
  background-color: #7fff9d;
  border-color: #28a745;
}
/* Nút xóa sản phẩm */
.btn-danger {
  font-size: 0.9rem;
  padding: 5px 10px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.btn-danger:hover {
  background-color: #ff4d4d;
  border-color: #ff4d4d;
}
/* Nút chốt đơn */
#checkout {
  background-color: red; /* Màu nền đỏ */
  color: white; /* Màu chữ trắng */
  font-size: 1.2rem; /* Kích thước chữ */
  padding: 10px 20px; /* Khoảng cách bên trong */
  border-radius: 10px; /* Bo góc */
  border: none; /* Xóa viền */
  display: block; /* Đặt nút thành khối */
  margin: 20px auto; /* Căn giữa và tạo khoảng cách phía trên/dưới */
  transition: all 0.3s ease; /* Hiệu ứng chuyển đổi */
}

/* Hiệu ứng khi hover nút chốt đơn */
#checkout:hover {
  background-color: darkred; /* Màu nền khi hover */
  color: yellow; /* Màu chữ khi hover */
  transform: scale(1.05); /* Phóng to nhẹ khi hover */
}
/* Đảm bảo footer nằm ở cuối trang */