/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* Bật sticky sidebar khi cuộn lên top */
/* Chỉ bật sticky sidebar trên màn hình rộng (khi sidebar nằm cạnh content) */
@media (min-width: 768px) {
  /* Tạo biến mặc định: khoảng cách từ đỉnh trình duyệt đến nơi sidebar “dính” */
  :root { --gp-sticky-top: 50px; } /* chỉnh số này nếu header bạn cao/thấp hơn */

  /* GP thường dùng #right-sidebar / #left-sidebar cho cột sidebar */
  #right-sidebar,
  #left-sidebar {
    position: sticky;
    top: var(--gp-sticky-top);
    align-self: start; /* đảm bảo sticky hoạt động trong layout dạng flex/grid */
  }

  /* Phòng khi wrapper của sidebar vô tình cắt sticky */
  .sidebar,
  .widget-area {
    overflow: visible;
  }
}

/* Khi đang đăng nhập WP Admin có thanh admin bar 32px (hoặc 46px trên mobile) */
@media (min-width: 768px) {
  body.admin-bar #right-sidebar,
  body.admin-bar #left-sidebar {
    top: calc(var(--gp-sticky-top) + 32px);
  }
}
/* END Bật sticky sidebar khi cuộn lên top */


.breadcrumb-bar {
  background-color: #6bbdce;
  padding: 15px 20px;
}

.breadcrumb-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.breadcrumb-left, .breadcrumb-left a {
  color: #333;
  font-size: 14px;
  word-break: break-word;
}

.breadcrumb-left strong {
  font-weight: 600;
  margin-right: 4px;
}

.breadcrumb-right .breadcrumb-back {
  background-color: #c9302c;
  color: #fff;
  padding: 8px 15px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 2px 3px rgba(0,0,0,0.2);
  min-width: 71px;
  font-weight: 400;
}

.breadcrumb-right .breadcrumb-back:hover {
  background-color: #E60000;
}


/* Khối footer chứa DMCA + copyright (căn TRÁI) */
.site-footer .inside-site-info {
    justify-content: left;
    padding: 10px 20px;
}
.copyright-bar,
.vnjp-footer {
    display: flex;
    justify-content: flex-start; /* căn TRÁI */
    align-items: center;         /* thẳng hàng dọc */
    gap: 12px;                   /* khoảng cách giữa icon và chữ */
    padding: 10px 0;
}

/* Icon DMCA */
.dmca-badge img {
    height: 32px;
    width: auto;
    display: block;
}

/* Chữ copyright */
.copyright-bar span,
.vnjp-footer span {
    font-size: 14px;
    color: #ffffff;
}


/* =========================================================
   FIX: Hở khoảng trắng khi giao thoa menu chính <-> sticky
   + Giữ cơ chế sticky ổn định
   + Tắt toàn bộ transition/animation (transition: none)
   ========================================================= */
/* 1) GIỮ placeholder để tránh layout nhảy
      Nhưng ép nó có chiều cao đúng (bạn chỉnh 50px theo header thực tế) */
#sticky-placeholder{
  display:block !important;
  height:50px !important;          /* <-- đổi 60px theo chiều cao menu thật */
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
}
/* 2) Tắt hiệu ứng để sticky không “trượt / fade” */
#sticky-navigation,
#sticky-navigation *{
  transition:none !important;
  animation:none !important;
}
/* 3) Không phá transform (bỏ transform:none)
      Chỉ giảm tối ưu kiểu will-change nếu cần */
#sticky-navigation{
  will-change:auto !important;
}


/* =========================================================
    Phần footer tự viết
    Hook ở Elements
   ========================================================= */
.vnjp-footer-block{
  background:#1c1c1c;
  color:#fff;
  padding:40px 0;
}

.vnjp-footer-grid{
  width:min(1200px,92%);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.2fr 1fr 1.2fr;
  gap:40px;
}

.vnjp-footer-h{
  margin:0 0 10px;
  font-size:22px;
}

.vnjp-footer-line{
  height:1px;
  background:rgba(255,255,255,.2);
  margin-bottom:18px;
}

.vnjp-footer-p{margin:0 0 14px; line-height:1.8; opacity:.9;}

.vnjp-footer-ul{list-style:none; padding:0; margin:0;}
.vnjp-footer-ul li{margin:10px 0;}
.vnjp-footer-ul a,
.vnjp-footer-social a{color:#fff; text-decoration:none; opacity:.9;}
.vnjp-footer-ul a:hover,
.vnjp-footer-social a:hover{opacity:1; text-decoration:underline;}

.vnjp-footer-social{display:flex; gap:14px; flex-wrap:wrap;}

@media (max-width: 900px){
  .vnjp-footer-grid{grid-template-columns:1fr; gap:24px;}
}



.vnjp-ad-slot{
  width:100%;
  display:block;
  box-sizing:border-box;
  overflow:hidden;
}
.vnjp-ad-slot::before{
  content:"";
  display:block;
  width:100%;
  height:100%;
  background-size: 200% 100%;
  animation: vnjp-ad-shimmer 1.4s infinite linear;
}
.vnjp-ad-slot.is-loaded::before{ display:none; }

@keyframes vnjp-ad-shimmer{
  0%{ background-position: 0% 0; }
  100%{ background-position: -200% 0; }
}

/* ===== 3 vị trí ===== */
/* 1) Trước content (in-article top) */
/*.vnjp-ad-before-content{ min-height: 180px; }*/

/* 2) Sau content (in-article bottom) */
/*.vnjp-ad-after-content{ min-height: 180px; }*/

/* 3) Bottom sidebar (desktop) */
/*.vnjp-ad-sidebar-bottom{ min-height: 150px; }*/

/* Responsive */
@media (min-width: 768px){
  .vnjp-ad-before-content,
  .vnjp-ad-after-content,
  .vnjp-ad-sidebar-bottom { min-height: 250px; }
}

/* Nếu sidebar bị hẹp trên mobile, cho sidebar-slot ẩn (tùy bạn) */
/*@media (max-width: 767px){
  .vnjp-ad-sidebar-bottom{ display:none; }
}*/

/* CLS: ESSB dưới bài (icon load / flex wrap) */
.essb_displayed_bottom.essb_links.essb_content_responsive,
ul.essb_links_list.essb_force_hide_name {
  min-height: 44px;
}

/* CLS: khối widget đầu sidebar (search / block) trên desktop */
@media (min-width: 768px) {
  .inside-right-sidebar > aside.widget_block:first-of-type,
  .inside-left-sidebar > aside.widget_block:first-of-type {
    min-height: 48px;
  }
  .inside-right-sidebar > aside.widget_block.widget_search,
  .inside-left-sidebar > aside.widget_block.widget_search {
    min-height: 52px;
  }
}

/* =====================================================
   VNJPCLUB - JLPT TANGO MINI MEGA MENU (#59460)
===================================================== */
@media (min-width: 769px) {

  #menu-item-59460 { position: relative; }

  /* Cầu hover trong suốt — giữ menu khi rê chuột ngang khoảng trống */
  #menu-item-59460::after {
    content: "";
    position: absolute;
    top: 0;
    right: 100%;
    width: 24px;
    height: 340px; /* đủ cao để cover toàn panel */
  }

  /* Panel — mở sang trái, chồng nhẹ vào menu cha */
  #menu-item-59460 > ul.sub-menu,
  .main-navigation:not(.toggled) ul ul li#menu-item-59460:hover > ul,
  .main-navigation:not(.toggled) ul ul li#menu-item-59460.sfHover > ul {
    width: 440px !important;
    padding: 12px !important;
    left: auto !important;
    right: calc(100% - 2px) !important;
    top: 0 !important;
    margin: 0 !important;
    background: #fff;
    border: 1px solid #e6e9ed;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05);
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    overflow: visible;
    z-index: 9999;
  }

  /* Header */
  #menu-item-59460 > ul.sub-menu::before {
    content: "JLPT TANGO\A Học từ vựng theo cấp độ JLPT";
    white-space: pre;
    grid-column: 1 / -1;
    display: block;
    padding: 4px 8px 12px;
    margin-bottom: 3px;
    border-bottom: 1px solid #edf0f2;
    color: #17212b;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 700;
  }

  /* Items */
  #menu-item-59460 > ul.sub-menu > li {
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    position: relative;
  }

  #menu-item-59460 > ul.sub-menu > li > a {
    position: relative;
    display: flex !important;
    align-items: center;
    min-height: 58px;
    padding: 9px 10px 9px 58px !important;
    border-radius: 8px;
    background: transparent;
    color: #222 !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    box-sizing: border-box;
    transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
  }

  #menu-item-59460 > ul.sub-menu > li > a:hover {
    background: #f2f7fa !important;
    color: #0874a8 !important;
    transform: translateY(-1px);
  }

  /* Badges N5–N1 */
  #menu-item-59470 > a::before,
  #menu-item-59469 > a::before,
  #menu-item-59468 > a::before,
  #menu-item-59467 > a::before,
  #menu-item-59466 > a::before {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #eaf4f9;
    color: #0873a5;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3px;
  }

  #menu-item-59470 > a::before { content: "N5"; }
  #menu-item-59469 > a::before { content: "N4"; }
  #menu-item-59468 > a::before { content: "N3"; }
  #menu-item-59467 > a::before { content: "N2"; }
  #menu-item-59466 > a::before { content: "N1"; }

  /* Flashcard & SRS */
  #menu-item-59459 {
    grid-column: 1 / -1;
    margin-top: 5px !important;
    padding-top: 8px !important;
    border-top: 1px solid #edf0f2 !important;
  }

  #menu-item-59459 > a {
    min-height: 46px !important;
    justify-content: center;
    padding: 10px 14px !important;
    background: #f4f7f9 !important;
    color: #175f83 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
  }

  #menu-item-59459 > a::before {
    content: "◈";
    position: static;
    width: auto;
    height: auto;
    margin-right: 8px;
    transform: none;
    background: none;
    color: #1680b1;
    font-size: 16px;
  }

  #menu-item-59459 > a::after {
    content: "›";
    margin-left: 8px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
  }

  #menu-item-59459 > a:hover {
    background: #eaf4f9 !important;
    color: #076d9c !important;
  }

  /* ---------- Dark mode (html.vnjp-dark) ---------- */
  html.vnjp-dark #menu-item-59460 > ul.sub-menu,
  html.vnjp-dark .main-navigation:not(.toggled) ul ul li#menu-item-59460:hover > ul,
  html.vnjp-dark .main-navigation:not(.toggled) ul ul li#menu-item-59460.sfHover > ul {
    background: #1a2332 !important;
    border-color: #2d3a4f !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.35) !important;
  }

  html.vnjp-dark #menu-item-59460 > ul.sub-menu::before {
    color: #e8edf4;
    border-bottom-color: #2d3a4f;
  }

  html.vnjp-dark #menu-item-59460 > ul.sub-menu > li > a {
    color: #e8edf4 !important;
  }

  html.vnjp-dark #menu-item-59460 > ul.sub-menu > li > a:hover {
    background: #243044 !important;
    color: #7eb8ff !important;
  }

  html.vnjp-dark #menu-item-59470 > a::before,
  html.vnjp-dark #menu-item-59469 > a::before,
  html.vnjp-dark #menu-item-59468 > a::before,
  html.vnjp-dark #menu-item-59467 > a::before,
  html.vnjp-dark #menu-item-59466 > a::before {
    background: rgba(126,184,255,.14);
    color: #7eb8ff;
  }

  html.vnjp-dark #menu-item-59459 {
    border-top-color: #2d3a4f !important;
  }

  html.vnjp-dark #menu-item-59459 > a {
    background: #243044 !important;
    color: #7eb8ff !important;
  }

  html.vnjp-dark #menu-item-59459 > a::before {
    color: #7eb8ff;
  }

  html.vnjp-dark #menu-item-59459 > a:hover {
    background: #2d3a4f !important;
    color: #a8d0ff !important;
  }

}