/* ===== Page banner (shared look with lien-he) ===== */
.page-banner{
  background:linear-gradient(120deg,var(--navy-800),var(--navy-900));
  color:var(--white);
  padding:56px 0 44px;
}
.breadcrumb{display:flex;gap:8px;flex-wrap:wrap;font-size:13.5px;color:#a9b5c6;margin-bottom:16px;}
.breadcrumb a{color:#a9b5c6;transition:color var(--transition);}
.breadcrumb a:hover{color:var(--white);}
.breadcrumb [aria-current]{color:var(--gold);font-weight:600;}
.page-banner h1{font-size:clamp(28px,3.6vw,40px);margin-bottom:10px;}
.page-banner p{color:#c9d3e0;max-width:560px;}

/* ===== News index ===== */
.news-index{background:var(--gray-100);}
.view-all-wrap{text-align:center;margin-top:36px;}
[data-ajax-results]{transition:opacity var(--transition);}
[data-ajax-results].is-loading{opacity:.5;pointer-events:none;}
.news-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:36px;}
.filter-chip{
  padding:9px 20px;border-radius:999px;border:1px solid var(--gray-300);background:var(--white);
  font-size:14px;font-weight:600;color:var(--gray-600);transition:background var(--transition), color var(--transition), border-color var(--transition);
}
.filter-chip:hover{border-color:var(--red-600);color:var(--red-600);}
.filter-chip.is-active{background:var(--red-600);border-color:var(--red-600);color:var(--white);}

.news-index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.news-empty{text-align:center;color:var(--gray-600);padding:40px 0;font-size:15px;}

/* ===== Pagination ===== */
.pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:48px;}
.pagination__nav{
  width:38px;height:38px;border-radius:50%;background:var(--white);border:1px solid var(--gray-300);
  display:flex;align-items:center;justify-content:center;color:var(--navy-900);
  transition:background var(--transition), color var(--transition), border-color var(--transition);
}
.pagination__nav:hover:not(:disabled):not(.is-disabled){background:var(--red-600);border-color:var(--red-600);color:var(--white);}
.pagination__nav:disabled,
.pagination__nav.is-disabled{opacity:.4;cursor:default;pointer-events:none;}
.pagination__nav .icon{width:16px;height:16px;}
.pagination__pages{display:flex;gap:8px;}
.pagination__pages button,
.pagination__pages a{
  width:38px;height:38px;border-radius:50%;font-weight:700;font-size:14px;color:var(--gray-600);
  border:1px solid var(--gray-300);background:var(--white);
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  transition:background var(--transition), color var(--transition), border-color var(--transition);
}
.pagination__pages button:hover,
.pagination__pages a:hover{border-color:var(--red-600);color:var(--red-600);}
.pagination__pages button.is-active,
.pagination__pages a.is-active{background:var(--red-600);border-color:var(--red-600);color:var(--white);}

/* ===== Article page ===== */
.article{background:var(--white);}
.article__header{max-width:820px;margin:0 auto 36px;text-align:left;}
.article__header .tag{margin-bottom:14px;}
.article__header h1{font-size:clamp(26px,3.6vw,36px);color:var(--navy-900);margin-bottom:16px;}
.article__meta{display:flex;gap:20px;flex-wrap:wrap;color:var(--gray-600);font-size:14px;}
.article__meta span{display:inline-flex;align-items:center;gap:6px;}
.article__meta .icon{width:16px;height:16px;color:var(--red-600);}

.article__cover{
  max-width:960px;margin:0 auto 44px;aspect-ratio:16/7;border-radius:var(--radius);
  background:linear-gradient(150deg,#3d3116,#0e1b2c);
}

.article__body{max-width:820px;margin:0 auto;color:var(--gray-900);font-size:16.5px;line-height:1.85;}
.article__body p{margin-bottom:22px;}
.article__body h2{font-size:22px;color:var(--navy-900);margin:36px 0 16px;}
.article__body blockquote{
  border-left:4px solid var(--red-600);background:var(--gray-100);padding:20px 24px;
  border-radius:0 12px 12px 0;font-style:italic;color:var(--navy-900);margin:28px 0;font-size:17px;
}
.article__gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0;}
.article__gallery div{aspect-ratio:4/3;border-radius:12px;}
.article__gallery div:nth-child(1){background:linear-gradient(150deg,#274361,#0e1b2c);}
.article__gallery div:nth-child(2){background:linear-gradient(150deg,#5c1b22,#0e1b2c);}
.article__gallery div:nth-child(3){background:linear-gradient(150deg,#1c3d33,#0e1b2c);}

.article__tags{display:flex;flex-wrap:wrap;gap:10px;margin:36px 0;}
.article__tags a{
  background:var(--red-100);color:var(--red-600);font-size:13px;font-weight:600;
  padding:6px 14px;border-radius:999px;transition:background var(--transition), color var(--transition);
}
.article__tags a:hover{background:var(--red-600);color:var(--white);}

.article__share{
  display:flex;align-items:center;gap:14px;padding:20px 0;border-top:1px solid var(--gray-300);
  border-bottom:1px solid var(--gray-300);margin-bottom:48px;
}
.article__share span{font-weight:700;font-size:14px;color:var(--navy-900);}
.share-btn{
  width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--white);font-size:13px;font-weight:700;transition:transform var(--transition), opacity var(--transition);
  position:relative;
}
.share-btn:hover{transform:translateY(-3px);}
.share-btn--fb{background:#1877f2;}
.share-btn--zalo{background:#0068ff;}
.share-btn--link{background:var(--navy-900);}
.share-btn__tip{
  position:absolute;bottom:120%;left:50%;translate:-50% 0;background:var(--navy-900);color:var(--white);
  font-size:12px;padding:4px 10px;border-radius:6px;white-space:nowrap;opacity:0;visibility:hidden;
  transition:opacity var(--transition), visibility var(--transition);
}
.share-btn__tip.is-visible{opacity:1;visibility:visible;}

.article__related{max-width:960px;margin:0 auto;}
.article__related h2{font-size:22px;color:var(--navy-900);margin-bottom:24px;}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}

/* ===== Responsive ===== */
@media (max-width:1080px){
  .news-index-grid{grid-template-columns:repeat(2,1fr);}
  .related-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:600px){
  .news-index-grid,.related-grid,.article__gallery{grid-template-columns:1fr;}
  .article__share{flex-wrap:wrap;}
}