/* Mẫu 9 — SONG HỶ BA TẤM (songhy-tri). Thiệp cưới truyền thống Việt: đỏ son + nhũ vàng (bảng màu RIÊNG, đẹp với mọi
   giao diện), chữ Hỷ vẽ bằng SVG (không phụ thuộc phông CJK). Bìa: hai tấm bên khép lại, viền hồi văn nhũ vàng, tem tròn
   chữ Hỷ dán giữa mép. Chạm -> tem bóc ra, tấm TRÁI mở rồi tấm PHẢI mở (lần lượt như mở thiệp thật). Thiệp mở: màn rộng
   là 3 tấm (nhà trai | lời mời + cô dâu chú rể + ngày Dương/Âm | nhà gái), hai tấm bên mở ra từ nếp gấp; điện thoại là
   khối hai nhà trên dải đỏ + giấy kem. */
.ic--songhy-tri {
  --ic-out-delay: 1.3s;
  --sh-red: #a51f17; --sh-red-deep: #7e150f; --sh-cream: #fff8ec;
  --sh-xi-m: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='none' stroke='black' stroke-width='6' stroke-linecap='square'><path d='M8 12H45M55 12H92M26.5 3V24M73.5 3V24M15 24H38M62 24H85M15 32H38V45H15ZM62 32H85V45H62Z'/><path d='M19 52l3 6M34 52l-3 6M66 52l3 6M81 52l-3 6M5 64H95M15 73H38V95H15ZM62 73H85V95H62Z'/></g></svg>");
  --sh-hoivan: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28'><path d='M0 14h7V7h14v14H14V14M14 0v3.5M14 24.5V28' fill='none' stroke='black' stroke-width='1.6'/></svg>");
}
/* Chữ trên giấy kem luôn là mực nâu đỏ (cả khi giao diện tối) */
.ic--songhy-tri .ic-card { --ink: #3a1a12; --muted: #6e4c3e; --accent: #b3261e; --ic-on-accent: #fff6e0; --ic-line: rgba(179, 38, 30, .4); --ic-paper: var(--sh-cream); }

/* ── Bìa ── */
.ic--songhy-tri .ic-env-btn { width: min(320px, 76vw); aspect-ratio: 5 / 7; animation: ic-float 6s ease-in-out infinite; }
.ic--songhy-tri.is-opening .ic-env-btn { animation: none; }
.sh, .sh > span, .sh-flap > span, .sh-center > span { position: absolute; display: block; }
.sh { inset: 0; transform-style: preserve-3d; }
.sh .sh-center {
  inset: 0; border-radius: 4px; display: grid; align-content: center; justify-items: center; gap: 14px; text-align: center;
  background: var(--ic-grain), var(--sh-cream); box-shadow: 0 46px 70px -30px rgba(0, 0, 0, .55), 0 10px 22px -10px rgba(0, 0, 0, .3), inset 0 0 0 8px var(--sh-cream), inset 0 0 0 9px rgba(179, 38, 30, .45);
}
.sh-center .sh-xi { position: relative; width: 74px; height: 74px; background: var(--sh-red); -webkit-mask: var(--sh-xi-m) center / contain no-repeat; mask: var(--sh-xi-m) center / contain no-repeat; }
.sh-center .sh-center-names { position: relative; font: 400 1.35rem/1.25 "Prata", Georgia, serif; color: #3a1a12; padding: 0 12%; }
.sh-center-names i { display: block; font-style: normal; font-size: .7em; color: #b3261e; }
.sh-flap { top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; }
.sh-l { left: 0; transform-origin: 0 50%; transition: transform .7s var(--ic-fold) .28s; }
.sh-r { right: 0; transform-origin: 100% 50%; transition: transform .7s var(--ic-fold) .62s; }
.sh-face, .sh-back { inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.sh-face {
  background: radial-gradient(130% 80% at 50% 20%, rgba(255, 255, 255, .12), transparent 60%), var(--ic-grain), linear-gradient(180deg, var(--sh-red), var(--sh-red-deep));
}
.sh-l .sh-face { border-radius: 4px 0 0 4px; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25), inset 10px 10px 0 -1px transparent; }
.sh-r .sh-face { border-radius: 0 4px 4px 0; box-shadow: inset 1px 0 0 rgba(255, 255, 255, .12); }
.sh-face .sh-border {
  position: absolute; top: 12px; bottom: 12px; left: 12px; right: 0; border: 1.5px solid #e2b865; border-right: 0;
  background: var(--ic-foil) 0 0 / 300% 100%; background-position: calc(50% + var(--tx) * 40%) 0;
  -webkit-mask: var(--sh-hoivan) 0 0 / 14px 14px; mask: var(--sh-hoivan) 0 0 / 14px 14px; opacity: .32;
}
.sh-face::after { content: ""; position: absolute; top: 9px; bottom: 9px; left: 9px; right: -1px; border: 1.5px solid #e2b865; border-right: 0; opacity: .85; }
.sh-r .sh-face::after { left: -1px; right: 9px; border-right: 1.5px solid #e2b865; border-left: 0; }
.sh-r .sh-face .sh-border { left: 0; right: 12px; border: 1.5px solid #e2b865; border-left: 0; }
.sh-back { transform: rotateY(180deg); background: var(--ic-grain), linear-gradient(180deg, var(--sh-red-deep), #5e100b); }
.sh-medal {
  left: 50%; top: 38%; width: 86px; height: 86px; margin: -43px 0 0 -43px; border-radius: 50%; transform: translateZ(4px);
  background: radial-gradient(circle at 35% 28%, #fff3c4, #e2b865 38%, #a8803a 80%, #7c5a22); box-shadow: 0 0 0 3px var(--sh-red-deep), 0 0 0 5px #e2b865, 0 10px 16px -6px rgba(0, 0, 0, .55);
  transition: transform .4s var(--ic-ease), opacity .3s .1s;
}
.sh-medal .sh-xi { position: absolute; inset: 18px; background: var(--sh-red-deep); -webkit-mask: var(--sh-xi-m) center / contain no-repeat; mask: var(--sh-xi-m) center / contain no-repeat; }
.ic--songhy-tri .ic-env-to { left: 10%; right: 10%; bottom: 11%; justify-items: center; text-align: center; transform: translateZ(3px); --ic-to-small: #f3d08c; }
.ic--songhy-tri .ic-env-to b { font-family: "Prata", Georgia, serif; font-style: normal; color: #fff3d6; }
.ic--songhy-tri.is-opening .sh-medal { transform: translateZ(60px) translate(30px, -40px) rotate(40deg); opacity: 0; }
.ic--songhy-tri.is-opening .sh-l { transform: rotateY(-160deg); }
.ic--songhy-tri.is-opening .sh-r { transform: rotateY(160deg); }
.ic--songhy-tri.is-opening .ic-env { animation-name: sh-env-out; }
@keyframes sh-env-out { to { opacity: 0; transform: scale(1.08); } }

/* ── Thiệp mở ── */
.ic--songhy-tri.is-open .ic-card { display: grid; }
.ic--songhy-tri .ic-card {
  width: min(480px, 100%); padding: 0 0 36px; grid-template-columns: 1fr 1fr; color: var(--ink); text-align: center;
  background: var(--ic-grain), var(--sh-cream); border-radius: 4px;
  box-shadow: inset 0 0 0 6px var(--sh-cream), inset 0 0 0 8px var(--sh-red), inset 0 0 0 11px var(--sh-cream), inset 0 0 0 12px #c4933a, 0 50px 90px -40px rgba(0, 0, 0, .55);
}
.ic--songhy-tri.is-open .ic-card { animation: sh-card-in .8s var(--ic-ease) both; }
@keyframes sh-card-in { from { opacity: 0; transform: rotateX(-60deg) translateY(-30px); transform-origin: 50% 0; } to { opacity: 1; transform: none; } }
.ic--songhy-tri .ic-p1, .ic--songhy-tri .ic-p2, .ic--songhy-tri .ic-fam { display: contents; }
.ic--songhy-tri .ic-card > .ic-p > *, .ic--songhy-tri .ic-p2 > *, .ic--songhy-tri .ic-p3 { grid-column: 1 / -1; position: relative; z-index: 1; }
.ic--songhy-tri .ic-p1 > *, .ic--songhy-tri .ic-p2 > *:not(.ic-fam), .ic--songhy-tri .ic-p3 { padding-left: 30px; padding-right: 30px; }
/* Hai nhà: dải đỏ trên cùng (điện thoại) */
.ic--songhy-tri .ic-fam-col {
  grid-column: auto !important; grid-row: 1; position: relative; z-index: 1; padding: 30px 14px 22px; display: grid; align-content: start; gap: 4px;
  background: var(--ic-grain), linear-gradient(180deg, var(--sh-red), var(--sh-red-deep)); color: #f6dfa8;
}
.ic--songhy-tri .ic-fam-col:first-of-type { border-radius: 4px 0 0 0; box-shadow: inset -1px 0 0 rgba(226, 184, 101, .4); }
.ic--songhy-tri .ic-fam-col:last-of-type { border-radius: 0 4px 0 0; }
.ic-fam-side { font: 600 .875rem/1.3 "Be Vietnam Pro", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #f3d08c; }
.ic-fam-info { font: 400 .9375rem/1.5 "Lora", Georgia, serif; color: #fbe9c4; white-space: normal; }
.ic-fam-name { margin-top: 4px !important; font: 400 1.15rem/1.3 "Prata", Georgia, serif; color: #fff3d6; }
.ic--songhy-tri .ic-mono {
  grid-row: 2; margin: -34px auto 10px; width: 76px; height: 76px; border: 0; font-size: 0; background: radial-gradient(circle at 35% 28%, #fff3c4, #e2b865 40%, #a8803a 85%);
  box-shadow: 0 0 0 3px var(--sh-cream), 0 0 0 5px #c4933a, 0 8px 14px -6px rgba(0, 0, 0, .4); padding: 0 !important;
}
/* R5-11: huy hiệu đè lên mép dải đỏ hai nhà (dải đứng sau trong DOM, cùng z-index 1 thì che nửa trên huy hiệu). */
.ic--songhy-tri .ic-card .ic-mono { position: relative; z-index: 2; }
.ic--songhy-tri .ic-mono > * { display: none; }
.ic--songhy-tri .ic-mono::before { content: ""; width: 44px; height: 44px; background: var(--sh-red-deep); -webkit-mask: var(--sh-xi-m) center / contain no-repeat; mask: var(--sh-xi-m) center / contain no-repeat; }
.ic--songhy-tri .ic-card .ic-name { color: var(--sh-red); font-family: "Prata", Georgia, serif; font-style: normal; font-size: clamp(2rem, 8vw, 2.8rem); }
.ic--songhy-tri .ic-couple { font-family: "Prata", Georgia, serif; font-style: normal; color: var(--sh-red); flex-direction: column; align-items: center; gap: 0; font-size: clamp(1.7rem, 7vw, 2.3rem); }
.ic--songhy-tri .ic-couple i { color: #c4933a; }
.ic--songhy-tri .ic-rule { width: 60%; }
.ic--songhy-tri .ic-rule span { width: 22px; height: 22px; font-size: 0; background: var(--sh-red); -webkit-mask: var(--sh-xi-m) center / contain no-repeat; mask: var(--sh-xi-m) center / contain no-repeat; }
.ic--songhy-tri .ic-wd { color: var(--sh-red); }
.ic--songhy-tri .ic-lunar { color: #8a3a1e; font-weight: 600; }
.ic--songhy-tri .ic-dmy b { font-family: "Prata", Georgia, serif; font-weight: 400; }
.ic--songhy-tri .ic-place, .ic--songhy-tri .ic-rsvp { border-top-style: solid; }
.ic--songhy-tri .ic-btn, .ic--songhy-tri .ic-enter { border-radius: 2px; }
.ic--songhy-tri .ic-p3 { margin-top: 4px; }
[data-theme="demsao"] .ic--songhy-tri .ic-msg textarea, [data-theme="demsao"] .ic--songhy-tri .ic-stepper input { background: #fff; }

@media (min-width: 900px) {
  /* Ba tấm: nhà trai | giữa | nhà gái; hai tấm bên mở ra từ nếp gấp */
  .ic--songhy-tri .ic-card { width: min(1020px, 100%); grid-template-columns: 1fr 1.5fr 1fr; padding-bottom: 0; }
  .ic--songhy-tri .ic-p3 { padding-bottom: 46px; }
  .ic--songhy-tri .ic-card > .ic-p > *, .ic--songhy-tri .ic-p2 > *:not(.ic-fam), .ic--songhy-tri .ic-p1 > * { grid-column: 2; }
  .ic--songhy-tri .ic-p3 { grid-column: 2 !important; }
  .ic--songhy-tri .ic-fam-col { grid-row: 1 / span 12; align-content: center; justify-items: center; padding: 60px 30px; text-align: center; gap: 10px; }
  .ic--songhy-tri .ic-fam-col:first-of-type { grid-column: 1 !important; border-radius: 4px 0 0 4px; transform-origin: 100% 50%; }
  .ic--songhy-tri .ic-fam-col:last-of-type { grid-column: 3 !important; border-radius: 0 4px 4px 0; transform-origin: 0 50%; box-shadow: inset 1px 0 0 rgba(226, 184, 101, .4); }
  .ic--songhy-tri .ic-fam-col::before {
    content: ""; position: absolute; inset: 16px; border: 1.5px solid #e2b865; opacity: .5; pointer-events: none;
    -webkit-mask: var(--sh-hoivan) 0 0 / 14px 14px; mask: var(--sh-hoivan) 0 0 / 14px 14px; background: #e2b865;
  }
  .ic--songhy-tri .ic-fam-col::after { content: ""; display: block; order: -1; width: 64px; height: 64px; margin-bottom: 10px; background: #e2b865; -webkit-mask: var(--sh-xi-m) center / contain no-repeat; mask: var(--sh-xi-m) center / contain no-repeat; opacity: .9; }
  .ic-fam-info { font-size: 1.02rem; }
  .ic-fam-name { font-size: 1.5rem; }
  .ic--songhy-tri .ic-mono { grid-row: auto; margin: 46px auto 12px; }
  .ic--songhy-tri .ic-p1 > *, .ic--songhy-tri .ic-p2 > *:not(.ic-fam), .ic--songhy-tri .ic-p3 { padding-left: 46px; padding-right: 46px; }
  .ic--songhy-tri.is-open .ic-fam-col:first-of-type { animation: sh-fold-l 1s var(--ic-fold) .25s both; }
  .ic--songhy-tri.is-open .ic-fam-col:last-of-type { animation: sh-fold-r 1s var(--ic-fold) .5s both; }
  @keyframes sh-fold-l { from { transform: rotateY(110deg); } to { transform: none; } }
  @keyframes sh-fold-r { from { transform: rotateY(-110deg); } to { transform: none; } }
  .ic--songhy-tri .ic-card { transform-style: preserve-3d; }
}