/* 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:#0b84d8;--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%,#0b84d8);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:#0b84d8;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:#0b84d8;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:#0b84d8;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:#0b84d8;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 - giao diện người chơi xanh tím phản sáng */
body{
background:
radial-gradient(circle at 12% 8%,rgba(35,200,255,.15),transparent 27%),
radial-gradient(circle at 88% 15%,rgba(130,66,245,.13),transparent 30%),
linear-gradient(135deg,#eefaff 0%,#f6f3ff 52%,#edf9ff 100%);
}
.shell{position:relative}
.card,.game-card,.question-card,.panel{
border-color:rgba(93,115,238,.38)!important;
background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(246,248,255,.95))!important;
box-shadow:0 14px 34px rgba(31,91,178,.14),0 0 22px rgba(107,62,231,.07)!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,.76),rgba(56,206,255,.18),transparent);
transform:rotate(18deg);animation:hvnPlayerShine 6.5s ease-in-out infinite;
}
.game-card>* ,.question-card>*{position:relative;z-index:1}
@keyframes hvnPlayerShine{0%,60%{left:-45%;opacity:0}68%{opacity:.9}90%{left:125%;opacity:.25}100%{left:125%;opacity:0}}
h1,h2,h3{color:#063b66}
button,.button,.btn,.primary,a.primary{
position:relative;overflow:hidden;
background:linear-gradient(135deg,#0785e8 0%,#355be5 48%,#7540ed 100%)!important;
border-color:#5967eb!important;color:#fff!important;
box-shadow:0 5px 15px rgba(69,75,226,.24),inset 0 1px 0 rgba(255,255,255,.35)!important;
}
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,.78),transparent);
transform:rotate(20deg);animation:hvnPlayerButtonSpark 4.2s ease-in-out infinite;
}
@keyframes hvnPlayerButtonSpark{0%,58%{left:-50%;opacity:0}66%{opacity:1}88%{left:125%;opacity:.22}100%{left:125%;opacity:0}}
button:hover,.button:hover,.btn:hover,.primary:hover,a.primary:hover{
filter:brightness(1.07);box-shadow:0 7px 20px rgba(75,69,232,.34),0 0 14px rgba(35,200,255,.23)!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:#6658ed!important;
box-shadow:0 5px 15px rgba(75,69,232,.14),0 0 11px rgba(35,200,255,.12)!important
}
/* Giữ nguyên màu cảnh báo/xóa nếu có */
.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 Quiz 2.1.2 — Player xanh / bạc / tím lung linh, không đổi logic */
.hero{
position:relative;
overflow:hidden;
isolation:isolate;
background:
radial-gradient(circle at 14% 18%,rgba(104,231,255,.42),transparent 27%),
radial-gradient(circle at 84% 22%,rgba(206,151,255,.38),transparent 31%),
linear-gradient(115deg,#047bdc 0%,#2359df 42%,#6238e5 72%,#8b3ee8 100%)!important;
border-bottom:1px solid rgba(255,255,255,.48);
box-shadow:0 10px 30px rgba(48,57,190,.28),inset 0 1px 0 rgba(255,255,255,.42)!important;
}
.hero:before{
content:"";
position:absolute;
z-index:-1;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at 10% 30%,rgba(255,255,255,.95) 0 1px,transparent 2px),
radial-gradient(circle at 31% 72%,rgba(207,244,255,.90) 0 1.2px,transparent 2.2px),
radial-gradient(circle at 58% 22%,rgba(255,255,255,.92) 0 1px,transparent 2px),
radial-gradient(circle at 77% 66%,rgba(230,216,255,.95) 0 1.2px,transparent 2.3px),
radial-gradient(circle at 92% 28%,rgba(255,255,255,.90) 0 1px,transparent 2px);
background-size:180px 130px,230px 170px,210px 145px,260px 190px,190px 155px;
animation:hvnHeroTwinkle 2.8s ease-in-out infinite alternate;
}
.hero:after{
content:"";
position:absolute;
z-index:-1;
top:-120%;left:-42%;
width:24%;height:340%;
pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),rgba(255,255,255,.72),rgba(175,235,255,.20),transparent);
transform:rotate(20deg);
animation:hvnHeroSweep 5.8s ease-in-out infinite;
}
.hero h1{
color:#fff!important;
text-shadow:0 2px 5px rgba(0,32,100,.38),0 0 12px rgba(183,231,255,.34)!important;
}
.hero .eyebrow,.hero p{color:#fff!important;text-shadow:0 1px 5px rgba(0,30,90,.36)}
@keyframes hvnHeroTwinkle{
0%{opacity:.46;filter:brightness(.90)}
55%{opacity:1;filter:brightness(1.25)}
100%{opacity:.68;filter:brightness(1.06)}
}
@keyframes hvnHeroSweep{
0%,55%{left:-42%;opacity:0}
63%{opacity:.95}
88%{left:125%;opacity:.22}
100%{left:125%;opacity:0}
}
/* Ánh bạc/tím nhẹ quanh khu vực chơi; không thay kích thước hay bố cục */
.game-card{
box-shadow:
0 14px 34px rgba(31,91,178,.15),
0 0 18px rgba(58,198,255,.10),
0 0 28px rgba(119,67,231,.08)!important;
}
.timer{
box-shadow:0 0 0 3px rgba(255,255,255,.55),0 0 15px rgba(52,178,255,.34)!important;
}
.option{
box-shadow:inset 0 1px 0 rgba(255,255,255,.76),0 3px 10px rgba(40,113,186,.07);
}
.option:hover,.option.selected{
box-shadow:0 6px 17px rgba(66,87,226,.16),0 0 13px rgba(53,202,255,.16)!important;
}
@media(max-width:650px){
.hero:before{background-size:120px 95px,150px 115px,140px 100px,170px 125px,130px 105px}
.hero:after{width:34%;animation-duration:6.4s}
.game-card{box-shadow:0 8px 22px rgba(31,91,178,.14),0 0 14px rgba(112,68,231,.08)!important}
}
@media(prefers-reduced-motion:reduce){
.hero:before,.hero:after{animation:none!important}
}
/* HVN 2.6.5 - đáp án đang chọn: phát sáng rõ, được đổi không giới hạn trước khi hết giờ */
.option.selected,
.option.selected:hover,
.option.selected:focus{
position:relative;
border-color:#15a8ff !important;
background:linear-gradient(135deg,#ffffff 0%,#edf9ff 55%,#f5f0ff 100%) !important;
color:#063d75 !important;
box-shadow:0 0 0 3px rgba(21,168,255,.18),0 0 18px rgba(21,168,255,.58),0 0 30px rgba(109,40,217,.18),inset 0 0 12px rgba(255,255,255,.95) !important;
animation:hvnSelectedAnswerGlow 1.15s ease-in-out infinite alternate;
}
.option.selected b{
transform:scale(1.06);
box-shadow:0 0 0 3px rgba(255,255,255,.75),0 0 16px rgba(21,168,255,.65) !important;
}
.option.selected:after{
content:"✓ ĐANG CHỌN";
margin-left:auto;
padding:4px 8px;
border-radius:999px;
background:#e5f7ff;
color:#075da8;
font-size:.72rem;
font-weight:900;
white-space:nowrap;
}
.option.selected:disabled{opacity:1 !important;filter:none !important;}
@keyframes hvnSelectedAnswerGlow{
from{filter:brightness(1);box-shadow:0 0 0 2px rgba(21,168,255,.13),0 0 12px rgba(21,168,255,.38),0 0 20px rgba(109,40,217,.10) !important;}
to{filter:brightness(1.06);box-shadow:0 0 0 4px rgba(21,168,255,.20),0 0 24px rgba(21,168,255,.68),0 0 34px rgba(109,40,217,.20) !important;}
}
@media(max-width:650px){
.option.selected:after{font-size:.62rem;padding:3px 6px;}
.option.selected{animation-duration:1.35s;}
}
@media(prefers-reduced-motion:reduce){.option.selected{animation:none!important}}
/* HVN 2.6.6 - late join / server-synchronised deadline */
#waiting h2{margin-bottom:10px}
#waiting p{max-width:680px;margin:0 auto;color:#506a82;line-height:1.55}
@media(max-width:650px){#waiting{min-height:260px;padding:28px 16px}#waiting h2{font-size:1.25rem;line-height:1.35}#waiting p{font-size:.92rem}}
/* HVN 2.6.7 - đáp án của HS đã hoàn thành ở lượt mở trước được khóa khi GV mở lại câu. */
.option:disabled.selected{opacity:1!important;cursor:not-allowed!important;border-color:#60a5fa!important;box-shadow:0 0 0 3px rgba(96,165,250,.18),0 0 16px rgba(56,189,248,.30)!important}
.option:disabled:not(.selected){opacity:.58!important;cursor:not-allowed!important}
/* HVN Quiz 2.6.8 - practice mode */
.practice-mode-banner{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:12px auto;max-width:980px;padding:10px 14px;border:1px solid #a98be9;border-radius:12px;background:linear-gradient(135deg,#f5efff,#eef7ff);color:#57349f;text-align:center}
.practice-mode-banner span{font-size:13px;color:#665c73}
@media(max-width:560px){.practice-mode-banner{margin:8px 10px;padding:9px 10px;font-size:13px}.practice-mode-banner span{display:block;width:100%;font-size:12px}}
.fill-student,.matching-student{width:100%}.blank-targets label,.match-row{display:grid;grid-template-columns:minmax(140px,1fr) minmax(180px,1fr);gap:12px;align-items:center;margin:10px 0}.fill-student select,.matching-student select{width:100%;padding:13px;border-radius:10px;border:1px solid #ccd5e2;font-size:1rem}.word-bank{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.word-bank span{background:#fff;border:1px solid #d7deea;border-radius:999px;padding:7px 10px}.match-left{padding:12px;background:#f6f8fc;border-radius:10px}@media(max-width:650px){.blank-targets label,.match-row{grid-template-columns:1fr}}