:root {
    --black-2: #151314;
    --black-3: #66686A;
    --yellow-2 : #dc9106;
}

.device-product .note {
    color: var(--black-2);
}

.device-product b {
    color: var(--black-2);
}
.device-product ul li ,
.device-product p {
    font-weight: 600;
}

.device-product .section {
    padding: 3rem 0;
}

.device-product ul {
    padding: 0;
    margin: 0;
    list-style: none;
    height: 8rem;
}

.device-product h2:lang(km) {
    font-size: 2.8rem !important;
}

/* Delay */
.device-product .find-location .first,
.device-product .find-location .second,
.device-product .find-location figure:hover,
.device-product .find-location figure:hover .first,
.device-product .find-location figure:hover .second,
.device-product .find-location .row figure img,
.device-product .find-location .row figure img:hover,
.product-detail .group-location a,
.product-detail .group-location a:hover,
.device-product .products-list figure,
.device-product .products-list figure:hover,
.device-product a,
.device-product a:hover {
    transition: all .3s ease-in-out;
}

/* products list */
.device-product .products-list .container {
    gap: 3rem;
    display: flex;
    flex-direction: column;
}
.device-product .products-list .tab img {
    object-fit: contain;
    cursor: context-menu;
}
.device-product .products-list h2 {
    text-align: center;
    color: var(--yellow-1);
    font-weight: bold;
}
.device-product .products-list .tab {
    gap: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.device-product .products-list .slick-slider .slick-prev, 
.device-product .products-list .slick-slider .slick-next {
    top: 20%;
    z-index: 1;
    position: absolute;
}
.device-product .products-list .slick-slider .slick-prev {
    left: -1rem;
    width: 4rem;
    height: 4rem;
    background-image: url(../images/icon/arrow-circle-left.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
}
.device-product .products-list .slick-slider .slick-next {
    right: -1rem;
    width: 4rem;
    height: 4rem;
    background-image: url(../images/icon/arrow-circle-right.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
}

.device-product .products-list figure {
    margin-bottom: 3rem;
    border-radius: 2rem;
    border: 1px solid var(--black-1) !important;
}
.device-product .products-list figure:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
}
.device-product .products-list figure .thumbnail a {
    display: flex;
    justify-content: center;
}
.device-product .products-list figure .thumbnail img {
    width: 88%;
    height: 33rem;
    object-fit: contain;
    padding-top: 2rem;
}
.device-product .products-list figcaption {
    color: var(--black-2);
    padding: 2rem;
    gap: 1.5rem;
    display: flex;
    flex-direction: column;
}
.device-product .products-list figcaption h3 {
    height: 7rem;
    font-size: 2.3rem;
    font-weight: bold;
    color: var(--black-2);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.device-product .products-list figcaption div {
    display: flex;
    gap: .8rem;
}
.device-product .products-list figcaption div p {
    font-size: 1.4rem;
}
.device-product .products-list figcaption .block-border {
    display: flex;
    align-items: center;
}
.device-product .products-list figcaption .border {
    width: 70%;
    border-bottom: 1px solid var(--black-1);
}
    
.device-product .products-list figcaption .block {
    display: flex;
    flex-direction: column;
}

.device-product .products-list figcaption .url {
    display: flex;
    align-items: center;
}
.device-product .products-list figcaption .url a {
    font-weight: bold;
    padding: 1rem 3rem;
    border-radius: 2rem;
    color: var(--white-1);
    background-color: var(--yellow-1);
}
.device-product .products-list figcaption .url a:hover {
    background-color: var(--yellow-2);
}
.device-product .products-list figcaption li {
    color: var(--black-3);
    line-height: 2.5rem;
}

/* Pagination */
.device-product .wrap-pagination {
    font-size: 2rem;
    font-weight: bold;

    gap: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.device-product .pagination {
    gap: 1.5rem;
    display: flex;
}
.device-product .wrap-pagination .next,
.device-product .wrap-pagination .prev {
    font-size: 3rem;
    color: var(--yellow-1) !important;
}
.device-product .wrap-pagination .page-numbers {
    color: var(--black-2);
}
.device-product .wrap-pagination .page-numbers.current {
    padding: 0 1rem;
    border-radius: 100%;
    color: var(--white-1);
    background-color: var(--yellow-1);
}

/* Why Cellcard */
.device-product .why-cc h2 {
    font-weight: bold;
    text-align: center;
    color: var(--yellow-1);
    margin-bottom: 6rem;
}
.device-product .why-cc figure {
    gap: 3rem;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.device-product .why-cc figure img {
    width: 30%;
}
.device-product .why-cc h3 {
    padding: 0 3rem;
    color: var(--black-2);
    font-size: 2rem;
    text-align: center;
}


/* Find Locations */
.device-product .find-location h2 {
    font-size: 2.75rem;
    font-weight: bold;
    text-align: center;
    color: var(--yellow-1);
    margin-bottom: 0.5rem;
}
.device-product .find-location .title {
    display: flex;
    justify-content: center;
}

.device-product .find-location .row div ,
.device-product .find-location .row figure a ,
.device-product .find-location .row {
    display: flex;
    align-items: center;
    justify-content: center;
}
.device-product .find-location .row figure  {
    width: max-content;
}
.device-product .find-location .row figure a {
    gap: 2rem;
    padding: 1rem;
    width: fit-content;
    border-radius: 1.5rem;
}
.device-product .find-location .row figure img {
    width: 22rem;
    border-radius: 1.5rem;
}
.device-product .find-location .row figure img:hover {
    box-shadow: 0 2px 10px rgba(0,0,0,.1);
}


/* ipad pro */
@media (min-width: 769.9px) and (max-width: 1024.9px) {
    .device-product .why-cc h3 {
        padding: 0 1rem;
    }
    .device-product .why-cc figure img {
        width: 50%;
    }
    .product-detail .gallery {
        margin-bottom: 6rem;
    }
    .products-list.products-slide figure {
        height: auto !important;
    }
    .device-product .products-list .slick-slider .slick-prev {
        top: 25%;
        left: 0;
    }
    .device-product .products-list .slick-slider .slick-next {
        top: 25%;
        right: 0;
    }
}

/* ipad */
@media (min-width: 576.9px) and (max-width: 769px) {
    .device-product .why-cc h3 {
        padding: 0;
    }
    .device-product .why-cc h3 {
        padding: 0 1rem;
    }
    .device-product .why-cc figure img {
        width: 50%;
    }
    .product-detail .gallery {
        margin-bottom: 6rem;
    }
    .device-product .products-list .slick-slider .slick-prev {
        top: 22%;
        left: 1rem;
    }
    .device-product .products-list .slick-slider .slick-next {
        top: 22%;
        right: 1rem;
    }
}

/* Product Details */
.product-detail {
    margin-top: 2.5rem;
}
.product-detail .slider-for .slick-current {
    display: flex;
    justify-content: center;
}
.product-detail .slider-nav {
    margin-top: 3rem;
}
.product-detail .slider-nav figure.slick-current {
    padding-bottom: 2px;
    border-bottom: 5px solid var(--yellow-2);
}
.product-detail .slider-nav img {
    cursor: pointer;
}
.product-detail .gallery .slider-for {
    display: flex;
    align-items: center;
}
.product-detail .gallery .slider button {
    border: none;
    color: transparent;
    position: absolute;
    background-color: transparent;
}
.product-detail .gallery .slider button.slick-prev {
    left: 0;
    z-index: 1;

    width: 4rem;
    height: 4rem;
    background-image: url(../images/icon/arrow-circle-left.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
}
.product-detail .gallery .slider button.slick-next {
    right: 0;
    z-index: 1;

    width: 4rem;
    height: 4rem;
    background-image: url(../images/icon/arrow-circle-right.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
}


.product-detail h2 {
    font-size: 3rem;
    text-align: center;
    font-weight: bold;
    color: var(--black-2);
    margin-bottom: 1.5rem;
}
.product-detail figcaption {
    margin-bottom: 3rem;
    padding: 1.5rem;
    border-radius: 1rem;
    border: 1px solid var(--black-3);
}
.product-detail figcaption table {
    width: 100%;
}
.product-detail figcaption table p ,
.product-detail figcaption table li {
    color: var(--black-2);
    font-size: 1.8rem;
}
.product-detail figcaption table li:not(:last-child) {
    margin-bottom: .5rem;
}
.product-detail figcaption table tr:not(:last-child) {
    padding: 1rem 0;
    border-bottom: 1px solid var(--black-3);
}
.product-detail figcaption table tr td {
    padding: 1rem 0;
    vertical-align: top;
}
.product-detail figcaption table ul {
    height: auto;
}
.product-detail figcaption .installment-fee {
    gap: 2rem;
    display: flex;
}
.product-detail figcaption .group-color {
    gap: .8rem;
    display: flex;
    align-items: center;
}
.product-detail figcaption .color {
    padding: 1.2rem;
    width: fit-content;
    border-radius: 100%;
} 
.product-detail .group-location {
    gap: 1.5rem;
    display: flex;
    justify-content: center;
}
.product-detail .group-location a {
    padding: 1rem 1.5rem;
    border-radius: 3rem;
    font-weight: bold;
    color: var(--white-1);
    background-color: var(--yellow-1);
}
.product-detail .group-location a:hover {
    background-color: var(--yellow-2);
}

.product-spec h2 {
    font-size: 2.7rem;
    font-weight: bold;
    color: var(--yellow-1);
    margin-bottom: 2rem;
}
.product-spec .description p {
    color: var(--black-2);
    line-height: 3rem;
    font-size: 1.8rem;
}

.products-list.products-slide figure {
    border:  transparent !important;
}
.products-list.products-slide .slick-active button {
    background-color: var(--yellow-1);
}
.products-list.products-slide button {
    width: 1.5rem;
    height: 1.5rem;
    border: transparent;
    color: transparent;
    border-radius: 100%;
    background-color: var(--black-3);
}
.products-list.products-slide .slick-dots {
    gap: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Hide both sliders initially */
.slider-for, .slider-nav {
    opacity: 0; /* Hide with opacity initially */
    transition: opacity 0.5s ease-in-out; /* Optional: Smooth transition */
}

/* Optional: Use display:none to hide completely */
.slider-for.hidden, .slider-nav.hidden {
    display: none;
}