/* ปุ่มฟังข่าว (อ่านออกเสียงภาษาไทย) — ข่าวประชาสัมพันธ์ / ข่าวภาพกิจกรรม */
.my-tts {
	--tts-c: var(--my-primary, #1b5fa8);
	--tts-c2: var(--my-light, #2e80d6);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem .6rem;
	margin: .25rem 0 1.1rem;
	padding: .55rem .6rem;
	border: 1px solid var(--my-line, #e5e7eb);
	border-radius: 999px;
	background: var(--my-card, #fff);
	box-shadow: var(--my-shadow, 0 2px 14px rgba(16, 40, 80, .08));
	font-family: var(--my-font, inherit);
	max-width: 100%;
	width: fit-content;
}

.my-tts.is-open { border-radius: var(--my-radius, 14px); }

.my-tts__play,
.my-tts__stop,
.my-tts__set {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	border: 0;
	cursor: pointer;
	font: inherit;
	line-height: 1;
	transition: transform .15s ease, filter .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.my-tts__play {
	padding: .45rem 1.05rem .45rem .45rem;
	border-radius: 999px;
	color: #fff;
	font-weight: 600;
	font-size: .98rem;
	background: linear-gradient(135deg, var(--tts-c2), var(--tts-c));
	box-shadow: 0 6px 16px -6px var(--tts-c);
}

.my-tts__play:hover { transform: translateY(-1px); filter: brightness(1.08); }
.my-tts__play:active { transform: translateY(0); }

.my-tts__icon {
	display: grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
	font-size: .95rem;
	flex: none;
}

/* แถบเสียงเต้นขณะกำลังอ่าน */
.my-tts__eq {
	display: none;
	align-items: flex-end;
	gap: 2px;
	height: 1rem;
}

.my-tts__eq i {
	display: block;
	width: 3px;
	height: 40%;
	border-radius: 2px;
	background: currentColor;
	animation: my-tts-eq 1s ease-in-out infinite;
}

.my-tts__eq i:nth-child(2) { animation-delay: -.25s; }
.my-tts__eq i:nth-child(3) { animation-delay: -.5s; }
.my-tts__eq i:nth-child(4) { animation-delay: -.75s; }

@keyframes my-tts-eq {
	0%, 100% { height: 30%; }
	50% { height: 100%; }
}

.my-tts.is-playing .my-tts__eq { display: inline-flex; }
.my-tts.is-playing .my-tts__icon { background: rgba(255, 255, 255, .3); }
.my-tts.is-loading .my-tts__icon i { animation: my-tts-spin .9s linear infinite; }

@keyframes my-tts-spin { to { transform: rotate(360deg); } }

.my-tts__stop {
	padding: .5rem .95rem;
	border-radius: 999px;
	color: #b91c1c;
	background: #fee2e2;
	font-weight: 600;
	font-size: .92rem;
}

.my-tts__stop:hover { background: #fecaca; transform: translateY(-1px); }

.my-tts__set {
	padding: .5rem .85rem;
	border-radius: 999px;
	color: var(--tts-c);
	background: color-mix(in srgb, var(--tts-c) 10%, transparent);
	font-weight: 600;
	font-size: .9rem;
}

.my-tts__set:hover { background: color-mix(in srgb, var(--tts-c) 18%, transparent); transform: translateY(-1px); }
.my-tts__set[aria-expanded="true"] { color: #fff; background: var(--tts-c); }

/* แผงปรับเสียง: เสียงหญิง/ชาย · ระดับเสียง · ความเร็ว */
.my-tts__panel {
	flex: 1 0 100%;
	display: grid;
	gap: .55rem;
	margin-top: .15rem;
	padding: .75rem .85rem .6rem;
	border-radius: var(--my-radius, 14px);
	background: color-mix(in srgb, var(--tts-c) 5%, var(--my-card, #fff));
	border: 1px solid color-mix(in srgb, var(--tts-c) 16%, transparent);
}

.my-tts__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem .75rem;
}

.my-tts__row-label {
	min-width: 6.2rem;
	font-size: .88rem;
	font-weight: 600;
	color: var(--my-ink, #1f2937);
}

.my-tts__seg {
	display: inline-flex;
	flex-wrap: wrap;
	padding: 3px;
	gap: 3px;
	border-radius: 999px;
	background: var(--my-card, #fff);
	border: 1px solid var(--my-line, #e5e7eb);
}

.my-tts__seg button {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .38rem .8rem;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--my-muted, #6b7280);
	font: inherit;
	font-size: .86rem;
	font-weight: 600;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
	transition: background-color .15s ease, color .15s ease;
}

.my-tts__seg button:hover { color: var(--tts-c); }

/* เสียงที่เครื่องนี้ไม่มี (ยังกดได้ เพื่อบอกเหตุผล) */
.my-tts__seg button.is-unavailable { opacity: .45; text-decoration: line-through; cursor: help; }

.my-tts__seg button[aria-pressed="true"] {
	color: #fff;
	background: linear-gradient(135deg, var(--tts-c2), var(--tts-c));
	box-shadow: 0 3px 10px -4px var(--tts-c);
}

.my-tts__using {
	font-size: .8rem;
	color: var(--my-muted, #6b7280);
}

.my-tts__using:empty { display: none; }

.my-tts__bar {
	position: relative;
	width: 7rem;
	height: .35rem;
	border-radius: 999px;
	background: var(--my-line, #e5e7eb);
	overflow: hidden;
}

.my-tts__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--tts-c2), var(--tts-c));
	transition: width .35s ease;
}

.my-tts__msg {
	font-size: .85rem;
	color: var(--my-muted, #6b7280);
	padding-inline: .25rem .5rem;
}

.my-tts__msg:empty { display: none; }
.my-tts__msg.is-error { color: #b91c1c; }

.my-tts[hidden],
.my-tts [hidden] { display: none !important; }

.my-tts button:focus-visible {
	outline: 3px solid var(--my-accent, #f0a020);
	outline-offset: 2px;
}

@media (max-width: 575.98px) {
	.my-tts { border-radius: var(--my-radius, 14px); width: 100%; }
	.my-tts__bar { flex: 1 1 4rem; width: auto; }
	.my-tts__row-label { min-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.my-tts__eq i,
	.my-tts.is-loading .my-tts__icon i { animation: none; }
	.my-tts__play, .my-tts__stop, .my-tts__set, .my-tts__seg button { transition: none; }
}

@media print {
	.my-tts { display: none !important; }
}