/* 🗣️ LUYỆN GIAO TIẾP — sân khấu sống (Đợt B). Xem BAN-GIAO-nhom-tu-linh.md mục 4.
   Học viên trung niên/lớn tuổi: nút ≥56px, chữ nội dung 17px, vùng chạm ≥44px.
   Từ ngữ nhẹ nhàng: lượt nói · chặng · ghi tên · cùng nói. */

.gt-ov {
  position: fixed; inset: 0; z-index: 9995;
  background: #2B2620; color: #f4ecd8;
  display: none; flex-direction: column;
  font-size: 17px;
}
.gt-ov.mo { display: flex; }

/* thanh đầu */
.gt-top {
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px;
  background: #241f1a; border-bottom: 1px solid rgba(255, 255, 255, .09); flex: none;
}
.gt-top .t { flex: 1; min-width: 0; font-weight: 800; font-size: 1.02rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-top .chang { font-size: .78rem; font-weight: 800; color: #f0d79a; background: rgba(216, 163, 61, .16); border: 1px solid rgba(216, 163, 61, .4); border-radius: 999px; padding: 4px 11px; flex: none; }
.gt-x {
  width: 44px; height: 44px; flex: none; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #f4ecd8; font-size: 1.1rem; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.gt-than { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 14px 20px; }

/* nút chung */
.gt-nut {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; min-height: 56px; padding: 12px 16px;
  border: none; border-radius: 16px; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 800; color: #fff;
  background: linear-gradient(180deg, #7d8c50, #55632f);
  box-shadow: 0 10px 20px -14px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .14s cubic-bezier(.34, 1.4, .64, 1);
}
.gt-nut:active { transform: scale(.965); }
.gt-nut.phu { background: rgba(255, 255, 255, .12); color: #f4ecd8; border: 1px solid rgba(255, 255, 255, .26); box-shadow: none; }
.gt-nut[disabled] { opacity: .5; cursor: default; transform: none; }
.gt-hang { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 10px; }
.gt-hang > .gt-nut { flex: 1 1 150px; }

/* ---------- màn chọn cảnh ---------- */
/* Lưới khối thay vì dải ngang bè hết trang (đo thật 29 bối cảnh phải cuộn rất dài — Zhenyin
   duyệt demo 21/9/2026): auto-fill co giãn theo điện thoại lẫn máy tính, thẻ dạng khối vuông. */
.gt-canh-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 11px; max-width: 860px; }
.gt-canh-o {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4;
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 18px; overflow: hidden;
  background: #3a332a; cursor: pointer; font-family: inherit; text-align: left; color: #f4ecd8;
  padding: 0;
}
.gt-canh-o .nen { position: absolute; inset: 0; background-size: cover; background-position: center; }
.gt-canh-o .phu { position: absolute; inset: 0; background: linear-gradient(to top, rgba(35, 30, 24, .92) 30%, rgba(35, 30, 24, .08) 100%); }
.gt-canh-o .chu { position: relative; padding: 34px 11px 10px; }
.gt-canh-o .nm { font-size: .96rem; font-weight: 800; line-height: 1.25; text-shadow: 0 1px 0 rgba(16, 12, 8, .9), 0 2px 6px rgba(16, 12, 8, .95); }
.gt-canh-o .mo { font-size: .76rem; color: #e0d5bd; line-height: 1.35; margin-top: 2px; text-shadow: 0 1px 4px rgba(16, 12, 8, .95); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gt-canh-o.khoa { opacity: .45; cursor: default; }
.gt-canh-o.khoa .kh { display: inline-block; margin-top: 5px; font-size: .68rem; font-weight: 800; color: #f0d79a; background: rgba(216, 163, 61, .18); border: 1px solid rgba(216, 163, 61, .4); border-radius: 999px; padding: 2px 8px; }

/* 🔔 khối bối cảnh nhóm mình ĐANG MỞ — viền vàng + avatar/số người trên ảnh, để nhận ra ngay không
   phải đọc chữ (21/9/2026, thay banner cũ phía trên lưới). */
.gt-canh-o.dang { outline: 2px solid #d8a33d; outline-offset: -2px; }
.gt-canh-dau { position: absolute; top: 7px; left: 7px; right: 7px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.gt-canh-av { display: flex; }
.gt-canh-av .gt-av { margin-left: -9px; box-shadow: 0 0 0 2px #3a332a; }
.gt-canh-av .gt-av:first-child { margin-left: 0; }
.gt-canh-pill { font-size: .64rem; font-weight: 800; color: #3a2f22; background: #d8a33d; border-radius: 999px; padding: 2px 8px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }

/* 🔔 cửa sổ mời vào phòng đông — nổi trên TOÀN bộ .gt-ov (gắn ở JS, không cuộn theo lưới bên dưới). */
.gt-moi-nen { position: absolute; inset: 0; z-index: 20; background: rgba(20, 17, 13, .62); display: flex; align-items: flex-end; justify-content: center; padding: 0 14px calc(14px + env(safe-area-inset-bottom, 0px)); }
.gt-moi-the { width: 100%; max-width: 420px; background: #332c22; border: 1px solid rgba(255, 255, 255, .14); border-radius: 22px; padding: 18px 18px 16px; box-shadow: 0 -14px 40px rgba(0, 0, 0, .5); }
.gt-moi-hang { display: flex; align-items: center; margin-bottom: 12px; }
.gt-moi-hang .gt-av { margin-left: -10px; box-shadow: 0 0 0 2px #332c22; }
.gt-moi-hang .gt-av:first-child { margin-left: 0; }
.gt-moi-hang .them { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: #f4ecd8; font-weight: 800; font-size: .82rem; display: flex; align-items: center; justify-content: center; margin-left: -10px; box-shadow: 0 0 0 2px #332c22; flex: none; }
.gt-moi-tit { font-weight: 800; font-size: 1.02rem; line-height: 1.4; margin-bottom: 4px; }
.gt-moi-tit b { color: #d8a33d; }
.gt-moi-mo { font-size: .86rem; color: #cfc3a6; line-height: 1.5; margin-bottom: 14px; }
.gt-moi-hai { display: flex; flex-direction: column; gap: 8px; }

/* mức độ */
.gt-muc { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.gt-muc button {
  flex: 1 1 96px; min-height: 56px; border-radius: 14px; cursor: pointer; font-family: inherit;
  font-size: .94rem; font-weight: 700; padding: 8px 10px;
  background: rgba(255, 255, 255, .08); color: #f4ecd8; border: 1px solid rgba(255, 255, 255, .2);
}
.gt-muc button.chon { background: #d8a33d; border-color: #d8a33d; color: #3a2f22; }
.gt-muc-mo { font-size: .84rem; color: #a99b78; margin-bottom: 4px; }

/* ---------- người trong phòng chờ ---------- */
.gt-ds { list-style: none; margin: 12px 0; padding: 0; }
.gt-ds li { display: flex; align-items: center; gap: 11px; min-height: 52px; border-top: 1px solid rgba(255, 255, 255, .09); padding: 6px 0; }
.gt-ds li:first-child { border-top: none; }
.gt-ds .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-ds .tag { font-size: .74rem; font-weight: 800; color: #cfc3a6; background: rgba(255, 255, 255, .1); border-radius: 999px; padding: 3px 9px; flex: none; }

/* avatar dùng chung */
.gt-av {
  border-radius: 50%; object-fit: cover; flex: none;
  border: 2px solid rgba(255, 255, 255, .3);
  background: linear-gradient(135deg, #b7c27f, #8a9a53); color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.gt-av.sz28 { width: 28px; height: 28px; font-size: .7rem; border-width: 1.5px; }
.gt-av.sz40 { width: 40px; height: 40px; font-size: .95rem; }
.gt-av.sz56 { width: 56px; height: 56px; font-size: 1.25rem; }
.gt-av.sz64 { width: 64px; height: 64px; font-size: 1.4rem; }

/* ---------- màn chia vai ---------- */
.gt-vai-the {
  display: flex; align-items: center; gap: 13px; padding: 13px;
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; margin-bottom: 10px;
  background: rgba(255, 255, 255, .05);
  animation: gtLat .5s cubic-bezier(.34, 1.4, .64, 1) both;
}
.gt-vai-the:nth-child(2) { animation-delay: .12s; }
.gt-vai-the:nth-child(3) { animation-delay: .24s; }
.gt-vai-the:nth-child(4) { animation-delay: .36s; }
.gt-vai-the:nth-child(5) { animation-delay: .48s; }
@keyframes gtLat { from { opacity: 0; transform: rotateY(70deg) translateY(10px); } to { opacity: 1; transform: none; } }
.gt-vai-the.toi { border-color: #d8a33d; background: rgba(216, 163, 61, .12); }
.gt-vai-han {
  width: 52px; height: 52px; flex: none; border-radius: 12px; background: #B4372E; color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 800;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .3);
}
.gt-vai-the .th { flex: 1; min-width: 0; }
/* Tên người Việt dài — cho XUỐNG DÒNG thay vì cắt cụt bằng "…" (màn 380px cắt mất cả họ lẫn tên). */
.gt-vai-the .th .nm { font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.gt-vai-the .th .vt { font-size: .86rem; color: #cfc3a6; }
.gt-mau { margin: 4px 0 0; padding: 0; list-style: none; }
.gt-mau li { font-size: .92rem; color: #e8dcc0; padding: 3px 0; }
.gt-mau li .py { display: block; font-size: .8rem; color: #a99b78; }
.gt-mau li .vn { display: block; font-size: .84rem; color: #cfc3a6; }
.gt-dem-vao { text-align: center; font-size: .86rem; color: #a99b78; margin-top: 10px; }

/* ---------- ⏸️ NGHỈ GIỮA HAI CHẶNG (28/8/2026) ----------
   Thẻ báo hết chặng + đồng hồ đếm ngược, đặt trên đầu danh sách VAI MỚI. Nền ĐẶC + viền + bóng
   (không dùng kính mờ: nền thẻ và nền màn gần màu nhau, kính mờ gần như vô hình — bài học đã ghi
   trong CLAUDE.md). */
.gt-nghi {
  border: 1px solid rgba(216, 163, 61, .5);
  background: linear-gradient(180deg, rgba(216, 163, 61, .18), rgba(216, 163, 61, .07));
  border-radius: 18px; padding: 16px 14px; margin-bottom: 14px; text-align: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
  animation: gtNghiVao .34s cubic-bezier(.34, 1.3, .64, 1);
}
@keyframes gtNghiVao { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.gt-nghi .xong { font-size: 1.16rem; font-weight: 800; color: #f0d9a4; letter-spacing: .2px; }
.gt-nghi .loi { margin-top: 7px; font-size: .92rem; line-height: 1.5; color: #ded2b4; }
.gt-nghi .dem { margin-top: 12px; font-size: 1.02rem; font-weight: 800; color: #ffd98a; }
.gt-nghi .vong { margin-top: 9px; height: 8px; border-radius: 999px; background: rgba(0, 0, 0, .3); overflow: hidden; }
.gt-nghi .vong i { display: block; height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #d8a33d, #f0d9a4); transition: width .25s linear; }
@media (prefers-reduced-motion: reduce) {
  .gt-nghi { animation: none; }
  .gt-nghi .vong i { transition: none; }
}

/* ---------- SÂN KHẤU ---------- */
/* ⚠️ KHUNG NHÌN — sửa theo bàn giao 4.3 (bản 10 cảnh). Ở nhiều ảnh, chi tiết đẹp nhất nằm ở 1/3 DƯỚI
   (bàn ăn nhà hàng, sạp hoa quả) — đúng chỗ avatar và lớp phủ đè lên. Xử lý Ở CSS, không tạo lại ảnh:
   kéo khung nhìn lên (`background-position: center 38%`), lớp phủ THẤP HƠN và NHẠT HƠN bản mẫu. */
.gt-san {
  position: relative; border-radius: 20px; overflow: hidden;
  aspect-ratio: 3 / 2; min-height: 208px;
  display: flex; align-items: flex-end;
  background: linear-gradient(160deg, #f4ecd8, #e6d9b8);   /* nền kem trơn khi thiếu ảnh cảnh */
}
.gt-san .nen { position: absolute; inset: 0; background-size: cover; background-position: center 38%; }
.gt-san .phu {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(to top, rgba(35, 30, 24, .72) 6%, rgba(35, 30, 24, 0) 100%);
}
.gt-san .nhan-canh { position: absolute; top: 12px; left: 14px; font-size: .8rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #3a2f22; background: rgba(255, 255, 255, .72); border-radius: 999px; padding: 4px 12px; }
/* Bàn giao 4.3 ghi "avatar đặt bottom:56px (trên bảng chạy)" — ở bản này bảng chạy nằm NGOÀI sân
   khấu (ngay dưới), không đè lên ảnh, nên avatar chỉ cần padding đáy. Cùng một mục đích: bảng chạy
   không bao giờ che mặt ai. */
.gt-san .hang {
  position: relative; width: 100%; display: flex; gap: 10px; justify-content: center;
  align-items: flex-end; padding: 14px 12px 9px; overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.gt-dv { width: 76px; flex: none; text-align: center; }
.gt-dv .vong { position: relative; width: 64px; height: 64px; margin: 0 auto 5px; }
.gt-dv .gt-av { position: relative; z-index: 2; margin: 0 auto; }
/* Người rớt mạng: XÁM đi chứ KHÔNG làm trong suốt — trên nền ảnh sáng (sạp hoa quả) avatar mờ
   50% tan luôn vào tranh, nhìn không ra là ai. Vẫn phải nhận ra mặt bạn mình. */
.gt-dv.im .gt-av { filter: grayscale(.85) brightness(.82); border-color: rgba(255, 255, 255, .45); }
/* Tên đọc được cả trên nền SÁNG (ảnh nhà hàng, quầy hoa quả sáng nhất) — bàn giao 4.3. */
.gt-dv .nm { font-size: .74rem; font-weight: 700; color: #fff; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  /* Ba lớp bóng: viền sát chữ + đổ bóng + quầng toả. Đo BẰNG MẮT trên ảnh quầy hoa quả và nhà hàng
     (hai ảnh sáng nhất) — hai lớp còn chìm vào sạp hoa quả nhiều màu. */
  text-shadow: 0 1px 0 rgba(16, 12, 8, .95), 0 2px 5px rgba(16, 12, 8, .98), 0 0 12px rgba(16, 12, 8, .85); }
.gt-dv .vh { display: inline-block; margin-top: 2px; font-size: .8rem; font-weight: 800; color: #fff; background: #B4372E; border-radius: 7px; padding: 1px 7px; }
.gt-dv .nghe { display: block; font-size: .66rem; color: #cfc3a6; }

/* 👂 Huy hiệu "Chỉ nghe" gắn góc avatar — cả phòng nhìn là biết bạn đó chỉ ngồi nghe, khỏi đọc chữ.
   Bọc ngoài PHẢI là inline-block + relative thì huy hiệu mới neo đúng vào avatar. */
.gt-av-boc { position: relative; display: inline-block; flex: none; line-height: 0; }
.gt-av-boc .gt-tai {
  position: absolute; right: -3px; bottom: -3px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: #3a332a; border: 1.5px solid #d8a33d;
  font-size: 11px; line-height: 1;
}
/* Trên sân khấu avatar to hơn (64px) nên huy hiệu cũng to lên cho cân. */
.gt-dv .gt-av-boc .gt-tai { width: 24px; height: 24px; font-size: 13px; right: -2px; bottom: -2px; }

/* người đang nói: viền vàng + vòng lan toả RÕ HẲN + 5 vạch sóng âm */
.gt-dv.noi .gt-av { border-color: #f0c25a; box-shadow: 0 0 0 3px rgba(240, 194, 90, .55), 0 0 18px rgba(240, 194, 90, .6); }
.gt-dv.noi .vong::before, .gt-dv.noi .vong::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid rgba(240, 194, 90, .85);
  animation: gtLanToa 1.7s cubic-bezier(.22, .61, .36, 1) infinite;
}
.gt-dv.noi .vong::after { animation-delay: .85s; }
@keyframes gtLanToa {
  from { transform: scale(.86); opacity: .95; }
  to   { transform: scale(1.28); opacity: 0; }
}
.gt-song { display: flex; gap: 3px; justify-content: center; align-items: flex-end; height: 15px; margin-top: 3px; }
.gt-song i { width: 3px; background: #f0c25a; border-radius: 2px; animation: gtSong .9s ease-in-out infinite; }
.gt-song i:nth-child(1) { height: 6px; animation-delay: 0s; }
.gt-song i:nth-child(2) { height: 12px; animation-delay: .12s; }
.gt-song i:nth-child(3) { height: 15px; animation-delay: .24s; }
.gt-song i:nth-child(4) { height: 10px; animation-delay: .36s; }
.gt-song i:nth-child(5) { height: 7px; animation-delay: .48s; }
@keyframes gtSong { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }

/* ---------- bảng chạy điện tử ---------- */
.gt-bang {
  display: flex; align-items: stretch; margin-top: 10px;
  border-radius: 13px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .14);
  background: #1c1814;
}
.gt-bang .dh {
  flex: none; min-width: 74px; display: flex; align-items: center; justify-content: center;
  background: #d8a33d; color: #3a2f22; font-weight: 800; font-size: 1.24rem;
  font-variant-numeric: tabular-nums; padding: 8px 10px;
}
.gt-bang .dh.gap { background: #B4372E; color: #fff; }
.gt-bang .chay { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; padding: 8px 0; }
.gt-bang .chay span {
  display: inline-block; white-space: nowrap; padding-left: 100%;
  font-size: .94rem; font-weight: 700; color: #f0d79a; letter-spacing: .04em;
  animation: gtChay 14s linear infinite;
}
@keyframes gtChay { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ---------- khung việc của tôi ---------- */
.gt-toi {
  margin-top: 12px; padding: 13px; border-radius: 16px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13);
}
.gt-toi .hd { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.gt-toi .hd .vt { flex: 1; min-width: 0; font-weight: 800; }
.gt-toi .viec { font-size: .94rem; color: #cfc3a6; margin-bottom: 8px; }
.gt-toi.den-luot { border-color: #f0c25a; background: rgba(240, 194, 90, .12); }
.gt-ghi-nut { display: flex; gap: 8px; flex-wrap: wrap; }
.gt-ghi-nut button {
  flex: 1 1 140px; min-height: 56px; border-radius: 14px; cursor: pointer; font-family: inherit;
  font-size: .96rem; font-weight: 700; padding: 8px 10px;
  background: rgba(255, 255, 255, .1); color: #f4ecd8; border: 1px solid rgba(255, 255, 255, .22);
}
.gt-ghi-nut button:active { transform: scale(.97); }

/* ---------- màn kết ---------- */
.gt-ket-bang { list-style: none; margin: 12px 0; padding: 0; }
.gt-ket-bang li { display: flex; align-items: center; gap: 11px; min-height: 52px; border-top: 1px solid rgba(255, 255, 255, .09); padding: 6px 0; }
.gt-ket-bang li:first-child { border-top: none; }
.gt-ket-bang .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-ket-bang .so { font-size: .86rem; color: #cfc3a6; flex: none; font-variant-numeric: tabular-nums; }
.gt-ket-bang .khen { flex: none; min-height: 44px; min-width: 44px; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 1rem; background: rgba(255, 255, 255, .1); color: #f4ecd8; border: 1px solid rgba(255, 255, 255, .22); }
.gt-ket-bang .khen[disabled] { opacity: .5; }
.gt-vap { display: flex; gap: 7px; flex-wrap: wrap; margin: 8px 0 2px; }
.gt-vap span { font-size: 1rem; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2); border-radius: 10px; padding: 5px 10px; }
.gt-tieu { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #a99b78; margin: 16px 0 6px; }
.gt-ghichu { font-size: .84rem; color: #a99b78; margin-top: 8px; line-height: 1.5; }

@media (max-width: 380px) {
  .gt-dv { width: 66px; }
  .gt-dv .vong, .gt-av.sz64 { width: 56px; height: 56px; }
  .gt-san { min-height: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .gt-vai-the { animation: none; }
  .gt-dv.noi .vong::before, .gt-dv.noi .vong::after { animation: none; opacity: .5; transform: scale(1.12); }
  .gt-song i { animation: none; }
  .gt-bang .chay span { animation: none; padding-left: 12px; }
  .gt-nut { transition: none; }
}

/* ================================================================= HỘP HỘI THOẠI
   Cả nhóm nhìn CÙNG một kịch bản đã xếp thứ tự (thay cách cũ: mỗi người chỉ thấy túi câu của
   riêng mình nên bốn người nói bốn kiểu — Zhenyin phản ánh 27/8/2026).
   Ba trạng thái của một lượt, KHÔNG dùng chữ để phân biệt mà dùng độ sáng, vì học viên đang vừa
   nói vừa liếc màn hình, không có thời gian đọc nhãn:
     .xong = đã nói rồi   -> mờ bớt      .dang = đang tới lượt -> sáng nổi lên
     .cho  = còn ở phía sau -> bình thường
   Thêm .toi khi lượt đó là của chính mình -> viền vàng đậm cho dễ nhận.
   KHÔNG có đồng hồ đếm ngược, KHÔNG có dòng chạy "đến lượt ai" — cả nhóm ngồi chung phòng Meet. */
.gt-hop {
  margin-top: 12px; border-radius: 16px; overflow: hidden;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .13);
}
.gt-hop-dau {
  display: flex; align-items: center; gap: 8px; padding: 9px 13px;
  background: rgba(255, 255, 255, .06); border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.gt-hop-dau .t {
  flex: 1; min-width: 0; font-size: .78rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; color: #a99b78;
}
.gt-hop-dau .c { font-size: .8rem; font-weight: 800; color: #cfc3a6; flex: none; }
/* Kịch bản dài thì cuộn TRONG hộp, không đẩy nút "Tôi nói xong" ra khỏi màn hình. */
.gt-hop-ds { max-height: 36vh; overflow-y: auto; padding: 6px; }
/* Màn sân khấu có tới ba khối chồng nhau (ảnh cảnh + hộp hội thoại + nút), nên ở màn này ảnh cảnh
   phải thấp hơn hẳn — đo thật ở 375x667 ngày 27/8/2026: giữ tỉ lệ 3/2 như cũ thì nút "Tôi nói xong"
   bị đẩy xuống dưới mép màn hình 97px, học viên phải cuộn mới bấm được.
   `max-height` là để chặn chiều NGƯỢC LẠI trên máy tính: khung này tràn hết bề ngang màn hình nên
   chỉ có tỉ lệ thôi thì ở 1280px ảnh cảnh cao tới hơn 400px, đẩy nguyên hộp hội thoại xuống dưới
   mép dưới. Đo ở cả 375x667 và 1280x800 mới đủ — một khổ màn hình không bao giờ đủ. */
.gt-san.gon { aspect-ratio: 2 / 1; min-height: 150px; max-height: 200px; }

.gt-dong {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 10px; border-radius: 13px; border: 1px solid transparent;
  transition: opacity .25s ease, background .25s ease, border-color .25s ease;
}
.gt-dong + .gt-dong { margin-top: 4px; }
.gt-dong .ai { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 40px; }
.gt-dong .ai .vh {
  font-size: .74rem; font-weight: 800; color: #d8c78f;
  line-height: 1; padding: 2px 5px; border-radius: 6px; background: rgba(255, 255, 255, .1);
}
.gt-dong .loi { flex: 1; min-width: 0; }
.gt-dong .tn {
  font-size: .78rem; font-weight: 800; color: #a99b78;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gt-dong .han { font-size: 1.14rem; font-weight: 700; color: #f4ecd8; line-height: 1.5; margin-top: 2px; }
.gt-dong .py { font-size: .82rem; color: #a99b78; }
.gt-dong .vn { font-size: .88rem; color: #cfc3a6; margin-top: 1px; }
.gt-dong .viec { font-size: .88rem; color: #cfc3a6; margin-top: 2px; font-style: italic; }

.gt-dong.xong { opacity: .38; }
/* Câu SẮP TỚI mờ bớt (2/10/2026, Zhenyin: "sao 2 dòng cùng sáng?") — trước đây chỉ câu đã nói mới mờ,
   nên câu kế tiếp sáng y như câu đang nói. Thứ bậc: đã nói (.38) < sắp tới (.6) < ĐANG nói (đủ sáng,
   khung vàng). Lượt của chính mình phía sau vẫn rõ hơn (.85) để học viên kịp chuẩn bị câu. */
.gt-dong.cho { opacity: .6; }
.gt-dong.cho.toi { opacity: .85; }
.gt-dong.dang {
  background: rgba(240, 194, 90, .13); border-color: rgba(240, 194, 90, .45);
  box-shadow: 0 6px 18px -12px rgba(240, 194, 90, .9);
}
.gt-dong.dang .tn { color: #f0c25a; }
.gt-dong.dang .han { color: #fff6e0; }
.gt-dong.dang.toi { border-color: #f0c25a; border-width: 2px; padding: 8px 9px; }
/* Lượt của chính mình còn ở phía sau: gạch nhẹ bên trái để liếc là thấy câu nào của mình. */
.gt-dong.toi:not(.dang) { background: rgba(255, 255, 255, .05); border-left: 3px solid rgba(240, 194, 90, .5); }

@media (prefers-reduced-motion: reduce) { .gt-dong { transition: none; } }

/* 🌙 Dải "Mời bạn sang Bàn N" — giữa thanh đầu và thân, không bị màn nào dọn mất. */
.gt-dai-ban {
  flex: none; margin: 10px 12px 0; padding: 12px 13px; border-radius: 16px;
  background: rgba(143, 164, 95, .2); border: 1.5px solid rgba(185, 197, 143, .6); color: #f4ecd8;
}
.gt-dai-ban .tua { font-weight: 800; font-size: 1.05rem; }
.gt-dai-ban .mo-ta { font-size: .9rem; line-height: 1.45; margin: 4px 0 10px; color: #e6dcc4; }
.gt-dai-ban .hang { display: flex; flex-wrap: wrap; gap: 8px; }
.gt-dai-ban .hang .gt-nut { flex: 1 1 150px; min-width: 150px; min-height: 48px; font-size: 16px; }

/* 🧪 Dải nhắc "buổi thử" — chỉ hiện với Hồ sơ TEST của quản trị viên, học viên không bao giờ thấy. */
.gt-thu-dai {
  margin: 0 0 12px; padding: 9px 13px; border-radius: 13px;
  background: rgba(216, 163, 61, .14); border: 1px solid rgba(216, 163, 61, .42);
  color: #f0d79a; font-size: .84rem; font-weight: 700; line-height: 1.45;
}

/* ================================================================= 🎚️ CẤP ĐỘ PHÒNG (28/9/2026)
   Ba cấp A · B · C. Người MỞ phòng chọn (tấm trượt `.gt-chon`), bạn vào sau theo cùng; nhãn `.gt-cap`
   hiện trên ô bối cảnh, cửa sổ mời, phòng chờ và đầu hộp hội thoại. Màu A ô-liu · B vàng đồng · C son —
   nền đặc + chữ trắng (không kính mờ: nền ảnh cảnh sáng, kính mờ tan mất). */
.gt-cap { display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 800; border-radius: 999px; padding: 3px 9px 3px 4px; white-space: nowrap; color: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); flex: none; }
.gt-cap i { font-style: normal; display: inline-flex; width: 17px; height: 17px; border-radius: 50%; background: rgba(255, 255, 255, .25); align-items: center; justify-content: center; font-size: .72rem; }
.gt-cap.A { background: #6f8a3e; } .gt-cap.B { background: #b07d1c; } .gt-cap.C { background: #B4372E; }
.gt-cap.to { font-size: .9rem; padding: 5px 12px 5px 5px; }
.gt-cap.to i { width: 22px; height: 22px; font-size: .9rem; }
.gt-canh-o .chu .gt-cap { margin-bottom: 5px; }
.gt-moi-cap { margin: 8px 0 2px; }
.gt-phong-cap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 12px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .13); margin-top: 10px; }
.gt-phong-cap .ai { font-size: .86rem; color: #cfc3a6; flex: 1; min-width: 140px; }
.gt-phong-cap button { min-height: 44px; border-radius: 12px; padding: 0 14px; font: inherit; font-size: .9rem; font-weight: 800; color: #f4ecd8; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26); cursor: pointer; }
.gt-phong-cap button:active { transform: scale(.96); }
.gt-hoi-dau { margin-bottom: 12px; padding: 10px 12px; border-radius: 14px; background: rgba(216, 163, 61, .1); border: 1px solid rgba(216, 163, 61, .35); font-size: .88rem; line-height: 1.45; color: #ded2b4; }
.gt-hoi-dau b { display: block; color: #ffd98a; margin-bottom: 2px; }
.gt-dem-luot { font-size: .84rem; font-weight: 800; color: #f0d79a; margin-bottom: 8px; }
.gt-hop-dau .gt-cap { box-shadow: none; }

/* Tấm trượt chọn cấp: nằm TRONG lớp phủ `.gt-ov` (đã position:fixed), trần chiều cao + cuộn riêng. */
.gt-chon-nen { position: absolute; inset: 0; z-index: 30; background: rgba(15, 12, 9, .62); display: flex; align-items: flex-end; justify-content: center; }
.gt-chon {
  width: 100%; max-width: 560px; max-height: 88%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #332c22; border-radius: 24px 24px 0 0; padding: 10px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 -12px 30px rgba(0, 0, 0, .45);
  animation: gtChonVao .28s cubic-bezier(.34, 1.2, .64, 1);
}
@keyframes gtChonVao { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.gt-chon .keo { width: 40px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .25); margin: 0 auto 10px; }
.gt-chon .tit { font-size: 1.08rem; font-weight: 800; }
.gt-chon .mo { font-size: .88rem; color: #cfc3a6; margin: 3px 0 12px; line-height: 1.45; }
.gt-cap-the { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 12px; margin-bottom: 9px; border-radius: 16px; font: inherit; color: #f4ecd8; cursor: pointer; background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .14); transition: transform .14s cubic-bezier(.34, 1.4, .64, 1); }
.gt-cap-the:active { transform: scale(.98); }
.gt-cap-the.chon { border-color: #d8a33d; background: rgba(216, 163, 61, .13); }
.gt-cap-the .chu-cap { width: 46px; height: 46px; flex: none; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 900; color: #fff; }
.gt-cap-the .chu-cap.A { background: #6f8a3e; } .gt-cap-the .chu-cap.B { background: #b07d1c; } .gt-cap-the .chu-cap.C { background: #B4372E; }
.gt-cap-the .ten { font-weight: 800; font-size: 1rem; }
.gt-cap-the .ct { font-size: .84rem; color: #cfc3a6; line-height: 1.4; margin-top: 2px; }
.gt-cap-the .vd { font-size: 1rem; color: #fff6e0; margin-top: 6px; line-height: 1.45; }
.gt-cap-the .vd small { display: block; font-size: .8rem; color: #a99b78; }
@media (prefers-reduced-motion: reduce) { .gt-chon { animation: none; } }

/* ============================================================ 📚 TỔNG KẾT BUỔI (29/9/2026) ===
   Toàn bộ câu cả ba hồi (tái dùng `.gt-dong`/`.gt-hoi-dau` của hộp hội thoại sống) + điểm ngữ pháp
   trọng tâm AI tổng hợp. KHÔNG giới hạn chiều cao như `.gt-hop-ds` khi đang diễn — ở màn kết, giáo
   viên/học viên cần đọc/cuộn cả trang, không phải cuộn lồng trong một khung nhỏ. */
.gt-tk-ds { max-height: none; padding: 0; }
.gt-tk-ds .gt-dong.xong { opacity: .92; }
.gt-np { margin-top: 6px; }
.gt-np-the {
  padding: 11px 13px; border-radius: 14px; margin-bottom: 8px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .13);
}
.gt-np-the .mau { font-size: .98rem; font-weight: 800; color: #ffd98a; }
.gt-np-the .giai { font-size: .86rem; color: #cfc3a6; margin-top: 3px; line-height: 1.45; }
.gt-np-the .vd { margin-top: 7px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .1); }
.gt-np-the .vd .han { font-size: 1rem; font-weight: 700; color: #f4ecd8; }
.gt-np-the .vd .py { font-size: .8rem; color: #a99b78; }
.gt-np-the .vd .vn { font-size: .84rem; color: #cfc3a6; margin-top: 1px; }

/* 🚪 Màn "Mời bạn sang Bàn N" — chặn Luyện giao tiếp của bàn mới tới khi học viên xác nhận đã vào phòng Meet (4/10/2026). */
.gt-sang-ban { border-color: #f0c25a; background: rgba(240, 194, 90, .10); }
.gt-sang-ban .gt-tieu { margin-top: 0; }
.gt-sang-buoc { margin: 4px 0 12px 1.2em; padding: 0; font-size: .98rem; line-height: 1.55; color: #e6dcc4; }
.gt-sang-buoc li { margin: 4px 0; }
.gt-sang-ban .hang { display: flex; flex-wrap: wrap; gap: 8px; }
.gt-sang-ban .hang .gt-nut { flex: 1 1 180px; min-width: 160px; min-height: 52px; font-size: 16px; }

/* 🧠 Câu trong bài nói dùng đúng điểm ngữ pháp (4/10/2026) — cụm chữ của mẫu tô đậm màu vàng. */
.gt-np-cau { margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, .1); }
.gt-np-cau .nhan { font-size: .78rem; font-weight: 800; color: #b9c58f; letter-spacing: .02em; margin-bottom: 2px; }
.gt-np-cau .dong { padding: 6px 0; border-bottom: 1px dashed rgba(255, 255, 255, .08); }
.gt-np-cau .dong:last-child { border-bottom: 0; }
.gt-np-cau .ai { font-size: .74rem; color: #a99b78; }
.gt-np-cau .han { font-size: 1.05rem; font-weight: 700; color: #f4ecd8; }
.gt-np-cau .han b { color: #ffd98a; text-decoration: underline; text-decoration-color: rgba(255, 217, 138, .5); text-underline-offset: 3px; }
.gt-np-cau .py { font-size: .8rem; color: #a99b78; }
.gt-np-cau .vn { font-size: .84rem; color: #cfc3a6; margin-top: 1px; }