/* Hạt Dưa — Nghe truyện v1.1: hoà vào theme (dùng màu --im-theme-color / --im-gradient-color).
   Nút nằm trong dòng bài; thanh player chỉ hiện khi bấm, đóng được, không che nút của theme. */

.hdh-nghe-nut {
	display: block;
	width: 100%;
	max-width: 520px;
	margin: 18px auto;
	padding: 14px 18px;
	min-height: 48px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--im-gradient-color, #552fac), var(--im-theme-color, #829ebe));
	color: #fff;
	font: inherit;
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(85, 47, 172, .25);
}

.hdh-nghe-nut:active { transform: scale(.995); }

/* ---------- thanh player ---------- */
.hdh-nghe-thanh {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9990;
	background: #ffffff;
	color: #1c1c1e;
	border-top: 1px solid rgba(0, 0, 0, .08);
	box-shadow: 0 -4px 18px rgba(0, 0, 0, .12);
	padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
	font: inherit;
	font-size: 14px;
	transform: translateY(115%);
	transition: transform .18s ease-out;
	visibility: hidden;
}

.hdh-nghe-thanh.hdh-mo { transform: translateY(0); visibility: visible; }

.hdh-hang1 { display: flex; align-items: center; gap: 10px; }
.hdh-hang2 { display: flex; align-items: center; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.hdh-hang2 label { display: flex; align-items: center; gap: 6px; opacity: .85; }

.hdh-phat {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--im-gradient-color, #552fac), var(--im-theme-color, #829ebe));
	color: #fff;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

.hdh-dong {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 10px;
	background: rgba(0, 0, 0, .06);
	color: #1c1c1e;
	font-size: 17px;
	cursor: pointer;
}

.hdh-giua { flex: 1 1 auto; min-width: 0; }
.hdh-tua { width: 100%; height: 26px; accent-color: var(--im-theme-color, #829ebe); }
.hdh-thoi-gian { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .75; }
.hdh-trang-thai { color: var(--im-gradient-color, #552fac); }

.hdh-giong, .hdh-toc-do {
	padding: 8px 10px;
	min-height: 40px;
	border: 1px solid rgba(0, 0, 0, .14);
	border-radius: 8px;
	background: #fff;
	color: inherit;
	font: inherit;
	font-size: 14px;
}

.hdh-tai { margin-left: auto; cursor: pointer; opacity: .7; font-size: 13px; }
.hdh-tai:hover { opacity: 1; }

@media (prefers-color-scheme: dark) {
	.hdh-nghe-thanh { background: #17171a; color: #f2f2f4; border-top-color: rgba(255, 255, 255, .1); }
	.hdh-dong { background: rgba(255, 255, 255, .12); color: #f2f2f4; }
	.hdh-giong, .hdh-toc-do { background: #22222a; border-color: rgba(255, 255, 255, .16); }
}

/* máy tính bảng / desktop: thu gọn thành 1 thanh nổi giữa dưới */
@media (min-width: 760px) {
	.hdh-nghe-thanh {
		left: 50%;
		right: auto;
		width: 620px;
		max-width: calc(100vw - 40px);
		transform: translate(-50%, 115%);
		border-radius: 14px 14px 0 0;
		border: 1px solid rgba(0, 0, 0, .08);
		border-bottom: 0;
	}
	.hdh-nghe-thanh.hdh-mo { transform: translate(-50%, 0); }
}