/* ELC Comments - giao diện bình luận kiểu Mac OS, dùng chung cho 4 module. */
.elc-comments,
.elc-comments * { box-sizing: border-box; }

.elc-comments {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	max-width: 1180px;
	margin: 28px auto 0;
	padding: 26px 24px;
	border: 1px solid #e3e9f0;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(30, 55, 85, .05);
	text-align: left;
	color: #3d485a;
}

/* Sách và IELTS dùng bố cục rộng 1280px, còn Từ vựng/Dictation 1180px. */
.elc-comments[data-module="sach"],
.elc-comments[data-module="ielts"] {
	max-width: 1280px;
}

.elc-comments-title {
	margin: 0 0 18px;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: #17233b;
}
.elc-comments-count { color: #8793a4; font-weight: 500; }

.elc-comment {
	display: flex;
	gap: 12px;
	padding: 14px 0;
	border-top: 1px solid #f0f3f7;
}
.elc-comment:first-child { border-top: 0; }

.elc-comment-avatar {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	background: #eef2f7;
}
.elc-comment-avatar-ph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #6d7a90;
	font-weight: 700;
	font-size: 16px;
}

.elc-comment-body { flex: 1; min-width: 0; }
.elc-comment-name { font-size: 14px; font-weight: 700; color: #17233b; }
.elc-comment-content { margin-top: 2px; font-size: 14px; line-height: 1.55; color: #3d485a; overflow-wrap: break-word; }

.elc-comments-pagination { margin: 8px 0 4px; min-height: 34px; }
.elc-comments-pages { display: flex; flex-wrap: wrap; gap: 8px; }
.elc-comments-page {
	min-width: 34px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid #dce3eb;
	border-radius: 10px;
	background: #fff;
	color: #3d485a;
	font: 600 13px/1 Inter, sans-serif;
	cursor: pointer;
}
.elc-comments-page:hover { background: #f5f7fa; }
.elc-comments-page.is-active {
	border-color: #4b8ede;
	background: linear-gradient(180deg, #4b8ede, #367fcf);
	color: #fff;
}
.elc-comments-loading { color: #8793a4; font-size: 13px; }

.elc-comments-form-wrap { margin-top: 18px; }
.elc-comments-form { display: flex; flex-direction: column; gap: 10px; }
.elc-comments-textarea {
	width: 100%;
	min-height: 84px;
	padding: 12px 14px;
	border: 1px solid #dce3eb;
	border-radius: 12px;
	font: 400 14px/1.5 Inter, sans-serif;
	color: #3d485a;
	resize: vertical;
}
.elc-comments-textarea:focus { outline: none; border-color: #4b8ede; box-shadow: 0 0 0 3px rgba(75, 142, 222, .15); }

.elc-comments-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.elc-comments-msg { font-size: 13px; color: #2e9e5b; }
.elc-comments-submit {
	min-height: 42px;
	padding: 10px 22px;
	border: 0;
	border-radius: 12px;
	background: linear-gradient(180deg, #4b8ede, #367fcf);
	color: #fff;
	font: 700 14px/1 Inter, sans-serif;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(54, 127, 207, .28);
}
.elc-comments-submit:disabled { opacity: .55; cursor: not-allowed; }
.elc-comments-login { margin: 0; font-size: 14px; }
.elc-comments-login a { color: #367fcf; font-weight: 600; text-decoration: none; }