/* =========================================
   1. CẤU HÌNH CHUNG (RESET & TYPOGRAPHY)
========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}

body {
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 15px;      /* THỐNG NHẤT FONT-SIZE CHO TOÀN BỘ NỘI DUNG */
    line-height: 1.15;    /* THỐNG NHẤT LINE-HEIGHT CHO TOÀN BỘ NỘI DUNG */
    color: #000; 
    background-color: #fff; 
}

/* Định dạng Link chuẩn Academic cho phần nội dung */
a {
    color: #0000EE; 
    text-decoration: none; 
}

a:hover {
    color: #003399; 
    text-decoration: underline; 
}

img {
    max-width: 100%; 
    height: auto; 
    display: block;
}

/* =========================================
   2. BỐ CỤC CHÍNH (LAYOUT 2 CỘT)
========================================= */
.wrapper {
    display: flex; 
    min-height: 100vh; 
}

/* =========================================
   3. CỘT TRÁI (SIDEBAR MENU)
========================================= */
.sidebar {
    width: 300px; 
    padding: 40px; 
    position: sticky; 
    top: 0;
    height: 100vh; 
    border-right: 1px solid #ddd; 
    background-color: #f5f5f5 !important; 
    z-index: 100;
}

.sidebar-avatar img {
    width: 120px;
    height: 120px;
    border-radius: 50%; 
    object-fit: cover;
    margin-bottom: 20px;
    display: block;     
    margin-left: auto;
    margin-right: auto;
}

.site-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 40px; 
    letter-spacing: 1px; 
    text-transform: uppercase; 
    text-align: center; 
}

/* Bảo vệ link tiêu đề không bị xanh */
.site-title a {
    color: #000 !important;
    text-decoration: none !important;
}

.nav-menu ul {
    list-style: none; 
}

.nav-menu li {
    margin-bottom: 12px; 
}

.nav-menu a {
    color: #666 !important; /* Bảo vệ link menu */
    text-decoration: none !important;
}

.nav-menu a:hover,
.nav-menu a.active-menu {
    color: #000 !important;
    text-decoration: underline !important;
}

.sidebar-footer {
    position: absolute; 
    bottom: 40px; 
    left: 40px; 
    
    /* --- 3 DÒNG MỚI BỔ SUNG --- */
    right: 40px;             /* Chốt chặn lề phải, ép chữ phải rớt dòng */
    text-align: left;     /* Căn đều 2 bên trái phải */
    font-size: 10px;         /* Thu nhỏ chữ lại một chút cho hợp với phần disclaimer */
    
    color: #999;
    line-height: 1.4;
}

/* =========================================
   4. CỘT PHẢI (NỘI DUNG CHÍNH)
========================================= */
.content {
    flex: 1; 
    padding: 50px 40px; 
    max-width: 1100px; 
    margin: 0 auto;   
}

/* --- ẢNH BÌA & CAPTION --- */
.hero-image img {
    width: 100%;
    height: 400px;        
    object-fit: cover;     
    object-position: center 30%; 
}

.caption {
    font-style: italic; 
    color: #777;
    margin-top: 10px;
    text-align: center;        
    display: block;            
    margin-bottom: 0;  
}

p.caption + p.caption {
    margin-top: 5px; 
}

.caption-divider::after {
    content: ""; 
    display: block;
    width: 60px; 
    height: 1px; 
    background-color: #777; 
    margin: 15px auto 0; 
}

.section {
    margin-bottom: 20px; /* Đặt một khoảng cách cố định dưới mỗi khu vực */
}

.section-title {
    font-size: 22px;
    font-weight: bold; /* In đậm chữ giống hình của bạn */
    text-transform: uppercase; /* Tự động viết hoa toàn bộ */
    
    /* QUAN TRỌNG: Xóa margin-top để không bị cộng dồn khoảng trống */
    margin-top: 0; 
    
    margin-bottom: 20px; /* Khoảng cách từ đường kẻ xuống nội dung */
    border-bottom: 1px solid #000; 
    padding-bottom: 10px; /* Khoảng cách từ chữ xuống đường kẻ */
}

/* =========================================
   5. CÁC THÀNH PHẦN NỘI DUNG (SECTIONS)
========================================= */

/* --- INTRODUCTION --- */
.intro-title {
    border-top: none;  
    border-bottom: 1px solid #000; 
    padding-bottom: 15px; 
    margin-bottom: 20px;
    font-size: 22px;
    text-transform: uppercase; 
    font-weight: normal;        
}

.intro-container {
    display: flex;            
    align-items: flex-start; 
}

.intro-avatar {
    flex: 0 0 auto; 
    margin-right: 40px; 
}

.intro-avatar img {
    width: 200px;            
    height: 200px;            
    border-radius: 50%;      
    object-fit: cover;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
}

.intro-content {
    flex: 2;                 
}

.intro-content p {
    margin-bottom: 4px; 
}

/* --- BIOGRAPHY & CONNECT --- */
.bio-container {
    display: flex;            
    gap: 40px;
    align-items: stretch; 
    margin-top: 30px; 
}

.bio-left-content,
.bio-right-connect {
    display: flex;
    flex-direction: column;
    padding-top: 0 !important; 
}

.bio-left-content {
    flex: 3; 
    text-align: justify; 
}

.bio-left-content p {
    margin-bottom: 20px;
}

.bio-right-connect {
    flex: 1; 
    border-left: 1px solid #ddd; 
    padding-left: 30px;        
}

.bio-heading {
    font-size: 22px; 
    font-weight: normal; 
    color: #000;
    margin-top: 0 !important;  
    margin-bottom: 20px;       
    padding-bottom: 10px;      
    border-bottom: 1px solid #000; 
    text-transform: none; 
}

.social-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    color: #333;
    text-decoration: none;
    transition: 0.2s;
}

.social-item i {
    width: 25px;
    font-size: 18px; /* Giữ icon to hơn text 1 chút để dễ nhìn */
}

.social-item:hover {
    color: #000;
    text-decoration: underline;
}

/* --- EDUCATION --- */
.edu-item {
    display: flex;              
    justify-content: space-between; 
    align-items: flex-start;    
    margin-bottom: 20px;        
}

.edu-info {
    flex: 1;                    
    padding-right: 20px;        
}

.edu-info h4 {
    font-size: 17px; /* Tiêu đề ngành học lớn hơn nội dung */
    margin-bottom: 5px;
    color: #000;
}

.edu-school {
    font-style: italic;
    color: #555;
    margin-bottom: 5px;
}

.edu-desc {
    color: #444;
    margin-bottom: 2px;
}

.edu-date {
    flex: 0 0 auto;             
    text-align: right;          
    font-weight: bold;          
    color: #333;
    white-space: nowrap;        
}

/* --- PUBLICATIONS & COMPETITIONS --- */
.pub-item-modern {
    display: flex;          
    gap: 15px;              
    margin-bottom: 30px;    
    align-items: flex-start; 
}

.pub-number-box {
    flex: 0 0 30px;         
    font-weight: bold;
    color: #0000EE !important;         
    font-size: 20px; /* Số thứ tự cần nổi bật */     
    padding-top: 0;         
    text-align: right;      
}

.pub-content-box {
    flex: 1;                
}

.pub-title a[href], 
.award-title a[href] {
    color: #0000EE !important; 
}

.pub-title a[href]:hover, 
.award-title a[href]:hover {
    color: #003399 !important;
    text-decoration: underline !important;
}

.pub-authors, .pub-venue {
    color: #333;
    margin-bottom: 5px;
}

.highlight-red {
    color: #d93025;
    font-weight: bold;
    font-style: italic;
}

/* NÚT BẤM (SQUARE BUTTONS) */
.pub-buttons-group {
    margin-top: 8px;
    display: flex;
    gap: 10px;
}

.btn-square {
    display: inline-block;
    padding: 3px 10px;          
    border: 1px solid #333;     
    color: #333 !important;
    text-decoration: none !important;
    font-weight: 500;
    transition: all 0.2s ease;
    background-color: transparent;
}

.btn-square:hover {
    background-color: #333;     
    color: #fff !important;                
    border-color: #333;
}

/* --- AWARDS & CERTIFICATIONS --- */
.awards-layout {
    display: block !important;
}

.awards-list {
    width: 100% !important; 
}

.award-item {
    display: flex;
    gap: 15px;               
    margin-bottom: 30px;
    align-items: baseline;   
}

.award-number-box {
    flex: 0 0 30px;
    font-weight: bold;
    color: #2a7bbd;
    font-size: 18px; /* Đồng bộ số thứ tự */
    text-align: right;
    padding-top: 0; 
}

.award-content-box {
    flex: 1;
}

.award-title {
    font-size: 18px; 
    font-weight: bold;
    color: #000;
    margin-top: 0 !important; 
    margin-bottom: 5px;
}

.award-desc {
    color: #333;
    margin-bottom: 5px;
    text-align: justify;
}

.award-date {
    font-style: italic;
    color: #666;
}

.awards-gallery {
    flex: 1; 
    border-left: 1px solid #eee; 
    padding-left: 30px;
}

.gallery-item {
    margin-bottom: 30px; 
}

.gallery-item img {
    width: 100%;        
    border-radius: 4px; 
    border: 1px solid #ddd; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
}

.gallery-caption {
    font-style: italic;
    color: #777;
    text-align: center; 
    margin-top: 8px;
}

/* --- NEWS SECTION --- */
.news-list {
    list-style-type: disc; 
    margin-left: 20px;     
    padding-left: 0;
}

.news-list li {
    margin-bottom: 6px;    
}

/* =========================================
   6. RESPONSIVE (MOBILE VIEW)
========================================= */
@media (max-width: 900px) {
    .awards-layout {
        flex-direction: column; 
    }
    .awards-gallery {
        width: 100%;
        border-left: none;
        padding-left: 0;
        margin-top: 40px;
        border-top: 1px solid #eee; 
        padding-top: 20px;
    }
}

@media (max-width: 768px) {
    .wrapper {
        flex-direction: column; 
    }
    .sidebar {
        width: 100%; 
        height: auto; 
        position: relative; 
        border-right: none;
        border-bottom: 1px solid #eee;
        padding: 20px;
        text-align: center; 
    }
    .sidebar-footer {
        position: relative;
        bottom: 0;
        left: 0;
        margin-top: 20px;
    }
    .content {
        padding: 30px 20px; 
    }
    .intro-container {
        flex-direction: column; 
        align-items: center;    
    }
    .intro-avatar {
        margin-right: 0;
        margin-bottom: 30px;    
    }
    .intro-content {
        text-align: center; 
    }
    .bio-container {
        flex-direction: column;
    }
    .bio-right-connect {
        border-left: none;
        border-top: 1px solid #ddd;
        padding-left: 0;
        padding-top: 20px;
        margin-top: 20px;
    }
    .edu-item {
        flex-direction: column; 
    }
    .edu-date {
        text-align: left;
        margin-top: 5px;
        font-style: italic;
    }
}

/* 1. Tăng khoảng cách giữa các khu vực (section) lên 70px hoặc 80px cho thoáng */
.section {
    margin-top: 0 !important;
    margin-bottom: 30px !important; /* Bạn có thể tăng lên 80px nếu thích rộng hơn nữa */
}

/* 2. Xóa khoảng trống thừa ở mục Education/Industry cuối cùng để lề chuẩn xác 100% */
.edu-item:last-child {
    margin-bottom: 0 !important;
}
/* =========================================
   CĂN CHỈNH KHOẢNG CÁCH CHI TIẾT BÀI BÁO CHUẨN XÁC
========================================= */

/* 1. Tiêu đề bài báo */
.pub-title {
    margin-top: 0 !important;
    margin-bottom: 6px !important; /* Khoảng cách cố định từ Tiêu đề xuống Tác giả */
    line-height: 1.3 !important;   /* Giãn dòng một chút cho các tiêu đề dài (xuống dòng) dễ đọc hơn */
}

/* 2. Tên tác giả, DOI, và Thông tin hội nghị (Venue) */
.pub-authors, 
.pub-venue {
    margin-top: 0 !important;
    margin-bottom: 4px !important; /* Khoảng cách đều đặn giữa các dòng thông tin với nhau */
    line-height: 1.4 !important;   /* Giãn dòng bên trong đoạn văn dài (nếu hội nghị dài quá 1 dòng) */
}

/* 3. Xóa khoảng trống thừa ở dòng cuối cùng của mỗi bài báo */
.pub-content-box > div:last-child,
.pub-venue:last-child {
    margin-bottom: 0 !important;
}

/* =========================================
   GIAO DIỆN TRANG RESEARCH (MẪU 2 CỘT: ẢNH TRÁI - CHỮ PHẢI)
========================================= */

/* Đoạn giới thiệu tổng quan ở đầu trang */
.research-intro {
    margin-bottom: 50px;
    text-align: justify;
    line-height: 1.5;
    color: #333;
}

/* Khung chứa từng dự án */
.research-project {
    display: flex;
    gap: 30px;              /* Khoảng cách giữa cột ảnh và cột chữ */
    margin-bottom: 50px;    /* Khoảng cách giữa các dự án */
    align-items: flex-start; /* Ép nội dung căn thẳng từ trên cùng xuống */
}

/* CỘT TRÁI: KHU VỰC ẢNH */
.research-project-img {
    flex: 0 0 300px;        /* Cố định chiều rộng cột ảnh là 300px (bạn có thể tăng giảm tùy ý) */
}

.research-project-img img {
    width: 100%;            /* Ảnh tự động co giãn vừa vặn với cột 300px */
    height: auto;
    border-radius: 4px;     /* Bo góc ảnh cực nhẹ cho thanh lịch */
    border: 1px solid #eee; /* Viền mờ mờ quanh ảnh */
}

/* CỘT PHẢI: KHU VỰC NỘI DUNG */
.research-project-content {
    flex: 1;                /* Chiếm toàn bộ phần diện tích còn lại bên phải */
}

.research-project-title {
    font-size: 18px;
    font-weight: bold;
    color: #4a7298;         /* Màu xanh lam nhạt y hệt trong hình mẫu của bạn */
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    border-bottom: none;
}

.research-project-desc {
    text-align: justify;
    line-height: 1.5;
    color: #333;
}

/* Định dạng các thẻ link [AAAI21a], [KDD21] trong đoạn văn */
.research-project-desc a {
    color: #555;
    text-decoration: underline;
}

.research-project-desc a:hover {
    color: #000;
}

/* --- RESPONSIVE MOBILE --- */
/* Khi màn hình nhỏ (điện thoại), tự động chuyển về 1 cột (Ảnh trên - Chữ dưới) */
@media (max-width: 768px) {
    .research-project {
        flex-direction: column;
        gap: 15px;
    }
    .research-project-img {
        flex: 1 1 auto;
        width: 100%;
        max-width: 400px;  /* Khống chế không cho ảnh phình quá to trên mobile */
        margin: 0 auto;    /* Căn giữa ảnh */
    }
}

/* --- GẠCH ĐẦU DÒNG CHO TRANG RESEARCH --- */
.research-bullet-list {
    list-style-type: disc; /* Dấu chấm tròn đen */
    margin-left: 20px;     /* Thụt lề vào 20px cho đẹp */
    padding-left: 0;
    margin-top: 5px;       /* Cách đoạn văn mở bài một chút */
    margin-bottom: 15px;   /* Cách phần tử bên dưới */
}

.research-bullet-list li {
    color: #333;
    line-height: 1.5;
    margin-bottom: 8px;    /* Khoảng cách giữa các ý */
    text-align: justify;   /* Vẫn căn đều 2 bên cho chữ */
}

/* Đổi màu chữ in đậm trong gạch đầu dòng (nếu có) */
.research-bullet-list li b {
    color: #000;
}

/* =========================================
   ĐOẠN VĂN MỞ ĐẦU TRANG (PAGE INTRO)
========================================= */
.page-intro {
    font-size: 15px;
    line-height: 1.6;
    color: #444;            /* Màu xám đen dễ chịu cho mắt */
    text-align: justify;    /* Căn đều 2 bên chuẩn academic */
    margin-bottom: 20px;    /* Đẩy Section bên dưới lùi ra xa 40px */
}

/* (Tùy chọn) Thêm một đường kẻ đứt mờ mờ để ngăn cách intro và nội dung chính */
.page-intro-divider {
    border-bottom: 1px dashed #ccc; 
    padding-bottom: 20px;
}

/* =========================================
   GIAO DIỆN TRANG TEACHING (GIẢNG DẠY)
========================================= */

.teaching-item {
    margin-bottom: 45px; /* Khoảng cách giữa các môn học */
}

/* 1. Tên môn học */
.teaching-title {
    font-size: 18px !important; /* Kích thước chuẩn Cấp 2, bằng với trang Research */
    font-weight: bold;
    color: #4a7298;             /* Màu xanh xám thanh lịch y hệt hình mẫu */
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

/* 2. Năm giảng dạy (In nghiêng) */
.teaching-year {
    font-size: 15px;
    font-style: italic;
    color: #555;                /* Chữ màu xám để phân cấp thông tin */
    margin-top: 0;
    margin-bottom: 5px !important;
}

/* 3. Đoạn văn mô tả môn học */
.teaching-desc {
    font-size: 15px;
    line-height: 1.6;           /* Giãn dòng rộng dễ đọc */
    color: #333;
    text-align: justify;        /* Căn đều hai bên vuông vức */
    margin-top: 3 !important;
}