/* Đảm bảo nhúng Font Awesome (dùng CDN) vào thẻ của HTML */ /* */ body { background-color: #f4f7f6; /* Nền trang nhẹ nhàng */ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 40px; display: flex; justify-content: center; max-width: 1200px; width: 90%; } /* --- Khung CV Chính (Container) --- */ .cv-container { display: flex; /* Chia thành 2 cột */ width: 800px; /* Chiều rộng cố định của CV */ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Đổ bóng sâu, nổi bật */ /* GÓC BO TRÒN: Áp dụng cho toàn bộ container */ border-radius: 15px; overflow: hidden; /* Quan trọng: Cắt các góc bo tròn của cột con */ /* HIỆU ỨNG: Transition cho box-shadow khi hover */ transition: box-shadow 0.4s ease-in-out; } /* HIỆU ỨNG TƯƠNG TÁC: Tạo hiệu ứng nhấc lên khi di chuột */ .cv-container:hover { box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); } /* --- Cột Trái (Thông tin Cá nhân) --- */ .left-column { flex: 1; /* Chiếm 1 phần */ background-color: #2c3e50; /* Màu nền đậm (Navy Blue) */ color: #ecf0f1; padding: 30px 20px; } .profile-img { width: 120px; height: 120px; border-radius: 50%; /* Ảnh tròn */ margin-bottom: 15px; border: 3px solid #f39c12; /* Viền màu nhấn */ object-fit: cover; } .name { color: #ffffff; margin-bottom: 5px; } .title { color: #bdc3c7; font-style: italic; margin-top: 0; } .left-column h3 { color: #f39c12; /* Màu nhấn cho tiêu đề cột trái */ border-bottom: 2px solid rgba(243, 156, 18, 0.5); padding-bottom: 5px; margin-top: 25px; margin-bottom: 10px; } .left-column hr { border: 0; border-top: 1px solid rgba(255, 255, 255, 0.2); margin: 20px 0; } .contact-list, .skills-list { list-style: none; padding: 0; } .contact-list li, .skills-list li { margin-bottom: 8px; font-size: 0.95em; } .contact-list i { margin-right: 8px; color: #f39c12; } /* --- Cột Phải (Nội dung CV) --- */ .right-column { flex: 2; /* Chiếm 2 phần (rộng gấp đôi cột trái) */ background-color: #ffffff; padding: 30px; } .section { margin-bottom: 30px; } .right-column h2 { color: #34495e; /* Màu tiêu đề chính */ border-bottom: 3px solid #34495e; padding-bottom: 5px; margin-bottom: 15px; font-size: 1.5em; } .right-column h2 i { margin-right: 10px; color: #34495e; } .job-item, .education-item { margin-bottom: 15px; } .job-item h3, .education-item h3 { color: #2c3e50; margin-bottom: 2px; } .period { color: #95a5a6; font-style: italic; margin-top: 2px; margin-bottom: 8px; } .job-item ul { margin-top: 8px; padding-left: 20px; }