/* PanLove — giao diện 6 mẫu thiệp: flower, rose, korea, romance, nature, ruby.
   Thiệp luôn là một cột dọc rộng tối đa 480px (khách mở trên điện thoại); trên máy tính nằm giữa nền theo mẫu. */
.tp{
  --bg:#f6efe6; --ink:#3b2f2a; --muted:#7a6a60; --acc:#b0652a; --acc2:#c9566b; --card:#fffaf3; --line:#e4d3bf; --on-acc:#fff;
  --script:"Great Vibes","Dancing Script",cursive; --serif:"Playfair Display",Georgia,serif; --sans:"Be Vietnam Pro",system-ui,sans-serif;
  position:relative; max-width:480px; margin:0 auto; overflow:hidden; background:var(--bg); color:var(--ink);
  font:400 15px/1.65 var(--sans); text-align:center; -webkit-font-smoothing:antialiased;
}
/* Bìa thư và popup nằm ngoài .tp nhưng dùng chung biến màu/font của mẫu */
.tp-env,.tp-modal,.tp-dock{--bg:#f6efe6; --ink:#3b2f2a; --muted:#7a6a60; --acc:#b0652a; --acc2:#c9566b; --card:#fffaf3; --line:#e4d3bf; --on-acc:#fff;
  --script:"Great Vibes","Dancing Script",cursive; --serif:"Playfair Display",Georgia,serif; --sans:"Be Vietnam Pro",system-ui,sans-serif; font-family:var(--sans)}
.tp-modal *,.tp-env *,.tp-dock *{box-sizing:border-box}
.tp *{box-sizing:border-box}
.tp img{display:block; max-width:100%}
.tp h1,.tp h2,.tp h3,.tp p,.tp blockquote,.tp figure,.tp ol{margin:0}
.tp a{color:inherit}

.tp-page{margin:0; min-height:100vh; background:#ece4da}
.tp-bg-flower{background:#e9dccb} .tp-bg-rose{background:#e8d6cf} .tp-bg-korea{background:#d9c8b6}
.tp-bg-romance{background:#efdcdc} .tp-bg-nature{background:#e3e8da} .tp-bg-ruby{background:#5e1220}
.tp-bg-magazine{background:#e9d9d4} .tp-bg-film{background:#cfd6dd} .tp-bg-arch{background:#efe3e3} .tp-bg-cream{background:#efe9e0} .tp-bg-pastel{background:#efd2d0}
@media (min-width:520px){ .tp-page .tp{box-shadow:0 0 60px rgba(0,0,0,.18)} }

/* ---------- Phần chung ---------- */
.tp-sec{position:relative; padding:56px 24px}
.tp-kicker{font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.tp-title{font:400 44px/1.15 var(--script); color:var(--acc); margin-bottom:24px}
.tp-btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:42px; padding:10px 20px; border:1px solid var(--acc);
  border-radius:999px; background:var(--acc); color:var(--on-acc) !important; font:600 13.5px var(--sans); letter-spacing:.02em; text-decoration:none; cursor:pointer}
.tp-btn:hover{filter:brightness(1.08)}
.tp-btn:focus-visible,.tp-q:focus-visible,.tp-gallery-item:focus-visible{outline:2px solid var(--acc); outline-offset:3px}
.tp-btn:disabled{opacity:.55; cursor:not-allowed}
.tp-btn-ghost{background:transparent; color:var(--acc) !important}
.tp-btn-wide{width:100%}

/* Phần đầu */
.tp-hero{position:relative}
.tp-hero-photo img{width:100%; aspect-ratio:4/5; object-fit:cover}
.tp-hero-nophoto{min-height:auto !important; padding-top:40px}
.tp-hero-nophoto .tp-hero-box{position:relative !important; margin:0 16px !important; inset:auto !important}
.tp-hero-box{position:relative; padding:28px 24px 8px}
.tp-hero-kicker{font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}
.tp-names{display:flex; flex-direction:column; align-items:center; font:400 52px/1.1 var(--script); color:var(--acc2); margin:10px 0 14px}
.tp-names em{font:italic 400 26px/1.4 var(--serif); color:var(--acc)}
.tp-hero-date{font:600 34px/1.2 var(--serif); color:var(--acc); letter-spacing:.04em}
.tp-hero-when{margin-top:6px; color:var(--muted)}
.tp-dayrow{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin:14px 0 6px}
.tp-dayrow span{padding:6px 0; border-top:1px solid currentColor; border-bottom:1px solid currentColor; font-size:13.5px; opacity:.9}
.tp-dayrow b{font:600 30px/1 var(--serif)}
.tp-hero-venue{margin-top:16px}
.tp-hero-vt{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; opacity:.8}
.tp-hero-venue b{display:block; font:600 20px/1.3 var(--serif); margin:4px 0 2px; text-transform:uppercase}
.tp-hero-venue span{font-size:13.5px; opacity:.9}

.tp-quick{display:flex; justify-content:center; gap:8px; margin:18px 0 6px; flex-wrap:wrap}
.tp-q{display:inline-flex; align-items:center; gap:6px; min-height:36px; padding:7px 12px; border-radius:999px; border:1px solid currentColor;
  font-size:13px; font-weight:500; text-decoration:none}
.tp-q::before{content:""; width:14px; height:14px; background:currentColor; -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat}
.tp-q-call{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E")}
.tp-q-map{--i: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.25 7 13 7 13s7-7.75 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")}
.tp-q-gift{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 7h-2.2A3 3 0 0 0 12 3.8 3 3 0 0 0 6.2 7H4a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-8h1a1 1 0 0 0 1-1V8a1 1 0 0 0-1-1zm-7-1a1 1 0 1 1 1 1h-1zm-3 0v1H9a1 1 0 1 1 1-1zm1 14H7v-8h4zm0-10H5V9h6zm6 10h-4v-8h4zm2-10h-6V9h6z'/%3E%3C/svg%3E")}

/* Câu trích dẫn */
.tp-quote{padding:44px 32px}
.tp-quote blockquote{font:italic 400 19px/1.6 var(--serif); color:var(--ink)}

/* Giới thiệu */
.tp-people{display:grid; gap:22px}
.tp-person{display:grid; justify-items:center; gap:12px}
.tp-person-photo{width:190px; aspect-ratio:1; border-radius:50%; overflow:hidden; border:3px solid var(--acc); padding:5px; background:var(--card)}
.tp-person-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 20%; border-radius:50%}
.tp-person-mono{width:120px; height:120px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line); font:400 56px var(--script); color:var(--acc)}
.tp-person-role{font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.tp-person h3{font:400 40px/1.15 var(--script); color:var(--acc2)}
.tp-person-year{font-size:13.5px; color:var(--muted); margin-top:2px}
.tp-person-bio{margin-top:8px; max-width:340px; font-size:14.5px}

/* Đếm ngược */
.tp-count .tp-title{font:700 30px/1.2 var(--sans); letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-bottom:22px}
.tp-count-row{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; max-width:340px; margin:0 auto}
.tp-count-cell{display:grid; place-items:center; padding:16px 0 12px; border:1.5px solid var(--acc2); border-radius:999px; background:color-mix(in srgb, var(--card) 70%, transparent)}
.tp-count-cell b{font:600 22px/1 var(--serif); color:var(--acc2); font-variant-numeric:tabular-nums}
.tp-count-cell span{font-size:12px; color:var(--muted); margin-top:6px}
.tp-count-note{margin-top:14px; font-style:italic; color:var(--muted); min-height:1em}

/* Lời mời + các buổi tiệc */
.tp-invite .tp-kicker{order:2}
.tp-guest-label{font-size:13px; color:var(--muted)}
.tp-guest{font:400 34px/1.3 var(--script); color:var(--acc2); margin-bottom:18px; overflow-wrap:anywhere}
.tp-parents{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 24px; font-size:14px}
.tp-parents b{display:block; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--acc); margin-bottom:4px}
.tp-events{display:grid; gap:24px}
.tp-event{padding:26px 20px; border-radius:20px; background:var(--card); border:1px solid var(--line)}
.tp-event-photo{width:230px; aspect-ratio:1; margin:0 auto 18px; border-radius:50%; overflow:hidden; border:4px solid var(--acc); padding:5px; background:var(--card)}
.tp-event-photo img{width:100%; height:100%; object-fit:cover; border-radius:50%}
.tp-event-name{font:600 19px/1.3 var(--serif); letter-spacing:.08em; text-transform:uppercase; color:var(--acc)}
.tp-event-couple{font:400 32px/1.3 var(--script); color:var(--acc2); margin-top:4px}
.tp-event-invite{font-size:13.5px; color:var(--muted); margin:2px auto 10px; max-width:300px}
.tp-event-venue{font-weight:600; margin-top:8px; text-transform:uppercase; letter-spacing:.04em}
.tp-event-addr{font-size:13.5px; color:var(--muted)}
.tp-event-time{margin-top:12px; font-weight:600; font-size:14px}
.tp-event-date{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; margin:10px auto 4px; max-width:300px}
.tp-event-date span{font-size:14px; font-weight:500}
.tp-event-date b{padding:0 20px; border-left:2px solid var(--ink); border-right:2px solid var(--ink); font:600 34px/1.1 var(--serif); color:var(--acc2)}
.tp-event-lunar{font-size:12.5px; font-style:italic; color:var(--muted)}
.tp-event-acts{display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:16px}

/* Love story */
.tp-timeline{list-style:none; padding:0; position:relative; text-align:left; max-width:380px; margin:0 auto}
.tp-timeline::before{content:""; position:absolute; left:9px; top:6px; bottom:6px; width:1.5px; background:var(--line)}
.tp-timeline li{position:relative; padding:0 0 26px 38px}
.tp-timeline li:last-child{padding-bottom:0}
.tp-timeline li::before{content:"♥"; position:absolute; left:0; top:1px; width:20px; height:20px; display:grid; place-items:center; border-radius:50%;
  background:var(--acc2); color:#fff; font-size:10px}
.tp-timeline time{font-size:12.5px; font-weight:600; letter-spacing:.1em; color:var(--acc)}
.tp-timeline h3{font:600 18px/1.35 var(--serif); margin:2px 0 4px}
.tp-timeline p{font-size:14.5px; color:var(--muted); white-space:pre-line}

/* Album */
.tp-gallery{display:grid; grid-template-columns:repeat(6,1fr); gap:6px}
.tp-gallery-item{grid-column:span 2; padding:0; border:0; background:none; cursor:zoom-in; overflow:hidden; border-radius:8px; aspect-ratio:4/5}
.tp-gallery-luoi .tp-gallery-item:nth-child(5n+1),.tp-gallery-luoi .tp-gallery-item:nth-child(5n+2){grid-column:span 3}
.tp-gallery-n1 .tp-gallery-item{grid-column:1/-1}
/* Ghép ảnh: ảnh đầu lớn, các ảnh sau xếp so le */
.tp-gallery-ghep{grid-template-columns:repeat(2,1fr); grid-auto-flow:dense}
.tp-gallery-ghep .tp-gallery-item{grid-column:auto; aspect-ratio:3/4}
.tp-gallery-ghep .tp-gallery-item:nth-child(3n+1){grid-column:1/-1; aspect-ratio:4/3}
.tp-gallery-ghep .tp-gallery-item:nth-child(6n+2){grid-row:span 2; aspect-ratio:auto}
/* Trượt: băng ảnh vuốt ngang */
.tp-gallery-truot{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -24px; padding:4px 24px 12px; scrollbar-width:none}
.tp-gallery-truot::-webkit-scrollbar{display:none}
.tp-gallery-truot .tp-gallery-item{flex:0 0 78%; scroll-snap-align:center; aspect-ratio:3/4; border-radius:16px; box-shadow:0 10px 24px -12px rgba(0,0,0,.35)}
.tp-swipe{margin-top:8px; font-size:12.5px; color:var(--muted)}
.tp-gallery-item img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.tp-gallery-item:hover img{transform:scale(1.04)}
.tp-lb{position:fixed; inset:0; z-index:60; display:grid; place-items:center; background:rgba(10,8,8,.92); padding:48px 12px}
.tp-lb img{max-width:100%; max-height:calc(100vh - 110px); object-fit:contain; border-radius:6px}
.tp-lb button{position:absolute; border:0; background:rgba(255,255,255,.14); color:#fff; width:44px; height:44px; border-radius:50%; font-size:26px; line-height:1; cursor:pointer}
.tp-lb-close{top:12px; right:12px}
.tp-lb-nav.prev{left:10px; top:50%} .tp-lb-nav.next{right:10px; top:50%}
.tp-lb-count{position:absolute; bottom:14px; left:0; right:0; color:#fff; font:500 13px system-ui; text-align:center}

/* Gia đình + thông báo */
.tp-family{padding-top:44px; padding-bottom:44px}
.tp-fam{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-bottom:22px}
.tp-fam-side{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--acc); margin-bottom:6px}
.tp-fam-x{font-size:13px; color:var(--muted)}
.tp-fam-name{font:600 15px/1.45 var(--serif); overflow-wrap:anywhere}
.tp-fam-addr{margin-top:4px; font-size:12.5px; color:var(--muted); white-space:pre-line; overflow-wrap:anywhere}
.tp-note-text{font:600 14px/1.7 var(--sans); letter-spacing:.12em; text-transform:uppercase; white-space:pre-line; margin:4px 0 18px}
.tp-fam-people{display:grid; gap:4px; justify-items:center}
.tp-fam-role{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.tp-fam-full{font:400 38px/1.2 var(--script); color:var(--acc2); overflow-wrap:anywhere}
.tp-fam-amp{font:italic 22px var(--serif); color:var(--acc)}
.tp-event-vt{margin-top:10px; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.tp-event-times{display:flex; justify-content:center; gap:10px; margin-top:12px}
.tp-event-times div{display:grid; min-width:104px; padding:8px 10px; border-radius:12px; border:1px solid var(--line)}
.tp-event-times b{font:600 18px var(--serif); color:var(--acc2)}
.tp-event-times span{font-size:12px; color:var(--muted)}
.tp-map{display:block; width:100%; height:220px; margin-top:16px; border:0; border-radius:14px; background:#e9e4dc}
.tp-map-ph{display:grid; place-items:center; color:#7a6f66; font-size:13px; height:140px}
/* Lịch trình + dress code */
.tp-sched-list{list-style:none; padding:0; max-width:340px; margin:0 auto; text-align:left}
.tp-sched-list li{display:grid; grid-template-columns:72px 1fr; gap:14px; align-items:center; padding:12px 0; border-bottom:1px dashed var(--line)}
.tp-sched-list li:last-child{border-bottom:0}
.tp-sched-list time{font:600 18px var(--serif); color:var(--acc2); text-align:right}
.tp-dress-row{display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.tp-dress-dot{width:46px; height:46px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px var(--line), 0 6px 14px -6px rgba(0,0,0,.35)}
.tp-dress-note{max-width:340px; margin:0 auto; color:var(--muted)}
/* RSVP + lời chúc */
.tp-rsvp-lead{margin:-10px auto 18px; max-width:320px; color:var(--muted)}
.tp-btn-big{min-height:50px; padding:12px 30px; font-size:15px}
.tp-modal{position:fixed; inset:0; z-index:70; display:grid; place-items:end center; background:rgba(15,10,12,.55); padding:12px; overflow:auto}
.tp-modal-box{position:relative; width:100%; max-width:440px; max-height:calc(100vh - 24px); overflow:auto; padding:30px 18px 20px; border-radius:22px; background:var(--bg); color:var(--ink); text-align:center; animation:tp-up .3s ease}
.tp-modal-box .tp-title{font-size:38px; margin-bottom:14px}
.tp-modal-box .tp-form{border:0; padding:0; background:transparent}
.tp-modal-close{position:absolute; top:10px; right:10px; width:36px; height:36px; border:0; border-radius:50%; background:rgba(0,0,0,.06); color:inherit; font-size:22px; cursor:pointer}
@keyframes tp-up{from{transform:translateY(30px); opacity:0}}
@media (min-width:520px){ .tp-modal{place-items:center} }
.tp-ruby .tp-modal-box{background:#fff; color:#3a1f1f; --muted:#7a5a5e; --acc:#9b2335; --acc2:#9b2335; --line:#ecd6d9; --ink:#3a1f1f; --on-acc:#fff}
.tp-ruby .tp-modal-box .tp-title{color:#9b2335}
/* Nhạc nền */
.tp-music{position:fixed; left:max(14px, calc(50% - 226px)); bottom:18px; z-index:45; width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:var(--acc2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M12 3v10.55A4 4 0 1 0 14 17V7h4V3z'/%3E%3C/svg%3E") center/22px no-repeat;
  box-shadow:0 6px 16px rgba(0,0,0,.25); opacity:.92}
.tp-music.on{animation:tp-spin 4s linear infinite}
.tp-music:not(.on)::after{content:""; position:absolute; left:10px; right:10px; top:50%; height:2px; background:#fff; transform:rotate(-40deg)}
@keyframes tp-spin{to{transform:rotate(360deg)}}
.tp-ruby .tp-music{background-color:#fff; filter:invert(1) hue-rotate(180deg)}

.tp-form{display:grid; gap:12px; text-align:left; max-width:380px; margin:0 auto; padding:22px 18px; border-radius:18px; background:var(--card); border:1px solid var(--line)}
.tp-field{display:grid; gap:4px}
.tp-field span{font-size:13px; font-weight:500; color:var(--muted)}
.tp-field[hidden]{display:none}
.tp-form input,.tp-form select,.tp-form textarea{width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--line); background:#fff; color:#222; font:400 15px var(--sans)}
.tp-form input:focus,.tp-form select:focus,.tp-form textarea:focus{outline:2px solid color-mix(in srgb, var(--acc) 45%, transparent); border-color:var(--acc)}
.tp-choices{display:grid; gap:6px}
.tp-choices label{display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; color:#222; cursor:pointer; font-size:14.5px}
.tp-choices label:has(input:checked){border-color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc)}
.tp-choices input{accent-color:var(--acc); width:16px; height:16px; margin:0}
.tp-two{display:grid; grid-template-columns:1fr 1.3fr; gap:10px}
.tp-note{font-size:12.5px; color:var(--muted)}
.tp-msg{min-height:1.2em; font-size:13.5px; color:var(--muted); text-align:center}
.tp-msg.bad{color:#c0392b}
.tp-done{padding:18px 4px; text-align:center; font:500 16px/1.5 var(--serif)}
.tp-wishes{display:grid; gap:10px; max-width:380px; margin:18px auto 0; max-height:360px; overflow:auto; text-align:left}
.tp-wish{padding:12px 14px; border-radius:14px; background:color-mix(in srgb, var(--card) 85%, transparent); border:1px solid var(--line)}
.tp-wish blockquote{font-size:14.5px; white-space:pre-line; overflow-wrap:anywhere}
.tp-wish figcaption{margin-top:4px; font-size:13px; font-weight:600; color:var(--acc)}

/* Quà mừng */
.tp-gift .tp-title{font:600 21px/1.4 var(--serif); letter-spacing:.06em; text-transform:uppercase; color:var(--acc)}
.tp-gift-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.tp-gift-row.one{grid-template-columns:minmax(0,260px); justify-content:center}
.tp-gift-card{display:grid; justify-items:center; gap:6px; padding:16px 12px; border-radius:16px; background:var(--card); border:1px solid var(--line); color:var(--ink)}
.tp-gift-card h3{font:600 13.5px/1.35 var(--sans)}
.tp-qr{width:100%; max-width:170px; aspect-ratio:1; background:#fff; border-radius:8px; padding:4px}
.tp-qr-demo{width:100%; max-width:170px; aspect-ratio:1; display:grid; place-items:center; padding:14px; border-radius:10px; font-size:12px; color:#555;
  background:repeating-conic-gradient(#e7e7e7 0 25%, #fff 0 50%) 0 0/18px 18px; border:1px dashed #bbb}
.tp-qr-demo span{background:#fff; padding:4px 8px; border-radius:6px}
.tp-gift-bank{font-size:13px; font-weight:600}
.tp-gift-acct{font:600 15px/1.2 ui-monospace,monospace; letter-spacing:.04em}
.tp-gift-name{font-size:12px; color:var(--muted)}
.tp-gift-card .tp-btn{min-height:34px; padding:6px 12px; font-size:12px}

/* Lời cảm ơn */
.tp-thanks{padding-bottom:40px}
.tp-thanks .tp-title{font-size:54px}
.tp-thanks-text{max-width:360px; margin:0 auto 22px; font-size:15px; white-space:pre-line}
.tp-brand{display:block; padding:16px 16px 84px; font-size:12px; color:var(--muted) !important; text-decoration:none; opacity:.85}
.tp-brand:hover{text-decoration:underline}

/* Hiệu ứng */
.tp-fall{position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:5}
.tp-fall span{position:absolute; top:-30px; color:var(--fall, #e6a9b4); opacity:.75; animation:tp-fall linear infinite}
@keyframes tp-fall{to{transform:translate3d(30px, calc(100vh + 60px), 0) rotate(260deg)}}
.tp-fall{position:fixed; left:50%; width:min(480px,100%); transform:translateX(-50%)}
.tp-rv{opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease}
.tp-rv.is-in{opacity:1; transform:none}
.tp-opened{animation:tp-in .9s ease}
@keyframes tp-in{from{opacity:0; transform:scale(.98)}}
@media (prefers-reduced-motion:reduce){ .tp-rv{opacity:1; transform:none; transition:none} .tp-opened{animation:none} .tp-fall{display:none} }

/* Bìa thư */
.tp-env{position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:24px;
  background:radial-gradient(circle at 50% 40%, var(--card), var(--bg)); cursor:pointer; transition:opacity .7s .5s, visibility .7s .5s; text-align:center; color:var(--ink); outline:none}
.tp-env.open{opacity:0; visibility:hidden}
.tp-env-body{position:relative; width:240px; height:160px; border-radius:10px; background:var(--acc); box-shadow:0 20px 40px rgba(0,0,0,.2); margin-bottom:22px}
.tp-env-flap{position:absolute; inset:0 0 auto; height:96px; background:color-mix(in srgb, var(--acc) 80%, #000); clip-path:polygon(0 0,100% 0,50% 100%); transform-origin:top; transition:transform .6s}
.tp-env.open .tp-env-flap{transform:rotateX(180deg)}
.tp-env-seal{position:absolute; left:50%; top:96px; transform:translate(-50%,-50%); width:58px; height:58px; display:grid; place-items:center; border-radius:50%;
  background:var(--acc2); color:#fff; font:400 22px var(--script); box-shadow:0 4px 10px rgba(0,0,0,.25)}
.tp-env-to{font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.tp-env-guest{font:600 20px/1.3 var(--serif); color:var(--ink); max-width:320px; overflow-wrap:anywhere}
.tp-env-names{font:400 40px/1.2 var(--script); color:var(--acc2)}
.tp-env-hint{font-size:13px; color:var(--muted); animation:tp-pulse 1.6s ease-in-out infinite}
@keyframes tp-pulse{50%{opacity:.4}}

.tp-demo-bar{position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:40; display:flex; align-items:center; gap:12px; width:max-content; max-width:calc(100% - 24px);
  padding:8px 8px 8px 16px; border-radius:999px; background:rgba(25,20,20,.88); color:#fff; font:500 13px "Be Vietnam Pro",system-ui,sans-serif; box-shadow:0 8px 24px rgba(0,0,0,.25)}
.tp-demo-bar span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tp-demo-cta{flex:none; padding:8px 14px; border-radius:999px; background:#e2566f; color:#fff; text-decoration:none; font-weight:600}
.tp-loading,.tp-error{max-width:420px; margin:0 auto; padding:30vh 24px 0; text-align:center; font-family:"Be Vietnam Pro",system-ui,sans-serif; color:#3b2f2a}
.tp-error h1{font:400 40px "Great Vibes",cursive; color:#b4536a; margin:0 0 8px}
.tp-error p{color:#6b5d55; margin:0 0 20px}
.tp-error .tp-btn{--acc:#b4536a; --on-acc:#fff}

/* ================= FLOWER — kem cổ điển, viền vàng ================= */
.tp-flower{--bg:#f6efe6; --ink:#3b2f2a; --muted:#8a776a; --acc:#b0652a; --acc2:#c9566b; --card:#fffaf3; --line:#ead9c5; --fall:#d9b8a0;
  background:var(--bg) url(anh/nen-flower.webp) top center/100% auto no-repeat}
.tp-flower .tp-hero-box{padding-top:34px}
.tp-flower .tp-names{flex-direction:row; flex-wrap:wrap; justify-content:center; gap:0 10px; font:700 34px/1.3 var(--serif); color:#4a4038}
.tp-flower .tp-names em{font:400 30px var(--script); color:var(--acc2)}
.tp-flower .tp-hero-date{order:3}
.tp-flower .tp-hero-photo{margin:12px 16px 0; border-radius:220px 220px 18px 18px; overflow:hidden; border:4px solid #d6b98c; padding:6px; background:#fffaf3}
.tp-flower .tp-hero-photo img{border-radius:210px 210px 12px 12px}
.tp-flower .tp-hero-date{margin-top:6px; font-size:40px}
.tp-flower .tp-count .tp-title{font:400 0/0 a; height:64px; margin:0 auto 18px; max-width:320px; background:url(anh/save-the-date.webp) center/contain no-repeat}
.tp-flower .tp-count .tp-kicker{display:none}
.tp-flower .tp-invite .tp-title{font-size:48px}
.tp-flower .tp-event{background:transparent; border:0; padding:8px 4px}
.tp-flower .tp-event-photo{border-color:#8a6a3a}
.tp-flower .tp-event-name{font:500 14px var(--sans); letter-spacing:.06em; color:var(--ink)}

/* ================= ROSE — đỏ rượu vang, hoa hồng vẽ tay ================= */
.tp-rose{--bg:#fbf4ee; --ink:#3a1f1f; --muted:#8b6b66; --acc:#7d1418; --acc2:#7d1418; --card:#fff; --line:#ecd6cc}
.tp-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:4px}
.tp-strip-cell{position:relative; aspect-ratio:3/4; overflow:hidden}
.tp-strip-cell img{width:100%; height:100%; object-fit:cover}
.tp-strip-cell b{position:absolute; right:6px; bottom:34%; font:700 46px/1 var(--sans); color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35)}
.tp-rose .tp-hero-box{margin:-6px 12px 0; padding:48px 22px 78px; border-radius:22px; background:var(--acc); color:#fff}
.tp-rose .tp-hero-box::before{content:""; position:absolute; left:-12px; right:-12px; top:-36px; height:80px; background:url(anh/hoa-hong.webp) left top/34% auto no-repeat, url(anh/hoa-hong.webp) right top/34% auto no-repeat; pointer-events:none}
.tp-rose .tp-hero-box::after{content:""; position:absolute; left:-18px; right:-18px; bottom:-48px; height:110px; background:url(anh/hoa-thien-dieu.webp) left bottom/38% auto no-repeat, url(anh/hoa-thien-dieu.webp) right bottom/38% auto no-repeat; transform:scaleX(1); pointer-events:none}
.tp-rose .tp-hero-kicker{color:#fff; font:400 30px var(--script); letter-spacing:0; text-transform:none}
.tp-rose .tp-names{color:#fff; font:400 30px/1.3 var(--serif)}
.tp-rose .tp-names em{color:#fff; font-size:24px}
.tp-rose .tp-hero-vt{font:500 22px var(--serif); letter-spacing:.04em; opacity:1}
.tp-rose .tp-hero-venue b{font:400 13.5px var(--sans); text-transform:none}
.tp-rose .tp-quick{color:#fff}
.tp-rose .tp-intro{padding-top:80px}
.tp-rose .tp-title,.tp-rose .tp-intro .tp-title{font:800 28px/1.2 var(--serif); letter-spacing:.06em; text-transform:uppercase}
.tp-rose .tp-person{position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/3; justify-items:stretch; align-content:end; color:#fff}
.tp-rose .tp-person-photo{position:absolute; inset:0; width:auto; border:0; padding:0; border-radius:0}
.tp-rose .tp-person-photo img{border-radius:0}
.tp-rose .tp-person-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent 35%, rgba(40,10,10,.72))}
.tp-rose .tp-person-text{position:relative; padding:18px}
.tp-rose .tp-person-role{display:none}
.tp-rose .tp-person h3,.tp-rose .tp-person-year{color:#fff}
.tp-rose .tp-person h3{font:400 30px var(--serif)}
.tp-rose .tp-count{margin:0 12px; border-radius:22px; color:#fff; background:linear-gradient(rgba(125,20,24,.82),rgba(125,20,24,.82)), url(anh/cap-doi-7.jpg) center/cover}
.tp-rose .tp-count .tp-title,.tp-rose .tp-count .tp-kicker,.tp-rose .tp-count-note{color:#fff}
.tp-rose .tp-count-cell{border-color:#fff; background:rgba(255,255,255,.08)}
.tp-rose .tp-count-cell b,.tp-rose .tp-count-cell span{color:#fff}
.tp-rose .tp-event{border-radius:180px 180px 20px 20px; padding-top:40px; border:2px solid var(--line)}
.tp-rose .tp-timeline li::before{background:var(--acc)}

/* ================= KOREA — ảnh tràn màn hình, kính mờ ================= */
.tp-korea{--bg:#efe4d8; --ink:#3d3029; --muted:#7f6c5f; --acc:#8a6a4f; --acc2:#6f523c; --card:#f8f1e9; --line:#dccbb8;
  --serif:"Cormorant Garamond","Playfair Display",Georgia,serif}
.tp-korea .tp-hero{min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; padding:24px 16px 32px}
.tp-korea .tp-hero-photo,.tp-romance .tp-hero-photo{position:absolute; inset:0}
.tp-korea .tp-hero-photo img,.tp-romance .tp-hero-photo img{width:100%; height:100%; aspect-ratio:auto}
.tp-korea .tp-hero-box{width:100%; padding:26px 20px 18px; border-radius:14px; border:1px solid rgba(255,255,255,.35); background:rgba(70,55,45,.42);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:#fff}
.tp-korea .tp-hero-kicker{color:#fff; font:500 26px var(--serif); letter-spacing:.02em; text-transform:none}
.tp-korea .tp-names{color:#fff; font:500 34px/1.25 var(--serif)}
.tp-korea .tp-names em{color:#fff}
.tp-korea .tp-hero-when{color:#fff; text-transform:uppercase; font-size:13px; letter-spacing:.1em}
.tp-korea .tp-hero-vt{font:500 24px var(--serif); text-transform:none; letter-spacing:0; opacity:1}
.tp-korea .tp-hero-venue b{font:500 16px var(--sans)}
.tp-korea .tp-quick{color:#fff; padding-top:14px; border-top:1px solid rgba(255,255,255,.4)}
.tp-korea .tp-title{font:500 40px/1.2 var(--serif); letter-spacing:.02em}
.tp-korea .tp-person-photo{border-radius:16px; width:100%; max-width:360px; aspect-ratio:4/5; border:0; padding:0}
.tp-korea .tp-person-photo img{border-radius:16px}
.tp-korea .tp-person h3{font:500 34px var(--serif); color:var(--ink)}
.tp-korea .tp-count{color:#fff; background:linear-gradient(rgba(50,38,30,.55),rgba(50,38,30,.55)), url(anh/cap-doi-7.jpg) center/cover}
.tp-korea .tp-count .tp-title,.tp-korea .tp-count .tp-kicker,.tp-korea .tp-count-note{color:#fff}
.tp-korea .tp-count-cell{border-color:#fff; background:rgba(255,255,255,.12)}
.tp-korea .tp-count-cell b,.tp-korea .tp-count-cell span{color:#fff}
.tp-korea .tp-event{border-radius:6px}
.tp-korea .tp-event-date b{color:var(--ink)}
.tp-korea .tp-names span,.tp-romance .tp-names span{overflow-wrap:anywhere}

/* ================= ROMANCE — vòm mềm, hồng phấn ================= */
.tp-romance{--bg:#fbf1f0; --ink:#4a3236; --muted:#8e7276; --acc:#b5707a; --acc2:#a35562; --card:#fff; --line:#efd6d6}
.tp-romance .tp-hero{min-height:100vh; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; padding:0 0 28px}
.tp-romance .tp-hero-box{margin:0 18px; padding:40px 20px 24px; border-radius:200px 200px 0 0; background:rgba(120,95,90,.45); color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.tp-romance .tp-hero-kicker{color:#fff; font:500 26px var(--serif); letter-spacing:0; text-transform:none}
.tp-romance .tp-names{color:#fff; font:700 34px/1.25 var(--sans)}
.tp-romance .tp-names em{color:#fff; font:700 28px var(--sans)}
.tp-romance .tp-hero-when{color:#fff; text-transform:uppercase; font-size:13px; letter-spacing:.06em}
.tp-romance .tp-hero-venue b{font:800 20px var(--sans)}
.tp-romance .tp-quick{margin:20px -20px -12px; padding-top:14px; color:#fff}
.tp-romance .tp-q{background:rgba(255,255,255,.18); border-color:transparent; border-radius:8px}
.tp-romance .tp-q-gift{background:rgba(60,40,40,.55)}
.tp-romance .tp-person-photo{border-radius:200px 200px 16px 16px; width:220px; aspect-ratio:3/4; border:0; padding:0}
.tp-romance .tp-person-photo img{border-radius:200px 200px 16px 16px}
.tp-romance .tp-person h3{font:600 30px var(--serif); color:var(--ink)}
.tp-romance .tp-event{border-radius:200px 200px 24px 24px; padding-top:48px}
.tp-romance .tp-invite .tp-title{font-size:48px}

/* ================= NATURE — trắng, lá bạch đàn ================= */
.tp-nature{--bg:#fdfdfb; --ink:#2f3a2c; --muted:#6f7a68; --acc:#5b7b4f; --acc2:#7a4a2e; --card:#fff; --line:#dfe6d6;
  --serif:"Cormorant Garamond","Playfair Display",Georgia,serif}
.tp-nature::before{content:""; position:absolute; right:-10px; top:0; width:150px; height:190px; background:url(anh/la-goc.webp) right top/contain no-repeat; z-index:2; pointer-events:none}
.tp-nature::after{content:""; position:absolute; left:-6px; top:700px; width:110px; height:120px; background:url(anh/la-tren.webp) left top/contain no-repeat; transform:scaleX(-1); z-index:2; pointer-events:none}
.tp-nature .tp-hero{padding:36px 18px 10px}
.tp-nature .tp-hero-photo{border-radius:220px 220px 0 0; overflow:hidden}
.tp-nature .tp-hero-box{margin-top:-60px; border-radius:200px 200px 0 0; background:#fff; padding-top:40px}
.tp-nature .tp-hero-kicker{font:500 18px var(--serif); color:var(--ink); letter-spacing:.06em}
.tp-nature .tp-names{color:var(--ink); font:700 36px/1.25 var(--sans)}
.tp-nature .tp-names em{color:var(--ink); font:700 30px var(--sans)}
.tp-nature .tp-hero-when{font:500 20px var(--serif); color:var(--ink)}
.tp-nature .tp-dayrow span{border:0}
.tp-nature .tp-dayrow b{color:var(--acc2)}
.tp-nature .tp-hero-venue b{font:700 22px var(--serif)}
.tp-nature .tp-quick{color:var(--acc)}
.tp-nature .tp-q{background:var(--acc); color:#fff; border-color:var(--acc)}
.tp-nature .tp-title{font:500 40px/1.2 var(--serif); color:var(--acc)}
.tp-nature .tp-person-photo{border-radius:16px; width:100%; max-width:340px; aspect-ratio:4/5; border:0; padding:0}
.tp-nature .tp-person-photo img{border-radius:16px}
.tp-nature .tp-person h3{font:600 32px var(--serif); color:var(--ink)}
.tp-nature .tp-count{background:#f2f5ec}
.tp-nature .tp-count-cell{border-color:var(--acc)}
.tp-nature .tp-count-cell b{color:var(--acc)}
.tp-nature .tp-event{border-radius:200px 200px 18px 18px; padding-top:46px; border-color:var(--line)}
.tp-nature .tp-event-date b{color:var(--acc2)}
.tp-nature .tp-timeline li::before{background:var(--acc)}

/* ================= RUBY — đỏ thắm truyền thống ================= */
.tp-ruby{--bg:#9b2335; --ink:#fff; --muted:#f3cfd4; --acc:#fff; --acc2:#fff; --card:rgba(255,255,255,.07); --line:rgba(255,255,255,.45); --on-acc:#9b2335; --fall:#ffd6dc}
.tp-ruby .tp-hero{background:#efe2d6}
.tp-ruby .tp-hero-photo img{aspect-ratio:3/4}
.tp-ruby .tp-hero-box{position:absolute; inset:0; padding:28px 18px; display:flex; flex-direction:column; justify-content:flex-start}
.tp-ruby .tp-hero-box .tp-hero-kicker{order:2; margin-top:auto; color:#9b2335; font:700 20px var(--sans); letter-spacing:.06em; text-align:right}
.tp-ruby .tp-hero-when{order:3; color:#9b2335; font-weight:600; text-align:right; padding:6px 0; border-top:1.5px solid #9b2335; letter-spacing:.04em; text-transform:uppercase; font-size:14px}
.tp-ruby .tp-hero-date{order:4; color:#9b2335; text-align:right; padding-bottom:8px; border-bottom:1.5px solid #9b2335; font-size:28px}
.tp-ruby .tp-names{align-items:stretch; color:#a01f33; font:800 40px/1.05 var(--sans); transform:rotate(-12deg); margin:30px 0 0; text-shadow:2px 2px 0 rgba(255,255,255,.75)}
.tp-ruby .tp-names span:first-child{text-align:left} .tp-ruby .tp-names span:last-child{text-align:right}
.tp-ruby .tp-names em{color:#a01f33; font:800 34px var(--sans)}
.tp-ruby .tp-quote{padding-bottom:20px}
.tp-ruby .tp-quote blockquote{color:#fff; font-size:18px}
.tp-ruby .tp-quote::after{content:""; display:block; width:96px; height:96px; margin:18px auto 0; background:url(anh/trai-tim.webp) center/contain no-repeat; filter:invert(1)}
.tp-ruby .tp-title{font:400 50px/1.1 var(--script); color:#fff}
.tp-ruby .tp-invite .tp-title{padding-top:18px; border-top:2px solid rgba(255,255,255,.7); display:inline-block}
.tp-ruby .tp-count-cell{border-color:#fff}
.tp-ruby .tp-count .tp-title{color:#fff; font:700 30px/1.2 var(--sans)}
.tp-ruby .tp-event{border:2px solid rgba(255,255,255,.5); border-radius:4px; background:rgba(255,255,255,.06)}
.tp-ruby .tp-event-date b{border-color:#fff; color:#fff}
.tp-ruby .tp-btn{background:#fff; border-color:#fff}
.tp-ruby .tp-btn-ghost{background:transparent; color:#fff !important}
.tp-ruby .tp-gallery-item{border:3px solid #fff; border-radius:2px}
.tp-ruby .tp-timeline::before{background:rgba(255,255,255,.4)}
.tp-ruby .tp-timeline li::before{background:#fff; color:#9b2335}
.tp-ruby .tp-form,.tp-ruby .tp-gift-card{background:#fff; color:#3a1f1f; --muted:#7a5a5e; --acc:#9b2335; --line:#ecd6d9; --ink:#3a1f1f; --on-acc:#fff}
.tp-ruby .tp-form .tp-btn,.tp-ruby .tp-gift-card .tp-btn{background:#9b2335; border-color:#9b2335; color:#fff !important}
.tp-ruby .tp-gift-card .tp-btn-ghost{background:transparent; color:#9b2335 !important}
.tp-ruby .tp-wish{background:rgba(255,255,255,.1)}
.tp-ruby .tp-wish figcaption{color:#ffd6dc}
.tp-ruby .tp-env-body{background:#9b2335} .tp-ruby .tp-env-seal{background:#d4a64a}
.tp-ruby.tp-env{color:#fff}
.tp-ruby .tp-brand{color:#f3cfd4 !important}

@media (max-width:360px){
  .tp-names{font-size:44px}
  .tp-gift-row{grid-template-columns:1fr}
  .tp-two{grid-template-columns:1fr}
}

/* ================= Trải nghiệm mobile first (19/10) ================= */
/* Ảnh hiện dần, khung giữ chỗ có màu nền để trang không giật */
.tp img{transition:opacity .45s ease}
.tp img:not(.is-loaded){opacity:0}
.tp-hero-photo,.tp-strip-cell,.tp-gallery-item,.tp-person-photo,.tp-event-photo{background-color:color-mix(in srgb, var(--line) 55%, var(--bg))}
.tp-korea .tp-hero,.tp-romance .tp-hero{min-height:100svh}
.tp-btn{min-height:46px; -webkit-tap-highlight-color:transparent; touch-action:manipulation; transition:transform .12s ease, filter .15s}
.tp-btn:active{transform:scale(.97)}
.tp-brand{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.tp-has-demo .tp-hero-nophoto{padding-top:76px}

/* Chờ mở phong bì */
.tp-waiting{visibility:hidden}
.tp-opened{animation:tp-rise .7s cubic-bezier(.2,.8,.2,1)}
@keyframes tp-rise{from{opacity:0; transform:translateY(28px)}}

/* Phong bì: nắp mở, thư trồi lên, rồi mờ dần */
.tp-env{transition:opacity .6s .55s ease, visibility .6s .55s}
.tp-env-body{transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.tp-env-body::before{content:""; position:absolute; left:14px; right:14px; top:10px; height:120px; border-radius:6px; background:#fffdf8; box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:transform .55s .2s cubic-bezier(.2,.8,.2,1); z-index:0}
.tp-env-flap{z-index:2; transform-origin:top; transition:transform .45s ease}
.tp-env-seal{z-index:3; transition:opacity .25s, transform .3s}
.tp-env.open .tp-env-seal{opacity:0; transform:translate(-50%,-50%) scale(.6)}
.tp-env.open .tp-env-flap{transform:rotateX(180deg); z-index:0}
.tp-env.open .tp-env-body::before{transform:translateY(-70px)}
.tp-env.open .tp-env-body{transform:translateY(30px) scale(1.04)}
.tp-env-hint{display:inline-flex; align-items:center; gap:8px; margin-top:8px; padding:10px 18px; border-radius:999px; background:color-mix(in srgb, var(--acc) 12%, transparent); color:var(--acc); font-weight:600}
@media (prefers-reduced-motion:reduce){ .tp-env,.tp-env *,.tp-env-body::before{transition:none !important; animation:none !important} }

/* Khung chờ tải thiệp */
.tp-skel{max-width:480px; margin:0 auto; padding:0 0 40px; display:grid; gap:14px; justify-items:center}
.tp-skel > div{background:linear-gradient(90deg,#eadfd4 25%,#f5ede5 50%,#eadfd4 75%); background-size:200% 100%; animation:tp-shimmer 1.2s linear infinite; border-radius:12px}
.tp-skel-photo{width:100%; aspect-ratio:4/5; border-radius:0 !important}
.tp-skel-line{height:18px}
.tp-skel .w60{width:60%} .tp-skel .w80{width:80%; height:34px} .tp-skel .w40{width:40%}
@keyframes tp-shimmer{to{background-position:-200% 0}}

/* Thanh thao tác nổi ở đáy */
.tp-dock{position:fixed; left:50%; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:45; display:flex; gap:2px; width:min(452px, calc(100% - 20px));
  padding:6px; border-radius:20px; background:color-mix(in srgb, var(--card) 97%, transparent); -webkit-backdrop-filter:blur(14px) saturate(1.4); backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 10px 30px -8px rgba(0,0,0,.28), 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent);
  transform:translate(-50%, calc(100% + 30px)); transition:transform .35s cubic-bezier(.2,.8,.2,1); font-family:"Be Vietnam Pro",system-ui,sans-serif}
.tp-dock.is-in{transform:translate(-50%, 0)}
.tp-dock.is-in.is-hidden{transform:translate(-50%, calc(100% + 30px))}
.tp-dock-btn{flex:1; min-width:0; display:grid; justify-items:center; gap:3px; padding:7px 2px 6px; border:0; border-radius:14px; background:transparent; color:var(--ink);
  font:600 11px/1.1 "Be Vietnam Pro",system-ui,sans-serif; text-decoration:none; cursor:pointer; -webkit-tap-highlight-color:transparent}
.tp-dock-btn svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.tp-dock-btn span{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.tp-dock-btn:active{background:color-mix(in srgb, var(--acc) 14%, transparent)}
.tp-dock-btn:focus-visible{outline:2px solid var(--acc); outline-offset:-2px}
.tp-dock .tp-dock-rsvp{background:var(--acc2); color:#fff}
.tp-dock-nhac.on svg{animation:tp-spin 3s linear infinite}
.tp-dock-nhac:not(.on){opacity:.65}
.tp-dock.tp-ruby{--card:#fff; --ink:#3a1f1f; --acc:#9b2335; --acc2:#9b2335; --line:#ecd6d9}
@media (prefers-reduced-motion:reduce){ .tp-dock{transition:none} .tp-dock-nhac.on svg{animation:none} }

/* Thanh trên của thiệp mẫu */
.tp-demo{position:fixed; top:calc(8px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); z-index:46; display:flex; align-items:center; gap:6px;
  width:min(464px, calc(100% - 16px)); padding:6px; border-radius:16px; background:rgba(28,22,24,.82); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  color:#fff; font:500 13px "Be Vietnam Pro",system-ui,sans-serif; box-shadow:0 8px 24px rgba(0,0,0,.25)}
.tp-demo-back{display:grid; place-items:center; width:40px; height:40px; flex:none; border-radius:11px; color:#fff !important; text-decoration:none; font-size:28px; line-height:1}
.tp-demo-back:active{background:rgba(255,255,255,.12)}
.tp-demo-pick{flex:1; min-width:0; display:grid; text-align:left; padding:3px 30px 3px 10px; min-height:40px; border:0; border-radius:11px;
  background:rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 8px center/16px no-repeat;
  color:#fff; cursor:pointer; font:inherit}
.tp-demo-pick small{font-size:10.5px; opacity:.75}
.tp-demo-pick b{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tp-demo-cta{flex:none; min-height:40px; padding:0 14px; border:0; border-radius:11px; background:#f0157a; color:#fff; font:700 13.5px "Be Vietnam Pro",system-ui,sans-serif; cursor:pointer}
.tp-demo-cta:active{filter:brightness(1.1)}
.tp-demo-bar{display:none}

/* Bảng chọn trượt lên */
.tp-sheet{position:fixed; inset:0; z-index:80; display:flex; align-items:flex-end; justify-content:center; background:rgba(15,10,12,0); transition:background .25s}
.tp-sheet[hidden]{display:none}
.tp-sheet.open{background:rgba(15,10,12,.5)}
.tp-sheet-panel{width:100%; max-width:520px; max-height:88vh; overflow:auto; padding:8px 18px calc(20px + env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; background:#fff; color:#2b2024;
  font-family:"Be Vietnam Pro",system-ui,sans-serif; transform:translateY(100%); transition:transform .3s cubic-bezier(.2,.8,.2,1); overscroll-behavior:contain}
.tp-sheet.open .tp-sheet-panel{transform:none}
.tp-sheet-grip{display:block; width:40px; height:5px; margin:4px auto 10px; border-radius:9px; background:#ddd}
.tp-sheet h2{margin:0 0 12px; font-size:17px}
.tp-sheet h3{margin:18px 0 10px; font-size:15px}
.tp-sheet-row{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -18px; padding:2px 18px 8px; scrollbar-width:none}
.tp-sheet-row::-webkit-scrollbar{display:none}
.tp-sheet-tpl{flex:0 0 104px; scroll-snap-align:start; padding:0; border:2px solid transparent; border-radius:14px; background:none; cursor:pointer; text-align:center; font:600 12.5px "Be Vietnam Pro",system-ui,sans-serif; color:inherit}
.tp-sheet-tpl img{display:block; width:100%; aspect-ratio:9/16; object-fit:cover; object-position:top; border-radius:11px; background:#eee}
.tp-sheet-tpl span{display:block; padding:5px 0 2px}
.tp-sheet-tpl[aria-pressed="true"]{border-color:#f0157a}
.tp-sheet-tpl[aria-pressed="true"] span{color:#c40c61}
.tp-sheet-try{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px}
.tp-sheet-try label{display:grid; gap:4px; font-size:12.5px; font-weight:600; color:#6f6166}
.tp-sheet-try label:nth-child(3){grid-column:1/-1}
.tp-sheet-try input{width:100%; min-height:46px; padding:10px 12px; border:1px solid #e3d9db; border-radius:12px; font:400 16px "Be Vietnam Pro",system-ui,sans-serif; color:#2b2024; background:#fff}
.tp-sheet-try input:focus{outline:none; border-color:#f0157a; box-shadow:0 0 0 3px #f0157a22}
.tp-sheet-try .tp-btn{grid-column:1/-1; --acc:#f0157a; --on-acc:#fff; margin-top:4px; font-family:"Be Vietnam Pro",system-ui,sans-serif}

/* Ô nhập trong thiệp ≥16px để iPhone không tự phóng to */
.tp-form input,.tp-form select,.tp-form textarea{font-size:16px; min-height:46px}
.tp-choices label{min-height:46px}

.tp-env-seal{font:600 17px/1 var(--serif); letter-spacing:.02em}

/* ================= Trình bày chữ như thiệp in (19/10) =================
   Dòng ngắn, căn giữa: chia dòng cân đối. Đoạn dài: tránh chữ lẻ cuối đoạn. Tên & từng dòng thông báo: một dòng, tự co (data-fit). */
.tp h1,.tp h2,.tp h3,.tp-title,.tp-kicker,.tp-hero-kicker,.tp-hero-when,.tp-hero-venue,.tp-event-name,.tp-event-venue,.tp-event-addr,.tp-event-time,
.tp-event-lunar,.tp-event-invite,.tp-event-vt,.tp-fam-name,.tp-fam-addr,.tp-fam-role,.tp-person-role,.tp-person-year,.tp-quote blockquote,
.tp-dress-note,.tp-rsvp-lead,.tp-thanks-text,.tp-count-note,.tp-gift-card h3,.tp-gift-bank,.tp-env-to,.tp-env-hint,.tp-timeline h3,.tp-sched-list span{
  text-wrap-style:balance}
.tp p,.tp blockquote,.tp-person-bio,.tp-timeline p,.tp-wish blockquote{text-wrap-style:pretty; hyphens:manual; overflow-wrap:break-word}
.tp{overflow-wrap:normal; word-break:normal}
[data-fit],.tp [data-fit]{display:block; max-width:100%; white-space:nowrap !important; text-wrap-mode:nowrap; overflow:visible}
.tp-names [data-fit]{width:auto}
.tp-ruby .tp-names [data-fit]{width:100%}

/* Lời thông báo: mỗi dòng một dòng, chữ hoa giãn nhẹ */
.tp-note-text{white-space:normal; display:grid; gap:2px; font-size:clamp(12px, 3.6vw, 14.5px); letter-spacing:.1em}
.tp-note-text .tp-line{width:100%}

/* Tên đầy đủ hai bên, tên khách: một dòng */
.tp-fam-people > div{width:100%}
.tp-fam-full,.tp-guest,.tp-person h3,.tp-event-couple{width:100%}

/* Bìa thư: tên hai người hai dòng, có dấu & ở giữa */
.tp-env-names{display:grid; justify-items:center; gap:0; width:min(340px, 100%); line-height:1.15}
.tp-env-names span{width:100%; text-align:center}
.tp-env-names em{font:italic 400 20px/1.2 var(--serif); color:var(--acc)}
.tp-env-guest{text-wrap-style:balance}

/* Khoảng thở giữa lời thông báo và tên hai bên, có nét trang trí ở giữa */
.tp-note-text{margin:6px 0 0}
.tp-note-text::after{content:""; display:block; width:64px; height:1px; margin:18px auto 16px; background:currentColor; opacity:.35}
.tp-fam{margin-bottom:26px}
.tp-fam-people{gap:2px}
.tp-fam-role{margin-top:4px}

/* ================= 5 mẫu theo bố cục các trang thiệp lớn (tham khảo CineLove) ================= */
.tp-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.tp-hero-big .tp-hero-photo img{aspect-ratio:auto}
.tp-dateline{display:flex; justify-content:center; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin:16px 0 4px; font:400 26px/1.2 var(--serif); color:var(--acc)}
.tp-dateline i{font-style:normal; opacity:.5}
.tp-ribbon{display:flex; justify-content:space-between; gap:8px; padding:10px 22px; font:400 12.5px/1 "Josefin Sans",var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
/* Lịch tháng */
.tp-cal2{max-width:340px; margin:0 auto; padding:16px 14px 12px; border-radius:16px; background:var(--card); border:1px solid var(--line)}
.tp-cal2-head{font:600 18px var(--serif); color:var(--acc); margin-bottom:10px}
.tp-cal2-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px 0; font-size:14px; font-variant-numeric:tabular-nums}
.tp-cal2-grid span{display:grid; place-items:center; height:34px}
.tp-cal2-dow{font-size:11.5px; font-weight:600; color:var(--muted); letter-spacing:.04em}
.tp-cal2-grid .on{position:relative; color:#fff; font-weight:700; z-index:0}
.tp-cal2-grid .on::before{content:"♥"; position:absolute; inset:-6px 0 0; display:grid; place-items:center; font-size:38px; line-height:1; color:var(--acc2); z-index:-1}
.tp-cal2-lunar{font-size:12.5px; font-style:italic; color:var(--muted)}

/* ---------- TẠP CHÍ (Our Love Begins): nền hồng phấn nhạt, serif vàng ---------- */
.tp-magazine{--bg:#f7ece9; --ink:#3a2c28; --muted:#8a756e; --acc:#a07d45; --acc2:#c0392b; --card:#fffaf8; --line:#ead7d0;
  --serif:"Prata","Playfair Display",Georgia,serif; --script:"Allura","Great Vibes",cursive}
.tp-mag-cover{position:relative; height:min(100svh, 780px); overflow:hidden; background:#d8c8bf}
.tp-mag-cover .tp-hero-photo{position:absolute; inset:0}
.tp-mag-cover .tp-hero-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 25%}
.tp-mag-cover::after{content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent, rgba(40,25,15,.65))}
.tp-mag-title{position:absolute; left:16px; right:16px; bottom:64px; z-index:1; margin:0; text-align:left; line-height:.86; color:#e8cf95; text-shadow:0 2px 16px rgba(0,0,0,.25)}
.tp-mag-title .a{font:400 clamp(52px, 17vw, 84px) var(--script)}
.tp-mag-title .b{font:700 clamp(58px, 19vw, 96px) var(--serif); letter-spacing:-.02em}
.tp-mag-date{position:absolute; left:18px; right:18px; bottom:20px; z-index:1; display:flex; justify-content:space-between; font:400 20px var(--serif); color:#f3e3bd}
.tp-magazine .tp-hero-box{padding:34px 24px 10px}
.tp-magazine .tp-hero-kicker{font:400 14px "Josefin Sans",var(--sans); letter-spacing:.3em; color:var(--muted)}
.tp-magazine .tp-names{font:400 50px/1.15 var(--script); color:var(--acc)}
.tp-magazine .tp-names em{font:400 30px var(--script); color:var(--acc2)}
.tp-magazine .tp-q{border-color:var(--line); color:var(--ink); background:#fff}
.tp-magazine .tp-title{font:400 22px var(--serif); letter-spacing:.24em; text-transform:uppercase; color:var(--acc)}
.tp-magazine .tp-calendar .tp-title,.tp-magazine .tp-story .tp-title{font:400 52px var(--script); letter-spacing:0; text-transform:none}
.tp-magazine .tp-fam-name{font:400 14px var(--serif); text-transform:uppercase; letter-spacing:.03em}
.tp-magazine .tp-fam-side{color:var(--ink); font-family:var(--serif); letter-spacing:.12em}
.tp-magazine .tp-fam-full{font-family:var(--script); color:var(--acc)}
.tp-magazine .tp-person{grid-template-columns:1fr; }
.tp-magazine .tp-people{grid-template-columns:1fr 1fr; gap:12px; align-items:start}
.tp-magazine .tp-person-photo{width:100%; aspect-ratio:3/4.2; border-radius:14px; border:0; padding:0; box-shadow:0 10px 24px -14px rgba(0,0,0,.4)}
.tp-magazine .tp-person-photo img{border-radius:14px}
.tp-magazine .tp-person h3{font:400 34px var(--script); color:var(--acc)}
.tp-magazine .tp-person-bio{font-size:13px}
.tp-magazine .tp-count-cell{border-radius:6px; border:0; background:#e8d5ba}
.tp-magazine .tp-count-cell b,.tp-magazine .tp-count-cell span{color:#6b5333}
.tp-magazine .tp-dateline{font-family:var(--serif); color:var(--acc)}
.tp-magazine .tp-event{background:transparent; border:0; border-top:1px solid var(--line); border-radius:0}
.tp-magazine .tp-event-venue{font:400 34px var(--script); text-transform:none; letter-spacing:0; color:var(--acc)}
.tp-magazine .tp-timeline li::before{background:var(--acc)}
.tp-magazine .tp-gallery-item{border-radius:10px}

/* ---------- DẢI PHIM: xanh xám, chữ mảnh, album khung phim ---------- */
.tp-film{--bg:#f4f6f8; --ink:#27303a; --muted:#6c7784; --acc:#2c3440; --acc2:#b08d57; --card:#fff; --line:#dde3e9;
  --serif:"Cormorant Garamond","Playfair Display",Georgia,serif; --script:"Allura","Great Vibes",cursive}
.tp-film .tp-hero-big{position:relative; min-height:min(100svh, 820px); display:flex; flex-direction:column; justify-content:space-between; color:#fff; overflow:hidden; background:#5d6b78}
.tp-film .tp-hero-big .tp-hero-photo{position:absolute; inset:0}
.tp-film .tp-hero-big .tp-hero-photo img{width:100%; height:100%; object-fit:cover}
.tp-film .tp-hero-big::after{content:""; position:absolute; inset:0; background:linear-gradient(rgba(20,30,40,.45), transparent 35%, transparent 60%, rgba(244,246,248,1) 100%)}
.tp-film-top,.tp-film-gb{position:relative; z-index:1}
.tp-film-top{padding:36px 20px 0}
.tp-film-script{font:400 clamp(54px, 16vw, 76px)/1 var(--script); text-shadow:0 2px 12px rgba(0,0,0,.25)}
.tp-film-sub{margin-top:10px; font:400 15px var(--serif); letter-spacing:.04em}
.tp-film-date{font:400 15px "Josefin Sans",var(--sans); letter-spacing:.2em}
.tp-film-gb{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 20px 34px; color:var(--ink)}
.tp-film-gb small{display:block; font:400 15px "Josefin Sans",var(--sans); letter-spacing:.24em; text-transform:uppercase}
.tp-film-gb b{font:400 26px var(--serif)}
.tp-film .tp-ribbon{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#fff}
.tp-film .tp-title{font:300 32px "Josefin Sans",var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--acc2)}
.tp-film .tp-title::before{content:"♥"; display:block; font-size:20px; letter-spacing:0; margin-bottom:8px}
.tp-film .tp-kicker{letter-spacing:.24em}
.tp-film .tp-album{background:#121416; padding-left:0; padding-right:0}
.tp-film .tp-album .tp-title{color:#e9e4da}
.tp-film .tp-gallery{display:flex; flex-direction:column; gap:0; margin:0 auto; max-width:420px; padding:14px 34px; position:relative;
  background:#121416 repeating-linear-gradient(#121416 0 10px, #e9e4da 10px 22px, #121416 22px 34px) left 10px top/14px 100% no-repeat}
.tp-film .tp-gallery::after{content:"KODAK 400  ▸  24  ▸  25  ▸  26"; position:absolute; right:6px; top:0; bottom:0; writing-mode:vertical-rl; font:600 10px "Josefin Sans",sans-serif; letter-spacing:.3em; color:#e0a646; opacity:.75; text-align:center}
.tp-film .tp-gallery-item{aspect-ratio:4/3; border-radius:2px; margin:6px 0; border:0}
.tp-film .tp-swipe{color:#cfc8bb}
.tp-film .tp-count{background:#121416; color:#e9e4da}
.tp-film .tp-count .tp-title,.tp-film .tp-count .tp-kicker,.tp-film .tp-count-note{color:#e9e4da}
.tp-film .tp-count-cell{border:0; border-radius:0; background:transparent}
.tp-film .tp-count-cell b{font:300 30px "Josefin Sans",sans-serif; color:#fff}
.tp-film .tp-count-cell span{color:#cfc8bb}
.tp-film .tp-cal2{background:#1d2228; border:0; color:#fff}
.tp-film .tp-cal2-head{color:#e9e4da}
.tp-film .tp-cal2-dow{color:#9aa4ae}
.tp-film .tp-dateline{font:400 24px var(--serif); color:var(--ink)}
.tp-film .tp-event{border-radius:0; border:0; background:transparent}
.tp-film .tp-names span,.tp-film .tp-person h3{font-family:var(--serif)}
.tp-film .tp-person h3{font:400 30px var(--serif); color:var(--ink)}
.tp-film .tp-person-photo{border-radius:0; border:0; width:100%; max-width:220px; aspect-ratio:3/4; padding:0}
.tp-film .tp-person-photo img{border-radius:0}
.tp-film .tp-people{grid-template-columns:1fr 1fr; gap:14px}
.tp-film .tp-person-bio{font-size:13px}
.tp-film .tp-quote blockquote,.tp-film .tp-thanks-text{font-family:var(--serif); font-size:18px}

/* ---------- VÒM ĐỎ ĐÔ: đỏ đô + trắng, chữ WEDDING ---------- */
.tp-arch{--bg:#ffffff; --ink:#3a1c1e; --muted:#7d6466; --acc:#6e1a1f; --acc2:#6e1a1f; --card:#fff; --line:#ead9da; --serif:"Playfair Display",Georgia,serif}
.tp-arch-band{display:grid; grid-template-columns:1.25fr 1fr; gap:14px; align-items:end; padding:22px 14px 26px; background:#6e1a1f; color:#fff}
.tp-arch-photo{border-radius:200px 200px 6px 6px; overflow:hidden; border:3px solid rgba(255,255,255,.85); aspect-ratio:3/4.4}
.tp-arch-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 20%}
.tp-arch-side{text-align:right; padding-bottom:8px}
.tp-arch-t{font:500 14px var(--serif); letter-spacing:.06em; text-transform:uppercase; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.5); margin-bottom:12px}
.tp-arch-ev{display:grid; gap:2px; margin-bottom:14px; font-size:13px}
.tp-arch-ev b{font:600 14px var(--serif); text-transform:uppercase; letter-spacing:.04em}
.tp-arch .tp-hero-box{padding-top:26px}
.tp-arch-wedding{font:500 clamp(44px, 14vw, 62px)/1 var(--serif); letter-spacing:.14em; text-transform:uppercase; color:#6e1a1f}
.tp-arch .tp-names{font:400 40px/1.15 var(--script); color:#6e1a1f}
.tp-arch .tp-names em{color:#6e1a1f}
.tp-arch .tp-q{color:#6e1a1f; border-color:#6e1a1f}
.tp-arch .tp-fam-side{color:#6e1a1f; font-family:var(--serif); font-size:16px; letter-spacing:.02em; text-transform:none}
.tp-arch .tp-fam{position:relative}
.tp-arch .tp-fam::after{content:"囍"; position:absolute; left:50%; top:0; transform:translateX(-50%); color:#b3262e; font-size:22px}
.tp-arch .tp-title{font:500 26px var(--serif); color:#6e1a1f}
.tp-arch .tp-events{grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px}
.tp-arch .tp-event{grid-column:1/-1; border-radius:4px; border-color:#6e1a1f}
.tp-arch .tp-event:nth-child(n+2){grid-column:auto; padding:0 0 14px; text-align:left; overflow:hidden}
.tp-arch .tp-event:nth-child(n+2) .tp-event-name{margin:0 0 10px; padding:8px 10px; background:#6e1a1f; color:#fff; font-size:12.5px; letter-spacing:.02em}
.tp-arch .tp-event:nth-child(n+2) > *:not(.tp-event-name){padding-left:10px; padding-right:10px}
.tp-arch .tp-event:nth-child(n+2) .tp-event-date{grid-template-columns:auto; justify-items:start; margin:6px 10px}
.tp-arch .tp-event:nth-child(n+2) .tp-event-date span{display:none}
.tp-arch .tp-event:nth-child(n+2) .tp-event-date b{border:0; padding:0; font-size:24px}
.tp-arch .tp-event:nth-child(n+2) .tp-event-acts{justify-content:flex-start}
.tp-arch .tp-event:nth-child(n+2) .tp-btn-ghost{display:none}
.tp-arch .tp-event:nth-child(n+2) .tp-btn{min-height:36px; padding:6px 14px; font-size:12.5px}
.tp-arch .tp-btn{background:#6e1a1f; border-color:#6e1a1f}
.tp-arch .tp-btn-ghost{background:transparent; color:#6e1a1f !important}
.tp-arch .tp-cal2{padding:0 0 12px; border-radius:4px; overflow:hidden; border-color:#6e1a1f}
.tp-arch .tp-cal2-head{margin:0 0 10px; padding:10px 16px; background:#6e1a1f; color:#fff; text-align:left; font-size:20px}
.tp-arch .tp-cal2-grid{padding:0 10px}
.tp-arch .tp-cal2-grid .on::before{color:#d23a46}
.tp-arch .tp-gift{background:#6e1a1f; color:#fff; margin:0 12px; border-radius:4px}
.tp-arch .tp-gift .tp-title{color:#fff}
.tp-arch .tp-gallery-item{border-radius:2px; box-shadow:10px 10px 0 -2px #6e1a1f}
.tp-arch .tp-count-cell{border-color:#6e1a1f}
.tp-arch .tp-count-cell b{color:#6e1a1f}

/* ---------- PHONG BÌ KEM: trắng, be, chữ cao mảnh ---------- */
.tp-cream{--bg:#ffffff; --ink:#4b4339; --muted:#8f8476; --acc:#b9a48a; --acc2:#a88f70; --card:#fcfaf7; --line:#ece4d9;
  --serif:"Oswald","Cormorant Garamond",sans-serif; --script:"Allura","Great Vibes",cursive}
.tp-cream .tp-ribbon-top{padding-top:16px; color:#7d6e5d}
.tp-cream-script{font:400 48px/1.1 var(--script); color:#3a332b; margin-top:10px}
.tp-cream-env{position:relative; width:min(270px, 74%); aspect-ratio:3/2; margin:34px auto 10px; border-radius:4px; background:#e3dacb; box-shadow:0 22px 30px -18px rgba(0,0,0,.35)}
.tp-cream-peek{position:absolute; left:8%; right:8%; bottom:30%; height:120%; border-radius:4px; overflow:hidden; border:5px solid #fff; box-shadow:0 4px 12px rgba(0,0,0,.15)}
.tp-cream-peek img{width:100%; height:100%; object-fit:cover}
.tp-cream-front{position:absolute; inset:0; border-radius:4px; background:linear-gradient(to top right, #ece5d9 50%, transparent 50.5%) left/50% 100% no-repeat, linear-gradient(to top left, #e8e0d2 50%, transparent 50.5%) right/50% 100% no-repeat;
  clip-path:polygon(0 30%, 50% 70%, 100% 30%, 100% 100%, 0 100%)}
.tp-cream-seal{position:absolute; left:50%; top:62%; transform:translate(-50%,-50%); width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:radial-gradient(circle at 35% 35%, #b77a52, #8a5232); color:#f3d9c4; font:600 13px var(--serif); box-shadow:0 2px 6px rgba(0,0,0,.3)}
.tp-cream .tp-hero-box{padding-top:12px}
.tp-cream .tp-names{font:400 46px/1.15 var(--script); color:#3a332b}
.tp-cream .tp-names em{font-family:var(--script); color:var(--acc)}
.tp-cream-lead{margin-top:4px; padding:10px 0; font:300 18px var(--serif); letter-spacing:.06em; text-transform:uppercase; color:#6f6252}
.tp-cream-small{margin-top:14px; font:300 16px/1.4 var(--serif); text-transform:uppercase; letter-spacing:.03em; color:#6f6252}
.tp-cream .tp-dateline{font:300 clamp(24px, 8vw, 32px)/1.2 var(--serif); text-transform:uppercase; color:var(--acc)}
.tp-cream-lunar{font-size:13px; color:#6f6252}
.tp-cream-venue{margin-top:4px; font:300 clamp(26px, 8vw, 34px)/1.2 var(--serif); text-transform:uppercase; color:var(--acc)}
.tp-cream .tp-q{color:#8a7558; border-color:var(--line)}
.tp-cream .tp-title{font:300 30px var(--serif); text-transform:uppercase; letter-spacing:.08em; color:var(--acc)}
.tp-cream .tp-fam-name,.tp-cream .tp-event-venue{font-family:var(--serif); font-weight:400; text-transform:uppercase}
.tp-cream .tp-fam-full,.tp-cream .tp-person h3{font-family:var(--script); color:#3a332b}
.tp-cream .tp-event{border-radius:0; background:transparent; border:0; border-top:1px solid var(--line)}
.tp-cream .tp-event-date b{color:var(--acc); font-family:var(--serif); font-weight:300}
.tp-cream .tp-btn{background:#b9a48a; border-color:#b9a48a}
.tp-cream .tp-btn-ghost{background:transparent; color:#8a7558 !important}
.tp-cream .tp-count-cell{border-color:var(--acc); border-radius:4px}
.tp-cream .tp-count-cell b{color:var(--acc); font-family:var(--serif); font-weight:300}
.tp-cream::before{content:""; position:absolute; left:-10px; top:120px; width:110px; height:130px; background:url(anh/la-tren.webp) left top/contain no-repeat; transform:scaleX(-1) rotate(-15deg); opacity:.9; pointer-events:none; z-index:2}

/* ---------- HỒNG PASTEL (Marry me): hồng phấn, chữ giãn ---------- */
.tp-pastel{--bg:#f6e3e1; --ink:#5a3b3e; --muted:#8f7174; --acc:#c96f7b; --acc2:#d0505f; --card:#fff6f5; --line:#ecc9c8;
  --serif:"Cormorant Garamond","Playfair Display",Georgia,serif; --script:"Allura","Great Vibes",cursive}
.tp-pastel-head{padding:24px 16px 4px}
.tp-pastel .tp-names{flex-direction:row; justify-content:center; align-items:baseline; gap:4px 14px; flex-wrap:wrap; margin:0; font:400 38px/1.1 var(--script); color:#7a3e46}
.tp-pastel .tp-names em{font:400 26px var(--script); color:var(--acc)}
.tp-pastel-hy{margin-top:4px; font-size:26px; color:#d0505f}
.tp-pastel-stage{position:relative; margin:18px 16px 0; padding:0 0 70px}
.tp-pastel-stage .tp-hero-photo{width:82%; margin-left:auto; aspect-ratio:3/4; overflow:hidden; box-shadow:-14px 14px 0 0 #e8c4c3}
.tp-pastel-stage .tp-hero-photo img{width:100%; height:100%; object-fit:cover}
.tp-pastel-marry{position:absolute; left:0; top:38%; margin:0; font:300 clamp(44px, 13vw, 60px)/1 "Josefin Sans",var(--sans); letter-spacing:.32em; text-transform:uppercase; color:#7a3e46; text-align:left; text-shadow:0 0 18px #f6e3e1}
.tp-pastel-yes{position:absolute; right:6px; bottom:12px; margin:0; font:300 30px "Josefin Sans",var(--sans); letter-spacing:.3em; text-transform:uppercase; color:#c96f7b}
.tp-pastel .tp-hero-box{padding-top:10px}
.tp-pastel-inv{font:300 18px "Josefin Sans",var(--sans); letter-spacing:.6em; text-transform:uppercase; color:#7a3e46}
.tp-pastel-date{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin:14px 0}
.tp-pastel-date span{font:500 18px var(--serif); text-transform:uppercase; letter-spacing:.06em}
.tp-pastel-date b{font:400 64px/1 var(--serif); color:#7a3e46}
.tp-pastel .tp-q{color:#7a3e46; border-color:#e8b9b9; background:#fff6f5}
.tp-pastel .tp-title{font:400 46px var(--script); color:#c96f7b}
.tp-pastel .tp-kicker{letter-spacing:.4em}
.tp-pastel .tp-person{position:relative}
.tp-pastel .tp-person-photo{border-radius:0; border:0; padding:0; width:72%; aspect-ratio:3/4; box-shadow:12px 12px 0 0 #e8c4c3}
.tp-pastel .tp-person-photo img{border-radius:0}
.tp-pastel .tp-person h3{font-family:var(--script); color:#7a3e46}
.tp-pastel .tp-intro .tp-people{gap:34px}
.tp-pastel .tp-intro::before,.tp-pastel .tp-intro::after{position:absolute; writing-mode:vertical-rl; font:300 34px "Josefin Sans",var(--sans); letter-spacing:.3em; text-transform:uppercase; color:#e3b4b6; pointer-events:none}
.tp-pastel .tp-intro::before{content:"Groom"; left:8px; top:120px}
.tp-pastel .tp-intro::after{content:"Bride"; right:8px; bottom:60px}
.tp-pastel .tp-count-cell{border-color:#e3a5ab}
.tp-pastel .tp-cal2{background:#fff6f5}
.tp-pastel .tp-event{border-radius:0; border:1px solid #e8b9b9; background:#fff6f5}
.tp-pastel .tp-sched-list time{color:#c96f7b}
.tp-pastel .tp-gift-card{border-radius:999px 999px 20px 20px; padding-top:22px}

/* Chừa chỗ cho thanh thiệp mẫu ở trên, thanh thao tác ở dưới */
.tp-has-demo .tp-film-top{padding-top:80px}
.tp-has-demo .tp-cream .tp-ribbon-top{padding-top:76px}
.tp-has-demo .tp-pastel-head{padding-top:74px}
.tp-film-gb{padding-bottom:96px}
/* Dòng giờ luôn một dòng, chữ tự co */
.tp-dateline{flex-wrap:nowrap; white-space:nowrap; max-width:100%; margin-left:auto; margin-right:auto}
/* Tạp chí: tiêu đề bìa */
.tp-mag-title .a{display:inline}
.tp-mag-title .br{display:block; height:0}
/* Hồng pastel */
.tp-pastel-stage{overflow:hidden}
.tp-pastel-marry{font-size:clamp(34px, 10.5vw, 52px); letter-spacing:.2em}
.tp-pastel .tp-count .tp-title,.tp-pastel .tp-calendar .tp-title{font:300 26px/1.3 "Josefin Sans",var(--sans); letter-spacing:.2em; text-transform:uppercase; color:#7a3e46}
.tp-film .tp-count .tp-title{font-size:26px}

/* Tinh chỉnh 5 mẫu mới */
.tp-hero-big p,.tp-cream-small,.tp-film-sub{text-wrap-style:balance}
.tp-dateline[data-fit]{display:flex; justify-content:center}
.tp-cream-env{margin-top:118px}
.tp-cream-peek{height:112%}
.tp-cream-script{position:relative; z-index:1}
.tp-film-script{font-size:clamp(44px, 12.5vw, 66px); white-space:nowrap}
.tp-pastel-stage .tp-hero-photo{width:68%}
.tp-pastel-marry{top:auto; bottom:96px; display:grid; gap:2px; font-size:clamp(40px, 12vw, 58px); letter-spacing:.16em; line-height:1}
.tp-pastel-marry span:last-child{padding-left:.9em}
.tp-pastel-stage{display:flex; flex-direction:column; padding-bottom:64px}
.tp-pastel-marry{position:relative; order:-1; left:auto; top:auto; bottom:auto; margin:0 0 -22px; z-index:1; font-size:clamp(40px, 12.5vw, 60px); letter-spacing:.18em}
.tp-pastel-stage .tp-hero-photo{width:76%}
.tp-film-top [data-fit],.tp-cream-script{width:100%}
.tp-arch-wedding{width:100%}
.tp-mag-title{max-width:calc(100% - 32px)}
.tp-mag-title .a{font-size:min(17vw, 84px, 18cqw)}