.category-tab-list{margin-top: 1.5rem;}
.category-tab-list .tab-listing{display: flex;gap: 0.5rem;align-items: center;flex-wrap: wrap;}
.category-tab-list .tab-listing a{width: 7rem;height: 2.625rem;border-radius: 0.63rem;border: 1px solid #CDD5DF;display: flex;align-items: center;justify-content: center;font-size: 1rem;color: #364152;flex: 0 0 7rem;}
.category-tab-list .tab-listing a.active{border-color: #6938EF;font-weight: 600;color: #6938EF;}

.hero-panel-slider{margin-top: 4rem;}
.hero-panel-slider h2{font-size: 2rem;font-weight: 600;color: #364152;margin-bottom: 2rem;}
.hero-panel-slider .swiper-slide{width: 13.5rem;transition: transform 0.3s ease, width 0.3s ease;}
.hero-panel-slider .hero-banner-swiper .swiper-slide.swiper-slide-active{width: 42rem;}
.hero-panel-slider .swiper-slide a{max-height: 23.5rem;}
.hero-panel-slider .hero-banner-swiper .swiper-slide a > img{max-height: 23.5rem;width: 100%;object-position: inherit;transition: transform 0.3s ease, width 0.3s ease;filter: grayscale(0.8);}
.hero-panel-slider .hero-banner-swiper .swiper-slide a .bottomWrap{width: 0;overflow: hidden;transition: transform 0.3s ease, width 0.3s ease;}
.hero-panel-slider .hero-banner-swiper .swiper-slide.swiper-slide-active a .bottomWrap{width: calc(100% - 4rem);}
.hero-panel-slider .hero-banner-swiper .swiper-slide.swiper-slide-active a > img{width: 100%;opacity: 1;filter: unset;}
.hero-panel-slider .swiper-wrapper{margin-left: -14.2rem;}
.hero-panel-slider .hero-banner-swiper .swiper-slide a .overlay{background: #FFFFFF40; }
.hero-panel-slider .hero-banner-swiper .swiper-slide.swiper-slide-active a .overlay{background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60.59%, #000000 100%);}
.hero-panel-slider .swiper-button{top: 53%;}

.game-banner-listing-panel{margin-top: 2rem;}

.new-update-panel{margin-top: 4rem;}
.new-update-panel .titleWrap{display: flex;align-items: flex-start;justify-content: space-between;flex-direction: column;row-gap: 1.5rem;margin-bottom: 1.75rem;}
.new-update-panel .titleWrap .leftWrap{display: flex;align-items: center;column-gap: 0.5rem;}
.new-update-panel .titleWrap .filterWrap{display: flex;align-items: center;column-gap: 1.5rem;}
.new-update-panel .titleWrap .filterWrap a{display: flex;align-items: center;column-gap: 0.5rem;padding: 0 1rem 0.5rem 0.5rem;}
.new-update-panel .titleWrap .filterWrap a i{font-size: 1.5rem;color: #697586;}
.new-update-panel .titleWrap .filterWrap a.active i{color: #6938EF;}
.new-update-panel .titleWrap .filterWrap a p{font-size: 1rem;color: #697586;line-height: 1.5rem;}
.new-update-panel .titleWrap .filterWrap a.active p{font-weight: 600;color: #6938EF;}
.new-update-panel .titleWrap .filterWrap a.active{border-bottom: 2px solid #6938EF;}

.new-update-panel .item-listing{display: flex;column-gap: 1rem;row-gap: 1rem;flex-wrap: wrap;}
.new-update-panel .content-item{display: flex;flex-direction: column;border-radius: 0.63rem;box-shadow: 0px 2px 4px 0px #11135B26;background-color: #ffffff;padding-bottom: 1rem;margin-bottom: 0.5rem;flex: 0 0 11.625rem;max-width: 11.625rem;}
.new-update-panel .content-item .topBgWrap{padding: 1.5rem 0;display: flex;align-items: center;justify-content: center;border-radius: 0.63rem 0.63rem 0 0;position: relative;}
.new-update-panel .content-item .topBgWrap img{width: 5.5rem;height: 5.5rem;display: block;border-radius: 0.63rem;object-fit: cover;position: relative;z-index: 2;box-shadow: 0px 2px 8px 0px #11135B26; }
.new-update-panel .content-item .topBgWrap .overlay-img{position: absolute;top: 0;left: 0;z-index: 1;width: 100%;height: 100%;filter: blur(5px);opacity: 0.25;border-radius: 0.63rem 0.63rem 0 0;mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 30%);}
.new-update-panel .content-item .name{font-size: 1rem;font-weight: 500;color: #364152;margin-bottom: 1.5rem;padding: 0 1rem;overflow: hidden;height: 2rem;text-overflow: ellipsis;white-space: nowrap;}
.new-update-panel .content-item .ratingWrap{display: flex;align-items: center;column-gap: 0.5rem;padding: 0 1rem;}
.new-update-panel .content-item .ratingWrap p{font-size: 0.875rem;color: #364152;display: flex;align-items: center;}
.new-update-panel .content-item .ratingWrap p i{font-size: 0.875rem;color: #6938EF;margin-left: 0.25rem;}
.new-update-panel .content-item .ratingWrap span{width: 0.25rem;height: 0.25rem;background-color: #9AA3B2;border-radius: 50%;}

.new-update-panel .pagination{margin-top: 3rem;display: flex;justify-content: center;align-items: center;column-gap: 1rem;position: relative;z-index: 1;}
.new-update-panel .pagination .first-page{padding: 0 .75rem;}
.new-update-panel .pagination .last-page{padding: 0 .75rem;}
.new-update-panel .pagination a{background-color: #ffffff;border-radius: 0.25rem;border: 1px solid #CDD5DF;min-width: 2.5rem;min-height: 2.5rem;padding: 0 1rem;display: flex;align-items: center;justify-content: center;font-size: 1rem;color: #364152;column-gap: 0.5rem;line-height: 1.25rem;cursor: pointer;}
.new-update-panel .pagination a:disabled{opacity: 0.5;cursor: no-drop;}
.new-update-panel .pagination a i{font-size: 1rem;}
.new-update-panel .pagination a.active{background-color: #EEEDFC;border-color: #6938EF;}

.bottomAction{position: absolute;bottom: 0;display: flex;justify-content: space-between;width: 100%;}
.bottomAction > p{font-size: 1rem;color: #364152;}
.bottomAction .goPage{display: flex;align-items: center;column-gap: 0.5rem;position: relative;z-index: 1;}
.bottomAction .goPage > p{font-size: 0.875rem;color: #364152;}
.bottomAction .goPage input{width: 3.125rem;height: 2.5rem;border-radius: 0.25rem;background-color: #ffffff;border: 1px solid #CDD5DF;text-align: center;font-size: 1rem;}
.bottomAction .goPage a{margin-left: 0.5rem;font-weight: 700;font-size: 0.875rem;color: #364152;padding-right: 0.5rem;}
.bottomAction .goPage input::-webkit-inner-spin-button, .bottomAction .goPage input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.new-update-panel .content-item .ratingWrap p {
    font-size: 0.875rem;
    color: #364152;
    display: flex;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
}