/**
 * Bộ nhận diện chung cho tin tức - lấy nguyên từ trang tuyển dụng.
 *
 * Hai thành phần:
 *
 *   1. .dg-plate  - "khung triện": ảnh bo trong khung giấy trắng, phía trên là
 *                   đường chỉ vàng bị ngắt ở giữa bởi biểu tượng Discovery.
 *                   Dùng cho mọi card tin tức.
 *   2. Tiêu đề mục trong bài - mỗi <h2> trong .article-body tự mọc một đường
 *                   chỉ vàng cùng biểu tượng phía trên. Làm bằng ::before và
 *                   ::after nên không phải sửa nội dung bài viết nào.
 *
 * Nạp SAU khối <style> nội tuyến của từng trang bài viết để ghi đè được nhịp cũ.
 */

:root {
  --dg-ink: #20211f;
  --dg-ink-soft: #3c3d38;
  --dg-muted: #686862;
  --dg-gold: #b79552;
  --dg-gold-deep: #8e6a2f;
  --dg-gold-pale: rgba(183, 149, 82, .3);
  --dg-line: #ddd6c6;
  --dg-paper: #f8f7f3;
  --dg-white: #fff;
  --dg-display: "Montserrat", sans-serif;
  --dg-body: "Plus Jakarta Sans", sans-serif;
  --dg-mono: "Inter", sans-serif;
  --dg-ease: cubic-bezier(.22, 1, .36, 1);
  /* Màu nền mà biểu tượng phải "đè" lên để ngắt đường chỉ vàng. */
  --dg-crest-bg: var(--dg-paper);
  --dg-symbol: url("/assets/discovery-symbol.png?v=202608212247");
}

/* ==========================================================================
   Đường chỉ vàng ngắt giữa bởi biểu tượng
   ========================================================================== */

.dg-crest {
  position: relative;
  display: grid;
  place-items: center;
  height: 46px;
  margin-bottom: clamp(16px, 2vw, 22px);
}

.dg-crest::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dg-gold-pale) 20%, var(--dg-gold) 50%, var(--dg-gold-pale) 80%, transparent);
  transform: scaleX(0);
  transition: transform 1s var(--dg-ease);
}

.dg-crest img {
  position: relative;
  height: 34px;
  width: auto;
  padding: 0 16px;
  background: var(--dg-crest-bg);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .7s var(--dg-ease) .28s, transform .7s var(--dg-ease) .28s;
}

.dg-reveal.is-in .dg-crest::before,
.dg-crest.is-in::before { transform: scaleX(1); }
.dg-reveal.is-in .dg-crest img,
.dg-crest.is-in img { opacity: 1; transform: none; }

/* Biểu tượng đứng một mình, ngăn giữa hai phần của trang. */
.dg-crest-solo { max-width: 460px; margin: clamp(38px, 4.6vw, 62px) auto clamp(30px, 3.6vw, 46px); }

/* ==========================================================================
   Card tin tức - khung triện
   ========================================================================== */

/* Ảnh tràn hết bề ngang thẻ: bỏ biểu tượng ở đầu thẻ nên ảnh là thứ đầu tiên
   mắt chạm tới, cho nó ăn trọn khung thay vì thụt vào bốn phía. Phần đệm
   chuyển xuống riêng khối chữ. */
.dg-plate {
  display: block;
  padding: 0 0 clamp(22px, 2.6vw, 32px);
  border: 1px solid var(--dg-gold-pale);
  background: var(--dg-white);
  color: var(--dg-ink);
  --dg-crest-bg: var(--dg-white);
  transition: border-color .5s var(--dg-ease), box-shadow .5s var(--dg-ease);
}

a.dg-plate:hover { border-color: var(--dg-gold); box-shadow: 0 22px 54px rgba(30, 26, 16, .1); }

/* Tỉ lệ đặt ở khung chứ không đặt ở ảnh: shared-shell.css gắn max-height cho
   mọi ảnh trong <main> của trang con, đặt lên ảnh là hỏng tỉ lệ. */
.dg-plate-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--dg-paper);
}

.dg-plate-media img {
  width: 100%;
  height: 100%;
  max-height: none !important;
  object-fit: cover;
  transition: transform 1.15s var(--dg-ease);
}

a.dg-plate:hover .dg-plate-media img { transform: scale(1.04); }

.dg-plate-copy { padding: clamp(20px, 2.2vw, 28px) clamp(18px, 2.4vw, 30px) 0; text-align: center; }

.dg-plate-kicker {
  display: block;
  color: var(--dg-gold-deep);
  font-family: var(--dg-mono);
  font-size: var(--fs-card-kicker, 9.5px);
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.dg-plate-title {
  display: block;
  margin: 12px 0 0;
  font-family: var(--dg-display);
  font-size: var(--fs-card-title, clamp(15px, 1.25vw, 18px));
  font-weight: 500;
  letter-spacing: -.02em;
  /* Rộng hơn nếp cũ 15% (1.22 → 1.4): thẻ không còn đoạn tóm tắt nên tiêu đề
     là khối chữ chính, cần thở hơn. */
  line-height: 1.4;
  text-transform: uppercase;
  text-wrap: balance;
}

.dg-plate-rule { display: block; width: 44px; height: 1px; margin: 16px auto; background: var(--dg-gold); }

/* Tóm tắt cắt ở ba dòng để các card trong cùng một hàng cân nhau. */
.dg-plate-summary {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--dg-muted);
  font-size: var(--fs-card-summary, 12.5px);
  line-height: 1.62;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.dg-plate-meta {
  display: block;
  margin-top: 14px;
  color: var(--dg-muted);
  font-family: var(--dg-mono);
  font-size: var(--fs-card-meta, 9.5px);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Thẻ không còn dòng "Đọc thêm": cả thẻ đã là một liên kết, thêm một nút giả
   nữa chỉ làm nặng mắt. Bỏ nó đi thì phần chữ phải tự cân lại, nên khối chữ
   dàn đều theo chiều dọc và dòng thông tin cuối tự bám đáy thẻ. */
.dg-plate { display: flex; flex-direction: column; }
.dg-plate-copy { flex: 1; display: flex; flex-direction: column; }
.dg-plate-meta { margin-top: auto; padding-top: 16px; }

/* Ảnh mở bài dùng chung khung triện. Không lặp lại tiêu đề bài ở đây - tiêu
   đề đã nằm ngay phía trên; phần chữ chỉ còn chú thích ảnh và dòng thông tin. */
.dg-plate-lede { margin: clamp(38px, 5vw, 58px) 0 0; padding-bottom: clamp(22px, 2.6vw, 32px); }
.dg-plate-lede .dg-plate-media { aspect-ratio: 16 / 9; }
.dg-plate-lede .dg-plate-rule { margin-top: 0; }
.dg-plate-lede .dg-plate-summary {
  -webkit-line-clamp: none;
  display: block;
  max-width: 62ch;
  margin-inline: auto;
  font-size: var(--fs-lede-summary, 13.5px);
}

/* ==========================================================================
   Tiêu đề mục trong thân bài
   ==========================================================================
   Mỗi <h2> tự mọc đường chỉ vàng và biểu tượng phía trên. Không cần sửa nội
   dung bài nào - kể cả bài do CSM sinh ra. */

.article-body h2 {
  position: relative;
  padding-top: 74px !important;
  margin-top: clamp(52px, 6vw, 74px) !important;
  margin-bottom: 22px;
  color: var(--dg-gold-deep);
  font-family: var(--dg-display);
  font-size: var(--fs-h2-article, clamp(21px, 2.6vw, 32px));
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.12 !important;
  text-align: center;
  text-wrap: balance;
}

.article-body h2 * { line-height: inherit !important; }

.article-body h2::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--dg-gold-pale) 22%, var(--dg-gold) 50%, var(--dg-gold-pale) 78%, transparent);
}

.article-body h2::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 5px;
  width: 58px;
  height: 44px;
  transform: translateX(-50%);
  background:
    var(--dg-symbol) center / auto 30px no-repeat,
    var(--dg-crest-bg);
}

/* Bài đầu tiên trong thân bài không cần đường chỉ phía trên nó. */
.article-body > h2:first-child { margin-top: 0 !important; }

/* ==========================================================================
   Ảnh trong thân bài
   ==========================================================================
   Mọi ảnh của bài tin tức đều nằm giữa trang, dù bài viết tay hay soạn trong
   CSM. Đặt ở đây một lần để cả ba loại trang bài dùng chung. */

.article-body figure {
  width: min(100%, 680px);
  margin: clamp(30px, 3.6vw, 44px) auto;
  text-align: center;
}

.article-body figure img {
  width: 100%;
  height: auto;
  margin-inline: auto;
}

/* Ảnh dán thẳng vào đoạn văn, không bọc trong <figure>. */
.article-body > img,
.article-body p > img,
.article-body div > img {
  display: block;
  margin-inline: auto;
}

.article-body figcaption {
  margin-top: 12px;
  color: var(--dg-muted);
  font-size: var(--fs-figcaption, 12.5px);
  line-height: 1.6;
  text-align: center;
}

/* Dải ảnh xếp lưới giữ nguyên bố cục riêng của nó. */
.article-body .article-gallery figure { width: 100%; margin: 0; }

/* ==========================================================================
   Hiện dần khi cuộn tới
   ========================================================================== */

.dg-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s var(--dg-ease), transform .8s var(--dg-ease);
}

.dg-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .dg-reveal { opacity: 1; transform: none; transition: none; }
  .dg-crest::before { transform: scaleX(1); transition: none; }
  .dg-crest img { opacity: 1; transform: none; transition: none; }
}