/* hlx-home.css — cards + desktop home only */

.hlx-cta-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 6px}
.hlx-cta{display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:14px;font-weight:700;font-size:15px;text-decoration:none}
.hlx-cta-on{background:#1565c0;color:#fff}
.hlx-cta-thi{background:#ea580c;color:#fff}
.hlx-parts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 20px}
.hlx-part{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-height:96px;border:0;border-radius:18px;padding:16px;text-decoration:none;color:#fff;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.hlx-part strong{display:block;font-size:19px;margin-bottom:4px;color:#fff;font-weight:700}
.hlx-part span{display:block;font-size:14.5px;line-height:1.35;color:rgba(255,255,255,.95)}
.hlx-part.app-t-teal{background:#26a69a}
.hlx-part.app-t-slate{background:#607d8b}
.hlx-part.app-t-green{background:#7cb342}
.hlx-part.app-t-orange{background:#f5a623}
.section-label{letter-spacing:.04em}
body.has-bottom-nav{padding-bottom:96px}

/* hlx-app-home.css — v2 — 2026-09-15
   CHỈ ÁP DỤNG TRÊN DESKTOP (≥992px).
   Trên mobile: dùng styles gốc của thi-bo/trang-chu (kích thước nhỏ, dễ đọc).
*/
@media (min-width: 992px) {

.app-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0 18px}
.app-tile{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;min-height:92px;padding:16px 16px;border-radius:18px;color:#fff!important;text-decoration:none;font-weight:800;font-size:18px;line-height:1.3;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.app-tile strong,.app-tile .practice-card-title{color:#fff!important;font-size:19px;font-weight:800;margin:0}
.app-tile span,.app-tile .practice-card-desc{color:rgba(255,255,255,.95)!important;font-size:14.5px;font-weight:650;margin-top:4px;line-height:1.35}
.app-tile .practice-card-icon{display:none}
.app-t-orange{background:#f5a623}
.app-t-red{background:#e74c4c}
.app-t-green{background:#7cb342}
.app-t-teal{background:#26a69a}
.app-t-brown{background:#6d4c41}
.app-t-slate{background:#607d8b}
.hlx-parts .hlx-part.app-tile{border:0}
.practice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hlx-cta{min-height:52px!important;font-size:18px!important}

body{font-size:18px;line-height:1.5;color:#1a1a1a}
h1{font-size:1.6rem}
h2{font-size:1.28rem}
.lt-card,.dt-card,.card,.qcard,.lp-info-card,.dl-group-card,.section,
.curriculum-card,.law2 article,.hub-card{
  border-radius:18px!important;
  border:1px solid #e8dcc8!important;
  box-shadow:0 2px 8px rgba(80,50,10,.06)!important;
  padding:18px 18px!important;
}
.lt-card h2,.dt-card h2,.card-hd,.qcard-hd,.section-title{font-size:20px!important;font-weight:800!important}
.lt-links a,.dt-toc a,.lp-cta,.lt-back{font-size:17px!important;font-weight:700!important}
.lt-links a{
  display:block;background:#26a69a;color:#fff!important;border-radius:14px;padding:14px 16px;margin:10px 0;text-align:center;text-decoration:none
}
.sa-hinh .section a,.container .section a{font-size:17px}

body.ol-bigtype{font-size:18.5px;color:#1a1a1a}
body.ol-bigtype .ol-title,body.ol-bigtype .ol-prac-title-bar{font-size:22px!important;font-weight:800!important}
body.ol-bigtype .ol-menu-text,body.ol-bigtype .ol-menu-item,body.ol-bigtype .ol-btn-text{font-size:18.5px!important}
body.ol-bigtype .ol-chapter-btn,body.ol-bigtype .ol-chapter-info,body.ol-bigtype .ol-de-card,body.ol-bigtype .ol-mode-btn,body.ol-bigtype .ol-hang-chip{font-size:18px!important}
body.ol-bigtype .ol-q-content,body.ol-bigtype .ol-q-card .ol-text,body.ol-bigtype .ol-question,body.ol-bigtype .ol-q-header{font-size:20px!important;line-height:1.5!important;font-weight:700!important;color:#111!important}
body.ol-bigtype .ol-opt{display:flex!important;align-items:flex-start!important;gap:14px!important;padding:16px 6px!important;font-size:18.5px!important;line-height:1.5!important;color:#222!important;border-bottom:1px solid #ececec!important}
body.ol-bigtype .ol-opt-num{flex-shrink:0;width:34px;height:34px;border:1.5px solid #9aa0a6;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:16px}
body.ol-bigtype .ol-prac-nav-counter,body.ol-bigtype .ol-prac-nav-label,body.ol-bigtype .ol-hang-badge{font-size:17px!important;font-weight:700!important}
body.ol-bigtype .ol-explanation,body.ol-bigtype .ol-search-text,body.ol-bigtype .ol-wrong-info,body.ol-bigtype .ol-card-body,body.ol-bigtype .ol-text,body.ol-bigtype .ol-text3{font-size:17.5px!important;line-height:1.55!important}
body.ol-bigtype .ol-search-input{font-size:17px!important}
body.ol-bigtype .ol-menu-item{border-radius:18px;padding:16px 14px}

/* ôn luyện — card mục to */
body.ol-bigtype .ol-mode-switch{display:grid!important;grid-template-columns:1fr 1fr;gap:10px}
body.ol-bigtype .ol-mode-btn{min-height:56px!important;border-radius:16px!important;font-size:17px!important;font-weight:800!important;padding:12px 8px!important}
body.ol-bigtype .ol-de-grid{display:grid!important;grid-template-columns:1fr 1fr;gap:10px}
body.ol-bigtype .ol-de-card{min-height:88px!important;padding:14px 12px!important;border-radius:16px!important;font-size:17px!important}
body.ol-bigtype .ol-de-num{font-size:18px!important;font-weight:800!important}
body.ol-bigtype .ol-card,body.ol-bigtype .ol-progress-card{padding:16px!important;border-radius:18px!important}
body.ol-bigtype .ol-menu-item{min-height:64px}

} /* @media (min-width:992px) */


/* 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}
}