/* RESET */
*, *::after, *::before{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* ================= CONTAINER ================= */

.carousel{
    /* เดิม width:100%;
    height:90vh; */

    position: relative;
    width: 100%;
    padding: 350px 0;
    top: 60%;
    left: -1%;
}

/* ================= SLIDE ================= */

.carousel__item{
    position: absolute;
    top: 50%;
    left: 50%;

    width: 950px;
    height: 450px;

    border-radius: 10px;
    overflow: hidden;

    transform: translate(-50%, -50%) scale(.8);
    opacity: .5;
    z-index: 1;

    transition: all .4s ease;
}

.carousel__item img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:12px;
}

/* ตัวกลาง */
.carousel__item--main{
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    z-index: 3;
}

/* ซ้าย */
.carousel__item--left{
    transform: translate(-83%, -50%) scale(.85);
    opacity: .7;
    z-index: 2;
}

/* ขวา */
.carousel__item--right{
    transform: translate(-14%, -50%) scale(.85);
    opacity: .7;
    z-index: 2;
}

.carousel__item--left img,
.carousel__item--right img{
    filter:grayscale(70%);
}

/* HOVER */
.carousel__item--main:hover{
    transform:translate(-50%,-50%) scale(1.05);
}
.carousel__item--left:hover{
    transform:translate(-120%,-50%) scale(.95);
}
.carousel__item--right:hover{
    transform:translate(20%,-50%) scale(.95);
}

/* ================= BUTTON ================= */

.carousel__btns{
    position:absolute;
    bottom:20px;
    top: 75%;
    left:50%;
    padding: 80px 0;
    transform:translateX(-50%);
    display:flex;
    gap:16px;
    z-index:10;
}

.carousel__btn{
    background:rgba(0,0,0,.6);
    width:48px;
    height:48px;
    border-radius:50%;
    border:none;
    color:#fff;
    cursor:pointer;
    transition:.2s;
}

.carousel__btn svg{
    width:20px;
    height:20px;
}

.carousel__btn:hover{
    background:#ff2c2c;
}

/* ================= TABLET ================= */
@media (max-width:1024px){

.carousel{
    height:60vh;          /* จาก 20vh -> 60vh */
    min-height:420px;     /* กันเตี้ยเกิน */
}

/* ขยายภาพ */
.carousel__item{
    top: 65%;
    left:50%;
    width:1200%;
    max-width:650px;
}

/* ลด offset เพื่อให้เห็นภาพเต็มขึ้น */
.carousel__item--left{
    transform:translate(-62%,-50%) scale(.9);
}

.carousel__item--right{
    transform:translate(-35%,-50%) scale(.9);
}

.carousel__btns{
    position:absolute;
    bottom:20px;
    top: 60%;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:16px;
    z-index:10;
}
}

@media (max-width:1100px){

.carousel{
    height:60vh;          /* จาก 20vh -> 60vh */
    min-height:420px;     /* กันเตี้ยเกิน */
}

/* ขยายภาพ */
.carousel__item{
    top: 50%;
    left:50%;
    width:250%;
    max-width:900px;
}

/* ลด offset เพื่อให้เห็นภาพเต็มขึ้น */
.carousel__item--left{
    transform:translate(-70%,-50%) scale(.9);
}

.carousel__item--right{
    transform:translate(40%,-50%) scale(.9);
}

.carousel__btns{
    position:absolute;
    bottom:20px;
    top: 60%;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:16px;
    z-index:10;
}
}


/* ================= ipad MOBILE ================= */
@media (max-width:820px){

.carousel{
    height:60vh;          /* จาก 20vh -> 60vh */
    min-height:420px;     /* กันเตี้ยเกิน */
}

/* ขยายภาพ */
.carousel__item{
    top: 65%;
    left:50%;
    width:1200%;
    max-width:650px;
}

/* ลด offset เพื่อให้เห็นภาพเต็มขึ้น */
.carousel__item--left{
    transform:translate(-62%,-50%) scale(.9);
}

.carousel__item--right{
    transform:translate(-35%,-50%) scale(.9);
}

.carousel__btns{
    position:absolute;
    bottom:20px;
    top: 60%;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:16px;
    z-index:10;
}
}

@media (max-width:768px){

.carousel{
    height:60vh;          /* จาก 20vh -> 60vh */
    min-height:420px;     /* กันเตี้ยเกิน */
}

/* ขยายภาพ */
.carousel__item{
    top: 70%;
    left:50%;
    width:250%;
    max-width:900px;
}


/* ลด offset เพื่อให้เห็นภาพเต็มขึ้น */
.carousel__item--left{
    transform:translate(-62%,-50%) scale(.9);
}

.carousel__item--right{
    transform:translate(-35%,-50%) scale(.9);
}

.carousel__btns{
    position:absolute;
    bottom:20px;
    top: 70%;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:16px;
    z-index:10;


}
}

/* ================= SMALL MOBILE ================= */

@media (max-width:480px){

.carousel{
    height:360px;
}

.carousel__btns{
    bottom:18px;
}
}

@media (max-width:430px){

.carousel{
    height:60vh;          /* จาก 20vh -> 60vh */
    min-height:420px;     /* กันเตี้ยเกิน */
}

/* ขยายภาพ */
.carousel__item{
    top: 65%;
    left:50%;
    width:120%;
    max-width:550px;
}

/* ลด offset เพื่อให้เห็นภาพเต็มขึ้น */
.carousel__item--left{
    transform:translate(-80%,-50%) scale(.9);
}

.carousel__item--right{
    transform:translate(-15%,-50%) scale(.9);
}

.carousel__btns{
    position:absolute;
    bottom:20px;
    top: 70%;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:16px;
    z-index:10;
}
}

@media (max-width:414px){

.carousel{
    height:60vh;          /* จาก 20vh -> 60vh */
    min-height:420px;     /* กันเตี้ยเกิน */
}

/* ขยายภาพ */
.carousel__item{
    top: 65%;
    left:50%;
    width:120%;
    max-width:550px;
}

/* ลด offset เพื่อให้เห็นภาพเต็มขึ้น */
.carousel__item--left{
    transform:translate(-80%,-50%) scale(.9);
}

.carousel__item--right{
    transform:translate(-15%,-50%) scale(.9);
}

.carousel__btns{
    position:absolute;
    bottom:20px;
    top: 75%;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:16px;
    z-index:10;
}
}

@media (max-width:375px){

.carousel{
    height:60vh;          /* จาก 20vh -> 60vh */
    min-height:320px;     /* กันเตี้ยเกิน */
}

/* ขยายภาพ */
.carousel__item{
    top: 47%;
    left:50%;
    width:220%;
    max-width:200px;
}

/* ลด offset เพื่อให้เห็นภาพเต็มขึ้น */
.carousel__item--left{
    transform:translate(-80%,-50%) scale(.9);
}

.carousel__item--right{
    transform:translate(-8%,-50%) scale(.9);
}

.carousel__btns{
    position:absolute;
    bottom:20px;
    top: 70%;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:16px;
    z-index:10;
}
}