/* ============================================================
   ADOL — Technology hub / blog
   Loads AFTER style.css + static.css and reuses their tokens.

   Two surfaces, one token vocabulary:
     body.tech-hub    → dark charcoal + gold (the brand grade, for browsing)
     body.tech-reader → warm cream + charcoal (for reading 1500 words)

   The reader does NOT restyle .topbar/.btn/.site-footer component by
   component — it REDEFINES the :root custom properties on <body>, and the
   shared components follow automatically. Anything added here that hardcodes
   a colour instead of using a token will break that inheritance.

   Per-card accent: each card sets --cat-hue from its category, and every
   accent below derives from it. Adding a category needs no CSS change.
   ============================================================ */

/* ============================================================
   1 · SHARED PRIMITIVES
   ============================================================ */

/* Label text that only screen readers need — visible labels would crowd the
   filter bar, but an unlabelled search input is unusable without sight. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.32em;
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.32em 0.7em;
  border-radius: 100px;
  white-space: nowrap;
}
.badge--staff {
  color: var(--gold-bright);
  background: rgba(240, 198, 116, 0.11);
  border: 1px solid rgba(240, 198, 116, 0.34);
}
.badge--guest {
  color: var(--cream-soft);
  background: color-mix(in srgb, var(--cream) 7%, transparent);
  border: 1px solid var(--line);
}

.avatar {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.avatar--initials {
  background: var(--gold-sheen);
  color: #14100a;
}
.avatar--lg { width: 72px; height: 72px; font-size: 1.35rem; }

/* Numeric metadata (views, ratings) uses tabular figures so counts don't
   jitter horizontally when they tick up. */
.tnum { font-variant-numeric: tabular-nums; }

.icon { width: 1em; height: 1em; flex: none; stroke-width: 1.6; }

/* ============================================================
   2 · HUB — trang tin /technology (thiết kế lại 2026-10-25)
   ------------------------------------------------------------
   Cùng ngôn ngữ với các chặng trang chủ: ảnh nền thật + kính bán trong suốt,
   viền vàng mảnh, MỘT tông vàng cho mọi nhãn. Bản trước là nền đen phẳng,
   carousel lật thẻ, ba ô số liệu, 16 chip lĩnh vực và nhãn bảy màu — từng thứ
   có lý do riêng, cộng lại thì trang tin trông như một ứng dụng khác dán vào.

   Nền là ảnh hero trang chủ làm mờ sâu (hero-bg-sm: mờ 28px thì bản nhỏ cũng
   như bản lớn). Thẻ KHÔNG dùng backdrop-filter — nền phía sau đã mờ sẵn, một
   lớp phủ bán trong suốt là đủ đọc ra "kính", mà không tốn một layer GPU cho
   mỗi thẻ. Chỉ thanh lọc dính và ba thẻ hướng dẫn mới làm mờ thật.
   ============================================================ */

body.tech-hub {
  --gutter: clamp(1rem, 5vw, 5rem);
  --maxw: 1240px;
  --g-fill: linear-gradient(160deg, rgba(36, 28, 17, 0.56), rgba(12, 10, 7, 0.5));
  --g-line: rgba(240, 198, 116, 0.14);
  --g-line-hi: rgba(240, 198, 116, 0.42);
  background: var(--ink);
}
body.tech-hub main,
body.tech-hub .site-footer { position: relative; z-index: 1; }

/* ---- CẢNH NỀN (immersive) ----
   Ảnh toàn cảnh 1779×884 (hoàng hôn · thành phố · quả cầu · các bảng thông tin
   nổi) ghim cố định sau cả trang. Hai chế độ theo tỉ lệ màn hình, vì một ảnh 2:1
   không thể "cover" mà không cắt mất nửa:
     · màn NGANG (≥ 4:3): vừa khít bề ngang, neo đáy, thấy trọn cảnh. Phần trống
       phía trên là nền gần đen, ảnh tan vào đó bằng mặt nạ — vì nửa trên của ảnh
       vốn là bầu trời tối nên không có đường nối.
     · màn DỌC (điện thoại, máy tính bảng dọc): ảnh cao bằng màn hình, rộng gấp
       đôi, và js/tech-scene.js lia nó ngang theo cuộn.
   Ba lớp: ảnh → lớp tối (JS đổi độ đậm theo cuộn) → ::after là dải tối cố định
   ở mép trên/dưới để thanh menu và hàng thẻ luôn đọc được kể cả khi ảnh sáng. */
.hub-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #050403;
}
.hub-backdrop__img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  aspect-ratio: 1779 / 884;
  background: url('/img/news-bg.webp?v=a10af11b') center / 100% 100% no-repeat;
  transform-origin: 50% 100%;
  will-change: transform;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%);
  mask-image: linear-gradient(180deg, transparent 0, #000 24%);
}
.hub-backdrop__dim {
  position: absolute;
  inset: 0;
  background: #070605;
  opacity: 0;
  will-change: opacity;
}
.hub-backdrop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(5, 4, 3, 0.6) 0%,
    rgba(5, 4, 3, 0) 20%,
    rgba(5, 4, 3, 0) 58%,
    rgba(5, 4, 3, 0.5) 100%
  );
}
@media (max-aspect-ratio: 4 / 3) {
  .hub-backdrop__img {
    right: auto;
    top: 0;
    height: 100%;
    background-image: url('/img/news-bg-m.webp?v=416cd264');
    transform-origin: 0 50%;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
/* Màn dọc: độ tối khởi đầu khớp dimFrom() trong tech-scene.js, để trước khi
   script chạy không có một khung hình ảnh sáng chói rồi mới tối lại. */
@media (max-aspect-ratio: 4 / 3) {
  body.tech-hub .hub-backdrop__dim { opacity: 0.4; }
}
/* Bản nhẹ (máy yếu/mạng yếu): tấm 0,5 KB làm mờ sẵn thay cho 90–140 KB. */
html.lite .hub-backdrop__img { background-image: url('/img/news-backdrop.webp?v=84149fee'); }

/* ---- hero: màn đầu tiên là CẢNH, chữ nằm trong khoảng trời tối ---- */
.hub-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(5.5rem, 14vh, 8rem) 0 clamp(1rem, 3vh, 2rem);
}
/* Khoảng trời tối của ảnh nằm quanh 38% bề ngang (giữa hai cụm bảng nổi ở hai
   mép), nên khối chữ lấy tâm ở đó chứ không dán vào lề trái của lưới bài. */
.hub-hero__copy {
  max-width: 36rem;
  box-sizing: content-box;
  padding-inline: max(var(--gutter), calc(38vw - 18rem)) var(--gutter);
  /* Khoảng thở tối thiểu giữa khối chữ và bảng nổi bên dưới: khi màn vừa khít,
     margin-top:auto của bảng co về 0 và dòng "31 bài viết" dính vào mép bảng. */
  margin-bottom: clamp(1.1rem, 3vh, 2rem);
  text-shadow: 0 2px 28px rgba(5, 4, 3, 0.75);
}
.hub-kicker {
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}
.hub-title {
  font-family: var(--font-display);
  font-weight: 300;
  /* min(…vw, …vh): màn thấp (laptop 768px) thì chữ co theo chiều cao, để bảng nổi
     và hai thẻ chuyên mục vẫn nằm trọn trong màn hình đầu tiên. */
  font-size: clamp(2.2rem, min(5.6vw, 9.4vh), 5rem);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--cream);
  max-width: 16ch;
  text-wrap: balance;
}
/* Cụm chữ nhấn là vàng KIM LOẠI (cùng --gold-sheen với nút và logo), không phải
   một mảng vàng phẳng. text-shadow của khối cha sẽ lọt qua chữ trong suốt thành
   vệt bẩn — nên em dùng drop-shadow, và box-decoration-break giữ gradient liền
   khi cụm chữ rơi xuống dòng (dấu tiếng Việt ở đây rất cao: line-height ≥ 1.12). */
.hub-title em {
  font-style: italic;
  padding-inline: 0.04em;
  color: var(--gold-bright);
  /* Dải vàng riêng, sáng hơn --gold-sheen (vốn có hai đầu nâu sẫm, để chữ đen đặt
     lên nút): trên nền tối, hai đầu nâu làm cả cụm chữ trông xỉn. */
  background: linear-gradient(100deg, #e6bd5c 0%, #fbe9b8 48%, #d9a93f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  text-shadow: none;
  filter: drop-shadow(0 2px 16px rgba(5, 4, 3, 0.55));
}
.hub-lede {
  margin-top: 1rem;
  max-width: 46ch;
  font-size: clamp(0.92rem, 1.3vw, 1.05rem);
  line-height: 1.65;
  color: var(--cream-soft);
}
.hub-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
  font-size: 0.74rem;
  color: rgba(244, 228, 193, 0.64);
}
.hub-meta__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 0 4px rgba(240, 198, 116, 0.14);
}

/* ---- BẢNG NỔI "Bài mới nhất" (lấp khoảng giữa tiêu đề và thẻ chuyên mục) ----
   Kính + viền vàng như các bảng thông tin nổi trong ảnh nền. Một sợi sáng vàng
   chạy dọc viền trên — đủ để mắt dừng lại ở đây trước tiên mà không chớp nháy.
   margin-top:auto đẩy cả cụm (bảng + hai thẻ) xuống đáy, nên khi màn cao thì
   khoảng thở nằm ở TRÊN, ngay dưới tiêu đề, nơi ảnh trời hoàng hôn đẹp nhất. */
.hub-spot {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin: auto auto 0.8rem;
  border: 1px solid var(--g-line-hi);
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(36, 28, 17, 0.62), rgba(10, 8, 6, 0.55));
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 244, 214, 0.06);
}
.hub-spot[hidden] { display: none; }
.hub-spot.is-solo { grid-template-columns: minmax(0, 1fr); }
.hub-spot::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247, 220, 158, 0.95), transparent) no-repeat;
  background-size: 34% 100%;
  background-position: -40% 0;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hub-spot { animation: spot-in 0.9s var(--ease-out) 0.25s backwards; }
  .hub-spot::before { animation: spot-sweep 6s linear 1.2s infinite; }
}
@keyframes spot-in { from { opacity: 0; transform: translateY(22px); } }
@keyframes spot-sweep { to { background-position: 140% 0; } }

.hub-spot__main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.hub-spot__main:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -4px; border-radius: 20px; }
/* Khung ảnh ĐÚNG 16:9: ảnh bìa là 16:9 và đặt tiêu đề lớn ở bên trái — cho cột
   ảnh co giãn theo chiều cao thẻ thì object-fit: cover cắt mất nửa chữ. */
.hub-spot__media {
  display: block;
  position: relative;
  overflow: hidden;
  width: clamp(250px, 21vw, 380px);
  aspect-ratio: 16 / 9;
  align-self: center;
  margin: 1rem 0 1rem 1rem;
  border: 1px solid var(--g-line);
  border-radius: 12px;
}
.hub-spot__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  transition: transform 0.9s var(--ease-out);
}
.hub-spot__main:hover .hub-spot__media img { transform: scale(1.04); }
.hub-spot__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.6rem;
  min-width: 0;
  padding: clamp(1rem, 2vw, 1.7rem) clamp(1rem, 2vw, 1.8rem);
}
.hub-spot__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.7rem;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hub-spot__live {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.3em 0.8em 0.3em 0.65em;
  border: 1px solid rgba(240, 198, 116, 0.5);
  border-radius: 100px;
  color: var(--gold-bright);
}
.hub-spot__live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 0 0 rgba(247, 220, 158, 0.6);
}
@media (prefers-reduced-motion: no-preference) {
  .hub-spot__live i { animation: spot-pulse 2.4s ease-out infinite; }
}
@keyframes spot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(247, 220, 158, 0.55); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(247, 220, 158, 0); }
}
.hub-spot__cat { color: var(--gold); }
.hub-spot__time { color: rgba(244, 228, 193, 0.64); letter-spacing: 0.08em; }
.hub-spot__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.1vw, 1.85rem);
  line-height: 1.22;
  color: var(--cream);
  transition: color 0.3s var(--ease-out);
}
.hub-spot__main:hover .hub-spot__title { color: var(--gold-bright); }
.hub-spot__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--cream-soft);
}
.hub-spot__excerpt:empty { display: none; }
.hub-spot__go {
  align-self: flex-start;
  margin-top: 0.2rem;
  padding: 0.62em 1.3em;
  border-radius: 100px;
  background: var(--gold-sheen);
  color: #14100a;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.hub-spot__go span { display: inline-block; transition: transform 0.3s var(--ease-out); }
.hub-spot__main:hover .hub-spot__go span { transform: translateX(4px); }

/* Cột "Đọc tiếp": ba bài kế tiếp, chỉ chữ — để mắt quét nhanh. */
.hub-spot__next {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: clamp(0.9rem, 1.6vw, 1.4rem) clamp(1rem, 1.8vw, 1.6rem);
  border-left: 1px solid rgba(240, 198, 116, 0.14);
  background: rgba(8, 6, 4, 0.28);
}
.hub-spot__next[hidden] { display: none; }
.hub-spot__next-label {
  margin-bottom: 0.4rem;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}
.hub-spot__list { list-style: none; margin: 0; padding: 0; }
.hub-spot__list li + li { border-top: 1px solid rgba(240, 198, 116, 0.1); }
.hub-spot__list a {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.62rem 0;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.hub-spot__list a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; border-radius: 6px; }
.hub-spot__n {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: rgba(240, 198, 116, 0.55);
  font-variant-numeric: tabular-nums;
}
.hub-spot__t { display: grid; gap: 0.2rem; min-width: 0; }
.hub-spot__tc { font-size: 0.56rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.hub-spot__tt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 0.86rem;
  line-height: 1.38;
  color: var(--cream);
  transition: color 0.2s var(--ease-out);
}
.hub-spot__list a:hover .hub-spot__tt { color: var(--gold-bright); }

/* Có bảng nổi thì hai thẻ chuyên mục nằm sát dưới nó, không tự đẩy xuống nữa. */
.hub-spot:not([hidden]) + .hub-guide { margin-top: 0; }

/* Laptop thấp: bỏ đoạn dẫn + cột "Đọc tiếp" cho vừa chiều cao màn đầu tiên. */
@media (min-width: 761px) and (max-height: 820px) {
  .hub-hero { padding-top: clamp(4.4rem, 10.5vh, 6rem); }
  .hub-lede { margin-top: 0.7rem; }
  .hub-meta { margin-top: 0.7rem; }
  .hub-spot__excerpt { display: none; }
  .hub-spot__media { width: clamp(210px, 17vw, 300px); margin-block: 0.8rem; }
  .hub-spot__body { gap: 0.45rem; padding-block: 0.8rem; }
  .hub-spot__list a { padding-block: 0.45rem; }
}
@media (min-width: 761px) and (max-height: 750px) {
  .hub-spot { display: none; }
}
@media (max-width: 1060px) {
  .hub-spot { grid-template-columns: minmax(0, 1fr); }
  .hub-spot__next { display: none; }
}
@media (max-width: 760px) {
  /* Điện thoại: thẻ NGANG gọn — ảnh 16:9 nhỏ (vẫn đúng tỉ lệ, không cắt chữ) bên
     trái, tiêu đề bên phải; bỏ đoạn dẫn và nút (cả thẻ đã là vùng chạm). Một thẻ
     dọc có ảnh to che mất khung cảnh hoàng hôn — thứ làm màn đầu tiên đáng nhớ. */
  .hub-spot { margin-bottom: 0.5rem; border-radius: 16px; }
  .hub-spot__main { grid-template-columns: 124px minmax(0, 1fr); align-items: center; }
  .hub-spot__media { width: 124px; margin: 0.75rem 0 0.75rem 0.75rem; border-radius: 8px; }
  .hub-spot__excerpt, .hub-spot__go, .hub-spot__cat { display: none; }
  .hub-spot__body { gap: 0.4rem; padding: 0.7rem 0.9rem 0.7rem 0.8rem; }
  .hub-spot__title { font-size: 1rem; -webkit-line-clamp: 3; line-clamp: 3; }
}
@media (max-width: 760px) and (max-height: 640px) {
  .hub-spot__media { display: none; }
  .hub-spot__main { grid-template-columns: minmax(0, 1fr); }
}

/* ---- hai thẻ chuyên mục: bấm là lọc luôn + cuộn tới danh sách bài ---- */
.hub-guide {
  list-style: none;
  /* margin-top:auto đẩy ba thẻ xuống ĐÁY màn đầu tiên: giữa khối chữ và hàng
     thẻ là khoảng trống để ảnh nền thở — đó chính là phần "immersive". */
  margin: clamp(2rem, 5vh, 3rem) auto 0;
  margin-top: auto;
  padding: 0;
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}
.hub-hero__copy + .hub-guide { padding-top: clamp(1.6rem, 4vh, 2.6rem); box-sizing: content-box; }
.hub-cue {
  margin: clamp(0.7rem, 1.8vh, 1.2rem) 0 0;
  text-align: center;
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(244, 228, 193, 0.64);
}
.hub-cue span { display: inline-block; margin-left: 0.4em; }
@media (prefers-reduced-motion: no-preference) {
  .hub-cue span { animation: cue-bob 2.4s ease-in-out infinite; }
}
@keyframes cue-bob { 50% { transform: translateY(4px); } }
/* Màn rất thấp (điện thoại nằm ngang, laptop bị thu nhỏ cửa sổ): bỏ ép đủ một
   màn hình — chữ và thẻ xếp tự nhiên, ảnh nền vẫn ở sau. */
@media (max-height: 640px) {
  .hub-hero { min-height: 0; }
  .hub-cue { display: none; }
}
.guide {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  height: 100%;
  padding: 1.1rem 1.2rem 1.15rem;
  border: 1px solid var(--g-line);
  border-radius: 14px;
  background: var(--g-fill);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.3s var(--ease-out);
}
.guide__title { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; color: var(--cream); }
.guide__desc { font-size: 0.8rem; line-height: 1.55; color: var(--cream-soft); }
.guide__go { margin-top: auto; padding-top: 0.6rem; font-size: 0.74rem; color: var(--gold-bright); }
.guide__go span,
.pcard__go span { display: inline-block; transition: transform 0.3s var(--ease-out); }
.guide:hover { border-color: var(--g-line-hi); }
.guide:hover .guide__go span { transform: translateX(4px); }
.guide:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Chuyên mục chưa có bài: thẻ lùi lại, nhãn "Sắp ra mắt" thay cho mũi tên mời. */
.guide.is-soon { border-style: dashed; }
.guide.is-soon .guide__title,
.guide.is-soon .guide__desc { opacity: 0.6; }
.guide.is-soon .guide__go { color: rgba(244, 228, 193, 0.64); letter-spacing: 0.04em; }

/* ---- thanh lọc: một hàng kính dính trên đầu ---- */
.hub-filters {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 0.65rem var(--gutter);
  background: rgba(9, 8, 6, 0.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border-block: 1px solid var(--g-line);
}
.hub-filters__inner { max-width: var(--maxw); margin: 0 auto; }
.hf-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: 'seg seg' 'search toggle';
  gap: 0.55rem;
  align-items: center;
}
.seg {
  grid-area: seg;
  display: flex;
  gap: 0.2rem;
  padding: 0.2rem;
  border: 1px solid var(--g-line);
  border-radius: 100px;
  background: rgba(244, 228, 193, 0.03);
  overflow-x: auto;
  scrollbar-width: none;
}
.seg::-webkit-scrollbar { display: none; }
.seg__btn {
  flex: 1 0 auto;
  border: 0;
  background: transparent;
  color: var(--cream-soft);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 500;
  padding: 0.5rem 1rem;
  min-height: 38px;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s var(--ease-out), background-color 0.2s var(--ease-out);
}
.seg__btn:hover { color: var(--cream); }
.seg__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hf-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.seg__btn[aria-pressed='true'] {
  background: rgba(240, 198, 116, 0.15);
  color: var(--gold-bright);
  box-shadow: inset 0 0 0 1px rgba(240, 198, 116, 0.34);
}

.hub-search { grid-area: search; position: relative; display: block; }
.hub-search input {
  width: 100%;
  min-height: 42px;
  padding: 0 1rem 0 2.4rem;
  border: 1px solid var(--g-line);
  border-radius: 100px;
  background: rgba(244, 228, 193, 0.04);
  color: var(--cream);
  font: inherit;
  font-size: 16px; /* dưới 16px thì iOS tự phóng to trang khi bấm vào */
  transition: border-color 0.25s var(--ease-out);
}
.hub-search input::placeholder { color: rgba(244, 228, 193, 0.5); }
.hub-search input:focus { outline: none; border-color: var(--g-line-hi); }
.hub-search .icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  color: var(--cream-soft);
  pointer-events: none;
}

.hf-toggle {
  grid-area: toggle;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 42px;
  padding: 0 1rem;
  border: 1px solid var(--g-line);
  border-radius: 100px;
  background: transparent;
  color: var(--cream);
  font: inherit;
  font-size: 0.76rem;
  cursor: pointer;
}
.hf-toggle[aria-expanded='true'] { border-color: var(--g-line-hi); }
.hf-toggle__n {
  min-width: 1.35em;
  height: 1.35em;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gold-bright);
  color: #14100a;
  font-size: 0.66rem;
  font-weight: 700;
}
.hf-toggle__n[hidden] { display: none; }

.hf-more {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  padding-top: 0.7rem;
}
.hf-more.is-open { display: grid; }
.hf-more > .hf-field:first-child { grid-column: 1 / -1; }
.hf-field { display: grid; gap: 0.3rem; min-width: 0; }
.hf-field__label {
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cream-soft);
}
.hub-sort {
  width: 100%;
  min-height: 42px;
  -webkit-appearance: none;
  appearance: none;
  padding: 0 2.2rem 0 1rem;
  border: 1px solid var(--g-line);
  border-radius: 100px;
  background: rgba(244, 228, 193, 0.04)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23f0c674' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 0.95rem center / 10px 6px;
  color: var(--cream);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: border-color 0.25s var(--ease-out);
}
.hub-sort:focus { outline: none; border-color: var(--g-line-hi); }
.hub-sort option { background: #14100c; color: var(--cream); }
.hf-dates { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.hf-dates[hidden] { display: none; }
.hf-date {
  width: 100%;
  min-height: 42px;
  padding: 0 0.8rem;
  border: 1px solid var(--g-line);
  border-radius: 100px;
  background: rgba(244, 228, 193, 0.04);
  color: var(--cream);
  font: inherit;
  font-size: 16px;
  color-scheme: dark;
}

/* Thanh lọc dính ở top:0; menu cố định của site sẽ đè lên nó. Ở trang tin,
   menu đi theo trang và cuộn khuất — thanh lọc mới là thứ cần ở lại. */
body.tech-hub .topbar { position: absolute; }
/* Nút trên trang tin + trang đọc: viên thuốc như mọi điều khiển khác ở đây
   (thanh lọc, ô tìm, ô chọn, nút trang chủ). .btn của style.css vuông góc, chữ
   hoa giãn rộng — đặt trong thẻ kính bo 18px nó là hình khối lạc loài. */
body.tech-hub .btn,
body.tech-reader .btn {
  display: inline-flex;
  align-items: center;
  border-radius: 100px;
  letter-spacing: 0.08em;
  min-height: 46px;
  padding-inline: 1.6rem;
  justify-content: center;
}
@media (max-width: 600px) {
  .contrib__actions,
  .ask-band .s-actions { width: 100%; flex-direction: column; }
  .contrib__actions .btn,
  .ask-band .btn { width: 100%; }
}

/* Khách biết mình đang ở đâu: mục "Tin tức" sáng vàng. */
.topbar__nav a[aria-current='page'] { color: var(--gold-bright); }

/* Màn cảm ứng không có "rê chuột" để ảnh sáng lên — chỉ dịu nhẹ, không tối hẳn. */
@media (hover: none) {
  .pcard__media img,
  .rel-card__media img { filter: saturate(0.9) brightness(0.94); }
}

/* ---- lưới bài ---- */
.hub-body {
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(1.6rem, 4vh, 2.6rem) var(--gutter) 1rem;
}
.hub-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(0.9rem, 1.6vw, 1.4rem);
}

.hub-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  margin-bottom: 1.2rem;
}
.hub-result[hidden] { display: none; }
.hub-result__text { font-size: 0.78rem; color: var(--cream-soft); }
.hub-result__clear {
  border: 0;
  background: none;
  color: var(--gold-bright);
  font: inherit;
  font-size: 0.76rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  padding: 0.4rem 0;
}

.hub-empty { text-align: center; padding: clamp(3rem, 12vh, 6rem) 1rem; color: var(--cream-soft); }
.hub-empty__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--cream);
  margin-bottom: 0.8rem;
}

.hub-more { display: flex; justify-content: center; margin-top: clamp(1.6rem, 4vh, 2.6rem); }
.hub-more .btn { min-height: 48px; min-width: min(100%, 280px); justify-content: center; }
.hub-more .btn[hidden] { display: none; } /* .btn đặt display, đè lên [hidden] */

/* ---- thẻ bài ---- */
.pcard {
  position: relative;
  display: flex;
  border: 1px solid var(--g-line);
  border-radius: 16px;
  background: var(--g-fill);
  overflow: hidden;
  transition: border-color 0.35s var(--ease-out);
}
.pcard:hover { border-color: var(--g-line-hi); }
.pcard__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.pcard__link:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: -3px; border-radius: 16px; }

.pcard__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(244, 228, 193, 0.04);
}
.pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ảnh bìa đặt tiêu đề lớn ở nửa trên — cắt từ đỉnh thì chữ trong ảnh còn nguyên. */
  object-position: 50% 0%;
  display: block;
  /* Ảnh bìa là infographic chữ to, màu gắt — 24 tấm cạnh nhau thành một bức
     tường ồn ào và lấn át tiêu đề. Lúc nghỉ hạ sắc + độ sáng cho cả lưới êm
     lại; rê chuột vào thì ảnh sáng lên đúng tấm đang được chú ý. */
  filter: saturate(0.78) brightness(0.86);
  transition: transform 0.8s var(--ease-out), filter 0.5s var(--ease-out);
}
.pcard:hover .pcard__media img { transform: scale(1.035); filter: none; }

.pcard__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
  padding: 1.05rem 1.2rem 1.15rem;
}
.pcard__kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pcard__cat { color: var(--gold); }
.pcard__date { color: rgba(244, 228, 193, 0.64); letter-spacing: 0.08em; }
.pcard__date::before { content: '·'; margin-right: 0.5rem; color: rgba(244, 228, 193, 0.3); }
.pcard__flag {
  padding: 0.28em 0.7em;
  border: 1px solid rgba(240, 198, 116, 0.45);
  border-radius: 100px;
  color: var(--gold-bright);
  letter-spacing: 0.18em;
}
.pcard__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.14rem;
  line-height: 1.3;
  color: var(--cream);
  transition: color 0.3s var(--ease-out);
}
.pcard:hover .pcard__title { color: var(--gold-bright); }
.pcard__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--cream-soft);
}
.pcard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(240, 198, 116, 0.08);
  font-size: 0.72rem;
}
.pcard__read { color: rgba(244, 228, 193, 0.64); }
.pcard__go { color: var(--gold-bright); }
.pcard:hover .pcard__go span { transform: translateX(4px); }

/* ---- khung chờ ---- */
.pcard--skeleton { pointer-events: none; flex-direction: column; border-color: rgba(240, 198, 116, 0.08); }
.sk {
  background: linear-gradient(
    100deg,
    rgba(244, 228, 193, 0.04) 30%,
    rgba(244, 228, 193, 0.09) 50%,
    rgba(244, 228, 193, 0.04) 70%
  );
  background-size: 220% 100%;
  animation: sk-slide 1.5s var(--ease-out) infinite;
  border-radius: 3px;
}
.sk--media { aspect-ratio: 16 / 9; border-radius: 0; }
.sk--line { height: 0.7rem; margin: 0.55rem 1.2rem; }
.sk--line.is-short { width: 45%; }
@keyframes sk-slide {
  from { background-position: 140% 0; }
  to { background-position: -40% 0; }
}

/* ---- dải liên hệ cuối trang ---- */
.contrib {
  width: min(var(--maxw), calc(100% - 2 * var(--gutter)));
  margin: clamp(2.4rem, 7vh, 4.4rem) auto 0;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  border: 1px solid var(--g-line);
  border-radius: 18px;
  background: var(--g-fill);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem 3rem;
  flex-wrap: wrap;
}
.contrib__copy { max-width: 54ch; }
.contrib__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  line-height: 1.2;
  color: var(--cream);
  margin-bottom: 0.6rem;
}
.contrib__copy p { font-size: 0.86rem; line-height: 1.7; color: var(--cream-soft); }
.contrib__actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }

/* ============ máy tính bảng: hai cột ============ */
@media (min-width: 720px) {
  .hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============ máy tính ============ */
@media (min-width: 900px) {
  /* Một hàng: chuyên mục · lĩnh vực · sắp xếp · thời gian ········ ô tìm */
  .hub-filters__inner { display: flex; align-items: center; gap: 0.6rem; }
  .hf-row,
  .hf-more,
  .hf-more.is-open { display: contents; }
  .seg { order: 1; flex: none; }
  .hf-more > .hf-field { order: 2; }
  .hf-more .hf-field__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .hf-more .hub-sort { width: auto; min-width: 9.5rem; min-height: 40px; font-size: 0.74rem; }
  .hf-dates { order: 3; display: flex; gap: 0.5rem; }
  .hf-dates[hidden] { display: none; }
  .hf-dates .hf-field { display: flex; align-items: center; gap: 0.4rem; }
  .hf-dates .hf-field__label { position: static; width: auto; height: auto; clip: auto; }
  .hf-date { width: auto; min-height: 40px; font-size: 0.78rem; }
  .hub-search { order: 4; margin-left: auto; width: min(280px, 24vw); }
  .hub-search input { min-height: 40px; font-size: 0.8rem; }
  .hf-toggle { display: none; }

  .pcard--featured { grid-column: 1 / -1; }
  .pcard--featured .pcard__link { flex-direction: row; }
  .pcard--featured .pcard__media { flex: 0 0 58%; aspect-ratio: 16 / 9; }
  .pcard--featured .pcard__body { justify-content: center; gap: 0.8rem; padding: clamp(1.4rem, 3vw, 2.6rem); }
  .pcard--featured .pcard__title { font-size: clamp(1.5rem, 2.3vw, 2.05rem); line-height: 1.2; }
  .pcard--featured .pcard__excerpt { -webkit-line-clamp: 3; line-clamp: 3; font-size: 0.92rem; }
  .pcard--featured .pcard__foot { margin-top: 0.6rem; }
}

@media (min-width: 1100px) {
  .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============ điện thoại ============ */
@media (max-width: 760px) {
  /* Mục tiêu: thanh lọc + mép thẻ bài đầu tiên lọt vào màn hình đầu tiên, để
     khách thấy ngay đây là nơi có bài để đọc. */
  .hub-hero { padding-top: 5rem; padding-bottom: 1rem; }
  /* Màn dọc: ảnh đã đổi sang chế độ lia ngang, không còn "khoảng trời giữa" để
     canh — chữ quay về lề chung. */
  .hub-hero__copy { padding-inline: var(--gutter); }
  .hub-kicker { margin-bottom: 0.7rem; }
  .hub-title { font-size: clamp(1.9rem, 8.4vw, 2.4rem); }
  .hub-lede { margin-top: 0.7rem; font-size: 0.9rem; }
  .hub-meta { margin-top: 0.7rem; }
  /* Ba thẻ hướng dẫn thành ba dòng gọn: giờ + tên chuyên mục, mũi tên bên phải.
     Mô tả bỏ — trên điện thoại, bài viết mới là thứ cần lên màn hình sớm. */
  .hub-guide { grid-template-columns: 1fr; gap: 0.5rem; }
  .guide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'title go';
    column-gap: 1rem;
    row-gap: 0.15rem;
    align-items: center;
    padding: 0.65rem 1rem;
  }
  .guide__title { grid-area: title; font-size: 1.06rem; }
  .guide__desc { display: none; }
  .guide__go { grid-area: go; margin: 0; padding: 0; font-size: 0; }
  .guide__go span { font-size: 1.1rem; }
}

/* ---- chip — tab trạng thái của trang quản trị (hub không còn dùng) ---- */
.chip {
  flex: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--cream-soft);
  font: inherit;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.52rem 0.95rem;
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.chip:hover { color: var(--cream); border-color: rgba(240, 198, 116, 0.5); }
.chip[aria-pressed='true'] { color: #14100a; background: var(--gold-sheen); border-color: transparent; font-weight: 500; }
.chip__count { opacity: 0.55; margin-left: 0.4em; font-variant-numeric: tabular-nums; }

/* Matches style.css's own `@media (max-width: 820px) { .topbar__nav {
   display: none } }`, which hides the nav site-wide for the cinematic pages.
   That is right for the hub (its filter bar carries navigation) but leaves an
   ARTICLE with no route back to the index except the browser Back button — so
   the reader gets its nav back, trimmed to the one link that matters.
   The breakpoint has to be 820px, not 720px: at 780px the site rule was still
   hiding the whole <nav> while this block wasn't active yet. */
@media (max-width: 820px) {
  body.tech-reader .topbar__nav { display: flex; }
  body.tech-reader .topbar__nav a:not(:first-child) { display: none; }
  body.tech-reader .topbar__nav a:first-child { font-size: 0.68rem; }
}

/* ============================================================
   3 · READER — trang đọc bài (2026-10-25: chuyển sang nền kính tối)
   ------------------------------------------------------------
   Bản cũ là nền kem sáng: hợp đọc dài, nhưng là trang DUY NHẤT của site không
   đen–vàng — bấm một thẻ trên trang tin là như rời khỏi ADOL. Giờ dùng chung
   .hub-backdrop với trang tin, lớp phủ tối hơn (0.9) để cột chữ đủ tương phản.
   Chữ thân bài không trắng tinh mà kem 88% — trên nền tối, trắng tuyệt đối
   gây chói sau vài trăm chữ.
   ============================================================ */

body.tech-reader {
  --g-fill: linear-gradient(160deg, rgba(36, 28, 17, 0.5), rgba(12, 10, 7, 0.46));
  --g-line: rgba(240, 198, 116, 0.14);
  --g-line-hi: rgba(240, 198, 116, 0.42);
  --line: rgba(240, 198, 116, 0.14);
  background: var(--ink);
  color: var(--cream);
}
body.tech-reader main,
body.tech-reader .site-footer { position: relative; z-index: 1; }
body.tech-reader .hub-backdrop__dim { opacity: 0.78; }
body.tech-reader .page-grain { display: none; }
/* Thanh trên cùng: một dải kính ĐẶC, mỏng, có vạch đáy. Bản dải mờ dần để chữ
   bài viết trôi dưới nửa trong suốt của nó — thành những vệt chữ nhoè cạnh
   logo mỗi lần cuộn. Kính đặc 82% + blur thì nội dung khuất hẳn, gọn. */
body.tech-reader .topbar {
  padding-block: clamp(0.7rem, 1.6vh, 1rem);
  background: rgba(9, 8, 6, 0.82);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--g-line);
}
body.tech-reader .topbar__mark { height: clamp(26px, 3.6vh, 34px); width: auto; }
body.tech-reader .topbar__nav a { color: rgba(244, 228, 193, 0.78); text-shadow: none; }
body.tech-reader .topbar__nav a:hover { color: var(--gold-bright); }
body.tech-reader .site-footer { border-top-color: var(--line); }

/* ---- arrival ----
   The hub's flip ends on a full-screen cream wipe, and this page's surface is
   that same cream. Rising the header in behind it makes the two documents read
   as one movement instead of a page swap. It is `backwards`-filled so nothing
   flashes at full opacity before its delay elapses. */
@media (prefers-reduced-motion: no-preference) {
  body.tech-reader .art-head__cat,
  body.tech-reader .art-title,
  body.tech-reader .art-standfirst,
  body.tech-reader .art-meta,
  body.tech-reader .art-hero {
    animation: reader-in 0.75s var(--ease-out) backwards;
  }
  body.tech-reader .art-head__cat { animation-delay: 0.02s; }
  body.tech-reader .art-title { animation-delay: 0.08s; }
  body.tech-reader .art-standfirst { animation-delay: 0.15s; }
  body.tech-reader .art-meta { animation-delay: 0.21s; }
  body.tech-reader .art-hero { animation-delay: 0.27s; }
}
@keyframes reader-in {
  from { opacity: 0; transform: translateY(18px); }
}

/* ---- reading progress ---- */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 50;
  background: transparent;
}
.progress__fill {
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transform-origin: 0 50%;
}

/* ---- article header ---- */
.art-head {
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(6.5rem, 15vh, 9rem) clamp(1.4rem, 6vw, 2rem) 0;
  text-align: center;
}
.art-head__cat {
  display: inline-block;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  padding: 0.42em 0.95em;
  border-radius: 100px;
  /* Một tông vàng như mọi nhãn khác của site — không còn viên màu theo lĩnh vực. */
  color: var(--gold-bright);
  background: rgba(240, 198, 116, 0.07);
  border: 1px solid rgba(240, 198, 116, 0.3);
  margin-bottom: 1.5rem;
  text-decoration: none;
}
.art-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.14;
  letter-spacing: -0.012em;
  text-wrap: balance;
  margin-bottom: 1.1rem;
}
.art-standfirst {
  font-size: clamp(1rem, 1.5vw, 1.14rem);
  line-height: 1.65;
  color: var(--cream-soft);
  max-width: 60ch;
  margin: 0 auto 2rem;
  text-wrap: pretty;
}
.art-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.55rem 1.1rem;
  font-size: 0.76rem;
  color: var(--cream-soft);
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.art-meta__author { display: inline-flex; align-items: center; gap: 0.5rem; }
.art-meta__dot { opacity: 0.4; }
/* Màn hẹp: tác giả chiếm trọn một dòng, bỏ dấu chấm ngay sau nó — nếu không dấu
   "·" bị treo lẻ loi ở cuối dòng tác giả. */
@media (max-width: 600px) {
  .art-meta__author { flex-basis: 100%; justify-content: center; }
  .art-meta__author + .art-meta__dot { display: none; }
}

.art-hero {
  max-width: 1080px;
  margin: clamp(2rem, 5vh, 3.2rem) auto 0;
  padding-inline: clamp(1.4rem, 6vw, 2rem);
}
.art-hero img {
  width: 100%;
  /* height:auto is REQUIRED, not cosmetic. The tag carries width/height
     attributes (for layout stability), and those act as presentation hints —
     leaving height at 720px made both dimensions definite, which makes the
     browser ignore aspect-ratio entirely and gave a 1016×720 box that
     object-fit: cover filled by slicing the sides off the artwork. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: 16px;
  border: 1px solid var(--g-line);
}

/* ---- article layout: sticky ToC beside the column ---- */
.art-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(2.4rem, 6vh, 4rem) clamp(1.4rem, 6vw, 2rem) 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.art-col { min-width: 0; max-width: 68ch; margin-inline: auto; }

.toc {
  position: sticky;
  top: 6rem;
  border-left: 1px solid var(--line);
  padding-left: 1.1rem;
}
.toc__label {
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.toc__list { list-style: none; display: grid; gap: 0.55rem; padding: 0; margin: 0; }
.toc__item--h3 { padding-left: 0.85rem; }
.toc__item a {
  color: var(--cream-soft);
  text-decoration: none;
  font-size: 0.78rem;
  line-height: 1.45;
  transition: color 0.25s var(--ease-out);
}
.toc__item a:hover { color: var(--gold-bright); }
.toc__item.is-active a { color: var(--gold-bright); font-weight: 500; }

/* ---- article prose ----
   Everything here targets .prose descendants because the body HTML is
   machine-generated from Word: it carries no classes of its own. */
.prose {
  font-size: clamp(1.02rem, 1.25vw, 1.115rem);
  line-height: 1.82;
  color: rgba(244, 228, 193, 0.88);
  text-wrap: pretty;
}
.prose h2,
.prose h3 { color: var(--cream); }
.prose > * + * { margin-top: 1.35em; }
.prose h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.72rem);
  line-height: 1.28;
  letter-spacing: -0.008em;
  margin-top: 2.4em;
  /* Anchor jumps from the ToC must clear the fixed topbar. */
  scroll-margin-top: 5.5rem;
}
.prose h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.8vw, 1.28rem);
  margin-top: 2em;
  scroll-margin-top: 5.5rem;
}
.prose strong { font-weight: 600; color: #fbf1da; }
.prose em { font-style: italic; }
.prose a {
  color: var(--gold-bright);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--gold-bright) 42%, transparent);
}
.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.55em; }
.prose li::marker { color: var(--gold); }
.prose blockquote {
  border-left: 2px solid var(--gold);
  padding: 0.2em 0 0.2em 1.35em;
  font-family: var(--font-display);
  font-size: 1.12em;
  line-height: 1.6;
  color: color-mix(in srgb, var(--cream) 88%, transparent);
}
.prose img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  margin-block: 2em;
  border-radius: 12px;
}
.prose figcaption {
  font-size: 0.8rem;
  color: var(--cream-soft);
  text-align: center;
  margin-top: -1.2em;
}
.prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.6em; }
.prose code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: color-mix(in srgb, var(--cream) 7%, transparent);
  padding: 0.15em 0.4em;
  border-radius: 3px;
}
/* Tables arrive from Word without <thead>; the first row is the header in
   practice, so it is styled positionally. Wide tables scroll inside the
   column rather than widening the page. */
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93em;
  display: block;
  overflow-x: auto;
  background: rgba(244, 228, 193, 0.025);
}
.prose th, .prose td {
  border: 1px solid var(--line);
  padding: 0.62em 0.85em;
  text-align: left;
  vertical-align: top;
}
/* Bảng từ Word thường không có <thead> nên dòng đầu đóng vai tiêu đề; bảng có
   <thead> thật thì dòng dữ liệu đầu tiên KHÔNG được tô như tiêu đề. */
.prose table:not(:has(thead)) tr:first-child td, .prose th {
  background: color-mix(in srgb, var(--gold) 11%, transparent);
  font-weight: 600;
}
/* Word wraps every cell's text in a <p>; its margin would double the padding. */
.prose td > p, .prose th > p { margin: 0; }
.prose td > p + p { margin-top: 0.6em; }

/* ---- rating ---- */
.rate {
  margin-top: clamp(2.6rem, 6vh, 4rem);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--g-line);
  background: var(--g-fill);
  border-radius: 16px;
  text-align: center;
}
.rate__q {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  margin-bottom: 0.5rem;
}
.rate__hint { font-size: 0.79rem; color: var(--cream-soft); margin-bottom: 1.2rem; }
.rate__stars {
  display: inline-flex;
  gap: 0.28rem;
  /* One hover target that lights up every star to its left — the whole point
     is that rating costs a single click and no thought. */
  direction: ltr;
}
.rate__star {
  background: none;
  border: 0;
  padding: 0.15rem;
  cursor: pointer;
  font-size: 1.85rem;
  line-height: 1;
  color: color-mix(in srgb, var(--cream) 22%, transparent);
  transition: color 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.rate__star:hover { transform: scale(1.16); }
.rate__star.is-on { color: var(--gold); }
.rate__star:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; border-radius: 3px; }
.rate__result { margin-top: 1rem; font-size: 0.82rem; color: var(--cream-soft); min-height: 1.4em; }
.rate__result strong { color: var(--gold-bright); font-size: 1.05rem; }
.rate.is-done .rate__stars { pointer-events: none; opacity: 0.92; }

/* ---- author box ---- */
.author-box {
  margin-top: clamp(2.2rem, 5vh, 3.2rem);
  padding: clamp(1.4rem, 3vw, 2rem);
  border: 1px solid var(--g-line);
  border-radius: 16px;
  display: flex;
  gap: 1.3rem;
  align-items: flex-start;
  background: var(--g-fill);
}
.author-box__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.28rem;
}
.author-box__role {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.7rem;
}
.author-box__bio { font-size: 0.87rem; line-height: 1.7; color: var(--cream-soft); }

/* ---- share + ask ---- */
.art-share {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.art-share__label {
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-soft);
  margin-right: 0.3rem;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  color: var(--cream-soft);
  font: inherit;
  font-size: 0.74rem;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.25s, border-color 0.25s;
}
.share-btn:hover { color: var(--gold-bright); border-color: var(--gold-bright); }

.ask-band {
  margin: clamp(3rem, 8vh, 5rem) auto 0;
  width: min(1116px, calc(100% - 2 * clamp(1.4rem, 6vw, 2rem)));
  padding: clamp(1.5rem, 4vw, 2.4rem);
  border: 1px solid var(--g-line);
  border-radius: 18px;
  background: var(--g-fill);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.ask-band__copy { max-width: 52ch; }
.ask-band__title { font-family: var(--font-display); font-size: 1.28rem; margin-bottom: 0.4rem; }
.ask-band__copy p { font-size: 0.85rem; line-height: 1.65; color: var(--cream-soft); }

/* ---- related ---- */
.rel {
  max-width: 1180px;
  margin: clamp(2.4rem, 6vh, 4rem) auto 0;
  padding: 0 clamp(1.4rem, 6vw, 2rem) clamp(3rem, 8vh, 5rem);
}
.rel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  margin-top: 1.4rem;
}
/* Cùng mẫu thẻ kính với lưới trang tin. */
.rel-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--g-line);
  border-radius: 16px;
  background: var(--g-fill);
  overflow: hidden;
  transition: border-color 0.35s var(--ease-out);
}
.rel-card:hover { border-color: var(--g-line-hi); }
.rel-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(244, 228, 193, 0.04); }
.rel-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0%;
  display: block;
  filter: saturate(0.78) brightness(0.86);
  transition: transform 0.8s var(--ease-out), filter 0.5s var(--ease-out);
}
.rel-card:hover .rel-card__media img { transform: scale(1.035); filter: none; }
.rel-card__cat {
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 0.95rem 1.05rem 0.35rem;
}
.rel-card:hover .rel-card__title { color: var(--gold-bright); }
/* Nhãn bài do tác giả chọn tay: viên vàng viền mảnh nằm cạnh tên lĩnh vực. */
.rel-card__pick {
  display: inline-block;
  margin-left: 0.7em;
  padding: 0.22em 0.7em;
  border: 1px solid rgba(240, 198, 116, 0.45);
  border-radius: 100px;
  color: var(--gold-bright);
  font-size: 0.9em;
  letter-spacing: 0.12em;
  vertical-align: 0.05em;
}
.rel-card__title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  line-height: 1.32;
  color: var(--cream);
  padding: 0 1.05rem 0.5rem;
  flex: 1;
  transition: color 0.3s var(--ease-out);
}
.rel-card__meta { font-size: 0.7rem; color: rgba(244, 228, 193, 0.64); padding: 0 1.05rem 1.05rem; }

@media (max-width: 1000px) {
  .art-wrap { grid-template-columns: minmax(0, 1fr); }
  /* The sticky rail has nowhere to live in one column; the outline is a
     nice-to-have, not content, so it is dropped rather than stacked. */
  .toc { display: none; }
}

/* ============================================================
   4 · FORMS (contribute + admin login)
   ============================================================ */

.form-page { max-width: 860px; margin: 0 auto; padding: clamp(6.5rem, 15vh, 9rem) clamp(1.4rem, 6vw, 2rem) 4rem; }

.tfield { margin-bottom: 1.5rem; }
.tfield__label {
  display: block;
  font-size: 0.63rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.tfield__hint { font-size: 0.76rem; line-height: 1.55; color: var(--cream-soft); margin-top: 0.5rem; }
.tfield__req { color: var(--gold-bright); }

.input, .textarea, .select {
  width: 100%;
  background: color-mix(in srgb, var(--cream) 4%, transparent);
  border: 1px solid var(--line);
  color: var(--cream);
  font: inherit;
  font-size: 0.92rem;
  padding: 0.75rem 0.95rem;
  border-radius: 2px;
  transition: border-color 0.25s var(--ease-out);
}
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--gold-bright); }
.textarea { resize: vertical; min-height: 5.5rem; line-height: 1.6; }
.select option { background: var(--ink-2); color: var(--cream); }

.tfield-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
}

/* ---- chọn bài "Đọc tiếp" (trình soạn bài) ----
   Ba ô cố định: ô đã chọn hiện tiêu đề + nút lên/xuống/bỏ; ô còn trống ghi rõ
   hệ thống sẽ tự gợi ý. Ô tìm hiện danh sách kết quả ngay bên dưới, bấm là gắn. */
.relpick__slots { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.5rem; counter-reset: relslot; }
.relpick__slot {
  counter-increment: relslot;
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--cream) 3%, transparent);
}
.relpick__slot::before {
  content: counter(relslot);
  font-family: var(--font-display);
  color: var(--gold);
  text-align: center;
}
.relpick__slot.is-empty { border-style: dashed; color: var(--cream-soft); font-size: 0.8rem; }
.relpick__slot.is-empty::before { opacity: 0.5; }
.relpick__title { font-size: 0.86rem; line-height: 1.35; color: var(--cream); min-width: 0; }
.relpick__title small { display: block; margin-top: 0.15rem; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.relpick__title.is-gone { color: var(--cream-soft); text-decoration: line-through; }
.relpick__btns { display: inline-flex; gap: 0.25rem; }
.relpick__btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  color: var(--cream-soft);
  font: inherit;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.relpick__btn:hover:not(:disabled) { color: var(--gold-bright); border-color: var(--gold-bright); }
.relpick__btn:disabled { opacity: 0.3; cursor: default; }
.relpick__results {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0.25rem;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--ink-2) 92%, transparent);
}
.relpick__results[hidden] { display: none; }
.relpick__opt {
  display: block;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--cream);
  font: inherit;
  font-size: 0.84rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}
.relpick__opt small { display: block; margin-top: 0.15rem; font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.relpick__opt:hover:not(:disabled), .relpick__opt:focus-visible { background: rgba(240, 198, 116, 0.1); outline: none; }
.relpick__opt:disabled { opacity: 0.45; cursor: default; }
.relpick__empty { padding: 0.7rem; font-size: 0.8rem; color: var(--cream-soft); }

/* ---- dropzone ---- */
.drop {
  border: 1.5px dashed color-mix(in srgb, var(--gold) 42%, transparent);
  border-radius: 4px;
  padding: clamp(1.8rem, 5vw, 3rem) 1.4rem;
  text-align: center;
  cursor: pointer;
  background: color-mix(in srgb, var(--gold) 4%, transparent);
  transition: border-color 0.25s, background 0.25s, transform 0.25s var(--ease-out);
}
.drop:hover, .drop.is-over {
  border-color: var(--gold-bright);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}
.drop.is-over { transform: scale(1.01); }
.drop__icon { font-size: 2rem; color: var(--gold); line-height: 1; margin-bottom: 0.8rem; }
.drop__title { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 0.4rem; }
.drop__hint { font-size: 0.78rem; color: var(--cream-soft); }
.drop.is-busy { pointer-events: none; opacity: 0.6; }
.drop.is-done { border-style: solid; border-color: color-mix(in srgb, var(--gold) 60%, transparent); }

.imgdrop {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px dashed var(--line);
  border-radius: 3px;
  padding: 0.9rem;
  cursor: pointer;
  transition: border-color 0.25s;
}
.imgdrop:hover { border-color: var(--gold-bright); }
.imgdrop__preview {
  width: 104px;
  height: 59px;
  flex: none;
  border-radius: 2px;
  object-fit: cover;
  background: var(--ink-2);
  display: grid;
  place-items: center;
  font-size: 0.62rem;
  color: var(--cream-soft);
  overflow: hidden;
}
.imgdrop__preview--avatar { width: 59px; height: 59px; border-radius: 50%; }
.imgdrop__preview img { width: 100%; height: 100%; object-fit: cover; }
.imgdrop__text { font-size: 0.79rem; color: var(--cream-soft); line-height: 1.5; }

/* ---- live preview of the converted document ---- */
.preview {
  border: 1px solid var(--line);
  border-radius: 3px;
  margin-top: 1rem;
  overflow: hidden;
}
.preview__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--cream) 4%, transparent);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-soft);
}
/* The preview shows the article on its real reading surface — cream, serif
   headings — so a contributor sees exactly what gets published. */
.preview__body {
  background: #f7f2e8;
  color: #191713;
  padding: clamp(1.2rem, 3vw, 2rem);
  max-height: 460px;
  overflow-y: auto;
}
.preview__body.prose { --cream: #191713; --cream-soft: rgba(25,23,19,.74); --gold: #9a6a1c; --gold-bright: #7d5514; --line: rgba(25,23,19,.15); }

.alert {
  padding: 0.85rem 1.1rem;
  border-radius: 3px;
  font-size: 0.82rem;
  line-height: 1.6;
  margin-bottom: 1.2rem;
  border: 1px solid;
}
.alert--err { color: #ffc9bd; background: rgba(150, 40, 20, 0.18); border-color: rgba(220, 90, 60, 0.45); }
.alert--ok { color: #bdf0d2; background: rgba(20, 110, 70, 0.18); border-color: rgba(60, 190, 130, 0.42); }
.alert--warn { color: #f2dfb0; background: rgba(150, 110, 20, 0.16); border-color: rgba(220, 175, 70, 0.42); }
.alert:empty { display: none; }

.form-actions {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
/* style.css's .btn never sets a background because every existing use is an
   <a>. On a real <button> the UA default (rgb(240,240,240)) shows through, so
   a ghost button rendered as a light grey slab with cream text on it —
   effectively invisible. .btn--gold sets its own background and is unaffected. */
.btn--ghost { background: transparent; }
button.btn { cursor: pointer; font-family: inherit; }
button.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; filter: none; }

.tsteps { display: flex; gap: 0.6rem; margin-bottom: 2.4rem; flex-wrap: wrap; }
.tstep {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-soft);
}
.tstep__n {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line);
  font-size: 0.66rem;
}
.tstep.is-done .tstep__n { background: var(--gold-sheen); color: #14100a; border-color: transparent; }
.tstep.is-done { color: var(--cream); }
.tstep__sep { color: var(--line); }

/* ============================================================
   5 · ADMIN
   ============================================================ */

.admin { max-width: 1240px; margin: 0 auto; padding: clamp(6.5rem, 14vh, 8.5rem) clamp(1.4rem, 5vw, 3rem) 4rem; }
.admin-login { max-width: 380px; margin: 0 auto; }

.admin-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.8rem; flex-wrap: wrap; }

.admin-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 1.6rem;
}
.admin-head__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* ---- editor ---- */
.ed-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
}
.ed-side {
  border-left: 1px solid var(--line);
  padding-left: clamp(1rem, 2vw, 1.6rem);
}
.ed-side .tfield { margin-bottom: 1.2rem; }

.ed-toolbar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 2px 2px 0 0;
  background: color-mix(in srgb, var(--cream) 5%, transparent);
  /* Sticks to the top of the scroll so formatting stays reachable in a long
     article instead of being stranded above the fold. */
  position: sticky;
  top: 0;
  z-index: 5;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ed-toolbar button {
  min-width: 32px;
  height: 30px;
  padding: 0 0.5rem;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--cream-soft);
  font: inherit;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.ed-toolbar button:hover { color: var(--gold-bright); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.ed-toolbar button.is-on { color: #14100a; background: var(--gold-sheen); border-color: transparent; }
.ed-toolbar__sep { width: 1px; height: 18px; background: var(--line); margin: 0 0.3rem; }

/* The editing surface deliberately mirrors the published article: cream page,
   .prose type. Editing dark-on-dark and publishing dark-on-cream would mean
   never seeing what readers see. */
.ed-body {
  --ink: #f7f2e8;
  --ink-2: #efe6d4;
  --cream: #191713;
  --cream-soft: rgba(25, 23, 19, 0.74);
  --gold: #9a6a1c;
  --gold-bright: #7d5514;
  --line: rgba(25, 23, 19, 0.15);
  background: #f7f2e8;
  color: #191713;
  border: 1px solid rgba(240, 198, 116, 0.3);
  border-radius: 0 0 2px 2px;
  padding: clamp(1.2rem, 2.4vw, 2rem);
  min-height: 45vh;
  max-height: 62vh;
  overflow-y: auto;
  font-size: 1rem;
}
.ed-body:focus { outline: none; border-color: var(--gold-bright); }
.ed-body:empty::before {
  content: 'Nhập nội dung bài viết…';
  color: rgba(25, 23, 19, 0.4);
}
/* Inside the editor headings need no huge top margin — it makes the caret jump
   around and wastes the limited scroll box. */
.ed-body.prose h2 { margin-top: 1.4em; }
.ed-body.prose h3 { margin-top: 1.1em; }
.ed-body.prose > *:first-child { margin-top: 0; }

/* ---- revision history ---- */
.rev {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
  font-size: 0.72rem;
  color: var(--cream-soft);
}
.rev:last-child { border-bottom: 0; }
.rev__when { font-variant-numeric: tabular-nums; }
.rev__note { color: var(--gold); font-size: 0.66rem; }
.rev button {
  flex: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--cream-soft);
  font: inherit;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 100px;
  cursor: pointer;
}
.rev button:hover { color: var(--gold-bright); border-color: var(--gold-bright); }
.rev--empty { color: color-mix(in srgb, var(--cream) 40%, transparent); border: 0; }

/* ---- curriculum order ---- */
.ord-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) 150px;
  gap: 1rem;
  align-items: center;
  padding: 0.55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
}
.ord-row input {
  width: 100%;
  background: color-mix(in srgb, var(--cream) 5%, transparent);
  border: 1px solid var(--line);
  color: var(--cream);
  font: inherit;
  font-size: 0.85rem;
  text-align: center;
  padding: 0.4rem;
  border-radius: 2px;
  font-variant-numeric: tabular-nums;
}
.ord-row input:focus { outline: none; border-color: var(--gold-bright); }
.ord-row__title { font-family: var(--font-display); font-size: 0.92rem; color: var(--cream); }
.ord-row__cat { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-soft); }

@media (max-width: 900px) {
  .ed-grid { grid-template-columns: minmax(0, 1fr); }
  .ed-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1.4rem; }
  .ord-row { grid-template-columns: 60px minmax(0, 1fr); }
  .ord-row__cat { grid-column: 2; }
}

.qrow {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  gap: 1.2rem;
  align-items: center;
  border: 1px solid var(--line);
  padding: 1rem;
  margin-bottom: 0.9rem;
  background: linear-gradient(170deg, color-mix(in srgb, var(--gold) 4%, transparent), transparent 50%);
}
.qrow__thumb { width: 132px; aspect-ratio: 16/9; object-fit: cover; background: var(--ink-2); }
.qrow__title { font-family: var(--font-display); font-size: 1.02rem; margin-bottom: 0.35rem; }
.qrow__meta { font-size: 0.7rem; color: var(--cream-soft); display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.qrow__excerpt { font-size: 0.76rem; line-height: 1.55; color: var(--cream-soft); }
.qrow__actions { display: grid; gap: 0.5rem; }
.btn--sm { padding: 0.5rem 1rem; font-size: 0.63rem; letter-spacing: 0.16em; }
.btn--danger { color: #ff9b85; border-color: rgba(220, 90, 60, 0.45); }
.btn--danger:hover { border-color: #ff6b4a; color: #ff6b4a; }

.pill {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.3em 0.7em;
  border-radius: 100px;
  border: 1px solid var(--line);
}
.pill--pending { color: #f2dfb0; border-color: rgba(220, 175, 70, 0.5); }
.pill--published { color: #bdf0d2; border-color: rgba(60, 190, 130, 0.45); }
.pill--hidden { color: var(--cream-soft); }
.pill--scheduled { color: #bcd8ff; border-color: rgba(110, 160, 240, 0.5); }
.qrow__when { color: #bcd8ff; }

/* Hẹn giờ đăng trong trình soạn */
.ed-sched {
  padding: 0.9rem;
  border: 1px solid rgba(110, 160, 240, 0.35);
  border-radius: 10px;
  background: rgba(110, 160, 240, 0.05);
}
.ed-sched .input { color-scheme: dark; }
.ed-slots { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.ed-slots .btn--sm { padding: 0.45rem 0.75rem; letter-spacing: 0.08em; }

@media (max-width: 760px) {
  .qrow { grid-template-columns: 1fr; }
  .qrow__thumb { width: 100%; }
  .qrow__actions { grid-auto-flow: column; }
}

/* ============================================================
   6 · MOTION
   ============================================================ */

/* Cards fade up as they enter the viewport.
   CRITICAL: the hidden state is keyed on .will-reveal, which JS adds only
   after it has confirmed IntersectionObserver exists and has begun observing
   that card. CSS must never hide content on its own — when the hidden state
   was written against the markup attribute instead, every card below the fold
   stayed at opacity 0 in any situation where the observer did not fire. */
@media (prefers-reduced-motion: no-preference) {
  .pcard.will-reveal { opacity: 0; transform: translateY(14px); }
  .pcard.will-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .sk { animation: none; }
}