/* PC */
@media screen and (min-width: 992px) {
    .show-mobile {
        display: none;
    }

    .caption__svg-icon {
        width: 200px;
        height: 200px;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-40%);
    }

    .section4 .list-imgs {
        max-height: 500px;
    }

    .section4 .img {
        width: 300px;
        height: 100%;
    }

    .section4 .list-imgs.list-imgs--row {
        height: 60vh;
    }

    .section4 .list-imgs.list-imgs--row .img {
        height: 100%;
        width: auto;
    }
}

/* Tablet & mobile */
@media screen and (max-width: 991.98px) {
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 991.98px) {
}

/* Mobile */
@media screen and (max-width: 767.98px) {
    .hide-mobile {
        display: none;
    }

    .size-20-mobile {
        font-size: 2rem;
    }

    .input,
    .btn,
    .select {
        margin-top: 20px;
    }

    .header__background {
        position: absolute;
        background-image: url(../img/background/header_bg_mobile.webp);
        background-position: 50% 50%;
        z-index: -1;
    }
    .header__des {
        font-size: 1.2rem;
        text-align: center;
    }

    .header__submit-text {
        font-size: 2.5rem;
        max-width: calc(100% - 28px);
    }

    .header__form-label {
        flex-direction: column;
        align-items: start;
    }

    .bg-img {
        background: url(../img/couple/VIEN4532-min.webp);
        background-size: cover;
        background-repeat: no-repeat;
        object-fit: cover;
    }

    /* Info days */
    .info-days {
        flex-direction: column;
        background: url(../img/background/bg_02.jpg);
        background-size: cover;
        background-position: 50% 50%;
    }

    .info-day__dl {
        font-size: 4rem;
        color: orange;
    }

    .info-day__label {
        font-size: 1.6rem;
    }

    /* Caption */
    .caption__heading {
        font-size: 10rem;
    }

    .caption__names {
        top: 20%;
        gap: 0px;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .caption__name-item {
        font-size: 5rem;
    }

    .caption__img-icon {
        width: 100%;
    }

    .caption__svg-icon {
        width: 300px;
        height: 300px;
        align-items: center;
        text-align: center;

        padding: 10px;
        margin-top: 40px;
        border-radius: 50%;
    }

    /* Section 0 */
    .title .wrapper {
        width: 300px;
        height: 200px;
        top: -270px;
    }

    .title .wrapper::before {
        width: 200px;
        height: 200px;
        animation-duration: 4s;
        opacity: 0;
    }

    .title .heading {
        font-size: 3rem;
    }

    .title .heading,
    .title .desc {
        position: relative;
        top: 0;
    }

    .title .desc {
        color: #333;
        text-shadow: none;
    }

    /* Section 1 */
    .section1 .img {
        display: none;
    }

    .section1 .desc {
        max-width: calc(100vw - 20px);
        margin: auto 20px;
    }

    .section2 {
        padding: 10px;
    }

    .section2 .passport {
        flex-direction: column;
    }

    .section2 .passport .img {
        width: 100%;
        max-width: 100%;
    }

    .section2 .ticket {
        width: 100%;
    }

    .section3 {
        height: auto;
        padding: 40px 0;
        padding-bottom: 100px;
    }

    .section3 .wrapper {
        width: 96%;
        box-shadow: 0px 0px 4px #999;
    }

    .section3 .heading {
        margin-bottom: 50px;
    }

    .section3 .airplane {
        z-index: 1;
    }

    .section3 .maps {
        width: 100%;
    }

    .section3 .link {
        width: 100%;
        bottom: -60px;
        text-align: center;
        box-shadow: 0px 0px 4px #999;
        border: none;
        border-radius: 999px;
    }

    .section3 .link:hover {
        background-color: #ff3a3a;
    }

    .section4 {
        padding: 10px;
        padding-bottom: 40px;
        flex-direction: column;
    }

    .section4 .list-imgs {
        /* flex-direction: column; */
    }

    .section4 .img {
        width: 85%;
        height: 100%;
    }

    .section5 {
        max-width: 100%;
        height: auto;
    }

    .section5 .desc {
        width: 360px;
        text-align: justify;
    }

    .section5 .items {
        flex-direction: column;
        row-gap: 30px;
    }

    .section5 .countdown {
        max-width: 100vw;
        height: 500px;
    }

    .section5 .countdown .box {
        background: url(../img/couple/VIEN4918-min.webp);
        background-size: cover;
        object-fit: cover;
        max-width: calc(100vw - 40px);
        height: 460px;
        /* max-height: calc(100% - 20px); */
    }

    .section5 .info-accept {
        width: calc(100% - 20px);
    }

    .section5 .actions {
        gap: 10px;
    }

    .section5 .info-accept span {
        font-size: 1.2rem;
    }

    .section6 .wrapper {
        max-width: calc(100% - 20px);
    }

    .section7 .desc {
        width: calc(100% - 20px);
        text-align: justify;
    }

    .section7 .heading {
        font-size: 6rem;
        text-shadow: 1px 1px #fff;
    }

    .section7 .couple {
        font-size: 2rem;
    }

    .animation__heading {
        margin-bottom: 30px;
    }

    @keyframes animationLeftRight {
        0% {
            left: -20%;
            opacity: 0;
            transform: scaleX(-1) translateY(100px);
        }
        1% {
            left: -20%;
            opacity: 1;
            transform: scaleX(-1) translateY(100px);
        }
        90% {
            left: 20%;
            opacity: 1;
            transform: scaleX(-1) translateY(0px);
        }
        100% {
            left: 50%;
            opacity: 0;
            transform: scaleX(-1) translateY(0px);
        }
    }
}