<affitrackr-widget></affitrackr-widget>

<script>
class AffitrackrWidget extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        this.shadowRoot.innerHTML = `
            <style>
                /* Reset CSS để triệt tiêu toàn bộ ảnh hưởng từ trang CMS cha */
                :host {
                    display: block !important;
                    float: none !important;
                    width: 100% !important;
                    max-width: 100% !important;
                    margin: 30px 0 !important;
                    padding: 0 !important;
                    text-align: left !important; /* Ghi đè text-align: center của lớp cha .adv-center */
                    box-sizing: border-box !important;
                    font-family: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif !important;
                }
                
                #widget-container {
                    box-sizing: border-box !important;
                    text-align: left !important;
                    width: 100% !important;
                    padding: 0 !important;
                }

                /* Xử lý bù trừ khoảng cách âm -16px của CMS trên thiết bị di động & máy tính bảng */
                @media (max-width: 1279px) {
                    #widget-container {
                        padding: 0 16px !important; /* Đẩy nội dung bài viết vào lại 16px để không bị dính mép màn hình */
                    }
                }

                /* Tiêu đề Box đề xuất */
                .box-title {
                    font-size: 18px !important;
                    color: #e11d48 !important; /* Màu đỏ thương hiệu VOH */
                    border-left: 4px solid #e11d48 !important;
                    padding-left: 10px !important;
                    margin: 0 0 20px 0 !important;
                    font-weight: 700 !important;
                    text-transform: uppercase !important;
                    text-align: left !important;
                    letter-spacing: 0.5px !important;
                }
                
                /* Layout lưới Grid 4 cột */
                .suggest-grid {
                    display: grid !important;
                    grid-template-columns: repeat(4, 1fr) !important;
                    gap: 16px !important;
                    box-sizing: border-box !important;
                }
                
                /* Bài viết Card */
                .suggest-card {
                    border: 1px solid #f0f0f0 !important;
                    border-radius: 8px !important;
                    overflow: hidden !important;
                    background: #fff !important;
                    display: flex !important;
                    flex-direction: column !important;
                    box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
                    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
                    text-align: left !important;
                }
                .suggest-card:hover {
                    transform: translateY(-2px) !important;
                    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
                }
                
                /* 16:9 Aspect Ratio Container */
                .thumb-link {
                    display: block !important;
                    width: 100% !important;
                    padding-top: 56.25% !important; /* Tỷ lệ 16:9 */
                    position: relative !important;
                    overflow: hidden !important;
                    background-color: #f7f7f7 !important;
                }
                .thumb-img {
                    position: absolute !important;
                    top: 0 !important;
                    left: 0 !important;
                    width: 100% !important;
                    height: 100% !important;
                    object-fit: cover !important;
                    transition: transform 0.3s ease !important;
                }
                .thumb-link:hover .thumb-img {
                    transform: scale(1.05) !important;
                }
                
                /* Nội dung dưới ảnh */
                .card-content {
                    padding: 12px !important;
                    flex: 1 !important;
                    display: flex !important;
                    flex-direction: column !important;
                    justify-content: space-between !important;
                    box-sizing: border-box !important;
                }
                .title-link {
                    text-decoration: none !important;
                    color: #222 !important;
                    font-weight: 600 !important;
                    font-size: 14px !important;
                    line-height: 1.4 !important;
                    display: -webkit-box !important;
                    -webkit-line-clamp: 2 !important; /* Giới hạn tối đa 2 dòng */
                    -webkit-box-orient: vertical !important;
                    overflow: hidden !important;
                    margin-bottom: 8px !important;
                    transition: color 0.2s ease !important;
                    text-align: left !important;
                }
                .title-link:hover {
                    color: #e11d48 !important;
                }
                .source-tag {
                    font-size: 11px !important;
                    color: #888 !important;
                    font-weight: 500 !important;
                    text-transform: uppercase !important;
                    margin-top: auto !important;
                    text-align: left !important;
                }

                /* Skeleton Placeholder Loading */
                @keyframes shimmer {
                    0% { background-position: -400px 0; }
                    100% { background-position: 400px 0; }
                }
                .skeleton {
                    border: 1px solid #eee !important;
                    border-radius: 8px !important;
                    overflow: hidden !important;
                    background: #fff !important;
                }
                .skeleton-thumb {
                    padding-top: 56.25% !important;
                    background: linear-gradient(90deg, #f3f3f3 25%, #e6e6e6 50%, #f3f3f3 75%) !important;
                    background-size: 800px 100% !important;
                    animation: shimmer 1.4s infinite linear !important;
                }
                .skeleton-body {
                    padding: 12px !important;
                }
                .skeleton-line {
                    height: 12px !important;
                    border-radius: 4px !important;
                    background: linear-gradient(90deg, #f3f3f3 25%, #e6e6e6 50%, #f3f3f3 75%) !important;
                    background-size: 800px 100% !important;
                    animation: shimmer 1.4s infinite linear !important;
                    margin-bottom: 8px !important;
                }
                .skeleton-line.short {
                    width: 60% !important;
                }

                /* Cấu hình Responsive */
                @media (max-width: 992px) {
                    .suggest-grid {
                        grid-template-columns: repeat(2, 1fr) !important;
                        gap: 12px !important;
                    }
                }
                @media (max-width: 576px) {
                    .suggest-grid {
                        grid-template-columns: 1fr !important;
                        gap: 16px !important;
                    }
                }
            </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();
    }

    /* Tạo hiệu ứng Skeleton Loading lúc đợi API phản hồi */
    _showSkeletons() {
        const container = this.shadowRoot.getElementById('recommendation-list');
        container.innerHTML = Array(4).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('');
    }

    /* Thuật toán trộn ngẫu nhiên mảng Fisher-Yates */
    _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;
    }

    /* Đọc dữ liệu an toàn từ localStorage (Không vỡ trang nếu bị Sandboxed) */
    _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 { /* Bỏ qua */ }
    }

    /* Fetch dữ liệu API kèm Caching trong sessionStorage và cơ chế Timeout */
    async _fetchArticles() {
        const CACHE_KEY = 'affi_articles_cache';
        const CACHE_TTL = 5 * 60 * 1000; // Bộ nhớ đệm lưu trong 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 - Tải lại */ }

        const controller = new AbortController();
        const timer = setTimeout(() => controller.abort(), 5000); // Timeout sau 5 giây nếu mạng chậm

        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 { /* Đầy bộ nhớ đệm - Bỏ qua */ }

            return data;
        } catch (err) {
            clearTimeout(timer);
            throw err;
        }
    }

    /* Chuẩn hóa địa chỉ URL an toàn chống tấn công độc hại XSS */
    _safeUrl(url) {
        try {
            const u = new URL(url);
            return (u.protocol === 'https:' || u.protocol === 'http:') ? url : '#';
        } catch { return '#'; }
    }

    /* Xây dựng các phần tử Card DOM chuẩn hóa bằng createElement an toàn */
    _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);
        img.className = 'thumb-img';
        img.loading = 'lazy';
        img.onerror = () => { img.style.display = 'none'; };

        thumbLink.appendChild(img);

        // Content Container
        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;
    }

    /* Tiến trình xử lý lọc trùng lặp bài viết và render danh sách đề xuất */
    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('Dữ liệu API rỗng');

            const currentUrl = window.location.href;
            let history = this._storageGet('seen_articles', []);

            // 1. Lọc bỏ các bài đã xem trong lịch sử và bài viết hiện tại đang mở
            let pool = allArticles.filter(a => !history.includes(a.id) && a.u !== currentUrl);
            
            // 2. Nếu danh sách khả dụng còn ít hơn 4 bài, tiến hành làm mới lịch sử seen_articles
            if (pool.length < 4) {
                history = [];
                pool = allArticles.filter(a => a.u !== currentUrl);
            }

            // 3. Xáo ngẫu nhiên dữ liệu và trích xuất đúng 4 bài viết đề xuất
            const recommended = this._shuffle(pool).slice(0, 4);

            // 4. Lưu lại lịch sử các bài viết vừa hiển thị
            recommended.forEach(a => history.push(a.id));
            this._storageSet('seen_articles', history.slice(-100)); // Lưu tối đa 100 bài gần nhất

            // 5. Render dữ liệu
            container.innerHTML = '';
            recommended.forEach(item => container.appendChild(this._buildCard(item)));

        } catch (err) {
            console.error('Lỗi tải đề xuất:', err);
            // Ẩn toàn bộ widget khỏi màn hình khi có sự cố hệ thống để tránh giao diện bị xấu
            this.shadowRoot.getElementById('widget-container').style.display = 'none';
        }
    }
}

// Đăng ký custom element duy nhất một lần
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

Đời sống

Ngọc Linh: "Ba mẹ đã lo 18 năm, không lẽ phải lo mãi"

Tiếp theo

TikToker Trung Tiến Fitness: "Tập thể dục không nhất thiết phải ở phòng Gym"

Cơ hội rộng mở với ngành Ngôn ngữ Anh

Giới trẻ với xu hướng "tiêu dùng thông minh"

Những đứa con hòa bình nghĩ về tương lai

Ngành học bạn đang chọn tương lai có việc làm không?

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?