/* =========================================================================
   Vinaweb – Trang danh mục bài viết và trang chi tiết bài viết
   Dùng chung banner (.phero, .crumb) với trang Giới thiệu (about.css) và
   thẻ bài viết (.news, .nlist, .ncard) với trang chủ (style.css).
   ========================================================================= */

/* ---------- Banner ---------- */
.phero--news { padding: 160px 0 96px; }
.phero--news .phero__title { max-width: 860px; }
.phero--news .phero__lead { max-width: 680px; }
.phero--news .phero__hex { right: 6%; bottom: -70px; width: 320px; height: 283px; }
.phero__count { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 9px 18px; border-radius: 100px; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.82); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); animation: pheroIn 1s var(--ease) .24s both; }
.phero__count b { font-weight: 700; color: #fff; }
.phero__count i { width: 12px; height: 1px; background: rgba(255,255,255,.45); }
.crumb { flex-wrap: wrap; }

/* ---------- Chuyên mục ---------- */
.news--list { padding: 0 0 110px; }
/* Một hàng duy nhất dạng viên thuốc nổi; tràn thì cuộn ngang, có nút mũi tên (news.js) */
.topics { position: relative; z-index: 2; display: flex; align-items: center; width: fit-content; max-width: 100%; height: 60px; margin: -30px auto 0; padding: 0 8px; border-radius: 100px; background: rgba(255,255,255,.96); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 0 0 1px rgba(33,34,82,.08), 0 16px 40px -18px rgba(33,34,82,.35); }
.topics__track { position: relative; display: flex; gap: 6px; min-width: 0; padding: 8px 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: 100px; }
.topics__track::-webkit-scrollbar { display: none; }
.topics.has-prev .topics__track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 60px); mask-image: linear-gradient(90deg, transparent, #000 60px); }
.topics.has-next .topics__track { -webkit-mask-image: linear-gradient(270deg, transparent, #000 60px); mask-image: linear-gradient(270deg, transparent, #000 60px); }
.topics.has-prev.has-next .topics__track { -webkit-mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent); mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent); }
.topics__nav { position: absolute; top: 10px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--red); background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, color .3s; }
.topics__nav[hidden] { display: none; }
.topics__nav:hover { color: #fff; background: var(--red); box-shadow: none; }
.topics__nav svg { width: 18px; height: 18px; stroke-width: 2.2; }
.topics__nav--prev { left: 10px; }
.topics__nav--next { right: 10px; }
.topic { flex: none; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 17px; border-radius: 100px; font-size: 14.5px; font-weight: 600; color: var(--text); white-space: nowrap; background: var(--chip); transition: background .3s, color .3s, transform .25s var(--ease); }
.topic i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); transition: background .3s; }
.topic:hover { color: var(--red); }
.topic.is-active { color: #fff; background: var(--red); }
.topic.is-active i { background: #fff; }
.topic:focus-visible, .pager a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ---------- Lưới bài viết ---------- */
.news--list .nlist { gap: 44px 22px; margin-top: 56px; }
.news--list .ncard__img { aspect-ratio: 16 / 9; }
.ncard__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14.5px; line-height: 1.65; color: var(--gray); }
.news__empty { margin-top: 56px; padding: 48px 20px; border-radius: 15px; text-align: center; color: var(--gray); background: #fff; }

/* ---------- Phân trang ---------- */
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 64px 0 0; padding: 0; list-style: none; }
.pager li > * { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: 100px; font-size: 15px; font-weight: 600; color: var(--black); background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, color .3s, box-shadow .3s; }
.pager li > a:hover { color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.pager li.active > * { color: #fff; background: var(--red); box-shadow: none; }
.pager li.disabled > * { color: #b9b9b9; background: transparent; }

@media (max-width: 1024px) {
  .phero--news { padding: 120px 0 80px; }
}
@media (max-width: 680px) {
  .phero--news { padding: 110px 0 70px; }
  .phero__count { margin-top: 24px; }
  /* Thanh chuyên mục tràn sát mép màn hình, vuốt ngang, không cần nút mũi tên */
  .topics { width: auto; max-width: none; height: 56px; margin: -28px calc(var(--gutter) * -1) 0; padding: 0; border-radius: 0; }
  .topics__track { padding: 8px var(--gutter); border-radius: 0; scroll-snap-type: x proximity; }
  .topics__nav { display: none; }
  .topics .topics__track { -webkit-mask-image: none; mask-image: none; }
  .topic { height: 40px; padding: 0 15px; font-size: 14px; scroll-snap-align: center; }
  .news--list { padding-bottom: 80px; }
  .news--list .nlist { gap: 60px; margin-top: 40px; }
  .pager { margin-top: 44px; gap: 6px; }
  .pager li > * { min-width: 40px; height: 40px; }
}

/* =========================================================================
   Trang chi tiết bài viết
   ========================================================================= */

/* Thanh tiến độ đọc */
.readbar { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 3px; pointer-events: none; }
.readbar span { display: block; height: 100%; background: linear-gradient(90deg, #e0333a, var(--red)); transform-origin: left; transform: scaleX(var(--p, 0)); }

/* ---------- Banner ---------- */
.phero--post { padding: 160px 0 90px; }
.phero--post .phero__grid { grid-template-columns: 1.1fr .9fr; }
.phero--post .phero__title { font-size: clamp(30px, 4.2vw, 38px); line-height: 1.28; }
.phero--post .phero__photo { aspect-ratio: 16 / 9; rotate: 1.5deg; background: rgba(255,255,255,.06); }
.phero--post .phero__photo img { animation: none; }
.pmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 28px; list-style: none; font-size: 14.5px; font-weight: 500; color: rgba(255,255,255,.78); animation: pheroIn 1s var(--ease) .16s both; }
.pmeta li { display: inline-flex; align-items: center; gap: 8px; }
.pmeta svg { width: 17px; height: 17px; color: #ffb3b6; }
.pmeta__cat { display: inline-flex; align-items: center; height: 34px; padding: 0 15px; border-radius: 100px; font-weight: 600; color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); transition: background .3s; }
.pmeta__cat:hover { background: var(--red); }

/* ---------- Khung nội dung ---------- */
.post { padding: 72px 0 100px; background: #fff; }
.post__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; align-items: start; }
.post__main { min-width: 0; }
.post__side { position: sticky; top: 118px; display: grid; gap: 20px; max-height: calc(100vh - 138px); grid-template-rows: minmax(0, auto) auto; }

.post__lead { margin-bottom: 34px; padding: 4px 0 4px 22px; border-left: 3px solid var(--red); font-size: 19px; line-height: 1.75; font-weight: 500; color: var(--black); }
.post__lead p + p { margin-top: 12px; }

/* ---------- Nội dung soạn từ trình soạn thảo ---------- */
.prose { font-size: 17px; line-height: 1.85; color: var(--text); overflow-wrap: break-word; }
.prose > * + * { margin-top: 20px; }
.prose p:has(> meta:only-child), .prose meta { display: none; }
.prose :is(h1, h2, h3, h4) { color: var(--black); line-height: 1.35; text-wrap: balance; scroll-margin-top: 120px; }
.prose :is(h1, h2, h3, h4) strong { font-weight: inherit; }
.prose :is(h1, h2) { margin-top: 52px; font-size: clamp(23px, 2.1vw, 29px); font-weight: 700; letter-spacing: -.01em; }
.prose h3 { margin-top: 38px; font-size: clamp(19px, 1.6vw, 22px); font-weight: 700; }
.prose h4 { margin-top: 30px; font-size: 18px; font-weight: 700; }
.prose > :first-child { margin-top: 0; }
.prose a { color: var(--red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .25s; }
.prose a:hover { color: var(--red-dark); }
.prose strong, .prose b { font-weight: 700; color: var(--black); }
.prose :is(ul, ol) { padding-left: 24px; }
.prose li { margin-top: 10px; padding-left: 4px; }
.prose li::marker { color: var(--red); font-weight: 700; }
.prose li > p { margin: 0; }
.prose li > p + p, .prose li > :is(ul, ol) { margin-top: 10px; }
/* Tiêu đề bị bọc trong danh sách đánh số (dán từ Lark/Google Docs): hiển thị như một tiêu đề có số thứ tự */
.prose :is(ol, ul):has(> li > :is(h2, h3, h4)) { margin-top: 52px; padding-left: 0; list-style-position: inside; }
.prose ul:has(> li > :is(h2, h3, h4)) { list-style: none; }
.prose li:has(> :is(h2, h3, h4)) { margin: 0; padding: 0; color: var(--black); font-weight: 700; line-height: 1.35; font-size: clamp(23px, 2.1vw, 29px); }
.prose li:has(> h3) { font-size: clamp(19px, 1.6vw, 22px); }
.prose li:has(> h4) { font-size: 18px; }
.prose li:has(> :is(h2, h3, h4))::marker { color: var(--red); }
.prose li > :is(h2, h3, h4) { display: inline; margin: 0; font: inherit; letter-spacing: inherit; }
.prose img { display: block; max-width: 100%; height: auto !important; margin: 0 auto; border-radius: 14px; box-shadow: 0 0 0 1px rgba(33,34,82,.08); }
.prose p:has(> img:only-child), .prose p:has(> a:only-child > img) { margin-top: 30px; }
/* Chú thích ảnh: đoạn in nghiêng căn giữa ngay sau ảnh */
.prose p:has(> img) + p:has(> em:only-child) { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--gray); text-align: center; }
.prose blockquote { margin: 30px 0 0; padding: 20px 24px; border-left: 3px solid var(--red); border-radius: 0 14px 14px 0; background: var(--beige); color: var(--black); }
.prose blockquote > * + * { margin-top: 12px; }
.prose iframe { max-width: 100%; border: 0; border-radius: 14px; }
.prose hr { height: 1px; margin: 40px 0 0; border: 0; background: var(--line); }
.tablewrap { margin-top: 28px; overflow-x: auto; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line); -webkit-overflow-scrolling: touch; }
.prose table { width: 100% !important; min-width: 520px; border-collapse: collapse; font-size: 15.5px; line-height: 1.6; }
.prose :is(td, th) { padding: 12px 16px; border: 1px solid var(--line); vertical-align: top; text-align: left; }
.prose tr:first-child > * { border-top: 0; background: var(--beige); font-weight: 700; color: var(--black); }
.prose tr:last-child > * { border-bottom: 0; }
.prose tr > :first-child { border-left: 0; }
.prose tr > :last-child { border-right: 0; }
.prose td > p { margin: 0; }
/* Nút gọi/chat chèn bằng mã {{số điện thoại}} trong bài */
.prose .d-flex { display: flex; }
.prose .mx-auto { margin-inline: auto; }
.prose a:is(.btn-read-more, .btn-chat-tvv) { display: inline-flex; align-items: center; height: 50px; padding: 0 28px; border-radius: 100px; font-size: 15.5px; font-weight: 700; color: #fff; text-decoration: none; background: linear-gradient(135deg, #e0333a, var(--red) 55%, #8f0a10); box-shadow: 0 14px 30px -12px rgba(224,51,58,.7); transition: transform .25s var(--ease); }
.prose a:is(.btn-read-more, .btn-chat-tvv)::before { content: none; }
.prose a:is(.btn-read-more, .btn-chat-tvv):hover { color: #fff; transform: translateY(-2px); }

/* ---------- Tác giả ---------- */
.author { display: grid; grid-template-columns: 96px 1fr; gap: 22px; margin-top: 48px; padding: 24px; border-radius: 20px; background: var(--beige); }
.author__img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: #fff; }
.author__kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.author__brief { margin-top: 6px; font-size: 15px; line-height: 1.7; }
.author__brief p + p { margin-top: 8px; }
.author__link { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--red); }

/* ---------- Chia sẻ ---------- */
.share { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); }
.share__label { font-size: 15px; font-weight: 700; color: var(--black); }
.share__list { display: flex; gap: 8px; }
.share__btn { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; color: var(--black); box-shadow: inset 0 0 0 1px var(--line); transition: background .3s, color .3s, box-shadow .3s, transform .25s var(--ease); }
.share__btn svg { width: 18px; height: 18px; }
.share__btn:hover { color: #fff; background: var(--red); box-shadow: none; transform: translateY(-2px); }
.share__tip { position: absolute; bottom: calc(100% + 8px); right: 0; padding: 6px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 600; white-space: nowrap; color: #fff; background: var(--black); opacity: 0; translate: 0 4px; transition: opacity .25s, translate .25s; pointer-events: none; }
.share__tip:empty { display: none; }
.share__copy.is-done .share__tip { opacity: 1; translate: 0 0; }

/* ---------- Cột bên: mục lục + lời mời tư vấn ---------- */
.toc { display: flex; flex-direction: column; min-height: 0; padding: 20px 8px 14px 20px; border-radius: 20px; background: var(--beige); }
.toc__title { display: flex; align-items: center; justify-content: space-between; padding-right: 12px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--black); list-style: none; cursor: default; }
.toc__title::-webkit-details-marker { display: none; }
.toc__title svg { display: none; width: 20px; height: 20px; color: var(--gray); transition: rotate .3s; }
.toc__list { min-height: 0; margin-top: 12px; padding: 0 8px 0 0; overflow-y: auto; list-style: none; scrollbar-width: thin; scrollbar-color: #d6d2c6 transparent; }
.toc__item a { display: block; padding: 7px 0 7px 14px; border-left: 2px solid #e2ded2; font-size: 14.5px; line-height: 1.5; color: var(--text); transition: color .25s, border-color .25s; }
.toc__item--h3 a { padding-left: 28px; font-size: 14px; color: var(--gray); }
.toc__item a:hover { color: var(--red); }
.toc__item a.is-active { border-left-color: var(--red); font-weight: 600; color: var(--red); }

.sidecta { position: relative; isolation: isolate; overflow: hidden; padding: 24px; border-radius: 20px; color: #fff; background: radial-gradient(260px 200px at 100% 0%, rgba(186,19,26,.7), transparent 70%), var(--ink); }
.sidecta__hex { position: absolute; right: -50px; bottom: -50px; z-index: -1; width: 170px; height: 150px; fill: none; stroke: rgba(255,255,255,.2); stroke-width: 1; }
.sidecta__kicker { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #ffb3b6; }
.sidecta__title { margin-top: 8px; font-size: 19px; font-weight: 700; line-height: 1.4; }
.sidecta__text { margin-top: 8px; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.75); }
.sidecta__btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; margin-top: 18px; padding: 0 5px 0 20px; border-radius: 100px; font-size: 14.5px; font-weight: 700; color: var(--red); background: #fff; }
.sidecta__btn .btn__ic { width: 36px; height: 36px; color: #fff; background: var(--red); }
.sidecta__btn:hover .btn__ic { transform: rotate(45deg); }
.sidecta__tel { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; font-weight: 700; }
.sidecta__tel svg { width: 17px; height: 17px; color: #ffb3b6; }

/* Không có mục lục: thu hẹp cột nội dung cho dễ đọc */
.post__grid--notoc { grid-template-columns: minmax(0, 760px) 320px; justify-content: space-between; }

/* ---------- Bài viết liên quan ---------- */
.news--related { padding: 90px 0 100px; }
.news--related .ncard__img { aspect-ratio: 16 / 9; }

.share__btn:focus-visible, .toc__item a:focus-visible, .sidecta__btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

@media (max-width: 1024px) {
  .phero--post { padding: 120px 0 70px; }
  .phero--post .phero__grid { grid-template-columns: 1fr; gap: 36px; }
  .phero--post .phero__photo { rotate: none; }
  .post { padding: 40px 0 72px; }
  .post__grid, .post__grid--notoc { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 760px; }
  /* Mục lục lên đầu bài và gập lại được; ô tư vấn ẩn vì cuối trang đã có form */
  .post__side { position: static; order: -1; max-height: none; }
  .sidecta { display: none; }
  .toc { padding: 16px 8px 16px 18px; border-radius: 16px; }
  .toc__title { cursor: pointer; }
  .toc__title svg { display: block; }
  .toc[open] .toc__title svg { rotate: 180deg; }
  .toc__list { max-height: 50vh; }
  .news--related { padding: 70px 0 80px; }
}
@media (max-width: 680px) {
  .phero--post { padding: 108px 0 54px; }
  .pmeta { margin-top: 22px; gap: 10px 16px; font-size: 14px; }
  .post__lead { margin-bottom: 28px; padding-left: 16px; font-size: 17.5px; }
  .prose { font-size: 16.5px; line-height: 1.8; }
  .prose :is(h1, h2), .prose :is(ol, ul):has(> li > :is(h2, h3, h4)) { margin-top: 40px; }
  .author { grid-template-columns: 1fr; }
  .share { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .readbar { display: none; }
}

/* =========================================================================
   Trang nội dung soạn trong quản trị (pages/page.php) – dùng lại khung bài viết ở trên
   ========================================================================= */
.pg-cloud__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 44px; list-style: none; }
.pg-cloud__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%; padding: 20px 22px; border-radius: 16px; font-size: 16px; font-weight: 700; color: var(--black); background: #fff; transition: color .25s, box-shadow .3s, transform .3s var(--ease); }
.pg-cloud__list svg { width: 18px; height: 18px; flex: none; color: var(--red); transition: transform .3s var(--ease); }
.pg-cloud__list a:hover { color: var(--red); box-shadow: 0 0 0 1px rgba(186,19,26,.35), 0 20px 34px -22px rgba(33,34,82,.4); transform: translateY(-3px); }
.pg-cloud__list a:hover svg { transform: rotate(45deg); }
.pg-cloud__list a:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 1024px) { .pg-cloud__list { grid-template-columns: 1fr 1fr; margin-top: 34px; } }
@media (max-width: 680px) { .pg-cloud__list { gap: 10px; } .pg-cloud__list a { padding: 16px; font-size: 15px; } }