/* 05/11/2026, anh Hạnh: nút ✋ giơ tay trên thanh công cụ + ô hỏi ở chân cột Anh Đậu Đậu.
   Màu chính #0B6CF3; màu đỏ chỉ dùng cho micro lúc đang nghe. */
.hoi-bar { flex: none; display: flex; align-items: center; gap: 6px; min-width: 0; background: #fff; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); padding: 4px 5px; }
.hoi-bar input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font: 600 16px var(--vi); color: var(--ink); padding: 6px 4px; }
.hoi-bar input::placeholder { color: #7A8094; }
.hoi-bar button { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--ink); background: #E8F1FE; font-size: 17px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.hoi-bar button:disabled { opacity: .45; cursor: default; }
#hbSend { background: #0B6CF3; color: #fff; }
#hbMic { color: #0B3B82; }
#hbMic .mic-svg { width: 20px; height: 20px; display: block; pointer-events: none; }
/* 07/11/2026 anh Hạnh: lúc đang nghe thì micro đỏ và nhấp nháy cho em biết là nói được rồi */
#hbMic.on { background: #E53935; color: #fff; border-color: #B3100B; animation: mic-nhay 1s ease-in-out infinite; }
#hbMic.on .mic-svg { animation: mic-nhay-ic 1s ease-in-out infinite; }
@keyframes mic-nhay {
  0%, 100% { background: #E53935; box-shadow: 0 0 0 calc(var(--lv, 0) * 9px) rgba(229, 57, 53, .3); }
  50% { background: #FF7A72; box-shadow: 0 0 0 calc(5px + var(--lv, 0) * 9px) rgba(229, 57, 53, .22); }
}
@keyframes mic-nhay-ic { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  #hbMic.on, #hbMic.on .mic-svg { animation: none; }
}
body.gio-tay .hoi-bar { border-color: #0B6CF3; box-shadow: 0 4px 0 #0B6CF3, 0 0 0 4px rgba(11, 108, 243, .18); }
.bubble .hb-q { display: block; font-size: .8em; line-height: 1.35; color: var(--ink2); font-weight: 700; margin-bottom: 4px; }
.bubble.hb-dap { font-size: 16px; }
#bHand[aria-pressed="true"] { background: #FFE66D; animation: vay-tay .9s ease-in-out infinite; }
@keyframes vay-tay { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) { #bHand[aria-pressed="true"] { animation: none; } }

/* Điện thoại: ô hỏi chỉ hiện khi em giơ tay, nằm dưới cùng khung Anh Đậu Đậu */
@media (max-width: 860px) {
  .hoi-bar { grid-column: 1 / -1; grid-row: 3; }
  .hoi-bar input { font-size: 16px; }
}
@media (max-width: 1000px) and (max-height: 520px) and (orientation: landscape) { .hoi-bar { order: 3; } }
@media (max-width: 860px), (max-height: 520px) { body:not(.yct-asking) .hoi-bar { display: none; } }
/* Thêm nút ✋ nên hàng công cụ trên điện thoại nhỏ thu nút lại cho vừa một hàng */
@media (max-width: 400px) {
  .ctl, body.layout-phone .ctl { gap: 4px; }
  .ctl .cbtn, body.layout-phone .ctl .cbtn { width: 36px; height: 36px; font-size: 16px; }
}
/* Nút Quản trị không đè lên ô hỏi ở chân cột Anh Đậu Đậu trên máy tính */
@media (min-width: 861px) { #qtBtn { bottom: auto !important; top: 64px; right: 6px; padding: 4px 8px !important; font-size: 11px !important; opacity: .75; } }

/* ===== 08/11/2026 anh Hạnh =====
   1) Nút ✋ Giơ tay nổi bật: xanh #0B6CF3, có chữ, vòng sáng nhịp nhẹ. Đang giơ tay thì vàng và vẫy (luật cũ ở trên).
   2) Đang nghe: micro ở ô hỏi to hơn, ô viền đỏ nhạt, chữ "Anh đang nghe em nói" ngay trong ô.
   3) Bong bóng trả lời của Anh Đậu Đậu to hơn.
   4) Camera chỉ còn 1 icon nhỏ ở góc khung Anh Đậu Đậu. */
.ctl #bHand { flex-direction: column; gap: 0; width: 50px; height: 58px; border-radius: 16px; background: #0B6CF3; color: #fff; border-color: #0B3B82; box-shadow: 0 4px 0 #0B3B82; animation: tay-moi 2.6s ease-in-out infinite; }
.ctl #bHand .ht-ic { font-size: 24px; line-height: 1; }
.ctl #bHand small { font: 800 10px/1.1 var(--vi, Arial), sans-serif; margin-top: 2px; white-space: nowrap; letter-spacing: -.2px; }
.ctl #bHand[aria-pressed="true"] { background: #FFE66D; color: var(--ink); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); animation: none; }
.ctl #bHand[aria-pressed="true"] .ht-ic { display: inline-block; animation: vay-tay .9s ease-in-out infinite; }
.ctl #bHand.nhac { animation: tay-nhac .45s ease-in-out 4; }
@keyframes tay-moi { 0%, 100% { box-shadow: 0 4px 0 #0B3B82, 0 0 0 0 rgba(11, 108, 243, .45); } 50% { box-shadow: 0 4px 0 #0B3B82, 0 0 0 7px rgba(11, 108, 243, 0); } }
@keyframes tay-nhac { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); box-shadow: 0 4px 0 #0B3B82, 0 0 0 8px rgba(11, 108, 243, .35); } }
@media (min-width: 861px) and (min-height: 521px) and (max-height: 640px) { body:not(.layout-phone) .ctl #bHand { width: 46px; height: 50px; } .ctl #bHand .ht-ic { font-size: 20px; } }
@media (max-width: 860px), (max-height: 520px) { .ctl #bHand, body.layout-phone .ctl #bHand { width: 50px; height: 46px; } .ctl #bHand .ht-ic { font-size: 19px; } }
@media (max-width: 400px) { .ctl #bHand, body.layout-phone .ctl #bHand { width: 46px; height: 42px; } .ctl #bHand small { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { .ctl #bHand, .ctl #bHand.nhac, .ctl #bHand[aria-pressed="true"] .ht-ic { animation: none; } }
/* 🎤 trên thanh công cụ chỉ báo trạng thái */
.yct-nhac { position: fixed; left: 50%; bottom: 84px; transform: translate(-50%, 12px); z-index: 60; max-width: min(92vw, 460px); background: #0B3B82; color: #fff; font: 700 15px/1.4 var(--vi, Arial), sans-serif; padding: 10px 16px; border-radius: 14px; box-shadow: 0 6px 18px rgba(11, 27, 63, .3); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; text-align: center; }
.yct-nhac.hien { opacity: 1; transform: translate(-50%, 0); }

/* 2) micro ô hỏi lúc đang nghe */
.hoi-bar.dang-nghe { border-color: #E53935; box-shadow: 0 4px 0 #B3100B, 0 0 0 4px rgba(229, 57, 53, .16); }
.hoi-bar.dang-nghe #hbMic { width: 50px; height: 50px; border-width: 3px; }
.hoi-bar.dang-nghe #hbMic .mic-svg { width: 30px; height: 30px; }
.hoi-bar.dang-nghe input::placeholder { color: #B3100B; font-weight: 800; }
.hoi-bar #hbMic { transition: width .15s, height .15s; }

/* 3) bong bóng trả lời to hơn (trước đây 16px, nhỏ hơn chữ thường) */
.bubble.hb-dap, .teacher-col > .bubble.hb-dap { font-size: 20px; line-height: 1.5; }
.bubble.hb-dap .zh { font-size: 1.3em; }
.bubble.hb-dap .hb-q { font-size: .78em; }

/* 4) camera 1 icon ở góc khung Anh Đậu Đậu */
.yct-video-pair { position: relative; }
.yct-video-pair > .yct-talk-tools { position: absolute; top: 6px; right: 6px; z-index: 3; display: block; }
.yct-talk-tools #yCamera { flex: none; width: 34px; height: 34px; padding: 0; border-radius: 50%; font-size: 16px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .92); border: 2px solid var(--ink, #2B2D42); box-shadow: 0 2px 0 var(--ink, #2B2D42); }
.yct-talk-tools #yCamera[aria-pressed="true"] { background: #0B6CF3; }
.yct-talk-tools #yCamera.loi { background: #FFE66D; }
@media (max-width: 860px) {
  .yct-talk-tools #yCamera { width: 28px; height: 28px; font-size: 13px; }
  .yct-video-pair > .yct-talk-tools { top: 4px; right: 4px; }
  /* camera không còn chiếm hàng 2 nên bong bóng cao gấp đôi */
  .teacher-col > .bubble { grid-row: 1 / span 2; max-height: none; align-self: stretch; }
  .bubble.hb-dap, .teacher-col > .bubble.hb-dap { font-size: 17px; line-height: 1.42; }
  .hoi-bar.dang-nghe #hbMic { width: 46px; height: 46px; }
  .hoi-bar.dang-nghe #hbMic .mic-svg { width: 27px; height: 27px; }
}