/* ============================================================
   Thanh điều khiển học tập (tabs / chọn bài / chế độ / kho tài nguyên)
   File này là NGUỒN DUY NHẤT cho bố cục khu vực này — nạp sau cùng để
   thắng các bản vá rời rạc (vXX) từng chỉnh .controls nhiều lần trước đó
   (nguyên nhân khiến các ô to nhỏ không đều, "Gõ pinyin" bị rớt dòng lẻ).

   3 hàng, mỗi hàng đồng bộ kích thước trong chính nó:
     1) Chọn bài            — bộ lọc bài học, 1 hàng riêng
     2) 6 nút chế độ học    — Flashcard/Trắc nghiệm/Gõ pinyin/Nghe bài học/Nghe bài tập/Luyện nói, chia đều
     3) Kho tài nguyên      — hành động phụ (rời khỏi luồng học), tách biệt
   ============================================================ */

.tabs{ margin:18px 0 0 !important; }

/* ---- Hàng 0: Chọn cấp HSK ---- */
/* Trước đây các nút HSK1-4 tự co theo chữ (flex-wrap) nên dồn hết sang trái,
   để trống cả mảng bên phải trên màn hình điện thoại — khác với các hàng nút
   khác đều dàn đều hết chiều ngang. Khoá bằng ID để thắng các rule cũ. */
#levels{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:8px !important;
  width:100% !important;
}
#levels button{
  width:100% !important;
  height:44px !important;
  min-height:44px !important;
  margin:0 !important;
  padding:0 6px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* ---- Hàng 1: Chọn bài ---- */
.lesson-select-wrap{
  width:100% !important;
  margin:10px 0 0 !important;
}
.lesson-select-wrap .lesson-toggle{
  width:100% !important;
  height:48px !important;
  min-height:48px !important;
  margin:0 !important;
  box-sizing:border-box !important;
}

/* ---- Hàng 2: 6 chế độ học, cùng cỡ (máy tính: 1 hàng; điện thoại: 3×2) ---- */
.controls{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  align-items:stretch !important;
  gap:9px !important;
  width:100% !important;
  margin:10px 0 0 !important;
}
.controls .mode-btn{
  width:100% !important;
  height:48px !important;
  min-height:48px !important;
  margin:0 !important;
  padding:0 6px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
  font-size:14px !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
@media (max-width:860px){
  .controls{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; }
  .controls .mode-btn{ font-size:13px !important; }
}
/* Điện thoại: 6 nút xếp 3 cột × 2 hàng để đủ chỗ hiện trọn chữ
   (1 hàng 6 nút chỉ còn ~50px/nút, chữ bị cắt: "lashcar", "ắc nghiệ"...). */
@media (max-width:640px){
  .controls{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
  .controls .mode-btn{ font-size:14px !important; padding:0 6px !important; }
}
@media (max-width:360px){
  .controls{ gap:6px !important; }
  .controls .mode-btn{ font-size:12px !important; padding:0 3px !important; }
}

/* ---- Hàng 3: Kho tài nguyên (hành động phụ) ---- */
.resource-area{
  width:100% !important;
  margin:12px 0 0 !important;
}
.resource-area .resource-btn{
  width:100% !important;
  height:48px !important;
  min-height:48px !important;
  margin:0 !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* Khoá bằng ID: thắng các rule ID cũ (căn trái, cao 44px) còn sót lại ở các bản vá. */
#flashBtn, #quizBtn, #typingBtn, #listeningBtn, #lessonListenBtn, #speakingBtn, #resourceBtn{
  height:48px !important;
  min-height:48px !important;
  text-align:center !important;
  justify-content:center !important;
}