/* TT Photobooth — trang xem ảnh sau khi quét QR.
   Giao diện TT PHOTOBOOTH đồng bộ với app kiosk (làm lại toàn bộ ngày 02/10/2026):
   nền hồng phấn phẳng, nội dung nằm trên thẻ trắng bo góc bóng mềm, tên quán chữ Playfair Display
   nghiêng màu trắng, chữ thường Nunito màu mực, nút viên thuốc hồng viền trắng, trang trí bằng
   tim / lấp lánh / dải mây lấy từ assets/tt/*.svg.
   Mobile-first. KHÔNG dùng CDN: font nhúng sẵn trong assets/fonts (OFL) vì máy khách có thể
   nối WiFi của booth không có internet.

   Quy tắc tương phản (đã đo WCAG) - giữ khi sửa:
   - Trên nền hồng: chữ CHỈ dùng màu mực (--ink), hoặc trắng cho chữ tiêu đề lớn đậm có bóng.
     Hồng đậm / xanh / cam / đỏ / xanh lá không bao giờ làm chữ hay nét mảnh đặt thẳng lên nền trang.
   - Trên nền trắng: chữ mực. Trên nền hồng đậm (--pink): chữ trắng đậm.
   - Số (ngày giờ, tiến độ tải) luôn để Nunito - Playfair có chữ số kiểu cổ. */

@font-face { font-family: "Playfair Display"; src: url("fonts/PlayfairDisplay-Black.woff2") format("woff2");       font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("fonts/PlayfairDisplay-BlackItalic.woff2") format("woff2"); font-weight: 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("fonts/PlayfairDisplay-BoldItalic.woff2") format("woff2");  font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/Nunito-SemiBold.woff2") format("woff2");  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/Nunito-Bold.woff2") format("woff2");      font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/Nunito-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/Nunito-Black.woff2") format("woff2");     font-weight: 900; font-style: normal; font-display: swap; }

/* Bảng màu + font TT Photobooth - CÙNG tên, cùng giá trị với admin/assets/admin.css */
:root{
  --rose:#CE848C; --rose-deep:#B56873; --rose-dark:#8C4A56; --rose-light:#E2B1B6; --rose-mist:#F8E9EB;
  --sky:#42C6F7;  --sky-deep:#1BA4DB;  --sky-light:#BDEBFC; --sky-mist:#E8F8FE;
  --pink:#FF4CAE; --pink-deep:#DB2E8E; --pink-light:#FFC4E3; --pink-mist:#FFEAF5;
  --orange:#F7A521; --orange-deep:#D4870C; --orange-light:#FDE3B5;
  --ink:#213139; --ink-70:rgba(33,49,57,.70); --ink-45:rgba(33,49,57,.45); --ink-12:rgba(33,49,57,.12);
  --white:#FFFFFF;
  --green:#0E8A5F; --green-light:#CFF1E3; --red:#E5383B; --red-light:#FFD9DA;
  --display:"Playfair Display", Georgia, "Times New Roman", serif;
  --body:"Nunito", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-card:22px; --radius-ctl:14px; --radius-pill:999px;
  --shadow-card:0 10px 28px rgba(140,74,86,.32);
  --shadow-soft:0 6px 16px rgba(140,74,86,.28);
  --shadow-btn:0 6px 0 rgba(140,74,86,.50);          /* bóng "sticker" gọn dưới nút viên thuốc, như nút của app */
}

* { box-sizing: border-box; }

html {
  margin: 0;
  padding: 0;
  background-color: var(--rose);     /* nền hồng phấn phẳng, không hoạ tiết */
  color-scheme: light;
  color-scheme: only light;          /* giữ đúng tông hồng, không để trình duyệt tự đổi sang nền tối */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font: 600 16px/1.45 var(--body);
}

/* [hidden] phải thắng mọi display: của class */
[hidden] { display: none !important; }

::selection { background: var(--pink-light); color: var(--ink); }

button, a { -webkit-tap-highlight-color: transparent; }
button { -webkit-appearance: none; appearance: none; }

/* Viền focus khi đi bằng bàn phím: mực trên nền hồng / trắng, trắng trên nền tối của khung xem lớn */
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.lightbox :focus-visible { outline-color: var(--white); }

/* Hình trang trí (tim, lấp lánh): không bắt chạm, không cho kéo / lưu */
.deco {
  position: absolute;
  display: block;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* ---------- Đầu trang: nút ngôn ngữ, logo tròn, tên quán ---------- */
.topbar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 16px 0;
  padding: calc(12px + env(safe-area-inset-top)) 16px 0;
  text-align: center;
}

.lang {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 15px 6px 11px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font: 800 14px/1 var(--body);
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(140, 74, 86, .50);
  transition: transform .1s ease, box-shadow .1s ease;
}
.lang:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(140, 74, 86, .50); }
.lang-icon { display: block; flex: none; width: 18px; height: 18px; margin-right: 7px; }

/* Logo tròn (ảnh đã có sẵn viền trắng) + vài trái tim / lấp lánh bay quanh như màn chờ của app */
.brand {
  position: relative;
  width: 140px;
  margin-top: 6px;
}
.logo {
  display: block;
  width: 140px;
  height: 140px;
  filter: drop-shadow(0 10px 18px rgba(140, 74, 86, .45));
}
/* vị trí tính từ góc trên-trái của logo 140px; ghi cả rộng lẫn cao (SVG không có kích thước riêng) */
.deco-heart-a { left: -66px;  top: 30px;  width: 30px; height: 28px; transform: rotate(-14deg); }
.deco-heart-b { left: -36px;  top: 106px; width: 15px; height: 14px; transform: rotate(10deg); }
.deco-spark   { left: 174px;  top: -24px; width: 26px; height: 26px; }
.deco-heart-c { left: 170px;  top: 54px;  width: 23px; height: 21px; transform: rotate(14deg); }
.deco-heart-d { left: 160px;  top: 114px; width: 13px; height: 12px; transform: rotate(-10deg); }

.wordmark { margin-top: 14px; }
.wordmark .script {
  display: block;
  font: 800 12px/1.2 var(--body);
  letter-spacing: .32em;
  text-indent: .32em;                /* bù khoảng giãn chữ cuối để canh giữa thật */
  text-transform: uppercase;
  color: var(--ink);
}
.wordmark .name {
  display: block;
  margin-top: 4px;
  font: italic 900 40px/1.14 var(--display);
  font-size: clamp(34px, 10.8vw, 44px);
  color: var(--white);
  text-shadow: 0 3px 0 rgba(140, 74, 86, .5);
}

/* ---------- Tab Ảnh / Video: rãnh trắng bo tròn, tab đang chọn màu hồng chữ trắng ---------- */
.tabs {
  display: flex;
  width: calc(100% - 32px);
  max-width: 300px;
  margin: 20px auto 0;
  padding: 5px;
  border-radius: var(--radius-pill);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.tab {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink);
  font: 800 19px/1.1 var(--body);
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.tab + .tab { margin-left: 4px; }
.tab:active { background: var(--rose-mist); }
.tab:focus-visible { outline-offset: 1px; }      /* viền focus nằm gọn trong rãnh trắng */
.tab.is-active { background: var(--pink); color: var(--white); }

/* ---------- Nội dung ---------- */
main {
  flex: 1;
  padding: 18px 16px 8px;
}

.hint {
  margin: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}
.hint-sub {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
}
/* "Phiên này không có video" nằm trong thẻ trắng */
.card .hint { margin: 0; padding: 14px 8px; font-size: 15px; font-weight: 700; }

.block { margin-top: 28px; }
/* Khối không còn gì để hiện (phiên không có ảnh ghép / video) thì bỏ luôn khoảng trống */
.block:not(:has(> :not([hidden]))) { display: none; }

/* Chú thích dưới thẻ: chữ mực đặt trên nền hồng */
.caption {
  margin: 12px 0 0;
  text-align: center;
  font: 800 15px/1.3 var(--body);
  letter-spacing: .02em;
  color: var(--ink);
}

/* Nút tải: viên thuốc hồng viền trắng chữ trắng, bóng "sticker" (nút chính của app) */
.btn-dl {
  display: block;
  margin: 22px auto 0;
  width: 100%;
  max-width: 340px;
  min-height: 56px;
  padding: 10px 22px;
  border: 4px solid var(--white);
  border-radius: var(--radius-pill);
  background: var(--pink);
  color: var(--white);
  font: 800 19px/1.2 var(--body);
  cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: transform .1s ease, box-shadow .1s ease, background-color .2s ease;
}
.btn-dl:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(140, 74, 86, .50); }
/* Đang tải (JS đặt disabled + chữ tiến độ): nút lún xuống, hồng sẫm hơn để chữ tiến độ vẫn rõ */
.btn-dl[disabled] {
  background: var(--pink-deep);
  transform: translateY(3px);
  box-shadow: 0 3px 0 rgba(140, 74, 86, .50);
  cursor: default;
}
/* Nút nằm trong khối, ngay trên thẻ (tải slideshow): chừa chỗ cho bóng nút */
.block > .btn-dl { margin-top: 0; margin-bottom: 24px; }

/* Thẻ trắng bo góc, bóng mềm (thẻ nội dung của app) */
.card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-card);
  padding: 12px;
  box-shadow: var(--shadow-card);
}

/* Nhãn "love" dán lệch ở góc thẻ - hoạ tiết của logo, chỉ để trang trí */
.love-tag {
  position: absolute;
  top: -16px;
  right: 18px;
  padding: 3px 11px 6px;
  border-radius: 8px;
  background: var(--pink);
  color: var(--white);
  font: 900 16px/1.1 var(--display);
  transform: rotate(8deg);
  box-shadow: 0 3px 0 rgba(140, 74, 86, .45);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Ảnh ghép (bản in) */
.strip-wrap { display: flex; justify-content: center; }
.strip-wrap img {
  max-width: 62%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: var(--rose-mist);
  /* viền hồng nhạt 1px để bản in nền trắng vẫn tách khỏi thẻ trắng */
  box-shadow: 0 0 0 1px var(--rose-light), 0 6px 14px rgba(140, 74, 86, .22);
}

/* Lưới ảnh lẻ */
.grid {
  display: grid;
  /* minmax(0,1fr): ảnh gốc rộng hơn cột không được nong cột ra làm card tràn màn */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 8px;
  gap: 8px;
  justify-items: stretch;
}
.grid img {
  width: 100%;
  min-width: 0;
  aspect-ratio: 3 / 2;      /* ảnh chụp ra là 3:2 */
  object-fit: cover;
  display: block;
  border-radius: 12px;
  background: var(--rose-mist);
}

/* Video */
.video-wrap { display: flex; justify-content: center; }
.video-wrap video {
  display: block;
  width: 100%;
  max-width: 460px;
  border-radius: 12px;
  background: var(--ink);
}

/* Giữ chỗ trong lúc tải: ô hồng rất nhạt (--rose-mist) có vệt đậm hơn chạy qua.
   Thẻ ảnh ghép lúc chưa có dữ liệu cũng hiện một ô giữ chỗ thay vì thẻ trắng rỗng. */
.ph, .strip-wrap:empty::before {
  aspect-ratio: 3 / 2;
  border-radius: 12px;
  /* #F0D3D7 = sắc giữa --rose-mist và --rose-light */
  background: linear-gradient(90deg, var(--rose-mist) 25%, #F0D3D7 37%, var(--rose-mist) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
}
.ph { width: 100%; }
.strip-wrap:empty::before { content: ""; width: 62%; }
@keyframes shimmer { from { background-position: 100% 0 } to { background-position: 0 0 } }

/* Trạng thái lỗi / hết hạn / máy đang tải ảnh lên: thẻ trắng */
.state {
  margin: 34px auto;
  max-width: 340px;
  padding: 24px 20px 26px;
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: var(--shadow-card);
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  text-wrap: balance;
}
.state::before {
  content: "";
  display: block;
  width: 30px;
  height: 28px;
  margin: 0 auto 12px;
  background: url("tt/heart-pink.svg") center / contain no-repeat;
}
.state p { margin: 0; }

/* ---------- Chân trang: vài trái tim, ghi chú hết hạn, tên quán, dải mây sát đáy (như app) ---------- */
.foot {
  margin-top: 22px;
  text-align: center;
  color: var(--ink);
}
.foot-text {
  padding: 0 16px 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.foot-hearts {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
}
.foot-hearts img { display: block; pointer-events: none; -webkit-user-select: none; user-select: none; }
.foot-hearts img + img { margin-left: 12px; }
.foot-hearts img:nth-child(1) { width: 14px; height: 13px; transform: translateY(3px) rotate(-12deg); }
.foot-hearts img:nth-child(2) { width: 24px; height: 22px; }
.foot-hearts img:nth-child(3) { width: 19px; height: 18px; transform: translateY(2px) rotate(12deg); }
.foot-note { display: block; text-wrap: balance; }
.foot .foot-by {
  display: block;
  margin-top: 4px;
  font: italic 900 20px/1.3 var(--display);
}
/* Dải mây 1920x130: cao tối thiểu 72px (rộng 1064px, lặp ngang không lộ mối nối);
   màn rộng hơn thì dải mây lớn theo bề ngang, đúng tỉ lệ như trên màn 1920 của app */
.foot-clouds {
  height: 72px;
  height: max(72px, 6.78vw);
  background: url("tt/cloudbank.svg") center bottom / auto 100% repeat-x;
  background-size: max(1064px, 100.2vw) 100%;
}
/* Vùng an toàn đáy (iPhone): nối liền màu trắng của mây */
.foot::after {
  content: "";
  display: block;
  height: env(safe-area-inset-bottom);
  background: var(--white);
}

/* Ảnh trong lưới / bản ghép là nút bấm mở ảnh lớn */
.grid button, .strip-wrap button {
  padding: 0; border: 0; background: transparent; cursor: pointer;
  width: 100%; display: block;
  border-radius: 12px;
}
/* Điện thoại: không cho nhấn giữ lưu ảnh từ LƯỚI (lưới là bản nhỏ, lưu sẽ mờ) -
   lưu ảnh gốc trong khung xem lớn. Ảnh trong lightbox vẫn nhấn giữ được. */
.grid button img, .strip-wrap button img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity .15s ease, transform .15s ease;
}
.strip-wrap button { width: auto; max-width: 62%; }
.strip-wrap button img { max-width: 100%; }
.grid button:active img, .strip-wrap button:active img { opacity: .85; }

/* ---------- Xem ảnh lớn (lightbox): nền mực, nút đóng tròn trắng, nút tải viên thuốc hồng ---------- */
.lightbox {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* máy có tai thỏ xoay ngang: chừa vùng an toàn hai bên */
  padding: 16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left));
  background: rgba(33, 49, 57, .97);
  animation: lbfade .2s ease both;
}
@keyframes lbfade { from { opacity: 0 } to { opacity: 1 } }
.lb-body {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-body img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(255, 255, 255, .10);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
}
.lb-body img.is-loading { opacity: .35; }
.lb-spin {
  position: absolute;
  width: 40px; height: 40px;
  border: 4px solid rgba(255, 255, 255, .28);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg) } }
.lb-close {
  position: absolute;
  top: 12px;
  top: calc(12px + env(safe-area-inset-top));
  right: 14px;
  right: calc(14px + env(safe-area-inset-right));
  width: 44px; height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  z-index: 1;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .30);
  transition: transform .1s ease, box-shadow .1s ease;
}
.lb-close:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .30); }
.lb-close svg { display: block; width: 20px; height: 20px; }
.lb-hint {
  margin: 14px 0 4px;
  margin: 14px 0 calc(4px + env(safe-area-inset-bottom));
  max-width: 440px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--white);
  text-align: center;
  text-wrap: balance;
}
/* Nút tải ảnh gốc trong khung xem lớn (máy tính: chuột phải trên lưới chỉ được ảnh nhỏ) */
.lb-dl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  min-height: 50px;
  padding: 8px 28px;
  border: 4px solid var(--white);
  border-radius: var(--radius-pill);
  background: var(--pink);
  color: var(--white);
  font: 800 19px/1.2 var(--body);
  text-align: center;
  text-decoration: none;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .30);
  transition: transform .1s ease, box-shadow .1s ease;
}
.lb-dl:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0, 0, 0, .30); }

/* ---------- Hiện dần khi mở trang (một lần, êm) ----------
   fill-mode 'backwards' (không dùng 'both'): chạy xong là trả phần tử về trạng thái thường, trình duyệt
   không giữ lớp ghép riêng - nếu giữ, chân trang lệch nửa điểm ảnh và lộ một vệt hồng dưới dải mây. */
.reveal { animation: reveal .5s ease-out backwards; }
.reveal-1 { animation-delay: .02s; }
.reveal-2 { animation-delay: .08s; }
.reveal-3 { animation-delay: .14s; }
.reveal-4 { animation-delay: .2s; }
@keyframes reveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; }
  .lightbox { animation: none; }
  .ph, .strip-wrap:empty::before { animation: none; }
  .lang, .tab, .btn-dl, .lb-close, .lb-dl, .grid button img, .strip-wrap button img { transition: none; }
}

/* Chuột (máy tính): phản hồi khi rê */
@media (hover: hover) and (pointer: fine) {
  .btn-dl:not([disabled]):hover, .lb-dl:hover { background: var(--pink-deep); }
  .tab:not(.is-active):hover { background: var(--rose-mist); }
  .grid button:hover img, .strip-wrap button:hover img { transform: scale(1.02); }
}

/* Màn rộng: giới hạn bề ngang cho dễ nhìn */
@media (min-width: 620px) {
  .topbar, main, .foot-text { max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; }
}

/* Máy tính: vài trái tim bay ở hai lề trống (như màn chờ của app), đứng yên khi cuộn.
   Vị trí tính theo bề rộng lề = (100vw - 560px) / 2 nên không bao giờ đè lên cột nội dung. */
@media (min-width: 900px) {
  body::before {
    content: "";
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    pointer-events: none;
    background:
      url("tt/heart-white.svg")          no-repeat left  calc((100vw - 560px) * .22) top 19% / 56px 52px,
      url("tt/heart-outline-orange.svg") no-repeat left  calc((100vw - 560px) * .34) top 34% / 28px 26px,
      url("tt/heart-ink.svg")            no-repeat left  calc((100vw - 560px) * .12) top 55% / 34px 31px,
      url("tt/heart-outline-white.svg")  no-repeat right calc((100vw - 560px) * .30) top 15% / 46px 43px,
      url("tt/heart-white.svg")          no-repeat right calc((100vw - 560px) * .14) top 40% / 64px 59px,
      url("tt/heart-ink.svg")            no-repeat right calc((100vw - 560px) * .33) top 60% / 28px 26px;
  }
}