/* Expertis – Nghe bài viết 1.3.0
   Màu lấy từ Elementor Global Colors của site (fallback đúng mã hiện tại).
   Bọc và ép !important để không kế thừa style button/select của theme. */
html body .exp-nb-icon,
html body .exp-nb-noi {
	--exp-nb-chinh: var(--e-global-color-primary, #29369D);
	--exp-nb-cam: var(--e-global-color-secondary, #F87B1B);
	--exp-nb-chu: var(--e-global-color-text, #0A1140);
	--exp-nb-mo: var(--e-global-color-175c45c, #525A73);
	--exp-nb-vien: var(--e-global-color-414fb8d, #D8D8D8);
	--exp-nb-nen: var(--e-global-color-c2ec8cf, #F4F4F7);
}

/* ---------- Icon nghe trên dòng thông tin đầu bài ---------- */
html body .exp-nb-cho { display: inline-flex !important; align-items: center !important; vertical-align: middle !important; }
html body .exp-nb-cho-dau { display: flex !important; margin: 0 0 16px !important; }
html body .exp-nb-icon,
html body .exp-nb-icon:hover,
html body .exp-nb-icon:focus {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--exp-nb-chinh) !important;
	color: #fff !important;
	box-shadow: 0 2px 8px rgba(41, 54, 157, .28) !important;
	cursor: pointer !important;
	line-height: 1 !important;
	overflow: visible !important;
	transition: background .15s, transform .15s !important;
}
html body .exp-nb-icon[hidden] { display: none !important; }
html body .exp-nb-icon:hover { background: var(--exp-nb-cam) !important; transform: scale(1.06) !important; }
html body .exp-nb-icon.exp-nb-dang { background: var(--exp-nb-cam) !important; box-shadow: 0 2px 8px rgba(248, 123, 27, .32) !important; }
html body .exp-nb-icon svg { width: 18px !important; height: 18px !important; flex: none !important; }

/* Vòng sóng lan ra vài lần để gây chú ý, dừng khi đã bấm nghe */
html body .exp-nb-icon::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	border-radius: 50% !important;
	border: 2px solid var(--exp-nb-cam) !important;
	opacity: 0; /* không !important để animation điều khiển được */
	pointer-events: none !important;
	animation: exp-nb-song 1.8s ease-out 1s 4 !important;
}
html body .exp-nb-icon.exp-nb-dang::after,
html body .exp-nb-icon:hover::after { animation: none !important; }
@keyframes exp-nb-song {
	0% { transform: scale(1); opacity: .9; }
	100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	html body .exp-nb-icon::after { animation: none !important; }
}

/* ---------- Thanh nổi khi đang nghe ---------- */
html body .exp-nb-noi {
	position: fixed !important;
	left: 50% !important;
	bottom: 20px !important;
	transform: translateX(-50%) !important;
	z-index: 99990 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 6px 8px 6px 6px !important;
	background: #fff !important;
	border: 1px solid var(--exp-nb-vien) !important;
	border-radius: 999px !important;
	box-shadow: 0 6px 24px rgba(10, 17, 64, .14) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	line-height: 1 !important;
	color: var(--exp-nb-chu) !important;
}
html body .exp-nb-noi[hidden] { display: none !important; }
html body .exp-nb-noi button,
html body .exp-nb-noi button:hover,
html body .exp-nb-noi button:focus {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 36px !important;
	height: 36px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	box-shadow: none !important;
	cursor: pointer !important;
	transition: background .15s !important;
}
html body .exp-nb-noi .exp-nb-play,
html body .exp-nb-noi .exp-nb-play:focus { background: var(--exp-nb-chinh) !important; color: #fff !important; }
html body .exp-nb-noi .exp-nb-play:hover { background: var(--exp-nb-cam) !important; color: #fff !important; }
html body .exp-nb-noi .exp-nb-ket,
html body .exp-nb-noi .exp-nb-ket:focus { background: var(--exp-nb-nen) !important; color: var(--exp-nb-chinh) !important; }
html body .exp-nb-noi .exp-nb-ket:hover { background: var(--exp-nb-vien) !important; color: var(--exp-nb-chinh) !important; }
html body .exp-nb-noi svg { width: 16px !important; height: 16px !important; flex: none !important; }
html body .exp-nb-noi .exp-nb-tt {
	min-width: 3.2em !important;
	text-align: center !important;
	color: var(--exp-nb-mo) !important;
	font-size: 13px !important;
	font-variant-numeric: tabular-nums !important;
}
html body .exp-nb-noi .exp-nb-tocdo,
html body .exp-nb-noi .exp-nb-tocdo:focus {
	appearance: auto !important;
	width: auto !important;
	height: 30px !important;
	margin: 0 !important;
	padding: 0 4px !important;
	border: 1px solid var(--exp-nb-vien) !important;
	border-radius: 6px !important;
	background: #fff !important;
	color: var(--exp-nb-chu) !important;
	box-shadow: none !important;
	font-family: inherit !important;
	font-size: 13px !important;
	line-height: 1 !important;
}
html body .exp-nb-icon:focus-visible,
html body .exp-nb-noi button:focus-visible,
html body .exp-nb-noi select:focus-visible { outline: 2px solid var(--exp-nb-cam) !important; outline-offset: 2px !important; }

/* Điện thoại: dạt trái để không đè các nút chat bên phải */
@media (max-width: 767px) {
	html body .exp-nb-noi { left: 16px !important; bottom: 16px !important; transform: none !important; }
}

/* ---------- Đoạn đang đọc: nền nhạt, không viền, nới đệm bằng bóng (không làm xô chữ) ---------- */
html body .exp-nb-dangdoc {
	background: rgba(248, 123, 27, .08) !important;
	box-shadow: 0 0 0 10px rgba(248, 123, 27, .08) !important;
	border-radius: 2px !important;
	transition: background .2s, box-shadow .2s !important;
}

/* Khi đang nghe: rê chuột vào đoạn có nền rất nhạt để biết có thể nhấp đúp nhảy đến */
@media (hover: hover) {
	html body .exp-nb-chon .exp-nb-khoi:not(.exp-nb-dangdoc):hover {
		background: rgba(41, 54, 157, .04) !important;
		box-shadow: 0 0 0 10px rgba(41, 54, 157, .04) !important;
		border-radius: 2px !important;
		cursor: pointer !important;
	}
}
html body .exp-nb-chon .exp-nb-khoi { -webkit-tap-highlight-color: transparent !important; }
html body .exp-nb-noi .exp-nb-tt { cursor: help !important; }

/* ---------- Chế độ kiểm tra ?exp-doc=kiemtra ---------- */
html body .exp-nb-kt-vung { outline: 2px dashed #29369D !important; outline-offset: 6px !important; }
html body .exp-nb-kt-doc { outline: 1px solid #16a34a !important; background: rgba(22, 163, 74, .06) !important; position: relative !important; }
html body .exp-nb-kt-bang { outline: 2px solid #ca8a04 !important; }
html body .exp-nb-kt-bo { outline: 2px dashed #dc2626 !important; opacity: .55 !important; }
html body .exp-nb-kt-doc::before,
html body .exp-nb-kt-bang::before {
	content: attr(data-exp-nb) !important;
	position: absolute !important;
	left: -30px !important;
	top: 0 !important;
	font: 600 11px/18px monospace !important;
	color: #16a34a !important;
}

@media print { html body .exp-nb-cho, html body .exp-nb-noi { display: none !important; } }