/* HVN GLOBAL FONT: TAHOMA */
html,body,button,input,select,textarea,option,table{font-family:Tahoma,Arial,sans-serif!important;}
:root{--blue:#075da8;--blue2:#0ea5e9;--orange:#ff8500;--ink:#12304f;--paper:#f5fbff}*{box-sizing:border-box}body{margin:0;background:linear-gradient(135deg,#e9f7ff,#fff9ef);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:17px}.hero{padding:28px 18px;background:linear-gradient(120deg,#064b8d,#0b85cf 62%,#ff8a00);color:#fff;box-shadow:0 5px 20px #064b8d55}.hero>div,.shell{width:min(980px,calc(100% - 24px));margin:auto}.hero-inner{display:flex;align-items:center;justify-content:space-between;gap:18px}.eyebrow{font-size:.78rem;font-weight:900;letter-spacing:1.5px}.hero h1{margin:6px 0;font-size:clamp(2rem,7vw,3.8rem);line-height:1}.hero p{margin:8px 0 0;font-weight:700}.admin-control{display:inline-block;flex:0 0 auto;padding:12px 17px;border:2px solid #fff;border-radius:999px;background:#ff8500;color:#fff;font-weight:900;text-decoration:none;box-shadow:0 6px 18px #033b7066}.admin-control:hover{background:#fff;color:#075da8}.shell{padding:24px 0}.card,.game-card{padding:24px;border:1px solid #b8d8ee;border-radius:18px;background:#fff;box-shadow:0 12px 35px #075da822}.center{text-align:center}.primary,.secondary,.danger,.button{display:inline-block;padding:12px 18px;border:0;border-radius:12px;font-weight:900;text-decoration:none;cursor:pointer}.primary{background:var(--orange);color:#fff}.secondary{background:#dff3ff;color:#075da8}.danger{background:#c92a2a;color:#fff}.notice{padding:12px;border-left:5px solid var(--orange);background:#fff4df}.game-top,.question-line,.admin-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.game-top{padding:14px 18px;border-radius:14px 14px 0 0;background:#075da8;color:#fff}.live-dot{display:inline-block;width:11px;height:11px;margin-right:8px;border-radius:50%;background:#ff9b26;box-shadow:0 0 12px #ff9b26}.stage{min-height:380px;padding:30px 18px}.hidden{display:none!important}.question-line{font-size:1.1rem;font-weight:900}.timer{display:grid;width:64px;height:64px;place-items:center;border-radius:50%;background:#ff8500;color:#fff;font-size:2rem}.stage h2{font-size:clamp(1.45rem,4vw,2.15rem)}.options{display:grid;grid-template-columns:1fr 1fr;gap:14px}.option{display:flex;align-items:center;gap:14px;min-height:82px;padding:13px;border:3px solid transparent;border-radius:16px;color:#12304f;background:#eaf7ff;font-size:1.08rem;font-weight:800;text-align:left;cursor:pointer}.option b{display:grid;min-width:43px;height:43px;place-items:center;border-radius:12px;color:#fff;background:#075da8}.option-b b{background:#d9480f}.option-c b{background:#2b8a3e}.option-d b{background:#7048e8}.option:hover,.option.selected{border-color:#ff8500;transform:translateY(-1px)}.option:disabled{cursor:not-allowed;opacity:.78}.answer-message{min-height:24px;color:#075da8;font-weight:900}.question-media{display:block;max-width:min(520px,100%);max-height:240px;margin:12px auto;border-radius:14px}audio{display:block;width:min(520px,100%);margin:16px auto}.footer{text-align:center}.question-list{display:grid;gap:9px}.admin-question{display:flex;gap:15px;padding:13px;border:2px solid #c9e1f2;border-radius:12px;background:#f4fbff;text-align:left;cursor:pointer}.admin-question.active{border-color:#ff8500;background:#fff5e8}.admin-question span{flex:1}.admin-actions{display:flex;gap:10px;margin-top:18px}.success{color:#087f23;font-weight:900}.error{color:#c92a2a;font-weight:900}.score-list{width:min(520px,100%);margin:20px auto;padding-left:28px;text-align:left}.score-list li{padding:9px}.score-list strong{float:right}@media(max-width:650px){body{font-size:16px}.hero{padding:22px 10px}.hero-inner{align-items:flex-start;flex-direction:column}.admin-control{padding:9px 13px;font-size:.88rem}.shell{width:min(100% - 14px,980px);padding:12px 0}.card{padding:16px}.game-card{padding:0}.game-top{font-size:.88rem}.stage{min-height:420px;padding:20px 12px}.options{grid-template-columns:1fr}.option{min-height:68px}.player{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
/* HVN 2026 - RCV cam vàng phản sáng, đồng bộ người chơi */
:root{
--rcv-orange:#f47b00;--rcv-gold:#ffb800;--rcv-yellow:#ffd84a;
--rcv-brown:#8b3f00;--rcv-cream:#fff9e9;
}
body{
background:
radial-gradient(circle at 12% 8%,rgba(255,205,54,.20),transparent 28%),
radial-gradient(circle at 88% 16%,rgba(255,126,0,.14),transparent 31%),
linear-gradient(135deg,#fff9e8 0%,#fffdf5 52%,#fff5dc 100%)!important;
}
.shell{position:relative}
.card,.game-card,.question-card,.panel{
border-color:rgba(246,154,0,.48)!important;
background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(255,249,229,.96))!important;
box-shadow:0 14px 34px rgba(191,108,0,.14),0 0 22px rgba(255,188,0,.09)!important;
}
.game-card,.question-card{position:relative;overflow:hidden}
.game-card:before,.question-card:before{
content:"";position:absolute;z-index:0;pointer-events:none;top:-100%;left:-45%;width:28%;height:300%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.82),rgba(255,215,70,.24),transparent);
transform:rotate(18deg);animation:rcvPlayerShine 6.5s ease-in-out infinite;
}
.game-card>*,.question-card>*{position:relative;z-index:1}
@keyframes rcvPlayerShine{0%,60%{left:-45%;opacity:0}68%{opacity:.95}90%{left:125%;opacity:.28}100%{left:125%;opacity:0}}
h1,h2,h3,.eyebrow{color:#8b3f00}
button,.button,.btn,.primary,a.primary{
position:relative;overflow:hidden;
background:linear-gradient(135deg,#f36f00 0%,#f99a00 45%,#ffc400 100%)!important;
border-color:#f39a00!important;color:#fff!important;
box-shadow:0 5px 15px rgba(221,125,0,.25),inset 0 1px 0 rgba(255,255,255,.42)!important;
text-shadow:0 1px 2px rgba(111,53,0,.25);
}
button:not(.danger):after,.button:not(.danger):after,.btn:not(.danger):after,.primary:after,a.primary:after{
content:"";position:absolute;pointer-events:none;top:-85%;left:-50%;width:28%;height:280%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.88),transparent);
transform:rotate(20deg);animation:rcvButtonSpark 4.1s ease-in-out infinite;
}
@keyframes rcvButtonSpark{0%,58%{left:-50%;opacity:0}66%{opacity:1}88%{left:125%;opacity:.25}100%{left:125%;opacity:0}}
button:hover,.button:hover,.btn:hover,.primary:hover,a.primary:hover{
filter:brightness(1.06);box-shadow:0 7px 20px rgba(230,132,0,.35),0 0 15px rgba(255,198,0,.28)!important
}
.answer,.answer-option,.option,.choice{
transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
}
.answer:hover,.answer-option:hover,.option:hover,.choice:hover{
transform:translateY(-1px);border-color:#f5a000!important;
box-shadow:0 5px 15px rgba(224,126,0,.15),0 0 12px rgba(255,196,0,.16)!important
}
.danger,button.danger,a.danger{background:#d62828!important;border-color:#d62828!important;color:#fff!important;box-shadow:none!important}
@media(prefers-reduced-motion:reduce){
.game-card:before,.question-card:before,button:after,.button:after,.btn:after,.primary:after,a.primary:after{animation:none!important}
}
/* HVN Player Polish — xanh / bạc / tím lung linh, desktop + mobile.
Chỉ giao diện: không thay cấu trúc HTML, JS, API hay logic game. */
body{
background:
radial-gradient(circle at 10% 8%,rgba(73,203,255,.10),transparent 28%),
radial-gradient(circle at 92% 12%,rgba(142,79,235,.10),transparent 30%),
linear-gradient(135deg,#f7fbff 0%,#fff 48%,#f8f4ff 100%);
}
.hero,.game-hero,.player-hero,.arena-hero,.top-hero,.header-card{
position:relative;
overflow:hidden;
isolation:isolate;
background:
radial-gradient(circle at 15% 20%,rgba(119,225,255,.42),transparent 28%),
radial-gradient(circle at 84% 18%,rgba(211,163,255,.38),transparent 32%),
linear-gradient(115deg,#087fda 0%,#2859df 43%,#603ee5 72%,#903ee8 100%)!important;
box-shadow:0 10px 30px rgba(55,66,190,.25),inset 0 1px 0 rgba(255,255,255,.45)!important;
}
.hero:before,.game-hero:before,.player-hero:before,.arena-hero:before,.top-hero:before,.header-card:before{
content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
background:
radial-gradient(circle at 12% 25%,#fff 0 1px,transparent 2px),
radial-gradient(circle at 34% 70%,rgba(210,244,255,.95) 0 1.2px,transparent 2.2px),
radial-gradient(circle at 58% 20%,#fff 0 1px,transparent 2px),
radial-gradient(circle at 78% 68%,rgba(232,217,255,.98) 0 1.2px,transparent 2.3px),
radial-gradient(circle at 93% 28%,#fff 0 1px,transparent 2px);
background-size:175px 130px,225px 170px,205px 145px,255px 190px,185px 155px;
animation:hvnGameTwinkle 2.7s ease-in-out infinite alternate;
}
.hero:after,.game-hero:after,.player-hero:after,.arena-hero:after,.top-hero:after,.header-card:after{
content:"";position:absolute;z-index:-1;top:-125%;left:-42%;width:25%;height:350%;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),rgba(255,255,255,.72),rgba(187,231,255,.22),transparent);
transform:rotate(20deg);animation:hvnGameSweep 5.8s ease-in-out infinite;
}
.hero h1,.hero h2,.game-hero h1,.game-hero h2,.player-hero h1,.arena-hero h1,.top-hero h1,.header-card h1{
color:#fff!important;text-shadow:0 2px 5px rgba(0,30,95,.40),0 0 13px rgba(197,236,255,.38)!important;
}
.card,.game-card,.panel,.question-card,.quiz-card,.player-card,.upgrade-card{
box-shadow:0 12px 30px rgba(32,93,180,.13),0 0 18px rgba(62,199,255,.08),0 0 28px rgba(125,74,230,.07);
}
button,.btn,.button{
transition:transform .16s ease,box-shadow .18s ease,filter .18s ease;
}
button:hover,.btn:hover,.button:hover{
filter:brightness(1.06);box-shadow:0 5px 16px rgba(63,92,220,.18);
}
@keyframes hvnGameTwinkle{
0%{opacity:.43;filter:brightness(.92)}
55%{opacity:1;filter:brightness(1.25)}
100%{opacity:.68;filter:brightness(1.07)}
}
@keyframes hvnGameSweep{
0%,55%{left:-42%;opacity:0}
64%{opacity:.95}
88%{left:125%;opacity:.22}
100%{left:125%;opacity:0}
}
@media(max-width:680px){
body{background:linear-gradient(145deg,#f7fbff 0%,#fff 52%,#f8f4ff 100%)}
.hero:before,.game-hero:before,.player-hero:before,.arena-hero:before,.top-hero:before,.header-card:before{
background-size:120px 95px,150px 115px,140px 100px,170px 125px,130px 105px;
}
.hero:after,.game-hero:after,.player-hero:after,.arena-hero:after,.top-hero:after,.header-card:after{
width:34%;animation-duration:6.4s;
}
.card,.game-card,.panel,.question-card,.quiz-card,.player-card,.upgrade-card{
box-shadow:0 8px 22px rgba(31,91,178,.12),0 0 14px rgba(112,68,231,.07);
}
}
@media(prefers-reduced-motion:reduce){
.hero:before,.hero:after,.game-hero:before,.game-hero:after,.player-hero:before,.player-hero:after,
.arena-hero:before,.arena-hero:after,.top-hero:before,.top-hero:after,.header-card:before,.header-card:after{
animation:none!important;
}
}
/* HVN RCV 2.1.2 — giao diện người chơi CAM kim tuyến.
Chỉ override màu và hiệu ứng; không thay HTML/JS/API/logic game. */
body{
background:
radial-gradient(circle at 9% 8%,rgba(255,174,62,.13),transparent 29%),
radial-gradient(circle at 92% 13%,rgba(255,222,160,.14),transparent 31%),
linear-gradient(135deg,#fff9f1 0%,#ffffff 48%,#fff5e8 100%)!important;
}
.hero,.game-hero,.player-hero,.arena-hero,.top-hero,.header-card{
position:relative;
overflow:hidden;
isolation:isolate;
background:
radial-gradient(circle at 15% 18%,rgba(255,220,151,.48),transparent 29%),
radial-gradient(circle at 85% 20%,rgba(255,238,202,.38),transparent 31%),
linear-gradient(115deg,#e56d00 0%,#f28a00 42%,#ff9f16 70%,#ffb43d 100%)!important;
border-color:rgba(255,232,190,.58)!important;
box-shadow:
0 10px 30px rgba(194,91,0,.24),
0 0 20px rgba(255,159,22,.17),
inset 0 1px 0 rgba(255,255,255,.55)!important;
}
.hero:before,.game-hero:before,.player-hero:before,.arena-hero:before,.top-hero:before,.header-card:before{
content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
background:
radial-gradient(circle at 12% 25%,#fff 0 1px,transparent 2px),
radial-gradient(circle at 34% 70%,rgba(255,245,218,.99) 0 1.2px,transparent 2.2px),
radial-gradient(circle at 58% 20%,#fff 0 1px,transparent 2px),
radial-gradient(circle at 78% 68%,rgba(255,226,165,.99) 0 1.2px,transparent 2.3px),
radial-gradient(circle at 93% 28%,#fff 0 1px,transparent 2px)!important;
background-size:160px 120px,215px 160px,195px 140px,245px 180px,175px 150px!important;
animation:hvnOrangeGlitter 2.15s ease-in-out infinite alternate!important;
}
.hero:after,.game-hero:after,.player-hero:after,.arena-hero:after,.top-hero:after,.header-card:after{
content:"";position:absolute;z-index:-1;top:-125%;left:-42%;width:25%;height:350%;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),rgba(255,255,255,.94),rgba(255,222,157,.34),transparent)!important;
transform:rotate(20deg);
animation:hvnOrangeSweep 5.1s ease-in-out infinite!important;
}
.hero h1,.hero h2,.game-hero h1,.game-hero h2,.player-hero h1,.arena-hero h1,.top-hero h1,.header-card h1{
color:#fff!important;
text-shadow:0 2px 5px rgba(111,48,0,.42),0 0 13px rgba(255,239,205,.43)!important;
}
.card,.game-card,.panel,.question-card,.quiz-card,.player-card,.upgrade-card{
box-shadow:
0 12px 30px rgba(190,91,0,.13),
0 0 17px rgba(255,155,24,.11),
0 0 25px rgba(255,225,170,.13)!important;
}
button:hover,.btn:hover,.button:hover{
box-shadow:0 5px 16px rgba(218,106,0,.21),0 0 10px rgba(255,171,54,.15)!important;
}
@keyframes hvnOrangeGlitter{
0%{opacity:.38;filter:brightness(.91)}
30%{opacity:.78;filter:brightness(1.13)}
58%{opacity:1;filter:brightness(1.32)}
82%{opacity:.58;filter:brightness(1.02)}
100%{opacity:.88;filter:brightness(1.20)}
}
@keyframes hvnOrangeSweep{
0%,53%{left:-42%;opacity:0}
63%{opacity:1}
87%{left:125%;opacity:.26}
100%{left:125%;opacity:0}
}
@media(max-width:680px){
body{background:linear-gradient(145deg,#fff8ef 0%,#fff 52%,#fff3e2 100%)!important}
.card,.game-card,.panel,.question-card,.quiz-card,.player-card,.upgrade-card{
box-shadow:0 8px 22px rgba(190,91,0,.12),0 0 13px rgba(255,157,28,.10)!important;
}
}
@media(prefers-reduced-motion:reduce){
.hero:before,.hero:after,.game-hero:before,.game-hero:after,.player-hero:before,.player-hero:after,
.arena-hero:before,.arena-hero:after,.top-hero:before,.top-hero:after,.header-card:before,.header-card:after{
animation:none!important;
}
}