/* Cỡ chữ mặc định của dòng nguồn tham khảo — trước đây viết thẳng vào style inline
   nên CSS không đổi được theo màn hình; nay chuyển về đây, máy tính giữ nguyên .78rem. */
.exam-source-line { font-size: .78rem; }

/* ============================================================
   Đợt 77 — Vùng chạm và cỡ chữ trên điện thoại.

   Hệ thống ĐÃ có sẵn chế độ bảng → thẻ xếp dọc (app-v2.js gắn data-label,
   style.css v6 dựng thẻ). Đợt này không làm lại cơ chế đó, chỉ sửa đúng chỗ
   đang khiến điện thoại khó dùng: nút quá nhỏ, chữ dưới 12px, ô nhập làm iOS
   tự phóng to trang.

   Chỉ chạy từ 760px trở xuống. Máy tính giữ nguyên.
   Trang làm bài (.page-simulation) có hệ điều khiển riêng nên loại trừ.
   Chỉ áp cho NỘI DUNG trang (main/dialog): topbar, sidebar và thanh dưới đã có
   hệ kích thước riêng từ Đợt 67, đụng vào là chữ bị cắt.
   File này nạp SAU các CSS khác nên cùng độ ưu tiên là đè được.
   ============================================================ */
@media (max-width: 760px) {

  /* ---------- 1. Nút: tối thiểu 44px theo chuẩn vùng chạm di động ---------- */
  body:not(.page-simulation) :is(main, dialog) .btn {
    min-height: 34px;
    padding: .34rem .8rem;
    font-size: .86rem;
  }
  body:not(.page-simulation) :is(main, dialog) .btn-sm {
    min-height: 30px;
    padding: .24rem .62rem;
    font-size: .8rem;
  }
  /* Nút trải hết bề ngang là việc chính của màn hình đó nên vẫn để rộng rãi. */
  body:not(.page-simulation) :is(main, dialog) .btn-block { min-height: 44px; font-size: .95rem; }
  /* content-layout.css nâng nút "xem tất cả" ở đầu mỗi mục lên 40px với bộ chọn dài;
     muốn hạ phải chép nguyên bộ chọn đó. Đây là nút phụ, không cần to bằng nút chính. */
  body.site-flat.has-sidebar main.container .content-section-heading .section-view-action {
    min-height: 30px; padding: .24rem .62rem; font-size: .8rem;
  }

  /* Nút trong ô "Thao tác" của danh sách trước đây bị ghim cứng 32px và chữ
     .78rem (≈11px) — đó chính là mấy nút bé xíu khó bấm trong các bảng. */
  body.site-flat.has-sidebar main.container .table-wrap > table.resp td.table-action-cell .btn.btn-sm {
    min-height: 32px;
    height: auto;
    padding: .3rem .7rem;
    font-size: .82rem;
  }
  /* data-lists.css ghim width:auto cho nút trong ô thao tác với độ ưu tiên cao;
     nút nằm trong <form> phải kéo hết bề ngang của form mới cân. */
  body.site-flat.has-sidebar main.container .table-wrap > table.resp td.table-action-cell form > .btn.btn-sm {
    width: 100%;
  }
  body.site-flat.has-sidebar main.container .table-wrap > table.resp td.table-action-cell .action-icon {
    width: 16px; height: 16px; flex-basis: 16px;
  }
  /* Ô thao tác là hàng cuối của thẻ: bỏ nhãn "Thao tác", nút trải hết bề ngang. */
  body:not(.page-simulation) table.resp td.table-action-cell {
    display: block; padding: .55rem .7rem .75rem;
  }
  body:not(.page-simulation) table.resp td.table-action-cell::before { display: none; }

  body:not(.page-simulation) table.resp td.table-action-cell :is(.actions, .list-actions) {
    display: flex; flex-wrap: wrap; gap: .45rem; width: 100%;
  }
  /* MỌI nút trong ô thao tác đều co đúng bề ngang chữ và dồn về mép phải — một nút hay
     năm nút đều cùng một kiểu. Trước đây mỗi nút bị ép `flex: 1 1 50%` nên hai nút kéo
     căng thành hai thanh dài chạm hai mép thẻ, trông thô và lệch hẳn so với hàng chỉ có
     một nút đã gọn sát phải. Nút dài hơn thẻ thì tự xuống dòng, vẫn dạt phải. */
  body:not(.page-simulation) table.resp td.table-action-cell :is(.actions, .list-actions) > :is(.btn, form) {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
    width: auto;
  }
  body:not(.page-simulation) table.resp td.table-action-cell :is(.actions, .list-actions) form > .btn {
    width: auto;
    max-width: 100%;
  }

  body:not(.page-simulation) .mock-test-card-foot .btn.btn-sm {
    min-height: 32px; height: auto; font-size: .82rem; padding: .3rem .7rem;
  }

  /* Hàng hành động ngoài bảng cũng vậy: nút giãn đều, không bị bóp. */
  body:not(.page-simulation) :is(main, dialog) :is(.actions, .list-actions, .paywall-actions, .post-cta-actions) {
    display: flex; flex-wrap: wrap; gap: .5rem;
  }
  body:not(.page-simulation) .page-head .actions > .btn { flex: 1 1 auto; }

  /* ---------- 2. Ô nhập: 16px để iOS không tự phóng to trang ---------- */
  body:not(.page-simulation) :is(main, dialog) :is(input[type=text], input[type=email], input[type=password],
    input[type=tel], input[type=number], input[type=search], input[type=url],
    input[type=date], input[type=time], input[type=datetime-local], select, textarea) {
    min-height: 46px;
    font-size: 16px;
    border-radius: 10px;
  }
  body:not(.page-simulation) :is(main, dialog) textarea { min-height: 110px; line-height: 1.6; }
  body:not(.page-simulation) :is(main, dialog) :is(input[type=checkbox], input[type=radio]) {
    width: 20px; height: 20px; min-height: 0;
    flex: 0 0 20px; /* nằm trong hàng flex thì không bị bóp méo */
  }
  /* Cả dòng nhãn thành vùng bấm cho dễ trúng ô tích. */
  body:not(.page-simulation) :is(main, dialog) label:has(> input[type=checkbox]),
  body:not(.page-simulation) :is(main, dialog) label:has(> input[type=radio]) {
    display: flex; align-items: center; gap: .6rem; min-height: 44px;
  }

  /* ---------- 3. Chữ quá nhỏ để đọc trên điện thoại ---------- */
  /* Tab trạng thái đang .85rem (≈12,3px) và co lại còn 11,9px — nâng lên cho dễ đọc. */
  body.site-flat main.container .status-tabs > a { min-height: 38px; font-size: .9rem; }
  body:not(.page-simulation) .status-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Nhãn chuyên mục là thông tin phụ, không phải nút bấm chính — 40px là quá khổ
     trên điện thoại, chiếm nguyên một dòng ngay trên tiêu đề bài. */
  body:not(.page-simulation) .post-cat {
    font-size: .78rem; padding: .18rem .6rem;
    min-height: 26px; display: inline-flex; align-items: center;
  }
  /* Dòng nguồn tham khảo dưới mỗi đề chỉ 11,3px. */
  body:not(.page-simulation) :is(.exam-source-line, .exam-source-content) { font-size: .88rem; }
  body:not(.page-simulation) :is(.exam-source-line, .exam-source-content) a {
    display: inline-block; padding-block: .15rem;
  }
  /* Nút chuyển trang của danh sách: 34px → 44px. */
  body:not(.page-simulation) .pager-btn { min-width: 38px; min-height: 38px; font-size: .9rem; }
  /* Đường dẫn chọn chương trình → kỹ năng trên trang đề.
     32px thay vì 40px: đây là chuỗi liên kết chữ nằm ngang, không phải nút bấm chính,
     mà 40px làm cả dải cao 52px cho đúng một dòng chữ — nhìn rời rạc hẳn với tiêu đề
     ngay dưới. 32px kèm đệm dọc vẫn đủ rộng để bấm trúng. */
  body.site-flat main.container .exam-breadcrumb a {
    min-height: 26px; padding-block: 0; display: inline-flex; align-items: center; font-size: .92rem;
  }
  /* Cả cụm đường dẫn đang chiếm 73px chiều dọc cho một dòng chữ ngắn (khối 44px +
     lề dưới 14,5px + 15px hở xuống khối kế). Siết đệm và lề cho sát nội dung. */
  body.site-flat main.container :is(.exam-breadcrumb, .post-breadcrumb) {
    padding-block: .1rem !important;
    margin-bottom: .3rem !important;
  }
  body:not(.page-simulation) .post-book-note { font-size: .88rem; }
  body:not(.page-simulation) .post-breadcrumb a {
    min-height: 26px; padding-block: 0; display: inline-flex; align-items: center;
  }
  /* Đường dẫn chỉ có MỘT mục thì mục đó trỏ về chính trang đang mở — bấm vào không đi
     đâu cả, mà nội dung lại trùng với tiêu đề ngay bên dưới ("Chương trình" ở trên,
     "1. CHỌN CHƯƠNG TRÌNH" ở dưới). Dấu › chỉ xuất hiện khi đã đi sâu hơn một cấp,
     nên :has(span) phân biệt được hai trường hợp. Ẩn ở cấp trên cùng, giữ khi đi sâu. */
  body:not(.page-simulation) :is(.exam-breadcrumb, .post-breadcrumb):not(:has(span)) {
    display: none;
  }
  /* Nút mở/đóng mục lục bài viết chỉ cao 18px — gần như không bấm trúng. */
  body:not(.page-simulation) .toc-head { min-height: 44px; padding-block: .5rem; }

  /* Tên mục trong thẻ thường là link mở chi tiết — cho nó vùng chạm cao hơn dòng chữ. */
  body:not(.page-simulation) table.resp td:first-child a {
    display: inline-flex; align-items: center; min-height: 40px;
  }

  /* Đường dẫn dài (redirect URI của Google) phải xuống dòng, không đẩy tràn trang. */
  body:not(.page-simulation) :is(code, kbd, samp) { overflow-wrap: anywhere; word-break: break-word; }
  body:not(.page-simulation) .google-steps { padding-left: 1.15rem; }
  body:not(.page-simulation) .google-steps li { margin: .35rem 0; line-height: 1.55; }

  /* ---------- 4. Khoảng thở ---------- */
  body:not(.page-simulation) .page-head { flex-direction: column; align-items: stretch; gap: .75rem; }
  body:not(.page-simulation) .page-head h1 { font-size: 1.32rem; line-height: 1.3; }
  body:not(.page-simulation) .card { border-radius: 14px; }
}

/* ---------- 5. Thành phần của Freemium (freemium-v1.css nạp sau, cần tiền tố body) ---------- */
@media (max-width: 760px) {
  /* Ô tích việc trong lộ trình 7 ngày: 28px quá nhỏ. */
  body .trial-check { width: 44px; height: 44px; flex: 0 0 44px; }
  body .trial-check .ui-icon { width: 18px; height: 18px; }
  /* Ô tích bên trái, nội dung bên phải, nút hành động xuống dòng dưới nội dung —
     không để ô tích chiếm trọn một dòng trống. */
  body .trial-task {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas: "check body" ". action";
    align-items: start;
    gap: .5rem .75rem;
  }
  body .trial-task-check { grid-area: check; }
  body .trial-task-body { grid-area: body; padding-top: .35rem; }
  body .trial-task .btn { grid-area: action; margin-left: 0; justify-self: start; }

  /* Chấm sao: mỗi ngôi sao là một vùng chạm 44px thay vì 22px. */
  body .pf-stars { gap: .1rem; }
  body .pf-star {
    width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.75rem; padding: 0;
  }
  body .pf-score .stars .star { font-size: 1.4rem; }
  body .post-feedback { padding: 1rem; border-radius: 14px; }
  body .pf-form textarea { min-height: 120px; }

  /* Pop-up học phí: hai nút xếp dọc, trải rộng cho ngón cái. */
  body .paywall-dialog { border-radius: 16px; }
  body .paywall-actions .btn { flex: 1 1 100%; }
  body .signup-perks li { padding-left: 28px; }
}

/* ============================================================
   Ngăn kéo menu trên điện thoại: dùng chiều cao THẬT của khung nhìn — sửa 2026-09-20.
   style.css:550 đặt `height: 100vh` cho ngăn kéo. Trên trình duyệt điện thoại, 100vh là
   chiều cao KHI ĐÃ ẨN thanh địa chỉ, tức luôn cao hơn phần đang nhìn thấy. Ngăn kéo là
   cột dọc có khối "Liên hệ nhanh" ghim ở đáy, nên phần đáy đó bị đẩy xuống dưới mép màn
   hình; mà nội dung vừa đúng 100vh nên không có gì để cuộn tới nó — người dùng mở menu
   và không bao giờ thấy 4 nút liên hệ. 100dvh co theo thanh địa chỉ nên đáy luôn nằm trong
   tầm nhìn; dòng 100vh phía trên giữ làm dự phòng cho trình duyệt cũ.
   Cho ngăn kéo cuộn được để phòng máy màn hình rất thấp hoặc khi phóng to chữ.
   ============================================================ */
@media (max-width: 1023px) {
  body.has-sidebar .sidebar {
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ============================================================
   Bớt chữ thừa trên điện thoại — 2026-09-20.
   Bảng chuyển thành thẻ (khối "v6" trong style.css) đang in nhãn cột lên TỪNG thẻ.
   Với ô đầu tiên, nhãn đó luôn trùng với chủ đề của trang ("BÀI GIẢNG" trên trang
   Bài giảng video, "BÀI THI" trên trang bài thi...) và lặp lại ở mọi thẻ — chỉ tốn
   một dòng mà không cho thêm thông tin nào, vì tên mục nằm ngay bên dưới đã in đậm.
   Chỉ ẩn NHÃN của ô đầu, mọi nhãn còn lại giữ nguyên vì chúng phân biệt các giá trị.
   ============================================================ */
@media (max-width: 760px) {
  body:not(.page-simulation) table.resp td:first-child::before { display: none; }
  body:not(.page-simulation) table.resp td:first-child { padding-top: .6rem; }

  /* Dòng mào đầu của thẻ bộ thi thử lặp gần như nguyên văn tiêu đề ngay dưới nó
     ("Bộ thi thử 4 kỹ năng · Bản rút gọn" rồi "IELTS ACADEMIC · BỘ THI THỬ 4 KỸ NĂNG 01"),
     và lặp ở mọi thẻ trong danh sách. Trên màn hình hẹp thì bỏ đi cho đỡ rối.
     Vẫn giữ ở phần đầu trang chi tiết (.mock-test-head) vì ở đó nó là nhãn phân loại. */
  body:not(.page-simulation) .mock-test-card .mock-test-eyebrow { display: none; }

  /* Ghi chú giải thích dài ở đầu trang: giữ nội dung (là thông tin cần thiết) nhưng
     thu gọn cỡ chữ và khoảng cách để không chiếm nửa màn hình đầu tiên. */
  body:not(.page-simulation) main .alert { font-size: .86rem; line-height: 1.5; padding: .6rem .75rem; }
  body:not(.page-simulation) main .freemium-note { font-size: .82rem; line-height: 1.5; }
}

/* Cột chỉ có một giá trị duy nhất thì trang đã nêu một lần ở trên (xem student/lessons.php);
   ẩn nó trong thẻ để không lặp lại ở mọi mục. Chỉ ẩn trên màn hình hẹp — ở chế độ bảng
   trên máy tính, cột vẫn cần thiết để đọc theo hàng. */
@media (max-width: 760px) {
  body:not(.page-simulation) table.resp.hide-col-2-mobile td:nth-child(2) { display: none; }
  body:not(.page-simulation) table.resp.hide-col-3-mobile td:nth-child(3) { display: none; }
  body:not(.page-simulation) main .list-context-note {
    margin: 0 0 .5rem; font-size: .82rem; font-weight: 600; color: var(--text-2);
  }
}
/* Trên máy tính dòng tóm tắt này thừa vì bảng đã có cột riêng. */
@media (min-width: 761px) { .list-context-note { display: none; } }

/* ============================================================
   Ô "Thao tác" chỉ có MỘT nút — sửa 2026-09-20.
   Quy tắc ở trên cho mỗi nút `flex: 1 1 calc(50% - .25rem)` để hai nút xếp vừa một
   hàng. Nhưng khi ô chỉ có đúng một nút thì flex kéo nó giãn hết bề ngang thẻ, thành
   một thanh dài ~358px chỉ để chứa hai chữ — vừa thừa vừa làm mọi hàng trông giống
   nhau, không còn phân biệt được hành động chính với hành động phụ.
   Có một nút thì để nó đúng bề ngang nội dung và dạt về mép phải, đúng thói quen đọc
   thẻ (nội dung bên trái, nút bấm góc phải). Từ hai nút trở lên vẫn giãn đều như cũ
   vì lúc đó cần vùng chạm rộng cho cả hai.
   ============================================================ */
@media (max-width: 760px) {
  /* data-lists.css:92 ghim justify-content:flex-start bằng bộ chọn (0,7,4);
     phải chép nguyên bộ chọn đó rồi thêm một lớp nữa mới đè được. */
  body.site-flat main.container .table-wrap > table.resp td.table-action-cell:not(.x) :is(.actions, .list-actions, .path-row-actions) {
    justify-content: flex-end;
  }
  /* Đè lại luật width:100% ở trên (bộ chọn dài nên phải chép nguyên rồi thêm :only-child). */
  body.site-flat.has-sidebar main.container .table-wrap > table.resp td.table-action-cell form:only-child > .btn.btn-sm,
  body:not(.page-simulation) table.resp td.table-action-cell :is(.actions, .list-actions) > form:only-child > .btn {
    width: auto;
  }
  /* Nút một mình cần đệm ngang rộng hơn chút để không quá bé so với thẻ. */
  body:not(.page-simulation) table.resp td.table-action-cell :is(.actions, .list-actions) > .btn:only-child {
    padding-inline: .95rem;
  }
}

/* ============================================================
   Nút trong FORM LỌC không kéo hết bề ngang — 2026-09-20.
   assessments.css:19 ép `.assessment-report-filter button { width:100% }` ở ≤600px,
   nên nút "Xem báo cáo" thành một thanh vàng chạy hết màn hình. Nút lọc là thao tác
   phụ (áp bộ lọc rồi tải lại danh sách), không phải hành động chính của trang, nên
   cho nó đúng bề ngang chữ và dạt phải — cùng ngôn ngữ với nút trong ô "Thao tác".
   Áp cho MỌI form lọc trong khu quản trị, không riêng trang báo cáo.

   Ngoại lệ có chủ ý: nút mang lớp .btn-block vẫn kéo hết bề ngang. Đó là nút chính
   của biểu mẫu (Đăng nhập, Gửi đăng ký, Nộp bài) — trải rộng đúng chuẩn trên điện thoại.
   ============================================================ */
@media (max-width: 760px) {
  body:not(.page-simulation) :is(.assessment-filter, .assessment-report-filter, .path-filters,
    .list-filter-bar, .email-filters, .collection-filter, .stu-filter, form.form-row[method="get"]) {
    align-items: flex-end;
  }
  body:not(.page-simulation) :is(.assessment-filter, .assessment-report-filter, .path-filters,
    .list-filter-bar, .email-filters, .collection-filter, .stu-filter, form.form-row[method="get"])
    :is(button, .btn):not(.btn-block) {
    width: auto;
    flex: 0 0 auto;
    margin-left: auto;
  }
  /* Có form bọc nút trong một ô con (ví dụ .stu-filter-actions ở trang Quản lý học viên).
     Lúc đó margin-left:auto chỉ đẩy nút trong ô con, còn ô con vẫn nằm bên trái — phải
     đẩy chính ô con đó sang phải thì nút mới thẳng hàng với các form lọc khác. */
  body:not(.page-simulation) :is(.assessment-filter, .assessment-report-filter, .path-filters,
    .list-filter-bar, .email-filters, .collection-filter, .stu-filter, form.form-row[method="get"])
    > :is(div, span):has(> :is(button, .btn):not(.btn-block)) {
    margin-left: auto;
    flex: 0 0 auto;
    display: flex;
    gap: .4rem;
  }
}

/* ============================================================
   TRANG LÀM BÀI (.page-simulation) — thu gọn trên điện thoại, 2026-09-20.
   Phần trên của tệp này cố ý loại trừ .page-simulation vì trang thi có hệ kích thước
   riêng. Nhưng trên màn hình hẹp, hệ đó đang quá rộng rãi:
     · mỗi lựa chọn đáp án cao 48px, cách nhau 55px — ba đáp án chiếm gần nửa màn hình,
       mà simulation-v7 lại bỏ viền ô nên nhìn rời rạc, không thành một khối;
     · cụm điều hướng câu hỏi cao 222px;
     · popup công cụ rộng 320px, cao 421px, riêng ô ghi chú đã 110px.
   Dưới đây siết lại, vẫn giữ vùng chạm tối thiểu 36–38px cho ngón tay.
   ============================================================ */
@media (max-width: 760px) {
  /* --- Lựa chọn đáp án --- */
  body.page-simulation.site-flat main.container #exam-root .option-row { margin: .12rem 0 !important; }
  body.page-simulation.site-flat main.container #exam-root .option-row > label {
    min-height: 32px !important; padding: .3rem .6rem .3rem 34px !important;
    line-height: 1.4 !important;
  }
  body.page-simulation.site-flat main.container #exam-root .option-row > input { left: 11px; width: 16px; height: 16px; }

  /* --- Cụm điều hướng câu hỏi --- */
  body.page-simulation .exam-side > .card { padding: .7rem .75rem; }
  body.page-simulation .q-nav { gap: .3rem; }
  body.page-simulation .q-nav a { min-width: 34px; min-height: 34px; }
  body.page-simulation .question-flag-tools { gap: .25rem; margin: .35rem 0 .5rem; }
  body.page-simulation .question-flag-tools small { font-size: .68rem; line-height: 1.4; }
  body.page-simulation .exam-side .btn.btn-sm { min-height: 32px; padding: .28rem .7rem; font-size: .82rem; }
  /* Nút "Câu đã gắn cờ" không cần kéo hết bề ngang, nó là công cụ phụ. */
  body.page-simulation .question-flag-tools { align-items: flex-start; }
  body.page-simulation .question-flag-tools > .btn { width: auto; flex: 0 0 auto; }
  body.page-simulation .exam-side .btn-block { min-height: 40px; }

  /* --- Popup công cụ làm bài --- */
  body.page-simulation .sim-menu-panel {
    width: min(304px, calc(100vw - 18px));
    max-height: min(68vh, 460px);
    gap: 8px; padding: 10px;
  }
  body.page-simulation .sim-menu-panel h3 { font-size: 11px; }
  body.page-simulation .sim-menu-panel label { margin-bottom: 3px; font-size: 11px; }
  body.page-simulation .sim-menu-panel textarea { min-height: 70px; height: 70px; }
  body.page-simulation .sim-menu-panel .btn { min-height: 34px; padding: .3rem .7rem; font-size: .84rem; }
  body.page-simulation .sim-menu-divider { margin: 2px 0; }
}

/* --- Đè lại kích thước của simulation-v7.css trên màn hình hẹp ---
   simulation-v7.css được nạp TỪ TRONG THÂN TRANG (templates/simulation-toolbar.php:13),
   tức luôn đứng sau tệp này, nên cùng độ ưu tiên là nó thắng. Trong đó lại có ba luật
   trùng nhau đẩy dần chiều cao nút 40px → 42px → 44px. Muốn siết lại buộc phải dùng
   !important; đây là chủ ý, không phải lười. Chỉ áp dưới 760px, máy tính giữ nguyên. */
@media (max-width: 760px) {
  body.page-simulation .exam-side > .card :is(.question-flag-tools .btn, #exam-first-unanswered, .sim-nav-button) {
    height: 34px !important; min-height: 34px !important;
    padding: 0 12px !important; font-size: 12.5px !important;
  }
  body.page-simulation .exam-side > .card :is(#submit-btn, #next-section-btn) {
    height: 40px !important; min-height: 40px !important; font-size: 13.5px !important;
  }
  body.page-simulation .q-nav a {
    width: 32px !important; height: 32px !important;
    min-width: 32px !important; min-height: 32px !important;
    font-size: 12.5px !important;
  }
  body.page-simulation .q-nav { gap: .28rem; padding: .35rem .15rem .45rem; }
}

/* ============================================================
   Biểu tượng liên hệ trong ngăn kéo menu bị méo — sửa 2026-09-20.
   contact-actions.css:44 đặt `flex: 0 0 38px` cho vòng tròn nền, còn
   nav-compact-v1.css:14 lại thu `width: 32px`. Trong ngăn kéo, `.app-contact-link`
   xếp theo CHIỀU DỌC nên `flex-basis` ăn vào CHIỀU CAO: kết quả 32px ngang × 38px dọc
   — vòng tròn thành bầu dục, nhìn như ảnh bị móp (ảnh gốc vuông 50x50, `object-fit`
   vẫn đúng). Ghim lại tỉ lệ 1:1 và bỏ flex-basis cố định.
   Bộ chọn dài hơn nav-compact-v1.css để không phụ thuộc thứ tự nạp.
   ============================================================ */
body.has-sidebar .sb-contact .app-contact-link .contact-logo {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  aspect-ratio: 1 / 1;
}

/* ============================================================
   BÀI VIẾT TRÊN ĐIỆN THOẠI: không cuộn xuống được, kéo xuống lại nhảy lên.
   Sửa 2026-09-20. Nguyên nhân đo được:
   `.post-toc-inline` là `position: sticky` (style.css v44). Khi cuộn tới nơi, script
   trong bai-viet.php gắn lớp `is-stuck`, lớp này ẨN danh sách mục lục đi — chiều cao
   khối tụt từ 215px xuống 68px. Vì sticky vẫn nằm TRONG DÒNG CHẢY, toàn bộ nội dung
   phía dưới bị kéo lên 147px ngay giữa lúc ngón tay đang vuốt (đo: chiều cao trang
   4262px → 4115px). Cuộn ngược lên thì nó bung ra, đẩy xuống lại — thành ra càng kéo
   càng bị giật ngược, không đọc tiếp được.
   Cách xử lý: trên màn hình ≤1100px giữ mục lục ở dạng khối TĨNH và luôn mở, chiều cao
   không bao giờ đổi nên không còn cú nhảy nào. Mất tính năng thanh mục lục ghim trên
   đầu, đổi lại là đọc được bài. Muốn ghim lại thì phải chừa sẵn chỗ trống bằng đúng
   phần chiều cao bị thu, chứ không thể thu trực tiếp trên phần tử đang nằm trong dòng chảy.
   ============================================================ */
/* ============================================================
   THANH MỤC LỤC NỔI (bản thứ tư, 2026-09-20) — xem chú thích dài trong bai-viet.php.
   Khối mục lục trong bài giữ TĨNH và luôn mở: chiều cao không bao giờ đổi nên không
   có gì để trình duyệt tính lại giữa cú vuốt. Thanh ghim là phần tử riêng dưới đây,
   `position: fixed` — hiện/ẩn nó không đụng tới bố cục trang.
   ============================================================ */
@media (max-width: 1100px) {
  .post-toc-inline { position: static !important; }
  .post-toc-inline.is-stuck > ol { display: grid !important; }
}

.toc-floating {
  position: fixed; z-index: 40;
  /* Thanh dưới cùng của .mobilebar nằm ở 58px. Chừa thêm 8px cho thanh nổi tách hẳn
     khỏi mép, vì nó có bo góc — dính sát mép mà vẫn bo góc thì nhìn như bị cắt cụt. */
  top: calc(66px + env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  right: max(10px, env(safe-area-inset-right));
  background: #fff; border: 1px solid #e3eaf3; border-radius: 12px;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .14);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  pointer-events: none;
}
.toc-floating.is-visible { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.toc-float-head {
  display: flex; align-items: center; gap: .45rem; width: 100%;
  padding: .5rem .7rem; background: none; border: 0; font: inherit; cursor: pointer;
  color: var(--gold-2, #8a5e00); text-align: left; min-height: 38px;
}
.toc-float-head .ui-icon { width: 15px; height: 15px; flex: 0 0 auto; }
.toc-float-current {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .82rem; font-weight: 650; color: var(--text, #101828);
}
.toc-float-chev { margin-left: auto; transition: transform .16s ease; }
.toc-floating.is-open .toc-float-chev { transform: rotate(90deg); }
.toc-float-list { display: none; margin: 0; padding: 0 .7rem .6rem 1.5rem; }
.toc-floating.is-open .toc-float-list { display: block; max-height: 46vh; overflow: auto; }
.toc-float-list li { margin: .2rem 0; }
.toc-float-list a { font-size: .84rem; line-height: 1.45; color: var(--text-2, #344054); }
@media (min-width: 1101px) { .toc-floating { display: none; } }
/* ============================================================
   TRANG LÀM BÀI — gom cụm điều khiển, 2026-09-20 (đợt 2).
   Ba việc theo yêu cầu: hàng số câu chỉ một dòng kéo ngang; hai nút "Câu đã gắn cờ"
   và "Xem câu chưa trả lời" thu thành biểu tượng đứng trước nút Nộp bài; nút "Gắn cờ"
   trên mỗi câu nhỏ lại.
   Dùng !important vì simulation-v7.css nạp từ thân trang nên luôn đứng sau tệp này.
   ============================================================ */
@media (max-width: 760px) {
  /* --- 1. Hàng số câu: một dòng, vuốt ngang --- */
  body.page-simulation .exam-side .q-nav {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    justify-content: flex-start !important;
    padding-bottom: .2rem;
  }
  body.page-simulation .exam-side .q-nav::-webkit-scrollbar { display: none; }
  body.page-simulation .exam-side .q-nav a { flex: 0 0 auto; }

  /* --- 2. Hai công cụ nằm BÊN TRÁI, cùng hàng với cặp mũi tên, có chữ --- */
  /* .sim-nav-controls (do simulation-v4.js dựng) có `margin-left: auto` nên tự dạt phải;
     chỉ cần cho nó cùng `order` với hai nút công cụ là ba thứ chung một hàng:
     công cụ bên trái, mũi tên bên phải. Hàng số câu và nút Nộp bài mỗi thứ một hàng riêng. */
  body.page-simulation .exam-side > .card { flex-wrap: wrap; gap: .4rem; align-items: center; }
  body.page-simulation .exam-side > .card .q-nav { order: 1; flex: 1 1 100%; }
  body.page-simulation .exam-side > .card .question-flag-tools { order: 2; flex: 0 0 auto; margin: 0; }
  body.page-simulation .exam-side > .card #exam-first-unanswered { order: 2; flex: 0 0 auto; }
  body.page-simulation .exam-side > .card .sim-nav-controls { order: 2; flex: 0 0 auto; }
  body.page-simulation .exam-side > .card :is(#submit-btn, #next-section-btn) { order: 3; flex: 1 1 100%; }

  /* "Xem câu chưa trả lời" hiện đủ chữ; nút gắn cờ chỉ cần biểu tượng + số đếm,
     vì nhãn của nó dài mà thông tin thực sự nằm ở con số. */
  body.page-simulation .exam-side #exam-first-unanswered .btn-label { display: inline !important; }
  body.page-simulation .exam-side .question-flag-tools .btn-label { display: none !important; }
  body.page-simulation .exam-side #exam-first-unanswered {
    width: auto !important; min-width: 0 !important;
    padding: 0 .6rem !important; gap: .3rem; font-size: 12px !important;
  }
  body.page-simulation .exam-side .question-flag-tools > .btn {
    width: auto !important; min-width: 0 !important;
    padding: 0 .5rem !important; gap: .25rem; font-size: 12px !important;
  }
  body.page-simulation .exam-side #exam-first-unanswered .ui-icon,
  body.page-simulation .exam-side .question-flag-tools > .btn .ui-icon { width: 15px; height: 15px; }
  body.page-simulation .exam-side .question-flag-tools small { display: none; }
  body.page-simulation .exam-side .question-flag-tools { flex-direction: row; align-items: center; }

  /* --- 3. Nút "Gắn cờ" trên từng câu hỏi --- */
  body.page-simulation .question-flag-button {
    min-height: 28px !important; height: 28px !important;
    padding: 0 .55rem !important; font-size: 11.5px !important; gap: .25rem;
  }
  body.page-simulation .question-flag-button .ui-icon { width: 14px; height: 14px; }
}

/* ============================================================
   Nút "Câu đã gắn cờ" ở trang XEM LẠI BÀI LÀM — sửa 2026-09-20.
   Đợt trước chỉ thu gọn cụm này ở trang đang thi (.page-simulation), nên trang xem lại
   vẫn giữ `align-items: stretch` của .question-flag-tools và nút kéo hết 358px bề ngang.
   Cùng một nút, cùng một chức năng thì phải cùng một dáng: co đúng bề ngang chữ.
   Dòng ghi chú nhỏ bên dưới vẫn giữ (ở đây còn chỗ), chỉ xuống hàng riêng.
   ============================================================ */
@media (max-width: 760px) {
  body:not(.page-simulation) .question-flag-tools {
    flex-direction: row; align-items: center; flex-wrap: wrap; gap: .35rem .5rem;
  }
  body:not(.page-simulation) .question-flag-tools > .btn { width: auto; flex: 0 0 auto; }
  body:not(.page-simulation) .question-flag-tools small { flex: 1 1 100%; }
}

/* ============================================================
   Đường dẫn bài viết xuống dòng xấu — sửa 2026-09-20.
   style.css:1594 cho phép `flex-wrap: wrap`, còn tên bài (.pb-current) giới hạn 32ch —
   trên màn 390px thì 32ch rộng hơn chỗ còn lại nên tên bài rớt xuống dòng 2, bỏ lại
   dấu "/" lửng ở cuối dòng 1, nhìn như hỏng. (Đệm dọc thêm ở đợt trước khiến nó dễ
   tràn hơn.) Ép cả đường dẫn về MỘT dòng, tên bài tự cắt bằng dấu ba chấm.
   ============================================================ */
@media (max-width: 760px) {
  body:not(.page-simulation) .post-breadcrumb {
    flex-wrap: nowrap; min-width: 0; align-items: center; gap: .3rem;
  }
  body:not(.page-simulation) .post-breadcrumb > * { flex: 0 0 auto; }
  body:not(.page-simulation) .post-breadcrumb .pb-current {
    max-width: none; min-width: 0; flex: 1 1 auto;
  }
}

/* Ba thứ (nút cờ + "Xem câu chưa trả lời" + cặp mũi tên) cộng lại 345px trong khung
   342px nên mũi tên bị rớt hàng. Siết vài pixel cho vừa đúng một hàng. */
@media (max-width: 760px) {
  body.page-simulation .exam-side > .card { gap: .3rem; }
  body.page-simulation .exam-side .sim-nav-controls { gap: 5px !important; }
  body.page-simulation .exam-side .sim-nav-button {
    width: 36px !important; min-width: 36px !important; padding: 0 !important; justify-content: center;
  }
  body.page-simulation .exam-side .sim-nav-label { display: none; }
  body.page-simulation .exam-side #exam-first-unanswered {
    padding: 0 .5rem !important; font-size: 11.5px !important;
  }
}

/* ============================================================
   Popup công cụ làm bài: hai nút "Tương phản" / "Toàn màn hình" đứng cùng hàng
   và có biểu tượng dẫn đầu — 2026-09-20.
   Trước đây mỗi nút chiếm trọn một hàng (simulation-v7.css đặt `.sim-menu-panel .btn
   { width: 100% }`), popup vì thế dài lê thê. Hai nút này ngắn, xếp đôi là vừa.
   ============================================================ */
.page-simulation .sim-menu-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.page-simulation .sim-menu-pair .btn {
  width: 100%; min-width: 0; padding: 0 6px !important; gap: .25rem;
  justify-content: center; font-size: 11.5px !important; letter-spacing: -.01em;
}
.page-simulation .sim-menu-pair .btn > span,
.page-simulation .sim-menu-panel #sim-clear-highlight > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.page-simulation .sim-menu-panel .btn .ui-icon { width: 15px; height: 15px; flex: 0 0 auto; }
.page-simulation .sim-menu-panel #sim-clear-highlight { gap: .35rem; }

/* ============================================================
   Chữ dài bị cắt bằng "..." thì cho kéo ngang xem hết — 2026-09-20.
   Dự án đã có sẵn cơ chế này cho tiêu đề thanh trên (nav-compact-v1.css:17):
   gắn `data-drag-scroll` rồi đổi `text-overflow: ellipsis` thành cuộn ngang, kèm
   hiệu ứng mờ ở mép để báo còn chữ phía sau. Ở đây áp đúng cơ chế đó cho những chỗ
   còn lại đang cắt cụt: tiêu đề bài thi/Speaking, tên thí sinh, tên bài trong đường dẫn.
   drag-scroll-v1.js đã được thêm các bộ chọn này nên tự gắn thuộc tính và tự cập nhật
   lớp ds-more-left/right.
   ============================================================ */
:is(.sim-title h1, .sim-candidate strong, .post-breadcrumb .pb-current)[data-drag-scroll] {
  text-overflow: clip !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: nowrap;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

/* ============================================================
   Ô tìm kiếm bài viết bị lệch — sửa 2026-09-20.
   Đợt thu nhỏ nút mobile hạ .btn xuống 34px, nhưng ô nhập vẫn giữ 48px (luật cỡ chữ
   16px chống trình duyệt tự phóng to). Hai thứ nằm cạnh nhau mà lệch 14px chiều cao
   nên nhìn như vỡ bố cục. Cho nút cao bằng đúng ô nhập.
   ============================================================ */
.blog-search { align-items: stretch; min-width: 0; }
/* Ô nhập phải co được, nếu không nó giữ bề ngang mặc định của <input> và đẩy nút
   "Tìm" ra ngoài mép phải — thấy rõ ở khổ 320px. */
.blog-search .bs-field { min-width: 0; flex: 1 1 auto; }
.blog-search input[type="search"] { min-width: 0; width: 100%; }
.blog-search > button[type="submit"] {
  height: auto; min-height: 0; align-self: stretch; padding-inline: 1.1rem;
}

/* ============================================================
   Cặp nút trong thẻ "Đặt lịch học thử": xếp một hàng — 2026-09-20.
   style.css:2056 cho mỗi nút `width: 100%` nên chúng xếp chồng, chiếm hai dòng cho
   hai hành động ngắn. Trên điện thoại màn hình đã hẹp, hai nút chia đôi một hàng là
   vừa và đỡ tốn chỗ. Chữ dài thì tự xuống dòng trong nút chứ không tràn.
   ============================================================ */
@media (max-width: 760px) {
  body:not(.page-simulation) :is(.side-book, .post-cta, .blog-cta) {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch;
  }
  body:not(.page-simulation) :is(.side-book, .post-cta, .blog-cta) > :is(h2, p) { flex: 1 1 100%; margin-bottom: .35rem; }
  body:not(.page-simulation) :is(.side-book, .post-cta, .blog-cta) > .btn {
    flex: 1 1 calc(50% - .25rem);
    width: auto !important;
    margin-top: 0 !important;
    min-width: 0;
    padding-inline: .6rem;
    font-size: .84rem;
    white-space: normal;
    line-height: 1.25;
  }
}

/* ============================================================
   LƯỚI THẺ BÀI VIẾT (tin-tuc.php) — 2026-04-20... đúng ra là 2026-09-20.
   Trước đây danh sách bài là một cái BẢNG, trên điện thoại bị bẻ thành thẻ nhiều dòng
   nhãn/giá trị ("CHUYÊN MỤC", "NGÀY ĐĂNG"...) — dài dòng mà không có ảnh, mỗi bài
   chiếm gần nửa màn hình. Nay là lưới thẻ thật: ảnh bìa 16:9 ở trên, tiêu đề tối đa
   2 dòng rồi cắt bằng dấu ba chấm. Hai thẻ một hàng trên điện thoại, ba trên máy tính.
   ============================================================ */
.post-grid {
  list-style: none; margin: 0 0 1rem; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem;
}
.post-grid-item { min-width: 0; }
.post-card-link {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--border, #e4e7ef); border-radius: 14px;
  overflow: hidden; color: inherit; text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.post-card-link:hover {
  text-decoration: none; border-color: var(--primary, #01468c);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .1); transform: translateY(-1px);
}
.post-card-cover { display: block; aspect-ratio: 16 / 9; background: #eef3f9; overflow: hidden; }
.post-card-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Bài chưa có ảnh: ô màu nhạt kèm biểu tượng, để lưới không bị khuyết ô. */
.post-card-cover[data-no-cover] {
  display: grid; place-items: center;
  background: linear-gradient(135deg, #eef4fb, #dce8f6); color: #5b7fa6;
}
.post-card-cover[data-no-cover] .ui-icon { width: 26px; height: 26px; }
.post-card-body { display: flex; flex-direction: column; gap: .25rem; padding: .55rem .6rem .65rem; }
.post-card-cat {
  align-self: flex-start; max-width: 100%;
  padding: .1rem .45rem; border-radius: 999px;
  background: var(--gold-soft, #fff8e3); color: var(--gold-ink, #8a5e00);
  font-size: .66rem; font-weight: 700; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.post-card-title {
  font-size: .85rem; font-weight: 650; line-height: 1.35; color: var(--text, #101828);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-overflow: ellipsis;
}
.post-card-date { margin-top: auto; font-size: .72rem; color: var(--muted, #667085); }

@media (min-width: 761px) {
  .post-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .post-card-title { font-size: .95rem; -webkit-line-clamp: 2; }
  .post-card-body { padding: .7rem .8rem .8rem; }
  .post-card-cat { font-size: .7rem; }
}

/* ============================================================
   Nút hành động của trang khi bị dời lên thanh trên cùng — 2026-09-20.
   app-v2.js chuyển `.page-head .actions` vào `#app-topbar-actions`, nơi topbar-v2.css
   ghim `height: 38px` cho mọi nút. Các luật thu nhỏ ở đầu tệp này cố ý chỉ áp trong
   `main`/`dialog` (topbar/sidebar có hệ riêng, đụng vào dễ bị cắt chữ), nên hai nút
   kiểu "Ẩn nghĩa để tự kiểm tra" vẫn cao 38px và trông quá khổ trên điện thoại.
   Hạ xuống 32px + chữ nhỏ hơn một nấc, có kiểm tra chữ không bị cắt.
   ============================================================ */
@media (max-width: 760px) {
  body.has-sidebar .app-topbar-actions :is(.btn, button.btn, a.btn) {
    height: 32px !important; min-height: 32px !important;
    padding: 0 .65rem !important; font-size: 12px !important;
  }
  body.has-sidebar .app-topbar-actions .btn .ui-icon { width: 14px; height: 14px; }
}

/* ============================================================
   Ô tìm kiếm bài viết: bên trong và khung bọc phải là MỘT khối — 2026-09-20.
   `.bs-field` là viên thuốc trắng bo 999px, nhưng `<input type="search">` bên trong
   vẫn giữ dáng riêng (bo 10px) và kiểu mặc định của trình duyệt cho ô tìm kiếm
   (`-webkit-appearance: searchfield`) — trên điện thoại nó tự vẽ thêm một khối bo góc
   nữa, nhìn thành hai lớp chồng nhau lệch kiểu. Ép ô nhập trong suốt hoàn toàn và
   bỏ mọi trang trí mặc định, để chỉ còn một viên thuốc duy nhất.
   ============================================================ */
.blog-search .bs-field input[type="search"] {
  appearance: none; -webkit-appearance: none;
  background: transparent !important;
  border: 0 !important;
  border-radius: inherit !important;
  box-shadow: none !important;
  outline: none;
}
.blog-search .bs-field input[type="search"]::-webkit-search-decoration,
.blog-search .bs-field input[type="search"]::-webkit-search-cancel-button,
.blog-search .bs-field input[type="search"]::-webkit-search-results-button {
  -webkit-appearance: none; appearance: none;
}
/* Vành sáng khi gõ phím đặt lên KHUNG, không đặt lên ô nhập, để vẫn là một viên thuốc. */
.blog-search .bs-field:focus-within {
  box-shadow: 0 0 0 3px rgba(1, 70, 140, .28);
}