/* CONTAINER & HEADER */
.vn-vib-wrapper { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; width: 100%; box-sizing: border-box; }
.vn-vib-wrapper * { box-sizing: border-box; }
.vn-vib-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; border-bottom: 2px solid #222; padding-bottom: 15px; position: relative; z-index: 99;}
.vn-vib-title-group { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; flex-grow: 1; }
.vn-vib-title { font-size: 28px; font-weight: 800; color: #111; margin: 0; text-transform: uppercase; line-height: 1; }

.vn-vib-more-link { font-size: 15px; font-weight: 600; color: #555; text-decoration: none; transition: 0.2s; margin-bottom: 2px;}
.vn-vib-more-link:hover { color: #d32f2f; }

/* 2 NÚT DROPDOWN: HASHTAG & GROUP */
.vn-vib-dropdowns-area { display: flex; gap: 10px; align-items: center; }
.vn-vib-drop-container { position: relative; }
.vn-vib-btn-trigger { 
    background: #fff; border: 1px solid #aaa; color: #222; 
    padding: 6px 16px; border-radius: 4px; font-size: 14px; font-weight: 600; 
    cursor: pointer; transition: 0.2s; outline: none; margin: 0;
}
.vn-vib-btn-trigger:hover, .vn-vib-btn-trigger.active { border-color: #111; background: #fafafa; }
.vn-vib-btn-trigger.has-filter { background: #e3f2fd; border-color: #304ffe; color: #304ffe; }

/* Bảng Popup Thả Xuống */
.vn-vib-dropdown-box { 
    display: none; position: absolute; top: 100%; left: 0; margin-top: 10px; 
    width: 320px; max-width: 90vw; background: #fff; border: 1px solid #ddd; 
    border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); padding: 15px; z-index: 99999;
}
.vn-vib-dropdown-box.is-open { display: block; animation: vnDropFade 0.2s ease; }
.vn-vib-drop-header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 15px; }
.vn-vib-drop-header h4 { margin: 0; font-size: 15px; font-weight: 700; color: #222; }
.vn-vib-drop-clear { color: #d32f2f; font-size: 12px; font-weight: 600; cursor: pointer; transition: 0.2s;}
.vn-vib-drop-clear:hover { text-decoration: underline; }

/* Tag / Group Filter Items (Clickable) */
.vn-vib-drop-body { display: flex; flex-wrap: wrap; gap: 8px; max-height: 250px; overflow-y: auto; }
.vn-vib-filter-item { 
    background: #f4f5f7; color: #555; font-size: 13px; font-weight: 500; 
    padding: 6px 12px; border-radius: 20px; cursor: pointer; transition: 0.2s; 
    border: 1px solid #eaeaea; user-select: none;
}
.vn-vib-filter-item:hover { background: #e3f2fd; color: #304ffe; border-color: #bbdefb; }
.vn-vib-filter-item.active { background: #304ffe; color: #fff; border-color: #304ffe; box-shadow: 0 4px 10px rgba(48,79,254,0.3); }

/* TABS CUỘN NGANG */
.vn-vib-tabs-container { position: relative; display: flex; align-items: center; margin-bottom: 30px; width: 100%; }
.vn-vib-tabs-bar { display: flex; align-items: center; gap: 6px; background: #fcfcfc; border: 1px solid #eaeaea; padding: 6px; border-radius: 50px; width: 100%; overflow-x: auto; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; box-shadow: 0 2px 10px rgba(0,0,0,0.02); cursor: grab; }
.vn-vib-tabs-bar::-webkit-scrollbar { display: none; }
.vn-vib-tabs-bar.active { cursor: grabbing; }

.vn-vib-tab-btn { display: inline-flex; align-items: center; gap: 8px; background: transparent; border: none; color: #666; padding: 10px 22px; border-radius: 40px; font-size: 15px; font-weight: 600; cursor: pointer; transition: 0.3s; white-space: nowrap; flex-shrink: 0; outline: none; margin: 0;}
.vn-vib-tab-btn svg { width: 16px; height: 16px; transition: 0.3s; flex-shrink: 0; }
.vn-vib-tab-btn.active { background: #d32f2f; color: #fff; box-shadow: 0 4px 10px rgba(211, 47, 47, 0.3); }
.vn-vib-tab-btn:hover:not(.active) { color: #111; background: #f0f0f0; }

.vn-vib-tab-arrow { display: none; align-items: center; justify-content: center; position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 100%; background: rgba(252,252,252,0.9); color: #444; font-size: 14px; cursor: pointer; z-index: 5; transition: 0.2s; user-select: none;}
.vn-vib-tab-arrow:hover { color: #d32f2f; background: #fff; }
.vn-vib-tab-arrow.prev { left: 0; border-top-left-radius: 50px; border-bottom-left-radius: 50px; background: linear-gradient(to right, #fcfcfc 60%, rgba(252,252,252,0)); justify-content: flex-start; padding-left: 12px; }
.vn-vib-tab-arrow.next { right: 0; border-top-right-radius: 50px; border-bottom-right-radius: 50px; background: linear-gradient(to left, #fcfcfc 60%, rgba(252,252,252,0)); justify-content: flex-end; padding-right: 12px; }
.vn-vib-tab-arrow.disabled { opacity: 0; pointer-events: none; }

/* LƯỚI BÀI VIẾT */
.vn-vib-content { position: relative; min-height: 200px; width: 100%; }
.vn-vib-loader { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.8); z-index: 10; display: flex; align-items: center; justify-content: center; }
.vn-vib-spinner { width: 40px; height: 40px; border: 4px solid #ddd; border-top: 4px solid #d32f2f; border-radius: 50%; animation: vib-spin 1s linear infinite; }
@keyframes vib-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.vn-vib-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; width: 100%; }
.vn-vib-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: 0.3s; height: 100%; }
.vn-vib-card:hover { transform: translateY(-4px); box-shadow: 0 12px 25px rgba(0,0,0,0.08); }
.vn-vib-card-thumb { display: block; width: 100%; height: 200px; overflow: hidden; }
.vn-vib-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.vn-vib-card:hover .vn-vib-card-thumb img { transform: scale(1.05); }
.vn-vib-card-body { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; justify-content: space-between; }
.vn-vib-card-title { font-size: 16px; font-weight: 700; line-height: 1.4; margin: 0 0 15px 0; }
.vn-vib-card-title a { color: #222; text-decoration: none; transition: 0.2s; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.vn-vib-card-title a:hover { color: #d32f2f; }
.vn-vib-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: #888; font-weight: 500; border-top: 1px solid #f5f5f5; padding-top: 12px; }
.vn-vib-views { display: inline-flex; align-items: center; gap: 5px; }
.vn-vib-views svg { width: 14px; height: 14px; margin-top: -1px; }

.vn-vib-empty { grid-column: 1/-1; text-align: center; padding: 40px; color: #888; font-size: 16px; background: #fff; border-radius: 12px; border: 1px solid #eee; }

/* Giao diện Tab Cha - Con bên trong Popup Hashtags */
.vn-vib-drop-tabs { display: flex; gap: 15px; border-bottom: 1px solid #eee; margin-bottom: 15px; padding-bottom: 5px; flex-wrap: wrap;}
.vn-vib-dtab-btn { font-size: 14px; font-weight: 600; color: #888; cursor: pointer; padding-bottom: 5px; border-bottom: 2px solid transparent; transition: 0.2s; user-select: none;}
.vn-vib-dtab-btn.active { color: #304ffe; border-color: #304ffe; }

.vn-vib-dtab-content { display: none; flex-wrap: wrap; gap: 8px; max-height: 250px; overflow-y: auto;}
.vn-vib-dtab-content.active { display: flex; }

/* RESPONSIVE */
@media (max-width: 992px) { .vn-vib-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
    .vn-vib-header { flex-direction: column; align-items: flex-start; gap: 15px; }
    .vn-vib-tabs-bar { border-radius: 10px; padding: 8px; }
    .vn-vib-tab-btn { padding: 8px 16px; font-size: 14px; }
    .vn-vib-tab-arrow.prev { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
    .vn-vib-tab-arrow.next { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
}
@media (max-width: 480px) { .vn-vib-grid { grid-template-columns: 1fr; } }

/* =========================================
   FIX POPUP TRÀN MÀN HÌNH TRÊN MOBILE
   ========================================= */
@media (max-width: 768px) {
    /* Gỡ bỏ định vị gắn chặt vào nút bấm */
    .vn-vib-drop-container { 
        position: static !important; 
    }
    
    /* Ép Popup canh theo khung lớn (vn-vib-header), bung 100% chiều ngang và tự căn giữa */
    .vn-vib-dropdown-box {
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 10px !important;
        box-sizing: border-box !important;
    }
}

/* =========================================
   NÚT READ MORE RESPONSIVE BẰNG CSS
   ========================================= */
/* Mặc định trên máy tính: Ẩn nút ở đáy */
.vn-vib-mobile-more-wrap { display: none; text-align: center; margin-top: 25px; width: 100%; }

/* Style cho nút Read More ở đáy Mobile */
.vn-vib-more-link-bottom { 
    display: inline-block; padding: 12px 30px; 
    background: #fff; border: 1px solid #aaa; color: #222; 
    font-size: 14px; font-weight: 700; border-radius: 40px; 
    text-decoration: none; transition: 0.3s; 
}
.vn-vib-more-link-bottom:hover { background: #f0f0f0; border-color: #222; }

@media (max-width: 768px) {
    /* Trên Mobile: Ẩn nút ở Header, Hiện nút ở đáy */
    .vn-vib-more-link.vn-vib-desktop-more { display: none !important; }
    .vn-vib-mobile-more-wrap { display: block !important; }
}