hoanghapc_nextJs/src/components/buildpc/Content.tsx

'use client';

import { useState, useEffect, useRef } from "react";

export default function Content() {
    const contentRef = useRef<HTMLDivElement>(null);
    const containerRef = useRef<HTMLDivElement>(null);

    const [isOverflow, setIsOverflow] = useState(false);
    const [expanded, setExpanded] = useState(false);

    useEffect(() => {
        if (contentRef.current) {
            if (contentRef.current.scrollHeight > 700) {
                setIsOverflow(true);
            }
        }
    }, []);

    const handleCollapse = () => {
        setExpanded(false);

        containerRef.current?.scrollIntoView({
            behavior: 'smooth',
            block: 'start',
        });
    };

    return (
        <div 
            ref={containerRef}
            className="bg-white js-static-container static-container py-12">
            <div 
                ref={contentRef}
                className={`js-static-content static-content text-16 leading-[22px] buildpc-static-content
                    ${!expanded && isOverflow ? 'max-h-[700px] overflow-hidden' : ''}
                `}>
                <div>
                    <p>Trong thời đại công nghệ bùng nổ, máy tính đã trở thành công cụ không thể thiếu trong học tập, làm việc và giải trí. Nếu như trước đây người dùng thường chọn mua sẵn các dòng máy đồng bộ, thì ngày nay, xu hướng&nbsp;" <strong><a href="https://hoanghapc.vn/buildpc">Build PC"</a> - tự xây dựng cấu hình máy tính </strong>lại đang được ưa chuộng mạnh mẽ.</p><p>Vậy&nbsp;<strong>Build PC là gì?</strong> Vì sao ngày càng nhiều người chọn tự lắp ráp thay vì mua sẵn? Và làm thế nào để&nbsp;<strong>xây dựng cấu hình máy tính phù hợp với nhu cầu</strong> mà vẫn tiết kiệm chi phí tối đa?</p><p>Bài viết này sẽ giúp bạn hiểu rõ&nbsp;<strong>toàn bộ quy trình build PC từ A - Z</strong> , đồng thời giới thiệu đến bạn&nbsp;<strong>công cụ&nbsp;"Xây dựng cấu hình"&nbsp;</strong>thông minh tại<strong>Hoàng Hà PC</strong> -&nbsp;nơi hàng nghìn khách hàng đã lựa chọn để tạo nên bộ máy “chuẩn hiệu năng, đúng nhu cầu, đúng giá”.</p><h2><strong>I. Build PC là gì?</strong></h2><p>Hiểu một cách đơn giản,&nbsp;Build PC&nbsp;là việc bạn&nbsp;tự chọn từng linh kiện phần cứng&nbsp;để lắp ráp thành một bộ máy tính hoàn chỉnh.</p><p>Thay vì mua một chiếc PC đồng bộ được hãng sản xuất sẵn (với cấu hình cố định), người dùng&nbsp;chủ động lựa chọn CPU, mainboard, RAM, VGA, SSD, nguồn, vỏ case…&nbsp;theo nhu cầu và ngân sách của riêng mình.</p><p>Điểm đặc biệt của việc Build PC nằm ở&nbsp;sự linh hoạt và cá nhân hóa. Mỗi người có một mục đích sử dụng khác nhau: học sinh cần máy ổn định, tiết kiệm; designer cần đồ họa mạnh; game thủ cần FPS cao; kỹ sư cần hiệu năng render vượt trội. Build PC cho phép bạn&nbsp;tạo ra cấu hình chính xác nhất cho từng nhu cầu ấy.</p><p><img alt="title"height={667} src="https://hoanghapccdn.com/media/lib/30-10-2025/build-pc-2-min.jpg" width={1000} /></p><h3>So sánh Build PC và Mua PC đồng bộ</h3><table border={1}><thead><tr><th>Tiêu chí</th><th>Build PC</th><th>PC đồng bộ</th></tr></thead><tbody><tr><td><strong>Tùy biến cấu hình</strong></td><td>Rất linh hoạt - chọn linh kiện theo ý muốn</td><td>Giới hạn theo nhà sản xuất</td></tr><tr><td><strong>Giá thành</strong></td><td>Tối ưu hơn, có thể tự cân đối ngân sách</td><td>Thường cao hơn do chi phí thương hiệu</td></tr><tr><td><strong>Bảo hành</strong></td><td>Riêng từng linh kiện, dễ thay thế</td><td>Theo máy, khó nâng cấp</td></tr><tr><td><strong>Trải nghiệm</strong></td><td>Cá nhân hóa, độc đáo</td><td>Cố định, ít tùy chỉnh</td></tr></tbody></table><p>Vì vậy, Build PC không chỉ là cách “mua máy tính thông minh hơn”, mà còn thể hiện&nbsp;<strong>gu công nghệ và sự am hiểu phần cứng</strong> của người dùng.</p><h2><strong>II. Các linh kiện quan trọng khi Build PC</strong></h2><p>Để build được một bộ máy tính mạnh mẽ, bạn cần nắm rõ vai trò của từng linh kiện.</p><h3><strong>1. CPU - Bộ não của máy tính</strong></h3><p>CPU hay còn gọi là bộ vi xử lý trung tâm, được ví như “bộ não” của máy tính, chịu trách nhiệm xử lý mọi tác vụ - từ những công việc cơ bản như lướt web, soạn thảo văn bản cho đến các nhiệm vụ phức tạp như dựng hình 3D, render video, hay phân tích dữ liệu lớn. Chính vì vậy, khi build PC, việc lựa chọn CPU phù hợp đóng vai trò cực kỳ quan trọng để đảm bảo hệ thống hoạt động ổn định, mạnh mẽ và hiệu quả nhất.</p>
                    <table border={1}><thead><tr><th><strong>Yếu tố</strong></th><th><strong>Mô tả</strong></th></tr></thead><tbody><tr><td><strong>GPU (Graphics Processing Unit)</strong></td><td>Bộ xử lý đồ họa, đảm nhận nhiệm vụ xử lý hình ảnh, video, game và các tác vụ liên quan đến hiển thị. Đây là thành phần quyết định sức mạnh đồ họa của máy tính.</td></tr><tr><td><strong>VRAM (Video RAM)</strong></td><td>Bộ nhớ chuyên dụng của GPU, dùng để lưu trữ dữ liệu hình ảnh và texture trong quá trình xử lý. Dung lượng VRAM càng lớn, trải nghiệm chơi game và làm đồ họa ở độ phân giải cao càng mượt mà.</td></tr><tr><td><strong>Xung nhịp GPU</strong></td><td>Thể hiện tốc độ hoạt động của GPU, tính bằng MHz hoặc GHz. Xung nhịp càng cao thì khả năng xử lý khung hình và hiệu suất tổng thể của card đồ họa càng mạnh.</td></tr><tr><td><strong>Số nhân CUDA (NVIDIA) / Stream Processors (AMD)</strong></td><td>Các lõi xử lý song song bên trong GPU, chịu trách nhiệm thực hiện các phép tính đồ họa phức tạp. Số lượng lõi càng nhiều, hiệu năng xử lý hình ảnh và tính toán càng tốt.</td></tr><tr><td><strong>Hỗ trợ công nghệ</strong></td><td>Các công nghệ tích hợp như Ray Tracing, DLSS (NVIDIA) hoặc FSR (AMD) giúp cải thiện chất lượng hình ảnh, tăng tốc độ khung hình và tối ưu trải nghiệm game.</td></tr><tr><td><strong>Băng thông bộ nhớ</strong></td><td>Thể hiện tốc độ trao đổi dữ liệu giữa GPU và VRAM, tính bằng GB/s. Băng thông càng cao thì khả năng xử lý đồ họa nặng, đặc biệt ở độ phân giải 4K, càng hiệu quả.</td></tr><tr><td><strong>TDP (Thermal Design Power)</strong></td><td>Công suất nhiệt mà GPU tiêu thụ (đơn vị: Watt). Thông số này ảnh hưởng trực tiếp đến khả năng tản nhiệt của hệ thống và yêu cầu công suất nguồn điện (PSU) tương ứng.</td></tr></tbody></table><p><img alt="title"height={562} src="https://hoanghapccdn.com/media/lib/30-10-2025/cpu-may-tinh-min.jpg" width={1000} /></p><p>Khi chọn CPU, người dùng nên chú ý đến ba yếu tố chính: số lõi (core), số luồng (thread) và xung nhịp (clock speed). Trong đó:</p><ul><li>Số lõi và số luồng quyết định khả năng xử lý đa nhiệm cũng như hiệu suất trong các ứng dụng nặng như render, thiết kế hay lập trình.</li><li>Xung nhịp lại ảnh hưởng trực tiếp đến hiệu năng đơn nhân, phù hợp hơn cho chơi game hoặc các tác vụ nhẹ.</li></ul><p>Hiện nay, thị trường CPU chủ yếu được chi phối bởi hai “ông lớn” là Intel và AMD.</p><ul><li>Nếu mục tiêu của bạn là chơi game, hãy ưu tiên các dòng Intel Core i5/i7 hoặc AMD Ryzen 5/7 để đạt được mức hiệu năng - giá thành hợp lý.</li><li>Còn nếu bạn làm render, edit video hoặc thiết kế đồ họa 3D chuyên sâu, nên chọn các CPU cao cấp như Ryzen 9 hoặc Intel Core i9. CPU càng mạnh, khả năng xử lý tác vụ càng nhanh và mượt mà, giúp tiết kiệm đáng kể thời gian làm việc.</li></ul><h3><strong>2. Mainboard - Bo mạch chủ</strong></h3><p>Nếu CPU được ví như “bộ não” của máy tính, thì mainboard (bo mạch chủ) chính là “khung xương” của toàn hệ thống. Bo mạch chủ có nhiệm vụ kết nối và phối hợp hoạt động giữa các linh kiện như CPU, RAM, GPU, ổ cứng,… để tạo nên một hệ thống vận hành thống nhất và ổn định.</p><table border={1}><thead><tr><th><strong>Yếu tố</strong></th><th><strong>Mô tả</strong></th></tr></thead><tbody><tr><td><strong>Socket</strong></td><td>Khe cắm dành cho CPU, quyết định loại vi xử lý có thể tương thích với ma
                </div>
            </div>

            {isOverflow && (
                <div className="static-btn mt-4 flex justify-center">
                    {!expanded ? (
                        <button onClick={() => setExpanded(true)}>
                            Xem thêm <i className="bx bx-chevron-down" />
                        </button>
                    ) : (
                        <button onClick={handleCollapse}>
                            Thu gọn <i className="bx bx-chevron-up" />
                        </button>
                    )}
                </div>
            )}
        </div>
    )
}