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

VOH FM 99.9 MHz

FM 99.9

Online 360 

VOH AM 610 KHz

AM 610

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

VOH FM 95.6 MHz

FM 95.6

Nhân Humanity

Giải mã thị trường

Doanh nghiệp hội nhập

Chuyển động 30/7

TPHCM chủ động phòng chống thiên tai và phòng ngừa đuối nước trẻ em

Nhớ thương quê nhà

Môn Quản trị học - Bài 7: Lãnh đạo

Lớp học tình thương nơi gieo những ước mơ đẹp

Một giờ thong thả #22

Hay làm hay lầm: Ai bận hơn?

Luật Đô thị đặc biệt: Người dân TPHCM sẽ là đối tượng thụ hưởng đầu tiên

Hiến máu tình nguyện nghĩa cử cao đẹp từ trái tim

CaMgD3, Joints Ultra, Smell Gone

Với người đàn ông ấy, từ chối đi bước nữa là mong muốn giữ sự bình yên cho 2 cô con gái nhỏ

Lời thì thầm của đại dương

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

Chăm sóc người cao tuổi là trách nhiệm của gia đình và sự chung tay của toàn xã hội

Minh Triều

Tìm kiếm, quy tập và xác định danh tính hài cốt liệt sĩ tại Công viên Lê Thị Riêng

Quy hoạch TPHCM 100 năm định hình cho tương lai  phát triển bền vững

TPHCM hướng tới quản lý sức khỏe người dân theo vòng đời

Đảm bảo an toàn thực phẩm từ việc kiểm nghiệm hiệu quả, giảm chi phí

Bảo đảm an toàn cho người lao động trong mùa nắng nóng

Theo dòng  Thời sự: Chào mừng 50 năm thành phố mang tên Bác

Tăng Phúc nhìn lại hành trình 10 năm theo đuổi âm nhạc; Amber Liu đến Việt Nam ủng hộ Chi Pu

BXH Tuần 2 tháng 6: loạt ca khúc mới tiến vào BXH

Vì một mùa Hè an toàn cho trẻ

DÒNG CHẢY XANH TỪ VƯỜN CAO SU ĐẾN CÔNG NGHIỆP HIỆN ĐẠI

Bảo hiểm xã hội - Bảo hiểm y tế - Những điều cần biết ngày 11/6/2026

Ngày Thế giới tôn vinh người hiến máu 14/6

Cung cấp những tin tức mới nhất, chính xác và đa chiều về các sự kiện nóng hổi trong và ngoài nước.