/* Thiệp cưới Cường & Vân — bám số đo mẫu "Minimalism Đỏ Đậm" (đo 28/09/2026, khung 375px) */
:root {
  --do: #511419;          /* đỏ đô */
  --do-dam: #590310;      /* chữ Save The Date */
  --kem: #ece4d8;         /* chữ trên nền đỏ */
  --kem-7: rgba(236, 228, 216, .7);
  --nen: #fff7eb;         /* nền trang */
  --vang-sao: #b58b2f;
  --f-ten: "Viaoda Libre", "Times New Roman", serif;
  --f-tay: "The Nautigal", cursive;
  --f-save: "Cormorant Garamond", "Times New Roman", serif;
  --f-times: "Times New Roman", Tinos, serif;
  --f-bask: Baskerville, "Baskerville Old Face", Tinos, "Times New Roman", serif;
  --f-lora: Lora, "Times New Roman", serif;
  --bong-the: 4px 4px 10px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #f4eee6; color: var(--do); font-family: var(--f-times); -webkit-font-smoothing: antialiased; }
body.dang-dong { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
p { margin: 0; }
@keyframes troi { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.troi { display: block; animation: troi 5.5s ease-in-out infinite; will-change: transform; }

/* ---------------------------------------------------------------- BÌA */
.bia {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: linear-gradient(to bottom right, #6e1a20, #511419, #380a0e);
  transition: opacity .8s ease .55s, visibility 0s linear 1.4s;
}
.bia.da-mo { opacity: 0; visibility: hidden; pointer-events: none; }
.bia-tim { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.bia-tim svg { position: absolute; top: -30px; width: 1em; height: 1em; fill: currentColor; animation: roi var(--t, 22s) ease-in-out var(--tre, 0s) infinite; }
@keyframes roi {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  8% { opacity: .75; }
  50% { transform: translate(var(--lac, 20px), 55vh) rotate(25deg); }
  92% { opacity: .6; }
  100% { transform: translate(0, 112vh) rotate(-15deg); opacity: 0; }
}
.bia-khung { position: relative; z-index: 10; width: 310px; transition: transform 1s cubic-bezier(.6, -.1, .7, .25), opacity .7s ease .3s; }
.bia.da-mo .bia-khung { transform: translateY(-110vh) rotate(-4deg); opacity: 0; }
.bia-huy {
  position: absolute; left: 50%; top: 50px; z-index: 20; width: 56px; height: 56px; border-radius: 50%;
  transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 30%, #511419, #330000);
  box-shadow: 0 4px 20px rgba(81, 20, 25, .5), inset 0 1px 2px rgba(255, 255, 255, .15);
}
.bia-huy svg { width: 28px; height: 28px; fill: #f3e8de; animation: nhip 2.4s ease-in-out infinite; }
@keyframes nhip { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 30% { transform: scale(1); } 45% { transform: scale(1.06); } }
.bia-the { position: relative; border-radius: 8px; box-shadow: 0 25px 60px -12px rgba(0, 0, 0, .45), 0 8px 24px rgba(0, 0, 0, .2), 0 0 40px rgba(81, 20, 25, .15); }
.bia-nen { position: absolute; inset: 0; overflow: hidden; border-radius: 8px; background: rgba(255, 250, 243, .96); border: 1px solid rgba(81, 20, 25, .15); }
.bia-hoa { position: absolute; height: 144px; width: auto; max-width: none; opacity: .8; pointer-events: none; }
.bia-hoa--tren { top: -5%; left: -10px; transform: translateX(-6%) rotate(25deg); }
.bia-hoa--duoi { bottom: -5%; right: -10px; transform: translateX(6%) scaleX(-1) rotate(-25deg); }
.bia-noi { position: relative; z-index: 10; padding: 112px 24px 56px; text-align: center; }
.bia-ten { margin: 0 0 8px; display: flex; flex-direction: column; align-items: center; color: var(--do); font: 400 30px/1.25 var(--f-ten); }
.bia-ten .va { font: 400 18px/1 var(--f-bask); }
.bia-gach { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; color: var(--do); }
.bia-gach i { width: 40px; height: 1px; background: linear-gradient(to right, transparent, var(--do)); }
.bia-gach i:last-child { transform: scaleX(-1); }
.bia-gach span { font-size: 14px; opacity: .7; }
.bia-ngay, .bia-loimoi { font: 300 18px/1.5 var(--f-lora); color: rgba(81, 20, 25, .72); }
.bia-loimoi { margin-top: 18px; }
.bia-khach { font: 400 20px/1.35 var(--f-lora); color: var(--do); min-height: 4px; }
.nut-mo {
  margin-top: 22px; border: 0; border-radius: 999px; padding: 10px 32px;
  background: var(--do); color: #f3e8de; font: 600 18px/28px var(--f-lora);
  box-shadow: 0 4px 14px rgba(81, 20, 25, .35); transition: transform .2s;
}
.nut-mo:active { transform: scale(.97); }
.tim-bung { position: fixed; z-index: 60; left: var(--x); top: var(--y); width: var(--c); height: var(--c); fill: var(--mau); pointer-events: none; animation: bung 1.5s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes bung {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(1); opacity: 0; }
}

/* ---------------------------------------------------------------- KHUNG TRANG */
.ngoai { display: flex; justify-content: center; overflow-x: clip; }
.trang { position: relative; isolation: isolate; width: 100%; max-width: 480px; overflow: hidden; background: var(--nen); color: var(--do); }
.trang-giay { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: url(../img/giay-canva.webp) center top / 100% auto repeat-y; mix-blend-mode: multiply; opacity: .5; }
.lau-dai { position: absolute; left: 50%; max-width: none; opacity: .18; mix-blend-mode: multiply; transform: translateX(-50%); pointer-events: none; object-fit: contain; }
.khoi-lau { position: relative; z-index: 10; overflow-x: clip; }
.hien-dan { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s ease; }
.hien-dan.hien { opacity: 1; transform: none; }
.td { position: relative; z-index: 10; margin: 0; text-align: center; text-transform: uppercase; font: 700 20px/1.3 var(--f-times); letter-spacing: .03em; color: var(--kem); }
.td--do { color: var(--do); }

/* ---------------------------------------------------------------- HERO */
.hero { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; overflow-x: clip; padding: 60px 36px 56px; text-align: center; }
.save { position: relative; z-index: 10; font: 600 15px var(--f-save); letter-spacing: .16em; text-transform: uppercase; color: var(--do-dam); }
.phong-bi { position: relative; z-index: 10; margin-top: 96px; width: 82%; max-width: 330px; }
.pb-khung { position: relative; aspect-ratio: 860 / 1200; }
.pb-sau, .pb-truoc { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.pb-sau { z-index: 10; filter: drop-shadow(0 12px 16px rgba(58, 12, 18, .28)); }
.pb-truoc { z-index: 30; }
.pb-troi-anh { position: absolute; left: 31%; top: 6%; z-index: 20; width: 60%; animation: troi 6.5s ease-in-out .4s infinite; }
.pb-anh { aspect-ratio: 221 / 309; transform: rotate(12deg); border: 7px solid #fff; background: #fff; box-shadow: 2px 2px 4px rgba(0, 0, 0, .25); }
.pb-anh > * { width: 100%; height: 100%; }
.pb-anh .anh { object-position: 50% 30%; }
.pb-hoa { position: absolute; left: -10%; top: -2%; z-index: 25; width: 50%; pointer-events: none; }
.pb-hoa .troi { animation-duration: 5s; }
.pb-hoa img { display: block; width: 100%; transform: rotate(-17deg); filter: drop-shadow(3px 4px 3px rgba(0, 0, 0, .3)); }
.hero-ten { position: relative; z-index: 10; margin-top: 64px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.hero-ten p { font: 400 clamp(38px, 11vw, 46px)/1 var(--f-ten); color: var(--do); }
.va-mo { position: absolute; top: 37%; transform: translateY(-50%); font: 400 92px/1 var(--f-tay); color: rgba(81, 20, 25, .15); pointer-events: none; }
.anh { display: block; width: 100%; height: 100%; object-fit: cover; }
.anh-trong {
  display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; height: 100%;
  background: linear-gradient(150deg, #e0d3c2, #bfa892 60%, #957b6d); color: rgba(255, 255, 255, .95);
  font: 400 11px/1.5 var(--f-times); letter-spacing: .14em; text-transform: uppercase;
}
.anh-trong b { display: block; font: 400 24px var(--f-tay); letter-spacing: 0; text-transform: none; }

/* ---------------------------------------------------------------- THƯ TAY (khách có lời nhắn riêng) */
.s-thu { position: relative; z-index: 10; padding: 0 30px 40px; }
.thu { position: relative; padding: 24px 22px 20px; background: #fffaf2; border-radius: 3px; box-shadow: 3px 4px 10px rgba(0, 0, 0, .18); rotate: -1.5deg; }
.thu::before { content: ""; position: absolute; top: -9px; left: 50%; width: 72px; height: 18px; translate: -50% 0; background: rgba(201, 162, 74, .35); rotate: 2deg; }
.thu-gui { font: italic 400 14px var(--f-times); color: rgba(81, 20, 25, .75); margin-bottom: 8px; }
.thu-noi { font: italic 400 16px/1.65 var(--f-times); }
.thu-ky { margin-top: 10px; text-align: right; font: 400 26px/1 var(--f-tay); }

/* ---------------------------------------------------------------- THẺ ĐỎ */
.khoi-the { position: relative; z-index: 10; width: 88%; max-width: 420px; margin: 0 auto; }
.the-do { position: relative; overflow: hidden; border-radius: 10px; padding: 36px 20px; text-align: center; color: var(--kem); background: var(--do); box-shadow: var(--bong-the); }
.the-do::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: url(../img/giay-canva.webp) center / cover; mix-blend-mode: multiply; opacity: .4; pointer-events: none; }
.the-noi { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.hoa-noi { position: absolute; z-index: 20; pointer-events: none; transform: translateY(40px); }
.hoa-noi img { display: block; width: 100%; filter: drop-shadow(3px 4px 3px rgba(0, 0, 0, .3)); }
.hoa-noi--le { right: -22%; bottom: 30%; width: 40%; }
.hoa-noi--tiec { left: -16%; top: 10%; width: 32%; }
.hoa-noi--lich { right: -16%; top: -12%; width: 30%; }
.hoa-noi--le img { transform: rotate(-12deg); }
.hoa-noi--tiec img { transform: scaleX(-1) rotate(-8deg); }
.hoa-noi--lich img { transform: rotate(8deg); }

/* đếm ngược */
.s-dem { margin-bottom: 40px; }
.the-do--dem { padding: 30px 18px 26px; }
.the-do--dem .the-noi { gap: 18px; }
.dong-ho { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; }
.dong-ho div { padding: 12px 0 9px; border: 1px solid rgba(236, 228, 216, .28); border-radius: 8px; }
.dong-ho b { display: block; font: 400 30px/1 var(--f-times); color: var(--kem); }
.dong-ho span { display: block; margin-top: 6px; font: 400 11px var(--f-bask); letter-spacing: .12em; text-transform: uppercase; color: var(--kem-7); }
.nho-mo { font: 400 12px var(--f-bask); letter-spacing: .12em; text-transform: uppercase; color: var(--kem-7); }

/* thông tin lễ cưới */
.the-do--le { border-radius: 13px; padding: 36px 20px 40px; }
.hai-ben { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; column-gap: 18px; align-items: center; font-family: var(--f-bask); }
.ben { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.ben .ong-ba { font-size: 12px; color: var(--kem-7); }
.ben .cha-me { font-size: 12px; font-weight: 600; color: var(--kem); overflow-wrap: anywhere; }
.ben .dia-chi { margin-top: 4px; font-size: 10px; line-height: 1.25; color: var(--kem-7); }
.hai-ben .vach { width: 1px; height: 50px; background: rgba(236, 228, 216, .4); }
.bao-tin { font: 400 12px/1.45 var(--f-bask); color: var(--kem); white-space: pre-line; }
.doi-ten { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.doi-ten h3 { margin: 0; width: 80%; min-height: 80px; display: flex; align-items: center; justify-content: center; white-space: nowrap; font: 400 31px/52px var(--f-ten); color: var(--kem); }
.doi-ten .thu-bac { font: 400 10px var(--f-bask); letter-spacing: .14em; text-transform: uppercase; color: var(--kem-7); }
.doi-ten .va { font: 400 35px/1 "Ms Madi", var(--f-tay); color: var(--kem); }
.cu-hanh-khoi { display: flex; flex-direction: column; align-items: center; gap: 16px; font-family: var(--f-bask); }
.cu-hanh { font-size: 16px; line-height: 1.5; color: var(--kem-7); white-space: pre-line; text-transform: uppercase; }
.dong-gio { display: flex; justify-content: space-between; gap: 12px; min-width: max-content; font-size: 13px; text-transform: uppercase; white-space: nowrap; color: var(--kem-7); }
.dong-gio--le { width: 180px; }
.dong-gio--tiec { width: 130px; }
.ngay-lon { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--kem); font-family: var(--f-times); }
.ngay-lon .so { font-size: 40px; line-height: 1; }
.ngay-lon i { width: 1px; height: 46px; background: rgba(236, 228, 216, .45); }
.ngay-lon .thang { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; }
.ngay-lon .thang span { font-size: 14px; text-transform: uppercase; }
.the-do--tiec .ngay-lon .thang span:first-child { font-size: 12px; }
.the-do--tiec .ngay-lon .thang span:last-child { font-size: 18px; }
.am-lich { font: 400 12px var(--f-bask); letter-spacing: .08em; text-transform: uppercase; color: var(--kem-7); }

/* thông tin tiệc */
.s-tiec { margin-bottom: 16px; }
.the-do--tiec .khoi-tiec { display: flex; flex-direction: column; align-items: center; gap: 16px; font-family: var(--f-bask); color: var(--kem); }
.tiec-luc { margin: 0; font: 400 20px/1.35 var(--f-bask); text-transform: uppercase; color: var(--kem); }
.moi-rieng { font: italic 400 13px/1.6 var(--f-bask); color: var(--kem-7); max-width: 280px; }
.hai-gio { display: flex; justify-content: center; gap: 32px; margin-top: 16px; }
.hai-gio > div { display: flex; flex-direction: column; align-items: center; }
.hai-gio span { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--kem-7); }
.hai-gio b { margin-top: 4px; font-size: 18px; font-weight: 500; color: var(--kem); }
.lich-thang { margin-top: 12px; width: fit-content; max-width: 100%; overflow: hidden; border-radius: 10px; padding: 8px 16px 16px; background: var(--kem); }
.lt-trong { width: 280px; color: var(--do); }
.lt-dau { padding: 10px 0; text-align: center; font: 400 25px var(--f-tay); border-bottom: 1px solid rgba(81, 20, 25, .27); }
.lt-thu { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 2px solid var(--do); }
.lt-thu span { padding: 6px 0; text-align: center; font: 500 10px var(--f-times); opacity: .6; }
.lt-luoi { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 2px; padding: 8px 4px; }
.lt-luoi > span { display: flex; align-items: center; justify-content: center; height: 30px; font: 400 12px var(--f-times); }
.lt-chon { position: relative; width: 26px; height: 24px; display: flex; align-items: center; justify-content: center; }
.lt-chon svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--do); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .15)); }
.lt-chon b { position: relative; font: 700 11px var(--f-times); color: #fff; }
.them-lich { margin-top: 12px; color: var(--kem); font: 400 14px var(--f-times); text-decoration: underline; text-underline-offset: 4px; }
.so-ban { font: 400 13px var(--f-bask); color: var(--kem-7); }
.nut-xacnhan { margin-top: 4px; border: 0; border-radius: 999px; padding: 8px 24px; background: var(--kem); color: var(--do); font: 400 14px var(--f-bask); letter-spacing: .025em; transition: transform .2s; }
.nut-xacnhan:hover { transform: scale(1.03); }

/* địa điểm */
.s-diadiem { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; padding: 32px 24px; }
.s-diadiem h3 { margin: 0; text-align: center; text-transform: uppercase; font: 700 16px var(--f-times); letter-spacing: .03em; color: var(--do); }
.dd-diachi { margin-top: 8px; max-width: 260px; text-align: center; font: 400 12px/1.625 var(--f-bask); color: rgba(81, 20, 25, .8); }
.dd-khoi { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
.ban-do { margin-top: 12px; width: 100%; max-width: 338px; height: 268px; border: 0; border-radius: 15px; overflow: hidden; }
.chi-duong { display: inline-flex; align-items: center; gap: 8px; padding: 8px 20px; border-radius: 999px; color: rgba(81, 20, 25, .8); font: 600 14px var(--f-bask); text-decoration: none; }
.chi-duong svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- ALBUM */
.s-album { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; padding: 40px 24px; }
.album { position: relative; z-index: 10; margin-top: 20px; width: 100%; max-width: 380px; height: 340px; perspective: 1000px; touch-action: pan-y; user-select: none; display: flex; align-items: center; justify-content: center; }
.album .the-anh { position: absolute; height: 92%; aspect-ratio: 2 / 3; margin: 0; border-radius: 16px; overflow: hidden; cursor: pointer; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1); transition: transform 1.1s ease-in-out, opacity 1.1s ease-in-out; }
.album .the-anh.giua { box-shadow: 0 0 0 2px rgba(255, 255, 255, .3), 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1); }
.album-cham { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.album-cham button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--do); opacity: .25; transition: all .3s; }
.album-cham button.dang { width: 24px; opacity: .7; }

/* ---------------------------------------------------------------- LỊCH TRÌNH */
.s-lichtrinh { margin: 16px auto; }
.the-do--lich { padding: 36px 24px; }
.the-do--lich .the-noi { gap: 16px; padding: 0 8px; }
.dong-tg { position: relative; margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) 16px minmax(0, 1fr); align-items: center; column-gap: 24px; row-gap: 32px; width: 100%; max-width: 460px; font-family: var(--f-times); }
.dong-tg li { display: contents; }
.tg-gio { padding-top: 2px; text-align: right; font-size: 16px; letter-spacing: .025em; font-variant-numeric: tabular-nums; color: var(--kem); }
.tg-gio .co-icon { position: relative; display: inline-block; }
.tg-icon { position: absolute; right: 100%; top: 50%; margin-right: 26px; transform: translateY(-50%); width: 44px; height: 44px; object-fit: contain; }
.tg-cham { position: relative; display: flex; align-items: center; justify-content: center; align-self: stretch; }
.tg-cham::before { content: ""; position: absolute; left: 50%; width: 1px; transform: translateX(-50%); top: -32px; bottom: -32px; background: rgba(236, 228, 216, .4); }
.dong-tg li:first-child .tg-cham::before { top: 50%; }
.dong-tg li:last-child .tg-cham::before { bottom: 50%; }
.tg-cham b { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--kem); box-shadow: 0 0 0 2px rgba(236, 228, 216, .13); }
.tg-viec { font-size: 13px; color: var(--kem-7); text-align: left; }

/* ---------------------------------------------------------------- SỔ LƯU BÚT */
.khoi-luubut { position: relative; z-index: 10; overflow-x: clip; }
.giay-note { position: absolute; left: 50%; top: -15px; width: 112%; max-width: 620px; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, .18)); }
.s-luubut { position: relative; z-index: 10; padding: 74px 24px 32px; font-family: var(--f-times); color: var(--do); }
.s-luubut .td { transform: translateY(16px); }
.form-chuc { margin: 24px auto 0; padding: 16px; max-width: 280px; }
.form-chuc input, .form-chuc textarea {
  display: block; width: 100%; padding: 12px 16px; border: 1px solid var(--do); border-radius: 8px; background: transparent;
  color: var(--do); font: 400 14px var(--f-times); resize: none; outline: none;
}
.form-chuc input { margin-bottom: 16px; }
.form-chuc textarea { height: 56px; }
.form-chuc ::placeholder { color: rgba(81, 20, 25, .5); }
.form-dong { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; }
.nut-goiy { padding: 8px; border: 0; border-radius: 8px; background: rgba(81, 20, 25, .1); font-size: 16px; line-height: 1; transition: transform .2s; }
.nut-goiy:hover { transform: scale(1.1); }
.nut-gui { border: 0; border-radius: 999px; padding: 8px 24px; background: var(--do); color: #ded9d7; font: 600 14px var(--f-times); transition: transform .2s; }
.nut-gui:hover { transform: scale(1.05); }
.ds-chuc { margin: calc(min(100vw, 480px) * 1.33 - 330px) auto 0; max-height: 500px; overflow-y: auto; padding-right: 8px; display: flex; flex-direction: column; gap: 12px; }
.chuc { padding: 16px; border: 1px solid rgba(81, 20, 25, .333); border-radius: 8px; background: rgba(255, 255, 255, .55); font-size: 14px; }
.chuc-dau { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.chuc-dau b { font-weight: 600; }
.chuc-dau time { font-size: 12px; opacity: .7; white-space: nowrap; }
.chuc p { margin-top: 8px; line-height: 1.625; }

/* ---------------------------------------------------------------- HỘP QUÀ */
.s-qua { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; padding: 32px 24px 40px; }
.s-qua .td { margin-bottom: 16px; }
.hop-qua { position: relative; width: 250px; height: 357px; padding: 0 0 48px; border: 0; background: none; display: flex; align-items: flex-end; justify-content: center; }
.lap-lanh { position: absolute; z-index: 20; color: var(--vang-sao); pointer-events: none; animation: lanh 2.4s ease-in-out infinite; }
.l1 { top: 6%; left: 12%; font-size: 20.9px; } .l2 { top: 14%; right: 8%; font-size: 15.2px; animation-delay: -.6s; }
.l3 { top: 34%; left: 3%; font-size: 13.3px; animation-delay: -1.2s; } .l4 { top: 24%; right: 3%; font-size: 13.3px; animation-delay: -1.8s; }
@keyframes lanh { 0%, 100% { opacity: .25; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(20deg); } }
.bao-khung { position: relative; width: 190px; height: 275px; animation: troi 4s ease-in-out infinite; }
.bao-bong { position: absolute; left: 50%; bottom: -6px; width: 125px; height: 11px; margin-left: -62.5px; border-radius: 50%; background: rgba(0, 0, 0, .45); filter: blur(4px); animation: bong 4s ease-in-out infinite; }
@keyframes bong { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.85); opacity: .7; } }
.bao { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transform-origin: 50% 100%; }
.bao--sau { z-index: 1; transform: translateX(20%) translateY(-10%) scale(-.8, .8) rotate(-15deg); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .18)); }
.bao--truoc { z-index: 2; rotate: -10deg; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .22)); }
.nhan-mo { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); white-space: nowrap; font: 500 12px var(--f-times); color: var(--do); animation: moMo 2s ease-in-out infinite; }
@keyframes moMo { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------------------------------------------------------------- CẢM ƠN */
.s-camon { position: relative; z-index: 10; padding: 0 24px 40px; text-align: center; }
.loi-cam-on { font: 400 12px/1.5 var(--f-times); color: var(--do); }
.ky-ten { margin-top: 18px; font: 400 12px var(--f-times); opacity: .5; }

/* ---------------------------------------------------------------- NHẠC */
.nut-nhac {
  position: fixed; z-index: 40; right: max(14px, calc(50vw - 240px + 14px)); bottom: 22px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 30% 30%, #6a1a24, #300a10);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35), 0 0 0 3px rgba(255, 255, 255, .15);
}
.cot-nhac { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.cot-nhac i { width: 3px; background: #f3e8de; border-radius: 1px; transform-origin: bottom; animation: nhay 1s ease-in-out infinite; }
.cot-nhac i:nth-child(1) { height: 6px; } .cot-nhac i:nth-child(2) { height: 14px; animation-delay: -.3s; }
.cot-nhac i:nth-child(3) { height: 9px; animation-delay: -.6s; } .cot-nhac i:nth-child(4) { height: 12px; animation-delay: -.15s; }
@keyframes nhay { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
.nut-nhac.tat .cot-nhac i { animation-play-state: paused; opacity: .5; }

/* ---------------------------------------------------------------- HỘP THOẠI */
.lop-phu { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, .4); animation: hienDan .25s ease; }
@keyframes hienDan { from { opacity: 0; } }
.hop { position: relative; width: min(100%, 420px); max-height: 90vh; overflow-y: auto; border-radius: 16px; background: #fff; animation: truotLen .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes truotLen { from { transform: translateY(24px); opacity: 0; } }
.nut-dong { position: absolute; right: 12px; top: 12px; z-index: 5; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .06); font-size: 20px; line-height: 1; color: #555; }
.nut-dong--sang { background: transparent; color: rgba(255, 255, 255, .85); }
.hop--xn { padding: 24px 20px 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: #1f1f1f; }
.hop--xn h3 { margin: 0 0 6px; font-size: 22px; font-weight: 700; }
.hop-phu { font-size: 14px; line-height: 1.5; color: #6b6b6b; margin-bottom: 18px; padding-right: 20px; }
.nhan-o { display: block; margin: 14px 0 8px; font-size: 15px; font-weight: 600; }
.hop--xn input, .hop--xn textarea { width: 100%; padding: 12px 14px; border: 1px solid #e3e3e3; border-radius: 12px; font-size: 15px; font-family: inherit; resize: none; outline: none; }
.hop--xn input:focus, .hop--xn textarea:focus { border-color: #511419; }
.chon-den { display: grid; gap: 8px; }
.chon-den input { position: absolute; opacity: 0; pointer-events: none; }
.chon-den span { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid #ececec; border-radius: 12px; background: #fafafa; font-size: 15px; transition: .2s; }
.chon-den i { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: #e9e9e9; color: #777; font-style: normal; font-size: 13px; }
.chon-den input:checked + span { border-color: #22a55a; background: #f1fbf4; }
.chon-den input:checked + span i { background: #22a55a; color: #fff; }
.chon-den input[value="khong"]:checked + span { border-color: #b3b3b3; background: #f5f5f5; }
.chon-den input[value="khong"]:checked + span i { background: #8c8c8c; }
.so-nguoi { display: flex; align-items: center; justify-content: space-between; }
.buoc { display: flex; align-items: center; gap: 14px; }
.buoc button { width: 34px; height: 34px; border: 1px solid #dcdcdc; border-radius: 50%; background: #fff; font-size: 18px; }
.buoc b { min-width: 18px; text-align: center; font-size: 17px; }
.toi-da { font-size: 12px; color: #8a8a8a; margin-top: -4px; }
.nut-xn { width: 100%; margin-top: 18px; padding: 14px; border: 0; border-radius: 12px; background: #efe3d6; color: #511419; font-weight: 700; font-size: 15px; }
.han-xn { margin-top: 10px; text-align: center; font-size: 12px; color: #8a8a8a; }
.cam-on-xn { padding: 26px 0 8px; text-align: center; }
.cam-on-xn svg { width: 46px; height: 46px; fill: #511419; animation: nhip 2.4s ease-in-out infinite; }

.lop-phu--day { align-items: flex-end; padding: 0; }
.hop--qua { width: min(100%, 512px); border-radius: 16px 16px 0 0; background: var(--nen); max-height: 90vh; }
.qua-dau { position: relative; padding: 24px 24px 16px; text-align: center; background: var(--do); }
.qua-dau h3 { margin: 0; font: 700 20px var(--f-times); letter-spacing: .03em; text-transform: uppercase; color: #fff; text-shadow: 1px 1px 2px rgba(0, 0, 0, .2); }
.qua-ds { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px 16px 28px; color: var(--do); font-family: var(--f-times); }
.qua-the { display: flex; flex-direction: column; align-items: center; max-width: 180px; }
.qua-the h4 { margin: 0 0 8px; min-height: 2rem; font-size: 12px; font-weight: 500; text-align: center; }
.qua-qr { width: 168px; min-height: 128px; padding: 6px; border-radius: 12px; background: #fff; border: 2px solid rgba(81, 20, 25, .125); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1); display: flex; align-items: center; justify-content: center; }
.qua-qr img { display: block; width: 100%; height: auto; border-radius: 8px; }
.qua-qr .cho { font: italic 400 11px/1.4 var(--f-times); text-align: center; color: rgba(81, 20, 25, .6); }
.qua-tt { margin-top: 8px; text-align: center; font-size: 10px; line-height: 1.5; }
.qua-tt b { font-weight: 600; }
.qua-tt .so-tk { font-family: ui-monospace, Menlo, monospace; }
.qua-nut { display: flex; gap: 6px; margin-top: 6px; }
.qua-nut button, .qua-nut a { padding: 4px 8px; border: 0; border-radius: 999px; background: rgba(81, 20, 25, .082); color: var(--do); font: 500 10px var(--f-times); text-decoration: none; }

/* xem ảnh lớn */
.xem-anh { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; padding: 40px 8px 16px; background: rgba(0, 0, 0, .85); animation: hienDan .25s ease; }
.xa-dem { position: absolute; top: 8px; left: 8px; padding: 4px 8px; border-radius: 999px; background: rgba(0, 0, 0, .4); color: #fff; font: 400 14px var(--f-times); }
.xa-dong { top: 8px; right: 8px; font-size: 20px; }
.xa-giua { position: relative; flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; padding: 0 32px; }
.xa-khung { height: 100%; max-height: 72vh; aspect-ratio: 2 / 3; max-width: 100%; }
.xa-khung > * { width: 100%; height: 100%; border-radius: 12px; object-fit: contain; }
.xa-nut { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 28px; }
.xa-nut[data-xa="-1"] { left: 0; } .xa-nut[data-xa="1"] { right: 0; }
.xa-thumb { flex-shrink: 0; display: flex; gap: 8px; margin-top: 12px; padding: 8px; max-width: 90vw; overflow-x: auto; border-radius: 8px; background: rgba(0, 0, 0, .3); scrollbar-width: none; }
.xa-thumb button { flex-shrink: 0; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 6px; overflow: hidden; opacity: .6; }
.xa-thumb button.dang { opacity: 1; outline: 2px solid var(--do); outline-offset: 2px; }
.xa-thumb .anh-trong b { font-size: 12px; }

/* thông báo nhỏ */
.thong-bao { position: fixed; left: 50%; bottom: 84px; z-index: 90; max-width: min(90vw, 380px); padding: 10px 18px; border-radius: 999px; background: rgba(40, 8, 12, .92); color: #f3e8de; font: 400 14px var(--f-times); text-align: center; opacity: 0; transform: translate(-50%, 12px); transition: .35s; pointer-events: none; }
.thong-bao.hien { opacity: 1; transform: translate(-50%, 0); }

/* thanh bản nháp */
.thanh-nhap { position: fixed; z-index: 55; left: 50%; top: 0; width: min(100%, 480px); translate: -50% 0; padding: 5px 10px; background: rgba(201, 162, 74, .96); color: #3a0c12; font: 600 11.5px/1.5 var(--f-times); text-align: center; }
.thanh-nhap a { color: #3a0c12; margin: 0 2px; }
.thanh-nhap a.dang { font-weight: 800; text-decoration: none; background: rgba(255, 255, 255, .45); border-radius: 6px; padding: 0 4px; }

/* sau ngày cưới */
body.sau-cuoi .chi-truoc-cuoi { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }
}

/* ---------- 10/10/2026 sửa sau vòng soát (thiệp nhà gái): chỉ sửa chức năng + vùng bấm, giữ dáng mẫu ---------- */
.hop { overflow-x: hidden; }
.chon-den label { position: relative; display: block; }                       /* radio ẩn từng chiếm 100% rộng → hộp trượt ngang 25px */
.chon-den input { width: 1px; height: 1px; left: 0; top: 0; padding: 0; }
.nut-xacnhan, .nut-gui { min-height: 44px; }
.chi-duong { min-height: 44px; }
.them-lich { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
.buoc button { width: 44px; height: 44px; }
.nut-dong { width: 44px; height: 44px; right: 6px; top: 6px; }
.nut-goiy { min-width: 44px; min-height: 44px; background: #fff; box-shadow: 0 1px 4px rgba(81, 20, 25, .18); }
.nut-xn { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -8px 14px #fff; }  /* màn thấp: nút Gửi luôn thấy, không phải đoán cuộn */
.han-xn { font-size: 13px; color: #6f6f6f; }
.xn-loi { margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: #fff3f0; color: #8a1c1c; font-size: 14px; line-height: 1.45; }
.nut-sua { margin-top: 14px; min-height: 44px; padding: 0 18px; border: 1px solid #e3d5c5; border-radius: 999px; background: #fff; color: #511419; font-size: 14px; }
.hoa-noi--tiec { left: -24%; }                                                 /* hoa từng che chữ "T" của tiêu đề tiệc */
/* hộp quà: số tài khoản & nút phải đọc/bấm được (người lớn tuổi chép STK) */
.qua-tt { font-size: 13px; }
.qua-tt .so-tk { font-size: 17px; font-weight: 700; letter-spacing: .04em; }
.qua-nut { flex-wrap: wrap; justify-content: center; }
.qua-nut button, .qua-nut a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 14px; }