/* ============================================================
   QUIZ MAY CHIEU — giao dien chieu len bang lop
   ------------------------------------------------------------
   Ba rang buoc cua man chieu, khac han web thuong:
     · Nguoi xem ngoi cach man 3-8 met -> chu phai TO qua muc
       binh thuong (dung clamp() theo vw, khong dat px cung).
     · May chieu lam mau NHAT va bet -> mau phai dam, tuong phan
       cao; chu mong tren nen sang la day cuoi khong doc duoc.
     · Khong ai cham vao man -> khong lam gi phu thuoc hover.
   ============================================================ */

/* ---------- Nut nho dung trong thanh cong cu ---------- */
.q-nut.nho{padding:7px 14px; font-size:.9rem; border-radius:9px}
.q-nhap.nho{padding:8px 12px; font-size:.95rem}

/* ---------- Chon che do choi ---------- */
.mc-chon{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px}
.mc-the{
  display:flex; flex-direction:column; gap:3px; text-align:left; cursor:pointer;
  font:inherit; padding:15px 17px; border-radius:14px;
  border:2px solid var(--border); background:var(--panel); color:var(--text);
  transition:.15s border-color,.15s transform,.15s box-shadow;
}
.mc-the:hover{transform:translateY(-2px); box-shadow:var(--shadow)}
.mc-the.chon{border-color:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 18%,transparent)}
.mc-the b{font-size:1.05rem}
.mc-the span{font-size:.88rem; line-height:1.45}

/* ---------- Chip ten doi o man soan ---------- */
.mc-doi-chip{
  display:inline-flex; align-items:center; gap:8px; padding:6px 8px 6px 12px;
  border:1px solid var(--border); border-radius:999px; background:var(--panel);
}
.mc-doi-chip .tenDoi{
  border:0; background:transparent; color:var(--text); font:inherit; font-weight:700;
  padding:2px 0; min-width:60px;
}
.mc-doi-chip .tenDoi:focus{outline:0; border-bottom:2px solid var(--primary)}
.mc-doi-chip .xoa{
  border:0; background:transparent; color:var(--muted); cursor:pointer;
  font-size:1.15rem; line-height:1; padding:0 4px;
}
.mc-doi-chip .xoa:hover{color:var(--danger)}
.mau{width:13px; height:13px; border-radius:50%; flex:none; display:inline-block}
.m0{background:#e21b3c} .m1{background:#1368ce} .m2{background:#d89e00}
.m3{background:#26890c} .m4{background:#8b5cf6} .m5{background:#ec4899}

/* ---------- Dau man cau hoi ---------- */
.mc-dau{display:flex; align-items:center; gap:16px; min-height:78px; flex-wrap:wrap}

/* ---------- Khoi dong ho + nut bam gio ---------- */
.mc-gio{display:flex; align-items:center; gap:12px}
/* So dem phai doc duoc tu cuoi lop -> to gap doi dong ho o ban dien thoai. */
.mc-gio .q-dongho{
  width:clamp(76px,7.4vw,108px); height:clamp(76px,7.4vw,108px);
  font-size:clamp(1.9rem,3vw,2.9rem);
}
.mc-gio .q-dongho::after{inset:9px}
/* Dang cho: vong tron xam lai cho khoi giong "dang chay". */
.q-dongho.nghi{
  background:conic-gradient(color-mix(in srgb,var(--muted) 42%,transparent) calc(var(--p,1) * 360deg),
             color-mix(in srgb,var(--muted) 16%,transparent) 0);
}
.q-dongho.nghi span{color:var(--muted)}
/* Het gio: do, va thoi dap. */
.q-dongho.het{background:var(--danger); animation:none}
.q-dongho.het span{color:var(--danger)}
.q-dongho.gap{
  background:conic-gradient(var(--danger) calc(var(--p,1) * 360deg),
             color-mix(in srgb,var(--danger) 18%,transparent) 0);
}
.q-dongho.gap span{color:var(--danger)}

.mc-gio-nut{display:flex; flex-direction:column; gap:5px}
.mc-gio-nut button{
  font:inherit; font-weight:700; font-size:.85rem; cursor:pointer; line-height:1;
  padding:7px 11px; border-radius:9px; white-space:nowrap;
  border:1px solid var(--border); background:var(--panel); color:var(--text);
  transition:.14s background,.14s color,.14s border-color;
}
.mc-gio-nut button:hover{background:var(--primary); color:#fff; border-color:var(--primary)}
.mc-gio-nut #gChay{
  background:var(--success); color:#fff; border-color:var(--success); min-width:112px;
}
.mc-gio-nut #gChay.dangChay{background:var(--q-c); border-color:var(--q-c)}
/* Ba nut phu xep ngang duoi nut chinh cho do chiem cho. */
.mc-gio-nut{display:grid; grid-template-columns:repeat(3,auto); gap:5px}
.mc-gio-nut #gChay{grid-column:1 / -1}

/* Tick "tu chay gio" o man soan */
.mc-tick{display:flex; align-items:center; gap:8px; font-weight:700; font-size:.9rem; cursor:pointer}
.mc-tick input{width:17px; height:17px; accent-color:var(--primary); cursor:pointer}

/* ---------- Cau hoi: to het co ---------- */
.mc-cauhoi{
  background:var(--panel); border:1px solid var(--border); border-radius:20px;
  box-shadow:var(--shadow-lg); padding:clamp(20px,3.2vw,44px);
  text-align:center; font-weight:800; line-height:1.25;
  font-size:clamp(1.6rem,4.2vw,3.4rem); letter-spacing:-.02em;
  animation:mc-roi .42s cubic-bezier(.2,1.3,.35,1) both;
}
@keyframes mc-roi{from{opacity:0; transform:translateY(-26px) scale(.97)}}

/* ---------- O dap an: truot vao SO LE ---------- */
/* So le moi ra cam giac "nhay vao lan luot"; cho vao cung luc thi
   ca cum dang len nhu mot tam van (do duoc tren reel mau o quiz-video). */
.mc-o{
  animation:mc-vao .42s cubic-bezier(.2,1.25,.35,1) both;
  font-size:clamp(1.05rem,2.1vw,1.7rem) !important;
  padding:clamp(14px,2vw,26px) clamp(16px,2.2vw,28px) !important;
}
.mc-o:nth-child(1){animation-delay:.06s}
.mc-o:nth-child(2){animation-delay:.16s}
.mc-o:nth-child(3){animation-delay:.26s}
.mc-o:nth-child(4){animation-delay:.36s}
@keyframes mc-vao{from{opacity:0; transform:translateY(26px) scale(.94)}}
.mc-o .hinh{font-size:clamp(1.5rem,2.6vw,2.3rem)}
.mc-o .chu{font-weight:700}

/* Doi tra loi sai: rung roi xam di, nhung KHONG lo dap an dung
   (de doi khac con cuop duoc quyen tra loi). */
.q-o.sai{animation:mc-rung .42s; opacity:.34; filter:grayscale(.75)}
@keyframes mc-rung{
  20%{transform:translateX(-11px)} 40%{transform:translateX(9px)}
  60%{transform:translateX(-6px)}  80%{transform:translateX(4px)}
}

/* O dung: nay to len roi vien trang chay quanh. */
.q-o.dung{animation:mc-trung .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes mc-trung{40%{transform:scale(1.07)}}

/* ---------- Thanh diem cac doi ---------- */
.mc-doi-thanh{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px}
.mc-doi{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  background:var(--panel); border:2px solid var(--border); border-radius:14px;
  padding:12px 14px; font-weight:700; box-shadow:var(--shadow);
  transition:.16s transform,.16s border-color,.16s box-shadow;
}
.mc-doi:hover{transform:translateY(-2px)}
.mc-doi .ten{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mc-doi .diem{margin-left:auto; font-size:1.45rem; font-variant-numeric:tabular-nums}
.mc-doi.dang{
  border-color:var(--primary);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--primary) 22%,transparent);
  animation:mc-tho 1.1s infinite;
}
@keyframes mc-tho{50%{transform:translateY(-3px) scale(1.02)}}
.mc-doi.dan .diem{color:var(--success)}
.mc-doi.dan::after{content:"👑"; font-size:1.15rem}
.mc-doi .chinh{display:flex; gap:3px}
.mc-doi .chinh button{
  width:26px; height:26px; border-radius:7px; border:1px solid var(--border);
  background:var(--panel-2); color:var(--muted); cursor:pointer; font-weight:800; line-height:1;
}
.mc-doi .chinh button:hover{background:var(--primary); color:#fff; border-color:var(--primary)}

/* Diem vua cong: so bay len roi tan */
.mc-bay{
  position:fixed; z-index:60; font-weight:800; font-size:2.2rem; color:var(--success);
  pointer-events:none; animation:mc-baylen 1.05s ease-out forwards; text-shadow:0 2px 10px rgba(0,0,0,.25);
}
@keyframes mc-baylen{to{transform:translateY(-90px) scale(1.25); opacity:0}}

/* ---------- Dai nhac o duoi ---------- */
.mc-nhac{
  padding:11px 20px; border-top:1px solid var(--border); min-height:46px;
  background:color-mix(in srgb,var(--panel) 80%,transparent);
  font-size:clamp(.9rem,1.3vw,1.05rem); text-align:center; color:var(--muted);
}
.mc-nhac b{color:var(--text)}

/* ---------- Bang dap an cuoi buoi ---------- */
.mc-dapan{display:flex; flex-wrap:wrap; gap:9px}
.mc-dapan .o{
  display:flex; align-items:center; gap:7px; padding:8px 14px; border-radius:11px;
  background:var(--panel-2); border:1px solid var(--border); font-weight:800;
}
.mc-dapan .o b{color:var(--muted); font-size:.85rem}
.mc-dapan .o span{font-size:1.25rem; color:var(--primary)}

/* ---------- Quay so chon doi ---------- */
.mc-quay{
  position:fixed; inset:0; z-index:70; display:grid; place-items:center;
  background:rgba(0,0,0,.62); backdrop-filter:blur(4px);
}
.mc-quay .hop{
  background:var(--panel); border-radius:24px; padding:36px 54px; text-align:center;
  box-shadow:var(--shadow-lg); min-width:min(88vw,460px);
}
.mc-quay .ten{
  font-size:clamp(2rem,6vw,3.6rem); font-weight:800; line-height:1.15;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.mc-quay.chot .ten{animation:mc-chot .5s cubic-bezier(.2,1.7,.4,1)}
@keyframes mc-chot{0%{transform:scale(.7)}55%{transform:scale(1.16)}}

/* ---------- Phao giay ---------- */
.vui-phao{position:fixed; inset:0; z-index:80; pointer-events:none}

/* ---------- Toan man hinh: giau thanh cong cu ---------- */
:fullscreen .q-thanh{display:none}
:fullscreen .q-than{padding:26px 34px; gap:22px}
:fullscreen .mc-cauhoi{font-size:clamp(2rem,4.6vw,4rem)}

/* ---------- Nut ghi man hinh ---------- */
.mc-ghi.dangGhi{
  background:var(--danger) !important; color:#fff !important;
  border-color:var(--danger) !important; font-variant-numeric:tabular-nums;
  animation:mc-doGhi 1.4s infinite;
}
@keyframes mc-doGhi{50%{opacity:.62}}

/* ---------- Ảnh / biểu tượng của câu hỏi ---------- */
/* Chiều cao khoá bằng vh chứ không bằng px: ảnh cao quá thì câu hỏi và
   4 ô đáp án bị đẩy khỏi màn, mà lớp chỉ nhìn thấy hình. */
.mc-hinh{display:flex; justify-content:center; align-items:center}
.mc-hinh img{
  max-height:min(34vh,300px); width:auto; border-radius:16px;
  border:3px solid var(--panel); box-shadow:var(--shadow-lg); background:#fff;
  animation:mc-hinhVao .45s cubic-bezier(.2,1.3,.35,1) both;
}
.mc-hinh .bt{
  font-size:clamp(3.6rem,11vh,7rem); line-height:1;
  animation:mc-btVao .55s cubic-bezier(.2,1.7,.4,1) both;
}
@keyframes mc-hinhVao{from{opacity:0; transform:scale(.9) translateY(-14px)}}
@keyframes mc-btVao{from{opacity:0; transform:scale(.3) rotate(-14deg)}}
:fullscreen .mc-hinh img{max-height:min(38vh,420px)}