/* ===== QR Voting — Bảng xếp hạng ===== */
.qrvr-wrap { max-width: 1140px; margin: 0 auto; box-sizing: border-box; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #241206; }
.qrvr-wrap * { box-sizing: border-box; }
/* Nền cam tùy chọn (bg="orange") — mặc định trong suốt để bạn tự đặt nền section */
.qrvr-bg { background: radial-gradient(1100px 500px at 50% -8%, #ffb07f, transparent), linear-gradient(160deg, #ff7a43 0%, #fe632d 45%, #e24310 100%); padding: 40px 16px 60px; border-radius: 20px; }

.qrvr-head { text-align: center; margin-bottom: 48px; }
.qrvr-title { margin: 0; font-family: 'Bai Jamjuree', 'Montserrat', sans-serif; font-size: clamp(26px, 4.2vw, 46px); font-weight: 800; color: #fff; letter-spacing: .5px; }
.qrvr-sub { margin: 10px 0 0; color: #fff; opacity: .9; font-size: 14px; }

/* ===== TOP 5 — bục vinh danh ===== */
/* margin-top chừa chỗ cho vương miện của card #1 (cao nhất) không đè lên title */
.qrvr-podium { display: flex; align-items: flex-end; justify-content: center; gap: 16px; margin-top: 96px; margin-bottom: 54px; }
.qrvr-pcard { flex: 1 1 0; max-width: 220px; background: #fff; border-radius: 20px; padding: 16px 14px 18px; text-align: center; position: relative; box-shadow: 0 22px 46px rgba(120,40,0,.30); }
.qrvr-p4 { order: 1; } .qrvr-p2 { order: 2; } .qrvr-p1 { order: 3; } .qrvr-p3 { order: 4; } .qrvr-p5 { order: 5; }
.qrvr-p1 { transform: translateY(-46px); }
.qrvr-p2, .qrvr-p3 { transform: translateY(-20px); }

/* Vương miện */
.qrvr-crown { position: absolute; top: -42px; left: 50%; transform: translateX(-50%); width: 78px; height: 56px; }
.qrvr-p1 .qrvr-crown { top: -54px; width: 92px; height: 66px; }
.qrvr-crown svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.qrvr-crown-num { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-weight: 800; font-size: 16px; color: #fff; }
.qrvr-p1 .qrvr-crown-num { font-size: 20px; bottom: 6px; color: #6a4700; }
.qrvr-c1 path, .qrvr-c1 rect { fill: #f7b500; } .qrvr-c1 .cj { fill: #ffe27a; }
.qrvr-c2 path, .qrvr-c2 rect { fill: #fe7a2e; } .qrvr-c2 .cj { fill: #ffc59a; }
.qrvr-c3 path, .qrvr-c3 rect { fill: #9c3a22; } .qrvr-c3 .cj { fill: #d98a6c; }

/* Huy hiệu No.4 / No.5 */
.qrvr-nobadge { position: absolute; top: -14px; width: 52px; height: 52px; transform: rotate(45deg); background: linear-gradient(135deg, #b5482e, #7a2d1a); border-radius: 12px; box-shadow: 0 6px 14px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; }
.qrvr-p4 .qrvr-nobadge { left: -10px; }
.qrvr-p5 .qrvr-nobadge { right: -10px; }
.qrvr-nobadge span { transform: rotate(-45deg); color: #fff; font-weight: 800; font-size: 13px; }

.qrvr-sbd { font-size: 12px; font-weight: 700; color: #8a7f77; letter-spacing: 1px; margin-top: 6px; }
.qrvr-photo { width: 100%; aspect-ratio: 474 / 500; border-radius: 14px; overflow: hidden; margin: 10px 0 12px; background: linear-gradient(150deg,#ffd9bf,#f6a06a); display: flex; align-items: center; justify-content: center; font-size: 46px; }
.qrvr-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qrvr-p1 .qrvr-photo { box-shadow: 0 0 0 3px #f7b500; }
.qrvr-p2 .qrvr-photo { box-shadow: 0 0 0 3px #cfd5dd; }
.qrvr-p3 .qrvr-photo { box-shadow: 0 0 0 3px #d98a6c; }
.qrvr-name { font-size: clamp(13px, 1.2vw, 15px); font-weight: 800; line-height: 1.25; min-height: 2.4em; display: flex; align-items: center; justify-content: center; }
.qrvr-votes { margin-top: 6px; font-size: 12px; color: #8a7f77; }
.qrvr-votes b { display: block; font-size: clamp(20px, 2vw, 26px); color: #fe632d; font-weight: 800; }

/* ===== Danh sách còn lại ===== */
.qrvr-resthead { display: flex; align-items: center; gap: 12px; color: #fff; margin: 8px 0 18px; }
.qrvr-resthead h2 { margin: 0; font-family: 'Bai Jamjuree', 'Montserrat', sans-serif; font-size: 22px; font-weight: 800; }
.qrvr-resthead::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.4); }
.qrvr-restgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.qrvr-rcard { background: #fff; border-radius: 16px; padding: 12px 16px; display: flex; align-items: center; gap: 14px; max-width: 100%; box-shadow: 0 10px 26px rgba(120,40,0,.16); }
.qrvr-rrank { flex: none; width: 40px; height: 40px; border-radius: 12px; background: #fff4ee; color: #fe632d; font-weight: 800; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.qrvr-ravatar { flex: none; width: 54px; height: 58px; border-radius: 12px; overflow: hidden; background: linear-gradient(150deg,#ffd9bf,#f6a06a); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.qrvr-ravatar img { width: 100%; height: 100%; object-fit: cover; }
.qrvr-rinfo { flex: 1; min-width: 0; }
.qrvr-rname { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qrvr-rsbd { font-size: 12px; color: #8a7f77; }
.qrvr-rvotes { flex: none; text-align: right; }
.qrvr-rvotes b { display: block; font-size: 18px; font-weight: 800; color: #fe632d; }
.qrvr-rvotes span { font-size: 11px; color: #8a7f77; }

@media (max-width: 820px) {
	.qrvr-podium { flex-wrap: wrap; gap: 30px 12px; margin-top: 48px; }
	.qrvr-pcard { flex: 1 1 40%; max-width: none; transform: none !important; }
	.qrvr-p1 { order: 0; flex-basis: 100%; }
}
@media (max-width: 520px) {
	.qrvr-pcard { flex-basis: 100%; }
	.qrvr-restgrid { grid-template-columns: 1fr; }
	/* Chống tràn ngang: tên xuống dòng, thu gọn card, số vote luôn hiện */
	.qrvr-rcard { padding: 10px 12px; gap: 10px; }
	.qrvr-rrank { width: 34px; height: 34px; font-size: 14px; border-radius: 10px; }
	.qrvr-ravatar { width: 46px; height: 50px; }
	.qrvr-rname { white-space: normal; font-size: 14px; line-height: 1.25; }
	.qrvr-rvotes { flex: none; min-width: 50px; }
	.qrvr-rvotes b { font-size: 16px; }
	/* Huy hiệu No.4/No.5 không thò ra ngoài mép màn hình */
	.qrvr-p4 .qrvr-nobadge { left: 6px; }
	.qrvr-p5 .qrvr-nobadge { right: 6px; }
}