/*
Theme Name: RadioX
Author: Abamoo
Description: Modern Radio Station Theme for SEO and Speed.
Version: 1.0
*/
body { font-family: 'Tahoma', sans-serif; background: #0b0d0f; color: #fff; margin: 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
header {background: #16191b;padding: 0;border-bottom: 2px solid #3498db;}
footer {background: #16191b;padding: 0;mar;margin-top: 55px;text-align: center;}
.main-content { display: flex; gap: 30px; padding: 30px 0; }
article { flex: 3; }
aside {flex: 1;ba;background: #16191b00;dding: 0;border-radius: 10px;height: fit-content;}
h1, h2, h3 {color: #ffffff;}
a {color: #005dff;text-decoration: none;}
.entry-content { line-height: 1.6; color: #ccc; }



/* --- สไตล์สำหรับเมนู Emoji ที่ดึงมาจากฟังก์ชัน --- */
.menu-emoji {
    font-size: 15px;
    margin-right: 7px;
    line-height: 1;
    display: inline-block;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}


html, body {
    -webkit-overflow-scrolling: touch;
}


/* =========================================
   Base Reset 
   ========================================= */
body {
    margin: 0;
    padding: 0;
    background-color: #0f0f0f; 
    font-family: "Montserrat", sans-serif;
    color: #fff;
    min-height: 100vh;
    position: relative;
}

/* Full Page Blurred Background */
body::before {
    content: "";
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://radiox.top/wp-content/uploads/2026/03/38321.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(44px); 
    opacity: 0.4; 
    z-index: -1; 
    transform: scale(1.1); 
}

/* =========================================
   App Header Wrapper 
   ========================================= */
.app-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    height: 60px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    width: 100%;
    background: #000000;
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(204, 243, 255, 0) 90%);
}

.header-container {
    height: 100%;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: calc(1200px - 30px);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.menu-trigger {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.2s;
}

.menu-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
}

.app-logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
}

.logo-text {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.logo-badge {
    font-size: 10px;
    color: #aaa;
    align-self: flex-start;
    margin-top: 4px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.radio-page-header-archive {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #33333380;
    padding: 0 0 15px 0;
}

.icon-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
    position: relative;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* จุดแดงแจ้งเตือนบนกระดิ่ง */
.noti-dot {
    position: absolute; 
    top: 6px; 
    right: 8px; 
    width: 8px; 
    height: 8px;
    background: #fa243c; 
    border-radius: 50%; 
    box-shadow: 0 0 5px #fa243c;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-left: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 19px;
    color: #fff;
    cursor: pointer;
    border: 0px solid rgb(255 255 255 / 0%);
    text-decoration: none;
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    box-shadow: 0 4px 15px rgba(0, 114, 255, 0.4);
    line-height: 0px;
}

/* Navigation Menu Styling */
.header-nav { display: none; }
@media (min-width: 768px) {
    .header-nav { display: flex; margin: 0 20px; }
    .header-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; }
    .header-nav a {color: #ffffff;text-decoration: none;font-size: 12px;font-weight: 500;transition: color 0.2s;}
    .header-nav a:hover { color: #fff; }
}

/* =========================================
   Slide-out Drawer Menu
   ========================================= */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgb(0 0 0 / 80%);
    z-index: 9998;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.drawer-overlay.active { opacity: 1; pointer-events: auto; }

.side-drawer {
    position: fixed;
    top: 0;
    left: -220px;
    width: 220px;
    height: 100vh;
    z-index: 9999;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    border-right: 1px solid #22222247;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.5);
    background: #000000;
    background: linear-gradient(60deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 0%) 90%);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
}
.side-drawer.active { transform: translateX(220px); }

.drawer-header {height: 60px;display: flex;align-items: center;padding: 0 16px;border-bottom: 1px solid #22222252;}
.drawer-close-btn {background: none;border: none;color: #fff;font-size: 14px;cursor: pointer;padding: 8px;border-radius: 50%;margin-right: 12px;transition: 0.2s;display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;}
.drawer-close-btn:hover { background: rgba(255, 255, 255, 0.1); }
.drawer-content {padding: 0;overflow-y: auto;flex-grow: 1;}

.drawer-menu-list { list-style: none; padding: 0; margin: 0; }
.drawer-menu-list li { border-bottom: 1px solid rgba(255, 255, 255, 0.05); margin: 0; }
.drawer-menu-list li:last-child { border-bottom: none; }
.drawer-menu-list a {display: flex;align-items: center;padding: 16px 24px;color: #f1f1f1;text-decoration: none;font-size: 11px;font-weight: 500;transition: 0.3s;}
.drawer-menu-list a:hover, .drawer-menu-list .current-menu-item > a { background-color: rgba(255, 255, 255, 0.05); color: #00c6ff; padding-left: 32px; }

/* =========================================
   App-Style Search Layout
   ========================================= */
.live-search-container {width: 100%;margin: 18px auto 11px auto;padding: 0;box-sizing: border-box;display: flex;align-items: center;gap: 15px;max-width: calc(1200px - 30px);}
.live-search-wrapper {position: relative;flex-grow: 1;display: flex;align-items: center;background: rgb(0 0 0 / 41%);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);border: 1px solid rgb(255 255 255 / 8%);border-radius: 60px;padding: 2px 8px;overflow: hidden;transition: 0.3s;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);}
.live-search-wrapper:focus-within { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.2), 0 6px 20px rgba(0, 0, 0, 0.4); transform: translateY(-1px); }
.live-search-icon {padding: 0 10px;color: #f3f3f3;font-size: 14px;transition: 0.3s;}
.live-search-wrapper:focus-within .live-search-icon { color: #fff; }
.live-search-input {flex-grow: 1;background: transparent;border: none;color: #fff;padding: 10px 0;font-size: 12px;font-weight: 500;outline: none;font-family: inherit;}
.live-search-input::placeholder { color: #888; font-weight: 400; }
.live-search-loading { padding: 0 16px; display: none; color: #fff; font-size: 18px; animation: searchPulse 1s infinite alternate; }

.action-btn {flex-shrink: 0;color: #fff;border: none;padding: 0 20px;height: 35px;border-radius: 65px;font-size: 11px;font-weight: 600;cursor: pointer;display: flex;align-items: center;gap: 8px;transition: 0.2s;font-family: inherit;}
.action-btn:hover { transform: translateY(-2px); }
.ai-radio-btn {background: linear-gradient(135deg, #272626, #000000);box-shadow: 0 4px 15px rgb(0 0 0 / 40%);border: 1px solid #222222ad;}
.ai-radio-btn:hover { box-shadow: 0 6px 20px rgba(122, 0, 255, 0.6); }
.stat-btn {background: linear-gradient(135deg, #272626, #000000);box-shadow: 0 4px 15px rgb(0 0 0 / 40%);border: 1px solid #222222ad;}
.stat-btn:hover { box-shadow: 0 6px 20px rgba(0, 114, 255, 0.6); }

@keyframes searchPulse { 0% { opacity: 0.3; transform: scale(0.9); } 100% { opacity: 1; transform: scale(1.1); } }

/* =========================================
   Generic Fullscreen App Modal
   ========================================= */
.app-modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 999999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: 0.3s ease; }
.app-modal-overlay.active { opacity: 1; pointer-events: auto; }
.app-modal-content { background: rgba(30, 30, 30, 0.9); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; width: 90%; max-width: 800px; height: 80vh; max-height: 800px; position: relative; transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: 0 20px 50px rgba(0,0,0,0.5); display: flex; flex-direction: column; overflow: hidden; }
.app-modal-overlay.active .app-modal-content { transform: scale(1); }
.app-modal-header { padding: 20px 24px; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center; background: rgba(0,0,0,0.2); }
.app-modal-header h2 { margin: 0; font-size: 20px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 10px; }
.app-modal-close-btn { background: rgba(255,255,255,0.1); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.app-modal-close-btn:hover { background: rgba(255,255,255,0.2); }
.app-modal-body { padding: 24px; flex-grow: 1; overflow-y: auto; color: #ccc; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* =========================================
   Genre Pills Slider
   ========================================= */
.genre-slider-section {width: 100%;padding: 0 15px;max-width: calc(1200px - 30px);margin: 10px auto 10px auto;}
.genre-slider-header { max-width: 1200px; margin: 0 auto; padding: 0 16px 15px 16px; }
.genre-slider-header h2 {margin: 0;font-size: 12px;fon;font-weight: 600;color: #fff;}
.genre-slider-container {max-width: 1200px;margin: 0 auto;overflow-x: auto;scrollbar-width: none;-ms-overflow-style: none;cursor: grab;}
.genre-slider-container::-webkit-scrollbar { display: none; }
.genre-slider-container:active { cursor: grabbing; }
.genre-slider-track {display: inline-flex;gap: 8px;padding: 5px 0 5px 0;scroll-snap-type: x mandatory;}
.genre-pill {background: rgb(11 11 12 / 40%);border: 1px solid rgb(44 44 44 / 48%);color: #fff;padding: 8px 15px;border-radius: 30px;font-size: 11px;font-weight: 600;cursor: pointer;display: flex;align-items: center;gap: 8px;white-space: nowrap;transition: 0.2s;scroll-snap-align: start;user-select: none;}
.genre-pill:hover, .genre-pill.active {background: linear-gradient(135deg, #00c6ff, #0072ff);border-color: transparent;transform: unset;color: #fff;}

/* =========================================
   🌐 Bottom Sheet Modals (Language, Notifications, Stat, AI)
   ========================================= */
.bottom-sheet-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); z-index: 100000; backdrop-filter: blur(5px); opacity: 0; pointer-events: none; transition: 0.3s; }
.bottom-sheet-overlay.active { opacity: 1; pointer-events: auto; }

.bottom-sheet { position: fixed; bottom: -100%; left: 50%; transform: translateX(-50%); width: 100%; max-width: 1200px; height: 85vh; background: #1a1c1e; border-radius: 24px 24px 0 0; z-index: 100001; transition: bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1); display: flex; flex-direction: column; box-shadow: 0 -10px 40px rgba(0,0,0,0.6); }
.bottom-sheet.active { bottom: 0; }

.sheet-header { padding: 20px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.05); position: relative; }
.sheet-header h3 { margin: 0; color: #fff; font-size: 18px; font-weight: 700; }
.sheet-close { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; transition: 0.2s; }
.sheet-close:hover { background: #fa243c; }
.sheet-body { padding: 20px; overflow-y: auto; flex-grow: 1; }

/* Language Grid */
.lang-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 15px; }
.lang-item { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 16px; text-align: center; cursor: pointer; color: #fff; border: 1px solid transparent; transition: 0.2s; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lang-item:hover, .lang-item.active { background: rgba(255,255,255,0.1); border-color: #00c6ff; transform: translateY(-2px); }
.lang-item img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.lang-item span { font-size: 14px; font-weight: 600; }

/* Notification List */
.noti-list { display: flex; flex-direction: column; gap: 15px; }
.noti-item { display: flex; gap: 15px; background: rgba(255,255,255,0.03); padding: 15px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); text-decoration: none; transition: 0.2s; }
.noti-item:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); border-color: rgba(255,255,255,0.1); }
.noti-img { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; flex-shrink: 0; background: #000; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.noti-text { flex-grow: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.noti-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 11px; }
.noti-badge { padding: 4px 10px; border-radius: 20px; font-weight: 700; color: #fff; }
.badge-news { background: #fa243c; }
.badge-radio { background: #00c6ff; color: #000; }
.noti-date { color: #888; }
.noti-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.noti-excerpt { font-size: 12px; color: #aaa; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }

/* 📊 Stat Grid & Chart */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding-bottom: 25px; }
.stat-box { background: rgba(255,255,255,0.05); padding: 30px 20px; border-radius: 20px; text-align: center; border: 1px solid rgba(255,255,255,0.08); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: 0.3s; }
.stat-box:hover { background: rgba(255,255,255,0.08); transform: translateY(-5px); border-color: #00c6ff; }
.stat-box .stat-icon { font-size: 40px; margin-bottom: 15px; }
.stat-box .stat-num { font-size: 32px; font-weight: 900; color: #00c6ff; margin-bottom: 5px; line-height: 1; }
.stat-box .stat-label { font-size: 14px; color: #aaa; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }

.stat-chart-container { background: rgba(255,255,255,0.02); border-radius: 20px; padding: 25px; border: 1px solid rgba(255,255,255,0.05); position: relative; height: 300px; width: 100%; }
.stat-chart-title { color: #fff; margin-top: 0; margin-bottom: 20px; font-size: 16px; display: flex; align-items: center; gap: 10px; }

/* =========================================
   Global Fixes
   ========================================= */
.page-layout-container * {
    box-sizing: border-box; 
}

img.emoji {
    right: 0px;
    position: relative;
}

/* =========================================
   Main UI Structure
   ========================================= */
.page-layout-container {
    width: 100%;
    max-width: calc(1200px - 30px);
    padding: 0 15px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin: 15px auto 0px auto !important;
}

.radio-main-wrapper {
    width: calc(65% - 5px);
    min-width: 0;
    background-color: #12121245;
    border-radius: 15px;
    padding-bottom: 30px;
    box-shadow: 0 4px 10px rgb(0 0 0 / 32%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid #2d2b2a94;
}

.radio-sidebar-wrapper {
    width: calc(35% - 15px);
    min-width: 250px;
    position: sticky;
    top: 80px; 
}

/* Sidebar Styling */
.radio-sidebar-wrapper aside {/* background: #16191b; *//* padding: 25px; *//* border-radius: 15px; *//* box-shadow: 0 4px 10px rgba(0,0,0,0.5); *//* color: #fff; *//* min-height: 100px; */}
.radio-sidebar-wrapper .widget {/* margin-bottom: 30px; */}
.radio-sidebar-wrapper .widget-title { color: #3498db; margin-top: 0; border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 15px; }
.radio-sidebar-wrapper ul { list-style: none; padding: 0; margin: 0; }
.radio-sidebar-wrapper ul li { margin-bottom: 10px; border-bottom: 1px dashed #333; padding-bottom: 10px; }
.radio-sidebar-wrapper ul li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.radio-sidebar-wrapper a { color: #ccc; text-decoration: none; transition: 0.2s; }
.radio-sidebar-wrapper a:hover { color: #3498db; }

/* =========================================
   Header & View Toggle
   ========================================= */
.radio-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #33333380;
    padding: 20px 20px 15px 20px;
}

.radio-page-title {
    font-size: 12px;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.view-toggle-controls {
    display: flex;
    gap: 5px;
    background: #1a1c1e40;
    padding: 5px;
    border-radius: 50px;
    border: 1px solid #333;
}

.view-btn {
    background: transparent;
    color: #888;
    border: none;
    padding: 6px 12px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.view-btn:hover {
    color: #fff;
}

.view-btn.active {
    color: #fff;
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    box-shadow: 0 4px 15px rgba(0, 114, 255, 0.4);
}

/* =========================================
   🔥 Filter System (App-Like Buttons)
   ========================================= */
.radio-filter-section {
    background: #00000029;
    padding: 15px;
    border-bottom: 1px solid #3333335e;
    margin-bottom: 10px;
}

.radio-filter-form {
    display: flex;
    gap: 12px;
    align-items: stretch; /* ให้ปุ่มสูงเท่ากัน */
    flex-wrap: wrap; 
}

.filter-modal-trigger {
    flex: 1;
    min-width: 140px;
    background: #0b0b0b73; /* สีเทาเข้มแบบในรูป */
    border: 1px solid #ffffff14;
    color: #fff;
    padding: 5px 35px 5px 15px; /* เผื่อพื้นที่ด้านขวาให้ลูกศร */
    border-radius: 70px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-family: "Inter", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
    transition: all 0.2s ease;
}

.filter-modal-trigger:hover {
    background: #32363b;
    border-color: #555;
}

.btn-inner-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}

.btn-emoji {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
}

.btn-emoji img.emoji, .item-emoji img.emoji {
    width: 1em !important;
    height: 1em !important;
    vertical-align: -0.1em !important;
    margin: 0 !important;
}

.btn-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: inherit;
}

.radiox-grid-padding {
    padding: 15px;
}

.btn-arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: #888;
    pointer-events: none;
}

.radio-filter-btn {
    flex: 0 0 auto;
    background: #0041ff;
    color: #fff;
    border: none;
    padding: 0 25px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    box-shadow: 0 4px 15px rgba(0, 114, 255, 0.4);
}
.radio-filter-btn:hover { background: #2980b9; }

/* AJAX Loading State */
.radio-filter-btn.is-loading {
    pointer-events: none;
    opacity: 0.8;
}
.radio-filter-btn.is-loading .btn-search-icon {
    display: inline-block;
    animation: spin 1s linear infinite;
}
@keyframes spin { 100% { transform: rotate(360deg); } }

/* =========================================
   🔥 Bottom Sheet Modal CSS
   ========================================= */
.radiox-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 999998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.radiox-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.bottom-sheet {
    position: fixed;
    bottom: -100%;
    left: 50%;
    transform: translateX(-50%); 
    width: 100%;
    max-width: 1200px; 
    max-height: 85vh;
    background: #1a1c1e;
    border-radius: 20px 20px 0 0;
    z-index: 999999;
    transition: bottom 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 -10px 40px rgba(0,0,0,0.5);
}
.bottom-sheet.active {
    bottom: 0;
}

.sheet-drag-handle {
    width: 40px; height: 5px;
    background: #555;
    border-radius: 3px;
    margin: 15px auto 10px;
}

.sheet-header {
    padding: 0 20px 15px;
    border-bottom: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sheet-header h3 { margin: 0; color: #fff; font-size: 18px; }
.sheet-close-btn {
    background: transparent; border: none; color: #888; font-size: 24px; cursor: pointer;
}

.sheet-body {
    overflow-y: auto;
    padding: 0;
}

.sheet-list {
    list-style: none;
    margin: 0; padding: 0;
}
.sheet-list li {
    padding: 15px 20px;
    border-bottom: 1px solid #2a2d30;
    font-size: 16px;
    color: #ddd;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.2s;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important;
}
.sheet-list li:hover { background: #25282b; }
.sheet-list li.selected {
    background: rgba(52, 152, 219, 0.1);
    color: #3498db;
    font-weight: bold;
}

/* =========================================
   List Item Format & AJAX Transition
   ========================================= */
#ajax-content-wrapper {
    transition: opacity 0.3s ease;
}
#ajax-content-wrapper.is-loading {
    opacity: 0.4;
    pointer-events: none;
}

.radio-list-container {display: flex;flex-direction: column;gap: 10px;padding: 0 10px;}

.radio-list-item {
    display: flex;
    align-items: center;
    background-color: rgb(0 0 0 / 26%) !important;
    border-radius: 50px;
    padding: 10px;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: unset;
}

.radio-list-item::before { content: ''; position: absolute; top: -30px; left: -30px; right: -30px; bottom: -30px; background: var(--bg-gradient); filter: blur(25px); opacity: 0.25; z-index: -1; transition: opacity 0.3s ease; }
.radio-list-item:hover { transform: translateY(-3px); border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 10px 20px rgba(0,0,0,0.6); }
.radio-list-item:hover::before { opacity: 0.45; }

.radio-item-logo {width: 42px;height: 42px;border-radius: 72px;object-fit: cover;background-color: #333;flex-shrink: 0;margin-right: 15px;box-shadow: 0 2px 10px rgba(0,0,0,0.3);}
.radio-item-info {flex-grow: 1;overflow: hidden;width: 50%;}
.radio-item-title {font-size: 11px;font-weight: 600;margin: 0 0 6px 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;transition: color 0.3s;width: 70%;}
.radio-item-meta {font-size: 9px;color: #eeeeeeb0;margin-bottom: 5px;display: flex;gap: 10px;align-items: center;flex-wrap: wrap;margin-top: 5px;}
.radio-item-tags {display: none;flex-wrap: wrap;gap: 5px;}
.radio-tag-badge { background: #007aff; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 12px; font-weight: 500; white-space: nowrap; }

/* Action Buttons Container */
.radio-actions {display: flex;align-items: center;gap: 10px;flex-shrink: 0;margin-left: 15px;z-index: 2;position: relative;margin-right: 10px;margin-top: -2px;}
.radio-play-btn {width: 25px;height: 25px;border-radius: 50%;background-color: #ff0040;color: #ffffff;border: none;display: flex;align-items: center;justify-content: center;font-size: 36px;cursor: pointer;transition: transform 0.2s, background 0.2s;background: linear-gradient(135deg, #00c6ff, #0072ff);box-shadow: 0 4px 15px rgba(0, 114, 255, 0.4);}
.radio-play-btn:hover { transform: scale(1.1); background-color: #e60039; }
.radio-play-btn.is-playing { background-color: #00c853; animation: pulse-ring 1.5s infinite; }

/* Broken Station */
.radio-list-item.is-broken { opacity: 0.4; filter: grayscale(100%); border-color: #ff0040; background-color: rgba(20, 0, 0, 0.8) !important; }
.is-broken .radio-item-title { color: #888; }
.is-broken .radio-tag-badge { background: #444; }
.is-broken .radio-play-btn { background-color: #333; color: #666; }
.radio-list-item.animating-out { opacity: 0 !important; transform: scale(0.9) translateY(20px) !important; }

/* =========================================
   🔥 Grid View Format (3 Columns)
   ========================================= */
.radio-list-container.grid-view {display: grid;grid-template-columns: repeat(3, 1fr);gap: 15px;padding: 0 15px;}
.radio-list-container.grid-view .radio-list-item { flex-direction: column; align-items: center; text-align: center; padding: 25px 15px; height: 100%; }
.radio-list-container.grid-view .radio-item-logo {margin: 0 0 15px 0;width: 56px;heig;height: 56px;er-radius: 50%;box-shadow: 0 5px 15px rgba(0,0,0,0.5);}
.radio-list-container.grid-view .radio-item-info { width: 100%; display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
.radio-list-container.grid-view .radio-item-title {white-space: normal;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: 12px;}
.radio-list-container.grid-view .radio-item-meta { justify-content: center; }
.radio-list-container.grid-view .radio-item-tags { justify-content: center; }
.radio-list-container.grid-view .radio-actions { margin: auto 0 0 0; justify-content: center; }
.radio-list-container.grid-view .radio-play-btn {width: 32px;he;height: 32px;font-size: 22px;}

/* Global Escaped Effects Container */
.global-escape-effects { position: fixed; z-index: 99999; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.escape-sad-emoji { font-size: clamp(100px, 30vw, 360px); line-height: 1; opacity: 0; transform: scale(0); text-shadow: 0 10px 40px rgba(0,0,0,0.8); animation: emojiSadBurst 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
@keyframes emojiSadBurst { 0% { transform: scale(0); opacity: 0; } 15% { transform: scale(1.1); opacity: 1; } 25% { transform: scale(1); opacity: 1; } 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.5); opacity: 0; } }
.escape-particle { position: absolute; font-size: clamp(30px, 8vw, 80px); opacity: 0; animation: feteMove 1.5s ease-out forwards; }
@keyframes feteMove { 0% { transform: translate(0, 0) scale(0); opacity: 1; } 15% { transform: translate(0, 0) scale(1.2); opacity: 1; } 100% { transform: translate(var(--random-x), var(--random-y)) scale(1) rotate(var(--random-rot)); opacity: 0; } }

/* Pagination System */
.radio-pagination { margin-top: 40px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.radio-pagination .page-numbers {padding: 10px 16px;background: #0000002b;color: #fff;text-decoration: none;border-radius: 50px;transition: background 0.2s;font-weight: 600;border: 1px solid #33333354;font-size: 11px;}
.radio-pagination .page-numbers:hover { background: #333; }
.radio-pagination .current {background: #2a00ff;color: #fff;border-color: #00b0ff;background: linear-gradient(135deg, #00c6ff, #0072ff);box-shadow: 0 4px 15px rgba(0, 114, 255, 0.4);}

.radio-list-item {
    border-radius: 60px;
    border: 1px solid #ffffff12;
}

/* =========================================
   ✨ Modern Google-Style Footer ✨
   ========================================= */
.modern-footer {
    background-color: #2725249e;
    color: #e8eaed;
    padding: 48px 40px 30px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    border-top: 0px solid rgb(255 255 255 / 21%);
    margin-top: 30px;
    position: relative;
    z-index: 10;
    text-align: left !important;
    margin-bottom: -110px;
    background: #000000;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(204, 243, 255, 0) 90%);
}
.footer-container {
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    padding: 0 15px;
    max-width: calc(1200px - 30px);
}
.footer-left {
    flex: 1 1 350px;
    max-width: 450px;
    text-align: left !important;
}
.footer-title {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    letter-spacing: -0.5px;
    text-align: left !important;
}
.footer-desc {
    font-size: 11px;
    line-height: 1.6;
    color: #9aa0a6;
    text-align: left !important;
}
.footer-right {
    flex: 2 1 600px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px 40px;
}
.footer-column {
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.footer-link-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
    text-align: left !important;
}
.footer-link-item:hover h4 {
    text-decoration: underline;
}
.footer-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #202124;
}
.footer-text {
    text-align: left !important;
}
.footer-text h4 {
    margin: 0 0 4px 0;
    font-size: 13px;
    font-weight: 600;
    color: #e8eaed;
    text-align: left !important;
}
.footer-text p {
    margin: 0;
    font-size: 11px;
    color: #9aa0a6;
    line-height: 1.5;
    text-align: left !important;
}
.footer-bottom {
    max-width: 1200px;
    margin: 40px auto 0;
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.05);
    flex-wrap: wrap;
    gap: 20px;
}
.footer-bottom-left {
    display: flex;
    align-items: center;
    gap: 15px;
}
.footer-bottom-links a {
    color: #e8eaed;
    text-decoration: none;
    font-size: 11px;
    margin-left: 30px;
}
.footer-bottom-links a:hover {
    text-decoration: underline;
}
/* โลโก้สีเล็กๆ มุมซ้ายล่าง */
.footer-color-logo {
    display: flex;
    gap: 0;
}
.footer-color-logo span {
    display: inline-block;
    width: 8px;
    height: 14px;
}
@media (max-width: 768px) {
    .modern-footer { padding: 40px 20px 20px; }
    .footer-container { gap: 40px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .footer-bottom-links { margin-top: 10px; width: 100%; display: flex; justify-content: flex-end; }
    .footer-bottom-links a { margin-left: 24px; }
}

/* =========================================
   ✨ Modern App-Style Sticky Player ✨
   ========================================= */
.sticky-radio-player {
    position: fixed;
    bottom: 45px;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    max-width: 750px;
    box-sizing: border-box;
    background: rgb(22 22 24 / 12%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgb(255 255 255 / 7%);
    border-radius: 100px;
    padding: 8px 16px 8px 8px;
    display: none;
    align-items: center;
    justify-content: space-between;
    z-index: 99999;
    box-shadow: 0 15px 35px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
    color: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.sticky-radio-player.active { 
    display: flex; 
    animation: playerSlideUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; 
}

@keyframes playerSlideUp { 
    from { transform: translate(-50%, 150%); opacity: 0; } 
    to { transform: translate(-50%, 0); opacity: 1; } 
}

.player-info-wrap { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    flex: 1; 
    overflow: hidden; 
}

.player-logo {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    background-color: #222;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.05);
}

.player-text { 
    display: flex; 
    flex-direction: column; 
    overflow: hidden; 
}

.player-title {
    font-weight: 500;
    font-size: 11px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px;
    letter-spacing: 0.2px;
}

.player-status {
    font-size: 9px;
    color: #00e2ff !important;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* กลุ่มปุ่มควบคุม */
.player-controls {
    display: flex;
    align-items: center;
    gap: 3px;
    padding-left: 10px;
}

.player-main-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    border: none;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.2s ease;
    box-shadow: 0 4px 15px rgba(255,255,255,0.15);
    outline: none;
}

.player-main-btn:hover { 
    transform: scale(1.08); 
    background: #f0f0f0;
}

.player-main-btn:active { 
    transform: scale(0.95); 
}

.player-side-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.player-side-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

.player-side-btn:active {
    transform: scale(0.9);
}

/* 🔥 แถบเพิ่ม-ลดเสียง (Volume Slider) 🔥 */
.player-volume-wrap {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 15px;
    padding-left: 15px;
    border-left: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.7);
}

.player-volume-slider {
    -webkit-appearance: none;
    width: 80px;
    height: 4px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    transition: background 0.1s;
}

/* สำหรับตกแต่งหัวลาก (Thumb) ให้เป็นวงกลมสีขาว */
.player-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    transition: transform 0.1s;
}

.player-volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
}

.player-volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

@keyframes pulse-ring { 
    0% { box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.7); } 
    70% { box-shadow: 0 0 0 8px rgba(0, 200, 83, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(0, 200, 83, 0); } 
}

/* ซ่อน Google Translate */
.goog-te-banner-frame { display: none !important; }
body { top: 0 !important; }
#goog-gt-tt, .goog-tooltip, .goog-te-combo { display: none !important; }
.skiptranslate { display: none; }


::-webkit-scrollbar {
    width: 0px;
}
::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 0px;
}
::-webkit-scrollbar-track {
    background: transparent;
}

body {
    padding-bottom: 110px !important; 
}

.radiox-history-list {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 5px !important;
}
.radiox-history-list::-webkit-scrollbar { width: 4px; }
.radiox-history-list::-webkit-scrollbar-thumb { background: rgba(0, 198, 255, 0.5); border-radius: 4px; }

/* ==========================================
   RadioX Frontend Styles
========================================== */
.radio-item-title a {
    color: inherit;
    text-decoration: none;
}
.radio-item-meta .votes-highlight {
    color: #ff4b1f;
}
.radio-item-meta .offline-text {
    color: #ff0040;
    font-weight: bold;
    font-size: 11px;
}
.radio-item-actions-wrapper {
    position: absolute;
    right: 15px;
    bottom: 15px;
    display: flex;
    gap: 8px;
    align-items: center;
    z-index: 10;
}
.radio-play-btn-static {
    position: static;
    margin: 0;
}
.empty-search-result {
    text-align: center;
    padding: 40px;
    color: #888;
}

/* ==========================================
   Auto Station IMG Tool
========================================== */
.radiox-tool-wrap { font-family: sans-serif; }
.radiox-tool-wrap h1 { margin-bottom: 20px; }
.radiox-tool-box { background: #fff; padding: 20px; border-radius: 8px; border: 1px solid #ccd0d4; max-width: 800px; }
.radiox-tool-btn { font-size: 16px; padding: 10px 20px; height: auto; }
.radiox-mt-20 { margin-top: 20px; }
.radiox-mt-20 h3 { margin: 0 0 10px 0; }
.radiox-progress-container { width: 100%; background: #e1e1e1; border-radius: 4px; height: 25px; overflow: hidden; }
.radiox-progress-bar { background: #00c6ff; height: 100%; transition: width 0.3s; }
.radiox-status-text { font-weight: bold; color: #555; }
.radiox-log-textarea { width: 100%; height: 250px; background: #1e1e1e; color: #00ff00; font-family: monospace; padding: 10px; border-radius: 4px; }

/* ==========================================
   AI Auto News Config
========================================== */
.radiox-ai-box-blue { border-left: 4px solid #2271b1; }
.radiox-ai-box-green { border-left: 4px solid #00a32a; }
.radiox-ai-box-red { border-left: 4px solid #d63638; }
.radiox-auto-label { font-weight: 600; font-size: 14px; }
.radiox-mt-15 { margin-top: 15px; }
.radiox-status-header { text-align: center; padding: 10px 0; }
.radiox-status-header h3 { margin: 0; color: #646970; }
.radiox-cron-timer { font-size: 28px; font-weight: bold; color: #00a32a; font-family: monospace; margin: 10px 0; background: #f0f0f1; padding: 10px; border-radius: 5px; }
.radiox-cron-disabled { font-size: 16px; color: #d63638; margin: 20px 0; font-weight: bold; }
.radiox-hr-divider { border:0; border-top: 1px solid #f0f0f1; margin: 15px 0; }
.radiox-quota-text { margin:0; font-size: 14px; }
.radiox-quota-count { color:#d63638; font-weight:bold; }
.radiox-process-title { margin-top:0; font-weight: 600; }
.radiox-progress-wrapper { width: 100%; background-color: #f0f0f1; border-radius: 3px; height: 15px; overflow: hidden; margin-bottom: 10px; }
.radiox-progress-fill { height: 100%; background-color: #d63638; transition: width 0.4s ease; }
.radiox-log-console { background: #1e1e1e; color: #00ff00; padding: 15px; height: 250px; overflow-y: auto; font-family: Consolas, Monaco, monospace; font-size: 12px; line-height: 1.5; }

/* ==========================================
   Global Font Override
========================================== */
*, *::before, *::after, html, body, h1, h2, h3, h4, h5, h6, p, a, span, div, li, ul, button, input, select, textarea {
    font-family: "Montserrat", sans-serif !important;
}

/* ==========================================
   Now Playing Widget
========================================== */
.radiox-widget-container {background: #12121252;border-radius: 12px;overflow: hidden;color: #fff;box-shadow: 0 10px 30px rgba(0,0,0,0.5);border: 1px solid #22222285;}
.radiox-widget-header {background: #1e212500;padding: 15px;text-align: center;}
.radiox-widget-header h4 {margin: 0;font-size: 12px;font-weight: 600;color: #fff;letter-spacing: 0.5px;}
.radiox-hero-section { position: relative; background: #1a1a1a; }
.radiox-hero-bg-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.radiox-hero-bg { width: 100%; height: 100%; background-size: cover; background-position: center; filter: blur(15px); transform: scale(1.2); opacity: 0.4; transition: background-image 0.5s ease; }
.radiox-hero-bg-wrapper::after { content: ''; position: absolute; top:0; left:0; right:0; bottom:0; background: linear-gradient(to bottom, rgba(26,26,26,0.2) 0%, rgba(18,18,18,1) 100%); }
.radiox-hero-content { position: relative; z-index: 2; display: flex; align-items: center; padding: 25px 20px 15px 20px; gap: 15px; }
.radiox-np-cover {width: 90px;height: 90px;border-radius: 50px;object-fit: cover;box-shadow: 0 8px 20px rgba(0,0,0,0.6);background: #222;border: 0px solid rgba(255,255,255,0.1);transition: transform 0.3s ease;flex-shrink: 0;}
.radiox-np-cover:hover { transform: scale(1.05); }
.radiox-np-details { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; overflow: hidden; width: 100%; }
.radiox-np-song-wrapper { width: 100%; overflow: hidden; white-space: nowrap; position: relative; -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); }
.radiox-np-song {display: inline-block;font-size: 12px;fon;font-weight: 500;color: #fff;padding-left: 100%;animation: marqueeText 8s linear infinite;}
@keyframes marqueeText { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
.radiox-np-station {font-size: 11px;color: #00beff;background: rgb(0 177 255 / 9%);border: 1px solid rgb(0 129 255);padding: 4px 10px;border-radius: 20px;white-space: nowrap;font-weight: 600;display: inline-block;margin-top: 5px;}
.radiox-store-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 20px 20px 20px; position: relative; z-index: 2; }
.radiox-store-btn {background: #03A9F4;color: #fff !important;text-decoration: none;text-align: center;padding: 9px 0;border-radius: 50px;font-size: 10px;font-weight: 700;text-transform: uppercase;transition: background 0.2s;letter-spacing: 0.5px;background: linear-gradient(135deg, #00c6ff, #0072ff);box-shadow: 0 4px 15px rgba(0, 114, 255, 0.4);}
.radiox-store-btn:hover { background: #005bb5; color: #fff; }
.radiox-history-box {padding: 12px;background: #12121200;border-top: 1px solid #222;}
.radiox-history-title {font-size: 10px;co;color: #fbfbfb;text-transform: uppercase;letter-spacing: 1.5px;margin-bottom: 15px;font-weight: 700;}
.radiox-history-empty { font-size: 13px; color: #666; text-align:center; padding: 20px 0; }
.radiox-widget-container .radiox-history-list {list-style: none;padding: 0;margin: 0;display: flex;flex-direction: column;gap: 0px;}
.radiox-widget-container .radiox-history-item {display: flex;align-items: center;gap: 12px;padding: 10px;border-radius: 55px;background: #0607075c;border: 1px solid #2a2a2a00;transition: all 0.2s;cursor: pointer;}
.radiox-widget-container .radiox-history-item:hover { background: #222529; border-color: #3a3a3a; transform: translateY(-2px); }
.radiox-widget-container .radiox-history-cover {width: 42px;height: 42px;border-radius: 50px;object-fit: cover;box-shadow: 0 2px 8px rgba(0,0,0,0.3);}
.radiox-widget-container .radiox-history-text { flex-grow: 1; overflow: hidden; }
.radiox-widget-container .radiox-history-song {font-size: 11px;fo;font-weight: 600;color: #eee;margin: 0 0 8px 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 80%;}
.radiox-widget-container .radiox-history-time {font-size: 10px;color: #00e2ff !important;margin: 0;font-weight: 500;}

/* ==========================================
   Top Ranked Stations & Widget
========================================== */
.radiox-rank-container { display: flex; flex-direction: column; gap: 10px; }
.radiox-rank-item {position: relative;display: flex;align-items: center;gap: 12px;padding: 12px;background: #00000038;border-radius: 66px;border: 0px solid #2a2a2a;transition: all 0.2s;}
.radiox-rank-item:hover { background: #222529; border-color: #3498db; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.radiox-rank-number {font-size: 14px;font-weight: 900;width: 30px;text-align: center;display: none;}
.rank-gold {color: #ffd700;text-shadow: 0 0 10px rgba(255,215,0,0.5);font-size: 16px;display: none;}
.rank-silver { color: #c0c0c0; font-size: 16px; }
.rank-bronze { color: #cd7f32; font-size: 15px; }
.rank-normal { color: #666; }
.radiox-rank-cover {width: 42px;height: 42px;border-radius: 45px;object-fit: cover;box-shadow: 0 4px 10px rgba(0,0,0,0.3);background-color: #ffffff14;}
.radiox-rank-text { flex-grow: 1; overflow: hidden; }
.radiox-rank-title {font-size: 11px;font-weight: 600;color: #fff;margin: 0 0 10px 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.radiox-rank-votes {font-size: 10px;color: #00e2ff;font-weight: 400;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;width: 80%;}
.radiox-rank-play-btn {background: transparent;border: none;color: #007aff;font-size: 18px;padding: 0 5px;opacity: 0.5;transition: opacity 0.2s;cursor: pointer;display: flex;align-items: center;justify-content: center;display: none;}
.radiox-rank-play-btn::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; }
.radiox-rank-item:hover .radiox-rank-play-btn { opacity: 1; color: #00c853; }
.radiox-rank-play-btn.is-playing { opacity: 1; color: #00c853; }
.radiox-widget-dark-box {background: #12121269;border-radius: 16px;overflow: hidden;border: 1px solid #22222270;box-shadow: 0 10px 30px rgba(0,0,0,0.5);}
.radiox-widget-gradient-header {background: #1717193b;padding: 20px 15px 15px 15px;text-align: center;}
.radiox-widget-gradient-header h4 {margin: 0;font-size: 12px;fon;font-weight: 600;or: #fff;letter-spacing: 0.5px;}
.radiox-widget-body {padding: 12px;}

/* ==========================================
   Ultimate Top Chart
========================================== */
.page-layout-container * {box-sizing: border-box;}
.page-layout-container {/* max-width: 1200px; *//* width: 100%; *//* margin: 30px auto; *//* padding: 0 20px 100px 20px; *//* display: flex; *//* gap: 25px; *//* align-items: flex-start; */}
.radio-main-wrapper {/* width: calc(65% - 15px); *//* min-width: 0; *//* background-color: #121212; *//* border-radius: 15px; *//* padding-bottom: 0; *//* box-shadow: 0 4px 10px rgba(0,0,0,0.5); */}
.radio-sidebar-wrapper { width: calc(35% - 15px); min-width: 250px; position: sticky; top: 80px; }
.radio-sidebar-wrapper aside {background: #16191b00;padding: 0px;border-radius: 15px;box-shadow: unset;color: #fff;min-height: 100px;gap: 18px;display: flex;flex-direction: column;}
.radio-sidebar-wrapper .widget {margin-bottom: 0;}
.radio-sidebar-wrapper .widget-title { color: #3498db; margin-top: 0; border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 15px; font-size: 18px; }
.radio-sidebar-wrapper ul {/* list-style: none; *//* padding: 0; *//* margin: 0; */}
.radio-sidebar-wrapper ul li { margin-bottom: 10px; border-bottom: 1px dashed #333; padding-bottom: 10px; }
.radio-sidebar-wrapper ul li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.radio-sidebar-wrapper a { color: #ccc; text-decoration: none; transition: 0.2s; }
.radio-sidebar-wrapper a:hover { color: #3498db; }

.topchart-header { text-align: center; padding: 30px 20px 20px 20px; background: linear-gradient(135deg, #1a1c1e 0%, #000 100%); border-bottom: 1px solid rgba(255,255,255,0.05); border-radius: 12px 12px 0 0; }
.topchart-header h1 { margin: 0; font-size: 28px; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: 1px; }
.topchart-header p { color: #888; margin-top: 10px; font-size: 14px; margin-bottom: 20px; }
.radiox-tabs-wrapper { width: 100%; padding-bottom: 15px; }
.radiox-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 10px; }
.radiox-tab-btn { background: #222; color: #aaa; border: 2px solid transparent; padding: 8px 15px; border-radius: 30px; font-size: 12px; font-weight: bold; cursor: pointer; transition: all 0.3s; white-space: nowrap; }
.radiox-tab-btn:hover { background: #333; color: #fff; }
.radiox-tab-btn.active { background: #1a1c1e; color: #fff; border-color: #fa243c; box-shadow: 0 4px 15px rgba(250,36,60,0.3); }
.radiox-tab-btn[data-target="tab-deezer"].active, .radiox-tab-btn[data-target="tab-napster"].active, .radiox-tab-btn[data-target="tab-hiphop"].active { border-color: #9222ff; box-shadow: 0 4px 15px rgba(146,34,255,0.3); }
.radiox-tab-btn[data-target="tab-indie"].active { border-color: #ff5722; box-shadow: 0 4px 15px rgba(255,87,34,0.3); }
.radiox-tab-btn[data-target="tab-popvortex"].active { border-color: #00e5ff; box-shadow: 0 4px 15px rgba(0,229,255,0.3); }
/* ==========================================
   ซ่อน Scrollbar สำหรับประวัติการเล่นเพลง
========================================== */
.radiox-history-list {
    max-height: 303px; /* กำหนดความสูงสูงสุด (ปรับเพิ่มลดได้ตามต้องการ) */
    overflow-y: auto;  /* ให้เลื่อนขึ้นลงได้ */
    
    /* ซ่อน Scrollbar สำหรับ Firefox */
    scrollbar-width: none; 
    
    /* ซ่อน Scrollbar สำหรับ IE และ Edge รุ่นเก่า */
    -ms-overflow-style: none;
}

/* ซ่อน Scrollbar สำหรับ Chrome, Safari และ Edge รุ่นใหม่ */
.radiox-history-list::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}
.radiox-tab-content { display: none; flex-direction: column; gap: 12px; width: 100%; padding: 20px 20px 30px 20px; }
.radiox-tab-content.active { display: flex; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.chart-item { display: flex; align-items: center; background: #1a1c1e; border-radius: 12px; padding: 12px; border: 1px solid rgba(255,255,255,0.05); transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; position: relative; overflow: hidden; }
.chart-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.5); border-color: rgba(255,255,255,0.1); background: #222529; }
.chart-rank { font-size: 18px; font-weight: 900; width: 40px; text-align: center; flex-shrink: 0; }
.rank-1 { color: #ffd700; font-size: 24px; text-shadow: 0 0 10px rgba(255,215,0,0.6); }
.rank-2 { color: #c0c0c0; font-size: 22px; }
.rank-3 { color: #cd7f32; font-size: 20px; }
.chart-cover { width: 55px; height: 55px; border-radius: 8px; object-fit: cover; margin-right: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.4); flex-shrink: 0; background: #222; }
.chart-info { flex-grow: 1; overflow: hidden; }
.chart-title { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 4px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-artist { font-size: 12px; color: #aaa; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-play-btn { width: 40px; height: 40px; border-radius: 50%; background: #fa243c; color: #fff; border: none; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; flex-shrink: 0; margin-left: 15px; transition: transform 0.2s, background 0.2s; box-shadow: 0 4px 15px rgba(250, 36, 60, 0.4); }
.chart-play-btn:hover { transform: scale(1.1); background: #ff4055; }
.chart-play-btn.is-playing { background: #00c853 !important; box-shadow: 0 4px 15px rgba(0, 200, 83, 0.4) !important; animation: pulse-ring 1.5s infinite; }
#tab-deezer .chart-play-btn, #tab-napster .chart-play-btn, #tab-hiphop .chart-play-btn { background: #9222ff; box-shadow: 0 4px 15px rgba(146, 34, 255, 0.4); }
#tab-deezer .chart-play-btn:hover, #tab-napster .chart-play-btn:hover, #tab-hiphop .chart-play-btn:hover { background: #a84dff; }
#tab-indie .chart-play-btn { background: #ff5722; box-shadow: 0 4px 15px rgba(255, 87, 34, 0.4); }
#tab-indie .chart-play-btn:hover { background: #ff784e; }
.chart-no-preview { font-size:11px; color:#666; margin-left:10px; text-align:center; }
.chart-error-msg { text-align:center; color:#888; padding: 40px; }

/* ==========================================
   Favorite System
========================================== */
.radiox-like-btn {background: rgba(255,255,255,0.05);border: 1px solid rgba(255,255,255,0.1);width: 25px;heig;height: 25px;cursor: pointer;display: inline-flex;align-items: center;justify-content: center;font-size: 11px;transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);color: #fff;padding: 0;outline: none;-webkit-tap-highlight-color: transparent;border-radius: 50%;}
.radiox-like-btn:hover { background: rgba(255,255,255,0.15); transform: scale(1.1); }
.radiox-like-btn.is-liked { background: rgba(250, 36, 60, 0.15); border-color: rgba(250, 36, 60, 0.3); box-shadow: 0 4px 15px rgba(250, 36, 60, 0.3); }

.radiox-no-fav { text-align:center; padding: 60px 20px; color: #888; background: #1a1c1e; border-radius: 16px; border: 1px dashed rgba(255,255,255,0.1); }
.radiox-no-fav-icon { font-size: 48px; margin-bottom: 15px; }
.radiox-no-fav h3 { color:#fff; margin-bottom: 10px; }
.radiox-fav-container { display: flex; flex-direction: column; gap: 15px; }
.fav-item { display: flex; align-items: center; background: rgba(255,255,255,0.03); padding: 15px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.05); transition: 0.3s; }
.fav-item-link { flex-shrink: 0; text-decoration: none; }
.fav-item-img { width: 80px; height: 80px; border-radius: 12px; object-fit: cover; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
.fav-item-info { flex-grow: 1; padding: 0 15px; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.fav-item-badge-wrap { margin-bottom: 6px; }
.fav-item-badge { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 12px; }
.fav-item-title { margin: 0; font-size: 15px; color: #fff; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fav-item-title a { color: inherit; text-decoration: none; }
.fav-item-actions { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.fav-item-deleted { text-align:center; color:#888; }

.fav-play-btn { width: 44px; height: 44px; border-radius: 50%; background-color: #ff0040; color: #fff; border: none; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; transition: transform 0.2s, background 0.2s; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.fav-play-btn:hover { transform: scale(1.1); background-color: #e60039; }
.fav-play-btn.is-playing { background-color: #00c853; animation: fav-pulse-ring 1.5s infinite; }

@keyframes favPop { 0% { transform: scale(1); } 50% { transform: scale(1.4) rotate(-10deg); } 100% { transform: scale(1); } }
@keyframes fav-pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.7); } 70% { box-shadow: 0 0 0 8px rgba(0, 200, 83, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 200, 83, 0); } }
.fav-animating { animation: favPop 0.4s ease; }

.VIpgJd-ZVi9od-aZ2wEe-OiiCO.VIpgJd-ZVi9od-aZ2wEe-OiiCO-ti6hGc {
    display: none !important;
}

.lister-grid {
    border-radius: 55px !important;
    border: 1px solid #ffffff12 !important;
}






/* =========================================================
   Radio App Card (Grid View Only)
   ========================================================= */

/* กรอบหลักของการ์ด */
.radio-app-card {
    position: relative;
    width: 100%;
    height: 320px;
    border-radius: 24px;
    overflow: hidden;
    background-color: #1a1a1a;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease;
}
.radio-app-card:hover {
    transform: translateY(-5px);
}

/* พื้นหลังเบลอ */
.card-bg-blur {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    opacity: 0.1;
}
.card-bg-blur img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(30px) saturate(1.5); /* เร่งสีให้สว่างขึ้นและเบลอหนักๆ */
    transform: scale(1.3); /* ขยายรูปเพื่อลบขอบขาวจากการเบลอ */
}
.card-bg-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(30,30,30,0.3) 0%, rgba(15,15,15,0.95) 100%);
}

/* คอนเทนต์ด้านหน้า */
.card-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px 20px;
    box-sizing: border-box;
    text-align: center;
}

/* ไฟสถานะมุมขวาบน */
.status-dot {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.status-dot.online {
    background-color: #00ff40;
    box-shadow: 0 0 10px #00ff40;
}
.status-dot.offline {
    background-color: #ff0040;
    box-shadow: 0 0 10px #ff0040;
}

/* โลโก้สถานีแบบวงกลม */
.card-logo-wrap {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 20px;
    padding: 3px;
    background: linear-gradient(135deg, #ff00a0, #ff5e62); /* ขอบสีฟุ้งๆ รอบโลโก้ */
    box-shadow: 0 10px 20px rgba(0,0,0,0.5);
}
.card-logo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    background: #000;
}

/* ชื่อสถานี */
.card-title {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
}
.card-title a {
    color: #ffffff;
    text-decoration: none;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* ข้อมูลประเทศและบิตเรต */
.card-meta {
    display: flex;
    gap: 12px;
    font-size: 13px;
    color: #cccccc;
    margin-bottom: auto; /* ดันปุ่ม Action ลงไปชิดขอบล่าง */
}
.card-meta .votes-count {
    color: #ff4b1f; /* สีแดงสำหรับจำนวนไลก์ */
}

/* แถวปุ่มด้านล่าง */
.card-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

/* ปรับแต่งกรอบรอบปุ่ม Like ให้เหมือนแอป */
.btn-like-wrap {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 75, 31, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ปุ่ม Play สีฟ้าสว่าง */
.btn-play-circle {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background-color: #0088ff;
    color: #ffffff;
    border: none;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 4px; /* ขยับไอคอน Play ให้ดูอยู่กึ่งกลางสายตา */
    box-shadow: 0 4px 15px rgba(0, 136, 255, 0.5);
    transition: transform 0.2s, background-color 0.2s;
}
.btn-play-circle:hover {
    transform: scale(1.1);
    background-color: #00aaff;
}
.footer-black {
    max-width: 100%;
    width: 100%;
    height: 100px;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 33;
    background: #000000;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(204, 243, 255, 0) 100%);
}

/* คลุมกล่อง Pagination ให้อยู่ซ้าย-ขวาพอดีกัน */
.radio-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    margin-bottom: -12px;
    padding: 0 15px;
    gap: 10px;
}

/* สไตล์ปุ่มทั่วไป (ตอนที่กดได้) */
.btn-paginate {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    background-color: #2a2a2a; /* สีพื้นปุ่มเทาเข้ม */
    color: #ffffff; /* สีตัวหนังสือขาว */
    border-radius: 25px; /* ขอบมนแบบแอป */
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    border: 0px solid #3a3a3a;
    transition: all 0.2s ease;
    width: 48%;
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    box-shadow: 0 4px 15px rgba(0, 114, 255, 0.4);
}

/* เอฟเฟกต์ตอนเอานิ้วจิ้ม (เฉพาะปุ่มที่กดได้) */
a.btn-paginate:active {
    background-color: #444444;
    transform: scale(0.95); /* ยุบตัวลงนิดนึง */
}
span.btn-paginate.disabled {
     /* สีพื้นกลืนไปกับแบล็คกราวด์ */
     color: #555555; /* ตัวหนังสือสีเทาหม่นๆ */
     border: 1px solid #5151514a;
     cursor: not-allowed; /* เปลี่ยนเคอร์เซอร์เป็นรูปห้ามกด (สำหรับตอนเปิดในคอม) */
     transform: none; /* ห้ามยุบตัวเวลากด */
     background: unset;
     box-shadow: unset;
     background-color: #0e0c0c;
}
span.btn-search-icon {
    font-size: 13px !important;
    margin-left: -2px;
}

.footer-icon {
    font-size: 0 !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.footer-icon span, 
.footer-icon a {
    font-size: 14px !important;
    font-weight: bold;
}
/* =========================================
   RadioX Archive Styles (Modern Dark Theme)
   ========================================= */
.radiox-archive-wrapper {
    max-width: calc(1200px - 30px);
    margin: 40px auto 100px auto;
    padding: 0 15px;
    color: #fff;
}

/* ส่วนหัว (เต็มจอ) */
.radiox-archive-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 40px 20px;
    background: linear-gradient(135deg, rgba(30,30,30,1) 0%, rgba(15,15,15,1) 100%);
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.radiox-archive-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 10px 0;
    color: #fa243c; 
}

.radiox-archive-desc {
    color: #aaa;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* 🔥 เลย์เอาต์หลัก แบ่ง 2 คอลัมน์แบบกระจายชิดขอบ 🔥 */
.radiox-archive-layout {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    max-width: 100%;
    width: 100%;
}

/* 🔥 Class จากฝั่ง Index ที่คุณระบุมา 🔥 */
.radio-main-wrapper {
    /* width: calc(65% - 15px); */
    /* min-width: 0; */
    /* background-color: #121212; */
    /* border-radius: 15px; */
    /* padding-bottom: 30px; */
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); */
    /* padding-top: 30px; */
    /* padding-left: 20px; */
    /* padding-right: 20px; */
    /* box-sizing: border-box; */
}

/* 🔥 Class Sidebar ที่คุณระบุมา (แบบเกาะติดจอ) 🔥 */
.radio-sidebar-wrapper {
    width: calc(35% - 15px);
    min-width: 250px;
    position: sticky;
    top: 80px;
    box-sizing: border-box;
}

/* Grid สำหรับการ์ดบทความ */
.radiox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 15px;
}

.radiox-card {
    background: #05050659;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 0px solid rgba(255,255,255,0.05);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.radiox-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.6);
    border-color: rgba(250, 36, 60, 0.3); 
}

.radiox-card-link {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
}

.radiox-card-img {
    height: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.radiox-card-img::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 50%;
    background: linear-gradient(to top, rgba(26,26,26,1), transparent);
}

.radiox-card-cat {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #fa243c;
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.44px;
    text-transform: uppercase;
    z-index: 2;
    background: linear-gradient(135deg, #00c6ff, #0072ff);
    box-shadow: 0 4px 15px rgba(0, 114, 255, 0.4);
}

.radiox-card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.radiox-card-title {
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 10px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.radiox-card-meta {
    font-size: 10px;
    color: #00e2ff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 0;
}

.radiox-card-excerpt {
    font-size: 11px;
    color: #dedbdb;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: auto;
}

/* =========================================
   Pagination Styling
   ========================================= */
.radiox-pagination {
    margin-top: 40px;
    text-align: center;
    width: 100%;
}

.radiox-pagination .nav-links {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

.radiox-pagination .page-numbers {
    padding: 10px 16px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

.radiox-pagination .page-numbers:hover, 
.radiox-pagination .page-numbers.current {
    background: #fa243c;
    color: #fff;
    border-color: #fa243c;
}





















/* Mobile Responsive */
@media (max-width: 1200px) { .radio-list-container.grid-view { grid-template-columns: repeat(3, 1fr); } }


@media (max-width: 1080px) { 
		.radio-list-container.grid-view { grid-template-columns: repeat(2, 1fr); 
	}
	.header-container {
		max-width: 100%;
	}
	.live-search-container {
		padding: 0 15px;
		max-width: 100%;
	}
	.genre-slider-section {
		width: 100%;
		padding: 0 15px;
		margin: 10px auto 10px auto;
		max-width: calc(100% - 30px);
	}
	.page-layout-container {
		max-width: calc(100% - 30px);
	}
	.footer-left {
		display: none;
	}
	
	.modern-footer {
		margin-top: 0px;
	}

	
}

@media (max-width: 1024px) { 
	
	aside {
		display: none;
	}
	
	footer.modern-footer {
		display: none;
	}
	
}

@media (max-width: 960px) {

	.widget-1.widget {
		display: none;
	}

	.widget-2.widget {
		display: none;
	}
	
	.radio-sidebar-wrapper aside {
		display: none;
	}
	
    .page-layout-container { flex-direction: column; }
    .radio-main-wrapper { width: 100%; max-width: 100%; }
    .radio-sidebar-wrapper { width: 100%; max-width: 100%; position: relative; top: 0; }
    .radio-list-container.grid-view { grid-template-columns: repeat(3, 1fr); } 
    .page-layout-container { flex-direction: column; }
    .radio-main-wrapper, .radio-sidebar-wrapper { width: 100%; max-width: 100%; position: relative; top: 0; }
}

@media (max-width: 800px) {
}


@media (max-width: 768px) {

}

@media (max-width: 640px) {

}


@media (max-width: 540px) {
	.filter-modal-trigger {
		min-width: auto;
	}
	#btn_submit_search {
		width: 100%;
		line-height: 36px;
	}
}

@media (max-width: 480px) { 
	span.btn-text {
		display: none;
	}
	span.btn-arrow {
		display: none;
	}
	span.btn-inner-wrap {
		font-size: 13px;
	}

	.filter-modal-trigger {
		width: fit-content;
		padding: 0;
		min-width: fit-content;
		max-width: 36px;
		border: 0px solid #434243;
	}

	#btn_submit_search {
		width: 108px;
		line-height: 36px;
		float: right;
		position: absolute;
		right: 15px;
	}
	h1.radio-page-title {
		width: 50%;
		overflow: hidden;
		height: 16px;
	}
	.live-search-container {
		margin: 15px auto 0 auto;
	}
	span.ai-radio-btn-txt {
		display: none;
	}
	#aiRadioBtnTrigger {
		width: 35px;
		padding: 0 8px;
		text-align: center;
		height: 35px;
		font-size: 16px;
	}

	#statBtnTrigger {
		width: 35px;
		padding: 0 8px;
		text-align: center;
		height: 35px;
		font-size: 16px;
	}

	.live-search-container {
		gap: 8px;
	}
	.header-right {
		display: flex;
		align-items: center;
		gap: 0px;
	}
}

@media (max-width: 420px) { 

}

@media (max-width: 395px) { 

}

@media (max-width: 375px) { 

}

@media (max-width: 360px) { 

}