<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>


Balo bạn trẻ

Balo Bạn Trẻ là nơi trang bị hành trang tri thức, kỹ năng, thói quen, là những điều kiện cần và đủ để thanh niên có thể tự tin trước sự phát triển một cách chóng mặt của khoa học – kỹ thuật, của sự hội nhập kinh tế thế giới với tính kỷ luật và cường độ lao động cao.

Chương trình Balo bạn trẻ trên VOH Podcast - Đài Tiếng nói Nhân dân TPHCM

Sinh viên nên ở thuê nhà trọ hay ở nhà người thân?

Tiếp theo

Thúc đẩy chuyển đổi số phục vụ cho học tập suốt đời

Sách gì "Cha mẹ đọc, con thành tài?"

Một người có cánh đã bay về trời

Mới nhất

RADIO TINg 17/6: Một buổi sáng bình yên và tràn đầy năng lượng đang bắt đầu

Điều gì giết chết tình yêu nhanh nhất sau khi cưới?

Im lặng trong hôn nhân có đáng sợ hơn cãi vã?

RADIO TINg 15/6: Nguy cơ khóa số khi đổi điện thoại; Dự kiến bỏ thi lái xe mô phỏng;…

Có thể yêu lại người mình đã cưới không?

RADIO TINg 14/6: TPHCM chốt ngày công bố điểm thi lớp 10... và cú lật kèo của vé máy bay hè

Hết yêu có phải dấu chấm hết của hôn nhân?

RADIO TINg 13/6: Đề xuất siết người bán thực phẩm trên mạng và "sát thủ" tụ cầu vàng phá hủy xương

Vì sao càng ở lâu, vợ chồng càng ít nói chuyện?