:root {
  --paper: #eef1f5;
  --ink: #162033;
  --muted: #566178;
  --rule: #cbd3de;
  --link: #1b4db8;
  --r1: #2f8f5b;
  --r2: #7fa63a;
  --r3: #d6a21a;
  --r4: #d9741f;
  --r5: #c43d33;
  --display: "Bricolage Grotesque", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: "Source Serif 4", Georgia, "Times New Roman", serif;
  --wrap: 68rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 1.0625rem;
  line-height: 1.7;
}
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.25rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 10; }
.skip:focus { left: 0; }

/* Header */
.site-head { border-bottom: 1px solid var(--rule); }
.site-head .wrap {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .35rem 2rem;
  padding-top: 1.1rem; padding-bottom: 1.1rem;
}
.brand {
  font-family: var(--display); font-weight: 800; font-size: 1.4rem;
  letter-spacing: -.02em; color: var(--ink); text-decoration: none;
}
.nav { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; font-family: var(--display); font-weight: 500; }
.nav a { color: var(--ink); text-decoration: none; padding: .3rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--rule); }
.nav a[aria-current="page"] { border-bottom-color: var(--ink); }

/* Hero */
.hero { padding: 3.5rem 0 1.5rem; }
.hero h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(2.25rem, 6.5vw, 4.5rem); line-height: 1.04;
  letter-spacing: -.03em; margin: 0 0 1.1rem; max-width: 18ch;
}
.hero p { max-width: 38rem; color: var(--muted); margin: 0; }

/* Risk ladder (bộ lọc theo mức rủi ro) */
.ladder-wrap { margin-top: 2.5rem; }
.ladder-title { font-family: var(--display); font-weight: 700; font-size: 1rem; margin: 0 0 .6rem; }
.ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; }
.ladder button {
  appearance: none; border: 0; background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer; padding: 0 0 .5rem;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch;
}
.ladder .bar {
  display: block; height: 14px; background: var(--c);
  transition: height .15s ease;
  transform-origin: left center;
}
.ladder button:hover .bar { height: 20px; }
.ladder button[aria-pressed="true"] .bar { height: 28px; }
.ladder .lv { display: block; font-family: var(--display); font-weight: 700; font-size: .95rem; line-height: 1.25; margin-top: .5rem; }
.ladder .ct { display: block; font-size: .85rem; color: var(--muted); line-height: 1.3; }
.ladder button[aria-pressed="true"] .lv { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.ladder [data-level="1"] { --c: var(--r1); }
.ladder [data-level="2"] { --c: var(--r2); }
.ladder [data-level="3"] { --c: var(--r3); }
.ladder [data-level="4"] { --c: var(--r4); }
.ladder [data-level="5"] { --c: var(--r5); }

@media (prefers-reduced-motion: no-preference) {
  .ladder .bar { animation: grow .7s cubic-bezier(.2, .7, .2, 1) both; }
  .ladder button:nth-child(2) .bar { animation-delay: .08s; }
  .ladder button:nth-child(3) .bar { animation-delay: .16s; }
  .ladder button:nth-child(4) .bar { animation-delay: .24s; }
  .ladder button:nth-child(5) .bar { animation-delay: .32s; }
  @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* List header */
.list-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .25rem 1.5rem; margin: 2.75rem 0 .75rem;
}
.list-head h2 { font-family: var(--display); font-weight: 800; font-size: 1.6rem; letter-spacing: -.02em; margin: 0; }
.filter-note { color: var(--muted); font-size: .95rem; margin: 0; }
.filter-note button {
  appearance: none; border: 0; background: none; font: inherit; color: var(--link);
  text-decoration: underline; cursor: pointer; padding: 0; margin-left: .5rem;
}

/* Post list */
.posts { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.row {
  display: grid; grid-template-columns: 8rem 1fr 9rem; gap: .35rem 1.75rem;
  padding: 1.35rem 0; border-bottom: 1px solid var(--rule);
  color: inherit; text-decoration: none; align-items: start;
}
.row:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.row-date { font-variant-numeric: tabular-nums; font-size: .95rem; line-height: 1.45; }
.row-date small { display: block; color: var(--muted); font-size: .9rem; }
.row h3 { font-family: var(--display); font-weight: 700; font-size: 1.3rem; line-height: 1.25; letter-spacing: -.01em; margin: 0 0 .35rem; }
.row p { margin: 0; color: var(--muted); font-size: 1rem; line-height: 1.6; max-width: 40rem; }
.empty { padding: 2rem 0; color: var(--muted); border-bottom: 1px solid var(--rule); }

/* Risk meter */
.meter { display: inline-flex; align-items: flex-end; gap: 3px; font-family: var(--display); font-size: .9rem; line-height: 1; }
.meter .bars { display: inline-flex; align-items: flex-end; gap: 3px; }
.meter .b { width: 7px; background: var(--rule); display: block; }
.meter .b:nth-child(1) { height: 8px; }
.meter .b:nth-child(2) { height: 12px; }
.meter .b:nth-child(3) { height: 16px; }
.meter .b:nth-child(4) { height: 20px; }
.meter .b:nth-child(5) { height: 24px; }
.meter .b.on { background: var(--c); }
.meter .t { margin-left: .5rem; align-self: center; font-weight: 500; }
.meter[data-level="1"] { --c: var(--r1); }
.meter[data-level="2"] { --c: var(--r2); }
.meter[data-level="3"] { --c: var(--r3); }
.meter[data-level="4"] { --c: var(--r4); }
.meter[data-level="5"] { --c: var(--r5); }

/* Page + article */
.page { padding: 3rem 0 4rem; }
.page h1, .article h1 {
  font-family: var(--display); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.1; margin: 0 0 1rem;
}
.page .lede { color: var(--muted); max-width: 38rem; margin: 0 0 1rem; }
.article { max-width: 42rem; padding: 3rem 0 4rem; }
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem;
  padding: .85rem 0; margin: 0 0 2rem; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule);
  font-size: .95rem;
}
.article-meta time { font-variant-numeric: tabular-nums; }
.article h2 { font-family: var(--display); font-weight: 700; font-size: 1.55rem; letter-spacing: -.015em; line-height: 1.2; margin: 2.5rem 0 .75rem; }
.article p { margin: 0 0 1.2rem; }
.article ul, .article ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.article li { margin-bottom: .35rem; }
.article figure { margin: 2rem 0; }
.article img { max-width: 100%; height: auto; display: block; border: 1px solid var(--rule); background: #fff; }
.article figcaption { color: var(--muted); font-size: .9rem; margin-top: .5rem; }
.article table { border-collapse: collapse; width: 100%; font-size: .95rem; margin: 0 0 1.5rem; font-variant-numeric: tabular-nums; }
.article th, .article td { text-align: left; padding: .5rem .75rem .5rem 0; border-bottom: 1px solid var(--rule); }
.article th { font-family: var(--display); font-weight: 700; border-bottom: 2px solid var(--ink); }
.note { border-left: 3px solid var(--ink); padding: .25rem 0 .25rem 1rem; color: var(--muted); font-size: .95rem; }

/* Footer */
.site-foot { border-top: 1px solid var(--rule); padding: 1.75rem 0 2.5rem; color: var(--muted); font-size: .9rem; line-height: 1.6; }
.site-foot p { margin: 0 0 .35rem; max-width: 44rem; }

/* Mobile */
@media (max-width: 44rem) {
  .hero { padding-top: 2.25rem; }
  .row { grid-template-columns: 1fr; gap: .5rem; }
  .row-date small { display: inline; margin-left: .75rem; }
  .ladder { gap: .35rem; }
  .ladder .lv { font-size: .85rem; }
  .ladder .ct { font-size: .78rem; }
}