/* Halo Booth — trang khách (xem / tải ảnh sau khi quét QR, album sự kiện). 08/10/2026: đổi từ giao diện TT Photobooth sang
   Halo Booth như app kiosk - nền kem, xanh rêu, cành lá, logo chữ bút; một cột gọn, không hoạ tiết rườm rà.
   Font nhúng (không CDN): Montserrat (tiêu đề, nút) + Nunito (chữ, số) - giấy phép OFL trong assets/fonts. */

@font-face { font-family: 'Montserrat'; font-weight: 600; font-display: swap; src: url('fonts/Montserrat-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-weight: 700; font-display: swap; src: url('fonts/Montserrat-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 600; font-display: swap; src: url('fonts/Nunito-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 700; font-display: swap; src: url('fonts/Nunito-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Nunito'; font-weight: 800; font-display: swap; src: url('fonts/Nunito-ExtraBold.woff2') format('woff2'); }

:root {
  --cream: #F6EFE7;
  --linen: #EFE7DB;
  --sand: #E2D7C6;
  --sage: #B7C29C;
  --sage-mist: #EEF2E6;
  --forest: #2F4B2C;
  --forest-deep: #233A21;
  --ink: #1F2B1D;
  --ink70: rgba(31, 43, 29, .7);
  --ink45: rgba(31, 43, 29, .45);
  --white: #FFFFFF;
  --danger: #B9473B;
  --shadow: 0 10px 28px rgba(74, 63, 46, .12), 0 2px 6px rgba(74, 63, 46, .08);
  --sans: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--cream);
  color: var(--ink);
  font: 600 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---------- đầu trang: logo giữa, cành lá góc phải, nút ngôn ngữ / quay lại album ---------- */
.top {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(18px + env(safe-area-inset-top)) 16px 4px;
  text-align: center;
  overflow: hidden;
}
.logo { display: block; width: 230px; max-width: 64%; height: auto; margin: 30px auto 0; }
.sprig {
  position: absolute; top: -18px; right: -54px;
  width: 190px; height: auto;
  transform: rotate(8deg);
  opacity: .9;
  pointer-events: none;
}
.lang, .back {
  position: absolute; top: calc(14px + env(safe-area-inset-top));
  display: inline-flex; align-items: center; gap: 2px;
  height: 34px; padding: 0 12px;
  border: 1.5px solid var(--sand); border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  font: 700 13px/1 var(--sans); letter-spacing: .04em;
  color: var(--ink70);
  cursor: pointer; text-decoration: none;
  z-index: 2;
}
.lang { left: 16px; }
.lang span { padding: 0 3px; }
.lang span.on { color: var(--forest); }
.back { left: 16px; gap: 6px; color: var(--forest); }
.back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.back:not([hidden]) + .lang { left: auto; right: 16px; }

/* ---------- thân trang ---------- */
.page { max-width: 560px; margin: 0 auto; padding: 0 16px 28px; }

.intro { text-align: center; margin: 18px 0 18px; }
.intro h1 { margin: 0; font: 700 22px/1.3 var(--sans); letter-spacing: .01em; color: var(--forest-deep); }
.meta { margin: 6px 0 0; color: var(--ink70); font-size: 15px; }
.note {
  display: inline-block; margin: 12px 0 0; padding: 6px 14px;
  border-radius: 999px; background: var(--sage-mist); color: var(--forest);
  font-size: 13.5px; font-weight: 700;
}

.state { text-align: center; padding: 36px 8px; color: var(--ink70); }
.state p { margin: 14px auto 0; max-width: 360px; }

.spin {
  display: inline-block; width: 30px; height: 30px;
  border: 3px solid var(--sand); border-top-color: var(--forest); border-radius: 50%;
  animation: spin .9s linear infinite;
}
.spin.light { border-color: rgba(255, 255, 255, .25); border-top-color: #fff; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Bản in: thẻ trắng, ảnh ghép canh giữa */
.print { margin: 0 0 18px; padding: 14px; background: var(--white); border-radius: 22px; box-shadow: var(--shadow); text-align: center; }
.print-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.print-btn img { display: block; max-width: 100%; max-height: 72vh; margin: 0 auto; border-radius: 8px; }
.print figcaption { margin-top: 10px; font: 700 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink45); }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; margin: 0 0 12px; padding: 12px 20px;
  border: 1.5px solid var(--forest); border-radius: 999px;
  background: var(--white); color: var(--forest);
  font: 700 15px/1.2 var(--sans); letter-spacing: .03em;
  cursor: pointer; text-decoration: none;
  transition: transform .12s ease, background .2s ease;
}
.btn.primary { background: var(--forest); color: var(--white); box-shadow: 0 8px 18px rgba(47, 75, 44, .25); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .7; cursor: progress; }

.hint { margin: 0 0 22px; text-align: center; color: var(--ink45); font-size: 13.5px; }
.hint:empty { display: none; }

.sec {
  display: flex; align-items: baseline; gap: 8px;
  margin: 8px 2px 12px;
  font: 700 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--forest);
}
.count { color: var(--ink45); letter-spacing: .04em; }

/* Lưới ảnh lẻ / album: 2 cột (máy rộng 3 cột) */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .page, .top { max-width: 760px; } }
.grid > button, .grid > a {
  position: relative; display: block; padding: 0; overflow: hidden;
  border: 0; border-radius: 14px; background: var(--linen);
  box-shadow: 0 4px 12px rgba(74, 63, 46, .1);
  cursor: zoom-in; text-decoration: none; color: inherit;
}
.grid img { display: block; width: 100%; height: auto; min-height: 60px; }
.grid .ph { aspect-ratio: 3 / 2; border-radius: 14px; background: linear-gradient(90deg, var(--linen), var(--sand), var(--linen)); background-size: 200% 100%; animation: shimmer 1.4s ease infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* Album: thẻ bản in + giờ chụp */
.grid.album { align-items: start; }
.grid.album > a { cursor: pointer; background: var(--white); padding: 8px 8px 0; }
.grid.album img { border-radius: 8px; background: var(--linen); }
.grid.album .when { display: block; padding: 7px 2px 8px; text-align: center; font: 700 12.5px/1 var(--sans); color: var(--ink70); }

/* Video */
.video { margin: 0 0 12px; overflow: hidden; border-radius: 18px; background: #000; box-shadow: var(--shadow); }
.video video { display: block; width: 100%; max-height: 70vh; }

.foot { padding: 8px 16px calc(26px + env(safe-area-inset-bottom)); text-align: center; color: var(--ink45); font: 700 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }

/* ---------- xem ảnh lớn ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(56px + env(safe-area-inset-top)) 14px calc(18px + env(safe-area-inset-bottom));
  background: rgba(20, 28, 19, .94);
}
.lb-body { position: relative; flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.lb-body img { max-width: 100%; max-height: 100%; border-radius: 6px; -webkit-touch-callout: default; }
.lb-body img.is-loading { opacity: 0; }
.lb-body .spin { position: absolute; }
.lb-close {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); cursor: pointer;
}
.lb-close svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; }
.lb-dl { width: auto; min-width: 220px; margin: 14px 0 6px; }
.lb-hint { margin: 0; color: rgba(255, 255, 255, .7); font-size: 13px; text-align: center; }