/*
Theme Name: Panda Preschool Gấu Trúc
Theme URI: https://giaoducgautruc.com/
Author: Meowholic / Cody
Description: Theme WordPress cho Giáo dục Gấu Trúc, header 2 tầng hiện đại theo thông tin khách gửi, tinh chỉnh menu bar responsive, search bar, hotline đều cỡ chữ và ép CSS cuối để 3 nút nổi bằng kích thước/khoảng cách.
Version: 3.2.0
Requires at least: 6.0
Tested up to: 6.7
Text Domain: panda-preschool
*/

:root{--panda-green:#047857;--panda-dark:#064e3b;--panda-soft:#ecfdf5;--panda-border:#d1fae5;--panda-text:#0f172a;--panda-muted:#64748b;--panda-shadow:0 18px 50px rgba(16,185,129,.14)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--panda-text);background:#fff}.panda-blog-header{border-bottom:1px solid var(--panda-border);background:#fff}.panda-blog-container{max-width:1120px;margin:0 auto;padding:0 20px}.panda-blog-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 0}.panda-blog-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--panda-dark);font-weight:900}.panda-blog-logo{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:16px;background:var(--panda-green);color:#fff;font-weight:900}.panda-blog-title{font-size:18px;line-height:1.2}.panda-blog-slogan{font-size:13px;color:var(--panda-muted);font-weight:700;margin-top:2px}.panda-blog-actions{display:flex;align-items:center;gap:10px}.panda-blog-actions a{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:10px 16px;text-decoration:none;font-size:14px;font-weight:900}.panda-blog-actions .home{background:var(--panda-soft);color:var(--panda-green)}.panda-blog-actions .phone{background:var(--panda-green);color:#fff}.panda-blog-hero{background:linear-gradient(135deg,#ecfdf5,#fff,#eff6ff);padding:50px 0}.panda-blog-hero h1{margin:0;color:var(--panda-dark);font-size:42px;line-height:1.1}.panda-blog-hero p{max-width:720px;color:#475569;font-size:18px;line-height:1.7}.panda-post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding:44px 0}.panda-post-card{border:1px solid var(--panda-border);border-radius:28px;background:#fff;overflow:hidden;box-shadow:var(--panda-shadow)}.panda-post-card a{text-decoration:none;color:inherit}.panda-post-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#d1fae5,#fff);display:flex;align-items:center;justify-content:center;color:var(--panda-green);font-weight:900}.panda-post-thumb img{width:100%;height:100%;object-fit:cover;display:block}.panda-post-body{padding:22px}.panda-post-body h2{font-size:20px;line-height:1.3;color:var(--panda-dark);margin:0}.panda-post-body p{color:#475569;line-height:1.65}.panda-post-date{color:var(--panda-green);font-weight:900;font-size:13px;margin-bottom:9px}.panda-single{max-width:860px;margin:0 auto;padding:44px 20px}.panda-single h1{font-size:44px;line-height:1.12;color:var(--panda-dark);margin:0 0 14px}.panda-single-meta{color:var(--panda-green);font-weight:900;margin-bottom:22px}.panda-single-thumb{border-radius:28px;overflow:hidden;margin:24px 0;box-shadow:var(--panda-shadow)}.panda-single-thumb img{width:100%;height:auto;display:block}.panda-single-content{font-size:18px;line-height:1.85;color:#334155}.panda-single-content img{max-width:100%;height:auto;border-radius:18px}.panda-single-content a{color:var(--panda-green);font-weight:800}.panda-back-link{display:inline-flex;margin-top:30px;padding:12px 18px;border-radius:999px;background:var(--panda-soft);color:var(--panda-green);text-decoration:none;font-weight:900}.panda-blog-footer{border-top:1px solid var(--panda-border);background:var(--panda-dark);color:#d1fae5;margin-top:40px;padding:30px 0;text-align:center}.panda-empty{padding:50px 0;color:#475569;font-size:18px}@media(max-width:900px){.panda-post-grid{grid-template-columns:1fr 1fr}.panda-blog-hero h1,.panda-single h1{font-size:34px}.panda-blog-actions{display:none}}@media(max-width:640px){.panda-post-grid{grid-template-columns:1fr}.panda-blog-title{font-size:15px}.panda-blog-slogan{display:none}.panda-single h1{font-size:30px}.panda-blog-hero{padding:34px 0}}


/* v1.4 - Header responsive fix cho MacBook/laptop 13 inch.
   Bản v1.3 dùng breakpoint xl (>=1280px), nên nhiều màn 13 inch/zoom 110%-125% bị chuyển sang hamburger.
   Từ v1.4, header đầy đủ sẽ hiện từ khoảng 1100px, đồng thời tự nén khoảng cách để không tràn chữ. */
@media (min-width: 1100px) and (max-width: 1279px) {
  header > div.mx-auto {
    gap: 0.45rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  header nav.hidden.items-center {
    display: flex !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    gap: 0.15rem !important;
    min-width: 0 !important;
  }

  header nav.hidden.items-center button {
    padding: 0.55rem 0.5rem !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
    max-width: 128px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  header > div.mx-auto > button:first-child {
    flex: 0 1 245px !important;
    min-width: 205px !important;
    max-width: 245px !important;
  }

  header > div.mx-auto > button:first-child > div {
    gap: 0.65rem !important;
  }

  header > div.mx-auto > button:first-child .text-2xl,
  header > div.mx-auto > button:first-child .text-xl,
  header > div.mx-auto > button:first-child .text-lg {
    font-size: 16px !important;
    line-height: 1.1 !important;
  }

  header > div.mx-auto > button:first-child .text-sm,
  header > div.mx-auto > button:first-child .text-xs {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  header > div.mx-auto > div.hidden.items-center.gap-3 {
    display: flex !important;
    gap: 0.45rem !important;
    flex: 0 0 auto !important;
  }

  header > div.mx-auto > div.hidden.items-center.gap-3 > a {
    padding: 0.62rem 0.75rem !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  header > div.mx-auto > div.hidden.items-center.gap-3 > button {
    padding: 0.65rem 0.9rem !important;
    min-width: auto !important;
    max-width: 94px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  header > div.mx-auto > button.rounded-2xl.p-2 {
    display: none !important;
  }
}

/* Nếu viewport hơi hẹp hơn nữa, vẫn ưu tiên hiện menu; ẩn hotline để tránh bể layout. */
@media (min-width: 1024px) and (max-width: 1099px) {
  header > div.mx-auto {
    gap: 0.35rem !important;
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  header nav.hidden.items-center {
    display: flex !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    gap: 0.1rem !important;
    min-width: 0 !important;
  }

  header nav.hidden.items-center button {
    padding: 0.5rem 0.38rem !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    max-width: 105px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  header > div.mx-auto > button:first-child {
    flex: 0 1 210px !important;
    min-width: 180px !important;
    max-width: 210px !important;
  }

  header > div.mx-auto > button:first-child .text-2xl,
  header > div.mx-auto > button:first-child .text-xl,
  header > div.mx-auto > button:first-child .text-lg {
    font-size: 15px !important;
    line-height: 1.1 !important;
  }

  header > div.mx-auto > button:first-child .text-sm,
  header > div.mx-auto > button:first-child .text-xs {
    font-size: 10px !important;
    line-height: 1.15 !important;
  }

  header > div.mx-auto > div.hidden.items-center.gap-3 {
    display: flex !important;
    gap: 0.35rem !important;
  }

  header > div.mx-auto > div.hidden.items-center.gap-3 > a {
    display: none !important;
  }

  header > div.mx-auto > div.hidden.items-center.gap-3 > button {
    padding: 0.58rem 0.72rem !important;
    max-width: 82px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  header > div.mx-auto > button.rounded-2xl.p-2 {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  header > div.mx-auto > button:first-child {
    max-width: calc(100vw - 110px) !important;
  }
}

/* v1.4.1 - Full header từ 900px trở lên.
   Giữ thiết kế/trang chủ của v1.4, chỉ sửa breakpoint header:
   - >=900px: hiện menu ngang đầy đủ.
   - 900-1023px: nén logo/menu, ẩn hotline, giữ nút Đặt lịch hẹn gọn.
   - <900px: giữ hamburger menu cho tablet/phone. */
@media (min-width: 900px) and (max-width: 1023px) {
  #root > header > div.mx-auto,
  header > div.mx-auto {
    gap: 0.28rem !important;
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
  }

  #root > header nav.hidden.items-center,
  header nav.hidden.items-center {
    display: flex !important;
    flex: 1 1 auto !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.05rem !important;
    min-width: 0 !important;
  }

  #root > header nav.hidden.items-center button,
  header nav.hidden.items-center button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.45rem 0.28rem !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    line-height: 1.08 !important;
    max-width: 96px !important;
    min-height: 38px !important;
    white-space: normal !important;
    text-align: center !important;
  }

  #root > header > div.mx-auto > button:first-child,
  header > div.mx-auto > button:first-child {
    flex: 0 1 178px !important;
    min-width: 150px !important;
    max-width: 178px !important;
  }

  #root > header > div.mx-auto > button:first-child > div,
  header > div.mx-auto > button:first-child > div {
    gap: 0.45rem !important;
  }

  #root > header > div.mx-auto > button:first-child .h-11,
  #root > header > div.mx-auto > button:first-child .h-12,
  #root > header > div.mx-auto > button:first-child .h-14,
  header > div.mx-auto > button:first-child .h-11,
  header > div.mx-auto > button:first-child .h-12,
  header > div.mx-auto > button:first-child .h-14 {
    width: 40px !important;
    height: 40px !important;
    font-size: 15px !important;
    border-radius: 14px !important;
  }

  #root > header > div.mx-auto > button:first-child .text-2xl,
  #root > header > div.mx-auto > button:first-child .text-xl,
  #root > header > div.mx-auto > button:first-child .text-lg,
  #root > header > div.mx-auto > button:first-child .text-base,
  header > div.mx-auto > button:first-child .text-2xl,
  header > div.mx-auto > button:first-child .text-xl,
  header > div.mx-auto > button:first-child .text-lg,
  header > div.mx-auto > button:first-child .text-base {
    font-size: 13px !important;
    line-height: 1.06 !important;
  }

  #root > header > div.mx-auto > button:first-child .text-sm,
  #root > header > div.mx-auto > button:first-child .text-xs,
  header > div.mx-auto > button:first-child .text-sm,
  header > div.mx-auto > button:first-child .text-xs {
    display: none !important;
  }

  #root > header > div.mx-auto > div.hidden.items-center.gap-3,
  header > div.mx-auto > div.hidden.items-center.gap-3 {
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 0.25rem !important;
  }

  /* Ẩn hotline ở 900-1023px để đủ chỗ cho full menu. */
  #root > header > div.mx-auto > div.hidden.items-center.gap-3 > a,
  header > div.mx-auto > div.hidden.items-center.gap-3 > a {
    display: none !important;
  }

  #root > header > div.mx-auto > div.hidden.items-center.gap-3 > button,
  header > div.mx-auto > div.hidden.items-center.gap-3 > button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.52rem 0.55rem !important;
    max-width: 72px !important;
    min-width: 62px !important;
    border-radius: 999px !important;
    font-size: 10.5px !important;
    line-height: 1.08 !important;
    white-space: normal !important;
    text-align: center !important;
  }

  #root > header > div.mx-auto > button.rounded-2xl.p-2,
  header > div.mx-auto > button.rounded-2xl.p-2 {
    display: none !important;
  }

  /* Nếu người dùng từng bấm mở hamburger rồi kéo rộng màn hình, ẩn panel mobile ở >=900px. */
  #root > header > div.border-t.border-emerald-100,
  header > div.border-t.border-emerald-100 {
    display: none !important;
  }
}

@media (min-width: 900px) {
  #root > header > div.mx-auto > button.rounded-2xl.p-2,
  header > div.mx-auto > button.rounded-2xl.p-2 {
    display: none !important;
  }
}

@media (max-width: 899px) {
  #root > header nav.hidden.items-center,
  #root > header > div.mx-auto > div.hidden.items-center.gap-3,
  header nav.hidden.items-center,
  header > div.mx-auto > div.hidden.items-center.gap-3 {
    display: none !important;
  }
}


/* v1.4.2 fallback: nếu inline CSS bị cache, vẫn cố ép menu desktop hiện từ 900px. */
@media (min-width: 900px) {
  #root header nav[class*="lg:flex"],
  #root header nav[class*="hidden"][class*="items-center"] { display:flex!important; }
  #root header > div[class*="mx-auto"] > div[class*="lg:flex"],
  #root header > div[class*="mx-auto"] > div[class*="hidden"][class*="items-center"] { display:flex!important; }
  #root header button[class*="lg:hidden"] { display:none!important; }
}


/* Footer credit Meowholic */
.panda-meowholic-credit{margin-top:8px;color:#a7f3d0;font-size:13px;line-height:1.5;font-weight:700;text-align:center}.panda-meowholic-credit a{color:#d1fae5;text-decoration:none;font-weight:900}.panda-meowholic-credit a:hover{text-decoration:underline}


/* v1.9.8 - credit footer hardcoded */
.panda-footer-credit-direct{display:block;margin-top:10px;color:#a7f3d0;font-size:14px;font-weight:700;line-height:1.5}
.panda-footer-credit-direct a{color:#d1fae5;text-decoration:none;font-weight:900}
.panda-footer-credit-direct a:hover{text-decoration:underline;color:#fff}