:root {
  --ink: #1f0e11; --muted: #4f3a3e; --accent: #8c1c2c; --wine: #4a0d19; --gold: #d2ac62;
  --bg-cream: #fbf5ea; --bg-blush: #f6e1e0; --radius: 16px;
  --serif: "Playfair Display", Georgia, serif; --sans: "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--sans); font-weight: 300; color: var(--ink); line-height: 1.7; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.2; }
.trap { position: absolute; left: -9999px; }
.lb-cap { position: absolute; left: 16px; right: 16px; bottom: 18px; text-align: center; color: #fff; font-size: .9rem; text-shadow: 0 1px 4px #000; }

.cam { position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 1100; background: #0b0b0b; color: #fff; display: flex; flex-direction: column; }
.cam[hidden] { display: none; }
/* Trang camera.html riêng: nền đen phủ toàn bộ, không cuộn */
body.cam-page { background: #0b0b0b; overflow: hidden; overscroll-behavior: none; }
/* Khóa zoom trang trên trang camera (chụm/chạm đúp); ô nhập >=16px để iOS không tự phóng khi bấm vào */
html:has(body.cam-page), body.cam-page { touch-action: pan-x pan-y; }
body.cam-page input { font-size: 16px !important; }
html:has(body.cam-page) { scroll-snap-type: none; background: #0b0b0b; }
.cam-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 12px calc(14px + env(safe-area-inset-bottom)); overflow: hidden; }
/* Khung vuông bo góc lớn */
.cam-frame { position: relative; flex: none; width: min(100%, 56svh, 480px); aspect-ratio: 1; border-radius: 12%; overflow: hidden; background: #1a1a1a; display: flex; align-items: center; justify-content: center; }
.cam-frame video, .cam-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-x { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 1.4rem; cursor: pointer; }
.cam-frame video { touch-action: none; }
.cam-znow { position: absolute; z-index: 1; top: 14px; right: 14px; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 22px; background: rgba(0,0,0,.4); color: #fff; font-size: 1rem; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.cam-count { position: relative; font-size: 7rem; font-weight: 700; text-shadow: 0 2px 12px #000; }
.cam-msg { position: relative; padding: 0 20px; text-align: center; font-size: .95rem; }
.cam-bar { flex: none; margin-top: 20px; display: flex; align-items: center; justify-content: space-around; width: min(100%, 420px); height: 90px; }
.cam-side { display: grid; place-items: center; width: 64px; height: 64px; border: 0; background: none; color: #fff; cursor: pointer; }
/* Nút chụp: lõi trắng, khe đen, vòng vàng ngoài (như Locket) */
.cam-shutter { width: 84px; height: 84px; border-radius: 50%; border: 4px solid var(--gold); background: #fff; box-shadow: inset 0 0 0 5px #0b0b0b; cursor: pointer; }
.cam-shutter:active { transform: scale(.94); }
.cam-timer { position: absolute; z-index: 1; top: 14px; left: 14px; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 22px; border: 0; background: rgba(0,0,0,.4); color: #fff; font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.cam-timer small { font-size: .72rem; }
.cam-pill { padding: 11px 24px; border-radius: 999px; border: 0; background: var(--gold); color: #000; font: inherit; font-weight: 600; cursor: pointer; }
.cam-pill.ghost { background: rgba(255,255,255,.18); color: #fff; }
.cam-pill:disabled { opacity: .6; }
.cam-done { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 12px; align-items: stretch; width: min(100%, 440px); margin: 0 auto; padding: 20px 16px; }
.cam-done[hidden] { display: none; }
.cam-actions { display: flex; gap: 10px; justify-content: center; }
/* Một dòng vuốt ngang đè lên đáy ảnh (nhỏ gọn): trang đầu = ô tin nhắn, các trang sau = tag. Chấm nằm ngoài khung, ngay dưới ảnh */
.cam-msgrow { position: absolute; z-index: 1; left: 50%; bottom: 5%; width: 80%; transform: translateX(-50%); }
/* Mỗi lần chỉ thấy 1 trang (rộng bằng cam-msgrow = 80% khung); viên bo tròn chỉ rộng vừa chữ, căn giữa trang */
.cam-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cam-strip::-webkit-scrollbar { display: none; }
.cam-page { flex: 0 0 100%; scroll-snap-align: center; display: flex; align-items: center; justify-content: center; min-height: 36px; }
.cam-page:first-child { border-radius: 999px; background: rgba(40,30,32,.72); padding: 0 14px; }
.cam-chip { max-width: 100%; padding: 8px 18px; border-radius: 999px; background: rgba(40,30,32,.72); color: var(--gold); font-size: .92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-caption { width: 100%; padding: 8px 0; border: 0; background: none; color: #fff; font: inherit; font-size: .92rem; text-align: center; outline: none; }
.cam-caption::placeholder { color: rgba(255,255,255,.85); }
.cam-dots { flex: none; display: flex; justify-content: center; align-items: center; gap: 9px; height: 28px; margin: 10px 0 10px; }
.cam-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.3); }
.cam-dots i.on { background: #fff; }
.cam-send { width: 84px; height: 84px; border-radius: 50%; border: 0; background: rgba(255,255,255,.22); color: #fff; display: grid; place-items: center; cursor: pointer; }
.cam-send:disabled { opacity: .5; }
.cam-who { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(100%, 320px); min-height: 78px; margin-top: 25px; }
.cam-who input[type=text]:not(.trap) { width: 100%; padding: 10px 16px; border: 1px solid var(--gold); border-radius: 999px; background: transparent; color: var(--gold); font: inherit; text-align: center; outline: none; }
.cam-who input::placeholder { color: rgba(210,172,98,.7); }
.cam-status { font-size: .8rem; opacity: .9; min-height: 1em; }
/* Danh sách tag: sheet từ dưới lên; máy tính: hộp giữa màn hình */
.cam-sheet { position: absolute; inset: 0; z-index: 5; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; justify-content: center; }
.cam-sheet[hidden] { display: none; }
.cam-sheet-box { width: 100%; max-height: 70%; overflow: auto; padding: 10px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 28px 28px 0 0; background: #1c1c1e; animation: sheetUp .28s ease-out; }
.cam-grab { display: block; width: 44px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.3); margin: 0 auto 18px; }
.cam-sheet-list { display: flex; flex-wrap: wrap; gap: 10px; }
.cam-sheet-list button { padding: 12px 20px; border: 0; border-radius: 999px; background: #38383a; color: #fff; font: inherit; font-size: 1rem; cursor: pointer; }
.cam-sheet-list button.on { outline: 2px solid var(--gold); outline-offset: 2px; font-weight: 600; }
@keyframes sheetUp { from { transform: translateY(100%); } }
@media (min-width: 700px) {
  .cam-sheet { align-items: center; }
  .cam-sheet-box { width: 460px; border-radius: 24px; padding-bottom: 24px; animation-name: sheetPop; }
}
@keyframes sheetPop { from { opacity: 0; transform: scale(.94); } }
.cam-done { justify-content: center; text-align: center; }

/* Công tắc chụp ảnh / album */
/* Cùng hàng, cùng cao (40px) với nút đóng */
.cam-switch { position: absolute; z-index: 4; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; gap: 2px; height: 40px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.14); }
.cam-switch[hidden] { display: none; }
.cam-switch button { display: grid; place-items: center; width: 40px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: none; color: #fff; cursor: pointer; }
.cam-switch button.on { background: #fff; color: #000; font-weight: 600; }
.cam-x { z-index: 4; top: calc(12px + env(safe-area-inset-top)); }

/* Album khách: lưới vuông */
.cam-album { position: absolute; inset: 0; z-index: 2; overflow-y: auto; padding: calc(72px + env(safe-area-inset-top)) 10px 24px; background: #0b0b0b; }
.cam-album[hidden] { display: none; }
.cam-agrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 1100px; margin: 0 auto; }
@media (min-width: 900px) { .cam-agrid { grid-template-columns: repeat(5, 1fr); } }
.cam-agrid button { display: block; aspect-ratio: 1; padding: 0; border: 0; border-radius: 16%; overflow: hidden; background: #1a1a1a; cursor: pointer; }
.cam-agrid img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cam-aempty { text-align: center; opacity: .7; margin-top: 40px; }

/* Xem chi tiết: mỗi ảnh một trang, lướt dọc */
.cam-detail { position: absolute; inset: 0; z-index: 3; background: #0b0b0b; }
.cam-detail[hidden] { display: none; }
.cam-dback { position: absolute; z-index: 4; top: calc(12px + env(safe-area-inset-top)); left: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.cam-dscroll { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
.cam-dscroll::-webkit-scrollbar { display: none; }
.cam-slide { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; padding: 64px 12px 24px; }
.cam-photo { position: relative; flex: none; width: min(100%, 56svh, 480px); aspect-ratio: 1; border-radius: 12%; overflow: hidden; background: #1a1a1a; }
.cam-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cam-photo-meta { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); width: 84%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cam-photo-cap { max-width: 100%; padding: 8px 16px; border-radius: 999px; background: rgba(40,30,32,.72); color: #fff; font-size: .95rem; text-align: center; }
.cam-who2 { display: flex; align-items: baseline; gap: 10px; font-size: 1.05rem; }
.cam-who2 b { color: #fff; }
.cam-ago { color: rgba(255,255,255,.5); font-size: .9rem; margin-top: -4px; }
.cam-react { margin-top: 4px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cam-react button { display: flex; align-items: center; gap: 7px; padding: 9px 16px; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; font: inherit; font-size: .95rem; cursor: pointer; }
.cam-react button.on { background: var(--gold); color: #000; font-weight: 600; }
.cam-emo { font-size: 1.35rem; line-height: 1; }

.cam-toast { position: absolute; z-index: 6; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%); width: max-content; max-width: 90%; padding: 10px 18px; border-radius: 999px; background: rgba(255,255,255,.92); color: #111; font-size: .88rem; text-align: center; animation: toastIn .25s ease-out; }
@keyframes toastIn { from { opacity: 0; } }
.cam-toast[hidden] { display: none; }
/* Màn "Wedding Gold" khi tắt tải ảnh: nền đen chuyển nâu vàng, thẻ tối, nút vàng */
.cam-lock { position: absolute; inset: 0; z-index: 7; display: flex; justify-content: center; background: #000; }
.cam-lock[hidden] { display: none; }
.cam-lock-box { position: relative; display: flex; flex-direction: column; width: min(480px, 100%); height: 100%; padding: calc(40px + env(safe-area-inset-top)) 22px 0; text-align: center; color: #fff; background: linear-gradient(180deg, #0b0b0b 0%, #0b0a05 40%, #2b2108 100%); animation: sheetUp .3s ease-out; }
.cam-lock-ico { width: 96px; height: 96px; margin: 0 auto 26px; display: grid; place-items: center; flex: none; border-radius: 28px; background: #1a150b; border: 2px solid rgba(210,172,98,.28); box-shadow: 0 0 40px rgba(210,172,98,.18); }
.cam-lock-ico span { font: 700 3.4rem/1 "Cormorant Garamond", Georgia, serif; background: linear-gradient(180deg, #ffd25a, #d9962b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cam-lock-box h3 { margin: 0 0 12px; font-size: 2.1rem; font-weight: 700; color: #fbeec8; text-shadow: 0 0 24px rgba(255,200,80,.35); }
.cam-lock-sub { margin: 0 auto 26px; max-width: 300px; font-size: 1.08rem; line-height: 1.45; color: #cdb98a; }
.cam-lock-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-bottom: 150px; }
.cam-lock-item { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border-radius: 22px; text-align: left; background: rgba(255,255,255,.07); }
.cam-lock-item .li-ico { flex: none; width: 40px; text-align: center; font-size: 2.2rem; line-height: 1; }
.cam-lock-item b { display: block; font-size: 1.12rem; font-weight: 600; color: #fff; }
.cam-lock-item em { margin-left: 6px; padding: 3px 11px; border-radius: 999px; background: #ffc21f; color: #1a1200; font-size: .8rem; font-style: normal; font-weight: 700; white-space: nowrap; }
.cam-lock-item small { display: block; margin-top: 3px; font-size: .98rem; line-height: 1.35; color: #9c8d68; }
.cam-lock-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 22px calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, rgba(24,18,5,.96) 45%); }
.cam-lock-ok { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; padding: 19px; border: 0; border-radius: 999px; background: #ffc21f; color: #1a1200; font: inherit; font-weight: 700; font-size: 1.2rem; cursor: pointer; }
.cam-lock-ok svg { width: 26px; height: 26px; }
.cam-lock-no { display: block; width: 100%; margin-top: 10px; padding: 14px; border: 0; background: none; color: #cdb98a; font: inherit; font-size: 1.1rem; cursor: pointer; }
/* Máy tính: popup giữa màn hình, rộng hơn, có nền mờ phía sau */
@media (min-width: 900px) {
  .cam-lock { align-items: center; background: rgba(0,0,0,.7); }
  .cam-lock-box { width: 620px; height: auto; max-height: 90%; padding: 44px 36px 0; border-radius: 32px; overflow: hidden; box-shadow: 0 20px 70px rgba(0,0,0,.7); animation-name: sheetPop; }
  .cam-lock-list { flex: 1 1 auto; padding-bottom: 170px; }
  .cam-lock-foot { padding: 70px 36px 24px; }
}

.cam-dnav { display: none; position: absolute; z-index: 4; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; place-items: center; cursor: pointer; }
.cam-dnav:hover { background: rgba(255,255,255,.28); }
.cam-dnav.prev { left: max(16px, calc(50% - 340px)); }
.cam-dnav.next { right: max(16px, calc(50% - 340px)); }
@media (hover: hover) and (pointer: fine) { .cam-dnav { display: grid; } }


/* Màn chào */
.cam-splash { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; padding: 24px; text-align: center; background: radial-gradient(ellipse at 50% 35%, #2b2108 0%, #0b0a05 70%); animation: splashIn .6s ease-out; }
.cam-splash.out { opacity: 0; transition: opacity .45s ease; pointer-events: none; }
@keyframes splashIn { from { opacity: 0; } }
.cam-splash-box { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 360px; }
.cam-mono { display: grid; place-items: center; width: 132px; height: 132px; margin-bottom: 14px; border-radius: 50%; border: 1.5px solid var(--gold); box-shadow: 0 0 0 7px rgba(210,172,98,.14), 0 0 46px rgba(210,172,98,.28); font: 500 2.5rem/1 "Cormorant Garamond", Georgia, serif; letter-spacing: .06em; color: var(--gold); animation: monoPop .9s cubic-bezier(.2,.8,.2,1) backwards; }
@keyframes monoPop { from { opacity: 0; transform: scale(.7) rotate(-8deg); } }
.cam-splash-names { font: 400 1.5rem "Cormorant Garamond", Georgia, serif; color: #fbeec8; animation: splashUp .7s .25s ease-out backwards; }
.cam-splash-date { letter-spacing: .34em; font-size: .8rem; color: var(--gold); animation: splashUp .7s .4s ease-out backwards; }
.cam-splash-line { margin: 14px 0 22px; font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,.85); animation: splashUp .7s .55s ease-out backwards; }
.cam-splash-go { padding: 15px 38px; border: 0; border-radius: 999px; background: var(--gold); color: #1a1200; font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; box-shadow: 0 6px 24px rgba(210,172,98,.35); animation: splashUp .7s .7s ease-out backwards; }
.cam-splash-go:active { transform: scale(.96); }
@keyframes splashUp { from { opacity: 0; transform: translateY(14px); } }

/* Hoa giấy vàng + ảnh bay vào album sau khi gửi */
.cam-confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9; pointer-events: none; }
.cam-fly { position: fixed; z-index: 9; margin: 0; object-fit: cover; border: 3px solid #fff; box-shadow: 0 8px 26px rgba(0,0,0,.5); pointer-events: none; }
.cam-switch button.pulse { animation: swPulse .55s ease-out; }
@keyframes swPulse { 40% { transform: scale(1.35); background: var(--gold); color: #000; } }
@media (prefers-reduced-motion: reduce) { .cam-splash, .cam-mono, .cam-splash-names, .cam-splash-date, .cam-splash-line, .cam-splash-go { animation: none; } }