/* public/hengap.css — 📅 Hẹn gặp giáo viên chủ nhiệm (GVCN). Prefix .hg- để không đụng CSS khác.
   Dùng lại NGUYÊN các lớp .oo-overlay/.oo-sheet/.oo-close/.oo-title/.oo-sub/.oo-btn/.oo-room/... của
   Phòng 1-1 (one-on-one.css) cho khung tổng thể + màn gọi video — chỉ thêm lớp riêng cho phần
   wizard đặt lịch (chọn ngày/giờ) mà Phòng 1-1 không có. */

.hg-steps { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 16px; }
.hg-step-dot { width: 8px; height: 8px; border-radius: 50%; background: #e6dcc4; transition: background .2s, transform .2s; }
.hg-step-dot.on { background: #9c4436; transform: scale(1.3); }
.hg-step-dot.done { background: #c98a5a; }

.hg-daylist { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; -webkit-overflow-scrolling: touch; }
.hg-daypill { flex: 0 0 auto; min-width: 68px; padding: 12px 8px; border-radius: 16px; border: 2px solid #efe6d2;
  background: #fffdf7; color: #4a3f22; font-weight: 800; font-size: .92rem; text-align: center; cursor: pointer;
  transition: transform .12s, border-color .12s, background .12s; }
.hg-daypill:active { transform: scale(.95); }
.hg-daypill.on { border-color: #9c4436; background: linear-gradient(135deg, #9c4436, #6d2a20); color: #fff; }
.hg-daypill.done { border-color: #c98a5a; background: #f7ece0; }
@media (hover: hover) { .hg-daypill:hover { border-color: #c98a5a; } }

.hg-suggest-row { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 14px; padding-bottom: 2px; }
.hg-suggest-chip { flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; border: none; background: #f1e7d4; color: #8a5a2a;
  font-weight: 700; font-size: .84rem; cursor: pointer; white-space: nowrap; }
.hg-suggest-chip:active { transform: scale(.96); }

.hg-slotgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.hg-slot { padding: 15px 6px; border-radius: 14px; border: 2px solid #efe6d2; background: #fffdf7; color: #4a3f22;
  font-weight: 800; font-size: 1rem; text-align: center; cursor: pointer; min-height: 50px; display: flex;
  align-items: center; justify-content: center; transition: transform .12s, border-color .12s, background .12s; }
.hg-slot:active { transform: scale(.95); }
.hg-slot.on { border-color: #9c4436; background: linear-gradient(135deg, #9c4436, #6d2a20); color: #fff; }
.hg-slot.taken { background: #f3ecd9; color: #b5a480; border-color: #efe6d2; cursor: not-allowed; flex-direction: column; gap: 2px; }
.hg-slot.taken .hg-slot-tag { font-size: .62rem; font-weight: 700; }
@media (hover: hover) { .hg-slot:not(.taken):hover { border-color: #c98a5a; } }
.hg-slot-empty { grid-column: 1 / -1; text-align: center; color: #8a7f63; padding: 20px 0; font-size: .92rem; }

.hg-summary { background: #fffdf7; border: 1px solid #efe6d2; border-radius: 18px; padding: 18px; margin-bottom: 14px; }
.hg-summary .hg-sum-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 1rem; color: #4a3f22; }
.hg-summary .hg-sum-row b { min-width: 70px; color: #8a5a2a; font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; }
.hg-summary .hg-sum-day { flex: 1; font-weight: 700; }

.hg-zalo-cta { display: block; width: 100%; text-align: center; padding: 13px; border-radius: 14px; border: 2px dashed #d8c9a3;
  background: transparent; color: #8a5a2a; font-weight: 700; font-size: .92rem; text-decoration: none; margin-top: 10px; }
.hg-zalo-cta:active { transform: scale(.97); }

.hg-my-slots { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.hg-my-slot { background: linear-gradient(135deg, #f7f1e4, #efe6d2); border-radius: 16px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px; }
.hg-my-slot .hg-my-day { font-weight: 800; color: #4a3f22; font-size: 1.05rem; flex: 1; }
.hg-my-slot .hg-my-time { font-weight: 800; color: #9c4436; font-size: 1.1rem; }
.hg-action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.hg-action-row.full { grid-template-columns: 1fr; }
.hg-btn-ghost { padding: 13px 8px; border-radius: 14px; border: none; background: #f1e7d4; color: #6f5a2a; font-weight: 700;
  font-size: .88rem; cursor: pointer; }
.hg-btn-ghost.danger { background: #f7ded8; color: #a0453a; }
.hg-btn-ghost:active { transform: scale(.96); }

.hg-join-hero { text-align: center; padding: 16px 0; }
.hg-join-hero .hg-join-time { font-size: 2.2rem; font-weight: 800; color: #9c4436; }
.hg-join-hero .hg-join-label { color: #8a7f63; font-size: .9rem; margin-top: 4px; }

.hg-empty { text-align: center; padding: 30px 10px; color: #6b5f45; }
.hg-empty .ic { font-size: 2.6rem; margin-bottom: 10px; }

/* 📝 Ghi chú của thầy/cô — học viên xem cùng trong khung gọi (CHỈ ĐỌC). Nút góc dưới-TRÁI vì góc
   dưới-phải là khung video tự quay (.oo-local). Chữ to, nút ≥52px cho học viên lớn tuổi. */
.hg-note-nut { position: absolute; left: 14px; bottom: 96px; z-index: 6; width: 56px; height: 56px; border-radius: 50%;
  border: none; background: #5a6a3a; color: #fff; font-size: 1.5rem; cursor: pointer; display: none;
  align-items: center; justify-content: center; box-shadow: 0 8px 20px -6px rgba(0,0,0,.6); }
.hg-note-nut.hien { display: flex; }
.hg-note-nut:active { transform: scale(.92); }
.hg-note-nut .cham { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: #e0453a; border: 2px solid #fff; display: none; }
.hg-note-nut.moi .cham { display: block; }
.hg-note-panel { position: absolute; left: 10px; top: 100px; bottom: 164px; z-index: 7; width: min(460px, calc(100% - 20px));
  background: #FFFDF6; border-radius: 18px; overflow: hidden; display: none; flex-direction: column;
  box-shadow: 0 12px 34px -10px rgba(0,0,0,.7); }
.hg-note-panel.mo { display: flex; }
.hg-note-dau { display: flex; align-items: center; gap: 8px; background: #5a6a3a; color: #fff; padding: 10px 12px; flex: none; }
.hg-note-dau b { flex: 1; font-size: 1rem; }
.hg-note-dau button { border: none; border-radius: 999px; cursor: pointer; font-weight: 800; min-height: 40px; }
.hg-note-chep { background: #fff; color: #5a6a3a; padding: 0 14px; font-size: .9rem; }
.hg-note-x { background: rgba(255,255,255,.2); color: #fff; width: 40px; font-size: 1rem; }
.hg-note-than { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 16px 20px; }
.hg-note-dong { margin-bottom: 16px; }
.hg-note-py { font-size: .9rem; color: #5a6a3a; letter-spacing: .02em; margin-bottom: 2px; }
.hg-note-hz { font-size: 1.3rem; color: #2f2718; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.hg-note-rong { color: #8a7f63; text-align: center; padding: 30px 8px; }