This commit is contained in:
Leonard-ThindPad-P50
2026-09-08 10:26:21 +07:00
commit c81f249920
169 changed files with 38726 additions and 0 deletions

706
e-commerce/bid/deck.html Normal file
View File

@@ -0,0 +1,706 @@
<!doctype html>
<html lang="vi">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Thuyết trình Hồ sơ dự thầu — Sàn thương mại điện tử marketplace</title>
<style>
:root{
--bg:#eef1f7;
--surface:#ffffff;
--text:#16213a;
--muted:#5b6478;
--accent:#1f4e9c;
--accent-contrast:#ffffff;
--border:#e2e6ef;
--surface-2:#f4f6fb;
}
@media (prefers-color-scheme: dark){
:root{
--bg:#0b0f18;
--surface:#141b2b;
--text:#e7ebf5;
--muted:#9aa3b8;
--accent:#5b93e0;
--accent-contrast:#0b0f18;
--border:#2a3247;
--surface-2:#0f1522;
}
}
html[data-theme="light"]{
--bg:#eef1f7; --surface:#ffffff; --text:#16213a; --muted:#5b6478;
--accent:#1f4e9c; --accent-contrast:#ffffff; --border:#e2e6ef; --surface-2:#f4f6fb;
}
html[data-theme="dark"]{
--bg:#0b0f18; --surface:#141b2b; --text:#e7ebf5; --muted:#9aa3b8;
--accent:#5b93e0; --accent-contrast:#0b0f18; --border:#2a3247; --surface-2:#0f1522;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;background:var(--bg);}
body{
font-family:"Segoe UI","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
color:var(--text);
overflow:hidden;
}
#stage{position:fixed;inset:0;background:var(--bg);overflow:hidden;}
#viewport{
position:absolute;width:1280px;height:720px;left:50%;top:50%;
margin-left:-640px;margin-top:-360px;transform-origin:50% 50%;
}
.slide{
position:absolute;top:0;left:0;width:1280px;height:720px;
background:var(--surface);color:var(--text);
display:flex;flex-direction:column;
padding:48px 72px 0 72px;
box-shadow:0 0 0 1px var(--border);
visibility:hidden;opacity:0;pointer-events:none;z-index:0;
}
/* Slide luôn giữ display:flex (có layout thật) kể cả khi không active — chỉ ẩn bằng
visibility/opacity, KHÔNG dùng display:none. Lý do: Mermaid flowchart dùng
getBBox()/đo text để dàn layout; nếu ancestor có display:none thì trình duyệt
không tạo render tree cho nhánh đó, khiến SVG render ra viewBox rỗng (bug đã ghi
nhận ở s08). visibility:hidden vẫn giữ hộp bố cục nên Mermaid đo đúng kích thước
dù slide đang ẩn trên màn hình. */
.slide.active{visibility:visible;opacity:1;pointer-events:auto;z-index:1;}
.eyebrow{
font-size:18px;letter-spacing:.08em;text-transform:uppercase;
color:var(--accent);font-weight:700;margin:0 0 6px 0;
}
.title{font-size:44px;line-height:1.15;margin:0 0 6px 0;font-weight:800;}
.subtitle{font-size:22px;color:var(--muted);margin:0 0 18px 0;font-weight:400;}
.content{flex:1;min-height:0;font-size:24px;line-height:1.4;overflow:hidden;}
.content p{margin:0 0 14px 0;}
ul.bullets{margin:0;padding-left:28px;}
ul.bullets li{margin-bottom:10px;}
.badge{display:inline-block;font-size:15px;font-weight:700;padding:2px 10px;
border-radius:999px;margin-left:10px;vertical-align:middle;border:1px solid currentColor;white-space:nowrap;}
.badge.mvp{color:#1c8a4b;background:rgba(28,138,75,.12);}
.badge.optional{color:#a3720a;background:rgba(163,114,10,.12);}
.badge.phase2{color:#3a4b9e;background:rgba(58,75,158,.12);}
table.table{width:100%;border-collapse:collapse;font-size:20px;}
table.table th, table.table td{border:1px solid var(--border);padding:8px 12px;text-align:left;vertical-align:top;}
table.table th{background:var(--accent);color:var(--accent-contrast);font-weight:700;}
table.table tr:nth-child(even) td{background:var(--surface-2);}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:16px;}
.stat-grid.cols3{grid-template-columns:repeat(3,1fr);}
.stat-tile{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:14px 16px;}
.stat-value{font-size:34px;font-weight:800;color:var(--accent);line-height:1.1;}
.stat-label{font-size:16px;color:var(--muted);margin-top:4px;}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;height:100%;}
.diagram-card{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;
padding:10px 16px;height:100%;display:flex;flex-direction:column;}
.diagram-title{font-size:18px;font-weight:700;color:var(--muted);margin-bottom:4px;}
pre.mermaid{flex:1;margin:0;background:transparent;display:flex;align-items:center;justify-content:center;}
pre.mermaid svg{max-width:100%;max-height:100%;}
mark.todo{background:#ffdd7a;color:#5c3d00;padding:0 6px;border-radius:5px;font-weight:700;}
.note{font-size:18px;color:var(--muted);border-left:4px solid var(--accent);padding-left:12px;margin-top:8px;}
.slide-footer{
position:absolute;left:72px;right:72px;bottom:14px;
display:flex;gap:8px;align-items:center;font-size:15px;color:var(--muted);
border-top:1px solid var(--border);padding-top:8px;
}
.slide-footer .dot{opacity:.6;}
.slide-logo{
position:absolute;top:24px;right:28px;width:34px;height:34px;border-radius:9px;
background:linear-gradient(135deg,var(--accent),var(--accent-contrast) 220%);
box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);
}
aside.notes{display:none;}
body.show-notes aside.notes{
display:block;position:absolute;left:0;right:0;bottom:0;
background:rgba(0,0,0,.78);color:#fff;font-size:16px;padding:10px 24px;
}
/* Nav chrome */
#navBar{
position:fixed;left:50%;bottom:14px;transform:translateX(-50%);
display:flex;align-items:center;gap:14px;background:rgba(20,27,43,.82);
color:#fff;padding:8px 18px;border-radius:999px;font-size:15px;z-index:50;
backdrop-filter:blur(4px);
}
#navBar button{
background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;
border-radius:999px;width:30px;height:30px;cursor:pointer;font-size:16px;line-height:1;
}
#navBar button:hover{background:rgba(255,255,255,.15);}
#todoBanner{
position:fixed;top:12px;left:50%;transform:translateX(-50%);
background:#ffdd7a;color:#5c3d00;font-size:14px;font-weight:700;
padding:6px 16px;border-radius:999px;z-index:50;box-shadow:0 2px 8px rgba(0,0,0,.2);
}
#overview{
position:fixed;inset:0;background:rgba(10,14,22,.92);z-index:60;
display:none;grid-template-columns:repeat(5,1fr);gap:16px;padding:40px;overflow:auto;
}
#overview.open{display:grid;}
.ov-card{
background:#1b2436;color:#e7ebf5;border-radius:10px;padding:16px;cursor:pointer;
border:1px solid #2a3450;min-height:100px;display:flex;flex-direction:column;gap:8px;
}
.ov-card:hover{border-color:#5b93e0;}
.ov-num{font-size:14px;font-weight:800;color:#5b93e0;}
.ov-title{font-size:15px;line-height:1.3;}
@media print{
#navBar, #todoBanner, #overview, aside.notes{display:none !important;}
@page{ size: 338.67mm 190.5mm; margin:0; }
html,body{overflow:visible !important;height:auto !important;background:#fff;}
#stage{position:static !important;}
#viewport{position:static !important;transform:none !important;margin:0 !important;width:auto;height:auto;}
.slide{
display:flex !important;position:static !important;
visibility:visible !important;opacity:1 !important;pointer-events:auto !important;
width:338.67mm !important;height:190.5mm !important;
page-break-after:always;box-shadow:none;
print-color-adjust:exact;-webkit-print-color-adjust:exact;
}
.slide:last-child{page-break-after:auto;}
}
</style>
</head>
<body>
<div id="todoBanner"></div>
<div id="stage">
<div id="viewport">
<section class="slide" id="s01" data-title="Bìa">
<p class="eyebrow">Hồ sơ dự thầu · Đề xuất kỹ thuật &amp; tài chính</p>
<h1 class="title">Sàn thương mại điện tử marketplace đa người bán</h1>
<p class="subtitle">Thuyết trình tóm tắt phương án dự thầu</p>
<div class="content">
<table class="table">
<tr><th style="width:38%">Tên gói thầu</th><td><mark class="todo">[[CẦN ĐIỀN: Tên gói thầu]]</mark></td></tr>
<tr><th>Bên mời thầu</th><td><mark class="todo">[[CẦN ĐIỀN: Bên mời thầu]]</mark></td></tr>
<tr><th>Nhà thầu</th><td><mark class="todo">[[CẦN ĐIỀN: Tên công ty dự thầu]]</mark></td></tr>
<tr><th>Ngày lập hồ sơ</th><td>2026-09-06</td></tr>
<tr><th>Hạn nộp hồ sơ dự thầu (HSDT)</th><td><mark class="todo">[[CẦN ĐIỀN]]</mark></td></tr>
<tr><th>Hiệu lực hồ sơ dự thầu</th><td>90 ngày kể từ hạn nộp HSDT</td></tr>
</table>
</div>
<aside class="notes">Ghi chú thuyết trình: mở đầu bằng lời cảm ơn Bên mời thầu đã mời tham dự, giới thiệu ngắn gọn cấu trúc buổi trình bày trước khi chuyển sang mục lục.</aside>
</section>
<section class="slide" id="s02" data-title="Nội dung trình bày">
<p class="eyebrow">Mục lục</p>
<h1 class="title">Nội dung trình bày</h1>
<div class="content">
<ul class="bullets">
<li><strong>Hiểu bài toán &amp; giải pháp</strong> — bối cảnh, mục tiêu, phạm vi và danh mục chức năng theo từng nhóm người dùng.</li>
<li><strong>Kiến trúc &amp; công nghệ</strong> — mô hình kiến trúc tổng thể, luồng nghiệp vụ lõi, tech stack và hạ tầng đề xuất.</li>
<li><strong>Bảo mật &amp; chất lượng</strong> — cam kết bảo mật/tuân thủ, phương pháp luận triển khai và chiến lược kiểm thử.</li>
<li><strong>Kế hoạch &amp; đội ngũ</strong> — mốc bàn giao, thời lượng thực hiện và staffing plan.</li>
<li><strong>Ước lượng &amp; giá dự thầu</strong> — cơ sở tính toán, tổng giá trước/sau VAT, rủi ro và biện pháp giảm thiểu.</li>
<li><strong>Năng lực nhà thầu &amp; bước tiếp theo</strong> — hồ sơ năng lực hiện có và đề xuất hành động tiếp theo.</li>
</ul>
</div>
</section>
<section class="slide" id="s03" data-title="Hiểu bài toán & mục tiêu">
<p class="eyebrow">B1 — Hiểu biết về yêu cầu &amp; bài toán</p>
<h1 class="title">Hiểu bài toán &amp; mục tiêu</h1>
<div class="content two-col">
<div>
<p>Bài toán cốt lõi không chỉ là xây một website bán hàng, mà là dựng <strong>hạ tầng giao dịch ba bên</strong> — khách hàng, người bán, và sàn với vai trò trung gian thu hoa hồng — nơi một giỏ hàng có thể chứa sản phẩm của nhiều người bán khác nhau, mỗi đơn con có vòng đời xử lý riêng.</p>
<p style="font-weight:700;margin-bottom:6px;">Mục tiêu chính:</p>
<ul class="bullets">
<li>Trải nghiệm mua sắm liền mạch, thanh toán một lần cho giỏ hàng đa người bán.</li>
<li>Người bán tự đăng ký, được xác minh, tự quản lý gian hàng và nhận thanh toán minh bạch.</li>
<li>Sàn kiểm soát chất lượng người bán/danh mục, cấu hình hoa hồng linh hoạt.</li>
<li>Nền tảng ổn định, an toàn dữ liệu, mở rộng được ngay từ ngày vận hành đầu tiên.</li>
</ul>
</div>
<div>
<div class="stat-tile" style="margin-bottom:14px;">
<div class="stat-label">Đặc thù marketplace</div>
<div style="font-size:18px;margin-top:6px;">Tách đơn theo người bán · giữ tiền có kỳ hạn (payout hold) · KYC người bán · chịu tải đột biến mùa khuyến mãi</div>
</div>
<div class="note">Định hướng KPI (hiệu năng, độ sẵn sàng, thời gian payout, xử lý khiếu nại) sẽ được xác nhận số liệu cụ thể cùng Bên mời thầu tại giai đoạn khởi động dự án.</div>
</div>
</div>
<aside class="notes">Nhấn mạnh sự khác biệt so với TMĐT một-người-bán: tách đơn, giữ tiền, KYC, chịu tải — đây là các điểm mà giải pháp phải giải quyết đúng ngay từ kiến trúc.</aside>
</section>
<section class="slide" id="s04" data-title="Phạm vi & đối tượng sử dụng">
<p class="eyebrow">B2 — Phạm vi &amp; đối tượng sử dụng</p>
<h1 class="title">Phạm vi &amp; đối tượng sử dụng</h1>
<div class="content">
<p>Phạm vi bao trùm toàn bộ chuỗi nghiệp vụ lõi: danh mục &amp; tìm kiếm đa người bán, giỏ hàng/checkout tách đơn, thanh toán đa phương thức, quản lý đơn hàng/đổi trả, đăng ký &amp; quản trị người bán, hoa hồng/payout, khuyến mãi/loyalty, đa ngôn ngữ, và tích hợp vận chuyển.</p>
<table class="table">
<tr><th>Nhóm người dùng</th><th>Nhu cầu chính</th></tr>
<tr><td>Khách vãng lai &amp; Khách hàng</td><td>Mua sắm nhanh, thanh toán tin cậy, theo dõi đơn hàng minh bạch, hỗ trợ đổi trả</td></tr>
<tr><td>Người bán (Seller)</td><td>Tự chủ quản lý gian hàng, nhận thanh toán đúng hạn và minh bạch</td></tr>
<tr><td>Quản trị viên sàn (Admin)</td><td>Kiểm soát chất lượng người bán/catalog, cấu hình chính sách thương mại</td></tr>
<tr><td>Vận hành kho &amp; giao nhận (Ops)</td><td>Công cụ xử lý đóng gói/giao hàng, tích hợp đơn vị vận chuyển</td></tr>
<tr><td>Chăm sóc khách hàng (CSR)</td><td>Xử lý khiếu nại/tranh chấp có đầy đủ lịch sử giao dịch</td></tr>
</table>
</div>
</section>
<section class="slide" id="s05" data-title="Tính năng nổi bật — Khách hàng">
<p class="eyebrow">B2 · Nhóm 1</p>
<h1 class="title">Tính năng nổi bật — Khách vãng lai &amp; Khách hàng</h1>
<div class="content">
<ul class="bullets">
<li>Đăng ký &amp; đăng nhập tài khoản <span class="badge mvp">MVP</span></li>
<li>Danh mục &amp; tìm kiếm sản phẩm đa người bán <span class="badge mvp">MVP</span></li>
<li>Giỏ hàng đa người bán <span class="badge mvp">MVP</span></li>
<li>Checkout &amp; tách đơn theo người bán <span class="badge mvp">MVP</span></li>
<li>Thanh toán đa phương thức (ví điện tử/cổng thanh toán/COD) <span class="badge mvp">MVP</span></li>
<li>Đổi trả &amp; khiếu nại <span class="badge mvp">MVP</span></li>
</ul>
<p class="note">Ngoài ra: quản lý hồ sơ/địa chỉ, wishlist, đánh giá sản phẩm, thông báo đơn hàng, khuyến mãi và chương trình thành viên thân thiết đều thuộc phạm vi MVP; đăng nhập mạng xã hội và hiển thị đa tiền tệ là hạng mục tùy chọn.</p>
</div>
</section>
<section class="slide" id="s06" data-title="Tính năng nổi bật — Người bán">
<p class="eyebrow">B2 · Nhóm 2</p>
<h1 class="title">Tính năng nổi bật — Người bán (Seller)</h1>
<div class="content">
<ul class="bullets">
<li>Đăng ký &amp; xác minh danh tính người bán (KYC) <span class="badge mvp">MVP</span></li>
<li>Quản lý sản phẩm &amp; tồn kho <span class="badge mvp">MVP</span></li>
<li>Quản lý đơn hàng của gian hàng <span class="badge mvp">MVP</span></li>
<li>Dashboard doanh thu &amp; trạng thái chi trả (payout) <span class="badge mvp">MVP</span></li>
</ul>
<p class="note">Toàn bộ 4 nhóm chức năng cốt lõi dành cho người bán được triển khai ngay trong đợt bàn giao MVP, cho phép người bán vận hành gian hàng độc lập ngay từ ngày go-live.</p>
</div>
</section>
<section class="slide" id="s07" data-title="Tính năng nổi bật — Quản trị & vận hành">
<p class="eyebrow">B2 · Nhóm 3</p>
<h1 class="title">Tính năng nổi bật — Quản trị &amp; vận hành sàn</h1>
<div class="content">
<ul class="bullets">
<li>Cấu hình hoa hồng theo ngành hàng <span class="badge mvp">MVP</span></li>
<li>Chi trả định kỳ cho người bán, có kỳ giữ tiền <span class="badge mvp">MVP</span></li>
<li>Quản trị người bán (duyệt/khoá) <span class="badge mvp">MVP</span></li>
<li>Quản trị danh mục toàn sàn <span class="badge mvp">MVP</span></li>
<li>Xử lý tranh chấp &amp; khiếu nại (CSR/Admin) <span class="badge mvp">MVP</span></li>
<li>Xác thực đa yếu tố (MFA) cho tài khoản quản trị <span class="badge mvp">MVP</span></li>
</ul>
<p class="note">Nhóm Admin/Ops/CSR còn có điều phối tồn kho &amp; vận chuyển (đóng gói, cập nhật giao hàng) trong phạm vi MVP.</p>
</div>
</section>
<section class="slide" id="s08" data-title="Kiến trúc tổng thể">
<p class="eyebrow">B3 — Giải pháp kỹ thuật</p>
<h1 class="title">Kiến trúc tổng thể</h1>
<div class="content" style="display:flex;flex-direction:column;">
<div class="diagram-card" style="flex:1;">
<div class="diagram-title">Dịch vụ hoá theo lĩnh vực nghiệp vụ (domain-oriented) kết hợp xử lý sự kiện (event-driven)</div>
<pre class="mermaid">
flowchart TB
Client["Khách hàng · Người bán · Quản trị viên&#10;(giao diện web đáp ứng)"]
Edge["CDN + WAF + Cân bằng tải"]
GW["Cổng API (xác thực, giới hạn tần suất)"]
subgraph CORE["Dịch vụ nghiệp vụ cốt lõi (tự động mở rộng theo tải)"]
ID["Định danh & Truy cập"]
CAT["Danh mục & Tìm kiếm"]
ORD["Giỏ hàng & Đơn hàng"]
PAY["Thanh toán"]
SEL["Người bán & KYC"]
COM["Hoa hồng & Payout"]
end
EVT["Hàng đợi sự kiện (xử lý bất đồng bộ)"]
DATA[("CSDL theo dịch vụ · Cache · Lưu trữ tệp")]
EXT["Đối tác ngoài: Cổng thanh toán · Vận chuyển · Ngân hàng"]
Client --> Edge --> GW
GW --> ID & CAT & ORD & PAY & SEL
ORD <--> EVT
PAY <--> EVT
EVT --> COM
ID --> DATA
CAT --> DATA
ORD --> DATA
PAY --> DATA
SEL --> DATA
COM --> DATA
PAY --> EXT
SEL --> EXT
COM --> EXT
</pre>
</div>
<p style="font-size:19px;margin:8px 0 0 0;">Thao tác chính (tìm sản phẩm, đặt hàng, thanh toán) đi qua đường đồng bộ để phản hồi ngay; các bước phụ (tính hoa hồng, thông báo, lên lịch payout) xử lý ngầm qua hàng đợi sự kiện, không làm chậm trải nghiệm người dùng.</p>
</div>
<aside class="notes">Giải thích cho người không chuyên: mỗi dịch vụ sở hữu dữ liệu riêng; hàng đợi sự kiện tách các bước không cần khách chờ ra khỏi luồng chính.</aside>
</section>
<section class="slide" id="s09" data-title="Luồng nghiệp vụ chính">
<p class="eyebrow">B3.3 — Luồng nghiệp vụ chính</p>
<h1 class="title">Đặt hàng &amp; thanh toán đa người bán</h1>
<div class="content" style="display:flex;flex-direction:column;">
<div class="diagram-card" style="flex:1;">
<pre class="mermaid">
sequenceDiagram
actor KH as Khách hàng
participant Order as Giỏ hàng & Đơn hàng
participant Pay as Thanh toán
participant GW as Cổng thanh toán
participant Event as Hàng đợi sự kiện
KH->>Order: Xác nhận giỏ hàng, đặt hàng
Order->>Order: Kiểm tra tồn kho & tách đơn theo người bán
Order-->>KH: Tạo đơn hàng thành công
KH->>Pay: Thanh toán qua cổng
Pay->>GW: Chuyển hướng thanh toán
GW-->>Pay: Xác nhận kết quả giao dịch
Pay->>Event: Phát sự kiện "Thanh toán thành công"
Event->>Order: Cập nhật trạng thái & trừ tồn kho chính thức
</pre>
</div>
<p style="font-size:19px;margin:8px 0 0 0;">Hệ thống kiểm tra tồn kho trước khi xác nhận đơn để tránh bán vượt số lượng thực có. Nếu thiếu hàng: từ chối tạo đơn, giữ nguyên tồn kho. Nếu cổng thanh toán không phản hồi đúng hạn: đơn giữ trạng thái chờ xác nhận, hệ thống tự động đối soát định kỳ.</p>
</div>
</section>
<section class="slide" id="s10" data-title="Tech stack & lý do">
<p class="eyebrow">B4 — Tech stack đề xuất</p>
<h1 class="title">Tech stack &amp; lý do lựa chọn</h1>
<div class="content">
<table class="table">
<tr><th>Lớp</th><th>Công nghệ đề xuất</th><th>Lý do (gắn NFR)</th></tr>
<tr><td>Giao diện người dùng</td><td>SPA + design system, khung i18n</td><td>Đa ngôn ngữ/tiền tệ, dễ bảo trì</td></tr>
<tr><td>Dịch vụ nghiệp vụ</td><td>Kiến trúc dịch vụ hoá theo domain</td><td>Mở rộng độc lập theo domain, module hoá</td></tr>
<tr><td>CSDL quan hệ</td><td>Mã nguồn mở, một CSDL/dịch vụ, multi-AZ</td><td>Mở rộng, độ sẵn sàng cao</td></tr>
<tr><td>Bộ nhớ đệm</td><td>Redis (hoặc tương đương)</td><td>Giảm độ trễ, hấp thụ tải đột biến</td></tr>
<tr><td>Tìm kiếm sản phẩm</td><td>OpenSearch (hoặc tương đương)</td><td>Tìm kiếm nhanh, chịu tải mùa khuyến mãi</td></tr>
<tr><td>Hàng đợi sự kiện</td><td>Kafka (hoặc tương đương)</td><td>Đệm tải đột biến, tách rời xử lý phía sau</td></tr>
</table>
<p class="note">Ngôn ngữ lập trình backend cụ thể và công cụ CI/CD sẽ chốt cùng đội kiến trúc khi khởi động dự án — <mark class="todo">[[CẦN ĐIỀN: framework/CI-CD cụ thể]]</mark>.</p>
</div>
</section>
<section class="slide" id="s11" data-title="Hạ tầng & môi trường">
<p class="eyebrow">B4.2 — Sizing hạ tầng</p>
<h1 class="title">Hạ tầng &amp; môi trường</h1>
<div class="content">
<table class="table">
<tr><th>Môi trường</th><th>Cấu hình/số lượng</th><th>Dữ liệu</th></tr>
<tr><td>Dev</td><td>Một thực thể nhỏ nhất mỗi dịch vụ, CSDL đơn vùng</td><td>Dữ liệu giả lập, không PII/KYC thật</td></tr>
<tr><td>Staging</td><td>Quy mô nhỏ hơn Production, cấu trúc tương tự, CSDL đa vùng nhỏ</td><td>Dữ liệu ẩn danh hoá — dùng cho tích hợp/hiệu năng/bảo mật/UAT</td></tr>
<tr><td>Production</td><td>Tự động mở rộng theo tải, CSDL đa vùng có bản sao đọc, CDN toàn cầu</td><td>Dữ liệu thật, mã hoá lưu trữ, kiểm soát truy cập nghiêm ngặt</td></tr>
</table>
<p class="note">Mọi thay đổi đi qua 3 môi trường tách biệt trước khi tới người dùng thật; cấu hình trần tự động mở rộng cụ thể là <mark class="todo">[[CẦN ĐIỀN: cấu hình cụ thể theo kết quả kiểm thử tải]]</mark>.</p>
</div>
</section>
<section class="slide" id="s12" data-title="Bảo mật & tuân thủ">
<p class="eyebrow">B5 — Bảo mật &amp; tuân thủ</p>
<h1 class="title">Bảo mật &amp; tuân thủ</h1>
<div class="content two-col">
<div>
<ul class="bullets">
<li>Chuẩn OWASP ASVS/Top 10 xuyên suốt vòng đời phát triển, rà soát chéo độc lập.</li>
<li>MFA bắt buộc cho quản trị viên, khuyến khích cho người bán; RBAC + kiểm soát quyền sở hữu dữ liệu (chống IDOR).</li>
<li>Mã hoá dữ liệu lưu trữ &amp; truyền tải (TLS toàn bộ, kể cả giao tiếp nội bộ).</li>
<li>Hồ sơ KYC chỉ xem qua đường dẫn tạm thời, có hạn sử dụng ngắn.</li>
<li>Nhật ký kiểm toán đầy đủ cho mọi hành động quản trị nhạy cảm.</li>
<li>SAST/SCA tự động mỗi lần build; pentest định kỳ hàng năm.</li>
</ul>
</div>
<div>
<table class="table">
<tr><th>Chuẩn/Quy định</th><th>Mức áp dụng</th></tr>
<tr><td>TMĐT (đăng ký website sàn giao dịch)</td><td>Phối hợp cùng Bên mời thầu</td></tr>
<tr><td>Bảo vệ dữ liệu cá nhân</td><td>Áp dụng đầy đủ</td></tr>
<tr><td>PCI-DSS</td><td>Phạm vi thu hẹp (không lưu số thẻ)</td></tr>
<tr><td>OWASP ASVS/Top 10</td><td>Khung tham chiếu thiết kế &amp; kiểm thử</td></tr>
</table>
</div>
</div>
</section>
<section class="slide" id="s13" data-title="Phương pháp luận & chất lượng">
<p class="eyebrow">B6 — Phương pháp luận &amp; quản lý dự án</p>
<h1 class="title">Phương pháp luận &amp; chất lượng</h1>
<div class="content">
<ul class="bullets">
<li><strong>Agile/Scrum kết hợp</strong>, bàn giao sản phẩm theo từng đợt (increment) thay vì chờ đến cuối dự án.</li>
<li>Vòng đời mỗi đợt: xác nhận yêu cầu → thiết kế/lập trình song song → kiểm thử nhiều lớp → demo/nghiệm thu → phát hành.</li>
<li>Quản lý thay đổi phạm vi qua quy trình Change Request chính thức, phê duyệt song phương.</li>
<li>Kiểm thử đa lớp: đơn vị, tích hợp, hệ thống/UAT, hiệu năng, bảo mật — tương ứng mức độ nhạy cảm của hệ thống thanh toán/PII.</li>
<li>CI/CD với phê duyệt thủ công bắt buộc trước Production, rollout tăng dần cho thay đổi rủi ro cao.</li>
<li>Báo cáo tiến độ định kỳ, demo cuối mỗi đợt, họp rà soát rủi ro khi phát sinh.</li>
</ul>
</div>
</section>
<section class="slide" id="s14" data-title="Kế hoạch & mốc">
<p class="eyebrow">B7 — Kế hoạch triển khai</p>
<h1 class="title">Kế hoạch &amp; mốc bàn giao</h1>
<div class="content">
<div class="stat-grid cols3">
<div class="stat-tile"><div class="stat-value">7 tháng</div><div class="stat-label">Tổng thời lượng thực hiện</div></div>
<div class="stat-tile"><div class="stat-value">53,02</div><div class="stat-label">Tổng nỗ lực (người-tháng, đã gồm dự phòng)</div></div>
<div class="stat-tile"><div class="stat-value">9</div><div class="stat-label">Đội ngũ tương đương đồng thời (vị trí)</div></div>
</div>
<table class="table">
<tr><th>Giai đoạn</th><th>% nỗ lực</th><th>Khoảng tháng</th><th>Nỗ lực (MM)</th></tr>
<tr><td>Khởi động &amp; Chuẩn bị</td><td>5%</td><td>0 – 0,5</td><td>2,65</td></tr>
<tr><td>Phân tích &amp; Thiết kế chi tiết</td><td>15%</td><td>0,5 – 1,5</td><td>7,95</td></tr>
<tr><td>Phát triển (3 đợt)</td><td>45%</td><td>1,5 – 4,5</td><td>23,86</td></tr>
<tr><td>Kiểm thử hệ thống, hiệu năng, bảo mật</td><td>15%</td><td>4,5 – 5,5</td><td>7,95</td></tr>
<tr><td>UAT &amp; Đào tạo</td><td>12%</td><td>5,5 – 6,5</td><td>6,36</td></tr>
<tr><td>Go-live &amp; Hỗ trợ ổn định</td><td>8%</td><td>6,5 – 7</td><td>4,24</td></tr>
</table>
</div>
<aside class="notes">Ngày khởi động dự án thực tế chưa được xác nhận — kế hoạch trên là lộ trình cơ sở tính theo tháng tương đối, không phải ngày ấn định.</aside>
</section>
<section class="slide" id="s15" data-title="Đội ngũ & staffing">
<p class="eyebrow">B8 — Tổ chức nhân sự</p>
<h1 class="title">Đội ngũ &amp; staffing plan</h1>
<div class="content">
<div class="stat-grid">
<div class="stat-tile"><div class="stat-value">9</div><div class="stat-label">Đội ngũ đồng thời (teamSize)</div></div>
<div class="stat-tile"><div class="stat-value">9,5</div><div class="stat-label">Đỉnh điểm FTE/tháng</div></div>
<div class="stat-tile"><div class="stat-value">10</div><div class="stat-label">Đỉnh điểm đầu người (peakHeadcount)</div></div>
<div class="stat-tile"><div class="stat-value">8</div><div class="stat-label">Vai trò tham gia (PM/BA/SA/UIUX/BE/FE/QA/DEVOPS)</div></div>
</div>
<table class="table">
<tr><th>Vai trò</th><th>Tổng MM (mmByRole)</th></tr>
<tr><td>BE (Backend)</td><td>18,31</td></tr>
<tr><td>FE (Frontend)</td><td>9,47</td></tr>
<tr><td>QA (Kiểm thử)</td><td>8,49</td></tr>
<tr><td>DEVOPS</td><td>4,92</td></tr>
<tr><td>PM / BA / SA / UIUX (cộng gộp)</td><td>11,84</td></tr>
</table>
<p class="note">Nhân sự đội phát triển (BE/FE/SA/UIUX) giảm dần từ tháng 5, chuyển trọng tâm sang QA cho giai đoạn Kiểm thử &amp; UAT. Tên nhân sự chủ chốt: <mark class="todo">[[CẦN ĐIỀN: CV &amp; cam kết tham gia — keyPersonnel chưa khai báo]]</mark>.</p>
</div>
</section>
<section class="slide" id="s16" data-title="Ước lượng & giá tóm tắt">
<p class="eyebrow">C1–C5 — Ước lượng &amp; giá dự thầu</p>
<h1 class="title">Ước lượng &amp; giá tóm tắt</h1>
<div class="content">
<div class="stat-grid">
<div class="stat-tile"><div class="stat-value">53,02 MM</div><div class="stat-label">Tổng nỗ lực (grandMM, đã gồm dự phòng)</div></div>
<div class="stat-tile"><div class="stat-value">3.420.500.000</div><div class="stat-label">Chi phí nhân công, chưa VAT (VNĐ)</div></div>
<div class="stat-tile"><div class="stat-value">342.050.000</div><div class="stat-label">VAT 10% (VNĐ)</div></div>
<div class="stat-tile"><div class="stat-value">3.762.550.000</div><div class="stat-label">Tổng giá dự thầu, sau VAT (VNĐ)</div></div>
</div>
<p>Cơ sở tính: phân rã công việc (WBS bottom-up) trên 892 MD cơ sở + 221,5 MD dự phòng rủi ro = 1.113,5 MD (÷21 MD/MM). Đối chiếu độc lập bằng Use Case Points cho kết quả 27,5 MM — chênh lệch được giải thích do mật độ hạng mục kỹ thuật xuyên suốt (bảo mật, tích hợp bên thứ ba, hiệu năng) cao hơn mức UCP phản ánh.</p>
<p class="note"><strong>Giá tạm tính:</strong> tổng trên mới gồm chi phí nhân công theo rate card; 8 hạng mục chi phí khác (hạ tầng cloud, phí tích hợp bên thứ ba, pentest, đào tạo…) chưa có đơn giá cụ thể — <mark class="todo">[[CẦN ĐIỀN: đơn giá chi phí khác — xem C4]]</mark>. Hiệu lực báo giá: 90 ngày kể từ hạn nộp HSDT.</p>
</div>
<aside class="notes">Nhấn mạnh: đây là giá trọn gói phần nhân công (fixed), các khoản pass-through/định kỳ tách riêng và sẽ cập nhật khi có báo giá nhà cung cấp.</aside>
</section>
<section class="slide" id="s17" data-title="Rủi ro & biện pháp">
<p class="eyebrow">B6.6 — Quản lý rủi ro dự án</p>
<h1 class="title">Rủi ro &amp; biện pháp giảm thiểu</h1>
<div class="content">
<table class="table">
<tr><th>Rủi ro</th><th>Biện pháp giảm thiểu</th></tr>
<tr><td>Số liệu nghiệp vụ (SLA, ngưỡng hạng thành viên, ngân hàng đối tác) chưa được xác nhận</td><td>Xác nhận toàn bộ tại giai đoạn khởi động, trước khi khoá phạm vi đợt 1</td></tr>
<tr><td>Đột biến tải trong đợt khuyến mãi lớn</td><td>Kiến trúc tự động mở rộng theo tải, kiểm thử hiệu năng định kỳ trước cao điểm</td></tr>
<tr><td>Phụ thuộc đối tác bên ngoài (cổng thanh toán, vận chuyển, ngân hàng)</td><td>Phương án dự phòng/đối soát tự động cho từng tích hợp</td></tr>
<tr><td>Thay đổi quy định pháp luật TMĐT/bảo vệ dữ liệu cá nhân</td><td>Rà soát định kỳ cùng pháp chế Bên mời thầu, thiết kế linh hoạt dễ mở rộng</td></tr>
<tr><td>Yêu cầu thay đổi phạm vi phát sinh giữa chừng</td><td>Áp dụng quy trình Change Request chính thức</td></tr>
</table>
</div>
</section>
<section class="slide" id="s18" data-title="Đáp ứng yêu cầu bắt buộc">
<p class="eyebrow">B2.1 — Ma trận đáp ứng yêu cầu</p>
<h1 class="title">Đáp ứng yêu cầu bắt buộc</h1>
<div class="content two-col">
<div>
<div class="stat-tile" style="margin-bottom:14px;">
<div class="stat-value">35 / 35</div>
<div class="stat-label">Yêu cầu được đáp ứng ở mức thiết kế chi tiết (27 yêu cầu chức năng + 8 nhóm yêu cầu phi chức năng)</div>
</div>
<p style="font-size:19px;">Toàn bộ yêu cầu có bằng chứng thiết kế cụ thể tại từng mục hồ sơ kỹ thuật liên quan (kiến trúc, mô hình dữ liệu, luồng nghiệp vụ, bảo mật).</p>
</div>
<table class="table">
<tr><th>Mức đáp ứng</th><th>Số lượng</th></tr>
<tr><td>Đáp ứng</td><td>35</td></tr>
<tr><td>Đáp ứng một phần</td><td>0</td></tr>
<tr><td>Vượt yêu cầu</td><td>0</td></tr>
<tr><td>Không đáp ứng</td><td>0</td></tr>
</table>
</div>
<aside class="notes">Vì không có HSMT/RFP chính thức, đây là ma trận tự đối chiếu giữa giải pháp và yêu cầu đã xác nhận trong phân tích thiết kế hệ thống — sẽ bổ sung đối chiếu theo mã yêu cầu chính thức khi có HSMT.</aside>
</section>
<section class="slide" id="s19" data-title="Năng lực & kinh nghiệm">
<p class="eyebrow">Phần A — Hồ sơ năng lực</p>
<h1 class="title">Năng lực &amp; kinh nghiệm nhà thầu</h1>
<div class="content">
<table class="table">
<tr><th>Hạng mục</th><th>Tình trạng</th></tr>
<tr><td>Chứng chỉ ISO 9001</td><td>Sẵn sàng</td></tr>
<tr><td>Chứng chỉ ISO/IEC 27001</td><td>Sẵn sàng</td></tr>
<tr><td>Chứng chỉ CMMI</td><td>Sẵn sàng</td></tr>
<tr><td>Giấy ĐKKD &amp; giấy ủy quyền ký hồ sơ</td><td><mark class="todo">[[CẦN ĐIỀN: bổ sung tài liệu]]</mark></td></tr>
<tr><td>Báo cáo tài chính 2–3 năm gần nhất</td><td><mark class="todo">[[CẦN ĐIỀN: bổ sung tài liệu]]</mark></td></tr>
<tr><td>Hợp đồng tương tự &amp; CV nhân sự chủ chốt</td><td><mark class="todo">[[CẦN ĐIỀN: bổ sung tài liệu]]</mark></td></tr>
</table>
<p class="note">Không có liên danh/thầu phụ — nhà thầu dự thầu độc lập.</p>
</div>
</section>
<section class="slide" id="s20" data-title="Bước tiếp theo & liên hệ">
<p class="eyebrow">Kết thúc trình bày</p>
<h1 class="title">Bước tiếp theo &amp; liên hệ</h1>
<div class="content">
<ul class="bullets">
<li>Thống nhất/xác nhận HSMT hoặc yêu cầu chính thức của Bên mời thầu (hiện chưa có văn bản HSMT).</li>
<li>Xác nhận ngày khởi động dự án chính thức và các số liệu nghiệp vụ còn để ngỏ (SLA, ngưỡng hạng thành viên, ngân hàng đối tác payout).</li>
<li>Hoàn thiện hồ sơ pháp lý/năng lực còn thiếu (Phần A) song song quá trình đàm phán.</li>
<li>Thống nhất mốc thanh toán (C6) và định giá các hạng mục chi phí khác (C4).</li>
<li>Lên lịch buổi làm việc kỹ thuật chi tiết (kiến trúc, bảo mật, kế hoạch) nếu cần.</li>
</ul>
<table class="table" style="margin-top:12px;">
<tr><th>Đầu mối phụ trách hồ sơ</th><td><mark class="todo">[[CẦN ĐIỀN: chức danh, email, điện thoại]]</mark></td></tr>
</table>
</div>
</section>
</div>
</div>
<div id="navBar">
<button id="prevBtn" aria-label="Slide trước">‹</button>
<span id="counter">1 / 20</span>
<button id="nextBtn" aria-label="Slide sau">›</button>
</div>
<div id="overview"></div>
<script>
(function(){
var slides = Array.prototype.slice.call(document.querySelectorAll('.slide'));
var total = slides.length;
var current = 0;
var BIDDER_TODO = '<mark class="todo">[[CẦN ĐIỀN: Tên công ty dự thầu]]</mark>';
var PACKAGE_TODO = '<mark class="todo">[[CẦN ĐIỀN: Tên gói thầu]]</mark>';
slides.forEach(function(sec, idx){
var footer = document.createElement('div');
footer.className = 'slide-footer';
footer.innerHTML = BIDDER_TODO + '<span class="dot">·</span>' + PACKAGE_TODO +
'<span class="dot">·</span><span>Slide ' + (idx + 1) + ' / ' + total + '</span>';
sec.appendChild(footer);
var logo = document.createElement('div');
logo.className = 'slide-logo';
sec.appendChild(logo);
});
var viewport = document.getElementById('viewport');
function fitScale(){
var sw = window.innerWidth / 1280;
var sh = window.innerHeight / 720;
var s = Math.min(sw, sh);
viewport.style.transform = 'scale(' + s + ')';
}
window.addEventListener('resize', fitScale);
fitScale();
var counterEl = document.getElementById('counter');
function idOf(i){ return slides[i].id; }
function show(i, pushHash){
i = Math.max(0, Math.min(total - 1, i));
slides[current].classList.remove('active');
current = i;
slides[current].classList.add('active');
counterEl.textContent = (current + 1) + ' / ' + total;
if (pushHash !== false) { history.replaceState(null, '', '#' + idOf(current)); }
}
function goToHash(){
var h = location.hash.replace('#', '');
if (!h) return;
var idx = -1;
for (var i = 0; i < slides.length; i++){ if (slides[i].id === h){ idx = i; break; } }
if (idx >= 0) show(idx, false);
}
window.addEventListener('hashchange', goToHash);
document.getElementById('prevBtn').addEventListener('click', function(){ show(current - 1); });
document.getElementById('nextBtn').addEventListener('click', function(){ show(current + 1); });
var overviewOpen = false;
var overviewEl = document.getElementById('overview');
function toggleOverview(open){
overviewOpen = open;
if (open){
overviewEl.innerHTML = '';
slides.forEach(function(sec, idx){
var card = document.createElement('div');
card.className = 'ov-card';
var title = sec.getAttribute('data-title') || sec.id;
card.innerHTML = '<span class="ov-num">' + (idx + 1) + ' / ' + total + '</span><span class="ov-title">' + title + '</span>';
card.addEventListener('click', function(){ show(idx); toggleOverview(false); });
overviewEl.appendChild(card);
});
overviewEl.classList.add('open');
} else {
overviewEl.classList.remove('open');
}
}
document.addEventListener('keydown', function(e){
if (overviewOpen){
if (e.key === 'o' || e.key === 'O' || e.key === 'Escape'){ toggleOverview(false); }
return;
}
switch (e.key){
case 'ArrowRight': case ' ': case 'PageDown': show(current + 1); e.preventDefault(); break;
case 'ArrowLeft': case 'PageUp': show(current - 1); e.preventDefault(); break;
case 'Home': show(0); break;
case 'End': show(total - 1); break;
case 'o': case 'O': toggleOverview(true); break;
}
});
document.getElementById('stage').addEventListener('click', function(e){
if (overviewOpen) return;
if (e.target.closest('#navBar') || e.target.closest('#todoBanner')) return;
var x = e.clientX;
if (x > window.innerWidth / 2) { show(current + 1); } else { show(current - 1); }
});
if (location.search.indexOf('notes') >= 0){
document.body.classList.add('show-notes');
}
var todoCount = document.querySelectorAll('mark.todo').length;
var banner = document.getElementById('todoBanner');
if (banner){ banner.textContent = '⚠ ' + todoCount + ' mục cần điền trước khi nộp thầu'; }
goToHash();
show(current, false);
})();
</script>
<script>
(function(){
function darkPreferred(){
return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
}
function initMermaid(){
if (!window.mermaid) return;
window.mermaid.initialize({ startOnLoad: true, theme: darkPreferred() ? 'dark' : 'default', securityLevel: 'loose' });
if (window.mermaid.run) { window.mermaid.run(); }
}
if (!window.mermaid){
var s = document.createElement('script');
s.src = 'https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.1/mermaid.min.js';
s.onload = initMermaid;
document.head.appendChild(s);
} else {
initMermaid();
}
if (window.matchMedia){
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(){
initMermaid();
});
}
})();
</script>
</body>
</html>

1319
e-commerce/bid/index.html Normal file

File diff suppressed because it is too large Load Diff