/* Biến dùng để lấy khoảng cách thay đổi của thẻ card (trái và phải) */

section#section-5 {

    padding-top: 73px;
    padding-bottom: 72px;
    background-color: #000;

}

@media screen and (max-width: 399px) {
    /* section 5 */

    section.section-5 {

        /* padding: 5% 5% 0 5% !important; */

        padding: 5% 2% 0 2% !important;

    }

    

    section.section-5 img.gray-star {

        /*margin-left: -100px;*/

    }

    .section-5-title {

        font-size: 45px;

        text-transform: uppercase;

        font-family: 'SVN-Gilroy XBold', sans-serif;

        margin: 0;

    }

    .section-5-subtitle {

        font-size: 15px;

        color: white;

        margin: 0;

        padding-bottom: 5%;

    }



    /* Section Khóa học của anh Trung */

    .course-subheading {

        padding: 0 !important;

    }

    .course-container .gray-star-container {

        text-align: center !important;

    }

    img.gray-star {

        width: 113px !important;

    }

    .course-heading {

        font-size: 32px !important;

        margin-top: 0 !important;

    }

    .course-subheading {

        font-size: 16px !important;

        padding: 0 6px !important;

        text-align: center !important;

    }



    .course-card-title,

    .course-card-desc {

        text-align: left !important;

    } 

    #section-5 .course-card-content .cta-container {

        justify-content: left !important;

    }

}

@media (min-width: 400px) and (max-width: 767px) {
    /* section 5 */

    section.section-5 {

        padding: 5% 5% 0 5% !important;

    }

    section.section-5 img.gray-star {

        /*margin-left: -100px;*/

    }

    .section-5-title {

        font-size: 45px;

        text-transform: uppercase;

        font-family: 'SVN-Gilroy XBold', sans-serif;

        margin: 0;

    }

    .section-5-subtitle {

        font-size: 15px;

        color: white;

        margin: 0;

        padding-bottom: 5%;

    }



    /* Section Khóa học của anh Trung */

    .course-container .gray-star-container {

        text-align: center !important;

    }

    img.gray-star {

        width: 113px !important;

    }

    .course-heading {

        font-size: 32px !important;

        margin-top: 0 !important;

    }

    .course-subheading {

        font-size: 16px !important;

        padding: 0 6px !important;

        text-align: center !important;

    }



    .course-card-title,

    .course-card-desc {

        text-align: left !important;

    } 

    #section-5 .course-card-content .cta-container {

        justify-content: left !important;

    }
}

@media (min-width: 768px) and (max-width: 819px) {
    /* section 5 */

    section.section-5 {

        padding: 5% 10%;

    }

    section.section-5 img.gray-star {

        /*margin-left: -100px;*/

    }

    .section-5-title {

        font-size: 45px;

        text-transform: uppercase;

        font-family: 'SVN-Gilroy XBold', sans-serif;

        margin: 0;

    }

    .section-5-subtitle {

        font-size: 15px;

        color: white;

        margin: 0;

        padding-bottom: 5%;

    }
}

@media (min-width: 1000px) and (max-width: 1050px) and (height: 1366px) {
    /* section 5 */

    section.section-5 {

        padding: 5% 10%;

    }

    section.section-5 img.gray-star {

        /*margin-left: -100px;*/

    }

    .section-5-title {

        font-size: 45px;

        text-transform: uppercase;

        font-family: 'SVN-Gilroy XBold', sans-serif;

        margin: 0;

    }

    .section-5-subtitle {

        font-size: 15px;

        color: white;

        margin: 0;

        padding-bottom: 5%;

    }

}

:root {

    --transform-course-card: 220px;

}



.course-section {

display: flex;

justify-content: center;

position: relative;

z-index: 1;

}



.course-container {

width: 100%;

text-align: center;

}



.course-heading {
    margin-bottom: 8px;
    background: linear-gradient(to right, #6f6f6f 10%, #ffffff 50%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding: 0 5%;
    color: #FFF;
    font-size: 50px;
    font-style: normal;
    font-weight: 800;
    text-transform: uppercase;
}



.course-subheading {

    margin: 0 auto 30px;
    padding: 0 5%;
    color: #FFF;
    text-align: center;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;

}

.course-subheading span{
    display: block;
}



.course-frame {

position: relative;

}



.course-carousel {

position: relative;

display: flex;

align-items: center;

justify-content: center;

}



.course-cards {

margin-top: 25px;

margin-bottom: 30px;

position: relative;     

height: calc(

                760px * 0.1                  /* 70% là cố định */

                + (100vw * 760 / 1920) * 0.8 /* 30% là co theo viewport */

                );

}



.course-cards.is-dragging {

cursor: grabbing;

}



/* CARD CƠ BẢN */

.course-card {

    position: absolute;     /* để điều khiển bằng transform */

    top: 0;

    left: 50%;              /* gốc là giữa */

    display: block;

    border-radius: 20px;

    overflow: hidden;

    color: #fff !important;

    background: none;

    height: calc(

        760px * 0.1 + (100vw * 760 / 1920) * 0.8

    );

    transform-origin: center bottom;

    transition:

        transform 1.25s ease,

        opacity 1.25s ease,

        filter 1.25s ease;

    cursor: pointer;

    aspect-ratio: 9/15;

    max-width: unset;

    width: auto;

    z-index: 1;

    border-radius: 15px;
    padding: 15px;
    background: #000;
}



.course-card.course-card-web3  {

background-image: url(https://learningchain.vn/wp-content/uploads/2025/11/homepage_course_image_background.webp);

background-size: contain;

background-position: center;

background-repeat: no-repeat;

}



.course-card.course-card-ai  {

background-image: url(https://learningchain.vn/wp-content/uploads/2025/11/ai-generated-concept-human-copy-3.webp);

background-size: contain;

background-position: center;

background-repeat: no-repeat;

background-position: 50% 40%;

}



.course-card.course-card-blockchain  {

background-image: url(https://learningchain.vn/wp-content/uploads/2025/11/Frame-1707483614.webp);

background-size: contain;

background-position: center;

background-repeat: no-repeat;

}


.course-card.course-is-center::before {

opacity: 1;

}



/* ============================================== */



.course-card img {

position: absolute;

inset: 0;

width: 100%;

height: 100%;

object-fit: contain;

}



.course-card-content {

    position: absolute;

    inset: auto 20px 18px;

    text-align: left;

    user-select: none;

    z-index: 10; /* nằm trên pseudo-element border */

}



.course-card-title {

    transition: font-size 1s 
    ease-in-out;
    color: #FFF;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 38px;
    text-transform: uppercase;
    margin: 0;

}



.course-card-desc {
    color: #FFF;
    text-align: justify;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}



/* TRẠNG THÁI (xoay vòng bằng transform) */

/* offset ngang giữa các card: chỉnh ở 260px */

.course-card.course-is-center {

transform: translateX(-50%) translateY(28px) scale(1.05) ;

filter: brightness(1);

z-index: 30;

}



.course-card.course-is-left {

transform: translateX(calc(-100% - var(--transform-course-card))) translateY(-28px) scale(0.85);

}



.course-card.course-is-right {

transform: translateX(calc(0% + var(--transform-course-card))) translateY(-28px) scale(0.85);

}

.course-carousel .course-card.course-is-back {

    z-index: 0 ; /* nhỏ nhất trong 3 thằng */

}

.course-card.course-is-left .course-card-title,

.course-card.course-is-right .course-card-title {

    color: #FFF;
    font-size: 20.192px;
    font-style: normal;
    font-weight: 700;
    line-height: 25.577px;
    text-transform: uppercase;
    margin: 0;

}



.course-card.course-is-left .course-card-desc,

.course-card.course-is-right .course-card-desc {

    color: #FFF;
    text-align: justify;
    font-size: 10.769px;
    font-style: normal;
    font-weight: 400;
    line-height: 16.154px;
    letter-spacing: -0.215px;
    margin: 0;

}



.course-card.course-is-left .course-card-cta::after,

.course-card.course-is-right .course-card-cta::after,

.course-card.course-is-left .course-card-cta::before,

.course-card.course-is-right .course-card-cta::before {

height: 33px;

}







/* ô bên trong che lại phần giữa, giữ bo góc (nếu có dùng) */

.fade-border-box {

width: 100%;

height: 100%;

border-radius: 22px;

background: #000;

color: #fff;

padding: 16px;

box-sizing: border-box;

}



.course-container .gray-star-container {

text-align: left;

}

@media(max-width: 1024px) {

    #section-5.section-5.visible {

        transform: translateY(-10px);

    }

}

@media(min-width: 400px) and (max-width: 768px) {

    #section-5.section-5.visible {

        transform: translateY(-200px);

    }

}

@media(max-width: 399px){

    #section-5.section-5.visible {

        transform: translateY(-(calc(190px * 0.2 + (100vw * 190 / 1920) * 0.8)));

    }

}







@media (min-width: 1025px) {

    .course-container .gray-star-container img {

    margin-left: -100px;   

    }

} 

/*.course-frame .navigate-button-img {*/

/*  margin: 40px auto 0;*/

/*  display: block;*/

/*}*/



/*.course-frame .navigate-button-img #coursePrevBtn {*/

/*  margin-right: 10px;*/

/*}*/

.cta-container .cta-button {

    white-space: nowrap;

}

#section-5 .course-card-content .cta-container {

    justify-content: left;

}

@media (max-width: 1880px) {

    :root {

        --transform-course-card: 230px;

    }

    .course-card {

    aspect-ratio: 9 /13;

    }

}



@media (max-width: 1700px) {

    :root {

        --transform-course-card: 215px;

    }

    .course-card-content {

        inset: auto 20px 5px;

    }

}



@media (max-width: 1600px) {

    :root {

        --transform-course-card: 200px;

    }

    .course-card {

    aspect-ratio: 9 /12;

    }

    .course-card-content {

        inset: auto 20px 0px;

    }

}

  

@media (max-width: 1440px) {

    :root {

        --transform-course-card: 180px;

    }

    .course-card {

    aspect-ratio: 9 /12;

    }

}

  
  /* Từ 1024px trở xuống: course thành 1 cột, bỏ hiệu ứng carousel chồng lớp */

@media (max-width: 1024px) {

    .section-5 a.cta-button {

        margin-left: unset;

    }

    .course-heading {

        font-size: 40px;

    }

    .course-subheading {

        font-size: 16px;

        margin-bottom: 20px;

    }

    

    .gray-star-container img {

        position: unset;

    }

    .course-card-content {

        text-align: center;

        inset: auto 20px 35px;

    }

    .course-cards {

    height: auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    }



    .course-card {

    position: relative;

    top: auto;

    left: auto;

    width: min(680px, 75vw);   

    height: auto;

    margin-bottom: 32px;

    transform: none;

    aspect-ratio: 9 /12;

    }

    #section-5 .course-card-content .cta-container {

        justify-content: center;

    }

    .course-card.course-is-center,

    .course-card.course-is-left,

    .course-card.course-is-right,

    .course-card.course-is-hidden {

        

    transform: none;

    opacity: 1;

    pointer-events: auto;

    }

    .course-card.course-is-left .course-card-title,

    .course-card.course-is-right .course-card-title {

    font-size: 30px;

    }

    

    /*.section-5 .navigate-button-img {*/

    /*    display: none;*/

    /*}*/

    .section-5 {

        padding-top: 5%;

        padding-bottom: 5%;

    }

}



@media (max-width: 600px) {

    .section-5 a.cta-button {

       margin-left: 35px;

    }

    .course-card {

        width: min(450px, 90vw);

    }

    .course-container .course-card .course-card-title {

        font-size: 20px;

    }

    .course-card-desc {

        font-size: 14px;

    }

    .course-card-content {

        inset: auto 10px 0px;

    }

    .section-5 .cta-container .cta-button {

        font-size: 20px;

    }

}

@media (min-width: 100px) and (max-width: 500px) {

    .course-container .gray-star-container {

        text-align: center !important;

    }

    img.gray-star {

        width: 113px !important;

    }

    .course-heading {

        font-size: 32px;

        margin-top: 0 !important;

    }

    .course-subheading {

        font-size: 16px;

        padding: 0 !important;

        text-align: center !important;

    }

    

    .course-card-title,

    .course-card-desc {

        text-align: left !important;

    } 

    #section-5 .course-card-content .cta-container {

        justify-content: left !important;

    }

}


#warpCanvasBackgroundHomepage {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}