/* =====================
   RESET & BASE
===================== */
:root{
	--bg: #f5f6f8;
	--card: #ffffff;
	--line: #e2e5ea;
	--text: #2b2f36;
	--muted: #7a7f87;
	--primary: #22c55e;
	--primary-dark: #16a34a;
	--danger: #ff5252;
	--radius: 6px;
	--radius-sm: 6px;
	--shadow: 0 10px 25px rgba(0,0,0,.06);
	--padingbt: 8px 10px;
}

*{
	box-sizing: border-box;
}

html, body{
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--text);
	font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial, sans-serif;
}

/* =====================
   LAYOUT
===================== */
#content {
	max-width: 1200px;
	margin: auto;
/* 	padding: 6px; */
}

/* =====================
   PLAYER
===================== */
#player{
	width: 100%;
	aspect-ratio: 16 / 9;
/* 	border-radius: var(--radius); */
	background: #000;
	box-shadow: var(--shadow);
}

/* =====================
   VIDEO TITLE
===================== */
#video-title {
	margin: 0 !important;
	font-size: 16px;
	font-weight: 600;
	background: var(--card);
	padding: 12px 14px;
	/* border-radius: var(--radius); */
/* 	box-shadow: var(--shadow); */
	padding-bottom: 13px;
}

/* =====================
   CONTROL PANEL
===================== */
.dieu-huong {
	/* margin-top: 12px; */
	background: var(--card);
	/* border-radius: var(--radius); */
	padding: 10px;
	/* box-shadow: var(--shadow); */
	border-top: 1px solid #dadada;
}

/* Input */
.dieu-huong input{
	width: 100%;
	padding: 10px 12px;
	border-radius: var(--radius);
	border: 1px solid var(--line);
	font-size: 15px;
}

/* =====================
   BUTTONS
===================== */
.submit-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 14px;
	padding: 10px 20px;
	border-radius: var(--radius);
	background: #e5e7eb;
	color: var(--text);
	cursor: pointer;
	font-weight: 500;
	transition: all .2s ease;
	border-radius: var(--radius) !important;
}

.submit-button:hover{
	background: #d1d5db;
}

/* Ngăn chặn double-tap zoom trên toàn bộ các nút bấm */
button {
  touch-action: manipulation;
}

/* =====================
   SPEED & SEEK
===================== */
.speed-control, .seek-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 14px;
	max-width: 500px;
}

.speed-btn {
	padding: var(--padingbt);
	border-radius: var(--radius);
	border: 1px solid var(--line);
	background: #f8fafc;
	cursor: pointer;
	font-size: 13px;
	transition: all .2s ease;
	margin-bottom: 0 !important;
}

.speed-btn:hover{
	background: #eef2f7;
}

.speed-btn.active{
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
/* 	box-shadow: 0 4px 12px rgba(34,197,94,.35); */
}

/* Seek */
.seek-btn {
	padding: var(--padingbt);
	border-radius: var(--radius-sm);
	border: none;
	background: #939393;
	color: #fff;
	font-size: 13px;
	/* font-weight: 600; */
	cursor: pointer;
	transition: all .2s ease;
	margin-bottom: 0 !important;
}

.seek-btn:hover{
	background: var(--primary-dark);
	transform: translateY(-1px);
}

/* =====================
   OFF TIMER
===================== */
.off-btn {
	padding: var(--padingbt);
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	background: #f9fafb;
	font-size: 13px;
	cursor: pointer;
	transition: all .2s ease;
	margin-bottom: 0 !important;
	display: inline-flex;
	justify-content: center;
}

.off-btn:hover{
	background: #eef2f7;
}

.off-btn.active{
	background: var(--danger);
	color: #fff;
	border-color: var(--danger);
	transform: scale(1.05);
}

.active .timer-icon > * {
	stroke: #ffffff;
}

.off-btn span {
	font-size: 11px;
	margin-right: 3px;
}

#off-timer-box{
	margin-top: 12px;
	padding: 8px 12px;
	border-radius: var(--radius-sm);
	background: #fff;
	border: 1px dashed var(--line);
	font-size: 14px;
}

#off-timer{
	color: var(--danger);
	font-weight: 700;
}


.icon-trash {
	color: #9f9f9f;
}

/* =====================
   SEARCH
===================== */
#search-video {
	margin-top: 15px;
	background: var(--card);
	border-radius: var(--radius);
	padding: 15px 10px;
	/* box-shadow: var(--shadow); */
}

.yt-search-bar{
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
}

#ytSearchInput{
	flex: 1;
	padding: 10px 12px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--line);
	font-size: 15px;
}

#ytSearchBtn,
#ytSearchBtn2{
	padding: 10px 16px;
	border-radius: var(--radius-sm);
	border: none;
	cursor: pointer;
	background: var(--primary);
	color: #fff;
	font-weight: 600;
	transition: all .2s ease;
}

#ytSearchBtn2{
	background: #3b82f6;
}

#ytSearchBtn:hover{
	background: var(--primary-dark);
}

#ytSearchBtn2:hover{
	background: #2563eb;
}

/* =====================
   VIDEO LIST
===================== */
a.drh-flex {
	display: flex;
	/* gap: 12px; */
	text-decoration: none;
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--line);
	/* justify-content: start; */
}

a.drh-flex img {
	width: 140px;
	border-radius: var(--radius-sm);
	aspect-ratio: 1200/780;
}

a.drh-flex > div {
	width: calc(100% - 150px);
}

a.drh-flex h3 {
	font-size: 15px;
	margin: 0;
	color: #5c5c5c;
}

a.drh-flex p {
	font-size: 13px;
	color: var(--muted);
	margin-top: 4px;
	margin-bottom: 5px;
}

a.drh-flex:hover h3{
	color: var(--primary);
}

/* =====================
   RESPONSIVE
===================== */
@media(max-width: 768px){
	a.drh-flex{
		flex-direction: column;
	}

	a.drh-flex img{
		width: 100%;
	}

	.yt-search-bar{
		flex-direction: column;
	}
}

@media(max-width: 480px){
	#video-title{
		font-size: 14px;
	}
}