/* ══ Khu đọc bài + header dính dưới thanh quản trị — nạp sau nen.css (07/11/2026) ══
   Đo bằng trình duyệt thật trên bài "RPG Maker 2025" trước khi sửa:
   · Header dính KHÔNG dính: .tn-thanh-chinh sticky nằm TRONG <header>, nên chỉ dính trong phạm vi khối header rồi trôi.
   · Đã đăng nhập: #wpadminbar fixed, cao 32px (46px ≤782px), z-index 99999; header top:0 trượt xuống DƯỚI thanh đen.
   · Cột bài 812px giữa khung 1312px (trống ~300px mỗi bên); ảnh vuông 480px bị giãn 812×810; mục lục 477px, chữ 12px. */

/* ── Header dính đúng chỗ ── */
/* display:contents bỏ hộp của <header>: thanh chính trở thành con trực tiếp của luồng trang nên dính suốt trang
   (dải trên cùng và menu chính vẫn cuộn đi như website). Vai trò banner giữ nguyên trên phần tử. */
.tn-dau { display: contents; }
.tn-thanh-chinh { top: var(--wp-admin--admin-bar--height, 0px); }
/* ≤600px WordPress cho thanh quản trị cuộn theo trang (position:absolute) — không chừa chỗ cho nó nữa. */
@media (max-width: 600px) { .admin-bar .tn-thanh-chinh { top: 0; } }

/* Chiều cao phần dính (đo: 73px desktop, 65px tablet, 117px mobile hai hàng logo + tìm kiếm). */
:root { --tn-cao-dinh: 73px; }
@media (max-width: 1023px) { :root { --tn-cao-dinh: 65px; } }
@media (max-width: 767px) { :root { --tn-cao-dinh: 117px; } }
:root { --tn-bu-dinh: calc(var(--tn-cao-dinh) + var(--wp-admin--admin-bar--height, 0px)); }
@media (max-width: 600px) { :root { --tn-bu-dinh: var(--tn-cao-dinh); } }

/* Bấm mục lục / neo #…: tiêu đề dừng ngay dưới phần dính, không bị che. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* WordPress đã đặt html{scroll-padding-top: <cao thanh quản trị>} khi đăng nhập ⇒ ở đây chỉ bù phần header dính.
   ≤600px thanh quản trị cuộn theo trang (không cố định) nên đệm đó thừa: huỷ. */
.tn-noi-dung :is(h1, h2, h3, h4, h5, h6, [id]), .tn-noi-dung .ez-toc-section, .tn-faq { scroll-margin-top: calc(var(--tn-cao-dinh) + 16px); }
@media (max-width: 600px) { :root:root { scroll-padding-top: 0; } }

/* ── Khung bài: cột đọc ≤760px + cột bên 300px ── */
.tn-bai__khung { max-width: 1200px; padding-block: 16px 48px; }
.tn-bai__khung > .tn-breadcrumb { max-width: 760px; margin-inline: auto; }
.tn-bai__luoi { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.tn-bai__chinh { min-width: 0; width: 100%; max-width: 760px; margin-inline: auto; }
.tn-bai__ben { display: none; }
@media (min-width: 1100px) {
  .tn-bai__khung > .tn-breadcrumb { max-width: none; }
  .tn-bai__luoi { grid-template-columns: minmax(0, 760px) 300px; justify-content: space-between; gap: 48px; }
  .tn-bai__chinh { margin: 0; }
  .tn-bai__ben { display: block; }
  .tn-bai__ben-dinh { position: sticky; top: calc(var(--tn-bu-dinh) + 20px); display: grid; gap: 16px; max-height: calc(100vh - var(--tn-bu-dinh) - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}

/* ── Đầu bài ── */
.tn-bai__dau { margin: 4px 0 24px; padding-bottom: 18px; border-bottom: 1px solid var(--tn-vien); }
.tn-bai__dau + .tn-bai__anh { margin-top: 0; }
.tn-bai__dau .tn-nhan { margin-bottom: 12px; }
.tn-bai .tn-bai__tieu-de { margin: 0 0 14px; font-size: clamp(28px, 1.6vw + 18px, 40px); line-height: 1.22; letter-spacing: -.025em; font-weight: 800; overflow-wrap: break-word; text-wrap: pretty; }
.tn-bai__sapo { margin: 0 0 16px; max-width: 62ch; font-size: 18px; line-height: 1.6; color: var(--tn-chu); text-wrap: pretty; }
.tn-bai__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 14px; color: var(--tn-chu-nhat); }
.tn-bai__tac-gia { font-weight: 700; color: var(--tn-chu); }
.tn-bai__cham { color: var(--tn-vien-dam); }

/* ── Ảnh đại diện: đúng tỉ lệ gốc, có trần chiều cao — ảnh vuông/dọc không chiếm cả màn hình ── */
.tn-bai .tn-bai__anh { display: flex; flex-direction: column; align-items: center; margin: 22px 0 28px; border-radius: 12px; overflow: hidden; background: var(--tn-mat-lom); }
.tn-bai .tn-bai__anh img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(440px, 58vh); object-fit: contain; }
.tn-bai__anh figcaption { width: 100%; padding: 8px 12px; font-size: 13px; color: var(--tn-chu-nhat); background: var(--tn-mat); text-align: center; }
@media (max-width: 767px) { .tn-bai .tn-bai__anh { margin: 0 -16px 22px; border-radius: 0; } .tn-bai .tn-bai__anh img { max-height: min(52vh, 400px); } }

/* ── Mục lục (Easy TOC): kiểu theo theme, cấu hình plugin giữ nguyên ── */
.tn-bai #ez-toc-container { display: block; width: 100%; box-sizing: border-box; margin: 0 0 28px; padding: 16px 18px; border: 1px solid var(--tn-vien); border-radius: 12px; background: var(--tn-mat); box-shadow: none; font-size: 15px; }
.tn-bai #ez-toc-container .ez-toc-title-container { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tn-bai #ez-toc-container .ez-toc-title { margin: 0; font-size: 16px !important; font-weight: 800; color: var(--tn-chu); }
.tn-bai #ez-toc-container .ez-toc-title-toggle a, .tn-bai #ez-toc-container .ez-toc-btn { min-width: 36px; min-height: 36px; }
.tn-bai #ez-toc-container nav > ul { margin: 12px 0 0; padding: 0; list-style: none; }
.tn-bai #ez-toc-container li { margin: 0; padding: 0; line-height: 1.45; }
.tn-bai #ez-toc-container li a { display: block; padding: 6px 0; font-size: 15px; color: var(--tn-chu); text-decoration: none; border-radius: 6px; }
.tn-bai #ez-toc-container li a:hover, .tn-bai #ez-toc-container li a:focus-visible { color: var(--tn-thuong-hieu); }
.tn-bai #ez-toc-container li ul { margin: 0 0 4px 6px; padding: 0 0 0 12px; border-left: 2px solid var(--tn-vien); list-style: none; }
.tn-bai #ez-toc-container li ul a { padding: 4px 0; font-size: 14px; color: var(--tn-chu-phu); }
.tn-bai #ez-toc-container li a[aria-current="true"] { color: var(--tn-thuong-hieu); font-weight: 700; }
/* Trong bài (dưới 1100px): mục lục dài không đẩy nội dung đi quá xa — cuộn trong khung, vẫn thu gọn được bằng nút. */
.tn-noi-dung #ez-toc-container nav { max-height: min(50vh, 360px); overflow-y: auto; overscroll-behavior: contain; }
/* Trong cột bên: chữ gọn hơn một bậc, cuộn trong khung nếu mục lục dài. */
.tn-bai__ben #ez-toc-container { margin: 0; padding: 14px 16px; }
.tn-bai__ben #ez-toc-container li a { font-size: 14px; padding: 5px 0; }
.tn-bai__ben #ez-toc-container li ul a { font-size: 13.5px; }

/* ── Thẻ liên hệ ở cột bên ── */
.tn-bai__lien-he { padding: 16px; border: 1px solid var(--tn-vien); border-radius: 12px; background: var(--tn-thuong-hieu-nhat); display: grid; gap: 10px; }
.tn-bai__lien-he-tieu-de { margin: 0; font-weight: 800; font-size: 15px; color: var(--tn-chu); }
.tn-bai__lien-he-goi { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; color: var(--tn-thuong-hieu); font-weight: 700; text-decoration: none; }
.tn-bai__lien-he-nut { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 8px; background: var(--tn-thuong-hieu); color: #fff !important; font-weight: 700; text-decoration: none; }
.tn-bai__lien-he-nut:hover { background: var(--tn-thuong-hieu-dam); }

/* ── Cuối bài ── */
.tn-bai .tn-faq { margin-top: 36px; }
.tn-bai .tn-the-bai { margin-top: 28px; }