body {
    font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.MacBookAirM4 img {
    max-width: 100%;
}

.gradient-text-blue {
    width: fit-content;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    --gradient-start: #022640;
    --gradient-end: #5786AB;
    background-image: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
    font-size: 51px;
}

strong.gradient-text-blue {
}

.section1 .text-item {
    text-align: start;
    padding: 3% 15%;
}

    .section1 .text-item p {
        font-size: 12px;
    }

    .section1 .text-item strong {
        /* font-size: 40px; */
    }

.section1 img {
    max-width: 100%;
}

.section2 {
    padding: 0 15%;
}

    .section2 .text-item {
        font-size: 20px;
    }

    .section2 img {
        max-width: 100%;
    }

    .section2 .item-img {
        position: relative;
        color: #1d1d1f;
    }

        .section2 .item-img div {
            position: absolute;
            height: 100%;
            top: 0;
            color: #1d1d1f;
            /* z-index: 2; */
            font-size: 25px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 10px;
        }

            .section2 .item-img div strong {
                font-size: 60px;
            }

        .section2 .item-img .item-img-1 {
            left: 15%;
        }

        .section2 .item-img .item-img-2 {
            right: 15%;
        }

.item-color {
    gap: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

    .item-color .color-item {
        padding: 20px;
    }

    .item-color .item-color1 img {
        padding: 20px;
        background-color: #FBFBFB;
    }

    .item-color img {
        max-width: 300px;
    }

    .item-color .item-color2 {
        position: relative; /* padding: 20px 20px 74px 20px; */
    }

        .item-color .item-color2 .color-btn .color {
            margin: 0;
            padding: 0;
        }

            .item-color .item-color2 .color-btn .color li {
                position: relative;
                padding-left: 10px;
                padding-right: 10px;
                float: left;
                margin: -1px 5px;
                padding: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                /* gap: 5px; */
                font-size: 11px;
            }
                .item-color .item-color2 .color-btn .color li.selected {
                    border-color: #0071e3;
                    cursor: default;
                }
    .item-color .color-btn .color li span.color-block {
        position: absolute;
        bottom: 0px;
        width:max-content
    }
            .item-color .item-color2 .color-btn .color div {
                border: 2px solid transparent;
                border-radius: 50%;
                box-sizing: border-box;
                color: #1d1d1f;
                cursor: pointer;
                float: left;
                margin-bottom: 25px;
                padding: 3px;
                width: 42px;
                height: 42px;
                z-index: 1;
            }

.colornav-swatch {
    background: #f5f5f7 50%;
    border-radius: 50%;
    display: block;
    width: 32px;
    height: 32px;
}

#btn-color-block .xanh div span {
    background-color: #c8d8e0;
}

#btn-color-block .bac div span {
    background-color: #e3e4e6;
}

#btn-color-block .anhsao div span {
    background-color: #f0e4d3;
}

#btn-color-block .den div span {
    background-color: #2e3642;
}

.slider-item-img .item {
    max-width: 100%;
}

    .slider-item-img .item img {
        max-width: 100%;
    }

    .slider-item-img .item p {
        margin-top: 32px;
        display: block;
        transition: opacity 300ms ease-in-out;
        font-size: 21px;
        font-family: SF Pro Display, SF Pro Icons, Helvetica Neue, Helvetica, Arial, sans-serif;
        text-align: start;
        /* margin: 0; */
    }
.section3, .section4, .section5 {
    padding: 5% 15%;
}
    .section4 .text-item{
        margin-bottom:5%;
    }


.slick-product-prev {
    left: 20px
}

.slick-product-next {
    right: 20px
}

.slick-arrow, .slick-dots {
    opacity: 1
}

.slick-dots {
    bottom: .625rem;
    display: flex;
    left: 50%;
    position: absolute;
    z-index: 2;
    --tw-translate-x: -50%;
    align-items: center;
    background-color: #090d1480;
    border-radius: 100px;
    justify-content: center;
    padding: .125rem .375rem;
    transform: translate(var(--tw-translate-x),0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
    width: auto
}

    .slick-dots li {
        margin: 0
    }

        .slick-dots li button {
            background-color: #ffffff80;
            border-radius: 9999px;
            height: .375rem;
            margin: .25rem;
            padding-left: .125rem;
            padding-right: .125rem;
            transition-delay: 0s;
            transition-duration: .3s;
            transition-property: all;
            transition-timing-function: cubic-bezier(.4,0,.2,1);
            transition-timing-function: ease;
            width: .375rem
        }

        .slick-dots li.slick-active button {
            width: 1.2rem;
            --tw-bg-opacity: 1;
            background-color: rgb(255 255 255 / var(--tw-bg-opacity))
        }

.slick-product-prev, .slick-product-next {
    width: 40px;
    height: 40px;
    background-color: #f3f4f6
}

.slick-product-prev, .slick-product-next {
    font-size: 16px;
    color: black
}

.slick-product-prev, .slick-product-next {
    width: 40px;
    height: 40px;
}

.slick-product-prev, .slick-product-next {
    font-size: 16px;
}
.item-nomargin .slick-list {
    margin-left: 0px;
    margin-right: 0px;
}