/* 05/11/2026, anh Hạnh: thanh công cụ DỌC sát mép phải khung bài giảng.
   Trên xuống: Tạm dừng, Tắt tiếng, Chụp cắt hình, Bút tô, Tẩy ... (dưới cùng) Nghe lại, Micro (mặc định tắt). */
.ctl { grid-area: ctl; }
.ctl-gian { flex: 1 1 auto; }
.ctl .cbtn { display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; flex: 0 0 auto; }
.ctl .cbtn[aria-pressed="true"] { background: #FFE66D; transform: translateY(2px); box-shadow: 0 2px 0 var(--ink); }
#bMicT { background: #E8EEF6; color: #6B7A90; position: relative; }
#bMicT:not(.on)::after { content: ""; position: absolute; width: 60%; height: 3px; background: #6B7A90; border-radius: 2px; transform: rotate(-45deg); }
#bMicT.on { background: #E53935; color: #fff; animation: docdo-nhip 1.2s ease-in-out infinite; }
.ctl .cbtn:disabled { opacity: .45; }

/* Lớp vẽ bút tô / tẩy phủ đúng ô khung bài giảng */
.ve-lop { grid-area: stage; z-index: 5; width: 100%; height: 100%; pointer-events: none; border-radius: 30px; touch-action: none; }
body.dang-ve .ve-lop { pointer-events: auto; cursor: crosshair; }
body.dang-tay .ve-lop { cursor: cell; }

/* Khung chọn vùng chụp */
.chup-lop { position: fixed; inset: 0; z-index: 90; cursor: crosshair; background: rgba(11, 27, 63, .18); touch-action: none; }
.chup-lop .chup-goi { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); background: #fff; border: 3px solid #0B1B3F; border-radius: 16px; padding: 6px 14px; font: 700 15px Arial, sans-serif; box-shadow: 0 4px 0 #0B1B3F; white-space: nowrap; }
.chup-lop .chup-khung { position: absolute; border: 3px dashed #E53935; background: rgba(255, 255, 255, .15); display: none; }
.chup-xem { position: fixed; inset: 0; z-index: 95; background: rgba(11, 27, 63, .55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.chup-xem .cx-the { background: #fff; border: 3px solid #0B1B3F; border-radius: 22px; box-shadow: 0 6px 0 #0B1B3F; padding: 12px; max-width: min(92vw, 900px); max-height: 90vh; display: flex; flex-direction: column; gap: 10px; }
.chup-xem img { max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 12px; border: 2px solid #E3E8F0; }
.chup-xem .cx-nut { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.chup-xem .cx-nut a, .chup-xem .cx-nut button { font: 800 15px Arial, sans-serif; border: 3px solid #0B1B3F; border-radius: 99px; padding: 4px 16px; background: #fff; color: #0B1B3F; box-shadow: 0 3px 0 #0B1B3F; text-decoration: none; cursor: pointer; }
.chup-xem .cx-nut a { background: #0B6CF3; color: #fff; }

/* Máy tính / iPad ngang: thanh dọc nằm giữa khung bài giảng và cột Anh Đậu Đậu */
@media (min-width: 861px) and (min-height: 521px) {
  body:not(.layout-phone) .app { grid-template-columns: minmax(0, 1fr) 56px 320px !important; grid-template-rows: auto minmax(0, 1fr) auto !important;
    grid-template-areas: "top top top" "stage ctl tch" "path path tch" !important; }
  body:not(.layout-phone) .ctl { flex-direction: column; align-items: center; justify-content: flex-start; gap: 9px; padding: 10px 0;
    background: #fff; border: var(--line); border-radius: 28px; box-shadow: var(--sh); min-height: 0; overflow-y: auto; overflow-x: hidden; }
  body:not(.layout-phone) .ctl .cbtn { width: 42px; height: 42px; font-size: 19px; box-shadow: 0 3px 0 var(--ink); }
  body:not(.layout-phone) .ctl .cbtn:active { box-shadow: 0 1px 0 var(--ink); }
}
@media (min-width: 861px) and (min-height: 521px) and (max-height: 640px) {
  body:not(.layout-phone) .ctl { gap: 5px; padding: 6px 0; }
  body:not(.layout-phone) .ctl .cbtn { width: 36px; height: 36px; font-size: 16px; }
}

/* Điện thoại / màn hẹp: cùng thứ tự, xếp thành một hàng gọn dưới thanh chặng */
@media (max-width: 860px), (max-height: 520px) {
  .ctl { flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 6px; }
  .ctl-gian { flex: 0 0 6px; }
  .ctl .cbtn { width: 40px; height: 40px; font-size: 18px; box-shadow: 0 3px 0 var(--ink); }
}
body.layout-phone .ctl { flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 6px; }
body.layout-phone .ctl-gian { flex: 0 0 6px; }
body.layout-phone .ctl .cbtn { width: 40px; height: 40px; font-size: 18px; }
/* nút Quản trị không đè lên nút micro ở hàng công cụ trên điện thoại */
@media (max-width: 860px) { #qtBtn { bottom: auto !important; top: 64px; right: 6px; padding: 4px 8px !important; font-size: 11px !important; opacity: .75; } }