.user-badge img{ width: 20px; } #filter .swiper-slide { padding: 10px 15px 5px 15px; cursor: pointer; color: rgb(22 22 22 / 88%); font-size: 18px; } #filter .swiper-slide { justify-content: end; align-items: center; display: flex; flex-direction: column; } .swiper-slide .tab-icon { display: flex; justify-content: flex-end; align-items: end; margin-bottom: 5px; } .swiper-slide .tab-icon .tab-icon-number{ background: #000000; color: white; padding: 2px 4px; border-radius: 5px; font-size: 12px; font-family: "Roboto"; margin-bottom: 5px; margin-left: 5px; } .swiper-slide .tab-text{ font-size: 13px; margin-top: 2px; font-family: "Roboto"; font-weight: 500; } .opacity0 { opacity: 0 } @media only screen and (min-width:992px) { #filter .swiper-slide.active { border-top-right-radius: 10px; } #filter .swiper-slide { display: block; padding: 8px 15px; } .swiper-slide .tab-icon, .swiper-slide .tab-text, .swiper-slide .tab-icon-number { display: inline-block; } .swiper-slide .tab-icon-number { display: none; } .swiper-slide .tab-text{ margin-top: 0px; font-family: "Roboto Condensed"; font-weight: unset; font-size: 15px; } #filter .swiper-slide, .swiper-slide .tab-text { font-size: 16px; } .swiper-slide .tab-icon { margin-bottom: 0px; } } #filter .swiper-slide.active { background-image: linear-gradient(135deg, #1ebbf0 30%, #39dfaa 100%); color: white; } .swiper-slide { width: auto; height: auto; } /* skeleton basic */ .skeleton-item { display: flex; align-items: center; gap: 12px; padding: 10px; margin-bottom: 10px; border-radius: 6px; min-height: 80px; overflow: hidden; background-color: transparent; } /* thumbnail block */ .skeleton-thumb { width: 74px; height: 111px; border-radius: 6px; flex-shrink: 0; background: linear-gradient(90deg, #eeeeee 25%, #dddddd 50%, #eeeeee 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.2s infinite linear; } /* text lines */ .skeleton-lines { flex: 1; } .skeleton-line { height: 15px; margin-bottom: 8px; border-radius: 4px; background: linear-gradient(90deg, #eeeeee 25%, #dddddd 50%, #eeeeee 75%); background-size: 200% 100%; animation: skeleton-shimmer 1.2s infinite linear; } .skeleton-line.short { width: 40%; margin-top: 30px; } @keyframes skeleton-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .listhd-rating .skeleton-thumb { width: 30px; height: 30px; border-radius: 50%; } .listhd-rating .skeleton-line.short { width: 75px; margin-top: 10px; } .listhd-rating .skeleton-item { min-height: 70px; } /* listhd */ .lds-ellipsis{display:inline-block;position:relative;margin-bottom:10px}.lds-ellipsis div{position:absolute;top:0;width:13px;height:13px;border-radius:50%;background-image:linear-gradient(135deg,#1ebbf0 30%,#39dfaa 100%);animation-timing-function:cubic-bezier(0,1,1,0)}.lds-ellipsis div:nth-child(1){left:8px;animation:lds-ellipsis1 .6s infinite}.lds-ellipsis div:nth-child(2){left:8px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(3){left:32px;animation:lds-ellipsis2 .6s infinite}.lds-ellipsis div:nth-child(4){left:56px;animation:lds-ellipsis3 .6s infinite}@keyframes lds-ellipsis1{0%{transform:scale(0)}100%{transform:scale(1)}}@keyframes lds-ellipsis3{0%{transform:scale(1)}100%{transform:scale(0)}}@keyframes lds-ellipsis2{0%{transform:translate(0,0)}100%{transform:translate(24px,0)}} .text-center .lds-ellipsis {margin: 15px 0px 15px -75px;} .item-excerpt { color: #454545; } .nextpage div { margin-top: 15px; } .nextpage .btn { border: unset; font-size: 15px; padding: .8rem 3rem; border: unset; border-radius: 30px; background-image: linear-gradient(135deg, #1ebbf0db 30%, #39dfaae0 100%); } .nextpage.nextpage-rating { gap: 5px; display: flex; justify-content: center; } .nextpage.nextpage-rating .page-btn { padding: 5px 10px; border: 1px solid #ccc; background: #fff; cursor: pointer; border-radius: 4px; } .nextpage.nextpage-rating .page-btn.active { background: #000; color: #fff; font-weight: bold; border: 1px solid #000; } .nextpage.nextpage-rating .page-btn.disabled { opacity: 0.5; cursor: not-allowed; } .nextpage.nextpage-rating span { padding: 6px 10px; } .listhd .item-thumbnail{ width: 74px; height: 111px; flex-shrink: 0; position: relative; } .listhd .item-thumbnail img{ width: 100%; height: 100%; } .listhd.listhd-rating .item { flex: unset; width: 100%; } .listhd .item .right { font-family: "Roboto Condensed"; flex-shrink: 0; } .listhd.nofirst.listhd-rating .item:first-child::before { height: 1px; } .listhd.listhd-fan .item1{ flex: 1; } @media only screen and (min-width:768px) { .listhd .item:first-child { padding: 10px 0px; } .listhd { display: flex; flex-wrap: wrap; column-gap: 20px; } .listhd .item { flex: 0 0 calc(50% - 10px); /* mỗi item chiếm 50% */ box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; } .listhd .item::before { left: 84px; width: calc(100% - 84px); } .listhd .item:nth-child(2)::before { background: transparent; } .listhd.listhd-fan .item::before { left: 40px; width: calc(100% - 40px); } .listhd.listhd-fan .item:nth-child(2)::before { background: #80808026; } .listhd.listhd-fan { display: block; } .listhd.listhd-rating .item::before { left: 40px; width: calc(100% - 40px); } .listhd.listhd-rating .item:nth-child(2)::before { background: #80808026; } } /*tab rating*/ .item-star .fa-star { color: #ccc; font-size: 16px; } .item-star .fa-star.active { background: linear-gradient(90deg, #FFD700, #FFA500); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .item-reply-main { background: #80808017; padding: 6px 15px; border-radius: 15px; width: 100%; } .filter-star { padding: 7px 10px; border-radius: 5px; margin-bottom: 10px; display: inline-block; cursor: pointer; font-size: 1.24rem; font-weight: 500; font-family: 'Roboto', sans-serif; background: rgba(0, 0, 0, 0.05); color: rgb(14 14 14 / 88%); } .filter-star.active { background-image: linear-gradient(135deg, #1ebbf0 30%, #39dfaa 100%); color: white; } .material-switch>input[type=checkbox] { display: none } .material-switch>label { cursor: pointer; height: 0; position: relative; width: 40px } .material-switch>label::before { background: #000; box-shadow: inset 0 0 10px rgba(0,0,0,.5); border-radius: 8px; content: ''; height: 16px; margin-top: -8px; position: absolute; opacity: .3; transition: .4s ease-in-out; width: 40px } .material-switch>label::after { background: #fff; border-radius: 16px; box-shadow: 0 0 5px rgba(0,0,0,.3); content: ''; height: 24px; left: -4px; margin-top: -8px; position: absolute; top: -4px; transition: .3s ease-in-out; width: 24px } .material-switch>input[type=checkbox]:checked+label::before { background: inherit; opacity: .5 } .material-switch>input[type=checkbox]:checked+label::after { background: inherit; left: 20px } .label-primary { background-image: linear-gradient(135deg,#1ebbf0 30%,#39dfaa 100%); color: #fff } /*xử lý card*/ .card0 { margin-top: 0px; } .card2 { background: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.25) 10%, rgba(255, 255, 255, 0.25) 100%); box-shadow: 8px 0 20px 0 rgba(31, 38, 135, 0.37); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); padding: 25px; margin: 25px 0; } #data { margin-top: 1rem; } #post_author.card2 { margin-top: 10px; } #filter { border-bottom: 2px solid #1ebbf0; } @media only screen and (min-width:992px) { .card0 { background: -webkit-linear-gradient(135deg, rgba(255, 255, 255, 0.25) 10%, rgba(255, 255, 255, 0.25) 100%); box-shadow: 8px 0 20px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); padding: 25px; margin: 25px 0; } .card2 { background: unset; backdrop-filter: unset; -webkit-backdrop-filter: unset; border: unset; border-radius: unset; padding: unset; margin: unset; box-shadow: unset; } .card0 { margin-top: 10px; } #layout_right::after { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background-color: #187a971c; } } 
 .ztop-img-list { width: 30px; border-radius: 50%; margin-right: 10px; } .z-top-date { color: gray; font-size: 12px; font-style: italic; } .z-top-flex { display: flex; justify-content: space-between; align-items: center; } #heading_tax { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; } .user_avatar_parent { position: relative; width: 120px; height: 120px; display: block; margin-left: auto; margin-right: auto; } .user_avatar_2 img { width: 120px; height: 120px; display: block; margin-left: auto; margin-right: auto; -webkit-box-shadow: 0 10px 15px 0 rgba(0,0,0,.15); -moz-box-shadow: 0 10px 15px 0 rgba(0,0,0,.15); box-shadow: 0 10px 15px 0 rgba(0,0,0,.15); border-radius: 50%; } h1.user_nickname { font-family: "Oswald"; font-size: 20px; text-align: center; margin: 12px 0px 4px 0px; } .user_login { text-align: center; font-size: 15px; font-weight: bold; margin-bottom: 10px; } .alert.alert-info { border-color: #1ebbf0; } #user_count { text-align: center; margin: 20px 0px; } #user_count .number { font-size: 16px; font-weight: bold; } ul.theloai-thumlist { margin-top: unset; } #post_author .max-width { max-width: 220px; text-align: center; margin: auto; } .h3 { margin-bottom: 10px; margin-top: 10px; } @media (min-width: 768px) { .h3 { margin-top: unset; } .h3.first { margin-top: 15px; } } .btn-r { background-image: linear-gradient(135deg,#FF0000 30%,#FE9A2E 100%); } .ztop-img { width: 100px; height: 100px; border-radius: 50%; border: 4px solid #efca20; } .ztop-img-2 { width: 30px; height: 30px; border-radius: 50%; margin: 0px 5px; } .ztop-name { text-align: center; margin-top: 30px; display: block; width: 100px; } .ztop-label { position: absolute; top: -60px; right: -5px; z-index: 1; } .ztop-label-2 { position: absolute; z-index: 1; left: 50%; transform: translate(-50%, 0); } .ztop-label-3 { position: absolute; z-index: 1; left: 50%; transform: translate(-50%, 0); padding: 5px 12px; color: white; border-radius: 50%; bottom: -55px; background-image: linear-gradient(135deg,#f0ed1e 30%,#ec7d50 100%); } .ztop-label img{ width: 40px; transform: rotate(22deg); } #top { display: flex; justify-content: center; } .ztop-gold { text-align: center; display: block; margin: 10px 0px; color: #ddb80f; } .ztop-gold-2 { color: #ddb80f; font-weight: bold; } .ztop-number { z-index: 5; text-align: center; color: white; width: 20px; height: 20px; border-radius: 50%; background-color: #ebebeb; display: inline-flex; justify-content: center; align-items: center; background-image: linear-gradient(135deg,#c2c2bd 30%,#6c554b 100%); border: 1px #c2c2bd solid; font-size: 12px; margin-right: 7px; } .ztop-flex { display: flex; justify-content: space-between; align-items: center; } .ztop-item { margin: 15px 10px 0px 10px; text-align: center; } .ztop-item a { position: relative; } .ztop-item-1 { order: 2; } .ztop-item-2 { order: 1; margin-top: 30px; } .ztop-item-3 { order: 3; margin-top: 30px; } .ztop-item-2 .ztop-img { width: 90px; height: 90px; border: 4px solid #bcbbb9; } .ztop-item-3 .ztop-img { width: 90px; height: 90px; border: 4px solid #cc8a27; } .ztop-item-1 .ztop-label-2 img { width: 110px; } .ztop-item-2 .ztop-label-2 img, .ztop-item-3 .ztop-label-2 img { width: 90px; } .ztop-item-2 .ztop-label-3 { color: white; bottom: -50px; padding: 3px 10px; background-image: linear-gradient( 135deg,#bcbbb9 30%,#6a7173 100%); } .ztop-item-3 .ztop-label-3 { color: white; bottom: -50px; padding: 3px 10px; background-image: linear-gradient( 135deg,#cc8a27 30%,#8b5a32 100%); } @media only screen and (min-width: 768px) and (max-width: 1199px) { .ztop-img { width: 80px; height: 80px; } .ztop-label { top: -51px; right: -10px; } .ztop-name { width: 80px; } .ztop-item-2 .ztop-img, .ztop-item-3 .ztop-img { width: 70px; height: 70px; } .ztop-label-3 { bottom: -45px; } .ztop-item-2 .ztop-label-3, .ztop-item-3 .ztop-label-3 { bottom: -40px; } } @media only screen and (min-width: 375px) and (max-width: 413px) { .ztop-img { width: 80px; height: 80px; } .ztop-label { top: -51px; right: -10px; } .ztop-name { width: 80px; } .ztop-item-2 .ztop-img, .ztop-item-3 .ztop-img { width: 70px; height: 70px; } } @media only screen and (max-width: 375px) { .ztop-img { width: 80px; height: 80px; } .ztop-label { top: -51px; right: -10px; } .ztop-item { margin: 0px 5px; } .ztop-name { width: 80px; } .ztop-item-2 .ztop-img, .ztop-item-3 .ztop-img { width: 70px; height: 70px; } .ztop-label-3 { bottom: -45px; } .ztop-item-2 .ztop-label-3, .ztop-item-3 .ztop-label-3 { bottom: -40px; } } #top .list-group { width: 100%; } #title-result { margin-bottom: 10px; } .list-group { margin-bottom: 0px; } .listhd .avatar { width: 30px; height: 30px; border-radius: 50%; } .fanlist.listhd .item .item1 { flex: 1; } .fanlist .item-gold { min-width: 60px; font-family: "Roboto Condensed"; } .fanlist .item-time { min-width: 80px; font-family: "Roboto Condensed"; text-align: right; } #post_author .description { text-align: left; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; color: #3e3e3e; } .ztop-gold { color: gray; } 
#filter{overflow-x:auto}#filter .swiper-wrapper{display:flex;width:max-content}#filter .swiper-slide{flex-shrink:0;border:0;background-color:transparent} .member-panel[hidden]{display:none!important}

#data [hidden]{display:none!important}#filter .fa-svg{width:1em;height:1em;fill:currentColor}#filter-rating button{border:0}