#mmp-wrap {
	position: fixed;
	bottom: 20px;
	z-index: 99999;
	display: flex;
	align-items: center;
	gap: 10px;
}
#mmp-wrap.mmp-left { left: 20px; }
#mmp-wrap.mmp-right { right: 20px; flex-direction: row-reverse; }

#mmp-btn {
	position: relative;
	width: 46px;
	height: 46px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(31, 78, 140, .25);
	background: rgba(255, 255, 255, .94);
	color: #1f4e8c; /* xanh Đức Mẹ */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
	transition: transform .2s ease, background .2s ease;
}
#mmp-btn:hover { transform: scale(1.07); background: #fff; }
#mmp-btn:focus-visible { outline: 2px solid #1f4e8c; outline-offset: 3px; }

/* Biểu tượng: đang phát => hiện sóng, đang tắt => hiện dấu X */
#mmp-btn .mmp-waves { display: none; }
#mmp-btn .mmp-slash { display: block; }
#mmp-wrap.is-playing .mmp-waves { display: block; }
#mmp-wrap.is-playing .mmp-slash { display: none; }

/* Vòng sáng nhẹ khi đang phát */
#mmp-wrap.is-playing #mmp-btn::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid rgba(31, 78, 140, .35);
	animation: mmp-pulse 2.6s ease-out infinite;
	pointer-events: none;
}
@keyframes mmp-pulse {
	0%   { transform: scale(.95); opacity: .9; }
	100% { transform: scale(1.35); opacity: 0; }
}

.mmp-tip {
	background: rgba(31, 78, 140, .92);
	color: #fff;
	font-size: 13px;
	line-height: 1.3;
	padding: 7px 12px;
	border-radius: 18px;
	white-space: nowrap;
	opacity: 0;
	transform: translateX(-6px);
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
}
#mmp-wrap.mmp-right .mmp-tip { transform: translateX(6px); }
#mmp-wrap.mmp-hint .mmp-tip { opacity: 1; transform: none; }

@media (max-width: 480px) {
	#mmp-wrap { bottom: 14px; }
	#mmp-wrap.mmp-left { left: 14px; }
	#mmp-wrap.mmp-right { right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	#mmp-wrap.is-playing #mmp-btn::after { animation: none; }
	#mmp-btn, .mmp-tip { transition: none; }
}

/* Khung trình phát YouTube (YouTube yêu cầu trình phát phải hiển thị, tối thiểu 200x200) */
#mmp-yt-box {
	position: fixed;
	bottom: 78px;
	z-index: 99998;
	width: 240px;
	max-width: calc(100vw - 28px);
	height: 200px;
	border-radius: 12px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
	display: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease;
}
#mmp-yt-box.show { display: block; }
#mmp-yt-box.show.open { opacity: 1; pointer-events: auto; }
#mmp-yt-box.mmp-left { left: 20px; }
#mmp-yt-box.mmp-right { right: 20px; }
#mmp-yt-box iframe { width: 100%; height: 100%; border: 0; display: block; }

@media (max-width: 480px) {
	#mmp-yt-box { bottom: 72px; }
	#mmp-yt-box.mmp-left { left: 14px; }
	#mmp-yt-box.mmp-right { right: 14px; }
}

/* Nút bật/tắt hiện video (chỉ xuất hiện khi mục đang phát là YouTube) */
#mmp-vbtn {
	display: none;
	width: 34px;
	height: 34px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(31, 78, 140, .25);
	background: rgba(255, 255, 255, .94);
	color: #1f4e8c;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
}
#mmp-wrap.has-yt #mmp-vbtn { display: inline-flex; }
#mmp-vbtn[aria-pressed="true"] { background: #1f4e8c; color: #fff; }
#mmp-vbtn:focus-visible { outline: 2px solid #1f4e8c; outline-offset: 3px; }