/*--------------------------------------------------------------------------
|  Header
--------------------------------------------------------------------------*/
.setting-menu.fix {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

.bg-logo {
    background: #ffffff;
}

.item-transport {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.icon-box-text {
    color: #d6372f;
    font-size: 1.6rem;
}

.icon-box-text strong {
    background: linear-gradient(96.09deg, #d6372f -4.82%, #d6372f -4.82%, #d6372f 106.63%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 2rem;
    font-weight: 900;
}

.info-hotline {
    text-align: center;
    background: linear-gradient(96.09deg, #FFE246 -4.82%, #FEE89A -4.82%, #FFC700 106.63%);
    box-shadow: 0px 29px 8px rgb(255 174 0 / 1%), 0px 19px 7px rgb(255 174 0 / 6%), 0px 10px 6px rgb(255 174 0 / 20%), 0px 5px 5px rgb(255 174 0 / 34%), 0px 1px 3px rgb(255 174 0 / 39%), 0px 0px 0px rgb(255 174 0 / 40%);
    border-radius: 100px;
    color: #915E22 !important;
    font-weight: 700;
    font-size: 2.5rem;
    letter-spacing: 0;
    padding: 1rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.info-hotline i {
    font-size: 3rem;
}

.animation-pulse {
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

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

    50% {
        transform: scale(0.85);
    }

    to {
        transform: scale(1);
    }
}
/*--------------------------------------------------------------------------
|  Main
--------------------------------------------------------------------------*/

/*Call now*/
.zalo .call-now {
    bottom: 100px;
}

#zalo-vr, #messenger-vr {
    transition: 1s all;
    -moz-transition: 1s all;
    -webkit-transition: 1s all;
}

#phone-vr {
    transition: 0.7s all;
    -moz-transition: 0.7s all;
    -webkit-transition: 0.7s all;
}

.button-contact .phone-vr {
    position: relative;
    visibility: visible;
    background-color: transparent;
    width: 80px;
    height: 80px;
    cursor: pointer;
    z-index: 11;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transition: visibility .5s;
    left: 0;
    bottom: 0;
    display: block;
}

.phone-vr-circle-fill {
    width: 65px;
    height: 65px;
    top: 12px;
    left: 12px;
    position: absolute;
    box-shadow: 0 0 0 0 #c31d1d;
    background-color: rgba(230, 8, 8, 0.7);
    border-radius: 50%;
    border: 2px solid transparent;
    -webkit-animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    animation: phone-vr-circle-fill 2.3s infinite ease-in-out;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-animuiion: zoom 1.3s infinite;
    animation: zoom 1.3s infinite;
}

#zalo-vr .phone-vr-circle-fill, #messenger-vr .phone-vr-circle-fill {
    box-shadow: 0 0 0 0 #2196f3;
    background-color: rgba(33, 150, 243, 0.7);
}

.phone-vr-img-circle {
    background-color: #e60808;
    width: 40px;
    height: 40px;
    line-height: 40px;
    top: 25px;
    left: 25px;
    position: absolute;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    -webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
    animation: phone-vr-circle-fill 1s infinite ease-in-out;
}

#zalo-vr .phone-vr-img-circle, #messenger-vr .phone-vr-img-circle {
    background-color: #2196F3;
}
#tiktok-vr .phone-vr-circle-fill {
    box-shadow: 0 0 0 0 #2196f3;
    background-color: rgb(181 191 199 / 70%);
}
#tiktok-vr .phone-vr-img-circle {
    background-color: #d7dfe6;
}
.phone-vr-img-circle a {
    display: block;
    line-height: 37px;
}

.phone-vr-img-circle img {
    max-height: 25px;
    max-width: 27px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
}

@-webkit-keyframes phone-vr-circle-fill {
    0% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }

    10% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }

    20% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }

    30% {
        -webkit-transform: rotate(-25deg) scale(1) skew(1deg);
    }

    40% {
        -webkit-transform: rotate(25deg) scale(1) skew(1deg);
    }

    50% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }

    100% {
        -webkit-transform: rotate(0) scale(1) skew(1deg);
    }
}

@-webkit-keyframes zoom {
    0% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px transparent;
    }

    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 transparent;
    }
}

@keyframes zoom {
    0% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 15px transparent;
    }

    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 transparent;
    }
}

.bg-header {
    background: #0f304b;
}

.fixed-contact {
    position: fixed;
    right: 10px;
    bottom: 15px;
    cursor: pointer;
    z-index: 9999 !important;
}

.phone-number {
    width: 160px;
    position: absolute;
    top: 50%;
    right: 45%;
    padding: 9px 40px;
    padding-left: 15px;
    border-radius: 15px;
    background: #e60808;
    color: #fff;
    font-weight: 600;
    transform: translateY(-50%);
}


.banner-main {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 3rem 0;
}

.banner-layers {
    text-align: center;
    color: white;
}

.banner-layers h1 {
    font-family: "Noto Serif", serif;
    background: linear-gradient(90deg, #B57E10 0%, #E5C35C 22%, #F9DF7B 33%, #FFF3A6 52%, #F9DF7B 73%, #B57E10 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 4.5rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.banner-layers h2 {
    background: linear-gradient(90deg, #B57E10 0%, #E5C35C 22%, #F9DF7B 33%, #FFF3A6 52%, #F9DF7B 73%, #B57E10 100%);
    border: 3px solid;
    border-image: linear-gradient(to right, #ffeb3b, #B57E10) 1;
    font-weight: 700;
    letter-spacing: 1px;
    color: #7C501D;
    padding: 1rem;
    font-size: 2rem;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.text-1 {
    font-family: "Lobster", sans-serif;
    font-size: 4rem;
}

.sub-text-1 {
    font-size: 1.8rem;
}

.sub-text-2 {
    text-transform: uppercase;
    font-size: 1.8rem;
}

.btn-contact {
    text-align: center;
    background: linear-gradient(96.09deg, #FFE246 -4.82%, #FEE89A -4.82%, #FFC700 106.63%);
    box-shadow: 0px 29px 8px rgb(255 174 0 / 1%), 0px 19px 7px rgb(255 174 0 / 6%), 0px 10px 6px rgb(255 174 0 / 20%), 0px 5px 5px rgb(255 174 0 / 34%), 0px 1px 3px rgb(255 174 0 / 39%), 0px 0px 0px rgb(255 174 0 / 40%);
    border-radius: 100px;
    color: #915E22 !important;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 0;
    padding: 1rem 2rem;
    display: inline-block;
}

.bg-content {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3rem 0;
}

.title-policy {
    font-family: "Noto Serif", serif;
    font-size: 3rem;
    color: var(--color-main);
    font-weight: 500;
    margin-bottom: 2rem;
}

.item-policy {
    background: #FFFFFF;
    box-shadow: 0px 23px 9px rgba(0, 0, 0, 0.01), 0px 13px 8px rgba(0, 0, 0, 0.05), 0px 6px 6px rgba(0, 0, 0, 0.09), 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
    border-radius: 1.6rem;
    padding: 2rem;
    text-align: center;
}

.item-policy img {
    width: 10rem;
    height: 10rem;
    object-fit: contain;
    aspect-ratio: 1/1;
}

.policy--tile {
    font-size: 2rem;
    font-weight: bold;
    margin-top: 1rem;
}

.about-box {
    padding: 6rem 0 8rem;
}

.about-box .title-section {
    color: #F4DC7E;
    font-family: "Noto Serif", serif;
}

.about-layers {
    color: white;
}

.title-about {
    font-weight: 700;
    font-size: 2.4rem;
}

.title-sub-about {
    border: 2px solid #F4DC7E;
    display: inline-block;
    padding: .5rem 2.5rem;
    border-radius: 25px;
    color: #F4DC7E;
    font-weight: 500;
    margin: 2rem 0;
    font-size: 1.8rem;
}

.content-about {
    font-size: 1.6rem;
    max-width: 450px;
}

.item-commit {
    background: #FFFFFF;
    box-shadow: 0px 23px 9px rgb(0 0 0 / 1%), 0px 13px 8px rgb(0 0 0 / 5%), 0px 6px 6px rgb(0 0 0 / 9%), 0px 1px 3px rgb(0 0 0 / 10%), 0px 0px 0px rgb(0 0 0 / 10%);
    border-radius: 1rem;
    padding: 2rem;
    margin-bottom: 6rem;
}

.title-commit {
    background-image: url(https://cdn3766.cdn4s7.io.vn/media/template/bg-title.svg);
    background-size: contain;
    background-position-x: center;
    background-position-y: top;
    background-repeat: no-repeat;
    line-height: 6.8rem;
    color: #F3D972;
    font-size: 2rem;
    text-align: center;
    margin-top: -5rem;
    font-weight: bold;
}

.desc-commit {
    font-size: 1.6rem;
    text-align: justify;
    margin-top: 1rem;
}

.commit-box .title-section {
    font-family: "Noto Serif", serif;
    color: var(--color-main);
}

.commit-box .title-section-sub {
    font-size: 2rem;
    font-weight: bold;
    color: var(--color-main);
}

.item-countdown {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 2rem;
    border-radius: 2rem;
    overflow: hidden;
}

.title-countdown {
    font-family: "Noto Serif", serif;
    color: #FFE993;
    font-size: 2.5rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.countdown-time {
    font-size: 4rem;
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-weight: bold;
}

.countdown-time p {
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 2rem;
}

.countdown-time ul {
    display: flex;
    list-style: none;
    gap: 1rem;
    padding: 0;
    margin: 0;
}

.countdown-time ul li {
    border: 2px solid #5c0000;
    background: linear-gradient(180deg, #B57E10 0%, #B57E10 15%, #E5C35C 46%, #F9DF7B 61%, #FFF3A6 72%, #F9DF7B 84%, #B57E10 100%);
    border-radius: 10px;
    color: var(--color-main);
    flex: 1;
    text-align: center;
    font-size: 2.5rem;
    font-weight: bold;
    padding: .8rem 1rem;
}

.countdown-time ul li .smalltext {
    font-size: 1.6rem;
}

.title-promotion {
    margin: 0;
    font-family: "Noto Serif", serif;
    text-transform: uppercase;
    color: white;
    font-weight: bold;
    font-size: 3rem;
}

.product-image-detail-top .price {
    position: absolute;
    bottom: 0;
    right: -1rem;
    z-index: 1033;
    background: linear-gradient(90deg, #B57E10 0%, #E5C35C 22%, #F9DF7B 33%, #FFF3A6 52%, #F9DF7B 73%, #B57E10 100%);
    font-size: 2.5rem;
    padding: .5rem 1rem;
}

.product-image-detail-top .price:before {
    content: "";
    width: 0;
    height: 0;
    border-top: 2.4rem solid transparent;
    border-right: 2rem solid #b78113;
    border-bottom: 2.4rem solid transparent;
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.product-image-detail-top .price:after {
    content: "";
    width: 0;
    height: 0;
    border-bottom: 1rem solid #b98417;
    border-right: 1.2rem solid transparent;
    position: absolute;
    top: -1rem;
    right: 0;
}

.product-title-detail {
    margin: 0;
    font-family: "Noto Serif", serif;
    text-transform: uppercase;
    color: var(--color-main);
    font-weight: bold;
    font-size: 3.2rem;
}

.set-product {
    color: black;
    font-family: "Noto Serif", serif;
    font-size: 2.4rem;
    font-weight: bold;
    margin-bottom: 0;
}

.product-content {
    font-size: 1.6rem;
}

.product-content-detail .btn-submit {
    font-size: 2rem;
    font-weight: bold;
    padding: .8rem 3rem;
}

.price-special {
    display: flex;
    gap: 1rem;
    background: linear-gradient(90deg, #B57E10 0%, #E5C35C 22%, #F9DF7B 33%, #FFF3A6 52%, #F9DF7B 73%, #B57E10 100%);
    border-radius: 10px;
    padding: 10px;
    border: 2px solid #ffeb3b;
}

.price-sale-percent {
    color: #7C501D;
    font-size: 2rem;
    font-weight: bold;
}

.price-special svg {
    fill: currentColor;
    transition: all .3s;
    color: #7C501D;
    width: 5rem;
}

.price-special svg path {
    fill: currentColor;
}

.bg-product {
    background: url(https://cdn3766.cdn4s7.io.vn/media/template/group-scaled.webp);
    background-size: cover;
    background-position: center;
    padding: 3rem 0;
    background-repeat: no-repeat;
}

.title-discount {
    font-size: 4.5rem;
    font-family: "Noto Serif", serif;
    font-weight: bold;
    text-transform: uppercase;
}

.desc-discount {
    font-size: 1.8rem;
}

.item-service {
    box-shadow: 2px 2px 10px #00000014;
    border-radius: 1rem;
    overflow: hidden;
    height: auto;
}

.swiper-service--tile {
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}

.swiper-service--wrap {
    padding: 1rem;
}

.swiper-service--tile i {
    color: #915E22;
    transform: rotate(180deg);
    font-size: 2.5rem;
    position: relative;
    top: 1rem;
}

.swiper-service--description {
    color: #8E8E93;
    font-size: 1.6rem;
}

.desc-partner {
    background: linear-gradient(90deg, #B57E10 0%, #E5C35C 22%, #F9DF7B 33%, #FFF3A6 52%, #F9DF7B 73%, #B57E10 100%);
    border-radius: 1rem;
    padding: 1rem;
    border: 2px solid #ffeb3b;
    display: inline-block;
    font-size: 2rem;
    font-weight: bold;
    margin-top: 1rem;
}

.bg-partner {
    background: url("https://cdn3766.cdn4s7.io.vn/media/template/group-1.webp");
}

.item-partner {
    box-shadow: 0px 41px 12px rgba(255, 174, 0, 0.01), 0px 27px 11px rgba(255, 174, 0, 0.04), 0px 15px 9px rgba(255, 174, 0, 0.15), 0px 7px 7px rgba(255, 174, 0, 0.26), 0px 2px 4px rgba(255, 174, 0, 0.29), 0px 0px 0px rgba(255, 174, 0, 0.3);
    border-radius: 6px;
    background: white;
}

.swiper-feedback-main {
    position: relative;
    border: 2px solid #e1bb48;
    background: #FFFFFF;
    border-radius: 1rem;
    padding: 3rem;
}

.swiper-feedback--description {
    font-size: 1.6rem;
    margin-bottom: 2rem;
}

.swiper-feedback--tile {
    font-size: 2rem;
    font-weight: bold;
}

.feedback-i {
    font-size: 12rem;
    margin-top: -5rem;
    position: relative;
    right: 20%;
    z-index: 10;
    float: right;
    color: #ffcc00;
}

.item-reputation {
    display: flex;
    gap: 1rem;
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.title-form {
    font-family: "Noto Serif", serif;
    background: linear-gradient(90deg, #B57E10 0%, #E5C35C 22%, #F9DF7B 33%, #FFF3A6 52%, #F9DF7B 73%, #B57E10 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 3.6rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2rem;
}

.desc-form {
    font-family: "Noto Serif", serif;
    font-size: 3rem;
    color: white;
    font-weight: bold;
}

.form-control {
    border: 2px solid #ffe491;
    border-radius: .5rem;
    height: calc(1.5em + 2rem + 2px);
}

form .btn-submit {
    background: linear-gradient(96.09deg, #FFE246 -4.82%, #FEE89A -4.82%, #FFC700 106.63%);
    box-shadow: 0px 29px 8px rgba(255, 174, 0, 0.01), 0px 19px 7px rgba(255, 174, 0, 0.06), 0px 10px 6px rgba(255, 174, 0, 0.2), 0px 5px 5px rgba(255, 174, 0, 0.34), 0px 1px 3px rgba(255, 174, 0, 0.39), 0px 0px 0px rgba(255, 174, 0, 0.4);
    border-radius: 100px;
    color: #7f4c06;
    display: block;
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: bold;
    border: 0;
}

.item-feedback2 {
    border: 2px solid #dddddd;
    background: white;
    padding: 20px 10px;
    border-radius: 10px;
    box-shadow: 2px 2px 10px #00000038;
    height: auto;
    text-align: center;
}

.item-feedback2 img {
    height: 10rem;
    width: 10rem;
    aspect-ratio: 1/1;
    object-fit: contain;
    border-radius: 100%;
}

.swiper-feedback2--description {
    font-size: 1.7rem;
}

.swiper-feedback2--tile {
    font-size: 1.8rem;
    font-weight: bold;
    color: gray;
    margin-top: 1rem;
}

#order-modal {
    padding: 0 !important;
}

#order-modal .modal-content {
    padding: 2rem;
    padding-top: 50%;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-color: #fff5b7 !important;
    border-radius: 5rem;
}

#order-modal .modal-content .close {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -0.25rem;
    font-size: 2rem;
    width: 4rem;
    height: 2.5rem;
    display: flex;
    background: var(--color-main);
    color: var(--white);
    opacity: 1;
    justify-content: center;
    align-items: center;
    border-radius: 0 0 100% 100%;
    transition: all .3s ease;
}

#order-modal .modal-content .close:hover {
    color: var(--color-main);
    background: var(--white);
}

#order-modal .modal-content .btn-submit {
    background: var(--color-main);
    color: white;
}

#order-modal .modal-content .btn-submit:hover {
    background: var(--color-main);
    color: white;
    border: none;
}
/*--------------------------------------------------------------------------
|  Footer
--------------------------------------------------------------------------*/
footer {
    background: var(--color-main);
}

.social-section {
    display: flex;
    gap: 1rem;
}

.social-section li a {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(96.09deg, #FFE246 -4.82%, #FEE89A -4.82%, #FFC700 106.63%);
    color: var(--color-main);
    border-radius: 100%;
}

.newsletter .btn.submit {
    text-align: center;
    background: linear-gradient(96.09deg, #FFE246 -4.82%, #FEE89A -4.82%, #FFC700 106.63%);
    box-shadow: 0px 29px 8px rgb(255 174 0 / 1%), 0px 19px 7px rgb(255 174 0 / 6%), 0px 10px 6px rgb(255 174 0 / 20%), 0px 5px 5px rgb(255 174 0 / 34%), 0px 1px 3px rgb(255 174 0 / 39%), 0px 0px 0px rgb(255 174 0 / 40%);
    border-radius: 100px;
    color: #915E22 !important;
    display: block;
    font-weight: 700;
    font-size: 1.8rem;
    text-transform: uppercase;
}

/*CSS by quyettq*/
.images-reputation {
    display: grid;
    grid-template-columns: repeat(8,1fr);
    grid-template-rows: repeat(6, 1fr);
    gap: 1rem;
    width: 100%;
    aspect-ratio: 8/6;
}

.image-reputation {
    border-radius: 10px;
    overflow: hidden;
}

.item-image-0 {
    grid-column: 1/span 4;
    grid-row: 1/span 4;
}

.image-reputation img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.item-image-1 {
    grid-column: 5/span 4;
    grid-row: 1/span 2;
}

.item-image-2 {
    grid-column: 1/span 4;
    grid-row: 5/span 2;
}

.item-image-3 {
    grid-column: 5/span 4;
    grid-row: 3/span 4;
}

.container > .row {
    overflow: hidden;
}

@media (max-width: 768px) {
    .images-reputation {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    
    .images-reputation .image-reputation {
        grid-column: auto;
        grid-row: auto;
    }
}

@media (max-width: 767.98px) {
    .row-mobile > .container > .row > div + div {
        margin-top: 3rem;
    }
}
/*END css quyettq*/

/*--------------------------------------------------------------------------
|  Responsive
--------------------------------------------------------------------------*/
@media (max-width: 500px) {
    .banner-layers h1 {
        font-size: 3.6rem;
    }
    
    .text-1, .countdown-time {
        font-size: 3rem;
    }
    
    #order-modal .modal-content {
        padding-top: 70%;
    }
    
    .product-content-detail .price .price-amount {
        font-size: 2.4rem;
    }
}

@media (max-width: 375px) {
    .title-commit {
        font-size: 1.4rem;
        line-height: 5.8rem;
    }
    
    .banner-layers h1 {
        font-size: 3rem;
    }
    
    .text-1 {
        font-size: 2.8rem;
    }
    
    .product-content-detail .price .price-amount {
        font-size: 2rem;
    }
}