2817 lines
212 KiB
HTML
2817 lines
212 KiB
HTML
<html lang="vi"><head>
|
||
<script>
|
||
(function() {
|
||
const googleScriptUrl = 'https://script.google.com/macros/s/AKfycbyw1ZF-HVHiZqHCkYLCUfOvvz6Uew1AWQFzWFPwxLl_8hk5_YyJRFQd5PBTLlg2TZtj7g/exec';
|
||
const originalFetch = window.fetch;
|
||
|
||
function showLoading() {
|
||
let loading = document.getElementById('miu-loading-modal');
|
||
if (!loading) {
|
||
loading = document.createElement('div');
|
||
loading.id = 'miu-loading-modal';
|
||
loading.style.cssText = "position:fixed;inset:0;z-index:999998;display:none;align-items:center;justify-content:center;background:rgba(15,23,42,0.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity 0.2s ease;";
|
||
loading.innerHTML = `
|
||
<div style="background:#fff;border-radius:18px;padding:24px 36px;display:flex;align-items:center;gap:16px;box-shadow:0 20px 25px -5px rgba(0,0,0,0.15);font-family:'Lora', Georgia, serif;border:1px solid rgba(244,63,94,0.05);">
|
||
<div style="width:28px;height:28px;border:3px solid rgba(244,63,94,0.15);border-top-color:#A8872A;border-radius:50%;animation:miu-spin-loading 0.8s linear infinite;"></div>
|
||
<div style="font-size:16px;color:#8d5f25;font-weight:600;letter-spacing:0.02em;">Đang gửi thông tin...</div>
|
||
</div>
|
||
<style>
|
||
@keyframes miu-spin-loading {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
</style>
|
||
`;
|
||
document.body.appendChild(loading);
|
||
}
|
||
loading.style.display = 'flex';
|
||
loading.offsetHeight; // trigger reflow
|
||
loading.style.opacity = '1';
|
||
}
|
||
|
||
function hideLoading() {
|
||
let loading = document.getElementById('miu-loading-modal');
|
||
if (loading) {
|
||
loading.style.opacity = '0';
|
||
setTimeout(function() {
|
||
loading.style.display = 'none';
|
||
}, 200);
|
||
}
|
||
}
|
||
|
||
function showSuccessModal(title, message) {
|
||
let modal = document.getElementById('miu-success-modal');
|
||
if (!modal) {
|
||
modal = document.createElement('div');
|
||
modal.id = 'miu-success-modal';
|
||
modal.style.cssText = "position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;background:rgba(15,23,42,0.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity 0.3s ease;";
|
||
modal.innerHTML = `
|
||
<div style="background:#fff;border-radius:24px;padding:32px;width:min(440px,90%);text-align:center;box-shadow:0 25px 50px -12px rgba(0,0,0,0.25);transform:scale(0.9);transition:transform 0.3s ease;font-family:'Lora', Georgia, serif;position:relative;border:1px solid rgba(244,63,94,0.1);">
|
||
<div style="width:80px;height:80px;background:rgba(244,63,94,0.1);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;animation:miu-heart-pulse 2s infinite;">
|
||
<svg width="40" height="40" viewBox="0 0 24 24" fill="#f43f5e" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
|
||
</svg>
|
||
</div>
|
||
<h3 id="miu-modal-title" style="margin:0 0 10px;font-size:22px;color:#8d5f25;font-weight:700;"></h3>
|
||
<p id="miu-modal-message" style="margin:0 0 24px;font-size:15px;color:#64748b;line-height:1.6;"></p>
|
||
<button id="miu-modal-close" style="width:100%;padding:14px;background:#A8872A;color:#fff;border:0;border-radius:14px;font-size:16px;font-weight:700;cursor:pointer;transition:background 0.2s;outline:none;font-family:inherit;">Đóng</button>
|
||
</div>
|
||
<style>
|
||
@keyframes miu-heart-pulse {
|
||
0% { transform: scale(1); }
|
||
50% { transform: scale(1.1); }
|
||
100% { transform: scale(1); }
|
||
}
|
||
</style>
|
||
`;
|
||
document.body.appendChild(modal);
|
||
|
||
const closeBtn = modal.querySelector('#miu-modal-close');
|
||
closeBtn.addEventListener('click', function() {
|
||
modal.style.opacity = '0';
|
||
modal.querySelector('div').style.transform = 'scale(0.9)';
|
||
setTimeout(function() {
|
||
modal.style.display = 'none';
|
||
}, 300);
|
||
});
|
||
}
|
||
|
||
modal.querySelector('#miu-modal-title').textContent = title;
|
||
modal.querySelector('#miu-modal-message').textContent = message;
|
||
|
||
modal.style.display = 'flex';
|
||
modal.offsetHeight; // trigger reflow
|
||
modal.style.opacity = '1';
|
||
modal.querySelector('div').style.transform = 'scale(1)';
|
||
}
|
||
|
||
window.fetch = function(url, options) {
|
||
const urlStr = String(url);
|
||
if (urlStr.includes('/api/')) {
|
||
if (urlStr.includes('/wishes')) {
|
||
if (options && options.method === 'POST') {
|
||
let payload = { fullname: 'Ẩn danh', comment: '' };
|
||
try { payload = JSON.parse(options.body); } catch(e) {}
|
||
showLoading();
|
||
return originalFetch(googleScriptUrl + '?action=wish', {
|
||
method: 'POST',
|
||
body: options.body
|
||
})
|
||
.then(function(res) {
|
||
hideLoading();
|
||
if (!res.ok) throw new Error();
|
||
showSuccessModal('Gửi lời chúc thành công!', 'Cảm ơn bạn đã gửi những lời chúc tốt đẹp nhất đến với Cô dâu & Chú rể!');
|
||
return res;
|
||
})
|
||
.catch(function() {
|
||
hideLoading();
|
||
showSuccessModal('Gửi lời chúc thành công!', 'Cảm ơn bạn đã gửi những lời chúc tốt đẹp nhất đến với Cô dâu & Chú rể!');
|
||
return new Response(JSON.stringify({
|
||
success: true,
|
||
data: { fullname: payload.fullname, comment: payload.comment }
|
||
}), {
|
||
status: 200,
|
||
headers: { 'Content-Type': 'application/json' }
|
||
});
|
||
});
|
||
} else {
|
||
return originalFetch(googleScriptUrl + '?action=getWishes')
|
||
.then(function(res) {
|
||
if (!res.ok) throw new Error();
|
||
return res;
|
||
})
|
||
.catch(function() {
|
||
return new Response(JSON.stringify({ success: true, data: [] }), {
|
||
status: 200,
|
||
headers: { 'Content-Type': 'application/json' }
|
||
});
|
||
});
|
||
}
|
||
}
|
||
if (urlStr.includes('/rsvp')) {
|
||
showLoading();
|
||
return originalFetch(googleScriptUrl + '?action=rsvp', {
|
||
method: 'POST',
|
||
body: options.body
|
||
})
|
||
.then(function(res) {
|
||
hideLoading();
|
||
if (!res.ok) throw new Error();
|
||
showSuccessModal('Xác nhận thành công!', 'Cảm ơn bạn đã gửi thông tin xác nhận tham dự lễ cưới!');
|
||
return res;
|
||
})
|
||
.catch(function() {
|
||
hideLoading();
|
||
showSuccessModal('Xác nhận thành công!', 'Cảm ơn bạn đã gửi thông tin xác nhận tham dự lễ cưới!');
|
||
return new Response(JSON.stringify({ success: true }), {
|
||
status: 200,
|
||
headers: { 'Content-Type': 'application/json' }
|
||
});
|
||
});
|
||
}
|
||
}
|
||
return originalFetch(url, options);
|
||
};
|
||
})();
|
||
</script>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<style>
|
||
#miuBootLoading { position: fixed; inset: 0; z-index: 2147483000; background: #ffffff; display: flex; align-items: center; justify-content: center; transition: opacity 180ms ease; }
|
||
#miuBootLoading[data-hide="1"] { opacity: 0; }
|
||
#miuBootLoading .miuBootSpinner { width: 44px; height: 44px; border-radius: 999px; border: 3px solid rgba(244,63,94,0.18); border-top-color: rgba(244,63,94,0.82); animation: miuBootSpin 700ms linear infinite; }
|
||
@keyframes miuBootSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
|
||
</style>
|
||
<script>(function(){
|
||
try {
|
||
var htmlEl = document.documentElement;
|
||
if (!htmlEl) return;
|
||
var startedAt = Date.now();
|
||
var minMs = 500;
|
||
var maxMs = 1800;
|
||
var shown = false;
|
||
var removed = false;
|
||
var ensureOverlay = function(){
|
||
try {
|
||
if (shown) return;
|
||
shown = true;
|
||
var d = document.createElement('div');
|
||
d.id = 'miuBootLoading';
|
||
d.innerHTML = '<div class="miuBootSpinner" aria-label="loading"></div>';
|
||
var mount = document.body || document.documentElement;
|
||
mount.appendChild(d);
|
||
} catch(_e) {}
|
||
};
|
||
var release = function(){
|
||
try {
|
||
if (removed) return;
|
||
removed = true;
|
||
var d = document.getElementById('miuBootLoading');
|
||
if (d) {
|
||
try { d.setAttribute('data-hide','1'); } catch(_e3) {}
|
||
setTimeout(function(){ try { if (d && d.parentNode) d.parentNode.removeChild(d); } catch(_e4) {} }, 220);
|
||
}
|
||
} catch(_e5) {}
|
||
};
|
||
|
||
ensureOverlay();
|
||
|
||
var scheduleRelease = function(){
|
||
try {
|
||
var elapsed = Date.now() - startedAt;
|
||
var wait = Math.max(0, minMs - elapsed);
|
||
setTimeout(release, wait);
|
||
} catch(_e) { release(); }
|
||
};
|
||
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', scheduleRelease, { once: true });
|
||
} else {
|
||
scheduleRelease();
|
||
}
|
||
|
||
try {
|
||
window.addEventListener('load', scheduleRelease, { once: true });
|
||
} catch(_e) {}
|
||
|
||
setTimeout(release, maxMs);
|
||
} catch(_e) {}
|
||
})();</script>
|
||
<title>Thiệp cưới - Tuyền Nguyễn & Hà Nguyễn</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
||
<link href="css/css2.css" rel="stylesheet">
|
||
<style id="miu-local-font-faces">@font-face{font-family:'Lora';src:url('assets/fonts/builder/lora-regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap;}
|
||
@font-face{font-family:'Lora';src:url('assets/fonts/builder/lora-semibold.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap;}
|
||
@font-face{font-family:'Silenter';src:url('assets/fonts/builder/silenter.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap;}</style>
|
||
<link rel="canonical" href="https://miuwedding.com/tuyen-nguyen-ha-nguyen-2026-08-02">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:site_name" content="Miu Wedding">
|
||
<meta property="og:locale" content="vi_VN">
|
||
<meta property="og:url" content="https://miuwedding.com/tuyen-nguyen-ha-nguyen-2026-08-02">
|
||
<meta property="og:title" content="Thiệp cưới - Tuyền Nguyễn & Hà Nguyễn">
|
||
<meta property="og:description" content="Trân trọng kính mời Quý khách tới tham dự lễ cưới của: Tuyền Nguyễn & Hà Nguyễn. Sự hiện diện của bạn là niềm vinh hạnh của gia đình chúng tôi!">
|
||
<meta property="og:image" content="https://miuwedding.com/uploads/6a45ed923c9354ab3390c57a/1782979454211-1782967703785-gallery-HUNG4353-cropped.webp">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="Thiệp cưới - Tuyền Nguyễn & Hà Nguyễn">
|
||
<meta name="twitter:description" content="Trân trọng kính mời Quý khách tới tham dự lễ cưới của: Tuyền Nguyễn & Hà Nguyễn. Sự hiện diện của bạn là niềm vinh hạnh của gia đình chúng tôi!">
|
||
<meta name="twitter:image" content="https://miuwedding.com/uploads/6a45ed923c9354ab3390c57a/1782979454211-1782967703785-gallery-HUNG4353-cropped.webp">
|
||
<script>(function(){
|
||
try {
|
||
var cw = 575;
|
||
var phone = 600;
|
||
var vw = 0;
|
||
try { vw = Math.max(0, Number(window.innerWidth || 0)); } catch(e) { vw = 0; }
|
||
if (!cw || !vw) return;
|
||
var sw = vw <= 480 ? vw : Math.min(phone, Math.max(0, vw - 32));
|
||
var s = Math.min(1, sw / cw);
|
||
document.documentElement.style.setProperty('--miu-s', String(s));
|
||
} catch(e) {}
|
||
})();</script>
|
||
<script>(function(){
|
||
// Block F12 multiple ways
|
||
document.addEventListener('keydown', function(e) {
|
||
if (e.false || e.key === 'F12') {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
e.stopImmediatePropagation();
|
||
return false;
|
||
}
|
||
if (e.ctrlKey && e.shiftKey && e.keyCode === 73) { // Ctrl+Shift+I
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
e.stopImmediatePropagation();
|
||
return false;
|
||
}
|
||
if (e.ctrlKey && e.shiftKey && e.keyCode === 74) { // Ctrl+Shift+J
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
e.stopImmediatePropagation();
|
||
return false;
|
||
}
|
||
if (e.ctrlKey && e.shiftKey && e.keyCode === 67) { // Ctrl+Shift+C
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
e.stopImmediatePropagation();
|
||
return false;
|
||
}
|
||
if (e.ctrlKey && e.keyCode === 85) { // Ctrl+U
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
e.stopImmediatePropagation();
|
||
return false;
|
||
}
|
||
}, true); // Use capture phase
|
||
|
||
// Also block on window
|
||
window.addEventListener('keydown', function(e) {
|
||
if (e.false || e.key === 'F12') {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
e.stopImmediatePropagation();
|
||
return false;
|
||
}
|
||
}, true);
|
||
|
||
// Block right-click
|
||
document.addEventListener('ignoredContext', function(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
e.stopImmediatePropagation();
|
||
return false;
|
||
}, true);
|
||
|
||
window.addEventListener('ignoredContext', function(e) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
e.stopImmediatePropagation();
|
||
return false;
|
||
}, true);
|
||
})();</script>
|
||
<style>
|
||
html,body{min-height:100%;margin:0;padding:0;}
|
||
html{-webkit-text-size-adjust:none;text-size-adjust:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
|
||
*,*::before,*::after{box-sizing:border-box;}
|
||
body{background:#f3f4f6;min-height:100vh;overflow-y:auto;}
|
||
@font-face{font-family:Arcittya-Begatri;src:url('assets/fonts/builder/vip-arcittya-begatri.otf');font-style:normal;font-display:swap;}
|
||
@font-face{font-family:High Spirited;src:url('assets/fonts/builder/vip-high-spirited.otf');font-style:normal;font-display:swap;}
|
||
@font-face{font-family:Alisheia;src:url('assets/fonts/builder/vip-alisheia.otf');font-style:normal;font-display:swap;}
|
||
@font-face{font-family:Flavinda;src:url('assets/fonts/builder/flavinda.otf');font-style:normal;font-display:swap;}
|
||
@font-face{font-family:Ergisa-Regular;src:url('assets/fonts/builder/vip-ergisa-regular.otf');font-style:normal;font-display:swap;}
|
||
.miu-wrap{min-height:100vh;display:block;box-sizing:border-box;}
|
||
.miu-stage{--cw:575px;--ch:11133px;--phone:575px;--s:var(--miu-s, 1);--sw:575px;--sh:11133px;width:min(var(--phone), calc(100vw - 32px));height:calc(var(--sh) * var(--s));position:relative;margin:0 auto;background:#ffffff;}
|
||
.miu-canvas-wrap{width:100%;height:100%;position:relative;}
|
||
.miu-canvas{position:absolute;left:0;top:0;width:var(--cw);height:var(--ch);transform:scale(var(--s));transform-origin:top left;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,0.12);border-radius:12px;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;-webkit-text-size-adjust:none;text-size-adjust:none;}
|
||
.miu-canvas [data-node-type="element_text"]{line-height:1.25;}
|
||
@media (max-width: 480px){
|
||
body{background:#fff;}
|
||
.miu-stage{width:100vw;}
|
||
.miu-canvas{border-radius:0;box-shadow:none;}
|
||
}
|
||
|
||
.miu-fab-dock{position:fixed;right:14px;bottom:14px;z-index:9999;display:flex;flex-direction:column;gap:10px;align-items:flex-end;}
|
||
.miu-fab{width:46px;height:46px;border-radius:9999px;border:0;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.25);opacity:.96;position:relative;overflow:visible;}
|
||
.miu-fab:hover{opacity:1}
|
||
#miuFabToggle{background:rgba(17,24,39,.68);}
|
||
.miu-fab-dock[data-open="0"] .miu-fab-item{display:none;}
|
||
.miu-fab-dock[data-open="1"] .miu-fab-item{display:flex;width:46px;height:46px;padding:0;border-radius:9999px;justify-content:center;align-items:center;}
|
||
.miu-fab-item svg{display:block}
|
||
.miu-fab-item{overflow:visible;}
|
||
.miu-fab-item::after{content:attr(data-label);position:absolute;right:56px;top:50%;transform:translateY(-50%);background:rgba(17,24,39,.86);color:#fff;font-size:12px;padding:6px 8px;border-radius:10px;white-space:nowrap;opacity:0;pointer-events:none;z-index:20;}
|
||
.miu-fab-item:hover::after,.miu-fab-item:focus::after,.miu-fab-item:active::after{opacity:1;}
|
||
.miu-fab-item.miu-tip::after{opacity:1;}
|
||
|
||
|
||
#audioToggleBtn{background:rgba(17,24,39,.88);}
|
||
#audioToggleBtn svg{display:block}
|
||
#audioToggleBtn.playing svg{animation:miu-audioSpin 5s linear infinite;}
|
||
@keyframes miu-audioSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
|
||
#audioToggleBtn.muted::before{content:"";position:absolute;width:3px;height:38px;background:#fff;transform:rotate(45deg);border-radius:2px;}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
[data-miu-wishes="1"] *{box-sizing:border-box;}
|
||
[data-miu-wishes="1"] input,[data-miu-wishes="1"] textarea{font-family:inherit;}
|
||
[data-miu-wishes="1"] button:active{transform:translateY(1px);}
|
||
[data-miu-wishes="1"] .miu-wishes-item{padding:14px 14px;}
|
||
[data-miu-wishes="1"] .miu-wishes-item + .miu-wishes-item{border-top:1px solid rgba(0,0,0,0.06);}
|
||
[data-miu-wishes="1"] .miu-wishes-name{font-weight:900;margin-bottom:6px;font-size:var(--miu-wishes-list-name-size,14px);color:var(--miu-wishes-list-name-color,inherit);}
|
||
[data-miu-wishes="1"] .miu-wishes-comment{font-size:var(--miu-wishes-list-comment-size,13px);opacity:.85;line-height:1.35;color:var(--miu-wishes-list-comment-color,inherit);}
|
||
[data-miu-wishes="1"] .miu-wishes-empty{padding:14px;color:rgba(17,24,39,0.65);font-size:20px;text-align:center;}
|
||
|
||
|
||
[data-miu-rsvp="1"] *{box-sizing:border-box;}
|
||
[data-miu-rsvp="1"] input,[data-miu-rsvp="1"] textarea,[data-miu-rsvp="1"] select{font-family:inherit;}
|
||
[data-miu-rsvp="1"] button:active{transform:translateY(1px);}
|
||
[data-miu-rsvp="1"] .miu-rsvp-input,[data-miu-rsvp="1"] .miu-rsvp-textarea,[data-miu-rsvp="1"] .miu-rsvp-select{width:100%;border:1px solid rgba(0,0,0,0.12);border-radius:12px;padding:12px 14px;outline:none;background:#fff;font-size:20px;accent-color:var(--miu-rsvp-accent,#ec4899);}
|
||
[data-miu-rsvp="1"] .miu-rsvp-textarea{min-height:84px;resize:vertical;}
|
||
[data-miu-rsvp="1"] .miu-rsvp-radio{display:flex;flex-direction:column;gap:12px;font-size:20px;color:inherit;}
|
||
[data-miu-rsvp="1"] .miu-rsvp-radio label{display:flex;align-items:center;gap:10px;line-height:1.25;font-weight:500;}
|
||
[data-miu-rsvp="1"] .miu-rsvp-radio input[type="radio"]{width:auto;accent-color:var(--miu-rsvp-accent,#ec4899);}
|
||
[data-miu-rsvp="1"] .miu-rsvp-label{display:flex;flex-direction:column;gap:8px;}
|
||
[data-miu-rsvp="1"] .miu-rsvp-label-text{font-size:20px;font-weight:600;opacity:.9;}
|
||
|
||
|
||
.miu-toast-wrap{position:fixed;left:12px;right:12px;bottom:18px;z-index:20000;display:flex;flex-direction:column;gap:10px;pointer-events:none;}
|
||
@media(min-width:768px){.miu-toast-wrap{left:auto;right:18px;bottom:18px;max-width:420px;}}
|
||
.miu-toast{pointer-events:none;display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(17,24,39,0.92);color:#fff;font-size:14px;line-height:1.35;box-shadow:0 12px 30px rgba(0,0,0,0.28);}
|
||
.miu-toast[data-kind="success"]{background:rgba(5,150,105,0.95);}
|
||
.miu-toast[data-kind="error"]{background:rgba(220,38,38,0.95);}
|
||
|
||
|
||
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=Dancing+Script:wght@400;700&display=swap');
|
||
@font-face{font-family:"OpeningScript";src:url('assets/fonts/builder/vip-high-spirited.otf') format("opentype");font-style:normal;font-display:swap;}
|
||
@font-face{font-family:"SVN Betalisa";src:url('assets/fonts/builder/svn-betalisa.otf') format("opentype");font-style:normal;font-weight:400;font-display:swap;}
|
||
@font-face{font-family:"Ergisa";src:url('assets/fonts/builder/vip-ergisa.otf') format("opentype");font-style:normal;font-weight:400;font-display:swap;}
|
||
#miuOpening{position:fixed;inset:0;z-index:12000;display:none;background:transparent;}
|
||
#miuOpening[data-open="1"]{display:block;}
|
||
#miuOpening *{box-sizing:border-box;}
|
||
|
||
#miuOpeningSides{
|
||
--cw:575px;--s:min(1,calc((100vw - 32px)/var(--cw)));
|
||
width:var(--miu-opening-w,calc(var(--cw) * var(--s)));
|
||
height:100vh;
|
||
position:fixed;left:50%;transform:translateX(-50%);z-index:12001;
|
||
overflow:hidden;
|
||
--slide-card-color:#fdecd8;
|
||
--slide-card-stripe-color:#e9e9e9;
|
||
--slide-card-stripe-size:3.5%;
|
||
--slide-seal-size:78px;
|
||
--slide-save-top:clamp(36px, 10%, 92px);
|
||
--slide-save-left:clamp(20px, 6%, 44px);
|
||
|
||
--slide-save-s-size:95px;
|
||
--slide-save-s-offset:20px;
|
||
--slide-save-color:#8d5f25;
|
||
--slide-save-opacity:0.98;
|
||
--slide-save-font:"OpeningScript";
|
||
--opening-and-font:'Dancing Script';
|
||
--opening-and-size:clamp(24px,5.6vw,36px);
|
||
--opening-and-rotate:-4deg;
|
||
--opening-names-color:#8d5f25;
|
||
|
||
|
||
--opening-title-bottom:clamp(140px,20%,200px);
|
||
--opening-invite-bottom:clamp(110px,16%,160px);
|
||
--opening-invite-left:clamp(24px,6vw,20px);
|
||
--opening-invite-color:#8d5f25;
|
||
|
||
|
||
--opening-cta-bottom:clamp(26px,6vh,64px);
|
||
--opening-cta-bg:rgba(255,255,255,0.10);
|
||
--opening-cta-border:rgba(255,255,255,0.26);
|
||
--opening-cta-color:rgba(255,255,255,0.92);
|
||
}
|
||
@media (max-width: 480px){
|
||
#miuOpeningSides{
|
||
--s:min(1,calc(100vw/var(--cw)));
|
||
width:100vw;
|
||
left:0;
|
||
right:0;
|
||
transform:none;
|
||
}
|
||
}
|
||
#miuOpeningSides._animating .card-side{animation-play-state:running !important;}
|
||
#miuOpeningSides.default .card-side{position:absolute;width:68%;height:100%;top:0;animation-fill-mode:forwards;--animate-duration:4s;animation-play-state:paused;}
|
||
#miuOpeningSides.default .card-side.right{right:0;background-color:var(--slide-card-color);z-index:0;width:50%;animation-name:miuOpeningSlideRight;animation-duration:4s;animation-timing-function:ease-out;animation-fill-mode:forwards;animation-delay:500ms;}
|
||
#miuOpeningSides.default .card-side.left{
|
||
background:linear-gradient(to right,var(--slide-card-color) 0,var(--slide-card-color) calc(100% - var(--slide-card-stripe-size,7%)),var(--slide-card-stripe-color,#e9e9e9) calc(100% - var(--slide-card-stripe-size,7%)),var(--slide-card-stripe-color,#e9e9e9) 100%);
|
||
background-repeat:no-repeat;background-position:top right;background-size:cover;background-attachment:scroll;background-origin:content-box;
|
||
left:0;z-index:1;animation-name:miuOpeningSlideLeft;animation-duration:4s;animation-timing-function:ease-out;animation-fill-mode:forwards;animation-delay:500ms;
|
||
}
|
||
|
||
#miuOpeningSides .seal-icon{position:absolute;top:50%;left:98%;transform:translate(-50%,-50%);
|
||
width:var(--slide-seal-size,84px);height:var(--slide-seal-size,84px);border-radius:50%;z-index:2;display:flex;align-items:center;justify-content:center;background:none;box-shadow:none;
|
||
}
|
||
#miuOpeningBtn{appearance:none;border:0;background:transparent;padding:0;cursor:pointer;width:100%;height:100%;display:block;}
|
||
#miuOpeningBtn img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,0.35));}
|
||
|
||
#miuOpeningCta{position:absolute;left:50%;transform:translateX(-50%);
|
||
top:calc(50% + (var(--slide-seal-size,84px) / 2) + 18px);
|
||
bottom:auto;z-index:3;display:flex;justify-content:center;width:min(92%,420px);pointer-events:auto;
|
||
}
|
||
#miuOpeningCtaBtn{appearance:none;cursor:pointer;border-radius:999px;padding:12px 18px;border:1px solid var(--opening-cta-border,rgba(255,255,255,0.25));background:var(--opening-cta-bg,rgba(255,255,255,0.10));font-family:"Lora",serif;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;font-size:12px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,0.25);color:var(--slide-save-color,rgba(255,255,255,0.96))}
|
||
#miuOpeningCtaBtn:active{transform:translateY(1px);}
|
||
|
||
#miuOpeningSides .card-side.left .wedding-save-the-date{position:absolute;top:var(--slide-save-top,calc(4vh + 20px));left:var(--slide-save-left,clamp(16px,4vw,32px));
|
||
font-family:var(--slide-save-font,"OpeningScript"),"Ergisa","SVN Betalisa","Lora",serif !important;font-size:var(--slide-save-size,clamp(38px,10.5vw,66px));line-height:var(--slide-save-leading,1);
|
||
letter-spacing:var(--slide-save-tracking,0);color:var(--slide-save-color,rgba(255,255,255,0.96));opacity:var(--slide-save-opacity,0.98);
|
||
display:inline-flex;align-items:flex-end;gap:8px;
|
||
pointer-events:none;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,0.22);z-index:2;
|
||
}
|
||
#miuOpeningSides .card-side.left .wedding-save-the-date span{position:static;font-size:var(--slide-save-s-size,clamp(78px,16.5vw,128px));line-height:0.78;transform:translateY(12px);}
|
||
|
||
#miuOpeningSides .card-side.left .opening-names{position:absolute;top:var(--opening-names-top,clamp(150px, 32%, 240px));left:var(--opening-names-left,clamp(24px,6%,44px));
|
||
color:var(--opening-names-color,#ffffff);display:flex;flex-direction:column;gap:var(--opening-names-gap,4px);z-index:2;pointer-events:none;text-align:left;max-width:70%;
|
||
}
|
||
#miuOpeningSides .card-side.left .opening-names .name{font-family:var(--opening-name-font,"Dancing Script"),"Ergisa","SVN Betalisa","Lora",serif;
|
||
font-size:var(--opening-name-size,clamp(30px,7vw,44px));line-height:var(--opening-name-leading,1.02);letter-spacing:var(--opening-name-tracking,0.01em);
|
||
text-shadow:0 1px 2px rgba(0,0,0,0.25);
|
||
}
|
||
#miuOpeningSides .card-side.left .opening-names .and{font-family:var(--opening-name-font,"Dancing Script"),"Ergisa","SVN Betalisa","Lora",serif;font-style:italic;
|
||
font-size:var(--opening-and-size,clamp(30px,6.5vw,42px));line-height:0.9;margin:var(--opening-and-margin,4px 0);
|
||
letter-spacing:0.02em;text-shadow:0 1px 2px rgba(0,0,0,0.2);
|
||
}
|
||
#miuOpeningSides .card-side.left .opening-bottom{position:absolute;left:var(--opening-title-left,clamp(24px,6%,44px));
|
||
bottom:var(--opening-invite-bottom,clamp(20px,4%,45px)) !important;
|
||
z-index:2;pointer-events:none;max-width:86%;
|
||
display:flex;flex-direction:column;gap:10px;
|
||
}
|
||
#miuOpeningSides .card-side.left .opening-title{position:static;
|
||
color:var(--opening-invite-color,rgba(255,255,255,0.88));font-family:var(--opening-title-font,"Cormorant Garamond"),"Lora",serif;font-size:var(--opening-title-size,clamp(16px,4vw,20px));
|
||
line-height:1.3;letter-spacing:0.03em;font-weight:500;
|
||
overflow-wrap:anywhere;word-break:break-word;
|
||
}
|
||
#miuOpeningSides .card-side.left .opening-invite{position:static;
|
||
color:var(--opening-invite-color,rgba(255,255,255,0.9));font-family:var(--opening-invite-font,"Cormorant Garamond"),"Lora",serif;font-size:var(--opening-invite-size,clamp(14px,3.8vw,18px));
|
||
line-height:1.2;letter-spacing:0.04em;font-style:italic;
|
||
overflow-wrap:anywhere;word-break:break-word;
|
||
}
|
||
|
||
@keyframes miuOpeningSlideRight{from{transform:translateX(0);opacity:1;}to{transform:translateX(100%);opacity:1;}}
|
||
@keyframes miuOpeningSlideLeft{from{transform:translateX(0);opacity:1;}to{transform:translateX(-110%);opacity:1;}}
|
||
|
||
#miuOpeningSides{--slide-card-stripe-color:#e9e9e9;--slide-card-stripe-size:3.5%;--slide-seal-size:78px;}
|
||
#miuOpeningSides .card-side.left .wedding-save-the-date{opacity:0.98;}
|
||
#miuOpeningSides .seal-icon{left:98%;}
|
||
|
||
|
||
@keyframes miu-fadeIn{from{opacity:0;transform:rotate(var(--miu-node-rotate,0deg))}to{opacity:1;transform:rotate(var(--miu-node-rotate,0deg))}}
|
||
@keyframes miu-rise{from{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translateY(var(--miu-anim-distance,14px))}to{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateY(0)}}
|
||
@keyframes miu-pan{from{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translateX(var(--miu-anim-distance,18px))}to{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateX(0)}}
|
||
@keyframes miu-fade{from{opacity:0;transform:rotate(var(--miu-node-rotate,0deg))}to{opacity:1;transform:rotate(var(--miu-node-rotate,0deg))}}
|
||
@keyframes miu-pop{0%{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) scale(.72)}55%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) scale(1.06)}100%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) scale(1)}}
|
||
@keyframes miu-wipe{0%{opacity:1;clip-path:inset(0 100% 0 0);transform:rotate(var(--miu-node-rotate,0deg))}100%{opacity:1;clip-path:inset(0 0 0 0);transform:rotate(var(--miu-node-rotate,0deg))}}
|
||
@keyframes miu-blur{0%{opacity:0;filter:blur(14px);transform:rotate(var(--miu-node-rotate,0deg)) scale(1.02)}100%{opacity:1;filter:blur(0);transform:rotate(var(--miu-node-rotate,0deg)) scale(1)}}
|
||
@keyframes miu-succession{0%{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) scale(.96);filter:blur(10px)}55%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) scale(1.02);filter:blur(0)}100%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) scale(1)}}
|
||
@keyframes miu-breathe{0%{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) scale(.98)}35%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) scale(1.02)}70%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) scale(1)}100%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) scale(1)}}
|
||
@keyframes miu-baseline{0%{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translateY(var(--miu-anim-distance,16px))}60%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateY(calc(var(--miu-anim-distance,16px) * -0.125))}100%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateY(0)}}
|
||
@keyframes miu-drift{0%{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translateX(calc(var(--miu-anim-distance,10px) * -1)) translateY(var(--miu-anim-distance,10px))}100%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateX(0) translateY(0)}}
|
||
@keyframes miu-tectonic{0%{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translateX(0)}35%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateX(calc(var(--miu-anim-distance,6px) * -1))}55%{transform:rotate(var(--miu-node-rotate,0deg)) translateX(var(--miu-anim-distance,6px))}70%{transform:rotate(var(--miu-node-rotate,0deg)) translateX(calc(var(--miu-anim-distance,6px) * -0.5))}100%{transform:rotate(var(--miu-node-rotate,0deg)) translateX(0)}}
|
||
@keyframes miu-tumble{0%{opacity:0;transform:rotate(calc(var(--miu-node-rotate,0deg) + var(--miu-anim-distance,8deg) * -1)) translateY(var(--miu-anim-distance,10px)) scale(.98)}60%{opacity:1;transform:rotate(calc(var(--miu-node-rotate,0deg) + var(--miu-anim-distance,8deg) * 0.25)) translateY(calc(var(--miu-anim-distance,10px) * -0.2)) scale(1.02)}100%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateY(0) scale(1)}}
|
||
@keyframes miu-neon{0%{opacity:0;filter:drop-shadow(0 0 0 rgba(255,0,200,0));transform:rotate(var(--miu-node-rotate,0deg))}55%{opacity:1;filter:drop-shadow(0 0 12px rgba(255,0,200,.45));transform:rotate(var(--miu-node-rotate,0deg))}100%{opacity:1;filter:drop-shadow(0 0 0 rgba(255,0,200,0));transform:rotate(var(--miu-node-rotate,0deg))}}
|
||
@keyframes miu-scrapbook{0%{opacity:0;transform:rotate(calc(var(--miu-node-rotate,0deg) + var(--miu-anim-distance,4deg) * -1)) scale(.96)}60%{opacity:1;transform:rotate(calc(var(--miu-node-rotate,0deg) + var(--miu-anim-distance,4deg) * 0.25)) scale(1.02)}100%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) scale(1)}}
|
||
@keyframes miu-stomp{0%{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) scale(.82)}60%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) scale(1.12)}100%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) scale(1)}}
|
||
@keyframes miu-rotate{0%{transform:rotate(var(--miu-node-rotate,0deg));transform-origin:center center}100%{transform:rotate(calc(var(--miu-node-rotate,0deg) + 360deg));transform-origin:center center}}
|
||
@keyframes miu-spin{0%{transform:rotate(var(--miu-node-rotate,0deg));transform-origin:center center}100%{transform:rotate(calc(var(--miu-node-rotate,0deg) + 360deg));transform-origin:center center}}
|
||
@keyframes miu-flicker{0%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg))}8%{opacity:.2;transform:rotate(var(--miu-node-rotate,0deg))}16%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg))}22%{opacity:.35;transform:rotate(var(--miu-node-rotate,0deg))}30%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg))}100%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg))}}
|
||
@keyframes miu-pulse{0%{transform:rotate(var(--miu-node-rotate,0deg)) scale(1)}40%{transform:rotate(var(--miu-node-rotate,0deg)) scale(1.05)}100%{transform:rotate(var(--miu-node-rotate,0deg)) scale(1)}}
|
||
@keyframes miu-wiggle{0%{transform:rotate(var(--miu-node-rotate,0deg))}20%{transform:rotate(calc(var(--miu-node-rotate,0deg) - 2.5deg))}40%{transform:rotate(calc(var(--miu-node-rotate,0deg) + 2.5deg))}60%{transform:rotate(calc(var(--miu-node-rotate,0deg) - 1.5deg))}80%{transform:rotate(calc(var(--miu-node-rotate,0deg) + 1.5deg))}100%{transform:rotate(var(--miu-node-rotate,0deg))}}
|
||
@keyframes miu-typewriter{from{opacity:1;width:0;transform:rotate(var(--miu-node-rotate,0deg))}to{opacity:1;width:100%;transform:rotate(var(--miu-node-rotate,0deg))}}
|
||
@keyframes miu-ascend{from{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translateY(var(--miu-anim-distance,10px))}to{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateY(0)}}
|
||
@keyframes miu-shift{from{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translateX(calc(var(--miu-anim-distance,10px) * -1))}to{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateX(0)}}
|
||
@keyframes miu-merge{0%{opacity:0;letter-spacing:.18em;filter:blur(10px);transform:rotate(var(--miu-node-rotate,0deg))}60%{opacity:1;letter-spacing:.02em;filter:blur(0);transform:rotate(var(--miu-node-rotate,0deg))}100%{opacity:1;letter-spacing:0;filter:blur(0);transform:rotate(var(--miu-node-rotate,0deg))}}
|
||
@keyframes miu-burst{0%{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) scale(.85)}55%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) scale(1.08)}100%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) scale(1)}}
|
||
@keyframes miu-bounce{0%{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translateY(var(--miu-anim-distance,14px))}60%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateY(calc(var(--miu-anim-distance,14px) * -0.428))}80%{transform:rotate(var(--miu-node-rotate,0deg)) translateY(calc(var(--miu-anim-distance,14px) * 0.142))}100%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateY(0)}}
|
||
@keyframes miu-roll{0%{opacity:0;transform:rotate(calc(var(--miu-node-rotate,0deg) + var(--miu-anim-distance,12deg) * -1)) translateX(calc(var(--miu-anim-distance,16px) * -1))}100%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateX(0)}}
|
||
@keyframes miu-skate{0%{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translateX(calc(var(--miu-anim-distance,24px) * -1)) skewX(calc(var(--miu-anim-distance,12deg) * -1))}60%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateX(calc(var(--miu-anim-distance,24px) * 0.166)) skewX(calc(var(--miu-anim-distance,12deg) * 0.5))}100%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateX(0) skewX(0)}}
|
||
@keyframes miu-clarify{0%{opacity:0;filter:blur(14px);transform:rotate(var(--miu-node-rotate,0deg))}100%{opacity:1;filter:blur(0);transform:rotate(var(--miu-node-rotate,0deg))}}
|
||
@keyframes miu-block{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:rotate(var(--miu-node-rotate,0deg))}100%{opacity:1;clip-path:inset(0 0 0 0);transform:rotate(var(--miu-node-rotate,0deg))}}
|
||
@keyframes miu-fadeInUp{from{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translateY(var(--miu-anim-distance,12px))}to{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateY(0)}}
|
||
@keyframes miu-fadeInDown{from{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translateY(calc(var(--miu-anim-distance,12px) * -1))}to{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateY(0)}}
|
||
@keyframes miu-fadeInLeft{from{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translateX(calc(var(--miu-anim-distance,12px) * -1))}to{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateX(0)}}
|
||
@keyframes miu-fadeInRight{from{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translateX(var(--miu-anim-distance,12px))}to{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateX(0)}}
|
||
@keyframes miu-bounceIn{0%{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) scale3d(.3,.3,.3)}20%{transform:rotate(var(--miu-node-rotate,0deg)) scale3d(1.1,1.1,1.1)}40%{transform:rotate(var(--miu-node-rotate,0deg)) scale3d(.9,.9,.9)}60%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) scale3d(1.03,1.03,1.03)}80%{transform:rotate(var(--miu-node-rotate,0deg)) scale3d(.97,.97,.97)}100%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) scale3d(1,1,1)}}
|
||
@keyframes miu-bounceInDown{0%{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translate3d(0,-300px,0) scale3d(.9,.9,.9)}60%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translate3d(0,20px,0) scale3d(1.03,1.03,1.03)}80%{transform:rotate(var(--miu-node-rotate,0deg)) translate3d(0,-10px,0) scale3d(.98,.98,.98)}100%{transform:rotate(var(--miu-node-rotate,0deg)) translate3d(0,0,0)}}
|
||
@keyframes miu-bounceInUp{0%{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translate3d(0,300px,0) scale3d(.9,.9,.9)}60%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translate3d(0,-20px,0) scale3d(1.03,1.03,1.03)}80%{transform:rotate(var(--miu-node-rotate,0deg)) translate3d(0,10px,0) scale3d(.98,.98,.98)}100%{transform:rotate(var(--miu-node-rotate,0deg)) translate3d(0,0,0)}}
|
||
@keyframes miu-bounceInLeft{0%{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translate3d(-300px,0,0) scale3d(.9,.9,.9)}60%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translate3d(20px,0,0) scale3d(1.03,1.03,1.03)}80%{transform:rotate(var(--miu-node-rotate,0deg)) translate3d(-10px,0,0) scale3d(.98,.98,.98)}100%{transform:rotate(var(--miu-node-rotate,0deg)) translate3d(0,0,0)}}
|
||
@keyframes miu-bounceInRight{0%{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translate3d(300px,0,0) scale3d(.9,.9,.9)}60%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translate3d(-20px,0,0) scale3d(1.03,1.03,1.03)}80%{transform:rotate(var(--miu-node-rotate,0deg)) translate3d(10px,0,0) scale3d(.98,.98,.98)}100%{transform:rotate(var(--miu-node-rotate,0deg)) translate3d(0,0,0)}}
|
||
@keyframes miu-flipInX{0%{transform:perspective(400px) rotateX(90deg);opacity:0}40%{transform:perspective(400px) rotateX(-10deg)}70%{transform:perspective(400px) rotateX(10deg);opacity:1}100%{transform:perspective(400px) rotateX(0);opacity:1}}
|
||
@keyframes miu-flipInY{0%{transform:perspective(400px) rotateY(90deg);opacity:0}40%{transform:perspective(400px) rotateY(-10deg)}70%{transform:perspective(400px) rotateY(10deg);opacity:1}100%{transform:perspective(400px) rotateY(0);opacity:1}}
|
||
@keyframes miu-lightSpeedInRight{0%{transform:rotate(var(--miu-node-rotate,0deg)) translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{transform:rotate(var(--miu-node-rotate,0deg)) skewX(20deg);opacity:1}80%{transform:rotate(var(--miu-node-rotate,0deg)) skewX(-5deg)}100%{transform:rotate(var(--miu-node-rotate,0deg)) translate3d(0,0,0);opacity:1}}
|
||
@keyframes miu-lightSpeedInLeft{0%{transform:rotate(var(--miu-node-rotate,0deg)) translate3d(-100%,0,0) skewX(30deg);opacity:0}60%{transform:rotate(var(--miu-node-rotate,0deg)) skewX(-20deg);opacity:1}80%{transform:rotate(var(--miu-node-rotate,0deg)) skewX(5deg)}100%{transform:rotate(var(--miu-node-rotate,0deg)) translate3d(0,0,0);opacity:1}}
|
||
@keyframes miu-jackInTheBox{0%{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) scale(.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(var(--miu-node-rotate,0deg)) rotate(-10deg)}70%{transform:rotate(var(--miu-node-rotate,0deg)) rotate(3deg)}100%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) scale(1) rotate(0)}}
|
||
@keyframes miu-heartBeat{0%{transform:rotate(var(--miu-node-rotate,0deg)) scale(1)}14%{transform:rotate(var(--miu-node-rotate,0deg)) scale(1.12)}28%{transform:rotate(var(--miu-node-rotate,0deg)) scale(1)}42%{transform:rotate(var(--miu-node-rotate,0deg)) scale(1.12)}70%{transform:rotate(var(--miu-node-rotate,0deg)) scale(1)}100%{transform:rotate(var(--miu-node-rotate,0deg)) scale(1)}}
|
||
@keyframes miu-tada{0%{transform:rotate(var(--miu-node-rotate,0deg)) scale3d(1,1,1)}10%,20%{transform:rotate(calc(var(--miu-node-rotate,0deg) - 3deg)) scale3d(.9,.9,.9)}30%,50%,70%,90%{transform:rotate(calc(var(--miu-node-rotate,0deg) + 3deg)) scale3d(1.1,1.1,1.1)}40%,60%,80%{transform:rotate(calc(var(--miu-node-rotate,0deg) - 3deg)) scale3d(1.1,1.1,1.1)}100%{transform:rotate(var(--miu-node-rotate,0deg)) scale3d(1,1,1) rotate(0)}}
|
||
@keyframes miu-zoomIn{from{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) scale(.92)}to{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) scale(1)}}
|
||
@keyframes miu-slideUp{from{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translateY(var(--miu-anim-distance,150px))}to{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateY(0)}}
|
||
@keyframes miu-slideDown{from{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translateY(calc(var(--miu-anim-distance,150px) * -1))}to{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateY(0)}}
|
||
@keyframes miu-slideLeft{from{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translateX(var(--miu-anim-distance,150px))}to{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateX(0)}}
|
||
@keyframes miu-slideRight{from{opacity:0;transform:rotate(var(--miu-node-rotate,0deg)) translateX(calc(var(--miu-anim-distance,150px) * -1))}to{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateX(0)}}
|
||
@keyframes miu-splitOpenLeft{0%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateX(0)}100%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateX(-500px)}}
|
||
@keyframes miu-splitOpenRight{0%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateX(0)}100%{opacity:1;transform:rotate(var(--miu-node-rotate,0deg)) translateX(500px)}}
|
||
@keyframes miu-rotateInDownLeft{from{transform-origin:left bottom;transform:rotate(var(--miu-node-rotate,0deg)) rotate3d(0,0,1,-45deg);opacity:0}to{transform-origin:center center;transform:rotate(var(--miu-node-rotate,0deg));opacity:1}}
|
||
@keyframes miu-rotateInDownRight{from{transform-origin:right bottom;transform:rotate(var(--miu-node-rotate,0deg)) rotate3d(0,0,1,45deg);opacity:0}to{transform-origin:center center;transform:rotate(var(--miu-node-rotate,0deg));opacity:1}}
|
||
@keyframes miu-swayBottom{0%{transform:rotate(var(--miu-node-rotate,0deg)) rotate(0deg);transform-origin:top center}8.33%{transform:rotate(var(--miu-node-rotate,0deg)) rotate(calc(var(--miu-anim-distance,10px) / 1px * 0.1deg));transform-origin:top center}16.67%{transform:rotate(var(--miu-node-rotate,0deg)) rotate(calc(var(--miu-anim-distance,10px) / 1px * 0.17deg));transform-origin:top center}25%{transform:rotate(var(--miu-node-rotate,0deg)) rotate(calc(var(--miu-anim-distance,10px) / 1px * 0.2deg));transform-origin:top center}33.33%{transform:rotate(var(--miu-node-rotate,0deg)) rotate(calc(var(--miu-anim-distance,10px) / 1px * 0.17deg));transform-origin:top center}41.67%{transform:rotate(var(--miu-node-rotate,0deg)) rotate(calc(var(--miu-anim-distance,10px) / 1px * 0.1deg));transform-origin:top center}50%{transform:rotate(var(--miu-node-rotate,0deg)) rotate(0deg);transform-origin:top center}58.33%{transform:rotate(var(--miu-node-rotate,0deg)) rotate(calc(var(--miu-anim-distance,10px) / 1px * -0.1deg));transform-origin:top center}66.67%{transform:rotate(var(--miu-node-rotate,0deg)) rotate(calc(var(--miu-anim-distance,10px) / 1px * -0.17deg));transform-origin:top center}75%{transform:rotate(var(--miu-node-rotate,0deg)) rotate(calc(var(--miu-anim-distance,10px) / 1px * -0.2deg));transform-origin:top center}83.33%{transform:rotate(var(--miu-node-rotate,0deg)) rotate(calc(var(--miu-anim-distance,10px) / 1px * -0.17deg));transform-origin:top center}91.67%{transform:rotate(var(--miu-node-rotate,0deg)) rotate(calc(var(--miu-anim-distance,10px) / 1px * -0.1deg));transform-origin:top center}100%{transform:rotate(var(--miu-node-rotate,0deg)) rotate(0deg);transform-origin:top center}}
|
||
|
||
|
||
</style>
|
||
|
||
<style>html,body,*{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }</style>
|
||
|
||
<script>
|
||
(function(){
|
||
try {
|
||
var sp = null;
|
||
try { sp = new URLSearchParams(window.location.search || ''); } catch(e) {}
|
||
if (sp && sp.get('muteMusic') === '1') return;
|
||
if (window.MIU_MUTE_MUSIC) return;
|
||
|
||
var audioRef = null;
|
||
|
||
var getAudio = function(){
|
||
if (audioRef && audioRef.play) return audioRef;
|
||
var a = document.getElementById('bgAudio') || document.getElementById('musicPlayer');
|
||
if (!a || !a.play) return null;
|
||
audioRef = a;
|
||
try { a.volume = typeof a.volume === 'number' ? a.volume : 0.5; } catch(e) {}
|
||
return a;
|
||
};
|
||
|
||
var add = function(type, handler, options){
|
||
try { document.addEventListener(type, handler, options); } catch(e) {
|
||
try { document.addEventListener(type, handler, true); } catch(_) {}
|
||
}
|
||
};
|
||
var remove = function(type, handler, options){
|
||
try { document.removeEventListener(type, handler, options); } catch(e) {
|
||
try { document.removeEventListener(type, handler, true); } catch(_) {}
|
||
}
|
||
};
|
||
|
||
var started = false;
|
||
var removeAll = function(){
|
||
remove('pointerdown', start, true);
|
||
remove('touchstart', start, { capture: true, passive: true });
|
||
remove('touchend', start, { capture: true, passive: true });
|
||
remove('keydown', start, true);
|
||
remove('scroll', start, { capture: true, passive: true });
|
||
remove('click', start, true);
|
||
};
|
||
|
||
var getStartAt = function(){
|
||
try {
|
||
var v = (window && (window.MIU_BG_START_AT != null)) ? window.MIU_BG_START_AT : null;
|
||
var n = Number(v);
|
||
if (!isFinite(n) || n <= 0) return 0;
|
||
return Math.floor(n);
|
||
} catch(e) { return 0; }
|
||
};
|
||
var trySeekStart = function(aud){
|
||
try {
|
||
if (!aud) return;
|
||
var t0 = getStartAt();
|
||
if (!t0) return;
|
||
var d = aud.duration;
|
||
var max = (isFinite(d) && d > 0) ? Math.max(0, d - 0.05) : t0;
|
||
var t = Math.max(0, Math.min(t0, max));
|
||
if (!isFinite(aud.currentTime) || aud.currentTime < t - 0.01) { aud.currentTime = t; }
|
||
} catch(e) {}
|
||
};
|
||
|
||
var start = function(){
|
||
if (started) return;
|
||
var audio = getAudio();
|
||
if (!audio) return;
|
||
started = true;
|
||
try {
|
||
trySeekStart(audio);
|
||
try {
|
||
audio.addEventListener && audio.addEventListener('loadedmetadata', function(){ try { trySeekStart(audio); } catch(e) {} }, { once: true });
|
||
audio.addEventListener && audio.addEventListener('canplay', function(){ try { trySeekStart(audio); } catch(e) {} }, { once: true });
|
||
audio.addEventListener && audio.addEventListener('playing', function(){ try { trySeekStart(audio); } catch(e) {} }, { once: true });
|
||
} catch(e) {}
|
||
var p = audio.play();
|
||
if (p && p.then) {
|
||
p.then(function(){ removeAll(); }).catch(function(){ started = false; });
|
||
} else {
|
||
removeAll();
|
||
}
|
||
} catch(e) {
|
||
started = false;
|
||
}
|
||
};
|
||
|
||
add('pointerdown', start, true);
|
||
add('touchstart', start, { capture: true, passive: true });
|
||
add('touchend', start, { capture: true, passive: true });
|
||
add('keydown', start, true);
|
||
add('scroll', start, { capture: true, passive: true });
|
||
add('click', start, true);
|
||
|
||
// Also attempt as soon as DOM is ready (won't wait for full assets/fonts).
|
||
var onReady
|
||
= function(){ try { start(); } catch(e) {} };
|
||
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', onReady, { once: true });
|
||
else onReady();
|
||
} catch(e) {}
|
||
})();
|
||
</script>
|
||
</head>
|
||
<body>
|
||
<div class="miu-wrap">
|
||
<div class="miu-stage">
|
||
<div class="miu-canvas-wrap">
|
||
<div class="miu-canvas" data-invitation-id="6a45ed923c9354ab3390c57a"><div data-node-id="element_image_gu8txrvht7u" style="position:absolute;left:0.2345753205128105px;top:-0.3916266025641031px;width:571.5567407852565px;height:853.3638822115386px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/1782967703785-gallery-HUNG4353.webp" alt="" style="width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"><div aria-hidden="true" style="position:absolute;inset:0;background:linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 60%);opacity:1;mix-blend-mode:normal;pointer-events:none;border-radius:0px;"></div></div></div><div data-node-id="element_text_4o40p4tj8od" data-node-type="element_text" data-manual-sized="1" data-anim-preset="zoomIn" data-anim-duration="1000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:123.8866686698718px;top:40.69501201923076px;width:322.23462540064105px;height:85px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Flavinda, 'Brush Script MT', cursive;font-size:65px;font-weight:400;color:#ffffff;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Wedding by</div><div data-node-id="element_image_792m4e0mt3k" style="position:absolute;left:179.87249599358975px;top:575.0230368589744px;width:209.29186698717947px;height:187.55834334935898px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/and.png" alt="" style="width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"></div></div><div data-node-id="element_text_xto8fx8n6t2" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInLeft" data-anim-duration="1000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:4.192140758547px;top:563.9134114583334px;width:563.7934194711539px;height:78px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:'Ergisa-Regular', 'Brush Script MT', cursive;font-size:60px;font-weight:400;text-transform:uppercase;color:#ffffff;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">TUYỀN NGUYỄN</div><div data-node-id="element_text_6nt1f1en6t2" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInRight" data-anim-duration="1000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:5.351211939102565px;top:682.1261017628206px;width:563.7934194711539px;height:78px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:'Ergisa-Regular', 'Brush Script MT', cursive;font-size:60px;font-weight:400;text-transform:uppercase;color:#ffffff;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">HÀ NGUYỄN</div><div data-node-id="element_text_u2eb3rgnrtc" data-node-type="element_text" data-manual-sized="1" data-anim-preset="tada" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:3.479467147435897px;top:786.5398137019231px;width:563.7934194711539px;height:39px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:30px;font-weight:400;color:#ffffff;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">02.08.2026</div><div data-node-id="element_text_4tuetxi8568" data-node-type="element_text" data-manual-sized="1" data-anim-preset="bounceInUp" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:182.44060496794873px;top:905.6275040064103px;width:177.46218950320514px;height:117px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:'Ergisa-Regular', 'Brush Script MT', cursive;font-size:90px;font-weight:400;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">N</div><div data-node-id="element_text_5ljdc5t9ep9" data-node-type="element_text" data-manual-sized="1" data-anim-preset="bounceInUp" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:221.1131310096154px;top:928.7952724358975px;width:127.74634415064102px;height:98px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Flavinda, 'Brush Script MT', cursive;font-size:75px;font-weight:400;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">N</div><div data-node-id="element_text_up9yj9pczn6" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInUp" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:113.85411658653844px;top:1060.811548477564px;width:342.64533253205127px;height:109px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">WE'VE BEEN WRITING<br>OUR LOVE STORY FOR YEARS...<br>AND THE NEXT CHAPTER BEGINS IN</div><div data-node-id="element_text_glhsrb2gyy8" data-node-type="element_text" data-manual-sized="1" style="position:absolute;left:266.51242972594594px;top:1183.5704926344804px;width:67.35817677315639px;height:47px;z-index:0;opacity:1;--miu-node-rotate:90.61208604205366deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:left;font-size:36px;font-weight:400;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">___</div><div data-node-id="element_text_fo4sqjxje0p" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInLeft" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:111.4698016826923px;top:1267.7570112179485px;width:102.78590745192308px;height:52px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:40px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">SAVE</div><div data-node-id="element_text_v4b1hgyktrk" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInRight" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:336.5883413461538px;top:1266.5837339743591px;width:111.4765625px;height:52px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:40px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">DATE</div><div data-node-id="element_text_bqbv67sl6qx" data-node-type="element_text" data-manual-sized="1" data-anim-preset="flipInY" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:236.25130208333334px;top:1268.184795673077px;width:102.78590745192308px;height:56px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Flavinda, 'Brush Script MT', cursive;font-size:43px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">The</div><div data-node-id="element_text_d1aqyodmanj" data-node-type="element_text" data-manual-sized="1" style="position:absolute;left:2.6633112980769056px;top:1328.151592548077px;width:565.3545172275641px;height:34px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:26px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">02.08.2026</div><div data-node-id="element_shape_qpzx8t8uqfq" style="position:absolute;left:75.50074864658372px;top:1485.0032272181586px;width:366.0807291666667px;height:466.5516679039767px;z-index:0;opacity:1;box-shadow:0 10px 30px rgba(0,0,0,0.15);--miu-node-rotate:-7.361810150877901deg;transform:rotate(var(--miu-node-rotate,0deg));"><svg viewBox="0 0 100 100" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible"><rect x="0" y="0" width="100" height="100" rx="5" ry="3.9232603198196214" fill="#ffffff" stroke="none" stroke-width="0"></rect></svg></div><div data-node-id="element_image_eh35aqpv57v" style="position:absolute;left:91.9912860576923px;top:1487.8477564102561px;width:320px;height:391.376953125px;z-index:0;opacity:1;--miu-node-rotate:-7.572750423930501deg;transform:rotate(var(--miu-node-rotate,0deg));overflow:hidden;border-radius:2px;"><div style="position:relative;width:100%;height:100%;"><img src="images/1782967776321-gallery-HUNG5720.webp" alt="" style="width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:2px;"></div></div><div data-node-id="element_image_bcwzn6az8f8" data-anim-preset="bounceInUp" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:-9.28929620726496px;top:1423.3046207264956px;width:240.2672275641026px;height:457.14142628205127px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/flower2.png" alt="" style="width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"></div></div><div data-node-id="element_shape_bs72p420dci" data-anim-preset="rotateInDownRight" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:163.80268173953243px;top:1440.0908674425175px;width:366.0807291666667px;height:466.5516679039767px;z-index:0;opacity:1;box-shadow:0 10px 30px rgba(0,0,0,0.15);--miu-node-rotate:7.103078309785076deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;"><svg viewBox="0 0 100 100" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible"><rect x="0" y="0" width="100" height="100" rx="5" ry="3.9232603198196214" fill="#ffffff" stroke="none" stroke-width="0"></rect></svg></div><div data-node-id="element_image_mknx9b21afk" data-anim-preset="rotateInDownRight" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:191.71784855769232px;top:1451.69140625px;width:320px;height:391.376953125px;z-index:0;opacity:1;--miu-node-rotate:7.029590910117932deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;overflow:hidden;border-radius:2px;"><div style="position:relative;width:100%;height:100%;"><img src="images/1782967773655-gallery-HUNG5711.webp" alt="" style="width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:2px;"></div></div><div data-node-id="element_image_cm1v9wk26fn" data-anim-preset="rotateInDownRight" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:249.86423277243586px;top:1667.7414362980771px;width:317.30018028846155px;height:288.37339743589746px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/flower1.png" alt="" style="width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"></div></div><div data-node-id="element_image_1zc41z8u56i" data-anim-preset="flipInX" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:1.9220252403846105px;top:2056.883313301282px;width:570.4567307692307px;height:372.93594751602564px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/1782967770788-gallery-HUNG5695.webp" alt="" style="width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"></div></div><div data-node-id="element_image_p8s2sfoyvae" data-anim-preset="slideLeft" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:211.42147435897436px;top:2432.734825721154px;width:367.4917367788462px;height:243.68189102564102px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/flower3.png" alt="" style="width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"></div></div><div data-node-id="element_text_q3ekra43f0f" data-node-type="element_text" data-manual-sized="1" data-anim-preset="lightSpeedInLeft" data-anim-duration="1000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:56.6376702724359px;top:2598.3556690705127px;width:157.40594951923075px;height:27px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">NHÀ TRAI</div><div data-node-id="element_text_deohpmy3vqz" data-node-type="element_text" data-manual-sized="1" data-anim-preset="lightSpeedInRight" data-anim-duration="1000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:355.74844751602564px;top:2597.5770566239316px;width:157.40594951923075px;height:27px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">NHÀ GÁI</div><div data-node-id="element_text_8sbt9n24moa" data-node-type="element_text" data-manual-sized="1" data-anim-preset="lightSpeedInLeft" data-anim-duration="1000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:29.60987580128205px;top:2640.5763221153848px;width:60.107471955128204px;height:27px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Ông:</div><div data-node-id="element_text_gjtwf9o5lpw" data-node-type="element_text" data-manual-sized="1" data-anim-preset="lightSpeedInLeft" data-anim-duration="1000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:36.75050080128206px;top:2666.295522836538px;width:33.83316639957263px;height:27px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Bà:</div><div data-node-id="element_text_jqapfkcpahc" data-node-type="element_text" data-manual-sized="1" style="position:absolute;left:237.0253934312006px;top:2628.7639650478964px;width:128.7226303056206px;height:50px;z-index:0;opacity:1;--miu-node-rotate:90.61208604205366deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:left;font-size:38.12px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">_______</div><div data-node-id="element_text_a8fqyxps7fy" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInUp" data-anim-duration="2000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:3.959134615384613px;top:2967.0406149839746px;width:565.4581830929487px;height:59px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:45px;font-weight:400;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">TUYỀN NGUYỄN</div><div data-node-id="element_text_vsiawvst7ei" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInUp" data-anim-duration="2000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:1.7447415865384528px;top:3115.936247996795px;width:565.9765124198718px;height:59px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:45px;font-weight:400;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">HÀ NGUYỄN</div><div data-node-id="element_text_fsrxoenu7we" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInUp" data-anim-duration="2000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:244.78069911858972px;top:3004.3509114583335px;width:104.65189302884615px;height:112px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Flavinda, 'Brush Script MT', cursive;font-size:86.18px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">and</div><div data-node-id="element_image_2c4zvwbv38u" data-anim-preset="fadeInUp" data-anim-duration="2000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:321.9868790064103px;top:3037.475510817308px;width:49.12234575320511px;height:53.783303285256395px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/flower-007.png" alt="" style="width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"></div></div><div data-node-id="element_text_8ls6uafvx4x" data-node-type="element_text" data-manual-sized="1" data-anim-preset="flipInX" data-anim-duration="1500" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:277.79645766559827px;top:3217.319628071582px;width:176.4996327457265px;height:27px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">ĐƯỢC TỔ CHỨC</div><div data-node-id="element_text_gl60cd9zjwu" data-node-type="element_text" data-manual-sized="1" style="position:absolute;left:187.88098988684925px;top:3346.2323717948725px;width:30.39379977661224px;height:33px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:25px;font-weight:700;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">08</div><div data-node-id="element_text_ghef6le0krw" data-node-type="element_text" data-manual-sized="1" style="position:absolute;left:236.38441506410254px;top:3326.0570412660254px;width:98.84660456730765px;height:65px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:50px;font-weight:700;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">02</div><div data-node-id="element_text_hnr8lps1hsi" data-node-type="element_text" data-manual-sized="1" style="position:absolute;left:436.36843495046617px;top:3346.1797375801284px;width:58.58864637966198px;height:33px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:25px;font-weight:700;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">2026</div><div data-node-id="element_text_iaypj2c28u1" data-node-type="element_text" data-manual-sized="1" style="position:absolute;left:96.15119190705128px;top:3317.955478766026px;width:130.04724969664625px;height:26px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:left;font-size:20px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">____________</div><div data-node-id="element_text_w7msh6h4pv3" data-node-type="element_text" data-manual-sized="1" style="position:absolute;left:96.17998798076923px;top:3366.4746594551284px;width:129.50012429600523px;height:26px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:left;font-size:20px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">____________</div><div data-node-id="element_text_kr9huon5clm" data-node-type="element_text" data-manual-sized="1" style="position:absolute;left:363.833733974359px;top:3317.809294871795px;width:129.50012429600523px;height:26px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:left;font-size:20px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">____________</div><div data-node-id="element_text_s30tuj25qy9" data-node-type="element_text" data-manual-sized="1" style="position:absolute;left:363.8682892628205px;top:3366.065755208333px;width:129.50012429600523px;height:26px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:left;font-size:20px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">____________</div><div data-node-id="element_text_e28lg1zatui" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInDown" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2, 0.8, 0.2, 1)" data-anim-loop="0" style="position:absolute;left:5.335036057692307px;top:3428.0293469551284px;width:563.8682892628206px;height:27px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:italic;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Tức ngày 20 tháng 6 năm Bính Ngọ</div><div data-node-id="element_text_78g7n8zc2j9" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInDown" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2, 0.8, 0.2, 1)" data-anim-loop="0" style="position:absolute;left:4.406700721153845px;top:3478.3301282051284px;width:563.8682892628206px;height:27px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Tại địa điểm</div><div data-node-id="element_text_obmup66chlu" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInDown" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2, 0.8, 0.2, 1)" data-anim-loop="0" style="position:absolute;left:0.5883413461538467px;top:3533.0470753205127px;width:565.9765124198718px;height:33px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:25px;font-weight:700;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">TỰ GIA NHÀ TRAI</div><div data-node-id="element_text_bezfbdfecbq" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInDown" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2, 0.8, 0.2, 1)" data-anim-loop="0" style="position:absolute;left:3.300931490384615px;top:3576.0352063301284px;width:563.8682892628206px;height:27px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:italic;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Vĩnh Viễn, Cần Thơ</div><div data-node-id="element_image_3fo335p90az" data-anim-preset="bounceInRight" data-anim-duration="600" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:327.09711423694574px;top:3488.882270878197px;width:375.8151518992889px;height:458.30352783203125px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/flower5.png" alt="" style="width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"></div></div><div data-node-id="element_text_i2tesajd6qi" data-node-type="element_text" data-manual-sized="1" data-anim-preset="bounceInLeft" data-anim-duration="1000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:5.159898024338975px;top:3742.3393562512533px;width:222.14834203475564px;height:58px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:'Arcittya-Begatri', 'Brush Script MT', cursive;font-size:45px;font-weight:400;font-style:italic;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Chú rể</div><div data-node-id="element_text_hmf9lbhf6bq" data-node-type="element_text" data-manual-sized="1" data-anim-preset="bounceInLeft" data-anim-duration="2000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:-2.646177634214741px;top:3800.5798976278716px;width:279.84456588875537px;height:39px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:30px;font-weight:400;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">TUYỀN NGUYỄN</div><div data-node-id="element_shape_qpdcposl2o8" data-anim-preset="rotateInDownLeft" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:22.964578260231526px;top:3884.508696531638px;width:269.97194751037205px;height:318.0465564507911px;z-index:0;opacity:1;box-shadow:0 10px 30px rgba(0,0,0,0.15);--miu-node-rotate:-4.709323307306775deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;"><svg viewBox="0 0 100 100" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible"><rect x="0" y="0" width="100" height="100" rx="0" ry="0" fill="#ffffff" stroke="none" stroke-width="0"></rect></svg></div><div data-node-id="element_image_81qqtxrlpe1" data-anim-preset="rotateInDownLeft" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:36.05655960677303px;top:3894.316735794146px;width:241.979540258182px;height:283.97895605811266px;z-index:0;opacity:1;--miu-node-rotate:-4.852265798216337deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/1782967726694-gallery-HUNG4753.webp" alt="" style="width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"></div></div><div data-node-id="element_shape_c29okxcn2om" data-anim-preset="rotateInDownRight" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:271.35353910006006px;top:4207.925528788601px;width:269.97194751037205px;height:318.0465564507911px;z-index:0;opacity:1;box-shadow:0 10px 30px rgba(0,0,0,0.15);--miu-node-rotate:9.321003456677161deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;"><svg viewBox="0 0 100 100" preserveAspectRatio="none" width="100%" height="100%" style="display:block;overflow:visible"><rect x="0" y="0" width="100" height="100" rx="0" ry="0" fill="#ffffff" stroke="none" stroke-width="0"></rect></svg></div><div data-node-id="element_image_wzrlmm1o2lx" data-anim-preset="rotateInDownRight" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:287.77879842122394px;top:4221.450922543609px;width:241.979540258182px;height:283.97895605811266px;z-index:0;opacity:1;--miu-node-rotate:9.074882253930866deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/1782967716924-gallery-HUNG4561.webp" alt="" style="width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"></div></div><div data-node-id="element_image_18e1f9eolng" style="position:absolute;left:244.1688490647536px;top:4150.611679755148px;width:123.40145795773236px;height:86.2006632486979px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/button.png" alt="" style="width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"></div></div><div data-node-id="element_text_pyjvoweuobm" data-node-type="element_text" data-manual-sized="1" data-anim-preset="bounceInRight" data-anim-duration="1000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:252.77386474609375px;top:4560.399843551597px;width:222.14834203475564px;height:58px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:'Arcittya-Begatri', 'Brush Script MT', cursive;font-size:45px;font-weight:400;font-style:italic;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Cô dâu</div><div data-node-id="element_text_gi6fv1euobm" data-node-type="element_text" data-manual-sized="1" data-anim-preset="bounceInRight" data-anim-duration="2000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:275.83637022360773px;top:4618.718023342386px;width:198.18657977764423px;height:39px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:30px;font-weight:400;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">HÀ NGUYỄN</div><div data-node-id="element_image_1n24pjq1bsy" data-anim-preset="bounceInRight" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:-3.957859137119385px;top:4271.835856797792px;width:265.85887419871796px;height:498.42608720828326px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/flower6.png" alt="" style="width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"></div></div><div data-node-id="element_image_50q7k4p3ix4" style="position:absolute;left:173.618168757512px;top:4473.763952688716px;width:45.4217803172576px;height:44.27357991536458px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/flower-007.png" alt="" style="width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"></div></div><div data-node-id="element_image_ltwi91o447u" style="position:absolute;left:324.4283118614784px;top:3818.59968156081px;width:76.76468678009815px;height:65.90901497082831px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/flower9.png" alt="" style="width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"></div></div><div data-node-id="element_image_xaj3frb46vi" style="position:absolute;left:149.39929668719952px;top:4245.873240439743px;width:76.76468678009815px;height:65.90901497082831px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/flower9.png" alt="" style="width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"></div></div><div data-node-id="element_image_6pbak01e8bi" data-anim-preset="flipInY" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:2.365394787910651px;top:4771.91014166921px;width:566.5840188050881px;height:382.35869774451623px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/1782967729179-gallery-HUNG4784.webp" alt="" style="width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"></div></div><div data-node-id="element_text_w2gwwa7f2cr" data-node-type="element_text" data-manual-sized="1" data-anim-preset="bounceInLeft" data-anim-duration="2000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:13.857566637870576px;top:5182.223864719841px;width:313.3453181340144px;height:66.04372777694311px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:45px;font-weight:400;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">TIME LINE OF</div><div data-node-id="element_text_5h6nbljg5jj" data-node-type="element_text" data-manual-sized="1" data-anim-preset="bounceInRight" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:310.6374777769431px;top:5244.888209311814px;width:251.91461338141028px;height:84px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Flavinda, 'Brush Script MT', cursive;font-size:65px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Wedding</div><div data-node-id="element_image_9whphr4gur3" style="position:absolute;left:276.0680299416566px;top:5154.874745582347px;width:115.17225999098557px;height:202.9079104692508px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/flower7.png" alt="" style="width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"></div></div><div data-node-id="element_image_h9vk4xqj0jl" style="position:absolute;left:-1.723467704577332px;top:5419.646583256999px;width:255.279294527494px;height:315.59657561473364px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/1782967757893-gallery-HUNG5380.webp" alt="" style="width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"></div></div><div data-node-id="element_text_lpmkotijy2s" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInUp" data-anim-duration="2000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:251.2094460511819px;top:5424.197778059308px;width:130.6758047250601px;height:39px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:30px;font-weight:700;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">07:00</div><div data-node-id="element_text_7k10dpyl1zu" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInUp" data-anim-duration="2000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:253.9142049153646px;top:5536.493348237218px;width:127.88573514498196px;height:39px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:30px;font-weight:700;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">07:30</div><div data-node-id="element_text_5g5q4a1ld3u" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInUp" data-anim-duration="2000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:252.50987908779047px;top:5648.30535291345px;width:127.88573514498196px;height:39px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:30px;font-weight:700;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">08:00</div><div data-node-id="element_text_onzv5nllp7q" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInUp" data-anim-duration="2000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:275.46644631410254px;top:5467.625963155462px;width:295.62610411032654px;height:33px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:25px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Đón khách</div><div data-node-id="element_text_cc9i3s5ml42" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInUp" data-anim-duration="2000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:276.8661749424079px;top:5700.201131080394px;width:295.62610411032654px;height:33px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:25px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Khai tiệc</div><div data-node-id="element_text_1l0s8gsn1f3" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInUp" data-anim-duration="2000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:276.1815482897636px;top:5585.451926884931px;width:295.62610411032654px;height:33px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:25px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Lễ Thành Hôn</div><div data-node-id="element_text_g2z8cymoi24" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInUp" data-anim-duration="2000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:3.607845991085732px;top:5794.554332922089px;width:262.6385818872696px;height:84px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:65px;font-weight:400;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">ALBUM</div><div data-node-id="element_text_en6ilgppg4m" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInUp" data-anim-duration="2000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:244.2776598808093px;top:5797.3922654109465px;width:100.47835208208127px;height:127px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:'Silenter', 'Brush Script MT', cursive;font-size:80px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">of</div><div data-node-id="element_image_p0jx7u5qxj4" style="position:absolute;left:307.66467911157855px;top:5789.342491241025px;width:45.4217803172576px;height:44.27357991536458px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/flower-007.png" alt="" style="width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"></div></div><div data-node-id="element_text_h1rildpr9vz" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInUp" data-anim-duration="2000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:3.408131917317716px;top:5874.3265418939445px;width:567.2302214793671px;height:229px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;font-size:170.44px;font-weight:700;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">LOVE</div><div data-node-id="element_album_s8lilcmw3xl" data-miu-album="1" data-miu-album-id="element_album_s8lilcmw3xl" style="position:absolute;left:3.296200483273233px;top:6107.620603603618px;width:564.8698973044371px;height:2547px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));"><div style="display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;height:100%;box-sizing:border-box;"><button type="button" data-miu-album-item="1" data-miu-album-id="element_album_s8lilcmw3xl" data-idx="0" data-src="/uploads/6a45ed923c9354ab3390c57a/1782967703785-gallery-HUNG4353.webp" data-anim-preset="fadeInLeft" data-anim-duration="1600" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="all:unset;cursor:pointer;display:block;opacity:0;">
|
||
<div style="width:100%;aspect-ratio:0.6666666666666666;border-radius:12px;overflow:hidden;background:#f3f4f6;position:relative;">
|
||
<img src="images/1782967703785-gallery-HUNG4353.webp" alt="" style="width:100%;height:100%;object-fit:cover;display:block;">
|
||
</div>
|
||
</button><button type="button" data-miu-album-item="1" data-miu-album-id="element_album_s8lilcmw3xl" data-idx="1" data-src="/uploads/6a45ed923c9354ab3390c57a/1782967708803-gallery-HUNG4392.webp" data-anim-preset="fadeInLeft" data-anim-duration="1600" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="all:unset;cursor:pointer;display:block;opacity:0;">
|
||
<div style="width:100%;aspect-ratio:0.6666666666666666;border-radius:12px;overflow:hidden;background:#f3f4f6;position:relative;">
|
||
<img src="images/1782967708803-gallery-HUNG4392.webp" alt="" style="width:100%;height:100%;object-fit:cover;display:block;">
|
||
</div>
|
||
</button><button type="button" data-miu-album-item="1" data-miu-album-id="element_album_s8lilcmw3xl" data-idx="2" data-src="/uploads/6a45ed923c9354ab3390c57a/1782967716924-gallery-HUNG4561.webp" data-anim-preset="fadeInRight" data-anim-duration="1600" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="all:unset;cursor:pointer;display:block;opacity:0;">
|
||
<div style="width:100%;aspect-ratio:0.6666666666666666;border-radius:12px;overflow:hidden;background:#f3f4f6;position:relative;">
|
||
<img src="images/1782967716924-gallery-HUNG4561.webp" alt="" style="width:100%;height:100%;object-fit:cover;display:block;">
|
||
</div>
|
||
</button><button type="button" data-miu-album-item="1" data-miu-album-id="element_album_s8lilcmw3xl" data-idx="3" data-src="/uploads/6a45ed923c9354ab3390c57a/1782967721961-gallery-HUNG4727.webp" data-anim-preset="fadeInRight" data-anim-duration="1600" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="all:unset;cursor:pointer;display:block;opacity:0;">
|
||
<div style="width:100%;aspect-ratio:0.6666666666666666;border-radius:12px;overflow:hidden;background:#f3f4f6;position:relative;">
|
||
<img src="images/1782967721961-gallery-HUNG4727.webp" alt="" style="width:100%;height:100%;object-fit:cover;display:block;">
|
||
</div>
|
||
</button><button type="button" data-miu-album-item="1" data-miu-album-id="element_album_s8lilcmw3xl" data-idx="4" data-src="/uploads/6a45ed923c9354ab3390c57a/1782967719196-gallery-HUNG4623.webp" data-anim-preset="fadeInLeft" data-anim-duration="1600" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="all:unset;cursor:pointer;display:block;opacity:0;">
|
||
<div style="width:100%;aspect-ratio:0.6666666666666666;border-radius:12px;overflow:hidden;background:#f3f4f6;position:relative;">
|
||
<img src="images/1782967719196-gallery-HUNG4623.webp" alt="" style="width:100%;height:100%;object-fit:cover;display:block;">
|
||
</div>
|
||
</button><button type="button" data-miu-album-item="1" data-miu-album-id="element_album_s8lilcmw3xl" data-idx="5" data-src="/uploads/6a45ed923c9354ab3390c57a/1782967724347-gallery-HUNG4739.webp" data-anim-preset="fadeInLeft" data-anim-duration="1600" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="all:unset;cursor:pointer;display:block;opacity:0;">
|
||
<div style="width:100%;aspect-ratio:0.6666666666666666;border-radius:12px;overflow:hidden;background:#f3f4f6;position:relative;">
|
||
<img src="images/1782967724347-gallery-HUNG4739.webp" alt="" style="width:100%;height:100%;object-fit:cover;display:block;">
|
||
</div>
|
||
</button><button type="button" data-miu-album-item="1" data-miu-album-id="element_album_s8lilcmw3xl" data-idx="6" data-src="/uploads/6a45ed923c9354ab3390c57a/1782967765681-gallery-HUNG5401.webp" data-anim-preset="fadeInRight" data-anim-duration="1600" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="all:unset;cursor:pointer;display:block;opacity:0;">
|
||
<div style="width:100%;aspect-ratio:0.6666666666666666;border-radius:12px;overflow:hidden;background:#f3f4f6;position:relative;">
|
||
<img src="images/1782967765681-gallery-HUNG5401.webp" alt="" style="width:100%;height:100%;object-fit:cover;display:block;">
|
||
</div>
|
||
</button><button type="button" data-miu-album-item="1" data-miu-album-id="element_album_s8lilcmw3xl" data-idx="7" data-src="/uploads/6a45ed923c9354ab3390c57a/1782967763086-gallery-HUNG5398.webp" data-anim-preset="fadeInRight" data-anim-duration="1600" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="all:unset;cursor:pointer;display:block;opacity:0;">
|
||
<div style="width:100%;aspect-ratio:0.6666666666666666;border-radius:12px;overflow:hidden;background:#f3f4f6;position:relative;">
|
||
<img src="images/1782967763086-gallery-HUNG5398.webp" alt="" style="width:100%;height:100%;object-fit:cover;display:block;">
|
||
</div>
|
||
</button><button type="button" data-miu-album-item="1" data-miu-album-id="element_album_s8lilcmw3xl" data-idx="8" data-src="/uploads/6a45ed923c9354ab3390c57a/1782967754942-gallery-HUNG5346.webp" data-anim-preset="fadeInLeft" data-anim-duration="1600" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="all:unset;cursor:pointer;display:block;opacity:0;">
|
||
<div style="width:100%;aspect-ratio:0.6666666666666666;border-radius:12px;overflow:hidden;background:#f3f4f6;position:relative;">
|
||
<img src="images/1782967754942-gallery-HUNG5346.webp" alt="" style="width:100%;height:100%;object-fit:cover;display:block;">
|
||
</div>
|
||
</button><button type="button" data-miu-album-item="1" data-miu-album-id="element_album_s8lilcmw3xl" data-idx="9" data-src="/uploads/6a45ed923c9354ab3390c57a/1782967752354-gallery-HUNG5320.webp" data-anim-preset="fadeInLeft" data-anim-duration="1600" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="all:unset;cursor:pointer;display:block;opacity:0;">
|
||
<div style="width:100%;aspect-ratio:0.6666666666666666;border-radius:12px;overflow:hidden;background:#f3f4f6;position:relative;">
|
||
<img src="images/1782967752354-gallery-HUNG5320.webp" alt="" style="width:100%;height:100%;object-fit:cover;display:block;">
|
||
</div>
|
||
</button><button type="button" data-miu-album-item="1" data-miu-album-id="element_album_s8lilcmw3xl" data-idx="10" data-src="/uploads/6a45ed923c9354ab3390c57a/1782967749866-gallery-HUNG5304.webp" data-anim-preset="fadeInRight" data-anim-duration="1600" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="all:unset;cursor:pointer;display:block;opacity:0;">
|
||
<div style="width:100%;aspect-ratio:0.6666666666666666;border-radius:12px;overflow:hidden;background:#f3f4f6;position:relative;">
|
||
<img src="images/1782967749866-gallery-HUNG5304.webp" alt="" style="width:100%;height:100%;object-fit:cover;display:block;">
|
||
</div>
|
||
</button><button type="button" data-miu-album-item="1" data-miu-album-id="element_album_s8lilcmw3xl" data-idx="11" data-src="/uploads/6a45ed923c9354ab3390c57a/1782967747174-gallery-HUNG5173.webp" data-anim-preset="fadeInRight" data-anim-duration="1600" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="all:unset;cursor:pointer;display:block;opacity:0;">
|
||
<div style="width:100%;aspect-ratio:0.6666666666666666;border-radius:12px;overflow:hidden;background:#f3f4f6;position:relative;">
|
||
<img src="images/1782967747174-gallery-HUNG5173.webp" alt="" style="width:100%;height:100%;object-fit:cover;display:block;">
|
||
</div>
|
||
</button></div></div><div data-node-id="element_text_h8wflmcxrlc" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInDown" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2, 0.8, 0.2, 1)" data-anim-loop="0" style="position:absolute;left:3.943267039763614px;top:9639.662252468363px;width:562.0675846980168px;height:78.66948680388622px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Flavinda, 'Brush Script MT', cursive;font-size:65px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Countdown</div><div data-node-id="element_image_83qc4ilyqj5" style="position:absolute;left:349.7369110889924px;top:8942.183196916982px;width:76.76468678009815px;height:65.90901497082831px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/flower9.png" alt="" style="width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"></div></div><div data-node-id="element_countdown_rq9fs34z3sw" data-anim-preset="fadeInDown" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2, 0.8, 0.2, 1)" data-anim-loop="0" data-countdown="1" data-target="2026-08-02T00:00" data-sep=" : " data-show-d="1" data-show-h="1" data-show-m="1" data-show-s="1" data-suf-d=" d" data-suf-h=" h" data-suf-m=" m" data-suf-s=" s" style="position:absolute;left:3.2898113544170684px;top:9745.372097791193px;width:566.8214612129407px;height:60px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:flex;align-items:center;justify-content:center;text-align:center;font-family:Lora, Georgia, "Times New Roman", serif;font-size:40px;font-weight:400;color:#8d5f25;white-space:pre;">00 d : 00 h : 00 m : 00 s</div><div data-node-id="element_image_sv299dr1bvw" data-anim-preset="fadeIn" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2, 0.8, 0.2, 1)" data-anim-loop="0" style="position:absolute;left:-2.614951891776844px;top:10680.876876922179px;width:582.1625507061298px;height:399.7284894111829px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;overflow:hidden;border-radius:0px;"><div style="position:relative;width:100%;height:100%;"><img src="images/1782967714243-gallery-HUNG4486.webp" alt="" style="width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:0px;"><div aria-hidden="true" style="position:absolute;inset:0;background:#000000;opacity:0.1;mix-blend-mode:normal;pointer-events:none;border-radius:0px;"></div></div></div><div data-node-id="element_text_827c14h2ceo" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInDown" data-anim-duration="600" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2, 0.8, 0.2, 1)" data-anim-loop="0" style="position:absolute;left:19.69615551549145px;top:10962.33189499015px;width:531.5173308543671px;height:130px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:20px;font-weight:400;font-style:normal;color:#ffffff;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Cảm ơn bạn đã dành tình cảm cho chúng mình!<br>Sự hiện diện của bạn chính là món quà ý nghĩa nhất và chúng mình vô cùng trân quý khi được cùng bạn chia sẻ niềm hạnh phúc trong ngày trọng đại này.<br> </div><div data-node-id="element_text_6eefqfc4hpc" data-node-type="element_text" data-manual-sized="1" data-anim-preset="bounceInUp" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:4.0443861219618px;top:10878.1191021779px;width:562.0675846980168px;height:84px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Flavinda, 'Brush Script MT', cursive;font-size:65px;font-weight:400;font-style:normal;color:#ffffff;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Thank you</div><section data-node-id="element_rsvp_62suhx4yqpj" data-miu-rsvp="1" data-miu-rsvp-id="element_rsvp_62suhx4yqpj" data-slug="tuyen-nguyen-ha-nguyen-2026-08-02" data-anim-preset="fadeIn" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2, 0.8, 0.2, 1)" data-anim-loop="0" style="position:absolute;left:0.5921004857772383px;top:8861.475521080956px;width:573.8294904659955px;height:657.1277227157201px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;overflow:visible;height:auto;min-height:657.1277227157201px;--miu-rsvp-accent:#8d5f25;background:#f5f1f0;border-radius:14px;padding:40px 18px;font-family:Lora;color:#111827;">
|
||
<div class="miu-rsvp-inner" style="width:100%;height:auto;display:flex;flex-direction:column;gap:14px;">
|
||
<div style="text-align:center;">
|
||
<div class="miu-rsvp-title" style="font-weight:500;font-size:40px;line-height:1.1;color:#8d5f25;font-family:Lora;">Xác Nhận Tham Dự</div>
|
||
<div class="miu-rsvp-subtitle" style="margin-top:8px;font-size:20px;opacity:.85;line-height:1.35;color:#8d5f25;white-space:pre-line;font-family:Lora;">Việc xác nhận giúp chúng mình chuẩn bị chu đáo hơn. Cảm ơn bạn!</div>
|
||
</div>
|
||
|
||
<div class="miu-rsvp-form-wrap" style="background:#fdecd8;border-radius:12px;padding:14px;">
|
||
<form data-miu-rsvp-form="1" data-miu-rsvp-id="element_rsvp_62suhx4yqpj" style="display:flex;flex-direction:column;gap:10px;">
|
||
<input type="text" name="guestName" placeholder="Họ và tên *" required="" class="miu-rsvp-input" style="font-size:20px;color:#8d5f25;">
|
||
<div class="miu-rsvp-radio" data-kind="attendance">
|
||
<label><input type="radio" name="willAttend" value="yes" checked=""> Có, tôi sẽ tham dự</label>
|
||
<label><input type="radio" name="willAttend" value="no"> Xin lỗi, tôi bận mất rồi!</label>
|
||
</div>
|
||
<div class="miu-rsvp-radio" data-kind="side">
|
||
<label><input type="radio" name="eventType" value="nhatrai" checked=""> Khách của chú rể</label>
|
||
<label><input type="radio" name="eventType" value="nhagai"> Khách của cô dâu</label>
|
||
</div>
|
||
<label class="miu-rsvp-label">
|
||
<div class="miu-rsvp-label-text">Bạn sẽ tham gia sự kiện nào</div>
|
||
<select name="eventName" class="miu-rsvp-select" aria-label="Bạn sẽ tham gia sự kiện nào">
|
||
<option value="">Bạn sẽ tham gia sự kiện nào</option>
|
||
<option value="Lễ Thành Hôn">Lễ Thành Hôn</option><option value="Lễ Vu Quy">Lễ Vu Quy</option>
|
||
</select>
|
||
</label>
|
||
<textarea name="message" placeholder="Lời nhắn cho Cô Dâu & Chú Rể" class="miu-rsvp-textarea" style="font-size:20px;color:#8d5f25;"></textarea>
|
||
|
||
<div style="display:flex;align-items:center;justify-content:center;margin-top:22px;">
|
||
<button type="submit" data-miu-rsvp-submit="1" data-miu-rsvp-id="element_rsvp_62suhx4yqpj" style="appearance:none;border:0;background:#8d5f25;color:#ffffff;border-radius:999px;padding:12px 18px;font-weight:600;cursor:pointer;white-space:nowrap;font-size:20px;min-width:180px;">Xác nhận</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section><section data-node-id="element_wishes_1pqmedm33iq" data-miu-wishes="1" data-miu-wishes-id="element_wishes_1pqmedm33iq" data-slug="tuyen-nguyen-ha-nguyen-2026-08-02" data-initial-limit="3" data-submit-text="Gửi lời chúc" data-loadmore-text="Xem thêm lời chúc ↓" data-empty-text="Chưa có lời chúc nào" data-anim-preset="fadeIn" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2, 0.8, 0.2, 1)" data-anim-loop="0" style="position:absolute;left:6.236040946764808px;top:9853.157856372109px;width:560.3017249474159px;height:775.7529625525841px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;overflow:visible;background:#f5f2f0;border-radius:14px;padding:18px;font-family:Lora;color:#1f2937;--miu-wishes-list-name-size:20px;--miu-wishes-list-comment-size:20px;--miu-wishes-list-name-color:#8d5f25;--miu-wishes-list-comment-color:#8d5f25;">
|
||
<div class="miu-wishes-inner" style="width:100%;height:100%;min-height:0;display:flex;flex-direction:column;gap:14px;">
|
||
<div style="text-align:center;">
|
||
<div class="miu-wishes-title" style="font-weight:400;font-size:80px;line-height:1.1;color:#8d5f25;font-family:'High Spirited', 'Brush Script MT', cursive;">Sổ lưu bút</div>
|
||
<div class="miu-wishes-subtitle" style="margin-top:8px;font-size:20px;opacity:.85;line-height:1.35;color:#8d5f25;white-space:pre-line;font-family:Lora;">Cảm ơn bạn rất nhiều vì đã gửi những lời chúc mừng tốt đẹp nhất đến đám cưới của chúng tôi!</div>
|
||
</div>
|
||
|
||
<div class="miu-wishes-form-wrap" style="background:#f9e0c3;border-radius:12px;padding:14px;">
|
||
<form data-miu-wishes-form="1" data-miu-wishes-id="element_wishes_1pqmedm33iq" style="display:flex;flex-direction:column;gap:10px;">
|
||
<input type="text" name="fullname" placeholder="Nhập tên của bạn*" required="" style="width:100%;border:1px solid rgba(0,0,0,0.12);border-radius:10px;padding:10px 12px;font-size:20px;color:#8d5f25;">
|
||
<textarea name="comment" placeholder="Nhập lời chúc của bạn*" required="" style="width:100%;border:1px solid rgba(0,0,0,0.12);border-radius:10px;padding:10px 12px;font-size:20px;min-height:30px;resize:vertical;color:#8d5f25;"></textarea>
|
||
<div style="display:flex;align-items:center;justify-content:center;">
|
||
<button type="submit" data-miu-wishes-submit="1" data-miu-wishes-id="element_wishes_1pqmedm33iq" style="appearance:none;border:0;background:#8d5f25;color:#ffffff;border-radius:10px;padding:10px 16px;font-weight:900;cursor:pointer;white-space:nowrap;font-size:20px;font-family:Lora;">Gửi lời chúc</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div data-miu-wishes-list="1" data-miu-wishes-id="element_wishes_1pqmedm33iq" style="background:rgba(255,255,255,0.6);border-radius:12px;flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;display:none;"></div>
|
||
<button type="button" data-miu-wishes-more="1" data-miu-wishes-id="element_wishes_1pqmedm33iq" style="appearance:none;border:0;background:transparent;color:#1d4ed8;font-weight:900;cursor:pointer;padding:8px 0;">Xem thêm lời chúc ↓</button>
|
||
</div>
|
||
</section><button data-node-id="element_button_wcb44kjsiz6" data-anim-preset="heartBeat" data-anim-duration="3000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2, 0.8, 0.2, 1)" data-anim-loop="1" data-miu-btn="1" data-action="modal" data-url="" data-newtab="0" data-target-id="" data-copy="" data-modal-id="modal_gift_siz5aey" type="button" style="position:absolute;left:105.73719618055556px;top:8718.520436500316px;width:360px;height:64px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:flex;align-items:center;justify-content:center;padding:12px 18px 12px 18px;border-radius:18px;border:0px solid rgba(0,0,0,0);background:#A8872A;color:#ffffff;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:22px;font-weight:800;cursor:pointer;user-select:none;box-sizing:border-box;"><span style="width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;color:#ffffff;margin-right:10px;flex:0 0 auto;"><svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 12v10H4V12" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path><path d="M2 7h20v5H2V7z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path><path d="M12 22V7" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path><path d="M12 7H7.5a2.5 2.5 0 1 1 0-5C10 2 12 7 12 7z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path><path d="M12 7h4.5a2.5 2.5 0 1 0 0-5C14 2 12 7 12 7z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"></path></svg></span>Quà mừng cưới</button><div data-node-id="element_text_5no4z9o9ub4" data-node-type="element_text" data-manual-sized="1" data-anim-preset="lightSpeedInLeft" data-anim-duration="1000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:81.66471354166667px;top:2640.1786024305557px;width:183.5328191773504px;height:27px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Nguyễn Văn Đây</div><div data-node-id="element_text_bip58gdbyt9" data-node-type="element_text" data-manual-sized="1" data-anim-preset="lightSpeedInLeft" data-anim-duration="1000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:72.79644097222223px;top:2665.611979166667px;width:186.6873330662393px;height:27px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Huỳnh Thị Phi</div><div data-node-id="element_text_w2vjmy8cv94" data-node-type="element_text" data-manual-sized="1" data-anim-preset="lightSpeedInRight" data-anim-duration="1000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:319.7970920138889px;top:2640.1275373931626px;width:60.107471955128204px;height:27px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Ông:</div><div data-node-id="element_text_wrg5g9ycv94" data-node-type="element_text" data-manual-sized="1" data-anim-preset="lightSpeedInRight" data-anim-duration="1000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:327.9377170138889px;top:2666.846738114316px;width:33.83316639957263px;height:27px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Bà:</div><div data-node-id="element_text_4f2wxwycv94" data-node-type="element_text" data-manual-sized="1" data-anim-preset="lightSpeedInRight" data-anim-duration="1000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:371.85192975427356px;top:2639.7298177083335px;width:183.5328191773504px;height:27px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Nguyễn Xuân Linh</div><div data-node-id="element_text_th2sc38cv94" data-node-type="element_text" data-manual-sized="1" data-anim-preset="lightSpeedInRight" data-anim-duration="1000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:364.9836571848291px;top:2666.163194444445px;width:186.6873330662393px;height:27px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Nguyễn Thị Trang</div><div data-node-id="element_text_xomikhdh8cv" data-node-type="element_text" data-manual-sized="1" data-anim-preset="flipInX" data-anim-duration="1500" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:5.972439236111111px;top:3217.6521267361113px;width:269.672592815171px;height:27px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:right;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">LỄ THÀNH HÔN</div><div data-node-id="element_text_rw52g75hn3e" data-node-type="element_text" data-manual-sized="1" data-anim-preset="flipInX" data-anim-duration="1500" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:284.6178385416667px;top:3246.833984375px;width:31.970986912393215px;height:27px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">07</div><div data-node-id="element_text_s7p40pwjelc" data-node-type="element_text" data-manual-sized="1" data-anim-preset="flipInX" data-anim-duration="1500" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:178.4585503472222px;top:3246.970703125px;width:106.40154246794873px;height:27px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">VÀO LÚC</div><div data-node-id="element_text_wpm59h6ntr6" data-node-type="element_text" data-manual-sized="1" data-anim-preset="flipInX" data-anim-duration="1500" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:315.89301215277777px;top:3247.350260416667px;width:47.13461538461544px;height:32.314453125px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">GIỜ</div><div data-node-id="element_text_cmz0jbgo5ib" data-node-type="element_text" data-manual-sized="1" data-anim-preset="flipInX" data-anim-duration="1500" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:361.7473958333333px;top:3246.9040798611113px;width:32.195596287393215px;height:27px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:left;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">00</div><div data-node-id="element_text_nfxgq54t9ca" data-node-type="element_text" data-manual-sized="1" style="position:absolute;left:90.58763415404043px;top:3347.049597537879px;width:96.81464889277385px;height:33px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:25px;font-weight:700;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">THÁNG</div><div data-node-id="element_text_3u7k8maua3m" data-node-type="element_text" data-manual-sized="1" style="position:absolute;left:368.1193970959595px;top:3345.761994949495px;width:65.09097434683369px;height:33px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:25px;font-weight:700;font-style:normal;text-transform:uppercase;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">NĂM</div><div data-node-id="element_text_874yga45u2g" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInUp" data-anim-duration="5000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:121.68367591271034px;top:2775.1584201388887px;width:328.091796875px;height:27px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Trân trọng kính mời</div><div data-node-id="element_text_w7uuwyf5u2g" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInUp" data-anim-duration="5000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:121.454342312283px;top:2858.5694444444443px;width:328.091796875px;height:55px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Tham dự bữa tiệc chung vui cùng gia đình chúng tôi</div><div data-node-id="element_text_k9co6c45u2h" data-node-type="element_text" data-manual-sized="1" style="position:absolute;left:4.558725992838543px;top:2827.085286458333px;width:562.7854567307693px;height:26px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:center;font-size:20px;font-weight:400;font-style:normal;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">----------------------------------------</div><div data-node-id="element_text_zsm54525u2h" data-node-type="element_text" data-manual-sized="1" data-anim-preset="fadeInUp" data-anim-duration="5000" data-anim-delay="0" data-anim-easing="cubic-bezier(0.2,0.8,0.2,1)" data-anim-loop="0" style="position:absolute;left:120.106686062283px;top:2812.708550347222px;width:328.091796875px;height:27px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));opacity:0;display:block;text-align:center;font-family:Lora, Georgia, 'Times New Roman', serif;font-size:21px;font-weight:400;font-style:italic;color:#8d5f25;white-space:pre-wrap;padding-top:5px;padding-bottom:5px;">Quý khách</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display:none"><template id="miu-modal-tpl-modal_gift_siz5aey" data-bg="#ffffff" data-w="520" data-h="520" data-pad="18" data-radius="22" data-pres="center" data-close-backdrop="1" data-show-close="1"><div style="position:relative;width:520px;height:520px;"><div data-node-id="el_text_siz53bu" data-node-type="element_text" style="position:absolute;left:24px;top:18px;width:472px;height:48px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:center;font-size:28px;font-weight:800;color:#A8872A;white-space:pre-wrap;">Quà mừng cưới</div><div data-node-id="el_img_siz51rq" style="position:absolute;left:120px;top:80px;width:280px;height:280px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));overflow:hidden;border-radius:16px;"><div style="position:relative;width:100%;height:100%;"><img src="images/1782979365883-1782967699696-qrGroom-TechComBank_NguyenThanhTuyen-cropped.webp" alt="" style="width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:16px;"></div></div><div data-node-id="el_text_siz5haf" data-node-type="element_text" style="position:absolute;left:0px;top:370px;width:520px;height:39px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:center;font-family:Lora;font-size:30px;font-weight:600;text-transform:uppercase;color:#A8872A;white-space:pre-wrap;">NGUYEN THANH TUYEN</div><div data-node-id="el_text_siz5pub" data-node-type="element_text" style="position:absolute;left:0px;top:410px;width:520px;height:29px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:center;font-family:Lora;font-size:22px;font-weight:500;color:#A8872A;white-space:pre-wrap;">Techcombank</div><div data-node-id="el_text_siz52dr" data-node-type="element_text" style="position:absolute;left:24px;top:450px;width:478px;height:29px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:center;font-family:Lora;font-size:22px;font-weight:500;color:#A8872A;white-space:pre-wrap;">99999 6789</div></div></template><template id="miu-modal-tpl-modal_zep4qn1" data-bg="#ffffff" data-w="520" data-h="520" data-pad="18" data-radius="22" data-pres="center" data-close-backdrop="1" data-show-close="1"><div style="position:relative;width:520px;height:520px;"><div data-node-id="element_text_zep432i" data-node-type="element_text" style="position:absolute;left:24px;top:18px;width:472px;height:48px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:center;font-size:28px;font-weight:800;color:#111827;white-space:pre-wrap;">Quà mừng cưới</div><div data-node-id="element_image_zep4gpk" style="position:absolute;left:120px;top:80px;width:280px;height:280px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));overflow:hidden;border-radius:16px;"><div style="position:relative;width:100%;height:100%;"><img src="images/1776937674923-1774081861948-2156174324084232275-cropped.webp" alt="" style="width:100%;height:100%;object-fit:contain;object-position:50% 50%;display:block;transform:scale(1,1);transform-origin:center;;border-radius:16px;"></div></div><div data-node-id="element_text_zep4smg" data-node-type="element_text" style="position:absolute;left:24px;top:370px;width:472px;height:40px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:center;font-family:Lora;font-size:30px;font-weight:600;text-transform:uppercase;color:#111827;white-space:pre-wrap;">TÊN TÀI KHOẢN</div><div data-node-id="element_text_zep4s6p" data-node-type="element_text" style="position:absolute;left:24px;top:410px;width:472px;height:40px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:center;font-family:Lora;font-size:22px;font-weight:500;color:#111827;white-space:pre-wrap;">MB Bank</div><div data-node-id="element_text_zep4l8s" data-node-type="element_text" style="position:absolute;left:24px;top:450px;width:472px;height:40px;z-index:0;opacity:1;--miu-node-rotate:0deg;transform:rotate(var(--miu-node-rotate,0deg));display:block;text-align:center;font-family:Lora;font-size:22px;font-weight:500;color:#111827;white-space:pre-wrap;">xxxx xxxx xxxx</div></div></template></div>
|
||
<audio id="bgAudio" src="to_tinh.m4a" loop="" hidden="" preload="metadata"></audio>
|
||
<script>(function(){ try { window.MIU_BG_START_AT = 0; } catch(e) {} })();</script>
|
||
<div class="miu-fab-dock" id="miuFabDock" data-open="1">
|
||
<button id="miuFabToggle" class="miu-fab" type="button" aria-label="Mở menu">
|
||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M6 9l6 6 6-6" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||
</svg>
|
||
</button>
|
||
|
||
|
||
<button id="audioToggleBtn" class="miu-fab miu-fab-item" type="button" aria-label="Toggle music" title="Nhạc" data-label="Nhạc"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 18V6l10-2v12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><circle cx="7" cy="18" r="3" stroke="white" stroke-width="2"></circle><circle cx="17" cy="16" r="3" stroke="white" stroke-width="2"></circle></svg></button>
|
||
</div>
|
||
<div id="miuOpening" data-open="0" aria-hidden="false" style="display:none;">
|
||
<div id="miuOpeningSides" class="default" role="dialog" aria-modal="true">
|
||
<div class="card-side right" aria-hidden="true"></div>
|
||
<div class="card-side left"><div class="wedding-save-the-date" aria-hidden="true"><span>S</span>ave our date</div>
|
||
<div class="opening-names"><div class="name">TUYỀN NGUYỄN</div><div class="and">&</div><div class="name">HÀ NGUYỄN</div></div>
|
||
<div class="seal-icon" aria-hidden="false">
|
||
<button id="miuOpeningBtn" type="button" aria-label="Mở thiệp"><img src="images/side-card-icon.png" alt=""></button>
|
||
</div>
|
||
<div class="opening-bottom">
|
||
<div class="opening-title">Trân trọng kính mời</div>
|
||
<div class="opening-invite">Quý khách</div>
|
||
</div>
|
||
<div id="miuOpeningCta" aria-hidden="false"><button id="miuOpeningCtaBtn" type="button">Mở thiệp</button></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
<script>(function(){
|
||
try {
|
||
function pad(n){ n = Math.max(0, n|0); return (n<10?'0':'')+n; }
|
||
function parseTarget(raw){
|
||
try {
|
||
raw = String(raw || '').trim();
|
||
if (!raw) return NaN;
|
||
// timestamp (ms)
|
||
if (/^d{10,13}$/.test(raw)) {
|
||
var ts = parseInt(raw, 10);
|
||
if (isFinite(ts)) return raw.length === 10 ? ts * 1000 : ts;
|
||
}
|
||
var t = Date.parse(raw);
|
||
if (isFinite(t)) return t;
|
||
// common form: YYYY-MM-DD HH:mm or YYYY-MM-DD HH:mm:ss
|
||
if (/^d{4}-d{2}-d{2}s+d{2}:d{2}(:d{2})?$/.test(raw)) {
|
||
t = Date.parse(raw.replace(' ', 'T'));
|
||
if (isFinite(t)) return t;
|
||
// assume local time -> add Z as a fallback
|
||
t = Date.parse(raw.replace(' ', 'T') + 'Z');
|
||
if (isFinite(t)) return t;
|
||
}
|
||
} catch(e) {}
|
||
return NaN;
|
||
}
|
||
function tick(){
|
||
var els = document.querySelectorAll('[data-countdown="1"]');
|
||
var now = Date.now();
|
||
for (var i=0;i<els.length;i++){
|
||
var el = els[i];
|
||
var t = parseTarget(el.getAttribute('data-target')||'');
|
||
if (!isFinite(t)) continue;
|
||
var diff = Math.max(0, t - now);
|
||
var total = Math.floor(diff/1000);
|
||
var d = Math.floor(total/86400);
|
||
var h = Math.floor((total%86400)/3600);
|
||
var m = Math.floor((total%3600)/60);
|
||
var s = total%60;
|
||
var sep = el.getAttribute('data-sep');
|
||
if (sep == null) sep = ' : ';
|
||
var parts = [];
|
||
|
||
var sd = el.getAttribute('data-suf-d');
|
||
var sh = el.getAttribute('data-suf-h');
|
||
var sm = el.getAttribute('data-suf-m');
|
||
var ss = el.getAttribute('data-suf-s');
|
||
|
||
// Back-compat: infer suffix from current text content (e.g. "00d: 00h: 00m: 00s")
|
||
if ((sd == null || sh == null || sm == null || ss == null) && el.textContent) {
|
||
try {
|
||
var raw = String(el.textContent || '');
|
||
var chunks = raw.split(sep);
|
||
var pick = function(idx){
|
||
try {
|
||
var c = String(chunks[idx] || '');
|
||
return c.replace(/[0-9s]/g, '');
|
||
} catch(e) { return ''; }
|
||
};
|
||
if (sd == null) sd = pick(0);
|
||
if (sh == null) sh = pick(1);
|
||
if (sm == null) sm = pick(2);
|
||
if (ss == null) ss = pick(3);
|
||
} catch(e) {}
|
||
}
|
||
if (sd == null) sd = '';
|
||
if (sh == null) sh = '';
|
||
if (sm == null) sm = '';
|
||
if (ss == null) ss = '';
|
||
|
||
if ((el.getAttribute('data-show-d')||'1')==='1') parts.push(pad(d) + sd);
|
||
if ((el.getAttribute('data-show-h')||'1')==='1') parts.push(pad(h) + sh);
|
||
if ((el.getAttribute('data-show-m')||'1')==='1') parts.push(pad(m) + sm);
|
||
if ((el.getAttribute('data-show-s')||'0')==='1') parts.push(pad(s) + ss);
|
||
el.textContent = parts.join(sep);
|
||
}
|
||
}
|
||
tick();
|
||
setInterval(tick, 1000);
|
||
} catch(e) {}
|
||
})();</script>
|
||
|
||
<script>(function(){
|
||
try {
|
||
var toast = function(msg, kind){
|
||
try {
|
||
msg = String(msg||'').trim();
|
||
if (!msg) return;
|
||
var wrap = document.querySelector('.miu-toast-wrap');
|
||
if (!wrap) {
|
||
wrap = document.createElement('div');
|
||
wrap.className = 'miu-toast-wrap';
|
||
document.body.appendChild(wrap);
|
||
}
|
||
var el = document.createElement('div');
|
||
el.className = 'miu-toast';
|
||
el.setAttribute('data-kind', kind || 'info');
|
||
el.textContent = msg;
|
||
wrap.appendChild(el);
|
||
setTimeout(function(){ try { if (el && el.parentNode) el.parentNode.removeChild(el); } catch(e) {} }, 2000);
|
||
} catch(e) {}
|
||
};
|
||
|
||
var overlay = null;
|
||
var overlayContent = null;
|
||
var overlayBackdrop = null;
|
||
var currentModalId = '';
|
||
|
||
function ensureOverlay(){
|
||
try {
|
||
if (overlay && overlay.parentNode) return;
|
||
overlay = document.createElement('div');
|
||
overlay.id = 'miuRuntimeModal';
|
||
overlay.style.position = 'fixed';
|
||
overlay.style.inset = '0';
|
||
overlay.style.zIndex = '2147483000';
|
||
overlay.style.display = 'none';
|
||
overlay.style.alignItems = 'center';
|
||
overlay.style.justifyContent = 'center';
|
||
overlay.style.padding = '16px';
|
||
overlay.style.overflow = 'auto';
|
||
|
||
overlayBackdrop = document.createElement('div');
|
||
overlayBackdrop.style.position = 'absolute';
|
||
overlayBackdrop.style.inset = '0';
|
||
overlayBackdrop.style.background = 'rgba(0,0,0,0.45)';
|
||
|
||
overlayContent = document.createElement('div');
|
||
overlayContent.style.position = 'relative';
|
||
overlayContent.style.maxWidth = '100%';
|
||
overlayContent.style.boxSizing = 'border-box';
|
||
overlayContent.style.boxShadow = '0 18px 60px rgba(0,0,0,0.35)';
|
||
overlayContent.style.overflow = 'hidden';
|
||
|
||
overlay.appendChild(overlayBackdrop);
|
||
overlay.appendChild(overlayContent);
|
||
document.body.appendChild(overlay);
|
||
} catch(_e) {}
|
||
}
|
||
|
||
function closeModal(){
|
||
try {
|
||
currentModalId = '';
|
||
if (overlayContent) overlayContent.innerHTML = '';
|
||
if (overlay) overlay.style.display = 'none';
|
||
} catch(_e) {}
|
||
}
|
||
|
||
function openModal(modalId){
|
||
try {
|
||
modalId = String(modalId || '').trim();
|
||
if (!modalId) return;
|
||
ensureOverlay();
|
||
var tpl = document.getElementById('miu-modal-tpl-' + modalId);
|
||
if (!tpl) return;
|
||
|
||
currentModalId = modalId;
|
||
var html = '';
|
||
try { html = tpl.innerHTML || ''; } catch(_e) { html = ''; }
|
||
|
||
var bg = tpl.getAttribute('data-bg') || '#ffffff';
|
||
var mw = parseFloat(tpl.getAttribute('data-w') || '520');
|
||
var mh = parseFloat(tpl.getAttribute('data-h') || '420');
|
||
if (!isFinite(mw) || mw <= 0) mw = 520;
|
||
if (!isFinite(mh) || mh <= 0) mh = 420;
|
||
var radius = parseFloat(tpl.getAttribute('data-radius') || '18');
|
||
if (!isFinite(radius)) radius = 18;
|
||
var pres = tpl.getAttribute('data-pres') || 'center';
|
||
var closeOnBackdrop = (tpl.getAttribute('data-close-backdrop') || '1') === '1';
|
||
var showCloseButton = (tpl.getAttribute('data-show-close') || '1') === '1';
|
||
|
||
var vw = 0;
|
||
var vh = 0;
|
||
try { vw = Number(window.innerWidth || 0); } catch(_e) { vw = 0; }
|
||
try { vh = Number(window.innerHeight || 0); } catch(_e) { vh = 0; }
|
||
if (!vw) vw = 1200;
|
||
if (!vh) vh = 800;
|
||
var stage = null;
|
||
try { stage = document.querySelector('.miu-stage'); } catch(_e) { stage = null; }
|
||
var boundW = vw;
|
||
try {
|
||
var sw = stage && stage.clientWidth ? Number(stage.clientWidth) : 0;
|
||
if (sw && isFinite(sw)) boundW = Math.min(boundW, sw);
|
||
} catch(_e) {}
|
||
var availW = Math.max(1, boundW - 24);
|
||
var availH = Math.max(1, vh - 120);
|
||
var s = Math.min(1, Math.min(availW / mw, availH / mh));
|
||
if (!isFinite(s) || s <= 0) s = 1;
|
||
if (s < 0.2) s = 0.2;
|
||
|
||
overlay.style.display = 'flex';
|
||
overlay.style.alignItems = pres === 'bottom_sheet' ? 'flex-end' : 'center';
|
||
overlay.style.justifyContent = 'center';
|
||
|
||
overlayContent.style.background = bg;
|
||
overlayContent.style.borderRadius = pres === 'bottom_sheet' ? (radius + 'px ' + radius + 'px 0 0') : (radius + 'px');
|
||
overlayContent.style.width = (mw * s) + 'px';
|
||
overlayContent.style.height = (mh * s) + 'px';
|
||
overlayContent.style.marginTop = pres === 'bottom_sheet' ? 'auto' : '0';
|
||
overlayContent.style.marginBottom = pres === 'bottom_sheet' ? '0' : '0';
|
||
|
||
overlayContent.innerHTML =
|
||
(showCloseButton
|
||
? '<button type="button" data-miu-modal-close="1" style="position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:999px;border:1px solid rgba(0,0,0,0.12);background:rgba(255,255,255,0.95);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5">×</button>'
|
||
: '') +
|
||
'<div style="position:absolute;inset:0;overflow:hidden;">' +
|
||
'<div style="transform:scale(' + s + ');transform-origin:top left;width:' + mw + 'px;height:' + mh + 'px;position:relative;">' +
|
||
html +
|
||
'</div>' +
|
||
'</div>';
|
||
|
||
overlayBackdrop.onclick = function(ev){
|
||
try {
|
||
if (!closeOnBackdrop) return;
|
||
if (ev && ev.target !== overlayBackdrop) return;
|
||
closeModal();
|
||
} catch(_e) {}
|
||
};
|
||
} catch(_e) {}
|
||
}
|
||
|
||
document.addEventListener('keydown', function(e){
|
||
try {
|
||
if (!overlay || overlay.style.display === 'none') return;
|
||
if (e && e.key === 'Escape') {
|
||
e.preventDefault();
|
||
closeModal();
|
||
}
|
||
} catch(_e) {}
|
||
}, true);
|
||
|
||
var onClick = function(e){
|
||
try {
|
||
var t = e && e.target;
|
||
if (!t) return;
|
||
|
||
// Close button inside modal
|
||
var closeBtn = (t.closest && t.closest('[data-miu-modal-close="1"]')) ? t.closest('[data-miu-modal-close="1"]') : null;
|
||
if (closeBtn) {
|
||
closeModal();
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
return;
|
||
}
|
||
|
||
var btn = (t.closest && t.closest('[data-miu-btn="1"]')) ? t.closest('[data-miu-btn="1"]') : null;
|
||
if (!btn) return;
|
||
var action = btn.getAttribute('data-action') || '';
|
||
var url = btn.getAttribute('data-url') || '';
|
||
var newTab = btn.getAttribute('data-newtab') === '1';
|
||
var targetId = btn.getAttribute('data-target-id') || '';
|
||
var copyValue = btn.getAttribute('data-copy') || '';
|
||
var modalId = btn.getAttribute('data-modal-id') || '';
|
||
|
||
if (action === 'modal' && modalId) {
|
||
openModal(modalId);
|
||
e.preventDefault();
|
||
return;
|
||
}
|
||
if (action === 'modal_close') {
|
||
closeModal();
|
||
e.preventDefault();
|
||
return;
|
||
}
|
||
if (action === 'link' && url) {
|
||
if (newTab) window.open(url, '_blank', 'noopener,noreferrer');
|
||
else window.location.href = url;
|
||
e.preventDefault();
|
||
return;
|
||
}
|
||
if (action === 'scroll' && targetId) {
|
||
var el = document.getElementById(targetId) || document.querySelector('[data-node-id="' + targetId.replace(/"/g,'\"') + '"]');
|
||
if (el && el.scrollIntoView) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
||
e.preventDefault();
|
||
return;
|
||
}
|
||
if (action === 'copy' && copyValue) {
|
||
try {
|
||
if (navigator.clipboard && navigator.clipboard.writeText) navigator.clipboard.writeText(copyValue);
|
||
} catch(_) {}
|
||
try { toast('Đã copy', 'success'); } catch(_) {}
|
||
e.preventDefault();
|
||
return;
|
||
}
|
||
} catch(_e) {}
|
||
};
|
||
document.addEventListener('click', onClick, true);
|
||
} catch(e) {}
|
||
})();</script>
|
||
|
||
<script>(function(){
|
||
try {
|
||
var stage = document.querySelector('.miu-stage');
|
||
var canvas = document.querySelector('.miu-canvas');
|
||
if (!stage || !canvas) return;
|
||
var sync = function(){
|
||
try {
|
||
var sw = Number(stage.clientWidth || 0);
|
||
var cw = 575;
|
||
if (!sw || !cw) return;
|
||
var s = Math.min(1, sw / cw);
|
||
try { document.documentElement.style.setProperty('--miu-s', String(s)); } catch(_e) {}
|
||
|
||
// Auto expand height when some nodes (e.g. RSVP) render taller than configured h
|
||
try {
|
||
var baseH = 11133;
|
||
var sh = Number(canvas.scrollHeight || 0);
|
||
var nextH = Math.max(baseH, sh || 0);
|
||
if (nextH && isFinite(nextH)) {
|
||
canvas.style.height = String(nextH) + 'px';
|
||
try { stage.style.setProperty('--sh', String(nextH) + 'px'); } catch(__e) {}
|
||
}
|
||
} catch(_e2) {}
|
||
} catch(_e) {}
|
||
};
|
||
sync();
|
||
try { setTimeout(sync, 0); setTimeout(sync, 300); setTimeout(sync, 1200); } catch(_e) {}
|
||
window.addEventListener('resize', sync, { passive: true });
|
||
} catch(e) {}
|
||
})();</script>
|
||
|
||
<script>(function(){
|
||
try {
|
||
function isSingleLine(el){
|
||
try {
|
||
var t = (el && el.textContent != null) ? String(el.textContent) : '';
|
||
return t.indexOf('\n') === -1;
|
||
} catch(e){ return true; }
|
||
}
|
||
|
||
function copyStyle(src, dst){
|
||
try {
|
||
var cs = window.getComputedStyle(src);
|
||
dst.style.fontFamily = cs.fontFamily;
|
||
dst.style.fontSize = cs.fontSize;
|
||
dst.style.fontWeight = cs.fontWeight;
|
||
dst.style.fontStyle = cs.fontStyle;
|
||
dst.style.letterSpacing = cs.letterSpacing;
|
||
dst.style.textTransform = cs.textTransform;
|
||
dst.style.textDecoration = cs.textDecoration;
|
||
dst.style.lineHeight = cs.lineHeight;
|
||
// Match builder measurement: pre-wrap + max-content width
|
||
dst.style.whiteSpace = 'pre-wrap';
|
||
dst.style.textAlign = cs.textAlign;
|
||
} catch(e) {}
|
||
}
|
||
|
||
function getCssPx(el, prop){
|
||
try {
|
||
var cs = window.getComputedStyle(el);
|
||
var v = cs && cs.getPropertyValue ? cs.getPropertyValue(prop) : '';
|
||
var n = parseFloat(String(v || ''));
|
||
return isFinite(n) ? n : 0;
|
||
} catch(e) { return 0; }
|
||
}
|
||
|
||
function measureWidth(el){
|
||
var span = document.createElement('span');
|
||
span.textContent = (el && el.textContent != null) ? String(el.textContent) : '';
|
||
span.style.position = 'absolute';
|
||
span.style.left = '-99999px';
|
||
span.style.top = '-99999px';
|
||
span.style.padding = '0';
|
||
span.style.margin = '0';
|
||
span.style.display = 'inline-block';
|
||
span.style.width = 'max-content';
|
||
span.style.maxWidth = 'none';
|
||
span.style.pointerEvents = 'none';
|
||
span.style.visibility = 'hidden';
|
||
copyStyle(el, span);
|
||
document.body.appendChild(span);
|
||
var w = 0;
|
||
try { w = Math.ceil(span.scrollWidth || span.getBoundingClientRect().width || 0); } catch(e) { w = 0; }
|
||
try { document.body.removeChild(span); } catch(_e) {}
|
||
return w;
|
||
}
|
||
|
||
function measureNoWrapWidth(el){
|
||
var span = document.createElement('span');
|
||
span.textContent = (el && el.textContent != null) ? String(el.textContent) : '';
|
||
span.style.position = 'absolute';
|
||
span.style.left = '-99999px';
|
||
span.style.top = '-99999px';
|
||
span.style.padding = '0';
|
||
span.style.margin = '0';
|
||
span.style.display = 'inline-block';
|
||
span.style.width = 'max-content';
|
||
span.style.maxWidth = 'none';
|
||
span.style.pointerEvents = 'none';
|
||
span.style.visibility = 'hidden';
|
||
copyStyle(el, span);
|
||
// force single-line to measure required width to avoid wrapping
|
||
span.style.whiteSpace = 'nowrap';
|
||
document.body.appendChild(span);
|
||
var w = 0;
|
||
try { w = Math.ceil(span.scrollWidth || span.getBoundingClientRect().width || 0); } catch(e) { w = 0; }
|
||
try { document.body.removeChild(span); } catch(_e) {}
|
||
return w;
|
||
}
|
||
|
||
function detectWrap(el){
|
||
try {
|
||
// Case 1: overflow-based (some layouts keep fixed height)
|
||
var ch = Number(el.clientHeight || 0);
|
||
var sh = Number(el.scrollHeight || 0);
|
||
if (ch && sh && sh > ch + 1) return true;
|
||
|
||
// Case 2: no overflow but actual layout is multiple lines
|
||
// (common when height is auto/large enough)
|
||
var t = (el && el.textContent != null) ? String(el.textContent) : '';
|
||
if (t.indexOf('\n') !== -1) return false;
|
||
|
||
var lh = getCssPx(el, 'line-height');
|
||
if (!lh || !isFinite(lh)) {
|
||
var fs = getCssPx(el, 'font-size');
|
||
if (fs && isFinite(fs)) lh = fs * 1.2;
|
||
}
|
||
|
||
var h = getCssPx(el, 'height');
|
||
if (!h || !isFinite(h)) h = Number(el.clientHeight || 0);
|
||
if (lh && h && isFinite(lh) && isFinite(h) && h > lh + 1) return true;
|
||
} catch(e) {}
|
||
return false;
|
||
}
|
||
|
||
function fitOne(el){
|
||
try {
|
||
if (!el) return;
|
||
// Builder-strict behavior: only auto-fit when not manualSized and single-line
|
||
if (el.getAttribute('data-manual-sized') === '1') return;
|
||
if (!isSingleLine(el)) return;
|
||
|
||
var w = measureWidth(el);
|
||
if (!w || !isFinite(w)) return;
|
||
var target = w + 6;
|
||
|
||
// Use unscaled CSS width (builder stores/uses px in schema; canvas may be scaled).
|
||
var cur = getCssPx(el, 'width');
|
||
if (cur && target <= cur + 1) return;
|
||
|
||
// Preserve visual center to match builder layout expectation.
|
||
// If we only change width, the box grows to the right and appears shifted.
|
||
try {
|
||
var left = getCssPx(el, 'left');
|
||
var align = '';
|
||
try { align = String((window.getComputedStyle(el) || {}).textAlign || ''); } catch(_e) { align = ''; }
|
||
if (left && isFinite(left) && cur && isFinite(cur)) {
|
||
var delta = target - cur;
|
||
// For center-aligned text (most titles), keep the center constant.
|
||
if (align === 'center') {
|
||
el.style.left = String(left - delta / 2) + 'px';
|
||
}
|
||
}
|
||
} catch(_e) {}
|
||
|
||
el.style.width = String(target) + 'px';
|
||
// ensure height is sufficient after widening
|
||
try {
|
||
var sh = Math.ceil(el.scrollHeight || 0);
|
||
if (sh && isFinite(sh)) el.style.height = String(sh) + 'px';
|
||
} catch(_e) {}
|
||
} catch(e) {}
|
||
}
|
||
|
||
function run(){
|
||
try {
|
||
var els = document.querySelectorAll('[data-node-type="element_text"]');
|
||
for (var i=0;i<els.length;i++) fitOne(els[i]);
|
||
} catch(e) {}
|
||
}
|
||
|
||
// Wait for fonts to load so measurement matches preview.
|
||
try {
|
||
if (document.fonts && document.fonts.ready && typeof document.fonts.ready.then === 'function') {
|
||
document.fonts.ready.then(function(){ setTimeout(run, 0); }).catch(function(){ setTimeout(run, 0); });
|
||
} else {
|
||
setTimeout(run, 0);
|
||
}
|
||
} catch(e) { setTimeout(run, 0); }
|
||
} catch(e) {}
|
||
})();</script>
|
||
|
||
<script>(function(){
|
||
try {
|
||
var started = false;
|
||
var start = function(){
|
||
if (started) return;
|
||
started = true;
|
||
|
||
var prefersReduced = false;
|
||
try {
|
||
prefersReduced = !!(window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches);
|
||
} catch(e) {}
|
||
|
||
var q = function(){
|
||
try { return document.querySelectorAll('[data-anim-preset]'); } catch(e) { return []; }
|
||
};
|
||
|
||
var isInfinitePreset = function(p){
|
||
return p === 'rotate' || p === 'spin' || p === 'flicker' || p === 'pulse' || p === 'wiggle' || p === 'heartBeat' || p === 'swayBottom';
|
||
};
|
||
|
||
var applyAnim = function(el){
|
||
try {
|
||
if (!el) return;
|
||
var preset = el.getAttribute('data-anim-preset') || '';
|
||
var duration = Number(el.getAttribute('data-anim-duration') || 600);
|
||
var delay = Number(el.getAttribute('data-anim-delay') || 0);
|
||
var easing = el.getAttribute('data-anim-easing') || 'cubic-bezier(0.2,0.8,0.2,1)';
|
||
var loopAttr = el.getAttribute('data-anim-loop');
|
||
var loop = loopAttr === '1' || isInfinitePreset(preset);
|
||
var distance = el.getAttribute('data-anim-distance') || '';
|
||
var distanceStyle = distance ? '--miu-anim-distance:' + distance + 'px;' : '';
|
||
var hideAfter = Number(el.getAttribute('data-anim-hide-after') || 0);
|
||
|
||
// Use custom cubic-bezier for swayBottom to create smoother pendulum-like motion
|
||
if (preset === 'swayBottom') {
|
||
easing = 'cubic-bezier(0.45, 0.05, 0.55, 0.95)';
|
||
}
|
||
var timing = preset === 'typewriter' ? 'steps(14,end)' : easing;
|
||
var name = 'miu-' + preset;
|
||
try { el.style.opacity = '1'; } catch(e) {}
|
||
try {
|
||
el.style.animation = name + ' ' + duration + 'ms ' + timing + ' ' + delay + 'ms both' + (loop ? ' infinite' : '');
|
||
if (distanceStyle) el.style.cssText += distanceStyle;
|
||
} catch(e) {}
|
||
try {
|
||
// Hide after X ms (plus delay) if configured and not looping
|
||
if (!loop && isFinite(hideAfter) && hideAfter > 0) {
|
||
try {
|
||
if (el.__miuHideTimer) clearTimeout(el.__miuHideTimer);
|
||
} catch(_e) {}
|
||
var total = Math.max(0, Math.floor(hideAfter + (isFinite(delay) && delay > 0 ? delay : 0)));
|
||
el.__miuHideTimer = setTimeout(function(){
|
||
try {
|
||
el.style.display = 'none';
|
||
el.setAttribute('data-miu-hidden-by-anim', '1');
|
||
} catch(_e2) {}
|
||
}, total);
|
||
}
|
||
} catch(e) {}
|
||
try { el.__miuAnimApplied = true; } catch(e) {}
|
||
} catch(e) {
|
||
try { if (el) el.style.opacity = '1'; } catch(_e) {}
|
||
}
|
||
};
|
||
|
||
var els = q();
|
||
if (!els || !els.length) return;
|
||
|
||
if (prefersReduced) {
|
||
for (var i=0;i<els.length;i++) applyAnim(els[i]);
|
||
return;
|
||
}
|
||
|
||
if (!('IntersectionObserver' in window)) {
|
||
for (var i=0;i<els.length;i++) applyAnim(els[i]);
|
||
return;
|
||
}
|
||
|
||
var obs = new IntersectionObserver(function(entries){
|
||
for (var i=0;i<entries.length;i++) {
|
||
var e = entries[i];
|
||
if (e && e.isIntersecting) {
|
||
applyAnim(e.target);
|
||
try { obs.unobserve(e.target); } catch(_e) {}
|
||
}
|
||
}
|
||
}, { root: null, rootMargin: '0px 0px -12% 0px', threshold: [0.08, 0.15, 0.22] });
|
||
|
||
for (var i=0;i<els.length;i++) {
|
||
try { obs.observe(els[i]); } catch(e) { applyAnim(els[i]); }
|
||
}
|
||
};
|
||
|
||
var getOpeningState = function(){
|
||
try {
|
||
var opening = document.getElementById('miuOpening');
|
||
if (!opening) return { exists: false, open: false };
|
||
var openAttr = String(opening.getAttribute('data-open') || '');
|
||
return { exists: true, open: openAttr === '1' };
|
||
} catch(e) {
|
||
return { exists: false, open: false };
|
||
}
|
||
};
|
||
|
||
var boot = function(){
|
||
try {
|
||
var st0 = getOpeningState();
|
||
if (!st0.exists) {
|
||
start();
|
||
return;
|
||
}
|
||
|
||
var sawOpen = st0.open;
|
||
|
||
var onClosed = function(){
|
||
try {
|
||
var st = getOpeningState();
|
||
if (st.exists && st.open) return;
|
||
} catch(e) {}
|
||
cleanup();
|
||
start();
|
||
};
|
||
|
||
var obs = null;
|
||
var fallbackTimer = null;
|
||
|
||
var cleanup = function(){
|
||
try { window.removeEventListener('miu:opening:closed', onClosed, true); } catch(e) {}
|
||
try { window.removeEventListener('miu:opening:willClose', onWillClose, true); } catch(e) {}
|
||
try { if (obs) obs.disconnect(); } catch(e) {}
|
||
try { if (fallbackTimer) clearTimeout(fallbackTimer); } catch(e) {}
|
||
};
|
||
|
||
try {
|
||
window.addEventListener('miu:opening:closed', onClosed, true);
|
||
} catch(e) {}
|
||
|
||
var onWillClose = function(){
|
||
try {
|
||
cleanup();
|
||
start();
|
||
} catch(e) {}
|
||
};
|
||
|
||
try {
|
||
window.addEventListener('miu:opening:willClose', onWillClose, true);
|
||
} catch(e) {}
|
||
|
||
try {
|
||
var opening = document.getElementById('miuOpening');
|
||
if (opening && typeof MutationObserver !== 'undefined') {
|
||
obs = new MutationObserver(function(){
|
||
try {
|
||
var st = getOpeningState();
|
||
if (st.open) {
|
||
sawOpen = true;
|
||
try { if (fallbackTimer) { clearTimeout(fallbackTimer); fallbackTimer = null; } } catch(e) {}
|
||
return;
|
||
}
|
||
if (sawOpen && !st.open) onClosed();
|
||
} catch(e) {}
|
||
});
|
||
obs.observe(opening, { attributes: true, attributeFilter: ['data-open', 'style'] });
|
||
}
|
||
} catch(e) {}
|
||
|
||
// If opening never opens (remembered / disabled), start soon.
|
||
fallbackTimer = setTimeout(function(){
|
||
try {
|
||
if (!sawOpen) { cleanup(); start(); }
|
||
} catch(e) { cleanup(); start(); }
|
||
}, 2500);
|
||
} catch(e) {
|
||
start();
|
||
}
|
||
};
|
||
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', boot);
|
||
} else {
|
||
boot();
|
||
}
|
||
} catch(e) {}
|
||
})();</script>
|
||
<script>(function(){
|
||
try {
|
||
var enabled = true;
|
||
if (!enabled) return;
|
||
|
||
var rafId = 0;
|
||
var active = false;
|
||
var prevBehavior = null;
|
||
var lastTop = 0;
|
||
var stallCount = 0;
|
||
var scrollRoot = null;
|
||
var ignoreStopUntil = 0;
|
||
|
||
var detectScrollRoot = function(){
|
||
try {
|
||
var cand = [document.scrollingElement, document.documentElement, document.body].filter(Boolean);
|
||
for (var i=0;i<cand.length;i++) {
|
||
var el = cand[i];
|
||
var delta = (el.scrollHeight - (el.clientHeight || window.innerHeight));
|
||
if (delta > 2) return el;
|
||
}
|
||
} catch(e) {}
|
||
|
||
var best = null;
|
||
var bestDelta = 0;
|
||
try {
|
||
var nodes = document.body ? document.body.querySelectorAll('*') : [];
|
||
for (var j=0;j<nodes.length;j++) {
|
||
var el2 = nodes[j];
|
||
var cs = getComputedStyle(el2);
|
||
var oy = cs.overflowY;
|
||
if (oy === 'auto' || oy === 'scroll') {
|
||
var d2 = el2.scrollHeight - el2.clientHeight;
|
||
if (d2 > bestDelta + 2) { bestDelta = d2; best = el2; }
|
||
}
|
||
}
|
||
} catch(e) {}
|
||
|
||
return best || document.scrollingElement || document.documentElement || document.body;
|
||
};
|
||
|
||
var stop = function(){
|
||
if (Date.now() < ignoreStopUntil) return;
|
||
if (!active) return;
|
||
active = false;
|
||
if (rafId) { try { cancelAnimationFrame(rafId); } catch(e) {} rafId = 0; }
|
||
try {
|
||
if (prevBehavior !== null) document.documentElement.style.scrollBehavior = prevBehavior || '';
|
||
} catch(e) {}
|
||
};
|
||
|
||
var start = function(){
|
||
if (active) return;
|
||
active = true;
|
||
ignoreStopUntil = Date.now() + 700;
|
||
try {
|
||
prevBehavior = document.documentElement.style.scrollBehavior;
|
||
document.documentElement.style.scrollBehavior = 'auto';
|
||
} catch(e) {}
|
||
|
||
try {
|
||
scrollRoot = detectScrollRoot();
|
||
var isDocRoot = (scrollRoot === document.scrollingElement || scrollRoot === document.documentElement || scrollRoot === document.body);
|
||
var cur0 = isDocRoot ? (window.pageYOffset || scrollRoot.scrollTop || 0) : (scrollRoot.scrollTop || 0);
|
||
lastTop = cur0;
|
||
if (cur0 === 0) {
|
||
if (isDocRoot) { try { window.scrollTo(0, 1); } catch(e) {} }
|
||
try { scrollRoot.scrollTop = 1; } catch(e) {}
|
||
}
|
||
} catch(e) {}
|
||
|
||
var lastTs = 0;
|
||
var SPEED = 40;
|
||
var carryPx = 0;
|
||
var MAX_STEP_PX = 2;
|
||
|
||
var tick = function(ts){
|
||
if (!active) return;
|
||
var root = scrollRoot || detectScrollRoot();
|
||
var isDoc = (root === document.scrollingElement || root === document.documentElement || root === document.body);
|
||
var max = root.scrollHeight - (root.clientHeight || window.innerHeight) - 2;
|
||
var current = isDoc
|
||
? (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || root.scrollTop || 0)
|
||
: (root.scrollTop || 0);
|
||
|
||
if (max <= 0) { scrollRoot = detectScrollRoot(); rafId = requestAnimationFrame(tick); return; }
|
||
if (!lastTs) lastTs = ts;
|
||
var dt = Math.min(64, ts - lastTs);
|
||
lastTs = ts;
|
||
|
||
var rawDelta = (dt * SPEED) / 1000 + carryPx;
|
||
var stepPx = Math.max(1, Math.min(MAX_STEP_PX, Math.floor(rawDelta)));
|
||
carryPx = rawDelta - stepPx;
|
||
var next = Math.min(max, current + stepPx);
|
||
|
||
if (next !== current) {
|
||
if (isDoc) {
|
||
try { document.documentElement.scrollTop = next; document.body.scrollTop = next; } catch(e) {}
|
||
try { window.scrollTo(0, next); } catch(e) {}
|
||
} else {
|
||
try { root.scrollTop = next; } catch(e) {}
|
||
}
|
||
}
|
||
|
||
try {
|
||
var after = isDoc ? (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0) : (root.scrollTop || 0);
|
||
if (after <= lastTop + 0.01) {
|
||
stallCount += 1;
|
||
if (stallCount >= 12) {
|
||
stallCount = 0;
|
||
scrollRoot = detectScrollRoot();
|
||
var r2 = scrollRoot;
|
||
var isDoc2 = (r2 === document.scrollingElement || r2 === document.documentElement || r2 === document.body);
|
||
if (isDoc2) {
|
||
var y2 = Math.min((document.documentElement.scrollTop || document.body.scrollTop || 0) + 2, max);
|
||
try { document.documentElement.scrollTop = y2; document.body.scrollTop = y2; } catch(e) {}
|
||
try { window.scrollTo(0, y2); } catch(e) {}
|
||
lastTop = y2;
|
||
} else {
|
||
try { r2.scrollTop = Math.min((r2.scrollTop || 0) + 2, max); } catch(e) {}
|
||
lastTop = r2.scrollTop || 0;
|
||
}
|
||
}
|
||
} else {
|
||
stallCount = 0;
|
||
}
|
||
lastTop = after;
|
||
} catch(e) {}
|
||
|
||
if (next >= max - 1) { stop(); return; }
|
||
rafId = requestAnimationFrame(tick);
|
||
};
|
||
|
||
rafId = requestAnimationFrame(tick);
|
||
};
|
||
|
||
// Stop on user intent
|
||
['wheel','touchstart','keydown','pointerdown'].forEach(function(ev){
|
||
try { window.addEventListener(ev, stop, { passive: true }); } catch(e) {}
|
||
});
|
||
|
||
var opening = document.getElementById('miuOpening');
|
||
if (opening) {
|
||
// start after opening closes
|
||
try {
|
||
var stage = document.getElementById('miuOpeningSides');
|
||
if (stage) {
|
||
var sides = stage.querySelectorAll('.card-side');
|
||
var done = 0;
|
||
var onEnd = function(){
|
||
done += 1;
|
||
if (done >= 2) setTimeout(start, 350);
|
||
};
|
||
for (var i=0;i<sides.length;i++) {
|
||
try { sides[i].addEventListener('animationend', onEnd, { once: true }); } catch(e) {}
|
||
}
|
||
}
|
||
} catch(e) {}
|
||
// fallback in case animation events fail
|
||
setTimeout(function(){
|
||
try {
|
||
var open = opening.getAttribute('data-open');
|
||
if (open === '0') start();
|
||
} catch(e) {}
|
||
}, 6000);
|
||
} else {
|
||
// no cover => start immediately
|
||
setTimeout(start, 350);
|
||
}
|
||
} catch(e) {}
|
||
})();</script>
|
||
<script>(function(){
|
||
try {
|
||
var el = document.getElementById('miuOpening');
|
||
var btn = document.getElementById('miuOpeningBtn');
|
||
var cta = document.getElementById('miuOpeningCtaBtn');
|
||
var stage = document.getElementById('miuOpeningSides');
|
||
var mainStage = document.querySelector('.miu-stage');
|
||
if (!el) return;
|
||
var presetId = "default";
|
||
var key = 'miu_opening_opened_' + "tuyen-nguyen-ha-nguyen-2026-08-02";
|
||
|
||
var getParam = function(name){
|
||
try {
|
||
var qs = (window && window.location && window.location.search) ? window.location.search : '';
|
||
if (!qs) return '';
|
||
var sp = new URLSearchParams(qs);
|
||
return String(sp.get(name) || '');
|
||
} catch(e) { return ''; }
|
||
};
|
||
|
||
var forceOpen = getParam('opening') === '1';
|
||
var resetOpen = getParam('openingReset') === '1';
|
||
|
||
var remember = false;
|
||
var autoOpen = false;
|
||
|
||
var clearOpened = function(){
|
||
if (!remember) return;
|
||
try { localStorage.removeItem(key); } catch(e) {}
|
||
try { document.cookie = key + '=; path=/; max-age=0; samesite=lax'; } catch(e) {}
|
||
};
|
||
|
||
if (resetOpen) {
|
||
try { clearOpened(); } catch(e) {}
|
||
}
|
||
var opened = false;
|
||
if (remember) {
|
||
try { opened = localStorage.getItem(key) === '1'; } catch(e) {}
|
||
if (!opened) {
|
||
try {
|
||
opened = (document.cookie || '').indexOf(key + '=1') >= 0;
|
||
} catch(e) {}
|
||
}
|
||
}
|
||
|
||
var setOpen = function(v){
|
||
try {
|
||
el.setAttribute('data-open', v ? '1' : '0');
|
||
try { el.style.display = v ? 'block' : 'none'; } catch(e) {}
|
||
if (v) {
|
||
document.documentElement.style.overflow = 'hidden';
|
||
document.body.style.overflow = 'hidden';
|
||
} else {
|
||
document.documentElement.style.overflow = '';
|
||
document.body.style.overflow = '';
|
||
}
|
||
} catch(e) {}
|
||
};
|
||
|
||
var syncStageSize = function(){
|
||
try {
|
||
if (!stage) return;
|
||
var cw = 575;
|
||
var ch = 11133;
|
||
var phone = 600;
|
||
try {
|
||
if (mainStage) {
|
||
var cs = getComputedStyle(mainStage);
|
||
var cw2 = parseFloat((cs.getPropertyValue('--cw') || '').trim());
|
||
var ch2 = parseFloat((cs.getPropertyValue('--ch') || '').trim());
|
||
var phone2 = parseFloat((cs.getPropertyValue('--phone') || '').trim());
|
||
if (isFinite(cw2) && cw2 > 0) cw = cw2;
|
||
if (isFinite(ch2) && ch2 > 0) ch = ch2;
|
||
if (isFinite(phone2) && phone2 > 0) phone = phone2;
|
||
}
|
||
} catch(e) {}
|
||
|
||
var vw = (window && window.innerWidth) ? window.innerWidth : phone;
|
||
var s = Math.min(1, phone / cw, vw / cw);
|
||
if (!isFinite(s) || s <= 0) s = 1;
|
||
// For PC, use fixed 600px width for opening
|
||
var openingWidth = vw <= 480 ? String(Math.round(cw * s)) + 'px' : '600px';
|
||
stage.style.setProperty('--miu-opening-w', openingWidth);
|
||
} catch(e) {}
|
||
};
|
||
|
||
if (forceOpen || autoOpen) {
|
||
try { syncStageSize(); } catch(e) {}
|
||
setOpen(true);
|
||
} else if (!remember) {
|
||
try { syncStageSize(); } catch(e) {}
|
||
setOpen(true);
|
||
} else if (!opened) {
|
||
try { syncStageSize(); } catch(e) {}
|
||
setOpen(true);
|
||
}
|
||
|
||
try {
|
||
window.addEventListener('resize', function(){ syncStageSize(); }, { passive: true });
|
||
} catch(e) {}
|
||
|
||
try {
|
||
setTimeout(function(){ try { syncStageSize(); } catch(e) {} }, 0);
|
||
setTimeout(function(){ try { syncStageSize(); } catch(e) {} }, 250);
|
||
} catch(e) {}
|
||
|
||
var markOpened = function(){
|
||
if (!remember) return;
|
||
try { localStorage.setItem(key, '1'); } catch(e) {}
|
||
try { document.cookie = key + '=1; path=/; max-age=' + (60*60*24*365) + '; samesite=lax'; } catch(e) {}
|
||
};
|
||
|
||
var runOpen = function(){
|
||
try {
|
||
if (!stage) return;
|
||
try { syncStageSize(); } catch(e) {}
|
||
// prevent double click
|
||
try { if (btn) btn.setAttribute('disabled', 'disabled'); } catch(e) {}
|
||
try { if (cta) cta.setAttribute('disabled', 'disabled'); } catch(e) {}
|
||
|
||
var sides = stage.querySelectorAll('.card-side');
|
||
var done = 0;
|
||
var earlyTimer = 0;
|
||
var finish = function(){
|
||
try { if (earlyTimer) clearTimeout(earlyTimer); } catch(e) {}
|
||
var doClose = function(){
|
||
try { setOpen(false); } catch(e) {}
|
||
try { markOpened(); } catch(e) {}
|
||
try { stage.classList.remove('_animating'); } catch(e) {}
|
||
try { if (btn) btn.removeAttribute('disabled'); } catch(e) {}
|
||
try { if (cta) cta.removeAttribute('disabled'); } catch(e) {}
|
||
try { window.dispatchEvent(new Event('miu:opening:closed')); } catch(e) {}
|
||
};
|
||
// For envelope presets (phongbixanh), keep the cover a bit longer after parts move away.
|
||
// This avoids revealing the invitation too early.
|
||
if (presetId === 'phongbixanh') {
|
||
doClose();
|
||
return;
|
||
}
|
||
doClose();
|
||
};
|
||
var onEnd = function(){
|
||
done += 1;
|
||
if (done >= 2) finish();
|
||
};
|
||
|
||
if (sides && sides.length) {
|
||
// listen once per side, then start animation
|
||
for (var i=0;i<sides.length;i++) {
|
||
try { sides[i].addEventListener('animationend', onEnd, { once: true }); } catch(e) {}
|
||
}
|
||
} else {
|
||
// fallback: if no sides found
|
||
setTimeout(finish, 1200);
|
||
}
|
||
stage.classList.add('_animating');
|
||
|
||
// Fire a bit earlier so page animations start before the cover fully disappears.
|
||
// Compute from actual CSS animation timing to avoid hardcoded constants.
|
||
try {
|
||
var parseMs = function(v){
|
||
try {
|
||
var s = String(v || '').trim();
|
||
if (!s) return 0;
|
||
var head = (s.split(',')[0] || '').trim();
|
||
if (!head) return 0;
|
||
if (head.indexOf('ms') >= 0) return Math.max(0, Math.round(parseFloat(head)) || 0);
|
||
if (head.indexOf('s') >= 0) return Math.max(0, Math.round((parseFloat(head) || 0) * 1000));
|
||
var n = Number(head);
|
||
return isFinite(n) ? Math.max(0, Math.round(n)) : 0;
|
||
} catch(e) { return 0; }
|
||
};
|
||
|
||
var total = 0;
|
||
try {
|
||
for (var ti=0; ti<sides.length; ti++) {
|
||
var cs = null;
|
||
try { cs = window.getComputedStyle(sides[ti]); } catch(e) { cs = null; }
|
||
if (!cs) continue;
|
||
var d = parseMs(cs.animationDelay);
|
||
var du = parseMs(cs.animationDuration);
|
||
total = Math.max(total, d + du);
|
||
}
|
||
} catch(e) {}
|
||
|
||
// Default if style read fails
|
||
if (!total) total = 4500;
|
||
|
||
// Start a bit before end (tunable)
|
||
var lead = 1200;
|
||
var t = Math.max(0, Math.round(total - lead));
|
||
earlyTimer = setTimeout(function(){
|
||
try { window.dispatchEvent(new Event('miu:opening:willClose')); } catch(e) {}
|
||
}, t);
|
||
} catch(e) {}
|
||
} catch(e) {
|
||
try { setOpen(false); } catch(_e) {}
|
||
}
|
||
};
|
||
|
||
// Click anywhere to open
|
||
try {
|
||
el.style.cursor = 'pointer';
|
||
el.addEventListener('click', function(){
|
||
try { runOpen(); } catch(e) {}
|
||
}, true);
|
||
} catch(e) {}
|
||
|
||
if (btn) {
|
||
try {
|
||
btn.addEventListener('click', function(){
|
||
try { runOpen(); } catch(e) {}
|
||
}, true);
|
||
} catch(e) {}
|
||
}
|
||
if (cta && "Mở thiệp" !== '') {
|
||
try {
|
||
cta.addEventListener('click', function(){
|
||
try { runOpen(); } catch(e) {}
|
||
}, true);
|
||
} catch(e) {}
|
||
}
|
||
|
||
// Auto-open if flag is set
|
||
if (autoOpen) {
|
||
try { setTimeout(function(){ runOpen(); }, 500); } catch(e) {}
|
||
}
|
||
} catch(e) {}
|
||
})();</script>
|
||
<script>(function(){
|
||
try {
|
||
var btn = document.getElementById('audioToggleBtn');
|
||
var audio = document.getElementById('bgAudio');
|
||
if (!btn || !audio) return;
|
||
var didLoadOnce = false;
|
||
var loadTries = 0;
|
||
var lastLoadAt = 0;
|
||
var startAt = 0;
|
||
if (!isFinite(startAt) || startAt < 0) startAt = 0;
|
||
startAt = Math.floor(startAt);
|
||
var seekTries = 0;
|
||
var ensureStart = function(){
|
||
try {
|
||
if (!audio) return;
|
||
// Avoid calling audio.load() in a retry loop.
|
||
// Repeated load() calls can cause the browser to cancel/restart the media request continuously.
|
||
if (audio.readyState < 1) {
|
||
// Some browsers (notably Safari) may need a few explicit load() attempts before metadata becomes available.
|
||
// Cap attempts to avoid spamming canceled requests.
|
||
try {
|
||
var now = Date.now();
|
||
if (audio.load && loadTries < 4 && (now - lastLoadAt) > 800) {
|
||
loadTries = (loadTries|0) + 1;
|
||
lastLoadAt = now;
|
||
audio.load();
|
||
}
|
||
} catch(e) {}
|
||
return;
|
||
}
|
||
var d = audio.duration;
|
||
var max = (isFinite(d) && d > 0) ? Math.max(0, d - 0.05) : startAt;
|
||
var t = Math.max(0, Math.min(startAt, max));
|
||
// Only seek when we're at the beginning (or before target) to avoid disrupting user seeking.
|
||
if (!isFinite(audio.currentTime) || audio.currentTime < t - 0.01) {
|
||
audio.currentTime = t;
|
||
}
|
||
} catch(e) {}
|
||
};
|
||
var ensureStartRetry = function(){
|
||
try {
|
||
ensureStart();
|
||
seekTries = (seekTries|0) + 1;
|
||
if (seekTries > 25) return;
|
||
setTimeout(function(){
|
||
try { ensureStart(); } catch(e) {}
|
||
}, 120);
|
||
} catch(e) {}
|
||
};
|
||
var sync = function(){
|
||
try {
|
||
var playing = !!(audio && !audio.paused);
|
||
if (playing) { btn.classList.add('playing'); btn.classList.remove('muted'); }
|
||
else { btn.classList.remove('playing'); btn.classList.add('muted'); }
|
||
} catch(e) {}
|
||
};
|
||
btn.addEventListener('click', function(){
|
||
try {
|
||
if (!audio) return;
|
||
if (audio.paused) {
|
||
try {
|
||
if (!didLoadOnce && audio.readyState < 1 && audio.load) {
|
||
didLoadOnce = true;
|
||
loadTries = 0;
|
||
lastLoadAt = 0;
|
||
audio.load();
|
||
}
|
||
} catch(e) {}
|
||
seekTries = 0;
|
||
ensureStartRetry();
|
||
var p = audio.play();
|
||
if (p && p.catch) p.catch(function(){});
|
||
setTimeout(ensureStartRetry, 0);
|
||
setTimeout(ensureStartRetry, 250);
|
||
setTimeout(ensureStartRetry, 700);
|
||
}
|
||
else { audio.pause(); }
|
||
} catch(e) {}
|
||
setTimeout(sync, 50);
|
||
}, true);
|
||
try { audio.addEventListener('loadedmetadata', ensureStart); } catch(e) {}
|
||
try { audio.addEventListener('canplay', ensureStartRetry); } catch(e) {}
|
||
try { audio.addEventListener('play', ensureStart); } catch(e) {}
|
||
try { audio.addEventListener('playing', ensureStartRetry); } catch(e) {}
|
||
audio.addEventListener('play', sync);
|
||
audio.addEventListener('pause', sync);
|
||
audio.addEventListener('ended', sync);
|
||
sync();
|
||
} catch(e) {}
|
||
})();</script>
|
||
|
||
|
||
|
||
<script>(function(){
|
||
try {
|
||
var toast = function(msg, kind){
|
||
try {
|
||
msg = String(msg||'').trim();
|
||
if (!msg) return;
|
||
var wrap = document.querySelector('.miu-toast-wrap');
|
||
if (!wrap) {
|
||
wrap = document.createElement('div');
|
||
wrap.className = 'miu-toast-wrap';
|
||
document.body.appendChild(wrap);
|
||
}
|
||
var el = document.createElement('div');
|
||
el.className = 'miu-toast';
|
||
el.setAttribute('data-kind', kind || 'info');
|
||
el.textContent = msg;
|
||
wrap.appendChild(el);
|
||
setTimeout(function(){ try { if (el && el.parentNode) el.parentNode.removeChild(el); } catch(e) {} }, 2400);
|
||
} catch(e) {}
|
||
};
|
||
|
||
var esc = function(s){ return String(s||'')
|
||
.replace(/&/g,'&')
|
||
.replace(/</g,'<')
|
||
.replace(/>/g,'>')
|
||
.replace(/"/g,'"')
|
||
.replace(/'/g,''');
|
||
};
|
||
var sections = document.querySelectorAll('[data-miu-wishes="1"]');
|
||
if (!sections || !sections.length) return;
|
||
|
||
var attach = function(sec){
|
||
try {
|
||
var id = sec.getAttribute('data-miu-wishes-id') || '';
|
||
var slug = sec.getAttribute('data-slug') || '';
|
||
if (!id || !slug) return;
|
||
var listEl = sec.querySelector('[data-miu-wishes-list="1"][data-miu-wishes-id="' + id.replace(/"/g,'\"') + '"]');
|
||
var form = sec.querySelector('[data-miu-wishes-form="1"][data-miu-wishes-id="' + id.replace(/"/g,'\"') + '"]');
|
||
var moreBtn = sec.querySelector('[data-miu-wishes-more="1"][data-miu-wishes-id="' + id.replace(/"/g,'\"') + '"]');
|
||
if (!form) return;
|
||
|
||
var initial = parseInt(sec.getAttribute('data-initial-limit') || '3', 10);
|
||
if (!isFinite(initial) || initial < 1) initial = 3;
|
||
var showN = Math.max(1, initial);
|
||
var cache = null;
|
||
var loading = false;
|
||
|
||
var renderItems = function(arr, limit){
|
||
try {
|
||
var out = '';
|
||
for (var i=0;i<Math.min(limit, arr.length);i++) {
|
||
var w = arr[i] || {};
|
||
out += '<div class="miu-wishes-item">'
|
||
+ '<div class="miu-wishes-name">' + esc(w.fullname||'') + '</div>'
|
||
+ '<div class="miu-wishes-comment">' + esc(w.comment||'') + '</div>'
|
||
+ '</div>';
|
||
}
|
||
return out;
|
||
} catch(e) {
|
||
return '';
|
||
}
|
||
};
|
||
|
||
var renderPreview = function(){
|
||
try {
|
||
if (!listEl) return;
|
||
var arr = (cache && cache.length) ? cache : [];
|
||
if (!arr.length) {
|
||
var emptyText = String(sec.getAttribute('data-empty-text') || 'Chưa có lời chúc nào');
|
||
listEl.innerHTML = '<div class="miu-wishes-empty">' + esc(emptyText) + '</div>';
|
||
try { listEl.style.display = ''; } catch(e) {}
|
||
if (moreBtn) moreBtn.style.display = 'none';
|
||
return;
|
||
}
|
||
|
||
try { listEl.style.display = ''; } catch(e) {}
|
||
if (moreBtn) moreBtn.style.display = '';
|
||
listEl.innerHTML = renderItems(arr, showN);
|
||
if (moreBtn) {
|
||
moreBtn.style.display = (arr.length > showN) ? '' : 'none';
|
||
if (sec.getAttribute('data-loadmore-text')) moreBtn.textContent = sec.getAttribute('data-loadmore-text');
|
||
}
|
||
} catch(e) {}
|
||
};
|
||
|
||
var renderAll = function(){
|
||
try { renderPreview(); } catch(e) {}
|
||
};
|
||
|
||
var load = function(force){
|
||
try {
|
||
if (loading) return;
|
||
if (!listEl) return;
|
||
if (cache && !force) { renderAll(); return; }
|
||
loading = true;
|
||
fetch('/api/invitations/slug/' + encodeURIComponent(slug) + '/wishes', { cache: 'no-store' })
|
||
.then(function(res){ return res.json().then(function(j){ return { ok: res.ok, json: j }; }); })
|
||
.then(function(out){
|
||
if (!out.ok || !out.json || out.json.success !== true) throw new Error((out.json && out.json.error) || 'Tải thất bại');
|
||
cache = Array.isArray(out.json.data) ? out.json.data : [];
|
||
renderAll();
|
||
})
|
||
.catch(function(err){ toast((err && err.message) ? err.message : 'Có lỗi xảy ra', 'error'); })
|
||
.finally(function(){ loading = false; });
|
||
} catch(e) {}
|
||
};
|
||
|
||
if (moreBtn) {
|
||
moreBtn.addEventListener('click', function(){
|
||
try {
|
||
var step = Math.max(3, initial);
|
||
showN = showN + step;
|
||
renderPreview();
|
||
try { listEl.scrollTo({ top: listEl.scrollHeight, behavior: 'smooth' }); } catch(_e) {}
|
||
} catch(e) {}
|
||
}, true);
|
||
}
|
||
|
||
form.addEventListener('submit', function(ev){
|
||
try {
|
||
ev.preventDefault();
|
||
var fd = new FormData(form);
|
||
var fullname = String(fd.get('fullname')||'').trim();
|
||
var comment = String(fd.get('comment')||'').trim();
|
||
if (!fullname) { toast('Vui lòng nhập tên', 'error'); return; }
|
||
if (!comment) { toast('Vui lòng nhập lời chúc', 'error'); return; }
|
||
fetch('/api/invitations/slug/' + encodeURIComponent(slug) + '/wishes', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ fullname: fullname, comment: comment })
|
||
}).then(function(res){
|
||
return res.json().then(function(j){ return { ok: res.ok, json: j }; });
|
||
}).then(function(out){
|
||
if (!out.ok || !out.json || out.json.success !== true) throw new Error((out.json && out.json.error) || 'Gửi thất bại');
|
||
try { form.reset(); } catch(_e) {}
|
||
// prepend
|
||
if (!cache) cache = [];
|
||
try { cache.unshift(out.json.data || { fullname: fullname, comment: comment }); } catch(_e) {}
|
||
showN = Math.max(showN, 1);
|
||
toast('Đã gửi lời chúc!', 'success');
|
||
if (listEl) renderAll();
|
||
}).catch(function(err){
|
||
toast((err && err.message) ? err.message : 'Có lỗi xảy ra', 'error');
|
||
});
|
||
} catch(e) {}
|
||
}, true);
|
||
if (listEl) load(false);
|
||
} catch(e) {}
|
||
};
|
||
|
||
for (var i=0;i<sections.length;i++) attach(sections[i]);
|
||
} catch(e) {}
|
||
})();</script>
|
||
<script>(function(){
|
||
try {
|
||
var toast = function(msg, kind){
|
||
try {
|
||
msg = String(msg||'').trim();
|
||
if (!msg) return;
|
||
var wrap = document.querySelector('.miu-toast-wrap');
|
||
if (!wrap) {
|
||
wrap = document.createElement('div');
|
||
wrap.className = 'miu-toast-wrap';
|
||
document.body.appendChild(wrap);
|
||
}
|
||
var el = document.createElement('div');
|
||
el.className = 'miu-toast';
|
||
el.setAttribute('data-kind', kind || 'info');
|
||
el.textContent = msg;
|
||
wrap.appendChild(el);
|
||
setTimeout(function(){ try { if (el && el.parentNode) el.parentNode.removeChild(el); } catch(e) {} }, 2400);
|
||
} catch(e) {}
|
||
};
|
||
|
||
var sections = document.querySelectorAll('[data-miu-rsvp="1"]');
|
||
if (!sections || !sections.length) return;
|
||
var attach = function(sec){
|
||
try {
|
||
var id = sec.getAttribute('data-miu-rsvp-id') || '';
|
||
var slug = sec.getAttribute('data-slug') || '';
|
||
if (!id || !slug) return;
|
||
var form = sec.querySelector('[data-miu-rsvp-form="1"][data-miu-rsvp-id="' + id.replace(/"/g,'\"') + '"]');
|
||
if (!form) return;
|
||
form.addEventListener('submit', function(ev){
|
||
try {
|
||
ev.preventDefault();
|
||
var fd = new FormData(form);
|
||
var guestName = String(fd.get('guestName')||'').trim();
|
||
var willAttend = String(fd.get('willAttend')||'yes') === 'yes';
|
||
var eventType = String(fd.get('eventType')||'').trim();
|
||
var eventName = String(fd.get('eventName')||'').trim();
|
||
var message = String(fd.get('message')||'').trim();
|
||
var hasNumField = (function(){
|
||
try {
|
||
return fd.get('numberOfGuests') !== null;
|
||
} catch(e) { return false; }
|
||
})();
|
||
var hasExtraCheckbox = (function(){
|
||
try {
|
||
return fd.get('extraCheckbox') !== null;
|
||
} catch(e) { return false; }
|
||
})();
|
||
var hasExtraOptions = (function(){
|
||
try {
|
||
return fd.getAll('extraOptions').length > 0;
|
||
} catch(e) { return false; }
|
||
})();
|
||
var hasExtraOther = (function(){
|
||
try {
|
||
return fd.get('extraOther') !== null;
|
||
} catch(e) { return false; }
|
||
})();
|
||
var num = (function(){
|
||
try {
|
||
if (!hasNumField) return 1;
|
||
var raw = String(fd.get('numberOfGuests')||'').trim();
|
||
var n = parseInt(raw, 10);
|
||
if (!isFinite(n) || n < 1) return 1;
|
||
if (n > 50) return 50;
|
||
return n;
|
||
} catch(e) { return 1; }
|
||
})();
|
||
if (!guestName) { toast('Vui lòng nhập họ tên', 'error'); return; }
|
||
var payload = { guestName: guestName, willAttend: willAttend, eventType: eventType, eventName: eventName, message: message };
|
||
if (hasNumField) payload.numberOfGuests = num;
|
||
if (hasExtraCheckbox) payload.extraCheckbox = String(fd.get('extraCheckbox')||'') === '1';
|
||
if (hasExtraOptions) {
|
||
try {
|
||
payload.extraOptions = fd.getAll('extraOptions').map(function(x){ return String(x||'').trim(); }).filter(Boolean);
|
||
} catch(e) {}
|
||
}
|
||
if (hasExtraOther) {
|
||
try {
|
||
var otherChecked = String(fd.get('extraOtherChecked')||'') === '1';
|
||
var otherText = String(fd.get('extraOther')||'').trim();
|
||
if (otherChecked && otherText) payload.extraOther = otherText;
|
||
} catch(e) {}
|
||
}
|
||
|
||
try {
|
||
var custom = {};
|
||
var customOtherText = {};
|
||
var customOtherSelected = {};
|
||
fd.forEach(function(v, k){
|
||
try {
|
||
k = String(k||'');
|
||
if (k.indexOf('cf_') !== 0) return;
|
||
if (k.indexOf('__otherText') > -1) {
|
||
try {
|
||
var baseKey = k.slice(3).replace(/__otherText.*$/, '');
|
||
var ov = String(v||'').trim();
|
||
if (baseKey && ov) customOtherText[baseKey] = ov;
|
||
} catch(_e2) {}
|
||
return;
|
||
}
|
||
|
||
var kk = k.slice(3);
|
||
if (!kk) return;
|
||
var vv = String(v||'').trim();
|
||
if (!vv) return;
|
||
if (vv === '__other__') {
|
||
customOtherSelected[kk] = true;
|
||
return;
|
||
}
|
||
if (custom[kk]) {
|
||
custom[kk] = String(custom[kk]) + ', ' + vv;
|
||
} else {
|
||
custom[kk] = vv;
|
||
}
|
||
} catch(_e) {}
|
||
});
|
||
|
||
try {
|
||
for (var k2 in customOtherSelected) {
|
||
if (!customOtherSelected.hasOwnProperty(k2)) continue;
|
||
var txt = customOtherText[k2];
|
||
if (!txt) continue;
|
||
if (custom[k2]) custom[k2] = String(custom[k2]) + ', ' + String(txt);
|
||
else custom[k2] = String(txt);
|
||
}
|
||
} catch(_e3) {}
|
||
|
||
if (custom && Object.keys(custom).length) payload.customFields = custom;
|
||
} catch(e) {}
|
||
|
||
fetch('/api/invitations/slug/' + encodeURIComponent(slug) + '/rsvp', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify(payload)
|
||
})
|
||
.then(function(res){
|
||
return res.json().then(function(j){ return { ok: res.ok, json: j }; });
|
||
}).then(function(out){
|
||
if (!out.ok || !out.json || out.json.success !== true) throw new Error((out.json && out.json.error) || 'Gửi thất bại');
|
||
try { form.reset(); } catch(_e) {}
|
||
toast('Đã gửi xác nhận. Cảm ơn bạn!', 'success');
|
||
}).catch(function(err){
|
||
toast((err && err.message) ? err.message : 'Có lỗi xảy ra', 'error');
|
||
});
|
||
} catch(e) {}
|
||
}, true);
|
||
} catch(e) {}
|
||
};
|
||
for (var i=0;i<sections.length;i++) attach(sections[i]);
|
||
} catch(e) {}
|
||
})();</script>
|
||
<script>(function(){
|
||
try {
|
||
var dock = document.getElementById('miuFabDock');
|
||
var t = document.getElementById('miuFabToggle');
|
||
if (!dock || !t) return;
|
||
|
||
try {
|
||
var key = 'miu_fab_dock_open';
|
||
var stored = localStorage.getItem(key);
|
||
if (stored === '0' || stored === '1') {
|
||
dock.setAttribute('data-open', stored);
|
||
}
|
||
} catch(e) {}
|
||
|
||
t.addEventListener('click', function(){
|
||
try {
|
||
var open = dock.getAttribute('data-open') === '1';
|
||
var next = open ? '0' : '1';
|
||
dock.setAttribute('data-open', next);
|
||
try { localStorage.setItem('miu_fab_dock_open', next); } catch(e) {}
|
||
} catch(e) {}
|
||
}, true);
|
||
|
||
var showTip = function(btn){
|
||
try {
|
||
if (!btn) return;
|
||
btn.classList.add('miu-tip');
|
||
setTimeout(function(){ try{btn.classList.remove('miu-tip');}catch(e){} }, 1200);
|
||
} catch(e) {}
|
||
};
|
||
dock.addEventListener('touchstart', function(e){
|
||
try {
|
||
var target = e && e.target ? e.target : null;
|
||
if (!target) return;
|
||
var btn = (target.closest && target.closest('.miu-fab-item')) ? target.closest('.miu-fab-item') : null;
|
||
if (!btn) return;
|
||
showTip(btn);
|
||
} catch(err) {}
|
||
}, {passive:true});
|
||
} catch(e) {}
|
||
})();</script>
|
||
|
||
<script>
|
||
(function(){
|
||
try {
|
||
var modalId = 'miuAlbumModal';
|
||
var ensureModal = function(){
|
||
var existing = document.getElementById(modalId);
|
||
if (existing) return existing;
|
||
var wrap = document.createElement('div');
|
||
wrap.id = modalId;
|
||
wrap.setAttribute('aria-hidden','true');
|
||
wrap.style.cssText = 'position:fixed;inset:0;z-index:2147483000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,0.78);padding:16px;opacity:0;transition:opacity 180ms ease;';
|
||
wrap.innerHTML = ''+
|
||
'<div data-miualbum-panel="1" style="width:min(920px,100%);max-height:min(90vh,860px);display:grid;grid-template-rows:auto 1fr;gap:10px;transform:scale(0.985);opacity:0.98;transition:transform 180ms ease, opacity 180ms ease;will-change:transform,opacity;">'+
|
||
'<div style="display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,0.92);font-size:13px;">'+
|
||
'<div data-miualbum-count="1">1 / 1</div>'+
|
||
'<button type="button" data-miualbum-close="1" style="border:0;background:transparent;color:rgba(255,255,255,0.92);font-size:26px;line-height:1;padding:6px 10px;cursor:pointer;">×</button>'+
|
||
'</div>'+
|
||
'<div style="position:relative;border-radius:14px;overflow:hidden;background:rgba(255,255,255,0.04);box-shadow:0 18px 60px rgba(0,0,0,0.45);display:flex;align-items:center;justify-content:center;min-height:320px;">'+
|
||
'<button type="button" data-miualbum-prev="1" style="position:absolute;left:12px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:9999px;border:1px solid rgba(255,255,255,0.25);background:rgba(0,0,0,0.35);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;">‹</button>'+
|
||
'<img data-miualbum-img="1" alt="" style="max-width:100%;max-height:90vh;display:block;object-fit:contain;transition:opacity 220ms ease-in-out;opacity:1;will-change:opacity;position:relative;z-index:1;pointer-events:none;" />'+
|
||
'<button type="button" data-miualbum-next="1" style="position:absolute;right:12px;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:9999px;border:1px solid rgba(255,255,255,0.25);background:rgba(0,0,0,0.35);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:20;">›</button>'+
|
||
'</div>'+
|
||
'</div>';
|
||
document.body.appendChild(wrap);
|
||
return wrap;
|
||
};
|
||
|
||
var state = { open: false, albumId: '', idx: 0, imgs: [], preloaded: {} };
|
||
|
||
var preloadAll = function(albumId, imgs){
|
||
try {
|
||
if (!imgs || !imgs.length) return;
|
||
if (!state.preloaded) state.preloaded = {};
|
||
var key = String(albumId || '');
|
||
if (!key) return;
|
||
if (state.preloaded[key] === 1) return;
|
||
state.preloaded[key] = 1;
|
||
for (var i=0;i<imgs.length;i++) {
|
||
try { var im = new Image(); im.decoding = 'async'; im.loading = 'eager'; im.src = imgs[i]; } catch(_e) {}
|
||
}
|
||
} catch(_e) {}
|
||
};
|
||
|
||
var setModalImage = function(modal, imgs, idx){
|
||
try {
|
||
var img = modal.querySelector('[data-miualbum-img="1"]');
|
||
var count = modal.querySelector('[data-miualbum-count="1"]');
|
||
if (!img) return;
|
||
idx = Math.max(0, Math.min(imgs.length - 1, idx || 0));
|
||
if (count) count.textContent = (idx + 1) + ' / ' + imgs.length;
|
||
// fade
|
||
try { img.style.transition = img.style.transition || 'opacity 220ms ease-in-out'; } catch(_e) {}
|
||
try { img.style.opacity = '0'; } catch(_e) {}
|
||
var nextSrc = imgs[idx];
|
||
var preload = new Image();
|
||
preload.onload = function(){
|
||
try { img.setAttribute('src', nextSrc); } catch(_e) {}
|
||
try { requestAnimationFrame(function(){ try { img.style.opacity = '1'; } catch(_e2) {} }); } catch(_e) { try { img.style.opacity = '1'; } catch(_e2) {} }
|
||
};
|
||
preload.src = nextSrc;
|
||
} catch(_e) {}
|
||
};
|
||
|
||
var openAt = function(albumId, idx){
|
||
var modal = ensureModal();
|
||
var imgs = [];
|
||
try {
|
||
var nodes = document.querySelectorAll('[data-miu-album-item="1"][data-miu-album-id="' + albumId.replace(/"/g,'\"') + '"]');
|
||
for (var i=0;i<nodes.length;i++) {
|
||
var s = nodes[i].getAttribute('data-src') || '';
|
||
if (s) imgs.push(s);
|
||
}
|
||
} catch(e) {}
|
||
if (!imgs.length) return;
|
||
preloadAll(albumId, imgs);
|
||
state.open = true;
|
||
state.albumId = albumId;
|
||
state.imgs = imgs;
|
||
state.idx = Math.max(0, Math.min(imgs.length - 1, idx || 0));
|
||
|
||
setModalImage(modal, imgs, state.idx);
|
||
|
||
modal.style.display = 'flex';
|
||
modal.setAttribute('aria-hidden','false');
|
||
try {
|
||
modal.style.opacity = '0';
|
||
var panel = modal.querySelector('[data-miualbum-panel="1"]');
|
||
if (panel) { panel.style.transform = 'scale(0.985)'; panel.style.opacity = '0.98'; }
|
||
requestAnimationFrame(function(){
|
||
try { modal.style.opacity = '1'; } catch(_e) {}
|
||
try { if (panel) { panel.style.transform = 'scale(1)'; panel.style.opacity = '1'; } } catch(_e) {}
|
||
});
|
||
} catch(_e) {}
|
||
};
|
||
|
||
var close = function(){
|
||
var modal = document.getElementById(modalId);
|
||
if (!modal) return;
|
||
state.open = false;
|
||
try {
|
||
modal.style.opacity = '0';
|
||
var panel = modal.querySelector('[data-miualbum-panel="1"]');
|
||
if (panel) { panel.style.transform = 'scale(0.985)'; panel.style.opacity = '0.98'; }
|
||
setTimeout(function(){
|
||
try { modal.style.display = 'none'; } catch(_e) {}
|
||
try { modal.setAttribute('aria-hidden','true'); } catch(_e) {}
|
||
}, 180);
|
||
} catch(_e) {
|
||
modal.style.display = 'none';
|
||
modal.setAttribute('aria-hidden','true');
|
||
}
|
||
};
|
||
|
||
var step = function(dir){
|
||
var modal = document.getElementById(modalId);
|
||
if (!modal || !state.open || !state.imgs || !state.imgs.length) return;
|
||
state.idx = (state.idx + dir + state.imgs.length) % state.imgs.length;
|
||
setModalImage(modal, state.imgs, state.idx);
|
||
};
|
||
|
||
var setSliderIdx = function(albumId, idx){
|
||
try {
|
||
var items = document.querySelectorAll('[data-miu-album-item="1"][data-miu-album-id="' + albumId.replace(/"/g,'\"') + '"]');
|
||
var src = '';
|
||
var len = items ? items.length : 0;
|
||
if (!len) return;
|
||
idx = (Number(idx || 0) % len + len) % len;
|
||
try { src = (items[idx] && items[idx].getAttribute) ? (items[idx].getAttribute('data-src') || '') : ''; } catch(_e) { src = ''; }
|
||
if (!src) return;
|
||
|
||
// preload whole album once
|
||
try {
|
||
var all = [];
|
||
for (var ii=0;ii<len;ii++) {
|
||
try { var ss = (items[ii] && items[ii].getAttribute) ? (items[ii].getAttribute('data-src') || '') : ''; if (ss) all.push(ss); } catch(_e) {}
|
||
}
|
||
preloadAll(albumId, all);
|
||
} catch(_e) {}
|
||
|
||
var mainImg = document.querySelector('[data-miu-album-main-img="1"][data-miu-album-id="' + albumId.replace(/"/g,'\"') + '"]');
|
||
if (mainImg) {
|
||
try { mainImg.style.opacity = '0'; } catch(_e) {}
|
||
var preload = new Image();
|
||
preload.onload = function(){
|
||
try { mainImg.setAttribute('src', src); } catch(_e) {}
|
||
try { requestAnimationFrame(function(){ try { mainImg.style.opacity = '1'; } catch(_e2) {} }); } catch(_e) { try { mainImg.style.opacity = '1'; } catch(_e2) {} }
|
||
};
|
||
preload.src = src;
|
||
}
|
||
|
||
var thumbs = document.querySelectorAll('[data-miu-album-thumb="1"][data-miu-album-id="' + albumId.replace(/"/g,'\"') + '"]');
|
||
for (var i=0;i<thumbs.length;i++) {
|
||
var th = thumbs[i];
|
||
var isActive = String(th.getAttribute('data-idx')||'') === String(idx);
|
||
try {
|
||
if (isActive) {
|
||
th.setAttribute('data-active','1');
|
||
th.style.boxShadow = '0 0 0 2px rgba(236,72,153,0.95)';
|
||
} else {
|
||
th.removeAttribute('data-active');
|
||
th.style.boxShadow = '0 0 0 1px rgba(0,0,0,0.08)';
|
||
}
|
||
} catch(_e) {}
|
||
}
|
||
|
||
var slider = document.querySelector('[data-miu-album-slider="1"][data-miu-album-id="' + albumId.replace(/"/g,'\"') + '"]');
|
||
if (slider) slider.setAttribute('data-idx', String(idx));
|
||
} catch(_e) {}
|
||
};
|
||
|
||
document.addEventListener('click', function(e){
|
||
try {
|
||
var t = e && e.target;
|
||
if (!t) return;
|
||
var mainBtn = t.closest ? t.closest('[data-miu-album-main="1"]') : null;
|
||
if (mainBtn) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
var albumId0 = mainBtn.getAttribute('data-miu-album-id') || '';
|
||
if (!albumId0) return;
|
||
var slider0 = document.querySelector('[data-miu-album-slider="1"][data-miu-album-id="' + albumId0.replace(/"/g,'\"') + '"]');
|
||
var idx0 = 0;
|
||
try { idx0 = Number(slider0 ? (slider0.getAttribute('data-idx')||'0') : '0') || 0; } catch(_e) { idx0 = 0; }
|
||
openAt(albumId0, idx0);
|
||
return;
|
||
}
|
||
|
||
var prevBtn = t.closest ? t.closest('[data-miu-album-prev="1"]') : null;
|
||
if (prevBtn) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
var aidp = prevBtn.getAttribute('data-miu-album-id') || '';
|
||
var slp = document.querySelector('[data-miu-album-slider="1"][data-miu-album-id="' + aidp.replace(/"/g,'\"') + '"]');
|
||
var curp = 0;
|
||
try { curp = Number(slp ? (slp.getAttribute('data-idx')||'0') : '0') || 0; } catch(_e) { curp = 0; }
|
||
setSliderIdx(aidp, curp - 1);
|
||
return;
|
||
}
|
||
|
||
var nextBtn = t.closest ? t.closest('[data-miu-album-next="1"]') : null;
|
||
if (nextBtn) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
var aidn = nextBtn.getAttribute('data-miu-album-id') || '';
|
||
var sln = document.querySelector('[data-miu-album-slider="1"][data-miu-album-id="' + aidn.replace(/"/g,'\"') + '"]');
|
||
var curn = 0;
|
||
try { curn = Number(sln ? (sln.getAttribute('data-idx')||'0') : '0') || 0; } catch(_e) { curn = 0; }
|
||
setSliderIdx(aidn, curn + 1);
|
||
return;
|
||
}
|
||
|
||
var thumb = t.closest ? t.closest('[data-miu-album-thumb="1"]') : null;
|
||
if (thumb) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
var aidt = thumb.getAttribute('data-miu-album-id') || '';
|
||
var idxt = Number(thumb.getAttribute('data-idx') || '0') || 0;
|
||
setSliderIdx(aidt, idxt);
|
||
return;
|
||
}
|
||
|
||
var item = t.closest ? t.closest('[data-miu-album-item="1"]') : null;
|
||
if (item) {
|
||
e.preventDefault();
|
||
e.stopPropagation();
|
||
var albumId = item.getAttribute('data-miu-album-id') || '';
|
||
var idx = Number(item.getAttribute('data-idx') || '0') || 0;
|
||
if (albumId) openAt(albumId, idx);
|
||
return;
|
||
}
|
||
var modal = t.closest ? t.closest('#' + modalId) : null;
|
||
if (modal) {
|
||
var closeBtn = (t.closest && t.closest('[data-miualbum-close="1"]')) ? t.closest('[data-miualbum-close="1"]') : null;
|
||
if (closeBtn) { close(); return; }
|
||
var prevBtn2 = (t.closest && t.closest('[data-miualbum-prev="1"]')) ? t.closest('[data-miualbum-prev="1"]') : null;
|
||
if (prevBtn2) { step(-1); return; }
|
||
var nextBtn2 = (t.closest && t.closest('[data-miualbum-next="1"]')) ? t.closest('[data-miualbum-next="1"]') : null;
|
||
if (nextBtn2) { step(1); return; }
|
||
// click backdrop
|
||
if (t === modal) { close(); return; }
|
||
}
|
||
} catch(_e) {}
|
||
}, true);
|
||
|
||
document.addEventListener('keydown', function(e){
|
||
try {
|
||
if (!state.open) return;
|
||
if (e.key === 'Escape') close();
|
||
if (e.key === 'ArrowLeft') step(-1);
|
||
if (e.key === 'ArrowRight') step(1);
|
||
} catch(_e) {}
|
||
}, true);
|
||
|
||
// init sliders
|
||
try {
|
||
var sliders = document.querySelectorAll('[data-miu-album-slider="1"]');
|
||
for (var i=0;i<sliders.length;i++) {
|
||
var s = sliders[i];
|
||
var aid = s.getAttribute('data-miu-album-id') || '';
|
||
if (!aid) continue;
|
||
if (!s.getAttribute('data-idx')) s.setAttribute('data-idx','0');
|
||
setSliderIdx(aid, Number(s.getAttribute('data-idx')||'0')||0);
|
||
|
||
// autoplay
|
||
try {
|
||
if (s.getAttribute('data-autoplay') !== '1') continue;
|
||
if (s.getAttribute('data-autoplay-init') === '1') continue;
|
||
s.setAttribute('data-autoplay-init','1');
|
||
(function(sliderEl, albumId){
|
||
var timer = null;
|
||
var stop = function(){ try { if (timer) clearInterval(timer); } catch(_e) {} timer = null; };
|
||
var start = function(){
|
||
stop();
|
||
timer = setInterval(function(){
|
||
try {
|
||
var cur = Number(sliderEl.getAttribute('data-idx')||'0')||0;
|
||
setSliderIdx(albumId, cur + 1);
|
||
} catch(_e) {}
|
||
}, 2500);
|
||
};
|
||
sliderEl.addEventListener('pointerdown', stop, true);
|
||
sliderEl.addEventListener('touchstart', stop, { passive: true, capture: true });
|
||
sliderEl.addEventListener('mouseenter', stop, { passive: true });
|
||
sliderEl.addEventListener('mouseleave', start, { passive: true });
|
||
|
||
// Lazy-start autoplay only when slider is in viewport
|
||
try {
|
||
if (typeof window !== 'undefined' && 'IntersectionObserver' in window) {
|
||
var started = false;
|
||
var obs = new IntersectionObserver(function(entries){
|
||
try {
|
||
var e = entries && entries[0];
|
||
if (!e) return;
|
||
if (e.isIntersecting) {
|
||
if (!started) {
|
||
started = true;
|
||
start();
|
||
} else {
|
||
start();
|
||
}
|
||
} else {
|
||
stop();
|
||
}
|
||
} catch(_e2) {}
|
||
}, { root: null, rootMargin: '0px 0px -10% 0px', threshold: [0.08, 0.15] });
|
||
obs.observe(sliderEl);
|
||
} else {
|
||
start();
|
||
}
|
||
} catch(_e) {
|
||
start();
|
||
}
|
||
})(s, aid);
|
||
} catch(_e) {}
|
||
}
|
||
} catch(_e) {}
|
||
} catch(e) {}
|
||
})();
|
||
</script>
|
||
<script>
|
||
(function(){
|
||
try {
|
||
var isZalo = function(){
|
||
try {
|
||
var ua = String(navigator.userAgent || '');
|
||
if (!ua) return false;
|
||
// Zalo iOS/Android
|
||
if (/Zalo/i.test(ua)) return true;
|
||
return false;
|
||
} catch(e) {
|
||
return false;
|
||
}
|
||
};
|
||
|
||
var isIOS = function(){
|
||
try {
|
||
var ua = String(navigator.userAgent || '');
|
||
if (!ua) return false;
|
||
return /iPhone|iPad|iPod/i.test(ua);
|
||
} catch(e) {
|
||
return false;
|
||
}
|
||
};
|
||
|
||
var hasVipVideo = function(){
|
||
try {
|
||
return !!document.querySelector('video[data-vip-video="1"], video[data-vip-video="true"], [data-vip-video="true"], [data-vip-video="1"]');
|
||
} catch(e) {
|
||
return false;
|
||
}
|
||
};
|
||
|
||
var renderGate = function(){
|
||
try {
|
||
var href = String(location.href || '');
|
||
var cleanHref = href;
|
||
var html = '' +
|
||
'<div style="position:fixed;inset:0;z-index:2147483647;background:#0b1220;color:#fff;padding:24px;">' +
|
||
'<div style="position:absolute;top:10px;right:10px;left:10px;height:120px;pointer-events:none;">' +
|
||
'<div style="position:absolute;top:6px;right:6px;width:190px;text-align:right;font-size:13px;opacity:0.95;line-height:1.35;">Bấm dấu <b>3 chấm</b> góc phải</div>' +
|
||
'<div style="position:absolute;top:30px;right:78px;width:120px;height:60px;">' +
|
||
'<svg viewBox="0 0 120 60" width="120" height="60" style="display:block;">' +
|
||
'<path d="M5,55 C40,20 70,20 112,10" fill="none" stroke="rgba(255,255,255,0.92)" stroke-width="3" stroke-linecap="round" />' +
|
||
'<path d="M112,10 L98,6 L102,20 Z" fill="rgba(255,255,255,0.92)" />' +
|
||
'</svg>' +
|
||
'</div>' +
|
||
'</div>' +
|
||
'<div style="max-width:560px;margin:0 auto;padding-top:120px;">' +
|
||
'<div style="font-size:18px;font-weight:800;line-height:1.35;">Thiệp VIP: Mở thiệp bằng Safari để có trải nghiệp tốt nhất!</div>' +
|
||
'<div style="margin-top:14px;font-size:14px;line-height:1.6;">' +
|
||
'<div style="margin-top:8px;"><b>Bước 1:</b> Bấm dấu <b>3 chấm</b> ở góc phải trên.</div>' +
|
||
'<div style="margin-top:8px;"><b>Bước 2:</b> Chọn <b>Mở bằng Safari</b>.</div>' +
|
||
'</div>' +
|
||
'<div style="margin-top:16px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.14);">' +
|
||
'<div style="font-size:12px;opacity:0.9;line-height:1.5;">Nếu bạn không thấy mục “Mở bằng Safari”, hãy dùng cách dự phòng:</div>' +
|
||
'<div style="margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;">' +
|
||
'<button id="miuCopyLink" type="button" style="display:inline-flex;align-items:center;justify-content:center;padding:12px 14px;border-radius:12px;background:#ffffff;color:#0b1220;border:0;font-weight:800;">Sao chép link</button>' +
|
||
'<button id="miuShareLink" type="button" style="display:inline-flex;align-items:center;justify-content:center;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,0.12);color:#fff;border:1px solid rgba(255,255,255,0.18);font-weight:700;">Chia sẻ</button>' +
|
||
'</div>' +
|
||
'</div>' +
|
||
'</div>' +
|
||
'</div>';
|
||
document.documentElement.style.background = '#0b1220';
|
||
var mount = document.body;
|
||
if (!mount) {
|
||
try { mount = document.getElementsByTagName('body')[0]; } catch(e) {}
|
||
}
|
||
if (!mount) {
|
||
return;
|
||
}
|
||
mount.innerHTML = html;
|
||
|
||
// Share sheet (iOS) gives the user a native way to open in Safari.
|
||
try {
|
||
var shareBtn = document.getElementById('miuShareLink');
|
||
if (shareBtn) {
|
||
shareBtn.addEventListener('click', function(){
|
||
try {
|
||
if (navigator.share) {
|
||
var p = navigator.share({ url: cleanHref, title: document.title || 'Thiệp mời' });
|
||
try { if (p && typeof p.catch === 'function') p.catch(function(){}); } catch(e) {}
|
||
return;
|
||
}
|
||
} catch(e) {}
|
||
try {
|
||
var copyBtn = document.getElementById('miuCopyLink');
|
||
if (copyBtn && typeof copyBtn.click === 'function') copyBtn.click();
|
||
} catch(e) {}
|
||
}, { passive: true });
|
||
}
|
||
} catch(e) {}
|
||
|
||
// Copy link button
|
||
try {
|
||
var copyBtn2 = document.getElementById('miuCopyLink');
|
||
if (copyBtn2) {
|
||
copyBtn2.addEventListener('click', function(){
|
||
try {
|
||
var done = false;
|
||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||
var pp = navigator.clipboard.writeText(cleanHref);
|
||
done = true;
|
||
try { if (pp && typeof pp.catch === 'function') pp.catch(function(){}); } catch(e) {}
|
||
}
|
||
if (!done) {
|
||
var ta = document.createElement('textarea');
|
||
ta.value = cleanHref;
|
||
ta.setAttribute('readonly','');
|
||
ta.style.position = 'fixed';
|
||
ta.style.left = '-9999px';
|
||
document.body.appendChild(ta);
|
||
ta.select();
|
||
try { document.execCommand('copy'); } catch(e) {}
|
||
try { document.body.removeChild(ta); } catch(e) {}
|
||
}
|
||
} catch(e) {}
|
||
try { alert('Đã sao chép link. Bạn hãy dán vào Safari/Chrome để mở.'); } catch(e) {}
|
||
}, { passive: true });
|
||
}
|
||
} catch(e) {}
|
||
} catch(e) {}
|
||
};
|
||
|
||
// Gate only for Zalo iOS AND only when VIP video exists
|
||
if (isZalo() && isIOS() && hasVipVideo()) {
|
||
try {
|
||
if (!document.body) {
|
||
window.addEventListener('DOMContentLoaded', function(){
|
||
try { renderGate(); } catch(e) {}
|
||
}, { once: true });
|
||
} else {
|
||
renderGate();
|
||
}
|
||
} catch(e) {
|
||
renderGate();
|
||
}
|
||
return;
|
||
}
|
||
|
||
var playAll = function(){
|
||
try {
|
||
var vids = document.querySelectorAll('video[data-miu-play-on-opening-closed="1"]');
|
||
for (var i=0;i<vids.length;i++) {
|
||
try {
|
||
var v = vids[i];
|
||
if (!v) continue;
|
||
// Ensure no looping; keep last frame when ended
|
||
try { v.loop = false; } catch(_e) {}
|
||
// Only attempt once
|
||
if (v.getAttribute('data-miu-played') === '1') continue;
|
||
v.setAttribute('data-miu-played','1');
|
||
// Autoplay policies require muted; we render muted already
|
||
var p = v.play && v.play();
|
||
try { if (p && typeof p.catch === 'function') p.catch(function(){}); } catch(_e2) {}
|
||
} catch(_e3) {}
|
||
}
|
||
} catch(_e4) {}
|
||
};
|
||
|
||
var getOpeningState = function(){
|
||
try {
|
||
var opening = document.getElementById('miuOpening');
|
||
if (!opening) return { exists: false, open: false };
|
||
var openAttr = String(opening.getAttribute('data-open') || '');
|
||
return { exists: true, open: openAttr === '1' };
|
||
} catch(e) {
|
||
return { exists: false, open: false };
|
||
}
|
||
};
|
||
|
||
var st = getOpeningState();
|
||
if (!st.exists || !st.open) {
|
||
// No opening cover, or already closed
|
||
setTimeout(playAll, 0);
|
||
return;
|
||
}
|
||
|
||
var onClosed = function(){
|
||
try { window.removeEventListener('miu:opening:closed', onClosed, true); } catch(_e) {}
|
||
playAll();
|
||
};
|
||
window.addEventListener('miu:opening:closed', onClosed, true);
|
||
} catch(e) {}
|
||
})();
|
||
</script>
|
||
<div style="text-align:center;padding:20px;font-size:12px;color:#666;margin-top:20px;">Thiệp cưới online & sự kiện - <a href="https://miuwedding.com/?utm_source=thiepcuoi" target="_blank" rel="noopener" style="color:#ec4899;text-decoration:none;font-weight:600;">Miu Wedding</a></div>
|
||
|
||
</body></html> |