*{box-sizing:border-box}html{font-family:Tahoma,"Segoe UI",sans-serif;color:#12345a;background:#f2fbf5}body{margin:0}.hero{padding:26px max(18px,calc((100% - 1120px)/2));color:#fff;background:linear-gradient(120deg,#087a4c,#17a968 52%,#f5a623);box-shadow:0 8px 25px #075a3733}.hero small{font-weight:800;letter-spacing:1.5px}.hero h1{margin:7px 0 3px;font-size:clamp(28px,5vw,48px)}.hero p{margin:0;font-weight:700}.topbar{display:flex;gap:12px;align-items:center;padding:10px max(18px,calc((100% - 1120px)/2));background:#fff;border-bottom:2px solid #87d7aa}.topbar a{color:#087a4c;font-weight:800;text-decoration:none}.topbar span{margin-left:auto}.shell{max-width:1120px;margin:20px auto;padding:0 14px}.card{background:#fff;border:1px solid #b9e5ca;border-radius:18px;padding:20px;margin:14px 0;box-shadow:0 10px 26px #135b3420}.center{text-align:center}.notice{padding:12px 15px;border-radius:12px;background:#fff7df;border:1px solid #ffc75a;color:#764900}.success{background:#e9fff1;border-color:#76d99a;color:#076c3e}.error{background:#fff0f0;border-color:#ef8b8b;color:#a32121}.button,button{display:inline-block;border:0;border-radius:12px;padding:11px 16px;background:#edf8f1;color:#075f39;font:bold 15px Tahoma;cursor:pointer;text-decoration:none}.primary{background:#0c965b!important;color:#fff!important}.orange{background:#ff921c!important;color:#fff!important}.danger{background:#c92f35!important;color:#fff!important}.toolbar{display:flex;flex-wrap:wrap;gap:9px;align-items:center}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.field{display:grid;gap:6px}.field label,legend{font-weight:800}.wide{grid-column:1/-1}input[type=text],input[type=number],input[type=datetime-local],textarea,select{width:100%;padding:11px;border:1px solid #8ec9aa;border-radius:10px;font:15px Tahoma;background:#fff}textarea{min-height:82px;resize:vertical}.question-box{border:1px solid #acdcbc;border-radius:14px;padding:14px;margin:12px 0;background:#f8fffa}.question-box summary{font-weight:900;color:#087a4c;cursor:pointer}.choices{display:grid;grid-template-columns:1fr 1fr;gap:9px}.choice{position:relative}.choice input{position:absolute;opacity:0}.choice label{display:flex;gap:12px;align-items:center;padding:14px;border:2px solid #cfe5d7;border-radius:12px;cursor:pointer;white-space:pre-wrap}.choice b{display:grid;place-items:center;min-width:34px;height:34px;border-radius:9px;background:#0c965b;color:#fff}.choice input:checked+label{border-color:#ff921c;background:#fff7eb}.question-text{white-space:pre-wrap;font-size:19px;font-weight:800;line-height:1.5}.question-media{display:block;max-width:100%;max-height:380px;margin:12px auto;border-radius:12px}audio{width:100%;margin:10px 0}.set-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #d8eee0}.muted{color:#63776c;font-size:13px}.rank{width:100%;border-collapse:collapse}.rank th,.rank td{padding:9px;border-bottom:1px solid #d8eee0;text-align:left}.badge{display:inline-block;border-radius:999px;padding:3px 9px;background:#e6f8ed;color:#087a4c;font-weight:800}footer{text-align:center;padding:25px;color:#5c7165}.groups{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.groups label{padding:10px;border:1px solid #b9e5ca;border-radius:10px;background:#fff}.score{font-size:clamp(38px,8vw,72px);font-weight:900;color:#0c965b}.progress{height:12px;border-radius:9px;background:#e3eee7;overflow:hidden}.progress span{display:block;height:100%;background:linear-gradient(90deg,#0c965b,#ffad28)}
@media(max-width:700px){.hero{padding:18px}.hero h1{font-size:30px}.shell{margin:12px auto}.card{padding:14px;border-radius:14px}.grid,.choices{grid-template-columns:1fr}.groups{grid-template-columns:1fr 1fr}.set-row{grid-template-columns:1fr}.toolbar>*{flex:1;text-align:center}.question-text{font-size:17px}.choice label{padding:10px}}
/* HVN 2026 - HÀNH TRÌNH ĐỨC TIN xanh lá phản sáng, đồng bộ quản trị + người chơi */
:root{--g1:#087a4c;--g2:#11a85f;--g3:#3bd477;--g4:#9cf3b9;--gink:#07553a}
body{
background:
radial-gradient(circle at 12% 8%,rgba(64,230,142,.17),transparent 28%),
radial-gradient(circle at 88% 15%,rgba(5,139,91,.13),transparent 31%),
linear-gradient(135deg,#effff5 0%,#f8fff9 52%,#eafff2 100%)!important;
}
.hero{
position:relative;overflow:hidden;
background:
radial-gradient(circle at 17% 16%,rgba(155,255,196,.30),transparent 30%),
radial-gradient(circle at 86% 25%,rgba(61,218,126,.26),transparent 34%),
linear-gradient(115deg,#056b45 0%,#078a52 40%,#10ae62 70%,#42d97b 100%)!important;
box-shadow:0 10px 28px rgba(4,112,70,.23),inset 0 1px 0 rgba(255,255,255,.35)!important;
}
.hero:after{
content:"";position:absolute;top:-95%;left:-35%;width:25%;height:290%;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
transform:rotate(20deg);animation:gHeroShine 5.5s ease-in-out infinite
}
@keyframes gHeroShine{0%,55%{left:-35%;opacity:0}64%{opacity:.95}88%{left:120%;opacity:.28}100%{left:120%;opacity:0}}
.hero h1,.hero p,.hero small{color:#fff!important;text-shadow:0 2px 7px rgba(0,60,36,.34)}
.card{position:relative;overflow:hidden;border-color:rgba(22,174,98,.36)!important;background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(241,255,247,.96))!important;box-shadow:0 14px 34px rgba(5,120,71,.13),0 0 22px rgba(52,210,119,.08)!important}
.card:before{content:"";position:absolute;z-index:0;pointer-events:none;top:-110%;left:-45%;width:25%;height:310%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.80),rgba(99,239,157,.20),transparent);transform:rotate(18deg);animation:gCardShine 7s ease-in-out infinite}
.card>*{position:relative;z-index:1}
@keyframes gCardShine{0%,62%{left:-45%;opacity:0}70%{opacity:.9}91%{left:125%;opacity:.24}100%{left:125%;opacity:0}}
.button,.primary,button.primary,a.primary{
position:relative;overflow:hidden;background:linear-gradient(135deg,#087a4c,#0fa85f 55%,#42d97b)!important;border-color:#18a964!important;color:#fff!important;box-shadow:0 5px 15px rgba(5,135,77,.24),inset 0 1px 0 rgba(255,255,255,.38)!important
}
.button:after,.primary:after,button.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,.82),transparent);transform:rotate(20deg);animation:gButtonSpark 4.2s ease-in-out infinite}
@keyframes gButtonSpark{0%,58%{left:-50%;opacity:0}66%{opacity:1}88%{left:125%;opacity:.25}100%{left:125%;opacity:0}}
.button:hover,.primary:hover,button.primary:hover,a.primary:hover{filter:brightness(1.07);box-shadow:0 7px 20px rgba(5,135,77,.34),0 0 14px rgba(64,220,130,.24)!important}
.answer,.option,.choice,label.option{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.answer:hover,.option:hover,.choice:hover,label.option:hover{transform:translateY(-1px);border-color:#1bb26b!important;box-shadow:0 5px 15px rgba(5,135,77,.14),0 0 12px rgba(64,220,130,.14)!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){.hero:after,.card:before,.button:after,.primary:after,button.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 Hành Trình Đức Tin 2.1.2 — xanh lá kim tuyến.
Chỉ override màu/ánh sáng giao diện; giữ nguyên cấu trúc và logic. */
body{
background:
radial-gradient(circle at 9% 8%,rgba(75,220,132,.12),transparent 29%),
radial-gradient(circle at 92% 13%,rgba(204,255,222,.13),transparent 31%),
linear-gradient(135deg,#f5fff8 0%,#ffffff 48%,#f0fff5 100%)!important;
}
.hero,.game-hero,.player-hero,.arena-hero,.top-hero,.header-card{
background:
radial-gradient(circle at 15% 18%,rgba(177,255,207,.42),transparent 29%),
radial-gradient(circle at 85% 20%,rgba(227,255,236,.34),transparent 31%),
linear-gradient(115deg,#087c46 0%,#0aa45a 42%,#22b96a 70%,#58d98a 100%)!important;
border-color:rgba(210,255,226,.52)!important;
box-shadow:
0 10px 30px rgba(10,126,72,.24),
0 0 20px rgba(82,230,145,.15),
inset 0 1px 0 rgba(255,255,255,.52)!important;
}
.hero:before,.game-hero:before,.player-hero:before,.arena-hero:before,.top-hero:before,.header-card:before{
background:
radial-gradient(circle at 12% 25%,#fff 0 1px,transparent 2px),
radial-gradient(circle at 34% 70%,rgba(214,255,228,.98) 0 1.2px,transparent 2.2px),
radial-gradient(circle at 58% 20%,#fff 0 1px,transparent 2px),
radial-gradient(circle at 78% 68%,rgba(194,255,217,.98) 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:hvnGreenGlitter 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{
background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),rgba(255,255,255,.92),rgba(183,255,210,.32),transparent)!important;
animation:hvnGreenSweep 5.1s ease-in-out infinite!important;
}
.card,.game-card,.panel,.question-card,.quiz-card,.player-card,.upgrade-card{
box-shadow:
0 12px 30px rgba(13,130,74,.13),
0 0 17px rgba(65,220,130,.10),
0 0 25px rgba(205,255,222,.12)!important;
}
button:hover,.btn:hover,.button:hover{
box-shadow:0 5px 16px rgba(18,155,85,.20),0 0 10px rgba(91,231,150,.13)!important;
}
@keyframes hvnGreenGlitter{
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 hvnGreenSweep{
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,#f4fff7 0%,#fff 52%,#effff4 100%)!important}
.card,.game-card,.panel,.question-card,.quiz-card,.player-card,.upgrade-card{
box-shadow:0 8px 22px rgba(12,126,70,.12),0 0 13px rgba(74,221,136,.09)!important;
}
}
/* HTTT 3.0 - bố cục quản trị đợt thi và kết quả */
.launch-box{grid-column:1/-1;border:1px dashed #9fd8b5;border-radius:12px;padding:12px;background:#f8fffa}
.launch-box .grid{margin-bottom:9px}.launch-box label{font-weight:800}.rank{display:table;min-width:760px}.card:has(.rank){overflow-x:auto}
@media(max-width:700px){.launch-box .grid{grid-template-columns:1fr}.rank{min-width:760px}.card:has(.rank){overflow-x:auto;-webkit-overflow-scrolling:touch}}
/* HTTT 3.1.0 — bổ sung chức năng, không thay giao diện gốc */
.time-input{display:flex;align-items:center;gap:8px}.time-input input{max-width:110px}.time-input span{font-weight:800;color:#087c46}
.bank-shortcut{padding:28px 18px}.season-card{margin-top:14px;padding:14px;border:1px solid rgba(18,170,94,.28);border-radius:14px;background:rgba(248,255,250,.82)}
.season-head,.set-library-head,.question-progress{display:flex;justify-content:space-between;gap:15px;align-items:flex-start}
.week-chip{display:inline-flex;margin:9px 7px 0 0;padding:7px 10px;border:1px solid #b7e5c7;border-radius:999px;background:#effbf3;color:#167447;font-weight:800;font-size:13px}
.week-form{margin-top:12px;padding-top:12px;border-top:1px dashed #b9dfc7}.set-library-card{overflow:visible}
.contest-mode{display:flex;gap:14px;flex-wrap:wrap}.contest-mode label{display:flex;gap:6px;align-items:center;padding:8px 10px;border:1px solid #b7e5c7;border-radius:10px;background:#f7fff9}
.countdown-box{display:flex;align-items:center;gap:6px;min-width:128px;justify-content:center;padding:10px 14px;border:1px solid #8edbb0;border-radius:14px;background:linear-gradient(135deg,#f4fff8,#eafff1);color:#0a7546}
.countdown-box strong{font-size:30px;line-height:1;color:#07854d}.countdown-box.urgent{border-color:#e7a347;background:#fff9ef;color:#a45c00}.countdown-box.urgent strong{color:#d56a00}
.current-question .question-number{font-weight:900;color:#0b8a50;margin-bottom:8px}.current-question .question-text{font-size:22px;font-weight:850;line-height:1.4;margin-bottom:18px}
.current-question .choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}.timed-choice{display:flex;gap:11px;align-items:center;text-align:left;padding:14px;border:1px solid #a8ddbc;border-radius:14px;background:#fff;color:#173a2c;cursor:pointer;min-height:58px}
.timed-choice b{display:grid;place-items:center;flex:0 0 32px;height:32px;border-radius:50%;background:#eafaf0;color:#087a49}.timed-choice span{font-size:16px}.timed-choice.is-selected{border:2px solid #0aa45a;background:linear-gradient(135deg,#effff5,#e0fced);box-shadow:0 0 0 3px rgba(55,218,126,.12),0 7px 20px rgba(8,151,82,.18)}.timed-choice.is-selected b{background:#0aa45a;color:#fff}
.question-actions{margin-top:18px;text-align:center}
@media(max-width:700px){.season-head,.set-library-head,.question-progress{flex-direction:column;align-items:stretch}.current-question .choices{grid-template-columns:1fr}.current-question .question-text{font-size:19px}.countdown-box{align-self:center}.contest-mode{display:grid;grid-template-columns:1fr}}
/* HTTT 3.1.1 — Xóa/Lưu trữ đề trong Kho đề */
.set-more{position:relative}.set-more>summary{list-style:none;cursor:pointer}.set-more>summary::-webkit-details-marker{display:none}
.set-more-menu{position:absolute;right:0;top:calc(100% + 7px);z-index:30;min-width:170px;padding:7px;background:#fff;border:1px solid #b7e5c7;border-radius:12px;box-shadow:0 12px 28px rgba(14,96,57,.16)}
.set-more-menu form{margin:0}.set-more-menu button{width:100%;text-align:left}.menu-delete{white-space:nowrap}
.archived-bank{margin-top:14px}.archived-bank>summary{cursor:pointer;list-style:none}.archived-bank>summary::-webkit-details-marker{display:none}
.archived-list{margin-top:13px;border-top:1px dashed #b9dfc7}.archived-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 2px;border-bottom:1px solid #e1f1e7}
.archived-row:last-child{border-bottom:0}.archived-row .toolbar form{margin:0}
@media(max-width:700px){.set-more-menu{right:0;min-width:155px}.archived-row{align-items:flex-start;flex-direction:column}.archived-row .toolbar{width:100%}}
/* HTTT 3.1.2 — phân quyền quản trị 2 cấp */
.manager-panel{margin-top:16px;border-color:#a9dfbe;background:linear-gradient(135deg,#f7fff9,#effbf4)}
.manager-panel h2{color:#087c46}.manager-add{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin:12px 0}.manager-add label{display:grid;gap:6px;font-weight:800}.manager-list{display:grid;gap:8px}.manager-list form{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border:1px solid #d5eddd;border-radius:10px;background:#fff}.manager-list span{font-weight:900;color:#087c46}.manager-readonly{background:#f8fbf9}
@media(max-width:650px){.manager-add{grid-template-columns:1fr}.manager-list form{align-items:flex-start;flex-direction:column}.manager-list button{width:100%}}
/* 3.1.5 - chỉnh/sửa Mùa thi */
.season-edit-menu{min-width:320px;max-width:min(420px,90vw)}
.season-edit-menu form{display:grid;gap:9px}.season-edit-menu label{display:grid;gap:4px;font-weight:700}.season-edit-menu input{width:100%;box-sizing:border-box}
/* HTTT 3.1.6 - bang ket qua: tach Ho va Ten / Lop / Tai khoan */
.results-table-card{padding:14px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.results-rank{min-width:1080px;table-layout:auto}
.results-rank th{font-size:14px;line-height:1.15;vertical-align:bottom;white-space:normal}
.results-rank td{vertical-align:middle}
.results-rank .col-rank{width:58px;text-align:center}
.results-rank .col-name{min-width:190px}
.results-rank .col-class{width:72px;text-align:center;white-space:nowrap}
.results-rank .col-account{min-width:105px;white-space:nowrap}
.results-rank .col-result{width:76px;text-align:center;white-space:nowrap}
.results-rank .col-time{width:92px;text-align:center;white-space:nowrap}
.results-rank .col-points{width:100px;text-align:center}
.results-rank .col-final{width:118px;text-align:center;font-size:16px}
.results-rank .col-awarded{width:78px;text-align:center}
@media(max-width:700px){.results-rank{min-width:1080px}.results-table-card{padding:10px 8px}}
/* HTTT Question Engine vNext: 3 loại câu hỏi + bảng ký hiệu */
.question-symbol-host{margin-top:-4px}.symbol-mini{border:1px solid #b9e5ca;border-radius:10px;background:#f8fffa;padding:6px 8px}.symbol-mini-bar{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.symbol-mini-bar>b{color:#087a4c;margin-right:2px;white-space:nowrap}.symbol-subject,.symbol-category{appearance:none;border:1px solid #b8d9c4;background:#fff;color:#176745;border-radius:7px;padding:4px 9px;font-size:13px;font-weight:800;line-height:1.15;cursor:pointer}.symbol-subject:hover,.symbol-category:hover,.symbol-subject.active,.symbol-category.active{background:#0c965b;color:#fff;border-color:#0c965b}.symbol-mini-hint{font-size:12px;color:#72827a;margin-left:4px}.symbol-panel{margin-top:6px;border-top:1px dashed #c8dfd0;padding-top:6px}.symbol-panel[hidden]{display:none!important}.symbol-category-tabs{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:6px}.symbol-category{font-size:12px;padding:3px 8px;font-weight:700}.symbol-items{display:flex;flex-wrap:wrap;gap:4px;max-height:116px;overflow:auto;padding:1px}.symbol-btn{min-width:31px;min-height:29px;padding:4px 7px;border-radius:6px;background:#fff;border:1px solid #a8d7b9;font-size:15px;line-height:1.05;font-weight:700;cursor:pointer}.symbol-btn:hover{background:#eafff1;border-color:#0c965b}.symbol-action{background:#eaf7ff;border-color:#8bbfd9;color:#07587f}.qtype-summary{font-weight:700;color:#63776c}.type-panel[hidden]{display:none!important}.type-choice{display:grid;grid-template-columns:1fr 1fr;gap:14px}.type-fill{display:block}.match-editor{display:grid;grid-template-columns:1fr 1fr;gap:8px}.match-head{font-weight:900;color:#087a4c}.answer-key{margin-top:14px;padding:12px;border:1px solid #78d39a;border-radius:12px;background:#effff5}.match-preview{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin-top:14px}.match-preview>div{padding:10px;border:1px solid #b9e5ca;border-radius:10px;background:#f8fffa}.fill-answer{display:grid;gap:8px;margin-top:18px}.fill-answer label{font-weight:900}.fill-answer input{font-size:18px;padding:14px}.match-player{display:grid;gap:10px;margin-top:18px}.match-instruction{font-weight:800;color:#087a4c}.match-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center}.match-left{padding:12px;border:1px solid #b9e5ca;border-radius:10px;background:#f7fff9;font-weight:700}.match-arrow{font-size:22px;color:#0c965b;font-weight:900}.match-row select{min-width:0}.question-actions{margin-top:18px}.question-actions .primary{width:100%}
@media(max-width:700px){.symbol-mini-hint{display:none}.symbol-subject{padding:5px 8px}.symbol-items{max-height:145px}.symbol-btn{min-width:35px;min-height:33px}.type-choice{grid-template-columns:1fr}.match-editor{grid-template-columns:1fr}.match-head{display:none}.match-row{grid-template-columns:1fr}.match-arrow{transform:rotate(90deg);text-align:center}.match-preview{grid-template-columns:1fr}.match-preview>b{text-align:center}}
.teacher-alert{margin:7px 0 10px;padding:8px 10px;border:1px solid #e7a1a1;border-radius:8px;background:#fff4f4;color:#c40000;font-weight:900;line-height:1.45;animation:teacherAlertBlink 1.15s ease-in-out infinite}
@keyframes teacherAlertBlink{0%,100%{opacity:1}50%{opacity:.48}}
@media (prefers-reduced-motion:reduce){.teacher-alert{animation:none}}
.fill-builder{display:grid;gap:8px}.fill-builder .create-blank{justify-self:start}.fill-guide{color:#c40000;font-weight:800}.fill-created-title{margin-top:3px;color:#9f1010;font-weight:900}.fill-answer-list{display:grid;gap:7px}.fill-answer-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px;align-items:center}.fill-order{text-align:center;color:#c40000;font-size:20px;font-weight:900}.fill-answer-input{width:100%;color:#c40000!important;font-style:italic;font-weight:800;background:#fffafa!important}.fill-delete{border:1px solid #e09595;border-radius:8px;background:#fff;color:#b30000;font-weight:900;padding:7px 12px;cursor:pointer}.fill-delete:hover{background:#ffeaea}.fill-empty-red{padding:7px 0;color:#c40000;font-style:italic;font-weight:800}.inline-blank{display:inline-block;min-width:72px;margin:0 4px;border-bottom:2px solid #0c965b;color:#0c965b;font-weight:900;text-align:center}.fill-bank-player{display:grid;gap:12px;margin-top:18px}.fill-bank-instruction{font-weight:800;color:#087a4c}.fill-word-bank{display:flex;flex-wrap:wrap;gap:8px;padding:10px;border:1px dashed #8bcba5;border-radius:10px;background:#f6fff9}.fill-word-bank span{padding:6px 10px;border:1px solid #b8d9c4;border-radius:999px;background:#fff;font-weight:800}.fill-blank-selects{display:grid;gap:9px}.fill-blank-selects label{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;align-items:center}.fill-blank-selects select{min-width:0}
@media(max-width:700px){.fill-blank-selects label{grid-template-columns:1fr}.teacher-alert{animation-duration:1.35s}}
@media(max-width:560px){.fill-answer-row{grid-template-columns:34px minmax(0,1fr) auto}.fill-delete{padding:7px 9px}}
/* HTTT numbered fill blanks: same numbering for teacher and student */
.fill-numbered-preview-title{margin-top:5px;color:#255a46;font-weight:900}
.fill-numbered-preview{padding:12px 10px;border:1px dashed #9ccdb5;border-radius:10px;background:#fbfffc;line-height:2.35;font-weight:700;white-space:pre-wrap}
.fill-numbered-preview.is-empty{color:#777;font-style:italic;font-weight:600}
.numbered-blank{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:78px;margin:0 6px -2px;vertical-align:middle;line-height:1}
.blank-number{display:block;margin-bottom:2px;color:#087a4c;font-size:12px;font-weight:1000;line-height:1;text-align:center}
.blank-line{display:block;min-width:72px;border-bottom:2px solid #0c965b;color:#0c965b;font-weight:900;line-height:1.15;text-align:center;letter-spacing:1px}
.current-question .numbered-blank .blank-number{font-size:13px;color:#075f3d}
.current-question .numbered-blank .blank-line{min-width:82px}
@media(max-width:700px){.numbered-blank{min-width:66px;margin-left:4px;margin-right:4px}.blank-line{min-width:62px}.current-question .numbered-blank .blank-line{min-width:68px}}
/* HTTT: số thường, to, rõ trên chỗ trống */
.blank-number{display:block!important;margin-bottom:3px!important;color:#075f3d!important;font-size:18px!important;font-weight:900!important;line-height:1!important;text-align:center!important;vertical-align:baseline!important}.current-question .numbered-blank .blank-number{font-size:19px!important;color:#075f3d!important}.fill-order{font-size:18px!important}
/* Ngân hàng câu hỏi/bộ đề dùng chung */
.qbank-save-box,.set-bank-save{border:1px dashed #85c9a1;border-radius:12px;background:#f8fffb;padding:12px;margin-top:8px}.qbank-set-options{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}.qbank-overwrite-toggle{color:#7a4b00!important}.qbank-toggle{display:flex!important;align-items:center;gap:8px;font-weight:900;color:#086b47;cursor:pointer}.qbank-toggle input{width:auto!important;margin:0}.qbank-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}.qbank-meta[hidden]{display:none!important}.qbank-meta label{display:grid;gap:5px;font-weight:800}.qbank-page-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}.qbank-page-tabs a.active{background:#087a4c;color:#fff;border-color:#087a4c}.qbank-filter{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;align-items:end}.qbank-filter label{display:grid;gap:4px;font-weight:800}.qbank-list{display:grid;gap:10px}.qbank-item{border:1px solid #d8e8df;border-radius:12px;background:#fff;padding:12px}.qbank-item.inactive{opacity:.7;background:#f7f7f7}.qbank-item-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.qbank-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.qbank-tag{padding:3px 8px;border-radius:999px;background:#eef8f2;border:1px solid #c9e2d3;font-size:12px;font-weight:800}.qbank-actions{display:flex;flex-wrap:wrap;gap:6px}.qbank-edit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.qbank-edit-grid .wide{grid-column:1/-1}.qbank-perm-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(180px,1fr) 120px 120px auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #e4ece8}@media(max-width:800px){.qbank-meta,.qbank-filter,.qbank-edit-grid{grid-template-columns:1fr}.qbank-perm-row{grid-template-columns:1fr}.qbank-item-head{display:block}.qbank-actions{margin-top:8px}}
/* HTTT compact fill/match editor 2026-08-16 */
.fill-answer-row.compact{display:flex;align-items:center;gap:6px;max-width:560px}.fill-answer-row.compact .fill-answer-input{flex:0 1 360px}.fill-answer-row.compact .fill-delete{flex:0 0 auto}.match-dynamic-list{display:grid;gap:8px}.match-dynamic-row{display:grid;grid-template-columns:28px minmax(0,1fr) 24px minmax(0,1fr) 34px;gap:8px;align-items:center}.match-dynamic-row>b{text-align:center}.match-dynamic-row textarea{min-height:44px;resize:vertical}.match-dynamic-row>span{text-align:center;font-weight:900}.match-delete{padding:5px;border:1px solid #e09595;border-radius:6px;background:#fff;color:#b30000;font-weight:900;cursor:pointer}.add-match-pair{margin-top:8px;justify-self:start}@media(max-width:700px){.match-dynamic-row{grid-template-columns:24px 1fr 24px 1fr 32px}.fill-answer-row.compact{max-width:none}}
/* 3.0 compact fill answers: same interaction form as Quiz */
.fill-answer-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.fill-answer-list .blank-item{display:inline-flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid #d7e4dc;border-radius:8px;background:#fff}.fill-answer-list .blank-item em{color:#d9271c;font-weight:700}.fill-answer-list .fill-delete{padding:4px 8px}
/* v2.1: danh sach dap an dien tu: moi dap an mot dong, so khop voi [n] trong cau */
.fill-answer-list{display:grid!important;gap:7px!important;margin-top:10px}.fill-answer-list .blank-item{display:grid!important;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:8px;padding:5px 0!important;border:0!important;border-radius:0!important;background:transparent!important;max-width:620px}.fill-answer-list .blank-item .fill-order{color:#c40000;font-size:16px;text-align:right}.fill-answer-list .blank-item em{color:#d9271c;font-weight:800;font-size:16px}.fill-answer-list .fill-delete{justify-self:start;padding:5px 9px}@media(max-width:560px){.fill-answer-list .blank-item{grid-template-columns:28px minmax(0,1fr) auto}}
/* 2026-08-17 - Bank set actions: 2 lựa chọn loại trừ, gọn và rõ */
.qbank-set-panel{border:1px dashed #85c9a1;border-radius:13px;background:#f8fffb;padding:12px 14px;margin-top:12px}
.qbank-set-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}.qbank-set-heading b{color:#086b47;font-size:16px}
.qbank-set-actions{display:flex;flex-wrap:wrap;gap:9px}.qbank-action-choice{position:relative;display:inline-flex!important;align-items:center;justify-content:center;min-height:40px;padding:8px 14px!important;border:1px solid #9bcfb0!important;border-radius:10px!important;background:#fff!important;color:#086b47!important;font-weight:900!important;cursor:pointer;box-shadow:0 3px 9px rgba(8,107,71,.06)}
.qbank-action-choice input{position:absolute!important;opacity:0!important;pointer-events:none!important;width:1px!important;height:1px!important}.qbank-action-choice:hover{border-color:#0c965b!important;background:#f0fff6!important}.qbank-action-choice.active{background:#0c965b!important;border-color:#0c965b!important;color:#fff!important;box-shadow:0 5px 14px rgba(12,150,91,.18)}
.qbank-set-meta{display:grid;grid-template-columns:minmax(220px,360px) minmax(0,1fr);gap:12px;align-items:end;margin-top:11px;padding-top:10px;border-top:1px solid #d8ece0}.qbank-set-meta[hidden]{display:none!important}.qbank-set-meta label{display:grid;gap:5px;font-weight:800}.qbank-set-meta small{line-height:1.45;color:#56685e}
.qbank-filter-sets{grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto!important}
@media(max-width:800px){.qbank-set-meta,.qbank-filter-sets{grid-template-columns:1fr!important}.qbank-action-choice{flex:1 1 190px}}
/* HTTT 2.6.5 — chuẩn hóa thanh điều hướng Admin; chỉ UI, không đổi gameplay */
.admin-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.admin-title-row h2{margin:4px 0 6px}
.admin-command-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:16px;padding-top:14px;border-top:1px solid rgba(18,155,85,.18)}
.admin-command-bar .button{display:inline-flex;align-items:center;justify-content:center;min-height:40px;box-sizing:border-box;text-decoration:none;white-space:nowrap}
.personnel-note{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;padding:12px 14px;border:1px solid #b7e5c7;border-radius:12px;background:#f7fff9}
.personnel-note span{color:#4f6f5e;font-size:.92rem}.personnel-note a{font-weight:900;color:#087a4c}
.admin-history{margin-top:16px;border:1px solid #cbe8d5;border-radius:13px;background:#fbfffc;overflow:hidden}
.admin-history>summary{cursor:pointer;list-style:none;padding:12px 14px;font-weight:900;color:#087a4c}.admin-history>summary::-webkit-details-marker{display:none}.admin-history[open]>summary{border-bottom:1px solid #dcefe3;background:#f2fff6}.admin-history>*:not(summary){margin-left:14px;margin-right:14px}.admin-history>*:last-child{margin-bottom:14px}
@media(max-width:700px){.admin-command-bar{display:grid;grid-template-columns:1fr 1fr}.admin-command-bar .button{width:100%;white-space:normal}.personnel-note{align-items:flex-start;flex-direction:column}}
@media(max-width:430px){.admin-command-bar{grid-template-columns:1fr}}