/* Đại chiến 12 con giáp: hành trình 2.5D trên trang challenge có chia đội. Mọi selector nằm trong .stv-dc để không vỡ theme.
   Font và màu lấy từ theme (--font-body, --accent...), có giá trị dự phòng. */
.stv-dc {
	--dc-ink: var(--ink, #0b0e11); --dc-accent: var(--accent, #ff4d12); --dc-lake: var(--lake, #0e6e73); --dc-muted: var(--muted, #6b5e51); --dc-line: rgba(11, 14, 17, .14);
	--dc-font: var(--font-body, 'Be Vietnam Pro', system-ui, sans-serif);
	margin: 0 0 28px; font-family: var(--dc-font); font-size: 16px; line-height: 1.5; color: var(--dc-ink);
}
.stv-dc *, .stv-dc *::before, .stv-dc *::after { box-sizing: border-box; }
.stv-dc button { margin: 0; text-transform: none; letter-spacing: normal; font-family: var(--dc-font); }
.stv-dc h2, .stv-dc h3 { font-family: var(--dc-font); text-transform: none; letter-spacing: normal; }
.stv-dc [hidden] { display: none !important; }

/* Thanh trạng thái */
.stv-dc .dc-status { display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: center; background: var(--dc-ink); color: #f5f3ee; border-radius: 12px; padding: 9px 12px; font-size: .8rem; font-weight: 600; line-height: 1.35; }
.stv-dc .dc-status .dot { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 3px rgba(46, 204, 113, .25); flex: none; }
.stv-dc .dc-status .dot.cho { background: #f5a623; box-shadow: 0 0 0 3px rgba(245, 166, 35, .25); }
.stv-dc .dc-status b { color: #ffb08a; font-weight: 700; }

/* Khung bản đồ */
.stv-dc .dc-ban { position: relative; margin: 10px 0 4px; height: 72vh; min-height: 440px; max-height: 800px; border-radius: 18px; overflow: hidden; background: #bfe6f2;
	box-shadow: inset 0 0 0 1px var(--dc-line); touch-action: none; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; cursor: grab; }
.stv-dc .dc-ban.keo { cursor: grabbing; }
.stv-dc #dc-cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.stv-dc #dc-lop { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; pointer-events: none; --ik: 1; --is: 1; }
@media (pointer: coarse) { .stv-dc .dc-ban { height: 66vh; min-height: 400px; } }

/* Nhân vật: mỗi .sp là điểm đứng trên mặt đất (0 x 0), .in đứng trên điểm đó, co theo --ik để cỡ trên màn hình không phình theo bản đồ */
.stv-dc .sp { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; --lf: 0px; --H: 66; }
.stv-dc .sp .in { position: absolute; left: 0; bottom: var(--lf); transform: translateX(-50%) scale(var(--ik)); transform-origin: 50% 100%; pointer-events: auto; cursor: pointer; display: block; transition: bottom .5s ease; }
.stv-dc .sp .bong { position: absolute; left: 0; top: 0; width: calc(var(--H) * 1px * .62); height: calc(var(--H) * 1px * .16); border-radius: 50%; background: rgba(20, 40, 20, .24);
	transform: translate(-50%, -45%) scale(var(--ik)); pointer-events: none; }
.stv-dc .sp.chon .in { filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 3px var(--dc-accent)); }

/* chibi */
.stv-dc .ch .in { width: calc(var(--H) * 1px * var(--wr, .5)); height: calc(var(--H) * 1px * var(--r, 1)); }
.stv-dc .ch .fig { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); transform-origin: 50% 100%; display: block; }
.stv-dc .ch .hinh { display: block; height: calc(var(--H) * 1px * var(--r, 1)); width: auto; max-width: none; pointer-events: none; }
.stv-dc .ch.st-chay .fig { animation: dc-chay var(--bd, .5s) ease-in-out infinite; animation-delay: var(--dl, 0s); }
.stv-dc .ch.st-dung .fig { animation: dc-khoi 1.7s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.stv-dc .ch.st-ngu .fig { animation: dc-tho 3s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.stv-dc.dc-truoc .ch .fig { animation: dc-khoi 1.7s ease-in-out infinite; animation-delay: var(--dl, 0s); }
@keyframes dc-chay { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(-3deg); } 50% { transform: translateX(-50%) translateY(-7px) rotate(3deg); } }
@keyframes dc-khoi { 0%, 100% { transform: translateX(-50%) scale(1, 1); } 25% { transform: translateX(-50%) scale(1.05, .86); } 55% { transform: translateX(-50%) scale(.96, 1.1) translateY(-4px); } 75% { transform: translateX(-50%) scale(1.04, .92) rotate(2deg); } }
@keyframes dc-tho { 0%, 100% { transform: translateX(-50%) scaleY(1); } 50% { transform: translateX(-50%) scaleY(.975); } }
/* chibi thiếu ảnh: đầu tròn */
.stv-dc .ch .dau { display: flex; align-items: center; justify-content: center; width: calc(var(--H) * 1px * .46); height: calc(var(--H) * 1px * .46); border-radius: 50%; border: 2px solid #fff; background: var(--c, #888);
	color: #fff; font: 700 calc(var(--H) * 1px * .24)/1 var(--dc-font); overflow: hidden; box-shadow: 0 2px 4px rgba(0, 0, 0, .25); position: relative; margin: 0 auto; }
.stv-dc .ch .dau img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stv-dc .ch .than { display: block; width: calc(var(--H) * 1px * .3); height: calc(var(--H) * 1px * .27); margin: calc(var(--H) * 1px * -.05) auto 0; border-radius: 46% 46% 16% 16%; background: var(--c2, #555); }
.stv-dc .ch .chan { display: block; width: calc(var(--H) * 1px * .2); height: calc(var(--H) * 1px * .09); margin: 0 auto; background: linear-gradient(90deg, #3a3f4a 0 42%, transparent 42% 58%, #3a3f4a 58% 100%); border-radius: 0 0 3px 3px; }
.stv-dc .ch.khong-chibi .in { width: calc(var(--H) * 1px * .5); height: calc(var(--H) * 1px * .83); }
/* gió sau lưng (chibi của đội dẫn đầu) */
.stv-dc .ch .gio { position: absolute; right: 80%; bottom: 20%; width: calc(var(--H) * 1px * .5); height: calc(var(--H) * 1px * .36); display: none; pointer-events: none; }
.stv-dc .lead-doi .ch .gio { display: block; }
.stv-dc .ch .gio i { position: absolute; right: 0; height: 3px; border-radius: 3px; background: linear-gradient(270deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); animation: dc-gio .5s linear infinite; }
.stv-dc .ch .gio i:nth-child(1) { top: 10%; width: 100%; }
.stv-dc .ch .gio i:nth-child(2) { top: 45%; width: 76%; animation-delay: -.17s; }
.stv-dc .ch .gio i:nth-child(3) { top: 78%; width: 90%; animation-delay: -.33s; }
@keyframes dc-gio { 0% { transform: translateX(6px); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateX(-12px); opacity: 0; } }
/* phương tiện vui: chibi lướt trên chuối / bong bóng / lấm bùn */
.stv-dc .ch .pt { position: absolute; left: 50%; pointer-events: none; display: none; line-height: 1; transform: translateX(-50%); }
.stv-dc .ch.v-be .pt.be { display: block; bottom: -14px; font-size: calc(var(--H) * 1px * .5); }
.stv-dc .ch.v-bay .pt.bay { display: block; bottom: calc(var(--H) * 1px * var(--r, 1) * .96); font-size: calc(var(--H) * 1px * .5); animation: dc-treo 2.2s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.stv-dc .ch.v-bun .pt.bun { display: block; bottom: -6px; font-size: calc(var(--H) * 1px * .34); }
@keyframes dc-treo { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(-4deg); } 50% { transform: translateX(-50%) translateY(-6px) rotate(4deg); } }

/* linh vật con giáp */
.stv-dc .mas { --M: 132; --H: 100; }
.stv-dc .mas .in { width: calc(var(--M) * 1px); height: calc(var(--M) * 1px * 1.12); }
.stv-dc .mas .bong { width: calc(var(--M) * 1px * .7); height: calc(var(--M) * 1px * .17); }
.stv-dc .mas .fig { position: absolute; left: 0; right: 0; bottom: 0; display: block; transform-origin: 50% 100%; animation: dc-nhun 1.1s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.stv-dc .mas .em { display: block; text-align: center; font-size: calc(var(--M) * 1px); line-height: 1.06; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .22)); -webkit-text-size-adjust: none; }
.stv-dc .mas .em.chu { display: flex; align-items: center; justify-content: center; margin: 0 auto; width: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--c, #ff8a3d); color: #fff; font: 800 calc(var(--M) * 1px * .5)/1 var(--dc-font); }
@keyframes dc-nhun { 0%, 100% { transform: translateY(0) scale(1.02, .97) rotate(-2deg); } 50% { transform: translateY(-12px) scale(.98, 1.03) rotate(2deg); } }
@keyframes dc-nhay { 0%, 100% { transform: translateY(0) scale(1.06, .92); } 18% { transform: translateY(-14px) scale(.96, 1.06); } 45% { transform: translateY(-62px) scale(.95, 1.07) rotate(-7deg); } 62% { transform: translateY(-62px) scale(.95, 1.07) rotate(7deg); } 88% { transform: translateY(0) scale(1.08, .9); } }
@keyframes dc-van { 0%, 100% { transform: scale(1, 1) rotate(0); } 30% { transform: scale(.96, 1.2) rotate(-5deg); } 55% { transform: scale(1.06, .88) rotate(0); } 80% { transform: scale(.98, 1.14) rotate(5deg); } }
@keyframes dc-cheer { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-16px) rotate(6deg); } }
.stv-dc .mas.lead .fig { animation: dc-nhay 1.5s ease-in-out infinite; }
.stv-dc .mas.cuoi .fig { animation: dc-cheer 1.6s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.stv-dc.dc-truoc .mas .fig { animation: dc-van 2.6s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.stv-dc .mas.lead .bong { animation: dc-bong 1.5s ease-in-out infinite; }
@keyframes dc-bong { 0%, 100% { opacity: 1; } 45%, 62% { opacity: .45; } }
/* cờ cầm tên đội */
.stv-dc .mas.lead .mu { display: block; }
.stv-dc .mas .co { position: absolute; left: 68%; bottom: 8%; width: calc(var(--M) * 1px * .72); height: calc(var(--M) * 1px * 1.18); pointer-events: none; }
.stv-dc .mas .co .cot { position: absolute; left: 0; bottom: 0; width: calc(var(--M) * 1px * .045); height: 100%; background: #6b4a2b; border-radius: 3px; }
.stv-dc .mas .co .vai { position: absolute; left: calc(var(--M) * 1px * .04); top: 0; min-width: calc(var(--M) * 1px * .62); padding: 0 calc(var(--M) * 1px * .08) 0 calc(var(--M) * 1px * .06); height: calc(var(--M) * 1px * .27); background: var(--cd, #e44);
	color: #fff; font: 800 calc(var(--M) * 1px * .17)/calc(var(--M) * 1px * .27) var(--dc-font); white-space: nowrap; text-align: center; border-radius: 0 7px 7px 0; clip-path: polygon(0 0, 100% 0, 92% 50%, 100% 100%, 0 100%);
	transform-origin: 0 50%; animation: dc-co 1.4s ease-in-out infinite; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); }
@keyframes dc-co { 0%, 100% { transform: skewY(-3deg) scaleX(1); } 50% { transform: skewY(3deg) scaleX(.94); } }
.stv-dc .mas .mu { display: none; position: absolute; left: 50%; top: calc(var(--M) * 1px * -.08); transform: translateX(-50%) rotate(-10deg); font-size: calc(var(--M) * 1px * .42); line-height: 1; z-index: 3; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .3)); pointer-events: none; }
.stv-dc .mas .tag[hidden] { display: none; }
.stv-dc .mas .tag { position: absolute; right: 94%; bottom: 3%; display: flex; align-items: center; gap: calc(4px * var(--is)); white-space: nowrap; font: 800 calc(14px * var(--is))/1.2 var(--dc-font); color: #fff; background: rgba(11, 14, 17, .9);
	padding: calc(4px * var(--is)) calc(9px * var(--is)); border-radius: calc(99px * var(--is)); box-shadow: 0 1px 4px rgba(0, 0, 0, .3); pointer-events: none; z-index: 2; }
.stv-dc .mas .tag b { background: var(--tc, #888); color: #fff; border-radius: 99px; padding: 0 calc(5px * var(--is)); font-weight: 800; }
.stv-dc .mas .tag.h1 { --tc: #f2b705; } .stv-dc .mas .tag.h2 { --tc: #9aa3ad; } .stv-dc .mas .tag.h3 { --tc: #c4793a; }
.stv-dc .mas .noi { position: absolute; left: 50%; bottom: calc(100% + 26px); display: none; white-space: nowrap; background: #fff; color: #1d2530; font: 700 calc(13px * var(--is))/1.25 var(--dc-font); padding: calc(5px * var(--is)) calc(10px * var(--is));
	border-radius: calc(12px * var(--is)); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); pointer-events: none; z-index: 9; transform: translateX(-50%); }
.stv-dc .mas .noi::after, .stv-dc .ch .noi::after { content: ''; position: absolute; left: 50%; bottom: calc(-4px * var(--is)); width: calc(8px * var(--is)); height: calc(8px * var(--is)); background: #fff; transform: translateX(-50%) rotate(45deg); }
.stv-dc .ch .noi { position: absolute; left: 50%; bottom: calc(var(--H) * 1px * var(--r, 1) + 10px); display: none; white-space: nowrap; background: #fff; color: #1d2530; font: 700 calc(12px * var(--is))/1.25 var(--dc-font); padding: calc(4px * var(--is)) calc(9px * var(--is));
	border-radius: calc(11px * var(--is)); box-shadow: 0 2px 7px rgba(0, 0, 0, .3); pointer-events: none; z-index: 9; transform: translateX(-50%); }
.stv-dc .noi-on .noi { display: block; animation: dc-noi 3s ease-out forwards; }
@keyframes dc-noi { 0% { opacity: 0; margin-bottom: -6px; } 10% { opacity: 1; margin-bottom: 0; } 88% { opacity: 1; } 100% { opacity: 0; margin-bottom: 4px; } }
.stv-dc .sp.noi-on { z-index: 99990 !important; }
/* pháo hoa + confetti cho đội dẫn đầu */
.stv-dc .mas .phao { position: absolute; left: 50%; top: calc(var(--M) * 1px * -.55); width: 0; height: 0; pointer-events: none; display: none; }
.stv-dc .mas.lead .phao { display: block; }
.stv-dc .phao b { position: absolute; font-size: calc(var(--M) * 1px * .34); line-height: 1; opacity: 0; animation: dc-phao 3.2s ease-out infinite; }
.stv-dc .phao b:nth-child(1) { left: calc(var(--M) * 1px * -.5); animation-delay: 0s; }
.stv-dc .phao b:nth-child(2) { left: calc(var(--M) * 1px * .15); top: calc(var(--M) * 1px * -.2); animation-delay: 1.1s; }
.stv-dc .phao b:nth-child(3) { left: calc(var(--M) * 1px * .4); animation-delay: 2.1s; }
@keyframes dc-phao { 0% { opacity: 0; transform: scale(.2); } 12% { opacity: 1; transform: scale(1.25); } 40% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1) translateY(-10px); } }
.stv-dc .conf { position: absolute; left: 50%; top: calc(var(--M) * 1px * -.3); width: 0; height: 0; pointer-events: none; display: none; }
.stv-dc .mas.lead .conf, .stv-dc .mas.top3 .conf { display: block; }
.stv-dc .conf i { position: absolute; width: calc(var(--M) * 1px * .06); height: calc(var(--M) * 1px * .1); border-radius: 2px; opacity: 0; animation: dc-roi 2.4s linear infinite; }
.stv-dc .conf i:nth-child(1) { background: #ff4d12; left: -70px; animation-delay: 0s; } .stv-dc .conf i:nth-child(2) { background: #2ecc71; left: -30px; animation-delay: .4s; }
.stv-dc .conf i:nth-child(3) { background: #3b9cff; left: 20px; animation-delay: .9s; } .stv-dc .conf i:nth-child(4) { background: #f2b705; left: 60px; animation-delay: 1.3s; }
.stv-dc .conf i:nth-child(5) { background: #e84393; left: -50px; animation-delay: 1.7s; } .stv-dc .conf i:nth-child(6) { background: #8e5cf0; left: 40px; animation-delay: 2s; }
@keyframes dc-roi { 0% { opacity: 0; transform: translateY(-20px) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(150px) rotate(300deg); } }
.stv-dc .mas.top3:not(.lead) .conf i:nth-child(n+4) { display: none; }
/* sao rơi lấp lánh */
.stv-dc .rs { position: absolute; left: 50%; top: calc(var(--M) * 1px * -.7); font-size: calc(var(--M) * 1px * .3); line-height: 1; pointer-events: none; z-index: 8; animation: dc-sao 1.9s ease-in forwards; filter: drop-shadow(0 0 4px #ffd54a); }
@keyframes dc-sao { 0% { opacity: 0; transform: translate(var(--sx, 0), -24px) scale(.5) rotate(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sx, 0), calc(var(--M) * 1px * 1.15)) scale(1) rotate(340deg); } }

/* phương tiện của linh vật */
.stv-dc .mas .xe { position: absolute; left: 50%; bottom: calc(var(--M) * 1px * -.08); width: 0; height: 0; pointer-events: none; display: none; z-index: -1; }
.stv-dc .mas.v-be .xe.be, .stv-dc .mas.v-bay .xe.bay, .stv-dc .mas.v-bun .xe.bun { display: block; }
.stv-dc .xe.be i { position: absolute; left: calc(var(--M) * 1px * -.7); top: calc(var(--M) * 1px * -.08); width: calc(var(--M) * 1px * 1.4); height: calc(var(--M) * 1px * .32); border-radius: 14px; background: repeating-linear-gradient(90deg, #d7a24a 0 14px, #a4722b 14px 17px); box-shadow: 0 4px 0 #7a5420, 0 0 0 6px rgba(255, 255, 255, .55); }
.stv-dc .xe.be b { position: absolute; top: calc(var(--M) * 1px * -.26); font-size: calc(var(--M) * 1px * .36); font-weight: 400; line-height: 1; }
.stv-dc .xe.be b:nth-child(2) { left: calc(var(--M) * 1px * -.62); } .stv-dc .xe.be b:nth-child(3) { left: calc(var(--M) * 1px * .3); }
.stv-dc .xe.bay i { position: absolute; left: calc(var(--M) * 1px
* -.62); top: calc(var(--M) * 1px * -1.95); width: calc(var(--M) * 1px * 1.24); height: calc(var(--M) * 1px * 1.4); border-radius: 50% 50% 46% 46%; background: conic-gradient(from 0deg at 50% 50%, #ff4d4d 0 14%, #ffd54a 14% 28%, #ff4d4d 28% 42%, #ffd54a 42% 56%, #ff4d4d 56% 70%, #ffd54a 70% 84%, #ff4d4d 84% 100%);
	box-shadow: inset -10px -10px 0 rgba(0, 0, 0, .12), 0 6px 10px rgba(0, 0, 0, .2); animation: dc-treo2 3s ease-in-out infinite; }
.stv-dc .xe.bay u { position: absolute; left: calc(var(--M) * 1px * -.44); top: calc(var(--M) * 1px * -.58); width: calc(var(--M) * 1px * .88); height: calc(var(--M) * 1px * .5); border-left: 3px solid #6b4a2b; border-right: 3px solid #6b4a2b; transform: perspective(40px) rotateX(-8deg); }
.stv-dc .xe.bay em { position: absolute; left: calc(var(--M) * 1px * -.5); top: calc(var(--M) * 1px * -.1); width: calc(var(--M) * 1px * 1); height: calc(var(--M) * 1px * .22); background: #a4722b; border-radius: 4px 4px 12px 12px; box-shadow: 0 3px 0 #6b4a2b; }
@keyframes dc-treo2 { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-8px) rotate(1.5deg); } }
.stv-dc .xe.bun i { position: absolute; left: calc(var(--M) * 1px * -.74); top: calc(var(--M) * 1px * -.18); width: calc(var(--M) * 1px * 1.48); height: calc(var(--M) * 1px * .2); background: #b9824a; border-radius: 5px; box-shadow: 0 4px 0 #7a5420; }
.stv-dc .xe.bun b { position: absolute; top: calc(var(--M) * 1px * -.1); width: calc(var(--M) * 1px * .34); height: calc(var(--M) * 1px * .34); border-radius: 50%; background: #5a3d22; border: 6px solid #cfa56a; box-shadow: 0 0 0 3px rgba(0, 0, 0, .2); }
.stv-dc .xe.bun b:nth-child(2) { left: calc(var(--M) * 1px * -.62); } .stv-dc .xe.bun b:nth-child(3) { left: calc(var(--M) * 1px * .28); }
.stv-dc .xe.bun span { position: absolute; left: calc(var(--M) * 1px * -1.5); top: calc(var(--M) * 1px * -.82); font-size: calc(var(--M) * 1px * .8); line-height: 1; }

/* biển báo đếm ngược ở vạch xuất phát */
.stv-dc .bien { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 60; }
.stv-dc .bien .in { position: absolute; left: 0; bottom: 0; transform: translateX(-50%) scale(var(--ik)); transform-origin: 50% 100%; width: 300px; text-align: center; }
.stv-dc .bien .bg { display: inline-block; background: linear-gradient(#2a3a4f, #17202c); color: #fff; padding: 12px 22px 12px; border-radius: 16px; box-shadow: 0 8px 0 #0c121a, 0 12px 20px rgba(0, 0, 0, .3); border: 4px solid #fff; transform: rotate(-2deg); }
.stv-dc .bien .bg small { display: block; font: 700 17px/1.2 var(--dc-font); letter-spacing: .08em; color: #ffd54a; text-transform: uppercase; }
.stv-dc .bien .bg strong { display: block; font: 800 50px/1.05 var(--dc-font); }
.stv-dc .bien .bg span { display: block; font: 600 16px/1.3 var(--dc-font); opacity: .85; }
.stv-dc .bien .chan { display: block; width: 14px; height: 70px; margin: 0 auto; background: #6b4a2b; border-radius: 0 0 4px 4px; }

/* công cụ */
.stv-dc .dc-tool { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; pointer-events: none; z-index: 20; }
.stv-dc .dc-seg { display: flex; background: rgba(255, 255, 255, .96); border-radius: 12px; padding: 3px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); pointer-events: auto; min-width: 0; }
.stv-dc .dc-seg button { border: 0; background: none; padding: 0 10px; height: 34px; border-radius: 9px; font: 700 12.5px/1 var(--dc-font); color: var(--dc-ink); cursor: pointer; white-space: nowrap; }
.stv-dc .dc-seg button.on { background: var(--dc-ink); color: #fff; }
.stv-dc .dc-nut { display: flex; gap: 6px; pointer-events: auto; flex: none; }
.stv-dc .dc-nut button, .stv-dc .dc-dong-full { width: 40px; height: 40px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .96); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); font: 700 22px/1 var(--dc-font); color: var(--dc-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; }
.stv-dc .dc-nut button svg { width: 18px; height: 18px; }
.stv-dc .dc-nut button:active, .stv-dc .dc-chip:active { background: #ffe6da; }
.stv-dc .dc-duoi { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 20; }
.stv-dc .dc-chips { display: flex; gap: 6px; padding: 0 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; pointer-events: auto; touch-action: pan-x; }
.stv-dc .dc-chips::-webkit-scrollbar { display: none; }
.stv-dc .dc-chip { flex: none; height: 36px; border: 0; border-radius: 11px; background: rgba(255, 255, 255, .96); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); padding: 0 11px; font: 700 12.5px/1 var(--dc-font); color: var(--dc-ink); cursor: pointer; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.stv-dc .dc-chip.act { background: var(--dc-ink); color: #fff; }
.stv-dc .dc-chip .e { font-size: 17px; line-height: 1; }
.stv-dc .dc-chip .h { font-size: 11px; opacity: .65; font-weight: 700; }
.stv-dc .dc-chip.dc-act { background: #fff6ec; }
.stv-dc .dc-sep { flex: none; width: 1px; margin: 6px 2px; background: rgba(0, 0, 0, .25); }

/* thẻ đội / người */
.stv-dc .dc-the { position: absolute; left: 8px; right: 8px; bottom: 54px; z-index: 30; max-height: calc(100% - 118px); display: flex; flex-direction: column; background: #fff; border-radius: 16px; padding: 10px 12px; box-shadow: 0 8px 26px rgba(0, 0, 0, .3); touch-action: pan-y; }
.stv-dc .dc-the .hd { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: center; flex: none; }
.stv-dc .dc-the .ha { width: 56px; height: 56px; object-fit: contain; }
.stv-dc .dc-the .ha.em { display: flex; align-items: center; justify-content: center; font-size: 42px; line-height: 1; background: #fff3e6; border-radius: 14px; }
.stv-dc .dc-the .ha.tron { border-radius: 50%; object-fit: cover; background: #ddd; }
.stv-dc .dc-the h3 { margin: 0; font-size: .98rem; line-height: 1.25; }
.stv-dc .dc-the p { margin: 1px 0 0; color: var(--dc-muted); font-size: .8rem; line-height: 1.35; }
.stv-dc .dc-the p b { color: var(--dc-ink); }
.stv-dc .dc-the a { color: var(--dc-lake); font-weight: 700; }
.stv-dc .dc-the .dong { align-self: start; border: 0; background: #eee; width: 30px; height: 30px; border-radius: 50%; font-size: 17px; cursor: pointer; color: var(--dc-ink); }
.stv-dc .dc-the .hg { display: inline-block; font-weight: 800; font-size: .72rem; padding: 1px 8px; border-radius: 99px; color: #fff; background: var(--dc-ink); vertical-align: 1px; margin-right: 4px; }
.stv-dc .dc-the .hg.h1 { background: #d99a00; } .stv-dc .dc-the .hg.h2 { background: #7d8791; } .stv-dc .dc-the .hg.h3 { background: #b8692c; }
.stv-dc .dc-the .so { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 2px; font-size: .78rem; color: var(--dc-muted); flex: none; }
.stv-dc .dc-the .so b { display: block; font-size: 1rem; color: var(--dc-ink); line-height: 1.2; }
.stv-dc .dc-the .ds { list-style: none; margin: 6px 0 0; padding: 0; max-height: 176px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: grid; grid-template-columns: 1fr; gap: 2px; min-height: 0; border-top: 1px solid var(--dc-line); }
.stv-dc .dc-the .ds li { margin: 0; padding: 0; }
.stv-dc .dc-the .ds button { width: 100%; display: flex; align-items: center; gap: 8px; border: 0; background: none; padding: 5px 2px; border-bottom: 1px solid rgba(0, 0, 0, .06); font: 600 .84rem/1.25 var(--dc-font); color: var(--dc-ink); text-align: left; cursor: pointer; }
.stv-dc .dc-the .ds img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.stv-dc .dc-the .ds .ph { width: 28px; height: 28px; border-radius: 50%; background: #ddd; flex: none; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 800; color: #fff; }
.stv-dc .dc-the .ds .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stv-dc .dc-the .ds .v { font-weight: 800; white-space: nowrap; }
.stv-dc .dc-the .ds .v.o { color: #b0b5bb; }
.stv-dc .dc-the .ds .th { width: 18px; font-size: .72rem; color: var(--dc-muted); text-align: right; flex: none; }
@media (min-width: 720px) { .stv-dc .dc-the .ds { max-height: 260px; } .stv-dc .dc-the { left: auto; right: 12px; width: 380px; bottom: 56px; } .stv-dc .dc-the .ds { grid-template-columns: 1fr 1fr; gap: 0 14px; } .stv-dc .dc-the { width: 440px; } }

.stv-dc .dc-ghi { margin: 8px 4px 0; font-size: .82rem; line-height: 1.5; color: var(--dc-muted); }

/* toàn màn hình */
html.dc-khoa, html.dc-khoa body { overflow: hidden; }
.stv-dc.full { position: fixed; inset: 0; z-index: 2147483000; margin: 0; padding: 8px; background: #0b0e11; display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
.stv-dc.full .dc-ban { flex: 1 1 auto; height: auto; max-height: none; min-height: 0; margin: 8px 0 0; }
.stv-dc.full .dc-ghi { display: none; }
.stv-dc.full .dc-dong-full { display: flex; position: absolute; right: 8px; top: 56px; z-index: 25; }
.stv-dc.full .dc-the { max-height: calc(100% - 120px); }
.stv-dc.full .dc-the .ds { max-height: 34vh; }
@media (min-width: 720px) { .stv-dc.full .dc-the { width: 480px; } }

/* dừng khi khuất màn hình; tôn trọng giảm chuyển động */
.stv-dc.dc-dung .sp *, .stv-dc.dc-dung .bien * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
	.stv-dc .sp *, .stv-dc .sp { animation: none !important; }
	.stv-dc .sp .in { transition: none; }
}