/* Mẫu Đỏ Chia Đôi — mỗi khối chia đôi ảnh | panel (đỏ / kem), huy hiệu 囍 ở đường nối. Bố cục chảy theo nội dung. */

.t-chia-doi {
  --red: #a0141c;
  --red-deep: #7d0c13;
  --cream: #f4ece0;
  --gold: #eccb9c;
  --ink: #3a1d17;
  --f-brush: "Water Brush", "Dancing Script", cursive;
  --f-love: "Style Script", cursive;
  --f-serif: "Noto Serif Display", Georgia, serif;
  --f-body: "Lora", Georgia, serif;
  --f-script: var(--f-brush);
  --gate-bg: var(--red);
  --gate-ink: var(--gold);
  --accent-strong: var(--red);
}
.t-chia-doi .vela-frame { background: var(--cream); }
.t-chia-doi .cd-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- khối chia đôi ---------- */
.t-chia-doi .cd-split {
  position: relative;
  display: grid;
  grid-template-columns: 210px 210px;
  width: 420px;
}
.t-chia-doi .cd-photo { position: relative; overflow: hidden; background: #d9c9b6; min-height: 320px; }
.t-chia-doi .cd-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 20%; }
.t-chia-doi .cd-photo--fade::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 42%, rgba(125, 12, 19, .55) 64%, var(--red-deep) 88%);
}
.t-chia-doi .cd-pick { display: none; }
.t-chia-doi .cd-photo--p0 .cd-pick--0,
.t-chia-doi .cd-photo--p1 .cd-pick--1,
.t-chia-doi .cd-photo--p2 .cd-pick--2 { display: block; }

.t-chia-doi .cd-panel { position: relative; overflow: hidden; }
.t-chia-doi .cd-panel--red { background: radial-gradient(circle at 70% 20%, #b3202a, var(--red) 55%, var(--red-deep)); color: var(--gold); }
.t-chia-doi .cd-panel--cream {
  background:
    radial-gradient(circle at 20% 30%, rgba(120, 60, 30, .05) 0 1px, transparent 1.5px) 0 0 / 8px 8px,
    var(--cream);
  color: var(--ink);
}
.t-chia-doi .cd-panel__in { position: relative; z-index: 1; padding: 34px 14px 30px; text-align: center; }
/* chừa chỗ cho huy hiệu ở đường nối */
.t-chia-doi .cd-split > .cd-panel:first-child .cd-panel__in { padding-right: 32px !important; }
.t-chia-doi .cd-split > .cd-panel:nth-child(2) .cd-panel__in { padding-left: 32px !important; padding-right: 10px !important; }
.t-chia-doi .cd-split > .cd-panel:first-child .cd-panel__in { padding-left: 10px !important; }
.t-chia-doi .cd-lily { position: absolute; right: -40px; top: 34%; width: 220px; height: 286px; opacity: .2; pointer-events: none; }
.t-chia-doi .cd-panel--red .cd-lily { color: #f6c9a8; }
.t-chia-doi .cd-panel--cream .cd-lily { color: #b98a6e; opacity: .28; }

/* huy hiệu 囍 ở đường nối */
.t-chia-doi .cd-seal {
  position: absolute; z-index: 3; left: 210px; top: 50%;
  width: 52px; height: 52px; transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 5px rgba(60, 0, 0, .35));
}
.t-chia-doi .cd-seal svg { width: 100%; height: 100%; }
.t-chia-doi .cd-seal i {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: normal 22px/1 "Vela Hy", serif; color: var(--gold);
}
.t-chia-doi .cd-seal--hero { top: 47%; }
.t-chia-doi .cd-seal--static { position: relative; left: auto; top: auto; transform: none; display: block; margin: 0 auto 6px; }

/* ---------- chữ ---------- */
.t-chia-doi .cd-title { font: 400 50px/1.05 var(--f-brush); color: var(--gold); text-shadow: 0 2px 10px rgba(60, 0, 0, .25); }
.t-chia-doi .cd-title--md { font-size: 40px; }
.t-chia-doi .cd-title--red { color: var(--red); text-shadow: none; }
.t-chia-doi .cd-kicker {
  margin-top: 4px;
  font: 500 8.5px/1.4 var(--f-serif); letter-spacing: 3px; text-transform: uppercase; opacity: .85;
}
.t-chia-doi .cd-kicker span { margin: 0 4px; }
.t-chia-doi .cd-kicker--sm { margin-top: 0; font-size: 8px; letter-spacing: 4px; }
.t-chia-doi .cd-poem { margin-top: 16px; font: 400 12.5px/1.8 var(--f-body); color: #fbe9d6; }
.t-chia-doi .cd-panel--cream .cd-poem { color: var(--ink); }
.t-chia-doi .cd-couple { display: grid; justify-items: center; gap: 2px; margin-top: 18px; }
.t-chia-doi .cd-couple p { display: grid; gap: 2px; }
.t-chia-doi .cd-couple small { font: 400 11px/1.3 var(--f-body); color: #fbe9d6; }
.t-chia-doi .cd-couple b { font: 600 19px/1.25 var(--f-serif); color: var(--gold); }
.t-chia-doi .cd-amp { font: 400 28px/1 var(--f-love); color: var(--gold); }
.t-chia-doi .cd-event { margin-top: 16px; font: 600 17px/1.3 var(--f-serif); letter-spacing: 3px; }
.t-chia-doi .cd-ico { display: block; width: 20px; height: 20px; margin: 16px auto 4px; }
.t-chia-doi .cd-date { font: italic 400 18px/1.3 var(--f-serif); letter-spacing: 1px; }
.t-chia-doi .cd-small { margin-top: 2px; font: 400 10.5px/1.55 var(--f-body); opacity: .92; }
.t-chia-doi .cd-panel--red .cd-small { color: #fbe9d6; }
.t-chia-doi .cd-small--dark { color: var(--ink); }
.t-chia-doi .cd-venue { font: 600 13px/1.45 var(--f-serif); }
.t-chia-doi .cd-venue--lg { margin-top: 10px; font-size: 16px; }
.t-chia-doi .cd-addr { margin-top: 4px; font: 400 11px/1.5 var(--f-body); opacity: .85; }
.t-chia-doi .cd-host { margin-top: 18px; font: 600 13px/1.5 var(--f-serif); }
.t-chia-doi .cd-host span { display: block; font-weight: 400; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; }
.t-chia-doi .cd-love { margin-top: 14px; font: 400 36px/1 var(--f-love); }
.t-chia-doi .cd-rule { display: block; width: 46px; height: 1px; margin: 14px auto; background: currentColor; opacity: .5; }

/* ---------- 1. bìa ---------- */
.t-chia-doi .cd-hero { min-height: 800px; }
.t-chia-doi .cd-hero .cd-panel__in { padding-top: 44px; }
.t-chia-doi .cd-brush { position: absolute; z-index: 2; left: 0; right: 0; bottom: 28px; padding: 0 12px; color: var(--gold); }
.t-chia-doi .cd-brush p { margin: 0; text-shadow: 0 3px 14px rgba(60, 0, 0, .45); }
.t-chia-doi .cd-brush__top { font: 400 58px/1 var(--f-brush); }
.t-chia-doi .cd-brush__big { margin: -8px 0 0 !important; font: 400 128px/1 var(--f-brush); text-align: right; }
.t-chia-doi .cd-brush__big--md { font-size: 92px; }
.t-chia-doi .cd-brush__sub { margin-top: 4px !important; font: italic 400 11.5px/1.5 var(--f-body); letter-spacing: 1px; color: #fbe3c7; white-space: pre-line; }

/* ---------- dải toàn chiều ngang ---------- */
.t-chia-doi .cd-band { position: relative; overflow: hidden; padding: 44px 26px; text-align: center; }
.t-chia-doi .cd-band--cream { background: var(--cream); color: var(--ink); }
.t-chia-doi .cd-band--red { background: radial-gradient(circle at 30% 10%, #b3202a, var(--red) 50%, var(--red-deep)); color: var(--gold); }
.t-chia-doi .cd-band > *:not(.cd-lily) { position: relative; z-index: 1; }
.t-chia-doi .cd-lily--band { right: -30px; top: auto; bottom: -40px; width: 240px; height: 312px; }
.t-chia-doi .cd-band--cream .cd-lily--band { color: #b98a6e; opacity: .18; }
.t-chia-doi .cd-band--red .cd-lily--band { color: #f6c9a8; opacity: .16; }
.t-chia-doi .cd-band__label { font: 500 11px/1.5 var(--f-serif); letter-spacing: 3px; text-transform: uppercase; color: var(--red); }
.t-chia-doi .cd-quote { margin-top: 12px; font: italic 400 17px/1.7 var(--f-body); color: var(--ink); }

/* ---------- gia đình, lễ, tiệc ---------- */
.t-chia-doi .cd-row .cd-panel__in { padding: 40px 16px 36px; }
.t-chia-doi .cd-label { font: 600 15px/1.3 var(--f-serif); letter-spacing: 4px; text-transform: uppercase; }
.t-chia-doi .cd-panel--cream .cd-label { color: var(--red); }
.t-chia-doi .cd-parents { margin-top: 10px; font: 400 12.5px/1.75 var(--f-body); }
.t-chia-doi .cd-panel--red .cd-parents { color: #fbe9d6; }
.t-chia-doi .cd-role { font: 400 11px/1.4 var(--f-serif); letter-spacing: 3px; text-transform: uppercase; }
.t-chia-doi .cd-name { margin-top: 2px; font: 400 31px/1.15 var(--f-brush); }
.t-chia-doi .cd-panel--cream .cd-name { color: var(--red); }
.t-chia-doi .cd-name--light { margin-top: 12px; font-size: 40px; color: var(--gold); }
.t-chia-doi .cd-name--light span { font: 400 28px/1 var(--f-love); }
.t-chia-doi .cd-h2 { margin-top: 6px; font: 400 32px/1.15 var(--f-brush); }
.t-chia-doi .cd-panel--cream .cd-h2 { color: var(--red); }
.t-chia-doi .cd-ev__time { margin-top: 12px; font: 600 34px/1.1 var(--f-serif); letter-spacing: 1px; }
.t-chia-doi .cd-panel--cream .cd-ev__time { color: var(--red); }
.t-chia-doi .cd-btns { display: grid; gap: 8px; justify-items: center; margin-top: 16px; }

.t-chia-doi .cd-btn {
  display: inline-block; padding: 9px 20px;
  border: 1px solid var(--red); border-radius: 999px;
  background: var(--red); color: var(--gold);
  font: 600 12px/1.2 var(--f-serif); letter-spacing: 2px; text-decoration: none; text-transform: uppercase;
  cursor: pointer;
}
.t-chia-doi .cd-btn--ghost { background: transparent; color: var(--red); }
.t-chia-doi .cd-btn--red { margin-top: 18px; padding: 12px 28px; }
.t-chia-doi .cd-end .cd-btn { padding: 10px 14px; font-size: 10.5px; letter-spacing: 1px; white-space: nowrap; }
.t-chia-doi .cd-btn--gold { margin-top: 18px; border-color: var(--gold); background: var(--gold); color: var(--red-deep); }

/* ---------- lịch trình ---------- */
.t-chia-doi .cd-prog { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; }
.t-chia-doi .cd-prog li { display: grid; gap: 1px; padding-bottom: 12px; border-bottom: 1px dashed rgba(236, 203, 156, .4); }
.t-chia-doi .cd-prog li:last-child { border-bottom: 0; padding-bottom: 0; }
.t-chia-doi .cd-prog b { font: italic 600 19px/1.2 var(--f-serif); }
.t-chia-doi .cd-prog span { font: 500 12.5px/1.4 var(--f-body); color: #fbe9d6; }
.t-chia-doi .cd-prog small { font: italic 400 10.5px/1.4 var(--f-body); color: #fbe9d6; opacity: .8; }

/* ---------- lịch tháng ---------- */
.t-chia-doi .cd-cal .cd-kicker { color: var(--red); }
.t-chia-doi .cd-grid { margin: 18px auto 20px; width: 336px; font: 400 14px/1 var(--f-serif); }
.t-chia-doi .cd-grid__row { display: grid; grid-template-columns: repeat(7, 1fr); }
.t-chia-doi .cd-grid__row span { display: grid; place-items: center; height: 40px; }
.t-chia-doi .cd-grid__row--head span { height: 30px; font: 600 11px/1 var(--f-serif); letter-spacing: 1px; color: var(--red); border-bottom: 1px solid rgba(160, 20, 28, .25); margin-bottom: 4px; }
.t-chia-doi .cd-grid .is-sun { color: var(--red); }
.t-chia-doi .cd-grid .is-day { position: relative; color: var(--gold); font-weight: 600; }
.t-chia-doi .cd-grid .is-day::before {
  content: ""; position: absolute; z-index: -1; width: 34px; height: 34px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 3px var(--cream), 0 0 0 4px var(--red);
}
.t-chia-doi .cd-count { display: flex; justify-content: center; gap: 10px; margin-top: 8px; }
.t-chia-doi .cd-count div { width: 70px; padding: 10px 0 8px; border-radius: 10px; background: var(--red); color: var(--gold); display: grid; gap: 4px; }
.t-chia-doi .cd-count span { font: 600 26px/1 var(--f-serif); }
.t-chia-doi .cd-count small { font: 400 10px/1 var(--f-body); letter-spacing: 1px; text-transform: uppercase; color: #fbe9d6; }

/* ---------- bản đồ ---------- */
.t-chia-doi .cd-map .cd-addr { color: #fbe9d6; }
.t-chia-doi .cd-map__frame { margin: 18px auto 0; padding: 5px; border: 1px solid var(--gold); border-radius: 12px; background: rgba(0, 0, 0, .12); }
.t-chia-doi .cd-map__frame iframe { display: block; width: 100%; height: 230px; border: 0; border-radius: 8px; background: #e9dccb; }

/* ---------- album ---------- */
.t-chia-doi .cd-album { padding: 44px 16px; }
.t-chia-doi .cd-album .cd-kicker { color: var(--red); }
.t-chia-doi .cd-album__grid {
  display: grid; grid-auto-flow: row dense; grid-template-columns: 1fr 1fr; grid-auto-rows: 132px; gap: 8px; margin-top: 18px;
}
.t-chia-doi .cd-album__item { overflow: hidden; border-radius: 4px; background: #d9c9b6; box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(80, 20, 10, .18); }
.t-chia-doi .cd-album__item img { width: 100%; height: 100%; object-fit: cover; }
.t-chia-doi .cd-album__item--tall { grid-row: span 2; }
.t-chia-doi .cd-album__item--wide { grid-column: span 2; grid-row: span 2; }

/* ---------- xác nhận ---------- */
.t-chia-doi .cd-rsvp .cd-small { margin-top: 8px; }
.t-chia-doi .cd-form { display: grid; gap: 10px; margin-top: 20px; padding: 20px 16px; border-radius: 14px; background: var(--cream); box-shadow: 0 10px 24px rgba(40, 0, 0, .25); }
.t-chia-doi .cd-field {
  width: 100%; padding: 11px 14px;
  border: 1px solid rgba(160, 20, 28, .3); border-radius: 10px;
  background: #fffaf3; color: var(--ink);
  font: 400 15px/1.4 var(--f-body);
}
.t-chia-doi .cd-field:focus { outline: 2px solid rgba(160, 20, 28, .35); border-color: var(--red); }
.t-chia-doi .cd-form .cd-btn--red { justify-self: center; margin-top: 4px; }
.t-chia-doi .cd-form__msg { min-height: 18px; font: 400 13px/1.4 var(--f-body); color: var(--red); }

/* ---------- mừng cưới ---------- */
.t-chia-doi .cd-gift .cd-small { margin-top: 6px; }

/* ---------- kết ---------- */
.t-chia-doi .cd-end { min-height: 600px; }
.t-chia-doi .cd-end .cd-panel__in { padding-top: 60px; }
.t-chia-doi .cd-end .cd-date { margin-top: 12px; }
.t-chia-doi .cd-footer {
  padding: 16px 0 6px; text-align: center; background: var(--cream);
  font: 400 12px/1.4 var(--f-body); letter-spacing: 1px; color: var(--ink);
}
.t-chia-doi .cd-footer span { color: var(--red); }
.t-chia-doi .vela-credit { background: var(--cream); }

/* sự kiện thêm (gói 2) */
.t-chia-doi .vela-events { background: var(--cream); padding: 16px 18px; }
.t-chia-doi .vela-event { border-color: var(--red); background: #fffaf3; font-family: var(--f-body); }
.t-chia-doi .vela-event__side, .t-chia-doi .vela-event__title { color: var(--red); }
.t-chia-doi .vela-event__map { background: var(--red); color: var(--gold); }

/* ---------- màn mở thiệp ---------- */
.t-chia-doi .vela-gate__door--l { background: radial-gradient(circle at 100% 50%, #b3202a, var(--red) 60%, var(--red-deep)); }
.t-chia-doi .vela-gate__door--r { background: radial-gradient(circle at 0% 50%, #b3202a, var(--red) 60%, var(--red-deep)); }
.t-chia-doi .vela-gate__card { padding-top: 84px; }
.t-chia-doi .vela-gate__card::before {
  content: "囍"; position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
  width: 56px; height: 56px; display: grid; place-items: center;
  border: 2px solid var(--gold); border-radius: 50%; box-shadow: inset 0 0 0 4px var(--red), inset 0 0 0 5px var(--gold);
  font: normal 26px/1 "Vela Hy", serif; color: var(--gold);
}
.t-chia-doi .vela-gate__label { font: 500 12px/1.5 "Noto Serif Display", serif; letter-spacing: 3px; color: #fbe9d6; }
.t-chia-doi .vela-gate__guest { font-size: 52px; color: var(--gold); }
.t-chia-doi .vela-gate__names { font-size: 42px; line-height: 1.15; color: var(--gold); }
.t-chia-doi .vela-gate__names span { display: block; font: 400 30px/1.2 "Style Script", cursive; }
.t-chia-doi .vela-gate__date { font-family: "Noto Serif Display", serif; color: #fbe9d6; }
.t-chia-doi .vela-gate__open { font-family: "Noto Serif Display", serif; letter-spacing: 3px; text-transform: uppercase; }