/* CHỈ ẩn ở frontend, KHÔNG áp dụng trong Gutenberg editor */
body:not(.wp-admin) .hide-if-empty {
    display: none !important;
}
/* ===== FIX RELATED POSTS FULL WIDTH 3 COLUMNS ===== */

/* Chia đúng 3 cột toàn chiều rộng */
.jp-relatedposts-items {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    max-width: 100% !important;
}

/* Bỏ giới hạn chiều rộng nội bộ */
.jp-relatedposts-post {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* Ảnh full cột */
.jp-relatedposts-post img {
    width: 100% !important;
    max-width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
    display: block;
}

/* Title căn giữa */
.jp-relatedposts-post-title {
    text-align: center !important;
    font-size: 20px !important;
    margin-top: 9px !important;
    line-height: 1.5 !important;
}

/* Giới hạn 2 dòng */
.jp-relatedposts-post-title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* ===== Có thể bạn quan tâm – 3 cột full width ===== */

/* Cho container chiếm full chiều ngang */
.additional-post {
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid 3 cột */
.additional-post .section-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Mỗi bài chiếm trọn cột */
.additional-post .post {
    width: 100% !important;
    margin: 0 !important;
}

/* Thumbnail full chiều ngang */
.additional-post .post-thumbnail img {
    width: 100% !important;
    height: 220px;
    object-fit: cover;
    display: block;
}

/* Title căn giữa */
.additional-post .entry-title {
    text-align: center;
    font-size: 16px;
    margin-top: 10px;
}
/* Chỉ hiển thị 3 bài */
.additional-post .post:nth-child(n+4) {
    display: none !important;
}
/* Title normal weight */
.additional-post .entry-title {
    font-weight: 400 !important;
}
/* ===== Header Có thể bạn quan tâm ===== */

.additional-post > h2,
.additional-post > h3,
.additional-post .section-header,
.additional-post .section-title {
    font-size: 28px !important;
    font-weight: 500 !important;
    text-align: center !important;
    margin-bottom: 25px !important;
    line-height: 1.3 !important;
}
/* Ẩn nút Read trong Có thể bạn quan tâm */
.additional-post .button-wrap,
.additional-post .read-more,
.additional-post .more-link {
    display: none !important;
}
/* Caption căn giữa */
.wp-caption-text,
figcaption,
.blocks-gallery-caption {
    text-align: center !important;
    margin-top: 8px;
    font-size: 14px;
    opacity: 0.8;
}
/* Wrapper giữ bo góc */
.post-thumbnail,
.featured-image {
    border-radius: 20px;
    overflow: hidden;
}

/* Ảnh luôn full khung */
.post-thumbnail img,
.featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);          /* reset scale */
    transition: transform 0.4s ease;
    display: block;
}

/* Hover zoom nhẹ */
.post:hover .post-thumbnail img,
.post:hover .featured-image img {
    transform: scale(1.05);
}
/* Bo góc cho mọi ảnh thumbnail trên site */
img {
    border-radius: 16px !important;
    object-fit: cover !important;
}

/* Nếu thumbnail nằm trong link */
a img {
    border-radius: 16px !important;
}

/* Nếu ảnh nằm trong div chứa thumbnail */
[class*="thumbnail"] img,
[class*="image"] img,
[class*="thumb"] img,
[class*="featured"] img {
    border-radius: 16px !important;
    object-fit: cover !important;
}
/* ===== TABLE STYLE: NOTION / APPLE ===== */

.entry-content .wp-block-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 15px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}

/* Header */
.entry-content .wp-block-table th {
    background: #f9fafb;
    color: #111827;
    font-weight: 600;
    text-align: left;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
}

/* Cell */
.entry-content .wp-block-table td {
    padding: 14px 16px;
    border-bottom: 1px solid #f1f1f1;
    color: #374151;
}

/* Remove border dòng cuối */
.entry-content .wp-block-table tr:last-child td {
    border-bottom: none;
}

/* Hover nhẹ kiểu Apple */
.entry-content .wp-block-table tr:hover td {
    background: #f9fafb;
}

/* Zebra rất nhẹ (gần như Notion) */
.entry-content .wp-block-table tr:nth-child(even) td {
    background: #fcfcfd;
}

/* Bo góc chuẩn */
.entry-content .wp-block-table table tr:first-child th:first-child {
    border-top-left-radius: 12px;
}
.entry-content .wp-block-table table tr:first-child th:last-child {
    border-top-right-radius: 12px;
}
.entry-content .wp-block-table table tr:last-child td:first-child {
    border-bottom-left-radius: 12px;
}
.entry-content .wp-block-table table tr:last-child td:last-child {
    border-bottom-right-radius: 12px;
}
.highlight-box {
    background: #f3f4f6;
    padding: 24px 28px;
    border-radius: 12px;
    margin: 24px 0;
    border: 1px solid #e5e7eb;
}

/* Title */
.highlight-box h2,
.highlight-box h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 24px;
    color: #111827;
}

/* Text */
.highlight-box p {
    margin: 0;
    color: #374151;
    line-height: 1.7;
}
/* Ẩn scrollbar mobile */
.anchor-tabs::-webkit-scrollbar {
  display: none;
}

.anchor-tabs a {
  white-space: nowrap;
  text-decoration: none;
  color: #ba8697;
  font-size: 20px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 20px;
  transition: all 0.2s ease;
}

.anchor-tabs a:hover {
  background: #ba8697;
}

.anchor-tabs a.active {
  background: #ba8697;
  color: #fff;
}
h2 {
  scroll-margin-top: 120px;
}
.anchor-tabs a {
  color: #ba8697;
}

.anchor-tabs a:hover {
  background: #f7eef2;
}

.anchor-tabs a.active {
  background: #ba8697;
  color: #fff;
}
.anchor-tabs {
  position: sticky;
  top: 80px;
  z-index: 999;

  display: flex;
  flex-wrap: wrap; /* 🔥 cho xuống dòng */
  gap: 8px;

  background: #fff;

  padding-bottom: 2em;
  margin-bottom: 2em;

  border-bottom: 1px solid #eee;
}

/* bỏ scroll ngang */
.anchor-tabs {
  overflow-x: visible;
}

/* tab item */
.anchor-tabs a {
  white-space: normal; /* 🔥 cho text xuống dòng trong tab */
  line-height: 1.4;
  text-decoration: none;
  color: #ba8697;

  padding: 6px 12px;
  border-radius: 20px;

  max-width: 220px; /* 🔥 tránh tab quá dài */
}
.highlight-box {
  background: #e9e0d6; /* màu giống hình */
  border-radius: 16px;
  padding: 24px 28px;

  line-height: 1.6;
}

/* title */
.highlight-box h3 {
  margin: 0;
  margin-bottom: 2em; /* 🔥 cách paragraph = 2 dòng */

  font-size: 24px;
  font-weight: 700;
}

/* list */
.highlight-box ul {
  margin: 0;
  padding-left: 20px;
}

/* bullet style */
.highlight-box li {
  margin-bottom: 12px;
}

/* màu chấm */
.highlight-box li::marker {
  color: #d45c8c; /* hồng giống healthline */
}
/* =========================
   1. BASE TYPOGRAPHY
========================= */

.entry-content {
  font-size: 17px;
  line-height: 1.6;
  color: #2b2b2b;
}

/* Paragraph */
.entry-content p {
  margin-bottom: 1.6em;
}

/* =========================
   2. HEADINGS (Editorial spacing)
========================= */

.entry-content h2 {
  font-size: 28px;
  line-height: 1.3;
  margin-top: 2.4em;
  margin-bottom: 1.2em;
}

.entry-content h3 {
  font-size: 22px;
  line-height: 1.4;
  margin-top: 2em;
  margin-bottom: 1em;
}

/* =========================
   3. LIST (giống health blog)
========================= */

.entry-content ul {
  padding-left: 20px;
  margin-bottom: 1.6em;
}

.entry-content li {
  margin-bottom: 0.8em;
  line-height: 1.6;
}

/* =========================
   4. HIGHLIGHT BOX
========================= */

.highlight-box {
  background: #e9e0d6;
  border-radius: 16px;
  padding: 24px 28px;
  margin: 2.4em 0;
  line-height: 1.6;
}

.highlight-box h3 {
  margin-bottom: 2em;
  font-size: 24px;
}

.highlight-box li::marker {
  color: #d45c8c;
}

/* =========================
   5. ANCHOR TABS
========================= */

.anchor-tabs a {
  color: #ba8697;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.4;

  padding: 6px 12px;
  border-radius: 20px;
}

.anchor-tabs a.active {
  background: #ba8697;
  color: #fff;
}

/* =========================
   6. IMAGE SPACING
========================= */

.entry-content img {
  margin: 2em 0;
  border-radius: 12px;
}

/* =========================
   7. SCROLL OFFSET FIX
========================= */

.entry-content h2 {
  scroll-margin-top: 120px;
}

/* =========================
   8. MOBILE OPTIMIZATION
========================= */

@media (max-width: 768px) {
  .entry-content {
    font-size: 16px;
  }

  .entry-content h2 {
    font-size: 24px;
  }

  .anchor-tabs {
    top: 70px;
  }
}
.highlight-box {
  background: #f3ece6; /* 🔥 nhạt hơn, gần giống healthline */
  border-radius: 16px;
  padding: 17px 10% 24px 10%;
  margin: 2.4em 0;
  line-height: 1.6;
}

/* title */
.highlight-box h3 {
  margin: 0;
  margin-bottom: 2em;
  font-size: 24px;
}

/* list */
.highlight-box ul {
  margin: 0;
  padding-left: 20px;
}

/* bullet */
.highlight-box li {
  margin-bottom: 0.8em;
}

.highlight-box li::marker {
  color: #d45c8c;
}
    padding: 17px clamp(16px, 10%, 80px) !important;
.anchor-tabs {
  position: static; /* ❌ bỏ sticky */
  
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  margin-bottom: 2em;
}

/* tab link */
.anchor-tabs a {
  position: relative;
  text-decoration: none;
  color: #ba8697;

  font-size: 20px; /* 🔥 yêu cầu của bạn */
  line-height: 1.4;

  padding: 4px 0;
}
/* hover */
.anchor-tabs a:hover {
  text-decoration: underline;
}

/* active */
.anchor-tabs a.active {
  font-weight: 600;
}
.anchor-tabs {
  position: static !important; /* 🔥 ép bỏ sticky */
  top: auto;
}
.anchor-tabs a {
  background: none !important;
  transition: none;
}

/* hover chỉ gạch dưới */
.anchor-tabs a:hover {
  text-decoration: underline;
  background: none !important;
}

/* active cũng không nền */
.anchor-tabs a.active {
  background: none !important;
}
.anchor-tabs a {
  position: relative;
  text-decoration: none;
  color: #ba8697;
  font-size: 20px;
  line-height: 1.4;

  padding: 0 12px;
}
/* bỏ dấu | cũ */
.anchor-tabs a::after {
  content: none !important;
}
.anchor-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  margin-bottom: 2em;
}

/* từng tab */
.anchor-tabs a {
  display: inline-block; /* 🔥 fix mất tab */
  text-decoration: none;
  color: #ba8697;

  font-size: 20px;
  line-height: 1.4;

  padding: 4px 12px;
}
/* tránh tab đầu bị dính mép */
.anchor-tabs a:first-child {
  padding-left: 0;
}

/* hover */
.anchor-tabs a:hover {
  text-decoration: underline;
}

/* RESET toàn bộ anchor tabs về trạng thái sạch */
.anchor-tabs a {
  display: inline !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: static !important;
  transform: none !important;
}

/* FIX riêng tab đầu */
.anchor-tabs a:first-child {
  display: inline !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* NGĂN mọi rule kiểu :first-child từ theme */
.anchor-tabs > a:first-child {
  all: unset;
  display: inline;
  color: #ba8697;
  font-size: 20px;
  cursor: pointer;
}

/* restore lại style sau khi unset */
.anchor-tabs > a:first-child:hover {
  text-decoration: underline;
}
/* RESET toàn bộ style cũ (pill) */
.anchor-tabs a {
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  padding: 0 12px;
  margin: 0;

  font-size: 20px;
  color: #ba8697;
  text-decoration: none;
}
/* tab đầu không padding trái */
.anchor-tabs a:first-child {
  padding-left: 0;
}

/* hover */
.anchor-tabs a:hover {
  text-decoration: underline;
}

/* active */
.anchor-tabs a.active {
  font-weight: 600;
}
.anchor-tabs a {
  padding: 0 14px; /* 🔥 padding đều 2 bên */
}

/* tab đầu: bỏ padding trái nhưng GIỮ padding phải */
.anchor-tabs a:first-child {
  padding-left: 0;
  padding-right: 14px; /* 🔥 quan trọng */
}
.anchor-tabs a:first-child {
  font-weight: 500 !important; /* 🔥 reset về bình thường */
}
.anchor-tabs a {
  padding: 0 16px; /* 🔥 padding đều 2 bên */
  position: relative;
}

/* tab đầu bỏ padding trái nhưng giữ cân phải */
.anchor-tabs a:first-child {
  padding-left: 0;
}
.anchor-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px; /* 🔥 khoảng cách đều giữa mọi tab */
}

/* reset tab */
.anchor-tabs a {
  font-size: 20px;
  color: #ba8697;
  text-decoration: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
}
/* ❌ xoá toàn bộ separator cũ */
.anchor-tabs a::after {
  content: none !important;
}

.anchor-tabs a {
  border-right: none !important;
}
.anchor-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.anchor-tabs a {
  font-size: 20px;
  color: #ba8697;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
/* Container chính */
.hl-box {
    margin: 24px 0;
}
.anchor-tabs a + a::before {
  content: "";
  width: 2px;
  height: 20px; /* 🔥 14 + 4 = 18px */

  background: #e5dfda;

  margin-right: 16px;

  position: relative;
  top: 3px; /* 🔥 đẩy xuống nhẹ cho cân mắt */
}
/* reset sạch */
.entry-content .anchor-tabs a {
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* layout */
.entry-content .anchor-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* tab */
.entry-content .anchor-tabs a {
  font-size: 20px;
  color: #ba8697;
  text-decoration: none;

  margin: 0 12px; /* 🔥 spacing đối xứng */
}

/* tab đầu */
.entry-content .anchor-tabs a:first-child {
  margin-left: 0;
}

/* 🔥 separator */
.entry-content .anchor-tabs a + a {
  border-left: 1px solid #e5dfda;
  padding-left: 12px; /* giữ khoảng cách bên phải */
}
/* ❌ XÓA hoặc COMMENT đoạn này nếu đang có */
/*
.entry-content .anchor-tabs,
.entry-content .anchor-tabs * {
  all: unset;
}
*/

/* ✅ chỉ style anchor-tabs */
.anchor-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* tab */
.anchor-tabs a {
  font-size: 20px;
  color: #e91e63;
  text-decoration: none;
}
.entry-content {
  line-height: 1.6;
}

.entry-content p {
  margin-bottom: 1.2em;
}

.entry-content h2 {
  margin-top: 2em;
  margin-bottom: 0.8em;
  line-height: 1.3;
}
/* ===== FORCE ANCHOR TABS ===== */
.entry-content .anchor-tabs {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}

.entry-content .anchor-tabs a {
  font-size: 20px !important;
  color: #e91e63 !important;
  text-decoration: none !important;
  padding: 0 12px !important;
  border: none !important;
}

/* tab đầu */
.entry-content .anchor-tabs a:first-child {
  padding-left: 0 !important;
}

/* 🔥 FORCE separator */
.entry-content .anchor-tabs a + a {
  border-left: 2px solid #e5dfda !important;
}
/* ===== RESET TYPOGRAPHY ===== */
.entry-content {
  line-height: 1.7 !important;
}

.entry-content p {
  margin-bottom: 1em !important;
}

.entry-content h2 {
  margin-top: 1.8em !important;
  margin-bottom: 1em !important;
}

.entry-content h3 {
  margin-top: 1.3em !important;
  margin-bottom: 1em !important;
}
/* 🔥 FIX khoảng cách trước H2 */

/* giảm khoảng cách list */
.entry-content ul {
  margin-bottom: 1em !important;
}

/* giảm paragraph */
.entry-content p {
  margin-bottom: 1em !important;
}

/* 🔥 quan trọng: reset margin-top của H2 */
.entry-content h2 {
  margin-top: 1.6em !important;
  margin-bottom: 1em !important;
}
.summary-box {
    background: #f3f3f3;
    padding: 20px 24px;
    border-left: 4px solid #ff4d2d;
    border-radius: 6px;
    margin: 24px 0;
}

.summary-title {
    color: #ff4d2d;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.summary-box p {
    margin: 0;
    color: #333;
    line-height: 1.6;
}
.summary-title {
    text-transform: uppercase;
    font-size: 18px;
}
.summary-box {
    padding-left: 20px;
}
.summary-box {
    background: #f3f3f3;
    padding: 30px 20px 15px 20px;
    padding-left: 5%; /* 👈 theo yêu cầu */
    border-left: 4px solid #e91e63;
    border-radius: 6px;
    margin: 28px 10;
}

.summary-title {
    color: #e91e63;
    font-weight: 600;
    font-size: 18px;
    letter-spacing: 0.5px;
    margin: 18 10 20px 10;
}

.summary-box p {
    margin: 0px;
    color: #333;
    line-height: 1.4;
}
/* ===== BOX ===== */
.entry-content .hl-box {
    background: #f5f1eb;
    padding: 8px 8%;
    border-radius: 16px;
    box-sizing: border-box;
}

/* ===== HEADER ===== */
.entry-content .hl-box h2,
.entry-content .hl-box h3,
.entry-content .hl-box h4 {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 1.2em 0;
    line-height: 1.6;
}

/* ===== TEXT ===== */
.entry-content .hl-box p,
.entry-content .hl-box li {
    font-size: 16px;
    line-height: 1.5;
}
/* ===== LIST ===== */
.entry-content .hl-box ul {
    padding-left: 20px;
    margin: 5px;
}

/* ===== BULLET ===== */
.entry-content .hl-box li::marker {
    color: #e91e63;
}

/* ===== SPACING giữa các dòng ===== */
.entry-content .hl-box li {
    margin-bottom: 16px;
}
/* ===== chỉnh pink box final ===== */
.entry-content .hl-box {
    padding: 1px 8% 28px 8%; /* giảm top từ 28px → 18px (~2/3) */
}
/* Xóa margin-top của heading */
.entry-content .hl-box h2,
.entry-content .hl-box h3,
.entry-content .hl-box h4 {
    margin-top: 0;
}
/* Fix đúng cho Blossom Travel */
.wp-block-group.hl-box.has-background {
    padding-top: 18px !important;
    padding-right: 8% !important;
    padding-bottom: 28px !important;
    padding-left: 8% !important;
}

/* Xóa khoảng cách thừa của heading */
.wp-block-group.hl-box h2,
.wp-block-group.hl-box h3 {
    margin-top: 0 !important;
}
.wp-block-group.hl-box h2,
.wp-block-group.hl-box h3 {
    margin-top: 20px !important; /* tăng khoảng cách lên */
}
.entry-content ul {
    padding-left: 36px;
}
/* ===== BULLET COLOR ===== */
.entry-content ul li::marker {
    color: #e91e63;
}

/* ===== GIỮ BULLET Ở NGOÀI ===== */
.entry-content ul {
    list-style-position: outside;
    padding-left: 30px; /* khoảng cách mép trái */
}

/* ===== TĂNG KHOẢNG CÁCH BULLET → TEXT ===== */
.entry-content ul li {
    padding-left: 8px; /* tăng thêm khoảng cách giữa bullet và text */
}
.recipe-ingredients,
.ingredients,
#ingredients {
  display: block !important;
  margin-left: 8% !important;
  margin-right: 8% !important;
  padding-bottom: 1.5em !important;
}
/* ===== NOTE LIST FIX ===== */
.dr-note ul {
    list-style: disc !important;
    list-style-position: outside !important;
    padding-left: 24px !important;
}

/* reset lại li */
.dr-note ul li {
    margin-left: 0 !important;
    padding-left: 6px !important; /* khoảng cách bullet → text */
    position: static !important;
}

/* XÓA bullet giả */
.dr-note ul li::before {
    content: none !important;
}
/* tăng khoảng cách text → image */
.dr-instruction {
    margin-bottom: 32px !important; /* tăng lên */
}
.dr-instructions {
    padding-top: 38px !important;
}
.dr-summary-holder .dr-note {
    padding: 18px 40px 40px 40px !important;
}
/* bỏ margin global ảnh */
.wpdr-feat-thumb img {
    margin: 0 !important;
}

/* tinh chỉnh thêm nếu cần */
.dr-archive-details {
    margin-top: 1px;
}
.dr-image.large {
    aspect-ratio: 1 / 1;
    overflow: hidden; /* QUAN TRỌNG */
    border-radius: 16px;
}

.dr-image.large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.single .entry-content > h2.wp-block-heading {
    margin-top: 0.8em !important;
    margin-bottom: 0.5em !important;
}
.single .entry-content > h3.wp-block-heading {
    margin-top: 0.8em !important;
    margin-bottom: 0.5em !important;
}
.single .entry-content > h4.wp-block-heading {
    margin-top: 0.8em !important;
    margin-bottom: 0.5em !important;
}
.single .entry-content > h5.wp-block-heading {
    margin-top: 0.8em !important;
    margin-bottom: 0.5em !important;
}