@font-face {
    font-family: 'iCielBCDDCHardwareRough-Compressed';
    src: url("../fonts/iCielBCDDCHardwareRough-Compressed.eot");
    src: url("../fonts/iCielBCDDCHardwareRough-Compressed.eot?#iefix") format("embedded-opentype"), url("../fonts/iCielBCDDCHardwareRough-Compressed.woff") format("woff"), url("../fonts/iCielBCDDCHardwareRough-Compressed.ttf") format("truetype"), url("../fonts/iCielBCDDCHardwareRough-Compressed.svg#iCielBCDDCHardwareRough-Compressed") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Barlow';
    src: url("../fonts/Barlow-Regular.eot");
    src: url("../fonts/Barlow-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Barlow-Regular.woff") format("woff"), url("../fonts/Barlow-Regular.ttf") format("truetype"), url("../fonts/Barlow-Regular.svg#Barlow-Regular") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Barlow';
    src: url("../fonts/Barlow-Bold.eot");
    src: url("../fonts/Barlow-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/Barlow-Bold.woff") format("woff"), url("../fonts/Barlow-Bold.ttf") format("truetype"), url("../fonts/Barlow-Bold.svg#Barlow-Bold") format("svg");
    font-weight: bold;
    font-style: normal;
    font-display: swap
}

/* ============ RESET & BASE ============ */
* {
    box-sizing: border-box
}

html, body {
    height: 100%;
    margin: 0
}

.imgc, .imgc0 {
    position: relative
}

    .imgc:before, .imgc0:before {
        content: "";
        display: block;
        padding-bottom: 66.66%
    }

    .imgc img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover
    }

    .imgc0 img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: scale-down;
           object-fit: scale-down
    }

    .imgc video, imgc iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover
    }

body {
    font: 16px/1.5 'Barlow';
    background: url("../images/body_bg.jpg");
    background-attachment: fixed;
}

.container {
    width: calc(100% - 100px);
    margin: 0 auto
}

.flex {
    display: flex;
}

.img_doc {
    display: none
}

.cate_title {
    font: 100px 'iCielBCDDCHardwareRough-Compressed';
    padding-bottom: 10px;
    border-bottom: 4px solid #56735e;
    margin-bottom: 20px;
    color: #000
}

.cate_desc {
    color: #000;
    font-size: 30px;
    margin-bottom: 30px
}


.info {
    text-align: center;display: none
}

.big_title {
    font: 118px 'iCielBCDDCHardwareRough-Compressed';
    color: #56735e;margin-bottom: 22px
}
.big_desc {
    font: 60px 'iCielBCDDCHardwareRough-Compressed';color: #000;line-height: 75px;letter-spacing: -1.3px
}

.big_content {
    font-size: 30px;
    color: #000;line-height: 40px
}

    .big_content b {
        color: #56735e
    }


/* ----- BLOCK 1: no effects ----- */
.block_type1 .imgc:before {
    padding-bottom: 100vh
}
.block_type1 {position: relative}
    .block_type1 .info {position: absolute;z-index: 2;top: 20%;width: 100%;padding: 0 22%}
    /* ----- BLOCK 2: ----- */
    .block_type2 {
        position: relative;
        height: 100vh;
        --steps: 4; /* sẽ được JS set theo số .imgc */
        height: calc(var(--steps) * 100vh);
    }

    .block_type2 .container {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
        will-change: transform;
    }

    .block_type2 .left {
        flex: 0 0 50%;
        margin-right: 80px;
        position: relative
    }

        .block_type2 .left .imgc0 {
            opacity: 0;
            inset: 0;
            position: absolute;
            width: 100%;
            top: 50px
        }

            .block_type2 .left .imgc0:before {
                padding-bottom: calc(100vh - 100px)
            }

            .block_type2 .left .imgc0.active {
                opacity: 1;
                position: relative;
            }

    .block_type2 .right {
        flex: 0 0 calc(50% - 80px);
        padding-top: 5%;
        max-width: 700px
    }

        .block_type2 .right .item {
            transition: color 0.3s ease;
            color: white
        }

            .block_type2 .right .item.active {
                color: #000
            }

.position {
    position: relative
}

    .position:after {
        content: "";
        width: 2px;
        height: calc(100% - 60px);
        top: 20px;
        left: 0;
        background-color: white;
        display: block;
        position: absolute
    }

    .position .item {
        padding: 10px 0 10px 20px;
        color: white;
        position: relative;
        text-transform: uppercase;
        font: 40px 'iCielBCDDCHardwareRough-Compressed';
        z-index: 2
    }

        .position .item:before {
            content: "";
            display: block;
            width: 8px;
            height: 8px;
            border: 2px solid white;
            border-radius: 50%;
            position: absolute;
            left: -5px;
            top: 20px;
            background-color: #f09584
        }

        .position .item.is-active {
            color: #56735e;
        }


/* ----- BLOCK 3: ----- */
.block_type3, .block_type6 {
    position: relative;
    min-height: calc(100vh + var(--leftH, 0px));
}

    .block_type3 .container {
        position: relative
    }

    .block_type3 .left, .block_type6 .right {
        flex: 0 0 35%;
        margin-right: 5%;
        position: relative;
        overflow: hidden;
    }

        .block_type3 .left .block_scroll, .block_type6 .right .block_scroll {
            font-size: 30px;
            padding: 30px 40px;
            background-color: #bbc9ba;
            color: #000;
            transform: translateY(100vh);
            transition: transform 0.2s linear;
            will-change: transform;
        }

    .block_type3 .right, .block_type6 .left {
        flex: 0 0 60%;
        position: relative;
        min-height: calc(100vh + var(--leftH, 0px));
    }

        .block_type3 .right .imgc0, .block_type6 .left .imgc0 {
            position: sticky;
            position: -webkit-sticky;
            top: 0;
            height: 100vh;
        }

    .block_type3.unstick .right {
        position: relative;
        top: auto;
    }

    .block_type3 .right .imgc0:before, .block_type6 .left .imgc0:before {
        padding-bottom: 100vh
    }

/* ----- BLOCK 4: ----- */
.block_type4 {
    position: relative
}

    .block_type4 .imgc {
        position: sticky;
        position: -webkit-sticky;
        inset: 0;
        height: 100vh;
        z-index: 0
    }

        .block_type4 .imgc.after {
            opacity: 0
        }

            .block_type4 .imgc.after.active {
                opacity: 1
            }

    .block_type4 .container {
        position: relative;
        z-index: 2
    }

    .block_type4 .content {
        width: 30%;
        padding: 30px 40px;
        background-color: #bbc9ba;
        color: #000;
        font-size: 20px
    }

        .block_type4 .content img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto 30px auto
        }
    .block_type4 .info {position: absolute;z-index: 3;top: 3%;left: 0;width: 100%;padding: 0 31%}
    .block_type4 .big_title {font-size: 90px}
    /* ----- BLOCK 5: ----- */
    .block_type5 {
        position: relative
    }
        .block_type5 .info {position: absolute;z-index: 3;top: 11%;left: 0;width: 100%}
        .block_type5 .big_title {font-size: 90px}
        .block_type5 .imgc {
            position: sticky;
            position: -webkit-sticky;
            inset: 0;
            z-index: 0
        }

        .block_type5 .imgc:before {
            padding-bottom: 100vh
        }

        .block_type5 .imgc.item {
            position: sticky;
            position: -webkit-sticky;
            inset: 0;
            height: 100vh;
            opacity: 0;
            pointer-events: none;
        }

        .block_type5 .imgc.item {
            z-index: 2
        }

            .block_type5 .imgc.item.active {
                opacity: 1;
                z-index: 3
            }

/* ----- BLOCK VIDEO: ----- */
.block_video .imgc:before {
    padding-bottom: 56.25%
}

.block_type6 {
    min-height: calc(100vh + var(--rightH, 0px))
}

    .block_type6 .left {
        margin-right: 5%;
        min-height: calc(100vh + var(--rightH, 0px));
    }

    .block_type6 .right {
        margin-right: 0;
        min-height: calc(100vh + var(--rightH, 0px))
    }

        .block_type6 .right img {
            display: inline-block;
            max-width: 100%;
            height: auto !important
        }
/* ----- BLOCK 7: ----- */
.block_type7 {
    position: relative
}

    .block_type7 .imgc.item {
        position: sticky;
        position: -webkit-sticky;
        inset: 0;
        opacity: 0;
        pointer-events: none
    }

    .block_type7 .imgc:before {
        padding-bottom: 100vh
    }


    .block_type7 .imgc.item.active {
        opacity: 1;
    }

/* ----- BLOCK 8: ----- */
.block_type8 {
    position: relative;height: 100vh;overflow: hidden
}

    .block_type8 .container {
        position: relative;z-index: 2;
        padding: 50px 0
    }

    .block_type8 .imgc.bg {position: absolute;top: 0;left: 0;width: 100%;height: 100%}

    .block_type8 .imgc0:before {
        padding-bottom: calc(100vh - 100px)
    }