/* 🐉 NHÓM TỨ LINH — Cổng học viên (Đợt A). Xem BAN-GIAO-nhom-tu-linh.md.
   Học viên trung niên/lớn tuổi: nút cao ≥56px, chữ nội dung 17px, vùng chạm ≥44px.
   Từ ngữ: cùng về đích · giữ nhịp · chặng tuần · lượt nói · ghi tên · về đích.
   Không xếp hạng giữa các nhóm. */

.ntl-card {
  background: var(--card, #fffaf0);
  border: 1px solid var(--border, #e5d9bf);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 10px 26px -18px rgba(60, 45, 15, .55);
  color: var(--ink, #3a2f22);
  font-size: 17px;
}
.ntl-card .ntl-hd {
  display: flex; align-items: center; gap: 9px;
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #a08a52; margin-bottom: 12px;
}
.ntl-card .ntl-hd .ntl-tuan { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: .74rem; color: #a99b78; }

/* ---------- 🎲 băng mời khi giáo viên mở phiên Tứ Linh tự do (Cổng học viên poll lại thấy) ---------- */
.ntl-tudo-moi {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 15px; margin-bottom: 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, #fff1cf, #ffe3a8);
  border: 1px solid #e8c364;
  box-shadow: 0 8px 20px -14px rgba(140, 95, 10, .6);
}
.ntl-tudo-moi .tit { font-size: 1.02rem; font-weight: 800; color: #6b4a0a; }
.ntl-tudo-moi .phu { font-size: .9rem; font-weight: 600; color: #8a6a2a; }

/* ---------- 🛰️ Tứ Linh tự do — khối "Vào bàn giao tiếp" (khung tối, A2·A3) ---------- */
.ntl-toi {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 15px; margin-bottom: 12px;
  border-radius: 18px;
  background: linear-gradient(145deg, #1f3a4d, #15293a);
  color: #eef5f8;
  box-shadow: 0 10px 24px -16px rgba(10, 30, 45, .8);
}
.ntl-toi-tit { font-size: 1.08rem; font-weight: 800; }
.ntl-toi-gio { font-size: .88rem; font-weight: 600; color: #b9d3e0; }
.ntl-toi-phu { font-size: .9rem; color: #cfe2ea; line-height: 1.4; }
.ntl-toi-ban { font-size: 1.25rem; font-weight: 800; color: #ffe39a; margin-top: 2px; }
.ntl-toi-hang { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ntl-toi-nut {
  min-height: 50px; padding: 10px 18px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1);
  color: #fff; font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
  transition: transform .12s ease;
}
.ntl-toi-nut.chinh { background: #ffd66b; border-color: #ffd66b; color: #2b2000; }
.ntl-toi-nut.to { width: 100%; font-size: 1.1rem; min-height: 56px; margin-top: 4px; }
.ntl-toi-nut:active { transform: scale(.97); }
.ntl-toi-nut[disabled] { opacity: .6; cursor: default; }
@media (hover: hover) { .ntl-toi-nut:hover { filter: brightness(1.06); } }
@media (prefers-reduced-motion: reduce) { .ntl-toi-nut { transition: none; } }

/* ---------- một dòng mời nhẹ (lớp chưa chia nhóm / chưa vào nhóm) ---------- */
.ntl-moi {
  display: flex; align-items: center; gap: 11px; width: 100%;
  min-height: 56px; padding: 12px 15px;
  border: 1px dashed #d9c79a; border-radius: 16px;
  background: linear-gradient(135deg, #fdf7e8, #f7eed6);
  font-family: inherit; font-size: 17px; font-weight: 700; color: #6b5f3e;
  text-align: left; cursor: pointer;
}
.ntl-moi[disabled] { cursor: default; opacity: .85; }
.ntl-moi .ic { font-size: 1.5rem; line-height: 1; flex: none; }
.ntl-moi .tx { flex: 1; min-width: 0; }
.ntl-moi .tx .t2 { display: block; font-weight: 400; font-size: .86rem; color: #9a8c68; margin-top: 2px; }
.ntl-moi .chev { color: #bfae82; font-size: 1.3rem; flex: none; }

/* ---------- ấn triện chu sa ---------- */
.ntl-an {
  display: flex; align-items: center; justify-content: center;
  background: #B4372E; color: #fff;
  border-radius: 10px;
  font-weight: 800; line-height: 1;
  box-shadow: 0 6px 14px -8px rgba(120, 30, 20, .95), inset 0 0 0 2px rgba(255, 255, 255, .30);
  flex: none;
}
.ntl-an.sz-lon { width: 62px; height: 62px; font-size: 2.1rem; }
.ntl-an.sz-vua { width: 46px; height: 46px; font-size: 1.55rem; }
.ntl-an.sz-nho { width: 34px; height: 34px; font-size: 1.15rem; border-radius: 8px; }

/* ---------- màn 1 · chọn linh thú ---------- */
.ntl-chon-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.ntl-chon-o {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  min-height: 148px; padding: 14px 10px;
  border: 1px solid var(--border, #e5d9bf); border-radius: 18px;
  background: linear-gradient(180deg, #fffdf7, #f8f0dd);
  font-family: inherit; cursor: pointer; text-align: center;
  transition: transform .14s cubic-bezier(.34, 1.4, .64, 1);
}
.ntl-chon-o:active { transform: scale(.965); }
.ntl-chon-o .ntl-an { transform: rotate(-3deg); }
.ntl-chon-o:nth-child(2n) .ntl-an { transform: rotate(3deg); }
.ntl-chon-o .nm { font-size: 1.06rem; font-weight: 800; color: #4f5c39; }
.ntl-chon-o .lv { font-size: .82rem; color: #8a7f63; line-height: 1.35; }
.ntl-chon-avs { display: flex; align-items: center; }
.ntl-chon-avs .av {
  width: 24px; height: 24px; border-radius: 50%; flex: none; object-fit: cover;
  border: 2px solid #fffbf0; background: linear-gradient(135deg, #b7c27f, #8a9a53);
  color: #fff; font-weight: 800; font-size: .64rem;
  display: flex; align-items: center; justify-content: center;
  margin-left: -8px;
}
.ntl-chon-avs .av:first-child { margin-left: 0; }
.ntl-chon-avs .them {
  width: 24px; height: 24px; border-radius: 50%; flex: none; margin-left: -8px;
  background: #efe6cc; color: #8a7f63; font-size: .64rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid #fffbf0;
}
.ntl-chon-o .cho { font-size: .78rem; font-weight: 800; color: #a08a52; }
.ntl-chon-o.day { opacity: .42; cursor: default; }
.ntl-chon-o.day .cho { color: #b5453f; }
.ntl-chon-o.day:active { transform: none; }

/* ---------- màn 2 · thẻ nhóm ---------- */
.ntl-nhom-top { display: flex; align-items: center; gap: 13px; margin-bottom: 13px; }
.ntl-nhom-top .tn { font-size: 1.3rem; font-weight: 800; color: #4f5c39; line-height: 1.2; }
.ntl-nhom-top .lv { font-size: .88rem; color: #8a7f63; }
.ntl-tv { list-style: none; margin: 0 0 13px; padding: 0; }
.ntl-tv li {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 5px 0;
  border-top: 1px solid #f0e6ce;
}
.ntl-tv li:first-child { border-top: none; }
.ntl-tv .av {
  width: 36px; height: 36px; border-radius: 50%; flex: none; object-fit: cover;
  border: 2px solid #e0d3ae; background: linear-gradient(135deg, #b7c27f, #8a9a53);
  color: #fff; font-weight: 800; font-size: .92rem;
  display: flex; align-items: center; justify-content: center;
}
/* Tên đứng RIÊNG một dòng, nhãn xuống dòng dưới — màn 380px trước đây bóp tên còn "T.." (26/8/2026). */
.ntl-tv .txt { flex: 1; min-width: 0; }
.ntl-tv .nm { display: block; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ntl-tv .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.ntl-tv .nhip { font-size: .68rem; font-weight: 800; color: #8a5a12; background: #fdf1dd; border: 1px solid #e7cf9a; border-radius: 999px; padding: 2px 8px; flex: none; }
.ntl-tt { font-size: .78rem; font-weight: 800; border-radius: 999px; padding: 3px 10px; flex: none; }
.ntl-tt.da-on { color: #3f6b3f; background: #e9f2e4; border: 1px solid #c4ddb9; }
.ntl-tt.chua-on { color: #8a7f63; background: #f4eeda; border: 1px solid #e0d3ae; }
.ntl-tt.nghi-phep { color: #8a6a2e; background: #f7eddb; border: 1px solid #e5cf9d; }

/* chặng tuần */
.ntl-chang { margin-bottom: 13px; }
.ntl-chang .dg { display: flex; align-items: baseline; gap: 7px; font-size: .86rem; color: #8a7f63; margin-bottom: 5px; }
.ntl-chang .dg b { font-size: 1.06rem; color: #4f5c39; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ntl-thanh { height: 12px; border-radius: 999px; background: #ede3c9; overflow: hidden; }
.ntl-thanh > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #8fae5f, #6b7a4f); transition: width .5s ease-out; }
.ntl-nhac { font-size: .88rem; font-weight: 700; color: #8a5a12; margin-top: 7px; }

/* 🎯 việc để lấy nốt số điểm còn thiếu — chỉ đường cho câu "Còn N điểm nữa" (28/8/2026).
   Hàng kiểu iOS: ô icon nền nhạt · hai dòng chữ · nhãn điểm bên phải. Không nút nào tô đậm ở đây —
   nút đậm duy nhất của thẻ vẫn là nút hiệu triệu linh thú phía trên. */
.ntl-lam-gi { display: grid; gap: 8px; margin: 0 0 13px; }
.ntl-lam-gi > .dm { font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: #8a7f63; }
.ntl-viec {
  display: flex; align-items: center; gap: 11px; text-align: left;
  width: 100%; min-height: 60px; padding: 10px 12px;
  border: 1px solid #e2d6b4; border-radius: 16px; cursor: pointer;
  font-family: inherit; background: #fbf6e8;
  box-shadow: 0 6px 14px -12px rgba(60, 70, 25, .8);
  transition: transform .14s cubic-bezier(.34, 1.4, .64, 1);
}
.ntl-viec:active { transform: scale(.975); }
.ntl-viec > .ic {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 11px; font-size: 20px;
  background: #f1e7cd; border: 1px solid #e3d6b2;      /* emoji cần nền NHẠT mới rõ nét */
}
.ntl-viec > .txt { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.ntl-viec > .txt b { font-size: 1rem; font-weight: 800; color: #4f5c39; }
.ntl-viec > .txt i { font-style: normal; font-size: .8rem; color: #8a7f63; }
.ntl-viec > .chev { flex: none; color: #bfae82; font-size: 1.35rem; line-height: 1; padding: 0 2px; }
.ntl-viec > .dm {
  flex: none; font-size: .72rem; font-weight: 800; color: #8a5a12;
  background: #fdf1dd; border: 1px solid #e7cf9a; border-radius: 999px; padding: 4px 9px;
}
@media (max-width: 359px) {
  .ntl-viec > .txt b { font-size: .94rem; }
  .ntl-viec > .dm { padding: 3px 7px; font-size: .68rem; }
}

/* nút */
.ntl-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(60, 70, 25, .95), inset 0 1px 0 rgba(255, 255, 255, .26);
  transition: transform .14s cubic-bezier(.34, 1.4, .64, 1);
}
.ntl-nut:active { transform: scale(.965); }
.ntl-nut.phu { color: #4f5c39; background: #efe6ce; box-shadow: none; border: 1px solid #ddd0ac; }
.ntl-nut[disabled] { opacity: .55; cursor: default; transform: none; }
.ntl-hang-nut { display: flex; gap: 9px; flex-wrap: wrap; }
.ntl-hang-nut > .ntl-nut { flex: 1 1 160px; }

/* ---------- màn 3 · hẹn giờ ---------- */
.ntl-khung { display: grid; gap: 9px; }
.ntl-khung-o {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 60px; padding: 11px 14px;
  border: 1.5px solid var(--border, #e5d9bf); border-radius: 16px;
  background: #fffdf7; font-family: inherit; font-size: 17px; color: var(--ink, #3a2f22);
  cursor: pointer; text-align: left;
}
.ntl-khung-o .gio { font-size: 1.22rem; font-weight: 800; color: #4f5c39; font-variant-numeric: tabular-nums; flex: none; min-width: 68px; }
.ntl-khung-o .ai { flex: 1; min-width: 0; font-size: .88rem; color: #8a7f63; line-height: 1.35; }
.ntl-khung-o .ok { font-size: .8rem; font-weight: 800; color: #3f6b3f; flex: none; }
.ntl-khung-o.da-ghi { border-color: #6b7a4f; background: #f2f7ec; }
.ntl-khung-o .than { flex: 1; min-width: 0; }
.ntl-khung-o .than .ai { display: block; }
.ntl-khung-o .than .nhan-them { display: block; margin-top: 2px; font-size: .78rem; font-weight: 700; color: #a98436; }
/* Giờ do bạn học tự nêu — viền nét đứt để phân biệt ngay với 4 khung cố định của trung tâm. */
.ntl-khung-o.tu-de-xuat { border-style: dashed; border-color: #d9c08a; }
.ntl-khung-o.tu-de-xuat.da-ghi { border-style: solid; border-color: #6b7a4f; }

/* Khung ĐÃ ghi tên có hàng chân riêng: "Đã ghi tên ✓" bên trái, nút xoá bên phải. Trước đây bấm lại
   vào khung là âm thầm bỏ tên — không ai đoán ra, nên nay phải có nút riêng (Zhenyin 1/9/2026). */
.ntl-khung-o { flex-wrap: wrap; }
.ntl-khung-chan {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 9px; padding-top: 9px; border-top: 1px dashed #c7d3a8;
}
.ntl-xoa-ten {
  font-size: .82rem; font-weight: 800; color: #8a3a34; background: #fff;
  border: 1px solid #e0bbb0; border-radius: 999px; padding: 8px 14px; cursor: pointer;
  min-height: 38px; display: inline-flex; align-items: center;
}
.ntl-xoa-ten:active { transform: scale(.95); }

/* Hộp hỏi lại + lời nhắn nhẹ ở đáy màn hình */
.ntl-hoi-icon { font-size: 2.6rem; line-height: 1; }
.ntl-phu .ntl-nut.canh { background: #8a3a34; color: #fff; box-shadow: none; }
.ntl-nhan-nhe {
  position: fixed; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(18px); opacity: 0; z-index: 9996;
  background: #2B2620; color: #f4ecd8; padding: 13px 20px; border-radius: 999px;
  font-size: .92rem; font-weight: 700; max-width: 88vw; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28); transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.ntl-nhan-nhe.hien { opacity: 1; transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) { .ntl-nhan-nhe { transition: none; } }

/* ---------- 🐉 nút vào phòng gọi của nhóm (phong cách iOS) ---------- */
.ntl-goi { margin-top: 13px; }
/* Nút hành động CHÍNH của thẻ nhóm: thẻ bo góc lớn kiểu iOS, nền chuyển sắc theo linh thú,
   bóng đổ hai lớp cho nổi khỏi nền kem, nảy nhẹ khi bấm. */
.ntl-goi-nut {
  display: flex; align-items: center; gap: 13px;
  width: 100%; min-height: 66px; padding: 12px 16px;
  border: none; border-radius: 20px; cursor: pointer; text-align: left;
  font-family: inherit; color: #fff;
  background: linear-gradient(135deg, #6b7a4f, #4f5c39);
  box-shadow: 0 6px 16px rgba(79, 92, 57, .28), inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.ntl-goi-nut:active { transform: scale(.975); box-shadow: 0 3px 9px rgba(79, 92, 57, .3); }
@media (hover: hover) { .ntl-goi-nut:hover { filter: brightness(1.06); } }
/* Icon linh thú là NÚT RIÊNG lồng trong nút gọi — bấm vào chỉ diễn hoạt ảnh + kêu tiếng, không mở phòng.
   `overflow:visible` để ngọn lửa của Kỳ Lân phun được ra ngoài ô. */
.ntl-goi-nut .ic {
  position: relative; overflow: visible;
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 14px; font-size: 25px; line-height: 1;
  border: none; padding: 0; cursor: pointer; font-family: inherit;
  background: rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
  transition: transform .14s ease, background .14s ease;
}
@media (hover: hover) { .ntl-goi-nut .ic:hover { background: rgba(255, 255, 255, .3); transform: scale(1.06); } }
.ntl-goi-nut .ic:active { transform: scale(.9); }
.ntl-goi-nut .ic .hinh { display: block; line-height: 1; transform-origin: 50% 60%; }
/* Ngọn lửa phun CHÉCH LÊN, không phun ngang — phun ngang thì nó nằm đè lên đúng dòng chữ
   "Kỳ Lân xuất thế" (đã nhìn ảnh chụp thật mới thấy). z-index để lửa nổi trên chữ khi có giao nhau. */
.ntl-goi-nut .ic .lua {
  position: absolute; left: 100%; top: 12%; margin-left: -6px; z-index: 2;
  font-size: 20px; line-height: 1; opacity: 0; transform: translate(-2px, 0) scale(.3);
  pointer-events: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35));
}

/* ---------- bốn kiểu cựa mình (chỉ chạy khi có class .dien) ---------- */
/* 🐉 Rồng cuộn mình bay lượn: lượn hình sin, thân nghiêng theo hướng bay, phóng to dần rồi về chỗ. */
@keyframes ntlLong {
  0%   { transform: translate(0,0) rotate(0) scale(1); }
  18%  { transform: translate(6px,-7px) rotate(-14deg) scale(1.22); }
  38%  { transform: translate(-6px,-11px) rotate(12deg) scale(1.3); }
  58%  { transform: translate(7px,-6px) rotate(-10deg) scale(1.26); }
  78%  { transform: translate(-4px,-3px) rotate(7deg) scale(1.14); }
  100% { transform: translate(0,0) rotate(0) scale(1); }
}
/* 🦚 Phượng tung cánh: bung ngang hai lần (đập cánh) rồi bốc lên, hơi ngửa đầu. */
@keyframes ntlPhuong {
  0%   { transform: translateY(0) scale(1,1) rotate(0); }
  14%  { transform: translateY(-2px) scale(1.42,.82) rotate(-5deg); }
  30%  { transform: translateY(-9px) scale(.86,1.28) rotate(4deg); }
  46%  { transform: translateY(-4px) scale(1.4,.86) rotate(-4deg); }
  64%  { transform: translateY(-13px) scale(.9,1.3) rotate(3deg); }
  82%  { transform: translateY(-5px) scale(1.12,1.02) rotate(0); }
  100% { transform: translateY(0) scale(1,1) rotate(0); }
}
/* 🦄 Kỳ Lân phun lửa: hất đầu ra sau lấy đà rồi chồm tới, rung nhẹ suốt lúc phun. */
@keyframes ntlLan {
  0%   { transform: translateX(0) rotate(0) scale(1); }
  16%  { transform: translateX(-5px) rotate(-12deg) scale(1.08); }
  30%  { transform: translateX(4px) rotate(9deg) scale(1.2); }
  44%  { transform: translateX(3px) rotate(7deg) scale(1.18); }
  58%  { transform: translateX(4px) rotate(9deg) scale(1.18); }
  74%  { transform: translateX(2px) rotate(5deg) scale(1.1); }
  100% { transform: translateX(0) rotate(0) scale(1); }
}
/* Ngọn lửa: bùng ra khỏi ô rồi tan. */
@keyframes ntlLua {
  0%   { opacity: 0;   transform: translate(-2px, 0) scale(.25) rotate(-10deg); }
  24%  { opacity: 1;   transform: translate(4px, -7px) scale(1.15) rotate(6deg); }
  60%  { opacity: .95; transform: translate(11px, -15px) scale(1.35) rotate(14deg); }
  100% { opacity: 0;   transform: translate(19px, -25px) scale(.7) rotate(20deg); }
}
/* 🐢 Rùa ẩn hiện: rụt vào (nhỏ lại + mờ đi) rồi ló ra, nhô lên một nhịp. */
@keyframes ntlQuy {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  26%  { opacity: .12; transform: translateY(5px) scale(.55); }
  46%  { opacity: 0;   transform: translateY(6px) scale(.42); }
  62%  { opacity: .25; transform: translateY(3px) scale(.7); }
  80%  { opacity: 1;   transform: translateY(-4px) scale(1.16); }
  100% { opacity: 1;   transform: translateY(0) scale(1); }
}
.ntl-goi-nut .ic.dien.lt-long   .hinh { animation: ntlLong 1.15s cubic-bezier(.34,.6,.4,1) both; }
.ntl-goi-nut .ic.dien.lt-phuong .hinh { animation: ntlPhuong .95s cubic-bezier(.3,.7,.35,1) both; }
.ntl-goi-nut .ic.dien.lt-lan    .hinh { animation: ntlLan 1s cubic-bezier(.3,.7,.35,1) both; }
.ntl-goi-nut .ic.dien.lt-lan    .lua  { animation: ntlLua .85s ease-out .16s both; }
.ntl-goi-nut .ic.dien.lt-quy    .hinh { animation: ntlQuy 1.05s ease-in-out both; }
/* Máy đặt "giảm chuyển động" → tắt sạch hoạt ảnh; tiếng linh thú vẫn giữ. */
@media (prefers-reduced-motion: reduce) {
  .ntl-goi-nut .ic.dien .hinh, .ntl-goi-nut .ic.dien .lua { animation: none; }
}
.ntl-goi-nut .tx { flex: 1; min-width: 0; }
.ntl-goi-nut .tx .d1 { display: block; font-size: 1.06rem; font-weight: 800; line-height: 1.25; letter-spacing: .2px; }
.ntl-goi-nut .tx .d2 { display: block; margin-top: 2px; font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .8); line-height: 1.3; }
.ntl-goi-nut .mt { flex: none; font-size: 1.4rem; font-weight: 700; color: rgba(255, 255, 255, .72); }
/* Mỗi linh thú một sắc riêng — vẫn giữ tông trầm nền nã, không loè loẹt. */
.ntl-goi-nut.lt-long    { background: linear-gradient(135deg, #b8863b, #8a5f22); box-shadow: 0 6px 16px rgba(138, 95, 34, .3), inset 0 1px 0 rgba(255, 255, 255, .24); }
.ntl-goi-nut.lt-phuong  { background: linear-gradient(135deg, #c4553f, #96331f); box-shadow: 0 6px 16px rgba(150, 51, 31, .3), inset 0 1px 0 rgba(255, 255, 255, .24); }
.ntl-goi-nut.lt-quy     { background: linear-gradient(135deg, #4f6f63, #33534a); box-shadow: 0 6px 16px rgba(51, 83, 74, .3), inset 0 1px 0 rgba(255, 255, 255, .24); }
.ntl-goi-nut.lt-lan     { background: linear-gradient(135deg, #7a6aa6, #544880); box-shadow: 0 6px 16px rgba(84, 72, 128, .3), inset 0 1px 0 rgba(255, 255, 255, .24); }

.ntl-goi-doi {
  display: block; margin: 7px auto 0; padding: 6px 12px; min-height: 34px;
  border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: .82rem; font-weight: 700; color: #8a7f63; text-decoration: underline;
}
.ntl-goi-dan { margin-top: 10px; padding: 12px; border: 1.5px dashed #ddceab; border-radius: 16px; background: #fffdf7; }
.ntl-goi-dan .tieu { font-size: .9rem; font-weight: 700; color: #6d6144; margin-bottom: 9px; line-height: 1.35; }
.ntl-goi-dan .lk {
  width: 100%; box-sizing: border-box; min-height: 52px; padding: 9px 12px;
  border: 1.5px solid var(--border, #e5d9bf); border-radius: 14px; background: #fff;
  font-family: inherit; font-size: .95rem; color: #3a2f22;
}
/* Màn hẹp thì hai nút xuống hai hàng — không để chúng tranh nhau trong MỘT hàng flex. */
.ntl-goi-dan .hang { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 9px; }
.ntl-goi-dan .hang > * { flex: 1 1 150px; min-height: 50px; }
.ntl-goi-dan .hang a.ntl-nut { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.ntl-goi-loi { margin-top: 9px; font-size: .88rem; font-weight: 700; color: #b4372e; line-height: 1.4; }

/* ---------- ô tự đề xuất một giờ ôn ---------- */
.ntl-dx { margin-top: 11px; padding: 12px; border: 1.5px dashed #ddceab; border-radius: 16px; background: #fffdf7; }
.ntl-dx .tieu { font-size: .9rem; font-weight: 700; color: #6d6144; margin-bottom: 9px; line-height: 1.35; }
/* Màn hẹp thì ô giờ và nút xuống hai hàng — không để chúng tranh nhau trong MỘT hàng flex. */
.ntl-dx .hang { display: flex; flex-wrap: wrap; gap: 9px; }
.ntl-dx .gio-nhap {
  flex: 1 1 130px; min-width: 120px; min-height: 52px; padding: 9px 12px;
  border: 1.5px solid var(--border, #e5d9bf); border-radius: 14px; background: #fff;
  font-family: inherit; font-size: 1.16rem; font-weight: 800; color: #4f5c39;
  font-variant-numeric: tabular-nums;
}
.ntl-dx .dx-nut { flex: 1 1 150px; min-height: 52px; }
.ntl-dx-loi { margin-top: 9px; font-size: .88rem; font-weight: 700; color: #b4372e; line-height: 1.4; }
.ntl-dx-day { margin-top: 11px; padding: 11px 13px; border-radius: 14px; background: #f6f1e2; font-size: .88rem; color: #8a7f63; line-height: 1.45; }

/* ---------- tường nhóm (KHU 4) ---------- */
.ntl-tuong-hang {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 12px; margin-bottom: 9px;
  border: 1px solid var(--border, #e5d9bf); border-radius: 16px;
  background: #fffdf7;
}
.ntl-tuong-hang.cua-toi { border: 2.5px solid #6b7a4f; background: #f7fbf1; }
.ntl-tuong-hang .than { flex: 1; min-width: 0; }
.ntl-tuong-hang .d1 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ntl-tuong-hang .tn { font-size: 1.06rem; font-weight: 800; color: #4f5c39; }
.ntl-tuong-hang .dm { margin-left: auto; font-size: 1.16rem; font-weight: 800; color: #6b7a4f; font-variant-numeric: tabular-nums; }
.ntl-son {
  font-size: .68rem; font-weight: 800; letter-spacing: .05em;
  color: #fff; background: #B4372E; border-radius: 999px; padding: 3px 10px;
}
.ntl-tuong-hang .so3 { font-size: .84rem; color: #8a7f63; margin-top: 3px; }
.ntl-tuong-hang .so3 b { color: #5a6436; font-variant-numeric: tabular-nums; }
.ntl-truc { display: flex; gap: 5px; margin-top: 8px; }
.ntl-truc > span { flex: 1; height: 7px; border-radius: 999px; background: #ede3c9; overflow: hidden; }
.ntl-truc > span > i { display: block; height: 100%; background: #8fae5f; border-radius: 999px; }
.ntl-avs { display: flex; gap: 5px; margin-top: 9px; flex-wrap: wrap; }
.ntl-avs .av {
  width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
  border: 1.5px solid #e0d3ae; background: linear-gradient(135deg, #b7c27f, #8a9a53);
  color: #fff; font-weight: 800; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
}
.ntl-avs .av.im { opacity: .42; }
.ntl-tt-nhac { font-size: .84rem; font-weight: 700; color: #8a5a12; margin-top: 6px; }

/* dải trung tâm */
.ntl-tt-dai { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e0d3ae; }
.ntl-tt-dai .dm-hd { font-size: .84rem; font-weight: 800; color: #a08a52; margin-bottom: 8px; }
.ntl-tt-dai ul { list-style: none; margin: 0; padding: 0; }
.ntl-tt-dai li { display: flex; align-items: center; gap: 9px; min-height: 40px; font-size: .92rem; color: #5a5140; border-top: 1px solid #f0e6ce; padding: 4px 0; }
.ntl-tt-dai li:first-child { border-top: none; }
.ntl-tt-dai li .lop { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8a7f63; font-size: .84rem; }

/* ---------- lớp phủ (nhắc giờ · ôn một mình) ---------- */
.ntl-phu {
  position: fixed; inset: 0; z-index: 9994;
  background: #2B2620; color: #f4ecd8;
  display: flex; align-items: center; justify-content: center;
  padding: 22px; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}
.ntl-phu-hop {
  width: min(440px, 100%); margin: auto; text-align: center;
  animation: ntlVao .3s cubic-bezier(.34, 1.4, .64, 1);
}
@keyframes ntlVao { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.ntl-phu-hop h3 { margin: 14px 0 6px; font-size: 1.4rem; color: #fff; }
.ntl-phu-hop .ph { font-size: 17px; color: #cfc3a6; line-height: 1.55; margin-bottom: 20px; }
.ntl-phu-hop .ntl-an { margin: 0 auto; }
/* Hai nút LUÔN NGANG HÀNG (yêu cầu bàn giao mục 3.3) — kể cả màn hẹp 380px. */
.ntl-phu-nut { display: flex; gap: 10px; align-items: stretch; }
.ntl-phu-nut > button { flex: 1 1 0; min-width: 0; min-height: 56px; font-size: 16px; }
/* Nút phụ NẰM TRONG lớp phủ tối phải đổi tông — nền kem của bản dùng trong trang đọc chói trên nền #2B2620. */
.ntl-phu .ntl-nut.phu { background: rgba(255, 255, 255, .12); color: #f4ecd8; border: 1px solid rgba(255, 255, 255, .26); }

/* ôn một mình */
.ntl-on-chu { font-size: 3.2rem; font-weight: 800; color: #fff; line-height: 1.1; margin: 6px 0 4px; }
.ntl-on-dap { display: grid; gap: 9px; margin-top: 14px; }
.ntl-on-dap button {
  min-height: 56px; padding: 12px 14px; border-radius: 15px; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 700;
  background: rgba(255, 255, 255, .10); color: #f4ecd8; border: 1px solid rgba(255, 255, 255, .24);
}
.ntl-on-dap button.dung { background: #4f7a4f; border-color: #4f7a4f; color: #fff; }
.ntl-on-dap button.sai { background: #8a3a34; border-color: #8a3a34; color: #fff; }
.ntl-on-dem { font-size: .86rem; color: #a99b78; margin-top: 12px; font-variant-numeric: tabular-nums; }

@media (max-width: 380px) {
  .ntl-chon-o { min-height: 138px; }
  .ntl-khung-o .gio { min-width: 60px; font-size: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ntl-phu-hop { animation: none; }
  .ntl-nut, .ntl-chon-o { transition: none; }
  .ntl-thanh > i { transition: none; }
}

/* 🐉 Nút "Cả nhóm cùng ôn" — sáng lên (vàng đất) khi trong nhóm đang có người ôn, để ba người còn
   lại nhìn là thấy ngay mà vào cùng. Tắt đèn thì về nút chính bình thường. */
.ntl-nut.ntl-on-sang {
  background: linear-gradient(180deg, #d8a33d, #b4791d);
  color: #fff;
  box-shadow: 0 8px 18px -10px rgba(140, 92, 20, .9), inset 0 1px 0 rgba(255, 255, 255, .3);
}

/* ---------- 🕵️ giám sát sống (chỉ Hồ sơ TEST thấy) ---------- */
.ntl-gs-select {
  width: 100%; min-height: 52px; padding: 10px 14px;
  border: 1.5px solid var(--border, #e5d9bf); border-radius: 16px;
  background: #fffdf7; font-family: inherit; font-size: 16px; color: var(--ink, #3a2f22);
}
.ntl-gs-lop { font-weight: 800; font-size: 1rem; color: #4f5c39; margin-bottom: 10px; }
.ntl-gs-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.ntl-gs-top .ntl-gs-lop { margin-bottom: 0; }
.ntl-gs-top .ntl-nut { min-height: 40px; padding: 0 14px; font-size: .86rem; }
.ntl-gs-block { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border, #e5d9bf); }
.ntl-gs-block-hd { font-weight: 800; font-size: .92rem; color: #6b5f3e; margin-bottom: 8px; }
.ntl-gs-cau { font-size: 1.05rem; font-weight: 700; color: var(--ink, #3a2f22); margin-bottom: 10px; }
.ntl-gs-lan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ntl-gs-lan li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ntl-gs-lan .nm { font-weight: 700; min-width: 84px; }
.ntl-gs-lan .tt { font-size: .84rem; color: #8a7f63; margin-left: auto; }
.ntl-gs-lan .ntl-thanh.nho { flex-basis: 100%; height: 8px; }

/* ================= 🎓 THANH CHUYỂN LỚP (chỉ hiện với học viên học ≥2 lớp) =================
   Sự cố 4/9/2026: BÙI THỊ NHUNG học CẢ Sơ cấp A1 lẫn A2. Quản trị xếp cô vào 鳳 của A1 nhưng Cổng
   học viên xưa nay chỉ biết LỚP ĐẦU danh sách (A2) nên cô vẫn thấy màn "Chọn một linh thú" và tưởng
   chưa được xếp. Nay mỗi lớp một chỗ đứng riêng (xem khoaTvLop trong shared/nhom.mjs) và đây là chỗ
   chạm để đổi lớp.
   ⚠️ Người chỉ học MỘT lớp KHÔNG bao giờ thấy thanh này — trình duyệt tự bỏ qua khi mảng có 1 phần tử.
   Kiểu iOS: viên thuốc trong rãnh, mục đang chọn nổi trắng có bóng. `:hover` bọc trong media query
   theo luật chung của dự án (chống dính màu trên điện thoại). */
.ntl-lop-thanh {
  display: flex; gap: 6px; padding: 4px; margin: 0 0 12px;
  background: #f2e9d4; border-radius: 999px;
}
.ntl-lop-thanh > button {
  flex: 1 1 0; min-width: 0; min-height: 44px;      /* ≥44px: vùng chạm cho học viên lớn tuổi */
  border: 0; border-radius: 999px; padding: 8px 10px;
  font-family: inherit; font-size: .95rem; font-weight: 700; color: #8a7c5f;
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .18s ease, color .18s ease, transform .12s ease;
}
.ntl-lop-thanh > button .ten {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ntl-lop-thanh > button.on {
  background: #fffdf7; color: #4a6b3a;
  box-shadow: 0 1px 5px rgba(80, 60, 20, .18);
}
.ntl-lop-thanh > button:active { transform: scale(.97); }
.ntl-lop-thanh > button[disabled] { opacity: .55; cursor: default; }
@media (hover: hover) {
  .ntl-lop-thanh > button:not(.on):not([disabled]):hover { color: #5f5033; }
}
/* Chấm vàng = "lớp này bạn đã có nhóm rồi" — để nhìn một cái là biết bên kia còn trống hay không. */
.ntl-lop-thanh .cham {
  width: 7px; height: 7px; border-radius: 50%; background: #c9922a; flex: none;
}
.ntl-lop-tat { font-size: .92rem; color: #8a7c5f; padding: 4px 2px 2px; }

/* 🐉 Khối trợ giảng + Thiên Ngữ Quần Hùng (BAN-GIAO-TU-LINH-TRO-GIANG.md §9.1/9.2) — chèn giữa header
   và danh sách thành viên của thẻ nhóm. Ba trạng thái dùng chung khung `.ntl-tg-hop`. */
.ntl-tg-khoi { margin: 2px 0 13px; }
.ntl-tg-hop {
  padding: 12px; border-radius: 14px; background: #fffdf7;
  border: 1.5px solid #e0d3ae; display: flex; flex-direction: column; gap: 8px;
}
.ntl-tg-hop.chua-pc { border-style: dashed; border-color: #e3b9a8; background: #fdf3ee; }
.ntl-tg-hop .hang { display: flex; align-items: center; gap: 10px; }
.ntl-tg-hop .d1 { font-size: 1.02rem; font-weight: 800; color: #4f5c39; }
.ntl-tg-hop .d1.son { color: #a8452f; }
.ntl-tg-hop .d2 { font-size: .85rem; color: #8a7f63; }
.ntl-tg-hop .ten { font-size: 1.05rem; font-weight: 800; color: #3a2f22; }
.ntl-tg-hop.quan-hung { background: #fdf1dd; border-color: #e7cf9a; }
.ntl-tg-hop .nhan-qh {
  display: inline-block; align-self: flex-start; font-size: .74rem; font-weight: 800;
  letter-spacing: .04em; color: #fff; background: #a8452f; border-radius: 999px; padding: 3px 10px;
}
.ntl-tg-hop .qh-cum { align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.ntl-tg-hop .qh-nhom { display: flex; flex-direction: column; gap: 6px; }
.ntl-tg-hop .qh-cheo { font-size: 1.1rem; font-weight: 800; color: #b8863b; align-self: center; }
.ntl-tg-hop .av.nho {
  width: 26px; height: 26px; border-radius: 50%; flex: none; object-fit: cover; margin-left: -6px;
  border: 2px solid #fffdf7; background: linear-gradient(135deg, #b7c27f, #8a9a53);
  color: #fff; font-weight: 800; font-size: .68rem; display: flex; align-items: center; justify-content: center;
}
.ntl-tg-hop .av.nho:first-child { margin-left: 0; }
.ntl-tg-vao {
  align-self: flex-start; min-height: 44px; padding: 10px 18px; border-radius: 999px;
  background: linear-gradient(135deg, #7a8c47, #5b7a2a); color: #fff; font-weight: 800;
  border: none; font-size: .95rem;
}
.ntl-tg-vao[disabled] { opacity: .7; }
.ntl-tg-vao:active { transform: scale(.97); }
@media (hover: hover) { .ntl-tg-vao:hover { filter: brightness(1.06); } }

/* 🗓️ Trưởng nhóm đề xuất giờ họp (khối trợ giảng, "Chiến Thư hẹn giờ") */
.ntl-tg-dx { padding: 8px 0 0; }
.ntl-tg-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.ntl-tg-gio {
  font: inherit; font-size: 16px; padding: 9px 10px; border-radius: 10px;
  border: 1.5px solid #e0d3ae; background: #fff; color: #3a2f22; flex: 1 1 200px; min-width: 0;
}
.ntl-toi-toi { align-self: flex-start; }

/* 🐉 HỘP NHẮC "Buổi Tứ Linh đang mở" — PHỦ KÍN MÀN HÌNH, RIÊNG với #gvl-phu của goi-vao-lop.js (§14,
   docs/tu-linh-tro-giang.md). Mượn Y NGUYÊN bố cục #gvl-hop (card giữa màn + đồng hồ đếm to + nút
   chính/nút hoãn), đổi sang xanh ô-liu + viền hổ phách "đang mở" thay vì xanh dương của lớp chính
   khoá. z-index thấp hơn #gvl-phu (9500) — kịch bản hai bên cùng hiện một khắc là không thể vì JS đã
   tự nhường (dò DOM, xem tlgGoiVaoLopBanRon), giữ thấp hơn chỉ để chắc chắn tuyệt đối. */
.ntl-tlg-phu {
  position: fixed; inset: 0; z-index: 9300; background: rgba(40, 32, 18, .62); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.ntl-tlg-hop {
  width: 100%; max-width: 400px; max-height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #fffaf0; border: 2px solid #e0a52e; border-radius: 26px; padding: 22px 18px 16px;
  text-align: center; font-family: inherit;
  box-shadow: 0 0 0 6px rgba(224, 165, 46, .18), 0 24px 50px -12px rgba(0, 0, 0, .55);
}
.ntl-tlg-ic { font-size: 2.5rem; line-height: 1; margin-bottom: 6px; }
.ntl-tlg-nhan { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: #b57e12; }
.ntl-tlg-hop h3 { margin: 6px 0 2px; font-size: 1.3rem; color: #41571f; letter-spacing: -.3px; line-height: 1.32; font-weight: 800; }
.ntl-tlg-lop { font-size: .95rem; color: #6d6250; }
.ntl-tlg-dem { margin: 12px 0 4px; font-size: 2.5rem; font-weight: 800; color: #b57e12; font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1; }
.ntl-tlg-deml { font-size: .8rem; color: #8a7f6a; margin-bottom: 14px; }
.ntl-tlg-cta {
  width: 100%; min-height: 56px; padding: 17px; border: none; border-radius: 16px; font-family: inherit;
  font-weight: 800; font-size: 1.18rem; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #8fa45f, #41571f); box-shadow: 0 10px 20px -8px rgba(65, 87, 31, .6);
  transition: transform .12s ease;
}
.ntl-tlg-cta:active { transform: scale(.965); }
.ntl-tlg-hoan {
  display: block; width: 100%; margin-top: 11px; background: none; border: none; font-family: inherit;
  font-size: .95rem; color: #9a8c66; text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer; padding: 10px 6px; min-height: 44px;
}
.ntl-tlg-nhac { margin-top: 5px; font-size: .75rem; color: #a89c82; }
@media (hover: hover) { .ntl-tlg-hoan:hover { color: #7a6d4e; } }
/* 🌙 Hộp "Mời bạn sang Bàn N" — dùng lại khung hộp Lời gọi, thêm danh sách bước + nút phụ. */
.ntl-cban-buoc { text-align: left; margin: 12px 0 14px; padding-left: 22px; font-size: .98rem; line-height: 1.5; color: #4d4535; }
.ntl-cban-buoc li { margin: 4px 0; }
.ntl-cban-phu2 {
  width: 100%; min-height: 52px; margin-top: 10px; padding: 14px; border-radius: 16px; font-family: inherit;
  font-weight: 700; font-size: 1.05rem; color: #41571f; background: #fff; border: 2px solid #b9c58f; cursor: pointer;
  transition: transform .12s ease;
}
.ntl-cban-phu2:active { transform: scale(.965); }