/* Ảnh Cưới — trang cưới. Bố cục theo mẫu Liebe (demo4-6: ảnh dán nghiêng, thiệp giấy, ảnh bầu dục,
   bản đồ + thẻ giấy), viết lại hoàn toàn. 10 giao diện đổi TỨC THÌ qua <html data-theme="…">:
   serenity (bạc hà) · lavender (oải hương) · summer (hoàng hôn) · thiep (thiệp cưới — ảnh tràn màn,
   chữ viết tay, theo demo7). 6 giao diện còn lại (hoangkim, songhy, tapchi, vuonhoa, demsao, datnung)
   nằm ở wedding-themes.css, nạp sau file này. Mọi màu/phông lấy từ biến bên dưới. */
:root, [data-theme="serenity"] {
  --accent: #6fae95; --accent-2: #91c0c7; --soft: #e8f7f1; --ink: #423629; --muted: #857a70;
  --nav-bg: #423629; --nav-ink: #fff; --page: #f6fbf8;
  --f-head: "Lora", Georgia, serif; --f-name: "Playfair Display", Georgia, serif; --f-body: "Lora", Georgia, serif;
  --f-ui: "Montserrat", system-ui, sans-serif;
  --name-style: italic; --name-size: clamp(2.6rem, 7vw, 5rem);
}
[data-theme="lavender"] {
  --accent: #c77aab; --accent-2: #b6bad6; --soft: #fbf0f7; --ink: #5d6180; --muted: #8b8fa6;
  --nav-bg: #9ea3c9; --nav-ink: #fff; --page: #fdf8fb;
}
[data-theme="summer"] {
  --accent: #ec7a63; --accent-2: #f5b86b; --soft: #fff8df; --ink: #7b3e24; --muted: #9a7563;
  --nav-bg: #ec8b67; --nav-ink: #fff; --page: #fffdf3;
}
[data-theme="thiep"] {
  --accent: #e7746f; --accent-2: #f3b6ae; --soft: #fdf1ef; --ink: #3b3333; --muted: #8a7f7f;
  --nav-bg: transparent; --nav-ink: #fff; --page: #fff;
  --f-head: "Dancing Script", cursive; --f-name: "Dancing Script", cursive; --f-body: "Lora", Georgia, serif;
  --name-style: normal; --name-size: clamp(3rem, 9vw, 6rem);
}

body.wd { background: var(--page); color: var(--ink); font-family: var(--f-body); overflow-x: hidden; transition: background .4s, color .4s; }
.wd a { color: var(--accent); }
.wd .btn { font-family: var(--f-ui); letter-spacing: .02em; }
.wd .btn-accent { background: var(--accent); color: #fff; }
.wd .btn-ghost { color: var(--ink); }
.wd .btn-accent:hover { background: color-mix(in srgb, var(--accent) 85%, #000); }
.wd h2 { font-family: var(--f-head); font-weight: 600; font-size: clamp(2rem, 5vw, 3rem); color: var(--ink); }
[data-theme="thiep"] .wd h2, [data-theme="thiep"] h2 { color: var(--accent); font-weight: 700; }
.is-hidden { display: none !important; }
.dt-nw { white-space: nowrap; }

/* ── Hiệu ứng rơi (admin chọn): hearts · snow · leaves · petals · none ──
   14 hạt, vị trí/cỡ/tốc độ khác nhau theo thứ tự; hình dạng theo data-fx. */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.fx[data-fx="none"] { display: none; }
.fx i { position: absolute; top: -8%; font-style: normal; will-change: transform;
  animation: fx-fall var(--dur, 12s) linear var(--delay, 0s) infinite, fx-sway var(--sway, 3.2s) ease-in-out var(--delay, 0s) infinite alternate; }
.fx i:nth-child(1)  { left: 3%;  --dur: 13s; --delay: 0s;   --s: 1;    --sway: 3s; }
.fx i:nth-child(2)  { left: 11%; --dur: 10s; --delay: 4s;   --s: .6;   --sway: 2.4s; }
.fx i:nth-child(3)  { left: 19%; --dur: 15s; --delay: 7s;   --s: 1.3;  --sway: 3.6s; }
.fx i:nth-child(4)  { left: 27%; --dur: 11s; --delay: 1.5s; --s: .75;  --sway: 2.8s; }
.fx i:nth-child(5)  { left: 35%; --dur: 14s; --delay: 9s;   --s: 1.1;  --sway: 3.3s; }
.fx i:nth-child(6)  { left: 43%; --dur: 12s; --delay: 3s;   --s: .55;  --sway: 2.2s; }
.fx i:nth-child(7)  { left: 51%; --dur: 16s; --delay: 5.5s; --s: 1.2;  --sway: 3.9s; }
.fx i:nth-child(8)  { left: 59%; --dur: 10.5s; --delay: 8s; --s: .7;   --sway: 2.6s; }
.fx i:nth-child(9)  { left: 67%; --dur: 13.5s; --delay: 2s; --s: 1;    --sway: 3.1s; }
.fx i:nth-child(10) { left: 75%; --dur: 11.5s; --delay: 10s; --s: .65; --sway: 2.5s; }
.fx i:nth-child(11) { left: 83%; --dur: 14.5s; --delay: 6s; --s: 1.15; --sway: 3.5s; }
.fx i:nth-child(12) { left: 90%; --dur: 12.5s; --delay: 0.8s; --s: .8; --sway: 2.9s; }
.fx i:nth-child(13) { left: 95%; --dur: 15.5s; --delay: 11s; --s: .6;  --sway: 3.7s; }
.fx i:nth-child(14) { left: 47%; --dur: 17s; --delay: 12.5s; --s: .9; --sway: 3.4s; }
@keyframes fx-fall { to { top: 108%; } }
@keyframes fx-sway { from { transform: translateX(-20px) rotate(-20deg) scale(var(--s)); } to { transform: translateX(40px) rotate(25deg) scale(var(--s)); } }

.fx[data-fx="hearts"] i::before { content: "♥"; font-size: 22px; color: var(--accent); opacity: .55; }
.fx[data-fx="snow"] i { width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle, #fff 35%, rgba(255,255,255,.2) 70%); box-shadow: 0 0 6px rgba(160,170,190,.55); }
.fx[data-fx="snow"] i:nth-child(odd) { width: 6px; height: 6px; }
.fx[data-fx="leaves"] i { width: 24px; height: 16px; border-radius: 0 100% 0 100%;
  background: linear-gradient(135deg, #f3c95c, #d98a1f 70%, #b86a14); box-shadow: inset 0 0 0 1px rgba(150,80,10,.18); opacity: .85; }
.fx[data-fx="leaves"] i:nth-child(3n) { background: linear-gradient(135deg, #f6d77a, #e0a236); }
.fx[data-fx="petals"] i { width: 17px; height: 13px; border-radius: 150% 0 150% 0;
  background: linear-gradient(135deg, #ffe3ea, #f5a9bb); opacity: .85; }
.fx[data-fx="petals"] i:nth-child(4n) { background: linear-gradient(135deg, #fff, #f7c5d0); }
@media (prefers-reduced-motion: reduce) { .fx { display: none; } }

/* ── Thanh menu ──────────────────────────────────────────── */
/* Nhảy tới mục từ menu: tiêu đề không nằm sát/khuất dưới thanh menu cố định (R2-27). */
html { scroll-padding-top: 72px; }
.wd-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; padding: 8px 24px; background: var(--nav-bg); color: var(--nav-ink); font-family: var(--f-ui); font-size: .92rem;
  transition: background .3s, box-shadow .3s; }
.wd-nav a { color: var(--nav-ink); text-decoration: none; opacity: .92; }
.wd-nav a:hover { opacity: 1; }
.wd-nav-l, .wd-nav-r { display: flex; gap: 22px; }
.wd-nav-r { justify-content: flex-end; }
[data-theme="thiep"] .wd-nav.scrolled { background: rgba(255,255,255,.96); box-shadow: 0 2px 12px rgba(0,0,0,.06); --nav-ink: var(--ink); }
.wd-mono { display: inline-flex; align-items: center; gap: 4px; font: italic 600 1.35rem var(--f-name); color: var(--nav-ink) !important;
  border: 1.5px solid currentColor; border-radius: 50%; width: 58px; height: 58px; justify-content: center; opacity: 1 !important; }
.wd-mono i { font-style: normal; font-size: .7em; color: var(--accent); }
.wd-mono.big { width: 88px; height: 88px; font-size: 2rem; color: var(--accent) !important; margin: 0 auto 16px; }
.wd-burger { display: none; background: none; border: 1px solid currentColor; color: var(--nav-ink); border-radius: 8px; width: 40px; height: 36px; font-size: 18px; justify-self: end; }
@media (max-width: 760px) {
  .wd-nav { grid-template-columns: auto 1fr auto; padding: 6px 12px; }
  .wd-nav-l, .wd-nav-r { display: none; }
  .wd-mono { width: 46px; height: 46px; font-size: 1.1rem; grid-column: 1; }
  .wd-burger { display: block; grid-column: 3; }
  .wd-nav.open .wd-nav-l, .wd-nav.open .wd-nav-r { display: flex; flex-direction: column; gap: 10px; grid-column: 1 / -1; padding: 6px 4px; }
  .wd-nav.open { background: var(--nav-bg); }
  [data-theme="thiep"] .wd-nav.open { background: rgba(40,30,30,.92); }
}

/* ── Nhạc ────────────────────────────────────────────────── */
.music { position: fixed; right: 16px; bottom: 16px; z-index: 45; }
.music-btn { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; font-size: 20px; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.music.playing .music-btn { animation: spin 4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* R5-17: giảm chuyển động -> nút nhạc không quay; lưới an toàn: không hiệu ứng nào trên trang lặp vô hạn (mọi giao diện). */
@media (prefers-reduced-motion: reduce) {
  .music.playing .music-btn { animation: none; }
  body.wd *, body.wd *::before, body.wd *::after { animation-iteration-count: 1 !important; }
  /* S1-DESK-09: hạt rơi đã display:none nhưng 14 <i> bên trong vẫn mang animation (lặp 1 lần) -> tắt hẳn ở mọi giao diện. */
  .fx, .fx i, .fx i::before { animation: none !important; }
}
body.is-draft .music { bottom: 164px; }

/* ── Họa tiết, ảnh, thiệp giấy ──────────────────────────── */
.orn { position: absolute; width: 220px; height: 220px; color: var(--accent); pointer-events: none; z-index: 2; }
.orn-1 { left: -120px; bottom: -40px; transform: rotate(-12deg); }
.orn-2 { right: -30px; top: 40px; transform: scaleX(-1) rotate(-20deg); opacity: .7; }
@media (max-width: 760px) { .orn { width: 130px; height: 130px; } .orn-1 { left: -50px; bottom: -30px; } }

.slot { margin: 0; position: relative; overflow: hidden; background: var(--soft); }
.slot img { width: 100%; height: 100%; object-fit: cover; }
.slot-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent); font-size: 2.5rem; opacity: .6;
  background: radial-gradient(circle at 30% 30%, #fff, var(--soft) 70%); }
.photo { border: 8px solid #fff; box-shadow: 0 6px 18px rgba(0,0,0,.18); }

.paper { position: relative; background: #fff; padding: 48px 40px; z-index: 3; }
.paper::before, .paper::after { content: ""; position: absolute; inset: 0; z-index: -1; box-shadow: 0 0 8px rgba(0,0,0,.14); }
.paper::before { background: #fafafa; transform: rotate(-2deg); left: -5px; top: 4px; }
.paper::after { background: #f5f5f5; transform: rotate(1.3deg); right: -3px; }
@media (max-width: 560px) { .paper { padding: 32px 20px; } }

/* Vạch chia ♥: đường chấm vẽ ở ::before và được CẮT một khoảng ở giữa (mask) thay vì phủ nền lên ♥ -> không còn ô nền
   lệch màu trên thẻ giấy / nền màu nước (R2-27). */
.divider { position: relative; width: 110px; margin: 12px auto 0; height: 1px; }
.divider::before { content: ""; position: absolute; left: 0; right: 0; top: 0; border-top: 1px dotted var(--accent);
  -webkit-mask: linear-gradient(90deg, #000 calc(50% - 22px), transparent calc(50% - 22px) calc(50% + 22px), #000 calc(50% + 22px));
  mask: linear-gradient(90deg, #000 calc(50% - 22px), transparent calc(50% - 22px) calc(50% + 22px), #000 calc(50% + 22px)); }
.divider span { position: absolute; left: 50%; top: -12px; transform: translateX(-50%); color: var(--accent); font-size: 24px; line-height: 1; padding: 0 10px; background: none; }
.sec-head { text-align: center; margin-bottom: 48px; position: relative; z-index: 3; }
.sec-head h2 { margin: 0; }

/* ── Đầu trang ───────────────────────────────────────────── */
.intro { position: relative; padding: 110px 16px 60px; background:
  radial-gradient(ellipse at 15% 10%, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 55%),
  radial-gradient(ellipse at 85% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 50%), var(--soft); }
.photowall { position: absolute; inset: 120px 0 auto; display: flex; justify-content: space-between; pointer-events: none; }
.pw { width: 30vw; max-width: 380px; aspect-ratio: 4 / 3; border: 8px solid #fff; box-shadow: 0 4px 12px rgba(0,0,0,.15); pointer-events: auto; }
.pw img { filter: blur(2px); transition: filter .3s; }
.pw:hover img { filter: none; }
.pw-l { transform: rotate(5deg); margin-left: -2vw; }
.pw-r { transform: rotate(-4deg); margin-right: -2vw; margin-top: -20px; }
.intro-main { position: relative; width: min(640px, 92%); margin: 0 auto; z-index: 3; }
.main-photo { aspect-ratio: 4 / 3; transform: rotate(-3deg); }
.save-card { width: min(820px, 94%); margin: 60px auto 0; text-align: center; }
.eyebrow { font-family: var(--f-ui); letter-spacing: .25em; text-transform: uppercase; font-size: .8rem; color: var(--muted); margin-bottom: 8px; }
.names { font: var(--name-style) 700 var(--name-size)/1.1 var(--f-name); color: var(--ink); margin: 0 0 12px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .3em; }
.names .amp { color: var(--accent); }
.date { font: 600 1.25rem var(--f-head); letter-spacing: .04em; margin: 0; }
.date.big { font-size: 1.5rem; }
.lunar { color: var(--muted); font-style: italic; margin: 4px 0 0; }
@media (max-width: 760px) { .photowall { display: none; } .intro { padding-top: 84px; } .save-card { margin-top: 36px; } }

/* Thiệp cưới: ảnh chính tràn màn hình, chữ trắng đè lên, bỏ ảnh nghiêng. */
[data-theme="thiep"] .intro { min-height: 100svh; padding: 0; display: grid; place-items: center; background: #222; overflow: hidden; }
[data-theme="thiep"] .photowall, [data-theme="thiep"] .orn-1 { display: none; }
[data-theme="thiep"] .intro-main { position: absolute; inset: 0; width: auto; margin: 0; }
[data-theme="thiep"] .main-photo { position: absolute; inset: 0; transform: none; border: 0; box-shadow: none; aspect-ratio: auto; }
/* Chữ nằm ở 1/3 dưới để không che mặt cô dâu chú rể; nền tối dần xuống dưới cho chữ luôn đọc được. */
[data-theme="thiep"] .intro-main::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 45%, rgba(0,0,0,.62) 100%); }

[data-theme="thiep"] .intro { place-items: end center; }
[data-theme="thiep"] .save-card { background: transparent; margin: 0; padding: 120px 16px max(9vh, 64px); color: #fff; z-index: 4; }
[data-theme="thiep"] .save-card::before, [data-theme="thiep"] .save-card::after { display: none; }
[data-theme="thiep"] .save-card .names, [data-theme="thiep"] .save-card .names .amp { color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,.35); }
[data-theme="thiep"] .save-card .eyebrow, [data-theme="thiep"] .save-card .lunar { color: rgba(255,255,255,.88); }
[data-theme="thiep"] .save-card .eyebrow { display: flex; align-items: center; justify-content: center; gap: 12px; }
[data-theme="thiep"] .save-card .eyebrow::before, [data-theme="thiep"] .save-card .eyebrow::after { content: ""; width: 60px; border-top: 1px solid rgba(255,255,255,.7); }
[data-theme="thiep"] .save-card .date { font-family: var(--f-ui); letter-spacing: .35em; font-weight: 400; }
[data-theme="thiep"] .save-card .divider { display: none; }

/* ── Cô dâu & chú rể ─────────────────────────────────────── */
section.couple, .event, .location, .gallery-sec { position: relative; padding: 90px 16px; }
.watercolor { background: #fff; }
.couple-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 24px; max-width: 980px; margin: 0 auto; }
.person { text-align: center; }
.oval { width: min(300px, 70%); aspect-ratio: 3 / 4; border-radius: 50%; margin: 0 auto 18px; border: 6px solid var(--soft); box-shadow: 0 0 0 1px var(--accent-2); }
.role { font-family: var(--f-ui); letter-spacing: .2em; text-transform: uppercase; font-size: .75rem; color: var(--muted); margin: 0; }
.banner { display: inline-block; margin: 6px 0 10px; padding: 10px 24px; color: #fff; font: 700 1.3rem var(--f-head);
  background: var(--accent); border-radius: 40% 60% 55% 45% / 60% 40% 60% 40%; }
[data-theme="thiep"] .banner { background: none; color: var(--ink); font-size: 2rem; padding: 0; }
.info { color: var(--muted); max-width: 320px; margin: 0 auto; }
body:not(.is-draft) .info:empty { display: none; }
.rings { width: 64px; height: 64px; color: var(--accent); align-self: center; margin-top: -60px; }
@media (max-width: 760px) { .couple-row { grid-template-columns: 1fr; } .rings { margin: 0 auto; } }

/* ── Lễ cưới ─────────────────────────────────────────────── */
.event-row { display: grid; grid-template-columns: 5fr 7fr; align-items: center; gap: 40px; max-width: 1080px; margin: 0 auto; }
.event-photo { aspect-ratio: 3 / 4; transform: rotate(4deg); }
.event-card { text-align: center; }
.lead { font-style: italic; color: var(--muted); }
.wd .countdown { display: flex; justify-content: center; gap: 12px; margin: 22px 0; }
.wd .countdown div { min-width: 70px; padding: 10px 6px; border-radius: 10px; background: var(--soft); backdrop-filter: none; box-shadow: none; }
.wd .countdown b { display: block; font: 700 2rem/1.1 var(--f-name); color: var(--accent); }
.wd .countdown span { font: .7rem var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.center-row { justify-content: center; }
@media (max-width: 760px) { .event-row { grid-template-columns: 1fr; } .event-photo { width: 80%; margin: 0 auto; } .wd .countdown div { min-width: 58px; } }

/* ── Địa điểm ────────────────────────────────────────────── */
.events { display: grid; gap: 60px; max-width: 1180px; margin: 0 auto; }
.ev { display: grid; grid-template-columns: 7fr 5fr; align-items: center; }
.ev:nth-child(even) { grid-template-columns: 5fr 7fr; }
.ev:nth-child(even) .ev-map { order: 2; }
.ev-map { height: 380px; background: var(--soft); border-radius: 4px; overflow: hidden; }
.ev-map iframe { width: 100%; height: 100%; border: 0; filter: saturate(.85); }
.ev-map-ph { height: 100%; display: grid; place-items: center; color: var(--muted); font-style: italic; }
.ev-card { margin-left: -60px; text-align: center; }
.ev:nth-child(even) .ev-card { margin: 0 -60px 0 0; }
.ev-card h3 { font: 700 1.8rem var(--f-head); color: var(--accent); margin-bottom: 6px; }
.ev-place { font: 600 1rem var(--f-ui); margin-bottom: 4px; }
.ev-addr, .ev-time { color: var(--muted); margin-bottom: 6px; }
.ev-card .btn { margin-top: 10px; }
@media (max-width: 760px) {
  .ev, .ev:nth-child(even) { grid-template-columns: 1fr; }
  .ev:nth-child(even) .ev-map { order: 0; }
  .ev-map { height: 240px; }
  .ev-card, .ev:nth-child(even) .ev-card { margin: -30px 12px 0; }
}

/* ── Trích dẫn ───────────────────────────────────────────── */
.quote { position: relative; min-height: 360px; display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden; }
.quote-bg { position: absolute; inset: 0; }
.quote::after { content: ""; position: absolute; inset: 0; background: rgba(20,12,12,.5); pointer-events: none; }
.quote blockquote { position: relative; z-index: 2; max-width: 760px; margin: 0; padding: 60px 20px; }
.quote blockquote p { font: italic 700 clamp(1.4rem, 3.5vw, 2rem)/1.5 var(--f-name); margin: 0; }

/* ── Album ───────────────────────────────────────────────── */
.wd-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; max-width: 1280px; margin: 0 auto 28px; }
.wd-g { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--soft); }
.wd-g img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transition: transform .5s; }
.wd-g::after { content: "♥"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 34px;
  background: color-mix(in srgb, var(--accent) 45%, transparent); opacity: 0; transition: opacity .3s; }
.wd-g:hover img { transform: scale(1.06); }
.wd-g:hover::after { opacity: 1; }
@media (max-width: 560px) { .wd-gallery { grid-template-columns: repeat(2, 1fr); gap: 4px; } }
.more-albums { max-width: 1100px; margin: 36px auto 0; }
.wd .album-card { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.wd .album-meta h3 { font-family: var(--f-head); }

/* ── Xác nhận tham dự ────────────────────────────────────── */
.rsvp { max-width: 720px; }
.rsvp-card { display: grid; gap: 14px; }
.rsvp-invitee { text-align: center; font: italic 1.2rem var(--f-body); margin: 0; }
.rsvp-invitee b { display: block; font: var(--name-style) 700 2rem var(--f-name); color: var(--accent); }
.rsvp-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rsvp-choice label { display: block; cursor: pointer; }
.rsvp-choice input { position: absolute; opacity: 0; }
.rsvp-choice span { display: block; text-align: center; padding: 14px; border: 2px solid var(--soft); border-radius: 12px; font: 600 1rem var(--f-ui); background: #fff; transition: all .15s; }
.rsvp-choice input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--ink); }
.rsvp-choice input:focus-visible + span { outline: 2px solid var(--accent); }
.rsvp-done { text-align: center; }
.rsvp-card .field-hint { display: block; margin-top: 4px; line-height: 1.4; }
/* Lỗi của 1 ô (R3-04: SĐT chưa đúng) — đỏ đậm đủ tương phản trên nền trắng của thẻ ở mọi giao diện. */
.wd .field-err { display: block; margin-top: 4px; color: #b3261e; font: 600 .95rem/1.4 var(--f-ui); }
.wd [aria-invalid="true"] { border-color: #b3261e !important; box-shadow: 0 0 0 2px rgba(179,38,30,.18); }
.rsvp-done b { font: 700 1.6rem var(--f-head); color: var(--accent); display: block; margin-bottom: 6px; }

/* ── Lời chúc, chân trang ────────────────────────────────── */
.wd .wishes { max-width: 820px; }
.wd .wish-form { box-shadow: none; }
.wd .wish { border-left-color: var(--accent); }
.wd .wish p { font-family: var(--f-body); }
.wish-more-row { margin: 24px 0 0; }
.wd .cta h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
.wd-foot { text-align: center; padding: 70px 16px 60px; background: var(--soft); }
.wd-foot p { font: italic 1.15rem var(--f-body); }
body.is-draft .wd-foot { padding-bottom: 230px; }
.invitee { font: italic 1.1rem var(--f-body); margin: 0 0 10px; }
.invitee b { display: block; font: var(--name-style) 700 1.8rem var(--f-name); color: var(--accent); }
[data-theme="thiep"] .invitee, [data-theme="thiep"] .invitee b { color: #fff; }
/* Họa tiết thò ra ngoài mép không được làm rộng trang (điện thoại tự thu nhỏ cả trang). */
.intro, section.couple, .event, .location, .gallery-sec { overflow-x: clip; }
.music-hint { position: absolute; right: 58px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  background: #fff; color: var(--ink); font: 600 13px var(--f-ui); padding: 7px 12px; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(0,0,0,.15); animation: hint-in .4s ease-out; }
@keyframes hint-in { from { opacity: 0; transform: translate(8px, -50%); } }
.music-credit { font-size: .78rem !important; font-style: normal !important; color: var(--muted); margin-top: 6px; }

/* Hiện dần khi cuộn (wedding.js thêm .js-reveal cho <html> chỉ khi chạy được). */
.js-reveal .reveal { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js-reveal .reveal.in { opacity: 1; transform: none; }
.js-reveal .event-photo.reveal { transform: translateY(26px) rotate(4deg); }
.js-reveal .event-photo.reveal.in { transform: rotate(4deg); }
.js-reveal .save-card.reveal { transition-delay: .15s; }
/* Chủ nhà đang sửa: hiện hết ngay, không chờ cuộn. */
.is-draft .reveal { opacity: 1 !important; transform: none !important; }
.is-draft .event-photo.reveal { transform: rotate(4deg) !important; }
[data-theme="thiep"].js-reveal .save-card.reveal { transform: translateY(16px); }

/* Thiệp cưới trên điện thoại (đặt cuối file để thắng các luật chung ở trên). */
@media (max-width: 760px) {
  [data-theme="thiep"] .save-card .date { letter-spacing: .12em; font-size: 1.05rem; }
  [data-theme="thiep"] .save-card .eyebrow::before, [data-theme="thiep"] .save-card .eyebrow::after { width: 24px; }
  [data-theme="thiep"] .save-card .names { font-size: clamp(2.6rem, 12vw, 3.6rem); }
}

/* ── Khách KHÔNG bao giờ thấy ô ảnh trống: bố cục tự co (chủ nhà ở bản nháp vẫn thấy ô "Thêm ảnh"). ── */
body:not(.is-draft) .slot-empty { display: none !important; }
.event--noimg .event-row { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.event--noimg .event-card { width: 100%; }
.location .ev.ev--nomap { grid-template-columns: minmax(0, 1fr); max-width: 640px; width: 100%; margin: 0 auto; }
.location .ev.ev--nomap .ev-card { margin: 0; }
/* Mọi địa điểm đều không có bản đồ: các thẻ đứng cạnh nhau (máy tính), xếp chồng (điện thoại). */
.events:not(:has(.ev:not(.ev--nomap))) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); max-width: 1000px; gap: 28px; }
.events:not(:has(.ev:not(.ev--nomap))) .ev.ev--nomap { max-width: none; height: 100%; }
.events:not(:has(.ev:not(.ev--nomap))) .ev-card { height: 100%; }
/* Câu trích dẫn không có ảnh nền: thành khối chữ trang trí trên nền giao diện. */
:root .quote.quote--noimg { min-height: 0; color: var(--ink); background: var(--soft); }
:root .quote.quote--noimg::after { display: none; }
.quote--noimg blockquote { padding: 72px 20px; }
.quote--noimg blockquote::before { content: "“"; display: block; font: 700 4.6rem/.55 var(--f-name); color: var(--accent); margin-bottom: 12px; }
/* Ngắt dòng cân đối cho tiêu đề/câu ngắn (tránh 1 chữ rơi lẻ dòng cuối). */
.wd :is(h2, h3, .lead, .lunar, .eyebrow, .quote blockquote p, .wd-foot p) { text-wrap: balance; }

/* Màn "Mở thiệp" (nhạc tự phát bị trình duyệt chặn): 1 chạm = vào trang + nhạc chạy. Dùng biến của theme. */
.wd-cover { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(120% 90% at 50% 20%, var(--soft), var(--page) 70%); color: var(--ink); text-align: center;
  transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.wd-cover.is-leaving { opacity: 0; transform: translateY(-3%) scale(1.02); pointer-events: none; }
html.has-cover, html.has-cover body { overflow: hidden; }
.wd-cover-in { max-width: 520px; display: grid; justify-items: center; gap: 10px; animation: wdc-in .9s cubic-bezier(.2,.7,.2,1) both; }
.wd-cover-mono { width: 84px; height: 84px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent);
  display: grid; grid-auto-flow: column; place-content: center; gap: 2px; font: var(--name-style, italic) 1.5rem var(--f-name); margin: 0 0 8px; }
.wd-cover-mono i { font-style: normal; font-size: .8em; opacity: .8; }
.wd-cover-eyebrow { font: 600 .78rem var(--f-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin: 0; }
.wd-cover-names { font: var(--name-style, italic) clamp(2.1rem, 8vw, 3.6rem)/1.15 var(--f-name); margin: 4px 0; text-wrap: balance; }
.wd-cover-names span, .wd-cover-names i { display: block; }
.wd-cover-names i { color: var(--accent); font-size: .6em; line-height: 1.3; }
.wd-cover-date { font: 500 1rem var(--f-ui); letter-spacing: .35em; color: var(--muted); margin: 0 0 18px; }
.wd-cover-btn { font: 600 1rem var(--f-ui); letter-spacing: .06em; color: #fff; background: var(--accent); border: 0; border-radius: 999px;
  min-height: 52px; padding: 0 34px; cursor: pointer; box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 35%, transparent);
  animation: wdc-pulse 2.4s ease-in-out 1.2s infinite; }
.wd-cover-btn:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 3px; }
@keyframes wdc-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes wdc-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
[data-theme="demsao"] .wd-cover-btn { color: #111a3a; }
[data-theme="tapchi"] .wd-cover-btn { border-radius: 0; }
@media (prefers-reduced-motion: reduce) { .wd-cover, .wd-cover-in, .wd-cover-btn { animation: none; transition: none; } }
.wd-cover[hidden] { display: none; }
/* M1-GUEST-01 — Điện thoại xoay ngang (cao 340–390px): nội dung cao hơn màn -> màn che CUỘN được (lưới xếp từ trên, không
   căn giữa để phần đầu không bị đẩy khuất) + thu gọn ở màn thấp; chạm đâu trên màn che cũng mở (wedding.js).
   html.has-cover … (0,2,1) thắng overflow:hidden riêng của vài giao diện VIP ([data-theme] .wd-cover = 0,2,0). */
html.has-cover .wd-cover { overflow-y: auto; overscroll-behavior: contain; cursor: pointer; -webkit-overflow-scrolling: touch;
  align-content: safe center; place-items: start center;
  padding: max(16px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
@media (max-height: 500px) {
  html.has-cover .wd-cover-in { gap: 4px; padding-top: 4px; padding-bottom: 4px; }
  html.has-cover .wd-cover-mono { width: 48px; height: 48px; font-size: 1rem; margin: 0; }
  html.has-cover .wd-cover-eyebrow { font-size: .75rem; letter-spacing: .2em; }
  html.has-cover .wd-cover-names { font-size: clamp(1.5rem, 6vh, 2.1rem); margin: 0; line-height: 1.1; }
  html.has-cover .wd-cover-names span, html.has-cover .wd-cover-names i { display: inline; }
  html.has-cover .wd-cover-names i { margin: 0 .3em; }
  html.has-cover .wd-cover-date { margin: 0 0 6px; letter-spacing: .2em; }
  html.has-cover .wd-cover-btn { min-height: 46px; animation: none; }
}
/* Màn rất thấp (iPhone SE ngang 375px, Pixel ngang 360px): bỏ logo tròn để nút luôn trong khung không cần cuộn. */
@media (max-height: 380px) { html.has-cover .wd-cover-mono { display: none; } }

/* ══════════ QA vòng 1 — trang khách mời (dễ đọc, dễ chạm, không che nội dung) ══════════ */
/* Menu điện thoại: logo + ☰/✕ luôn ở hàng đầu, danh sách xổ xuống bên dưới; mỗi mục cao ≥44px. */
@media (max-width: 760px) {
  .wd-mono { order: -2; }
  .wd-burger { order: -1; width: 44px; height: 44px; display: grid; place-items: center; font-size: 20px; line-height: 1; }
  .wd-nav.open .wd-nav-l, .wd-nav.open .wd-nav-r { gap: 0; padding: 0 4px; }
  .wd-nav.open .wd-nav-l { padding-top: 6px; }
  .wd-nav.open .wd-nav-r { padding-bottom: 8px; }
  .wd-nav.open a { display: flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 1rem;
    border-top: 1px solid color-mix(in srgb, var(--nav-ink) 18%, transparent); }
  .wd-nav.open .wd-nav-l a:first-child { border-top: 0; }
  /* Nút nhạc lên thanh menu (thanh luôn nằm trên cùng) -> không bao giờ che chữ/nút trong trang. */
  body:not(.is-draft) .music { top: 7px; bottom: auto; right: 68px; }
  body:not(.is-draft) .music-btn { width: 44px; height: 44px; font-size: 18px; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
  body:not(.is-draft) .music-hint { right: auto; left: 50%; top: 54px; transform: translateX(-60%); }
}
@keyframes hint-in-top { from { opacity: 0; transform: translate(-60%, -6px); } }
@media (max-width: 760px) { body:not(.is-draft) .music-hint { animation-name: hint-in-top; } }

/* Chữ thông tin ≥14px (người lớn tuổi): nhãn đếm ngược, vai trò, dòng nhỏ đầu trang, ghi công nhạc. */
.wd .countdown span { font-size: .875rem; letter-spacing: .06em; }
.role { font-size: .875rem; letter-spacing: .14em; }
.eyebrow { font-size: .875rem; letter-spacing: .16em; }
.music-credit { font-size: .875rem !important; }
.ev-addr, .ev-time { font-size: 1rem; }

/* Bản đồ: nút "Xem bản đồ" (bấm mới nạp Google Maps). */
.ev-map-load { width: 100%; height: 100%; border: 0; margin: 0; padding: 20px; cursor: pointer; display: grid; place-content: center; justify-items: center; gap: 6px;
  color: var(--ink); font: 600 1rem var(--f-ui);
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--accent) 7%, transparent) 0 2px, transparent 2px 14px), var(--soft); }
.ev-map-load b { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 999px; background: #fff; color: var(--accent);
  box-shadow: 0 4px 14px rgba(0,0,0,.1); font-weight: 600; }
.ev-map-load small { font: 400 .9375rem/1.4 var(--f-body); color: var(--muted); max-width: 32ch; text-align: center; }
.ev-map-pin { font-size: 2rem; line-height: 1; }
.ev-map-load:hover b, .ev-map-load:focus-visible b { background: var(--accent); color: #fff; }
.ev-map-load:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -3px; }
.ev-card .btn { margin: 10px 4px 0; }

/* Nút nổi "✉ Thiệp mời" trên điện thoại: lên giữa thanh menu (chỗ trống giữa logo và nút nhạc). */
@media (max-width: 760px) {
  body:not(.is-draft) .ic-reopen { top: 7px; bottom: auto; left: 70px; min-height: 44px; padding: 0 12px; }
}

/* Khối trang trí của giao diện VIP (views/public/pro/<khóa>.php, chỉ có trên thiep.site): ẩn mặc định, CSS VIP tự bật. */
.pro-deco { display: none; }

/* ── Nút đổi ngôn ngữ VI | EN (settings.site_lang = both) — máy tính: ngay trên nút nhạc; điện thoại: thanh trên cạnh nút nhạc; nổi trên cả thiệp mời (.ic z 75) ── */
.lang-sw { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(74px + env(safe-area-inset-bottom, 0px)); z-index: 80; display: inline-flex; border-radius: 999px; overflow: hidden;
  background: var(--paper, #fff); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); box-shadow: 0 3px 12px rgba(0,0,0,.14);
  font: 600 .875rem/1 var(--f-ui, system-ui, sans-serif); letter-spacing: .04em; }
/* M1-GUEST-06: vùng chạm ≥44px, chữ ≥14px. */
.lang-sw a { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 8px; color: var(--ink, #333); text-decoration: none; }
/* M1-GUEST-02 — :not(#_) = độ ưu tiên cấp id: thắng luật màu link của giao diện ([data-theme=x] .wd a:not(.btn)…, nạp sau)
   -> nhãn đang chọn luôn chữ trắng trên nền accent (demsao: chữ xanh đậm trên vàng). */
.lang-sw a[aria-current]:not(#_) { background: var(--accent); color: var(--lang-on, #fff); }
/* M2-GUEST-01: màu nhấn SÁNG (bạc hà, oải hương, hoàng hôn, thiệp cưới, điện ảnh) -> chữ trắng chỉ 2,2–3,1:1; dùng mực tối (≥ 5:1 trên cả 5 màu). */
[data-theme="serenity"], [data-theme="lavender"], [data-theme="summer"], [data-theme="thiep"], [data-theme="dienanh"] { --lang-on: #1d1b19; }
.lang-sw a:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
@media (max-width: 760px) {
  .lang-sw { top: 7px; bottom: auto; right: calc(118px + env(safe-area-inset-right, 0px)); }
  .lang-sw a { min-width: 44px; padding: 0 6px; }   /* M2-CARDS-01: ≥ 44px cả chiều ngang */
}
[data-theme="demsao"] .lang-sw a[aria-current]:not(#_) { color: #0d1530; background: var(--gold, #d8b56a); }
/* M1-CARDS-01: thiệp mời đang mở (html.ic-open do invite-card.js đặt) -> ẩn nút VI|EN, không đè lên chữ/nút "+" của thiệp
   (chạm nhầm làm tải lại trang, mất lời chúc đang gõ). Trên bìa phong bì nút vẫn hiện để khách chọn ngôn ngữ. */
/* 04/10 (loop t1 BUG-1): trang nhiều ngôn ngữ -> khách nước ngoài cần đổi ngôn ngữ NGAY trên thiệp đang mở: nút dời lên góc trên phải
   (xa nút +/− và ô nhập ở cuối thiệp), nổi trên thiệp (.ic z 75). */
html.ic-open .lang-sw { top: max(8px, env(safe-area-inset-top, 0px)); bottom: auto; right: max(10px, env(safe-area-inset-right)); z-index: 90; }
/* Nút "✉ Thiệp mời" + VI|EN cùng nằm trên thanh menu điện thoại: màn hẹp chỉ giữ biểu tượng ✉ để hai nút không chồng nhau. */
@media (max-width: 420px) { html:has(.lang-sw) body:not(.is-draft) .ic-reopen { font-size: 0; gap: 0; padding: 0 12px; min-width: 44px; justify-content: center; } html:has(.lang-sw) body:not(.is-draft) .ic-reopen span { font-size: 1.1rem; } }
/* Ngôn ngữ khác tiếng Việt: nhãn đếm ngược (DAYS HOURS MINS SECS / JOURS HEURES…) dài hơn -> bớt giãn chữ để 4 ô vừa màn 360px. */
html:not([lang="vi"]) .wd .countdown span { letter-spacing: .03em; }
@media (max-width: 400px) { html:not([lang="vi"]) .wd .countdown { gap: 8px; } }

/* ── ≥ 3 ngôn ngữ (04/10): nút gọn 🌐 + mã đang xem, bấm mở danh sách (details, không JS). Cùng vị trí nút VI | EN. ── */
details.lang-sw { overflow: visible; }
.lang-sw summary { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 12px 0 10px; cursor: pointer; list-style: none; color: var(--ink, #333); }
.lang-sw summary::-webkit-details-marker { display: none; }
.lang-sw summary span { font-size: .875rem; }
.lang-sw[open] summary { background: var(--accent); color: var(--lang-on, #fff); }
.lang-sw nav { position: absolute; right: 0; bottom: calc(100% + 8px); min-width: 160px; padding: 6px; display: grid; background: var(--paper, #fff); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 14px; box-shadow: 0 8px 28px rgba(0,0,0,.18); }
.lang-sw nav a { justify-items: start; height: 44px; padding: 0 12px; border-radius: 9px; font-weight: 500; letter-spacing: 0; white-space: nowrap; }
.lang-sw nav a[aria-current]:not(#_) { border-radius: 9px; }
@media (max-width: 760px) { .lang-sw nav { bottom: auto; top: calc(100% + 8px); } }
html.ic-open details.lang-sw nav { bottom: auto; top: calc(100% + 8px); }

/* ── Phông chữ Thái / Lào / Trung (04/10): phông trang trí tự host không có các chữ này -> ép phông hệ thống (có sẵn trên
   iOS/Android/Windows/macOS) cho mọi chữ, trừ tên cặp đôi (chữ Latinh). Thái/Lào có dấu trên dưới cao -> giãn dòng rộng hơn. ── */
html[lang="th"] body.wd, html[lang="th"] .wd :is(h1, h2, h3, p, a, span, b, i, li, label, input, button, textarea, select, summary) {
  font-family: "Noto Sans Thai", "Leelawadee UI", "Thonburi", "Tahoma", "Noto Sans", system-ui, sans-serif; }
html[lang="lo"] body.wd, html[lang="lo"] .wd :is(h1, h2, h3, p, a, span, b, i, li, label, input, button, textarea, select, summary) {
  font-family: "Noto Sans Lao", "Lao Sangam MN", "Lao UI", "Phetsarath OT", "Saysettha OT", "Noto Sans", system-ui, sans-serif; }
html[lang="zh"] body.wd, html[lang="zh"] .wd :is(h1, h2, h3, p, a, span, b, i, li, label, input, button, textarea, select, summary) {
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif; }
html:is([lang="th"], [lang="lo"]) .wd { line-height: 1.75; }
html:is([lang="th"], [lang="lo"], [lang="zh"]) .wd :is(.eyebrow, .role, .countdown span, .btn) { letter-spacing: .04em; text-transform: none; }
/* tên cặp đôi và chữ số vẫn dùng phông trang trí của giao diện */
html:is([lang="th"], [lang="lo"], [lang="zh"]) .wd :is(.names, .names *, .dl-d, .dl-y, .countdown b, .cal-g span) { font-family: var(--f-name, var(--f-head)); }
html:is([lang="th"], [lang="lo"], [lang="zh"]) .wd .countdown b { font-family: var(--f-head); }


/* ══════════ QA phone M1 (03/10/2026) ══════════ */
/* M1-GUEST-03 — viewport-fit=cover: chừa tai thỏ / Dynamic Island / thanh Home (env(safe-area-inset-*), = 0 trên máy không có).
   Thanh menu: viền trong suốt (nền vẫn phủ hết chiều rộng) thay vì sửa padding -> không đổi padding riêng của từng giao diện. */
html[data-theme] body.wd .wd-nav { border-left: env(safe-area-inset-left, 0px) solid transparent; border-right: env(safe-area-inset-right, 0px) solid transparent; }
html[data-theme] body.wd .music { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
html[data-theme] body.wd .ic-reopen { left: max(16px, env(safe-area-inset-left)); bottom: max(16px, env(safe-area-inset-bottom)); }
html[data-theme] body.wd .music-hint { right: calc(58px + env(safe-area-inset-right, 0px)); }
@media (max-width: 760px) {
  html[data-theme] body.wd:not(.is-draft) .music { right: calc(68px + env(safe-area-inset-right, 0px)); bottom: auto; }
  html[data-theme] body.wd:not(.is-draft) .ic-reopen { left: calc(70px + env(safe-area-inset-left, 0px)); bottom: auto; }
  html[data-theme] body.wd:not(.is-draft) .music-hint { right: auto; }
}
html[data-theme] body.wd.is-draft .music { bottom: calc(164px + env(safe-area-inset-bottom, 0px)); }
html[data-theme] body.wd.is-draft .ic-reopen { bottom: calc(164px + env(safe-area-inset-bottom, 0px)); }
/* M1-GUEST-04/05 — màn 320px (và chữ 120%): 4 ô đếm ngược chia đều bề rộng thẻ thay vì min-width cố định (4×58 + khe = 268px
   > 248px còn lại trong thẻ) -> thẻ Lễ cưới không còn tràn/cắt; cột lưới minmax(0) để nội dung không nong rộng cột. */
@media (max-width: 400px) {
  .event-row, .ev, .ev:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .wd .countdown { gap: 6px; }
  .wd .countdown div, [data-theme="songhy"] .wd .countdown div, [data-theme="hoangkim"] .wd .countdown div { width: auto; min-width: 0; flex: 1 1 0; padding-left: 2px; padding-right: 2px; }
  .wd .countdown b { font-size: 1.6rem; }
  /* Nút dài ("Xem thêm lời chúc (78)", "Thêm vào lịch"): được xuống dòng, không bao giờ rộng hơn màn. */
  .wd .btn { white-space: normal; max-width: 100%; text-align: center; }
}

/* ══════════ IN TRANG CƯỚI (S1-DESK-03) ══════════
   Ctrl+P / Lưu PDF: trang giấy sáng chữ đen cho mọi giao diện (kể cả giao diện nền tối), bỏ mọi thứ chỉ có nghĩa trên màn hình
   (menu cố định, màn "Mở thiệp", hạt rơi, nhạc, VI|EN, nút, form, đếm ngược, bản đồ nhúng, trang trí VIP), ảnh vừa trang, thẻ không
   bị cắt ngang trang; album in lưới nhỏ. Mục tiêu ~3–4 trang A4. Dùng !important vì phải thắng 20 giao diện nạp sau. */
@media print {
  @page { margin: 12mm; }
  html, body.wd, body.wd * { background: transparent !important; color: #000 !important; text-shadow: none !important; box-shadow: none !important;
    animation: none !important; transition: none !important; filter: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  html, body.wd { background: #fff !important; overflow: visible !important; height: auto !important; }
  /* Lớp trang trí ::before/::after của giao diện (nền tối tràn trang khi khối cha về static, viền nhũ, ánh sáng…): không in */
  body.wd *::before, body.wd *::after { background: none !important; box-shadow: none !important; }
  body.wd :is(.intro, .intro-main, .main-photo, .photo, .save-card, .names, .couple-row, .person, .oval, .event-row, .event-photo, .event-card, .events, .ev, .quote, .quote blockquote, .wd-gallery, .wd-g, .wish-list, .wish, .gift-cards, .gift-card, .wd-foot, section)::before,
  body.wd :is(.intro, .intro-main, .main-photo, .photo, .save-card, .names, .couple-row, .person, .oval, .event-row, .event-photo, .event-card, .events, .ev, .quote, .quote blockquote, .wd-gallery, .wd-g, .wish-list, .wish, .gift-cards, .gift-card, .wd-foot, section)::after { display: none !important; }
  html.has-cover, html.has-cover body { overflow: visible !important; }
  body.wd { font-size: 11pt; line-height: 1.4; }
  body.wd .reveal, html.js-reveal .reveal { opacity: 1 !important; transform: none !important; }
  /* Chỉ có nghĩa trên màn hình */
  body.wd :is(.wd-nav, .wd-cover, .fx, .music, .lang-sw, .ic-reopen, .flash, .lb, .marquee, .pro-deco, .hero-deco, .pm-deco, .orn, .rings, .photowall, .masthead,
    .hd-mark, .ev-map, .countdown, .btn, .btn-row, button, form, .form-thanks, .rsvp-done, .wish-more-row, .music-credit, .music-hint, .quote-bg, .quote::after,
    .cta, .more-albums, .gift-copy, .gift-dl, .gift-hint, .gift-off, .sec-head::before, .ev-card::before, .ev-card::after, .paper::before, .paper::after, .divider::before,
    .pd-wave, .st-sea, .st-sun, .st-dome, .st-bouga, .wd-g::after, .gallery-sec > .center) { display: none !important; }
  /* Mọi khối về dòng chảy thường, không cao cả màn, không dịch chuyển */
  body.wd :is(section, footer, .intro, .intro-main, .main-photo, .photo, .oval, .event-photo, .save-card, .couple-row, .person, .event-row, .event-card, .events, .ev, .ev-card, .quote, blockquote, .wd-foot, .gift-cards, .gift-card, .wish-list, .wish) {
    position: static !important; min-height: 0 !important; height: auto !important; max-width: none !important; width: auto !important; margin: 0 !important;
    transform: none !important; rotate: none !important; translate: none !important; inset: auto !important; opacity: 1 !important; overflow: visible !important; isolation: auto !important; }
  body.wd section, body.wd .wd-foot { padding: 6mm 0 !important; border: 0 !important; break-inside: auto; }
  body.wd :is(.person, .event-card, .ev-card, .wish, .gift-card, .save-card, .quote blockquote) { break-inside: avoid; page-break-inside: avoid; }
  body.wd .sec-head { margin: 0 0 4mm !important; padding: 0 !important; }
  body.wd .sec-head h2, body.wd h2 { font-size: 18pt !important; margin: 0 !important; }
  body.wd .divider { display: none !important; }
  /* Đầu trang: tên + ngày; ảnh chính nhỏ ở giữa */
  body.wd .intro { display: block !important; padding-top: 0 !important; text-align: center; }
  body.wd .intro-main { width: 60mm !important; margin: 0 auto 4mm !important; }
  body.wd .main-photo { aspect-ratio: 3 / 4 !important; border: 1px solid #999 !important; border-radius: 0 !important; width: 100% !important; }
  body.wd .main-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0 !important; }
  body.wd .save-card { padding: 0 !important; text-align: center !important; display: block !important; }
  body.wd .names { font-size: 28pt !important; line-height: 1.15 !important; margin: 2mm 0 !important; display: block !important; }
  body.wd .names .name, body.wd .names .amp { display: inline !important; font-size: inherit !important; }
  body.wd .names .amp { font-size: .7em !important; margin: 0 .2em !important; }
  body.wd :is(.eyebrow, .invitee, .lunar, .date) { font-size: 11pt !important; margin: 1mm 0 !important; letter-spacing: .02em !important; }
  /* Cặp đôi: 2 cột, ảnh bầu dục nhỏ */
  body.wd .couple-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6mm !important; align-items: start !important; }
  body.wd .person { display: block !important; text-align: center !important; }
  body.wd .person .house { display: none !important; }
  body.wd .oval { width: 40mm !important; height: 52mm !important; aspect-ratio: auto !important; margin: 0 auto 2mm !important; border: 1px solid #999 !important; border-radius: 50% !important; }
  body.wd .oval img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50% !important; }
  body.wd .banner { display: block !important; padding: 0 !important; margin: 1mm 0 !important; font-size: 14pt !important; border: 0 !important; border-radius: 0 !important; }
  body.wd .role, body.wd .info { font-size: 10pt !important; max-width: none !important; }
  body.wd .couple-amp, body.wd .constel { display: none !important; }
  /* Lễ cưới: chữ giữa, ảnh lễ nhỏ bên trên */
  body.wd .event-row { display: block !important; text-align: center !important; }
  body.wd .event-photo { width: 45mm !important; margin: 0 auto 3mm !important; aspect-ratio: 3 / 4 !important; border: 1px solid #999 !important; border-radius: 0 !important; }
  body.wd .event-photo img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0 !important; }
  body.wd .event-card { padding: 0 !important; text-align: center !important; }
  body.wd .event-card :is(.lead, .date, .lunar, .ev-k, .ev-names, .dl-wd) { font-size: 11pt !important; margin: 1mm 0 !important; }
  body.wd .date.big { font-size: 14pt !important; }
  body.wd .dlock, body.wd .starchart { display: none !important; }   /* ô ngày trang trí trùng với dòng ngày */
  body.wd .event-card .date.big { display: block !important; }
  body.wd .rsvp { display: none !important; }   /* chỉ còn tiêu đề trống khi form bị ẩn */
  /* Địa điểm: tên nơi + địa chỉ + giờ, không bản đồ */
  body.wd .events { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4mm !important; }
  body.wd .ev { display: block !important; }
  body.wd .ev-card { padding: 3mm !important; border: 1px solid #999 !important; border-radius: 0 !important; text-align: left !important; }
  body.wd .ev-card h3 { font-size: 13pt !important; margin: 0 0 1mm !important; }
  body.wd :is(.ev-place, .ev-addr, .ev-time) { font-size: 10.5pt !important; margin: 0 0 1mm !important; letter-spacing: 0 !important; text-transform: none !important; }
  /* Trích dẫn: chỉ câu chữ */
  body.wd .quote { display: block !important; padding: 4mm 0 !important; text-align: center !important; }
  body.wd .quote blockquote { padding: 0 !important; }
  body.wd .quote blockquote::before { display: none !important; }
  body.wd .quote blockquote p { font-size: 12pt !important; font-style: italic !important; }
  /* Album: lưới 6 cột nhỏ, cùng cỡ, không cắt trang */
  body.wd .wd-gallery { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 2mm !important; max-width: none !important; margin: 0 !important; }
  body.wd .wd-g { aspect-ratio: 1 !important; grid-column: auto !important; grid-row: auto !important; border: 0 !important; border-radius: 0 !important; break-inside: avoid; width: auto !important; height: auto !important; }
  body.wd .wd-g img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 0 !important; transform: none !important; }
  /* Lời chúc: gọn, không khung */
  body.wd .wish-list { display: block !important; column-count: 2; column-gap: 6mm; }
  body.wd .wish { display: block !important; padding: 0 0 2mm !important; margin: 0 0 2mm !important; border: 0 !important; border-left: 2px solid #999 !important; padding-left: 3mm !important; }
  body.wd .wish[hidden] { display: none !important; }   /* lời chúc sau "Xem thêm" không in (chỉ 6 lời mới nhất) */
  body.wd .wish p { font-size: 10pt !important; margin: 0 !important; }
  body.wd .wish cite { font-size: 9.5pt !important; }
  body.wd .wish::before, body.wd .wish::after { display: none !important; }
  /* Mừng cưới: 2 QR cạnh nhau (QR cần đủ lớn để quét từ giấy) */
  body.wd .gift-cards { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 6mm !important; }
  body.wd .gift-card { padding: 3mm !important; border: 1px solid #999 !important; border-radius: 0 !important; text-align: center !important; }
  body.wd .gift-qr { width: 40mm !important; height: 40mm !important; margin: 0 auto 2mm !important; padding: 0 !important; border: 0 !important; }
  body.wd .gift-qr canvas, body.wd .gift-qr img { width: 40mm !important; height: 40mm !important; }
  body.wd :is(.gift-side, .gift-holder, .gift-bank, .gift-acct, .gift-text) { font-size: 10.5pt !important; margin: 0 0 1mm !important; display: block !important; padding: 0 !important; border: 0 !important; }
  /* Chân trang */
  body.wd .wd-foot { text-align: center !important; padding: 4mm 0 0 !important; border-top: 1px solid #999 !important; }
  body.wd .wd-mono { display: none !important; }
  body.wd .wd-foot p { font-size: 10.5pt !important; margin: 0 0 1mm !important; }
  body.wd a { text-decoration: none !important; }
  body.wd a[href]::after { content: none !important; }
  body.wd img { max-width: 100% !important; }
  /* Chủ nhà in bản nháp: không in thanh sửa */
  body.is-draft :is(.ed-bar, .ed-dock, [data-editor]) { display: none !important; }
}

/* ── Dòng bản quyền cuối trang (04/10): chữ thường, link chỉ ở ICON (vùng chạm 44px), màu mờ theo giao diện ── */
.wd-foot .wd-credit, .pub-foot .wd-credit { margin: 22px 0 0; font: .78rem/1.6 var(--f-ui, system-ui, sans-serif) !important; letter-spacing: .02em; color: var(--muted, #8a8078); opacity: .85; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 4px; font-style: normal !important; }
.wd-credit b { font-weight: 600; color: inherit; }
.wd-credit a { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: -12px -8px -12px -6px; color: inherit; opacity: .8; border-radius: 50%; }
.wd-credit a:hover, .wd-credit a:focus-visible { opacity: 1; color: var(--accent); }
.wd-credit-sep { margin: 0 4px; }
body.wd[data-theme="dienanh"] .wd-foot .wd-credit::before { content: none; }