/* ============================================================
   TapHoaThongTin – APP MOBILE & IPAD LAYER  (v1.0)
   Biến giao diện thành "app thật" trên điện thoại + máy tính bảng.
   Nạp SAU style.css. Điểm ngắt "chế độ app": <= 1024px (phủ mọi
   điện thoại + iPad dọc/ngang). iPad Pro 12.9" ngang (>1024) giữ desktop.
   ============================================================ */

/* ---------- 0. NỀN TẢNG APP (mọi thiết bị cảm ứng) ---------- */
@media (max-width: 1024px) {
    html {
        -webkit-text-size-adjust: 100%;      /* iOS không tự phóng chữ khi xoay ngang */
        text-size-adjust: 100%;
    }
    html, body {
        overflow-x: hidden;                  /* chặn tràn ngang – lỗi hay gặp trên mobile */
        max-width: 100%;
        overscroll-behavior-y: none;         /* chặn "kéo quá đà" lộ nền trắng như app */
    }
    body {
        -webkit-tap-highlight-color: transparent;   /* bỏ ô xám khi chạm như app native */
    }
    /* Vùng cuộn mượt kiểu iOS */
    .main-navigation,
    .thtt-webapp-gallery .gallery-thumbs,
    .w3aio-archive-list,
    .cat-chips {
        -webkit-overflow-scrolling: touch;
    }
    /* Ảnh không bao giờ tràn khung */
    img, video, iframe, table { max-width: 100%; }

    /* Container full chiều ngang, lề gọn kiểu app */
    .container { padding-left: 14px; padding-right: 14px; }

    /* Vùng chạm tối thiểu 44px (chuẩn Apple HIG) cho link/nút chính */
    .btn-post-ad,
    .btn-login-header,
    .card-btn,
    .btn-call-big,
    .btn-zalo-big,
    .btn-share-big,
    .callbar-action-btn { min-height: 44px; }

    /* Hiệu ứng nhấn kiểu app cho thẻ & nút */
    .thtt-ad-card:active,
    .w3aio-ad-card:active { transform: scale(.985); }
    .card-btn:active,
    .btn-post-ad:active,
    .cat-chip:active { transform: scale(.96); }
}

/* ---------- 1. THANH TAB DƯỚI (bottom nav) mở rộng cho iPad ---------- */
/* footer.php hiển thị .mobile-bottom-nav ở <=1024 (đã sửa breakpoint).
   Bổ sung tinh chỉnh & an toàn vùng notch. */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Trên iPad thanh tab rộng hơn -> căn giữa, giới hạn bề ngang cho đẹp */
    .mobile-bottom-nav { justify-content: space-evenly; }
    .mobile-bottom-nav .nav-item { min-width: 84px; font-size: .74rem; }
    .mobile-bottom-nav .nav-icon { font-size: 1.45rem; }
}

/* ---------- 2. HEADER dạng app-bar ---------- */
@media (max-width: 1024px) {
    .site-header {
        /* Chừa lề an toàn cho tai thỏ khi chạy dạng PWA/toàn màn hình */
        padding-top: env(safe-area-inset-top);
        height: calc(var(--header-h) + env(safe-area-inset-top));
    }
    .header-inner { gap: 12px; }
    .site-branding .brand-text { font-size: 1.05rem; }
    /* Off-canvas menu cao đúng phần còn lại của màn hình, cuộn mượt */
    .main-navigation {
        top: calc(var(--header-h) + env(safe-area-inset-top));
        height: calc(100vh - var(--header-h) - env(safe-area-inset-top));
        height: calc(100dvh - var(--header-h) - env(safe-area-inset-top));
        border-top-right-radius: 16px;
    }
}

/* Icon tìm kiếm trên mobile: luôn hiện rõ, bấm mở khung tìm kiếm full-width */
@media (max-width: 1024px) {
    .header-search-toggle {
        display: grid !important; place-items: center;
        width: 40px; height: 40px; border-radius: 50%;
        background: var(--bg, #f1f5f9); color: var(--primary, #ff5722);
        font-size: 1.15rem; flex-shrink: 0;
    }
    /* Khung tìm kiếm mở ra chiếm trọn bề ngang, nổi dưới header */
    .header-search-panel { left: 0; right: 0; }
    .header-search-panel.is-open { max-height: 160px; padding: 12px 0; }
    .header-search-panel .container { padding-left: 14px; padding-right: 14px; }
    .header-search-panel input { font-size: 16px; } /* chống iOS auto-zoom */
}

/* Điện thoại nhỏ: nút "Đăng tin" thu gọn chỉ còn icon để đỡ chật */
@media (max-width: 480px) {
    .btn-post-ad {
        padding: 9px 12px;
        font-size: 0; /* ẩn chữ, giữ icon ➕ */
    }
    .btn-post-ad::first-letter { font-size: 1.1rem; }
    .header-actions { gap: 6px; }
    /* Bỏ margin thừa của chuông cho đỡ chật */
    .header-actions > div[style*="margin-right"] { margin-right: 4px !important; }
}

/* ---------- TIN TỨC trên mobile: bỏ lưới 2 cột (featured + side) → 1 cột dễ đọc ---------- */
/* Áp cho cả bản render sẵn LẪN bản nạp qua AJAX (đổi tab) vì cùng cấu trúc con của #thtt-news-grid */
@media (max-width: 768px) {
    #thtt-news-grid > div[style*="1.6fr"] { grid-template-columns: 1fr !important; gap: 14px !important; }
    #thtt-news-grid article { min-width: 0; }               /* tránh chữ vỡ từng ký tự */
    /* Thẻ tin phụ (ảnh nhỏ + tiêu đề) giữ dạng hàng ngang gọn */
    #thtt-news-grid article[style*="display:flex"] img { width: 92px; height: 70px; }
}

/* ---------- Tiêu đề trang (H1) không quá to trên điện thoại ---------- */
@media (max-width: 600px) {
    .entry-title { font-size: 1.5rem !important; margin-bottom: 1rem !important; padding-bottom: 10px; }
    .thtt-news-section h2,
    .section-title { font-size: 1.3rem !important; }
}

/* ---------- Bộ lọc tin (danh mục/khu vực): ẩn mặc định trên mobile, ---------- */
/* chỉ hiện khi người dùng bấm icon 🔍 ở header (JS thêm class .w3aio-filter-open) */
@media (max-width: 1024px) {
    .w3aio-search-filter { display: none; }
    .w3aio-search-filter.w3aio-filter-open { display: block; animation: w3aioFilterDown .2s ease; }
}
@keyframes w3aioFilterDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- 3. LƯỚI TIN – tối ưu từng cỡ màn ---------- */
/* iPad: 3 cột thoáng; điện thoại: 2 cột; máy rất nhỏ: 1 cột (đã có ở style.css) */
@media (min-width: 769px) and (max-width: 1024px) {
    .thtt-ads-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .content-area  { grid-template-columns: 1fr; }   /* bỏ sidebar, full chiều ngang như app */
}
@media (max-width: 768px) {
    .thtt-ads-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .card-thumb { height: 140px; }
    .card-body { padding: 10px 12px 12px; }
    .card-title { font-size: .88rem; }
    .card-price { font-size: 1rem; }
}

/* ---------- 4. TRANG CHI TIẾT TIN – cảm giác app ---------- */
@media (max-width: 1024px) {
    /* 1 cột: nội dung trước, thẻ người bán xuống dưới; CTA chính là sticky call bar */
    .ad-detail-wrap { grid-template-columns: 1fr; }
    /* Ảnh chính cao hơn, bo góc mềm như app xem hàng */
    .thtt-webapp-gallery .gallery-main { aspect-ratio: 4/3; border-radius: 14px; }
    /* Bảng thông tin không còn "dính" (sticky) trên tablet -> đọc tự nhiên */
    .ad-info-card { position: static; }
    /* Chừa chỗ cho sticky call bar */
    body.single-classified_ads { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ---------- 5. FORM & Ô NHẬP: chống iOS auto-zoom ---------- */
@media (max-width: 1024px) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px !important;   /* < 16px iOS sẽ tự phóng to trang khi focus */
    }
}

/* ---------- 6. Dark mode: nền app tối đồng bộ ---------- */
@media (max-width: 1024px) {
    body.dark-mode { background: #0f0f0f; }
    body.dark-mode .site-header { background: rgba(20,20,20,.97) !important; }
}

/* ============================================================
   7. TỐI ƯU MƯỢT CUỘN ANDROID (fix lag/không kéo được)
   backdrop-filter blur trên phần tử sticky/fixed khiến Android
   phải blur lại mỗi khung khi cuộn → giật nặng. Tắt trên mobile,
   dùng NỀN ĐẶC (nhanh, mượt, nhìn vẫn ổn).
   ============================================================ */
@media (max-width: 1024px) {
    .site-header,
    .mobile-bottom-nav,
    .card-category-tag,
    .thtt-mobile-sticky-callbar,
    #w3aio-chatbot-window,
    #w3aio-chatbot-btn,
    .filter-results-bar,
    .cat-tag {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    /* Nền đặc thay cho hiệu ứng mờ */
    .site-header { background: #ffffff !important; }
    .mobile-bottom-nav { background: #ffffff !important; }
    .thtt-mobile-sticky-callbar { background: #ffffff !important; }
    body.dark-mode .site-header,
    body.dark-mode .mobile-bottom-nav,
    body.dark-mode .thtt-mobile-sticky-callbar { background: #1e1e1e !important; }

    /* Tăng tốc cuộn + gợi ý trình duyệt tách lớp compositor cho header/nav cố định */
    .site-header, .mobile-bottom-nav, .thtt-mobile-sticky-callbar { will-change: transform; }
    /* Tắt animation nảy liên tục của nút chatbot (repaint liên tục gây lag) */
    #w3aio-chatbot-btn { animation: none !important; }
}

/* AN TOÀN: không bao giờ để trang bị KHÓA CUỘN khi menu mobile không thực sự mở
   (tránh trạng thái body.nav-open bị kẹt → không kéo được trang). */
@media (max-width: 1024px) {
    body:not(.nav-open) { overflow: visible !important; }
}