/* MẮT THẦN KIỂM ĐỊNH — giao diện chung */
:root { --bg: #f1f7f4; --ink: #0f2a22; --mut: #5b7068; --pri: #0e9f6e; --pri2: #047857; --acc: #f59e0b; --bad: #dc2626; --card: #fff; --line: #d8e6df; --r: 16px; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { font-family: "Baloo 2", "Quicksand", "Segoe UI", system-ui, sans-serif; color: var(--ink); background: var(--bg); font-size: 17px; -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.15; }
.hide { display: none !important; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.col { display: flex; flex-direction: column; gap: 12px; }
.sp { flex: 1; }
.mut { color: var(--mut); }
.card { background: var(--card); border-radius: var(--r); padding: 16px; box-shadow: 0 2px 0 #0001, 0 6px 20px #0f2a2210; }

/* ---------- nút ---------- */
.btn { border: 0; border-radius: 12px; padding: .55em 1.1em; font-weight: 700; background: #e3eee9; color: var(--ink); box-shadow: 0 3px 0 #0002; transition: transform .08s, filter .15s; display: inline-flex; align-items: center; gap: .4em; justify-content: center; }
.btn:hover { filter: brightness(1.05); } .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #0002; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.go { background: linear-gradient(180deg, #10b981, #059669); color: #fff; box-shadow: 0 3px 0 #047857; }
.btn.warn { background: linear-gradient(180deg, #fbbf24, #f59e0b); color: #3b2300; box-shadow: 0 3px 0 #b45309; }
.btn.red { background: linear-gradient(180deg, #f87171, #dc2626); color: #fff; box-shadow: 0 3px 0 #991b1b; }
.btn.blue { background: linear-gradient(180deg, #60a5fa, #2563eb); color: #fff; box-shadow: 0 3px 0 #1e40af; }
.btn.gh { background: #fff; border: 2px solid var(--line); box-shadow: none; }
.btn.big { font-size: 1.15em; padding: .65em 1.4em; }
.btn.sm { font-size: .85em; padding: .35em .75em; border-radius: 9px; }

/* ---------- thanh đầu trang: đồng hồ nằm TRONG thanh → không che nội dung ---------- */
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 8px 14px; min-height: 58px; color: #fff;
  background: linear-gradient(90deg, #065f46, #0e9f6e 55%, #14b8a6); box-shadow: 0 3px 12px #0003; }
.logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.25em; white-space: nowrap; letter-spacing: .2px; }
.logo .eye { font-size: 1.5em; filter: drop-shadow(0 0 6px #fde68a); }
.top .info { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 700; }
.pill { background: #ffffff26; border-radius: 999px; padding: .2em .8em; white-space: nowrap; }
.clock { margin-left: auto; display: flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); border-radius: 14px; padding: 4px 14px; font-weight: 800; box-shadow: inset 0 -3px 0 #0001; min-width: 128px; justify-content: center; }
.clock b { font-size: 1.7em; font-variant-numeric: tabular-nums; letter-spacing: 1px; line-height: 1.1; }
.clock .ck-l { font-size: .8em; color: var(--mut); white-space: nowrap; }
.clock.off { opacity: .55; }
.clock.warm b { color: #d97706; } .clock.hot { background: #fee2e2; animation: pulse 1s infinite; } .clock.hot b { color: #dc2626; } .clock.over { background: #e5e7eb; } .clock.over b { color: #6b7280; }
@keyframes pulse { 50% { transform: scale(1.06); } }
.ib { background: #ffffff26; color: #fff; border: 0; border-radius: 10px; padding: 6px 10px; font-size: 1.1em; }

main { padding: 14px; max-width: 1500px; margin: 0 auto; }

/* ---------- đội ---------- */
.ttag { display: inline-flex; align-items: center; gap: .35em; background: var(--c); color: #fff; font-weight: 800; border-radius: 999px; padding: .1em .75em .1em .2em; white-space: nowrap; }
.ttag i { font-style: normal; background: #fff; border-radius: 50%; width: 1.6em; height: 1.6em; display: grid; place-items: center; font-size: .95em; }
.teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.tcard { border: 0; border-radius: 18px; padding: 14px 10px; background: #fff; color: var(--ink); box-shadow: 0 4px 0 var(--c), 0 6px 18px #0001; display: flex; flex-direction: column; align-items: center; gap: 4px; border-top: 6px solid var(--c); transition: transform .12s; }
.tcard:hover { transform: translateY(-3px); }
.tcard .big { font-size: 3em; line-height: 1; }
.tcard .tn { font-weight: 800; font-size: 1.15em; color: var(--c); }
.tcard.me { outline: 4px solid var(--c); background: #fffbeb; }

/* ---------- SIÊU THỊ ---------- */
.market { position: relative; width: 100%; aspect-ratio: 16/10; container-type: inline-size; border-radius: 20px; overflow: hidden; user-select: none;
  background: #e9e4d8; box-shadow: inset 0 0 0 6px #cbbf9f, 0 8px 28px #0002; }
.floor { position: absolute; inset: 0; background:
  linear-gradient(90deg, #0000 49.6%, #d9d1bd 49.6% 50.4%, #0000 50.4%) 0 0/4cqw 4cqw,
  linear-gradient(0deg, #0000 49.6%, #d9d1bd 49.6% 50.4%, #0000 50.4%) 0 0/4cqw 4cqw, #f3efe4; }
.floor::after { content: ""; position: absolute; left: 2%; right: 2%; top: 39%; height: 4%; border-radius: 1cqw; background: repeating-linear-gradient(90deg, #ffffff66 0 3cqw, #0000 3cqw 6cqw); }
.floor::before { content: ""; position: absolute; left: 2%; right: 2%; top: 84%; height: 4%; border-radius: 1cqw; background: repeating-linear-gradient(90deg, #ffffff66 0 3cqw, #0000 3cqw 6cqw); }
.stall { position: absolute; transform: translate(-50%, -50%); width: 24%; height: 22%; border: 0; border-radius: 1.4cqw; background: #fff; color: var(--ink);
  box-shadow: 0 .6cqw 0 color-mix(in srgb, var(--c) 70%, #000), 0 1cqw 2cqw #0003; padding: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; transition: transform .15s, box-shadow .15s; }
.stall .awn { position: absolute; top: 0; left: 0; right: 0; height: 26%; background: repeating-linear-gradient(90deg, var(--c) 0 2.2cqw, #fff 2.2cqw 4.4cqw); }
.stall .awn::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.1cqw; height: 1.2cqw; background: radial-gradient(circle at 1.1cqw 0, var(--c) 1.1cqw, #0000 1.15cqw) 0 0/2.2cqw 1.2cqw repeat-x; }
.stall .sic { font-size: 4.4cqw; line-height: 1; margin-bottom: .2cqw; filter: drop-shadow(0 .3cqw .3cqw #0003); }
.stall .snm { font-weight: 800; font-size: 1.75cqw; background: var(--c); color: #fff; width: 100%; text-align: center; padding: .5cqw .3cqw .6cqw; }
.market:not(.view) .stall:hover { transform: translate(-50%, -52%) scale(1.03); }
.stall.on { box-shadow: 0 .6cqw 0 color-mix(in srgb, var(--c) 70%, #000), 0 0 0 .7cqw #fde047, 0 1cqw 2cqw #0003; }
.gate { position: absolute; transform: translate(-50%, -50%); background: #fff; border-radius: 1.2cqw; padding: .5cqw .8cqw; font-weight: 800; font-size: 1.3cqw; line-height: 1.1; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 .4cqw 0 #0002; white-space: nowrap; }
.gate b { font-size: 2.3cqw; }
.gate.out { background: linear-gradient(180deg, #fde047, #f59e0b); color: #3b2300; cursor: pointer; }
.gate.in { background: #dbeafe; }

/* xe đẩy */
.cart { position: absolute; transform: translate(-50%, -50%) scale(1.15); z-index: 5; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.cart .cbody { position: relative; display: flex; align-items: center; gap: .3cqw; background: var(--c); border-radius: 1.2cqw; padding: .35cqw .6cqw .35cqw .35cqw; box-shadow: 0 .4cqw 0 #0003, 0 0 0 .3cqw #fff; }
.cart .ci { background: #fff; border-radius: 50%; width: 2.7cqw; height: 2.7cqw; display: grid; place-items: center; font-size: 1.75cqw; }
.cart .cb { font-size: 2.1cqw; line-height: 1; }
.cart .cn { position: absolute; top: -1cqw; right: -1cqw; background: #fde047; color: #3b2300; font-weight: 900; font-size: 1.2cqw; min-width: 2cqw; height: 2cqw; border-radius: 99px; display: grid; place-items: center; box-shadow: 0 0 0 .25cqw #fff; }
.cart .cl { margin-top: .3cqw; background: #fff; color: var(--c); font-weight: 900; font-size: 1.15cqw; border-radius: 99px; padding: 0 .7cqw; box-shadow: 0 .2cqw .5cqw #0003; white-space: nowrap; }
.cart.moving .cbody { animation: bump .28s infinite; }
.cart.flip .cb { transform: scaleX(-1); }
.cart.fin .cbody::after { content: "✅"; position: absolute; left: -1.2cqw; top: -1.2cqw; font-size: 1.8cqw; }
@keyframes bump { 50% { transform: translateY(-.35cqw) rotate(-2deg); } }
.market.small .cart .cl { font-size: 1.6cqw; }
.market.small .cart { transform: translate(-50%, -50%) scale(1.3); }

/* ---------- hàng hoá ---------- */
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.item { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 3px 0 #0001, 0 4px 14px #0f2a2214; cursor: pointer; transition: transform .12s; position: relative; }
.item:hover { transform: translateY(-3px); }
.item .ph { position: relative; aspect-ratio: 4/3; background: #eee; overflow: hidden; }
.item .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.item .nm { font-weight: 800; padding: 6px 8px 8px; text-align: center; font-size: .98em; }
.item.incart { outline: 4px solid var(--pri); }
.item .inb { position: absolute; left: 6px; top: 6px; background: var(--pri); color: #fff; font-weight: 800; font-size: .8em; padding: 2px 8px; border-radius: 99px; }
.item.mini { border-radius: 10px; }
.item.mini .ph { aspect-ratio: 1; }
.item .vd { position: absolute; right: 6px; top: 6px; font-weight: 900; padding: 2px 8px; border-radius: 99px; color: #fff; font-size: .9em; animation: pop .4s both; }
.item .vd.ok { background: #16a34a; } .item .vd.bad { background: #dc2626; }
.item.good { outline: 4px solid #16a34a; } .item.no { outline: 4px solid #dc2626; }
.item .why { font-size: .82em; color: var(--mut); padding: 0 8px 8px; line-height: 1.3; }
@keyframes pop { 0% { transform: scale(.3); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
/* nhãn HSD in trên bao bì */
.lab { position: absolute; right: 5px; bottom: 5px; background: #fffef6; color: #111; font-family: "Courier New", ui-monospace, monospace; font-size: 11.5px; line-height: 1.25; padding: 3px 7px 4px; border-radius: 3px; box-shadow: 0 1px 4px #0006; transform: rotate(-2deg); border: 1px solid #ccc; }
.lab .bar { height: 9px; margin-bottom: 2px; background: repeating-linear-gradient(90deg, #111 0 1px, #fff 1px 2px, #111 2px 4px, #fff 4px 5px, #111 5px 6px, #fff 6px 8px); }
.lab b { font-weight: 900; }
.lab.big { font-size: 17px; padding: 5px 11px 7px; right: 12px; bottom: 12px; }
.lab.big .bar { height: 14px; }

/* soi hàng */
.insp { display: flex; flex-direction: column; gap: 10px; }
.insp-h { font-size: 1.2em; font-weight: 700; padding-right: 34px; }
.insp-ph { position: relative; border-radius: 14px; overflow: hidden; cursor: none; touch-action: none; aspect-ratio: 4/3; background: #000; width: min(100%, calc((100vh - 230px) * 4 / 3)); margin: 0 auto; }
.insp-ph img { width: 100%; height: 100%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
.lens { position: absolute; width: 170px; height: 170px; border-radius: 50%; border: 5px solid #fde047; box-shadow: 0 0 0 3px #0008, 0 8px 22px #0009; background-repeat: no-repeat; display: none; pointer-events: none; z-index: 3; }
.lens::after { content: ""; position: absolute; right: -34px; bottom: -34px; width: 44px; height: 14px; background: #78350f; border-radius: 7px; transform: rotate(45deg); }
.insp-tip { color: var(--mut); font-size: .95em; }

/* ---------- học sinh: bố cục chặng 1 ---------- */
.s1 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 1fr); gap: 14px; align-items: start; }
@media (max-width: 900px) { .s1 { grid-template-columns: 1fr; } }
.panel h3 { display: flex; align-items: center; gap: 8px; }
.cartlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.cartbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cap { font-weight: 800; font-size: 1.1em; }
.capbar { flex: 1; min-width: 120px; height: 12px; background: #e5efe9; border-radius: 99px; overflow: hidden; }
.capbar i { display: block; height: 100%; background: linear-gradient(90deg, #10b981, #f59e0b); border-radius: 99px; transition: width .3s; }
.path { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: .9em; }
.path span { background: #f1f5f4; border-radius: 99px; padding: 0 .55em; }
.path .ar { background: none; color: #94a3b8; padding: 0; }
.today { background: #fde047; color: #3b2300; }

/* ---------- giáo viên ---------- */
.gv-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .gv-grid { grid-template-columns: 1fr; } }
.steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.steps button { border: 0; border-radius: 12px; padding: .5em 1em; font-weight: 800; background: #fff; color: var(--mut); box-shadow: 0 2px 0 #0001; }
.steps button.on { background: var(--pri); color: #fff; }
.steps button.done { color: var(--pri2); }
.jour { display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 220px); overflow: auto; padding-right: 4px; }
.jrow { background: #fff; border-radius: 14px; padding: 10px; border-left: 7px solid var(--c); box-shadow: 0 2px 10px #0001; }
.jrow .jh { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.jrow .thumbs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.jrow .thumbs img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 3px solid #fff; box-shadow: 0 1px 4px #0003; }
.jrow .thumbs img.g { border-color: #16a34a; } .jrow .thumbs img.b { border-color: #dc2626; }
.lobby { display: grid; grid-template-columns: 300px 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .lobby { grid-template-columns: 1fr; } }
.code { font-size: 3.4em; font-weight: 900; letter-spacing: 6px; color: var(--pri2); line-height: 1; text-align: center; }
.qrbox { display: grid; place-items: center; background: #fff; padding: 10px; border-radius: 14px; cursor: zoom-in; }
.qrbox.zoom { position: fixed; inset: 0; z-index: 90; background: #000c; cursor: zoom-out; }
.qrbox.zoom img, .qrbox.zoom canvas { width: min(80vh, 80vw) !important; height: auto !important; background: #fff; padding: 20px; border-radius: 20px; }
.field { display: flex; flex-direction: column; gap: 4px; font-weight: 700; }
.field input, .field select, textarea { border: 2px solid var(--line); border-radius: 10px; padding: .4em .6em; background: #fff; }
.tedit { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.tedit .te { display: flex; gap: 6px; align-items: center; background: #fff; border-radius: 12px; padding: 6px; border-left: 6px solid var(--c); }
.tedit .te input { flex: 1; min-width: 0; border: 2px solid var(--line); border-radius: 8px; padding: .3em .5em; font-weight: 700; }
.tedit .te button { border: 0; background: #f1f5f4; border-radius: 8px; font-size: 1.4em; width: 44px; height: 40px; }
.iconpick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.iconpick button { font-size: 1.8em; border: 0; background: #f1f5f4; border-radius: 10px; padding: 4px; }
.on-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #22c55e; margin-right: 4px; }

/* chặng 2 */
.c2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.c2card { background: #fff; border-radius: 18px; padding: 14px; border-top: 8px solid var(--c); box-shadow: 0 4px 16px #0001; position: relative; }
.c2card .hd { display: flex; align-items: center; gap: 10px; }
.c2card .hd .ic { font-size: 2.6em; }
.c2card .hd .nm { font-weight: 900; font-size: 1.35em; color: var(--c); }
.c2card .pts { margin-left: auto; text-align: right; }
.c2card .pts b { font-size: 2.2em; color: var(--ink); line-height: 1; display: block; }
.c2card .pts small { color: var(--mut); font-weight: 700; }
.nums { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 10px; }
.nums button { border: 0; border-radius: 12px; padding: .45em 0; font-weight: 900; font-size: 1.35em; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--c); box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 40%, #fff); }
.nums button:active { transform: translateY(2px); box-shadow: none; }
.fly { position: absolute; right: 22px; top: 10px; font-weight: 900; font-size: 2.4em; color: #16a34a; animation: fly 1s forwards; pointer-events: none; }
@keyframes fly { to { transform: translateY(-60px); opacity: 0; } }

/* ---------- chặng 3: làm bài ---------- */
.sheet { display: flex; flex-direction: column; gap: 14px; max-width: 980px; margin: 0 auto; }
.qcard { background: #fff; border-radius: 18px; padding: 14px 16px 16px; box-shadow: 0 3px 0 #0001, 0 6px 18px #0f2a2212; }
.qh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qno { background: var(--pri); color: #fff; font-weight: 900; border-radius: 10px; padding: 0 .6em; }
.qt { font-weight: 800; color: var(--mut); }
.qpts { font-weight: 900; background: #f1f5f4; border-radius: 99px; padding: 0 .7em; }
.qpts.full { background: #dcfce7; color: #15803d; } .qpts.part { background: #fef9c3; color: #a16207; } .qpts.zero { background: #fee2e2; color: #b91c1c; }
.qp { font-weight: 800; font-size: 1.12em; margin: 8px 0 10px; }
.qtext { font-size: 1.15em; line-height: 2.3; }
input.blank { border: 0; border-bottom: 3px solid var(--pri); background: #ecfdf5; border-radius: 8px 8px 0 0; padding: 0 .4em; font-weight: 800; color: var(--pri2); text-align: center; margin: 0 .2em; min-width: 4em; }
input.blank:focus { outline: 3px solid #a7f3d0; }
.slot { display: inline-flex; align-items: center; justify-content: center; min-width: 6.5em; min-height: 1.9em; padding: 0 .6em; margin: 0 .2em; border: 3px dashed #94a3b8; border-radius: 10px; background: #f8fafc; vertical-align: middle; line-height: 1.5; cursor: pointer; white-space: pre; }
.slot.full { border-style: solid; border-color: var(--pri); background: #ecfdf5; font-weight: 800; color: var(--pri2); white-space: normal; }
.slot.over, .gbox.over { outline: 4px solid #fde047; }
.bank { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; padding: 10px; background: #f1f5f4; border-radius: 14px; min-height: 56px; align-items: center; }
.bank.emp { color: var(--mut); font-weight: 700; justify-content: center; }
.chip { background: #fff; border: 2px solid #cbd5e1; border-radius: 12px; padding: .35em .8em; font-weight: 800; cursor: grab; touch-action: none; user-select: none; box-shadow: 0 3px 0 #0001; }
.chip.sel { border-color: #f59e0b; background: #fffbeb; box-shadow: 0 0 0 4px #fde68a; }
.chip.lift { opacity: .35; }
.chip.ghost { position: fixed; z-index: 999; pointer-events: none; opacity: .95; transform: rotate(-3deg) scale(1.05); box-shadow: 0 10px 24px #0004; }
.groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.gbox { border: 3px dashed var(--c); border-radius: 16px; background: color-mix(in srgb, var(--c) 7%, #fff); min-height: 120px; padding: 8px; cursor: pointer; }
.gname { font-weight: 900; color: var(--c); text-align: center; margin-bottom: 6px; font-size: 1.1em; }
.ginside { display: flex; flex-wrap: wrap; gap: 6px; }
.match { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18%; }
.mcol { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 2; }
.mlines { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.mlines path { fill: none; stroke-width: 4; stroke-linecap: round; }
.mi { display: flex; align-items: center; gap: 8px; background: #fff; border: 3px solid #cbd5e1; border-radius: 14px; padding: .45em .7em; font-weight: 700; cursor: pointer; min-height: 52px; }
.mi .mb { flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; background: #e2e8f0; display: grid; place-items: center; font-weight: 900; }
.mi.on { border-color: var(--c); } .mi.on .mb { background: var(--c); color: #fff; }
.mi.sel { border-color: #f59e0b; box-shadow: 0 0 0 4px #fde68a; }
.mhint { color: var(--mut); font-size: .9em; margin-top: 8px; }
.right { outline: 3px solid #16a34a !important; } .wrong { outline: 3px solid #dc2626 !important; }
.locked .chip, .locked .slot, .locked .mi, .locked .gbox { cursor: default; }
.subbar { position: sticky; bottom: 0; z-index: 20; display: flex; gap: 10px; align-items: center; justify-content: center; padding: 12px; background: linear-gradient(0deg, var(--bg) 70%, #0000); }

/* chặng 3 — giáo viên */
.c3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.c3card { background: #fff; border-radius: 16px; padding: 12px; border-left: 8px solid var(--c); box-shadow: 0 3px 14px #0001; }
.prog { height: 14px; border-radius: 99px; background: #e5efe9; overflow: hidden; margin: 8px 0; }
.prog i { display: block; height: 100%; background: linear-gradient(90deg, #10b981, #14b8a6); transition: width .4s; }
.state { font-weight: 800; }
.state.sub { color: #15803d; }
.qprev { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow: auto; }
.warnbox { background: #fff7ed; border: 2px solid #fdba74; border-radius: 12px; padding: 8px 12px; color: #9a3412; font-weight: 600; }
textarea.qsrc { width: 100%; min-height: 330px; font-family: ui-monospace, Consolas, monospace; font-size: 14px; line-height: 1.5; }
.drop { border: 3px dashed #94a3b8; border-radius: 16px; padding: 18px; text-align: center; background: #fff; font-weight: 700; cursor: pointer; }
.drop.over { border-color: var(--pri); background: #ecfdf5; }

/* ---------- vinh danh ---------- */
.honor { color: #fff; background: radial-gradient(circle at 50% 0, #0e9f6e, #064e3b 75%); border-radius: 22px; padding: 18px 20px 20px; text-align: center; }
.honor h2 { font-size: clamp(1.3rem, 3vw, 2.4rem); color: #fde047; text-shadow: 0 3px 0 #0005; }
.podium { display: flex; gap: 14px; align-items: flex-end; justify-content: center; margin: 10px 0 14px; }
.pod { flex: 1; max-width: 220px; display: flex; flex-direction: column; align-items: center; animation: rise .8s both; animation-delay: var(--d); }
.pod .pi { font-size: 3.2em; line-height: 1; background: #fff; border-radius: 50%; width: 1.5em; height: 1.5em; display: grid; place-items: center; box-shadow: 0 0 0 6px var(--c); margin-bottom: 8px; }
.pod.p1 .pi { font-size: 4em; box-shadow: 0 0 0 7px #fde047, 0 0 30px #fde047; }
.pod .pn { font-weight: 900; font-size: clamp(1rem, 2vw, 1.5rem); white-space: nowrap; }
.pod .pv { font-weight: 900; color: #fde047; font-size: 1.3em; }
.pod .pb { width: 100%; border-radius: 14px 14px 0 0; background: var(--c); display: grid; place-items: center; font-size: 2.2em; margin-top: 6px; box-shadow: inset 0 -6px 0 #0003; }
.pod.me .pn { text-decoration: underline wavy #fde047; }
@keyframes rise { from { transform: translateY(80px); opacity: 0; } }
.htab { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 1.05em; }
.htab th { color: #a7f3d0; font-weight: 700; font-size: .9em; }
.htab td { background: #ffffff1c; padding: 6px 10px; }
.htab td:first-child { border-radius: 12px 0 0 12px; } .htab td:last-child { border-radius: 0 12px 12px 0; }
.htab tr.me td { background: #fde04740; }
.htab .rk { font-weight: 900; font-size: 1.3em; color: #fde047; }
.htab .big { font-weight: 900; font-size: 1.3em; }
.hnote { opacity: .85; font-size: .9em; margin-top: 8px; }

/* ---------- hộp thoại, thông báo ---------- */
.modalbg { position: fixed; inset: 0; z-index: 80; background: #0009; display: grid; place-items: center; padding: 14px; animation: fade .15s; }
.modal { position: relative; background: #fff; border-radius: 20px; padding: 18px; width: min(560px, 100%); max-height: 92vh; overflow: auto; box-shadow: 0 20px 60px #0006; }
.modal.wide { width: min(860px, 100%); }
.modal.huge { width: min(1300px, 100%); }
.modal.narrow { width: min(420px, 100%); }
.modal.dark { background: transparent; box-shadow: none; padding: 0; }
.mx { position: absolute; right: 10px; top: 10px; border: 0; background: #f1f5f4; border-radius: 10px; width: 36px; height: 36px; font-size: 1.1em; z-index: 5; }
.ask { font-size: 1.15em; font-weight: 600; padding-right: 30px; }
@keyframes fade { from { opacity: 0; } }
#toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 99; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.toast { background: #0f2a22; color: #fff; padding: .6em 1.2em; border-radius: 12px; font-weight: 700; box-shadow: 0 6px 20px #0005; animation: pop .25s; }
.toast.bad { background: #b91c1c; } .toast.ok { background: #047857; }
canvas.confetti { position: fixed; inset: 0; z-index: 100; pointer-events: none; }
.big-msg { text-align: center; padding: 30px 16px; }
.big-msg .em { font-size: 4.5em; line-height: 1; }
.big-msg h2 { font-size: 1.8em; }
.netbad { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); background: #b91c1c; color: #fff; padding: 4px 14px; border-radius: 99px; font-weight: 700; z-index: 40; }
@media (max-width: 900px) { .qed { grid-template-columns: 1fr !important; } }
/* ---------- điện thoại ---------- */
@media (max-width: 900px) {
  .s1 > .col { display: contents; }
  .s1 .market { order: 1; } .s1 .shelfp { order: 2; } .s1 .cartp { order: 3; }
}
@media (max-width: 700px) {
  body { font-size: 16px; }
  .top { gap: 6px; padding: 6px 8px; min-height: 52px; flex-wrap: nowrap; }
  .logo span:not(.eye) { display: none; }
  .logo .eye { font-size: 1.3em; }
  .top .info { flex: 1; min-width: 0; flex-wrap: nowrap; overflow: hidden; gap: 5px; font-size: .85em; }
  .top .info .pill:not(.today) { display: none; }
  .top .hn { display: none; }
  .clock { min-width: 0; padding: 3px 9px; flex: none; }
  .clock b { font-size: 1.35em; }
  .clock .ck-l { display: none; }
  main { padding: 8px; }
  .shelf { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .lab { font-size: 10px; padding: 2px 5px 3px; }
  .match { gap: 0 10%; }
  .mi { font-size: .9em; padding: .35em .45em; min-height: 46px; }
  .modal { padding: 12px; }
}
/* trắc nghiệm A/B/C/D */
.mcopts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 700px) { .mcopts { grid-template-columns: 1fr; } }
.mco { display: flex; align-items: center; gap: 10px; background: #fff; border: 3px solid #cbd5e1; border-radius: 14px; padding: .5em .7em; cursor: pointer; min-height: 54px; font-weight: 700; }
.mco:hover { border-color: #94a3b8; }
.mco .mcl { flex: none; width: 2em; height: 2em; border-radius: 50%; background: #e2e8f0; display: grid; place-items: center; font-weight: 900; }
.mco.on { border-color: var(--pri); background: #ecfdf5; } .mco.on .mcl { background: var(--pri); color: #fff; }
.locked .mco { cursor: default; }
.katex { font-size: 1.08em; }

.fixans { display: inline-block; margin: 0 .3em; padding: 0 .55em; border-radius: 8px; background: #dcfce7; color: #15803d; font-weight: 800; font-size: .92em; border: 2px solid #16a34a; }
.keybox { margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: #f0fdf4; border: 2px solid #86efac; color: #166534; line-height: 1.5; }