/* ===== Player "Nghe bài viết" gắn trong bài ===== */
.nsg-tts-player {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 20px 0;
	padding: 14px 16px;
	background: #f6f7f9;
	border: 1px solid #e3e6ea;
	border-radius: 12px;
}
.nsg-tts-player .nsg-tts-icon { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.nsg-tts-player .nsg-tts-body { flex: 1 1 auto; min-width: 0; }
.nsg-tts-player .nsg-tts-label {
	display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; color: #1f2328;
}
.nsg-tts-player audio { width: 100%; height: 40px; }

@media (prefers-color-scheme: dark) {
	.nsg-tts-player { background: #1c1f24; border-color: #2c3138; }
	.nsg-tts-player .nsg-tts-label { color: #e6e8eb; }
}

/* ===== Công cụ front-end [nsg_tts_tool] — tông kem / vàng thư pháp ===== */
.nsg-tts-tool {
	--nsg-cream:   #faf4e6;
	--nsg-cream-2: #f3ead4;
	--nsg-line:    #e6dbbf;
	--nsg-gold:    #c79a3c;
	--nsg-gold-2:  #b8862b;
	--nsg-ink:     #3a2c17;
	--nsg-ink-2:   #6b5a3a;
	--nsg-muted:   #96876a;
	--nsg-dark:    #2a2015;
	max-width: 960px;
	margin: 24px auto;
	font-family: inherit;
}

.nsg-tts-card {
	background: linear-gradient(180deg, #fdf9ef 0%, #f8f0dd 100%);
	border: 1px solid var(--nsg-line);
	border-radius: 20px;
	padding: 26px 28px 30px;
	box-shadow: 0 10px 30px rgba(120, 90, 30, .08);
}

/* Header */
.nsg-tts-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}
.nsg-tts-head-left { display: flex; align-items: center; gap: 14px; }
.nsg-tts-badge-ic {
	width: 50px; height: 50px; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(135deg, #e9c977 0%, #c79a3c 100%);
	color: #4a3410; font-size: 26px; font-weight: 700;
	border-radius: 14px; font-family: Georgia, "Times New Roman", serif;
	box-shadow: 0 4px 12px rgba(199,154,60,.35);
}
.nsg-tts-title {
	margin: 0; font-size: 22px; line-height: 1.2; font-weight: 800; color: var(--nsg-ink);
	font-family: Georgia, "Times New Roman", serif; letter-spacing: .2px;
}
.nsg-tts-sub { margin: 4px 0 0; font-size: 14px; color: var(--nsg-muted); }
.nsg-tts-pill {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 7px 16px; font-size: 13px; font-weight: 700; white-space: nowrap;
	color: var(--nsg-gold-2); background: #fffdf6;
	border: 1px solid var(--nsg-gold); border-radius: 999px;
}

/* Grid 2 cột */
.nsg-tts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 720px) { .nsg-tts-grid { grid-template-columns: 1fr; } }

/* Cột nhập */
.nsg-tts-field { margin-bottom: 14px; }
.nsg-tts-flabel {
	display: block; font-size: 12px; font-weight: 800; letter-spacing: .6px;
	text-transform: uppercase; color: var(--nsg-gold-2); margin-bottom: 7px;
}
.nsg-tts-tool-text,
.nsg-tts-tool-voice {
	width: 100%; box-sizing: border-box;
	background: #fffdf7; border: 1px solid var(--nsg-line);
	border-radius: 12px; color: var(--nsg-ink);
	font-size: 15px; padding: 12px 14px; font-family: inherit;
}
.nsg-tts-tool-text { line-height: 1.65; resize: vertical; min-height: 150px; }
.nsg-tts-tool-text:focus,
.nsg-tts-tool-voice:focus {
	outline: none; border-color: var(--nsg-gold);
	box-shadow: 0 0 0 3px rgba(199,154,60,.18);
}
.nsg-tts-tool-voice { cursor: pointer; }

.nsg-tts-tool-row {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; margin-top: 14px; flex-wrap: wrap;
}
.nsg-tts-tool-count { font-size: 13px; color: var(--nsg-muted); }
.nsg-tts-tool-count.over { color: #c0392b; font-weight: 700; }
.nsg-tts-tool-btn {
	padding: 12px 26px; border: none; cursor: pointer;
	background: linear-gradient(135deg, #d8ad48 0%, #b8862b 100%);
	color: #33240a; font-size: 15px; font-weight: 800; letter-spacing: .3px;
	border-radius: 11px; box-shadow: 0 6px 16px rgba(184,134,43,.32);
	transition: transform .06s ease, box-shadow .2s ease;
}
.nsg-tts-tool-btn:hover { box-shadow: 0 8px 22px rgba(184,134,43,.42); }
.nsg-tts-tool-btn:active { transform: translateY(1px); }
.nsg-tts-tool-btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }

.nsg-tts-tool-status { margin-top: 12px; font-weight: 700; font-size: 14px; min-height: 20px; }
.nsg-tts-tool-status.ok { color: #1a7f37; }
.nsg-tts-tool-status.err { color: #c0392b; }

/* Cột kết quả */
.nsg-tts-col-out {
	background:
		radial-gradient(120% 120% at 50% 0%, #fffdf6 0%, #f6edd7 100%);
	border: 1px solid var(--nsg-line);
	border-radius: 16px;
	min-height: 220px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 22px; text-align: center; position: relative; overflow: hidden;
}
.nsg-tts-out-empty { color: var(--nsg-muted); }
.nsg-tts-out-empty p { margin: 10px 0 0; font-size: 14px; line-height: 1.5; }
.nsg-tts-out-empty small { color: #b3a480; }
.nsg-tts-watermark {
	display: block; font-family: Georgia, "Times New Roman", serif;
	font-size: 96px; line-height: 1; color: #e6d7b0; opacity: .7;
}

.nsg-tts-tool-result { width: 100%; }
.nsg-tts-result-title {
	font-weight: 800; color: var(--nsg-ink); margin-bottom: 12px; font-size: 15px;
}
.nsg-tts-tool-result audio { width: 100%; height: 44px; margin-bottom: 14px; }
.nsg-tts-tool-download {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 20px; text-decoration: none; font-weight: 800; font-size: 14px;
	background: var(--nsg-dark); color: #f6e9c8; border-radius: 10px;
	transition: background .2s ease;
}
.nsg-tts-tool-download:hover { background: #3a2c17; color: #fff; }

.nsg-tts-notice { text-align: center; color: var(--nsg-muted); padding: 30px; }

/* ---- Lịch sử đã tạo ---- */
.nsg-tts-history {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px dashed var(--nsg-line);
}
.nsg-tts-hist-head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 12px; flex-wrap: wrap;
}
.nsg-tts-hist-title {
	display: flex; align-items: center; gap: 10px;
	font-size: 13px; font-weight: 800; letter-spacing: .6px;
	text-transform: uppercase; color: var(--nsg-gold-2);
}
.nsg-tts-hist-ic {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 24px; color: var(--nsg-gold); line-height: 1;
}
.nsg-tts-hist-actions { display: flex; align-items: center; gap: 10px; }
.nsg-tts-hist-clear {
	background: transparent; border: none; cursor: pointer;
	color: var(--nsg-muted); font-size: 13px; text-decoration: underline;
}
.nsg-tts-hist-clear:hover { color: #c0392b; }
.nsg-tts-hist-toggle {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 18px; cursor: pointer; border: none;
	background: var(--nsg-dark); color: #f6e9c8;
	font-size: 14px; font-weight: 800; border-radius: 10px;
}
.nsg-tts-hist-toggle:hover { background: #3a2c17; color: #fff; }

.nsg-tts-hist-list { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.nsg-tts-hist-row {
	display: flex; align-items: center; gap: 12px;
	background: #fffdf7; border: 1px solid var(--nsg-line);
	border-radius: 12px; padding: 10px 12px;
}
.nsg-tts-hist-info { flex: 1 1 40%; min-width: 0; }
.nsg-tts-hist-snip {
	font-size: 14px; color: var(--nsg-ink); font-weight: 600;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nsg-tts-hist-meta { font-size: 12px; color: var(--nsg-muted); margin-top: 2px; }
.nsg-tts-hist-row audio { flex: 1 1 240px; height: 38px; min-width: 180px; }
.nsg-tts-hist-dl {
	flex: 0 0 auto; text-decoration: none; font-size: 18px;
	color: var(--nsg-gold-2); padding: 4px 6px;
}
.nsg-tts-hist-dl:hover { color: var(--nsg-dark); }
.nsg-tts-hist-del {
	flex: 0 0 auto; background: transparent; border: none; cursor: pointer;
	color: #b9a988; font-size: 15px; line-height: 1; padding: 4px 6px;
}
.nsg-tts-hist-del:hover { color: #c0392b; }

@media (max-width: 720px) {
	.nsg-tts-hist-row { flex-wrap: wrap; }
	.nsg-tts-hist-row audio { flex: 1 1 100%; order: 3; }
}

/* ---- Nút Tạo mới (secondary) ---- */
.nsg-tts-tool-btns { display: flex; align-items: center; gap: 10px; }
.nsg-tts-tool-new {
	padding: 12px 20px; cursor: pointer;
	background: #fffdf7; color: var(--nsg-gold-2);
	border: 1px solid var(--nsg-gold); border-radius: 11px;
	font-size: 15px; font-weight: 800; letter-spacing: .3px;
	transition: background .2s ease;
}
.nsg-tts-tool-new:hover { background: var(--nsg-cream-2); }
.nsg-tts-tool-new:active { transform: translateY(1px); }
@media (max-width: 720px) {
	.nsg-tts-tool-btns { width: 100%; }
	.nsg-tts-tool-new, .nsg-tts-tool-btns .nsg-tts-tool-btn { flex: 1 1 0; }
}

/* ---- Chọn giọng ở header ---- */
.nsg-tts-head-right { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.nsg-tts-head-voice { display: flex; flex-direction: column; gap: 5px; min-width: 190px; }
.nsg-tts-head-voice .nsg-tts-flabel { margin-bottom: 0; }
.nsg-tts-head-voice .nsg-tts-tool-voice {
	background: #fffdf7; border: 1px solid var(--nsg-gold);
	border-radius: 10px; color: var(--nsg-ink);
	font-size: 14px; font-weight: 600; padding: 9px 12px; cursor: pointer;
}
.nsg-tts-head-voice .nsg-tts-tool-voice:focus {
	outline: none; box-shadow: 0 0 0 3px rgba(199,154,60,.18);
}
@media (max-width: 720px) {
	.nsg-tts-head-right { width: 100%; }
	.nsg-tts-head-voice { flex: 1 1 100%; min-width: 0; }
}

/* ---- Nút nghe thử giọng ---- */
.nsg-tts-voice-wrap { display: flex; align-items: stretch; gap: 8px; }
.nsg-tts-voice-wrap .nsg-tts-tool-voice { flex: 1 1 auto; }
.nsg-tts-voice-preview {
	flex: 0 0 auto; width: 40px; cursor: pointer;
	background: var(--nsg-dark); color: #f6e9c8;
	border: none; border-radius: 10px;
	font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.nsg-tts-voice-preview:hover { background: #3a2c17; }
.nsg-tts-voice-preview.playing { background: var(--nsg-gold-2); color: #33240a; }