/*
Theme Name: SieuSex Dark FINAL
*/

/* ================== RESET ================== */
* { box-sizing: border-box; }
body {
    margin: 0;
    background: #0f0f0f;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* ================== CONTAINER ================== */
.header-wrap,
.page-wrap,
.footer-wrap {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 10px;
}

/* ================== HEADER ================== */
.site-header {
    background: #0f0f0f;
    padding-top: 6px;
}
.header-inner {
    background: #1a1a1a;
    border-radius: 6px 6px 0 0;
    padding: 10px;
}
.logo a,
.logo h1 a {
    color: #e50914;
    font-size: 26px;
    font-weight: bold;
}

/* MENU */
.menu-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
    padding: 0;
}
.menu-list li { list-style: none; }
.menu-list a {
    background: #111;
    color: #fff;
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 4px;
    white-space: nowrap;
}
.menu-list a:hover { background: #222; }

/* SEARCH */
.header-search {
    max-width: 520px;
    margin-top: 8px;
}
.header-search form { display: flex; width: 100%; }
.header-search input {
    flex: 1;
    height: 36px;
    background: #111;
    border: 1px solid #333;
    color: #ccc;
    padding: 0 10px;
}
.header-search button {
    height: 36px;
    background: #c62828;
    border: none;
    color: #fff;
    padding: 0 14px;
    cursor: pointer;
}

/* ================== CONTENT BOX ================== */
.content-box {
    background: #1a1a1a;
    border-radius: 0 0 6px 6px;
    padding: 10px;
}

/* ================== HOME TITLE ================== */
.home-title {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    border-bottom: 1px solid #333;
    padding-bottom: 6px;
}

/* ================== GRID ================== */
.video-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* PC 6 video */
    gap: 20px;
}

/* ================== CARD ================== */
.video-item {
    background: none;
}

/* THUMB */
.thumb-link {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
.thumb-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ❤️ % OVERLAY */
.grid-reaction {
    position: absolute;
    right: 6px;
    bottom: 6px;
    background: rgba(0,0,0,.65);
    padding: 3px 6px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #ff4d6d;
}

/* TITLE */
.video-info {
    margin-top: 6px;
}
.video-title {
    font-size: 13px;
    line-height: 1.35;
    max-height: 36px;
    overflow: hidden;
}
.video-title a { color: #fff; }
.video-title a:hover { color: #ff4d4d; }

/* ================== PAGINATION ================== */
.pagination {
    margin: 20px 0 10px;
    text-align: center;
}
.pagination a,
.pagination span {
    background: #222;
    color: #ccc;
    padding: 6px 10px;
    margin: 0 2px;
    border-radius: 4px;
}
.pagination .current {
    background: #c62828;
    color: #fff;
}

/* ================== SINGLE ================== */
.single-title {
    font-size: 22px;
    margin: 0 0 10px;
}
.single-body {
    color: #ccc;
    line-height: 1.7;
}
.single-body img,
.single-body iframe,
.single-body video {
    max-width: 100%;
    display: block;
    margin: 10px auto;
}

/* ================== EPISODE ================== */
.episode-box {
    background: #0f0f0f;
    border-radius: 8px;
    margin: 12px 0 16px;
    overflow: hidden;
}
.video-wrapper {
    aspect-ratio: 16/9;
    background: #000;
}
.video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: 0;
}
.episode-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    padding: 10px;
    background: linear-gradient(180deg,#1a1a1a,#0f0f0f);
}
.episode-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.episode-tabs button {
    background: linear-gradient(180deg,#ff2a2a,#b80000);
    border: 1px solid #ff4d4d;
    color: #fff;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
}
.episode-tabs button.inactive {
    background: #222;
    border-color: #333;
    color: #bbb;
}

/* ================== CATEGORY / TAG ================== */
.post-categories a,
.post-tags a {
    display: inline-block;
    margin: 0 6px 6px 0;
    padding: 5px 12px;
    border-radius: 20px;
    border: 1px solid #ff9800;
    color: #ff9800;
    font-size: 13px;
}
.post-categories a:hover,
.post-tags a:hover {
    background: #ff9800;
    color: #000;
}

/* ================== ARCHIVE HEADER ================== */
.archive-pro-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.archive-title {
    font-size: 18px;
    font-weight: bold;
}
.archive-count {
    font-size: 13px;
    color: #aaa;
}
.archive-filter {
    display: flex;
    gap: 6px;
}
.archive-filter a {
    background: #2a2a2a;
    color: #ccc;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 13px;
}
.archive-filter a.active,
.archive-filter a:hover {
    background: #c62828;
    color: #fff;
}

/* ================== RESPONSIVE ================== */
@media (max-width: 1200px) {
    .video-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    .video-grid { grid-template-columns: repeat(2, 1fr); }
    .header-search { max-width: 100%; }
}
@media (max-width: 360px) {
    .video-grid { grid-template-columns: repeat(2, 1fr); }
}
/* ================== GRID ẢNH ĐỀU – KHÔNG NỀN ĐEN ================== */

/* GRID */
.video-grid{
    display:grid;
    grid-template-columns:repeat(6, 1fr); /* PC: 6 cột */
    gap:16px;
}

/* CARD – KHÔNG NỀN */
.video-item{
    background:transparent;   /* ❌ bỏ nền đen */
    border-radius:0;          /* ❌ bỏ bo góc card */
    overflow:visible;
}

/* KHUNG ẢNH CỐ ĐỊNH */
.video-item > a,
.video-item .thumb-link{
    display:block;
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;      /* đổi 1/1 nếu muốn vuông */
    background:transparent;   /* ❌ bỏ nền đen */
    overflow:hidden;
    border-radius:6px;        /* bo góc CHỈ ảnh */
}

/* ẢNH */
.video-item img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* TIÊU ĐỀ – KHÔNG NỀN */
.video-info{
    padding:6px 2px 0;
    background:transparent;   /* ❌ bỏ nền đen */
}

.video-title{
    font-size:13px;
    line-height:1.35;
    height:36px;
    overflow:hidden;
}

.video-title a{
    color:#fff;
    text-decoration:none;
}

/* ===== GRID PC: 5 BÀI / 1 HÀNG ===== */
.video-grid{
    display:grid;
    grid-template-columns:repeat(5, 1fr);
    gap:16px;
}

/* Tablet */
@media (max-width:1200px){
    .video-grid{
        grid-template-columns:repeat(4, 1fr);
    }
}

/* Mobile lớn */
@media (max-width:768px){
    .video-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

/* Mobile nhỏ (iPhone SE ~ 350px) */
@media (max-width:480px){
    .video-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}

/* ===== REACTION DƯỚI ẢNH ===== */
.grid-reaction{
    padding:4px 8px;
    display:flex;
    justify-content:flex-end;
    font-size:12px;
}

.grid-reaction .rate{
    color:#ff4d4d;
    font-weight:700;
}
/* ===== VIDEO INFO ===== */
.video-info{
    padding:6px 8px;
}

/* ===== HEADER ADS – GIỮA & ĐÚNG KHUNG ===== */
.header-ads{
    max-width:1300px;     /* 🔥 đúng khung site */
    margin:12px auto 0;  /* 🔥 căn giữa */
    padding:0 10px;      /* khớp padding header */
    text-align:center;
}

.header-ads a{
    display:block;       /* mỗi banner 1 dòng */
    margin-bottom:10px;
}

.header-ads img{
    max-width:100%;      /* không tràn khung */
    height:auto;
    max-height:90px;     /* khống chế chiều cao */
    border-radius:4px;
    display:inline-block;
}

/* MOBILE */
@media (max-width:768px){
    .header-ads{
        padding:0 8px;
    }
    .header-ads img{
        max-height:60px;
    }
}
/* ===== TAG INLINE – NGĂN DÒNG + DẤU PHẨY ===== */
.tag-inline .menu{
    margin:0;
    padding:0;
    list-style:none;
}

.tag-inline .menu li{
    display:inline;
}

.tag-inline .menu li:not(:last-child)::after{
    content:", ";
    color:#aaa;
}

.tag-inline .menu a{
    color:#ff9800;
    font-size:20px;
    text-decoration:none;
}

.tag-inline .menu a:hover{
    text-decoration:underline;
}
/* ===== MENU CATEGORY ACTIVE ===== */
.main-menu .menu-list li.current-menu-item > a,
.main-menu .menu-list li.current-menu-parent > a,
.main-menu .menu-list li.current-category-ancestor > a{
    background:#c62828;
    color:#fff;
    border-color:#c62828;
}