/* ============================================================
   Gạch Studio Blog Child Theme
   Main Stylesheet — v2.0 (Design Audit 2026-04)
   ============================================================ */

/* ─── CSS Custom Properties (Design Tokens) ─────────────────────────────────── */
/*
   Palette — inspired by top ColorHunt palettes:
   "Dark Modern"  #222831 / #393E46 / #00ADB5 / #EEEEEE
   "Navy & Blue"  #112D4E / #3F72AF / #DBE2EF / #F9F7F7

   Primary  : Deep Navy   #112D4E  — hero, nav, logo
   Accent   : Warm Amber  #E07B39  — CTAs, badges, highlights
   Info     : Slate Blue  #3F72AF  — links, blog section
   Surface  : Warm White  #F9F7F7  — page bg
   Surface2 : Light Steel #DBE2EF  — subtle fills
   Text     : Charcoal    #222831  — headings
   Body     : Slate       #393E46  — paragraph text
*/
:root {
    /* ── Primary palette ── */
    --lego-red:        #E07B39;   /* Warm Amber  — kept for backward compat  */
    --lego-red-dark:   #C4622A;   /* Amber dark  — hover                     */
    --lego-yellow:     #F5C518;   /* Muted gold  — stars, badges             */
    --lego-yellow-mid: #E8B400;   /* Gold dark                               */
    --lego-blue:       #3F72AF;   /* Slate Blue  — blog, links               */
    --lego-blue-light: #5B8DC9;   /* Slate light                             */
    --lego-green:      #2D9E6B;   /* Calm green  — score-great               */
    --lego-orange:     #E07B39;   /* Alias                                   */

    /* ── Semantic Color Tokens (dùng trong code mới) ── */
    --color-amber:     #E07B39;   /* Warm Amber — canonical CTA color        */
    --color-amber-dk:  #C4622A;   /* Amber dark — hover state                */
    --color-error:     #DC2626;   /* True red — error/danger/negative states */
    --color-success:   #2D9E6B;   /* Green — positive/success states         */

    /* ── Neutrals ── */
    --lego-black:      #222831;   /* Charcoal (ColorHunt #1)                 */
    --lego-white:      #FFFFFF;
    --lego-gray-50:    #F9F7F7;   /* Warm White page bg                      */
    --lego-gray-100:   #F0EDE8;   /* Light warm                              */
    --lego-gray-200:   #DBE2EF;   /* Light Steel — card borders              */
    --lego-gray-300:   #C4C9D4;
    --lego-gray-500:   #6B7280;   /* Ash — meta text                         */
    --lego-gray-700:   #393E46;   /* Slate — body                            */
    --lego-gray-900:   #222831;   /* Charcoal — dark text                    */

    /* ── Semantic tokens ── */
    --color-primary:   #112D4E;   /* Deep Navy                               */
    --color-accent:    #E07B39;   /* Warm Amber                              */
    --color-surface:   #F9F7F7;
    --color-surface-2: #DBE2EF;

    /* Typography — Be Vietnam Pro: thiết kế riêng cho tiếng Việt */
    --font-primary:   'Be Vietnam Pro', 'Nunito', 'Segoe UI', sans-serif;

    /* Spacing */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* Border Radius */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-xl:   32px;
    --radius-pill: 9999px;

    /* Shadows — softer, navy-tinted */
    --shadow-sm:  0 2px 8px rgba(17,45,78,.07);
    --shadow-md:  0 4px 16px rgba(17,45,78,.10);
    --shadow-lg:  0 8px 32px rgba(17,45,78,.13);
    --shadow-xl:  0 16px 48px rgba(17,45,78,.18);
    --shadow-red: 0 4px 20px rgba(224,123,57,.22);
    --shadow-yellow: 0 4px 20px rgba(245,197,24,.28);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.40s ease;

    /* Stud size */
    --stud-size: 20px;
}

/* ─── Reset & Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scrollbar-gutter: stable; /* Reserve scrollbar space to prevent layout shift */
}

body {
    font-family: var(--font-primary) !important;
    background-color: var(--color-surface) !important;
    color: var(--lego-gray-700) !important;
    line-height: 1.7 !important;
    -webkit-font-smoothing: antialiased;
}

/* ─── Typography ─────────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary) !important;
    color: var(--lego-black) !important;
    line-height: 1.35 !important;  /* Tăng từ 1.25 → 1.35 để tránh clip dấu tiếng Việt */
}

/* Major Third scale (×1.25) — tạo hierarchy rõ ràng */
h1 { font-size: clamp(1.75rem, 4vw, 2.75rem) !important; font-weight: 900 !important; }
h2 { font-size: clamp(1.35rem, 3vw, 2.0rem) !important;  font-weight: 800 !important; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.55rem) !important; font-weight: 700 !important; }
h4 { font-weight: 700 !important; }
h5, h6 { font-weight: 600 !important; }

a {
    color: var(--lego-blue) !important;
    text-decoration: none !important;
    transition: color var(--transition-fast) !important;
}
a:hover { color: var(--color-primary) !important; }

/* ─── Top Bar ────────────────────────────────────────────────────────────────── */
.lego-top-bar {
    background: var(--color-primary);   /* Deep Navy */
    color: var(--lego-white);
    padding: 8px 0;
    font-size: 13px;
    font-weight: 600;
    font-family: var(--font-primary);
    position: relative;
    z-index: 999;
}

.lego-topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.topbar-brand {
    color: var(--lego-yellow);   /* Gold — stands out on navy */
    font-weight: 700;
    letter-spacing: 0.3px;
}

.topbar-links {
    display: flex;
    gap: var(--space-md);
}

.topbar-links a {
    color: rgba(219,226,239,.8) !important;   /* Light steel on navy */
    font-size: 12px;
    transition: color var(--transition-fast);
}

.topbar-links a:hover { color: var(--lego-yellow) !important; }

/* ─── LEGO Stud Decorations ──────────────────────────────────────────────────── */
.lego-header-studs {
    display: flex;
    background: var(--color-primary);   /* Deep Navy strip */
    padding: 5px var(--space-lg);
    gap: 8px;
    overflow: hidden;
}

.lego-header-studs .header-stud {
    display: inline-block;
    width: var(--stud-size);
    height: var(--stud-size);
    background: var(--lego-yellow);   /* Gold studs on navy — elegant */
    border-radius: 50%;
    box-shadow: inset 0 -3px 4px rgba(0,0,0,.20), 0 2px 4px rgba(0,0,0,.15);
    flex-shrink: 0;
    animation: studPop 0.8s ease both;
}

.lego-header-studs .header-stud:nth-child(odd) { animation-delay: 0.05s; }
.lego-header-studs .header-stud:nth-child(even) { animation-delay: 0.1s; }

@keyframes studPop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ─── Header ─────────────────────────────────────────────────────────────────── */
.site-header {
    background: var(--lego-white) !important;
    border-bottom: 3px solid var(--color-surface-2) !important;
    box-shadow: var(--shadow-sm) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 990 !important;
}

.site-branding {
    padding: var(--space-md) 0 !important;
}

.site-title {
    font-family: var(--font-primary) !important;
    font-weight: 900 !important;
    font-size: 1.8rem !important;
    letter-spacing: -0.5px !important;
}

.site-title a {
    color: var(--color-primary) !important;   /* Deep Navy logo */
    display: flex !important;
    align-items: center !important;
    gap: var(--space-sm) !important;
}

.site-title a::before {
    content: '🧱';
    font-size: 1.4rem;
}

.site-description {
    color: var(--lego-gray-700) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
}

/* ─── Utility Bar (top strip) ───────────────────────────────────────────────── */
.lego-utility-bar {
    background: var(--color-primary);
    color: rgba(219,226,239,.75);
    font-size: 12px;
    font-weight: 600;
    font-family: var(--font-primary);
    z-index: 1000;
    position: relative;
}

.lego-ub-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 6px var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.lego-ub-left { display: flex; align-items: center; gap: 10px; overflow: hidden; }
.lego-ub-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.lego-ub-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--lego-yellow);
    font-weight: 800;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.ub-stud {
    display: inline-block;
    width: 10px; height: 10px;
    background: var(--lego-yellow);
    border-radius: 50%;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,.3);
}

.lego-ub-tagline {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba(219,226,239,.6);
}

.lego-ub-sep { color: rgba(219,226,239,.3); }

.lego-ub-stat { color: rgba(219,226,239,.5); white-space: nowrap; }

.ub-link {
    color: rgba(219,226,239,.75) !important;
    transition: color var(--transition-fast);
    white-space: nowrap;
}
.ub-link:hover { color: var(--lego-yellow) !important; }

.ub-divider {
    width: 1px; height: 12px;
    background: rgba(219,226,239,.2);
    display: inline-block;
}

/* ─── Main Navbar ─────────────────────────────────────────────────────────────── */
.lego-navbar {
    position: sticky;
    top: 0;
    z-index: 990;
    background: var(--lego-white);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), background var(--transition-base);
    font-family: var(--font-primary);
}

/* Thin accent stripe at top of navbar (replaces the stud row) */
.lego-navbar::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg,
        var(--color-primary) 0%,
        var(--lego-blue) 40%,
        var(--color-accent) 70%,
        var(--lego-yellow) 100%
    );
}

/* Scrolled state — slight blur */
.lego-navbar.is-scrolled {
    box-shadow: var(--shadow-md);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.lego-navbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    height: 62px;
}

/* ── Logo ────────────────────────────────────────────────────────────────────── */
.lego-navbar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    flex-shrink: 0;
}

.logo-brick {
    font-size: 1.8rem;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
    transition: transform var(--transition-base);
}

.lego-navbar-logo:hover .logo-brick { transform: rotate(-8deg) scale(1.1); }

.logo-text { display: flex; align-items: baseline; gap: 1px; }

.logo-main {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--color-primary) !important;
    letter-spacing: -0.5px;
    line-height: 1;
}

.logo-sub {
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--color-accent) !important;
    letter-spacing: 0;
}

/* ── Nav List ────────────────────────────────────────────────────────────────── */
.lego-navbar-nav { flex: 1; }

.lego-nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2px;
    height: 100%;
}

.lego-nav-item { position: relative; }

.lego-nav-link {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--lego-gray-700) !important;
    text-decoration: none !important;
    border-radius: var(--radius-md);
    transition: color var(--transition-fast), background var(--transition-fast);
    white-space: nowrap;
    position: relative;
}

.lego-nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px; left: 14px; right: 14px;
    height: 2px;
    background: var(--color-accent);
    border-radius: var(--radius-pill);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition-base);
}

.lego-nav-link:hover, .lego-nav-link.is-active {
    color: var(--color-primary) !important;
    background: var(--lego-gray-100);
}

.lego-nav-link:hover::after, .lego-nav-link.is-active::after { transform: scaleX(1); }

.nav-chevron {
    font-size: 10px;
    opacity: 0.6;
    transition: transform var(--transition-fast);
}

.lego-nav-item.has-dropdown:hover .nav-chevron,
.lego-nav-item.has-dropdown:focus-within .nav-chevron {
    transform: rotate(180deg);
}

/* ── Mega Dropdown ───────────────────────────────────────────────────────────── */
.lego-mega-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 680px;
    background: var(--lego-white);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base), visibility var(--transition-base);
    transform: translateX(-50%) translateY(-8px);
    z-index: 800;
    overflow: hidden;
}

.lego-nav-item.has-dropdown:hover .lego-mega-dropdown,
.lego-nav-item.has-dropdown:focus-within .lego-mega-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.mega-dd-inner {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;
    gap: 0;
}

.mega-dd-col {
    padding: var(--space-lg);
    border-right: 1px solid var(--lego-gray-100);
}
.mega-dd-col:last-child { border-right: none; }

.mega-dd-heading {
    font-size: 10.5px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--lego-gray-500) !important;
    margin: 0 0 var(--space-md) !important;
    padding-bottom: var(--space-sm) !important;
    border-bottom: 1px solid var(--lego-gray-200) !important;
}

.mega-dd-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mega-dd-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-md);
    color: var(--lego-gray-700) !important;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.mega-dd-link:hover {
    background: var(--color-surface-2);
    color: var(--color-primary) !important;
    transform: translateX(3px);
}

.mddl-icon { font-size: 1rem; flex-shrink: 0; width: 22px; text-align: center; }
.mddl-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--lego-gray-500);
    background: var(--lego-gray-100);
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    font-weight: 700;
}

/* Promo card in dropdown */
.mega-dd-col--promo { background: linear-gradient(135deg, var(--lego-gray-50), var(--lego-white)); }

.mega-dd-promo {
    display: block;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--lego-gray-200);
    text-decoration: none !important;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    background: var(--lego-white);
}

.mega-dd-promo:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

.mega-dd-promo-img { aspect-ratio: 16/9; overflow: hidden; }
.mega-dd-promo-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mega-dd-promo-title {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--lego-black) !important;
    padding: 8px 10px 4px;
    line-height: 1.35;
}

.mega-dd-promo-score {
    display: block;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--color-accent) !important;
    padding: 0 10px 8px;
}

/* ── Right Actions ────────────────────────────────────────────────────────────── */
.lego-navbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
    margin-left: auto;
}

.nav-action-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--lego-gray-700);
    padding: 8px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.nav-action-btn:hover { background: var(--lego-gray-100); color: var(--color-primary); }

.nav-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--color-accent) !important;
    color: var(--lego-white) !important;
    font-size: 13px;
    font-weight: 800;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    text-decoration: none !important;
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(224,123,57,.25);
}
.nav-cta-btn:hover {
    background: var(--lego-red-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(224,123,57,.35);
}

/* Hamburger (mobile only) */
.nav-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    margin-left: auto;
}
.nav-burger:hover { background: var(--lego-gray-100); }
.nav-burger span {
    display: block;
    width: 22px; height: 2px;
    background: var(--lego-gray-700);
    border-radius: 2px;
    transition: transform var(--transition-base), opacity var(--transition-base);
    transform-origin: center;
}

/* Burger → X when active */
.nav-burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Search Bar (slide-down) ─────────────────────────────────────────────────── */
.lego-navbar-search {
    border-top: 1px solid var(--lego-gray-200);
    background: var(--lego-gray-50);
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-base), padding var(--transition-base);
    padding: 0;
}

.lego-navbar-search.is-open {
    max-height: 80px;
    padding: var(--space-sm) 0;
}

.lego-navbar-search .lego-navbar-inner {
    height: auto;
    gap: var(--space-sm);
}

.lego-navbar-search .search-form {
    flex: 1 !important;
    max-width: 100% !important;
}

.search-close-btn {
    background: none;
    border: none;
    font-size: 1.4rem;
    cursor: pointer;
    color: var(--lego-gray-500);
    padding: 4px 8px;
    line-height: 1;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}
.search-close-btn:hover { color: var(--color-primary); background: var(--lego-gray-200); }

/* ── Mobile Drawer ────────────────────────────────────────────────────────────── */
.lego-mobile-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 300px;
    background: var(--lego-white);
    z-index: 1100;
    transform: translateX(100%);
    transition: transform var(--transition-base);
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 32px rgba(0,0,0,.15);
}

.lego-mobile-nav.is-open { transform: translateX(0); }

.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--lego-gray-200);
    background: var(--color-primary);
}

.mobile-nav-logo {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--lego-white);
}

.mobile-nav-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: rgba(255,255,255,.7);
    line-height: 1;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}
.mobile-nav-close:hover { color: var(--lego-white); background: rgba(255,255,255,.1); }

.mobile-nav-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 700;
    color: var(--lego-gray-700) !important;
    text-decoration: none !important;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.mobile-nav-link:hover { background: var(--lego-gray-100); color: var(--color-primary) !important; }

.mobile-nav-link--cta {
    margin-top: var(--space-sm);
    background: var(--color-accent);
    color: var(--lego-white) !important;
    justify-content: center;
}
.mobile-nav-link--cta:hover { background: var(--lego-red-dark); color: var(--lego-white) !important; }

.mobile-nav-search {
    padding: var(--space-md);
    border-top: 1px solid var(--lego-gray-200);
}

.mobile-nav-search .search-form { max-width: 100% !important; }

/* Overlay */
.lego-nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17,45,78,.4);
    backdrop-filter: blur(2px);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.lego-nav-overlay.is-visible { opacity: 1; visibility: visible; }

/* ── Hide GP's default header/nav elements ───────────────────────────────────── */
/* GP native header is still used for positioning but we hide its visual output */
.site-header,
.main-navigation,
.lego-header-studs,
.lego-top-bar { display: none !important; }

/* ── Dark Mode ────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .lego-navbar {
        background: #1E2128 !important;
        border-color: #2A2D38 !important;
    }
    .lego-navbar.is-scrolled { background: rgba(30,33,40,.95) !important; }

    .logo-main { color: #EEF0F5 !important; }
    .lego-nav-link { color: #B0B8CC !important; }
    .lego-nav-link:hover, .lego-nav-link.is-active { background: #2A2D38 !important; color: #EEF0F5 !important; }

    .lego-mega-dropdown { background: #1E2128 !important; border-color: #2A2D38 !important; }
    .mega-dd-col { border-color: #2A2D38 !important; }
    .mega-dd-col--promo { background: linear-gradient(135deg, #13161E, #1E2128) !important; }
    .mega-dd-heading { color: #888FA0 !important; border-color: #2A2D38 !important; }
    .mega-dd-link { color: #B0B8CC !important; }
    .mega-dd-link:hover { background: #2A2D38 !important; color: #EEF0F5 !important; }
    .mega-dd-promo { background: #1E2128 !important; border-color: #2A2D38 !important; }
    .mega-dd-promo-title { color: #EEF0F5 !important; }

    .lego-navbar-search { background: #13161E; border-color: #2A2D38; }
    .lego-mobile-nav { background: #1E2128; }
    .mobile-nav-link { color: #B0B8CC !important; }
    .mobile-nav-link:hover { background: #2A2D38 !important; color: #EEF0F5 !important; }
    .mobile-nav-search { border-color: #2A2D38; }
    .nav-action-btn { color: #B0B8CC; }
    .nav-action-btn:hover { background: #2A2D38; color: #EEF0F5; }
    .nav-burger span { background: #B0B8CC; }

    .lego-utility-bar { background: #0D1521; }
}

/* ── Responsive ───────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .lego-navbar-nav { display: none; }
    .nav-cta-btn { display: none; }
    .nav-burger { display: flex; }
    .lego-ub-tagline, .lego-ub-stat, .lego-ub-sep { display: none; }
}

@media (max-width: 600px) {
    .lego-mobile-nav { width: 100%; }
    .ub-link { display: none; }
}

/* ─── Breadcrumb ─────────────────────────────────────────────────────────────── */
.lego-breadcrumb {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--lego-gray-200);
    margin-bottom: var(--space-xl);
}

.breadcrumb-list {
    list-style: none;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

.breadcrumb-list li:not(:last-child)::after {
    content: '›';
    margin-left: 6px;
    color: var(--lego-gray-500);
}

.breadcrumb-list li a { color: var(--lego-blue) !important; }
.breadcrumb-list li.current { color: var(--lego-gray-500); }

/* ─── Main Container ─────────────────────────────────────────────────────────── */
.site-content {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: var(--space-xl) var(--space-lg) !important;
}

.content-area {
    width: 100% !important;
}

/* ── Front Page: force no-sidebar layout via PHP, just reset any leftover GP margins ── */
.home .site-main,
.home #primary {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Hero on front page: display as normal block, let GP's symmetric container center it */
.lego-homepage-hero {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: var(--space-xl);
}


/* ─── Post Cards (Archive / Blog) ────────────────────────────────────────────── */
.lego-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: var(--space-xl);
    margin: var(--space-xl) 0;
}

/* Archive Post Loop - override GP default */
.post-inner,
.inside-article {
    background: var(--lego-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    border: 2px solid var(--lego-gray-200);
}

.post-inner:hover,
.inside-article:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-accent);
}

/* Post thumbnail in loop */
.post-image {
    overflow: hidden;
    position: relative;
}

.post-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform var(--transition-slow);
    display: block;
}

.post-image:hover img {
    transform: scale(1.05);
}

/* Post meta */
.entry-header {
    padding: var(--space-lg) var(--space-lg) var(--space-sm) !important;
}

.entry-title {
    font-size: 1.2rem !important;
    margin-bottom: var(--space-sm) !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

.entry-title a {
    color: var(--lego-black) !important;
    transition: color var(--transition-fast) !important;
}

.entry-title a:hover { color: var(--color-accent) !important; }

.entry-meta {
    font-size: 12.5px !important;
    color: var(--lego-gray-500) !important;
    font-weight: 600 !important;
    padding: 0 var(--space-lg) !important;
}

.entry-meta a { color: var(--lego-gray-700) !important; }
.entry-meta a:hover { color: var(--color-accent) !important; }

.entry-content,
.entry-summary {
    padding: var(--space-sm) var(--space-lg) var(--space-lg) !important;
    color: var(--lego-gray-700) !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
}

/* ─── Lego Card Component ────────────────────────────────────────────────────── */
.lego-card {
    background: var(--lego-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--lego-gray-200);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    display: flex;
    flex-direction: column;
}

.lego-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.lego-card-image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16/10;
}

.lego-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lego-score-badge {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    background: var(--color-primary);   /* Deep Navy — contrast ratio ~10:1 ✅ WCAG AAA */
    color: var(--lego-white);
    font-weight: 900;
    font-size: 14px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md);
    font-family: var(--font-primary);
    text-shadow: 0 1px 2px rgba(0,0,0,.2); /* Tăng readability trên mọi background */
}

.lego-card-body {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1;
}

.lego-card-themes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.lego-theme-tag {
    background: rgba(63,114,175,.12);   /* Slate blue tint */
    color: var(--lego-blue) !important;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.lego-theme-tag:hover {
    background: var(--lego-blue) !important;
    color: var(--lego-white) !important;
    transform: scale(1.05);
}

.lego-card-title {
    font-size: 1.15rem !important;  /* Tăng từ 1.05 → 1.15 cho visual anchor mạnh hơn */
    margin: 0 !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
}

.lego-card-title a {
    color: var(--lego-black) !important;
}

.lego-card-title a:hover { color: var(--color-accent) !important; }

.lego-card-meta {
    display: flex;
    gap: var(--space-md);
    font-size: 12.5px;
    color: var(--lego-gray-700);
    font-weight: 600;
}

.lego-card-excerpt {
    color: var(--lego-gray-700) !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    flex: 1;
}

.lego-card-rating {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.lego-stars { display: inline-flex; gap: 2px; }
.lego-stars .star { font-size: 1rem; color: var(--lego-gray-300); }
.lego-stars .star.filled { color: var(--lego-yellow-mid); }

.rating-num {
    font-size: 12px;
    font-weight: 700;
    color: var(--lego-gray-700);
}

.lego-read-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--color-accent) !important;   /* Warm Amber CTA */
    color: var(--lego-white) !important;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 18px;
    border-radius: var(--radius-pill);
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    align-self: flex-start;
    margin-top: auto;
}

.lego-read-more:hover {
    background: var(--lego-red-dark) !important;
    transform: translateX(3px);
    box-shadow: var(--shadow-red);
}

/* ─── Review Box (injected after content) ───────────────────────────────────── */
.lego-review-box {
    background: var(--lego-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin: var(--space-3xl) 0 var(--space-xl);
    box-shadow: var(--shadow-xl);
    border: 2px solid var(--lego-gray-200);
    font-family: var(--font-primary);
}

/* Stud decoration rows */
.lego-studs-decoration {
    display: flex;
    padding: 8px var(--space-xl);
    gap: 10px;
    overflow: hidden;
}

.lego-studs-decoration .stud {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: var(--lego-yellow);
    border-radius: 50%;
    box-shadow: inset 0 -3px 5px rgba(0,0,0,.25), 0 2px 4px rgba(0,0,0,.15);
    flex-shrink: 0;
}

/* Review Header */
.lego-review-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, #1a3f6a 60%, #0d2340 100%);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    color: var(--lego-white);
}

.lego-review-title-area { grid-column: 1; }

.lego-review-badge {
    display: inline-block;
    background: var(--lego-yellow);
    color: var(--lego-black);
    font-size: 11px;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.lego-review-set-name {
    color: var(--lego-white) !important;
    font-size: 1.5rem !important;
    margin: 0 0 6px !important;
    font-weight: 900 !important;
}

.lego-set-number {
    font-size: 13px;
    color: rgba(255,255,255,.7);
    font-weight: 700;
    letter-spacing: 1px;
}

/* Overall Score */
.lego-overall-score {
    background: rgba(0,0,0,.25);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    text-align: center;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.2);
    min-width: 140px;
}

.lego-overall-score .score-number {
    display: block;
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--lego-yellow);
    line-height: 1;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
}

.lego-overall-score .score-max {
    font-size: 1.1rem;
    color: rgba(255,255,255,.6);
    font-weight: 700;
}

.lego-overall-score .score-label {
    font-size: 11.5px;
    color: rgba(255,255,255,.75);
    letter-spacing: 0.5px;
    margin: 4px 0 8px;
    font-weight: 600;
    text-transform: uppercase;
}

/* Set Info Grid */
.lego-set-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 1px;
    background: var(--lego-gray-200);
    border-top: 1px solid var(--lego-gray-200);
}

.set-info-item {
    background: var(--lego-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-lg) var(--space-md);
    text-align: center;
    gap: 4px;
    transition: background var(--transition-fast);
}

.set-info-item:hover { background: var(--lego-gray-50); }

.set-info-item .info-icon { font-size: 1.5rem; }
.set-info-item .info-label {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--lego-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.set-info-item .info-value {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--lego-black);
}

/* Ratings Breakdown */
.lego-ratings-breakdown {
    padding: var(--space-xl);
    background: var(--lego-gray-50);
}

.breakdown-title {
    font-size: 1rem !important;
    font-weight: 800 !important;
    margin: 0 0 var(--space-lg) !important;
    color: var(--lego-black) !important;
}

.rating-bar-item {
    display: grid;
    grid-template-columns: 90px 1fr 55px;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.rating-bar-label {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--lego-gray-700);
}

.rating-bar-track {
    background: var(--lego-gray-200);
    border-radius: var(--radius-pill);
    height: 12px;
    overflow: hidden;
    position: relative;
}

.rating-bar-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    transition: width 1.2s cubic-bezier(.22,1,.36,1);
    position: relative;
}

.rating-bar-score {
    font-size: 13px;
    font-weight: 800;
    color: var(--color-accent);
    text-align: right;
}

/* Pros & Cons */
.lego-pros-cons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--lego-white);
}

.pros-column, .cons-column {
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.pros-column {
    background: linear-gradient(135deg, #e8f8f0, #f0faf5);
    border: 2px solid #b2e4c8;
}

.cons-column {
    background: linear-gradient(135deg, #fef0f0, #fff5f5);
    border: 2px solid #f5b8b8;
}

.pros-column h4, .cons-column h4 {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    margin: 0 0 var(--space-md) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.pros-column h4 { color: var(--lego-green) !important; }
.cons-column h4 { color: var(--color-accent) !important; }

.pros-column ul, .cons-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pros-column li, .cons-column li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--lego-gray-700);
    line-height: 1.5;
}

.pros-column li::before { content: '✓'; color: var(--lego-green); font-weight: 900; flex-shrink: 0; }
.cons-column li::before { content: '✗'; color: var(--color-accent); font-weight: 900; flex-shrink: 0; }

/* Verdict */
.lego-verdict {
    background: linear-gradient(135deg, var(--color-primary), #1a3f6a);
    padding: var(--space-xl);
    color: var(--lego-white);
}

.lego-verdict h4 {
    color: var(--lego-yellow) !important;
    font-size: 1.05rem !important;
    font-weight: 900 !important;
    margin: 0 0 var(--space-sm) !important;
}

.lego-verdict p {
    color: rgba(255,255,255,.9) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

/* Buy Button */
.lego-buy-section {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg) var(--space-xl);
    background: var(--lego-gray-50);
    border-top: 1px solid var(--lego-gray-200);
    flex-wrap: wrap;
}

.lego-buy-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--color-accent), var(--lego-red-dark));
    color: var(--lego-white) !important;
    font-size: 15px;
    font-weight: 800;
    padding: 14px 32px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-red);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    letter-spacing: 0.3px;
}

.lego-buy-btn:hover {
    background: linear-gradient(135deg, var(--lego-red-dark), #9e4e1f) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(224,123,57,.40);
}

.buy-price {
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--color-accent);
    font-family: var(--font-primary);
}

/* ─── Sidebar & Widgets ──────────────────────────────────────────────────────── */
.widget-area {
    background: transparent !important;
}

.lego-widget {
    background: var(--lego-white);
    border-radius: var(--radius-lg);
    border: 2px solid var(--lego-gray-200);
    overflow: hidden;
    margin-bottom: var(--space-xl) !important;
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.lego-widget:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

.lego-widget-title {
    background: var(--color-primary) !important;   /* Deep Navy widget header */
    color: var(--lego-white) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 12px var(--space-md) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-sm) !important;
    font-family: var(--font-primary) !important;
}

.widget-stud {
    display: inline-block;
    width: 14px;
    height: 14px;
    background: var(--lego-yellow);
    border-radius: 50%;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,.3);
    flex-shrink: 0;
}

.lego-widget .widget {
    padding: var(--space-md) !important;
}

/* Widget links */
.lego-widget a {
    color: var(--lego-gray-900) !important;
    font-weight: 600 !important;
    transition: color var(--transition-fast) !important;
    font-size: 13.5px !important;
    display: block;
    padding: 5px 0;
}
.lego-widget a:hover { color: var(--color-accent) !important; }

/* ─── Single Post ────────────────────────────────────────────────────────────── */
.post-type-archive .content-area,
.single .content-area {
    max-width: 100%;
}

.single .entry-header .entry-title {
    font-size: clamp(1.5rem, 3.5vw, 2.4rem) !important;
    margin-bottom: var(--space-lg) !important;
}

.single .entry-content {
    font-size: 18px !important;
    line-height: 1.8 !important;
    color: var(--lego-gray-900) !important;
}

.single .entry-content h2 {
    border-left: 5px solid var(--color-primary);
    padding-left: var(--space-md);
    margin-top: var(--space-2xl) !important;
}

.single .entry-content h3 {
    border-left: 3px solid var(--color-accent);
    padding-left: var(--space-md);
    margin-top: var(--space-xl) !important;
}

.single .entry-content img {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.single .entry-content blockquote {
    border-left: 5px solid var(--lego-blue) !important;
    background: linear-gradient(135deg, #f0f5ff, #f5f8ff) !important;
    padding: var(--space-lg) var(--space-xl) !important;
    margin: var(--space-xl) 0 !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    font-style: italic !important;
    font-weight: 600 !important;
}

/* ─── Featured Post Hero ─────────────────────────────────────────────────────── */
.lego-hero-post {
    background: var(--lego-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    margin-bottom: var(--space-2xl);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    min-height: 400px;
    border: 2px solid transparent;
    transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.lego-hero-post:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl), 0 20px 60px rgba(224,123,57,.15);
}

.lego-hero-image {
    overflow: hidden;
    position: relative;
    min-height: 400px;
    max-height: 540px;
}

.lego-hero-image img {
    position: absolute;      /* fill container có min-height */
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lego-hero-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--space-2xl);
    gap: var(--space-md);
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--color-primary), #1a3f6a);
    color: var(--lego-white);
    font-size: 11px;
    font-weight: 800;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    width: fit-content;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hero-badge::before { content: '🔥'; }

.lego-hero-title {
    font-size: clamp(1.3rem, 2.5vw, 1.9rem) !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    color: var(--lego-black) !important;
}

.lego-hero-title a { color: var(--lego-black) !important; }
.lego-hero-title a:hover { color: var(--color-accent) !important; }

.hero-excerpt {
    color: var(--lego-gray-700);
    font-size: 18px;
    line-height: 1.7;
}

.hero-meta {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    align-items: center;
}

.hero-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lego-gray-700);
}

.hero-score {
    background: var(--color-primary);   /* Navy badge */
    color: var(--lego-white);
    font-size: 13px;
    font-weight: 900;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
}

.hero-read-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--color-accent), var(--lego-red-dark));
    color: var(--lego-white) !important;
    font-weight: 800;
    padding: 12px 28px;
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-red);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    width: fit-content;
}

.hero-read-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(224,123,57,.40);
}


/* ─── Category Section Headers ───────────────────────────────────────────────── */
.lego-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 3px solid var(--lego-gray-200);
    position: relative;
}

.lego-section-header::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 80px;
    height: 3px;
    background: var(--color-accent);
    border-radius: var(--radius-pill);
}

.lego-section-title {
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    color: var(--lego-black) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-sm) !important;
}

.lego-view-all-btn {
    font-size: 13px;
    font-weight: 700;
    color: var(--lego-red) !important;
    padding: 6px 16px;
    border: 2px solid var(--lego-red);
    border-radius: var(--radius-pill);
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}

.lego-view-all-btn:hover {
    background: var(--lego-red) !important;
    color: var(--lego-white) !important;
}

/* ─── Pagination ─────────────────────────────────────────────────────────────── */
.pagination,
.post-navigation,
.page-links {
    margin: var(--space-2xl) 0 var(--space-xl);
}

.page-numbers, .nav-links a, .nav-links span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 12px !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    border: 2px solid var(--lego-gray-200) !important;
    background: var(--lego-white) !important;
    color: var(--lego-gray-700) !important;
    transition: all var(--transition-fast) !important;
    margin: 0 3px !important;
}

.page-numbers:hover, .nav-links a:hover {
    border-color: var(--lego-red) !important;
    color: var(--lego-red) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-sm) !important;
}

.page-numbers.current {
    background: var(--lego-red) !important;
    color: var(--lego-white) !important;
    border-color: var(--lego-red) !important;
    box-shadow: var(--shadow-red) !important;
}

/* ─── Search Form ────────────────────────────────────────────────────────────── */
.search-form,
.search-form-main {
    display: flex !important;
    gap: 0 !important;
    max-width: 560px !important;
    margin: 0 auto !important;
}

.search-form input[type="search"],
.search-form-main input[type="search"] {
    flex: 1 !important;
    padding: 12px 18px !important;
    border: 1px solid var(--lego-gray-300) !important;
    border-right: none !important;
    border-radius: var(--radius-md) 0 0 var(--radius-md) !important;
    font-family: var(--font-primary) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    outline: none !important;
    transition: border-color var(--transition-fast) !important;
}

.search-form input[type="search"]:focus {
    border-color: var(--lego-red) !important;
}

.search-form button,
.search-form-main button {
    background: var(--lego-red) !important;
    color: var(--lego-white) !important;
    border: none !important;
    padding: 12px 20px !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    font-family: var(--font-primary) !important;
    transition: background var(--transition-fast) !important;
}

.search-form button:hover { background: var(--lego-red-dark) !important; }

/* ─── Footer ─────────────────────────────────────────────────────────────────── */
.site-footer {
    background: var(--lego-black) !important;
    color: rgba(255,255,255,.7) !important;
    font-family: var(--font-primary) !important;
    margin-top: var(--space-3xl);
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--lego-red) 0%, var(--lego-yellow) 50%, var(--lego-red) 100%);
}

.footer-studs-row {
    display: flex;
    background: var(--lego-red);
    padding: 10px var(--space-xl);
    gap: 10px;
    overflow: hidden;
}

.footer-studs-row .stud {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: var(--lego-yellow);
    border-radius: 50%;
    box-shadow: inset 0 -3px 4px rgba(0,0,0,.3);
    flex-shrink: 0;
}

.footer-widget-area {
    padding: var(--space-2xl) var(--space-xl);
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-2xl);
}

.footer-widget-title {
    color: var(--lego-yellow) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin-bottom: var(--space-md) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.footer-credits {
    text-align: center;
    padding: var(--space-md) var(--space-xl);
    font-size: 12.5px;
    color: rgba(255,255,255,.5) !important;
    font-weight: 600;
}

.footer-credits a {
    color: var(--lego-yellow) !important;
    font-weight: 700 !important;
}

.footer-credits a:hover { color: var(--lego-white) !important; }

/* ─── Tags & Categories ──────────────────────────────────────────────────────── */
.tags-links a,
.cat-links a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: var(--lego-gray-100) !important;
    color: var(--lego-gray-700) !important;
    border: 1px solid var(--lego-gray-300) !important;
    padding: 4px 12px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin: 3px 3px 3px 0 !important;
    transition: all var(--transition-fast) !important;
}

.tags-links a:hover, .cat-links a:hover {
    background: var(--lego-red) !important;
    color: var(--lego-white) !important;
    border-color: var(--lego-red) !important;
}

/* ─── Comments ───────────────────────────────────────────────────────────────── */
#comments {
    margin-top: var(--space-2xl);
    padding: var(--space-xl);
    background: var(--lego-white);
    border-radius: var(--radius-lg);
    border: 2px solid var(--lego-gray-200);
}

.comment-list .comment {
    border-bottom: 1px solid var(--lego-gray-200);
    padding: var(--space-lg) 0;
}

.comment-author .fn {
    font-weight: 800 !important;
    color: var(--lego-black) !important;
}

.comment-content { font-size: 14.5px; }

.say-what {
    font-size: 1.3rem;
    font-weight: 900;
    margin-bottom: var(--space-lg);
    color: var(--lego-black);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    border: 2px solid var(--lego-gray-300) !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 14px !important;
    font-family: var(--font-primary) !important;
    font-size: 14px !important;
    transition: border-color var(--transition-fast) !important;
    width: 100% !important;
}

.comment-form input:focus, .comment-form textarea:focus {
    border-color: var(--lego-red) !important;
    outline: none !important;
}

.comment-form .submit {
    background: var(--lego-red) !important;
    color: var(--lego-white) !important;
    border: none !important;
    padding: 12px 28px !important;
    border-radius: var(--radius-pill) !important;
    font-family: var(--font-primary) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    cursor: pointer !important;
    transition: background var(--transition-fast), transform var(--transition-fast) !important;
    box-shadow: var(--shadow-red) !important;
}

.comment-form .submit:hover {
    background: var(--lego-red-dark) !important;
    transform: translateY(-1px) !important;
}

/* ─── Floating "Up" Button ───────────────────────────────────────────────────── */
#lego-back-to-top {
    position: fixed;
    bottom: var(--space-xl);
    right: var(--space-xl);
    background: var(--lego-red);
    color: var(--lego-white);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    box-shadow: var(--shadow-red);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--transition-base), transform var(--transition-base);
    z-index: 9999;
    border: none;
    font-family: var(--font-primary);
}

#lego-back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
}

#lego-back-to-top:hover {
    background: var(--lego-red-dark);
    transform: translateY(-4px);
}

/* ─── Cookie / Notification Banner ──────────────────────────────────────────── */
.lego-notice-banner {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--lego-black);
    color: var(--lego-white);
    padding: var(--space-md) var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    z-index: 9998;
    font-size: 13.5px;
    font-weight: 600;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(.22,1,.36,1);
    flex-wrap: wrap;
    text-align: center;
}

.lego-notice-banner.show { transform: translateY(0); }

.lego-notice-accept {
    background: var(--lego-yellow);
    color: var(--lego-black);
    border: none;
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    font-weight: 800;
    font-size: 13px;
    cursor: pointer;
    font-family: var(--font-primary);
    transition: background var(--transition-fast), transform var(--transition-fast);
}

.lego-notice-accept:hover {
    background: #e6c200;
    transform: scale(1.05);
}

/* ─── Loading skeleton ───────────────────────────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

.lego-skeleton {
    background: linear-gradient(90deg, var(--lego-gray-200) 25%, var(--lego-gray-100) 50%, var(--lego-gray-200) 75%);
    background-size: 600px 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

/* ─── Sticky header scroll shrink ──────────────────────────────────────────────  */
.site-header.scrolled {
    box-shadow: 0 4px 24px rgba(0,0,0,.18) !important;
}

/* ─── Utility classes ────────────────────────────────────────────────────────── */
.text-red    { color: var(--lego-red) !important; }
.text-yellow { color: var(--lego-yellow) !important; }
.text-blue   { color: var(--lego-blue) !important; }
.bg-red      { background: var(--lego-red) !important; }
.bg-yellow   { background: var(--lego-yellow) !important; }

/* ─── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .lego-hero-post { grid-template-columns: 1fr; min-height: auto; }
    .lego-hero-image { max-height: 300px; }
}

@media (max-width: 768px) {
    :root { --space-xl: 20px; --space-2xl: 32px; }

    .lego-topbar-inner { flex-direction: column; gap: 6px; text-align: center; }
    .topbar-links { justify-content: center; }

    .lego-review-header {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .lego-overall-score { margin: 0 auto; }

    .lego-pros-cons { grid-template-columns: 1fr; }

    .lego-card-grid { grid-template-columns: 1fr; }

    .rating-bar-item { grid-template-columns: 70px 1fr 50px; gap: 8px; }

    .lego-buy-section { flex-direction: column; align-items: flex-start; }

    .lego-header-studs { gap: 5px; }
    .lego-header-studs .header-stud { width: 16px; height: 16px; }

    #lego-back-to-top { width: 44px; height: 44px; font-size: 17px; right: var(--space-md); bottom: var(--space-md); }
}

@media (max-width: 480px) {
    .lego-set-info-grid { grid-template-columns: 1fr 1fr; }
    .lego-review-header { padding: var(--space-lg); }
    .lego-hero-body { padding: var(--space-lg); }
}

/* ─── Print Styles ───────────────────────────────────────────────────────────── */
@media print {
    .lego-top-bar,
    .lego-header-studs,
    .main-navigation,
    .lego-buy-section,
    #lego-back-to-top,
    .lego-notice-banner { display: none !important; }
}

/* ============================================================
   Front Page — Hero & Homepage Styles
   (consolidated from front-page.php inline <style>)
   ============================================================ */
.lego-homepage-hero {
    /* Fallback: gradient đẹp khi ảnh không load */
    background-color: #0d1b2a;
    background-image:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.88) 50%,
            rgba(134, 134, 134, 0) 80%,
            rgba(13,42,63,0.92) 100%),
        url('../../assets/images/lego-hero-bg.png');
    background-size: 1200px;
    background-position: center center, top left;
    background-repeat: no-repeat;
    padding: var(--space-3xl) var(--space-lg);
    overflow: hidden;
    position: relative;
    border-radius: var(--radius-xl);
    width: 100%;
    box-sizing: border-box;
    margin-bottom: var(--space-xl);
    transition: background-size 0.6s ease;
}

.lego-homepage-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(218, 14, 21, 0.12) 0%, transparent 65%),
                radial-gradient(ellipse at 70% 80%, rgba(0, 109, 183, 0.1) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.lego-homepage-hero > * {
    position: relative;
    z-index: 1;
}

.hero-content-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg);
    display: grid;
    grid-template-columns: 1fr 300px;
    align-items: center;
    gap: var(--space-2xl);
}

.hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.8);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-md);
}

.stud-dot {
    display: inline-block;
    width: 14px; height: 14px;
    background: var(--lego-yellow);
    border-radius: 50%;
    box-shadow: inset 0 -2px 3px rgba(0,0,0,.3);
    flex-shrink: 0;
}

.hero-main-title {
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
    color: var(--lego-white) !important;
    margin: 0 0 var(--space-lg) !important;
    line-height: 1.1 !important;
    font-weight: 900 !important;
}

.highlight-lego {
    color: var(--lego-yellow);
    -webkit-text-stroke: 2px rgba(0,0,0,.1);
    text-shadow: 0 4px 20px rgba(0,0,0,.3);
}

.hero-desc {
    color: rgba(255,255,255,.85);
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: var(--space-xl);
    max-width: 520px;
}

.hero-actions {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-2xl);
}

.hero-cta-primary {
    background: var(--lego-yellow) !important;
    color: var(--lego-black) !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    padding: 14px 28px !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: var(--shadow-yellow) !important;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast) !important;
    display: inline-flex !important;
    align-items: center !important;
}

.hero-cta-primary:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 10px 32px rgba(255,215,0,.5) !important;
}

.hero-cta-secondary {
    background: rgba(255,255,255,.15) !important;
    color: var(--lego-white) !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 14px 24px !important;
    border-radius: var(--radius-pill) !important;
    border: 2px solid rgba(255,255,255,.3) !important;
    backdrop-filter: blur(8px) !important;
    transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast) !important;
    display: inline-flex !important;
    align-items: center !important;
}

.hero-cta-secondary:hover {
    background: rgba(255,255,255,.28) !important;
    border-color: rgba(255,255,255,1) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 24px rgba(255,255,255,.18) !important;
}

/* When .hero-cta-secondary is rendered as <button>, strip browser defaults */
button.hero-cta-secondary {
    cursor: pointer !important;
    font-family: var(--font-primary) !important;
    outline: none !important;
    text-decoration: none !important;
}

/* ── Hero Search Modal ──────────────────────────────────────────────────────── */
.hero-search-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: var(--space-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    margin-bottom: -20px !important;
}

.hero-search-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.hero-search-modal.is-open .hero-search-modal__box {
    transform: translateY(0) scale(1);
}

.hero-search-modal__box {
    background: var(--lego-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl) var(--space-2xl) var(--space-xl);
    width: 100%;
    max-width: 560px;
    position: relative;
    box-shadow: 0 32px 80px rgba(0,0,0,.45);
    transform: translateY(-24px) scale(0.97);
    transition: transform 0.28s cubic-bezier(.22,1,.36,1);
}

.hero-search-modal__close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: var(--lego-gray-100);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--lego-gray-700);
    font-family: var(--font-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.hero-search-modal__close:hover {
    background: var(--lego-red);
    color: var(--lego-white);
}

.hero-search-modal__title {
    font-size: 1.4rem !important;
    font-weight: 900 !important;
    color: var(--lego-black) !important;
    margin: 0 0 var(--space-lg) !important;
}

.hero-search-modal__form {
    display: flex;
    gap: 0;
    border: 1px solid var(--lego-gray-300);
    border-radius: var(--radius-pill);
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.hero-search-modal__form:focus-within {
    border-color: var(--lego-red);
}

.hero-search-modal__input {
    flex: 1;
    border: none !important;
    outline: none !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    font-family: var(--font-primary) !important;
    font-weight: 600 !important;
    color: var(--lego-black) !important;
    background: transparent !important;
    min-width: 0;
}

.hero-search-modal__input::placeholder {
    color: var(--lego-gray-500) !important;
    font-weight: 500 !important;
}

.hero-search-modal__submit {
    background: var(--lego-red);
    color: var(--lego-white);
    border: none;
    padding: 14px 24px;
    font-size: 14px;
    font-weight: 800;
    font-family: var(--font-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast);
    flex-shrink: 0;
}

.hero-search-modal__submit:hover {
    background: var(--lego-red-dark);
}

@media (max-width: 480px) {
    .hero-search-modal__box { padding: var(--space-xl) var(--space-lg) var(--space-lg); }
    .hero-search-modal__form { flex-direction: column; border-radius: var(--radius-md); }
    .hero-search-modal__input  { border-radius: 0 !important; }
    .hero-search-modal__submit { border-radius: 0; padding: 12px 20px; text-align: center; }
}

.hero-stats { display: flex; align-items: center; gap: var(--space-xl); }
.stat-item { text-align: center; }

.stat-num {
    display: block;
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--lego-yellow);
    line-height: 1;
}

.stat-label {
    font-size: 12px;
    color: rgba(255,255,255,.7);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-divider { width: 1px; height: 40px; background: rgba(255,255,255,.2); }

.hero-stud-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 10px;
    opacity: 0.4;
}

.hero-grid-stud {
    display: block;
    width: 28px; height: 28px;
    background: var(--lego-yellow);
    border-radius: 50%;
    box-shadow: inset 0 -4px 6px rgba(0,0,0,.3);
    will-change: transform;
    animation: studFloat 3s ease-in-out infinite alternate;
}

@keyframes studFloat {
    from { transform: translateY(0); }
    to   { transform: translateY(-8px); }
}

/* Quick Nav */
.lego-quick-nav-section {
    background: var(--lego-white);
    border-bottom: 3px solid var(--lego-gray-200);
    padding: var(--space-lg) 0;
    box-shadow: var(--shadow-sm);
    position: relative;
}

/* Scroll fade hints for quick nav */
.lego-quick-nav-section::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 60px;
    background: linear-gradient(to right, transparent, var(--lego-white));
    pointer-events: none;
}

.lego-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-lg); }

.quick-nav-grid {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) var(--lego-gray-200);
}

.quick-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    background: var(--lego-gray-50);
    border: 2px solid var(--lego-gray-200);
    min-width: 90px;
    text-decoration: none !important;
    transition: all var(--transition-base);
    flex-shrink: 0;
}

.quick-nav-item:hover {
    background: var(--lego-red) !important;
    border-color: var(--lego-red) !important;
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.quick-nav-item:hover .qn-label,
.quick-nav-item:hover .qn-count,
.quick-nav-item:hover .qn-icon { color: var(--lego-white) !important; }

.qn-icon { font-size: 1.5rem; }
.qn-label { font-size: 11.5px; font-weight: 700; color: var(--lego-gray-700) !important; text-align: center; line-height: 1.3; }
.qn-count { font-size: 11px; color: var(--lego-gray-500) !important; font-weight: 600; }

/* Newsletter */
.lego-newsletter-section { margin: var(--space-3xl) 0 var(--space-xl); }

.newsletter-inner {
    background: linear-gradient(135deg, var(--color-primary) 0%, #1a3f6a 100%);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.newsletter-studs {
    display: flex;
    padding: 10px var(--space-xl);
    gap: 10px;
}

.nl-stud {
    display: inline-block;
    width: 22px; height: 22px;
    background: var(--lego-yellow);
    border-radius: 50%;
    box-shadow: inset 0 -3px 4px rgba(0,0,0,.3);
    opacity: 0.7;
}

.newsletter-content { padding: var(--space-2xl) var(--space-3xl); text-align: center; color: white; }

.nl-emoji { font-size: 3rem; display: block; margin-bottom: var(--space-md); }

.nl-title {
    font-size: clamp(1.5rem, 3vw, 2rem) !important;
    color: var(--lego-white) !important;
    margin: 0 0 var(--space-sm) !important;
    font-weight: 900 !important;
}

.nl-desc { color: rgba(255,255,255,.8); font-size: 15px; margin-bottom: var(--space-xl); }

.nl-form {
    display: flex;
    gap: 0;
    max-width: 480px;
    margin: 0 auto;
    border-radius: var(--radius-pill);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.nl-input {
    flex: 1;
    padding: 14px 22px;
    border: none;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;
    outline: none;
    min-width: 0;
}

.nl-btn {
    background: var(--lego-yellow);
    color: var(--lego-black);
    border: none;
    padding: 14px 24px;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), opacity var(--transition-fast);
}

.nl-btn:hover  { background: #e6c200; }
.nl-btn:disabled { opacity: .7; cursor: not-allowed; }

.nl-feedback {
    margin-top: var(--space-md);
    font-size: 14px;
    font-weight: 700;
    min-height: 22px;
    transition: opacity var(--transition-fast);
}
.nl-feedback.success { color: #7fffd4; }
.nl-feedback.error   { color: #ffb3b3; }

/* ─── Responsive front page ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .hero-content-wrap { grid-template-columns: 1fr; }
    .hero-stud-grid    { display: none; }
    .hero-stats        { gap: var(--space-lg); }
    .newsletter-content { padding: var(--space-xl) var(--space-lg); }
    .nl-form { flex-direction: column; border-radius: var(--radius-md); }
    .nl-input, .nl-btn { border-radius: 0; padding: 12px 18px; }
}

/* ============================================================
   Single Post Styles
   (consolidated from single.php inline <style>)
   ============================================================ */
.lego-single-wrap {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--space-lg) var(--space-3xl);
}

.lego-single-article { margin-bottom: var(--space-2xl); }
.lego-single-header  { padding: var(--space-xl) 0 var(--space-lg); }

.single-post-terms { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-md); }

.single-post-title {
    font-size: clamp(1.6rem, 4vw, 2.6rem) !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    margin: 0 0 var(--space-lg) !important;
    color: var(--lego-black) !important;
}

.single-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    font-size: 13px;
    font-weight: 600;
    color: var(--lego-gray-700);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--lego-gray-200);
}

.meta-author { display: flex; align-items: center; gap: 8px; }
.meta-author img      { border-radius: 50%; }
.meta-author a        { color: var(--lego-black) !important; font-weight: 700 !important; }
.meta-author a:hover  { color: var(--lego-red) !important; }

.meta-score {
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-weight: 800;
    font-size: 12.5px;
}

/* Featured image */
.single-featured-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.single-thumb {
    width: 100% !important;
    height: auto !important;
    max-height: 480px;
    object-fit: cover;
    display: block !important;
}

.featured-image-overlay {
    position: absolute;
    bottom: var(--space-md);
    left: var(--space-md);
    display: flex;
    gap: var(--space-sm);
}

.overlay-badge {
    background: rgba(0,0,0,.7);
    color: white;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 700;
    backdrop-filter: blur(8px);
}

/* Content typography */
.lego-content { font-size: 16px !important; line-height: 1.85 !important; color: var(--lego-gray-900) !important; }
.lego-content p { margin-bottom: var(--space-lg) !important; }

.lego-content h2 {
    border-left: 5px solid var(--lego-red) !important;
    padding-left: var(--space-md) !important;
    margin-top: var(--space-2xl) !important;
    margin-bottom: var(--space-md) !important;
}

.lego-content h3 {
    border-left: 3px solid var(--lego-yellow) !important;
    padding-left: var(--space-md) !important;
    margin-top: var(--space-xl) !important;
    margin-bottom: var(--space-md) !important;
}

.lego-content ul, .lego-content ol { padding-left: var(--space-xl) !important; margin-bottom: var(--space-lg) !important; }
.lego-content li { margin-bottom: 6px !important; }

.lego-content blockquote {
    border-left: 5px solid var(--lego-red) !important;
    background: linear-gradient(135deg, #fff8f8, #fffbfb) !important;
    padding: var(--space-lg) var(--space-xl) !important;
    margin: var(--space-xl) 0 !important;
    border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
    font-style: italic !important;
    font-size: 1.05em !important;
}

.lego-content img {
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-md) !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Post footer */
.lego-post-footer {
    border-top: 2px solid var(--lego-gray-200);
    padding-top: var(--space-xl);
    margin-top: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.tags-label { font-weight: 700; color: var(--lego-gray-700); margin-right: 6px; }

.lego-share-section { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.share-label { font-weight: 700; font-size: 13.5px; color: var(--lego-gray-700); }
.share-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

.lego-share-btn {
    padding: 8px 18px;
    border: 2px solid var(--lego-gray-300);
    background: var(--lego-white);
    border-radius: var(--radius-pill);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: var(--font-primary);
    color: var(--lego-gray-900);
    transition: all var(--transition-fast);
}

.share-fb:hover   { background: #1877F2; color: white; border-color: #1877F2; }
.share-tw:hover   { background: #1DA1F2; color: white; border-color: #1DA1F2; }
.share-copy:hover { background: var(--lego-black); color: white; border-color: var(--lego-black); }

/* Author box */
.lego-author-box {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    background: linear-gradient(135deg, #f8f9fa, white);
    border: 2px solid var(--lego-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-2xl);
    box-shadow: var(--shadow-sm);
}

.author-avatar img { border-radius: 50%; display: block; }

.author-role {
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--lego-gray-500);
    display: block;
    margin-bottom: 4px;
}

.author-name { font-size: 1.1rem !important; margin: 0 0 8px !important; }
.author-name a       { color: var(--lego-black) !important; }
.author-name a:hover { color: var(--lego-red) !important; }
.author-bio { font-size: 14px !important; color: var(--lego-gray-700) !important; line-height: 1.6 !important; margin: 0 !important; }

@media (max-width: 600px) {
    .lego-author-box    { flex-direction: column; }
    .single-post-meta   { gap: 10px; }
    .lego-share-section { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Archive / Category Styles — Professional Upgrade
   ============================================================ */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.lego-archive-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-lg) var(--space-3xl);
    overflow-x: hidden;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.lego-archive-hero {
    background:
        linear-gradient(135deg,
            rgba(17,45,78,.85) 0%,
            rgba(17,45,78,.60) 60%,
            rgba(224,123,57,.80) 100%),
        linear-gradient(160deg, #112D4E 0%, #1e3a5f 40%, #C4622A 100%);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: var(--space-2xl);
    position: relative;
}

/* Subtle dot pattern overlay */
.lego-archive-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

.archive-hero-inner {
    padding: var(--space-2xl) var(--space-2xl) var(--space-xl);
    color: white;
    position: relative;
    z-index: 1;
}

.archive-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(245,197,24,.18);
    color: var(--lego-yellow);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    padding: 5px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-md);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(245,197,24,.25);
}

.archive-title {
    color: var(--lego-white) !important;
    font-size: clamp(1.6rem, 4vw, 2.6rem) !important;
    font-weight: 900 !important;
    margin: 0 0 var(--space-sm) !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.25);
    letter-spacing: -0.5px;
}

.archive-desc {
    color: rgba(255,255,255,.80) !important;
    font-size: 15px !important;
    margin: 0 0 var(--space-lg) !important;
    max-width: 560px;
    line-height: 1.7;
}

.archive-author { display: flex; align-items: center; gap: var(--space-lg); }
.archive-author img { border-radius: 50%; border: 3px solid var(--lego-yellow); }

/* ── Hero Stats Bar ─────────────────────────────────────────────────────── */
.archive-hero-stats {
    display: inline-flex;
    align-items: center;
    gap: 0;
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255,255,255,.12);
    overflow: hidden;
    margin-top: var(--space-lg);
}

.ahs-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 20px;
}

.ahs-value {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--lego-white);
    line-height: 1;
}

.ahs-label {
    font-size: 10.5px;
    font-weight: 600;
    color: rgba(255,255,255,.55);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

.ahs-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255,255,255,.12);
    flex-shrink: 0;
}

/* ── Stud Decoration ─────────────────────────────────────────────────────── */
.archive-hero-studs {
    background: rgba(0,0,0,.3);
    display: flex;
    padding: 10px var(--space-2xl);
    gap: 10px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.ah-stud {
    display: inline-block;
    width: 20px; height: 20px;
    border-radius: 50%;
    box-shadow: inset 0 -3px 4px rgba(0,0,0,.3), 0 2px 4px rgba(0,0,0,.2);
    opacity: 0.75;
    transition: opacity var(--transition-base), transform var(--transition-base);
}
.ah-stud:hover { opacity: 1; transform: scale(1.2); }
.ah-stud--gold   { background: var(--lego-yellow); }
.ah-stud--orange { background: var(--color-accent); }
.ah-stud--blue   { background: var(--lego-blue); }

/* ── Filter Bar ──────────────────────────────────────────────────────────── */
.lego-filter-bar {
    background: var(--lego-white);
    border: 1.5px solid var(--lego-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-xl);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), background var(--transition-base),
                border-radius var(--transition-base), border var(--transition-base);
    position: sticky;
    top: 62px; /* height of navbar */
    z-index: 500;
}

/* Sticky glassmorphism state */
.lego-filter-bar.is-sticky {
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    border-top: none;
    box-shadow: 0 6px 24px rgba(17,45,78,.10);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.filter-form {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 7px;
}

.filter-group label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    color: var(--lego-gray-700);
    white-space: nowrap;
    cursor: pointer;
}

.filter-group label svg { flex-shrink: 0; opacity: 0.6; }

.filter-group select {
    appearance: none;
    -webkit-appearance: none;
    padding: 7px 32px 7px 12px;
    border: 1.5px solid var(--lego-gray-300);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: var(--lego-white)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
        no-repeat right 10px center / 12px;
    color: var(--lego-gray-700);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    min-width: 130px;
}
.filter-group select:focus {
    border-color: var(--color-accent);
    outline: none;
    box-shadow: 0 0 0 3px rgba(224,123,57,.12);
}
.filter-group select:hover { border-color: var(--lego-gray-500); }

/* Spacer pushes view toggle to the right */
.filter-spacer { flex: 1; }

/* Result count label */
.filter-count {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lego-gray-500);
    white-space: nowrap;
}

/* ── View Toggle ─────────────────────────────────────────────────────────── */
.view-toggle {
    display: flex;
    border: 1.5px solid var(--lego-gray-300);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--lego-gray-500);
    transition: background var(--transition-fast), color var(--transition-fast);
    border-right: 1px solid var(--lego-gray-200);
}
.view-btn:last-child { border-right: none; }
.view-btn:hover { background: var(--lego-gray-100); color: var(--lego-gray-900); }
.view-btn.is-active {
    background: var(--color-primary);
    color: var(--lego-white);
}

/* ── Score Progress Bar ──────────────────────────────────────────────────── */
.lego-card-rating-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.lego-score-bar {
    height: 5px;
    background: var(--lego-gray-200);
    border-radius: var(--radius-pill);
    overflow: hidden;
}

.lego-score-bar-fill {
    height: 100%;
    border-radius: var(--radius-pill);
    transition: width 0.9s cubic-bezier(.4,0,.2,1);
    width: 0%;
}

/* Reuse score color classes */
.lego-score-bar-fill.score-great { background: linear-gradient(90deg, #00A950, #2ecc71) !important; box-shadow: none !important; }
.lego-score-bar-fill.score-good  { background: linear-gradient(90deg, var(--color-accent), var(--lego-yellow)) !important; box-shadow: none !important; }
.lego-score-bar-fill.score-poor  { background: linear-gradient(90deg, #e74c3c, var(--lego-red)) !important; box-shadow: none !important; }

/* ── Card Image Tag overlay ───────────────────────────────────────────────── */
.lego-card-image-tags {
    position: absolute;
    bottom: var(--space-sm);
    left: var(--space-sm);
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
}

.lego-card-image-tags .lego-theme-tag {
    background: rgba(17,45,78,.75);
    color: var(--lego-white) !important;
    backdrop-filter: blur(6px);
    font-size: 10.5px;
    border: 1px solid rgba(255,255,255,.15);
}
.lego-card-image-tags .lego-theme-tag:hover {
    background: var(--color-accent) !important;
    color: var(--lego-white) !important;
    transform: none;
}

/* ── List View mode ──────────────────────────────────────────────────────── */
#lego-archive-grid.is-list-view {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    width: 100%; /* Prevent grid from expanding beyond its container */
}

#lego-archive-grid.is-list-view .lego-card {
    flex-direction: row;
    max-height: 220px;
    min-width: 0;  /* Override `min-width: auto` on grid items to prevent track expansion */
    width: 100%;
}

#lego-archive-grid.is-list-view .lego-card-image,
#lego-archive-grid.is-list-view .lego-card-no-thumb {
    width: 240px;
    min-width: 240px;
    aspect-ratio: unset;
    height: auto;
    flex-shrink: 0;
}

#lego-archive-grid.is-list-view .lego-card-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#lego-archive-grid.is-list-view .lego-card-body {
    padding: var(--space-md) var(--space-lg);
    gap: 4px;
    overflow: hidden;
    min-width: 0; /* Prevent flex item from expanding beyond parent */
    flex: 1 1 0;  /* Explicit flex-basis: 0 to allow proper shrinking */
}

#lego-archive-grid.is-list-view .lego-card-title {
    font-size: 1.1rem !important;
    line-clamp: 2;           /* Standard property */
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

#lego-archive-grid.is-list-view .lego-card-excerpt {
    line-clamp: 2;           /* Standard property */
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 13px !important;
}

#lego-archive-grid.is-list-view .lego-card:hover {
    transform: translateX(4px) translateY(-2px);
}

/* ── No Results ──────────────────────────────────────────────────────────── */
.lego-no-results {
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
    background: var(--lego-white);
    border-radius: var(--radius-xl);
    border: 2px solid var(--lego-gray-200);
}
.no-results-icon { font-size: 4rem; margin-bottom: var(--space-lg); }
.lego-no-results h2 { font-size: 1.5rem !important; margin-bottom: var(--space-sm) !important; }
.lego-no-results p  { color: var(--lego-gray-700); margin-bottom: var(--space-xl); }
.no-results-quick-links { display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap; margin-top: var(--space-xl); }

.lego-card-no-thumb {
    background: linear-gradient(135deg, var(--lego-gray-100), var(--lego-gray-50));
    aspect-ratio: 16/10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}

/* ── Pagination ──────────────────────────────────────────────────────────── */
.lego-pagination {
    margin: var(--space-2xl) 0 var(--space-xl);
    display: flex;
    justify-content: center;
}

.lego-pagination .nav-links {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.lego-pagination .page-numbers,
.lego-pagination .nav-links a,
.lego-pagination .nav-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-primary);
    border: 1.5px solid var(--lego-gray-200);
    background: var(--lego-white);
    color: var(--lego-gray-700) !important;
    text-decoration: none !important;
    transition: background var(--transition-fast), border-color var(--transition-fast),
                color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.lego-pagination .page-numbers:hover,
.lego-pagination .nav-links a:hover {
    background: var(--lego-gray-100);
    border-color: var(--color-accent);
    color: var(--color-primary) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.lego-pagination .page-numbers.current {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--lego-white) !important;
    box-shadow: 0 4px 14px rgba(224,123,57,.30);
    transform: translateY(-1px);
}

.lego-pagination .page-numbers.dots {
    border: none;
    background: transparent;
    color: var(--lego-gray-500) !important;
}

/* ============================================================
   Footer Widget Area
   (consolidated from footer.php inline <style>)
   ============================================================ */
.footer-widget-area {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
    gap: var(--space-2xl);
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-xl);
}

.footer-brand .footer-logo { font-size: 1.6rem; font-weight: 900; color: var(--lego-white); margin-bottom: var(--space-md); display: flex; align-items: center; gap: 8px; }

.footer-logo-text {
    background: linear-gradient(135deg, var(--lego-yellow), #ffb300);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer-tagline { color: rgba(255,255,255,.6) !important; font-size: 13.5px !important; line-height: 1.7 !important; margin-bottom: var(--space-lg) !important; }
.footer-social  { display: flex; gap: 8px; }

.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    background: rgba(255,255,255,.1);
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    transition: background var(--transition-fast), transform var(--transition-fast);
    text-decoration: none !important;
}

.social-btn:hover { background: var(--lego-red) !important; transform: translateY(-3px); }

.footer-links-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }

.footer-links-list li a {
    color: rgba(255,255,255,.65) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 4px 0 !important;
    transition: color var(--transition-fast), padding-left var(--transition-fast) !important;
}

.footer-links-list li a:hover { color: var(--lego-yellow) !important; padding-left: 6px !important; }

.ft-count { background: rgba(255,255,255,.1); color: rgba(255,255,255,.5); font-size: 11px; padding: 2px 7px; border-radius: var(--radius-pill); }

.footer-recent-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }

.footer-recent-item { border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 10px; }

.footer-recent-item a {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 6px !important;
    color: rgba(255,255,255,.75) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: color var(--transition-fast) !important;
    padding: 0 !important;
    border-bottom: none !important;
}

.footer-recent-item a:hover { color: var(--lego-yellow) !important; }
.fri-title { flex: 1; line-height: 1.4; }

.fri-score { background: var(--lego-red); color: white; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; flex-shrink: 0; }
.fri-date  { display: block; font-size: 11.5px; color: rgba(255,255,255,.4); font-weight: 600; margin-top: 3px; }

.footer-search .search-form { max-width: 100%; }
.footer-search input[type="search"]             { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.2) !important; color: white !important; }
.footer-search input[type="search"]::placeholder { color: rgba(255,255,255,.4); }
.footer-search input[type="search"]:focus        { border-color: var(--lego-yellow) !important; }

.footer-bottom-bar { border-top: 1px solid rgba(255,255,255,.08); padding: var(--space-md) var(--space-xl); }

.footer-bottom-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; }

.footer-credits { display: flex; flex-direction: column; gap: 3px; font-size: 12px !important; color: rgba(255,255,255,.4) !important; }
.footer-credits a       { color: var(--lego-yellow) !important; }
.footer-credits a:hover { color: var(--lego-white) !important; }

.footer-bottom-badge { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: rgba(255,255,255,.3); font-weight: 600; border: 1px solid rgba(255,255,255,.1); padding: 5px 14px; border-radius: var(--radius-pill); }

@media (max-width: 1024px) { .footer-widget-area { grid-template-columns: 1fr 1fr; gap: var(--space-xl); } }
@media (max-width: 640px)  { .footer-widget-area { grid-template-columns: 1fr; } .footer-bottom-inner { flex-direction: column; text-align: center; } .footer-studs-row { gap: 6px; } }

/* ── Footer Dark Mode ─────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    /* Giữ footer nền tối thực sự (không bị ảnh hưởng bởi --lego-black được đảo ngược) */
    .site-footer {
        background: #0D1017 !important;
        color: rgba(255,255,255,.65) !important;
    }

    /* Lớp accent line giữ nguyên */
    .site-footer::before {
        background: linear-gradient(90deg, var(--lego-red) 0%, var(--lego-yellow) 50%, var(--lego-red) 100%);
    }

    /* Stud row — sẫm hơn nhưng vẫn nổi bật */
    .footer-studs-row {
        background: #1A1C24;
    }
    .footer-studs-row .stud {
        box-shadow: inset 0 -3px 4px rgba(0,0,0,.5);
    }

    /* Widget titles giữ nguyên vàng LEGO */
    .footer-widget-title {
        color: var(--lego-yellow) !important;
    }

    /* Logo brand */
    .footer-brand .footer-logo {
        color: #EEF0F5 !important;
    }

    /* Tagline */
    .footer-tagline {
        color: rgba(255,255,255,.5) !important;
    }

    /* Social buttons */
    .social-btn {
        background: rgba(255,255,255,.08) !important;
        color: rgba(255,255,255,.75);
    }
    .social-btn:hover {
        background: var(--lego-red) !important;
        color: #fff;
    }

    /* Footer links list */
    .footer-links-list li a {
        color: rgba(255,255,255,.55) !important;
    }
    .footer-links-list li a:hover {
        color: var(--lego-yellow) !important;
    }

    /* ft-count badge */
    .ft-count {
        background: rgba(255,255,255,.07);
        color: rgba(255,255,255,.4);
    }

    /* Recent items */
    .footer-recent-item {
        border-bottom-color: rgba(255,255,255,.06);
    }
    .footer-recent-item a {
        color: rgba(255,255,255,.65) !important;
    }
    .footer-recent-item a:hover {
        color: var(--lego-yellow) !important;
    }
    .fri-date {
        color: rgba(255,255,255,.35);
    }

    /* Search input in footer */
    .footer-search input[type="search"] {
        background: rgba(255,255,255,.07) !important;
        border-color: rgba(255,255,255,.15) !important;
        color: #EEF0F5 !important;
    }
    .footer-search input[type="search"]::placeholder {
        color: rgba(255,255,255,.3);
    }
    .footer-search input[type="search"]:focus {
        border-color: var(--lego-yellow) !important;
        background: rgba(255,255,255,.1) !important;
    }

    /* Footer bottom bar */
    .footer-bottom-bar {
        border-top-color: rgba(255,255,255,.06);
        background: #090C12;
    }

    .footer-credits {
        color: rgba(255,255,255,.35) !important;
    }
    .footer-credits a {
        color: var(--lego-yellow) !important;
    }
    .footer-credits a:hover {
        color: #fff !important;
    }

    .footer-bottom-badge {
        color: rgba(255,255,255,.25);
        border-color: rgba(255,255,255,.07);
    }
}

/* ── Dark Mode Footer (manual toggle — html.dark-mode) ──────────────────────
   Mirror của @media (prefers-color-scheme: dark) phía trên,
   nhưng áp dụng khi user BẬT toggle thủ công (không phụ thuộc OS).
   ─────────────────────────────────────────────────────────────────────────── */
html.dark-mode .site-footer {
    background: #0D1017 !important;
    color: rgba(255,255,255,.65) !important;
}

html.dark-mode .site-footer::before {
    background: linear-gradient(90deg, var(--lego-red) 0%, var(--lego-yellow) 50%, var(--lego-red) 100%);
}

html.dark-mode .footer-studs-row {
    background: #1A1C24;
}

html.dark-mode .footer-studs-row .stud {
    box-shadow: inset 0 -3px 4px rgba(0,0,0,.5);
}

html.dark-mode .footer-widget-title {
    color: var(--lego-yellow) !important;
}

html.dark-mode .footer-brand .footer-logo {
    color: #EEF0F5 !important;
}

html.dark-mode .footer-tagline {
    color: rgba(255,255,255,.5) !important;
}

html.dark-mode .footer-social .social-btn {
    background: rgba(255,255,255,.08) !important;
    color: rgba(255,255,255,.75) !important;
}

html.dark-mode .footer-social .social-btn:hover {
    background: var(--lego-red) !important;
    color: #fff !important;
}

html.dark-mode .footer-links-list li a {
    color: rgba(255,255,255,.55) !important;
}

html.dark-mode .footer-links-list li a:hover {
    color: var(--lego-yellow) !important;
}

html.dark-mode .ft-count {
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.4);
}

html.dark-mode .footer-recent-item {
    border-bottom-color: rgba(255,255,255,.06) !important;
}

html.dark-mode .footer-recent-item a {
    color: rgba(255,255,255,.65) !important;
}

html.dark-mode .footer-recent-item a:hover {
    color: var(--lego-yellow) !important;
}

html.dark-mode .fri-date {
    color: rgba(255,255,255,.35) !important;
}

/* Search form trong footer — dark mode thủ công */
html.dark-mode .footer-search input[type="search"] {
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.15) !important;
    color: #EEF0F5 !important;
}

html.dark-mode .footer-search input[type="search"]::placeholder {
    color: rgba(255,255,255,.3) !important;
}

html.dark-mode .footer-search input[type="search"]:focus {
    border-color: var(--lego-yellow) !important;
    background: rgba(255,255,255,.1) !important;
}

/* Nút submit search form trong footer */
html.dark-mode .footer-search .search-submit,
html.dark-mode .footer-search button[type="submit"] {
    background: var(--lego-red) !important;
    color: #fff !important;
    border-color: var(--lego-red) !important;
}

html.dark-mode .footer-bottom-bar {
    border-top-color: rgba(255,255,255,.06) !important;
    background: #090C12 !important;
}

html.dark-mode .footer-credits {
    color: rgba(255,255,255,.35) !important;
}

html.dark-mode .footer-credits a {
    color: var(--lego-yellow) !important;
}

html.dark-mode .footer-credits a:hover {
    color: #fff !important;
}

html.dark-mode .footer-bottom-badge {
    color: rgba(255,255,255,.25) !important;
    border-color: rgba(255,255,255,.07) !important;
}

/* Widget areas bên trong footer (nếu có plugin widget) */
html.dark-mode .site-footer .widget,
html.dark-mode .site-footer .wp-block-widget-area {
    background: transparent !important;
    color: rgba(255,255,255,.65) !important;
}

html.dark-mode .site-footer .widget a,
html.dark-mode .site-footer .wp-block-widget-area a {
    color: rgba(255,255,255,.55) !important;
}

html.dark-mode .site-footer .widget a:hover,
html.dark-mode .site-footer .wp-block-widget-area a:hover {
    color: var(--lego-yellow) !important;
}

html.dark-mode .site-footer .widget_title,
html.dark-mode .site-footer .widget-title,
html.dark-mode .site-footer h2.widget-title,
html.dark-mode .site-footer h3.widget-title {
    color: var(--lego-yellow) !important;
}

/* ============================================================
   Score Badge Color System — WCAG AA Compliant
   score-great : #00A950 → contrast ~4.6:1 ✅ AA
   score-good  : #112D4E → contrast ~12:1  ✅ AAA (amber cũ chỉ 3.1:1 ❌)
   score-poor  : #B91C1C → contrast ~6.5:1 ✅ AA
   ============================================================ */
.score-great { background: #00A950 !important; box-shadow: 0 4px 20px rgba(0,169,80,.35) !important; text-shadow: 0 1px 2px rgba(0,0,0,.2) !important; }
.score-good  { background: var(--color-primary) !important; box-shadow: 0 4px 14px rgba(17,45,78,.40) !important; }
.score-poor  { background: #B91C1C !important; box-shadow: 0 4px 14px rgba(185,28,28,.40) !important; }

/* ============================================================
   Table of Contents
   ============================================================ */
.lego-toc {
    background: var(--lego-gray-50);
    border: 2px solid var(--lego-gray-200);
    border-left: 5px solid var(--lego-red);
    border-radius: var(--radius-lg);
    margin: var(--space-2xl) 0;
    overflow: hidden;
    font-family: var(--font-primary);
    container-type: inline-size;
}

.toc-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--lego-white);
    border-bottom: 1px solid var(--lego-gray-200);
    cursor: pointer;
    user-select: none;
}

.toc-icon  { font-size: 1rem; flex-shrink: 0; }
.toc-title { font-size: 14px; font-weight: 800; color: var(--lego-black); flex: 1; text-transform: uppercase; letter-spacing: 0.5px; }

.toc-toggle {
    background: none;
    border: none;
    font-size: 12px;
    cursor: pointer;
    color: var(--lego-gray-500);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.toc-toggle:hover         { background: var(--lego-gray-100); }
.toc-toggle.collapsed     { transform: rotate(-90deg); }

.toc-nav { padding: var(--space-md) var(--space-lg); }
.toc-nav.hidden { display: none; }

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc-counter;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.toc-list li a {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--lego-gray-900) !important;
    text-decoration: none !important;
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.toc-list li a:hover { background: var(--lego-red) !important; color: var(--lego-white) !important; }

.toc-list li:not(.toc-subitem) a::before {
    counter-increment: toc-counter;
    content: counter(toc-counter) '.';
    font-weight: 900;
    color: var(--lego-red);
    flex-shrink: 0;
    min-width: 18px;
    transition: color var(--transition-fast);
}

.toc-list li:not(.toc-subitem) a:hover::before { color: var(--lego-white); }

.toc-list li.toc-subitem a { padding-left: 28px; font-size: 13px; color: var(--lego-gray-700) !important; }
.toc-list li.toc-subitem a::before { display: none; }

/* ============================================================
   Dark Mode
   ============================================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --lego-black:    #F2F2F2;
        --lego-white:    #1E2028;       /* Dark navy surface, not harsh black */
        --lego-gray-50:  #13161E;
        --lego-gray-100: #1E2128;
        --lego-gray-200: #2A2D38;
        --lego-gray-300: #3A3D4A;
        --lego-gray-500: #888FA0;
        --lego-gray-700: #B0B8CC;
        --lego-gray-900: #EEF0F5;
        --color-surface:   #13161E;
        --color-surface-2: #2A2D38;
        --shadow-sm:  0 2px 8px rgba(0,0,0,.5);
        --shadow-md:  0 4px 16px rgba(0,0,0,.6);
        --shadow-lg:  0 8px 32px rgba(0,0,0,.7);
        --shadow-xl:  0 16px 48px rgba(0,0,0,.8);
    }

    body { background-color: #13161E !important; color: #B0B8CC !important; }

    /* Header — subtle amber accent line */
    .site-header { background: #1E2128 !important; border-color: var(--color-accent) !important; }

    /* Cards and containers */
    .post-inner, .inside-article,
    .lego-card,
    .lego-filter-bar,
    .lego-no-results,
    .lego-author-box,
    #comments,
    .lego-toc,
    .lego-widget { background: #1E1E1E !important; border-color: #2A2A2A !important; }

    .lego-quick-nav-section { background: #1E2128; border-color: #2A2D38; }
    .lego-quick-nav-section::after { background: linear-gradient(to right, transparent, #1E2128); }
    .quick-nav-item { background: #1E2128; border-color: #2A2D38; }

    .lego-breadcrumb { background: #1A1A1A; border-color: #2A2A2A; }
    .lego-set-info-grid { background: #2A2A2A; }
    .set-info-item { background: #1E1E1E; }
    .set-info-item:hover { background: #252525; }
    .set-info-item .info-value { color: var(--lego-gray-900); }

    .lego-ratings-breakdown { background: #161616; }
    .rating-bar-track { background: #333; }

    /* Pros & Cons */
    .pros-column { background: linear-gradient(135deg, #0d2b1a, #111f16) !important; border-color: #1a4d2e !important; }
    .cons-column { background: linear-gradient(135deg, #2b1a0d, #1f160a) !important; border-color: #4d2e1a !important; }

    /* Content */
    .lego-content blockquote { background: linear-gradient(135deg, #1f1212, #1a1010) !important; }
    .lego-author-box { background: linear-gradient(135deg, #1a1a1a, #1e1e1e) !important; }

    /* ToC */
    .toc-header { background: #252525; border-color: #2A2A2A; }
    .toc-title  { color: #F0F0F0; }
    .toc-list li a { color: #CCCCCC !important; }
    .toc-toggle:hover { background: #333; }

    /* Typography */
    .entry-title a,
    .single-post-title,
    .lego-card-title a,
    .lego-hero-title a,
    .lego-section-title { color: #F0F0F0 !important; }

    .entry-title a:hover,
    .lego-card-title a:hover { color: var(--color-accent) !important; }

    /* Forms */
    .filter-group select,
    .lego-share-btn {
        background: #1E1E1E;
        color: #F0F0F0;
        border-color: #3A3A3A;
    }

    .search-form input[type="search"],
    .search-form-main input[type="search"],
    .comment-form input[type="text"],
    .comment-form input[type="email"],
    .comment-form input[type="url"],
    .comment-form textarea {
        background: #1E1E1E !important;
        color: #F0F0F0 !important;
        border-color: #3A3A3A !important;
    }

    .nl-input { background: #2A2A2A; color: #F0F0F0; }

    /* Review box */
    .lego-review-box { border-color: var(--lego-red); }
    .lego-buy-section { background: #161616; border-color: #2A2A2A; }
    .buy-price { color: var(--lego-yellow); }

    /* Pagination */
    .page-numbers, .nav-links a, .nav-links span { background: #1E1E1E !important; border-color: #3A3A3A !important; color: #CCCCCC !important; }

    /* Widget */
    .lego-widget-title { background: var(--lego-red) !important; }
    .lego-widget a { color: #CCCCCC !important; }

    /* ── Archive Hero Inner ─────────────────────────────────────────────────── */
    /* Hero có gradient tối riêng — nhưng --lego-white bị đảo thành #1E2028 trong dark mode,
       khiến text biến mất. Hardcode về màu trắng thực sự để đảm bảo contrast. */
    .archive-title {
        color: #FFFFFF !important;
        text-shadow: 0 2px 16px rgba(0,0,0,.6) !important;
    }

    .archive-desc {
        color: rgba(255,255,255,.82) !important;
    }

    .archive-type-badge {
        background: rgba(245,197,24,.15) !important;
        color: var(--lego-yellow) !important;
        border-color: rgba(245,197,24,.22) !important;
    }

    /* Stats bar */
    .archive-hero-stats {
        background: rgba(0,0,0,.35) !important;
        border-color: rgba(255,255,255,.1) !important;
    }

    .ahs-value {
        color: #FFFFFF !important;
    }

    .ahs-label {
        color: rgba(255,255,255,.52) !important;
    }

    .ahs-divider {
        background: rgba(255,255,255,.1) !important;
    }

    /* Stud row tối hơn trong dark mode */
    .archive-hero-studs {
        background: rgba(0,0,0,.45) !important;
    }

    /* ── Review Header (.lego-review-title-area) ─────────────────────────────── */
    /* .lego-review-header có gradient tối riêng (navy → deep blue) — nhưng các biến
       --lego-white (#1E2028) và --lego-black (#F2F2F2) bị đảo ngược trong dark mode,
       khiến title/set-name biến mất và badge mất tương phản. Hardcode về màu thực sự. */
    .lego-review-header {
        /* Gradient giữ nguyên, chỉ override color text */
        color: #FFFFFF !important;
    }

    .lego-review-set-name {
        color: #FFFFFF !important;
        text-shadow: 0 2px 16px rgba(0,0,0,.5) !important;
    }

    .lego-set-number {
        color: rgba(255,255,255,.65) !important;
    }

    /* Badge: nền vàng LEGO, chữ phải là đen thực sự (không phải --lego-black = #F2F2F2) */
    .lego-review-badge {
        background: var(--lego-yellow) !important;
        color: #1A1A1A !important;
    }

    /* Score widget trong header — giữ style, reinforce màu */
    .lego-overall-score {
        background: rgba(0,0,0,.3) !important;
        border-color: rgba(255,255,255,.15) !important;
    }

    .lego-overall-score .score-number {
        color: var(--lego-yellow) !important;
    }

    .lego-overall-score .score-max {
        color: rgba(255,255,255,.55) !important;
    }

    .lego-overall-score .score-label {
        color: rgba(255,255,255,.65) !important;
    }

    /* Stud decoration bên trong review box */
    .lego-studs-decoration .stud {
        box-shadow: inset 0 -3px 5px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.3) !important;
    }

    /* ── Homepage Hero (lego-homepage-hero) ──────────────────────────────────── */
    /* Hero có nền tối hardcode → không bị ảnh hưởng. Nhưng các biến
       --lego-white/#lego-black bị đảo ngược khiến text mất contrast.  */

    /* Tiêu đề chính */
    .hero-main-title {
        color: #FFFFFF !important;
    }

    /* Eyebrow text đã dùng rgba nên OK, reinforce nhẹ */
    .hero-eyebrow {
        color: rgba(255,255,255,.75) !important;
    }

    /* Button chính: nền vàng — chữ phải đen thực sự */
    .hero-cta-primary {
        color: #1A1A1A !important;
    }

    /* Button thứ cấp #hero-search-trigger: nền trong suốt trắng,
       --lego-white bị đảo thành #1E2028 → chữ biến mất trên nền tối */
    .hero-cta-secondary,
    button.hero-cta-secondary {
        color: #FFFFFF !important;
        background: rgba(255,255,255,.12) !important;
        border-color: rgba(255,255,255,.28) !important;
    }

    .hero-cta-secondary:hover,
    button.hero-cta-secondary:hover {
        background: rgba(255,255,255,.22) !important;
        border-color: rgba(255,255,255,.55) !important;
        color: #FFFFFF !important;
    }

    /* Stats bar dưới hero */
    .hero-desc {
        color: rgba(255,255,255,.82) !important;
    }
}

/* ─── 404 Page ──────────────────────────────────────────────────────────────── */
.lego-404-wrap {
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
    max-width: 640px;
    margin: 0 auto;
}

.lego-404-code {
    font-size: clamp(6rem, 20vw, 12rem);
    font-weight: 900;
    line-height: 1;
    color: var(--lego-red);
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: var(--space-lg);
}

.lego-404-code .four { color: var(--lego-yellow); -webkit-text-stroke: 3px var(--lego-black); }

.lego-404-studs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: var(--space-2xl);
}

.lego-404-studs .stud {
    width: 24px; height: 24px;
    background: var(--lego-red);
    border-radius: 50%;
    box-shadow: inset 0 -3px 5px rgba(0,0,0,.3);
    animation: studPop 0.8s ease both;
}

.lego-404-studs .stud:nth-child(2) { background: var(--lego-yellow); animation-delay: .1s; }
.lego-404-studs .stud:nth-child(3) { background: var(--lego-blue); animation-delay: .2s; }
.lego-404-studs .stud:nth-child(4) { background: var(--lego-green); animation-delay: .3s; }
.lego-404-studs .stud:nth-child(5) { background: var(--lego-red); animation-delay: .4s; }

.lego-404-title { font-size: clamp(1.4rem, 4vw, 2rem) !important; margin-bottom: var(--space-md) !important; }
.lego-404-desc  { color: var(--lego-gray-700); font-size: 15px; margin-bottom: var(--space-2xl); }

.lego-404-actions { display: flex; justify-content: center; gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-2xl); }

/* ============================================================
   Homepage Section Labels  (phân biệt Reviews vs Blog)
   ============================================================ */
.hp-section-label {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
}

.hp-section-label--review {
    background: linear-gradient(135deg, #fff5f5, #fff8f8);
    border: 2px solid var(--lego-red);
    border-left-width: 6px;
}

.hp-section-label--blog {
    background: linear-gradient(135deg, #f0f5ff, #f5f8ff);
    border: 2px solid var(--lego-blue);
    border-left-width: 6px;
}

.hpsl-icon { font-size: 1.8rem; flex-shrink: 0; }

.hpsl-text { flex: 1; }
.hpsl-text strong { display: block; font-size: 1rem; font-weight: 900; color: var(--lego-black); }
.hpsl-text span   { font-size: 13px; color: var(--lego-gray-500); }

.hpsl-link {
    font-size: 13px;
    font-weight: 800;
    color: var(--lego-red) !important;
    text-decoration: none !important;
    white-space: nowrap;
    padding: 6px 14px;
    border: 2px solid var(--lego-red);
    border-radius: var(--radius-pill);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.hp-section-label--blog .hpsl-link {
    color: var(--lego-blue) !important;
    border-color: var(--lego-blue);
}

.hpsl-link:hover { background: var(--lego-red) !important; color: white !important; }
.hp-section-label--blog .hpsl-link:hover { background: var(--lego-blue) !important; }

/* Section divider */
.hp-section-divider {
    border: none;
    height: 3px;
    background: linear-gradient(
        to right,
        var(--lego-red) 0%,
        var(--lego-yellow) 33%,
        var(--lego-blue) 66%,
        var(--lego-green) 100%
    );
    border-radius: var(--radius-pill);
    margin: var(--space-3xl) 0 var(--space-2xl);
    opacity: 0.6;
}

/* ── Hero badge variants ─────────────────────────────────────────────────── */
.hp-badge--review {
    background: var(--lego-red) !important;
}

/* ============================================================
   Blog Cards  (regular post — visual identity: blue accent)
   ============================================================ */
.lego-blog-section { margin-bottom: var(--space-2xl); }

.lego-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.lego-blog-card {
    background: var(--lego-white);
    border: 1px solid var(--lego-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}

.lego-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--lego-blue);
}

.lego-blog-card__thumb { position: relative; overflow: hidden; aspect-ratio: 16/9; flex-shrink: 0; }
.lego-blog-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); display: block; }
.lego-blog-card:hover .lego-blog-card__thumb img { transform: scale(1.04); }

.lego-blog-card__nothumb {
    background: linear-gradient(135deg, var(--lego-blue), var(--lego-blue-light));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
}

.lego-blog-card__body {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
}

/* Category tag — blue palette */
.lego-blog-tag {
    display: inline-block;
    background: rgba(0, 86, 163, 0.1);
    color: var(--lego-blue) !important;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    text-decoration: none !important;
    margin-right: 4px;
    margin-bottom: 6px;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.lego-blog-tag:hover {
    background: var(--lego-blue) !important;
    color: white !important;
}

.lego-blog-card__title {
    font-size: 1.5rem !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    margin: 0 0 4px !important;
}

.lego-blog-card__title a { color: var(--lego-black) !important; text-decoration: none !important; }
.lego-blog-card__title a:hover { color: var(--lego-blue) !important; }

.lego-blog-card__excerpt {
    font-size: 13.5px !important;
    color: var(--lego-gray-700) !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    flex: 1;
}

.lego-blog-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--lego-gray-200);
}

.lego-blog-card__date { font-size: 12px; color: var(--lego-gray-500); font-weight: 600; }

.lego-blog-card__more {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--lego-blue) !important;
    text-decoration: none !important;
    transition: color var(--transition-fast);
}

.lego-blog-card__more:hover { color: var(--lego-black) !important; }

/* ── Dark mode overrides ─────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    .hp-section-label--review { background: #1f1515; }
    .hp-section-label--blog   { background: #111d2b; }
    .hpsl-text strong { color: #F0F0F0; }

    .lego-blog-card {
        background: #1E1E1E !important;
        border-color: #2A2A2A !important;
    }

    .lego-blog-card:hover { border-color: var(--lego-blue) !important; }

    .lego-blog-card__title a { color: #F0F0F0 !important; }
    .lego-blog-card__title a:hover { color: var(--lego-blue) !important; }
    .lego-blog-card__footer { border-color: #333; }

    .lego-blog-tag { background: rgba(0, 86, 163, 0.2); }
}

/* ── Responsive blog grid ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .lego-blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .lego-blog-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .hp-section-label { flex-wrap: wrap; }
    .hpsl-link { margin-left: auto; }
}

/* ============================================================
   RESPONSIVE MOBILE — Fix horizontal overflow & layout issues
   ============================================================ */

/* ── 1. Prevent ALL horizontal overflow ─────────────────────────────────── */
html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
}

/* Force all direct children of body to stay within viewport */
body > * {
    max-width: 100vw;
}

/* Images & media never overflow their container */
img, video, iframe, embed, object, table {
    max-width: 100% !important;
}

/* ── 2. Utility bar — hide tagline on small screens ─────────────────────── */
@media (max-width: 480px) {
    .lego-ub-inner {
        padding: 4px var(--space-md);
        flex-wrap: wrap;
        gap: 6px;
    }
    .lego-ub-tagline,
    .lego-ub-stat,
    .lego-ub-sep,
    .ub-divider { display: none !important; }
}

/* ── 3. Navbar — tighten on small screens ──────────────────────────────── */
@media (max-width: 480px) {
    .lego-navbar-inner {
        padding: 0 var(--space-md);
        gap: var(--space-sm);
    }
    .logo-main { font-size: 1.05rem; }
    .logo-sub  { font-size: 0.7rem; }
}

/* ── 4. Homepage Hero ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .lego-homepage-hero {
        padding: var(--space-2xl) var(--space-md);
        border-radius: var(--radius-lg);
    }
    .hero-content-wrap {
        padding: 0;
        gap: var(--space-xl);
    }
    .hero-main-title { font-size: clamp(1.5rem, 7vw, 2.2rem) !important; }
    .hero-desc { font-size: 14px; margin-bottom: var(--space-lg); }
    .hero-actions { gap: var(--space-sm); }
    .hero-cta-primary,
    .hero-cta-secondary {
        font-size: 13px !important;
        padding: 12px 20px !important;
    }
    .hero-stats { gap: var(--space-md); flex-wrap: wrap; }
    .stat-num { font-size: 1.4rem; }
}

@media (max-width: 480px) {
    .lego-homepage-hero {
        padding: var(--space-xl) var(--space-md);
        border-radius: var(--radius-md);
        margin-bottom: var(--space-lg);
        /* margin-left/right & width handled by breakout rules above */
    }
    .hero-eyebrow { font-size: 12px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-cta-primary,
    .hero-cta-secondary {
        width: 100%;
        justify-content: center !important;
    }
    .hero-stats { justify-content: center; }
}

/* ── 5. Quick Nav — allow horizontal scroll, contain width ─────────────── */
@media (max-width: 768px) {
    .lego-quick-nav-section { padding: var(--space-md) 0; }
    .lego-container { padding: 0 var(--space-md); }
    .quick-nav-grid { padding-bottom: 8px; }
    .quick-nav-item { min-width: 76px; padding: 6px 10px; }
}

/* ── 6. Hero Post (bài đặc sắc trong trang chủ) ────────────────────────── */
@media (max-width: 768px) {
    .lego-hero-post {
        grid-template-columns: 1fr;
        min-height: auto;
        border-radius: var(--radius-lg);
    }
    .lego-hero-image {
        min-height: 220px;
        max-height: 280px;
    }
    .lego-hero-body {
        padding: var(--space-lg);
        gap: var(--space-sm);
    }
    .lego-hero-title { font-size: clamp(1.1rem, 5vw, 1.5rem) !important; }
    .hero-excerpt { font-size: 13.5px; }
    .hero-read-btn { padding: 10px 22px; font-size: 13px; }
}

/* ── 7. Section headers ─────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .lego-section-header { flex-wrap: wrap; gap: var(--space-sm); }
    .lego-section-title { font-size: 1.15rem !important; }
    .lego-view-all-btn { font-size: 12px; padding: 5px 12px; }
}

/* ── 8. Card grid ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .lego-card-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}

/* ── 9. Review Box ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .lego-review-header {
        grid-template-columns: 1fr;
        padding: var(--space-lg);
        gap: var(--space-md);
        text-align: center;
    }
    .lego-overall-score {
        margin: 0 auto;
        min-width: unset;
        width: fit-content;
    }
    .lego-ratings-breakdown { padding: var(--space-lg); }
    .lego-pros-cons {
        grid-template-columns: 1fr;
        padding: var(--space-lg);
        gap: var(--space-md);
    }
    .lego-verdict { padding: var(--space-lg); }
    .lego-buy-section {
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-lg);
    }
    .lego-buy-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .rating-bar-item {
        grid-template-columns: 72px 1fr 44px;
        gap: 6px;
    }
    .rating-bar-label { font-size: 12px; }
    .lego-set-info-grid { grid-template-columns: 1fr 1fr; }
    .lego-studs-decoration { padding: 6px var(--space-md); gap: 6px; }
    .lego-studs-decoration .stud { width: 18px; height: 18px; }
}

/* ── 10. Single Post ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .lego-single-wrap {
        padding: 0 var(--space-md) var(--space-2xl);
    }
    .single-post-title { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
    .single-featured-image { border-radius: var(--radius-md); }
    .lego-content h2,
    .lego-content h3 { overflow-wrap: break-word; word-break: break-word; }
    .lego-content blockquote {
        padding: var(--space-md) var(--space-lg) !important;
    }
}

@media (max-width: 480px) {
    .lego-single-wrap { padding: 0 var(--space-sm) var(--space-xl); }
    .lego-single-header { padding: var(--space-lg) 0 var(--space-md); }
    .single-post-meta { flex-wrap: wrap; gap: 8px; font-size: 12px; }
    .lego-author-box {
        flex-direction: column;
        padding: var(--space-lg);
        gap: var(--space-md);
    }
    .lego-share-section { flex-direction: column; align-items: flex-start; gap: 8px; }
    .share-buttons { flex-wrap: wrap; }
}

/* ── 11. Archive ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .lego-archive-wrap {
        padding: 0 var(--space-md) var(--space-2xl);
    }
    .archive-hero-inner { padding: var(--space-lg); }
    .lego-filter-bar   { padding: var(--space-md); }
    .filter-form       { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
}

/* ── 12. Newsletter ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .newsletter-content {
        padding: var(--space-xl) var(--space-lg);
    }
    .nl-form {
        flex-direction: column;
        border-radius: var(--radius-md);
        max-width: 100%;
    }
    .nl-input, .nl-btn {
        border-radius: 0;
        padding: 12px 18px;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .newsletter-content { padding: var(--space-lg) var(--space-md); }
    .nl-title { font-size: 1.3rem !important; }
}

/* ── 13. Footer ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .footer-widget-area {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
        padding: var(--space-xl) var(--space-md);
    }
    .footer-bottom-bar { padding: var(--space-md); }
}

@media (max-width: 480px) {
    .footer-widget-area {
        grid-template-columns: 1fr;
        padding: var(--space-lg) var(--space-md);
    }
    .footer-bottom-inner { flex-direction: column; text-align: center; }
    .footer-studs-row { padding: 8px var(--space-md); gap: 6px; }
}

/* ── 14. Site main content area ─────────────────────────────────────────── */
@media (max-width: 768px) {
    .site-content {
        padding: var(--space-lg) var(--space-md) !important;
    }
}

@media (max-width: 480px) {
    .site-content {
        padding: var(--space-md) var(--space-sm) !important;
    }
}

/* ── 15. Breadcrumb ─────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .breadcrumb-list {
        font-size: 12px;
        padding: 0 var(--space-sm);
    }
}

/* ── 16. Tables — allow scroll instead of overflow ─────────────────────── */
.lego-content table,
.entry-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: max-content;
    max-width: 100%;
}

/* ── 17. Blog section grid ──────────────────────────────────────────────── */
@media (max-width: 768px) {
    .lego-blog-section { margin-bottom: var(--space-xl); }
    .lego-blog-grid   { gap: var(--space-md); }
}

/* ── 18. Misc elements that can overflow ────────────────────────────────── */
@media (max-width: 480px) {
    /* Review box name can be long */
    .lego-review-set-name {
        font-size: 1.2rem !important;
        overflow-wrap: break-word;
        word-break: break-word;
    }
    /* Title tags break on very narrow screens */
    h1, h2, h3, h4 {
        overflow-wrap: break-word;
        word-break: break-word;
    }
    /* Back-to-top button on narrow screens */
    #lego-back-to-top {
        right: var(--space-sm);
        bottom: var(--space-sm);
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* ── 19. 360px — very small phones ─────────────────────────────────────── */
@media (max-width: 360px) {
    :root {
        --space-md: 12px;
        --space-lg: 18px;
        --space-xl: 24px;
    }
    .lego-navbar-inner { padding: 0 10px; height: 56px; }
    .logo-main { font-size: 0.95rem; }
    .nav-cta-btn { display: none; }
    .lego-homepage-hero { padding: var(--space-lg) 10px; }
    .lego-single-wrap,
    .lego-archive-wrap { padding-left: 10px; padding-right: 10px; }
}

/* ============================================================
   Archive Page — Extra Responsive Fixes (lego-reviews & friends)
   ============================================================ */

/* ── Wrap & Hero ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .lego-archive-wrap {
        padding: 0 var(--space-md) var(--space-2xl);
    }

    .lego-archive-hero {
        border-radius: var(--radius-lg);
        margin-bottom: var(--space-xl);
    }

    .archive-hero-inner {
        padding: var(--space-xl) var(--space-lg) var(--space-lg);
    }

    .archive-hero-studs {
        padding: 8px var(--space-lg);
        gap: 7px;
    }

    .archive-title {
        font-size: clamp(1.3rem, 6vw, 1.8rem) !important;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .archive-desc {
        font-size: 13.5px !important;
        max-width: 100%;
    }

    .archive-author {
        flex-wrap: wrap;
        gap: var(--space-md);
    }

    .archive-author img {
        width: 52px !important;
        height: 52px !important;
    }
}

@media (max-width: 480px) {
    .lego-archive-wrap {
        padding: 0 var(--space-sm) var(--space-xl);
    }

    .archive-hero-inner {
        padding: var(--space-lg) var(--space-md) var(--space-md);
    }

    .archive-hero-studs {
        padding: 6px var(--space-md);
        gap: 5px;
    }

    .ah-stud {
        width: 14px;
        height: 14px;
    }
}

/* ── Filter Bar ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .lego-filter-bar {
        padding: var(--space-md);
        top: 56px; /* smaller navbar on mobile */
    }

    .filter-form {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .filter-group {
        width: 100%;
    }

    .filter-group select {
        flex: 1;
        width: 100%;
        max-width: 100%;
    }

    .filter-spacer { display: none; }

    .filter-count { order: -1; }

    .view-toggle {
        align-self: flex-end;
        margin-top: calc(-1 * (var(--space-sm) + 34px));
    }
}

/* ── Hero Stats Bar ─────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .archive-hero-stats {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }
    .ahs-item { flex-direction: row; justify-content: space-between; padding: 10px 16px; }
    .ahs-divider { width: auto; height: 1px; }
}

/* ── List View — disable on mobile (too narrow) ─────────────────────────── */
@media (max-width: 640px) {
    #lego-archive-grid.is-list-view .lego-card {
        flex-direction: column;
        max-height: unset;
    }
    #lego-archive-grid.is-list-view .lego-card-image,
    #lego-archive-grid.is-list-view .lego-card-no-thumb {
        width: 100%;
        min-width: unset;
        aspect-ratio: 16/10;
    }
    #lego-archive-grid.is-list-view .lego-card-body {
        padding: var(--space-md);
    }
    .view-btn--list { display: none; } /* hide list toggle on small screens */
}

/* ── Card Grid (archive-grid) ───────────────────────────────────────────── */
@media (max-width: 640px) {
    .lego-card-grid,
    .archive-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
        margin: var(--space-lg) 0;
    }
}

@media (min-width: 480px) and (max-width: 640px) {
    /* Show 2 columns on mid-size phones (landscape) */
    .lego-card-grid,
    .archive-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
}

/* ── Card component fixes ───────────────────────────────────────────────── */
@media (max-width: 480px) {
    .lego-card-body {
        padding: var(--space-md);
        gap: 6px;
    }

    .lego-card-meta {
        font-size: 12px;
        gap: var(--space-sm);
        flex-wrap: wrap;
    }

    .lego-card-excerpt {
        font-size: 13px !important;
    }

    .lego-score-badge {
        font-size: 12px;
        padding: 3px 8px;
    }

    .lego-read-more {
        font-size: 12.5px;
        padding: 7px 14px;
    }
}

/* ── No Results ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .lego-no-results {
        padding: var(--space-2xl) var(--space-md);
        border-radius: var(--radius-lg);
    }

    .no-results-icon { font-size: 3rem; }

    .no-results-quick-links {
        flex-direction: column;
        align-items: center;
    }
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .lego-pagination .nav-links {
        gap: 4px;
    }

    .page-numbers,
    .nav-links a,
    .nav-links span {
        min-width: 36px !important;
        height: 36px !important;
        font-size: 13px !important;
        padding: 0 8px !important;
    }
}

/* ============================================================
   Task 4: Skip-to-Content Link (Accessibility)
   ============================================================ */
.lego-skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--lego-white) !important;
    padding: 12px 24px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-weight: 700;
    font-size: 14px;
    text-decoration: none !important;
    z-index: 99999;
    transition: top var(--transition-fast);
    white-space: nowrap;
}

.lego-skip-link:focus {
    top: 0;
    outline: 3px solid var(--lego-yellow);
    outline-offset: 2px;
}

/* ============================================================
   Task 8: Dark Mode Toggle Button
   ============================================================ */
.nav-darkmode-btn {
    position: relative;
}

.nav-darkmode-btn .icon-sun,
.nav-darkmode-btn .icon-moon {
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

/* Light mode: hiển thị icon mặt trời (hint: click để sang dark) */
.nav-darkmode-btn .icon-sun  { opacity: 1; transform: scale(1); }
.nav-darkmode-btn .icon-moon { opacity: 0; transform: scale(0.6); position: absolute; }

/* Dark mode: hiển thị icon mặt trăng */
html.dark-mode .nav-darkmode-btn .icon-sun  { opacity: 0; transform: scale(0.6); }
html.dark-mode .nav-darkmode-btn .icon-moon { opacity: 1; transform: scale(1); position: static; }

/* ── Manual Dark Mode via class .dark-mode on <html> ────────────────────── */
/* Khi user chủ động bật dark mode — override media query để luôn áp dụng */
html.dark-mode {
    --lego-black:    #F2F2F2;
    --lego-white:    #1E2028;
    --lego-gray-50:  #13161E;
    --lego-gray-100: #1E2128;
    --lego-gray-200: #2A2D38;
    --lego-gray-300: #3A3D4A;
    --lego-gray-500: #888FA0;
    --lego-gray-700: #B0B8CC;
    --lego-gray-900: #EEF0F5;
    --color-surface:   #13161E;
    --color-surface-2: #2A2D38;
    --shadow-sm:  0 2px 8px rgba(0,0,0,.5);
    --shadow-md:  0 4px 16px rgba(0,0,0,.6);
    --shadow-lg:  0 8px 32px rgba(0,0,0,.7);
    --shadow-xl:  0 16px 48px rgba(0,0,0,.8);
}

html.dark-mode body {
    background-color: #13161E !important;
    color: #B0B8CC !important;
}

html.dark-mode .site-header {
    background: #1E2128 !important;
    border-color: var(--color-accent) !important;
}

html.dark-mode .post-inner,
html.dark-mode .inside-article,
html.dark-mode .lego-card,
html.dark-mode .lego-filter-bar,
html.dark-mode .lego-no-results,
html.dark-mode .lego-author-box,
html.dark-mode .lego-toc,
html.dark-mode .lego-widget {
    background: #1E1E1E !important;
    border-color: #2A2A2A !important;
}

html.dark-mode .entry-title a,
html.dark-mode .single-post-title,
html.dark-mode .lego-card-title a,
html.dark-mode .lego-section-title {
    color: #F0F0F0 !important;
}

html.dark-mode .filter-group select,
html.dark-mode .lego-share-btn {
    background: #1E1E1E;
    color: #F0F0F0;
    border-color: #3A3A3A;
}

/* ================================================================
   html.dark-mode — Navbar & Utility Bar (manual toggle)
   Mirror của @media (prefers-color-scheme: dark) block ở line ~779
   ================================================================ */

/* ── Utility Bar ─────────────────────────────────────────────── */
html.dark-mode .lego-utility-bar {
    background: #0d1017 !important;
    color: rgba(219,226,239,.65) !important;
}

html.dark-mode .lego-ub-tagline,
html.dark-mode .lego-ub-stat {
    color: rgba(219,226,239,.45) !important;
}

html.dark-mode .ub-link {
    color: rgba(219,226,239,.65) !important;
}

html.dark-mode .ub-link:hover {
    color: var(--lego-yellow) !important;
}

html.dark-mode .ub-divider {
    background: rgba(219,226,239,.15) !important;
}

/* ── Navbar ──────────────────────────────────────────────────── */
html.dark-mode .lego-navbar {
    background: #1E2128 !important;
    border-color: #2A2D38 !important;
}

html.dark-mode .lego-navbar.is-scrolled {
    background: rgba(30,33,40,.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Logo */
html.dark-mode .logo-main {
    color: #EEF0F5 !important;
}

html.dark-mode .logo-sub {
    color: var(--color-accent) !important;
}

/* Nav links */
html.dark-mode .lego-nav-link {
    color: #B0B8CC !important;
}

html.dark-mode .lego-nav-link:hover,
html.dark-mode .lego-nav-link.is-active {
    background: #2A2D38 !important;
    color: #EEF0F5 !important;
}

/* Mega dropdown */
html.dark-mode .lego-mega-dropdown {
    background: #1E2128 !important;
    border-color: #2A2D38 !important;
}

html.dark-mode .mega-dd-col {
    border-color: #2A2D38 !important;
}

html.dark-mode .mega-dd-col--promo {
    background: linear-gradient(135deg, #13161E, #1E2128) !important;
}

html.dark-mode .mega-dd-heading {
    color: #888FA0 !important;
    border-color: #2A2D38 !important;
}

html.dark-mode .mega-dd-link {
    color: #B0B8CC !important;
}

html.dark-mode .mega-dd-link:hover {
    background: #2A2D38 !important;
    color: #EEF0F5 !important;
}

html.dark-mode .mega-dd-promo {
    background: #1E2128 !important;
    border-color: #2A2D38 !important;
}

html.dark-mode .mega-dd-promo-title {
    color: #EEF0F5 !important;
}

html.dark-mode .mddl-count {
    background: #2A2D38 !important;
    color: #888FA0 !important;
}

/* Action buttons (search, darkmode toggle) */
html.dark-mode .nav-action-btn {
    color: #B0B8CC !important;
}

html.dark-mode .nav-action-btn:hover {
    background: #2A2D38 !important;
    color: #EEF0F5 !important;
}

/* Hamburger bars */
html.dark-mode .nav-burger span {
    background: #B0B8CC !important;
}

html.dark-mode .nav-burger:hover {
    background: #2A2D38 !important;
}

/* Search bar slide-down */
html.dark-mode .lego-navbar-search {
    background: #13161E !important;
    border-color: #2A2D38 !important;
}

html.dark-mode .lego-navbar-search input[type="search"] {
    background: #1E2128 !important;
    border-color: #2A2D38 !important;
    color: #EEF0F5 !important;
}

html.dark-mode .lego-navbar-search input[type="search"]::placeholder {
    color: rgba(176,184,204,.45) !important;
}

html.dark-mode .search-close-btn {
    color: #888FA0 !important;
}

html.dark-mode .search-close-btn:hover {
    background: #2A2D38 !important;
    color: #EEF0F5 !important;
}

/* Mobile drawer */
html.dark-mode .lego-mobile-nav {
    background: #1E2128 !important;
}

html.dark-mode .mobile-nav-body {
    background: #1E2128 !important;
}

html.dark-mode .mobile-nav-link {
    color: #B0B8CC !important;
}

html.dark-mode .mobile-nav-link:hover {
    background: #2A2D38 !important;
    color: #EEF0F5 !important;
}

html.dark-mode .mobile-nav-search {
    border-color: #2A2D38 !important;
    background: #13161E !important;
}

html.dark-mode .mobile-nav-search input[type="search"] {
    background: #1E2128 !important;
    border-color: #2A2D38 !important;
    color: #EEF0F5 !important;
}

/* ================================================================
   html.dark-mode — Homepage Hero Section
   Hero vốn dùng gradient tối nên hầu hết OK, nhưng cần fix:
   - heading h1/h2/h3 global override đang ghi đè màu trắng trong hero
   - hero stats/badges xung quanh hero
   ================================================================ */

/* Global heading dark mode override (màu #F0F0F0) đang ghi đè màu trắng
   trong hero-main-title. Cancel nó lại bằng specificity cao hơn. */
html.dark-mode .lego-homepage-hero h1,
html.dark-mode .lego-homepage-hero h2,
html.dark-mode .lego-homepage-hero h3,
html.dark-mode .lego-homepage-hero h4,
html.dark-mode .lego-homepage-hero h5,
html.dark-mode .lego-homepage-hero h6 {
    /* --lego-white bị flip sang tối trong html.dark-mode → pin cứng #fff */
    color: #ffffff !important;
}

html.dark-mode .hero-main-title {
    color: #ffffff !important;
}

html.dark-mode .hero-eyebrow {
    color: rgba(255,255,255,.8) !important;
}

html.dark-mode .hero-desc {
    color: rgba(255,255,255,.85) !important;
}

/* ── Nút "Tìm kiếm LEGO set" — hero-cta-secondary ───────────────
   color: var(--lego-white) trong light mode → bị flip sang #1E2028 (tối)
   trong html.dark-mode → chữ vô hình trên nền rgba(255,255,255,.15).
   Fix: pin cứng #ffffff, giữ glass morphism backdrop. */
html.dark-mode .hero-cta-secondary,
html.dark-mode button.hero-cta-secondary {
    color: #ffffff !important;
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.35) !important;
}

html.dark-mode .hero-cta-secondary:hover,
html.dark-mode button.hero-cta-secondary:hover {
    color: #ffffff !important;
    background: rgba(255,255,255,.22) !important;
    border-color: rgba(255,255,255,.9) !important;
}

/* ── Hero Stats (class thực tế: .stat-num / .stat-label / .stat-divider) ── */
html.dark-mode .stat-num {
    color: var(--lego-yellow) !important;
}

html.dark-mode .stat-label {
    color: rgba(255,255,255,.6) !important;
}

html.dark-mode .stat-divider {
    background: rgba(255,255,255,.15) !important;
}


/* Hero stats */
html.dark-mode .hero-stats-wrap .stat-number,
html.dark-mode .hero-stat-number {
    color: var(--lego-yellow) !important;
}

html.dark-mode .hero-stats-wrap .stat-label,
html.dark-mode .hero-stat-label {
    color: rgba(255,255,255,.65) !important;
}

html.dark-mode .hero-stat-divider {
    background: rgba(255,255,255,.15) !important;
}

/* ── Hero Search Modal (dark) ────────────────────────────────── */
html.dark-mode .hero-search-modal__box {
    background: #1E2128 !important;
    border: 1px solid #2A2D38;
}

html.dark-mode .hero-search-modal__title {
    color: #EEF0F5 !important;
}

html.dark-mode .hero-search-modal__close {
    background: #2A2D38 !important;
    color: #B0B8CC !important;
}

html.dark-mode .hero-search-modal__close:hover {
    background: var(--lego-red) !important;
    color: #fff !important;
}

html.dark-mode .hero-search-modal__form {
    border-color: #3A3D4A !important;
    background: #13161E !important;
}

html.dark-mode .hero-search-modal__form input[type="search"] {
    background: transparent !important;
    color: #EEF0F5 !important;
}

html.dark-mode .hero-search-modal__form input[type="search"]::placeholder {
    color: rgba(176,184,204,.5) !important;
}

/* ============================================================
   Task 9: Social Buttons — hỗ trợ SVG icons (thay emoji)
   ============================================================ */
.social-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    display: block;
}

/* Màu riêng cho từng mạng xã hội khi hover */
.social-btn[aria-label="Facebook"]:hover  { background: #1877F2 !important; }
.social-btn[aria-label="YouTube"]:hover   { background: #FF0000 !important; }
.social-btn[aria-label="Instagram"]:hover { background: linear-gradient(45deg, #833ab4, #fd1d1d, #fcb045) !important; }
.social-btn[aria-label="TikTok"]:hover    { background: #010101 !important; }

/* ============================================================
   Task 12: Stud Decoration — Animation on page load
   ============================================================ */
.lego-studs-decoration .stud,
.footer-studs-row .stud,
.archive-hero-studs .stud {
    animation: studPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Staggered delay theo vị trí */
.lego-studs-decoration .stud:nth-child(1),
.footer-studs-row .stud:nth-child(1)  { animation-delay: 0s; }
.lego-studs-decoration .stud:nth-child(2),
.footer-studs-row .stud:nth-child(2)  { animation-delay: 0.06s; }
.lego-studs-decoration .stud:nth-child(3),
.footer-studs-row .stud:nth-child(3)  { animation-delay: 0.12s; }
.lego-studs-decoration .stud:nth-child(4),
.footer-studs-row .stud:nth-child(4)  { animation-delay: 0.18s; }
.lego-studs-decoration .stud:nth-child(5),
.footer-studs-row .stud:nth-child(5)  { animation-delay: 0.24s; }
.lego-studs-decoration .stud:nth-child(6),
.footer-studs-row .stud:nth-child(6)  { animation-delay: 0.30s; }
.lego-studs-decoration .stud:nth-child(n+7),
.footer-studs-row .stud:nth-child(n+7) { animation-delay: 0.36s; }

@keyframes studPop {
    from { transform: scale(0.3); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ============================================================
   Task 13 (Bonus): Reading Progress Bar — Single Post
   ============================================================ */
.lego-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-amber));
    z-index: 99998;
    transition: width 0.1s linear;
    border-radius: 0 2px 2px 0;
}

/* ── End of main.css ────────────────────────────────────────────────────── */

/* ================================================================
   html.dark-mode — .lego-review-box (manual toggle)
   Bao gồm mọi sub-component bên trong review box:
   header, set-info-grid, ratings, pros/cons, verdict, buy section.
   ================================================================ */

/* Wrapper */
html.dark-mode .lego-review-box {
    background: #1E2128 !important;
    border-color: #2A2D38 !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.7) !important;
}

/* ── Header — giữ gradient navy, chỉ cần điều chỉnh nhỏ ─────── */
html.dark-mode .lego-review-header {
    background: linear-gradient(135deg, #0d1b2a 0%, #112244 60%, #0a1829 100%) !important;
}

html.dark-mode .lego-review-set-name {
    color: #EEF0F5 !important;
}

html.dark-mode .lego-set-number {
    color: rgba(255,255,255,.6) !important;
}

/* Badge (yellow on dark → OK by default, confirm) */
html.dark-mode .lego-review-badge {
    background: var(--lego-yellow) !important;
    color: #111 !important;
}

/* ── Overall Score box ───────────────────────────────────────── */
html.dark-mode .lego-overall-score {
    background: rgba(0,0,0,.45) !important;
    border-color: rgba(255,255,255,.15) !important;
}

/* ── Set Info Grid ───────────────────────────────────────────── */
html.dark-mode .lego-set-info-grid {
    background: #2A2D38 !important;  /* gap color */
    border-top-color: #2A2D38 !important;
}

html.dark-mode .set-info-item {
    background: #1E2128 !important;
}

html.dark-mode .set-info-item:hover {
    background: #252830 !important;
}

html.dark-mode .set-info-item .info-label {
    color: #888FA0 !important;
}

html.dark-mode .set-info-item .info-value {
    color: #EEF0F5 !important;
}

/* ── Ratings Breakdown ───────────────────────────────────────── */
html.dark-mode .lego-ratings-breakdown {
    background: #13161E !important;
}

html.dark-mode .breakdown-title {
    color: #EEF0F5 !important;
}

html.dark-mode .rating-bar-label {
    color: #B0B8CC !important;
}

html.dark-mode .rating-bar-track {
    /* Tăng contrast: nền đủ sáng để fill nổi bật, viền mỏng định hình */
    background: #313642 !important;
    border: 1px solid #3A3E4D !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.4) !important;
}

html.dark-mode .rating-bar-fill {
    background: #4A9EFF !important;
    box-shadow: 0 0 8px rgba(74,158,255,.3) !important;
}

html.dark-mode .rating-bar-score {
    color: var(--color-accent) !important;
}

/* ── Pros & Cons ─────────────────────────────────────────────── */
html.dark-mode .lego-pros-cons {
    background: #1E2128 !important;
}

html.dark-mode .pros-column {
    background: linear-gradient(135deg, #0d2118, #112a1e) !important;
    border-color: #1a4a2e !important;
}

html.dark-mode .cons-column {
    background: linear-gradient(135deg, #2a1010, #351515) !important;
    border-color: #5a2020 !important;
}

html.dark-mode .pros-column li,
html.dark-mode .cons-column li {
    color: #B0B8CC !important;
}

/* ── Verdict ─────────────────────────────────────────────────── */
html.dark-mode .lego-verdict {
    background: linear-gradient(135deg, #0a1829, #0d2240) !important;
}

/* Verdict text đã dùng rgba(255,255,255,.9) → không cần thay đổi */

/* ── Buy Section ─────────────────────────────────────────────── */
html.dark-mode .lego-buy-section {
    background: #13161E !important;
    border-top-color: #2A2D38 !important;
}

html.dark-mode .buy-price {
    color: var(--color-accent) !important;
}

/* Buy button — gradient đã tối, giữ nguyên */
html.dark-mode .lego-buy-btn {
    color: #ffffff !important;
}

/* ── Stud decoration (top of box) ────────────────────────────── */
html.dark-mode .lego-studs-decoration {
    background: #13161E !important;
}