*{box-sizing:border-box;font-family:Segoe UI,Arial}
body{margin:0;background:#f2f5f9}
a{text-decoration:none;color:inherit}

.top{
background:#fff;padding:15px 25px;font-size:18px;font-weight:600;
box-shadow:0 2px 5px rgba(0,0,0,.05)
}

.container{
max-width:1200px;margin:30px auto;display:flex;gap:25px;padding:15px
}

/* LEFT */
.profile-card{
width:320px;background:#fff;border-radius:20px;padding:25px;text-align:center
}

.avatar-box{position:relative;width:160px;height:160px;margin:0 auto 15px}
.avatar-ring{
position:absolute;inset:0;border-radius:50%;
background:conic-gradient(red,orange,yellow,lime,aqua,blue,purple,red);
animation:spin 3s linear infinite
}
.avatar{
position:absolute;inset:6px;border-radius:50%;width:calc(100% - 12px);
height:calc(100% - 12px);object-fit:cover;background:#fff
}
@keyframes spin{to{transform:rotate(360deg)}}

.job{
color:#64748b;
margin-top:4px;
margin-bottom:18px;
font-size:14px;
}


.social a{
display:flex;align-items:center;gap:10px;
padding:10px 5px;border-bottom:1px solid #eee
}

/* RIGHT */
.info-card{
flex:1;background:#fff;border-radius:20px;padding:25px
}

h3{margin-top:0}

.row{
display:flex;justify-content:space-between;
padding:8px 0
}

.map-link{color:#333}

.skill{margin:15px 0}
.skill span{float:right}
.bar{height:10px;background:#e5e7eb;border-radius:20px;overflow:hidden}
.bar div{
height:100%;background:linear-gradient(90deg,#2563eb,#38bdf8);
border-radius:20px
}

/* MOBILE */
@media(max-width:768px){
.container{flex-direction:column}
.profile-card{width:100%}
}
.logo{
display:flex;
align-items:center;
gap:10px;
font-weight:600;
font-size:18px;
}

.logo-img{
width:42px;
height:36px;
}
.name-box{
  margin-top:6px;
  margin-bottom:14px;
}

.profile-name{
  font-size:22px;
  font-weight:600;
  line-height:1.1;
}

.profile-job{
  margin-top:2px;      /* đẩy job lên sát tên */
  font-size:14px;
  color:#64748b;
  line-height:1.2;
}
@media(max-width:768px){
.info-card{padding:20px}
.avatar-box{margin-top:10px}
}
.tag-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:15px;
}

.tag-card{
  background:#f8fafc;
  border-radius:16px;
  padding:15px;
}

.tag-card h4{
  margin:0 0 10px;
  font-size:15px;
}

/* TAG SỞ THÍCH */
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.tags span{
  background:#e0f2fe;
  color:#0369a1;
  padding:5px 10px;
  border-radius:999px;
  font-size:13px;
}

/* ẢNH CÁ NHÂN */
.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.gallery img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:10px;
}
/* EXTRA INFO */
.extra-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:15px;
}

.extra-card{
  background:#f8fafc;
  border-radius:16px;
  padding:15px;
}

.extra-card h4{
  margin:0 0 10px;
  font-size:15px;
}

/* học vấn */
.edu{
  padding-left:18px;
  margin:0;
}
.edu li{
  margin-bottom:6px;
  font-size:14px;
}

/* sở thích */
.tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tags span{
  background:#e0f2fe;
  color:#0369a1;
  padding:5px 10px;
  border-radius:999px;
  font-size:13px;
}

.gallery{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.gallery img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:12px;
}

/* mobile */
@media(max-width:768px){
  .extra-grid{
    grid-template-columns:1fr;
  }
}
.edu{
  list-style:none;      /* bỏ dấu chấm */
  padding-left:0;       /* bỏ thụt đầu dòng */
  margin:0;
}

.edu li{
  margin-bottom:6px;
  font-size:14px;
}
.footer{
  margin-top:40px;
  padding:15px 10px;
  text-align:center;
  font-size:14px;
  color:#64748b;
}
.edu a{
  text-decoration:none;
  color:#111;
}

.edu a:hover{
  color:#2563eb;
}
/*By Nguyen Ba Quy