.input-wrapper {
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     width: 45px;
     height: 45px;
     z-index: 100;
     overflow: visible;
 }

 .input {
     border: none;
     height: 45px;
     width: 45px;
     padding: 10px;
     outline: none;
     border-radius: 50%;
     transition: all 0.5s ease-in-out;
     background: transparent;
     padding-right: 10px;
     color: transparent;
     position: absolute;
     top: 0;
     right: 0;
     z-index: 1;
     cursor: pointer;
     transform-origin: right center;
 }

 .input::placeholder {
     color: white;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .icon {
     display: flex;
     align-items: center;
     justify-content: center;
     position: absolute;
     right: 0px;
     top: 0px;
     cursor: pointer;
     width: 45px;
     height: 45px;
     outline: none;
     border: none;
     border-radius: 50%;
     background-color: transparent;
     transition: all 0.2s linear;
     z-index: 2;
 }

 .icon:hover {
     background-color: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
 }

 .input-wrapper:hover .input,
 .input-wrapper.expanded .input,
 .input:focus {
     width: 380px;
     border-radius: 25px;
     background-color: rgba(21, 87, 192, 0.95);
     border: 1px solid #fff;
     box-shadow: 0px 4px 15px rgba(21, 87, 192, 0.3);
     backdrop-filter: blur(10px);
     padding-left: 20px;
     padding-right: 50px;
     color: #fff;
     cursor: text;
 }

 .input-wrapper:hover .input::placeholder,
 .input-wrapper.expanded .input::placeholder,
 .input:focus::placeholder {
     opacity: 1;
     color: #b8d4f0;
 }

 .search-suggestions {
     position: absolute;
     top: 50px;
     right: 0;
     width: 420px; /* Tăng độ rộng để chứa nhiều nội dung hơn */
     background: white;
     border-radius: 15px;
     box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.15);
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
     z-index: 1000;
     max-height: 450px; /* Tăng chiều cao */
     overflow: hidden;
 }

 .input-wrapper.show-suggestions .search-suggestions {
     opacity: 1;
     visibility: visible;
 }

 .suggestions-loading {
     padding: 20px;
     text-align: center;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     color: #666;
 }

 .loading-spinner {
     width: 20px;
     height: 20px;
     border: 2px solid #e3e3e3;
     border-top: 2px solid #1557c0;
     border-radius: 50%;
     animation: spin 1s linear infinite;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 .suggestions-list {
     max-height: 370px; 
     overflow-y: auto;
 }

 .suggestion-item {
     padding: 12px 16px;
     border-bottom: 1px solid #f0f0f0;
     cursor: pointer;
     transition: background-color 0.2s ease;
     display: flex;
     align-items: flex-start;
     gap: 12px;
     position: relative;
 }

 .suggestion-item:hover {
     background-color: #f8f9fa;
 }

 .suggestion-item:last-child {
     border-bottom: none;
 }

 /* Type badge styling */
 .suggestion-type-badge {
     position: absolute;
     top: 8px;
     right: 12px;
     padding: 2px 8px;
     font-size: 10px;
     font-weight: 600;
     border-radius: 12px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .suggestion-type-badge.product {
     background-color: #e3f2fd;
     color: #1557c0;
 }

 .suggestion-type-badge.post {
     background-color: #f3e5f5;
     color: #7b1fa2;
 }

 .suggestion-image {
     width: 50px; /* Tăng kích thước ảnh */
     height: 50px;
     border-radius: 6px;
     overflow: hidden;
     flex-shrink: 0;
 }

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

 .suggestion-content {
     flex: 1;
     padding-right: 80px; /* Tạo không gian cho badge */
 }

 .suggestion-title {
     font-weight: 600;
     color: #333;
     margin-bottom: 4px;
     font-size: 14px;
     line-height: 1.3;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .suggestion-price {
     color: #1557c0;
     font-weight: bold;
     font-size: 13px;
 }

 .suggestion-excerpt {
     color: #666;
     font-size: 12px;
     line-height: 1.4;
     margin-bottom: 4px;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .suggestion-date {
     color: #999;
     font-size: 11px;
     font-style: italic;
 }

 /* Section headers */
 .suggestions-section {
     padding: 8px 16px;
     background-color: #f8f9fa;
     border-bottom: 1px solid #e9ecef;
     font-weight: 600;
     font-size: 12px;
     color: #495057;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .no-results {
     padding: 20px;
     text-align: center;
     color: #666;
 }

 /* Responsive adjustments */
 @media (max-width: 768px) {
     .input-wrapper:hover .input,
     .input-wrapper.expanded .input,
     .input:focus {
         width: 300px; /* Tăng độ rộng trên mobile */
     }

     .search-suggestions {
         width: 300px;
     }
     
     .suggestion-content {
         padding-right: 70px;
     }
 }

 @media (max-width: 480px) {
     .input-wrapper:hover .input,
     .input-wrapper.expanded .input,
     .input:focus {
         width: 280px;
         font-size: 14px;
     }

     .search-suggestions {
         width: 280px;
     }
     
     .suggestion-item {
         padding: 10px 12px;
     }
     
     .suggestion-content {
         padding-right: 60px;
     }
     
     .suggestion-type-badge {
         font-size: 9px;
         padding: 1px 6px;
     }
 }