/* Thiệp cưới Tuấn Anh & Minh Trang — mẫu Cửa Song Hỷ, tulip trắng */
:root {
  --bg: #FBF3E4;
  --card: #FFFFFF;
  --ink: #4A1A14;
  --muted: #7A4A3F;
  --accent: #9B1C1C;
  --on-accent: #FBF3E4;
  --line: #E8D3A8;
  --radius: 4px;
  --cua: #8E1B1B;
  --vang: #E2C27D;
  --f-display: 'Noto Serif Display', Georgia, serif;
  --f-body: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-script: 'Great Vibes', cursive;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: #EFE2C8; }
html.khoa, html.khoa body { overflow: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  background: #EFE2C8;
  background-image: radial-gradient(rgba(155, 28, 28, 0.06) 1px, transparent 1.4px);
  background-size: 18px 18px;
  color: var(--ink);
  font-family: var(--f-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
h2 { margin: 0; font-weight: 400; }
[hidden] { display: none !important; }

/* ---------- Khung thiệp ---------- */
.thiep {
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  margin: 0 auto;
  padding-bottom: calc(48px + env(safe-area-inset-bottom));
  background: var(--bg);
  overflow-x: clip;
}
@media (min-width: 520px) {
  .thiep { box-shadow: 0 0 60px rgba(74, 26, 20, 0.12); }
}

.anh-chinh { width: 100%; height: auto; display: block; }

.ten-cap { padding: 30px 24px 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; }
.nhan-nho { font-size: 11px; letter-spacing: 3px; color: var(--muted); font-weight: 500; text-transform: uppercase; }
.ten-lon { font-family: var(--f-display); font-size: 44px; line-height: 1.1; }
.ten-t { margin-top: 10px; }
.va-dong { font-family: var(--f-script); font-size: 34px; line-height: 1.1; color: var(--accent); }
.bo-hoa { margin-top: 16px; }
.bo-hoa svg { display: block; height: auto; overflow: visible; }

.the {
  margin: 28px 24px 0;
  padding: 22px 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.moi { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.hang-tim { display: flex; align-items: center; gap: 10px; }
.hang-tim .timnho { color: var(--accent); }
.ten-khach { font-family: var(--f-script); font-size: 34px; line-height: 1.2; color: var(--accent); overflow-wrap: anywhere; }
.loi-moi { font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ---------- Đếm ngược ---------- */
.dem { margin: 34px 24px 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.dem-luoi { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; text-align: center; }
.dem-luoi > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 0 10px; }
.so { font-family: var(--f-display); font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--accent); }
.dv { font-size: 10px; letter-spacing: 2px; color: var(--muted); margin-top: 2px; }
.dem-xong { font-family: var(--f-script); font-size: 30px; color: var(--accent); text-align: center; }

/* ---------- Lịch ---------- */
.lich { margin-top: 34px; padding: 20px 14px 16px; }
.lich-dau { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding: 0 6px 14px; }
.lich-thang { font-family: var(--f-display); font-size: 22px; white-space: nowrap; }
.lich-am { font-size: 11px; color: var(--muted); white-space: nowrap; }
.lich-thu, .lich-luoi { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
.lich-thu { font-size: 10px; font-weight: 600; letter-spacing: 1px; color: var(--muted); padding-bottom: 8px; }
.lich-luoi { row-gap: 6px; }
.o-ngay { position: relative; height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.o-ngay .d { position: relative; font-size: 15px; line-height: 1.1; }
.o-ngay .l { position: relative; font-size: 9px; line-height: 1.2; opacity: 0.75; }
.o-ngay.dam .d { font-weight: 600; }
.o-ngay.ngay-cuoi { color: var(--accent); }
.tim-boc { position: absolute; left: 50%; top: 50%; width: 54px; height: 50px; margin: -24px 0 0 -27px; pointer-events: none; }
.tim-boc svg { display: block; color: var(--accent); }
.cham-dac, .cham { position: absolute; bottom: 0; left: 50%; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; }
.cham-dac { background: var(--accent); }
.cham { border: 1px solid var(--accent); }
.lich-chu { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; padding-top: 14px; font-size: 11px; color: var(--muted); }

/* ---------- Lịch trình ---------- */
.tieu-de { margin: 52px 24px 0; display: flex; align-items: center; gap: 14px; }
.tieu-de h2, .anh-cuoi h2 { font-family: var(--f-script); font-size: 30px; line-height: 1.2; color: var(--accent); text-align: center; }
.ke { flex: 1; height: 1px; background: var(--line); }

.su-kien { margin-top: 22px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.su-kien .icon-ly { display: block; margin-bottom: 10px; overflow: visible; color: var(--accent); }
.nhan-vien { padding: 6px 14px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; letter-spacing: 3px; font-weight: 600; }
.su-kien > .nhan-vien { color: var(--accent); }
.gio-lon { margin-top: 14px; font-family: var(--f-display); font-size: 52px; line-height: 1; }
.su-kien > .gio-lon { color: var(--accent); }
.ngay-chu { margin-top: 10px; font-size: 16px; font-weight: 500; }
.ngay-am { margin-top: 4px; font-size: 13px; color: var(--muted); }
.gach { margin: 16px 0 12px; width: 40px; height: 1px; background: var(--line); }

.noi-bat {
  position: relative;
  overflow: hidden;
  margin: 16px 24px 0;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
  display: block;
}
.noi-bat .trang-tri { position: absolute; inset: 0; pointer-events: none; }
.noi-bat .anhsang { position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.22), rgba(255,255,255,0)); }
.noi-bat .timbay { position: absolute; bottom: 8px; }
.su-kien-noi { position: relative; padding: 22px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.icon-nhan { display: block; margin-bottom: 10px; overflow: visible; }
.noi-bat .ngay-am { color: inherit; opacity: 0.85; }
.noi-bat .gach { background: var(--on-accent); opacity: 0.5; }

/* ---------- Ảnh ---------- */
.anh-cuoi { margin: 36px 24px 0; display: flex; flex-direction: column; gap: 10px; }
.anh-cuoi h2 { margin-bottom: 6px; }
.anh-doi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.anh-cuoi img { width: 100%; height: auto; display: block; border-radius: var(--radius); background: #EADBC0; }

/* ---------- Địa điểm ---------- */
.dia-diem { margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.dia-diem .ghim { display: block; color: var(--accent); }
.dia-chi { font-family: var(--f-display); font-size: 20px; line-height: 1.35; }
.qr { background: #FFFFFF; padding: 8px; border-radius: 8px; }
.qr img { display: block; width: 124px; height: 124px; }
.nut {
  min-height: 46px; padding: 0 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--accent); color: var(--on-accent);
  font-size: 14px; font-weight: 500; text-decoration: none;
}

/* ---------- Cuối thiệp ---------- */
.cuoi { position: relative; margin: 40px 24px 0; padding-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.tim-cuoi { position: absolute; left: 0; right: 0; top: 40px; height: 0; color: var(--accent); }
.tim-cuoi .timbay { position: absolute; }
.cam-on { position: relative; font-family: var(--f-script); font-size: 30px; line-height: 1.3; color: var(--accent); }

@media (max-width: 360px) {
  .the, .dem, .tieu-de, .noi-bat, .anh-cuoi, .cuoi { margin-left: 16px; margin-right: 16px; }
  .the, .su-kien-noi { padding-left: 14px; padding-right: 14px; }
  .ngay-am { font-size: 12px; }
}

/* ---------- Bìa: cửa Song Hỷ ---------- */
.bia {
  position: fixed; inset: 0; z-index: 20;
  width: 100%; height: 100%; margin: 0; padding: 0; border: 0;
  background: transparent; color: var(--on-accent);
  font: inherit; cursor: pointer; display: block; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.cua { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--cua); overflow: hidden; }
.cua.trai { left: 0; border-right: 1px solid #5E0F0F; }
.cua.phai { right: 0; border-left: 1px solid #5E0F0F; }
.cua.trai .khung1 { position: absolute; inset: 16px 10px 16px 16px; border: 1.5px solid var(--vang); }
.cua.trai .khung2 { position: absolute; inset: 24px 18px 24px 24px; border: 1px solid #B8904A; }
.cua.phai .khung1 { position: absolute; inset: 16px 16px 16px 10px; border: 1.5px solid var(--vang); }
.cua.phai .khung2 { position: absolute; inset: 24px 24px 24px 18px; border: 1px solid #B8904A; }
.hy { position: absolute; top: 23%; font-family: var(--f-display); font-size: min(44vw, 26vh, 240px); line-height: 1; color: var(--vang); }
.cua.trai .hy { right: 0; transform: translateX(50%); }
.cua.phai .hy { left: 0; transform: translateX(-50%); }
.ten-cua { position: absolute; left: 0; right: 0; top: 12%; padding: 0 12px; text-align: center; white-space: nowrap; font-family: var(--f-display); font-size: clamp(16px, 5.4vw, 32px); letter-spacing: 0.5px; }
.num { position: absolute; top: 56%; width: 16px; height: 16px; border-radius: 50%; background: var(--vang); box-shadow: 0 0 0 4px var(--cua), 0 0 0 5px #B8904A; }
.cua.trai .num { right: 18px; }
.cua.phai .num { left: 18px; }
.bien {
  position: absolute; left: 0; right: 0; bottom: 16%;
  width: min(290px, 74vw); margin: 0 auto; padding: 18px 14px;
  background: var(--bg); color: var(--ink);
  border: 2px solid var(--vang); border-radius: 6px;
  text-align: center; display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}
.bien-nhan { font-size: 11px; letter-spacing: 4px; color: var(--muted); }
.bien-ten { font-family: var(--f-display); font-size: 22px; font-style: italic; line-height: 1.25; overflow-wrap: anywhere; }
.bien-ngay { font-size: 12px; letter-spacing: 3px; color: var(--muted); margin-top: 4px; }
.goiy-mo { position: absolute; left: 0; right: 0; bottom: calc(6% + env(safe-area-inset-bottom)); text-align: center; font-size: 12px; letter-spacing: 4px; color: #F3DFA8; }

/* Lớp hiệu ứng (tung hoa, pháo giấy, hoa rơi) */
.nhac-ghi { font-size: 10px; line-height: 1.5; color: var(--muted); opacity: .8; }
.nhac-ghi:empty { display: none; }
/* Nút nhạc: 3 cột nhảy khi đang phát, đứng yên khi tắt */
.nut-nhac {
  position: fixed; z-index: 35;
  right: max(16px, calc(50% - 240px + 16px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--vang); background: var(--cua); color: var(--vang);
  box-shadow: 0 4px 14px rgba(74, 26, 20, .28); cursor: pointer;
}
.nut-nhac svg { width: 20px; height: 20px; fill: currentColor; }
.nut-nhac .cot { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(.3); }
.nut-nhac.dang-phat .cot { animation: cot .9s ease-in-out infinite alternate; }
.nut-nhac.dang-phat .cot:nth-child(2) { animation-duration: .7s; animation-delay: -.3s; }
.nut-nhac.dang-phat .cot:nth-child(3) { animation-duration: 1.1s; animation-delay: -.6s; }
@keyframes cot { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
.nut-nhac.dang-phat::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--vang); animation: cham 2s ease-out infinite; }
.lop { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.lop .tam { position: absolute; left: 50%; width: 0; height: 0; }
.lop svg { display: block; width: 100%; height: 100%; }

/* =================== HIỆU ỨNG =================== */
/* Phần đầu chỉ chạy sau khi mở cửa */
html:not(.da-mo) .hero, html:not(.da-mo) .hero * { animation-play-state: paused !important; }

.len { animation: len 1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes len { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.ten-t { animation: tent 1s .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes tent { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: none; } }
.ten-p { animation: tenp 1s .7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes tenp { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
.va { display: inline-block; animation: vavao .8s .9s cubic-bezier(.3,1.6,.5,1) both, dap 1.6s 1.8s ease-in-out infinite; }
@keyframes vavao { from { opacity: 0; transform: scale(.3) rotate(-30deg); } to { opacity: 1; transform: none; } }
@keyframes dap { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(1); } 45% { transform: scale(1.14); } }

/* Hiện dần khi cuộn tới */
.mo { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.mo.hien { opacity: 1; transform: none; }
.mo.tu-trai { transform: translateX(-48px); }
.mo.tu-phai { transform: translateX(48px); }
.mo.tu-trai.hien, .mo.tu-phai.hien { transform: none; }

.nhun { animation: nhun 3.2s ease-in-out infinite; }
@keyframes nhun { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.timnho { display: inline-block; animation: timnho 1.6s ease-in-out infinite; }
@keyframes timnho { 0%, 100% { transform: scale(1); opacity: .6; } 50% { transform: scale(1.3); opacity: 1; } }

.demo { opacity: 0; transform: translateY(18px) scale(.9); }
.hien .demo { animation: demo .7s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes demo { to { opacity: 1; transform: none; } }
.giay { animation: giay 1s ease-in-out infinite; }
@keyframes giay { 0%, 100% { transform: scale(1); } 20% { transform: scale(1.12); } }

.ngay { opacity: 0; transform: scale(.6); }
.hien .ngay { animation: ngay .45s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes ngay { to { opacity: 1; transform: none; } }
.cham { animation: cham 1.6s ease-out infinite; }
@keyframes cham { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3.2); opacity: 0; } }
.tim { stroke-dasharray: 100; stroke-dashoffset: 100; fill-opacity: 0; }
.hien .tim { animation: timve 1.8s 1.1s ease forwards, timfill .8s 2.8s ease forwards; }
@keyframes timve { to { stroke-dashoffset: 0; } }
@keyframes timfill { to { fill-opacity: .16; } }
.hien .tim-boc { animation: nhip 2.6s 3.5s ease-in-out infinite; }
@keyframes nhip { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

.ke { transform: scaleX(0); transition: transform 1.1s cubic-bezier(.2,.7,.2,1) .15s; }
.ke.trai { transform-origin: 100% 50%; }
.ke.phai { transform-origin: 0 50%; }
.hien .ke { transform: none; }

.sopop { opacity: 0; }
.hien .sopop { animation: sopop .8s .45s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes sopop { from { opacity: 0; transform: scale(.5); } to { opacity: 1; transform: none; } }
.ly { transform-box: fill-box; transform-origin: 50% 100%; }
.hien .lyt { animation: cungl 3.2s 1s ease-in-out infinite; }
.hien .lyp { animation: cungp 3.2s 1s ease-in-out infinite; }
@keyframes cungl { 0%, 55%, 100% { transform: rotate(0); } 68% { transform: rotate(10deg); } 80% { transform: rotate(6deg); } }
@keyframes cungp { 0%, 55%, 100% { transform: rotate(0); } 68% { transform: rotate(-10deg); } 80% { transform: rotate(-6deg); } }
.lap { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
.hien .lap { animation: lap 2.4s ease-in-out infinite; }
@keyframes lap { 0%, 100% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1); } }
.hien .lapcung { animation: lapcung 3.2s 1s ease-out infinite; }
@keyframes lapcung { 0%, 62%, 100% { opacity: 0; transform: scale(.3); } 72% { opacity: 1; transform: scale(1.2); } 88% { opacity: 0; transform: scale(.8); } }
.hien .nhan { animation: nhan 3s 1s ease-in-out infinite; }
@keyframes nhan { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.anhsang { transform: translateX(-130%) skewX(-20deg); }
.hien .anhsang { animation: quetsang 4.5s 1.2s ease-in-out infinite; }
@keyframes quetsang { 0% { transform: translateX(-130%) skewX(-20deg); } 35%, 100% { transform: translateX(330%) skewX(-20deg); } }
.timbay { opacity: 0; }
.hien .timbay { animation: timbay 5s ease-in infinite; }
@keyframes timbay { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: .5; } 100% { opacity: 0; transform: translateY(-170px) scale(1.1); } }
.anhv { opacity: 0; transform: translateY(26px) scale(.96); }
.hien .anhv, .anhv.hien { animation: anhlen .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes anhlen { to { opacity: 1; transform: none; } }
.ghim { animation: ghim 1.8s ease-in-out infinite; }
@keyframes ghim { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Bó tulip: cuống mọc, lá vươn, hoa nở, đung đưa */
.tl-than { transform-box: fill-box; transform-origin: 50% 100%; animation: tlthan .9s cubic-bezier(.3,.7,.3,1) both; }
@keyframes tlthan { from { transform: scaleY(0); } to { transform: none; } }
.tl-la { transform-box: fill-box; transform-origin: 100% 100%; animation: tlla .7s cubic-bezier(.3,1.4,.5,1) both; }
.tl-la2 { transform-box: fill-box; transform-origin: 0 100%; animation: tlla .7s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes tlla { from { transform: scale(0); } to { transform: none; } }
.tl-bong { transform-box: fill-box; transform-origin: 50% 100%; animation: tlbong .7s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes tlbong { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }
.tl-trai { transform-box: fill-box; transform-origin: 100% 100%; animation: tltrai 1.1s ease-out both; }
@keyframes tltrai { from { transform: rotate(16deg); } to { transform: none; } }
.tl-phai { transform-box: fill-box; transform-origin: 0 100%; animation: tlphai 1.1s ease-out both; }
@keyframes tlphai { from { transform: rotate(-16deg); } to { transform: none; } }
.tl-lac { transform-box: fill-box; transform-origin: 50% 100%; animation: tllac 4s ease-in-out infinite; }
@keyframes tllac { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.tl-no { transform-box: fill-box; transform-origin: 50% 50%; animation: tlbong .6s cubic-bezier(.3,1.6,.5,1) both; }
.mo:not(.hien) .bo-hoa * { animation-play-state: paused; }

/* Mở cửa */
.goiy { animation: goiy 2s ease-in-out infinite; }
@keyframes goiy { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.bia.dang { pointer-events: none; animation: biatat .25s 1.2s ease forwards; }
@keyframes biatat { to { opacity: 0; } }
.bia.dang .bien, .bia.dang .goiy-mo { animation: biendi .3s ease forwards; }
@keyframes biendi { to { opacity: 0; transform: translateY(20px); } }
.bia.dang .cua.trai { animation: cuatrai .95s .25s cubic-bezier(.6,0,.3,1) forwards; }
@keyframes cuatrai { to { transform: translateX(-101%); } }
.bia.dang .cua.phai { animation: cuaphai .95s .25s cubic-bezier(.6,0,.3,1) forwards; }
@keyframes cuaphai { to { transform: translateX(101%); } }

/* Pháo giấy */
.phao { opacity: 0; animation-duration: 1.7s; animation-timing-function: cubic-bezier(.1,.8,.3,1); animation-fill-mode: both; }
.p1 { animation-name: p1; } .p2 { animation-name: p2; } .p3 { animation-name: p3; }
@keyframes p1 { 0% { opacity: 0; transform: translateY(0) rotate(0); } 8%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-150px) rotate(540deg); } }
@keyframes p2 { 0% { opacity: 0; transform: translateY(0) rotate(0); } 8%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-215px) rotate(-480deg); } }
@keyframes p3 { 0% { opacity: 0; transform: translateY(0) rotate(0); } 8%, 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-280px) rotate(620deg); } }

/* Tung hoa tulip khi mở: ngang (tx) × lên-xuống (ty) × xoay (tz) */
.tx, .ty, .tz { animation-duration: 2.9s; animation-fill-mode: both; }
.tx { position: absolute; left: 0; top: 0; animation-timing-function: cubic-bezier(.2,.6,.4,1); }
.tx0 { animation-name: tx0; } @keyframes tx0 { to { transform: translateX(-175px); } }
.tx1 { animation-name: tx1; } @keyframes tx1 { to { transform: translateX(-125px); } }
.tx2 { animation-name: tx2; } @keyframes tx2 { to { transform: translateX(-80px); } }
.tx3 { animation-name: tx3; } @keyframes tx3 { to { transform: translateX(-38px); } }
.tx4 { animation-name: tx4; } @keyframes tx4 { to { transform: translateX(38px); } }
.tx5 { animation-name: tx5; } @keyframes tx5 { to { transform: translateX(80px); } }
.tx6 { animation-name: tx6; } @keyframes tx6 { to { transform: translateX(125px); } }
.tx7 { animation-name: tx7; } @keyframes tx7 { to { transform: translateX(175px); } }
.ty1 { animation-name: ty1; } .ty2 { animation-name: ty2; } .ty3 { animation-name: ty3; }
@keyframes ty1 { 0% { transform: translateY(0); animation-timing-function: cubic-bezier(.2,.6,.4,1); } 32% { transform: translateY(-310px); animation-timing-function: cubic-bezier(.5,0,.8,.5); } 100% { transform: translateY(560px); } }
@keyframes ty2 { 0% { transform: translateY(0); animation-timing-function: cubic-bezier(.2,.6,.4,1); } 32% { transform: translateY(-240px); animation-timing-function: cubic-bezier(.5,0,.8,.5); } 100% { transform: translateY(600px); } }
@keyframes ty3 { 0% { transform: translateY(0); animation-timing-function: cubic-bezier(.2,.6,.4,1); } 32% { transform: translateY(-175px); animation-timing-function: cubic-bezier(.5,0,.8,.5); } 100% { transform: translateY(640px); } }
.tz { opacity: 0; animation-timing-function: linear; }
.tz1 { animation-name: tz1; } .tz2 { animation-name: tz2; }
@keyframes tz1 { 0% { opacity: 0; transform: rotate(0) scale(.4); } 8% { opacity: 1; transform: rotate(30deg) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: rotate(380deg) scale(1); } }
@keyframes tz2 { 0% { opacity: 0; transform: rotate(0) scale(.4); } 8% { opacity: 1; transform: rotate(-30deg) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: rotate(-380deg) scale(1); } }

/* Hoa tulip rơi nhẹ trong lúc đọc thiệp */
.roi { position: absolute; top: 0; opacity: 0; will-change: transform, opacity; animation: roi-y linear infinite both; }
.roi-x, .roi-r { width: 100%; height: 100%; animation: ease-in-out infinite alternate both; }
.roi-x { animation-name: roi-x; } .roi-r { animation-name: roi-r; }
@keyframes roi-y { 0% { opacity: 0; transform: translateY(-70px); } 6%, 90% { opacity: var(--op, .9); } 100% { opacity: 0; transform: translateY(108vh); } }
@keyframes roi-x { from { transform: translateX(calc(var(--bien, 24px) * -1)); } to { transform: translateX(var(--bien, 24px)); } }
@keyframes roi-r { from { transform: rotate(var(--r0, -20deg)); } to { transform: rotate(var(--r1, 20deg)) scaleX(var(--sx, .8)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}