/* ====== base ====== */
.container {
  max-width: 1400px;
}

.site-header {
  background: #08300f;
}

/* ====== header top ====== */
.header-top {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* logo trái */
.header-left {
  flex: 0 0 auto;
}

.logo {
  width: 80px;
  height: 80px;
}

.logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* search desktop: nằm cùng hàng */
.search-desktop {
  flex: 1 1 auto;
  /* chiếm phần còn lại */
  min-width: 0;
  /* chống tràn trong flex */
  max-width: 520px;
  /* giới hạn để không đè lên account */
}

.search-desktop .input-group {
  width: 100%;
}

.search-desktop .form-control {
  border-right: 0;
}

.search-desktop .btn {
  border-left: 0;
}

/* right: account + cart + icon search (mobile) */
.header-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

/* nút icon search (chỉ hiện mobile) */
.search-icon-btn {
  display: none;
  /* desktop ẩn */
  border: none;
  background: #ffffff;
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}

.search-icon-btn i {
  font-size: 18px;
  color: #222;
}

/* account */
.account {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
}

.account-link {
  margin-left: 20px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.account-link:hover {
  text-decoration: underline;
}

.sep {
  opacity: 0.8;
}

/* cart */
.cart-btn {
  color: #fff;
  font-size: 22px;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 10px;
}

.cart-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ====== search dropdown (mobile) ====== */
.search-dropdown {
  display: none;
  padding: 10px 0 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
}

.search-dropdown.show {
  display: block;
}

.search-dropdown .input-group {
  width: 100%;
}

.search-dropdown .form-control {
  border-right: 0;
}

.search-dropdown .btn {
  border-left: 0;
}

/* ====== menu dưới ====== */
.header-nav {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding: 8px 0;
}

.nav-menu {
  display: flex;
  gap: 10px;
}

.nav-menu .nav-link {
  color: #fff;
  font-weight: 600;
  border-radius: 10px;
  padding: 10px 12px;
}

.nav-menu .nav-link:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* dropdown menu bootstrap */
.dropdown-menu {
  border-radius: 12px;
}

/* ====== responsive ====== */
@media (max-width: 576px) {

  /* mobile: ẩn search desktop, hiện icon search */
  .search-desktop {
    display: none;
  }

  .search-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* chữ account gọn lại một chút */
  .account {
    font-size: 14px;
  }

  /* menu xuống dọc cho dễ bấm */
  .nav-menu {
    flex-direction: column;
    gap: 6px;
  }

  .nav-menu .nav-link {
    padding: 10px;
  }
}

.section-title {
  color: #0b0b0b;
  font-weight: 800;
}

.product-card {
  background: #0f3f18;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.product-thumb {
  background: #0b2c11;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-body {
  padding: 14px;
}

.product-name {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
}

.product-price {
  color: #d7ffd9;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
}

.product-actions {
  display: flex;
  gap: 10px;
}

.btn-add-cart {
  flex: 1;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.btn-add-cart:hover {
  background: rgba(255, 255, 255, 0.12);
}

.btn-buy-now {
  flex: 1;
  font-weight: 700;
}


/* ====== FOOTER ====== */
.site-footer {
  background: #08300f;
  margin-top: 40px;
  color: #e0ffe3;
}

.footer-top {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 40px 0;
}

/* logo footer */
.footer-logo {
  width: 80px;
  height: 80px;
  margin-bottom: 12px;
}

.footer-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* text */
.footer-desc {
  font-size: 14px;
  line-height: 1.6;
  color: #c9f5cf;
}

/* title */
.footer-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #ffffff;
}

/* links */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: #c9f5cf;
  text-decoration: none;
  font-size: 14px;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* contact */
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

.footer-contact li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.footer-contact i {
  font-size: 16px;
}

/* bottom */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding: 14px 0;
  text-align: center;
  font-size: 14px;
  color: #c9f5cf;
}

/* ====== FOOTER RESPONSIVE ====== */
@media (max-width: 992px) {
  .footer-top {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-logo {
    margin: 0 auto 12px;
  }

  .footer-desc,
  .footer-title,
  .footer-links,
  .footer-contact {
    text-align: center;
  }

  .footer-contact li {
    justify-content: center;
  }
}

/* --- SỬA GIAO DIỆN MODAL AUTH --- */

/* 1. Xử lý thanh Tab: Ép ngắn lại để không chạm vào nút X */
#authModal .nav-pills {
  margin-right: 40px;
  /* Chừa khoảng trống bên phải cho nút X */
  border-bottom: 2px solid #eee;
  /* Kẻ đường line mờ bên dưới cho đẹp */
}

/* 2. Style cho nút Tab (Đăng nhập / Đăng ký) */
#authModal .nav-link {
  color: #666;
  /* Màu chữ xám khi chưa chọn */
  font-weight: 700;
  border-radius: 0;
  /* Vuông vức */
  background: transparent !important;
  /* Bỏ nền xanh mặc định của Bootstrap */
  padding: 12px 0;
  position: relative;
}

/* 3. Hiệu ứng khi Tab được chọn (Active) */
#authModal .nav-link.active {
  color: #08300f !important;
  /* Chữ chuyển sang màu xanh chủ đạo */
  border-bottom: 3px solid #08300f;
  /* Gạch chân màu xanh */
  background: transparent !important;
}

/* 4. Đặt nút đóng (X) nằm gọn gàng ở góc */
#authModal .btn-close {
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 1060;
  opacity: 0.8;
  background-size: 14px;
  /* Chỉnh icon X nhỏ lại xíu cho tinh tế */
}

/* 5. Tinh chỉnh Header Modal */
#authModal .modal-header {
  border: none;
  padding: 10px 15px 0;
  /* Căn chỉnh khoảng cách */
  position: relative;
}

/* --- CART BADGE (SỐ LƯỢNG TRÊN GIỎ HÀNG) --- */
.cart-btn {
  position: relative;
  /* Để căn chỉnh số lượng theo icon */
}

.cart-badge {
  position: absolute;
  top: -6px;
  /* Nhích lên một chút cho thoáng */
  right: -10px;
  /* Nhích sang phải một chút */

  background-color: #e31c1c;
  color: #ffffff;

  /* Kích thước cố định để đảm bảo tròn vo */
  width: 20px;
  height: 20px;
  border-radius: 50%;

  /* Font chữ */
  font-size: 11px;
  font-weight: 700;

  /* === CĂN GIỮA TUYỆT ĐỐI === */
  display: flex;
  align-items: center;
  justify-content: center;

  /* Reset các thuộc tính gây lệch */
  padding: 0;
  line-height: 1;

  /* Viền */
  border: 2px solid #08300f;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* Thêm chút bóng cho nổi */
}
/* --- THÊM VÀO CUỐI FILE style.css --- */

/* Mobile: Chỉ hiện Avatar, ẩn tên */
@media (max-width: 768px) {
  .account span {
    display: none !important; /* Ẩn tên */
  }
  
  .account img {
    margin-right: 0 !important; /* Bỏ lề phải của ảnh cho gọn */
    width: 36px !important;     /* Tăng kích thước avatar lên chút cho dễ bấm */
    height: 36px !important;
    border: 2px solid rgba(255,255,255,0.2); /* Thêm viền nhẹ cho đẹp */
  }

  /* Căn chỉnh lại khu vực bên phải header cho đỡ chật */
  .header-right {
    gap: 8px; /* Giảm khoảng cách giữa các nút */
  }
  
  .cart-btn {
    font-size: 20px; /* Thu nhỏ icon giỏ hàng xíu */
    padding: 6px;
  }
}
/* Css/style.css */

/* --- FIX LỖI FOOTER: Luôn đẩy chân trang xuống đáy màn hình --- */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Chiều cao trang web luôn bằng ít nhất 100% màn hình */
}

main {
  flex: 1; /* Nội dung chính sẽ tự giãn ra để lấp đầy khoảng trống thừa */
  width: 100%; /* Đảm bảo nội dung không bị co lại */
}