/* ══════════════════════════════════════════════════════════════════════
   Thiệp cưới · Đức Nhất & Thúy Linh
   Dựng theo bố cục và hiệu ứng của mẫu TikTok @thiepcuoionline.nawngs:
   nền giấy ngà, hoa chìm nét mảnh, xanh olive rêu làm màu chủ đạo,
   dấu Song Hỷ và các ô trám ngày cưới màu gạch nung.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#fbfaf6;
  --paper-2:#f4f1e9;
  --paper-3:#eae5d9;

  --ink:#3b3a33;
  --ink-2:rgba(59,58,51,.74);
  --ink-3:rgba(59,58,51,.48);

  --olive:#5b6a3a;
  --olive-d:#414d28;
  --olive-l:#8e9a6e;

  --terra:#b4623a;
  --terra-d:#98492a;

  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --script:"Great Vibes","Cormorant Garamond",cursive;
  --sans:"Be Vietnam Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --cjk:"Noto Serif SC","Songti SC","PingFang SC","Microsoft YaHei",serif;

  --gut:clamp(18px,5vw,32px);
  --sect:clamp(58px,11vw,104px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --r:16px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:300 clamp(14.5px,3.5vw,15.5px)/1.8 var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit}
::selection{background:var(--olive);color:var(--paper)}
:focus-visible{outline:2px solid var(--terra);outline-offset:3px;border-radius:3px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* toàn trang xếp trong một cột hẹp như thiệp trên điện thoại */
main{max-width:560px;margin-inline:auto;position:relative;background:var(--paper)}
@media(min-width:720px){
  main{
    max-width:600px;
    box-shadow:0 0 90px -30px rgba(59,58,51,.35);
  }
  body{background:#e7e3d8}
}

/* ══════════ màn phủ trắng lúc mở trang ══════════ */
.veil{
  position:fixed;inset:0;z-index:90;background:var(--paper);
  pointer-events:none;transition:opacity 1.3s var(--ease);
}
.veil.is-off{opacity:0}

/* ══════════ chữ dùng chung ══════════ */
.script{
  margin:0;font:400 clamp(30px,7.5vw,44px)/1.25 var(--script);
  color:var(--olive);letter-spacing:.01em;
}
.script--md{font-size:clamp(30px,7.4vw,42px)}
.script--sm{font-size:clamp(24px,6vw,34px)}

.lead{
  margin:0 auto;max-width:36ch;text-align:center;text-wrap:balance;
  padding-inline:var(--gut);
  font:300 clamp(13.5px,3.3vw,14.8px)/1.85 var(--sans);color:var(--ink-2);
}
.lead--l{text-align:left;max-width:none;margin-inline:0;padding-inline:var(--gut)}

/* con dấu Song Hỷ */
.seal{
  display:grid;place-items:center;
  width:clamp(48px,12vw,60px);aspect-ratio:1;
  border-radius:7px;background:var(--terra);
  color:var(--paper);font:600 clamp(28px,7vw,36px)/1 var(--cjk);
  box-shadow:inset 0 0 0 2px rgba(251,250,246,.55),0 6px 16px -8px rgba(0,0,0,.5);
  user-select:none;
}

/* ══════════════════ 01 · HERO ══════════════════ */
.hero{
  position:relative;
  height:min(86svh,760px);
  min-height:520px;
  overflow:hidden;
  background:var(--paper-3);
}
.hero__photo{margin:0;position:absolute;inset:0}
.hero__photo img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.09);
  transition:transform 3.2s var(--ease);
}
.hero.is-on .hero__photo img{transform:scale(1)}

.seal--hero{
  position:absolute;top:clamp(18px,5vw,30px);right:clamp(16px,5vw,28px);
  opacity:0;transform:scale(.7);
  transition:opacity .8s var(--ease) .35s,transform .8s var(--ease) .35s;
}
.hero.is-on .seal--hero{opacity:1;transform:none}

.hero__stack{
  position:absolute;right:clamp(20px,7vw,42px);top:clamp(88px,22vw,140px);
  width:clamp(84px,22vw,104px);
  display:flex;flex-direction:column;align-items:center;
}

.hero__panel{
  width:100%;
  padding:clamp(16px,4vw,22px) 8px;
  display:flex;flex-direction:column;align-items:center;gap:clamp(10px,3vw,14px);
  background:rgba(74,86,48,.82);
  border-radius:14px;
  backdrop-filter:blur(2px);
  opacity:0;transform:scale(1.22) translateY(-6px);
  transition:opacity 1s var(--ease) .15s,transform 1.15s var(--ease) .15s;
}
.hero.is-on .hero__panel{opacity:1;transform:none}

.hero__name{
  margin:0;text-align:center;
  font:400 clamp(20px,5.2vw,25px)/1.15 var(--script);
  color:#fff;
}
.hero__dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.85)}

/* ══════════════════ 02 · KHOẢNG THỞ ══════════════════ */
.band{padding:clamp(30px,7vw,46px) var(--gut) clamp(34px,8vw,50px);text-align:center}

/* ══════════════════ 03 · SAVE THE DATE ══════════════════ */
/* chừa khoảng thở dưới hero, và nới hai bên cho mảng ảnh rộng gần bằng hero */
.std{padding:clamp(26px,7vw,42px) clamp(10px,2.8vw,16px) clamp(40px,9vw,60px)}
.std__block{
  position:relative;border-radius:var(--r);overflow:hidden;
  background:#2a2b26;
}
.std__grid{
  display:grid;gap:10px;padding:10px;
  grid-template-columns:1fr 1fr;
  /* hai hàng cao bằng nhau — hàng dưới thấp hơn thì ảnh bị cắt mất đầu */
  grid-template-rows:repeat(2,clamp(190px,46vw,260px));
  grid-template-areas:"a b" "c d";
}
.std__grid figure{margin:0;border-radius:12px;overflow:hidden;background:#3a3b35}
.std__grid img{width:100%;height:100%;object-fit:cover}
.std__a{grid-area:a}.std__b{grid-area:b}.std__c{grid-area:c}.std__d{grid-area:d}

/* ảnh nền mảng trái bị phủ tối để chữ nổi lên */
.std__a::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(118deg,rgba(24,26,20,.86) 0%,rgba(24,26,20,.66) 50%,rgba(24,26,20,.06) 86%);
  pointer-events:none;
}
.std__a{position:relative}

.std__lockup{
  position:absolute;left:clamp(16px,4.6vw,26px);top:clamp(16px,4.6vw,24px);
  width:min(48%,190px);color:#fff;pointer-events:none;
}
.std__save{
  margin:0;font:400 clamp(29px,7.6vw,40px)/.85 var(--script);
}
.std__the{
  margin:-.1em 0 0 clamp(18px,5.4vw,30px);
  font:300 clamp(14px,3.7vw,18px)/1 var(--serif);
  letter-spacing:.06em;color:rgba(255,255,255,.86);
}
.std__date{
  margin:.06em 0 0 clamp(7px,2vw,12px);
  font:400 clamp(29px,7.6vw,40px)/.9 var(--script);
}

/* ══════════════════ 04 · THIỆP MỜI ══════════════════ */
.invite{
  position:relative;
  padding:clamp(70px,15vw,120px) clamp(26px,8vw,52px);
  background:var(--paper-2);
  display:grid;gap:clamp(22px,5vw,32px);
  overflow:hidden;
}
/* mẫu đơn hoa mẫu đơn nét mảnh chìm dưới thiệp */
.peony{
  position:absolute;width:clamp(300px,82vw,400px);aspect-ratio:1;
  opacity:.5;pointer-events:none;
  background:center/contain no-repeat
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%27-100%20-100%20200%20200%27%20fill%3D%27none%27%20stroke%3D%27%23b3ab93%27%20stroke-width%3D%271%27%20stroke-linejoin%3D%27round%27%3E%3Cg%3E%3Cg%3E%3Cpath%20d%3D%27M0%200C-9%20-10.1%20-6.8%20-24.0%200%20-24.0C6.8%20-24.0%209%20-10.1%200%200%27%20transform%3D%27rotate%280.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-9%20-10.1%20-6.8%20-24.0%200%20-24.0C6.8%20-24.0%209%20-10.1%200%200%27%20transform%3D%27rotate%2836.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-9%20-10.1%20-6.8%20-24.0%200%20-24.0C6.8%20-24.0%209%20-10.1%200%200%27%20transform%3D%27rotate%2872.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-9%20-10.1%20-6.8%20-24.0%200%20-24.0C6.8%20-24.0%209%20-10.1%200%200%27%20transform%3D%27rotate%28108.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-9%20-10.1%20-6.8%20-24.0%200%20-24.0C6.8%20-24.0%209%20-10.1%200%200%27%20transform%3D%27rotate%28144.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-9%20-10.1%20-6.8%20-24.0%200%20-24.0C6.8%20-24.0%209%20-10.1%200%200%27%20transform%3D%27rotate%28180.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-9%20-10.1%20-6.8%20-24.0%200%20-24.0C6.8%20-24.0%209%20-10.1%200%200%27%20transform%3D%27rotate%28216.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-9%20-10.1%20-6.8%20-24.0%200%20-24.0C6.8%20-24.0%209%20-10.1%200%200%27%20transform%3D%27rotate%28252.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-9%20-10.1%20-6.8%20-24.0%200%20-24.0C6.8%20-24.0%209%20-10.1%200%200%27%20transform%3D%27rotate%28288.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-9%20-10.1%20-6.8%20-24.0%200%20-24.0C6.8%20-24.0%209%20-10.1%200%200%27%20transform%3D%27rotate%28324.0%29%27%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%27M0%200C-14%20-17.6%20-10.5%20-42.0%200%20-42.0C10.5%20-42.0%2014%20-17.6%200%200%27%20transform%3D%27rotate%2816.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-14%20-17.6%20-10.5%20-42.0%200%20-42.0C10.5%20-42.0%2014%20-17.6%200%200%27%20transform%3D%27rotate%2848.7%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-14%20-17.6%20-10.5%20-42.0%200%20-42.0C10.5%20-42.0%2014%20-17.6%200%200%27%20transform%3D%27rotate%2881.5%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-14%20-17.6%20-10.5%20-42.0%200%20-42.0C10.5%20-42.0%2014%20-17.6%200%200%27%20transform%3D%27rotate%28114.2%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-14%20-17.6%20-10.5%20-42.0%200%20-42.0C10.5%20-42.0%2014%20-17.6%200%200%27%20transform%3D%27rotate%28146.9%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-14%20-17.6%20-10.5%20-42.0%200%20-42.0C10.5%20-42.0%2014%20-17.6%200%200%27%20transform%3D%27rotate%28179.6%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-14%20-17.6%20-10.5%20-42.0%200%20-42.0C10.5%20-42.0%2014%20-17.6%200%200%27%20transform%3D%27rotate%28212.4%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-14%20-17.6%20-10.5%20-42.0%200%20-42.0C10.5%20-42.0%2014%20-17.6%200%200%27%20transform%3D%27rotate%28245.1%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-14%20-17.6%20-10.5%20-42.0%200%20-42.0C10.5%20-42.0%2014%20-17.6%200%200%27%20transform%3D%27rotate%28277.8%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-14%20-17.6%20-10.5%20-42.0%200%20-42.0C10.5%20-42.0%2014%20-17.6%200%200%27%20transform%3D%27rotate%28310.5%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-14%20-17.6%20-10.5%20-42.0%200%20-42.0C10.5%20-42.0%2014%20-17.6%200%200%27%20transform%3D%27rotate%28343.3%29%27%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%27M0%200C-18%20-25.2%20-13.5%20-60.0%200%20-60.0C13.5%20-60.0%2018%20-25.2%200%200%27%20transform%3D%27rotate%288.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-18%20-25.2%20-13.5%20-60.0%200%20-60.0C13.5%20-60.0%2018%20-25.2%200%200%27%20transform%3D%27rotate%2848.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-18%20-25.2%20-13.5%20-60.0%200%20-60.0C13.5%20-60.0%2018%20-25.2%200%200%27%20transform%3D%27rotate%2888.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-18%20-25.2%20-13.5%20-60.0%200%20-60.0C13.5%20-60.0%2018%20-25.2%200%200%27%20transform%3D%27rotate%28128.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-18%20-25.2%20-13.5%20-60.0%200%20-60.0C13.5%20-60.0%2018%20-25.2%200%200%27%20transform%3D%27rotate%28168.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-18%20-25.2%20-13.5%20-60.0%200%20-60.0C13.5%20-60.0%2018%20-25.2%200%200%27%20transform%3D%27rotate%28208.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-18%20-25.2%20-13.5%20-60.0%200%20-60.0C13.5%20-60.0%2018%20-25.2%200%200%27%20transform%3D%27rotate%28248.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-18%20-25.2%20-13.5%20-60.0%200%20-60.0C13.5%20-60.0%2018%20-25.2%200%200%27%20transform%3D%27rotate%28288.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-18%20-25.2%20-13.5%20-60.0%200%20-60.0C13.5%20-60.0%2018%20-25.2%200%200%27%20transform%3D%27rotate%28328.0%29%27%2F%3E%3C%2Fg%3E%3Cg%3E%3Cpath%20d%3D%27M0%200C-20%20-32.8%20-15.0%20-78.0%200%20-78.0C15.0%20-78.0%2020%20-32.8%200%200%27%20transform%3D%27rotate%2824.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-20%20-32.8%20-15.0%20-78.0%200%20-78.0C15.0%20-78.0%2020%20-32.8%200%200%27%20transform%3D%27rotate%2869.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-20%20-32.8%20-15.0%20-78.0%200%20-78.0C15.0%20-78.0%2020%20-32.8%200%200%27%20transform%3D%27rotate%28114.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-20%20-32.8%20-15.0%20-78.0%200%20-78.0C15.0%20-78.0%2020%20-32.8%200%200%27%20transform%3D%27rotate%28159.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-20%20-32.8%20-15.0%20-78.0%200%20-78.0C15.0%20-78.0%2020%20-32.8%200%200%27%20transform%3D%27rotate%28204.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-20%20-32.8%20-15.0%20-78.0%200%20-78.0C15.0%20-78.0%2020%20-32.8%200%200%27%20transform%3D%27rotate%28249.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-20%20-32.8%20-15.0%20-78.0%200%20-78.0C15.0%20-78.0%2020%20-32.8%200%200%27%20transform%3D%27rotate%28294.0%29%27%2F%3E%3Cpath%20d%3D%27M0%200C-20%20-32.8%20-15.0%20-78.0%200%20-78.0C15.0%20-78.0%2020%20-32.8%200%200%27%20transform%3D%27rotate%28339.0%29%27%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%277%27%2F%3E%3Ccircle%20cx%3D%270%27%20cy%3D%270%27%20r%3D%273%27%2F%3E%3C%2Fsvg%3E");
}
.peony--tl{top:-9%;left:-13%}
.peony--br{bottom:-9%;right:-13%}

/* thiệp giấy xé mép — mép xé làm bằng mask, nên bóng đổ phải đặt ở lớp
   bọc ngoài (filter chạy trước mask nếu để chung một thẻ), và con dấu Song Hỷ
   cũng phải nằm ngoài .card, nếu không sẽ bị mép xé cắt mất một nửa. */
.cardbox{
  position:relative;z-index:1;
  padding-bottom:clamp(26px,6.5vw,32px);
  filter:drop-shadow(0 14px 24px rgba(59,58,51,.2));
}

.card{
  --tear-t:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cpath d='M0 12L0 7Q5 3 10 6Q16 10 22 5Q28 1 34 6Q40 10 46 5Q52 1 60 6L60 12Z' fill='%23000'/%3E%3C/svg%3E");
  --tear-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cpath d='M0 0L0 5Q5 9 10 6Q16 2 22 7Q28 11 34 6Q40 2 46 7Q52 11 60 6L60 0Z' fill='%23000'/%3E%3C/svg%3E");

  position:relative;text-align:center;
  padding:clamp(30px,7vw,44px) clamp(20px,5vw,34px) clamp(34px,8vw,46px);
  background:var(--paper);

  -webkit-mask:
    linear-gradient(#000 0 0) center/100% calc(100% - 24px) no-repeat,
    var(--tear-t) top left/60px 12px repeat-x,
    var(--tear-b) bottom left/60px 12px repeat-x;
  mask:
    linear-gradient(#000 0 0) center/100% calc(100% - 24px) no-repeat,
    var(--tear-t) top left/60px 12px repeat-x,
    var(--tear-b) bottom left/60px 12px repeat-x;
}
/* thiệp thứ hai xé một kiểu khác cho đỡ lặp */
.cardbox:last-of-type .card{
  --tear-t:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cpath d='M0 12L0 5Q7 10 13 6Q19 2 24 7Q30 11 36 5Q42 1 48 6Q54 10 60 5L60 12Z' fill='%23000'/%3E%3C/svg%3E");
  --tear-b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='12' viewBox='0 0 60 12'%3E%3Cpath d='M0 0L0 7Q7 2 13 6Q19 10 24 5Q30 1 36 7Q42 11 48 6Q54 2 60 7L60 0Z' fill='%23000'/%3E%3C/svg%3E");
}

.card__lead{
  margin:0 0 1.5em;text-wrap:balance;
  font:300 clamp(11px,2.9vw,12.5px)/1.85 var(--serif);
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
}
.card__venue{
  margin:0;font:400 clamp(26px,7vw,38px)/1.1 var(--serif);
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
  text-wrap:balance;
}
/* tên dài — thu nhỏ để nằm trọn một dòng */
.card__venue--long{font-size:clamp(21px,6vw,30px);letter-spacing:.05em}
.card__addr{
  margin:.7em 0 0;
  font:300 clamp(12px,3.1vw,13.5px)/1.6 var(--serif);
  font-style:italic;color:var(--ink-2);
  /* Cormorant mặc định dùng số kiểu cổ (số 1 thấp hơn chữ hoa) */
  font-variant-numeric:lining-nums;
}
.card__when{
  margin:1.5em 0 0;
  font:300 clamp(15px,4vw,19px)/1.4 var(--serif);
  letter-spacing:.06em;color:var(--ink);
  font-variant-numeric:lining-nums;
}
.card__lunar{
  margin:.45em 0 0;
  font:300 clamp(11.5px,3vw,13px)/1.5 var(--serif);
  font-style:italic;color:var(--ink-3);
}

.dir{
  display:inline-flex;flex-direction:column;align-items:center;gap:4px;
  margin-top:1.6em;padding:6px 12px;
  text-decoration:none;color:var(--ink);
  transition:color .3s var(--ease);
}
.dir svg{
  width:19px;height:19px;fill:var(--terra);stroke:none;
}
.dir svg circle{fill:var(--paper)}
.dir span{
  font:400 clamp(12px,3.1vw,13.5px)/1 var(--serif);
  letter-spacing:.16em;
}
.dir:hover{color:var(--terra)}

.card__sign{
  margin:1.5em 0 0;
  font:400 clamp(19px,4.8vw,25px)/1.3 var(--script);color:var(--olive);
}
.seal--card{
  position:absolute;left:50%;bottom:0;z-index:2;
  transform:translateX(-50%);
}

/* ══════════════════ 05 · WEDDING OF ══════════════════ */
.couple{padding:var(--sect) var(--gut);background:var(--paper)}
.couple__inner{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(10px,3vw,18px)}

.couple__script{
  position:absolute;right:0;top:clamp(-6px,-1vw,0px);
  z-index:2;color:var(--olive-l);
  transform:rotate(-3deg);
}
.couple__amp{
  position:absolute;left:50%;top:clamp(150px,40vw,215px);
  transform:translateX(-50%);z-index:2;
  font:300 clamp(40px,11vw,58px)/1 var(--serif);color:rgba(59,58,51,.22);
}

.couple__ph{margin:0;border-radius:14px;overflow:hidden;background:var(--paper-3)}
.couple__ph img{width:100%;height:100%;object-fit:cover}
.couple__ph--l{grid-column:1;aspect-ratio:3/4;margin-top:clamp(26px,7vw,40px)}
.couple__ph--r{grid-column:2;grid-row:2;aspect-ratio:3/4;margin-top:clamp(-56px,-14vw,-40px)}

.couple__side{padding-top:clamp(8px,2vw,12px)}
.couple__side--l{grid-column:1;grid-row:2;text-align:left;padding-right:6px}
.couple__side--r{grid-column:2;grid-row:3;text-align:right;padding-left:6px}

.couple__name{
  margin:0;font:400 clamp(19px,5.2vw,26px)/1.15 var(--serif);
  letter-spacing:.05em;color:var(--ink);
}
.couple__fam{
  margin:.5em 0 .3em;
  font:400 clamp(19px,4.8vw,24px)/1.1 var(--script);
  letter-spacing:.01em;color:var(--olive-l);
}
.couple__par{
  margin:0;font:300 clamp(12.5px,3.2vw,14px)/1.7 var(--serif);color:var(--ink-2);
}
.couple__side--l{border-left:1px solid rgba(91,106,58,.4);padding-left:12px}
.couple__side--r{border-right:1px solid rgba(91,106,58,.4);padding-right:12px}

/* ══════════════════ 06 · CHUYỆN CHÚNG MÌNH ══════════════════ */
.story{padding:var(--sect) 0;background:var(--paper-2)}
.story__title{text-align:center;margin-bottom:.35em}
.story .lead{margin-bottom:clamp(34px,8vw,52px)}

.chap{
  padding-inline:var(--gut);
  margin-bottom:clamp(42px,10vw,64px);
}
.chap:last-child{margin-bottom:0}

.chap__ph{margin:clamp(18px,4.5vw,26px) 0 0;border-radius:14px;overflow:hidden;background:var(--paper-3)}
.chap__ph img{width:100%;aspect-ratio:4/5;object-fit:cover}
.chap__ph--pair{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  background:none;border-radius:0;overflow:visible;
}
.chap__ph--pair figure{margin:0;border-radius:14px;overflow:hidden;background:var(--paper-3)}
.chap__ph--pair img{aspect-ratio:3/4}

/* thiệp luôn là một cột hẹp nên chương nào cũng xếp dọc:
   chữ trước, ảnh ngay bên dưới */

.chap__no{
  margin:0 0 .4em;font:400 11px/1 var(--sans);
  letter-spacing:.28em;color:var(--terra);
}
.chap__h{
  margin:0 0 .45em;font:400 clamp(26px,6.6vw,36px)/1.15 var(--script);
  color:var(--olive);font-weight:400;
}
.chap__txt p{
  margin:0 0 1em;color:var(--ink-2);
  text-align:justify;text-justify:inter-word;hyphens:none;
}
.chap__txt p:last-child{margin-bottom:0}

.quote{
  margin:1.2em 0;padding-left:14px;
  border-left:1px solid var(--terra);
  font:400 clamp(18px,4.6vw,24px)/1.4 var(--script);color:var(--olive);
}

/* ══════════════════ 07 · ALBUM ══════════════════ */
.mem{padding:var(--sect) 0;background:var(--paper)}
.mem__title{padding-inline:var(--gut);margin-bottom:.3em}
.mem .lead{margin-bottom:clamp(24px,6vw,36px)}

.mem__wrap{position:relative;padding-inline:var(--gut)}
.mem__forever{
  position:absolute;right:var(--gut);top:clamp(-30px,-7vw,-22px);
  z-index:2;color:var(--olive-l);transform:rotate(-3deg);
}
.seal--mem{
  position:absolute;z-index:2;
  right:calc(50% + 8px);top:10px;
}

/* Lưới hai cột xếp theo hàng: trái rồi phải, xong mới xuống hàng dưới —
   đúng cách đọc bảng thứ tự. (Kiểu masonry cũ đổ đầy cột trái trước nên
   ảnh thứ 2 rơi xuống tận đáy cột trái.) Mọi ảnh đều 2:3 nên hàng nào
   cũng bằng nhau. */
.mem__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mem__cell{
  display:block;width:100%;padding:0;border:0;margin:0;
  border-radius:13px;overflow:hidden;background:var(--paper-3);
  cursor:zoom-in;
}
.mem__cell img{
  /* chốt 2:3 cho mọi ô — thêm ảnh khác khổ thì hai cột vẫn kết thúc ngang nhau */
  width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;
  transition:transform .8s var(--ease);
}
.mem__cell:hover img{transform:scale(1.05)}

/* .btn{width:100%} khai báo sau nên phải hai lớp mới thắng được */
.btn.mem__full{
  width:fit-content;margin:clamp(22px,5vw,32px) auto 0;
  padding-inline:clamp(26px,7vw,44px);
}

/* ══════════════════ 08 · RSVP ══════════════════ */
.rsvp{padding:clamp(34px,8vw,62px) var(--gut) var(--sect);background:var(--paper)}
.rsvp .lead{
  margin-bottom:clamp(22px,5vw,32px);padding-inline:0;
  color:var(--olive);
}

.form{display:grid;gap:clamp(10px,2.6vw,13px)}

.fld{
  width:100%;padding:13px 18px;
  font:300 clamp(13.5px,3.4vw,14.5px)/1.5 var(--sans);
  color:var(--ink);background:var(--paper);
  border:1px solid rgba(59,58,51,.3);border-radius:999px;
  transition:border-color .3s var(--ease);
  appearance:none;-webkit-appearance:none;
}
.fld::placeholder{color:var(--ink-3)}
.fld:focus{outline:none;border-color:var(--olive)}
.fld--area{border-radius:18px;min-height:104px;resize:vertical}
.fld.is-bad{border-color:var(--terra)}

.sel{position:relative}
.sel::after{
  content:"";position:absolute;right:20px;top:50%;
  width:8px;height:8px;margin-top:-5px;pointer-events:none;
  border-right:1.4px solid var(--ink-2);border-bottom:1.4px solid var(--ink-2);
  transform:rotate(45deg);
}
.sel select{padding-right:42px;cursor:pointer}
.sel select:invalid,.sel select option[value=""]{color:var(--ink-3)}

.err{
  margin:2px 0 0;text-align:center;
  font:300 13px/1.5 var(--sans);color:var(--terra-d);
}

.btn{
  display:block;width:100%;min-height:48px;padding:0 20px;
  margin-top:6px;border-radius:999px;cursor:pointer;
  font:400 clamp(14px,3.6vw,16px)/1 var(--serif);
  letter-spacing:.14em;text-align:center;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn--solid{background:var(--olive);color:#fff;border:1px solid var(--olive)}
.btn--solid:hover{background:var(--olive-d);border-color:var(--olive-d)}
.btn--solid[disabled]{opacity:.6;cursor:default}
.btn--line{background:transparent;color:var(--ink);border:1px solid rgba(59,58,51,.35)}
.btn--line:hover{border-color:var(--olive);color:var(--olive)}

.form__done{margin:.6em 0 0;text-align:center}

/* ══════════════════ 09 · CẢM ƠN ══════════════════ */
.closing{
  position:relative;overflow:hidden;
  min-height:min(70svh,520px);
  display:grid;place-items:center;
  padding:clamp(50px,12vw,80px) var(--gut);
  isolation:isolate;
}
.closing__bg{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
}
.closing::after{
  content:"";position:absolute;inset:0;z-index:-1;
  /* đậm ở trên cho chữ nổi, nhạt ở giữa để không phủ mờ mặt hai bạn */
  background:linear-gradient(180deg,
    rgba(26,28,22,.78) 0%,rgba(26,28,22,.6) 34%,
    rgba(26,28,22,.42) 58%,rgba(26,28,22,.6) 100%);
}
.closing{align-items:start}
.closing__in{
  text-align:center;color:#fff;
  margin-top:0;margin-bottom:auto;
}
.closing__txt{
  margin:0;font:300 clamp(12.5px,3.2vw,14px)/1.9 var(--sans);
  color:rgba(255,255,255,.9);
}
.closing__ty{
  margin:.7em 0 0;color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}

.brandbar{
  padding:16px var(--gut);text-align:center;background:var(--paper);
  font:300 clamp(10px,2.6vw,11.5px)/1.6 var(--serif);
  letter-spacing:.22em;color:var(--ink-3);
}

/* ══════════════════ NÚT NHẠC ══════════════════ */
.music{
  position:fixed;z-index:50;
  right:max(14px,calc(50vw - 280px + 14px));
  bottom:clamp(14px,4vw,22px);
  width:46px;height:46px;padding:0;
  display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(91,106,58,.4);border-radius:50%;
  background:rgba(251,250,246,.9);backdrop-filter:blur(8px);
  box-shadow:0 6px 18px -8px rgba(59,58,51,.5);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.music[hidden]{display:none}

.music:hover{border-color:var(--olive)}
.music svg{width:20px;height:20px;fill:none;stroke:var(--olive);stroke-width:1.6;stroke-linecap:round}
.music__slash{transition:opacity .3s var(--ease)}
.music[aria-pressed=true] .music__slash{opacity:0}

/* ══════════════════ HỘP MỪNG CƯỚI ══════════════════ */
.modal{
  position:fixed;inset:0;z-index:80;
  display:grid;place-items:center;padding:var(--gut);
  background:rgba(30,32,26,.6);backdrop-filter:blur(3px);
  animation:fade .3s var(--ease);
}
.modal[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}

.modal__box{
  position:relative;width:min(480px,100%);
  max-height:86svh;overflow-y:auto;
  padding:clamp(30px,7vw,40px) clamp(18px,5vw,28px) clamp(24px,6vw,32px);
  background:var(--paper);border-radius:var(--r);text-align:center;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
  animation:pop .45s var(--ease);
}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}

.modal__x{
  position:absolute;top:8px;right:10px;
  width:38px;height:38px;padding:0;border:0;background:none;
  font-size:28px;line-height:1;color:var(--ink-3);cursor:pointer;
}
.modal__x:hover{color:var(--terra)}

.seal--modal{margin:0 auto .8em}
.modal__title{margin:0 0 .35em}
.modal__sub{
  margin:0 auto 1.6em;max-width:36ch;
  font:300 clamp(12.5px,3.2vw,13.5px)/1.75 var(--sans);color:var(--ink-2);
}

.modal__row{display:grid;gap:clamp(18px,4vw,24px)}
@media(min-width:440px){.modal__row{grid-template-columns:1fr 1fr}}

.qr__who{
  margin:0 0 .9em;font:400 10.5px/1 var(--sans);
  letter-spacing:.24em;text-transform:uppercase;color:var(--olive);
}
.qr__frame{
  width:min(160px,70%);margin:0 auto 1em;padding:8px;
  background:#fff;border-radius:10px;
  box-shadow:0 8px 20px -12px rgba(59,58,51,.6);
}
.qr__name{margin:0 0 .5em;font:400 clamp(19px,5vw,23px)/1.2 var(--script);color:var(--olive)}
.copy{
  display:block;width:100%;padding:7px 8px;margin:0 auto .6em;
  background:none;border:1px dashed rgba(180,98,58,.45);border-radius:8px;cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease);
}
.copy:hover{border-color:var(--terra);background:rgba(180,98,58,.07)}
.copy__num{
  display:block;font:400 clamp(14px,3.6vw,15.5px)/1.35 var(--sans);
  letter-spacing:.1em;color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums;
}
.copy__hint{
  display:block;margin-top:.25em;font:300 10px/1 var(--sans);
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.qr__bank{margin:0;font:300 12px/1.5 var(--sans);color:var(--ink-3)}

/* ══════════════════ XEM ẢNH LỚN ══════════════════ */
.lb{
  position:fixed;inset:0;z-index:85;display:grid;place-items:center;
  background:rgba(24,26,21,.95);padding:clamp(46px,9vw,70px) clamp(12px,4vw,44px);
  animation:fade .3s var(--ease);
}
.lb[hidden]{display:none}
.lb__img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.lb__x,.lb__nav{
  position:absolute;border:0;padding:0;cursor:pointer;
  display:grid;place-items:center;line-height:0;
  color:#fff;background:rgba(24,26,21,.55);border-radius:50%;
  transition:color .25s var(--ease),background .25s var(--ease);
}
.lb__x{top:clamp(8px,2vw,18px);right:clamp(8px,2vw,18px);width:44px;height:44px;font-size:30px}
.lb__nav{top:50%;transform:translateY(-50%);width:46px;height:46px;font-size:clamp(30px,6vw,38px)}
.lb__nav--prev{left:clamp(6px,1.5vw,14px)}
.lb__nav--next{right:clamp(6px,1.5vw,14px)}
.lb__x:hover,.lb__nav:hover{color:var(--terra);background:rgba(24,26,21,.85)}

/* ══════════════════ TOAST ══════════════════ */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,18px);
  z-index:95;padding:10px 20px;border-radius:999px;
  background:var(--olive);color:#fff;
  font:300 13.5px/1 var(--sans);
  opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  box-shadow:0 14px 30px -14px rgba(0,0,0,.5);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ══════════════════ 00 · MỞ THIỆP ══════════════════ */
.opener{
  position:fixed;inset:0;z-index:100;
  display:grid;place-items:center;
  padding:var(--gut);
  background:var(--paper);
  /* nán lại một nhịp cho nắp phong bì kịp bật lên rồi mới tan */
  transition:opacity .9s var(--ease) .45s,visibility .9s .45s;
}
.opener::before{
  /* bóng hoa mờ trên nền giấy */
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.5;
  background:
    radial-gradient(58% 45% at 12% 8%,rgba(91,106,58,.1),transparent 70%),
    radial-gradient(52% 42% at 92% 96%,rgba(91,106,58,.1),transparent 70%);
}
.opener.is-open{opacity:0;visibility:hidden;pointer-events:none}

.opener__in{position:relative;text-align:center;max-width:min(360px,100%)}

.opener__lead{
  margin:0;
  font:300 clamp(11.5px,3vw,13px)/1.6 var(--serif);
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2);
}
.opener__guest{
  position:relative;
  margin:.5em auto 0;padding-bottom:.35em;
  width:max-content;max-width:100%;
  font:400 clamp(28px,7.6vw,40px)/1.35 var(--script);
  color:var(--terra-d);
}
/* gạch chân tự kẻ ra hai bên */
.opener__guest::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(180,98,58,.45);
  transform:scaleX(0);
  transition:transform 1s var(--ease) .8s;
}

/* phong bì — bấm để mở */
.env{
  display:block;margin:clamp(34px,9vw,52px) auto clamp(24px,6vw,34px);
  padding:0;border:0;background:none;cursor:pointer;
}
.env:hover .env__body{transform:translateY(-4px)}
.env__body{
  /* cùng tông olive với bảng tên ở màn hero — bảng tên phủ 82% lên tán lá
     tối nên màu hiện ra sẫm hơn rgba(74,86,48) một chút, lấy đúng màu đó */
  --env:#45512d;
  --env-lo:#4f5c36;
  --env-hi:#3a4526;

  position:relative;display:block;
  transition:transform .5s var(--ease);
  width:clamp(196px,58vw,244px);aspect-ratio:3/2;
  border-radius:8px;background:var(--env);
  box-shadow:0 18px 34px -18px rgba(37,44,22,.65),inset 0 0 0 1px rgba(251,250,246,.16);
}
/* hai nếp gấp dưới của phong bì */
.env__body::before,.env__body::after{
  content:"";position:absolute;bottom:0;width:52%;height:100%;
  border-radius:0 0 8px 8px;background:var(--env-lo);
  box-shadow:inset 0 0 0 1px rgba(251,250,246,.12);
}
.env__body::before{left:0;clip-path:polygon(0 100%,0 22%,100% 100%)}
.env__body::after {right:0;clip-path:polygon(100% 100%,100% 22%,0 100%)}

/* nắp phong bì — bật lên khi mở */
.env__flap{
  position:absolute;left:0;top:0;width:100%;height:62%;
  background:var(--env-hi);
  clip-path:polygon(0 0,100% 0,50% 100%);
  border-radius:8px 8px 0 0;
  transform-origin:top center;
  transition:transform .8s var(--ease);
  z-index:2;
}
.opener.is-open .env__flap{transform:rotateX(-165deg)}

.env__seal{
  position:absolute;left:50%;top:52%;z-index:3;
  transform:translate(-50%,-50%);
  display:grid;place-items:center;
  width:clamp(44px,12vw,54px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#c9764c,var(--terra) 45%,var(--terra-d));
  color:var(--paper);font:600 clamp(21px,5.6vw,26px)/1 var(--cjk);
  box-shadow:0 5px 12px -5px rgba(0,0,0,.55),inset 0 0 0 2px rgba(251,250,246,.3);
  opacity:0;transform:translate(-50%,-50%) scale(1.7);
  transition:transform .7s var(--ease),opacity .5s var(--ease);
}

/* ── vào màn theo lớp: dòng mời · tên khách · phong bì · dấu sáp · gợi ý ── */
.opener__lead,.opener__guest,.env,.opener__hint{
  opacity:0;
  transition:opacity .9s var(--ease),transform 1.05s var(--ease);
}
.opener__lead {transform:translateY(-12px)}
.opener__guest{transform:translateY(16px)}
.env          {transform:translateY(32px) scale(.92)}

.opener.is-ready .opener__lead,
.opener.is-ready .opener__guest,
.opener.is-ready .env,
.opener.is-ready .opener__hint{opacity:1;transform:none}
.opener.is-ready .opener__lead {transition-delay:.15s}
.opener.is-ready .opener__guest{transition-delay:.38s}
.opener.is-ready .env          {transition-delay:.68s}
.opener.is-ready .opener__hint {transition-delay:1.5s}
.opener.is-ready .opener__guest::after{transform:scaleX(1)}
.opener.is-ready .env__seal{
  opacity:1;transform:translate(-50%,-50%) scale(1);transition-delay:1.15s;
}

/* ── lúc mở: chữ bay lên, dấu sáp bung ra, nắp bật ngược ── */
.opener.is-open .opener__lead,
.opener.is-open .opener__guest{opacity:0;transform:translateY(-16px);transition-delay:0s}
.opener.is-open .opener__hint {opacity:0;transition-delay:0s}
.opener.is-open .env__seal{
  transform:translate(-50%,-50%) scale(.4);opacity:0;transition-delay:0s;
}

.opener__hint{
  margin:0;
  font:300 clamp(11px,2.8vw,12px)/1.6 var(--sans);
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);
  /* đợi hiện xong mới nhấp nháy; không đặt fill-mode kẻo đè mất lượt hiện dần */
  animation:blink 2.4s var(--ease) 2.4s infinite;
}
@keyframes blink{0%,100%{opacity:.45}50%{opacity:1}}

/* ══════════════════ HỘP LỜI CẢM ƠN ══════════════════ */
.modal__box--thanks{padding-top:clamp(22px,5vw,28px)}

.thanks__ph{
  position:relative;margin:0 auto clamp(22px,5vw,30px);
  width:min(230px,72%);
  border-radius:14px;overflow:visible;
}
.thanks__ph img{
  width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:14px;background:var(--paper-3);
}
.seal--thanks{
  position:absolute;left:50%;bottom:0;
  transform:translate(-50%,45%);
}

.thanks__msg{
  margin:0 auto 1.6em;max-width:32ch;
  font:300 clamp(12.5px,3.2vw,13.5px)/1.8 var(--sans);color:var(--ink-2);
}

.modal__done{margin-top:clamp(20px,5vw,28px)}

/* ══════════════════ HIỆN DẦN KHI CUỘN ══════════════════
   Một cơ chế chung, nhiều dáng vào màn cho đỡ đơn điệu. Dáng nằm trong biến
   --tf để phần tử nào đã có transform riêng (chữ viết tay nghiêng, dấu &
   căn giữa…) vẫn giữ được thế của nó. Nhịp trễ nằm trong --d. */
.reveal{
  --tf:translateY(24px);
  opacity:0;transform:var(--tf);
  transition:
    opacity   .9s var(--ease) var(--d,0s),
    transform 1s  var(--ease) var(--d,0s),
    filter    .9s var(--ease) var(--d,0s);
}
.reveal.is-in{opacity:1;--tf:none;filter:none}

/* các dáng vào màn */
.reveal--far   {--tf:translateY(54px)}
.reveal--drop  {--tf:translateY(-26px)}
.reveal--zoom  {--tf:scale(.9)}
.reveal--wide  {--tf:scale(1.07)}
.reveal--left  {--tf:translateX(-42px)}
.reveal--right {--tf:translateX(42px)}
.reveal--blur  {--tf:translateY(16px);filter:blur(12px)}
.reveal--tilt  {--tf:translateY(36px) rotate(-2.4deg)}
.reveal--tilt-r{--tf:translateY(36px) rotate(2.4deg)}
.reveal--slow  {transition-duration:1.5s,1.8s,1.5s}

/* giữ nguyên góc nghiêng sẵn có của mấy dòng chữ viết tay */
.reveal--tag      {--tf:rotate(-3deg) translateY(20px);filter:blur(8px)}
.reveal--tag.is-in{--tf:rotate(-3deg)}
/* dấu & đã translateX(-50%) để căn giữa */
.reveal--amp      {--tf:translateX(-50%) scale(.4)}
.reveal--amp.is-in{--tf:translateX(-50%)}

/* hoa mẫu đơn vốn chìm ở .5 — không để lượt hiện dần kéo lên đặc */
.peony.reveal.is-in{opacity:.5}

/* nhịp trễ, xếp lớp cho từng cụm */
.d1{--d:.12s} .d2{--d:.24s} .d3{--d:.36s} .d4{--d:.48s}

/* thùng chứa: bản thân không đổi gì, chỉ để châm ngòi cho các con vào lần lượt */
.reveal--group{opacity:1;--tf:none;transition:none}

/* ô album vào lần lượt — chỉ số --i do app.js gán cho từng ô */
.mem__cell{
  opacity:0;transform:translateY(26px) scale(.94);
  transition:opacity .75s var(--ease),transform .85s var(--ease);
}
.mem__wrap.is-in .mem__cell{
  opacity:1;transform:none;
  transition-delay:calc(var(--i,0) * .055s);
}

/* các ô trong phiếu xác nhận cũng vào lần lượt */
.form > *{
  opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .7s var(--ease);
}
.form.is-in > *{opacity:1;transform:none}
.form.is-in > *:nth-child(1){transition-delay:.05s}
.form.is-in > *:nth-child(2){transition-delay:.12s}
.form.is-in > *:nth-child(3){transition-delay:.19s}
.form.is-in > *:nth-child(4){transition-delay:.26s}
.form.is-in > *:nth-child(5){transition-delay:.33s}
.form.is-in > *:nth-child(6){transition-delay:.40s}
.form.is-in > *:nth-child(7){transition-delay:.47s}
.form.is-in > *:nth-child(8){transition-delay:.54s}
.form.is-in > *:nth-child(n+9){transition-delay:.61s}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal,.mem__cell,.form > *{opacity:1;transform:none;filter:none}
  .hero__photo img{transform:none}
  .opener__hint{animation:none;opacity:.7}
  .opener__lead,.opener__guest,.env{opacity:1;transform:none}
  .opener__guest::after{transform:scaleX(1)}
  .env__seal{opacity:1;transform:translate(-50%,-50%)}
}