/* S9 · Gallery (E11) */
.gallery { padding: 0 0 56px; }
.gallery__stage {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--green-soft); touch-action: pan-y; outline: none;
  -webkit-user-select: none; user-select: none; /* kéo bằng chuột không bôi chọn nội dung (sẽ làm hỏng lần kéo sau) */
}
.gallery__stage:focus-visible { box-shadow: inset 0 0 0 3px var(--green); }
.gallery__slide { position: absolute; inset: 0; transition: transform .7s var(--ease-out); }
.gallery__slide.is-far { visibility: hidden; transition: none; }
.gallery__stage.is-dragging .gallery__slide { transition: none; }
.gallery__slide img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.gallery__nav {
  position: absolute; top: 50%; z-index: 2; width: 44px; height: 64px; margin-top: -32px; padding: 10px;
  border: 0; background: none; color: #fff; cursor: pointer; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .45));
}
.gallery__nav svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; }
.gallery__nav--prev { left: 2px; }
.gallery__nav--prev svg { transform: rotate(180deg); }
.gallery__nav--next { right: 2px; }
.gallery__thumbs { display: flex; gap: 6px; padding: 10px var(--pad) 4px; overflow-x: auto; scrollbar-width: none; }
.gallery__thumbs::-webkit-scrollbar { display: none; }
.gallery__thumb { flex: 0 0 54px; aspect-ratio: 3 / 4; padding: 0; border: 0; background: var(--green-soft); cursor: pointer; opacity: .45; transition: opacity .3s, transform .3s, box-shadow .3s; }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb.is-active { opacity: 1; transform: translateY(-3px); box-shadow: 0 0 0 2px var(--green); }

/* Không có JS: ảnh xếp ngang, vuốt bằng thanh cuộn gốc */
html:not(.js) .gallery__stage { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; }
html:not(.js) .gallery__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; }
html:not(.js) .gallery__nav { display: none; }
