/* ==========================================================
   Danh Mục Đẹp – Bình luận & đánh giá sao
   ========================================================== */

.dmd-cm { margin: 28px 0 40px; color: var(--dmd-ink); font-size: 15px; }
.dmd-cm * { box-sizing: border-box; }
.dmd-cm button { font-family: inherit; text-transform: none; letter-spacing: 0; line-height: 1.2; min-height: 0; margin: 0; box-shadow: none; }
.dmd-cm ol, .dmd-cm ul { list-style: none; margin: 0; padding: 0; }
.dmd-cm li { margin: 0; }
.dmd-cm .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.dmd-rt,
.dmd-cm-card {
	padding: clamp(18px, 3vw, 30px);
	background: var(--dmd-card);
	border: 1px solid var(--dmd-line);
	border-radius: var(--dmd-radius);
	box-shadow: var(--dmd-shadow);
}
.dmd-rt { margin-bottom: 22px; }

/* ===================== ĐÁNH GIÁ ===================== */
.dmd-rt__head { margin-bottom: 18px; }
.dmd .dmd-rt__title,
.dmd .dmd-cm-title {
	position: relative; margin: 0; padding: 0 0 0 14px;
	font-size: 19px; font-weight: 800; line-height: 1.3; letter-spacing: .02em;
	text-transform: uppercase; color: var(--dmd-ink);
}
.dmd .dmd-rt__title::before,
.dmd .dmd-cm-title::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 4px; background: var(--dmd-accent); }

.dmd-rt__grid { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.1fr); gap: 26px; align-items: center; }
.dmd-rt__score { text-align: center; }
.dmd-rt__avg { font-size: 52px; font-weight: 900; line-height: 1; color: var(--dmd-ink); letter-spacing: -.02em; }
.dmd-rt__stars { position: relative; display: inline-block; margin: 8px 0 6px; font-size: 20px; letter-spacing: 3px; line-height: 1; }
.dmd-rt__stars span { color: var(--dmd-line); color: color-mix(in srgb, var(--dmd-ink) 18%, transparent); }
.dmd-rt__stars::after {
	content: "★★★★★"; position: absolute; left: 0; top: 0; width: var(--p, 0%); overflow: hidden; white-space: nowrap;
	color: #ffb400; text-shadow: 0 0 10px rgba(255, 180, 0, .35);
}
.dmd-rt__count { font-size: 13px; color: var(--dmd-ink-3); }
.dmd-rt__count b { color: var(--dmd-ink); }

.dmd-rt__bars { display: grid; gap: 7px; }
.dmd-rt__bar { display: grid; grid-template-columns: 36px 1fr 30px; align-items: center; gap: 10px; font-size: 13px; color: var(--dmd-ink-3); }
.dmd-rt__lbl { white-space: nowrap; }
.dmd-rt__track { height: 8px; border-radius: 99px; background: var(--dmd-soft); overflow: hidden; }
.dmd-rt__track i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffb400, #ff8a00); transition: width .6s cubic-bezier(.2, .7, .2, 1); }
.dmd-rt__num { text-align: right; }

.dmd-rt__vote { padding: 18px 16px; border-radius: calc(var(--dmd-radius) * .8); background: var(--dmd-soft); text-align: center; }
.dmd-rt__ask { margin: 0 0 10px; font-size: 14.5px; font-weight: 700; color: var(--dmd-ink); }
.dmd-rt__pick { display: inline-flex; gap: 4px; }
.dmd .dmd-rt__pick button {
	display: inline-flex; padding: 3px; border: 0; background: none; cursor: pointer; border-radius: 6px;
	transition: transform .15s;
}
.dmd-rt__pick svg { width: 34px; height: 34px; fill: color-mix(in srgb, var(--dmd-ink) 16%, transparent); transition: fill .15s, filter .15s; }
.dmd-rt__pick button:hover { transform: scale(1.15); }
.dmd-rt__pick button.is-hover svg,
.dmd-rt__pick button.is-on svg { fill: #ffb400; filter: drop-shadow(0 0 6px rgba(255, 180, 0, .45)); }
.dmd-rt__pick button:focus-visible { outline: 2px solid var(--dmd-accent); }
.dmd-rt__pick button:disabled { cursor: default; transform: none; }
.dmd-rt__hint { margin: 8px 0 0; min-height: 1.4em; font-size: 13px; font-weight: 700; color: #ffb400; }
.dmd-rt.is-busy .dmd-rt__pick { opacity: .5; pointer-events: none; }

/* ===================== KHUNG BÌNH LUẬN ===================== */
.dmd-cm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.dmd-cm-total {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 28px; height: 24px; margin-left: 6px; padding: 0 8px;
	border-radius: 99px; background: var(--dmd-accent); color: #fff; font-size: 13px; vertical-align: 2px;
}
.dmd-cm-sort { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--dmd-soft); }
.dmd .dmd-cm-sort button {
	padding: 7px 12px; border: 0; border-radius: 8px; background: none; cursor: pointer;
	color: var(--dmd-ink-3); font-size: 13px; font-weight: 700;
}
.dmd .dmd-cm-sort button:hover { color: var(--dmd-ink); }
.dmd .dmd-cm-sort button.is-active { background: var(--dmd-card); color: var(--dmd-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }

/* Ảnh đại diện */
.dmd-cm-avatar { flex: 0 0 44px; width: 44px; height: 44px; }
.dmd-cm-avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; margin: 0; }
.dmd-av {
	display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
	border-radius: 50%; color: #fff; font-size: 18px; font-weight: 800;
	background: linear-gradient(135deg, hsl(var(--h), 62%, 52%), hsl(calc(var(--h) + 40), 62%, 38%));
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .12);
}
.dmd-cm-avatar--me .dmd-av { background: var(--dmd-soft); color: var(--dmd-ink-3); }

/* Form */
.dmd-cm-form { margin: 0 0 26px; }
.dmd-cm-form__row { display: flex; gap: 12px; }
.dmd-cm-form__box {
	flex: 1; min-width: 0;
	border: 1px solid var(--dmd-line); border-radius: 14px; background: var(--dmd-soft);
	transition: border-color .2s, box-shadow .2s;
}
.dmd-cm-form__box:focus-within { border-color: var(--dmd-accent); box-shadow: 0 0 0 4px var(--dmd-accent-soft); }
.dmd .dmd-cm-form textarea {
	display: block; width: 100%; min-height: 52px; max-height: 420px; margin: 0; padding: 14px 16px 6px;
	border: 0; outline: 0; resize: none; background: transparent; box-shadow: none;
	color: var(--dmd-ink); font: inherit; font-size: 15px; line-height: 1.6;
}
.dmd .dmd-cm-form textarea::placeholder { color: var(--dmd-ink-3); }
.dmd-cm-form__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 4px 10px 8px; }
.dmd-cm-emoji { display: flex; flex-wrap: wrap; gap: 2px; }
.dmd .dmd-cm-emoji button { padding: 4px 5px; border: 0; border-radius: 6px; background: none; font-size: 17px; line-height: 1; cursor: pointer; filter: grayscale(.4); transition: transform .15s, filter .15s; }
.dmd .dmd-cm-emoji button:hover { transform: scale(1.25); filter: none; background: var(--dmd-card); }
.dmd-cm-pick { display: inline-flex; margin-left: 4px; padding-left: 10px; border-left: 1px solid var(--dmd-line); }
.dmd .dmd-cm-pick button { padding: 2px; border: 0; background: none; cursor: pointer; font-size: 19px; line-height: 1; color: color-mix(in srgb, var(--dmd-ink) 20%, transparent); transition: color .15s, transform .15s; }
.dmd .dmd-cm-pick button:hover { transform: scale(1.2); }
.dmd .dmd-cm-pick:hover button { color: #ffb400; }
.dmd .dmd-cm-pick button:hover ~ button { color: color-mix(in srgb, var(--dmd-ink) 20%, transparent); }
.dmd .dmd-cm-pick button.is-on { color: #ffb400; }
.dmd-cm-counter { margin-left: auto; font-size: 12px; color: var(--dmd-ink-3); }

.dmd-cm-guest { display: none; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 0 56px; }
.dmd-cm-form.is-open .dmd-cm-guest { display: grid; animation: dmdIn .25s ease; }
.dmd .dmd-cm-guest input {
	width: 100%; height: 44px; margin: 0; padding: 0 14px;
	border: 1px solid var(--dmd-line); border-radius: 10px; background: var(--dmd-soft); box-shadow: none;
	color: var(--dmd-ink); font-size: 14.5px;
}
.dmd .dmd-cm-guest input:focus { border-color: var(--dmd-accent); outline: 0; box-shadow: 0 0 0 3px var(--dmd-accent-soft); }
.dmd-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.dmd-cm-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 10px 0 0 56px; }
.dmd-cm-note { font-size: 12.5px; color: var(--dmd-ink-3); }
.dmd-cm-note b { color: var(--dmd-ink-2); }
.dmd-cm-replyto { font-size: 13px; color: var(--dmd-ink-2); }
.dmd-cm-replyto b { color: var(--dmd-accent); }
.dmd .dmd-cm-cancel { margin-left: 6px; padding: 2px 8px; border: 1px solid var(--dmd-line); border-radius: 6px; background: none; color: var(--dmd-ink-3); font-size: 12px; cursor: pointer; }
.dmd .dmd-cm-submit {
	position: relative; margin-left: auto; padding: 11px 22px; border: 0; border-radius: 10px;
	background: var(--dmd-accent); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer;
	box-shadow: 0 6px 18px color-mix(in srgb, var(--dmd-accent) 35%, transparent);
	transition: transform .15s, filter .15s;
}
.dmd .dmd-cm-submit:hover { transform: translateY(-1px); filter: brightness(1.1); }
.dmd .dmd-cm-submit:disabled { opacity: .7; cursor: wait; transform: none; }
.dmd-cm-submit.is-busy::after,
.dmd-cm-more.is-busy::after {
	content: ""; display: inline-block; width: 13px; height: 13px; margin-left: 8px; vertical-align: -2px;
	border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: dmdSpin .7s linear infinite;
}
.dmd-cm-alert { margin: 10px 0 0 56px; padding: 10px 14px; border-radius: 10px; font-size: 13.5px; background: var(--dmd-soft); color: var(--dmd-ink-2); }
.dmd-cm-alert.is-err { background: rgba(229, 57, 53, .14); color: #ff8a80; border: 1px solid rgba(229, 57, 53, .35); }
.dmd-scheme-light .dmd-cm-alert.is-err { color: #c62828; }

/* Form khi trả lời: thu gọn, nằm dưới bình luận */
.dmd-cm-form.is-reply { margin: 12px 0 6px; }
.dmd-cm-form.is-reply .dmd-cm-avatar { flex-basis: 34px; width: 34px; height: 34px; }
.dmd-cm-form.is-reply .dmd-cm-avatar img { width: 34px; height: 34px; }
.dmd-cm-form.is-reply .dmd-cm-guest,
.dmd-cm-form.is-reply .dmd-cm-form__foot,
.dmd-cm-form.is-reply .dmd-cm-alert { margin-left: 46px; }

/* Danh sách */
.dmd-cm-list { position: relative; transition: opacity .2s; }
.dmd-cm-list.is-loading { opacity: .45; pointer-events: none; }
.dmd-cm-item { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--dmd-line); }
.dmd-cm-list > .dmd-cm-item:first-child { border-top: 0; }
.dmd-cm-main { flex: 1; min-width: 0; }
.dmd-cm-bubble { padding: 12px 16px; border-radius: 4px 14px 14px 14px; background: var(--dmd-soft); }
.dmd-cm-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 5px; }
.dmd-cm-name { font-size: 14.5px; font-weight: 800; color: var(--dmd-ink); }
.dmd-cm-badge { padding: 2px 8px; border-radius: 99px; background: var(--dmd-accent-soft); color: var(--dmd-accent); font-size: 11px; font-weight: 800; }
.dmd-cm-badge.is-admin { background: var(--dmd-accent); color: #fff; }
.dmd-cm-stars { color: #ffb400; font-size: 12px; letter-spacing: 1px; }
.dmd-cm-stars i { font-style: normal; color: color-mix(in srgb, var(--dmd-ink) 18%, transparent); }
.dmd .dmd-cm-time { margin-left: auto; font-size: 12px; color: var(--dmd-ink-3); }
.dmd .dmd-cm-time:hover { color: var(--dmd-accent); }
.dmd-cm-text { color: var(--dmd-ink-2); font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; }
.dmd-cm-text p { margin: 0 0 .6em; }
.dmd-cm-text p:last-child { margin-bottom: 0; }
.dmd-cm-to { color: var(--dmd-accent); font-weight: 700; }
.dmd-cm-pending { margin: 0 0 6px; font-size: 12.5px; color: #ffb400; }
.dmd-cm-flag { margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 180, 0, .12); color: #ffb400; font-size: 12.5px; font-weight: 600; }
.dmd-cm-item.is-flagged > .dmd-cm-main > .dmd-cm-bubble { box-shadow: inset 3px 0 0 #ffb400; }

.dmd-cm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 6px 0 0 6px; }
.dmd .dmd-cm-actions > button,
.dmd .dmd-cm-mod button {
	display: inline-flex; align-items: center; gap: 5px; padding: 3px 2px; border: 0; background: none; cursor: pointer;
	color: var(--dmd-ink-3); font-size: 13px; font-weight: 700;
}
.dmd .dmd-cm-actions > button:hover { color: var(--dmd-accent); }
.dmd-cm-like svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; transition: transform .2s; }
.dmd .dmd-cm-like.is-liked { color: var(--dmd-accent); }
.dmd-cm-like.is-liked svg { fill: currentColor; fill-opacity: .25; }
.dmd-cm-like.is-pop svg { animation: dmdPop .4s ease; }
.dmd-cm-mod { display: inline-flex; gap: 10px; margin-left: auto; padding-left: 10px; border-left: 1px solid var(--dmd-line); }
.dmd .dmd-cm-mod button { font-size: 12px; }
.dmd .dmd-cm-mod button:hover { color: var(--dmd-ink); }
.dmd .dmd-cm-mod button.is-danger:hover { color: #ff5252; }

.dmd-cm-replies { margin-top: 4px; }
.dmd-cm-replies:empty { display: none; }
.dmd-cm-replies .dmd-cm-item { padding: 10px 0 2px; border-top: 0; }
.dmd-cm-replies { position: relative; padding-left: 2px; }
.dmd-cm-replies::before { content: ""; position: absolute; left: -34px; top: 0; bottom: 18px; width: 2px; border-radius: 2px; background: var(--dmd-line); }
.dmd-cm-item.is-reply .dmd-cm-avatar { flex-basis: 34px; width: 34px; height: 34px; }
.dmd-cm-item.is-reply .dmd-cm-avatar img { width: 34px; height: 34px; }
.dmd-cm-item.is-reply .dmd-av { font-size: 14px; }

.dmd-cm-item.is-new > .dmd-cm-main > .dmd-cm-bubble { animation: dmdFlash 2.2s ease; }
.dmd-cm-item.is-removing { opacity: 0; transform: translateX(20px); transition: all .3s; }

.dmd-cm-empty { margin: 6px 0 0; padding: 26px 16px; border: 1px dashed var(--dmd-line); border-radius: 12px; text-align: center; color: var(--dmd-ink-3); }
.dmd-cm-closed { margin: 0 0 16px; color: var(--dmd-ink-3); }
.dmd .dmd-cm-more {
	display: block; width: 100%; margin: 16px 0 0; padding: 12px; border: 1px solid var(--dmd-line); border-radius: 10px;
	background: var(--dmd-soft); color: var(--dmd-ink); font-size: 14px; font-weight: 700; cursor: pointer;
}
.dmd .dmd-cm-more:hover { border-color: var(--dmd-accent); color: var(--dmd-accent); }
.dmd-cm [hidden] { display: none !important; }

/* Thông báo nổi */
.dmd-toast {
	position: fixed; left: 50%; bottom: 24px; z-index: 100001; max-width: calc(100% - 32px);
	padding: 12px 18px; border-radius: 12px; background: #111; color: #fff; font-size: 14px; font-weight: 600;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .45); transform: translate(-50%, 20px); opacity: 0; transition: all .25s ease;
}
.dmd-toast.is-in { transform: translate(-50%, 0); opacity: 1; }
.dmd-toast.is-ok { border-left: 4px solid #43a047; }
.dmd-toast.is-err { border-left: 4px solid #e53935; }

@keyframes dmdSpin { to { transform: rotate(360deg); } }
@keyframes dmdIn { from { opacity: 0; transform: translateY(-4px); } }
@keyframes dmdPop { 50% { transform: scale(1.45) rotate(-12deg); } }
@keyframes dmdFlash { 0%, 30% { box-shadow: 0 0 0 2px var(--dmd-accent); } 100% { box-shadow: 0 0 0 0 transparent; } }

/* Ẩn khung bình luận của theme/wpDiscuz nếu còn sót */
.dmd-cm ~ #wpdcom, .dmd-cm ~ .wpdiscuz_top_clearing, .dmd-cm ~ #comments:not(.dmd-cm) { display: none !important; }

/* Đáp ứng */
.dmd-rt { container-type: inline-size; }
@container (max-width: 680px) {
	.dmd-rt__grid { grid-template-columns: 120px minmax(0, 1fr); gap: 18px; }
	.dmd-rt__vote { grid-column: 1 / -1; }
	.dmd-rt__avg { font-size: 42px; }
}
@container (max-width: 380px) {
	.dmd-rt__grid { grid-template-columns: 1fr; }
	.dmd-rt__pick svg { width: 30px; height: 30px; }
}
@media (max-width: 549px) {
	.dmd-cm-guest { grid-template-columns: 1fr; margin-left: 0; }
	.dmd-cm-form__foot, .dmd-cm-alert { margin-left: 0 !important; }
	.dmd .dmd-cm-submit { width: 100%; }
	.dmd-cm-form .dmd-cm-avatar { display: none; }
	.dmd-cm-pick { border-left: 0; padding-left: 0; margin-left: 0; }
	.dmd-cm-replies::before { left: -26px; }
	.dmd-cm-item { gap: 10px; }
	.dmd-cm-mod { margin-left: 0; border-left: 0; padding-left: 0; }
}