/* ── Trang Review: đánh giá & bình luận (js/pages/review.js) ── */
.rv { padding: 14px 16px 24px; --rv-gold: #fbbf24; --rv-card: rgba(15, 20, 30, .72); --rv-line: rgba(148, 163, 184, .14); }
.rv-hd { border-left: 3px solid var(--rv-gold); padding: 2px 0 2px 12px; margin-bottom: 14px; }
.rv-title { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: .04em; color: var(--text); }
.rv-star { color: var(--rv-gold); text-shadow: 0 0 12px rgba(251,191,36,.55); }
.rv-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }

.rv-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 14px; align-items: start; }
.rv-left { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rv-card { background: var(--rv-card); border: 1px solid var(--rv-line); border-radius: 16px; padding: 18px 20px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }

/* tổng điểm + phân bố sao */
.rv-sum { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; border-color: rgba(251,191,36,.28); background: linear-gradient(180deg, rgba(251,191,36,.06), transparent 70%), var(--rv-card); }
.rv-sum-l { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 18px; }
.rv-avg { font-family: var(--font-display); font-size: 58px; line-height: 1; font-weight: 800; color: var(--rv-gold); text-shadow: 0 0 22px rgba(251,191,36,.35); }
.rv-cnt { font-size: 12.5px; color: var(--text-muted); text-align: center; }
.rv-stars { display: inline-flex; gap: 3px; font-size: 26px; line-height: 1; }
.rv-stars.sm { font-size: 14px; gap: 1px; }
.rv-s { font-style: normal; color: rgba(148,163,184,.28); }
.rv-s.on { color: var(--rv-gold); text-shadow: 0 0 8px rgba(251,191,36,.45); }
.rv-s.half { background: linear-gradient(90deg, var(--rv-gold) 50%, rgba(148,163,184,.28) 50%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rv-dist { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rv-dr { display: grid; grid-template-columns: 34px 1fr 30px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--text-muted); }
.rv-dr > b { text-align: right; color: var(--text); font-weight: 700; }
.rv-db { height: 8px; border-radius: 99px; background: rgba(148,163,184,.12); overflow: hidden; }
.rv-db i { display: block; height: 100%; border-radius: 99px; background: var(--c); box-shadow: 0 0 10px var(--c); transition: width .5s ease; }

/* viết đánh giá */
.rv-wt { font-weight: 800; font-size: 16px; color: var(--text); margin-bottom: 12px; }
.rv-lb { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 10px 0 8px; }
.rv-pick { display: flex; align-items: center; gap: 6px; }
.rv-pick button { border: 0; background: none; cursor: pointer; font-size: 34px; line-height: 1; padding: 0 2px; color: rgba(148,163,184,.3); transition: transform .12s, color .12s, text-shadow .12s; }
.rv-pick button.on, .rv-pick button.hov { color: var(--rv-gold); text-shadow: 0 0 14px rgba(251,191,36,.6); }
.rv-pick button:hover { transform: scale(1.15); }
.rv-pickt { margin-left: 10px; font-weight: 800; font-size: 14px; }
.rv-text { width: 100%; box-sizing: border-box; min-height: 96px; resize: vertical; border-radius: 12px; border: 1px solid var(--rv-line); background: rgba(0,0,0,.25);
  color: var(--text); font: inherit; font-size: 14px; padding: 12px 14px; outline: none; transition: border-color .15s, box-shadow .15s; }
.rv-text:focus { border-color: rgba(251,191,36,.55); box-shadow: 0 0 0 3px rgba(251,191,36,.12); }
.rv-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-muted); margin: 6px 2px 0; }
.rv-msg.ok { color: #4ade80; } .rv-msg.bad { color: #f87171; }
.rv-acts { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.rv-send { flex: 1; min-width: 200px; border: 1px solid rgba(251,191,36,.6); border-radius: 12px; padding: 12px; cursor: pointer; font-weight: 800; letter-spacing: .04em; color: #1a1305;
  background: linear-gradient(180deg, #fcd34d, #f59e0b); box-shadow: 0 0 22px rgba(251,191,36,.3); transition: transform .12s, box-shadow .12s, opacity .12s; }
.rv-send:hover { transform: translateY(-1px); box-shadow: 0 0 30px rgba(251,191,36,.45); }
.rv-send:disabled { opacity: .6; cursor: wait; }
.rv-del { border: 1px solid rgba(248,113,113,.45); background: transparent; color: #f87171; border-radius: 12px; padding: 0 16px; cursor: pointer; font-weight: 700; }
.rv-del:hover { background: rgba(248,113,113,.1); }
.rv-gate { padding: 18px; border-radius: 12px; border: 1px dashed var(--rv-line); color: var(--text-muted); text-align: center; line-height: 1.6; }
.rv-login { margin-left: 8px; border: 1px solid #5865f2; background: rgba(88,101,242,.15); color: #c7cbff; border-radius: 10px; padding: 6px 12px; cursor: pointer; font-weight: 700; }

/* danh sách bình luận */
.rv-listw { display: flex; flex-direction: column; max-height: calc(100vh - var(--header-h, 72px) - 120px); min-height: 300px; }
.rv-lt { font-weight: 800; font-size: 16px; color: var(--text); margin-bottom: 12px; }
.rv-ltn { color: var(--text-muted); font-weight: 600; font-size: 13px; }
.rv-list { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding-right: 4px; }
.rv-it { border-radius: 14px; padding: 12px 14px; background: rgba(0,0,0,.22); border: 1px solid var(--rv-line); transition: border-color .15s; }
.rv-it:hover { border-color: rgba(148,163,184,.28); }
.rv-it.mine { border-color: rgba(251,191,36,.4); background: rgba(251,191,36,.05); }
.rv-ih { display: flex; align-items: center; gap: 10px; }
.rv-av { --h: 40; width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; font-weight: 800; font-size: 13px;
  color: hsl(var(--h) 90% 72%); background: hsl(var(--h) 45% 16%); border: 1.5px solid hsl(var(--h) 60% 40%); }
.rv-iw { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.rv-iw > b { color: var(--text); font-size: 14px; }
.rv-iw em { font-style: normal; font-size: 10.5px; font-weight: 800; color: #1a1305; background: var(--rv-gold); border-radius: 99px; padding: 1px 7px; margin-left: 4px; vertical-align: 1px; }
.rv-t { margin-left: auto; font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.rv-x { border: 0; background: rgba(248,113,113,.12); color: #f87171; border-radius: 8px; width: auto; min-width: 26px; height: 26px; padding: 0 6px; cursor: pointer; font-size: 12px; font-weight: 700; }
.rv-ix { margin: 10px 0 0 46px; color: var(--text); font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.rv-empty { color: var(--text-muted); text-align: center; padding: 30px 10px; }

@media (max-width: 1000px) { .rv-grid { grid-template-columns: 1fr; } .rv-listw { max-height: none; } }
@media (max-width: 560px) { .rv-sum { grid-template-columns: 1fr; gap: 14px; } }

/* ảnh đính kèm: chọn ảnh + xem trước · ảnh trong bình luận · xem ảnh lớn */
.rv-imgs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.rv-thumbs { display: contents; }
.rv-th { position: relative; width: 74px; height: 74px; border-radius: 10px; overflow: hidden; border: 1px solid var(--rv-line); background: rgba(0,0,0,.3); }
.rv-th img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; display: block; }
.rv-th button { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.75); color: #fff; font-size: 11px; cursor: pointer; line-height: 20px; padding: 0; }
.rv-th button:hover { background: #ef4444; }
.rv-add { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 10px; border: 1px dashed rgba(251,191,36,.45); color: var(--rv-gold); font-weight: 700; font-size: 13px; cursor: pointer; transition: background .12s; }
.rv-add:hover { background: rgba(251,191,36,.08); }
.rv-add small { color: var(--text-muted); font-weight: 500; }
.rv-add[hidden] { display: none; }
.rv-ig { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0 46px; }
.rv-ig img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--rv-line); cursor: zoom-in; transition: transform .12s, border-color .12s; }
.rv-ig img:hover { transform: scale(1.04); border-color: rgba(251,191,36,.5); }
.rv-lb-o { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.85); display: grid; place-items: center; cursor: zoom-out; backdrop-filter: blur(4px); }
.rv-lb-o img { max-width: 92vw; max-height: 90vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.6); cursor: default; }
.rv-lb-o button { position: absolute; top: 18px; right: 22px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; cursor: pointer; }

/* ảnh đại diện Discord (đè lên chữ cái; ảnh lỗi → còn chữ cái) · @username */
.rv-av { position: relative; overflow: hidden; }
.rv-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.rv-iw > b small { font-weight: 500; font-size: 12px; color: var(--text-muted); margin-left: 4px; }