@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
    margin: 0;
    background-color: #fff;
    color: #000;
}

#content-compleate {
    padding-top: 0;
}

.container {
    width: 90%;
    max-width: 1040px;
    margin: 0 auto;
}

.top-text {
    font-size: 24px;
    font-weight: 500;
    color: #000;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    line-height: 1;
}

hr.top-line {
    border: none;
    border-top: 4.5px solid #282828;
    margin-bottom: 20px;
    margin-top: 0.5rem;
}

#content-compleate .header {
    z-index: 1;
    position: relative;
}

.header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
}

.title-large {
    font-size: 64px;
    line-height: 1.1;
    font-weight: 400;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1;
}

.title-large span:first-child {
    margin-right: 8px;
    color: #282828;
}

.title-large .highlight {
    font-weight: 800;
    font-size: 72px;
    line-height: 1;
    color: #A04642;
}

.images {
    height: 100%;
    width: 100%;
}



.description-images {
    display: flex;
    justify-content: center;
    gap: 3rem;
    align-items: flex-start;
    margin-bottom: 3rem;
}

.description-images .description {
    width: 40%;
    white-space: pre-line;
    color: #282828;
    font-family: 'Inter', sans-serif;
    line-height: 2;
    font-size: 16px;
    word-break: break-word;
    margin-top: 5rem;
}


.text-block p {
    margin: 4px 0;
}

hr.bottom-line {
    border: none;
    border-top: 4px solid #282828;
    width: 313px;
    margin: 48px 0 16px 0;
}

.footer-text {
    text-align: right;
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end;
}

.infor-maker .icon-artist {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.infor-maker .icon-artist img {
    width: 75px;
    height: 75px;
    object-fit: cover !important;
    display: initial;
    border-radius: 50%;
    z-index: 1;
    position: relative;
}


.infor-maker .icon-artist p {
    font-size: 38px;
    text-decoration: none;
    color: #262626;
    margin-bottom: 0;
    position: relative;
}

.infor-maker .icon-artist p:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 6px;
    width: 100%;
    height: 1px;
    background: #262626;
}

.introduce-maker-compleate p {
    font-size: 14px;
    color: #282828;
    font-family: 'Inter', sans-serif;
    margin-bottom: 20px;
}

#recommend-carousel .owl-stage {
    gap: 5rem;
}

.btn-recomment:before {
    content: "";
    background: url(/images/img-renew2025/icons/arrow-btn.svg);
    width: 8px;
    height: 15px;
    background-size: contain;
    position: absolute;
    right: 10px;
    top: 11px;
}

.btn-recomment:hover:before {
    filter: invert(1);
}

#recommend-carousel .title {
    overflow: hidden;
    text-overflow: ellipsis;
    /* -webkit-line-clamp: 2; */
    display: -webkit-box;
    line-height: 1.6;
    -webkit-box-orient: vertical;
    font-size: 14px;
    text-align: center;
    margin-top: 20px;
}

#recommend-carousel .title span {
    position: relative;
    top: 2px;
    display: inline-block;
    width: 14px;
    height: 14px;
    padding-left: 0.5rem;
}

.footer-text div {
    cursor: pointer;
    color: #282828;
    font-size: 16px;
    font-weight: 600;
}

.soild-mobile {
    display: none;
}

hr {
    margin-top: 0.5rem !important;
}

.m-show-maker {
    margin: 3rem 0;
}




/* Responsive */
@media (min-width: 768px) {

    .title-large {
        font-size: 100px;
    }

    .title-large .highlight {
        font-size: 120px;
    }

    html[lang='en'] .title-large {
        font-size: 80px;
    }

    html[lang='en'] .title-large .highlight {
        font-size: 90px;
    }

    html[lang='fr'] .title-large {
        font-size: 60px;
    }

    html[lang='fr'] .title-large .highlight {
        font-size: 65px;
    }

    .header {
        flex-wrap: nowrap;
    }

    .text-block {
        margin-top: -2rem;
    }


}

@media (max-width: 980px) {
    .title-large {
        font-size: 80px;
    }

    .title-large .highlight {
        font-size: 90px;
    }

    html[lang='fr'] .title-large {
        font-size: 55px;
    }

    html[lang='fr'] .title-large .highlight {
        font-size: 60px;
    }

}

@media (max-width: 920px) {

    html[lang='en'] .title-large {
        font-size: 70px;
    }

    html[lang='en'] .title-large .highlight {
        font-size: 80px;
    }

    html[lang='fr'] .title-large {
        font-size: 50px;
    }

    html[lang='fr'] .title-large .highlight {
        font-size: 55px;
    }

}

@media (max-width: 810px) {

    html[lang='fr'] .title-large {
        font-size: 45px;
    }

    html[lang='fr'] .title-large .highlight {
        font-size: 50px;
    }

}

@media (max-width: 801px) {

    html[lang='en'] .top-text {
        font-size: 21px;
    }

    .title-large {
        font-size: 64px;
    }

    .title-large .highlight {
        font-size: 80px;
    }

    html[lang='en'] .title-large {
        font-size: 65px;
    }

    html[lang='en'] .title-large .highlight {
        font-size: 75px;
    }

}


#content-compleate .btn.btn-recomment {
    font-size: 14px;
    min-width: 280px;
    /* margin-left: 5px; */
    border-radius: 3px;
}


/* Responsive for mobile */
@media (max-width: 768px) {
    .description-images {
        flex-direction: column-reverse;
        gap: 24px;
        margin-bottom: 24px;
    }

    .description-images .description {
        width: 100%;
        font-size: 12px;
        margin-top: 0rem !important;
    }

    #recommend-carousel .owl-stage {
        gap: unset;
    }

    hr.bottom-line {
        width: 100%;
        border-top: 3px solid #282828;
    }

    .soild-mobile {
        display: block;
        width: 50%;
        height: 1px;
        background-color: #d3cfcf;
        margin: 0 auto;
    }

    #content-compleate .btn.btn-recomment {
        justify-content: center;
        display: flex;
    }

    .footer-text {
        gap: 3px;
        justify-content: center;
    }

    .footer-text div.maker-name,
    .introduce-maker-compleate,
    #recommend-carousel .title {
        font-size: 12px;
    }

    .top-text {
        font-size: 3.7vw;
        text-align: center;
    }

    .infor-maker .icon-artist p {
        font-size: 20px;
    }

    .introduce-maker-compleate,
    #compleate-slider #recommend-carousel .title,
    .introduce-maker-compleate p {
        font-size: 12px !important;
    }

    .compleate-slider .owl-theme .owl-nav [class*=owl-] {
        background-color: #fff !important;
        box-shadow: unset !important;
        top: 44%;
    }

    .compleate-slider .owl-theme .owl-nav .owl-prev {
        left: 0px;
    }

    .compleate-slider .owl-theme .owl-nav .owl-next {
        right: 0px;
    }

    #content-compleate .btn.btn-recomment {
        width: 250px;
        margin: 0 auto;
    }

    .m-show-maker {
        margin: 24px 0;
    }

    .footer-text div {
        font-size: 12px !important;
    }

    hr.top-line {
        border-top: 3px solid #282828;
    }

    .hidden-mobile {
        display: none;
    }

    html[lang='en'] .top-text {
        font-size: 15px;
    }

    html[lang='en'] .title-large {
        font-size: 50px;
    }

    html[lang='en'] .title-large .highlight {
        font-size: 60px;
    }

    .header {
        display: block !important;
    }



    .infor-maker .icon-artist img {
        width: 60px;
        height: 60px;
    }

    #recommend-carousel .title {
        margin: 0 auto;
        max-width: 280px;
        margin-top: 20px !important;
    }

}

@media (max-width: 767px) {
    .title-large {
        font-size: 12.3vw;
        justify-content: space-between;
    }

    .title-large .highlight {
        font-size: 15vw;
    }

    html[lang='en'] .top-text {
        font-size: 2.9vw;
    }

    html[lang='en'] .title-large {
        font-size: 10vw;
    }

    html[lang='en'] .title-large .highlight {
        font-size: 12vw;
    }

    html[lang='fr'] .title-large {
        font-size: 7vw;
    }

    html[lang='fr'] .title-large .highlight {
        font-size: 8vw;
    }

}



@media (max-width: 767px) {
    .text-block {
        max-width: 100%;
        margin-top: 24px;
    }

    .footer-text.m-show-maker.mt-3 {
        margin-top: 24px !important;
    }

    .infor-maker.mb-3 {
        margin: 24px 0 !important;
    }

    .introduce-maker-compleate,
    #compleate-slider #recommend-carousel .title {
        margin-bottom: 24px;
    }

}

.compleate-slider .item {
    background: #e3e3e3;
    height: 294px;
    width: 280px;
    align-items: center;
    margin: 0 auto;
    position: relative;

}

.compleate-slider .item img {
    margin: 0 auto;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: contain;
    font-family: 'object-fit: contain;';
    display: initial;
}

@media (max-width: 1150px) {

    .compleate-slider .item {
        height: calc(30vw - 2.5rem);
        width: calc(28vw - 2.5rem);
    }

}


.compleate-slider .owl-carousel .owl-nav button.owl-prev,
.compleate-slider .owl-carousel .owl-nav button.owl-next {
    display: none;
}

@media (max-width: 768px) {

    .compleate-slider .owl-carousel .owl-nav button.owl-prev,
    .compleate-slider .owl-carousel .owl-nav button.owl-next {
        display: block !important;
    }

    .compleate-slider .owl-theme .owl-nav [class*=owl-] {
        background-color: unset !important;
        box-shadow: none !important;
        -webkit-box-shadow: none !important
    }

    .compleate-slider .owl-carousel button.owl-next.disabled,
    .compleate-slider .owl-carousel button.owl-prev.disabled {
        display: none !important;
    }

}


.introduce-maker-compleate .note-admin {
    margin-bottom: 0 !important;
}

.maker-name:hover {
    text-decoration: underline;
}

.introduce-maker-compleate,
#compleate-slider #recommend-carousel .title {
    font-size: 14px;
    color: #282828;
    margin-bottom: 2rem;
}

.compleate-slider .icon-favor:before {
    top: -3px;
}

.btn.btn-recomment {
    border-radius: 1px;
}

.owl-nav button img {
    height: 20px;
}

.compleate-slider .owl-carousel .owl-nav button.owl-prev,
.compleate-slider .owl-carousel .owl-nav button.owl-next {
    display: none;
}

@media (max-width: 767px) {
    .compleate-slider .item {
        height: 52vw;
        width: 50vw;
        max-width: 300px;
        max-height: 315px;
    }
}


@media (max-width: 375px) {
    html[lang='ja'] .title-large {
        font-size: 12vw;
    }
}

/* @media (min-width: 768px) and (max-width: 1024px) {
    .item-tablet-carousel {
        padding: 0;
    }
} */