/* ===== Single Post Layout ===== */
.post-page.container{ 
  max-width:1200px; 
  margin:0 auto; 
  padding:24px 16px 60px; 
  color:var(--color-text); 
}
.post-layout{
  display:grid;
  grid-template-columns: minmax(0, 230px) 1fr;
  gap: 28px;
  margin-top: 30px;
  align-items: start;
}
/* Khi KHÔNG có TOC: căn giữa bài viết và thu chiều rộng đọc */
.post-layout.no-toc{
  grid-template-columns: 1fr;
}
.post-layout.no-toc .post-article{
  max-width: 760px;
  margin: 0 auto;
}

/* ===== TOC (robust) ===== */
.post-toc{ 
  position: sticky; 
  top: 200px; 

}
.toc-card{
  background:#fff; 
  border:1px solid var(--color-border);
  border-radius:4px; 
  overflow:hidden;
}
.toc-list{ 
  list-style:none; 
  margin:0; 
  padding:6px 0; 
}
.toc-item{ 
  position:relative; 
}
.post-toc .toc-link{
  display:block; 
  padding:12px 14px;
  text-decoration:none;
  color:var(--color-text);
  font-size: 0.875rem;
  font-weight:600;
  background:#fff;
  border-top:1px solid var(--color-border);
  transition: background .18s ease, color .18s ease;
  line-height:1.35;
}
.toc-item:first-child .toc-link{ 
  border-top:none; 
}
.toc-h3 .toc-link{ 
  padding-left:22px; 
  font-weight:500; 
}

/* Active */
.post-toc .toc-item.is-active > .toc-link{
  background: var(--color-bg-soft);
  color: var(--color-primary);
  font-weight:700;
}


/* ===== Article ===== */
.post-article{ 
  background:#fff; 
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}
.post-title{
  margin:0 0 20px; 
  font-size:clamp(24px, 3.4vw, 40px); font-weight:800;
}
.post-excerpt{ display: none; }
.post-meta{ 
  color: var(--color-muted); 
  display:flex; align-items:center; 
  gap:6px; 
  margin-bottom:18px; 
  font-size: 0.875rem;
}
.post-meta .dot{ opacity:.5; }

.post-content{
  line-height:1.7;
}
.post-content p{ margin:0 0 1.1em; }
.post-content img{ max-width:100%; height:auto; display:block; margin:0; }
.post-content .post-heading{
  margin:1.6em 0 .6em;
  font-weight:800;
}
.post-content a{ 
  color:var(--color-primary); 
  text-decoration:none; }
.post-content a:hover{ 
  color: var(--color-text); 
}

/* ===== WP Image/Gallery caption: bỏ overlay + style lại text ===== */

/* 1) Gỡ lớp mờ/gradient do pseudo-element */
.wp-block-image::before,
.wp-block-image:has(figcaption)::before,
.wp-block-gallery.has-nested-images figure.wp-block-image::before,
.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before{
  content: none !important;
  display: none !important;
}

/* 2) Chuyển caption ra dưới ảnh, bỏ position/overlay của theme */
.wp-block-image,
.wp-block-gallery.has-nested-images figure.wp-block-image{
  position: static !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible !important;
}

.wp-block-image img{
  display: block;
  width: 100%;
  height: auto;
}

/* 3) Ghi đè TEXT của caption: bỏ background, text-shadow, màu trắng… */
.wp-block-image figcaption.wp-element-caption,
.wp-block-gallery.has-nested-images figure.wp-block-image figcaption.wp-element-caption{
  position: static !important;
  bottom: auto !important;
  background: none !important;
  color: var(--color-muted) !important;   /* màu chữ xám nhạt theo theme */
  text-shadow: none !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-align: center !important;
  will-change: auto !important;
  scrollbar-width: auto !important;       /* xoá các thuộc tính lạ kéo theo từ core */
  scrollbar-color: auto !important;
}

/* (tuỳ chọn) Thu hẹp figure theo bề ngang ảnh và căn giữa toàn khối */
.wp-block-image{ max-width: 100%; margin: 1.2em auto; text-align: center; }


/* ===== Related ===== */
.post-related{ margin-top:54px; }
.rel-title{
  position:relative; margin:0 0 16px; font-size:clamp(20px,2.4vw,28px);
  font-weight:800;
}
.rel-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.rel-card{
  border:1px solid var(--color-border);
  border-radius:6px; overflow:hidden; background:#fff;
  display:flex; flex-direction:column;
}
.rel-thumb{ 
  display:block; 
  aspect-ratio: 16/10; 
  background:var(--color-bg-soft); 
  position: relative;
  overflow: hidden;

}
.rel-thumb img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block; 
  transition: transform .35s ease; /* smooth zoom */
}
.rel-card:hover .rel-thumb img {
  transform: scale(1.08); /* zoom nhẹ */
}
.rel-card:hover {
  border: 1px solid var(--color-primary);
}
.rel-thumb--ph{ width:100%; height:100%; background:var(--color-bg-soft); }

.rel-body{ padding:12px 14px 16px; }
.rel-h3{ margin:0 0 6px; font-size:16px; line-height:1.35; font-weight:700; }
.rel-h3 a{ text-decoration:none; color:var(--color-text)}
.rel-h3 a:hover{ color:var(--color-primary)}
.rel-desc{font-size:0.875rem; margin:0; color:var(--color-muted); }

/* ===== Responsive ===== */
@media (max-width: 1024px){
  :root{ --toc-w: 210px; }
}
@media (max-width: 900px){
  .post-layout{ grid-template-columns: 1fr; }
  .post-toc{ position:relative; top:auto; }
  .toc-card{ margin-bottom:18px; }
}
@media (max-width:900px){
  .rel-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 580px){
  .rel-grid{ grid-template-columns:1fr; }
}

/* ===== Force blog table styling (Gutenberg + theme) ===== */

/* 1) Wrapper luôn full cột + cho kéo ngang khi quá rộng */
.entry-content figure.wp-block-table,
.entry-content .wp-block-table,
.post-content figure.wp-block-table,
.post-content .wp-block-table,
.entry-content table:not(.no-style),
.post-content table:not(.no-style) {
  width: 100% !important;
  max-width: 100% !important;
  margin: 16px 0 !important;
  overflow-x: auto; /* scroll ngang trên mobile */
}

/* 2) Bản thân <table> chiếm 100% & bỏ fixed layout của Gutenberg */
.entry-content figure.wp-block-table > table,
.entry-content .wp-block-table > table,
.post-content figure.wp-block-table > table,
.post-content .wp-block-table > table,
.entry-content table:not(.no-style),
.post-content table:not(.no-style) {
  width: 100% !important;
  border-collapse: collapse !important;
  table-layout: auto !important; /* override fixed */
  /* Nếu table bị inline-style, cái !important giúp thắng */
}

/* 3) Trường hợp Gutenberg gán .has-fixed-layout ở wrapper */
.entry-content .wp-block-table.has-fixed-layout > table,
.post-content .wp-block-table.has-fixed-layout > table {
  table-layout: auto !important;
}

/* 4) Ô bảng: border, padding, xuống dòng */
.entry-content table th,
.entry-content table td,
.post-content table th,
.post-content table td {
  border: 1px solid var(--color-border) !important;
  padding: 10px 12px !important;
  vertical-align: top !important;
  line-height: 1.5 !important;
  word-break: break-word !important;
  hyphens: auto;
}

/* 5) Header có nền khác màu (ưu tiên thead) */
.entry-content table thead th,
.post-content table thead th {
  background: var(--color-bg-soft) !important;
  color: var(--color-text) !important;
  font-weight: 700 !important;
}

/*  Đảm bảo alignwide/alignfull không phá layout cột nội dung */
.single .entry-content .wp-block-table.alignwide,
.single .entry-content .wp-block-table.alignfull {
  max-width: 100% !important;
}
/* Kill line dưới header bảng Gutenberg */
figure.wp-block-table > table,
.entry-content figure.wp-block-table > table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

/* Xóa mọi border/shadow dưới thead */
figure.wp-block-table > table > thead,
figure.wp-block-table > table > thead > tr,
figure.wp-block-table > table > thead > tr > th {
  border-bottom: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Trường hợp theme vẽ line bằng pseudo */
figure.wp-block-table > table > thead::after,
figure.wp-block-table::before,
figure.wp-block-table::after {
  content: none !important;
  display: none !important;
}

/* Nếu line đến từ border-top của hàng đầu tiên trong tbody */
figure.wp-block-table > table > tbody > tr:first-child > th,
figure.wp-block-table > table > tbody > tr:first-child > td {
  border-top: 0 !important;
}

/* Chuẩn hóa border mảnh cho ô */
figure.wp-block-table > table th,
figure.wp-block-table > table td {
  border: 1px solid var(--color-border) !important;
}
/* ===== Fine border line under table header ===== */
figure.wp-block-table > table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

/* Header: xóa line cũ và thêm line mảnh mới */
figure.wp-block-table > table > thead > tr > th {
  border-bottom: 1px solid var(--color-border) !important; /* line mảnh, đồng màu border các ô */
}

/* Đảm bảo hàng đầu tiên của tbody không bị border-top làm dày thêm */
figure.wp-block-table > table > tbody > tr:first-child > th,
figure.wp-block-table > table > tbody > tr:first-child > td {
  border-top: none !important;
}

/* ===== Adjust Blog Table Column Widths ===== */
figure.wp-block-table > table {
  width: 100%;
  table-layout: fixed; /* để width theo tỷ lệ */
  border-collapse: collapse;
}

figure.wp-block-table > table th:nth-child(1),
figure.wp-block-table > table td:nth-child(1) {
  width: 25%;  /* Application */
}

figure.wp-block-table > table th:nth-child(2),
figure.wp-block-table > table td:nth-child(2) {
  width: 55%;  /* Description */
}

figure.wp-block-table > table th:nth-child(3),
figure.wp-block-table > table td:nth-child(3) {
  width: 20%;  /* Typical Material */
}

/* Giữ text gọn gàng và dễ đọc */
figure.wp-block-table > table th,
figure.wp-block-table > table td {
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
}