/*
 * One responsive stylesheet merged from the original desktop-default.css + mobile-default.css
 * (+ desktop-adx.css / mobile-adx.css). Desktop rules are the base; everything under
 * "@media (max-width: 767px)" reproduces the mobile stylesheet.
 */

/* ---------- reset ---------- */
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: normal; font-weight: normal; }
del, ins { text-decoration: none; }
li { list-style: none; margin: 0; padding: 0; }
caption, th { text-align: left; }
q:before, q:after { content: ''; }
abbr, acronym { border: 0; font-variant: normal; }
sup, sub { vertical-align: baseline; }
.clr, div.clear, .clear { clear: both; }
a { text-decoration: none; color: #dadada; }
a:hover { color: #fff; }
ul { list-style: none; }
.hidden { display: none !important; }
img { border: 0; display: block; margin: 0 auto; }
span.url { color: #ea4335; opacity: .8; }
span.url:hover { color: #cf2415; }
.left { float: left; }
.right { float: right; }

/* ---------- layout ---------- */
body { background: #1b1b1b; color: #dadada; font-family: arial, sans-serif; font-size: 14px; }
header { height: 80px; }
footer { display: grid; clear: both; }
#wrapper { margin: 0 auto; position: relative; max-width: 1140px; border: 1px solid #2b2b2b; }
#header { padding-bottom: 10px; }
#container { display: block; }
#logo { float: left; margin: 25px 0 0 5px; opacity: .8; }
#logo:hover { opacity: 1; }
#notice { background: #2b2b2b; margin: 5px; padding: 5px; line-height: 1.5em; }

/* ---------- menus ---------- */
#primary-nav { border-top: 2px solid #2b2b2b !important; margin: 0 5px; background: #1b1b1b; font-size: 14px; font-weight: 500; padding: inherit; }
#primary-nav .menu { list-style: none; overflow: hidden; z-index: 999; }
#primary-nav .menu li a { float: left; display: inline-flex; text-align: center; padding: 5px 10px; line-height: 20px; margin-right: 5px; margin-top: 5px; background: #2b2b2b; color: #dadada; border-radius: 4px; z-index: 999; }
#primary-nav .menu li:hover a, .menu li:hover a:active { text-decoration: none; color: #ea4335; }

#secondary-nav { position: relative; font-size: 14px; font-weight: 500; margin: 0 5px; overflow: hidden; }
#secondary-nav .menu2 { list-style: none; overflow: hidden; z-index: 999; }
#secondary-nav .menu2 a { float: left; display: inline-block; padding: 5px; line-height: 26px; margin-right: 5px; margin-top: 5px; background: #ff9900; color: #fff; opacity: .9; text-align: center; }
#secondary-nav .menu2 a:hover { opacity: 1; }

/* ---------- icons ---------- */
span.icon { display: inline-flex; }
.icon-home:before, .icon-verify:before, .icon-subtitles:before, .icon-thumbs-up:before, .icon-views:before,
.icon-hashtag:before, .icon-eye-off:before, .icon-student:before, .icon-heartbreak:before, .icon-xvideos:before,
.icon-phim69:before, .icon-youtube:before, .icon-xnxx:before, .icon-japan:before, .icon-usa:before,
.icon-vietnam:before, .icon-international:before, .icon-heart:before, .icon-ranking:before, .icon-fire:before {
    content: ''; width: 16px; height: 16px; background-size: 16px; background-repeat: no-repeat; margin-right: 3px;
}
.icon-home:before { background-image: url(../img/icon-home.svg); margin-right: 2px; }
.icon-verify:before { background-image: url(../img/icon-verify.svg); margin-right: 2px; margin-top: 2px; }
.icon-subtitles:before { background-image: url(../img/icon-subtitles.svg); }
.icon-thumbs-up:before { background-image: url(../img/icon-thumbs-up.svg); }
.icon-views:before { background-image: url(../img/icon-views.svg); }
.icon-hashtag:before { background-image: url(../img/icon-hashtag.svg); }
.icon-eye-off:before { background-image: url(../img/icon-eye-off.svg); margin-right: 2px; margin-top: 1px; display: inline-flex; }
.icon-student:before { background-image: url(../img/icon-student.svg); margin-right: 2px; display: inline-flex; }
.icon-heartbreak:before { background-image: url(../img/icon-heartbreak.svg); margin-right: 2px; display: inline-flex; }
.icon-xvideos:before { background-image: url(../img/icon-xvideos.svg); }
.icon-phim69:before { background-image: url(../img/icon-phim69.svg); }
.icon-youtube:before { background-image: url(../img/icon-youtube.svg); }
.icon-xnxx:before { background-image: url(../img/icon-xnxx.svg); }
.icon-japan:before { background-image: url(../img/icon-japan.svg); }
.icon-usa:before { background-image: url(../img/icon-usa.svg); }
.icon-vietnam:before { background-image: url(../img/icon-vietnam.svg); }
.icon-international:before { background-image: url(../img/icon-international.svg); }
.icon-heart:before { background-image: url(../img/icon-heart.svg); }
.icon-ranking:before { background-image: url(../img/icon-ranking.svg); }
.icon-fire:before { background-image: url(../img/icon-fire.svg); margin-right: 1px; }

/* ---------- titles ---------- */
#breadcrumbs { text-transform: none; }
.page-title { display: block; margin: 20px 5px 5px 5px; text-transform: uppercase; }
.breadcrumb { font-size: 16px; font-weight: 500; margin: 5px; border-bottom: 2px solid #2b2b2b; }
.breadcrumb span a { color: #dadada; }
.breadcrumb span a:hover { color: #fff; text-decoration: none; }
.category-info { background: #2b2b2b; font-size: 14px; padding: 5px; margin: 0 5px 15px; line-height: 1.5; border-radius: 4px; }

/* Home H1 (setting home_h1): gradient text above the "Phim mới" H2. */
.hero-title {
    display: block; width: fit-content; max-width: calc(100% - 10px); margin: 20px auto 12px;
    text-align: center; color: #f7f9fd; font-size: 1.5rem; font-weight: 600; line-height: 1.32; letter-spacing: 0;
    background: linear-gradient(96deg, #fff 0, #ffe082 14%, #ff9ad5 30%, #8ec5ff 46%, #9bffcf 62%, #ffb38a 78%, #f3a6ff 90%, #fff 100%);
    background-size: 260% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    animation: heroTitleShine 5.6s linear infinite; text-shadow: 0 0 22px rgba(170, 198, 255, .22);
}
@keyframes heroTitleShine { from { background-position: 0 50%; } to { background-position: -162.5% 50%; } }
@media only screen and (max-width: 768px) {
    .hero-title { margin: 16px auto 12px; font-size: 1.28rem; }
}
@media only screen and (max-width: 640px) {
    .hero-title { margin: 13px auto 10px; font-size: 1.1rem; line-height: 1.34; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-title { animation: none; }
}

/* ---------- search ---------- */
#search-box { margin: 3px 5px; display: inline-flex; float: right; }
.search { width: 100%; max-width: 300px; float: right; 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(234, 67, 53, .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: #ea4335; }

/* ---------- video list ---------- */
#video { margin: 0 5px; }
#video-list { display: block; }
.video-item { width: 20%; margin-bottom: 20px; overflow: hidden; text-align: center; float: left; position: relative; }
.video-image { width: calc(100% - 10px); aspect-ratio: 240 / 180; height: auto; display: block; margin-left: 5px; border-radius: 4px; object-fit: cover; }
.ribbon, .video-rank { font-size: .9em; position: absolute; top: 0; border-left: 3px solid #ea4335; border-radius: 0 4px 4px 0; background: rgba(17, 17, 17, .6); padding: 2px 4px; margin-top: 2px; margin-left: 7px; color: #fff; }
.video-rank span { display: inline-flex; }
.video-name { margin-left: 5px; margin-right: 5px; font-size: 15px; height: 45px; max-height: 45px; line-height: 1.5; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; white-space: normal; -webkit-box-orient: vertical; }
.video-name p { margin-top: 3px; height: 15px; overflow: hidden; margin-bottom: 3px; }

/* ---------- watch page ---------- */
.video-player { position: relative; width: 100%; height: 0; padding-bottom: 40%; margin-bottom: 5px; }
.play-left { padding: 0 5px; }
.play-right { position: relative; width: 325px; margin-top: 5px; float: right; }
.video-content { display: block; }
.video-description { display: block; padding: 5px 0; font-size: 15px; line-height: 1.5; word-wrap: break-word; }
.video-info { display: inline-flex; }
.video-code { font-size: 14px; padding: 5px; background: #2b2b2b; color: #dadada; white-space: nowrap; border-radius: 4px; margin-right: 5px; }
.video-code:hover { color: #fff; }
.video-link { display: inline-block; background: #2b2b2b; color: #ea4335; font-size: 14px; padding: 5px; border-radius: 4px; white-space: nowrap; }
.video-link:hover { color: #cf2415; }
.video-stats { display: inline-block; }

#video-actions { margin-top: 5px; display: block; font-weight: 400; }
#video-actions ul { display: inline-block; 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: #ea4335; color: #fff; }
#video-actions .likes, #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 { background: #ea4335; color: #fff; }
#video-actions .rating { cursor: pointer; background: #2b2b2b; padding: 5px; border-radius: 4px; display: inline-flex; }
#video-note { background: #2b2b2b; padding: 5px; display: inline-block; }

span.likes:after, span.dislikes:after, span.rating:after { content: ''; width: 16px; height: 16px; background-size: 16px; background-repeat: no-repeat; margin-left: 3px; }
span.likes:after { background-image: url(../img/icon-like.svg); margin-top: -1px; }
span.likes.active:after { background-image: url(../img/icon-liked.svg); }
span.dislikes:after { background-image: url(../img/icon-dislike.svg); }
span.dislikes.active:after { background-image: url(../img/icon-disliked.svg); }
span.rating:after { background-image: url(../img/icon-heart.svg); }
span.views { cursor: pointer; background: #2b2b2b; margin-bottom: 5px; border-radius: 4px; padding: 5px; display: inline-flex; }
span.views:after { content: ''; display: block; background: url(../img/icon-views.svg) no-repeat; width: 16px; height: 16px; background-size: 16px; margin-left: 3px; }
span.likes-rank, span.views-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; opacity: .9; }
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; }

.bt_normal { background: #2b2b2b; }
.bt_active { background: #ea4335; }

/* ---------- tags ---------- */
.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; background: #2b2b2b; border-radius: 4px; }
.category-tag a:before { content: ''; background-image: url(../img/icon-hashtag.svg); background-size: 16px; height: 16px; width: 16px; margin-right: 3px; background-repeat: no-repeat; }
.category-tag a:hover { background-color: #ea4335; 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-left: 3px solid #ff9900; border-radius: 0 4px 4px 0; }
.actress-tag a:hover { background-color: #ea4335; color: #fff; }

/* ---------- footer blocks ---------- */
.search-history, .web-link { list-style-type: none; overflow: hidden; }
.search-history a { display: inline-block; font-size: 14px; padding: 5px 10px; margin-bottom: 5px; margin-left: 5px; white-space: nowrap; background: #2b2b2b; border-radius: 4px; }
.web-link a { display: inline-block; font-size: 14px; padding: 5px 10px; margin-left: 5px; white-space: nowrap; background: #2b2b2b; border-radius: 4px; }
.search-history a:hover, .web-link a:hover { background-color: #ea4335; color: #fff; }
.footer-wrap { font-size: 15px; font-weight: 500; margin: 5px; background: #1b1b1b; line-height: 1.5; border-top: 2px solid #2b2b2b; }

.textFilter { list-style-type: none; text-transform: uppercase; margin: 0 5px 5px; overflow: hidden; }
.textFilter a { display: inline-block; font-size: 14px; padding: 4px; margin-top: 5px; border-radius: 4px; white-space: nowrap; background: #2b2b2b; }
.textFilter a:hover, .loadPage .active { background-color: #ea4335; color: #fff; }

/* ---------- pagination ---------- */
.pagenavi { text-align: center; margin-bottom: 20px; cursor: pointer; }
.pagenavi a { margin-top: 5px; border: 1px solid #dadada; padding: 5px 15px; margin-right: 5px; border-radius: 4px; display: inline-block; }
.pagenavi a.active, .pagenavi a:hover { background: #ea4335; color: #fff; }

.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%; }

/* ---------- ads (desktop-adx.css) ---------- */
.banner-preload .banner-preload-container, .banner-preload-container > a, .banner-catfish-bottom, .banner-catfish-top,
.banner-preload .banner-preload-container .banner-preload-close, .catfish-bottom-close, .catfish-top-close,
#vl-top-adx, #vl-underplayer-adx { box-shadow: 0 0 5px #fff; }
.banner-preload { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; z-index: 1000; }
.banner-preload .banner-preload-container { background: rgba(0, 0, 0, .8); position: absolute; width: 100vw; margin: 0 auto; cursor: pointer; height: 100vh; }
.banner-preload-container > a { max-width: 500px; height: auto; margin: calc(50vh - 200px) auto; display: block; }
.banner-preload .banner-preload-container .banner-preload-close { position: absolute; top: calc(50vh - 200px); right: calc(50vw - 250px); padding: 0 10px; font-size: 16px; color: #dadada; background-color: #2b2b2b; border: 1px solid #dadada; opacity: .8; cursor: pointer; }
.banner-preload .banner-preload-container .banner-preload-close:hover, .catfish-bottom-close:hover, .catfish-top-close:hover { opacity: 1; }
.banner-preload .banner-preload-container img { width: 100%; height: 100%; }
.catfish-bottom, .catfish-top { position: fixed; height: auto !important; width: 100% !important; text-align: center; left: 0; background: rgba(0, 0, 0, .8); z-index: 999; }
.catfish-bottom { bottom: 0; }
.catfish-top { top: 0; }
.banner-catfish-bottom, .banner-catfish-top { display: inline-flex; max-width: 500px; margin: auto; }
.catfish-bottom-close, .catfish-top-close { display: inline-block; position: absolute; right: 0; top: 0 !important; padding: 0 10px; font-size: 16px; color: #dadada; background-color: #2b2b2b; border: 1px solid #dadada; opacity: .8; cursor: pointer; }

@media only screen and (min-width: 768px) {
    .m-only { display: none !important; }
}

@media only screen and (max-width: 768px) {
    .video-item { width: 25%; }
}

/* ======================================================================
 * Mobile (mobile-default.css + mobile-adx.css)
 * ==================================================================== */
@media only screen and (max-width: 767px) {
    h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: 700; }
    legend { color: #333; }
    input, button, textarea, select, optgroup, option { font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; outline: none; }
    img { max-width: 100%; height: auto; }
    span.url { color: rgba(234, 67, 53, .6); opacity: 1; }
    span.url:hover { color: #ea4335; }

    #wrapper { max-width: 600px; background: #1b1b1b; }
    header { height: auto; }
    #header { position: relative; padding-bottom: 0; display: flex; flex-direction: column; }
    #header .ads-top { order: 1; }
    #container { overflow: hidden; }
    #logo { float: none; text-align: center; border-bottom: 2px solid #2b2b2b; padding: 10px 5px 5px; margin: 0 5px 5px; }

    .icon-home:before { display: inline-flex; }
    .icon-verify:before { margin-right: 3px; margin-top: 0; }
    .icon-thumbs-up:before { margin-top: -1px; }
    .icon-eye-off:before { margin-top: 0; }

    #primary-nav { border-top: 0 !important; position: relative; font-weight: 400; border-bottom: 2px solid #2b2b2b; overflow: hidden; padding: 0; background: none; }
    #primary-nav .menu { height: 40px; border: 0; background: 0; box-shadow: none; overflow: visible; }
    #primary-nav .menu li a { margin: 0 5px 5px 0; line-height: normal; }
    #primary-nav .menu li:hover a, .menu li:hover a:active { color: #fff; }

    #secondary-nav { font-size: inherit; font-weight: inherit; margin: 0; }
    #secondary-nav .menu2 { font-size: 14px; }
    #secondary-nav .menu2 a { display: inline-flex; font-weight: 400; background: #2b2b2b; margin: 5px 0 0 5px; padding: 5px; border-radius: 4px; line-height: normal; color: #dadada; opacity: 1; }
    #secondary-nav .menu2 a:hover { color: #fff; }

    #search-box { padding: 5px; margin: 0; display: block; float: none; }
    .search { max-width: none; float: none; }
    .search .searchBtn:hover { background: rgba(234, 67, 53, 1); }

    .breadcrumb { font-weight: 400; }
    .breadcrumb.video-title { padding: 5px; text-transform: none; border-left: 3px solid #ea4335; }

    .video-item { display: block; margin-bottom: 0; text-align: left; float: left; }
    .video-image { float: left; }
    .video-name { font-weight: 400; height: 45px !important; max-height: 45px !important; margin-bottom: 15px; margin-right: 0; float: left; }

    .video-player { padding-bottom: 56.25%; margin-bottom: 0; }
    .video-description { font-size: 14px; padding: 0; }
    .video-info { margin-bottom: 5px; }
    #video-actions .likes:hover, #video-actions .dislikes:hover { background: #2b2b2b; color: #fff; }
    #video-note { border-radius: 4px; }
    span.likes:after { margin-top: 0; }
    span.likes-rank:after { opacity: 1; }
    .bt_normal { color: #dadada; }
    .bt_active { color: #fff; }

    .category-tag a:before { height: auto; }
    .search-history { margin: 5px 0; }
    .textFilter a { padding: 5px; }

    .pagenavi { clear: both; margin-bottom: 5px; cursor: auto; }
    .pagenavi a { margin-top: 0; margin-bottom: 5px; }
    .pagenavi a:hover { background: none; color: #fff; }
    .pagenavi a.active, .pagenavi a.active:hover { color: #dadada; background: rgba(234, 67, 53, .8); }

    .footer-wrap { font-size: 14px; font-weight: 400; line-height: 1.5em; }
    #adx { display: none !important; }

    /* mobile-adx.css */
    .banner-preload-container > a, .banner-preload .banner-preload-container .banner-preload-close { box-shadow: none; }
    .banner-preload .banner-preload-container img { box-shadow: 0 0 5px #fff; }
    .banner-preload { z-index: 10000; }
    .banner-preload .banner-preload-container { background: rgba(0, 0, 0, .5); height: auto; }
    .banner-preload-container > a { width: 300px; height: 250px; max-width: none; margin: calc(50vh - 125px) auto; }
    .banner-preload .banner-preload-container .banner-preload-close { top: calc(50vh - 125px); right: calc(50vw - 150px); }
    .catfish-bottom, .catfish-top { width: 100%; text-align: left; left: auto; background: rgba(0, 0, 0, .5); z-index: 9999; }
    .catfish-bottom { line-height: 0; }
    .banner-catfish-bottom, .banner-catfish-top { display: block; max-width: 300px; margin: 0 auto; }
    .catfish-bottom-close { padding: 10px; }
    .catfish-top-close { top: auto !important; bottom: 0; }
}

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

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