/* EO gallery (ảnh sản phẩm) — xem eo-gallery.js. Bố cục: .eo-pg--thumbs-bottom | thumbs-left | grid | full | stacked. */
.eo-pg { display: grid; gap: 12px; min-width: 0; --eo-pg-radius: var(--r-lg, 16px); --eo-pg-ratio: 1 / 1; --eo-pg-thumb: 68px; }
.eo-pg__stage { border-radius: var(--eo-pg-radius); background: var(--c-surface, #f4f6f8); aspect-ratio: var(--eo-pg-ratio); min-width: 0; cursor: zoom-in; }
.eo-pg__stage:focus-visible { outline: 3px solid var(--c-accent, #0b5ed7); }
.eo-pg__slide { overflow: hidden; border-radius: inherit; display: grid; place-items: center; height: 100%; background: var(--c-surface, #f4f6f8); /* nền riêng: slide đặc, che kín slide cũ bên dưới */ }
.eo-pg__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .28s ease; user-select: none; -webkit-user-drag: none; }
.eo-pg__slide.is-zoom .eo-pg__img { transform: scale(1.9); transition-duration: .12s; }
/* ảnh render nền trong suốt (điện thoại…): không cắt cúp */
.eo-pg__img[data-fit="contain"] { object-fit: contain; padding: 6%; box-sizing: border-box; }

/* dải thumbnail */
.eo-pg__thumbs { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 2px; min-width: 0; }
.eo-pg__thumbs::-webkit-scrollbar { display: none; }
.eo-pg__thumb { flex: 0 0 auto; width: var(--eo-pg-thumb); height: var(--eo-pg-thumb); padding: 0; border-radius: 10px; overflow: hidden; cursor: pointer; background: var(--c-surface, #f4f6f8);
  border: 2px solid var(--c-border, #e5e7eb); opacity: .72; transition: border-color .18s, opacity .18s, transform .18s; }
.eo-pg__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eo-pg__thumb:focus-visible{ opacity: 1; }@media (hover: hover) and (pointer: fine){.eo-pg__thumb:hover{ opacity: 1; }}
.eo-pg__thumb.is-active { opacity: 1; border-color: var(--c-accent, #0b5ed7); }
html[data-eo-nav="lines"] .eo-pg__thumb { border-radius: 2px; border-width: 0 0 2px; border-color: transparent; }
html[data-eo-nav="lines"] .eo-pg__thumb.is-active { border-color: var(--c-accent, #111); }
html[data-eo-arrows="square"] .eo-pg__thumb { border-radius: 6px; }
/* điều hướng trong khung ảnh chỉ dùng trên mobile (desktop đã có thumbnail) */
.eo-pg .eo-slide__nav { bottom: 8px; }

@media (min-width: 768px) {
  .eo-pg--thumbs-bottom .eo-slide__nav, .eo-pg--thumbs-left .eo-slide__nav { display: none; }
  /* thumbnail dọc bên trái */
  .eo-pg--thumbs-left { grid-template-columns: var(--eo-pg-thumb) minmax(0, 1fr); align-items: start; }
  .eo-pg--thumbs-left .eo-pg__thumbs { order: -1; flex-direction: column; overflow-x: visible; overflow-y: auto; max-height: 100%; align-self: stretch; }
  .eo-pg--thumbs-left.eo-pg--single { grid-template-columns: minmax(0, 1fr); }
  /* lưới 2×2: mọi ảnh cùng hiện, bấm để xem lớn */
  .eo-pg--grid .eo-pg__stage, .eo-pg--stacked .eo-pg__stage { display: grid; aspect-ratio: auto; background: none; gap: 10px; overflow: visible; cursor: default; }
  .eo-pg--grid .eo-pg__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eo-pg--grid .eo-pg__stage > .eo-slide__item, .eo-pg--stacked .eo-pg__stage > .eo-slide__item { grid-area: auto; opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: none;
    aspect-ratio: var(--eo-pg-ratio); border-radius: var(--eo-pg-radius); background: var(--c-surface, #f4f6f8); cursor: zoom-in; }
  .eo-pg--grid .eo-pg__stage > .eo-slide__item:first-child:nth-last-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 10; } /* số ảnh lẻ: ảnh đầu rộng cả hàng */
  .eo-pg--grid .eo-pg__thumbs, .eo-pg--stacked .eo-pg__thumbs, .eo-pg--grid .eo-slide__ui, .eo-pg--stacked .eo-slide__ui, .eo-pg--full .eo-pg__thumbs { display: none; }
  /* tràn full: 1 ảnh lớn, điều hướng trong khung */
  .eo-pg--full .eo-pg__stage { --eo-pg-ratio: 4 / 3; }}
@media (max-width: 767.98px) {
  /* mobile: vuốt + chấm vị trí; thumbnail ẩn */
  .eo-pg__thumbs { display: none; }
  .eo-pg { gap: 0; }}
.eo-pg--single .eo-slide__ui { display: none; }
@media (prefers-reduced-motion: reduce) { .eo-pg__img, .eo-pg__thumb { transition: none; }}
/* điều hướng nằm trên ảnh (ảnh tối lẫn sáng đều phải thấy): chấm/gạch trắng có viền tối, số trên nền tối */
.eo-pg .eo-slide { --eo-nav-fg: #fff; --eo-nav-dim: rgba(255, 255, 255, .62); }
.eo-pg .eo-slide__dot::before, .eo-pg .eo-slide__fill, .eo-pg .eo-slide__nav--progress::before { box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); }
.eo-pg .eo-slide__num, .eo-pg .eo-slide__nav--progress .eo-slide__num { color: #fff; background: rgba(0, 0, 0, .5); padding: 5px 9px; min-width: 0; border-radius: 999px; }
.eo-pg .eo-slide__nav--progress::before, .eo-pg .eo-slide__fill { right: 66px; max-width: calc(100% - 66px); }