feat: inline video player (VnExpress MP4 + BDP video-embed), OG image in share links, dynamic meta tags

app.py

@@ -1 +1,523 @@
-PLACEHOLDER
+import gradio as gr
+import requests
+import re
+import hashlib
+from bs4 import BeautifulSoup
+from datetime import datetime
+from concurrent.futures import ThreadPoolExecutor, as_completed
+
+HEADERS = {
+    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+    "Accept-Language": "vi-VN,vi;q=0.9,en;q=0.8",
+}
+BASE_BDP = "https://bongdaplus.vn"
+REFRESH_SECONDS = 300
+
+CATEGORIES = {
+    "🏠 Trang Chủ (Nổi Bật)": "mix::home::Trang Chủ",
+    "📰 Thời Sự": "vne::https://vnexpress.net/thoi-su::Thời Sự",
+    "🌍 Thế Giới": "vne::https://vnexpress.net/the-gioi::Thế Giới",
+    "💰 Kinh Doanh": "vne::https://vnexpress.net/kinh-doanh::Kinh Doanh",
+    "💻 Công Nghệ": "vne::https://vnexpress.net/so-hoa::Công Nghệ",
+    "🔬 Khoa Học": "vne::https://vnexpress.net/khoa-hoc::Khoa Học",
+    "🎬 Giải Trí": "vne::https://vnexpress.net/giai-tri::Giải Trí",
+    "🏥 Sức Khỏe": "vne::https://vnexpress.net/suc-khoe::Sức Khỏe",
+    "🎓 Giáo Dục": "vne::https://vnexpress.net/giao-duc::Giáo Dục",
+    "✈️ Du Lịch": "vne::https://vnexpress.net/du-lich::Du Lịch",
+    "⚽ Thể Thao": "vne::https://vnexpress.net/the-thao::Thể Thao",
+    "⚽ Bóng Đá QT": "vne::https://vnexpress.net/the-thao/bong-da::Bóng Đá",
+    "🏴󠁧󠁢󠁥󠁮󠁧󠁿 Ngoại Hạng Anh": "bdp::https://bongdaplus.vn/ngoai-hang-anh::Bóng Đá",
+    "🇪🇸 La Liga": "bdp::https://bongdaplus.vn/la-liga::Bóng Đá",
+    "🏆 Champions League": "bdp::https://bongdaplus.vn/champions-league-cup-c1::Bóng Đá",
+    "🇻🇳 Bóng Đá VN": "bdp::https://bongdaplus.vn/bong-da-viet-nam::Bóng Đá",
+    "🔄 Chuyển Nhượng": "bdp::https://bongdaplus.vn/tin-chuyen-nhuong::Bóng Đá",
+}
+HOMEPAGE_SOURCES = [
+    ("vne", "https://vnexpress.net/thoi-su", "Thời Sự"),
+    ("vne", "https://vnexpress.net/the-gioi", "Thế Giới"),
+    ("vne", "https://vnexpress.net/kinh-doanh", "Kinh Doanh"),
+    ("vne", "https://vnexpress.net/so-hoa", "Công Nghệ"),
+    ("vne", "https://vnexpress.net/the-thao", "Thể Thao"),
+    ("vne", "https://vnexpress.net/giai-tri", "Giải Trí"),
+    ("bdp", "https://bongdaplus.vn/tin-moi", "Bóng Đá"),
+]
+
+def strip_links(html):
+    return re.sub(r'</a>', '', re.sub(r'<a\s[^>]*>', '', html))
+def esc(text):
+    return text.replace("\\", "\\\\").replace("'", "\\'").replace('"', '\\"').replace("\n", " ")
+def make_id(url):
+    return hashlib.md5(url.encode()).hexdigest()[:12]
+def slug(text):
+    s = text.lower().strip()
+    for p, r in [('[àáạảãâầấậẩẫăằắặẳẵ]','a'),('[èéẹẻẽêềếệểễ]','e'),('[ìíịỉĩ]','i'),
+                 ('[òóọỏõôồốộổỗơờớợởỡ]','o'),('[ùúụủũưừứựửữ]','u'),('[ỳýỵỷỹ]','y'),('[đ]','d')]:
+        s = re.sub(p, r, s)
+    return re.sub(r'[\s-]+', '-', re.sub(r'[^a-z0-9\s-]', '', s)).strip('-')[:60]
+
+# ══════════════════════════════════════════════════════════════════════════════
+# SCRAPERS
+# ══════════════════════════════════════════════════════════════════════════════
+def scrape_bdp_list(url):
+    try:
+        r = requests.get(url, headers=HEADERS, timeout=15); r.encoding = "utf-8"
+        soup = BeautifulSoup(r.text, "lxml"); articles, seen = [], set()
+        for sel, feat in [("div.news.fst", True), ("div.sld-itm.news", True), ("li.news", False)]:
+            for item in soup.select(sel):
+                tag = item.find("a", class_="title") or item.find("a", href=True)
+                if not tag: continue
+                title = tag.get_text(strip=True)
+                if not title or len(title) < 5: continue
+                link = tag.get("href", "")
+                if link and not link.startswith("http"): link = BASE_BDP + link
+                if link in seen: continue
+                img_tag = item.find("img")
+                img = (img_tag.get("data-src") or img_tag.get("src")) if img_tag else None
+                summ = item.find("p", class_="summ"); tt = item.find("div", class_="in-time")
+                articles.append({"title": title, "link": link, "img": img,
+                    "summary": summ.get_text(strip=True) if summ else "",
+                    "time": tt.get_text(strip=True) if tt else "",
+                    "featured": feat, "source": "bdp", "group": ""})
+                seen.add(link)
+        return articles
+    except Exception as e:
+        return [{"title": f"⚠️ {e}", "link": "#", "img": None, "summary": "", "time": "", "featured": False, "source": "bdp", "group": ""}]
+
+def scrape_bdp_article(url):
+    try:
+        r = requests.get(url, headers=HEADERS, timeout=15); r.encoding = "utf-8"
+        soup = BeautifulSoup(r.text, "lxml")
+        h1 = soup.select_one(".lead-title h1") or soup.select_one("h1")
+        te = soup.select_one(".emobar .rgt"); se = soup.select_one("div.summary")
+        og_img = ""; og = soup.find("meta", property="og:image")
+        if og: og_img = og.get("content", "")
+        cd = soup.select_one("div.content#postContent") or soup.select_one("div.content")
+        body = []
+        if cd:
+            body = _extract_body(cd)
+        # Extract videos from iframes (BDP uses /video-embed/)
+        for iframe in soup.select("iframe"):
+            src = iframe.get("src", "")
+            if "video-embed" in src:
+                vid = _fetch_bdp_video(src)
+                if vid:
+                    body.insert(0, vid)  # Put video at top
+        return {"title": h1.get_text(strip=True) if h1 else "", "time": te.get_text(strip=True) if te else "",
+                "summary": se.get_text(strip=True) if se else "", "body": body, "related": _bdp_relates(soup),
+                "source_url": url, "source": "bdp", "og_image": og_img}
+    except Exception as e:
+        return {"title": "⚠️ Lỗi", "time": "", "summary": str(e), "body": [], "related": [],
+                "source_url": url, "source": "bdp", "og_image": ""}
+
+def _fetch_bdp_video(embed_src):
+    """Fetch BDP video-embed page and extract MP4 URL."""
+    try:
+        full = embed_src if embed_src.startswith("http") else BASE_BDP + embed_src
+        r = requests.get(full, headers=HEADERS, timeout=10); r.encoding = "utf-8"
+        soup = BeautifulSoup(r.text, "lxml")
+        source = soup.select_one("video source[src]")
+        video = soup.select_one("video")
+        if source:
+            return {"type": "video", "src": source.get("src", ""),
+                    "poster": video.get("poster", "") if video else ""}
+    except Exception:
+        pass
+    return None
+
+def scrape_vne_list(url):
+    try:
+        r = requests.get(url, headers=HEADERS, timeout=15); r.encoding = "utf-8"
+        soup = BeautifulSoup(r.text, "lxml"); articles, seen = [], set()
+        for i, item in enumerate(soup.select("article.item-news")):
+            a = item.select_one("h2.title-news a") or item.select_one("h3.title-news a") or item.find("a", href=True, title=True)
+            if not a: continue
+            title = a.get("title", "") or a.get_text(strip=True)
+            link = a.get("href", "")
+            if not title or len(title) < 5 or link in seen: continue
+            img_tag = item.find("img")
+            img = None
+            if img_tag:
+                img = img_tag.get("data-src") or img_tag.get("src")
+                if img and 'blank' in img:
+                    src = item.find("source")
+                    if src: img = src.get("srcset", "").split(",")[0].strip().split(" ")[0]
+            desc = item.select_one("p.description")
+            articles.append({"title": title, "link": link, "img": img,
+                "summary": desc.get_text(strip=True)[:150] if desc else "",
+                "time": "", "featured": i == 0, "source": "vne", "group": ""})
+            seen.add(link)
+        return articles
+    except Exception as e:
+        return [{"title": f"⚠️ {e}", "link": "#", "img": None, "summary": "", "time": "", "featured": False, "source": "vne", "group": ""}]
+
+def scrape_vne_article(url):
+    try:
+        r = requests.get(url, headers=HEADERS, timeout=15); r.encoding = "utf-8"
+        soup = BeautifulSoup(r.text, "lxml")
+        h1 = soup.select_one("h1.title-detail"); desc = soup.select_one("p.description")
+        dt = soup.select_one("span.date")
+        og_img = ""; og = soup.find("meta", property="og:image")
+        if og: og_img = og.get("content", "")
+        cd = soup.select_one("article.fck_detail")
+        body = []
+        if cd:
+            for ch in cd.children:
+                if not hasattr(ch, 'name') or not ch.name: continue
+                if ch.name == "p":
+                    # Check for video inside <p>
+                    vid = ch.find("video")
+                    if vid:
+                        src = vid.get("src", "")
+                        if src:
+                            body.append({"type": "video", "src": src, "poster": vid.get("poster", "")})
+                            continue
+                    im = ch.find("img")
+                    if im:
+                        s = im.get("data-src") or im.get("src")
+                        if s: body.append({"type": "img", "src": s, "alt": im.get("alt", "")})
+                    t = ch.get_text(strip=True)
+                    if t: body.append({"type": "p", "html": strip_links(''.join(str(c) for c in ch.children))})
+                elif ch.name == "figure":
+                    # Check for video in figure
+                    vid = ch.find("video")
+                    if vid:
+                        src = vid.get("src", "")
+                        cap = ch.find("figcaption")
+                        if src:
+                            body.append({"type": "video", "src": src, "poster": vid.get("poster", ""),
+                                         "caption": cap.get_text(strip=True) if cap else ""})
+                            continue
+                    im = ch.find("img"); cap = ch.find("figcaption")
+                    if im:
+                        s = im.get("data-src") or im.get("src")
+                        if s: body.append({"type": "img", "src": s, "alt": cap.get_text(strip=True) if cap else ""})
+                elif ch.name in ("h2", "h3", "h4"):
+                    body.append({"type": "heading", "text": ch.get_text(strip=True)})
+        return {"title": h1.get_text(strip=True) if h1 else "", "time": dt.get_text(strip=True) if dt else "",
+                "summary": desc.get_text(strip=True) if desc else "", "body": body, "related": [],
+                "source_url": url, "source": "vne", "og_image": og_img}
+    except Exception as e:
+        return {"title": "⚠️ Lỗi", "time": "", "summary": str(e), "body": [], "related": [],
+                "source_url": url, "source": "vne", "og_image": ""}
+
+def _extract_body(cd):
+    body = []
+    for ch in cd.children:
+        if not hasattr(ch, 'name') or not ch.name: continue
+        if ch.name == "p":
+            im = ch.find("img")
+            if im:
+                s = im.get("src") or im.get("data-src")
+                if s: body.append({"type": "img", "src": s, "alt": im.get("alt", "")})
+            t = ch.get_text(strip=True)
+            if t: body.append({"type": "p", "html": strip_links(''.join(str(c) for c in ch.children))})
+        elif ch.name in ("h2", "h3", "h4"):
+            body.append({"type": "heading", "text": ch.get_text(strip=True)})
+        elif ch.name == "blockquote":
+            body.append({"type": "quote", "text": ch.get_text(strip=True)})
+    return body
+
+def _bdp_relates(soup):
+    rels = []
+    rd = soup.select_one("div.relates")
+    if rd:
+        for a in rd.find_all("a", href=True):
+            t = a.get_text(strip=True); h = a.get("href", "")
+            if t and len(t) > 5:
+                if not h.startswith("http"): h = BASE_BDP + h
+                rels.append({"title": t, "link": h})
+    return rels[:5]
+
+def fetch_homepage():
+    all_articles = []
+    def _fetch(src, url, group):
+        arts = scrape_bdp_list(url) if src == "bdp" else scrape_vne_list(url)
+        for a in arts: a["group"] = group
+        return arts
+    with ThreadPoolExecutor(max_workers=5) as ex:
+        futures = {ex.submit(_fetch, s, u, g): g for s, u, g in HOMEPAGE_SOURCES}
+        for f in as_completed(futures):
+            try: all_articles.extend(f.result())
+            except: pass
+    return all_articles
+
+def fetch_news_list(category):
+    val = CATEGORIES.get(category, list(CATEGORIES.values())[0])
+    parts = val.split("::"); src, url_or_key, group = parts[0], parts[1], parts[2]
+    if src == "mix": return render_homepage_html(fetch_homepage())
+    articles = scrape_bdp_list(url_or_key) if src == "bdp" else scrape_vne_list(url_or_key)
+    for a in articles: a["group"] = group
+    return render_list_html(articles, group)
+
+def read_article(url):
+    if not url or url == "#" or len(url) < 10: return "<p>Không tìm thấy bài viết.</p>"
+    if "vnexpress.net" in url: return render_article_html(scrape_vne_article(url))
+    return render_article_html(scrape_bdp_article(url))
+
+# ══════════════════════════════════════════════════════════════════════════════
+# HTML RENDERERS
+# ══════════════════════════════════════════════════════════════════════════════
+def render_homepage_html(articles):
+    if not articles: return "<p class='bdp-empty'>Không tìm thấy tin tức.</p>"
+    now = datetime.now().strftime("%H:%M:%S %d/%m/%Y")
+    groups = {}
+    for a in articles: groups.setdefault(a.get("group", "Khác"), []).append(a)
+    parts = [f'<div class="bdp-wrap"><div class="bdp-topbar"><span>⏱ {now}</span><span>📰 Tin nổi bật từ nhiều nguồn</span></div>']
+    for gn in ["Thời Sự", "Thế Giới", "Kinh Doanh", "Công Nghệ", "Thể Thao", "Giải Trí", "Bóng Đá"]:
+        arts = groups.get(gn, [])
+        if not arts: continue
+        feat = [a for a in arts if a.get("featured")][:2]
+        reg = [a for a in arts if not a.get("featured")][:4]
+        display = feat + reg
+        if not display: continue
+        parts.append(f'<div class="bdp-section"><h2 class="bdp-section-title">{gn}</h2><div class="bdp-grid bdp-grid-home">')
+        for i, art in enumerate(display[:6]): parts.append(_list_card(art, i < len(feat)))
+        parts.append('</div></div>')
+    parts.append('</div>')
+    return '\n'.join(parts)
+
+def render_list_html(articles, group_name=""):
+    if not articles: return "<p class='bdp-empty'>Không tìm thấy tin tức.</p>"
+    now = datetime.now().strftime("%H:%M:%S %d/%m/%Y")
+    featured = [a for a in articles if a.get("featured")]
+    regular = [a for a in articles if not a.get("featured")]
+    parts = [f'<div class="bdp-wrap"><div class="bdp-topbar"><span>⏱ {now}</span><span>📰 {len(articles)} tin · {group_name}</span></div>']
+    if featured:
+        parts.append('<div class="bdp-grid bdp-grid-featured">')
+        for art in featured[:6]: parts.append(_list_card(art, True))
+        parts.append('</div>')
+    if regular:
+        parts.append('<div class="bdp-grid">')
+        for art in regular[:40]: parts.append(_list_card(art, False))
+        parts.append('</div>')
+    parts.append('</div>')
+    return '\n'.join(parts)
+
+def _list_card(art, big):
+    img_html = ""
+    if art.get("img"):
+        c = "bdp-card-img bdp-card-img-big" if big else "bdp-card-img"
+        img_html = f'<div class="{c}"><img src="{art["img"]}" alt="{esc(art["title"])}" onerror="this.parentElement.style.display=\'none\'"></div>'
+    time_html = f'<span class="bdp-card-time">🕐 {art["time"]}</span>' if art.get("time") else ""
+    summ_html = f'<p class="bdp-card-summ">{art["summary"][:120]}...</p>' if art.get("summary") and len(art["summary"]) > 10 else ""
+    link = art.get("link", "#"); aid = make_id(link)
+    tc = "bdp-card-title bdp-card-title-big" if big else "bdp-card-title"
+    grp = art.get("group", ""); badge = ""
+    if art.get("source") == "vne": badge = f'<span class="bdp-badge bdp-badge-vne">{grp or "VnExpress"}</span>'
+    elif art.get("source") == "bdp": badge = f'<span class="bdp-badge bdp-badge-bdp">{grp or "BongDaPlus"}</span>'
+    title_slug = slug(art["title"]); img_url = esc(art.get("img","") or "")
+    share_js = f"event.stopPropagation();window.bdpShare('{esc(art['title'])}','{aid}','{title_slug}','{img_url}')"
+    click_js = f"window.bdpOpen('{esc(link)}','{aid}','{title_slug}','{img_url}')"
+    return f"""<div class="bdp-card" onclick="{click_js}">
+{img_html}<div class="bdp-card-body">{badge}<h3 class="{tc}">{art['title']}</h3>
+{summ_html}<div class="bdp-card-footer">{time_html}
+<button class="bdp-share-btn" onclick="{share_js}" title="Chia sẻ">📤</button></div></div></div>"""
+
+def render_article_html(article):
+    aid = make_id(article["source_url"]); title_slug = slug(article["title"])
+    og_img = article.get("og_image", "")
+    share_js = f"window.bdpShare('{esc(article['title'])}','{aid}','{title_slug}','{esc(og_img)}')"
+    src_label = "VnExpress" if article.get("source") == "vne" else "BongDaPlus"
+    seo = f'<div style="display:none" itemscope itemtype="https://schema.org/NewsArticle"><meta itemprop="headline" content="{esc(article["title"])}"><meta itemprop="datePublished" content="{article.get("time","")}"><meta itemprop="publisher" content="{src_label}"><meta itemprop="image" content="{og_img}"><meta itemprop="description" content="{esc(article.get("summary","")[:160])}"></div>'
+    parts = [f"""{seo}<div class="bdp-article">
+<h1 class="bdp-article-title">{article['title']}</h1>
+<div class="bdp-article-meta"><span>🕐 {article['time']} · {src_label}</span>
+<button class="bdp-share-article-btn" onclick="{share_js}">📤 Chia sẻ</button></div>"""]
+    if article.get("summary"): parts.append(f'<div class="bdp-article-summary">{article["summary"]}</div>')
+    for item in article.get("body", []):
+        if item["type"] == "video":
+            poster = item.get("poster", "")
+            poster_attr = f' poster="{poster}"' if poster else ""
+            caption = item.get("caption", "")
+            cap_html = f'<p class="bdp-figcap">{caption}</p>' if caption else ""
+            parts.append(f"""<div class="bdp-video-wrap">
+<video controls playsinline preload="metadata"{poster_attr} class="bdp-video">
+<source src="{item['src']}" type="video/mp4">Video không hỗ trợ trên trình duyệt này.</video>{cap_html}</div>""")
+        elif item["type"] == "img":
+            alt = item.get("alt", ""); cap = f'<figcaption class="bdp-figcap">{alt}</figcaption>' if alt else ""
+            parts.append(f'<figure class="bdp-figure"><img src="{item["src"]}" alt="{alt}" onerror="this.parentElement.style.display=\'none\'">{cap}</figure>')
+        elif item["type"] == "p": parts.append(f'<p class="bdp-article-p">{item["html"]}</p>')
+        elif item["type"] == "heading": parts.append(f'<h2 class="bdp-article-h2">{item["text"]}</h2>')
+        elif item["type"] == "quote": parts.append(f'<blockquote class="bdp-quote">{item["text"]}</blockquote>')
+    if article.get("related"):
+        parts.append('<div class="bdp-related"><h3>📰 Tin liên quan</h3>')
+        for rel in article["related"]:
+            rid = make_id(rel["link"]); rs = slug(rel["title"])
+            parts.append(f'<div class="bdp-related-item" onclick="window.bdpOpen(\'{esc(rel["link"])}\',\'{rid}\',\'{rs}\',\'\')"><span>▸ {rel["title"]}</span></div>')
+        parts.append('</div>')
+    parts.append(f"""<div class="bdp-comments" id="comments-{aid}"><h3>💬 Bình luận</h3>
+<div id="cmt-list-{aid}"></div><div class="bdp-cmt-form">
+<input id="cmt-name-{aid}" class="bdp-cmt-input" placeholder="Tên của bạn..." maxlength="50">
+<textarea id="cmt-text-{aid}" class="bdp-cmt-textarea" placeholder="Viết bình luận..." rows="3" maxlength="500"></textarea>
+<button class="bdp-cmt-submit" onclick="window.bdpAddCmt('{aid}')">Gửi bình luận</button></div></div>""")
+    parts.append('</div>')
+    return '\n'.join(parts)
+
+# ══════════════════════════════════════════════════════════════════════════════
+CSS = """
+body,html{margin:0!important;padding:0!important;overflow-x:hidden;background:#111!important}
+.gradio-container{max-width:100%!important;width:100%!important;margin:0!important;padding:0!important;border-radius:0!important;background:#111!important}
+.main,.contain{max-width:100%!important;width:100%!important;padding:0!important;margin:0!important}
+.gradio-container>.main>.contain{padding-top:0!important}
+.gap{gap:0!important}
+footer,.built-with{display:none!important}
+#article-url-input,#btn-read-article{display:none!important;height:0!important;overflow:hidden!important}
+.bdp-header{background:linear-gradient(135deg,#0d1117,#1a3a2a 50%,#8b7500);padding:14px 16px;text-align:center}
+.bdp-header h1{color:#fff;font-size:20px;margin:0;font-weight:800;text-shadow:0 2px 6px rgba(0,0,0,.4)}
+.bdp-header p{color:rgba(255,255,255,.6);font-size:11px;margin:2px 0 0}
+@media(min-width:768px){.bdp-header h1{font-size:26px}.bdp-header{padding:20px}}
+.controls-row{padding:0 8px!important;background:#111!important}
+.controls-row>div{background:#111!important;border:none!important}
+.controls-row label{color:#aaa!important;font-size:12px!important}
+.controls-row .wrap{border-color:#333!important;background:#1a1a1a!important}
+.controls-row input,.controls-row select,.controls-row button{color:#eee!important}
+.bdp-wrap{padding:8px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
+.bdp-topbar{display:flex;justify-content:space-between;padding:4px 4px 8px;color:#666;font-size:11px}
+.bdp-empty{text-align:center;color:#666;padding:60px 20px}
+.bdp-section{margin-bottom:16px}
+.bdp-section-title{font-size:16px;font-weight:700;color:#5cb87a;margin:4px 0 8px;border-left:3px solid #5cb87a;padding-left:8px}
+@media(min-width:768px){.bdp-section-title{font-size:18px}}
+.bdp-grid{display:grid;grid-template-columns:1fr;gap:8px}
+.bdp-grid-featured,.bdp-grid-home{margin-bottom:4px}
+@media(min-width:420px){.bdp-grid{grid-template-columns:repeat(2,1fr)}}
+@media(min-width:768px){.bdp-grid{grid-template-columns:repeat(3,1fr);gap:10px}}
+@media(min-width:1100px){.bdp-grid{grid-template-columns:repeat(4,1fr)}}
+.bdp-card{background:#1a1a1a;border-radius:10px;overflow:hidden;cursor:pointer;transition:transform .15s,box-shadow .15s;border:1px solid #222}
+.bdp-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.5)}
+.bdp-card:active{transform:scale(.98)}
+.bdp-card-img{width:100%;height:130px;overflow:hidden;background:#222}
+.bdp-card-img-big{height:170px}
+.bdp-card-img img{width:100%;height:100%;object-fit:cover}
+@media(min-width:768px){.bdp-card-img{height:150px}.bdp-card-img-big{height:190px}}
+.bdp-card-body{padding:8px 10px 6px}
+.bdp-card-title{font-size:13px;font-weight:600;color:#eee;margin:0;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
+.bdp-card-title-big{font-size:14.5px}
+@media(min-width:768px){.bdp-card-title{font-size:13.5px}.bdp-card-title-big{font-size:15px}}
+.bdp-card-summ{font-size:11.5px;color:#777;margin:4px 0 0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.bdp-card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:6px}
+.bdp-card-time{color:#555;font-size:10.5px}
+.bdp-share-btn{background:none;border:none;cursor:pointer;font-size:15px;padding:3px 5px;border-radius:6px;transition:background .15s;color:#777}
+.bdp-share-btn:hover{background:#333}
+.bdp-badge{font-size:9px;padding:1px 6px;border-radius:3px;font-weight:700;display:inline-block;margin-bottom:4px}
+.bdp-badge-vne{background:#c0392b;color:#fff}
+.bdp-badge-bdp{background:#1a5c35;color:#fff}
+.bdp-article{padding:14px 12px 30px;max-width:720px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}
+@media(min-width:768px){.bdp-article{padding:20px 16px 50px}}
+.bdp-article-title{font-size:21px;font-weight:800;color:#f0f0f0;line-height:1.3;margin:0 0 8px}
+@media(min-width:768px){.bdp-article-title{font-size:27px}}
+.bdp-article-meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;color:#666;font-size:12px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid #2a2a2a}
+.bdp-share-article-btn{background:linear-gradient(135deg,#1a5c35,#2d8659);color:#fff;border:none;padding:6px 14px;border-radius:18px;font-size:12px;cursor:pointer;font-weight:600}
+.bdp-share-article-btn:hover{opacity:.85}
+.bdp-article-summary{background:#1a2a1f;border-left:4px solid #2d8659;padding:12px 14px;margin-bottom:16px;border-radius:0 8px 8px 0;font-weight:600;color:#ccc;line-height:1.5;font-size:14.5px}
+.bdp-article-p{font-size:15.5px;line-height:1.75;color:#ccc;margin:0 0 12px}
+@media(min-width:768px){.bdp-article-p{font-size:16.5px}}
+.bdp-article-h2{font-size:19px;font-weight:700;color:#eee;margin:24px 0 10px}
+.bdp-quote{border-left:4px solid #b8960c;padding:10px 14px;margin:14px 0;background:#1a1a10;font-style:italic;color:#bbb;border-radius:0 6px 6px 0}
+.bdp-figure{margin:14px 0;text-align:center}
+.bdp-figure img{max-width:100%;height:auto;border-radius:8px}
+.bdp-figcap{color:#666;font-size:11.5px;margin-top:4px;font-style:italic}
+.bdp-video-wrap{margin:14px 0;border-radius:10px;overflow:hidden;background:#000}
+.bdp-video{width:100%;max-height:420px;display:block;border-radius:10px}
+@media(min-width:768px){.bdp-video{max-height:500px}}
+.bdp-related{margin-top:24px;padding-top:14px;border-top:1px solid #2a2a2a}
+.bdp-related h3{font-size:16px;color:#eee;margin:0 0 8px}
+.bdp-related-item{padding:8px 10px;margin-bottom:5px;border:1px solid #262626;border-radius:8px;cursor:pointer;transition:background .15s}
+.bdp-related-item:hover{background:#222}
+.bdp-related-item span{font-size:13.5px;color:#5cb87a;font-weight:500}
+.bdp-comments{margin-top:28px;padding-top:16px;border-top:1px solid #2a2a2a}
+.bdp-comments h3{font-size:16px;color:#eee;margin:0 0 10px}
+.bdp-cmt-item{background:#1a1a1a;border:1px solid #262626;border-radius:8px;padding:10px 12px;margin-bottom:8px}
+.bdp-cmt-author{font-weight:700;color:#5cb87a;font-size:13px}
+.bdp-cmt-date{color:#555;font-size:11px;margin-left:8px}
+.bdp-cmt-body{color:#ccc;font-size:14px;margin-top:4px;line-height:1.5}
+.bdp-cmt-form{margin-top:12px}
+.bdp-cmt-input{width:100%;padding:8px 10px;background:#1a1a1a;border:1px solid #333;border-radius:6px;color:#eee;font-size:13px;margin-bottom:6px;box-sizing:border-box}
+.bdp-cmt-textarea{width:100%;padding:8px 10px;background:#1a1a1a;border:1px solid #333;border-radius:6px;color:#eee;font-size:13px;resize:vertical;box-sizing:border-box}
+.bdp-cmt-submit{background:linear-gradient(135deg,#1a5c35,#2d8659);color:#fff;border:none;padding:8px 20px;border-radius:18px;font-size:13px;cursor:pointer;font-weight:600;margin-top:8px}
+.bdp-cmt-submit:hover{opacity:.85}
+.bdp-cmt-empty{color:#555;font-size:13px;font-style:italic;padding:8px 0}
+.bdp-toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#2d8659;color:#fff;padding:10px 22px;border-radius:22px;font-size:13px;z-index:9999;opacity:0;transition:opacity .3s;pointer-events:none;font-weight:500}
+.bdp-toast.show{opacity:1}
+.gr-group,.gr-box,.gr-panel{background:#111!important;border:none!important}
+.label-wrap{background:#111!important}
+"""
+
+JS_HEAD = """
+<meta name="description" content="Tin tức tổng hợp nhanh nhất từ VnExpress, BongDaPlus - Thời sự, Thế giới, Kinh doanh, Công nghệ, Thể thao, Giải trí">
+<meta property="og:title" content="Tin Tức Việt Nam - Tổng Hợp Nhanh Nhất" id="og-title">
+<meta property="og:description" content="Đọc tin tức từ VnExpress, BongDaPlus. Cập nhật tự động." id="og-desc">
+<meta property="og:type" content="website">
+<meta property="og:image" content="https://bongdaplus.vn/Assets/img/logo.png" id="og-image">
+<meta property="og:url" content="" id="og-url">
+<meta name="twitter:card" content="summary_large_image">
+<meta name="twitter:image" content="" id="tw-image">
+<link rel="canonical" href="https://bep40-bongdaplus-news.hf.space">
+<script>
+(function(){
+window.bdpOpen=function(url,aid,sl,img){
+    window.location.hash='#/'+sl+'/'+aid;
+    try{localStorage.setItem('bdp_url_'+aid,url);if(img)localStorage.setItem('bdp_img_'+aid,img);}catch(e){}
+    /* Update OG meta tags dynamically */
+    var oi=document.getElementById('og-image');if(oi&&img)oi.content=img;
+    var ti=document.getElementById('tw-image');if(ti&&img)ti.content=img;
+    var ou=document.getElementById('og-url');if(ou)ou.content=window.location.href;
+    var el=document.getElementById('article-url-input');
+    if(el){var ta=el.querySelector('textarea');if(ta){ta.value=url;ta.dispatchEvent(new Event('input',{bubbles:true}));}}
+    document.getElementById('btn-read-article').click();
+    window.scrollTo({top:0,behavior:'smooth'});
+};
+window.bdpShare=async function(title,aid,sl,img){
+    var u=window.location.origin+window.location.pathname+'#/'+sl+'/'+aid;
+    /* Store image for when someone opens the shared link */
+    try{if(img)localStorage.setItem('bdp_img_'+aid,img);}catch(e){}
+    /* Update OG tags before share so crawlers pick them up */
+    var oi=document.getElementById('og-image');if(oi&&img)oi.content=img;
+    var ot=document.getElementById('og-title');if(ot)ot.content=title;
+    var ou=document.getElementById('og-url');if(ou)ou.content=u;
+    var ti=document.getElementById('tw-image');if(ti&&img)ti.content=img;
+    var sd={title:title,url:u,text:title+' - Tin tức tổng hợp'};
+    if(navigator.share){try{await navigator.share(sd);return;}catch(e){if(e.name==='AbortError')return;}}
+    if(navigator.clipboard&&navigator.clipboard.writeText){try{await navigator.clipboard.writeText(u);window.bdpToast('✅ Đã sao chép liên kết!');return;}catch(e){}}
+    var ta=document.createElement('textarea');ta.value=u;ta.style.cssText='position:fixed;opacity:0';
+    document.body.appendChild(ta);ta.focus();ta.select();
+    try{document.execCommand('copy');window.bdpToast('✅ Đã sao chép liên kết!');}catch(e){window.prompt('Sao chép:',u);}
+    document.body.removeChild(ta);
+};
+window.bdpToast=function(m){var e=document.getElementById('bdp-toast');if(!e){e=document.createElement('div');e.id='bdp-toast';e.className='bdp-toast';document.body.appendChild(e);}e.innerText=m;e.classList.add('show');setTimeout(function(){e.classList.remove('show');},2200);};
+function gc(a){try{return JSON.parse(localStorage.getItem('bdp_cmt_'+a))||[];}catch(e){return[];}}
+function sc(a,c){try{localStorage.setItem('bdp_cmt_'+a,JSON.stringify(c));}catch(e){}}
+window.bdpRenderCmt=function(a){var l=document.getElementById('cmt-list-'+a);if(!l)return;var c=gc(a);if(!c.length){l.innerHTML='<div class="bdp-cmt-empty">Chưa có bình luận. Hãy là người đầu tiên!</div>';return;}var h='';for(var i=c.length-1;i>=0;i--){var x=c[i];h+='<div class="bdp-cmt-item"><span class="bdp-cmt-author">'+x.name+'</span><span class="bdp-cmt-date">'+x.date+'</span><div class="bdp-cmt-body">'+x.text.replace(/</g,'&lt;').replace(/>/g,'&gt;')+'</div></div>';}l.innerHTML=h;};
+window.bdpAddCmt=function(a){var n=document.getElementById('cmt-name-'+a),t=document.getElementById('cmt-text-'+a);if(!n||!t)return;var nm=n.value.trim(),tx=t.value.trim();if(!nm){window.bdpToast('⚠️ Nhập tên');n.focus();return;}if(!tx){window.bdpToast('⚠️ Nhập bình luận');t.focus();return;}var c=gc(a);c.push({name:nm,text:tx,date:new Date().toLocaleString('vi-VN')});sc(a,c);t.value='';window.bdpRenderCmt(a);window.bdpToast('✅ Đã gửi!');};
+new MutationObserver(function(ms){ms.forEach(function(m){m.addedNodes.forEach(function(n){if(n.querySelectorAll){n.querySelectorAll('[id^="cmt-list-"]').forEach(function(d){window.bdpRenderCmt(d.id.replace('cmt-list-',''));});}});});}).observe(document.body,{childList:true,subtree:true});
+window.addEventListener('load',function(){var h=window.location.hash;if(h&&h.startsWith('#/')){var ps=h.slice(2).split('/');if(ps.length>=2){var aid=ps[ps.length-1];try{var url=localStorage.getItem('bdp_url_'+aid);var img=localStorage.getItem('bdp_img_'+aid)||'';if(url)setTimeout(function(){window.bdpOpen(url,aid,ps.slice(0,-1).join('/'),img);},1200);}catch(e){}}}});
+})();
+</script>
+"""
+
+with gr.Blocks(title="Tin Tức Việt Nam - VnExpress, BongDaPlus", css=CSS, head=JS_HEAD, theme=gr.themes.Base(), fill_width=True) as demo:
+    gr.HTML("""<div class="bdp-header"><h1>📰 Tin Tức Việt Nam</h1>
+    <p>VnExpress · BongDaPlus · Thời sự · Thế giới · Kinh doanh · Công nghệ · Thể thao · Giải trí</p></div>""")
+    article_url = gr.Textbox(value="", visible=False, elem_id="article-url-input")
+    with gr.Row(elem_classes=["controls-row"]):
+        cat = gr.Dropdown(choices=list(CATEGORIES.keys()), value="🏠 Trang Chủ (Nổi Bật)", label="Chuyên mục", scale=3, interactive=True)
+        ref_btn = gr.Button("🔄 Làm mới", variant="primary", scale=1)
+        back_btn = gr.Button("← Quay lại", variant="secondary", scale=1, visible=False)
+    news_list = gr.HTML()
+    article_view = gr.HTML(visible=False)
+    read_btn = gr.Button("Đọc", visible=False, elem_id="btn-read-article")
+    def show_article(url):
+        if not url or url == "#" or len(url) < 10:
+            return gr.update(visible=True), gr.update(visible=False), gr.update(visible=False), gr.update(visible=False), ""
+        return (gr.update(visible=False), gr.update(value=read_article(url), visible=True), gr.update(visible=False), gr.update(visible=True), "")
+    def show_list(c):
+        return (gr.update(value=fetch_news_list(c), visible=True), gr.update(visible=False), gr.update(visible=True), gr.update(visible=False))
+    read_btn.click(fn=show_article, inputs=[article_url], outputs=[news_list, article_view, ref_btn, back_btn, article_url])
+    back_btn.click(fn=show_list, inputs=[cat], outputs=[news_list, article_view, ref_btn, back_btn])
+    ref_btn.click(fn=show_list, inputs=[cat], outputs=[news_list, article_view, ref_btn, back_btn])
+    cat.change(fn=show_list, inputs=[cat], outputs=[news_list, article_view, ref_btn, back_btn])
+    timer = gr.Timer(value=REFRESH_SECONDS, active=True)
+    timer.tick(fn=fetch_news_list, inputs=cat, outputs=news_list)
+    demo.load(fn=fetch_news_list, inputs=cat, outputs=news_list)
+
+if __name__ == "__main__":
+    demo.launch()