body{background-color:var(--gray-light);color:var(--text-dark);line-height:1.6;padding:0!important}.video-page-title{text-align:center;margin-bottom:15px;margin-top:20px}.video-page-title h1{font-size:1.8rem;margin-bottom:8px}.video-page-title p{color:var(--text-light);font-size:1rem}.video-filters{border-radius:8px;padding:15px 0;margin-bottom:20px}.video-categories{overflow-x:auto;padding-bottom:8px;-ms-overflow-style:none;scrollbar-width:none}.video-categories::-webkit-scrollbar{display:none}.video-category-list{display:flex;gap:10px;min-width:max-content}.video-category-btn{width:180px;height:80px;display:flex;justify-content:center;align-items:center;padding:6px 16px;background-color:var(--white);border:none;border-radius:20px;cursor:pointer;font-weight:500;font-size:16px;transition:var(--transition);white-space:nowrap;box-shadow:var(--shadow)}.video-category-btn:hover{background-color:var(--primary);color:var(--white)}.video-category-btn.active{background-color:var(--primary);color:var(--white)}.videos-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:30px}.video-card{background-color:var(--white);border-radius:8px;overflow:hidden;box-shadow:var(--shadow);transition:var(--transition);display:flex;flex-direction:column}.video-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgb(0 0 0 / .15)}.video-card.hidden{display:none}.video-thumbnail{position:relative;width:100%;padding-top:56.25%;background-color:#000;overflow:hidden;cursor:pointer}.video-thumbnail img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:var(--transition)}.video-card:hover .video-thumbnail img{transform:scale(1.05)}.video-duration{position:absolute;bottom:6px;right:6px;background-color:rgb(0 0 0 / .7);color:#fff;font-size:.75rem;padding:2px 5px;border-radius:3px;z-index:10}.video-play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;background-color:rgb(230 0 45 / .9);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.2rem;opacity:0;transition:var(--transition);z-index:10;cursor:pointer}.video-thumbnail:hover .video-play-btn{opacity:1}.video-info{padding:12px;flex:1;display:flex;flex-direction:column}.video-category{display:inline-block;font-size:.75rem;color:var(--primary);background-color:var(--primary-light);padding:2px 6px;border-radius:3px;margin-bottom:6px;width:fit-content}.video-title{font-weight:600;margin-bottom:8px;font-size:18px;flex:1;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}.video-meta{display:flex;justify-content:flex-start;font-size:.8rem;color:var(--text-light)}.video-modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgb(0 0 0 / .9);display:none;justify-content:center;align-items:center;z-index:1000;padding:10px}.video-modal.active{display:flex}.video-modal-content{position:relative;width:90%;max-width:1280px;height:80vh;background-color:#000;border-radius:8px;overflow:hidden;box-shadow:0 0 20px rgb(0 0 0 / .5)}.video-modal-header{padding:12px 15px;background-color:#1a1a1a;color:var(--white);display:flex;justify-content:space-between;align-items:center}.video-modal-title{font-size:1.1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;margin-right:15px}.video-close-modal{background:none;border:none;color:var(--white);font-size:1.4rem;cursor:pointer;width:36px;height:36px;display:flex;align-items:center;justify-content:center;transition:var(--transition);border-radius:50%}.video-close-modal:hover{background-color:rgb(255 255 255 / .1)}.video-modal-body{height:calc(100% - 50px);position:relative;padding:0;background-color:#000;display:flex;align-items:center;justify-content:center}.video-custom-player{width:100%;height:100%;position:relative}.video-player-video{width:100%;height:100%;object-fit:contain;background-color:#000}.video-player-controls{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgb(0 0 0 / .8));color:#fff;padding:10px;opacity:0;transition:opacity 0.3s ease}.video-custom-player:hover .video-player-controls{opacity:1}.video-progress-container{width:100%;height:4px;background-color:rgb(255 255 255 / .3);border-radius:2px;margin-bottom:8px;cursor:pointer}.video-progress-bar{height:100%;background-color:var(--primary);border-radius:2px;width:0%}.video-controls-row{display:flex;justify-content:space-between;align-items:center}.video-control-buttons{display:flex;gap:15px;align-items:center}.video-control-btn{background:none;border:none;color:#fff;font-size:1rem;cursor:pointer;transition:var(--transition)}.video-control-btn:hover{color:var(--primary)}.video-play-pause-btn{font-size:1.2rem}.video-time-display{font-size:.85rem;color:rgb(255 255 255 / .9)}.video-volume-control{display:flex;align-items:center;gap:8px}.video-volume-slider{width:60px;height:4px;background-color:rgb(255 255 255 / .3);border-radius:2px;outline:none;-webkit-appearance:none}.video-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;cursor:pointer}.video-fullscreen-btn{margin-left:auto}.video-pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:20px;flex-wrap:nowrap;padding:5px 0;overflow-x:auto;padding-bottom:10px;-ms-overflow-style:none;scrollbar-width:none}.video-pagination::-webkit-scrollbar{display:none}.video-pagination-btn{width:32px;height:32px;border-radius:50%;border:1px solid #ddd;background-color:var(--white);color:var(--text-dark);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--transition);flex-shrink:0;font-size:.9rem}.video-pagination-ellipsis{display:flex;align-items:center;justify-content:center;width:24px;height:32px;color:var(--text-light);flex-shrink:0;font-size:.9rem}.video-pagination-btn:hover:not(.disabled){border-color:var(--primary);color:var(--primary)}.video-pagination-btn.active{background-color:var(--primary);color:var(--white);border-color:var(--primary)}.video-pagination-btn.disabled{opacity:.5;cursor:not-allowed}@media (max-width:1024px){.videos-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:768px){.videos-grid{grid-template-columns:repeat(2,1fr);gap:15px}.video-page-title h1{font-size:1.5rem}.video-modal-content{height:70vh;width:95%}.video-pagination{gap:4px;margin-top:15px}.video-pagination-btn{width:38px;height:38px;font-size:.85rem}.video-pagination-ellipsis{width:20px;height:28px}.video-volume-control{display:none}}@media (max-width:480px){body{padding:10px}.video-page-title{margin-bottom:15px}.video-page-title p{font-size:.9rem}.videos-grid{gap:12px}.video-modal-title{font-size:.95rem}.video-control-buttons{gap:10px}}