AI Biết BrSE – Kaopiz :root{ --blue:#2B9CD8;--blue-dark:#1a6fa3;--blue-light:#e8f4fd; --navy:#0d1b2a;--navy-mid:#1a2f45; --white:#fff;--gray-light:#f5f7fa;--gray-mid:#e2e8f0; --text:#1e2d3d;--text-muted:#64748b;--accent:#f0a500; --radius:16px;--shadow:0 4px 24px rgba(43,156,216,.13); --shadow-deep:0 16px 48px rgba(13,27,42,.22); } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Be Vietnam Pro',sans-serif;background:var(--white);color:var(--text);line-height:1.75;overflow-x:hidden} .reveal{opacity:0;transform:translateY(36px);transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)} .reveal.visible{opacity:1;transform:translateY(0)} .reveal-l{opacity:0;transform:translateX(-44px);transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)} .reveal-l.visible{opacity:1;transform:translateX(0)} .reveal-scale{opacity:0;transform:scale(.9);transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)} .reveal-scale.visible{opacity:1;transform:scale(1)} .d1{transition-delay:.08s!important}.d2{transition-delay:.16s!important}.d3{transition-delay:.24s!important} .d4{transition-delay:.32s!important}.d5{transition-delay:.40s!important} #prog{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--accent));z-index:300;width:0;transition:width .1s} nav{position:fixed;top:3px;left:0;right:0;z-index:200;background:rgba(13,27,42,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(43,156,216,.18);padding:12px 40px;display:flex;align-items:center;justify-content:space-between;transition:padding .3s} nav img.nav-logo{height:30px;width:auto;display:block} .nav-badge{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--blue);text-transform:uppercase;background:rgba(43,156,216,.12);padding:4px 14px;border-radius:20px;border:1px solid rgba(43,156,216,.3)} .hero{min-height:100vh;background:var(--navy);position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:120px 40px 80px;overflow:hidden;text-align:center} .hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 55% at 50% -5%,rgba(43,156,216,.28) 0%,transparent 60%),radial-gradient(ellipse 50% 50% at 85% 85%,rgba(43,156,216,.12) 0%,transparent 50%);pointer-events:none} .hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(43,156,216,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(43,156,216,.05) 1px,transparent 1px);background-size:52px 52px;pointer-events:none} .orb{position:absolute;border-radius:50%;filter:blur(48px);pointer-events:none} .o1{width:320px;height:320px;background:#2B9CD8;opacity:.25;top:8%;left:-6%;animation:fl 9s ease-in-out infinite} .o2{width:220px;height:220px;background:#1a6fa3;opacity:.2;bottom:18%;right:-4%;animation:fl 7s ease-in-out infinite;animation-delay:-4s} .o3{width:160px;height:160px;background:#f0a500;opacity:.1;bottom:35%;left:22%;animation:fl 11s ease-in-out infinite;animation-delay:-7s} @keyframes fl{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-28px) scale(1.06)}} .hero-content{position:relative;z-index:2;max-width:820px} .hero-tag{display:inline-block;background:rgba(43,156,216,.15);border:1px solid rgba(43,156,216,.4);color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;padding:6px 18px;border-radius:30px;margin-bottom:28px;animation:fsd .8s ease both} .hero-title{font-size:clamp(2.2rem,5vw,4rem);font-weight:900;color:#fff;line-height:1.12;margin-bottom:22px;animation:fsd .8s .15s ease both} .hero-title .hl{color:var(--blue)} .hero-sub{font-size:1.05rem;color:rgba(255,255,255,.6);max-width:600px;margin:0 auto 40px;animation:fsd .8s .3s ease both;font-weight:300} .hero-stats{display:flex;gap:28px;justify-content:center;animation:fsd .8s .45s ease both;margin-bottom:44px;flex-wrap:wrap} .stat-pill{background:rgba(255,255,255,.06);border:1px solid rgba(43,156,216,.25);border-radius:12px;padding:14px 22px;text-align:center} .stat-pill .num{font-size:1.8rem;font-weight:900;color:var(--blue);line-height:1} .stat-pill .lbl{font-size:10px;color:rgba(255,255,255,.5);font-weight:500;letter-spacing:.05em;margin-top:4px} .scroll-hint{display:inline-flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.35);font-size:11px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;animation:fsd .8s .6s ease both} .scroll-line{width:1px;height:40px;background:linear-gradient(to bottom,rgba(43,156,216,.8),transparent);animation:sp 2s ease-in-out infinite} @keyframes sp{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}} @keyframes fsd{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}} main{max-width:920px;margin:0 auto;padding:80px 32px 40px} p{margin-bottom:14px}p:last-child{margin-bottom:0} .sec-hdr{display:flex;align-items:center;gap:16px;margin-bottom:34px} .sec-icon{width:54px;height:54px;background:var(--blue);border-radius:15px;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 18px rgba(43,156,216,.38);transition:transform .3s,box-shadow .3s} .sec-icon:hover{transform:scale(1.1) rotate(-4deg);box-shadow:0 8px 28px rgba(43,156,216,.55)} .sec-icon svg{width:26px;height:26px;fill:white} .sec-lbl{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--blue);margin-bottom:3px} .sec-ttl{font-size:1.7rem;font-weight:800;color:var(--navy);line-height:1.2} .divider{width:100%;height:1px;background:linear-gradient(90deg,var(--blue),transparent);margin:64px 0;opacity:.25} .intro-block{background:var(--gray-light);border-radius:var(--radius);padding:30px 36px;border-left:4px solid var(--blue);margin-bottom:32px;font-size:1.02rem;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s} .intro-block:hover{transform:translateY(-3px);box-shadow:var(--shadow)} /* BRIDGE */ .bridge-hdr-row{display:grid;grid-template-columns:1fr 60px 1fr;margin-bottom:6px} .bh{padding:10px 16px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;text-align:center;border-radius:10px 10px 0 0} .bh-pain{background:linear-gradient(135deg,#dc2626,#ef4444);color:white} .bh-ai{background:linear-gradient(135deg,#1a6fa3,#2B9CD8);color:white} .bridge-table{display:grid;grid-template-columns:1fr 60px 1fr;gap:7px 0} .pain-cell,.ai-cell{display:flex!important;align-items:center;gap:11px;background:white;border-radius:10px;padding:14px 16px;cursor:default;transition:border-color .25s,box-shadow .25s,transform .25s} .pain-cell{border:1.5px solid #fecaca}.ai-cell{border:1.5px solid #bae6fd} .pain-cell:hover,.pain-cell.active{border-color:#ef4444;box-shadow:0 4px 14px rgba(239,68,68,.14);transform:translateX(5px)} .ai-cell:hover,.ai-cell.active{border-color:var(--blue);box-shadow:0 4px 14px rgba(43,156,216,.16);transform:translateX(-5px)} .pain-num{width:26px;height:26px;min-width:26px;background:#ef4444;color:white;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0} .pain-txt,.ai-txt{font-size:.87rem;font-weight:600;color:var(--text);line-height:1.4} .ai-badge{font-size:9.5px;font-weight:800;color:white;background:var(--blue);padding:3px 8px;border-radius:5px;white-space:nowrap;flex-shrink:0} .arrow-cell{display:flex!important;align-items:center;justify-content:center;padding:0 6px} .arr-svg{width:48px;height:28px;transition:transform .25s} .arr-svg.active{transform:scaleX(1.15)} /* ARCS */ .arc-wrap .arc-path{cursor:pointer;transition:filter .25s,opacity .25s} .arc-wrap:hover .arc-path{opacity:.68} .arc-wrap .arc-path:hover{opacity:1!important;filter:brightness(1.28) drop-shadow(0 0 8px rgba(43,156,216,.4))} .arc-wrap .arc-path.arc-active{opacity:1!important;filter:brightness(1.32) drop-shadow(0 0 12px rgba(43,156,216,.55))} /* INSIGHT */ .insight-box{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%);border-radius:var(--radius);padding:34px 38px;color:white;position:relative;overflow:hidden;margin:28px 0;transition:transform .3s,box-shadow .3s} .insight-box:hover{transform:translateY(-4px);box-shadow:var(--shadow-deep)} .insight-box .lbl{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue);margin-bottom:10px} .insight-box p{font-size:1rem;line-height:1.72}.insight-box strong{color:var(--blue)} /* CONCLUSION */ .big-conclusion{position:relative;border-radius:20px;overflow:hidden;margin:44px 0;padding:58px 44px;text-align:center;color:white} .bc-bg{position:absolute;inset:0}.bc-glow{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 0%,rgba(43,156,216,.35) 0%,transparent 60%);pointer-events:none} .bc-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1.5px,transparent 1.5px);background-size:28px 28px;pointer-events:none} .bc-content{position:relative;z-index:2} .bc-content h3{font-size:clamp(1.4rem,3vw,2rem);font-weight:900;margin-bottom:16px;line-height:1.2;color:#ffffff!important} .bc-content h3 em{color:#4BBFEE!important;font-style:normal} .bc-content p{font-size:1.02rem;color:rgba(255,255,255,.88)!important;max-width:600px;margin:0 auto;line-height:1.72} .bc-ql{font-size:5rem;color:rgba(43,156,216,.2);line-height:.8;margin-bottom:8px;font-family:Georgia,serif} .bc-badges{margin-top:24px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap} .bc-badge{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:10px;padding:10px 18px;font-size:.84rem;color:#ffffff} /* 7 RULES */ .rules-circle-wrap{position:relative;width:520px;height:520px;margin:36px auto} .rules-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:126px;height:126px;background:linear-gradient(135deg,var(--navy),var(--navy-mid));border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 0 0 12px rgba(43,156,216,.1),0 0 0 24px rgba(43,156,216,.05);z-index:5;border:2px solid rgba(43,156,216,.4)} .rules-center-txt{font-size:.72rem;font-weight:800;color:var(--blue);text-align:center;letter-spacing:.07em;line-height:1.4;text-transform:uppercase} .rule-node{position:absolute;width:108px;height:108px;border-radius:50%;background:white;border:2px solid var(--gray-mid);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px;cursor:default;transition:transform .25s,border-color .25s,box-shadow .25s;transform:translate(-50%,-50%);z-index:4} .rule-node:hover{transform:translate(-50%,-50%) scale(1.13);border-color:var(--blue);box-shadow:0 8px 24px rgba(43,156,216,.25)} .rule-node-num{font-size:1.1rem;font-weight:900;color:var(--blue);line-height:1} .rule-node-txt{font-size:.67rem;font-weight:600;color:var(--text);line-height:1.3;margin-top:4px} .rules-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:3} /* TOOL TILES */ .tool-grid-53{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0} .tool-tile{background:white;border:1.5px solid var(--gray-mid);border-radius:14px;padding:22px 20px;cursor:pointer;transition:transform .25s,border-color .25s,box-shadow .25s;position:relative;overflow:hidden;text-align:left} .tool-tile::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--accent));transform:scaleX(0);transform-origin:left;transition:transform .3s} .tool-tile:hover{transform:translateY(-5px);border-color:var(--blue);box-shadow:0 10px 28px rgba(43,156,216,.18)} .tool-tile:hover::after{transform:scaleX(1)} .tool-tile.active{border-color:var(--blue);background:var(--blue-light)} .tool-row-bot{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px} .tile-layer-badge{display:inline-block;background:var(--navy);color:var(--blue);font-size:10px;font-weight:800;padding:3px 10px;border-radius:6px;letter-spacing:.06em;margin-bottom:10px;border:1px solid rgba(43,156,216,.3)} .tile-icon{font-size:1.9rem;margin-bottom:10px} .tile-title{font-size:.97rem;font-weight:800;color:var(--navy);margin-bottom:14px} .tile-click-hint{font-size:.75rem;color:var(--blue);margin-top:12px;font-weight:700} .tool-logos{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0 0} .tl-svg{width:38px;height:38px;transition:transform .22s,filter .22s;cursor:default;flex-shrink:0} .tl-svg:hover{transform:scale(1.18) translateY(-2px);filter:drop-shadow(0 3px 8px rgba(0,0,0,.28))} /* FLOW + TEASER */ .flow-chain{background:linear-gradient(135deg,#f0f7ff,#e8f4fd);border-radius:var(--radius);padding:26px 30px;margin:24px 0;border:1px solid rgba(43,156,216,.2);transition:box-shadow .3s,transform .3s} .flow-chain:hover{box-shadow:var(--shadow);transform:translateY(-2px)} .flow-chain h4{font-size:.92rem;font-weight:700;color:var(--navy);margin-bottom:16px} .flow-steps{display:flex;flex-wrap:wrap;gap:6px;align-items:center} .flow-box{background:var(--blue);color:white;font-size:.8rem;font-weight:600;padding:8px 14px;border-radius:8px;white-space:nowrap;box-shadow:0 2px 8px rgba(43,156,216,.3);transition:transform .2s,box-shadow .2s} .flow-box:hover{transform:scale(1.06);box-shadow:0 4px 14px rgba(43,156,216,.5)} .flow-arrow{color:var(--blue);font-size:16px;font-weight:900} .teaser-box{background:var(--gray-light);border-radius:var(--radius);padding:26px 30px;border:2px dashed var(--blue);text-align:center;margin:28px 0;transition:background .25s,transform .25s} .teaser-box:hover{background:var(--blue-light);transform:scale(1.01)} .teaser-box p{font-size:.96rem;color:var(--text-muted)}.teaser-box strong{color:var(--blue)} /* POPUP — font fully explicit so no inheritance break */ .popup-overlay{position:fixed;inset:0;background:rgba(13,27,42,.65);z-index:400;display:none;align-items:center;justify-content:center;backdrop-filter:blur(6px);padding:24px} .popup-overlay.open{display:flex;animation:fdi .25s ease} @keyframes fdi{from{opacity:0}to{opacity:1}} .popup-box{font-family:'Be Vietnam Pro',sans-serif;background:white;border-radius:20px;max-width:640px;width:100%;max-height:88vh;overflow-y:auto;padding:36px;position:relative;animation:popi .3s cubic-bezier(.22,.61,.36,1)} @keyframes popi{from{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}} .popup-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;background:var(--gray-light);border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;color:var(--text-muted);font-family:'Be Vietnam Pro',sans-serif} .popup-close:hover{background:var(--gray-mid);transform:scale(1.1)} .popup-layer-num{font-family:'Be Vietnam Pro',sans-serif;display:inline-block;background:var(--navy);color:var(--blue);font-size:11px;font-weight:800;padding:4px 12px;border-radius:7px;letter-spacing:.08em;margin-bottom:14px;border:1px solid rgba(43,156,216,.3)} .popup-title{font-family:'Be Vietnam Pro',sans-serif;font-size:1.35rem;font-weight:800;color:var(--navy);margin-bottom:5px} .popup-sub{font-family:'Be Vietnam Pro',sans-serif;font-size:.9rem;color:var(--text-muted);margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--gray-mid)} .popup-body{font-family:'Be Vietnam Pro',sans-serif;font-size:.93rem;color:var(--text);line-height:1.78} .popup-body *{font-family:'Be Vietnam Pro',sans-serif} .popup-body strong{color:var(--navy);font-weight:700} .popup-body ul{padding-left:20px;margin:12px 0} .popup-body li{margin-bottom:8px} .popup-body p{margin-bottom:12px;color:var(--text-muted);font-style:italic} .popup-note{font-family:'Be Vietnam Pro',sans-serif;background:var(--gray-light);border-radius:10px;padding:13px 17px;margin-top:16px;font-size:.86rem;color:var(--text-muted);border-left:3px solid var(--accent)} .popup-tag{font-family:'Be Vietnam Pro',sans-serif;display:inline-block;background:var(--blue-light);color:var(--blue);font-size:.79rem;font-weight:700;padding:3px 10px;border-radius:6px;margin:3px 2px;border:1px solid rgba(43,156,216,.25)} /* LAYER ILLUS */ .layer-illus-html{background:#f0f7ff;border-radius:14px;margin:18px 0 22px;overflow:hidden;padding:20px} .layer-desc-main{font-family:'Be Vietnam Pro',sans-serif;font-size:1.02rem;font-weight:600;color:var(--navy);line-height:1.65;margin-bottom:0} .illus-wrap{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center} .illus-box{background:#1e2d3d;border-radius:10px;padding:14px 18px;text-align:center;color:white;min-width:100px} .illus-box .ib-icon{font-size:22px;margin-bottom:6px} .illus-box .ib-label{font-family:'Be Vietnam Pro',sans-serif;font-size:9.5px;font-weight:700;color:rgba(255,255,255,.9)} .illus-box .ib-sub{font-family:'Be Vietnam Pro',sans-serif;font-size:8.5px;color:rgba(255,255,255,.5);margin-top:3px} .illus-center{background:linear-gradient(135deg,#1a3a5c,#0d3060);border-radius:10px;padding:14px 18px;text-align:center;color:white;min-width:100px} .illus-center .ib-icon{font-size:26px;margin-bottom:6px} .illus-center .ib-label{font-family:'Be Vietnam Pro',sans-serif;font-size:9.5px;font-weight:800;color:var(--blue)} .illus-center .ib-sub{font-family:'Be Vietnam Pro',sans-serif;font-size:8px;color:rgba(255,255,255,.5);margin-top:3px} .illus-out{background:white;border:1px solid var(--gray-mid);border-radius:8px;padding:8px 12px} .illus-out .ib-label{font-family:'Be Vietnam Pro',sans-serif;font-size:9.5px;font-weight:700;color:var(--navy)} .illus-out .ib-sub{font-family:'Be Vietnam Pro',sans-serif;font-size:8px;color:var(--text-muted)} .illus-arrow{font-size:20px;color:var(--blue);font-weight:700} .illus-ok{background:#dcfce7;border:1px solid #86efac;border-radius:8px;padding:8px 12px;font-family:'Be Vietnam Pro',sans-serif;font-size:9px;font-weight:700;color:#166534} .illus-warn{background:#fef9c3;border:1px solid #fde047;border-radius:8px;padding:8px 12px;font-family:'Be Vietnam Pro',sans-serif;font-size:9px;font-weight:700;color:#854d0e} @media(max-width:640px){ nav{padding:12px 18px}main{padding:60px 16px 40px}.hero{padding:100px 18px 60px} .hero-stats{gap:10px}.tool-grid-53{grid-template-columns:1fr 1fr}.tool-row-bot{grid-template-columns:1fr} .rules-circle-wrap{width:340px;height:340px}.rule-node{width:72px;height:72px} .bridge-hdr-row,.bridge-table{grid-template-columns:1fr 40px 1fr} } AI × BrSE Series 📖 Góc Tri Thức · Dành cho Comtor / BrSE AI đã biết làm gìđể giúp BrSE rồi? Từ 6 điểm nghẽn thực tế đến hệ thống 5 lớp AI hỗ trợ toàn diện —bức tranh đầy đủ dành cho đội ngũ cầu nối Việt–Nhật. 6Điểm nghẽnđược giải 5Lớp côngnghệ AI 7Quy tắcsống còn Cuộn để đọc Phần 1Quy trình truyền thống & Điểm nghẽn QUY TRÌNH THỦ CÔNG — TRƯỚC KHI CÓ AI 📄MỞ FILECopy text 🔄DỊCH THỦ CÔNGTừng câu một 📋DÁN & KIỂM TRATự nhớ thuật ngữ 😵QUÁ TẢIVừa dịch vừa nhớ ⚠️Sai sót 🕐Chậm trễ → Con người không làm sai. Họ đang gánh quá nhiều việc cùng lúc. Trước đây, Comtor/BrSE làm việc chủ yếu dựa vào sự chăm chỉ và khả năng ghi nhớ. Mỗi ngày phải tự mở từng file, copy từng đoạn văn ném lên công cụ dịch, rồi dán ngược lại tài liệu. Tự nhớ các thuật ngữ chuyên môn và ghép nối thông tin từ nhiều nguồn. Cách làm này vốn không sai, nhưng sẽ lập tức bị quá tải khi công việc "phình to". Mỗi điểm nghẽn — AI đã có câu trả lời Không phải ngẫu nhiên — mỗi điểm nghẽn của Comtor/BrSE tương ứng trực tiếp với một khả năng AI đã phát triển được. Hover để thấy liên kết: ⚠️ Điểm nghẽn của BrSE✅ AI đã hỗ trợ được 1Vật lộn với đa dạng định dạng file (Word, Excel, PDF, ảnh...) Lớp 3Structured Translation — Dịch nguyên file giữ bảng biểu. AI cũng đọc được chữ trong ảnh chụp màn hình. 2Đứt gãy bối cảnh trên các kênh giao tiếp Lớp 1LLM đọc cùng lúc nhiều tài liệu dài, giữ bức tranh toàn cảnh và suy luận ra mâu thuẫn để hỏi lại khách. 3Quá tải và thiếu sót thông tin trong các cuộc họp Lớp 4Voice/Video AI — Ghi âm, phân biệt người nói, tóm tắt "ai cần làm việc gì" ngay sau khi họp xong. 4Không đồng nhất trong tra cứu và đối chiếu tài liệu Lớp 2RAG — AI tìm thông tin trong tài liệu nội bộ và chỉ rõ "câu trả lời ở trang nào, file nào". Không bịa. 5Bất đồng bộ về thuật ngữ chuyên môn Lớp 2Glossary AI — Xây dựng và tra cứu từ điển thuật ngữ nhất quán cho cả dự án. 6Chậm trễ và sai sót khi báo cáo tiến độ Lớp 5Agent AI — Tự động gom thông tin từ email, chat, tóm tắt tiến độ và nhắc các việc còn chưa phản hồi. Phần 35 Lớp áp dụng thực tế Từ nền tảng LLM lõi đến tự động hóa toàn workflow. Bấm vào từng vùng cung để xem chi tiết: LỚP 5 · Agent · Co-work · Workflow LỚP 4 · Voice / Video AI LỚP 3 · Structured Translation LỚP 2 · RAG & Evidence Layer LỚP 1 · LLM Provider 5 LAYERS AI SUPPORT 👆 Bấm vào từng vòng cung để xem chi tiết Kiến trúc công việc tối ưu AI đọc nhanh tài liệu → AI tìm nguồn kiểm tra → AI dịch nguyên cả file → AI ghi chép lúc họp → AI tự động nhắc việc mỗi ngày. 5 lớp phối hợp = AI trở thành chuỗi hỗ trợ xuyên suốt. Phần 47 Quy tắc sống còn khi dùng AI 🛡️7 Quy tắcSống còn 1Trả lời phải có nguồn rõ ràng 2Biết rõ file nào là bản chốt 3Con người duyệt trước khi gửi khách 4Dữ liệu gọn gàng thì AI mới dùng được 5Luôn truy lại được gốc rễ thông tin 6Từ điển thuật ngữ thống nhất cả dự án 7Bảo mật thông tin chặt ngay từ đầu " AI không phải chỉ để dịch cho nhanh —nó giải phóng bộ não của bạn Bạn ít phải cố nhớ mọi thứ hơn, ít phải bật qua bật lại phần mềm, không lo mất ngữ cảnh. AI giờ đây đóng vai trò như một hệ thống chống lưng toàn diện. Phần 5Dùng công cụ AI nào cho phù hợp? Thay vì chạy theo xu hướng, hãy chọn công cụ dựa trên đúng khó khăn đang gặp phải. Bấm vào từng ô để xem chi tiết. Lớp 1💬 Hỏi đáp · Đọc hiểu · Phân tích ChatGPT Claude Gemini Microsoft Copilot › Xem chi tiết Lớp 2🔎 RAG · Truy xuất bằng chứng Google NotebookLM Microsoft Copilot › Xem chi tiết Lớp 3📁 Dịch file · Giữ cấu trúc Trados Studio DeepL Pro Smartcat › Xem chi tiết Lớp 4🎙️ AI cho cuộc họp Teams Copilot Zoom AI Companion Otter.ai › Xem chi tiết Lớp 5⚡ Agent · Co-work · Workflow OpenClaw Claude Cowork Co Perplexity AI › Xem chi tiết 🔗 Ví dụ chuỗi làm việc kết hợp nhiều tool: ChatGPTĐọc tài liệu gốc→ DeepL ProDịch nguyên cấu trúc→ Otter.aiGhi âm họp với KH→ AI CopilotNhắc việc sau họp 🚀 Không có một công cụ nào giải toàn bộ bài toán BrSE Bạn cần bản đồ rõ ràng — dùng công cụ nào cho nút thắt nào. Khi ghép nối hợp lý, AI mới thực sự trở thành siêu năng lực. ✅ Chọn đúng lớp✅ Kết hợp thông minh✅ Con người luôn kiểm soát 📬 Số tiếp theo sẽ là:Comtor/BrSE phải dùng từng lớp AI như thế nào, cần rèn kỹ năng gì, và review kết quả ra sao? Đón chờ nhé! Tài liệu thực hiện bởi AIC với sự hỗ trợ của các AI Tool ✕ ✕ const io=new IntersectionObserver(e=>e.forEach(x=>{if(x.isIntersecting)x.target.classList.add('visible')}),{threshold:.1,rootMargin:'0px 0px -40px 0px'}); document.querySelectorAll('.reveal,.reveal-l,.reveal-scale').forEach(el=>io.observe(el)); window.addEventListener('scroll',()=>{ document.getElementById('prog').style.width=(window.scrollY/(document.documentElement.scrollHeight-window.innerHeight)*100)+'%'; document.getElementById('topnav').style.padding=window.scrollY>60?'8px 40px':'12px 40px'; }); document.querySelectorAll('[data-pair],[data-arrow]').forEach(el=>{ el.addEventListener('mouseenter',()=>{ const p=el.dataset.pair||el.dataset.arrow; document.querySelectorAll('[data-pair],[data-arrow]').forEach(x=>x.classList.remove('active')); document.querySelectorAll('[data-pair="'+p+'"]').forEach(x=>x.classList.add('active')); document.querySelectorAll('[data-arrow="'+p+'"]').forEach(x=>x.querySelector('.arr-svg')?.classList.add('active')); }); el.addEventListener('mouseleave',()=>{ document.querySelectorAll('[data-pair],[data-arrow]').forEach(x=>x.classList.remove('active')); document.querySelectorAll('.arr-svg').forEach(x=>x.classList.remove('active')); }); }); function hoverArc(e){e.stopPropagation();} function unhoverArc(){} const layerData=[ {num:'Lớp 1',title:'LLM Provider',sub:'Hỏi đáp · Tóm tắt · Soạn nháp', illus:`<div class="illus-wrap"> <div class="illus-box"><div class="ib-icon">📄</div><div class="ib-label">TÀI LIỆU DÀI</div><div class="ib-sub">30 trang spec<br>+ chuỗi email</div></div> <div class="illus-arrow">→</div> <div class="illus-center"><div class="ib-icon">🤖</div><div class="ib-label">LLM AI</div><div class="ib-sub">Đọc toàn bộ<br>trong vài giây</div></div> <div class="illus-arrow">→</div> <div style="display:flex;flex-direction:column;gap:8px"> <div class="illus-out"><div class="ib-label">📝 Tóm tắt ý chính</div><div class="ib-sub">Các điểm quan trọng</div></div> <div class="illus-out"><div class="ib-label">✉️ Draft email</div><div class="ib-sub">Soạn sẵn, người duyệt</div></div> </div> </div>`, desc:'Dùng AI để <strong>tóm tắt tài liệu</strong> và <strong>soạn nháp email</strong>. Thay vì đọc 30 trang spec mất cả buổi, AI đọc xong trong vài giây và trả ra ý chính. Thay vì ngồi soạn từng email từ đầu, AI viết draft sẵn để BrSE chỉ cần review và gửi.'}, {num:'Lớp 2',title:'RAG & Evidence Layer',sub:'Tra cứu tài liệu nội bộ · Trích dẫn rõ nguồn', illus:`<div class="illus-wrap"> <div style="display:flex;flex-direction:column;gap:8px"> <div class="illus-box"><div class="ib-icon">📋</div><div class="ib-label">Spec v1.2</div></div> <div class="illus-box"><div class="ib-icon">📊</div><div class="ib-label">Meeting notes</div></div> <div class="illus-box"><div class="ib-icon">📁</div><div class="ib-label">Contract PDF</div></div> </div> <div class="illus-arrow">→</div> <div class="illus-center"><div class="ib-icon">🔍</div><div class="ib-label">RAG Engine</div><div class="ib-sub">Tìm đúng nguồn<br>không bịa thêm</div></div> <div class="illus-arrow">→</div> <div style="display:flex;flex-direction:column;gap:8px"> <div class="illus-out"><div class="ib-label">Câu trả lời chính xác</div><div class="ib-sub">+ trích nguồn rõ ràng</div></div> <div class="illus-out" style="background:#dbeafe;border-color:#93c5fd"><div class="ib-label" style="color:#1e40af">📄 Spec v1.2 · trang 8</div></div> <div class="illus-out" style="background:#dbeafe;border-color:#93c5fd"><div class="ib-label" style="color:#1e40af">📋 Meeting 12/03</div></div> </div> </div>`, desc:'<strong>AI tìm thông tin và trích dẫn rõ nguồn từ đâu</strong> — không bịa, không đoán mò. Upload tất cả tài liệu dự án vào, hỏi bất kỳ câu nào, AI sẽ trả lời kèm "câu này lấy từ file nào, trang mấy".'}, {num:'Lớp 3',title:'Structured Translation',sub:'Dịch file · Giữ cấu trúc toàn vẹn', illus:`<div class="illus-wrap" style="align-items:stretch"> <div class="illus-box" style="flex:1;min-width:120px"><div class="ib-icon">🇯🇵</div><div class="ib-label">FILE GỐC (日本語)</div><div class="ib-sub" style="margin-top:8px;background:rgba(43,156,216,.2);padding:4px 8px;border-radius:6px;text-align:left">仕様書 テーブル</div><div style="margin-top:6px;display:flex;gap:4px"><div style="flex:1;height:10px;background:rgba(255,255,255,.1);border-radius:3px"></div><div style="flex:1;height:10px;background:rgba(255,255,255,.1);border-radius:3px"></div></div></div> <div class="illus-arrow" style="align-self:center;font-size:24px">🔄</div> <div class="illus-center" style="flex:1;min-width:120px"><div class="ib-icon">🇻🇳</div><div class="ib-label">FILE DỊCH (Tiếng Việt)</div><div class="ib-sub" style="margin-top:8px;background:rgba(43,156,216,.1);padding:4px 8px;border-radius:6px;text-align:left;color:#1e2d3d">Tài liệu đặc tả</div><div style="margin-top:6px;display:flex;gap:4px"><div style="flex:1;height:10px;background:rgba(43,156,216,.15);border-radius:3px"></div><div style="flex:1;height:10px;background:rgba(43,156,216,.15);border-radius:3px"></div></div></div> <div style="display:flex;flex-direction:column;gap:8px;align-self:center"> <div class="illus-ok">✅ Bảng biểu giữ nguyên<br>Cấu trúc không vỡ</div> <div class="illus-warn">⚠️ Vẫn cần người duyệt<br>Trước khi gửi khách</div> </div> </div>`, desc:'<strong>Dịch xong một file Word/Excel/PowerPoint mà không làm hỏng bảng biểu hay hình ảnh.</strong> Không cần copy từng đoạn ra ngoài rồi dán lại. AI xử lý nguyên file, giữ nguyên layout — BrSE chỉ cần mở file dịch ra và review.'}, {num:'Lớp 4',title:'Voice / Video AI',sub:'Ghi âm cuộc họp · Tóm tắt action items', illus:`<div class="illus-wrap"> <div class="illus-box" style="min-width:130px"><div class="ib-label" style="margin-bottom:10px">CUỘC HỌP</div><div style="display:flex;justify-content:space-around;margin-bottom:10px"><div style="text-align:center"><div style="font-size:20px">🧑💼</div><div class="ib-sub">KH Nhật</div></div><div style="text-align:center"><div style="font-size:20px">👩💻</div><div class="ib-sub">BrSE</div></div></div><div style="text-align:center;font-size:22px">🎙️</div><div class="ib-sub" style="text-align:center;margin-top:4px">Ghi âm</div></div> <div class="illus-arrow">→</div> <div class="illus-center"><div class="ib-icon">🤖</div><div class="ib-label">Voice AI</div><div class="ib-sub">Phân biệt người nói<br>Ghi chép real-time<br>Tóm tắt sau họp</div></div> <div class="illus-arrow">→</div> <div style="display:flex;flex-direction:column;gap:8px"> <div class="illus-out" style="min-width:150px"><div class="ib-label">📌 ACTION ITEMS</div></div> <div class="illus-out"><div class="ib-label">BrSE confirm spec</div><div class="ib-sub">Deadline: 15/04</div></div> <div class="illus-out"><div class="ib-label">Dev fix bug #123</div><div class="ib-sub">Deadline: 16/04</div></div> <div class="illus-out"><div class="ib-label">KH review UI</div><div class="ib-sub">Cuối tuần này</div></div> </div> </div>`, desc:'<strong>AI ghi âm và tóm tắt cuộc họp</strong> — ai nói gì, cần làm gì, deadline khi nào. BrSE không cần vừa nghe vừa gõ tay nữa. Sau khi họp xong, AI trả ra ngay danh sách action items rõ ràng.'}, {num:'Lớp 5',title:'Agent / Co-work / Workflow',sub:'Tự động hóa · Nhắc việc · Gom thông tin', illus:`<div class="illus-wrap"> <div style="display:flex;flex-direction:column;gap:8px"> <div class="illus-box"><div class="ib-icon">✉️</div><div class="ib-label">Email</div></div> <div class="illus-box"><div class="ib-icon">💬</div><div class="ib-label">Chat / Slack</div></div> <div class="illus-box"><div class="ib-icon">📅</div><div class="ib-label">Calendar</div></div> </div> <div class="illus-arrow">→</div> <div class="illus-center" style="min-width:100px"><div style="font-size:26px">⚡</div><div class="ib-label">AI Agent</div><div class="ib-sub">Chạy nền<br>tự động</div></div> <div class="illus-arrow">→</div> <div style="display:flex;flex-direction:column;gap:8px;min-width:160px"> <div class="illus-out"><div class="ib-label">🔔 KH chưa reply email #47</div><div class="ib-sub">Đã 2 ngày, cần follow up</div></div> <div class="illus-out"><div class="ib-label">📊 Tóm tắt tiến độ Sprint</div><div class="ib-sub">Gom từ Jira + chat tự động</div></div> <div class="illus-out"><div class="ib-label">⚠️ 3 việc chưa có người nhận</div><div class="ib-sub">Cần assign trước EOD</div></div> </div> </div>`, desc:'<strong>Tự động gom thông tin từ email, chat để nhắc việc mỗi ngày.</strong> AI chạy nền, theo dõi tất cả kênh liên lạc, phát hiện những việc chưa được phản hồi hoặc sắp quá hạn — rồi chủ động nhắc BrSE.'} ]; let activeArcIdx=null; function openLayerPopup(event,idx){ event.stopPropagation(); document.querySelectorAll('.arc-path').forEach((p,i)=>p.classList.toggle('arc-active',i===idx)); activeArcIdx=idx; const d=layerData[idx]; document.getElementById('layerContent').innerHTML= `<div class="popup-layer-num">${d.num}</div> <div class="popup-title">${d.title}</div> <div class="popup-sub">${d.sub}</div> <div class="layer-illus-html">${d.illus}</div> <p class="layer-desc-main">${d.desc}</p>`; document.getElementById('layerOverlay').classList.add('open'); } function closeLayerPopup(){ document.getElementById('layerOverlay').classList.remove('open'); document.querySelectorAll('.arc-path').forEach(p=>p.classList.remove('arc-active')); activeArcIdx=null; } const toolData=[ {num:'Lớp 1',icon:'💬',title:'Hỏi đáp · Đọc hiểu · Phân tích',body:`<p>Dùng AI để tóm tắt tài liệu và soạn nháp email.</p><ul><li><strong>ChatGPT:</strong> Tiện lợi nhất để hỏi đáp nhanh, tóm tắt ý chính hay soạn nháp email.</li><li><strong>Claude:</strong> Rất giỏi xử lý tài liệu cực dài và các công việc đòi hỏi tư duy logic phức tạp.</li><li><strong>Gemini/NotebookLM:</strong> Gom các tài liệu liên quan vào một "ngăn kéo" để chuẩn bị cho cuộc họp.</li><li><strong>Microsoft Copilot:</strong> Cực kỳ phù hợp nếu công ty đang dùng sẵn Word, Excel, Teams.</li></ul>`}, {num:'Lớp 2',icon:'🔎',title:'RAG · Truy xuất bằng chứng',body:`<p>AI tìm thông tin và trích dẫn rõ nguồn từ đâu — không bịa, không đoán mò.</p><ul><li><strong>Google NotebookLM:</strong> Upload tài liệu, hỏi bất cứ điều gì — AI trả lời có trích dẫn trang cụ thể.</li><li><strong>Microsoft Copilot:</strong> Tích hợp trong Microsoft 365, tìm thông tin trong SharePoint, Teams, email.</li></ul><div class="popup-note">🔑 Tài liệu đầu vào phải ngăn nắp thì AI mới tìm chuẩn được.</div>`}, {num:'Lớp 3',icon:'📁',title:'Dịch file · Giữ cấu trúc',body:`<p>Dịch xong một file Word/Excel/PowerPoint mà không làm hỏng bảng biểu hay hình ảnh.</p><ul><li><strong>Trados Studio (File Word):</strong> Lưu được bộ nhớ dịch và lịch sử chỉnh sửa.</li><li><strong>DeepL Pro (Excel/PowerPoint):</strong> Chất lượng dịch tốt nhất cho cặp Nhật–Việt. Bảng không vỡ, slide không lệch.</li><li><strong>Smartcat (PDF):</strong> OCR nhận dạng chữ từ PDF scan và cho phép chỉnh sửa lại sau khi máy dịch.</li></ul><div class="popup-note">⚠️ Không có phần mềm nào dịch xong là gửi khách được luôn.</div>`}, {num:'Lớp 4',icon:'🎙️',title:'AI cho cuộc họp',body:`<p>AI ghi âm và tóm tắt cuộc họp — ai nói gì, cần làm gì, deadline khi nào.</p><ul><li><strong>Teams Copilot:</strong> Ghi âm, transcript, tóm tắt và nhắc action items ngay sau họp.</li><li><strong>Zoom AI Companion:</strong> Hỗ trợ tóm tắt đa ngôn ngữ.</li><li><strong>Otter.ai:</strong> Ghi âm bất kỳ cuộc họp nào kể cả họp mặt trực tiếp.</li></ul><div class="popup-note">🎤 Vẫn cần tự dò lại các điều khoản cam kết quan trọng.</div>`}, {num:'Lớp 5',icon:'⚡',title:'Agent · Co-work · Workflow',body:`<p>Tự động gom thông tin từ email, chat để nhắc việc mỗi ngày — không để sót việc.</p><ul><li><strong>OpenClaw:</strong> Tự động gom tài liệu, tóm tắt chuỗi email và nhắc việc chưa hoàn thành.</li><li><strong>Claude Cowork:</strong> Agent AI thực hiện chuỗi tác vụ phức tạp.</li><li><strong>Perplexity:</strong> Kết hợp tìm kiếm thông tin thực tế với khả năng suy luận và tổng hợp.</li></ul><div class="popup-note">🔐 Chỉ tự động hóa việc nội bộ. Mọi thứ gửi cho khách Nhật đều phải có con người duyệt cuối.</div>`} ]; function openToolPopup(idx){ document.querySelectorAll('.tool-tile').forEach((t,i)=>t.classList.toggle('active',i===idx)); const d=toolData[idx]; document.getElementById('toolContent').innerHTML= `<div class="popup-layer-num">${d.num}</div><div style="font-size:2rem;margin-bottom:6px">${d.icon}</div> <div class="popup-title">${d.title}</div> <div style="height:1px;background:var(--gray-mid);margin:16px 0 18px"></div> <div class="popup-body">${d.body}</div>`; document.getElementById('toolOverlay').classList.add('open'); } function closeToolPopup(){ document.getElementById('toolOverlay').classList.remove('open'); document.querySelectorAll('.tool-tile').forEach(t=>t.classList.remove('active')); } document.addEventListener('keydown',e=>{if(e.key==='Escape'){closeLayerPopup();closeToolPopup();}});