/*
Theme Name: FeederBirdLab Child
Theme URI: https://lat.vn/
Description: Child theme của lat-theme cho feederbirdlab.com (chép từ bản mẫu 2026-10-15). Bộ màu TRUNG TÍNH TẠM (CẦN CHỐT): nền sáng, chữ xám than đậm, 1 màu nhấn xanh mòng két, sao hổ phách. Màu đổi qua remap token cha ở :root.
Author: LAT
Template: lat-theme
Version: 1.0.2
Text Domain: lat-review-child
*/

/* ============================================================
 * 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.
 * ============================================================ */
/* Poppins tự host (Google Fonts, SIL OFL 1.1; bản latin, 6 độ đậm tĩnh 400 đến 900), preload 400 và 700 trong fbl-speed.php. Không nạp từ fonts.googleapis.com. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url("assets/fonts/poppins-latin-400.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url("assets/fonts/poppins-latin-500.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url("assets/fonts/poppins-latin-600.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url("assets/fonts/poppins-latin-700.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url("assets/fonts/poppins-latin-800.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:900;font-display:swap;src:url("assets/fonts/poppins-latin-900.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* Font thay thế gần khớp bề rộng Poppins (Arial chỉnh cỡ) để chữ ít xô khi Poppins tải xong; sans-serif hệ thống phía sau, không rơi về serif. */
@font-face{font-family:'Poppins Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:110%}
:root{
  /* Bộ màu phương án B (lá + goldfinch, chủ site chốt 2026-10-25): xanh rêu #3F5E24 (nav, nút, link nhấn), nền kem #FBF8EF, bảng #F3EFDF,
     chữ #26331a, nền tối #1D2913. Vàng goldfinch #F5C518 chỉ cho icon và chữ/biểu tượng trên nền tối. Vàng olive đậm #7A5C00 cho chữ vàng
     trên nền sáng (5.4:1 trên bảng #F3EFDF), #A87400 cho ngôi sao trên nền sáng (3.8:1, thành phần không phải chữ).
     Đổi màu chủ đạo bằng --gold/--gold-deep + token cha bên dưới (tên biến giữ nguyên của theme). */
  --navy:#1D2913; --ink:#26331a; --ink-soft:#3d4a31; --muted:#55604a; --line:#e3dec9; --bg:#FBF8EF;
  --panel:#F3EFDF; --gold:#3F5E24; --gold-deep:#2F4519; --link:#26331a; --sale:var(--star-text); --good:#2b6228;
  --star:#F5C518; --star-text:#7A5C00; --star-deep:#A87400; --foot-text:#cfd6c2; --foot-muted:#a9b39a; --foot-fine:#9aa48c;
  --shadow-soft:rgba(29,41,19,.08);
  /* Ô ảnh (2026-10-15): ảnh đại diện phần lớn là ảnh sản phẩm, nên contain trên nền trắng, không cắt góc. */
  --thumb-bg:#fff; --thumb-pad:10px; --thumb-pad-sm:4px;
  --maxw:1200px;
  --font:'Poppins','Poppins Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;

  /* THANG CHỮ TIÊU ĐỀ, một bộ token duy nhất cho toàn site (thêm 2026-09-03).
     Trước đây 6 phần tự viết cỡ chữ riêng nên cấp bậc đá nhau: h3 nội dung (19px)
     nhỏ hơn h3 tên sản phẩm trong card (21px), tức nhìn thấy ngược cấp bậc HTML.
     Đổi cỡ chữ CHỈ sửa ở đây, không rải px vào từng rule. Bản mobile override
     lại chính các token này trong @media(max-width:640px) ở cuối file. */
  --fs-h2:26px;        /* h2 trong thân bài + trang tĩnh */
  --fs-h3:22px;        /* h3 nội dung, phải LỚN HƠN --fs-card để đúng cấp bậc */
  --fs-card-lg:30px;   /* tiêu đề card nổi bật (featured trang chủ) */
  --fs-card:21px;      /* tên sản phẩm trong pick card */
  --fs-card-sm:18px;   /* tiêu đề card trong lưới */
  --fs-sechead:22px;   /* nhãn section trang chủ */

  /* Remap token theme cha (lat-theme, assets/css/core/tokens.css) -> bảng màu B */
  --color-primary:#3F5E24; --color-primary-hover:#2F4519; --color-primary-dark:#2F4519;
  --color-primary-light:#E8EFDD; --color-primary-rgb:63,94,36;
  --color-accent:#3F5E24; --color-accent-hover:#2F4519; --color-accent-light:#E8EFDD;
  --color-success:#2b6228; --color-success-light:#e4eed9;
  --color-warning:#7A5C00; --color-error:#b3261e; --color-info:#26331a;
  --color-text:#26331a; --color-text-secondary:#3d4a31; --color-text-muted:#55604a; --color-text-subtle:#5f6a52;
  --color-bg:#FBF8EF; --color-bg-alt:#F3EFDF; --color-surface:#F3EFDF; --color-surface-raised:#ffffff; --color-surface-hover:#ECE6D0;
  --color-border:#e3dec9; --color-border-subtle:#eee9d6; --color-border-strong:#d3ccb0;
  --font-sans:var(--font);

  /* Remap token plugin AffiliateCMS Pro (frontend.css) -> xanh rêu + sao vàng olive (đủ tương phản trên nền kem) */
  --acms-primary-rgb:63,94,36; --acms-star-active:var(--star-deep); --acms-border:#e3dec9;
}

/* ============================================================
 * 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}
/* Trạng thái rỗng của lưới bài (danh mục/tag chưa có bài): dùng font body, không dùng serif của .date (2026-10-15). */
.grid-empty{font-size:15px;color:var(--muted);margin:8px 0 24px}
/* Ghi chú trên bảng so sánh [acms_list]: thứ tự là đánh giá tổng hợp, FeederBirdLab Score chỉ là rating Amazon (2026-10-15). */
.ct-note{font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 10px}
.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:var(--bg)}
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: ảnh logo chính thức feederbirdlab.com (webp, 520x119), do pf_logo() sinh ra. */
.logo{display:inline-flex;align-items:center;line-height:0;text-decoration:none}
.logo img{height:48px;width:auto}
.searchpill{margin-left:auto;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--color-border-strong);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:var(--ink);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:var(--color-surface-hover);color:var(--navy)}
.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 strong{color:var(--ink);font-weight:700}
.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:contain;background:var(--thumb-bg);padding:var(--thumb-pad);box-sizing:border-box}
.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 var(--color-border-strong);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:contain;background:var(--thumb-bg);padding:var(--thumb-pad);box-sizing:border-box}
.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:contain;background:var(--thumb-bg);padding:var(--thumb-pad);box-sizing:border-box;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:var(--panel);border:1px solid var(--line);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:contain;background:var(--thumb-bg);padding:var(--thumb-pad-sm);box-sizing:border-box;flex:none}
.compact-list .crow .date{display:block;margin-bottom:4px}
.compact-list .crow h3{font-size:16px;font-weight:600;line-height:1.32;letter-spacing:normal;margin:0}
.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:var(--color-border-strong);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:var(--navy);color:var(--foot-text);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{height:auto;margin-bottom:14px}
footer.site .logo img{height:48px;margin:0}
footer.site p.desc{font-size:13px;color:var(--foot-muted);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 svg{display:block;width:18px;height:18px}
footer.site .cols .fcat{max-width:230px}
footer.site .cols .fcat li a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.social a:hover{background:#fff;color:var(--navy)}
footer.site .cols{display:flex;gap:54px;flex-wrap:wrap}
/* PLAN-SPEED S7: tiêu đề cột footer là <p class="fhead"> (không phải heading) để thứ tự H1>H2>H3 trong trang không bị nhảy cấp. */
footer.site .fhead{color:#fff;font-size:11.5px;font-weight:var(--font-bold,700);line-height:var(--leading-tight,1.25);text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px}
footer.site ul{list-style:none}
footer.site li{margin-bottom:8px}
footer.site li a{font-size:13px;color:var(--foot-text)}
footer.site li a:hover{color:#fff}
footer.site .fine{font-size:11.5px;color:var(--foot-fine);padding-top:18px;line-height:1.7}
footer.site .fine a{color:var(--foot-text);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-intro a{color:var(--link);font-weight:700;text-decoration:underline;text-underline-offset:2px}
div.cat-intro{max-width:820px}
div.cat-intro p+p{margin-top:10px}
.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;padding-top:28px}
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 var(--color-border-strong);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}
.post-meta .author-names{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline}
.post-meta .reviewed-by{font-weight:400;color:var(--muted)}
.post-meta .reviewed-by a{font-weight:700}
.author-avs a:hover{position:relative;z-index:2}
.post-meta .m-item{font-family:var(--font)}
.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:contain;background:var(--thumb-bg);padding:var(--thumb-pad);box-sizing:border-box;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:contain;background:var(--thumb-bg);padding:var(--thumb-pad-sm);box-sizing:border-box;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;white-space:nowrap}
.compare-table .ct-buy:hover{background:var(--ink-soft)}

/* 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:var(--thumb-bg);padding:var(--thumb-pad);box-sizing:border-box}
.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-rating b{color:var(--good)}
.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:var(--navy);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:var(--line);color:var(--navy)}

/* 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:contain;background:var(--thumb-bg);padding:var(--thumb-pad-sm);box-sizing:border-box;border:1px solid var(--line);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}
  .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}
  .cat-intro{font-size:15.5px}
  .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}}
/* Logo "feederbirdlab.com" dài hơn "LATReview" (~218px ở 24px): màn hẹp thu nhỏ để không tràn cạnh nút menu + tìm kiếm. */
@media(max-width:760px){.logo img{height:38px}}
@media(max-width:380px){.logo img{height:34px}}

/* ============================================================
 * 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}
}
/* Bootstrap Icons 1.11.3 (MIT, https://icons.getbootstrap.com), bản rút gọn 112 icon site dùng, tự host thay jsDelivr (PLAN-SPEED S2, 2026-10-11). Thêm icon mới: dựng lại theo docs/PLAN-SPEED.md. */
@font-face{font-display:block;font-family:bootstrap-icons;src:url("assets/fonts/bi-subset.woff2") format("woff2")}
.bi::before,[class*=" bi-"]::before,[class^=bi-]::before{display:inline-block;font-family:bootstrap-icons!important;font-style:normal;font-weight:400!important;font-variant:normal;text-transform:none;line-height:1;vertical-align:-.125em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.bi-activity::before{content:"\f66b"}
.bi-arrow-down-circle::before{content:"\f119"}
.bi-arrow-left::before{content:"\f12f"}
.bi-arrow-repeat::before{content:"\f130"}
.bi-arrow-right::before{content:"\f138"}
.bi-arrow-right-circle::before{content:"\f134"}
.bi-arrow-up::before{content:"\f148"}
.bi-award::before{content:"\f154"}
.bi-award-fill::before{content:"\f153"}
.bi-bag-check::before{content:"\f171"}
.bi-bag-fill::before{content:"\f174"}
.bi-balloon-fill::before{content:"\f706"}
.bi-bar-chart-fill::before{content:"\f17a"}
.bi-bicycle::before{content:"\f18d"}
.bi-book-fill::before{content:"\f192"}
.bi-bookmark::before{content:"\f1a2"}
.bi-bookmark-fill::before{content:"\f199"}
.bi-bookmark-star-fill::before{content:"\f19e"}
.bi-box-arrow-up-right::before{content:"\f1c5"}
.bi-box-seam::before{content:"\f1c7"}
.bi-calendar3::before{content:"\f214"}
.bi-camera::before{content:"\f220"}
.bi-car-front-fill::before{content:"\f7e0"}
.bi-cash-coin::before{content:"\f632"}
.bi-chat-dots::before{content:"\f24a"}
.bi-chat-square-heart::before{content:"\f71a"}
.bi-chat-square-text::before{content:"\f264"}
.bi-check-circle::before{content:"\f26b"}
.bi-check-circle-fill::before{content:"\f26a"}
.bi-check-lg::before{content:"\f633"}
.bi-check2-circle::before{content:"\f270"}
.bi-chevron-down::before{content:"\f282"}
.bi-chevron-left::before{content:"\f284"}
.bi-chevron-right::before{content:"\f285"}
.bi-clock::before{content:"\f293"}
.bi-clock-history::before{content:"\f292"}
.bi-compass::before{content:"\f2d1"}
.bi-controller::before{content:"\f2d4"}
.bi-cpu-fill::before{content:"\f2d5"}
.bi-dash-circle::before{content:"\f2e6"}
.bi-discord::before{content:"\f300"}
.bi-envelope::before{content:"\f32f"}
.bi-exclamation-circle::before{content:"\f333"}
.bi-exclamation-circle-fill::before{content:"\f332"}
.bi-eye::before{content:"\f341"}
.bi-facebook::before{content:"\f344"}
.bi-file-earmark-text::before{content:"\f38b"}
.bi-fire::before{content:"\f7f6"}
.bi-flower1::before{content:"\f3cd"}
.bi-folder::before{content:"\f3d7"}
.bi-folder-fill::before{content:"\f3d1"}
.bi-funnel::before{content:"\f3e1"}
.bi-gift-fill::before{content:"\f3eb"}
.bi-globe::before{content:"\f3ee"}
.bi-hand-thumbs-up::before{content:"\f407"}
.bi-hand-thumbs-up-fill::before{content:"\f406"}
.bi-headphones::before{content:"\f413"}
.bi-heart-fill::before{content:"\f415"}
.bi-house::before{content:"\f425"}
.bi-house-fill::before{content:"\f424"}
.bi-image::before{content:"\f42a"}
.bi-images::before{content:"\f42b"}
.bi-inbox::before{content:"\f42d"}
.bi-info-circle::before{content:"\f431"}
.bi-info-circle-fill::before{content:"\f430"}
.bi-instagram::before{content:"\f437"}
.bi-lightning-fill::before{content:"\f46e"}
.bi-link-45deg::before{content:"\f470"}
.bi-linkedin::before{content:"\f472"}
.bi-list::before{content:"\f479"}
.bi-list-check::before{content:"\f473"}
.bi-list-nested::before{content:"\f474"}
.bi-moon-fill::before{content:"\f494"}
.bi-newspaper::before{content:"\f4a3"}
.bi-patch-check-fill::before{content:"\f4b5"}
.bi-pencil-square::before{content:"\f4ca"}
.bi-percent::before{content:"\f4d1"}
.bi-person::before{content:"\f4e1"}
.bi-person-fill::before{content:"\f4da"}
.bi-pinterest::before{content:"\f663"}
.bi-reddit::before{content:"\f650"}
.bi-reply::before{content:"\f520"}
.bi-robot::before{content:"\f6b1"}
.bi-search::before{content:"\f52a"}
.bi-send-fill::before{content:"\f6b9"}
.bi-share::before{content:"\f52e"}
.bi-shield-check::before{content:"\f52f"}
.bi-shop::before{content:"\f543"}
.bi-sort-down::before{content:"\f575"}
.bi-sort-up::before{content:"\f57b"}
.bi-star::before{content:"\f588"}
.bi-star-fill::before{content:"\f586"}
.bi-star-half::before{content:"\f587"}
.bi-sun-fill::before{content:"\f5a1"}
.bi-tablet::before{content:"\f5ae"}
.bi-tag-fill::before{content:"\f5af"}
.bi-tags::before{content:"\f5b2"}
.bi-tags-fill::before{content:"\f5b1"}
.bi-telegram::before{content:"\f5b3"}
.bi-three-dots::before{content:"\f5d4"}
.bi-tiktok::before{content:"\f6cc"}
.bi-trophy::before{content:"\f5e7"}
.bi-trophy-fill::before{content:"\f5e6"}
.bi-twitch::before{content:"\f5ee"}
.bi-twitter-x::before{content:"\f8db"}
.bi-whatsapp::before{content:"\f618"}
.bi-wind::before{content:"\f61d"}
.bi-x::before{content:"\f62a"}
.bi-x-circle::before{content:"\f623"}
.bi-x-circle-fill::before{content:"\f622"}
.bi-x-lg::before{content:"\f659"}
.bi-youtube::before{content:"\f62b"}

/* ============================================================
 * HOMEPAGE v2 (chép từ bản mẫu PLAN-HOME 2026-10-12): bố cục theo cartechwiki.com, màu theo token :root.
 * Hero / Browse by topic / Latest reviews / Quick answers / About. Class cũ (.hero, .catblock,
 * .news, .who) giữ nguyên ở trên để quay lại bản cũ được ngay.
 * ============================================================ */
.cml-h{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:22px}

.cml-hero{background:var(--navy);color:var(--bg)}
.cml-hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding-top:64px;padding-bottom:64px}
.cml-eyebrow{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--foot-text);margin-bottom:14px}
.cml-hero h1{font-size:48px;font-weight:800;line-height:1.08;letter-spacing:-.025em;margin-bottom:18px;color:var(--bg)}
.cml-hero-txt p{font-size:17px;line-height:1.6;color:rgba(255,255,255,.82);max-width:60ch;margin-bottom:26px}
.cml-search{display:flex;max-width:520px;border-radius:8px;overflow:hidden;background:var(--bg)}
.cml-search input{flex:1;border:0;padding:15px 18px;font:inherit;font-size:15px;color:var(--ink);background:var(--bg);outline:none}
.cml-search input:focus-visible{box-shadow:inset 0 0 0 2px var(--gold)}
.cml-search button{border:0;background:var(--gold);color:var(--bg);font:inherit;font-weight:800;font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:0 24px;cursor:pointer}
.cml-search button:hover{background:var(--gold-deep)}
.cml-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.cml-chips a{font-size:13px;font-weight:600;color:var(--bg);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:7px 14px}
.cml-chips a:hover{border-color:var(--star);color:var(--star)}
.cml-hero-art img{display:block;width:100%;max-width:480px;height:auto;margin-left:auto;border-radius:16px;border:1px solid var(--color-border-strong);aspect-ratio:3/2;object-fit:cover}

.cml-tiles{padding-top:52px;padding-bottom:12px}
.cml-tile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cml-tile{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line);border-radius:12px;padding:20px;background:var(--bg);transition:border-color .15s,box-shadow .15s}
.cml-tile:hover{border-color:var(--gold);box-shadow:0 4px 14px var(--shadow-soft)}
.cml-tile .tic svg{width:26px;height:26px}
.cml-tile .tic{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:10px;background:var(--navy);color:var(--bg);margin-bottom:10px}
.cml-tile .tname{font-size:17px;font-weight:700;color:var(--ink)}
.cml-tile .tsub{font-size:14px;color:var(--muted);line-height:1.45}

.cml-latest{padding-top:40px;padding-bottom:52px}
.cml-gcard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.cml-gcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg);transition:border-color .15s,box-shadow .15s}
.cml-gcard:hover{border-color:var(--gold);box-shadow:0 4px 14px var(--shadow-soft)}
.cml-gcard .gthumb{display:block;aspect-ratio:16/10;background:var(--thumb-bg);overflow:hidden}
.cml-gcard .gthumb img{width:100%;height:100%;object-fit:contain;padding:var(--thumb-pad);box-sizing:border-box}
.cml-gcard .gbody{display:flex;flex-direction:column;gap:8px;padding:18px 20px 22px}
.cml-gcard .gcat{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.cml-gcard .gtitle{font-size:var(--fs-card-sm);font-weight:700;line-height:1.3;color:var(--ink)}
.cml-gcard:hover .gtitle{text-decoration:underline}
.cml-gcard .gdesc{font-size:14px;line-height:1.5;color:var(--ink-soft)}

.cml-answers{background:var(--navy);color:var(--bg);padding:52px 0}
.cml-answers .cml-h{color:var(--bg)}
.cml-qa-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cml-qa{display:flex;flex-direction:column;gap:8px;border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:20px 22px;background:rgba(255,255,255,.05)}
.cml-qa:hover{border-color:var(--star)}
.cml-qa h3{font-size:17px;font-weight:700;line-height:1.35;color:var(--bg)}
.cml-qa p{font-size:14px;line-height:1.5;color:rgba(255,255,255,.8)}
.cml-qa .more{margin-top:auto;padding-top:6px;font-size:13px;font-weight:700;color:var(--star-text)}

.cml-about{padding-top:48px;padding-bottom:56px}
.cml-about-box{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:32px 34px}
.cml-about-box h2{font-size:24px;font-weight:800;letter-spacing:-.01em;margin-bottom:12px}
.cml-about-box p{font-size:16px;line-height:1.65;color:var(--ink-soft);max-width:78ch}
.cml-about-box .links{margin-top:14px;font-weight:700;color:var(--muted)}
.cml-about-box .links a{color:var(--gold);text-decoration:none}
.cml-about-box .links a:hover{text-decoration:underline}

@media(max-width:980px){
  .cml-hero-in{grid-template-columns:1fr;gap:28px;padding-top:44px;padding-bottom:44px}
  .cml-hero-art{display:none}
  .cml-tile-grid,.cml-gcard-grid,.cml-qa-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .cml-hero h1{font-size:34px}
  .cml-hero-txt p{font-size:16px}
  .cml-search button{padding:0 16px}
  .cml-h{font-size:24px}
  .cml-tile-grid,.cml-gcard-grid,.cml-qa-grid{grid-template-columns:1fr}
  .cml-tile{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:14px;padding:16px}
  .cml-tile .tic{margin-bottom:0}
  .cml-tile .tsub{flex-basis:100%}
  .cml-about-box{padding:24px 20px}
}

/* Ô ảnh sản phẩm trong [acms_grid] (plugin): nền trắng như các ô ảnh khác (2026-10-15). */
.acms-grid__image{background-color:var(--thumb-bg)}
.acms-grid__image img{padding:var(--thumb-pad);box-sizing:border-box}

/* FeederBirdLab Score trong thẻ sản phẩm acms_card (2026-10-16): cùng bộ token, không màu rời. */
.acms-card__score{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:10px 0}
.acms-card__score-name{font-weight:600;color:var(--ink)}
.acms-card__score-label{font-weight:600;color:var(--good)}