/* ============================================================
   Section Content — Chi tiết tin tức (single "Tin tức")
   Node Figma: 1740:11322 — 1600×2496.
   2 cột: aside 25.5rem (Mục lục sticky + chia sẻ) + article 57rem (the_content).
   NO gap → margin. Chỉ 1px cho border. rem cho mọi kích thước.
   ============================================================ */

.section-tt-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 6.25rem;
  font-family: "Nunito Sans", sans-serif;
}

.section-tt-content__inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  width: 100%;
}

/* ── Cột trái: Aside (Mục lục + chia sẻ) ── */
.tt-aside {
  position: relative;
  flex: 0 0 25.5rem;
  width: 25.5rem;
}

.tt-aside__sticky {
  position: sticky;
  top: 7.5rem;
  display: flex;
  flex-direction: column;
}

/* ── Mục lục (Table of contents) ── */
.tt-toc {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  border: 1px solid var(--color-r-foundation-gray-100, #d5d5d5);
  border-radius: 0.375rem;
}

.tt-toc__head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.tt-toc__title {
  margin: 0;
  font-family: "Nunito Sans", sans-serif;
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 2rem;
  letter-spacing: -0.0625rem;
  color: #003253;
}

.tt-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 2.125rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.tt-toc__toggle-icon {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

.tt-toc.is-collapsed .tt-toc__toggle {
  transform: rotate(180deg);
}

.tt-toc.is-collapsed .tt-toc__list,
.tt-toc.is-collapsed .tt-toc__more {
  display: none;
}

.tt-toc__list {
  display: flex;
  flex-direction: column;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.tt-toc__item {
  margin: 0;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75rem;
  letter-spacing: -0.0156rem;
  color: var(--color-r-semantic-text-800, rgba(0, 51, 75, 0.8));
}

.tt-toc__item + .tt-toc__item {
  margin-top: 0.75rem;
}

.tt-toc__item--active {
  font-weight: 800;
  color: #003253;
}

.tt-toc__link {
  display: block;
  color: inherit;
  font: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.tt-toc__link:hover {
  color: var(--color-r-semantic-text-highlight, #079de2);
}

.tt-toc__more {
  margin-top: 1.25rem;
  padding: 0;
  background: none;
  border: none;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.75rem;
  letter-spacing: -0.0156rem;
  color: var(--color-r-semantic-text-highlight, #079de2);
  text-align: left;
  cursor: pointer;
}

/* ── Khối chia sẻ ── */
.section-tt-content .tt-share {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 2rem;
}

.section-tt-content .tt-share__label {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75rem;
  letter-spacing: -0.0156rem;
  color: #001224;
}

.section-tt-content .tt-share__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  margin-left: 0.625rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  transition: transform 0.2s ease;
}

/* Tooltip "Đã sao chép liên kết" cho nút Sao chép */
.section-tt-content .tt-share__link--copy.is-copied::after {
  content: attr(data-copied);
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  padding: 0.375rem 0.625rem;
  background-color: #003253;
  color: #ffffff;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border-radius: 0.25rem;
  pointer-events: none;
  z-index: 3;
}

.section-tt-content .tt-share__label + .tt-share__link {
  margin-left: 0.6875rem;
}

.section-tt-content .tt-share__link:hover {
  transform: translateY(-0.125rem);
}

.section-tt-content .tt-share__icon {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

/* ── Cột phải: bài viết (the_content WYSIWYG) ── */
.section-tt-content .tt-article {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 5rem;
}

.entry-content {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75rem;
  letter-spacing: -0.0156rem;
  color: var(--color-r-semantic-text-800, rgba(0, 51, 75, 0.8));
  /* Chặn URL / từ siêu dài không dấu cách tràn khỏi cột bài viết */
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Clearfix: đóng vùng nội dung để ảnh float (alignleft/right) không tràn xuống khối sau */
.entry-content::after {
  content: "";
  display: table;
  clear: both;
}

.entry-content > *:first-child {
  margin-top: 0;
}

.entry-content > *:last-child {
  margin-bottom: 0;
}

.entry-content p:has(strong) {
  margin-bottom: 1.5rem;
}
.entry-content p:has(em) {
  margin-bottom: 2rem;
}
.entry-content p:has(img) {
  margin: 0;
  margin-bottom: 0.625rem;
}
.entry-content p {
  margin: 0 0 2rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75rem;
  letter-spacing: -0.0156rem;
  color: var(--color-r-semantic-text-800, rgba(0, 51, 75, 0.8));
  text-align: justify;
}

.entry-content strong,
.entry-content b {
  font-weight: 800;
  color: #003253;
}

/* H1 hiếm khi dùng trong nội dung (H1 trang là tiêu đề bài) — style phòng khi editor chèn */
.entry-content h1 {
  margin: 2rem 0 1.5rem;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.3333;
  letter-spacing: -0.0156rem;
  color: #003253;
}

.entry-content h2 {
  margin: 1.5rem 0;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.3333;
  letter-spacing: -0.0156rem;
  color: #003253;
}

.entry-content h3 {
  margin: 1.5rem 0 0.75rem;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.5rem;
  letter-spacing: -0.0156rem;
  color: #003253;
}

.entry-content h4 {
  margin: 1.25rem 0 0.75rem;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5rem;
  letter-spacing: -0.0156rem;
  color: #003253;
}

.entry-content h5 {
  margin: 1.25rem 0 0.5rem;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5rem;
  letter-spacing: -0.0156rem;
  color: #003253;
}

.entry-content h6 {
  margin: 1.25rem 0 0.5rem;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5rem;
  letter-spacing: -0.0156rem;
  color: #003253;
}

.entry-content a {
  color: var(--color-r-semantic-text-highlight, #079de2);
  text-decoration: none;
}

.entry-content a:hover {
  text-decoration: underline;
}

/* Theme reset global list-style:none → khôi phục marker riêng trong bài viết */
.entry-content ul,
.entry-content ol {
  margin: 0 0 1.5rem;
  padding-left: 1.5rem;
  list-style-position: outside;
}

.entry-content ul {
  list-style-type: disc;
}

.entry-content ol {
  list-style-type: decimal;
}

.entry-content li {
  margin-bottom: 0.5rem;
  display: list-item;
}

/* ── Danh sách lồng nhau: đổi kiểu marker theo cấp + thu khoảng cách ── */
.entry-content ul ul {
  list-style-type: circle;
}

.entry-content ul ul ul {
  list-style-type: square;
}

.entry-content ol ol {
  list-style-type: lower-alpha;
}

.entry-content ol ol ol {
  list-style-type: lower-roman;
}

/* List con nằm trong <li>: bỏ margin-bottom 1.5rem thừa, thêm chút margin-top */
.entry-content li > ul,
.entry-content li > ol {
  margin: 0.5rem 0 0;
}

.entry-content figure {
  margin: 2rem 0;
}

/* Ảnh mặc định: giữ đúng kích thước editor chèn, chỉ cap theo cột (KHÔNG ép full width) */
.entry-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.25rem;
}

/* Ảnh chèn kiểu chuẩn (figure) = full chiều rộng cột bài viết */
.entry-content figure img {
  display: block;
  width: 100%;
}

/* ── Căn lề ảnh do Classic Editor thêm (alignleft / alignright / aligncenter / alignnone) ── */
.entry-content .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.entry-content .alignleft {
  float: left;
  margin: 0.375rem 1.5rem 1rem 0;
  max-width: 50%;
}

.entry-content .alignright {
  float: right;
  margin: 0.375rem 0 1rem 1.5rem;
  max-width: 50%;
}

.entry-content .alignnone {
  height: auto;
}

/* ── Caption dạng shortcode [caption] → .wp-caption / .wp-caption-text ── */
.entry-content .wp-caption {
  max-width: 100%;
  margin: 2rem auto;
}

.entry-content .wp-caption img {
  display: block;
  width: 100%;
}

.entry-content .wp-caption-text {
  margin: 0.625rem 0 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75rem;
  letter-spacing: -0.0156rem;
  color: var(--color-r-semantic-text-800, rgba(0, 51, 75, 0.8));
  text-align: center;
}

.entry-content figcaption {
  margin-top: 0.625rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75rem;
  letter-spacing: -0.0156rem;
  color: var(--color-r-semantic-text-800, rgba(0, 51, 75, 0.8));
  text-align: center;
}

/* ── Inline: code, mark (highlight) ── */
.entry-content code {
  padding: 0.1rem 0.35rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875rem;
  background-color: #eef1f4;
  border-radius: 0.25rem;
}

.entry-content mark {
  padding: 0 0.15rem;
  background-color: #fff3b0;
  color: inherit;
  border-radius: 0.125rem;
}

/* ── Trích dẫn (blockquote) ── */
.entry-content blockquote {
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  border-left: 0.25rem solid var(--color-r-semantic-text-highlight, #079de2);
  background-color: rgba(7, 157, 226, 0.06);
  border-radius: 0 0.375rem 0.375rem 0;
}

.entry-content blockquote p {
  font-style: italic;
  color: #003253;
}

.entry-content blockquote > *:last-child {
  margin-bottom: 0;
}

.entry-content blockquote cite {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-weight: 700;
  color: var(--color-r-semantic-text-800, rgba(0, 51, 75, 0.8));
}

/* ── Bảng dữ liệu (table) ── */
.entry-content table {
  width: 100%;
  margin: 0 0 1.5rem;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.5rem;
}

.entry-content th,
.entry-content td {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-r-foundation-gray-100, #d5d5d5);
  text-align: left;
  vertical-align: top;
}

.entry-content th {
  background-color: #003253;
  color: #ffffff;
  font-weight: 800;
}

.entry-content tbody tr:nth-child(even) {
  background-color: rgba(0, 51, 75, 0.04);
}

/* ── Khối định dạng sẵn (pre / code block) ── */
.entry-content pre {
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  background-color: #f4f6f8;
  border: 1px solid var(--color-r-foundation-gray-100, #d5d5d5);
  border-radius: 0.375rem;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #003253;
  white-space: pre;
  overflow-x: auto;
}

/* Bên trong pre, code không cần nền/padding riêng */
.entry-content pre code {
  padding: 0;
  font-size: inherit;
  background: none;
  border-radius: 0;
}

/* ── Đường kẻ ngang (hr) ── */
.entry-content hr {
  height: 0;
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--color-r-foundation-gray-100, #d5d5d5);
}

/* ── Danh sách định nghĩa (dl / dt / dd) ── */
.entry-content dl {
  margin: 0 0 1.5rem;
}

.entry-content dt {
  font-weight: 800;
  color: #003253;
}

.entry-content dd {
  margin: 0 0 0.75rem;
  padding-left: 1rem;
}

.tt-article__author {
  margin: 2rem 0 0;
  padding-top: 1rem;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75rem;
  letter-spacing: -0.0156rem;
  color: var(--color-r-semantic-text-800, rgba(0, 51, 75, 0.8));
}
.tt-article__author span {
  font-weight: 800;
  color: #003253;
}

/* ============================================================
   Mobile-only: Sticky "Mục lục" bar + bottom-sheet modal
   (Figma 2335:16776 sticky bar + 1856:13640 modal). Ẩn ở desktop.
   ============================================================ */
.tt-toc-bar,
.tt-toc-modal {
  display: none;
}

.tt-toc-bar {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 90;
  align-items: center;
  width: calc(100% - 2rem);
  max-width: 21.9375rem;
  padding: 0.75rem 1rem;
  background-color: #003253;
  border: 0;
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 1rem rgba(0, 51, 75, 0.25);
  cursor: pointer;
}

.tt-toc-bar__label {
  flex: 1 1 auto;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.5rem;
  letter-spacing: -0.0156rem;
  color: #ffffff;
  text-align: left;
}

.tt-toc-bar__icon {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-left: 0.5rem;
  /* chevron-down (navy) → trắng, xoay mũi lên (mở lên trên) */
  filter: brightness(0) invert(1);
  transform: rotate(180deg);
}

.tt-toc-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.tt-toc-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 18, 36, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.tt-toc-modal.is-open .tt-toc-modal__backdrop {
  opacity: 1;
}

.tt-toc-modal__sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 80vh;
  padding: 1rem;
  background-color: #ffffff;
  border-radius: 1rem 1rem 0 0;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  overflow-y: auto;
}

.tt-toc-modal.is-open .tt-toc-modal__sheet {
  transform: translateY(0);
}

.tt-toc-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-r-foundation-gray-100, #d5d5d5);
}

.tt-toc-modal__title {
  margin: 0;
  font-family: "Nunito Sans", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.5rem;
  letter-spacing: -0.0156rem;
  color: #003253;
}

.tt-toc-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.tt-toc-modal__close-icon {
  width: 1.25rem;
  height: 1.25rem;
  object-fit: contain;
}

.tt-toc-modal__list {
  display: flex;
  flex-direction: column;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.tt-toc-modal__item {
  margin: 0;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5rem;
  letter-spacing: -0.0156rem;
  color: var(--color-r-semantic-text-800, rgba(0, 51, 75, 0.8));
}

.tt-toc-modal__item + .tt-toc-modal__item {
  margin-top: 0.5rem;
}

.tt-toc-modal__item--active {
  font-weight: 800;
  color: #003253;
}

.tt-toc-modal__link {
  display: block;
  color: inherit;
  font: inherit;
  text-decoration: none;
}

.tt-toc-modal__more {
  margin-top: 1rem;
  padding: 0;
  background: none;
  border: 0;
  font-family: "Nunito Sans", sans-serif;
  font-size: 0.875rem;
  font-weight: 800;
  line-height: 1.5rem;
  letter-spacing: -0.0156rem;
  color: #2b98ff;
  text-align: left;
  cursor: pointer;
}

.tt-toc-modal__share {
  display: flex;
  align-items: center;
  margin-top: 1.5rem;
}

.tt-toc-modal__share .tt-share__label {
  font-size: 0.875rem;
  line-height: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .tt-toc-modal__backdrop,
  .tt-toc-modal__sheet {
    transition: none;
  }
}

/* ============================================================
   Mobile (<= 639.98px) — Figma 1820:37501 (article 1856:13538
   + Mục lục card 1856:13584). Stack 1 cột, Mục lục trên · bài dưới.
   ============================================================ */
@media screen and (max-width: 639.98px) {
  .section-tt-content {
    padding: 2rem 0.75rem;
  }

  .section-tt-content__inner {
    flex-direction: column;
    align-items: stretch;
  }

  .tt-aside {
    flex: 0 0 auto;
    width: 100%;
  }

  .tt-aside__sticky {
    position: static;
    top: auto;
  }

  .tt-article {
    margin-left: 0;
    margin-top: 2rem;
  }

  /* ── Mục lục card inline (1856:13585) ── */
  .tt-toc {
    padding: 0.875rem;
  }

  /* "Mục lục" 16/800 (mobile khác desktop 40/400) */
  .tt-toc__title {
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.5rem;
  }

  .tt-toc__list {
    margin-top: 0.5rem;
  }

  /* Item 14/400 · active 14/800 (1856:13590/91) */
  .tt-toc__item {
    font-size: 0.875rem;
    line-height: 1.5rem;
  }

  .tt-toc__item + .tt-toc__item {
    margin-top: 0.5rem;
  }

  .tt-toc__more {
    margin-top: 0.875rem;
    font-size: 0.875rem;
    line-height: 1.5rem;
  }

  .tt-share {
    margin-top: 1rem;
  }

  .tt-share__label {
    font-size: 0.875rem;
    line-height: 1.5rem;
  }

  /* ── Bài viết: body 12/400, H2 14/800 (1856:13544/52) ── */
  .entry-content,
  .entry-content p {
    font-size: 0.75rem;
    line-height: 1.25rem;
  }

  .entry-content p {
    margin-bottom: 1rem;
  }

  .entry-content h2 {
    margin: 1.5rem 0 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .entry-content h3 {
    font-size: 0.8125rem;
  }

  .entry-content figure {
    margin: 1.25rem 0;
  }

  .entry-content figcaption,
  .entry-content .wp-caption-text {
    font-size: 0.75rem;
    line-height: 1.25rem;
  }

  .tt-article__author {
    font-size: 0.75rem;
    line-height: 1.25rem;
  }

  /* Bảng nhiều cột: cho cuộn ngang thay vì tràn vỡ layout */
  .entry-content table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Ảnh float trên mobile hẹp: bỏ float, xếp dọc cho dễ đọc */
  .entry-content .alignleft,
  .entry-content .alignright {
    float: none;
    display: block;
    max-width: 100%;
    margin: 1.5rem auto;
  }

  /* Sticky bar + modal chỉ hiện ở mobile khi kích hoạt */
  .tt-toc-bar.is-visible {
    display: flex;
  }

  .tt-toc-modal.is-active {
    display: block;
  }
}