/* ═══ CÔNG CỤ BỘ MÔN (thẻ 'toan', 21/10/2026) ═══════════════════════════════════════════════════════════════════════
   Khuôn nhóm 2: trái 40 % chọn môn – công cụ – nhập số liệu, phải 60 % kết quả dựng lại mỗi lần ngừng gõ. Máy tính / máy tính
   bảng: khung làm việc cao đúng một màn hình, mỗi cột tự cuộn bên trong. Phía trên khung còn thanh danh tính và hộp Giới thiệu
   của trợ giúp (đo 21/10/2026: khung bắt đầu ở 409px trên màn 900px) nên trang cuộn một lần tới khung, không ép khung lùn lại.
   Điện thoại (< 900px): hai cột xếp chồng.
   Dùng lại .ga-o / .nhan-o (ô nhập có nhãn + dấu ?) của Soạn giáo án. Bảng số liệu nằm trong .ccm-cuon (cuộn ngang được) và
   nút "Chép bảng" đứng NGOÀI hộp cuộn — nút trong hộp cuộn ngang là lỗi tran_cuon của bộ đo giao diện. */
.ccm-studio { display:grid; grid-template-columns:minmax(0,40fr) minmax(0,60fr); gap:var(--k4); align-items:stretch; }
.ccm-trai, .ccm-phai { border:1px solid var(--n-200); border-radius:var(--r-vua); background:var(--trang); padding:var(--k4);
                     box-shadow:var(--bong-1); min-width:0; }
.ccm-phai { background:var(--n-50); }
@media (min-width:900px) {
  .ccm-studio { height:calc(100vh - 48px); min-height:520px; max-height:980px; }
  .ccm-trai, .ccm-phai { overflow-y:auto; min-height:0; }
}
@media (max-width:899px) { .ccm-studio { grid-template-columns:minmax(0,1fr); } }

.ccm-chon { border-bottom:1px solid var(--n-200); margin:0 0 var(--k3); padding-bottom:var(--k1); }
#ccm-tim { margin-bottom:var(--k1); }
.ccm-o[hidden], .ccm-o-hop[hidden], .ccm-nhieu[hidden] { display:none; }
.ccm-bb { color:var(--nguy); margin-left:2px; }
.ccm-luoi { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:0 var(--k3); }
.ccm-so { display:flex; align-items:center; gap:6px; }
.ccm-so input { flex:1 1 auto; min-width:0; }
.ccm-dv { flex:none; font-size:var(--t-sm); color:var(--n-500); white-space:nowrap; }
.ccm-o textarea { font-family:var(--font-so); font-size:var(--t-nho); min-height:72px; }
.ccm-o-hop { display:flex; align-items:center; gap:6px; margin-bottom:var(--k3); }
.ccm-hop { display:inline-flex; align-items:center; gap:6px; font-size:var(--t-nho); color:var(--n-700); cursor:pointer; }
.ccm-nhieu { border:0; padding:0; margin:0 0 var(--k3); min-width:0; }
.ccm-nhieu legend { display:flex; align-items:center; gap:6px; font-size:var(--t-nho); color:var(--n-600); padding:0; margin-bottom:var(--k1); }
.ccm-hang-hop { display:flex; flex-wrap:wrap; gap:var(--k2) var(--k4); }
.ccm-hang-nut { display:flex; flex-wrap:wrap; align-items:center; gap:var(--k2); margin-top:var(--k2); }
.ccm-hang-nut button, .ccm-khoi-dau button { margin:0; white-space:nowrap; }
#btn-ccm-chay { padding:8px var(--k4); }
.ccm-hang-nut .act.phu, .ccm-khoi-dau .act.phu { padding:6px 12px; font-size:var(--t-sm); }

.ccm-tt { margin:0 0 var(--k3); font-size:var(--t-nho); color:var(--n-600); border-left:3px solid var(--n-300); padding:2px 0 2px var(--k2); }
.ccm-tt[data-loai="ok"] { border-color:var(--tot); color:var(--tot); }
.ccm-tt[data-loai="cho"] { border-color:var(--tin); color:var(--tin); }
.ccm-tt[data-loai="thieu"] { border-color:var(--luu); color:var(--luu); }
.ccm-tt[data-loai="loi"] { border-color:var(--nguy); color:var(--nguy); }
.ccm-loi[hidden], #ccm-kq-hop[hidden], #ccm-anh-hop[hidden], #ccm-nut-anh[hidden], #ccm-tim-trong[hidden], #btn-ccm-chep-anh[hidden] { display:none; }
#ccm-kq-hop.cu { opacity:.45; }
.ccm-anh-hop { margin:0; background:var(--trang); border:1px solid var(--n-200); border-radius:var(--r-nho); padding:var(--k2); text-align:center; }
.ccm-anh-hop img { max-width:100%; height:auto; display:block; margin:0 auto; }
#ccm-bao { font-size:var(--t-sm); color:var(--n-600); min-height:1em; }

.ccm-khoi { margin-top:var(--k4); }
.ccm-khoi-dau { display:flex; align-items:center; justify-content:space-between; gap:var(--k2); margin-bottom:var(--k2); }
.ccm-khoi-dau h4 { margin:0; font-size:var(--t-vua); color:var(--n-800); }
.ccm-dl { margin:0; display:grid; gap:1px; background:var(--n-200); border:1px solid var(--n-200); border-radius:var(--r-nho); overflow:hidden; }
.ccm-dl > div { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:var(--k3); background:var(--trang); padding:6px var(--k3); }
.ccm-dl dt { color:var(--n-600); font-size:var(--t-nho); }
.ccm-dl dd { margin:0; font-weight:600; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
@media (max-width:520px) { .ccm-dl > div { grid-template-columns:minmax(0,1fr); gap:0; } }
.ccm-cuon { overflow-x:auto; border:1px solid var(--n-200); border-radius:var(--r-nho); background:var(--trang); }
.ccm-bang-so { border-collapse:collapse; width:100%; font-size:var(--t-nho); font-variant-numeric:tabular-nums; }
.ccm-bang-so th, .ccm-bang-so td { padding:6px 10px; border-bottom:1px solid var(--n-200); text-align:right; white-space:nowrap; }
.ccm-bang-so th[scope="row"], .ccm-bang-so thead th:first-child { text-align:left; }
.ccm-bang-so thead th { background:var(--n-50); color:var(--n-700); font-weight:600; }
.ccm-bang-so tbody tr:last-child > * { border-bottom:0; }
.ccm-nx { margin:0; padding-left:20px; font-size:var(--t-nho); color:var(--n-800); }
.ccm-nx li + li { margin-top:var(--k1); }
.ccm-trong { color:var(--n-500); font-size:var(--t-nho); }