.fij-vp-wrapper { display: flex; box-shadow: 0 5px 20px rgba(0,0,0,0.1); background: #fff; }
.fij-vp-player { flex: 2; position: relative; padding-bottom: 56.25%; /* 16:9 Aspect Ratio */ height: 0; background: #000; }
.fij-vp-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.fij-vp-list { flex: 1; overflow-y: auto; background: #f9f9f9; border-left: 1px solid #eee; }
.fij-vp-item { display: flex; padding: 15px; cursor: pointer; border-bottom: 1px solid #e5e5e5; transition: 0.3s; }
.fij-vp-item:hover, .fij-vp-item.active { background: #eee; }

.fij-vp-thumb { width: 80px; height: 45px; margin-right: 15px; flex-shrink: 0; overflow: hidden; border-radius: 4px; }
.fij-vp-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fij-vp-info { display: flex; flex-direction: column; justify-content: center; }
.fij-vp-title { margin: 0 0 5px; font-size: 14px; font-weight: 600; line-height: 1.3; color: #333; }
.fij-vp-duration { font-size: 12px; color: #777; }

/* Scrollbar Style */
.fij-vp-list::-webkit-scrollbar { width: 6px; }
.fij-vp-list::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }

/* Layout Bottom */
.layout-bottom { flex-direction: column; }
.layout-bottom .fij-vp-player { padding-bottom: 56.25%; flex: none; }
.layout-bottom .fij-vp-list { width: 100%; border-left: none; border-top: 1px solid #eee; }