body{margin:0;background:transparent;color:#eee;font-family:Arial,Helvetica,sans-serif; overflow: hidden;}
	  header{display: none !important;}
	  #wrap{display:-webkit-flex;display:flex;height:100vh; background: #04101a; position: relative; overflow: hidden;}
	  
	  #left{
		  width:100%;
		  display: -webkit-flex; 
		  display: flex; 
		  -webkit-flex-direction: column;
		  flex-direction: column;
		  -webkit-transition: width 0.35s ease-in-out;
		  transition: width 0.35s ease-in-out;
	  }
	#right {
		width: 48%; 
		background: transparent !important;
		position: fixed;
		top: 0;
		right: 0;
		height: 100%;
		opacity: 0; /* Ẩn panel đi */
		pointer-events: none; /* Vô hiệu hóa tương tác chuột */
		-webkit-transform: scale(0.95); /* Thu nhỏ panel một chút */
		transform: scale(0.95);
		-webkit-transition: -webkit-transform 0.25s ease-out, opacity 0.25s ease-out; /* Thêm hiệu ứng cho opacity */
		transition: transform 0.25s ease-out, opacity 0.25s ease-out;
		border: none !important;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
		z-index: 100;
		box-sizing: border-box;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		padding: 0;
	}

	#wrap.details-visible #right {
		opacity: 1; /* Hiện panel lên */
		pointer-events: auto; /* Kích hoạt lại tương tác chuột */
		-webkit-transform: scale(1); /* Phóng to về kích thước ban đầu */
		transform: scale(1);
		border: none !important;
		-webkit-box-shadow: none !important;
		box-shadow: none !important;
	}

	#detail-container {
		position: relative;
		z-index: 4;
		background: transparent;
		padding: 0 120px 0 20px; /* Thêm padding trái/phải */
		box-sizing: border-box;  /* Đảm bảo padding không làm thay đổi chiều rộng tổng thể */
	}

	#streams {
		position: relative;
		z-index: 4;
		background: transparent;
	}

	#streams {
		border-radius: 4px;
		margin: 170px 40px;
	}
	#settings-panel {
		width: 30%;
		background: #08141a;
		position: fixed;
		top: 0;
		right: 0;
		height: 100%;
		-webkit-transform: translateX(100%);
		transform: translateX(100%);
		-webkit-transition: transform 0.35s ease-in-out;
		transition: transform 0.35s ease-in-out;
		z-index: 101;
		box-sizing: border-box;
		-webkit-box-shadow: -10px 0 25px rgba(0,0,0,0);
		box-shadow: -10px 0 25px rgba(0,0,0,0);
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column;
		padding: 0;
	}

	#wrap.settings-visible #settings-panel {
		-webkit-transform: translateX(0);
		transform: translateX(0);
		-webkit-box-shadow: -10px 0 25px rgba(0,0,0,1);
		box-shadow: -10px 0 25px rgba(0,0,0,1);
	}

	.settings-header {
		padding: 20px;
		background: #04101a;
		border-bottom: 1px solid #163042;
		-webkit-flex-shrink: 0;
		flex-shrink: 0;
	}
	.settings-header h3 {
		margin: 0;
		font-size: 24px;
		color: #eee;
	}
	.settings-content {
		padding: 20px;
		-webkit-flex-grow: 1;
		flex-grow: 1;
		overflow-y: auto;
	}
	.settings-content::-webkit-scrollbar {
		display: none;
	}

	.btn-setting {
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		width: 100%;
		padding: 15px;
		margin-bottom: 10px;
		background: #0e1a22;
		border: 4px solid transparent;
		color: #ccc;
		font-size: 18px;
		text-align: left;
		cursor: pointer;
		outline: none;
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}
	.btn-setting.focus {
		outline: none !important;
		border-color: #14f195 !important;
		background: #18252e;
		color: #fff;
	}
	.btn-setting svg {
		width: 24px;
		height: 24px;
		fill: currentColor;
		margin-right: 15px;
		-webkit-flex-shrink: 0;
		flex-shrink: 0;
	}
	  #wrap.details-visible #right {
		  -webkit-transform: translateX(0);
		  transform: translateX(0);
	  }
	.settings-section {
		margin-bottom: 25px;
	}

	.section-header {
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		-webkit-align-items: center;
		align-items: center;
		margin-bottom: 15px;
		padding-bottom: 10px;
	}

	.section-header h4 {
		margin: 0;
		font-size: 20px;
		color: #ccc;
	}

	.btn-header-action {
		width: 44px;
		height: 44px;
		padding: 0;
		margin: 0;
		background: transparent;
		color: #ccc;
		border: none;
		outline: none;
		cursor: pointer;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: center;
		justify-content: center;
		-webkit-flex-shrink: 0;
		flex-shrink: 0;
	}
	
	.btn-header-action.focus {
		background: #182e2e;
		color: #fff;
	}

	.btn-header-action svg {
		width: 24px;
		height: 24px;
		fill: currentColor;
	}

	.section-content input {
		width: 100%;
		padding: 12px;
		font-size: 16px;
		background: #04101a;
		color: #eee;
		border: none;
		outline: none;
		box-sizing: border-box;
		margin-bottom: 10px;
	}
	.section-content input:last-child {
		margin-bottom: 0;
	}

	.section-content input.focus {
		background-color: #182e2e; 
	}
	
	.settings-divider {
		height: 1px;
		background: #163042;
		margin: 15px 0 25px 0;
	}

	#btnSaveSettings {
		justify-content: center;
		background-color: #1f2b33;
	}
	#btnSaveSettings.focus {
		background-color: #14f195;
		color: #000;
		font-weight: bold;
	}

	.list-title {
		font-size: 36px;
		line-height: 22px;
		font-weight: bold;
		margin-left: 10px;
		margin-bottom: 30px;
	}
	  .h-scroll-track {
			display: flex;
			position: relative;
			transition: transform 0.25s ease-out;
		}
	  .poster-container::after {
			content: '';
			display: block;
			-webkit-flex-shrink: 0;
			flex-shrink: 0;
			width: calc(100vw - 190px);
			height: 1px;
		}

	   .poster-container::-webkit-scrollbar {
		  display: none;
	  }
	  .card, .episode-card {
		  margin: 8px;
		  width:170px;
		  -webkit-flex-shrink: 0;
		  flex-shrink: 0;
		  cursor:pointer;
		  border-radius:0; 
		  overflow:hidden;
		  background:#0f1a21;
		  outline:none;
		  -webkit-transition:-webkit-transform .15s ease-in-out;
		  transition:transform .15s ease-in-out;
	  }
	  .card img{width:100%;height:255px;-o-object-fit:cover;object-fit:cover;display:block}

	   .episode-card {
		  width: 220px;
		  height: 120px;
		  position: relative;
		  display: -webkit-flex;
		  display: flex;
		  -webkit-flex-direction: column;
		  flex-direction: column;
		  -webkit-justify-content: center;
		  justify-content: center;
		  padding: 10px;
		  box-sizing: border-box;
	   }
	   .episode-card .ep-number {
		   font-size: 24px;
		   font-weight: bold;
		   color: #14f195;
	   }
	   .episode-card .ep-name {
		   font-size: 14px;
		   color: #eee;
		   margin-top: 5px;
		   overflow: hidden;
		   text-overflow: ellipsis;
		   display: -webkit-box;
		   -webkit-line-clamp: 2;
		   -webkit-box-orient: vertical;
	   }
	  
	  .btn {
		width: 48px;
		height: 48px;
		border-radius: 0; 
		background: transparent;
		color: #ddd;
		margin: 0 8px;
		padding: 0;
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: center;
		justify-content: center;
		border:0;
		cursor: pointer;
		outline: none;
		-webkit-transition: all .2s ease;
		transition: all .2s ease;
		-webkit-flex-shrink: 0;
		flex-shrink: 0;
	  }
	  .btn svg {
		  width: 24px;
		  height: 24px;
		  fill: currentColor;
	  }
	  .nav-bar .btn.active {
		  background: #14f195;
		  color: #000;
	  }
		#btnFavorite.active {
			color: #E50914 !important;
		}
		#btnWatchlist.active {
			color: #2962FF !important;
		}
		#btnWatched.active {
			color: #FFD700 !important;
		}
	  input{padding:10px;border-radius:0;border:1px solid #163042;background:#0e1a22;color:#fff;outline:none; font-size: 16px; width: 100%; box-sizing: border-box;}