/* ============================================================
   TREN TAY — TRO CHOI QUIZ
   Dung chung cho man chieu (quiz-chu-tri) va man dien thoai (quiz-choi).
   Bien mau ke thua assets/style.css cua site; file nay chi them thu
   rieng cua tro choi.
   ============================================================ */

:root{
  --q-a:#e21b3c;  /* do    — hinh tam giac */
  --q-b:#1368ce;  /* xanh  — hinh thoi */
  --q-c:#d89e00;  /* vang  — hinh tron */
  --q-d:#26890c;  /* la    — hinh vuong */
  --q-shadow:0 6px 0 rgba(0,0,0,.22);
}

/* ---------- Khung chung ---------- */
.q-man{
  min-height:100dvh; display:flex; flex-direction:column;
  background:
    radial-gradient(1200px 600px at 15% -10%, color-mix(in srgb,var(--primary) 22%, transparent), transparent 60%),
    radial-gradient(900px 500px at 110% 20%, color-mix(in srgb,var(--accent) 20%, transparent), transparent 60%),
    var(--bg);
}
.q-thanh{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:12px 20px; border-bottom:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 82%, transparent);
  backdrop-filter:blur(10px);
}
.q-thanh .brand{display:flex; align-items:center; gap:9px; font-weight:800; color:var(--text); text-decoration:none; letter-spacing:-.03em}
.q-thanh .brand-logo,.brand-logo{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff; font-weight:800;
}
.q-day{flex:1}
.q-than{flex:1; display:flex; flex-direction:column; padding:20px; gap:18px; max-width:1200px; width:100%; margin:0 auto}

/* ---------- Nut ---------- */
.q-nut{
  font:inherit; font-weight:700; cursor:pointer; border:0; border-radius:12px;
  padding:12px 22px; background:var(--primary); color:#fff; transition:.15s transform,.15s filter;
}
.q-nut:hover{filter:brightness(1.08)}
.q-nut:active{transform:translateY(1px)}
.q-nut[disabled]{opacity:.45; cursor:not-allowed}
.q-nut.phu{background:var(--panel); color:var(--text); border:1px solid var(--border)}
.q-nut.to{padding:16px 34px; font-size:1.15rem; border-radius:14px}

/* ---------- The PIN tren man chieu ---------- */
.q-pin-khoi{
  background:var(--panel); border:1px solid var(--border); border-radius:20px;
  box-shadow:var(--shadow-lg); padding:26px 30px; text-align:center;
}
.q-pin-nhan{color:var(--muted); font-weight:600; letter-spacing:.02em; margin:0 0 2px}
.q-pin{
  font-size:clamp(3rem,11vw,6.4rem); font-weight:800; letter-spacing:.12em;
  line-height:1; font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.q-diachi{font-weight:700; font-size:1.1rem}

/* ---------- Sanh cho ---------- */
.q-sanh{display:grid; grid-template-columns:minmax(280px,380px) 1fr; gap:20px; align-items:start}
@media (max-width:820px){ .q-sanh{grid-template-columns:1fr} }
.q-the{background:var(--panel); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow); padding:20px}
.q-nguoi-luoi{display:flex; flex-wrap:wrap; gap:10px; align-content:flex-start; min-height:120px}
.q-ten{
  padding:9px 16px; border-radius:999px; font-weight:700;
  background:linear-gradient(135deg,var(--primary),var(--accent)); color:#fff;
  animation:q-vao .32s cubic-bezier(.2,1.4,.4,1);
}
@keyframes q-vao{from{transform:scale(.4) translateY(14px); opacity:0}to{transform:none; opacity:1}}
.q-dem-nguoi{font-size:2.6rem; font-weight:800; line-height:1; font-variant-numeric:tabular-nums}

/* ---------- Cau hoi tren man chieu ---------- */
.q-cauhoi{
  background:var(--panel); border:1px solid var(--border); border-radius:18px;
  box-shadow:var(--shadow-lg); padding:clamp(20px,3.4vw,40px); text-align:center;
  font-size:clamp(1.4rem,3.4vw,2.6rem); font-weight:700; line-height:1.3;
}
.q-hang-gio{display:flex; align-items:center; gap:18px}
.q-dongho{
  width:74px; height:74px; flex:none; border-radius:50%; display:grid; place-items:center;
  font-size:1.8rem; font-weight:800; color:#fff; font-variant-numeric:tabular-nums;
  background:conic-gradient(var(--primary) calc(var(--p,1) * 360deg), color-mix(in srgb,var(--muted) 30%, transparent) 0);
  position:relative;
}
.q-dongho::after{content:""; position:absolute; inset:7px; border-radius:50%; background:var(--panel)}
.q-dongho span{position:relative; z-index:1; color:var(--text)}
.q-dongho.gap{animation:q-gap .6s infinite}
@keyframes q-gap{50%{transform:scale(1.09)}}
.q-daluot{font-weight:800; font-size:1.5rem; text-align:right; flex:1}
.q-daluot small{display:block; font-size:.72rem; font-weight:600; color:var(--muted); letter-spacing:.06em; text-transform:uppercase}

/* ---------- 4 o dap an ---------- */
.q-luoi{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.q-luoi.doi3{grid-template-columns:1fr 1fr 1fr}
@media (max-width:700px){ .q-luoi,.q-luoi.doi3{grid-template-columns:1fr 1fr} }
.q-o{
  display:flex; align-items:center; gap:14px; text-align:left;
  border:0; border-radius:14px; padding:18px 20px; cursor:pointer;
  color:#fff; font:inherit; font-weight:700; font-size:clamp(1rem,1.7vw,1.35rem);
  box-shadow:var(--q-shadow); transition:.14s transform,.2s opacity,.2s filter;
}
.q-o:active{transform:translateY(3px); box-shadow:0 3px 0 rgba(0,0,0,.22)}
.q-o[data-mau="0"]{background:var(--q-a)}
.q-o[data-mau="1"]{background:var(--q-b)}
.q-o[data-mau="2"]{background:var(--q-c)}
.q-o[data-mau="3"]{background:var(--q-d)}
.q-o .hinh{font-size:1.5rem; line-height:1; flex:none}
.q-o.mo{opacity:.28; filter:grayscale(.6)}
.q-o.dung{outline:5px solid #fff; outline-offset:-5px; animation:q-nhay .45s 2}
@keyframes q-nhay{50%{filter:brightness(1.5)}}
.q-o .sodem{
  margin-left:auto; background:rgba(0,0,0,.22); border-radius:999px;
  padding:3px 13px; font-size:.95rem; font-variant-numeric:tabular-nums;
}

/* ---------- Bang xep hang ---------- */
.q-bxh{display:flex; flex-direction:column; gap:9px}
.q-dong{
  display:flex; align-items:center; gap:14px; background:var(--panel);
  border:1px solid var(--border); border-radius:13px; padding:13px 18px;
  font-weight:700; box-shadow:var(--shadow);
}
.q-dong .hang{width:34px; height:34px; flex:none; border-radius:9px; display:grid; place-items:center; background:var(--panel-2); color:var(--muted)}
.q-dong.top1 .hang{background:linear-gradient(135deg,#f5c518,#e0a800); color:#3a2b00}
.q-dong.top2 .hang{background:linear-gradient(135deg,#cfd6e4,#aeb6c6); color:#2b3040}
.q-dong.top3 .hang{background:linear-gradient(135deg,#e0a172,#c98450); color:#3a2000}
.q-dong .diem{margin-left:auto; font-variant-numeric:tabular-nums; font-size:1.15rem}
.q-dong .them{color:var(--success); font-size:.9rem; font-weight:800}

/* ---------- Buc buc (ket thuc) ---------- */
.q-buc{display:flex; align-items:flex-end; justify-content:center; gap:16px; padding:22px 0}
.q-buc .cot{width:clamp(90px,17vw,180px); border-radius:16px 16px 0 0; padding:14px 10px 18px; text-align:center; color:#fff; font-weight:800; box-shadow:var(--shadow-lg)}
.q-buc .c1{height:230px; background:linear-gradient(180deg,#f5c518,#e0a800); color:#3a2b00}
.q-buc .c2{height:180px; background:linear-gradient(180deg,#cfd6e4,#9aa3b4); color:#232838}
.q-buc .c3{height:140px; background:linear-gradient(180deg,#e0a172,#b9743f)}
.q-buc .cot .sd{font-size:1.9rem; line-height:1.1}

/* ---------- Man dien thoai ---------- */
.q-choi{min-height:100dvh; display:flex; flex-direction:column; padding:14px; gap:12px}
.q-choi-dau{display:flex; align-items:center; gap:12px; font-weight:800}
.q-choi-dau .diem{margin-left:auto; background:var(--panel); border:1px solid var(--border); border-radius:999px; padding:6px 15px; font-variant-numeric:tabular-nums}
.q-choi .q-luoi{flex:1; grid-template-rows:1fr 1fr}
.q-choi .q-o{justify-content:center; font-size:1.05rem; min-height:96px}
.q-choi .q-o .hinh{font-size:2.6rem}
.q-cho-man{
  flex:1; display:grid; place-items:center; text-align:center; gap:10px;
  background:var(--panel); border:1px solid var(--border); border-radius:18px; padding:26px;
}
.q-cho-man .to{font-size:clamp(1.5rem,7vw,2.4rem); font-weight:800; line-height:1.2}
.q-bao{border-radius:18px; padding:30px 22px; text-align:center; color:#fff; font-weight:800; flex:1; display:grid; place-content:center; gap:8px}
.q-bao.dung{background:linear-gradient(160deg,#2fbf5f,#149046)}
.q-bao.sai{background:linear-gradient(160deg,#f0555a,#c62128)}
.q-bao .lon{font-size:clamp(1.8rem,9vw,3rem); line-height:1.1}

/* ---------- Nhap ---------- */
.q-nhap{
  width:100%; font:inherit; font-weight:700; padding:15px 18px; border-radius:13px;
  border:2px solid var(--border); background:var(--panel); color:var(--text);
}
.q-nhap:focus{outline:0; border-color:var(--primary)}
.q-nhap.pin{text-align:center; font-size:2.1rem; letter-spacing:.3em; font-variant-numeric:tabular-nums}
textarea.q-nhap{min-height:220px; font-weight:500; line-height:1.6; resize:vertical}
.q-loi{color:var(--danger); font-weight:700; min-height:1.4em}
.q-nhan{display:block; font-weight:700; margin:0 0 6px}
.q-hang{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.q-tag{background:var(--panel-2); border:1px solid var(--border); border-radius:999px; padding:5px 13px; font-size:.85rem; font-weight:700; color:var(--muted)}