/* 🫱 NHỊP NHÓM — Cổng học viên. Xem BAN-GIAO-nhip-nhom.md + xem-truoc-nhip-nhom.html.
   Màu · kích thước · khoảng cách lấy NGUYÊN từ bản xem trước Zhenyin đã duyệt (bản đó là CHUẨN).
   Dùng lại nền kem / xanh ô-liu / thẻ vàng / phông có chân của Cổng học viên — KHÔNG dựng ngôn ngữ
   thiết kế thứ hai (nhom-tu-linh.css là anh em cùng nhà).
   Học viên trung niên: vùng chạm ≥44px, nút chính cao ≥48px. */

.nn-wrap {
  --nn-kem: #FBF6E6;
  --nn-kem-sau: #F4ECD6;
  --nn-muc: #2E2A20;
  --nn-muc-nhat: #6B6252;
  --nn-oliu: #55702F;
  --nn-oliu-dam: #41571F;
  --nn-vien: #E2D7B8;
  --nn-vang-mut: #8A6A1C;
  --nn-do-nhac: #A8452F;
  color: var(--nn-muc);
  font-size: 17px;
}

/* ---------- thẻ chung ---------- */
.nn-the {
  background: #FFFDF4; border: 1px solid var(--nn-vien); border-radius: 16px;
  padding: 14px 14px 13px; margin-bottom: 12px;
}
.nn-the.dam { background: var(--nn-kem-sau); }
.nn-the h3 { margin: 0 0 3px; font-size: 16px; font-weight: 700; }
.nn-mota { margin: 0; font-size: 13px; color: var(--nn-muc-nhat); line-height: 1.55; }
.nn-mota b { font-weight: 700; color: #4E4636; }
.nn-eyebrow {
  font-size: 11px; letter-spacing: 1.6px; color: var(--nn-vang-mut);
  font-weight: 700; text-transform: uppercase; margin: 0 0 6px;
}
.nn-hd-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11.5px; color: #8C8471; margin-bottom: 10px; letter-spacing: .4px;
}
.nn-hd-top span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- dải nhịp 7 ngày ---------- */
.nn-nhip { display: flex; gap: 5px; margin: 12px 0 4px; }
.nn-nhip .o {
  flex: 1; min-width: 0; text-align: center; padding: 7px 0 6px; border-radius: 9px;
  background: #F1E9D3; border: 1px solid #E5DABB;
  font-size: 11px; color: #7E7663; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis;
}
.nn-nhip .o b { display: block; font-size: 12.5px; color: #5F5744; font-weight: 700; }
.nn-nhip .o.xong { background: #E6EFD8; border-color: #C9DCB0; color: #4F6B2A; }
.nn-nhip .o.xong b { color: var(--nn-oliu-dam); }
.nn-nhip .o.nay { background: var(--nn-oliu); border-color: var(--nn-oliu-dam); color: #EDF3E2; }
.nn-nhip .o.nay b { color: #fff; }
.nn-nhip-chu { font-size: 11.5px; color: #8C8471; text-align: center; margin: 7px 0 0; }

/* ---------- nút ---------- */
.nn-nut {
  display: block; width: 100%; border: 0; border-radius: 13px;
  padding: 14px; font-family: inherit; font-size: 15.5px; font-weight: 700;
  background: var(--nn-oliu); color: #FCFBF3; cursor: pointer; text-align: center;
  box-shadow: 0 2px 0 var(--nn-oliu-dam); min-height: 48px;
}
.nn-nut:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--nn-oliu-dam); }
.nn-nut.phu { background: var(--nn-kem-sau); color: #4E4636; box-shadow: 0 2px 0 #DED2B2; }
/* Nút phụ ĐẶT TRONG thẻ nền kem đậm: nền hai bên trùng nhau nên nút "biến mất" — đổi sang nền sáng
   + viền rõ. (Kính mờ / nền gần nhau là bẫy đã ghi trong CLAUDE.md mục "Giao diện & bố cục".) */
.nn-the.dam .nn-nut.phu { background: #FFFDF4; border: 1px solid var(--nn-vien); box-shadow: 0 2px 0 #E7DCBD; }
.nn-nut.nho { padding: 10px 12px; font-size: 13.5px; border-radius: 11px; min-height: 44px; }
.nn-nut[disabled] { opacity: .55; cursor: default; transform: none; }
/* Nút đang HỎI LẠI (kết buổi · làm lại từ đầu): đổi sang tông mứt vàng để thấy rõ đây là một câu hỏi,
   bấm lần nữa mới chạy thật. Tự trở về sau 5 giây. */
.nn-nut.dang-hoi { background: #F0D48A; color: #4A3A08; box-shadow: 0 2px 0 #C9982A; }
.nn-the.dam .nn-nut.phu.dang-hoi { background: #F0D48A; color: #4A3A08; border-color: #C9982A; }
/* Thẻ có link (nút vào phòng gọi) — <a> không có kiểu nút sẵn như <button>. */
a.nn-nut { text-decoration: none; justify-content: center; }
.nn-hang-nut { display: flex; gap: 8px; margin-top: 10px; }
.nn-hang-nut .nn-nut { margin: 0; }

/* ---------- thành viên + pill ---------- */
.nn-tv { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid #EDE3C9; }
.nn-tv:last-child { border-bottom: 0; }
.nn-av {
  width: 38px; height: 38px; border-radius: 50%; flex: 0 0 38px; object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, #9AAE72, #6B8342);
  border: 2px solid #fff; box-shadow: 0 0 0 1px #DFD4B4;
}
.nn-av.b2 { background: linear-gradient(140deg, #C7A15E, #9A7226); }
.nn-av.b3 { background: linear-gradient(140deg, #8FA9B8, #5A7A8C); }
.nn-av.b4 { background: linear-gradient(140deg, #C08D8D, #9A5E5E); }
.nn-av.nho { width: 32px; height: 32px; flex: 0 0 32px; font-size: 13px; }
.nn-tv .ten { font-size: 14px; font-weight: 700; flex: 1; min-width: 0; line-height: 1.3; }
.nn-tv .ten small { display: block; font-weight: 400; font-size: 11.5px; color: #8C8471; margin-top: 2px; }
.nn-pill {
  display: inline-block; font-size: 11px; padding: 3px 9px; border-radius: 999px; flex: none;
  border: 1px solid var(--nn-vien); background: #F6F0DE; color: #7A7263; white-space: nowrap;
}
.nn-pill.xong { background: #E6EFD8; border-color: #C4D8A8; color: #41571F; }
.nn-pill.cho { background: #F7EBD6; border-color: #E6CE9E; color: #8A6A1C; }
.nn-pill.nhip { background: #FFF6DF; border-color: #E9CE92; color: #8A6A1C; font-weight: 700; }

/* ---------- thanh tiến độ ---------- */
.nn-tien { height: 9px; border-radius: 99px; background: #E7DCBD; overflow: hidden; margin: 9px 0 0; }
.nn-tien i { display: block; height: 100%; background: linear-gradient(90deg, #7E9A4E, #4F6B2A); }

/* ---------- giao ước ghim ---------- */
.nn-giao-uoc { border: 2px solid #E0C78F; background: #FFF8E6; border-radius: 14px; padding: 12px; margin-bottom: 12px; }
.nn-giao-uoc .nn-eyebrow { margin-bottom: 4px; }
.nn-giao-uoc p { margin: 0; font-size: 14px; line-height: 1.55; font-weight: 700; }

/* ---------- mảnh ghép ---------- */
.nn-manh { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.nn-o-manh { border: 1px solid var(--nn-vien); border-radius: 13px; padding: 10px 10px 9px; background: #FFFDF4; text-align: left; }
.nn-o-manh.xong { background: #EFF4E5; border-color: #C4D8A8; }
.nn-o-manh.cua-toi { border: 2px solid var(--nn-oliu); background: #F7F9F0; }
.nn-o-manh .linh { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 5px; }
.nn-o-manh .tu { font-size: 11.5px; color: #8C8471; margin-top: 4px; line-height: 1.5; word-break: break-word; }
.nn-o-manh .tt { font-size: 11px; margin-top: 6px; color: var(--nn-oliu-dam); font-weight: 700; }
.nn-o-manh .tt.cho { color: var(--nn-vang-mut); }
.nn-mo { opacity: .55; }

/* ---------- ghi âm ---------- */
.nn-ghiam {
  border: 1px dashed #D9C99A; border-radius: 14px; background: #FFFBEE;
  padding: 14px; text-align: center; margin-top: 10px;
}
.nn-ghiam .cham {
  width: 52px; height: 52px; border-radius: 50%; background: var(--nn-do-nhac); margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center; font-size: 23px; color: #fff;
  box-shadow: 0 0 0 6px rgba(168, 69, 47, .13); border: 0; cursor: pointer;
}
.nn-ghiam .cham.dang { animation: nnDap 1s infinite; }
@keyframes nnDap { 0%, 100% { box-shadow: 0 0 0 6px rgba(168, 69, 47, .13); } 50% { box-shadow: 0 0 0 12px rgba(168, 69, 47, .22); } }
.nn-ghiam p { margin: 0; font-size: 12.5px; color: #8C8471; }
.nn-song { display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 26px; margin: 9px 0 4px; }
.nn-song i { width: 3px; border-radius: 2px; background: #B8A46E; display: block; height: 4px; transition: height .12s linear; }

/* ---------- thư thoại ---------- */
.nn-thoai {
  display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--nn-vien);
  border-radius: 14px; background: #FFFDF4; margin-bottom: 8px;
}
.nn-thoai.chua { opacity: .6; border-style: dashed; }
.nn-thoai .play {
  width: 36px; height: 36px; border-radius: 50%; background: var(--nn-oliu); color: #fff; flex: 0 0 36px;
  display: flex; align-items: center; justify-content: center; font-size: 13px; border: 0; cursor: pointer;
}
.nn-thoai .play[disabled] { background: #D8CEB0; cursor: default; }
.nn-thoai .noi { flex: 1; min-width: 0; }
.nn-thoai .noi b { font-size: 13.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nn-thoai .noi span { font-size: 11.5px; color: #8C8471; }
.nn-icon-hang { display: flex; gap: 4px; flex: none; }
.nn-ic {
  font-size: 13px; border: 1px solid var(--nn-vien); background: #F6F0DE; border-radius: 999px;
  padding: 6px 9px; color: #7A7263; cursor: pointer; font-family: inherit; min-height: 32px;
}
.nn-ic.chon { background: #E6EFD8; border-color: #C4D8A8; }

/* ---------- ô nhập + khuôn câu ---------- */
.nn-o-nhap {
  border: 1px solid var(--nn-vien); border-radius: 13px; background: #FFFDF4; padding: 11px 12px;
  font-size: 13px; color: #4E4636; margin-top: 8px; line-height: 1.5; min-height: 60px;
  width: 100%; font-family: inherit; resize: vertical; box-sizing: border-box;
}
.nn-mau-cau {
  font-size: 11.5px; color: #8C8471; background: var(--nn-kem-sau); border-radius: 10px; padding: 8px 10px;
  margin-top: 8px; line-height: 1.6;
}
.nn-mau-cau em { color: var(--nn-vang-mut); font-style: normal; font-weight: 700; }
.nn-hoi { margin-top: 12px; }
.nn-cauhoi { font-size: 13.5px; font-weight: 700; margin: 0 0 7px; }
.nn-chon-hang { display: flex; gap: 7px; flex-wrap: wrap; }
.nn-chon {
  border: 1px solid var(--nn-vien); background: #FFFDF4; border-radius: 999px; padding: 9px 13px;
  font-size: 12.5px; color: #5E5748; display: flex; align-items: center; gap: 6px;
  font-family: inherit; cursor: pointer; min-height: 38px;
}
.nn-chon.chon-roi { background: #E6EFD8; border-color: #C4D8A8; color: #41571F; font-weight: 700; }
/* Chưa bấm "Bắt đầu buổi" thì bốn cái tên KHÔNG bấm được — mờ hẳn để không ai chạm thử rồi tưởng hỏng. */
.nn-chon[disabled] { opacity: .45; cursor: default; }

/* ---------- đồng hồ dẫn buổi ---------- */
.nn-dongho { text-align: center; padding: 6px 0 2px; }
.nn-dongho .so { font-size: 44px; font-weight: 700; letter-spacing: 1px; line-height: 1; }
.nn-dongho .chang {
  font-size: 12.5px; color: var(--nn-vang-mut); font-weight: 700; letter-spacing: 1.4px;
  text-transform: uppercase; margin-top: 5px;
}
.nn-chang-hang { display: flex; gap: 6px; margin-top: 11px; }
.nn-chang-hang div {
  flex: 1; min-width: 0; text-align: center; font-size: 11px; padding: 7px 2px; border-radius: 9px;
  background: #F1E9D3; border: 1px solid #E5DABB; color: #7E7663; line-height: 1.35;
}
.nn-chang-hang div.nay { background: var(--nn-oliu); border-color: var(--nn-oliu-dam); color: #fff; font-weight: 700; }
.nn-chang-hang div.xong { background: #E6EFD8; border-color: #C9DCB0; color: #4F6B2A; }

/* ---------- độ đều lượt nói ---------- */
.nn-deu { margin-top: 12px; }
.nn-deu .dong { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.nn-deu .dong .t { font-size: 12.5px; width: 74px; flex: 0 0 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nn-deu .thanh { flex: 1; height: 11px; border-radius: 99px; background: #E7DCBD; overflow: hidden; }
.nn-deu .thanh i { display: block; height: 100%; background: #7E9A4E; }
.nn-deu .thanh i.it { background: #D3AC5B; }
.nn-deu .p { font-size: 11.5px; width: 40px; text-align: right; color: #8C8471; flex: none; }

/* ---------- bảng tin ---------- */
.nn-tin { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #EDE3C9; align-items: flex-start; }
.nn-tin:last-child { border-bottom: 0; }
.nn-tin .noi { flex: 1; min-width: 0; }
.nn-tin .noi p { margin: 0; font-size: 13.5px; line-height: 1.5; word-break: break-word; }
.nn-tin .noi p b { font-weight: 700; }
.nn-tin .noi span { font-size: 11.5px; color: #8C8471; }
.nn-vote {
  border: 1px solid var(--nn-vien); background: #F6F0DE; border-radius: 999px; padding: 8px 11px;
  font-size: 12px; color: #7A7263; white-space: nowrap; font-family: inherit; cursor: pointer;
  flex: none; min-height: 36px;
}
.nn-vote.chon { background: #FFF1CF; border-color: #E6CE9E; color: #8A6A1C; font-weight: 700; }
.nn-vote[disabled] { opacity: .6; cursor: default; }

/* ---------- lớp phủ (mở màn việc) ---------- */
.nn-phu {
  position: fixed; inset: 0; z-index: 9200; background: rgba(40, 34, 18, .55);
  backdrop-filter: blur(3px); display: flex; align-items: flex-end; justify-content: center; padding: 0;
}
.nn-phu-hop {
  background: var(--nn-kem); width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto;
  border-radius: 22px 22px 0 0; padding: 14px 15px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 40px rgba(60, 45, 15, .45);
}
.nn-phu-hd { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.nn-phu-hd b { flex: 1; min-width: 0; font-size: 17px; }
.nn-x {
  border: 1px solid var(--nn-vien); background: #F6F0DE; color: #7A7263; border-radius: 999px;
  width: 38px; height: 38px; font-size: 16px; cursor: pointer; flex: none; font-family: inherit;
}
/* Lời nhắc "còn thiếu gì" ngay trên nút Gửi — nay là câu trả lời CHÍNH khi bấm mà chưa đủ phần, nên
   phải đọc được bằng mắt thường trên điện thoại, không còn là dòng chữ nhỏ nép bên lề. */
.nn-loi {
  font-size: 13.5px; line-height: 1.5; color: #A8452F; margin-top: 10px; font-weight: 700;
  background: #FDF1EE; border: 1px solid #F0D6CD; border-radius: 12px; padding: 10px 12px;
}

@media (min-width: 640px) {
  .nn-phu { align-items: center; padding: 20px; }
  .nn-phu-hop { border-radius: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .nn-ghiam .cham.dang { animation: none; }
  .nn-song i { transition: none; }
}