.container-left {
    position: relative;
}

.container-left .animation-location {
    position: absolute;
}

.animate-map {
    animation: bounce 2s infinite;
}

.animate-mark_1 {
    animation: bounce 2.25s infinite;
}

.animate-mark_2 {
    animation: bounce 2.5s infinite;
}

.font-family {
    font-family: 'Inter';
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }

    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

#dang-nhap {
    background-color: #F89701;
    height: 2.6875rem;
}

#dang-nhap-fb {
    background: #007FF9;
}

#dang-nhap-gg {
    background: #FF0000;
}

select#business,
select#shipping-unit {
    background-image:
        linear-gradient(45deg, transparent 50%, gray 50%),
        linear-gradient(135deg, gray 50%, transparent 50%),
        linear-gradient(to right, #ccc, #ccc);
    background-position:
        calc(100% - 1.25rem) calc(1em + .125rem),
        calc(100% - .9375rem) calc(1em + .125rem),
        calc(100% - 2.5em) 0.5em;
    background-size:
        .3125rem .3125rem,
        .3125rem .3125rem,
        0 0;
    background-repeat: no-repeat;
}

/* Landing page */
@font-face {
    font-family: SVN-Poppins-Regular;
    /* 400 */
    src: url("../fonts/SVN-Poppins-Regular.otf");
}

@font-face {
    font-family: SVN-Poppins-Medium;
    /* 500 */
    src: url("../fonts/SVN-Poppins-Medium.otf");
}

@font-face {
    font-family: SVN-Poppins-SemiBold;
    /* 600 */
    src: url("../fonts/SVN-Poppins-SemiBold.otf");
}

@font-face {
    font-family: SVN-Poppins-Bold;
    /* 700 */
    src: url("../fonts/SVN-Poppins-Bold.otf");
}


#navbar-default ul li a,
#navbar-default ul li button,
.title-header p:last-child,
#free-sign-up,
.reviews p,
.instruction-header p {
    font-family: 'SVN-Poppins-Regular';
    line-height: 140%;
}

.header-container {
    background-image: url('../images/background-header.webp');
    background-repeat: no-repeat;
    /* Do not repeat the image */
    background-size: cover;
    /* Resize the background image to cover the entire container */
}

.title-header p:first-child {
    font-family: 'SVN-Poppins-Medium';
    line-height: 3.6875rem;
}

.title-header {
    width: 36.5625rem;
}

#free-sign-up {
    color: #E07A2E;
}

.mySwiper {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0px 100px 80px rgba(253, 160, 0, 0.07), 0px 41.7776px 33.4221px rgba(253, 160, 0, 0.0503198), 0px 22.3363px 17.869px rgba(253, 160, 0, 0.0417275), 0px 12.5216px 10.0172px rgba(253, 160, 0, 0.035), 0px 6.6501px 5.32008px rgba(253, 160, 0, 0.0282725), 0px 2.76726px 2.21381px rgba(253, 160, 0, 0.0196802);
    border-radius: 18.6047px;
}

.swiper-pagination {
    position: unset !important;
}

.instruction-header {
    color: #333333;
}

.instruction-header h2 {
    font-family: "SVN-Poppins-SemiBold";
}

.instruction-header p {
    opacity: 0.5;
}

.step {
    background: #FFFFFF;
    box-shadow: 0px 100px 80px rgb(253 160 0 / 7%), 0px 41.7776px 33.4221px rgb(253 160 0 / 5%), 0px 22.3363px 17.869px rgb(253 160 0 / 4%), 0px 12.5216px 10.0172px rgb(253 160 0 / 4%), 0px 6.6501px 5.32008px rgb(253 160 0 / 3%), 0px 2.76726px 2.21381px rgb(253 160 0 / 2%);
    border-radius: 24px;
    padding: 1rem;
}

.step h5 {
    font-family: "SVN-Poppins-SemiBold";
    font-style: normal;
    font-size: 18px;
    line-height: 19px;
    color: #333333;
}

.step p,
.outstanding-description p,
#outstanding-function a {
    font-family: 'SVN-Poppins-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #333333;
    opacity: 0.5;
}

.outstanding {
    border: 1px solid rgba(51, 51, 51, 0.1);
    border-radius: 99px;
    font-family: 'SVN-Poppins-Regular';
    opacity: 0.5;
}

.outstanding-description h5 {
    font-family: 'SVN-Poppins-SemiBold';
    line-height: 130%;
    color: #333333;
}

#outstanding-function a {
    width: 172px;
    height: 48px;
    background: linear-gradient(93.75deg, #ECAA2A 6.37%, #DE772D 95.89%);
    box-shadow: 0px 10px 20px rgba(255, 122, 0, 0.2);
    border-radius: 99px;
    color: #FFFFFF;
    opacity: 1;
}

#business-cooperation {
    background-image: url(../images/background-footer.webp);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    top: 125rem;
    width: 100%;
}

.frm-business {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0px 100px 80px rgba(98, 121, 235, 0.07), 0px 41.7776px 33.4221px rgba(98, 121, 235, 0.0503198), 0px 22.3363px 17.869px rgba(98, 121, 235, 0.0417275), 0px 12.5216px 10.0172px rgba(98, 121, 235, 0.035), 0px 6.6501px 5.32008px rgba(98, 121, 235, 0.0282725), 0px 2.76726px 2.21381px rgba(98, 121, 235, 0.0196802);
    border-radius: 24px;
}

.frm-business h1 {
    font-family: 'SVN-Poppins-SemiBold';
    font-size: 32px;
    line-height: 34px;
}

.frm-business h1 {
    font-family: 'SVN-Poppins-SemiBold';
    font-size: 32px;
    line-height: 34px;
}

.frm-business__description {
    font-family: 'SVN-Poppins-Regular';
    font-size: 16px;
    line-height: 140%;
}

.frm-business label {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
}

#send-message {
    font-family: 'SVN-Poppins-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #727FF6;
    width: 129px;
    height: 48px;
    border-radius: 99px;
}

.contact-us {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 99px;
}

.contact-us h4 {
    font-family: 'SVN-Poppins-Bold';
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    line-height: 140%;
}

.contact-us span {
    font-family: 'SVN-Poppins-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 140%;
}

#menu-bottom {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 99px;
    height: 4.5rem;
}

#menu-bottom ul li a {
    font-family: 'SVN-Poppins-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 140%;
    color: #FFFFFF;
}

#menu-bottom ul li:last-child a {
    color: #6C83F5;
}

#menu-bottom ul li:last-child a:hover {
    color: #FFFFFF;
}

.copyright {
    font-family: 'SVN-Poppins-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 160%;
    color: #FFFFFF;
    margin-top: 15px;
}

.rhombus-1 {
    bottom: -5rem;
    left: 11.5em;
    position: absolute;
}

.rhombus-2 {
    position: absolute;
    right: 10rem;
    top: -15px;
}

.pattern-pin {
    position: relative;
}

.pattern-pin .pattern-3 {
    position: absolute;
    top: 53.5rem;
    right: 8rem;
}

.pattern-pin .pin-3 {
    position: absolute;
    top: 58.6rem;
    right: 4rem;
}

.address-box {
    top: 42rem;
    left: 50rem;
}

.highlights {
    top: 2rem;
    left: 20rem;
}

a#free-sign-up:hover {
    color: #fff;
    background: linear-gradient(93.75deg, #ECAA2A 6.37%, #DE772D 95.89%);
    border: 1px solid #fff;
    animation: pulse 1s infinite;
    transition: .3s;
}

.outstanding-free-signup:hover {
    animation: pulse 1s infinite;
    transition: .3s;
}

.block-swiper {
    height: 46rem;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    70% {
        transform: scale(.9);
    }

    100% {
        transform: scale(1);
    }
}

/* Responsive */
@media screen and (max-width: 1920px) {

}

@media screen and (max-width: 1903px) {
    .rhombus-1  {
        bottom: -6rem !important;
    }
}

@media screen and (min-width: 1536px) and (max-width: 1639px) {
    .block-swiper {
        height: 40rem;
    }

    .div-address-box {
        bottom: -0.25rem !important;
    }

    .rhombus-1 {
        bottom: -4rem;
        left: 3.5em;
    }

    #business-cooperation {
        top: 121rem;
    }
}

@media screen and (min-width: 1441px) and (max-width: 1535px){
    .block-swiper {
        height: 37rem;
    }

    .div-address-box {
        bottom: -1.25rem;
    }

    .rhombus-1 {
        bottom: -1.5rem;
        left: 3.5em;
    }

    #business-cooperation {
        top: 118rem;
    }
}

@media screen and (max-width: 1440px) {
    .img-location img:first-child {
        right: 13rem;
    }

    .img-location img:last-child {
        top: -3rem;
        right: 8.5rem;
    }

    .address-box {
        top: 34rem;
        left: 36rem;
    }

    .rhombus-1 {
        bottom: -12rem;
        left: 6em;
    }

    .header-container img.pattern-1 {
        right: 30rem;
    }

    .rhombus-2 {
        right: 5rem;
        top: -40px;
    }

    .pattern-pin .pattern-3 {
        right: 4rem;
    }

    .pattern-pin .pin-3 {
        right: 0rem;
    }

    #instruction {
        /*margin-top: 3rem;*/
    }

    .animation-location img.animate-map {
        left: 29rem;
    }

    .animation-location img.animate-mark_1 {
        top: 415px;
        left: 130px;
    }

    .animation-location img.animate-mark_2 {
        left: 37.5rem;
        top: 36rem;
    }

    .block-swiper {
        height: 37rem;
    }

    #business-cooperation {
        top: 120rem;
    }

    .rhombus-1 {
        bottom: -1rem;
    }
}

@media screen and (max-width: 1366px) {
    .img-location img:first-child {
        right: 10rem;
    }

    .address-box {
        top: 34rem;
        left: 33.2rem;
    }

    .animation-location img.animate-map {
        left: 27rem;
    }

    .animation-location img.animate-mark_1 {
        left: 7.5rem;
        top: 26rem;
    }

    .animation-location img.animate-mark_2 {
        left: 35.5rem;
        top: 35rem;
    }

    .block-swiper {
        height: 36rem;
    }

    .rhombus-1 {
        bottom: 0rem;
        left: 6em;
    }
}

@media screen and (min-width: 1281px) and (max-width:1365px) {
    .img-location img:last-child {
        right: 8.5rem;
        top: -3rem;
    }

    .address-box {
        left: 30.5rem;
    }

    .rhombus-2 {
        top: -8px;
    }
}

@media screen and (max-width: 1280px) {
    .img-location img:first-child {
        right: 10rem;
    }

    .img-location img:last-child {
        right: 7.5rem;
        top: -3rem;
    }

    .address-box {
        top: 34.4rem;
        left: 31rem;
    }

    .rhombus-2 {
        right: 2.5rem;
        top: -12px;
    }

    .rhombus-1 {
        left: 2.5em;
    }

    .title-header {
        width: 30rem;
    }

    .header-container img.pattern-1 {
        right: 25rem;
    }

    .animation-location img.animate-map {
        left: 27rem;
    }

    .animation-location img.animate-mark_1 {
        left: 7.5rem;
        top: 26rem;
    }

    .animation-location img.animate-mark_2 {
        left: 33.5rem;
        top: 35rem;
    }
}

@media screen and (max-width: 1024px) {
    .img-location img:last-child {
        right: 30.5rem;
    }

    .div-address-box {
        display: none !important;
    }

    .title-header {
        width: 21rem;
    }

    .highlights {
        top: 6rem;
        left: 4.7rem;
    }

    .header-container img.pattern-1 {
        right: 18rem;
    }

    #business-cooperation {
        top: 112rem;
    }

    .rhombus-2 {
        top: 3rem;
    }

    .nav-bottom {
        flex-direction: column-reverse;
    }

    .nav-bottom__logo {
        margin-top: 3rem;
    }

    .animation-location img.animate-map {
        left: 22rem;
        width: 13%;
    }

    .animation-location img.animate-mark_1 {
        left: 2.5rem;
        top: 26rem;
    }

    .animation-location img.animate-mark_2 {
        left: 25.5rem;
        top: 34rem;
    }

    .container-right div.min-h-screen {
        padding: 2rem;
    }

    .img-location {
        display: none;
    }

    .rhombus-1 {
        bottom: -1rem;
    }
}

@media screen and (max-width: 834px) {
    .title-header {
        width: 100%;
    }

    .header-container div.container {
        margin: 3rem 0;
    }

    .highlights {
        top: 2rem;
        left: 20.5rem;
    }

    .header-container img.pattern-1 {
        right: 8rem;
    }

    #business-cooperation {
        top: 140rem;
    }

    .rhombus-2 {
        top: 5rem;
    }

    #business-cooperation div.container {
        padding-top: 0;
    }

    .pattern-pin .pin-3 {
        top: 54.6rem;
    }
}

@media screen and (max-width: 768px) {
    .nav-login {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .instruction-header p {
        padding: 0 3rem;
    }
}

@media screen and (max-width: 688px) {
    #navbar-default ul {
        background-color: #fff;
    }

    #navbar-default ul li a:not(.nav-login) {
        color: #3f4b66;
    }

    .nav-login {
        color: #fff;
        background: linear-gradient(93.75deg, #ECAA2A 6.37%, #DE772D 95.89%);
    }

    .step {
        margin: 0 auto;
    }

    .outstanding-content {
        flex-direction: column;
    }

    .outstanding-content div:first-child,
    .outstanding-content div:last-child {
        width: 100%;
    }

    #business-cooperation {
        top: 162rem;
    }
}

@media screen and (max-width: 425px) {
    .highlights {
        top: 6rem;
        left: 4.5rem;
    }

    .header-container img.pattern-1 {
        right: 0rem;
    }

    .outstanding-content svg {
        margin-left: 5rem;
    }

    .frm-business {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .contact-us {
        width: 22rem !important;
    }

    .rhombus-1 {
        bottom: 8rem;
        left: 2.5em;
    }

    #business-cooperation {
        top: 173rem;
    }

    .rhombus-2 {
        top: 7rem;
        right: 0.5rem;
    }

    .outstanding-content svg {
        margin-left: 1rem;
    }

    .outstanding-content div:first-child {
        padding: 0 1rem;
    }

    .outstanding-content div:last-child img {
        margin-top: 2.5rem;
    }

}

@media screen and (max-width: 414px) {
    .outstanding-content svg {
        margin-left: 0rem;
    }

    .rhombus-1 {
        bottom: 10rem;
    }
}

@media screen and (max-width: 375px) {
    .rhombus-1 {
        bottom: 10rem;
    }

    .contact-us {
        width: 19rem !important;
    }

    .outstanding-content svg {
        width: 95%;
    }

    #business-cooperation {
        top: 182rem;
    }

    .header-container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    .group-card-instruction {
        padding: 1rem;
    }

    #business-cooperation div.container {
        padding-bottom: 2rem;
    }
}

@media screen and (max-width: 320px) {
    .contact-us {
        width: 16rem !important;
    }

    .rhombus-2 {
        right: 0rem;
    }

    .rhombus-1 {
        bottom: 4.5rem;
        left: 1.5rem;
    }
}

@media (min-width: 1920px) {
    /*.rhombus-1  {*/
    /*    bottom: 8rem;*/
    /*}*/

    .header-container__div {
        margin-top: 6rem !important;
    }
}