/* Khung ảnh sản phẩm kiểu sàn ở phần "trọn bộ" (18/10/2026): 1 ảnh lớn vuông + mũi tên + hàng ảnh nhỏ.
   Tự chạy 3,5 giây/ảnh (san-anh.js). Ảnh sách in thật cắt vuông từ ảnh gốc 10_SAN_PHAM_DICH_VU/…_LoThanhPham_ChinhDien.jpg. */
.san-anh { width: 100%; max-width: 440px; justify-self: center; }
.san-anh-lon { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--bo-vua);
  background: var(--mau-be-mat); box-shadow: var(--bong); touch-action: pan-y; }
.san-anh-lon img { display: block; width: 100%; height: 100%; object-fit: contain; transition: opacity .2s ease; }
.san-anh-lon img.doi { opacity: 0; }

.san-anh-mui { position: absolute; top: 50%; translate: 0 -50%; width: 40px; height: 40px; border: 0; border-radius: 50%;
  display: grid; place-content: center; padding: 0; cursor: pointer;
  background: color-mix(in oklch, var(--mau-nen-sau) 70%, transparent); color: var(--mau-chu); transition: background .15s; }
.san-anh-mui svg { width: 20px; height: 20px; }
.san-anh-mui.truoc { left: var(--k-2); }
.san-anh-mui.sau { right: var(--k-2); }
.san-anh-mui:hover { background: var(--mau-nen-sau); }
.san-anh-mui:focus-visible { outline: none; box-shadow: var(--focus-vong); }
@media (hover: hover) { .san-anh-mui { opacity: 0; transition: opacity .2s, background .15s; }
  .san-anh-lon:hover .san-anh-mui, .san-anh-mui:focus-visible { opacity: 1; } }

.san-anh-dem { position: absolute; right: var(--k-2); bottom: var(--k-2); padding: 2px 10px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600; color: var(--mau-chu); background: color-mix(in oklch, var(--mau-nen-sau) 75%, transparent); }

.san-anh-nho { list-style: none; margin: var(--k-3) 0 0; padding: 2px; display: flex; gap: var(--k-2);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.san-anh-nho::-webkit-scrollbar { display: none; }
.san-anh-nho li { flex: 0 0 calc((100% - 4 * var(--k-2)) / 5); scroll-snap-align: start; }
.san-anh-nho button { display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--bo-nho, 8px); background: var(--mau-be-mat); opacity: .65; transition: opacity .15s, border-color .15s; }
.san-anh-nho button[aria-current='true'] { border-color: var(--mau-nhan); opacity: 1; }
.san-anh-nho button:hover { opacity: 1; }
.san-anh-nho button:focus-visible { outline: none; box-shadow: var(--focus-vong); }
.san-anh-nho img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* Không có JS: chỉ hiện ảnh lớn, ẩn mũi tên + số đếm (bấm không được) */
.san-anh:not(.san-san-sang) .san-anh-mui, .san-anh:not(.san-san-sang) .san-anh-dem { display: none; }
@media (prefers-reduced-motion: reduce) { .san-anh-lon img { transition: none; } }