/* ============================================================
   MJ Most Read
   ============================================================ */
.mjmr-wrap { width: 100%; box-sizing: border-box; font-family: inherit; border: 1px solid #e5e7eb; border-radius: 10px; overflow: hidden; }

/* Header */
.mjmr-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background-color: #dc2626; }
.mjmr-header-icon { color: #fff; display: flex; align-items: center; }
.mjmr-section-title { margin: 0; font-size: 16px; font-weight: 700; color: #fff; }

/* Tabs nav */
.mjmr-tabs-nav { display: flex; border-bottom: 2px solid #e5e7eb; }
.mjmr-tab {
    flex: 1; padding: 10px; font-size: 13px; font-weight: 600;
    background: none; border: none; border-bottom: 2px solid transparent;
    cursor: pointer; color: #6b7280;
    margin-bottom: -2px;
    transition: color 0.2s, border-color 0.2s;
}
.mjmr-tab:hover { color: #111827; }
.mjmr-tab.mjmr-active { color: #dc2626; border-bottom-color: #dc2626; }

/* Panels */
.mjmr-panel { display: none !important; padding: 8px 0; }
.mjmr-panel.mjmr-panel-active { display: block !important; }

/* Item */
.mjmr-item { border-bottom: 1px solid #f3f4f6; }
.mjmr-item:last-child { border-bottom: none; }
.mjmr-no-border .mjmr-item { border-bottom: none !important; }

/* Link — flex row, image can be left or right */
.mjmr-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    text-decoration: none;
    color: inherit;
    transition: background 0.2s;
}
.mjmr-link:hover { background-color: #fafafa; }

/* Thumb RIGHT — thumb appears on the right (in RTL, order:2 = right) */
.mjmr-thumb-right .mjmr-thumb { order: 1; }
.mjmr-thumb-right .mjmr-content { order: 2; }

/* Thumb LEFT — thumb appears on the left (in RTL, order:1 = left) */
.mjmr-thumb-left .mjmr-thumb { order: 2; }
.mjmr-thumb-left .mjmr-content { order: 1; }

.mjmr-content { flex: 1; min-width: 0; }
.mjmr-title {
    margin: 0 0 5px; font-size: 13px; font-weight: 700; color: #111827;
    line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    transition: color 0.2s;
}
.mjmr-link:hover .mjmr-title { color: #dc2626; }

.mjmr-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mjmr-views, .mjmr-date { display: flex; align-items: center; gap: 4px; font-size: 11px; color: #6b7280; }
.mjmr-views { color: #dc2626; font-weight: 600; }

.mjmr-thumb { width: 72px; min-width: 72px; height: 54px; border-radius: 6px; overflow: hidden; background: #eee; flex-shrink: 0; }
.mjmr-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mjmr-empty { padding: 16px; font-size: 13px; color: #888; text-align: center; }

/* Responsive */
@media (max-width: 480px) {
    .mjmr-thumb { width: 60px; min-width: 60px; height: 45px; }
    .mjmr-title { font-size: 12px; }
    .mjmr-link { padding: 8px 10px; }
    .mjmr-tab { padding: 8px 6px; font-size: 12px; }
}