/* ===== Global ===== */
html,
body{
  height:100%;
}

body{
  min-height:100vh;
  margin:0;
  background:#efefef;
  font-family:"Poppins", sans-serif;
  font-size:16px;
  line-height:1.6;
  color:#111;
  display:flex;
  flex-direction:column;
}

main{
  flex:1 0 auto;
}

/* ===== Hero image ===== */
.hero-media{
  width:100%;
  max-width:1157px;
  margin:13px auto;
}

.hero-media img{
  width:100%;
  object-fit:cover;
  border-radius:14px;
  display:block;
}

/* ===== Section ===== */
#publications{
  padding:0;
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
}

#publications .container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
  width:100%;
  box-sizing:border-box;
  flex:1;
  display:flex;
}

/* ===== White paper box ===== */
.publications-box{
  background:#fff;
  border-left:1px solid #e5e7eb;
  border-right:1px solid #e5e7eb;
  padding:24px 48px 34px;
  box-sizing:border-box;
  flex:1;
  width:100%;
  min-height:100%;
}

/* ===== Page heading ===== */
.pub-page-head{
  margin-bottom:18px;
  display: flex;
  justify-content: space-between;
}

.pub-page-title{
  margin:0 0 12px 0;
  font-size:28px;
  font-weight:500;
  line-height:1.2;
  color:#111;
}

/* ===== Tabs giống kiểu ảnh ===== */
.pub-page-tabs{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.pub-tab{
  background:transparent;
  border:none;
  padding:0;
  margin:0;
  font-family:"Poppins", sans-serif;
  font-size:16px;
  font-weight:400;
  color:#6b7280;
  cursor:pointer;
  transition:all .2s ease;
  position:relative;
}

.pub-tab:hover{
  color:#111;
}

.pub-tab.is-active{
  color:#0ea5e9;
}

.pub-tab.is-active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:100%;
  height:1.5px;
  background:#0ea5e9;
  border-radius:999px;
}

/* ===== Header / filters ===== */
.section-head{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  gap:12px;
  /* margin-bottom:14px; */
}

.section-head__left{
  display:none;
}

.section-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  width:100%;
}

.year-pill{
  display:flex;
  align-items:center;
  gap:8px;
}

.year-pill__label{
  font-size:16px;
  font-weight:600;
  color:#111;
}

.year-pill__select{
  min-width:120px;
}

/* ===== Publication groups ===== */
.pub-groups{
  display:block;
}

.pub-year-group{
  margin-bottom:12px;
}

.pub-year-group:last-child{
  margin-bottom:0;
}

.pub-year-row{
  display:block;
}

.pub-year-label{
  margin:0 0 10px 0;
  padding:0;
  font-size:17px;
  font-weight:700;
  line-height:1.2;
  color:#2563eb;
}

/* ===== Publication list ===== */
.pub-list{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.pub-item{
  display:block;
}

.pub-item__line{
  display:grid;
  grid-template-columns:58px minmax(0, 1fr);
  column-gap:10px;
  align-items:start;
}

.pub-item__code{
  font-size:16px;
  line-height:1.5;
  color:#111;
  white-space:nowrap;
}

.pub-item__content{
  min-width:0;
  font-size:16px;
  line-height:1.5;
  color:#111;
  text-align:justify;
  overflow-wrap:break-word;
  word-break:normal;
}

/* tên của bạn */
.pub-item__author-me{
  color:#111;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* title */
.pub-item__title{
  color:#80350C;
  text-decoration:none;
}

a.pub-item__title{
  color:#80350C;
  text-decoration:none;
}

a.pub-item__title:hover,
a.pub-item__title:focus-visible{
  color:#80350C;
  text-decoration:underline;
}

.pub-item__venue{
  color:#111;
  font-style:italic;
}

.pub-item__details{
  color:#111;
}

.pub-empty{
  margin:12px 0 0 0;
  color:#6b7280;
  font-size:16px;
}

/* ===== Mobile ===== */
@media (max-width:768px){
  #publications .container{
    padding:0 14px;
  }

  .publications-box{
    padding:18px 16px 24px;
    border-left:none;
    border-right:none;
  }

  .pub-page-title{
    font-size:24px;
    margin-bottom:10px;
  }

  .pub-page-tabs{
    gap:14px;
  }

  .pub-tab{
    font-size:15px;
  }

  .section-head{
    justify-content:flex-start;
    margin-bottom:12px;
  }

  .section-actions{
    width:100%;
    justify-content:flex-start;
  }

  .pub-year-group{
    margin-bottom:10px;
  }

  .pub-year-label{
    margin:0 0 6px 0;
    font-size:17px;
  }

  .pub-list{
    gap:6px;
  }

  .pub-item__line{
    grid-template-columns:48px minmax(0, 1fr);
    column-gap:8px;
  }

  .pub-item__code,
  .pub-item__content{
    font-size:15px;
    line-height:1.5;
  }

  .hero-media{
    padding:0 14px;
    max-width:1200px;
  }
}