/* ═══ 6. MÁY TÍNH BẢNG VÀ ĐIỆN THOẠI ═══════════════════════════════════════
 * Đặc tả mục 4, ngưỡng 760px; bìa và thẻ nổi có khối điện thoại riêng ở
 * 3-bia-va-the-noi.css. Khoảng 761–1080px không có trong đặc tả, nhưng ở đó
 * 640px cột chữ + 288px cột phải là tràn — nên bỏ cột phải từ 1080px.
 */

.tlk-chi-dt { display: none; }

@media (max-width: 1080px) {
  :root { --le: 24px; }
  .tlk-ray { display: none; }
  .tlk-menu { gap: 18px; }
  .tlk-luoi--4, .tlk-luoi--bai.tlk-luoi--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tlk-luoi--4.tlk-cau-hoi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tlk-luoi--ds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tlk-cach-lam { grid-template-columns: 1fr; }
  .tlk-ml-gap { display: block; }
}

@media (max-width: 900px) {
  .tlk-menu { display: none; }
  .tlk-chi-dt { display: block; }
}

@media (max-width: 760px) {
  :root { --le: 16px; --khoang: 40px; }
  body { font-size: 18px; }                         /* thân giữ 18px */

  /* 1 · Đầu trang: logo + Tìm kiếm + Menu */
  .tlk-chi-mb { display: none !important; }
  .tlk-dau__trong { min-height: 60px; gap: 10px; }
  .tlk-logo__chu { font-size: 15px; letter-spacing: 0.14em; }
  .tlk-logo__thoi { width: 12px; height: 12px; }

  /* 2 · Bài: mục lục gập ngay dưới thẻ nổi */
  .tlk-ml-gap {
    display: block;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 0 16px;
    margin: 16px 0 0;
  }
  .tlk-ml-gap summary { min-height: 48px; display: flex; align-items: center; gap: 10px; cursor: pointer;
    font-family: var(--chu-de); font-size: 15px; font-weight: 700; }
  .tlk-ml-gap .tlk-ml { margin: 0 0 12px; }
  .tlk-bai__chinh > .tlk-van { padding-top: 22px; }
  .tlk-van > p:first-child { font-size: 18px; }

  /* 4 · Nút hành động 48px, toàn chiều ngang */
  .tlk-nut { width: 100%; min-height: 48px; }

  /* 5 · Hàng lọc, dải nhảy và breadcrumb: một hàng vuốt ngang */
  .tlk-chip-hang, .tlk-bc, .tlk-nhay-dang {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .tlk-the-noi .tlk-chip-hang { flex-wrap: wrap; overflow: visible; white-space: normal; }
  .tlk-chip-hang::-webkit-scrollbar, .tlk-bc::-webkit-scrollbar, .tlk-nhay-dang::-webkit-scrollbar { display: none; }
  .tlk-bc li { flex: 0 0 auto; }
  .tlk-nhay-dang a { white-space: nowrap; }
  .tlk-muc__dau { flex-direction: column; align-items: stretch; }
  .tlk-muc { padding-top: 40px; }
  .tlk-muc__de { font-size: 25px; }

  /* 6 · Lưới: thẻ điểm đến và thẻ bài 2 cột (1 cột ≤ 480px, xem cuối file) */
  .tlk-luoi { gap: 14px; }
  .tlk-luoi--4, .tlk-luoi--bai.tlk-luoi--3, .tlk-luoi--dd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tlk-luoi--3, .tlk-luoi--4.tlk-cau-hoi { grid-template-columns: 1fr; }
  .tlk-dd { min-height: 190px; }
  .tlk-dd__than { padding: 12px; }
  .tlk-dd__ten { font-size: 18px; }
  .tlk-tag { font-size: 10.5px; padding: 3px 7px; }

  /* Cỡ chữ */
  h1 { font-size: clamp(28px, 8vw, 40px); }
  .tlk-van h2 { font-size: 24px; padding-left: 21px; }
  .tlk-van h2::before { width: 9px; height: 9px; top: 0.34em; }
  .tlk-bbt { flex-direction: column; }

  /* Lưới thẻ trong nội dung: 2 cột */
  .tlk-van .wp-block-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tlk-van .wp-block-column p { padding: 10px 12px 12px; font-size: 14px; }

  /* Trang tĩnh: bỏ cột mục lục trái */
  .tlk-trang--ml { display: block; }
  .tlk-trang__ml { display: none; }

  /* Chân trang */
  .tlk-chan__luoi { grid-template-columns: 1fr 1fr; gap: 26px; padding-top: 36px; }
  .tlk-chan__luoi > div:first-child { grid-column: 1 / -1; }

  /* Ô nhập: 16px để iOS không tự phóng to */
  input[type="search"], input[type="email"], input[type="text"] { min-height: 50px; font-size: 16px; }

  /* 12 · Trang không bao giờ cuộn ngang */
  html, body { overflow-x: clip; }

  /* 3 · Thanh đặt phòng dính đáy. `fixed` thay vì `sticky`, nên chừa chỗ cuối trang để
     thanh không che chân trang. Mặc định ẨN, tuong-tac.js thêm .is-hien khi thẻ Quick
     answer đã cuộn khỏi màn hình (không JS: <noscript> trong functions.php ép hiện). */
  body:has(.tlk-thanh) { padding-bottom: 76px; }
  .tlk-thanh {
    display: flex;
    gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--surface);
    border-top: 1px solid var(--rule);
    box-shadow: 0 -8px 24px -16px rgba(0, 0, 0, 0.4);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    visibility: hidden;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
  }
  .tlk-thanh.is-hien { transform: none; visibility: visible; opacity: 1; }
  .tlk-thanh .tlk-nut { flex: 1 1 auto; width: auto; font-size: 14px; padding: 0 12px; }
  .tlk-thanh .tlk-nut--vien { flex: 0 0 104px; width: 104px; background: var(--surface); }

  .tlk-ban-do iframe { height: 380px; }
  .tlk-tiep ul { columns: 1; }
  .tlk-luoi--ds { grid-template-columns: 1fr; }
  .tlk-nhom { margin-bottom: 32px; }
  .tlk-nhom h2 { font-size: 22px; }
  /* 8 · Mục lục dạng bài: mỗi điểm đến 3 bài đầu + "See all N guides →" */
  .tlk-muc-luc li:nth-child(n+4) { display: none; }
  .tlk-chi-dt-khoi { display: inline-block; margin-top: 10px; }
}

/* Màn hình hẹp (điện thoại dọc, 390px): một thẻ một hàng — bản thiết kế đã duyệt xem ở 390px */
@media (max-width: 480px) {
  .tlk-luoi--4, .tlk-luoi--bai.tlk-luoi--3, .tlk-luoi--dd { grid-template-columns: 1fr; }
  .tlk-thang__luoi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}