/* ============================================================
   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) 5 nút chế độ học    — Flashcard/Trắc nghiệm/Gõ pinyin/Luyện đọc/Luyện nghe, 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, luôn cùng cỡ trên một hàng ---- */
.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; }
}
@media (max-width:640px){
  .controls{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; }
  .controls .mode-btn{ font-size:12px !important; padding:0 4px !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ũ (#readingBtn/#resourceBtn căn trái,
   cao 44px) sót lại từ khi Luyện đọc còn nằm ở hàng riêng full-width. */
#flashBtn, #quizBtn, #typingBtn, #listeningBtn, #speakingBtn, #readingBtn, #resourceBtn{
  height:48px !important;
  min-height:48px !important;
  text-align:center !important;
  justify-content:center !important;
}