/* ====================================================
   1. NỀN GIẤY KẺ NGANG MATCHA (DÙNG CHUNG)
   ==================================================== */
html, body, .site, #page, .site-content, .site-main, .content-area, .entry-content, article {
  background-color: #f7f5ef !important;
  background-image: linear-gradient(#d3ded0 1px, transparent 1px) !important;
  background-size: 100% 28px !important;
  background-attachment: fixed !important;
  box-shadow: none !important;
  border: none !important;
}

/* ====================================================
   2. KHÓA HEADER NẰM YÊN
   ==================================================== */
.site-header,
header.site-header,
.site-header.is-stuck,
.sticky-wrapper,
.main-navigation-wrapper {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  z-index: 99 !important;
}

/* ====================================================
   3. GIAO DIỆN MÁY TÍNH (GIỮ NGUYÊN - CÓ DROPDOWN)
   ==================================================== */
@media (min-width: 1025px) {
  .menu-toggle {
    display: none !important;
  }

  .main-navigation {
    display: block !important;
    width: 100% !important;
  }

  .main-navigation ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 5px 0 !important;
    margin: 0 !important;
  }

  .main-navigation > div > ul > li,
  .main-navigation > ul > li {
    position: relative !important;
    padding-bottom: 8px !important;
  }

  .main-navigation > div > ul > li > a,
  .main-navigation > ul > li > a {
    display: inline-block !important;
    padding: 6px 14px !important;
    font-family: Georgia, serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #2e3b2b !important;
    text-decoration: none !important;
    background-color: #e8efe5 !important;
    border: 1px solid #c2d1be !important;
    border-radius: 4px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
    transform: none !important;
  }

  .main-navigation > div > ul > li:hover > a,
  .main-navigation > ul > li:hover > a {
    background-color: #d8e5d4 !important;
    border-color: #a3b89e !important;
    color: #1a2418 !important;
  }

  /* Dropdown chỉ hiện trên Máy tính khi rê chuột */
  .main-navigation ul ul {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    width: max-content !important;
    max-width: 280px !important;
    background: #ffffff !important;
    border: 1px solid #c8d4c4 !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    z-index: 99999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease, visibility 0.15s ease !important;
  }

  .main-navigation li:hover > ul,
  .main-navigation li.focus > ul {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .main-navigation ul ul li {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px dashed #d8e2d4 !important;
    border-radius: 0 !important;
    width: 100% !important;
  }

  .main-navigation ul ul li:last-child {
    border-bottom: none !important;
  }

  .main-navigation ul ul a {
    color: #2e3b2b !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    padding: 8px 12px !important;
    display: block !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background 0.15s ease !important;
  }

  .main-navigation ul ul a:hover {
    background: #f0f5ee !important;
    color: #1e291c !important;
  }
}

/* ====================================================
   4. GIAO DIỆN TABLET & ĐIỆN THOẠI (BỎ DROPDOWN HOÀN TOÀN)
   ==================================================== */
@media (max-width: 1024px) {
  /* Căn giữa Logo & Tên web */
  .site-header-main,
  .header-wrapper,
  .site-branding,
  .main-navigation {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 auto !important;
    float: none !important;
    width: 100% !important;
  }

  /* Nút Menu dạng ☰ */
  .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #e8efe5 !important;
    border: 1px solid #c2d1be !important;
    border-radius: 4px !important;
    color: #2e3b2b !important;
    padding: 4px 12px !important;
    margin: 8px auto !important;
    cursor: pointer !important;
    float: none !important;
    font-size: 0 !important;
  }

  .menu-toggle::before {
    content: "☰" !important;
    font-size: 18px !important;
    color: #2e3b2b !important;
  }

  /* Mặc định ẩn 4 mục menu */
  .main-navigation .nav-menu,
  .main-navigation ul.menu {
    display: none !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 320px !important;
    padding: 8px 0 !important;
    margin: 0 auto !important;
  }

  /* Bấm ☰ hiện 4 mục (mỗi hàng 2 mục) */
  .main-navigation.toggled .nav-menu,
  .main-navigation.toggled-on .nav-menu,
  .main-navigation.toggled ul.menu,
  .main-navigation.toggled-on ul.menu {
    display: flex !important;
  }

  .main-navigation > div > ul > li,
  .main-navigation > ul > li {
    width: calc(50% - 6px) !important;
    box-sizing: border-box !important;
    padding-bottom: 0 !important;
  }

  .main-navigation > div > ul > li > a,
  .main-navigation > ul > li > a {
    display: block !important;
    text-align: center !important;
    padding: 8px 6px !important;
    font-family: Georgia, serif !important;
    font-size: 13px !important;
    color: #2e3b2b !important;
    text-decoration: none !important;
    background-color: #e8efe5 !important;
    border: 1px solid #c2d1be !important;
    border-radius: 4px !important;
  }

  /* XÓA/ẨN HOÀN TOÀN DROPDOWN MENU CON TRÊN TABLET & ĐIỆN THOẠI */
  .main-navigation ul ul {
    display: none !important;
  }
}

/* ====================================================
   5. BỔ SUNG RIÊNG MÁY TÍNH BẢNG (TABLET 601px - 1024px)
   Hiển thị 4 mục 1 hàng giống Máy tính, không nút ☰, không dropdown
   ==================================================== */
@media (min-width: 601px) and (max-width: 1024px) {
  /* Ẩn nút ☰ */
  .menu-toggle {
    display: none !important;
  }

  /* Hiện 4 mục nằm ngang 1 hàng */
  .main-navigation .nav-menu,
  .main-navigation ul.menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    max-width: none !important;
    width: auto !important;
  }

  .main-navigation > div > ul > li,
  .main-navigation > ul > li {
    width: auto !important;
  }

  .main-navigation > div > ul > li > a,
  .main-navigation > ul > li > a {
    display: inline-block !important;
    padding: 6px 14px !important;
  }

  /* Ẩn mũi tên/dấu dropdown thừa */
  .dropdown-toggle,
  .main-navigation .dropdown-toggle {
    display: none !important;
  }
}

/* ẨN NAVIGATION MẶC ĐỊNH CỦA THEME */
nav.navigation.post-navigation {
    display: none !important;
}

/* ẨN KHUNG COMMENT THỨ HAI CỦA THEME */
#comments.comments-area {
    display: none !important;
}

/* ẨN NÚT EDIT */
.edit-link {
    display: none !important;
}

/* ẨN PHẦN RELATED */
.jp-relatedposts,
.related-posts,
.related-posts-area {
    display: none !important;
}
/* =========================================================
   TÁCH LIKE KHỎI CHƯƠNG TRƯỚC / CHƯƠNG SAU
========================================================= */

.single .sharedaddy.sd-like {
    margin-top: 35px !important;
    padding-top: 5px !important;
}

/* Thu gọn vùng Like để chỉ giữ phần nút */
.single .sharedaddy.sd-like .sd-content {
    margin-top: 0 !important;
}

/* Ẩn dòng tiêu đề Like nếu có */
.single .sharedaddy.sd-like .sd-title {
    display: none !important;
}

/* Ẩn phần text/count của widget */
.single .sharedaddy.sd-like .sd-text-color,
.single .sharedaddy.sd-like .sd-link-color {
    display: none !important;
}
/* ẨN DÒNG "2,503 TÌNH YÊU GHÉ THĂM" */
.wp-block-jetpack-blog-stats {
    display: none !important;
}

/* TẠO KHOẢNG CÁCH GIỮA CHƯƠNG TRƯỚC / CHƯƠNG SAU VÀ LIKE */
.wp-block-jetpack-like {
    margin-top: 35px !important;
}
/* =========================================================
   NÚT CHƯƠNG TRƯỚC / CHƯƠNG SAU
========================================================= */

/* ẨN HOÀN TOÀN CHỮ GỐC CỦA THEME */
.post-navigation-link-previous a,
.post-navigation-link-next a {
    display: inline-block !important;
    font-size: 0 !important;
    color: transparent !important;
    text-decoration: none !important;

    padding: 5px 10px !important;
    border: 1px solid #b8b0a5 !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.35) !important;

    line-height: 1.4 !important;
    transition: all 0.25s ease !important;
}

/* CHỮ MỚI */
.post-navigation-link-previous a::after {
    content: "Chương trước";
    display: inline-block !important;
    font-size: 15px !important;
    color: #404040 !important;
}

.post-navigation-link-next a::before {
    content: "Chương sau";
    display: inline-block !important;
    font-size: 15px !important;
    color: #404040 !important;
}

/* HOVER */
.post-navigation-link-previous a:hover,
.post-navigation-link-next a:hover {
    background: #404040 !important;
    border-color: #404040 !important;
}

.post-navigation-link-previous a:hover::after,
.post-navigation-link-next a:hover::before {
    color: #ffffff !important;
}

/* KHOẢNG CÁCH VỚI LIKE */
.wp-block-jetpack-like {
    margin-top: 35px !important;
}
/* TẠO KHOẢNG CÁCH GIỮA NỘI DUNG VÀ HAI NÚT CHƯƠNG */
.wp-block-post-navigation-link {
    margin-top: 50px !important;
}
.post-navigation-link-previous a,
.post-navigation-link-next a {
    background: #E8EFE5 !important;
    border-color: #BFD2B9 !important;
    color: #2F3B2D !important;
}

.post-navigation-link-previous a::after,
.post-navigation-link-next a::before {
    color: #2F3B2D !important;
}

.post-navigation-link-previous a:hover,
.post-navigation-link-next a:hover {
    background: #E8EFE5 !important;
    border-color: #BFD2B9 !important;
    color: #2F3B2D !important;
}

.post-navigation-link-previous a:hover::after,
.post-navigation-link-next a:hover::before {
    color: #2F3B2D !important;
}