/* DDH bundle, sinh tu dong. Sua file nguon trong child theme, dung sua file nay. */

/* ---- ddh-fonts ---- */
/* Self-hosted fonts. Replaces the two external Google Fonts requests: no
   fonts.googleapis.com / fonts.gstatic.com connections. Inter = body; Playfair
   Display (variable 400-900) = headings + wordmark site-wide (10/07/2026).
   Zilla Slab + PT Serif are legacy, kept on disk for rollback, unreferenced. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('https://dailydealhere.com/wp-content/themes/affiliateCMS-Child/assets/css/../fonts/inter-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('https://dailydealhere.com/wp-content/themes/affiliateCMS-Child/assets/css/../fonts/inter-latin.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:'Zilla Slab';font-style:normal;font-weight:400;font-display:swap;src:url('https://dailydealhere.com/wp-content/themes/affiliateCMS-Child/assets/css/../fonts/zillaslab-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:400;font-display:swap;src:url('https://dailydealhere.com/wp-content/themes/affiliateCMS-Child/assets/css/../fonts/zillaslab-400-latin.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:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;src:url('https://dailydealhere.com/wp-content/themes/affiliateCMS-Child/assets/css/../fonts/zillaslab-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Zilla Slab';font-style:normal;font-weight:700;font-display:swap;src:url('https://dailydealhere.com/wp-content/themes/affiliateCMS-Child/assets/css/../fonts/zillaslab-700-latin.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;}
/* PT Serif 700: legacy (headings moved to Playfair Display 10/07/2026), kept for rollback. */
@font-face{font-family:'PT Serif';font-style:normal;font-weight:700;font-display:swap;src:url('https://dailydealhere.com/wp-content/themes/affiliateCMS-Child/assets/css/../fonts/ptserif-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:700;font-display:swap;src:url('https://dailydealhere.com/wp-content/themes/affiliateCMS-Child/assets/css/../fonts/ptserif-700-latin.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;}
/* Playfair Display variable wght 400-900: headings + wordmark site-wide (Didone editorial, matches the OG-DDH brand card). */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url('https://dailydealhere.com/wp-content/themes/affiliateCMS-Child/assets/css/../fonts/playfair-vf-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 900;font-display:swap;src:url('https://dailydealhere.com/wp-content/themes/affiliateCMS-Child/assets/css/../fonts/playfair-vf-latin.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;}


/* ---- affiliatecms-child-style ---- */
/*
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: 1.0.4
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
   ========================================================================== */

/* Ảnh minh họa trong Buying Guide (wp:image block, className sdc-guide-img) */
.sdc-guide-img {
    margin: 18px 0 26px;
}
figure.sdc-guide-img img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 420px;
    height: auto;
    margin: 0 auto;
    border-radius: 12px;
}
.sdc-guide-img figcaption {
    text-align: right;
    font-size: 0.82rem;
    opacity: 0.65;
    margin-top: 6px;
}

/* Related Stores block cuối bài article (cross-link sang store CPT, 15/07).
   Token --color-* của theme cha nên tự ăn cả light lẫn dark. */
.ddh-relstores { margin: 30px 0 8px; }
.ddh-relstores__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}
.ddh-relstores__card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--color-border, #e2ddd3);
    border-radius: 10px;
    background: var(--color-surface, transparent);
    text-decoration: none;
}
.ddh-relstores__card:hover { border-color: var(--color-primary, #8A0729); }
.ddh-relstores__name { font-weight: 700; color: var(--color-text, inherit); }
.ddh-relstores__meta { font-size: 0.85rem; color: var(--color-text-light, inherit); opacity: 0.85; }
@media (max-width: 640px) {
    .ddh-relstores__grid { grid-template-columns: 1fr; }
}


/* ---- affiliatecms-child-header-skin ---- */
/*
 * Header skin: Paper & Red (khớp bộ màu homepage / .sdc).
 * Header dùng chung mọi trang, nhưng sdc.css chỉ nạp ở store/home/category,
 * nên skin header phải là file global riêng. Cách làm: redefine đúng các token
 * mà header cha đang dùng (surface/text/muted/border) trong phạm vi .site-header
 * -> nền, viền, chữ, dropdown, dải fade nav đổi theo 1 lần; thêm đỏ cho
 * hover/active để ăn với accent trang. Giá trị lấy y hệt sdc.css.
 */

/* ---------- Sáng (khớp .sdc light): header theo nền site ---------- */
.site-header {
    /* Freeze the masthead on scroll. The parent already sets position:sticky,
       but its `contain: layout style` can suppress sticky in some engines, so
       re-assert sticky and drop the containment. Loads after the parent bundle
       (header-skin depends on acms-main) so this wins without !important. */
    position: sticky;
    top: 0;
    z-index: 200;
    contain: none;
    --color-surface: #FFFDF8;        /* masthead giấy sáng, hơi nhạt hơn nền #F7F3EA */
    --color-surface-hover: #F1EADB;  /* hover ấm */
    --color-text: #191714;           /* mực */
    --color-text-muted: #807A6F;     /* xám ấm cho nav/icon */
    --color-border: #DED7C7;
    --color-border-subtle: #EAE4D6;
}

/* Header brand = Playfair Display wordmark (PNG logo swapped for text via the
 * get_custom_logo filter in functions.php). Red like the logo, a touch larger,
 * nowrap so it never breaks; smaller on the scrolled header and on mobile. */
.site-header .header__logo { max-width: none; overflow: visible; }
.site-header .header__wordmark-link { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; line-height: 1; }
.site-header .header__wordmark {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -.01em;
    color: #8A0729;
    white-space: nowrap;
}
.site-header .header__logo-mark {
    height: 32px;
    width: auto;
    display: block;
    flex: none;
    border-radius: 8px;
}
.site-header .header__logo-sep {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 400; /* Playfair variable floor is 400; 300 would synthesize */
    font-size: 30px;
    line-height: 1;
    color: var(--color-text-muted, #9A9384);
    transform: translateY(-1px);
}
.site-header.is-scrolled .header__wordmark { font-size: 28px; }
.site-header.is-scrolled .header__logo-mark { height: 28px; }
.site-header.is-scrolled .header__logo-sep { font-size: 26px; }
@media (max-width: 640px) {
    .site-header .header__wordmark { font-size: 24px; }
    .site-header .header__logo-mark { height: 26px; }
    .site-header .header__logo-sep { font-size: 24px; }
    .site-header .header__wordmark-link { gap: 3px; }
}

/* Đỏ cho link nav hover + mục đang xem (kiểu RetailCoupons) */
.site-header .header__menu > .menu-item > a:hover,
.site-header .header__menu > .menu-item.current-menu-item > a,
.site-header .header__menu .sub-menu li a:hover,
.site-header .header__menu > .menu-item--more .more-menu__dropdown li a:hover {
    color: #E02B2B;
    background-color: #F7ECE9;
}

.site-header .header__action-btn:hover,
.site-header .header__icon-btn:hover,
.site-header .header__menu > .menu-item--more > button:hover,
.site-header .header__menu > .menu-item--more.is-open > button {
    color: #E02B2B;
}

/* ---------- Tối (khớp [data-theme=dark] .sdc) ---------- */
[data-theme="dark"] .site-header {
    --color-surface: #23201B;
    --color-surface-hover: #2E2A23;
    --color-text: #EAE6DC;
    --color-text-muted: #9A9384;
    --color-border: #3A362E;
    --color-border-subtle: #2E2B25;
}

/* Header wordmark: brighter red on the dark masthead (matches the sdc dark red) */
[data-theme="dark"] .site-header .header__wordmark { color: #E7406D; }

[data-theme="dark"] .site-header .header__menu > .menu-item > a:hover,
[data-theme="dark"] .site-header .header__menu > .menu-item.current-menu-item > a,
[data-theme="dark"] .site-header .header__menu .sub-menu li a:hover,
[data-theme="dark"] .site-header .header__menu > .menu-item--more .more-menu__dropdown li a:hover {
    color: #FF6459;
    background-color: #3A211E;
}

[data-theme="dark"] .site-header .header__action-btn:hover,
[data-theme="dark"] .site-header .header__icon-btn:hover,
[data-theme="dark"] .site-header .header__menu > .menu-item--more > button:hover,
[data-theme="dark"] .site-header .header__menu > .menu-item--more.is-open > button {
    color: #FF6459;
}

/* ---------- Long dropdown (Categories = 27 departments) ----------
   Cap the height and let it scroll so the menu never runs past the viewport.
   Slim scrollbar in the header palette; works in both light and dark. */
.site-header .header__menu .sub-menu {
    max-height: 72vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}
.site-header .header__menu .sub-menu::-webkit-scrollbar { width: 8px; }
.site-header .header__menu .sub-menu::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 8px;
}

/* ---------- Header cleanup (user 06/07/2026) ---------- */
/* Remove the search (magnifier) button: both the compact icon and the desktop
   action variant carry data-search-toggle. */
.site-header [data-search-toggle] { display: none !important; }

/* "Today's Deals" CTA hidden for now (href="#", feature not built yet - see
   memory). Covers the desktop header CTA and the mobile nav CTA. */
.site-header .header__cta,
.mobile-nav__cta { display: none !important; }

/* Affiliate-disclosure "Learn more" link in the site red, not the teal primary. */
.post-disclosure__link { color: #E02B2B; }
[data-theme="dark"] .post-disclosure__link { color: #FF6459; }

/* Nav was centered in a flex:1 wrapper, so after the search/CTA were removed the
   menu sat marooned in the middle, far from the theme toggle. Right-align it and
   drop the right margin so the items sit close to the sun icon. */
.site-header .header__nav { justify-content: flex-end; margin-right: 0; }

/* ---------- Footer surface: share the masthead's warm dark "paper" tone ----------
   The parent paints .site-footer with var(--color-surface). In dark mode that fell
   back to the parent's cool slate (#1A1D24) while the header above uses the warm
   #23201B, so the two dark tones did not match. Mirror the header's dark token
   block so the footer reads as a continuation of the masthead (background, border,
   text). Light mode already matches (both #FFFFFF) so it needs no override. */
[data-theme="dark"] .site-footer {
    --color-surface: #23201B;
    --color-surface-hover: #2E2A23;
    --color-text: #EAE6DC;
    --color-text-muted: #9A9384;
    --color-border: #3A362E;
    --color-border-subtle: #2E2B25;
}

/* ---------- Footer brand: same lockup as the header (favicon mark + | +
   wordmark), a touch bigger. acms_footer_logo theme_mod is cleared so the footer
   uses its icon+text fallback; we repaint the icon span as the site favicon and
   the text span as the Playfair Display wordmark. ---------- */
.site-footer .footer__logo { gap: 6px; }
.site-footer .footer__logo-icon {
    width: 40px;
    height: 40px;
    background: url("/wp-content/uploads/ddh-fav-128x128.jpg") center / cover no-repeat;
    border-radius: 8px;
}
.site-footer .footer__logo-icon i { display: none; }
.site-footer .footer__logo-text {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1;
    letter-spacing: -.01em;
    color: #8A0729;
}
.site-footer .footer__logo-text::before {
    content: "|";
    margin-right: 6px;
    font-weight: 400; /* Playfair variable floor is 400; 300 would synthesize */
    color: var(--color-text-muted, #9A9384);
}
[data-theme="dark"] .site-footer .footer__logo-text { color: #E7406D; }

/* ---------- Footer social icons in their brand colours (both themes) ---------- */
.site-footer .footer__social-link .bi-facebook  { color: #1877F2; }
.site-footer .footer__social-link .bi-pinterest { color: #E60023; }
.site-footer .footer__social-link .bi-youtube   { color: #FF0000; }
.site-footer .footer__social-link .bi-linkedin  { color: #0A66C2; }
/* Instagram = its signature gradient (clipped to the glyph); solid fallback */
.site-footer .footer__social-link .bi-instagram {
    color: #EE2A7B;
    background: linear-gradient(45deg, #F9CE34 0%, #EE2A7B 55%, #6228D7 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* ---- ddh-skin-teal-man ---- */
/*
 * Skin: "Teal & man".
 * Sections 1-8: LIGHT MODE recolour of the whole site (parent theme +
 * sd-coupon-core .sdc pages) via token overrides, every rule wrapped in
 * html[data-theme="light"] so dark mode stays untouched.
 * Sections 9-11 (08/07/2026): homepage redesign - theme-agnostic structure
 * plus light colour AND a dark "Dem man" block scoped to .sdc-home only.
 *
 * Strategy: override the design tokens the parent (:root) and the plugin (.sdc)
 * already use, so most surfaces/text/borders follow automatically. Only the
 * places that hard-code a colour or need a gradient get a selector override.
 * No DOM/markup/heading/schema changes; colour + gradient only (no CLS).
 *
 * Tokens (source of truth):
 *   bg #F7F4EB | surface #FFFFFF | text #2D302E | text-muted #6B706C
 *   border #E8E2D0 | teal #0E7568 | man #8A0729 (fixed, never a gradient)
 *   CTA grad   linear-gradient(135deg,#8A0729,#B5123E)
 *   text grad  linear-gradient(90deg,#0E7568,#8A0729)
 */

/* ==========================================================================
   1. Reusable gradients + parent :root token overrides (light)
   ========================================================================== */
html[data-theme="light"] {
    --cta-grad: linear-gradient(135deg, #8A0729, #B5123E);
    --text-grad: linear-gradient(90deg, #0E7568, #8A0729);
    --man: #8A0729;
    --teal: #0E7568;
    --hero-bg:
        radial-gradient(700px 400px at 92% -14%, rgba(14, 117, 104, .46), transparent 70%),
        radial-gradient(580px 360px at 0% -2%, rgba(138, 7, 41, .36), transparent 68%),
        linear-gradient(160deg, #FCF6E6, #E4E7CF);

    /* parent tokens */
    --color-bg: #F7F4EB;
    --color-bg-alt: #F1EEDF;
    --color-surface: #FFFFFF;
    --color-surface-raised: #FFFFFF;
    --color-surface-hover: #F5F2E9;

    --color-text: #2D302E;
    --color-text-secondary: #565A56;
    --color-text-muted: #6B706C;

    --color-border: #E8E2D0;
    --color-border-subtle: #EFEADB;
    --color-border-strong: #DCD4BE;

    --color-primary: #0E7568;
    --color-primary-hover: #0A5F54;
    --color-primary-dark: #094E46;
    --color-primary-light: #E3F0EC;
    --color-primary-rgb: 14, 117, 104;

    --color-accent: #8A0729;
    --color-accent-hover: #B5123E;
    --color-accent-light: #F6E1E7;
}

/* ==========================================================================
   2. Plugin .sdc token overrides (light)
   ========================================================================== */
html[data-theme="light"] .sdc {
    --sdc-bg: #F7F4EB;
    --sdc-surface: #FFFFFF;
    --sdc-text: #2D302E;
    --sdc-text-2: #565A56;
    --sdc-muted: #6B706C;
    --sdc-border: #E8E2D0;
    --sdc-border-subtle: #EFEADB;
    --sdc-primary: #2D302E;
    --sdc-primary-light: #EFEADB;
    --sdc-accent: #8A0729;
    --sdc-accent-hover: #B5123E;
    --sdc-success: #0E7568;      /* verified = teal */
    --sdc-success-light: #E3F0EC;
}

/* ==========================================================================
   3. Header (parent .site-header; header-skin.css sets paper tones on it,
      so override the same tokens with higher specificity) -> white surface.
   ========================================================================== */
html[data-theme="light"] .site-header {
    --color-surface: #FFFFFF;
    --color-surface-hover: #F5F2E9;
    --color-text: #2D302E;
    --color-text-muted: #6B706C;
    --color-border: #E8E2D0;
    --color-border-subtle: #EFEADB;
    background-color: #FFFFFF;
    border-bottom-color: #E8E2D0;
}

/* nav hover + current -> teal (was red in header-skin.css) */
html[data-theme="light"] .site-header .header__menu > .menu-item > a:hover,
html[data-theme="light"] .site-header .header__menu > .menu-item.current-menu-item > a,
html[data-theme="light"] .site-header .header__menu .sub-menu li a:hover,
html[data-theme="light"] .site-header .header__menu > .menu-item--more .more-menu__dropdown li a:hover {
    color: var(--teal);
    background-color: #E3F0EC;
}
html[data-theme="light"] .site-header .header__action-btn:hover,
html[data-theme="light"] .site-header .header__icon-btn:hover,
html[data-theme="light"] .site-header .header__menu > .menu-item--more > button:hover,
html[data-theme="light"] .site-header .header__menu > .menu-item--more.is-open > button {
    color: var(--teal);
}
/* affiliate disclosure "Learn more" link -> teal */
html[data-theme="light"] .post-disclosure__link {
    color: var(--teal);
}

/* ==========================================================================
   4. Homepage wash: the hero gradient now spans the WHOLE page (was hero-only),
      so the hero blends in as a normal section (its box + radius are dropped
      in section 9). Search field styling below.
   ========================================================================== */
html[data-theme="light"] .sdc-home {
    background: var(--hero-bg);
}
/* Phones: the fixed-size radials cover a much bigger share of the narrow hero,
   so the wash reads darker than on desktop. Shrink them and lower the alpha so
   the box matches the desktop look. */
@media (max-width: 768px) {
    html[data-theme="light"] {
        --hero-bg:
            radial-gradient(420px 300px at 96% -12%, rgba(14, 117, 104, .26), transparent 62%),
            radial-gradient(360px 260px at -6% -4%, rgba(138, 7, 41, .18), transparent 60%),
            linear-gradient(165deg, #FCF7E9, #EFF0DF);
    }
}
html[data-theme="light"] .sdc-find input {
    background: #FFFFFF;
    border-color: #E8E2D0;
}
html[data-theme="light"] .sdc-find input:focus {
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(14, 117, 104, .15);
}

/* ==========================================================================
   5. CTAs -> gradient man (keep size/padding; text white)
   ========================================================================== */
html[data-theme="light"] .btn--primary,
html[data-theme="light"] .header__cta,
html[data-theme="light"] .sdc-btn--deal,
html[data-theme="light"] .sdc-btn--visit,
html[data-theme="light"] .sdc-btn--code,
html[data-theme="light"] .sdc-btn--copy,
html[data-theme="light"] .sdc-reviews .form-submit .submit,
html[data-theme="light"] .sdc-find__go,
html[data-theme="light"] .sdc-pill.is-active {
    background: var(--cta-grad);
    border-color: transparent;
    color: #fff;
}
/* keep the gradient on hover (the home teal-hover rule would otherwise win) */
html[data-theme="light"] .btn--primary:hover,
html[data-theme="light"] .sdc-btn--deal:hover,
html[data-theme="light"] .sdc-btn--visit:hover,
html[data-theme="light"] .sdc-btn--code:hover,
html[data-theme="light"] .sdc-find__go:hover,
html[data-theme="light"] .sdc-home .sdc-btn--visit:hover,
html[data-theme="light"] .sdc-home .sdc-find__go:hover {
    background: var(--cta-grad);
    border-color: transparent;
    filter: brightness(.94);
    color: #fff;
}

/* Dark mode CTA family: light defined --cta-grad only, so dark solid buttons
   fell back to the flat salmon --sdc-accent. Reuse the night-red gradient the
   homepage already uses for its search button, site-wide so the store page (and
   /stores/) match the homepage. The base rule outspecifies the base :hover, so
   the gradient survives hover; brightness gives the hover feedback. */
html[data-theme="dark"] .sdc-btn--deal,
html[data-theme="dark"] .sdc-btn--visit,
html[data-theme="dark"] .sdc-btn--code,
html[data-theme="dark"] .sdc-btn--copy,
html[data-theme="dark"] .sdc-reviews .form-submit .submit,
html[data-theme="dark"] .sdc-find__go {
    background: linear-gradient(135deg, #9C0F35, #D0596F);
    border-color: transparent;
    color: #fff;
}
html[data-theme="dark"] .sdc-btn--deal:hover,
html[data-theme="dark"] .sdc-btn--visit:hover,
html[data-theme="dark"] .sdc-btn--code:hover,
html[data-theme="dark"] .sdc-btn--copy:hover,
html[data-theme="dark"] .sdc-reviews .form-submit .submit:hover {
    filter: brightness(1.08);
}

/* ==========================================================================
   6. Kicker + big title -> gradient text (short labels only, never body text)
   ========================================================================== */
html[data-theme="light"] .sdc-kicker {
    color: #8A0729; /* fallback if background-clip:text unsupported */
    background: var(--text-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* gradient underline only on the underlined kicker (not the diamond variant) */
html[data-theme="light"] .sdc-kicker:not(.sdc-kicker--diamond) {
    border-bottom: 2px solid transparent;
    border-image: var(--cta-grad) 1;
}
html[data-theme="light"] .sdc-dir__title {
    color: #2D302E; /* fallback */
    background: var(--text-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   7. Progress bars, pills, verified marks
   ========================================================================== */
html[data-theme="light"] .sdc-rank__fill,
html[data-theme="light"] .sdc-bar__fill {
    background: var(--cta-grad);
}
html[data-theme="light"] .sdc-rank__track,
html[data-theme="light"] .sdc-bar {
    background: #E8E2D0;
}

html[data-theme="light"] .sdc-pill {
    background: #FFFFFF;
    border-color: #E8E2D0;
    color: #6B706C;
}

html[data-theme="light"] .sdc-storecard__stat {
    color: var(--teal);
}
html[data-theme="light"] .sdc-storecard__stat .sdc-dot {
    background: var(--teal);
}

/* ==========================================================================
   8. Live stats: gradient border + gradient numbers
   ========================================================================== */
html[data-theme="light"] .sdc-livestats {
    border: 1px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        var(--cta-grad) border-box;
}
html[data-theme="light"] .sdc-livestats__tile b {
    color: #8A0729; /* fallback */
    background: var(--text-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   9. Teal & man homepage redesign (08/07/2026) - STRUCTURE (theme-agnostic,
      token driven). Split hero, full-width featured + flat blog rows, flipped
      shelf, thin rank bars, verified-icon cards, scroll-snap Most popular.
      Loads after sdc.css so these win over the base "Home 5" layout.
      Light colour = section 10, dark "Dem man" = section 11.
   ========================================================================== */

/* Section headings: serif, sentence case. Only "New on the Shelf" stays an
   uppercase eyebrow (.sdc-kicker--diamond). */
.sdc-home .sdc-h2 { font-family: var(--sdc-serif); font-size: clamp(1.45rem, 3vw, 1.9rem); line-height: 1.2; font-weight: 800; letter-spacing: -.01em; margin: 0 0 20px; color: var(--sdc-text); }
.sdc-home .sdc-h3 { font-family: var(--sdc-serif); font-size: .95rem; font-weight: 700; margin: 0 0 4px; color: var(--sdc-text); }

/* Hero: single column, centered (live panel removed 09/07, stats moved to the
   shelf sidebar). No box (page-wide gradient): drop background/radius and the
   horizontal padding so it aligns with the sections below. Sub + search box use
   margin auto so their capped widths stay centred under the H1. */
.sdc-home .sdc-home__hero--split { text-align: center; padding: 44px 0 46px; background: none; border-radius: 0; }
.sdc-home__herogrid { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
.sdc-home__hero--split h1 { font-family: var(--sdc-serif); font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.15; font-weight: 800; letter-spacing: -.01em; margin: 0 0 14px; }
.sdc-home__hero--split .sdc-home__sub { max-width: 46ch; margin: 0 auto 22px; font-size: 1.02rem; }
.sdc-home__hero--split .sdc-find { margin: 0 auto; max-width: 480px; }

/* Site totals: moved out of the hero into the sidebar, under Most used stores.
   Bare (matches the rank list), divided off by a top rule, compact numbers. */
.sdc-home__sidestats { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sdc-border); }
.sdc-home__sidestats .sdc-h3 { margin-bottom: 10px; }
.sdc-home__side .sdc-livestats { margin: 0; padding: 0; background: none; border: 0; }
.sdc-home__side .sdc-livestats__grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sdc-home__side .sdc-livestats__tile b { font-size: 1.2rem; line-height: 1; }
.sdc-home__side .sdc-livestats__tile span { font-size: .64rem; display: block; margin-top: 1px; }

/* Blog: full-width featured (image left / text right) + flat 2-col rows */
.sdc-home__blog { margin: 44px 0 0; }
.sdc-home__blog .sdc-feature { display: grid; grid-template-columns: 6fr 5fr; gap: 32px; align-items: center; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; margin: 0 0 28px; }
.sdc-home__blog .sdc-feature:hover { transform: none; box-shadow: none; }
.sdc-home__blog .sdc-feature__media { border: 1px solid var(--sdc-border); border-radius: 14px; overflow: hidden; background: #fff; }
/* 31/08 (ban chot): o Latest Reviews luon la bai ARTICLE (query loai cate Blog), nen anh
   featured o day la ANH SAN PHAM AMAZON nen trang, thuong vuong. Khung 3:2 + contain +
   NEN TRANG: anh san pham hoa vao nen nen khong lo dai vien (loi user che), va poster 3:2
   cua bai blog neu roi vao day cung vua khit khong bi cat chu. TUYET DOI KHONG doi sang
   cover: cover se cat mat dau/chan san pham. Xem [[feedback-anh-blog-vs-article]]. */
.sdc-home__blog .sdc-feature__media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; display: block; padding: 10px; box-sizing: border-box; }
.sdc-home__blog .sdc-feature__body { padding: 0; gap: 10px; }
.sdc-home__blog .sdc-feature__body > b { font-size: 1.5rem; line-height: 1.25; }
.sdc-postrows { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 40px; }
.sdc-prow { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--sdc-border); text-decoration: none; color: var(--sdc-text); }
.sdc-prow__ph { flex: 0 0 auto; width: 70px; height: 52px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--sdc-surface); border: 1px solid var(--sdc-border); border-radius: 10px; }
.sdc-prow__ph img { max-width: 86%; max-height: 86%; object-fit: contain; }
.sdc-prow__ph-txt { font-family: var(--sdc-serif); font-weight: 800; font-size: .8rem; color: var(--sdc-muted); }
.sdc-prow__body { min-width: 0; }
.sdc-prow__body b { display: block; font-family: var(--sdc-serif); font-size: .95rem; line-height: 1.4; font-weight: 700; }
.sdc-prow__body em { display: block; margin-top: 3px; font-size: .74rem; color: var(--sdc-muted); font-style: normal; }
.sdc-home .sdc-prow:hover b { color: var(--sdc-teal); }

/* Shelf: sidebar (300px) LEFT, directory RIGHT on PC; 1 col under 981 (spec) */
.sdc-home__shelf--flip { margin-top: 48px; }
@media (min-width: 861px) and (max-width: 980px) {
    .sdc-home .sdc-home__shelf--flip { grid-template-columns: 1fr; }
}
@media (min-width: 981px) {
    .sdc-home .sdc-home__shelf--flip { grid-template-columns: 300px 1fr; }
    .sdc-home .sdc-home__shelf--flip .sdc-home__side { order: 0; }
    .sdc-home .sdc-home__shelf--flip .sdc-home__new { order: 0; }
}
.sdc-home__note--top { margin: 2px 0 12px; }
.sdc-rankbox--bare { background: none; border: 0; border-radius: 0; padding: 0; }
.sdc-rankbox--bare .sdc-rank { border-bottom: 0; gap: 10px; padding: 8px 0; }
.sdc-rankbox--bare .sdc-rank__num { font-family: inherit; font-weight: 600; font-size: .8rem; color: var(--sdc-muted); width: 16px; }
.sdc-rankbox--bare .sdc-rank__main b { font-size: .85rem; margin-bottom: 5px; }
.sdc-rankbox--bare .sdc-rank__track { height: 3px; }
.sdc-rankbox--bare .sdc-rank__used { font-size: .72rem; }

/* Directory: verified icon, no progress bar (bar markup removed in template) */
.sdc-home .sdc-dir__title { font-size: clamp(1.6rem, 3.4vw, 2.1rem); line-height: 1.15; }
.sdc-home .sdc-dir__title em { font-style: normal; }
.sdc-storecard--dir .sdc-storecard__stat { align-items: center; }
.sdc-storecard--dir .sdc-storecard__stat .bi { font-size: .95rem; line-height: 1; }

/* Most popular: 2-up grid (~5 rows) of horizontal cards (media left; title,
   excerpt and date right). Drops to one column on phones so the media + text
   never gets crushed. */
.sdc-home__reviews { margin-top: 44px; }
.sdc-home__reviews .sdc-reviews__grid { grid-template-columns: repeat(2, 1fr); }
.sdc-home__reviews .sdc-pop__card { display: flex; gap: 14px; background: var(--sdc-surface); border: 1px solid var(--sdc-border); border-radius: 12px; padding: 12px; text-decoration: none; color: var(--sdc-text); transition: transform .15s ease, box-shadow .15s ease; }
.sdc-home__reviews .sdc-pop__card:hover { transform: translateY(-2px); box-shadow: var(--sdc-shadow-lift); color: var(--sdc-text); }
.sdc-home__reviews .sdc-pop__media,
.sdc-home__reviews .sdc-pop__ph { flex: 0 0 118px; height: 92px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--sdc-surface); border: 1px solid var(--sdc-border); border-radius: 8px; }
.sdc-home__reviews .sdc-pop__media img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 6px; box-sizing: border-box; }
.sdc-home__reviews .sdc-pop__ph { font-weight: 800; font-size: 1rem; color: var(--sdc-muted); }
.sdc-home__reviews .sdc-pop__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sdc-home__reviews .sdc-pop__title { font-size: .9rem; font-weight: 700; line-height: 1.35; }
.sdc-home__reviews .sdc-pop__excerpt { font-size: .8rem; line-height: 1.5; color: var(--sdc-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sdc-home__reviews .sdc-pop__date { font-size: .72rem; color: var(--sdc-muted); font-style: normal; margin-top: auto; }
@media (max-width: 720px) { .sdc-home__reviews .sdc-reviews__grid { grid-template-columns: 1fr; } }
.sdc-home__more--left { justify-content: flex-start; margin-top: 12px; }
.sdc-tlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .9rem; color: var(--sdc-teal); text-decoration: none; }
.sdc-tlink .bi { font-size: .82rem; }
.sdc-home .sdc-tlink:hover { color: var(--sdc-teal); text-decoration: underline; }

@media (max-width: 980px) {
    .sdc-home__herogrid { grid-template-columns: 1fr; gap: 26px; }
    .sdc-home .sdc-home__hero--split { padding: 30px 0 32px; }
    .sdc-home__blog .sdc-feature { grid-template-columns: 1fr; gap: 16px; }
    /* 31/08: bo override 220px, aspect-ratio 3/2 tu co gian theo man hinh */
    .sdc-postrows { grid-template-columns: 1fr; }
}

/* ==========================================================================
   10. Homepage redesign - LIGHT colour (Teal & man). teal #0E7568 = info,
       links, verified, selection; man #8A0729 = commerce emphasis only.
   ========================================================================== */
html[data-theme="light"] .sdc-home { --sdc-teal: #0E7568; --sdc-surface: #FFFEFB; }
/* Site totals numbers: teal to sit with the rank bars (override the man gradient
   from section 8, which still targets any .sdc-livestats in light mode). */
html[data-theme="light"] .sdc-home__side .sdc-livestats__tile b { background: none; -webkit-text-fill-color: currentColor; color: #0E7568; }
html[data-theme="light"] .sdc-home .sdc-kicker--diamond,
html[data-theme="light"] .sdc-home .sdc-kicker--diamond::before { color: #0E7568; background: none; -webkit-text-fill-color: currentColor; }
html[data-theme="light"] .sdc-home .sdc-dir__title { color: var(--sdc-text); background: none; -webkit-text-fill-color: currentColor; }
html[data-theme="light"] .sdc-home .sdc-dir__title em { color: #8A0729; }
html[data-theme="light"] .sdc-home .sdc-rankbox--bare .sdc-rank__fill { background: #0E7568; opacity: .6; }
html[data-theme="light"] .sdc-home .sdc-rankbox--bare .sdc-rank__track { background: transparent; }
html[data-theme="light"] .sdc-home .sdc-storecard__stat { color: #0E7568; }

/* ==========================================================================
   11. Homepage redesign - DARK "Dem man" (plum night). Scoped to .sdc-home so
       store/article dark pages keep the warm Paper & Red night unchanged.
       teal #0E7568 -> lifted #4FA396 for links; man -> lifted #C96A7B.
   ========================================================================== */
html[data-theme="dark"] .sdc-home {
    --sdc-teal: #4FA396;
    --sdc-bg: #1C1318;
    --sdc-surface: #281C22;
    --sdc-text: #ECE4E2;
    --sdc-text-2: #CBB9BF;
    --sdc-muted: #A6989D;
    --sdc-border: #3B2C33;
    --sdc-border-subtle: #2C2027;
    --sdc-accent: #C96A7B;
    --sdc-accent-hover: #D97F8E;
}
html[data-theme="dark"] .sdc-home {
    background:
        radial-gradient(520px 280px at 88% -12%, rgba(79, 163, 150, .12), transparent 62%),
        radial-gradient(420px 240px at 2% 4%, rgba(201, 106, 123, .12), transparent 60%),
        linear-gradient(168deg, #241820, #1A1116);
}
html[data-theme="dark"] .sdc-home__side .sdc-livestats__tile b { color: #4FA396; }
html[data-theme="dark"] .sdc-home .sdc-kicker--diamond,
html[data-theme="dark"] .sdc-home .sdc-kicker--diamond::before { color: #4FA396; background: none; -webkit-text-fill-color: currentColor; }
html[data-theme="dark"] .sdc-home .sdc-dir__title { color: var(--sdc-text); }
html[data-theme="dark"] .sdc-home .sdc-dir__title em { color: #C96A7B; }
html[data-theme="dark"] .sdc-home .sdc-rankbox--bare .sdc-rank__fill { background: #4FA396; opacity: .7; }
html[data-theme="dark"] .sdc-home .sdc-storecard__stat { color: #4FA396; }
html[data-theme="dark"] .sdc-home .sdc-find__go { background: linear-gradient(135deg, #9C0F35, #D0596F); color: #fff; }

/* Motion: single hero entrance, gated (no scroll listeners) */
@media (prefers-reduced-motion: no-preference) {
    .sdc-home__herogrid > * { animation: sdcHomeRise .5s cubic-bezier(.16, 1, .3, 1) both; }
    .sdc-home__herogrid > *:last-child { animation-delay: .08s; }
    @keyframes sdcHomeRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}

/* ==========================================================================
   12. Homepage typography (09/07/2026): serif headings + system-ui body.
       PT Serif 700 headings = "serious journalism" voice for E-E-A-T (Trust);
       system-ui body, line-height 1.7. Homepage only (scoped .sdc-home) - the
       store/article pages keep Zilla Slab + Inter. Base font-size is already
       16px (html reset). Ink #1A1A1A is LIGHT ONLY; dark keeps its lifted
       --sdc-text so text stays readable on the dark wash.
   ========================================================================== */
.sdc-home {
    --sdc-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.7;
}
/* Hero deck + feature excerpt are body copy: follow the system-ui body, not serif */
.sdc-home .sdc-home__sub,
.sdc-home .sdc-feature__excerpt { font-family: inherit; }
/* Base body ink (light mode only) */
html[data-theme="light"] .sdc-home { color: #1A1A1A; }

/* ==========================================================================
   13. Store page typography (09/07/2026): same treatment as the homepage,
       scoped to the store single page (body.single-store). Headings = PT Serif
       700; the reading body (prose paragraphs, review text, hero deck) = system
       UI, line-height 1.7, ink #1A1A1A. Ink is LIGHT ONLY; dark keeps its
       lifted --sdc-text-2 so the prose stays readable on the dark paper.
       /stores/, /categories/, blog stay Zilla Slab + Inter.
   ========================================================================== */
body.single-store .sdc {
    --sdc-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.7;
}
/* These use --sdc-serif in the base = body copy, so pull them back to sans.
   Headings inside prose keep their own .sdc-prose h2/h3 serif rule. */
body.single-store .sdc-prose,
body.single-store .sdc-review__text,
body.single-store .sdc-hero__sub {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* Reading-body ink #1A1A1A (light only); prose sets its own colour so override
   it here too, not just the inheriting container. Muted meta/byline keep their
   softer grey. */
/* Light-mode ink for ALL non-CMS content (09/07). Widened from store-only to
   every page EXCEPT CMS/blog/article (body.ddh-cms-content keeps the theme ink).
   Fixes the real faint text site-wide: --sdc-muted #807A6F was ~3.9:1 (fails
   WCAG AA). Finding: the brief's #241F1A / #5C554C were actually LIGHTER than the
   site's own #191714 / #45413A, so this follows the brief's INTENT (dark, not
   faint), not its exact numbers. Same scope as the typography in section 15. */
html[data-theme="light"] body:not(.ddh-cms-content) .site-main {
    --sdc-text: #241F1A;
    --sdc-text-2: #3F3931;
    --sdc-muted: #5C554C;
    color: #241F1A;
}
/* Long-form reading text defaults to the secondary token -> pull to body ink.
   (.sdc-hero__sub is handled per-context: cream on the store plum hero, dark on
   the light category hero via its own --sdc-text-2.) */
html[data-theme="light"] body:not(.ddh-cms-content) .site-main :is(.sdc-prose, .sdc-review__text) {
    color: #241F1A;
}

/* ==========================================================================
   14. Store page buttons -> teal & man, matching the homepage (09/07/2026).
       Solid CTAs (Get code / Visit / Copy / Submit review) are man via the
       block in section on line ~146. Here the leftover secondary buttons/links
       that were still red (--sdc-accent) go teal. --sdc-teal was scoped to
       .sdc-home, so define it for the store page too (light + dark).
   ========================================================================== */
body.single-store .sdc { --sdc-teal: #0E7568; }
[data-theme="dark"] body.single-store .sdc { --sdc-teal: #4FA396; }

/* "View all N offers" pill + its count badge */
body.single-store .sdc-morebtn { color: var(--sdc-teal); }
body.single-store .sdc-morebtn:hover { border-color: var(--sdc-teal); }
body.single-store .sdc-morebtn__count { background: var(--sdc-teal); color: #fff; }
/* Hero section anchors + the "N reviews" byline link */
body.single-store .sdc-hero__anchors a,
body.single-store .sdc-byline__rlink { color: var(--sdc-teal); }

/* ==========================================================================
   15. Typography site-wide EXCEPT blog / article / CMS-generated content
       (09/07/2026). Those pages carry body.ddh-cms-content (child functions.php)
       and are skipped, so AI article type is untouched. Scoped to .site-main
       (content) so the shared header/footer keep the theme font on every page.
       Headings = PT Serif via --sdc-serif token (+ parent/Gutenberg headings on
       static pages); body = system-ui, line-height 1.7. Ink stays per-context
       (store gets the darker #241F1A in section 13); home + store already had
       this from sections 12-13, this just widens it to /stores/, /categories/,
       static pages, etc.
   ========================================================================== */
body:not(.ddh-cms-content) .site-main {
    --sdc-serif: "Playfair Display", Georgia, "Times New Roman", serif;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.7;
}
/* Body-copy blocks that use the serif token stay system-ui (prose/deck/review) */
body:not(.ddh-cms-content) .site-main :is(.sdc-prose, .sdc-review__text, .sdc-hero__sub, .sdc-feature__excerpt, .sdc-home__sub) {
    font-family: inherit;
}
/* Static-page + Gutenberg headings -> PT Serif (they inherit sans, no token) */
body:not(.ddh-cms-content) .site-main :is(.page-header__title, .wp-block-heading),
body:not(.ddh-cms-content) .site-main .page-content :is(h1, h2, h3, h4) {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* ==========================================================================
   16. Store hero -> plum gradient block (Change 2, 09/07). Store pages only;
       content below the hero stays flat cream. Dark hero variant included (from
       the brief's dark hero line) so dark mode is not left as a light card; the
       full dark token palette ("Change 4") is separate and still pending.
   ========================================================================== */
body.single-store .sdc-hero {
    background:
        radial-gradient(800px 400px at 88% -10%, rgba(200, 40, 90, .28) 0%, rgba(200, 40, 90, 0) 60%),
        linear-gradient(135deg, #3D0413 0%, #8A0729 55%, #B5123E 100%);
    border-color: transparent;
    box-shadow: 0 12px 30px rgba(61, 4, 19, .28);
    color: #FBF6EC; /* primary text; title + plain byline inherit this */
}
html[data-theme="dark"] body.single-store .sdc-hero {
    background:
        radial-gradient(800px 400px at 88% -10%, rgba(200, 40, 90, .15) 0%, rgba(200, 40, 90, 0) 60%),
        linear-gradient(160deg, #3D0715 0%, #6B0A22 100%);
}
/* Lead paragraph + meta -> translucent cream; names/verified -> solid cream */
body.single-store .sdc-hero .sdc-hero__sub,
body.single-store .sdc-hero .sdc-byline,
body.single-store .sdc-hero .sdc-byline__rlink,
body.single-store .sdc-hero .sdc-hero__anchors a { color: rgba(251, 246, 236, .82); }
/* H1 needs an explicit colour: the parent theme sets h1{color:var(--color-text)}
   directly, so it does NOT inherit the hero's cream (dark ink -> unreadable on
   plum in light mode). */
body.single-store .sdc-hero .sdc-hero__title,
body.single-store .sdc-hero .sdc-byline a,
body.single-store .sdc-hero .sdc-byline strong,
body.single-store .sdc-hero .sdc-verified { color: #FBF6EC; }
body.single-store .sdc-hero .sdc-hero__anchors a { border-bottom-color: rgba(251, 246, 236, .4); }
body.single-store .sdc-hero .sdc-dot { background: rgba(251, 246, 236, .5); }
body.single-store .sdc-hero .sdc-avatar { background: rgba(251, 246, 236, .18); color: #FBF6EC; }

/* Visit Store button inside the hero -> white bg, plum text (both modes) */
body.single-store .sdc-hero .sdc-btn--visit {
    background: #fff;
    border-color: transparent;
    color: #8A0729;
    font-weight: 700;
}
body.single-store .sdc-hero .sdc-btn--visit:hover {
    background: #FBF6EC;
    color: #8A0729;
    filter: none;
}

/* Stats bar: elevated white cards sitting cleanly BELOW the hero. The earlier
   negative-margin "tuck under the hero" overlapped the hero box (the stats sit
   in .sdc-layout's main column, so the pull-up landed on top of the hero on
   short/narrow layouts), so it was removed. A proper overlap would need moving
   .sdc-stats out of .sdc-layout in the template. */
body.single-store .sdc-stats { margin-top: 8px; }
body.single-store .sdc-stats__item { box-shadow: 0 6px 18px rgba(61, 4, 19, .12); }
html[data-theme="light"] body.single-store .sdc-stats__item { background: #fff; }

/* ==========================================================================
   17. Author page: Stores | Articles two-column lists (child author.php).
       Uses the parent --color-* tokens (defined for light + dark on every page)
       so there is no sdc.css dependency on author archives.
   ========================================================================== */
.author-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1040px; margin: 0 auto; }
.author-lists__col { background: var(--color-surface, #fff); border: 1px solid var(--color-border, #E8E2D0); border-radius: 14px; padding: 22px 24px; }
[data-theme="dark"] .author-lists__col { background: var(--color-bg-alt); }
.author-lists__title { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 1.1rem; font-weight: 700; color: var(--color-text); }
.author-lists__title .bi { color: var(--color-primary); font-size: 1.05rem; }
.author-lists__count { margin-left: auto; font-size: .9rem; font-weight: 800; color: var(--color-primary); }
.author-lists__list { list-style: none; margin: 0; padding: 0; }
.author-lists__item { padding: 9px 0; border-top: 1px solid var(--color-border, #E8E2D0); }
.author-lists__item:first-child { border-top: 0; }
.author-lists__row { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.author-lists__thumb { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--color-border, #E8E2D0); display: flex; align-items: center; justify-content: center; }
.author-lists__thumb img { width: 100%; height: 100%; display: block; }
.author-lists__thumb--logo img { object-fit: contain; padding: 5px; box-sizing: border-box; }
.author-lists__thumb--photo img { object-fit: cover; }
.author-lists__initial { font-weight: 800; font-size: 1.2rem; color: var(--color-primary); }
.author-lists__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.author-lists__name { font-weight: 600; line-height: 1.3; color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.author-lists__row:hover .author-lists__name { color: var(--color-primary); }
.author-lists__meta { font-size: .76rem; color: var(--color-text-muted); }
.author-lists__empty { margin: 4px 0 0; font-size: .9rem; color: var(--color-text-muted); }
.author-lists__pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--color-border, #E8E2D0); }
.author-lists__page { font-size: .82rem; font-weight: 700; color: var(--color-primary); text-decoration: none; }
.author-lists__page:hover { text-decoration: underline; }
.author-lists__page.is-disabled { color: var(--color-text-muted); opacity: .5; pointer-events: none; }
.author-lists__page-info { font-size: .78rem; color: var(--color-text-muted); }
@media (max-width: 700px) { .author-lists { grid-template-columns: 1fr; } }

/* ==========================================================================
   18. Editorial headings on CMS/blog pages -> Playfair Display (10/07/2026).
       Positive counterpart to section 15: those pages carry
       body.ddh-cms-content so 15 skips them; serif is now site-wide by
       request. Only editorial headings: post H1, archive/search H1, prose
       h2/h3 (Gutenberg or classic), blog post cards. The acms product-card
       headings ([class*="acms-"]), TOC label, Pros/Cons h4 and the
       sidebar/comment UI stay Inter. --sdc-serif is undefined on
       single/archive/search (sdc.css not enqueued there) so the family is
       literal, same value as section 15.
   ========================================================================== */
body.ddh-cms-content .post-hero__title,
body.ddh-cms-content .cat-header__title,
body.ddh-cms-content .category-header__title,
body.ddh-cms-content .post-card__title,
body.ddh-cms-content .post-content :is(h2, h3):not([class*="acms-"]) {
    font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* ==========================================================================
   19. ARTICLE SKIN (user chốt demo 13/08/2026) - áp cho MỌI bài single post.
       Nguồn chân lý demo: artifact 0320afe6 (đóng gói bài best-molle-attachments).
       Gồm: (a) nền wash bộ màu trang chủ; (b) hero xếp lại: breadcrumb PHẢI,
       title GIỮA, meta TRÁI, excerpt TRÁI; (c) DDH Score = SỐ TRƠN không nền,
       góc trên phải card, ẩn icon bar-chart; (d) nút Amazon + badge + giá về
       bộ teal/mận. Layout không phụ thuộc theme nên KHÔNG bọc data-theme;
       màu light bọc html[data-theme="light"], dark ở section 20.
   ========================================================================== */

/* (a) nền wash trang chủ cho trang bài viết */
html[data-theme="light"] body.single-post {
    background:
        radial-gradient(700px 400px at 92% -14%, rgba(14, 117, 104, .46), transparent 70%),
        radial-gradient(580px 360px at 0% -2%, rgba(138, 7, 41, .36), transparent 68%),
        linear-gradient(160deg, #FCF6E6, #E4E7CF) fixed;
}
@media (max-width: 768px) {
    html[data-theme="light"] body.single-post {
        background:
            radial-gradient(420px 300px at 96% -12%, rgba(14, 117, 104, .26), transparent 62%),
            radial-gradient(360px 260px at -6% -4%, rgba(138, 7, 41, .18), transparent 60%),
            linear-gradient(165deg, #FCF7E9, #EFF0DF) fixed;
    }
}

/* (b) hero: breadcrumb PHẢI / title GIỮA / meta TRÁI / excerpt (connector) TRÁI */
body.single-post .post-hero__content {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
}
body.single-post .post-hero__content .breadcrumb {
    order: 0;
    display: flex;
    justify-content: flex-start !important;
    margin: 0 0 14px;
}
body.single-post .post-hero__content .breadcrumb p { margin: 0; text-align: left; }
body.single-post .post-hero__title {
    order: 1;
    text-align: center !important;
    align-self: center;
    max-width: 100%;
}
body.single-post .post-hero__meta {
    order: 2;
    display: flex !important;
    justify-content: flex-start !important;
    text-align: left;
    margin: 18px 0 0 !important;
    width: 100%;
}
body.single-post .post-hero__excerpt {
    order: 3;
    text-align: left !important;
    margin: 14px 0 0 !important;
    max-width: 100% !important;
}
/* rating "Be the first to review": user chốt 13/08 cho nằm CUỐI hero,
   ngay TRÊN Table of Contents, căn GIỮA */
body.single-post .post-hero__content .post-hero__rating {
    order: 4;
    align-self: center;
    margin: 14px 0 0;
}

/* (c) DDH Score: số trơn không tô nền, ẩn icon bar-chart thừa */
body.single-post .acms-list__score-wrapper .acms-list__score-icon { display: none !important; }
body.single-post .acms-list__score-wrapper .acms-score {
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #0A5F54 !important;
    display: flex !important;
    align-items: baseline;
    gap: 1px;
}
body.single-post .acms-list__score-wrapper .acms-score__value {
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}
body.single-post .acms-list__score-wrapper .acms-score__label {
    font-size: 1.02rem !important;
    font-weight: 700 !important;
    opacity: .8;
    line-height: 1 !important;
}
/* desktop: cả cụm score neo góc trên PHẢI card, nút Amazon neo góc dưới;
   info (badge/title/brand) giữ căn giữa theo chiều cao ảnh */
@media (min-width: 769px) {
    body.single-post .acms-list__item { position: relative; }
    body.single-post .acms-list__meta .acms-list__score-wrapper {
        position: absolute !important;
        top: 12px;
        right: 16px;
        margin: 0;
        z-index: 3;
        display: grid !important;
        grid-template-columns: auto auto;
        gap: 1px 6px;
        justify-content: end;
        align-items: center;
    }
    body.single-post .acms-list__meta .acms-list__score-wrapper .acms-score {
        grid-column: 1 / -1;
        justify-self: end;
    }
    body.single-post .acms-list__row--main { align-items: center; }
    body.single-post .acms-list__price-action { align-self: end; padding-bottom: 6px; }
}

/* (d) màu thương mại của card về bộ trang chủ */
body.single-post {
    --acms-price-color: #8A0729;
    --acms-amazon-orange: #8A0729;
    --acms-amazon-orange-hover: #B5123E;
    --acms-star-active: #E5A33B;
}
body.single-post .acms-btn--amazon {
    background: var(--cta-grad, linear-gradient(135deg, #8A0729, #B5123E)) !important;
}
body.single-post .acms-btn--amazon:hover { filter: brightness(1.07); }
html[data-theme="light"] body.single-post .acms-badge--danger { background: #F6E1E7; color: #8A0729; }
html[data-theme="light"] body.single-post .acms-badge--success { background: #E3F0EC; color: #0A5F54; }

/* ==========================================================================
   20. ARTICLE DARK "Đêm mận" (khớp dark trang chủ section 11, user duyệt demo
       13/08). Trước đây bài viết dark rơi về token lạnh của theme cha; nay
       trang single post dark dùng plum night. Token đặt trên body nên chỉ
       trang bài viết đổi, store/home giữ nguyên dark cũ.
   ========================================================================== */
html[data-theme="dark"] body.single-post {
    --color-bg: #1C1318;
    --color-bg-alt: #221721;
    --color-surface: #281C22;
    --color-surface-raised: #2E2127;
    --color-surface-hover: #332329;
    --color-text: #EDE3E7;
    --color-text-secondary: #CDBAC2;
    --color-text-muted: #B39EA8;
    --color-text-subtle: #8A7580;
    --color-border: #3D2E36;
    --color-border-subtle: #342630;
    --color-border-strong: #4A3841;
    --color-primary: #4FA396;
    --color-primary-hover: #5FB3A6;
    --color-primary-dark: #3B8377;
    --color-primary-light: rgba(79, 163, 150, .15);
    --color-primary-rgb: 79, 163, 150;
    --color-accent: #C96A7B;
    --color-accent-hover: #D97F8F;
    --color-accent-light: rgba(201, 106, 123, .15);
    --cta-grad: linear-gradient(135deg, #A3234B, #C75672);
    --acms-price-color: #E0A3B1;
    --acms-amazon-orange: #A3234B;
    --acms-amazon-orange-hover: #C75672;
    --acms-star-active: #E0B25C;
    background:
        radial-gradient(520px 280px at 88% -12%, rgba(79, 163, 150, .12), transparent 62%),
        radial-gradient(420px 240px at 2% 4%, rgba(201, 106, 123, .12), transparent 60%),
        linear-gradient(#1C1318, #1C1318) fixed;
}
html[data-theme="dark"] body.single-post .acms-list__score-wrapper .acms-score { color: #7BC4B6 !important; }
html[data-theme="dark"] body.single-post .acms-badge--danger { background: #3A2530; color: #E0A3B1; }
html[data-theme="dark"] body.single-post .acms-badge--success { background: #20332E; color: #7BC4B6; }

/* 23. Homepage Blog section: shares the Most popular card style, but a single
   post should fill the row instead of leaving half the grid empty. */
.sdc-home__blogfeed .sdc-reviews__grid:has(> :only-child) { grid-template-columns: 1fr; }

/* 24. Our Blogs (29/08): featured 1200x630 có sẵn lề, cho ảnh to hơn + cover, không đụng Latest Reviews */
.sdc-home__blogfeed .sdc-pop__media,
.sdc-home__blogfeed .sdc-pop__ph { flex: 0 0 200px; height: 118px; border: 0; background: transparent; }
.sdc-home__blogfeed .sdc-pop__media img { width: 100%; height: 100%; max-height: none; object-fit: cover; padding: 0; border-radius: 8px; }
.sdc-home__blogfeed .sdc-pop__title { font-size: .98rem; }
@media (max-width: 720px) { .sdc-home__blogfeed .sdc-pop__media, .sdc-home__blogfeed .sdc-pop__ph { flex-basis: 150px; height: 90px; } }

/* 25. Anh lead bai blog (29/08): duoi hero, tren TOC, rong bang cot noi dung.
   31/08: BO ep aspect-ratio 1200/630 + object-fit cover, vi anh lead khong con
   chi tu mkfeat 1200x630 (anh GPT 3:2 bi crop mat logo goc duoi). Anh cu 1200x630
   hien y het vi ti le tu nhien trung ti le tung ep. */
body.single-post .ddh-post-lead { margin: 0 0 28px; }
body.single-post .ddh-post-lead__img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.10); }
html[data-theme="dark"] body.single-post .ddh-post-lead__img { box-shadow: 0 6px 20px rgba(0,0,0,.45); }

/* ==========================================================================
   26. Accessibility footer (31/08/2026). Lighthouse a11y 92 -> hai loi, ca hai
   deu o footer:
   (a) Contrast: .footer__copyright dung --color-text-subtle (#9ca3af tren nen
       trang) chi dat ~2.5:1, duoi nguong 4.5:1. .footer__description dung
       --color-text-muted cung sat nguong. Dat lai hai token NAY RIENG TRONG
       FOOTER de khong doi mau chu o cho khac tren site.
   (b) Touch target: .footer__link cao ~15px (text-xs, inline) nen duoi nguong
       24x24px va cac link sat nhau. Cho inline-flex + min-height 24 + padding
       ngang, gap doc rong hon; van giu nguyen font-size va layout flex-wrap.
   ========================================================================== */
.site-footer .footer__copyright { color: #5C615D; }
.site-footer .footer__description { color: #5C615D; }
.site-footer .footer__link { color: #4F544F; }

.site-footer .footer__links { gap: 8px 20px; }
.site-footer .footer__link,
.site-footer .footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    min-width: 24px;
    padding: 4px 6px;
}
.site-footer .footer__link:hover,
.site-footer .footer__link:focus-visible { color: var(--sdc-teal, #0E7568); }

html[data-theme="dark"] .site-footer .footer__copyright,
html[data-theme="dark"] .site-footer .footer__description { color: #B4B4BD; }
html[data-theme="dark"] .site-footer .footer__link { color: #C7C7CF; }