/*
 * custom.css - các chỉnh sửa giao diện riêng cho bản này (màu chữ, căn lề...).
 * Cỡ chữ nằm ở type-scale.css. Cả hai file được tools/build.py gắn vào trang.
 */

/* Form xác nhận tham dự: đoạn mô tả ("Sự hiện diện của bạn là niềm vinh hạnh...") gốc là chữ xám nhạt
   trên nền hồng, rất khó đọc. Đổi sang nâu đỏ đậm (cùng tông màu chủ đạo của thiệp). */
.bg-white\/55 .text-gray-500.mb-6 { color: #3d0c12; }

/* Form xác nhận tham dự: chữ trong ô nhập tên căn giữa (cả chữ gợi ý "Nhập tên của bạn" lẫn chữ gõ vào). */
.bg-white\/55 input[type="text"] { text-align: center; }

/* Bông hoa bên phải thẻ "Thông tin lễ cưới": gốc đặt ở 30% từ đáy thẻ. Thẻ cao thêm khoảng 103px (điện thoại) /
   81px (máy tính) vì khối "Địa điểm dự tiệc", nên cộng bù 70% phần cao thêm để hoa giữ nguyên vị trí so với nội dung. */
.cd-flower-ceremony { bottom: calc(30% + 72px); }
@media (min-width: 768px) {
  .cd-flower-ceremony { bottom: calc(30% + 57px); }
}

/* Bản đồ và nút "Chỉ đường": bản gốc nhỏ (cao 268px) và nút trong suốt, chữ nhỏ nên khó thấy.
   Bản đồ cao hơn, có viền và đổ bóng; nút thành nút đặc màu đỏ rượu (cùng màu chủ đạo), chữ trắng, to, rộng bằng bản đồ. */
iframe[src*="google.com/maps"] {
  width: 100% !important;
  max-width: 100% !important;
  height: 380px !important;
  border: 2px solid rgba(81, 20, 25, 0.45) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 22px rgba(81, 20, 25, 0.2);
}
a[href*="google.com/maps/dir"] {
  width: 100%;
  max-width: 342px;
  justify-content: center;
  background-color: #511419 !important;
  color: #fff7eb !important;
  padding: 15px 28px !important;
  font-size: 19px !important;
  line-height: 1.2;
  border-radius: 999px !important;
  box-shadow: 0 8px 20px rgba(81, 20, 25, 0.35);
}
a[href*="google.com/maps/dir"] svg { width: 24px !important; height: 24px !important; }
@media (min-width: 768px) {
  iframe[src*="google.com/maps"] { max-width: 640px !important; height: 480px !important; }
  a[href*="google.com/maps/dir"] { max-width: 360px; font-size: 20px !important; }
}

/* Xác nhận tham dự: gốc có ba lớp đệm chồng nhau (khung ngoài 20px + khối 16px + thẻ 24px mỗi bên) nên trên điện thoại
   nội dung chỉ rộng ~221px / 390px. Giảm đệm và khoảng cách để form rộng hơn (~280px), vẫn chừa lề ~14px với mép khung. */
@media (max-width: 639px) {
  section:has(> div > .bg-white\/55) { padding: 14px 0 !important; margin-left: -6px; margin-right: -6px; width: calc(100% + 12px); max-width: none; }
  .bg-white\/55 { padding: 16px !important; }
}
.bg-white\/55 form.space-y-4 > * + * { margin-top: 12px !important; }
.bg-white\/55 .text-gray-500.mb-6 { margin-bottom: 14px; }

/* Chân trang: bỏ dòng "♡ <tên miền>" (liên kết quảng bá trang tạo thiệp) */
div:has(> a.text-xs.opacity-50[href*="utm_source=invitation"]) { display: none !important; }

/* Ảnh to full width giữa hai cụm ảnh album (album.json: "wide": true) */
.cd-wide-photo { margin: 14px 0; box-shadow: 0 6px 18px rgba(81, 20, 25, 0.18); }

/* ====================================================================================================
   Chỉnh sửa đợt 2: hoa hai bên album, giờ/ngày tiệc nổi bật, sổ lưu bút, danh sách QR chuyển khoản.
   Các class cd-* do tools/build.py gắn vào giao diện.
   ==================================================================================================== */

/* ---- Hoa trang trí hai bên album ảnh (cd-fl-a*) và cạnh khung sổ lưu bút (cd-fl-g*) ----
   Hoa nằm đè nhẹ lên mép khung ảnh; phần chạy ra ngoài màn hình bị cắt (khối cha overflow-x-clip). */
.cd-fl { z-index: 20; }
.cd-flip { transform: scaleX(-1); }
.cd-fl-a1 { left: -10%;  top: 2.5%; width: 25%; }
.cd-fl-a2 { right: -10%; top: 21%;  width: 25%; }
.cd-fl-a3 { left: -10%;  top: 41%;  width: 25%; }
.cd-fl-a4 { right: -10%; top: 60%;  width: 25%; }
.cd-fl-a5 { left: -10%;  top: 78%;  width: 25%; }
@media (min-width: 768px) {
  .cd-fl-a1, .cd-fl-a3, .cd-fl-a5 { left: -4%; width: 20%; }
  .cd-fl-a2, .cd-fl-a4 { right: -4%; width: 20%; }
}
/* Hoa sổ lưu bút nằm sau khung (z-index thấp hơn khung), chỉ ló ra ở hai mép nên không đè lên chữ */
.cd-fl-g1, .cd-fl-g2, .cd-fl-g3 { z-index: 5; width: 30%; }
.cd-fl-g1 { left: -7%;  top: 3%; }
.cd-fl-g2 { right: -7%; top: 34%; }
.cd-fl-g3 { left: -7%;  top: 66%; }

/* ---- Thẻ "Thông tin tiệc cưới": giờ, thứ, ngày, tháng, năm to và nổi bật ---- */
.cd-party-title { font-size: 21px; letter-spacing: 0.04em; line-height: 1.35; margin-bottom: 2px; }
.cd-party-time.cd-party-time {
  max-width: none !important; width: auto !important; justify-content: center !important; flex-wrap: nowrap; gap: 14px;
  padding: 10px 20px; margin-top: 4px;
  border-top: 1px solid rgba(236, 228, 216, 0.45); border-bottom: 1px solid rgba(236, 228, 216, 0.45);
}
.cd-party-time > span:first-child { font-size: 44px; font-weight: 600; line-height: 1; letter-spacing: 0.02em; color: #fff1d6; }
.cd-party-time > span:last-child { font-size: 20px; font-weight: 600; letter-spacing: 0.12em; color: #f1e7d9; }
.cd-party-day.cd-party-day { font-size: 92px !important; font-weight: 500; line-height: 0.9; color: #fff1d6; }
.cd-party-month.cd-party-month { font-size: 26px !important; font-weight: 600; letter-spacing: 0.12em; }
.cd-party-year.cd-party-year { font-size: 30px !important; letter-spacing: 0.1em; }
@media (min-width: 768px) {
  .cd-party-title { font-size: 26px; }
  .cd-party-time > span:first-child { font-size: 54px; }
  .cd-party-time > span:last-child { font-size: 24px; }
  .cd-party-day.cd-party-day { font-size: 108px !important; }
  .cd-party-month.cd-party-month { font-size: 30px !important; }
  .cd-party-year.cd-party-year { font-size: 34px !important; }
}

/* ---- Sổ lưu bút ---- */
.cd-guestbook {
  margin: 22px 30px 34px; padding: 30px 18px 24px !important;
  background: linear-gradient(180deg, #fcf6ec, #f6ecdd);
  border: 1px solid rgba(81, 20, 25, 0.16); border-radius: 18px;
  box-shadow: 0 10px 28px rgba(81, 20, 25, 0.18), inset 0 0 0 5px rgba(255, 255, 255, 0.5);
}
.cd-guestbook h2 { font-size: 24px !important; letter-spacing: 0.06em; }
.cd-guestbook form { width: 100%; margin-top: 18px; }
.cd-guestbook input[type="text"], .cd-guestbook textarea {
  font-size: 17px !important; line-height: 1.45; padding: 14px 16px; border-width: 1.5px; border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.75) !important; color: #3d0c12 !important;
}
.cd-guestbook input::placeholder, .cd-guestbook textarea::placeholder { color: rgba(81, 20, 25, 0.55); }
.cd-guestbook textarea { min-height: 120px; display: block; }
.cd-guestbook form > div > .mb-4 { margin-bottom: 12px; }
.cd-wish-box { margin-top: 16px; }
.cd-wish-label { font-size: 16px; font-weight: 700; color: #511419; margin-bottom: 10px; text-align: left; }
.cd-wish-hint { display: block; font-size: 14px; font-weight: 400; color: rgba(81, 20, 25, 0.72); margin-top: 2px; }
.cd-wish-chips { display: flex; flex-direction: column; gap: 8px; }
.cd-wish-chip {
  width: 100%; text-align: left; font: inherit; font-size: 15.5px; line-height: 1.35; padding: 11px 14px; border-radius: 12px;
  border: 1px solid rgba(81, 20, 25, 0.3); background: rgba(81, 20, 25, 0.05); color: #511419; cursor: pointer;
  display: flex; align-items: flex-start; gap: 10px; transition: background-color .15s;
}
.cd-wish-chip::before { content: "＋"; flex: none; font-weight: 700; color: #b0864a; line-height: 1.35; }
.cd-wish-chip:active { background: rgba(81, 20, 25, 0.14); }
.cd-wish-chip.on { background: #511419; color: #f6ebdc; border-color: #511419; }
.cd-wish-chip.on::before { content: "✓"; color: #e9cf9a; }
.cd-guestbook form button[type="submit"] { width: 100%; padding: 14px 20px !important; font-size: 18px !important; border-radius: 999px; }
.cd-guestbook form > div > div:last-child { margin-top: 16px !important; display: block; }
.cd-guestbook form > div > div:last-child > div:empty { display: none; }
.cd-guestbook .mt-8 { margin-top: 22px; }

/* ---- Hộp quà mừng: danh sách QR chuyển khoản dạng thẻ ---- */
.cd-gift-list { width: 100%; align-items: stretch !important; gap: 18px !important; }
.cd-qr-card {
  width: 100%; max-width: 360px; margin: 0 auto; background: #fff; border-radius: 20px; padding: 18px 16px 16px;
  border: 1px solid rgba(81, 20, 25, 0.12); box-shadow: 0 8px 22px rgba(81, 20, 25, 0.12);
  display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1 1 280px;
}
.cd-qr-role { display: inline-block; padding: 5px 20px; border-radius: 999px; color: #fff; font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.cd-qr-name { margin: 10px 0 12px; font-size: 21px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.25; }
.cd-qr-box { width: 224px; height: 224px; padding: 8px; border-radius: 16px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); }
.cd-qr-box img, .cd-qr-box canvas, .cd-qr-box svg { width: 100%; height: 100%; object-fit: contain; }
.cd-qr-info { margin-top: 14px; width: 100%; padding: 10px 12px; border-radius: 12px; background: #f6efe6; }
.cd-qr-bank { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 16px; font-weight: 600; }
.cd-qr-bank img { height: 22px; width: auto; max-width: 70px; object-fit: contain; }
.cd-qr-acc { margin-top: 4px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 22px; font-weight: 700; letter-spacing: 0.08em; word-break: break-all; }
.cd-qr-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin-top: 14px; }
.cd-qr-actions > * { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 15px !important; font-weight: 600; padding: 0 10px !important; margin: 0 !important; width: 100%; }
.cd-qr-copy { background: #fff; border: 1.5px solid; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; }
.cd-qr-copy:active { background: #f6efe6; }
@media (min-width: 640px) { .cd-gift-list { flex-direction: row !important; flex-wrap: wrap; justify-content: center; } }
.cd-qr-actions .cd-qr-save { background: #511419 !important; color: #fff7eb !important; border: 1.5px solid #511419 !important; }
.cd-qr-actions .cd-qr-save svg { width: 18px; height: 18px; margin-right: 6px; }

/* ====================================================================================================
   Màn hình đầu thiệp (thẻ "Thân mời ... Mở thiệp" phủ toàn màn hình, class jsx-... của giao diện gốc):
   khung viền vàng, tên đôi lớn, ngày nổi bật, ô tên khách và nút mở thiệp rõ ràng.
   Chỉ dùng CSS (không đổi DOM) nên không ảnh hưởng hydration của React.
   ==================================================================================================== */
[data-landing-screenshot-id="invite-envelope"] {
  background:
    radial-gradient(ellipse at 50% 38%, rgba(201, 162, 74, 0.22), transparent 62%),
    linear-gradient(to bottom right, #6e1a20, #511419, #2e080c) !important;
}
/* lâu đài mờ phía dưới nền */
[data-landing-screenshot-id="invite-envelope"]::before {
  content: ""; position: absolute; left: 50%; bottom: -4%; width: 170%; height: 60%; transform: translateX(-50%);
  background: url(/images/themes/minimalism-dark-red/castle-background.webp) center bottom / contain no-repeat;
  opacity: 0.09; filter: invert(1); pointer-events: none;
}
[data-landing-screenshot-id="invite-envelope"] [class*="w-[310px]"] { width: min(344px, 90vw) !important; }
@media (min-width: 768px) { [data-landing-screenshot-id="invite-envelope"] [class*="w-[310px]"] { width: 460px !important; } }

/* khung viền vàng bên trong thẻ */
[data-landing-screenshot-id="invite-envelope"] .rounded-lg.relative::after {
  content: ""; position: absolute; inset: 9px; border: 1px solid rgba(176, 134, 74, 0.6); border-radius: 5px; pointer-events: none; z-index: 11;
}
/* hoa góc thẻ rõ và lớn hơn */
/* Hoa góc thẻ: giữ cỡ và vị trí gốc, nhưng bỏ phần cắt (clip-path / overflow-hidden) của lớp nền thẻ để hoa chìa ra ngoài mép thẻ, đè lên nền đỏ */
[data-landing-screenshot-id="invite-envelope"] .rounded-lg.relative > div[style*="clip-path"] { overflow: visible !important; clip-path: none !important; }

/* nội dung: chừa chỗ cho ảnh vòm, gọn lại để vừa màn hình thấp */
[data-landing-screenshot-id="invite-envelope"] .relative.z-10.text-center { padding: 82px 26px 44px !important; }
/* ấn tín hình tim ở đầu thẻ */
[data-landing-screenshot-id="invite-envelope"] [style*="seal-pulse"] {
  top: 44px !important; width: 52px !important; height: 52px !important;
  border: 2px solid #c9a24a;
}
[data-landing-screenshot-id="invite-envelope"] [style*="seal-pulse"] svg { width: 24px; height: 24px; }

/* tên đôi */
[data-landing-screenshot-id="invite-envelope"] h1 { font-size: 40px !important; line-height: 1.12 !important; margin-top: 8px; margin-bottom: 8px !important; }
[data-landing-screenshot-id="invite-envelope"] h1 > span:nth-child(2) { color: #b0864a; font-size: 24px !important; font-style: italic; }
@media (min-width: 768px) { [data-landing-screenshot-id="invite-envelope"] h1 { font-size: 50px !important; } }
/* đường kẻ trang trí màu vàng */
[data-landing-screenshot-id="invite-envelope"] .gap-3.mb-2 > div { width: 56px; background: linear-gradient(to right, transparent, #b0864a) !important; }
[data-landing-screenshot-id="invite-envelope"] .gap-3.mb-2 > div:last-child { background: linear-gradient(to left, transparent, #b0864a) !important; }
[data-landing-screenshot-id="invite-envelope"] .gap-3.mb-2 > span { color: #b0864a !important; opacity: 1 !important; }
/* ngày */
[data-landing-screenshot-id="invite-envelope"] .gap-3.mb-2 + div {
  font-size: 22px !important; font-weight: 600; letter-spacing: 0.04em; color: #511419 !important; margin-bottom: 14px !important;
}
/* "Thân mời" + tên khách */
[data-landing-screenshot-id="invite-envelope"] .mb-6.mx-auto { margin-bottom: 20px !important; }
[data-landing-screenshot-id="invite-envelope"] .mb-6.mx-auto > p:first-child { font-size: 14px !important; letter-spacing: 0.12em; text-transform: uppercase; color: #8a6a3a !important; font-weight: 600; }
[data-landing-screenshot-id="invite-envelope"] .inline-block.rounded-xl {
  background: linear-gradient(180deg, #fffaf0, #f6ecdb) !important; border: 1.5px solid #b0864a; box-shadow: 0 6px 16px rgba(81, 20, 25, 0.14); padding: 10px 26px !important;
}
[data-landing-screenshot-id="invite-envelope"] .inline-block.rounded-xl h2 { font-size: 24px !important; line-height: 1.2; }
[data-landing-screenshot-id="invite-envelope"] .inline-block.rounded-xl + p { font-size: 17px !important; line-height: 1.45; margin-top: 4px; }
/* nút mở thiệp */
[data-landing-screenshot-id="invite-envelope"] a[href="?open=1"] {
  padding: 14px 44px !important; font-size: 20px !important; letter-spacing: 0.04em;
  background: linear-gradient(180deg, #6a1b22, #4a1017) !important; border: 1.5px solid #c9a24a; box-shadow: 0 8px 20px rgba(81, 20, 25, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
/* màn hình thấp (điện thoại nhỏ): thu ảnh vòm và khoảng cách để cả thẻ vẫn nằm gọn trong màn hình */
[data-landing-screenshot-id="invite-envelope"] .inline-block.rounded-xl + p { text-wrap: balance; }
@media (max-height: 760px) {
  [data-landing-screenshot-id="invite-envelope"] .relative.z-10.text-center { padding-top: 66px !important; padding-bottom: 28px !important; }
  [data-landing-screenshot-id="invite-envelope"] [style*="seal-pulse"] { top: 36px !important; width: 44px !important; height: 44px !important; }
  [data-landing-screenshot-id="invite-envelope"] h1 { font-size: 31px !important; margin-top: 4px; margin-bottom: 4px !important; }
  [data-landing-screenshot-id="invite-envelope"] h1 > span:nth-child(2) { font-size: 20px !important; }
  [data-landing-screenshot-id="invite-envelope"] .gap-3.mb-2 + div { font-size: 20px !important; margin-bottom: 8px !important; }
  [data-landing-screenshot-id="invite-envelope"] .mb-6.mx-auto { margin-bottom: 12px !important; }
  [data-landing-screenshot-id="invite-envelope"] .mb-6.mx-auto > p:first-child { font-size: 13px !important; }
  [data-landing-screenshot-id="invite-envelope"] .inline-block.rounded-xl { padding: 6px 22px !important; }
  [data-landing-screenshot-id="invite-envelope"] .inline-block.rounded-xl h2 { font-size: 21px !important; }
  [data-landing-screenshot-id="invite-envelope"] .inline-block.rounded-xl + p { font-size: 15.5px !important; line-height: 1.35; }
  [data-landing-screenshot-id="invite-envelope"] a[href="?open=1"] { padding: 11px 38px !important; font-size: 18px !important; }
}

/* ---- Màn hình đầu thiệp, đợt 2: dòng giờ · thứ, nút "Mở thiệp" to và rõ hơn ---- */
[data-landing-screenshot-id="invite-envelope"] .cd-cover-time {
  display: block; margin-bottom: 4px; font-size: 19px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #9a6f2e;
}
[data-landing-screenshot-id="invite-envelope"] .cd-cover-time::before,
[data-landing-screenshot-id="invite-envelope"] .cd-cover-time::after { content: "—"; margin: 0 8px; opacity: 0.6; }
[data-landing-screenshot-id="invite-envelope"] a[href="?open=1"] {
  min-width: 232px; min-height: 60px; padding: 0 36px !important; font-size: 23px !important; font-weight: 700 !important; letter-spacing: 0.05em; gap: 10px;
  border: 2px solid #e2c384 !important; color: #fff6e4 !important;
  background: linear-gradient(180deg, #7a1f27 0%, #511419 55%, #3a0b10 100%) !important;
  box-shadow: 0 10px 24px rgba(81, 20, 25, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 0 rgba(201, 162, 74, 0.55) !important;
  animation: cd-open-pulse 2.4s ease-out infinite;
}
[data-landing-screenshot-id="invite-envelope"] a[href="?open=1"]:active { transform: scale(0.97); }
@keyframes cd-open-pulse {
  0%   { box-shadow: 0 10px 24px rgba(81, 20, 25, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 0 rgba(201, 162, 74, 0.55); }
  70%  { box-shadow: 0 10px 24px rgba(81, 20, 25, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 14px rgba(201, 162, 74, 0); }
  100% { box-shadow: 0 10px 24px rgba(81, 20, 25, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 0 0 rgba(201, 162, 74, 0); }
}
@media (max-height: 760px) {
  [data-landing-screenshot-id="invite-envelope"] .cd-cover-time { font-size: 16px; }
  [data-landing-screenshot-id="invite-envelope"] a[href="?open=1"] { min-height: 50px; font-size: 20px !important; min-width: 220px; }
}
@media (prefers-reduced-motion: reduce) { [data-landing-screenshot-id="invite-envelope"] a[href="?open=1"] { animation: none; } }
/* Máy tính: hoa gốc cao 280px chạm vào tên đôi, hạ còn 220px (điện thoại giữ cỡ gốc 144px) */
@media (min-width: 768px) {
  [data-landing-screenshot-id="invite-envelope"] img[src*="flower2-decoration"] { height: 220px !important; }
}

/* Chuyển cảnh từ màn hình đầu thiệp sang thiệp: nền đỏ mờ dần để lộ trang nền be phía sau (mã gắn animation nằm trong tools/build.py) */
@keyframes cd-cover-fade { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { [data-landing-screenshot-id="invite-envelope"] { animation-duration: 0.01s !important; } }

/* ---- Hộp quà mừng: chọn cô dâu / chú rể trước ---- */
.cd-pick { width: 100%; max-width: 360px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding: 6px 0 10px; }
.cd-pick-title { text-align: center; font-size: 19px; font-weight: 600; color: #511419; line-height: 1.35; margin-bottom: 4px; }
.cd-pick-btn {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "role go" "name go"; align-items: center; text-align: left; width: 100%;
  padding: 18px 20px; border-radius: 18px; border: 1.5px solid rgba(81, 20, 25, 0.28); cursor: pointer; font: inherit; color: #511419;
  background: linear-gradient(180deg, #fff, #f8f0e6); box-shadow: 0 6px 16px rgba(81, 20, 25, 0.12);
}
.cd-pick-btn:active { background: #f1e4d6; transform: scale(0.99); }
.cd-pick-role { grid-area: role; font-size: 22px; font-weight: 700; letter-spacing: 0.04em; }
.cd-pick-name { grid-area: name; font-size: 15px; opacity: 0.75; margin-top: 2px; letter-spacing: 0.04em; }
.cd-pick-go { grid-area: go; font-size: 34px; line-height: 1; color: #b0864a; }
.cd-pick-shown { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cd-pick-back { align-self: flex-start; background: none; border: 0; font: inherit; font-size: 16px; font-weight: 600; color: #511419; padding: 6px 4px; cursor: pointer; }

/* ---- Xác nhận tham dự: màn hình "đã xác nhận" ---- */
.cd-rsvp-summary { display: inline-block; margin: 2px 0 12px; padding: 8px 18px; border-radius: 999px; background: rgba(31, 122, 77, 0.12); color: #17633d; font-size: 17px; font-weight: 600; }
.cd-rsvp-edit { display: block; margin: 16px auto 0; padding: 10px 22px; border-radius: 999px; border: 1.5px solid rgba(81, 20, 25, 0.45); background: transparent; color: #511419; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.cd-rsvp-edit:active { background: rgba(81, 20, 25, 0.08); }
.cd-rsvp-summary { background: #fff; border: 1.5px solid rgba(23, 99, 61, 0.35); }
.bg-white\/55 .text-center .text-gray-600.space-y-1 > * { display: block; }
.bg-white\/55 .text-center .text-gray-600 { color: #3d0c12; }

/* Khung xác nhận tham dự: nền trong suốt 55% trên nền đỏ ra màu hồng đục, chữ chìm. Dùng nền kem đặc, chữ nâu đỏ đậm. */
.bg-white\/55 { background: rgba(255, 250, 243, 0.97) !important; border: 1px solid rgba(176, 134, 74, 0.55) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.bg-white\/55 .text-gray-900, .bg-white\/55 h3, .bg-white\/55 h2 { color: #3d0c12 !important; }
.bg-white\/55 .text-gray-600, .bg-white\/55 .text-gray-500, .bg-white\/55 .text-gray-700 { color: #4a1a20 !important; }
.cd-rsvp-summary { color: #0f5a33 !important; background: #e6f4ea !important; border-color: rgba(15, 90, 51, 0.45) !important; font-size: 18px; }
.cd-rsvp-summary { white-space: nowrap; font-size: 17px !important; padding: 8px 16px !important; }
.cd-rsvp-summary { font-size: 16px !important; padding: 8px 12px !important; max-width: 100%; }

/* Ảnh trong cụm 5 ảnh của album: đổ bóng nhẹ cho nổi trên nền giấy */
.group.relative.cursor-pointer.overflow-hidden.rounded-xl { box-shadow: 0 3px 10px rgba(81, 20, 25, 0.2), 0 1px 3px rgba(81, 20, 25, 0.12); }

/* ====================================================================================================
   Hệ chữ thống nhất (chỉ 3 font + 1 font trang trí, thay cho ~10 kiểu lẫn lộn và các font hệ thống tự thay thế):
     Viaoda Libre         tên đôi
     Cormorant Garamond   tiêu đề mục, giờ / ngày / tháng / năm
     Lora                 mọi đoạn chữ còn lại (nội dung, form, nút, hộp quà, lời chúc)
     The Nautigal         trang trí: dấu & và tiêu đề tháng trong lịch
   Độ đậm 300 (quá mảnh) nâng lên 400. Trang quản trị khách mời không dùng file này.
   ==================================================================================================== */
@font-face { font-family: "CD Lora"; src: url(/fonts/Lora-Variable.ttf) format("truetype"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "CD Cormorant"; src: url(/fonts/CormorantGaramond-Variable.ttf) format("truetype"); font-weight: 300 700; font-style: normal; font-display: swap; }
:root { --f-body: "CD Lora", "Lora", Georgia, serif; --f-head: "CD Cormorant", "Cormorant Garamond", Georgia, serif; --f-name: "Viaoda Libre", "EB Garamond", serif; --f-script: "The Nautigal", cursive; }

/* nền: mọi chữ trong thiệp, màn hình đầu thiệp và hộp quà mừng dùng Lora */
[data-invitation-page] *, [data-landing-screenshot-id="invite-envelope"] *, dialog.modal * { font-family: var(--f-body) !important; }
/* dấu & và tiêu đề tháng trong lịch */
[data-invitation-page] [style*="Nautigal"], [data-invitation-page] [style*="Ms Madi"],
[data-landing-screenshot-id="invite-envelope"] h1 > span:nth-child(2) { font-family: var(--f-script) !important; }
[data-landing-screenshot-id="invite-envelope"] h1 > span:nth-child(2) { font-size: 34px !important; font-style: normal; }
/* tên đôi */
[data-invitation-page] [style*="Viaoda"], [data-landing-screenshot-id="invite-envelope"] [style*="Viaoda"] { font-family: var(--f-name) !important; }
/* tiêu đề mục */
[data-invitation-page] h2, dialog.modal h2, .cd-party-title, .cd-pick-title, .cd-wish-label {
  font-family: var(--f-head) !important; font-weight: 700 !important; letter-spacing: 0.05em;
}
[data-invitation-page] h2, dialog.modal h2 { font-size: 26px !important; }
.cd-party-title { font-size: 20px !important; font-weight: 600 !important; letter-spacing: 0.18em !important; opacity: 0.88; }
[data-invitation-page] h2:not([class]) { font-size: 22px !important; font-weight: 600 !important; letter-spacing: 0.04em; }
.cd-pick-title { font-size: 24px !important; }
.cd-wish-label { font-size: 20px !important; letter-spacing: 0.03em; }
.cd-wish-hint { font-family: var(--f-body) !important; font-weight: 400 !important; }
/* giờ, thứ, ngày, tháng, năm của thẻ tiệc cưới */
.cd-party-time > span, .cd-party-day, .cd-party-month, .cd-party-year { font-family: var(--f-head) !important; font-variant-numeric: lining-nums; font-weight: 700 !important; }
.cd-party-time > span:first-child { font-size: 52px !important; }
.cd-party-time > span:last-child { font-size: 22px !important; }
.cd-party-day.cd-party-day { font-size: 100px !important; }
.cd-party-month.cd-party-month { font-size: 30px !important; }
.cd-party-year.cd-party-year { font-size: 32px !important; font-weight: 600 !important; }
/* độ đậm: bỏ chữ mảnh 300 */
[data-invitation-page] .font-light, [data-landing-screenshot-id="invite-envelope"] .font-light, dialog.modal .font-light,
[data-invitation-page] [style*="font-weight: 300"], [data-landing-screenshot-id="invite-envelope"] [style*="font-weight: 300"] { font-weight: 400 !important; }
/* số tài khoản: cùng font Lora, số đều nhau */
.cd-qr-acc { font-family: var(--f-body) !important; font-variant-numeric: lining-nums tabular-nums; }
.cd-wish-chip, .cd-wish-chip *, .cd-pick-btn, .cd-pick-btn *, .cd-qr-card *, .cd-rsvp-summary, .cd-rsvp-edit { font-family: var(--f-body) !important; }
.cd-wish-chip { font-size: 16px; }
.cd-pick-role { font-family: var(--f-head) !important; font-size: 26px !important; font-weight: 700 !important; }
.cd-qr-role, .cd-qr-name { font-family: var(--f-head) !important; font-weight: 700 !important; }
.cd-qr-name { font-size: 24px; }
.cd-qr-role { font-size: 15px; }