.premium-topic-panel{margin-top: 1.5rem;}
.premium-topic-panel h2{font-size: 1.5rem;color: #364152;font-weight: 500;margin-bottom: 1rem;}
.premium-topic-panel .premium-topic-listing{display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto auto; gap: 1rem;}
.premium-topic-panel .premium-topic-listing a:nth-child(1) { grid-row: 1 / span 2; grid-column: 1; }
.premium-topic-panel .premium-topic-listing a:nth-child(2) { grid-row: 1; grid-column: 2; }
.premium-topic-panel .premium-topic-listing a:nth-child(3) { grid-row: 1; grid-column: 3; }
.premium-topic-panel .premium-topic-listing a:nth-child(4) { grid-row: 2; grid-column: 2; }
.premium-topic-panel .premium-topic-listing a:nth-child(5) { grid-row: 2; grid-column: 3; }
.premium-topic-panel .premium-topic-listing .premium-topic-wrap{position: relative;border-radius: 0.63rem;box-shadow: 0px 2px 4px 0px #11135B26;width:28.75rem;max-width: 28.75rem;}
.premium-topic-panel .premium-topic-listing .premium-topic-wrap .overlay{width: 100%;height: 100%;border-radius: 0.63rem;background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000000 100%);position: absolute;top: 0;left: 0;}
.premium-topic-panel .premium-topic-listing .premium-topic-wrap > img{width: 100%;height: auto;display: block;border-radius: 0.63rem;min-height: 16rem;object-fit: cover;}
.premium-topic-panel .premium-topic-listing .premium-topic-wrap .bottomWrap{position: absolute;margin: 0 1rem;bottom: 1rem;}
.premium-topic-panel .premium-topic-listing .premium-topic-wrap .gameType{background-color: #6938EF;border-radius: 0.63rem;width: 2.5rem;height: 1.625rem;display: flex;align-items: center;justify-content: center;margin-bottom: 0.5rem;}
.premium-topic-panel .premium-topic-listing .premium-topic-wrap .gameType i{font-size: 1.25rem;color: #ffffff;}
.premium-topic-panel .premium-topic-listing .premium-topic-wrap .title{font-size: 1.25rem;font-weight: 500;color: #ffffff;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.premium-topic-panel .premium-topic-listing .premium-topic-wrap:first-child{width: 40.5rem;max-width: 40.5rem;}
.premium-topic-panel .premium-topic-listing .premium-topic-wrap:first-child > img{min-height: 33rem;height: 100%;}

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

.topics-listing-panel{margin-top: 4.375rem;}
.topics-listing-panel .title-action-panel{display: flex;align-items: center;justify-content: space-between;margin-bottom: 1.5rem;}
.topics-listing-panel .title-action-panel h2{font-size: 1.25rem;font-weight: 500;color: #364152;}
.topics-listing-panel .title-action-panel .topics-tab-navigation{display: flex;align-items: center;column-gap: 1.5rem;}
.topics-listing-panel .title-action-panel .topics-tab-navigation > div{display: flex;column-gap: 0.5rem;padding-bottom: 0.5rem;padding: 0.5rem 1rem 0.5rem 0.5rem;cursor: pointer;}
.topics-listing-panel .title-action-panel .topics-tab-navigation > div i{font-size: 1.5rem;color: #697586;line-height: 25px;}
.topics-listing-panel .title-action-panel .topics-tab-navigation > div p{color: #697586;font-size: 1rem;}
.topics-listing-panel .title-action-panel .topics-tab-navigation > div.active{border-bottom: 1px solid #6938EF;}
.topics-listing-panel .title-action-panel .topics-tab-navigation > div.active i{color: #6938EF;}
.topics-listing-panel .title-action-panel .topics-tab-navigation > div.active p{font-weight: 500;color: #6938EF;}
.topics-listing-panel .title-action-panel .topics-tab-navigation p a{color: #697586;}
.topics-listing-panel .topics-list{display: flex;gap: 1rem;flex-wrap: wrap;}
.topics-listing-panel .topics-list .topics-item{background-color: #ffffff;box-shadow: 0px 2px 4px 0px #11135B26; border-radius: 1rem;padding: 1rem 2rem 1rem 1.5rem;display: flex;column-gap: 1.5rem;width: 49.5rem;max-width: 49.5rem;}
.topics-listing-panel .topics-list .topics-item > img{width: 17rem;height: 9.5rem;border-radius: 0.63rem;object-fit: cover;}
.topics-listing-panel .topics-list .topics-item .topicWrap{display: flex;flex-direction: column;}
.topics-listing-panel .topics-list .topics-item .topicWrap .topic-top{display: flex;align-items: center;column-gap: 0.5rem;margin-bottom: 1rem;}
.topics-listing-panel .topics-list .topics-item .topicWrap .topic-top p{font-size: 0.875rem;color: #6938EF;}
.topics-listing-panel .topics-list .topics-item .topicWrap .topic-top span{width: 0.25rem;height: 0.25rem;background-color: #9B8AFB;border-radius: 50%;}
.topics-listing-panel .topics-list .topics-item .topicWrap .topic-top .date{margin-left: auto;color: #364152;}
.topics-listing-panel .topics-list .topics-item .topicWrap h3{font-size: 1.25rem;font-weight: 600;color: #364152;margin-bottom: 1rem;line-height: 1.5rem;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.topics-listing-panel .topics-list .topics-item .topicWrap p.content{font-size: 0.875rem;color: #364152;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;line-height: 1.25rem;}
.topics-listing-panel .topics-list .topics-item .topicWrap .viewMore{margin-top: auto;font-size: 1rem;color: #6938EF;text-decoration: underline;}


.topics-listing-panel .pagination{margin-top: 3rem;display: flex;justify-content: center;align-items: center;column-gap: 1rem;position: relative;z-index: 1;}
.topics-listing-panel .pagination .first-page{padding: 0 .75rem;}
.topics-listing-panel .pagination .last-page{padding: 0 .75rem;}
.topics-listing-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;}
.topics-listing-panel .pagination a:disabled{opacity: 0.5;cursor: no-drop;}
.topics-listing-panel .pagination a i{font-size: 1rem;}
.topics-listing-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; }