/*
 Theme Name:   GeneratePress Child (wikiStyle Semantic UI)
 Template:     generatepress
 Version:      1.0.0
 Text Domain:  gp-child-wikistyle
*/
/* ====== Palette có tương phản tốt hơn ====== */
:root{
  --brand-500:#7fb069;        /* xanh cũ */
  --brand-650:#5f944d;        /* hơi đậm */
  --brand-700:#4a7a3b;        /* đậm – dùng cho header/menu */
  --brand-800:#3b642f;        /* rất đậm – dùng cho active */
  --ink:#0f172a;              /* chữ đen */
  --paper:#ffffff;
}

/* ====== Header + Navigation (nền đậm, chữ trắng) ====== */
.site-header,
.main-navigation { background:#4a7a3b !important; }

.main-navigation .inside-navigation{
  max-width:1200px;margin:0 auto;padding:.5rem 1rem;
}

.main-navigation a,
.main-navigation .menu-toggle { color:#fff !important; }

.main-navigation a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a{
  background:rgba(255,255,255,.18);
  color:#fff !important;                 /* giữ trắng để đủ tương phản */
  text-decoration:none;
}

/* Dropdown */
/* nền đậm hơn, chữ trắng */
.main-navigation ul ul{
  background:#3b642f !important;
}
.main-navigation ul ul a{
  color:#fff !important;
}
.main-navigation ul ul a:hover{
  background:rgba(255,255,255,.15);
}

/* ====== Nút hamburger (mobile) ====== */
@media (max-width:1024px){
  .menu-toggle{ background:transparent;border:0;color:#fff !important;font-size:1.8rem }
  .menu-toggle svg{ display:none }          /* ẩn SVG cũ nếu có */
  .menu-toggle::before{ content:"☰" }       /* icon mở */
  .menu-toggle.toggled::before{ content:"✕" } /* icon đóng */
}
@media (min-width:1025px){
  .menu-toggle{ display:none !important }   /* ẩn trên desktop */
}

/* ====== Link nổi bật trong các ô màu xanh (GB Container, banner, hero) ====== */
/* bắt bất kỳ container có nền xanh → chữ và link chuyển trắng */
[class*="gb-container"]{
  /* nếu container bạn đặt nền xanh nhạt, cân nhắc nâng lên --brand-650 */
}
[class*="gb-container"][style*="#7fb069"],
[class*="gb-container"][style*="rgb(127, 176, 105)"] {
  color:#fff;
}
[class*="gb-container"] a{
  color:#0f172a;               /* mặc định */
}
[class*="gb-container"][style*="#7fb069"] a,
[class*="gb-container"][style*="rgb(127, 176, 105)"] a{
  color:#fff !important;       /* link trên nền xanh → trắng */
  text-decoration:underline;   /* tăng khả dụng */
}

/* ====== Pill / Button xanh (đổi text cho đủ tương phản) ====== */
.pill,
.button.is-style-outline{
  background:#fff;color:#0f172a;border:1px solid #d1d5db;
}
.button, .wp-block-button__link{
  background:#4a7a3b;color:#fff !important;border:1px solid #3b642f;
}
.button:hover, .wp-block-button__link:hover{
  background:#3b642f;color:#fff !important;
}

/* ====== Trạng thái focus rõ ràng cho bàn phím ====== */
a:focus-visible,
button:focus-visible{
  outline:3px solid #ffdd57;      /* vàng đậm */
  outline-offset:2px;
  box-shadow:none;
}

/* ====== Breadcrumb, link nhỏ trên nền xanh ====== */
.breadcrumbs,
.breadcrumbs a{ color:#fff !important; }
.breadcrumbs a:hover{ text-decoration:underline }

/* ====== Badges trên nền xanh lá ====== */
.badge, .label{
  background:#fff;color:#0f172a;border-radius:6px;padding:.1rem .4rem;
}

    /* =========
       Base
       ========= */
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
      color:var(--ink);
      background:var(--paper);
    }
    a{color:var(--brand);text-decoration:none}
    a:hover{text-decoration:underline}
    img{max-width:100%;height:auto;display:block}
    .container{max-width:var(--container);margin-inline:auto;padding-inline:16px}
    .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
      padding:.65rem 1rem;border-radius:999px;border:1px solid var(--brand);
      background:var(--brand);color:#fff;font-weight:600;box-shadow:var(--shadow-sm)
    }
    .btn.btn-ghost{background:#fff;color:var(--brand)}
    .pill{display:inline-block;padding:.45rem .8rem;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-weight:500}
    .muted{color:var(--muted)}
    .grid{display:grid;gap:16px}
    .grid-2{grid-template-columns:repeat(2,1fr)}
    .grid-3{grid-template-columns:repeat(3,1fr)}
    .grid-4{grid-template-columns:repeat(4,1fr)}
    @media (max-width:992px){.grid-4{grid-template-columns:repeat(3,1fr)}}
    @media (max-width:768px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
    @media (max-width:520px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

    /* =========
       Header
       ========= */
    header.site-header{
      position:sticky;top:0;z-index:100;background:var(--brand);
      color:#fff;box-shadow:var(--shadow-sm)
    }
    .topbar{display:flex;align-items:center;gap:14px;padding:.65rem 0}
    .brand{font-weight:900;letter-spacing:.2px}
    .brand a{color:#fff}
    .site-search{flex:1;display:flex;gap:8px}
    .site-search input{
      width:100%;border-radius:999px;border:0;padding:.6rem .9rem;
      outline:2px solid rgba(255,255,255,.35);background:#fff;color:var(--ink)
    }
    .user-links{display:flex;gap:16px;align-items:center}
    .user-links a{color:#fff;font-weight:600}

    /* =========
       Hero
       ========= */
    .hero{
      background:linear-gradient(to bottom, var(--brand-2), #fff);
      padding:40px 0 24px;border-bottom:1px solid var(--line)
    }
    .hero h1{font-size:clamp(24px,4.2vw,44px);line-height:1.2;margin:0 0 10px;font-weight:800}
    .hero .sub{font-size:clamp(16px,2.4vw,20px);margin:0 0 18px}
    .hero .query{
      display:flex;gap:8px;align-items:center;max-width:680px
    }
    .hero .query input{
      flex:1;border:2px solid var(--brand);border-radius:999px;padding:.8rem 1rem;font:inherit
    }

    /* =========
       Section wrappers
       ========= */
    section.block{padding:28px 0}
    section.block .block-title{display:flex;align-items:center;gap:.6rem;margin:0 0 16px}
    .paper{background:var(--paper-2);border-radius:var(--radius);padding:16px}

    /* =========
       Cards
       ========= */
    article.card{
      background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
      box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column
    }
    .card .thumb{aspect-ratio:16/9;background:#dfe8d8}
    .card .body{padding:12px}
    .card h3{font-size:16px;line-height:1.45;margin:0 0 6px}
    .meta{display:flex;gap:10px;align-items:center;font-size:13px;color:var(--muted)}
    .meta .badge{background:#ecf4ea;color:#2f6b2f;padding:.15rem .5rem;border-radius:6px;font-weight:700;font-size:12px}

    /* =========
       Feature band (mission)
       ========= */
    .band{
      background:var(--paper-2);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-sm)
    }
    .band .bullets{display:grid;gap:14px;grid-template-columns:repeat(3,1fr)}
    @media (max-width:768px){.band .bullets{grid-template-columns:1fr}}

    /* =========
       Sidebar layout (main + aside)
       ========= */
    .layout{display:grid;grid-template-columns:3fr 1.2fr;gap:20px}
    @media (max-width:992px){.layout{grid-template-columns:1fr}}

    aside .list{display:grid;gap:8px}
    aside .list a{display:block;border:1px solid var(--line);border-radius:8px;padding:.55rem .75rem;background:#fff}
    aside .cloud a{display:inline-block;margin:.25rem .4rem;color:var(--muted)}

    /* =========
       Testimonials
       ========= */
    .quotes{
      background:var(--paper-2);border-radius:var(--radius);display:grid;gap:16px;
      grid-template-columns:repeat(3,1fr);padding:16px;border:1px solid var(--line)
    }
    .quotes blockquote{
      margin:0;padding:16px;border-radius:10px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm)
    }
    .quotes cite{display:block;margin-top:8px;color:var(--muted);font-style:normal}
    @media (max-width:768px){.quotes{grid-template-columns:1fr}}

    /* =========
       Footer
       ========= */
    footer.site-footer{
      margin-top:38px;background:#476c3f;color:#e6f1e3;padding:26px 0
    }
    footer a{color:#e6f1e3}
    .footer-grid{display:grid;gap:16px;grid-template-columns:2fr 1fr 1fr 1fr}
    @media (max-width:768px){.footer-grid{grid-template-columns:1fr 1fr}}
    .foot-search{max-width:440px}
    .foot-search input{width:100%;border-radius:999px;border:0;padding:.7rem 1rem}
/* ===== MENU CHÍNH (PRIMARY NAV) ===== */
.main-navigation {
  background-color: #7fb069; /* màu nền thương hiệu */
  border-bottom: 2px solid #6da05c;
  font-weight: 600;
}

.main-navigation .inside-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
}

/* Logo căn giữa với menu */
.site-logo {
  max-height: 50px;
}

.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.2rem;
}

.main-navigation ul li a {
  color: #fff;
  text-decoration: none;
  padding: 10px 4px;
  border-radius: 4px;
  transition: background 0.2s, color 0.2s;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item a {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* ===== MENU MOBILE (HAMBURGER) ===== */
.menu-toggle,
.menu-toggle:hover,
.menu-toggle:focus {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.8rem;
}

button.menu-toggle::before {
  content: "☰"; /*  */
}

button.menu-toggle.toggled::before {
  content: "✕"; /*  */
}

.main-navigation.toggled .main-nav > ul {
  display: block;
  background: #7fb069;
  padding: 1rem;
}

.main-navigation.toggled ul li {
  display: block;
  margin-bottom: 0.5rem;
}

/* ===== MENU DROPDOWN ===== */
.main-navigation ul ul {
  background: #6da05c;
  border-radius: 6px;
  padding: 0.5rem;
}

.main-navigation ul ul li a {
  padding: 8px 12px;
  display: block;
  color: #fff;
}

.main-navigation ul ul li a:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ===== ACCESSIBILITY ===== */
.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 10px;
  top: 10px;
  background: #fff;
  color: #000;
  padding: 8px 12px;
  z-index: 9999;
}
/* ẨN nút hamburger trên desktop */
@media (min-width: 1025px) {
  .menu-toggle {
    display: none !important;
  }
}

/* Chỉ hiển thị nút menu toggle ở mobile */
@media (max-width: 1024px) {
  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
  }

  /* Biểu tượng ☰ (mở menu) */
  .menu-toggle::before {
    content: "☰";
    font-family: Arial, sans-serif;
  }

  /* Biểu tượng ✕ (đóng menu) khi bật */
  .menu-toggle.toggled::before {
    content: "✕";
  }
}

/* Ẩn text thừa trong nút menu (nếu có) */
.menu-toggle span {
  display: none !important;
}