body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
button,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset,
img {
    border: 0
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var,
optgroup,
i {
    font-style: none;
    font-weight: none
}

del,
ins {
    text-decoration: none
}

li {
    list-style: none
}

caption,
th {
    text-align: left
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: 700
}

q:before,
q:after {
    content: ''
}

abbr,
acronym {
    border: 0;
    font-variant: normal
}

sup {
    vertical-align: baseline
}

sub {
    vertical-align: baseline
}

legend {
    color: #333
}

input,
button,
textarea,
select,
optgroup,
option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    outline: none
}

#header {
    position: relative
}

body {
    background: #1b1b1b;
    color: #dadada;
    font-family: arial, sans-serif;
    font-size: 14px
}

#wrapper {
    max-width: 600px;
    margin: 0 auto;
    background: #1b1b1b;
    border: 1px solid #2b2b2b
}

#container {
    display: block;
    overflow: hidden
}

#video {
    margin: 0 5px
}

a {
    text-decoration: none;
    color: #dadada
}

a:hover {
    color: #fff
}

li {
    list-style: none;
    margin: 0;
    padding: 0
}

span.url {
    color: rgba(154, 44, 44, .6)
}

span.url:hover {
    color: #9A2C2C
}

img {
    max-width: 100%;
    height: auto
}

.clear {
    clear: both
}

.clr {
    clear: both
}

.hidden {
    display: none!important
}

.notice {
    line-height: 1.5em;
    display: inline-block;
    background: #2b2b2b;
    margin-bottom: 5px;
    padding: 5px
}

#notice {
    background: #2b2b2b;
    margin: 5px;
    padding: 5px;
    line-height: 1.5em
}

.status {
    background: #2b2b2b;
    margin-top: 5px;
    padding: 5px;
    line-height: 1.5em
}

.SC_TBlock {
    background: #2b2b2b;
    text-align: center;
    margin-top: 4px;
    padding: 5px;
    line-height: 1.5em
}

.ads {
    position: relative;
    background: #2b2b2b;
    margin: 5px 0;
    padding: 3px 0 2px;
    text-align: center
}

#ads {
    position: relative;
    background: #2b2b2b;
    margin-top: 5px;
    padding: 3px 0 2px;
    text-align: center
}

#top {
    max-width: 600px;
    margin: 0 auto;
    background: #1b1b1b;
    border-bottom: 2px solid #2b2b2b
}

#logo {
    text-align: center;
    border-bottom: 2px solid #2b2b2b;
    padding: 10px 5px 5px;
    margin: 0 5px 5px;
    opacity: .8
}

#logo:hover {
    opacity: 1
}

span.icon {
    display: inline-flex
}

.icon-home:before {
    content: '';
    background-image: url(../img/icon-home.svg);
    width: 16px;
    height: 16px;
    background-size: 16px;
    margin-right: 2px;
    background-repeat: no-repeat;
    display: inline-flex
}

.icon-verify:before {
    content: '';
    background-image: url(../img/icon-verify.svg);
    width: 16px;
    height: 16px;
    background-size: 16px;
    background-repeat: no-repeat;
    margin-right: 3px
}

.icon-subtitles:before {
    content: '';
    background-image: url(../img/icon-subtitles.svg);
    width: 16px;
    height: 16px;
    background-size: 16px;
    background-repeat: no-repeat;
    margin-right: 3px
}

.icon-heart:before {
    content: '';
    background-image: url(../img/icon-heart.svg);
    width: 16px;
    height: 16px;
    background-size: 16px;
    background-repeat: no-repeat;
    margin-right: 3px
}

.icon-thumbs-up:before {
    content: '';
    background-image: url(../img/icon-thumbs-up.svg);
    width: 16px;
    height: 16px;
    background-size: 16px;
    margin-top: -1px;
    background-repeat: no-repeat;
    margin-right: 3px
}

.icon-views:before {
    content: '';
    background-image: url(../img/icon-views.svg);
    width: 16px;
    height: 16px;
    background-size: 16px;
    background-repeat: no-repeat;
    margin-right: 3px
}

.icon-ranking:before {
    content: '';
    background-image: url(../img/icon-ranking.svg);
    width: 16px;
    height: 16px;
    background-size: 16px;
    margin-right: 3px;
    background-repeat: no-repeat
}

.icon-fire:before {
    content: '';
    background-image: url(../img/icon-fire.svg);
    width: 16px;
    height: 16px;
    background-size: 16px;
    margin-right: 1px;
    background-repeat: no-repeat
}

.icon-hashtag:before {
    content: '';
    background-image: url(../img/icon-hashtag.svg);
    width: 16px;
    height: 16px;
    background-size: 16px;
    margin-right: 3px;
    background-repeat: no-repeat
}

.icon-xvideos:before {
    content: '';
    background-image: url(../img/icon-xvideos.svg);
    width: 16px;
    height: 16px;
    background-size: 16px;
    margin-right: 3px;
    background-repeat: no-repeat
}

.icon-phim69:before {
    content: '';
    background-image: url(../img/icon-phim69.svg);
    width: 16px;
    height: 16px;
    background-size: 16px;
    margin-right: 3px;
    background-repeat: no-repeat
}

.icon-xnxx:before {
    content: '';
    background-image: url(../img/icon-xnxx.svg);
    width: 16px;
    height: 16px;
    background-size: 16px;
    margin-right: 3px;
    background-repeat: no-repeat
}

.icon-japan:before {
    content: '';
    background-image: url(../img/icon-japan.svg);
    width: 16px;
    height: 16px;
    background-size: 16px;
    margin-right: 3px;
    background-repeat: no-repeat
}

.icon-usa:before {
    content: '';
    background-image: url(../img/icon-usa.svg);
    width: 16px;
    height: 16px;
    background-size: 16px;
    margin-right: 3px;
    background-repeat: no-repeat
}

.icon-vietnam:before {
    content: '';
    background-image: url(../img/icon-vietnam.svg);
    width: 16px;
    height: 16px;
    background-size: 16px;
    margin-right: 3px;
    background-repeat: no-repeat
}

.icon-international:before {
    content: '';
    background-image: url(../img/icon-international.svg);
    width: 16px;
    height: 16px;
    background-size: 16px;
    margin-right: 3px;
    background-repeat: no-repeat
}

#primary-nav {
    position: relative;
    font-size: 14px;
    font-weight: 400;
    margin: 0 5px;
    border-bottom: 2px solid #2b2b2b;
    overflow: hidden
}

#primary-nav .menu {
    height: 40px;
    border: 0;
    background: 0;
    box-shadow: none
}

#primary-nav .menu a {
    float: left;
    display: inline-flex;
    background: #2b2b2b;
    margin: 0 5px 5px 0;
    padding: 5px 10px;
    color: #dadada;
    border-radius: 4px;
    text-align: center
}

#primary-nav .menu a:hover {
    color: #fff
}

#secondary-nav {
    position: relative;
    overflow: hidden
}

#secondary-nav .menu2 {
    font-size: 14px
}

#secondary-nav .menu2 a {
    display: inline-flex;
    font-size: 14px;
    font-weight: 400;
    background: #2b2b2b;
    float: left;
    margin: 5px 0 0 5px;
    padding: 5px;
    border-radius: 4px;
    text-align: center
}

#secondary-nav .menu2 a:hover {
    color: #fff
}

#search-box {
    padding: 5px
}

.search {
    width: 100%;
    border: 1px solid #2b2b2b;
    display: flex;
    overflow: hidden
}

span.icon-search {
    display: inline-flex;
    background: #1b1b1b;
    padding: .3rem;
    margin-top: 1px;
    color: #dadada;
    opacity: .6
}

span.icon-search:before {
    content: '';
    background-image: url(../img/icon-search.svg);
    width: 14px;
    height: 14px;
    background-size: 14px;
    background-repeat: no-repeat
}

.search .searchTxt {
    width: 100%;
    background: #1b1b1b;
    padding: 5px;
    color: #dadada;
    font-size: 14px;
    outline: 0;
    border: 0;
    border-collapse: separate;
    -webkit-appearance: none
}

.search .searchBtn {
    background: rgba(154, 44, 44, .6);
    color: #dadada;
    border-left: 1px solid #2b2b2b!important;
    outline: 0;
    border: 0;
    border-radius: 0;
    float: left;
    font-size: 14px;
    padding: 5px;
    cursor: pointer;
    -webkit-appearance: none
}

.search .searchBtn:hover {
    background: #9A2C2C
}

.category-info {
    background: #2b2b2b;
    margin: 0 5px;
    padding: 5px;
    font-size: 14px;
    line-height: 1.5;
    border-radius: 4px
}

#page-title {
    display: block
}

.breadcrumb {
    font-size: 16px;
    font-weight: 400;
    margin: 5px;
    text-transform: uppercase;
    border-bottom: 2px solid #2b2b2b
}

.breadcrumb span a {
    color: #dadada
}

.breadcrumb span a:hover {
    color: #fff;
    text-decoration: none
}

.breadcrumb.video-title {
    font-size: 16px;
    font-weight: 400;
    margin: 5px;
    padding: 5px;
    text-transform: none;
    border-bottom: 2px solid #2b2b2b;
    padding-left: 5px;
    border-left: 3px solid #9A2C2C
}

.box {
    margin: 0
}

.video-box {
    display: block
}

#content {
    display: block
}

#video-list {
    display: block
}

.video-item {
    position: relative;
    display: block;
    overflow: hidden
}

.ribbon {
    font-size: .9em;
    position: absolute;
    top: 0;
    border-left: 3px solid #9A2C2C;
    border-radius: 0 4px 4px 0;
    background: none repeat scroll 0 0 rgba(17, 17, 17, .6);
    padding: 2px 4px;
    margin-top: 2px;
    margin-left: 7px;
    color: #fff
}

.video-name {
    line-height: 1.5;
    font-size: 15px;
    font-weight: 400;
    height: 45px!important;
    max-height: 45px!important;
    margin-bottom: 15px;
    margin-left: 5px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    white-space: normal;
    -webkit-box-orient: vertical;
    float: left
}

.video-rank {
    font-size: .9em;
    position: absolute;
    top: 0;
    border-left: 3px solid #9A2C2C;
    border-radius: 0 4px 4px 0;
    background: none repeat scroll 0 0 rgba(17, 17, 17, .6);
    margin-top: 2px;
    padding: 2px 4px;
    margin-left: 7px;
    color: #fff
}

.video-image {
    float: left;
    width: calc(100% - 10px);
    height: auto;
    margin-left: 5px;
    border-radius: 4px
}

.video-player {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%
}

.play-video .video .video-item {
    padding: 5px 10px 10px
}

.video-content {
    display: block
}

.video-description {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word
}

.video-stats {
    display: inline-block
}

#video-actions {
    margin-top: 5px;
    display: block;
    font-weight: 400
}

#video-actions ul {
    margin-top: 0
}

#video-actions .video-server {
    cursor: pointer;
    padding: 5px 10px;
    margin-bottom: 5px;
    border-radius: 4px;
    display: inline-flex
}

#video-actions .video-server:hover {
    background: #9A2C2C;
    color: #fff
}

#video-actions .likes {
    cursor: pointer;
    background: #2b2b2b;
    margin-bottom: 5px;
    padding: 5px;
    border-radius: 4px;
    display: inline-flex
}

#video-actions .dislikes {
    cursor: pointer;
    background: #2b2b2b;
    margin-bottom: 5px;
    padding: 5px;
    border-radius: 4px;
    display: inline-flex
}

#video-actions .likes:hover,
#video-actions .dislikes:hover {
    color: #fff
}

#video-actions .rating {
    cursor: pointer;
    background: #2b2b2b;
    padding: 5px;
    border-radius: 4px;
    display: inline-flex
}

#video-note {
    background: #2b2b2b;
    padding: 5px;
    border-radius: 4px;
    display: inline-block
}

.video-info {
    display: inline-flex;
    margin-bottom: 5px
}

.video-code {
    font-size: 14px;
    padding: 5px;
    background: #2b2b2b;
    color: #dadada;
    white-space: nowrap;
    margin-right: 5px;
    border-radius: 4px
}

.video-code:hover {
    color: #fff
}

.video-link {
    display: inline-block;
    background: #2b2b2b;
    color: #9A2C2C;
    font-size: 14px;
    padding: 5px;
    white-space: nowrap;
    border-radius: 4px
}

.video-link:hover {
    color: #9A2C2C
}

span.likes:after {
    content: '';
    background-image: url(../img/icon-like.svg);
    width: 16px;
    height: 16px;
    background-size: 16px;
    background-repeat: no-repeat;
    margin-left: 3px
}

span.likes.active:after {
    background-image: url(../img/icon-liked.svg)
}

span.dislikes:after {
    content: '';
    background-image: url(../img/icon-dislike.svg);
    width: 16px;
    height: 16px;
    background-size: 16px;
    background-repeat: no-repeat;
    margin-left: 3px
}

span.dislikes.active:after {
    background-image: url(../img/icon-disliked.svg)
}

span.rating:after {
    content: '';
    background-image: url(../img/icon-heart.svg);
    width: 16px;
    height: 16px;
    background-size: 16px;
    background-repeat: no-repeat;
    margin-left: 3px
}

span.likes-rank {
    display: inline-flex
}

span.likes-rank:after {
    content: '';
    background-image: url(../img/icon-like.svg);
    width: 14px;
    height: 14px;
    background-size: 14px;
    background-repeat: no-repeat;
    margin-left: 3px;
    margin-top: -1px
}

span.views-rank {
    display: inline-flex
}

span.views-rank:after {
    content: '';
    background-image: url(../img/icon-views.svg);
    width: 14px;
    height: 14px;
    background-size: 14px;
    background-repeat: no-repeat;
    margin-left: 3px
}

span.views {
    cursor: pointer;
    background: #2b2b2b;
    margin-bottom: 5px;
    padding: 5px;
    border-radius: 4px;
    display: inline-flex
}

span.views:after {
    content: '';
    background: url(../img/icon-views.svg) no-repeat;
    display: block;
    width: 16px;
    height: 16px;
    background-size: 16px;
    margin-left: 3px
}

.type-list {
    cursor: pointer;
    margin-left: 5px
}

.type-list ul {
    margin-top: 0
}

.type-list .type-video {
    margin-bottom: 5px;
    padding: 8px;
    display: inline-block
}

.type-list .type-video:hover {
    color: #fff
}

.bt_normal {
    background: #2b2b2b;
    color: #dadada
}

.bt_active {
    background: #9A2C2C;
    color: #fff
}

#download {
    text-align: center
}

.download-button {
    cursor: pointer;
    display: inline-flex
}

.download {
    width: 16px;
    background: #2b2b2b;
    color: #dadada;
    padding: 5px 10px
}

.download:hover {
    background: #9A2C2C;
    color: #fff
}

a.download:before {
    content: '';
    position: absolute;
    background: url(../img/dl.svg) no-repeat;
    width: 25px;
    height: 14px;
    background-size: 16px;
    background-repeat: no-repeat
}

.quality {
    background: #2b2b2b;
    color: #dadada;
    border: 1px solid #2b2b2b;
    padding: 4px 5px;
    font-size: 15px;
    cursor: pointer;
    margin-right: 10px
}

.quality:hover {
    background: #9A2C2C;
    color: #fff;
    border: 1px solid #2b2b2b
}

.video-tags {
    display: inline-block;
    list-style-type: none;
    margin-bottom: 5px;
    width: 100%;
    font-weight: 400
}

.category-tag a {
    display: inline-flex;
    font-size: 14px;
    padding: 5px;
    margin-top: 5px;
    white-space: nowrap;
    border-radius: 4px;
    background: #2b2b2b
}

.category-tag a:before {
    content: '';
    background-image: url(../img/icon-hashtag.svg);
    background-size: 16px;
    width: 16px;
    margin-right: 3px;
    background-repeat: no-repeat
}

.category-tag a:hover {
    background-color: #9A2C2C;
    color: #fff
}

.actress-tag {
    list-style-type: none;
    margin: 0
}

.actress-tag a {
    display: inline-flex;
    font-size: 14px;
    padding: 5px;
    margin-top: 5px;
    white-space: nowrap;
    background: #2b2b2b;
    border-radius: 0 4px 4px 0;
    border-left: 3px solid #f90
}

.actress-tag a:hover {
    background-color: #9A2C2C;
    color: #fff
}

.search-history {
    list-style-type: none;
    margin: 0 5px;
    overflow: hidden
}

.search-history a {
    display: inline-block;
    font-size: 14px;
    padding: 5px 10px;
    margin-top: 5px;
    white-space: nowrap;
    background: #2b2b2b;
    border-radius: 4px
}

.search-history a:hover {
    background-color: #9A2C2C;
    color: #fff
}

.web-link {
    list-style-type: none;
    margin: 0 5px;
    overflow: hidden
}

.web-link a {
    display: inline-block;
    font-size: 14px;
    padding: 5px 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    white-space: nowrap;
    background: #2b2b2b;
    border-radius: 4px
}

.web-link a:hover {
    background-color: #9A2C2C;
    color: #fff
}

.textFilter {
    list-style-type: none;
    text-transform: uppercase;
    margin: 0 5px 5px;
    overflow: hidden
}

.textFilter a {
    display: inline-block;
    font-size: 14px;
    padding: 5px;
    margin-top: 5px;
    white-space: nowrap;
    border-radius: 4px;
    background: #2b2b2b
}

.textFilter a:hover {
    background-color: #9A2C2C;
    color: #fff
}

.loadPage .active {
    background-color: #9A2C2C;
    color: #fff
}

.note {
    background: #2b2b2b;
    margin: 5px;
    padding: 5px;
    line-height: 1.5em
}

.pagenavi {
    clear: both;
    margin-bottom: 5px;
    text-align: center
}

.pagenavi a {
    border: 1px solid #dadada;
    padding: 5px 15px;
    margin-right: 5px;
    margin-bottom: 5px;
    border-radius: 4px;
    display: inline-block
}

.pagenavi a.active {
    color: #dadada;
    background: rgba(154, 44, 44, .8)
}

footer {
    display: grid
}

.footer-wrap {
    font-size: 14px;
    font-weight: 400;
    margin: 5px;
    background: #1b1b1b;
    line-height: 1.5em;
    border-top: 2px solid #2b2b2b
}

.intrinsic-container {
    position: relative;
    height: 0;
    overflow: hidden
}

.intrinsic-container-16x9 {
    padding-bottom: 56.25%
}

.intrinsic-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#vlxx.jw-error {
    height: 56.25%!important
}

.jw-icon.jw-icon-inline.jw-button-color.jw-reset.jw-icon-rewind.jw-icon-next {
    display: none!important
}

.jw-toggle.jw-off {
    color: #d8d8d8
}

.jw-controlbar.jw-background-color.jw-reset {
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .25) 30%, rgba(0, 0, 0, .4) 70%, rgba(0, 0, 0, .5))
}

.jw-rightclick {
    display: none!important
}

.jw-flag-small-player .jw-nextup-container .jw-nextup {
    display: none!important
}

.jw-flag-small-player .jw-nextup-container {
    display: none!important
}

.jw-icon.jw-icon-rewind.jw-button-color.jw-reset {
    visibility: hidden
}

.jw-icon.jw-icon-inline.jw-button-color.jw-reset.jw-icon-rewind {
    display: none!important
}

.jw-logo.jw-logo-top-right.jw-reset {
    width: 100px!important;
    height: 24px!important;
    top: -15px!important;
    right: -15px!important
}

.jw-icon.jw-icon-inline.jw-button-color.jw-reset.jw-icon-pip {
    display: none!important
}

.jw-icon-cc {
    display: none!important
}

@media only screen and (max-width: 479.98px) {
    .video-item {
        width: 50%;
        float: left
    }
}

@media only screen and (min-width: 480px) {
    .video-item {
        width: 33.3333333%;
        float: left
    }
}

@media only screen and (max-width: 299.98px) {
    #adx {
        display: none!important
    }
}

.jw-logo.jw-logo-top-right.jw-reset {
    width: 100px!important;
    height: 28px!important
}

.empty-result {
    margin-bottom: 1em;
    margin-top: 1em;
    color: #717171;
    font-size: 20px;
    text-align: center;
}

.close-ads-catfishs {
    position: absolute;
    cursor: pointer;
    color: #fff;
    padding: 2px 6px;
    background-color: #818181;
    border: none;
    border-radius: 3px;
    font-weight: 600;
    margin-top: 2px;
    font-size: 15px;
    right: 0;
    top: -27px;
}

.catfishs-ads {
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 95%;
    align-items: center;
    padding: 0 10px;
}

.ads-body {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    width: 100%;
    align-items: center;
}

.ads-item {
    position: relative;
    max-width: 280px;
}

.catfishs-item {
    position: relative;
    max-width: 280px;
}

.ads-item img,
.ads-item iframe,
.catfishs-item img,
.catfishs-item iframe,
.ads img,
.ads iframe,
#ads img,
#ads iframe {
    max-width: 100%;
    width: 100%;
    height: auto;
}

.close-ads {
    position: absolute;
    right: 3px;
    cursor: pointer;
    color: #fff;
    padding: 2px 6px;
    background-color: #818181;
    border: none;
    border-radius: 3px;
    font-weight: 600;
    margin-top: 2px;
    font-size: 15px;
}

.banner-preload {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1000;
    background: rgba(0, 0, 0, .8);
    box-shadow: 0 0 5px #fff;
}

.banner-preload .banner-preload-container {
    position: relative;
    width: 280px;
    margin: 0 auto;
    cursor: pointer;
    height: 200px;
}

.banner-preload-container>a {
    max-width: 279px;
    height: auto;
    margin: calc(50vh - 130px) auto;
    display: block;
}

.banner-preload .banner-preload-container img {
    width: 100%;
    height: 100%;
}

.banner-preload .banner-preload-container .banner-preload-close {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 10px;
    font-size: 16px;
    color: #dadada;
    background-color: #2b2b2b;
    border: 1px solid #dadada;
    box-shadow: 0 0 5px #fff;
    opacity: .8;
    cursor: pointer;
}
/* ===== Holiclip modern mobile UI refresh ===== */
:root { --ui-bg:#090b0d; --ui-panel:#101316; --ui-border:#24282c; --ui-text:#f1f3f5; --ui-muted:#9ca3aa; --ui-red:#9A2C2C; }
html,body { background:var(--ui-bg); color:var(--ui-text); }
body { font-family:Arial,Helvetica,sans-serif; }
#wrapper { margin:0; max-width:none; border:0; border-radius:0; background:#0b0d0f; }
#header { padding:0 10px 10px; background:#0b0d0f; }
.site-header { min-height:58px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; border-bottom:1px solid var(--ui-border); }
#logo { float:none; margin:0; order:0; width:100%; display:flex; justify-content:center; opacity:1; }
#logo img { width:180px; height:auto; max-height:30px; object-fit:contain; }
#primary-nav { order:1; width:100%; margin:0; border:0 !important; overflow:visible; }
#primary-nav .menu { height:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:5px; overflow:visible; }
#primary-nav .menu a { float:none !important; display:flex !important; min-height:38px; margin:0 !important; padding:0 4px !important; align-items:center; justify-content:center; background:#131619 !important; border:1px solid #252a2f !important; border-radius:6px !important; color:#e4e7e9 !important; font-size:12px; }
#primary-nav .menu li a:hover { color:#fff !important; }
.icon { align-items:center; white-space:nowrap; }
.icon-home:before,.icon-thumbs-up:before,.icon-ranking:before,.icon-fire:before { margin-right:4px; }
.icon-ranking:before,.icon-fire:before { display:inline-flex; content:''; width:15px; height:15px; background-size:15px; background-repeat:no-repeat; }
.icon-ranking:before { background-image:url(../img/icon-ranking.svg); }
.icon-fire:before { background-image:url(../img/icon-fire.svg); }

#category-nav { margin:10px 0 0; padding:10px; border:1px solid var(--ui-border); border-radius:8px; background:#0d1012; }
.category-nav-title { margin-bottom:9px; padding-left:9px; border-left:3px solid var(--ui-red); color:#eceff1; font-size:14px; font-weight:700; }
.category-nav-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.category-nav-item { min-height:34px; padding:0 5px; gap:5px; background:#121518; border:1px solid #20252a; border-radius:6px; color:#dfe3e6; font-size:12px; }
.category-nav-item img { width:15px; height:15px; }
.category-nav-item .icon { font-size:12px; }

#search-box { float:none; display:block; padding:0; margin:10px 0 0; }
.search { height:44px; max-width:none; border:1px solid var(--ui-border); border-radius:7px; background:#0f1215; }
span.icon-search { width:38px; padding:0; margin:0; display:flex; align-items:center; justify-content:center; background:transparent; }
.search .searchTxt { min-width:0; padding:0 6px; font-size:13px; background:transparent; }
.search .searchBtn { min-width:82px; margin:3px; padding:0 10px; border:0 !important; border-radius:6px; background:var(--ui-red); font-size:13px; }

#container { padding:0 10px 10px; }
.video-title-wrap { margin-top:10px; }
#page-title.video-title { margin:0 0 8px; padding:0 0 8px 9px; border-left:3px solid var(--ui-red); border-bottom:1px solid var(--ui-border); font-size:17px; font-weight:700; }
#video { margin:0; padding:8px; background:#0e1114; border:1px solid var(--ui-border); border-radius:8px; }
.video-player { padding-bottom:56.25%; border-radius:6px; overflow:hidden; background:#050607; }
#video-actions { margin-top:8px; display:flex; flex-wrap:wrap; gap:5px; min-height:0; }
#video-actions .video-server { order:0; min-height:36px; padding:0 9px; margin:0; align-items:center; border:1px solid #252a2f; background:#131619; border-radius:6px; }
#video-actions .video-stats { float:none !important; width:100%; margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:5px; order:2; }
#video-actions .likes,#video-actions .dislikes,#video-actions .rating,span.views { min-height:36px; margin:0; padding:0 5px; box-sizing:border-box; justify-content:center; align-items:center; background:#131619; border:1px solid #252a2f; border-radius:6px; }
.video-info { width:100%; display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; margin-bottom:0; }
.video-rank-badge { min-width:46px; height:36px; padding:0 10px; border-radius:6px; background:var(--ui-red); font-weight:700; }
.video-code-preserved { display:none !important; }
.video-link,.video-code { min-height:36px; box-sizing:border-box; display:inline-flex; align-items:center; padding:0 9px; margin:0; background:#131619; border:1px solid #252a2f; border-radius:6px; font-size:12px; }
.video-link { color:#9A2C2C; }
.video-content { margin-top:6px; }
.video-description { font-size:13px; line-height:1.45; }
.video-tags a { border:1px solid #252a2f; background:#131619; }

#video-list { margin-top:10px; padding:10px 0 0; border-top:1px solid var(--ui-border); overflow:hidden; }
#video-list h2.breadcrumb { margin:0 0 9px; padding:0 0 7px 9px; border-left:3px solid var(--ui-red); border-bottom:1px solid var(--ui-border); font-size:14px; }
.video-item { width:50%; margin-bottom:10px; text-align:left; }
.video-image { width:calc(100% - 10px); margin:0 5px; border-radius:6px; }
.video-name { margin:6px 5px 0; font-size:13px; height:39px; max-height:39px; text-align:left; }

#footer { padding:0 10px 10px; }
#footer footer { border-top:1px solid var(--ui-border); padding:16px 0 4px; }
#footer .breadcrumb { margin:0 0 8px; border:0; text-align:center; font-size:14px; }
.search-history { margin:0; text-align:center; }
.search-history a { margin:3px 2px 0; padding:5px 8px; background:#131619; border:1px solid #252a2f; border-radius:6px; font-size:12px; }
.contribution-upload { width:auto !important; margin:14px auto 7px !important; text-align:center; }
.contribution-upload-toggle { min-height:38px !important; padding:0 13px !important; background:#131619 !important; border:1px solid #2b3035 !important; border-radius:7px !important; font-size:13px !important; }
.footer-wrap { margin-top:10px; text-align:center; color:#aeb4b9; font-size:12px; }

@media (max-width:360px) {
    #primary-nav .menu a { font-size:11px; }
    .category-nav-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .category-nav-item { font-size:12px; }
}

.video-action-main { width:100%; display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.video-link-inline,.video-category-inline { min-height:36px; display:inline-flex; align-items:center; padding:0 9px; box-sizing:border-box; background:#131619; border:1px solid #252a2f; border-radius:6px; font-size:12px; }
.video-category-inline { color:#dfe3e6; }
.video-info-preserved { display:none !important; }


/* ===== Requested mobile navigation/category/play adjustments ===== */
:root { --ui-red: #9A2C2C; }

/* Only 3 top navigation items: Trang chủ / Clip hay / Xem nhiều nhất */
#primary-nav .menu { grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
#primary-nav .menu a { min-height:42px; }
/* Category heading is intentionally removed. */
#category-nav { margin-top:10px; }
.category-nav-title { display:none !important; }

/* ===== Mobile category alignment: force the label to the exact center ===== */
.category-nav-grid {
    align-items:stretch !important;
}
.category-nav-item {
    position:relative !important;
    display:grid !important;
    place-items:center !important;
    width:100% !important;
    min-height:40px !important;
    height:40px !important;
    max-height:40px !important;
    margin:0 !important;
    padding:0 !important;
    box-sizing:border-box !important;
    text-align:center !important;
    line-height:1.2 !important;
    overflow:hidden !important;
}
.category-nav-item .category-nav-content {
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    line-height:1.2 !important;
}
.category-nav-item .category-nav-label {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:auto !important;
    margin:0 !important;
    padding:0 !important;
    text-align:center !important;
    line-height:1.2 !important;
}
.category-nav-item .icon,
.category-nav-item img {
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 !important;
    line-height:1 !important;
}

/* Softer red matching the logo better. */
.search .searchBtn { background:#9A2C2C !important; }
.search .searchBtn:hover { background:#9A2C2C !important; }

/* The inline server/link/category row was removed from PHP; keep the server row clean. */
.video-action-main { gap:6px; }




/* ===== Definitive top navigation state ===== */
#primary-nav .menu li a,
#primary-nav .menu li.active a,
#primary-nav .menu li a.nav-selected {
    background:#131619 !important;
    border-color:#252a2f !important;
    color:#e5e7eb !important;
}
#primary-nav .menu li a:hover {
    background:#171a1e !important;
    border-color:#2d3339 !important;
    color:#fff !important;
}
#primary-nav .menu li a.nav-selected {
    background:#9A2C2C !important;
    border-color:#9A2C2C !important;
    color:#fff !important;
}
#primary-nav .menu li a.nav-selected:hover {
    background:#9A2C2C !important;
    border-color:#9A2C2C !important;
    color:#fff !important;
}


/* ===== v13 mobile video action layout ===== */
#video-actions {
    display:flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:5px !important;
    width:100% !important;
}
#video-actions .video-action-main {
    display:flex !important;
    align-items:center !important;
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
}
#video-actions .video-stats {
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    align-items:stretch !important;
    flex:1 1 auto !important;
    width:auto !important;
    margin:0 !important;
    gap:5px !important;
    order:0 !important;
}
#video-actions .video-stats .rating {
    display:none !important;
}
#video-actions .likes,
#video-actions .dislikes,
#video-actions .views {
    min-width:0 !important;
    width:100% !important;
    min-height:36px !important;
    margin:0 !important;
    padding:0 5px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    box-sizing:border-box !important;
}
span.rating,
span.rating:after {
    display:none !important;
    content:none !important;
}
@media (max-width:420px) {
    #video-actions { gap:4px !important; }
    #video-actions .video-stats { gap:4px !important; }
    #video-actions .video-stats .likes,
    #video-actions .video-stats .dislikes,
    #video-actions .video-stats .views { padding:0 3px !important; }
}


/* ===== v16 final: footer panel + two-line movie title ellipsis ===== */
.footer-wrap {
    box-sizing: border-box !important;
    margin: 12px 5px 5px !important;
    padding: 18px 20px !important;
    background: #131619 !important;
    border: 1px solid #252a2f !important;
    border-top: 1px solid #252a2f !important;
    border-radius: 14px !important;
    color: #aeb4b9 !important;
    line-height: 1.5 !important;
    overflow: hidden !important;
}
.footer-wrap .footer-content p { margin: 0 !important; }
.footer-wrap .footer-content br { line-height: 1.5 !important; }
.footer-wrap .footer-content {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    color: #aeb4b9 !important;
}
.footer-wrap .footer-copyright {
    margin: 18px 0 0 !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid #252a2f !important;
    text-align: center !important;
    color: #aeb4b9 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* Long movie names: maximum 2 lines, then ... */
.video-name {
    display: -webkit-box !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    float: none !important;
}
.video-name > a {
    display: -webkit-box !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}
@media (max-width: 767px) {
    .footer-wrap {
        margin: 10px 5px 5px !important;
        padding: 15px 12px !important;
        border-radius: 12px !important;
    }
    .footer-wrap .footer-copyright {
        margin-top: 14px !important;
        padding-top: 13px !important;
        font-size: 12px !important;
    }
    .video-name {
        height: 39px !important;
        max-height: 39px !important;
        line-height: 19.5px !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }
    .video-name > a {
        height: 39px !important;
        max-height: 39px !important;
        line-height: 19.5px !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }
}


/* HOLICLIP V15 - footer visual correction
   Footer Telegram/copyright block intentionally matches the Upload Video block:
   dark charcoal surface, subtle border, rounded corners.
*/
.footer-telegram,
.telegram-footer,
.footer-bottom,
.footer-copyright,
.footer-info,
.footer-contact {
    border-radius: 12px !important;
}

/* Broad fallback for the footer information panel only.
   The Upload Video block is NOT targeted here. */
.footer-telegram,
.telegram-footer,
.footer-bottom,
.footer-copyright,
.footer-info,
.footer-contact {
    background: #131619 !important;
    border: 1px solid #252a2f !important;
}

/* Keep text hierarchy clean on dark surface. */
.footer-telegram a,
.telegram-footer a,
.footer-bottom a,
.footer-copyright a,
.footer-info a,
.footer-contact a {
    color: #e6e7e9 !important;
}

/* V15 explicit Telegram/copyright panel */
.v15-footer-panel {
    background: #131619 !important;
    border: 1px solid #252a2f !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* V15 title: maximum two lines, then ellipsis */
.video-title,
.movie-title,
.detail-title,
h1.video-title,
h1.movie-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    word-break: break-word !important;
}


/* HOLICLIP V16 - exact footer Telegram/copyright panel */
#footer .footer-wrap.v16-footer-panel {
    box-sizing: border-box !important;
    width: calc(100% - 10px) !important;
    margin: 12px 5px 5px !important;
    padding: 18px 20px !important;
    background: #131619 !important;
    border: 1px solid #252a2f !important;
    border-top: 1px solid #252a2f !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    color: #aeb4b9 !important;
}
#footer .footer-wrap.v16-footer-panel .footer-content {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    background: transparent !important;
}
#footer .footer-wrap.v16-footer-panel .footer-copyright {
    margin: 18px 0 0 !important;
    padding: 16px 0 0 !important;
    border-top: 1px solid #252a2f !important;
    background: transparent !important;
    text-align: center !important;
    color: #aeb4b9 !important;
}
@media (max-width: 600px) {
    #footer .footer-wrap.v16-footer-panel {
        width: calc(100% - 10px) !important;
        margin: 10px 5px 5px !important;
        padding: 15px 12px !important;
        border-radius: 12px !important;
    }
    #footer .footer-wrap.v16-footer-panel .footer-copyright {
        margin-top: 14px !important;
        padding-top: 13px !important;
    }
}


/* HOLICLIP V18 - movie cards: exactly 2 title lines on mobile */
@media (max-width: 767px) {
    #video-list .video-item .video-name {
        display: block !important;
        float: none !important;
        box-sizing: border-box !important;
        width: calc(100% - 10px) !important;
        margin: 6px 5px 15px !important;
        height: 39px !important;
        min-height: 39px !important;
        max-height: 39px !important;
        line-height: 19.5px !important;
        overflow: hidden !important;
        text-align: left !important;
    }
    #video-list .video-item .video-name > a {
        display: -webkit-box !important;
        width: 100% !important;
        height: 39px !important;
        max-height: 39px !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
        line-height: 19.5px !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        line-clamp: 2 !important;
        word-break: normal !important;
        overflow-wrap: break-word !important;
    }
}



/* HOLICLIP V19 - compact Telegram/copyright footer
   Keep the footer to the size of its two text rows. No nested box around copyright. */
#footer .footer-wrap.v19-footer-panel {
    box-sizing: border-box !important;
    display: block !important;
    width: calc(100% - 10px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 12px 5px 5px !important;
    padding: 12px 16px !important;
    background: #131619 !important;
    border: 1px solid #252a2f !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    color: #aeb4b9 !important;
    line-height: 1.45 !important;
}
#footer .footer-wrap.v19-footer-panel .footer-content {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    text-align: center !important;
    color: #aeb4b9 !important;
    line-height: 1.45 !important;
}
#footer .footer-wrap.v19-footer-panel .footer-content p,
#footer .footer-wrap.v19-footer-panel .footer-content div,
#footer .footer-wrap.v19-footer-panel .footer-content span {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
#footer .footer-wrap.v19-footer-panel .footer-copyright {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    box-sizing: border-box !important;
    margin: 9px 0 0 !important;
    padding: 9px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid #252a2f !important;
    border-radius: 0 !important;
    text-align: center !important;
    color: #aeb4b9 !important;
    line-height: 1.45 !important;
}
#footer .footer-wrap.v19-footer-panel .footer-content a,
#footer .footer-wrap.v19-footer-panel .footer-copyright a {
    color: #e6e7e9 !important;
}
@media (max-width: 767px) {
    #footer .footer-wrap.v19-footer-panel {
        width: calc(100% - 10px) !important;
        margin: 10px 5px 5px !important;
        padding: 10px 12px !important;
        border-radius: 11px !important;
        font-size: 12px !important;
    }
    #footer .footer-wrap.v19-footer-panel .footer-copyright {
        margin-top: 7px !important;
        padding-top: 7px !important;
    }
}

/* ===== v20 UI refinement =====
 * Date filters use the same neutral panel style as category tiles.
 * Active filter remains red only after selection.
 */
.textFilter {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 5px !important;
    margin: 0 5px 9px !important;
    overflow: visible !important;
}
.textFilter a,
.textFilter a:visited {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    height: auto !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    background: #121518 !important;
    border: 1px solid #20252a !important;
    border-radius: 7px !important;
    color: #dfe3e6 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}
.textFilter a:hover {
    background: #171b1f !important;
    border-color: #33383d !important;
    color: #fff !important;
}
.textFilter a.active,
.textFilter .active {
    background: #9A2C2C !important;
    border-color: #9A2C2C !important;
    color: #fff !important;
}

/* Category tiles adapt to long labels without overflowing on small screens. */
.category-nav-item {
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 40px !important;
    max-height: none !important;
    padding: 8px 5px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
}
.category-nav-item .category-nav-content {
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    text-align: center !important;
    line-height: 1.2 !important;
}
.category-nav-item .category-nav-label {
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

/* Remove the old red vertical accent before the movie title and related clips. */
#page-title.video-title,
#video-list h2.breadcrumb {
    border-left: 0 !important;
    padding-left: 0 !important;
}

/* ===== v20 FINAL UI FIX ===== */
/* Date filters: same neutral tone as category blocks; only selected item is red. */
.textFilter a,
.textFilter a:visited {
    background: #121518 !important;
    border: 1px solid #20252a !important;
    color: #dfe3e6 !important;
    min-height: 40px !important;
    height: auto !important;
    box-sizing: border-box !important;
}
.textFilter a:hover {
    background: #171b1f !important;
    border-color: #33383d !important;
    color: #fff !important;
}
.textFilter a.active,
.textFilter .active {
    background: #9A2C2C !important;
    border-color: #9A2C2C !important;
    color: #fff !important;
}

/* Remove the red vertical accent from movie title and related-clips heading. */
#page-title.video-title,
.breadcrumb.video-title,
#video-list h2.breadcrumb {
    border-left: 0 !important;
    padding-left: 0 !important;
}

/* Category blocks automatically adapt to available width and long labels. */
.category-nav-grid {
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)) !important;
}
.category-nav-item {
    min-width: 0 !important;
    height: auto !important;
    min-height: 40px !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-align: center !important;
    line-height: 1.25 !important;
    box-sizing: border-box !important;
}
.category-nav-item .category-nav-content,
.category-nav-item .category-nav-label {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-align: center !important;
    line-height: 1.25 !important;
}


/* ===== v20 requested finishing touches (mobile) ===== */
.page-section-title {
    text-align: center !important;
    padding-left: 0 !important;
    border-left: 0 !important;
}
.search .searchBtn {
    background: #9A2C2C !important;
}
.search .searchBtn:hover,
.search .searchBtn:focus {
    background: #9A2C2C !important;
}
#primary-nav .menu li a.nav-selected {
    background: #9A2C2C !important;
    border-color: #9A2C2C !important;
}
.textFilter a.active,
.textFilter .active {
    background: #9A2C2C !important;
    border-color: #9A2C2C !important;
}


/* V20 - softer search red only */
.search-box button,
#search-box button,
.search-form button,
.search-btn,
input[type="submit"].search-btn {
  background: #9A2C2C !important;
  border-color: #9A2C2C !important;
}



/* ===== V22 CATEGORY ACTIVE + SECTION HEADING ALIGNMENT =====
 * Category buttons use the same red active treatment as the top navigation.
 * The active state is applied only to the selected/current category.
 */
#category-nav .category-nav-item.category-selected,
#category-nav .category-nav-item.category-selected:hover,
#category-nav .category-nav-item.category-selected:focus,
#category-nav .category-nav-item.category-selected:active {
    background: #9A2C2C !important;
    background-color: #9A2C2C !important;
    border-color: #9A2C2C !important;
    color: #fff !important;
}
#category-nav .category-nav-item.category-selected .category-nav-content,
#category-nav .category-nav-item.category-selected .category-nav-label {
    color: #fff !important;
}

/* Keep section titles visually balanced like CLIP HAY / XEM NHIỀU NHẤT. */
#container > #page-title,
#video-list > h2.breadcrumb,
#container .page-section-title {
    text-align: center !important;
    padding-left: 0 !important;
    border-left: 0 !important;
}


/* ===== V29 MOBILE MOVIE GRID GAP FIX =====
 * The mobile layout previously used floated .video-item cards.
 * Different card heights could cause later cards to wrap around a taller
 * card and leave empty holes. Use CSS Grid so cards always occupy the
 * next available cell.
 * This keeps the existing 2-column / 3-column mobile breakpoints.
 */
@media only screen and (max-width: 479.98px) {
    #video-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        align-items: start !important;
        width: 100% !important;
    }

    #video-list > .video-item {
        width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    #video-list > h2.breadcrumb {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media only screen and (min-width: 480px) and (max-width: 767.98px) {
    #video-list {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        grid-auto-flow: row !important;
        align-items: start !important;
        width: 100% !important;
    }

    #video-list > .video-item {
        width: 100% !important;
        min-width: 0 !important;
        float: none !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    #video-list > h2.breadcrumb {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}