fix: 24h in slider + TikTok feed scroll-based playback

app.py

@@ -1 +1,1029 @@
-# Content from /app/app.py uploaded via script
+import gradio as gr
+import requests
+import re
+import hashlib
+import json
+from urllib.parse import quote as urlquote
+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"
+BASE_24H = "https://www.24h.com.vn"
+REFRESH_SECONDS = 300
+SPACE_URL = "https://bep40-bongdaplus-news.hf.space"
+
+CATEGORIES = {
+    "🏠 Trang Chủ (Nổi Bật)": "mix::home::Trang Chủ",
+    "🎬 Video Tổng Hợp":       "mix::video::Video",
+    "📰 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 Đá"),
+]
+
+# ── Helpers ────────────────────────────────────────────────────────────────────
+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 safe_url(url):
+    if not url: return ""
+    try:
+        return urlquote(url, safe=':/?#[]@!$&()*+,;=-._~%')
+    except Exception:
+        return url.replace(" ","%20").replace("'","%27").replace('"',"%22")
+
+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]
+
+def _extract_bdp_video_id(url):
+    m = re.search(r'-(\d{6,})\.html', url)
+    return m.group(1) if m else None
+
+# ══════════════════════════════════════════════════════════════════════════════
+# SCRAPERS
+# ══════════════════════════════════════════════════════════════════════════════
+def _get(url):
+    r = requests.get(url, headers=HEADERS, timeout=15); r.encoding="utf-8"
+    return BeautifulSoup(r.text, "lxml")
+
+def _get_raw(url):
+    r = requests.get(url, headers=HEADERS, timeout=15); r.encoding="utf-8"
+    return r.text, BeautifulSoup(r.text, "lxml")
+
+# ── BDP Video Embed Fetcher ────────────────────────────────────────────────────
+def fetch_bdp_embed_data(video_id):
+    try:
+        embed_url = f"{BASE_BDP}/video-embed/{video_id}.html"
+        html, soup = _get_raw(embed_url)
+        video = soup.select_one("video#videoPlayer")
+        if not video: return None
+        source = video.find("source")
+        result = {"mp4": source.get("src","") if source else "", "poster": video.get("poster","")}
+        carousel_match = re.findall(r'vdo\.relatedCarousel\((\[.*?\])\)', html, re.DOTALL)
+        if carousel_match:
+            posters = re.findall(r"poster:\s*'([^']+)'", carousel_match[0])
+            vdorefs = re.findall(r"vdoref:\s*'([^']+)'", carousel_match[0])
+            titles = re.findall(r"title:\s*'([^']*)'", carousel_match[0])
+            result["related"] = [
+                {"poster": p, "link": BASE_BDP + v if not v.startswith("http") else v, "title": t}
+                for p, v, t in zip(posters, vdorefs, titles)
+            ]
+        return result
+    except: return None
+
+# ── BDP Scrapers ───────────────────────────────────────────────────────────────
+def scrape_bdp_list(url):
+    try:
+        soup = _get(url); articles,seen=[],set()
+        for sel,feat in [("div.news.fst",True),("div.sld-itm.news",True),("li.news",False)]:
+            for it in soup.select(sel):
+                tag = it.find("a",class_="title") or it.find("a",href=True)
+                if not tag: continue
+                t=tag.get_text(strip=True); lk=tag.get("href","")
+                if not t or len(t)<5: continue
+                if lk and not lk.startswith("http"): lk=BASE_BDP+lk
+                if lk in seen: continue
+                im=it.find("img"); img=(im.get("data-src") or im.get("src")) if im else None
+                sm=it.find("p",class_="summ"); tt=it.find("div",class_="in-time")
+                is_video = "/video/" in lk
+                articles.append({"title":t,"link":lk,"img":img,"summary":sm.get_text(strip=True) if sm else "",
+                    "time":tt.get_text(strip=True) if tt else "","featured":feat,"source":"bdp","group":"","is_video":is_video})
+                seen.add(lk)
+        return articles
+    except Exception as e:
+        return [{"title":f"⚠️ {e}","link":"#","img":None,"summary":"","time":"","featured":False,"source":"bdp","group":"","is_video":False}]
+
+def scrape_bdp_video_list():
+    try:
+        soup = _get(f"{BASE_BDP}/video")
+        articles, seen = [], set()
+        for a in soup.find_all("a", href=True):
+            href = a.get("href", "")
+            if "/video/" not in href: continue
+            if href in ("/video/", "/video/ban-thang-dep", "/video/highlight"): continue
+            if not href.startswith("http"): href = BASE_BDP + href
+            if href in seen: continue
+            title = a.get_text(strip=True)
+            title = re.sub(r'^\d{2}:\d{2}', '', title).strip()
+            if not title or len(title) < 5: continue
+            img_tag = a.find("img")
+            if not img_tag:
+                parent = a.parent
+                if parent: img_tag = parent.find("img")
+            img = None
+            if img_tag: img = img_tag.get("data-src") or img_tag.get("src") or img_tag.get("data-original")
+            articles.append({"title": title, "link": href, "img": img, "summary": "", "time": "",
+                "featured": len(articles) < 3, "source": "bdp", "group": "BongDaPlus Video", "is_video": True})
+            seen.add(href)
+        return articles[:30]
+    except Exception as e:
+        return [{"title": f"⚠️ {e}", "link": "#", "img": None, "summary": "", "time": "",
+                 "featured": False, "source": "bdp", "group": "", "is_video": False}]
+
+def scrape_bdp_article(url):
+    try:
+        soup = _get(url)
+        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=soup.find("meta",property="og:image"); og_img=og.get("content","") if og else ""
+        cd=soup.select_one("div.content#postContent") or soup.select_one("div.content")
+        body=_extract_body(cd) if cd else []
+        is_video_page = "/video/" in url
+        if is_video_page:
+            vid_id = _extract_bdp_video_id(url)
+            if vid_id:
+                embed = fetch_bdp_embed_data(vid_id)
+                if embed and embed.get("mp4"):
+                    body.insert(0, {"type": "video", "src": embed["mp4"], "poster": embed.get("poster", ""), "vtype": "mp4"})
+                    if not og_img or "logo" in og_img.lower(): og_img = embed.get("poster", og_img)
+        else:
+            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)
+        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):
+    try:
+        full = embed_src if embed_src.startswith("http") else BASE_BDP+embed_src
+        html, soup = _get_raw(full)
+        video = soup.select_one("video#videoPlayer") or soup.select_one("video")
+        if video:
+            source = video.find("source")
+            if source:
+                return {"type":"video","src":source.get("src",""),"poster":video.get("poster",""),"vtype":"mp4"}
+    except: pass
+    return None
+
+# ── 24h.com.vn Scrapers ───────────────────────────────────────────────────────
+def scrape_24h_video_list():
+    """Scrape 24h.com.vn video-highlight page for video articles."""
+    try:
+        url = f"{BASE_24H}/video-highlight-c953.html"
+        r = requests.get(url, headers=HEADERS, timeout=15); r.encoding="utf-8"
+        soup = BeautifulSoup(r.text, "lxml")
+        articles, seen = [], set()
+        for a in soup.find_all("a", href=True):
+            href = a.get("href","")
+            title = a.get("title","") or a.get_text(strip=True)
+            if not title or len(title) < 15: continue
+            if "javascript:" in href: continue
+            if not href.startswith("http"): href = BASE_24H + href
+            if href in seen: continue
+            if "video" not in href.lower() and "highlight" not in href.lower(): continue
+            if href.endswith("-c953.html"): continue  # skip category page itself
+            seen.add(href)
+            img = a.find("img")
+            img_src = None
+            if img:
+                for attr in ["data-original", "data-src", "src"]:
+                    v = img.get(attr, "")
+                    if v and "base64" not in v:
+                        img_src = v; break
+            articles.append({"title": title, "link": href, "img": img_src, "summary": "", "time": "",
+                "featured": len(articles) < 3, "source": "24h", "group": "24h Video", "is_video": True})
+        return articles[:25]
+    except Exception as e:
+        return []
+
+def scrape_24h_article(url):
+    """Scrape a 24h.com.vn article - extract m3u8 video 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 = h1.get_text(strip=True) if h1 else ""
+        og = soup.find("meta", property="og:image")
+        og_img = og.get("content","") if og else ""
+        desc_meta = soup.find("meta", property="og:description")
+        summary = desc_meta.get("content","") if desc_meta else ""
+        # Extract m3u8 video URLs
+        m3u8s = re.findall(r'(https?://cdn\.24h\.com\.vn/[^\s"\'\\]+\.m3u8)', r.text)
+        videos = [u for u in m3u8s if '_720p' not in u]
+        if not videos: videos = m3u8s
+        body = []
+        for vsrc in videos[:3]:
+            body.append({"type": "video", "src": vsrc, "poster": og_img, "vtype": "hls"})
+        # Extract text content
+        content_selectors = ["div.the-article-body", "div.nws-mainContent", "div.nwsCt",
+                             "div#ctl00_mainContent_ctl00_divNewsContent", "div.detail-content"]
+        cd = None
+        for sel in content_selectors:
+            cd = soup.select_one(sel)
+            if cd: break
+        if cd:
+            for ch in cd.children:
+                if not hasattr(ch,'name') or not ch.name: continue
+                if ch.name == "p":
+                    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)})
+        return {"title": title, "time": "", "summary": summary[:200], "body": body,
+                "related": [], "source_url": url, "source": "24h", "og_image": og_img}
+    except Exception as e:
+        return {"title":"⚠️ Lỗi","time":"","summary":str(e),"body":[],"related":[],"source_url":url,"source":"24h","og_image":""}
+
+def _extract_24h_video_url(article_url):
+    """Quick extract just the m3u8 URL + poster from a 24h article (for TikTok feed)."""
+    try:
+        r = requests.get(article_url, headers=HEADERS, timeout=10); r.encoding="utf-8"
+        m3u8s = re.findall(r'(https?://cdn\.24h\.com\.vn/[^\s"\'\\]+\.m3u8)', r.text)
+        videos = [u for u in m3u8s if '_720p' not in u]
+        if not videos: videos = m3u8s
+        if not videos: return None
+        soup = BeautifulSoup(r.text, "lxml")
+        og = soup.find("meta", property="og:image")
+        poster = og.get("content","") if og else ""
+        return {"src": videos[0], "poster": poster, "vtype": "hls"}
+    except: return None
+
+# ── VNE Scrapers ───────────────────────────────────────────────────────────────
+def scrape_vne_list(url):
+    try:
+        soup=_get(url); articles,seen=[],set()
+        for i,it in enumerate(soup.select("article.item-news")):
+            a=it.select_one("h2.title-news a") or it.select_one("h3.title-news a") or it.find("a",href=True,title=True)
+            if not a: continue
+            t=a.get("title","") or a.get_text(strip=True); lk=a.get("href","")
+            if not t or len(t)<5 or lk in seen: continue
+            im=it.find("img"); img=None
+            if im:
+                img=im.get("data-src") or im.get("src")
+                if img and 'blank' in img:
+                    src=it.find("source")
+                    if src: img=src.get("srcset","").split(",")[0].strip().split(" ")[0]
+            desc=it.select_one("p.description")
+            articles.append({"title":t,"link":lk,"img":img,"summary":desc.get_text(strip=True)[:150] if desc else "",
+                "time":"","featured":i==0,"source":"vne","group":"","is_video":False})
+            seen.add(lk)
+        return articles
+    except Exception as e:
+        return [{"title":f"⚠️ {e}","link":"#","img":None,"summary":"","time":"","featured":False,"source":"vne","group":"","is_video":False}]
+
+def scrape_vne_article(url):
+    try:
+        soup=_get(url)
+        h1=soup.select_one("h1.title-detail"); desc=soup.select_one("p.description"); dt=soup.select_one("span.date")
+        og=soup.find("meta",property="og:image"); og_img=og.get("content","") if og else ""
+        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":
+                    vid=ch.find("video")
+                    if vid:
+                        vsrc=vid.get("src","")
+                        if vsrc:
+                            vtype="hls" if ("m3u8" in vsrc or "mpegURL" in (vid.get("type","") or "")) else "mp4"
+                            body.append({"type":"video","src":vsrc,"poster":vid.get("poster",""),"vtype":vtype})
+                            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":
+                    vid=ch.find("video")
+                    if vid:
+                        vsrc=vid.get("src","")
+                        cap=ch.find("figcaption")
+                        if vsrc:
+                            vtype="hls" if ("m3u8" in vsrc or "mpegURL" in (vid.get("type","") or "")) else "mp4"
+                            body.append({"type":"video","src":vsrc,"poster":vid.get("poster",""),"vtype":vtype,
+                                         "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]
+
+# ── Video aggregator ───────────────────────────────────────────────────────────
+def fetch_latest_videos():
+    """Fetch latest videos from BDP carousel + 24h highlights for the homepage slider."""
+    videos = []
+    # BDP carousel
+    try:
+        soup = _get(f"{BASE_BDP}/video")
+        first_link = None
+        for a in soup.find_all("a", href=True):
+            href = a.get("href", "")
+            if "/video/" in href and re.search(r'-\d{6,}\.html', href):
+                first_link = href if href.startswith("http") else BASE_BDP + href; break
+        if first_link:
+            vid_id = _extract_bdp_video_id(first_link)
+            if vid_id:
+                embed = fetch_bdp_embed_data(vid_id)
+                if embed:
+                    for rel in embed.get("related", []):
+                        videos.append({"title": rel["title"], "link": rel["link"], "img": rel["poster"], "source": "bdp"})
+    except: pass
+    # 24h highlights
+    try:
+        h24 = scrape_24h_video_list()[:10]
+        for a in h24:
+            if a.get("img"):
+                videos.append({"title": a["title"], "link": a["link"], "img": a["img"], "source": "24h"})
+    except: pass
+    return videos[:20]
+
+def fetch_video_list():
+    """Fetch videos from BDP + 24h combined."""
+    bdp_videos = scrape_bdp_video_list()
+    try:
+        h24_videos = scrape_24h_video_list()
+    except:
+        h24_videos = []
+    # Interleave
+    combined = []
+    bi, hi = 0, 0
+    while bi < len(bdp_videos) or hi < len(h24_videos):
+        if bi < len(bdp_videos):
+            combined.append(bdp_videos[bi]); bi += 1
+        if bi < len(bdp_videos):
+            combined.append(bdp_videos[bi]); bi += 1
+        if hi < len(h24_videos):
+            combined.append(h24_videos[hi]); hi += 1
+    return combined
+
+def fetch_tiktok_feed_videos():
+    """Pre-fetch video URLs for TikTok fullscreen feed. Returns list of {title, src, poster, vtype, source, link}."""
+    results = []
+
+    def _fetch_bdp_vid(art):
+        vid_id = _extract_bdp_video_id(art["link"])
+        if not vid_id: return None
+        embed = fetch_bdp_embed_data(vid_id)
+        if not embed or not embed.get("mp4"): return None
+        return {"title": art["title"], "src": embed["mp4"], "poster": embed.get("poster",""),
+                "vtype": "mp4", "source": "bdp", "link": art["link"]}
+
+    def _fetch_24h_vid(art):
+        data = _extract_24h_video_url(art["link"])
+        if not data: return None
+        return {"title": art["title"], "src": data["src"], "poster": data["poster"],
+                "vtype": data["vtype"], "source": "24h", "link": art["link"]}
+
+    # Get video lists
+    bdp_list = scrape_bdp_video_list()[:12]
+    h24_list = scrape_24h_video_list()[:12]
+
+    with ThreadPoolExecutor(max_workers=8) as ex:
+        bdp_futures = {ex.submit(_fetch_bdp_vid, a): a for a in bdp_list}
+        h24_futures = {ex.submit(_fetch_24h_vid, a): a for a in h24_list}
+        bdp_results, h24_results = [], []
+        for f in as_completed(bdp_futures):
+            try:
+                r = f.result()
+                if r: bdp_results.append(r)
+            except: pass
+        for f in as_completed(h24_futures):
+            try:
+                r = f.result()
+                if r: h24_results.append(r)
+            except: pass
+
+    # Interleave BDP and 24h
+    bi, hi = 0, 0
+    while bi < len(bdp_results) or hi < len(h24_results):
+        if bi < len(bdp_results):
+            results.append(bdp_results[bi]); bi += 1
+        if hi < len(h24_results):
+            results.append(h24_results[hi]); hi += 1
+    return results[:20]
+
+# ── Dispatch ───────────────────────────────────────────────────────────────────
+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" and url_or_key=="home":
+        return render_homepage_html(fetch_homepage())
+    if src=="mix" and url_or_key=="video":
+        return render_video_page_html()
+    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))
+    if "24h.com.vn" in url: return render_article_html(scrape_24h_article(url))
+    return render_article_html(scrape_bdp_article(url))
+
+# ══════════════════════════════════════════════════════════════════════════════
+# HTML RENDERERS
+# ══════════════════════════════════════════════════════════════════════════════
+def render_video_slider_html(videos):
+    if not videos: return ""
+    items = []
+    for i, v in enumerate(videos):
+        img = safe_url(v.get("img", ""))
+        link = v.get("link", "#")
+        title = v.get("title", "")
+        aid = make_id(link)
+        sl = slug(title) if title else f"video-{i}"
+        click_js = f"window.bdpOpen('{esc(link)}','{aid}','{sl}')"
+        src_badge = ""
+        if v.get("source") == "24h":
+            src_badge = '<span class="vslide-badge vslide-badge-24h">24h</span>'
+        items.append(f'''<div class="vslide-item" onclick="{click_js}">
+<div class="vslide-thumb"><img src="{img}" alt="" class="bdp-lazy-img"><div class="vslide-play">▶</div>{src_badge}</div>
+<p class="vslide-title">{title}</p></div>''')
+    return f'''<div class="vslide-wrap">
+<div class="vslide-header"><span class="vslide-label">🎬 Video Mới Nhất</span>
+<div class="vslide-nav"><button class="vslide-btn" onclick="window.bdpSlideScroll(-1)">◀</button>
+<button class="vslide-btn" onclick="window.bdpSlideScroll(1)">▶</button></div></div>
+<div class="vslide-track" id="vslide-track">{''.join(items)}</div></div>'''
+
+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")
+    try: videos = fetch_latest_videos()
+    except: videos = []
+    slider_html = render_video_slider_html(videos)
+    groups={}
+    for a in articles: groups.setdefault(a.get("group","Khác"),[]).append(a)
+    parts=[f'<div class="bdp-wrap">{slider_html}<div class="bdp-topbar"><span>⏱ {now}</span><span>📰 Tin nổi bật</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_video_page_html():
+    """Render video page with fullscreen TikTok feed + grid list."""
+    articles = fetch_video_list()
+    tiktok_videos = fetch_tiktok_feed_videos()
+    now = datetime.now().strftime("%H:%M:%S %d/%m/%Y")
+
+    # Build TikTok fullscreen feed HTML
+    tiktok_html = ""
+    if tiktok_videos:
+        slides = []
+        for vi, v in enumerate(tiktok_videos):
+            poster = safe_url(v.get("poster",""))
+            poster_attr = f' poster="{poster}"' if poster else ""
+            vsrc = v["src"]
+            vtype = v.get("vtype","mp4")
+            title_esc = esc(v.get("title",""))
+            src_label = "24h" if v.get("source")=="24h" else "BDP"
+            badge_cls = "bdp-badge-24h" if v.get("source")=="24h" else "bdp-badge-bdp"
+            aid = make_id(v.get("link",""))
+            sl = slug(v.get("title",""))
+            open_js = f"event.stopPropagation();window.bdpOpen('{esc(v.get('link',''))}','{aid}','{sl}')"
+            share_js = f"event.stopPropagation();window.bdpShareHash('{title_esc}','{sl}','{aid}')"
+
+            if vtype == "hls":
+                video_tag = f'<video class="tiktok-video" playsinline preload="metadata"{poster_attr} data-hls-src="{vsrc}" muted loop></video>'
+            else:
+                video_tag = f'<video class="tiktok-video" playsinline preload="metadata"{poster_attr} muted loop><source src="{safe_url(vsrc)}" type="video/mp4"></video>'
+
+            slides.append(f'''<div class="tiktok-slide" data-index="{vi}">
+{video_tag}
+<div class="tiktok-pause-icon">▶</div>
+<div class="tiktok-bottom">
+<span class="bdp-badge {badge_cls}">{src_label}</span>
+<p class="tiktok-title">{v.get("title","")}</p>
+<div class="tiktok-actions">
+<button class="tiktok-action-btn" onclick="{open_js}">📰 Đọc</button>
+<button class="tiktok-action-btn" onclick="{share_js}">📤</button>
+</div>
+</div>
+<div class="tiktok-unmute-hint" onclick="window.bdpTikTokUnmute(this)">🔇 Nhấn để bật tiếng</div>
+<span class="tiktok-counter">{vi+1}/{len(tiktok_videos)}</span>
+</div>''')
+
+        tiktok_html = f'''<div class="tiktok-fullscreen-container" id="tiktok-fullscreen-feed">
+<div class="tiktok-fullscreen-feed">{''.join(slides)}</div>
+</div>'''
+
+    # Also render article grid below
+    grid_html = ""
+    if articles:
+        feat=[a for a in articles if a.get("featured")]
+        reg=[a for a in articles if not a.get("featured")]
+        grid_parts = ['<div class="bdp-wrap">']
+        grid_parts.append(f'<div class="bdp-topbar"><span>⏱ {now}</span><span>📰 {len(articles)} video · BDP + 24h</span></div>')
+        if feat:
+            grid_parts.append('<div class="bdp-grid bdp-grid-featured">')
+            for a in feat[:6]: grid_parts.append(_list_card(a,True))
+            grid_parts.append('</div>')
+        if reg:
+            grid_parts.append('<div class="bdp-grid">')
+            for a in reg[:40]: grid_parts.append(_list_card(a,False))
+            grid_parts.append('</div>')
+        grid_parts.append('</div>')
+        grid_html = '\n'.join(grid_parts)
+
+    return tiktok_html + grid_html
+
+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")
+    feat=[a for a in articles if a.get("featured")]
+    reg=[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 feat:
+        parts.append('<div class="bdp-grid bdp-grid-featured">')
+        for a in feat[:6]: parts.append(_list_card(a,True))
+        parts.append('</div>')
+    if reg:
+        parts.append('<div class="bdp-grid">')
+        for a in reg[:40]: parts.append(_list_card(a,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"
+        is_video = art.get("is_video", False) or "/video/" in art.get("link","")
+        play_overlay = '<div class="bdp-play-overlay">▶</div>' if is_video else ""
+        img_html=f'<div class="{c}"><img src="{safe_url(art["img"])}" alt="" class="bdp-lazy-img">{play_overlay}</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")=="24h": badge=f'<span class="bdp-badge bdp-badge-24h">{grp or "24h"}</span>'
+    elif art.get("source")=="bdp": badge=f'<span class="bdp-badge bdp-badge-bdp">{grp or "BongDaPlus"}</span>'
+    sl=slug(art["title"])
+    share_js=f"event.stopPropagation();window.bdpShareHash('{esc(art['title'])}','{sl}','{aid}')"
+    click_js=f"window.bdpOpen('{esc(link)}','{aid}','{sl}')"
+    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"]); sl=slug(article["title"])
+    src_url=article.get("source_url","")
+    og_img=safe_url(article.get("og_image",""))
+    share_js=f"window.bdpShareHash('{esc(article['title'])}','{sl}','{aid}')"
+    src_map={"vne":"VnExpress","bdp":"BongDaPlus","24h":"24h.com.vn"}
+    src_label=src_map.get(article.get("source",""),"")
+    seo=f'<div style="display:none" itemscope itemtype="https://schema.org/NewsArticle"><meta itemprop="headline" content="{esc(article["title"])}"><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=safe_url(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 ""
+            vtype=item.get("vtype","mp4")
+            vsrc=item["src"]
+            if vtype=="hls":
+                parts.append(f'<div class="bdp-video-wrap"><video controls playsinline preload="metadata"{poster_attr} class="bdp-video" data-hls-src="{vsrc}"></video>{cap_html}</div>')
+            else:
+                parts.append(f'<div class="bdp-video-wrap"><video controls playsinline preload="metadata"{poster_attr} class="bdp-video"><source src="{safe_url(vsrc)}" type="video/mp4"></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="{safe_url(item["src"])}" alt="{alt}" class="bdp-lazy-img">{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}
+.vslide-wrap{margin:8px;background:#1a1a1a;border-radius:12px;overflow:hidden;border:1px solid #2a2a2a}
+.vslide-header{display:flex;justify-content:space-between;align-items:center;padding:10px 14px 6px}
+.vslide-label{color:#f0c040;font-size:15px;font-weight:700}
+.vslide-nav{display:flex;gap:6px}
+.vslide-btn{background:#333;color:#fff;border:none;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:background .15s}
+.vslide-btn:hover{background:#555}
+.vslide-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:10px;padding:6px 14px 14px;scrollbar-width:none}
+.vslide-track::-webkit-scrollbar{display:none}
+.vslide-item{flex:0 0 200px;scroll-snap-align:start;cursor:pointer;transition:transform .15s}
+.vslide-item:hover{transform:scale(1.03)}
+@media(min-width:768px){.vslide-item{flex:0 0 240px}}
+.vslide-thumb{position:relative;width:100%;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#222}
+.vslide-thumb img{width:100%;height:100%;object-fit:cover}
+.vslide-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;background:rgba(0,0,0,.6);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:16px;pointer-events:none;transition:background .15s}
+.vslide-item:hover .vslide-play{background:rgba(220,50,50,.8)}
+.vslide-title{color:#ccc;font-size:12px;margin:6px 0 0;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.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;position:relative}
+.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-play-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;background:rgba(0,0,0,.55);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:15px;pointer-events:none}
+.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-badge-24h{background:#e67e22;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:70vh;display:block;border-radius:10px}
+.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,.bdp-cmt-textarea{width:100%;padding:8px 10px;background:#1a1a1a;border:1px solid #333;border-radius:6px;color:#eee;font-size:13px;box-sizing:border-box}
+.bdp-cmt-input{margin-bottom:6px}
+.bdp-cmt-textarea{resize:vertical}
+.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}
+
+/* ══ TikTok Fullscreen Video Feed ══ */
+.tiktok-fullscreen-container{width:100%;background:#000;position:relative;height:calc(100vh - 60px);max-height:900px;min-height:500px;border-radius:0}
+.tiktok-fullscreen-feed{height:100%;overflow-y:scroll;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
+.tiktok-fullscreen-feed::-webkit-scrollbar{display:none}
+.tiktok-slide{height:calc(100vh - 60px);max-height:900px;min-height:500px;scroll-snap-align:start;scroll-snap-stop:always;position:relative;display:flex;align-items:center;justify-content:center;background:#000}
+.tiktok-video{width:100%;height:100%;object-fit:contain;display:block}
+.tiktok-bottom{position:absolute;bottom:0;left:0;right:0;padding:16px 14px 24px;background:linear-gradient(transparent,rgba(0,0,0,.85));z-index:3}
+.tiktok-title{color:#fff;font-size:14px;font-weight:600;margin:4px 0 8px;line-height:1.4;text-shadow:0 1px 4px rgba(0,0,0,.8);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.tiktok-actions{display:flex;gap:8px}
+.tiktok-action-btn{background:rgba(255,255,255,.15);color:#fff;border:none;padding:6px 14px;border-radius:18px;font-size:12px;cursor:pointer;backdrop-filter:blur(6px);font-weight:500;transition:background .15s}
+.tiktok-action-btn:hover{background:rgba(255,255,255,.3)}
+.tiktok-counter{position:absolute;top:12px;left:12px;background:rgba(0,0,0,.5);color:#fff;font-size:11px;padding:3px 10px;border-radius:12px;z-index:4;backdrop-filter:blur(4px)}
+.tiktok-unmute-hint{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.6);color:#fff;font-size:12px;padding:6px 12px;border-radius:18px;cursor:pointer;z-index:4;backdrop-filter:blur(4px);transition:opacity .3s}
+.tiktok-pause-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:70px;height:70px;background:rgba(0,0,0,.5);border-radius:50%;color:#fff;font-size:28px;z-index:5;pointer-events:none;display:none;align-items:center;justify-content:center;line-height:70px;text-align:center}
+.tiktok-slide.paused .tiktok-pause-icon{display:block}
+.vslide-badge{position:absolute;top:6px;left:6px;font-size:9px;padding:1px 6px;border-radius:3px;font-weight:700;z-index:2}
+.vslide-badge-24h{background:#e67e22;color:#fff}
+"""
+
+# ══════════════════════════════════════════════════════════════════════════════
+HEAD_META = """
+<meta name="description" content="Tin tức tổng hợp nhanh nhất - VnExpress, BongDaPlus, 24h">
+<meta property="og:title" content="Tin Tức Việt Nam - Tổng Hợp">
+<meta property="og:description" content="Thời sự, thế giới, kinh doanh, công nghệ, thể thao, giải trí.">
+<meta property="og:type" content="website">
+<meta property="og:image" content="https://s1.vnecdn.net/vnexpress/restruct/i/v9505/logo_default.jpg">
+<meta name="twitter:card" content="summary_large_image">
+<link rel="canonical" href="https://bep40-bongdaplus-news.hf.space">
+"""
+
+JS_FUNC = """
+function() {
+var s=document.createElement('script');s.src='https://cdn.jsdelivr.net/npm/hls.js@1/dist/hls.min.js';document.head.appendChild(s);
+var SPACE_BASE='""" + SPACE_URL + """';
+
+window.bdpOpen=function(url,aid,sl){
+    window.location.hash='#/'+sl+'/'+aid;
+    try{localStorage.setItem('bdp_url_'+aid,url);}catch(e){}
+    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}));}}
+    var btn=document.getElementById('btn-read-article');
+    if(btn){var b=btn.querySelector('button');if(b)b.click();else btn.click();}
+    window.scrollTo({top:0,behavior:'smooth'});
+};
+
+window.bdpShareHash=async function(title,sl,aid){
+    var hashUrl=SPACE_BASE+'/#/'+sl+'/'+aid;
+    var sd={title:title,url:hashUrl,text:title};
+    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(hashUrl);window.bdpToast('Đã sao chép liên kết!');return;}catch(e){}}
+    var ta=document.createElement('textarea');ta.value=hashUrl;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:',hashUrl);}
+    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);};
+
+window.bdpSlideScroll=function(dir){
+    var track=document.getElementById('vslide-track');
+    if(track){track.scrollBy({left:dir*260,behavior:'smooth'});}
+};
+
+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!');};
+
+function initHlsVideo(v){
+    if(v._hlsInit) return; v._hlsInit=true;
+    var src=v.getAttribute('data-hls-src'); if(!src) return;
+    if(v.canPlayType('application/vnd.apple.mpegURL')){v.src=src;}
+    else if(window.Hls&&Hls.isSupported()){var h=new Hls({maxBufferLength:30,maxMaxBufferLength:60});h.loadSource(src);h.attachMedia(v);h.on(Hls.Events.ERROR,function(e,data){if(data.fatal){v.src=src;}});}
+    else{v.src=src;}
+}
+
+/* ══ TikTok Fullscreen Feed ══ */
+window.bdpTikTokUnmute=function(hint){
+    var feed=hint.closest('.tiktok-fullscreen-feed')||hint.closest('.tiktok-feed');
+    var slide=hint.closest('.tiktok-slide');
+    if(!slide) return;
+    var video=slide.querySelector('.tiktok-video');
+    if(!video) return;
+    video.muted=!video.muted;
+    var isMuted=video.muted;
+    hint.textContent=isMuted?'🔇 Nhấn để bật tiếng':'🔊 Đang phát tiếng';
+    if(feed){
+        feed.querySelectorAll('.tiktok-video').forEach(function(v){v.muted=isMuted;});
+        feed.querySelectorAll('.tiktok-unmute-hint').forEach(function(h){
+            h.textContent=isMuted?'🔇 Nhấn để bật tiếng':'🔊 Đang phát tiếng';
+        });
+    }
+};
+
+function initTikTokFullscreen(container){
+    if(container._tikInit) return;
+    container._tikInit=true;
+    var feed=container.querySelector('.tiktok-fullscreen-feed');
+    if(!feed) return;
+    var slides=feed.querySelectorAll('.tiktok-slide');
+    if(!slides.length) return;
+
+    /* Init all HLS videos first */
+    slides.forEach(function(sl){
+        var v=sl.querySelector('video[data-hls-src]');
+        if(v) initHlsVideo(v);
+        var v2=sl.querySelector('video:not([data-hls-src])');
+        if(v2 && !v2._initDone){v2._initDone=true;v2.load();}
+    });
+
+    var currentIdx=-1;
+
+    function tryPlay(v){
+        var p=v.play();
+        if(p&&p.catch) p.catch(function(){setTimeout(function(){v.play().catch(function(){});},500);});
+    }
+
+    function activateSlide(idx){
+        if(idx===currentIdx) return;
+        slides.forEach(function(sl,i){
+            var v=sl.querySelector('.tiktok-video');
+            if(!v) return;
+            if(i===idx){
+                v.currentTime=0;
+                tryPlay(v);
+                sl.classList.remove('paused');
+            } else {
+                v.pause();
+                sl.classList.remove('paused');
+            }
+        });
+        currentIdx=idx;
+    }
+
+    /* Use scroll event instead of IntersectionObserver for reliability inside Gradio */
+    var scrollTimer=null;
+    feed.addEventListener('scroll',function(){
+        if(scrollTimer) clearTimeout(scrollTimer);
+        scrollTimer=setTimeout(function(){
+            var feedRect=feed.getBoundingClientRect();
+            var feedCenter=feedRect.top+feedRect.height/2;
+            var best=-1,bestDist=99999;
+            slides.forEach(function(sl,i){
+                var r=sl.getBoundingClientRect();
+                var center=r.top+r.height/2;
+                var dist=Math.abs(center-feedCenter);
+                if(dist<bestDist){bestDist=dist;best=i;}
+            });
+            if(best>=0) activateSlide(best);
+        },150);
+    });
+
+    /* Start first video after short delay for HLS init */
+    setTimeout(function(){activateSlide(0);},800);
+
+    /* Tap to pause/play */
+    slides.forEach(function(sl){
+        var v=sl.querySelector('.tiktok-video');
+        if(v){
+            v.addEventListener('click',function(e){
+                e.preventDefault();
+                if(v.paused){tryPlay(v);sl.classList.remove('paused');}
+                else{v.pause();sl.classList.add('paused');}
+            });
+        }
+    });
+}
+
+new MutationObserver(function(muts){muts.forEach(function(m){m.addedNodes.forEach(function(n){
+    if(!n.querySelectorAll) return;
+    n.querySelectorAll('img.bdp-lazy-img').forEach(function(img){if(!img._errBound){img._errBound=true;img.addEventListener('error',function(){this.style.display='none';});}});
+    n.querySelectorAll('video[data-hls-src]').forEach(initHlsVideo);
+    n.querySelectorAll('video.bdp-video:not([data-hls-src])').forEach(function(v){if(!v._initDone){v._initDone=true;v.load();}});
+    n.querySelectorAll('[id^="cmt-list-"]').forEach(function(d){window.bdpRenderCmt(d.id.replace('cmt-list-',''));});
+    n.querySelectorAll('.tiktok-fullscreen-container').forEach(initTikTokFullscreen);
+    if(n.classList && n.classList.contains('tiktok-fullscreen-container')) initTikTokFullscreen(n);
+});});}).observe(document.body,{childList:true,subtree:true});
+
+setInterval(function(){
+    document.querySelectorAll('video[data-hls-src]').forEach(initHlsVideo);
+    document.querySelectorAll('video.bdp-video:not([data-hls-src])').forEach(function(v){if(!v._initDone){v._initDone=true;v.load();}});
+    document.querySelectorAll('.tiktok-fullscreen-container').forEach(initTikTokFullscreen);
+},1500);
+
+var hh=window.location.hash;
+if(hh&&hh.startsWith('#/')){var ps=hh.slice(2).split('/');if(ps.length>=2){var aid=ps[ps.length-1];try{var url=localStorage.getItem('bdp_url_'+aid);if(url)setTimeout(function(){window.bdpOpen(url,aid,ps.slice(0,-1).join('/'));},2000);}catch(e){}}}
+}
+"""
+
+# ══════════════════════════════════════════════════════════════════════════════
+with gr.Blocks(title="Tin Tức Việt Nam",css=CSS,head=HEAD_META,js=JS_FUNC,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 · 24h · Thời sự · Thế giới · Kinh doanh · Công nghệ · Thể thao · Giải trí · Video</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()