/* Navbar trắng viền đen */
.navbar {
      background-color: white !important;
      border-bottom: 2px solid black !important;
      padding: 0.5rem 0;
}

/* Container sát lề */
.container.px-0 {
      padding-left: 0;
      padding-right: 0;
}

/* Điều chỉnh menu */
.nav-link {
      color: #212529 !important;
      font-weight: 500;
      padding: 0.5rem 1rem;
}

.nav-link:hover,
.nav-link.active {
      background-color: rgba(0, 0, 0, 0.05) !important;
}

/* Dropdown menu */
.dropdown-menu {
      border: 1px solid black;
      margin-top: 0;
}

.dropdown-item:hover {
      background-color: #f8f9fa;
      color: #212529 !important;
}

/* Ô search */
.form-control.border-dark {
      border: 1px solid black;
}

.btn-outline-dark {
      border-color: black;
      color: black;
}

.btn-outline-dark:hover {
      background-color: black;
      color: white;
}

.desktop-search-wrap {
      max-width: 760px;
      position: relative;
}

.category-hover-menu {
      position: relative;
      flex-shrink: 0;
}

.category-trigger-btn {
      border-radius: 999px;
      height: calc(1.5em + 0.75rem + 2px);
      padding: 0 1rem;
      font-weight: 600;
      white-space: nowrap;
}

.category-hover-panel {
      position: absolute;
      top: 100%;
      left: 0;
      width: min(92vw, 920px);
      min-height: 430px;
      background: #ffffff;
      border: 1px solid #dee2e6;
      border-radius: 14px;
      display: none;
      z-index: 1080;
      overflow: hidden;
}

.category-hover-list {
      list-style: none;
      margin: 0;
      padding: 0.5rem;
      width: 300px;
      height: 430px;
      overflow-y: auto;
      overflow-x: hidden;
      border-right: 1px solid #e9ecef;
}

.category-hover-item {
      position: static;
}

.category-menu-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      text-decoration: none;
      color: #212529;
      padding: 0.55rem 0.75rem;
      border-radius: 10px;
      font-weight: 500;
}

.category-hover-panel,
.category-menu-link,
.brand-hover-panel,
.brand-panel-title,
.brand-hover-list a,
.brand-suggest-title,
.brand-suggest-list a {
      font-family: inherit;
}

.category-menu-text-wrap {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      min-width: 0;
}

.category-menu-icon {
      width: 18px;
      text-align: center;
      color: #6c757d;
      flex-shrink: 0;
      font-size: 0.95rem;
}

.category-menu-link:hover {
      background: #f3f6fa;
      color: #d90429;
}

.category-menu-link:hover .category-menu-icon {
      color: #d90429;
}

.category-menu-link i {
      font-size: 0.75rem;
      color: #6c757d;
}

.brand-hover-panel {
      position: absolute;
      left: 300px;
      right: 0;
      top: 0;
      bottom: 0;
      background: #ffffff;
      border-left: 1px solid #e9ecef;
      border-radius: 0;
      padding: 1rem;
      display: none;
      box-shadow: none;
      overflow-y: auto;
}

.brand-panel-title {
      font-size: 0.9rem;
      font-weight: 700;
      margin: 0 0 0.5rem;
      color: #212529;
}

.brand-hover-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(3, minmax(120px, 1fr));
      gap: 0.5rem;
}

.brand-hover-list a {
      display: block;
      text-decoration: none;
      color: #212529;
      background: #f8f9fa;
      border-radius: 8px;
      padding: 0.45rem 0.6rem;
      font-size: 0.9rem;
}

.brand-hover-list a:hover {
      background: #ffe5e8;
      color: #d90429;
}

.brand-hover-empty {
      font-size: 0.88rem;
      color: #6c757d;
}

.brand-suggest-wrap {
      margin-top: 0.9rem;
      padding-top: 0.75rem;
      border-top: 1px solid #eceff3;
}

.brand-suggest-title {
      font-size: 0.82rem;
      color: #6c757d;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 0.5rem;
}

.brand-suggest-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem;
}

.brand-suggest-list li {
      flex: 1 1 calc(50% - 0.4rem);
      min-width: 220px;
}

.brand-suggest-list a {
      display: block;
      text-decoration: none;
      color: #1f2937;
      border: 1px solid #e5e7eb;
      background: #f8fafc;
      border-radius: 9px;
      padding: 0.42rem 0.6rem;
      font-size: 0.85rem;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
}

.brand-suggest-list a:hover {
      background: #ffe8eb;
      border-color: #ffc2cc;
      color: #c1121f;
}

.brand-suggest-empty {
      color: #6b7280;
      font-size: 0.84rem;
}

.category-hover-menu.menu-open .category-hover-panel {
      display: block;
}

.category-hover-item.brand-open .brand-hover-panel {
      display: block;
}

@media (max-width: 1366px) {
      .brand-hover-list {
            grid-template-columns: repeat(2, minmax(120px, 1fr));
      }
}

/* Back to Top Button */
.back-to-top {
      position: fixed;
      bottom: 30px;
      right: 30px;
      z-index: 999;
      border: 2px solid #343a40 !important;
      background-color: #343a40 !important;
      color: white !important;
      width: 45px;
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
}

.back-to-top:hover {
      background-color: #23272b !important;
      color: white !important;
}

.mobile-featured-categories-wrap {
      background: #ffffff;
      border: 1px solid #e9ecef;
      border-radius: 14px;
      padding: 0.9rem;
}

.mobile-featured-categories-title {
      font-size: 1.1rem;
      font-weight: 700;
      color: #212529;
      margin: 0;
}

.mobile-featured-categories-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.55rem;
}

.mobile-featured-category-item {
      text-decoration: none;
      color: #212529;
      border: 1px solid #edf0f3;
      background: #f8f9fa;
      border-radius: 10px;
      padding: 0.6rem 0.35rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.3rem;
      min-height: 74px;
}

.mobile-featured-category-icon {
      color: #212529;
      font-size: 1rem;
}

.mobile-featured-category-name {
      font-size: 0.78rem;
      font-weight: 600;
      text-align: center;
      line-height: 1.2;
}

.mobile-featured-category-item:hover,
.mobile-featured-category-item:active {
      background: #f1f3f5;
      border-color: #cfd4da;
      color: #111827;
}

.search-filter-sidebar {
      border: 1px solid #e5e7eb;
      border-radius: 14px;
      background: #ffffff;
      padding: 0.9rem;
      position: sticky;
      top: 110px;
}

.search-filter-title {
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: 1rem;
}

.search-filter-group {
      border-top: 1px solid #eef1f4;
      padding-top: 0.9rem;
      margin-bottom: 0.9rem;
}

.search-filter-group:first-of-type {
      border-top: none;
      padding-top: 0;
}

.search-filter-label {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 0.6rem;
}

.search-filter-check-list {
      display: flex;
      flex-direction: column;
      gap: 0.45rem;
}

.search-filter-check-list label {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.96rem;
      color: #111827;
}

.search-filter-check-list input[type="checkbox"],
.search-filter-check-list input[type="radio"] {
      width: 16px;
      height: 16px;
}

/* ============================================
   MOBILE RESPONSIVE - max-width: 991px
   ============================================ */
@media (max-width: 991px) {

      /* --- Navbar collapse styling --- */
      .navbar-collapse {
            padding: 0.75rem 0;
            background-color: white;
            border-top: 1px solid #e9ecef;
            margin-top: 0.5rem;
      }

      /* Search form on mobile inside collapse */
      .mobile-search-form {
            max-width: 100% !important;
            margin: 0 !important;
      }

      .mobile-search-form .form-control {
            border-radius: 25px 0 0 25px !important;
            border: 1px solid #dee2e6;
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
      }

      .mobile-search-form .btn {
            border-radius: 0 25px 25px 0 !important;
            border: 1px solid #dee2e6 !important;
            border-left: 0 !important;
      }

      /* Mobile header actions - cart + account + hamburger */
      .mobile-header-actions {
            gap: 0.25rem;
      }

      .mobile-cart-btn {
            padding: 0.375rem 0.5rem !important;
            font-size: 0.9rem;
            border-radius: 8px !important;
      }

      /* Mobile nav menu links */
      .mobile-nav-menu {
            margin-top: 0.5rem;
      }

      .mobile-nav-link {
            padding: 0.65rem 0.75rem !important;
            font-size: 0.95rem !important;
            color: #333 !important;
            font-weight: 500;
            border-radius: 8px;
            transition: background-color 0.2s ease;
      }

      .mobile-nav-link:hover,
      .mobile-nav-link:active {
            background-color: #f0f4ff !important;
            color: #0d6efd !important;
      }

      .mobile-nav-link.nav-active {
            border-bottom: none !important;
            box-shadow: none !important;
      }

      .mobile-nav-link i {
            width: 20px;
            text-align: center;
            color: #6c757d;
      }

      .mobile-nav-link:hover i {
            color: #0d6efd;
      }

      .desktop-search-wrap,
      .category-hover-menu,
      .category-hover-panel,
      .brand-hover-panel {
            display: none !important;
      }

      .mobile-featured-categories-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
      }
}

/* ============================================
   DESKTOP - min-width: 992px
   ============================================ */
@media (min-width: 992px) {
      .navbar-collapse {
            padding: 0;
            background-color: transparent;
            border-top: none;
            margin-top: 0;
      }
}

/* Base styles for E-commerce Banner */
.banner-img {
      object-fit: cover;
      height: 200px;
      /* Mobile height */
}

@media (min-width: 768px) {
      .banner-img {
            height: 300px;
            /* Tablet height */
      }
}

@media (min-width: 992px) {
      .banner-img {
            height: 400px;
            /* Desktop height */
      }
}