.bes2-embla {
  --bes2-preset-items: 1;
  --bes2-preset-gap: 1rem;
  --bes2-current-items: var(--bes2-items, var(--bes2-preset-items));
  --bes2-current-gap: var(--bes2-gap, var(--bes2-preset-gap));
  --bes2-slide-size: calc((100% - (var(--bes2-current-items) - 1) * var(--bes2-current-gap)) / var(--bes2-current-items));
  --bes2-focus: #1d4ed8;
  --bes2-button-size: 46px;
  --bes2-button-icon-size: 24px;
  --bes2-arrow-gap: 18px;
  --bes2-pagination-gap: 9px;
  --bes2-dot-size: 8px;
  --bes2-dot-active-width: 24px;
  --bes2-thumb-width: 72px;
  --bes2-thumb-height: 72px;
  --bes2-thumb-gap: 8px;
  --bes2-scroll-progress: 0;
  position: relative;
  width: 100%;
}

.bes2-embla__builder-note {
  display: none;
}

.bes2-embla[data-bes2-builder-preview] .bes2-embla__builder-note {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-block-end: 8px;
  color: #64748b;
  font: 500 11px/1.4 system-ui, sans-serif;
  letter-spacing: .02em;
}

.bes2-embla[data-bes2-builder-preview] .bes2-embla__viewport {
  min-height: 96px;
  overflow: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  scrollbar-width: thin;
}

.bes2-embla--x[data-bes2-builder-preview] .bes2-embla__viewport {
  scroll-snap-type: x proximity;
}

.bes2-embla--y[data-bes2-builder-preview] .bes2-embla__viewport {
  scroll-snap-type: y proximity;
}

.bes2-embla__builder-actions {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 6px;
}

.bes2-embla__builder-button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 26px;
  padding: 0;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  color: #334155;
  background: #fff;
  cursor: pointer;
}

.bes2-embla__builder-button:hover {
  border-color: #94a3b8;
  color: #0f172a;
  background: #f8fafc;
}

.bes2-embla__builder-button > svg {
  width: 15px;
  height: 15px;
  pointer-events: none;
}

.bes2-embla[data-bes2-builder-preview] .bes2-embla__progress {
  --bes2-scroll-progress: 0.34;
}

/*
 * Query Loop preview parity.
 *
 * Bricks wraps the editable loop template in a builder-only node while the
 * query results are rendered as direct slide nodes. Size the direct track
 * children so the template slide cannot shrink to its min-content width.
 */
.bes2-embla[data-bes2-builder-preview] .bes2-embla__container > * {
  box-sizing: border-box;
  flex: 0 0 var(--bes2-slide-size);
  min-width: 0;
  scroll-snap-align: start;
}

.bes2-embla[data-bes2-builder-preview] .bes2-embla__container > * > .bes2-embla__slide {
  width: 100%;
}

.bes2-embla__viewport {
  width: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
}

.bes2-embla--y .bes2-embla__viewport {
  touch-action: pan-x pinch-zoom;
}

.bes2-embla.is-pointer-down .bes2-embla__viewport {
  cursor: grabbing;
}

.bes2-embla__container {
  display: flex;
  gap: var(--bes2-current-gap);
  backface-visibility: hidden;
}

.bes2-embla--y .bes2-embla__container {
  flex-direction: column;
}

.bes2-embla__slide {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 var(--bes2-slide-size);
  min-width: 0;
}

.bes2-embla--y .bes2-embla__slide {
  min-height: 0;
}

.bes2-embla__slide--woo {
  aspect-ratio: var(--bes2-image-ratio, 4 / 3);
}

.bes2-embla__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--bes2-image-fit, cover);
}

.bes2-embla:focus-visible,
.bes2-embla :focus-visible {
  outline: 3px solid var(--bes2-focus);
  outline-offset: 3px;
}

.bes2-embla--preset-basic_cards { --bes2-preset-items: 3; --bes2-preset-gap: 24px; }
.bes2-embla--preset-product_listing { --bes2-preset-items: 4; --bes2-preset-gap: 24px; }
.bes2-embla--preset-product_gallery,
.bes2-embla--preset-hero { --bes2-preset-items: 1; --bes2-preset-gap: 0px; }
.bes2-embla--preset-logo_marquee { --bes2-preset-items: 5; --bes2-preset-gap: 32px; }

.bes2-embla__diagnostic {
  margin-block: 0.75rem 0;
  padding: 0.75rem;
  border: 1px solid #d97706;
  color: #92400e;
  background: #fffbeb;
}

.bes2-embla[data-bes2-effect="spotlight"] .bes2-embla__slide,
.bes2-embla[data-bes2-effect="scale"] .bes2-embla__slide {
  transform: scale(0.94);
  transition: opacity 300ms ease, transform 300ms ease;
}

.bes2-embla[data-bes2-effect="spotlight"] .bes2-embla__slide {
  opacity: 0.55;
}

.bes2-embla[data-bes2-effect="opacity"] .bes2-embla__slide,
.bes2-embla[data-bes2-effect="fade"] .bes2-embla__slide {
  opacity: 0.35;
  transition: opacity 300ms ease;
}

.bes2-embla[data-bes2-effect] .bes2-embla__slide.is-in-view,
.bes2-embla[data-bes2-effect] .bes2-embla__slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.bes2-embla[data-bes2-effect="parallax"] [data-bes2-parallax-layer] {
  transition: transform 100ms linear;
}

.bes2-embla__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}

.bes2-embla__arrows,
.bes2-embla__dots,
.bes2-embla__thumbs {
  display: flex;
  align-items: center;
}

.bes2-embla__arrows { gap: var(--bes2-arrow-gap); }
.bes2-embla__dots { gap: var(--bes2-pagination-gap); }
.bes2-embla__thumbs { gap: var(--bes2-thumb-gap); margin-block: 0.75rem; }
.bes2-embla__thumbs--wrap { flex-wrap: wrap; }
.bes2-embla__thumbs--scroll { overflow-x: auto; scrollbar-width: thin; }

.bes2-embla__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bes2-button-size);
  height: var(--bes2-button-size);
  padding: 0;
  border: 1px solid var(--bes2-button-border, rgba(128, 28, 0, 0.22));
  border-radius: var(--bes2-button-radius, 999px);
  color: var(--bes2-button-color, #801c00);
  background: var(--bes2-button-bg, rgba(255, 255, 255, 0.74));
  cursor: pointer;
  gap: 0.4em;
}

.bes2-embla__button > svg {
  flex: 0 0 auto;
  width: var(--bes2-button-icon-size);
  height: var(--bes2-button-icon-size);
  pointer-events: none;
}
.bes2-embla__button-text { line-height: 1; }
.bes2-embla__button:hover { color: var(--bes2-button-hover-color, #fff); background: var(--bes2-button-hover-bg, #801c00); }
.bes2-embla__button:disabled { opacity: 0.4; cursor: not-allowed; }

.bes2-embla__dot,
.bes2-embla__thumb {
  appearance: none;
  padding: 0;
  border: 0;
  cursor: pointer;
}

.bes2-embla__dot {
  width: var(--bes2-dot-size);
  height: var(--bes2-dot-size);
  border-radius: 999px;
  background: var(--bes2-dot, rgba(128, 28, 0, 0.25));
  transition: width 180ms ease, background-color 180ms ease;
}

.bes2-embla__dot.is-active {
  width: var(--bes2-dot-active-width);
  background: var(--bes2-dot-active, #801c00);
}

.bes2-embla__thumb {
  flex: 0 0 auto;
  width: var(--bes2-thumb-width);
  height: var(--bes2-thumb-height);
  overflow: hidden;
  border: 1px solid transparent;
  background: transparent;
  opacity: 0.6;
}

.bes2-embla__thumb.is-active { border-color: currentColor; opacity: 1; }
.bes2-embla__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

.bes2-embla__progress {
  position: relative;
  width: min(12rem, 100%);
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--bes2-progress-track, #e5e7eb);
}

.bes2-embla__progress-fill,
.bes2-embla__progress::before {
  display: block;
  width: calc(var(--bes2-scroll-progress) * 100%);
  height: 100%;
  background: var(--bes2-progress-fill, #801c00);
  content: "";
  transition: width 180ms ease;
}

.bes2-embla-controller--progress .bes2-embla__progress-fill { display: block; }

.bes2-embla__dot:focus-visible,
.bes2-embla__thumb:focus-visible,
.bes2-embla__button:focus-visible {
  outline: 3px solid var(--bes2-focus);
  outline-offset: 3px;
}

@media (max-width: 991px) {
  .bes2-embla--preset-basic_cards { --bes2-preset-items: 2; --bes2-preset-gap: 20px; }
  .bes2-embla--preset-product_listing { --bes2-preset-items: 3; --bes2-preset-gap: 20px; }
  .bes2-embla--preset-logo_marquee { --bes2-preset-items: 4; --bes2-preset-gap: 24px; }
}

@media (max-width: 767px) {
  .bes2-embla--preset-basic_cards { --bes2-preset-items: 1; --bes2-preset-gap: 16px; }
  .bes2-embla--preset-product_listing { --bes2-preset-items: 2; --bes2-preset-gap: 12px; }
  .bes2-embla--preset-logo_marquee { --bes2-preset-items: 2; --bes2-preset-gap: 16px; }
  .bes2-embla__controls { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .bes2-embla *,
  .bes2-embla *::before,
  .bes2-embla *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }

  .bes2-embla[data-bes2-effect] .bes2-embla__slide,
  .bes2-embla[data-bes2-effect] [data-bes2-parallax-layer] {
    opacity: 1;
    transform: none !important;
  }
}

/* KL 2026-09-23: mobile swipe — tách lớp GPU cho dải slide, tắt native drag/callout của ảnh & link trong slide */
.bes2-embla__container { will-change: transform; backface-visibility: hidden; }
.bes2-embla__viewport a, .bes2-embla__viewport img { -webkit-user-drag: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }

/* KL native touch (2026-09-23): cuộn ngang gốc + scroll-snap trên thiết bị cảm ứng cho slider có data-bes2-native-touch */
.bes2-embla.is-native .bes2-embla__viewport { overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x pan-y pinch-zoom; cursor: auto; }
.bes2-embla.is-native .bes2-embla__viewport::-webkit-scrollbar { display: none; }
.bes2-embla.is-native .bes2-embla__container { transform: none !important; will-change: auto; }
.bes2-embla.is-native .bes2-embla__slide { scroll-snap-align: start; }