/* Phần dùng chung cho cả 3 phiên bản. Màu sắc do từng phiên bản tự định nghĩa. */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Khung ảnh */
.ph { position: relative; overflow: hidden; }
.ph img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.025);
  transition: opacity .8s ease, transform 1.4s cubic-bezier(.2, .7, .2, 1);
}
.ph.is-loaded img { opacity: 1; transform: none; }
/* khung chờ: ánh sáng lướt nhẹ trong lúc tải */
.ph:not(.is-loaded):not(.is-empty)::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
  background-size: 220% 100%;
  animation: ph-shine 1.6s ease-in-out infinite;
}
@keyframes ph-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
[data-gallery] .is-loaded img { cursor: zoom-in; }
.ph.is-empty::after {
  content: attr(data-file);
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  padding: 0 12px;
  text-align: center;
  font: 11px/1.3 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: .02em;
  opacity: .7;
}

/* Bản đồ */
.map { position: relative; width: 100%; aspect-ratio: 16 / 10; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map.is-empty { display: grid; place-items: center; font-size: 13px; }
[hidden] { display: none !important; }

/* Hiện dần */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.is-in { opacity: 1; transform: none; }
html:not(.is-ready) .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .ph img { transition: none; transform: none; }
  .ph:not(.is-loaded)::before { animation: none; }
}

/* Xem ảnh lớn */
.lb {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  background: rgba(14, 12, 10, .94);
  padding: 56px 16px;
}
.lb.is-open { display: flex; }
.lb__img { max-width: min(1100px, 100%); max-height: 100%; object-fit: contain; }
.lb__close, .lb__nav {
  position: absolute; background: none; border: 0; color: #eee; cursor: pointer;
  font: 14px/1 system-ui, sans-serif; padding: 14px;
}
.lb__close { top: 8px; right: 8px; letter-spacing: .08em; }
.lb__nav { top: 50%; transform: translateY(-50%); font-size: 26px; }
.lb__prev { left: 4px; }
.lb__next { right: 4px; }
.lb.is-single .lb__nav { display: none; }
.lb__count { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; color: #aaa; font: 12px system-ui, sans-serif; letter-spacing: .1em; }