/* EO slide — xem eo-slide.js. Kiểu chuyển theo [data-eo-tr], điều hướng theo .eo-slide__nav--*, mũi tên theo html[data-eo-arrows]. */
.eo-slide { position: relative; display: grid; overflow: hidden; touch-action: pan-y; outline-offset: 2px;
  --eo-ease: cubic-bezier(.22, .68, .2, 1); --eo-nav-fg: #fff; --eo-nav-dim: rgba(255, 255, 255, .45); --eo-nav-accent: var(--c-accent, #0b5ed7); }
/* 3 trạng thái: (nghỉ) ẩn hẳn, KHÔNG transition · .is-leave slide cũ đang rời · .is-active slide đang xem.
   Slide ở trạng thái nghỉ không được có transition: trước 03/10 khi gỡ .is-leave, slide cũ "chạy ngược" về vị trí gốc trong lúc vẫn còn hiện
   (visibility trễ đúng 1 nhịp) → lộ ra bên dưới slide mới rồi mới biến mất, rõ nhất khi lùi và với kiểu trượt. */
.eo-slide > .eo-slide__item { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; pointer-events: none; z-index: 0; transition: none; }
.eo-slide > .eo-slide__item.is-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 2; transform: none;
  /* nội dung CHỮ (mặc định): slide cũ mờ hẳn trong 40% đầu, slide mới hiện trong 60% sau — không bao giờ 2 khối chữ cùng nửa mờ đè nhau */
  transition: opacity calc(var(--eo-speed, 400ms) * .6) var(--eo-ease) calc(var(--eo-speed, 400ms) * .4), transform var(--eo-speed, 400ms) var(--eo-ease); }
.eo-slide > .eo-slide__item.is-leave { visibility: visible; z-index: 1; transition: opacity calc(var(--eo-speed, 400ms) * .4) var(--eo-ease), transform var(--eo-speed, 400ms) var(--eo-ease); }
.eo-slide > .eo-slide__item.is-enter { transition: none; visibility: visible; }
.eo-slide.is-drag { user-select: none; -webkit-user-select: none; cursor: grabbing; }   /* đang kéo đổi slide: không bôi đen chữ */
/* slide ĐẶC (ảnh phủ kín khung, có nền riêng): data-eo-opaque — slide cũ giữ đậm 100% bên dưới, slide mới hiện dần phủ lên; không lộ nền, không bóng mờ */
.eo-slide[data-eo-opaque] > .eo-slide__item.is-active { transition: opacity var(--eo-speed, 400ms) var(--eo-ease), transform var(--eo-speed, 400ms) var(--eo-ease); }
.eo-slide[data-eo-opaque] > .eo-slide__item.is-leave { opacity: 1; transition: transform var(--eo-speed, 400ms) var(--eo-ease); }

/* ── kiểu chuyển ── (is-enter = vị trí xuất phát của slide mới, is-leave = đích của slide cũ) */
/* trượt ngang: 2 slide nối đuôi nhau, luôn đậm 100% (không mờ) */
.eo-slide[data-eo-tr="slide"] > .eo-slide__item.is-active, .eo-slide[data-eo-tr="slide"] > .eo-slide__item.is-leave, .eo-slide[data-eo-tr="slide"] > .eo-slide__item.is-enter { opacity: 1; transition: transform var(--eo-speed, 400ms) var(--eo-ease); }
.eo-slide[data-eo-tr="slide"] > .eo-slide__item.is-enter { transition: none; }
.eo-slide[data-eo-tr="slide"][data-dir="next"] > .is-enter, .eo-slide[data-eo-tr="slide"][data-dir="prev"] > .is-leave { transform: translateX(100%); }
.eo-slide[data-eo-tr="slide"][data-dir="prev"] > .is-enter, .eo-slide[data-eo-tr="slide"][data-dir="next"] > .is-leave { transform: translateX(-100%); }
/* mờ dần: mặc định (opacity) */
/* zoom-từ-thumbnail: slide mới lớn dần từ nhỏ */
.eo-slide[data-eo-tr="zoom"] > .is-enter { transform: scale(.9); }
.eo-slide[data-eo-tr="zoom"] > .is-leave { transform: scale(1.04); }
/* xếp chồng: slide mới trượt lên trên, slide cũ lùi lại */
.eo-slide[data-eo-tr="stack"][data-dir="next"] > .is-enter { transform: translateX(60%); opacity: 0; }
.eo-slide[data-eo-tr="stack"][data-dir="prev"] > .is-enter { transform: translateX(-60%); opacity: 0; }
.eo-slide[data-eo-tr="stack"] > .is-leave { transform: scale(.92); opacity: 0; }
/* trượt dọc */
.eo-slide[data-eo-tr="vertical"] > .eo-slide__item.is-active, .eo-slide[data-eo-tr="vertical"] > .eo-slide__item.is-leave, .eo-slide[data-eo-tr="vertical"] > .eo-slide__item.is-enter { opacity: 1; transition: transform var(--eo-speed, 400ms) var(--eo-ease); }
.eo-slide[data-eo-tr="vertical"] > .eo-slide__item.is-enter { transition: none; }
.eo-slide[data-eo-tr="vertical"][data-dir="next"] > .is-enter, .eo-slide[data-eo-tr="vertical"][data-dir="prev"] > .is-leave { transform: translateY(100%); }
.eo-slide[data-eo-tr="vertical"][data-dir="prev"] > .is-enter, .eo-slide[data-eo-tr="vertical"][data-dir="next"] > .is-leave { transform: translateY(-100%); }
/* trượt có chiều sâu: slide cũ lùi + mờ, slide mới trượt vào */
.eo-slide[data-eo-tr="depth"][data-dir="next"] > .is-enter { transform: translateX(28%) scale(1.04); }
.eo-slide[data-eo-tr="depth"][data-dir="prev"] > .is-enter { transform: translateX(-28%) scale(1.04); }
.eo-slide[data-eo-tr="depth"] > .is-leave { transform: scale(.9); }

/* ── mũi tên ── nút ≥ 44px */
.eo-slide__arrow { position: absolute; top: 50%; z-index: 5; width: 44px; height: 44px; margin-top: -22px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font: 400 26px/1 system-ui, sans-serif; color: #fff; background: rgba(0, 0, 0, .38); transition: background .18s, transform .18s, opacity .18s; -webkit-tap-highlight-color: transparent; }
.eo-slide__arrow span { display: block; margin-top: -3px; }
.eo-slide__arrow--prev { left: 12px; } .eo-slide__arrow--next { right: 12px; }
@media (hover: hover) and (pointer: fine){.eo-slide__arrow:hover{ background: rgba(0, 0, 0, .6); }}
.eo-slide__arrow:active { transform: scale(.94); }
html[data-eo-arrows="square"] .eo-slide__arrow { border-radius: 8px; }
html[data-eo-arrows="thin"] .eo-slide__arrow { background: none; font-weight: 200; font-size: 34px; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
@media (hover: hover) and (pointer: fine){html[data-eo-arrows="thin"] .eo-slide__arrow:hover{ background: rgba(0, 0, 0, .18); }}
/* Mũi tên ẩn / hiện theo LOẠI CON TRỎ, không theo độ rộng: màn hình chạm (pointer: coarse) → ẩn, người dùng vuốt; chuột → luôn hiện,
   kể cả cửa sổ PC hẹp hơn 768px (04/10: trước đây ẩn theo max-width 767.98px → PC cửa sổ hẹp mất mũi tên, tablet chạm 768px lại có). */
@media (pointer: coarse) { .eo-slide__arrow { display: none; }}
.eo-slide--noarrows > .eo-slide__arrow { display: none; }
/* mũi tên nằm trong dải điều hướng (slide chữ): xếp cạnh chấm / gạch / số / thanh tiến trình, không nổi, không đè lên nội dung */
.eo-slide__arrow--inline { position: static; margin: 0; flex: 0 0 auto; width: 44px; height: 44px; font-size: 24px; background: rgba(127, 127, 127, .18); color: var(--eo-nav-fg); }
@media (hover: hover) and (pointer: fine){.eo-slide__arrow--inline:hover{ background: rgba(127, 127, 127, .34); }}
.eo-slide__nav--arrows { gap: 6px; }
.eo-slide__nav--arrows > .eo-slide__arrow--prev { margin-left: 10px; }
.eo-slide__nav--arrows.eo-slide__nav--progress > .eo-slide__arrow--prev { margin-left: 4px; }
html[data-eo-arrows="thin"] .eo-slide__arrow--inline { background: none; text-shadow: none; font-size: 30px; }
@media (hover: hover) and (pointer: fine){html[data-eo-arrows="thin"] .eo-slide__arrow--inline:hover{ background: rgba(127, 127, 127, .2); }}
@media (pointer: fine), (pointer: none) {   /* thiết bị dùng chuột: thanh tiến trình chừa chỗ cho số + 2 mũi tên (44 + 6 + 44 + lề) */
  .eo-slide__nav--arrows.eo-slide__nav--progress::before { right: 160px; }
  .eo-slide__nav--arrows.eo-slide__nav--progress > .eo-slide__fill { max-width: calc(100% - 160px); }}   /* eo-slide.js đo thấy mũi tên chạm chữ / nút của slide (khổ vừa, slide chữ sát mép) */

/* ── điều hướng ── */
.eo-slide__nav { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 2px; pointer-events: none; }
.eo-slide__nav > * { pointer-events: auto; }
.eo-slide__dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; }
.eo-slide__dot::before { content: ''; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--eo-nav-dim); transition: background .2s, transform .2s, width .25s, margin .25s; }
.eo-slide__dot.is-active::before { background: var(--eo-nav-fg); transform: scale(1.25); }
/* gạch mảnh (sang trọng) */
.eo-slide__nav--lines { gap: 6px; }
.eo-slide__nav--lines .eo-slide__dot { width: 34px; }
.eo-slide__nav--lines .eo-slide__dot::before { width: 30px; height: 2px; margin: -1px 0 0 -15px; border-radius: 0; }
.eo-slide__nav--lines .eo-slide__dot.is-active::before { transform: none; height: 2px; background: var(--eo-nav-fg); }
/* số */
.eo-slide__num { font: 600 13px/1 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; letter-spacing: .08em; color: var(--eo-nav-fg); font-variant-numeric: tabular-nums; padding: 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, .34); }
/* thanh tiến trình (công nghệ) */
.eo-slide__nav--progress { left: 16px; right: 16px; bottom: 12px; gap: 10px; }
.eo-slide__nav--progress::before { content: ''; position: absolute; left: 0; right: 56px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: var(--eo-nav-dim); }
.eo-slide__fill { position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; max-width: calc(100% - 56px); border-radius: 3px; background: var(--eo-nav-accent); transition: width var(--eo-speed, 300ms) var(--eo-ease); }
.eo-slide__nav--progress .eo-slide__num { margin-left: auto; background: none; padding: 6px 0; min-width: 46px; text-align: right; }
/* nền sáng (ảnh sản phẩm trên nền trắng): data-eo-on="light" */
.eo-slide[data-eo-on="light"] { --eo-nav-fg: var(--c-text, #111); --eo-nav-dim: rgba(0, 0, 0, .22); }
.eo-slide[data-eo-on="light"] .eo-slide__num { background: none; }
.eo-slide[data-eo-on="light"] .eo-slide__arrow { color: var(--c-text, #111); background: rgba(255, 255, 255, .86); box-shadow: 0 1px 6px rgba(0, 0, 0, .14); }
@media (hover: hover) and (pointer: fine){.eo-slide[data-eo-on="light"] .eo-slide__arrow:hover{ background: #fff; }}
html[data-eo-arrows="thin"] .eo-slide[data-eo-on="light"] .eo-slide__arrow { background: none; box-shadow: none; text-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .eo-slide > .eo-slide__item, .eo-slide__fill, .eo-slide__dot::before, .eo-slide__arrow { transition: none !important; }}
html.eo-reduced .eo-slide > .eo-slide__item { transition: none !important; }
/* điều hướng nằm dưới nội dung (hero chữ): data-nav-flow */
.eo-slide[data-nav-flow] { overflow: visible; }
.eo-slide[data-nav-flow] > .eo-slide__nav { position: static; grid-area: 2 / 1; justify-content: flex-start; margin: 28px 0 0 -9px; }
.eo-slide[data-nav-flow] > .eo-slide__nav--lines { margin-left: -2px; }
.eo-slide[data-nav-flow] > .eo-slide__nav--progress { margin-left: 0; position: relative; min-height: 28px; max-width: 320px; }
.eo-slide[data-nav-flow] > .eo-slide__nav--numbers { margin-left: 0; }