/* Desktop / tablet ngang ≥992 — mobile giữ nguyên
   v3.6.1 — 2026-09-15: đổi breakpoint 1024 → 992 (đồng bộ toàn site).
                          ĐÃ BỎ rule .ol-practice-screen{display:grid!important}
                          không có .active — đây là bug khiến màn practice hiện sẵn
                          và spinner "Đang tải câu hỏi..." treo vô hạn.
                          Layout 2 cột chỉ apply khi .active.
*/
@media (min-width:992px){
  /* ===== TRANG CHỦ ===== */
  body.has-bottom-nav .intro-hero,
  body.has-bottom-nav .hlx-parts,
  body.has-bottom-nav .practice-grid,
  body.has-bottom-nav .path-section,
  body.has-bottom-nav .curriculum-card,
  body.has-bottom-nav #bxhPublic{
    max-width:1100px;margin-left:auto;margin-right:auto;
  }
  .hlx-parts{grid-template-columns:repeat(4,1fr)!important;gap:14px!important}
  .hlx-part{min-height:110px!important}
  .practice-grid{grid-template-columns:1fr 1fr!important;max-width:560px}
  .curriculum-timeline,.curriculum-card .curriculum-timeline,#loTrinhSteps{
    display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:10px!important
  }

  /* ===== ÔN LUYỆN — đề trái, lưới câu phải =====
     Chỉ áp dụng khi practice .active — KHÔNG dùng selector thường. */
    .ol-practice-screen.active{
      display:grid!important;
      grid-template-columns:minmax(0,1fr) 280px;
      grid-template-rows:auto auto 1fr auto;
      height:100dvh;max-width:1180px;margin:0 auto;
    }
  .ol-practice-screen.active .ol-prac-header{grid-column:1/-1}
  .ol-practice-screen.active .ol-prac-body{grid-column:1;grid-row:3;overflow:auto;min-height:0}
  .ol-practice-screen.active .ol-prac-footer{grid-column:1;grid-row:4}
  .ol-practice-screen.active .ol-prac-matrix{
      grid-column:2;grid-row:2/5;
      max-height:none!important;height:auto;overflow:auto;
      border-left:1px solid #e5e7eb;padding:8px
  }
  .ol-practice-screen.active .ol-prac-matrix-grid{grid-template-columns:repeat(5,1fr)!important}

  /* ===== MÔ PHỎNG ôn — chương trái, video trên, câu dưới ===== */
  body.sch.sch-on{
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    grid-template-rows:auto auto auto 1fr;
    min-height:100dvh;
  }
  body.sch.sch-on .sch-top{grid-column:1/-1}
  body.sch.sch-on .sch-bar{grid-column:1/-1}
  body.sch.sch-on .ch-scroll{
    grid-column:1;grid-row:3/5;
    max-height:none!important;
    height:calc(100dvh - 72px);
    overflow:auto;
    border-right:1px solid #e5e7eb;
    padding:8px;
  }
  body.sch.sch-on .pin{grid-column:2;grid-row:3}
  body.sch.sch-on .qs{grid-column:2;grid-row:4;overflow:auto}
  body.sch.sch-on .stage,body.sch.sch-on .col-vid{position:static!important}
  body.sch video{max-height:42vh}
  body.hub{display:block} /* hub không grid */
  body.hub .wrap{max-width:720px;margin:0 auto}
}