:root {
        --c1: #1ebbf0;
        /**color primary 1**/
        --c2: #39dfaa;
        /**color primary 2**/
        --b1: #ffffff;
        /**background 1 đen**/
        --b2: #ffffff;
        /**background 2 đen nhẹ**/
        --ct1: #000000;
        /**color text 1 trắng**/
        --ct2: #808080;
        /**color text 1 trắng nhẹ**/
    }

    .sidebar-right h3 {
        font-family: Oswald;
        font-size: 16px;
        border-style: solid;
        border-bottom-width: 3px;
        margin: 0 auto;
        -webkit-border-image: -webkit-linear-gradient(left, #1ebbf0 30%, #39dfaa 100%);
        border-image-slice: 1;
        border-top: 0;
        border-right: 0;
        border-left: 0;
        padding-top: 10px;
    }

    .sidebar-right .h2-child {
        display: inline-flex;
        margin: 0
    }

    .sidebar-right .h2-child .title-child {
        font-family: Oswald;
        font-size: 16px
    }

    .sidebar-right a {
        border-bottom: 1px dashed #000
    }

    .sidebar-right span a {
        border-bottom: unset
    }

    .sidebar-right .btn-black-border a {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .sidebar-right .btn-black-border a span {
        margin-left: 5px
    }

    .load_more_tax {
        cursor: pointer;
        margin-top: 10px
    }

    .tax #title-result {
        display: flex;
        justify-content: space-between;
        align-items: center
    }

    .tax #title-result .pull-left {
        font-weight: 700
    }

    .tax #title-result .form-group {
        margin-bottom: 0
    }

    .tax hr {
        margin-top: 10px;
        margin-bottom: 10px
    }

    #slider-keyword {
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0;
        margin: 0;
        white-space: nowrap;
        text-align: center;
        position: relative
    }

    #slider-keyword .btn-primary-border:hover,
    #slider-keyword .btn-primary-border:hover a {
        background: #fff;
        color: #1ebbf0;
        background-clip: padding-box
    }

    #slider-keyword .tag {
        font-weight: 400;
        font-family: Oswald;
        font-size: 12px;
        position: relative;
        padding: .6rem 1rem;
        box-sizing: border-box;
        color: #1ebbf0;
        background: #fff;
        background-clip: padding-box;
        border: solid 1px transparent;
        border-radius: 4px;
        margin: 4px 2px;
        display: inline-block
    }

    #slider-keyword .tag:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        margin: -1px;
        border-radius: inherit;
        background: linear-gradient(135deg, #1ebbf0 30%, #39dfaa 100%)
    }

    #slider-keyword .tag.active {
        background: linear-gradient(135deg, #1ebbf0 30%, #39dfaa 100%);
        color: #fff
    }

    #slider-keyword .tag.active:hover {
        color: #fff;
        background: linear-gradient(135deg, #1ebbf0 30%, #39dfaa 100%);
        background-clip: padding-box
    }

    h1 {
        margin-bottom: 0
    }

    .btn.border-primary,
    .btn.border-primary:hover {
        color: #1ebbf0
    }

    .btn-r {
        background-image: linear-gradient(135deg, red 30%, #fe9a2e 100%)
    }

    .btn-r:hover {
        background-image: linear-gradient(135deg, #fe9a2e 30%, red 100%)
    }

    .col-line-last {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px dashed #ccc
    }

    .sidebar-right .col-line-last a {
        text-decoration: none;
        border-bottom: unset
    }

    .sidebar-right h3 a {
        text-decoration: none;
        border-bottom: unset
    }

    ul.theloai-thumlist {
        padding-left: 0
    }

    table.theloai-thumlist tbody {
        width: 100%;
        display: table;
    }

    table.theloai-thumlist {
        margin-top: 15px;
        display: block
    }

    .theloai-thumlist>li,
    .theloai-thumlist tr {
        display: block;
        padding-left: 0;
        margin-bottom: 10px
    }

    .theloai-thumlist h2 {
        padding-left: 10px;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 5px
    }

    @media (min-width:1200px) {
        .theloai-thumlist h3 {
            min-height: 45px
        }
    }

    .theloai-thumlist p {
        margin-bottom: 4px;
        margin-top: 4px
    }

    .theloai-thumlist .thumbnail {
        width: 74px;
        height: 111px;
        float: left;
        box-shadow: 0 2px 8px rgba(1, 3, 3, .16);
        position: relative
    }

    .theloai-thumlist .thumbnail img {
        width: 74px;
        height: 111px
    }

    .theloai-thumlist .rating {
        position: absolute;
        bottom: 0;
        left: 0;
        background: #eac100;
        color: #fff;
        font-size: 13px;
        font-weight: 300;
        padding: 2px 8px
    }

    .theloai-thumlist .content {
        overflow: hidden;
        padding-left: 10px;
        font-size: 13px
    }

    .theloai-thumlist .text {
        max-height: 135px;
        overflow: hidden
    }

    .theloai-thumlist .crop-text-2 {
        height: 36px
    }

    .theloai-thumlist h2.crop-text-2 {
        height: 43px
    }

    .full-label {
        width: 34px;
        height: 50px;
        position: absolute;
        display: block;
        top: 0;
        left: -7px;
        z-index: 1;
        background: transparent url(/assets/img/full-label.png) no-repeat
    }

    .label-new {
        border: 1px solid #1ebbf0;
        color: #1ebbf0
    }

    .label-full {
        border: 1px solid #39dfaa;
        color: #39dfaa
    }

    .label-title {
        padding: 0px 3px;
        font-size: 13px;
        vertical-align: bottom;
        margin-left: 5px
    }

    .label-new:before {
        content: "New"
    }

    .label-full:before {
        content: "Full"
    }


 /* 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; } } 

 .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: #3b3b3b; word-break: break-word; overflow-wrap: anywhere; } .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%); } .listhd .item-thumbnail{ width: 74px; height: 111px; flex-shrink: 0; position: relative; } .listhd .item-thumbnail img{ width: 100%; height: 100%; } h1 { font-size: 24px; margin-bottom: 10px; } .listhd .item:first-child { padding: 0px 0px 10px 0px; } .listhd .item::before { left: 84px; width: calc(100% - 84px + 25px); } .card1 .filter_hidden.active .filter_parent_sort { padding: 15px 0px 0px 0px; } .card0 { margin-top: 25px; } @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; } .card1 .filter_hidden.active .filter_parent_sort { padding: 15px 0px 15px 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); 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; } @media only screen and (min-width:540px) { .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; } #data { margin-top: 1.5rem; } } 

 .filter_button, .filter_close { font-size: 16px; padding: .8rem 2rem; border: unset; border-radius: 30px; } .filter_button i { margin-left: 0.5rem; } @media only screen and (min-width:540px) { .filter_button { padding: .8rem 3rem; } .filter_button i { margin-left: 1.5rem; } } .swiper-wrapper, .filter { display: flex; /* cho các item nằm ngang */ flex-wrap: wrap; /* xuống dòng khi tràn */ gap: 5px; /* cách đều giữa các item (hiện đại, thay margin) */ font-size: 15px; } .filter_hidden.active .swiper-wrapper { gap: 0px; } .filter_left { font-weight: 500; font-family: 'Roboto', sans-serif; width: 80px; margin-left: 20px; } .filter .item { padding: 5px 10px; border-radius: 5px; border: 2px solid transparent; cursor: pointer; color: rgb(22 22 22 / 88%); } .filter .item.active { color: #040404; border-radius: 5px; background: linear-gradient(white, white) padding-box, linear-gradient(135deg, #1ebbf0e3, #39dfaa) border-box; } .swiper-slide { width: auto; height: auto; } /* chế độ ban đầu*/ .button_full_background .filter .item.active { background-image: linear-gradient(135deg, #1ebbf0 30%, #39dfaa 100%); color: white; } .button_full_background .filter_left { display: none; } .button_full_background .swiper-slide { text-align: center; font-size: 16px; height: 100%; } .button_full_background .filter { display: inline-block; } .button_full_background .swiper-wrapper { flex-wrap: unset; } .button_full_background .item { padding: 8px 10px; } .filter_parent { border-bottom: 1px dashed #0000002e; padding: 5px 0px; } .filter_parent.last-visible { border-bottom: unset; } .filter_hidden { border: 1px dashed #0000002e; margin-top: -15px; } /* filter_hidden chế độ ban đầu */ .filter_hidden.active { border: unset; } .filter_hidden.active .swiper{ margin-left: unset; } .filter_toggle { background: white; display: inline-block; padding: 0 .75rem 0 .5rem; font-size: 16px; } .filter_parent { display: flex; } .filter_left { flex-shrink: 0; margin-top: 8px; } @media only screen and (min-width:768px) { /* chế độ ban đầu*/ .button_full_background .item { padding: 5px 10px; } .filter_parent.last-visible { padding: 10px 0px 15px 0px; } .filter_hidden.active { border: 1px dashed #0000002e; } .button_full_background .filter_left { display: inline-block; } .filter_left { width: 100px; } .filter .swiper-slide { text-align: left; } .filter_parent { display: flex; } .filter_left { flex-shrink: 0; margin-top: 8px; } .button_full_background .swiper-slide { font-size: 15px; } /* trên pc luôn chặn swiperjs */ .swiper{ margin-left: unset; } .swiper-slide{ width: auto; } } 


                        .fa-secondary {
                            opacity: .4
                        }