/* 1. Thiết lập chung cho toàn bộ trang */
body {
    margin: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #2b2b2b;
    color: #d4caab;
    line-height: 1.6;
}

/* 2. Khung Section giới hạn 16:9 */
.section {
    width: 95%;
    max-width: 1400px;
    margin: 50px auto;
    
    /* Logic xử lý khoảng trống dư: */
    /* Nếu nội dung ngắn, khung tự co lại theo nội dung.
       Nếu nội dung dài, khung nở tối đa theo tỉ lệ 16:9 (1400 * 9 / 16 = 787px) */
    min-height: auto; 
    max-height: 56.25vw; /* Tỉ lệ 16:9 dựa trên chiều rộng trình duyệt */
    
    background: #1f1f1f;
    padding: 60px 80px;
    box-sizing: border-box;
    border-radius: 15px;
    overflow-y: auto; /* Hiện thanh cuộn nếu nội dung vượt quá khung 16:9 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    
    /* Căn giữa nội dung bên trong nếu khung quá cao so với chữ */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
}

/* 3. Tiêu đề */
h1 {
    text-align: center;
    margin-bottom: 40px;
    font-size: clamp(28px, 5vw, 42px);
    text-transform: uppercase;
    letter-spacing: 2px;
}

h1 span {
    color: #A3A3A3;
}

/* 4. Bố cục 3 cột */
.wrapper {
    display: flex;
    gap: 40px;
    align-items: stretch; /* Để các cột có chiều cao bằng nhau nếu có border */
}

/* Cột TRÁI */
.left {
    flex: 1.2;
}

.left h2 {
    color: #E68203;
    font-size: 24px;
    margin-bottom: 20px;
}

.left span {
    color: #fff;
    font-weight: bold;
}

.left p {
    color: #ddd;
    text-align: justify;
}

/* Cột GIỮA */
.center {
    flex: 1;
}

.center h2 {
    color: #E68203;
    font-size: 24px;
    margin-bottom: 20px;
}

.item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 20px 0;
    border-bottom: 1px solid #3d3d3d;
    padding-bottom: 12px;
}

.icon {
    font-size: 24px;
    color: #c89b6d;
    min-width: 30px;
}

/* Cột PHẢI */
.right {
    flex: 1.2;
}

.right img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo ảnh lấp đầy diện tích mà không méo */
    border-radius: 10px;
    transition: 0.3s ease;
}

.right img:hover {
    filter: brightness(1.1);
}

/* 5. Tùy chỉnh thanh cuộn bên trong khung (Scrollbar) */
.section::-webkit-scrollbar {
    width: 8px;
}

.section::-webkit-scrollbar-track {
    background: #1f1f1f;
}

.section::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 4px;
}

.section::-webkit-scrollbar-thumb:hover {
    background: #E68203;
}

/* 6. Responsive cho Mobile */
@media (max-width: 1024px) {
    .section {
        max-height: none; /* Bỏ giới hạn 16:9 trên mobile để dễ đọc */
        padding: 40px 20px;
    }
    
    .wrapper {
        flex-direction: column; /* Chuyển sang 1 cột trên điện thoại */
        gap: 30px;
    }
    
    .left, .center, .right {
        flex: none;
        width: 100%;
    }
}