<affitrackr-widget></affitrackr-widget>

<script>
class AffitrackrWidget extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block !important;
                    margin: 30px 0 !important;
                    width: 100% !important;
                    font-family: sans-serif !important;
                    /* Bù lại negative margin của .adv-center ở mobile */
                    box-sizing: border-box !important;
                    padding-left: 16px !important;
                    padding-right: 16px !important;
                    /* Override text-align: center từ .adv-center cha */
                    text-align: left !important;
                }

                /* ── Header ── */
                .box-title {
                    font-size: 18px;
                    color: #333;
                    border-left: 4px solid #e11d48;
                    padding-left: 10px;
                    margin: 0 0 20px;
                    font-weight: bold;
                    text-transform: uppercase;
                }

                /* ── Grid ── */
                .suggest-grid {
                    display: grid !important;
                    grid-template-columns: repeat(4, 1fr) !important;
                    gap: 15px !important;
                }
                @media (max-width: 992px) { .suggest-grid { grid-template-columns: repeat(2, 1fr) !important; } }
                @media (max-width: 576px)  { .suggest-grid { grid-template-columns: 1fr !important; } }

                /* ── Lazy card fade-in ── */
                .suggest-card {
                    opacity: 0;
                    transform: translateY(10px);
                    transition: opacity 0.35s ease, transform 0.35s ease;
                }
                .suggest-card.visible {
                    opacity: 1;
                    transform: translateY(0);
                }
                @media (prefers-reduced-motion: reduce) {
                    .suggest-card { opacity: 1; transform: none; transition: none; }
                }

                /* ── Card ── */
                .suggest-card {
                    border: 1px solid #eee;
                    border-radius: 6px;
                    overflow: hidden;
                    background: #fff;
                    display: flex !important;
                    flex-direction: column !important;
                    /* opacity/transform handled by lazy animation above */
                }

                /* 16:9 padding hack */
                .thumb-link {
                    display: block !important;
                    width: 100% !important;
                    padding-top: 56.25% !important;
                    position: relative;
                    overflow: hidden;
                }
                .thumb-img {
                    position: absolute;
                    top: 0; left: 0;
                    width: 100% !important;
                    height: 100% !important;
                    object-fit: cover !important;
                    transition: transform 0.2s;
                }
                .thumb-link:hover .thumb-img { transform: scale(1.04); }

                .card-content {
                    padding: 12px !important;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                }
                .title-link {
                    text-decoration: none !important;
                    color: #222 !important;
                    font-weight: bold;
                    font-size: 14px;
                    line-height: 1.4;
                    display: -webkit-box !important;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    margin-bottom: 8px;
                }
                .title-link:hover { color: #e11d48; }
                .source-tag {
                    font-size: 11px;
                    color: #a0a0a0;
                    font-weight: 500;
                    text-transform: uppercase;
                    margin-top: auto;
                }

                /* ── Skeleton ── */
                @keyframes shimmer {
                    0%   { background-position: -400px 0; }
                    100% { background-position:  400px 0; }
                }
                .skeleton {
                    border: 1px solid #eee;
                    border-radius: 6px;
                    overflow: hidden;
                    background: #fff;
                }
                .skeleton-thumb {
                    padding-top: 56.25%;
                    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
                    background-size: 800px 100%;
                    animation: shimmer 1.4s infinite linear;
                }
                .skeleton-body { padding: 12px; }
                .skeleton-line {
                    height: 12px;
                    border-radius: 4px;
                    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
                    background-size: 800px 100%;
                    animation: shimmer 1.4s infinite linear;
                    margin-bottom: 8px;
                }
                .skeleton-line.short { width: 60%; }
            </style>

            <div id="widget-container">
                <h3 class="box-title">Có thể bạn quan tâm</h3>
                <div class="suggest-grid" id="recommendation-list"></div>
            </div>
        `;

        this._showSkeletons();
        this._loadArticles();
    }

    /* ── Skeleton placeholders ── */
    _showSkeletons() {
        const container = this.shadowRoot.getElementById('recommendation-list');
        container.innerHTML = Array(8).fill(`
            <div class="skeleton">
                <div class="skeleton-thumb"></div>
                <div class="skeleton-body">
                    <div class="skeleton-line"></div>
                    <div class="skeleton-line short"></div>
                </div>
            </div>
        `).join('');
    }

    /* ── Fisher-Yates shuffle ── */
    _shuffle(arr) {
        const a = [...arr];
        for (let i = a.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [a[i], a[j]] = [a[j], a[i]];
        }
        return a;
    }

    /* ── Safe read from localStorage (fails silently in sandboxed iframe) ── */
    _storageGet(key, fallback) {
        try { return JSON.parse(localStorage.getItem(key)) ?? fallback; }
        catch { return fallback; }
    }
    _storageSet(key, value) {
        try { localStorage.setItem(key, JSON.stringify(value)); }
        catch { /* ignore */ }
    }

    /* ── Fetch with timeout + sessionStorage cache ── */
    async _fetchArticles() {
        const CACHE_KEY = 'affi_articles_cache';
        const CACHE_TTL = 5 * 60 * 1000; // 5 phút

        try {
            const raw = sessionStorage.getItem(CACHE_KEY);
            if (raw) {
                const { ts, data } = JSON.parse(raw);
                if (Date.now() - ts < CACHE_TTL) return data;
            }
        } catch { /* cache miss */ }

        const controller = new AbortController();
        const timer = setTimeout(() => controller.abort(), 5000);

        try {
            const res = await fetch(
                'https://affitrackr.com/cdn/affitrackr/articles.json',
                { signal: controller.signal }
            );
            clearTimeout(timer);

            if (!res.ok) throw new Error(`HTTP ${res.status}`);
            const data = await res.json();

            try {
                sessionStorage.setItem(CACHE_KEY, JSON.stringify({ ts: Date.now(), data }));
            } catch { /* storage full – ignore */ }

            return data;
        } catch (err) {
            clearTimeout(timer);
            throw err;
        }
    }

    /* ── Escape để chống XSS ── */
    _esc(str) {
        const d = document.createElement('div');
        d.textContent = String(str ?? '');
        return d.innerHTML;
    }

    /* ── Validate URL (chỉ cho phép http / https) ── */
    _safeUrl(url) {
        try {
            const u = new URL(url);
            return (u.protocol === 'https:' || u.protocol === 'http:') ? url : '#';
        } catch { return '#'; }
    }

    /* ── Build card DOM (không dùng innerHTML với data từ API) ── */
    _buildCard(item) {
        const card = document.createElement('div');
        card.className = 'suggest-card';

        // Thumbnail link
        const thumbLink = document.createElement('a');
        thumbLink.href   = this._safeUrl(item.u);
        thumbLink.className = 'thumb-link';
        thumbLink.target = '_top';
        thumbLink.rel    = 'noopener noreferrer';

        const img = document.createElement('img');
        img.src     = this._safeUrl(item.i);
        img.alt     = String(item.t ?? '').slice(0, 100); // truncate alt
        img.className = 'thumb-img';
        img.loading = 'lazy';
        img.onerror = () => { img.style.display = 'none'; };

        thumbLink.appendChild(img);

        // Card body
        const body = document.createElement('div');
        body.className = 'card-content';

        const titleLink = document.createElement('a');
        titleLink.href      = this._safeUrl(item.u);
        titleLink.className = 'title-link';
        titleLink.target    = '_top';
        titleLink.rel       = 'noopener noreferrer';
        titleLink.textContent = item.t ?? '';

        const source = document.createElement('span');
        source.className   = 'source-tag';
        source.textContent = item.src ?? 'VOH';

        body.appendChild(titleLink);
        body.appendChild(source);
        card.appendChild(thumbLink);
        card.appendChild(body);

        return card;
    }

    /* ── Lazy reveal cards khi scroll vào viewport ── */
    _observeCards(cards) {
        // Nếu browser không hỗ trợ IntersectionObserver thì hiện hết luôn
        if (!('IntersectionObserver' in window)) {
            cards.forEach(c => c.classList.add('visible'));
            return;
        }

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                    observer.unobserve(entry.target);
                }
            });
        }, {
            rootMargin: '0px 0px 80px 0px', // trigger sớm 80px trước khi vào viewport
            threshold: 0.05
        });

        cards.forEach(card => observer.observe(card));
    }

    /* ── Main load logic ── */
    async _loadArticles() {
        const container = this.shadowRoot.getElementById('recommendation-list');

        try {
            const data = await this._fetchArticles();
            const allArticles = Array.isArray(data?.items) ? data.items : [];

            if (allArticles.length === 0) throw new Error('empty');

            const currentUrl = window.location.href;
            let history = this._storageGet('seen_articles', []);

            let pool = allArticles.filter(a => !history.includes(a.id) && a.u !== currentUrl);
            if (pool.length < 20) {
                history = [];
                pool = allArticles.filter(a => a.u !== currentUrl);
            }

            const recommended = this._shuffle(pool).slice(0, 20);

            recommended.forEach(a => history.push(a.id));
            this._storageSet('seen_articles', history.slice(-200)); // tăng buffer lên 200

            // Render tất cả cards vào DOM (ẩn, chờ observer reveal)
            container.innerHTML = '';
            const cardEls = recommended.map(item => {
                const card = this._buildCard(item);
                container.appendChild(card);
                return card;
            });

            // 4 card đầu hiện ngay, còn lại lazy reveal khi scroll
            cardEls.slice(0, 4).forEach(c => c.classList.add('visible'));
            this._observeCards(cardEls.slice(4));

        } catch {
            this.shadowRoot.getElementById('widget-container').style.display = 'none';
        }
    }
}

if (!customElements.get('affitrackr-widget')) {
    customElements.define('affitrackr-widget', AffitrackrWidget);
}
</script>

<div style="width: 100%; background-color: #fbf3e4; display: flex; justify-content: center; align-items: center; padding: 3px 0;">
  <div style="display: flex; align-items: center;">
    <div style="text-align: center; font-size: 11px; font-weight: normal; background-color: gray; color: white; padding: 1px 5px; /* Khoảng cách giữa chữ Ad và chữ Quảng cáo */ margin: 0 3px; border-radius: 1px; /* Bo cạnh 3px */">Ad</div>
    <div style="text-align: center; font-size: 11px; font-weight: normal; color: #000000;">QUẢNG CÁO</div>
  </div>
</div>
<div style="height: 150px;">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7078400245394460"
     crossorigin="anonymous"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-7078400245394460"
     data-ad-slot="5024558631"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<script type="text/javascript" class="teads" src="//a.teads.tv/page/158267/tag" async="true"></script>

<div id="div-gpt-ad-1774028169166-0" style="min-width: 300px; min-height: 250px; margin: 15px auto;">
  <script>
    (function() {
      var slotId = 'div-gpt-ad-1774028169166-0';
      var adUnitPath = '/23295639029/voh_article_outstream';

      console.log('%c [CMS] ✅ 1. Script bắt đầu thực thi...', 'color: green;');

      // KHAI BÁO CỨNG: Đảm bảo googletag và cmd luôn tồn tại
      window.googletag = window.googletag || {cmd: []};

      // 1. Nạp thư viện gpt.js (Nếu chưa có)
      if (!document.getElementById('gpt-lib')) {
        var gads = document.createElement('script');
        gads.id = 'gpt-lib';
        gads.async = true;
        gads.src = 'https://securepubads.g.doubleclick.net/tag/js/gpt.js';
        gads.crossOrigin = "anonymous";
        document.head.appendChild(gads);
      }

      // 2. Kiểm tra lại một lần nữa trước khi push
      if (typeof window.googletag.cmd === 'undefined') {
          window.googletag.cmd = [];
      }

      window.googletag.cmd.push(function() {
        console.log('%c [NETWORK] ✅ 2. GPT Ready - Đang xử lý Ad Unit...', 'color: blue;');

        // Lắng nghe Render để Debug
        googletag.pubads().addEventListener('slotRenderEnded', function(event) {
          if (event.slot.getSlotElementId() === slotId) {
            console.log(event.isEmpty ? '%c [GAM] ⚠️ NO FILL' : '%c [GAM] 🎉 QUẢNG CÁO ĐÃ HIỆN', 'font-weight:bold; color:orange;');
          }
        });

        // Xóa slot cũ để tránh lỗi "hố" đã bị chiếm chỗ (Rất quan trọng cho React/Next.js)
        var oldSlot = googletag.pubads().getSlots().filter(function(s) {
            return s.getSlotElementId() === slotId;
        })[0];
        if (oldSlot) { googletag.destroySlots([oldSlot]); }

        googletag.defineSlot(adUnitPath, [[400, 300], [640, 480], 'fluid'], slotId)
                 .addService(googletag.pubads());

        googletag.pubads().enableSingleRequest();
        googletag.pubads().collapseEmptyDivs();
        googletag.enableServices();
        
        googletag.display(slotId);
      });
    })();
  </script>
</div>

<zone id="kjbdaxby"></zone>
<script>
arfAsync.push("kjbdaxby");
</script>

<zone id="kmvv37ku"></zone>
<script>
arfAsync.push("kmvv37ku");
</script>


Nông thôn ngày mới

Thời sự

Sáng mỹ miều - Chiều mỹ mãn

Tập 981: Lý Thành Cơ x Thu Ngọc

Bản tin 5P

Kinh tế số - xã hội số

TPHCM hướng dẫn doanh nghiệp đáp ứng điều kiện chứng nhận doanh nghiệp khoa học và công nghệ

Luật sư của bạn

Thạc sĩ - Luật sư Thái Thanh Hải, Trưởng Văn phòng luật sư Thái Thanh Hải tư vấn

Giải mã thị trường

Chuyển đổi xanh: Kết nối giải pháp số vào chuỗi giá trị sản phẩm và sản xuất thực tiễn

Phụ nữ ngày nay

Ma túy: Con đường dẫn đến bi kịch

Sân khấu truyền thanh

Lăng kính đa chiều

TPHCM tiếp tục vận hành hiệu quả mô hình chính quyền 2 cấp

Xây và chống

Gõ cửa thành công

Từ 1/7, hàng hoá rủi ro cao phải truy xuất nguồn gốc trước khi lưu thông

TP.HCM chốt danh sách 29 xã đủ điều kiện thành lập phường

VOH kết nối

Đồng hành cùng doanh nghiệp

Cơ hội “thay áo mới” cho du lịch đường thủy thành phố Hồ Chí Minh

Chuỗi hoạt động quy mô quốc gia kỷ niệm 101 năm Ngày Báo chí cách mạng Việt Nam

Bàn tròn đô thị

Cạnh tranh dòng tiền của vàng, chứng khoán và các kênh đầu tư khác

Tiêu dùng thông thái

Chính phủ yêu cầu tăng cường giám sát, đảm bảo chất lượng xăng sinh học

Online 360

Bộ Tài chính: Dùng ngân sách xây nhà cho thuê, miễn thuế TNCN với người cho thuê nhà

Thị trường và doanh nghiệp

“Luật Đô thị đặc biệt” tạo cơ chế để TPHCM bứt phá

Tập 982: Lý Thành Cơ x Thu Ngọc

Hành trình kết nối

Cư dân mạng hôm nay

Nhận diện và ứng phó với thông tin xấu độc trên không gian số.

Truyền tiếp FM 92.5 MHz

VOH FM 87.7 MHz

Nhịp sống TPHCM

Đời sống

Khoảnh khắc thay đổi cuộc đời

Công nghệ lõi

Kinh tế

VOH FM 99.9 MHz

FM 99.9

Truyền tiếp Thời sự  Kênh AM610 KHz

Nhịp sống Sài Gòn chiều

Giao thông

Đêm thành phố

Hoạt động hè miễn phí ở TP.HCM: Trẻ hào hứng, phụ huynh mừng

Trạm Radio

Ánh sáng từ “chiếc hộp cũ” nhiệm màu

Tổng hợp

VOH FM 95.6 MHz

FM 95.6

An toàn là hành phúc

Sao thần nông - Vui chuyện trên đồng

Quản lý và chăm sóc dịch hại cho cây thanh long trong mùa mưa

Truyền tiếp bản tin

VOH-M FM 92 - 92.5 MHz

FM 92-92.5

Giải trí

FM 87.7

Thời sự 30p trực tiếp

Thông tin & quảng cáo

Xã hội

Từ nghị quyết đến cuộc sống

VOH thịnh hành

Dành nguồn lực để tăng lương cán bộ, công chức, lương hưu năm 2027

VOH AM 610 KHz

AM 610

Xem lịch phát sóng fm877mhz hàng ngày - VOH

Lịch phát sóng - Đài Phát thanh, Radio Việt Nam, Radio TPHCM & tỉnh thành khác