/* ==========================================================
   GIẤY SAGE DẬP NỔI
   Nền xanh sage như giấy mỹ thuật, hạt giấy li ti, viền & lá ô liu dập nổi (đổ bóng sáng/tối),
   chữ màu mực ô liu đậm in chìm vào giấy.
   Bản nền tối cũ được lưu trong thư mục ban-cu/.
   ========================================================== */
:root {
  --bg: #9da890;          /* giấy nền trang (màu dự phòng) */
  /* Nền đổi màu theo ảnh: gần ảnh rừng → xanh, gần ảnh studio nền trắng → kem */
  --deep: #3d5a31;       /* xanh lá đậm lấy từ cỏ ở mép dưới ảnh bìa / ảnh rừng */
  --green: #9da890;
  --cream: #e8e4d5;
  --sage: #8c9f7e;        /* xanh nhạt: đáy ảnh bìa tan vào màu này, đầu trang 2 bắt đầu từ đây rồi chuyển dần sang kem */
  --paper: #bcc2ae;       /* giấy thẻ (sáng hơn nền) */
  --paper-2: #c8cdbb;
  --outer: #6f7a64;       /* nền ngoài cột thiệp trên máy tính */
  --text: #2f3a2b;        /* mực ô liu đậm */
  --muted: #4f5b49;
  --accent: #56653f;      /* xanh ô liu điểm nhấn */
  --hi: rgba(255, 255, 255, .55);    /* ánh sáng của nét dập nổi */
  --lo: rgba(34, 44, 30, .26);       /* bóng của nét dập nổi */
  --serif: "EB Garamond", Georgia, serif;
  --display: "Cormorant Garamond", Georgia, serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* hạt giấy: chấm tối + chấm sáng li ti */
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .22 0 0 0 0 .15 0 0 0 1.6 -.92'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.5 -.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* nét dập nổi dùng chung */
  --emboss: drop-shadow(-1px -1px 0 var(--hi)) drop-shadow(1px 1.4px .6px var(--lo));
  --raised: -1px -1px 0 var(--hi), 1px 1px 0 var(--lo);
  --pressed-text: 0 1px 0 rgba(255, 255, 255, .42);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--outer);
  color: var(--text);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
}
img { display: block; max-width: 100%; }
a { color: inherit; }

/* Trang dạng cột điện thoại, giữa màn hình trên máy tính */
.page {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  background:
    var(--grain-dark), var(--grain-light),
    url("images/watercolor.jpg") 0 0 / 100% auto repeat,   /* vệt loang màu nước */
    var(--tone-gradient, var(--bg));
  background-blend-mode: normal, normal, soft-light, normal;
  overflow: hidden;
  overflow: clip;      /* cắt phần trang trí tràn mép mà không cho trang bị cuộn ngang khi bấm nút slider */
  text-shadow: var(--pressed-text);
  box-shadow: 0 0 60px rgba(0,0,0,.25);
}
.page > * { position: relative; z-index: 1; }

.big-date, .time-line, .timeline b, .calendar, .hero-date, .mono, .section-title, .eyebrow, .banner p { font-variant-numeric: lining-nums; }

/* Chữ hoa nhỏ giãn rộng */
.eyebrow { font-family: var(--display); font-size: 13px; font-weight: 600; letter-spacing: .34em; padding-left: .34em; color: var(--accent); }
.caps { font-family: var(--display); letter-spacing: .16em; font-size: 15px; font-weight: 600; text-align: center; }
.caps.small { font-size: 14px; color: var(--muted); }

/* ===== Cành lá ô liu dập nổi ===== */
.olive { position: absolute; pointer-events: none; color: var(--bg); filter: var(--emboss); z-index: 0; }
.card .olive { color: var(--paper); }
/* bóng lá mờ như nắng xuyên qua cành */
.leaf-shadow {
  position: absolute; pointer-events: none; z-index: 0;
  color: #1d2719; opacity: .16; filter: blur(5px);
  transform-origin: 50% 0;
  animation: sway 9s ease-in-out infinite alternate;
}
@keyframes sway { from { transform: rotate(var(--r, 0deg)) translateX(0); } to { transform: rotate(calc(var(--r, 0deg) + 3deg)) translateX(6px); } }

/* ===== 1. Bìa toàn màn hình ===== */
.hero {
  position: relative;
  height: 100vh; height: 100svh;
  min-height: 560px; max-height: 920px;
  display: flex; flex-direction: column; justify-content: space-between;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  color: #f6f3ea;
  text-shadow: 0 2px 18px rgba(0,0,0,.25);
}
.hero-media { position: absolute; left: 0; right: 0; top: -15%; height: 130%; z-index: -2; will-change: transform; }
.hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 53% 85%;
  animation: heroZoom 10s var(--ease) both;
}
@keyframes heroZoom { from { transform: scale(1.14); } to { transform: scale(1); } }
.hero::after {   /* cỏ ở mép dưới ảnh chảy dần thành màu xanh lá đậm của nền, không phủ trắng */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom,
    rgba(20,30,20,.25), transparent 28%,
    transparent 52%,
    color-mix(in srgb, var(--sage) 9%, transparent) 64%,
    color-mix(in srgb, var(--sage) 27%, transparent) 78%,
    color-mix(in srgb, var(--sage) 48%, transparent) 91%,
    var(--sage) 100%);   /* tan vào xanh sage nhạt của đầu trang 2; mép cuối giữ đặc để liền với nền */
}
/* Ảnh bìa KHÔNG phủ hạt giấy (người dùng muốn vùng mờ ở đáy ảnh "trong", không đốm).
   Hạt giấy chỉ có ở nền trang từ sau ảnh bìa trở xuống (.page). */
.hero .eyebrow { color: #efe6cf; font-size: 16px; }
.hero-top { padding: 68px 16px 0; }
.cover-names {
  font-family: var(--display);
  font-size: 25px; font-weight: 500; letter-spacing: .12em; padding-left: .12em; line-height: 1.25;
  margin-top: 14px;
}
.cover-names .amp {
  display: block;
  font-style: italic; font-weight: 500;
  font-size: 26px; letter-spacing: 0; padding: 0; color: #efe6cf;
  margin: 4px 0 2px;
}
.hero-bottom { padding: 0 0 26px; }
.hero-date { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: .4em; padding-left: .4em; }
.scroll-hint {
  width: 12px; height: 12px; margin: 14px auto 0;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(6px) rotate(45deg); } }

/* Chữ trên bìa hiện lần lượt khi mở trang */
.intro { opacity: 0; transform: translateY(18px); filter: blur(6px); animation: introIn 1.4s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes introIn { to { opacity: 1; transform: none; filter: none; } }

/* ===== Khối nội dung ===== */
.section { position: relative; padding: 60px 24px; text-align: center; }
.section > :not(.olive):not(.leaf-shadow) { position: relative; z-index: 1; }
.section-title {
  font-family: var(--display);
  font-size: 22px; font-weight: 600; letter-spacing: .24em; padding-left: .24em;
  margin-bottom: 26px;
}
.section-title::after {   /* gạch nhỏ dập chìm */
  content: ""; display: block; width: 36px; height: 2px; margin: 12px auto 0;
  background: var(--accent); opacity: .5; border-radius: 2px;
  box-shadow: 0 1px 0 var(--hi);
}
.eyebrow + .section-title { margin-top: 8px; }
.hero + .section { padding-top: 84px; }

/* Chữ tự chuyển sáng khi nằm trên vùng nền xanh đậm (script.js gắn class on-dark) */
.on-dark { color: #f1ede2; text-shadow: 0 1px 2px rgba(0,0,0,.25); transition: color .3s; }
.on-dark h3, .parents.on-dark h3 { color: #f4ebcb !important; text-shadow: 0 1px 3px rgba(0,0,0,.35); }

.parents {   /* hai nhà cùng hàng; nới rộng ra sát mép để tên viết hoa có chỗ */
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
  font-size: 15.5px; white-space: nowrap;
  margin: 0 -18px 56px;
}
.parents h3 { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .2em; color: var(--text); margin-bottom: 6px; }   /* to & đậm hơn (trước: 14px, màu --accent) */
.parents > div { text-align: center; }   /* căn giữa tên cả hai nhà */
/* Viết hoa toàn bộ "Ông/Bà" và tên. Cỡ chữ to nhất mà tên dài nhất ("ÔNG HOÀNG MẠNH THÔNG")
   vẫn nằm gọn trong một cột: ~12.7px ở máy 375px, tăng dần theo màn hình, tối đa 15.5px */
.parents p { text-transform: uppercase; letter-spacing: 0; font-size: min(15.5px, 3.4vw); }

/* ===== Thẻ giấy dập nổi: viền vòm hai đầu + gờ nổi + đường hạt cườm ===== */
.card {
  position: relative;
  padding: 62px 18px 56px;
  border-radius: 50% 50% 50% 50% / 76px 76px 76px 76px;
  background: var(--grain-dark), var(--grain-light), var(--paper);
  box-shadow:
    -1px -1px 0 var(--hi), 1px 1px 0 var(--lo),            /* mép giấy nổi */
    0 22px 34px -20px rgba(30, 40, 25, .45);               /* bóng đổ mềm */
}
.card::before {   /* gờ nổi */
  content: ""; position: absolute; inset: 9px; border-radius: inherit; pointer-events: none;
  box-shadow: inset 1px 1px 0 var(--lo), inset -1px -1px 0 var(--hi), -1px -1px 0 var(--hi), 1px 1px 0 var(--lo);
}
.card::after {    /* đường hạt cườm */
  content: ""; position: absolute; inset: 17px; border-radius: inherit; pointer-events: none;
  border: 2.5px dotted rgba(255,255,255,.55);
  filter: drop-shadow(.8px .8px 0 var(--lo));
}
.card > :not(.olive) { position: relative; z-index: 1; }
.card .olive.tr { width: 56px; height: 150px; top: 20px; right: 8px; transform: rotate(24deg); }
.card .olive.bl { width: 56px; height: 150px; bottom: 14px; left: 8px; transform: rotate(204deg); }

.mono {
  display: flex; justify-content: center; align-items: center; gap: 12px;
  font-family: var(--display); font-size: 50px; font-weight: 500; line-height: 1;
  margin-bottom: 26px;
}
.mono i { width: 1.5px; height: 52px; background: var(--accent); opacity: .7; transform: rotate(18deg); box-shadow: 1px 0 0 var(--hi); }

.couple { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: .08em; padding-left: .08em; margin-top: 20px; line-height: 1.2; }
/* "và" giữa tên cô dâu chú rể: đôi tim xanh đậm theo thiệp mẫu —
   tim trái nhỏ, tim phải to hơn đè lên, ngăn bằng viền màu giấy; hai mũi chụm vào giữa */
.and { display: flex; justify-content: center; align-items: flex-end; color: var(--deep); margin: 16px 0 -8px; line-height: 0; }
.and svg { overflow: visible; filter: drop-shadow(0 1px 0 rgba(255,255,255,.4)); }
.and svg:first-child { width: 13px; height: 13px; transform: rotate(-26deg); margin-bottom: 1px; }
.and svg:last-child  { width: 15px; height: 15px; transform: rotate(28deg); margin-left: -4px; position: relative; }
.and svg:last-child path { stroke: var(--paper); stroke-width: 2.6; paint-order: stroke; stroke-linejoin: round; }
.divider {   /* rãnh dập chìm có viên hạt nổi ở giữa */
  position: relative; width: 62%; height: 2px; margin: 38px auto 34px;
  background: linear-gradient(90deg, transparent, var(--lo), transparent);
  box-shadow: 0 1px 0 var(--hi);
}
.divider::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%;
  background: var(--paper); transform: translate(-50%, -50%);
  box-shadow: var(--raised);
}
.ceremony + .ceremony { margin-top: 34px; }
.time-line { font-family: var(--display); white-space: nowrap; font-size: 18px; font-weight: 700; margin-top: 8px; letter-spacing: .04em; }
.time-line b { font-weight: 400; color: var(--accent); margin: 0 4px; }
.time-line.big { margin-top: 22px; }
.lunar { font-family: var(--display); font-weight: 500; font-size: 18px; font-style: italic; color: var(--accent); }
.addr { font-size: 16px; margin-top: 6px; color: var(--muted); }
/* Nút mở Google Maps ("Xem bản đồ", "Chỉ đường"): nút đặc nổi bật, có ghim bản đồ */
.map-link, .pin {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; padding: 10px 22px 9px 18px;
  font-family: var(--display); font-size: 14px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; color: #f6f3ea;
  background: color-mix(in srgb, var(--accent) 62%, var(--paper));   /* xanh ô liu dịu, hoà với giấy (trước: --accent đặc) */
  border-radius: 40px;
  text-shadow: 0 -1px 0 rgba(0,0,0,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(30,40,25,.18), 0 8px 14px -9px rgba(30,40,25,.45);
  transition: filter .3s, transform .1s, box-shadow .1s;
}
.map-link::before {   /* ghim bản đồ (cùng hình với nút Chỉ đường) */
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.map-link:hover, .pin:hover { filter: brightness(1.08); }
.map-link:active, .pin:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.25); }

.invite .invite-head { margin-bottom: 14px; line-height: 1.7; }
.venue { font-family: var(--display); font-size: 34px; font-weight: 600; letter-spacing: .12em; padding-left: .12em; margin-top: 22px; line-height: 1.1; }
.venue-sub { font-family: var(--display); font-weight: 700; letter-spacing: .5em; padding-left: .5em; font-size: 13px; color: var(--accent); margin-top: 8px; }
.hall { font-size: 16.5px; margin-top: 14px; }
.pin { margin-top: 22px; padding: 12px 26px 11px 20px; font-size: 15px; }   /* nút chính tới nơi tổ chức tiệc: to hơn một chút */
.pin svg { width: 18px; height: 18px; flex: none; }
.honor { font-size: 16px; margin-top: 28px; color: var(--muted); font-style: italic; }
.closing { font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: .5em; padding-left: .5em; margin-top: 16px; color: var(--accent); }

/* ===== Ảnh dán trên tấm giấy nổi ===== */
.frame { position: relative; margin: 10px 30px; }
.frame-img {
  overflow: hidden; padding: 10px;
  background: var(--grain-dark), var(--paper-2);
  border-radius: 3px;
  box-shadow: var(--raised), 0 24px 36px -22px rgba(30,40,25,.5);
}
.frame-img img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1px; transform: scale(1.1); transition: transform 2.2s var(--ease); }
.frame.in .frame-img img { transform: scale(1); }
.frame.reveal { opacity: 1; filter: none; transform: none; clip-path: inset(10% 8% 10% 8%); transition: clip-path 1.6s var(--ease); }
.frame.reveal.in { clip-path: inset(-40px); }

/* ===== Slider ảnh: ảnh giữa to, ảnh trước/sau ló ra hai bên, nhỏ và mờ hơn ===== */
.slider { position: relative; margin: 6px 0 0; }
.slides {
  position: relative;   /* để offsetLeft của từng ảnh tính theo khung slider */
  display: flex; align-items: center;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  padding: 26px 13%;                 /* chừa chỗ để ảnh đầu/cuối cũng nằm được ở giữa */
}
.slides::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 100%;          /* = 74% bề ngang trang, phần còn lại để ảnh trước/sau ló ra */
  scroll-snap-align: center;
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 26px 36px -20px rgba(30,40,25,.6);
  transform-origin: 50% 50%;
  will-change: transform;  /* chỉ transform đổi theo từng khung → GPU xử lý, không vẽ lại */
  cursor: pointer;
  transition: filter .45s ease;
}
/* ảnh hai bên: nhoè và tối — bật/tắt bằng class, CSS tự chuyển mượt, không tính lại mỗi khung */
.slide.side { filter: blur(2.2px) brightness(.8); }
.slides.animating { scroll-snap-type: none; }   /* tắt hút ảnh trong lúc tự chạy hoạt ảnh */
.slide img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }   /* ảnh dọc giữ khung 2:3, không viền */
.slide img.landscape { aspect-ratio: 3 / 2; }   /* ảnh ngang giữ nguyên khung ngang, không cắt */
.slide-nav {
  position: absolute; top: calc(50% - 14px); transform: translateY(-50%); z-index: 20;
  width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(244, 241, 230, .82); color: var(--text);
  font-family: var(--display); font-size: 28px; line-height: 1; padding-bottom: 3px;
  box-shadow: var(--raised), 0 6px 14px -6px rgba(30,40,25,.5);
  backdrop-filter: blur(4px); cursor: pointer; text-shadow: none;
  transition: background .2s;
}
.slide-nav:hover { background: rgba(244, 241, 230, .95); }
.slide-nav.prev { left: calc(13% - 20px); }
.slide-nav.next { right: calc(13% - 20px); }

/* ===== Ảnh tràn viền, mép nhoè tan vào thiệp ===== */
.bleed {
  position: relative;
  height: 100vh; height: 100svh; min-height: 520px; max-height: 880px;
  margin: 24px 0 0;
}
.bleed-blur {   /* bản nhoè to hơn ảnh, loang ra trên và dưới */
  position: absolute; left: -8%; top: -14%; width: 116%; height: 128%;
  object-fit: cover; object-position: 50% 75%;
  filter: blur(26px) saturate(1.1);
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
          mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}
.bleed-img {    /* ảnh nét ở giữa, mép trên/dưới mờ dần sang bản nhoè */
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 75%;
  -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(transparent, #000 20%, #000 80%, transparent);
  transform: scale(1.06); transition: transform 2.4s var(--ease);
}
.bleed.in .bleed-img { transform: scale(1); }

/* ===== Ba ảnh: 1 ngang ở trên, 2 dọc chồng nhẹ lên phía dưới — giữ nguyên khung gốc, không cắt ===== */
.trio {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start;
  padding: 8px 14px 0;
}
.trio > .lace-wrap:nth-child(1) { grid-column: 1 / -1; width: 92%; justify-self: center; z-index: 1; }
.trio > .lace-wrap:nth-child(2) { margin-top: -30px; z-index: 2; }
.trio > .lace-wrap:nth-child(3) { margin-top: 8px; z-index: 2; }
.trio > .lace-wrap:nth-child(1) img { aspect-ratio: 3 / 2; }
.trio > .lace-wrap:nth-child(2) img,
.trio > .lace-wrap:nth-child(3) img { aspect-ratio: 2 / 3; }

/* ===== Khung ren trắng cổ điển: mép vỏ sò (scallop) + hoa văn ren + đường chỉ quanh ảnh ===== */
.lace-wrap { position: relative; }
.lace {
  --r: 4px;                       /* bán kính mỗi vòng vỏ sò */
  position: relative;
  padding: 11px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cg fill='none' stroke='white' stroke-opacity='.45' stroke-width='.45'%3E%3Cpath d='M0 0L28 28M28 0L0 28M0 14L14 0L28 14L14 28Z'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='.92'%3E%3Cellipse cx='14' cy='9.6' rx='1.5' ry='2.6' transform='rotate%280 14 14%29'/%3E%3Cellipse cx='14' cy='9.6' rx='1.5' ry='2.6' transform='rotate%2860 14 14%29'/%3E%3Cellipse cx='14' cy='9.6' rx='1.5' ry='2.6' transform='rotate%28120 14 14%29'/%3E%3Cellipse cx='14' cy='9.6' rx='1.5' ry='2.6' transform='rotate%28180 14 14%29'/%3E%3Cellipse cx='14' cy='9.6' rx='1.5' ry='2.6' transform='rotate%28240 14 14%29'/%3E%3Cellipse cx='14' cy='9.6' rx='1.5' ry='2.6' transform='rotate%28300 14 14%29'/%3E%3Ccircle cx='14' cy='14' r='1.5' fill-opacity='.6'/%3E%3Cg transform='translate%280 0%29'%3E%3Cellipse cx='0' cy='-2.2' rx='.8' ry='1.4' transform='translate%280 0%29 rotate%280%29'/%3E%3Cellipse cx='0' cy='-2.2' rx='.8' ry='1.4' transform='translate%280 0%29 rotate%2890%29'/%3E%3Cellipse cx='0' cy='-2.2' rx='.8' ry='1.4' transform='translate%280 0%29 rotate%28180%29'/%3E%3Cellipse cx='0' cy='-2.2' rx='.8' ry='1.4' transform='translate%280 0%29 rotate%28270%29'/%3E%3C/g%3E%3Cg transform='translate%2828 0%29'%3E%3Cellipse cx='0' cy='-2.2' rx='.8' ry='1.4' transform='translate%280 0%29 rotate%280%29'/%3E%3Cellipse cx='0' cy='-2.2' rx='.8' ry='1.4' transform='translate%280 0%29 rotate%2890%29'/%3E%3Cellipse cx='0' cy='-2.2' rx='.8' ry='1.4' transform='translate%280 0%29 rotate%28180%29'/%3E%3Cellipse cx='0' cy='-2.2' rx='.8' ry='1.4' transform='translate%280 0%29 rotate%28270%29'/%3E%3C/g%3E%3Cg transform='translate%280 28%29'%3E%3Cellipse cx='0' cy='-2.2' rx='.8' ry='1.4' transform='translate%280 0%29 rotate%280%29'/%3E%3Cellipse cx='0' cy='-2.2' rx='.8' ry='1.4' transform='translate%280 0%29 rotate%2890%29'/%3E%3Cellipse cx='0' cy='-2.2' rx='.8' ry='1.4' transform='translate%280 0%29 rotate%28180%29'/%3E%3Cellipse cx='0' cy='-2.2' rx='.8' ry='1.4' transform='translate%280 0%29 rotate%28270%29'/%3E%3C/g%3E%3Cg transform='translate%2828 28%29'%3E%3Cellipse cx='0' cy='-2.2' rx='.8' ry='1.4' transform='translate%280 0%29 rotate%280%29'/%3E%3Cellipse cx='0' cy='-2.2' rx='.8' ry='1.4' transform='translate%280 0%29 rotate%2890%29'/%3E%3Cellipse cx='0' cy='-2.2' rx='.8' ry='1.4' transform='translate%280 0%29 rotate%28180%29'/%3E%3Cellipse cx='0' cy='-2.2' rx='.8' ry='1.4' transform='translate%280 0%29 rotate%28270%29'/%3E%3C/g%3E%3Ccircle cx='14' cy='0' r='.9'/%3E%3Ccircle cx='14' cy='28' r='.9'/%3E%3Ccircle cx='0' cy='14' r='.9'/%3E%3Ccircle cx='28' cy='14' r='.9'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 14px 14px,
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.35), rgba(255,255,255,.15)),
    rgba(250, 248, 242, .58);
  /* mép vỏ sò: lưới hình tròn + hình chữ nhật bên trong → chỉ còn các vòng cung ở viền */
  -webkit-mask:
    radial-gradient(var(--r) at var(--r) var(--r), #000 98%, #0000 101%) round calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(2 * var(--r)) calc(2 * var(--r)),
    linear-gradient(#000 0 0) 50% / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat;
          mask:
    radial-gradient(var(--r) at var(--r) var(--r), #000 98%, #0000 101%) round calc(-1 * var(--r)) calc(-1 * var(--r)) / calc(2 * var(--r)) calc(2 * var(--r)),
    linear-gradient(#000 0 0) 50% / calc(100% - 2 * var(--r)) calc(100% - 2 * var(--r)) no-repeat;
}
.lace::before {   /* hàng lỗ xỏ chỉ chạy dọc mép ren */
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  border: 1.5px dotted rgba(255,255,255,.9);
}
.lace img {
  position: relative; display: block;
  width: 100%; height: auto; object-fit: cover;
  outline: 1px solid rgba(255,255,255,.95); outline-offset: 1px;   /* đường chỉ trắng sát ảnh */
}

/* Bay vào khi cuộn tới: ảnh ngang hạ xuống từ trên, ảnh dọc trái bay từ trái, ảnh dọc phải bay từ phải,
   xoay nghiêng rồi đáp xuống như ảnh in thả lên bàn. script.js gắn class fly-in cho .trio */
.trio > .lace-wrap {
  opacity: 0;
  filter: blur(3px) drop-shadow(0 12px 14px rgba(40,50,35,.28));
  transition: transform 1.4s cubic-bezier(.16, 1, .3, 1), opacity .9s ease, filter 1.1s ease;
}
.trio > .lace-wrap:nth-child(1) { transform: translateY(-90px) scale(.9) rotate(-6deg); }
.trio > .lace-wrap:nth-child(2) { transform: translate(-130%, 50px) rotate(-16deg); transition-delay: .2s; }
.trio > .lace-wrap:nth-child(3) { transform: translate(130%, 70px) rotate(16deg); transition-delay: .38s; }
.trio.fly-in > .lace-wrap { opacity: 1; filter: blur(0) drop-shadow(0 12px 14px rgba(40,50,35,.28)); }
.trio.fly-in > .lace-wrap:nth-child(1) { transform: rotate(-1.2deg); }
.trio.fly-in > .lace-wrap:nth-child(2) { transform: rotate(-2.5deg); }
.trio.fly-in > .lace-wrap:nth-child(3) { transform: rotate(2deg); }
@media (prefers-reduced-motion: reduce) {
  .trio > .lace-wrap { opacity: 1; filter: drop-shadow(0 12px 14px rgba(40,50,35,.28)); transition: none; }
  .trio > .lace-wrap:nth-child(1) { transform: rotate(-1.2deg); }
  .trio > .lace-wrap:nth-child(2) { transform: rotate(-2.5deg); }
  .trio > .lace-wrap:nth-child(3) { transform: rotate(2deg); }
}

/* ===== Lịch & đếm ngược ===== */
.calendar {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 6px 0; max-width: 340px; margin: 0 auto 32px;
  font-family: var(--display); font-size: 19px; font-weight: 600;
}
.calendar .dow { font-size: 13px; font-weight: 700; color: var(--accent); letter-spacing: .12em; padding-bottom: 6px; }
.calendar .day { height: 38px; display: grid; place-items: center; position: relative; isolation: isolate; }
.calendar .day.hl { color: #f4f1e6; text-shadow: none; }
.calendar .day.hl::before {
  content: ""; position: absolute; width: 40px; height: 40px; z-index: -1;
  background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.7 4.5c2.2 0 3.6 1.3 4.3 2.5h2c.7-1.2 2.1-2.5 4.3-2.5 3.7 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 3 4.5 6.7 4.5c2.2 0 3.6 1.3 4.3 2.5h2c.7-1.2 2.1-2.5 4.3-2.5 3.7 0 5.8 3.9 4.3 7.3C19.5 16.4 12 21 12 21Z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: beat 2.4s ease-in-out infinite;
}
@keyframes beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.12); } 24% { transform: scale(1); } 36% { transform: scale(1.08); } 48% { transform: scale(1); } }


/* ===== Ảnh rừng, mép hoà vào giấy ===== */
.banner {
  position: relative; overflow: hidden; aspect-ratio: 4 / 5;
  -webkit-mask-image: linear-gradient(transparent, #000 20%, #000 78%, transparent);
          mask-image: linear-gradient(transparent, #000 20%, #000 78%, transparent);
  text-shadow: 0 2px 14px rgba(0,0,0,.3);
}
.banner-media { position: absolute; left: 0; right: 0; top: -8%; height: 116%; will-change: transform; }
.banner-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.banner p {
  position: absolute; left: 0; right: 0; top: 19%; z-index: 1;
  text-align: center; color: #f6f3ea;
  font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: .4em; padding-left: .4em;
}
.banner p small { display: block; font-style: italic; font-weight: 500; font-size: 22px; letter-spacing: 0; color: #efe6cf; margin-top: 4px; padding-right: .4em; }

/* Banner ảnh sáng (ảnh nhẫn nền trắng): khung vuông, chữ mực tối đặt ở vùng nền trắng phía dưới */
.banner.light { aspect-ratio: 1 / 1; text-shadow: none; }
.banner.light .banner-media { top: 0; height: 100%; transform: none !important; }   /* ảnh vuông khớp khung, không trôi */
.banner.light .banner-media img { object-position: 50% 0; }
.banner.light p { top: 65%; bottom: auto; color: var(--text); text-shadow: 0 1px 0 rgba(255,255,255,.6); }
.banner.light p small { color: var(--accent); }

/* ===== Lịch trình ===== */
.timeline { list-style: none; position: relative; max-width: 380px; margin: 24px auto 0; }
.timeline::before {   /* rãnh dập chìm */
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: linear-gradient(var(--lo), var(--lo) 85%, transparent);
  box-shadow: 1px 0 0 var(--hi);
}
.timeline::after {
  content: "♥"; position: absolute; left: 50%; top: -26px; transform: translateX(-50%);
  font-size: 18px; color: var(--accent);
}
.timeline li { position: relative; width: 50%; padding: 16px 18px; }
.timeline li::before {   /* hạt nổi */
  content: ""; position: absolute; top: 30px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--paper); box-shadow: var(--raised);
}
.timeline li:nth-child(odd) { margin-left: 50%; text-align: left; }
.timeline li:nth-child(odd)::before { left: -5px; }
.timeline li:nth-child(even) { text-align: right; }
.timeline li:nth-child(even)::before { right: -5px; }
.timeline li:nth-child(2) { transition-delay: .1s; }
.timeline li:nth-child(3) { transition-delay: .2s; }
.timeline li:nth-child(4) { transition-delay: .3s; }
/* Lịch trình nằm trên nền xanh loang: bỏ vệt sáng in chìm (gây nhoè chữ), dùng mực đậm hơn */
.timeline { text-shadow: none; }
.timeline b { display: block; font-family: var(--display); font-size: 30px; font-weight: 700; letter-spacing: .02em; line-height: 1.15; color: #1f281b; }
.timeline span { font-family: var(--serif); font-size: 14.5px; font-weight: 500; color: #263022; text-transform: uppercase; letter-spacing: .06em; line-height: 1.5; display: block; margin-top: 4px; }

/* ===== Form trên tấm giấy ===== */
.rsvp-card {
  padding: 34px 22px 30px; border-radius: 22px;
  background: var(--grain-dark), var(--grain-light), var(--paper);
  box-shadow: var(--raised), 0 22px 34px -20px rgba(30,40,25,.45);
}
.rsvp-card .section-title { font-size: 18px; letter-spacing: .18em; padding-left: .18em; }
.rsvp-intro { font-size: 16px; color: var(--muted); margin-bottom: 14px; font-style: italic; }
form { display: grid; gap: 4px; text-align: left; }
input, select, textarea {
  width: 100%;
  font: inherit; font-size: 17px; /* ≥16px để iPhone không tự phóng to */
  color: var(--text);
  background: transparent;
  border: 0; border-radius: 0;
  border-bottom: 1.5px solid var(--lo);
  box-shadow: 0 1px 0 var(--hi);           /* rãnh kẻ dập chìm */
  padding: 14px 2px 8px;
  appearance: none; -webkit-appearance: none;
  transition: border-color .3s;
}
textarea { resize: vertical; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%2356653f'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 4px center; background-size: 9px;
  padding-right: 28px;
}
select option { color: #2f3a2b; background: #e9ebe1; }
select:invalid { color: var(--muted); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
input:focus, select:focus, textarea:focus { outline: none; border-bottom-color: var(--accent); }
.field-error { border-bottom-color: #9a4a3c; }
.form-error { color: #8c3b2e; font-size: 15px; text-align: center; margin-top: 8px; }
.form-error:empty { display: none; }

.btn {
  display: block; width: 100%;
  font-family: var(--display); font-size: 15px; font-weight: 700; letter-spacing: .26em; padding-left: .26em;
  color: #f2f0e6; background: var(--accent);
  border: 0; border-radius: 40px;
  padding-top: 14px; padding-bottom: 13px; margin-top: 22px;
  cursor: pointer; text-decoration: none; text-align: center;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 0 rgba(30,40,25,.25), 0 10px 18px -10px rgba(30,40,25,.6);
  transition: filter .3s, transform .1s, box-shadow .1s;
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.25); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.ghost {   /* nút dập nổi cùng màu giấy */
  background: transparent; color: var(--accent);
  text-shadow: var(--pressed-text);
  box-shadow: var(--raised), inset -1px -1px 0 var(--hi), inset 1px 1px 0 var(--lo);
}
.calendar-wrap .btn.ghost { max-width: 270px; margin: 0 auto; font-size: 13px; }

.thanks-box { padding: 10px 6px 4px; }
.thanks-box .section-title { margin-bottom: 14px; }
.link-btn { background: none; border: 0; font: inherit; font-size: 15px; color: var(--muted); text-decoration: underline; margin-top: 10px; cursor: pointer; }

/* ===== Nút nhạc ===== */
.music-btn {
  position: fixed; right: 16px; bottom: 20px; z-index: 40;
  width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: var(--paper); color: var(--accent);
  box-shadow: var(--raised), 0 8px 16px -6px rgba(30,40,25,.5);
  display: grid; place-items: center; cursor: pointer;
}
.music-btn[hidden] { display: none; }
.music-btn.playing svg { animation: spin 4s linear infinite; }
.music-btn:not(.playing)::after {
  content: ""; position: absolute; width: 24px; height: 1.5px; background: var(--accent); transform: rotate(-45deg);
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ===== Hiện dần khi cuộn: mờ → rõ, trượt nhẹ lên ===== */
.reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease); }
.reveal.in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .intro, .frame.reveal { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; animation: none; }
  .hero-media img, .frame-img img { animation: none; transform: none; }
  .scroll-hint, .music-btn.playing svg, .calendar .day.hl::before, .leaf-shadow { animation: none; }
}

@media (max-width: 360px) {
  .venue { font-size: 28px; }
  .couple { font-size: 21px; }
  .cover-names { font-size: 22px; }
  .time-line, .time-line.big { font-size: 16px; }
  .parents { font-size: 14px; }
}


/* Phần xác nhận là phần cuối trang: chừa khoảng thở phía dưới */
.rsvp { padding-bottom: 72px; }