/*
Theme Name: Pet Almanac
Description: Child theme riêng của petalmanac.com (tách từ lat-review-child ngày 2026-10-29). Slug riêng để updater của plugin lat-review không ghi đè.
Author: Pet Almanac
Template: lat-theme
Version: 0.1.0
Text Domain: petalmanac
*/

/* ============================================================
 * TOKEN: brand B&W (từ mock.css) + REMAP token theme cha (--color-*)
 * và plugin AffiliateCMS Pro (--acms-*). Child nạp sau -> :root này thắng.
 * Đổi cả site bằng 1 chỗ. KHÔNG hardcode hex rời trong component.
 * ============================================================ */
:root{
  /* PET ALMANAC: bộ token màu duy nhất của site (rule H2). Đổi màu thương hiệu chỉ sửa ở đây.
     Tên biến cũ của LAT Review (--navy, --gold...) được giữ và trỏ sang bảng màu mới để các template
     chưa làm lại (category, bài viết, page) vẫn đúng màu. */
  --pa-green:#1d7a3e; --pa-green-deep:#145a2d; --pa-green-dark:#0d3b1f; --pa-green-tint:#e8f4ec; --pa-green-soft:#f3f8f4; --pa-green-line:#cfe6d6;
  --pa-fish:#1565c0; --pa-fish-tint:#e5f0fb; --pa-fish-shade:7,38,74;
  --pa-rep:#2e7d32; --pa-rep-tint:#e7f3e8; --pa-rep-shade:60,38,12;
  --pa-fix:#d9822b; --pa-fix-tint:#fdf0e3; --pa-fix-ink:#a85f17;
  --pa-hero-shade:9,38,20;
  --pa-ink:#14201a; --pa-ink-2:#36423b; --pa-muted:#6b7770; --pa-line:#e3e9e5; --pa-bg:#ffffff; --pa-white:#ffffff;
  --pa-radius:14px; --pa-white-rgb:255,255,255; --pa-black-rgb:0,0,0;
  --pa-shadow-sm:0 10px 22px -12px rgba(var(--pa-black-rgb),.4); --pa-shadow-lg:0 16px 40px -20px rgba(var(--pa-black-rgb),.6);

  --navy:var(--pa-ink); --ink:var(--pa-ink); --ink-soft:var(--pa-ink-2); --muted:var(--pa-muted); --line:var(--pa-line); --bg:var(--pa-bg);
  --panel:var(--pa-green-soft); --gold:var(--pa-green); --gold-deep:var(--pa-green-deep); --link:var(--pa-green-deep); --sale:var(--pa-fix); --good:var(--pa-green);
  --maxw:1240px;
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;

  /* Thang chữ tiêu đề (giữ từ bản cũ). Mobile override ở @media(max-width:640px) cuối file. */
  --fs-h2:26px; --fs-h3:22px; --fs-card-lg:30px; --fs-card:21px; --fs-card-sm:18px; --fs-sechead:22px;

  /* Remap token theme cha (lat-theme) */
  --color-primary:#1d7a3e; --color-primary-hover:#145a2d; --color-primary-dark:#145a2d;
  --color-primary-light:#e8f4ec; --color-primary-rgb:29,122,62;
  --color-accent:#1d7a3e; --color-accent-hover:#145a2d; --color-accent-light:#e8f4ec;
  --color-success:#1d7a3e; --color-success-light:#e8f4ec;
  --color-warning:#a85f17; --color-error:#c0392b; --color-info:#14201a;
  --color-text:#14201a; --color-text-secondary:#36423b; --color-text-muted:#6b7770; --color-text-subtle:#8a948e;
  --color-bg:#ffffff; --color-bg-alt:#f3f8f4; --color-surface:#f3f8f4; --color-surface-raised:#ffffff; --color-surface-hover:#e8f4ec;
  --color-border:#e3e9e5; --color-border-subtle:#eef2ef; --color-border-strong:#cfd8d2;
  --font-sans:var(--font);

  /* Remap token plugin AffiliateCMS Pro */
  --acms-primary-rgb:29,122,62; --acms-star-active:#1d7a3e; --acms-border:#e3e9e5;
}

/* ============================================================
 * BASE
 * ============================================================ */
*{box-sizing:border-box;margin:0;padding:0;min-width:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip;max-width:100%}
body{font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.cat{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--gold-deep)}
.date{font-size:12px;color:var(--muted);font-weight:400;font-family:Georgia,'Times New Roman',serif}
.byline{font-size:15px;color:var(--muted);font-weight:400}
.byline a{color:var(--link);font-weight:700}
.accent-h{font-weight:700;letter-spacing:-.02em;border-top:3px solid var(--gold);padding-top:10px;display:block;text-transform:uppercase}

/* ============================================================
 * HEADER
 * ============================================================ */
header.site{position:sticky;top:0;z-index:40;background:#fff}
html{scroll-padding-top:130px} /* anchor jump (In this guide) chừa chỗ cho sticky header */
@media(max-width:640px){html{scroll-padding-top:75px}}
.topbar{border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;align-items:center;gap:24px;height:72px}
/* Logo: wordmark hai dòng, "Best" trong khối đỏ bo lệch, dải sao điểm số ở dưới.
   Markup do pf_logo() sinh ra, mọi kích thước ăn theo font-size của .logo. */
.logo{font-family:'Montserrat',-apple-system,Arial,sans-serif;font-weight:800;font-size:33px;line-height:1;letter-spacing:-.02em;color:var(--ink);text-decoration:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:.08em}
.logo img{height:39px;width:auto}
.logo .logo-row{display:flex;align-items:baseline;white-space:nowrap}
/* Nền đỏ là lớp ::before nằm sau chữ, nên đổi hình khối không đụng tới chữ */
.logo .logo-bx{position:relative;display:inline-block;color:#fff;padding:.02em .17em .02em .15em;z-index:0}
.logo .logo-bx::before{content:"";position:absolute;inset:-.04em -.02em;background:var(--gold);z-index:-1;border-radius:.42em .09em .42em .09em}
.logo .logo-score{display:inline-flex;align-items:center;gap:.055em;padding-left:.03em}
.logo .logo-score svg{height:.26em;width:auto;flex:none;display:block}
.logo .lsf svg{fill:var(--gold)}
.logo .lse svg{fill:var(--ink);opacity:.22}
footer.site .logo .lse svg{fill:#fff;opacity:.34}
/* Nhấp nháy sao: chu kỳ trên 1 giây, tức dưới 3 lần mỗi giây (WCAG 2.3.1) */
.logo .blink-last .d5 svg{animation:pfLastStar 1.8s ease-in-out infinite}
@keyframes pfLastStar{0%,100%{fill:var(--ink);opacity:.22}45%,62%{fill:var(--gold);opacity:1}}
footer.site .logo .blink-last .d5 svg{animation-name:pfLastStarDark}
@keyframes pfLastStarDark{0%,100%{fill:#fff;opacity:.34}45%,62%{fill:var(--gold);opacity:1}}
/* Sóng chạy: sao nghỉ ở trạng thái mờ, đợt sóng chạy qua làm từng sao sáng đầy
   rồi phồng nhẹ, giống thanh điểm đang được chấm dần. */
.logo .blink-wave .lsf svg{opacity:.55;animation:pfWaveStar 2.4s ease-in-out infinite}
.logo .blink-wave .lse svg{opacity:.2;animation:pfWaveStarDim 2.4s ease-in-out infinite}
.logo .blink-wave .d2 svg{animation-delay:.13s}.logo .blink-wave .d3 svg{animation-delay:.26s}
.logo .blink-wave .d4 svg{animation-delay:.39s}.logo .blink-wave .d5 svg{animation-delay:.52s}
@keyframes pfWaveStar{0%,40%,100%{transform:scale(1);opacity:.55}12%{transform:scale(1.3);opacity:1}}
@keyframes pfWaveStarDim{0%,40%,100%{transform:scale(1);opacity:.2}12%{transform:scale(1.2);opacity:.5}}
.logo .blink-breath{animation:pfBreathe 2.6s ease-in-out infinite}
@keyframes pfBreathe{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){
  .logo .blink-last .d5 svg,.logo .blink-wave .lsf svg,.logo .blink-wave .lse svg,.logo .blink-breath{animation:none!important}
  .logo .blink-wave .lsf svg{opacity:1}.logo .blink-wave .lse svg{opacity:.22}
}
.searchpill{margin-left:auto;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #d4d4d4;border-radius:22px;padding:9px 18px;min-width:320px;color:var(--muted);font-size:13.5px}
.searchpill input{border:none;background:none;outline:none;font:inherit;color:var(--ink);width:100%}
.searchpill button{border:none;background:none;color:var(--muted);cursor:pointer;font-size:15px;padding:0;display:flex}
.navbar{background:var(--gold);position:relative}
.navbar .wrap{display:flex;align-items:center;height:44px;position:relative}
.navbar nav{display:flex;position:relative;z-index:2}
.navbar .ni{position:static}
.navbar .ni > a,.navbar .right a{font-size:14px;font-weight:600;color:#fff;padding:0 15px;line-height:44px;display:block;letter-spacing:normal}
.navbar .ni:first-child > a{padding-left:0}
.navbar .ni:hover > a{color:#fff;box-shadow:inset 0 -3px 0 #ffffff}
.navbar .submenu{position:absolute;top:100%;left:0;right:auto;width:720px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);box-shadow:0 20px 34px rgba(0,0,0,.18);border-radius:0 0 5px 5px;padding:20px 26px 24px;display:none;column-count:3;column-gap:30px;z-index:60}
.navbar .ni:hover .submenu{display:block}
.navbar .submenu a{display:block;padding:7px 10px;font-size:14px;font-weight:400;color:#1a1a1a;line-height:1.4;border-radius:5px;break-inside:avoid}
/* Tên danh mục Trends dài hơn taxonomy cũ (Mass Merchants & Department Stores...).
   nowrap làm chữ tràn sang cột bên cạnh, nên cho phép xuống dòng trong cột. */
.navbar .submenu a{overflow-wrap:anywhere}
.navbar .submenu a:hover{background:#f0f0f0;color:#000000}
.navbar .submenu.allcats{column-count:4;width:min(1120px,calc(100vw - 24px))}
.navbar .submenu.allcats a{font-weight:500}
.navbar .right{margin-left:auto;display:flex;position:relative;z-index:2}
.navbar .right a{color:#fff;font-weight:800}
.navbar .right a:hover{color:#fff}
.m-searchbtn{display:none;align-items:center;justify-content:center;width:42px;height:38px;border:1px solid var(--line);border-radius:6px;color:var(--navy);font-size:17px;background:#fff;cursor:pointer;margin-left:auto;flex:none}
.mobile-search{display:none;background:#fff;border-top:1px solid var(--line);padding:12px 24px}
.msearch-toggle:checked ~ .mobile-search{display:block}
.mobile-search .m-search{display:flex;align-items:center;gap:9px;padding:11px 15px;border:1px solid var(--line);border-radius:22px;color:var(--muted);font-size:13.5px}
.mobile-search .m-search input{border:none;outline:none;font:inherit;width:100%;background:none}
/* FTC affiliate disclosure bar: band toàn width dưới header, text căn giữa */
.ftc-bar{background:var(--panel);border-bottom:1px solid var(--line);text-align:center;padding:9px 16px}
.ftc-bar p{max-width:1200px;margin:0 auto;font-size:12.5px;color:var(--muted);line-height:1.45}
.ftc-bar a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.ftc-bar a span{margin-left:3px;text-decoration:none}
.hamburger{display:none;align-items:center;justify-content:center;width:42px;height:38px;border:1px solid var(--line);border-radius:6px;color:var(--navy);font-size:19px;cursor:pointer;background:#fff;flex:none}
.hamburger .ic-close{display:none}
.mnav-toggle:checked ~ .topbar .hamburger .ic-open{display:none}
.mnav-toggle:checked ~ .topbar .hamburger .ic-close{display:inline-block}
/* Override .mobile-nav của theme cha (drawer fixed 100vh/320px) -> dropdown normal-flow (mockup). */
.mobile-nav{display:none;background:var(--gold);border-top:1px solid rgba(255,255,255,.25);box-shadow:0 14px 26px rgba(0,0,0,.13);position:static;height:auto;max-width:none;inset:auto;transform:none;flex-direction:column;z-index:auto}
/* Menu mobile phải TỰ CUỘN được.
   Nó nằm trong header `position:sticky` và chứa tới 252 link (17 nhóm cộng 216 mục con), nên để
   `height:auto` là nó cao hàng nghìn pixel, header dính cứng không cuộn tới đáy được và thao tác
   kéo xuống bị loạn. Chừa đúng chiều cao thanh header (72px desktop, 60px từ 640px trở xuống).
   `dvh` thay `vh` vì trên di động thanh địa chỉ co giãn, dùng `vh` thì đáy menu bị khuất dưới nó.
   `overscroll-behavior:contain` chặn việc cuộn hết menu rồi trang nền cuộn theo. */
.mobile-nav{max-height:calc(100vh - 72px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@supports(height:100dvh){.mobile-nav{max-height:calc(100dvh - 72px)}}
.mnav-toggle:checked ~ .mobile-nav{display:block}
.mobile-nav a{display:block;padding:13px 24px;font-size:14px;font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.18)}
.mobile-nav a:active,.mobile-nav a:hover{background:rgba(255,255,255,.14)}
.mobile-nav a.gold{color:#fff}
.mobile-nav .m-sep{padding:12px 24px 6px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.9)}
.mobile-nav details summary{list-style:none;padding:13px 24px;font-size:14px;font-weight:700;color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.18)}
.mobile-nav details summary::-webkit-details-marker{display:none}
.mobile-nav details summary::after{content:'+';font-size:19px;color:rgba(255,255,255,.9);font-weight:400;line-height:1}
.mobile-nav details[open] summary{color:#fff}
.mobile-nav details[open] summary::after{content:'\2212'}
.mobile-nav .sub{background:rgba(0,0,0,.12)}
.mobile-nav .sub a{padding:11px 24px 11px 38px;font-size:13px;font-weight:600;color:rgba(255,255,255,.9)}
/* Nav ngang can 809px noi dung nen chi hien tu 981px. Duoi do dung drawer.
   Search van doi o moc 640px nhu cu. */
@media(min-width:981px){.mobile-nav{display:none!important}}
@media(min-width:641px){.mobile-search{display:none!important}}

/* ============================================================
 * HERO: 3 columns (homepage)
 * ============================================================ */
.hero{display:grid;grid-template-columns:255px 1fr 290px;gap:30px;padding:26px 0 34px}
.col-h{font-size:15px;margin-bottom:14px}
.latest .it{padding:11px 0;border-bottom:1px solid var(--line)}
.latest .it:first-of-type{padding-top:0}
.latest .meta{display:flex;gap:8px;align-items:center;margin-bottom:4px}
.latest .it a.h{font-size:16px;font-weight:700;line-height:1.32;display:block}
.latest .it a.h:hover{color:var(--gold-deep)}
.feat img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.feat h3{font-size:var(--fs-card-lg);font-weight:600;line-height:1.16;letter-spacing:-.01em;margin:12px 0 10px}
.feat p{font-size:16px;color:var(--ink-soft);line-height:1.4;margin-bottom:14px}
.feat .feat-meta{margin-top:12px}

/* Tagline band with search */
.tagline{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:40px 20px;text-align:center}
.tagline h2{font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.01em;margin-bottom:20px}
.tagline form{display:flex;justify-content:center;max-width:620px;margin:0 auto}
.tagline input{flex:1;border:1px solid #d4d4d4;border-right:none;border-radius:5px 0 0 5px;padding:14px 16px;font:inherit;outline:none}
.tagline button{border:none;background:var(--gold);color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:13px;padding:0 28px;border-radius:0 5px 5px 0;cursor:pointer}
.tagline button:hover{background:var(--gold-deep);color:#fff}

/* Section shell */
section.blk{padding:24px 0}
.sechead{margin-bottom:8px}
.sechead h2{font-size:var(--fs-sechead)}
.sechead p{font-size:13.5px;color:var(--ink-soft);margin:8px 0 20px;max-width:80ch}
.sechead.rowend{display:flex;justify-content:space-between;align-items:center}

/* Trending flat cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.acard .imgwrap{aspect-ratio:16/9;overflow:hidden}
.acard img{width:100%;height:100%;object-fit:cover}
.acard .meta{display:flex;gap:9px;align-items:center;margin:11px 0 6px}
.acard h2,.acard h3{font-size:var(--fs-card-sm);font-weight:600;line-height:1.28;letter-spacing:.02px;margin-bottom:7px}
.acard p{font-size:15px;color:var(--ink-soft);line-height:1.4;margin-bottom:8px}
.acard .byline{display:block;margin:6px 0 8px}

/* Newsletter */
.news{background:var(--navy);color:#fff;padding:26px 32px;display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.news .l{max-width:460px}
.news .news-title{font-size:19px;font-weight:800}.news .news-title b{color:#fff}
.news .wk{font-size:10.5px;font-weight:800;letter-spacing:.08em;color:#fff;text-transform:uppercase}
.news p{color:rgba(255,255,255,.78);font-size:12.5px;margin-top:5px}
.news form{margin-left:auto;display:flex;gap:0}
.news input{border:none;border-radius:4px 0 0 4px;padding:11px 14px;font:inherit;min-width:230px;outline:none}
.news button{border:none;background:var(--gold);color:#fff;font-weight:800;font-size:13px;padding:0 20px;border-radius:0 4px 4px 0;cursor:pointer}
.news button:hover{background:var(--gold-deep)}
.news-wrap{padding-top:40px;padding-bottom:14px}

/* Browse categories */
.catblock{padding:16px 0}
.catblock .ch{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:20px;border-top:3px solid var(--gold);padding-top:16px}
.catblock .ch .cat-title{font-size:42px;font-weight:700;letter-spacing:-1px;line-height:1.08;margin:0;text-transform:uppercase}
.catblock .ch .cat-title a{color:inherit;text-decoration:none}
.catblock .ch .cat-title a:hover{text-decoration:underline}
.catblock .subs{font-size:16px;color:var(--ink-soft);font-weight:600}
.catblock .subs a{color:var(--link);font-weight:700;text-decoration:underline}
.catblock .cols{display:grid;grid-template-columns:1.25fr 1fr;gap:40px}
.lead img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;margin-bottom:11px}
.lead .date{margin-bottom:6px;display:block}
.lead h3{font-size:var(--fs-h3);font-weight:600;line-height:1.2;letter-spacing:-.01em;margin-bottom:8px}
.lead p{font-size:15px;color:var(--ink-soft);line-height:1.4;margin:8px 0 7px}
.clist{border-left:1px solid var(--line);padding-left:36px;display:flex;flex-direction:column}
.clist .ci{padding:12px 0;border-bottom:1px solid var(--line)}
.clist .ci:first-child{padding-top:0}
.clist .ci .date{display:block;margin-bottom:4px}
.clist .ci .ci-title{font-size:16px;font-weight:600;line-height:1.3}
.clist .vall{margin-top:14px;font-size:12.5px;font-weight:800;color:var(--link);text-decoration:underline}

/* Card layout variants (dùng chung) */
.variant-badge{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--gold-deep);background:#f6f6f6;border:1px solid #e4e4e4;padding:2px 8px;border-radius:999px;margin-left:10px;vertical-align:middle}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.compact-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0 34px}
.compact-list .crow{display:flex;gap:13px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.compact-list .crow img{width:88px;height:62px;object-fit:cover;background:var(--panel);flex:none}
.compact-list .crow .date{display:block;margin-bottom:4px}
.compact-list .crow h4{font-size:16px;font-weight:600;line-height:1.32}
.carousel{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 12px;-webkit-overflow-scrolling:touch}
.carousel .acard{flex:0 0 300px;scroll-snap-align:start}
.carousel::-webkit-scrollbar{height:8px}
.carousel::-webkit-scrollbar-track{background:var(--panel);border-radius:4px}
.carousel::-webkit-scrollbar-thumb{background:#d4d4d4;border-radius:4px}

/* Who */
.who{background:var(--navy);color:#fff;padding:52px 0}
.who .who-title{font-size:27px;font-weight:900;text-align:center;margin-bottom:12px;color:#fff}
.who .sub{text-align:center;color:rgba(255,255,255,.82);font-size:14px;max-width:76ch;margin:0 auto 8px}
.who .stats{display:flex;justify-content:center;gap:46px;flex-wrap:wrap;margin:28px 0 34px}
.who .stat b{display:block;font-size:32px;font-weight:900;color:#fff;letter-spacing:-.02em}
.who .stat span{font-size:12px;color:rgba(255,255,255,.85);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.who .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:38px}
.who .pillar{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:24px;text-align:center}
.who .pillar img{height:52px;margin:0 auto 14px}
.who .pillar .pillar-title{font-size:15px;font-weight:800;margin-bottom:7px}
.who .pillar p{font-size:12.5px;color:rgba(255,255,255,.72)}
.who .teamlbl{text-align:center;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#fff;margin-bottom:18px}
.team{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.team .m{text-align:center}
.team .m img{width:78px;height:78px;border-radius:50%;object-fit:cover;margin:0 auto 9px;border:3px solid rgba(255,255,255,.35)}
.team .m b{display:block;font-size:12.5px;font-weight:800}
.team .m span{font-size:11px;color:rgba(255,255,255,.62)}
.page-body .team-light{margin:24px 0 10px}
.team-light .m img{border-color:var(--gold)}
.team-light .m b a{color:var(--ink);text-decoration:none;font-weight:800}
.team-light .m b a:hover{color:var(--gold)}
.team-light .m span{color:var(--muted)}

/* ============================================================
 * FOOTER
 * ============================================================ */
footer.site{background:#0d0d0d;color:#b0b0b0;padding:44px 0 26px}
footer.site .ftop{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1px solid rgba(255,255,255,.1)}
footer.site .logo{color:#fff;font-size:30px;height:auto;margin-bottom:14px}
footer.site .logo img{height:39px;margin-bottom:14px}
footer.site p.desc{font-size:13px;color:#838383;max-width:38ch}
.social{display:flex;gap:9px;margin-top:14px}
.social a{width:34px;height:34px;border-radius:6px;background:rgba(255,255,255,.08);display:grid;place-items:center;font-size:13px;color:#fff;font-weight:800}
.social a:hover{background:#fff;color:#111}
footer.site .cols{display:flex;gap:54px;flex-wrap:wrap}
footer.site h5{color:#fff;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px}
footer.site ul{list-style:none}
footer.site li{margin-bottom:8px}
footer.site li a{font-size:13px;color:#b0b0b0}
footer.site li a:hover{color:#fff}
footer.site .fine{font-size:11.5px;color:#757575;padding-top:18px;line-height:1.7}
footer.site .fine a{color:#b0b0b0;text-decoration:underline}

/* ============================================================
 * CATEGORY / ARCHIVE
 * ============================================================ */
.breadcrumb-wrap{padding-top:18px}
.breadcrumb{font-size:13px;color:var(--muted);font-weight:600;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.breadcrumb a{color:var(--link)}
.breadcrumb a:hover{text-decoration:underline}
.cat-hero{padding:12px 0 14px}
.cat-hero h1{font-size:46px;font-weight:700;letter-spacing:-1.2px;line-height:1.05;text-transform:uppercase;margin-bottom:12px}
.cat-intro{font-size:17px;font-weight:400;color:var(--ink-soft);width:100%;line-height:1.5;margin-bottom:18px}
.cat-subnav{display:flex;flex-wrap:wrap;gap:6px 18px}
.cat-subnav a{font-size:14px;font-weight:700;color:var(--link)}
.cat-subnav a:hover{text-decoration:underline}
/* Related categories: noi cheo sang nhom cha khac cho danh muc chong lan (Tablets,
   Gaming Headsets, Portable Power Stations). Dung token brand, khong hardcode hex. */
.cat-related-title{font-size:var(--fs-sechead);font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding-top:18px;margin-bottom:13px;border-top:2px solid var(--gold)}
.cat-related-list{display:flex;flex-wrap:wrap;gap:10px}
.cat-related-list a{display:inline-block;padding:9px 16px;border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:700;color:var(--ink);line-height:1.25}
.cat-related-list a:hover{border-color:var(--gold);color:var(--gold)}
.guide-body{width:100%;font-size:16px;color:var(--ink-soft);line-height:1.6}
.guide-body p{margin-bottom:14px}
.guide-body h3{font-size:var(--fs-h3);font-weight:700;color:var(--ink);margin:22px 0 8px}

/* Load more (leaf category, infinite scroll) */
.loadmore{text-align:center;padding:28px 0 4px}
.btn-loadmore{font-family:inherit;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--navy);background:#fff;border:2px solid var(--navy);border-radius:6px;padding:12px 34px;cursor:pointer}
.btn-loadmore:hover{background:var(--navy);color:#fff}
.btn-loadmore[disabled]{opacity:.5;cursor:default}
.loadmore-note{font-size:13px;color:var(--muted);margin-top:12px}

/* Tag / Archive / Author (kế thừa leaf) */
.author-hero{display:flex;gap:24px;align-items:flex-start;padding:16px 0 18px}
.author-avatar{width:112px;height:112px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--gold)}
.author-info{flex:1;min-width:0}
.author-info h1{font-size:38px;font-weight:700;letter-spacing:-1px;text-transform:uppercase;line-height:1.05;margin-bottom:4px}
.author-role{font-size:15px;color:var(--ink);margin-bottom:10px}
.author-meta{display:flex;gap:24px;margin-top:12px;font-size:14px;color:var(--muted)}
.author-meta b{color:var(--ink)}

/* Static PAGE */
.page-body{font-size:16px;color:var(--ink-soft);line-height:1.65;width:100%}
.page-body h2{font-size:var(--fs-h2);font-weight:700;color:var(--ink);letter-spacing:-.3px;margin:28px 0 10px}
.page-body h3{font-size:var(--fs-h3);font-weight:700;color:var(--ink);margin:22px 0 8px}
.page-body p{margin-bottom:14px}
.page-body ul,.page-body ol,.guide-body ul,.guide-body ol{margin:0 0 16px;padding-left:24px}
.page-body ul,.guide-body ul{list-style:disc}
.page-body ol,.guide-body ol{list-style:decimal}
.page-body li,.guide-body li{margin-bottom:7px}
.page-body li::marker,.guide-body li::marker{color:var(--muted)}
.page-body ul ul,.page-body ol ol,.page-body ul ol,.page-body ol ul{margin:6px 0}
.page-body a{color:var(--link);font-weight:700;text-decoration:underline}
.page-body a:hover{color:var(--gold)}
article.page{max-width:668px;margin:0 auto}
article.page h1{font-size:46px;font-weight:700;letter-spacing:-1.2px;line-height:1.05;text-transform:uppercase;margin-bottom:12px}

/* Search box (search + 404) */
.results-search{display:flex;align-items:center;gap:10px;max-width:560px;margin:6px 0 14px;border:1px solid #d4d4d4;border-radius:8px;padding:0 6px 0 14px;color:var(--muted)}
.results-search input{flex:1;border:none;outline:none;font:inherit;color:var(--ink);padding:12px 0;background:none}
.results-search button{border:none;background:var(--gold);color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.03em;font-size:12px;padding:9px 18px;border-radius:6px;cursor:pointer}
.results-search button:hover{background:var(--gold-deep);color:#fff}

/* 404 */
.err-404{text-align:center;padding:40px 0 30px}
.err-inner{max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.err-code{font-size:120px;font-weight:800;line-height:1;color:var(--gold);letter-spacing:-4px}
.err-404 h1{font-size:34px;font-weight:700;text-transform:uppercase;letter-spacing:-.6px;margin:6px 0 10px}
.err-msg{font-size:16px;color:var(--ink-soft);line-height:1.5;margin-bottom:20px}
.err-404 .results-search{margin:0 auto 18px;width:100%}
.err-popular{margin-top:22px;font-size:14px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:center;align-items:center}
.err-popular a{color:var(--link);font-weight:700}

/* ============================================================
 * POST DETAIL (roundup / guide / review)
 * ============================================================ */
.post-hero{padding-top:6px;padding-bottom:2px}
.post-hero h1{font-size:42px;font-weight:700;letter-spacing:-1px;line-height:1.06;margin-bottom:12px}
.post-dek{font-size:18px;font-weight:400;color:var(--ink-soft);line-height:1.5;margin-bottom:16px}
.post-meta{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:13px;color:var(--muted);padding:12px 0}
.post-meta .author{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink)}
.post-meta .author a{color:var(--ink);text-decoration:none}
.post-meta .author a:hover{color:var(--gold-deep);text-decoration:underline}
.author-avs{display:inline-flex;flex:none}
.author-avs a{display:block;line-height:0}
.author-avs img{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid var(--bg);display:block}
.author-avs a+a{margin-left:-12px}
.author-avs a:hover{position:relative;z-index:2}
.post-meta .m-item{font-family:Georgia,'Times New Roman',serif}
.post-meta .m-share{margin-left:auto;display:flex;gap:12px;font-size:16px;color:var(--ink-soft)}
.post-figure{position:relative;margin:20px 0 0}
.post-feat{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.post-cap{position:absolute;right:0;bottom:0;background:color-mix(in srgb,var(--navy) 72%,transparent);color:#fff;font-size:11px;font-weight:500;letter-spacing:.02em;padding:5px 10px;max-width:70%;text-align:right;line-height:1.3}
.post-layout{display:grid;grid-template-columns:1fr 290px;gap:44px;align-items:start}
.post-aside{position:sticky;top:130px}
.rd-toc{border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.rd-toc h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:8px}
.rd-toc a{display:block;font-size:14px;font-weight:600;color:var(--ink-soft);padding:6px 0;border-bottom:1px solid var(--line)}
.rd-toc a:last-child{border-bottom:none}
.rd-toc a:hover{color:var(--link)}

/* ASIN compare table */
.compare-scroll{overflow-x:auto;margin:6px 0 28px}
.compare-table{width:100%;min-width:560px;border-collapse:collapse;font-size:14px}
.compare-table th{background:var(--navy);color:#fff;text-align:left;padding:11px 12px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.compare-table td{border-bottom:1px solid var(--line);padding:11px 12px;vertical-align:middle}
.compare-table .ct-award{font-size:11px;font-weight:800;color:var(--gold-deep);text-transform:uppercase}
.page-body .compare-table a{text-decoration:none;font-weight:700}
.compare-table .ct-prod{display:flex;align-items:center;gap:12px;font-weight:700;color:var(--ink)}
.compare-table .ct-prod img{width:52px;height:52px;object-fit:cover;flex:none}
.compare-table .ct-price{font-weight:900;color:var(--sale);white-space:nowrap}
.compare-table .ct-buy{display:inline-block;background:var(--navy);color:#fff;font-weight:800;font-size:12px;text-transform:uppercase;padding:8px 16px;border-radius:5px}
.compare-table .ct-buy:hover{background:#2b2b2b}

/* product card */
.prod{border:1px solid var(--line);border-radius:10px;padding:22px;margin:0 0 22px;position:relative}
.prod .rank{position:absolute;top:-14px;left:22px;width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px}
.prod-top{display:grid;grid-template-columns:170px 1fr auto;gap:22px;align-items:start}
.prod .p-img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:#fff}
.prod .award{display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#fff;background:var(--gold);padding:4px 10px;border-radius:4px;margin-bottom:9px}
.prod h3{font-size:var(--fs-card);font-weight:700;letter-spacing:-.2px;margin-bottom:6px}
.prod .p-rating{font-size:13px;color:var(--muted);margin-bottom:10px}
.prod .p-desc{font-size:15px;color:var(--ink-soft);line-height:1.5;margin:0}
.prod .p-price{font-size:22px;font-weight:900;white-space:nowrap}
.prod .p-old{font-size:14px;font-weight:600;color:var(--muted);text-decoration:line-through}
.buy-btns{display:flex;flex-direction:column;gap:8px;min-width:168px}
.buy-btns a{background:var(--navy);color:#fff;font-weight:700;font-size:14px;text-align:center;padding:11px;border-radius:6px;text-decoration:none}
.buy-btns a.alt{background:#fff;color:var(--navy);border:1px solid var(--navy)}
.buy-btns a:hover{opacity:.9}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.pros h4,.cons h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
.pros h4{color:var(--good)} .cons h4{color:var(--sale)}
.pros ul,.cons ul{list-style:none;margin:0}
.pros li,.cons li{font-size:14px;color:var(--ink-soft);margin-bottom:6px;padding-left:20px;position:relative;line-height:1.4}
.pros li::before{content:'\2713';position:absolute;left:0;color:var(--good);font-weight:800}
.cons li::before{content:'\2715';position:absolute;left:0;color:var(--sale);font-weight:800}

/* FAQ accordion */
.faq{margin-bottom:8px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;font-size:17px;font-weight:700;color:var(--ink);padding:15px 30px 15px 0;cursor:pointer;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:2px;top:12px;font-size:22px;font-weight:400;color:var(--muted)}
.faq details[open] summary::after{content:'\2212'}
.faq details p{font-size:15px;color:var(--ink-soft);line-height:1.6;padding:0 0 16px}

/* author box */
.author-box{display:flex;gap:18px;border:1px solid var(--line);border-radius:10px;padding:20px;align-items:flex-start;margin-bottom:12px}
.author-box img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none;border:3px solid var(--gold);display:block}
.author-box b{font-size:17px;font-weight:700;display:block;margin-bottom:4px}
.author-box b a{color:var(--ink);text-decoration:none}
.author-box b a:hover{color:var(--gold-deep)}
.author-box p{font-size:14px;color:var(--ink-soft);line-height:1.55;margin:0}

/* Buying guide / how-to callouts */
.takeaways{background:var(--panel);border-left:3px solid var(--gold);border-radius:0 8px 8px 0;padding:18px 22px;margin:6px 0 24px}
.takeaways h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--gold-deep);margin-bottom:10px}
.takeaways ul{list-style:none;margin:0}
.takeaways li{font-size:15px;color:var(--ink-soft);line-height:1.5;padding-left:24px;position:relative;margin-bottom:8px}
.takeaways li:last-child{margin-bottom:0}
.takeaways li::before{content:'\2713';position:absolute;left:0;color:var(--good);font-weight:800}
.guide-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;background:var(--navy);color:#fff;border-radius:10px;padding:22px 24px;margin:8px 0 26px}
.guide-cta .gc-t{font-size:18px;font-weight:800}
.guide-cta .gc-d{font-size:14px;color:rgba(255,255,255,.75);margin-top:3px}
.page-body .guide-cta a.gc-btn{background:#fff;color:#111;font-weight:800;font-size:14px;padding:12px 22px;border-radius:6px;white-space:nowrap;text-decoration:none;flex:none}
.page-body .guide-cta a.gc-btn:hover{background:#e4e4e4;color:#111}

/* sidebar related + infinite up-next */
.rd-related{margin-top:20px;border:1px solid var(--line);border-radius:8px;padding:16px 18px}
.rd-related h4{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:10px}
.rel-item{display:flex;gap:11px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.rel-item:last-child{border-bottom:none}
.rel-item img{width:62px;height:46px;object-fit:cover;flex:none}
.rel-item span{font-size:14px;font-weight:700;line-height:1.3;color:var(--ink)}
.rel-item:hover span{color:var(--gold-deep)}
.up-next{text-align:center;border-top:2px solid var(--line);margin:28px 0 4px}
.up-next span{position:relative;top:-12px;background:var(--bg);padding:0 18px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
/* Up-next infinite feed: bài kế trôi vào liền mạch */
.up-next-sentinel{height:1px;margin:0}
.pf-next-block .up-next{margin-top:40px}
.pf-article{display:block}
.infinite-note{font-size:14px;color:var(--ink-soft);background:var(--panel);border-left:3px solid var(--gold);padding:12px 16px;margin-top:10px;line-height:1.5}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */
@media(max-width:980px){
  /* Nav ngang khong du cho tu day tro xuong (can 809px), chuyen sang drawer hamburger. */
  .navbar{display:none}.hamburger{display:flex}
  /* Tu 980 tro xuong la bo cuc cham, chip danh muc lien quan can tap target >=44px. */
  .cat-related-list a{padding:12px 16px}
  .cat-related-list{gap:9px}
  .hero{grid-template-columns:1fr;gap:26px}
  .grid3,.card-grid{grid-template-columns:repeat(2,1fr)}
  .compact-list{grid-template-columns:1fr}
  .catblock .cols{grid-template-columns:1fr;gap:22px}
  .clist{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:14px}
  .who .pillars{grid-template-columns:1fr}.team{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:900px){
  .post-layout{grid-template-columns:1fr}
  .post-aside{display:none}
}
@media(max-width:640px){
  .searchpill{display:none}.m-searchbtn{display:flex}
  .topbar .wrap{gap:12px;height:60px}.logo{font-size:24px;height:auto;line-height:1}
  .mobile-nav{max-height:calc(100vh - 60px)}
  @supports(height:100dvh){.mobile-nav{max-height:calc(100dvh - 60px)}}
  .grid3,.card-grid{grid-template-columns:1fr}.news form{margin-left:0;width:100%}.news input{flex:1}
  /* Mobile: hạ NGUYÊN THANG CHỮ bằng cách override token, giữ đúng cấp bậc
     h2 > h3 nội dung > tên sản phẩm > card lưới. Không sửa px trong từng rule. */
  :root{--fs-h2:22px;--fs-h3:19px;--fs-card-lg:20px;--fs-card:18px;--fs-card-sm:16px;--fs-sechead:19px}
  .catblock .ch .cat-title{font-size:28px}
  .team{grid-template-columns:repeat(2,1fr)}
  .cat-hero h1{font-size:32px}
  .author-hero{flex-direction:column;gap:14px}.author-info h1{font-size:30px}
  article.page h1{font-size:32px}
  .post-hero h1{font-size:30px}
  .prod-top{grid-template-columns:1fr}
  .pros-cons{grid-template-columns:1fr}
}
@media(max-width:520px){.guide-cta a.gc-btn{width:100%;text-align:center}}

/* ============================================================
 * LAT Score info tooltip (tái dùng plugin .acms-tooltip, cho câu dài xuống dòng)
 * ============================================================ */
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.acms-tooltip--pf{margin-left:5px;color:var(--muted);font-size:.9em;vertical-align:baseline}
.acms-tooltip--pf .bi{font-size:.95em;line-height:1}
.acms-tooltip--pf .acms-tooltip__content{white-space:normal;width:max-content;max-width:min(260px,calc(100vw - 32px));text-align:left;line-height:1.5;font-weight:400;text-transform:none;letter-spacing:0;color:var(--bg);background:var(--ink);padding:10px 12px}
/* click/tap giữ mở (JS plugin toggle .is-active) -> link trong tooltip bấm được + hoạt động trên mobile */
.acms-tooltip--pf.is-active .acms-tooltip__content{opacity:1;visibility:visible}
/* Header cột LAT Score: (1) mở XUỐNG dưới tránh .compare-scroll clip overflow trên;
   (2) căn PHẢI để tooltip bung sang trái, không tràn mép phải viewport (icon nằm sát phải trên mobile) */
.acms-tooltip--pf.acms-tooltip--down .acms-tooltip__content{top:calc(100% + 8px);bottom:auto;left:auto;right:0;transform:none}
/* Header nền đen -> icon trắng cho nổi bật (chỉ --down = header bảng compare) */
.acms-tooltip--pf.acms-tooltip--down{color:var(--bg)}
/* LẬT XUỐNG ĐỘNG (pf-tooltip.js gắn khi phía trên không đủ chỗ, thêm 2026-09-03).
   Mặc định plugin luôn bung LÊN (bottom:100%), nên ⓘ nằm gần đỉnh màn hình thì
   tooltip trào ra ngoài viewport và mất mấy dòng đầu (đo được top:-14px khi icon
   cách đỉnh 140px). Chỉ đổi trục DỌC, giữ nguyên căn giữa ngang; KHÔNG dùng lại
   --down vì class đó còn đổi căn phải + tô icon trắng (icon sẽ tàng hình trên nền trắng). */
.acms-tooltip--pf.acms-tooltip--flipdown .acms-tooltip__content{top:calc(100% + 8px);bottom:auto}
/* Trang compare: label "LAT Score" nằm sát TRÁI -> căn trái để tooltip bung sang phải, không tràn mép trái */
.acms-cmp__label .acms-tooltip--pf .acms-tooltip__content{left:0;right:auto;transform:none}
.acms-tooltip--pf .acms-tooltip__content a{color:var(--bg);text-decoration:underline}
.acms-tooltip--pf .acms-tooltip__content strong{font-weight:800}
/* Dòng "Updated: {date}" của ASIN (dưới giá) */
.acms-list__update{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);position:relative}
.acms-list__update .bi-clock-history{font-size:.95em;line-height:1}
.acms-list__update .acms-tooltip--pf{margin-left:2px}
/* Desktop: icon nằm cột phải card -> căn phải (bung sang trái) tránh đè sidebar; mobile giữ căn giữa */
@media(min-width:761px){.acms-list__update .acms-tooltip--pf .acms-tooltip__content{left:auto;right:0;transform:none}}

/* ===== Trang /coupons/ (template page-coupons.php) =====================================
   Feed coupon cần trọn khổ .wrap chứ không phải cột chữ 668px của trang tĩnh. Dải H1 để nền
   trắng, dải feed nền --panel để card trắng của plugin nổi lên (đúng tương quan nền/card đo
   được ở layout tham khảo, màu thì vẫn là token brand). */
.coupons-head{padding:28px 0 18px}
.coupons-head h1{font-size:46px;font-weight:700;letter-spacing:-1.2px;line-height:1.05;text-transform:uppercase;margin:0}
.coupons-feed-band{background:var(--panel);padding:24px 0 44px}
.coupons-body .acms-coupons{max-width:none}
@media(max-width:640px){
  .coupons-head{padding:20px 0 12px}
  .coupons-head h1{font-size:32px;letter-spacing:-.6px}
  .coupons-feed-band{padding:16px 0 32px}
  /* Lề hẹp lại cho riêng dải feed: card giữ nguyên lưới 3 cột như bản tham khảo nên mỗi px
     lề ăn thẳng vào bề ngang cột tiêu đề. */
  .coupons-feed-band .wrap{padding:0 12px}
}

/* ===== Trang store (single-store.php) ==================================================
   Bố cục 2 cột: cột chính là coupon + bảng + phần biên tập, cột phải là số liệu + FAQ.
   Dải H1 nền trắng, dải nội dung nền --panel để card trắng của plugin nổi lên, cùng công thức
   với trang /coupons/. */
.store-head{padding:24px 0 18px}
.store-head .breadcrumb{margin-bottom:14px}
.store-head-row{display:flex;align-items:center;gap:20px}
.store-logo{width:96px;height:96px;object-fit:contain;border:1px solid var(--line);border-radius:10px;background:#fff;padding:8px;flex:none}
/* Huy hiệu chữ cái đầu khi store chưa có logo. Kế thừa hộp của .store-logo (cùng kích thước,
   viền, bo góc) nên chỉ cần khai phần căn chữ và màu, không lặp lại thuộc tính hộp. */
.store-logo-mono{display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:800;line-height:1;color:var(--gold);background:var(--panel);padding:0;user-select:none}
/* Huy hiệu chữ cái đầu ở feed /coupons/, do mu-plugin pf-coupon-logo-fallback.php chèn.
   GIỮ class -fallback của plugin nên hộp (128px, 72px ở mobile, nền, bo góc, padding) thừa hưởng
   sẵn, ở đây chỉ khai phần chữ. Cùng màu brand với huy hiệu trang store để hai trang khớp nhau. */
.acms-coupons-row-logo-mono{font-size:54px;font-weight:800;line-height:1;color:var(--gold);user-select:none}
.store-head-text h1{font-size:38px;font-weight:700;letter-spacing:-.8px;line-height:1.1;margin:0}
.store-head-sub{margin:6px 0 0;font-size:14px;color:var(--muted)}
.store-band{background:var(--panel);padding:24px 0 48px}
.store-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}
.store-main{min-width:0}
.store-side{min-width:0;position:sticky;top:16px}
.store-empty{color:var(--muted);font-style:italic}
/* Khối coupon hết hạn: <details> thuần HTML, mặc định đóng. */
.store-expired{margin-bottom:32px}
.store-expired>summary{cursor:pointer;font-weight:700;font-size:14px;color:var(--ink);padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:8px;list-style:none}
.store-expired>summary::-webkit-details-marker{display:none}
.store-expired>summary::after{content:" ▾";color:var(--muted)}
.store-expired[open]>summary::after{content:" ▴"}
.store-expired>summary:hover{color:var(--gold)}
.store-expired .acms-store-offers{margin-top:14px}
.store-visit-domain{margin:0 0 10px;font-size:13px;color:var(--muted);word-break:break-all}
/* Nút sang store: tái dùng .acms-coupons-btn nhưng ở đây là nút đơn, không có chip code nấp sau
   nên trả về full width và bo đủ 4 góc. */
.store-visit .store-visit-btn{width:100%;border-radius:8px}
.store-side .author-box{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}
@media(max-width:980px){
  .store-grid{grid-template-columns:1fr;gap:24px}
  .store-side{position:static}
}
@media(max-width:640px){
  .store-head{padding:18px 0 12px}
  .store-head-row{gap:14px}
  .store-logo{width:64px;height:64px}
  .store-logo-mono{font-size:26px}
  .acms-coupons-row-logo-mono{font-size:30px}
  .store-head-text h1{font-size:26px;letter-spacing:-.4px}
  .store-band{padding:16px 0 32px}
}

/* ===== Mục "Coupons" trên thanh điều hướng =============================================
   Nav nền đỏ brand chữ trắng, nên muốn mục này nổi lên thì đảo màu: nền trắng, chữ đỏ. Vẫn
   trong đúng bảng màu đen/trắng/đỏ, không thêm màu mới. Icon tô theo currentColor nên tự đổi
   màu cùng chữ khi hover, không cần rule màu riêng. */
.navbar .right a.nav-coupons{display:inline-flex;align-items:center;gap:7px;margin:6px 0 6px 10px;padding:0 14px;line-height:32px;color:var(--gold);background:#fff;border-radius:999px;font-weight:800}
.navbar .right a.nav-coupons:hover{color:#fff;background:var(--gold-deep)}
.nav-coupons-icon{width:17px;height:17px;flex:none}
/* Drawer mobile: nền tối, nên giữ chữ trắng và chỉ tô icon đỏ cho bắt mắt. */
.mobile-nav a.nav-coupons{display:flex;align-items:center;gap:9px}
.mobile-nav a.nav-coupons .nav-coupons-icon{width:19px;height:19px;color:var(--gold)}
@media(max-width:980px){
  .navbar .right a.nav-coupons{margin-left:6px;padding:0 11px}
}

/* ---------------------------------------------------------------------------
   Related Guides (khối cuối bài, render động bởi mu-plugin pf-related.php)
   Dùng token brand ở :root, KHÔNG hardcode hex (rule F3).
   --------------------------------------------------------------------------- */
.related-guides{margin:40px 0 8px;padding-top:24px;border-top:3px solid var(--gold)}
.related-guides-title{font-size:var(--fs-sechead);margin:0 0 16px}
.related-guides-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 28px}
.related-guides-list li{padding-left:16px;position:relative;line-height:1.45}
.related-guides-list li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.related-guides-list a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.related-guides-list a:hover{color:var(--gold-deep)}

@media (max-width:760px){
  .related-guides{margin-top:32px}
  .related-guides-list{grid-template-columns:1fr;gap:4px}
  /* Ngón tay cần vùng chạm ~44px, chữ trần chỉ cao 23px. Nới bằng padding trên link
     chứ không bằng gap, để vùng bấm to ra thật chứ không chỉ giãn khoảng trắng. */
  .related-guides-list a{display:block;padding:11px 0}
  .related-guides-list li::before{top:1.35em}
}
@media (max-width:480px){
  .related-guides-list li{padding-left:14px}
}

/* ============================================================
 * PET ALMANAC UI (2026-10-29): header, footer, trang chủ.
 * Class tiền tố pa- để không đụng CSS cũ của LAT Review. Màu chỉ lấy từ token :root.
 * Breakpoint: 1080 / 760 / 480 (rule H4).
 * ============================================================ */
body{font-family:var(--font);color:var(--pa-ink);background:var(--pa-bg)}
.pa-wrap{max-width:var(--maxw);margin:0 auto;padding-left:24px;padding-right:24px}
.pa-ic{width:1em;height:1em;flex:none;display:inline-block;vertical-align:middle}

/* Logo */
.pa-logo{display:inline-flex;align-items:center;gap:9px;line-height:1;text-decoration:none;flex:none}
.pa-logo-mark{width:46px;height:46px;flex:none}
.pa-logo-text{display:flex;flex-direction:column}
.pa-logo-word{display:flex;align-items:flex-start;gap:3px;font-size:30px;font-weight:800;letter-spacing:-1px;color:var(--pa-green)}
.pa-logo-word span{color:var(--pa-ink)}
.pa-logo-word .pa-ic{font-size:20px;margin-top:-2px;color:var(--pa-green)}
.pa-logo-tag{font-size:11.5px;font-weight:600;color:var(--pa-muted);margin-top:5px;letter-spacing:.01em}

/* Header */
.pa-head{position:sticky;top:0;z-index:50;background:var(--pa-white);border-bottom:1px solid var(--pa-line)}
body:not(.home) .pa-head{margin-bottom:28px} /* trang trong: chừa khoảng dưới header (trước đây do dải ftc-bar tạo ra) */
.pa-head-row{display:flex;align-items:center;gap:36px;height:78px}
.pa-nav{display:flex;gap:28px;margin-left:auto;font-size:15px;font-weight:600}
.pa-nav a{color:var(--pa-ink-2);text-decoration:none;padding:27px 0;border-bottom:3px solid transparent}
.pa-nav a:hover{color:var(--pa-green)}
.pa-nav a.is-on{color:var(--pa-green);border-bottom-color:var(--pa-green)}
.pa-icon-btn{width:42px;height:42px;border-radius:50%;border:1px solid var(--pa-line);display:grid;place-items:center;cursor:pointer;color:var(--pa-ink);font-size:19px;flex:none}
.pa-icon-btn:hover{border-color:var(--pa-green);color:var(--pa-green)}
.pa-menu-btn{display:none}
.pa-menu-btn .pa-close{display:none}
.pa-search-row,.pa-mnav{display:none;border-top:1px solid var(--pa-line);background:var(--pa-white)}
#pa-search-toggle:checked~.pa-search-row{display:block}
#pa-nav-toggle:checked~.pa-mnav{display:block}
#pa-nav-toggle:checked~.pa-head-row .pa-menu-btn .pa-open{display:none}
#pa-nav-toggle:checked~.pa-head-row .pa-menu-btn .pa-close{display:block}
.pa-search-form{display:flex;align-items:center;gap:12px;padding-top:14px;padding-bottom:14px}
.pa-search-form .pa-ic{font-size:20px;color:var(--pa-muted)}
.pa-search-form input{flex:1;border:1px solid var(--pa-line);border-radius:10px;padding:11px 14px;font:inherit;font-size:15px}
.pa-search-form button,.pa-hero-search button{background:var(--pa-green);color:var(--pa-white);border:0;border-radius:9px;padding:12px 22px;font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.pa-search-form button:hover,.pa-hero-search button:hover{background:var(--pa-green-deep)}
.pa-mnav .pa-wrap{display:flex;flex-direction:column;padding-top:6px;padding-bottom:10px}
.pa-mnav a{padding:13px 0;border-bottom:1px solid var(--pa-line);font-weight:700;color:var(--pa-ink);text-decoration:none}
.pa-mnav a:last-child{border-bottom:0}

/* Hero */
.pa-home{padding-bottom:8px}
.pa-hero{position:relative;margin-top:18px;border-radius:20px;overflow:hidden;min-height:400px;display:flex;align-items:center;color:var(--pa-white);background:var(--pa-green-dark)}
.pa-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%}
.pa-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(var(--pa-hero-shade),.94) 0%,rgba(var(--pa-hero-shade),.82) 34%,rgba(var(--pa-hero-shade),.25) 62%,rgba(var(--pa-hero-shade),0) 80%)}
.pa-hero-in{position:relative;z-index:2;padding:56px 52px;max-width:640px}
.pa-eyebrow{display:block;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pa-green-line);margin:0}
.pa-hero h1{font-size:62px;font-weight:800;line-height:1.02;letter-spacing:-2px;margin:14px 0 16px;color:var(--pa-white)}
.pa-hero-text{font-size:18px;line-height:1.55;color:var(--pa-green-tint);max-width:500px;margin:0}
.pa-hero-search{margin-top:28px;display:flex;align-items:center;gap:12px;background:var(--pa-white);border-radius:12px;padding:7px 7px 7px 18px;max-width:520px;box-shadow:var(--pa-shadow-lg)}
.pa-hero-search .pa-ic{font-size:20px;color:var(--pa-muted)}
.pa-hero-search input{flex:1;border:0;outline:0;font:inherit;font-size:15px;color:var(--pa-ink);background:transparent;padding:8px 0}

/* Hàng icon tròn */
.pa-circles{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 28px;padding:30px 0 12px}
.pa-circle{display:flex;flex-direction:column;align-items:center;gap:10px;width:120px;text-decoration:none;color:var(--pa-ink);font-weight:700;font-size:14.5px;text-align:center}
.pa-circle-ph{width:104px;height:104px;max-width:100%;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--pa-green-tint);box-shadow:0 0 0 4px var(--pa-white),0 0 0 5px var(--pa-line),var(--pa-shadow-sm);transition:transform .2s}
.pa-circle:hover .pa-circle-ph{transform:translateY(-3px)}
.pa-circle-ph img{width:100%;height:100%;object-fit:cover}
.pa-circle-ph .pa-ic{font-size:46px;color:var(--pa-green)}
.pa-circle-ph.is-blue{background:var(--pa-fish-tint)}.pa-circle-ph.is-blue .pa-ic{color:var(--pa-fish)}
.pa-circle-ph.is-orange{background:var(--pa-fix-tint)}.pa-circle-ph.is-orange .pa-ic{color:var(--pa-fix)}

/* Banner chuyên mục */
.pa-banners{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding-top:22px}
.pa-banner:only-child{grid-column:1 / -1}
.pa-banner{position:relative;border-radius:18px;overflow:hidden;min-height:250px;display:flex;align-items:center;color:var(--pa-white);text-decoration:none}
.pa-banner-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s}
.pa-banner:hover .pa-banner-img{transform:scale(1.03)}
.pa-banner::before{content:"";position:absolute;inset:0;z-index:1}
.pa-banner.is-fish::before{background:linear-gradient(90deg,rgba(var(--pa-fish-shade),.95) 10%,rgba(var(--pa-fish-shade),.7) 48%,rgba(var(--pa-fish-shade),0) 85%)}
.pa-banner.is-reptile::before{background:linear-gradient(90deg,rgba(var(--pa-rep-shade),.95) 10%,rgba(var(--pa-rep-shade),.7) 48%,rgba(var(--pa-rep-shade),0) 85%)}
.pa-banner-in{position:relative;z-index:2;padding:32px;max-width:66%;display:flex;flex-direction:column;align-items:flex-start}
.pa-banner .pa-eyebrow{color:var(--pa-white);opacity:.85}
.pa-banner-title{font-size:30px;font-weight:800;line-height:1.12;letter-spacing:-.6px;margin:10px 0}
.pa-banner-text{font-size:15px;line-height:1.5;opacity:.92}
.pa-btn-white{display:inline-flex;align-items:center;gap:8px;margin-top:18px;background:var(--pa-white);color:var(--pa-ink);font-weight:700;font-size:14px;padding:11px 18px;border-radius:9px}

/* Section shell */
.pa-sec-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:44px 0 16px}
.pa-sec-head h2{font-size:28px;font-weight:800;letter-spacing:-.7px;margin:0}
.pa-sec-head a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--pa-ink-2);text-decoration:none}
.pa-badge,.pa-tag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;line-height:1.2}
.pa-badge{padding:4px 9px;color:var(--pa-white)}
.pa-badge.is-fish{background:var(--pa-fish)}.pa-badge.is-rep{background:var(--pa-rep)}.pa-badge.is-fix{background:var(--pa-fix)}
.pa-tag{padding:3px 8px}
.pa-tag.is-fish{background:var(--pa-fish-tint);color:var(--pa-fish)}.pa-tag.is-rep{background:var(--pa-rep-tint);color:var(--pa-rep)}.pa-tag.is-fix{background:var(--pa-fix-tint);color:var(--pa-fix-ink)}
.pa-date{display:block;font-size:13px;color:var(--pa-muted);margin-top:8px}

/* Thẻ bài */
.pa-feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.pa-card{display:flex;flex-direction:column;border:1px solid var(--pa-line);border-radius:var(--pa-radius);overflow:hidden;background:var(--pa-white);text-decoration:none;color:var(--pa-ink);transition:box-shadow .2s}
.pa-card:hover{box-shadow:var(--pa-shadow-sm)}
.pa-card-img{position:relative;display:block;height:150px;background:var(--pa-green-tint)}
.pa-card-img img{width:100%;height:100%;object-fit:cover}
.pa-card-img .pa-badge{position:absolute;left:12px;top:12px}
.pa-card-body{display:block;padding:14px 16px 18px}
.pa-card-title{display:block;font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.2px}
.pa-card.is-fix .pa-card-img{height:120px}
.pa-card.is-fix .pa-card-title{font-size:15.5px;margin-top:7px}

/* Latest + cột phải */
.pa-two{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;margin-top:44px;align-items:start}
.pa-two .pa-sec-head{margin-top:0}
.pa-list{border:1px solid var(--pa-line);border-radius:var(--pa-radius);padding:6px 20px}
.pa-row{display:grid;grid-template-columns:104px minmax(0,1fr) 18px;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--pa-line);text-decoration:none;color:var(--pa-ink)}
.pa-row:last-child{border-bottom:0}
.pa-two.is-single{grid-template-columns:minmax(0,1fr)}
.pa-two.is-single .pa-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px}
.pa-two.is-single .pa-row:nth-last-child(2):nth-child(odd){border-bottom:0}
.pa-row-img{width:104px;height:64px;object-fit:cover;border-radius:8px}
.pa-row-title{display:block;font-size:15.5px;font-weight:700;line-height:1.3;margin-top:5px}
.pa-row:hover .pa-row-title{color:var(--pa-green)}
.pa-row .pa-date{margin-top:3px;font-size:12.5px}
.pa-row>.pa-ic{color:var(--pa-muted);font-size:18px}
.pa-side{display:flex;flex-direction:column;gap:20px}
.pa-popular{background:var(--pa-green-soft);border-radius:var(--pa-radius);padding:20px}
.pa-popular h2,.pa-calc h2{display:flex;align-items:center;gap:8px;font-size:21px;font-weight:800;margin:0 0 10px}
.pa-popular h2 .pa-ic{color:var(--pa-fix)}
.pa-pop{display:grid;grid-template-columns:22px 78px minmax(0,1fr);gap:12px;align-items:center;background:var(--pa-white);border-radius:10px;padding:8px 12px 8px 10px;margin-top:8px;text-decoration:none;color:var(--pa-ink)}
.pa-pop b{font-size:14px;color:var(--pa-ink-2);text-align:center}
.pa-pop-img{width:78px;height:44px;object-fit:cover;border-radius:6px}
.pa-pop span{font-size:13.5px;font-weight:600;line-height:1.3}
.pa-pop:hover span{color:var(--pa-green)}
.pa-calc{background:var(--pa-green-tint);border:1px solid var(--pa-green-line);border-radius:var(--pa-radius);padding:20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}
.pa-calc h2{font-size:20px;margin-bottom:0}
.pa-calc h2 .pa-ic{color:var(--pa-green)}
.pa-calc p{font-size:13.5px;color:var(--pa-ink-2);margin:6px 0 0;line-height:1.45}
.pa-btn-line{display:inline-flex;align-items:center;gap:6px;margin-top:12px;border:1.5px solid var(--pa-green);color:var(--pa-green);font-weight:700;font-size:14px;padding:8px 14px;border-radius:9px;text-decoration:none}
.pa-btn-line:hover{background:var(--pa-green);color:var(--pa-white)}
.pa-calc-demo{background:var(--pa-white);border-radius:10px;padding:12px 14px;font-size:12px;color:var(--pa-muted);box-shadow:var(--pa-shadow-sm);min-width:130px}
.pa-calc-demo b{display:block;font-size:24px;color:var(--pa-green);margin-top:2px}

/* Fix a Problem: hàng trượt ngang */
.pa-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 72px)/5);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:thin}
.pa-track .pa-card{scroll-snap-align:start}

/* Dải cam kết */
.pa-trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:44px}
.pa-trust-item{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;border:1px solid var(--pa-line);border-radius:var(--pa-radius);padding:18px}
.pa-trust-item>.pa-ic{font-size:36px;color:var(--pa-green);stroke-width:1.8}
.pa-trust-item b{font-size:15px;font-weight:800}
.pa-trust-item p{font-size:13px;color:var(--pa-muted);margin:3px 0 0;line-height:1.4}

/* Footer */
.pa-foot{margin-top:40px;border-top:1px solid var(--pa-line);background:var(--pa-green-soft)}
.pa-foot-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:40px;padding-top:34px;padding-bottom:24px}
.pa-foot-brand p{margin:14px 0 0;max-width:340px;font-size:14px;line-height:1.6;color:var(--pa-ink-2)}
.pa-foot-col{display:flex;flex-direction:column;gap:9px;font-size:13.5px;font-weight:600}
.pa-foot-col h2{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pa-muted)}
.pa-foot-col a{color:var(--pa-ink-2);text-decoration:none}
.pa-foot-col a.is-child{padding-left:12px;font-weight:500}
.pa-foot-col a:hover{color:var(--pa-green)}
.pa-foot-note{border-top:1px solid var(--pa-line);padding-top:14px;padding-bottom:22px;font-size:12px;color:var(--pa-muted)}
.pa-foot-note p{margin:0 0 4px}

/* ~1080 */
@media (max-width:1080px){
  .pa-nav{gap:20px;font-size:14.5px}
  .pa-hero h1{font-size:52px}
  .pa-circles{gap:22px 20px}
  .pa-feat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pa-track{grid-auto-columns:calc((100% - 36px)/3)}
  .pa-trust{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pa-foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 24px}
  .pa-foot-brand{grid-column:1/-1}
}
/* ~760 */
@media (max-width:760px){
  .pa-wrap{padding-left:16px;padding-right:16px}
  .pa-head-row{height:64px;gap:10px}
  .pa-nav{display:none}
  .pa-head-row .pa-icon-btn:first-of-type{margin-left:auto}
  .pa-menu-btn{display:grid}
  .pa-logo-word{font-size:25px}
  .pa-logo-mark{width:38px;height:38px}
  .pa-logo-tag{font-size:10.5px}
  .pa-hero{border-radius:16px;min-height:0;align-items:flex-end}
  .pa-hero-img{object-position:68% 50%}
  .pa-hero::before{background:linear-gradient(0deg,rgba(var(--pa-hero-shade),.96) 35%,rgba(var(--pa-hero-shade),.55) 75%,rgba(var(--pa-hero-shade),.2))}
  .pa-hero-in{padding:150px 20px 24px;max-width:100%}
  .pa-hero h1{font-size:38px;letter-spacing:-1.2px}
  .pa-hero-text{font-size:15.5px}
  .pa-hero-search input{min-width:0}
  .pa-hero-search button{padding:11px 14px}
  .pa-circles{gap:16px 10px;padding-top:22px}
  .pa-circle{font-size:12.5px;width:84px}
  .pa-circle-ph{width:70px;height:70px}
  .pa-circle-ph .pa-ic{font-size:32px}
  .pa-banners,.pa-two{grid-template-columns:minmax(0,1fr)}
  .pa-two.is-single .pa-list{grid-template-columns:minmax(0,1fr)}
  .pa-two.is-single .pa-row:nth-last-child(2):nth-child(odd){border-bottom:1px solid var(--pa-line)}
  .pa-banner{min-height:220px}
  .pa-banner-in{max-width:85%;padding:24px}
  .pa-banner-title{font-size:24px}
  .pa-sec-head h2{font-size:22px}
  .pa-feat{gap:12px}
  .pa-card-img{height:110px}
  .pa-card-title{font-size:14.5px}
  .pa-card-body{padding:10px 12px 14px}
  .pa-track{grid-auto-columns:72%}
  .pa-row{grid-template-columns:86px minmax(0,1fr) 14px;gap:12px}
  .pa-row-img{width:86px;height:58px}
  .pa-row-title{font-size:14px}
}
/* ~480 */
@media (max-width:480px){
  .pa-hero h1{font-size:34px}
  .pa-circle{width:calc((100% - 20px)/3)}
  .pa-trust{grid-template-columns:minmax(0,1fr)}
  .pa-calc{grid-template-columns:minmax(0,1fr)}
  .pa-calc-demo{justify-self:start}
}
@media (prefers-reduced-motion:reduce){.pa-circle-ph,.pa-banner-img{transition:none}}

/* ============================================================
 * PET ALMANAC ARTICLE (2026-10-29): trang bài viết + khối trình bày trong thân bài.
 * Khối dùng bằng class trong HTML bài viết, xem docs/article-blocks.md.
 * ============================================================ */
.pa-article-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start;padding-bottom:20px}
.pa-article-grid.is-no-side{grid-template-columns:minmax(0,1fr);max-width:1080px}
.pa-article-head{padding-bottom:22px}
.pa-article-head .breadcrumb{font-size:13px;color:var(--pa-muted);margin:0 0 14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pa-article-head .breadcrumb a{color:var(--pa-ink-2);text-decoration:none}
.pa-article-head .breadcrumb a:hover{color:var(--pa-green)}
.pa-article-head h1{font-size:44px;font-weight:800;line-height:1.1;letter-spacing:-1.2px;margin:0 0 14px;color:var(--pa-ink);text-transform:none;max-width:900px}
.pa-dek{font-size:18.5px;line-height:1.55;color:var(--pa-ink-2);margin:0 0 20px;max-width:820px}
.pa-byline-row{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.pa-byline{display:flex;align-items:center;gap:12px}
.pa-byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--pa-green-tint)}
.pa-by{display:block;font-size:14.5px;font-weight:700;color:var(--pa-ink)}
.pa-by a{color:var(--pa-ink);text-decoration:none}
.pa-by a:hover{color:var(--pa-green)}
.pa-meta{display:block;font-size:13px;color:var(--pa-muted);margin-top:2px}
.pa-share{display:flex;gap:8px}
.pa-share a,.pa-share button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--pa-ink);color:var(--pa-white);border:0;cursor:pointer;font-size:17px;text-decoration:none;transition:background .2s}
.pa-share a:hover,.pa-share button:hover{background:var(--pa-green)}
.pa-share button{background:var(--pa-white);color:var(--pa-ink);border:1px solid var(--pa-line)}
.pa-share button.is-done{background:var(--pa-green);color:var(--pa-white);border-color:var(--pa-green)}
.pa-disclosure{margin:18px 0 0;font-size:13px;line-height:1.5;color:var(--pa-ink-2);background:var(--pa-green-soft);border:1px solid var(--pa-line);border-radius:10px;padding:10px 14px}
.pa-disclosure a{color:var(--pa-green-deep);font-weight:700}

.pa-article-cols{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:start}
.pa-toc{position:sticky;top:100px}
.pa-toc details{background:var(--pa-green-soft);border-radius:var(--pa-radius);padding:16px 14px}
.pa-toc summary{font-size:15px;font-weight:800;cursor:pointer;list-style:none;color:var(--pa-ink)}
.pa-toc summary::-webkit-details-marker{display:none}
.pa-toc ol{list-style:none;counter-reset:toc;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.pa-toc li{counter-increment:toc}
.pa-toc a{display:block;font-size:13.5px;line-height:1.35;color:var(--pa-ink-2);text-decoration:none;padding:7px 8px;border-left:3px solid transparent;border-radius:0 6px 6px 0}
.pa-toc a::before{content:counter(toc) ". "}
.pa-toc a:hover{color:var(--pa-green)}
.pa-toc a.is-on{color:var(--pa-green-deep);font-weight:700;border-left-color:var(--pa-green);background:var(--pa-green-tint)}

.pa-hero-figure{margin:0 0 24px}
.pa-hero-figure img{width:100%;height:auto;max-height:440px;object-fit:cover;border-radius:16px}

/* Chữ thân bài */
.pa-content{font-size:17px;line-height:1.7;color:var(--pa-ink-2)}
.pa-content>*{margin:0 0 18px}
.pa-content h2{font-size:28px;font-weight:800;letter-spacing:-.6px;line-height:1.2;color:var(--pa-ink);margin:36px 0 12px;scroll-margin-top:96px}
.pa-content h3{font-size:21px;font-weight:700;color:var(--pa-ink);margin:26px 0 10px;scroll-margin-top:96px}
.pa-content a{color:var(--pa-green-deep);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.pa-content ul,.pa-content ol{padding-left:22px}
.pa-content li{margin-bottom:6px}
.pa-content strong{color:var(--pa-ink)}
.pa-content img{border-radius:12px;height:auto}
.pa-content figure{margin:0 0 20px}
.pa-content figcaption{font-size:13px;color:var(--pa-muted);margin-top:6px}
.pa-content blockquote{border-left:4px solid var(--pa-green);background:var(--pa-green-soft);margin:0 0 18px;padding:14px 18px;border-radius:0 10px 10px 0;color:var(--pa-ink)}

/* Bảng: luôn cuộn ngang gọn trong khung (rule H4) */
.pa-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--pa-line);border-radius:12px;margin:0 0 20px}
.pa-content table{width:100%;min-width:520px;border-collapse:collapse;font-size:14.5px;line-height:1.45;margin:0}
.pa-content th{background:var(--pa-green-soft);color:var(--pa-ink);font-weight:700;text-align:left;padding:11px 14px;border-bottom:1px solid var(--pa-line);white-space:nowrap}
.pa-content td{padding:10px 14px;border-bottom:1px solid var(--pa-line);vertical-align:top}
.pa-content tr:last-child td{border-bottom:0}

/* Khối: Key Takeaways */
.pa-takeaways{background:var(--pa-green-soft);border:1px solid var(--pa-green-line);border-radius:var(--pa-radius);padding:20px 22px}
.pa-takeaways>:first-child{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;color:var(--pa-ink);margin:0 0 10px}
.pa-takeaways>:first-child::before{content:"";width:24px;height:24px;border-radius:50%;flex:none;background:var(--pa-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8.5'/%3E%3C/svg%3E") center/16px no-repeat}
.pa-takeaways ul{list-style:none;padding:0;margin:0}
.pa-takeaways li{position:relative;padding-left:28px;margin:8px 0;color:var(--pa-ink-2);font-size:15.5px}
.pa-takeaways li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--pa-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4L18 8.5'/%3E%3C/svg%3E") center/12px no-repeat}

/* Khối: care sheet (hồ sơ loài) */
.pa-care{border:1px solid var(--pa-line);border-radius:var(--pa-radius);overflow:hidden}
.pa-care>:first-child{margin:0;background:var(--pa-green);color:var(--pa-white);font-size:17px;font-weight:800;padding:12px 18px}
.pa-care dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
.pa-care dl>div{padding:12px 18px;border-right:1px solid var(--pa-line);border-bottom:1px solid var(--pa-line)}
.pa-care dl>div:nth-child(3n){border-right:0}
.pa-care dt{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--pa-muted)}
.pa-care dd{margin:3px 0 0;font-size:16px;font-weight:700;color:var(--pa-ink)}

/* Khối: callout (an toàn / mẹo / ai không nên nuôi) */
.pa-callout{border-radius:12px;padding:16px 18px;border:1px solid var(--pa-line);background:var(--pa-white)}
.pa-callout>:first-child{margin-top:0}.pa-callout>:last-child{margin-bottom:0}
.pa-callout.is-safety{background:var(--pa-fix-tint);border-color:var(--pa-fix)}
.pa-callout.is-tip{background:var(--pa-fish-tint);border-color:var(--pa-fish)}
.pa-callout.is-skip{border-left:4px solid var(--pa-ink)}
.pa-callout strong:first-child{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}

/* Khối: gợi ý mua (CTA) và hộp sản phẩm. Không sao, không số review (rule C6, F2). */
.pa-cta{display:flex;align-items:center;gap:16px;background:var(--pa-green-soft);border:1px solid var(--pa-green-line);border-radius:12px;padding:16px 18px}
.pa-cta p{margin:0;font-size:14.5px;line-height:1.45;flex:1}
.pa-cta p strong{display:block;font-size:16px}
.pa-btn,.pa-content a.pa-btn{display:inline-flex;align-items:center;gap:8px;background:var(--pa-green);color:var(--pa-white);font-weight:700;font-size:14.5px;padding:11px 18px;border-radius:9px;text-decoration:none;white-space:nowrap}
.pa-btn:hover,.pa-content a.pa-btn:hover{background:var(--pa-green-deep);color:var(--pa-white)}
.pa-product{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;border:1px solid var(--pa-line);border-radius:12px;padding:14px 18px}
.pa-product>*{margin:0}
.pa-product>p:empty{display:none}
.pa-product figure{flex:none;margin:0}
.pa-product img{width:96px;height:96px;object-fit:contain;border-radius:8px;margin:0}
.pa-product-text{flex:1 1 220px;font-size:14px;line-height:1.45}
.pa-product-text>*{margin:0}
.pa-product-text strong{display:block;font-size:16px;color:var(--pa-ink);margin-bottom:3px}

/* Khối: dải ảnh có chú thích */
.pa-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.pa-strip figure{margin:0;text-align:center;font-size:13px;font-weight:700;color:var(--pa-ink)}
.pa-strip img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;margin-bottom:6px}

/* Khối: FAQ và nguồn */
.pa-content details{border:1px solid var(--pa-line);border-radius:10px;padding:0 16px;margin:0 0 10px}
.pa-content summary{cursor:pointer;font-weight:700;color:var(--pa-ink);padding:13px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.pa-content summary::-webkit-details-marker{display:none}
.pa-content summary::after{content:"+";font-size:20px;line-height:1;color:var(--pa-green)}
.pa-content details[open] summary::after{content:"\2212"}
.pa-content details>:not(summary){margin:0 0 14px}
.pa-sources{font-size:14px;border-top:1px solid var(--pa-line);padding-top:16px;color:var(--pa-muted)}
.pa-sources ol{margin:6px 0 0}

/* Hộp tác giả */
.pa-author-box{display:flex;gap:16px;align-items:flex-start;margin-top:36px;padding:20px;border:1px solid var(--pa-line);border-radius:var(--pa-radius);background:var(--pa-green-soft)}
.pa-author-box img{width:80px;height:80px;border-radius:50%;object-fit:cover;flex:none;background:var(--pa-green-tint)}
.pa-eyebrow-dark{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pa-muted)}
.pa-author-name{display:block;font-size:18px;font-weight:800;color:var(--pa-ink);text-decoration:none;margin:2px 0 6px}
.pa-author-box p{margin:0;font-size:14.5px;line-height:1.55;color:var(--pa-ink-2)}

/* Cột phải */
.pa-article-side{position:sticky;top:100px;display:flex;flex-direction:column;gap:20px}
.pa-side-box{border:1px solid var(--pa-line);border-radius:var(--pa-radius);padding:18px}
.pa-side-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.pa-side-head h2{font-size:18px;font-weight:800;margin:0}
.pa-side-head a{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--pa-ink-2);text-decoration:none}
.pa-rel{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--pa-line);text-decoration:none;color:var(--pa-ink)}
.pa-rel:first-of-type{border-top:0}
.pa-rel-img{width:72px;height:52px;object-fit:cover;border-radius:8px}
.pa-rel span{font-size:14px;font-weight:600;line-height:1.35}
.pa-rel:hover span{color:var(--pa-green)}

@media (max-width:1080px){
  .pa-article-grid{grid-template-columns:minmax(0,1fr)}
  .pa-article-side{position:static}
  .pa-article-cols{grid-template-columns:minmax(0,1fr);gap:0}
  .pa-toc{position:static;margin-bottom:20px}
  .pa-article-head h1{font-size:38px}
}
@media (max-width:760px){
  .pa-article-head h1{font-size:30px;letter-spacing:-.6px}
  .pa-dek{font-size:16.5px}
  .pa-content{font-size:16.5px}
  .pa-content h2{font-size:23px}
  .pa-care dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pa-care dl>div:nth-child(3n){border-right:1px solid var(--pa-line)}
  .pa-care dl>div:nth-child(2n){border-right:0}
  .pa-cta{flex-direction:column;align-items:flex-start}
  .pa-product img{width:72px;height:72px}
}
@media (max-width:480px){
  .pa-byline-row{flex-direction:column;align-items:flex-start}
  .pa-author-box{flex-direction:column}
}

/* ============================================================
 * PET ALMANAC CATEGORY (2026-10-29): trang danh mục.
 * ============================================================ */
body.category .pa-head{margin-bottom:0}
.pa-cat-hero{position:relative;min-height:250px;display:flex;align-items:center;color:var(--pa-white);background:var(--pa-green-dark);overflow:hidden}
.pa-cat-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 50%}
.pa-cat-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(var(--pa-hero-shade),.94) 0%,rgba(var(--pa-hero-shade),.8) 38%,rgba(var(--pa-hero-shade),.2) 70%,rgba(var(--pa-hero-shade),0) 90%)}
.pa-cat-hero-in{position:relative;z-index:2;width:100%;padding-top:30px;padding-bottom:34px}
.pa-cat-hero .breadcrumb{font-size:13px;margin:0 0 10px;display:flex;flex-wrap:wrap;gap:6px;color:var(--pa-green-line)}
.pa-cat-hero .breadcrumb a{color:var(--pa-white);text-decoration:none}
.pa-cat-hero h1{font-size:48px;font-weight:800;letter-spacing:-1.4px;line-height:1.05;margin:0 0 12px;color:var(--pa-white);text-transform:none;max-width:640px}
.pa-cat-hero p{font-size:17px;line-height:1.55;color:var(--pa-green-tint);max-width:560px;margin:0}

.pa-subcats{display:flex;flex-wrap:wrap;gap:14px 18px;padding:24px 0 8px}
.pa-subcat{display:flex;flex-direction:column;align-items:center;gap:8px;width:118px;padding:10px 6px;border-radius:var(--pa-radius);text-decoration:none;color:var(--pa-ink);font-size:14px;font-weight:700;text-align:center}
.pa-subcat:hover{background:var(--pa-green-soft)}
.pa-subcat.is-on{background:var(--pa-green-tint);color:var(--pa-green-deep)}
.pa-subcat-ph{width:84px;height:84px;border-radius:50%;overflow:hidden;background:var(--pa-green-tint);box-shadow:0 0 0 3px var(--pa-white),0 0 0 4px var(--pa-line)}
.pa-subcat-ph img{width:100%;height:100%;object-fit:cover}

.pa-cat-grid{display:grid;grid-template-columns:230px minmax(0,1fr) 290px;gap:28px;align-items:start;margin-top:18px}
.pa-cat-filter{border:1px solid var(--pa-line);border-radius:var(--pa-radius);padding:18px;position:sticky;top:100px}
.pa-cat-filter h2{font-size:18px;font-weight:800;margin:0 0 10px}
.pa-cat-filter ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.pa-cat-filter a{display:flex;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:8px;font-size:14.5px;font-weight:600;color:var(--pa-ink-2);text-decoration:none}
.pa-cat-filter a span{color:var(--pa-muted);font-weight:600}
.pa-cat-filter a:hover{background:var(--pa-green-soft)}
.pa-cat-filter a.is-on{background:var(--pa-green-tint);color:var(--pa-green-deep)}

.pa-cat-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.pa-cat-head h2{font-size:26px;font-weight:800;letter-spacing:-.6px;margin:0}
.pa-cat-count{display:block;font-size:13.5px;color:var(--pa-muted);margin-top:4px}
.pa-sort{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--pa-ink-2)}
.pa-sort select{font:inherit;font-size:14px;padding:8px 32px 8px 12px;border:1px solid var(--pa-line);border-radius:9px;background:var(--pa-white);color:var(--pa-ink);cursor:pointer}
.pa-cat-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (min-width:1400px){.pa-cat-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pa-cat-card .pa-card-img{height:160px}
.pa-card-ex{display:block;font-size:14px;line-height:1.5;color:var(--pa-ink-2);margin-top:6px}
.pa-card-meta{display:block;font-size:12.5px;color:var(--pa-muted);margin-top:10px}
.pa-cat-empty{color:var(--pa-muted);padding:30px 0}
.pa-pager{display:flex;flex-wrap:wrap;gap:6px;margin-top:26px}
.pa-pager .page-numbers{display:inline-flex;align-items:center;min-width:38px;height:38px;justify-content:center;padding:0 12px;border:1px solid var(--pa-line);border-radius:9px;font-size:14px;font-weight:600;color:var(--pa-ink-2);text-decoration:none}
.pa-pager .page-numbers.current{background:var(--pa-green);border-color:var(--pa-green);color:var(--pa-white)}
.pa-pager a.page-numbers:hover{border-color:var(--pa-green);color:var(--pa-green)}

.pa-cat-side{display:flex;flex-direction:column;gap:20px}
.pa-cat-side .pa-side-box h2{font-size:18px;font-weight:800;margin:0 0 10px}
.pa-feat-img{width:100%;height:150px;object-fit:cover;border-radius:10px}
.pa-feat-title{display:block;font-size:18px;font-weight:800;line-height:1.25;color:var(--pa-ink);text-decoration:none;margin:12px 0 6px}
.pa-feat-box p{font-size:14px;line-height:1.5;color:var(--pa-ink-2);margin:0 0 14px}
.pa-cat-side .pa-pop{background:var(--pa-green-soft)}

@media (max-width:1080px){
  .pa-cat-grid{grid-template-columns:minmax(0,1fr)}
  .pa-cat-filter{position:static;padding:12px}
  .pa-cat-filter h2{display:none}
  .pa-cat-filter ul{flex-direction:row;flex-wrap:wrap;gap:8px}
  .pa-cat-filter a{border:1px solid var(--pa-line);border-radius:999px;padding:7px 14px;gap:6px}
  .pa-cat-side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .pa-cat-hero h1{font-size:40px}
}
@media (max-width:760px){
  .pa-cat-hero{min-height:0}
  .pa-cat-hero::before{background:linear-gradient(0deg,rgba(var(--pa-hero-shade),.95) 30%,rgba(var(--pa-hero-shade),.6) 75%,rgba(var(--pa-hero-shade),.35))}
  .pa-cat-hero-in{padding-top:70px;padding-bottom:24px}
  .pa-cat-hero h1{font-size:32px;letter-spacing:-.8px}
  .pa-cat-hero p{font-size:15px}
  .pa-subcats{gap:6px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:6px}
  .pa-subcat{width:92px;flex:none;font-size:12.5px}
  .pa-subcat-ph{width:64px;height:64px}
  .pa-cat-filter{display:none}
  .pa-cat-cards{gap:12px}
  .pa-cat-card .pa-card-img{height:120px}
  .pa-cat-side{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .pa-cat-cards{grid-template-columns:minmax(0,1fr)}
  .pa-cat-card .pa-card-img{height:170px}
}