.invitation-container{
        width: 100%;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        margin-right: auto;
        margin-left: auto;
        position: relative;
        padding: 10px 10px;
        justify-content: center;
        flex-wrap: wrap;
        padding-bottom: 85px;
    }
    .invitation-container .invitation-card{
        max-width: 100%;
        max-height: 100%;
        box-shadow: 0 4px 12px 0 rgb(0 0 0 / 100%);
        margin:auto;
        max-height: calc(100vh - 120px);
    }
    @media (min-width: 1200px) {
    .invitation-container .invitation-card {max-width: 100%;}
  }
  @media (min-width: 1400px) {
    .invitation-container .invitation-card {max-width: 430px;}
  }
  @media (min-width: 1500px) {
    .invitation-container .invitation-card {max-width: 460px;}
  }
  @media (min-width: 1600px) {
    .invitation-container .invitation-card {max-width: 495px;}
  }
  @media (min-width: 1700px) {
    .invitation-container .invitation-card {max-width: 530px;}
  }
  @media (min-width: 1900px) {
    .invitation-container .invitation-card {max-width: 595px;}
  }
  @media (min-width: 2200px) {
    .invitation-container .invitation-card {max-width: 695px;}
  }
  @media (min-width: 2500px) {
    .invitation-container .invitation-card {max-width: 795px;}
  }
  @media (min-width: 2600px) {
    .invitation-container .invitation-card {max-width: 800px;}
  }

    .footer {
        font-size: 15px;
        background-color: #474050;
        /* padding: 10px 10px; */
        color: #fff;
        text-align: center;
        letter-spacing: 1px;
        position: fixed;
        width: 100%;
        bottom: 0;
        line-height: 25px;
    }

    .mouse-scroll {
      width: 105px;
      height: 30px;
      margin: 0 0 0 -30px;
      position: fixed;
      right: calc(50% - 52px);
      bottom: 80px;
      -webkit-animation: arrow 0.5s 1s infinite ease-out alternate;
  }
  
  .mouse-scroll:hover {
      -webkit-animation-play-state: paused;
  }
  .mouse-scroll .text {
      text-align: center;
      bottom: 120px;
      position: absolute;
      left: 1px;
      background: #fff;
      padding: 4px 14px;
      font-size: 15px;
  }
  .mouse-scroll .left {
      position: absolute;
      height: 5px;
      width: 30px;
      background: #de4659;
      -webkit-transform: rotate(240deg);
      bottom: 80px;
      left: 46px;
      -webkit-border-radius: 4px;
      -webkit-transform-origin: 5px 50%;
      -webkit-animation: leftArrow 0.5s 1s infinite ease-out alternate;
  }
  
  .mouse-scroll .right {
      position: absolute;
      height: 5px;
      width: 30px;
      background: #de4659;
      -webkit-transform: rotate(-60deg);
      bottom: 80px;
      left: 50px;
      -webkit-border-radius: 4px;
      -webkit-transform-origin: 5px 50%;
      -webkit-animation: rightArrow 0.5s 1s infinite ease-out alternate;
  }

    @-webkit-keyframes arrow{
    0% {
        bottom:0px;
    }
    100%{
        bottom:40px;
    }
    }
    @-webkit-keyframes leftArrow{
    0% {
    }
    100%{
        -webkit-transform:rotate(225deg);
    }
    }
    @-webkit-keyframes rightArrow{
    0% {
    }
    100%{
        -webkit-transform:rotate(-45deg);
    }
    }
    .page_loader2 {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: #fae1dd;
        z-index: 9999991;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .transition {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        display: flex;
        z-index: 9999995;
        justify-content: center;
        align-items: center;
        pointer-events: none;
    }


    .invitation-preload-container {
        position: relative;
    }

    .invitation-valentines {
        position: relative;
        top: 50px;
        cursor: pointer;
        animation: up 3s linear infinite;
    }

    @keyframes up {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-30px);
        }
    }


    .invitation-preload-envelope {
        position: relative;
        width: 300px;
        height: 200px;
        background-color: #f08080;
    }

    .invitation-preload-envelope:before {
        background-color: #f08080;
        content: "";
        position: absolute;
        width: 212px;
        height: 212px;
        transform: rotate(45deg);
        top: -105px;
        left: 44px;
        border-radius: 30px 0 0 0;
    }

    .invitation-preload-card {
        position: absolute;
        background-color: #eae2b7;
        font-family: "Dosis", sans-serif;
        width: 270px;
        height: 170px;
        top: 5px;
        left: 15px;
        box-shadow: -5px -5px 100px rgba(0, 0, 0, 0.4);
    }

    .invitation-preload-card:before {
        content: "";
        position: absolute;
        border: 2px solid #003049;
        border-style: double;
        width: 240px;
        heighT: 140px;
        left: 12px;
        top: 12px;
    }

    .invitation-text span{font-family:'Coiny'}
    .invitation-text {
        position: absolute;
        font-family: "Dosis", sans-serif;
        font-size: 16px;
        text-align: center;
        line-height: 25px;
        top: 23px;
        color: #003049;
        padding: 0 6px;
        width: 240px;
        left: 12px;
    }

    .invitation-text .guest-name {
        font-family: "Great Vibes", cursive;
        font-size: 18px;
    }

    .invitation-preload-heart {
        height: 30px;
        margin: 0 10px;
        position: relative;
        top: 110px;
        left: 105px;
        width: 30px;
    }


    .invitation-hearts {
        position: absolute
    }

    .invitation-one,
    .invitation-two,
    .invitation-three,
    .invitation-four,
    .invitation-five {
        background-color: red;
        display: inline-block;
        height: 10px;
        margin: 0 10px;
        position: relative;
        transform: rotate(-45deg);
        width: 10px;
        top: 50px;
    }

    .invitation-one:before,
    .invitation-one:after,
    .invitation-two:before,
    .invitation-two:after,
    .invitation-three:before,
    .invitation-three:after,
    .invitation-four:before,
    .invitation-four:after,
    .invitation-five:before,
    .invitation-five:after {
        content: "";
        background-color: red;
        border-radius: 50%;
        height: 10px;
        position: absolute;
        width: 10px;
    }

    .invitation-one:before,
    .invitation-two:before,
    .invitation-three:before,
    .invitation-four:before,
    .invitation-five:before {
        top: -5px;
        left: 0;
    }

    .invitation-one:after,
    .invitation-two:after,
    .invitation-three:after,
    .invitation-four:after,
    .invitation-five:after {
        left: 5px;
        top: 0;
    }

    .invitation-one {
        left: 10px;
        animation: heart 1s ease-out infinite;
    }

    .invitation-two {
        left: 30px;
        animation: heart 2s ease-out infinite;
    }

    .invitation-three {
        left: 50px;
        animation: heart 1.5s ease-out infinite;
    }

    .invitation-four {
        left: 70px;
        animation: heart 2.3s ease-out infinite;
    }

    .invitation-five {
        left: 90px;
        animation: heart 1.7s ease-out infinite;
    }

    @keyframes heart {
        0% {
            transform: translateY(0) rotate(-45deg) scale(0.3);
            opacity: 1;
        }

        100% {
            transform: translateY(-150px) rotate(-45deg) scale(1.3);
            opacity: 0.5;
        }
    }

    .invitation-front {
        position: absolute;
        border-right: 180px solid #f4978e;
        border-top: 95px solid transparent;
        border-bottom: 100px solid transparent;
        left: 120px;
        top: 5px;
        width: 0;
        height: 0;
        z-index: 10;
    }

    .invitation-front:before {
        position: absolute;
        content: "";
        border-left: 300px solid #f8ad9d;
        border-top: 195px solid transparent;
        left: -120px;
        top: -95px;
        width: 0;
        height: 0;
    }
    
    .invitation-front img.logo{width: 115px;position: absolute;left: -95px;top: 50px;}

    .invitation-shadow {
        position: absolute;
        width: 330px;
        height: 25px;
        border-radius: 50%;
        background-color: rgba(0, 0, 0, 0.3);
        top: 265px;
        left: -15px;
        animation: scale 3s linear infinite;
        z-index: -1;
    }

    @keyframes scale {

        0%,
        100% {
            transform: scaleX(1);
        }

        50% {
            transform: scaleX(0.85);
        }
    }
    .modal-backdrop{z-index: 100010!important;}
    .modal{z-index: 100011!important;}
    .wedding-image {
        width: auto !important;
        height: auto !important;
        max-height: fit-content;
    }
    .btn-invitepro-function {
        min-width: 215px;
    }

    @media (max-width: 767px) {
        .btn-invitepro-function {
            min-width: 125px;
        }
    }

    #card-content {
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: none;
      transition: opacity 0.8s ease;
      z-index: 20;
    }

    #heart {
      position: absolute;
      font-size: 50px;
      color: pink;
      z-index: 30;
      opacity: 0;
      transform: scale(1);
      transition: transform 1s ease, opacity 1s ease;
    }

    #heart.active {
      opacity: 1;
      transform: scale(60); /* đủ to để phủ màn hình */
    }

    #heart.fadeout {
      opacity: 0;
      transition: opacity 1s ease;
    }


#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
  padding: 20px;
  box-sizing: border-box;
  transition: opacity 0.4s ease;
  opacity: 1;
  z-index: 999999;
}

#overlay.fadein {
  opacity: 1;
  transition: opacity 0.5s ease;
}

#overlay.fadeout {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Dialog container */
#invitation-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0px;
  gap: 20px;
  flex-wrap: nowrap; /* 2 ảnh ngang desktop */
  max-width: 1000px;
  width: 100%;
}


/* Thiệp */
.notice, .invitation {
    position: relative;
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#invitation-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* Text */
.guest-name, .host-name {
  margin-top: 10px;
  text-align: center;
  font-family: sans-serif;
}

/* Mobile / màn hình hẹp */
@media (max-width: 700px) {
  #overlay {
    overflow: auto;        /* scroll overlay nếu nội dung dài */
    align-items: flex-start;
    padding-top: 40px;
    padding-bottom: 30%;
  }
  #invitation-wrapper {
    flex-direction: column; /* 2 ảnh xếp dọc */
    align-items: center;
    margin-top: 80px;
  }
  .notice, .invitation {
    max-width: 90%;
  }
}

#guest-name {
  position: absolute;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  font-family: "Great Vibes", cursive;
  font-weight: bold;
}

#host-name {
  position: absolute;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  font-family: "Great Vibes", cursive;
}

.invitation-front{z-index: 10;}
.invitation-front:before{z-index: 12;}
.invitation-preload-card:before{border: 2px solid #5c1921;}
.invitation-front img.logo{z-index: 13;}


@mixin transition() {
    transition: all .4s cubic-bezier(.215,.61,.355,1);
}


.close-button {
    display: none;
    flex-direction: row;
    align-items: center;
    position: fixed;
    top: 0px;
    right: 0px;
}


.close-button button {
    transform: scale(0.6);
    width: 100px;
    height: 100px;
    background-color: #fff;
    border-radius: 50%;
    opacity: 1;
    @include transition();
    box-shadow: 0 0 30px rgba(247, 149, 29, 0.5);

    &>span {
        background-color: #f5a700;
        display: block;
        height: 12px;
        border-radius: 6px;
        position: relative;
        @include transition();
        position: absolute;
        top: 50%;
        margin-top: -6px;
        left: 18px;
        width: 64px;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-justify-content: space-between;
        justify-content: space-between;
        -moz-justify-content: space-between;
        -ms-justify-content: space-between;

        span {
            display: block;
            background-color: #ed7f00;
            width: 12px;
            height: 12px;
            border-radius: 6px;
            @include transition();
            position: absolute;
            left: 0;
            top: 0;
        }

        &.left {
            transform: rotate(45deg);
            transform-origin: center;

            .circle-left {
                @include transition();
                margin-left: 0;
            }

            .circle-right {
                @include transition();
                margin-left: 52px;
            }
        }

        &.right {
            transform: rotate(-45deg);
            transform-origin: center;

            .circle-left {
                @include transition();
                margin-left: 0;
            }

            .circle-right {
                @include transition();
                margin-left: 52px;
            }
        }
    }

    &:hover {
        &>span {
            background-color: #2faee0;
            @include transition();

            span {
                @include transition();
                background-color: #008ac9;
            }

            &.left {

                .circle-left {
                    @include transition();
                    margin-left: 52px;
                }

                .circle-right {
                    @include transition();
                    margin-left: 0;
                }
            }

            &.right {

                .circle-left {
                    @include transition();
                    margin-left: 52px;
                }

                .circle-right {
                    @include transition();
                    margin-left: 0;
                }
            }
        }
    }
}


.close-button .close-text {
  font-size: 14px;
  color: #e74c3c; /* đỏ nhẹ */
  font-weight: 500;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
  cursor: pointer;
  animation: wiggle 3s infinite;
}

@keyframes wiggle {
  0%, 50%, 100% { transform: translateX(0); }
  25% { transform: translateX(5px); }
}

.hidden {
    display: none;
}

.flex-center {
    display: flex;
    justify-content: center;   /* căn giữa ngang */
    align-items: center; 
}

.scale-30 {
    transform: scale(0.3);
}

.margin-top-40 {
    margin-top: 40px;
}

.btn-invitation-small {
    position: fixed;
    bottom: 20px;
    left: -50px;
    z-index: 99;
}

.btn-close-invitation-large {
  background-color: #e74c3c; /* đỏ */
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  padding: 12px 16px;
  width: 50%;             /* mobile: nửa màn hình */
  max-width: 100%;
  margin: 50px auto;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.btn-close-invitation-large:hover {
  background-color: #c0392b;
  transform: scale(1.02);
}

/* 💻 PC (>=768px): cố định 200px */
@media (min-width: 700px) {
  .btn-close-invitation-large {
    display: none;
  }

  .close-button {
    display: flex;
  }
}