/* Khởi tạo cơ bản, triệt tiêu 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: #f5f5f5;
    padding: 20px 0;
}

/* KHUNG BAO NGOÀI TOÀN WEB: Rộng đúng 1000px và căn giữa màn hình */
.container {
    width: 1000px;
    margin: 0 auto;
    border: 1px solid #999; /* Viền mờ bọc ngoài giống mẫu */
    background-color: #ffffff;
}

/* Định dạng chung cho văn bản bên trong các khối */
.box {
    text-align: center;
    padding: 20px 10px;
    font-size: 18px;
    font-weight: bold;
    color: #000000;
}

/* 1. KHỐI HEAD (Màu xám vừa) */
.header {
    background-color: #c0c0c0;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #999;
}

/* 2. KHỐI HEAD LINK (Màu xám trắng / nhạt) */
.nav-links {
    background-color: #f0f0f0;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #999;
    font-size: 16px;
}

/* KHU VỰC THÂN CHÍNH: Dùng Flexbox để xếp Left - Content - Right nằm ngang */
.main-body {
    display: flex;
    width: 100%;
    /* Chiều cao tối thiểu cho phần thân để layout không bị xẹp */
    min-height: 450px; 
}

/* 3. KHỐI LEFT: Chiếm 20% độ rộng (200px) - Màu xanh cyan nhạt */
.sidebar-left {
    width: 20%;
    background-color: #00ffff;
    border-right: 1px solid #999;
}

/* 4. KHỐI CONTENT: Chiếm 45% độ rộng (450px) - Màu trắng thuần */
.content-center {
    width: 45%;
    background-color: #ffffff;
    border-right: 1px solid #999;
    padding-top: 20px;
}

/* 5. KHỐI RIGHT: Chiếm 35% độ rộng (350px) - Màu xanh lá cây rực rỡ */
.sidebar-right {
    width: 35%;
    background-color: #00ff00;
}

/* 6. KHỐI FOOTER (Màu xám đậm dưới đáy) */
.footer {
    background-color: #808080;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #999;
}