/* Buffer Control Panel */ .buffer-control-panel { background: var(--panel-bg); border: 1px solid var(--border-color); border-radius: 16px; padding: 18px 24px; display: flex; flex-direction: column; gap: 14px; } .buffer-header { display: flex; justify-content: space-between; align-items: center; } .buffer-header h3 { font-size: 14px; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; gap: 8px; } .buffer-status { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); } .buffer-bar-bg { width: 100px; height: 6px; background: rgba(255, 255, 255, 0.06); border-radius: 4px; overflow: hidden; } .buffer-bar-fill { height: 100%; background: var(--primary-glow); border-radius: 4px; transition: width 0.5s ease; box-shadow: 0 0 6px rgba(16, 185, 129, 0.4); } .buffer-presets { display: flex; gap: 8px; flex-wrap: wrap; } .buffer-preset-btn { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-color); color: var(--text-muted); padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 700; transition: all 0.2s ease; } .buffer-preset-btn:hover { border-color: var(--text-muted); color: var(--text-color); } .buffer-preset-btn.active { background: var(--primary-glow); border-color: var(--primary-glow); color: #000; box-shadow: 0 0 8px rgba(16, 185, 129, 0.3); } .buffer-slider-row { display: flex; align-items: center; gap: 14px; } .buffer-slider-row input[type="range"] { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 4px; outline: none; } .buffer-slider-row input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: var(--primary-glow); border-radius: 50%; cursor: pointer; box-shadow: 0 0 8px rgba(16, 185, 129, 0.4); } .buffer-slider-row input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; background: var(--primary-glow); border-radius: 50%; cursor: pointer; border: none; } .buffer-value-label { font-size: 14px; font-weight: 800; color: var(--primary-glow); min-width: 45px; text-align: right; } .buffer-hint { font-size: 11px; color: var(--text-muted); font-style: italic; }
Độ phân giải: 480p (Nam Sudan)
⚖️ Trễ 15s so với sóng trực tiếp. Cân bằng giữa độ mượt và thời gian thực.