.gallery{
    align-items: center;
    --s: 90px;
    --g: 8px;
    display: grid;
    /*padding-top: 500px;*/
    margin-left: calc(var(--s) + 28px);
    margin-top: calc(var(--s) + var(--g));
    margin-right: calc(var(--s) + var(--g));
    margin-bottom: calc(2.5*var(--s) + var(--g));
    justify-content: center;
}

.hexagon-outer {
    width: 90px; /* 200px + 4px border each side + 2px inner border */
    height: 76px;
    /*background:#a044ff;  !* fallback for old browsers *!*/
    /*margin: 100px auto;*/
    display: flex;
    align-items: center;
    justify-content: center;
}

.hexagon-middle {
    width: 82px; /* 200px + 2px border each side */
    height: 68px;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/*.hexagon-middle-color{*/
/*    background-color: #000000; !* Middle border color (2px) *!*/
/*}*/

.hexagon-inner {
    width: 74px;
    height: 60px;
    /*background-color: #7f18fd; !* Inner hexagon color *!*/
    /*background: #9733EE;  !* fallback for old browsers *!*/
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.gallery .hexagon-outer{
    grid-area: 1/1;
    aspect-ratio: 1.15;
    object-fit: cover;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%,0 50%);
    transform: translate(var(--_x,0),var(--_y,0)) scale(var(--_t,1));
    cursor: pointer;
    /*filter: grayscale(80%);*/
    transition: .2s linear;
}



.gallery .hexagon-outer:nth-child(1) {--_y: calc(-100% - 2*var(--g)); --_x: var(--g)}

.gallery .hexagon-outer:nth-child(2) {--_y: calc(-44% - var(--g));--_x: -76px;}

.gallery .hexagon-outer:nth-child(3) {--_y: calc(-44% - var(--g));--_x: 92px;}

.gallery .hexagon-outer:nth-child(4) {--_y: calc(-12% - var(--g));--_x: -162px;}

.gallery .hexagon-outer:nth-child(5) {--_y: calc(-12% - var(--g));--_x: 178px;}

/*Ô 6*/
.gallery .hexagon-outer:nth-child(6) {
    width: 106px;
    height: 92px;
}

.gallery .hexagon-outer:nth-child(6) .hexagon-middle{
    width: 98px;
    height: 84px;
}

/*.gallery .hexagon-outer:nth-child(6) .hexagon-middle-color{*/
/*    background: #F7971E;  !* fallback for old browsers *!*/
/*    background: -webkit-linear-gradient(to top, #FFD200, #F7971E);  !* Chrome 10-25, Safari 5.1-6 *!*/
/*    background: linear-gradient(to top, #FFD200, #F7971E); !* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!*/
/*}*/

/*.new-background {*/
/*    background: #F7971E;  !* fallback for old browsers *!*/
/*}*/

.gallery .hexagon-outer:nth-child(6) .hexagon-inner{
    width: 90px;
    height: 76px;
    /*background: #f4c4f3;  !* fallback for old browsers *!*/
    /*background: -webkit-linear-gradient(to bottom, #fc67fa, #f4c4f3);  !* Chrome 10-25, Safari 5.1-6 *!*/
    /*background: linear-gradient(to bottom, #fc67fa, #f4c4f3); !* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!*/
}

/*Ô 7*/
.gallery .hexagon-outer:nth-child(7) {width: 130px; height: 112px}

.gallery .hexagon-outer:nth-child(7) .hexagon-middle{width: 122px; height: 104px}

.gallery .hexagon-outer:nth-child(7) .hexagon-inner{
    width: 114px;
    height: 96px;
    /*background: #f4c4f3;  !* fallback for old browsers *!*/
    /*background: -webkit-linear-gradient(to right, #fc67fa, #f4c4f3);  !* Chrome 10-25, Safari 5.1-6 *!*/
    /*background: linear-gradient(to right, #fc67fa, #f4c4f3); !* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!*/
}

.gallery .hexagon-outer:nth-child(7) {--_y: calc(60% - var(--g));--_x: -106px;}

.gallery .hexagon-outer:nth-child(8) {width: 130px; height: 112px}

.gallery .hexagon-outer:nth-child(8) .hexagon-middle{
    width: 122px;
    height: 104px;
}

.gallery .hexagon-outer:nth-child(8) .hexagon-inner{
    width: 114px;
    height: 96px;
    /*background: #f4c4f3;  !* fallback for old browsers *!*/
    /*background: -webkit-linear-gradient(to left, #fc67fa, #f4c4f3);  !* Chrome 10-25, Safari 5.1-6 *!*/
    /*background: linear-gradient(to left, #fc67fa, #f4c4f3); !* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!*/
}

.gallery .hexagon-outer:nth-child(8) {--_y: calc(60% - var(--g));--_x: 82px;}

/*Ô 6*/
.gallery .hexagon-outer:nth-child(9) {width: 106px; height: 92px}

.gallery .hexagon-outer:nth-child(9) .hexagon-middle{width: 98px; height: 84px}

.gallery .hexagon-outer:nth-child(9) .hexagon-inner{
    width: 90px;
    height: 76px;
    /*background: #f4c4f3;  !* fallback for old browsers *!*/
    /*background: -webkit-linear-gradient(to top, #fc67fa, #f4c4f3);  !* Chrome 10-25, Safari 5.1-6 *!*/
    /*background: linear-gradient(to top, #fc67fa, #f4c4f3); !* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ *!*/
}

.gallery .hexagon-outer:nth-child(9) {--_y: calc(136% - var(--g));}

.gallery .hexagon-outer:nth-child(10) {--_y: calc(294% - 2*var(--g)); --_x: var(--g)}

.gallery .hexagon-outer:nth-child(11) {--_y: calc(220% - var(--g));--_x: -76px;}

.gallery .hexagon-outer:nth-child(12) {--_y: calc(220% - var(--g));--_x: 92px;}

.gallery .hexagon-outer:nth-child(13) {--_y: calc(188% - var(--g));--_x: -162px;}

.gallery .hexagon-outer:nth-child(14) {--_y: calc(188% - var(--g));--_x: 178px;}

.sliderwheel_item{
    align-items: center;
    display: grid;
    justify-content: center;
}

.sliderwheel_item .sliderwheel_item_img:nth-child(1){
    transform: translate(-292px, -100px) scale(1);
    width: 70px;
    height: 82px;
}

.sliderwheel_item .sliderwheel_item_img:nth-child(2){
    transform: translate(-212px, -166px) scale(1);
    width: 78px;
    height: 90px;
}

.sliderwheel_item .sliderwheel_item_img:nth-child(3){
    transform: translate(-116px, -242px) scale(1);
    width: 86px;
    height: 98px;
}

.sliderwheel_item .sliderwheel_item_img:nth-child(4){
    transform: translate(112px, -340px) scale(1);
    width: 86px;
    height: 98px;
}

.sliderwheel_item .sliderwheel_item_img:nth-child(5){
    transform: translate(218px, -452px) scale(1);
    width: 78px;
    height: 90px;
}

.header_sliderwheel{
    height: 490px;
}

.sliderwheel_item .sliderwheel_item_img:nth-child(6){
    transform: translate(306px, -558px) scale(1);
    width: 70px;
    height: 82px;
}

.sliderwheel_center_img{
    height: 230px;
}

.sliderwheel_center{
    margin-top: 92px;
}

.sliderwheel_center_img,.sliderwheel_item_img{
    background-size: cover; /* Đảm bảo hình nền bao phủ toàn bộ thẻ */
    background-position: center; /* Căn giữa hình nền */
    background-repeat: no-repeat; /* Ngăn không cho hình nền lặp lại */
}

.sliderwheel_item_img{
    cursor: pointer;
}


@media only screen and (max-width:1200px){
    .header_sliderwheel{
        height: 370px!important;
    }

    .sliderwheel_center_img{
        height: 150px;
    }

    .sliderwheel_center{
        margin-top: 78px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(1){
        transform: translate(-224px, -78px) scale(1);
        width: 54px;
        height: 64px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(2){
        transform: translate(-162px, -130px) scale(1);
        width: 60px;
        height: 70px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(3){
        transform: translate(-81px, -190px) scale(1);
        width: 66px;
        height: 76px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(4){
        transform: translate(78px, -266px) scale(1);
        width: 66px;
        height: 76px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(5){
        transform: translate(166px, -352px) scale(1);
        width: 60px;
        height: 70px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(6){
        transform: translate(234px, -432px) scale(1);
        width: 54px;
        height: 64px;
    }
}


@media only screen and (max-width:992px){
    .header_sliderwheel{
        height: 430px!important;
    }

    .sliderwheel_center_img{
        height: 180px;
    }

    .sliderwheel_center{
        margin-top: 148px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(1){
        transform: translate(-258px, -78px) scale(1);
        width: 60px;
        height: 70px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(2){
        transform: translate(-186px, -136px) scale(1);
        width: 64px;
        height: 74px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(3){
        transform: translate(-94px, -202px) scale(1);
        width: 72px;
        height: 82px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(4){
        transform: translate(92px, -284px) scale(1);
        width: 72px;
        height: 82px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(5){
        transform: translate(192px, -376px) scale(1);
        width: 66px;
        height: 76px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(6){
        transform: translate(270px, -462px) scale(1);
        width: 60px;
        height: 70px;
    }
}


@media only screen and (max-width:767px){
    .header_sliderwheel{
        height: 324px!important;
    }

    .sliderwheel_center_img{
        height: 130px;
    }

    .sliderwheel_center{
        margin-top: 112px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(1){
        transform: translate(-194px, -60px) scale(1);
        width: 48px;
        height: 54px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(2){
        transform: translate(-140px, -104px) scale(1);
        width: 52px;
        height: 58px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(3){
        transform: translate(-70px, -154px) scale(1);
        width: 56px;
        height: 62px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(4){
        transform: translate(68px, -216px) scale(1);
        width: 56px;
        height: 62px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(5){
        transform: translate(144px, -286px) scale(1);
        width: 52px;
        height: 58px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(6){
        transform: translate(202px, -354px) scale(1);
        width: 48px;
        height: 54px;
    }
}

@media only screen and (max-width:460px){
    .header_sliderwheel{
        height: 270px!important;
    }

    .sliderwheel_center_img{
        height: 110px;
    }

    .sliderwheel_center{
        margin-top: 90px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(1){
        transform: translate(-164px, -48px) scale(1);
        width: 38px;
        height: 42px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(2){
        transform: translate(-118px, -82px) scale(1);
        width: 42px;
        height: 46px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(3){
        transform: translate(-58px, -122px) scale(1);
        width: 46px;
        height: 50px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(4){
        transform: translate(56px, -172px) scale(1);
        width: 46px;
        height: 50px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(5){
        transform: translate(120px, -228px) scale(1);
        width: 42px;
        height: 46px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(6){
        transform: translate(170px, -282px) scale(1);
        width: 38px;
        height: 42px;
    }
}

@media only screen and (max-width:380px){
    .header_sliderwheel{
        height: 230px!important;
    }

    .sliderwheel_center_img{
        height: 100px;
    }

    .sliderwheel_center{
        margin-top: 68px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(1){
        transform: translate(-136px, -44px) scale(1);
        width: 34px;
        height: 38px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(2){
        transform: translate(-98px, -78px) scale(1);
        width: 38px;
        height: 42px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(3){
        transform: translate(-52px, -114px) scale(1);
        width: 42px;
        height: 46px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(4){
        transform: translate(52px, -160px) scale(1);
        width: 42px;
        height: 46px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(5){
        transform: translate(104px, -212px) scale(1);
        width: 38px;
        height: 42px;
    }

    .sliderwheel_item .sliderwheel_item_img:nth-child(6){
        transform: translate(146px, -258px) scale(1);
        width: 34px;
        height: 38px;
    }
}

@media only screen and (max-width:480px){
    .gallery{
        --g: 4px;
        --s: 80px;
    }

    .hexagon-outer {
        width: 80px; /* 200px + 4px border each side + 2px inner border */
        height: 66px;
    }

    .hexagon-middle {
        width: 72px; /* 200px + 2px border each side */
        height: 58px;
    }

    .hexagon-inner {
        width: 64px;
        height: 50px;
    }

    .gallery .hexagon-outer:nth-child(1) {--_y: calc(-108% - 2*var(--g)); --_x: calc(2*var(--g))}

    .gallery .hexagon-outer:nth-child(2) {--_y: calc(-50% - var(--g));--_x: -66px;}

    .gallery .hexagon-outer:nth-child(3) {--_y: calc(-50% - var(--g));--_x: 80px;}

    .gallery .hexagon-outer:nth-child(4) {--_y: calc(-16% - var(--g));--_x: -140px;}

    .gallery .hexagon-outer:nth-child(5) {--_y: calc(-16% - var(--g));--_x: 154px;}

    /*Ô 6*/
    .gallery .hexagon-outer:nth-child(6) {
        width: 96px;
        height: 82px;
    }

    .gallery .hexagon-outer:nth-child(6) .hexagon-middle{
        width: 88px;
        height: 74px;
    }

    .gallery .hexagon-outer:nth-child(6) .hexagon-inner{
        width: 80px;
        height: 66px;
    }

    /*Ô 7*/
    .gallery .hexagon-outer:nth-child(7) {width: 120px; height: 102px}

    .gallery .hexagon-outer:nth-child(7) .hexagon-middle{width: 112px; height: 94px}

    .gallery .hexagon-outer:nth-child(7) .hexagon-inner{
        width: 104px;
        height: 86px;
    }

    .gallery .hexagon-outer:nth-child(7) {--_y: calc(58% - var(--g));--_x: -94px;}

    .gallery .hexagon-outer:nth-child(8) {width: 120px; height: 102px}

    .gallery .hexagon-outer:nth-child(8) .hexagon-middle{
        width: 112px;
        height: 94px;
    }

    .gallery .hexagon-outer:nth-child(8) .hexagon-inner{
        width: 104px;
        height: 86px;
    }

    .gallery .hexagon-outer:nth-child(8) {--_y: calc(58% - var(--g));--_x: 70px;}

    /*Ô 6*/
    .gallery .hexagon-outer:nth-child(9) {width: 96px; height: 82px}

    .gallery .hexagon-outer:nth-child(9) .hexagon-middle{width: 88px; height: 74px}

    .gallery .hexagon-outer:nth-child(9) .hexagon-inner{
        width: 80px;
        height: 66px;
    }

    .gallery .hexagon-outer:nth-child(9) {--_y: calc(140% - var(--g));}

    .gallery .hexagon-outer:nth-child(10) {--_y: calc(300% - 2*var(--g)); --_x: calc(2*var(--g))}

    .gallery .hexagon-outer:nth-child(11) {--_y: calc(224% - var(--g));--_x: -68px;}

    .gallery .hexagon-outer:nth-child(12) {--_y: calc(224% - var(--g));--_x: 84px;}

    .gallery .hexagon-outer:nth-child(13) {--_y: calc(190% - var(--g));--_x: -140px;}

    .gallery .hexagon-outer:nth-child(14) {--_y: calc(190% - var(--g));--_x: 156px;}

}

@media only screen and (max-width:380px){
    .gallery{
        --g: 4px;
        --s: 60px;
    }

    .hexagon-outer {
        width: 70px; /* 200px + 4px border each side + 2px inner border */
        height: 56px;
    }

    .hexagon-middle {
        width: 62px; /* 200px + 2px border each side */
        height: 48px;
    }

    .hexagon-inner {
        width: 54px;
        height: 40px;
    }

    .gallery .hexagon-outer:nth-child(1) {--_y: calc(-110% - 2*var(--g)); --_x: calc(2*var(--g))}

    .gallery .hexagon-outer:nth-child(2) {--_y: calc(-50% - var(--g));--_x: -58px;}

    .gallery .hexagon-outer:nth-child(3) {--_y: calc(-50% - var(--g));--_x: 74px;}

    .gallery .hexagon-outer:nth-child(4) {--_y: calc(-20% - var(--g));--_x: -126px;}

    .gallery .hexagon-outer:nth-child(5) {--_y: calc(-20% - var(--g));--_x: 140px;}

    /*Ô 6*/
    .gallery .hexagon-outer:nth-child(6) {
        width: 86px;
        height: 72px;
    }

    .gallery .hexagon-outer:nth-child(6) .hexagon-middle{
        width: 78px;
        height: 64px;
    }

    .gallery .hexagon-outer:nth-child(6) .hexagon-inner{
        width: 70px;
        height: 56px;
    }

    /*Ô 7*/
    .gallery .hexagon-outer:nth-child(7) {width: 110px; height: 92px}

    .gallery .hexagon-outer:nth-child(7) .hexagon-middle{width: 102px; height: 84px}

    .gallery .hexagon-outer:nth-child(7) .hexagon-inner{
        width: 94px;
        height: 76px;
    }

    .gallery .hexagon-outer:nth-child(7) {--_y: calc(58% - var(--g));--_x: -88px;}

    .gallery .hexagon-outer:nth-child(8) {width: 110px; height: 92px}

    .gallery .hexagon-outer:nth-child(8) .hexagon-middle{
        width: 102px;
        height: 84px;
    }

    .gallery .hexagon-outer:nth-child(8) .hexagon-inner{
        width: 94px;
        height: 76px;
    }

    .gallery .hexagon-outer:nth-child(8) {--_y: calc(58% - var(--g));--_x: 64px;}

    /*Ô 6*/
    .gallery .hexagon-outer:nth-child(9) {width: 86px; height: 72px}

    .gallery .hexagon-outer:nth-child(9) .hexagon-middle{width: 78px; height: 64px}

    .gallery .hexagon-outer:nth-child(9) .hexagon-inner{
        width: 70px;
        height: 56px;
    }

    .gallery .hexagon-outer:nth-child(9) {--_y: calc(140% - var(--g));}

    .gallery .hexagon-outer:nth-child(10) {--_y: calc(310% - 2*var(--g)); --_x: calc(2*var(--g))}

    .gallery .hexagon-outer:nth-child(11) {--_y: calc(234% - var(--g));--_x: -58px;}

    .gallery .hexagon-outer:nth-child(12) {--_y: calc(234% - var(--g));--_x: 74px;}

    .gallery .hexagon-outer:nth-child(13) {--_y: calc(208% - var(--g));--_x: -126px;}

    .gallery .hexagon-outer:nth-child(14) {--_y: calc(208% - var(--g));--_x: 142px;}
}