/*
Theme Name: AffiliateCMS Child
Theme URI: https://lat.vn/
Description: Child theme for AffiliateCMS Theme. Add your custom styles and overrides here.
Author: AffiliateCMS Team
Author URI: https://lat.vn/
Template: affiliateCMS-theme
Version: 2.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: affiliatecms-child
*/

/* ==========================================================================
   Custom Styles - Add your overrides below
   ========================================================================== */

/* ============================================================
   BRAND TOKENS - Shrimpyo (rule H2: 1 bộ token tập trung duy nhất,
   không hardcode hex rời rạc ở nơi khác). Override đúng token :root có sẵn
   của theme cha (tokens.css), không tạo bảng màu riêng.

   Aqua Mint  #00D9A5  - CTA/link/navbar (--color-primary), theo Shrimpyo_BrandKit
   Cherry Red #FF4D4D  - accent (badge/cảnh báo/CTA phụ)
   Dark Teal  #0E2226  - background thật của brand kit (không phải biến thể phụ)

   QUAN TRỌNG (khác CustomPCGaming): theme cha vẫn giữ nguyên khả năng light/dark
   mode tự động theo hệ điều hành người xem (không ép acmsc_theme_mode). Bảng màu
   ở đây CHỈ áp cho token còn lại (primary/accent/border cơ bản), --color-bg/
   --color-surface/--color-text GIỮ NGUYÊN giá trị mặc định của theme cha (sáng ở
   light mode, tối ở dark mode) để không phá vỡ các component chưa test của theme
   cha. Lý do: logo dạng chữ line-art trắng trong suốt của brand kit chỉ hợp nền
   tối, nên phần logo dùng icon có nền màu cố định (luôn hiện đúng ở mọi mode) +
   chữ "Shrimpyo" render bằng text thường (tự đổi màu theo --color-text), xem
   header.php/footer.php - không cần ép cả site sang dark.

   Font: Baloo 2 (rounded, khớp mô tả "Rounded Bold" của brand kit, dùng cho
   heading/logo/badge) + Inter (body, token --font-sans có sẵn của theme cha).

   LƯU Ý CONTRAST (verify bằng công thức WCAG thật, không đoán): brand mint
   thô #00D9A5 chỉ đạt contrast 1.83:1 với chữ trắng (fail AA cả 2 mode) vì
   đây vốn là màu sáng, chỉ hợp làm text/icon TRÊN NỀN TỐI (dark bg), không
   hợp làm NỀN ĐẶC cho chữ trắng (navbar/button fill) ở bất kỳ mode nào.
   --color-primary dùng bản đậm hơn #00795D (cùng họ mint/teal, 5.4:1 với
   chữ trắng, đạt AA) cho mọi context nền đặc + cả 2 mode - không đảo màu
   theo mode để tránh lặp lại đúng bẫy contrast trên. Mint thật #00D9A5 chỉ
   dùng làm --color-primary-dark (điểm nhấn nhỏ, icon, không phải nền đặc).
   ============================================================ */
:root {
    --color-primary: #00795D;
    --color-primary-hover: #006B52;
    --color-primary-dark: #005643;
    --color-primary-light: #E3FBF5;
    --color-primary-rgb: 0, 121, 93;

    /* True bright brand mint, kept OUTSIDE the --color-primary-* chain on
       purpose: reusing --color-primary-dark for it would leak into parent
       theme components that expect --color-primary-dark to be a safe dark
       fill color, and mint fails that (1.83:1 with white). Use this only
       as foreground text/icon color on the fixed dark header/footer band
       below, where it has 7.4:1+ contrast. */
    --color-mint-accent: #00D9A5;

    --color-accent: #C92E33;
    --color-accent-hover: #A82429;
    --color-accent-light: #FFE9E9;
    --color-accent-pure: #FF4D4D;

    --color-border-strong: #7FA8A2;

    --font-heading: 'Baloo 2', 'Arial Rounded MT Bold', sans-serif;
    --font-badge: 'Baloo 2', var(--font-sans);
}

/* ============================================================
   HEADER + FOOTER: dải nền Dark Teal CỐ ĐỊNH, không phụ thuộc light/dark
   mode của trang (giống cách CPG cho .cpg-footer dùng var(--color-text)
   làm nền tối bất kể site đang light theme). Lý do: logo ngang
   (shrimpyo_horizontal.png) là line-art trắng trong suốt, chỉ đọc được
   trên nền tối - route này dùng ĐÚNG ảnh logo thật từ brand kit thay vì
   phương án icon+text trước đó. Nhờ redefine token màu ngay tại 2 wrapper
   này, MỌI rule bên dưới dùng var(--color-bg)/var(--color-text)/
   var(--color-border)/... bên trong header/footer tự động ăn theo bảng
   tối này mà không cần sửa lại từng dòng - phần nội dung chính của trang
   (.sy-tagline, .sy-who, .sy-catblock...) NẰM NGOÀI 2 wrapper này nên vẫn
   tôn trọng đúng light/dark mode mặc định của theme cha, không bị ảnh
   hưởng. */
.sy-header,
.sy-footer {
    --color-bg: #0E2226;
    --color-bg-alt: #123239;
    --color-surface: #163137;
    --color-surface-raised: #1B3B41;
    --color-surface-hover: #1F444B;
    --color-text: #F5F7F6;
    --color-text-secondary: #C7D6D3;
    --color-text-muted: #8FA6A2;
    --color-text-subtle: #6E8884;
    --color-border: #244850;
    --color-border-subtle: #1C3940;
    --color-border-strong: #2F5860;
}

h1, h2, h3, h4, h5, h6,
.sy-cat-title,
.sy-who-title,
.sy-hero__col--feat h3 {
    font-family: var(--font-heading);
    font-weight: var(--font-bold);
}

/* ============================================================
   HEADER (header.php, mới thêm 2026-08-09): topbar + navbar accent +
   mega-dropdown category + FTC disclosure bar, đồng bộ với bestforyourhome.org
   (cùng stack theme). Trước đây site dùng header mặc định của theme cha
   (đơn hàng, không mega-dropdown). Sticky qua id="masthead", tái dùng
   đúng hiệu ứng .is-scrolled có sẵn ở theme.min.js, không viết JS mới.
   ============================================================ */
.sy-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow var(--duration-200) var(--ease-out);
}

.sy-header.is-scrolled {
    box-shadow: var(--shadow-md);
}

.sy-topbar {
    background: var(--color-bg);
}

.sy-topbar__inner {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.sy-hamburger {
    display: none;
    cursor: pointer;
    font-size: 1.4rem;
    color: var(--color-text);
}

.sy-ic-close {
    display: none;
}

.sy-mnav-toggle:checked ~ .sy-topbar .sy-ic-open {
    display: none;
}

.sy-mnav-toggle:checked ~ .sy-topbar .sy-ic-close {
    display: inline;
}

.sy-logo-wrap {
    margin: 0;
    flex-shrink: 0;
}

.sy-logo {
    font-family: var(--font-sans);
    font-weight: var(--font-bold);
    font-size: 1.4rem;
    color: var(--color-text);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* shrimpyo-horizontal-tight.png (real brand kit wordmark, white line-art),
   sized against .sy-header's fixed dark band. Matches the site's
   --header-height tokens (56px mobile / 64-72px desktop). */
.sy-logo__img {
    display: block;
    height: 44px;
    width: auto;
    max-width: 260px;
    object-fit: contain;
}

@media (min-width: 768px) {
    .sy-logo__img {
        height: 52px;
        max-width: 320px;
    }
}

@media (max-width: 480px) {
    .sy-logo__img {
        height: 36px;
        max-width: 200px;
    }
}

.sy-searchpill {
    flex: 1;
    max-width: 420px;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
}

.sy-searchpill i {
    color: var(--color-text-subtle);
}

.sy-searchpill input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 0.9rem;
    color: var(--color-text);
    outline: none;
}

.sy-searchpill button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    border: none;
    background: var(--color-primary);
    color: #fff;
    cursor: pointer;
}

.sy-m-searchbtn,
.sy-mobile-search {
    display: none;
}

/* ---- Navbar accent (mega-dropdown category) ---- */
.sy-navbar {
    background: var(--color-primary);
}

.sy-navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

/* 2026-09-16 (phát hiện qua FungiPop.org, site chị em cùng thiết kế header,
   cùng gốc lỗi): tổng chiều rộng category + "All Categories" vượt
   .container (1200px) khi tên category dài, gây tràn ngang toàn trang (không
   co giãn vì flex-shrink mặc định =1 làm chữ tràn khỏi khung mục thay vì
   cả hàng nav wrap gọn). Fix: cho .sy-navbar__nav tự cuộn ngang bên trong nó
   (ẩn scrollbar), không tràn ra ngoài trang; .sy-ni + nút phải giữ nguyên
   kích thước. */
/* 2026-09-16 (sửa lại lần 2, phát hiện qua FungiPop.org): bản
   overflow-x:auto/overflow-y:hidden ban đầu vô tình cắt luôn dropdown
   ".sy-submenu" của "All Categories" (phần tử absolute nằm dưới hàng nav -
   CSS luôn ép cả 2 trục cùng clip khi 1 trục khác 'visible'). Sau khi giảm
   primary_cats xuống 3 mục (header.php), nav không còn đủ dài để tràn khung
   trong trường hợp bình thường, nên bỏ hẳn overflow-x ở đây, chỉ giữ
   flex-shrink:0 trên từng mục. */
.sy-navbar__nav {
    display: flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
}

.sy-ni {
    position: relative;
    flex-shrink: 0;
}

.sy-navbar__right {
    flex-shrink: 0;
}

.sy-ni > a {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    padding: var(--space-4) var(--space-4);
    color: #fff;
    font-weight: var(--font-semibold);
    font-size: 0.9rem;
    white-space: nowrap;
}

.sy-ni > a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.sy-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-top: none;
    box-shadow: var(--shadow-lg);
    padding: var(--space-4);
    min-width: 220px;
    display: none;
    flex-direction: column;
    z-index: 50;
}

.sy-submenu--allcats {
    columns: 2;
    min-width: 320px;
}

.sy-submenu a {
    display: block;
    padding: var(--space-2) var(--space-3);
    color: var(--color-text-secondary);
    font-size: 0.88rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.sy-submenu a:hover {
    background: var(--color-bg-alt);
    color: var(--color-mint-accent);
}

.sy-ni:hover .sy-submenu {
    display: flex;
}

.sy-navbar__right {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-shrink: 0;
}

.sy-navbar__right a {
    color: #fff;
    font-weight: var(--font-bold);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sy-navbar__right a:hover {
    text-decoration: underline;
    color: #fff;
}

.sy-mobile-nav {
    display: none;
}

/* ---- FTC disclosure bar (markup có sẵn ở theme cha, restyle lại) ---- */
.post-disclosure {
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-3) 0;
}

.post-disclosure__main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-align: center;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.post-disclosure__icon {
    display: none;
}

.post-disclosure__text {
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.post-disclosure__link {
    font-weight: var(--font-semibold);
    color: var(--color-text);
    text-decoration: underline;
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .sy-searchpill {
        max-width: 280px;
    }
}

@media (max-width: 768px) {
    .sy-hamburger {
        display: block;
    }

    .sy-searchpill {
        display: none;
    }

    .sy-m-searchbtn {
        display: flex;
        align-items: center;
        margin-left: auto;
        font-size: 1.2rem;
        color: var(--color-text);
    }

    .sy-msearch-toggle:checked ~ .sy-mobile-search {
        display: block;
    }

    .sy-mobile-search {
        background: var(--color-bg-alt);
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-4);
    }

    .sy-mobile-search form {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        background: var(--color-bg);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-full);
        padding: var(--space-2) var(--space-4);
    }

    .sy-mobile-search input {
        flex: 1;
        border: none;
        background: transparent;
        outline: none;
    }

    .sy-navbar {
        display: none;
    }

    .sy-mnav-toggle:checked ~ .sy-mobile-nav {
        display: block;
    }

    .sy-mobile-nav {
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        padding: var(--space-2) var(--space-4);
    }

    .sy-mobile-nav details {
        border-bottom: 1px solid var(--color-border-subtle);
        padding: var(--space-3) 0;
    }

    .sy-mobile-nav summary {
        font-weight: var(--font-semibold);
        cursor: pointer;
        color: var(--color-text);
    }

    .sy-mobile-nav__sub {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        margin-top: var(--space-3);
        padding-left: var(--space-4);
    }

    .sy-mobile-nav__sub a {
        color: var(--color-text-secondary);
        font-size: 0.9rem;
    }

    .sy-mobile-nav__sep {
        font-size: 0.75rem;
        text-transform: uppercase;
        color: var(--color-text-subtle);
        padding: var(--space-3) 0;
    }

    .sy-mobile-nav__accent {
        display: block;
        padding: var(--space-2) 0;
        color: var(--color-mint-accent);
        font-weight: var(--font-bold);
    }
}

@media (max-width: 480px) {
    .sy-submenu--allcats {
        columns: 1;
    }
}

/* ============================================================
   CATEGORY ARCHIVE PAGE (category.php, mới thêm 2026-08-09)
   ============================================================ */
.sy-catpage-head {
    text-align: center;
    padding: var(--space-10) 0 var(--space-8);
    border-bottom: 1px solid var(--color-border-subtle);
}

.sy-catpage-head .breadcrumb {
    justify-content: center;
    margin-bottom: var(--space-4);
}

.sy-catpage-head__title {
    font-size: 2.2rem;
    font-weight: var(--font-bold);
    letter-spacing: -0.01em;
    color: var(--color-text);
}

.sy-catpage-head__desc {
    max-width: 720px;
    margin: var(--space-4) auto 0;
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.sy-catpage-head__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-6);
}

.sy-chip {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
}

.sy-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .sy-catpage-head__title {
        font-size: 1.6rem;
    }
}

/* ============================================================
   QUICK PICKS SUMMARY (single post, thêm 2026-08-09)
   ============================================================ */
.sy-quickpicks {
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    margin: var(--content-section-spacing, var(--space-8)) 0;
}

.sy-quickpicks__title {
    margin-top: 0 !important;
}

.sy-quickpicks .acms-grid {
    max-width: 100% !important;
}

/* ---- Homepage (front-page.php): tái dùng token màu/spacing của theme cha ---- */

.sy-tagline {
    text-align: center;
    padding: var(--space-12) var(--container-padding) var(--space-10);
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
}
.sy-tagline h1 {
    font-size: var(--text-4xl);
    margin: 0 0 var(--space-3);
    color: var(--color-text);
}
.sy-tagline p {
    color: var(--color-text-secondary);
    max-width: 640px;
    margin: 0 auto var(--space-6);
}
.sy-tagline form {
    display: flex;
    max-width: 480px;
    margin: 0 auto;
    gap: var(--space-2);
}
.sy-tagline input[type="search"] {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-base);
}
.sy-tagline button {
    padding: var(--space-3) var(--space-6);
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: #fff;
    cursor: pointer;
}
.sy-tagline button:hover { background: var(--color-primary-hover); }

.sy-block,
.sy-catblock {
    margin: var(--space-12) 0;
}
.sy-sechead h2,
.sy-who-title,
.sy-cat-title a {
    color: var(--color-text);
}
.sy-cat-title {
    font-size: var(--text-2xl);
    margin: 0 0 var(--space-1);
}
.sy-cat-title a { text-decoration: none; }
.sy-cat-title a:hover { color: var(--color-primary); }
.sy-ch { margin-bottom: var(--space-5); }
.sy-subs {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}
.sy-subs a { color: var(--color-text-secondary); }
.sy-subs a:hover { color: var(--color-primary); }

.sy-empty {
    color: var(--color-text-muted);
    padding: var(--space-8);
    text-align: center;
    background: var(--color-bg-alt);
    border-radius: var(--radius-md);
    border: 1px dashed var(--color-border);
}

/* Why Shrimpyo / team */
.sy-who {
    background: var(--color-bg-alt);
    padding: var(--space-12) 0;
    margin-top: var(--space-12);
}
.sy-who-title {
    font-size: var(--text-3xl);
    text-align: center;
    margin: 0 0 var(--space-4);
}
.sy-sub {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--space-2);
    color: var(--color-text-secondary);
}
.sy-sub a { color: var(--color-primary); }

.sy-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-10);
    margin: var(--space-8) 0;
}
.sy-stat { text-align: center; }
.sy-stat b {
    display: block;
    font-size: var(--text-3xl);
    color: var(--color-primary);
}
.sy-stat span {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.sy-teamlbl {
    text-align: center;
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-5);
    color: var(--color-text);
}
.sy-team {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-6);
    max-width: var(--container-lg);
    margin: 0 auto;
}
.sy-member {
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
}
.sy-member img {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-full);
    object-fit: cover;
    margin: 0 auto var(--space-2);
    display: block;
}
.sy-member b {
    display: block;
    font-size: var(--text-sm);
}
.sy-member span {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.sy-member:hover b { color: var(--color-primary); }

/* ---- Hero 3 cột (Latest / Featured / Trending) ---- */
.sy-hero {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: var(--space-8);
    padding: var(--space-8) 0;
    border-bottom: 1px solid var(--color-border);
}
.sy-hero__label {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-3);
}
.sy-hero__item {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border-subtle);
}
.sy-hero__item a {
    display: block;
    color: var(--color-text);
    text-decoration: none;
    font-weight: var(--font-medium);
}
.sy-hero__item a:hover { color: var(--color-primary); }
.sy-hero__col--feat img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    display: block;
    margin-bottom: var(--space-3);
}
.sy-hero__col--feat h3 { margin: 0 0 var(--space-2); font-size: var(--text-xl); }
.sy-hero__col--feat h3 a { color: var(--color-text); text-decoration: none; }
.sy-hero__col--feat p { color: var(--color-text-secondary); }

.sy-date {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}
.sy-byline {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ---- Category block layout: lead-list ---- */
.sy-cols {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-8);
}
.sy-lead img { width: 100%; height: auto; border-radius: var(--radius-md); margin-bottom: var(--space-2); }
.sy-lead h3 { margin: var(--space-2) 0; }
.sy-lead h3 a { color: var(--color-text); text-decoration: none; }
.sy-lead p { color: var(--color-text-secondary); margin-top: var(--space-2); }
.sy-list .sy-li {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border-subtle);
}
.sy-list .sy-li a {
    display: block;
    color: var(--color-text);
    text-decoration: none;
    font-weight: var(--font-medium);
}
.sy-list .sy-li a:hover { color: var(--color-primary); }

/* ---- Category block layout: compact-list ---- */
.sy-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}
.sy-crow {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--color-text);
    padding: var(--space-2);
    border-radius: var(--radius-sm);
}
.sy-crow:hover { background: var(--color-surface-hover); }
.sy-crow img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }

/* ---- Category block layout: carousel ---- */
.sy-carousel {
    display: flex;
    gap: var(--space-4);
    overflow-x: auto;
    padding-bottom: var(--space-3);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.sy-carousel .sy-carousel__item {
    flex: 0 0 260px;
    scroll-snap-align: start;
}

/* ---- Newsletter band ---- */
.sy-news {
    background: var(--color-text);
    color: var(--color-surface);
    margin-top: var(--space-12);
}
.sy-news__wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-8) var(--container-padding);
    flex-wrap: wrap;
}
.sy-news__eyebrow {
    display: block;
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-primary-light);
}
.sy-news__text strong { display: block; font-size: var(--text-xl); margin: var(--space-1) 0; }
.sy-news__text p { color: var(--color-border); margin: 0; }
.sy-news__form { display: flex; gap: var(--space-2); }
.sy-news__form input[type="email"] {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    min-width: 260px;
}
.sy-news__form button {
    padding: var(--space-3) var(--space-6);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-primary);
    color: #fff;
    cursor: pointer;
    font-weight: var(--font-semibold);
}
.sy-news__form button:hover { background: var(--color-primary-hover); }
.sy-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sy-news__msg { font-weight: var(--font-medium); }
.sy-news__msg--error { color: var(--color-error); }

/* ---- Pillars (Who we are / What we do / How we do it) ---- */
.sy-pillars {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    margin: var(--space-8) 0;
}
.sy-pillar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
}
.sy-pillar__title { font-weight: var(--font-semibold); margin-bottom: var(--space-2); }
.sy-pillar p { color: var(--color-text-secondary); margin: 0; font-size: var(--text-sm); }
.sy-pillar a { color: var(--color-primary); }

/* ---- Footer 3 cột ---- */
.sy-footer {
    background: var(--color-bg);
    color: var(--color-text-secondary);
    margin-top: var(--space-12);
}
.sy-footer__top {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-10);
    padding: var(--space-12) var(--container-padding) var(--space-8);
}
.sy-footer__logo { display: flex; align-items: center; margin-bottom: var(--space-2); }
.sy-footer__logo-img { display: block; height: 56px; width: auto; max-width: 320px; object-fit: contain; }
@media (max-width: 768px) {
    .sy-footer__logo-img { height: 46px; max-width: 260px; }
}
.sy-footer__desc { color: var(--color-text-secondary); font-size: var(--text-sm); max-width: 320px; }
.sy-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
.sy-footer__cols h5 { color: #fff; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: var(--tracking-wide); margin: 0 0 var(--space-3); }
.sy-footer__cols ul { list-style: none; margin: 0; padding: 0; }
.sy-footer__cols li { margin-bottom: var(--space-2); }
.sy-footer__cols a { color: var(--color-text-secondary); text-decoration: none; font-size: var(--text-sm); }
.sy-footer__cols a:hover { color: #fff; }
.sy-footer__disclosure {
    padding: var(--space-4) var(--container-padding);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}
.sy-footer__disclosure a { color: var(--color-text-secondary); }
.sy-footer__bottom {
    padding: var(--space-4) var(--container-padding) var(--space-6);
    font-size: var(--text-xs);
    color: var(--color-text-subtle);
}

/* Responsive check: 1080 / 768 / 480 */
@media (max-width: 1080px) {
    .sy-hero { grid-template-columns: 1fr; }
    .sy-cols { grid-template-columns: 1fr; }
    .sy-footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .sy-tagline h1 { font-size: var(--text-3xl); }
    .sy-stats { gap: var(--space-6); }
    .sy-pillars { grid-template-columns: 1fr; }
    .sy-compact { grid-template-columns: 1fr; }
    .sy-footer__cols { grid-template-columns: 1fr 1fr; }
    .sy-news__wrap { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
    .sy-tagline { padding: var(--space-8) var(--space-4); }
    .sy-tagline form { flex-direction: column; }
    .sy-tagline h1 { font-size: var(--text-2xl); }
    .sy-stats { gap: var(--space-4); flex-wrap: wrap; row-gap: var(--space-4); }
    .sy-team { grid-template-columns: repeat(2, 1fr); }
    .sy-news__form { flex-direction: column; width: 100%; }
    .sy-news__form input[type="email"] { min-width: 0; width: 100%; }
    .sy-footer__cols { grid-template-columns: 1fr; }
}

/* ============================================================
   Post footer: social share icons (rebrand 2026-08-16)
   Đặt cạnh nút Share cũ của theme cha, không thay thế. Icon xám mặc định
   (đồng bộ token site), đổi màu thương hiệu thật của từng mạng khi hover
   (quy ước chuẩn, không phải màu brand của site nên không tính vi phạm
   rule H2 "1 bộ token brand duy nhất", token đó áp cho màu CỦA SITE).
   ============================================================ */
.post-footer__share-group {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.post-footer__share-icons {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.post-footer__share-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background-color: transparent;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    cursor: pointer;
    transition: color var(--duration-200) var(--ease-out), border-color var(--duration-200) var(--ease-out), background-color var(--duration-200) var(--ease-out);
}

.post-footer__share-icon:hover {
    border-color: currentColor;
    background-color: var(--color-bg-alt);
}

.post-footer__share-icon--pinterest:hover { color: #e60023; }
.post-footer__share-icon--facebook:hover { color: #1877f2; }
.post-footer__share-icon--x:hover { color: #000000; }
.post-footer__share-icon--copy:hover { color: var(--color-primary); }

.post-footer__share-icon--copy.is-copied {
    color: var(--color-success);
    border-color: var(--color-success);
}

@media (max-width: 639px) {
    .post-footer__share-group {
        flex-wrap: wrap;
        justify-content: flex-end;
    }
}

@media (max-width: 480px) {
    .post-footer__share-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
}

/* ============================================================
 * ABOUT PAGE: trust-item row cuối trang (page-about.php override)
 * Vị trí + nội dung theo bestforyourhome.org (.about-section__trust),
 * dùng token :root sẵn có (rule H2).
 * ============================================================ */

.sy-about-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-6);
    list-style: none;
    max-width: 800px;
    margin: var(--space-8) auto 0;
    padding: var(--space-6) 0 0;
    border-top: 1px solid var(--color-border);
}

.sy-about-trust__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.sy-about-trust__item i {
    color: var(--color-primary);
}

@media (max-width: 480px) {
    .sy-about-trust {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }
}

/* ============================================================
 * SITEWIDE DISCLOSURE BAR: hàng badge phía trên câu disclosure
 * (template-parts/single/disclosure.php override). Giữ cỡ chữ nhỏ
 * (--text-xs) và tông màu muted, đồng bộ .post-disclosure__text
 * gốc của theme cha, không lấn át nội dung chính trang.
 * ============================================================ */

.sy-disclosure-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-1) var(--space-4);
    list-style: none;
    margin: 0 0 var(--space-1);
    padding: 0;
}

.sy-disclosure-badges__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.sy-disclosure-badges__item i {
    color: var(--color-primary);
}

@media (max-width: 480px) {
    .sy-disclosure-badges {
        gap: var(--space-1) var(--space-3);
    }
}

/* ==========================================================================
   View counters (2026-08-19): hides the "0 views" badge site-wide. Site
   traffic is still low so a live view count reads as a broken trust
   signal instead of a real one (rule C3, no fabricated-looking data).
   CSS-only because post-hero__views in the parent theme's single.php
   prints unconditionally with no show_views arg, and post-card__views /
   post-card__footer-item--views can render on any post-card instance
   (homepage, category, search, archive). Editing parent theme files is
   not allowed (rule I1), so this is the only hook point. Kept in sync
   with the same hide applied on bestforyourhome.org and the sibling
   AffiliateCMS site.
   ========================================================================== */

.post-card__views,
.post-card__footer-item--views,
.post-hero__views {
    display: none;
}

/* ============================================================
   BUILD VIDEO block (mu-plugin shrimpyo-video-embed.php)
   Chi hien khi bai co postmeta _sy_video_url (Phase 5, chua xay dung) (mac dinh khong co).
   ============================================================ */
.sy-buildvideo {
    margin: var(--space-8) 0;
    padding: var(--space-6);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg, 10px);
}
.sy-buildvideo__title {
    margin: 0 0 var(--space-4);
    font-size: var(--text-2xl);
}
.sy-buildvideo__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}
.sy-buildvideo__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.sy-buildvideo__parts {
    margin-top: var(--space-5);
}
.sy-buildvideo__parts h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
}
.sy-buildvideo__parts ul {
    margin: 0 0 var(--space-3);
    padding-left: 1.25rem;
}
.sy-buildvideo__parts li {
    margin-bottom: var(--space-1);
}
.sy-buildvideo__table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
}
.sy-buildvideo__table th,
.sy-buildvideo__table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--color-border-subtle);
    text-align: left;
}
.sy-buildvideo__table th {
    color: var(--color-text-muted);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
}
.sy-buildvideo__table td:first-child {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
}
.sy-buildvideo__note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin: 0;
}

/* ============================================================
 * SITEWIDE DISCLOSURE BAR: hàng badge phía trên câu disclosure
 * (template-parts/single/disclosure.php override, thêm 2026-08-28).
 * Cỡ chữ nhỏ + tông muted, đồng bộ .post-disclosure__text theme cha.
 * ============================================================ */
.sy-disclosure-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-1) var(--space-4);
    list-style: none;
    margin: 0 0 var(--space-1);
    padding: 0;
}
.sy-disclosure-badges__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-text-muted);
    white-space: nowrap;
}
.sy-disclosure-badges__item i {
    color: var(--color-primary);
}
@media (max-width: 480px) {
    .sy-disclosure-badges {
        gap: var(--space-1) var(--space-3);
    }
}

/* ==========================================================================
   Deals gift button + /deals/ page (mu-plugin sy-deals-gift.php)
   Colors and spacing come from the shared tokens above and the parent theme.
   The button is a plain link to /deals/. It never opens an overlay.
   Placed bottom-left so it stays clear of the TOC action bar and the
   notification toast, which both sit bottom-right.
   ========================================================================== */

.deals-gift-wrap {
    position: fixed;
    left: var(--space-4);
    bottom: var(--space-6);
    z-index: var(--z-fixed, 100);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

.deals-gift {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-accent);
    color: var(--color-bg);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: var(--shadow-accent);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.deals-gift:hover,
.deals-gift:focus-visible {
    background: var(--color-primary);
    color: var(--color-bg);
    transform: translateY(-2px);
}

.deals-gift:focus-visible {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
}

.deals-gift__icon {
    flex: 0 0 auto;
    overflow: visible;
}

.deals-gift__label {
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
}

/* Attention cues start only when the script adds .is-live (after a short
   delay or once the reader has scrolled a bit) and stop on their own. */

/* Soft ring that ripples out from the button. */
.deals-gift::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--color-accent);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
}

.deals-gift-wrap.is-live .deals-gift::before {
    animation: deals-ring 2.2s ease-out 0.4s 5;
}

/* The lid lifts a little, like the gift is about to open. */
.deals-gift__lid {
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

.deals-gift-wrap.is-live .deals-gift__lid {
    animation: deals-lid 3s ease-in-out 1s 4;
}

/* Tap hint, touch screens only. */
.deals-gift__hand {
    display: none;
    position: absolute;
    right: -0.5rem;
    bottom: -1rem;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-text);
    fill: var(--color-surface);
    pointer-events: none;
}

@media (hover: none) and (pointer: coarse) {
    .deals-gift-wrap.is-live .deals-gift__hand {
        display: block;
        animation: deals-tap 1.4s ease-in-out 1.2s 4;
    }
}

/* Hint bubble. Hidden until the script marks the wrapper live. */
.deals-gift__tip {
    display: none;
}

.deals-gift-wrap.is-live .deals-gift__tip {
    display: block;
    animation: deals-tip-in 0.4s ease both;
}

.deals-gift__tiprow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: min(18rem, calc(100vw - 2rem));
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

/* Small tail pointing down at the button. */
.deals-gift__tiprow::after {
    content: "";
    position: absolute;
    left: 1.25rem;
    bottom: -0.4rem;
    width: 0.75rem;
    height: 0.75rem;
    border-right: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
    transform: rotate(45deg);
}

.deals-gift__tiptext {
    color: var(--color-text);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
}

.deals-gift__tiptext:hover {
    color: var(--color-accent);
}

.deals-gift__close {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.deals-gift__close:hover,
.deals-gift__close:focus-visible {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

@keyframes deals-ring {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.6); opacity: 0; }
}

@keyframes deals-lid {
    0%, 70%, 100% { transform: translateY(0) rotate(0deg); }
    82% { transform: translateY(-3px) rotate(-10deg); }
    92% { transform: translateY(-1px) rotate(-3deg); }
}

@keyframes deals-tap {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-4px, -6px); }
}

@keyframes deals-tip-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .deals-gift,
    .deals-gift::before,
    .deals-gift__lid,
    .deals-gift__hand,
    .deals-gift-wrap.is-live .deals-gift__tip {
        animation: none !important;
        transition: none;
    }
}

@media (max-width: 480px) {
    .deals-gift-wrap {
        left: var(--space-3);
        bottom: var(--space-4);
    }

    .deals-gift {
        padding: var(--space-3);
    }

    /* Icon-only button on small phones to keep clear of content. */
    .deals-gift__label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media print {
    .deals-gift-wrap {
        display: none;
    }
}

.deals-page__disclosure {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    background: var(--color-bg-alt);
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
}

.deals-page__lead {
    margin: var(--space-5, 1.25rem) 0;
    color: var(--color-text-secondary);
}

.deals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-8, 2rem);
}

.deals-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5, 1.25rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.deals-card__title {
    margin: 0;
    font-size: 1.125rem;
}

.deals-card__text {
    flex: 1 1 auto;
    margin: 0;
    color: var(--color-text-secondary);
}

.deals-card__btn {
    align-self: flex-start;
}

.deals-page__subhead {
    margin: var(--space-6) 0 var(--space-3);
    font-size: 1.25rem;
}

.deals-cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.deals-cats a {
    display: inline-block;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    text-decoration: none;
}

.deals-cats a:hover,
.deals-cats a:focus-visible {
    border-color: var(--color-accent);
}

.deals-page__note,
.deals-page__fine {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.deals-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-4);
    margin: var(--space-4) 0;
}

.deals-product {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.deals-product__img {
    display: block;
    padding: var(--space-3);
    background: var(--color-surface-raised);
    text-align: center;
}

.deals-product__img img {
    width: 100%;
    max-width: 12rem;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.deals-product__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4) var(--space-4);
}

.deals-product__badge {
    align-self: flex-start;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-accent-light);
    color: var(--color-text);
    font-size: 0.75rem;
    font-weight: 700;
}

.deals-product__title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    color: var(--color-text);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.deals-product__title:hover {
    color: var(--color-accent);
}

.deals-product__prices {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) var(--space-2);
    margin: 0;
}

.deals-product__price {
    color: var(--color-text);
    font-size: 1.25rem;
    font-weight: 800;
}

.deals-product__was {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.deals-product__save {
    color: var(--color-accent);
    font-size: 0.8125rem;
    font-weight: 700;
}

.deals-product__stamp {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.deals-product__btn {
    align-self: flex-start;
    margin-top: auto;
}

@media (max-width: 480px) {
    .deals-products {
        grid-template-columns: 1fr;
    }
}