/* =========================
   VINFAST SHOWROOM
========================= */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    overflow-x:hidden;
}

.vinfast-showroom{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

/* =========================
   ẢNH XE
========================= */

.car-image-wrap{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.car-image-wrap img{
    width:100%;
    max-width:900px;
    height:auto;
    display:block;
    margin:0 auto;
    object-fit:contain;
}

/* =========================
   CHỌN MÀU
========================= */

.car-colors{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    margin-top:18px;
}

/* Ẩn label */

.label{
    display:none;
}

.color-list{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
}

/* Chấm màu */

.color-list span{
    width:28px;
    height:28px;
    border-radius:50%;
    cursor:pointer;
    position:relative;
    transition:all .2s ease;
    border:1px solid rgba(0,0,0,.08);
}

/* Hover */

.color-list span:hover{
    transform:scale(1.05);
}

/* Vòng xanh khi chọn */

.color-list span.active::before{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:34px;
    height:34px;
    border:2px solid #0066ff;
    border-radius:50%;
    transform:translate(-50%,-50%);
}

/* Viền trắng bên trong */

.color-list span.active::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:30px;
    height:30px;
    border:2px solid #ffffff;
    border-radius:50%;
    transform:translate(-50%,-50%);
}

/* Responsive */

@media(max-width:767px){

    .car-image-wrap img{
        max-width:100%;
    }

    .color-list{
        gap:10px;
    }

    .color-list span{
        width:24px;
        height:24px;
    }

    .color-list span.active::before{
        width:30px;
        height:30px;
    }

    .color-list span.active::after{
        width:26px;
        height:26px;
    }
}