/* Toàn Nhân Reviews — màu lấy từ token của theme may-in-toan-nhan, có giá trị dự phòng. */
/* .tnr-google: khối Google đứng riêng (trang Đánh giá thực tế, trang chủ…) ngoài .tnr-wrap → phải tự có biến màu, thiếu là sao trong suốt. */
.tnr, .tnr-wrap, .tnr-meta, .tnr-google {
	--tnr-brand: var(--color-brand-deep, #9f1d1d);
	--tnr-accent: var(--color-text-accent, #c12424);
	--tnr-text: var(--color-text-body, #1f2937);
	--tnr-muted: var(--color-text-subtle, #6b7280);
	--tnr-surface: var(--color-surface-raised, #f9fafb);
	--tnr-line: #e5e7eb;
	--tnr-star: #f5a623;
	--tnr-ok: #15803d;
}
.tnr { color: var(--tnr-text); margin: 0 0 2rem; }
/* Gỡ style nút/ô nhập của Flatsome (in hoa, min-height, margin, shadow). */
.tnr-wrap button, .tnr button, .tnr summary { min-height: 0; margin: 0; text-transform: none; letter-spacing: normal; line-height: 1.4; box-shadow: none; }
.tnr-wrap input, .tnr input, .tnr textarea { margin: 0; box-shadow: none; }
.tnr-title { font-size: 1.25rem; margin: 0 0 1rem; }

/* Sao tô theo --v (0–5) */
.tnr-stars { display: inline-block; font-size: 1em; line-height: 1; letter-spacing: 2px; vertical-align: middle; }
.tnr-stars::before {
	content: "★★★★★";
	background: linear-gradient(90deg, var(--tnr-star) calc(var(--v, 0) / 5 * 100%), #d1d5db 0);
	-webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Tóm tắt */
.tnr-summary { display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 1.2fr); gap: 1.5rem 2rem; align-items: center; padding: 1.5rem 2rem; border: 1px solid var(--tnr-line); border-radius: 12px; margin-bottom: 1rem; }
.tnr-overview { display: grid; gap: .75rem; }
.tnr-score { display: flex; align-items: center; gap: 1rem; }
.tnr-score b { font-size: 2.5rem; line-height: 1; color: var(--tnr-brand); min-width: 2.5ch; text-align: center; }
.tnr-score > div { display: grid; gap: .2rem; }
.tnr-score .tnr-stars { font-size: 1.25rem; }
.tnr-score span { color: var(--tnr-muted); font-size: .875rem; }
.tnr-bars { display: grid; gap: .3rem; }
.tnr-gallery { display: grid; justify-items: center; gap: .5rem; text-align: center; }
.tnr-gallery > span { font-weight: 600; }
.tnr-gallery .tnr-photos { justify-content: center; margin: 0; flex-wrap: nowrap; }
.tnr-gallery .tnr-photo img { width: 64px; height: 64px; }
.tnr-gallery:not(:has(.tnr-photos)) { display: none; }
.tnr-empty { border: 1px solid var(--tnr-line); border-radius: 12px; padding: 1.25rem 1.5rem; margin: 0; }
@media (max-width: 900px) {
	.tnr-summary { grid-template-columns: 1fr; padding: 1.25rem; }
	.tnr-gallery { justify-items: start; text-align: left; }
}
.tnr-bar { display: grid; grid-template-columns: 2.5rem 1fr 2.5rem; gap: .5rem; align-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; font-size: .875rem; text-align: left; }
.tnr-bar i { height: 8px; border-radius: 4px; background: var(--tnr-line); position: relative; overflow: hidden; }
.tnr-bar i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); background: var(--tnr-star); }
.tnr-bar span:last-child { color: var(--tnr-muted); text-align: right; }

/* Nút */

/* Lọc */
.tnr-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.tnr-filters button { padding: .35rem .85rem; border: 1px solid var(--tnr-line); border-radius: 999px; background: #fff; color: inherit; font: inherit; font-size: .875rem; cursor: pointer; }
.tnr-filters button[aria-pressed="true"] { border-color: var(--tnr-brand); color: var(--tnr-brand); background: #fef2f2; font-weight: 600; }

/* Danh sách */
.tnr-list[aria-busy="true"] { opacity: .5; pointer-events: none; }
.tnr-item { padding: 1rem 0; border-bottom: 1px solid var(--tnr-line); }
.tnr-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.tnr-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #e5e7eb; color: #374151; font-weight: 700; font-size: .875rem; flex: none; }
.tnr-avatar.is-shop { background: var(--tnr-brand); color: #fff; }
.tnr-name { font-size: .95rem; }
.tnr-badge { font-size: .75rem; color: var(--tnr-ok); background: #f0fdf4; border-radius: 4px; padding: .1rem .4rem; }
.tnr-badge.is-shop { color: var(--tnr-brand); background: #fef2f2; }
.tnr-head time { color: var(--tnr-muted); font-size: .8rem; margin-left: auto; }
.tnr-product { display: inline-block; font-size: .85rem; color: var(--tnr-accent); margin-bottom: .25rem; }
.tnr-text { margin: .35rem 0; line-height: 1.6; }
.tnr-text p { margin: 0 0 .5em; }
.tnr-photos { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0; }
.tnr-photo { padding: 0; border: 1px solid var(--tnr-line); border-radius: 8px; overflow: hidden; background: none; cursor: zoom-in; }
.tnr-photo img { width: 80px; height: 80px; object-fit: cover; display: block; }
.tnr-reply { margin: .75rem 0 0 2.5rem; padding: .75rem 1rem; background: var(--tnr-surface); border-radius: 8px; }
.tnr-reply.is-shop { border-left: 3px solid var(--tnr-brand); }
.tnr .tnr-more { display: block; margin: 1rem auto 0; padding: .55rem 1.5rem; border: 1px solid var(--tnr-line); border-radius: 8px; background: #fff; font: inherit; cursor: pointer; }

/* Meta ở hero / lưới */
.tnr-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .875rem; color: var(--tnr-muted); }
/* Thẻ ở lưới: một hàng, không xuống dòng. */
.tnr-meta.is-compact { flex-wrap: nowrap; white-space: nowrap; }
.tnr-meta a { color: inherit; text-decoration: none; }
.tnr-sold { padding-left: .4rem; border-left: 1px solid var(--tnr-line); }
.tnr-sold:first-child { padding-left: 0; border-left: 0; } /* 0 đánh giá: chỉ còn "Đã bán", bỏ vạch ngăn */

/* Lightbox */
.tnr-lightbox { padding: 0; border: 0; background: transparent; max-width: 100vw; max-height: 100vh; overflow: visible; }
.tnr-lightbox::backdrop { background: rgba(0, 0, 0, .88); }
.tnr-lightbox .tnr-lb-img { max-width: 92vw; max-height: 86vh; display: block; border-radius: 6px; user-select: none; }
.tnr-lightbox button { position: fixed; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #111; cursor: pointer; box-shadow: 0 2px 12px rgba(0, 0, 0, .3); }
.tnr-lightbox .tnr-lb-x { top: 1rem; right: 1rem; width: 44px; height: 44px; font-size: 1.6rem; line-height: 1; }
.tnr-lightbox .tnr-lb-prev, .tnr-lightbox .tnr-lb-next { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 2.2rem; line-height: 1; }
.tnr-lightbox .tnr-lb-prev { left: 1rem; }
.tnr-lightbox .tnr-lb-next { right: 1rem; }
.tnr-lightbox button:hover { background: #fff; }
.tnr-lightbox.is-single .tnr-lb-prev, .tnr-lightbox.is-single .tnr-lb-next { display: none; }
.tnr-lb-count { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%); padding: .25rem .75rem; border-radius: 999px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .9rem; }
.tnr-lb-count:empty { display: none; }
@media (max-width: 600px) { .tnr-lightbox .tnr-lb-prev, .tnr-lightbox .tnr-lb-next { width: 40px; height: 40px; font-size: 1.8rem; } .tnr-lightbox .tnr-lb-prev { left: .5rem; } .tnr-lightbox .tnr-lb-next { right: .5rem; } }

@media (max-width: 600px) {
	.tnr-summary { gap: 1rem; padding: 1rem; }
	.tnr-reply { margin-left: 1rem; }
}

.tnr-qa-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.tnr-qa-head .tnr-title { margin: 0; }

/* Tab Đánh giá / Hỏi đáp */
.tnr-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--tnr-line); margin: 0 0 1rem; }
.tnr-wrap .tnr-tabs button { min-height: 0; margin: 0 0 -1px; padding: .7rem 1.1rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--tnr-muted); font: inherit; font-weight: 600; text-transform: none; letter-spacing: normal; cursor: pointer; box-shadow: none; }
.tnr-wrap .tnr-tabs button[aria-selected="true"] { color: var(--tnr-brand); border-bottom-color: var(--tnr-brand); }
.tnr-tabs span { display: inline-block; min-width: 1.6em; padding: 0 .4em; margin-left: .3rem; border-radius: 999px; background: var(--tnr-surface); font-size: .8rem; color: var(--tnr-muted); }
.tnr-tabs [aria-selected="true"] span { background: #fef2f2; color: var(--tnr-brand); }
.tnr-qa-head > span { color: var(--tnr-muted); }

/* Logo web làm avatar câu trả lời của shop */
.tnr-avatar.is-logo { object-fit: contain; background: #fff; border: 1px solid var(--tnr-line); padding: 2px; box-sizing: border-box; }

/* Ô "+N" cuối hàng ảnh */
.tnr-photo-more { position: relative; }
.tnr-photo-more img { filter: brightness(.45); }
.tnr-photo-more b { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 1.1rem; }
/* Logo Toàn Nhân góc trái khung xem ảnh — nền trắng để logo đỏ/đen rõ trên nền tối */
.tnr-lb-logo { position: fixed; top: 1rem; left: 1rem; padding: .4rem .75rem; border-radius: 10px; background: #fff; box-shadow: 0 2px 12px rgba(0, 0, 0, .3); line-height: 0; }
.tnr-lb-logo img { height: 32px; width: auto; display: block; }
@media (max-width: 600px) { .tnr-lb-logo { top: .75rem; left: .75rem; } .tnr-lb-logo img { height: 24px; } }

/* Khung chờ danh sách tải trễ. min-height đủ lớn để khung thu gọn của theme (đo chiều cao lúc load,
   ngưỡng 760px) vẫn bật; ô xám nhấp nháy nhẹ thay cho chữ "Đang tải". */
/* Khung chờ đủ cao (~5 đánh giá): theme đo lúc tải trang để bật khung thu gọn 760px — thấp quá thì theme tắt hẳn. Tải xong fitCollapse() căn lại; ít đánh giá thì hiện hết, ẩn nút. */
.tnr-list[data-lazy] { min-height: 600px; }
.tnr-skel { padding: 1rem 0; border-bottom: 1px solid var(--tnr-line); display: grid; gap: .5rem; }
.tnr-skel i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, #eef0f3 25%, #f6f7f9 50%, #eef0f3 75%); background-size: 200% 100%; animation: tnr-skel 1.2s linear infinite; }
.tnr-skel i:first-child { width: 30%; height: 16px; }
.tnr-skel i:nth-child(2) { width: 85%; }
.tnr-skel i:nth-child(3) { width: 55%; }
@keyframes tnr-skel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .tnr-skel i { animation: none; } }

/* Khung "Xem thêm đánh giá" của theme khi plugin đã căn theo đánh giá trọn vẹn (fitCollapse trong JS):
   lớp mờ chỉ phủ phần đầu đánh giá kế tiếp; danh sách vừa hết thì bỏ mờ + nút. */
.reviews-collapse.tnr-fit:not(.is-expanded) .reviews-collapse__fade { height: 56px; }
.reviews-collapse.tnr-fit-all:not(.is-expanded) .reviews-collapse__fade { display: none; }
.reviews-collapse.tnr-fit-all:not(.is-expanded) + .reviews-collapse__footer { display: none; }

/* Khối đánh giá Google (inc/google.php) — thẻ theo kiểu Google Maps */
.tnr-google { margin-bottom: 1rem; color: var(--tnr-text); }
.tnr-g-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem 1.5rem; margin-bottom: 1rem; }
.tnr-g-head > div:first-child strong { font-size: 1.05rem; }
.tnr-g-head > div:first-child span { display: block; color: var(--tnr-muted); font-size: .85rem; }
.tnr-g-score { display: flex; align-items: center; gap: .5rem; }
.tnr-g-score b { font-size: 1.75rem; line-height: 1; }
.tnr-g-score span { color: var(--tnr-muted); font-size: .85rem; }
.tnr-g-score .tnr-stars { --tnr-star: #fbbc04; font-size: 1.2rem; }
.tnr-g-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
.tnr-g-item { background: #f4f4f4; border-radius: 14px; padding: 1.1rem 1.25rem 1rem; display: flex; flex-direction: column; }
.tnr-g-top { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.tnr-g-avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.1rem; }
.tnr-g-who { flex: 1; min-width: 0; line-height: 1.3; }
.tnr-g-who strong { display: block; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tnr-g-who span { color: var(--tnr-muted); font-size: .875rem; }
.tnr-g-logo { flex: none; align-self: flex-start; }
.tnr-g-rate { display: flex; align-items: center; gap: .35rem; margin-bottom: .5rem; }
.tnr-g-rate .tnr-stars { --tnr-star: #fbbc04; font-size: 1.15rem; }
/* Thu gọn: lời khách 4 dòng, trả lời 1 dòng, có dấu … ; bấm Đọc thêm thì mở hết */
.tnr-g-text, .tnr-g-reply p { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 4; }
.tnr-g-reply p { -webkit-line-clamp: 1; }
.tnr-g-item.is-open .tnr-g-text, .tnr-g-item.is-open .tnr-g-reply p { -webkit-line-clamp: unset; }
.tnr-g-text { margin: 0; font-size: .95rem; line-height: 1.5; white-space: pre-line; }
.tnr-g-reply { margin-top: .85rem; font-size: .9rem; }
.tnr-g-reply b { display: block; margin-bottom: .15rem; }
.tnr-g-reply p { margin: 0; white-space: pre-line; }
/* Gỡ style nút của Flatsome (in hoa, đậm, min-height) — khối Google có thể nằm ngoài .tnr-wrap. */
.tnr-google .tnr-g-toggle { align-self: flex-start; min-height: 0; margin: auto 0 0; background: none; border: 0; padding: .6rem 0 0; color: var(--tnr-muted); font: inherit; font-size: .9rem; font-weight: 500; text-transform: none; letter-spacing: normal; line-height: 1.4; box-shadow: none; cursor: pointer; }
.tnr-g-toggle:hover { color: var(--tnr-text); }
.tnr-g-more { display: table; margin: 1.25rem auto 0; padding: .6rem 1.5rem; border: 1px solid var(--tnr-line); border-radius: 999px; background: #fff; color: var(--tnr-text); font-size: .9rem; font-weight: 600; text-decoration: none; }
.tnr-g-more:hover { border-color: var(--tnr-accent); color: var(--tnr-accent); }
.tnr-invite { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; border: 1px dashed var(--tnr-line); border-radius: 12px; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.tnr-invite p { margin: 0; }
.tnr-invite-btn { display: inline-block; background: #0068ff; color: #fff !important; border-radius: 8px; padding: .5rem 1rem; font-weight: 600; text-decoration: none; }
.tnr-invite-btn:hover { background: #0057d6; }
.tnr-meta-zalo { display: inline-flex; align-items: center; border: 1px solid #0068ff; color: #0068ff !important; border-radius: 999px; padding: .1rem .65rem; font-size: .8rem; font-weight: 600; line-height: 1.5; text-decoration: none; white-space: nowrap; }
.tnr-meta-zalo:hover { background: #0068ff; color: #fff !important; }

/* [tn_reviews_all layout="grid"] — lưới thẻ 4 cột, dưới 1024px 2 cột (điện thoại 2 cột: thẻ gọn, chữ cắt dòng) */
.tnr-list.is-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.tnr-list.is-grid > .tnr-item { display: flex; flex-direction: column; min-width: 0; padding: 1rem; border: 1px solid var(--tnr-line); border-radius: 12px; background: #fff; }
.tnr-list.is-grid .tnr-head time { margin-left: 0; }
.tnr-list.is-grid .tnr-product { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tnr-list.is-grid > .tnr-item > .tnr-text { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.tnr-list.is-grid .tnr-reply { margin: .5rem 0 0; padding: .5rem .75rem; }
.tnr-list.is-grid .tnr-reply .tnr-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.tnr-list.is-grid .tnr-photo img { width: 56px; height: 56px; }
@media (max-width: 1023px) { .tnr-list.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
	.tnr-list.is-grid { gap: .5rem; }
	.tnr-list.is-grid > .tnr-item { padding: .75rem; font-size: .875rem; }
	.tnr-list.is-grid .tnr-avatar { width: 26px; height: 26px; font-size: .75rem; }
	.tnr-list.is-grid .tnr-badge { font-size: .7rem; }
	.tnr-list.is-grid > .tnr-item > .tnr-text { -webkit-line-clamp: 5; }
	.tnr-list.is-grid .tnr-reply .tnr-head .tnr-badge { display: none; }
}