/* Diem Category Horizontal Scroll */
.diem-hscroll{
  --diem-hscroll-height: 66vh;
  --diem-hscroll-gap: 40px;
  /* width/height ratios */
  --diem-hscroll-aspect-desktop: 1.333333; /* 4/3 */
  --diem-hscroll-aspect-mobile: 0.75;      /* 3/4 */
  --diem-hscroll-radius: 0px;
  --diem-hscroll-outline: #1e88ff;
  --diem-hscroll-duration: 20s;
  --diem-hscroll-distance: 1200px;
  position: relative;
  width: 100%;
}

.diem-hscroll__viewport{
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  cursor: grab;
  /* Allow custom horizontal drag with Pointer Events (especially on touch devices) */
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.diem-hscroll__viewport::-webkit-scrollbar{ display:none; }

.diem-hscroll.is-dragging .diem-hscroll__viewport{ cursor: grabbing; }
.diem-hscroll.is-dragging,
.diem-hscroll.is-dragging *{ user-select: none; }

/* Prevent native drag-and-drop on links (so drag = scroll) */
.diem-hscroll__item,
.diem-hscroll__card{
  -webkit-user-drag: none;
  user-drag: none;
}

.diem-hscroll__track{
  display: flex;
  width: max-content;
  will-change: scroll-position;
}

.diem-hscroll__list{
  display: flex;
  gap: var(--diem-hscroll-gap);
  align-items: stretch;
  padding: 0;
  margin: 0;
}

.diem-hscroll__item{
  display: block;
  text-decoration: none;
  flex: 0 0 auto;
}

.diem-hscroll__card{
  height: var(--diem-hscroll-height);
  width: calc(var(--diem-hscroll-height) * var(--diem-hscroll-aspect-desktop));
  background: #fff;
  border: 0;
  outline: 0;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Mobile: show ~1.5–2 cards per screen (keep width:height = 3:4 via aspect var) */
@media (max-width: 767px){
  .diem-hscroll__card{
    /* Default = 58vw (≈1.7 cards). You can override via shortcode: card_w_mobile="52vw" ... "66vw" */
    width: var(--diem-hscroll-card-w-mobile, 58vw);
    height: calc(var(--diem-hscroll-card-w-mobile, 58vw) / var(--diem-hscroll-aspect-mobile));
  }
}
.diem-hscroll__item:focus .diem-hscroll__card,
.diem-hscroll__item:hover .diem-hscroll__card{
  outline: 3px solid var(--diem-hscroll-outline);
  outline-offset: 0;
}

.diem-hscroll__meta{
  position: relative;
  padding: 10px 12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.2;
  color: #111;
  background: #fff;
  pointer-events: none; /* để kéo ngang được trên cả title */
}

.diem-hscroll__title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}


.diem-hscroll__thumb{
  flex: 1 1 auto;
  min-height: 0;
  background-color: #111;
  background-size: cover;
  background-position: center;
  -webkit-user-drag: none;
  user-drag: none;
}

.diem-hscroll__empty{
  padding: 12px 14px;
  background: #f3f3f3;
  border: 1px solid #e5e5e5;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
}

/* Pause on hover (enabled via data attr) */


/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .diem-hscroll__track{ animation: none; }
  .diem-hscroll__list{ padding-bottom: 6px; }
}

/* Safety: disable snapping from themes */
.diem-hscroll__card{ scroll-snap-align: none !important; }