/* Khởi tạo cơ bản, xóa khoảng cách thừa của trình duyệt */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    padding: 20px 0;
}

/* KHUNG BAO NGOÀI TOÀN TRANG: Định vị cố định độ rộng và căn giữa */
.container {
    width: 1000px;
    margin: 0 auto;
    border: 2px solid #000000; /* Đường viền đen bao quanh toàn hệ thống */
    background-color: #ffffff;
}

/* Định dạng chung cho chữ và căn giữa nội dung bên trong các ô */
.box {
    text-align: center;
    padding: 20px 10px;
    font-size: 18px;
    font-weight: bold;
    color: #000000;
}

/* 1. KHỐI HEAD */
.header {
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid #000000;
}

/* 2. KHỐI HEAD LINK */
.nav-links {
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid #000000;
    font-size: 16px;
}

/* KHU VỰC THÂN CHÍNH: Dùng Flexbox xếp hàng ngang cho 3 khu vực lớn (Left - Center Area - Right) */
.main-body {
    display: flex;
    width: 100%;
    min-height: 400px; /* Chiều cao tối thiểu để giữ dáng layout */
}

/* 3. CỘT LEFT: Chiếm 20% độ rộng */
.sidebar-left {
    width: 20%;
    border-right: 2px solid #000000;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* KHU VỰC TRUNG TÂM: Rộng 50%, xếp chồng các khối Content theo chiều dọc */
.center-area {
    width: 50%;
    display: flex;
    flex-direction: column;
    border-right: 2px solid #000000;
}

/* 4. KHỐI CONTENT TRÊN */
.content-top {
    flex: 1; /* Tự động lấp đầy khoảng trống phía trên */
    border-bottom: 2px solid #000000; /* Đường viền đen cắt ngang phân đôi content */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 5. KHỐI CONTENT DƯỚI */
.content-bottom {
    height: 120px; /* Khống chế chiều cao cho khối content nhỏ bên dưới */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 6. CỘT RIGHT: Chiếm 30% độ rộng còn lại */
.sidebar-right {
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 7. KHỐI FOOTER DƯỚI ĐÁY */
.footer {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 2px solid #000000;
}