/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

width:100vw;
height:100vh;

font-family:"Segoe UI",Arial;

background:
linear-gradient(
135deg,
#990000,
#003399
);

color:white;

overflow:hidden;

}

/* ========================= */
/* SETUP SCREEN */
/* ========================= */

.setup-screen{

width:100vw;
height:100vh;

display:flex;
flex-direction:column;

justify-content:center;
align-items:center;

text-align:center;

}

/* TIÊU ĐỀ */

.title-big{

font-size:5vh;

color:#FFD700;

margin-bottom:4vh;

line-height:1.3;

}

/* GRID CHỌN ĐỘI */

.team-grid{

display:grid;

grid-template-columns:
repeat(3, 180px);

gap:2vh;

margin-bottom:4vh;

}

/* GRID CHỌN BỘ */

.set-grid{

display:grid;

grid-template-columns:
repeat(3, 180px);

gap:2vh;

margin-bottom:4vh;

}

/* NÚT CHUNG */

button{

cursor:pointer;

border:none;

border-radius:12px;

font-weight:bold;

transition:0.25s;

}

/* NÚT ĐỘI */

.team-btn{

font-size:2.6vh;

padding:1.4vh;

color:white;

}

/* MÀU ĐỘI */

.team-0{
background:#cc0000;
}

.team-1{
background:#0033cc;
}

.team-2{
background:#ffcc00;
color:black;
}

.team-3{
background:#00aa44;
}

.team-4{
background:#993399;
}

/* NÚT BỘ */

.set-grid button{

font-size:2.6vh;

padding:1.4vh;

background:#0044cc;

color:white;

}

/* TRẠNG THÁI ĐƯỢC CHỌN */

.selected{

outline:4px solid #FFD700;

transform:scale(1.08);

box-shadow:0 0 20px #FFD700;

}

/* NÚT BẮT ĐẦU */

.start-btn{

font-size:3.2vh;

padding:1.6vh 3vw;

background:#FFD700;

color:black;

opacity:0.4;

pointer-events:none;

}

/* KHI ĐỦ ĐIỀU KIỆN */

.start-btn.active{

opacity:1;

pointer-events:auto;

box-shadow:0 0 25px #FFD700;

}

/* ========================= */
/* QUIZ SCREEN */
/* ========================= */

.quiz-screen{

display:none;

width:100vw;
height:100vh;

padding:1vh;

}

/* LAYOUT CHÍNH */

.main-layout{

display:grid;

grid-template-columns:
4fr 1.5fr;

gap:1vw;

height:90vh;

}

/* KHU CÂU HỎI */

.question-area{

padding:2vh;

display:flex;
flex-direction:column;

}

/* TIMER */

#timer{

font-size:3vh;

font-weight:bold;

color:#FFD700;

margin-bottom:1vh;

}

/* CÂU HỎI */

#question{

font-size:3.2vh;

font-weight:bold;

margin-bottom:2vh;

}

/* ĐÁP ÁN */

.option-btn{

width:100%;

font-size:2.6vh;

padding:1.2vh;

margin-bottom:1vh;

background:#003399;

color:white;

}

/* HOVER */

.option-btn:hover{

background:#0055ff;

}

/* ĐÚNG */

.correct{

background:#00cc66 !important;

color:black;

}

/* SAI */

.wrong{

background:#cc0000 !important;

}

/* KẾT QUẢ */

#result{

font-size:2.8vh;

margin-top:1vh;

}

/* ========================= */
/* BẢNG ĐIỂM */
/* ========================= */

.score-area{

background:

linear-gradient(
180deg,
#111,
#222
);

padding:1.5vh;

border-radius:12px;

}

.score-area h2{

text-align:center;

color:#FFD700;

margin-bottom:2vh;

}

/* ĐIỂM ĐỘI */

.team-score{

padding:1.2vh;

margin-bottom:1vh;

border-radius:10px;

font-size:2.4vh;

font-weight:bold;

}

/* ========================= */
/* FOOTER */
/* ========================= */

.footer{

height:8vh;

display:flex;

justify-content:center;
align-items:center;

}

/* NÚT NEXT */

.footer button{

font-size:2.6vh;

padding:1vh 3vw;

background:#FFD700;

color:black;

border-radius:10px;

}.backup-teams{

display:none;
justify-content:center;
gap:20px;
margin-top:20px;

}

.backup-team-btn{

padding:20px 30px;
font-size:22px;
font-weight:bold;

border-radius:12px;

cursor:pointer;

color:white;

transition:0.3s;

}

.backup-team-btn:hover{

transform:scale(1.1);

}

/* màu từng đội */

.team-0{ background:#e53935; }
.team-1{ background:#fb8c00; }
.team-2{ background:#43a047; }
.team-3{ background:#1e88e5; }
.team-4{ background:#8e24aa; }
/* ========================= */
/* BẢN QUYỀN GÓC PHẢI */
/* ========================= */

.copyright {

position: fixed;

bottom: 10px;

right: 18px;

font-size: 14px;

color: rgba(255,255,255,0.75);

font-weight: 500;

letter-spacing: 1px;

z-index: 9999;

/* viền nhẹ cho dễ nhìn trên nền sáng */

text-shadow:
0 0 6px rgba(0,0,0,0.6);

pointer-events: none;

}