*/ :root { --bg: $bgColor; --surface: $surfaceColor; --ink: $inkColor; --muted: $mutedColor; --accent: $accentColor; --accent-alt: $accentAltColor; --border: $borderColor; --shadow: 0 20px 60px rgba(15, 23, 42, 0.08); --radius-lg: 28px; --radius-md: 18px; --radius-sm: 12px; --max-width: 1280px; } *, *:before, *:after { box-sizing: border-box; } body { background: radial-gradient(circle at top left, rgba(14, 165, 233, 0.18), transparent 36%), radial-gradient(circle at top right, rgba(20, 184, 166, 0.14), transparent 30%), linear-gradient(180deg, #f9fbfe 0%, var(--bg) 100%); color: var(--ink); font: $bodyFont; margin: 0; } a { color: inherit; text-decoration: none; } img { border: 0; display: block; height: auto; max-width: 100%; } .site-shell { margin: 0 auto; max-width: var(--max-width); padding: 24px; } .site-card { background: rgba(255, 255, 255, 0.84); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.78); border-radius: 36px; box-shadow: var(--shadow); overflow: hidden; } .top-strip { align-items: center; background: linear-gradient(90deg, #020617 0%, #0f172a 52%, #0b3a52 100%); color: #f8fafc; display: flex; gap: 12px; justify-content: space-between; padding: 12px 28px; } .top-strip .status { align-items: center; display: flex; font-size: 12px; font-weight: 700; gap: 8px; letter-spacing: 0.12em; text-transform: uppercase; } .top-strip .status:before { background: #22c55e; border-radius: 999px; content: ""; display: inline-block; height: 8px; width: 8px; } .top-strip .ticker { color: rgba(248, 250, 252, 0.8); font-size: 13px; } .header-wrap { border-bottom: 1px solid rgba(217, 226, 236, 0.8); padding: 28px; } .header-grid { align-items: center; display: grid; gap: 20px; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); } .brand-eyebrow { color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: 0.16em; margin: 0 0 10px; text-transform: uppercase; } .brand-title h1, .brand-title h2 { font: $titleFont; letter-spacing: -0.04em; line-height: 1; margin: 0; } .brand-tagline { color: var(--muted); font-size: 16px; line-height: 1.75; margin: 14px 0 0; max-width: 720px; } .hero-panel { background: linear-gradient(145deg, rgba(14, 165, 233, 0.14), rgba(20, 184, 166, 0.08)), #f8fbff; border: 1px solid rgba(14, 165, 233, 0.12); border-radius: 26px; padding: 24px; } .hero-label { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; margin: 0 0 10px; text-transform: uppercase; } .hero-title { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; margin: 0; } .hero-copy { color: var(--muted); line-height: 1.75; margin: 12px 0 0; } .hero-points { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 18px 0 0; padding: 0; } .hero-points li { background: rgba(255, 255, 255, 0.86); border: 1px solid rgba(217, 226, 236, 0.8); border-radius: 14px; color: var(--muted); font-size: 14px; list-style: none; padding: 12px 14px; } .nav-wrap { border-bottom: 1px solid rgba(217, 226, 236, 0.8); padding: 0 28px 18px; } .content-shell { display: grid; gap: 28px; grid-template-columns: minmax(0, 1.8fr) minmax(280px, 0.9fr); padding: 28px; } .main-column, .sidebar-column { min-width: 0; } .section-card { background: var(--surface); border: 1px solid rgba(217, 226, 236, 0.76); border-radius: var(--radius-lg); box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05); overflow: hidden; } .section-card + .section-card { margin-top: 24px; } .card-title { align-items: center; display: flex; gap: 10px; justify-content: space-between; padding: 22px 24px 0; } .card-title h3 { font-size: 20px; letter-spacing: -0.03em; margin: 0; } .card-title span { color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .widget, .widget-content, .blog-posts { margin: 0; } .main-column .widget { padding: 0 24px 26px; } .sidebar-column .widget { padding: 0 24px 24px; } .sidebar-column .widget + .widget { border-top: 1px solid rgba(217, 226, 236, 0.72); padding-top: 22px; } .main-column .post-outer-container { border-top: 1px solid rgba(217, 226, 236, 0.72); padding: 26px 0 0; } .main-column .post-outer-container:first-child { border-top: 0; } .date-header { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: 0.14em; margin: 18px 0 0; text-transform: uppercase; } .post-title, .post-title.entry-title { font-size: 34px; letter-spacing: -0.04em; line-height: 1.15; margin: 0 0 14px; } .post-title a { transition: color 0.2s ease; } .post-title a:hover { color: var(--accent); } .post-header-line-1, .post-header-line-2 { color: var(--muted); display: flex; flex-wrap: wrap; font-size: 13px; gap: 12px; margin-bottom: 10px; } .post-body { color: #1f2937; font-size: 17px; line-height: 1.88; } .post-body img, .separator img { border-radius: 20px; margin: 16px 0; width: 100%; } .post-body iframe, .post-body video { aspect-ratio: 16 / 9; border: 0; border-radius: 20px; margin: 18px 0; width: 100%; } .post-body blockquote { background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(20, 184, 166, 0.08)); border-left: 4px solid var(--accent); border-radius: 0 18px 18px 0; color: #0f172a; margin: 24px 0; padding: 18px 22px; } .post-footer { align-items: center; border-top: 1px solid rgba(217, 226, 236, 0.72); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin-top: 24px; padding-top: 18px; } .post-labels a, .labels a, .PopularPosts .item-title a { color: var(--ink); } .post-labels a, .Label .widget-content a { background: rgba(14, 165, 233, 0.09); border: 1px solid rgba(14, 165, 233, 0.15); border-radius: 999px; color: var(--accent); display: inline-block; font-size: 12px; font-weight: 700; margin: 0 8px 8px 0; padding: 8px 12px; } .sidebar-title, .widget-title { font-size: 16px; letter-spacing: -0.02em; margin: 0 0 14px; } .PopularPosts .item-title, .BlogArchive #ArchiveList ul li, .Label .widget-content li { line-height: 1.6; margin-bottom: 12px; } .PopularPosts .item-snippet, .Profile .profile-textblock, .Text .widget-content, .HTML .widget-content { color: var(--muted); line-height: 1.75; } .Profile img { border-radius: 18px; margin-bottom: 14px; } .footer-wrap { background: #0f172a; color: rgba(248, 250, 252, 0.86); margin-top: 24px; padding: 28px; } .footer-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; padding: 18px; } .footer-card h4 { font-size: 14px; letter-spacing: 0.08em; margin: 0 0 8px; text-transform: uppercase; } .footer-card p { color: rgba(248, 250, 252, 0.72); line-height: 1.7; margin: 0; } .Attribution { font-size: 12px; opacity: 0.7; } .PageList ul, .LinkList ul, .Label .widget-content ul, .BlogArchive #ArchiveList ul { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; } .PageList li a, .LinkList li a { color: var(--muted); font-size: 14px; font-weight: 700; padding: 10px 0; position: relative; } .PageList li a:hover, .LinkList li a:hover { color: var(--accent); } .Header img { max-height: 80px; } .BlogPager { align-items: center; border-top: 1px solid rgba(217, 226, 236, 0.72); display: flex; gap: 12px; justify-content: space-between; margin-top: 18px; padding-top: 22px; } .BlogPager a { background: #f8fafc; border: 1px solid rgba(217, 226, 236, 0.9); border-radius: 999px; color: var(--ink); font-size: 13px; font-weight: 800; padding: 12px 16px; } .comments, .comment-form { margin-top: 26px; } @media (max-width: 1080px) { .header-grid, .content-shell, .footer-grid { grid-template-columns: 1fr; } .hero-points { grid-template-columns: 1fr; } } @media (max-width: 720px) { .site-shell { padding: 12px; } .site-card { border-radius: 24px; } .top-strip, .header-wrap, .nav-wrap, .content-shell, .footer-wrap { padding-left: 18px; padding-right: 18px; } .post-title, .post-title.entry-title, .brand-title h1, .brand-title h2 { font-size: 28px; } } ]]>
AI News Desk
Tong hop tu dong, dich tieng Viet, toi uu cho tin tuc va video tren Blogger.

Blogspot AI Magazine

Giao dien tin tuc chuyen nghiep cho bai tong hop AI, toi uu hien thi anh dai dien, bai phan tich ngan gon va video YouTube nhung truc tiep.

Che do van hanh

Dong tu dong cho tin AI va video

Theme nay duoc thiet ke de phu hop voi bai dang tu dong: tieu de ro rang, bo cuc sach, sidebar de doc nhanh va khoi noi dung phu hop cho anh, clip va tom tat nguon goc.

  • Tin tu TechCrunch, The Verge, MIT News, Google Blog
  • Bai viet dich sang tieng Viet, kem link goc
  • Video AI tach rieng theo nhan de doc de loc
  • Toi uu cho desktop va mobile

Tin Moi

Ban dich AI