/* ==========================================================================
   QHKconstruction - design system theo 88coregroup.com
   ========================================================================== */

:root {
	--qhk88-bg: oklch(14% .005 60);
	--qhk88-fg: oklch(96% .008 80);
	--qhk88-card: oklch(18% .006 60);
	--qhk88-muted-bg: oklch(22% .005 60);
	--qhk88-muted: oklch(68% .015 70);
	--qhk88-primary: oklch(78% .09 60);
	--qhk88-primary-fg: oklch(14% .01 60);
	--qhk88-border: oklch(30% .008 60 / .6);
	--qhk88-line: oklch(30% .008 60);
	--qhk88-shell: #0e0c0a;
	--qhk88-max: 72rem;
	--qhk88-pad-x: 1.5rem;
}

/* --- BOSS MUSIC banner: nhac khong loi, goc phai banner ------------------
   Button tuyet doi them vao trong .qhk88-hero-sticky, khong anh huong HTML co san */
.qhk88-music {
	position: absolute;
	right: var(--qhk88-pad-x);
	bottom: 3.25rem;
	z-index: 30;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	border: 1px solid var(--qhk88-border);
	background: rgba(14, 12, 10, .55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--qhk88-muted);
	border-radius: 999px;
	padding: .55rem 1rem;
	font: inherit;
	font-size: 10px;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: .25em;
	cursor: pointer;
	pointer-events: none;
	opacity: 0;
	transition: color .2s, border-color .2s, opacity .3s;
	appearance: none;
	-webkit-appearance: none;
}
.qhk88-music.is-ready {
	opacity: 1;
	pointer-events: auto;
}
.qhk88-music:hover {
	color: var(--qhk88-fg);
	border-color: var(--qhk88-primary);
}
.qhk88-music .qhk88-eq {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	height: 10px;
}
.qhk88-music .qhk88-eq i {
	width: 2px;
	height: 3px;
	background: currentColor;
	border-radius: 1px;
	transition: height .3s ease;
}
.qhk88-music.is-playing .qhk88-eq i {
	animation: qhk88-eq 1.1s ease-in-out infinite;
}
.qhk88-music .qhk88-eq i:nth-child(2) { animation-delay: .18s; }
.qhk88-music .qhk88-eq i:nth-child(3) { animation-delay: .38s; }
@keyframes qhk88-eq {
	0%, 100% { height: 3px; }
	50% { height: 10px; }
}
@media (max-width: 767px) {
	.qhk88-music {
		right: 1rem;
		bottom: 3rem;
		padding: .45rem .75rem;
	}
	.qhk88-music .qhk88-music-label { display: none; }
}
/* --- Music: nhac nen tu bat + goi y khi bi chan autoplay ------------------ */
.qhk88-music.is-blocked {
	animation: qhk88-music-pulse 2.2s ease-in-out infinite;
}
@keyframes qhk88-music-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(226, 170, 124, 0); }
	50% { box-shadow: 0 0 0 4px rgba(226, 170, 124, .22); }
}
.qhk88-music-hint {
	position: absolute;
	right: var(--qhk88-pad-x);
	bottom: 6.25rem;
	z-index: 31;
	max-width: 11rem;
	padding: .5rem .7rem;
	border: 1px solid var(--qhk88-border);
	border-radius: .5rem;
	background: rgba(14, 12, 10, .86);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--qhk88-fg);
	font-size: 11px;
	line-height: 1.5;
	text-align: right;
	pointer-events: none;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .25s ease, transform .25s ease;
}
.qhk88-music-hint.is-on { opacity: 1; transform: none; }
@media (max-width: 767px) {
	.qhk88-music-hint { right: 1rem; bottom: 5.75rem; font-size: 10px; }
}

/* --- Music: nut noi khi trang khong co hero ------------------------------ */
.qhk88-music.qhk88-music-fixed {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 9998;
}
.qhk88-music-hint.qhk88-music-hint-fixed {
	position: fixed;
	right: 1rem;
	bottom: 4rem;
	z-index: 9999;
}