/* ============================================================
   resources.css — khu Resources (Blog + Cập nhật AI): /tai-nguyen, /blog, /cap-nhat-ai, /tac-gia.
   Markup: server/resources-pages.ts (khung trang) + server/resources-content.ts (thân bài).
   Token màu/chữ/bóng lấy từ /assets/aios/styles.css (cream + ink + một màu nhấn cam, thẻ "stamp").

   Ưu tiên số một là ĐỌC DỄ: thân bài 18px (17px trên điện thoại), dòng 1.8, cột chữ tối đa
   ~720px, khoảng thở đều giữa các khối. Mọi lớp đều có tiền tố r- để không đụng .steps/.compare/
   .card… của các landing dùng chung styles.css.
   ============================================================ */

.r-page {
  background: var(--cream);
  /* Màu CHỮ nhỏ (link, nhãn) — cam/xanh của brand (#d9651c, #5f8f57) chỉ đạt 3–3.8:1 trên nền kem,
     dưới mức 4.5:1 của WCAG AA. Hai tông đậm hơn này đạt ≥ 4.8:1 trên kem, trắng, xanh nhạt. */
  --r-orange-text: #a84a0c;
  --r-green-text: #456b3e;
  --r-muted-text: #57534a;
}
.r-main { padding-bottom: clamp(48px, 7vw, 96px); }
/* .eyebrow của styles.css là chữ cam 12px (3.4:1) — trong khu Resources dùng tông đậm cho đạt AA.
   Hộp CTA nền tối tự đặt lại màu vàng của nó ở dưới. */
.r-page .eyebrow { color: var(--r-orange-text); }

/* ---------------------------------------------------------------- breadcrumbs */
.r-crumbs { margin: 0 0 18px; font-size: .84rem; color: var(--ink-soft); }
.r-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.r-crumbs li { display: inline-flex; align-items: center; min-width: 0; color: var(--r-muted-text); }
.r-crumbs li + li::before { content: "›"; margin: 0 8px; opacity: .55; }
.r-crumbs a { color: inherit; text-decoration: underline; text-decoration-color: rgba(9, 9, 9, .22); text-underline-offset: 3px; }
.r-crumbs a:hover { color: var(--r-orange-text); text-decoration-color: currentColor; }
.r-crumbs li[aria-current] { opacity: .9; }
.r-crumbs li[aria-current] span { display: inline-block; max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* ---------------------------------------------------------------- hub hero */
.r-hub-hero {
  padding-block: clamp(36px, 6vw, 72px) clamp(20px, 3vw, 32px);
  background-image: radial-gradient(rgba(31, 41, 55, .05) 1.1px, transparent 1.2px);
  background-size: 24px 24px;
  border-bottom: 1px solid var(--line-soft);
}
.r-hub-hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); max-width: 18ch; margin-bottom: .35em; }
.r-hub-hero .lead { max-width: 60ch; margin-bottom: 0; }
.r-hub-hero__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.r-pill {
  display: inline-flex; flex-direction: column; gap: 2px; min-width: 170px;
  padding: 12px 18px; border-radius: var(--r); background: #fff;
  border: 1.5px solid var(--ink); color: var(--ink);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.r-pill strong { font-size: 1.02rem; font-weight: 800; }
.r-pill span { font-size: .86rem; color: var(--ink-soft); opacity: .8; }
.r-pill:hover { transform: translate(-2px, -2px); box-shadow: var(--stamp-sm); }

/* ---------------------------------------------------------------- listing hero */
.r-list-hero { padding-block: clamp(26px, 4vw, 44px) 8px; }
.r-list-hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); max-width: 22ch; margin-bottom: .35em; }
.r-list-hero .lead { max-width: 62ch; margin-bottom: 0; }
.r-list-hero__page { font-size: .45em; font-weight: 700; color: var(--orange-600); letter-spacing: 0; vertical-align: middle; white-space: nowrap; }
.r-list-hero__desc { max-width: 66ch; margin: 14px 0 0; color: var(--ink-soft); }
.r-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.r-chips .ui-chip { display: inline-flex; align-items: center; min-height: 40px; }

/* ---------------------------------------------------------------- blocks */
.r-block { padding-top: clamp(36px, 5vw, 60px); }
.r-block--list { padding-top: 28px; }
.r-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 20px; flex-wrap: wrap; margin-bottom: 22px; }
.r-block__head h2 { font-size: clamp(1.45rem, 2.8vw, 1.95rem); margin: 0; }
.r-more { font-weight: 700; font-size: .95rem; color: var(--r-orange-text); white-space: nowrap; }
.r-more:hover { color: var(--ink); }
.r-rss { margin: 28px 0 0; font-size: .86rem; text-align: center; }
.r-rss a { color: var(--ink-soft); text-decoration: underline; text-decoration-color: rgba(9, 9, 9, .25); text-underline-offset: 3px; }

/* ---------------------------------------------------------------- cards */
.r-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .r-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .r-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.r-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--cream-card); border: 1.5px solid var(--ink); border-radius: 18px; overflow: hidden;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.r-card:hover, .r-card:focus-within { transform: translate(-2px, -2px); box-shadow: var(--stamp); }
.r-card__media {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden; flex: none;
  background: var(--cream-200); border-bottom: 1.5px solid var(--ink);
}
.r-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.r-card__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; }
.r-card__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: .8rem; line-height: 1.3; }
.r-card__sec { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); opacity: .7; }
.r-card__cat { position: relative; z-index: 2; font-weight: 700; color: var(--r-orange-text); }
.r-card__cat:hover { color: var(--ink); text-decoration: underline; }
.r-card__flag { font-size: .72rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--yellow); border: 1px solid var(--ink); color: var(--ink); }
.r-card__title { margin: 0; font-size: 1.14rem; font-weight: 800; line-height: 1.35; letter-spacing: -.01em; }
.r-card__title a { color: var(--ink); }
/* Cả thẻ bấm được (link tiêu đề phủ toàn thẻ), link chủ đề vẫn nổi lên trên. */
.r-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 18px; }
.r-card__title a:focus-visible { outline: none; }
.r-card__title a:focus-visible::after { outline: 3px solid var(--orange); outline-offset: 2px; }
.r-card__excerpt {
  margin: 0; font-size: .94rem; line-height: 1.6; color: var(--ink-soft); opacity: .88;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.r-card__foot { display: flex; flex-wrap: wrap; gap: 6px; margin: auto 0 0; padding-top: 6px; font-size: .82rem; color: var(--ink-soft); opacity: .75; }

@media (min-width: 820px) {
  .r-card--lead { grid-column: 1 / -1; flex-direction: row; }
  .r-card--lead .r-card__media { width: 56%; border-bottom: 0; border-right: 1.5px solid var(--ink); }
  .r-card--lead .r-card__body { justify-content: center; padding: 28px 32px; gap: 12px; }
  .r-card--lead .r-card__title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.22; }
  .r-card--lead .r-card__excerpt { font-size: 1rem; -webkit-line-clamp: 4; }
  .r-card--lead .r-card__foot { margin-top: 4px; }
}

/* Ảnh giữ chỗ khi bài chưa có file ảnh bìa (chỉ gặp ở bản xem trước). */
.r-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(rgba(245, 239, 217, .09) 1.1px, transparent 1.2px) 0 0 / 22px 22px,
    linear-gradient(135deg, var(--dark) 0%, #222c38 100%);
}
.r-ph__mark { font-family: var(--font-mono); font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: var(--yellow); padding: 8px 16px; border: 1px solid rgba(244, 184, 46, .45); border-radius: 999px; }

/* ---------------------------------------------------------------- topics, quà tặng, YouTube */
/* Cùng nhịp cột với .r-grid (1 → 2 → 3): 9 chủ đề = 3×3, không còn thẻ lẻ một mình ở hàng cuối. */
.r-topics { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .r-topics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .r-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.r-topic {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; min-height: 100%;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); color: var(--ink);
  transition: border-color .15s var(--ease), transform .15s var(--ease), box-shadow .15s var(--ease);
}
.r-topic:hover { border-color: var(--ink); transform: translate(-2px, -2px); box-shadow: var(--stamp-sm); }
.r-topic__sec { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); opacity: .65; }
.r-topic__label { font-size: 1.08rem; font-weight: 800; line-height: 1.3; }
.r-topic__intro { font-size: .9rem; line-height: 1.55; color: var(--ink-soft); opacity: .85; }
.r-topic__count { margin-top: auto; padding-top: 6px; font-size: .88rem; font-weight: 700; color: var(--r-orange-text); }

.r-duo { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .r-duo:has(> .r-duo__col + .r-duo__col) { grid-template-columns: 1.15fr .85fr; } }
.r-magnets { display: grid; gap: 12px; }
.r-magnet {
  display: flex; align-items: center; gap: 16px; padding: 14px; color: var(--ink);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.r-magnet:hover { border-color: var(--ink); box-shadow: var(--stamp-sm); }
.r-magnet img { width: 76px; height: 76px; flex: none; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.r-magnet__ico { width: 76px; height: 76px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--orange-100); color: var(--r-orange-text); font-weight: 800; font-family: var(--font-mono); }
.r-magnet__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.r-magnet__title { font-weight: 800; line-height: 1.35; }
.r-magnet__sub { font-size: .88rem; line-height: 1.5; color: var(--ink-soft); opacity: .85; }
.r-magnet__go { font-size: .86rem; font-weight: 700; color: var(--r-orange-text); }

.r-yt-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px 26px;
  color: var(--on-dark); border-radius: var(--r-xl); border: 1.5px solid var(--ink); box-shadow: var(--stamp);
  background-color: var(--dark);
  background-image: radial-gradient(rgba(245, 239, 217, .06) 1.1px, transparent 1.2px);
  background-size: 22px 22px;
}
.r-yt-card__tag { font-family: var(--font-mono); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--yellow); }
.r-yt-card__title { font-size: clamp(1.25rem, 2.2vw, 1.5rem); font-weight: 800; line-height: 1.25; color: var(--on-dark-strong); }
.r-yt-card__text { color: rgba(245, 239, 217, .8); line-height: 1.6; }
.r-yt-card .btn { margin-top: 6px; border-color: transparent; }
.r-yt-card:hover .btn { background: var(--orange-600); }

.r-empty { padding: 26px 26px 24px; border-radius: var(--r-lg); }
.r-empty__title { font-size: 1.1rem; font-weight: 800; margin: 0 0 6px; color: var(--ink); }
.r-empty p { color: var(--ink-soft); }
.r-empty .btn-row { margin-top: 16px; gap: 10px; }

.r-preview-list ul { margin: 0; padding-left: 20px; }
.r-preview-list li { margin-bottom: 6px; }
.r-preview-list a { font-weight: 700; color: var(--r-orange-text); }
.r-preview-list span { font-size: .85rem; opacity: .7; }

/* ---------------------------------------------------------------- pager */
.r-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin-top: 40px; }
.r-pager__nums { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.r-pager__n {
  display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 10px;
  border-radius: 999px; border: 1.5px solid var(--ink); background: var(--cream-card); font-weight: 700; color: var(--ink);
}
a.r-pager__n:hover { background: var(--cream-200); }
.r-pager__n.is-current { background: var(--orange); color: #fff; }
.r-pager__gap { align-self: center; padding: 0 4px; opacity: .6; }
.r-pager__step { font-weight: 700; color: var(--ink); padding: 9px 4px; }
.r-pager__step:hover { color: var(--r-orange-text); }

/* ================================================================ ARTICLE */
.r-preview {
  padding: 10px 20px; text-align: center; font-size: .92rem; line-height: 1.5;
  background: var(--yellow-100); border-bottom: 1.5px solid var(--yellow-600); color: var(--ink);
}

.r-layout { width: min(100% - 40px, 720px); margin-inline: auto; padding-top: clamp(22px, 4vw, 40px); }
@media (min-width: 1100px) {
  .r-layout--toc {
    width: min(100% - 64px, 1020px);
    display: grid; grid-template-columns: minmax(0, 720px) 236px; gap: 64px; justify-content: center; align-items: start;
  }
}
.r-article { min-width: 0; }

/* -------- header */
.r-head { margin-bottom: 26px; }
.r-head__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 16px; }
.r-head__sec {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; background: var(--ink); color: var(--cream);
}
.r-head__cat {
  font-size: .86rem; font-weight: 700; color: var(--r-orange-text);
  padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--orange-600); background: var(--cream-50);
}
.r-head__cat:hover { background: var(--orange); border-color: var(--ink); color: #fff; }
.r-head__title {
  font-size: clamp(1.95rem, 4.6vw, 2.9rem); line-height: 1.16; letter-spacing: -.022em;
  margin: 0 0 20px; text-wrap: balance;
}
.r-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: .92rem; color: var(--ink-soft); }
.r-byline__who { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); }
.r-byline__who img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--ink); background: var(--cream-200); }
.r-byline__who:hover span { color: var(--r-orange-text); }
.r-byline__meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.r-byline__meta > span { white-space: nowrap; }
/* Chấm ngăn cách dính ĐUÔI mục trước (::after) chứ không dính đầu mục sau: khi xuống dòng trên
   điện thoại, dòng mới không bao giờ bắt đầu bằng một chấm mồ côi. */
.r-byline__meta > span:not(:last-child)::after { content: ""; display: inline-block; vertical-align: middle; width: 4px; height: 4px; border-radius: 50%; background: var(--orange); margin: -2px 10px 0; }

/* Cập nhật AI: nguồn chính thức ngay dưới tiêu đề */
.r-source {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 20px; padding: 13px 16px;
  background: #fff; border: 1.5px solid var(--line); border-left: 5px solid var(--green-600); border-radius: 12px;
}
.r-source__label { font-family: var(--font-mono); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--r-green-text); }
.r-source__link { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--green-600); text-underline-offset: 3px; }
.r-source__link:hover { color: var(--r-orange-text); }
.r-source__pub { font-size: .86rem; color: var(--ink-soft); opacity: .75; }

/* -------- cover */
.r-cover { margin: 0 0 30px; }
.r-cover img, .r-cover .r-ph {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border: 1.5px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--stamp); background: var(--cream-200);
}
.r-cover--ph { position: relative; aspect-ratio: 16 / 9; }
.r-cover--ph .r-ph { position: absolute; }
.r-cover figcaption { margin-top: 14px; font-size: .86rem; line-height: 1.55; color: var(--r-muted-text); }
.r-cover__credit { font-style: italic; }

/* -------- Tóm tắt nhanh (trả lời trước) */
.r-summary {
  position: relative; margin: 0 0 30px; padding: 22px 24px 20px;
  background: #fff; border: 1.5px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--stamp-sm);
}
.r-summary__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px;
  font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--r-orange-text);
}
.r-summary__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 3px var(--orange-100); }
.r-summary__text { margin: 0; font-size: 1.08rem; line-height: 1.7; color: var(--ink); font-weight: 500; }
.r-summary__list { list-style: none; margin: 16px 0 0; padding: 16px 0 0; border-top: 1px dashed var(--line); display: grid; gap: 10px; }
.r-summary__list li { position: relative; padding-left: 32px; line-height: 1.6; color: var(--ink-500); }
.r-summary__list li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 21px; height: 21px; border-radius: 50%;
  background: var(--green-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 24 24' fill='none' stroke='%23fbf8ee' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 21px no-repeat;
}

/* -------- mục lục */
.r-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.r-toc li { counter-increment: toc; }
.r-toc a { display: flex; gap: 10px; color: var(--ink-soft); line-height: 1.45; }
.r-toc a::before { content: counter(toc, decimal-leading-zero); flex: none; font-family: var(--font-mono); font-size: .78em; padding-top: .18em; color: var(--orange-600); opacity: .8; }
.r-toc a:hover { color: var(--ink); }

.r-toc--inline { margin: 0 0 34px; background: var(--cream-50); border: 1.5px solid var(--line); border-radius: var(--r); }
.r-toc--inline summary {
  list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 800; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.r-toc--inline summary::-webkit-details-marker { display: none; }
.r-toc--inline summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--orange-600); }
.r-toc--inline[open] summary::after { content: "–"; }
.r-toc--inline ol { padding: 0 18px 16px; display: grid; gap: 4px; }
.r-toc--inline a { padding: 6px 0; font-size: .96rem; }

.r-aside { display: none; }
@media (min-width: 1100px) {
  .r-layout--toc .r-toc--inline { display: none; }
  .r-aside { display: block; position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; padding: 4px 4px 12px 0; margin-top: 150px; }
  .r-toc__h { margin: 0 0 12px; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); opacity: .75; }
  .r-toc--side ol { border-left: 2px solid var(--line); }
  .r-toc--side a { font-size: .88rem; padding: 7px 0 7px 14px; margin-left: -2px; border-left: 2px solid transparent; }
  .r-toc--side a.is-active { color: var(--ink); font-weight: 700; border-left-color: var(--orange); }
}

/* ================================================================ BODY TYPOGRAPHY */
.r-body { font-size: 1.125rem; line-height: 1.8; color: var(--ink-500); overflow-wrap: break-word; }
.r-body > :first-child { margin-top: 0; }
/* :where() giữ độ ưu tiên thấp — tiêu đề hộp lưu ý, ô số liệu… (cũng là <p>) tự đặt lề của chúng. */
.r-body :where(p) { margin: 0 0 1.25em; }
.r-body h2, .r-body h3, .r-faq h2, .r-sources h2 { scroll-margin-top: 100px; color: var(--ink); }
.r-body h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); line-height: 1.25; margin: 2.1em 0 .65em; letter-spacing: -.018em; }
.r-body h3 { font-size: clamp(1.2rem, 2.2vw, 1.38rem); line-height: 1.35; margin: 1.8em 0 .5em; }
.r-body h4 { font-size: 1.08rem; margin: 1.5em 0 .4em; }
.r-body h2 + h3 { margin-top: .8em; }
/* Neo "#" cạnh tiêu đề mục: chữ "#" là nội dung CSS, không nằm trong text của heading (xem
   resources-content.ts) — bot/AI đọc tiêu đề sạch, trình đọc màn hình không đọc lặp. */
.r-anchor { margin-left: .3em; padding: 0 .1em; color: var(--orange); font-weight: 600; opacity: 0; text-decoration: none; transition: opacity .15s var(--ease); }
.r-anchor::before { content: "#"; }
.r-body h2:hover .r-anchor, .r-body h3:hover .r-anchor { opacity: .85; }

.r-body a:not(.btn):not(.r-figure__zoom):not(.r-yt__link):not(.r-anchor) {
  color: var(--r-orange-text); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(217, 101, 28, .55);
}
.r-body a:not(.btn):not(.r-figure__zoom):not(.r-yt__link):not(.r-anchor):hover { color: var(--ink); text-decoration-color: var(--ink); }
.r-body strong { color: var(--ink); font-weight: 700; }
/* Chỉ danh sách THƯỜNG (không class) — các khối .r-steps/.r-flow tự lo khoảng cách của mình. */
.r-body ul:not([class]), .r-body ol:not([class]) { margin: 0 0 1.35em; padding-left: 1.4em; }
.r-body ul:not([class]) > li, .r-body ol:not([class]) > li { margin: 0 0 .5em; padding-left: .2em; }
.r-body li > ul:not([class]), .r-body li > ol:not([class]) { margin: .5em 0 0; }
.r-body ul:not([class]) > li::marker, .r-body ol:not([class]) > li::marker { color: var(--orange-600); font-weight: 700; }
.r-body blockquote {
  margin: 1.8em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--orange);
  font-size: 1.12em; line-height: 1.65; font-weight: 500; color: var(--ink);
}
.r-body blockquote p:last-child { margin-bottom: 0; }
/* Dòng ghi tên người nói ("> — Tên" là đoạn cuối của trích dẫn) — nhỏ, nhạt, tách khỏi lời trích. */
.r-body blockquote .r-quote__cite { margin-top: .7em; font-size: .8em; font-weight: 600; color: var(--r-muted-text); }
.r-body hr { border: 0; height: 0; border-top: 2px dashed var(--cream-300); margin: 2.4em 0; }
.r-body :not(pre) > code {
  font-family: var(--font-mono); font-size: .86em; padding: .12em .4em; border-radius: 6px;
  background: var(--cream-200); color: var(--ink); overflow-wrap: anywhere;
}
.r-body img { height: auto; }
.r-body mark { padding: 0 .12em; }

/* -------- ảnh có chú thích */
.r-figure { margin: 2em 0; }
.r-figure img { width: 100%; border-radius: var(--r); border: 1.5px solid var(--ink); background: #fff; }
.r-figure__zoom { display: block; border-radius: var(--r); cursor: zoom-in; }
.r-figure__zoom:hover img { box-shadow: var(--stamp-sm); }
.r-figure figcaption, .r-yt figcaption { margin-top: 12px; font-size: .9rem; line-height: 1.55; color: var(--r-muted-text); }
.r-figure figcaption a { font-weight: 600; }
/* Ảnh chụp bài đăng X (tweet-*.webp): bản nhúng rộng 550px — giữ đúng cỡ đó, canh giữa, thay vì
   phóng ra cả cột (chữ tweet to hơn chữ bài, nhòe). */
.r-figure--tweet { max-width: 560px; margin-inline: auto; }
.r-figure--tweet img { border: 0; background: none; }
.r-figure--tweet figcaption { text-align: center; }

/* -------- callouts */
.r-callout { margin: 1.9em 0; padding: 18px 22px 18px; border-radius: var(--r); border: 1.5px solid var(--line); background: #fff; }
.r-callout__title { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-weight: 800; font-size: 1rem; line-height: 1.35; color: var(--ink); }
.r-callout__title .r-ico { flex: none; }
.r-callout__body { font-size: 1.03rem; line-height: 1.72; }
.r-callout__body > :last-child { margin-bottom: 0; }
.r-callout__body p { margin-bottom: .8em; }
.r-callout--tip { background: var(--green-100); border-color: var(--green-600); }
.r-callout--tip .r-ico { color: var(--green-700); }
.r-callout--note { border-left: 5px solid var(--ink-500); }
.r-callout--note .r-ico { color: var(--ink-500); }
.r-callout--warning { background: #fdf0e6; border-color: var(--orange-600); }
.r-callout--warning .r-ico { color: var(--orange-600); }
.r-callout--key { background: var(--yellow-100); border-color: var(--ink); box-shadow: var(--stamp-sm); }
.r-callout--key .r-ico { color: var(--yellow-600); }
.r-callout--example { background: var(--cream-50); border-style: dashed; border-color: #b9ae8f; }
.r-callout--example .r-ico { color: var(--orange-600); }
.r-callout--impact {
  color: var(--on-dark); border-color: var(--ink); box-shadow: var(--stamp-sm);
  background-color: var(--dark);
  background-image: radial-gradient(rgba(245, 239, 217, .05) 1.1px, transparent 1.2px);
  background-size: 22px 22px;
}
.r-callout--impact .r-callout__title { color: var(--yellow); }
.r-callout--impact .r-ico { color: var(--yellow); }
.r-callout--impact strong { color: var(--on-dark-strong); }
.r-callout--impact a:not(.btn) { color: var(--yellow) !important; text-decoration-color: rgba(244, 184, 46, .5) !important; }
.r-callout--impact code { background: rgba(245, 239, 217, .12) !important; color: var(--on-dark-strong) !important; }

/* -------- steps */
.r-steps { list-style: none; margin: 2em 0; padding: 0; display: grid; gap: 14px; }
.r-step { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; }
.r-step:not(:last-child)::before {
  content: ""; position: absolute; left: 21px; top: 50px; bottom: -12px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--cream-300) 0 6px, transparent 6px 11px);
}
.r-step__num {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--orange); color: var(--ink); font-weight: 800; font-size: 1.05rem;
  border: 1.5px solid var(--ink); box-shadow: var(--stamp-sm);
}
.r-step__body { padding: 12px 18px 14px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r); }
.r-step__title { margin: 0 0 4px; font-weight: 800; font-size: 1.06rem; line-height: 1.4; color: var(--ink); }
.r-step__text { font-size: 1rem; line-height: 1.7; }
.r-step__text > :last-child { margin-bottom: 0; }
.r-step__text p { margin-bottom: .7em; }

/* -------- flow diagram */
.r-flow-wrap { margin: 2.1em 0; }
.r-flow__title { margin: 0 0 14px; font-family: var(--font-mono); font-size: .76rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }
.r-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); }
.r-flow__node {
  position: relative; display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 14px 16px 15px;
  background: #fff; border: 1.5px solid var(--ink); border-radius: var(--r); box-shadow: var(--stamp-sm);
}
.r-flow__num {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: var(--cream); font-size: .78rem; font-weight: 800; margin-bottom: 4px;
}
.r-flow__label { font-weight: 800; font-size: 1rem; line-height: 1.35; color: var(--ink); }
.r-flow__desc { font-size: .9rem; line-height: 1.55; color: var(--ink-soft); }
/* Mũi tên giữa các bước — dọc trên điện thoại / quy trình dài, ngang trên màn rộng. */
.r-flow__node:not(:last-child)::after {
  content: ""; position: absolute; left: 50%; bottom: -25px; width: 14px; height: 18px; transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18' fill='none' stroke='%23d9651c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 1v15M1.5 10.5 7 16l5.5-5.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (min-width: 700px) {
  .r-flow:not(.r-flow--long) { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; gap: 30px; }
  .r-flow:not(.r-flow--long) .r-flow__node:not(:last-child)::after {
    left: auto; right: -25px; top: 50%; bottom: auto; width: 18px; height: 14px; transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 14' fill='none' stroke='%23d9651c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h15M10.5 1.5 16 7l-5.5 5.5'/%3E%3C/svg%3E");
  }
  .r-flow--long { max-width: 560px; }
  .r-flow--long .r-flow__node { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
  .r-flow--long .r-flow__num { margin-bottom: 0; }
  .r-flow--long .r-flow__desc { flex-basis: 100%; padding-left: 38px; }
}

/* -------- stats */
.r-stats { display: grid; gap: 16px; margin: 2em 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
/* Đúng 4 ô: xếp 2×2 thay vì 3 + 1 ô lẻ hàng dưới ở cột chữ 720px (điện thoại vẫn 1 cột). */
.r-stats:has(> .r-stat:nth-child(4):last-child) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.r-stat { padding: 18px 18px 16px; background: #fff; border: 1.5px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--stamp-sm); }
.r-stat :where(p) { margin: 0; }
.r-stat__value { font-size: clamp(1.9rem, 4vw, 2.4rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: var(--orange-600); }
.r-stat__label { margin-top: 8px; font-size: .98rem; line-height: 1.5; color: var(--ink); }
.r-stat__src { margin-top: 8px; font-size: .78rem; line-height: 1.45; color: var(--ink-soft); opacity: .75; }

/* -------- tables (cuộn ngang trên điện thoại, bóng mờ báo còn cột) */
.r-table {
  margin: 2em 0; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1.5px solid var(--ink); border-radius: var(--r);
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) 0 0 / 40px 100% no-repeat local,
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) 100% 0 / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(9, 9, 9, .14), transparent) 0 0 / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(9, 9, 9, .14), transparent) 100% 0 / 14px 100% no-repeat scroll,
    #fff;
}
.r-table:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.r-table table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .98rem; line-height: 1.55; }
.r-table th, .r-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); min-width: 120px; }
/* Tiêu đề cột được xuống dòng: để nowrap thì một tiêu đề dài ("Chatbot trả phí (ChatGPT, Claude, Gemini)")
   chiếm cả cột rộng, còn cột tiêu đề ngắn (thường là cột chính, vd "AI OS") bị ép về min-width. */
.r-table thead th { border-top: 0; background: var(--cream-200); color: var(--ink); font-weight: 800; font-size: .92rem; text-wrap: balance; }
.r-table tbody th { font-weight: 700; color: var(--ink); }
.r-table tbody tr:nth-child(even) td, .r-table tbody tr:nth-child(even) th { background: rgba(245, 239, 217, .35); }
.r-table p { margin: 0; }

.r-compare { margin: 2em 0; }
.r-compare__title { margin: 0 0 10px; font-weight: 800; color: var(--ink); }
/* Tiêu đề tùy chọn của :::steps / :::stats (cùng kiểu với tiêu đề bảng so sánh). */
.r-block__title { margin: 28px 0 10px; font-weight: 800; color: var(--ink); }
.r-compare .r-table { margin: 0; box-shadow: var(--stamp-sm); }
.r-compare thead th { background: var(--ink); color: var(--cream); }
.r-compare thead th:first-child { background: var(--ink-500); }
.r-compare tbody th { background: var(--cream-50); }
/* Cột đầu (tiêu chí) đứng yên khi cuộn ngang trên điện thoại. */
.r-compare th:first-child { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--line); }

/* -------- code + prompt */
.r-code, .r-prompt { margin: 1.9em 0; border-radius: var(--r); overflow: hidden; }
.r-code { background: var(--dark); border: 1.5px solid var(--ink); }
.r-code__bar, .r-prompt__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px 8px 16px; }
.r-code__bar { border-bottom: 1px solid rgba(245, 239, 217, .12); }
.r-code__lang { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--yellow); }
/* Cỡ chữ + dòng đặt trên chính <pre>: để ở <code> thì dòng vẫn cao theo chữ 18px của thân bài. */
.r-code pre { margin: 0; padding: 16px 18px 18px; overflow-x: auto; font-family: var(--font-mono); font-size: .88rem; line-height: 1.7; }
.r-code code { font: inherit; color: var(--on-dark-strong); white-space: pre; }

.r-prompt { background: #fff; border: 1.5px solid var(--ink); box-shadow: var(--stamp-sm); }
.r-prompt__bar { background: var(--orange-100); border-bottom: 1.5px solid var(--ink); }
.r-prompt__label { display: inline-flex; align-items: center; gap: 8px; font-size: .86rem; font-weight: 800; color: var(--ink); min-width: 0; }
.r-prompt__label .r-ico { flex: none; color: var(--orange-600); }
.r-prompt__text { margin: 0; padding: 18px 20px 20px; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--font-body); font-size: 1rem; line-height: 1.7; }
.r-prompt__text code { font: inherit; color: var(--ink-500); background: none; padding: 0; }

.r-copy {
  flex: none; font: inherit; font-size: .8rem; font-weight: 700; line-height: 1; cursor: pointer;
  padding: 8px 13px; border-radius: 999px; border: 1.5px solid currentColor; background: transparent;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.r-copy[hidden] { display: none; }
.r-code .r-copy { color: var(--cream); border-color: rgba(245, 239, 217, .45); }
.r-code .r-copy:hover { background: var(--cream); color: var(--ink); }
.r-prompt .r-copy { color: var(--ink); background: #fff; border-color: var(--ink); }
.r-prompt .r-copy:hover { background: var(--ink); color: var(--cream); }
.r-copy.is-done { background: var(--green-600) !important; border-color: var(--green-700) !important; color: #fff !important; }

/* -------- YouTube (bấm mới nạp player) */
.r-yt { margin: 2em 0; }
.r-yt__link, .r-yt__frame {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1.5px solid var(--ink); border-radius: var(--r-lg); box-shadow: var(--stamp); background: var(--dark);
}
.r-yt__link img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s var(--ease), opacity .2s var(--ease); }
.r-yt__link:hover img { transform: scale(1.02); opacity: .92; }
.r-yt__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  background: var(--orange); color: #fff; border: 2px solid var(--ink); box-shadow: var(--stamp-sm);
  transition: transform .15s var(--ease);
}
.r-yt__play svg { margin-left: 4px; }
.r-yt__link:hover .r-yt__play { transform: translate(-50%, -50%) scale(1.06); }
.r-yt__label {
  position: absolute; left: 14px; bottom: 14px; padding: 6px 12px; border-radius: 999px;
  background: rgba(9, 9, 9, .78); color: #fff; font-size: .8rem; font-weight: 700;
}
.r-yt__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ================================================================ sau thân bài */
.r-faq, .r-sources { margin-top: clamp(40px, 6vw, 56px); }
.r-faq h2, .r-sources h2 { font-size: clamp(1.4rem, 2.8vw, 1.75rem); margin: 0 0 16px; }
.r-faq { padding: 6px 22px; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-lg); }
.r-faq h2 { padding-top: 18px; }
.r-faq__item { border-top: 1px solid var(--line); }
/* Câu trả lời hiện sẵn (không gập): câu hỏi là h3 đậm, chấm cam đầu dòng nối với màu nhấn của trang. */
.r-faq__q {
  position: relative; margin: 0; padding: 16px 0 6px 18px;
  font-size: 1.05rem; font-weight: 700; line-height: 1.45; letter-spacing: 0; color: var(--ink);
}
.r-faq__q::before { content: ""; position: absolute; left: 0; top: 1.45em; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.r-faq__a { padding: 0 0 18px 18px; font-size: 1.04rem; line-height: 1.75; color: var(--ink-500); }
.r-faq__a > :first-child { margin-top: 0; }
.r-faq__a > :last-child { margin-bottom: 0; }
.r-faq__a a { color: var(--r-orange-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.r-sources ol { margin: 0; padding-left: 1.5em; display: grid; gap: 10px; }
.r-sources li { font-size: .98rem; line-height: 1.55; padding-left: .2em; }
.r-sources li::marker { color: var(--orange-600); font-weight: 700; }
.r-sources a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(217, 101, 28, .5); text-underline-offset: 3px; overflow-wrap: anywhere; }
.r-sources a:hover { color: var(--r-orange-text); }
.r-sources__meta { display: block; font-size: .84rem; color: var(--ink-soft); opacity: .75; }

.r-author {
  display: flex; gap: 20px; align-items: flex-start; margin-top: clamp(40px, 6vw, 56px); padding: 22px;
  background: var(--cream-50); border: 1.5px solid var(--line); border-radius: var(--r-lg);
}
.r-author__photo { flex: none; }
.r-author__photo img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--ink); background: var(--cream-200); }
.r-author__txt :where(p) { margin: 0; }
.r-author__eyebrow { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); opacity: .7; }
.r-author__name { font-size: 1.18rem; font-weight: 800; margin-top: 2px; }
.r-author__name a { color: var(--ink); }
.r-author__name a:hover { color: var(--r-orange-text); }
.r-author__role { font-size: .9rem; font-weight: 700; color: var(--r-orange-text); margin-top: 2px; }
.r-author__bio { margin-top: 10px; font-size: .96rem; line-height: 1.65; color: var(--ink-soft); }
.r-author__links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.r-author__links a {
  font-size: .82rem; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  border: 1.5px solid var(--ink); background: #fff; color: var(--ink);
}
.r-author__links a:hover { background: var(--ink); color: var(--cream); }
/* Dòng về việc dùng AI → /chinh-sach-bien-tap (hộp tác giả + trang tác giả). */
.r-author__policy { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: .86rem; line-height: 1.6; color: var(--r-muted-text); max-width: 64ch; }
.r-author__policy a { color: var(--r-orange-text); font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }

.r-cta {
  margin-top: clamp(36px, 5vw, 48px); padding: clamp(26px, 4vw, 38px) clamp(22px, 4vw, 36px);
  color: var(--on-dark); border: 1.5px solid var(--ink); border-radius: var(--r-xl); box-shadow: var(--stamp);
  background-color: var(--dark);
  background-image: radial-gradient(rgba(245, 239, 217, .06) 1.1px, transparent 1.2px);
  background-size: 22px 22px;
}
.r-cta .eyebrow { color: var(--yellow); background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .14); }
.r-cta .eyebrow::before { background: var(--yellow); box-shadow: 0 0 0 3px rgba(244, 184, 46, .22); }
.r-cta__title { color: var(--on-dark-strong); font-size: clamp(1.45rem, 3vw, 1.95rem); line-height: 1.22; margin: 18px 0 10px; max-width: 24ch; }
.r-cta p { color: rgba(245, 239, 217, .82); max-width: 56ch; margin: 0 0 22px; line-height: 1.65; }
.r-cta .btn-primary { border-color: transparent; box-shadow: 0 12px 26px -12px rgba(244, 124, 48, .9); }
.r-cta .btn-primary:hover { transform: translateY(-2px); }

.r-related { padding-top: clamp(48px, 7vw, 80px); }

/* ================================================================ tác giả, 404 */
.r-profile { padding-top: clamp(26px, 4vw, 44px); }
.r-profile__card { display: flex; gap: 28px; align-items: center; padding: clamp(22px, 4vw, 34px); border-radius: var(--r-xl); }
.r-profile__photo { flex: none; width: 160px; height: 160px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--ink); box-shadow: var(--stamp-sm); background: var(--cream-200); }
.r-profile__txt h1 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); margin-bottom: .2em; }
.r-profile__role { font-weight: 700; color: var(--r-orange-text); margin: 0 0 12px; }
.r-profile__bio { max-width: 64ch; color: var(--ink-soft); line-height: 1.7; margin: 0; }

/* ================================================================ trang tĩnh (chính sách biên tập) */
.r-page-lead { font-size: 1.12rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 12px; max-width: 62ch; }
.r-page-updated { font-size: .88rem; color: var(--r-muted-text); margin: 0; }
@media (min-width: 1100px) {
  /* Không có ảnh bìa nên mục lục bên phải không cần đẩy xuống ngang ảnh như trang bài. */
  .r-layout--page .r-aside { margin-top: 40px; }
}

.r-404 { padding-block: clamp(56px, 9vw, 110px); max-width: 680px; }
.r-404 h1 { font-size: clamp(2rem, 5vw, 3rem); }
.r-404 .btn-row { margin-top: 26px; }

/* ================================================================ điện thoại */
@media (max-width: 680px) {
  .r-body { font-size: 1.0625rem; line-height: 1.78; }
  .r-body h2 { margin-top: 1.9em; }
  .r-head__title { font-size: clamp(1.7rem, 7.4vw, 2.1rem); line-height: 1.2; }
  .r-byline { font-size: .86rem; gap: 10px 14px; }
  .r-crumbs li[aria-current] span { max-width: 18ch; }
  .r-cover { margin-inline: 0; }
  .r-cover img, .r-cover .r-ph { border-radius: var(--r); box-shadow: var(--stamp-sm); }
  .r-summary { padding: 18px 18px 16px; }
  .r-summary__text { font-size: 1.02rem; }
  .r-callout { padding: 16px 16px 16px; }
  .r-callout__body { font-size: 1rem; }
  .r-step { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
  .r-step__num { width: 36px; height: 36px; font-size: .95rem; }
  .r-step:not(:last-child)::before { left: 17px; top: 42px; }
  .r-step__body { padding: 11px 14px 12px; }
  .r-table th, .r-table td { padding: 10px 12px; min-width: 110px; }
  .r-table table { font-size: .93rem; }
  .r-code pre { padding: 14px 14px 16px; }
  .r-code pre { font-size: .82rem; }
  .r-prompt__text { padding: 16px 16px 18px; }
  .r-prompt__text { font-size: .97rem; }
  .r-yt__play { width: 58px; height: 58px; }
  .r-faq { padding: 4px 16px; }
  .r-faq__q { font-size: 1rem; }
  .r-author { flex-direction: column; gap: 14px; padding: 18px; }
  .r-author__photo img { width: 72px; height: 72px; }
  .r-profile__card { flex-direction: column; align-items: flex-start; gap: 18px; }
  .r-profile__photo { width: 112px; height: 112px; }
  .r-hub-hero__links { gap: 10px; }
  .r-pill { min-width: 0; flex: 1 1 140px; padding: 10px 14px; }
  /* Hàng chip chủ đề cuộn ngang thay vì xếp nhiều dòng cao. */
  .r-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding: 2px 20px 8px; scrollbar-width: none; }
  .r-chips::-webkit-scrollbar { display: none; }
  .r-chips .ui-chip { flex: none; }
  .r-pager__step { flex-basis: 100%; text-align: center; padding: 4px; }
  .r-magnet img, .r-magnet__ico { width: 60px; height: 60px; }
  .r-yt-card { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .r-card, .r-topic, .r-pill, .r-yt__link img, .r-yt__play { transition: none !important; }
}

@media print {
  .nav, .footer, .mbar, .r-aside, .r-toc, .r-cta, .r-related, .r-copy, .r-preview { display: none !important; }
  .r-page { background: #fff; }
  .r-layout { width: 100%; }
  .r-body { font-size: 12pt; }
}