@font-face {
    font-family: iCiel-Regular;
    src: url(../fonts/iCielInternacional-Regular.otf );
    font-display: swap;
}

@font-face {
    font-family: iCiel-Bold;
    src: url(../fonts/iCielInternacional-Bold.otf );
    font-display: swap;
}

@font-face {
    font-family: iCiel-Black;
    src: url(../fonts/iCielInternacional-Black.otf );
    font-display: swap;
}
@font-face {
    font-family: iCiel-BlackWide;
    src: url(../fonts/iCielNeuePlak-BlackWide.otf );
    font-display: swap;
}
@font-face {
    font-family: iCiel-BoldWide;
    src: url(../fonts/iCielNeuePlak-BoldWide.otf );
    font-display: swap;
}
@font-face {
    font-family: Dense-Thin;
    src: url(../fonts/Dense-Thin.otf );
    font-display: swap;
}
@font-face {
    font-family: Dense-Bold;
    src: url(../fonts/Dense-Bold.otf );
    font-display: swap;
}
@font-face {
    font-family: Anton-Regular;
    src: url(../fonts/Anton-Regular.ttf );
    font-display: swap;
}
@font-face {
    font-family: SudVN-Regular;
    src: url(../fonts/SudVN-Regular.ttf );
    font-display: swap;
}
@font-face {
    font-family: SemiBold;
    src: url(../fonts/RobotoMono-SemiBold.ttf );
    font-display: swap;
}
@font-face {
    font-family: Symtext;
    src: url(../fonts/Symtext.ttf );
    font-display: swap;
}

html{
    width: 100vw;
}
body {
    font-size: 16px;
    font-family: iCiel-Regular;
    overflow-x: hidden;
    color: #1b1a1a;
    line-height: 1.6;
}
body main#home{
    background-color: #000000;
    color: #FFFFFF;
}
.color-1b1a1a{
    color: #1b1a1a !important;
}
.award-year{
    font-size: 22px;
    margin: 24px 0 12px 0;
}
.award-year:first-child{
    margin: 0 0 12px 0;
    line-height: 1;
}

img{
    max-width: 100% !important;
}
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    margin: 0;
}
.flex{
    display: flex!important;
}

.t_uppercase {
    text-transform: uppercase;
}

.vh-100{
    height: 100vh !important;
}

.vw-100{
    width: 100vw !important;
}

ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}
a {
    color: #000000;
}

a:hover {
    text-decoration: none;
    color: #000000;
}
.rotate_180 {
    transform: rotate(90deg);
}
.absolute-50{
    position: absolute;
    top: 44%;
    left: 54%;
    transform: translate(-50%, -50%);
}
.mt-24{
    margin-top: 24px;
}
.mt-72{
    margin-top: 72px;
}
.mt-144{
    margin-top: 144px;
}
.mt-210{
    margin-top: 210px;
}
.absolute{
    position: absolute;
}

.modeDifference{
    mix-blend-mode: difference;
}
.container-ratio {
    width: 100%; /* Chiều rộng của container */
    height: 0; /* Thiết lập chiều cao ban đầu của container là 0 */
    position: relative; /* Cần thiết để sử dụng position:absolute cho con */
}

.content-ratio {
    position: absolute; /* Để đảm bảo nội dung bên trong container */
    top: 0;
    left: 0;
    width: 100%; /* Đảm bảo nội dung lấp đầy container */
    height: 100%;
    overflow: hidden;
}
.ratio16-9{
    padding-top: 56.25%; /* Tỷ lệ 16:9 (chiều rộng / chiều cao) */
}
.ratio10-42{
    padding-top: 42.18%; /* Tỷ lệ 10/4.2 (chiều rộng / chiều cao) */
}
.content-detail{
    color: #575757;
}
.pad-top-20{
    padding-top: 20px;
}
.pad-top-40{
    padding-top: 40px;
}
.pad-bot-40{
    padding-bottom: 40px;
}
.pad-bot-60{
    padding-bottom: 60px;
}
.pad-bot-100{
    padding-bottom: 100px;
}
.pad-top-100{
    padding-top: 100px;
}
.pad-right-10{
    padding-right: 10px;
}
.border-bt{
border-bottom: 1px solid #b7b6be;
}
.border-top{
    border-top: 1px solid #b7b6be !important;
}
.relative{
    position: relative;
}

.title-cate {
    font: 50px 'Anton-Regular';
    line-height: 1;
}


.appear-animation {
    animation: appearFromBottom 1s forwards;
}

@keyframes appearFromBottom {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.logo-web{
    cursor: pointer;
}


#show_menu{
    position: fixed;
    left: 96.35%;
    top: 2.87%;
    z-index: 9;
    cursor: pointer;
    width: 32px;
    height: 32px;
    mix-blend-mode: difference;
    opacity: 1;
    transition: all .5s linear;
}
#show_menu.scrollDown{
    opacity: 0;
    top: 0;
}
.nav-head-text{
    color: #ffff;
    line-height: 40px;
    font-size: 27px;
}

#menu-gnb.menu {
    position: fixed;
    top: 0;
    right: -28%;
    background: rgba(20, 20, 20, 0.95);
    width: 28%;
    height: 100vh;
    opacity: 0;
    z-index: 10;
    padding: 3.5rem 0 0;
    transition: all 0.3s ease-in-out;
    overflow-y: scroll;
}
#menu-gnb.on.menu {
    right: 0;
    opacity: 1;
}
#menu-gnb.menu .item_menu {
    padding-left: 24px;
    font: 46px 'Anton-Regular';
    color: #747474;
}
#menu-gnb.menu > li .item_sub_menu {
    padding-left: 150px;
    font: 26px 'Anton-Regular';
}
#menu-gnb.menu > li .item_sub_menu a{
    color: #747474;
}
#menu-gnb.menu .item_menu:hover,
#menu-gnb.menu > li .item_sub_menu a:hover{
    color: #FFFFFF;
}

#menu-gnb.on .close {
    position: absolute;
    top: 34px;
    right: 18px;
}
.logo-section img,
.logo-home img,
.logo-vibe-footer img{
    height: 100%;
    width: auto;
}
.nav-head{
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 55px;
    padding: 8px 96px 8px 22px;
    transition: opacity 0.5s ease-in-out, height 0.5s ease-in-out;
    mix-blend-mode: difference;
}
.nav-head.scrollDown{
    height: 0;
    opacity: 0;
}
.overlay {
    z-index: 2;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}


.nav-head.background-00{
    z-index: 2;
    background-color: #000000;
}


footer.footer_bg_black{
    background-color: #000000;
    position: relative;
}


.ft_item {
    font-size: 12px;
}

.ft_item a.item {
    font: 12px 'iCiel-Bold';
    display: inline-block;
    margin-right: 20px;
    color: #000000;
}
footer .container.text-white .ft_item a.item,
footer .container.text-white .ft_item .address b,
footer .container.text-white .ft_item .address a{
    color: #FFFFFF !important;
}

.ft_item .link_social a:not(:last-child) {
    margin-right: 5px;
}
.link_social.d-flex a{
    /*width: 48px;*/
    display: flex;
    align-items: end;
    justify-content: center;
}
.body_page .ft_item a.item {
    color: #e4e2e8;
}

.body_page .ft_item .link_social a img {
    filter: invert(0.9);
}

footer .container{
    display: flex;
    justify-content: space-between;
    padding-top: 50px;
    padding-bottom: 50px;
    align-items: start;
}

footer .container .f_item{
    flex-basis: 35%;
}
footer .container .lg_item>div{
   max-width: 50%;
}
.lg_item>div.logo_bot img{
    max-height: 68.68px;
}
.t_uppercase.copy_right {
    font-size: 8px;
}
.f_item.lg_item.d-flex {
    align-items: end;
}
footer .container .ft_item .d-flex{
    /*height: 48px;*/
    align-items: center;
}
footer .container .ft_item .address{
    margin-top: 8px;
}
footer .container .ft_item .address b{
    font: 12px 'iCiel-Bold';
    color: #000000;
}
footer .container .link_social img{
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 3px;
}
.sub_audition{
    height: 0;
    opacity: 0;
    padding: 0;
    transition: all 1s;
    visibility: hidden;
    transform: translateY(-100%);
}
li.audition:hover .sub_audition{
    height: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


@media (max-width: 991px) {

    /*footer*/
    .ft_item {
        margin-bottom: 30px;
        text-align: center;
        justify-content: center;
    }
    .ft_item .list_item {
        justify-content: center !important;
    }
}

@media (max-width: 480px) {

    .ft_item:last-child {
        margin-bottom: 0;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .nav-menu.menu {
        border: 1px solid #e1e1e1;
    }

}

@media (max-width: 1024.98px){
    body {
        font-size: 12px;
    }
    .award-year {
        font-size: 18px;
    }
    #menu-gnb.menu {
        right: -60%;
        width: 60%;
    }

    footer {
        overflow-x: hidden;
        height:296px;
        position: relative;
    }

    #show_menu {
        left: unset;
        right: 4.35%;
        top: 3.22%;
        height: 3.37%;
        width: auto;
    }
    #show_menu .icon-menu{
        height: 100%;
        width: auto;
    }

    footer .container {
        position: absolute;
        top: 0;
        left: 5.24%;
        right: 0;
        bottom: 0;
        padding-left: unset;
    }
    footer .mobile{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
    }
    footer .container .f_item>div {
        flex-basis: 100%;
        max-width: 100%;
    }
    footer .container .ft_item .d-flex {
        align-items: start;
        width: 100%;
        justify-content: space-around;
    }
    .ft_item a.about,
    .ft_item a.contact{
        display: none;
    }
    footer .container .f_item {
        flex-basis: 45%;
    }
    .t_uppercase.copy_right {
        font-size: 9px;
    }

    footer .container .ft_item .address{
        text-align: end;
    }

    .f_item.lg_item.d-flex {
        align-items: start;
    }
    .mobile.f_item.right{
        align-items: end;
        padding-right: 8%;
    }

    .lg_item>div.logo_bot img {
        height: 44px;
    }
    /*css introduction vaf artist */
    .col-lg-12.container-ratio.ratio16-9 {
        padding-top: unset; /* set lai width 100% height 100% */
        width: 100vw;
        height: 100vh;
    }
    .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl {
        overflow: hidden;
    }
    .title-cate {
        font: 40px 'Anton-Regular';
    }


}

 @media (min-width: 769px) and (max-width: 1024.98px) {
        .col-md-12 {
            -ms-flex: 0 0 100%;
            flex: 0 0 100%;
            max-width: 100%;
        }
        .col-md-3 {
            -ms-flex: 0 0 20%;
            flex: 0 0 20%;
            max-width: 20%;
        }

        .col-md-7 {
            -ms-flex: 0 0 63.333333%;
            flex: 0 0 63.333333%;
            max-width: 63.333333%;
        }
        body {
            font-size: 14px;
        }
     .award-year {
         font-size: 20px;
     }
     #show_menu {
         left: unset;
         right: 2.35%;
         top: 3.22%;
         height: 2%;
         width: auto;
     }
     .logo-home {
         top: 3.22%;
         left: 4.98%;
         z-index: 9;
         transform: translateY(0);
         height: 2%;
     }

    .container {
        width: 100%;
        padding: 0 10px;
    }
    footer {
        overflow-x: hidden;
    }
    .nav-menu>.menu-item>.menu-link {
        font-size: 14px;
    }

}

@media (max-width: 767.99px){
    #menu-gnb.menu {
        right: -100%;
        width: 100%;
    }
    .t_uppercase.copy_right,
    footer .container .ft_item .address{
        font-size: 5.5px;
    }
    footer .container .ft_item .address b {
        font: 5.5px 'iCiel-Bold';
    }
    .lg_item>div.logo_bot img {
        height: 24px;
    }
}


@media (min-width: 1024.99px){
    .col-lg-3 {
        -ms-flex: 0 0 20%;
        flex: 0 0 20%;
        max-width: 20%;
    }

    .col-lg-7 {
        -ms-flex: 0 0 63.333333%;
        flex: 0 0 63.333333%;
        max-width: 63.333333%;
    }
    .col-lg-4 {
        -ms-flex: 0 0 28.333333%;
        flex: 0 0 28.333333%;
        max-width: 28.333333%;
    }
}
@media (min-width: 1200px){
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 80%;
    }

}