.myyt-video-player-wrapper{font-family:"Share Tech",sans-serif;display:grid;place-items:center}
.video-player{border-radius:0.5rem;box-sizing:border-box;width:100%}
.controls{display:flex;gap:0.5rem;margin-bottom:1rem;flex-wrap:wrap;align-items:center}
#youtube-links-input{width:100%;height:100px;padding:0.5rem;border:1px solid #ddd;border-radius:0.25rem;font-size:1rem;margin-bottom:1rem;box-sizing:border-box}
.controls button{padding:8px 10px;border:none;border-radius:0.25rem;background-color:#007bff;color:white;cursor:pointer;transition:background-color 0.2s;font-size:0.8rem;margin-right:0}
.controls button:hover{background-color:#0056b3}
.controls button:disabled{background-color:#ccc;cursor:not-allowed}
#youtube-video-container{width:100%;aspect-ratio:16 / 9;margin-bottom:1rem;background-color:#000;display:none!important}
.video-placeholder{display:none}
.slider-container{display:flex;align-items:center;gap:0.5rem}
.slider-container label{white-space:nowrap;margin-bottom:0}
input[type="range"]{flex:1;cursor:pointer;min-width:50px}
select{padding:0.5rem;border:1px solid #ddd;border-radius:0.25rem;cursor:pointer;flex-grow:1}
.playlist{max-height:125px;overflow-y:auto;border:1px solid #ddd;border-radius:0.25rem;margin-top:1rem}
.playlist-item{display:flex;align-items:center;padding:0.5rem;cursor:pointer;transition:background-color 0.2s;border-bottom:1px solid #eee;font-size:0.9rem}
.playlist-item:last-child{border-bottom:none}
.playlist-item:hover{background-color:#f0f0f0}
.playlist-item.active{background-color:#cccccc;color:#333;font-weight:600}
.error{color:#dc3545;font-weight:bold}
#video-title{font-size:1rem;margin:0.5rem 0;color:#333;font-weight:bold;min-height:1.2em}
.playlist-item img{width:25px;height:25px;margin-right:10px;object-fit:cover;border-radius:999px}
.slider-container.seek input,.slider-container.volume input{margin-bottom:0}
.box-main-play{background:#e0e0e0;padding:10px;margin-bottom:20px;border-radius:5px}
.slide-ctr{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;border-radius:5px}
.slider-container.seek{width:calc(100% - 20px)}
small.playlist-item-type{display:none}
div#media-title{color:#333;font-weight:600;padding-left:3px}
select#playback-rate{border-radius:5px}
.tua-nhanhcham button{font-size:0.8rem;background:#3F51B5;padding:2px 5px 2px 5px;;text-transform:lowercase}
.video-placeholder-generated{z-index:-999!important}
label img{width:30px;height:auto;margin-bottom:3px}
#seek-slider{-webkit-appearance:none;appearance:none;width:100%;height:8px;background:linear-gradient(to right,#007bff,#b53f3f);border-radius:5px;outline:none;margin-top:2px}
#seek-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;cursor:pointer}
#seek-slider::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;cursor:pointer}
#volume-slider{-webkit-appearance:slider-vertical;appearance:slider-vertical;width:5px;height:80px;position:absolute;bottom:calc(100% - 35px);right:10px;display:none;z-index:10;writing-mode:bt-lr;padding:0}
.slider-container.seek input{padding:0}
#volume-slider.active{display:block;/* Hiện thanh trượt khi có class 'active' */}
/* Tùy chỉnh nút kéo (thumb) cho thanh trượt âm lượng */
#volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;/* Độ rộng của nút kéo */
	height:20px;/* Độ cao của nút kéo */
	background:#007bff;/* Màu nút kéo */
	border-radius:50%;/* Làm nút kéo hình tròn */
	cursor:pointer;border:2px solid #fff;/* Viền trắng cho nút kéo */
	margin-top:-1px;/* Điều chỉnh vị trí nếu cần do border */}
#volume-slider::-moz-range-thumb{width:18px;/* Firefox có thể cần kích thước hơi khác */
	height:18px;background:#007bff;border-radius:50%;cursor:pointer;border:2px solid #fff}
/*@media screen and (max-width:576px){.slide-ctr{display:block}}
*/

/* CSS cho icon loading trên seek slider */
.slider-container.seek{position:relative;/* Bắt buộc để định vị loader bên trong */}
.seek-slider-loader{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.3);/* Lớp phủ mờ */
    display:none;/* Ẩn theo mặc định */
    justify-content:center;align-items:center;z-index:5;/* Đảm bảo nó nằm trên thanh trượt */
    pointer-events:none;/* Cho phép click xuyên qua */}
/* Kích hoạt hiển thị loader khi container có class 'loading' */
.slider-container.seek.loading .seek-slider-loader{display:flex}
.loader-spinner{border:3px solid #f3f3f3;/* Màu xám nhạt */
    border-top:3px solid #3498db;/* Màu xanh */
    border-radius:50%;width:30px;height:30px;animation:spin 1s linear infinite}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}