/* Thú Cưng Việt — CLAYMORPHISM cao cấp. 3D mềm, bóng kép, viền dày, bo tròn lớn, vui nhộn.
   Heading Nunito 800/900, body Be Vietnam Pro. Cam #f97316 + xanh tin cậy #2563eb, nền kem. */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800;900&family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap');
:root {
  --tin-ink: #431407;
  --tin-body: #57422f;
  --tin-muted: #9a7b60;
  --tin-line: #fde4cc;
  --tin-surface: #ffffff;
  --tin-bg: #fff7ed;
  --tin-bg2: #ffedd5;
  --tin-accent: #f97316;
  --tin-accent-dark: #ea580c;
  --tin-blue: #2563eb;
  --tin-blue-dark: #1d4ed8;
  --tin-round: "Nunito", system-ui, sans-serif;
  --tin-sans: "Be Vietnam Pro", system-ui, "Segoe UI", sans-serif;
  --clay-out: 0 10px 22px rgba(234,88,12,.16), 0 3px 8px rgba(67,20,7,.08);
  --clay-out-lg: 0 20px 40px rgba(234,88,12,.22), 0 6px 14px rgba(67,20,7,.10);
  --clay-in: inset 0 2px 3px rgba(255,255,255,.9), inset 0 -3px 6px rgba(234,88,12,.10);
  --contrast: #431407; --contrast-2: #9a7b60; --base: #fff7ed; --base-2: #ffffff; --base-3: #ffffff; --accent: #f97316;
}
body { font-family: var(--tin-sans); font-size: 17px; line-height: 1.75; color: var(--tin-body);
  background: radial-gradient(1200px 600px at 15% -5%, #ffe7cc 0%, transparent 55%),
              radial-gradient(1000px 700px at 100% 0%, #ffe0f0 0%, transparent 50%),
              var(--tin-bg); background-attachment: fixed; }
.site-content { background: transparent; }
.grid-container { max-width: 1180px; }
h1, h2, h3, h4, .entry-title, .site-title, .main-title { font-family: var(--tin-round); color: var(--tin-ink); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; }
a { color: var(--tin-ink); text-decoration: none; } a:hover { color: var(--tin-accent); }
a:focus-visible { outline: 3px solid var(--tin-accent); outline-offset: 3px; border-radius: 6px; }

/* Header kính mờ dính trên cùng, bồng bềnh */
.site-header { background: rgba(255,247,237,.78); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  position: sticky; top: 0; z-index: 50; border-bottom: 2px solid rgba(253,228,204,.9); }
.site-header .inside-header { padding: 18px 0; }
.main-title { font-size: 2.2rem; font-weight: 900; }
.main-title a { color: var(--tin-ink); }
.main-title a::first-letter { color: var(--tin-accent); }
.site-description { font-family: var(--tin-sans); font-size: .8rem; text-transform: uppercase; letter-spacing: .09em; color: var(--tin-accent); font-weight: 700; }

/* Menu: viên kẹo đất sét 3D */
.main-navigation { background: transparent; border: none; }
.main-navigation .inside-navigation { padding: 6px 0; }
.main-navigation .main-nav ul li a { color: var(--tin-ink); background: transparent; font-family: var(--tin-round); text-transform: none; font-size: 1rem; font-weight: 800; padding: 10px 18px; border-radius: 999px; margin: 0 3px; transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .18s, color .18s, box-shadow .18s; }
.main-navigation .main-nav ul li:hover > a, .main-navigation .main-nav ul li.sfHover > a { color: #fff; background: var(--tin-accent); box-shadow: var(--clay-out); transform: translateY(-2px); }
.main-navigation .main-nav ul li[class*="current-menu-"] > a { color: #fff; background: var(--tin-accent); box-shadow: var(--clay-out); }
.main-navigation .menu-toggle { color: var(--tin-ink); font-weight: 800; font-family: var(--tin-round); }

/* Nhãn chuyên mục: pill đất sét nhiều màu */
.cat-links a, .entry-terms a { display: inline-block; background: var(--tin-accent); color: #fff; font-family: var(--tin-round); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 6px 14px; border-radius: 999px; box-shadow: var(--clay-out); }
.cat-links a:hover { background: var(--tin-accent-dark); color: #fff; transform: translateY(-1px); }
.cat-links a[href*="/cho/"] { background: #ea580c; }
.cat-links a[href*="/meo/"] { background: #7c3aed; }
.cat-links a[href*="/cham-soc/"] { background: #0d9488; }
.cat-links a[href*="/dinh-duong/"] { background: #16a34a; }
.cat-links a[href*="/giong/"] { background: var(--tin-blue); }
.entry-meta { font-family: var(--tin-sans); font-size: .84rem; color: var(--tin-muted); font-weight: 600; }
.entry-meta a { color: var(--tin-muted); } .entry-meta a:hover { color: var(--tin-accent); }

/* Lưới thẻ đất sét 3D, bóng kép, nảy khi hover */
.blog .site-main, .archive .site-main, .search-results .site-main { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 32px; padding-top: 10px; }
.blog .site-main > .page-header, .archive .site-main > .page-header, .blog .site-main > .paging-navigation, .archive .site-main > .paging-navigation { grid-column: 1 / -1; }
.blog .site-main > article, .archive .site-main > article, .search-results .site-main > article { margin: 0; padding: 0; background: var(--tin-surface); border: 3px solid #fff; border-radius: 26px; overflow: hidden; box-shadow: var(--clay-out); transition: transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s; display: flex; flex-direction: column; }
.blog .site-main > article:hover, .archive .site-main > article:hover { transform: translateY(-8px); box-shadow: var(--clay-out-lg); }
.blog .inside-article, .archive .inside-article { padding: 0; display: flex; flex-direction: column; height: 100%; }
.blog .post-image, .archive .post-image { order: -1; margin: 0; overflow: hidden; }
.blog .post-image img, .archive .post-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; background: var(--tin-bg2); transition: transform .4s ease; }
.blog .site-main > article:hover .post-image img, .archive .site-main > article:hover .post-image img { transform: scale(1.07); }
.blog .entry-header, .archive .entry-header { padding: 18px 22px 0; }
.blog .entry-title, .archive .entry-title { font-size: 1.3rem; line-height: 1.28; margin: 8px 0; font-weight: 800; }
.blog .entry-title a, .archive .entry-title a { color: var(--tin-ink); } .blog .entry-title a:hover, .archive .entry-title a:hover { color: var(--tin-accent); }
.blog .entry-summary, .archive .entry-summary { padding: 0 22px; color: var(--tin-muted); font-size: .96rem; }
.blog .entry-summary p, .archive .entry-summary p { margin: 0 0 12px; }
.blog .entry-meta, .archive .entry-meta { padding: 6px 22px 20px; margin-top: auto; }
.read-more { display: none; }

/* HERO bài đầu: ảnh phủ rộng trên, tiêu đề lớn dưới (một cột, KHÔNG chia 3) */
.blog .site-main > article:first-of-type, .archive .site-main > article:first-of-type { grid-column: 1 / -1; }
.blog .site-main > article:first-of-type .inside-article,
.archive .site-main > article:first-of-type .inside-article { display: flex; flex-direction: column; }
@media (min-width: 769px) {
  .blog .site-main > article:first-of-type .post-image img, .archive .site-main > article:first-of-type .post-image img { aspect-ratio: 21/9; }
  .blog .site-main > article:first-of-type .entry-header { padding: 26px 40px 0; }
  .blog .site-main > article:first-of-type .entry-title, .archive .site-main > article:first-of-type .entry-title { font-size: 2.3rem; }
  .blog .site-main > article:first-of-type .entry-summary, .archive .site-main > article:first-of-type .entry-summary { padding: 0 40px; font-size: 1.08rem; max-width: 900px; }
  .blog .site-main > article:first-of-type .entry-meta, .archive .site-main > article:first-of-type .entry-meta { padding: 14px 40px 34px; }
}
.archive .page-header, .search .page-header { grid-column: 1/-1; padding: 22px 28px; border: none; margin-bottom: 4px; background: var(--tin-surface); border-radius: 24px; box-shadow: var(--clay-out); }
.page-header .page-title { font-size: 2.1rem; }
.taxonomy-description { color: var(--tin-muted); font-size: 1.02rem; max-width: 75ch; }

/* Bài đơn: khối đất sét lớn */
.single .entry-header, .page .entry-header, .single .entry-content, .page .entry-content { max-width: 760px; margin-left: auto; margin-right: auto; }
.single .site-main > article, .page .site-main > article { background: var(--tin-surface); border-radius: 30px; padding: 40px 34px; border: 3px solid #fff; box-shadow: var(--clay-out); }
.single .entry-title { font-size: 2.4rem; margin: 12px 0; font-weight: 900; }
.single .featured-image, .single .post-image { max-width: 880px; margin: 0 auto 26px; }
.single .featured-image img, .single .post-image img { border-radius: 22px; width: 100%; box-shadow: var(--clay-out); }
.single .entry-content > p:first-of-type { font-size: 1.2rem; color: var(--tin-ink); font-weight: 600; }
.entry-content p { margin: 0 0 1.35rem; }
.entry-content h2 { font-size: 1.62rem; margin: 2.1rem 0 .7rem; color: var(--tin-accent-dark); }
.entry-content h3 { font-size: 1.3rem; margin: 1.5rem 0 .6rem; }
.entry-content a { color: var(--tin-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; text-decoration-color: #93c5fd; }
.entry-content a:hover { color: var(--tin-blue-dark); text-decoration-color: var(--tin-blue); }
.entry-content table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 1.6rem 0; font-size: .98rem; border-radius: 18px; overflow: hidden; box-shadow: var(--clay-out); }
.entry-content th { background: var(--tin-accent); color: #fff; font-family: var(--tin-round); font-weight: 800; text-align: left; padding: 13px 15px; }
.entry-content td { border-bottom: 1px solid var(--tin-line); padding: 13px 15px; background: #fff; }
.entry-content tr:nth-child(even) td { background: var(--tin-bg); }
.entry-content ul, .entry-content ol { padding-left: 1.4rem; } .entry-content li { margin-bottom: .5rem; }
.entry-content ul li::marker { color: var(--tin-accent); }
.entry-content figure { margin: 1.8rem 0; } .entry-content img { border-radius: 22px; box-shadow: var(--clay-out); }
.entry-content figcaption, .wp-caption-text { font-family: var(--tin-sans); font-size: .84rem; color: var(--tin-muted); margin-top: 8px; text-align: center; }
.entry-content blockquote { border: none; background: linear-gradient(135deg, #fff2e2, #ffe6f0); padding: 18px 24px; margin: 1.7rem 0; border-radius: 22px; color: var(--tin-ink); box-shadow: var(--clay-in), var(--clay-out); font-weight: 600; }
.rank-math-breadcrumb { font-family: var(--tin-sans); font-size: .84rem; color: var(--tin-muted); margin-bottom: 12px; font-weight: 600; }
.rank-math-breadcrumb a { color: var(--tin-muted); } .rank-math-breadcrumb .last { color: var(--tin-accent); }

/* Nút đất sét bóng, có ánh sáng lướt */
button, .button, input[type="submit"], .wp-block-button__link { position: relative; overflow: hidden; font-family: var(--tin-round); font-weight: 800; background: var(--tin-accent); color: #fff; border: none; border-radius: 999px; padding: 13px 26px; box-shadow: var(--clay-out); transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .18s; }
button:hover, .button:hover, input[type="submit"]:hover { background: var(--tin-accent-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--clay-out-lg); }
button:active, .button:active, input[type="submit"]:active { transform: translateY(1px); box-shadow: var(--clay-in); }
input[type="search"], input[type="text"], input[type="email"], textarea { border: 2px solid var(--tin-line); border-radius: 999px; font-family: var(--tin-sans); padding: 12px 20px; background: #fff; box-shadow: var(--clay-in); }

.site-footer { background: #431407; border-top: 5px solid var(--tin-accent); }
.site-info { color: #f5d9c4; font-family: var(--tin-sans); font-size: .86rem; padding: 30px 0; font-weight: 500; }
.site-info a { color: #ffd9b8; } .site-info a:hover { color: #fff; }

@media (max-width: 768px) {
  body { font-size: 16px; }
  .main-title { font-size: 1.8rem; } .single .entry-title { font-size: 1.7rem; }
  .blog .site-main, .archive .site-main { grid-template-columns: 1fr; gap: 24px; }
  .blog .site-main > article:first-of-type .post-image img { aspect-ratio: 16/10; }
  .single .site-main > article, .page .site-main > article { padding: 28px 20px; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }