/* Video shorts container */
  .shorts-container {
    width: 100%;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
  }
  
  /* Animation for rotate and fade */
  @keyframes rotateAndFade {
    0% {
      opacity: 0;
      transform: rotate(0deg) scale(0.1);
      border-radius: 50%;
    }
    50% {
      opacity: 0.5;
      transform: rotate(360deg) scale(0.3);
      border-radius: 50%;
    }
    100% {
      opacity: 1;
      transform: rotate(720deg) scale(1);
    }
  }
  
  /* AOS animation class */
  .aos-animate.rotate-fade {
    animation: rotateAndFade 5s ease-out forwards;
  }
  
  /* Scratch card styles */
  .scratch-box {
    min-height: 80px;
    font-size: 1.25rem;
  }

  /* LED chữ chạy ngang glow effect */
.led-banner marquee span {
    display: inline-block;
    animation: led-glow 1.2s ease-in-out infinite alternate;
    font-weight: bold;
    letter-spacing: 1px;
    text-shadow: 0 0 5px #fff, 0 0 10px #ff0, 0 0 20px red;
  }
  
  @keyframes led-glow {
    from { opacity: 0.7; transform: scale(1); }
    to { opacity: 1; transform: scale(1.05); }
  }

.custom-arrow {
    background-color: #0d6efd;
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 42px;
    height: 42px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease;
    z-index: 10;
  }
  
  .custom-arrow:hover {
    background-color: #084298;
  }
  
  
  .combo-carousel .slick-prev,
  .combo-carousel .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .combo-carousel .slick-prev {
    left: -16px;
  }
  
  .combo-carousel .slick-next {
    right: -16px;
  }
  
  /* video short */
.modal-overlay-full {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.95);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Product card styles for HydraulicBladeProducts */
.product-card {
  transition: all 0.3s ease;
  border-radius: 12px;
  overflow: hidden;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
}

.product-card .card-header {
  background: linear-gradient(135deg, #0d6efd 0%, #084298 100%);
  border: none;
  padding: 0.75rem;
}

.product-card .card-body {
  padding: 1.5rem;
}

.product-card .card-title {
  font-size: 0.95rem;
  line-height: 1.4;
  min-height: 2.8rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Category filter buttons */
.btn-group .btn {
  border-radius: 0;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
}

.btn-group .btn:first-child {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.btn-group .btn:last-child {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

/* Responsive adjustments for product cards */
@media (max-width: 768px) {
  .product-card .card-title {
    font-size: 0.9rem;
    min-height: auto;
  }
  
  .btn-group {
    flex-wrap: wrap;
  }
  
  .btn-group .btn {
    flex: 1;
    min-width: 120px;
    margin-bottom: 0.25rem;
  }
}

/* Filter UI tối ưu - Giao diện thân thiện */
.filter-card {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.filter-card .form-select {
  border: 2px solid #e9ecef;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.filter-card .form-select:focus {
  border-color: #6a11cb;
  box-shadow: 0 0 0 0.2rem rgba(106, 17, 203, 0.25);
}

.filter-card .input-group-text {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  color: white;
  border: none;
  border-radius: 8px 0 0 8px;
}

.filter-card .input-group {
  position: relative;
  z-index: 1;
}

.filter-card .form-control {
  border: 2px solid #e9ecef;
  border-left: none;
  border-radius: 0 8px 8px 0;
  transition: all 0.3s ease;
}

.filter-card .form-control:focus {
  border-color: #6a11cb;
  box-shadow: 0 0 0 0.2rem rgba(106, 17, 203, 0.25);
}

.filter-card .btn-outline-secondary {
  border-radius: 0 8px 8px 0;
  border-left: none;
}

.filter-card .btn-outline-primary {
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.filter-card .btn-outline-primary:hover {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
  border-color: #6a11cb;
  transform: translateY(-1px);
}

/* Auto suggest dropdown - Fixed position, không scroll */
.suggestions-dropdown {
  position: fixed !important;
  background: white !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  z-index: 9999 !important;
  /* Loại bỏ hoàn toàn scroll */
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
  /* Override mọi CSS khác */
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* Ensure global search (inside .search-wrapper) dropdown is positioned under the input
   Override any global fixed rules so it attaches to the input group */
.search-wrapper .suggestions-dropdown {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  margin-top: 6px !important;
  display: block !important;
}

/* Make dropdown self-limit height and only scroll when necessary */
.search-wrapper .suggestions-dropdown {
  max-height: 60vh !important; /* never taller than viewport */
  overflow-y: auto !important; /* show scrollbar only if content exceeds max-height */
  overflow-x: hidden !important;
}

/* Show normal scrollbars for search-wrapper dropdown (override hidden scrollbar rules) */
.search-wrapper .suggestions-dropdown::-webkit-scrollbar { display: block !important; width: 10px !important; }
.search-wrapper .suggestions-dropdown::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12) !important; border-radius: 8px !important; }

/* Make card preview area wrap and constrain height */
.search-wrapper .suggestion-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px !important;
  box-sizing: border-box;
  max-height: 48vh; /* keep preview area reasonable */
  overflow-y: auto !important;
}

/* Make card size responsive so it won't overflow horizontally */
.search-wrapper .suggestion-cards .card { flex: 1 1 180px; min-width: 160px; max-width: 240px; }

/* Ẩn scrollbar cho mọi browser */
.suggestions-dropdown::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.suggestions-dropdown::-webkit-scrollbar-track {
  display: none !important;
}

.suggestions-dropdown::-webkit-scrollbar-thumb {
  display: none !important;
}

.suggestion-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f8f9fa;
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;
}

.suggestion-item:hover,
.suggestion-item.active {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-left: 3px solid #6a11cb;
}

.suggestion-item:last-child {
  border-bottom: none;
  border-radius: 0 0 8px 8px;
}

.suggestion-footer {
  padding: 8px 16px;
  background: #f8f9fa;
  border-top: 1px solid #dee2e6;
  border-radius: 0 0 8px 8px;
}

/* Override mọi CSS khác có thể gây scroll */
.suggestions-dropdown * {
  overflow: visible !important;
  max-height: none !important;
}

/* Đảm bảo không có scroll trong mọi trường hợp */
.suggestions-dropdown,
.suggestions-dropdown > *,
.suggestions-dropdown .suggestion-item {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
  /* Override mọi CSS khác */
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* Override Bootstrap và framework khác */
.suggestions-dropdown * {
  overflow: visible !important;
  max-height: none !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

/* Ẩn scrollbar cho mọi element */
.suggestions-dropdown *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Responsive cho suggestions - Không có max-height */
@media (max-width: 768px) {
  .suggestion-item {
    padding: 10px 12px;
  }
  
  .suggestion-item .fw-semibold {
    font-size: 0.9rem;
  }
  
  .suggestion-item .small {
    font-size: 0.8rem;
  }
}

/* CSS cho suggestion item trong SparePartsComponent */
.suggestion-item {
  transition: all 0.2s ease;
  border-radius: 4px;
  margin: 2px;
}

.suggestion-item:hover {
  background-color: #e3f2fd !important;
  transform: translateX(2px);
}

.suggestion-item.active {
  background-color: #f8f9fa !important;
  border-left: 3px solid #007bff;
}

.suggestion-item .fw-semibold {
  color: #007bff;
  font-weight: 600;
}

.suggestion-item .text-success {
  font-weight: 700;
  font-size: 0.9rem;
}

.suggestion-footer {
  background-color: #f8f9fa !important;
  border-top: 1px solid #dee2e6;
  font-size: 0.75rem;
  color: #6c757d;
}

.suggestion-footer i {
  color: #007bff;
}

/* CSS đặc biệt cho SparePartsComponent auto suggest */
.spare-parts-search-container {
  overflow: visible !important;
}

.spare-parts-search-container .input-group {
  overflow: visible !important;
}

.spare-parts-search-container .suggestions-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: white !important;
  border: 2px solid #007bff !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  margin-top: 5px !important;
}


.global-search-container{
  overflow-x: visible !important;
}

/* ================== STICKY HEADER + THANH SEARCH ON TOP ================== */

/* Header dính trên cùng (luôn on top) */
.sticky-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  background: rgba(255, 255, 255, 0.86);
  border-bottom: 1px solid rgba(2, 6, 23, 0.08);
  backdrop-filter: blur(10px);
}

.ktm-header {
  padding: 10px 0;
}

.ktm-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.ktm-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ktm-text);
  text-decoration: none;
}

.ktm-brand:hover {
  color: var(--ktm-text);
}