/* ==========================================================================
   Base / Break-out guard — dải 1024px..1551px
   --------------------------------------------------------------------------
   ⚠️ CẬN TRÊN KHÔNG NẰM TRONG FILE NÀY (2026-09-14, spec display-settings §4.3):
     - WordPress enqueue riêng file này với `media="(max-width: min(X,1552)−1px)"` do
       PHP tính theo khung web (mt_display_guard_media() — inc/display-settings.php).
     - Trang HTML tĩnh nạp qua `@import … (max-width: 1551px)` trong style.css.
   Kết hợp với `@media (min-width:1024px)` dưới đây ⇒ guard bật đúng dải như trước.
   Thiết kế PSD rộng 1800px: vùng nội dung .container = 1452, và nhiều panel
   trong PSD rộng HƠN 1452 (1502 / 1503 / 1504 / 1588) nên được dựng bằng
   `margin-inline` âm hoặc px cứng trong `@media (min-width:1024px)`.

   Các số đó CHỈ vừa khi viewport >= 1552 (1452 + 2×24 padding + 52 tràn).
   Ở 1280px (laptop phổ thông) container chỉ còn 1249 ⇒ mọi px cứng tràn ngang:
     index 1293>1249 · mentor 1293>1249 · gio-hang 1452>1249 · lien-he 1452>1249
     thanh-toan 1441>1264 · khoa-hoc-loc 1743>1249 · goi-hoi-vien 1251>1249
   Ở >=1552 khối này tắt hoàn toàn, giữ nguyên độ chính xác 1:1 với PSD.

   Nạp CUỐI trong style.css để thắng các rule 1024px (cùng specificity, sau).
   ========================================================================== */

@media (min-width: 1024px) {
  /* --- 1. thu mọi break-out về đúng vùng container --- */
  .mentor-stats,
  .mprofile__panel,
  .cart__panel,
  .mentors__grid,
  .mentor-grid,
  .results__grid,
  .course-filter,
  .mem-plans__scroll,
  .slider--mentors .slider__track,
  .sched-filter,
  .klg__panel,
  .docs__grid {
    margin-inline: 0;
  }

  /* --- 2. các panel dùng max-width lớn hơn container --- */
  .blog-layout,
  .checkout__grid,
  .contact__grid {
    max-width: 1500px;
  }

  /* --- 3. lưới px cứng → tỉ lệ --- */
  .checkout__grid {
    grid-template-columns: minmax(0, 433fr) minmax(0, 475fr) minmax(0, 465fr);
    column-gap: 2.6%;
    padding-inline: 24px;
  }
  .checkout__grid::after { display: none; }      /* gạch 947px cứng */
  .co-back { position: static; margin-top: 40px; }
  .co-summary { min-height: 0; }
  .co-item { min-height: 0; }
  .co-summary__list { gap: 28px; }
  .co-coupon button { width: auto; padding-inline: 28px; }

  .contact__grid {
    grid-template-columns: minmax(0, 906fr) minmax(0, 489fr);
    column-gap: 3.2%;
    padding-inline: 24px;
  }
  .vti-card { grid-template-columns: 89px minmax(0, 1fr); height: auto; padding: 18px 18px 18px 19px; }

  .cart__head,
  .cart-row {
    grid-template-columns: 41px 37px 30px minmax(0, 401fr) 24px minmax(0, 559fr) 24px minmax(0, 278fr);
  }
  .cart-row { min-height: 0; padding-top: 34px; padding-bottom: 34px; }
  .cart-row .cart-row__check { margin-top: 0; align-self: center; }
  .cart-row__name { max-width: none; }
  .cart-row__amount { margin-top: 0; }
  .cart-row__remove { width: auto; padding-inline: 20px; }
  .cart__foot { padding: 40px 24px; }
  .cart__checkout { width: min(100%, 567px); }

  /* --- 4. modal: 923px cứng --- */
  .auth__dialog { width: min(100%, 923px); padding-inline: 24px; }
  .auth__tabs { width: min(100%, 737px); }
  .auth__tab { width: 56%; }
  .auth__tab:not(.is-active) { padding-left: 8%; }
  .auth__tab.is-active { width: 48%; margin-left: -4%; }
  .auth__card { padding: 49px 8% 90px; }
  .auth__note { margin-inline: 0; white-space: normal; }
  .notice__card { width: min(100%, 923px); padding: 70px 8% 80px; }
  .notice__actions { margin-inline: 0; flex-wrap: wrap; }
  .notice__btn { width: min(100%, 317px); }

  /* --- 5. bảng so sánh gói (PSD 1503 px cứng) --- */
  .mem-plans__scroll { overflow-x: auto; }
  .mem-table { table-layout: auto; min-width: 900px; }
  .mem-table th[scope="row"],
  .mem-table thead th,
  .mem-table tbody td { width: auto; }

  /* --- 5b. bảng lịch khai giảng ---
     Trước đây vá ở đây theo dải viewport 1024..1551. Nay bảng tự co
     (`min-width: min(1483px, 100%)`) và cỡ chữ hạ theo BỀ RỘNG THẬT của panel
     bằng @container — xem cuối components/schedule-list.css. Đừng thêm lại
     nhánh theo dải ở đây: cận trên đoán tay chính là nguồn của lỗi cũ. */

  /* --- 5c. dashboard tài khoản ---
     Sidebar/logo/pill/padding của dashboard TRƯỚC ĐÂY vá ở đây bằng nhánh %
     riêng cho dải 1024..1551, nên ở 1552 nhánh tắt và layout nhảy (main
     1108,63 → 1041,00 khi màn RỘNG RA 1px). Đã gộp thành một hàm min() liên tục
     ngay trong layout/dashboard.css — KHÔNG thêm lại nhánh theo dải ở đây.
     Ô thống kê .ov-stat cũng vậy: xem components/overview.css. */

  /* Card CTA hội viên: nút 170px không lọt card 279..358px. Cho hai nút chia đôi
     chỗ còn lại thay vì xuống dòng — xuống dòng thì cụm chữ+nút cao hơn banner
     (banner cao ~215px ở 1280) và nút thứ hai bị cắt mất nửa dưới. */
  .ov-mem__cta { gap: 14px; padding-inline: 4%; }
  .ov-mem__headline { font-size: var(--mt-ov-dash_mem_head, clamp(1rem, calc(1.6 * var(--mt-vw)), 1.5rem)); }
  .ov-mem__actions { flex-wrap: nowrap; width: 100%; }
  .ov-mem__btn { flex: 1 1 0; min-width: 0; height: 40px; font-size: var(--mt-ov-dash_mem_btn, .9375rem); }

  /* --- 6. mentor profile: panel + con neo theo % nên chỉ cần bỏ padding ngoài --- */
  .mprofile { padding-inline: 0; }

  /* --- 7. cac card px cung khac (loi CO TU TRUOC, khong do lan sua nay) ---
     LUU Y: min-width:0 cho card/li KHONG con phu thuoc khoang 1024..1551 —
     da dat lai KHONG DIEU KIEN o assets/css/main.css (muc 1a). Vung >=1552px
     truoc day khong duoc va: card tu nong rong theo aspect-ratio roi de len
     card ke ben. Giu lai o day du khong con bat buoc. */
  .mission__card { max-width: 100%; }
  .results__grid > li,
  .results__grid .course-card,
  .slider__track > li,
  .slider__track .course-card { min-width: 0; }
  .cdetail-mentor { overflow-x: clip; }

  /* --- 8. luoi an toan: chan tran vai px do bo tron/vien/scrollbar --- */
  main { overflow-x: clip; }
}

/* Loi tran o TABLET (<=1023) — px cung cua desktop khong duoc lot xuong day */
@media (max-width: 1023px) {
  .cstat { max-width: 100%; min-width: 0; }
  .slider__track > li,
  .slider__track .course-card { min-width: 0; }
  main { overflow-x: clip; }
}