/*
Theme Name: XX
Author: XMan
Author URI: https://google.com
Description: A brief description of your theme
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: xx
*/

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

/* =================================
   SEO 2025 ENHANCEMENTS
   ================================= */

/* Screen reader only content */
.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    height: 1px;
    width: 1px;
    word-wrap: normal !important;
}

/* Breadcrumbs */
.breadcrumbs {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    font-size: 14px;
}

.breadcrumbs li {
    display: inline;
    margin-right: 5px;
}

.breadcrumbs li:after {
    content: " › ";
    color: #666;
    margin-left: 5px;
}

.breadcrumbs li:last-child:after {
    content: "";
}

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

.breadcrumbs a:hover {
    color: #ea4335;
    text-decoration: underline;
}

/* Enhanced video item structure - Original Layout */
.video-item {
    width: 20%;
    margin-bottom: 20px;
    overflow: hidden;
    text-align: center;
    position: relative;
    background: transparent;
    box-sizing: border-box;
    flex-shrink: 0;
    float: none;
    display: block;
}

.video-header {
    margin-top: 8px;
}

.video-name {
    margin: 5px 0 0 0;
    font-size: 12px;
    line-height: 1.3;
    padding: 0 3px;
    height: auto;
    overflow: hidden;
}

.video-name a {
    color: #dadada;
    text-decoration: none;
    display: block;
    word-wrap: break-word;
}

.video-name a:hover {
    color: #ea4335;
}

/* Original video image styling - keep original layout */
.video-image {
    width: calc(100% - 10px);
    height: 180px;
    object-fit: cover;
    object-position: center;
    display: block;
    margin-left: 5px;
    border-radius: 4px;
}

/* Ribbon for video categories */
.ribbon {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(234, 67, 53, 0.8);
    color: #fff;
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 2px;
    z-index: 2;
}

/* Page header improvements */
.page-header {
    /* margin-bottom: 20px; */
    padding: 10px 5px;
    border-bottom: 2px solid #2b2b2b;
}

.page-title {
    margin: 0 0 10px 0;
    font-size: 24px;
    color: #dadada;
}

.category-description,
.tag-description,
.actress-description {
    color: #aaa;
    font-size: 14px;
    margin-top: 10px;
    line-height: 1.6;
}

.actress-stats {
    margin-top: 10px;
    font-size: 14px;
}

.video-count {
    background: #2b2b2b;
    padding: 4px 8px;
    border-radius: 3px;
    color: #dadada;
}

/* Pagination improvements */
.pagination-nav {
    margin: 20px 0;
    text-align: center;
}

.pagination-nav a,
.pagination-nav span {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 2px;
    background: #2b2b2b;
    color: #dadada;
    text-decoration: none;
    border-radius: 3px;
}

.pagination-nav a:hover {
    background: #ea4335;
    color: #fff;
}

.pagination-nav .current {
    background: #ea4335;
    color: #fff;
}
/* Entry content improvements */
.entry-header {
    margin: 10px;
    padding: 0;
    margin-bottom: -30px;
}

.entry-title {
    margin: 0;
    padding: 0 0 5px 0;
    font-weight: normal;
    font-size: 16px;
    line-height: 1.4;
    color: #fff;
    display: block;
    position: relative;
    z-index: 1;
    text-align: left;
}

#video-player {
    margin-top: 0;
    margin-bottom: 10px;
}

.entry-content {
    margin: 20px 0;
    line-height: 1.6;
}

.entry-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #2b2b2b;
}

.actress-tag,
.category-tag {
    margin: 8px 0;
}

.actress-tag strong,
.category-tag strong {
    color: #ea4335;
    margin-right: 5px;
}

.actress-tag a,
.category-tag a {
    display: inline-block;
    margin: 2px 5px 2px 0;
    padding: 3px 8px;
    background: #2b2b2b;
    color: #dadada;
    text-decoration: none;
    border-radius: 3px;
    font-size: 12px;
}

.actress-tag a:hover,
.category-tag a:hover {
    background: #ea4335;
    color: #fff;
}

/* Section titles */
.section-title {
    padding-bottom: 6px;
    font-size: 17px;
}

/* Video interactions */
.video-interactions {
    margin: 15px 0;
    text-align: center;
}

/* Accessibility improvements */
[role="main"] {
    outline: none;
}

[aria-label] {
    outline: none;
}

/* Focus styles for accessibility */
a:focus,
button:focus,
input:focus {
    outline: none;
}

/* Remove focus outline for video items specifically */
.video-item a:focus,
.video-name a:focus {
    outline: none;
    box-shadow: none;
}

/* Skip to main content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #ea4335;
    color: #fff;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 1000;
}

.skip-link:focus {
    top: 6px;
}

/* =================================
   END SEO 2025 ENHANCEMENTS
   ================================= */

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

a:hover {
    color: #ffffff;
}

ul {
    list-style: none;
}

.hidden {
    display: none !important;
}

span.url {
    color: #ea4335;
    opacity: 0.8;
}

span.url:hover {
    color: #cf2415;
}


.left {
    float: left;
}

.right {
    float: right;
}

header {
    height: 57px;
}

body {
    background: #1b1b1b;
    color: #dadada;
    font-family: arial, sans-serif;
    font-size: 14px;
    min-height: 100vh;
    overflow-x: hidden;
}

footer {
    display: grid;
    clear: both;
}

#text-logo {
    display: inline;
    float: left;
    margin: 40px 0 0 0;
}

#site-title {
    color: #333;
    font-size: 34px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 1;
}

#site-desc {
    color: #999;
    float: left;
}

#logo {
    float: left;
    margin: 25px 0 0 5px;
    opacity: 0.8;
}

#logo:hover {
    opacity: 1;
}

body>menu {
    margin: 0 auto 25px;
    padding: 0;
    width: 960px;
    z-index: 999;
}

#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;
    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;
}

span.icon {
    display: inline-flex;
}

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

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

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

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

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


#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: #ffffff;
    opacity: 0.9;
    text-align: center;
}

#secondary-nav .menu2 a:hover {
    opacity: 1;
}


#breadcrumbs {
    text-transform: none;
}

#page-title {
    display: block;
    margin: 20px 5px 5px 5px;
}

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

.breadcrumb span a {
    color: #dadada;
}

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

#search-box {
    margin: 5px;
    display: inline-flex;
    float: right;
    position: relative;
    z-index: 999;
}


.search {
    width: 100%;
    max-width: 300px;
    float: right;
    border: 1px solid #2b2b2b;
    display: flex;
    overflow: hidden;
    position: relative;
    z-index: 999;
}
span.icon-search {
    display: inline-flex;
    background: #1b1b1b;
    padding: 0.3rem;
    margin-top: 1px;
    color: #dadada;
    opacity: .6;
    pointer-events: none;
}
span.icon-search:before{
    content: '';
    background-image: url(../xx/assets/images/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;
    appearance: none;
    position: relative;
    z-index: 1000;
    pointer-events: auto;
}

.search .searchTxt:focus {
    outline: none;
    background: #2b2b2b;
}

.search .searchBtn {
    width: 40px;
    cursor: pointer;
    background: #222;
    color: #dadada;
    border: 0;
    outline: 0;
    position: relative;
    z-index: 1000;
    pointer-events: auto;
}

/* =================================
   THUMBNAIL OPTIMIZATION SYSTEM
   ================================= */

/* Base thumbnail styling */
.post-thumbnail, 
.video-thumbnail, 
.thumbnail,
.wp-post-image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 4px;
    transition: transform 0.3s ease;
}

/* Grid layout thumbnails - 4:3 ratio for consistency */
.video-grid .post-thumbnail,
.video-list .post-thumbnail,
.video-grid-item .post-thumbnail {
    aspect-ratio: 4/3;
    width: 100%;
    height: auto;
}

/* Featured thumbnails - 16:9 ratio */
.featured-video .post-thumbnail,
.hero-video .post-thumbnail {
    aspect-ratio: 16/9;
    width: 100%;
    height: auto;
}

/* Square thumbnails for sidebar/widgets */
.widget .post-thumbnail,
.sidebar .post-thumbnail,
.related-video .post-thumbnail {
    aspect-ratio: 1/1;
    width: 100%;
    height: auto;
}

/* Responsive thumbnail containers */
.thumbnail-container {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: #1a1a1a;
    border: 1px solid #2b2b2b;
}

.thumbnail-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.thumbnail-container:hover img {
    transform: scale(1.05);
}

/* Grid system for consistent layout - DISABLED for original layout */
/*
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.video-grid-item {
    position: relative;
    background: #1a1a1a;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #2b2b2b;
}

.video-grid-item .thumbnail-container {
    aspect-ratio: 4/3;
    margin-bottom: 10px;
}
*/

/* Video overlay effects */
.video-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.thumbnail-container:hover .video-overlay {
    opacity: 1;
}

/* Responsive breakpoints */
@media (max-width: 768px) {
    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
    }
    
    .thumbnail-container {
        border-radius: 2px;
    }
}

/* Fix for existing theme thumbnail issues */
img[src*="thumbnail"] {
    object-fit: cover !important;
    border-radius: 4px;
}

/* Lazy loading optimization - Advanced System */
img[loading="lazy"],
img[data-src] {
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    background-color: #1a1a1a;
}

img[loading="lazy"].loaded,
img[data-src].loaded {
    opacity: 1;
}

/* Loading states */
img.lazy-loading {
    opacity: 0.3;
    background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 50%, #1a1a1a 75%);
    background-size: 200% 100%;
    animation: lazy-loading 1.5s infinite;
}

img.load-error {
    opacity: 0.5;
    background: #2a2a2a;
    position: relative;
}

img.load-error:after {
    content: '⚠️';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
}

/* Loading animation */
@keyframes lazy-loading {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Intersection Observer fallback */
.no-intersection-observer img[data-src] {
    opacity: 1;
}

.search .searchBtn {
    width: auto;
    min-width: 80px;
    cursor: pointer;
    background: rgba(234,67,53,.6);
    color: #dadada;
    border: 0;
    outline: 0;
    border-left: 1px solid #2b2b2b !important;
    border-radius: 0;
    float: left;
    font-size: 14px;
    padding: 8px 12px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    white-space: nowrap;
}
.search .searchBtn:hover {
    background: #ea4335;
}

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

#wrapper {
    margin: 0 auto;
    position: relative;
    max-width: 1140px;
    border: 1px solid #2b2b2b;
    min-height: auto;
    overflow: visible;
}

#container {
    display: block;
    min-height: auto;
    overflow: visible;
}

#video {
    margin: 0 5px;
}

#video-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0;
    margin: 0;
    padding: 0;
    min-height: auto;
    background: transparent;
    width: 100% !important;
    box-sizing: border-box !important;
}


/* Related posts container on single page */
#related-posts {
    margin: 20px 5px 0 5px;
}

#related-posts .breadcrumb {
    margin-bottom: 10px;
}

/* Ensure related posts video items display correctly */
#related-posts #video-list .video-item {
    width: 20% !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    text-align: center !important;
    position: relative !important;
    background: transparent !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    float: none !important;
    display: block !important;
}

.video-item {
    width: 20%;
    margin-bottom: 20px;
    overflow: hidden;
    text-align: center;
    position: relative;
    background: transparent;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Ensure consistent thumbnail container size */
.video-item {
    display: flex;
    flex-direction: column;
}

.video-item a {
    display: block;
    position: relative;
    aspect-ratio: 4/3; /* Force 4:3 ratio */
    overflow: hidden;
    border-radius: 4px;
}

.video-image {
    width: calc(100% - 10px);
    height: 180px; /* Fixed height để đều nhau */
    object-fit: cover; /* Crop ảnh để fit khung */
    object-position: center; /* Center crop */
    display: block;
    margin-left: 5px;
    border-radius: 4px;
    background-color: transparent;
    opacity: 1;
}

.ribbon {
    font-size: .9em;
    position: absolute;
    top: 0;
    border-left: 3px solid #ea4335;
    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 {
    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;
}

.video-rank {
    font-size: .9em;
    position: absolute;
    top: 0;
    border-left: 3px solid #ea4335;
    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-rank span {
    display: inline-flex;
}


.desktop {
    margin-bottom: 5px;
}

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

.play-left {
    padding: 0 5px;
}

.play-right {
    position: relative;
    width: 325px;
    margin-top: 5px;
    float: right;
}

.video-right {
    display: block;
}

.video-right li {
    display: inline-flex;
    overflow: hidden;
    padding-bottom: 5px;
}

.video-right li a {
    color: #dadada;
    font-weight: 700;
}

.video-right li a:hover {
    color: #fff;
    font-weight: 700;
}

.video-right li img {
    float: left;
    margin-right: 5px;
    margin-bottom: 10px;
    width: 120px;
    height: 90px;
}

.video-right li status {
    position: absolute;
    background-color: #ea4335;
    padding: 2px 5px;
    color: #fff;
    opacity: .8;
}

.video-content {
    display: block;
}

.video-description {
    display: block;
    padding: 5px 4px;
    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-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: #ea4335;
    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 {
    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 {
    content: '';
    background-image: url(../xx/assets/images/icon-like.svg);
    width: 16px;
    height: 16px;
    background-size: 16px;
    background-repeat: no-repeat;
    margin-left: 5px;
    margin-top: -1px;
}

span.likes.active:after {
    background-image: url(../xx/assets/images/icon-liked.svg);
}

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

span.dislikes.active:after {

    background-image: url(../xx/assets/images/icon-disliked.svg);

}

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

span.dislikes.active:after {

    background-image: url(../xx/assets/images/icon-disliked.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(../xx/assets/images/icon-views.svg) no-repeat;
    width: 16px;
    height: 16px;
    background-size: 16px;
    margin-left: 5px;
}

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

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


span.likes.active:after {
    background-image: url(../xx/assets/images/liked.svg);
}

.top-likes {
    float: right;
    margin: 5px 0;
    background: #f2f2f2;
    opacity: 0.7;
    padding: 4px 4px;
}

.bt_normal {
    background: #2b2b2b;
}

.bt_active {
    background: #ea4335;
}

#download {
    text-align: center;
}

.download-button {
    display: inline-block;
}

.download {
    width: 16px;
    background: #2b2b2b;
    padding: 5px 10px;
    display: inline-block;
}

.download:hover {
    background: #ea4335;
    color: #fff;
}

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

.id.dl:before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background: url(../xx/assets/images/dl.svg) no-repeat;
    position: absolute;
    background-size: 16px;
    margin-left: -19px;
}

.quality {
    background: #ea4335;
    padding: 5px 10px;
    font-size: 15px;
    cursor: pointer;
    margin-right: 10px;
}

.quality:hover {
    background: #ea4335;
}


.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(../xx/assets/images/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;
}

.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: #ea4335;
    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: 4px;
    margin-top: 5px;
    border-radius: 4px;
    white-space: nowrap;
    background: #2b2b2b;
}

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

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

.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 {
    background: #ea4335;
    color: #fff;
}

.pagenavi a:hover {
    background: #ea4335;
    color: #fff;
}

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

/* 16x9 Aspect Ratio */
.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%;
}

/* Responsive - Mobile 2 columns */
@media only screen and (max-width:768px) {
    .video-item {
        width: 50% !important;
        position: relative;
        background: transparent;
        flex-shrink: 0;
    }
    
    /* Search box responsive */
    #search-box {
        float: none !important;
        width: 100% !important;
        margin: 5px 5px 10px 5px !important;
        order: -1;
    }
    
    .search {
        max-width: 100% !important;
        width: 100% !important;
        float: none !important;
    }
    
    #page-title {
        margin-top: 10px !important;
        clear: both;
    }
    
    /* Ensure header elements stack properly */
    header {
        width: 100%;
        margin-bottom: 10px;
    }
}

@media only screen and (max-width:600px) {
    .video-item {
        width: 50%;
        position: relative;
        flex-shrink: 0;
    }
    
    /* Search box mobile */
    #search-box {
        float: none !important;
        width: 100% !important;
        margin: 5px 5px 15px 5px !important;
        display: block !important;
    }
    
    .search {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .search .searchBtn {
        min-width: 70px;
        font-size: 12px;
        padding: 6px 8px;
    }
}

@media only screen and (max-width:480px) {
    .video-item,
    #video-list .video-item,
    .listFilter .video-item {
        width: 50% !important;
        position: relative;
        flex-shrink: 0 !important;
        float: none !important;
        display: block !important;
    }
    
    /* Search box small mobile */
    #search-box {
        float: none !important;
        width: 100% !important;
        margin: 5px 5px 15px 5px !important;
        display: block !important;
    }
    
    .search .searchBtn {
        min-width: 60px;
        font-size: 11px;
        padding: 5px 6px;
    }
}

@media only screen and (max-width:400px) {
    .video-item {
        width: 50%;
        position: relative;
        flex-shrink: 0;
    }
    
    /* Search box very small mobile */
    #search-box {
        float: none !important;
        width: 100% !important;
        margin: 5px 5px 15px 5px !important;
        display: block !important;
    }
    
    .search .searchBtn {
        min-width: 50px;
        font-size: 10px;
        padding: 4px 5px;
    }
}

/* Custom Jwplayer */
#vlxx.jw-error {
    height: 56.25% !important;
}

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

.jw-icon.jw-icon-inline.jw-button-color.jw-reset.jw-icon-rewind {
    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-icon.jw-icon-inline.jw-button-color.jw-reset.jw-icon-rewind {
    display: none !important;
}

.jw-rightclick {
    display: none !important;
}

.jw-aspect.jw-reset {
    padding-top: 40% !important;
}

.jw-logo.jw-logo-top-right.jw-reset {
    width: 200px !important;
    height: 57px !important;
    margin: 5px !important;
}

.current-menu-item a {
    background: rgba(234, 67, 53, 0.6) !important;
}

.pagenavi a {
    font-size: 13px;
}

.menu-item i {
    margin-top: 2px !important;
    font-size: 0.9em !important;
}

.current-menu-item:hover a {
    color: #dadada !important
}

.no-post {
    font-style: italic;
    padding: 20px 10px;
}

.video-player iframe {
    height: 100%;
    position: absolute;
}



.xx-ads {
    width: 98%;
    text-align: center;
    margin: 4px auto
}

.xx-ads img,.xx-ads iframe {
    max-width: 100%
}

.ads-wrap {
    margin: -5px auto;
    text-align: center;
    line-height: 0;
    max-width: 100%
}

.xx-ads.catfix {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 300px;
    z-index: 9
}

.xx-ads.ads-pc.catfix {
    width: 728px
}

.xx-ads.ads-fr.catfix {
    right: 0;
    left: inherit
}

.xx-ads.ads-fl.catfix {
    left: 0;
    right: inherit
}

.xx-ads-close {
    position: absolute;
    top: -25px;
    right: 0;
    height: 20px;
    line-height: 20px;
    background: #000;
    color: #fff;
    padding: 0 4px;
    z-index: 999999
}

.ads-fl .xx-ads-close,.ads-fr .xx-ads-close {
    top: -25px
}

.ads-fl .xx-ads-close {
    right: inherit;
    left: 0
}

.xx-ads-close a {
    color: #dacb46;
    font-size: 13px
}

.ads-mobile {
    display: none!important
}

@media screen and (max-width: 1000px) {
    li.item-movie .label {
        position:absolute;
        top: 6px!important;
        left: 5px!important
    }

    .ads-fl,.ads-fr {
        display: none
    }

    .ads-pc {
        display: none!important
    }

    .ads-mobile {
        display: block!important
    }
}
.fluid-width-video-wrapper {
    width: 100%;
    position: relative;
    padding: 0;
    background: #000;
    height: auto
}

.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed,.fluid-width-video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.fluid-width-video-wrapper {
    padding-top: 56.25%
}

.fluid-width-video-wrapper[data-ratio="16:10"] {
    padding-top: 62.5%
}

.fluid-width-video-wrapper[data-ratio="4:3"] {
    padding-top: 75%
}

.fluid-width-video-wrapper[data-ratio="3:2"] {
    padding-top: 66.66666666666666%
}

.fluid-width-video-wrapper[data-ratio="1:1"] {
    padding-top: 100%
}

.fluid-width-video-wrapper[data-ratio="2.4:1"] {
    padding-top: 41.66666666666667%
}

.fluid-width-video-wrapper>div {
    display: block!important;
    width: 100%!important;
    max-width: 100%!important;
    max-height: none!important;
    min-height: 0!important;
    height: 100%!important;
    position: absolute!important;
    top: 0!important;
    left: 0!important
}

.fluid-width-video-wrapper .jwplayer,.fluid-width-video-wrapper>[id^=jwplayer] {
    display: block!important;
    width: 100%!important;
    max-width: 100%!important;
    max-height: none!important;
    min-height: 0!important;
    height: 100%!important;
    position: absolute!important;
    top: 0!important;
    left: 0!important
}

.fluid-width-video-wrapper [id^=jwplayer] video,.fluid-width-video-wrapper [id^=jwplayer] embed,.fluid-width-video-wrapper [id^=jwplayer] object {
    position: absolute!important;
    left: 0;
    top: 0;
    width: 100%!important;
    height: 100%!important
}

.fluid-width-video-wrapper .jwcontrols {
    z-index: 1
}

.fluid-width-video-wrapper .jwaspect,.fluid-width-video-wrapper [id^=jwplayer][id$=aspect] {
    display: none!important;
    margin: 0!important
}

.fluid-width-video-wrapper [id^=jwplayer]>p {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    top: 50%;
    margin: -20px 0 0;
    line-height: 100%
}

.fluid-width-video-wrapper [id^=botr][id$=ply_wrapper] {
    display: block!important;
    width: 100%!important;
    max-width: 100%!important;
    max-height: none!important;
    min-height: 0!important;
    height: 100%!important;
    position: absolute!important;
    top: 0!important;
    left: 0!important
}

.fluid-width-video-wrapper .flowplayer {
    width: 100%!important;
    max-width: none!important;
    max-height: none!important;
    height: 100%!important;
    position: absolute!important;
    top: 0!important;
    left: 0!important
}

.fluid-width-video-wrapper .fp-ratio {
    padding-top: 0!important
}

.fluid-width-video-wrapper .wp-video-shortcode-wrapper {
    width: 100%!important;
    max-width: none!important;
    max-height: none!important;
    height: 100%!important;
    position: absolute!important;
    top: 0!important;
    left: 0!important
}

.fluid-width-video-wrapper .mejs-container,.fluid-width-video-wrapper .mejs-layer,.fluid-width-video-wrapper .me-plugin {
    position: absolute!important;
    top: 0!important;
    left: 0!important;
    width: 100%!important;
    height: 100%!important;
    margin-bottom: 0!important
}

.fluid-width-video-wrapper .meplayer video,.fluid-width-video-wrapper .meplayer embed,.fluid-width-video-wrapper .meplayer object {
    width: 100%!important;
    height: 100%!important;
    position: absolute;
    top: 0;
    left: 0
}

.fluid-width-video-wrapper .jp-container {
    width: 100%!important;
    position: absolute!important;
    top: 0!important;
    left: 0!important;
    height: 100%!important
}

.fluid-width-video-wrapper .jp-ratio {
    padding-top: 0!important
}

.fluid-width-video-wrapper .kgvid_wrapper {
    margin: 0!important
}

.fluid-width-video-wrapper .kgvid_wrapper .kgvid_videodiv,.fluid-width-video-wrapper .kgvid_wrapper .video-js {
    position: static!important;
    width: 100%!important;
    height: auto!important
}

.fluid-width-video-wrapper embed {
    height: 349px!important
}

.full-width-video-layout .fluid-width-video-wrapper embed {
    height: 534px!important
}

/* Fix for black space issue */
#video-list .video-item:nth-child(n) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
}

#video-list {
    min-height: 0 !important;
    height: auto !important;
}

/* Ensure no hidden elements create black space */  
#container::after,
#video-list::after,
.video-item::after {
    content: none !important;
}

/* Remove any potential black backgrounds */
#container,
#video-list,
#video-list-inner,
.video-item,
.video-image {
    background-color: transparent !important;
}

/* Force display contents for any wrapper that might break flexbox */
#video-list-inner {
    display: contents !important;
}

/* Ensure video items maintain proper flexbox behavior regardless of nesting */
#video-list > .video-item,
#video-list > div > .video-item,
#video-list-inner > .video-item,
.listFilter .video-item {
    width: 20% !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    text-align: center !important;
    position: relative !important;
    background: transparent !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    float: none !important;
    display: block !important;
}

/* Fix for top-videos page layout - Force flexbox */
.listFilter #video-list,
#video-list,
#video-list-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: auto !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-content: flex-start !important;
}

.listFilter .video-item,
#video-list .video-item,
#video-list > div > .video-item {
    width: 20% !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
    text-align: center !important;
    position: relative !important;
    background: transparent !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    float: none !important;
    display: block !important;
}

/* Responsive for all contexts - Mobile 2 columns */
@media only screen and (max-width:768px) {
    .listFilter .video-item,
    #video-list .video-item,
    #video-list > div > .video-item,
    #related-posts #video-list .video-item {
        width: 50% !important;
        flex-shrink: 0 !important;
        float: none !important;
    }
}

@media only screen and (max-width:480px) {
    .listFilter .video-item,
    #video-list .video-item,
    #video-list > div > .video-item,
    #related-posts #video-list .video-item {
        width: 50% !important;
        flex-shrink: 0 !important;
        float: none !important;
    }
}

@media only screen and (max-width:400px) {
    .listFilter .video-item,
    #video-list .video-item,
    #video-list > div > .video-item,
    #related-posts #video-list .video-item {
        width: 50% !important;
        flex-shrink: 0 !important;
        float: none !important;
    }
}

/* Accessibility: Screen reader text - Hidden visually but available to screen readers */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* Like/Dislike REST API Styles and Animations */
.likes.processing,
.dislikes.processing {
    opacity: 0.5;
    pointer-events: none;
}

.likes.active {
    background-color: #4CAF50 !important;
    color: white !important;
}

.dislikes.active {
    background-color: #f44336 !important;
    color: white !important;
}

.liked-animation {
    animation: likeAnimation 0.6s ease-in-out;
}

.disliked-animation {
    animation: dislikeAnimation 0.6s ease-in-out;
}

@keyframes likeAnimation {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); background-color: #4CAF50; }
    100% { transform: scale(1); }
}

@keyframes dislikeAnimation {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); background-color: #f44336; }
    100% { transform: scale(1); }
}

/* Notification System */
.xx-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 12px 20px;
    border-radius: 6px;
    color: white;
    font-weight: 500;
    z-index: 9999;
    transform: translateX(400px);
    transition: transform 0.3s ease-in-out;
    max-width: 300px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.xx-notification.show {
    transform: translateX(0);
}

.xx-notification.xx-error {
    background-color: #f44336;
}

.xx-notification.xx-success {
    background-color: #4CAF50;
}

/* Throttling visual feedback */
.likes.throttled,
.dislikes.throttled {
    opacity: 0.6;
    cursor: not-allowed;
    position: relative;
}

.likes.throttled::after,
.dislikes.throttled::after {
    content: 'Chờ...';
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
}

/* Exclusive like/dislike states */
.likes.disabled,
.dislikes.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background-color: #666 !important;
}

.likes.disabled:hover,
.dislikes.disabled:hover {
    background-color: #666 !important;
    color: #dadada !important;
}

/* Fix layout cho like/dislike buttons */
#video-actions .likes,
#video-actions .dislikes,
#video-actions .rating {
    margin-right: 1px;
}

/* Enhanced notification styles - moved from single.php */
.xx-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    padding: 15px 20px;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    z-index: 9999;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
    max-width: 300px;
}

.xx-notification.show {
    opacity: 1;
    transform: translateX(0);
}

.xx-notification.xx-success {
    background-color: #4CAF50;
}

.xx-notification.xx-error {
    background-color: #f44336;
}

.xx-notification.xx-info {
    background-color: #2196F3;
}

.xx-notification.xx-warning {
    background-color: #ff9800;
}