<affitrackr-widget></affitrackr-widget>

<style>
    /* ── Reset scope: tất cả styles dùng prefix .affi- để tránh xung đột CMS ── */

    .affi-widget {
        display: block;
        font-family: sans-serif;
        box-sizing: border-box;
        text-align: left;
        overflow: auto;
        /* ── Cấu hình giao diện ── */
        background: #f7f3ec;   /* BG_COLOR: màu nền widget — Ivory, tông báo giấy */
        border-radius: 6px;

        /* ── Căn chỉnh với CMS ──
           .adv-center đang set margin-left:-16px, margin-right:-16px, width:calc(100%+32px)
           → Widget bị rộng hơn nội dung 32px.
           Dùng margin + padding để bù lại, giữ nội dung bên trong thẳng hàng. */
        margin: 20px 0;
        padding: 16px;         /* WIDGET_PADDING: padding nội dung bên trong */
    }

    /* ── Override toàn bộ CSS của .adv-center cha ──
       Vấn đề:
         float: left        → widget bị float, lệch khỏi flow
         margin-left: -16px → dịch trái ra ngoài padding
         width: calc(100% + 32px) → rộng hơn container 32px
       Fix: dùng affitrackr-widget element selector để override !important của CMS */

    affitrackr-widget {
        float: none !important;        /* cancel float:left của .adv-center */
        clear: both !important;        /* clear float từ các element trước */
        display: block !important;
        width: 100% !important;        /* reset width về 100% container */
        margin-left: 0 !important;     /* reset negative margin */
        margin-right: 0 !important;
        text-align: left !important;   /* reset text-align:center */
        box-sizing: border-box !important;
    }

    /* Bù thêm negative margin ở breakpoint CMS kích hoạt */
    @media (max-width: 1279px) {
        affitrackr-widget {
            margin-left: 16px !important;
            margin-right: 16px !important;
            width: calc(100% - 32px) !important;
        }
    }

    /* ── Header ── */
    .affi-title {
        font-size: 22px;       /* TITLE_SIZE: cỡ chữ tiêu đề widget */
        color: #333;
        border-left: 4px solid #e11d48;
        padding-left: 10px;
        margin: 0 0 16px;
        font-weight: bold;
        text-transform: uppercase;
    }

    /* ── Grid ── */
    .affi-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
    }
    @media (max-width: 992px) { .affi-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 576px)  { .affi-grid { grid-template-columns: 1fr; } }

    /* ── Card ── */
    .affi-card {
        border: 1px solid #eee;
        border-radius: 6px;
        overflow: hidden;
        background: #fff;
        display: flex;
        flex-direction: column;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .affi-card.affi-visible {
        opacity: 1;
        transform: translateY(0);
    }
    @media (prefers-reduced-motion: reduce) {
        .affi-card { opacity: 1; transform: none; transition: none; }
    }

    /* 16:9 padding hack */
    .affi-thumb-link {
        display: block;
        width: 100%;
        padding-top: 56.25%;
        position: relative;
        overflow: hidden;
        text-decoration: none;
    }
    .affi-thumb-img {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.2s;
    }
    .affi-thumb-link:hover .affi-thumb-img { transform: scale(1.04); }

    .affi-card-body {
        padding: 12px;
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .affi-card-title {
        text-decoration: none;
        color: #222;
        font-weight: bold;
        font-size: 14px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        margin-bottom: 8px;
    }
    .affi-card-title:hover { color: #e11d48; }
    .affi-card-source {
        font-size: 11px;
        color: #a0a0a0;
        font-weight: 500;
        text-transform: uppercase;
        margin-top: auto;
    }

    /* ── Ad slot ──
       KHÔNG ép height/overflow — để AdSense tự quyết định kích thước.
       Crop quảng cáo vi phạm chính sách Google (partially visible ad).
       Ad chiếm full width (span toàn bộ cột grid) để tránh bị squeeze. */
    .affi-ad-slot {
        width: 100%;
        box-sizing: border-box;
        grid-column: 1 / -1;       /* full width trên mọi breakpoint */
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.35s ease, transform 0.35s ease;
    }
    .affi-ad-slot.affi-visible {
        opacity: 1;
        transform: translateY(0);
    }
    .affi-ad-slot ins {
        display: block !important;
        width: 100% !important;
        /* KHÔNG set height — AdSense tự fill đúng kích thước */
    }

    /* ── Skeleton ── */
    @keyframes affi-shimmer {
        0%   { background-position: -400px 0; }
        100% { background-position:  400px 0; }
    }
    .affi-skeleton {
        border: 1px solid #eee;
        border-radius: 6px;
        overflow: hidden;
        background: #fff;
    }
    .affi-skeleton-thumb {
        padding-top: 56.25%;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 800px 100%;
        animation: affi-shimmer 1.4s infinite linear;
    }
    .affi-skeleton-body { padding: 12px; }
    .affi-skeleton-line {
        height: 12px;
        border-radius: 4px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 800px 100%;
        animation: affi-shimmer 1.4s infinite linear;
        margin-bottom: 8px;
    }
    .affi-skeleton-line.affi-short { width: 60%; }
</style>

<script>
class AffitrackrWidget extends HTMLElement {

    // ── Cấu hình AdSense — thay 2 giá trị này ──────────────────
    static AD_CLIENT = 'ca-pub-7078400245394460'; // data-ad-client
    static AD_SLOT   = '7322516041';              // data-ad-slot
    static AD_EVERY  = 3;                         // chèn ad sau mỗi N card
    // ────────────────────────────────────────────────────────────

    connectedCallback() {
        this.classList.add('affi-widget');
        this.innerHTML = `
            <h3 class="affi-title">Có thể bạn quan tâm</h3>
            <div class="affi-grid" id="affi-grid"></div>
        `;
        this._showSkeletons();
        this._loadArticles();
    }

    /* ── Skeleton placeholders ── */
    _showSkeletons() {
        const grid = this.querySelector('#affi-grid');
        grid.innerHTML = Array(8).fill(`
            <div class="affi-skeleton">
                <div class="affi-skeleton-thumb"></div>
                <div class="affi-skeleton-body">
                    <div class="affi-skeleton-line"></div>
                    <div class="affi-skeleton-line affi-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 localStorage ── */
    _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 với timeout + sessionStorage cache ── */
    async _fetchArticles() {
        const CACHE_KEY = 'affi_articles_cache';
        const CACHE_TTL = 5 * 60 * 1000;

        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 */ }
            return data;
        } catch (err) {
            clearTimeout(timer);
            throw err;
        }
    }

    /* ── Validate URL ── */
    _safeUrl(url) {
        try {
            const u = new URL(url);
            return (u.protocol === 'https:' || u.protocol === 'http:') ? url : '#';
        } catch { return '#'; }
    }

    /* ── Build article card ── */
    _buildCard(item) {
        const card = document.createElement('div');
        card.className = 'affi-card';

        const thumbLink = document.createElement('a');
        thumbLink.href      = this._safeUrl(item.u);
        thumbLink.className = 'affi-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);
        img.className = 'affi-thumb-img';
        img.loading   = 'lazy';
        img.onerror   = () => { img.style.display = 'none'; };
        thumbLink.appendChild(img);

        const body = document.createElement('div');
        body.className = 'affi-card-body';

        const titleLink = document.createElement('a');
        titleLink.href        = this._safeUrl(item.u);
        titleLink.className   = 'affi-card-title';
        titleLink.target      = '_top';
        titleLink.rel         = 'noopener noreferrer';
        titleLink.textContent = item.t ?? '';

        const source = document.createElement('span');
        source.className   = 'affi-card-source';
        source.textContent = item.src ?? 'VOH';

        body.appendChild(titleLink);
        body.appendChild(source);
        card.appendChild(thumbLink);
        card.appendChild(body);

        return card;
    }

    /* ── Build AdSense slot ── */
    _buildAdSlot(index) {
        const wrapper = document.createElement('div');
        wrapper.className = 'affi-ad-slot';

        const ins = document.createElement('ins');
        ins.className          = 'adsbygoogle';
        ins.style.display      = 'block';
        ins.dataset.adClient   = AffitrackrWidget.AD_CLIENT;
        ins.dataset.adSlot     = AffitrackrWidget.AD_SLOT;
        ins.dataset.adFormat   = 'auto';
        ins.dataset.fullWidthResponsive = 'true';

        wrapper.appendChild(ins);

        // Push sau khi element đã vào DOM (gọi trong _render sau khi append)
        wrapper._activateAd = () => {
            try {
                (window.adsbygoogle = window.adsbygoogle || []).push({});
            } catch (e) {
                console.warn('[affitrackr] AdSense push error:', e);
            }
        };

        return wrapper;
    }

    /* ── Lazy reveal via IntersectionObserver ── */
    _observeElements(els) {
        if (!('IntersectionObserver' in window)) {
            els.forEach(el => el.classList.add('affi-visible'));
            return;
        }
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('affi-visible');
                    observer.unobserve(entry.target);
                }
            });
        }, { rootMargin: '0px 0px 80px 0px', threshold: 0.05 });

        els.forEach(el => observer.observe(el));
    }

    /* ── Render: xen kẽ card + ad sau mỗi AD_EVERY card ── */
    _render(articles) {
        const grid = this.querySelector('#affi-grid');
        grid.innerHTML = '';

        const allEls   = [];   // tất cả elements để observe
        const adSlots  = [];   // ad slots cần activate sau khi vào DOM
        let   adCount  = 0;

        // Pattern: [card][AD][card×AD_EVERY][AD][card×AD_EVERY][AD]...
        // Chu kỳ = AD_EVERY + 1 (1 ad + AD_EVERY card)
        // AD nằm ở mixedIndex % (AD_EVERY + 1) === 1
        // Ví dụ AD_EVERY=4: chu kỳ=5, ad ở index 1,6,11,16...
        const cycle = AffitrackrWidget.AD_EVERY + 1;
        let mixedIndex = 0;

        articles.forEach((item) => {
            // Nếu vị trí hiện tại là slot ad → chèn ad trước card
            if (mixedIndex % cycle === 1) {
                const adSlot = this._buildAdSlot(adCount++);
                grid.appendChild(adSlot);
                allEls.push(adSlot);
                adSlots.push(adSlot);
                mixedIndex++;
            }

            const card = this._buildCard(item);
            grid.appendChild(card);
            allEls.push(card);
            mixedIndex++;
        });

        // Activate tất cả ad slots (element đã trong DOM)
        adSlots.forEach(slot => slot._activateAd());

        // 4 elements đầu hiện ngay, còn lại lazy reveal
        allEls.slice(0, 4).forEach(el => el.classList.add('affi-visible'));
        this._observeElements(allEls.slice(4));
    }

    /* ── Main ── */
    async _loadArticles() {
        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));

            this._render(recommended);

        } catch {
            this.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>
