/* ⚔️ TỨ LINH QUẦN HÙNG — trường giao đấu giữa hai nhóm Tứ Linh.
   Bám đúng ngôn ngữ hình ảnh sẵn có của Nhóm Tứ Linh (nền kem, ấn triện chu sa, chữ Hán lớn) và
   phong cách iOS của toàn dự án: thẻ bo góc lớn, nút viên thuốc nảy nhẹ khi bấm, gom nhóm có nhãn.
   Học viên trung niên: vùng chạm ≥52px, chữ nội dung 17px, không có thao tác nào cần cuộn ngang.
   ⚠️ Bốn màu linh thú lấy Y NGUYÊN từ .ntl-goi-nut trong nhom-tu-linh.css — đổi ở đây phải đổi cả bên kia. */

.qh-root {
  --qh-kem: #FBF6E6;
  --qh-vien: #E5D9BF;
  --qh-muc: #3A2F22;
  --qh-nhat: #9A8C68;
  --qh-chu-sa: #B4372E;
  --qh-olive: #6B7A4F;
  font-family: inherit;
  color: var(--qh-muc);
  font-size: 17px;
}

/* bốn linh thú — dùng chung mọi màn */
.qh-lt-long   { --lt1: #b8863b; --lt2: #8a5f22; --ltn: #F6EBD5; --ltv: #E0C58E; }
.qh-lt-phuong { --lt1: #c4553f; --lt2: #96331f; --ltn: #F9E5DF; --ltv: #E8B6A8; }
.qh-lt-quy    { --lt1: #4f6f63; --lt2: #33534a; --ltn: #E2ECE7; --ltv: #A9C4B9; }
.qh-lt-lan    { --lt1: #7a6aa6; --lt2: #544880; --ltn: #EBE7F4; --ltv: #BEB3D9; }

/* ---------------------------------------------------------------- lớp phủ toàn màn */
.qh-ov {
  position: fixed; inset: 0; z-index: 400;
  background: #EFE7D3;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  animation: qhVao .26s cubic-bezier(.25, 1.2, .5, 1);
}
@keyframes qhVao { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.qh-trong { max-width: 640px; margin: 0 auto; padding: 0 15px 40px; }

/* thanh đầu kiểu iOS: nút quay lại bên trái, tiêu đề giữa */
.qh-top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0 11px;
  background: linear-gradient(#EFE7D3 78%, rgba(239, 231, 211, 0));
}
.qh-lui {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 40px; padding: 8px 15px 8px 11px;
  border: 1px solid var(--qh-vien); border-radius: 999px;
  background: #FFFDF7; font: inherit; font-size: 15px; font-weight: 700; color: #6B5F3E;
  cursor: pointer; flex: none;
}
.qh-lui:active { transform: scale(.96); }
.qh-tit { flex: 1; min-width: 0; text-align: center; font-weight: 800; font-size: 16px; color: #6B5F3E; }
.qh-top .qh-cham { width: 62px; flex: none; }   /* giữ tiêu đề đúng giữa */

/* ---------------------------------------------------------------- thẻ chung */
.qh-the {
  background: var(--qh-kem);
  border: 1px solid var(--qh-vien);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 13px;
  box-shadow: 0 10px 26px -18px rgba(60, 45, 15, .5);
}
.qh-nhan {
  display: flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #A08A52; margin: 0 4px 8px;
}
.qh-nhan .ph { margin-left: auto; text-transform: none; letter-spacing: 0; color: #A99B78; font-weight: 700; }

/* ấn triện chu sa (dùng lại ý tưởng .ntl-an) */
.qh-an {
  display: flex; align-items: center; justify-content: center;
  background: var(--qh-chu-sa); color: #fff; border-radius: 10px;
  font-weight: 800; line-height: 1; flex: none;
  box-shadow: 0 6px 14px -8px rgba(120, 30, 20, .95), inset 0 0 0 2px rgba(255, 255, 255, .3);
}
.qh-an.lon { width: 64px; height: 64px; font-size: 2.15rem; }
.qh-an.vua { width: 46px; height: 46px; font-size: 1.55rem; }
.qh-an.nho { width: 34px; height: 34px; font-size: 1.12rem; border-radius: 8px; }

/* huy hiệu linh thú (thay ấn triện khi cần phân biệt hai đội) */
.qh-lt {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--lt1), var(--lt2)); color: #fff;
  border-radius: 12px; font-weight: 800; line-height: 1; flex: none;
  box-shadow: 0 6px 15px -8px rgba(60, 40, 15, .9), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.qh-lt.lon { width: 62px; height: 62px; font-size: 2rem; }
.qh-lt.vua { width: 46px; height: 46px; font-size: 1.5rem; }
.qh-lt.nho { width: 32px; height: 32px; font-size: 1.05rem; border-radius: 9px; }
.qh-lt.ti  { width: 24px; height: 24px; font-size: .82rem; border-radius: 7px; }

/* ---------------------------------------------------------------- nút iOS */
.qh-nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 14px 22px; width: 100%;
  border: 0; border-radius: 16px;
  background: linear-gradient(135deg, #7a8a4a, #5a6a3a); color: #fff;
  font: inherit; font-size: 17px; font-weight: 800; cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(70, 84, 40, .9), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .13s cubic-bezier(.34, 1.4, .64, 1);
}
.qh-nut:active { transform: scale(.97); }
.qh-nut[disabled] { opacity: .45; cursor: default; box-shadow: none; }
.qh-nut[disabled]:active { transform: none; }
.qh-nut.phu {
  background: #FFFDF7; color: #6B5F3E; border: 1.5px solid var(--qh-vien); box-shadow: none;
}
.qh-nut.do { background: linear-gradient(135deg, #c4553f, #96331f); box-shadow: 0 8px 18px -10px rgba(150, 51, 31, .9), inset 0 1px 0 rgba(255, 255, 255, .22); }
.qh-nut.lt { background: linear-gradient(135deg, var(--lt1), var(--lt2)); }
/* ⏰🚪 CỔNG GIỜ HẸN + CỬA RA (4/9/2026) — Zhenyin: "bỏ cuộc là đức tính không tốt".
   Nút KHOÁ phải nhìn ra ngay là chưa bấm được (nét đứt, chữ nhạt) nhưng vẫn nói được VÌ SAO — một
   nút mờ câm lặng thì người ta bấm mười lần rồi tưởng hệ thống hỏng. */
.qh-nut.khoa {
  background: #E6DCC4; color: #9C8F72; border: 1.5px dashed #CDBF9D; box-shadow: none;
  cursor: default;
}
.qh-nut.khoa:active { transform: none; }
/* nút 🚪 Rời trận nằm ở góc phải thanh đầu — cùng khuôn viên thuốc với nút quay lại, chỉ đổi màu */
.qh-lui.qh-roi { color: var(--qh-chu-sa); border-color: #E4C3BD; padding-left: 13px; }
/* ba hậu quả in trong hộp xác nhận rời trận */
.qh-roi-hau { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.qh-roi-hau .v {
  border-radius: 999px; padding: 5px 11px; font-size: .82rem; font-weight: 800;
}
.qh-roi-hau .v.xau { background: #FBEDE9; border: 1px solid #EEC4B8; color: #8D3226; }
.qh-roi-hau .v.tot { background: #EDF2E2; border: 1px solid #CFDCB4; color: #4C5C31; }
/* lời ngỏ khai chiến sớm của đội bạn · khối xử vắng mặt / bỏ cuộc */
.qh-the.qh-moi-som { background: #FFF6E2; border-color: #EDDCAE; }
.qh-the.qh-vang { background: #FBEDE9; border-color: #EEC4B8; }
/* người đã bấm rời: mờ đi và gạch chấm, KHÔNG tô đỏ chói — ghi nhận, không phải bêu tên */
.qh-binh .ng.roi { opacity: .5; border-style: dashed; font-weight: 400; }
.qh-binh .ng.roi .cham { background: var(--qh-chu-sa); }

/* thẻ "bạn đã rời trận" ở Sảnh — nhắc đường về, không phải lời trách */
.qh-dich.qh-dich-roi { --lt1: #c4553f; --lt2: #96331f; --ltn: #F9E5DF; --ltv: #E8B6A8; }

.qh-hang { display: flex; gap: 10px; }
.qh-hang > * { flex: 1; }

/* ---------------------------------------------------------------- màn 0 · sảnh */
.qh-doi-toi {
  display: flex; align-items: center; gap: 13px;
  padding: 4px 2px 12px; margin-bottom: 12px;
  border-bottom: 1px dashed var(--qh-vien);
}
.qh-doi-toi .tx { flex: 1; min-width: 0; }
.qh-doi-toi .t1 { font-size: 1.22rem; font-weight: 800; }
.qh-doi-toi .t2 { font-size: .88rem; color: var(--qh-nhat); margin-top: 2px; }
.qh-thanh-tich {
  display: flex; gap: 7px; margin-top: 7px; flex-wrap: wrap;
}
.qh-vien-so {
  background: #FFFDF7; border: 1px solid var(--qh-vien); border-radius: 999px;
  padding: 3px 11px; font-size: .82rem; font-weight: 700; color: #6B5F3E;
}

.qh-dich {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 74px; padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid var(--ltv, #E5D9BF); border-radius: 18px;
  background: linear-gradient(135deg, #FFFDF7, var(--ltn, #F7EED6));
  font: inherit; text-align: left; cursor: pointer; color: var(--qh-muc);
  transition: transform .13s cubic-bezier(.34, 1.4, .64, 1);
}
.qh-dich:active { transform: scale(.985); }
/* nhóm chưa đủ người: làm nhạt bằng MÀU CHỮ, không bằng opacity toàn khối — opacity thấp làm
   chữ ghi chú mờ tới mức học viên lớn tuổi không đọc nổi lý do vì sao không bấm được. */
.qh-dich[disabled] { cursor: default; background: #F4EEE0; border-color: #E0D6BE; color: #8E836C; }
.qh-dich[disabled] .qh-lt { filter: grayscale(.55); opacity: .75; }
.qh-dich[disabled]:active { transform: none; }
.qh-dich .tx { flex: 1; min-width: 0; }
/* tên đội KHÔNG được gãy dòng: trên màn 375px, nhãn trạng thái bên phải bóp .tx lại và
   "Phượng Hoàng" tự xuống hai dòng, làm các thẻ cao thấp so le trông rất lộn xộn. */
.qh-dich .t1 { font-size: 1.06rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qh-dich .t2 { font-size: .85rem; color: var(--qh-nhat); margin-top: 2px; line-height: 1.4; }
.qh-dich .chev { color: #BFAE82; font-size: 1.35rem; flex: none; font-weight: 700; }
.qh-dich .tag {
  flex: none; font-size: .72rem; font-weight: 800; border-radius: 999px; padding: 3px 9px;
  background: #EFE7D3; color: #8A7A50; white-space: nowrap; letter-spacing: .01em;
}
.qh-dich .tag.san { background: #E4EFDF; color: #3D7A2E; }
.qh-dich .tag.ban { background: #F6E6CF; color: #8A4B1F; }

/* ---------------------------------------------------------------- chiến thư */
.qh-thu-ov {
  position: fixed; inset: 0; z-index: 460;
  background: rgba(38, 30, 16, .62); backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center; padding: 18px;
}
.qh-thu {
  position: relative; width: 100%; max-width: 400px;
  background: linear-gradient(180deg, #FDF8EA, #F3E8CC);
  border: 1px solid #D9C79A; border-radius: 22px;
  padding: 26px 22px 20px; text-align: center;
  box-shadow: 0 30px 70px -24px rgba(30, 20, 5, .8);
  animation: qhThuMo .5s cubic-bezier(.2, 1.25, .4, 1);
  overflow: hidden;
}
@keyframes qhThuMo {
  0%   { opacity: 0; transform: scale(.5) rotate(-4deg); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
/* vân giấy + mép cháy nhẹ */
.qh-thu::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 12% 8%, rgba(180, 55, 46, .07), transparent 42%),
    radial-gradient(circle at 88% 92%, rgba(140, 100, 30, .09), transparent 46%);
}
.qh-thu > * { position: relative; }
.qh-thu-nhan {
  font-size: .72rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: #B4372E; margin-bottom: 14px;
}
.qh-thu-doi {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 14px;
}
.qh-thu-ben { flex: 1; min-width: 0; }
.qh-thu-ben .chu {
  display: flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; margin: 0 auto 7px;
  border-radius: 16px; font-size: 2.1rem; font-weight: 800; color: #fff; line-height: 1;
  background: linear-gradient(135deg, var(--lt1), var(--lt2));
  box-shadow: 0 8px 20px -10px rgba(50, 35, 10, .9), inset 0 1px 0 rgba(255, 255, 255, .28);
}
.qh-thu-ben .ten { font-size: .95rem; font-weight: 800; }
.qh-thu-ben .ph { font-size: .78rem; color: var(--qh-nhat); margin-top: 1px; }
.qh-thu-vs {
  flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; font-weight: 800; color: #fff;
  background: var(--qh-chu-sa);
  box-shadow: 0 0 0 5px rgba(180, 55, 46, .13), 0 8px 18px -8px rgba(120, 30, 20, .9);
  animation: qhDap 1.5s ease-in-out infinite;
}
@keyframes qhDap { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
.qh-thu-loi {
  font-size: 1.02rem; line-height: 1.6; color: #5A4C33; margin-bottom: 4px;
}
.qh-thu-loi b { color: var(--qh-muc); }
.qh-thu-ha { font-size: .84rem; color: var(--qh-nhat); margin-bottom: 16px; }
.qh-thu-nut { display: flex; flex-direction: column; gap: 9px; }

/* dấu triện đóng lên thư khi nhận lời */
.qh-trien {
  position: absolute; top: 50%; left: 50%; z-index: 3;
  width: 132px; height: 132px; margin: -66px 0 0 -66px;
  border: 5px solid var(--qh-chu-sa); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--qh-chu-sa); font-size: 2.4rem; font-weight: 800; letter-spacing: .12em;
  opacity: 0; pointer-events: none;
}
.qh-trien.dong { animation: qhDongTrien .62s cubic-bezier(.3, 1.5, .5, 1) forwards; }
@keyframes qhDongTrien {
  0%   { opacity: 0; transform: scale(2.6) rotate(-22deg); }
  55%  { opacity: .95; transform: scale(.92) rotate(-11deg); }
  70%  { transform: scale(1.04) rotate(-13deg); }
  100% { opacity: .9; transform: scale(1) rotate(-12deg); }
}

/* ---------------------------------------------------------------- chọn giờ */
.qh-gio-o {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 62px; padding: 11px 15px; margin-bottom: 9px;
  border: 1.5px solid var(--qh-vien); border-radius: 16px; background: #FFFDF7;
  font: inherit; font-size: 17px; color: var(--qh-muc); text-align: left; cursor: pointer;
}
.qh-gio-o:active { transform: scale(.985); }
.qh-gio-o.chon { border-color: #7a8a4a; background: #F2F5E6; box-shadow: 0 0 0 3px rgba(122, 138, 74, .16); }
.qh-gio-o .gio { font-size: 1.28rem; font-weight: 800; letter-spacing: .01em; flex: none; min-width: 66px; }
.qh-gio-o .tx { flex: 1; min-width: 0; }
.qh-gio-o .t2 { font-size: .84rem; color: var(--qh-nhat); margin-top: 1px; }
.qh-gio-o .tick { flex: none; font-size: 1.25rem; color: #7a8a4a; }

/* 🕑 Ô "giờ khác — tự chọn" (4/9/2026, học viên báo thiếu chỗ tự đặt giờ). Dùng
   <input type="datetime-local"> của chính máy — trên iPhone nó mở bánh xe quay quen thuộc, không
   phải một lịch tự vẽ. font-size 16px là BẮT BUỘC: dưới 16px Safari phóng to cả trang khi chạm ô. */
.qh-tuchon { margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--qh-vien); }
.qh-tuchon .n { font-size: .95rem; font-weight: 700; margin-bottom: 9px; }
.qh-tuchon .d { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.qh-tuchon-o {
  flex: 1 1 180px; min-width: 0; min-height: 54px;
  border: 1.5px solid var(--qh-vien); border-radius: 16px; background: #FFFDF7;
  color: var(--qh-muc); font: inherit; font-size: 16px; padding: 10px 13px;
}
.qh-tuchon .qh-nut.nho { flex: none; width: auto; min-height: 54px; padding: 12px 18px; font-size: 15px; }

/* ---------------------------------------------------------------- bảng chiến sự + đếm ngược */
.qh-dem {
  display: flex; justify-content: center; gap: 8px; margin: 4px 0 12px;
}
.qh-dem .o {
  min-width: 66px; padding: 11px 8px; border-radius: 15px;
  background: linear-gradient(180deg, #FFFDF7, #F5EEDC);
  border: 1px solid var(--qh-vien); text-align: center;
}
.qh-dem .so { font-size: 1.75rem; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; }
.qh-dem .nh { font-size: .72rem; color: var(--qh-nhat); margin-top: 3px; }

.qh-doi2 { display: flex; align-items: stretch; gap: 10px; }
.qh-doi2 .ben {
  flex: 1; min-width: 0; text-align: center; padding: 13px 8px;
  border: 1px solid var(--ltv, #E5D9BF); border-radius: 16px;
  background: linear-gradient(180deg, #FFFDF7, var(--ltn, #F7EED6));
}
.qh-doi2 .ben .ten { font-weight: 800; font-size: .98rem; margin-top: 6px; }
.qh-doi2 .ben .ph { font-size: .8rem; color: var(--qh-nhat); margin-top: 2px; }
.qh-doi2 .giua {
  flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 800; color: var(--qh-chu-sa);
}

/* dòng loan báo */
.qh-loan { list-style: none; margin: 0; padding: 0; }
.qh-loan li {
  display: flex; gap: 11px; padding: 10px 2px;
  border-top: 1px dashed var(--qh-vien); font-size: .93rem; line-height: 1.5;
}
.qh-loan li:first-child { border-top: 0; }
.qh-loan .ic { flex: none; font-size: 1.15rem; }
.qh-loan .kh { flex: none; margin-left: auto; font-size: .78rem; color: var(--qh-nhat); white-space: nowrap; }

/* ---------------------------------------------------------------- điểm binh */
.qh-binh { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.qh-binh .ng {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 14px;
  border: 1px solid var(--qh-vien); background: #FFFDF7;
  font-size: .92rem; font-weight: 700; min-height: 52px;
}
.qh-binh .ng.cho { opacity: .5; border-style: dashed; font-weight: 400; }
.qh-binh .ng .cham { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #4f7a4f; }
.qh-binh .ng.cho .cham { background: #C9BC9A; }
.qh-binh .ng .tn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.qh-av {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: #EFE7D3; border: 1px solid var(--qh-vien);
  display: flex; align-items: center; justify-content: center;
  font-size: .82rem; font-weight: 800; color: #8A7A50; overflow: hidden;
}
.qh-av img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- đường đua chặng 1 */
.qh-dua { margin-bottom: 12px; }
.qh-lan {
  display: flex; align-items: center; gap: 9px; margin-bottom: 9px;
}
.qh-lan .dau { flex: none; width: 54px; text-align: center; }
.qh-lan .dau .qh-lt { margin: 0 auto; }
.qh-lan .dau .ten { font-size: .62rem; font-weight: 800; color: var(--qh-nhat); margin-top: 3px; letter-spacing: .01em; line-height: 1.2; }
.qh-lan .ray {
  position: relative; flex: 1; min-width: 0; height: 30px;
  border-radius: 999px; background: #EAE0C6;
  box-shadow: inset 0 2px 5px rgba(90, 70, 30, .13);
  overflow: hidden;
}
.qh-lan .ray .di {
  position: absolute; inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lt1), var(--lt2));
  transition: width .45s cubic-bezier(.3, 1.1, .5, 1);
}
.qh-lan .ray .moc {
  position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(120, 95, 45, .18);
}
.qh-lan .ray .so {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  font-size: .78rem; font-weight: 800; color: #7A6A45; font-variant-numeric: tabular-nums;
}
.qh-lan .thu {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  font-size: 1.22rem; line-height: 1;
  transition: left .45s cubic-bezier(.3, 1.1, .5, 1);
  filter: drop-shadow(0 2px 3px rgba(60, 40, 10, .4));
}
.qh-lan.toi .ray { box-shadow: inset 0 2px 5px rgba(90, 70, 30, .13), 0 0 0 2px rgba(122, 138, 74, .3); }

/* ---------------------------------------------------------------- câu hỏi + lựa chọn */
.qh-cau {
  text-align: center; padding: 6px 4px 14px;
}
.qh-cau .han {
  font-size: 3.1rem; font-weight: 700; line-height: 1.2; letter-spacing: .06em;
  color: var(--qh-muc);
}
.qh-cau .py { font-size: 1.02rem; color: #8A7A50; margin-top: 3px; letter-spacing: .04em; }
.qh-cau .py.an { visibility: hidden; }
.qh-cau .hoi { font-size: 1.12rem; font-weight: 700; line-height: 1.55; }
.qh-cau .dan { font-size: .88rem; color: var(--qh-nhat); margin-top: 6px; }

.qh-chon { display: grid; gap: 9px; }
.qh-chon.doi { grid-template-columns: 1fr 1fr; }
.qh-dap {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  min-height: 58px; padding: 12px 14px;
  border: 1.5px solid var(--qh-vien); border-radius: 16px; background: #FFFDF7;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--qh-muc);
  text-align: left; cursor: pointer;
  transition: transform .12s cubic-bezier(.34, 1.4, .64, 1), border-color .15s, background .15s;
}
.qh-dap:active { transform: scale(.975); }
.qh-dap .ky {
  flex: none; width: 27px; height: 27px; border-radius: 9px;
  background: #EFE7D3; color: #8A7A50;
  display: flex; align-items: center; justify-content: center;
  font-size: .86rem; font-weight: 800;
}
.qh-dap .tx { flex: 1; min-width: 0; }
.qh-dap[disabled] { cursor: default; }
.qh-dap[disabled]:active { transform: none; }
/* đang được đồng đội chọn (chưa chốt) */
/* --lt1/--ltn chỉ có giá trị khi tổ tiên mang class .qh-lt-<mã linh thú>; đặt sẵn giá trị lui để
   quên gắn class thì viền vẫn ra màu ô-liu của hệ thống, không rơi về đen mặc định. */
.qh-dap.dangchon { border-color: var(--lt1, #6B7A4F); background: var(--ltn, #F2F5E6); box-shadow: 0 0 0 3px rgba(0, 0, 0, .05); }
.qh-dap .ai { color: var(--lt2, #4F5C39); }
.qh-dap.dung { border-color: #4f7a4f; background: #E9F2E4; }
.qh-dap.sai  { border-color: #b5453f; background: #F8E6E3; }
.qh-dap .ai {
  flex: none; display: flex; align-items: center; gap: 5px;
  font-size: .76rem; font-weight: 800;
  background: #fff; border-radius: 999px; padding: 3px 9px 3px 4px;
  box-shadow: 0 2px 6px -3px rgba(60, 40, 10, .5);
}
.qh-dap .ai .qh-av { width: 20px; height: 20px; font-size: .62rem; }

/* thanh "đồng đội vừa chốt — còn N giây đổi ý" */
.qh-khoan {
  display: flex; align-items: center; gap: 11px;
  margin-top: 11px; padding: 11px 13px;
  border-radius: 16px; background: #F6E6CF; border: 1px solid #E4C79A;
  font-size: .93rem; color: #7A5320; line-height: 1.45;
}
.qh-khoan .tx { flex: 1; min-width: 0; }
.qh-khoan button {
  flex: none; min-height: 44px; padding: 9px 16px; border: 0; border-radius: 999px;
  background: #fff; border: 1.5px solid #D9AE6B; color: #8A5320;
  font: inherit; font-weight: 800; font-size: .92rem; cursor: pointer;
}
.qh-khoan button:active { transform: scale(.96); }
.qh-vong {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem; font-weight: 800; color: #8A5320;
  background: conic-gradient(#D9AE6B var(--p, 0%), #F0DCB8 0);
}
.qh-vong i { width: 26px; height: 26px; border-radius: 50%; background: #F6E6CF; display: flex; align-items: center; justify-content: center; font-style: normal; }

/* đồng hồ mảnh của một câu */
.qh-gio-thanh { height: 5px; border-radius: 999px; background: #E4DAC0; overflow: hidden; margin-bottom: 12px; }
.qh-gio-thanh i { display: block; height: 100%; background: linear-gradient(90deg, #8FA05C, #5A6A3A); border-radius: 999px; transition: width 1s linear; }
.qh-gio-thanh.gap i { background: linear-gradient(90deg, #D98B4A, #B4372E); }

/* ---------------------------------------------------------------- chặng 2 · ra đề */
.qh-tu-o {
  display: flex; align-items: center; gap: 11px; width: 100%;
  min-height: 56px; padding: 10px 13px; margin-bottom: 8px;
  border: 1.5px solid var(--qh-vien); border-radius: 15px; background: #FFFDF7;
  font: inherit; font-size: 16px; color: var(--qh-muc); text-align: left; cursor: pointer;
}
.qh-tu-o.chon { border-color: var(--qh-chu-sa); background: #FBEEEB; }
.qh-tu-o .han { flex: none; font-size: 1.5rem; font-weight: 700; min-width: 62px; }
.qh-tu-o .tx { flex: 1; min-width: 0; }
.qh-tu-o .t2 { font-size: .82rem; color: var(--qh-nhat); margin-top: 1px; }
.qh-tu-o .tick { flex: none; font-size: 1.2rem; color: var(--qh-chu-sa); }

/* ---------------------------------------------------------------- chặng 3 · tới lượt ai */
.qh-luot {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; margin-bottom: 12px;
  border-radius: 18px; border: 1px solid var(--ltv, #E5D9BF);
  background: linear-gradient(135deg, #FFFDF7, var(--ltn, #F7EED6));
}
.qh-luot .tx { flex: 1; min-width: 0; }
.qh-luot .t1 { font-weight: 800; font-size: 1.05rem; }
.qh-luot .t2 { font-size: .85rem; color: var(--qh-nhat); margin-top: 2px; }
.qh-luot .qh-av { width: 44px; height: 44px; font-size: 1rem; }
.qh-luot.toi { border-color: #7a8a4a; background: linear-gradient(135deg, #F4F7E9, #E9EFD8); box-shadow: 0 0 0 3px rgba(122, 138, 74, .16); }
.qh-xoay { display: flex; gap: 6px; justify-content: center; margin-top: 10px; }
.qh-xoay .d { width: 8px; height: 8px; border-radius: 50%; background: #D8CBAA; }
.qh-xoay .d.qua { background: #9AAA6A; }
.qh-xoay .d.nay { background: #5A6A3A; transform: scale(1.45); }

/* ---------------------------------------------------------------- chặng 4 · đặt cược */
.qh-cuoc { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 12px 0 6px; }
.qh-cuoc button {
  width: 52px; height: 52px; border-radius: 16px; border: 1.5px solid var(--qh-vien);
  background: #FFFDF7; font: inherit; font-size: 1.5rem; font-weight: 800; color: #6B5F3E; cursor: pointer;
}
.qh-cuoc button:active { transform: scale(.94); }
.qh-cuoc .so { min-width: 92px; text-align: center; }
.qh-cuoc .so b { display: block; font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--qh-chu-sa); font-variant-numeric: tabular-nums; }
.qh-cuoc .so span { font-size: .8rem; color: var(--qh-nhat); }

/* ---------------------------------------------------------------- bảng công trạng */
.qh-ket {
  text-align: center; padding: 18px 12px 14px;
  border-radius: 22px; margin-bottom: 13px;
  background: linear-gradient(180deg, #FDF8EA, #F3E8CC); border: 1px solid #D9C79A;
}
.qh-ket .to { font-size: 2.4rem; font-weight: 800; letter-spacing: .1em; color: var(--qh-chu-sa); }
.qh-ket .ten { font-size: 1.15rem; font-weight: 800; margin-top: 4px; }
.qh-ket .ti { font-size: 2.1rem; font-weight: 800; margin: 10px 0 2px; font-variant-numeric: tabular-nums; }
.qh-ket .ph { font-size: .88rem; color: var(--qh-nhat); }

/* Khung cuộn riêng: trang KHÔNG được cuộn ngang, nhưng bảng nhiều cột trên màn hẹp thì phải có
   đường thoát của riêng nó. */
.qh-bang-khung { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -2px; }
.qh-bang { width: 100%; border-collapse: collapse; font-size: .95rem; }
.qh-bang td.n { width: 62%; }   /* cột tên nhận phần rộng, hai cột số chỉ vừa đủ chữ */
.qh-bang th {
  text-align: left; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #A08A52; padding: 0 6px 7px; border-bottom: 1px solid var(--qh-vien);
}
.qh-bang th.p, .qh-bang td.p { text-align: right; }
.qh-bang td { padding: 10px 6px; border-bottom: 1px dashed var(--qh-vien); }
.qh-bang tr:last-child td { border-bottom: 0; }
/* Lưới 2 cột thay vì flex-wrap: ảnh đại diện luôn nằm CÙNG DÒNG với tên (flex-wrap từng đẩy nó
   lên một dòng riêng, trông như hàng bị vỡ), còn huy hiệu "công đầu" thì tự xuống dòng dưới tên. */
.qh-bang .ng { display: grid; grid-template-columns: auto 1fr; gap: 3px 9px; align-items: center; }
.qh-bang .ng .qh-av { grid-row: 1 / -1; }
.qh-bang .ng b { grid-column: 2; font-weight: 700; line-height: 1.35; }
.qh-bang .ng .mvp { grid-column: 2; justify-self: start; margin-left: 0; }
.qh-bang .mvp {
  font-size: .68rem; font-weight: 800; background: #F6E6CF; color: #8A5320;
  border-radius: 999px; padding: 2px 8px; margin-left: 2px; white-space: nowrap;
}

/* ---------------------------------------------------------------- vụn */
.qh-hint { font-size: .86rem; color: var(--qh-nhat); line-height: 1.55; }
.qh-hint.giua { text-align: center; }
.qh-tach { height: 1px; background: var(--qh-vien); margin: 13px 0; border: 0; }
.qh-trong-rong { text-align: center; padding: 26px 14px; color: var(--qh-nhat); font-size: .95rem; line-height: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .qh-ov, .qh-thu, .qh-trien.dong, .qh-thu-vs { animation: none !important; }
  .qh-lan .ray .di, .qh-lan .thu { transition: none !important; }
}

/* Icon SVG riêng (28/8/2026) — thay emoji ⚔️. Khung do JS đặt cỡ theo px, svg lấp đầy khung. */
.qh-ic { display: inline-block; vertical-align: middle; flex: none; }
.qh-ic svg { width: 100%; height: 100%; display: block; }
.qh-thu-ic { display: flex; justify-content: center; margin-bottom: 4px; }

/* ---------------------------------------------------------------- 📜 màn DIỄN BIẾN TRẬN (4/9/2026)
   Dòng thời gian từng câu đã đóng, mở từ cuối màn Bảng công trạng.
   ⚠️ Không có khối nào cuộn ngang: câu ngữ pháp của chặng 3 dài tới hai dòng, ép nó vào một dải
      cuộn ngang là học viên lớn tuổi không bao giờ đọc hết câu.
   ⚠️ Bốn màu chặng lấy Y NGUYÊN bốn màu linh thú ở đầu tệp — chặng không phải đội, nhưng dùng
      chung bảng màu để cả lớp phủ chỉ có một bộ màu. */
.qh-db-dinh { text-align: center; padding: 2px 0 14px; }
.qh-db-ti {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
}
.qh-db-ti .gach { color: #B4A98A; font-weight: 700; }
.qh-db-ti .v {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  background: var(--ltn); border: 1.5px solid var(--ltv); color: var(--lt2);
  font-weight: 800; font-size: .95rem;
}
.qh-db-ti .v.toi { box-shadow: 0 0 0 2px rgba(180, 55, 46, .28); }
.qh-db-ti .v .so { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.qh-db-mo { color: var(--qh-nhat); font-size: .86rem; margin-top: 7px; }

.qh-db-the { padding-top: 6px; }
.qh-db-chang {
  display: flex; align-items: center; gap: 7px;
  margin: 16px 0 8px; font-size: .76rem; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase; color: #8A7B58;
}
.qh-db-chang:first-child { margin-top: 2px; }
.qh-db-chang .c {
  width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  font-size: .8rem; color: #fff; letter-spacing: 0;
}
.qh-db-chang .c1, .qh-db-dong .cham.c1 { background: #b8863b; }
.qh-db-chang .c2, .qh-db-dong .cham.c2 { background: #c4553f; }
.qh-db-chang .c3, .qh-db-dong .cham.c3 { background: #4f6f63; }
.qh-db-chang .c4, .qh-db-dong .cham.c4 { background: #7a6aa6; }

.qh-db-dong { display: flex; gap: 10px; padding: 7px 0; }
.qh-db-cot { width: 22px; flex: none; display: flex; justify-content: center; position: relative; }
/* sợi dây nối các câu — dựng bằng ::before nên không thêm một thẻ rỗng nào vào DOM */
.qh-db-cot::before {
  content: ""; position: absolute; top: -9px; bottom: -9px; width: 2px; background: #EDE3CB;
}
.qh-db-dong .cham {
  position: relative; width: 20px; height: 20px; border-radius: 999px;
  display: grid; place-items: center; font-size: .68rem; color: #fff;
  box-shadow: 0 0 0 3px #FFFDF7;
}
.qh-db-noi { flex: 1; min-width: 0; }
.qh-db-cau {
  display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; font-size: .95rem;
}
.qh-db-cau .stt { color: #B4A98A; font-weight: 700; font-size: .82rem; font-variant-numeric: tabular-nums; }
.qh-db-cau .cn { font-size: 1.25rem; font-weight: 700; letter-spacing: 1px; }
.qh-db-cau .py { color: #8A7B58; font-size: .84rem; }
/* Câu ngữ pháp dài phải bắt đầu NGAY cạnh số thứ tự rồi mới xuống dòng — để nó nhảy hẳn xuống
   dòng dưới thì số "4." nằm chơ vơ một mình, đọc thành một mục rỗng. */
.qh-db-cau .hoi { flex: 1 1 0; min-width: 0; color: #5C5038; font-size: .9rem; line-height: 1.5; }
/* Phương án SAI mà đội đã chọn — dòng riêng, màu chu sa, không nhồi vào viên thuốc. */
.qh-db-chon {
  display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
  margin-top: 4px; font-size: .82rem; line-height: 1.5; color: #8D3226;
}
.qh-db-chon .ic { font-size: .8rem; }
.qh-db-chenh {
  display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap;
  margin-top: 4px; font-size: .82rem; line-height: 1.5; color: var(--lt2);
}
.qh-db-chenh .ic { font-size: .8rem; }
.qh-db-dp { font-size: .82rem; color: var(--qh-olive); margin: 3px 0 1px; }
.qh-db-pills { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 5px; }
.qh-db-pill {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 999px; padding: 4px 11px 4px 7px;
  font-size: .82rem; font-weight: 700;
  background: var(--ltn); border: 1px solid var(--ltv); color: var(--lt2);
}
.qh-db-pill.rieng { margin-top: 5px; }
.qh-db-pill.no { opacity: .62; }
.qh-db-pill.toi { box-shadow: 0 0 0 2px rgba(180, 55, 46, .22); }
.qh-db-pill .dau { font-weight: 900; }
.qh-db-pill.ok .dau { color: #4E7A46; }
.qh-db-pill.no .dau { color: var(--qh-chu-sa); }
.qh-db-pill .dm { font-variant-numeric: tabular-nums; }
.qh-db-pill .ai {
  font-weight: 600; font-size: .74rem; opacity: .85;
  border-left: 1px solid rgba(0, 0, 0, .14); padding-left: 6px;
}
.qh-db-pills .ti {
  margin-left: auto; font-size: .82rem; font-weight: 800; color: #8A7B58;
  font-variant-numeric: tabular-nums;
}