/* === Theme variables ========================================= */
:root{
  --bg:#fff;           /* site background */
  --fg:#111;              /* base text */
  --muted:#111;        /* secondary text */
  --link:#0a66c2;         /* default link color (content area) */

  --card:#fbfcff;         /* sidebar card bg */
  --line:#eef2f7;         /* thin borders */
  --hover:#f2f6ff;        /* hover row bg */
  --paper:#6f42c1;        /* tiny paper icon color */

  --accent:#0a66c2;       /* active nav underline */

  --year:#111;         /* section/year heading color */
  --social-text:#A8BBA3;  /* sidebar social label color */

  --pending:#77BEF0;      /* pending label color */
  --pending-bg:#fffaf5;   /* very light background */
}

/* === Base ===================================================== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--fg);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  letter-spacing:.2px;
}
a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}

/* === Top nav: centered, UPPERCASE, bold ======================= */
.topnav{
  padding:14px 20px; border-bottom:1px solid var(--line); background:#fafafa;
  display:flex; justify-content:center; gap:28px; flex-wrap:wrap;
}
.topnav a{
  color:var(--fg);
  text-transform:uppercase;
  font-weight:700;
  letter-spacing:.4px;
}
.topnav a.active{
  color:var(--accent);
  border-bottom:2px solid var(--accent);
  padding-bottom:2px;
}

/* === Layout (flex, sidebar not be long) ===================== */
.layout{
  max-width:1100px; margin:24px auto;
  display:flex; gap:28px; align-items:flex-start;
  padding:0 20px;
}
@media (max-width:820px){ .layout{flex-direction:column} }


/* === Sidebar =================================================== */
.sidebar{
  flex:0 0 280px;
  width:280px;
  min-width:280px;
  max-width:280px;
  align-self:flex-start;
  overflow-wrap:break-word;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:20px;
  height:auto;
  box-shadow:0 2px 8px rgba(16,24,40,.05);
}

.content p {
  text-align: justify !important; /*justify*/
  text-justify: inter-word;
  margin-bottom: 1em;
  text-indent: 0;   /* no space */
}



.avatar{
  width:200px; height:200px; border-radius:10%; object-fit:cover;
  display:block; margin:0 auto 12px; background:#ddd; border:3px solid #fff;
  box-shadow:0 2px 6px rgba(0,0,0,.12), 0 0 0 3px #fff, 0 0 0 5px rgba(10,102,194,.12);
}
.name{font-size:20px; font-weight:800; text-align:center; margin:6px 0 6px}

/* Mobile version: sidebar full width */
@media (max-width: 820px){
  .sidebar{
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

.social-list{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;          /* spacing of icon */
  padding:0;
  margin:10px 0 0;
  list-style:none;
}
.social-list li{ margin:0; padding:0; }

.social-list a.icon{
  width:50px; height:50px; /* icon size */
  display:block;
  background-size:contain;
  background-repeat:no-repeat;
}

.subtitle{
  text-align:center;
  font-size:16px;
  font-weight:700;     /* bold */
  margin:2px 0 14px;
  color:var(--fg);
}


/* Icons (SVG data-URI) */
.icon{width:50px;height:50px;display:inline-block;background-size:contain;background-repeat:no-repeat}
.icon.scholar{background-image:url('data:image/svg+xml;utf8,<svg fill="%234285F4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 3 1 8l11 5 9-4.09V17h2V8L12 3Zm-5 9.73V15c0 2.21 2.91 4 5 4s5-1.79 5-4v-2.27l-5 2.27-5-2.27Z"/></svg>');}
.icon.linkedin{background-image:url('data:image/svg+xml;utf8,<svg fill="%230A66C2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.94 7.5A1.94 1.94 0 1 1 7 3.62 1.94 1.94 0 0 1 6.94 7.5ZM4.5 9h5v12h-5V9Zm7.5 0h4.8v1.64h.07c.67-1.2 2.3-1.96 3.9-1.96 4.17 0 4.93 2.3 4.93 5.29V21H20v-6c0-1.43-.03-3.26-1.99-3.26-1.99 0-2.29 1.55-2.29 3.15V21h-4.72V9Z"/></svg>');}
.icon.github{background-image:url('data:image/svg+xml;utf8,<svg fill="%2324292e" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 0-3.16 19.49c.5.09.68-.22.68-.48v-1.7c-2.77.6-3.36-1.17-3.36-1.17-.46-1.17-1.12-1.48-1.12-1.48-.92-.64.07-.63.07-.63 1.02.07 1.56 1.06 1.56 1.06 .9 1.55 2.37 1.1 2.95.84.09-.66.35-1.1.63-1.36-2.22-.25-4.55-1.12-4.55-5 0-1.1.39-2 .1-2.7 0 0 .84-.27 2.75 1.02A9.6 9.6 0 0 1 12 7.07a9.6 9.6 0 0 1 2.78.38c1.9-1.29 2.74-1.02 2.74-1.02.29.7.1 1.6.05 2.7 0 3.9-2.33 4.75-4.56 5 .36.31.67.92.67 1.86v2.76c0 .26.18.58.69.48A10 10 0 0 0 12 2Z"/></svg>');}

/* === Headings in content ===================================== */
.content h1,
.content h2{
  font-size:22px;
  margin-top:28px;
  color:var(--year);                 
  border-left:0;
  padding-left:0px;
  font-weight:800
}

/* === Publications ============================================ */
.pub-list{list-style:none; padding:0; margin:0}
.pub{
  margin-bottom:14px; padding:12px 14px;
  border:1px solid var(--line); border-radius:12px;
  background:#fff; box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.title{ display:block; font-weight:700; font-size:18px; margin-bottom:4px; line-height:1.3 }
.title a{ color:#111; font-weight:700; text-decoration:none }
.title a:hover{ text-decoration:underline }
.paper-link{ display:inline-block; margin-left:6px; width:18px; height:18px; vertical-align:baseline }
.paper-link svg{ width:18px; height:18px; display:block }
.paper-link svg path {
  fill: var(--year);   
}
.paper-link .paper { fill: var(--year); }   /* icon paper = year color*/
.authors{color:#333; font-size:15px}
.venue{color:#555; font-style:italic; font-size:15px}
.meta{color:#666; font-size:14px}
.badge{ display:inline-block; padding:2px 6px; font-size:12px; font-weight:700; border-radius:6px; background:#e7f1ff; color:#0a58ca; margin-right:6px; }

/* Pending box (bottom) */
.pending-card{
  margin-top:32px; border:1px solid var(--line); border-radius:12px;
  background:#fff; padding:16px; box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.pending-card h3{
  margin:0 0 10px; font-size:18px; font-weight:700;
  color:var(--pending); border-left:4px solid var(--pending); padding-left:8px;
}

/* === Timeline (Education on Home) ============================ */
.timeline{
  border-left:none;
  margin-left:0;
  padding-left:0px;   
}


.timeline-item{
  margin-bottom:22px;
}

.education-flat{
  list-style: none;
  margin: 0;
  padding: 0;
}
.education-flat li{
  margin: 10px 0;
  font-size: 15px;
}
.education-flat li strong{
  display: inline;
  margin-right: 8px;    
  font-weight: 700;
  color: #000;
}



.timeline-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#111;
  flex-shrink:0;
  transform:translateY(1px); 
}


/* First-author underline */
.me{ text-decoration: underline; }
/* "Authors:" (non bold) */
.authors-label{ font-weight:400; }

/* Years in lists (Experience/Service) keep black & bold */
.content ul li strong{ color:#000 }

.email-address {
  text-align: center;   
  margin-bottom: 12px;
  font-size: 15px;
}
.email-address a {
  color: var(--link);
  font-weight: 500;
  text-decoration: none;
}
.email-address a:hover {
  text-decoration: underline;
}

/*Page Awards */
.awards-flat{
  list-style:none;
  margin:0;
  padding:0;
}
.awards-flat li{
  margin:6px 0;
  font-size:15px;
}
.awards-flat li strong {
  display:inline;
  margin-right:8px;   
  font-weight:700;
  color:#000;
}



/* ======================= */
/* MOBILE & TABLET (≤820px) */
/* ======================= */
@media (max-width: 820px){

  /* Layout (sidebar + content) */
  .layout{
    flex-direction: column;
    align-items: center;      /* card sidebar at center*/
    gap: 20px;
    padding: 0 16px;
  }

  /* Sidebar no full-bleed */
  .sidebar{
    flex: 0 0 auto;           /* non flex  */
    margin: 0 auto;           /* at center */
    width: min(92vw, 360px);  /* max 360 */
    max-width: 360px;
    min-width: 260px;
    padding: 16px;
    text-align: center;       /* text in card */
  }

  /* Avatar + social icon */
  .avatar{ width:160px; height:160px; border-radius:12px; margin:0 auto 12px; }
  .name{ font-size:20px; margin:4px 0 6px; }
  .subtitle{ font-size:15px; line-height:1.3; }
  .email-address{ font-size:14px; margin:6px 0 12px; }
  .social-list{ gap:12px; margin-top:8px; justify-content:center; }
  .social-list a.icon{ width:40px; height:40px; }

  /* Main content*/
  .content{
    width: 100%;
    max-width: 720px;         
    padding: 0;
  }
  .content h1{ font-size:22px; }
  .content h2{ font-size:20px; }
  .content p{
    line-height:1.75;
    text-align:justify;
    margin:0 0 14px;
  }

  /* Timeline  */
  .timeline{ padding-left:12px; }
  .edu-period{ gap:8px; }
  .timeline-dot{ width:8px; height:8px; }

  /* Awards */
  .awards ul{ margin:0 0 14px 0; }
  .awards ul > li{ margin:8px 0; }
  .awards ul ul{ padding-left:0 !important; }
}

/* =================== */
/* SMALL MOBILE (≤480px) */
/* =================== */
@media (max-width: 480px){

  /* Topnav: text is smaller */
  .topnav{ gap:12px; }
  .topnav a{ font-size:13px; }

  body{ font-size:15px; }

  .avatar{ width:140px; height:140px; border-radius:10px; }
  .name{ font-size:19px; }
  .subtitle{ font-size:14px; }
  .email-address{ font-size:13px; }

  .social-list a.icon{ width:36px; height:36px; }

  .content h1{ font-size:20px; margin-top:20px; }
  .content h2{ font-size:18px; margin-top:18px; }

  .timeline{ padding-left:0; }
  .timeline-item{ margin-bottom:16px; }
  .edu-period{ margin-bottom:4px; }
  .timeline-dot{ width:7px; height:7px; }

  /* Awards list */
  .awards ul ul{ padding-left:0 !important; }
}

/* Delete bullet + Education in every viewport */
.education-flat{
  list-style:none !important;
  padding-left:0 !important;
  margin-left:0 !important;
}
/*Banner*/
.profile-banner { text-align: center; margin: 30px 0; }
.profile-banner img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: 400px;
  height: auto;
}
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.layout {
  flex: 1;   /* đẩy footer xuống đáy */
}


/* Footer: thanh ở cuối trang */
.site-footer {
  margin-top: 48px;
  padding: 0 16px 24px;
}

.site-footer-inner {
  max-width: 1100px;
  margin: 0 auto;              /* căn giữa footer */
  background: #222;
  color: #f5f5f5;
  border-radius: 20px;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;  /* logo - text - TOP giãn đều */
  gap: 16px;
}

.site-footer-logo img {
  height: 28px;          /* chỉnh size logo ở đây */
  width: auto;
  display: block;
}

.site-footer-copy {
  flex: 1;
  font-size: 14px;
  text-align: center;    /* chữ nằm giữa */
}

.site-footer-top {
  font-size: 12px;
  text-transform: uppercase;
  text-decoration: none;
  color: #bbbbbb;
}

.site-footer-top:hover {
  color: #ffffff;
}

/* Mobile layout */
@media (max-width: 768px) {
  .site-footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .site-footer-logo img {
    height: 24px;
  }

  .site-footer-copy {
    text-align: center;
    font-size: 11px;
  }

  .site-footer-top {
    align-self: center;
    margin-top: 4px;
    font-size: 10px;
  }
}
.site-footer-logo {
  display: none;
}

/*Sidebar banner*/
.sidebar-banner {
  width: 100%;
  text-align: center;      
  margin-top: 28px;
  margin-bottom: 10px;
}

.sidebar-banner img {
  width: 100%;              
  max-width: 300px;        
  height: auto;
  display: block;
  margin: 0 auto; 
  border-radius: 12px;     
}