/* Hallmark · macrostructure: Bento Grid (Long Document) · nav: N6 · footer: Ft5 · theme: bangkok-gazette · knobs: density=high,contrast=strict,grain=none,radius=editorial · pre-emit: P5 H5 E5 S5 R5 V5 · contrast: pass (40-41) · slop: pass (42-45) · mobile: pass (320px, 375px, 414px, 768px) */

@font-face {
  font-family: 'Bai Jamjuree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/font/baijamjuree-600.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/font/ibmplexsansthai-400.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/font/ibmplexsansthai-600.woff2') format('woff2');
}

:root {
  --gdj-color-base: #f7f4ee;
  --gdj-color-sub: #efe9dc;
  --gdj-color-text-main: #1b1f1d;
  --gdj-color-text-muted: #4a5250;
  --gdj-color-mark-primary: #b5482f;
  --gdj-color-mark-secondary: #4a6b57;
  --gdj-color-line-rule: #a8842c;
  --gdj-color-blank: #ffffff;

  --gdj-font-headline: 'Bai Jamjuree', sans-serif;
  --gdj-font-prose: 'IBM Plex Sans Thai', sans-serif;

  --gdj-space-01: 7px;
  --gdj-space-02: 14px;
  --gdj-space-03: 21px;
  --gdj-space-04: 35px;
  --gdj-space-05: 56px;
  --gdj-space-06: 91px;

  --gdj-corner-sm: 3px;
  --gdj-corner-lg: 13px;

  --gdj-frame-max: 1123px;

  --gdj-type-01: 13px;
  --gdj-type-02: 16px;
  --gdj-type-03: 19px;
  --gdj-type-04: 24px;
  --gdj-type-05: 29px;
  --gdj-type-06: 35px;
  --gdj-type-07: 42px;

  --gdj-motion-quick: 170ms;
  --gdj-motion-settle: 310ms;

  --gdj-rule-width: 3px;
}

@keyframes gdg-shift {
  0% {
    opacity: 0;
    transform: translateY(7px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gdg-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-x: clip;
  background-color: var(--gdj-color-base);
  color: var(--gdj-color-text-main);
  font-family: var(--gdj-font-prose);
  font-size: var(--gdj-type-02);
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--gdj-motion-quick) ease;
}

a:hover {
  color: var(--gdj-color-mark-primary);
}

a:focus-visible {
  outline: var(--gdj-rule-width) solid var(--gdj-color-line-rule);
  outline-offset: 3px;
}

.gdg-measure {
  max-width: var(--gdj-frame-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gdj-space-03);
  padding-right: var(--gdj-space-03);
}

.gdg-broadsheet {
  background-color: var(--gdj-color-base);
  padding-top: var(--gdj-space-04);
  padding-bottom: var(--gdj-space-05);
}

.gdg-masthead {
  border-bottom: var(--gdj-rule-width) solid var(--gdj-color-line-rule);
  background-color: var(--gdj-color-blank);
  padding-top: var(--gdj-space-02);
}

.gdg-dateline {
  display: flex;
  flex-direction: column;
  gap: var(--gdj-space-01);
  padding-bottom: var(--gdj-space-02);
  border-bottom: var(--gdj-rule-width) solid var(--gdj-color-sub);
  font-size: var(--gdj-type-01);
  color: var(--gdj-color-text-muted);
}

.gdg-wordmark {
  font-family: var(--gdj-font-headline);
  font-size: var(--gdj-type-06);
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  padding-top: var(--gdj-space-03);
  padding-bottom: var(--gdj-space-01);
  letter-spacing: 0;
}

.gdg-wordmark a {
  color: var(--gdj-color-text-main);
}

.gdg-standfirst {
  font-size: var(--gdj-type-02);
  color: var(--gdj-color-text-muted);
  text-align: center;
  padding-bottom: var(--gdj-space-03);
  margin-left: auto;
  margin-right: auto;
}

.gdg-nav-shelf {
  border-top: var(--gdj-rule-width) solid var(--gdj-color-line-rule);
  background-color: var(--gdj-color-sub);
}

.gdg-nav-track {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--gdj-space-01);
}

.gdg-nav-unit {
  margin: 0;
  padding: 0;
}

.gdg-nav-anchor {
  display: inline-block;
  font-family: var(--gdj-font-headline);
  font-size: var(--gdj-type-01);
  font-weight: 600;
  padding-top: var(--gdj-space-02);
  padding-bottom: var(--gdj-space-02);
  padding-left: var(--gdj-space-02);
  padding-right: var(--gdj-space-02);
  color: var(--gdj-color-text-main);
  transition: background-color var(--gdj-motion-quick) ease, color var(--gdj-motion-quick) ease;
}

.gdg-nav-anchor:hover {
  background-color: var(--gdj-color-blank);
  color: var(--gdj-color-mark-primary);
}

.gdg-kicker {
  display: inline-block;
  font-family: var(--gdj-font-headline);
  font-size: var(--gdj-type-01);
  font-weight: 600;
  color: var(--gdj-color-mark-primary);
  margin-bottom: var(--gdj-space-01);
}

.gdg-headline {
  font-family: var(--gdj-font-headline);
  font-size: var(--gdj-type-04);
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: var(--gdj-space-02);
  color: var(--gdj-color-text-main);
}

.gdg-headline-large {
  font-family: var(--gdj-font-headline);
  font-size: var(--gdj-type-05);
  font-weight: 600;
  line-height: 1.15;
  margin-top: 0;
  margin-bottom: var(--gdj-space-02);
  color: var(--gdj-color-text-main);
}

.gdg-subhead {
  font-family: var(--gdj-font-headline);
  font-size: var(--gdj-type-03);
  font-weight: 600;
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: var(--gdj-space-02);
  color: var(--gdj-color-text-main);
}

.gdg-deck {
  font-size: var(--gdj-type-02);
  color: var(--gdj-color-text-muted);
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: var(--gdj-space-02);
}

.gdg-byline {
  font-size: var(--gdj-type-01);
  color: var(--gdj-color-text-muted);
  margin-bottom: var(--gdj-space-02);
}

.gdg-slab {
  background-color: var(--gdj-color-blank);
  border: var(--gdj-rule-width) solid var(--gdj-color-line-rule);
  border-radius: var(--gdj-corner-sm);
  padding: var(--gdj-space-03);
  margin-bottom: var(--gdj-space-04);
}

.gdg-shelf {
  margin-bottom: var(--gdj-space-05);
}

.gdg-lead-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gdj-space-03);
  background-color: var(--gdj-color-blank);
  border: var(--gdj-rule-width) solid var(--gdj-color-line-rule);
  border-radius: var(--gdj-corner-sm);
  padding: var(--gdj-space-03);
  margin-bottom: var(--gdj-space-04);
  animation: gdg-shift var(--gdj-motion-settle) ease;
}

.gdg-lead-media {
  min-width: 0;
}

.gdg-lead-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.gdg-figure {
  margin: 0;
  border: var(--gdj-rule-width) solid var(--gdj-color-sub);
  border-radius: var(--gdj-corner-sm);
  overflow: hidden;
  background-color: var(--gdj-color-sub);
}

.gdg-caption {
  font-size: var(--gdj-type-01);
  color: var(--gdj-color-text-muted);
  padding: var(--gdj-space-01);
  background-color: var(--gdj-color-sub);
}

.gdg-bento-quad {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gdj-space-03);
  margin-bottom: var(--gdj-space-04);
}

.gdg-bento-entry {
  background-color: var(--gdj-color-blank);
  border: var(--gdj-rule-width) solid var(--gdj-color-line-rule);
  border-radius: var(--gdj-corner-sm);
  padding: var(--gdj-space-03);
  display: flex;
  flex-direction: column;
}

.gdg-feed-shelf {
  background-color: var(--gdj-color-sub);
  border: var(--gdj-rule-width) solid var(--gdj-color-line-rule);
  border-radius: var(--gdj-corner-sm);
  padding: var(--gdj-space-03);
}

.gdg-feed-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gdj-space-02);
}

.gdg-feed-entry {
  background-color: var(--gdj-color-blank);
  border-left: var(--gdj-rule-width) solid var(--gdj-color-mark-primary);
  border-radius: var(--gdj-corner-sm);
  padding: var(--gdj-space-02);
  transition: transform var(--gdj-motion-quick) ease;
}

.gdg-feed-entry:hover {
  transform: translateX(3px);
}

.gdg-stat-shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gdj-space-02);
  margin-top: var(--gdj-space-02);
  margin-bottom: var(--gdj-space-02);
}

.gdg-stat-unit {
  background-color: var(--gdj-color-sub);
  border-radius: var(--gdj-corner-sm);
  padding: var(--gdj-space-02);
  text-align: center;
}

.gdg-stat-num {
  font-family: var(--gdj-font-headline);
  font-size: var(--gdj-type-04);
  font-weight: 600;
  color: var(--gdj-color-mark-primary);
  line-height: 1.2;
}

.gdg-stat-label {
  font-size: var(--gdj-type-01);
  color: var(--gdj-color-text-muted);
}

.gdg-action-anchor {
  display: inline-block;
  font-family: var(--gdj-font-headline);
  font-weight: 600;
  font-size: var(--gdj-type-01);
  color: var(--gdj-color-mark-primary);
}

.gdg-tag-pill {
  display: inline-block;
  font-size: var(--gdj-type-01);
  background-color: var(--gdj-color-sub);
  color: var(--gdj-color-text-main);
  padding-top: var(--gdj-space-01);
  padding-bottom: var(--gdj-space-01);
  padding-left: var(--gdj-space-02);
  padding-right: var(--gdj-space-02);
  border-radius: var(--gdj-corner-sm);
  margin-right: var(--gdj-space-01);
  margin-bottom: var(--gdj-space-01);
}

.gdg-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gdj-space-03);
  margin-top: var(--gdj-space-03);
  margin-bottom: var(--gdj-space-03);
}

.gdg-plate {
  background-color: var(--gdj-color-sub);
  border: var(--gdj-rule-width) solid var(--gdj-color-line-rule);
  border-radius: var(--gdj-corner-sm);
  padding: var(--gdj-space-03);
}

.gdg-ribbon {
  border-top: var(--gdj-rule-width) solid var(--gdj-color-sub);
  padding-top: var(--gdj-space-03);
  margin-top: var(--gdj-space-03);
  font-size: var(--gdj-type-01);
  color: var(--gdj-color-text-muted);
}

.gdg-colophon {
  background-color: var(--gdj-color-blank);
  border-top: var(--gdj-rule-width) solid var(--gdj-color-line-rule);
  padding-top: var(--gdj-space-04);
  padding-bottom: var(--gdj-space-05);
}

.gdg-prose-stream {
  max-width: 1123px;
}

.gdg-prose-stream p {
  margin-top: 0;
  margin-bottom: var(--gdj-space-03);
  font-size: var(--gdj-type-02);
  line-height: 1.6;
}

.gdg-quote-pull {
  border-left: var(--gdj-rule-width) solid var(--gdj-color-mark-secondary);
  background-color: var(--gdj-color-sub);
  padding-left: var(--gdj-space-03);
  padding-right: var(--gdj-space-03);
  padding-top: var(--gdj-space-02);
  padding-bottom: var(--gdj-space-02);
  margin-top: var(--gdj-space-03);
  margin-bottom: var(--gdj-space-03);
  font-family: var(--gdj-font-headline);
  font-size: var(--gdj-type-03);
  font-weight: 600;
  color: var(--gdj-color-mark-secondary);
}

.gdg-table-track {
  overflow-x: auto;
  margin-top: var(--gdj-space-03);
  margin-bottom: var(--gdj-space-03);
  border: var(--gdj-rule-width) solid var(--gdj-color-line-rule);
  border-radius: var(--gdj-corner-sm);
}

.gdg-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--gdj-type-01);
  text-align: left;
  background-color: var(--gdj-color-blank);
}

.gdg-data-table th {
  background-color: var(--gdj-color-sub);
  color: var(--gdj-color-text-main);
  font-family: var(--gdj-font-headline);
  font-weight: 600;
  padding: var(--gdj-space-02);
  border-bottom: var(--gdj-rule-width) solid var(--gdj-color-line-rule);
}

.gdg-data-table td {
  padding: var(--gdj-space-02);
  border-bottom: var(--gdj-rule-width) solid var(--gdj-color-sub);
  color: var(--gdj-color-text-main);
}

.gdg-filter-shelf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gdj-space-01);
  margin-bottom: var(--gdj-space-03);
}

.gdg-filter-anchor {
  font-family: var(--gdj-font-headline);
  font-size: var(--gdj-type-01);
  font-weight: 600;
  padding-top: var(--gdj-space-01);
  padding-bottom: var(--gdj-space-01);
  padding-left: var(--gdj-space-02);
  padding-right: var(--gdj-space-02);
  background-color: var(--gdj-color-blank);
  border: var(--gdj-rule-width) solid var(--gdj-color-line-rule);
  border-radius: var(--gdj-corner-sm);
  color: var(--gdj-color-text-main);
}

.gdg-filter-anchor:hover {
  background-color: var(--gdj-color-mark-primary);
  color: var(--gdj-color-blank);
}

.gdg-charter-shelf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gdj-space-03);
  margin-top: var(--gdj-space-03);
  margin-bottom: var(--gdj-space-04);
}

.gdg-charter-unit {
  background-color: var(--gdj-color-blank);
  border: var(--gdj-rule-width) solid var(--gdj-color-line-rule);
  border-radius: var(--gdj-corner-sm);
  padding: var(--gdj-space-03);
}

.gdg-roster-shelf {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gdj-space-03);
  margin-bottom: var(--gdj-space-04);
}

.gdg-roster-unit {
  background-color: var(--gdj-color-blank);
  border: var(--gdj-rule-width) solid var(--gdj-color-line-rule);
  border-radius: var(--gdj-corner-sm);
  padding: var(--gdj-space-03);
}

.gdg-author-dossier {
  background-color: var(--gdj-color-blank);
  border: var(--gdj-rule-width) solid var(--gdj-color-line-rule);
  border-radius: var(--gdj-corner-sm);
  padding: var(--gdj-space-04);
  margin-bottom: var(--gdj-space-04);
}

.gdg-rule-divide {
  height: 0;
  border: 0;
  border-top: var(--gdj-rule-width) solid var(--gdj-color-line-rule);
  margin-top: var(--gdj-space-04);
  margin-bottom: var(--gdj-space-04);
}

/* Tương thích với markup hub/post: masthead một dòng, breadcrumb, khung bài, lưới 2 cột. */
.gdg-doc-article,
.gdg-doc-hub,
.gdg-doc-magazine {
  background-color: var(--gdj-color-base);
}

.gdg-masthead-strip {
  max-width: var(--gdj-frame-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gdj-space-03);
  padding-right: var(--gdj-space-03);
  padding-top: var(--gdj-space-02);
  padding-bottom: var(--gdj-space-02);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gdj-space-02);
}

.gdg-masthead-strip .gdg-wordmark {
  padding-top: 0;
  padding-bottom: 0;
}

nav.gdg-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--gdj-space-01);
}

nav.gdg-nav li {
  margin: 0;
  padding: 0;
}

nav.gdg-nav a {
  display: inline-block;
  font-family: var(--gdj-font-headline);
  font-size: var(--gdj-type-01);
  font-weight: 600;
  padding-top: var(--gdj-space-01);
  padding-bottom: var(--gdj-space-01);
  padding-left: var(--gdj-space-02);
  padding-right: var(--gdj-space-02);
  color: var(--gdj-color-text-main);
  border-radius: var(--gdj-corner-sm);
  transition: background-color var(--gdj-motion-quick) ease, color var(--gdj-motion-quick) ease;
}

nav.gdg-nav a:hover {
  background-color: var(--gdj-color-sub);
  color: var(--gdj-color-mark-primary);
}

nav.gdg-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 var(--gdj-space-03) 0;
  padding: 0;
  gap: var(--gdj-space-01);
  font-size: var(--gdj-type-01);
  color: var(--gdj-color-text-muted);
}

nav.gdg-crumbs li {
  display: flex;
  align-items: center;
  gap: var(--gdj-space-01);
}

nav.gdg-crumbs li:not(:last-child)::after {
  content: "/";
  color: var(--gdj-color-line-rule);
}

nav.gdg-crumbs li[aria-current="page"] {
  color: var(--gdj-color-text-main);
}

.gdg-lede-panel {
  max-width: var(--gdj-frame-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gdj-space-03);
  padding-right: var(--gdj-space-03);
  padding-top: var(--gdj-space-04);
  padding-bottom: var(--gdj-space-05);
}

.gdg-lede-panel h1 {
  font-family: var(--gdj-font-headline);
  font-size: var(--gdj-type-06);
  font-weight: 600;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: var(--gdj-space-03);
  color: var(--gdj-color-text-main);
}

.gdg-lede-panel h2 {
  font-family: var(--gdj-font-headline);
  font-size: var(--gdj-type-04);
  font-weight: 600;
  margin-top: var(--gdj-space-04);
  margin-bottom: var(--gdj-space-02);
  color: var(--gdj-color-text-main);
}

.gdg-lede-panel p {
  font-size: var(--gdj-type-02);
  line-height: 1.7;
  color: var(--gdj-color-text-main);
  margin-top: 0;
  margin-bottom: var(--gdj-space-03);
}

.gdg-strip--grid2 {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gdg-strip--grid2 .gdg-plate {
  margin-bottom: var(--gdj-space-02);
}

.gdg-strip--grid2 .gdg-plate img {
  width: 100%;
  height: auto;
  border-radius: var(--gdj-corner-sm);
  margin-bottom: var(--gdj-space-01);
  display: block;
}

.gdg-strip--grid2 .gdg-plate a {
  font-family: var(--gdj-font-headline);
  font-weight: 600;
  font-size: var(--gdj-type-02);
  color: var(--gdj-color-text-main);
}

.gdg-colophon-index {
  max-width: var(--gdj-frame-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gdj-space-03);
  padding-right: var(--gdj-space-03);
  font-size: var(--gdj-type-02);
  color: var(--gdj-color-text-muted);
  margin-bottom: var(--gdj-space-02);
}

.gdg-colophon-entry {
  max-width: var(--gdj-frame-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gdj-space-03);
  padding-right: var(--gdj-space-03);
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  gap: var(--gdj-space-02);
  font-size: var(--gdj-type-01);
}

.gdg-colophon-entry a {
  color: var(--gdj-color-text-muted);
}

/* 5 hub dùng 5 bố cục khác nhau: list / split / stack / table / grid (đã có ở trên). */
.gdg-rail {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gdg-rail li {
  border-bottom: var(--gdj-rule-width) solid var(--gdj-color-sub);
  padding-top: var(--gdj-space-02);
  padding-bottom: var(--gdj-space-02);
}

.gdg-rail li:first-child {
  padding-top: 0;
}

.gdg-rail a {
  font-family: var(--gdj-font-headline);
  font-weight: 600;
  font-size: var(--gdj-type-02);
  color: var(--gdj-color-text-main);
}

.gdg-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gdj-space-04);
}

.gdg-rail-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--gdj-type-02);
  background-color: var(--gdj-color-blank);
  border: var(--gdj-rule-width) solid var(--gdj-color-line-rule);
  border-radius: var(--gdj-corner-sm);
  overflow: hidden;
}

.gdg-rail-table th,
.gdg-rail-table td {
  padding: var(--gdj-space-02);
  border-bottom: var(--gdj-rule-width) solid var(--gdj-color-sub);
  text-align: left;
}

.gdg-rail-table th {
  background-color: var(--gdj-color-sub);
  font-family: var(--gdj-font-headline);
}

.gdg-rail-table a {
  font-weight: 600;
  color: var(--gdj-color-text-main);
}

/* Cột 2 của bảng này TỪNG là mã nội bộ K1-K4 và bị ẩn bằng display:none.
   Che bằng CSS là vá tạm: dữ liệu vẫn nằm trong DOM, bot và người xem source vẫn đọc được.
   Đã sửa tận gốc ở assemble.py -> cột giờ là NGÀY ĐĂNG, hiện bình thường. */
.gdg-rail-table td:last-child {
  white-space: nowrap;
  color: var(--gdj-ink-soft, inherit);
}

@media (min-width: 543px) {
  .gdg-dateline {
    flex-direction: row;
    justify-content: space-between;
  }
  .gdg-wordmark {
    font-size: var(--gdj-type-07);
  }
  .gdg-headline-large {
    font-size: var(--gdj-type-06);
  }
  .gdg-stat-shelf {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .gdg-bento-quad {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gdg-masthead-strip {
    flex-direction: row;
    justify-content: space-between;
  }
  .gdg-strip--grid2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gdj-space-03);
  }
  .gdg-strip--grid2 .gdg-plate {
    margin-bottom: 0;
  }
}

@media (min-width: 897px) {
  .gdg-lead-story {
    grid-template-columns: minmax(0, 543px) minmax(0, 1fr);
  }
  .gdg-feed-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gdg-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gdg-charter-shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .gdg-roster-shelf {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gdg-strip--grid2 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .gdg-shelf--split .gdg-stack {
    flex-direction: row;
  }
  .gdg-shelf--split .gdg-stack > .gdg-rail {
    flex: 1;
  }
}

@media (min-width: 1201px) {
  .gdg-measure {
    padding-left: 0;
    padding-right: 0;
  }
}

/* ─────────────────────────────────────────────────────────────────
   INTERNAL LINK IN-CONTENT — làm nổi bật để người đọc thấy rõ.
   ⛔ BẪY ĐÃ TRẢ GIÁ 15/09: bản đầu nhắm `.gdg-doc-article p a` — nhưng
      class đó nằm trên <body>, nên nó ăn luôn NAV, BREADCRUMB và FOOTER.
      Ảnh chụp cho thấy menu header đỏ + gạch chân hết. CSS đúng cú pháp,
      gate_design vẫn E=0, chỉ ảnh chụp mới lộ ra.
   ⇒ Phải nhắm vào THÂN BÀI THẬT: <main> ... <p>/<li>, rồi RESET lại cho
      mọi <nav> lồng bên trong main (breadcrumb nằm trong article).
   Token dùng đều trong hợp đồng design, không thêm hex/px/keyframes mới.
   ───────────────────────────────────────────────────────────────── */
main p a[href^="/"],
main li a[href^="/"],
main td a[href^="/"] {
  font-weight: 700;
  color: var(--gdj-color-mark-primary);
  text-decoration: underline;
  text-decoration-color: var(--gdj-color-mark-secondary);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  padding: 0 1px;
  border-radius: var(--gdj-corner-sm);
  transition: background-color var(--gdj-motion-quick) ease,
              color var(--gdj-motion-quick) ease;
}

main p a[href^="/"]:hover,
main li a[href^="/"]:hover,
main td a[href^="/"]:hover {
  background-color: var(--gdj-color-sub);
  color: var(--gdj-color-text-main);
  text-decoration-color: var(--gdj-color-mark-primary);
}

/* RESET — breadcrumb và mọi nav lồng trong main KHÔNG được ăn style trên */
main nav a[href^="/"],
main nav p a[href^="/"],
main nav li a[href^="/"] {
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
  background-color: transparent;
  padding: 0;
}

main nav a[href^="/"]:hover {
  color: var(--gdj-color-mark-primary);
  text-decoration: underline;
}

/* Bảng danh sách bài trong hub: cả cột đều là link -> chỉ đậm,
   gạch chân hàng loạt sẽ rối mắt; gạch chân chỉ khi rê chuột. */
main .gdg-rail-table td a[href^="/"] {
  text-decoration: none;
}

main .gdg-rail-table td a[href^="/"]:hover {
  text-decoration: underline;
  text-decoration-color: var(--gdj-color-mark-secondary);
}