/* ===== Door & base reset ===== */

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body {
        background: #fff;
    }
.cloud-door {
    position: fixed;
    top: 0;
    width: 50vw;
    height: 100vh;
    transition: transform 4s ease-in-out;
    z-index: 9999;
    background-size: 200% 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.left-door {
    left: 0;
    transform: translateX(0);
    background-image: url('../images/theme/door/backdrop.jpg');
    background-size: 200% 100%; /* Phóng to để mỗi cửa chiếm 1 nửa */
    background-position: left center;
}

.right-door {
    right: 0;
    transform: translateX(0);
    background-image: url('../images/theme/door/backdrop.jpg');
    background-size: 200% 100%;
    background-position: right center;
}
    .open .left-door {
        transform: translateX(-100%);
    }
    .open .right-door {
        transform: translateX(100%);
    }
    .content {
        position: relative;
        z-index: 10;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        padding-top: 50vh;
        opacity: 0;
        transition: opacity 2s ease-in-out 4s;
    }
    .open .content {
        opacity: 1;
    }


/* ===== Music player ===== */

    /* Nút nhạc */
    #music-toggle {
        position: fixed;
        bottom: 15px;
        left: 15px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #fff;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        cursor: pointer;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    #music-toggle:hover {
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    #music-toggle img {
        width: 25px;
        height: 25px;
        pointer-events: none;
    }

    /* --- MỚI: Tooltip thông báo --- */
    #music-hint {
        position: fixed;
        bottom: 75px;
        left: 15px;
        background-color: #333;
        color: #fff;
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 13px;
        font-family: Arial, sans-serif;
        z-index: 9999;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
        animation: bounce 2s infinite;
        pointer-events: none;
        white-space: nowrap;
    }
    /* Mũi tên tooltip */
    #music-hint::after {
        content: '';
        position: absolute;
        bottom: -6px;
        left: 18px;
        border-width: 6px 6px 0;
        border-style: solid;
        border-color: #333 transparent transparent transparent;
    }
    
    @keyframes bounce {
        0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
        40% {transform: translateY(-5px);}
        60% {transform: translateY(-3px);}
    }

    /* Hiệu ứng rung */
    .vibrating {
        animation: pulse 1.2s infinite, rotate 4s linear infinite, glow 2s ease-in-out infinite;
        box-shadow: 0 0 15px rgba(139, 0, 0, 0.6), 0 0 25px rgba(139, 0, 0, 0.4);
    }

    @keyframes pulse {
        0% { transform: scale(1); }
        50% { transform: scale(1.05) rotate(1deg); }
        100% { transform: scale(1) rotate(-1deg); }
    }
    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    @keyframes glow {
        0%, 100% { box-shadow: 0 0 10px rgba(139, 0, 0, 0.2), 0 0 20px rgba(139, 0, 0, 0.2); }
        50% { box-shadow: 0 0 20px rgba(139, 0, 0, 0.6), 0 0 30px rgba(139, 0, 0, 0.5); }
    }


/* ===== Wish container ===== */

  #wish-standalone-container {
    width: 100%;
    max-width: 420px;
    height: 250px;
    margin: 20px auto;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    border: 1px dashed #ccc;
    background: rgba(255,255,255,0.9);
    border-radius: 8px;
    font-family: "Times New Roman", serif;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  #wish-standalone-container::-webkit-scrollbar {
    display: none;
  }
  #wish-standalone-list { padding: 20px; }
  .wish-standalone-item { margin-bottom: 26px; text-align: center; animation: fadeInScroll 0.5s ease; }
  .wish-standalone-message { font-size: 18px; font-style: italic; line-height: 1.6; margin-bottom: 6px; color: #333; }
  .wish-standalone-name { font-size: 15px; font-weight: bold; color: #555; }
  @keyframes fadeInScroll { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }


/* ===== Animation keyframes ===== */
@-webkit-keyframes fadeInUp {0% {opacity: 0;-webkit-transform: translateY(20px);transform: translateY(20px);}100% {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}}@keyframes fadeInUp {0% {opacity: 0;-webkit-transform: translateY(20px);-ms-transform: translateY(20px);transform: translateY(20px);}100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}}@-webkit-keyframes pulse {0% {-webkit-transform: scale(1);transform: scale(1);}50% {-webkit-transform: scale(1.1);transform: scale(1.1);}100% {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}}@keyframes pulse {0% {-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}50% {-webkit-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);}100% {opacity: 1;-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}}@-webkit-keyframes fadeInDown {0% {opacity: 0;-webkit-transform: translateY(-20px);transform: translateY(-20px);}100% {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}}@keyframes fadeInDown {0% {opacity: 0;-webkit-transform: translateY(-20px);-ms-transform: translateY(-20px);transform: translateY(-20px);}100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}}@-webkit-keyframes fadeInRight {0% {opacity: 0;-webkit-transform: translateX(20px);transform: translateX(20px);}100% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}}@keyframes fadeInRight {0% {opacity: 0;-webkit-transform: translateX(40px);-ms-transform: translateX(40px);transform: translateX(40px);}100% {opacity: 1;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}}@-webkit-keyframes fadeInLeft {0% {opacity: 0;-webkit-transform: translateX(-20px);transform: translateX(-20px);}100% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}}@keyframes fadeInLeft {0% {opacity: 0;-webkit-transform: translateX(-20px);-ms-transform: translateX(-20px);transform: translateX(-20px);}100% {opacity: 1;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}}@-webkit-keyframes bounceIn {0% {opacity: 0;-webkit-transform: scale(0.3);transform: scale(0.3);}50% {opacity: 1;-webkit-transform: scale(1.05);transform: scale(1.05);}70% {-webkit-transform: scale(0.9);transform: scale(0.9);}100% {opacity: 1;-webkit-transform: scale(1);transform: scale(1);}}@keyframes bounceIn {0% {opacity: 0;-webkit-transform: scale(0.3);-ms-transform: scale(0.3);transform: scale(0.3);}50% {opacity: 1;-webkit-transform: scale(1.05);-ms-transform: scale(1.05);transform: scale(1.05);}70% {-webkit-transform: scale(0.9);-ms-transform: scale(0.9);transform: scale(0.9);}100% {opacity: 1;-webkit-transform: scale(1);-ms-transform: scale(1);transform: scale(1);}}@-webkit-keyframes fadeInLeftBig {0% {opacity: 0;-webkit-transform: translateX(-2000px);transform: translateX(-2000px);}100% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}}@keyframes fadeInLeftBig {0% {opacity: 0;-webkit-transform: translateX(-2000px);-ms-transform: translateX(-2000px);transform: translateX(-2000px);}100% {opacity: 1;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}}@-webkit-keyframes fadeInRightBig {0% {opacity: 0;-webkit-transform: translateX(2000px);transform: translateX(2000px);}100% {opacity: 1;-webkit-transform: translateX(0);transform: translateX(0);}}@keyframes fadeInRightBig {0% {opacity: 0;-webkit-transform: translateX(2000px);-ms-transform: translateX(2000px);transform: translateX(2000px);}100% {opacity: 1;-webkit-transform: translateX(0);-ms-transform: translateX(0);transform: translateX(0);}}@-webkit-keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}@keyframes fadeIn {0% {opacity: 0;}100% {opacity: 1;}}@-webkit-keyframes fadeInUpBig {0% {opacity: 0;-webkit-transform: translateY(2000px);transform: translateY(2000px);}100% {opacity: 1;-webkit-transform: translateY(0);transform: translateY(0);}}@keyframes fadeInUpBig {0% {opacity: 0;-webkit-transform: translateY(2000px);-ms-transform: translateY(2000px);transform: translateY(2000px);}100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}}@-webkit-keyframes bounce {0%, 100%, 20%, 50%, 80% {-webkit-transform: translateY(0);transform: translateY(0);}40% {-webkit-transform: translateY(-30px);transform: translateY(-30px);}60% {-webkit-transform: translateY(-15px);transform: translateY(-15px);}}@keyframes bounce {0%, 100%, 20%, 50%, 80% {-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}40% {-webkit-transform: translateY(-30px);-ms-transform: translateY(-30px);transform: translateY(-30px);}60% {-webkit-transform: translateY(-15px);-ms-transform: translateY(-15px);transform: translateY(-15px);}}

/* ===== Fall keyframes ===== */

  @keyframes fall {
    0% { top: -10%; opacity: 1; }
    100% { top: 110%; opacity: 0; }
  }
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(50px); }
  }

  .falling-icon {
    position: fixed;
    z-index: 9999;
    top: -10%;
    pointer-events: none;
    animation-name: fall, shake;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite;
  }


/* ===== Snow & popup ===== */

  /* --- STYLE TUYẾT RƠI --- */
  .snowflakes { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9000; }
  .snowflake { color: #fff; font-size: 1em; text-shadow: 0 0 5px #000; position: fixed; top: -10%; z-index: 9000; animation: snowflakes-fall 10s linear infinite, snowflakes-shake 3s ease-in-out infinite; }
  @keyframes snowflakes-fall { 0% { top: -10%; } 100% { top: 100%; } }
  @keyframes snowflakes-shake { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(80px); } }
  .snowflake:nth-of-type(1) { left: 1%; animation-delay: 0s, 0s; } .snowflake:nth-of-type(2) { left: 10%; animation-delay: 1s, 1s; } .snowflake:nth-of-type(3) { left: 20%; animation-delay: 6s, 0.5s; } .snowflake:nth-of-type(4) { left: 30%; animation-delay: 4s, 2s; } .snowflake:nth-of-type(5) { left: 40%; animation-delay: 2s, 2s; } .snowflake:nth-of-type(6) { left: 50%; animation-delay: 8s, 3s; } .snowflake:nth-of-type(7) { left: 60%; animation-delay: 6s, 2s; } .snowflake:nth-of-type(8) { left: 70%; animation-delay: 2.5s, 1s; } .snowflake:nth-of-type(9) { left: 80%; animation-delay: 1s, 0s; } .snowflake:nth-of-type(10) { left: 90%; animation-delay: 3s, 1.5s; }

  /* --- STYLE POPUP VIỀN CHẠY --- */
  #popup-notify {
    position: fixed; top: 20px; right: 20px; width: 300px; max-width: 90%; z-index: 9999;
    border-radius: 10px; transform: translateX(120%); transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    overflow: hidden; padding: 3px; background: transparent; box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  }
  #popup-notify.show { transform: translateX(0); }
  #popup-notify::before {
    content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
    background: conic-gradient(transparent, #ff6f61, #ffd700, #ff6f61, transparent);
    animation: border-rotate 4s linear infinite; z-index: 0;
  }
  @keyframes border-rotate { 100% { transform: rotate(360deg); } }
  .popup-inner { position: relative; background: #fff; border-radius: 8px; padding: 15px; z-index: 1; display: flex; flex-direction: column; gap: 5px; }
  .popup-content { font-size: 16px; color: #333; font-style: italic; }
  .popup-author { font-size: 14px; font-weight: bold; color: #ff6f61; text-align: right; }

/* Fix text overlap: family info & venue blocks (LadiPage fixed heights) */
.ladi-wraper {
  width: min(100%, 420px) !important;
}
#SECTION1 {
  width: 100% !important;
  max-width: 420px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}
#GROUP124,
#GROUP148 {
  height: auto !important;
  min-height: 145px;
  overflow: visible;
  width: 50% !important;
}
#GROUP148 {
  left: 0 !important;
}
#GROUP124 {
  left: 50% !important;
}
#PARAGRAPH153,
#PARAGRAPH181 {
  top: 16px !important;
}
#PARAGRAPH153,
#PARAGRAPH156,
#PARAGRAPH181,
#PARAGRAPH184 {
  width: 100% !important;
}
#PARAGRAPH154,
#PARAGRAPH182 {
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}
#PARAGRAPH154 > .ladi-paragraph,
#PARAGRAPH182 > .ladi-paragraph {
  height: auto !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: break-word !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}
#PARAGRAPH156,
#PARAGRAPH184 {
  top: 132px !important;
  height: auto !important;
  width: 100% !important;
}
#PARAGRAPH156 > .ladi-paragraph,
#PARAGRAPH184 > .ladi-paragraph {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #6b4f4f !important;
}
#PARAGRAPH153,
#PARAGRAPH154,
#PARAGRAPH181,
#PARAGRAPH182 {
  left: 16px !important;
  width: calc(100% - 20px) !important;
}
/* Couple names below family address blocks */
#SECTION1::after {
  content: "";
  position: absolute;
  top: 102px;
  left: 50%;
  width: 0;
  height: 48px;
  border-left: 2px solid rgba(117, 36, 24, 0.7);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 1;
}
#PARAGRAPH154,
#PARAGRAPH182 {
  top: 65px !important;
}
@media (max-width: 400px) {
  #PARAGRAPH153,
  #PARAGRAPH154,
  #PARAGRAPH181,
  #PARAGRAPH182 {
    left: 5px !important;
    width: calc(100% - 10px) !important;
  }
  #PARAGRAPH154 > .ladi-paragraph,
  #PARAGRAPH182 > .ladi-paragraph {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}
#IMAGE74 {
  top: 10px !important;
}
.couple-connector {
  display: block !important;
  width: 1em;
  margin: 10px auto 0 !important;
  font-family: Arial, sans-serif !important;
  font-size: 28px !important;
  line-height: 1 !important;
  font-style: normal !important;
  color: #b34747 !important;
  letter-spacing: 0 !important;
}
#HEADLINE330 {
  left: 0 !important;
  width: 100% !important;
  top: 340px !important;
}
#HEADLINE331 {
  left: 0 !important;
  width: 100% !important;
  top: 430px !important;
}
#GROUP264 {
  top: 270px !important;
  height: 100px !important;
}
#HEADLINE439 {
  top: 525px !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 78px;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 3 !important;
}
#HEADLINE439 > .ladi-headline {
  white-space: normal !important;
  line-height: 1.35 !important;
  padding: 0 12px;
  box-sizing: border-box;
  color: rgb(117, 36, 24) !important;
  overflow: visible !important;
}
#HEADLINE440 {
  display: none !important;
}
#GROUP253 {
  display: none !important;
}
#IMAGE75 {
  display: none !important;
}
/* Photos block → invitation text → NHÀ TRAI/GÁI buttons */
#PARAGRAPH233 {
  top: 900px !important;
  z-index: 2;
}
#PARAGRAPH243 {
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}
#PARAGRAPH243 > .ladi-paragraph {
  width: 100% !important;
  padding: 0 12px;
  box-sizing: border-box;
  font-size: 30px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}
#HEADLINE440 {
  width: 390px !important;
  left: 15px !important;
}
#HEADLINE440 > .ladi-headline {
  white-space: normal !important;
  overflow-wrap: break-word;
  padding: 0 8px;
  box-sizing: border-box;
}
#PARAGRAPH233 > .ladi-paragraph {
  color: #4a2c2c !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}
/* Tab Nhà Trai / Nhà Gái (như mẫu gốc): guest.js đặt <html data-event-tab="nha_trai|nha_gai">.
   GROUP308/GROUP312 = nút đang chọn, GROUP309/GROUP311 = nút bấm để chuyển. */
#GROUP305,
#GROUP306,
#GROUP307,
#GROUP310,
#PARAGRAPH283,
#GROUP325,
#GROUP339 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#GROUP309,
#GROUP311 {
  cursor: pointer;
}
html:not([data-event-tab="nha_gai"]) #GROUP309,
html:not([data-event-tab="nha_gai"]) #GROUP312,
html:not([data-event-tab="nha_gai"]) #TIECNHAGAI,
html:not([data-event-tab="nha_gai"]) #NHAGAI,
html[data-event-tab="nha_gai"] #GROUP308,
html[data-event-tab="nha_gai"] #GROUP311,
html[data-event-tab="nha_gai"] #TIECNHATRAI,
html[data-event-tab="nha_gai"] #NHATRAI {
  display: none !important;
}
html:not([data-event-tab="nha_gai"]) #GROUP308,
html:not([data-event-tab="nha_gai"]) #GROUP311,
html[data-event-tab="nha_gai"] #GROUP309,
html[data-event-tab="nha_gai"] #GROUP312 {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
html:not([data-event-tab="nha_gai"]) #TIECNHATRAI,
html[data-event-tab="nha_gai"] #TIECNHAGAI {
  display: block !important;
  z-index: 2 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
html:not([data-event-tab="nha_gai"]) #NHATRAI,
html[data-event-tab="nha_gai"] #NHAGAI {
  display: block !important;
}
#GROUP324,
#GROUP338,
#BUTTON27,
#BUTTON26 {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#GROUP324 {
  pointer-events: none !important;
}
#SECTION1 {
  height: auto !important;
  min-height: 1250px;
}
#SECTION6 {
  height: 1350px !important;
}
#IMAGE31,
#IMAGE71 {
  width: calc(100% - 45.97px) !important;
  height: auto !important;
  aspect-ratio: 857 / 600;
  left: 22.98px !important;
  overflow: hidden !important;
}
#IMAGE31 {
  top: 700px !important;
}
#IMAGE71 {
  top: 1000px !important;
}
#IMAGE31 > .ladi-image,
#IMAGE71 > .ladi-image {
  width: 100% !important;
  height: 100% !important;
}
#IMAGE31 > .ladi-image > .ladi-image-background,
#IMAGE71 > .ladi-image > .ladi-image-background {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  background-size: 100% 100% !important;
}
.show3-hotspot {
  position: absolute !important;
  top: 700px !important;
  width: 33.33% !important;
  height: 262px !important;
  z-index: 4 !important;
  cursor: zoom-in !important;
}
.show3-hotspot > .ladi-image,
.show3-hotspot > .ladi-image > .ladi-image-background {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
}
.show3-hotspot-a1,
.show3-hotspot-b1 {
  left: 22.98px !important;
}
.show3-hotspot-a2,
.show3-hotspot-b2 {
  left: calc(22.98px + 33.33%) !important;
}
.show3-hotspot-a3,
.show3-hotspot-b3 {
  left: calc(22.98px + 66.66%) !important;
}
.show3-hotspot-b1,
.show3-hotspot-b2,
.show3-hotspot-b3 {
  top: 1000px !important;
}
#GROUP324,
#GROUP338,
#GROUP352,
#GROUP362 {
  height: auto !important;
  min-height: 148px;
}
#GROUP322 {
  top: 158px !important;
}
#PARAGRAPH292,
#PARAGRAPH307,
#PARAGRAPH323,
#PARAGRAPH333 {
  top: 92px !important;
  height: auto !important;
}
/* Thẻ lịch: tên địa điểm 1 dòng → kéo địa chỉ lên, khung gọn như mẫu gốc */
#PARAGRAPH292,
#PARAGRAPH307 {
  top: 66px !important;
}
#GROUP324,
#GROUP338 {
  min-height: 112px !important;
}
#PARAGRAPH291 > .ladi-paragraph,
#PARAGRAPH306 > .ladi-paragraph,
#PARAGRAPH322 > .ladi-paragraph,
#PARAGRAPH332 > .ladi-paragraph {
  font-size: 18px !important;
  line-height: 1.45 !important;
}

/* ===== Guest personalisation (mobile invitation) ===== */

.guest-greeting {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  width: calc(100% - 24px);
  max-width: 396px;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease;
}

.guest-greeting.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.guest-greeting.is-hiding {
  transform: translateX(-50%) translateY(-120%);
  opacity: 0;
}

.guest-greeting__inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(117, 36, 24, 0.96), rgba(139, 58, 46, 0.94));
  color: #fff;
  box-shadow: 0 8px 24px rgba(117, 36, 24, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(6px);
}

.guest-greeting__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  font-size: 14px;
  line-height: 1;
}

.guest-greeting__text {
  min-width: 0;
  text-align: left;
}

.guest-greeting__label {
  display: block;
  font-family: Jura, sans-serif;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.88;
  margin-bottom: 2px;
}

.guest-greeting__name {
  display: block;
  font-family: Rokkitt, "Times New Roman", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  word-break: break-word;
}

#HEADLINE439 .ladi-headline {
  text-align: center;
}

#HEADLINE439 .guest-invitation-label,
#HEADLINE439 .guest-invitation-name {
  display: block;
}

#HEADLINE439 .guest-invitation-label {
  white-space: nowrap;
  font-family: "VVZOIEhvYSBUYXkgMSdGY", "Times New Roman", serif;
  font-size: clamp(28px, 7.2vw, 34px);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: 0;
  margin-bottom: 5px;
}

#HEADLINE439 .guest-invitation-name {
  overflow-wrap: break-word;
  word-break: normal;
  font-family: "VVZOQnVjVGhLnRZg", Georgia, serif;
  font-size: clamp(34px, 8.2vw, 40px);
  font-weight: 400;
  line-height: 1.23;
  letter-spacing: 0;
  color: rgb(117, 36, 24);
}

#PARAGRAPH243 .wedding-event-title {
  font-weight: 700;
}

#GROUP264.has-guest-name {
  height: auto !important;
  min-height: 145px;
}

#HEADLINE440.is-guest-personalized {
  height: auto !important;
  width: 100% !important;
  left: 0 !important;
  padding: 0 10px;
  box-sizing: border-box;
}

#HEADLINE440.is-guest-personalized > .ladi-headline {
  white-space: normal !important;
  word-break: break-word;
  font-size: clamp(22px, 6vw, 27px) !important;
  line-height: 1.35 !important;
  color: rgb(117, 36, 24) !important;
  letter-spacing: 1px !important;
}

/* ==========================================================================
   Thiệp 2 bên: Nhà Trai (mặc định) / Nhà Gái — guest.js đặt
   <html data-invite-side="nha_gai"> theo nhóm của khách.
   ========================================================================== */
html:not([data-invite-side="nha_gai"]) .side-gai,
html[data-invite-side="nha_gai"] .side-trai {
  display: none !important;
}

/* Tránh nháy thiệp nhà trai khi khách nhà gái đang chờ API */
html.invite-side-pending #SECTION1 .ladi-container,
html.invite-side-pending #SECTION2 #GROUP168 {
  visibility: hidden !important;
}

/* Thiệp nhà gái: họ nhà gái bên trái, nhà trai bên phải */
html[data-invite-side="nha_gai"] #GROUP124 {
  left: 0 !important;
}
html[data-invite-side="nha_gai"] #GROUP148 {
  left: 50% !important;
}

.family-address {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: #6b4f4f;
}

/* "Thứ Nam ♥ Trưởng Nữ" giữa tên hai bạn */
#HEADLINE330 .couple-connector {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}
.couple-role {
  font-family: Jura, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
  color: #6b4f4f !important;
  min-width: 80px;
}
.couple-role:first-child {
  text-align: right;
}
.couple-role:last-child {
  text-align: left;
}

/* "… Lễ Tân Hôn của con chúng tôi" xuống 2 dòng → đẩy tên & lời mời xuống */
#GROUP264 {
  top: 262px !important;
}
#HEADLINE330 {
  top: 365px !important;
}
#HEADLINE331 {
  top: 455px !important;
}
#HEADLINE439 {
  top: 550px !important;
}
/* Tab + thẻ lịch theo số đo mẫu gốc (thẻ 588px, sự kiện cách đỉnh 52px) */
#GROUP305 {
  top: 655px !important;
  height: 94px !important;
}
#TIECNHATRAI,
#TIECNHAGAI {
  top: 767px !important;
  left: 15.5px !important;
}
#BOX112,
#BOX114 {
  width: 387.5px !important;
  height: 588px !important;
}
#GROUP316,
#GROUP330 {
  top: 52px !important;
  left: 36.2px !important;
}
#GROUP339 {
  top: 0 !important;
}
#SECTION1 {
  min-height: 1385px;
}

/* Lịch tháng 11/2026: trái tim ở ô 14 (T7, hàng 3) — đổi chỗ với ô 22 */
#HEADLINE474 {
  top: 70.49px !important;
  left: 249.85px !important;
}
#HEADLINE469 {
  top: 100.77px !important;
  left: 302.43px !important;
}
/* Ngày 30 dồn lên ô T2 hàng đầu (tháng 11 cần 6 hàng) */
#HEADLINE496 {
  left: 5.09px !important;
}
/* Hai cột bố mẹ + địa chỉ đều căn giữa dưới tiêu đề NHÀ TRAI / NHÀ GÁI,
   bất kể bên nào nằm trái hay phải */
#PARAGRAPH154 > .ladi-paragraph,
#PARAGRAPH182 > .ladi-paragraph {
  text-align: center !important;
}

/* Avatar mừng cưới: ảnh vuông khớp đúng khung tròn, căn giữa (thấy cả người) */
#IMAGE87 > .ladi-image > .ladi-image-background,
#IMAGE91 > .ladi-image > .ladi-image-background {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* Khung địa điểm Nhà Trai = kích thước khung Nhà Gái (bản clone đã kéo cao cho thẻ 1 sự kiện) */
#BOX113 {
  height: 162.5px !important;
}
#GROUP323 {
  height: 131.6px !important;
}
#BUTTON26 {
  top: 101.14px !important;
  left: 90.5px !important;
}
#PARAGRAPH323,
#PARAGRAPH333 {
  top: 66px !important;
}