/* 📝 GHI CHÉP LỚP HỌC — học viên xem lại ảnh ghi chép thầy lưu trong "Công cụ tra cứu Pinyin"
   (public/cong-cu-pinyin.html, 22/9/2026). Tự chứa, prefix .gcl-. Cùng khuôn overlay/màu với
   so-chu.css (kem/ô-liu) để nhìn là "cùng một nhà", KHÔNG dùng chung tên lớp CSS. */

.gcl-ov{ position:fixed; inset:0; z-index:1450; display:none; background:var(--gcl-kem,#FBF7F0);
  overflow-y:auto; -webkit-overflow-scrolling:touch; }
.gcl-ov.open{ display:block; }
.gcl-ov{ --gcl-kem:#FBF7F0; --gcl-kem2:#F4EDE1; --gcl-muc:#2E2A24; --gcl-mo:#7A7166; --gcl-oliu:#6B7A4F;
  --gcl-oliu-d:#55643D; --gcl-vien:#E2D8C6; --gcl-do:#C0392B;
  color:var(--gcl-muc); font-family:inherit; }

.gcl-head{ position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:10px;
  padding:calc(10px + env(safe-area-inset-top)) 14px 10px; background:linear-gradient(165deg,#3c4720,#2c3419);
  color:#f6efdd; border-bottom:2px solid #a9781f; }
.gcl-head .gcl-back{ background:rgba(255,255,255,.18); border:none; color:#fff; min-height:44px; padding:0 14px;
  border-radius:22px; font-size:1rem; font-weight:700; cursor:pointer; font-family:inherit; }
.gcl-head .gcl-t{ font-weight:800; font-size:1.1rem; flex:1; color:#e9dcb6; letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gcl-head .gcl-ic{ background:rgba(255,255,255,.18); border:none; color:#fff; width:44px; height:44px;
  border-radius:50%; font-size:1.05rem; cursor:pointer; flex:none; }

.gcl-body{ padding:14px 14px calc(30px + env(safe-area-inset-bottom)); max-width:760px; margin:0 auto; }
.gcl-loi{ background:#fdecea; border:1px solid #f5c6c2; color:var(--gcl-do); border-radius:14px;
  padding:12px 14px; font-size:.95rem; margin-bottom:12px; }
.gcl-trong{ text-align:center; color:var(--gcl-mo); padding:40px 16px; font-size:1rem; line-height:1.6; }
.gcl-trong .gcl-to{ font-size:2.6rem; display:block; margin-bottom:8px; }

/* Tiêu đề nhóm theo bài giảng (24/9/2026) — mỗi nhóm ".gcl-ds" đứng ngay sau nhãn của nó. */
.gcl-nhom-bai{ font-weight:800; font-size:.92rem; color:var(--gcl-oliu-d); margin:18px 2px 8px; }
.gcl-nhom-bai:first-child{ margin-top:2px; }

.gcl-ds{ display:flex; flex-direction:column; gap:10px; margin-bottom:4px; }
.gcl-hang{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--gcl-vien);
  border-radius:16px; padding:14px 16px; min-height:60px; cursor:pointer; text-align:left;
  font-family:inherit; width:100%; transition:transform .15s cubic-bezier(.34,1.4,.64,1); }
.gcl-hang:active{ transform:scale(.98); }
.gcl-hang .gcl-ic2{ font-size:1.6rem; flex:none; }
.gcl-hang .gcl-info{ flex:1; min-width:0; }
.gcl-hang .gcl-ngay{ font-weight:700; font-size:1rem; color:var(--gcl-muc); }
.gcl-hang .gcl-lop{ font-size:.86rem; color:var(--gcl-mo); margin-top:2px; }
.gcl-hang .gcl-mui{ color:var(--gcl-mo); flex:none; }

/* ---- xem ảnh toàn màn ---- */
.gcl-xem{ padding:0; }
.gcl-xem-anh{ width:100%; border-radius:12px; border:1px solid var(--gcl-vien); display:block; }
.gcl-xem-nut{ display:flex; justify-content:center; margin-top:14px; }
.gcl-xem-nut a{ background:var(--gcl-oliu); color:#fff; border-radius:14px; min-height:48px; padding:0 20px;
  display:inline-flex; align-items:center; gap:8px; font-weight:700; text-decoration:none; font-size:1rem; }