/* ===== 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: hidden; position: relative;
    border: 1px dashed #ccc; background: rgba(255,255,255,0.9); border-radius: 8px;
    font-family: "Times New Roman", serif;
  }
  #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) */
#GROUP124,
#GROUP148 {
  height: auto !important;
  min-height: 210px;
  overflow: visible;
  width: 195px !important;
}
#GROUP148 {
  left: 5px !important;
}
#GROUP124 {
  left: 218px !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;
}
/* Couple names below family address blocks */
#HEADLINE330,
#HEADLINE331 {
  top: 238px !important;
}
#GROUP264 {
  top: 318px !important;
}
#GROUP253 {
  top: 478px !important;
}
#IMAGE75 {
  top: 205px !important;
}
/* Photos block → invitation text → NHÀ TRAI/GÁI buttons */
#PARAGRAPH233 {
  top: 702px !important;
  z-index: 2;
}
#PARAGRAPH233 > .ladi-paragraph {
  color: #4a2c2c !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}
/* Ẩn chuyển Nhà Trai / Nhà Gái — chỉ 1 tiệc chung */
#GROUP305,
#GROUP306,
#GROUP307,
#GROUP308,
#GROUP309,
#GROUP310,
#GROUP311,
#GROUP312,
#PARAGRAPH283,
#TIECNHAGAI,
#NHAGAI,
#NHATRAI,
#GROUP325,
#GROUP339 {
  display: none !important;
}
/* Hiển thị lịch tiệc chung (Thành hôn) */
#TIECNHATRAI {
  display: block !important;
  top: 770px !important;
  z-index: 2 !important;
}
#SECTION1 {
  height: auto !important;
  min-height: 1380px;
}
#GROUP324,
#GROUP338,
#GROUP352,
#GROUP362 {
  height: auto !important;
  min-height: 148px;
}
#PARAGRAPH292,
#PARAGRAPH307,
#PARAGRAPH323,
#PARAGRAPH333 {
  top: 92px !important;
  height: auto !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;
}

#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;
}