/*
Theme Name: Tiz Film
Description: Theme xem phim Tiz Film by TRIEUCA
Author: TRIEUCA
Template: flatsome
Version: 3.0
*/

/* =========================================
   GIAO DIỆN PHIM V2 - TABS & RELATED
   ========================================= */
/* Ép buộc nền tối cho Flatsome */
#main, body.single-post, .page-wrapper {
    background-color: #0f1115 !important;
    color: #e4e6eb;
}
.fv-wrapper {
    position: relative;
    padding-bottom: 60px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Nền mờ Backdrop */
.fv-backdrop {
    position: absolute; top: 0; left: 0; width: 100%; height: 550px;
    background-size: cover; background-position: center top;
    filter: blur(20px); opacity: 0.25; z-index: 0;
    mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
}
.fv-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 550px;
    background: linear-gradient(to right, rgba(15,17,21,1) 10%, rgba(15,17,21,0.7) 100%);
    z-index: 1;
}

/* --- Khối Cột Trái (Ảnh + Nút Play) --- */
.fv-main-content { position: relative; z-index: 2; padding-top: 50px; }
.fv-sidebar { margin-bottom: 30px; }
.fv-thumb-box {
    position: relative; display: inline-block; width: 100%; max-width: 300px; /* Ảnh to hơn */
}
.fv-thumb-img {
    width: 100%; 
    border-radius: 16px; /* Bo góc tròn nhiều hơn */
    box-shadow: 0 15px 35px rgba(0,0,0,0.8);
    border: 1px solid rgba(255,255,255,0.08);
}
.fv-ep-badge {
    position: absolute; top: 12px; right: 12px;
    background: #e50914; color: #fff; padding: 4px 12px;
    font-size: 13px; font-weight: 800; border-radius: 6px;
    box-shadow: 0 4px 10px rgba(229,9,20,0.4);
}

/* Nút Xem Phim Đẹp Mắt */
.fv-btn-play {
    display: flex; justify-content: center; align-items: center; gap: 10px;
    background: linear-gradient(90deg, #ff3b3b 0%, #e50914 100%); /* Gradient đỏ */
    color: #fff !important; width: 100%; max-width: 300px;
    margin: 25px auto 0; padding: 15px 20px;
    border-radius: 50px; /* Bo tròn hoàn toàn */
    font-size: 17px; font-weight: 800; text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(229,9,20,0.4); /* Đổ bóng phát sáng */
    transition: all 0.3s ease;
}
.fv-btn-play:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(229,9,20,0.6);
    background: linear-gradient(90deg, #ff4d4d 0%, #f70a16 100%);
}

/* --- Khối Cột Phải (Thông tin & Tabs) --- */
.fv-title { color: #fff; font-size: 34px; font-weight: 900; line-height: 1.2; margin-bottom: 8px; text-shadow: 2px 2px 6px rgba(0,0,0,0.8); }
.fv-origin { color: #8b92a5; font-size: 18px; font-weight: 500; margin-bottom: 25px; }

/* CSS Tabs */
.fv-tabs-nav {
    display: flex; gap: 20px; border-bottom: 2px solid rgba(255,255,255,0.05);
    margin-bottom: 25px; overflow-x: auto;
}
.fv-tab-btn {
    background: transparent; border: none; color: #8b92a5;
    font-size: 16px; font-weight: 700; padding: 10px 5px;
    cursor: pointer; position: relative; transition: 0.3s;
}
.fv-tab-btn:hover { color: #fff; }
.fv-tab-btn.active { color: #e50914; }
.fv-tab-btn.active::after {
    content: ''; position: absolute; bottom: -2px; left: 0; width: 100%;
    height: 3px; background: #e50914; border-radius: 3px 3px 0 0;
}
.fv-tab-content { display: none; animation: fadeIn 0.4s; }
.fv-tab-content.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* CSS Trong Tab Tổng Quan */
.fv-meta-list { list-style: none; padding: 0; margin: 0; }
.fv-meta-list li { display: flex; align-items: flex-start; margin-bottom: 15px; font-size: 15px; }
.fv-meta-list .meta-label { width: 120px; color: #8b92a5; font-weight: 600; flex-shrink: 0; }
.fv-meta-list .meta-value { color: #e4e6eb; }
.fv-tag { padding: 4px 10px; border-radius: 4px; font-size: 13px; font-weight: 700; display: inline-block; }
.fv-tag.status-completed { background: rgba(40,167,69,0.15); color: #28a745; }
.fv-tag.status-ongoing { background: rgba(229,9,20,0.15); color: #e50914; }
.fv-tag.year { background: rgba(255,255,255,0.1); color: #ccc; }
.cats a { color: #fff; background: rgba(255,255,255,0.1); padding: 4px 10px; border-radius: 4px; margin: 0 4px 4px 0; font-size: 13px; display: inline-block; transition: 0.2s; }
.cats a:hover { background: #e50914; }

/* CSS Trong Tab Nội Dung */
.fv-desc-text { color: #b0b5c1; font-size: 16px; line-height: 1.8; }

/* --- Khu Vực Liên Quan --- */
.fv-related-area { margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.05); position: relative; z-index: 2;}
.fv-section-title { color: #fff; font-size: 22px; font-weight: 800; border-left: 4px solid #e50914; padding-left: 12px; margin-bottom: 25px; }
.fv-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fv-related-item { display: block; text-decoration: none !important; transition: 0.3s; }
.fv-related-item:hover { transform: translateY(-5px); }
.fv-related-item .img-wrapper { position: relative; border-radius: 12px; overflow: hidden; }
.fv-related-item img { width: 100%; aspect-ratio: 2/3; object-fit: cover; transition: 0.3s; }
.fv-related-item:hover img { filter: brightness(0.7); }
.play-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.8); background: rgba(229,9,20,0.8); padding: 10px; border-radius: 50%; opacity: 0; transition: 0.3s; display: flex; align-items: center; justify-content: center; }
.fv-related-item:hover .play-overlay { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.rel-title { color: #e4e6eb; font-size: 15px; font-weight: 600; margin-top: 12px; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* --- Mobile Responsive --- */
@media (max-width: 849px) {
    .fv-backdrop { height: 450px; }
    .fv-overlay { background: linear-gradient(to bottom, rgba(15,17,21,0.6) 0%, rgba(15,17,21,1) 80%); height: 450px; }
    
    .fv-sidebar { text-align: center; }
    .fv-thumb-box { max-width: 220px; margin: 0 auto; }
    .fv-btn-play { max-width: 100%; }
    
    .fv-info { margin-top: 20px; }
    .fv-title { font-size: 26px; text-align: center;}
    .fv-origin { text-align: center; }
    .fv-tabs-nav { justify-content: center; }
    .fv-meta-list .meta-label { width: 100px; }
    
    /* Related Mobile: 2 cột thay vì 4 */
    .fv-related-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
}