/* ============================================================================
   V-HOOD — giao diện trò chơi ôn bài
   ----------------------------------------------------------------------------
   Phong cách: PHẲNG, SẠCH, TƯƠI — không viền dày, không bóng cứng.
   Chỉ dùng bóng mềm rất nhẹ và bo góc nhỏ để khối tách khỏi nền.
   Màu thương hiệu VJIP chỉ ĐIỂM XUYẾT: dấu hiệu logo, chân trang, nút điều khiển.
   Sân khấu chính thuộc về 4 màu đáp án.
   ========================================================================== */

:root {
  /* --- Nền & chữ ---------------------------------------------------------- */
  --ink:    #1F2A44;   /* chữ chính */
  --ink-2:  #5B6B85;   /* chữ phụ */
  --white:  #FFFFFF;
  --paper:  #F3F1FB;   /* nền trang, tím rất nhạt cho tươi */
  --line:   #E6E9F2;

  /* --- Điểm xuyết thương hiệu VJIP ---------------------------------------- */
  --vjip-red:  #DB0A0A;
  --vjip-blue: #0E4EAD;

  /* --- 4 màu đáp án ------------------------------------------------------- */
  --a0: #E21B3C;  --a0t: #FFFFFF;   /* đỏ   ▲ */
  --a1: #1368CE;  --a1t: #FFFFFF;   /* xanh dương ◆ */
  --a2: #F5A800;  --a2t: #1F2A44;   /* vàng  ● — chữ mực để đọc được */
  --a3: #26890C;  --a3t: #FFFFFF;   /* xanh lá ■ */

  /* --- Màu phụ trợ -------------------------------------------------------- */
  --violet: #6A4BC4;   /* đồng hồ */
  --sand:   #E9C46A;   /* vòng đếm người trả lời */
  --gold:   #F2B01E;
  --mint:   #17A673;

  --font-head: Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-body: Calibri, "Segoe UI", Candara, sans-serif;

  --t-chantrang: 13px;
  --t-eyebrow:   14px;
  --t-bodysm:    16px;
  --t-body:      18px;
  --t-cardhsm:   20px;
  --t-cardh:     23px;
  --t-badge:     28px;
  --t-h1:        36px;
  --t-partname:  41px;
  --t-hero:      56px;
  --t-mega:      72px;

  --r:    10px;         /* bo góc chuẩn */
  --r-lg: 16px;
  --sh:    0 1px 3px rgba(31, 42, 68, .10), 0 6px 16px rgba(31, 42, 68, .08);
  --sh-sm: 0 1px 2px rgba(31, 42, 68, .12);
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}
body.fit { overflow: hidden; }

h1, h2, h3 { font-family: var(--font-head); font-weight: 700; margin: 0 0 6px; line-height: 1.1; }
p { line-height: 1.3; margin: 0 0 8px; }

/* --- Bố cục ---------------------------------------------------------------- */

.wrap {
  max-width: 1320px; margin: 0 auto; padding: 12px 18px;
  height: 100dvh; display: flex; flex-direction: column; gap: 10px;
}
.wrap-sm { max-width: 540px; margin: 0 auto; padding: 12px;
  min-height: 100dvh; display: flex; flex-direction: column; gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.grow { flex: 1; }
.center { text-align: center; }
.hidden { display: none !important; }
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.scroll-y { overflow-y: auto; min-height: 0; }

/* --- Thẻ ------------------------------------------------------------------- */

.card      { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--sh); padding: 18px 20px; }
.card-tint { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--sh); padding: 18px 20px; }
.panel     { background: var(--vjip-blue); color: var(--white); border-radius: var(--r-lg);
             box-shadow: var(--sh); padding: 18px 20px; }
.panel-blue{ background: var(--vjip-blue); color: var(--white); border-radius: var(--r-lg);
             box-shadow: var(--sh); padding: 18px 20px; }
.panel .muted, .panel-blue .muted { color: rgba(255,255,255,.82); }

/* --- Đầu trang: gọn, chỉ một dòng ------------------------------------------ */

.topbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; flex: none;
  background: var(--white); border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  padding: 8px 14px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 36px; height: 36px; flex: none; border-radius: 9px;
  background: var(--vjip-red); color: var(--white);
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: var(--t-bodysm);
}
.brand-name { font-family: var(--font-head); font-weight: 700; font-size: var(--t-cardhsm);
  color: var(--ink); letter-spacing: .3px; }
.brand-tag  { font-size: var(--t-chantrang); color: var(--ink-2); }
.topbar .brand-tag { color: var(--ink-2); }

.eyebrow { font-family: var(--font-head); font-weight: 700; font-size: var(--t-eyebrow);
  text-transform: uppercase; letter-spacing: 1.2px; color: var(--ink-2); }
.panel .eyebrow, .panel-blue .eyebrow { color: rgba(255,255,255,.85); }
.title { font-size: var(--t-h1); }
.muted { font-size: var(--t-bodysm); color: var(--ink-2); }

/* --- Nhãn ------------------------------------------------------------------ */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 700; font-size: var(--t-bodysm);
  background: var(--white); color: var(--ink-2);
  border-radius: 99px; padding: 5px 13px; box-shadow: var(--sh-sm);
}
.pill-blue { background: var(--vjip-blue); color: var(--white); }
.pill-red  { background: var(--a0); color: var(--white); }
.pill-gold { background: var(--gold); color: var(--ink); }

/* --- Nút ------------------------------------------------------------------- */

.btn {
  font-family: var(--font-head); font-weight: 700; font-size: var(--t-cardhsm);
  border: 0; border-radius: var(--r); cursor: pointer; padding: 12px 22px;
  background: var(--vjip-blue); color: var(--white); box-shadow: var(--sh-sm);
  transition: filter .12s ease, transform .08s ease;
}
.btn:hover  { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: var(--line); color: var(--ink-2); cursor: not-allowed; filter: none; }
.btn-red   { background: var(--vjip-red); }
.btn-gold  { background: var(--gold); color: var(--ink); }
.btn-ghost { background: var(--white); color: var(--vjip-blue); }
.btn-lg    { width: 100%; padding: 15px 22px; font-size: var(--t-cardh); }
.btn-sm    { padding: 7px 14px; font-size: var(--t-bodysm); }

/* --- Form ------------------------------------------------------------------ */

label { display: block; font-family: var(--font-head); font-weight: 700;
  font-size: var(--t-eyebrow); color: var(--ink-2); margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: .8px; }
input[type="text"] {
  width: 100%; font-family: var(--font-body); font-size: var(--t-cardhsm);
  color: var(--ink); background: var(--white);
  padding: 13px 15px; border: 2px solid var(--line); border-radius: var(--r);
}
input:focus { outline: 0; border-color: var(--vjip-blue); }
.pin-input { font-family: var(--font-head); font-weight: 700; font-size: var(--t-partname);
  text-align: center; letter-spacing: 9px; }
.check { display: flex; align-items: center; gap: 9px; font-family: var(--font-body);
  font-size: var(--t-bodysm); color: var(--ink); text-transform: none; letter-spacing: 0; }
.check input { width: 19px; height: 19px; accent-color: var(--vjip-blue); }

.alert { background: #FEF2F2; color: #99190F; border-radius: var(--r);
  padding: 11px 15px; font-size: var(--t-bodysm); }

/* --- Chọn nhân vật ---------------------------------------------------------- */

.avatars { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.avatar-pick {
  aspect-ratio: 1; font-size: 22px; line-height: 1; cursor: pointer; padding: 0;
  background: var(--white); border: 2px solid var(--line); border-radius: var(--r);
  display: grid; place-items: center; transition: transform .12s ease, border-color .12s ease;
}
.avatar-pick:hover { transform: scale(1.12); }
.avatar-pick.on { border-color: var(--vjip-blue); background: #EEF4FF; transform: scale(1.08); }

/* --- Mã phòng --------------------------------------------------------------- */

.pin-panel { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.pin-code { font-family: var(--font-head); font-weight: 700;
  font-size: clamp(var(--t-hero), 8vw, var(--t-mega)); letter-spacing: 7px;
  line-height: 1; color: var(--white); }
.join-url { font-family: var(--font-head); font-weight: 700; font-size: var(--t-cardh); color: var(--white); }
.qr-box { background: var(--white); border-radius: var(--r); padding: 8px; line-height: 0; }
.qr-box img { width: 168px; height: 168px; display: block; }

/* --- Màn câu hỏi: câu hỏi trên cùng, đồng hồ trái, đếm người phải ------------ */

.q-head {
  background: var(--white); border-radius: var(--r); box-shadow: var(--sh);
  padding: 14px 22px; text-align: center; flex: none;
}
.q-head .q-text {
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(var(--t-cardh), 2.9vw, var(--t-partname));
  line-height: 1.15; color: var(--ink); margin: 0;
}

/* Dải giữa: đồng hồ · thông tin câu · số người đã trả lời */
.q-mid { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex: 1; min-height: 0; padding: 4px 0; }

.timer-ring {
  --p: 100;
  flex: none; width: clamp(78px, 8vw, 108px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; color: var(--white);
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(var(--t-h1), 3.4vw, var(--t-hero));
  background:
    conic-gradient(rgba(255,255,255,.45) calc((100 - var(--p)) * 1%), transparent 0),
    var(--violet);
  box-shadow: var(--sh);
}
.timer-ring.urgent { background:
    conic-gradient(rgba(255,255,255,.45) calc((100 - var(--p)) * 1%), transparent 0),
    var(--a0); animation: pulse .9s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }

.answered-ring {
  flex: none; width: clamp(78px, 8vw, 108px); aspect-ratio: 1; border-radius: 50%;
  background: var(--sand); color: var(--ink);
  display: grid; place-items: center; align-content: center; gap: 0;
  box-shadow: var(--sh); text-align: center;
}
.answered-ring b { font-family: var(--font-head); font-size: clamp(var(--t-badge), 2.6vw, var(--t-h1)); line-height: 1; }
.answered-ring small { font-size: var(--t-chantrang); font-weight: 700; }

.q-meta { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }

/* --- Ô đáp án --------------------------------------------------------------- */

.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: none; }
.answers.one-col { grid-template-columns: 1fr; }

.answer {
  display: flex; align-items: center; gap: 14px; width: 100%;
  border: 0; border-radius: var(--r); padding: 16px 20px; cursor: pointer;
  font-family: var(--font-head); font-weight: 700;
  font-size: clamp(var(--t-cardhsm), 1.6vw, var(--t-cardh));
  text-align: left; background: var(--a0); color: var(--a0t);
  box-shadow: var(--sh-sm); transition: filter .12s ease, transform .08s ease;
  min-height: clamp(74px, 11vh, 104px);
}
.answer[data-i="1"] { background: var(--a1); color: var(--a1t); }
.answer[data-i="2"] { background: var(--a2); color: var(--a2t); }
.answer[data-i="3"] { background: var(--a3); color: var(--a3t); }
.answer:hover { filter: brightness(1.06); }
.answer:active { transform: translateY(1px); }
.answer:disabled { cursor: default; }

/* Ký hiệu hình khối — dấu nhận biết chính, luôn cùng màu chữ của ô */
.answer .sym { flex: none; font-size: clamp(22px, 2vw, 30px); line-height: 1; }
.answer .key { flex: none; font-size: clamp(20px, 1.8vw, 26px); opacity: .85; }
.answer .label { flex: 1; }

.answer.picked { box-shadow: 0 0 0 4px var(--white), 0 0 0 8px currentColor; }
.answer.wrong  { opacity: .38; }
.answer.right  { animation: rightPop .5s ease 2; }
@keyframes rightPop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.answer .verdict { margin-left: auto; font-size: clamp(22px, 2vw, 30px); }

/* --- Chân trang kiểu Kahoot: dải tối, logo trái, mã phòng phải --------------- */

.footbar {
  flex: none; display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 7px 16px; border-radius: var(--r);
  background: var(--ink); color: var(--white);
  font-family: var(--font-head); font-weight: 700; font-size: var(--t-bodysm);
}
/* Chấm điểm xuyết thương hiệu. Đỏ VJIP nguyên bản trên nền mực chỉ đạt 2,76:1
   nên dùng sắc đỏ sáng hơn cho riêng nền tối này. */
.footbar .dot { color: #FF5A5A; }

/* --- Biểu đồ phân bố --------------------------------------------------------- */

.dist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; align-items: end;
  flex: 1; min-height: 0; }
.dist-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  gap: 4px; height: 100%; }
.dist-bar { width: 100%; border-radius: 8px 8px 0 0; min-height: 6px; background: var(--a0);
  transition: height .7s cubic-bezier(.2,.9,.3,1.1); }
.dist-bar[data-i="1"] { background: var(--a1); }
.dist-bar[data-i="2"] { background: var(--a2); }
.dist-bar[data-i="3"] { background: var(--a3); }
.dist-n { font-family: var(--font-head); font-weight: 700; font-size: var(--t-cardhsm); color: var(--ink); }
.dist-key { font-family: var(--font-head); font-weight: 700; font-size: var(--t-bodysm); color: var(--ink-2); }
/* Nhãn đáp án đúng: dùng chính màu xanh lá của ô đáp án, chữ trắng đọc rõ */
.dist-col.is-right .dist-key { background: var(--a3); color: var(--white);
  padding: 1px 10px; border-radius: 99px; }

.explain { background: #FFF9E8; border-left: 5px solid var(--gold); border-radius: 0 var(--r) var(--r) 0;
  padding: 10px 14px; font-size: var(--t-bodysm); color: var(--ink); }

/* --- Bảng xếp hạng: khung nửa màn hình, căn giữa ------------------------------ */

.board-stage { flex: 1; min-height: 0; display: grid; place-items: center; }
.board-frame {
  width: min(720px, 92vw); max-height: 76vh; display: flex; flex-direction: column; gap: 9px;
  background: var(--white); border-radius: var(--r-lg); box-shadow: var(--sh);
  padding: 22px 20px 16px; position: relative;
}
.board-frame::before {
  content: "🏅 BẢNG XẾP HẠNG";
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--ink); border-radius: 99px; padding: 4px 20px;
  font-family: var(--font-head); font-weight: 700; font-size: var(--t-bodysm);
  white-space: nowrap; box-shadow: var(--sh-sm);
}
.board { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-height: 0; }

.board-row {
  display: grid; grid-template-columns: 40px 36px 1fr auto; align-items: center; gap: 10px;
  background: #F7F8FC; border-radius: var(--r); padding: 8px 12px;
  position: relative; overflow: hidden;
}
.board-row .track { position: absolute; inset: 0 auto 0 0; width: 0%;
  background: #DCE7FA; transition: width 1.1s cubic-bezier(.2,.9,.3,1.05); z-index: 0; }
.board-row > * { position: relative; z-index: 1; }
.board-row.rank1 { background: #FFF3D6; }
.board-row.rank1 .track { background: #FFE3A3; }
.board-row.me { box-shadow: inset 0 0 0 2px var(--vjip-red); }
.board-rank { font-family: var(--font-head); font-weight: 700; font-size: var(--t-cardh);
  text-align: center; color: var(--ink-2); }
.board-row.rank1 .board-rank { color: #B4770A; }
.board-ava { font-size: 25px; text-align: center; line-height: 1; }
.board-name { font-family: var(--font-head); font-weight: 700; font-size: var(--t-cardhsm); }
.board-sub { font-size: var(--t-chantrang); color: var(--ink-2); }
.board-score { font-family: var(--font-head); font-weight: 700; font-size: var(--t-cardh); }
.board-move { font-size: var(--t-chantrang); font-family: var(--font-head); font-weight: 700; }
.up { color: var(--mint); } .down { color: var(--a0); }

.gain-bubble {
  position: absolute; right: 12px; top: 50%;
  font-family: var(--font-head); font-weight: 700; font-size: var(--t-bodysm);
  color: var(--white); background: var(--mint); border-radius: 99px; padding: 1px 9px;
  animation: floatUp 1.6s ease-out forwards; z-index: 2;
}
@keyframes floatUp {
  0% { opacity: 0; transform: translateY(6px); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-30px); }
}

/* --- Thẻ người chơi trong sảnh chờ -------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; overflow-y: auto; min-height: 0; align-content: flex-start; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--white); color: var(--ink); border-radius: 99px; padding: 6px 13px;
  font-family: var(--font-head); font-weight: 700; font-size: var(--t-bodysm);
  box-shadow: var(--sh-sm); animation: popIn .28s cubic-bezier(.2,1.3,.4,1);
}
.chip .ava { font-size: 20px; line-height: 1; }
.chip .team { font-family: var(--font-body); font-weight: 400; color: var(--ink-2); }
.chip.off { opacity: .45; }
.chip button { border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0 0 0 3px; }
@keyframes popIn { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* --- Thẻ chọn bộ đề ----------------------------------------------------------- */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.tile {
  display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%;
  background: var(--white); border: 2px solid transparent; border-radius: var(--r-lg);
  box-shadow: var(--sh-sm); padding: 13px 15px; cursor: pointer; font-family: var(--font-body);
  transition: transform .1s ease, border-color .12s ease;
}
.tile:hover { transform: translateY(-2px); }
.tile.on { border-color: var(--vjip-blue); background: #F5F8FF; }
.tile-num { flex: none; width: 40px; height: 40px; border-radius: var(--r);
  background: var(--vjip-blue); color: var(--white); display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: var(--t-cardhsm); }
.tile.on .tile-num { background: var(--vjip-red); }
.tile-title { font-family: var(--font-head); font-weight: 700; font-size: var(--t-cardhsm); color: var(--ink); }
.tile-note { font-size: var(--t-chantrang); color: var(--ink-2); margin-top: 2px; }

/* --- Huy hiệu ------------------------------------------------------------------ */

.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 9px; }
.badge-card { display: flex; gap: 11px; align-items: center; background: var(--white);
  border-radius: var(--r); box-shadow: var(--sh-sm); padding: 10px 13px;
  animation: popIn .35s cubic-bezier(.2,1.3,.4,1) both; }
.badge-card.hero { background: #FFF3D6; }
.badge-icon { flex: none; width: 42px; height: 42px; border-radius: var(--r);
  background: var(--gold); color: var(--white); display: grid; place-items: center; font-size: 24px; }
.badge-title { font-family: var(--font-head); font-weight: 700; font-size: var(--t-bodysm); }
.badge-note { font-size: var(--t-chantrang); color: var(--ink-2); }

/* --- Bục vinh danh -------------------------------------------------------------- */

.podium-stage { flex: 1; min-height: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; }
.podium-title { font-family: var(--font-head); font-weight: 700;
  font-size: clamp(var(--t-h1), 3.8vw, var(--t-hero)); text-align: center; color: var(--ink); }
.podium { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
  align-items: end; width: min(800px, 94vw); }
.podium-col { text-align: center; opacity: 0; transform: translateY(26px); }
.podium-col.show { animation: riseUp .65s cubic-bezier(.2,1.25,.4,1) forwards; }
@keyframes riseUp { to { opacity: 1; transform: translateY(0); } }
.podium-ava { font-size: 44px; line-height: 1; }
.podium-name { font-family: var(--font-head); font-weight: 700; font-size: var(--t-cardhsm); color: var(--ink); }
.podium-score { font-size: var(--t-chantrang); color: var(--ink-2); margin-bottom: 6px; }
.podium-bar { border-radius: var(--r) var(--r) 0 0; color: var(--white);
  font-family: var(--font-head); font-weight: 700; font-size: var(--t-mega);
  display: grid; place-items: center; padding: 6px; }
.podium-1 .podium-bar { background: var(--gold); color: var(--ink); height: 180px; }
.podium-1 .podium-ava { font-size: 60px; animation: bounce 1s ease-in-out infinite; }
.podium-2 .podium-bar { background: var(--a1); height: 132px; }
.podium-3 .podium-bar { background: var(--a3); height: 100px; }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.suspense { animation: zoomPulse .9s ease-in-out infinite; }
@keyframes zoomPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

#fx { position: fixed; inset: 0; pointer-events: none; z-index: 60; }

/* --- Vặt ------------------------------------------------------------------------ */

.stat { text-align: right; }
.stat-num { font-family: var(--font-head); font-weight: 700; font-size: var(--t-badge); line-height: 1; }
.stat-lab { font-size: var(--t-chantrang); color: var(--ink-2); }
.verdict-big { font-family: var(--font-head); font-weight: 700;
  font-size: clamp(var(--t-partname), 11vw, var(--t-hero)); line-height: 1; }
.points-big { font-family: var(--font-head); font-weight: 700; font-size: var(--t-partname); color: var(--mint); }

.sound-btn { border: 0; background: var(--white); color: var(--ink-2); box-shadow: var(--sh-sm);
  border-radius: 99px; cursor: pointer; padding: 6px 13px;
  font-family: var(--font-head); font-weight: 700; font-size: var(--t-bodysm); }
.sound-btn.off { color: var(--ink-2); opacity: .7; }

.controls { display: flex; gap: 9px; padding: 2px 0 0; flex: none; }

/* --- Điện thoại ------------------------------------------------------------------ */

@media (max-width: 760px) {
  .wrap, .wrap-sm { padding: 9px; }
  .podium { gap: 6px; }
  .podium-bar { font-size: var(--t-partname); }
  .avatars { grid-template-columns: repeat(6, 1fr); }
  .qr-box img { width: 140px; height: 140px; }
}

/* Trên điện thoại: 4 ô màu đặc, ký hiệu hình khối lớn ở giữa, kèm chữ cái nhỏ.
   Không hiện nội dung phương án — cả lớp phải nhìn lên màn chiếu. */
.answers.keys-only { grid-template-columns: 1fr 1fr; gap: 9px; flex: 1; min-height: 0; }
.answers.keys-only .answer {
  flex-direction: column; justify-content: center; align-items: center; gap: 2px;
  padding: 6px; height: 100%; min-height: 0;
}
.answers.keys-only .answer .sym { font-size: clamp(40px, 15vw, 74px); }
.answers.keys-only .answer .key { font-size: clamp(15px, 4vw, 20px); opacity: .9; }
.answers.keys-only .answer .label { display: none; }

/* Câu hỏi trên điện thoại: thẻ trắng gọn, không chiếm nhiều chỗ */
.q-text-sm {
  font-family: var(--font-head); font-weight: 700; color: var(--ink);
  background: var(--white); border-radius: var(--r); box-shadow: var(--sh-sm);
  padding: 12px 14px; font-size: var(--t-cardhsm); line-height: 1.2; margin: 0;
}
/* Đồng hồ nhỏ hơn khi đặt trên màn điện thoại */
.timer-ring.sm { width: 76px; font-size: var(--t-h1); }

/* ============================================================================
   SẢNH CHỜ: dải mã phòng gọn + sân bóng tên người chơi
   ========================================================================== */

.pin-strip {
  flex: none; display: flex; align-items: center; gap: 18px;
  background: var(--vjip-blue); color: var(--white);
  border-radius: var(--r-lg); box-shadow: var(--sh); padding: 12px 16px;
}
.pin-strip .eyebrow { color: rgba(255,255,255,.8); display: block; }
.pin-strip-main { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; flex: 1; }
.pin-code-sm { font-family: var(--font-head); font-weight: 700;
  font-size: clamp(var(--t-h1), 3.4vw, var(--t-hero)); letter-spacing: 5px; line-height: 1.05; }
.join-url-sm { font-family: var(--font-head); font-weight: 700; font-size: var(--t-cardhsm); }

/* Ô QR nhỏ, bấm vào để phóng to */
.qr-mini {
  flex: none; border: 0; cursor: pointer; padding: 6px; border-radius: var(--r);
  background: var(--white); display: grid; place-items: center; gap: 3px;
  transition: transform .12s ease;
}
.qr-mini:hover { transform: scale(1.05); }
.qr-mini img { width: 92px; height: 92px; display: block; }
.qr-mini span { font-family: var(--font-head); font-weight: 700; font-size: 11px; color: var(--vjip-blue); }

/* Lớp phủ QR cỡ lớn cho cả lớp cùng quét */
.qr-overlay {
  position: fixed; inset: 0; z-index: 80; cursor: zoom-out;
  background: rgba(20, 26, 45, .93);
  display: grid; place-items: center; padding: 3vh 3vw;
  animation: fadeIn .18s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.qr-overlay-inner { display: flex; align-items: center; gap: clamp(20px, 5vw, 64px); flex-wrap: wrap;
  justify-content: center; }
.qr-big { background: var(--white); padding: 14px; border-radius: var(--r-lg); line-height: 0; }
.qr-big img { width: min(74vh, 62vw); height: min(74vh, 62vw); display: block; }
.qr-overlay-info { color: var(--white); text-align: left; }
.qr-overlay-info .eyebrow { color: rgba(255,255,255,.75); }
.qr-overlay-info .pin-code { letter-spacing: 8px; }
.qr-overlay-info .muted { color: rgba(255,255,255,.6); margin-top: 10px; }

/* --- Sân bóng tên người chơi ------------------------------------------------ */

.lobby-field {
  flex: 1; min-height: 0; position: relative; overflow: hidden;
  background: var(--white); border-radius: var(--r-lg); box-shadow: var(--sh);
}
.field-empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: var(--t-cardh); color: var(--ink-2);
}

.bubble {
  position: absolute; top: 0; left: 0; transform-origin: 0 0;
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  padding: 9px 16px; border-radius: 99px;
  font-family: var(--font-head); font-weight: 700; font-size: var(--t-cardhsm);
  color: var(--white); background: var(--a1);
  box-shadow: 0 3px 10px rgba(31,42,68,.18);
  will-change: transform;
}
/* Xoay vòng 4 màu đáp án cho vui mắt, không mang ý nghĩa gì */
.bubble.c0 { background: var(--a0); color: var(--a0t); }
.bubble.c1 { background: var(--a1); color: var(--a1t); }
.bubble.c2 { background: var(--a2); color: var(--a2t); }
.bubble.c3 { background: var(--a3); color: var(--a3t); }
.bubble.c4 { background: var(--violet); color: #fff; }
.bubble.c5 { background: var(--mint); color: #fff; }
.bubble .b-ava { font-size: 1.25em; line-height: 1; }
.bubble.off { opacity: .4; }
/* Người vừa vào: viền sáng nhấp nháy trong ít giây đầu */
.bubble.hot { box-shadow: 0 0 0 5px rgba(242,176,30,.55), 0 6px 18px rgba(31,42,68,.25); }

/* ============================================================================
   TRÌNH SOẠN BỘ ĐỀ
   ========================================================================== */

textarea, select, input[type="number"] {
  width: 100%; font-family: var(--font-body); font-size: var(--t-bodysm);
  color: var(--ink); background: var(--white);
  padding: 9px 12px; border: 2px solid var(--line); border-radius: var(--r);
}
textarea { resize: vertical; min-height: 62px; line-height: 1.35; }
textarea:focus, select:focus, input[type="number"]:focus { outline: 0; border-color: var(--vjip-blue); }

.editor { display: grid; grid-template-columns: 290px 1fr; gap: 14px;
  align-items: start; min-height: 0; flex: 1; }
.editor-side { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 9px;
  max-height: calc(100dvh - 150px); }
.editor-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.q-list { display: flex; flex-direction: column; gap: 10px; }
.q-card { background: var(--white); border-radius: var(--r-lg); box-shadow: var(--sh-sm);
  padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.q-card.bad { box-shadow: 0 0 0 2px var(--a0), var(--sh-sm); }
.q-card-head { display: flex; align-items: center; gap: 9px; }
.q-num { flex: none; width: 34px; height: 34px; border-radius: var(--r);
  background: var(--vjip-blue); color: var(--white); display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: var(--t-bodysm); }
.q-tools { margin-left: auto; display: flex; gap: 5px; }
.icon-btn { border: 0; background: #EEF1F7; color: var(--ink-2); cursor: pointer;
  width: 32px; height: 32px; border-radius: 8px; font-size: 15px; line-height: 1;
  font-family: var(--font-head); font-weight: 700; }
.icon-btn:hover { background: #DFE5EF; color: var(--ink); }
.icon-btn.danger:hover { background: #FEE2E2; color: #B4160B; }

.opt-row { display: grid; grid-template-columns: 30px 1fr; gap: 9px; align-items: center; }
.opt-row .mark { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 13px; color: #fff; }
.opt-row[data-i="0"] .mark { background: var(--a0); }
.opt-row[data-i="1"] .mark { background: var(--a1); }
.opt-row[data-i="2"] .mark { background: var(--a2); color: var(--ink); }
.opt-row[data-i="3"] .mark { background: var(--a3); }
.opt-row.correct input[type="text"] { border-color: var(--mint); background: #F0FCF7; }

.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
.field label { margin-bottom: 3px; }
.correct-pick { display: flex; align-items: center; gap: 7px; font-size: var(--t-chantrang);
  color: var(--ink-2); font-family: var(--font-body); text-transform: none; letter-spacing: 0; }
.correct-pick input { width: 17px; height: 17px; accent-color: var(--mint); }

.save-bar { position: sticky; bottom: 0; background: var(--paper); padding: 10px 0;
  display: flex; gap: 9px; align-items: center; }
.save-note { font-size: var(--t-chantrang); color: var(--ink-2); }
.save-note.ok { color: var(--mint); font-weight: 700; }
.save-note.err { color: var(--a0); font-weight: 700; }

@media (max-width: 900px) {
  .editor { grid-template-columns: 1fr; }
  .editor-side { position: static; max-height: none; }
}

/* --- Lớp phủ đăng nhập giảng viên -------------------------------------------- */

.login-overlay {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20, 26, 45, .93);
  display: grid; place-items: center; padding: 20px;
}
.login-card {
  width: min(400px, 92vw); background: var(--white);
  border-radius: var(--r-lg); box-shadow: var(--sh);
  padding: 24px; display: flex; flex-direction: column; gap: 13px;
}
.login-card input[type="password"] {
  width: 100%; font-family: var(--font-body); font-size: var(--t-cardhsm);
  color: var(--ink); background: var(--white);
  padding: 13px 15px; border: 2px solid var(--line); border-radius: var(--r);
}
.login-card input[type="password"]:focus { outline: 0; border-color: var(--vjip-blue); }