/* @font-face {
    font-family: PhilosopherBold;
    src: url("../../font/AnyConv.com__#9SLIDE04_PHILOSOPHER_BOLD.otf") format("opentype"),
        url("../../font/AnyConv.com__#9SLIDE04_PHILOSOPHER_BOLD.eot") format("embedded-opentype"),
        url("../../font/AnyConv.com__#9SLIDE04_PHILOSOPHER_BOLD.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: PhilosopherRegular;
    src: url("../../font/AnyConv.com__#9SLIDE04_PHILOSOPHER.otf") format("opentype"),
        url("../../font/AnyConv.com__#9SLIDE04_PHILOSOPHER.eot") format("embedded-opentype"),
        url("../../font/AnyConv.com__#9SLIDE04_PHILOSOPHER.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

:root {
    --width-desktop-safe: 1720px;
    --maxwidth-desktop-safe: calc(100% - 40px);
    --width-mobile-safe: calc(100% - 40px);
    --width-desktop: 1920px;
    --width-mobile: 768px;
    --height-desktop: 1000px;
    --height-mobile: 1000px;
    --font-family-phiregular: PhilosopherRegular;
    --font-family-phibold: PhilosopherBold;
    --fontsize-primary-desktop: 18px;
    --fontsize-primary-mobile: 24px;
    --fontheight-primary: 1.4;
    --fontweight-heavy: 900;
    --fontweight-bold: 700;
    --fontweight-semibold: 600;
    --fontweight-medium: 500;
    --fontweight-normal: 400;
    --fontweight-light: 300;
} */

/* --------------------------------------- */

/* ---------------WARP-------------------- */

/* --------------------------------------- */

.warp {
    width: var(--width-desktop);
    transform-origin: top left;
    height: auto;
    overflow: hidden;
    position: relative;
}

/* --------------WRAPPER-------------- */

.wrapper-content {
    overflow-x: hidden;
    overflow-y: hidden;
    width: var(--width-desktop);
}

.wrapper-content img {
    max-width: 100%;
    width: 100%;
}

/* --------------HEADER-------------- */

.header-section {
    background: url('../../images/header/header-bg.jpg');
    width: 100%;
    height: 1094px;
    z-index: 1;
}

.header-logo {
    width: 400px;
    top: 60px;
    left: 0;
    z-index: 1;
}

.header-18 {
    width: 223px;
    top: 300px;
    left: 80px;
    z-index: 1;
}

.header-duongtien {
    width: 810px;
    top: 180px;
    left: 1070px;
    z-index: 1;
}

.header-natra {
    width: 1483px;
    top: 10px;
    left: 70px;
    z-index: 2;
}

.header-pbm {
    width: 521px;
    top: 10px;
    left: 890px;
    z-index: 3;
}

.header-text {
    width: 1624px;
    top: 570px;
    left: 150px;
    z-index: 3;
}

.text-effect-group {
    display: inline-block;
    overflow: hidden;
}

.header-text-2 {
    width: 1029px;
    top: 830px;
    left: 440px;
    z-index: 3;
}

.header-decor {
    width: 1920px;
    top: 440px;
    left: 0;
    z-index: 5;
}

.right-nav {
    position: fixed;
    top: 170px;
    right: 0px;
    z-index: 10;
    transition: all .3s;
}

.right-nav.closed {
    right: -200px;
}

.right-nav-home {
    background: url('../../images/header/header-btn.png');
    width: 210px;
    height: 63px;
    padding-top: 10px;
    transition: all .3s;
    top: 30px;
    right: 20px;
    z-index: 99;
}

.right-nav-home:hover {
    filter: brightness(1.15) drop-shadow(0px 0px 3px #ffaaaa);
}

.right-nav-home span {
    font-size: 28px;
    text-transform: capitalize;
    color: #fff;
}

.right-nav-content {
    background: url('../../images/header/bg-right-nav.png');
    width: 263px;
    height: 593px;
}

.group-btn {
    top: 50px;
    left: 70px;
}

.right-nav-content a {
    margin: 2px 2px;
}

.right-nav-content a img {
    transition: all .3s;
}

.right-nav-content a:hover img {
    filter: brightness(1.15);
    transform: scale(1.05);
}

.right-nav-btn-topup {
    width: 156px;
}

.right-nav-btn-ios,
.right-nav-btn-ggplay,
.right-nav-btn-apk {
    width: 144px;
}

.btn-social {
    width: 33px;
}

.right-nav-arrow {
    width: 65px;
    top: 270px;
    left: -20px;
    z-index: 5;
    animation: scale 2s infinite alternate linear;
    transition: all .3s;
    cursor: pointer;
}

.right-nav-arrow.closed img {
    transform: rotate(180deg);
}

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

    50% {
        transform: scale(1);
    }

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

/* -----------------CONTENT------------------- */

/* ----------SECTION-1----------- */

.section-1 {
    background: url('../../images/content/bg-sc1.png');
    width: 100%;
    height: 1695px;
    margin-top: -280px;
    z-index: 2;
}

.section-title {
    width: 794px;
    margin: 0 auto;
}

.section-1 .section-title {
    top: 330px;
    left: 590px;
    z-index: 2;
}

.section-1-content {
    top: 560px;
    left: 160px;
}

.sc1-content-video {
    background: url('../../images/content/sc1-video.png');
    width: 1634px;
    height: 990px;
}

.sc1-btn-play {
    width: 256px;
    top: 260px;
    left: 700px;
    animation: scale 2s infinite alternate linear;
}

.sc1-btn-play:hover {
    filter: brightness(1.15) drop-shadow(0px 0px 3px #a5ffe4);
}

.section-1-text {
    top: 1480px;
    left: 560px;
}

.section-1-text p {
    font-family: var(--font-family-phibold);
    text-align: center;
    font-size: 36px;
    background: #0BA178;
    background: linear-gradient(180deg, rgba(11, 161, 120, 1) 0%, rgba(21, 127, 89, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ----------SECTION-2----------- */

.section-2 {
    background: url('../../images/content/bg-sc2.jpg');
    width: 100%;
    height: 1420px;
    z-index: 2;
}

.section-2 .section-title {
    top: 100px;
    left: 590px;
    z-index: 2;
}

.section-2-content {
    top: 310px;
    left: 250px;
}

.sc2-content-video {
    background: url('../../images/content/sc2-video.png');
    width: 1480px;
    height: 833px;
}

.sc2-btn-play {
    width: 256px;
    top: 280px;
    left: 700px;
    animation: scale 2s infinite alternate linear;
}

.sc2-btn-play:hover {
    filter: brightness(1.15) drop-shadow(0px 0px 3px #a5ffe4);
}

.section-2-text {
    top: 1180px;
    left: 430px;
}

.section-2-text p {
    font-family: var(--font-family-phibold);
    text-align: center;
    font-size: 36px;
    background: #0BA178;
    background: linear-gradient(180deg, rgba(11, 161, 120, 1) 0%, rgba(21, 127, 89, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ----------SECTION-3----------- */

.section-3 {
    background: url('../../images/content/bg-sc3.jpg');
    width: 100%;
    height: 1640px;
    padding-top: 100px;
    z-index: 2;
}

.section-3-content {
    width: 1486px;
    height: 841px;
    margin: 80px auto 0;
}

.sc3-slider {
    width: 90%;
    height: 90%;
    border: 3px solid #6bf3ca;
    filter: drop-shadow(0px 0px 15px #79fdd6);
}

.section-3-content .swiper-button-prev:after,
.section-3-content .swiper-rtl .swiper-button-next:after {
    content: none;
}

.section-3-content .swiper-button-prev {
    width: 125px;
    height: 125px;
    background: url('../../images/content/btn-prev.png') no-repeat;
    background-position: center;
    background-size: cover;
}

.swiper-button-next,
.swiper-rtl .swiper-button-prev {
    right: -90px;
    top: 340px;
    left: unset;
}

.section-3-content .swiper-button-next:after,
.section-3-content .swiper-rtl .swiper-button-prev:after {
    content: none;
}

.swiper-button-prev,
.swiper-rtl .swiper-button-next {
    left: -90px;
    top: 340px;
    right: unset;
}

.section-3-content .swiper-button-next {
    width: 125px;
    height: 125px;
    background: url('../../images/content/btn-next.png') no-repeat;
    background-position: center;
    background-size: cover;
}

.section-3-content .swiper-button-prev:hover,
.section-3-content .swiper-button-next:hover {
    filter: brightness(1.15) drop-shadow(0px 0px 3px #a5ffe4);
}

.section-3-content .swiper-pagination-bullet {
    width: 30px;
    height: 30px;
    background: url('../../images/content/pagination-dot.png') no-repeat;
    background-position: center;
    background-size: cover;
    margin: 0 8px !important;
}

.section-3-content .swiper-pagination-bullet-active {
    width: 40px;
    height: 40px;
}

.section-3-content .swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* -----------------FOOTER------------------- */

.footer-section {
    background-color: #420000;
    position: relative;
    z-index: 4;
    padding: 10px 20px;
}

.footer-section .space {
    flex: 1;
}

.footer-section .footer_hide {
    display: none !important;
}

.footer-section .space img {
    width: 100%;
}

.footer-section .infomation {
    flex: 4;
}

.footer-section .logo-footer {
    flex: 1;
}

.footer-section .logo-footer img {
    width: 100%;
}

.footer-section p {
    font-family: var(--font-family-phiregular);
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 0;
    color: white;
    text-align: center;
    line-height: 25px;
}

@media (orientation: portrait) {

    .desktop,
    .desktop-flex,
    .desktop-grid,
    .desktop-inline {
        display: none !important;
    }

    .mobile {
        display: block !important;
    }

    .mobile-inline {
        display: inline-block !important;
    }

    .mobile-flex {
        display: flex !important;
    }

    .mobile-grid {
        display: grid !important;
    }

    .section {
        width: var(--width-mobile);
    }

    /* --------------------------------------- */

    /* ---------------WARP-------------------- */

    /* --------------------------------------- */

    .warp {
        width: var(--width-mobile);
        transform-origin: top left;
        height: auto;
        overflow: hidden;
        position: relative;
    }

    /* --------------WRAPPER-------------- */

    .wrapper-content {
        overflow-x: hidden;
        overflow-y: hidden;
        width: var(--width-mobile);
    }

    .header-section {
        background: url('../../images/header/header-bg-mb.jpg');
        width: 100%;
        height: 1065px;
        z-index: 1;
    }

    .header-logo {
        width: 260px;
        top: 10px;
        left: -10px;
        z-index: 1;
    }

    .header-18 {
        width: 150px;
        top: 160px;
        left: 44px;
        z-index: 1;
    }

    .right-nav-home {
        width: 184px;
        height: 47px;
        padding-top: 10px;
        transition: all .3s;
        top: 20px;
        right: 15px;
    }

    .header-natra {
        width: 1148px;
        top: 0px;
        left: -330px;
        z-index: 0;
    }

    .header-pbm {
        width: 391px;
        top: 20px;
        left: 310px;
        z-index: 3;
    }

    .header-duongtien {
        width: 600px;
        top: 320px;
        left: 330px;
        z-index: 0;
    }

    .header-text {
        width: 464px;
        top: 580px;
        left: 160px;
        z-index: 3;
    }

    .header-text-2 {
        width: 729px;
        top: 490px;
        left: 20px;
        z-index: 3;
    }

    .header-decor {
        width: 768px;
        top: 540px;
        left: 0;
        z-index: 5;
    }

    .section-1 {
        background: url('../../images/content/bg-sc1-mb.png');
        width: 100%;
        height: 856px;
        margin-top: -200px;
        z-index: 2;
    }

    .section-1 .section-title {
        top: 140px;
        left: 140px;
        z-index: 2;
    }

    .section-title {
        width: 494px;
        margin: 0 auto;
    }

    .section-1-content {
        top: 280px;
        left: 30px;
    }

    .sc1-content-video {
        width: 704px;
        height: 430px;
    }

    .section-1-text {
        width: 480px;
        top: 670px;
        left: 160px;
    }

    .section-1-text p {
        font-family: var(--font-family-phibold);
        text-align: center;
        font-size: 21px;
        background: #0BA178;
        background: linear-gradient(180deg, rgba(11, 161, 120, 1) 0%, rgba(21, 127, 89, 1) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .sc1-btn-play {
        width: 126px;
        top: 120px;
        left: 290px;
        animation: scale 2s infinite alternate linear;
    }

    .section-2 {
        background: url('../../images/content/bg-sc2-mb.jpg');
        width: 100%;
        height: 736px;
        z-index: 2;
    }

    .section-2 .section-title {
        top: 20px;
        left: 140px;
        z-index: 2;
    }

    .section-2-content {
        top: 140px;
        left: 70px;
    }

    .section-2-text {
        width: 570px;
        top: 510px;
        left: 100px;
    }

    .section-2-text p {
        font-family: var(--font-family-phibold);
        text-align: center;
        font-size: 21px;
        background: #0BA178;
        background: linear-gradient(180deg, rgba(11, 161, 120, 1) 0%, rgba(21, 127, 89, 1) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .sc2-content-video {
        width: 632px;
        height: 357px;
    }

    .sc2-btn-play {
        width: 126px;
        top: 120px;
        left: 290px;
        animation: scale 2s infinite alternate linear;
    }

    .section-3 {
        background: url('../../images/content/bg-sc3-mb.jpg');
        width: 100%;
        height: 817px;
        padding-top: 60px;
        z-index: 2;
    }

    .section-3-content {
        width: 678px;
        height: 381px;
        margin: 50px auto 0;
    }

    .section-3-content .swiper-button-next {
        width: 55px;
        height: 55px;
        background: url(../../images/content/btn-next.png) no-repeat;
        background-position: center;
        background-size: cover;
    }

    .swiper-button-next,
    .swiper-rtl .swiper-button-prev {
        right: -30px;
        top: 150px;
        left: unset;
    }

    .section-3-content .swiper-button-prev {
        width: 55px;
        height: 55px;
        background: url(../../images/content/btn-prev.png) no-repeat;
        background-position: center;
        background-size: cover;
    }

    .swiper-button-prev,
    .swiper-rtl .swiper-button-next {
        left: -30px;
        top: 150px;
        right: unset;
    }

    .section-3-content .swiper-pagination-bullet-active {
        width: 30px;
        height: 30px;
    }

    .section-3-content .swiper-pagination-bullet {
        width: 25px;
        height: 25px;
        background: url(../../images/content/pagination-dot.png) no-repeat;
        background-position: center;
        background-size: cover;
        margin: 0 5px !important;
    }

    .right-nav {
        position: fixed;
        top: 11vw;
        right: 0px;
        z-index: 10;
        transition: all .3s;
    }

    .right-nav.closed {
        right: -26vw;
    }

    .right-nav-content {
        background: url(../../images/header/bg-right-nav.png);
        width: 34.25vw;
        height: 77.22vw;
    }

    .group-btn {
        top: 6vw;
        left: 9vw;
    }

    .right-nav-arrow {
        width: 8vw;
        top: 35vw;
        left: -2vw;
        z-index: 5;
        animation: scale 2s infinite alternate linear;
        transition: all .3s;
        cursor: pointer;
    }

    .right-nav-arrow img {
        width: 100%;
    }

    .right-nav-content a {
        margin: 0.2vw 0.2vw;
    }

    .right-nav-content a img {
        width: 100%;
    }

    .right-nav-btn-topup {
        width: 20.32vw;
    }

    .right-nav-btn-ios,
    .right-nav-btn-ggplay,
    .right-nav-btn-apk {
        width: 19vw;
    }

    .btn-social {
        width: 4.4vw;
    }

    .right-nav-btn-code {
        width: 20.32vw;
    }

    .sc3-slider {
        width: 90%;
        height: 90%;
        border: 0.2vw solid #6bf3ca;
        filter: drop-shadow(0px 0px 1vw #79fdd6);
    }

    .section-3-content .swiper-pagination {
        bottom: -15px !important;
        position: absolute;
        text-align: center;
        transition: .3s opacity;
        transform: translate3d(0, 0, 0);
        z-index: 10;
    }

    .footer-section {
        background-color: #420000;
        position: relative;
        z-index: 4;
        padding: 10px 20px;
        flex-direction: column;
    }

    .group_logo_mobile {
        display: flex !important;
        gap: 10px;
        padding: 0 40px;
    }
}