/* Stylesheet for Tin Tức & Sự Kiện Hub and Sub-pages */
*, *::before, *::after{
  box-sizing: border-box;
}

:root{
  --news-green-dark: #154e3b;
  --news-green-brand: #157a58;
  --news-green-accent: #1e9e73;
  --news-green-light: #eaf8f3;
  --news-orange-brand: #f15a2b;
  --news-orange-light: #fff2ed;
  --news-text-dark: #263247;
  --news-text-body: #3f4d61;
  --news-text-muted: #667085;
  --news-border-light: #cde8dc;
  --news-surface-card: #ffffff;
}

body{
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--news-text-body);
  background: #f7faf8;
  line-height: 1.6;
}

.news-shell{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Header */
.news-header{
  background: #ffffff;
  border-bottom: 1px solid var(--news-border-light);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 18px rgba(24,96,67,.06);
}

.news-header__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.news-header__brand{
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.news-header__logo{
  height: 48px;
  width: auto;
  object-fit: contain;
}

.news-header__divider{
  width: 1px;
  height: 32px;
  background: var(--news-border-light);
}

.news-header__campaign-logo{
  height: 42px;
  width: auto;
  object-fit: contain;
}

.news-header__nav{
  display: flex;
  align-items: center;
  gap: 10px;
}

.news-header__link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  color: var(--news-green-brand);
  background: #fff;
  border: 1px solid var(--news-border-light);
  transition: all .2s ease;
}

.news-header__link:hover{
  background: var(--news-green-light);
  border-color: var(--news-green-accent);
}

.news-header__link--active{
  background: var(--news-green-light);
  border-color: var(--news-green-accent);
  color: var(--news-green-dark);
}

.news-header__link--primary{
  background: linear-gradient(90deg, #f15a2b, #ff8c1a);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(241,90,43,.25);
}

.news-header__link--primary:hover{
  background: linear-gradient(90deg, #d9481c, #eb7a0a);
  color: #fff;
}

.news-header__link--login{
  background: #fff;
  color: var(--news-green-brand);
  border: 1px solid #28a97e;
}

/* Breadcrumb */
.news-breadcrumb{
  max-width: 1200px;
  margin: 16px auto 0;
  padding: 0 20px;
  font-size: 13px;
  color: var(--news-text-muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.news-breadcrumb a{
  color: var(--news-green-brand);
  text-decoration: none;
}

.news-breadcrumb a:hover{
  text-decoration: underline;
}

.news-breadcrumb__sep{
  color: #9ed5be;
}

/* Main Container */
.news-main{
  max-width: 1200px;
  margin: 20px auto 40px;
  padding: 0 20px;
  box-sizing: border-box;
  flex: 1;
}

/* Hero Article */
.news-hero{
  background: linear-gradient(135deg, #fffef8 0%, #fff8dc 52%, #e9faf2 100%);
  border: 1px solid #9fe0c5;
  border-radius: 20px;
  padding: 40px 36px;
  box-shadow: 0 10px 30px rgba(24,96,67,.08);
  margin-bottom: 32px;
}

.news-hero__badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f15a2b, #ff8c1a);
  color: #fff;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: 12px;
}

.news-hero__title{
  font-family: Arial Rounded MT Bold, Trebuchet MS, Roboto, sans-serif;
  font-size: clamp(24px, 3.8vw, 36px);
  color: var(--news-green-dark);
  margin: 0 0 14px;
  line-height: 1.25;
}

.news-hero__desc{
  font-size: 16px;
  color: #44574f;
  max-width: 900px;
  margin: 0 0 20px;
  line-height: 1.6;
}

.news-hero__meta{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13.5px;
  color: var(--news-text-muted);
}

.news-hero__meta-item{
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Impact Metrics */
.news-metrics{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}

.news-metric-card{
  background: #ffffff;
  border: 1px solid var(--news-border-light);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(24,96,67,.05);
}

.news-metric-number{
  font-size: 32px;
  font-weight: 900;
  color: var(--news-orange-brand);
  line-height: 1.1;
  margin-bottom: 4px;
  font-family: Arial Rounded MT Bold, sans-serif;
}

.news-metric-label{
  font-size: 13.5px;
  color: var(--news-green-dark);
  font-weight: 700;
}

/* Section Common */
.news-section{
  margin-bottom: 40px;
}

.news-section__header{
  margin-bottom: 24px;
}

.news-section__title{
  font-family: Arial Rounded MT Bold, Trebuchet MS, Roboto, sans-serif;
  font-size: 24px;
  color: var(--news-green-dark);
  margin: 0 0 6px;
}

.news-section__desc{
  font-size: 14.5px;
  color: var(--news-text-muted);
  margin: 0;
}

/* Press Grid (26 articles) */
.news-press-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px;
}

.news-press-card{
  background: #ffffff;
  border: 1px solid #dbeef5;
  border-radius: 16px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 16px rgba(24,96,67,.05);
  transition: all .2s ease;
  position: relative;
}

.news-press-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(24,96,67,.12);
  border-color: #9fe0c5;
}

.news-press-card__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.news-press-card__outlet{
  font-size: 14px;
  font-weight: 800;
  color: var(--news-green-brand);
  display: flex;
  align-items: center;
  gap: 6px;
}

.news-press-card__tag{
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--news-green-light);
  color: var(--news-green-brand);
}

.news-press-card__date{
  font-size: 12px;
  color: #8c9b96;
}

.news-press-card__title{
  font-size: 16px;
  font-weight: 700;
  color: var(--news-text-dark);
  line-height: 1.35;
  margin: 0;
}

.news-press-card__quote{
  font-size: 13.5px;
  color: #4f5f59;
  line-height: 1.5;
  margin: 0;
  font-style: italic;
  background: #fbfdfc;
  border-left: 3px solid #9ed5be;
  padding: 8px 12px;
  border-radius: 0 8px 8px 0;
}

.news-press-card__link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--news-orange-brand);
  text-decoration: none;
  margin-top: auto;
  padding-top: 6px;
}

.news-press-card__link:hover{
  text-decoration: underline;
}

/* Event Story Content */
.news-story-box{
  background: #ffffff;
  border: 1px solid var(--news-border-light);
  border-radius: 18px;
  padding: 28px 32px;
  margin-bottom: 32px;
  box-shadow: 0 6px 20px rgba(24,96,67,.05);
}

.news-story-box h3{
  color: var(--news-green-dark);
  font-size: 20px;
  margin-top: 0;
  margin-bottom: 12px;
}

.news-story-box p{
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.65;
  color: #354454;
}

.news-story-box ul{
  margin: 0 0 16px;
  padding-left: 20px;
}

.news-story-box li{
  margin-bottom: 8px;
  font-size: 14.5px;
  color: #354454;
}

/* CTA Bar */
.news-cta-bar{
  background: linear-gradient(90deg, #157a58, #1e9e73);
  color: #fff;
  border-radius: 18px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: 0 10px 28px rgba(21,122,88,.25);
  margin-top: 40px;
}

.news-cta-bar__content h3{
  margin: 0 0 6px;
  font-size: 22px;
  font-family: Arial Rounded MT Bold, sans-serif;
}

.news-cta-bar__content p{
  margin: 0;
  font-size: 14.5px;
  opacity: .92;
}

.news-cta-bar__btn{
  background: #ffffff;
  color: var(--news-green-dark);
  font-size: 15px;
  font-weight: 800;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.15);
  transition: all .2s ease;
}

.news-cta-bar__btn:hover{
  background: var(--news-orange-light);
  color: var(--news-orange-brand);
  transform: translateY(-2px);
}

/* Data Table (for WHO page) */
.news-table-wrap{
  background: #fff;
  border: 1px solid var(--news-border-light);
  border-radius: 16px;
  overflow-x: auto;
  box-shadow: 0 4px 16px rgba(24,96,67,.05);
  margin-bottom: 28px;
}

.news-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 600px;
}

.news-table th, .news-table td{
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #eef6f2;
}

.news-table th{
  background: #f4faf7;
  color: var(--news-green-dark);
  font-weight: 700;
}

.news-table tr:hover td{
  background: #fbfdfc;
}

.news-table .highlight-median{
  font-weight: 800;
  color: var(--news-green-brand);
}

/* Responsive */
@media(max-width: 900px){
  .news-metrics{grid-template-columns: repeat(2, 1fr);}
  .news-header__inner{flex-wrap: wrap;}
  .news-header__nav{width: 100%; justify-content: flex-end; margin-top: 6px;}
  .news-cta-bar{flex-direction: column; text-align: center;}
  .news-cta-bar__btn{width: 100%; text-align: center;}
}

@media(max-width: 600px){
  .news-main{padding: 0 16px; width: 100%; min-width: 0;}
  .news-header__inner{padding: 10px 16px;}
  .news-header__nav{gap: 6px; flex-wrap: wrap;}
  .news-header__logo{height: 38px;}
  .news-header__campaign-logo{height: 34px;}
  .news-header__link{padding: 6px 10px; font-size: 12px;}
  .news-hero{padding: 24px 18px;}
  .news-hero__title{font-size: 21px;}
  .news-hero__desc{font-size: 14px;}
  .news-press-grid{grid-template-columns: 1fr; gap: 14px;}
  .news-press-card{min-width: 0; padding: 18px 16px;}
  .news-story-box{padding: 20px 18px;}
  .news-metrics{grid-template-columns: 1fr;}
}