/* =========================================
   1. VARIABLES & RESET
   ========================================= */
:root {
    --bg-dark: #17191c;
    --bg-card: #232529;
    --bg-hover: #222;
    --text-main: #ffffff;
    --text-muted: #aaaaaa;
    --color-primary: #e50914;
    --color-green: #28a745;
    --color-blue: #007bff;
    --color-yellow: #ffc107;
    --border-color: #333;
    --font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-main);
    background-color: var(--bg-dark);
    color: var(--text-main);
    line-height: 1.6;
    font-size: 16px;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; padding: 0; margin: 0; }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font-family: inherit; }

/* Layout Wrappers */
.container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    margin-top: 40px;
}

/* =========================================
   2. HEADER & NAVIGATION
   ========================================= */
/* ============================
   NEW HEADER LAYOUT (Pill Style)
   ============================ */
.site-header {
    background: rgb(35 37 41 / 80%);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.container-fluid {
    padding: 0 30px;
    max-width: 1240px;
    margin: 0 auto;
}

.header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* ឆ្វេង-កណ្តាល-ស្តាំ */
    align-items: center;
}

/* 1. Left Section (Logo) */
.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}
.site-logo img { height: 35px; }

/* 2. Center Section (Pill Menu) */
.header-center {
    display: flex;
    justify-content: center;
}

.pill-navigation {
    background: hsl(225deg 10% 15% / 50%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px; /* រាងមូល Pill */
    padding: 5px 6px;
    display: flex;
    align-items: center;
}

.pill-nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
}

.pill-nav-links li { margin: 0; }

.pill-nav-links li a {
    color: #ccc;
    font-size: 13px;
    font-weight: 600;
    text-transform: capitalize; /* អក្សរធម្មតា */
    padding: 8px 18px;
    border-radius: 30px;
    transition: 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

/* Hover Effect */
.pill-nav-links li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* Active Item (ពណ៌ក្រហមដូចក្នុងរូប) */
.pill-nav-links li.current-menu-item a {
    background: rgba(229, 9, 20, 0.2); /* ក្រហមថ្លាៗ */
    color: #ff6b6b;
    border: 1px solid rgba(229, 9, 20, 0.3);
}

/* បន្ថែម Icon ពីមុខ Menu (Optional: ប្រើ CSS Icons) */
/* ឧទាហរណ៍សម្រាប់ Home */
.pill-nav-links li.menu-item-home a::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' width='16' fill='%23ccc'%3E%3Cpath d='M240-200h120v-240h240v240h120v-360L480-740 240-560v360Zm-80 80v-480l320-240 320 240v480H520v-240h-80v240H160Z'/%3E%3C/svg%3E");
    width: 16px; height: 16px; opacity: 0.7;
}

/* 3. Right Section (Search Button) */
.header-right {
    display: flex;
    justify-content: flex-end;
}

.search-trigger-icon {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    width: 40px;
    height: 40px;
    border-radius: 12px; /* រាងជ្រុងមូលតិចៗ */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
    color: #fff;
}

.search-trigger-icon:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

/* ============================
   SEARCH POPUP MODAL (Like Reference)
   ============================ */
.search-modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.85); /* ផ្ទៃខាងក្រោយងងឹត */
    backdrop-filter: blur(8px);
    z-index: 9999;
    padding-top: 100px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}

.search-modal.active {
    opacity: 1;
    visibility: visible;
}

.search-modal-content {
    margin: auto;
    width: 100%;
    max-width: 600px;
    background: #161616;
    border: 1px solid #333;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    height: fit-content;
    position: relative;
    transform: translateY(-20px);
    transition: 0.3s;
}

.search-modal.active .search-modal-content {
    transform: translateY(0);
}

.search-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.search-modal-title {
    color: #888;
    font-size: 14px;
    font-weight: 600;
}

.close-modal-btn {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    display: flex; align-items: center; justify-content: center;
}
.close-modal-btn:hover { background: #333; }

.modal-search-group {
    background: #0a0a0a;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.modal-search-group:focus-within {
    border-color: var(--color-primary);
}

.modal-search-input {
    background: transparent;
    border: none;
    color: #fff;
    width: 100%;
    font-size: 16px;
    outline: none;
}

/* Results Dropdown inside Modal */
#modal-search-results {
    margin-top: 15px;
    max-height: 400px;
    overflow-y: auto;
}
.search-item { border-bottom: 1px solid #222; }

/* ============================
   RESPONSIVE (Mobile & Tablet)
   ============================ */
.mobile-toggle { display: none; }
.mobile-sidebar { 
    position: fixed; top: 0; left: -280px; width: 260px; height: 100%; 
    background: #111; z-index: 2000; transition: 0.3s; padding: 20px;
}
.mobile-sidebar.open { left: 0; }
.mobile-menu-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(0,0,0,0.7); z-index: 1999; display: none; 
}
.mobile-menu-overlay.active { display: block; }

@media (max-width: 992px) {
    .header-center { display: none; /* លាក់ Menu Pill លើទូរស័ព្ទ */ }
    .mobile-toggle { 
        display: flex; 
        align-items: center; 
        justify-content: center;
        background: transparent; 
        border: none; 
        color: #fff; 
        cursor: pointer;
    }
    .header-inner {
        grid-template-columns: auto 1fr auto;
    }
    .header-left { gap: 10px; }
    .container-fluid { padding: 0 15px; }
}

/* ============================
   IMPROVED MOBILE MENU (PREMIUM LOOK)
   ============================ */
.mobile-sidebar {
    position: fixed;
    top: 0;
    left: 0; /* ដាក់ឆ្វេង */
    width: 280px; /* ទទឹងសមរម្យ */
    height: 100vh;
    background: #141414; /* ពណ៌ផ្ទៃងងឹតខ្លាំង */
    z-index: 2000;
    transform: translateX(-100%); /* លាក់ដោយរុញទៅឆ្វេងអស់ */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 5px 0 15px rgba(0,0,0,0.5);
    display: flex;
    flex-direction: column;
}

.mobile-sidebar.open {
    transform: translateX(0); /* បង្ហាញមកវិញ */
}

/* Header ក្នុង Sidebar */
.mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    background: #1a1a1a;
}

.mobile-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#close-mobile-menu {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    transition: 0.3s;
}
#close-mobile-menu:hover { color: var(--color-primary); transform: rotate(90deg); }

/* List Menu Items */
.mobile-navigation {
    flex: 1;
    overflow-y: auto;
    padding: 10px 0;
}

.mobile-nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-nav-links li {
    display: block;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.mobile-nav-links li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    color: #ccc;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.2s;
}

.mobile-nav-links li a:hover {
    background: rgba(255,255,255,0.05);
    color: var(--color-primary);
    padding-left: 25px; /* Effect រុញអក្សរ */
}

/* Active Menu Item */
.mobile-nav-links li.current-menu-item a {
    color: #fff;
    background: rgba(229, 9, 20, 0.1);
    border-left: 4px solid var(--color-primary);
}

/* Overlay (ផ្ទៃខ្មៅស្រអាប់ខាងក្រោយ) */
.mobile-menu-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(3px);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}
.mobile-menu-overlay.active { opacity: 1; visibility: visible; }

/* ============================
   LIVE SEARCH RESULTS STYLING
   ============================ */
.search-results-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.search-item {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
.search-link {
    display: flex;
    align-items: center;
    padding: 12px;
    gap: 15px;
    transition: 0.2s;
    text-decoration: none;
}
.search-link:hover { background: rgba(255,255,255,0.05); }

.search-thumb {
    width: 45px; height: 65px;
    object-fit: cover;
    border-radius: 4px;
}
.search-info { display: flex; flex-direction: column; }
.search-title { font-size: 15px; font-weight: 600; color: #fff; line-height: 1.2; margin-bottom: 4px; }
.search-meta { font-size: 12px; color: #999; }
.view-all-results {
    display: block;
    text-align: center;
    padding: 12px;
    background: var(--color-primary);
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 0 0 12px 12px;
}
.search-no-result { padding: 20px; text-align: center; color: #888; }

/* ============================
   FIX DESKTOP SUBMENU (DROPDOWN)
   ============================ */

/* 1. កំណត់ឱ្យ Parent Menu ជាគោល (Relative) */
.pill-nav-links .menu-item-has-children {
    position: relative;
}

/* បន្ថែមសញ្ញាព្រួញចុះក្រោមតូចមួយនៅខាងក្រោយឈ្មោះ (Optional) */
.pill-nav-links .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    margin-left: 6px;
    border-top: 4px solid #fff;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    opacity: 0.7;
}

/* 2. រចនារូបរាង Dropdown Box (Submenu) */
.pill-nav-links .sub-menu {
    position: absolute;
    top: 100%; /* នៅក្រោម Menu មេ */
    left: 50%;
    transform: translateX(-50%); /* ដាក់អោយនៅកណ្តាលធៀបនឹងមេ */
    
    background: #141414; /* ផ្ទៃពណ៌ខ្មៅ */
    min-width: 200px; /* ទទឹងអប្បបរមា */
    padding: 10px 0;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    
    /* លាក់វាសិន (Hidden by default) */
    opacity: 0;
    visibility: hidden;
    margin-top: 20px; /* ឱ្យវាលោតពីក្រោមមកបន្តិច */
    transition: all 0.3s ease;
    z-index: 1001;
    
    /* ត្រូវប្រាកដថាវាជាជួរឈរ (Column) មិនមែនជួរដេក */
    display: flex;
    flex-direction: column;
    gap: 0; 
}

/* 3. បង្ហាញ Submenu ពេល Hover */
.pill-nav-links .menu-item-has-children:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    margin-top: 12px; /* មកនៅកន្លែងដើមវិញ */
}

/* បន្ថែម Bridge (ស្ពាន) ដើម្បីកុំអោយបាត់ Menu ពេលរំកិល Mouse ចុះក្រោម */
.pill-nav-links .menu-item-has-children:hover > .sub-menu::before {
    content: "";
    position: absolute;
    top: -15px;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
}

/* 4. រចនា Link ខាងក្នុង Submenu */
.pill-nav-links .sub-menu li {
    display: block;
    width: 100%;
    margin: 0;
}

.pill-nav-links .sub-menu li a {
    /* Reset Style របស់ Pill ចេញវិញ */
    border-radius: 0;
    border: none !important;
    background: transparent !important;
    color: #ccc;
    padding: 10px 20px;
    font-size: 14px;
    justify-content: flex-start; /* អក្សរមកខាងឆ្វេង */
    width: 100%;
}

/* Hover លើកូន Menu */
.pill-nav-links .sub-menu li a:hover {
    background: rgba(255,255,255,0.05) !important;
    color: var(--color-primary);
    padding-left: 25px; /* Effect រុញទៅស្តាំ */
}

/* បំបាត់សញ្ញាព្រួញសម្រាប់កូន Menu (បើមិនចង់បាន) */
.pill-nav-links .sub-menu li.menu-item-has-children > a::after {
    transform: rotate(-90deg); /* បង្វិលព្រួញទៅស្តាំ */
}

/* =========================================
   3. HERO SECTION (ZOOTOPIA STYLE)
   ========================================= */
.premium-hero-wrap {
    width: 100%;
    height: 55vh; /* កម្ពស់សមរម្យសម្រាប់ Desktop */
    min-height: 600px;
    background: #000;
    position: relative;
    overflow: hidden;
}

.main-hero-swiper {
    width: 100%;
    height: 100%;
}

.main-hero-slide {
    position: relative;
    overflow: hidden;
}

/* Background Image with Animation */
.main-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center 20%;
}

.swiper-slide-active .main-hero-bg {
    transform: scale(1.15);
}

/* Cinematic Overlay */
.main-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%),
                linear-gradient(0deg, rgba(18,18,18,1) 0%, rgba(18,18,18,0) 30%);
    z-index: 1;
}

/* Content Area */
.hero-content-container {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-inner-content {
    max-width: 650px;
}

.hero-badge-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.hero-category {
    color: var(--color-primary);
    font-weight: 800;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.hero-year {
    background: linear-gradient(135deg,rgba(139,92,246,.15),rgba(168,85,247,.15));
    border: 1px solid rgba(139,92,246,.2);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}

.hero-title-main {
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 20px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.hero-meta-row {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.imdb-box {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
    color: #ffc107;
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 5px;
}

.quality-badge {
    background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(6,182,212,.15));
    border: 1px solid rgba(59,130,246,.2);
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
}

.hero-summary {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.6;
    margin-bottom: 35px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Buttons Styling */
.hero-btns {
    display: flex;
    gap: 15px;
}

.btn-play {
    background: linear-gradient(135deg, #ef4444, #7c3aed);
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
}

.btn-play:hover {
    transform: scale(1.05);
}

.btn-list {
    background: rgba(109, 109, 110, 0.7);
    color: #fff !important;
    padding: 12px 20px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 16px;
    border: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s;
    backdrop-filter: blur(10px);
}

.btn-list:hover {
    background: rgba(109, 109, 110, 1);
    transform: scale(1.05);
}

/* Custom Navigation arrows */
.hero-nav-container {
    position: absolute;
    bottom: 50px;
    right: 20px;
    display: flex;
    gap: 15px;
    z-index: 10;
}

.hero-nav-prev, .hero-nav-next {
    width: 45px;
    height: 45px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: 0.3s;
}

.hero-nav-prev:hover, .hero-nav-next:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
}

.hero-dots.swiper-pagination-bullets {
    bottom: 50px !important;
    left: 20px !important;
    text-align: left;
    width: auto;
}

.hero-dots .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.4;
    width: 10px;
    height: 10px;
}

.hero-dots .swiper-pagination-bullet-active {
    opacity: 1;
    background: var(--color-primary);
    width: 30px;
    border-radius: 5px;
}

/* Animations */
.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: 0.6s ease-out;
}

.swiper-slide-active .fade-up {
    opacity: 1;
    transform: translateY(0);
}

.swiper-slide-active .hero-title-main { transition-delay: 0.1s; }
.swiper-slide-active .hero-meta-row { transition-delay: 0.2s; }
.swiper-slide-active .hero-summary { transition-delay: 0.3s; }
.swiper-slide-active .hero-btns { transition-delay: 0.4s; }

/* Responsive */
@media (max-width: 991px) {
    .hero-inner-content { max-width: 100%; text-align: center; }
    .hero-badge-row, .hero-meta-row, .hero-btns { justify-content: center; }
    .main-hero-overlay {
        background: radial-gradient(circle, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 80%);
    }
    .hero-nav-container { display: none; }
    .hero-dots.swiper-pagination-bullets { left: 50% !important; transform: translateX(-50%); }
}

/* =========================================
   4. MOVIE CARDS & GRID SYSTEM
   ========================================= */
.movie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}

.movie-card {
    position: relative;
    background: transparent;
    transition: 0.3s;
}
.movie-card:hover { transform: translateY(-5px); }

.movie-poster {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}
.movie-poster img {
    transition: transform 0.4s;
}
.movie-poster:hover img { transform: scale(1.1); filter: brightness(0.6); }

/* Card Badges */
.ep-badge {
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--color-primary);
    color: #fff;
    font-size: 11px;
    padding: 4px 10px;
    border-top-right-radius: 8px;
    z-index: 2;
    font-weight: 700;
}
.type-ribbon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 5px;
    border-radius: 4px;
    color: #fff;
    z-index: 2;
    text-transform: uppercase;
}
.type-ribbon.movie {background: linear-gradient(135deg, rgba(6, 182, 212, .15), rgba(8, 145, 178, .15));border: 1px solid rgba(6, 182, 212, .2);backdrop-filter: blur(10px);}
.type-ribbon.tv {background: linear-gradient(135deg,rgba(107,33,168,.15),rgba(126,34,206,.15));border: 1px solid rgba(147,51,234,.2);backdrop-filter: blur(10px);}

.quality-tag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: linear-gradient(135deg,rgba(34,197,94,.15),rgba(22,163,74,.15));
    color: #fff;
    border: 1px solid rgba(34,197,94,.2);
    padding: 2px 6px;
    font-size: 10px;
    border-radius: 4px;
    z-index: 2;
    backdrop-filter: blur(10px);
}

/* Play Overlay Icon */
.play-btn-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    width: 45px;
    height: 45px;
    padding: 5px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00000045;
    cursor: pointer;
    transition: 0.3s;
    transform: translate(-50%, -50%);
}
.movie-poster:hover .play-btn-overlay { opacity: 1; }
.movie-poster:hover .play-btn-overlay svg { transform: scale(1); }

/* Card Details */
.card-details { padding-top: 12px; }
.card-title {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.card-title a { color: #fff; font-weight: 600; }
.card-title a:hover { color: var(--color-primary); }

.card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: var(--text-muted);
}
.meta-left { display: flex; align-items: center; gap: 6px; }
.meta-dot { font-size: 8px; opacity: 0.5; }

.meta-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-yellow);
    font-weight: 700;
}
.meta-rating svg { width: 14px; height: 14px; }

/* =========================================
   5. LIST SECTIONS (SLIDERS)
   ========================================= */
.list-section { margin-bottom: 50px; }

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #2a2a2a;
    padding-bottom: 15px;
}

.list-title-group { display: flex; align-items: center; gap: 20px; }
.list-title {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    border-left: 4px solid var(--color-primary);
    padding-left: 15px;
}

.btn-view-all {
    background: var(--bg-card);
    color: #ccc;
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}
.btn-view-all:hover {
    background: var(--color-primary);
    color: #fff;
}

.slider-nav { display: flex; gap: 10px; }
.nav-btn {
    background: var(--bg-card);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    color: #fff;
}
.nav-btn:hover { background: var(--color-primary); }

/* Trending Tabs */
.trending-tab-btn { background: none; border: none; color: #aaa; cursor: pointer; font-weight: bold; padding: 5px 10px; }
.trending-tab-btn.active { color: #fff; border-bottom: 2px solid var(--color-primary); }
.hidden { display: none; }
.active { display: block; }
.trending-tabs {display: flex;}

/* =========================================
   6. SINGLE PAGE (MOVIE/TV DETAILS)
   ========================================= */
.breadcrumb {
    margin: 25px 0;
    font-size: 14px;
    color: #888;
    gap:8px
}
.breadcrumb a { color: #bbb; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { color: #fff; font-weight: 600; }

/* Video Player */
.anc-player-embed-direct {
    position: relative;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #333;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* Two Column Info Layout */
.single-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    background: var(--bg-card);
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #2a2a2a;
    margin: 40px 0;
}

.single-poster-col .poster-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
    border: 1px solid #333;
}
.single-poster-col img { width: 100%; display: block; }

/* Info Column */
.single-title {
    font-size: 30px;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.single-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
.btn-outline {
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    padding: 8px 20px;
    border-radius: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    transition: 0.3s;
}
.btn-outline:hover, .btn-outline.active {
    background: #fff;
    color: #000;
}
.meta-badge {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    background: #333;
    font-weight: 600;
}
.meta-badge.green { background: var(--color-green); color: #fff; }
.meta-badge.dark { background: #222; border: 1px solid #444; }
.imdb-score {
    color: var(--color-yellow);
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
}

/* Meta Data List */
.movie-meta-data {
    font-size: 15px;
    border-top: 1px solid #333;
    padding-top: 20px;
    margin-bottom: 30px;
}
.meta-row {
    display: flex;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #333;
}
.meta-row:last-child { border-bottom: none; }

.meta-label {
    width: 120px;
    color: #888;
    font-weight: 600;
    flex-shrink: 0;
}
.meta-value { color: #ddd; }
.meta-value a { color: #4db5ff; }
.meta-value a:hover { text-decoration: underline; }

.status-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
}
.status-badge.green { background: var(--color-green); }
.status-badge.gray { background: #666; }

/* Overview & Tags */
.section-subtitle {
    margin: 30px 0 15px;
    padding-left: 15px;
    border-left: 4px solid var(--color-primary);
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}
.overview-content { color: #ccc; font-size: 16px; line-height: 1.8; }

.tags-section {
    margin-top: 25px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.tag-item {
    background: #000;
    border: 1px solid #333;
    color: #aaa;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    transition: 0.2s;
}
.tag-item:hover { border-color: #666; color: #fff; }

/* =========================================
   7. FILTER PAGE
   ========================================= */
.filter-bar {
    background: var(--bg-card);
    padding: 25px;
    border-radius: 10px;
    margin-bottom: 40px;
    border: 1px solid #333;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.filter-form { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }

.custom-select {
    background: #1a1a1a;
    color: #fff;
    border: 1px solid #444;
    padding: 12px 15px;
    border-radius: 6px;
    min-width: 160px;
    cursor: pointer;
    font-size: 14px;
}
.custom-select:focus { border-color: var(--color-primary); outline: none; }

.filter-submit-btn {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
}
.filter-submit-btn:hover { background: #b00; }

.loader-wrapper { text-align: center; margin: 40px 0; }
.spinner {
    border: 4px solid #333;
    border-top: 4px solid var(--color-primary);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* =========================================
   8. COMPONENTS (SHARE, FOOTER)
   ========================================= */
/* Share Box */
.share-container { margin: 20px auto; }
.share-box { background: var(--bg-card); padding: 20px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.share-info { flex: 1; min-width: 250px; }
.share-title { font-weight: bold; font-size: 18px; margin-bottom: 5px; color: #fff; display: flex; align-items: center; gap: 10px; }
.share-title i { color: #dc3545; }
.share-desc { color: #888; font-size: 13px; margin: 0; }
.share-buttons { display: flex; gap: 10px; }
.btn-share { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.3s; background: #333; }
.btn-share svg { width: 20px; height: 20px; fill: #fff; }
.btn-share:hover { transform: translateY(-3px); }
.btn-share.fb:hover { background: #1877f2; }
.btn-share.x:hover { background: #000; border: 1px solid #333; }
.btn-share.tg:hover { background: #0088cc; }
.btn-share.wa:hover { background: #25d366; }

/* Back to Top */
#back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #333;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}
#back-to-top.show { opacity: 1; visibility: visible; }
#back-to-top:hover { background: var(--color-primary); }

/* Footer */
.site-footer {
    background-color: var(--bg-card);
    margin-top: 20px;
    border-top: 1px solid #222;
}
.footer-grid {
    display: grid;
    grid-template-columns: 4fr 1fr 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}
.footer-about p { color: #888; font-size: 14px; margin-top: 15px; }
.footer-heading {
    color: #fff;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 16px;
    border-left: 3px solid var(--color-primary);
    padding-left: 10px;
}
.footer-menu-list li { margin-bottom: 10px; font-size: 14px; }
.footer-menu-list li a { color: #aaa; }
.footer-menu-list li a:hover { color: #fff; padding-left: 5px; }

.footer-bottom {
    border-top: 1px solid #393b3f;
    padding: 25px 0;
    text-align: center;
    font-size: 13px;
    color: #555;
}

.footer-logo img {
    width: 190px;
}

/* =========================================
   9. RESPONSIVE MEDIA QUERIES
   ========================================= */
@media (max-width: 1200px) {
    .hero-wrapper { height: 450px; }
    .hero-title { font-size: 38px; }
}

@media (max-width: 992px) {    
    /* Header */
    .header-content {
        position: fixed;
        top: 70px;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #111;
        flex-direction: column;
        align-items: flex-start;
        padding: 30px;
        transform: translateX(100%);
        transition: 0.3s;
        z-index: 998;
    }
    .header-content.active { transform: translateX(0); }
    .nav-links { flex-direction: column; width: 100%; margin-bottom: 30px; }
    .nav-links li { width: 100%; border-bottom: 1px solid #333; padding: 10px 0; }
    .mobile-toggle { display: block; }

    /* Single Page */
    .single-layout { grid-template-columns: 1fr; padding: 20px; }
    .single-poster-col { max-width: 250px; margin: auto; }
    .single-title { text-align: center; font-size: 28px; }
    .single-actions { justify-content: center; }
    
    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 768px) {
    .search-group{width:100%;}
    .container { padding: 0 15px; }
    
    /* Hero */
    .hero-wrapper { height: auto; min-height: 400px; }
    .hero-container { padding: 40px 15px; }
    .hero-content { text-align: center; max-width: 100%; margin: 0 auto; }
    .hero-meta, .hero-buttons { justify-content: center; }
    .hero-title { font-size: 32px; }
    
    /* Grid */
    .movie-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
    
    /* List Section */
    .list-header { flex-direction: column; align-items: flex-start; gap: 15px; }
    .slider-nav { margin-left: auto; }
    
    /* Filter */
    .filter-form { flex-direction: column; align-items: stretch; }
    .custom-select { width: 100%; }
    
    /* Share */
    .share-box { flex-direction: column; text-align: center; }
    
    /* Footer */
    .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .hero-title { font-size: 26px; }
    .btn-hero-play, .btn-hero-list { padding: 10px 20px; font-size: 14px; }
}

/* =========================================
   10. COMMENT SECTION DESIGN
   ========================================= */

/* Comment Wrapper */
.comments-area {
    max-width: 900px;
    margin: 0 auto;
    background: #181818; /* ផ្ទៃខាងក្រោយពណ៌ប្រផេះខ្មៅ */
    padding: 40px;
    border-radius: 10px;
    border: 1px solid #333;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Heading: "Leave a Reply" & "Comments" */
.comments-title {
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 20px;
    border-left: 4px solid var(--color-primary); /* បន្ទាត់ពណ៌ក្រហមនៅខាងឆ្វេង */
    padding-left: 15px;
    text-transform: uppercase;
}

.comment-notes, 
.logged-in-as {
    color: #888;
    font-size: 13px;
}

/* Form Layout (Grid System) */
#commentform {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

/* ធ្វើឱ្យប្រអប់នីមួយៗ Full Width លើទូរស័ព្ទ */
.comment-form-comment,
.comment-form-author,
.comment-form-email,
.comment-form-url,
.comment-form-cookies-consent,
.form-submit {
    width: 100%;
}

/* លើអេក្រង់ធំ (Tablet/PC) ឱ្យឈ្មោះ និង Email នៅមួយជួរ */
@media (min-width: 768px) {
    .comment-form-author,
    .comment-form-email,
    .comment-form-url {
        flex: 1; /* ចែកទំហំស្មើគ្នា */
        min-width: 200px;
    }
}

/* Label Styling */
#commentform label {
    display: block;
    color: #ccc;
    font-size: 13px;
    margin-bottom: 8px;
    font-weight: 600;
}

/* Input & Textarea Styling */
#commentform textarea,
#commentform input[type="text"],
#commentform input[type="email"],
#commentform input[type="url"] {
    width: 100%;
    background-color: #0a0a0a; /* ពណ៌ផ្ទៃ Input */
    border: 1px solid #333;
    color: #fff;
    padding: 12px 15px;
    border-radius: 5px;
    font-size: 14px;
    transition: 0.3s;
    outline: none;
}

/* Focus Effect (ពេលចុចសរសេរ) */
#commentform textarea:focus,
#commentform input:focus {
    border-color: var(--color-primary); /* ប្តូរទៅពណ៌ក្រហម */
    background-color: #000;
    box-shadow: 0 0 8px rgba(229, 9, 20, 0.3);
}

#commentform textarea {
    min-height: 150px; /* កម្ពស់ប្រអប់សរសេរ */
    resize: vertical;
}

/* Checkbox (Save my name...) */
.comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #888;
    font-size: 13px;
}
.comment-form-cookies-consent input {
    width: auto !important;
    accent-color: var(--color-primary);
}

/* Submit Button */
.form-submit { margin-top: 10px; }

#commentform .submit {
    background: var(--color-primary); /* ពណ៌ប៊ូតុង (ក្រហម) */
    color: #fff;
    border: none;
    padding: 12px 35px;
    border-radius: 30px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: 0.3s;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4);
}

#commentform .submit:hover {
    background: #fff;
    transform: translateY(-2px);
}

/* --- LIST OF COMMENTS (កន្លែងបង្ហាញ Comment ដែលគេបានផុស) --- */
.comment-list {
    list-style: none;
    margin-top: 40px;
    padding: 0;
}

.comment-body {
    background: #111;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    border: 1px solid #2a2a2a;
    display: flex;
    gap: 20px;
}

/* Avatar រូបភាពអ្នក Comment */
.comment-body img.avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
}

.comment-meta { flex: 1; }

/* ឈ្មោះអ្នក Comment */
.comment-author .fn {
    font-style: normal;
    font-weight: bold;
    color: #fff;
    font-size: 16px;
}
.comment-author .fn a { color: #fff; text-decoration: none; }

/* ថ្ងៃខែ */
.comment-metadata {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
    display: block;
}
.comment-metadata a { color: #666; }

/* អត្ថបទ Comment */
.comment-content p {
    color: #ccc;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* ប៊ូតុង Reply */
.reply { text-align: right; }
.comment-reply-link {
    color: var(--color-primary);
    font-size: 12px;
    font-weight: bold;
    border: 1px solid var(--color-primary);
    padding: 4px 12px;
    border-radius: 20px;
    transition: 0.3s;
}
.comment-reply-link:hover {
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
}

.comments-container {
    padding: 20px;
    background: var(--bg-card);
    border-radius: 12px;
    margin-bottom: 20px;
}

/* Mobile Responsive Adjustments */
@media (max-width: 600px) {
    .comments-area { padding: 20px; }
    .comment-body { flex-direction: column; gap: 10px; }
    .comment-body img.avatar { width: 40px; height: 40px; }
    #commentform .submit { width: 100%; }
}

/* =========================================
   11. PAGINATION DESIGN (Premium Style)
   ========================================= */

/* 1. ទីតាំង និង ប្រអប់រួម */
.pagination-wrapper {
    display: flex;
    justify-content: center; /* ដាក់ឱ្យនៅកណ្តាល */
    width: 100%;
    margin: 20px 0;
}

/* 2. ប្រអប់ផ្ទុកលេខ (Container) */
.pagination-wrapper ul {
    display: flex;
    flex-wrap: wrap; /* ឱ្យធ្លាក់ចុះក្រោមបើអេក្រង់តូច */
    justify-content: center;
    align-items: center;
    gap: 10px; /* ចន្លោះរវាងប៊ូតុង */
    padding: 15px 30px;
    margin: 0;
    list-style: none;
    background: var(--bg-card);
    border: 2px solid #2f3137;
    border-radius: 50px; /* រាងមូល Pill Shape */
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}

.movie-grid .pagination-wrapper,
#ajax-pagination {
    grid-column: 1 / -1; /* លាតពីឆ្វេងទៅស្តាំ */
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.pagination-wrapper ul li {
    margin: 0;
}

/* 3. រចនាប័ទ្មប៊ូតុងលេខ (1, 2, 3...) */
.page-numbers {
    background: #1a1a1a;
    padding: 10px 15px;
    border-radius: 10px;
    font-weight: bold;
}

/* 4. ពេលដាក់ Mouse ពីលើ (Hover) */
.pagination-wrapper .page-numbers:hover:not(.current):not(.dots) {
    background: var(--bg-card);
    color: var(--color-primary); /* ពណ៌ក្រហម */
    border-color: #e50914;
    box-shadow: 0 5px 15px rgb(255 0 0 / 20%);
}

/* 5. ទំព័រដែលកំពុងមើល (Active/Current) */
.pagination-wrapper .page-numbers.current {
    background: var(--color-primary); /* ពណ៌ក្រហម */
    color: #fff;
    border-color: var(--color-primary);
    box-shadow: 0 0 15px rgba(229, 9, 20, 0.5); /* ស្រមោលក្រហម */
    cursor: default;
    transform: scale(1.1); /* ធំជាងគេបន្តិច */
    padding: 10px 15px;
    border-radius: 10px;
    font-weight: bold;
}

/* 6. ចំណុច (...) */
.pagination-wrapper .page-numbers.dots {
    background: transparent;
    border: none;
    color: #666;
    cursor: default;
}

/* 7. ប៊ូតុង Next / Prev (សញ្ញាព្រួញ) */
.pagination-wrapper .prev i,
.pagination-wrapper .next i {
    line-height: 0; /* តម្រឹម Icon ឱ្យកណ្តាល */
}

/* =========================================
   RESPONSIVE DESIGN (Mobile)
   ========================================= */
@media (max-width: 600px) {
    .pagination-wrapper .page-numbers {font-size: 12px;}
}

/*-- JW Player --*/
.jw-icon-cc .jw-svg-icon-cc-off path,.jw-icon-cc .jw-svg-icon-cc-on path,.jw-icon-pip .jw-svg-icon-pip-off path,.jw-icon-pip .jw-svg-icon-pip-on path,.jw-state-idle .jw-svg-icon-play path,.jw-svg-icon-buffer path,.jw-svg-icon-fullscreen-off path,.jw-svg-icon-fullscreen-on path,.jw-svg-icon-pause path,.jw-svg-icon-play path,.jw-svg-icon-replay path,.jw-svg-icon-rewind path,.jw-svg-icon-settings path,.jw-svg-icon-volume-0 path,.jw-svg-icon-volume-100 path,.jw-svg-icon-volume-50 path,.jw-svg-icon.jw-svg-icon-sharing path,.jw-icon.jw-icon-inline.jw-button-color.jw-reset.jw-icon-rewind,.jw-icon-pip,.jw-icon.jw-icon-inline.jw-button-color.jw-reset.jw-icon-pip{display:none}.jw-text{padding:5px 0!important}.jw-state-idle .jw-svg-icon-play,.jw-svg-icon-buffer,.jw-svg-icon-play{background-size:contain;background-repeat:no-repeat;filter:brightness(0) invert(1)}.jw-state-idle .jw-svg-icon-play{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10' clip-rule='evenodd' opacity='0.35'/%3E%3Cpath fill='%23fff' d='m15.414 13.059l-4.72 2.787C9.934 16.294 9 15.71 9 14.786V9.214c0-.924.934-1.507 1.694-1.059l4.72 2.787c.781.462.781 1.656 0 2.118'/%3E%3C/svg%3E")}.jw-svg-icon-play{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.727c1.566.852 1.566 3.1 0 3.952L8.325 20.702C6.826 21.518 5 20.432 5 18.726z'/%3E%3C/svg%3E")}.jw-svg-icon-buffer{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2A10 10 0 1 0 22 12A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8A8 8 0 0 1 12 20Z' opacity='0.4'/%3E%3Cpath fill='%23fff' d='M20 12h2A10 10 0 0 0 12 2V4A8 8 0 0 1 20 12Z'%3E%3CanimateTransform attributeName='transform' dur='0.75s' from='0 12 12' repeatCount='indefinite' to='360 12 12' type='rotate'/%3E%3C/path%3E%3C/svg%3E");background-position:center}.jw-svg-icon-replay{background:url(https://www.svgrepo.com/show/274164/refresh.svg) center/contain no-repeat;filter:brightness(0) invert(1);transform:scaleX(-1)}.jw-icon-cc .jw-svg-icon-cc-on{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 28 28'%3E%3Cpath fill='%23fff' d='M6.25 4A4.25 4.25 0 0 0 2 8.25v11.5A4.25 4.25 0 0 0 6.25 24h15.5A4.25 4.25 0 0 0 26 19.75V8.25A4.25 4.25 0 0 0 21.75 4zm4.801 5.742c.622.093 1.226.319 1.668.672a.75.75 0 1 1-.937 1.172c-.184-.147-.517-.296-.95-.36a2.8 2.8 0 0 0-1.308.108a2.04 2.04 0 0 0-1.048.79C8.206 12.523 8 13.118 8 14s.206 1.477.476 1.876c.27.397.636.648 1.048.79c.42.143.883.17 1.308.108c.433-.065.766-.213.95-.36a.75.75 0 0 1 .937 1.172c-.442.353-1.046.58-1.668.672a4.3 4.3 0 0 1-2.013-.174a3.53 3.53 0 0 1-1.803-1.366c-.472-.695-.735-1.6-.735-2.718s.263-2.023.735-2.718a3.53 3.53 0 0 1 1.803-1.366a4.3 4.3 0 0 1 2.013-.174m10.167.672a.75.75 0 1 1-.936 1.172c-.183-.147-.517-.296-.95-.36a2.8 2.8 0 0 0-1.308.108a2.04 2.04 0 0 0-1.048.79c-.27.399-.476.994-.476 1.876s.206 1.477.476 1.876c.27.397.637.648 1.049.79c.419.143.882.17 1.306.108c.434-.065.768-.213.95-.36a.75.75 0 0 1 .938 1.172c-.443.353-1.046.58-1.668.672a4.3 4.3 0 0 1-2.013-.174a3.53 3.53 0 0 1-1.803-1.366C15.263 16.023 15 15.118 15 14s.263-2.023.735-2.718a3.53 3.53 0 0 1 1.803-1.366a4.3 4.3 0 0 1 2.013-.174c.622.093 1.226.319 1.668.672'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;filter:brightness(0) invert(1)}.jw-icon-cc .jw-svg-icon-cc-off{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 28 28'%3E%3Cpath fill='%23fff' d='M11.051 9.742c.622.093 1.226.319 1.668.672a.75.75 0 1 1-.937 1.172c-.184-.147-.517-.296-.95-.36a2.8 2.8 0 0 0-1.308.108a2.04 2.04 0 0 0-1.048.79C8.206 12.523 8 13.118 8 14s.206 1.477.476 1.876c.27.397.636.648 1.048.79c.42.143.883.17 1.308.108c.433-.065.766-.213.95-.36a.75.75 0 0 1 .937 1.172c-.442.353-1.046.58-1.668.672a4.3 4.3 0 0 1-2.013-.174a3.53 3.53 0 0 1-1.803-1.366c-.472-.695-.735-1.6-.735-2.718s.263-2.023.735-2.718a3.53 3.53 0 0 1 1.803-1.366a4.3 4.3 0 0 1 2.013-.174m10.167.672c-.442-.353-1.045-.58-1.667-.672a4.3 4.3 0 0 0-2.013.174c-.682.233-1.33.67-1.803 1.366c-.472.695-.735 1.6-.735 2.718s.263 2.023.735 2.718a3.53 3.53 0 0 0 1.803 1.366a4.3 4.3 0 0 0 2.013.174c.622-.092 1.226-.319 1.668-.672a.75.75 0 1 0-.937-1.172c-.183.147-.517.295-.95.36a2.8 2.8 0 0 1-1.308-.108a2.03 2.03 0 0 1-1.048-.79c-.27-.399-.476-.994-.476-1.876s.206-1.477.476-1.876c.27-.397.637-.648 1.049-.79c.419-.143.882-.17 1.306-.108c.434.064.768.213.95.36a.75.75 0 0 0 .938-1.172M2 8.25A4.25 4.25 0 0 1 6.25 4h15.5A4.25 4.25 0 0 1 26 8.25v11.5A4.25 4.25 0 0 1 21.75 24H6.25A4.25 4.25 0 0 1 2 19.75zM6.25 5.5A2.75 2.75 0 0 0 3.5 8.25v11.5a2.75 2.75 0 0 0 2.75 2.75h15.5a2.75 2.75 0 0 0 2.75-2.75V8.25a2.75 2.75 0 0 0-2.75-2.75z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;filter:brightness(0) invert(1)}.jw-svg-icon.jw-svg-icon-sharing{background-image:url(https://www.svgrepo.com/show/527441/share.svg);background-size:contain;background-repeat:no-repeat;filter:brightness(0) invert(1)}.jw-icon-pip .jw-svg-icon-pip-on{background-image:url(https://www.svgrepo.com/show/347273/picture-in-picture-2.svg);background-size:contain;background-repeat:no-repeat;filter:brightness(0) invert(1)}.jw-icon-pip .jw-svg-icon-pip-off{background-image:url(https://www.svgrepo.com/show/347275/picture-in-picture-exit.svg);background-size:contain;background-repeat:no-repeat;filter:brightness(0) invert(1)}.jw-svg-icon-pause{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cpath fill='%23fff' d='M169 200c-6.1 0-11-3.6-11.1-8V48c0-4.4 4.9-8 11.1-8s11.1 3.6 11.1 8v144c-.1 4.4-5 8-11.1 8zm-98 0c-6.1 0-11-3.6-11.1-8V48c0-4.4 5-8 11.1-8s11.1 3.6 11.1 8v144c0 4.4-5 8-11.1 8z' fill-rule='evenodd' clip-rule='evenodd'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat}.jw-svg-icon-volume-100{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M5.06 9.94A1.5 1.5 0 0 0 4 9.5H2a.5.5 0 0 1-.5-.5V7a.5.5 0 0 1 .5-.5h2a1.5 1.5 0 0 0 1.06-.44l2.483-2.482a.268.268 0 0 1 .457.19v8.464a.268.268 0 0 1-.457.19zM2 5h2l2.482-2.482A1.768 1.768 0 0 1 9.5 3.768v8.464a1.768 1.768 0 0 1-3.018 1.25L4 11H2a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2m12.162 8.103c-.265.319-.743.316-1.036.024c-.292-.293-.288-.766-.031-1.09A6.47 6.47 0 0 0 14.5 8a6.47 6.47 0 0 0-1.405-4.037c-.257-.324-.261-.797.031-1.09c.293-.292.771-.294 1.036.024A7.97 7.97 0 0 1 16 8c0 1.94-.69 3.718-1.838 5.103m-2.138-2.135c-.246.333-.726.33-1.019.037s-.284-.764-.06-1.113A3.5 3.5 0 0 0 11.5 8c0-.697-.204-1.347-.555-1.892c-.224-.348-.233-.82.06-1.113s.773-.296 1.02.037C12.637 5.862 13 6.89 13 8a4.98 4.98 0 0 1-.976 2.968' clip-rule='evenodd'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat}.jw-svg-icon-volume-50{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M5.06 9.94A1.5 1.5 0 0 0 4 9.5H2a.5.5 0 0 1-.5-.5V7a.5.5 0 0 1 .5-.5h2a1.5 1.5 0 0 0 1.06-.44l2.483-2.482a.268.268 0 0 1 .457.19v8.464a.268.268 0 0 1-.457.19zM2 5h2l2.482-2.482A1.768 1.768 0 0 1 9.5 3.768v8.464a1.768 1.768 0 0 1-3.018 1.25L4 11H2a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2m10.024 5.968c-.246.333-.726.33-1.019.037s-.284-.764-.06-1.113A3.5 3.5 0 0 0 11.5 8c0-.697-.204-1.347-.555-1.892c-.224-.348-.233-.82.06-1.113s.773-.296 1.02.037C12.637 5.862 13 6.89 13 8a4.98 4.98 0 0 1-.976 2.968' clip-rule='evenodd'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat}.jw-svg-icon-volume-0{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' fill-rule='evenodd' d='M5.06 9.94A1.5 1.5 0 0 0 4 9.5H2a.5.5 0 0 1-.5-.5V7a.5.5 0 0 1 .5-.5h2a1.5 1.5 0 0 0 1.06-.44l2.483-2.482a.268.268 0 0 1 .457.19v8.464a.268.268 0 0 1-.457.19zM2 5h2l2.482-2.482A1.768 1.768 0 0 1 9.5 3.768v8.464a1.768 1.768 0 0 1-3.018 1.25L4 11H2a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2m10.28.72a.75.75 0 1 0-1.06 1.06L12.44 8l-1.22 1.22a.75.75 0 1 0 1.06 1.06l1.22-1.22l1.22 1.22a.75.75 0 1 0 1.06-1.06L14.56 8l1.22-1.22a.75.75 0 0 0-1.06-1.06L13.5 6.94z' clip-rule='evenodd'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat}.jw-svg-icon-settings{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 15.5A3.5 3.5 0 0 1 8.5 12A3.5 3.5 0 0 1 12 8.5a3.5 3.5 0 0 1 3.5 3.5a3.5 3.5 0 0 1-3.5 3.5m7.43-2.53c.04-.32.07-.64.07-.97s-.03-.66-.07-1l2.11-1.63c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.31-.61-.22l-2.49 1c-.52-.39-1.06-.73-1.69-.98l-.37-2.65A.506.506 0 0 0 14 2h-4c-.25 0-.46.18-.5.42l-.37 2.65c-.63.25-1.17.59-1.69.98l-2.49-1c-.22-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64L4.57 11c-.04.34-.07.67-.07 1s.03.65.07.97l-2.11 1.66c-.19.15-.25.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1.01c.52.4 1.06.74 1.69.99l.37 2.65c.04.24.25.42.5.42h4c.25 0 .46-.18.5-.42l.37-2.65c.63-.26 1.17-.59 1.69-.99l2.49 1.01c.22.08.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;filter:brightness(0) invert(1)}.jw-svg-icon-fullscreen-on{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23fff' d='M18.5 5.5H16a1.5 1.5 0 0 1 0-3h3A2.5 2.5 0 0 1 21.5 5v3a1.5 1.5 0 0 1-3 0zM8 5.5H5.5V8a1.5 1.5 0 1 1-3 0V5A2.5 2.5 0 0 1 5 2.5h3a1.5 1.5 0 1 1 0 3m0 13H5.5V16a1.5 1.5 0 0 0-3 0v3A2.5 2.5 0 0 0 5 21.5h3a1.5 1.5 0 0 0 0-3m8 0h2.5V16a1.5 1.5 0 0 1 3 0v3a2.5 2.5 0 0 1-2.5 2.5h-3a1.5 1.5 0 0 1 0-3'/%3E%3C/g%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;filter:brightness(0) invert(1)}.jw-svg-icon-fullscreen-off{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23fff' d='M17.5 6.5H20a1.5 1.5 0 0 1 0 3h-3A2.5 2.5 0 0 1 14.5 7V4a1.5 1.5 0 0 1 3 0zM4 6.5h2.5V4a1.5 1.5 0 1 1 3 0v3A2.5 2.5 0 0 1 7 9.5H4a1.5 1.5 0 1 1 0-3m0 11h2.5V20a1.5 1.5 0 0 0 3 0v-3A2.5 2.5 0 0 0 7 14.5H4a1.5 1.5 0 0 0 0 3m16 0h-2.5V20a1.5 1.5 0 0 1-3 0v-3a2.5 2.5 0 0 1 2.5-2.5h3a1.5 1.5 0 0 1 0 3'/%3E%3C/g%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;filter:brightness(0) invert(1)}.jw-icon.jw-icon-inline.jw-button-color.jw-reset.jw-icon-rewind{background-size:23px;background-repeat:no-repeat;background-position:center}.jw-breakpoint-5 .jw-display .jw-svg-icon{width:100%!important;height:65px!important;margin-left:15px!important}.jw-controlbar .jw-button-container .jw-button-color:hover{filter:invert(0%) sepia(55%) saturate(3217%) hue-rotate(64deg) brightness(87%) contrast(103%)}.jw-slider-horizontal.jw-chapter-slider-time .jw-slider-container .jw-timesegment-progress{background:linear-gradient(-90deg,#1fc591,#23d41e 97%)}

/* Section Styling */
.section-spacing { margin: 40px auto; }
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 1px solid #333; padding-bottom: 10px; }
.section-title { font-size: 24px; font-weight: bold;border-left: 4px solid var(--color-primary);padding-left: 15px;}
.section-title.border-left { border-left: 4px solid var(--color-primary); padding-left: 15px; }
.section-header .header-left { display: grid; align-items: center; gap: 0; }

/* View Count Badge Style */
.view-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.1); /* ផ្ទៃថ្លាៗ */
    padding: 6px 12px;
    border-radius: 6px;
    color: #ccc;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,0.1);
    transition: 0.3s;
    cursor: default;
}

.view-count-badge:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    border-color: rgba(255,255,255,0.3);
}

.view-count-badge svg {
    fill: #e50914; /* ពណ៌ភ្នែកក្រហម (ដូច Netflix Theme) */
}

/* =========================================
   ANCHOR AD (GOOGLE STYLE)
   ========================================= */
#vexmov-anchor-ad {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transform: translateY(100%); /* លាក់សិនពេលចាប់ផ្តើម */
}

/* ពេល Active (បង្ហាញឡើងមក) */
#vexmov-anchor-ad.show-ad {
    transform: translateY(0);
}

/* ពេល Collapsed (បិទចុះក្រោមវិញ) */
#vexmov-anchor-ad.collapsed {
    transform: translateY(100%);
}

.anchor-ad-content {
    max-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 5px solid #fff;
    margin: 0 auto;
    max-width: fit-content;
    border-radius: 5px;
}

/* ប៊ូតុង Toggle (ព្រួញចុះឡើង) */
.anchor-toggle-btn {
    position: absolute;
    top: -24px; /* ឱ្យនៅពីលើប្រអប់ Ad */
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 24px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-bottom: none;
    border-radius: 8px 8px 0 0; /* មូលខាងលើ */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 -2px 5px rgba(0,0,0,0.05);
    z-index: 100000;
}

.anchor-toggle-btn svg {
    width: 20px;
    height: 20px;
    fill: #555;
    transition: transform 0.3s;
}

/* ពេលបិទ ត្រូវបង្វិលព្រួញឡើងលើ */
#vexmov-anchor-ad.collapsed .anchor-toggle-btn svg {
    transform: rotate(180deg);
}

/* =========================================
   POPUP AD (CENTER MODAL)
   ========================================= */
.vexmov-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85); /* ផ្ទៃខ្មៅស្រអាប់ */
    z-index: 200000; /* នៅលើគេបង្អស់ */
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.vexmov-popup-overlay.show-popup {
    opacity: 1;
    visibility: visible;
}

.vexmov-popup-box {
    position: relative;
    background: transparent; /* គ្មានផ្ទៃក្រោយ (បង្ហាញតែរូប) */
    max-width: 90%;
    max-height: 90%;
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.vexmov-popup-overlay.show-popup .vexmov-popup-box {
    transform: scale(1);
}

.vexmov-popup-content img {
    max-width: 500px; /* ទំហំរូបអតិបរមា */
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    display: block;
}

/* ប៊ូតុងបិទ (X) */
.vexmov-popup-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 34px;
    height: 34px;
    background: #e50914; /* ពណ៌ក្រហម */
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    transition: 0.2s;
}

.vexmov-popup-close:hover {
    transform: rotate(90deg);
}

/* =========================================
   FIXED: BANNER ADS (PERFECT WIDTH)
   ========================================= */
.main-content .vexmov-ad-spot {padding: 0 0 40px 0;}

.vexmov-ad-spot img, 
.vexmov-ad-spot a img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* =========================================
   EMPTY STATE DESIGN (NO MOVIES FOUND)
   ========================================= */

/* 1. ប្រអប់ធំ (Container) - អោយនៅកណ្តាល */
.empty-state-container {
    grid-column: 1 / -1; /* អោយវាពេញអេក្រង់ក្នុង Grid */
    display: flex;
    flex-direction: column;
    align-items: center;     /* តម្រឹមគម្លាតកណ្តាល (ឆ្វេង-ស្តាំ) */
    justify-content: center; /* តម្រឹមគម្លាតកណ្តាល (លើ-ក្រោម) */
    text-align: center;
    padding: 60px 20px;
    background: rgba(255, 255, 255, 0.03); /* ផ្ទៃខាងក្រោយពណ៌ប្រផេះស្រាលៗ */
    border-radius: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.1); /* គែមដាច់ៗ */
    margin: 20px 0;
    min-height: 350px; /* កម្ពស់អប្បបរមា */
}

/* 2. កែសម្រួល Icon (ដែលធំពេកក្នុងរូប) */
.empty-icon {
    width: 80px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.05); /* រង្វង់មូលស្រាលពីក្រោយ Icon */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.empty-icon svg {
    width: 40px; /* បង្រួមកុំអោយធំពេក */
    height: 40px;
    fill: #888; /* ពណ៌ Icon */
}

/* 3. កែសម្រួលចំណងជើង (H3) */
.empty-state-container h3 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px 0;
}

/* 4. កែសម្រួលអក្សរពន្យល់ (P) */
.empty-state-container p {
    font-size: 15px;
    color: #aaa; /* ពណ៌អក្សរស្រាល */
    max-width: 400px; /* កុំអោយអក្សរវែងពេក */
    line-height: 1.6;
    margin: 0 0 25px 0;
}

/* 5. កែសម្រួលប៊ូតុង Reset (អោយស្អាតដូចប៊ូតុង Filter) */
.btn-empty-reset {
    display: inline-block;
    background-color: var(--color-primary, #e50914); /* ពណ៌ក្រហម (ឬពណ៌គោលវេបសាយ) */
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px; /* មូលសងខាង */
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.3);
}

.btn-empty-reset:hover {
    background-color: #fff;
    color: #000;
    transform: translateY(-3px); /* អោយប៊ូតុងអណ្តែតឡើងលើតិចៗពេលដាក់ Mouse */
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}

/* =========================================
   EMPTY STATE DESIGN (NO MOVIES FOUND)
   ========================================= */

/* 1. ប្រអប់ធំ (Container) - អោយនៅកណ្តាល */
.empty-state-container {
    grid-column: 1 / -1; /* អោយវាពេញអេក្រង់ក្នុង Grid */
    display: flex;
    flex-direction: column;
    align-items: center;     /* តម្រឹមគម្លាតកណ្តាល (ឆ្វេង-ស្តាំ) */
    justify-content: center; /* តម្រឹមគម្លាតកណ្តាល (លើ-ក្រោម) */
    text-align: center;
    padding: 60px 20px;
    background: rgba(255, 255, 255, 0.03); /* ផ្ទៃខាងក្រោយពណ៌ប្រផេះស្រាលៗ */
    border-radius: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.1); /* គែមដាច់ៗ */
    margin: 20px 0;
    min-height: 350px; /* កម្ពស់អប្បបរមា */
}

/* 2. កែសម្រួល Icon (ដែលធំពេកក្នុងរូប) */
.empty-icon {
    width: 80px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.05); /* រង្វង់មូលស្រាលពីក្រោយ Icon */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.empty-icon svg {
    width: 40px; /* បង្រួមកុំអោយធំពេក */
    height: 40px;
    fill: #888; /* ពណ៌ Icon */
}

/* 3. កែសម្រួលចំណងជើង (H3) */
.empty-state-container h3 {
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px 0;
}

/* 4. កែសម្រួលអក្សរពន្យល់ (P) */
.empty-state-container p {
    font-size: 15px;
    color: #aaa; /* ពណ៌អក្សរស្រាល */
    max-width: 400px; /* កុំអោយអក្សរវែងពេក */
    line-height: 1.6;
    margin: 0 0 25px 0;
}

/* 5. កែសម្រួលប៊ូតុង Reset (អោយស្អាតដូចប៊ូតុង Filter) */
.btn-empty-reset {
    display: inline-block;
    background-color: var(--color-primary, #e50914); /* ពណ៌ក្រហម (ឬពណ៌គោលវេបសាយ) */
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px; /* មូលសងខាង */
    font-weight: 600;
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.3);
}

.btn-empty-reset:hover {
    background-color: #fff;
    color: #000;
    transform: translateY(-3px); /* អោយប៊ូតុងអណ្តែតឡើងលើតិចៗពេលដាក់ Mouse */
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
}