/* ==========================================================================
   RESPONSIVE — TABLET DỌC/NGANG (chống tràn ngang + tinh chỉnh 992–1279px)
   Nạp SAU theme_style_code + custom_header_code (xem master.ejs) để override
   được width/flex CỨNG của layout desktop do Builder sinh ra.
   ========================================================================== */

/* --- (A) Trang KHÁC trang chủ: hàng Builder nhiều cột width cứng → XUỐNG DÒNG (stack) trong 992–1199px
   (container Bootstrap = 960 < tổng bề rộng cột). Trang chủ xử lý riêng ở (D) — giữ nhiều cột. --- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  body:not(.hok-home) #main-content .dmdc-el--container[style*="flex-direction:row"],
  body:not(.hok-home) #main-content .dmdc-el--container[style*="flex-direction: row"] {
    flex-wrap: wrap !important;
  }
  body:not(.hok-home) #main-content .dmdc-el--container[style*="flex-direction:row"] > .dmdc-el {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* --- (C) Ảnh/media không vượt màn (mọi trang) --- */
@media (max-width: 1279.98px) {
  #main-content img,
  #main-content video,
  #main-content iframe { max-width: 100%; height: auto; }
}

/* --- (B) Cụm 3 thẻ tròn trang chủ (#hok-simple-cols: 3×428=1284) tràn tới ~1400px (cả desktop 1366!).
   Chia đều 3 cột co lại vừa 1 hàng — phủ TỚI 1399 (rộng hơn dải scale-down của trang chủ ở D). --- */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .hok-home #hok-simple-cols { flex-wrap: nowrap !important; }
  .hok-home #hok-simple-cols > .dmdc-el--container { flex: 1 1 0 !important; min-width: 0 !important; max-width: 33.333% !important; }
  .hok-home #hok-simple-cols img { max-width: 100% !important; height: auto !important; }
}

/* --- (D) TRANG CHỦ: GIỮ bố cục nhiều cột như màn hình ngang/PC (KHÔNG stack), thu nhỏ vừa màn —
   giảm font, gap, padding, kích thước ảnh. Vì tablet 13.2" dọc đủ lớn để hiển thị gần như PC. --- */
@media (min-width: 992px) and (max-width: 1279.98px) {
  /* Giữ NHIỀU CỘT: huỷ wrap, cho các cột CO LẠI vừa khít 1 hàng */
  .hok-home #main-content .dmdc-el--container[style*="flex-direction:row"],
  .hok-home #main-content .dmdc-el--container[style*="flex-direction: row"] {
    flex-wrap: nowrap !important;
    gap: clamp(8px, 1.4vw, 18px) !important;
  }
  .hok-home #main-content .dmdc-el--container[style*="flex-direction:row"] > .dmdc-el {
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }

  /* Giảm cỡ TIÊU ĐỀ lớn ~2 bậc (55px → ~42px) và co dòng */
  .hok-home #main-content .dmdc-heading-title { line-height: 1.2 !important; }
  .hok-home #hok-hero-title .dmdc-heading-title,
  .hok-home #hok-land-title .dmdc-heading-title,
  .hok-home #hok-simple-title .dmdc-heading-title { font-size: clamp(30px, 3.4vw, 42px) !important; }
  /* Nhãn nhỏ (25px → ~20px) */
  .hok-home #hok-land-label .dmdc-heading-title,
  .hok-home #hok-simple-label .dmdc-heading-title { font-size: clamp(16px, 1.7vw, 20px) !important; }

  /* Giảm chữ thường ~2 bậc */
  .hok-home #main-content .dmdc-el--text_editor,
  .hok-home #main-content .dmdc-el--text_editor p { font-size: clamp(13px, 1.25vw, 15px) !important; line-height: 1.55 !important; }

  /* Giảm PADDING dọc các khối cho gọn (đè inline padding lớn của desktop) */
  .hok-home #main-content > .dmdc-el--container[style*="padding"] {
    padding-top: clamp(24px, 3.2vw, 52px) !important;
    padding-bottom: clamp(24px, 3.2vw, 52px) !important;
  }
}

/* --- (E) FOOTER: giảm cỡ chữ ~2 bậc cho gọn (992–1279px) --- */
@media (min-width: 992px) and (max-width: 1279.98px) {
  #site-footer .dmdc-heading-title { font-size: clamp(16px, 1.9vw, 22px) !important; }
  #site-footer p,
  #site-footer li,
  #site-footer a,
  #site-footer span,
  #site-footer .dmdc-el--text_editor { font-size: clamp(12px, 1.15vw, 14px) !important; line-height: 1.5 !important; }
}