/* TKT Theme · /tac-gia/ T4 (templates/pages/tac-gia.php). Chỉ nạp khi cờ "tac-gia" bật. DS 2.1: chỉ token var(--*).
   Khối dùng chung: crumb-trail, cta-panel (components.css). File này chỉ giữ bố cục riêng trang. */

.tg-page { background: var(--bg-canvas); color: var(--fg-1); overflow-x: clip; }
.tg-wrap { max-width: var(--content-max); margin: 0 auto; padding: var(--s-6) var(--s-4) var(--s-8); }
@media (min-width: 600px) { .tg-wrap { padding-inline: var(--s-6); } }
@media (min-width: 905px) { .tg-wrap { padding: var(--s-8) var(--s-7) var(--s-9); } }

.tg-title { margin: 0; font: var(--w-bold) clamp(32px, 4.4vw, 52px)/1.08 var(--font-display); font-feature-settings: normal; letter-spacing: -.02em; color: var(--fg-1); }
.tg-eyebrow { margin: 0 0 var(--s-2); font: var(--w-demi) 14px/1.4 var(--font-body); color: var(--tkt-blue-600); }
.tg-lede, .tg-bio { margin: 0; max-width: 62ch; font: var(--w-book) 18px/1.6 var(--font-body); color: var(--fg-2); text-align: justify; }
.tg-h2 { margin: 0 0 var(--s-4); font: var(--w-bold) clamp(26px, 2.6vw, 36px)/1.2 var(--font-display); font-feature-settings: normal; color: var(--fg-1); }
.tg-years { display: inline-block; margin: var(--s-3) 0 var(--s-4); padding: var(--s-1) var(--s-3); border-radius: var(--r-pill); background: var(--tkt-blue-050); color: var(--tkt-blue-700); font: var(--w-medium) 14px/1.5 var(--font-body); }

/* Ảnh vuông bo góc */
.tg-photo { display: grid; place-items: center; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-20); background: var(--bg-tint); }
.tg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg-photo__initials { font: var(--w-bold) 40px/1 var(--font-display); color: var(--tkt-blue-600); }

/* Hồ sơ */
.tg-profile { display: grid; gap: var(--s-6); align-items: center; margin-top: var(--s-5); }
.tg-photo--lg { max-width: 320px; }
@media (min-width: 905px) { .tg-profile { grid-template-columns: 320px minmax(0, 1fr); gap: var(--s-8); } }
.tg-section { margin-top: var(--s-8); }
.tg-expertise { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 600px) { .tg-expertise { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tg-expertise__item { padding: var(--s-4) var(--s-5); border: 1px solid var(--line-soft); border-radius: var(--r-12); background: var(--bg-pure); font: var(--w-medium) 16px/1.5 var(--font-body); }
.tg-posts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.tg-posts li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft); }
.tg-posts__link { min-height: 44px; display: inline-flex; align-items: center; color: var(--tkt-blue-700); font: var(--w-medium) 16px/1.5 var(--font-body); text-decoration: none; }
.tg-posts__link:hover { text-decoration: underline; }
.tg-posts__date { align-self: center; color: var(--fg-3); font: var(--w-book) 14px/1.4 var(--font-mono); }
.tg-back { margin: var(--s-7) 0 0; }
.tg-back a { display: inline-flex; min-height: 44px; align-items: center; color: var(--tkt-blue-600); font: var(--w-demi) 16px/1 var(--font-body); }

/* Hub: 5 người → lưới 1/2/3 cột; ô cuối hàng 2 cột không mồ côi nhờ căn giữa hàng (flex). */
.tg-hub-head { display: grid; gap: var(--s-3); margin: var(--s-5) 0 var(--s-7); }
.tg-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-5); }
.tg-grid > li { flex: 1 1 100%; max-width: 360px; }
@media (min-width: 600px) { .tg-grid > li { flex-basis: calc(50% - var(--s-5)); } }
@media (min-width: 1024px) { .tg-grid > li { flex-basis: calc(33.333% - var(--s-5)); } }
.tg-tile { display: flex; flex-direction: column; gap: var(--s-1); height: 100%; padding: var(--s-4); border: 1px solid var(--line-soft); border-radius: var(--r-24); background: var(--bg-pure); color: inherit; text-decoration: none; transition: box-shadow .2s var(--ease-out), transform .2s var(--ease-out); }
.tg-tile:hover { box-shadow: var(--elev-2); transform: translateY(-2px); }
.tg-tile .tg-photo { margin-bottom: var(--s-3); }
.tg-tile__name { font: var(--w-bold) 20px/1.3 var(--font-display); font-feature-settings: normal; color: var(--fg-1); }
.tg-tile__role { font: var(--w-medium) 15px/1.4 var(--font-body); color: var(--tkt-blue-600); }
.tg-tile__years { font: var(--w-book) 14px/1.4 var(--font-body); color: var(--fg-3); }