:root {
   --loop-primary: #0bbcd6;
   --loop-gap: 16px;
 }

 .trending-menu-slide-section {
   /* overflow-x: hidden; */
   position: absolute;
   top: 60px;
   left: 0;
   z-index: 9999;
   background-color: #fff;
   width: 100%;
    height: 90px;
 }

 .loop-slider-wrapper {
   width: 100%;
   /* max-width: 1450px; */
   margin: 0 auto;
   overflow: hidden;
   position: relative;
   user-select: none;
   -webkit-user-select: none;
  
 }

 .loop-slider-track {
   display: flex;
   gap: var(--loop-gap);
   cursor: grab;
   transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
   will-change: transform;
   padding: 0 var(--loop-gap);
 }

 .loop-slider-track.loop-grabbing {
   cursor: grabbing;
   transition: none;
 }

 .loop-slider-track.loop-no-transition {
   transition: none !important;
 }

 .loop-card {
   flex: 0 0 calc((100% / 5) - (var(--loop-gap) * 4 / 5) - (var(--loop-gap) * 2 / 5));
   background: #fff;
   border-radius: 12px;
   padding: 7px;
   display: flex;
   align-items: center;
   gap: 12px;
   border: 1px solid rgba(0, 0, 0, 0.05);
   pointer-events: auto;
 }

 .loop-img-box {
   width: 65px;
   height: 65px;
   border-radius: 10px;
   overflow: hidden;
   flex-shrink: 0;
 }

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

 .loop-content h4 {
   font-size: 14px;
   color: #333;
   margin-bottom: 2px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }

 .loop-content p {
   font-size: 11px;
   color: #888;
 }

 .loop-tag {
   font-size: 10px;
   color: var(--loop-primary);
   font-weight: 800;
   text-transform: uppercase;
 }