.slick-initialized .slick-slide {
    margin: 0 13px;
}

div.slick-track .img_item img {
    width: 100%;
}

div.slick-track .img_item img.fade-out {
    opacity: 0;
}

div.slick-track {
    display: flex;
    align-items: center;
    transition: transform 0.5s ease-in-out;
}

.content-ratio-center {
    display: flex;
    align-items: center;
}

.title-cate {
    font: 65px 'Anton-Regular';
    transform: scale(1.5);
    line-height: 1;
    color: #ffff;
}

.title-release{
    top:10%;
    left: 8%;
    font: 78px 'Anton-Regular';
    mix-blend-mode: difference;
}
.title-artist{
    bottom: 34.72%;
    left: 7%;
    z-index: 5;
    mix-blend-mode: difference;
}
.title-vibe{
    top: 13.1%;
    left: 8%;
    font: 68px 'Anton-Regular';
    line-height: 1;
    mix-blend-mode: difference;
}
.arrow-home{
    bottom: 1%;
    right: 8%;
    cursor: pointer;
    z-index: 4;
}
.arrow-home.artist:hover{
    cursor: unset;
    opacity: 0.7;
}
.ratio10-46{
    padding-top: 46.15%;
}
.ratio10-26{
    padding-top: 26.67%;
}
#image-artist{
    position: absolute;
    width: 60.4%;
    height: 52.59%;
    top: 9.35%;
    left: 0;
    clip-path: polygon(0 57.4%, 15.4% 0, 100% 0,74% 100%, 0 100%);
}

#image-artist.active{
    animation: mymove 0.5s linear;
}
[data-img-item].active{
    animation: mymove 0.5s linear;
}

@keyframes mymove {
    from {
        transform: translateX(10%);
        opacity: 0
    }
    to {
        transform: translateX(0);
        opacity: 1
    }
}

#image-artist img{
    transition: opacity 0.5s ease-in-out;
}
.menu-artist{
    position: absolute;
    right: 43.5%;
    top: 11%;
    text-align: end;
}
.child-4{
    height: 9.07%;
    width: 32.5%;
    position: absolute;
    left: 63.33%;
    top: 51.02%;
    clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
}
.child-1{
    height: 26.48%;
    width: 14.84%;
    position: absolute;
    left: 63.85%;
    top: 19.08%;
    clip-path: polygon(0 100%, 58% 0, 100% 0,42% 100%);
    z-index: 4;
}
.child-2{
    height: 26.48%;
    width: 14.79%;
    position: absolute;
    left: 49.06%;
    top: 35.28%;
    clip-path: polygon(0 100%, 58% 0, 100% 0,42% 100%);
    z-index: 2;
}
.child-5{
    height: 9.07%;
    width: 32.6%;
    position: absolute;
    left: 21.88%;
    top: 66.57%;
    clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
}
.child-3{
    height: 26.39%;
    width: 14.79%;
    position: absolute;
    left: 50.26%;
    top: 66.57%;
    clip-path: polygon(0 100%, 58% 0, 100% 0,42% 100%);
}
.child-6{
    height: 9.17%;
    width: 32.5%;
    position: absolute;
    left: 66.41%;
    top: 66.57%;
    clip-path: polygon(9% 0, 100% 0, 91% 100%, 0 100%);
}
.image-small{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.menu-artist li a{
    color: #747474;
    font: 32px 'Anton-Regular';
}
.menu-artist li.active a{
    color: #FFFFFF;
}
.text-vibe{
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    color: #ffff;
}
.text-vibe .regular{
    font: 20px 'iCiel-Regular';
}
.text-vibe .bold{
    font: 20px 'iCiel-Bold';
}


.menu-link {
    transition: all .5s;

}
.menu-link.hidden{
    display: none;
}
.menu-link.active {
    color: white;
    display: block;
    animation: mymove 0.5s linear;
}
.logo-home{
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    z-index: 9;

}
.info-sing{
    top: 50%;
    right: 6.25%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
}
.info-sing.left {

    right: calc( 6.25% + 282px);
}
.info-sing .item{
    margin: 12px;
    color: #ffff;
}
.info-sing .item.playing a{
    font: 56px 'Anton-Regular';
    color: #FFFFFF;
}
.info-sing .item .text-1{
    font: 25px 'Anton-Regular';
}
.info-sing .item .text-1 span:first-child{
    margin-right: 12px;
}
.info-sing .item .text-2{
    display: inline-block;
    text-decoration: underline;
}
.info-sing .item .text-2 a{
    font: 25px 'Dense-Bold';
    color: #FFFFFF;
}
.blinking-text {
    opacity: 0;
}

.section{
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    position: relative;
    background-color: #000000;
}

.section .animationTextHome,
.section.section-1 .animationTextHome {
    opacity: 0;
    transform: translate(0, 80px) ;
    transition: all 1s ease-in-out;
}

.section.active:not(.section-1) .animationTextHome,
.section.section-1.fp-completely .animationTextHome{
    opacity: 1;
    transform: translate(0, 0);
}

.section .animationLogo{
    opacity: 0;
    transform: translate(0, 80px);
    transition: all 1s ease-in-out;
}

.section .animationLogo img{
    height: 38px;
}

.section .animationLastLogo{
    opacity: 0.6;
    /*transform: translate(0, 80px);*/
    transition: all 1s ease-in-out;
}

.section.fp-completely .animationLogo,
.section.fp-completely .animationLastLogo{
    opacity: 1;
    transform: translate(0, 0);
}

.animationTextVibe,
.animationTextArtist{
    opacity: 0.7;
    /*transform: translate(0, 30px);*/
    transition: all 1s ease-in-out;
}

.section.active .animationTextVibe{
    opacity: 1;
    transform: translate(0, 0) ;
}

.section.active .animationTextArtist{
    opacity: 1;
    transform: translate(0, 0);
}

.logo-section,
.logo-vibe-footer{
    position: absolute;
    left: 3.39%;
    top: 2.87%;
    height: 24px;
    z-index: 4;
}
.logo-vibe-footer{
    display: none;
}

.fp-viewing-3 .logo-vibe-footer,
.fp-viewing-4 .logo-vibe-footer{
    display: block;
}

.section.site-footer{
    height: 196px!important;
    max-height: 196px!important;
}
.section.site-footer .fp-tableCell{
    height: 196px!important;
    max-height: 196px!important;
}
.section {
    transition: transform 0.7s, opacity 0.7s;
    transform: scale(1);
    opacity: 1;
}

.section.leaving {
    transform: scale(1.1);
    opacity: 0;
}
.slide-responsive-home{
    display: flex;
    align-items: center;
    margin-left: calc(-12.5vw - 18px);
    margin-right: calc(-12.5vw - 18px);
    transition: all 0.5s;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.slide-responsive-home .img_item{
    flex: 1;
    padding: 18px;
}
.slide-responsive-home.fisrt{
    margin-left: -18px;
    margin-right: calc(-25vw - 18px);
}
.slide-responsive-home.last{
    margin-left: calc(-25vw + 18px);
    margin-right: -36px;
}

.fp-section.fp-table, .fp-slide.fp-table {
    display: block;
    table-layout: unset;
}
.fp-tableCell {
    display:block;
    width: 100%;
    height: 100%;
}

#fullscreen-video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}
.section-vibe .img-text{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
}
.section-vibe .img-logo img{
   width: 100%;
}
#fp-nav ul li a {
    display: block;
    width: 12px;
    height: 12px;
    background: #585858;
    opacity: 1;
    border-radius: 100px;
}
#fp-nav ul li a.active {
    background: #fff;
}
#fp-nav ul li a span {
    all: unset;
}

.progress {
    height: 1px;
    background: #ebe9e9;
    display: block;
    position: absolute;
    overflow: visible;

}

.progress.artist{
    width: 25%;
    top: 38.66%;
    left: 56%;
    transform: translateX(-50%);
}
.progress.release{
    width: 25%;
    top: 89.64%;
    left: 4.8%;
}

.progress-bar{
    position: absolute;
    top: -.5px; /* Đặt vị trí trên để điều chỉnh vị trí của progress-bar */
    height: 2px; /* Chiều cao của progress-bar */
    background-color: #FFFFFF;
    transition: all .5s;
}
.progress.artist .progress-bar[data-index = '1']{
    width: calc(100% /6);
}
.progress.artist .progress-bar[data-index = '2']{
    width: calc(100% /3);
}
.progress.artist .progress-bar[data-index = '3']{
    width: calc(100% /2);
}
.progress.artist .progress-bar[data-index = '4']{
    width: calc(100% /6*4);
}
.progress.artist .progress-bar[data-index = '5']{
    width: calc(100% /6*5);
}
.progress.artist .progress-bar[data-index = '6']{
    width: calc(100%);
}

.progress.release .progress-bar[data-index = '1']{
    width: calc(100% /5);
}
.progress.release .progress-bar[data-index = '2']{
    width: calc(100% /5*2);
}
.progress.release .progress-bar[data-index = '3']{
    width: calc(100% /5*3);
}
.progress.release .progress-bar[data-index = '4']{
    width: calc(100%/5*4);
}
.progress.release .progress-bar[data-index = '5']{
    width: calc(100%);
}

.pre-button,
.next-button{
    position: absolute;
    width: 3%;
}
.pre-button.artist{
    right: 19%;
    top: 38.66%;
    transform: translateY(-50%);
}

.next-button.artist{
    right: 8%;
    top: 38.66%;
    transform: translateY(-50%);
}

.pre-button.release{
    left: 40%;
    top: 89.64%;
    transform: translateY(-50%);
    z-index: 5;
}

.next-button.release{
    left: 51%;
    top: 89.64%;
    transform: translateY(-50%);
}

/*Content mobile*/
.div-mobile,
.get-img-show,
.logo-mobile,
.content-mobile{
    display: none!important;
}

@media(max-width: 1024.98px) {

    /*content desktop*/
    .arrow-home,
    .slide-responsive-home{
        display: none!important;
    }

    /*css mobile*/
    #fp-nav.right {
        right: 8px;
    }

    .logo-vibe-footer{

    }

    .menu-link.active {
        animation: unset;
    }

    .logo-home{
        top: 3.22%;
        left: 4.98%;
        z-index: 9;
        transform: translateY(0);
        height: 3.37%;
    }
    .logo-section,
    .logo-vibe-footer{
        top: 3.22%;
        left: 3.98%;
        height: 3.37%;
    }
    .section-release .logo-section{
        left: 4.8%;
    }
    .section-vibe .logo-section{
        left: 5.24%;
    }
    .section-vibe .img-logo{
        position: absolute;
        left: 0;
        top: 8.42%;
    }

    .section-vibe .img-text{
        width: 72.98%;
        height: auto;
        left: 14.76%;
        top: 33.48%;
        transform: unset;
    }
    .animationLogo{
        height: 100%;
    }
    .section .animationLogo img {
        height: 100%;
        width: auto;
    }

    #show_menu img{
        height: 100%;
        width: auto;
    }

    .info-sing {
        top: 83.06%;
        left: 50%;
        right: unset;
        transform: translateX(-50%);
        width: 100%;
        justify-content: center;
    }
    .info-sing.left {
       top: 89.39%;
    }
    .info-sing .item.playing a {
        font: 34px 'Anton-Regular';
        color: #FFFFFF;
    }
    .info-sing .item .text-1 {
        font: 18px 'Anton-Regular';
    }

    .title-release {
        top: 71.9%;
        left: 4.8%;
        z-index: 99;
        font: 46px 'Anton-Regular';
    }
    .title-release span{
        display: block;
        line-height: 1!important;
    }
    .get-img-show{
        display: block!important;
    }

    .content-mobile{
        display: block!important;
        z-index: 5;
    }
    .get-img-show img{
        border-radius: 3px;
    }
    .menu-link {
        display: block!important;
    }
    #image-artist{
        width: 100%;
        height: 37.56%;
        top: 4.68%;
        left: 0;
        clip-path: polygon(0 27.97%, 9.24% 0, 100% 0,100% 81.77%, 93.78% 100%, 0 100%);
    }
    .menu-artist{
        display: none;
    }
    .child-4{
        height: 6.23%;
        width: 48.62%;
        position: absolute;
        left: unset;
        right: 0;
        top: 67.87%;
        clip-path: polygon(13.2% 0, 100% 0, 100% 100%, 0 100%);
    }
    .child-1{
        height: 18.2%;
        width: 32.27%;
        position: absolute;
        left: 52.27%;
        top: 45.95%;
        clip-path: polygon(0 100%, 58% 0, 100% 0,42% 100%);
        z-index: 4;
    }
    .child-2{
        height: 18.25%;
        width: 32.18%;
        position: absolute;
        left: 20.44%;
        top: 57.16%;
        clip-path: polygon(0 100%, 58% 0, 100% 0,42% 100%);
        z-index: 2;
    }
    .child-5{
        height: 6.23%;
        width: 32.98%;
        position: absolute;
        left: 0;
        top: 78.48%;
        clip-path: polygon(0 0, 100% 0, 80.5% 100%, 0 100%);
    }
    .child-3{
        height: 18.2%;
        width: 32%;
        position: absolute;
        left: 23.64%;
        top: 78.48%;
        clip-path: polygon(0 100%, 58% 0, 100% 0,42% 100%);
    }
    .child-6{
        height: 6.33%;
        width: 42.13%;
        position: absolute;
        left: 57.87%;
        top: 78.48%;
        clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
    }
    .title-artist {
        /*bottom: unset;*/
        /*top: unset;*/
        bottom: 60.34%;
        left: 5.07%;
        z-index: 5;
        font: 44px 'Anton-Regular';
        line-height: 1;
    }
    .menu-artist li a {
        font: 17px 'Anton-Regular';
        line-height: 1.15;
    }

    .section.site-footer .fp-tableCell {
        height: 296px!important;
        max-height: 296px!important;
    }

    .div-mobile {
        display: block!important;
        position: relative;
        width: 100%;
        height: 100%;
    }
    .div-mobile div {
        text-align: center;
        position: absolute;
        transition: all .5s;
    }
    div.show-photo {
        z-index: 4;
        top: 11.11%;
        left: 11.91%;
        width: 64.71%;
        height: 65.01%;

    }
    div.pre-photo {
        top: 23.98%;
        left: 4.8%;
        height: 34.59%;
        width: 61.16%;
    }
    div.next-photo {
        top: 23.98%;
        left: 85.42%;
        width: 61.16%;
        height: 34.59%;
        z-index: 1;
    }
    div.next-2-photo {
        top: 23.98%;
        left: 92.53%;
        width: 61.16%;
        height: 34.59%;
        z-index: 2;
    }
    div.pre-2-photo{
        display: none;
    }

    div.get-img-show{
        position: absolute;
        top: 73.1%;
        left: 72%;
        width: 19.47%;
        height: 11.01%;
        z-index: 5;
    }

    .logo-mobile{
        display: block!important;
    }
    .title-vibe {
        top: 17.11%;
        left: 5.24%;
        font: 59px 'Anton-Regular';
        line-height: 1;
        mix-blend-mode: difference;
        transform: scale(1);
    }
    .text-vibe {
        top: 71%;
        left: 30.47%;
        transform: translateY(0);
    }
    .text-vibe span{
        display: block;
    }
    .animationLastLogo picture{
        position: absolute;
        top: 10.02%;
    }
    .text-vibe .regular {
        font: 17px 'iCiel-Regular';
    }
    .text-vibe .bold {
        font: 17px 'iCiel-Bold';
    }

}

@media (min-width: 769px) and (max-width: 1024.98px) {
    .logo-home {
        top: 3.22%;
        left: 4.98%;
        z-index: 9;
        transform: translateY(0);
        height: 2%;
    }
    .logo-section, .logo-vibe-footer {
        top: 3.22%;
        left: 3.98%;
        height: 2%;
    }
    footer {
        height: 240px;
    }
    .t_uppercase.copy_right {
        font-size: 11px;
    }
    .t_uppercase.copy_right,
    footer .container .ft_item .address{
        font-size: 9px;
    }
    footer .container .ft_item .address b {
        font: 9px 'iCiel-Bold';
    }
    .info-sing .item.playing a {
        font: 48px 'Anton-Regular';
    }
    .info-sing .item .text-1 {
        font: 22px 'Anton-Regular';
    }
    .title-release {
        top: 76.9%;
        font: 78px 'Anton-Regular';
    }
    .progress.release,
    .pre-button.release,
    .next-button.release{
        top: 93.64%;
    }
}